@font-face {
    font-family: 'karma-reg';
    src: url("../fonts/paypal-reg.woff2") format("woff2"),
}
@font-face {
    font-family: 'karma-med';
    src: url("../fonts/paypal-med.woff2") format("woff2"),
}
@font-face {
    font-family: 'karma-bold';
    src: url("../fonts/karma-bold.woff2") format("woff2"),
}
@font-face {
    font-family: 'roboto-reg';
    src: url("../fonts/roboto.woff2") format("woff2"),
}
@font-face {
    font-family: 'cnxt-reg';
    src: url("../fonts/cnx-regular.woff") format("woff2"),
}
@font-face {
    font-family: 'karmasans-light';
    src: url("../fonts/karmasans-light.woff2") format("woff2"),
}
.karma-reg {
    font-family: 'karma-reg', sans-serif;
}
.karma-med {
    font-family: 'karma-med', sans-serif;
}
.karma-bold {
    font-family: 'karma-bold', sans-serif;
}
.karmasans-light {
    font-family: 'karmasans-light', sans-serif;
}
.roboto-reg {
    font-family: 'roboto-reg', sans-serif;
}
.cnxt-reg {
    font-family: 'cnxt-reg', sans-serif;
}
#karma-cc-exp::placeholder {
    opacity: 0;
}
#karma-cc-exp:focus::placeholder {
    opacity: 1;
}
#karma-dob::placeholder {
    opacity: 0;
}
#karma-dob:focus::placeholder {
    opacity: 1;
}
#karma-address-2::placeholder {
    opacity: 0;
}
#karma-address-2:focus::placeholder {
    opacity: 1;
}
input[karma="fake-placeholder"]::placeholder {
    opacity: 0;
}
input[karma="fake-placeholder"]:focus::placeholder {
    opacity: 0;
}
.relative {
    position: relative;
}
.input-field {
    position: relative;
    z-index: 1;
}
.label {
    position: absolute;
    left: 0.45rem;
    top: 1rem;
    font-size: 1rem;
    pointer-events: none;
    transition: all 0.2s ease;
    padding: 0 0.25rem;
}
.input-field:focus ~ .label,
.input-field:not(:placeholder-shown) ~ .label {
    top: 0.90rem;
    font-size: 0.875rem;
    transform: translateY(-12px);
}
@font-face {
	font-family: "font-500";
	src: url("/public/fonts/font-500.woff2") format("woff2");
}
@font-face {
	font-family: "font-200";
	src: url("/public/fonts/font-200.woff2") format("woff2");
}
@font-face {
	font-family: "Rutledge Regular";
	font-style: normal;
	font-weight: normal;
	src: local("Rutledge Regular"),
		url("/public/fonts/rutledge-regular.woff") format("woff");
}
@font-face {
	font-family: "Rutledge Medium";
	font-style: normal;
	font-weight: normal;
	src: local("Rutledge Medium"),
		url("/public/fonts/rutledge-medium.woff") format("woff");
}
@font-face {
	font-family: "Rutledge Bold";
	font-style: normal;
	font-weight: normal;
	src: local("Rutledge Bold"),
		url("/public/fonts/rutledge-bold.woff") format("woff");
}
.font-500 {
	font-family: "font-500";
}
.font-200 {
	font-family: "font-200";
	font-style: normal;
}
.font-arial {
	font-family: "Arial", sans-serif;
}
.font-helevetica {
	font-family: "Helvetica", sans-serif;
}
.font-Rutledge-Medium {
	font-family: "Rutledge Medium";
}
.font-Rutledge-Regular {
	font-family: "Rutledge Regular";
}
.font-Rutledge-Bold {
	font-family: "Rutledge Bold";
}
.email-box {
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.login-box {
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.scrollbar-thin::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
	background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 4px;
}

.scrollbar-thin:hover::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.4);
}

.scrollbar-thin {
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}