/********************** || GENERAL STYLES || **********************/

body, html {
	height: 100% !important;
	width: 100% !important;
	margin: 0px auto !important;
	padding: 0px auto !important;
	overflow: auto !important;
	font-family: 'Roboto' !important;
	line-height: normal !important;
}

::selection {
	background: rgb(58, 126, 152);
	color: rgb(255,255,255);
}

input, textarea {
	border: 1px solid #bdbdbd;
	height: 18px;
	transition: border-color 0.5s, box-shadow 0.5s;
}

textarea {
	font-family: 'Roboto', Helvetica, Arial;
}

input:focus, textarea:focus {
	outline: none;
	border-color: #5eb5b9 !important;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
	font-family: 'Roboto', Helvetica, Arial;
	font-size: 12px;
	color: #859798;
	padding-left: 5px;
}

input:-moz-placeholder, textarea:-moz-placeholder {
	font-family: 'Roboto', Helvetica, Arial;
	font-size: 12px;
	color: #859798;
	padding-left: 5px;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
	font-family: 'Roboto', Helvetica, Arial;
	font-size: 12px;
	color: #859798;
	padding-left: 5px;
}

input::-moz-placeholder, textarea::-moz-placeholder {
	font-family: 'Roboto', Helvetica, Arial;
	font-size: 12px;
	color: #859798;
	padding-left: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #159fa5;
}

::-webkit-scrollbar-thumb {
    cursor: pointer;
    background-color: #cecece;
}

::-webkit-scrollbar {
    background-color: whitesmoke;
    width: 5px;
}

.not-logged-in {
	position: absolute;
	top: 0%;
	right: 0%;
	width: calc(100% - 241px);
	height: 100%;
	background-color: rgb(245, 245, 245);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	font-size: 20px;
	font-weight: 200;
	z-index: 10;
}

/********************** || PAGES || **********************/

#exchange-div {
	/* display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-flow: column nowrap;
	    flex-flow: column nowrap; */
	height: 100%;
	width: 100%;
	min-width: 1080px;
	min-height: 600px;
	overflow: hidden;
}

#mobile-menu, #mobile-page  {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0%;
	top: 0%;
	z-index: 2;
}

#mobile-menu {
	pointer-events: none;
	position: fixed;
}

#mobile-page {
	z-index: 1;
}

/********************** || LOAD SCREEN || **********************/

#preloader-wrapper {
	position: fixed;
	top: 0%;
	left: 0%;
	height: 100%;
	width: 100%;
	background-color: rgb(245,245,245);
	z-index: 200;
	transition: opacity 0.5s;
}

#preloader-img-wrapper {
	height: 100%;
	width: 100%;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-ms-flex-flow: row nowrap;
	    flex-flow: row nowrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	flex-flow: column nowrap;
	flex-direction: column;
}

.preloader-img-inner-wrapper {
	width: 250px;
	height: 115px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	-ms-flex-flow: column nowrap;
	    flex-flow: column nowrap;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.wave-load {
	width: 150px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.wave-load > div {
	background-color: rgb(27, 185, 191);
	width: 6%;
	border-radius: 5px;
	animation-name: wave-load-1;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

.wave-load > div + div {
	animation-name: wave-load-2;
}

.wave-load > div + div + div {
	animation-name: wave-load-3;
}

.wave-load > div + div + div + div {
	animation-name: wave-load-4;
}

.wave-load > div + div + div + div + div {
	animation-name: wave-load-5;
}

@keyframes wave-load-1 {
	0% {
		height: 0%;
	}
	
	10% {
		height: 0%;
	}
	
	50% {
		height: 60%;
	}
	
	100% {
		height: 0%;
	}
}

@keyframes wave-load-2 {
	0% {
		height: 0%;
	}
	
	20% {
		height: 0%;
	}
	
	60% {
		height: 80%;
	}
	
	100% {
		height: 0%;
	}
}

@keyframes wave-load-3 {
	0% {
		height: 0%;
	}
	
	30% {
		height: 0%;
	}
	
	70% {
		height: 100%;
	}
	
	100% {
		height: 0%;
	}
}

@keyframes wave-load-4 {
	0% {
		height: 0%;
	}
	
	40% {
		height: 0%;
	}
	
	80% {
		height: 80%;
	}
	
	100% {
		height: 0%;
	}
	
}

@keyframes wave-load-5 {
	0% {
		height: 0%;
	}
	
	50% {
		height: 0%;
	}
	
	90% {
		height: 60%;
	}
	
	100% {
		height: 0%;
	}
}

/********************** || RING LOAD ANIMATION || **********************/

.ring-load {
	display: flex;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	-ms-flex-flow: row nowrap;
	    flex-flow: row nowrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	            -ms-grid-row-align: center;
	        align-items: center;
	background-color: rgb(255, 255, 255);
	opacity: 0.7;
	z-index: 99;
	transition: opacity 0.7s;
}

.ring-load > .uil-ring-css {
	transform: scale(0.17);
}

@-webkit-keyframes uil-ring-anim {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes uil-ring-anim {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.uil-ring-css {
	background: none;
	position: relative;
	width: 400px;
	height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.uil-ring-css > div {
	display: block;
	width: 200px;
	height: 200px;
	border-radius: 200px;
	border: 15px solid rgb(236, 236, 236);
	border-right-color: rgb(69, 205, 210);
	-webkit-animation: uil-ring-anim 1s linear infinite;
	animation: uil-ring-anim 1s linear infinite;
}


/********************** || DESKTOP LOGO || **********************/

#preloader-logo {
	-webkit-transform: scale(0.543);
	transform: scale(0.543);
	height: 80px;
}

#preloader-logo .cfinex-logo-text {
	color: rgb(4, 131, 180);
	animation-duration: 3s;
	animation-name: mood-swing-color;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

#preloader-logo .cfinex-logo-bar {
	background-color: rgb(4, 131, 180);
}

.cfinex-logo {
	position: relative;
	/* width: 300px; */
	height: 100px;
	cursor: default;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

.cfinex-logo-bar {
	position: absolute;
	width: 14px;
	display: inline-block;
	bottom: 18px;
	border-radius: 4px;
}

.cfinex-logo-shorter-bar {
	height: 33px;
	left: 6px;
}

.cfinex-logo-longer-bar {
	left: 24px;
	height: 47px;
}

.cfinex-logo-text {
	font-family: 'Roboto';
	font-size: 90px;
	position: absolute;
	bottom: -5px;
	left: 40px;
}

#preloader-img-wrapper .load-bar {
	height: 3px;
	width: 160px;
	margin-left: -7px;
	margin-bottom: 10px;
	margin-top: -18px;
}

#start-screen-load-bar {
	height: 100%;
	width: 0%;
	background-color: #0e8c5a;
	transition: width 0.6s;
}

#preloader-logo .cfinex-logo-bar, #start-screen-load-bar {
	animation-duration: 3s;
	animation-name: mood-swing-background;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}