@import url(https://fonts.googleapis.com/css?family=VT323);
*{  font-family: 'VT323'}
.btn {
  font-family: 'VT323';
  transition: box-shadow ease .1s; }
  .btn:hover {
    opacity: 0.8;
    transform: translateY(4px);
    box-shadow: 0px 0px 0px 0px rgba(10, 10, 10, 0.5); }
  .btn:active {
    opacity: 1;
    transform: translateY(4px);
    box-shadow: 0px 0px 0px 0px rgba(10, 10, 10, 0.5); }


.btn-primary {
  background: #0d47a1;
  box-shadow: 1px 4px 1px 1px rgba(10, 49, 109, 0.85), 0px 6px 1px 2px rgba(10, 10, 10, 0.5); }
  .btn-primary:hover {background: #0d47a1;}
  .btn-primary:active {background: #0d47a1;}
  .btn-primary:focus {background: #0d47a1;}

.btn-secondary {
  background: #37474F;
  box-shadow: 1px 4px 1px 1px rgba(34, 44, 49, 0.85), 0px 6px 1px 2px rgba(10, 10, 10, 0.5); }
  .btn-secondary:hover {background: #37474F;}
  .btn-secondary:active {background: #37474F;}
  .btn-secondary:focus {background: #37474F;}

.btn-danger {
  background: #cc0000;
  box-shadow: 1px 4px 1px 1px rgba(160, 0, 0, 0.85), 0px 6px 1px 2px rgba(10, 10, 10, 0.5); }
  .btn-danger:hover {background: #cc0000;}
  .btn-danger:active {background: #cc0000;}
  .btn-danger:focus {background: #cc0000;}

.btn-warning {
  background: #ff8800;
  box-shadow: 1px 4px 1px 1px rgba(215, 96, 0, 0.85), 0px 6px 1px 2px rgba(10, 10, 10, 0.5); }
  .btn-warning:hover {background: #ff8800;}
  .btn-warning:active {background: #ff8800;}
  .btn-warning:focus {background: #ff8800;}
  
.btn-success {
  background: #009a3e;
  box-shadow: 1px 4px 1px 1px rgba(0, 114, 22, 0.85), 0px 6px 1px 2px rgba(10, 10, 10, 0.5); }
  .btn-success:hover {background: #009a3e;}
  .btn-success:active {background: #009a3e;}
  .btn-success:focus {background: #009a3e;}
  
.btn-info {
  background: #33b5e5;
  box-shadow: 1px 4px 1px 1px rgba(11, 141, 189, 0.85), 0px 6px 1px 2px rgba(10, 10, 10, 0.5); }
  .btn-info:hover {background: #33b5e5;}
  .btn-info:active {background: #33b5e5;}
  .btn-info:focus {background: #33b5e5;}
  
.content{
  background: #383838;
  color: #14fdce;;
  font-size: 24px;
  -webkit-font-smoothing: none;
  line-height: 1.2;
}

@font-face {
  font-family: 'uuxsl';
  src: url('https://i.icomoon.io/public/188ac2dd2d/VOX/uuxsl.eot');
}


.terminal-window section.terminal{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

.terminal-data { display: none; }
.terminal-window .gray { color: gray; }
.terminal-window .green { color: green;}
.terminal-window .red { color: red;}

.visiblediv {
    display: block;
}

.hiddendiv {
    display: none;
}
.ads {
  text-align: center !important;
  margin: 5px;
}
.left-ads {
  text-align: right;
  margin: 5px 0px 5px 0px;
}
.right-ads {
  text-align: left;
  margin: 5px 0px 5px 0px;
}
.antibotlinks {
  display: inline-block;
}
.atb {
  display: block;
  text-align: center;
}
.currency-dashboard {
  max-width: 25px;
}
.grecaptcha-badge {
  width: 70px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  left: 4px !important;
  z-index: 2;
}

.grecaptcha-badge:hover {
  width: 256px !important;
}
.float-nav {
  position: fixed; z-index: 3;
  bottom: 1.275em; right: 0em;
  overflow: hidden;
  width: 320px; height: 520px;
  padding: 1.375em;
  text-align: right;
  background-color: rgba(0,0,0,0.7);
  border: 0px solid #383838;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.2),
    0 4px 10px rgba(0,0,0,0.15);
  transition: all 300ms cubic-bezier(.6,-0.3,.3,1.3);
}
.float-nav.closed {
  width: 0; height: 0;
  background: #383838;
  bottom: 6.275em; right: 0em;  
  border: 2px solid #fff;
  border-radius: 5px 0px 0px 5px ;
}

.float-nav a {
  display: inline-block;
  color: #fff;
}
.float-nav > a { -webkit-tap-highlight-color: rgba(0,0,0,0); }

.float-nav .toggle {
  position: absolute;
  bottom: 0; right: 0;
  width: 1.375em; height: 1.375em;
  font-size: 200%; line-height: 1.375em;
  font-weight: 300; text-align: center;
  transform: rotate(45deg);
  transform-origin: 50%;
  transition: all 300ms;
}
.float-nav.closed .toggle {
  transform: rotate(0);
}

.float-nav chat {
  position: absolute;
  bottom: 2.125em; right: 0; left: 0;
  opacity: 1;
  transition: all 300ms;
}
.float-nav.closed chat { opacity: 0; }

.float-nav2 {
  position: fixed; z-index: 3;
  bottom: 1.275em; left: 0em;
  overflow: hidden;
  width: 320px; height: 520px;
  padding: 1.375em;
  text-align: left;
  background-color: rgba(0,0,0,0.7);
  border: 0px solid #383838;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.2),
    0 4px 10px rgba(0,0,0,0.15);
  transition: all 300ms cubic-bezier(.6,-0.3,.3,1.3);
}
.float-nav2.closed {
  width: 0; height: 0;
  background: #383838;
  bottom: 6.275em; left: 0em;  
  border: 2px solid #fff;
  border-radius: 0px 5px 5px 0px ;
}

.float-nav2 a {
  display: inline-block;
  color: #fff;
}
.float-nav2 > a { -webkit-tap-highlight-color: rgba(0,0,0,0); }

.float-nav2 .toggle2 {
  position: absolute;
  bottom: 0; left: 0;
  width: 1.375em; height: 1.375em;
  font-size: 200%; line-height: 1.375em;
  font-weight: 300; text-align: center;
  transform: rotate(45deg);
  transform-origin: 50%;
  transition: all 300ms;
}
.float-nav2.closed .toggle2 {
  transform: rotate(0);
}

.float-nav2 info {
  position: absolute;
  bottom: 2.125em; right: 0; left: 0;
  opacity: 1;
  transition: all 300ms;
}
.float-nav2.closed info { opacity: 0; }

:root {
		--fg: #e3e4e8;
		--shade1: #23252a;
		--shade2: #3e424c;
		--shade3: #4a4e5a;
		--shade4: #686e7e;
	--dur1: 1s;
	--dur2: 6s;
	font-size: calc(16px + (32 - 16)*(100vw - 320px)/(2560 - 320));
}
#loader {
	background-image: linear-gradient(145deg,var(--shade3),var(--shade2));
	color: var(--fg);
	position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;
}
.preloader {
	animation: largePopOut var(--dur1) linear;
	border-radius: 50%;
	box-shadow:
		0.15em 0.15em 0.15em var(--shade4) inset,
		-0.15em -0.15em 0.15em var(--shade1) inset,
		1em 1em 2em var(--shade1), 
		-1em -1em 2em var(--shade4);
	margin-bottom: 3em;
	width: 12em;
	height: 12em;
    position: fixed;
    top:-100%; right:-100%; left:-100%; bottom:-100%;
    margin:auto;
    z-index:0;
}
.preloader__square {
	animation: smallPopOut1 var(--dur1) linear, popInOut var(--dur2) var(--dur1) linear infinite;
	border-radius: 0.5em;
	box-shadow:
		0.15em 0.15em 0.15em var(--shade4) inset,
		-0.15em -0.15em 0.15em var(--shade1) inset,
		0.25em 0.25em 0.5em var(--shade1),
		-0.25em -0.25em 0.5em var(--shade4);
	position: absolute;
	top: 2.5em;
	left: 2.5em;
	width: 3em;
	height: 3em;
}
.preloader__square:nth-child(n + 2):nth-child(-n + 3) {
	left: 6.5em;
}
.preloader__square:nth-child(n + 3) {
	top: 6.5em;
}
.preloader__square:nth-child(2) {
	animation: smallPopOut2 var(--dur1) linear, move2 var(--dur2) var(--dur1) linear infinite;
}
.preloader__square:nth-child(3) {
	animation: smallPopOut3 var(--dur1) linear, move3 var(--dur2) var(--dur1) linear infinite;
}
.preloader__square:nth-child(4) {
	animation: smallPopOut4 var(--dur1) linear, move4 var(--dur2) var(--dur1) linear infinite;
}
.status {
	animation: fadeIn var(--dur1) linear forwards;
	text-align: center;
}
.status__dot {
	animation: appear1 var(--dur1) var(--dur1) steps(1,start) infinite;
	display: inline-block;
}
.status__dot:nth-child(2) {
	animation: appear2 var(--dur1) var(--dur1) steps(1,start) infinite;
}
.status__dot:nth-child(3) {
	animation: appear3 var(--dur1) var(--dur1) steps(1,start) infinite;
}


/* Animations */
@keyframes largePopOut {
	from, 20% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1), 
			0 0 0 var(--shade4);
	}
	40% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			2em 2em 2em var(--shade1), 
			-2em -2em 4em var(--shade4);
	}
	60%, to {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			1em 1em 2em var(--shade1), 
			-1em -1em 2em var(--shade4);
	}
}
@keyframes smallPopOut1 {
	from, 40% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1), 
			0 0 0 var(--shade4);
	}
	60% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.5em 0.5em 0.5em var(--shade1),
			-0.5em -0.5em 1em var(--shade4);
	}
	80%, to {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.25em 0.25em 0.5em var(--shade1),
			-0.25em -0.25em 0.5em var(--shade4);
	}
}

@keyframes smallPopOut2 {
	from, 45% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1), 
			0 0 0 var(--shade4);
	}
	65% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.5em 0.5em 0.5em var(--shade1),
			-0.5em -0.5em 1em var(--shade4);
	}
	85%, to {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.25em 0.25em 0.5em var(--shade1),
			-0.25em -0.25em 0.5em var(--shade4);
	}
}

@keyframes smallPopOut3 {
	from, 50% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1), 
			0 0 0 var(--shade4);
	}
	70% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.5em 0.5em 0.5em var(--shade1),
			-0.5em -0.5em 1em var(--shade4);
	}
	90%, to {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.25em 0.25em 0.5em var(--shade1),
			-0.25em -0.25em 0.5em var(--shade4);
	}
}

@keyframes smallPopOut4 {
	from, 55% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1), 
			0 0 0 var(--shade4);
	}
	75% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.5em 0.5em 0.5em var(--shade1),
			-0.5em -0.5em 1em var(--shade4);
	}
	95%, to {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.25em 0.25em 0.5em var(--shade1),
			-0.25em -0.25em 0.5em var(--shade4);
	}
}
@keyframes popInOut {
	from {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.25em 0.25em 0.5em var(--shade1),
			-0.25em -0.25em 0.5em var(--shade4);
		transform: translate(0,0);
	}
	4% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.5em 0.5em 0.5em var(--shade1),
			-0.5em -0.5em 1em var(--shade4);
		transform: translate(0,0);
	}
	8% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1),
			0 0 0 var(--shade4);
		transform: translate(0,0);
	}
	12%, 16% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1),
			0 0 0 var(--shade4);
		transform: translate(4em,0);
	}
	20% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.5em 0.5em 0.5em var(--shade1),
			-0.5em -0.5em 1em var(--shade4);
		transform: translate(4em,0);
	}
	24%, 25% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.25em 0.25em 0.5em var(--shade1),
			-0.25em -0.25em 0.5em var(--shade4);
		transform: translate(4em,0);
	}
	29% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.5em 0.5em 0.5em var(--shade1),
			-0.5em -0.5em 1em var(--shade4);
		transform: translate(4em,0);
	}
	33% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1),
			0 0 0 var(--shade4);
		transform: translate(4em,0);
	}
	37%, 41% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1),
			0 0 0 var(--shade4);
		transform: translate(4em,4em);
	}
	45% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.5em 0.5em 0.5em var(--shade1),
			-0.5em -0.5em 1em var(--shade4);
		transform: translate(4em,4em);
	}
	49%, 50% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.25em 0.25em 0.5em var(--shade1),
			-0.25em -0.25em 0.5em var(--shade4);
		transform: translate(4em,4em);
	}
	54% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.5em 0.5em 0.5em var(--shade1),
			-0.5em -0.5em 1em var(--shade4);
		transform: translate(4em,4em);
	}
	58% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1),
			0 0 0 var(--shade4);
		transform: translate(4em,4em);
	}
	62%, 66% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1),
			0 0 0 var(--shade4);
		transform: translate(0,4em);
	}
	70% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.5em 0.5em 0.5em var(--shade1),
			-0.5em -0.5em 1em var(--shade4);
		transform: translate(0,4em);
	}
	74%, 75% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.25em 0.25em 0.5em var(--shade1),
			-0.25em -0.25em 0.5em var(--shade4);
		transform: translate(0,4em);
	}
	79% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.5em 0.5em 0.5em var(--shade1),
			-0.5em -0.5em 1em var(--shade4);
		transform: translate(0,4em);
	}
	83% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1),
			0 0 0 var(--shade4);
		transform: translate(0,4em);
	}
	87%, 91% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1),
			0 0 0 var(--shade4);
		transform: translate(0,0);
	}
	95% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.5em 0.5em 0.5em var(--shade1),
			-0.5em -0.5em 1em var(--shade4);
		transform: translate(0,0);
	}
	99%, to {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.25em 0.25em 0.5em var(--shade1),
			-0.25em -0.25em 0.5em var(--shade4);
		transform: translate(0,0);
	}
}
@keyframes move2 {
	from, 8% {
		transform: translate(0,0);
		width: 3em;
		height: 3em;
	}
	12% {
		transform: translate(-4em,0);
		width: 7em;
		height: 3em;
	}
	16%, 83% {
		transform: translate(-4em,0);
		width: 3em;
		height: 3em;
	}
	87% {
		transform: translate(-4em,0);
		width: 3em;
		height: 7em;
	}
	91%, to {
		transform: translate(-4em,4em);
		width: 3em;
		height: 3em;
	}
}
@keyframes move3 {
	from, 33% {
		transform: translate(0,0);
		height: 3em;
	}
	37% {
		transform: translate(0,-4em);
		height: 7em;
	}
	41%, to {
		transform: translate(0,-4em);
		height: 3em;
	}
}
@keyframes move4 {
	from, 58% {
		transform: translate(0,0);
		width: 3em;
	}
	62% {
		transform: translate(0,0);
		width: 7em;
	}
	66%, to {
		transform: translate(4em,0);
		width: 3em;
	}
}
@keyframes fadeIn {
	from, 67% {
		opacity: 0;
	}
	83.3%, to {
		opacity: 1;
	}
}
@keyframes appear1 {
	from {
		visibility: hidden;
	}
	33%, to {
		visibility: visible;
	}
}
@keyframes appear2 {
	from, 33% {
		visibility: hidden;
	}
	67%, to {
		visibility: visible;
	}
}
@keyframes appear3 {
	from, 67% {
		visibility: hidden;
	}
	to {
		visibility: visible;
	}
}

}
.card.user-card {
    border-top: none;
    -webkit-box-shadow: 0 0 1px 2px rgba(0,0,0,0.05), 0 -2px 1px -2px rgba(0,0,0,0.04), 0 0 0 -1px rgba(0,0,0,0.05);
    box-shadow: 0 0 1px 2px rgba(0,0,0,0.05), 0 -2px 1px -2px rgba(0,0,0,0.04), 0 0 0 -1px rgba(0,0,0,0.05);
    -webkit-transition: all 150ms linear;
    transition: all 150ms linear;
}

