* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -ms-content-zooming: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.hidden {display:none;}

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-size: 16px;
  background-color: #000;
  color: #fff;
}
html, body,*,.ui-widget {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;
}
b {font-weight:500;}
.ui-widget-header {font-weight:inherit !important;}
.ui-widget.ui-widget-content,.ui-tabs .ui-tabs-nav {background:transparent;border:0 !important;}
.ui-tabs .ui-tabs-nav li {border-radius: 10px 10px 0 0;background:white;}
.ui-tabs .ui-tabs-nav li.ui-tabs-active{background:dodgerblue}

a, a:hover, a:active, a:visited {
  text-decoration: none;
  color: inherit;
}

#pano {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#titleBar {
  position: absolute;
  top: 0;
  left: 0;
  right: 40px;
  height: 40px;
  text-align: center;
}

.mobile #titleBar {
  height: 50px;
  right: 50px;
}

/* If there is a fullscreen button the title bar must make space for it */
body.fullscreen-enabled #titleBar {
  right: 80px;
}

body.fullscreen-enabled.mobile #titleBar {
  right: 100px;
}

/* If there are multiple scenes the title bar must make space for the scene list toggle */
body.multiple-scenes #titleBar {
  left: 40px;
}

body.multiple-scenes.mobile #titleBar {
  left: 50px;
}

#titleBar .sceneName {
  width: 100%;
  height: 100%;
  line-height: 30px;
  padding: 5px;
  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.mobile #titleBar .sceneName {
  line-height: 40px;
}

#fullscreenToggle {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

.mobile #fullscreenToggle {
  width: 50px;
  height: 50px;
}

body.fullscreen-enabled #fullscreenToggle {
  display: block;
}

#fullscreenToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #fullscreenToggle .icon {
  top: 10px;
  right: 10px;
}

#fullscreenToggle .icon.on {
  display: none;
}

#fullscreenToggle .icon.off {
  display: block;
}

#fullscreenToggle.enabled .icon.on {
  display: block;
}

#fullscreenToggle.enabled .icon.off {
  display: none;
}

#autorotateToggle {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

.mobile #autorotateToggle {
  width: 50px;
  height: 50px;
}

/* If there is a fullscreen button, autorotate must placed a bit to the left */
body.fullscreen-enabled #autorotateToggle {
  right: 40px;
}

body.fullscreen-enabled.mobile #autorotateToggle {
  right: 50px;
}

#autorotateToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #autorotateToggle .icon {
  top: 10px;
  right: 10px;
}

#autorotateToggle .icon.on {
  display: none;
}

#autorotateToggle .icon.off {
  display: block;
}

#autorotateToggle.enabled .icon.on {
  display: block;
}

#autorotateToggle.enabled .icon.off {
  display: none;
}

#sceneListToggle {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

.mobile #sceneListToggle {
  width: 50px;
  height: 50px;
}

#sceneListToggle .text {
  position: absolute;
  top: 5px;
  left: 15px;
  width: 100%;
  line-height: 30px;
}

#sceneListToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #sceneListToggle .icon {
  top: 10px;
  right: 10px;
}

#sceneListToggle .icon.on {
  display: none;
}

#sceneListToggle .icon.off {
  display: block;
}

#sceneListToggle.enabled .icon.on {
  display: block;
}

#sceneListToggle.enabled .icon.off {
  display: none;
}

#sceneList {
  position: absolute;
  top: 0;
  margin-left: -330px;
  padding-top: 40px;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  transition: margin-left 0.5s ease-in-out;
}

.mobile #sceneList {
  padding-top: 50px;
}

#sceneList .scenes {
  width: 100%;
  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);
}

.mobile #sceneList {
  width: 100%;
  height: 100%;
  left: -100%;
}

.mobile #sceneList.enabled {
  margin-left: 100%;
}

.mobile #sceneList .scenes {
  height: 100%;
}

#sceneList.enabled {
  margin-left: 0;
}

#sceneList .scene {
  display: block;
  width: 100%;
  height: 30px;
}

.mobile #sceneList .scene {
  height: 40px;
}

#sceneList .scene .text {
  width: 100%;
  height: 100%;
  padding: 0 15px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile #sceneList .scene .text {
  line-height: 40px;
}

.no-touch #sceneList .scene:hover {
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

#sceneList .scene.current {
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

/* Hide scene list when only a single scene exists */
body.single-scene #sceneList, body.single-scene #sceneListToggle {
  display: none;
}

/* Link hotspot */

