@charset "UTF-8";
@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../css/fonts/NotoSansTC-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../css/fonts/NotoSansTC-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../css/fonts/NotoSansTC-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../css/fonts/NotoSansTC-Bold.woff2") format("woff2");
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

ol, ul {
  list-style: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}

audio, canvas, video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden] {
  display: none;
}

a {
  text-decoration: none;
  color: initial;
}
a:focus {
  text-decoration: none;
  outline: 0;
  color: initial;
}
a:active, a:hover {
  outline: 0;
  text-decoration: none;
  color: initial;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
}

mark {
  background: #ff0;
  color: #000;
}

code, kbd, pre, samp {
  font-family: monospace, serif;
  font-size: 1em;
}

pre {
  white-space: pre-wrap;
}

q {
  quotes: "“" "”" "‘" "’";
}

small {
  font-size: 80%;
}

sub {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  max-width: 100%;
  height: auto;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

button, input {
  line-height: normal;
}

button, select {
  text-transform: none;
}

button, html input[type=button] {
  -webkit-appearance: button;
  cursor: pointer;
}

input[type=reset], input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled], html input[disabled] {
  cursor: default;
}

input[type=checkbox], input[type=radio] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}
input[type=search] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.clearfix {
  zoom: 1;
}
.clearfix:before {
  content: "";
  display: table;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

html {
  font-family: sans-serif;
  line-height: 1;
  font-size: 16px;
}

a {
  text-decoration: none;
  color: black;
}

input[type=text],
input[type=submit],
input[type=search] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.no-mg {
  margin: 0 !important;
}

.mg-4 {
  margin: 0.25rem !important;
}

.mg-8 {
  margin: 0.5rem !important;
}

.mg-12 {
  margin: 0.75rem !important;
}

.mg-16 {
  margin: 1rem !important;
}

.mg-20 {
  margin: 1.25rem !important;
}

.mg-24 {
  margin: 1.5rem !important;
}

.mg-28 {
  margin: 1.75rem !important;
}

.mg-32 {
  margin: 2rem !important;
}

.mg-36 {
  margin: 2.25rem !important;
}

.mg-t-4 {
  margin-top: 0.25rem !important;
}

.mg-t-8 {
  margin-top: 0.5rem !important;
}

.mg-t-12 {
  margin-top: 0.75rem !important;
}

.mg-t-16 {
  margin-top: 1rem !important;
}

.mg-t-20 {
  margin-top: 1.25rem !important;
}

.mg-t-24 {
  margin-top: 1.5rem !important;
}

.mg-t-28 {
  margin-top: 1.75rem !important;
}

.mg-t-32 {
  margin-top: 2rem !important;
}

.mg-t-36 {
  margin-top: 2.25rem !important;
}

.mg-t-42 {
  margin-top: 2.625rem !important;
}

.mg-t-48 {
  margin-top: 3rem !important;
}

.mg-b-4 {
  margin-bottom: 0.25rem !important;
}

.mg-b-8 {
  margin-bottom: 0.5rem !important;
}

.mg-b-12 {
  margin-bottom: 0.75rem !important;
}

.mg-b-16 {
  margin-bottom: 1rem !important;
}

.mg-b-20 {
  margin-bottom: 1.25rem !important;
}

.mg-b-24 {
  margin-bottom: 1.5rem !important;
}

.mg-b-28 {
  margin-bottom: 1.75rem !important;
}

.mg-b-32 {
  margin-bottom: 2rem !important;
}

.mg-b-36 {
  margin-bottom: 2.25rem !important;
}

.mg-l-4 {
  margin-left: 0.25rem !important;
}

.mg-l-8 {
  margin-left: 0.5rem !important;
}

.mg-l-12 {
  margin-left: 0.75rem !important;
}

.mg-l-16 {
  margin-left: 1rem !important;
}

.mg-l-20 {
  margin-left: 1.25rem !important;
}

.mg-l-24 {
  margin-left: 1.5rem !important;
}

.mg-l-28 {
  margin-left: 1.75rem !important;
}

.mg-l-32 {
  margin-left: 2rem !important;
}

.mg-l-36 {
  margin-left: 2.25rem !important;
}

.mg-r-4 {
  margin-right: 0.25rem !important;
}

.mg-r-8 {
  margin-right: 0.5rem !important;
}

.mg-r-12 {
  margin-right: 0.75rem !important;
}

.mg-r-16 {
  margin-right: 1rem !important;
}

.mg-r-20 {
  margin-right: 1.25rem !important;
}

.mg-r-24 {
  margin-right: 1.5rem !important;
}

.mg-r-28 {
  margin-right: 1.75rem !important;
}

.mg-r-32 {
  margin-right: 2rem !important;
}

.mg-r-36 {
  margin-right: 2.25rem !important;
}

.no-pd {
  padding: 0 !important;
}

.pd-4 {
  padding: 0.25rem !important;
}

.pd-8 {
  padding: 0.5rem !important;
}

.pd-12 {
  padding: 0.75rem !important;
}

.pd-16 {
  padding: 1rem !important;
}

.pd-20 {
  padding: 1.25rem !important;
}

.pd-24 {
  padding: 1.5rem !important;
}

.pd-28 {
  padding: 1.75rem !important;
}

.pd-32 {
  padding: 2rem !important;
}

.pd-36 {
  padding: 2.25rem !important;
}

.pd-t-4 {
  padding-top: 0.25rem !important;
}

.pd-t-8 {
  padding-top: 0.5rem !important;
}

.pd-t-12 {
  padding-top: 0.75rem !important;
}

.pd-t-16 {
  padding-top: 1rem !important;
}

.pd-t-20 {
  padding-top: 1.25rem !important;
}

.pd-t-24 {
  padding-top: 1.5rem !important;
}

.pd-t-28 {
  padding-top: 1.75rem !important;
}

.pd-t-32 {
  padding-top: 2rem !important;
}

.pd-t-36 {
  padding-top: 2.25rem !important;
}

.pd-t-42 {
  padding-top: 2.625rem !important;
}

.pd-t-48 {
  padding-top: 3rem !important;
}

.pd-b-4 {
  padding-bottom: 0.25rem !important;
}

.pd-b-8 {
  padding-bottom: 0.5rem !important;
}

.pd-b-12 {
  padding-bottom: 0.75rem !important;
}

.pd-b-16 {
  padding-bottom: 1rem !important;
}

.pd-b-20 {
  padding-bottom: 1.25rem !important;
}

.pd-b-24 {
  padding-bottom: 1.5rem !important;
}

.pd-b-28 {
  padding-bottom: 1.75rem !important;
}

.pd-b-32 {
  padding-bottom: 2rem !important;
}

.pd-b-36 {
  padding-bottom: 2.25rem !important;
}

.pd-l-4 {
  padding-left: 0.25rem !important;
}

.pd-l-8 {
  padding-left: 0.5rem !important;
}

.pd-l-12 {
  padding-left: 0.75rem !important;
}

.pd-l-16 {
  padding-left: 1rem !important;
}

.pd-l-20 {
  padding-left: 1.25rem !important;
}

.pd-l-24 {
  padding-left: 1.5rem !important;
}

.pd-l-28 {
  padding-left: 1.75rem !important;
}

.pd-l-32 {
  padding-left: 2rem !important;
}

.pd-l-36 {
  padding-left: 2.25rem !important;
}

.pd-r-4 {
  padding-right: 0.25rem !important;
}

.pd-r-8 {
  padding-right: 0.5rem !important;
}

.pd-r-12 {
  padding-right: 0.75rem !important;
}

.pd-r-16 {
  padding-right: 1rem !important;
}

.pd-r-20 {
  padding-right: 1.25rem !important;
}

.pd-r-24 {
  padding-right: 1.5rem !important;
}

.pd-r-28 {
  padding-right: 1.75rem !important;
}

.pd-r-32 {
  padding-right: 2rem !important;
}

.pd-r-36 {
  padding-right: 2.25rem !important;
}

.iconText {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
}
.iconText > i {
  margin-right: 0.375rem;
}

.pos-r {
  position: relative;
}

.pos-a {
  position: absolute;
}

.fl-l {
  float: left !important;
}

.fl-r {
  float: right !important;
}

.tal {
  text-align: left !important;
}

.tac {
  text-align: center !important;
}

.tar {
  text-align: right !important;
}

.fw-l {
  font-weight: lighter !important;
}

.fw-b {
  font-weight: bold !important;
}

.td-underline {
  text-decoration: underline !important;
}

.d-block {
  display: block;
}

.d-iblock {
  display: inline-block;
}

.cursor-p {
  cursor: pointer;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.flex-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

.flex-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.flex-right {
  margin-left: auto;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

.flex-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.al-self-start {
  -ms-flex-item-align: start;
      align-self: flex-start;
}

.al-self-center {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.full-h {
  min-height: 100vh;
  min-height: 100svh;
}

.full-h-has-ac-bar {
  min-height: calc(100vh - 3.75rem - env(safe-area-inset-top));
}

.full-h-has-ac-bar.has-bottom-button {
  min-height: calc(100vh - 3.75rem - 4.75rem - env(safe-area-inset-top)) !important;
}

.d-grid-col-2 {
  margin: 0 -0.5rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
  grid-template-columns: 50% 50%;
}

.d-grid-col-3 {
  margin: 0 -0.5rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 33.333% 33.333% 33.333%;
  grid-template-columns: 33.333% 33.333% 33.333%;
}
.d-grid-col-3 > * {
  margin: 0.25rem;
}

.d-grid-col-4 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 25% 24% 25% 26%;
  grid-template-columns: 25% 24% 25% 26%;
}

.d-grid-col-6 {
  margin: 0 -0.5rem !important;
  display: -ms-grid !important;
  display: grid !important;
  -ms-grid-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%;
  grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%;
}
.d-grid-col-6 > * {
  margin: 0.25rem !important;
}

.hidden {
  display: none;
}

.text-ignore-single {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.no-border {
  border: 0 !important;
}

.g-1 {
  gap: 0.25rem;
}

.g-2 {
  gap: 0.5rem;
}

.g-3 {
  gap: 0.75rem;
}

.g-4 {
  gap: 1rem;
}

.r-1 {
  border-radius: 0.25rem;
}

.r-2 {
  border-radius: 0.5rem;
}

.r-3 {
  border-radius: 0.75rem;
}

.r-4 {
  border-radius: 1rem;
}

html {
  font-size: 1rem;
}

:root, body {
  font-family: "Noto Sans TC", -apple-system, system-ui, "SF Pro Text", "Segoe UI", "PingFang TC", "Roboto", "Microsoft JhengHei", sans-serif;
}

h1 {
  font-size: 1.75rem;
  line-height: 2.5rem;
}

h2 {
  font-size: 1.625rem;
  line-height: 2.375rem;
}

h3 {
  font-size: 1.5rem;
  line-height: 2.25rem;
}

h4 {
  font-size: 1.375rem;
  line-height: 2.125rem;
}

h5 {
  font-size: 1.25rem;
  line-height: 2rem;
}

h6 {
  font-size: 1.125rem;
  line-height: 1.625rem;
}

p {
  font-size: 0.9375rem;
  line-height: 1.4375rem;
}

i {
  font-size: 0.8125rem;
  line-height: 100%;
  font-style: normal;
}

@media (min-width: 768px) {
  h1 {
    font-size: 2.475rem;
    line-height: 2.75rem;
  }
  h2 {
    font-size: 1.7875rem;
    line-height: 2.6125rem;
  }
  h3 {
    font-size: 1.65rem;
    line-height: 2.475rem;
  }
  h4 {
    font-size: 1.5125rem;
    line-height: 2.3375rem;
  }
  h5 {
    font-size: 1.375rem;
    line-height: 2.2rem;
  }
  h6 {
    font-size: 1.2375rem;
    line-height: 2.0625rem;
  }
  p {
    font-size: 1.03125rem;
    line-height: 1.85625rem;
  }
}
@media (min-width: 1200px) {
  h1 {
    font-size: 2.5rem;
    line-height: 3.25rem;
  }
  h2 {
    font-size: 1.95rem;
    line-height: 2.85rem;
  }
  h3 {
    font-size: 1.8rem;
    line-height: 2.7rem;
  }
  h4 {
    font-size: 1.65rem;
    line-height: 2.55rem;
  }
  h5 {
    font-size: 1.5rem;
    line-height: 2.4rem;
  }
  h6 {
    font-size: 1.35rem;
    line-height: 2.25rem;
  }
  p {
    font-size: 1.125rem;
    line-height: 2.025rem;
  }
}
.fw-r {
  font-weight: 400;
}

.fw-md {
  font-weight: 500;
}

.fw-sb {
  font-weight: 600;
}

.fw-b {
  font-weight: 700;
}

.text-primary {
  color: #C8102E !important;
}

.text-secondary {
  color: #2D3648 !important;
}

.text-gray-100 {
  color: #F7F9FC !important;
}

.text-gray-200 {
  color: #EDF0F7 !important;
}

.text-gray-300 {
  color: #E2E7F0 !important;
}

.text-gray-400 {
  color: #CBD2E0 !important;
}

.text-gray-500 {
  color: #A0ABC0 !important;
}

.text-gray-600 {
  color: #717D96 !important;
}

.text-gray-700 {
  color: #4A5468 !important;
}

.text-gray-800 {
  color: #2D3648 !important;
}

.text-gray-900 {
  color: #1A202C !important;
}

.text-green {
  color: #00A63E !important;
}

.text-blue {
  color: #318DC2 !important;
}

.text-brown {
  color: #D08700 !important;
}

.bg-white {
  background-color: #FFFFFF;
}

.bg-primary {
  background-color: #C8102E;
}

.bg-secondary {
  background-color: #2D3648;
}

.bg-gray-100 {
  background-color: #F7F9FC;
}

.bg-gray-200 {
  background-color: #EDF0F7;
}

.bg-gray-300 {
  background-color: #E2E7F0;
}

.bg-gray-400 {
  background-color: #CBD2E0;
}

.bg-gray-500 {
  background-color: #A0ABC0;
}

.bg-gray-600 {
  background-color: #717D96;
}

.bg-gray-700 {
  background-color: #4A5468;
}

.bg-gray-800 {
  background-color: #2D3648;
}

.bg-gray-900 {
  background-color: #1A202C;
}

.bg-red {
  background-color: #de1133;
}

.bg-green {
  background-color: #00A63E;
}

.bg-brown {
  background-color: #A37800;
}

.bg-yellow {
  background-color: #F0B100;
}

.bg-blue {
  background-color: #318DC2;
}

.bg-purple {
  background-color: #9810FA;
}

.bg-orange {
  background-color: #F54900;
}

.bg-blue-light {
  background-color: #e0f4fe;
}

.bg-green-light {
  background-color: #D9FFE7;
}

.bg-brown-light {
  background-color: #FEF9C2;
}

.bg-purple-light {
  background-color: #F3E8FF;
}

.bg-orange-light {
  background-color: #FFEDD4;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeInTop {
  20% {
    opacity: 0;
    -webkit-transform: translate(0, 6px);
            transform: translate(0, 6px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes fadeInTop {
  20% {
    opacity: 0;
    -webkit-transform: translate(0, 6px);
            transform: translate(0, 6px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@-webkit-keyframes moveTop {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes moveTop {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
.i-arrow-down {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-chevron-down.svg");
  mask-image: url("../images/icons/icon-chevron-down.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-arrow-right {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-chevron-right.svg");
  mask-image: url("../images/icons/icon-chevron-right.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-arrow-left {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-chevron-left.svg");
  mask-image: url("../images/icons/icon-chevron-left.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-close {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-x.svg");
  mask-image: url("../images/icons/icon-x.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-search {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-search.svg");
  mask-image: url("../images/icons/icon-search.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-error {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-alert-circle.svg");
  mask-image: url("../images/icons/icon-alert-circle.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-menu {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-menu.svg");
  mask-image: url("../images/icons/icon-menu.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-download {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-download.svg");
  mask-image: url("../images/icons/icon-download.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-eye {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-eye.svg");
  mask-image: url("../images/icons/icon-eye.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-paperclip {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-paperclip.svg");
  mask-image: url("../images/icons/icon-paperclip.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-link {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/link.svg");
  mask-image: url("../images/icons/link.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-clock {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-clock.svg");
  mask-image: url("../images/icons/icon-clock.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-check-circle {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-check-circle.svg");
  mask-image: url("../images/icons/icon-check-circle.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-x-circle {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-x-circle.svg");
  mask-image: url("../images/icons/icon-x-circle.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-award {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-award.svg");
  mask-image: url("../images/icons/icon-award.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-lock {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-lock.svg");
  mask-image: url("../images/icons/icon-lock.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-log-out {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-log-out.svg");
  mask-image: url("../images/icons/icon-log-out.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-star {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-star.svg");
  mask-image: url("../images/icons/icon-star.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-gift {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-gift.svg");
  mask-image: url("../images/icons/icon-gift.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-calendar {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-calendar.svg");
  mask-image: url("../images/icons/icon-calendar.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-user {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-user.svg");
  mask-image: url("../images/icons/icon-user.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-file-text {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-file-text.svg");
  mask-image: url("../images/icons/icon-file-text.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-users {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-users.svg");
  mask-image: url("../images/icons/icon-users.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-exam {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-exam.svg");
  mask-image: url("../images/icons/icon-exam.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-award {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-award.svg");
  mask-image: url("../images/icons/icon-award.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-edit {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-edit-2.svg");
  mask-image: url("../images/icons/icon-edit-2.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-dashboard {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/sidemenu/dashboard.svg");
  mask-image: url("../images/icons/sidemenu/dashboard.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-news {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/sidemenu/news.svg");
  mask-image: url("../images/icons/sidemenu/news.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-course {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/sidemenu/course.svg");
  mask-image: url("../images/icons/sidemenu/course.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-beauty {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/sidemenu/beauty.svg");
  mask-image: url("../images/icons/sidemenu/beauty.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-product {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/sidemenu/product.svg");
  mask-image: url("../images/icons/sidemenu/product.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-exam {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/sidemenu/exam.svg");
  mask-image: url("../images/icons/sidemenu/exam.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-external-course {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/sidemenu/external_course.svg");
  mask-image: url("../images/icons/sidemenu/external_course.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-shop {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/sidemenu/shop.svg");
  mask-image: url("../images/icons/sidemenu/shop.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-failed {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/failed.svg");
  mask-image: url("../images/icons/failed.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-passed {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/passed.svg");
  mask-image: url("../images/icons/passed.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-grid {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/grid.svg");
  mask-image: url("../images/icons/grid.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-list {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/list.svg");
  mask-image: url("../images/icons/list.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-play {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-play.svg");
  mask-image: url("../images/icons/icon-play.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-play-circle {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-play-circle.svg");
  mask-image: url("../images/icons/icon-play-circle.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-volume-2 {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-volume-2.svg");
  mask-image: url("../images/icons/icon-volume-2.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-maximize {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-maximize-2.svg");
  mask-image: url("../images/icons/icon-maximize-2.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-play {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/play.svg");
  mask-image: url("../images/icons/play.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-spoint {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/spoint.svg");
  mask-image: url("../images/icons/spoint.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-exchange-point {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/exchange_point.svg");
  mask-image: url("../images/icons/exchange_point.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-shop {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/shop.svg");
  mask-image: url("../images/icons/shop.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-time {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/time.svg");
  mask-image: url("../images/icons/time.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.i-checked-color {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/icons/checked.svg");
  background-size: 1.5rem 1.5rem;
}

.i-exam-failed-color {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/icons/exam_failed.svg");
  background-size: 1.5rem 1.5rem;
}

.i-exam-passed-color {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/icons/exam_passed.svg");
  background-size: 1.5rem 1.5rem;
}

.i-role {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/icons/role.svg");
  background-size: 1.5rem 1.5rem;
}

.i-id {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/icons/id.svg");
  background-size: 1.5rem 1.5rem;
}

.i-12 {
  background-size: 0.75rem 0.75rem;
  -webkit-mask-size: 0.75rem 0.75rem;
  mask-size: 0.75rem 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
}

.i-16 {
  background-size: 1rem 1rem;
  -webkit-mask-size: 1rem 1rem;
  mask-size: 1rem 1rem;
  width: 1rem;
  height: 1rem;
}

.i-20 {
  background-size: 1.25rem 1.25rem;
  -webkit-mask-size: 1.25rem 1.25rem;
  mask-size: 1.25rem 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
}

.i-24 {
  background-size: 1.5rem 1.5rem;
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
}

.i-28 {
  background-size: 1.75rem 1.75rem;
  -webkit-mask-size: 1.75rem 1.75rem;
  mask-size: 1.75rem 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
}

.i-52 {
  background-size: 3.25rem 3.25rem;
  -webkit-mask-size: 3.25rem 3.25rem;
  mask-size: 3.25rem 3.25rem;
  width: 3.25rem;
  height: 3.25rem;
}

.i-64 {
  background-size: 4rem 4rem;
  -webkit-mask-size: 4rem 4rem;
  mask-size: 4rem 4rem;
  width: 4rem;
  height: 4rem;
}

.i-80 {
  background-size: 5rem 5rem;
  -webkit-mask-size: 5rem 5rem;
  mask-size: 5rem 5rem;
  width: 5rem;
  height: 5rem;
}

.i-120 {
  background-size: 7.5rem 7.5rem;
  -webkit-mask-size: 7.5rem 7.5rem;
  mask-size: 7.5rem 7.5rem;
  width: 7.5rem;
  height: 7.5rem;
}

.inner-wrapper {
  background-color: #EDF0F7;
  min-height: 100vh;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2D3648;
  margin: 0;
}
@media (min-width: 1200px) {
  .page-title {
    font-size: 1.75rem;
    line-height: 2.25rem;
    font-weight: 500;
  }
}

.article-detail {
  padding: 1rem;
  background-color: #FFFFFF;
  border-radius: 0.125rem;
  background-clip: padding-box;
}
.article-detail--title {
  margin: 1rem 0 0.75rem;
  font-size: 2rem;
  font-weight: 500;
  line-height: 2.625rem;
  color: #2D3648;
}
.article-detail--date {
  font-size: 0.75rem;
  line-height: 1rem;
  color: #717D96;
  margin-bottom: 0.75rem;
}
.article-detail--tags {
  margin-bottom: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
}
.article-detail--image {
  width: 100%;
  margin-bottom: 1.5rem;
  border-radius: 0.125rem;
  background-clip: padding-box;
  overflow: hidden;
}
.article-detail--image img {
  width: 100%;
  height: auto;
  display: block;
}
.article-detail--content {
  font-size: 1rem;
  line-height: 1.625rem;
  color: #2D3648;
}
.article-detail--content p {
  margin: 0 0 1rem;
}
.article-detail--content h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 1.5rem 0 0.75rem;
}
.article-detail--content h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 1.25rem 0 0.5rem;
}
.article-detail--content ul, .article-detail--content ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}
.article-detail--content ul li, .article-detail--content ol li {
  margin-bottom: 0.5rem;
}
.article-detail--content img {
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
  border-radius: 0.125rem;
  background-clip: padding-box;
}
.article-detail--content a {
  color: #C8102E;
  text-decoration: underline;
}
.article-detail--content a:hover {
  text-decoration: none;
}
.article-detail--video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.article-detail--video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.article-detail--attachments {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #EDF0F7;
}
.article-detail--attachments-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #2D3648;
  margin: 0 0 1rem;
}
.article-detail--attachments-title i {
  background-color: #717D96;
}
.article-detail--attachments-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.75rem;
}
.article-detail--attachment-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  background-clip: padding-box;
  border: 1px solid #E2E7F0;
}
.article-detail--attachment-name {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 0.875rem;
  color: #4A5468;
  word-break: break-word;
}
.article-detail--back-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #EDF0F7;
}
@media (min-width: 768px) {
  .article-detail {
    padding: 2rem 3.5rem;
  }
  .article-detail--title {
    margin-bottom: 1.5rem;
  }
}

.btn {
  display: inline-block;
  border: 1px solid transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: 0;
  cursor: pointer;
  border-radius: 0.125rem;
  background-clip: padding-box;
  font-weight: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.25rem;
  text-decoration: none;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.btn-sm {
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  height: 2.25rem;
}

.btn-md {
  padding: 0.9375rem 1.875rem;
  font-size: 1rem;
  line-height: 1.375rem;
  height: 2.75rem;
}

.btn-primary {
  background-color: #C8102E;
  color: #FFFFFF;
  border-color: #C8102E;
}
.btn-primary:focus, .btn-primary:active {
  outline: 0;
  border: 0;
  background-color: #b00e29;
}
.btn-primary:active:hover, .btn-primary:hover {
  background-color: #b00e29;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  -ms-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.btn-secondary {
  background-color: #2D3648;
  color: #FFFFFF;
  border-color: #2D3648;
}
.btn-secondary:focus, .btn-secondary:active, .btn-secondary:focus:active {
  outline: 0;
  border-color: #2D3648;
  color: #FFFFFF;
  background-color: black;
}
.btn-secondary:active:hover, .btn-secondary:hover {
  background-color: black;
  color: #FFFFFF;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  -ms-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.btn-default {
  background-color: #FFFFFF;
  color: #4A5468;
  border-color: #CBD2E0;
}
.btn-default:focus, .btn-default:active, .btn-default:focus:active {
  outline: 0;
  border-color: #A0ABC0;
  color: #2D3648;
  background-color: #F7F9FC;
}
.btn-default:active:hover, .btn-default:hover {
  background-color: #F7F9FC;
  color: #2D3648;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  -ms-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.btn-bordered {
  color: #4A5468;
  border: 1px solid #A0ABC0;
  border-radius: 0.125rem;
  background-clip: padding-box;
  background-color: transparent;
}
.btn-bordered:focus, .btn-bordered:active, .btn-bordered:focus:active, .btn-bordered:hover {
  outline: 0;
  color: #2D3648;
  background-color: #F7F9FC;
  border-color: #717D96;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.btn-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.375rem;
  width: 100%;
  padding: 0.875rem 1.5rem;
  font-size: 0.9375rem;
  text-decoration: none;
}
.btn-block i {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.btn-back {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  padding: 1.25rem 0;
  font-size: 0.875rem;
  line-height: 100%;
  color: #4A5468;
  text-decoration: none;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}
.btn-back:hover {
  color: #C8102E;
}
.btn-back:hover i {
  background-color: #C8102E;
}

.action-control {
  margin-top: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
}
.action-control > * {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

input::input-placeholder,
textarea::input-placeholder {
  color: #A0ABC0;
  font-weight: 400;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #A0ABC0;
  font-weight: 400;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #A0ABC0;
  font-weight: 400;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #A0ABC0;
  font-weight: 400;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #A0ABC0;
  font-weight: 400;
}

.form-horizontal .control-label {
  padding-top: 0;
}

.form-group {
  margin-bottom: 1rem;
}
.form-group--label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #4A5468;
}

.form-input {
  width: 100%;
  padding: 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 400;
  height: 2.75rem;
  line-height: 2.75rem;
  color: #4A5468;
  background-color: #FFFFFF;
  border: 1px solid #CBD2E0;
  border-radius: 0.125rem;
  background-clip: padding-box;
  outline: none;
  -webkit-transition: border-color 0.2s ease, background-color 0.2s ease;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.form-input::-webkit-input-placeholder {
  color: #A0ABC0;
  font-weight: 400;
}
.form-input::-moz-placeholder {
  color: #A0ABC0;
  font-weight: 400;
}
.form-input:-ms-input-placeholder {
  color: #A0ABC0;
  font-weight: 400;
}
.form-input::-ms-input-placeholder {
  color: #A0ABC0;
  font-weight: 400;
}
.form-input::placeholder {
  color: #A0ABC0;
  font-weight: 400;
}
.form-input:focus {
  border-color: #A0ABC0;
}
.form-input:disabled, .form-input.is-disabled {
  color: #E2E7F0;
  background-color: #F7F9FC;
  border-color: #EDF0F7;
  cursor: not-allowed;
}
.form-input:disabled::-webkit-input-placeholder, .form-input.is-disabled::-webkit-input-placeholder {
  color: #E2E7F0;
}
.form-input:disabled::-moz-placeholder, .form-input.is-disabled::-moz-placeholder {
  color: #E2E7F0;
}
.form-input:disabled:-ms-input-placeholder, .form-input.is-disabled:-ms-input-placeholder {
  color: #E2E7F0;
}
.form-input:disabled::-ms-input-placeholder, .form-input.is-disabled::-ms-input-placeholder {
  color: #E2E7F0;
}
.form-input:disabled::placeholder, .form-input.is-disabled::placeholder {
  color: #E2E7F0;
}
.form-input.is-error {
  border-color: #de1133;
}
.form-input.is-error:focus {
  border-color: #de1133;
}
.form-input.no-bordered {
  border-color: #EDF0F7;
  background-color: #EDF0F7;
}
.form-input.no-bordered::-webkit-input-placeholder {
  color: #A0ABC0;
  font-weight: 400;
}
.form-input.no-bordered::-moz-placeholder {
  color: #A0ABC0;
  font-weight: 400;
}
.form-input.no-bordered:-ms-input-placeholder {
  color: #A0ABC0;
  font-weight: 400;
}
.form-input.no-bordered::-ms-input-placeholder {
  color: #A0ABC0;
  font-weight: 400;
}
.form-input.no-bordered::placeholder {
  color: #A0ABC0;
  font-weight: 400;
}
.form-input.no-bordered:focus {
  border-color: #717D96;
}
.form-input.no-bordered:disabled, .form-input.no-bordered.is-disabled {
  color: #CBD2E0;
  background-color: #F7F9FC;
  border-color: #F7F9FC;
  cursor: not-allowed;
}
.form-input.no-bordered:disabled::-webkit-input-placeholder, .form-input.no-bordered.is-disabled::-webkit-input-placeholder {
  color: #A0ABC0;
}
.form-input.no-bordered:disabled::-moz-placeholder, .form-input.no-bordered.is-disabled::-moz-placeholder {
  color: #A0ABC0;
}
.form-input.no-bordered:disabled:-ms-input-placeholder, .form-input.no-bordered.is-disabled:-ms-input-placeholder {
  color: #A0ABC0;
}
.form-input.no-bordered:disabled::-ms-input-placeholder, .form-input.no-bordered.is-disabled::-ms-input-placeholder {
  color: #A0ABC0;
}
.form-input.no-bordered:disabled::placeholder, .form-input.no-bordered.is-disabled::placeholder {
  color: #A0ABC0;
}
.form-input.no-bordered.is-error {
  border-color: #de1133;
}
.form-input.no-bordered.is-error:focus {
  border-color: #de1133;
}

.form-input-wrapper {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.form-input-wrapper .form-input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.form-input-wrapper.has-suffix .form-input {
  padding-right: 4.5rem;
}
.form-input-wrapper.has-suffix .form-input-suffix {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 0.9375rem;
  font-weight: 400;
  color: #CBD2E0;
  pointer-events: none;
}
.form-input-wrapper.has-icon .form-input {
  padding-left: 2.75rem;
}
.form-input-wrapper.has-icon .form-input-icon-btn {
  position: absolute;
  left: 0.5rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 0.25rem;
  background-clip: padding-box;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
.form-input-wrapper.is-disabled .form-input-suffix {
  color: #E2E7F0;
}
.form-input-wrapper.is-disabled .form-input-icon-btn {
  cursor: not-allowed;
}
.form-input-wrapper.is-disabled .form-input-icon-btn i {
  background-color: #E2E7F0;
}
.form-input-wrapper.is-error .form-input {
  border-color: #de1133;
}
.form-input-wrapper.is-error .form-input-suffix {
  color: #de1133;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #4A5468;
}

.form-error-message {
  margin-top: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: #de1133;
  line-height: 1.4;
}
.form-error-message i {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.form-textarea {
  width: 100%;
  min-height: 8rem;
  padding: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 400;
  color: #4A5468;
  background-color: #FFFFFF;
  border: 1px solid #CBD2E0;
  border-radius: 0.125rem;
  background-clip: padding-box;
  outline: none;
  resize: vertical;
  -webkit-transition: border-color 0.2s ease, background-color 0.2s ease;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.form-textarea::-webkit-input-placeholder {
  color: #A0ABC0;
  font-weight: 400;
}
.form-textarea::-moz-placeholder {
  color: #A0ABC0;
  font-weight: 400;
}
.form-textarea:-ms-input-placeholder {
  color: #A0ABC0;
  font-weight: 400;
}
.form-textarea::-ms-input-placeholder {
  color: #A0ABC0;
  font-weight: 400;
}
.form-textarea::placeholder {
  color: #A0ABC0;
  font-weight: 400;
}
.form-textarea:focus {
  border-color: #CBD2E0;
}
.form-textarea:disabled, .form-textarea.is-disabled {
  color: #E2E7F0;
  background-color: #F7F9FC;
  border-color: #EDF0F7;
  cursor: not-allowed;
  resize: none;
}
.form-textarea:disabled::-webkit-input-placeholder, .form-textarea.is-disabled::-webkit-input-placeholder {
  color: #E2E7F0;
}
.form-textarea:disabled::-moz-placeholder, .form-textarea.is-disabled::-moz-placeholder {
  color: #E2E7F0;
}
.form-textarea:disabled:-ms-input-placeholder, .form-textarea.is-disabled:-ms-input-placeholder {
  color: #E2E7F0;
}
.form-textarea:disabled::-ms-input-placeholder, .form-textarea.is-disabled::-ms-input-placeholder {
  color: #E2E7F0;
}
.form-textarea:disabled::placeholder, .form-textarea.is-disabled::placeholder {
  color: #E2E7F0;
}
.form-textarea.is-error {
  border-color: #de1133;
}
.form-textarea.is-error:focus {
  border-color: #de1133;
}

.form-select-wrapper {
  position: relative;
}
@media (max-width: 767px) {
  .form-select-wrapper[data-toggle=modal] .form-select {
    pointer-events: none;
  }
}
.form-select-wrapper .form-select {
  width: 100%;
  padding: 0 2.5rem 0 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: #4A5468;
  background-color: #FFFFFF;
  border: 1px solid #CBD2E0;
  border-radius: 0.125rem;
  background-clip: padding-box;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  -webkit-transition: border-color 0.2s ease, background-color 0.2s ease;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  height: 2.75rem;
}
.form-select-wrapper .form-select.is-placeholder {
  color: #A0ABC0;
}
.form-select-wrapper .form-select:focus {
  border-color: #717D96;
}
.form-select-wrapper .form-select:disabled, .form-select-wrapper .form-select.is-disabled {
  color: #CBD2E0;
  background-color: #F7F9FC;
  border-color: #EDF0F7;
  cursor: not-allowed;
}
.form-select-wrapper .form-select.is-error {
  border-color: #de1133;
}
.form-select-wrapper .form-select.is-error:focus {
  border-color: #de1133;
}
.form-select-wrapper .form-select.no-bordered {
  border: 0;
  background-color: #EDF0F7;
}
.form-select-wrapper .form-select.no-bordered:disabled, .form-select-wrapper .form-select.no-bordered.is-disabled {
  color: #CBD2E0;
  background-color: #F7F9FC;
  border-color: #EDF0F7;
  cursor: not-allowed;
}
.form-select-wrapper .form-select-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  pointer-events: none;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
.form-select-wrapper.is-open .form-select {
  border-color: #CBD2E0;
}
.form-select-wrapper.is-open .form-select-icon {
  -webkit-transform: translateY(-50%) rotate(180deg);
          transform: translateY(-50%) rotate(180deg);
}
.form-select-wrapper.is-disabled .form-select-icon i {
  background-color: #E2E7F0;
}

.radio-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.radio-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem;
  padding: 1rem 0;
  border-bottom: 1px solid #EDF0F7;
  cursor: pointer;
}
.radio-item:last-child {
  border-bottom: none;
}
.radio-item input[type=radio] {
  display: none;
}
.radio-item--indicator {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid #CBD2E0;
  border-radius: 50%;
  background-clip: padding-box;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
input[type=radio]:checked + .radio-item--indicator {
  border-color: #00A63E;
  background-color: #00A63E;
}
input[type=radio]:checked + .radio-item--indicator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 0.625rem;
  height: 0.375rem;
  border-left: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  -webkit-transform: translate(-50%, -60%) rotate(-45deg);
          transform: translate(-50%, -60%) rotate(-45deg);
}
.radio-item--label {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 1rem;
  font-weight: 400;
  color: #2D3648;
}

.form-guideline {
  padding: 1rem;
}
.form-guideline--section {
  margin-bottom: 2rem;
}
.form-guideline--title {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #2D3648;
  border-bottom: 1px solid #EDF0F7;
}
.form-guideline--row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.form-guideline--row:last-child {
  margin-bottom: 0;
}
.form-guideline--col {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
.form-guideline--label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #A0ABC0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.number-stepper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #CBD2E0;
  border-radius: 1rem;
  background-clip: padding-box;
}
.number-stepper--btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  background-clip: padding-box;
  cursor: pointer;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
.number-stepper--btn:focus {
  background-color: #EDF0F7;
}
.number-stepper--btn:active {
  background-color: #E2E7F0;
}
.number-stepper--value {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.25rem;
}
.number-stepper--input {
  width: 4rem;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #2D3648;
  text-align: center;
  background: none;
  border: none;
  outline: none;
  -moz-appearance: textfield;
}
.number-stepper--input::-webkit-outer-spin-button, .number-stepper--input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.number-stepper--unit {
  font-size: 1rem;
  font-weight: 500;
  color: #A0ABC0;
}

.categories-filter {
  margin: 1.25rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.75rem;
}
.categories-filter .form-input-wrapper .form-input, .categories-filter .form-select-wrapper .form-input {
  height: 2.75rem;
}
.categories-filter .form-select-wrapper .select2-container--default .select2-selection--single {
  height: 2.75rem;
}
@media (min-width: 768px) {
  .categories-filter {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .categories-filter .form-input-wrapper, .categories-filter .form-select-wrapper {
    width: 15.625rem;
  }
}

.pagination {
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.25rem;
  padding: 1.5rem 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.pagination--item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  font-size: 0.875rem;
  color: #4A5468;
  text-decoration: none;
  background-color: #FFFFFF;
  border: 1px solid #E2E7F0;
  border-radius: 0.125rem;
  background-clip: padding-box;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.pagination--item:hover {
  border-color: #CBD2E0;
  background-color: #F7F9FC;
}
.pagination--item.is-active {
  color: #C8102E;
  border-color: #C8102E;
  font-weight: 600;
}
.pagination--item.is-disabled {
  color: #CBD2E0;
  border-color: #EDF0F7;
  cursor: not-allowed;
  pointer-events: none;
}
.pagination--prev, .pagination--next {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  color: #4A5468;
  text-decoration: none;
  background-color: #FFFFFF;
  border: 1px solid #E2E7F0;
  border-radius: 0.125rem;
  background-clip: padding-box;
  height: 2.25rem;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.pagination--prev:hover, .pagination--next:hover {
  border-color: #CBD2E0;
  background-color: #F7F9FC;
}
.pagination--prev.is-disabled, .pagination--next.is-disabled {
  color: #CBD2E0;
  border-color: #EDF0F7;
  background-color: #F7F9FC;
  cursor: not-allowed;
  pointer-events: none;
}
.pagination--prev.is-disabled .i-arrow-left, .pagination--next.is-disabled .i-arrow-left {
  background-color: #CBD2E0;
}
.pagination--prev span, .pagination--next span {
  display: none;
}
.pagination--prev {
  margin-right: 0.5rem;
}
.pagination--next {
  margin-left: 0.5rem;
}
@media (min-width: 768px) {
  .pagination {
    padding: 2rem 1rem;
  }
}

.modal .modal-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.modal .modal-header .modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #2D3648;
}
.modal .modal-header .close {
  margin-left: auto;
  opacity: 0.7;
  cursor: pointer;
}
.modal .modal-header .close:hover, .modal .modal-header .close:focus {
  opacity: 1;
}
.modal .modal-header, .modal .modal-body, .modal .modal-footer {
  padding: 1rem 1.25rem;
}
.modal .modal-footer .btn {
  margin: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -ms-flex-preferred-size: calc(50% - 0.375rem);
      flex-basis: calc(50% - 0.375rem);
}

.modal-system.modal-dialog {
  width: calc(100% - 2.5rem);
  max-width: 25rem;
}

.modal.center-modal {
  text-align: center;
  padding: 0 !important;
}
.modal.center-modal:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}
.modal.center-modal .modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

@media (min-width: 768px) {
  .modal.bottom-sheet-modal {
    display: none !important;
  }
}
.modal.bottom-sheet-modal .modal-dialog {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
}
.modal.bottom-sheet-modal.in .modal-dialog {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.modal.bottom-sheet-modal .modal-content {
  border: none;
  border-radius: 0.375rem 0.375rem 0 0;
  -webkit-box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
          box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}
.modal.bottom-sheet-modal .modal-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1.25rem 1rem;
  border-bottom: 1px solid #E2E7F0;
}
.modal.bottom-sheet-modal .modal-header .modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #2D3648;
  margin: 0;
}
.modal.bottom-sheet-modal .modal-header .close {
  margin: 0;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: none;
  opacity: 1;
  line-height: 1;
}
.modal.bottom-sheet-modal .modal-header .close:hover, .modal.bottom-sheet-modal .modal-header .close:focus {
  opacity: 0.7;
}
.modal.bottom-sheet-modal .modal-body {
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
}
.modal.bottom-sheet-modal .select-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.modal.bottom-sheet-modal .select-list-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #E2E7F0;
  cursor: pointer;
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.modal.bottom-sheet-modal .select-list-item:last-child {
  border-bottom: none;
}
.modal.bottom-sheet-modal .select-list-item:active {
  background-color: #F7F9FC;
}
.modal.bottom-sheet-modal .select-list-item--text {
  font-size: 1rem;
  color: #2D3648;
}
.modal.bottom-sheet-modal .select-list-item i {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.modal.bottom-sheet-modal .select-list-item.is-active .select-list-item--text {
  color: #C8102E;
  font-weight: 500;
}
.modal.bottom-sheet-modal .select-list-item.is-active i {
  background-color: #C8102E;
}

.breadcrumbs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0.75rem 0;
  font-size: 0.8125rem;
  color: #717D96;
}
.breadcrumbs--item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.breadcrumbs--item:not(:last-child)::after {
  content: ">";
  margin: 0 0.5rem;
  color: #CBD2E0;
}
.breadcrumbs--link {
  color: #717D96;
  text-decoration: none;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}
.breadcrumbs--link:hover {
  color: #C8102E;
}
.breadcrumbs--current {
  color: #A0ABC0;
}
@media (min-width: 1200px) {
  .breadcrumbs {
    padding: 1.25rem 0;
  }
}

.tag {
  display: inline-block;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 100%;
  border-radius: 0.25rem;
  background-clip: padding-box;
  white-space: nowrap;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: #4A5468;
  background-color: transparent;
  border: 1px solid #CBD2E0;
}
.tag.tag-sm {
  padding: 0.25rem 0.375rem;
  font-size: 0.6875rem;
}
.tag.tag-lg {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}
.tag.tag-primary {
  color: #C8102E;
  border-color: #C8102E;
}
.tag.tag-secondary {
  color: #2D3648;
  border-color: #2D3648;
}
.tag.tag-filled {
  color: #FFFFFF;
  background-color: #4A5468;
  border-color: #4A5468;
}
.tag.tag-filled.tag-primary {
  background-color: #C8102E;
  border-color: #C8102E;
}
.tag.tag-filled.tag-secondary {
  background-color: #2D3648;
  border-color: #2D3648;
}
.tag.tag-filled.tag-gray {
  color: #4A5468;
  background-color: #EDF0F7;
  border-color: #EDF0F7;
}
.tag.tag-filled.tag-green {
  color: #FFFFFF;
  background-color: #00A63E;
  border-color: #00A63E;
}
.tag.tag-download {
  gap: 0.25rem;
  color: #FFFFFF;
  background-color: #2B7FFF;
  border-color: #2B7FFF;
}
.tag.tag-download i {
  background-color: #FFFFFF;
}

.course-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-decoration: none;
  border-radius: 0.125rem;
  background-clip: padding-box;
  overflow: hidden;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background-color: #FFFFFF;
}
.course-card:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.course-card--vertical {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.course-card--vertical .course-card--image {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
}
.course-card--vertical .course-card--image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.course-card--vertical .course-card--content {
  padding: 1rem;
}
.course-card--horizontal {
  padding: 1rem;
  position: relative;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.course-card--horizontal .course-card--image {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 7.5rem;
  height: 7.5rem;
  position: absolute;
  top: 50%;
  left: 1rem;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
.course-card--horizontal .course-card--image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.course-card--horizontal .course-card--content {
  padding-left: 8.5rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.course-card--horizontal .course-card--title {
  font-size: 1rem;
  line-height: 1.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-card--horizontal .course-card--desc {
  font-size: 0.8125rem;
  -webkit-line-clamp: 2;
}
.course-card--horizontal .course-card--footer {
  margin-top: auto;
}
.course-card--image {
  overflow: hidden;
}
.course-card--content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}
.course-card--title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: #2D3648;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-card--desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #717D96;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-card--progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.375rem;
}
.course-card--progress-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.course-card--progress-label {
  font-size: 0.875rem;
  color: #717D96;
}
.course-card--progress-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: #2D3648;
}
.course-card--progress-bar {
  height: 0.375rem;
  background-color: #E2E7F0;
  border-radius: 0.1875rem;
  background-clip: padding-box;
  overflow: hidden;
}
.course-card--progress-fill {
  height: 100%;
  background-color: #318DC2;
  border-radius: 0.1875rem;
  background-clip: padding-box;
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
.course-card--footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 0.5rem;
}
.course-card--duration {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: #717D96;
}
.course-card--duration i {
  background-color: #717D96;
}
.course-card--chapters {
  font-size: 0.875rem;
  color: #717D96;
}
.course-card--supervisor {
  cursor: default;
}
.course-card--supervisor:hover {
  -webkit-transform: none;
          transform: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.course-card--student-count {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: #717D96;
}
.course-card--action {
  margin-top: auto;
}

.exam-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-decoration: none;
  border-radius: 0.125rem;
  background-clip: padding-box;
  overflow: hidden;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background-color: #FFFFFF;
}
.exam-card:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.exam-card--vertical {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.exam-card--vertical .exam-card--image {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
}
.exam-card--vertical .exam-card--image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.exam-card--vertical .exam-card--content {
  padding: 1rem;
}
.exam-card--horizontal {
  padding: 1rem;
  position: relative;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.exam-card--horizontal .exam-card--image {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 7.5rem;
  height: 7.5rem;
  position: absolute;
  top: 50%;
  left: 1rem;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
.exam-card--horizontal .exam-card--image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.exam-card--horizontal .exam-card--content {
  padding-right: 0;
  padding-left: 8.5rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.exam-card--horizontal .exam-card--title {
  font-size: 1rem;
}
.exam-card--horizontal .exam-card--info {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.125rem;
}
.exam-card--image {
  overflow: hidden;
}
.exam-card--content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.exam-card--title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1A202C;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.exam-card--id {
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  display: block;
}
.exam-card--desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #717D96;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.exam-card .tag {
  margin-bottom: 0.25rem;
}
.exam-card--info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}
.exam-card--info-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.exam-card--info-label {
  font-size: 0.8125rem;
  color: #717D96;
}
.exam-card--info-value {
  font-size: 0.8125rem;
  font-weight: 400;
  color: #4A5468;
}
.exam-card--status {
  margin-top: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.exam-card--status-text {
  padding: 0.3125rem;
  font-size: 0.875rem;
  line-height: 100%;
  color: #A0ABC0;
  background-color: #EDF0F7;
  border-radius: 0.25rem;
  background-clip: padding-box;
}
.exam-card--score {
  font-size: 0.875rem;
}
.exam-card--score strong {
  font-weight: 600;
}
.exam-card--score-failed {
  color: #A37800;
  background-color: #FFF1CB;
}
.exam-card--score-passed {
  color: #00A63E;
  background-color: #D9FFE7;
}
.exam-card--badge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  border-radius: 0.25rem;
  background-clip: padding-box;
}
.exam-card--badge-failed {
  background-color: #F0B100;
  color: #FFFFFF;
}
.exam-card--badge-passed {
  background-color: #00A63E;
  color: #FFFFFF;
}

.progress-bar {
  width: 100%;
  height: 0.3125rem;
  background-color: #EDF0F7;
  border-radius: 0.25rem;
  background-clip: padding-box;
  overflow: hidden;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.progress-bar--fill {
  height: 100%;
  border-radius: 0.25rem;
  background-clip: padding-box;
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
.progress-bar--blue .progress-bar--fill {
  background-color: #318DC2;
}
.progress-bar--green .progress-bar--fill {
  background-color: #00A63E;
}
.progress-bar--primary .progress-bar--fill {
  background-color: #C8102E;
}
.progress-bar--yellow .progress-bar--fill {
  background-color: #F0B100;
}

.team-members--date-range-display {
  background-color: #FFFFFF;
  border: 1px solid #CBD2E0;
  background-color: #FFFFFF;
  border-radius: 0.125rem;
  background-clip: padding-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 2.75rem;
}

.date-range-chip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #FFFFFF;
  cursor: pointer;
  -webkit-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
  width: calc(100% - 1rem - 2.5rem);
}
.date-range-chip:hover {
  border-color: #CBD2E0;
}
.date-range-chip span {
  font-size: 0.9375rem;
  color: #C8102E;
  white-space: nowrap;
}

.date-range-clear {
  margin-left: auto;
  margin-right: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 0.25rem;
  background-clip: padding-box;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
.date-range-clear:hover {
  background-color: #EDF0F7;
}
.date-range-clear:active {
  background-color: #E2E7F0;
}

.date-range-modal--subtitle {
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: #717D96;
}
.date-range-modal--form .form-group {
  margin-bottom: 1rem;
}
.date-range-modal--form .form-group:last-child {
  margin-bottom: 0;
}
.date-range-modal--clear {
  margin-top: 1rem;
  text-align: center;
}
.date-range-modal--clear a {
  font-size: 0.875rem;
  color: #C8102E;
  text-decoration: none;
}
.date-range-modal--clear a:hover {
  text-decoration: underline;
}

.bootstrap-datetimepicker-widget .datepicker-days .day.today,
.bootstrap-datetimepicker-widget .datepicker-months .month.today,
.bootstrap-datetimepicker-widget .datepicker-years .year.today {
  color: #C8102E;
  background-color: transparent;
}
.bootstrap-datetimepicker-widget .datepicker-days .day.today:hover,
.bootstrap-datetimepicker-widget .datepicker-months .month.today:hover,
.bootstrap-datetimepicker-widget .datepicker-years .year.today:hover {
  color: #C8102E;
  background-color: #F7F9FC;
}
.bootstrap-datetimepicker-widget .datepicker-days .day.active,
.bootstrap-datetimepicker-widget .datepicker-months .month.active,
.bootstrap-datetimepicker-widget .datepicker-years .year.active {
  color: #FFFFFF;
  background-color: #2D3648;
}
.bootstrap-datetimepicker-widget .datepicker-days .day.active:hover,
.bootstrap-datetimepicker-widget .datepicker-months .month.active:hover,
.bootstrap-datetimepicker-widget .datepicker-years .year.active:hover {
  color: #FFFFFF;
  background-color: #2D3648;
}
.bootstrap-datetimepicker-widget .datepicker-days .day.today.active,
.bootstrap-datetimepicker-widget .datepicker-months .month.today.active,
.bootstrap-datetimepicker-widget .datepicker-years .year.today.active {
  color: #FFFFFF;
  background-color: #2D3648;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 150;
  background-color: #FFFFFF;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  -ms-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
.site-header--inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.75rem 1rem 0.75rem 0.75rem;
}
.site-header--menu-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 0.25rem;
  background-clip: padding-box;
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.site-header--menu-btn:active {
  background-color: #F7F9FC;
}
.site-header--logo {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
}
.site-header--logo img {
  height: 3rem;
  width: auto;
}
.site-header--logo-text {
  font-size: 0.625rem;
  font-weight: 500;
  color: #717D96;
  margin-top: 0.125rem;
  letter-spacing: 0.5px;
}
.site-header--actions {
  width: 2.5rem;
  height: 2.5rem;
}
.site-header--nav, .site-header--avatar {
  display: none;
}
@media (min-width: 1200px) {
  .site-header {
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.04);
            box-shadow: 0 4px 4px rgba(0, 0, 0, 0.04);
  }
  .site-header--menu-btn {
    display: none;
  }
  .site-header--inner {
    padding: 0 1rem;
    height: 4.625rem;
  }
  .site-header--logo {
    position: static;
    right: 0;
    bottom: 0;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  .site-header--nav, .site-header--avatar {
    display: block;
  }
  .site-header--nav {
    margin-left: auto;
    margin-right: 2.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100%;
  }
  .site-header--nav-item {
    padding: 0 0.75rem;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 95%;
    color: #2D3648;
    gap: 0.5rem;
  }
  .site-header--nav-item.is-active {
    color: #C8102E;
  }
  .site-header--nav-item.is-active i {
    background-color: #C8102E;
  }
  .site-header--nav-item.is-active:after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #C8102E;
  }
  .site-header--nav-item:hover {
    color: #C8102E;
    background-color: #F7F9FC;
  }
  .site-header--nav-item:hover i {
    background-color: #C8102E;
  }
  .site-header--avatar > img {
    border: 6px solid transparent;
    border-radius: 2000px;
    background-clip: padding-box;
  }
  .site-header--avatar > img:hover {
    border-color: #EDF0F7;
  }
}
@media (min-width: 1440px) {
  .site-header--inner {
    padding: 0 2rem;
    height: 4.625rem;
  }
  .site-header--nav {
    gap: 0.5rem;
  }
}
@media (min-width: 1600px) {
  .site-header--inner {
    padding: 0 2rem;
    height: 4.625rem;
  }
  .site-header--nav {
    gap: 1rem;
  }
}

.side-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  pointer-events: none;
  visibility: hidden;
}
.side-nav.is-open {
  pointer-events: auto;
  visibility: visible;
}
.side-nav.is-open .side-nav--overlay {
  opacity: 1;
}
.side-nav.is-open .side-nav--panel {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.side-nav--overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(26, 32, 44, 0.5);
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.side-nav--panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  max-width: 18.75rem;
  height: 100%;
  background-color: #FFFFFF;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow-y: auto;
}
.side-nav--close {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 0.25rem;
  background-clip: padding-box;
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.side-nav--close:active {
  background-color: #F7F9FC;
}
.side-nav--user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin-top: 3.5rem;
  text-decoration: none;
  border-bottom: 1px solid #EDF0F7;
}
.side-nav--user-avatar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #F7F9FC;
  border-radius: 50%;
  background-clip: padding-box;
}
.side-nav--user-avatar img {
  width: 3.25rem;
  height: 3.25rem;
}
.side-nav--user-info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}
.side-nav--user-name {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 125%;
  color: #2D3648;
}
.side-nav--user-role {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 150%;
  color: #717D96;
}
.side-nav--menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.side-nav--menu-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  font-size: 0.9375rem;
  color: #4A5468;
  text-decoration: none;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.side-nav--menu-item i {
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.side-nav--menu-item:hover {
  background-color: #FFFFFF;
}
.side-nav--menu-item.is-active {
  color: #C8102E;
  background-color: rgba(200, 16, 46, 0.08);
  border-right: 4px solid #C8102E;
}
.side-nav--menu-item.is-active i {
  background-color: #C8102E;
}
.side-nav--menu-item.is-active span {
  color: #C8102E;
}
.side-nav--menu-item span {
  color: #4A5468;
}

.site-header.supervisor-header .site-header--nav-item > i {
  display: none;
}
@media (min-width: 1200px) {
  .site-header.supervisor-header .site-header--nav {
    gap: 0.5rem;
  }
}
@media (min-width: 1440px) {
  .site-header.supervisor-header .site-header--nav {
    gap: 1.125rem;
  }
}
@media (min-width: 1800px) {
  .site-header.supervisor-header .site-header--nav-item > i {
    display: inline-block;
  }
}

.footer {
  margin-top: 2rem;
  padding: 1.25rem;
  border-top: 1px solid #E2E7F0;
  display: block;
  text-align: center;
}
.footer--copyright p {
  font-size: 0.8125rem;
  line-height: 1.125rem;
  color: #A0ABC0;
  font-weight: 400;
}

.hompage-view--hero-banner {
  margin-bottom: 1.5rem;
  position: relative;
}
.hompage-view--hero-banner-image {
  width: 100%;
  height: 56.4102564103vw;
  background-image: url("../images/banners/banner_homepage__m.jpg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.hompage-view--hero-banner-title {
  position: absolute;
  top: 50%;
  left: 1rem;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
.hompage-view--continue-the-course {
  display: none;
}
.hompage-view--section {
  margin-bottom: 2rem;
}
.hompage-view--section-heading {
  margin-bottom: 0.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.hompage-view--section-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.hompage-view--section-title .assigned-num {
  padding: 0.3125rem;
  font-size: 0.75rem;
  line-height: 100%;
  font-weight: 500;
  border-radius: 0.25rem;
  background-clip: padding-box;
  background-color: #FFFFFF;
}
.hompage-view--section-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  color: #717D96;
}
.hompage-view--section-link:hover {
  color: #2D3648;
}
.hompage-view--section-link:hover i {
  background-color: #2D3648;
}
.hompage-view--explore-course {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: #FFFFFF;
  border-top: 4px solid #C8102E;
  -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08);
  -ms-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08);
}
.hompage-view--explore-course .i-course {
  background-color: #C8102E;
}
.hompage-view--action-control > .btn {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.hompage-view--course-list, .hompage-view--exam-list, .hompage-view--news-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}
@media (max-width: 767px) and (orientation: landscape) {
  .hompage-view--hero-banner {
    height: 38.4615384615vw;
  }
}
@media (min-width: 768px) {
  .hompage-view--hero-banner-image {
    height: 38.4615384615vw;
  }
  .hompage-view--hero-banner-title {
    left: 5%;
  }
  .hompage-view--news-list .news-card--image {
    width: 7.5rem;
    height: 7.5rem;
  }
}
@media (min-width: 992px) {
  .hompage-view--hero-banner {
    margin: 0 auto;
    margin-top: 1.25rem;
    margin-bottom: 2rem;
    padding: 0 0.9375rem;
    width: 970px;
  }
  .hompage-view--hero-banner-image {
    background-image: url("../images/banners/banner_homepage__pc.jpg");
    height: 35.15625vw;
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
    -ms-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
  }
  .hompage-view--hero-banner-content {
    position: absolute;
    top: 50%;
    left: 1rem;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
    left: 5%;
  }
  .hompage-view--hero-banner-title {
    margin-bottom: 2rem;
    position: static;
    -webkit-transform: none;
            transform: none;
  }
  .hompage-view--hero-banner-title h1 {
    display: inline-block;
  }
  .hompage-view--continue-the-course {
    display: block;
    width: 24.375rem;
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    -ms-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    border-radius: 0.125rem;
    background-clip: padding-box;
  }
  .hompage-view--continue-the-course .hompage-view--section-heading {
    margin-bottom: 0;
    padding: 0.5rem 1rem;
    background-color: #FFFFFF;
    border-bottom: 1px solid #E2E7F0;
  }
  .hompage-view--continue-the-course .hompage-view--section-title h6 {
    font-size: 1.25rem;
    font-weight: 400;
  }
  .hompage-view--explore-course {
    display: none;
  }
  .hompage-view .hompage-view--hero-banner .hompage-view--explore-course {
    display: block;
    width: 22.5rem;
  }
  .hompage-view--course-list, .hompage-view--exam-list, .hompage-view--news-list {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
  .hompage-view--course-list > *:last-child, .hompage-view--exam-list > *:last-child {
    display: none;
  }
}
@media (min-width: 1200px) {
  .hompage-view--hero-banner {
    width: 1170px;
  }
  .hompage-view--hero-banner-image {
    height: 23.125rem;
  }
  .hompage-view--course-list, .hompage-view--exam-list, .hompage-view--news-list {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1.25rem 1fr 1.25rem 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
  .hompage-view--course-list > *:last-child, .hompage-view--exam-list > *:last-child {
    display: block;
  }
}

.login-view--visual-bk {
  display: none;
}
.login-view--main-bk {
  padding: 1.875rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
  min-height: 100vh;
}
.login-view--logo {
  margin-top: auto;
  margin-bottom: 3.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/logo.svg");
  background-size: 14.375rem 4.6875rem;
  width: 14.375rem;
  height: 4.6875rem;
}
.login-view--form {
  margin-bottom: auto;
  width: 100%;
}
.login-view--copyright {
  margin-top: auto;
  text-align: center;
  font-weight: 400;
  color: #717D96;
}
.login-view--copyright > p {
  font-size: 12px;
  line-height: 1.25rem;
}

@media (min-width: 768px) {
  .login-view--main-bk {
    padding: 15%;
  }
}
@media (min-width: 992px) {
  .login-view {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .login-view--visual-bk {
    display: block;
    width: calc(100% - 26.25rem);
    background-color: #E2E7F0;
    height: 100vh;
  }
  .login-view--main-bk {
    padding: 1.875rem;
    width: 26.25rem;
  }
}
@media (min-width: 1200px) {
  .login-view--main-bk {
    padding: 3.25rem;
  }
}
@media (min-width: 1440px) {
  .login-view--visual-bk {
    width: calc(100% - 32.5rem);
  }
  .login-view--main-bk {
    width: 32.5rem;
  }
}
.news-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}
@media (min-width: 768px) {
  .news-list {
    gap: 0.0625rem;
  }
}

.news-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding: 1rem;
  text-decoration: none;
  background-color: #FFFFFF;
}
.news-card:last-child {
  border-bottom: none;
}
.news-card--image {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 0.125rem;
  background-clip: padding-box;
  overflow: hidden;
  background-color: #F7F9FC;
}
.news-card--image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.news-card--content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.news-card--title {
  font-size: 1rem;
  font-weight: 600;
  color: #2D3648;
  line-height: 1.4;
  margin: 0 0 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card--date {
  font-size: 0.8125rem;
  color: #717D96;
  margin-bottom: 0.375rem;
}
.news-card--desc {
  font-size: 0.875rem;
  color: #4A5468;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card--tags {
  margin-top: auto;
  padding-top: 0.5rem;
}
@media (min-width: 768px) {
  .news-card--image {
    width: 12.5rem;
    height: 9.375rem;
  }
}

.beauty-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 0.5rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .beauty-grid {
    -ms-grid-columns: 1fr 1rem 1fr 1rem 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}
@media (min-width: 992px) {
  .beauty-grid {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);
  }
}

.beauty-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #FFFFFF;
  border-radius: 0.125rem;
  background-clip: padding-box;
  overflow: hidden;
  text-decoration: none;
  -webkit-transition: -webkit-box-shadow 0.2s;
  transition: -webkit-box-shadow 0.2s;
  transition: box-shadow 0.2s;
  transition: box-shadow 0.2s, -webkit-box-shadow 0.2s;
}
.beauty-card:hover {
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.beauty-card--image {
  position: relative;
  width: 100%;
  padding-top: 62.5%;
  background-color: #F7F9FC;
  overflow: hidden;
}
.beauty-card--image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.beauty-card--content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0.75rem;
}
.beauty-card--title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #2D3648;
  line-height: 1.4;
  margin: 0 0 0.375rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.beauty-card--date {
  font-size: 0.75rem;
  color: #A0ABC0;
  margin-bottom: 0.375rem;
}
.beauty-card--desc {
  font-size: 0.8125rem;
  color: #717D96;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.beauty-card--tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 0.625rem;
}

.product-detail-footer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  text-align: center;
}

.product-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 0.5rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .product-grid {
    -ms-grid-columns: 1fr 1rem 1fr 1rem 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}
@media (min-width: 992px) {
  .product-grid {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);
  }
}

.product-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #FFFFFF;
  border-radius: 0.125rem;
  background-clip: padding-box;
  overflow: hidden;
  text-decoration: none;
  -webkit-transition: -webkit-box-shadow 0.2s;
  transition: -webkit-box-shadow 0.2s;
  transition: box-shadow 0.2s;
  transition: box-shadow 0.2s, -webkit-box-shadow 0.2s;
}
.product-card:hover {
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.product-card--image {
  position: relative;
  width: 100%;
  padding-top: 62.5%;
  background-color: #F7F9FC;
  overflow: hidden;
}
.product-card--image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.product-card--content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0.75rem;
}
.product-card--title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #2D3648;
  line-height: 1.4;
  margin: 0 0 0.375rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card--date {
  font-size: 0.75rem;
  color: #A0ABC0;
  margin-bottom: 0.375rem;
}
.product-card--desc {
  font-size: 0.8125rem;
  color: #717D96;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card--tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 0.625rem;
}

.product-detail-footer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  text-align: center;
}

.excourse-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 0.5rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .excourse-grid {
    -ms-grid-columns: 1fr 1rem 1fr 1rem 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}
@media (min-width: 992px) {
  .excourse-grid {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);
  }
}

.excourse-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #FFFFFF;
  border-radius: 0.125rem;
  background-clip: padding-box;
  overflow: hidden;
  text-decoration: none;
  -webkit-transition: -webkit-box-shadow 0.2s;
  transition: -webkit-box-shadow 0.2s;
  transition: box-shadow 0.2s;
  transition: box-shadow 0.2s, -webkit-box-shadow 0.2s;
}
.excourse-card:hover {
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.excourse-card--image {
  position: relative;
  width: 100%;
  padding-top: 62.5%;
  background-color: #F7F9FC;
  overflow: hidden;
}
.excourse-card--image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.excourse-card--link-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 10;
  width: 32px;
  height: 32px;
  background-color: #FFFFFF;
  border-radius: 2000px;
  background-clip: padding-box;
  -webkit-box-shadow: 0 4px 4x rgba(0, 0, 0, 0.08);
  -ms-box-shadow: 0 4px 4x rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 4x rgba(0, 0, 0, 0.08);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.excourse-card--content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0.75rem;
}
.excourse-card--title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #2D3648;
  line-height: 1.4;
  margin: 0 0 0.375rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.excourse-card--date {
  font-size: 0.75rem;
  color: #A0ABC0;
  margin-bottom: 0.375rem;
}
.excourse-card--desc {
  font-size: 0.8125rem;
  color: #717D96;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.excourse-card--tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 0.625rem;
}

.product-detail-footer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  text-align: center;
}

.course-list-view--page-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.course-list-view--view-toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
}
.course-list-view--toggle-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #E2E7F0;
  border-radius: 0.125rem;
  background-clip: padding-box;
  background-color: #FFFFFF;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.course-list-view--toggle-btn i {
  background-color: #4A5468;
}
.course-list-view--toggle-btn.is-active {
  border-color: #FFFFFF;
  background-color: #C8102E;
}
.course-list-view--toggle-btn.is-active i {
  background-color: #FFFFFF;
}
.course-list-view--toggle-btn:hover {
  border-color: #A0ABC0;
}
.course-list-view--section {
  margin-bottom: 1.5rem;
}
.course-list-view--section-heading {
  margin-bottom: 0.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.course-list-view--section-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.course-list-view--section-title .assigned-num {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  line-height: 100%;
  font-weight: 500;
  border-radius: 0.25rem;
  background-clip: padding-box;
  background-color: #FFFFFF;
  border: 1px solid #E2E7F0;
}
.course-list-view--slider-arrows {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.course-list-view--slider-arrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid #E2E7F0;
  border-radius: 50%;
  background-clip: padding-box;
  background-color: #FFFFFF;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.course-list-view--slider-arrow:hover {
  border-color: #A0ABC0;
  background-color: #F7F9FC;
}
.course-list-view--assigned-slider {
  margin: 0 -15px;
  padding-left: 15px;
}
.course-list-view--assigned-slider .splide__slide .course-card {
  height: 100%;
}
.course-list-view--course-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 0.75rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.course-list-view--course-grid--list {
  -ms-grid-columns: (1fr)[1];
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 768px) {
  .course-list-view--assigned-slider {
    margin: 0;
    padding-left: 0;
  }
  .course-list-view--course-grid {
    gap: 1rem;
    -ms-grid-columns: 1fr 1rem 1fr 1rem 1fr;
    grid-template-columns: repeat(3, 1fr);
  }
  .course-list-view--course-grid--list {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .course-list-view--assigned-slider {
    margin-bottom: 3rem;
  }
}
@media (min-width: 1200px) {
  .course-list-view--assigned-slider {
    margin-bottom: 3rem;
  }
  .course-list-view--course-grid {
    -ms-grid-columns: 1fr 1.25rem 1fr 1.25rem 1fr 1.25rem 1fr;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
  .course-list-view--course-grid--list {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}

.course-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.course-detail--main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.course-detail--sidebar {
  display: none;
}
.course-detail--player {
  margin-left: -15px;
  margin-right: -15px;
  margin-bottom: 1rem;
  position: sticky;
  top: 4rem;
  z-index: 99;
  height: 64.1025641026vw;
  background-color: #2D3648;
  overflow: hidden;
  border-radius: 0.125rem;
  background-clip: padding-box;
}
@media (max-width: 767px) and (orientation: landscape) {
  .course-detail--player {
    height: calc(100vh - 4rem);
    position: static;
  }
}
@media (min-width: 768px) {
  .course-detail--player {
    margin: 0;
    position: static;
    height: 40vh;
  }
}
@media (min-width: 1200px) {
  .course-detail--player {
    height: 45vh;
  }
}
.course-detail--info {
  padding: 1rem 1rem;
  background-color: #FFFFFF;
  border-radius: 0.125rem;
  background-clip: padding-box;
  margin-bottom: 1rem;
}
.course-detail--title {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2rem;
  color: #2D3648;
  margin: 0 0 0.75rem;
}
.course-detail--tags {
  margin-bottom: 0.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.25rem;
}
.course-detail--desc {
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: #4A5468;
  margin: 0 0 1.25rem;
}
.course-detail--progress {
  margin-bottom: 0.5rem;
}
.course-detail--progress-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 0.375rem;
}
.course-detail--progress-label {
  font-size: 0.875rem;
  color: #2D3648;
  font-weight: 400;
}
.course-detail--progress-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: #2D3648;
}
.course-detail--progress-bar {
  height: 0.5rem;
  background-color: #E2E7F0;
  border-radius: 0.25rem;
  background-clip: padding-box;
  overflow: hidden;
}
.course-detail--progress-fill {
  height: 100%;
  background-color: #318DC2;
  border-radius: 0.25rem;
  background-clip: padding-box;
}
.course-detail--total-time {
  font-size: 0.75rem;
  font-weight: 400;
  color: #717D96;
  margin-top: 0.5rem;
}
.course-detail--chapters {
  padding: 1rem 1rem;
  background-color: #FFFFFF;
  border-radius: 0.125rem;
  background-clip: padding-box;
  margin-bottom: 1rem;
}
.course-detail--chapters-mobile {
  display: block;
}
.course-detail--chapters-desktop {
  display: none;
}
.course-detail--section-title {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 500;
  color: #2D3648;
  line-height: 100%;
}
.course-detail--chapter-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.75rem;
}
.course-detail--chapter-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.25rem;
  padding: 1rem;
  border: 1px solid #E2E7F0;
  border-radius: 0.375rem;
  background-clip: padding-box;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  cursor: pointer;
}
.course-detail--chapter-item:hover {
  background-color: #F7F9FC;
}
.course-detail--chapter-item.is-active {
  border-color: #C8102E;
  background-color: #FFF2F2;
}
.course-detail--chapter-item.is-active .course-detail--chapter-play {
  background-color: #FFFFFF;
}
.course-detail--chapter-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}
.course-detail--chapter-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.375rem;
}
.course-detail--chapter-name {
  font-size: 0.9375rem;
  line-height: 100%;
  font-weight: 400;
  color: #2D3648;
}
.course-detail--chapter-progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}
.course-detail--chapter-progress-bar {
  height: 0.25rem;
  background-color: #E2E7F0;
  border-radius: 0.125rem;
  background-clip: padding-box;
  overflow: hidden;
}
.course-detail--chapter-progress-bar.is-completed .course-detail--chapter-progress-fill {
  background-color: #00A63E;
}
.course-detail--chapter-progress-fill {
  height: 100%;
  background-color: #318DC2;
  border-radius: 0.125rem;
  background-clip: padding-box;
}
.course-detail--chapter-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.course-detail--chapter-meta-label {
  font-size: 0.75rem;
  color: #717D96;
}
.course-detail--chapter-meta-value {
  font-size: 0.75rem;
  color: #717D96;
}
.course-detail--chapter-play {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #EDF0F7;
  border-radius: 50%;
  background-clip: padding-box;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border: 0;
}
.course-detail--chapter-play:hover {
  background-color: #EDF0F7;
}
.course-detail--downloads {
  padding: 1rem 1rem;
  background-color: #FFFFFF;
  border-radius: 0.125rem;
  background-clip: padding-box;
  margin-bottom: 1rem;
}
.course-detail--download-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.75rem;
}
.course-detail--download-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid #E2E7F0;
  border-radius: 0.125rem;
  background-clip: padding-box;
}
.course-detail--download-item i.i-paperclip {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.course-detail--download-info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.125rem;
}
.course-detail--download-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: #2D3648;
}
.course-detail--download-size {
  font-size: 0.75rem;
  color: #A0ABC0;
}
@media (min-width: 992px) {
  .course-detail {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 1.5rem;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .course-detail--main {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  .course-detail--sidebar {
    display: block;
    width: 20rem;
    position: sticky;
    top: 4.5rem;
  }
  .course-detail--chapters-mobile {
    display: none;
  }
  .course-detail--chapters-desktop {
    display: block;
  }
}
@media (min-width: 1200px) {
  .course-detail--sidebar {
    width: 22rem;
  }
}

.restricted-access {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 998;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(0.25rem);
          backdrop-filter: blur(0.25rem);
}
.restricted-access--mask {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
.restricted-access--modal {
  padding: 1.5rem;
  background-color: #FFFFFF;
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  -ms-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 0.125rem;
  background-clip: padding-box;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 999;
  width: 20rem;
  max-width: 28.125rem;
}
.restricted-access--body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
}
.restricted-access--text, .restricted-access--text > * {
  font-size: 0.9375rem;
  line-height: 1.375rem;
}
.restricted-access--footer {
  margin-top: 1.25rem;
  text-align: center;
}
@media (min-width: 992px) {
  .restricted-access--modal {
    width: 90%;
  }
}

.exam-list--summary {
  margin-bottom: 1.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.exam-list--summary-card {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background-color: #FFFFFF;
  border-radius: 0.125rem;
  background-clip: padding-box;
}

.exam-list--summary-icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
  background-clip: padding-box;
}

.exam-list--summary-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.125rem;
}

.exam-list--summary-label {
  font-size: 0.75rem;
  color: #717D96;
}

.exam-list--summary-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2D3648;
}

