/* Font size x0.7 */
html, body{
	width: 100vw;
	height: 100vh;
	
	margin: 0;
	padding: 0;
	
	overflow: hidden;
}

html{
	--nht-default-font-size: 0.5208333333333vw; /*10px*/
	
	font-size: var( --nht-default-font-size ) !important; 
	
	-webkit-user-select: none;
	user-select: none;
}

html input{
	font-size: inherit;
}

body *{
	color: white;
	font-family: Orbitron Medium;
	text-transform: uppercase;
}

p{
	margin: 0;
}

.logo{
	width: 10em;
	height: 10em;
	
	background-image: url( "/game/img/global/logo.png" );
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.new-iframe-background{
	position: absolute;
	top: 0;
	left: 0;
	
	width: 100%;
	height: 100%;
	
	z-index: -1;
}

.new-iframe-background iframe{
	border: 0;
	
	width: 100%;
	height: 100%;
}

/* Buttons */
/* Website style button */
.website-style-button{
	-webkit-appearance: none; 
	background-color: var( --color-orange );
	border: none;
	border-radius: 5em;
	padding: min( 15px, 1.5em ) min( 45px, 4.5em );
	
	text-transform: uppercase;
	
	font-size: 1.7em;
	
	font-family: Montserrat Regular;
	font-weight: 600;
}

.website-style-button:hover{
	opacity: 0.7;
}

/* Default button */
.default-button{
	display: flex;
	width: 25em;
	height: 6.5em;
	
	cursor: pointer;
	user-select: none;
	
	--button-edge-size: 1.5em;
	--button-color: var(--color-pink-op55);
}

.default-button .button-edge{
	width: 0px;
	
	border-right: var( --button-edge-size ) solid var( --button-color );
	border-bottom: var( --button-edge-size ) solid transparent;
}

.default-button .button-content{
	display: flex;
	
	--button-calc-padding: calc( var( --button-edge-size ) / 5 );
	
	background-color: var( --button-color );
	
	align-items: center;
	justify-content: center;
	
	box-sizing: border-box;
	
	width: 100%;
	max-width: calc( 100% - var( --button-edge-size ) );
}

.default-button .button-content-inner{
	max-width: calc( 100% - var( --button-calc-padding ) );
	max-height: calc( 100% - var( --button-calc-padding ) );
	
	padding: 0 var( --button-calc-padding );
	padding-right: calc( var( --button-edge-size ) + var( --button-calc-padding ) );
	
	box-sizing: border-box;
}

.default-button .button-content span{
	width: 100%;
	max-height: 100%;
	
	overflow: hidden;
	
	color: var(--color-white-op60);
	
	font-size: 2.8437em;
}

.button-arrow .button-content{
	background-image: url( "/game/img/svg/button-arrow.svg" );
	background-size: 1.6em 3.3em;
    background-repeat: no-repeat;
    background-position: calc( 100% - 1.9em ) center;
}

.right-button{
	flex-direction: row-reverse;
}

.right-button .button-content-inner{
	padding-right: var( --button-calc-padding );
	padding-left: calc( var( --button-edge-size ) + var( --button-calc-padding ) );
}

.right-button .button-edge{
	border-right: none;
	border-left: var( --button-edge-size ) solid var( --button-color );
    border-bottom: var( --button-edge-size ) solid transparent;
}

.right-button .button-content{
	justify-content: flex-end;
}

@media (hover: hover){
	.default-button:hover{
		opacity: 0.7;
	}
}

.disabled-button{
	cursor: not-allowed !important; 
	
	opacity: 0.7;
}

.nht-button:hover{
	opacity: 0.7;
	cursor: pointer;
}

/* New button */
.new-button{
	font-size: 1em;
	
	--new-button-color: var( --color-pink );
	
	--new-button-background-opacity: 0.55;
	
	cursor: pointer;
	
	user-select: none;
}

.new-button:hover{
	
	opacity: 0.7;
	
}

.new-button .new-button-content{
	width: 100%;
	
	display: flex;
	
	justify-content: center;
	
	position: relative;
	
	padding: 1em 1em 1.05em 1.125em;
	
	box-sizing: border-box;
}

.new-button .new-button-edge{
	width: 0px;
	height: calc( 100% - 0.75em );
	
	border-right: 0.75em solid var( --new-button-color );
	border-bottom: 0.75em solid transparent;
	
	transform: translateX( 1px );
}

.new-button .new-button-fill{
	width: 100%;
	height: calc( 100% - 1px );
	
	background-color: var( --new-button-color );
}

.new-button .new-button-content span{
	position: relative;
	z-index: 2;
}

.new-button .new-button-background{
	position: absolute;
	
	display: flex;
	
	top: 0;
	left: 0;
	
	width: 100%;
	height: 100%;
	
	z-index: 1;
	
	opacity: var( --new-button-background-opacity );
}

.button-disabled{
	opacity: 0.5;
	cursor: initial;
	
	pointer-events: none;
}

/* Default text input */
.default-text-input{
	width: 100%;
	
	display: flex;
	
	padding: 0.4em;
	
	box-sizing: border-box;
	
	background-color: var( --color-white-op60 );
}

.default-text-input-locked{
	pointer-events: none;
	opacity: 0.7;
}

.default-text-input .text-input{
	color: rgba( 0, 0, 0, 0.75 );
	
	font-size: 1.93em;
	
	width: 50%;
	
	flex-grow: 1;
	
	outline: none;
	border: 0;
	
	margin: 0;
	padding: 0.1rem 0.2rem;

	background-color: transparent;
}

.default-text-input .submit-input{
	width: 3em;
	height: 3em;
	
	padding: 0;
	
	border: 0;
	border-radius: 0;
	
	background-color: var( --color-blue );
	
	background-image: url( '/game/img/svg/button-arrow.svg' );
	
	background-size: auto 55%;
	background-repeat: no-repeat;
	background-position: center center;
}

.default-text-input .submit-input:hover{
	opacity: 0.7;
}

/*Cursor settings*/
input[type="submit"], button{
	cursor: pointer;
}

/*Fonts*/
@font-face {
  font-family: Orbitron Medium;
  src: url('/game/fonts/Orbitron-Medium.woff');
}

@font-face {
  font-family: Montserrat Regular;
  src: url('/game/fonts/Montserrat-Regular.woff');
}

@font-face {
  font-family: ShareTech Regular;
  src: url('/game/fonts/ShareTech-Regular.woff');
}


/*Variables*/
:root {
  --color-lightblue-op10: rgba(167, 190, 211, 0.1);
  --color-lightblue-op15: rgba(167, 190, 211, 0.15);
  --color-lightblue-op25: rgba(167, 190, 211, 0.25);
  --color-lightblue-op40: rgba(167, 190, 211, 0.4);
  --color-lightblue-op55: rgba(167, 190, 211, 0.55);
  --color-lightblue-op70: rgba(167, 190, 211, 0.7);
  --color-lightblue-op85: rgba(167, 190, 211, 0.85);
  --color-lightblue: #A7BED3;
  
  --color-grey-op55: rgba(187, 202, 216, 0.55);
  --color-grey-op85: rgba(187, 202, 216, 0.85);
  --color-grey: #BBCAD8;
  
  --color-white-op30: rgba(255, 255, 255, 0.3);
  --color-white-op40: rgba(255, 255, 255, 0.4);
  --color-white-op60: rgba(255, 255, 255, 0.6);
  --color-white-op80: rgba(255, 255, 255, 0.8);
  --color-white-op90: rgba(255, 255, 255, 0.9);
  
  --color-black-op80: rgba(0, 0, 0, 0.8);
  
  --color-blue: #00ADEE;
  --color-blue-op55: rgb(0, 173, 238, 0.55);
  
  --color-dark-blue: #1C779C;
  
  --color-orange: #e75603;
  
  --color-pink-op25: rgba(210, 80, 151, 0.25);
  --color-pink-op45: rgba(210, 80, 151, 0.45);
  --color-pink-op55: rgba(210, 80, 151, 0.55);
  --color-pink: #d35098;
  
  --color-red: #EA5524;
  
  --color-dark-red-op30: rgba(188, 74, 43, 0.3);
  --color-dark-red: #BC4A2B;
  
  --color-green-op30: rgba(94, 180, 122, 0.3);
  --color-green-op55: rgba(94, 180, 122, 0.55);
  --color-green: #5EB47A;
  
  --color-ck-orange: #E95524;
  --color-ck-orange-op55: rgba(233, 85, 36, 0.55);
  --color-ck-orange-op90: rgba(233, 85, 36, 0.85);
  
  --color-mila-red: #C11111;
  --color-mila-red-op60: rgba(193, 17, 17, 0.6);
  
  --color-dark-grey-background-op90: rgba(76, 95, 114, 0.9);
  
  --blur: 10px;
}

/* VideoJS */
.default-video{
	width: 100%;
	height: auto;
	display: flex !important;
	background-color: transparent !important;
}

.default-video .vjs-tech{
	position: relative !important;
	width: 100% !important;
	height: auto !important;
}

.default-video .vjs-text-track-display, .default-video .vjs-loading-spinner{
	display: none !important;
}

/* Default scrollbar */
.nht_default_scrollbar{
	--nht-default-scrollbar-width: 0.8em;
	
	scrollbar-color: rgba(221, 210, 215, 0.3) rgba(49, 80, 96, 0.3);
	scrollbar-width: thin;
	
}

.nht_default_scrollbar::-webkit-scrollbar{
	width: var( --nht-default-scrollbar-width );
}

.nht_default_scrollbar::-webkit-scrollbar-thumb{
	background: rgba(221, 210, 215, 0.3);
}

.nht_default_scrollbar::-webkit-scrollbar-track {
  background-color: rgba(49, 80, 96, 0.3);
}

/* Default background classes */
.nht-background-cover{
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Default loader icon */
.nht_load_icon{
    width: min( 4em, 100% );
    padding-top: min( 4em, calc( 100% - 1em ) );
	
    border: 0.5em solid var( --color-grey );
	border-top-color: var( --color-white );
	
    box-sizing: border-box;
   
    border-radius: 100%;
	
	animation: nht_rotate_animation 1s linear infinite;
}

@keyframes nht_rotate_animation {
  0%	{ transform: rotate( 0deg ) }
  0%	{ transform: rotate( -360deg ) }
}