.link-hotspot {
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.no-touch .link-hotspot:hover {
  opacity: 1;
}

.mobile .link-hotspot {
  width: 70px;
  height: 70px;
}

.link-hotspot-icon {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.link-hotspot-tooltip {
  position: absolute;
  left: 100%;
  top: 14px; /* ( 60 - (16 + 2*8) ) / 2 */

  margin-left: 3px;

  font-size: 16px;

  max-width: 300px;

  padding: 8px 10px;

  border-radius: 5px;

  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);

  color: #fff;

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  cursor: pointer;

  opacity: 0;

  -ms-transform: translateX(-8px);
  -webkit-transform: translateX(-8px);
  transform: translateX(-8px);

  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              opacity 0.3s;
}

.mobile .link-hotspot {
  top: 19px; /* ( 70 - (16 + 2*8) ) / 2 */
}

.no-touch .link-hotspot:hover .link-hotspot-tooltip {
  opacity: 1;
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

/* Prevent tooltip from triggering */
.link-hotspot-tooltip {
  pointer-events: none;
}
.no-touch .link-hotspot:hover .link-hotspot-tooltip {
  pointer-events: all;
}

/* Fallback mode without pointer-events (IE8-10) */
.tooltip-fallback .link-hotspot-tooltip {
  display: none;
}
.no-touch .tooltip-fallback .link-hotspot:hover .link-hotspot-tooltip {
  display: block;
}

/* Info hotspot */

.info-hotspot {
  line-height: 1.2em;
  opacity: 0.9;
  transition: opacity 0.2s 0.2s;
}

.no-touch .info-hotspot:hover {
  opacity: 1;
  transition: opacity 0.2s;
}

.info-hotspot.visible {
  opacity: 1;
}

.info-hotspot .info-hotspot-header {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background-color: rgb(103,115,131);
  cursor: pointer;
  transition: width 0.3s ease-in-out 0.5s,
              border-radius 0.3s ease-in-out 0.5s;
}

.mobile .info-hotspot .info-hotspot-header {
  width: 50px;
  height: 50px;
  border-radius: 25px;
}

.desktop.no-touch .info-hotspot .info-hotspot-header:hover {
  width: 360px;
  border-radius: 5px;
  transition: width 0.3s ease-in-out,
              border-radius 0.3s ease-in-out;
}

.desktop .info-hotspot.visible .info-hotspot-header,
.desktop.no-touch .info-hotspot.visible .info-hotspot-header:hover {
  width: 360px;
  border-radius: 5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  transition: width 0.3s ease-in-out,
              border-radius 0.3s ease-in-out;
}

.info-hotspot .info-hotspot-icon-wrapper {
  width: 40px;
  height: 40px;
}

.mobile .info-hotspot .info-hotspot-icon-wrapper {
  width: 50px;
  height: 50px;
}

.info-hotspot .info-hotspot-icon {
  width: 90%;
  height: 90%;
  margin: 5%;
}

.info-hotspot .info-hotspot-title-wrapper {
  position: absolute;
  left: 40px;
  top: 0;
  width: 0;
  height: 40px;
  padding: 0;
  overflow: hidden;
  transition: width 0s 0.4s,
              padding 0s 0.4s;
}

.desktop .info-hotspot.visible .info-hotspot-title-wrapper,
.desktop.no-touch .info-hotspot .info-hotspot-header:hover .info-hotspot-title-wrapper {
  width: 220px;
  padding: 0 5px;
  transition: width 0s 0.4s,
              padding 0s 0.4s;
}

.info-hotspot .info-hotspot-title-wrapper:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.info-hotspot .info-hotspot-title {
  display: inline-block;
  vertical-align: middle;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.info-hotspot .info-hotspot-close-wrapper {
  position: absolute;
  left: 360px;
  top: 0;
  height: 40px;
  width: 40px;
  border-top-right-radius: 5px;
  background-color: rgb(78,88,104);
  visibility: hidden;
  -ms-transform: perspective(200px) rotateY(90deg);
  -webkit-transform: perspective(200px) rotateY(90deg);
  transform: perspective(200px) rotateY(90deg);
  -ms-transform-origin: 0 50% 0;
  -webkit-transform-origin: 0 50% 0;
  transform-origin: 0 50% 0;
  transition: -ms-transform 0.3s 0.3s,
              -webkit-transform 0.3s 0.3s,
              transform 0.3s 0.3s,
              visibility 0s 0.6s;
  -webkit-transition: -webkit-transform 0.3s 0.3s,
                      visibility 0s 0.6s;
}

.desktop .info-hotspot.visible .info-hotspot-close-wrapper {
  visibility: visible;
  -ms-transform: perspective(200px) rotateY(0deg);
  -webkit-transform: perspective(200px) rotateY(0deg);
  transform: perspective(200px) rotateY(0deg);
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              visibility 0s 0s;
  -webkit-transition: -webkit-transform 0.3s,
                      visibility 0s 0s;
}

.info-hotspot .info-hotspot-close-icon {
  width: 70%;
  height: 70%;
  margin: 15%;
}

.info-hotspot .info-hotspot-text {
  position: absolute;
  width: 400px;
  height: auto;
  max-height: 66vh;
  top: 40px;
  left: 0;
  padding: 10px;
  background-color: rgb(58,68,84);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow-y: auto;
  visibility: hidden;
  -ms-transform: perspective(200px) rotateX(-90deg);
  -webkit-transform: perspective(200px) rotateX(-90deg);
  transform: perspective(200px) rotateX(-90deg);
  -ms-transform-origin: 50% 0 0;
  -webkit-transform-origin: 50% 0 0;
  transform-origin: 50% 0 0;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              visibility 0s 0.3s;
  -webkit-transition: -webkit-transform 0.3s,
                      visibility 0s 0.3s;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.desktop .info-hotspot.visible .info-hotspot-text {
  visibility: visible;
  -ms-transform: perspective(200px) rotateX(0deg);
  -webkit-transform: perspective(200px) rotateX(0deg);
  transform: perspective(200px) rotateX(0deg);
  transition: -ms-transform 0.3s 0.3s,
              -webkit-transform 0.3s 0.3s,
              transform 0.3s 0.3s,
              visibility 0s 0s;
  -webkit-transition: -webkit-transform 0.3s 0.3s,
                      visibility 0s 0s;
}

/* Info hotspot modal */

.desktop .info-hotspot-modal {
  display: none;
}

.info-hotspot-modal {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 11000 !important;
  background-color: rgba(0,0,0,.5);
  line-height: 1.2em;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out 0.5s,
              visibility 0s 0.7s;
}

.info-hotspot-modal.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease-in-out,
              visibility 0s 0s;
}

.info-hotspot-modal .info-hotspot-header {
  position: absolute;
  top: 60px;
  left: 10px;
  right: 10px;
  width: auto;
  height: 50px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
  opacity: 0;
  transition: opacity 0.3s ease-in-out 0.2s;
}

.info-hotspot-modal.visible .info-hotspot-header {
  opacity: 1;
  transition: opacity 0.3s ease-in-out 0.2s;
}

.info-hotspot-modal .info-hotspot-icon-wrapper {
  width: 50px;
  height: 50px;
}

.info-hotspot-modal .info-hotspot-icon {
  width: 90%;
  height: 90%;
  margin: 5%;
}

.info-hotspot-modal .info-hotspot-title-wrapper {
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  width: auto;
  height: 50px;
  padding: 0 10px;
}

.info-hotspot-modal .info-hotspot-title-wrapper:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.info-hotspot-modal .info-hotspot-title {
  display: inline-block;
  vertical-align: middle;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.info-hotspot-modal .info-hotspot-close-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-color: rgb(78,88,104);
  background-color: rgba(78,88,104,0.8);
  cursor: pointer;
}

.info-hotspot-modal .info-hotspot-close-icon {
  width: 70%;
  height: 70%;
  margin: 15%;
}

.info-hotspot-modal .info-hotspot-text {
  position: absolute;
  top: 110px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  padding: 10px;
  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.info-hotspot-modal.visible .info-hotspot-text {
  opacity: 1;
  transition: opacity 0.3s ease-in-out 0.4s;
}

/* View control buttons */

.viewControlButton {
  display: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

body.view-control-buttons .viewControlButton {
  display: block;
}

/* Hide controls when width is too small */
@media (max-width: 600px) {
  body.view-control-buttons .viewControlButton {
    display: none;
  }
}

.viewControlButton .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

/* Center is at margin-left: -20px */
.viewControlButton-1 {
  margin-left: -145px;
}
.viewControlButton-2 {
  margin-left: -95px;
}
.viewControlButton-3 {
  margin-left: -45px;
}
.viewControlButton-4 {
  margin-left: 5px;
}
.viewControlButton-5 {
  margin-left: 55px;
}
.viewControlButton-6 {
  margin-left: 105px;
}

#toggleDeviceOrientation {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50px;
  right: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

#toggleDeviceOrientation img {
  width: 34px;
  margin: 8px;
}

#toggleDeviceOrientation .disable {
  display: none;
}

#toggleDeviceOrientation.enabled .disable {
  display: block;
}

#toggleDeviceOrientation.enabled .enable {
  display: none;
}

.pics {
 max-width:100%;
 max-height:100%;
}
#info,#calendar,#demo {
 position:absolute;
 width: 100%;
 height: 100%;
 background-color: rgba(48,48,48,0.92);
 padding: 20px;
 overflow-y:auto;
 /*padding-right: 60px;*/
 font-size: 1.1rem;
}
#demo div.title {
 text-align: center;
 position: absolute;
 width: 100%;
 bottom: 0;
 left: 0;
 margin: 0;
 background: linear-gradient(0deg, #222 80%, transparent);
 padding: 10px;
}
#demo div.demo {
 display: block;
 position: absolute;
 left: 0;
 top: 0;
 width: 100vw;
 height: calc(100% - 80px);
 background:url(img/demo.gif) center no-repeat;
 background-size:contain;
}
#demo div.button {
 font-size: 40px;
 height: 60px;
 line-height: 40px;
 width:80vw;
 margin: 8px auto;
}
#demo .demoicon {
 display: inline-block;
 width: 30px;
 height: 30px;
 background: url(./img/enable.png);
 background-size: cover;
}
#info {
 padding-bottom: 70px;
}
#info #description {
 background: white;
 color: #222;
 padding: 20px;
 border-radius: 20px;
 line-height: 120%;
}
a.menuicon {margin:0 8px;}
a.menuicon img {width:48px;}
span.closeinfo {
 display: block;
 top: 5px;
 right: 5px;
 position: relative;
 float:right;
 cursor: pointer;
 z-index: 1;
 width: 40px;
 height: 40px;
 border-radius: 20px;
 color: white;
 border: 0;
 background: url(img/close.png) center no-repeat;
 background-color: dodgerblue;
 background-size: 80%;
}
span.homeinfolink {
 position:absolute;
 bottom: 10px;
 left: 10px;
 background-color: rgba(0,0,0,0.6);
 padding: 5px 25px 15px 0;
 border-radius: 10px;
 cursor:pointer;
}
span.homeinfolink img {
 position:relative;
 top:5px;
 left:5px;
}

