html,
body {
    font-family: 'Kanit', sans-serif !important;
}

.bg-main {
    background-color: #faf7f6;
}

.main-logo {
    width: 20vw;
    height: auto;
}

.card-auth {
    border-radius: 2rem;
    border-color: #c4c4c4;
    border-width: 2px;
}

.card-auth .card-body {
    padding: 2rem;
}

.card-auth .card-title {
	position: absolute;
	top: -30px;
	align-self: center;
	align-content: center;
	border-radius: 1rem;
	padding: 10px 20px;
	margin: 0;
	font-size: 24px;
	height: 60px;
	min-width: 300px;
}

.text-main {
    color: #ff665e;
}

.text-white {
    color: #fff;
}

.text-gray {
    color: #c4c4c4;
}

.btn-main {
	border-radius: 1.25rem;
	border-color: #ff665e;
	background-color: #ff665e;
	color: #fff;
}

.btn-main:hover {
    color: #fff;
	filter: brightness(85%);
}

.btn-outline-main {
	border-radius: 1.25rem;
	border-color: #ff665e;
	background-color: #fff;
	color: #ff665e;
}

.btn-outline-main:hover {
	color: #fff;
	background-color: #ff665e;
	border-color: #ff665e;
}

.btn-black {
	border-radius: 1.25rem;
	border-color: #000;
	background-color: #000;
	color: #fff;
}

.btn-black:hover {
    color: #fff;
	filter: brightness(115%);
}
.form-group.auth label,
.auth-lebel {
    color:#c4c4c4;
}

.form-group.auth .form-control {
    border-radius: 1.5rem;
    border-color: #c4c4c4;
    min-height: 48px;
}

.input-group.auth .form-control {
    border-radius: 1.5rem;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
    border-color: #c4c4c4;
	border-right: 0;
    min-height: 48px;
}

.input-group.auth .input-group-append button {
	border-radius: 1.5rem;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-color: #c4c4c4;
	border-left: 0;
	min-height: 48px;
}

.w-150 {
	min-width: 150px;
}

.border-radius-1 {
	border-radius: 1rem !important;
}

.radio-2x {
	width: 25px;
    height: 25px;
}

.avatar-upload input {
	display: none;
}

.avatar-upload label {
	position: absolute;
	color: #ff665e;
	padding: 51px;
	margin: 0;
	left: calc(50% - 75px);
}

.avatar-upload img {
	width: 150px;
	height: 150px;
	object-fit: cover;
	border-radius: 10rem;
	border: 2px solid #ff665e;
}

.avatar {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 10rem;
	border: 2px solid #ff665e;
}