:root {
	--system-color: #3772EE;
	--nav-link-hover-color: #618deb;
	--system-green-color: #14B288;
	--system-red-color: #E13B49;
	
	--system-home-icon-color: #ecb605;
	--system-news-blogs-icon-color: #114d87;
	--system-mobile-market-color: #bd9e65;
	--system-chart-icon-color: #15955a;
	--system-broker-icon-color: #ff7700;
}

/*adjusted for padding and style for safari  */
select{
	-webkit-appearance: none;
	-moz-appearance:none;
	appearance:none;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path fill='currentColor' d='M360.5 217.5l-152 143.1C203.9 365.8 197.9 368 192 368s-11.88-2.188-16.5-6.562L23.5 217.5C13.87 208.3 13.47 193.1 22.56 183.5C31.69 173.8 46.94 173.5 56.5 182.6L192 310.9l135.5-128.4c9.562-9.094 24.75-8.75 33.94 .9375C370.5 193.1 370.1 208.3 360.5 217.5z'></path></svg>") no-repeat;
	background-size:12px;
	background-position: calc(100% - 5px) center;
	padding-left:5px;
	padding-right:25px !important;
}

select.select-arrow-left{
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path fill='currentColor' d='M360.5 217.5l-152 143.1C203.9 365.8 197.9 368 192 368s-11.88-2.188-16.5-6.562L23.5 217.5C13.87 208.3 13.47 193.1 22.56 183.5C31.69 173.8 46.94 173.5 56.5 182.6L192 310.9l135.5-128.4c9.562-9.094 24.75-8.75 33.94 .9375C370.5 193.1 370.1 208.3 360.5 217.5z'></path></svg>") no-repeat;
	background-size:12px;
	background-position: calc(0% + 5px) center;
	padding-left:20px !important;
	padding-right:10px !important;
}

/* manrope-300 - latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  src: url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-300.woff') format('woff'), /* Modern Browsers */
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-300.svg#Manrope') format('svg'); /* Legacy iOS */
}
/* manrope-regular - latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-regular.svg#Manrope') format('svg'); /* Legacy iOS */
}
/* manrope-500 - latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  src: url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-500.woff') format('woff'), /* Modern Browsers */
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-500.svg#Manrope') format('svg'); /* Legacy iOS */
}
/* manrope-600 - latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-600.woff') format('woff'), /* Modern Browsers */
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-600.svg#Manrope') format('svg'); /* Legacy iOS */
}
/* manrope-700 - latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-700.svg#Manrope') format('svg'); /* Legacy iOS */
}

/* manrope-800 - latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  src: url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-800.woff') format('woff'), /* Modern Browsers */
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/assets/fonts/manrope-v13-latin/manrope-v13-latin-800.svg#Manrope') format('svg'); /* Legacy iOS */
}

