:root {
  --color_blue: #6599ff;
  --color_blue_rgb: 101, 153, 255;
  --color_dark_blue: #0000cc;
  --color_dark_blue_rgb: 0, 0, 238;
  --color_white: #e1e3e5;
  --color_white_rgb: 225, 227, 229;
  --color_gold: #ffcc00;
  --color_gold_rgb: 255, 204, 0;
  --color_gray_primary: #1a1a1a;
  --color_gray_primary_rgb: 26, 26, 26;
  --color_gray_secondary: #3a3a3a;
  --color_gray_secondary_rgb: 58, 58, 58;
  --color_red: #e61919;
  --color_red_rgb: 230, 25, 25;
}
:root,
[data-color-theme="light"] {
  --bg_color: var(--color_white);
  --font_color: var(--color_gray_primary);

  --global_component_bg_color: var(--color_blue); /* for header, navi & footer */

  --link_color: var(--color_dark_blue);

  --frame_bg_color: var(--color_blue);
  --hr_bg_color: var(--color_blue);
  --table_border_color: var(--color_gray_secondary);

  --hover_bg_color: rgba(var(--color_blue_rgb), 0.25);
  --shadow_color: rgba(var(--color_gray_secondary_rgb), 0.25);
}
[data-color-theme="dark"] {
  --bg_color: var(--color_gray_primary);
  --font_color: var(--color_white);

  --global_component_bg_color: var(--color_gray_secondary);

  --link_color: var(--color_blue);

  --frame_bg_color: var(--color_gray_secondary);
  --hr_bg_color: var(--color_gray_secondary);
  --table_border_color: var(--color_gray_secondary);

  --hover_bg_color: rgba(var(--color_white_rgb), 0.2);
  --shadow_color: rgba(var(--color_white_rgb), 0.2);
}


*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg_color);
  color: var(--font_color);
  font-family: Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  -webkit-text-size-adjust: auto;
  -webkit-tap-highlight-color: transparent;
}

/*-- grid --*/
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex-grow: 1;
}

