body {
	--gray-100: #f7f8f9;
	--gray-200: #dee2e5;
	--gray-300: #c7cdd3;
	--gray-500: #9fa9b4;
	--blue-500: #196fe0;
	--red-25: #fff8f8;
	--red-50: #f7dcdc;
	--red-500: #dc2626;
	--yellow-500: #ffcc17;
	--text-black: #23221f;
	--text-gray: #706d65;
	--background-main: #ffffff;
}

/* text */
.text-lg {
	font-size: 20px !important;
}

.text-md {
	font-size: 16px !important;
	font-weight: 400 !important;
}

.text-sm {
	font-size: 14px !important;
	font-weight: 400 !important;
}

.text-wrap {
	white-space: wrap;
}

.text-nowrap {
	white-space: nowrap;
}

.text-break {
	word-wrap: break-word !important;
	word-break: break-word !important;
}

.font-weight-bold {
	font-weight: 700;
}

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-danger {
	color: var(--red-500);
}

.text-black {
	color: var(--text-black);
}

.text-link {
	color: var(--blue-500);
	text-decoration: underline;
}

.text-decoration-none {
	text-decoration: none !important;
}

/* margin */
.mr-4 {
	margin-right: 4px !important;
}

.mt-4 {
	margin-top: 4px !important;
}

.mt-24 {
	margin-top: 24px !important;
}

.mt-8 {
	margin-top: 8px !important;
}

.mt-12 {
	margin-top: 12px !important;
}

.mt-16 {
	margin-top: 16px !important;
}

.mt-32 {
	margin-top: 32px !important;
}

/* padding */
.px-8 {
	padding-left: 8px !important;
	padding-right: 8px !important;
}

.p-16 {
	padding: 16px !important;
}

.p-24 {
	padding: 24px !important;
}

/* display */
.d-block {
	display: block !important;
}

.d-inline {
	display: inline !important;
}

.d-inline-block {
	display: inline-block !important;
}

.d-none {
	display: none !important;
}

/* border */
.border {
	border: 1px solid #cccccc;
}

.rounded-4 {
	border-radius: 4px;
}

.border-danger {
	border-color: var(--red-500) !important;
}

.border-main {
	border-color: var(--text-black) !important;
}

.border-gray-200 {
	border-color: var(--gray-200) !important;
}

.border-gray-300 {
	border-color: var(--gray-300) !important;
}

.border-blue-500 {
	border-color: var(--blue-500) !important;
}

/* background */
.bg-white {
	background-color: var(--background-main);
}

/* vertical align */
.align-top {
	vertical-align: text-top;
}

.align-middle {
	vertical-align: middle;
}

/* line height */
.lh-140 {
	line-height: 140%;
}

.lh-160 {
	line-height: 160%;
}