/*
 * Cascading Style Sheet Document
 * Author:		Admentus
 * Design:		GhostyDark
 */

:lang(en) :lang(de),:lang(en) :lang(sv),:lang(en) :lang(nl),
:lang(de) :lang(en),:lang(de) :lang(sv),:lang(de) :lang(nl),
:lang(sv) :lang(de),:lang(sv) :lang(en),:lang(sv) :lang(nl),
:lang(nl) :lang(de),:lang(nl) :lang(en),:lang(nl) :lang(sv) {
	display:				none;
}

@keyframes fadeIn{from{opacity:.001}to{opacity:1}}
body{opacity:.001;animation:fadeIn .2s cubic-bezier(.4,0,.22,1) 1 forwards}

body {
	margin:					0;
	margin-left:			auto;
	margin-right:			auto;
	max-width:				950px;
	background-color:		#fafafa;
	transition:				background-color .2s cubic-bezier(.4, 0, .22, 1);
}

body, select, option, textarea, input {
	font-family:			Play, sans-serif;
}

a, select {
	-webkit-tap-highlight-color:rgba(255,255,255,0);
	-webkit-focus-ring-color:rgba(0,0,0,0);
}

header {
    position:               fixed;
    width:                  100%;
    right:                  0%;
    top:					0;
	z-index:				1;
}

.mobile {
	display:				none;
}

textarea {
	outline:				0;
	border:					2px dashed #333;
	margin:					10px;
	padding:				10px;
	transition:				background-color .2s cubic-bezier(.4, 0, .22, 1),border-color .2s cubic-bezier(.4, 0, .22, 1);
	cursor:					default;
	height:					500px;
	width:					40%;
	resize:					none;
	font-size:				15px;
}

.textarea_codelines {
	text-transform:			uppercase;
	font-family:			monospace;
}

#wrapper-top{
	position:				fixed;
	top:					0;
	z-index:				2;
}

#wrapper-bottom{
	position:				fixed;
	bottom:					15px;
	max-width:				950px;
	width:					100%;
}

#search_bar{
	text-transform:			none;
	float:					left;
	padding-left:			15px;
	border-radius:			25px;
	font-size:				16px;
	max-width:				160px;
	width:					100%;
	margin-bottom:			10px;
	margin-left:			10px;
}

#select_bar{
    max-width:				360px;
	display:				block;
	margin:					5px auto -5px auto;
}

#search_icon{
	position:				relative;
	right:					133px;
	float:					left;
	z-index:				2;
	display:				none;
}

#swap_select {
	cursor:					pointer;
	color:					#000;
	padding:				6px 6px 2px 6px;
	transition:				background-color .2s cubic-bezier(.4, 0, .22, 1);
	font-size:				20px;
	border-radius:			50%;
	float:					right;
	margin-right:			5px;
}

textarea:hover {
	cursor:					pointer;
}

textarea:hover,textarea:focus {
	background:				#EEE;
}

textarea:focus {
	background:				transparent;
	border-color:			rgb(80, 130, 220);
	cursor:					text;
}

@media (max-width:605px){
	textarea{
		width: 				80%;
		margin-left:		0;
		margin-right:		0;
	}
	textarea:nth-child(2){
		margin-top: 		10px;
	}
	.mobile {
	display:				inline-block;
	}
}

#wrapper {
	width:					100%;
	max-width:				950px;
	margin:					auto;
}

#textarea-wrapper {
	text-align:				center;
	margin-top:				20px;
}

#buttons{
	margin-top:				80px;
}

#buttons > a{
	line-height:			70px;
}

#buttons > a, .drop-button {
	cursor:					pointer;
	color:					#000;
	padding:				12px 12px 12px 8px;
	transition:				background-color .2s cubic-bezier(.4, 0, .22, 1);
	font-size:				18px;
	border-radius:			50px;
}

#buttons > a:hover, .drop-button:hover, .drop-button.active {
	background:				#EEE;
}

#buttons a svg, .drop-button svg{
	fill: 					#000;
	position:				relative;
	top:					6px;
}

#select_bar svg{
	fill:					#000;
}

.drop-button svg{
	pointer-events:			none;
}

.dropdown {
	position:				relative;
	display:				inline-block;
}

