/* Required */
.req {
	color: var( --red-dark );
	text-align: right;
	font-size: 10px;
}
.reqField::after {
	content: " *";
	color: var( --red-dark );
}

/* Form Fields */
.formElement {
	padding-right: 0;
	width: 100%;
	margin-bottom: var( --grid-gutter-width );
	position: relative;
}

.formElement label {
	display: inline-block;
	font-size: .875rem;
	line-height: 1.25rem;
	color: var( --grey );
	font-weight: 400;
	text-transform: none;
	margin-bottom: 5px;
}


/* Invalid Message */
.formElement label.error {
	font-size: 10px;
	line-height: 14px;
	color: var( --red-dark );
	display: block;
	padding: 0;
	margin: 5px 0 0;
	list-style: none;
}

.lineBreaker {
	margin: 0;
	padding: 0;
	height: 0;
	border: none;
}

/* Input Fields */
.formElement input,
.formElement select,
.formElement .SfcField,
.formElement .card_field {
	display: block;
}

.formElement input,
.formElement select,
.formElement .SfcField,
.formElement .card_field,
.formElement .input {
	width: 100%;
	padding: 0.5625rem 0.75rem;
	font-size: .9375rem;
	font-weight: 400;
	line-height: 1.5;
	color: var( --dark );
	background-color: var( --white );
	background-clip: padding-box;
	border: 2px solid var( --grey-lighter );
	border-radius: 3px;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.formElement .card_field {
	height: 45px;
}

.formElement select {
	padding-top: 0.67rem;
	padding-bottom: 0.67rem;
}


.formElement input:focus,
.formElement select:focus,
.formElement .SfcField:focus,
.formElement .card_field:focus,
.formElement .card_field .number:focus,
.formElement .input.focus {
	background-color: var( --white );
	border-color: #8fb0d6;
	outline: 0;
	box-shadow: none;
}

/* Radio Buttons */
.formElement.presetAmountDiv ul {
	padding: 0;
	margin: 0 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}

.formElement.presetAmountDiv ul li {
	flex:0 0 25%;
}

/* Other Amount logic */
.formElement #amount.textInvisible {
	color: transparent;
}



.formElement input[type="radio"] {
	opacity: 0;
	position: fixed;
	width: 0;
}

.formElement input[type="radio"] ~ label:not(.error) {
	display: inline-block;
	background-color: var( --blue-lighter );
	color: var( --blue );
	border: 2px solid var( --blue-lighter );
	padding: 9px 9px;
	font-size: 15px;
	border-radius: 3px;
	cursor: pointer;
	font-weight: 700;
	width: 92%;
	text-align: center;
	transition: all 0.1s ease-in-out;
	margin-bottom: 3px;
}

.formElement input[type="radio"]:checked ~ label {
	border-color: var( --blue );
}

/* -- Invalid Field */
.formElement input.error, .formElement select.error {
	border-color: var( --red );
}

.formElement input[type="radio"] ~ label.error:not(#currency_select-error) {
	border-color: #ffeded;
	background: #ffeded;
	color: #fc4b69;
}



.formElement p {
	margin: 0;
}


/* Disabled */
input[type="submit"]:disabled {
	cursor: progress;
	opacity: 0.4;
}


