@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);

html{
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
}

body {
	margin:0px;
	width: 100vw;
	height: 100vh;
	color: #fff;
	/* background: linear-gradient(-45deg, #ffe666, #EE7752, #E73C7E);
	background-size: 400% 400%;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite; */
}

@-webkit-keyframes Gradient {
	0% { 		background-position: 0% 50%	}
	50% {		background-position: 100% 50%	}
	100% {		background-position: 0% 50%	}
}

@-moz-keyframes Gradient {
	0% {		background-position: 0% 50%	}
	50% {		background-position: 100% 50%	}
	100% {		background-position: 0% 50%	}
}

@keyframes Gradient {
	0% {		background-position: 0% 50%	}
	50% {		background-position: 100% 50%	}
	100% {		background-position: 0% 50%	}
}

.text {
	font-family: "Open Sans", "Impact";
	/* text-transform: uppercase; */
	fill: url(#gr-simple);
}

.text.f1 {
	font-size: 50px;
}
.text{
	font-size: 30px;
}

.pointer{
	cursor: pointer;
}

.margin200{
	margin-top: 200px;
}

.hide{
	display: none !important;
}

.navbar{
	font-family: "Roboto";
	height: 60px;
	width: 100vw;
	position: fixed;
	z-index: 999;
	background: #fff;
	/* border-bottom: 1px solid rgba(0,0,0,.14); */
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.07);
	/* color: rgba(0,0,0,.6); */
}

.header-nav-list{
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	list-style-type: none;
	margin: 0px;
	line-height: 60px;
	margin-right: 26px;
}

.header-nav li {
	font-size: 14px;
	margin-left: 26px;
	text-transform: uppercase;
	color: #929292;
}

.header-nav div.active{
	color: #FF8482;
	/* font-weight: 500; */
}

.header-nav{
	display: inline;
	position: absolute;
	right: 0px;
	height: 60px;
}

a, a:visited, a:hover, a:active {
	color: inherit;
}

#send.disabled{
	background-color: #929292;
	cursor: not-allowed;
}

.body{
	position: absolute;
	top: 60px;
	left:0px;
	right:0px;
	bottom:0px;
	overflow-y:scroll;
	overflow-x: hidden;
	height: calc(100vh - 60px);
}

.main{
	position: absolute;
	width: 100vw;
	height: 150px;
	text-align: center;
	top: 250px;
	z-index: 2;
}

#id{
	height: 50px;
	position: relative;
	width: 100%;
}

textarea, select, input, button { outline: none; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance:textfield; }
::placeholder { color: #929292; opacity: 1; }
:-ms-input-placeholder { color: #929292; }
::-ms-input-placeholder { color: #929292; }

@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-o-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@-ms-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

#send svg:nth-child(1){
	display: inline;
}
#send svg:nth-child(2){
	display: none;
}
#send.sending svg:nth-child(1){
	display: none;
}
#send.sending svg:nth-child(2){
	display: inline;
}

#received .next>svg:nth-child(1){
	display: inline;
}
#received .next>svg:nth-child(2){
	display: none;
}
#received .next.receiving>svg:nth-child(1){
	display: none;
}
#received .next.receiving>svg:nth-child(2){
	display: inline;
	cursor: normal;
}

.unselectable {
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}