body.editor {
 background-color:white;
 padding: 10px;
 font-weight: 400;
}
body.editor div.page {
 position:absolute;
 left:0;top:0;
 height:100vh;
 overflow-y:auto;
 background:white;
 width: 100vw;
 z-index: 3;
 transition: 0.3s all;
}
body.editor div.page::-webkit-scrollbar {
  display: none;
}
body.editor div.images {
 position:absolute;
 right:0;top:0;
 width:240px;
 height: 100%;
 padding: 0 5px;
 background-color: #222;
 overflow-y: auto;
}
body.editor div.images h4 {
 position:sticky;
 top:0;
 color:white;
 z-index:1;
 width: 100%;
}
body.editor div.images div.img {
 margin-bottom:0;
 position:relative;
}
body.editor div.images div.img div.delete {
 position: absolute;
 width: 30px;
 height: 30px;
 background-color: rgba(255, 60,60,0.8);
 right: 0px;
 top: 0px;
 color: white;
 border-radius: 0px 0 0 20px;
 text-align: center;
 border: 2px solid white;
 font-weight: 800;
 padding: 0 0 4px 4px;
 border-width: 0px 0 2px 2px;
}
div.imguploader {
 position: absolute;
 right: 5px;
 top: 5px;
 background-color: dodgerblue;
 width: 64px;
 text-align: center;
 height: 25px;
 border-radius: 10px;
 border: 1px solid white;
 z-index:1;
     font-size: 12px;
    line-height: 22px;
}
div.imguploader:hover {background-color:steelblue}
body.editor div.images div.img img {
 max-width:100%;
 -webkit-user-drag: auto;
 margin:0;
}
body.editor ul.slist li.hint {
  border: 1px solid #ffc49a;
  background: #feffb4;
}
body.editor ul.slist li.active {
  border: 1px solid #ffa5a5;
  background: #ffe7e7;
}
body.editor h4 {padding:5px;margin:0;color:black;}
div.textinput {
 display:inline-flex;
 margin:2px 0;
 /*border: 1px dashed #888;*/
 padding: 4px;
 border-radius: 10px;
}
div.textinput br {flex-basis:100%;}
div.textinput.admin * {
 flex-grow: initial !important;
}
div.textinput p {
 color: black;
 flex: 1;
 text-align: right;
 height: 40px;
 padding-right: 5px;
 margin: 0;
 line-height: 40px;
 min-width: 150px;
}
div.textinput.admin p {
 min-width: auto;
}
div.textinput div.input {
 display:flex;
 line-height: 40px;
 color: black;
 flex-wrap: wrap;
 height: max-content;
}
div.textinput div.input input,div.textinput select {
 border: 1px solid #ccc;
 border-radius: 10px;
 padding: 0 10px;
 flex:1;
 margin:0 5px;
}
div.textinput select {
 height: 40px;
     max-width: 200px;
}
#apttabs div.textinput p,#apttabs div.textinput div.input,#apttabs div.textinput div.input input,#apttabs div.textinput select {
 height:26px;line-height:26px;
}
div.textinput div.input input[type="date"] {
 flex-grow:initial;
}
div.textinput div.input input[type="checkbox"] {
 max-width: 20px !important;
}
div.textinput div.input input[type="radio"] {display:none}
div.textinput div.input input[type="radio"]+label {background:#eee;margin-left:6px;padding:0px 6px;border-radius:6px;}
div.textinput div.input input[type="radio"]:checked+label {background:dodgerblue;color:white;}

div.textinput div.input input.mw {max-width:100px; }
div.saveButton {flex: 1;}
div.saveButton button {
 width: 100%;
 height: 100%;
 border-radius: 10px;
 border: 1px solid white;
 color: white;
 cursor:pointer;
}
#showmce {
 position:absolute;
 right:20px;
 top:10px;
 border-radius: 10px;
 background-color: dodgerblue;
 color: white;
 cursor:pointer;
padding:0 20px; 
z-index:2;
}