/* Crypto Dropdown */
.crypto-inputs .input.not-checked span {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.crypto-inputs input ~ .checked {
	display: none;
}

.crypto-inputs input:checked ~ .checked {
	display: flex;
	align-items: center;
}

.crypto-inputs input:checked ~ * img {
	margin-right: 10px;
}

.crypto-dropdown {
	display: none
}

.crypto-dropdown {
	background: var( --white );
	box-shadow: 1px 1px 19px -2px rgb(0 0 0 / 21%);
	border-radius: 3px;
	padding: 5px 0px 5px;
	cursor: pointer;
	margin-top: 5px;
	height: 330px;
	overflow-y: scroll;
	position: absolute;
	z-index: 1;
	width: 100%;
}

.crypto-dropdown label {
	color: var( --dark );
	cursor: pointer;
	display: flex;
	align-items: center;
	line-height: 23px;
	padding: 12px 10px 11px;
	margin: 0 5px;
	border-radius: 3px;
	transition: all 0.15s linear;
}

.crypto-dropdown label:hover {
	background: var( --blue-lighter );
}

.crypto-dropdown li {
	padding-bottom: 0;
}

.crypto-dropdown li:not(:last-child) label {
	border-bottom: 1px solid var( --grey-lighter );
}

.crypto-dropdown img {
	margin-right: 10px;
}


.skrill-logo {
	display: block;
	max-width: 100px;
	margin: 0 auto;
}

/* Tooltip icon */
.formElement .info-icon {
	cursor: pointer;
}

/* Tooltip info */
.tooltip-info {
	display: inline;
	position: relative;
	top: 2px;
	left: 5px;
}

.tooltip-info .tooltip-text {
	display: none;
}

.tooltip-wrapper {
	opacity: 0;
	position: absolute;
	max-width: 320px;
	width: calc( 100vw - (var( --grid-gutter-width ) * 2) );
	height: auto;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 2px 16px -6px rgba(0, 0, 0, .45);
	left: -9999px;
	z-index: 9999;
	transition: opacity 0.1s ease-in-out, left 0s linear 0.15s;
}
.shown {
	opacity: 1;
	transition: opacity 0.2s ease-in-out;
}

.tooltip-content {
	padding: 15px;
}



/*<editor-fold desc="Expandable Pair">*/
.expandable-pair {
	background: var( --blue-lighter );
	color: var( --blue );
	border-radius: 4px;
	position: relative;
}

.expandable-pair .collapse svg {
	position: absolute;
	pointer-events: none;
	transition: all 0.3s ease-in-out;
	top: 50%;
	transform: translateY(-50%);
}

.expandable-pair .dollar-star-icon {
	left: 20px;
}

.expandable-pair .caret-down-icon {
	right: 20px;
}

.expandable-pair h4 {
	margin-bottom: 0;
	text-transform: unset;
	font-weight: 600;
}

.expandable-pair input[type=checkbox] {
	display: none;
}

.expandable-pair .collapse {
	display: block;
	padding: 15px 50px 15px 60px;
	overflow: hidden;
	cursor:pointer;
	border-radius: 4px;
	position: relative;
}

.expandable-pair input[type=checkbox]:checked ~ .collapse .caret-down-icon {
	transform: translateY(-50%) rotate(180deg);
}

.expandable-pair .toggle-content {
	color: var( --dark );
	max-height: 0;
	overflow: hidden;
	transition: 0.3s all linear;
	animation-timing-function: linear;
	transform-style: preserve-3d;
	padding-left: 20px;
	padding-right: 20px
}

.expandable-pair input[type=checkbox]:checked ~ .toggle-content{
	max-height: 400px;
	padding-top: 15px;
	padding-bottom: 15px
}


.expandable-pair .terms {
	color: var( --blue );
	display: flex;
	align-items: center;
}

.expandable-pair .terms svg {
	margin-left: 6px;
	margin-top: 3px;
	height: 11px;
}
/*</editor-fold>*/


.amountRangeInfo {
	font-size: 0.8em;
	color: #707070;
}

/* ---- DESKTOP ---- */
@media screen and (min-width: 1101px) {
	#depositForm {
		margin-bottom: 40px;
	}
}

/* ---- MOBILE ---- */
@media (max-width: 600px) {
	.card-networks img {
		max-width: 60px;
	}

}



/* Arabic Styles */
body[dir="RTL"] .tooltip-wrapper {
	left: 9999px;
}

body[dir="RTL"] .tooltip-info {
	left: auto;
	right: 5px;
}

body[dir="RTL"] .crypto-dropdown img {
	margin-right: 0;
	margin-left: 10px;
}