/* general layout and color */
.theme-color {color: var(--system-color);}
.bg-theme-color {background-color: var(--system-color);}
.col-white-theme {color: #FFF; background-color: var(--system-color);}
.theme-green-color{color: var(--system-green-color);}
.bg-theme-green-color {background-color: var(--system-green-color);}
.theme-red-color{color: var(--system-red-color);}
.bg-theme-red-color {background-color: var(--system-red-color);}

/* box and border */
.theme-borderbot {border-bottom:2px solid var(--system-color);}

/* breadcrumb */
.breadcrumb_link:hover {
	text-decoration: none;
	color: var(--system-color);
}
.breadcrumb_link.active {
	color: var(--system-color);
}

/* currency-flag*/
.currency-flag {
  width: 35px;
  height: 35px;
}
.currency-flag-sm {
  width: 25px;
  height: 25px;
}
.currency-flag-lg{
	width:45px;
	height:45px;
}
.currency-flag.circle {
  border: .5px solid #DDDDDD; 
  border-radius: 50%; 
  z-index: 0;
  background-position: 50%;
}
.currency-flag.circle2 {
  border: .5px solid #DDDDDD; 
  border-radius: 50%; 
  position: relative;
  left: -5px;
  z-index: 1;
  background-position: 50%;
}
.currency-flag.circle2-sm {
  border: 1px solid #FFFFFF; 
  border-radius: 50%; 
  position: relative;
  left: -19px;
  top: 7px;
  z-index: 1;
  background-position: 50%;
}
.currency-flag.circle2-lg{
  border: 1px solid #FFFFFF; 
  border-radius: 50%; 
  position: relative;
  left: -28px;
  top: 10px;
  z-index: 1;
  background-position: 50%;
}

.currency-flag.currency-flag-cny, .currency-flag.currency-flag-sgd{
  background-position: 0%;
}

.main-div{
	background-color: #ebebeb;
	padding-left:0.5rem;
	padding-right:0.5rem;
}

.white-card-div{
	border-radius:10px;
	background-color:#fff;
	padding:1rem;
	margin-bottom:1.5rem;
	border:1px solid #ebebeb;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.trade-icon-sm{
	width: 25px;
	height: 25px;
	border-radius: 50%;
}

.trade-icon-lg {
	width: 45px;
	height: 45px;
	border-radius: 50%;
}

.btn-theme{
	background-color: var(--system-color);
	color:#fff;
	border: 2px solid var(--system-color);
}

.btn-theme:hover{
	color:#fff;
}

.btn-theme-outline{
	color: var(--system-color);
	border: 2px solid var(--system-color);
}

.btn-theme-outline:hover{
	color:#fff;
	background-color: var(--system-color);
}

.btn-theme-green-outline{
	color: var(--system-green-color);
	border: 2px solid var(--system-green-color);
}

.btn-theme-green-outline:hover{
	color:#fff;
	background-color: var(--system-green-color);
}

.transition,
.transition * {
	-webkit-transition: background-color 0.4s ease-out;
	-moz-transition: background-color 0.4s ease-out;
	-o-transition: background-color 0.4s ease-out;
	transition: background-color 0.4s ease-out;
}

@keyframes positive-buysell-btn-bg {
	0%,100% {
		background: #EBEBEB;
	}
	50%	{
		background: var(--system-green-color);
		color:#fff;
	}
}

@keyframes negative-buysell-btn-bg{
	0%, 100% {
		background: #EBEBEB;
	}
	50%	{
		background: var(--system-red-color);
		color:#fff;
	}
}

@keyframes sell-btn-positive-bg{
	0%, 100%{
		background: #EBEBEB;
	}
	50% {
		background: var(--system-green-color);
		color:#fff;
	}
}

@keyframes buy-btn-negative-bg{
	0%, 100%{
		background: #EBEBEB;
	}
	50% {
		background: var(--system-red-color);
		color:#fff;
	}
}

@keyframes positive-buysell-btn-d-grey-bg{
	0%,100% {
		background: #c0c0c0;
	}
	50%	{
		background: var(--system-green-color);
		color:#fff;
	}
}

@keyframes negative-buysell-btn-d-grey-bg{
	0%, 100% {
		background: #c0c0c0;
	}
	50%	{
		background: var(--system-red-color);
		color:#fff;
	}
}

@keyframes sell-btn-positive-d-grey-bg{
	0%, 100%{
		background: #c0c0c0;
	}
	50% {
		background: var(--system-green-color);
		color:#fff;
	}
}

@keyframes buy-btn-negative-d-grey-bg{
	0%, 100%{
		background: #c0c0c0;
	}
	50% {
		background: var(--system-red-color);
		color:#fff;
	}
}

.positive-price-change{
	-webkit-animation:1s ease-in-out positive-buysell-btn-bg;
	-moz-animation: 1s ease-in-out positive-buysell-btn-bg;
	-o-animation: 1s ease-in-out positive-buysell-btn-bg;
	animation: 1s ease-in-out positive-buysell-btn-bg;
}

.bid-ask-sell.positive-price-change .bid-ask-ind{
	-webkit-animation:1s ease-in-out sell-btn-positive-bg;
	-moz-animation:1s ease-in-out sell-btn-positive-bg;
	-o-animation:1s ease-in-out sell-btn-positive-bg;
	animation: 1s ease-in-out sell-btn-positive-bg;
}

.negative-price-change{
	-webkit-animation:1s ease-in-out negative-buysell-btn-bg;
	-moz-animation:1s ease-in-out negative-buysell-btn-bg;
	-o-animation: 1s ease-in-out negative-buysell-btn-bg;
	animation: 1s ease-in-out negative-buysell-btn-bg;
}

.bid-ask-buy.negative-price-change .bid-ask-ind{
	-webkit-animation:1s ease-in-out buy-btn-negative-bg;
	-moz-animation:1s ease-in-out buy-btn-negative-bg;
	-o-animation:1s ease-in-out buy-btn-negative-bg;
	animation: 1s ease-in-out buy-btn-negative-bg;
}

.bid-darkgrey-bg.positive-price-change{
	-webkit-animation:1s ease-in-out positive-buysell-btn-d-grey-bg;
	-moz-animation:1s ease-in-out positive-buysell-btn-d-grey-bg;
	-o-animation:1s ease-in-out positive-buysell-btn-d-grey-bg;
	animation: 1s ease-in-out positive-buysell-btn-d-grey-bg;
}

.bid-ask-sell.bid-darkgrey-bg.positive-price-change .bid-ask-ind{
	-webkit-animation:1s ease-in-out sell-btn-positive-d-grey-bg;
	-moz-animation:1s ease-in-out sell-btn-positive-d-grey-bg;
	-o-animation:1s ease-in-out sell-btn-positive-d-grey-bg;
	animation: 1s ease-in-out sell-btn-positive-d-grey-bg;
}

.bid-darkgrey-bg.negative-price-change{
	-webkit-animation:1s ease-in-out negative-buysell-btn-d-grey-bg;
	-moz-animation:1s ease-in-out negative-buysell-btn-d-grey-bg;
	-o-animation:1s ease-in-out negative-buysell-btn-d-grey-bg;
	animation: 1s ease-in-out negative-buysell-btn-d-grey-bg;
}

.bid-ask-buy.bid-darkgrey-bg.negative-price-change .bid-ask-ind{
	-webkit-animation:1s ease-in-out buy-btn-negative-d-grey-bg;
	-moz-animation:1s ease-in-out buy-btn-negative-d-grey-bg;
	-o-animation:1s ease-in-out buy-btn-negative-d-grey-bg;
	animation: 1s ease-in-out buy-btn-negative-d-grey-bg;
}