.wrapper {
 width: 360px;
 padding: 20px;
 margin: 0;
 font-size: 1rem;
 font-weight: 400;
 line-height: 1.5;
 color: #212529;
 text-align: left;
 background-color: #fff;
 width: 100%;
 height: 100%;
 overflow-y: auto;
}
.wrapper input {max-width:250px;}
.h2, h2 {
    font-size: 3.6rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}
.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.button {
 background-color: dodgerblue;
 color: white !important;
 padding: 5px 10px;
 border-radius: 10px;
 margin: 5px;
 cursor:pointer;
 vertical-align: top;
 min-width: 40px;
 border:0;
}
.button.offer {color:yellow !important}
.button.offer.samew {width:240px;display:block;}
button:hover, .button:hover {background-color:#238;}
button, input {overflow:visible;}
button, input, optgroup, select, textarea {
 margin: 0;
 font-size: inherit;
 line-height: inherit;
}
#infoform {
 display:none;
 position: fixed;
 background: rgba(0,0,0,0.9);
 padding: 20px;
 box-sizing: border-box;
 width: 100vw;
 height: 100vh;
 left: 0;
 top: 0;
 color: white;
 overflow-y: auto;
 z-index:4;
}
#infoform div.close {
 position: absolute;
 right: 30px;
 top: 30px;
 width: 40px;
 height: 40px;
 cursor: pointer;
 border-radius: 20px;
 background: url(img/close.png) center no-repeat;
 background-color: dodgerblue;
 background-size:80%;
}
div.infoform form button {
 cursor:pointer;
}
div.infoform p.lbl {width:120px; text-align:right;display:inline-block;}
div.infoform textarea {width:100%;padding: 10px;}
div.gotoinfoform {
 cursor: pointer;
 background-color: #f8f8f8;
 margin: 5px 0;
 padding: 5px;
 border: 2px solid #888;
 border-radius: 10px;
 display: table;
}
.aptdesc {
 font-size: 16px;
 padding: 10px 20px;
 background: #eee;
 line-height: 120%;
 overflow: auto;
}
.aptdesc p {    margin: 5px 0;}
.aptdesc br {
 content: "";
 margin-bottom: 4px;
 display: block;
}
div.gotoinfoform:hover {
 background-color:#cdf;
}
div.gotoinfoform.unavailable {background-color:#888;cursor:auto;font-size: 14px;    line-height: 0.4;}
div.infoform {
 border: 2px solid #ccc;
 border-radius: 20px;
 overflow:hidden;
 background: #fff;
 color: #222;
}
div.infoform form button:hover {background:dodgerblue;}
div.infoform div.title,div.infoform form button {
 padding: 10px 20px;
}
div.infoform form textarea {background:#eee}
div.infoform input {
 margin: 4px;
 background:#eee;
 border: 1px solid #888;
 border-radius: 10px;
 width:300px;
 padding: 5px;
}
div.infoform form{
 padding:10px;
}
label {
    display: inline-block;
    margin-bottom: 0.5rem;
}
.invalid-feedback {
   display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #dc3545;
}
.form-group {
    margin-bottom: 1rem;
}
.wrapper #menu {
 background-color: dodgerblue;
 width: 100%;
 text-align:right;
 position:fixed;
 top:0;
 left:0;
 z-index: 4;
 padding-right: 0;
 transition:all 0.4s;
}
body.editor .wrapper.editing #menu {width: calc(100vw - 240px);}
body.editor .wrapper .page {width: 100vw;}
body.editor .wrapper.editing .page {width: calc(100vw - 240px);}

.wrapper #menu ul {
 display:block;
    height: 6px;
    padding: 0 0 5px 0;
    margin: 0;
}
.wrapper #menu ul li{
     display: inline-block;
     background-color: white;
    margin: 5px 10px;
    padding: 0 10px;
    border-radius: 0 0 10px 10px;
        vertical-align: top;
        border:1px solid dodgerblue;
}
.wrapper #menu ul>li>ul {height:auto;transition:all 0.4s;min-height:30px}
.wrapper #menu ul>li>ul>li {display:block;border:0;border-radius:0;margin:0 10px;overflow:hidden;transition:all 0.4s;}
.wrapper #menu ul>li>ul>li:not(:last-child) {max-height:0;}
.wrapper #menu ul>li:hover>ul>li:not(:last-child) {max-height:30px;}
.wrapper #menu ul>li:hover>ul>li:last-child {opacity:0;}
.wrapper #menu ul li.active {
 color: dodgerblue;
 text-shadow: 0px 0px 1px black;
}
.wrapper #menu ul li a:hover {color:dodgerblue}
.wrapper #menu ul li a {
 line-height:24px;
 display:block;
}
.wrapper #menu ul li>div {display:none;}
.wrapper #menu ul li:hover>div {
 display:block;
