@font-face{

font-family: 'GoogleSans';
src: url('./fonts/GoogleSans-Regular.ttf');
}

body {
        display: flex;
    flex-direction: revert;
    justify-content: center;
	margin: 0px;
/*    background-image: url(./images/London0/London0.jpg);*/
	font-family: "GoogleSans";
	font-size: 13px;
    background-repeat: no-repeat;
    background-color: black;
    background-size: cover; /*100% !00% full image without head*/
/*    background-position: bottom;*/
    outline: none;  
/*    position: fixed;  without scroll in safari, shows url bar always */
	/*	overscroll-behavior: none;*/
    overflow: hidden;
    touch-action: pan-x pan-y;
/*
	overflow-x: auto;
	overflow-y:auto;
	
*/
/*	overscroll-behavior: none;*/
/*
    width: 36%;
	margin: 8px auto;
*/
}

#allui
{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	pointer-events: none;
}
canvas
{
    outline: none;
}
#floorplanwidget
{
    position: absolute;
    display: none;
    top: 0%;
left: 0%;
    height: 100%;
    width: 100%;
/*    cursor: move;*/
/*right: 20%;*/
/*bottom: 20%;*/
z-index: 6;
	pointer-events: all;
}
#colorlineplan
{
position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 90%;

background: rgba(0, 0, 0, 0.0001);
box-shadow: inset 0px -1px 0px rgba(133, 216, 255, 0.35);
}
#daynightwidget
{
    position: absolute;
    top: 2%;
    right: 1%;
    width: 5%;
    height: 4%;
    background-image: url(./images/shape-daynaight.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
	pointer-events: all;
}
#levelstwidget
{
    position: absolute;
    top: 7%;
    right: 1%;
    width: 5%;
    height: 4%;
    background-image: url(./images/bg_levels.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
	pointer-events: all;
}
#legend
{
    display: none;
    position: absolute;
    top: 8%; /* bottom 4 */
    right: 2%; /*33*/
    width: 34%;
    height: 5%;
    background-image: url(./images/legend.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
/*    z-index: 1;*/
}
#floorplanimage
{
    position: absolute;
    top: 12%;
    bottom: 2%;
    left: 0%;
    right: 0%;
/*    background-image: url(./images/plans/1-10-5.jpg);*/
    background-size: contain;
    background-repeat: no-repeat;
	background-position: center;
}
#floorplanclose
{
/*
    position: absolute;
    width: 5.6%;
    height: 10%;
    right: 0px;
    top: 0px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(./images/but_menu_close@2x.png);
    background-color: transparent;
    border: none;          
    cursor: pointer;        
    outline: none;  
*/
 position: absolute; 
    bottom: 3%; 
    left:1%; 
    height: 7%;
    width: 4%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(./images/ic_zoom_out.png);
    background-color: transparent;
    border: none;          
    cursor: pointer;       
    outline: none;     
}

#floorplanbackground
{
width: 100%;
height: 100%;
background: #0B1014;
border: 1px solid rgba(133, 216, 255, 0.3);
box-sizing: border-box;
box-shadow: 0px -2px 3px rgba(0, 0, 0, 0.5), 0px -6px 10px rgba(0, 0, 0, 0.4);
}
#floorplanbutton
{
	position: absolute;
/*left: 7.41%;*/
/*top: 85.25%;*/
width: 85%;
height: 80%;
background: #FFFFFF;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
border-radius: 30px; /*20*/
/*
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: transparent;
*/
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    outline: none;
}

#mainscreen
{
  position: absolute;
	-webkit-overflow-scrolling: auto;
/*
	width: 60;
    height: 720px;
*/
    width: 100%;
  height: 100%;
    
/*
    left: 1vw;
    right: 1vw;
*/
/*
	box-sizing: border-box;
	text-align: left;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
*/
	
}
#vrtour
{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 8;
    pointer-events: all;
}
/*
div.stretchy-wrapper {
	width: 100%;
	padding-bottom: 56.25%;  16:9 
	position: absolute;
	background: blue;
}

div.stretchy-wrapper > div {
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;

	color: white;
	font-size: 24px;
	text-align: center;
}
*/
#loadingscreen
{
  position: absolute;
	width: 100%;
    height: 100%;
	box-sizing: border-box;
	text-align: left;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
    background-color: black;
   background-repeat: no-repeat;
    background-image: url(./images/level1/gabriel_day/Gabriel1.jpg);
  background-size: cover;
	    background-position: center;
    z-index: 7;
}

.nextviewbutton
{
    position: absolute;
	width: 5%;
    height: 6%; 
    top: 50%;
    right: 0px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(./images/but_next.png);
    background-color: transparent;
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
/*    vertical-align: middle; */
    z-index: 6;
    outline: none;
	pointer-events: all;
    
}
.nextviewbutton:active {
    animation-name: nextprevanimation;
  animation-duration: 3s;
    /* animation css */
}
.prevviewbutton:active {
    animation-name: nextprevanimation;
  animation-duration: 3s;
    /* animation css */
}
@keyframes nextprevanimation {
  0%   {opacity: 100%;}
  25%  {opacity: 30%;}
  50%  {opacity: 0%;}
  75%  {opacity: 30%;}
  100% {opacity: 100%}
}
.prevviewbutton
{
   position: absolute;
	width: 5%;
    height: 6%; 
    top: 50%;
    left:0px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(./images/but_prev.png);
    background-color: transparent;
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
/*    vertical-align: middle; */
    z-index: 6;
    outline: none;
	pointer-events: all;


}

#imageback
{
  position: absolute;
	width: 100%;
    height: 100%;
	box-sizing: border-box;
	text-align: left;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
/*    background-image: trans;*/
	z-index: 1;  
   background-repeat: no-repeat;
/*  background-size: 100% 100%;*/
        background-size: cover;
    background-position: center;
}

a {
	color: #ff0;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

button {
	cursor: pointer;
	text-transform: uppercase;
}

canvas {
	display: block;
}

#info {
	position: absolute;
	bottom: 3%;
	width: 100%;
    height: 7%;
/*	padding: 10px;*/
	box-sizing: border-box;
	text-align: left;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 3;  
}
#disclaimer {
	position: absolute;
	bottom: 0%;
	width: 100%;
    height: 3%;
/*	padding: 10px;*/
	box-sizing: border-box;
	text-align: left;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 10;  
        box-sizing: border-box;
    background: rgba(11,16,20,0.8);
        display: flex;
    align-content: center;
    justify-content: center;
    flex-flow: row;
}
}
a.disclaimertext
{
    color: #ffffff;
    font-family: "GoogleSans";
    font-size: 7px;
    text-decoration: none;
    line-height: 1;
    align-self: center;
    opacity: 0.7;
    left: 0.2%;
    right: 0.2%;
/*    position: inherit;*/
}
#menubuttoncontainer{
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  height: 100%;
}


#menucontainer {
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  background: rgba(11,16,20,0.8);
/*  box-shadow: 0px -6px10px4px rgba(0,0,0,0.15);*/
  box-shadow: 0px -2px3px rgba(0,0,0,0.3);
    
}

#menucolorline {
  position: absolute;
  z-index: 4;
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  box-shadow: inset 0px 1px rgba(133,216,255,0.3);
}
#menubuttonopenclose
{
position: absolute;
width: 4%;
height: 100%;
right: 2%;
background: rgba(11, 16, 20, 0.05);
border: 1px solid rgba(65, 186, 255, 0.3);
box-sizing: border-box;
}
#menubackgroundopenclose
{
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(11, 16, 20, 0.8);
}

.menuopenclose {

  position: absolute;
/*
  top: 0%;
  left: 0%;
*/
    width: 100%;
    height: 100%;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.menuopenclose input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
}

/* Create a custom checkbox */
.checkmarkmenuopenclose {
  position: absolute;
/*
  top: 0;
  left: 0;
*/
  height: 100%;
  width: 100%;
 background-image: url(./images/but_menu@2x.png);
 background-size: 100% 100%;
}

/* When the checkbox is checked, add a blue background */
.menuopenclose input:checked ~ .checkmarkmenuopenclose{
  background-image: url(./images/but_menu_close@2x.png);
  background-size: 100% 100%;
}

/* Show the checkmark when checked */
.menuopenclose input:checked ~ .checkmarkmenuopenclose:after {
  display: block;
}
#floorwidget {

position: absolute;
width: 154px;
height: 171px;
right: 150px;
top: 132px;
/*
background: linear-gradient(90deg, rgba(5, 56, 80, 4e-05) 3.38%, rgba(27, 114, 156, 0.4) 50.23%, rgba(5, 56, 80, 4e-05) 96.7%);
transform: rotate(90deg);
*/
}
#roomcard {
	position: absolute;
	box-sizing: border-box;
	text-align: center;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: -1; /* TODO Solve this in HTML */
}
#roomcardclose
{
    position: relative;
/*    display: inline-block;*/
/*    float: right;*/
    width: 12%; /*100*/
    height: 50%; /*100*/
    top: 25%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(./images/ic_close_apt.png);
    background-color: transparent;
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    outline: none; 
/*    display: table-cell;*/
}
#roomcardexpand
{
    position: relative;
    width: 10%; /*6.94*/
    height: 8.29%;
    top: 3.5%;/*3*/
    left: 90%;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(./images/ic_expand_more.png);
    background-color: transparent;
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    outline: none;  
}
#openplanbutton
{
    position: absolute;
    width: 14%;
    right: 2%;
    height: 13%;/*20*/
    top: 2%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(./images/ic_zoom.png);
    background-color: transparent;
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    outline: none;  
}