@media (min-width: 1200px) {
  .exam-list--summary {
    margin-bottom: 2.625rem;
  }
  .exam-list--summary-info {
    width: calc(100% - 24px - 12px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .exam-list--summary-label {
    font-size: 1rem;
  }
  .exam-list--summary-value {
    margin-left: auto;
    text-align: right;
    font-size: 1.75rem;
  }
}
.exam-list--grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: repeat(1, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .exam-list--grid {
    -ms-grid-columns: 1fr 0.75rem 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}
@media (min-width: 1200px) {
  .exam-list--grid {
    -ms-grid-columns: 1fr 1.25rem 1fr 1.25rem 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

.exam-record-list--grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 0.75rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .exam-record-list--grid {
    -ms-grid-columns: 1fr 1rem 1fr 1rem 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}
@media (min-width: 1200px) {
  .exam-record-list--grid {
    -ms-grid-columns: 1fr 1.25rem 1fr 1.25rem 1fr 1.25rem 1fr;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
}

.exam-detail--header {
  padding: 1rem;
  background-color: #FFFFFF;
  border-radius: 0.125rem;
  background-clip: padding-box;
  margin-bottom: 1rem;
}
.exam-detail--title {
  margin: 0 0 0.5rem;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 2rem;
  color: #2D3648;
}
.exam-detail--desc {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #717D96;
}
.exam-detail--meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.exam-detail--meta-item {
  font-size: 0.875rem;
  color: #717D96;
}
.exam-detail--meta-item strong {
  font-weight: 600;
  color: #2D3648;
}
.exam-detail--questions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
.exam-detail--footer {
  margin-top: 1.5rem;
  padding-bottom: 1rem;
}
@media (min-width: 992px) {
  .exam-detail--header {
    padding: 1.5rem;
  }
  .exam-detail--title {
    margin-bottom: 0.75rem;
    font-size: 1.75rem;
  }
  .exam-detail--desc {
    margin-bottom: 2rem;
  }
}

.exam-question {
  background-color: #FFFFFF;
  border-radius: 0.125rem;
  background-clip: padding-box;
  overflow: hidden;
  padding: 1rem;
}
.exam-question--header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.exam-question--num {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  color: #FFFFFF;
  background-color: #C8102E;
  border-radius: 0.25rem;
  background-clip: padding-box;
}
.exam-question--type {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  color: #4A5468;
  background-color: #EDF0F7;
  border-radius: 0.25rem;
  background-clip: padding-box;
}
.exam-question--score {
  font-size: 0.875rem;
  color: #717D96;
  margin-left: auto;
}
.exam-question--body {
  padding: 1rem;
  background-color: #F7F9FC;
  border-radius: 0.125rem;
  background-clip: padding-box;
  margin-bottom: 1rem;
}
.exam-question--body p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: #2D3648;
}
.exam-question--options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.75rem;
}
.exam-question--option {
  display: block;
  cursor: pointer;
}
.exam-question--option input[type=radio] {
  display: none;
}
.exam-question--option input[type=radio]:checked + .exam-question--option-inner {
  border-color: #C8102E;
  background-color: #FFF2F2;
}
.exam-question--option-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid #E2E7F0;
  border-radius: 0.125rem;
  background-clip: padding-box;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.exam-question--option-inner:hover {
  border-color: #CBD2E0;
  background-color: #F7F9FC;
}
.exam-question--option-inner span {
  font-size: 0.9375rem;
  color: #2D3648;
}
.exam-question--option-inner i {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.exam-question--radio {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: 1.5px solid #CBD2E0;
  border-radius: 50%;
  background-clip: padding-box;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.exam-question--option input[type=radio]:checked + .exam-question--option-inner .exam-question--radio {
  border-color: #C8102E;
  background-color: #C8102E;
  position: relative;
}
.exam-question--option input[type=radio]:checked + .exam-question--option-inner .exam-question--radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  background-color: #FFFFFF;
  border-radius: 50%;
  background-clip: padding-box;
}
@media (min-width: 992px) {
  .exam-question {
    padding: 1.5rem;
  }
  .exam-question--body {
    padding: 1.25rem;
  }
  .exam-question--body p {
    font-size: 1.125rem;
    line-height: 1.5rem;
  }
}

.exam-result--banner {
  padding: 1rem;
  background-color: #FFFFFF;
  border-radius: 0.125rem;
  background-clip: padding-box;
  text-align: center;
  margin-bottom: 1rem;
}
.exam-result--header {
  margin-left: -15px;
  margin-right: -15px;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #E2E7F0;
}
.exam-result--banner-icon {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.exam-result--banner-subtitle {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 100%;
  color: #717D96;
}
.exam-result--banner-title {
  margin-top: 0.5rem;
  margin-bottom: 2.5rem;
  font-size: 2.25rem;
  line-height: 100%;
  font-weight: 500;
  color: #2D3648;
}
.exam-result--banner.is-passed .exam-result--score-value {
  color: #00A63E;
}
.exam-result--banner.is-failed .exam-result--score-value {
  color: #de1133;
}
.exam-result--score-card {
  padding: 1.5rem 1rem;
  background-color: #F7F9FC;
  border-radius: 0.125rem;
  background-clip: padding-box;
  text-align: center;
}
.exam-result--score-card > i {
  margin-bottom: 0.5rem;
}
.exam-result--score-label {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  color: #717D96;
}
.exam-result--score-value {
  margin: 0 0 0.25rem;
  font-size: 1.75rem;
  font-weight: 600;
}
.exam-result--score-passing {
  margin: 0;
  font-size: 0.8125rem;
  color: #A0ABC0;
}
.exam-result--section-title {
  font-size: 1.25rem;
  font-weight: 500;
  color: #2D3648;
}
.exam-result--answers {
  padding: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  background-color: #FFFFFF;
}
.exam-result--answer-item {
  padding: 1rem;
  background-color: #FFFFFF;
  border-radius: 0.375rem;
  background-clip: padding-box;
  border: 1px solid transparent;
  border-left: 3px solid transparent;
}
.exam-result--answer-item.is-correct {
  border-color: #00A63E;
  border-left-color: #00A63E;
}
.exam-result--answer-item.is-correct .exam-result--answer-correct strong {
  color: #00A63E;
}
.exam-result--answer-item.is-wrong {
  border-color: #de1133;
  border-left-color: #de1133;
}
.exam-result--answer-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.exam-result--answer-header > i {
  margin-left: auto;
}
.exam-result--answer-score {
  font-size: 0.875rem;
  color: #717D96;
}
.exam-result--answer-body {
  margin-bottom: 0.75rem;
}
.exam-result--answer-body p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: #2D3648;
}
.exam-result--answer-result {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}
.exam-result--answer-yours {
  margin: 0;
  font-size: 0.875rem;
  color: #717D96;
}
.exam-result--answer-yours strong {
  font-weight: 500;
  color: #2D3648;
}
.exam-result--answer-correct {
  margin: 0;
  font-size: 0.875rem;
  color: #717D96;
}
.exam-result--answer-correct strong {
  font-weight: 600;
  color: #C8102E;
}
@media (min-width: 992px) {
  .exam-result--banner {
    padding: 1.5rem;
  }
  .exam-result--header {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }
  .exam-result--section-title {
    margin-bottom: 0.75rem;
    line-height: 100%;
  }
  .exam-result--answers {
    padding: 1.5rem;
  }
  .exam-result--answer-item {
    padding: 1.5rem 1.25rem;
  }
  .exam-result--answer-body p {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .exam-result--answer-yours p, .exam-result--answer-result p {
    line-height: 1rem;
    line-height: 1.5rem;
  }
}

.my-account--sticky-top {
  position: sticky;
  top: 4rem;
  z-index: 10;
}
.my-account--banner {
  background: -webkit-gradient(linear, left top, left bottom, from(#EE6069), to(#C80421));
  background: linear-gradient(to bottom, #EE6069, #C80421);
  border-radius: 0.125rem;
  background-clip: padding-box;
  padding: 2rem 1.5rem;
  text-align: center;
  color: #FFFFFF;
}
.my-account--banner-avatar {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background-clip: padding-box;
  overflow: hidden;
}
.my-account--banner-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.my-account--profile {
  text-align: left;
}
.my-account--banner-name {
  margin-bottom: 0.5rem;
  font-weight: 400;
  color: #FFFFFF;
}
.my-account--banner-role {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 100%;
  color: rgba(255, 255, 255, 0.8);
}
.my-account--banner-id {
  font-size: 0.8125rem;
  line-height: 100%;
  color: rgba(255, 255, 255, 0.8);
}
.my-account--points {
  margin-bottom: 1rem;
  padding: 1rem 0;
  background-color: #FFFFFF;
  border-radius: 0.125rem;
  background-clip: padding-box;
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  -ms-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}
.my-account--points > .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  max-width: 27.5rem;
}
.my-account--points-display {
  padding: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
}
.my-account--points-display .unit {
  font-size: 0.9375rem;
}
.my-account--points-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #4A5468;
}
.my-account--points-value {
  font-size: 1.0625rem;
  color: #2D3648;
  height: 1.25rem;
}
.my-account--points-action {
  padding: 0.5rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #4A5468;
  text-decoration: none;
  border-radius: 6px;
  background-clip: padding-box;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
  border: 1px solid #E2E7F0;
}
.my-account--points-action:hover {
  background-color: #F7F9FC;
  color: #2D3648;
}
.my-account--stats {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 0.75rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.my-account--stat-card {
  padding: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.5rem;
  background-color: #FFFFFF;
  border-radius: 0.125rem;
  background-clip: padding-box;
}
.my-account--stat-icon {
  padding: 0.375rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border-radius: 0.625rem;
  background-clip: padding-box;
}
.my-account--stat-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 0.25rem;
}
.my-account--stat-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #2D3648;
}
.my-account--stat-value {
  font-size: 1.5rem;
  line-height: 100%;
  font-weight: 400;
  color: #2D3648;
}
.my-account--stat-unit {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-weight: 400;
  color: #717D96;
}
.my-account--nav {
  margin-top: 1.25rem;
  margin-bottom: 1rem;
}
.my-account--nav-item {
  margin-bottom: 0.5rem;
  padding: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  text-decoration: none;
  color: #2D3648;
  background-color: #FFFFFF;
  border-radius: 0.125rem;
  background-clip: padding-box;
}
.my-account--nav-item-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem;
}
.my-account-nav-item--text .my-account--title {
  font-size: 1rem;
  font-weight: 500;
  color: #2D3648;
}
.my-account-nav-item--text .my-account--des {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #717D96;
}
.my-account--logout {
  padding: 0.5rem 0;
}
@media (max-width: 767px) and (orientation: landscape) {
  .my-account--sticky-top {
    position: static;
    top: 0;
    z-index: initial;
  }
  .my-account--points {
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
  }
}
@media (min-width: 992px) {
  .my-account--sticky-top {
    position: static;
    top: 0;
    z-index: initial;
  }
  .my-account--points {
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
  }
}
@media (min-width: 1200px) {
  .my-account--banner {
    padding: 3rem 1rem;
  }
  .my-account--banner-avatar {
    width: 4.75rem;
    height: 4.75rem;
  }
  .my-account--points > .container {
    max-width: 31.25rem;
  }
  .my-account--stat-card {
    padding: 1.5rem;
    gap: 1rem;
  }
  .my-account--stat-label {
    font-size: 0.9375rem;
  }
  .my-account--stat-value {
    font-size: 2rem;
  }
  .my-account--nav {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
  .my-account--nav-item {
    margin-bottom: 0.75rem;
    padding: 1.5rem;
    -webkit-transition: 0.1s all ease-in;
    transition: 0.1s all ease-in;
  }
  .my-account--nav-item:hover {
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
    -ms-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
  }
  .my-account--nav-item-left {
    gap: 1.25rem;
  }
  .my-account-nav-item--text .my-account--title {
    font-size: 1.125rem;
  }
}

.record-filter {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.record-filter .form-select-wrapper {
  position: relative;
}
.record-filter .form-select-icon--left {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}
.record-filter .form-select.has-icon-left {
  padding-left: 2.5rem;
}

.record-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.record-list--item {
  padding: 1rem 1.25rem;
  position: relative;
  background-color: #FFFFFF;
  border-radius: 0.125rem;
  background-clip: padding-box;
}
.record-list--item-right {
  position: absolute;
  top: 50%;
  right: 1rem;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  right: 1.25rem;
}
.record-list--item-header {
  margin-bottom: 0.5rem;
}
.record-list--item-title {
  font-size: 1rem;
  font-weight: 600;
  color: #2D3648;
}
.record-list--item-score {
  font-size: 1rem;
  font-weight: 700;
  border-radius: 0.25rem;
  background-clip: padding-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
}
.record-list--item-score .unit {
  color: #717D96;
}
.record-list--item-score.is-passed .score {
  color: #2D3648;
}
.record-list--item-score.is-failed .score {
  color: #de1133;
}
.record-list--items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}
.record-list--item-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
}
.record-list--item-label {
  color: #717D96;
  font-weight: 400;
}
.record-list--item-value {
  color: #2D3648;
  font-weight: 400;
}
.record-list--item-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding-top: 0.75rem;
  border-top: 1px solid #EDF0F7;
}
@media (min-width: 768px) {
  .record-list--item-title {
    font-size: 1.125rem;
  }
}
@media (min-width: 992px) {
  .record-list {
    gap: 0.5rem;
  }
  .record-list--item {
    padding: 1.25rem 1.5rem;
  }
  .record-list--item-right {
    right: 1.5rem;
  }
}

.modal-history-record .modal-dialog {
  width: calc(100% - 2.5rem);
  max-width: 25rem;
}
.modal-history-record .modal-body {
  padding: 0;
  max-height: calc(80vh - 2.25rem - 2.25rem - 3.75rem);
  overflow-y: scroll;
}
.modal-history-record .modal-body thead {
  position: sticky;
  top: 0;
  background: #FFF;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.history-table {
  width: 100%;
  border-collapse: collapse;
}
.history-table thead th {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #4A5468;
  border-bottom: 1px solid #E2E7F0;
  text-align: center;
}
.history-table tbody tr {
  border-bottom: 1px solid #EDF0F7;
}
.history-table tbody tr:last-child {
  border-bottom: none;
}
.history-table tbody td {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #2D3648;
  text-align: center;
}

.supervisor-view--hero-banner {
  margin-bottom: 1.5rem;
  position: relative;
}
.supervisor-view--hero-banner-image {
  width: 100%;
  height: 56.4102564103vw;
  background-image: url("../images/banners/banner_homepage_supervisor__m.jpg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.supervisor-view--hero-banner-title {
  position: absolute;
  top: 50%;
  left: 1rem;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
@media (min-width: 768px) {
  .supervisor-view--hero-banner-image {
    height: 38.4615384615vw;
  }
  .supervisor-view--hero-banner-title {
    left: 5%;
  }
}
@media (min-width: 992px) {
  .supervisor-view--hero-banner {
    margin: 0 auto;
    margin-top: 1.25rem;
    margin-bottom: 2rem;
    padding: 0 0.9375rem;
    width: 970px;
  }
  .supervisor-view--hero-banner-image {
    background-image: url("../images/banners/banner_homepage_supervisor__pc.svg");
    height: 35.15625vw;
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
    -ms-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
  }
  .supervisor-view--hero-banner-content {
    position: absolute;
    top: 50%;
    left: 1rem;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
    left: 5%;
  }
  .supervisor-view--hero-banner-title {
    position: static;
    -webkit-transform: none;
            transform: none;
  }
}
@media (min-width: 1200px) {
  .supervisor-view--hero-banner {
    width: 1170px;
  }
  .supervisor-view--hero-banner-image {
    height: 23.125rem;
  }
}
.supervisor-view--section {
  margin-bottom: 2rem;
}
.supervisor-view--section-heading {
  margin-bottom: 0.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.supervisor-view--section-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.team-overview {
  margin-bottom: 1.5rem;
}
.team-overview--title {
  margin-bottom: 0.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.team-overview--cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}
.team-overview--card {
  padding: 1rem 1.25rem;
  background-color: #FFFFFF;
  border-radius: 0.125rem;
  background-clip: padding-box;
  height: 7.1875rem;
}
.team-overview--card-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.team-overview--card-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  background-clip: padding-box;
}
.team-overview--card-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #4A5468;
}
.team-overview--card-value {
  font-size: 1.5rem;
  font-weight: 400;
  color: #2D3648;
  line-height: 1.2;
}
.team-overview--card-value .unit {
  font-size: 1.25rem;
  font-weight: 400;
  color: #717D96;
}
.team-overview--card-progress {
  margin-top: 0.75rem;
}
@media (min-width: 768px) {
  .team-overview--cards {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 1rem;
  }
  .team-overview--card {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding: 1.25rem 1.5rem;
  }
}
@media (min-width: 992px) {
  .team-overview--card {
    height: auto;
  }
}
@media (min-width: 1200px) {
  .team-overview--title {
    margin-bottom: 1.25rem;
  }
  .team-overview--card {
    padding: 1.5rem;
  }
  .team-overview--card-value {
    font-size: 2rem;
  }
}

.team-members {
  margin-bottom: 1.5rem;
}
.team-members--header {
  margin-bottom: 1rem;
}
.team-members--title {
  margin-bottom: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.team-members--filters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.75rem;
}
.team-members--search {
  width: 100%;
}
.team-members--filter-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.team-members--filter-select {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.team-members--filter-btn {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media (min-width: 768px) {
  .team-members--header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .team-members--title {
    margin-bottom: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
  .team-members--filters {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 0.75rem;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    max-width: 32rem;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .team-members--search {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    max-width: 14rem;
  }
  .team-members--filter-row {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }
  .team-members--filter-select {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    min-width: 8rem;
  }
}
@media (min-width: 992px) {
  .team-members {
    padding: 1.25rem;
    background-color: #FFFFFF;
  }
}

@media (min-width: 992px) {
  .member-cards {
    display: none;
  }
}

.member-card {
  background-color: #FFFFFF;
  border-radius: 0.125rem;
  background-clip: padding-box;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
}
.member-card--header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 1rem;
}
.member-card--info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.125rem;
}
.member-card--name {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #2D3648;
}
.member-card--role {
  font-size: 0.75rem;
  color: #717D96;
}
.member-card--tag {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.25rem;
  background-clip: padding-box;
  white-space: nowrap;
}
.member-card--tag.tag-danger {
  background-color: #C8102E;
  color: #FFFFFF;
}
.member-card--tag.tag-success {
  background-color: #EDF0F7;
  color: #4A5468;
}
.member-card--stats {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.member-card--stat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}
.member-card--stat-label {
  font-size: 0.875rem;
  color: #717D96;
}
.member-card--stat-value {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
}
.member-card--stat-value.text-green {
  color: #00A63E;
}
.member-card--stat-value.text-red {
  color: #C8102E;
}
.member-card--stat-sub {
  font-size: 0.75rem;
  font-weight: 400;
  color: #A0ABC0;
}
.member-card--time {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0;
  font-size: 0.875rem;
  color: #4A5468;
}
.member-card--footer {
  padding-top: 0.75rem;
  border-top: 1px solid #EDF0F7;
}

.team-table-wrapper {
  display: none;
  background-color: #FFFFFF;
  border-radius: 0.125rem;
  background-clip: padding-box;
  overflow: hidden;
}
@media (min-width: 992px) {
  .team-table-wrapper {
    display: block;
    border: 1px solid #E2E7F0;
    border-bottom: 0;
  }
}

.datatable-wrapper .datatable-top,
.datatable-wrapper .datatable-bottom {
  display: none;
}

.datatable-wrapper.no-footer .datatable-container {
  overflow-x: auto;
  border-color: #E2E7F0;
}

.team-table-wrapper table,
.record-table-wrapper table,
.training-record-detail--table-wrapper table,
table.dataTable-table {
  width: 100%;
  border-collapse: collapse;
}
.team-table-wrapper table thead tr,
.record-table-wrapper table thead tr,
.training-record-detail--table-wrapper table thead tr,
table.dataTable-table thead tr {
  background-color: #F7F9FC;
  border-bottom: 1px solid #E2E7F0;
}
.team-table-wrapper table thead tr:last-child::after,
.record-table-wrapper table thead tr:last-child::after,
.training-record-detail--table-wrapper table thead tr:last-child::after,
table.dataTable-table thead tr:last-child::after {
  content: "";
}
.team-table-wrapper table thead th,
.record-table-wrapper table thead th,
.training-record-detail--table-wrapper table thead th,
table.dataTable-table thead th {
  padding: 0.75rem 0.75rem;
  border-color: #E2E7F0;
}
.team-table-wrapper table tbody tr,
.record-table-wrapper table tbody tr,
.training-record-detail--table-wrapper table tbody tr,
table.dataTable-table tbody tr {
  border-bottom: 1px solid #E2E7F0;
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.team-table-wrapper table tbody tr:hover,
.record-table-wrapper table tbody tr:hover,
.training-record-detail--table-wrapper table tbody tr:hover,
table.dataTable-table tbody tr:hover {
  background-color: #F7F9FC;
}
.team-table-wrapper table tbody tr:last-child,
.record-table-wrapper table tbody tr:last-child,
.training-record-detail--table-wrapper table tbody tr:last-child,
table.dataTable-table tbody tr:last-child {
  border-bottom: none;
}
.team-table-wrapper table tbody td,
.record-table-wrapper table tbody td,
.training-record-detail--table-wrapper table tbody td,
table.dataTable-table tbody td {
  padding: 1rem 0.75rem;
  font-size: 0.875rem;
  color: #2D3648;
  vertical-align: middle;
}
.team-table-wrapper table .datatable-sorter,
.record-table-wrapper table .datatable-sorter,
.training-record-detail--table-wrapper table .datatable-sorter,
table.dataTable-table .datatable-sorter {
  padding: 0;
}
.team-table-wrapper table .datatable-sorter::before,
.record-table-wrapper table .datatable-sorter::before,
.training-record-detail--table-wrapper table .datatable-sorter::before,
table.dataTable-table .datatable-sorter::before {
  right: 0.75rem;
  bottom: 0.125rem;
}
.team-table-wrapper table .datatable-sorter::after,
.record-table-wrapper table .datatable-sorter::after,
.training-record-detail--table-wrapper table .datatable-sorter::after,
table.dataTable-table .datatable-sorter::after {
  right: 0.75rem;
  top: 0.125rem;
}

.table-member--info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.125rem;
}
.table-member--name {
  font-weight: 600;
  color: #2D3648;
}
.table-member--role {
  font-size: 0.8125rem;
  color: #717D96;
}

.table-stat--value {
  font-size: 1rem;
  font-weight: 600;
}
.table-stat--value.text-green {
  color: #00A63E;
}
.table-stat--value.text-red {
  color: #C8102E;
}
.table-stat--sub {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  line-height: 100%;
  color: #A0ABC0;
}

.table-time {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.375rem;
  color: #4A5468;
}

.table-tag {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.25rem;
  background-clip: padding-box;
}
.table-tag.tag-danger {
  background-color: #C8102E;
  color: #FFFFFF;
}
.table-tag.tag-success {
  background-color: #EDF0F7;
  color: #4A5468;
}

.table-action .btn {
  white-space: nowrap;
}

.datatable-table > tbody > tr > td, .datatable-table > tbody > tr > th, .datatable-table > tfoot > tr > td, .datatable-table > tfoot > tr > th, .datatable-table > thead > tr > td, .datatable-table > thead > tr > th {
  vertical-align: middle;
}

.team-members--date-range-display {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.record-detail--back {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  padding: 1rem 0;
  font-size: 0.875rem;
  color: #4A5468;
  text-decoration: none;
}
.record-detail--back:hover {
  color: #1A202C;
}

.record-detail--profile {
  background-color: #FFFFFF;
  border-radius: 0.125rem;
  background-clip: padding-box;
  margin-bottom: 1.5rem;
}

.record-detail--profile-main {
  padding: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #E2E7F0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}

.record-detail--avatar {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-clip: padding-box;
  background-color: #EDF0F7;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
}
.record-detail--avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.record-detail--user-info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.record-detail--user-name {
  margin-bottom: 0.25rem;
  line-height: 1.875rem;
}

.record-detail--user-role {
  margin-bottom: 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  color: #717D96;
}

.record-detail--user-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: #717D96;
}
.record-detail--user-meta span + span {
  padding-left: 0.5rem;
  border-left: 1px solid #CBD2E0;
}

.record-detail--stats {
  padding: 1rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 0.75rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.record-detail--stat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}

.record-detail--stat-label {
  font-size: 0.9375rem;
  font-weight: 400;
  color: #717D96;
}

.record-detail--stat-value {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 2rem;
  color: #2D3648;
}

@media (min-width: 768px) {
  .record-detail--stats {
    -ms-grid-columns: 1fr 0.625rem 1fr 0.625rem 1fr 0.625rem 1fr;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.625rem;
  }
}
@media (min-width: 992px) {
  .record-detail--profile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 2rem 2rem;
  }
  .record-detail--profile-main {
    margin-bottom: 0;
    padding: 0;
    border: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
  .record-detail--avatar {
    width: 4rem;
    height: 4rem;
  }
  .record-detail--stats {
    padding: 0;
    gap: 1rem;
  }
  .record-detail--stat {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .record-detail--stat-value {
    font-size: 1.5rem;
  }
}
@media (min-width: 1200px) {
  .record-detail--profile {
    padding: 3rem 2rem;
  }
  .record-detail--stats {
    gap: 2.5rem;
  }
}
.record-detail--training {
  margin-bottom: 1.5rem;
}

.record-detail--training-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.record-detail--training-title {
  margin: 0;
}

.record-detail--training-filters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.record-detail--filter-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.record-detail--filter-select {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.record-detail--filter-btn {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

@media (min-width: 768px) {
  .record-detail--training-header {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .record-detail--training-filters {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }
  .record-detail--filter-row {
    width: auto;
  }
  .record-detail--filter-select {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    min-width: 10rem;
  }
}
.record-detail--tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 2px solid #EDF0F7;
  background-color: #FFFFFF;
}

.record-detail--tab {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #717D96;
  text-decoration: none;
  border-bottom: 4px solid transparent;
  margin-bottom: -2px;
  -webkit-transition: color 0.2s ease, border-color 0.2s ease;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.record-detail--tab:hover {
  color: #4A5468;
}
.record-detail--tab.is-active {
  color: #C8102E;
  border-bottom-color: #C8102E;
}

@media (min-width: 992px) {
  .record-detail--tabs {
    margin-left: auto;
    margin-right: auto;
  }
  .record-detail--tab {
    font-size: 1rem;
  }
}
.record-detail--tab-content {
  display: none;
  padding: 1rem;
  background-color: #FFFFFF;
}
.record-detail--tab-content.is-active {
  display: block;
}

.record-detail--tab-section-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.record-detail--tab-section-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #2D3648;
}

.record-detail--tab-section-filter {
  width: 100%;
}
.record-detail--tab-section-filter .form-select-wrapper {
  width: 100%;
}

@media (min-width: 768px) {
  .record-detail--tab-section-header {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .record-detail--tab-section-filter {
    width: auto;
    min-width: 12.5rem;
  }
}
@media (min-width: 992px) {
  .record-cards {
    display: none;
  }
}

.record-card {
  margin-bottom: 0.75rem;
  padding: 1rem;
  background-color: #FFFFFF;
  border: 1px solid #E2E7F0;
  border-radius: 0.125rem;
  background-clip: padding-box;
}
.record-card--header {
  margin-bottom: 0.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
}
.record-card--name {
  margin: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  position: relative;
  top: -0.125rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
.record-card--meta {
  margin-bottom: 0.75rem;
}
.record-card--details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}
.record-card--detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: #717D96;
}
.record-card--progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 0.375rem;
}
.record-card--progress-label {
  font-size: 0.8125rem;
  color: #717D96;
}
.record-card--progress-value {
  font-size: 0.875rem;
  font-weight: 600;
}
.record-card--progress-bar {
  margin-bottom: 0;
}
.record-card--score {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid #E2E7F0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.record-card--score-label {
  font-size: 0.8125rem;
  color: #717D96;
}
.record-card--score-value {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 1rem;
  font-weight: 600;
}

.record-table-wrapper {
  display: none;
  background-color: #FFFFFF;
  border-radius: 0.125rem;
  background-clip: padding-box;
  overflow: hidden;
}
@media (min-width: 992px) {
  .record-table-wrapper {
    display: block;
    border: 1px solid #E2E7F0;
    border-bottom: 0;
  }
}

.table-progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.table-progress--value {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 600;
  min-width: 2.5rem;
}
.table-progress .progress-bar {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.table-score {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.25rem;
  font-weight: 600;
}

.quilify > .tag {
  width: 3.375rem;
}

.training-record-detail--info {
  margin-bottom: 1.5rem;
  background-color: #FFFFFF;
  border-radius: 0.125rem;
  background-clip: padding-box;
  overflow: hidden;
}

.training-record-detail--info-image {
  padding-top: 56.25%;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.training-record-detail--info-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.training-record-detail--info-content {
  padding: 1rem;
}

.training-record-detail--info-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: #2D3648;
  margin-bottom: 0.375rem;
}

.training-record-detail--info-desc {
  margin: 0;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #4A5468;
}

.training-record-detail--info-stats {
  margin-top: 1rem;
  padding-top: 1rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 0.75rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.training-record-detail--info-stat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}

.training-record-detail--info-stat-label {
  font-size: 0.875rem;
  font-weight: 400;
  color: #717D96;
}

.training-record-detail--info-stat-value {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 2rem;
  color: #2D3648;
}

@media (min-width: 992px) {
  .training-record-detail--info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
  .training-record-detail--info-image {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 40%;
    padding-top: 0;
    min-height: 16rem;
  }
  .training-record-detail--info-content {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding: 1.5rem 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .training-record-detail--info-title {
    font-size: 1.5rem;
  }
  .training-record-detail--info-desc {
    font-size: 1rem;
  }
  .training-record-detail--info-stats {
    margin-top: auto;
  }
  .training-record-detail--info-stat-value {
    font-size: 1.5rem;
  }
}
@media (min-width: 1200px) {
  .training-record-detail--info {
    padding: 1.25rem;
  }
  .training-record-detail--info-image {
    width: 29.375rem;
  }
  .training-record-detail--info-content {
    padding: 2rem 2.5rem;
  }
}
.training-record-detail--members {
  margin-bottom: 1.5rem;
}

.training-record-detail--members-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.training-record-detail--members-title {
  margin: 0;
}

.training-record-detail--members-filters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.training-record-detail--filter-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.training-record-detail--filter-select {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.training-record-detail--filter-btn {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.training-record-detail--date-range-display {
  background-color: #FFFFFF;
  border: 1px solid #CBD2E0;
  background-color: #FFFFFF;
  border-radius: 0.125rem;
  background-clip: padding-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 2.75rem;
  gap: 0.5rem;
  width: 100%;
}

@media (min-width: 768px) {
  .training-record-detail--members-header {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .training-record-detail--members-filters {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }
  .training-record-detail--filter-row {
    width: auto;
  }
  .training-record-detail--filter-select {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    min-width: 12rem;
  }
}
@media (min-width: 992px) {
  .training-record-detail--member-cards {
    display: none;
  }
}

.training-record-detail--member-card {
  margin-bottom: 0.75rem;
  padding: 1rem;
  background-color: #FFFFFF;
  border-radius: 0.125rem;
  background-clip: padding-box;
}
.training-record-detail--member-card-header {
  margin-bottom: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
}
.training-record-detail--member-card-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.125rem;
}
.training-record-detail--member-card-name {
  font-size: 1rem;
  font-weight: 600;
  color: #2D3648;
}
.training-record-detail--member-card-role {
  font-size: 0.8125rem;
  color: #717D96;
}
.training-record-detail--member-card-details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}
.training-record-detail--member-card-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: #717D96;
}
.training-record-detail--member-card-progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 0.375rem;
}
.training-record-detail--member-card-progress-label {
  font-size: 0.8125rem;
  color: #717D96;
}
.training-record-detail--member-card-progress-value {
  font-size: 0.875rem;
  font-weight: 600;
}
.training-record-detail--member-card-progress-bar {
  margin-bottom: 0;
}

.training-record-detail--table-wrapper {
  display: none;
  background-color: #FFFFFF;
  border-radius: 0.125rem;
  background-clip: padding-box;
  overflow: hidden;
}
@media (min-width: 992px) {
  .training-record-detail--table-wrapper {
    display: block;
    border: 1px solid #E2E7F0;
    border-bottom: 0;
  }
}

.training-record-detail--info-id {
  margin-bottom: 0.5rem;
  display: block;
  font-size: 0.8125rem;
}

.training-record-detail--info-stat-sub {
  font-size: 0.75rem;
  font-weight: 400;
  color: #717D96;
}

.training-record-detail--member-card-score {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid #E2E7F0;
}

.training-record-detail--member-card-score-label {
  font-size: 0.8125rem;
  color: #717D96;
}

.training-record-detail--member-card-score-value {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.change-password-view {
  position: relative;
  width: 100vw;
  height: 100vh;
}
.change-password-view--image-mask {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  -webkit-filter: blur(20px);
          filter: blur(20px);
  background-image: url("../images/background/bg_hompage_blur__m.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
.change-password-view--form {
  padding: 1.5rem;
  width: 100%;
  max-width: 31.25rem;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 45%;
  z-index: 2;
}
.change-password-view .btn-back {
  padding: 0;
  position: absolute;
  left: 1rem;
  top: 2rem;
  z-index: 2;
}
@media (min-width: 992px) {
  .change-password-view--image-mask {
    background-image: url("../images/background/bg_hompage_blur__pc.webp");
  }
}

.form-select-wrapper .form-select.no-bordered + .select2-container--default .select2-selection--single {
  border: 0;
  background-color: #EDF0F7;
}
.form-select-wrapper .form-select.no-bordered + .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #A0ABC0;
}

.form-select-wrapper.select2-active .form-select-icon {
  display: none;
}
.form-select-wrapper .select2-container {
  width: 100% !important;
}
.form-select-wrapper .select2-container--default .select2-selection--single {
  height: auto;
  padding: 0 2.5rem 0 0.75rem;
  height: 2.75rem;
  font-size: 0.9375rem;
  line-height: 0.9375rem;
  color: #4A5468;
  border-radius: 0.125rem;
  background-clip: padding-box;
  outline: none;
  border: 1px solid #CBD2E0;
}
.form-select-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 2.75rem;
  color: #4A5468;
}
.form-select-wrapper .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #A0ABC0;
}
.form-select-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 0.75rem;
}
.form-select-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #A0ABC0 transparent transparent transparent;
}
.form-select-wrapper .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #A0ABC0 transparent;
}

.select2-container--default .select2-results__option {
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  color: #4A5468;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #F7F9FC;
  color: #2D3648;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #EDF0F7;
  color: #C8102E;
  font-weight: 500;
}

.select2-dropdown {
  border: 1px solid #E2E7F0;
  border-radius: 0.125rem;
  background-clip: padding-box;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.form-select-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icons/icon-chevron-down.svg");
  mask-image: url("../images/icons/icon-chevron-down.svg");
  -webkit-mask-size: 1.5rem 1.5rem;
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
  background-color: #717D96;
  height: 100%;
}

.form-select-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}

.select2-container--default .select2-results__option[aria-disabled=true] {
  color: #A0ABC0;
}

.select2-container--default .select2-results__option {
  color: #2D3648;
  border-bottom: 1px solid #E2E7F0;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  color: #C8102E;
  background-color: transparent;
}

.select2-dropdown {
  border: 1px solid #CBD2E0;
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  -ms-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.select2-selection[aria-expanded=true] .select2-selection__arrow {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
/*# sourceMappingURL=all.css.map */