.container {
  min-width: 360px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media(min-width: 840px) {
  .container {
    max-width: 800px;
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.col {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0%;
  max-width: 100%;
}
.col_1,
.col_2,
.col_3,
.col_4,
.col_5,
.col_6,
.col_7,
.col_8,
.col_9,
.col_10,
.col_11,
.col_12,
.col_auto {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}
.col_1 {
  width: 8.333%;
}
.col_2 {
  width: 16.667%;
}
.col_3 {
  width: 25%;
}
.col_4 {
  width: 33.333%;
}
.col_5 {
  width: 41.667%;
}
.col_6 {
  width: 50%;
}
.col_7 {
  width: 58.333%;
}
.col_8 {
  width: 66.667%;
}
.col_9 {
  width: 75%;
}
.col_10 {
  width: 83.333%;
}
.col_11 {
  width: 91.667%;
}
.col_12 {
  width: 100%;
}
.col_auto {
  width: auto;
}

.offset_1 {
  margin-left: 8.333%;
}
.offset_2 {
  margin-left: 16.667%;
}
.offset_3 {
  margin-left: 25%;
}
.offset_4 {
  margin-left: 33.333%;
}
.offset_5 {
  margin-left: 41.667%;
}
.offset_6 {
  margin-left: 50%;
}
.offset_7 {
  margin-left: 58.333%;
}
.offset_8 {
  margin-left: 66.667%;
}
.offset_9 {
  margin-left: 75%;
}
.offset_10 {
  margin-left: 83.333%;
}
.offset_11 {
  margin-left: 91.667%;
}
.offset_auto {
  margin-left: auto;
  margin-right: auto;
}

@media(min-width: 600px) {
  .col_sm {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0%;
    max-width: 100%;
  }
  .col_sm_1,
  .col_sm_2,
  .col_sm_3,
  .col_sm_4,
  .col_sm_5,
  .col_sm_6,
  .col_sm_7,
  .col_sm_8,
  .col_sm_9,
  .col_sm_10,
  .col_sm_11,
  .col_sm_12,
  .col_sm_auto {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
  }
  .col_sm_1 {
    width: 8.333%;
  }
  .col_sm_2 {
    width: 16.667%;
  }
  .col_sm_3 {
    width: 25%;
  }
  .col_sm_4 {
    width: 33.333%;
  }
  .col_sm_5 {
    width: 41.667%;
  }
  .col_sm_6 {
    width: 50%;
  }
  .col_sm_7 {
    width: 58.333%;
  }
  .col_sm_8 {
    width: 66.667%;
  }
  .col_sm_9 {
    width: 75%;
  }
  .col_sm_10 {
    width: 83.333%;
  }
  .col_sm_11 {
    width: 91.667%;
  }
  .col_sm_12 {
    width: 100%;
  }
  .col_sm_auto {
    width: auto;
  }

  .offset_sm_1 {
    margin-left: 8.333%;
  }
  .offset_sm_2 {
    margin-left: 16.667%;
  }
  .offset_sm_3 {
    margin-left: 25%;
  }
  .offset_sm_4 {
    margin-left: 33.333%;
  }
  .offset_sm_5 {
    margin-left: 41.667%;
  }
  .offset_sm_6 {
    margin-left: 50%;
  }
  .offset_sm_7 {
    margin-left: 58.333%;
  }
  .offset_sm_8 {
    margin-left: 66.667%;
  }
  .offset_sm_9 {
    margin-left: 75%;
  }
  .offset_sm_10 {
    margin-left: 83.333%;
  }
  .offset_sm_11 {
    margin-left: 91.667%;
  }
  .offset_sm_auto {
    margin-left: auto;
    margin-right: auto;
  }
}

@media(min-width: 800px) {
  .col_md {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0%;
    max-width: 100%;
  }
  .col_md_1,
  .col_md_2,
  .col_md_3,
  .col_md_4,
  .col_md_5,
  .col_md_6,
  .col_md_7,
  .col_md_8,
  .col_md_9,
  .col_md_10,
  .col_md_11,
  .col_md_12,
  .col_md_auto {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
  }
  .col_md_1 {
    width: 8.333%;
  }
  .col_md_2 {
    width: 16.667%;
  }
  .col_md_3 {
    width: 25%;
  }
  .col_md_4 {
    width: 33.333%;
  }
  .col_md_5 {
    width: 41.667%;
  }
  .col_md_6 {
    width: 50%;
  }
  .col_md_7 {
    width: 58.333%;
  }
  .col_md_8 {
    width: 66.667%;
  }
  .col_md_9 {
    width: 75%;
  }
  .col_md_10 {
    width: 83.333%;
  }
  .col_md_11 {
    width: 91.667%;
  }
  .col_md_12 {
    width: 100%;
  }
  .col_md_auto {
    width: auto;
  }

  .offset_md_1 {
    margin-left: 8.333%;
  }
  .offset_md_2 {
    margin-left: 16.667%;
  }
  .offset_md_3 {
    margin-left: 25%;
  }
  .offset_md_4 {
    margin-left: 33.333%;
  }
  .offset_md_5 {
    margin-left: 41.667%;
  }
  .offset_md_6 {
    margin-left: 50%;
  }
  .offset_md_7 {
    margin-left: 58.333%;
  }
  .offset_md_8 {
    margin-left: 66.667%;
  }
  .offset_md_9 {
    margin-left: 75%;
  }
  .offset_md_10 {
    margin-left: 83.333%;
  }
  .offset_md_11 {
    margin-left: 91.667%;
  }
  .offset_md_auto {
    margin-left: auto;
    margin-right: auto;
  }
}
/*-- / grid --*/

/*-- header --*/
header {
    background-color: var(--global_component_bg_color);
    border-bottom-style: solid;
    border-bottom-color: var(--bg_color);
    border-bottom-width: 0.25rem;
}
@media(max-width: 749px) {
  header {
    display: none;
  }
}

header .club_name {
  color: var(--color_gold);
  font-size: 2.5rem;
  font-weight: bold;
}

header .club_slogan {
  color: var(--color_white);
  font-size: 1.5rem;
  font-weight: bold;
}
/*-- / header --*/

/*-- navi --*/
nav {
    position: sticky;
    top: 0;
    z-index: 9999;
    background-color: var(--global_component_bg_color);
}

#navbar.show {
    display: flex;
}
#navbar hr {
    display: none;
    border-color: var(--color_white);
    margin: 0;
}

#navbar_mobile {
    display: none;
}

#navbar_toggler {
    background-color: var(--global_component_bg_color);
    color: var(--color_gold);
    min-width: 32px;
    height: 32px;
    border-style: solid;
    border-color: var(--color_gold);
    border-radius: 0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    cursor: pointer;
}
#navbar_toggler svg {
    height: 100%;
    width: auto;
}

nav ul {
    list-style: none;
    display: flex;
}