#dropdown_language {
	transition:				visibility 0s .2s,opacity .2s cubic-bezier(.4,0,.22,1);
	visibility:				hidden;
	opacity:				.001;
	position:				absolute;
	left:					25px;
	top:					55px;
	background-color:		#F1F1F1;
	min-width:				140px;
	z-index:				1;
	text-align:				left;
	font-size:				18px;
}

#dropdown_language a {
	color:					#000;
	padding: 				12px 16px;
	text-decoration: 		none;
	display: 				block;
	cursor:					pointer;
	transition:				background-color .2s cubic-bezier(.4, 0, .22, 1);
}

#dropdown_language a:hover {
	background-color:		#DDD;
}

#dropdown_language.show {
	visibility:				visible;
	opacity:				1;
	transition-delay:		0s;
}

#change_language svg, #dark_mode svg {
	margin-left:			5px;
}

#offset_button {
	font-size:				18px;
	cursor:					pointer;
	background:				rgba(50,100,200,.95);
	color:					#FFF;
	padding:				10px 10px 5px 10px;
	position:				absolute;
	bottom:					0;
	right:					15px;
	transition:				background-color .2s cubic-bezier(.4, 0, .22, 1);
	border-radius:			3px;
	z-index:				2;
}

#offset_button:hover {
	background:				rgb(30,80,180);
}

#offset_button svg {
	fill:					#fff;
}

.swap_space {
	cursor:					pointer;
	color:					#000;
	padding:				10px 10px 10px 6px;
	transition:				background-color .2s cubic-bezier(.4, 0, .22, 1);
	font-size:				20px;
	border-radius:			50%;
	margin-left:			3px;
	position:				relative;
	top:					2px;
}

.swap_space[data-value="off"], #swap_select {
	background:				transparent;
}

.swap_space[data-value="off"]:hover, #swap_select:hover {
	background:				#EEE;
}

.swap_space[data-value="on"] {
	background:				#DDD;
}

.swap_space[data-value="on"]:hover {
	background:				#CCC;
}

.swap_space svg {
	position:				relative;
	top:					5px;
	left:					2px;
}

h1 {
	text-align:				center;
	font-size:				30px;
	letter-spacing:			-1px;
	line-height:			35px;
	color:					#FFF;
	background:				rgb(50, 100, 200);
	padding:				10px;
	margin:					0 auto;
	max-width:				930px;
}

main {
	text-align:				center;
	display:				block;
}

#buttons a, .swap_space, #swap_select {
	-webkit-user-select:	none;
	-moz-user-select:		none;
	-ms-user-select:		none;
	user-select:			none;
}

[type='text'] {
	cursor:					pointer;
	border:					2px solid #333;
	border-radius:			3px;
	outline:				0;
	padding:				5px;
	transition:				background-color .2s cubic-bezier(.4, 0, .22, 1), border-color .2s cubic-bezier(.4, 0, .22, 1);
	text-transform:			uppercase;
	max-width:				100px;
	margin:					auto 2px;
}

[type='text']:hover,[type='text']:focus {
	background:				#EEE;
}

[type='text']:hover {
	cursor:					pointer;
}

[type='text']:focus {
	background:				transparent;
	border-color:			rgb(80, 130, 220);
	cursor:					text;
}

#offset_div div {
	margin-bottom:			20px;
	line-height:			50px;
}

#offset_div span:first-child {
	color:					#666;
	margin-right:			20px;
}

.offset{
	margin-left:			5px;
	margin-right:			15px;
}

.offset_condition_from{
	margin-left:			5px;
	margin-right:			15px;
}

.offset_condition_to{
	margin-left:			5px;
}

select {
	cursor:					pointer;
	font-size:				16px;
	border:					0;
	outline:				0;
	padding:				10px;
	-webkit-appearance:		none;
	-moz-appearance:		none;
	appearance:				none;
	background:				url(../svg/arrow-down.svg) no-repeat 99% #EEE;
	display:				block;
	margin:					0 auto;
	max-width:				360px;
	width:					100%;
	transition: 			background-color .2s cubic-bezier(.4, 0, .22, 1);
	z-index:				2;
}

select:hover {
	background-color:		#DDD;
}

select .presetHeader {
	font-weight:			700;
}

select option[value="None"].presetTitle {
	font-style:				italic; 
	background:				#FFF;
}

select option[value="None"] {
	background-color:		#DDD;
	color:					#000;
}

