.topup-modal-styles.payment {
	
	
	.modal-topup-header {
		
	}
	.balance-block {
        .balance {
			background: transparent;
			padding-right: 16px;
			cursor: pointer;
			
			.main-icon {
				border-radius: 6px;
                background: var(--color-bg-input-bg-static-5);
			}
		}
		.balance.active {
			border-radius: 10px;
			background: var(--color-bg-input-bg-static-5);
			transition: .1s;
		}
	}
	.payment-types {
		padding-top: 0px;
		margin-top: 0px;
	}
}

.topup-modal-styles.topup {
	.modal-topup-header {
		
	}
}

#modal-topup-details {
	.modal-topup-body {
		padding: 12px 24px 0px 24px;
	}
}

.topup-modal-styles {
	
	.progress {
		position: absolute;
		top: -16px;
		left: 50%;
		transform: translateX(-50%);
		width: 274px;
		height: 6px;
		
		border-radius: 99px;
		background: var(--color-card-bg-white-25);

		box-shadow: 0 2px 8px 0 rgba(0, 17, 26, 0.06), 0 2px 6px 0 rgba(0, 17, 26, 0.12);
		backdrop-filter: blur(25px);
		
		.progress-bar {
			border-radius: 99px;
			background: var(--tokens-color-txt-white-txt_invert_white);
			box-shadow: 0 2px 8px 0 rgba(0, 17, 26, 0.06), 0 2px 6px 0 rgba(0, 17, 26, 0.12);
		}
	}
	
	
	.payment-detail-inputs {
		row-gap: 20px;
	}
	.term-badge {
		border-radius: 6px;
		border: 0.5px solid var(--color-bg-input-bg-static-5);
		background: var(--color-bg-input-bg-static-5);
	
		
		color: var(--tokens-color-txt-txt-title-h-2-black-50);
		text-align: center;
		font-size: 13px;
		font-weight: 600;
		line-height: 22px;
		padding: 0px 7px;
		display: inline-block;
		transform: translateY(-2px);
	}
	
	
	.modal-content {
		border-radius: 20px;
		box-shadow: 0px 6px 26px 0px rgba(0, 34, 51, 0.12);
		backdrop-filter: blur(60px);
		background: var(--color-card_bg_white);
		border: none;
		outline: none;
	}
	
	.modal-topup-header {
		padding: 20px 20px 10px 28px;
		
		.text {
			/* padding: 12px 22px 8px 22px; */
			
			color: var(--tokens-color-txt-txt_primary_black-5);
			font-size: 26px;
			font-weight: 700;
			line-height: 120%;
			
		}
	}
	.modal-topup-body {
		padding: 8px 18px 0px 18px;
	}
	
	
	.balance-block {
		padding: 4px 2px;
		.balance {
			border-radius: 12px;
			background: var(--color-bg-input-bg-static-5);
			padding: 6px 20px 6px 6px;
			
			.value {
				color: var(--tokens-color-txt-black-txt_primary_black-5);
				font-size: 18px;
				font-weight: 600;
				line-height: 140%;
				letter-spacing: 0.18px;
				padding: 0px 1px;
				
				.currency {
					color: var(--tokens-color-txt-gray-txt_caption_gray-28);
					font-size: 16px;
					font-weight: 450;
					line-height: 140%;
					letter-spacing: 0.16px;
				}
			}
			.description {
				color: var(--tokens-color-txt-black-txt-title-h-2-black-50);
				font-size: 14px;
				font-weight: 500;
				line-height: 130%;
				letter-spacing: 0.14px;
				padding: 0px 1px 1px 1px;
				margin-top: 1px;
				
			}
			
		}
		
		.not-enough-balance-block {
			color: var(--tokens-color-txt-red-txt_alert_red-58);
			font-size: 13px;
			font-weight: 600;
			line-height: 140%;
			padding: 6px 0px 0px 0px;
			
			
			.currency {
				font-size: 11px;
				font-weight: 550;
				line-height: 140%;
			}
			.sum {
				font-weight: 700;
			}
			
		}
		.not-enough-balance-block.success {
			color: rgba(0, 173, 92, 1);
		}
		
		
		
	}
	
	
	.return-back-trigger {
		cursor: pointer;
	}
	
	.return-back-arrow {
		transition: .1s;
		path {
			stroke-opacity: 1;
			stroke: var(--color-gray-icon_gray);
		}
	}
	
	.return-back-arrow:hover {
		transform: scale(1.1);
	}
	
	.cross {
		cursor: pointer;
		transition: .1s;
	}
	.cross path {
		transition: .1s;
		stroke-opacity: 1;
		stroke: var(--tokens-color-txt-txt-subtitle-black-40);
	}
	.cross:hover {
		transform: scale(1.1);
		 path {
			stroke-opacity: .8;
		}
	}
	
	
	
	.payment-account-type-slider {
		width: 47px;
		height: 27px;
		border-radius: 900px;
		background: var(--color-bg-btn_bg_gray-28);
		position: relative;
		cursor: pointer;
		transition: .1s;
		
		.slider-dot {
			border-radius: 900px;
			background: #FFF;
			box-shadow: 0 2px 8px 0 rgba(0, 17, 51, 0.15), 0 2px 2px 0 rgba(0, 17, 51, 0.06);
			width: 21px;
			height: 21px;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 3px;
			transition: .05s;
		}
		
	}
	.payment-account-type-slider.disabled {
		background: rgba(66, 114, 138, 0.07);
		
		
		.slider-dot {
			right: auto;
			left: 3px;
		}
	}
	.payment-account-type-slider.disabled:hover {
		background: rgba(66, 114, 138, 0.07);
		
	}
	
	
	
	.payment-account-type-slider:hover {
		border-radius: 900px;
		background: #324F5D;
		
		.slider-dot {
			box-shadow: 0 0 0 1px #FFF;
			
		}
		
	}
	
	
	
	
	.sum-total-block {
		position: relative;
		
		.total-commission-block {
			position: absolute;
			top: 0px;
			right: 0px;
		}
		
	}
	
	.payment-min-sum-warning {
		padding: 6px 10px 12px 10px;
		color: var(--tokens-color-txt-green-txt_accent_green-34);
		font-size: 14px;
		font-weight: 500;
		line-height: 130%;
		
		.currency {
			font-size: 12px;
			font-weight: 550;
			line-height: 130%;
		}
		.number {
			font-size: 14px;
			font-weight: 700;
			line-height: 130%;
		}
		
	}
	
	.payment-types {
		margin-top: 10px;
		padding: 10px 0px;
		
		.item.disabled {
			display: none;
		}
		
		.item.hidden {
			opacity: 0.5;
			pointer-events: none;
		}
		
		.item.active, .item:hover {
			.payment-item-row {
				border-radius: 10px;
				background: var(--color-bg-input-bg-static-5);
			}
			.ico-block {
				border-radius: 6px;
			}
		}
		.item[data-type="boleto"] {
			.ico-block {
				svg path {
					fill-opacity: 1;
					fill: var(--color-gray-icon_gray-12);
				}
			}
		}
		.item {
			padding: 4px 2px;
			cursor: pointer;
			
			.payment-item-row {
				padding: 6px 0px 6px 6px;
				transition: .1s;
			}
			
			.ico-block {
				width: 54px;
				height: 54px;
				position: relative;
				border-radius: 10px;
				background: var(--color-bg-input-bg-static-5);
				
				svg {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
				
			}
			
			
			.value {
				color: var(--tokens-color-txt-txt_primary_black-5);
				font-size: 18px;
				font-weight: 600;
				line-height: 25px;
			}
			
			.description {
				color: var(--tokens-color-txt-txt-title-h-2-black-50);
				font-size: 14px;
				font-weight: 500;
				line-height: 18px;
			}
			
			.checkbox-block {
				padding: 16px;
			}
			
			
			.checkbox {
				width: 22px;
				height: 22px;
				
				box-sizing: border-box;
				box-shadow: inset 0 0 0 1px rgba(55, 118, 149, 0.05);
				border-radius: 999px;
				box-shadow: inset 0 0 0 0.5px var(--color-bg-input-bg-static-5);
				background: var(--color-bg-input-bg-hover-7);
				position: relative;
				transition: .1s;
			}
			
			
			.checkbox svg {
				display: none;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				transition: .1s;
				
			}
			
			
			.checkbox.active {
				background: var(--color-bg-btn_bg_gray-28);
				box-shadow: none;
			}
			
			.checkbox.active svg {
				display: block;
			}
			
			
		}
		
		
	}
	
	.sum-block {
		margin-top: 10px;
		padding: 0px 8px;
		
		#sum-setter {
			.main-label {
				padding-left: 2px;
				padding-top: 1px;
			}
			input {
				color: var(--tokens-color-txt-black-txt_primary_black-5);
				font-size: 24px;
				font-weight: 700;
				line-height: 150%;
				letter-spacing: 0.24px;
				height: 54px;
				
				padding-left: 52px;
				
			}
		}
		.currency-suffix {
			position: absolute;
			bottom: 9.5px;
			left: 16px;
			
			color: var(--tokens-color-txt-gray-txt_caption_gray-28);
			font-size: 22px;
			font-weight: 550;
			line-height: 150%;
			letter-spacing: 0.22px;
			pointer-events: none;
		}
		
	}
	
		
		
	.total-block {
		margin-top: 12px;
		.label {
			color: rgba(20, 61, 82, 0.5);
			font-size: 18px;
			font-weight: 500;
			line-height: 27px;
			margin-top: 1px;
		}
		.value {
			color: rgba(23, 43, 54, 1);
			font-size: 22px;
			font-weight: 700;
			line-height: 29px;
		}
		
		
	}
	
		
	.total-commission-block {
		.without-commission {
			.label {
				color: var(--tokens-color-txt-txt_accent_green-34);
				text-align: right;
				font-size: 13px;
				font-weight: 700;
				line-height: 130%;
			}
		}
		.with-commission {
			.label {
				color: var(--tokens-color-txt-black-txt-title-h-2-black-50);
				font-size: 13px;
				font-weight: 600;
				line-height: 120%;
			}
			.currency {
				font-size: 11px;
				font-weight: 550;
				line-height: 120%;
			}
			.commission {
				font-size: 13px;
				font-weight: 700;
				line-height: 120%;
			}
		}
	}
	
	
	.modal-topup-footer {
		padding: 0px 26px 26px 26px;
		margin-top: 20px;
		
		.topup-btn {
			height: 50px;
			border-radius: 10px;
			background: var(--color-bg-btn_bg_gray-15);
			transition: .1s;
			cursor: pointer;
			position: relative;
			outline: 1.5px solid transparent;
			
			.label {
				color: var(--color-txt-btn_txt_white);
				font-size: 18px;
				font-weight: 700;
				line-height: 130%;
				
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				padding-bottom: 2px;
				
			}
			.currency {
				font-size: 16px;
				font-weight: 550;
				line-height: 130%;
				letter-spacing: 0.16px;
			}
			
		}
		
		
		
		.topup-btn.disabled {
			background: var(--color-bg-btn_bg_red-98);
			.label {
				color: var(--color-txt-btn_txt_red-mistake);
			}
		}
		
		.topup-btn:hover:not(.disabled) {
			background: var(--color-bg-btn_bg_gray-12);
			outline: 1.5px solid var(--color-bg-btn_bg_gray-12);
		}
		
		
	}
	
}