#roomwidgetup
{
	display: flex;
	width: 100%;
	height: 15%;
}
.roomwidgetdownbuttonscontainer
{
	position: relative;
	width: 50%;
	height: 100%;
	    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
#roomwidgetdownbuttons
{
	width: 100%;
	height: 10%;
	display: flex;
    flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
#roomwidgetdownbuttonfloorplan
{
	position: relative;
	width: 100%;
	height: 10%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
#tourbutton
{
    position: absolute;
    width: 100%;
    height: 100%;
/*    left: 15%;*/
/*    top: 78%;*/
/*    background-repeat: no-repeat;*/
/*    background-size: 100% 100%;*/
    background-color: transparent;
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    outline: none;  
}
#tourbuttonback
{
 position: absolute; 
    bottom: 0%; 
    left:1%; 
    height: 7%;
    width: 4%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(./images/but_back.png);
    background-color: transparent;
    border: none;          
    cursor: pointer;       
    outline: none;     
    z-index: 8;
}
#balconybuttonback
{
    display: none;
 position: absolute; 
    bottom: 3%; 
    left:1%; 
    height: 7%;
    width: 4%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(./images/but_back.png);
    background-color: transparent;
    border: none;          
    cursor: pointer;       
    outline: none;     
    z-index: 8;
}
/*
iframe {
    width: 100%;
    overflow: hidden !important;
    height: 100%;
    z-index: 1;
    }
*/
#balconyview
{
    position: absolute;
    width: 100%;
    height: 100%;
/*
    right: 15%;
    top: 78%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: transparent;
*/
	background-color: transparent;
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    outline: none;  
}
#roomuppercolorline
{
    position: absolute;
left: 0%;
/*right: 0%;*/
top: 14%;
/*bottom: 85.25%;*/
    width: 100%;
    height: 2px;
background: rgba(0, 0, 0, 0.0001);
box-shadow: inset 0px -1px 0px rgba(133, 216, 255, 0.35);
}
#roomstatus
{
    position: relative;
    display: inline-block;
    width: 17%; /*21*/
    height: 60%; /*80*/
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(./images/available_circle.png);
    background-color: transparent;
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    outline: none;   
}
#roomdowncolorline
{
    position: absolute;
left: 0;
right: 0;
top: 65.81%;
height: 2px;
/*bottom: 21.66%;*/

background: rgba(0, 0, 0, 0.0001);
box-shadow: inset 0px 1px 0px rgba(133, 216, 255, 0.35);
}
#roominfoblock
{
position: relative;
  
    height: 100%;
    width: 100%;
}
#roomfloortext
{
	left: 7%;
position: relative;
    height: 18%;
    /* top: 0; */
    width: 100%;
    /* display: flex; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* justify-content: center; */
    align-items: center;
}
#roombedroomstext
{
	left: 7%;
 position: relative;
    height: 18%;
    /* top: 0; */
    width: 100%;
    /* display: flex; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* justify-content: center; */
    align-items: center;
}
#roomorientationtext
{
	left: 7%;
position: relative;
    height: 18%;
    /* top: 0; */
    width: 100%;
    /* display: flex; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* justify-content: center; */
    align-items: center;
}
#roombathroomstext
{
	left: 7%;
position: relative;
    height: 18%;
    /* top: 0; */
    width: 100%;
    /* display: flex; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* justify-content: center; */
    align-items: center;
}
#arearoomstext
{
	left: 7%;
 position: relative;
    height: 18%;
    /* top: 0; */
    width: 100%;
    /* display: flex; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* justify-content: center; */
    align-items: center;
}
#priceroomstext
{
	left: 7%;
position: relative;
    height: 18%;
    /* top: 0; */
    width: 100%;
    /* display: flex; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* justify-content: center; */
    align-items: center;
}
#warningtext
{
	left: 7%;
position: relative;
    height: 8%;
    /* top: 0; */
    width: 100%;
    /* display: flex; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* justify-content: center; */
    align-items: center;
}
.cardtransparentback

{
    position: absolute;
    display: inline;
    user-select: all;
	pointer-events: none;
    top:0%;
    left:0%;
    width: 100%;
    height: 100%;
}
#roomcardandplan
{
    display: inline;
    position: absolute;
    right: 0%;
    top: 1%;
/*    cursor: move;*/
    height: 40%;
    width:44%;
    
	user-select: none;
	pointer-events: none;

}

#roomwidget {
    display: none;
	position: absolute;
    height: 100%;
    width: 45%;/*38*/
    top:0%;
    left: 0%;
    background: rgba(11, 16, 20, 0.8);
border: 1px solid rgba(133, 216, 255, 0.3);
box-sizing: border-box;
box-shadow: 0px -2px 3px rgba(0, 0, 0, 0.3), 0px -6px 10px rgba(0, 0, 0, 0.15);
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
/*	user-select:all;*/
	pointer-events: all;
	z-index: 1; /* TODO Solve this in HTML */
    cursor: move;
}

#roomplanwidget {
	position: absolute;
    top: 0%;
    left: 45%; /*38*/
    height: 100%;
    width: 55%;/*62*/
    background: rgba(11, 16, 20, 0.8);
border: 1px solid rgba(133, 216, 255, 0.3);
box-sizing: border-box;
box-shadow: 0px -2px 3px rgba(0, 0, 0, 0.3), 0px -6px 10px rgba(0, 0, 0, 0.15);
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
/*	user-select: none;*/
/*	pointer-events: none;*/
    cursor: move;
	z-index: 1; /* TODO Solve this in HTML */
}

#filterswidget {
  position: absolute;
    display: none;
	bottom: 10%;
	width: 100%;
    height: 24%;
	box-sizing: border-box;
	text-align: center;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
    --buttonsgradient: linear-gradient(180deg, rgba(99, 205, 255, 0.0001) 28.28%, rgba(99, 205, 255, 0.4) 99.93%);
/*
	user-select: none;
	pointer-events: none;
*/
	z-index: 1; /* TODO Solve this in HTML */

}
#filterslist {
  
	position: absolute;
    display: none;
     width: 30%;
  height: 90%;
	z-index: 1; /* TODO Solve this in HTML */
	pointer-events: all;

}
#favoriteslist {
  pointer-events: all;
	position: absolute;
     width: 30%;
  height: 90%;
	z-index: 1; /* TODO Solve this in HTML */

}
#favoritesupcolorline
{
position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 93%;

background: rgba(0, 0, 0, 0.0001);
box-shadow: inset 0px -1px 0px rgba(133, 216, 255, 0.35);
}
#susupcolorline
{
position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 94%;

background: rgba(0, 0, 0, 0.0001);
box-shadow: inset 0px -1px 0px rgba(133, 216, 255, 0.35);
}

#surroundingslist {
  pointer-events: all;
	position: absolute;
     width: 20%;
  height: 90%;
	z-index: 1; /* TODO Solve this in HTML */

}
#surroundingsupcolorline
{
position: absolute;
    left: 0%;
    /* right: 0%; */
    top: 7%;
    /* bottom: 93%; */
    height: 2px;
    width: 100%;

background: rgba(0, 0, 0, 0.0001);
box-shadow: inset 0px -1px 0px rgba(133, 216, 255, 0.35);
}
#surroundingsdowncolorline
{
position: absolute;
    left: 0%;
    /* right: 0%; */
    top: 90%;
    /* bottom: 93%; */
    height: 2px;
    width: 100%;

background: rgba(0, 0, 0, 0.0001);
box-shadow: inset 0px -1px 0px rgba(133, 216, 255, 0.35);
}
.surrnextbutton
{
      background-image: url(./images/but_next.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 55%;
    right: 0%;
    height: 15%;
    width: 20%;
    background-repeat: no-repeat;
    background-size: cover;
        background-color: transparent;
    border: transparent;
}

.surrprevbutton
{
      background-image: url(./images/but_prev.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 55%;
    left: 0%;
    height: 15%;
    width: 20%;
    background-repeat: no-repeat;
    background-size: cover;
        background-color: transparent;
    border: transparent;
}

#filterslisttable {
  
	position: absolute;
    top: 13.3%;
/*    left: 20%;*/
	z-index: 1; /* TODO Solve this in HTML */
    width: 100%;
    height: 79%;
    overflow-y: overlay;
    overflow-x: hidden;

}
#favoriteslisttable {
  
	position: absolute;
    top: 7%;/*13*/
/*    left: 20%;*/
	z-index: 1; /* TODO Solve this in HTML */
    width: 100%;
    height: 93%;
    overflow: auto;

}
#surrlisttable {
  
	position: absolute;
    top: 8%;/*13*/
/*    left: 20%;*/
	z-index: 1; /* TODO Solve this in HTML */
    width: 100%;
    height: 81%;
    overflow: overlay;

}
#filtersbackground {
  
	position: absolute;
    z-index: -1;
  width: 100%;
  height: 100%;
  background: rgba(11,16,20,0.8);
  box-shadow: 0px -6px10px4px rgba(0,0,0,0.15);
  box-shadow: 0px -2px3px rgba(0,0,0,0.3);
/*	z-index: -1;  TODO Solve this in HTML */

}

#compass
{
    position: absolute;
    top: 3%;
    left: 38.5%;
/*    align-content: center;*/
    width: 23%;
    height: 2%;
    overflow: hidden;
}
#compassbackground
{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, rgba(5, 56, 80, 4e-05) 3.38%, rgba(27, 114, 156, 0.6) 50.23%, rgba(5, 56, 80, 4e-05) 96.7%); 
    background-size: 100% 100%;
/*    left: 0px;   */
}

#compasstriangles
{
   position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(./images/compass_arrows.png); 
    background-size: 100% 100%;
}

#compassimage
{
  position: absolute;
    width: 300%;
    height: 100%;
    background-image: url(./images/compass.png); 
    background-size: 100% 100%;  
    left: -61%;
}

#filtersui
{
	position: relative;
	width: 100%;
	height: 100%;
	pointer-events: all;
}
#filtersbackgroundcolorline {
	position: absolute;
  z-index: -1;
  width: 100%;
  height: 2px;
  box-shadow: inset 0px 1px rgba(133,216,255,0.2);
}
#filterslistbackground {
  
	position: absolute;
    width: 100%;
    height: 100%;
      background: rgba(11,16,20,0.8);
/*  box-shadow: 0px -6px10px4px rgba(0,0,0,0.15);*/
  box-shadow: 0px -2px3px rgba(0,0,0,0.3);
	z-index: -1; /* TODO Solve this in HTML */

}
#favoriteslistbackground {
  
	position: absolute;
    width: 100%;
    height: 100%;
      background: rgba(11,16,20,0.8);
/*  box-shadow: 0px -6px10px4px rgba(0,0,0,0.15);*/
  box-shadow: 0px -2px3px rgba(0,0,0,0.3);
	z-index: -1; /* TODO Solve this in HTML */

}

#surroundingslistbackground {
  
	position: absolute;
    width: 100%;
    height: 100%;
      background: rgba(11,16,20,0.8);
/*  box-shadow: 0px -6px10px4px rgba(0,0,0,0.15);*/
  box-shadow: 0px -2px3px rgba(0,0,0,0.3);
	z-index: -1; /* TODO Solve this in HTML */

}
#filterui {
  
	position: absolute;
	width:auto;
	box-sizing: border-box;
	text-align: center;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 1; /* TODO Solve this in HTML */

}
a, button, input, select {
	pointer-events: auto;
}

.dg.ac {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 2 !important; /* TODO Solve this in HTML */
}

/*
#containerx {
  position: absolute;
  z-index: 4;
  width: 1920px;
  height: 256px;
  bottom: 30%;
  background: rgba(11,16,20,0.8);
  box-shadow: 0px -6px10px4px rgba(0,0,0,0.15);
  box-shadow: 0px -2px3px rgba(0,0,0,0.3);
}
*/
#buttonresetcontainer
{
	position: relative;
    width: 80%;
    height: 30%;
    /* right: 2%; */
    /* top: 30%; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
button.button-reset {
    position: absolute;
	width: 100%;
    height: 100%;
/*    right: 2%;*/
/*    top: 55%;*/
    background: #FFFFFF;
    box-shadow: 0px 2px 4px rgb(0 0 0 / 50%);
    border-radius: 5%/50%;
/*
    width: 13%;
    height: 24%;
left: 85%;
top: 55%;
    background-color: transparent; 
    background-repeat: no-repeat; 
    background-position: 0px 0px;  
    background-size: contain;
*/
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    vertical-align: middle; /* align the text vertically centered */
    outline: none;
}
#buttonlistcontainer
{
position: relative;
    width: 80%;
    height: 30%;
    /* right: 2%; */
    /* top: 30%; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
button.button-list {
    position: absolute;
	width: 100%;
    height: 100%;
/*    right: 2%;*/
/*    top: 30%;*/
    background: #FFFFFF;
    box-shadow: 0px 2px 4px rgb(0 0 0 / 50%);
    border-radius: 5%/50%;
/*
    width: 13%;
    height: 24%;
	left: 85%;
	top: 30%;
    background-color: transparent; 
    background-repeat: no-repeat;  
    background-position: 0px 0px; 
    background-size: contain;
*/
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    vertical-align: middle; /* align the text vertically centered */
    outline: none;
}
#buttonlink
{
    position: absolute;
	width: 4%;
    height: 4%;
    right: 2%;
    top: 2%;
    background: #FFFFFF;
    box-shadow: 0px 2px 4px rgb(0 0 0 / 50%);
    border-radius: 20%/50%;
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    vertical-align: middle; /* align the text vertically centered */
    outline: none;
}

