@font-face {
  font-family: 'BeVietnamPro-ExtraBold';
  src: url('../fonts/be-vietnam-pro/BeVietnamPro-ExtraBold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BeVietnamPro-Bold';
  src: url('../fonts/be-vietnam-pro/BeVietnamPro-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BeVietnamPro-SemiBold';
  src: url('../fonts/be-vietnam-pro/BeVietnamPro-SemiBold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BeVietnamPro-Medium';
  src: url('../fonts/be-vietnam-pro/BeVietnamPro-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BeVietnamPro-Regular';
  src: url('../fonts/be-vietnam-pro/BeVietnamPro-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto/Roboto-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'RobotoMono-Regular';
  src: url('../fonts/roboto-mono/RobotoMono-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Typography presets from onevs-ui */

.text-header-3xlarge {
  font-family: 'BeVietnamPro-SemiBold', sans-serif;
  font-size: 24px;
  line-height: 36px;
}

.text-header-2xlarge {
  font-family: 'BeVietnamPro-SemiBold', sans-serif;
  font-size: 20px;
  line-height: 34px;
}

.text-header-xlarge {
  font-family: 'BeVietnamPro-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 32px;
}

.text-header-xlarge-strong {
  font-family: 'BeVietnamPro-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 32px;
}

.text-header-large {
  font-family: 'BeVietnamPro-SemiBold', sans-serif;
  font-size: 16px;
  line-height: 28px;
}

.text-header-large-strong {
  font-family: 'BeVietnamPro-Bold', sans-serif;
  font-size: 16px;
  line-height: 28px;
}

.text-header-medium {
  font-family: 'BeVietnamPro-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 24px;
}

.text-header-small {
  font-family: 'BeVietnamPro-SemiBold', sans-serif;
  font-size: 12px;
  line-height: 20px;
}

.text-header-xsmall {
  font-family: 'BeVietnamPro-ExtraBold', sans-serif;
  font-size: 10px;
  line-height: 16px;
}

.text-body-large {
  font-family: 'BeVietnamPro-Regular', sans-serif;
  font-size: 16px;
  line-height: 28px;
}

.text-body-large-strong {
  font-family: 'BeVietnamPro-Medium', sans-serif;
  font-size: 16px;
  line-height: 28px;
}

.text-body-medium {
  font-family: 'BeVietnamPro-Regular', sans-serif;
  font-size: 14px;
  line-height: 24px;
}

.text-body-medium::placeholder {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  opacity: 1;
}

.text-body-medium-strong {
  font-family: 'BeVietnamPro-Medium', sans-serif;
  font-size: 14px;
  line-height: 24px;
}

.text-body-small {
  font-family: 'BeVietnamPro-Regular', sans-serif;
  font-size: 12px;
  line-height: 20px;
}

.text-body-small-strong {
  font-family: 'BeVietnamPro-Medium', sans-serif;
  font-size: 12px;
  line-height: 20px;
}

.text-body-xsmall-strong {
  font-family: 'BeVietnamPro-Medium', sans-serif;
  font-size: 10px;
  line-height: 18px;
  letter-spacing: 0.2px;
}

.text-mono-medium {
  font-family: 'RobotoMono-Regular', monospace;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 2.1px;
}

/*
 * Typography for PHP form fields and buttons on first-screen pages.
 */
.fs-white-card .form-control {
  font-family: 'BeVietnamPro-Regular', sans-serif;
  font-size: 14px;
  line-height: 24px;
}

.fs-white-card .form-control::placeholder {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  opacity: 1;
}

.fs-white-card .btn-first-screen {
  font-family: 'BeVietnamPro-Medium', sans-serif;
  font-size: 14px;
  line-height: 24px;
}