#payment-with-qr-code-modal {
	--bs-modal-width: 400px;
	
	.modal-content {
		border-radius: 24px;
		background: var(--color-card-bg-white-85-chats-head);
		box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.32), inset 0 0 0 0.5px var(--color-black-icon-black-10);
		backdrop-filter: blur(8px);
	}
	
	.payment-modal-header {
		padding: 20px 20px 10px 24px;
		
		.cross {
			cursor: pointer;
			transition: .1s;
			path {
				transition: .1s;
      			stroke-opacity: 1;
				stroke: var(--color-black-icon-black-30);
			}
		}
		.cross:hover {
			transform: scale(1.1);
			/* path { */
				/* stroke: var(--color-gray-icon_gray-12); */
			/* } */
		}
		.label {
			color: var(--tokens-color-txt-black-txt_primary_black-5);
			font-size: 26px;
			font-weight: 700;
			line-height: 120%;
		}
	}
	
	
	.payment-modal-body {
		padding: 6px 24px 0px 24px;
		
		.payment-card {
			padding: 10.5px;
			margin-bottom: 6px;
			
			border-radius: 10px;
			background: var(--color-bg-input-bg-hover-7);
			
			
			
			.label {
				color: var(--tokens-color-txt-black-txt_primary_black-5);
				font-size: 16px;
				font-weight: 500;
				line-height: 140%;
				padding: 2px 0px 0px 0px;
			}
			
			.timer {
				color: var(--tokens-color-txt-green-txt_accent-hover_green-40);
				font-size: 20px;
				font-weight: 700;
				line-height: 110%;
				padding: 1px 0px 0px 0px;
			}
		}
		
		.qr-code-area {
			padding: 16px;
			text-align: center;
			margin-bottom: 6px;
			img {
				width: 200px;
				border-radius: 10px;
			}
		}
		
		.text-code {
			input {
				border-radius: 10px;
				background: var(--color-bg-input-bg-hover-7);
				height: 46px;
				padding: 0px 16px;
				outline: none;
				border: none;
				width: 100%;
				
				color: var(--tokens-color-txt-blue-txt_link_blue-50);
				font-size: 16px;
				font-weight: 500;
				line-height: 150%;
				
			}
			
			.copy-btn {
				width: 46px;
				height: 46px;
				border-radius: 10px;
				background: var(--color-bg-input-bg-hover-7);
				outline: 2px solid transparent;
				transition: .1s;
				cursor: pointer;
				position: relative;
				
				svg {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					
					path {
						stroke-opacity: 1;
						stroke: var(--color-gray-icon_gray-12);
					}
				}
				
			}
			
			.copy-btn:hover {
				outline: 2px solid var(--color-bg-input-bg-hover-7);
				
				
			}
			
		}
		
	}
	
	.payment-modal-footer {
		padding: 10px 24px 24px 24px;
		
		.payment-confirmation-btn {
			position: relative;
			border-radius: 10px;
			background: var(--color-bg-btn_bg_gray-15);
			height: 50px;
			transition: .1s;
			cursor: pointer;
			outline: 2px solid transparent;
			
			.label {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				
				color: var(--color-txt-btn_txt_white);
				font-size: 18px;
				font-weight: 700;
				line-height: 130%;
				letter-spacing: -0.36px;
				
				.currency {
					color: var(--color-txt-btn-txt-white-80);
					font-size: 16px;
					font-weight: 550;
					line-height: 130%;
					letter-spacing: -0.32px;
				}
			}
		}
		
		.payment-confirmation-btn:hover {
			background: var(--color-bg-btn_bg_gray-12);
			outline: 2px solid var(--color-bg-btn_bg_gray-12);
		}
		
	}
	
}




