/**
* All of the CSS for your public-facing functionality should be
* included in this file.
*/

@media(max-width: 600px) {
	.spending-limit-slider {
		grid-template-columns: 1fr 1fr !important;
	}
}

.spending_limit_wallet_spending_only {
	background-color: #d73838;
	color: #ffffff;
	padding: 15px;
	border-radius: 10px;
	border: none;
	font-size: 15px;
	font-weight: 400;
	text-align: center;
}

.saved-sc-save-limits {
	display: none;	    
	margin-top: 10px;
	background-color: green;
	border-radius: 10px;
	padding: 2px 5px;
	color: #ffffff;
	max-width: max-content;
}

.spending-cooldown-notice {
	margin-bottom: 10px !important;
	display: block;
	font-weight: 400;
}

.competition-spend-limit-container .btn, .competition-spend-limit-container .button {
	border-radius: 10px;
}

.pause-account-spending-controls span {
	font-weight: 400;
}

.competition-spend-limit-container {
	position: fixed;
	z-index: 999999;
	padding: 50px;
	background-color: white;
	top: 50%;
	border-radius: 10px;
	left: 50%;
	transform: translate(-50%, -50%);
}

.competition-spend-limit-container p, .competition-spend-limit-container h3 {
	color: #000;
}

.competition-maximum-spend-limit {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #000000c4;
	z-index: 9999999999999999999999999999;
}

@media(max-width: 768px) {
	.competition-spend-limit-container {
		min-width: 90%;
	}
}


#spending-limit-range {
	width: 100%;
	max-width: 220px;
}

#spending-controls-parent-wrapper h2 {
	margin-bottom: 5px;
}

.intro-spending-controls-text {
	font-weight: 500;
}

.spending-limit-slider {
	display: block;
	margin-top: 10px;	
	margin-bottom: 10px;
}

.spending-control-button {
	margin-top: 10px !important; 
	padding: 5px 15px; 
	border-radius: 10px;
}


.spending-limit-amount-cont {
	display: flex;
}

.spending-limit-amount-cont label {
	padding: 0px 5px;
	height: 30px;
	background-color: var(--e-global-color-primary);
	color: #ffffff;
	display: flex;
	border-radius: 5px 0px 0px 5px;
	align-items: center;
}

.take-a-break-hr {
	margin-top: 30px !important;
	margin-bottom: 0px !important;
	display: block;
}

#spending-controls-parent-wrapper button {
	background-color: var(--e-global-color-primary);
	color: #ffffff;
}

.disclaimer-sc-save-limits {
	display: block;
	margin-top: 10px; 
	margin-bottom: 5px;
	background-color: #d73838; 
	border-radius: 5px; 	
	padding: 2px 10px; 
	color: #ffffff;
	max-width: max-content;
}

.sc-disable-ajax {
	pointer-events: none;
	opacity: 0.5;
}

#spending-limit-interval-select, .spending-limit-amount-cont input {
	padding: 5px;
	height: 30px;	
}

.spending-limit-amount-cont input {
	max-width: 120px;
	border-radius: 0px 5px 5px 0px !important;
}


#spending-controls-parent-wrapper h3.spendlimit-label {
	margin: 0px;
	margin-top: 25px;  
	font-size: 18px;
	margin-bottom: 5px;	
}

.spending-limit-slider #spending-limit-amount {
	height: 30px;
	max-width: 90px;
	padding: 2px 5px;
	border-radius: 0px 5px 5px 0px;
}

.main-spending-limit-options {
	gap: 10px; 
	display: flex; 
	flex-wrap: wrap;
}

.spending-limit-parent {

}

#take-a-break-spending-controls {
	max-width: 300px;
	margin-top: 5px;
	
	border-radius: 5px;
}