@import url("/OutSystemsUIWeb/Theme.BaseTheme.css?7689");

:root {
  --font-size-display: 30px;
  --font-size-h1: 26px;
  --font-size-h2: 24px;
  --font-size-h3: 22px;
  --font-size-h4: 20px;
  --font-size-h5: 18px;
  --font-size-h6: 16px;
  --font-size-base: 14px;
  --font-size-s: 12px;
  --font-size-xs: 10px;
  --font-size-xxs: 6px;
  --font-size-xxxs: 2px;
  --font-medium: 500;
  --color-primary-lightest: #7E30FA;
  --color-primary-lighter: #4D05BF;
  --color-primary-light: #4304A6;
  --color-primary: #001d6c;
  --color-primary-dark: #25025B;
  --color-primary-darker: #25025B;
  --color-primary-darkest: #070011;
  --color-primary-gradient: linear-gradient(180deg, #2A0D6F 0%, #2128AE 100%);
  --color-primary-gradient-vertical: linear-gradient(90.06deg, #2A0D6F 0%, #2128AE 100%);
  --color-secondary-lightest: #C789DD;
  --color-secondary-lighter: #A13AC7;
  --color-secondary-light: #9133B4;
  --color-secondary: #491d8b;
  --color-secondary-dark: #612278;
  --color-secondary-darker: #411750;
  --color-secondary-darkest: #210C29;
  --color-secondary-gradient: linear-gradient(134.63deg, #71288C 3.55%, #6e6669 104.4%);
  --color-secondary-gradient-vertical: linear-gradient(90.06deg, #71288C 0%, #DD2F6E 100%);
  --color-tertiary-lightest: #FBD6CA;
  --color-tertiary-lighter: #F58C6B;
  --color-tertiary-light: #F37A53;
  --color-tertiary: #F05523;
  --color-tertiary-dark: #EA4510;
  --color-tertiary-darker: #BA370D;
  --color-tertiary-darkest: #8A2909;
  --color-tertiary-gradient: linear-gradient(180deg, #F05523 0%, #FFC933 100%);
  --color-tertiary-gradient-vertical: linear-gradient(90.06deg, #F05523 0%, #FFC933 100%);
  --color-orange-lightest: #FEF0E6;
  --color-orange-lighter: #FBC29B;
  --color-orange-light: #F99451;
  --color-orange: #F77339;
  --color-orange-dark: #D25705;
  --color-orange-darker: #873803;
  --color-orange-darkest: #873803;
  --color-neutral-1: #F5F5F5;
  --color-neutral-2: #FAFAFA;
  --color-neutral-3: #EAEAEA;
  --color-neutral-4: #DEDEDE;
  --color-neutral-5: #D7D7D7;
  --color-neutral-6: #BEBEBE;
  --color-neutral-7: #7E7E7E;
  --color-neutral-8: #5A5A5A;
  --color-neutral-9: #333333;
  --color-error-light: #FBEAEA;
  --color-error: #E03131;
  --color-warning-light: #FCF5E6;
  --color-warning: #E9A100;
  --color-success-light: #EAF2EB;
  --color-success: #2A843C;
  --color-info-light: #E6F5FB;
  --color-info: #009DDE;
  --space-xs: 5px;
  --space-s: 10px;
  --space-base: 20px;
  --space-m: 30px;
  --space-l: 40px;
  --space-xl: 50px;
  --space-xxl: 60px;
  --border-radius-base: 16px;
  --border-radius-m: 30px;
  --border-size-xl: 4px;
  --shadow-s: 0px 2px 10px rgba(47, 3, 116, .08);
  --shadow-m: 3px 13px 50px rgba(47, 3, 116, .08);
  --header-size: 85px;
  --color-background-body: #FAFAFA;
  --overlay-background: rgba(255, 255, 255, .6);
  --os-safe-area-top: env(safe-area-inset-top);
  --os-safe-area-right: env(safe-area-inset-right);
  --os-safe-area-bottom: env(safe-area-inset-bottom);
  --os-safe-area-left: env(safe-area-inset-left); }
  :root .tablet,
  :root .phone {
    --side-menu-size: 100%; }

/*! =========================================================================== */
/*! Resets                                                                      */
/*! =========================================================================== */
/* Font Family */
@font-face {
  font-family: "Montserrat";
  src: url("/ClanProfile_Th/Montserrat-Light.ttf") format("truetype");
  font-style: normal;
  font-weight: 300; }

@font-face {
  font-family: "Montserrat";
  src: url("/ClanProfile_Th/Montserrat-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400; }

@font-face {
  font-family: "Montserrat";
  src: url("/ClanProfile_Th/Montserrat-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500; }

@font-face {
  font-family: "Montserrat";
  src: url("/ClanProfile_Th/Montserrat-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600; }

@font-face {
  font-family: "Montserrat";
  src: url("/ClanProfile_Th/Montserrat-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700; }

html {
  font-family: 'Montserrat', sans-serif; }

body {
  line-height: 1.2;
  color: var(--color-neutral-10); }

html > body {
    min-height: 100px;
}

label {
  font-weight: var(--font-semi-bold);
  font-size: var(--font-size-base);
  color: var(--color-neutral-10); }
  .tablet label,
  .phone label {
    font-size: calc(var(--font-size-base) - 2px); }

p {
  margin: var(--space-none); }

[data-label].mandatory::after {
  background: var(--color-tertiary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: var(--font-size-base);
  font-weight: var(--font-semi-bold); }

.has-accessible-features :focus {
  box-shadow: var(--shadow-none); }

@font-face {
  font-family: 'clan';
  src: url("/Clan_Th_Traditional/clan.eot");
  src: url("/Clan_Th_Traditional/clan.eot") format("embedded-opentype"), url("/Clan_Th_Traditional/clan.ttf") format("truetype"), url("/Clan_Th_Traditional/clan.woff") format("woff"), url("/Clan_Th_Traditional/clan.svg") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block; }
  
/*! =========================================================================== */
/*! HTML Elements                                                               */
/*! =========================================================================== */
/*! HTML Elements - Links */
a,
a:visited {
  color: var(--color-neutral-10); }
  a:hover,
  a:visited:hover {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 2px; }
  .has-accessible-features a:focus, .has-accessible-features
  a:visited:focus {
    box-shadow: var(--shadow-none);
    background-color: var(--color-neutral-0); }
  a > span.fa + span,
  a:visited > span.fa + span {
    margin-top: -8px;
    display: inline-block;
    vertical-align: middle; }
    a > span.fa + span:hover,
    a:visited > span.fa + span:hover {
      text-decoration: underline;
      text-decoration-thickness: 2px; }
  a.text-primary,
  a:visited.text-primary {
    color: var(--color-primary); }

/*! HTML Elements - Headings */
h6,
.heading6,
h5,
.heading5 {
  font-weight: var(--font-bold); }

/*! =========================================================================== */
/*! Page Layout                                                                 */
/*! =========================================================================== */
/*! Page Layout - Header */
.header .app-logo {
  width: 92px;
  height: 35px;
  margin: var(--space-none);
  border-radius: var(--border-radius-none); }
  .tablet .header .app-logo,
  .phone .header .app-logo {
    width: 72px;
    height: 26px; }

.tablet .header-top,
.phone .header-top {
  --header-size: 56px; }

.menu-icon {
  margin: var(--space-none); }

.menu-back {
  color: var(--color-neutral-10); }

.user-info > a {
  position: relative;
  display: inline-block;
  border: 1px solid var(--color-primary);
  width: 32px;
  height: 32px; }
  .user-info > a::before {
    content: '';
    position: absolute;
    top: -2px;
    bottom: -2px;
    right: -2px;
    left: -2px;
    background: var(--color-primary);
    border-radius: var(--border-radius-circle);
    border: 1px solid var(--color-primary);
    z-index: -1; }
  .user-info > a::after {
    content: '';
    position: absolute;
    top: -2px;
    bottom: 50%;
    right: 50%;
    left: -3px;
    background: var(--color-neutral-0);
    border-radius: var(--border-radius-circle);
    border: 1px solid var(--color-primary);
    z-index: -1; }

.user-info img {
  width: 24px;
  height: 24px;
  margin-right: var(--space-xs);
  border-radius: var(--border-radius-circle); }
  .table .user-info img,
  .phone .user-info img {
    border: var(--border-size-m) solid var(--color-neutral-0);
    width: 32px;
    height: 32px;
    margin-right: var(--space-none); }

.Application_Menu .user-info-icon {
  display: none; }

.user-info-details {
  display: none; }
  .Application_Menu .user-info-details {
    display: inline-block; }

/*! Page Layout - ThemeGrid_Container */
.desktop .ThemeGrid_Container,
.ThemeGrid_Container {
  max-width: 1480px;
  padding: var(--space-l); }

.desktop .ThemeGrid_Container.main-content {
  padding: var(--space-l); }

.layout:not(.layout-side) .footer.ThemeGrid_Container {
  padding: var(--space-none);
  max-width: none; }
  .layout:not(.layout-side) .footer.ThemeGrid_Container > div:first-child {
    padding: var(--space-none) var(--space-l);
    max-width: 1480px;
    margin: auto; }
  .layout:not(.layout-side) .footer.ThemeGrid_Container > div:last-child a, .layout:not(.layout-side) .footer.ThemeGrid_Container > div:last-child a:visited {
    color: var(--color-neutral-0); }
  .tablet .layout:not(.layout-side) .footer.ThemeGrid_Container,
  .phone .layout:not(.layout-side) .footer.ThemeGrid_Container {
    padding: var(--space-none); }

.layout-top .header .ThemeGrid_Container {
  padding: var(--space-none) var(--space-l); }

.tablet .layout-top .header .ThemeGrid_Container,
.phone .layout-top .header .ThemeGrid_Container {
  padding-left: calc(var(--os-safe-area-left) + var(--space-base));
  padding-right: calc(var(--os-safe-area-right) + var(--space-base)); }

.layout .header {
    background: linear-gradient(45deg, #001d6c, #491d8b, #7b1fa2, #d81b60, #ff5722, #ffc107);;
  box-shadow: var(--shadow-m); }
  .tablet .layout .header,
  .phone .layout .header {
    position: relative; }

.tablet .layout .main,
.phone .layout .main {
  --header-size: 0; }

/*! Page Layout - Header Top*/
.header-top {
  position: relative;
  justify-content: space-between; }

.header-center {
  position: absolute;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-none); }
  .phone .header-center,
  .header-center .tablet {
    position: relative;
    left: auto;
    transform: none;
    justify-content: center; }

.tablet .header-right,
.phone .header-right {
  display: inline-flex; }
  .tablet .header-right .user-info,
  .phone .header-right .user-info {
    display: flex; }
    .tablet .header-right .user-info-icon .fa,
    .phone .header-right .user-info-icon .fa {
      width: auto; }

/*! Page Layout - Menu - App Menu Link */
.Application_Menu .application-name {
  display: none; }

.tablet .layout-top .Application_Menu .application-name,
.phone .layout-top .Application_Menu .application-name {
  left: calc(0px - var(--side-menu-size));
  transform: translateX(0);
  transition: transform 430ms ease-out;
  width: var(--side-menu-size);
  position: absolute;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 12px;
  display: inline-flex;
  height: auto;
  bottom: 0; }

.tablet .layout-top .Application_Menu.is--visible .application-name,
.phone .layout-top .Application_Menu.is--visible .application-name {
  transform: translateX(100%); }

.tablet .layout-top .Application_Menu .menu-login-info,
.phone .layout-top .Application_Menu .menu-login-info {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: var(--space-xl) var(--space-xl) var(--space-base);
  color: var(--color-neutral-0);
  display: flex; }
  .tablet .layout-top .Application_Menu .menu-login-info .heading6,
  .phone .layout-top .Application_Menu .menu-login-info .heading6 {
    color: var(--color-neutral-0); }
  .tablet .layout-top .Application_Menu .menu-login-info .user-info,
  .phone .layout-top .Application_Menu .menu-login-info .user-info {
    position: relative;
    left: auto;
    bottom: auto; }
    .tablet .layout-top .Application_Menu .menu-login-info .user-info > a,
    .phone .layout-top .Application_Menu .menu-login-info .user-info > a {
      width: 46px;
      height: 46px; }
      .tablet .layout-top .Application_Menu .menu-login-info .user-info > a::before,
      .phone .layout-top .Application_Menu .menu-login-info .user-info > a::before {
        top: -4px;
        bottom: -4px;
        right: -4px;
        left: -4px;
        background: var(--color-neutral-0); }
      .tablet .layout-top .Application_Menu .menu-login-info .user-info > a::after,
      .phone .layout-top .Application_Menu .menu-login-info .user-info > a::after {
        top: -4px;
        left: -4px;
        background: var(--color-tertiary); }
    .tablet .layout-top .Application_Menu .menu-login-info .user-info img,
    .phone .layout-top .Application_Menu .menu-login-info .user-info img {
      width: 46px;
      height: 46px;
      border: 3px solid var(--color-tertiary); }
  .tablet .layout-top .Application_Menu .menu-login-info > a .fa,
  .phone .layout-top .Application_Menu .menu-login-info > a .fa {
    font-size: 26px;
    width: auto;
    color: var(--color-neutral-0); }

.Menu_TopMenus {
  align-items: center; }
  .Menu_TopMenus .menu-top-menus > a,
  .Menu_TopMenus .menu-top-menus > a:visited {
    color: var(--color-neutral-10);
    font-weight: var(--font-semi-bold); }
    .Menu_TopMenus .menu-top-menus > a:not(:last-child),
    .Menu_TopMenus .menu-top-menus > a:visited:not(:last-child) {
      margin-right: var(--space-xl); }
    .phone .Menu_TopMenus .menu-top-menus > a,
    .tablet .Menu_TopMenus .menu-top-menus > a, .phone
    .Menu_TopMenus .menu-top-menus > a:visited,
    .tablet
    .Menu_TopMenus .menu-top-menus > a:visited {
      display: inline-flex;
      margin: var(--space-none);
      width: 100%;
      padding: var(--space-s) var(--space-l);
      border-left: var(--border-size-m) solid transparent;
      border-bottom: var(--border-size-m) solid transparent;
      border-top: var(--border-size-m) solid transparent;
      color: var(--color-neutral-0);
      font-weight: var(--font-bold);
      font-size: var(--font-size-h6); }
      .phone .Menu_TopMenus .menu-top-menus > a.active,
      .tablet .Menu_TopMenus .menu-top-menus > a.active, .phone
      .Menu_TopMenus .menu-top-menus > a:visited.active,
      .tablet
      .Menu_TopMenus .menu-top-menus > a:visited.active {
        border-left-color: var(--color-primary); }
  .Menu_TopMenus .menu-bottom-menus {
    padding: var(--space-none) var(--space-l);
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: var(--space-xl); }
    .Menu_TopMenus .menu-bottom-menus > a,
    .Menu_TopMenus .menu-bottom-menus > a:visited {
      color: var(--color-neutral-0);
      font-weight: var(--font-semi-bold);
      font-size: var(--font-size-h6);
      padding: var(--space-s) var(--space-none); }
      .Menu_TopMenus .menu-bottom-menus > a .fa,
      .Menu_TopMenus .menu-bottom-menus > a:visited .fa {
        margin-right: var(--space-s); }
  .tablet .layout-top .Menu_TopMenus,
  .phone .layout-top .Menu_TopMenus {
    box-shadow: var(--shadow-none);
    flex: 1;
    background: linear-gradient(180deg, #F05523 0%, #FFC933 100%);
    align-items: flex-start;
    justify-content: space-between; }

.menu-icon-line {
    background-color: white;
}

/*! =========================================================================== */
/*! Widgets                                                                     */
/*! =========================================================================== */
/*! Widgets - Button */
.Button,
.btn {
  line-height: 1;
  background: var(--color-secondary);
  background-origin: border-box;
  font-weight: var(--font-bold);
  border-radius: var(--border-radius-rounded);
  color: var(--color-neutral-0);
  border: var(--border-size-m) solid transparent;
  transition: none; }
  .Button:focus,
  .btn:focus {
    box-shadow: var(--shadow-none); }
  .has-accessible-features .Button:focus, .has-accessible-features
  .btn:focus {
    box-shadow: var(--shadow-none);
    border-color: var(--color-primary); }
  .Button:hover,
  .desktop .Button:hover,
  .btn:hover,
  .desktop
  .btn:hover {
    filter: none;
    background: linear-gradient(155.06deg, #491D8B 15.39%, #D81B60 98.74%);
    color: white;
    box-shadow: var(--shadow-none);
    border-color: var(--color-primary); }
  .Button-primary-gradient-outline,
  .btn-primary-gradient-outline {
    position: relative;
    background: var(--color-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border: var(--border-size-none);
    z-index: 0;
    height: 36px; }
    .Button-primary-gradient-outline::before,
    .btn-primary-gradient-outline::before {
      content: '';
      position: absolute;
      top: -2px;
      right: -2px;
      left: -2px;
      bottom: -2px;
      background: var(--color-primary-gradient);
      border-radius: var(--border-radius-rounded);
      z-index: -1; }
    .Button-primary-gradient-outline::after,
    .btn-primary-gradient-outline::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background: var(--color-neutral-0);
      border-radius: var(--border-radius-rounded);
      z-index: -1; }
  .Button-tertiary-gradient,
  .btn-tertiary-gradient {
    background: var(--color-tertiary-gradient);
    border-color: var(--color-tertiary-gradient); }
    .desktop .Button-tertiary-gradient:hover, .desktop
    .btn-tertiary-gradient:hover {
      background: var(--color-neutral-0);
      border-color: var(--color-yellow-light);
      color: var(--color-yellow-light); }
  .Button-tertiary-gradient-vertical,
  .btn-tertiary-gradient-vertical {
    background: var(--color-tertiary-gradient-vertical);
    border-color: var(--color-tertiary-gradient-vertical); }
    .desktop .Button-tertiary-gradient-vertical:hover, .desktop
    .btn-tertiary-gradient-vertical:hover {
      background: var(--color-neutral-0);
      border-color: var(--color-yellow-light);
      color: var(--color-yellow-light); }
  .Button-tertiary-gradient-outline,
  .btn-tertiary-gradient-outline {
    position: relative;
    background: var(--color-neutral-0);
    border: var(--border-size-none); }
    .Button-tertiary-gradient-outline::before,
    .btn-tertiary-gradient-outline::before {
      content: '';
      position: absolute;
      top: -2px;
      right: -2px;
      left: -2px;
      bottom: -2px;
      background: var(--color-tertiary-gradient);
      border-radius: var(--border-radius-rounded);
      z-index: -1; }
  .Button-plain,
  .btn-plain {
    background: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: var(--font-bold);
    padding: var(--space-none) var(--space-base); }
    .Button-plain.btn-icon,
    .btn-plain.btn-icon {
      padding: var(--space-none); }
    .desktop .Button-plain:hover, .desktop
    .btn-plain:hover {
      cursor: pointer;
      border-color: var(--color-primary); }
  .Button-share,
  .btn-share {
    height: 64px;
    width: 64px;
    background-color: var(--color-neutral-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-circle);
    font-size: var(--font-size-h5); }
    .Button-share .fa,
    .btn-share .fa {
      background: var(--color-primary-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; }
    .Button-share:hover,
    .btn-share:hover {
      background: var(--color-primary-gradient);
      text-decoration: none; }
      .Button-share:hover .fa,
      .btn-share:hover .fa {
        color: var(--color-neutral-3);
        -webkit-text-fill-color: unset; }
    .tablet .Button-share,
    .phone .Button-share, .tablet
    .btn-share,
    .phone
    .btn-share {
      height: 52px;
      width: 52px; }
  .Button-share-login,
  .btn-share-login {
    height: 48px;
    width: 48px;
    background: var(--color-neutral-0);
    border: var(--border-size-m) solid var(--color-primary); }
    .Button-share-login .fa,
    .btn-share-login .fa {
      background: var(--color-primary-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; }
    .desktop .Button-share-login:hover, .Button-share-login:hover, .desktop
    .btn-share-login:hover,
    .btn-share-login:hover {
      background: var(--color-primary-gradient);
      text-decoration: none; }
      .desktop .Button-share-login:hover .fa, .Button-share-login:hover .fa, .desktop
      .btn-share-login:hover .fa,
      .btn-share-login:hover .fa {
        color: var(--color-neutral-0);
        -webkit-text-fill-color: unset; }
    .tablet .Button-share-login,
    .phone .Button-share-login, .tablet
    .btn-share-login,
    .phone
    .btn-share-login {
      height: 52px;
      width: 52px; }
  .tablet .Button,
  .phone .Button, .tablet
  .btn,
  .phone
  .btn {
    font-size: var(--font-size-h6);
    height: 48px; }

.button-group .btn {
    color: var(--color-neutral-7); }

.Menu_TopMenus .menu-top-menus > a, .Menu_TopMenus .menu-top-menus > a:visited {
    color: white;
}

.Button-tertiary-gradient-outline, .btn-tertiary-gradient-outline {
    background: #001d6c;
}


.info {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    background-color: var(--color-neutral-0);
    cursor: pointer;
    display: -ms-inline-flexbox;
    display: -webkit-inline-box;
    display: inline-flex;
    height: 40px;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    margin: 0;
    padding: var(--space-none) var(--space-base);
  line-height: 1;
  background-origin: border-box;
  font-weight: var(--font-bold);
  border-radius: var(--border-radius-rounded);
  color: var(--color-primary);
  border: var(--border-size-m) solid var(--color-primary);
}

.info:hover {
    background-color: var(--color-primary);
    color: var(--color-neutral-0);
}