top: 100px;
    text-align: left;
    background-color: white;
    border: 1px solid #aaa;
    padding: 10px;
    border-radius: 10px;
 
}
.wrapper h4 {position:relative;display: inline-block;}
.wrapper h4 p {
 display: inline-block;
 padding: 0;
 margin: 0;
 width: 24px;
 height: 24px;
 border: 2px solid dodgerblue;
 border-bottom-width: 0;
 border-radius: 5px;
 margin-left: 5px;
  pointer-events:none;
}
.wrapper h4 span {
 display: inline-block;
 width: 0;
 height: 0;
 transition: all 0.2s;
 border-left: 8px solid transparent;
 border-right: 8px solid transparent;
 border-top: 10px solid dodgerblue;
 left: 2px;
 top: 0px;
 position: relative;
 pointer-events:none;
}
.wrapper h4.on span {
 transform:rotate(180deg);
}
.wrapper h4.on p {border-bottom-width:2px;}
.periods {max-height:0;transition:all 0.4s;overflow:hidden;}
.periods div {
 margin: 5px;
 position:relative;
}
.periods>div {
 padding:10px;
 border: 1px solid #ccc;
 border-radius: 10px;
}
.periods>div.promo {background-color:lightyellow;}
.periods>div.promo.outdated,.periods>div.promo.outdated:hover {background-color:indianred;}
.periods>div.promo.blocking {background:repeating-linear-gradient(  135deg,  lightyellow,  lightyellow 10px,  #fec 10px,  #fec 20px);}
.periods>div.promo.blocking:hover {background:repeating-linear-gradient(  135deg,  lightyellow,  lightyellow 10px,  yellow 10px,  yellow 20px);}
.periods>div a {
 background-color: dodgerblue;
 color: white;
 padding: 5px;
 border-radius: 10px;
 margin: 5px;
}
.periods>div a.whatsapp {
 background: url(./img/whatsapp.png) center no-repeat;
 background-size: contain;
 width: 40px;
 height: 36px;
 display: inline-block;
 position: relative;
 padding: 0;
 margin: 0;
 top: 11px;
}
.periods>div>button {
 border-radius: 10px;
 position: relative;
 min-width: 40px;
 height: 30px;
 top: -8px;
 background-color: dodgerblue;
 padding-top: 1px;
 float: right;
}
.periods>div>button.delete {
 border: 2px solid red;
     background: red;
}
.periods>div:hover {background-color:#fff}
.periods>div.promo:hover {background-color:#ffa}
.mainper {
 border: 1px solid #aaa;
 border-radius: 10px;
 margin-bottom:10px;
 background-color: #eee;
 overflow:hidden;
}
.mainper h4 {
 margin:0;
 padding: 10px;
}
.homelink { 
 width: 50px;
 height: 34px;
 border-radius: 10px;
 border: 1px solid white;
 background-color: dodgerblue;
 color: white;
 cursor: pointer;
 position: absolute;
 line-height: 21px;
 font-size: 40px;
 padding: 0;
 margin: 0;
 text-align: center;
 right: 120px;
 top: 4px;
}
div.tox.tox-tinymce {
 position: fixed;
    width: 96vw;
    height: 96vh !important;
    z-index: 5;
    left: 2vw;
    top: 2vh;
}
#mce {
z-index:4;
background:rgba(0,0,0,0.8);
position:fixed;
left:0;
top:0;
width:100vw;
height:100vh;
display:none;}
#mce .closebtn {
     display: block;
    position: fixed;
    right: 3vw;
    top: 4vh;
    width: 40px;
    height: 40px;
    border: 2px solid #222;
    z-index: 6;
    border-radius: 20px;
    color: black;
    text-align: center;
    font-size: 25px;
    cursor:pointer;
}
div.modal {
 display:none;
 position: fixed;
 background: white;
 color: #222;
 left: 0;
 top: 0;
 width: 100vw;
 height: 100vh;
 padding: 2vw;
 z-index:5;
     overflow-y: auto;
}
div.modal .closemodal {position:absolute;top:10px;right:10px;cursor:pointer;}
div.modal div.textinput {display:inline-flex;height: auto;}
div.modal div.textinput p {text-align: left;}
div.modal div.textinput div.input {line-height:18px;}
div.modal div.textinput input {}
#savebtn {
 position: fixed;
 bottom: 0;
 right: 0;
 width: 150px;
 height: 60px;
 z-index: 5;
 font-weight: bold;
 font-size: 30px;
}
#title {width:300px;}
div.textinput div.input {margin-left:10px;}
div.textinput div.input input {height:40px;}

.descr {
 position: relative;
 margin: 10px;
 padding: 10px;
 max-height: max-content;
 min-height: 40px;
 overflow: hidden;
 border-radius: 20px;
 background: #ddd;
 flex: 1;
     border: 1px solid #888;
}
.apartment .descr {min-height:50px;flex-grow:1}
.floater {padding:0 10px;}
.apartment {
 
 padding: 0;
 display: flex;
 flex: 0 0 100%;
 background:white;
 position:relative;
 overflow:hidden;
 flex-wrap: wrap;
 flex-direction: column;
}
.apartment div {/**position:relative;    white-space: nowrap;overflow:hidden*/}
.apartment div.br {
 flex-basis: 100%;
 height: 5px;
 clear: both;
}
.aptgallery {flex-basis:100%;height:160px;    text-align: left;overflow-y:hidden;}
.aptgallery div {display:inline-block;height:140px;padding: 0 3px;}
.aptgallery div.img {min-width:108px;}
.aptgallery div:not(.add) {}
.aptgallery div.add {width: 140px;background: url(img/add.png) center no-repeat;cursor:pointer;opacity:0.6;}
.aptgallery div.add:hover {opacity:0.8;background-color:#eee}
.aptgallery div.img div.mvl,.aptgallery div.img div.del,.aptgallery div.img div.mvr {
 position: absolute;
 display: block;
 width: 30px;
 height: 30px;
 color: white;
 bottom: 3px;
 background: rgba(0,0,0,0.6);
 border-radius: 2px;
 line-height: 24px;
 font-weight: 600;
 text-align: center;
 cursor:pointer;
 border-radius: 20px;
 border: 2px solid #aaa;
}
.aptgallery div.img div.mvl:hover,.aptgallery div.img div.del:hover,.aptgallery div.img div.mvr:hover {
 background:#888;
}
.aptgallery div.img div.mvl {left:8px;}
.aptgallery div.img div.del {left:38px;}
.aptgallery div.img div.mvr {left:68px;}
.aptgallery img {height:100%;display:block;border-radius: 10px;margin: auto;}

.apartment h4 {color:#222;}
.apartment .textinput {
 width: 100%;
 display: inline-flex;
 flex-wrap: wrap;
}
.ui-tabs .ui-tabs-panel.ppanel {
 /*display:flex;*/
}
.ui-tabs .ui-tabs-panel.ppanel, .narrowDates{
 background-color: white !important;
 border-radius: 0 20px 20px 20px !important;
}
.pppanel {
 padding: 10px;
 display:inline-block;
 background-color: #ddd;
 margin: 10px;
 border-radius: 10px;
 width: 360px;
 max-width: 95%;
 text-align: center;
}
.ptab {
 color: #222;
 position: absolute !important;
 right: 20px;
 top: 10px;
}
.pppanel>div {
 width:100%;
 text-align:center;
}
#sppbtn {
 position: relative;
 top: -5px;
}
.narrowDates input[type="date"] {padding:5px;border:0;background-color: #ddd;
    border-radius: 10px;
    margin-left: 4px;}
.number {display: inline-block;
 padding: 5px;
 margin-right: 5px;
 border: 4px solid dodgerblue;
 border-radius: 30px;
 height: 20px;
 width: 20px;
 text-align: center;
 box-sizing: content-box;
 background: #eee;
 line-height: 18px;
 font-weight: 600;
}
#slider svg {
 filter:drop-shadow(0px 0px 2px rgb(0 0 0 / 1));
 transition:all 0.2s;
}
#slider svg:hover {
 transform:scale(1.2);
}
.flexbr {flex-basis:100%;}
.galicon {
 display: inline-block;
 padding: 10px 10px 6px 58px;
 background: url(img/galicon.png) 5px center no-repeat;
 background-size: 48px;
 height: 57px;
 line-height: 36px;
 background-color: rgba(255,255,255,0.4);
 border-radius: 10px;
}
#slider div.title {
 text-shadow: 0 0px 2px black;
 filter: drop-shadow(0px 0px 2px black);
 position: absolute;
 left: 20px;
 top: 20px;
 font-size: 40px;
 z-index:2;
}

