/*
* Main CSS for Kinetarium Conroller.
* Controlls general styles for all controller types.
*/

*{
  touch-action: manipulation;
}

*:not(input):not(textarea) {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
  -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}

html{
  height:100%;
}

body {
  background-color: #0A041F;
  font-family: 'Roboto Condensed', sans-serif;
  color: white;
  text-align: center;
  padding:0px;
  margin:0px;
  font-size: 12px;
}

h1 {
  text-transform: uppercase;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  margin: 0px;
  padding: 0px;
  pointer-events: none;
  text-shadow: 0px 0px 4px #27DAF1;
}


:focus {
  outline: 0;
  border: none;
  color: white;
}
[v-cloak]{
  display:none;
}

#indicator{
  background-image: url("../img/touchpad-indicator.svg");

  background-position: center;
  background-size:100%;
  background-repeat: no-repeat;

  width:90px;
  height:90px;

  margin-left: -45px;
  margin-top: -45px;
  position:absolute;
  pointer-events: none;
  z-index: 9;
}
#indicator.active{
  width:100px;
  height:100px;
  margin-left: -50px;
  margin-top: -50px;
}

#indicator.animated {
  transform-origin: center 0%;
  animation:rotate 3s linear infinite;
}
@keyframes rotate {

	from { transform: rotate(0deg) translateX(40px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(40px) rotate(-360deg); }
}

.touchpad-container{
  overflow: hidden;
}

#touchpad{

  /* background-image: url("../img/controller_variants/_default/touchpad-dome-neutral.svg"); */
  background-position: center center, center center;
  background-size: 100%;
  background-repeat: no-repeat, no-repeat;
  cursor: move;
}

#statsbar{
  margin: 10px;
  padding: 5px;
	/* border: 1px solid black;
	border-radius: 10px; */
	/* background-color: rgba(0,0,0,0.5); */
}

#buttonbar{
	margin: 0px 10px;
  justify-content: space-between;
}

#buttongrid{
  justify-content: space-between;
}
#buttongrid .button-container{
  flex: 1 0 50%;
}

.button-container{
  margin: 10px auto;
}
.button{
  width:70px;
  height: 70px;
  margin:auto;
  background-position: center center, center center;
  background-size: contain;
  background-repeat: no-repeat, no-repeat;
  touch-action: none;
  z-index:1;
}
.button-label{
  color:#8A99AF;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  margin: 6px auto;
}

.stats{
  text-transform: uppercase;
  font-weight: 300;
  color: #fff;
	border: none;
	font-size: 30px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.grey{
  color:#8A99AF;
  font-size: 14px;
}

.indexfield{
	font-size: 30px;
  font-weight: 700;
	text-align: left;
	width: 20%;
}

.rounded-button{
  margin: 12px;
  padding:10px 30px;
  border-radius:20px;
  border: 1.5px solid;
  border-color: rgba(142,157,179,0.2);
  display: inline-block;
  background: linear-gradient(-15deg, rgba(45,57,74,1) 0%, rgba(104,119,141,1) 100%);
  text-transform: uppercase;
  color:white;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-shadow: 0px 0px 4px #27DAF1;
  text-decoration: none;
}

.rounded-button.small{
  padding: 6px 10px;
  border-radius: 16px;
  font-size: 14px;
}

.help-text-icon
{
  display: block;
  width: 70px;
	margin: 0px auto 4px auto;
}


#overlay{
  background-color: rgba(0,0,0,0.95);
  background-image: linear-gradient(#120738, #0A041F);
  z-index: 10;
  padding:1.5rem 2rem;
  text-align: center;
}


.start-logo
{
	width:60%;
  margin-bottom: 20px;
  content: url("../img/CineplayLogo.svg");
}

.help-text{
  font-size: 14px;
  line-height: 1.3;
  /* margin-bottom: 10px; */
  color: #8291a8;
}

.parting-line{
	border-bottom: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(255,255,255, 0.75);
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.parting-line.light{
    border-bottom-color: #535F70;
}

.white-highlight{
  background-image: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0), rgba(255,255,255,0.1));
}

.flex-container-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
}

.flex-container-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#tutorialparts {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

#interface {
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  justify-content: space-around;
  position: absolute;
  top:0px;
  bottom:0px;
  left: 0px;
  right: 0px;
}

@media all and (orientation:landscape) {
	#interface {
		flex-direction: row-reverse;
    justify-content: space-between;
	}
  .flex-container-column {
    flex-grow: 1;
  }
}