#buttonlistbackcontainer
{
	position: absolute;
    bottom: 0%;
    width: 100%;
    height: 8%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* justify-content: center; */
    align-items: center;
}
button.button-list-back {
    position: absolute;
    width: 100%;
	height: 100%;
    background-color: transparent; 
/*    background-repeat: no-repeat;  */
    background-size: 100% 100%;
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
/*    vertical-align: middle; */
    outline: none;
}

input.cb {
      width: 10px;
  height: 10px;
/*    background-image: url(./images/but_list.png);*/
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    vertical-align: middle; /* align the text vertically centered */
}

/* The container */
.container1 {
/*  display: block;*/
/*  position: absolute;*/
/*position: absolute;*/

    position: relative;
   
    height: 50%;
    width: 20%;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	 display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* Hide the browser's default checkbox */
.container1 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark1 {
  position: absolute;
  top: 0;
  left: 0;
   height: 100%;
  width: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
border: 1px solid rgba(255, 255, 255, 0.7);
box-sizing: border-box;
filter: drop-shadow(0px 0px 3px rgba(201, 235, 255, 0.4));
border-radius: 25%/50%; 
	
/* background-image: url(./images/chip_b_1.png);*/
}

/* When the checkbox is checked, add a blue background */
.container1 input:checked ~ .checkmark1 {
/*  background-image: url(./images/chip_b_1_2.png);*/
  background-size: 100% 100%;
  background: #FFFFFF;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
border-radius: 25%/50%; 
}

/* Show the checkmark when checked */
.container1 input:checked ~ .checkmark1:after {
  display: block;
	
}
/*//2*/
.container2 {
/*  display: block;*/
   position: relative;
   
    height: 50%;
    width: 20%;
  cursor: pointer;
  font-size: 22px;
font-family: "GoogleSans";
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	 display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.container2 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark2 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
border: 1px solid rgba(255, 255, 255, 0.7);
box-sizing: border-box;
filter: drop-shadow(0px 0px 3px rgba(201, 235, 255, 0.4));
border-radius: 25%/50%; 
}

.container2 input:checked ~ .checkmark2 {
  background-size: 100% 100%;
  background: #FFFFFF;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
border-radius:25%/50%; 
}

.container2 input:checked ~ .checkmark2:after {
  display: block;
}

.container3 {
/*  display: block;*/
  position: relative;
   
    height: 50%;
    width: 20%;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	 display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.container3 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark3 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
 background-size: 100% 100%;
border: 1px solid rgba(255, 255, 255, 0.7);
box-sizing: border-box;
filter: drop-shadow(0px 0px 3px rgba(201, 235, 255, 0.4));
border-radius: 25%/50%; 
}

.container3 input:checked ~ .checkmark3 {
  background-size: 100% 100%;
    background: #FFFFFF;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
border-radius: 25%/50%; 
}

.container3 input:checked ~ .checkmark3:after {
  display: block;
}

.containerb6 {
/*  display: block;*/
  position: relative;
   
    height: 50%;
    width: 20%;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	 display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.containerb6 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmarkb6 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
 background-size: 100% 100%;
border: 1px solid rgba(255, 255, 255, 0.7);
box-sizing: border-box;
filter: drop-shadow(0px 0px 3px rgba(201, 235, 255, 0.4));
border-radius: 25%/50%; 
}

.containerb6 input:checked ~ .checkmarkb6 {
  background-size: 100% 100%;
    background: #FFFFFF;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
border-radius: 25%/50%; 
}

.containerb6 input:checked ~ .checkmarkb6:after {
  display: block;
}

.containerb7 {
/*  display: block;*/
  position: relative;
   
    height: 50%;
    width: 20%;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	 display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.containerb7 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmarkb7 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
 background-size: 100% 100%;
border: 1px solid rgba(255, 255, 255, 0.7);
box-sizing: border-box;
filter: drop-shadow(0px 0px 3px rgba(201, 235, 255, 0.4));
border-radius: 25%/50%; 
}

.containerb7 input:checked ~ .checkmarkb7 {
  background-size: 100% 100%;
    background: #FFFFFF;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
border-radius: 25%/50%; 
}

.containerb7 input:checked ~ .checkmarkb7:after {
  display: block;
}

.container4 {
   position: relative;
   
    height: 50%;
    width: 20%;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	 display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.container4 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark4 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
border: 1px solid rgba(255, 255, 255, 0.7);
box-sizing: border-box;
filter: drop-shadow(0px 0px 3px rgba(201, 235, 255, 0.4));
border-radius: 25%/50%; 
}

.container4 input:checked ~ .checkmark4 {
  background-size: 100% 100%;
    background: #FFFFFF;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
border-radius: 25%/50%; 
}

.container4 input:checked ~ .checkmark4:after {
  display: block;
}

.container5 {
     position: relative;
   
    height: 50%;
    width: 20%;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	 display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
	
}
.container5 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark5 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
border: 1px solid rgba(255, 255, 255, 0.7);
box-sizing: border-box;
filter: drop-shadow(0px 0px 3px rgba(201, 235, 255, 0.4));
border-radius: 25%/50%; 
}

.container5 input:checked ~ .checkmark5 {
   background-size: 100% 100%;
    background: #FFFFFF;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
border-radius: 25%/50%; 
}

.container5 input:checked ~ .checkmark5:after {
  display: block;
}

.container6 {
   position: relative;
   
    height: 50%;
    width: 20%;
  cursor: pointer;
    font-family: "GoogleSans";
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	 display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.container6 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark6 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
 border: 1px solid rgba(255, 255, 255, 0.7);
box-sizing: border-box;
filter: drop-shadow(0px 0px 3px rgba(201, 235, 255, 0.4));
border-radius: 25%/50%; 
}

.container6 input:checked ~ .checkmark6 {
 background-size: 100% 100%;
    background: #FFFFFF;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
border-radius: 25%/50%; 
}

.container6 input:checked ~ .checkmark6:after {
  display: block;
}

.container7 {
 position: relative;
   
    height: 50%;
    width: 20%;
  cursor: pointer;
  font-size: 22px;
    font-family: "GoogleSans";
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	 display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.container7 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark7 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
 border: 1px solid rgba(255, 255, 255, 0.7);
box-sizing: border-box;
filter: drop-shadow(0px 0px 3px rgba(201, 235, 255, 0.4));
border-radius: 25%/50%; 
}

.container7 input:checked ~ .checkmark7 {
    background-size: 100% 100%;
    background: #FFFFFF;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
border-radius: 25%/50%; 
}

.container7 input:checked ~ .checkmark7:after {
  display: block;
}

.container8 {

 position: relative;
   
    height: 50%;
    width: 20%;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	 display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.container8 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark8 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
 border: 1px solid rgba(255, 255, 255, 0.7);
box-sizing: border-box;
filter: drop-shadow(0px 0px 3px rgba(201, 235, 255, 0.4));
border-radius: 25%/50%; 
}

.container8 input:checked ~ .checkmark8 {
 background-size: 100% 100%;
    background: #FFFFFF;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
border-radius: 25%/50%; 
}

.container8 input:checked ~ .checkmark8:after {
  display: block;
}
.container9 {
display: inline-block;
    position: relative;
	    float: left;
/*
  left: 3.5%;
  top: 2%;
*/
   width: 18%; /*21*/
    height: 60%;/*80*/
    
/*  padding-left:  0px;*/
  
/*  margin-bottom: 10px;*/
  cursor: pointer;
  font-size: 22px;
    font-family: "GoogleSans";
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 z-index: 8;
}
.container9 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
}

.checkmark9 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
    background-size: 100% 100%;
 background-image: url(./images/ic_favorites_inactive.png);
}

.container9 input:checked ~ .checkmark9 {
    
background-size: 100% 100%;
  background-image: url(./images/ic_favorites_active.png);
}

.container9 input:checked ~ .checkmark9:after {
  display: block;
}
#upcontainerfiltersheader
{
    position: absolute;
    
/*
    top: 4.2%;
    left: 20%;
*/
    width: 100%;
    height: 14.746%;
}
a.headers 
{
  position: absolute;
  top: 2%;
  left :4%;
  width: 90%;
  height: 3%;
  color: #ffffff;
  font-family: "GoogleSans";
  font-size: 14px;
  font-weight: 400;
   text-decoration: none;
   pointer-events: none;
}
a.loadingtext {
    position: absolute;
  z-index: 8;
    top: 55%;
    left: 40%;
/*  width: 176.49px;*/
/*  height: 28px;*/
  color: #000000;
  font-family: "GoogleSans";
  font-size: 6vh;
  font-weight: 400;
  line-height: 28px;
  text-decoration: none;
}
#planroomcard
{
    position: absolute;
    top: 16%; /*20*/
    left: 1%; /*5*/
    width: 98%; /*90*/
    height: 82%;/*74*/
/*    background-image: url(./images/plans/1-10-5.jpg);*/
    background-repeat: no-repeat;
   background-size: contain;
    background-position: center;
}
#roomname
{
    position: relative;
/*    float: left;*/
    display: inline-block;
}
#floornameheader
{
    position: absolute;
    left: 5%;
    top: 4%;
    width: 60%;
}
a.filterstext {
/*  z-index: 5;*/
/*  width: 9.16%;*/
/*  height: 28px;*/
  color: #ffffff;
  font-family: "GoogleSans";
  font-size: 1.7vh;
  text-decoration: none;
display: table-cell;
	pointer-events: none;
/*  line-height: 28px;*/
}
a.filterstextf {
/*  z-index: 5;*/
/*  width: 9.16%;*/
/*  height: 28px;*/
  color: #ffffff;
  font-family: "GoogleSans";
  font-size: 1.7vh;
  text-decoration: none;
display: table-cell;
	pointer-events: none;
/*  line-height: 28px;*/
}
a.filterstext2
{
  z-index: 5;
/*  width: 68.9px;*/
/*  height: 28px;*/
  color: rgba(255,255,255,0.7);
  font-family: "GoogleSans";
  font-size: 12px;
  font-weight: 400;
  display: table-cell;
  padding-left: 1%;
/*  line-height: 28px;*/
  text-decoration: none;
}
a.area-text-range-down-class
{
  z-index: 5;
  position: relative;
  color: rgba(255,255,255,0.7);
  font-family: "GoogleSans";
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;
}
a.floor-text-range-down-class
{
  z-index: 5;
  position: relative;
  color: rgba(255,255,255,0.7);
  font-family: "GoogleSans";
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;
}
a.price-text-range-down-class
{
  z-index: 5;
  position: relative;
  color: rgba(255,255,255,0.7);
  font-family: "GoogleSans";
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;
}
a.filterstext3
{
  z-index: 5;
/*
  width: 68.9px;
  height: 28px;
*/
  color: rgba(255,255,255,0.7);
  font-family: "GoogleSans";
  font-size: 12px;
  text-decoration: none;
/*
  font-weight: 400;
  line-height: 28px;
*/
}
a.cardfloorplantext
{
  z-index: 5;
/*
  width: 68.9px;
  height: 28px;
*/
  color: black;
  font-family: "GoogleSans";
  font-size: 12px;
  text-decoration: none;
  pointer-events: none;
  text-transform: uppercase;
/*
  font-weight: 400;
  line-height: 28px;
*/
}
a.filterstext4
{
  z-index: 5;
/*
  width: 68.9px;
  height: 28px;
*/
  color: rgba(255,255,255,0.7);
  font-family: "GoogleSans";
  font-size: 12px;
  text-decoration: none;
    display: table-cell;
    padding-left: 1%;
	pointer-events: none;

}
a.filterstext4warning
{
  z-index: 5;
/*
  width: 68.9px;
  height: 28px;
*/
  color: rgba(255,255,255,0.7);
  font-family: "GoogleSans";
  font-size: 12px;
  text-decoration: none;
    display: table-cell;
    padding-left: 1%;
	pointer-events: none;

}
a.favoriterowtext
{
  z-index: 5;
/*
  width: 68.9px;
  height: 28px;
*/
  color: rgba(255,255,255,0.9);
  font-family: "GoogleSans";
  font-size: 12px;
  text-decoration: none;
/*
  font-weight: 400;
  line-height: 28px;
*/
}
a.favoriteblocktext
{
  z-index: 5;
/*
  width: 68.9px;
  height: 28px;
*/
  color: rgba(255,255,255,0.7);
  font-family: "GoogleSans";
  font-size: 12px;
  text-decoration: none;
/*
  font-weight: 400;
  line-height: 28px;
*/
}
.favtextblockcontainer

