#modal-topup {
	
	.modal-content {
		border-radius: 20px;
		box-shadow: 0px 6px 26px 0px rgba(0, 34, 51, 0.12);
		backdrop-filter: blur(60px);
		background: rgba(255, 255, 255, 1);
		border: none;
		outline: none;
	}
	
	.modal-topup-header {
		padding: 16px 16px 0px 16px;
		
		.text {
			padding: 12px 22px 8px 22px;
			
			color: rgba(0, 18, 26, 1);
			font-size: 26px;
			font-weight: 700;
			line-height: 31px;
			
		}
	}
	
	.cross {
		cursor: pointer;
	}
	.cross path {
		transition: .1s;
	}
	.cross:hover path {
		stroke-opacity: .8;
		stroke: rgba(0, 17, 26, 0.8);
	}
	
	.modal-topup-body {
		padding: 4px 0px 6px 0px;
	}
	
	.balance-block {
		padding: 0px 24px;
		.balance {
			border-radius: 12px;
			background: rgba(55, 118, 149, 0.05);
			padding: 11px 12px;
			
			.value {
				color: rgba(23, 43, 54, 1);
				font-size: 18px;
				font-weight: 600;
				line-height: 25px;
			}
			.description {
				color: rgba(20, 61, 82, 0.5);
				font-size: 14px;
				font-weight: 500;
				line-height: 18px;
			}
			
		}
		
		.not-enough-balance-block {
			color: rgba(20, 61, 82, 0.5);
			font-size: 14px;
			font-weight: 700;
			line-height: 28px;
			padding: 0px 10px;
			
		}
		.not-enough-balance-block.success {
			color: rgba(0, 173, 92, 1);
		}
		
		
		
	}
	
	.payment-types {
		margin-top: 14px;
		padding: 0px 24px;
		
		.item {
			padding: 9px 10px;
			cursor: pointer;
			
			
			.ico-block {
				width: 52px;
				height: 52px;
				position: relative;
				border-radius: 10px;
				background: rgba(55, 118, 149, 0.05);
				
			}
			
			.ico-block svg {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				
			}
			
			.value {
				color: rgba(0, 18, 26, 1);
				font-size: 18px;
				font-weight: 600;
				line-height: 25px;
			}
			
			.description {
				color: rgba(20, 61, 82, 0.5);
				font-size: 14px;
				font-weight: 500;
				line-height: 18px;
			}
			
			.checkbox-block {
				padding: 11px;
			}
			
			
			.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;
				background: rgba(55, 118, 149, 0.05);
				position: relative;
				transition: .1s;
			}
			
			
			.checkbox svg {
				display: none;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				transition: .1s;
				
			}
			
			
			.checkbox.active {
				background: rgba(50, 79, 93, 1);
				box-shadow: none;
			}
			
			.checkbox.active svg {
				display: block;
			}
			
			
		}
		
		
	}
	
	.sum-block {
		margin-top: 14px;
		padding: 4px 36px;
		
		#sum-setter .main-label {
			padding-left: 2px;
			padding-top: 1px;
		}
		
	}
	
		
		
	.total-block {
		margin-top: 14px;
		.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 {
			margin-top: 3px;
			
			.label {
				font-size: 14px;
				font-weight: 500;
				line-height: 18px;
			}
		}
		
		.without-commission {
			.label {
				color: rgba(0, 173, 92, 1);
				
			}
		}
		.with-commission {
			.label {
				color: rgba(0, 85, 255, 1);
			}
		}
		
	}
	
	
	.modal-topup-footer {
		padding: 10px 36px 34px 36px;
		
		.topup-btn {
			height: 50px;
			border-radius: 10px;
			background: rgba(23, 43, 54, 1);
			transition: .1s;
			cursor: pointer;
			position: relative;
			
			.label {
				color: rgba(255, 255, 255, 1);
				font-size: 18px;
				font-weight: 600;
				line-height: 23px;
				
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				padding-bottom: 2px;
				
			}
			
			
		}
		
		.topup-btn:hover {
			background: rgba(0, 18, 26, 1);
		}
		
		
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
}



@media (max-width: 924px) {
	
	#modal-topup {
		
		.modal-content {
			height: 100dvh;
			border-radius: 0px;
			border: none;
			background: #F3F5F7;
			display: flex;
			flex-direction: column;
		}
		
		.modal-topup-header {
			padding: 6px 14px 6px 9px;
			
			border-radius: 0 0 20px 20px;
			background: rgba(255, 255, 255, 0.85);
			backdrop-filter: blur(25px);
			
			.text {
				padding: 6px 14px 6px 18px;
				font-size: 22px;
				font-weight: 700;
				line-height: 120%;
			}
			
		}
		
		.cross {
			transform: translateY(2px);
		}
		
		.modal-topup-body {
			padding: 0px;
			margin-top: 8px;
			border-radius: 20px 20px 0 0;
			background: #FFF;
			flex-grow: 1;
			padding: 16px;
		}
		
		.modal-topup-footer {
			position: absolute;
			bottom: 0px;
			width: 100%;
			left: 0px;
			padding: 8px 16px;
			
			.topup-btn {
				height: 44px;
				
				.label {
					width: 100%;
					font-size: 16px;
					font-weight: 600;
					line-height: 130%;
					
					
				}
			}
			
		}
		
		.balance-block {
			padding: 0px;
			
			.not-enough-balance-block {
				font-size: 13px;
				font-weight: 700;
				line-height: 140%;
				padding: 4.5px 10px;
			}
			
			.balance {
				padding: 9px 10px;
				
				.value {
					font-size: 16px;
					font-weight: 600;
					line-height: 140%;
				}
				.description {
					font-size: 13px;
					font-weight: 500;
					line-height: 130%;
				}
			}

		}
		.payment-types {
			padding: 0px;
		}
		
		.payment-types {
			margin-top: 12px;
			.item {
				padding: 9px 0px;
				
				.ico-block {
					width: 46px;
					height: 46px;
					
					svg {
						transform: translate(-50%, -50%) scale(0.8);
					}
				}
				
				.value {
					font-size: 16px;
					font-weight: 600;
					line-height: 140%;
				}
				.description {
					font-size: 13px;
					font-weight: 500;
					line-height: 130%;
				}
				
				
				.checkbox-block {
					padding-right: 0px; 
				}
				
			}
		}
		
		.sum-block {
			margin-top: 12px;
			padding: 0px;
		}
		
		.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) {
	#modal-topup {
		.modal-dialog {
			max-width: 470px;
		}
    }
}