.maininfo {display:flex;    height: 100vh;flex-direction:column}
.maininfo>div:first-child {text-align:center;}
#apttabs {text-align:left;flex-grow:1;height: 100%;display: flex;flex-direction: column;    background: #ddd;}
#apttabs>ul {display: inline-block;
    padding: 40px 0 0 10px;
    margin: 0;}
#apttabs>ul>li {
 display:inline-block;
 padding: 5px 10px;
 background: #eee;
 border-radius: 10px 10px 0 0;
}
#apttabs>ul>li.active {background:dodgerblue;color:white;}
#apttabs .apttab {    height: calc(100% - 74px); display:flex;flex-direction:column;background: white;position: relative;}
.apttab.main .floater {position:relative;}

.syncal {display:inline-flex;width: 100%;margin-bottom: 30px;    margin-top: 16px;position:relative;}
#info .syncal {
 background: #eee;
 padding: 10px 10px 40px 10px;
 border-radius: 10px;
 color: #222;
 margin-bottom: 10px;
}
.syncal>div {
 flex:1;
 border: 0.2px solid #888;
 border-width: 1px 0;
 position:relative; 
}
.syncal>div.hlday {background-color:#dba}
.syncal>div.hlday div.hlday {
 position:absolute;
 bottom:-24px;
 font-size: 12px;
 transform: rotate(45deg);
}
.syncal div.hlmonth {
 position:absolute;
 top:-20px;
 font-size: 14px;
 border-left: 1px solid #222;
 padding-left: 2px;
 height: 80px;
 display: block;
 z-index: 1;
 line-height: 14px;
}
.syncal.tsh1 div.hlmonth {height:104px}
.syncal.tsh2 div.hlmonth {height:128px}
.syncal.tsh3 div.hlmonth {height:152px}
.syncal.tsh4 div.hlmonth {height:176px}
.syncal.tsh5 div.hlmonth {height:200px}
.syncal.tsh6 div.hlmonth {height:224px}
.syncal.tsh7 div.hlmonth {height:248px}
.syncal.tsh8 div.hlmonth {height:272px}
.syncal div.freeper {
 position: absolute;
 background: lightgreen;
 z-index: 2;
 border: 1px solid #888;
 border-radius: 10px;
 text-align: center;
 top: 17px;
 left: -75%;
 font-size:14px;
 cursor:pointer;
 height: 21px;
 overflow: hidden;
 line-height: 20px;
}
.syncal div.freeper.freeweek {
 top: 2px;
 font-size: 12px;
 width: 700%;
 height: 13px;
 line-height: 10px;
 left: -50%;
 background: greenyellow;
}
.dailyptabdiv.weekly .syncal div.freeper.freeweek {left:50%;top:auto;pointer-events:none;}
.syncal div.freeper.promo {background:yellow;}
.syncal div.freeper.promo.blocking {
 background-color: #ffef00;
 background-size: 10px 10px;
 background-image: repeating-linear-gradient(45deg, yellow 0, lightyellow 3px, white 0, #dea 50%);
}
.wrapper div.legend {display:none;}
.syncal div.freeper.legend {
 position: absolute;
 left: calc(100% - 300px);
 top: -45px;
 width: max-content;
 padding: 0 10px;
}
.syncal div.freeper.promo.legend {left:calc(100% - 140px)}
.syncal>div span {display:block;height:28px;width:100%;border-left:1px solid #ccc;
 font-size: 10px;
 line-height: 10px;
 position: relative;
}
.syncal>div span:first-child,.syncal>div span:last-child {height:5px;}
.syncal>div span:not(:first-child):not(:last-child) {height:45px;}
.syncal.tsh1>div span:not(:first-child):not(:last-child) {height:77px}
.syncal.tsh2>div span:not(:first-child):not(:last-child) {height:99px}
.syncal.tsh3>div span:not(:first-child):not(:last-child) {height:121px}
.syncal.tsh4>div span:not(:first-child):not(:last-child) {height:143px}
.syncal.tsh5>div span:not(:first-child):not(:last-child) {height:165px}
.syncal.tsh6>div span:not(:first-child):not(:last-child) {height:187px}
.syncal.tsh7>div span:not(:first-child):not(:last-child) {height:209px}
.syncal.tsh8>div span:not(:first-child):not(:last-child) {height:231px}
.syncal>div span.in {position:relative;background-image:linear-gradient(135deg, transparent 50%, dodgerblue 50%);}
.syncal>div span.stay,.syncal>div span.befout {background:dodgerblue;border-left:0;}
.syncal>div span.befout:after {
 content: " ";
 position: relative;
 background-image: linear-gradient(135deg,dodgerblue 50%, transparent 50%);
 padding-left: 90%;
 display: block;
 width: 90%;
 height: 100%;
 z-index: 1;
}
#calendar .syncal>div span.in,
#calendar .syncal>div span.stay,
#calendar .syncal>div span.out,
#calendar .syncal>div span.befout
{
 filter: grayscale(0.2) brightness(0.5) opacity(0.5);
}
#calendar .syncal>div span.out,
#calendar .syncal>div span p 
{opacity: 0;}

.syncal>div span.out {position:relative;background-image:linear-gradient(135deg,dodgerblue 50%, transparent 50%);border-left:0;}
.syncal>div span p {
 position: absolute;
 font-size: 14px;
 z-index: 1;
 padding: 0;
 margin: 0;
 color: white;
 text-shadow: 0 0 2px black;
}
.syncal>div span.in p {padding-left: 50%;bottom: 4px;    left: 2px;}
.syncal>div span.out p {right: 3px;padding-right: 50%;top: 4px;}
.wrapper .syncal>div span.in p,.wrapper .syncal>div span.out p {
 bottom: 4px;
 height: 22px;
 border: 2px solid white;
 padding: 4px;
 border-radius: 28px;
 cursor: pointer;
 z-index:1;
}

.selper {display:inline-block;margin-bottom: 5px;}
.showprice {text-align: center;    margin-top: 5px;display: flex;}
.showprice button:disabled {flex:1;margin-bottom:5px;}
button:disabled {
 border-radius: 10px;
 background: #ddd;
 color: #888;
 margin: 5px;
}
.hlprice {
 background-color: dodgerblue;
 display: inline-block;
 color: white;
 border: 2px solid #444;
 padding: 5px;
 border-radius: 10px;
 animation: hlblinker 1s linear infinite;
 text-align: center;
 flex:1;
}
.onlyM.offers {
 text-align: center;
 border: 1px solid #eee;
 width: auto;
 margin: auto;
 padding: 10px;
 border-radius: 10px;
 background: #eee;
}
#sitetitle {
 position: absolute;
 right: 10px;
 bottom: 10px;
 max-width: 66%;
}
#showprice {display:flex;align-items:center;margin-bottom: 30px;}
#links {
 position: fixed;
 bottom: 0;
 right: 0;
 width: 100%;
 text-align: right;
 padding: 10px;
 padding-top: 25px;
 background: linear-gradient(0deg, rgba(0,0,0,0.8),rgba(0,0,0,0.2) 80%, transparent);
}

