/* Auto-generated, DO NOT EDIT */

/* fill */
.fill-main { fill: #394EFF }
.fill-gray-light-shade { fill: #EEEEEE }
.fill-gray-lightest { fill: #f6f6f6 }
.fill-gray-lighter { fill: #f1f1f1 }
.fill-gray-light { fill: #ddd }
.fill-gray-bg { fill: #CCC }
.fill-gray-medium { fill: #888 }
.fill-gray-dark { fill: #666 }
.fill-gray-darkest { fill: #333 }
.fill-teal { fill: #394EFF }
.fill-teal-dark { fill: #2331A8 }
.fill-teal-light { fill: rgba(57, 78, 255, 0.1) }
.fill-tealx { fill: #3EAAAF }
.fill-tealx-light { fill: #E2F0EE }
.fill-tealx-light-border { fill: #C6DCDA }
.fill-tealx-lightest { fill: rgba(62, 170, 175, 0.1) }
.fill-orange { fill: #E28940 }
.fill-yellow { fill: #FFFBE5 }
.fill-yellow2 { fill: #F5A623 }
.fill-orange-dark { fill: #C26822 }
.fill-green { fill: #42AE5E }
.fill-green2 { fill: #00dc69 }
.fill-green-dark { fill: #2C9848 }
.fill-red { fill: #cc0000 }
.fill-red2 { fill: #F5A623 }
.fill-red-lightest { fill: rgba(204, 0, 0, 0.1) }
.fill-blue { fill: #366CD9 }
.fill-blue2 { fill: #0076FF }
.fill-active-blue { fill: #F6F7FF }
.fill-active-dark-blue { fill: #E2E4F6 }
.fill-bg-blue { fill: #e3e6ff }
.fill-active-blue-border { fill: #D0D4F2 }
.fill-pink { fill: #ffb9b9 }
.fill-light-blue-bg { fill: #E5F7F7 }
.fill-white { fill: #fff }
.fill-borderColor-default { fill: #DDDDDD }
.fill-borderColor-gray-light-shade { fill: #EEEEEE }
.fill-borderColor-primary { fill: #3490dc }
.fill-borderColor-transparent { fill: transparent }
.fill-transparent { fill: transparent }
.fill-cyan { fill: #EBF4F5 }
.fill-figmaColors-accent-secondary { fill: rgba(62, 170, 175, 1) }
.fill-figmaColors-main { fill: rgba(57, 78, 255, 1) }
.fill-figmaColors-primary-outlined-hover-background { fill: rgba(62, 170, 175, 0.08) }
.fill-figmaColors-primary-outlined-resting-border { fill: rgba(62, 170, 175, 0.5) }
.fill-figmaColors-secondary-outlined-hover-background { fill: rgba(63, 81, 181, 0.08) }
.fill-figmaColors-secondary-outlined-resting-border { fill: rgba(63, 81, 181, 0.5) }
.fill-figmaColors-text-disabled { fill: rgba(0,0,0, 0.38) }
.fill-figmaColors-text-primary { fill: rgba(0,0,0, 0.87) }
.fill-figmaColors-outlined-border { fill: rgba(0,0,0, 0.23) }
.fill-figmaColors-divider { fill: rgba(0, 0, 0, 0.12) }
.hover-fill-main:hover svg { fill: #394EFF }
.hover-fill-gray-light-shade:hover svg { fill: #EEEEEE }
.hover-fill-gray-lightest:hover svg { fill: #f6f6f6 }
.hover-fill-gray-lighter:hover svg { fill: #f1f1f1 }
.hover-fill-gray-light:hover svg { fill: #ddd }
.hover-fill-gray-bg:hover svg { fill: #CCC }
.hover-fill-gray-medium:hover svg { fill: #888 }
.hover-fill-gray-dark:hover svg { fill: #666 }
.hover-fill-gray-darkest:hover svg { fill: #333 }
.hover-fill-teal:hover svg { fill: #394EFF }
.hover-fill-teal-dark:hover svg { fill: #2331A8 }
.hover-fill-teal-light:hover svg { fill: rgba(57, 78, 255, 0.1) }
.hover-fill-tealx:hover svg { fill: #3EAAAF }
.hover-fill-tealx-light:hover svg { fill: #E2F0EE }
.hover-fill-tealx-light-border:hover svg { fill: #C6DCDA }
.hover-fill-tealx-lightest:hover svg { fill: rgba(62, 170, 175, 0.1) }
.hover-fill-orange:hover svg { fill: #E28940 }
.hover-fill-yellow:hover svg { fill: #FFFBE5 }
.hover-fill-yellow2:hover svg { fill: #F5A623 }
.hover-fill-orange-dark:hover svg { fill: #C26822 }
.hover-fill-green:hover svg { fill: #42AE5E }
.hover-fill-green2:hover svg { fill: #00dc69 }
.hover-fill-green-dark:hover svg { fill: #2C9848 }
.hover-fill-red:hover svg { fill: #cc0000 }
.hover-fill-red2:hover svg { fill: #F5A623 }
.hover-fill-red-lightest:hover svg { fill: rgba(204, 0, 0, 0.1) }
.hover-fill-blue:hover svg { fill: #366CD9 }
.hover-fill-blue2:hover svg { fill: #0076FF }
.hover-fill-active-blue:hover svg { fill: #F6F7FF }
.hover-fill-active-dark-blue:hover svg { fill: #E2E4F6 }
.hover-fill-bg-blue:hover svg { fill: #e3e6ff }
.hover-fill-active-blue-border:hover svg { fill: #D0D4F2 }
.hover-fill-pink:hover svg { fill: #ffb9b9 }
.hover-fill-light-blue-bg:hover svg { fill: #E5F7F7 }
.hover-fill-white:hover svg { fill: #fff }
.hover-fill-borderColor-default:hover svg { fill: #DDDDDD }
.hover-fill-borderColor-gray-light-shade:hover svg { fill: #EEEEEE }
.hover-fill-borderColor-primary:hover svg { fill: #3490dc }
.hover-fill-borderColor-transparent:hover svg { fill: transparent }
.hover-fill-transparent:hover svg { fill: transparent }
.hover-fill-cyan:hover svg { fill: #EBF4F5 }
.hover-fill-figmaColors-accent-secondary:hover svg { fill: rgba(62, 170, 175, 1) }
.hover-fill-figmaColors-main:hover svg { fill: rgba(57, 78, 255, 1) }
.hover-fill-figmaColors-primary-outlined-hover-background:hover svg { fill: rgba(62, 170, 175, 0.08) }
.hover-fill-figmaColors-primary-outlined-resting-border:hover svg { fill: rgba(62, 170, 175, 0.5) }
.hover-fill-figmaColors-secondary-outlined-hover-background:hover svg { fill: rgba(63, 81, 181, 0.08) }
.hover-fill-figmaColors-secondary-outlined-resting-border:hover svg { fill: rgba(63, 81, 181, 0.5) }
.hover-fill-figmaColors-text-disabled:hover svg { fill: rgba(0,0,0, 0.38) }
.hover-fill-figmaColors-text-primary:hover svg { fill: rgba(0,0,0, 0.87) }
.hover-fill-figmaColors-outlined-border:hover svg { fill: rgba(0,0,0, 0.23) }
.hover-fill-figmaColors-divider:hover svg { fill: rgba(0, 0, 0, 0.12) }

/* color */
.color-main { color: #394EFF }
.color-gray-light-shade { color: #EEEEEE }
.color-gray-lightest { color: #f6f6f6 }
.color-gray-lighter { color: #f1f1f1 }
.color-gray-light { color: #ddd }
.color-gray-bg { color: #CCC }
.color-gray-medium { color: #888 }
.color-gray-dark { color: #666 }
.color-gray-darkest { color: #333 }
.color-teal { color: #394EFF }
.color-teal-dark { color: #2331A8 }
.color-teal-light { color: rgba(57, 78, 255, 0.1) }
.color-tealx { color: #3EAAAF }
.color-tealx-light { color: #E2F0EE }
.color-tealx-light-border { color: #C6DCDA }
.color-tealx-lightest { color: rgba(62, 170, 175, 0.1) }
.color-orange { color: #E28940 }
.color-yellow { color: #FFFBE5 }
.color-yellow2 { color: #F5A623 }
.color-orange-dark { color: #C26822 }
.color-green { color: #42AE5E }
.color-green2 { color: #00dc69 }
.color-green-dark { color: #2C9848 }
.color-red { color: #cc0000 }
.color-red2 { color: #F5A623 }
.color-red-lightest { color: rgba(204, 0, 0, 0.1) }
.color-blue { color: #366CD9 }
.color-blue2 { color: #0076FF }
.color-active-blue { color: #F6F7FF }
.color-active-dark-blue { color: #E2E4F6 }
.color-bg-blue { color: #e3e6ff }
.color-active-blue-border { color: #D0D4F2 }
.color-pink { color: #ffb9b9 }
.color-light-blue-bg { color: #E5F7F7 }
.color-white { color: #fff }
.color-borderColor-default { color: #DDDDDD }
.color-borderColor-gray-light-shade { color: #EEEEEE }
.color-borderColor-primary { color: #3490dc }
.color-borderColor-transparent { color: transparent }
.color-transparent { color: transparent }
.color-cyan { color: #EBF4F5 }
.color-figmaColors-accent-secondary { color: rgba(62, 170, 175, 1) }
.color-figmaColors-main { color: rgba(57, 78, 255, 1) }
.color-figmaColors-primary-outlined-hover-background { color: rgba(62, 170, 175, 0.08) }
.color-figmaColors-primary-outlined-resting-border { color: rgba(62, 170, 175, 0.5) }
.color-figmaColors-secondary-outlined-hover-background { color: rgba(63, 81, 181, 0.08) }
.color-figmaColors-secondary-outlined-resting-border { color: rgba(63, 81, 181, 0.5) }
.color-figmaColors-text-disabled { color: rgba(0,0,0, 0.38) }
.color-figmaColors-text-primary { color: rgba(0,0,0, 0.87) }
.color-figmaColors-outlined-border { color: rgba(0,0,0, 0.23) }
.color-figmaColors-divider { color: rgba(0, 0, 0, 0.12) }

/* hover color */
.hover-main:hover { color: #394EFF }
.hover-gray-light-shade:hover { color: #EEEEEE }
.hover-gray-lightest:hover { color: #f6f6f6 }
.hover-gray-lighter:hover { color: #f1f1f1 }
.hover-gray-light:hover { color: #ddd }
.hover-gray-bg:hover { color: #CCC }
.hover-gray-medium:hover { color: #888 }
.hover-gray-dark:hover { color: #666 }
.hover-gray-darkest:hover { color: #333 }
.hover-teal:hover { color: #394EFF }
.hover-teal-dark:hover { color: #2331A8 }
.hover-teal-light:hover { color: rgba(57, 78, 255, 0.1) }
.hover-tealx:hover { color: #3EAAAF }
.hover-tealx-light:hover { color: #E2F0EE }
.hover-tealx-light-border:hover { color: #C6DCDA }
.hover-tealx-lightest:hover { color: rgba(62, 170, 175, 0.1) }
.hover-orange:hover { color: #E28940 }
.hover-yellow:hover { color: #FFFBE5 }
.hover-yellow2:hover { color: #F5A623 }
.hover-orange-dark:hover { color: #C26822 }
.hover-green:hover { color: #42AE5E }
.hover-green2:hover { color: #00dc69 }
.hover-green-dark:hover { color: #2C9848 }
.hover-red:hover { color: #cc0000 }
.hover-red2:hover { color: #F5A623 }
.hover-red-lightest:hover { color: rgba(204, 0, 0, 0.1) }
.hover-blue:hover { color: #366CD9 }
.hover-blue2:hover { color: #0076FF }
.hover-active-blue:hover { color: #F6F7FF }
.hover-active-dark-blue:hover { color: #E2E4F6 }
.hover-bg-blue:hover { color: #e3e6ff }
.hover-active-blue-border:hover { color: #D0D4F2 }
.hover-pink:hover { color: #ffb9b9 }
.hover-light-blue-bg:hover { color: #E5F7F7 }
.hover-white:hover { color: #fff }
.hover-borderColor-default:hover { color: #DDDDDD }
.hover-borderColor-gray-light-shade:hover { color: #EEEEEE }
.hover-borderColor-primary:hover { color: #3490dc }
.hover-borderColor-transparent:hover { color: transparent }
.hover-transparent:hover { color: transparent }
.hover-cyan:hover { color: #EBF4F5 }
.hover-figmaColors-accent-secondary:hover { color: rgba(62, 170, 175, 1) }
.hover-figmaColors-main:hover { color: rgba(57, 78, 255, 1) }
.hover-figmaColors-primary-outlined-hover-background:hover { color: rgba(62, 170, 175, 0.08) }
.hover-figmaColors-primary-outlined-resting-border:hover { color: rgba(62, 170, 175, 0.5) }
.hover-figmaColors-secondary-outlined-hover-background:hover { color: rgba(63, 81, 181, 0.08) }
.hover-figmaColors-secondary-outlined-resting-border:hover { color: rgba(63, 81, 181, 0.5) }
.hover-figmaColors-text-disabled:hover { color: rgba(0,0,0, 0.38) }
.hover-figmaColors-text-primary:hover { color: rgba(0,0,0, 0.87) }
.hover-figmaColors-outlined-border:hover { color: rgba(0,0,0, 0.23) }
.hover-figmaColors-divider:hover { color: rgba(0, 0, 0, 0.12) }

.border-main { border-color: #394EFF }
.border-gray-light-shade { border-color: #EEEEEE }
.border-gray-lightest { border-color: #f6f6f6 }
.border-gray-lighter { border-color: #f1f1f1 }
.border-gray-light { border-color: #ddd }
.border-gray-bg { border-color: #CCC }
.border-gray-medium { border-color: #888 }
.border-gray-dark { border-color: #666 }
.border-gray-darkest { border-color: #333 }
.border-teal { border-color: #394EFF }
.border-teal-dark { border-color: #2331A8 }
.border-teal-light { border-color: rgba(57, 78, 255, 0.1) }
.border-tealx { border-color: #3EAAAF }
.border-tealx-light { border-color: #E2F0EE }
.border-tealx-light-border { border-color: #C6DCDA }
.border-tealx-lightest { border-color: rgba(62, 170, 175, 0.1) }
.border-orange { border-color: #E28940 }
.border-yellow { border-color: #FFFBE5 }
.border-yellow2 { border-color: #F5A623 }
.border-orange-dark { border-color: #C26822 }
.border-green { border-color: #42AE5E }
.border-green2 { border-color: #00dc69 }
.border-green-dark { border-color: #2C9848 }
.border-red { border-color: #cc0000 }
.border-red2 { border-color: #F5A623 }
.border-red-lightest { border-color: rgba(204, 0, 0, 0.1) }
.border-blue { border-color: #366CD9 }
.border-blue2 { border-color: #0076FF }
.border-active-blue { border-color: #F6F7FF }
.border-active-dark-blue { border-color: #E2E4F6 }
.border-bg-blue { border-color: #e3e6ff }
.border-active-blue-border { border-color: #D0D4F2 }
.border-pink { border-color: #ffb9b9 }
.border-light-blue-bg { border-color: #E5F7F7 }
.border-white { border-color: #fff }
.border-borderColor-default { border-color: #DDDDDD }
.border-borderColor-gray-light-shade { border-color: #EEEEEE }
.border-borderColor-primary { border-color: #3490dc }
.border-borderColor-transparent { border-color: transparent }
.border-transparent { border-color: transparent }
.border-cyan { border-color: #EBF4F5 }
.border-figmaColors-accent-secondary { border-color: rgba(62, 170, 175, 1) }
.border-figmaColors-main { border-color: rgba(57, 78, 255, 1) }
.border-figmaColors-primary-outlined-hover-background { border-color: rgba(62, 170, 175, 0.08) }
.border-figmaColors-primary-outlined-resting-border { border-color: rgba(62, 170, 175, 0.5) }
.border-figmaColors-secondary-outlined-hover-background { border-color: rgba(63, 81, 181, 0.08) }
.border-figmaColors-secondary-outlined-resting-border { border-color: rgba(63, 81, 181, 0.5) }
.border-figmaColors-text-disabled { border-color: rgba(0,0,0, 0.38) }
.border-figmaColors-text-primary { border-color: rgba(0,0,0, 0.87) }
.border-figmaColors-outlined-border { border-color: rgba(0,0,0, 0.23) }
.border-figmaColors-divider { border-color: rgba(0, 0, 0, 0.12) }