.content-custom {
	margin-top:30px;
}

.white-card {
    border-radius: 4px;
    background: #FFF;
    box-shadow: 2px 2px 50px 0px rgba(107, 125, 230, 0.10);
    padding: 1.5rem 1.5rem;
	height: 315px;
	
}



.vn_space {
    margin-right: -2px;
	
}


/*.exchange_rate {
    width: 720px;
    height: 310px;
    flex-shrink: 0;

}*/


.conversion {
    width: 320px;
    height: 310px;
    flex-shrink: 0;

}





.vn_head{
	color: #000;
	font-family: Gilroy;
	font-size: 25px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	padding:0px;
	text-align:left;
}


.amount_conversion{
	width: 290px;
	height: 56px;
    margin-top:18px;
	border-radius: 7px;
	border: 1px solid #E7E7EC;
	

}

.vn_comment{
	color: #000;
font-family: Gilroy;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 12px; /* 100% */
margin-top:25px;
}


.vn_currency {
	color: #475ED0;
font-family: Gilroy;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;

}

.vn_table th{
	color: #A6A6A6;
font-family: Gilroy;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-align:left;
width:350px;


}




.vn_table{
	margin-top:10px;
	width:100%;
}



.vn_exchange_rate{
	color:#000;;
font-family: Gilroy;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;

}



.vn_ccy_date{
	color: #475ED0;
leading-trim: both;
text-edge: cap;
font-family: Gilroy;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-left:8px;

}

.vn_operation_type ul{
	display:flex;
	gap:25px;
	border-bottom:1px solid #E5E5E5;}
	
.vn_operation_type ul li{	
	padding-bottom:8px;

}

.vn_operation_type ul li a{
text-decoration:none;
   color: #000;
font-family: Gilroy;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}




.vn_operation_type{
	margin-top:-5px;
	padding:0px;
}

.vn_currency_2{
	color: #000;
text-align: right;
leading-trim: both;
text-edge: cap;
font-family: Gilroy;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
display:flex;
align-items:center;
justify-content:right;

}




.vn_exchange_rate{
		color:#000;;
font-family: Gilroy;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;


}

.amount_conversion_2
{
		width: 290px;
	height: 56px;
    margin-top:30px;
	border-radius: 7px;
	border: 1px solid #E7E7EC;
}

.vn_exchange_rate_2{
			color:#000;;
font-family: Gilroy;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
display:flex;
align-items:center;



}


.vn_ccy_container {
	margin-left: 15px ;
	margin-right: 15px;
}
.converter-container {
            background: white;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            margin: 0 auto;
        }
        
        .form-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            position: relative;
        }
        
        .form-control-combined {
            display: flex;
            align-items: center;
            /*width:  290px;*/
			height: 56px;
            border: 1px solid #E7E7EC;
            border-radius: 7px;
            overflow: hidden;
			 margin-top:10px;
        }
        
        .form-control-combined input {
            border: none;
            padding: 10px;
            flex: 1;
            font-size: 1.2rem;
			width: 290px;
		    height: 56px;
		    flex-shrink: 0;
        }
        
        .form-control-combined select {
            border: none;
            cursor: pointer;
			color: #000;
text-align: right;
leading-trim: both;
text-edge: cap;
font-family: Gilroy;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
        }
        
        .swap-button {
            background-color: #3f51b5;
            color: white;
            border: none;
            width: 58px;
            height: 58px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 15px auto;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .swap-button:hover {
            background-color: #303f9f;
        }
        
        .result-container {
            margin-top: 20px;
            text-align: center;
            font-size: 1.5rem;
            color: #495057;
        }
        
.radio-group {
	display: flex;
	justify-content:flex-start;
	margin-bottom: 10px;
	
	/*width:285px;*/
}

.radio-group ul {
	list-style: none;
	padding: 0;
	
	width: 100%;
	display: flex;
	gap:15px;
	margin: 0px;
	margin-top:15px;
	border-bottom:1px solid #E5E5E5;
}

.radio-group ul li {
	text-decoration:none;
	color: #000;
	margin: 0px;
	padding: 0;
	font-family: Gilroy;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	cursor: pointer;
	padding-bottom:8px;
	display: inline-block;
	 position: relative;
}

.radio-group ul li.active {
    border-bottom: 2px solid blue;
    font-weight: bold;
}



.white-card-custom {
	position:relative;
	margin-bottom:30px;
	/*width:420px;*/
	margin-left:5px;
	/*text-align:center;*/
    min-height: 285px;
    padding-top:25px;
}
.swap-button {
	position:absolute;
	z-index:9999999;
	top: 41px;
    left: 160px;
	background-color:#475ED0;
	

	
	
}


#convertedAmount {
	background:transparent;
}

.new-div {
	display:flex;
	justify-content:center;
	    width: 100%;
    align-items: center;
	flex-direction:column;
}

.new-div h1{
	text-align:left;
}

.vn_ccy_converter_title h1 {
	margin-left: 14px;
}



.currency-h {
	cursor:pointer;
}

/**/



.vn_table {
    margin-top: 10px;
    width: 100%;
    border-collapse: collapse; 
}

.vn_table th, .vn_table td {
    padding: 7px;                     
    text-align: left; 
}

.vn_table th {
    color: #A6A6A6;
    font-family: Gilroy;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    /*border-bottom: 1px solid #E5E5E5; */
    text-align: left; 
}

.vn_table td {
    /*color: #000000;*/
    font-family: Gilroy;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    vertical-align: middle; 
    word-wrap: break-word; 
}

.vn_table td .vn_currency {
    color: #475ED0; 
    font-weight: 500;
}

.vn_table td .vn_exchange_rate {
    display: flex; 
    align-items: center; 
    gap: 5px; 
}




.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border-left-color: #3498db;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.preloader-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.text-center {
    text-align: center;
}


/**/



@media (min-width:300px) and (max-width:576px) {
    
    .vn_head, .vn_ccy_date {
        font-size:13px;
    }
    .radio-group ul li {
        font-size:13px;
        padding-bottom: 3px;
    }
    .radio-group ul {
        padding-left:10px;
    }
    .vn_table-custom td, .vn_table-custom th{
        font-size:12px;
        padding:3;
    }
    .col-custom {
       
        max-width:535px;
    }
    .vn_comment {
        font-size: 11px;
        padding:0 !important;
        padding-left:7px !important;
        line-height: 11px;
        margin-top: 15px;
    }
    .white-card {
        height:295px;
        margin-bottom: 20px;
        width:100%;
        
          margin-left:-4px;
    }

    .form-control-combined input {
        width:100%;
    }

    .white-card-custom {
        margin-left:-4px;
        padding:1rem 0.7rem;
        height:240px;
        min-height: 255px;
    }
    .swap-button {
        top: 31px;
        left: 135px;
    }
    .form-control-combined {
        margin-top:5px;
    }
@media (min-width:576px) and (max-width:768px) {

}
@media (min-width: 768px) and (max-width:992px) {

}
@media (min-width: 992px) and (max-width:1200px) {

}