option {
	background:				#FFF;
}

option[disabled] {
	background:				#EEE;
}

footer {
	background:				#EEE;
	padding:				10px;
	text-align:				center;
	margin:					10px auto 15px auto;
	max-width:				400px;
	transition:				background-color .2s cubic-bezier(.4, 0, .22, 1);
}

footer a:nth-child(2) {
	margin-left:			7px;
}

footer svg {
	position:				relative;
	top:					2px;
}

footer svg path {
	fill:					#000;
}

footer span {
	position:				relative;
	top:					-10px;
	margin-left:			10px;
}

::placeholder{
	color:					#666;
}

::-moz-selection {
	background:				#ccc;
	color:					#000;
}

::selection {
	background:				rgba(200,200,200,.8);
	color:					#000;
}

::selection:window-inactive {
	background:				rgba(240,240,240,.8);
	color:					#000;
}

@media (max-width:605px){
	footer {
		margin-bottom:		90px;
	}
}

@media (min-width:1000px){
	#offset_button {
		right:				-15px;
	}
}


@font-face {
	font-family:			'Play';
	src: 					url('../font/play-regular.woff2') format('woff2');
}

@font-face {
	font-family:			'Play';
	src:					url('../font/play-bold.woff2') format('woff2');
	font-weight:			700;
}



/* Dark Mode */

.dark body {
	background-color:		#121212;
	color:					#FFF;
}

.dark textarea {
	background-color:		#121212;
	color:					#FFF;
	border-color:			#DDD;
}

.dark [type='text'] {
	background-color:		#121212;
	color:					#FFF;
	border-color:			#DDD;
}

.dark textarea:hover,.dark [type='text']:hover {
	background-color:		#212121;
}

.dark textarea:focus,.dark [type='text']:focus {
	background-color:		#121212;
	border-color:			rgb(80, 130, 220)
}

.dark #buttons a svg, .dark .swap_space, .dark #swap_select svg, .dark #select_bar svg {
	fill: 					#FFF;
}

.dark #buttons a {
	color:					#FFF;
}

.dark #buttons > a:hover, .dark .drop-button:hover , .dark .swap_space:hover, .dark #swap_select, .dark .drop-button.active {
	background:				#212121;
}

.dark .swap_space[data-value="off"], .dark #swap_select {
	background:				transparent;
}

.dark .swap_space[data-value="off"]:hover, .dark #swap_select:hover {
	background:				#212121;
}

.dark .swap_space[data-value="on"] {
	background:				#292929;
}

.dark .swap_space[data-value="on"]:hover {
	background:				#333;
}

.dark footer {
	background:				#212121;
	color:					#FFF;
}

.dark footer svg path {
	fill:					#fff;
}

.dark select {
	background:				url(../svg/arrow-down-dark.svg) no-repeat 99% #222;
	color:					#FFF;
}

.dark select:hover {
	background-color:		#333;
}

.dark option {
	background:				#121212;
}

.dark select option[value="None"] {
	background-color:		#000;
	color:					#FFF;
}

.dark option[disabled] {
	background:				#090909;
}

.dark select option[value="None"].presetTitle {
	background:				#121212;
}

.dark #offset_div span:first-child {
	color:					#AAA;
}

.dark #dropdown_language a {
	background-color:		#222;
}

.dark #dropdown_language a:hover {
	background-color:		#333;
}

.dark ::placeholder{
	color:					#AAA;
}

.dark ::-moz-selection {
	background:				#444;
	color:					#fff;
}

.dark ::selection {
	background:				rgba(60,60,60,.8);
	color:					#fff;
	border-color:			#fff;
}

.dark ::selection:window-inactive {
	background:				rgba(120,120,120,.8);
	color:					#fff;
}



/* Scrollbar */

html{scrollbar-color:#bbb #eaeaea}
.dark{scrollbar-color:#777 #121212}

@media (min-width:906px){
::-webkit-scrollbar{width:16px}
::-webkit-scrollbar-track{background-color:#fafafa}
::-webkit-scrollbar-thumb{background-color:#bbb}
::-webkit-scrollbar-thumb:hover{background-color:#999}
.dark ::-webkit-scrollbar-track{background-color:#121212}
.dark ::-webkit-scrollbar-thumb{background-color:#777}
.dark ::-webkit-scrollbar-thumb:hover{background-color:#555}
}