:root {
	--black: #2A2F42;
	--black-transparent: #2A2F4266;
	--white: #FFFFFF;
	--white-transparent: #FFFFFF1A;
	--gray-01: #6A6C74;
	--gray-02: #B0B2BA;
	--gray-03: #F0F0F0;
	--gray-04: #F8F8F8;
	--primary-blue: #146CFF;
	--hover-blue: #0059EC;
	--danger-red: #E21F1F;
	--hover-red: #C40000;
}

body {
	font-family: 'Raleway', sans-serif;
	background: var(--white);
	user-select: none;
}

.navbar {
	box-shadow: 0px 4px 8px 0px #E1E1E140; 
	padding: 32px 150px; 
	border-radius: 0px 0px 20px 20px;
}

.navbar-logo {
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
}

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

.text-gray-01 {
	color: var(--gray-01);
}

.text-gray-02 {
	color: var(--gray-02);
}

.element-shadow {
	box-shadow: 4px 0px 8px 0px #E1E1E140;
}

.heading1 {
	font-size: 56px;
	font-weight: 700;
	line-height: 68px;
}

.heading2 {
	font-size: 36px;
	font-weight: 700;
	line-height: 48px;
}

.heading3 {
	font-size: 28px;
	font-weight: 700;
	line-height: 36px;
}

.heading4 {
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
}

.large-text-semi-bold {
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
}

.large-text-regular {
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
}

.medium-text-semi-bold {
	font-size: 18px;
	font-weight: 600;
	line-height: 26px;
}

.medium-text-regular {
	font-size: 18px;
	font-weight: 400;
	line-height: 26px;
}

.large-text-semi-bold {
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
}

.normal-text-semi-bold {
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.normal-text-regular {
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

button {
	border: none;
	background: none;
}

.primary-button {
	border-radius: 30px;
	padding: 16px 32px;
	gap: 8px;
	background: var(--primary-blue);
	color: var(--white);
}

.primary-button:hover{
	background: var(--hover-blue);
}

.danger-button {
	border-radius: 30px;
	padding: 16px 32px;
	gap: 8px;
	background: var(--danger-red);
	color: var(--white);
	cursor: pointer;
}

.danger-button:hover{
	background: var(--hover-red);
}

.white-button {
	border-radius: 30px;
	padding: 16px 32px;
	gap: 8px;
	background: var(--gray-04);
	color: var(--white);
}

.white-button:hover{
	background: var(--gray-03);
}

.white-button.active {
    background: #E9F2FF;
}
  
.white-button.active .active-path {
    stroke: #4285F4;
}

.white-button.active .active-fill {
    fill: #4285F4;
}

@media (max-width: 1058px) {
	.normal-text-regular {
		font-size: 14px;
		line-height: 22px;
	}
	
	.normal-text-semi-bold {
		font-size: 14px;
		line-height: 22px;
	}
	
	.text-small-text-regular {
		font-size: 12px;
		line-height: 18px;
	}
}

@media (max-width: 768px) {
	
	.navbar {
		padding: 20px 16px;
	}
	
	.primary-button,
	.danger-button {
		padding: 12px 24px;
	}
	
	.heading4 {
		font-size: 16px;
	}
	
}