.dailyptabdiv {
 color: #222;
 padding: 20px 0;
 border-radius: 20px;
 background: #ddd;
      border: 1px solid #888;
}
.dailyptabdiv .syncal>div span:first-child {height:100px;display: flex;align-items: end;transition: all 0.5s;}
.dailyptabdiv.edit .syncal>div span:first-child {height:200px;}
.dailyptabdiv .syncal div.hlmonth {height:120px;pointer-events:none;}
.dailyptabdiv.edit .syncal div.hlmonth {height:220px;}
.dailyptabdiv .syncal>div span p {
 border-top: 2px solid #222;
 display: block;
 width: 100%;
 writing-mode: tb;
 color: #222;
 text-shadow: 0 0 black;
 font-size: 11px;
 padding-top: 2px;
 pointer-events:none;
 background:rgba(255,255,255,0.7);
}
.dailyptabdiv div.buttons {
 position: absolute;
 right: 5px;
 top: -5px;
}
.dailyptabdiv div.buttons #dpmb0 {display:block;}
.dailyptabdiv div.buttons #dpmb1 {display:none}
.dailyptabdiv div.buttons #dpmb2 {display:none}
.dailyptabdiv .dailyeditmode {display:none;}
.dailyptabdiv.edit div.buttons #dpmb0 {display:none;}
.dailyptabdiv.edit div.buttons #dpmb1 {display:inline-block;}
.dailyptabdiv.edit div.buttons #dpmb2 {display:inline-block;}
.dailyptabdiv.edit .dailyeditmode {display:block;}

.dailyptabdiv div.buttons #wpmb0 {display:block;}
.dailyptabdiv div.buttons #wpmb1 {display:none}
.dailyptabdiv div.buttons #wpmb2 {display:none}
.dailyptabdiv.edit div.buttons #wpmb0 {display:none;}
.dailyptabdiv.edit div.buttons #wpmb1 {display:inline-block;}
.dailyptabdiv.edit div.buttons #wpmb2 {display:inline-block;}

.dailypopts {
 position: relative;
 width: 100%;
 text-align: center;
 top: -10px;
 justify-content: center;
}
.dailypopts.textinput button.button {
 height: 22px;
    line-height: 10px;
    position: relative;
    top: -3px;
}