{
	height: 33.3%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}
#numberofbedroomscontainer
{
position: absolute;
text-align: left;
left: 1%;
right: 70%;
top: 7.81%;
bottom: 64.06%;
}
#orientationscontainer
{
position: absolute;
text-align: left;
left: 1%;
right: 70%;
top: 54.69%;
bottom: 17.19%;    
}
#priceslidercontainer
{
display: block;
    position: absolute;
    left: 18%;
    width: 15%;
    top: 7.81%;
    text-align: left;
}
#priceslidercontainer2
{
    position: relative;
    height: 100%;
    width: 70%;
}
#areaslidercontainer2
{
    position: relative;
    height: 100%;
    width: 70%;
}
#floorslidercontainer2
{
    position: relative;
    height: 100%;
    width: 70%;
}
#floor-text-range-down
{
    position: absolute;
    top: 80%;
    width: 100%;
    left: 0;
    height: 5%;
    user-select: none;
	display: flex;
	justify-content: space-between;
}
#area-text-range-down
{
    position: absolute;
    top: 80%;
    width: 100%;
    left: 0;
    height: 5%;
    user-select: none;
	display: flex;
	justify-content: space-between;
}
#price-text-range-down
{
    position: absolute;
    top: 80%;
    width: 100%;
    left: 0;
    height: 5%;
    user-select: none;
	display: flex;
    justify-content: space-between;
}
#floorslidercontainer
{
position: absolute;
left: 44%;
top: 7.81%;
text-align: left;    
}
#surfaceslidercontainer
{
position: absolute;
display: block;
left: 18%;
width: 15%;
top: 54.69%;
text-align: left; 
}
#filtertypebuttons
{
position: absolute;
left: 0%;
right: 24.06%;
top: 0%;
bottom: 0%;
text-align: left;  
display: none;
}
#filterslistcolorline
{
position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 93%;
background: rgba(0, 0, 0, 0.0001);
box-shadow: inset 0px -1px 0px rgba(133, 216, 255, 0.35);
}

table#filteredrooms {
  position: absolute;
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-family: "GoogleSans";
  font-size: 14px;
  font-weight: 400;
/*  line-height: 28px;*/
  border-collapse: collapse;
}
table#filteredroomsheader {
  position: absolute;
top:7%;
    opacity: 0.8;
  width: 100%;
  height: 5%;
  text-align: center;
  color: #ffffff;
  font-family: "GoogleSans";
  font-size: 14px;
  font-weight: 400;
  border-collapse: collapse;
}
table#favoritesroomsheader {
  position: absolute;
top:7%;
    opacity: 0.8;
  width: 100%;
  height: 5%;
  text-align: center;
  color: #ffffff;
  font-family: "GoogleSans";
  font-size: 14px;
  font-weight: 400;
  border-collapse: collapse;
}

table#favoritesrooms {
  position: absolute;
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-family: "GoogleSans";
  font-size: 14px;
  font-weight: 400;
line-height: 190%;
    border-collapse: collapse;
}

table#surrlist {
  position: relative;
  position: absolute;
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-family: "GoogleSans";
  font-size: 14px;
  font-weight: 400;
line-height: 190%;
    border-collapse: collapse;
}
/*
#filteredrooms th {
  height: 50px;
  text-align: center;
}
*/
#filteredrooms tr {
/*    background-color: transparent;*/
    background: rgba(0, 0, 0, 0.0001);
/*
    background-size: 300px 300px;
    background-repeat: no-repeat;

*/
    background-attachment: fixed;
    height: 56px;
box-shadow: inset 0px -1px 0px rgba(255, 255, 255, 0.2);
/*    border-top: 1px solid #fff;*/
}
#favoritesrooms tr {
/*    background-color: transparent;*/
    background: rgba(0, 0, 0, 0.0001);
    height: 56px;
    background-attachment: fixed;
box-shadow: inset 0px -2px 0px rgba(255, 255, 255, 0.2);
/*    border-bottom: 1px solid #fff;*/
}

#surrlist tr {
/*    background-color: transparent;*/
    background: rgba(0, 0, 0, 0.0001);
    height: 56px;
/*
    background-attachment: fixed;
box-shadow: inset 0px -1px 0px rgba(255, 255, 255, 0.2);
*/
/*    border-bottom: 1px solid #fff;*/
}
/*
#filteredrooms tr.active 
{
    
    background:linear-gradient(270deg, rgba(99, 205, 255, 0.0001) 50%, rgba(99, 205, 255, 0.4) 99.93%);
}
*/
.favtdcolorline

{
position: absolute;
width: 59.5%;
height: 2px;
top: 10%;
background: rgba(0, 0, 0, 0.0001);
box-shadow: inset 0px -1px 0px rgba(133, 216, 255, 0.35);
}
/*
#filteredrooms tr:hover {
    background-color: #ccc;
    background: linear-gradient(270deg, rgba(99, 205, 255, 0.0001) 50%, rgba(99, 205, 255, 0.4) 99.93%);
}
*/

/*
#favoritesrooms tr:hover {
    background-color: #ccc;
}
*/
/*
#filteredrooms th {
    background-color: #fff;
}
#filteredrooms th, #filteredrooms td {
    padding: 3px 5px;
}
*/
#filteredrooms td
{
    width: 14.28%;
}
#favoritesrooms td 
{
    width: 33.3%;
    text-align: left;
}
#surrlist td 
{
    width: 33.3%;
    text-align: left;
}
#filteredrooms td:hover {
    cursor: pointer;
}
#favoritesrooms td:hover {
    cursor: pointer;
}

.buttonup {
    
background-color: transparent;
background-image: url(./images/floorup.png);
background-size: 100% 100%;
position: absolute;
width: 36px;
height: 36px;
left: 84px;
top: 0px;
border: none;
/*display: inline-block;*/
color: transparent;

}
.buttondown {

  background-color: transparent;
  background-image: url(./images/floordown.png);
  background-size: 100% 100%;
position: absolute;
width: 36px;
height: 36px;
left: 84px;
bottom: 0px;
border: none;
/*display: inline-block;*/
color: transparent;
}
a.floortext {
position: absolute;
height: 26px;
left: 57.14%;
right: 25.97%;
top: calc(50% - 26px/2 + 0.5px);

font-family: "GoogleSans";
font-style: normal;
font-weight: bold;
font-size: 22px;
line-height: 26px;

text-align: center;
letter-spacing: 0.20625px;
text-decoration: none;
color: #FFFFFF;

text-shadow: 0px 0px 10px rgba(99, 205, 255, 0.2), 1px 3px 4px rgba(0, 0, 0, 0.8);
}

.surrobjectbutton {
  position:relative;
  background-color: transparent;
  background-size: 100% 100%;
  border: none;
  height: 100%;
  width: 100% ;
  text-align: left;
  color: white;
  font-family: "GoogleSans";
font-style: normal;
/*  padding: 15px 50px;*/
  background-repeat : no-repeat;
    outline: none;
}
a.floorlabel
{
position: absolute;
height: 28px;
left: -1.3%;
right: 63.64%;
top: calc(50% - 28px/2 - 0.5px);

font-family: "GoogleSans";
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 28px;

/* identical to box height, or 117% */
text-align: right;

color: #FFFFFF;
text-decoration: none;
border: none;
box-sizing: border-box;
text-shadow: 0px 0px 6px rgba(99, 205, 255, 0.5), 1px 3px 2px rgba(0, 0, 0, 0.5);
}
.floorbackground
{
    
position: absolute;
/*
left: 84.42%;
right: -95.45%;
top: 0%;
bottom: 66.08%;
*/
width:171px;
height: 58px;
left: 15px;
top: 57px;
background: linear-gradient(90deg, rgba(5, 56, 80, 4e-05) 3.38%, rgba(27, 114, 156, 0.4) 50.23%, rgba(5, 56, 80, 4e-05) 96.7%);
transform: rotate(90deg);
}
.buttonoverview {
  position:relative;
  background-color: transparent;
  background-image: url(./images/button_overview.png);
  background-size: 100% 100%;
  border: none;
  color: white;
  height: 100%;
  width: 11.51% ;
/*  padding: 15px 50px;*/
  text-align: center;
  text-decoration: none;
  display: inline-block;
    font-family: "GoogleSans";
  font-size: 16px;
  background-repeat : no-repeat;
    outline: none;
}
.buttonoverview:active {
    animation-name: buttonmenuanimation;
  animation-duration: 2s;
}
@keyframes buttonmenuanimation {
  from {opacity: 70%;}
  to {opacity: 100%;}
}
.buttonfilters {
  position:relative;
  background-color: transparent;
  background-image: url(./images/button_filters.png);
  background-size: 100% 100%;
  border: none;
  color: white;
  height: 100%;
  width: 10.2% ;
/*  padding: 15px 50px;*/
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
    font-family: "GoogleSans";
  background-repeat : no-repeat;
    outline: none;
}
.buttonfilters:active {
    animation-name: buttonmenuanimation;
  animation-duration: 2s;
}
.buttonsurr {
  position:relative;
  background-color: transparent;
  background-image: url(./images/button_surr.png);
  background-size: 100% 100%;
  border: none;
  color: white;
  height: 100%;
  width: 15% ;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
    font-family: "GoogleSans";
  background-repeat : no-repeat;
     outline: none;
}
.buttonsurr:active {
    animation-name: buttonmenuanimation;
  animation-duration: 2s;
}
.buttonamenities {
  position:relative;
  background-color: transparent;
  background-image: url(./images/button_amenities.png);
  background-size: 100% 100%;
  border: none;
  color: white;
  height: 100%;
  width: 11% ;
/*  padding: 15px 50px;*/
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
    font-family: "GoogleSans";
  background-repeat : no-repeat;
}
.buttonamenities:active {
    animation-name: buttonmenuanimation;
  animation-duration: 2s;
}

