html,body,h1,h2,h3,h4,h5,span,p {font-family: "Roboto", "sans-serif", "system-ui", "Segoe UI"}
.loader {
	border: 16px solid #f3f3f3; /* Light grey */
	border-top: 16px solid #366f7c; /* Blue */
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
	top: 50%;
	left: 50%;
	position: absolute;
	margin: -76px 0 0 -76px;
}

.text-linethrough{
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
	/*color: red;*/
}

input, select{
	background-color: #ffffff;
}

sup{
	color: red;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}

.w3-show-tr {
	display: table-row!important;
}

.numberText{
	font-family: sans-serif;
}

.input-file::-webkit-file-upload-button{
	visibility: hidden;
}

.input-file::before {
	content: '<?php echo ($language == "SPA") ? "Explorar" : "Browse"; ?>'; /* Select some files */
	display: inline-block;
	background: linear-gradient(top, #f9f9f9, #e3e3e3);
	border: 1px solid #999;
	border-radius: 3px;
	padding: 5px 8px;
	outline: none;
	white-space: nowrap;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
	text-shadow: 1px 1px #fff;
	font-weight: 600;
	font-size: 10pt;
}

.input-file:hover::before {
	border-color: black;
}

.input-file:active::before {
	background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

.toggleEnable{
	-webkit-transform: scaleX(-1) !important;
	transform: scaleX(-1) !important;
}

.toggleDisable:hover{
	-webkit-transform: scaleX(-1) !important;
	transform: scaleX(-1) !important;
}

.toggleEnable:hover{
	-webkit-transform: scaleX(1) !important;
	transform: scaleX(1) !important;
}

.disabledbutton, .disabledinput {
	pointer-events: none;
	opacity: 0.9;
}

.visibility-hidden{
	visibility: hidden;
}

/* The snackbar - position it at the bottom and in the middle of the screen */
.toast {
	visibility: hidden; /* Hidden by default. Visible on click */
	min-width: 250px; /* Set a default minimum width */
	position: fixed; /* Sit on top of the screen */
	z-index: 100; /* Add a z-index if needed */
	left: 50%; /* Center the snackbar */
	transform: translateX(-50%);
	bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
.show-toast {
	visibility: visible; /* Show the snackbar */
	/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
	However, delay the fade out process for 2.5 seconds */
	
	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
	from {bottom: 0; opacity: 0;}
	to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
	from {bottom: 0; opacity: 0;}
	to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
	from {bottom: 30px; opacity: 1;}
	to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
	from {bottom: 30px; opacity: 1;}
	to {bottom: 0; opacity: 0;}
}

.w3-show.toast{
	visibility: visible!important; /* Show the snackbar */
	/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
	However, delay the fade out process for 2.5 seconds */
	
	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

.visaChartColor{
	background-color: rgba(29, 87, 189, 0.2);
	border: solid 1px rgb(29, 87, 189);
}

.mastercardChartColor{
	background-color: rgba(255, 167, 0, 0.2);
	border: solid 1px rgb(255, 167, 0);
}

.americanexpressChartColor{
	background-color: rgba(31, 153, 246, 0.2);
	border: solid 1px rgb(31, 153, 246);
}

.claveChartColor{
	background-color: rgba(212, 0, 0, 0.2);
	border: solid 1px rgb(212, 0, 0);
}

.discovercardChartColor{
	background-color: rgba(255, 105, 0, 0.2);
	border: solid 1px rgb(255, 105, 0);
}

.dinersclubChartColor{
	background-color: rgba(0, 200, 255, 0.2);
	border: solid 1px rgb(0, 200, 255);
}

.unionpayChartColor{
	background-color: rgba(59, 180, 169, 0.2);
	border: solid 1px rgb(59, 180, 169);
}

.jcbChartColor{
	background-color: rgba(59, 216, 83, 0.2);
	border: solid 1px rgb(59, 216, 83);
}

.otherChartColor{
	background-color: rgba(99, 96, 106, 0.2); /* rgba(129, 107, 171, 0.2) */
	border: solid 1px rgb(99, 96, 106); /* rgb(129, 107, 171) */
}

.hyp-black{
	background-color: #2d2d2d;
	color: #ffffff;
}

.paymentrequest-input-amount {
	display: inline-block;
}

@media (max-width:600px){ /* Small Screens */
	.paymentrequest-input-amount {
		width: 200px !important;
	}
}

@media (min-width:993px){ /* Large Screens */
	.paymentrequest-input-amount {
		width: 120px !important;
	}
}

#qrImageModal .w3-modal-container{
	text-align: center; 
	top: 50%; 
	transform: translateY(-50%);
}

/* Pulating dot for notifications */
.ring-container {
	position: relative;
}

.circle {
	width: 15px;
	height: 15px;
	background-color: #ff3c47;
	border-radius: 50%;
	position: absolute;
	top: 23px;
	left: 23px;
	display:none;
}

.ringring {
	border: 3px solid #ff3c47;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	height: 15px;
	width: 15px;
	position: absolute;
	right: 0;
	bottom: 0;
	animation: pulsate 1s ease-out;
	animation-iteration-count: infinite;
	-webkit-animation: pulsate 1s ease-out;
	-webkit-animation-iteration-count: infinite; 
	opacity: 0.0
}

@keyframes pulsate {
	0% {transform: scale(0.1, 0.1); opacity: 0.0;}
	50% {opacity: 1.0;}
	100% {transform: scale(1.2, 1.2); opacity: 0.0;}
}
@-webkit-keyframes pulsate {
	0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
	50% {opacity: 1.0;}
	100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

/* Tooltip container */
.tooltip {
	position: relative;
}

/* Tooltip text */
.tooltip .tooltiptext {
	visibility: hidden;
	width: 100%;
	background-color: #555;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;

	/* Position the tooltip text */
	position: absolute;
	z-index: 1;
	bottom: -30px;
	left: 0%;

	/* Fade in tooltip */
	opacity: 0;
	transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: -10px;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
	transform: scaleY(-1);
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 0.7;
}

.always-hidden {
	display: none!important;
}

/*
.holds-the-iframe {
	background:url(../images/loader.gif) center center no-repeat;
}
*/

/*----------------------
SCROLLBAR
----------------------*/
/* Works on Firefox */
* {
	scrollbar-width: 12px;
	scrollbar-color: #366f7c ;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
	width: 12px;
}

*::-webkit-scrollbar-track {
	background: #f4f5f9;
	border-radius: 20px;
}

*::-webkit-scrollbar-thumb {
	background-color: #366f7c;
	border-radius: 20px;
	border: 3px solid #f4f5f9;
}

#bodyContent p, #bodyContent h3{
	text-align: left;
}

#bodyContent h3{
	color: black;
	font-weight: 700;
}

#cf_selectInput{
	/* "Roboto", "sans-serif", "system-ui", "Segoe UI" */
	/* FontAwesome */
	font-family: "Roboto", "sans-serif", "system-ui", "Segoe UI", "FontAwesome";
	font-size: 14px;
}

#cf_selectInput::before{
	vertical-align: middle;
}

.hyp-color{color:#fff;background-color:#366f7c;} /* RGB R:54 G:111 B:124 ||||| HSL(191, 39%, 35%) */
.hyp-text-color{color:#366f7c} /* RGB R:54 G:111 B:124 ||||| HSL(191, 39%, 35%) */
.vertical-align {position:absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%);}
.flip-horizontally {transform: scaleX(-1);}
.hyp-hover-color:hover{color:#fff; background-color:#366f7c;}
#mySidebar{z-index:50; width:300px; padding-bottom: 29px;}
#myTopBar{z-index:99; height:86px;min-height:60px;}
.mainContainer{margin-left:300px;margin-top:43px;}

#cc-modal{z-index:100; padding-top:50px;}
#paymentForm-modal{z-index:100; padding-top:50px;}
#processPayment-modal{z-index:100; padding-top:50px;}
#payment3DS-modal{z-index:200; padding-top:50px;}
#validateCard-modal{z-index:100; padding-top:50px;}