div.backup {background: dodgerblue;
    color: white;
    margin: 5px 0;
    padding: 10px;
    border-radius: 20px;    width: 300px;overflow:hidden;}
div.backup a {    background: white;
    padding: 5px;
    border-radius: 10px;
    color: dodgerblue;width: 170px;
    display: inline-block;text-align:center;}
div.backup button{margin-left: 10px;
    border-radius: 10px;
    border: 0;
    padding: 3px 10px;width: 100px;}
div.backup button:hover {background:white;}
.editgallery {position:absolute;
 z-index: 2;
 left: 10px;
 bottom: 10px;
 background: dodgerblue;
 color: white;
 border: 1px solid white;
 padding: 5px 10px;
 border-radius: 10px;
}
#onlytaken {flex-wrap:wrap;}

@keyframes hlblinker {
  50% {
    background-color: goldenrod;
  }
}

@media only screen and (max-width : 1599px)
{
  .modal div.textinput div.input input.mw {max-width:150px;}

 div.textinput div.input {font-size:14px;}
 div.textinput div.input input.mw {max-width:75px;}
}


@media only screen and (max-width : 1279px)
{
 #apttabs div.textinput div.input input[type="checkbox"] {height:14px;}
 .dailyptabdiv div.textinput {background-color:transparent;}

 form>div br {display:none;}
 
 div.textinput div.input{
  display:inline-block;
 }
 #prices .syncal {display:none}
 .mobCalPan {display:inline-flex; width: 100%;margin-bottom: 10px;flex-wrap:wrap;}
 .mobCal {
  border: 1px solid #aaa;
  padding: 10px;
  border-radius: 10px;
  margin-right:10px;
  margin-bottom:10px;    
  max-width: 100%;
  width: 360px;
  text-align: center;
 }
 .mobCal .button.offer.samew { margin:5px auto;}
 #showprice {display:none;}
}
@media only screen and (min-width : 1280px) 
{
 .nlmobile {display:none;}
 .onlyM {display:none !important}
 .showprice {display:none;}
}
@media only screen and (max-width : 1023px)
{
 .wrapper .periods>div a.whatsapp {
  width: 250px;
  height: 180px;
  position: absolute;
  right: 0;
  top: 90px;
 }
 div.textinput div.input {font-size:32px;}
 div.backup{width:100%;}
 div.backup a {width:60%;}
 div.backup button {width:30%;}
 .onlyDT:not(.keepM) {display:none !important}
 .wrapper .page{display:none;}
 .wrapper #images{display:none;}
 .wrapper h4 p {    width: 80px;height: 60px;}
 .wrapper h4 {width:100%;text-align: center;}
 .wrapper h4.on {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  border-radius: 0px;
 }
 .mainper>.button {    font-size: 60px;
    padding: 10px 20px;
}
 .wrapper h4 span  {border-width:36px;}
 #slider div.title {font-size:22px;}
 #tabs {width: calc(100vw - 20px);position: absolute;left: 0;}
 .ui-tabs .ui-tabs-nav li {
  width: 100%;
  border-radius: 0;
  background: #ddd;
 }
 .ui-tabs .ui-tabs-panel.ppanel, .narrowDates {border-radius:0 0 20px 20px !important}
 .ui-tabs .ui-tabs-nav,.ui-tabs .ui-tabs-panel.ppanel {padding:0 !important}
 div.infoform p {text-align:left;width:auto;}
 .wrapper .syncal {display:none;}
 .wrapper .form-group {    background: #eee;
    padding: 0;
    margin-top: 50px;
    border-radius: 20px;}
 .wrapper ,.form-control{font-size:36px;padding-top:0;text-align: center;}
 .wrapper input {max-width:none;width:100%}
 .wrapper .periods>div a,.wrapper .periods>div div.ppp {display:block;padding:16px;    width: calc(100% - 250px);}
 .wrapper .periods>div  div.ppp {padding:0;}
 .wrapper .periods>div>button {height:64px;min-width:60px;}
 div.modal,div.modal h2,div.modal div.textinput p {font-size:40px;line-height:80px;}
 div.modal div.textinput {flex-wrap:wrap;display:flex;}
 div.modal div.textinput div.input {flex-grow:1 !important;display: flex}
 div.modal div.textinput div.input input {    margin: 10px 0;height:80px;line-height:80px;flex-grow:1 !important;font-size: 40px;}
 div.modal div.textinput div.input input.mw {max-width:none;}
 div.nlmobile {flex-basis: 100%;}
 .wrapper #menu {   
  position: relative;
  text-align: right;
  display: block;
  padding: 00px 0 0 0;
  width: 100%;
  border-radius: 0 0 10px 10px;
  transition: all 0.3s;
 }
 .wrapper #menu ul {
  height: auto;
  position: relative;
  text-align: center;
  padding: 0;
 }
 .wrapper #menu ul li {
  display: inline-block;
  width: 24%;
  margin: 0;
  padding-bottom: 12%;
  height: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color:dodgerblue;
  opacity:0.7;
 }
 .wrapper #menu ul li.active {opacity:1;}
 .wrapper #menu ul li a { opacity:0;}
 .wrapper #menu ul li#menucal {background-image:url(./img/calendar.png)}
 .wrapper #menu ul li#menubak {background-image:url(./img/backups.png)}
 .wrapper #menu ul li#menucpw {background-image:url(./img/password.png)}
 .wrapper #menu ul li#menuout {background-image:url(./img/logout.png)}

 .wrapper #menu ul li a {
  line-height:normal;
  width: 100%;
 }
 .wrapper a.close {
  top: 5px;
  right: 5px;
  position: fixed;
  cursor: pointer;
  z-index: 1;
  width: 80px;
  height: 80px;
  border-radius: 40px;
  background: url(img/left.png) left center no-repeat;
  background-color: dodgerblue;
  background-size: 80%;
  transition: all 0.3s;
 }
 .wrapper a.close.open {
  transform:rotate(180deg);
 }
 .wrapper #menu.open {
  left:0;
 }
}

@media only screen and (max-width : 767px)
{
 .button.offer.samew {width: calc(100% - 10px);}
}