.buttongallery {
  position:relative;
  background-color: transparent;
  background-image: url(./images/button_gallery.png);
  background-size: 100% 100%;
  border: none;
  color: white;
  height: 100%;
  width: 10.78% ;;
/*  padding: 15px 50px;*/
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  background-repeat : no-repeat;
     outline: none;
}
.buttongallery:active {
    animation-name: buttonmenuanimation;
  animation-duration: 2s;
}
.buttonfavorites {
  position:relative;
  background-color: transparent;
  background-image: url(./images/button_favorites.png);
  background-size: 100% 100%;
  border: none;
  color: white;
  height: 100%;
  width: 11.87% ;
/*  padding: 15px 50px;*/
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
    font-family: "GoogleSans";
  background-repeat : no-repeat;
    outline: none;
}
.buttonfavorites:active {
    animation-name: buttonmenuanimation;
  animation-duration: 2s;
}

@-webkit-keyframes buttonmenufiltersanimation {
  from {opacity: 80%;}
  to {opacity: 100%;}
}
.checkmarktype1:active
{
/*
   animation-name: buttonmenufiltersanimation;
  animation-duration: 10s; 
*/
    -webkit-animation: buttonmenufiltersanimation 1s infinite;
}
.checkmarktype2:active
{
   animation-name: buttonmenufiltersanimation;
  animation-duration: 3s; 
}
.checkmarktype3:active
{
   animation-name: buttonmenufiltersanimation;
  animation-duration: 3s; 
}

.containertype0 {
/*  display: block;*/
  position: relative;
  width: 90%;
 height: 25%;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-right: 1px solid rgba(99, 205, 255, 0.1);
        border-bottom: 1px solid rgba(99, 205, 255, 0.2);
}

/* Hide the browser's default checkbox */
.containertype0 input {
  position: absolute;
    top: 0;
    left: 0;
  opacity: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
}

/* Create a custom checkbox */
.checkmarktype0 {
  position: absolute;
  height: 100%;
  width: 100%;
        top: 0;
    left: 0;
 background-image: url(./images/Apt_inactive.png);
 background-repeat : no-repeat;
 background-size:cover;
}

/* When the checkbox is checked, add a blue background */
.containertype0 input:checked ~ .checkmarktype0 {
/*  background-image: url(./images/apt_active.png);*/
  background: var(--buttonsgradient);
  background-repeat : no-repeat;
  background-size:cover;

}

/* Show the checkmark when checked */
.containertype0 input:checked ~ .checkmarktype0:after {
  display: block;
}
/* The container */
.containertype1 {
/*  display: block;*/
  position: relative;
  width: 90%;
 height: 25%;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-right: 1px solid rgba(99, 205, 255, 0.1);
        border-bottom: 1px solid rgba(99, 205, 255, 0.2);
}

/* Hide the browser's default checkbox */
.containertype1 input {
  position: absolute;
    top: 0;
    left: 0;
  opacity: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
}

/* Create a custom checkbox */
.checkmarktype1 {
  position: absolute;
  height: 100%;
  width: 100%;
        top: 0;
    left: 0;
 background-image: url(./images/Apt_inactive.png);
 background-repeat : no-repeat;
 background-size:cover;
}

/* When the checkbox is checked, add a blue background */
.containertype1 input:checked ~ .checkmarktype1 {
/*  background-image: url(./images/apt_active.png);*/
  background: var(--buttonsgradient);
  background-repeat : no-repeat;
  background-size:cover;

}

/* Show the checkmark when checked */
.containertype1 input:checked ~ .checkmarktype1:after {
  display: block;
}
.containertype2 {
/*  display: block;*/
  position: relative;
 width: 90%;
 height: 25%;
/*  top:33.3%;*/
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
   border-right: 1px solid rgba(99, 205, 255, 0.1);
        border-bottom: 1px solid rgba(99, 205, 255, 0.2);
}
.containertype2 input {
  position: absolute;
    top: 0;
    left: 0;
  opacity: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
}

/* Create a custom checkbox */
.checkmarktype2 {
  position: absolute;
  height: 100%;
  width: 100%;
        top: 0;
    left: 0;
 background-image: url(./images/office_inactive.png);
 background-size: cover;
 background-repeat: no-repeat;
}

/* When the checkbox is checked, add a blue background */
.containertype2 input:checked ~ .checkmarktype2 {
/*    background-image: url(./images/office_active.png);*/
    background: var(--buttonsgradient);
    background-size: cover;
    background-repeat: no-repeat;
}

/* Show the checkmark when checked */
.containertype2 input:checked ~ .checkmarktype2:after {
  display: block;
}
.containertype3 {
/*  display: block;*/
  position: relative;
/*  top:66.6%;*/
 width: 90%;
 height: 25%;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
        border-right: 1px solid rgba(99, 205, 255, 0.1);
/*        border-bottom: 1px solid rgba(99, 205, 255, 0.2);*/
}
.containertype3 input {
  position: absolute;
    top: 0;
    left: 0;
  opacity: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
}

/* Create a custom checkbox */
.checkmarktype3 {
  position: absolute;
  height: 100%;
  width: 100%;
        top: 0;
    left: 0;
 background-image: url(./images/Apt_inactive.png);
    background-size: cover;
    background-repeat: no-repeat;

}

/* When the checkbox is checked, add a blue background */
.containertype3 input:checked ~ .checkmarktype3 {
/*  background-image: url(./images/hotel_active.png);*/
    background: var(--buttonsgradient);
    background-size: cover;
    background-repeat: no-repeat;

}

/* Show the checkmark when checked */
.containertype3 input:checked ~ .checkmarktype3:after {
  display: block;
}

/*tab button*/