nav .nav_link {
    display: block;
    text-decoration: none;
}
nav .nav_link.active {
    text-decoration: underline;
}
nav ul .nav_link {
    color: var(--color_white);
    font-weight: bold;
    font-size: 1.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
}
nav ul .nav_link:hover {
    text-decoration: underline;
    background-color: rgba(var(--color_white_rgb), 0.25);
}

nav .club_name {
    color: var(--color_gold);
    font-weight: bold;
    font-size: 1.5rem;
}

nav .club_logo {
    height: 32px;
    width: auto;
}

@media(max-width: 750px) {
    #navbar {
        display: none;
    }

    #navbar_mobile {
        display: flex;
    }

    #navbar hr {
        display: block;
    }

    nav ul {
        list-style: none;
        display: block;
    }
}
/*-- / navi --*/

/*-- footer --*/
footer {
    background-color: var(--global_component_bg_color);
    color: var(--color_white);
}
@media(max-width: 700px) {
    footer {
        font-size: 0.875rem;
    }
}

footer .nav_link {
    color: var(--color_white);
    text-decoration: none;
    cursor: pointer;
}
footer .nav_link.active,
footer .nav_link:hover {
    text-decoration: underline;
}
/*-- / footer --*/

hr {
  border: 0;
  border-style: solid;
  border-color: var(--hr_bg_color);
  border-width: 0.063rem;
  border-radius: 0.25rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.container hr {
  margin-top: 1rem;
  margin-bottom: 0;
  margin-left: 1rem;
  margin-right: 1rem;
}

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

a.link {
  color: var(--link_color);
}

.table {
  border-collapse: collapse;
}
.table tr:not(:last-child) {
  border-bottom-style: solid;
  border-bottom-color: var(--table_border_color);
  border-bottom-width: 0.063rem;
}
.table tr:hover {
  background-color: var(--hover_bg_color);
}
.table th {
  text-align: left;
}
.table td {
  vertical-align: top;
}
.table td:first-child {
  padding-left: 0.25rem;
}
.table td:last-child {
  padding-right: 0.25rem;
}
.table td:not(:first-child) {
  padding-left: 1rem;
}
@media(min-width: 750px) {
  .table_glossary tr td:first-child {
    white-space: nowrap;
  }
}

ul.list {
  padding-left: 1rem;
}
ul.list li:not(:first-child) {
  margin-top: 0.5rem;
}

ul.accordion {
    list-style: none;
}
ul.accordion li.accordion_item {
    border-bottom-style: solid;
    border-bottom-color: var(--hr_bg_color);
    border-bottom-width: 0.126rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
ul.accordion li.accordion_item:first-child {
    border-top-style: solid;
    border-top-color: var(--hr_bg_color);
    border-top-width: 0.126rem;
}
ul.accordion li.accordion_item .accordion_header {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    padding: 0.5rem;
    cursor: pointer;
    user-select: none;
}
ul.accordion li.accordion_item .accordion_header:hover {
    background-color: var(--hover_bg_color);
    border-radius: 0.25rem;
}
ul.accordion li.accordion_item .accordion_content {
    margin-top: 0.5rem;
}

.btn {
    display: inline-block;
    width: 100%;
    font-size: 1rem;
    padding: 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
}

.select {
  display: inline-block;
  width: 100%;
  font-size: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/*-- text --*/
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

p {
  margin-bottom: 0.5rem;
}

.text_b {
  font-weight: bold;
}

.text_u {
  text-decoration: underline;
}
.text_ud {
  text-decoration: underline dotted;
}
.text_uw {
  text-decoration: underline wavy;
}
.text_uo {
  text-decoration: underline overline;
}

.text_start {
  text-align: start;
}
.text_end {
  text-align: end;
}
.text_center {
  text-align: center;
}
.text_justify {
  text-align: justify;
}

.nobreak {
  white-space: nowrap;
}
/*-- / text --*/

.m_1 {
  margin: 1rem;
}
.m_0_5 {
  margin: 0.5rem;
}
.ml_1 {
  margin-left: 1rem;
}
.ml_0_5 {
  margin-left: 0.5rem;
}
.ml_auto {
  margin-left: auto;
}
.mr_1 {
  margin-right: 1rem;
}
.mr_0_5 {
  margin-right: 0.5rem;
}
.mr_auto {
  margin-right: auto;
}
.mt_1 {
  margin-top: 1rem;
}
.mt_0_5 {
  margin-top: 0.5rem;
}
.mt_0_25 {
  margin-top: 0.25rem;
}
.mb_1 {
  margin-bottom: 1rem;
}
.mb_0_5 {
  margin-bottom: 0.5rem;
}
.mx_1 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx_0_5 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx_auto {
  margin-left: auto;
  margin-right: auto;
}
.my_1 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my_0_5 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.p_1 {
  padding: 1rem;
}
.p_0_5 {
  padding: 0.5rem;
}
.pl_1 {
  padding-left: 1rem;
}
.pl_0_5 {
  padding-left: 0.5rem;
}
.pr_1 {
  padding-right: 1rem;
}
.pr_0_5 {
  padding-right: 0.5rem;
}
.pt_1 {
  padding-top: 1rem;
}
.pt_0_5 {
  padding-top: 0.5rem;
}
.pb_1 {
  padding-bottom: 1rem;
}
.pb_0_5 {
  padding-bottom: 0.5rem;
}
.px_1 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px_0_5 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.py_1 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py_0_5 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* for horizontal element alignment */
.content_start,
.content_center,
.content_space_between,
.content_space_around,
.content_space_even {
  display: flex;
}
.content_start {
  justify-content: start;
}
.content_end {
  justify-content: end;
}
.content_center {
  justify-content: center;
}
.content_space_between {
  justify-content: space-between;
}
.content_space_around {
  justify-content: space-around;
}
.content_space_even {
  justify-content: space-evenly;
}

/* for vertical element alignment */
.items_start,
.items_center,
.items_end,
.items_stretch {
  display: flex;
}
.items_start {
  align-items: start;
}
.items_center {
  align-items: center;
}
.items_end {
  align-items: end;
}
.items_stretch {
  align-items: stretch;
}

/*-- customized --*/
.bi-moon-fill {
    color: var(--color_white);
    cursor: pointer;
}

.toggle_btn {
  position: relative;
  display: inline-block;
  background-color: #cccccc;
  width: 36px;
  height: 18px;
  border: none;
  border-radius: 18px;
  outline: none;
  cursor: pointer;
}
.toggle_btn::before {
  position: absolute;
  display: block;
  content: "";
  background-color: white;
  top: 3px;
  left: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: 0.3s;
}
.toggle_btn.on {
  background-color: #3296f3;
}
.toggle_btn.on::before {
  transform: translateX(16px);
}

.frame {
  border-style: solid;
  border-color: var(--frame_bg_color);
  border-width: 0.25rem;
  border-radius: 0.25rem;
}

.video_wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.message_box {
  background-color: rgba(var(--color_gold_rgb), 0.20);
  border-left-style: solid;
  border-left-color: var(--color_gold);
  border-left-width: 0.5rem;
  border-radius: 0.25rem;
}
.message_box.error {
  background-color: rgba(var(--color_red_rgb), 0.50);
  border-left-color: var(--color_red);
}

.clickable {
  cursor: pointer;
}


header,
nav,
footer {
  user-select: none;
  -webkit-user-select: none;
}
img {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
/*-- / customized --*/

@media(min-width: 600px) {
  /*-- text --*/
  .text_sm_start {
    text-align: start;
  }
  .text_sm_end {
    text-align: end;
  }
  .text_sm_center {
    text-align: center;
  }
  .text_sm_justify {
    text-align: justify;
  }
  /*-- / text --*/

  .m_sm_1 {
    margin: 1rem;
  }
  .m_sm_0_5 {
    margin: 0.5rem;
  }
  .ml_sm_1 {
    margin-left: 1rem;
  }
  .ml_sm_0_5 {
    margin-left: 0.5rem;
  }
  .ml_sm_auto {
    margin-left: auto;
  }
  .mr_sm_1 {
    margin-right: 1rem;
  }
  .mr_sm_0_5 {
    margin-right: 0.5rem;
  }
  .mr_sm_auto {
    margin-right: auto;
  }
  .mt_sm_1 {
    margin-top: 1rem;
  }
  .mt_sm_0_5 {
    margin-top: 0.5rem;
  }
  .mb_sm_1 {
    margin-bottom: 1rem;
  }
  .mb_sm_0_5 {
    margin-bottom: 0.5rem;
  }
  .mx_sm_1 {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .mx_sm_0_5 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  .mx_sm_auto {
    margin-left: auto;
    margin-right: auto;
  }
  .my_sm_1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .my_sm_0_5 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .p_sm_1 {
    padding: 1rem;
  }
  .p_sm_0_5 {
    padding: 0.5rem;
  }
  .pl_sm_1 {
    padding-left: 1rem;
  }
  .pl_sm_0_5 {
    padding-left: 0.5rem;
  }
  .pr_sm_1 {
    padding-right: 1rem;
  }
  .pr_sm_0_5 {
    padding-right: 0.5rem;
  }
  .pt_sm_1 {
    padding-top: 1rem;
  }
  .pt_sm_0_5 {
    padding-top: 0.5rem;
  }
  .pb_sm_1 {
    padding-bottom: 1rem;
  }
  .pb_sm_0_5 {
    padding-bottom: 0.5rem;
  }
  .px_sm_1 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .px_sm_0_5 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .py_sm_1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .py_sm_0_5 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* for horizontal element alignment */
  .content_sm_start,
  .content_sm_center,
  .content_sm_space_between,
  .content_sm_space_around,
  .content_sm_space_even {
    display: flex;
  }
  .content_sm_start {
    justify-content: start;
  }
  .content_sm_end {
    justify-content: end;
  }
  .content_sm_center {
    justify-content: center;
  }
  .content_sm_space_between {
    justify-content: space-between;
  }
  .content_sm_space_around {
    justify-content: space-around;
  }
  .content_sm_space_even {
    justify-content: space-evenly;
  }

  /* for vertical element alignment */
  .items_sm_start,
  .items_sm_center,
  .items_sm_end,
  .items_sm_stretch {
    display: flex;
  }
  .items_sm_start {
    align-items: start;
  }
  .items_sm_center {
    align-items: center;
  }
  .items_sm_end {
    align-items: end;
  }
  .items_sm_stretch {
    align-items: stretch;
  }
}

@media(min-width: 800px) {
  /*-- text --*/
  .text_md_start {
    text-align: start;
  }
  .text_md_end {
    text-align: end;
  }
  .text_md_center {
    text-align: center;
  }
  .text_md_justify {
    text-align: justify;
  }
  /*-- / text --*/

  .m_md_1 {
    margin: 1rem;
  }
  .m_md_0_5 {
    margin: 0.5rem;
  }
  .ml_md_1 {
    margin-left: 1rem;
  }
  .ml_md_0_5 {
    margin-left: 0.5rem;
  }
  .ml_md_auto {
    margin-left: auto;
  }
  .mr_md_1 {
    margin-right: 1rem;
  }
  .mr_md_0_5 {
    margin-right: 0.5rem;
  }
  .mr_md_auto {
    margin-right: auto;
  }
  .mt_md_1 {
    margin-top: 1rem;
  }
  .mt_md_0_5 {
    margin-top: 0.5rem;
  }
  .mb_md_1 {
    margin-bottom: 1rem;
  }
  .mb_md_0_5 {
    margin-bottom: 0.5rem;
  }
  .mx_md_1 {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .mx_md_0_5 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  .mx_md_auto {
    margin-left: auto;
    margin-right: auto;
  }
  .my_md_1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .my_md_0_5 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .p_md_1 {
    padding: 1rem;
  }
  .p_md_0_5 {
    padding: 0.5rem;
  }
  .pl_md_1 {
    padding-left: 1rem;
  }
  .pl_md_0_5 {
    padding-left: 0.5rem;
  }
  .pr_md_1 {
    padding-right: 1rem;
  }
  .pr_md_0_5 {
    padding-right: 0.5rem;
  }
  .pt_md_1 {
    padding-top: 1rem;
  }
  .pt_md_0_5 {
    padding-top: 0.5rem;
  }
  .pb_md_1 {
    padding-bottom: 1rem;
  }
  .pb_md_0_5 {
    padding-bottom: 0.5rem;
  }
  .px_md_1 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .px_md_0_5 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .py_md_1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .py_md_0_5 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* for horizontal element alignment */
  .content_md_start,
  .content_md_center,
  .content_md_space_between,
  .content_md_space_around,
  .content_md_space_even {
    display: flex;
  }
  .content_md_start {
    justify-content: start;
  }
  .content_md_end {
    justify-content: end;
  }
  .content_md_center {
    justify-content: center;
  }
  .content_md_space_between {
    justify-content: space-between;
  }
  .content_md_space_around {
    justify-content: space-around;
  }
  .content_md_space_even {
    justify-content: space-evenly;
  }

  /* for vertical element alignment */
  .items_md_start,
  .items_md_center,
  .items_md_end,
  .items_md_stretch {
    display: flex;
  }
  .items_md_start {
    align-items: start;
  }
  .items_md_center {
    align-items: center;
  }
  .items_md_end {
    align-items: end;
  }
  .items_md_stretch {
    align-items: stretch;
  }
}