@media (max-width: 924px) {
	
	#payment-with-qr-code-modal {
		.modal-content {
			min-height: 100dvh;
			border-radius: 0px;
			border: none;
			box-shadow: none;
			background: var(--color-card_bg_white2-for-dark);
		}
		.payment-modal-header {
			padding: 6px 12px;
			margin-bottom: 14px;
			
			.label {
				padding: 7px 4px 0px 4px;
				
				color: var(--tokens-color-txt-black-txt_primary_black-5);
				font-size: 20px;
				font-weight: 700;
				line-height: 120%;
				letter-spacing: -0.2px;
				
			}
		}
		.payment-modal-body {
			padding: 0px 14px;
		}
		.payment-modal-footer {
			padding: 10px;
			position: fixed;
			left: 0px;
			right: 0px;
			bottom: 0px;
		}
	}
	
	
	.topup-modal-styles.payment {
		.balance-block {
			.balance {
				padding-right: 0px;
				.main-icon {
					transform: scale(0.96);
				}
			}
		}
	}
	
	
	#modal-topup-details {
		.modal-topup-body {
			padding: 14px 16px 0px 16px;
		}
	}
	
	#modal-topup {
		
	}
	
	.topup-modal-styles {
		
		.progress {
			top: 6px;
			width: auto;
			left: 12px;
			right: 12px;
			transform: none;
			z-index: 1;
			
			.progress-bar {
				background: linear-gradient(90deg, #00D688 0%, #00B856 100%);
			}
		}
		
		.payment-detail-inputs {
			padding: 0px;
		}
		.modal-content {
			min-height: 100dvh;
			border-radius: 0px;
			border: none;
			background: var(--color-card_bg_white-96);
			display: flex;
			flex-direction: column;
		}
		
		.modal-topup-header {
			padding: 16px 12px 8px 12px;
			
			border-radius: 0 0 20px 20px;
			background: var(--color-card_bg_white);
			backdrop-filter: blur(25px);
			
			.text {
				padding: 7px 4px 0px 4px;
				font-size: 20px;
				font-weight: 700;
				line-height: 120%;
			}
			.return-back-arrow {
				transition: .1s;
			}
			
		}
		
		.cross {
			/* transform: translateY(2px); */
		}
		
		.modal-topup-body {
			margin-top: 8px;
			border-radius: 20px 20px 0 0;
			background: var(--color-card_bg_white);
			flex-grow: 1;
			padding: 8px 8px 0px 8px;
		}
		
		.modal-topup-footer {
			position: sticky;
			bottom: 0px;
			width: 100%;
			left: 0px;
			padding: 20px 16px 16px 16px;
			background: var(--color-card_bg_white);
			border-radius: 0px 0px 20px 20px;
			margin-top: 0px;
			
			.topup-btn {
				height: 46px;
				
				.label {
					width: 100%;
					font-size: 16px;
					font-weight: 700;
					line-height: 130%;
					letter-spacing: 0.16px;
					
					
				}
			}
			
		}
		
		.balance-block {
			padding: 4px 2px;
			margin-top: 0px;
			
			.not-enough-balance-block {
				font-size: 13px;
				font-weight: 700;
				line-height: 140%;
				padding: 4.5px 10px;
				
				
				.currency {
					
				}
				.sum {
					
				}
			}
			
			.balance {
				padding: 6px;
				
				.value {
					font-size: 16px;
					font-weight: 600;
					line-height: 140%;
					
					.currency {
						color: var(--tokens-color-txt-gray-txt_caption_gray-28);
						font-size: 14px;
						font-weight: 450;
						line-height: 140%;
						letter-spacing: 0.14px;
					}
				}
				.description {
					font-size: 14px;
					font-weight: 500;
					line-height: 130%;
					margin-top: 0px;
				}
			}

		}
		
		.payment-types {
			margin-top: 10px;
			padding: 2px 0px 8px 0px;
			.item {
				padding: 4px 2px;
				
				.ico-block {
					width: 48px;
					height: 48px;
					
					svg {
						transform: translate(-50%, -50%);
						max-height: 34px;
					}
				}
				
				.value {
					font-size: 16px;
					font-weight: 600;
					line-height: 140%;
				}
				.description {
					font-size: 13px;
					font-weight: 500;
					line-height: 130%;
				}
				
				
				.checkbox-block {
					padding: 14px; 
				}
				
			}
		}
		
		.sum-block {
			margin-top: 10px;
			padding: 0px 8px;
			
			#sum-setter {
				input {
					height: 46px;
					
					color: var(--tokens-color-txt-black-txt_primary_black-5);
					font-size: 18.5px;
					font-weight: 700;
					line-height: 150%;
					letter-spacing: 0.185px;
					
					padding-left: 43px;
				}
			}
			.currency-suffix {
				bottom: 9.5px;
				left: 16px;
				
				font-size: 16.5px;
				font-weight: 550;
				line-height: 150%;
				letter-spacing: 0.165px;
			}
		}
		
		.total-block {
			margin-top: 12px;
			
			.value {
				font-size: 18px;
				font-weight: 700;
				line-height: 130%;
			}
			
			.label {
				font-size: 13px;
				font-weight: 500;
				line-height: 150%; 
			}
			
			.total-commission-block {
				.label {
					font-size: 13px;
					font-weight: 500;
					line-height: 130%;
				}
				svg {
					transform: translateY(-2px);
				}
			}
			
		}
		
		
		
		
		
		
	}
	
}












@media (min-width: 576px) {
	.topup-modal-styles {
		.modal-dialog {
			max-width: 460px;
		}
    }
}