.containertypetabfilters {
  position: absolute;
   left: 1%;
    bottom: 33.2%;
    height: 5.648%;
    width: 4.16%;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	pointer-events: all;
}
.containertypetabfilters input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmarktypetabfilters {
  position: absolute;
  height: 100%;
  width: 100%;
 background-image: url(./images/but_filters_open.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;

}

/* When the checkbox is checked, add a blue background */
.containertypetabfilters input:checked ~ .checkmarktypetabfilters {
  background-image: url(./images/but_filters_hide.png);
    background-size: 100% 100%;
   

}

/* Show the checkmark when checked */
.containertypetabfilters input:checked ~ .checkmarktypetabfilters:after {
  display: block;
}
/*tab filterslist button*/

.containertypetabfilterslist {
  position: absolute;
   left: 30%;
    top: 4%;
    height: 6.66%;
    width: 2.7%;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: all;
}
.containertypetabfilterslist input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmarktypetabfilterslist {
  position: absolute;
  height: 100%;
  width: 100%;
 background-image: url(./images/but_filters_hide_open.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;

}

/* When the checkbox is checked, add a blue background */
.containertypetabfilterslist input:checked ~ .checkmarktypetabfilterslist {
  background-image: url(./images/but_filters_hide_close.png);
    background-size: 100% 100%;
   

}

/* Show the checkmark when checked */
.containertypetabfilterslist input:checked ~ .checkmarktypetabfilterslist:after {
  display: block;
}
/*tab favoriteslist button*/

.containertypetabfavorites {
  position: absolute;
   left: 30%;
    top: 4%;
    height: 6.66%;
    width: 2.7%;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	pointer-events: all;
}
.containertypetabfavorites input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmarktypetabfavorites {
  position: absolute;
  height: 100%;
  width: 100%;
 background-image: url(./images/but_filters_hide_open.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;

}

/* When the checkbox is checked, add a blue background */
.containertypetabfavorites input:checked ~ .checkmarktypetabfavorites {
  background-image: url(./images/but_filters_hide_close.png);
    background-size: 100% 100%;
   

}

/* Show the checkmark when checked */
.containertypetabfavorites input:checked ~ .checkmarktypetabfavorites:after {
  display: block;
}
/*tab maplist button*/

.containertypetabmaplist {
  position: absolute;
   left: 30%;
    top: 4%;
    height: 6.66%;
    width: 2.7%;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	pointer-events: all;
	z-index: 1;
}
.containertypetabmaplist input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmarktypetabmaplist {
  position: absolute;
  height: 100%;
  width: 100%;
 background-image: url(./images/but_filters_hide_open.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;

}

/* When the checkbox is checked, add a blue background */
.containertypetabmaplist input:checked ~ .checkmarktypetabmaplist {
  background-image: url(./images/but_filters_hide_close.png);
    background-size: 100% 100%;
   

}

/* Show the checkmark when checked */
.containertypetabmaplist input:checked ~ .checkmarktypetabmaplist:after {
  display: block;
}
/* new slider*/

[slider] {
position: absolute;
    height: 100%;
    width: 100%;
}

[slider] > div {
 position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
}

[slider] > div > [inverse-left] {
 position: absolute;
    left: 0;
    height: 6%;
    top: 50%;
    opacity: 25%;
    background-color: #FFFFFF;
}

[slider] > div > [inverse-right] {
    position: absolute;
    right: 0;
    height: 6%;
    top: 50%;
    background-color: #FFFFFF;
    opacity: 25%;
}

[slider] > div > [range] {
 position: absolute;
    left: 0;
    height: 6%;
    top: 50%;
    background-color: #2FDAFE;
}

[slider] > div > [thumb] {
position: absolute;
    top: 25%;
    z-index: 2;
    height: 55%;
    width: 10%;
    text-align: left;
/*    margin-left: -5%;*/
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    background-color: #FFF;
    border-radius: 50%;
    outline: none;


}

[slider] > input[type=range] {
  position: absolute;
  pointer-events: none;
  -webkit-appearance: none;
  z-index: 3;
  height: 100%;
  top: 0;
  width: 100%;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}

div[slider] > input[type=range]::-ms-track {
  -webkit-appearance: none;
  background: transparent;
  color: transparent;
}

div[slider] > input[type=range]::-moz-range-track {
  -moz-appearance: none;
  background: transparent;
  color: transparent;
}

div[slider] > input[type=range]:focus::-webkit-slider-runnable-track {
  background: transparent;
  border: transparent;
}

div[slider] > input[type=range]:focus {
  outline: none;
}

div[slider] > input[type=range]::-ms-thumb {
  pointer-events: all;
  width: 28px;
  height: 28px;
  border-radius: 0px;
  border: 0 none;
  background: red;
}

div[slider] > input[type=range]::-moz-range-thumb {
  pointer-events: all;
  width: 28px;
  height: 28px;
  border-radius: 0px;
  border: 0 none;
  background: red;
}

div[slider] > input[type=range]::-webkit-slider-thumb {

  
  pointer-events: all;
  width: 60px;
  height: 60px;
  border-radius: 0px;
  border: 0 none;
  background: red;
  -webkit-appearance: none;
}

div[slider] > input[type=range]::-ms-fill-lower {
  background: transparent;
  border: 0 none;
}

div[slider] > input[type=range]::-ms-fill-upper {
  background: transparent;
  border: 0 none;
}

div[slider] > input[type=range]::-ms-tooltip {
  display: none;
}

[slider] > div > [sign] {
 opacity: 1;
    position: absolute;
/*    margin-left: -5%;*/
    top: 25%;
    height: 55%;
    width: 10%;
    z-index: 3;
    background-color: transparent;
    color: #000000;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center;
     user-select: none;
    display: table;
}

[slider] > div > [sign] > span {
    font-size: 12px;
    font-family: "GoogleSans";
/*    font-weight: 500;*/
/*    top: 28%;*/
/*    position: absolute;*/
/*
    width: 100%;
    height: 40%;
*/
/*    left: 0;*/
    user-select: none;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

/*end of slider*/

/*daynight containers*/

.containerday {
  position: absolute;
  left: 0%;
    top : 0%;
    height: 100%;
    width: 45%;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.containerday input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmarkday {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
 background-image: url(./images/sun_inactive.png);
}

.containerday input:checked ~ .checkmarkday {
  background-size: 100% 100%;
  background-image: url(./images/sun_active.png);
}

.containerday input:checked ~ .checkmarkday:after {
  display: block;
}
.containernight {
  position: absolute;
  right: 0%;
    top : 0%;
    height: 100%;
    width: 45%;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.containernight input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmarknight {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
 background-image: url(./images/moon_inactive.png);
}

.containernight input:checked ~ .checkmarknight {
  background-size: 100% 100%;
  background-image: url(./images/moon_active.png);
}

.containernight input:checked ~ .checkmarknight:after {
  display: block;
}
/* container levels */
.containermainlevel {
  position: absolute;
  left: 0%;
    top : 75%;
    height: 25%;
    width: 100%;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.containermainlevel input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmarkmainlevel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
 background-image: url(./images/main_off.png);
}

.containermainlevel input:checked ~ .checkmarkmainlevel {
  background-size: 100% 100%;
  background-image: url(./images/main_on.png);
}

.containermainlevel input:checked ~ .checkmarkmainlevel:after {
  display: block;
}

.containerlevel1 {
  position: absolute;
  left: 0%;
    top : 50%;
    height: 25%;
    width: 100%;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.containerlevel1 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmarklevel1 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
 background-image: url(./images/bottom_off.png);
}

.containerlevel1 input:checked ~ .checkmarklevel1 {
  background-size: 100% 100%;
  background-image: url(./images/bottom_on.png);
}

.containerlevel1 input:checked ~ .checkmarklevel1:after {
  display: block;
}

.containerlevel2 {
  position: absolute;
  left: 0%;
    top : 25%;
    height: 25%;
    width: 100%;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.containerlevel2 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmarklevel2 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
 background-image: url(./images/middle_off.png);
}

.containerlevel2 input:checked ~ .checkmarklevel2 {
  background-size: 100% 100%;
  background-image: url(./images/middle_on.png);
}

.containerlevel2 input:checked ~ .checkmarklevel2:after {
  display: block;
}
.containerlevel3 {
  position: absolute;
  left: 0%;
    top : 0%;
    height: 25%;
    width: 100%;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.containerlevel3 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmarklevel3 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
 background-image: url(./images/top_off.png);
}

.containerlevel3 input:checked ~ .checkmarklevel3 {
  background-size: 100% 100%;
  background-image: url(./images/top_on.png);
}

.containerlevel3 input:checked ~ .checkmarklevel3:after {
  display: block;
}
/* container levels end */

.containerfav {
  position:relative;
  object-fit: fill;
/*
   width: 100;
  height: 62px;
*/
  cursor: pointer;
/*  font-size: 22px;*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.containerfav input {
  position: relative;
  opacity: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
}

.checkmarkfav {
  position: relative;
  top: 0;
  left: 0;
  height: 30px;
  width: 30px;
    background-size: 30px 30px;
 background-image: url(./images/ic_favorites_inactive.png);
}

.containerfav input:checked ~ .checkmarkfav {
    
background-size: 30px 30px;
  background-image: url(./images/ic_favorites_active.png);
}

.containerfav input:checked ~ .checkmarkfav:after {
  display: block;
}

.containerfilterlist {
  position: absolute;
  display: block;
    width: 13%;
    height: 99.2px;  
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.containerfilterlist input {
  position: absolute;
  display: block;
  opacity: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
  user-select: all;
  pointer-events: all;
}

.checkmarkfilterlist {
  position: absolute;
  top: 20%;
    left: 25%;
    height: 60%;
    width: 60%;
  background-size: contain;
    background-repeat: no-repeat;
 background-image: url(./images/ic_favorites_inactive.png);
}

.containerfilterlist input:checked ~ .checkmarkfilterlist {
background-repeat: no-repeat;
background-size: contain;
  background-image: url(./images/ic_favorites_active.png);
}

.containerfilterlist input:checked ~ .checkmarkfilterlist:after {
  display: block;
}
.containerfavoriteslist {
  position: absolute;
  display: block;
    width: 100%;
    height: 100%;  
  cursor: pointer;
/*  font-size: 22px;*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none;
    pointer-events: none;
}
.containerfavoriteslist input {
  position: absolute;
  display: block;
  opacity: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
      user-select: all;
    pointer-events: all;
	margin: unset;
}

.checkmarkfavoriteslist {
  position: absolute;
    height: 100%;
    width: 100%;
    background-size: 100% 100%;
 background-image: url(./images/ic_favorites_inactive.png);
}

.containerfavoriteslist input:checked ~ .checkmarkfavoriteslist {
    
background-size: contain;
	background-repeat: no-repeat;
  background-image: url(./images/ic_favorites_active.png);
}

.containerfavoriteslist input:checked ~ .checkmarkfavoriteslist:after {
  display: block;
}
.favoritesrowelement
{
/*    display: inline-block;*/
    position: relative;;
    width: 9%;
/*    right: 5%;*/
    height: 5%;
        user-select: none;
    pointer-events: none;
    padding-right: 3%;
}
.favcolorline
{
    position: relative;
    height: 2px;
    width: 100%;
background: rgba(0, 0, 0, 0.0001);
box-shadow: inset 0px -1px 0px rgba(133, 216, 255, 0.35);
}
.favtextscontainer
{
	width:50%;
	height: 100%;
	display: flex;
	flex-direction: column;
}
#gallerymain
{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 6;
}
#galleryinteriors
{
	position: absolute;
	top:0%;
	left: 0%;
	width: 50%;
	height: 50%;
	background-color: aquamarine;
}
#gallerytour
{
	position: absolute;
	bottom:0%;
	left: 0%;
	width: 50%;
	height: 50%;
	background-color: rosybrown;
}
#galleryexteriors
{
	position: absolute;
	top:0%;
	right: 0%;
	width: 50%;
	height: 50%;
	background-color: white;
}
#gallerypanoramas
{
	position: absolute;
	bottom:0%;
	right: 0%;
	width: 50%;
	height: 50%;
	background-color: plum;
}
.gallerytitlecolorlinebackground {
position: absolute;
top: 44%;
left: 25%;
  height: 12%;
  width: 55%;
/*  object-fit: contain;*/
  background-image: linear-gradient(to right, rgba(0, 23, 87, 0), rgba(5, 99, 144, 0.9) 50%, rgba(0, 23, 87, 0));
}
.gallery360titlecolorlinebackground {
position: absolute;
top: 41%;
left: 10%;
  height: 18%;
  width: 80%;
/*  object-fit: contain;*/
  background-image: linear-gradient(to right, rgba(0, 23, 87, 0), rgba(5, 99, 144, 0.9) 50%, rgba(0, 23, 87, 0));
}
.gallerytitledownseparator {
	position: absolute;
  width: 100%;
/*  height: 1px;*/
  border-style: solid;
  border-width: 1px;
  border-image-source: linear-gradient(to right, rgba(227, 227, 227, 0) 0%, #85d8ff 48%, rgba(255, 255, 255, 0));
  border-image-slice: 1;
}
.gallerytitleupseparator {
	position: absolute;
  width: 100%;
/*  height: 1px;*/
bottom: 0%;
  border-style: solid;
  border-width: 1px;
  border-image-source: linear-gradient(to right, rgba(227, 227, 227, 0) 0%, #85d8ff 48%, rgba(255, 255, 255, 0));
  border-image-slice: 1;
}

a.gallerytitle 
{
  color: #ffffff;
  font-family: "GoogleSans";
  font-size: 14px;
  font-weight: 400;
   text-decoration: none;
	pointer-events: none;
}
a.gallerytitleviewer
{
  color: #ffffff;
  font-family: "GoogleSans";
  font-size: 14px;
  font-weight: 400;
   text-decoration: none;
}
a.gallerytitlecategory
{
  color: #ffffff;
  font-family: "GoogleSans";
  font-size: 14px;
  font-weight: 400;
   text-decoration: none;
}
.gallerytitletextcontainer
{
	width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.gallery360titletextcontainer
{
	width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.galleryviewertitletextcontainer
{
	position: absolute;
    left: 8%;
    width: 92%;
    height: 100%;
    display: flex;
    align-items: center;
}

#maingallerybuttonback
{
 position: absolute; 
    bottom: 3%; 
    left:1%; 
    height: 7%;
    width: 4%;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(./images/but_back.png);
    background-color: transparent;
    border: none;          
    cursor: pointer;       
    outline: none;     
/*    z-index: 8;*/
}
#main360gallerybuttonback
{
 position: absolute; 
    bottom: 3%; 
    left:1%; 
    height: 7%;
    width: 4%;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(./images/but_back.png);
    background-color: transparent;
    border: none;          
    cursor: pointer;       
    outline: none;     
/*    z-index: 8;*/
}
.maingallerybutton
{
 position: absolute;  
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
	background-position: center;
    background-image: url(./images/but_back.png);
    background-color: black;
    border: none;          
    cursor: pointer;       
    outline: none;     
/*    z-index: 8;*/
}

#tour360widget
{
 position: absolute;  
    height: 100%;
    width: 100%;
	background-color: transparent;
    border: none;          
	pointer-events: none;
	outline: none; 
	z-index: 8;
}

#tour360buttonback
{
 position: absolute; 
    bottom: 3%; 
    left:1%; 
    height: 7%;
    width: 4%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(./images/but_back.png);
    background-color: transparent;
    border: none;          
    outline: none;     
  
}
#tour360buttonbacktogallery
{
 position: absolute; 
    bottom: 3%; 
    left:1%; 
    height: 7%;
    width: 4%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(./images/but_back.png);
    background-color: transparent;
    border: none;          
    outline: none;     
  
}
#tour360prevbutton
{
   position: absolute;
	width: 5.1%;
    height: 6.48%; 
    top: 50%;
    left:0px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(./images/but_prev.png);
    background-color: transparent;
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
/*    vertical-align: middle; */
    z-index: 6;
    outline: none;
}

#tour360nextbutton
{
    position: absolute;
	width: 5.1%;
    height: 6.48%; 
    top: 50%;
    right: 0px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(./images/but_next.png);
    background-color: transparent;
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
/*    vertical-align: middle; */
    z-index: 6;
    outline: none;
    
}
#tour360prevbuttonbalcony
{
   position: absolute;
	width: 5.1%;
    height: 6.48%; 
    top: 50%;
    left:0px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(./images/but_prev.png);
    background-color: transparent;
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
/*    vertical-align: middle; */
    z-index: 6;
    outline: none;
}

#tour360nextbuttonbalcony
{
    position: absolute;
	width: 5.1%;
    height: 6.48%; 
    top: 50%;
    right: 0px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(./images/but_next.png);
    background-color: transparent;
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
/*    vertical-align: middle; */
    z-index: 6;
    outline: none;
    
}

#tour360categoryphotoscroll
{
	position: absolute;
	width: 40%;
	height: 15%;
	top: 2%;
	right: 2%;
	display: -webkit-box;
	overflow: overlay;
	pointer-events: all;
}
#tour360photoscroll
{
	position: absolute;
	width: 40%;
	height: 15%;
	bottom: 2%;
	left: 30%;
	display: -webkit-box;
	overflow: overlay;
	pointer-events: all;
}
.tour360categoryphotocontainer
{
	height: 100%;
    width: 21%;
    margin-left: 4%;
	background-color: white;
}
.tour360photocontainer
{
	height: 100%;
    width: 21%;
    margin-left: 4%;
	background-color: white;
}
.tour360photoimage
{
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 50%), url(images/360tour/0_preview.jpg);
border: 1px solid #85D8FF;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
outline: none;
}
.tour360categoryphotoimage
{
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
padding: inherit;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 50%), url(images/360tour/0_preview.jpg);
border: 1px solid #85D8FF;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
outline: none;
}
.tour360categoryimagetext
{
	display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
	background: rgba(11, 16, 20, 0.9);
	position: relative;
	width: 100%;
	top: 0%;
	height: 30%;
}
.tour360categoryimageactive
{
	display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
	background-image: url(./images/groupfor_active.png);
	position: relative;
	width: 100%;
	top: 0%;
	height: 70%;
	background-size: cover;
    background-position: center;
}
#interiorswidget
{
 position: absolute;  
    height: 100%;
    width: 100%;
	background-color: black;
    border: none;          
    pointer-events: all;
	outline: none; 
	z-index: 8;
}

#interiorsmainphotocontainer
{
	position: absolute;  
    height: 100%;
    width: 100%;
    border: none;          
	pointer-events: all;
	outline: none; 
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
	overflow: hidden;
}

#interiorsmainimage
{
	width:100%;
	height:100%;
	object-fit: contain;
}

#interiorsbuttonback
{
 position: absolute; 
    bottom: 3%; 
    left:1%; 
    height: 7%;
    width: 4%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(./images/but_back.png);
    background-color: transparent;
    border: none;          
    outline: none;     
  
}
#interiorsprevbutton
{
   position: absolute;
	width: 5.1%;
    height: 6.48%; 
    top: 50%;
    left:0px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(./images/but_prev.png);
    background-color: transparent;
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
/*    vertical-align: middle; */
    z-index: 6;
    outline: none;
}

#interiorsnextbutton
{
    position: absolute;
	width: 5.1%;
    height: 6.48%; 
    top: 50%;
    right: 0px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(./images/but_next.png);
    background-color: transparent;
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
/*    vertical-align: middle; */
    z-index: 6;
    outline: none;
    
}

#interiorsphotoscroll
{
	position: absolute;
	width: 40%;
	height: 15%;
	bottom: 3%;
	left: 30%;
	display: -webkit-box;
	overflow:auto;
	pointer-events: all;
}

.interiorsphotocontainer
{
	height: 100%;
    width: 21%;
    margin-left: 4%;
	background-color: white;
}
.interiorsphotoimage
{
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 50%), url(images/360tour/0_preview.jpg);
border: 1px solid #85D8FF;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
outline: none;
}

.galleryheader
{
position: absolute;
height: 6%;
width: 21%;
top: 2%;
left: 2%;
outline: none;	
z-index: 8;
}

.galleryheaderlines
{
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-style: solid;
    border-width: 1px;
    border-image-source: linear-gradient(to right, #85d8ff 0%, rgba(255, 255, 255, 0));
    border-image-slice: 1;
	position: absolute;
}

.galleryheaderbackground
{
	width: 100%;
    height: 100%;
	background: linear-gradient(90deg, rgba(5, 99, 144, 0.699547) 0%, rgba(0, 23, 87, 0.0001) 100%);
	position: absolute;
}

.menubuttoncontainer
{
	height: 100%;
	width: 15%;
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;  
	outline: none;
	display: inline-block;
}
a.menubuttontext
{
  color: #ffffff;
  font-family: "GoogleSans";
  font-size: 14px;
  font-weight: 400;
   text-decoration: none;
	margin-right: 3%;
}

.menubuttontextcontainer
{
	width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.menubutton
{
	position: absolute;
	height: 100%;
	width: 15%;
	background-repeat: no-repeat;
    background-size: 100% 100%;
/*    background-image: url(./images/but_next.png);*/
    background-color: transparent;
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;  
	outline: none;
	background-image:linear-gradient(180deg, rgba(99, 205, 255, 0.0001) 50%, rgba(99, 205, 255, 0.4) 99.93%);
	opacity: 0;
	border: 1px solid rgba(99, 205, 255, 0.4);
	box-sizing: border-box;
}

.menubutton:active {
    animation-name: menuanimation;
  animation-duration: 3s;
    /* animation css */
}

@-webkit-keyframes menuanimation {
    20% {opacity: 1;}
}
#menulanguagebutton
{
	position: absolute;
	height: 100%;
	width: 5%;
	background-repeat: no-repeat;
    background-size: 100% 100%;
/*    background-image: url(./images/but_next.png);*/
    background-color: transparent;
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;  
	outline: none;
	background-image:linear-gradient(180deg, rgba(99, 205, 255, 0.0001) 50%, rgba(99, 205, 255, 0.4) 99.93%);
	opacity: 0;
	border: 1px solid rgba(99, 205, 255, 0.4);
	box-sizing: border-box;
}
#menubuttonlanguagecontainer
{
	height: 100%;
	width: 5%;
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;  
	outline: none;
	display: inline-block;
}

#menubuttonlanguagetextcontainer
{
	width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
#menufullscreenbutton
{
	position: absolute;
	height: 100%;
	width: 5%;
	background-repeat: no-repeat;
    background-size: 100% 100%;
/*    background-image: url(./images/but_next.png);*/
    background-color: transparent;
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;  
	outline: none;
	background-image:linear-gradient(180deg, rgba(99, 205, 255, 0.0001) 50%, rgba(99, 205, 255, 0.4) 99.93%);
	opacity: 0;
	border: 1px solid rgba(99, 205, 255, 0.4);
	box-sizing: border-box;
}
#menufullscreencontainer
{
	height: 100%;
	width: 5%;
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;  
	outline: none;
	display: inline-block;
}

#menufullscreentextcontainer
{
	width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
#surroundingswidget
{
	display: none;
	position: absolute;
	z-index: 10;
	width: 100%;
	height: 100%;
}

#surroundingsbuttonback
{
 position: absolute; 
    bottom: 3%; 
    left:1%; 
    height: 7%;
    width: 4%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(./images/but_back.png);
    background-color: transparent;
    border: none;          
    outline: none;     
  
}

#roomcardfloorplanarrow
{
    position: absolute;
    width: 10%;
    height: 60%;
    right: 6%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto;
/*background-image: url(images/RoomCardFloorPlanButArrow.png);*/
}
#loadingscreen360
{
	position: relative;
	width: 100%;
	height: 100%;
	background-color: black;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
#loadingscreenbalcony
{
	position: relative;
	width: 100%;
	height: 100%;
	background-color: black;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
#loadingscreenmap
{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: black;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
	z-index: 2;
}
.imageloadinglogo
{
    background-image: url(images/loading_white.png);
    height: 3%;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}


/* The container */
.mapcontainertype {
      display: block;
    position: relative;
    width: 100%;
    height: 80%;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.mapcontainertype input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
	margin: 0;
}

/* Create a custom checkbox */
.mapcheckmarktype {
  position: absolute;
  height: 100%;
  width: 100%;
 background-image: url(./images/map_checkbox_off.png);
 background-repeat : no-repeat;
 background-size:contain;
}

/* When the checkbox is checked, add a blue background */
.mapcontainertype input:checked ~ .mapcheckmarktype {
  background-image: url(./images/map_checkbox_on.png);
  background-repeat : no-repeat;
  background-size:contain;

}

/* Show the checkmark when checked */
.mapcontainertype input:checked ~ .mapcheckmarktype:after {
  display: block;
}

.maparrowcontainertype {
      display: block;
    position: relative;
    width: 100%;
    height: 80%;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.maparrowcontainertype input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
	margin: 0;
}

/* Create a custom checkbox */
.maparrowcheckmarktype {
  position: absolute;
  height: 100%;
  width: 100%;
 background-image: url(./images/map_arrow_down.png);
 background-repeat : no-repeat;
 background-size:contain;
}

/* When the checkbox is checked, add a blue background */
.maparrowcontainertype input:checked ~ .maparrowcheckmarktype {
  background-image: url(./images/map_arrow_up.png);
  background-repeat : no-repeat;
  background-size:contain;

}

/* Show the checkmark when checked */
.maparrowcontainertype input:checked ~ .maparrowcheckmarktype:after {
  display: block;
}

.checkboxmaplist
{
	height: 50%;
    display: flex;
    flex-direction: row;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
}
.checkboxmapobjectlist
{
	height: 100%;
	width: 100%;
	padding: 0;
    display: flex;
    flex-direction: row;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
	background: transparent;
    outline: none;
	border: none;
	text-transform: inherit;
	text-align: start;
}
#mapmincontainer
{
	position: absolute;
	width: 30%;
	height: 4%;
	top: 3%;
	right: 1%;
	background: linear-gradient(90deg, rgba(5, 56, 80, 4e-05) 3.38%, rgba(27, 114, 156, 0.4) 50.23%, rgba(5, 56, 80, 4e-05) 96.7%);
	display: flex;
    flex-direction: row;
    z-index: 1;
}
#maptypebuttonscontainer
{
	position: absolute;
    height: 7%;
    width: 100%;
    top: 7%;
	display: flex;
	flex-direction: row;
}
.maptypebutton
{
	position: relative;
	height: 100%;
	width: 50%;
	border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    outline: none;
	background: linear-gradient(0deg, rgba(99, 205, 255, 0.0001) 0%, rgba(99, 205, 255, 0.2) 100%);
	text-transform: inherit;
	border: 1px solid rgba(99, 205, 255, 0.4);
	box-sizing: border-box;
        display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

}
.mapmintextinput
	{
		width: 30%;
		height: 100%;
	display: flex;
    flex-direction: row;
	justify-content: center;
    align-items: center;
	}
a.mapelementtext
{
  color: #ffffff;
  font-family: "GoogleSans";
  font-size: 13px;
  font-weight: 400;
   text-decoration: none;
/*	margin-right: 3%;*/
}
a.mapcategorytextelement
{
  color: #ffffff;
  font-family: "GoogleSans";
  font-size: 13px;
  font-weight: 400;
   text-decoration: none;
/*	margin-right: 3%;*/
}
#mapbuttonscontainer
{
	position: relative;
    width: 100%;
    height: 10%;
	top:90%;
    /* right: 2%; */
    /* top: 30%; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.mapbuttoncontainer
{
	position: relative;
    width: 50%;
    height: 100%;
	top:0%;
    /* right: 2%; */
    /* top: 30%; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

#mapshowall
{
	position: relative;
	height: 50%;
	width: 80%;
	border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    outline: none;
	background: #FFFFFF;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
	border-radius: 20%/50%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
#maphideall
{
	position: relative;
	height: 50%;
	width: 80%;
	border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    outline: none;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 20%/50%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

a.mapshowhidetext
{
  color: #ffffff;
  font-family: "GoogleSans";
  font-size: 13px;
  font-weight: 400;
   text-decoration: none;
/*	margin-right: 3%;*/
}
#mapcard
{
position: absolute;
top: 10%;
right: 1%;
width: 40%; /*20*/
height: 40%;
outline: none;
background: rgba(11, 16, 20, 0.8);
border: 1px solid rgba(133, 216, 255, 0.3);
box-sizing: border-box;
box-shadow: 0px -2px 3px rgba(0, 0, 0, 0.3), 0px -6px 10px rgba(0, 0, 0, 0.15);
    pointer-events: all;
    user-select: all;
z-index: 1;
}
#surrimagecard
{
    height: 80%;
    width: 94%;
    overflow: hidden;
    display: -webkit-inline-box;
}
.surrimagecardelement
{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100%;
    width: 100%;
}
#mapcardclose
{
 position: relative;
    height: 100%;
    width: 60px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url(./images/but_menu_close@2x.png);
    background-color: transparent;
    border: none;          
    cursor: pointer;       
    outline: none;     
}
#suswidget
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    pointer-events: all;
    display: none;
}
#susmenu {
  pointer-events: all;
	position: absolute;
     width: 30%;
  height: 90%;
	z-index: 1; /* TODO Solve this in HTML */

}
#sustextcontainer
{
       position: absolute;
    top: 8%;
    bottom: 10%;
    width: 90%;
    height: 82%;
    left: 5%;
}
#susmenubackground {
  
	position: absolute;
    width: 100%;
    height: 100%;
      background: rgba(11,16,20,0.8);
/*  box-shadow: 0px -6px10px4px rgba(0,0,0,0.15);*/
  box-shadow: 0px -2px3px rgba(0,0,0,0.3);
	z-index: -1; /* TODO Solve this in HTML */

}
#susbackground
{
    position: absolute;
   width: 100%;
	height: 100%;
/*    background-image: url(./images/susback.jpg);*/
    background-size: cover;
        background-color: black;
    background-position: center;
}
#susbuttonscontainer
{
	position: relative;
    width: 100%;
/*    left: 5%;*/
    height: 10%;
	top:90%;
    /* right: 2%; */
    /* top: 30%; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.susbuttoncontainer
{
	position: relative;
    width: 40%;
    height: 100%;
	top:0%;
    /* right: 2%; */
    /* top: 30%; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
#susupflexcontainer
{
    position: relative;
    display: flex;
    height: 10%;
    left: 5%;
    width: 90%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
#susdownflexcontainer
{
    position: relative;
    display: flex;
    height: 80%;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

#susfooterflexcontainer
{
    position: relative;
    display: flex;
    height: 10%;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
a.susbuttonstext
{
  color: #ffffff;
  font-family: "GoogleSans";
  font-size: 13px;
  font-weight: 400;
   text-decoration: none;
/*	margin-right: 3%;*/
}
a.sustextheader
{
/*	position: absolute;*/
    display: block;
	 color: #000000;
  font-family: "GoogleSans";
  font-size: 13px;
  font-weight: 400;
   text-decoration: none;
	z-index: 2;
	    line-height: 120%;
}
a.susmaintext
{
/*	position: absolute;*/
    display: block;
	 color: #ffffff;
  font-family: "GoogleSans";
  font-size: 13px;
  font-weight: 400;
   text-decoration: none;
	z-index: 2;
	    line-height: 120%;
}
a.susmaintext2
{
/*	position: absolute;*/
    display: block;
	 color: #ffffff;
  font-family: "GoogleSans";
  font-size: 13px;
  font-weight: 400;
   text-decoration: none;
	z-index: 2;
	    line-height: 120%;
    opacity: 0.8;
        text-indent: 3%;
}
a.susmaintext3
{
/*	position: absolute;*/
    display: block;
	 color: #ffffff;
  font-family: "GoogleSans";
  font-size: 13px;
  font-weight: 400;
   text-decoration: none;
	z-index: 2;
	    line-height: 120%;
}
.susheaderlogo
{
    display: block;
    height: 80%;
    width: 50%;
/*   background-image: url(./images/1.png); */
   background-repeat: no-repeat;
  background-size: contain;
    background-position: right;
   
}
.susheaderlogo2
{
    display: block;
        height: 80%;
    width: 50%;
/*   background-image: url(./images/2.png); */
     background-repeat: no-repeat;
  background-size: contain;
    background-position: left;
   
}
.susheaderlogo3
{
    display: block;
        height: 100%;
    width: 80%;
/*   background-image: url(./images/3.png); */
     background-repeat: no-repeat;
  background-size: contain;
    background-position: center;
   
}
#sustextbackground
{
    position: absolute;
    background: #FFFFFF;
    box-shadow: 0px 2px 4px rgb(0 0 0 / 50%);
    border-radius: 3%/3%;
    height: 100%;
    width: 100%;
    opacity: 0.3;
}
#prevslide
{
    background-image: url(./images/susback.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
        background-size: contain;
    height: 100%;
    width: 40%;
    background-position: center;
}
#nextslide
{
    background-image: url(./images/susnext.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
        background-size: contain;
    height: 100%;
    width: 40%;
    background-position: center;
}
#susbuttonback
{
 position: absolute; 
    bottom: 3%; 
    left:1%; 
    height: 7%;
    width: 4%;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(./images/but_back.png);
    background-color: transparent;
    border: none;          
    cursor: pointer;       
    outline: none;     
/*    z-index: 8;*/
}
#instructions
{
	position: relative;
    width: 100%;
    height: 100%;
}
#overviewinstruction
{
	position: absolute;
    bottom: 10%;
    width: 25%;
    height: 25%;
	left: 6%;
}
#filtersinstruction
{
	position: absolute;
    bottom: 10%;
    width: 25%;
    height: 25%;
	left: 22%;
}
#surroundingsinstruction
{
	position: absolute;
    bottom: 10%;
    width: 25%;
    height: 25%;
	left: 37%;
}
#galleryinstruction
{
	position: absolute;
    bottom: 10%;
    width: 25%;
    height: 25%;
	left: 52%;
}
#favoritesinstruction
{
	position: absolute;
    bottom: 10%;
    width: 25%;
    height: 25%;
	left: 67%;
}
#compassinstruction
{
	position: absolute;
    top: 6%;
    width: 25%;
    height: 25%;
    left: 48%;
}
#flyarrowsinstruction
{
	position: absolute;
    bottom: 46%;
    width: 10%;
    height: 25%;
	right: 4%;
}
#daynightinstruction
{
	position: absolute;
    top: 3%;
    width: 25%;
    height: 25%;
    right: 8.5%;
}
.instructionarrowdown
{    
position: relative;
 left: 10%;
    height: 15%;
    width: 20%;
background-image: url(./images/arrow_down_popup.png);
background-color: transparent;
    border: none;          
    cursor: pointer;       
    outline: none;  
    background-repeat: no-repeat;
    background-size: contain;	
	
/*
    top: -7%;
    left: 10%;
    width: 5%;
    height: 10%;
background: #FFFFFF;
transform: rotate(-45deg);
*/
}
.instructionarrowup
{    
position: relative;
 left: 10%;
    height: 15%;
    width: 20%;
background-image: url(./images/arrow_up_popup.png);
background-color: transparent;
    border: none;          
    cursor: pointer;       
    outline: none;  
    background-repeat: no-repeat;
    background-size: contain;	
}
.instructionarrowright
{    
position: relative;
/* left: 10%;*/
    height: 15%;
    width: 20%;
background-image: url(./images/arrow_right_popup.png);
background-color: transparent;
    border: none;          
    cursor: pointer;       
    outline: none;  
    background-repeat: no-repeat;
    background-size: contain;
}
.instructionblock
{
position: relative;
    width: 100%;
    height: 100%;
	background-repeat: no-repeat;
    background-size: 100% 100%;
background-image: url(./images/blockdownarrow.png);
}

a.instructionstext
{
	position: absolute;
	    top: 20%;
/*    bottom: 20%;*/
    left: 5%;
    right: 12%;
	 color: #000000;
  font-family: "GoogleSans";
  font-size: 13px;
  font-weight: 400;
   text-decoration: none;
	z-index: 2;
	    line-height: 120%;
}
.closeinstruction
{
	position: absolute;
	top: 10%;
    height: 10%;
/*    width: 5%;*/
    right: 2%;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(./images/closeinstruction.png);
    background-color: transparent;
	background-position: right;
    border: none;          
    cursor: pointer;       
    outline: none;  
}
.nextinstruction
{
	position: absolute;
	bottom: 10%;
    height: 20%;
    width: 13%;
    right: 2%;
	background-repeat: no-repeat;
    background-size: contain;
    background-image: url(./images/nextinstruction.png);
    background-color: transparent;
    border: none;          
    cursor: pointer;       
    outline: none;  
}
#popupsbutton
{
	position: relative;

width: 100%;
height: 100%;
background: #FFFFFF;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(./images/popup.png);
    background-color: transparent;
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    outline: none;
    background-position: center;
}
#popupscontainer
{
	position: absolute;
	height: 4%;
	width: 5%;
	top:2%;
	left:1%;
}
#logowidget
{
	position: absolute;
	height: 12%;
	width: 5%;
	top:0%;
	left:0%;
    background-image: url(./images/logo-overview.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
#loaderborder
{
	height: 1%;
    width: 70%;
    bottom: 5%;
    left: 15%;
    position: absolute;
    /* border: aliceblue; */
    border: 1px solid #85D8FF;
    box-sizing: border-box;
}
#loaderprogress
{
	background-color: white;
    height: 1%;
    width: 0%;
    bottom: 5%;
    left: 15%;
    position: absolute;
}

#mapimage
{
  position: absolute;
	height: 100%;
	width: 100%;
	top:0%;
	left:0%;
    background-image: url(./images/map_image.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;  
}

.mappin2d
{
    position: absolute;
	height: 10%;
	width: 10%;
	top:0%;
	left:0%;
    background-image: url(./images/pin_0.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;  
    background-color: transparent;
    border: none;
}