.brc {
	border-radius: 0 !important;
	border-left-color: rgb(0, 74, 153) !important;
}
.nopadding {
	padding: 0 !important;
	margin: 0 !important;
}

.centerAlign {
	text-align: center;
}

.textPadding {
	padding: 15px;
	height: 50px;
}

.titleBar {
	height: 50px;
}

.primaryText {
	color: white;
}

.primaryBackground {
	background-color: #282828;
}

.fixedScreen {
	width: 480px;
	text-align: center;
	margin-bottom: 0 !important;
}

.loader {
	border: 2px solid #f3f3f3;
	border-radius: 50%;
	border-top: 2px solid #fd2020;
	width: 80px;
	height: 80px;
	-webkit-animation: spin 2s linear infinite; /* Safari */
	animation: spin 2s linear infinite;
	left: calc(50% - 40px);
	position: relative;
}

.loader-background {
	width: 400px;
	height: 100px;
	top: calc(50% - 50px);
	left: calc(50% - 200px);
	position: fixed;
}

.p-bg {
	background-color: white;
}

.s-bg {
	background-color: rgb(245, 245, 247);
}

.p-card-bg {
	background-color: #282828;
	color: white;
}

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

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

.canvasScreen {
	image-rendering: optimizeQuality;
}

.normalText {
	color: #f3f3f3;
}

input {
	--c: orange; /* active color */
	--g: 8px; /* the gap */
	--l: 1px; /* line thickness*/
	--s: 15px; /* thumb size*/

	width: 100%;
	height: var(--s); /* needed for Firefox*/
	--_c: color-mix(in srgb, var(--c), #000 var(--p, 0%));
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: none;
	cursor: pointer;
	overflow: hidden;
}
input:focus-visible,
input:hover {
	--p: 25%;
}
input:active,
input:focus-visible {
	--_b: var(--s);
}
/* chromium */
input[type="range" i]::-webkit-slider-thumb {
	height: var(--s);
	aspect-ratio: 1;
	border-radius: 50%;
	box-shadow: 0 0 0 var(--_b, var(--l)) inset var(--_c);
	border-image: linear-gradient(90deg, var(--_c) 50%, #ababab 0) 1/0 100vw/0 calc(100vw + var(--g));
	clip-path: polygon(0 calc(50% + var(--l) / 2), -100vw calc(50% + var(--l) / 2), -100vw calc(50% - var(--l) / 2), 0 calc(50% - var(--l) / 2), 0 0, 100% 0, 100% calc(50% - var(--l) / 2), 100vw calc(50% - var(--l) / 2), 100vw calc(50% + var(--l) / 2), 100% calc(50% + var(--l) / 2), 100% 100%, 0 100%);
	-webkit-appearance: none;
	appearance: none;
	transition: 0.3s;
}
/* Firefox */
input[type="range"]::-moz-range-thumb {
	height: var(--s);
	width: var(--s);
	background: none;
	border-radius: 50%;
	box-shadow: 0 0 0 var(--_b, var(--l)) inset var(--_c);
	border-image: linear-gradient(90deg, var(--_c) 50%, #ababab 0) 1/0 100vw/0 calc(100vw + var(--g));
	clip-path: polygon(0 calc(50% + var(--l) / 2), -100vw calc(50% + var(--l) / 2), -100vw calc(50% - var(--l) / 2), 0 calc(50% - var(--l) / 2), 0 0, 100% 0, 100% calc(50% - var(--l) / 2), 100vw calc(50% - var(--l) / 2), 100vw calc(50% + var(--l) / 2), 100% calc(50% + var(--l) / 2), 100% 100%, 0 100%);
	-moz-appearance: none;
	appearance: none;
	transition: 0.3s;
}
@supports not (color: color-mix(in srgb, red, red)) {
	input {
		--_c: var(--c);
	}
}

.right-text-alignment {
	text-align: right;
}

.card-container {
	margin-top: 10px;
}

.icon-button {
	margin-right: 15px;
	width: 35px;
	height: 35px;
	padding: 0;
	border: none;
	background: rgba(0, 0, 0, 0);
}

.p-border-icon {
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 8px !important;
	border-width: 0.5px;
}

.input-file {
	display: block;
}