.card {
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
    box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
    border: none;
    margin-bottom: 30px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.card .card-header {
    background-color: transparent;
    border-bottom: none;
    padding: 25px;
}

.card .card-header h5 {
    margin-bottom: 0;
    color: #222;
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
    margin-right: 10px;
    line-height: 1.4;
}

.card .card-header+.card-block, .card .card-header+.card-block-big {
    padding-top: 0;
}

.user-card .card-block {
    text-align: center;
}

.card .card-block {
    padding: 25px;
}

.user-card .card-block .user-image {
    position: relative;
    margin: 0 auto;
    display: inline-block;
    padding: 5px;
    width: 60px;
    height: 60px;
}

.user-card .card-block .user-image img {
    z-index: 20;
    position: absolute;
    top: 5px;
    left: 5px;
        width: 50px;
    height: 50px;
}

.img-radius {
    border-radius: 50%;
}

.f-w-600 {
    font-weight: 600;
}

.m-b-5 {
    margin-bottom: 10px;
}

.m-t-5 {
    margin-top: 5px;
}

.m-t-15 {
    margin-top: 15px;
}

.card .card-block p {
    line-height: 1.4;
}

.text-muted {
    color: #919aa3!important;
}

.user-card .card-block .activity-leval li.active {
    background-color: #2ed8b6;
}

.user-card .card-block .activity-leval li {
    display: inline-block;
    width: 15%;
    height: 4px;
    margin: 0 3px;
    background-color: #ccc;
}

.user-card .card-block .counter-block {
    color: #fff;
}

.bg-c-blue {
    background: linear-gradient(45deg,#4099ff,#73b4ff);
}

.bg-c-green {
    background: linear-gradient(45deg,#2ed8b6,#59e0c5);
}

.bg-c-yellow {
    background: linear-gradient(45deg,#FFB64D,#ffcb80);
}

.bg-c-pink {
    background: linear-gradient(45deg,#FF5370,#ff869a);
}

.m-t-10 {
    margin-top: 10px;
}

.p-20 {
    padding: 20px;
}

.user-card .card-block .user-social-link i {
    font-size: 30px;
}

.text-facebook {
    color: #3B5997;
}

.text-twitter {
    color: #42C0FB;
}

.text-dribbble {
    color: #EC4A89;
}

.user-card .card-block .user-image:before {
    bottom: 0;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.user-card .card-block .user-image:after, .user-card .card-block .user-image:before {
    content: "";
    width: 100%;
    height: 48%;
    border: 2px solid #4099ff;
    position: absolute;
    left: 0;
    z-index: 10;
}

.user-card .card-block .user-image:after {
    top: 0;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}

.user-card .card-block .user-image:after, .user-card .card-block .user-image:before {
    content: "";
    width: 100%;
    height: 48%;
    border: 2px solid #4099ff;
    position: absolute;
    left: 0;
    z-index: 10;
}
.progress {
  height: 1.5em;
  width: 100%;
  background-color: #c9c9c9;
  position: relative;
}
.progress:before {
  content: attr(data-label);
  font-size: 0.8em;
  position: absolute;
  text-align: center;
  top: 5px;
  left: 0;
  right: 0;
}
.progress .value {
  background-color: #7cc4ff;
  display: inline-block;
  height: 100%;
}

.stop-scrolling {
height: 100%;
overflow: hidden;
}
.frame-container {
  position: relative;
}
.frame-container .f-button {
  position: absolute;
  right: 40%;
  top: 0%;
}
.frame-container .ff-button {
  position: absolute;
  cursor: pointer;
  left: 60%;
  top: 0%;
}
#overlay {
  position: fixed;
overflow-y: scroll;
max-height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.8);
  z-index: 1;
}