/*
font-family: 'Merriweather Sans', sans-serif;
font-family: 'Abel', sans-serif;
font-family: 'Dancing Script', cursive;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-family: 'Archivo Narrow', sans-serif;
font-family: 'EB Garamond', serif;
font-family: 'Catamaran', sans-serif;
font-family: 'Alegreya', serif;
font-family: 'Amiri', serif;
font-family: 'Cormorant Garamond', serif;
font-family: 'Arapey', serif;
font-family: 'Tangerine', cursive;
font-family: 'Sacramento', cursive;
*/

/* GOBAL VARIABLES */
:root {
	--app-margin: 10px;
	--main-bg-color: #e7e8ee;
	--main-color: #5c69c3;
	--header-height: 60px;
}
.is-primary {
	background-color: #5c69c3!important;
}
.is-primary-lighter {
	background-color: #e7e8ee!important;
}
/* Transitions */
.tweakOpacity-enter-active, .tweakOpacity-leave-active {
  transition: opacity .30s ease-out;
}
.tweakOpacity-enter, .tweakOpacity-leave-active {
  opacity: 0;
}
p {
	font-size: 13px;
}
/* scrollbar */
/* width */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #5a7ea2; 
  border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #5c69c3; 
  border-radius: 10px;
}
/* End of scrollbar */
html {
	padding: 0px;
}
body {
	font-family: 'Archivo Narrow', sans-serif;
	color: #7c7c8d;
    font-size: 11px;
	margin: 0px;
	padding: 70px 0px 0px 0px;
	background: #f3f5fa;
	max-width: 2200px;
	height: -webkit-fill-available;
	height: -moz-fill-available;
	height: fill-available;
}
.currency {
	font-family: 'Merriweather Sans', sans-serif;
	color: #555;
}
.grey {
	color: #7c7c8d;
}
.orange-on-hover:hover {
	color: #ffad10!important;
}
.orange {
	color: #ffad10!important;
}
.default-color {
	color: #5c6ac3;
}
.header-background-color {
	background: #5c6ac3!important;
}
.default-background-hover:hover {
	background: #2c3c9c!important;
}
.10-m {
	margin: 10px!important;
}
.10-p {
	padding: 10px!important;
}
.unselectable {
	user-select: none;
	-webkit-user-select: none;
}
.is-48x48 {
	width: 48px;
	height: 48px;
}
.full-size {
	height:100%;
	width:100%;
}
.full-width {
	width:100%;
}
.block {
	display: block;
}
.hoverable:hover {
	transition: ease-in-out 0.1s;
	/*background: #a8aeba;*/
}
.pointer {
	cursor: pointer;
}
.right {
	float: right;
}
.left {
	float: left;
}
.center {
  display: block!important;
  margin-left: auto!important;
  margin-right: auto!important;
}
.relative {
	position: relative;
}
.feather-icon {
	font-size: 30px!important;
	padding: 0px!important;
	margin: 0px!important;
	margin-top: -3px!important;
	transition: ease-in-out .2s!important;
}
.feather-icon:hover {
	transition: ease-in-out .2s!important;
	color: #96a1ea!important;
}
.feather-icon:active {
	transition: ease-in-out .2s!important;
	color: #111d73!important;
}
.feather-icon-active {
	color: #5c69c3!important;
}
.link {
	color: #525b65;
	font-size: 14px;
}
.link:hover {
	color: #5c6ac3!important;
}
.flex {
	display: flex;
}
.bold {
	font-weight: bold;
}
.transition {
	transition: ease-in-out .2s;
}
.transition:hover {
	transition: ease-in-out .2s;
}
button:focus { outline: none!important; }
.underline {
	position: relative!important;
}
.underline:before {
	content: '';
	background: #5c69c3;
	height: 3px;
	width: 100%;
	position: absolute;
	bottom: 10px;
	left: 0;
	visibility: hidden;
	transform: scaleX(0);
	transition: .2s linear;
}
.underline:hover:before {
	visibility: visible;
	transform: scaleX(1);
}
.has-p-b-10 {
	padding-bottom: 10px!important;
}
.has-p-top-10 {
	padding-top: 10px!important;
}

/* CHECKBOX */
/* The container */
.check-box-container {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 16px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
  }
  
  /* Hide the browser's default checkbox */
  .check-box-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
  }
  
  /* Create a custom checkbox */
  .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	background-color: #b4bae7;
  }
  
  /* On mouse-over, add a grey background color */
  .check-box-container:hover input ~ .checkmark {
		background-color: #ccc;
		transition: ease-in-out .1s;
  }
  
  /* When the checkbox is checked, add a blue background */
  .check-box-container input:checked ~ .checkmark {
		background-color: #5c69c3;
		transition: ease-in-out .1s;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
		content: "";
		position: absolute;
		display: none;
  }
  
  /* Show the checkmark when checked */
  .check-box-container input:checked ~ .checkmark:after {
	display: block;
  }
  
  /* Style the checkmark/indicator */
  .check-box-container .checkmark:after {
		transition: ease-in-out .5s;
		left: 6px;
		top: 0px;
		width: 8px;
		height: 15px;
		border: solid white;
		border-width: 0 3px 3px 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
  }
/* CHECKBOX */
/*RADIO BUTTON*/
/* Customize the label (the container) */
.radio-container {
	transition: ease-in-out .1s;
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 16px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
  }
  
  /* Hide the browser's default radio button */
  .radio-container input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
  }
  
  /* Create a custom radio button */
  .radiomark {
		position: absolute;
		top: 0;
		left: 0;
		height: 20px;
		width: 20px;
		background-color: #b4bae7;
		border-radius: 50%;
		border:2px solid #b4bae7;
  }
  
  /* On mouse-over, add a grey background color */
  .radio-container:hover input ~ .radiomark {
		background-color: #ccc;
		border:2px solid #ccc;
  }
  
  /* When the radio button is checked, add a blue background */
  .radio-container input:checked ~ .radiomark {
		background-color: #fff;
		transition: ease-in-out .1s;
		border:2px solid #5c69c3;
	}
  
  /* Create the indicator (the dot/circle - hidden when not checked) */
  .radiomark:after {
		content: "";
		position: absolute;
		display: none;
		top: 4px;
		left: 4px;
		width: 8px;
		height: 8px;
  }
  
  /* Show the indicator (dot/circle) when checked */
  .radio-container input:checked ~ .radiomark:after {
		display: block;
  }
  
  /* Style the indicator (dot/circle) */
  .radio-container .radiomark:after {
		border-radius: 50%;
		background: #5c69c3;
  }
/*RADIO BUTTON*/

/* TRANSITIONS */
.fade-enter-active, .fade-leave-active {
	transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
	opacity: 0;
  }
  button:disabled {
    color: #414b55!important;
    background: #fff!important;
    border: 1px #414b55 solid!important;
  }
  button:disabled:hover {
	cursor: auto!important;
    color: #414b55!important;
    background: #fff!important;
    border: 1px #414b55 solid!important;
  }

/* SPIN */
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg) } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg) } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } }