html,
body {
	overscroll-behavior-y: contain;
}


.urldialog{
	width:90vw;
	max-height:80vh;
}

input:required:invalid, input:focus:invalid {
    background-color: #ffaaaa;
}

input.card:focus {
    outline: none;
}

.highlightbubble {
    -webkit-animation-name: highlightbubble;
    -webkit-animation-duration: .35s;
    -webkit-animation-fill-mode: forwards;
    animation-name: highlightbubble;
    animation-duration: .35s;
    animation-fill-mode: forwards;
}

.hiddenscroll::-webkit-scrollbar{
	display:none;
}

.hiddenscroll{
	overflow-y:scroll;
	-ms-overflow-style:none;
	scrollbar-width:none;
}

@keyframes highlightbubble {
    from {
        opacity: .5;
    }
    to {
        opacity: 1;
    }
}

.dehighlightbubble {
    -webkit-animation-name: dehighlightbubble;
    -webkit-animation-duration: .35s;
    -webkit-animation-fill-mode: forwards;
    animation-name: dehighlightbubble;
    animation-duration: .35s;
    animation-fill-mode: forwards;
}

@keyframes dehighlightbubble {
    from {
        opacity: 1;
    }
    to {
        opacity: .5;
    }
}

.page-title {
    text-decoration: underline;
}

.topwrapper {
    padding: 0px;
    resize: both;
    position: relative;
    height: 35vh;
    overflow-y:hidden;
}

.bottomwrapper {
    padding: 0px;
    resize: horizontal;
    position: absolute;
    overflow-y:scroll;
}

.range input[type=range]{
	margin-top:10%;
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	transform:rotate(270deg);
	width:50vh;
	margin:0px;
	margin-left:-30vh;
}

.range{
	width:5vh;
}

#topsection {
    width: 4000px;
    height: 800px;
    padding: 0px;
    margin: 0px;
    text-align: center;
    position: relative;
    left: 50vw;
    top: 0px;
    transform: translate(-50%, 0%);
    transform-origin: center top;
}

#checkpoints {
    width: 2000px;
    height: 2000px;
    padding: 0px;
    margin: 0px;
    text-align: center;
    position: relative;
    left: 50vw;
    top: 0px;
    
    transform: translate(-50%, 0%);
    transform-origin: center top;
}

#leaderboardsection {
    width: 2000px;
    height: 2000px;
    padding: 0px;
    margin: 0px;
    text-align: center;
    position: relative;
    left: 50vw;
    top: 0px;
    
    transform: translate(-50%, 0%);
    transform-origin: center top;
}

#topwrapper{
	height:29vw;
}

#bottomsection,#slider,#pointswrapper,#leaderboardwrapper{
	height:71vw;
}

#upperbar,#upperbaricon{
	height:8vh;
}

#adminicon{
	height:7vh;
}

#upperbartitle{
	font-size:7vh;
}

#adminbuttoncontainer{
	margin-right: calc(4vh + 3vw);
}

.menubutton{
	font-size:1vw;
}

.unselectable{
	-webkit-touch-callout: none;
	-webit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

#urldialog #content #closex{
	font-size: calc(1.5vw + 3vh);
}

#completesession #content #closex{
	font-size: calc(1.5vw + 3vh);
}

@media (max-aspect-ratio:1/1){
	/* points styles*/
	#topwrapper{
		height:30vw;
	}
	#bottomsection,#slider,#pointswrapper,#leaderboardwrapper{
		height:80vh;
	}
	
	/*tourcard app styles*/
	
	#upperbar,#upperbaricon{
		height:6vh;
	}
	
	#adminicon{
		height:5.5vh;
		margin-top:1vh;
	}
	
	#upperbartitle{
		font-size:4.5vh;
	}
	
	.menubutton{
		bottom:-1vh;
		font-size:1vh;
	}
	#adminbuttoncontainer{
		margin-right:7vh;
	}
}