@import "noto_sans_thai/noto_sans_thai.css";

/* ====== No Sidebar Override ====== */
.no_sidebar.main_display_section_2_0,
.no_sidebar .main_title_bar,
.no_sidebar .display_layout_full {
    width: 100vw !important;
}

/* ====== Basic Setting ====== */

* {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
    -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important;
    outline: none !important;
}

html {
    -webkit-user-select: none;
}

body {
    -webkit-touch-callout: none;
    /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;
    /* prevent webkit from resizing text to fit */
    /*-webkit-user-select: none;                   prevent copy paste, to allow, change 'none' to 'text' */
    height: 100%;
    width: 100vw;
    margin: 0px;
    padding: 0px;
    font-family: 'noto_sans_thai', 'Poppins', -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif;
    /* font-family: -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif; */
    position: relative;
    color: #404040;
    background-color: #F5F5F5;
    letter-spacing: -0.4px;
    line-height: 100%;
    overflow: hidden;
}

input, section, textarea, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
     font-family: 'noto_sans_thai', 'Poppins', -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif;
    /* font-family: -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif; */
   
}

button{
    font-family: 'noto_sans_thai', 'Poppins', -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif;
}

:root {
  --Linear_Blue: linear-gradient(#8bd1ef, #6cc5eb);
}

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

/* เอาไว้แก้ user agent stylesheet ในบาง Device */
b {
  font-weight: bold !important;
}
/* ========= */

.content_box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  border-radius: inherit;
}

/* all bg */

.popup_toastx_bg {
  width: 100vw;
  height: 100%;
  position: fixed;
  background-image: linear-gradient(
    225deg,
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0)
  );
  z-index: 102;
}

.popup_middle_bg {
  width: 100vw;
  height: 100%;
  position: fixed;
  background-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0.1)
  );
  z-index: 102;
}

.popup_bg {
  width: 100vw;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 100;
}

/* new layout */
.home_layout_full {
  width: 100vw;
  height: 100vh;
  background-color: #f7f7f7;
}
.home_layout_full .information_icon {
  width: 38px;
  position: fixed;
  top: 14px;
  right: 14px;
}

.home_top_layout {
  width: 100%;
  height: 66px;
  position: fixed;
  top: 0px;
  background-color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 25%);
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(20px) brightness(130%);
  -webkit-backdrop-filter: blur(20px) brightness(130%);
  opacity: 0.25;
}
.home_bottom_layout {
  width: 100%;
  height: 40px;
  position: fixed;
  bottom: 0px;
  background-color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 25%);
  box-shadow: 0px -6px 12px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(20px) brightness(130%);
  -webkit-backdrop-filter: blur(20px) brightness(130%);
  opacity: 0.25;
}
.home_bottom_content {
  width: 100%;
  height: 40px;
  position: fixed;
  bottom: 0px;
  display: grid;
  grid-template-columns: 30% 40% 30%;
  padding: 0px 12px;
  box-sizing: border-box;
  align-items: center;
}
.home_bottom_content .rexx_logo {
  width: 88px;
  height: 40px;
}

.home_profile_box {
  height: 42px;
  position: absolute;
  right: 64px;
  top: 12px;
  border-right: 1px solid #cccccc;
  padding-right: 12px;
}

.home_body_layout {
  height: calc(100vh - 66px - 40px);
  width: 100%;
  position: fixed;
  top: 66px;
}

.home_grid_card_layout {
  width: calc(100vw - 98px - 98px);
  position: absolute;
  left: 98px;
  top: 62px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 128px);
  grid-auto-flow: row;
  grid-gap: 12px;
}

.full_grid_card_layout {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, 128px);
  grid-auto-flow: row;
  grid-gap: 12px;
  padding: 12px;
}

.row_grid_card_layout {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, 128px);
  grid-auto-flow: row;
  grid-gap: 12px;
  padding: 0px 12px;
}
.row_grid_card_layout.clear_left {
  padding-left: 0px;
}

.row_grid_card_layout.row_grid_card_layout_extended {
  grid-template-columns: repeat(auto-fill, 268px);
}

.main_layout_with_top_layout_logo .row_grid_card_layout {
  padding-left: 0px;
}

.title_card_layout {
  width: 128px;
  height: 146px;
  border: 1px solid rgba(255, 255, 255, 75%);
  box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(20px) brightness(130%) opacity(50%);
  -webkit-backdrop-filter: blur(20px) brightness(130%) opacity(50%);
  border-radius: 14px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  transition: 0.5s;
}

.title_card_layout.title_card_layout_extended {
  width: 268px;
  height: 108px;
}

.title_card_layout:hover {
  background: radial-gradient(
    circle at bottom,
    #6cc5eb,
    rgba(255, 255, 255, 0.5) 80%
  );
  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.15);
  transition: 0.2s;
}

.title_card_layout .title_card_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px;
}

.title_card_layout.title_card_layout_extended .title_card_content {
  display: grid;
  grid-template-columns: 84px auto;
  gap: 12px;
}

.display_layout_full {
  width: calc(100vw - 78px);
  height: calc(100vh - 47px);
  position: fixed;
  bottom: 0px;
  box-sizing: border-box;
}
.display_layout_full > .content_box_flow {
  height: calc(100vh - 47px - 24px);
  margin-top: 12px;
  padding-bottom: 10px;
}
.top_layout_one_section {
  display: grid;
  height: 52px;
  background-color: #ffffff;
  border-radius: 12px;
  box-sizing: border-box;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  padding: 0px 12px;
  margin: 12px 12px 6px 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.top_layout_one_section.bottom0 {
  margin-bottom: 0px;
}

.top_layout_one_section_with_logo {
  display: grid;
  grid-template-columns: 46px auto auto;
  gap: 8px;
  height: 58px;
  background-color: #ffffff;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  padding: 6px 12px;
  margin: 12px 12px 6px 12px;
}

.top_layout_two_section {
  display: grid;
  grid-template-rows: 30px 50px;
  background-color: #bfedff;
  border-radius: 12px;
  box-sizing: border-box;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  margin: 12px 12px 6px 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.top_layout_two_section.section_red {
  background-color: #ffbfc1;
}

.top_layout_two_section_popup {
  display: grid;
  grid-template-rows: 30px auto;
  background-color: #bfedff;
  border-radius: 12px;
  box-sizing: border-box;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* element in top_layout_two_section */
.top_layout_two_section .flex_list_section {
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: calc(100% + 2px);
  position: relative;
  left: -1px;
}
.top_layout_two_section_popup .list_section {
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: calc(100% + 2px);
  position: relative;
  left: -1px;
  top: 1px;
}

.top_layout_two_section .first_text_in_layout,
.top_layout_two_section_popup .first_text_in_layout {
  display: flex;
  padding: 4px 12px;
  overflow-x: auto;
}

.top_layout_one_section.layout_with_button {
  grid-template-columns: auto auto;
  grid-column-gap: 6px;
}

.main_layout {
  width: calc(100% - 12px - 12px);
  height: calc(100% - 52px - 6px - 12px - 12px);
  position: absolute;
  background-color: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  left: 12px;
  bottom: 12px;
  box-sizing: border-box;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  padding: 12px;
}
.main_layout.main_layout_with_top_layout_two_section {
  height: calc(100% - 82px - 6px - 12px - 12px);
}
.main_layout.main_layout_with_top_layout_logo {
  height: calc(100% - 58px - 6px - 12px - 12px);
}
.full_scroll_layout {
  height: calc(100% - 48px);
}
.full_scroll_layout_template {
  height: calc(100% - 48px - 40px);
}
.main_layout.main_layout_clean {
  background-color: transparent;
  box-shadow: none;
  border: none;
  padding-left: 0px;
  padding-right: 0px;
}
.main_layout > .content_box_flow {
  border-radius: unset;
}

.main_layout_scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  box-sizing: border-box;
  /* scrollbar-width: thin; */
  -webkit-overflow-scrolling: touch;
}

.line_divide_scroll_layout {
  width: calc(100% - 24px);
  height: 1px;
  border-radius: 1px;
  background-color: rgba(0, 0, 0, 0.1);
}
.line_divide_scroll_layout.space52 {
  position: absolute;
  top: 52px;
}

.line_divide_layout {
  width: 100%;
  height: 1px;
  background-color: #cccccc;
}

.main_layout_scroll_with_tap_menu_tube {
  width: 100%;
  height: calc(100% - 40px - 12px - 24px);
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  left: 0px;
  bottom: 12px;
  padding: 0px 12px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.popup_layout_scroll_with_tap_menu_tube {
  width: 100%;
  height: calc(100% - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.popup_layout_with_tap_menu_tube {
  width: 100%;
  height: calc(100% - 40px);
  box-sizing: border-box;
}

.blue_field_layout {
  width: 100%;
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #6cc5eb 0%,
    #69d2ff 100%
  );
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.1));
  position: relative;
  padding: 8px;
  box-sizing: border-box;
  z-index: 102;
}

.gray_field_layout {
  background-color: #dfe3e6;
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
  padding: 16px 12px;
  margin: -8px 0px;
  position: relative;
  z-index: 101;
}
.inner_field_layout {
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.1));
  padding: 8px;
  position: relative;
  z-index: 102;
}

.fix_section_top {
  position: sticky;
  top: 0px;
  background-color: #ffffff;
  z-index: 100;
}
.fix_section_top.z110 {
  z-index: 110;
}

.fix_section_bottom {
  position: sticky;
  bottom: 0px;
  background-color: #e3e7e8;
  z-index: 100;
  padding-bottom: 6px;
}
.fix_section_bottom_special {
  position: sticky;
  bottom: 0px;
  background-color: #f7f8f8;
  z-index: 100;
  padding-bottom: 6px;
}

.fix_section_top.top_layer_1 {
  top: 40px;
}

.fix_section_top_popup {
  position: sticky;
  top: 0px;
  background-color: #e3e7e8;
  z-index: 100;
}

.popup_white .fix_section_top {
  background-color: #ffffff !important;
}

/* side bar section V2024 */
.sidebar_section_V24 {
  width: 78px;
  height: calc(100% - 8px - 8px);
  background: linear-gradient(#8bd1ef, #6cc5eb 15%, #6cc5eb);
  position: fixed;
  margin-top: 8px;
  margin-bottom: 8px;
  border-radius: 0px 12px 12px 0px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 0px 7px;
  box-sizing: border-box;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
  z-index: 99;
  left: 0px;
  top: 0px;
  transition: 0.1s;
}
.sidebar_section_V24.sidebar_open {
  width: 240px;
}

.sidebar_section_V24.sidebar_open .sidebar_menu_list {
  scrollbar-width: thin;
}

.sidebar_section_V24 .t12 {
  display: none;
}
.sidebar_section_V24.sidebar_open .t12 {
  display: unset;
}

.sidebar_menu_section {
  width: calc(100% - 14px);
  height: calc(100% - 12px - 60px - 14px - 16px - 36px);
  position: absolute;
  top: 86px;
  background-color: rgba(255, 255, 255, 90%);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  padding: 0px 7px;
}

.sidebar_profile_box {
  width: 100%;
  height: 112px;
  margin-top: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sidebar_profile_image_box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  justify-content: center;
  transition: 0.2s;
}
.sidebar_open .sidebar_profile_image_box {
  flex-direction: row;
  gap: 4px;
}

.profileBox46 {
  width: 46px;
  height: 46px;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.profileBox46.profile_ex1,
.profileBox108.profile_ex1 {
  background-image: url("/assets/main/avatar_default-8d9ea432.png");
}
.profileBox46.profile_ex2 {
  background-image: url("/assets/main/avatar_default-8d9ea432.png");
}

.profileBox108 {
  width: 108px;
  height: 108px;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: 0.2s;
}

.profileBox108:hover {
  transform: scale(105%);
  transition: 0.2s;
}

.profileBox256 {
  width: 256px;
  height: 256px;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: url("/assets/main/avatar_default-8d9ea432.png") lightgray 50% / cover
    no-repeat;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}

.sidebar_profile_image_box .profileBox46 {
  cursor: pointer;
}

.sidebar_title_box {
  display: none;
}

.sidebar_open .sidebar_title_box {
  width: 100%;
  margin-top: 6px;
  display: block;
}

.sidebar_logo_box {
  height: 60px;
  width: 100%;
  position: relative;
  top: 12px;
}

.sidebar_menu_list {
  width: calc(100% - 14px);
  height: calc(100% - 120px - 12px - 12px - 52px);
  position: absolute;
  top: 132px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

.sidebar_menu {
  display: flex;
  align-items: center;
  line-height: 22px;
  height: 36px;
  box-sizing: border-box;
  border: 1px solid transparent;
  cursor: pointer;
}

.sidebar_menu:hover {
  background: radial-gradient(ellipse at bottom, #6cc5eb, #86d0f0);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 15%);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
}

.sidebar_menu_icon {
  width: 46px;
  min-width: 46px;
  height: 36px;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
}
.sidebar_menu_icon.user_sb {
  background-image: url("/assets/user_icon_sb-02795457.svg");
}
.sidebar_menu_icon.um_sb {
  background-image: url("/assets/um_icon_sb-4559109f.svg");
}
.sidebar_menu_icon.pm_sb {
  background-image: url("/assets/pm_icon_sb-704292d2.svg");
}
.sidebar_menu_icon.cm_sb {
  background-image: url("/assets/cm_icon_sb-d800464b.svg");
}
.sidebar_menu_icon.ttable_sb {
  background-image: url("/assets/ttable_icon_sb-aa916a3c.svg");
}
.sidebar_menu_icon.annouce_sb {
  background-image: url("/assets/annouce_icon_sb-a37de02c.svg");
}
.sidebar_menu_icon.dash_sb {
  background-image: url("/assets/dashboard_icon_sb-972765e1.svg");
}
.sidebar_menu_icon.form_sb {
  background-image: url("/assets/form_icon_sb-428d051c.svg");
}
.sidebar_menu_icon.export_sb {
  background-image: url("/assets/export_icon_sb-af81f889.svg");
}
.sidebar_menu_icon.grade_sb {
  background-image: url("/assets/grading_icon_sb-9980cd82.svg");
}
.sidebar_menu_icon.rcm_sb {
  background-image: url("/assets/rcm_icon_sb-e7b77b0e.svg");
}
.sidebar_menu_icon.setting_sb {
  background-image: url("/assets/setting_icon_sb-a39fe48a.svg");
}

.sidebar_setting_box {
  height: 44px;
  width: calc(100% - 16px);
  position: absolute;
  bottom: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.sidebar_logout_box {
  height: 36px;
  width: calc(100% - 16px);
  position: absolute;
  bottom: 8px;
  background: radial-gradient(ellipse at bottom, #d9363c, #e6454a);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 22px;
}

/* layout flex row */
.flex_text_row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.flex_text_row.align_right {
  justify-content: flex-end;
}
.flex_text_row.align_LR,
.gradient_btn.align_LR {
  justify-content: space-between;
  padding-right: 12px;
}
.flex_text_row.align_LR_nopd {
  justify-content: space-between;
}
.flex_text_row.align_baseline {
  align-items: baseline;
}
.flex_text_row.full_w {
  width: 100%;
}
.flex_text_row.multiple_profile {
  margin-left: 25px;
}
.flex_text_row.multiple_profile .icon_size_50x50 {
  margin-left: -25px;
}
/* layout flex row gap */
.flex_text_row.gap2 {
  gap: 2px;
}
.flex_text_row.gap4 {
  gap: 4px;
}
.flex_text_row.gap6 {
  gap: 6px;
}
.flex_text_row.gap8,
.input_detail_section.gap8  {
  gap: 8px;
}
.flex_text_row.gap10 {
  gap: 10px;
}
.flex_text_row.gap12,
.checkbox_list_section.gap12,
.input_detail_section.gap12 {
  gap: 12px;
}
.flex_text_row.gap20 {
  gap: 20px;
}
.flex_text_row.gap24 {
  gap: 24px;
}
.flex_text_row.gap55 {
  gap: 55px;
}
/* 
  .grid_text_row_a_20{
      display: grid;
      grid-template-columns: auto 20px;
      align-items: center;
  } */

.grid_text_row_a_24 {
  display: grid;
  grid-template-columns: auto 24px;
  align-items: center;
}

.grid_text_row_100_a {
  display: grid;
  grid-template-columns: 100px auto;
  align-items: center;
  gap: 12px;
  overflow: auto;
}

.grid_text_row_100_a:has(.grid_text_column_widget) {
  overflow-y: unset;
}

.grid_text_row_100_a .full_h {
  height: 95%;
}

.grid_text_row_a_32 {
  display: grid;
  grid-template-columns: auto 32px;
  align-items: center;
  gap: 2px;
}

.grid_text_row_a_68 {
  display: grid;
  grid-template-columns: auto 68px;
  align-items: center;
}

.grid_text_column_widget {
  display: grid;
  grid-template-rows: 18px 60px 22px;
}

/* layout flex column */
.flex_text_column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flex_text_column.align_center {
  align-items: center;
}
.flex_text_column.align_right {
  align-items: end;
}
.flex_text_column.align_baseline {
  align-items: baseline;
}
.flex_text_column.bot_line {
  border-bottom: 1px solid #e6e6e6;
}
.flex_text_column.align_TB {
  justify-content: space-between;
}
.flex_text_column.full_h {
  height: 100%;
}
.flex_text_column.full_w {
  width: 100%;
}
.flex_text_column.space_column{
  padding: 6px 0px;
}
/* layout flex column gap */
.flex_text_column.gap2 {
  gap: 2px;
}
.flex_text_column.gap4 {
  gap: 4px;
}
.flex_text_column.gap6 {
  gap: 6px;
}
.flex_text_column.gap8 {
  gap: 8px;
}
.flex_text_column.gap10 {
  gap: 10px;
}
.flex_text_column.gap12 {
  gap: 12px;
}
.flex_text_column.gap18 {
  gap: 18px;
}
.flex_text_column.gap24 {
  gap: 24px;
}

.t_scroll_y {
  overflow-x: hidden;
  overflow-y: auto;
}

/* grid layer for template-column */
.grid_column_layer {
  display: grid;
  min-height: 32px;
  align-items: center;
}

.grid_column_layer.grid_layer_2col_0 {
  grid-template-columns: 20px auto;
  gap: 10px;
}
.grid_column_layer.grid_layer_2col_1 {
  grid-template-columns: auto auto;
  justify-content: space-between;
}
.grid_column_layer.grid_layer_3col_0 {
  grid-template-columns: auto 172px 51px;
  word-break: break-all;
  gap: 8px;
}
.grid_column_layer.grid_layer_4col_0 {
  grid-template-columns: auto 128px 51px 44px;
  word-break: break-all;
  gap: 8px;
}

/* list layer template */
.list_layer_tem_1 {
  margin-top: 6px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0px 12px;
}

/* line height edit */

.t_lh28 {
  line-height: 28px;
}
.t_lh26 {
  line-height: 26px;
}
.t_lh22 {
  line-height: 22px;
}
.t_lh18 {
  line-height: 18px;
}
.t_lh16 {
  line-height: 16px;
}
.t_lh42 {
  line-height: 42px;
}

.justify_start {
  justify-content: flex-start;
}

/* align edit */
/* for list table */
.align_base {
  align-self: baseline;
  line-height: 20px;
}

/* ----------- image+icon all --------------- */
.icon_image {
  background-origin: border-box;
  background-repeat: no-repeat;
}

/* all icon */
.icon_image.logbook_epa_icon {
  background-image: url("/assets/logbook_icon-d0a3cf3a.svg");
}

/* image+icon size */

.icon_more_page {
  height: 12px;
  width: 7px;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/assets/more_page_2024-06bcc248.svg");
  cursor: pointer;
}

.loading_icon_box {
  width: 72px;
  height: 72px;
  background: radial-gradient(ellipse at bottom, #f5f7f7, #ffffff);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon_loading {
  height: 36px;
  width: 42px;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/assets/loading-2c272929.svg");
  animation: loading linear 1.8s infinite;
}

@keyframes loading {
  100% {
    transform: rotate(360deg);
  }
}

/* size 10 */
.icon_size_10x10 {
  width: 10px;
  height: 10px;
  background-size: 10px;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
}
.icon_size_10x10.download {
  background-image: url("/assets/download_icon-55408dfc.svg");
}

/* size 14 */
.icon_size_14x14 {
  width: 14px;
  height: 14px;
  background-size: 14px;
}
.icon_size_14x14.gear_2024 {
  background-image: url("/assets/gear_2024-566a8d04.svg");
}

/* size 16 */
.icon_size_16x16 {
  width: 16px;
  height: 16px;
  background-size: 16px;
}
.icon_size_16x16.delete_tag {
  background-image: url("/assets/delete_tag_2024-3a750d34.svg");
  cursor: pointer;
}
.icon_size_16x16.add_b {
  background-image: url("/assets/add_black_2024-66008446.svg");
}
.icon_size_16x16.minimize_db {
  background-image: url("/assets/minimize_db-3f52d961.svg");
}
.icon_size_16x16.expand_db {
  background-image: url("/assets/expand-c1d25805.svg");
}

/* size 18 */
.icon_size_18x18 {
  width: 18px;
  height: 18px;
  background-size: 18px;
}

.icon_size_18x18.bin_red_mini {
  background-image: url("/assets/bin_red_mini-e0deb7f1.svg");
}
.icon_size_18x18.add_b {
  background-image: url("/assets/add_black_2024-66008446.svg");
}
.icon_size_18x18.sort_table {
  background-image: url("/assets/sort_table-87af18ec.svg");
}
.icon_size_18x18.sort_table_up {
  background-image: url("/assets/sort_table_up-7bbf58a0.svg");
}

/* size 20 */
.icon_size_20x20 {
  width: 20px;
  height: 20px;
  background-size: 20px;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
}
.icon_size_20x20.sidebar_logout_icon {
  background-image: url("/assets/sidebar_logout_icon-fe079ae4.svg");
}
.icon_size_20x20.add_data {
  background-image: url("/assets/add_data_2024-acee5b42.svg");
}
.icon_size_20x20.ready {
  background-image: url("/assets/ready_2024-7090179b.svg");
}
.icon_size_20x20.ready_b {
  background-image: url("/assets/ready_b-9ba5ce15.svg");
}
.icon_size_20x20.dot3 {
  background-image: url("/assets/3dot_2024-7c59bedc.svg");
}
.icon_size_20x20.dot3_b {
  background-image: url("/assets/3dot_b-dde09e7c.svg");
}
.icon_size_20x20.picture {
  background-image: url("/assets/picture_2024-e2873701.svg");
}
.icon_size_20x20.bin_w {
  background-image: url("/assets/bin_white_2024-4e8360aa.svg");
}
.icon_size_20x20.file_select {
  background-image: url("/assets/file_select_2024-2d87756a.svg");
}
.icon_size_20x20.link_select {
  background-image: url("/assets/link_select_2024-360928a6.svg");
}
.icon_size_20x20.add {
  background-image: url("/assets/add_icon_2024-61ee954c.svg");
}
.icon_size_20x20.download {
  background-image: url("/assets/download_2024-11090f6f.svg");
}
.icon_size_20x20.disk {
  background-image: url("/assets/disk_icon_2024-a0deb846.svg");
}
.icon_size_20x20.add_tag {
  background-image: url("/assets/add_tag_2024-b187d59e.svg");
}
.icon_size_20x20.add_list {
  background-image: url("/assets/add_list_2024-20680fff.svg");
}
.icon_size_20x20.import_list {
  background-image: url("/assets/import_list_2024-13315283.svg");
}
.icon_size_20x20.delete_header {
  background-image: url("/assets/delete_table_head_2024-8585dfdd.svg");
  cursor: pointer;
}
.icon_size_20x20.dupplicate {
  background-image: url("/assets/copy_white_20-20e7daff.svg");
}
.icon_size_20x20.dupplicate_b {
  background-image: url("/assets/dupplicate_b-c68eca2b.svg");
}
.icon_size_20x20.bin_icon {
  background-image: url("/assets/bin_white-82dedcc8.svg");
}
.icon_size_20x20.import_data {
  /* background-image: url("/assets/Icon_import_data-0cab1173.svg"); */
  background-image: url("/assets/import_list_2024-13315283.svg");
}
.icon_size_20x20.add_data_n {
  background-image: url("/assets/add_list_2024-20680fff.svg");
  /* background-image: url("/assets/Icon_Add_data-7366fa74.svg"); */
}
.icon_size_20x20.import_feature {
  background-image: url("/assets/import_feature-042bbba4.svg");
}
.icon_size_20x20.save_disk {
  background-image: url("/assets/save2_icon-6d30c586.svg");
}
.icon_size_20x20.change_status {
  background-image: url("/assets/change_status-8a7700cd.svg");
}
.icon_size_20x20.change_status_b {
  background-image: url("/assets/change_status_b-4f3f9f9a.svg");
}
.icon_size_20x20.add_dataset {
  background-image: url("/assets/add_dataset_2024-fcd7d2d3.svg");
}
.icon_size_20x20.eyes {
  background-image: url("/assets/eyes_icon_2024-b14b8935.svg");
}
.icon_size_20x20.and {
  background-image: url("/assets/and_icon_2024-9c64cdf8.svg");
}
.icon_size_20x20.or {
  background-image: url("/assets/or_icon_2024-5497da70.svg");
}
.icon_size_20x20.add_mile {
  background-image: url("/assets/add_mile_2024-11393abb.svg");
}
.icon_size_20x20.undo {
  background-image: url("/assets/undo_2024-b6e866a5.svg");
}
.icon_size_20x20.look_permission {
  background-image: url("/assets/look_permission_2024-98402ebc.svg");
}
.icon_size_20x20.export {
  background-image: url("/assets/export_2024-10d46616.svg");
}
.icon_size_20x20.list_tab_menu_icon {
  background-image: url("/assets/list_tab_menu-c0f3bd08.svg");
}
.icon_size_20x20.close_list {
  background-image: url("/assets/close_list_menu-2bc8b74b.svg");
}
.icon_size_20x20.import_ic_tag {
  background-image: url("/assets/import_icon_tag-56047632.svg");
}
.icon_size_20x20.x_ic {
  background-image: url("/assets/x_with_circle_ic-8d4012be.svg");
}
.icon_size_20x20.view_detail {
  background-image: url("/assets/view_detail-4f2ef808.svg");
}
.icon_size_20x20.file_icon {
  background-image: url("/assets/file_icon-05483240.svg");
}
.icon_size_20x20.bin_r {
  background-image: url("/assets/bin_red_20-e4657929.svg");
}
.icon_size_20x20.remove_r {
  background-image: url("/assets/remove_red-9ed8c377.svg");
}
.icon_size_20x20.remove_r2 {
  background-image: url("/assets/remove_r2-7ff18f39.svg");
}
.icon_size_20x20.remove_w {
  background-image: url("/assets/remove_white-6f9cd594.svg");
}
.icon_size_20x20.reset_ic {
  background-image: url("/assets/reset_ic-15029b6d.svg");
}
.icon_size_20x20.obsolete {
  background-image: url("/assets/obsolete_icon-49a5e38c.svg");
}
.icon_size_20x20.ttable {
  background-image: url("/assets/ttable_2024-1409e58d.svg");
}
.icon_size_20x20.ttable_today {
  background-image: url("/assets/ttable_today-c2612b99.svg");
}
.icon_size_20x20.pen {
  background-image: url("/assets/pen_2024-5b3bdf12.svg");
}
.icon_size_20x20.pen_b {
  background-image: url("/assets/pen_black-518d3b67.svg");
}
.icon_size_20x20.back_ic {
  background-image: url("/assets/back_btn_icon-f61d869b.svg");
}
.icon_size_20x20.next_ic {
  background-image: url("/assets/next_btn_icon-b295e7d5.svg");
}
.icon_size_20x20.kb {
  background-image: url("/assets/keyborad-fbe24511.svg");
}
.icon_size_20x20.add_section {
  background-image: url("/assets/add_section-b5921782.svg");
}
.icon_size_20x20.add_title_icon {
  background-image: url("/assets/add_title-7b65217c.svg");
}
.icon_size_20x20.move_2024 {
  background-image: url("/assets/move_2024-970ddf37.svg");
}
.icon_size_20x20.add_top {
  background-image: url("/assets/add_topic-9e935aa9.svg");
}
.icon_size_20x20.add_top_rem {
  background-image: url("/assets/add_topic_rem-d4725acd.svg");
}
.icon_size_20x20.add_top_sp {
  background-image: url("/assets/add_topic_sp-fa6d97d4.svg");
}
.icon_size_20x20.mpl {
  background-image: url("/assets/mpl-c6b2ca7b.svg");
}
.icon_size_20x20.no_mpl {
  background-image: url("/assets/no_mpl-57ecc551.svg");
}
.icon_size_20x20.sent {
  background-image: url("/assets/sent-36625225.svg");
}
.icon_size_20x20.select_sourse {
  background-image: url("/assets/select_sourse-fee1cb90.svg");
}
.icon_size_20x20.lb_icon {
  background-image: url("/assets/lb_icon-d87964ef.svg");
}
.icon_size_20x20.epa_icon {
  background-image: url("/assets/epa_icon-b6e758e5.svg");
}
.icon_size_20x20.form_icon {
  background-image: url("/assets/form_icon-e91313ac.svg");
}
.icon_size_20x20.listpool_icon {
  background-image: url("/assets/list_pool_icon-670997df.svg");
}
.icon_size_20x20.more_table {
  background-image: url("/assets/more_table-fcdc8e44.svg");
  cursor: pointer;
}
.icon_size_20x20.sync_icon {
  background-image: url("/assets/rotate_icon-839c8baf.svg");
}
.icon_size_20x20.import_score {
  background-image: url("/assets/import_score-56784a0d.svg");
}
.icon_size_20x20.export_score {
  background-image: url("/assets/export_score-f0ed1fec.svg");
}
.icon_size_20x20.back {
  background-image: url("/assets/back-c74b3757.svg");
}
.icon_size_20x20.overview {
  background-image: url("/assets/overview_icon-c1140a4d.svg");
}
.icon_size_20x20.look_progress {
  background-image: url("/assets/look_progress-b554d4b1.svg");
}
.icon_size_20x20.comment {
  background-image: url("/assets/comment_icon-7137ce38.svg");
}
.icon_size_20x20.add_white_new {
  background-image: url("/assets/add_white_new-9963f116.svg");
}
.icon_size_20x20.icon_i {
  background-image: url("/assets/i_icon20-28daf0f5.svg");
  cursor: pointer;
}
.icon_size_20x20.icon_play {
  background-image: url("/assets/play_icon_2024-92ec3d45.svg");
}
.icon_size_20x20.icon_play_b {
  background-image: url("/assets/play_icon_b-b34a02f7.svg");
}
.icon_size_20x20.traget {
  background-image: url("/assets/traget_icon-db09a048.svg");
}
.icon_size_20x20.watch_his {
  background-image: url("/assets/watch_history-293bae5d.svg");
}
.icon_size_20x20.book_shelf {
  background-image: url("/assets/book_shelf-3b36e629.svg");
}
.icon_size_20x20.refresh {
  background-image: url("/assets/refresh-15029b6d.svg");
}
.icon_size_20x20.icon_g1 {
  background-image: url("/assets/icon_g1-16ce8054.svg");
}
.icon_size_20x20.icon_g2 {
  background-image: url("/assets/icon_g2-a07bf4d5.svg");
}
.icon_size_20x20.sync {
  background-image: url("/assets/sync-eecbab9e.svg");
}
.icon_size_20x20.plos_icon {
  background-image: url("/assets/icon_plos-becaa695.svg");
}
.icon_size_20x20.play_icon {
  background-image: url("/assets/ic_ready-92ec3d45.svg");
}
.icon_size_20x20.hide_icon {
  background-image: url("/assets/hide_icon-44f8fbbb.svg");
}
.icon_size_20x20.show_icon {
  background-image: url("/assets/show_icon-ea48e184.svg");
}
.icon_size_20x20.status_PLO_green {
  background-image: url("/assets/status_PLO_green-fc979c3c.svg");
}
.icon_size_20x20.status_PLO_red {
  background-image: url("/assets/status_PLO_red-8a639ad4.svg");
}
.icon_size_20x20.status_PLO_redx {
  background-image: url("/assets/status_PLO_redx-8067bccd.svg");
}
.icon_size_20x20.status_PLO_yellow {
  background-image: url("/assets/status_PLO_yellow-0fa56598.svg");
}
.icon_size_20x20.setting_white {
  background-image: url("/assets/setting_w-e2688824.svg");
}
.icon_size_20x20.day_select {
  background-image: url("/assets/day_select-517e7287.svg");
}
.icon_size_20x20.next_circle {
  background-image: url("/assets/next_circle-6786e64f.svg");
}
.icon_size_20x20.back_circle {
  background-image: url("/assets/back_circle-b14b3632.svg");
}
.icon_size_20x20.up_circle {
  background-image: url("/assets/up_circle-67212165.svg");
}
.icon_size_20x20.down_circle {
  background-image: url("/assets/down_circle-56199848.svg");
}
.icon_size_20x20.move20 {
  background-image: url("/assets/move20-093c4701.svg");
}
.icon_size_20x20.move20 {
  background-image: url("/assets/move20-093c4701.svg");
}
.icon_size_20x20.deactive{
  background-image: url("/assets/deactive-2529a05e.svg");
}
.icon_size_20x20.su_review{
  background-image: url("/assets/icon_su_review-8edef679.svg");
}
.icon_size_20x20.today_text {
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 11px;
  align-items: center;
  justify-content: center;
}
.icon_size_20x20.today_text .t10 {
  line-height: 7px;
}
.icon_size_20x20.score_mpl{
  background-image: url("/assets/score_mpl-45f7bc0c.svg");
}
.icon_size_20x20.score_compare{
  background-image: url("/assets/score_compare-028a4dc1.svg");
}
/* size 24 */
.icon_size_24x24 {
  width: 24px;
  height: 24px;
  background-size: 24px;
  box-sizing: border-box;
}
.icon_size_24x24.bin_w {
  background-image: url("/assets/bin_white_2024-4e8360aa.svg");
  cursor: pointer;
}
.icon_size_24x24.bin_r {
  background-image: url("/assets/bin_red_2024-9d3a72c5.svg");
  cursor: pointer;
}
.icon_size_24x24.clear_search {
  background-image: url("/assets/clear_search-2fd88bdf.svg");
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 101;
  display: none;
  cursor: pointer;
}
.icon_size_24x24.table_more {
  background-image: url("/assets/table_more_btn-aea060e4.svg");
  cursor: pointer;
}
.icon_size_24x24.file_demo_1 {
  background-image: url("/assets/file_icon_demo_1-ec65037e.svg");
}
.icon_size_24x24.file_demo_2 {
  background-image: url("/assets/file_icon_demo_2-68a9728d.svg");
}
.icon_size_24x24.lb {
  background-image: url("/assets/lb_icon_2024-59fe7e27.svg");
}

/* size 28 */
.icon_size_28x28 {
  width: 28px;
  height: 28px;
  background-size: 28px;
  box-sizing: border-box;
}
.icon_size_28x28.no_list {
  background-image: url("/assets/no_list_2024-6a366e1b.svg");
}
.icon_size_28x28.loading_data {
  background-image: url("/assets/load_data-774618e5.svg");
}
.icon_size_28x28.nolist_icon {
  background-image: url("/assets/nolist_icon-0d9c4755.svg");
}
.icon_size_28x28.icon_i {
  background-image: url("/assets/inform_i_2024-3381f552.svg");
  cursor: pointer;
}
.icon_size_28x28.search_no {
  background-image: url("/assets/search_notfound-8f1e7b6a.svg");
}
.icon_size_28x28.account_icon {
  background-image: url("/assets/IconAccount-c96413a3.svg");
}
.icon_size_28x28.account_manage_icon {
  background-image: url("/assets/Icon_Account_Management-6ed78794.svg");
}

/* size 32 */
.icon_size_32x32 {
  width: 32px;
  height: 32px;
  background-size: 32px;
  box-sizing: border-box;
}
.icon_size_32x32.icon_i {
  background-image: url("/assets/inform_i-1086d436.svg");
}
.icon_size_32x32.filter {
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/assets/filter_2024-63fbf5c9.svg");
  cursor: pointer;
}
.icon_size_32x32.filter.noti::after {
  content: url("/assets/noti_filter-f375311d.svg");
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  top: -1px;
  right: 2px;
  float: right;
}
.icon_size_32x32.add_test {
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/assets/add_icon-2639c62b.svg");
  cursor: pointer;
}

/* size 38 */
.icon_size_38x38 {
  width: 38px;
  height: 38px;
  background-size: 38px;
  box-sizing: border-box;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
}
.icon_size_38x38.open_sidebar_btn {
  background-image: url("/assets/open_sidebar-17e8d55c.svg");
  cursor: pointer;
  position: relative;
  left: calc(50% - (38px / 2));
}
.icon_size_38x38.close_sidebar_btn {
  background-image: url("/assets/close_sidebar_2-4ffa7d98.svg");
  position: absolute;
  right: 0px;
  top: 12px;
  cursor: pointer;
}
.icon_size_38x38.file_01 {
  background-image: url("/assets/file_icon_2024-8b99cc81.svg");
}
.icon_size_38x38.close_popup {
  background-image: url("/assets/close_popup_2024-ca5e3b5d.svg");
  cursor: pointer;
}

/* size 40 */
.icon_size_40x40 {
  width: 40px;
  height: 40px;
  background-size: 40px;
  box-sizing: border-box;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
}

.icon_size_40x40.toastx_checkgreen {
  background-image: url("/assets/toastx_checkgreen-9f9f8776.svg");
}

.icon_size_40x40.toastx_warning_red {
  background-image: url("/assets/toastx_warning_red-530ceb6d.svg");
}

.icon_size_40x40.toastx_warning_yellow {
  background-image: url("/assets/toastx_warning_yellow-c9b30753.svg");
}
.icon_size_40x40.toastx_warning_yellow_2 {
  background-image: url("/assets/toastx_warning_yellow_2-f691178a.svg");
}

.icon_size_40x40.LB {
  background-image: url("/assets/logbook_icon-d0a3cf3a.svg");
}
.icon_size_40x40.EPA {
  background-image: url("/assets/epa_icon_big-3d9d43b6.svg");
}
.icon_size_40x40.CR {
  background-image: url("/assets/classroom_icon-0b9a2646.svg");
}
.icon_size_40x40.HW {
  background-image: url("/assets/homework_icon-0672f277.svg");
}
.icon_size_40x40.QZ {
  background-image: url("/assets/quiz_icon-26ef7a6c.svg");
}

/* size 48 */
.icon_size_48x48 {
  width: 48px;
  height: 48px;
  background-size: 48px;
}

.icon_size_48x48.reload_warning {
  background-image: url("/assets/ic_t_failed-b5672988.svg");
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* size 50 */
.icon_size_50x50 {
  width: 50px;
  height: 50px;
  background-size: 50px;
}

/* size 72 */
.icon_size_72x72 {
  width: 72px;
  height: 72px;
  background-size: 72px;
}

/* size 84 */
.icon_size_84x84 {
  width: 84px;
  height: 84px;
  background-size: 84px;
}

/* icon special size */
.icon_REXX_sidebar {
  width: 58px;
  height: 14px;
  box-sizing: border-box;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/assets/REXX_name-e53b94a2.svg");
  position: absolute;
  left: 2px;
  top: 46px;
  transition: 0.1s;
  cursor: pointer;
}
.sidebar_open .icon_REXX_sidebar {
  width: 82px;
  height: 20px;
  top: 40px;
  left: 4px;
}

/* ----------------- element --------------------- */
.search_bar_section.search_bar_section_with_filter .search_bar_group {
  width: calc(100% - 38px - 8px);
  float: unset;
  position: relative;
  left: 46px;
}

.search_bar_section .clear_search_icon {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 0px;
  right: 2px;
}

.remove_border{
  border: none !important;
  box-shadow: none !important;
}

/* search not found */
.search_notfount_box {
  min-height: 80px;
  width: 320px;
  position: absolute;
  top: 56px;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.search_notfount_box > img {
  position: relative;
  margin-bottom: 12px;
  left: calc(50% - (28px / 2));
}

/* tap_menu */
.flex_tap_menu_box {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 8px;
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
}
.flex_tap_menu_box .tap_menu {
  width: fit-content;
  white-space: nowrap;
  height: 40px;
  line-height: 40px;
  border-radius: 6px 6px 0px 0px;
  box-sizing: border-box;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 0px;
  padding: 0px 12px 0px 12px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  color: var(--color-black);
  transition: 0.5s;
}
.flex_tap_menu_box .tap_menu_active {
  background-color: var(--color-blue);
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
}
.flex_tap_menu_box .tap_menu:hover {
  background-color: #bfedff;
  transition: 0.2s;
}

.tap_menu_active > .t_blue_2,
.tap_menu_active > .t_red {
  color: #000000;
}

.tap_menu_tube {
  width: 100%;
  height: 52px;
  box-sizing: border-box;
  padding: 12px 12px 8px 12px;
  display: flex;
  flex-direction: row;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  position: absolute;
  left: 0px;
  top: 0px;
}
.tap_menu_tube.tap_menu_tube_dashboard {
  position: relative;
  padding: 0px;
  height: unset;
  padding-bottom: 8px;
}
.tap_menu_tube.tap_menu_tube_dashboard .tap_menu {
  padding: 4px 4px 4px 12px;
}
.tap_menu_tube.tap_menu_tube_popup {
  position: relative;
  height: 40px;
  padding: 0px 6px 8px 6px;
}
.tap_menu_tube .tap_menu {
  width: fit-content;
  white-space: nowrap;
  height: 32px;
  border-radius: 16px;
  box-sizing: border-box;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.16);
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 0px;
  padding: 4px 14px 4px 6px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  color: var(--color-black);
  transition: 0.5s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tap_menu_tube_dashboard .tap_menu.tap_menu_gray {
  background-color: #dfe3e6;
  padding: 4px 12px 4px 12px;
  box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.16);
}
.tap_menu_tube .tap_menu_active {
  background: radial-gradient(ellipse at bottom, #6cc5eb, #8fddff);
}
.tap_menu_tube .tap_menu.tap_menu_active:hover {
  background: radial-gradient(ellipse at bottom, #3dbcf2, #73d5ff);
  transition: 0.2s;
}
.tap_menu_tube .tap_menu_active .tube_icon_box {
  background-color: #3da1cc;
}
.tap_menu_tube .tap_menu:hover {
  background: radial-gradient(ellipse at bottom, #bfedff, #d9f4ff);
  transition: 0.2s;
}
.tube_number {
  width: fit-content;
  height: 20px;
  background-color: #dfe3e6;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 1px 12px;
  box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
  font-size: 12px;
  font-weight: bold;
  color: #000000;
  display: flex;
  align-items: center;
}
.tube_number.color_yellow {
  background-color: #f4bd31;
}
.tube_number.color_green {
  background-color: #97cc1c;
}
.tube_icon_box {
  width: 24px;
  height: 24px;
  background-color: #6cc5eb;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* new tube menu with status */
.tube_status {
  width: fit-content;
  height: 20px;
  width: 20px;
  min-width: 20px;
  min-height: 20px;
  background-color: #dfe3e6;
  outline: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 50%;
  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1) inset;
  box-sizing: border-box;
  font-weight: bold;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tube_status.done {
  background: #97cc1c;
  outline: 1px solid #769f16 !important;
  filter: drop-shadow(0px 0px 6px rgba(151, 204, 28, 0.5));
}
.tube_status.done::after {
  content: "";
  width: 10px;
  height: 10px;
  background: url("/assets/tube_status_done-741c5338.svg");
  background-position: center;
  background-origin: border-box;
  background-repeat: no-repeat;
}

.tube_status.wait {
  background: #f4bd31;
  outline: 1px solid #d99f0b !important;
  filter: drop-shadow(0px 0px 6px rgba(244, 189, 49, 0.5));
}
.tube_status.wait::after {
  content: "";
  width: 8px;
  height: 12px;
  background: url("/assets/tube_status_wait-d9630c57.svg");
  background-position: center;
  background-origin: border-box;
  background-repeat: no-repeat;
}

.tube_status.warn_y {
  background: #f4bd31;
  outline: 1px solid #d99f0b !important;
  filter: drop-shadow(0px 0px 6px rgba(244, 189, 49, 0.5));
}
.tube_status.warn_y::after {
  content: "";
  width: 2px;
  height: 12px;
  background: url("/assets/tube_status_warn_y-d9493e1c.svg");
  background-position: center;
  background-origin: border-box;
  background-repeat: no-repeat;
}

.tube_status.fail {
  background: #d9363c;
  outline: 1px solid #b32428 !important;
  filter: drop-shadow(0px 0px 6px rgba(217, 54, 60, 0.5));
}
.tube_status.fail::after {
  content: "";
  width: 10px;
  height: 10px;
  background: url("/assets/tube_status_fail-ae4ba753.svg");
  background-position: center;
  background-origin: border-box;
  background-repeat: no-repeat;
}

.tube_status.warn_r {
  background: #d9363c;
  outline: 1px solid #b32428 !important;
  filter: drop-shadow(0px 0px 6px rgba(217, 54, 60, 0.5));
}
.tube_status.warn_r::after {
  content: "";
  width: 2px;
  height: 12px;
  background: url("/assets/tube_status_warn_y-d9493e1c.svg");
  background-position: center;
  background-origin: border-box;
  background-repeat: no-repeat;
}

.tube_status.ok {
  background: #6cc5eb;
  outline: 1px solid #3da1cc !important;
  filter: drop-shadow(0px 0px 6px rgba(108, 197, 235, 0.5));
}
.tube_status.ok::after {
  content: "";
  width: 12px;
  height: 12px;
  background: url("/assets/tube_status_ok-a102f343.svg");
  background-position: center;
  background-origin: border-box;
  background-repeat: no-repeat;
}

/* all header */
.text_header_1 {
  padding: 24px 12px 6px 12px;
  margin: 0px 12px;
  line-height: 20px;
}
.text_header_2 {
  padding: 12px 0px 6px 0px;
  line-height: 21px;
  color: rgba(0, 0, 0, 0.7);
}
.text_header_3 {
  padding: 4px 0px 6px 0px;
  line-height: 21px;
  color: rgba(0, 0, 0, 0.7);
}
.text_header_4 {
  padding: 12px 12px 6px 12px;
  margin: 0px 12px;
  line-height: 20px;
}
.text_header_5 {
  padding: 12px 0px 12px 0px;
  line-height: 21px;
  color: #000000;
}
.text_header_6 {
  padding: 8px 0px;
  line-height: 18px;
  color: #000000;
}

/* all text color */
.t_black_0 {
  color: #000000;
}

.t_black_1 {
  color: rgba(0, 0, 0, 0.7);
}

.t_black_2 {
  color: #232729;
}

.t_black_gray {
  color: rgba(0, 0, 0, 0.25);
}

.t_white_1 {
  color: #ffffff;
}

.t_white_2 {
  color: rgba(255, 255, 255, 0.7);
}

.t_gray_1 {
  color: #999999;
}

.t_gray_2 {
  color: #8e9699;
}

.t_gray_3 {
  color: #666666;
}

.t_gray_4 {
  color: #5d6366;
}

.t_blue_1 {
  color: #6cc5eb;
}

.t_blue_2 {
  color: #3da1cc;
}

.t_blue_3{
  color:#1784B3;
}

.t_underline {
  text-decoration: underline;
}

.t_link {
  cursor: pointer;
}

.t_semiBold {
  font-weight: 600;
}

.t_center {
  text-align: center;
}

.t_red {
  color: #b32428;
}

.t_green {
  color: #769f16;
}

/* path link */
.path_link {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 320px;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}
.path_link:hover {
  text-decoration: underline;
}

/* popup */
.popup_box_size256 {
  width: 256px;
  height: fit-content;
  max-height: 512px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.50);
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(25px);
  position: fixed;
  left: calc(50vw - (256px / 2));
  top: 50%;
  padding: 0px 11px;
  z-index: 103;
  box-sizing: border-box;
}
.popup_box_size454 {
  width: 454px;
  height: calc(100vh - 48px);
  background-color: #ffffff;
  border-radius: 6px 6px 0px 0px;
  z-index: 101;
  box-shadow: 0px 6px 24px rgb(0 0 0 / 16%);
  position: fixed;
  left: calc(50vw - (454px / 2));
  top: 48px;
  box-sizing: border-box;
  padding: 0px 11px;
  border: 1px solid #d9d9d9;
}
.popup_box_size480 {
  width: 480px;
  height: calc(100vh - 48px);
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: 12px 12px 0px 0px;
  z-index: 101;
  box-shadow: 0px 6px 24px rgb(0 0 0 / 16%);
  position: fixed;
  left: calc(50vw - (480px / 2));
  top: 48px;
  box-sizing: border-box;
  padding: 0px 11px;
  border: 1px solid #d9d9d9;
}
.popup_box_size480.popup_full_width {
  padding: 0px;
}
.popup_box_size480.popup_full_width .main_title_bar_popup {
  width: calc(100% - 24px);
  left: 12px;
  position: relative;
}
.popup_box_size480.popup_full_width .fix_section_top {
  margin: 0px 11px;
}
.popup_box_size480.popup_full_width .flex_footer_bar_popup {
  width: calc(100% - 24px);
  left: 12px;
}

.popup_box_size780 {
  width: 780px;
  height: calc(100vh - 48px);
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: 12px 12px 0px 0px;
  z-index: 101;
  box-shadow: 0px 6px 24px rgb(0 0 0 / 16%);
  position: fixed;
  left: calc(50vw - (780px / 2));
  top: 48px;
  box-sizing: border-box;
  padding: 0px 11px;
  border: 1px solid #d9d9d9;
}
.popup_box_size922 {
  width: 922px;
  height: calc(100vh - 48px);
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: 12px 12px 0px 0px;
  z-index: 101;
  box-shadow: 0px 6px 24px rgb(0 0 0 / 16%);
  position: fixed;
  left: calc(50vw - (922px / 2));
  top: 48px;
  box-sizing: border-box;
  padding: 0px 11px;
  border: 1px solid #d9d9d9;
}
.popup_box_size922.popup_white {
  background-color: rgba(255, 255, 255, 1);
}
.popup_box_size928 {
  width: 928px;
  height: calc(100vh - 48px);
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: 12px 12px 0px 0px;
  z-index: 101;
  box-shadow: 0px 6px 24px rgb(0 0 0 / 16%);
  position: fixed;
  left: calc(50vw - (928px / 2));
  top: 48px;
  box-sizing: border-box;
  padding: 0px 11px;
  border: 1px solid #d9d9d9;
}
.popup_box_size640 {
  width: 640px;
  height: calc(100vh - 48px);
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: 12px 12px 0px 0px;
  z-index: 101;
  box-shadow: 0px 6px 24px rgb(0 0 0 / 16%);
  position: fixed;
  left: calc(50vw - (640px / 2));
  top: 48px;
  box-sizing: border-box;
  padding: 0px 11px;
  border: 1px solid #d9d9d9;
}
.popup_box_size640:has(.popup_filter_box){
  overflow: hidden;
}
.popup_box_size634 {
  width: 634px;
  height: 247px;
  background-color: #ffffff;
  border-radius: 6px;
  z-index: 101;
  box-shadow: 0px 24px 60px rgb(0 0 0 / 50%);
  position: absolute;
  box-sizing: border-box;
  padding: 11px;
  border: 1px solid #e6e6e6;
}

.popup_white {
  background-color: rgba(255, 255, 255, 1);
}

.popup_box_size480:has(.popup_filter_box),
.main_layout:has(.popup_filter_box),
.popup_box_size922:has(.popup_filter_box) {
  overflow-y: hidden;
}

.popup_filter_box {
  width: 456px;
  height: calc(100% - 12px);
  background-color: rgba(255, 255, 255, 1);
  /* backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px); */
  border-radius: 0px 0px 12px 12px;
  z-index: 110;
  box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.15);
  position: absolute;
  left: calc(50% - (456px / 2));
  top: 0px;
  box-sizing: border-box;
  padding: 0px 11px;
}

.z111{
  z-index: 111 !important;
}

.popup_filter_box_2024 {
  width: 456px;
  height: calc(100% - 48px);
  border-radius: 12px 12px 0px 0px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(25px);
  position: fixed;
  bottom: 0px;
  left: calc(50% - (456px / 2));
  padding: 0px 11px;
  z-index: 200;
  box-sizing: border-box;
}

/* Filter popups above popup_bg_n overlay (z-index 201) */
#SUGroupGradeFilterPopup,
#filter_popup_su_individual_student_course,
#filter_phase_task_progress_popup,
#filter_popup {
  z-index: 202;
}

.popup_filter_box_2024 .flex_footer_bar_popup {
  position: relative;
}

.popup_change_view {
  position: fixed;
  width: 456px;
  z-index: 1000;
  box-sizing: border-box;
  border: 1px solid #d9d9d9;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 6px 24px rgb(0 0 0 / 0.16);
  border-radius: 12px;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  padding: 0px 11px;
}

.popup_change_view .flex_footer_bar_popup {
  position: relative;
}

.popup_title {
  height: 48px;
  display: grid;
  grid-template-columns: auto 38px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.popup_title .close_popup {
  position: relative;
  right: -5px;
}

.popup2Half_section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  height: calc(100% - 52px - 12px - 6px);
}

.popup_half_2_box {
  display: flex;
  padding: 12px 12px 0px 12px;
  align-items: flex-start;
  gap: 10px;
  border-radius: 8px;
  background: radial-gradient(50% 100% at 50.01% 100%, #f5f7f7 0%, #fff 100%);
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  flex-direction: column;
  box-sizing: border-box;
}

.popup_half_2_box.with_btn_footer {
  display: grid;
  grid-auto-rows: 1fr 58px;
  height: 100%;
  overflow: hidden;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.popup_half_2_box.halfAvtive {
  border-radius: 8px;
  border: 2px solid #6cc5eb;
  background: radial-gradient(
    79.98% 100% at 50.01% 100%,
    #e5f8ff 0%,
    #fff 100%
  );
  box-shadow: 0px 2px 6px 0px rgba(23, 132, 179, 0.5);
}

.popup_half_2_content {
  display: flex;
  gap: 8px;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  height: 100%;
}

.title_flex_row {
  display: flex;
  flex-direction: row;
  gap: 6px;
  justify-content: center;
  align-items: center;
}

.popup_footer_btn {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  height: 58px;
  box-sizing: border-box;
  text-align: center;
  border-top: 1px solid rgb(0, 0, 0, 15%);
}

.filter_section {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.05);
}

.filter_section .filter_list_2col {
  display: grid;
  grid-template-columns: 20px auto;
  padding-left: 12px;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0);
  word-break: break-word;
}

.filter_list_2col > .t14,
.filter_list_2col > .flex_text_row {
  padding: 7px 14px 7px 0px;
  line-height: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.filter_section .filter_list_2col:last-child .t14,
.filter_section .filter_list_2col:last-child .flex_text_row {
  border-bottom: none;
}

.flex_footer_bar_popup {
  z-index: 105;
  gap: 4px;
}

.filter_bg {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 110;
  position: absolute;
  background: radial-gradient(
    94.76% 100% at 50% 0%,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.15) 100%
  );
}

.popup_box_size480 .filter_bg,
.popup_box_size640 .filter_bg,
.popup_box_size922 .filter_bg {
  border-radius: 12px 12px 0px 0px;
}

.popup_middle {
  position: fixed;
  width: 280px;
  left: calc(50% - (280px / 2));
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1000;
  display: grid;
  box-sizing: border-box;
  border: 1px solid #d9d9d9;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 6px 24px rgb(0 0 0 / 0.16);
  border-radius: 12px;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}
.popup_middle.size320{
  width: 320px;
  left: calc(50% - (320px / 2));
}
.popup_middle .popup_title_box {
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-gap: 4px;
  line-height: 18px;
}
.popup_button {
  width: 256px;
  border: 1px solid #e6e6e6;
  padding: 12px;
  box-shadow: 0px 24px 60px rgb(0 0 0 / 50%);
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid #e6e6e6;
  background-color: #ffffff;
  position: fixed;
  z-index: 99;
}
.popup_button.in_popup {
  position: absolute;
}

.popup_button .line_divide {
  height: 1px;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid #cccccc;
  margin: 6px 0px;
}

.popup_body {
  padding-top: 12px;
  height: calc(100% - 48px - 58px - 12px);
}
.popup_body_inside {
  padding-top: 12px;
  height: calc(100% - 54px - 12px);
}
.popup_body_no_footer {
  padding-top: 12px;
  height: calc(100% - 48px - 12px - 8px);
}

.popup_select_3dot {
  width: 230px;
  position: fixed;
  right: 12px;
  top: calc(47px + 12px + 82px);
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: 12px;
  z-index: 101;
  box-shadow: 0px 6px 24px rgb(0 0 0 / 16%);
  padding: 12px;
  box-sizing: border-box;
  border: 1px solid #d9d9d9;
}

.popup_select_general {
  width: 280px;
  position: fixed;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: 12px;
  z-index: 101;
  box-shadow: 0px 6px 24px rgb(0 0 0 / 16%);
  padding: 12px;
  box-sizing: border-box;
  border: 1px solid #d9d9d9;
}

.data_two_column_first_data_s108 {
  display: grid;
  grid-template-columns: 108px auto;
  align-items: center;
  min-height: 38px;
}
.data_two_column_first_data_s108 > div:first-child {
  padding-left: 12px;
}
.data_two_column_first_data_s108 .select_list_day {
  width: 64px;
}
.data_two_column_first_data_s108 .select_list_month {
  width: 172px;
}
.data_two_column_first_data_s108 .select_list_year {
  width: 78px;
}

.input_in_table {
  font-size: 14px;
  border: none;
  text-align: center;
  font-weight: bold;
  color: #000000;
  width: 100%;
  height: 16px;
  background: transparent;
}

.normal_title .input_in_table {
  font-weight: normal;
}

input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
textarea:-webkit-autofill {
  background-color: transparent !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: #000000 !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

.tarea_in_table {
  font-size: 14px;
  border: none;
  text-align: center;
  font-weight: bold;
  color: #000000;
  resize: none;
  overflow: hidden;
  width: 180px;
  line-height: 16px;
  background: transparent;
}

/* responsive table scroll XY */
.responsive_table {
  width: 100%;
  /* height: 100%; */
}

.responsive_table td,
.responsive_table th {
  padding: 6px 12px;
}

.responsive_table th {
  border: 1px solid rgba(0, 0, 0, 0.15);
  cursor: unset;
}

.responsive_table td {
  line-height: 16px;
  border-bottom: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
  max-width: 180px;
  word-wrap: break-word;
  white-space: normal;
  text-align: center;
  vertical-align: top;
}

.responsive_table tr td:first-child {
  border-left: none;
}

.responsive_table .left_border_2 {
  border-left: 1px solid #666666;
}

.responsive_table .fix_table_header_1 {
  position: sticky;
  left: 0px;
  white-space: nowrap;
  max-width: unset;
}

.responsive_table .fix_table_header_2 {
  position: sticky;
  white-space: nowrap;
  max-width: unset;
}

/* search section */
.search_section {
  display: grid;
  width: 100%;
  height: 32px;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.search_section.clear_mrg {
  margin: 0px;
}

.search_section .search_input_box {
  width: 100%;
  height: 100%;
  position: relative;
}

.search_section .search_input_box input {
  padding-right: 24px;
}

.search_section.search_section_filter {
  grid-template-columns: 32px auto;
  gap: 8px;
}
.search_section.search_section_filter.gap2 {
  gap: 2px;
}

.search_section .search_input_box input:hover {
  background-color: rgba(108, 197, 235, 0.25);
  transition: 0.2s;
}

.search_section .search_input_box input:focus {
  background-color: rgba(108, 197, 235, 0.1);
  border: 1px solid rgba(108, 197, 235, 1);
  transition: 0.2s;
}

.search_section .search_input_box input:focus ~ .clear_search {
  display: block;
}

.search_section .search_input_box input {
  width: 100%;
  height: 100%;
  padding-left: 34px;
  position: absolute;
  left: 0px;
  font-size: 14px;
  background-color: rgba(35, 39, 41, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  box-sizing: border-box;
  position: relative;
  transition: 0.5s;
}
.search_section .search_input_box input::placeholder {
  font-size: 14px;
  color: #999999;
}

.search_section .search_input_box .search_icon {
  width: 16px;
  height: 16px;
  left: 10px;
  top: 7px;
  position: absolute;
  box-sizing: border-box;
}

/* new table V2024 */
.flex_table_header {
  display: grid;
  background: linear-gradient(#8bd1ef, #6cc5eb);
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  color: #000000;
  font-size: 14px;
  font-weight: bold;
  align-items: center;
  border-radius: 8px;
  padding-left: 12px;
  gap: 8px;
  line-height: 18px;
  cursor: unset !important;
}

.flex_table_header > div {
  display: flex;
  /* cursor: pointer; */
}
.flex_table_header > div:has(.sort_table_up), .flex_table_header > div:has(.sort_table){
  cursor: pointer;
}

.flex_table_header .sortBox {
  line-height: 30px;
  box-sizing: border-box;
}

.flex_table_header.indentLV1 {
  padding-left: 24px;
}
.flex_table_header.indentLV2 {
  padding-left: 36px;
}
.flex_table_header.indentLV3 {
  padding-left: 48px;
}
.flex_table_header.indent_special1 {
  padding-left: 56px;
}

/* Excellence View 2 – 4 columns: Excellence Unit, จำนวนคนที่ได้, รอการประเมิน, จำนวนคนที่ยังไม่ได้ */
.flex_table_header.table_layer_4col_excellence_view2,
.flex_table_list.table_layer_4col_excellence_view2 {
  grid-template-columns: 400px repeat(2, 148px) 100px 50px;
}


.flex_table_header.table_layer_4col_excellence_view2_headers,
.flex_table_list.table_layer_4col_excellence_view2_headers {
  grid-template-columns: 400px repeat(3, 148px);
}

.flex_table_list.table_layer_4col_excellence_view2 {
  display: grid;
  padding-left: 12px;
  align-items: center;
  gap: 8px;
}

.flex_table_title.table_layer_3col_tab_excellence_view2 {
  grid-template-columns: auto 180px;
}


.flex_table_title.table_layer_6_col_1_excellence_unit_details {
  padding-left: 12px;
  grid-template-columns: auto 110px 110px 110px 110px 32px;
  cursor: pointer;
}

.flex_table_header.indentLV4 {
  padding-left: 60px;
}

/* button 2024 */
.gradient_btn {
  display: flex;
  min-height: 36px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: radial-gradient(ellipse at bottom, #232729, #363d40);
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  border-radius: 8px;
  transition: 0.5s;
  border: 1px solid rgba(170, 83, 83, 0.15);
  box-sizing: border-box;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
  padding: 7px 11px;
  cursor: pointer;
  word-break: break-word;
  white-space: break-spaces;
}

.input_2col_box .gradient_btn {
  white-space: nowrap;
}

.gradient_btn:hover {
  background: radial-gradient(ellipse at bottom, #1784b3, #002d40);
  box-shadow: 0px 6px 12px rgba(23, 132, 179, 0.5);
  transition: 0.2s;
}

.gradient_btn.btn_mini {
  height: 22px;
  gap: 4px;
  max-height: 22px;
  min-height: 22px;
  padding: 3px 8px;
}

.gradient_btn.btn_small {
  height: 32px;
  gap: 4px;
  max-height: 32px;
  min-height: 32px;
  padding: 5px 11px;
}

.gradient_btn.btn_narrow {
  min-height: 32px;
  padding: 6px;
}

.list_section .gradient_btn,
.input_2col_box .gradient_btn {
  word-break: keep-all;
  white-space: nowrap;
}

.flex_btn_section.btn_full,
.btn_full .gradient_btn {
  width: 100%;
}

.gradient_btn.btn_red {
  background: radial-gradient(ellipse at bottom, #d9363c, #e6454a);
}
.gradient_btn.btn_red:hover {
  background: radial-gradient(ellipse at bottom, #bf0006, #e6454a);
  box-shadow: 0px 6px 12px rgba(217, 54, 60, 0.5);
  transition: 0.2s;
}

.gradient_btn.btn_green {
  background: radial-gradient(50% 100% at 50.01% 100%, #97CC1C 0%, #A7E515 100%);
}
.gradient_btn.btn_green:hover {
  background: radial-gradient(50% 100% at 50.01% 100%, #B2FF00 0%, #A7E515 100%);
  box-shadow:  0 0 12px 0 #97CC1C;
  transition: 0.2s;
}

.gradient_btn.btn_yellow {
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #f4bd31 0%,
    #ffc226 100%
  );
}
.gradient_btn.btn_yellow:hover {
  border: 1px solid var(--Button-Stroke-On-Light, rgba(0, 0, 0, 0.15));
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #ffe6a7 0%,
    #ffc226 100%
  );
  box-shadow: 0px 2px 6px 0px #f4bd31;
  transition: 0.2s;
}

.gradient_btn.btn_blue {
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #6cc5eb 0%,
    #69d2ff 100%
  );
}

.gradient_btn.btn_toastx_white {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: var(
    --action-button-idle-no-platter,
    radial-gradient(50% 100% at 50.01% 100%, #f5f7f7 0%, #fff 100%)
  );
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
}

.gradient_btn.btn_toastx_white:hover {
  background: radial-gradient(ellipse at bottom, #8bd1ef, #ffffff 70%);
  transition: 0.2s;
}

.gradient_btn.btn_white_red {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: var(
    --action-button-idle-no-platter,
    radial-gradient(50% 100% at 50.01% 100%, #f5f7f7 0%, #fff 100%)
  );
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
}
.gradient_btn.btn_white_red .t_red {
  color: #d9363c;
}
.gradient_btn.btn_white_red:hover {
  border: 1px solid #d9363c;
  background: radial-gradient(50% 100% at 50.01% 100%, #ffbfc1 0%, #fff 100%);
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
  transition: 0.2s;
}

.gradient_btn.btn_disable,
.disable_layer {
  opacity: 25%;
  cursor: unset;
  pointer-events: none;
}

.gradient_btn.btn_disable:hover {
  background: radial-gradient(ellipse at bottom, #232729, #363d40);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
}

.gradient_btn.btn_red.btn_disable:hover {
  background: radial-gradient(ellipse at bottom, #d9363c, #e6454a);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
}

.gradient_btn.with_icon {
  display: grid;
  grid-template-columns: auto 20px;
  justify-content: unset;
}

.gradient_btn.btn_red_2 {
  color: #b32428;
  border-radius: 8px;
  border: 1px solid var(--Button-Stroke-On-Light, rgba(0, 0, 0, 0.15));
  background: var(
    --Action-Button-No-Platter,
    radial-gradient(50% 100% at 50.01% 100%, #f5f7f7 0%, #fff 100%)
  );
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
}
.gradient_btn.btn_red_2:hover {
  border: 1px solid #b32428;
  background: radial-gradient(50% 100% at 50.01% 100%, #ffbfc1 0%, #fff 100%);
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
}

.gradient_btn > .icon_size_20x20 {
  min-width: 20px;
}

/* list secton 2024 */
.list_section {
  display: grid;
  grid-template-columns: auto auto;
  min-height: 52px;
  background-color: #ffffff;
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 6px 12px;
  align-items: center;
  grid-column-gap: 6px;
  transition: 0.3s;
}

.list_section.list_section_extended {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.list_section.list_section_extended.gap8 {
  gap: 8px;
}

.list_section.list_section_red {
  background-color: #ffbfc1;
}
.list_section.list_error {
  background-color: #ffbfc1;
}

.list_section.list_select:hover {
  cursor: pointer;
  transform: scale(102%);
  box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.15);
  transition: 0.05s;
}

.list_section.list_section_mini_full {
  width: 100%;
  min-height: 32px;
  box-shadow: none;
}

.list_section_box {
  min-height: 52px;
  box-sizing: border-box;
  background-color: #f5f7f7;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  /* filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.10)); */
  box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  position: relative;
  display: grid;
  grid-template-rows: 52px auto;
}

.list_section_box .list_section {
  box-shadow: none;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  position: relative;
  top: -1px;
  left: -1px;
  border-radius: 12px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
}

.list_section_box .list_section_element {
  width: 100%;
  padding: 12px;
  box-sizing: border-box;
}

.popup_box_size480 .list_section {
  border-radius: 12px;
}

.list_section.list_section_full {
  width: 100%;
}

/* element in .list_section */
.photoBox {
  width: 100%;
  display: grid;
  column-gap: 6px;
  row-gap: 4px;
  grid-template-columns: repeat(auto-fill, 100px);
}

.photoBox.no_delete {
  grid-template-columns: repeat(auto-fill, 72px);
}

.photoBox_show {
  height: 72px;
  width: 100px;
  background: radial-gradient(ellipse at bottom, #d9363c, #e6454a);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  box-sizing: border-box;
  position: relative;
  display: grid;
  grid-template-columns: 72px auto;
  gap: 1px;
  align-items: center;
}

.photoBox.no_delete .photoBox_show {
  width: 72px;
}

.photoBox.no_delete .icon_size_24x24.bin_w {
  display: none;
}

.photo_show {
  width: 72px;
  height: 72px;
  position: relative;
  top: -1px;
  left: -1px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  background: linear-gradient(to bottom right, #8bd1ef, #81cdee, #6cc5eb);
}

.photoBox .photo_show img {
  border-radius: inherit;
  position: relative;
  top: -1px;
  left: -1px;
  width: 72px;
  height: 72px;
}

.field_box_section {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding-left: 12px;
  box-sizing: border-box;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.field_box_section.no_pd_l {
  padding-left: 0px;
}

.list_box_section {
  width: 100%;
  min-height: 54px;
  line-height: 20px;
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 8px;
  align-items: center;
  padding: 8px 12px 8px 0px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
}
.list_box_section:last-child {
  border-bottom: none;
}

.list_box_section.with_icon38 {
  grid-template-columns: 38px auto auto;
  word-break: break-word;
}

.list_box_section.with_icon24 {
  grid-template-columns: 24px auto auto;
  min-height: 32px;
  padding: 6px 12px 6px 12px;
  word-break: break-word;
}

.list_box_section.add_list {
  grid-template-columns: auto 300px 120px;
  min-height: 32px;
  padding: 6px 12px 6px 12px;
  word-break: break-word;
}
.list_box_section.add_list_mini_link {
  grid-template-columns: auto 160px 120px;
  min-height: 32px;
  padding: 6px 12px 6px 12px;
  word-break: break-word;
}

/* space V2024 */
.space_bot_2 {
  margin-bottom: 2px;
}
.space_bot_4 {
  margin-bottom: 4px;
}
.space_bot_6 {
  margin-bottom: 6px;
}
.space_bot_8 {
  margin-bottom: 8px;
}
.space_bot_12 {
  margin-bottom: 12px;
}

.space_top_4 {
  margin-top: 4px;
}
.space_top_6 {
  margin-top: 6px;
}
.space_top_8 {
  margin-top: 8px;
}
.space_top_12 {
  margin-top: 12px;
}

.space_top_16{
  margin-top: 16px;
}

.pd7070 {
  padding: 7px 0px 7px 0px;
}

/* book */
.bookGroup {
  width: 100%;
  height: 220px;
  box-sizing: border-box;
  position: relative;
  display: grid;
  grid-template-columns: 148px auto;
  gap: 14px;
}
.bookCover {
  width: 148px;
  height: 100%;
  position: relative;
  box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.16);
  border-radius: 4px;
}
.bookColor {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 100;
  background: linear-gradient(#6cc5eb, #3da1cc);
  border-radius: 4px;
}
.bookName {
  width: 132px;
  height: 204px;
  line-height: 30px;
  position: absolute;
  z-index: 101;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin: 8px;
  box-sizing: border-box;
  text-align: center;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  word-break: break-all;
  white-space: normal;
  line-height: 28px;
}
.spineBox {
  width: 8px;
  height: 100%;
  border-radius: 2px 0px 0px 2px;
  background: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.1),
    rgba(255, 255, 255, 0.1),
    rgba(0, 0, 0, 0.1)
  );
  position: absolute;
  z-index: 102;
}
.bookImg {
  width: 100%;
  height: 100%;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: linear-gradient(rgb(108, 197, 235), rgb(62, 162, 205));
  position: absolute;
  z-index: 100;
  border-radius: 4px;
}
.bookBox {
  width: 100%;
  height: calc(100% + 2px);
  background: linear-gradient(
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255)
  );
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  position: absolute;
  z-index: 101;
  top: -1px;
}

/* book options */
.book_options_box {
  width: 100%;
}

/* input 2 column */
.input_2col_list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.input_2col_list.gap6 {
  gap: 6px;
}
.input_2col_list.gap0 {
  gap: 0px;
}

.input_2col_box {
  display: grid;
  grid-template-columns: 142px auto;
  gap: 12px;
  min-height: 32px;
  text-wrap: wrap;
  word-break: break-word;
}
.input_2col_box .input_title_1 {
  margin-top: 6px;
  line-height: 21px;
}

.input_2col_box.input_size1 {
  display: grid;
  grid-template-columns: 124px auto;
  gap: 6px;
  min-height: 32px;
}

.input_2col_box.input_size1_pop {
  display: grid;
  grid-template-columns: 124px auto;
  gap: 6px;
  min-height: unset;
}

.input_2col_box.input_size2 {
  display: grid;
  grid-template-columns: 224px auto;
  gap: 6px;
  min-height: 32px;
}

.input_2col_box.input_size3 {
  display: grid;
  grid-template-columns: 146px auto;
  gap: 8px;
  min-height: 32px;
}

.input_2col_box.input_size4 {
  display: grid;
  grid-template-columns: 132px auto;
  gap: 8px;
  min-height: 0px;
}

/* input style */
.input_section_full {
  width: 100%;
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25) inset;
  box-sizing: border-box;
  /* box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.25); */
  position: relative;
  /* transition: 0.5s; */
}

.input_section_full.input_red,
.input_text_full.input_red {
  border-color: #d9363c;
  filter: drop-shadow(0px 0px 4px rgba(217, 54, 60, 0.5));
  transition: 0.5s;
}

.input_section_full:hover {
  background-color: #e6f8ff;
  box-shadow: inset 0px 0px 6px rgba(108, 197, 235, 1);
  border: 1px solid rgba(108, 197, 235, 1);
  transition: 0.1s;
}

.input_section_full:focus-within {
  box-shadow: inset 0px 0px 6px rgba(108, 197, 235, 1);
  border: 1px solid rgba(108, 197, 235, 1);
  background-color: #ffffff;
  transition: 0.1s;
}

.input_section_full.input_red:hover,
.input_text_full.input_red:hover {
  background-color: #fff2f2;
  box-shadow: inset 0px 0px 6px rgba(217, 54, 60, 1);
  border: 1px solid rgba(217, 54, 60, 1);
  transition: 0.1s;
}

.input_section_full.input_red:focus-within {
  box-shadow: inset 0px 0px 6px rgba(217, 54, 60, 1);
  border: 1px solid rgba(217, 54, 60, 1);
  background-color: #ffffff;
  transition: 0.1s;
}

.input_section_full.h1 {
  height: 68px;
}
.input_section_full.h2 {
  height: 158px;
}
.input_section_full.h3 {
  height: 32px;
}
.input_section_full.h3 textarea {
  height: 32px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  width: calc(100% - 56px);
  padding-top: 4px;
}
.input_section_full.h4 {
  height: 128px;
}
.input_section_full.h5 {
  height: 32px;
}

.input_section_full.h6 {
  height: 51px;
}

.input_section_full.h7 {
  height: 266px;
}

.input_section_full textarea,
.input_section_full input {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  resize: none;
  box-sizing: border-box;
  padding: 6px 12px;
}

.input_section_full textarea::-webkit-scrollbar {
  width: 7px;
  padding-top: 10px;
}
.input_section_full textarea::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}

.input_section_full textarea::placeholder {
  font-size: 14px;
  color: #cccccc;
}

.input_section_full:has(> .box_counter) > textarea,
.input_section_full:has(> .box_counter) > input {
  padding-right: 56px;
}

.input_section_full input:-webkit-autofill,
.input_section_full textarea:-webkit-autofill {
  background-color: transparent !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: inherit !important;
  font-family: inherit !important;
  transition: background-color 5000s ease-in-out 0s;
}

.box_counter {
  height: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px 0px 8px 0px;
  box-sizing: border-box;
  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.05);
  position: absolute;
  right: -1px;
  bottom: -1px;
  background-color: #ffffff;
  padding: 2px 6px;
  display: flex;
  align-items: center;
  line-height: 16px;
}

.input_section_full.input_red .box_counter {
  border-color: #d9363c;
  background-color: #ffbfc1;
}

.box_counter .t_gray_1 {
  color: #8e9699;
}

.input_section_full.fix_w80 {
  width: 80px;
}

/* input select style */
.input_select_section {
  width: 100%;
  height: 32px;
  box-sizing: border-box;
  box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  transition: 0.2s;
  background-color: #ffffff;
  position: relative;
}
.input_select_section.input_green{
  background: linear-gradient(180deg, #D5F291 0%, #CEF279 100%);
}
.input_select_section.input_green select{
  color: #628C00;
}
.input_select_section.input_red{
  background: linear-gradient(180deg, #FFBFC1 0%, #FFA6A9 100%);
}
.input_select_section.input_red select{
  color: #8C1C20;
}
.input_select_section.input_yellow{
  background: linear-gradient(180deg, #FFE299 0%, #FFDB80 100%);;
}
.input_select_section.input_yellow select{
  color: #A67700;
}
.input_select_section select {
  width: 100%;
  height: 32px;
  box-sizing: border-box;
  padding-left: 9px;
  padding-right: 27px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border: none;
  font-size: 14px;
  background-color: transparent;
  cursor: pointer;
}

.input_select_section:after {
  width: 10px;
  height: 6px;
  content: "";
  position: absolute;
  top: calc(50% - (6px / 2));
  right: 12px;
  background-image: url("/assets/select_option-98b7eb0c.svg");
  pointer-events: none;
}
.input_select_section:hover {
  background-color: #e6f8ff;
  box-shadow: inset 0px 0px 6px rgba(108, 197, 235, 1);
  border: 1px solid rgba(108, 197, 235, 1);
}

.input_select_section_date {
  display: grid;
  grid-template-columns: 64px auto 78px;
  gap: 2px;
}

.input_select_section_date_2 {
  display: grid;
  grid-template-columns: 64px 1fr 1fr;
  gap: 2px;
}

.input_select_section_date_3 {
  display: grid;
  grid-template-columns: 62px auto 102px;
  gap: 2px;
}

.input_select_section_time {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px;
}

.input_select_section_date_time {
  display: grid;
  grid-template-columns: auto 126px;
  gap: 12px;
}

.input_select_section_2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.input_select_section.input_select_section_w72{
  width: 74px;
}

/* radio style */
.flex_radio_section .line_divide_radio {
  height: 24px;
  width: 1px;
  background-color: rgba(0, 0, 0, 0.1);
  margin: 4px 8px 4px 4px;
}

.blue_radio_check.color_select.flex_radio_section.radio_1line {
  gap: 0px;
}
.blue_radio_check.flex_radio_section.radio_1line {
  gap: 14px;
}
.blue_radio_check .radio_section {
  grid-template-columns: 24px auto;
}

.blue_radio_check.flex_radio_section
  .radio_section
  .radio_btn
  .checkmark_radio {
  top: calc(50% - (24px / 2));
  left: 0px;
}

.blue_radio_check .radio_section .radio_btn .checkmark_radio {
  height: 24px;
  width: 24px;
  background-color: #dfe3e6;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  box-sizing: border-box;
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.16);
  cursor: pointer;
}

.blue_radio_check .radio_section .radio_btn .checkmark_radio:hover {
  background-color: #bfedff;
}

.blue_radio_check
  .radio_section
  .radio_btn
  input:checked
  ~ .checkmark_radio::after {
  top: 3px;
  left: 2px;
  width: 18px;
  height: 18px;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/assets/checkmark_white-a1366cdb.svg");
  display: block;
  content: "";
  position: absolute;
}

.blue_radio_check
  .radio_section
  .radio_btn
  input:checked
  ~ .checkmark_radio::after,
.blue_radio_check .radio_section .radio_btn input ~ .checkmark_radio::after {
  background-color: transparent;
}

.blue_radio_check .radio_section .radio_btn input:checked ~ .checkmark_radio {
  height: 24px;
  width: 24px;
  background-color: #6cc5eb;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  box-sizing: border-box;
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.16);
}

.blue_radio_check.gradient_check
  .radio_section
  .radio_btn
  input:checked
  ~ .checkmark_radio {
  background-color: transparent;
}

.blue_radio_check_18.blue_radio_check
  .radio_section
  .radio_btn
  input:checked
  ~ .checkmark_radio {
  height: 18px;
  width: 18px;
}

.blue_radio_check_18.blue_radio_check.flex_radio_section
  .radio_section
  .radio_btn
  .checkmark_radio {
  top: calc(50% - (18px / 2));
}

.blue_radio_check_18.blue_radio_check
  .radio_section
  .radio_btn
  input:checked
  ~ .checkmark_radio::after {
  width: 12px;
  height: 12px;
}

.blue_radio_check_18.blue_radio_check
  .radio_section
  .radio_btn
  .checkmark_radio {
  height: 18px;
  width: 18px;
}

/* and/or radio */
.and_or_section {
  display: grid;
  gap: 8px;
  grid-template-columns: calc(50% - 4px) calc(50% - 4px);
}

.and_or_box {
  width: 100%;
  height: 100%;
  background-color: #f5f7f7;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 8px 12px;
  box-sizing: border-box;
  position: relative;
  top: -16px;
  display: grid;
  grid-template-columns: auto 20px;
  gap: 8px;
  align-items: center;
  cursor: pointer;
}

.and_or_label input:checked ~ .and_or_box {
  background: radial-gradient(ellipse at bottom, #6cc5eb, #8fddff);
}

/* color select */
.radio_section.color_select_default .radio_btn .checkmark_radio {
  background: linear-gradient(#6cc5eb, #3ea2cd);
  border-color: #4994b5 !important;
}
.radio_section.color_select_pink .radio_btn .checkmark_radio {
  background: linear-gradient(#f7a3f7, #d96cd3);
  border-color: #c06ebc !important;
}
.radio_section.color_select_purple .radio_btn .checkmark_radio {
  background: linear-gradient(#ac6ceb, #853dcc);
  border-color: #7337af !important;
}
.radio_section.color_select_darkblue .radio_btn .checkmark_radio {
  background: linear-gradient(#6c6ceb, #3d3dcc);
  border-color: #3838af !important;
}
.radio_section.color_select_blue .radio_btn .checkmark_radio {
  background: linear-gradient(#5e98eb, #296dcc);
  border-color: #4876b7 !important;
}
.radio_section.color_select_bluegreen .radio_btn .checkmark_radio {
  background: linear-gradient(#5cc5cb, #3eadb3);
  border-color: #46999e !important;
}
.radio_section.color_select_green .radio_btn .checkmark_radio {
  background: linear-gradient(#97cc1c, #769f16);
  border-color: #668811 !important;
}
.radio_section.color_select_yellow .radio_btn .checkmark_radio {
  background: linear-gradient(#f4bd31, #d99f0b);
  border-color: #ba8a0e !important;
}
.radio_section.color_select_orange .radio_btn .checkmark_radio {
  background: linear-gradient(#eb8b46, #cc6d29);
  border-color: #b16229 !important;
}
.radio_section.color_select_red .radio_btn .checkmark_radio {
  background: linear-gradient(#d9363c, #b32428);
  border-color: #9e2327 !important;
}

/* checkbox_style */
.blue_checkBox .checkbox_section {
  grid-template-columns: 24px auto;
  gap: 0px;
}

.blue_checkBox .checkbox_section.gap4 {
  gap: 4px;
}

.blue_checkBox.flex_checkbox_section
  .checkbox_section
  .checkbox_box
  .checkbox_square_black {
  top: calc(50% - (24px / 2));
  left: 0px;
}

.blue_checkBox .checkbox_section .checkbox_box .checkbox_square_black {
  height: 24px;
  width: 24px;
  background-color: #dfe3e6;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  box-sizing: border-box;
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.16);
}

.blue_checkBox .checkbox_section .checkbox_box .checkbox_square_black:hover {
  background-color: #bfedff;
}

.blue_checkBox
  .checkbox_section
  .checkbox_box
  input:checked
  ~ .checkbox_square_black::after {
  top: 3px;
  left: 2px;
  width: 18px;
  height: 18px;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/assets/checkmark_white-a1366cdb.svg");
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: unset;
  -ms-transform: unset;
  transform: unset;
  border: none;
}

.blue_checkBox
  .checkbox_section
  .checkbox_box
  input:checked
  ~ .checkbox_square_black::after,
.blue_checkBox
  .checkbox_section
  .checkbox_box
  input
  ~ .checkbox_square_black::after {
  background-color: transparent;
}

.blue_checkBox
  .checkbox_section
  .checkbox_box
  input:checked
  ~ .checkbox_square_black {
  height: 24px;
  width: 24px;
  background-color: #6cc5eb;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  box-sizing: border-box;
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.16);
}

.blue_checkBox.gradient_check
  .checkbox_section
  .checkbox_box
  input:checked
  ~ .checkbox_square_black {
  background-color: transparent;
}

.checkbox_size18 .checkbox_square_black {
  height: 18px !important;
  width: 18px !important;
  border-radius: 4px !important;
  top: calc(50% - (18px / 2)) !important;
}
.checkbox_size18 .checkbox_square_black::after {
  height: 12px !important;
  width: 12px !important;
}

/* IOS switch checkbox */
.btn_switch {
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 20px;
}
.btn_switch .circle_btn {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #8e9699 0%,
    #a9afb2 100%
  );
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  vertical-align: text-bottom;
  transition: all 0.1s linear;
  box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;

  /* Input Field/Normal */
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25) inset;
}
.btn_switch .circle_btn::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transform: translate3d(2px, 2px, 0);
  transition: all 0.1s linear;
  border: 1px solid var(--Button-Stroke-On-Light, rgba(0, 0, 0, 0.15));
  background: var(
    --Action-Button-No-Platter,
    radial-gradient(50% 100% at 50.01% 100%, #f5f7f7 0%, #fff 100%)
  );
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}
/* .btn_switch:active .circle_btn::after {
    width: 28px;
    transform: translate3d(2px, 2px, 0);
  }
  .btn_switch:active input:checked + .circle_btn::after { 
    transform: translate3d(16px, 2px, 0); 
  } */
.btn_switch input {
  display: none;
}
.btn_switch input:checked + .circle_btn {
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #97cc1c 0%,
    #a7e515 100%
  );
}
.btn_switch input:checked + .circle_btn::before {
  transform: translate3d(21px, 2px, 0);
}
.btn_switch input:checked + .circle_btn::after {
  transform: translate3d(21px, 2px, 0);
}
/* ---------- */

/* full table scroll xy */
.box_scroll_xy {
  width: 100%;
  overflow-y: auto;
  overflow-x: auto;
  scrollbar-width: thin;
  border-radius: 8px 8px 0px 0px;
}

.box_scroll_xy.h0 {
  height: calc(100% - 32px - 8px);
}
.box_scroll_xy.h1 {
  height: calc(100% - 52px - 8px - 32px - 8px);
}
.box_scroll_xy.h2 {
  height: calc(100% - 70px - 8px - 32px - 8px - 32px);
}
.box_scroll_xy.h3 {
  height: calc(100% - 70px - 8px - 32px - 8px - 70px - 8px - 38px);
}
.box_scroll_xy.h4 {
  height: calc(100% - 54px - 12px - 21px - 12px - 230px - 32px - 8px);
}
.box_scroll_xy.h5 {
  height: calc(100% - 230px - 32px);
}

/* .box_scroll_xy.h2{
    height: calc(100% - 52px - 8px - 32px - 8px - 50px);
  } */
/* 
  .box_scroll_xy.h3{
    height: calc(100% - 52px - 8px - 32px - 8px - 121px);
  } */

.table_full {
  width: 100%;
}

.table_full tr td:first-child {
  cursor: pointer;
}

.table_header_row th {
  min-width: 240px;
  line-height: 32px;
  background: linear-gradient(#bfedff, #8bd1ef);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  padding-left: 12px;
  font-size: 14px;
  font-weight: bold;
  color: #000000;
  position: sticky;
  top: 0px;
  z-index: 102;
  cursor: pointer;
}

.table_header_row th:first-child {
  cursor: unset;
}

.table_header_row .th_icon {
  display: flex;
  justify-content: space-between;
  padding-right: 12px;
  align-items: center;
}

.table_header_row .table_header_main {
  min-width: 440px;
  background: linear-gradient(#8bd1ef, #6cc5eb);
  position: sticky;
  top: 0px;
  left: 0px;
  z-index: 104;
}

.table_header_row .table_header_main.size320 {
  min-width: 320px;
}

.table_header_row .table_header_main.size160 {
  min-width: 160px;
  width: 160px;
  padding-left: 8px;
}

.table_header_row .table_header_main.pdL8 {
  padding-left: 8px;
}

.table_header_row .table_header_popup {
  min-width: 320px;
  background: linear-gradient(#8bd1ef, #6cc5eb);
  position: sticky;
  top: 0px;
  left: 0px;
  z-index: 104;
}

/* toastx */

.toastxBox {
  width: 360px;
  padding: 12px 14px;
  border-radius: 24px;
  background: radial-gradient(ellipse at bottom, #f5f7f7, #ffffff);
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 103;
  box-sizing: border-box;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toastxDetail {
  display: grid;
  grid-template-columns: 40px auto;
  gap: 12px;
}

.toastxText {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}

.table_full td {
  padding: 6px 8px;
  vertical-align: top;
  line-height: 21px;
  border-bottom: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
  background-color: #ffffff;
}

.table_full tr td:first-child {
  position: sticky;
  left: 0px;
  z-index: 103;
}

/* section ยังไม่มีรายการ  */
.none_list_section {
  width: fit-content;
  max-width: 256px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  position: relative;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  word-break: break-word;
  text-wrap: wrap;
}

.none_list_section.none_list_filter {
  top: 0px;
}

.none_list_section .t18 {
  line-height: 22px;
}
.none_list_section .t14 {
  line-height: 18px;
}

.none_list_section.unset_w {
  width: unset;
}

.select-items .none_list_section {
  top: 0px;
  text-align: center;
  margin: 30px 0px;
  width: 100%;
  text-wrap: wrap;
}

.none_list_section.none_list_middle {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

/* tag ชื่อ 2024 */
.tag_section_list {
  width: 100%;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tag_section {
  height: 32px;
  padding: 8px 30px 8px 18px;
  background: radial-gradient(ellipse at bottom, #c2c9cc, #dae2e6);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  box-sizing: border-box;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  position: relative;
}

.tag_section > .t14 {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag_section > .icon_size_16x16.delete_tag {
  position: absolute;
  right: 8px;
}

.loading_box {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 12px 0px;
}

.noList_box {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-top: 42px;
}

.noList_txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* add data section */
.add_data_section {
  width: 100%;
  min-height: 37px;
  padding: 8px 0px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px dashed #8e9699;
  background: radial-gradient(50% 100% at 50.01% 100%, #f5f7f7 0%, #fff 100%);
  cursor: pointer;
}

.add_data_section:hover {
  background: radial-gradient(50% 100% at 50.01% 100%, #6cc5eb 0%, #fff 100%);
  box-shadow: 0px 0px 6px 0px #6cc5eb;
}

.slide_up_down.rotateSlideDown {
  rotate: 180deg;
  transition: 0.3s;
}

.slide_up_down.rotateSlideUp {
  rotate: 0deg;
  transition: 0.3s;
}

/* dashboard */
.dashboard_title_slide {
  display: grid;
  grid-template-columns: auto 32px;
  padding: 8px 0px 8px 8px;
  align-items: center;
  border-radius: 12px;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  min-height: 90px;
  margin-bottom: 8px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.dashboard_title_slide.dashboard_title_slide_mini {
  padding: 1px 0px 1px 8px;
  min-height: 59px;
  margin-bottom: 4px;
}

.dashboard_profile_box {
  max-width: 108px;
  max-height: 106px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  background-image: url("/assets/profile_demo_2024-a1021b62.svg");
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-left: 2px !important;
}

.dashboard_profile_Group {
  max-width: 108px;
  max-height: 106px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  background-color: #f5f7f7;
  margin-left: 2px !important;
  position: relative;
}

.dashboard_profile_Group .profile_box {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  background-image: url("/assets/profile_demo_2024-a1021b62.svg");
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
}

.dashboard_profile_Group .profile_box.profile_1 {
  width: 49px;
  height: 49px;
  top: 13px;
  left: 13px;
}
.dashboard_profile_Group .profile_box.profile_2 {
  width: 27px;
  height: 27px;
  top: 18px;
  right: 13px;
}
.dashboard_profile_Group .profile_box.profile_3 {
  width: 40px;
  height: 40px;
  top: 50px;
  right: 13px;
}
.dashboard_profile_Group .profile_box.profile_4 {
  width: 27px;
  height: 27px;
  bottom: 13px;
  left: 23px;
}

.dashboard_profile_list {
  display: flex;
  flex-direction: column;
}

.dashboard_profile_list_item {
  display: grid;
  min-height: 44px;
  grid-template-columns: 32px auto;
  align-items: center;
  gap: 8px;
}

.dashboard_profile_list_item .flex_text_column {
  padding: 4px 0px;
}

.panel_scroll_body {
  overflow-y: auto;
}
.panel_scroll_body.size1x1 {
  height: 124px !important;
}
.panel_scroll_body.size2x2 {
  height: 258px !important;
}

.content_padding_L8 {
  padding-left: 8px;
}
.content_margin_R8 {
  margin-right: 8px;
}
.content_margin_R12 {
  margin-right: 12px;
}
.content_margin_L12 {
  margin-left: 12px;
}
.content_margin_B8 {
  margin-bottom: 8px;
}

.donut_chart_text {
  width: 74px;
  height: 74px;
  background-color: rgba(108, 197, 235, 0.25);
  color: #000000;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-sizing: border-box;
}

.donut_chart_rexx {
  left: -31px;
  margin-top: 6px !important;
  height: 134px !important;
}

.donut_chart_rexx canvas {
  top: -40px !important;
}

.donut_text_rexx {
  position: relative;
  left: -20px;
}

.scroll_section_3col {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 296px auto 296px;
  gap: 8px;
  box-sizing: border-box;
}

.section_box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
}

.scroll_section_box {
  width: 100%;
  height: calc(100% - 21px);
  overflow-x: auto;
  box-sizing: border-box;
  position: absolute;
  padding-top: 12px;
  scrollbar-width: thin;
}

.fix_title_text_top {
  font-size: 14px;
  color: #000000;
  font-weight: bold;
  line-height: 21px;
}

/* filter */
.filter_list {
  background-color: rgba(35, 39, 41, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  min-height: 38px;
}

.filter_item {
  min-height: 38px;
  display: grid;
  grid-template-columns: 18px auto;
  gap: 10px;
  padding-left: 8px;
  line-height: 38px;
  align-items: center;
  box-sizing: border-box;
}

.filter_item .t_medium {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.filter_list .filter_item:last-child .t_medium {
  border-bottom: none;
}

.inputGroup_dmy {
  display: grid;
  grid-template-columns: 64px 172px 78px;
  gap: 4px;
}

div.list_table {
  /* overflow: overlay; */
  overflow-y: auto;
}

.content_box_flow div.list_table::-webkit-scrollbar {
  width: 0px;
}
div.list_table::-webkit-scrollbar,
.content_box_flow::-webkit-scrollbar,
.list_tab_menu::-webkit-scrollbar,
.main_layout_scroll::-webkit-scrollbar,
.dashboard_head_scroll_layout::-webkit-scrollbar,
.special_scroll_section::-webkit-scrollbar,
.main_layout_scroll_with_tap_menu_tube::-webkit-scrollbar {
  width: 7px;
}
div.list_table::-webkit-scrollbar-thumb,
.content_box_flow::-webkit-scrollbar-thumb,
.list_tab_menu::-webkit-scrollbar-thumb,
.main_layout_scroll::-webkit-scrollbar-thumb,
.dashboard_head_scroll_layout::-webkit-scrollbar-thumb,
.special_scroll_section::-webkit-scrollbar-thumb,
.main_layout_scroll_with_tap_menu_tube::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10rem;
  border: 1px solid #fff;
}

div.list_table::-webkit-scrollbar-track-piece:start,
.content_box_flow::-webkit-scrollbar-track-piece:start,
.list_tab_menu::-webkit-scrollbar-track-piece:start,
.main_layout_scroll::-webkit-scrollbar-track-piece:start,
.dashboard_head_scroll_layout::-webkit-scrollbar-track-piece:start,
.special_scroll_section::-webkit-scrollbar-track-piece:start,
.main_layout_scroll_with_tap_menu_tube::-webkit-scrollbar-track-piece:start {
  background: transparent;
}

div.list_table::-webkit-scrollbar-track-piece:end,
.content_box_flow::-webkit-scrollbar-track-piece:end,
.list_tab_menu::-webkit-scrollbar-track-piece:end,
.main_layout_scroll::-webkit-scrollbar-track-piece:end,
.dashboard_head_scroll_layout::-webkit-scrollbar-track-piece:end,
.special_scroll_section::-webkit-scrollbar-track-piece:end,
.main_layout_scroll_with_tap_menu_tube::-webkit-scrollbar-track-piece:end {
  background: transparent;
}

.full_tab_menu_section {
  width: 100%;
  height: 32px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 44px 1px auto;
  gap: 8px;
  margin-bottom: 8px;
}

.full_tab_menu_section.full_tab_menu_section_2btn {
  grid-template-columns: 44px 1px 44px auto;
}

.full_tab_menu_section.bottom0 {
  margin-bottom: 0px;
}

.list_menu_btn {
  display: flex;
  width: 44px;
  min-width: 44px;
  height: 32px;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(
    --action-button-idle-platter,
    radial-gradient(50% 100% at 50.01% 100%, #232729 0%, #353e42 100%)
  );
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

/* @keyframes btn_shining {
    10% {border: 1px solid #1784B3;
        background: radial-gradient(5% 100% at 50.01% 100%, #1784B3 0%, #353E42 100%);
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10);
    }
    20% {border: 1px solid #1784B3;
        background: radial-gradient(10% 100% at 50.01% 100%, #1784B3 0%, #353E42 100%);
        box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.10);
    }
    30% {border: 1px solid #1784B3;
        background: radial-gradient(15% 100% at 50.01% 100%, #1784B3 0%, #353E42 100%);
        box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.10);
    }
    40% {border: 1px solid #1784B3;
        background: radial-gradient(20% 100% at 50.01% 100%, #1784B3 0%, #353E42 100%);
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10);
    }
    50% {border: 1px solid #1784B3;
        background: radial-gradient(25% 100% at 50.01% 100%, #1784B3 0%, #353E42 100%);
        box-shadow: 0px 1px 1px 1px rgba(23, 132, 179, 0.50);
    }
    60% {border: 1px solid #1784B3;
        background: radial-gradient(30% 100% at 50.01% 100%, #1784B3 0%, #353E42 100%);
        box-shadow: 0px 1px 2px 1px rgba(23, 132, 179, 0.50);
    }
    70% {border: 1px solid #1784B3;
        background: radial-gradient(35% 100% at 50.01% 100%, #1784B3 0%, #353E42 100%);
        box-shadow: 0px 0px 3px 1px rgba(23, 132, 179, 0.50);
    }
    80% {border: 1px solid #1784B3;
        background: radial-gradient(40% 100% at 50.01% 100%, #1784B3 0%, #353E42 100%);
        box-shadow: 0px 0px 4px 2px rgba(23, 132, 179, 0.50);
    }
    90% {border: 1px solid #1784B3;
        background: radial-gradient(45% 100% at 50.01% 100%, #1784B3 0%, #353E42 100%);
        box-shadow: 0px 0px 5px 2px rgba(23, 132, 179, 0.50);
    }
    100% {border: 1px solid #1784B3;
        background: radial-gradient(50% 100% at 50.01% 100%, #1784B3 0%, #353E42 100%);
        box-shadow: 0px 0px 6px 2px rgba(23, 132, 179, 0.50);
    }
  } */
@keyframes btn_shining {
  0% {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #232729;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  }
  50% {
    border: 1px solid rgba(108, 197, 235, 1);
    background-color: #1784b3;
    box-shadow: 0px 0px 6px 2px rgba(23, 132, 179, 0.5);
  }
  100% {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #232729;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  }
}
.list_menu_btn.list_menu_btn_text {
  position: absolute;
  left: calc(44px + 8px + 1px + 8px + 12px);
  width: fit-content;
  transition: 0.2s;
  padding: 6px 12px;
  color: #ffffff;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  text-wrap: nowrap;
  background: unset;
  background-color: #232729;
  animation: btn_shining 2s infinite;
}
.list_menu_btn:hover {
  border: 1px solid #1784b3;
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #1784b3 0%,
    #353e42 100%
  );
  box-shadow: 0px 0px 6px 2px rgba(23, 132, 179, 0.5);
  transition: 0.2s;
}
.list_menu_btn:active {
  transform: scale(95%);
  transition: 0.1s;
}

.full_tab_menu_section .tab_menu_section {
  display: flex;
  flex-direction: row;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.full_tab_menu_section.full_tab_menu_section_2btn .tab_menu_section {
  margin-left: -6px;
}

.full_tab_menu_section .tab_menu_section .tap_menu {
  width: fit-content;
  white-space: nowrap;
  height: 32px;
  border-radius: 16px;
  box-sizing: border-box;
  box-shadow: none;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 6px 12px 6px 6px;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  cursor: pointer;
  color: var(--color-black);
  transition: 0.5s;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 300px;
}
.full_tab_menu_section .tab_menu_section .tap_menu_active,
.list_tab_menu .tap_menu_active {
  background: radial-gradient(ellipse at bottom, #6cc5eb, #8fddff);
}
.full_tab_menu_section .tab_menu_section .tap_menu.tap_menu_active:hover,
.list_tab_menu .tap_menu.tap_menu_active:hover {
  background: radial-gradient(ellipse at bottom, #3dbcf2, #73d5ff);
  transition: 0.2s;
}
.full_tab_menu_section .tab_menu_section .tap_menu_active .tube_icon_box {
  background-color: #3da1cc;
}
.full_tab_menu_section .tab_menu_section .tap_menu:hover,
.list_tab_menu .tap_menu:hover {
  background: radial-gradient(ellipse at bottom, #bfedff, #d9f4ff);
  transition: 0.2s;
}

.tab_menu_list_popup_cover {
  width: 10px;
  height: calc(100vh - 48px - 82px - 18px - 12px - 12px);
  box-sizing: border-box;
  border: none;
  position: absolute;
  top: 6px;
  left: 0px;
  z-index: 101;
  overflow: hidden;
  background: transparent;
}

.tab_menu_list_popup_cover_full{
  top: 0px;
}

.tab_menu_list_popup_cover_full .tab_menu_list_popup{
  left: 0px;
}

.tab_menu_list_popup_cover.tab_menu_list_popup_cover_2 {
  height: calc(100vh - 48px - 82px - 12px);
}

.tab_menu_list_popup_cover.tab_menu_list_popup_cover_3 {
  height: calc(100vh - 48px - 82px - 18px - 12px - 32px);
}

.tab_menu_list_popup_cover.tab_menu_list_popup_cover_popup_full {
  left: 4px;
  top: unset;
  position: fixed;
}

.tab_menu_list_popup_cover.tab_menu_list_popup_cover_popup_full_2 {
  left: 4px;
  top: unset;
  bottom: 64px;
  position: fixed;
  height: calc(100vh - 48px - 82px - 18px - 12px - 8px);
}

.tab_menu_list_popup_cover.tab_menu_list_popup_cover_popup {
  height: calc(100% - 52px - 12px - 18px - 12px);
  bottom: 6px;
  left: -6px;
  top: unset;
}

.tab_menu_list_popup_cover.tab_menu_list_popup_cover_popup_2 {
  height: calc(100% - 64px - 48px - 12px - 52px - 12px);
  bottom: 64px;
  left: 4px;
  top: unset;
  position: fixed;
}

.tab_menu_list_popup_cover.tab_menu_list_popup_cover_popup_2_1 {
  height: calc(100% - 64px - 48px - 12px - 52px);
  bottom: 64px;
  left: 4px;
  top: unset;
  position: fixed;
}

.tab_menu_list_popup_cover.tab_menu_list_popup_cover_popup_2_2 {
  height: calc(100% - 64px - 48px - 12px - 106px);
  bottom: 64px;
  left: 4px;
  top: unset;
  position: fixed;
}

.tab_menu_list_popup_cover.tab_menu_list_popup_cover_popup_2_4 {
  height: calc(100% - 64px - 48px - 12px - 106px - 94px - 66px - 42px);
  bottom: 64px;
  left: 4px;
  top: unset;
  position: fixed;
}

.tab_menu_list_popup_cover.tab_menu_list_popup_cover_popup_2_3 {
  height: calc(100% - 64px - 48px - 12px - 106px - 94px);
  bottom: 64px;
  left: 4px;
  top: unset;
  position: fixed;
}

.tab_menu_list_popup_cover.tab_menu_list_popup_cover_popup_2_5 {
  height: calc(100% - 64px - 48px - 12px - 90px);
  bottom: 64px;
  left: 4px;
  top: unset;
  position: fixed;
}

.tab_menu_list_popup_cover.tab_menu_list_popup_cover_popup_3 {
  height: calc(100% - 48px - 12px - 52px - 12px);
  bottom: 4px;
  left: 4px;
  top: unset;
  position: fixed;
}

.tab_menu_list_popup_cover.tab_menu_list_popup_cover_popup_4 {
  height: calc(100% - 64px - 48px - 12px - 18px);
  bottom: 6px;
  left: 4px;
  top: unset;
  position: fixed;
}

.tab_menu_list_popup_cover.tab_menu_list_popup_cover_popup_5 {
  height: calc(100% - 112px - 48px - 12px - 10px);
  bottom: 6px;
  left: 4px;
  top: unset;
  position: fixed;
}

.tab_menu_list_popup_cover.tab_menu_list_popup_cover_popup_6 {
  height: calc(100% - 84px - 48px - 12px - 10px);
  bottom: 6px;
  left: 4px;
  top: unset;
  position: fixed;
}

.tab_menu_list_popup_cover.tab_menu_list_popup_cover_popup_7 {
  height: calc(100% - 84px - 48px - 12px - 196px);
  bottom: 6px;
  left: 4px;
  top: unset;
  position: fixed;
}

.tab_menu_list_popup {
  width: 256px;
  height: 100%;
  box-sizing: border-box;
  padding: 6px;
  display: grid;
  grid-template-rows: 32px 1px auto;
  gap: 8px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  position: relative;
  left: 6px;
  z-index: 101;
  transform: translate(-264px, 0px);
  transition: 0.3s;
}

.list_tab_menu {
  display: flex;
  width: 242px;
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: scroll;
}

.list_tab_menu .tap_menu {
  width: 100%;
  white-space: nowrap;
  min-height: 32px;
  border-radius: 16px;
  box-sizing: border-box;
  box-shadow: none;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 6px 12px 6px 6px;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  cursor: pointer;
  color: var(--color-black);
  transition: 0.5s;
  display: flex;
  align-items: center;
  gap: 6px;
  word-break: break-word;
  white-space: normal;
}

.dupplicate_button {
  display: flex;
  height: 24px;
  width: fit-content;
  box-sizing: border-box;
  padding: 2px 6px;
  align-items: center;
  gap: 2px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: var(
    --action-button-idle-no-platter,
    radial-gradient(50% 100% at 50.01% 100%, #f5f7f7 0%, #fff 100%)
  );
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
  color: #000;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px; /* 133.333% */
  cursor: pointer;
  transition: 0.2s;
}
.dupplicate_button:hover {
  border-radius: 6px;
  border: 1px solid #6cc5eb;
  background: radial-gradient(50% 100% at 50.01% 100%, #6cc5eb 0%, #fff 100%);
  box-shadow: 0px 0px 6px 0px #6cc5eb;
}
.dupplicate_button.btn_red {
  color: #d9363c;
}
.dupplicate_button.btn_red:hover {
  border: 1px solid #d9363c;
  background: radial-gradient(50% 100% at 50.01% 100%, #ffbfc1 0%, #fff 100%);
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
}

.text_box_layout_14 {
  color: #000;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 128.571% */
}

/* new checkbox 2024 all state */
.checkbox_list_section {
  display: flex;
  padding: 6px 0px;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  box-sizing: border-box;
}

.checkbox_list_section.checkbox_row {
  gap: 12px;
  flex-direction: row;
  flex-wrap: wrap;
}

.checkbox_list_section label,
.flex_table_header label,
.list_table label,
.filter_section label {
  cursor: pointer;
}

.checkbox_list_section .disable_layer {
  cursor: unset;
}

.checkbox_list_section .t_14 {
  line-height: 18px;
}

.checkbox_section_V2024 {
  display: grid;
  grid-template-columns: 20px auto;
  align-items: center;
  gap: 6px;
}

.checkbox_t14 {
  color: #000;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 128.571% */
  letter-spacing: -0.28px;
}

.checkbox_t14.t_red {
  color: #b32428;
}

.checkbox_V2024 {
  width: 20px;
  height: 20px;
  position: relative;
  user-select: none;
}

.checkbox_V2024 input ~ .checkbox_square_V2024 {
  width: 20px;
  height: 20px;
  top: calc(50% - (20px / 2));
  left: 0px;
  position: absolute;
  box-sizing: border-box;
  background: transparent;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: radial-gradient(50% 100% at 50.01% 100%, #f5f7f7 0%, #fff 100%);
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1) inset;
  box-sizing: border-box;
}

.checkbox_V2024 input:checked ~ .checkbox_square_V2024::after {
  width: 10px;
  height: 10px;
  position: absolute;
  top: calc(50% - (10px / 2));
  left: calc(50% - (10px / 2));
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/assets/checkmark_2024-741c5338.svg");
  display: block;
  content: "";
  -webkit-transform: unset;
  -ms-transform: unset;
  transform: unset;
  border: none;
}

.checkbox_V2024 input:checked.dash_checked ~ .checkbox_square_V2024::after {
  width: 11px;
  height: 2px;
  position: absolute;
  top: calc(50% - (2px / 2));
  left: calc(50% - (11px / 2));
  background: #ffffff;
  border-radius: 1px;
  box-sizing: border-box;
  display: block;
  content: "";
  -webkit-transform: unset;
  -ms-transform: unset;
  transform: unset;
  border: none;
}

label:hover .checkbox_V2024 input ~ .checkbox_square_V2024 {
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #a1d2e5 0%,
    #bfedff 100%
  );
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1) inset;
}

.checkbox_V2024 input:checked ~ .checkbox_square_V2024 {
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #6cc5eb 0%,
    #69d2ff 100%
  );
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.15) inset;
  border-radius: 4px;
}

label:hover .checkbox_V2024 input:checked ~ .checkbox_square_V2024 {
  border-radius: 4px;
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #2d8ab2 0%,
    #3da1cc 100%
  );
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1) inset;
}

.checkbox_V2024.disable_check input:checked ~ .checkbox_square_V2024 {
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #707b80 0%,
    #8e9699 100%
  );
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1) inset;
  cursor: unset;
}

label:hover
  .checkbox_V2024.disable_check
  input:checked
  ~ .checkbox_square_V2024 {
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #707b80 0%,
    #8e9699 100%
  );
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1) inset;
  cursor: unset;
}

.checkbox_V2024.disable_check input ~ .checkbox_square_V2024 {
  border-radius: 4px;
  border: 1px rgba(0, 0, 0, 0.1);
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #bcc5cc 0%,
    #dfe3e6 100%
  );
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1) inset;
  cursor: unset;
}

label:hover .checkbox_V2024.disable_check input ~ .checkbox_square_V2024 {
  border-radius: 4px;
  border: 1px rgba(0, 0, 0, 0.1);
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #bcc5cc 0%,
    #dfe3e6 100%
  );
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1) inset;
  cursor: unset;
}

.checkbox_list_section.check_more_txt .checkbox_section_V2024 {
  align-items: flex-start;
}

/* new radio 2024 all state */
.radio_list_section {
  display: flex;
  padding: 6px 0px;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  box-sizing: border-box;
}

.radio_list_section.radio_row {
  gap: 12px;
  flex-direction: row;
  flex-wrap: wrap;
}

.radio_list_section label,
.label_radio {
  cursor: pointer;
}

.radio_list_section .disable_label {
  cursor: unset;
}

.radio_list_section .t_14 {
  line-height: 18px;
}

.radio_list_section.radio_more_txt .radio_section_V2024 {
  align-items: flex-start;
}

.radio_list_section.gap12 {
  gap: 12px;
}

.radio_section_V2024 {
  display: grid;
  grid-template-columns: 20px auto;
  align-items: center;
  gap: 6px;
}

/* setting พิเศษ ของ excellence ที่เป็น radio เลือก N/A กับ ช่อง Input คะแนน Code ส่วนนี้จะ ปิดช่อง input กับ disable ปุ่ม resetช่ือ ให้เอง ตอนที่ติ้ก radio ออก */
.radio_section_V2024.section_with_input_special_disable:has(
    input[type="radio"]:not(:checked)
  )
  .input_special_disable {
  background-color: #dfe3e6;
}
.radio_section_V2024.section_with_input_special_disable:has(
    input[type="radio"]:not(:checked)
  )
  .input_special_disable:hover {
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25) inset;
  background-color: #dfe3e6;
  transition: 0.1s;
}
.radio_section_V2024.section_with_input_special_disable:has(
    input[type="radio"]:not(:checked)
  )
  .input_special_disable
  > input {
  cursor: unset;
  pointer-events: none;
}
.radio_section_V2024.section_with_input_special_disable:has(
    input[type="radio"]:not(:checked)
  )
  .input_special_disable
  > input::placeholder {
  color: rgba(0, 0, 0, 0.25);
}
.radio_section_V2024.section_with_input_special_disable:has(
    input[type="radio"]:not(:checked)
  )
  .btn_small {
  opacity: 0.25;
  cursor: unset;
  pointer-events: none;
  transition: 0.1s;
}
/* ---------------------- */

.radio_t14 {
  color: #000;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 128.571% */
  letter-spacing: -0.28px;
}

.radio_section_V2024 > .radio_t14 {
  align-self: center;
}

.radio_t14.t_red {
  color: #b32428;
}

.radio_V2024 {
  width: 20px;
  height: 20px;
  position: relative;
  user-select: none;
}

.radio_V2024 input ~ .radio_square_V2024 {
  width: 20px;
  height: 20px;
  top: calc(50% - (20px / 2));
  left: 0px;
  position: absolute;
  box-sizing: border-box;
  background: transparent;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: radial-gradient(50% 100% at 50.01% 100%, #f5f7f7 0%, #fff 100%);
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1) inset;
  box-sizing: border-box;
}

.radio_V2024 input:checked ~ .radio_square_V2024::after {
  width: 10px;
  height: 10px;
  position: absolute;
  top: calc(50% - (10px / 2));
  left: calc(50% - (10px / 2));
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/assets/checkmark_2024-741c5338.svg");
  display: block;
  content: "";
  -webkit-transform: unset;
  -ms-transform: unset;
  transform: unset;
  border: none;
}

label:hover .radio_V2024 input ~ .radio_square_V2024 {
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #a1d2e5 0%,
    #bfedff 100%
  );
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1) inset;
}

.radio_V2024 input:checked ~ .radio_square_V2024 {
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #6cc5eb 0%,
    #69d2ff 100%
  );
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.15) inset;
  border-radius: 10px;
}

label:hover .radio_V2024 input:checked ~ .radio_square_V2024 {
  border-radius: 10px;
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #2d8ab2 0%,
    #3da1cc 100%
  );
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1) inset;
}

.radio_V2024.disable_check input:checked ~ .radio_square_V2024 {
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #707b80 0%,
    #8e9699 100%
  );
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1) inset;
  cursor: unset;
}

label:hover .radio_V2024.disable_check input:checked ~ .radio_square_V2024 {
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #707b80 0%,
    #8e9699 100%
  );
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1) inset;
  cursor: unset;
}

.radio_V2024.disable_check input ~ .radio_square_V2024 {
  border-radius: 10px;
  border: 1px rgba(0, 0, 0, 0.1);
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #bcc5cc 0%,
    #dfe3e6 100%
  );
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1) inset;
  cursor: unset;
}

label:hover .radio_V2024.disable_check input ~ .radio_square_V2024 {
  border-radius: 10px;
  border: 1px rgba(0, 0, 0, 0.1);
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #bcc5cc 0%,
    #dfe3e6 100%
  );
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1) inset;
  cursor: unset;
}

/* grade select table */
.grade_select_table {
  display: grid;
  grid-template-rows: repeat(auto, 32px);
}

.grade_select_table_row {
  display: grid;
  grid-template-columns: repeat(4, 120px);
}

.grade_table_header {
  padding: 6px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: linear-gradient(180deg, #8bd1ef 0%, #6cc5eb 100%);
}

.grade_table_list {
  padding: 6px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #ffffff;
}

.grade_table_header:first-child {
  border-radius: 8px 0px 0px 0px;
}
.grade_table_header:last-child {
  border-radius: 0px 8px 0px 0px;
}

.grade_select_table
  .grade_select_table_row:last-child
  .grade_table_list:first-child {
  border-radius: 0px 0px 0px 8px;
}
.grade_select_table
  .grade_select_table_row:last-child
  .grade_table_list:last-child {
  border-radius: 0px 0px 8px 0px;
}

.grade_select_table label {
  cursor: pointer;
  position: relative;
}

.grade_select_table .t14.t_bold {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* green circle check */
.checkbox_circle_green {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: relative;
  user-select: none;
  cursor: pointer;
}

.checkbox_circle_green input ~ .check_green {
  width: 20px;
  height: 20px;
  top: calc(50% - (20px / 2));
  left: 0px;
  position: absolute;
  box-sizing: border-box;
  background: transparent;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: radial-gradient(50% 100% at 50.01% 100%, #f5f7f7 0%, #fff 100%);
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1) inset;
  box-sizing: border-box;
}

.checkbox_circle_green input:checked ~ .check_green::after {
  width: 10px;
  height: 10px;
  position: absolute;
  top: calc(50% - (10px / 2));
  left: calc(50% - (10px / 2));
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/assets/checkmark_2024-741c5338.svg");
  display: block;
  content: "";
  -webkit-transform: unset;
  -ms-transform: unset;
  transform: unset;
  border: none;
}

/* label:hover .checkbox_circle_green input ~ .check_green{
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: radial-gradient(50% 100% at 50.01% 100%, #A1D2E5 0%, #BFEDFF 100%);
    box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.10) inset;
  } */

.checkbox_circle_green input:checked ~ .check_green {
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #97cc1c 0%,
    #a7e515 100%
  );
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.15) inset;
  border-radius: 50%;
}

.dupp_tag_circle_ic {
  width: 28px;
  height: 28px;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/assets/dupp_tag-3c021eda.svg");
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.1));
  margin-top: -6px;
}

.layout_blue_section {
  background-color: #bfedff;
  border-radius: 12px;
  box-sizing: border-box;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.layout_blue_section.tag_dup {
  margin-top: -6px;
}

.layout_blue_section .flex_list_section {
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: calc(100% + 2px);
  position: relative;
  left: -1px;
  bottom: -1px;
  height: fit-content;
  padding: 6px 12px;
  min-height: 52px;
}

.layout_blue_section .input_2col_box {
  padding: 12px;
}
/* ********************************************
  *********** selectใหม่ ขอปิดไว้ก่อน ห้ามลบ **********
  ******************************************** */
.input_select_section_V2024 {
  width: 100%;
  height: fit-content;
  position: relative;
}

.input_select_section_V2024 select {
  display: none;
}

.select-selected {
  background-color: #ffffff;
}

.select-selected:after {
  width: 10px;
  height: 6px;
  content: "";
  position: absolute;
  top: calc(50% - (6px / 2));
  right: 12px;
  background-image: url("/assets/select_option-98b7eb0c.svg");
}

.select-selected.select-arrow-active:after {
  transform: rotate(180deg);
}

.select-items div {
  /* height: 100%; */
  box-sizing: border-box;
  background-color: transparent;
  padding: 6px 12px;
  line-height: 21px;
  border: none;
  cursor: pointer;
  border-bottom: 1px solid #cccccc;
}

.select-selected {
  height: 100%;
  box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transition: 0.2s;
  background-color: #ffffff;
  box-sizing: border-box;
  padding: 6px 12px;
  line-height: 21px;
  cursor: pointer;
  position: relative;
  z-index: 106;
  padding-right: 36px;
  color: #000;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.28px;
}

.select-selected.select-arrow-active {
  border: 1px solid #6cc5eb;
  box-shadow: 0px 0px 6px 0px #6cc5eb, 0px 0px 4px 0px rgba(0, 0, 0, 0.25) inset;
}

.select-items {
  width: calc(100% + 16px);
  position: absolute;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 34px 8px 8px 8px;
  top: -8px;
  left: -8px;
  right: 0;
  z-index: 105;
  max-height: 286px;
  min-height: 286px;
  /* overflow-y: scroll;
    overflow-x: hidden; */
  border-radius: 16px;
  border: 1px solid #6cc5eb;
  background: radial-gradient(
    189.15% 100% at 50% 100%,
    rgba(191, 237, 255, 0.75) 0%,
    rgba(255, 255, 255, 0.75) 25%,
    rgba(255, 255, 255, 12.75) 100%
  );
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
  color: #000;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.28px;
}

.select-hide {
  display: none;
}

.select-items div:hover,
.same-as-selected {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: #6cc5eb;
}

.input_in_search {
  border: none;
  width: 100%;
  resize: none;
  box-sizing: border-box;
  color: #000;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.28px;
  background-color: transparent;
}

.blue_tag_section_list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}

.blue_tag {
  display: grid;
  grid-template-columns: auto 20px;
  padding: 4px 4px 4px 12px;
  align-items: center;
  gap: 4px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #6cc5eb 0%,
    #69d2ff 100%
  );
  box-sizing: border-box;
}

.remove_tag_btn {
  width: 20px;
  height: 20px;
  background: radial-gradient(50% 100% at 50.01% 100%, #f5f7f7 0%, #fff 100%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1) inset;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.remove_tag_ic {
  width: 10px;
  height: 1.77px;
  border: none;
  box-sizing: border-box;
  background-color: #d9363c;
  border-radius: 1px;
}

.remove_tag_btn:hover {
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #d9363c 0%,
    #f23038 100%
  );
}

.remove_tag_btn:hover .remove_tag_ic {
  background-color: #ffffff;
}

.input_with_select {
  position: relative;
  width: 100%;
}

.input_with_select .input_section_full {
  z-index: 106;
}

.remove_btn_section_2024 {
  height: 24px;
  box-sizing: border-box;
  position: relative;
}

.remove_btn_2024 {
  display: flex;
  height: 24px;
  box-sizing: border-box;
  padding: 2px 6px;
  align-items: center;
  gap: 2px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: var(
    --action-button-idle-no-platter,
    radial-gradient(50% 100% at 50.01% 100%, #f5f7f7 0%, #fff 100%)
  );
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
  color: #d9363c;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px; /* 133.333% */
  cursor: pointer;
  transition: 0.2s;
  z-index: 99;
  position: relative;
  white-space: nowrap;
}

.remove_btn_2024:hover {
  border: 1px solid #d9363c;
  background: radial-gradient(50% 100% at 50.01% 100%, #ffbfc1 0%, #fff 100%);
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
}

.remove_btn_section_2024.btn_open .remove_btn_2024 {
  color: #ffffff;
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #d9363c 0%,
    #f23038 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.remove_btn_section_2024.btn_open .remove_btn_2024 .icon_size_20x20.bin_r {
  background-image: url("/assets/bin_white_2024-4e8360aa.svg");
  transform: scale(0.9);
}

.remove_btn_section_2024.btn_open .remove_btn_2024 .icon_size_20x20.remove_r {
  background-image: url("/assets/remove_white-6f9cd594.svg");
}

.remove_btn_section_2024.btn_open .remove_btn_2024:hover {
  background: radial-gradient(ellipse at bottom, #bf0006, #e6454a);
  box-shadow: 0px 6px 12px rgba(217, 54, 60, 0.5);
}

.cancel_remove_btn_2024 {
  height: 24px;
  position: absolute;
  box-sizing: border-box;
  padding: 2px 20px 2px 12px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: var(
    --action-button-idle-no-platter,
    radial-gradient(50% 100% at 50.01% 100%, #f5f7f7 0%, #fff 100%)
  );
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
  color: #000;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 166.667% */
  letter-spacing: -0.24px;
  z-index: 98;
  top: 0px;
  transition: 0.2s;
  cursor: pointer;
  overflow-y: hidden;
}

.remove_btn_section_2024.delete_btn .cancel_remove_btn_2024 {
  /* padding: 2px 10px 2px 4px; */
}

.cancel_remove_btn_2024:hover {
  border-radius: 6px;
  border: 1px solid #6cc5eb;
  background: radial-gradient(50% 100% at 50.01% 100%, #6cc5eb 0%, #fff 100%);
  box-shadow: 0px 0px 6px 0px #6cc5eb;
}

.remove_btn_section_2024.btn_open .cancel_remove_btn_2024 {
  transform: translateX(-56px);
}

.remove_btn_section_2024.delete_btn.btn_open .cancel_remove_btn_2024 {
  /* transform: translateX(-38px); */
}

.content_select_scroll {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 192px;
}

/* fix popup */
.popup_box_size256 .fix_section_top,
.popup_box_size454 .fix_section_top,
.popup_box_size480 .fix_section_top,
.popup_box_size922 .fix_section_top,
.popup_box_size928 .fix_section_top,
.popup_box_size640 .fix_section_top,
.popup_box_size643 .fix_section_top {
  background-color: #e3e7e8;
}

.two_layout_body {
  display: grid;
  grid-template-columns: 410px auto;
  width: 100%;
  height: calc(100% - 40px - 12px);
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  left: 0px;
  bottom: 0px;
  padding: 12px;
  box-sizing: border-box;
  gap: 12px;
}

.mentor_layout {
  padding: 0px 12px 12px 24px;
  border-radius: 0px 8px 8px 0px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background: var(
    --Action-Button-No-Platter,
    radial-gradient(50% 100% at 50.01% 100%, #f5f7f7 0%, #fff 100%)
  );
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
  position: relative;
  height: 100%;
  box-sizing: border-box;
  overflow-y: hidden;
  overflow-x: hidden;
}

.mentor_layout .fix_section_top {
  padding-top: 12px;
}

.mentor_book_edge {
  width: 12px;
  height: 100%;
  position: absolute;
  left: -2px;
  top: 0px;
  background: linear-gradient(
      180deg,
      #fff 0%,
      rgba(255, 255, 255, 0) 10%,
      rgba(255, 255, 255, 0) 90%,
      #fff 100%
    ),
    linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
}

/* calendar style 2024 */
.calendar_layer {
  display: grid;
  grid-template-columns: 256px 348px;
  gap: 12px;
  height: 100%;
  position: relative;
  padding-bottom: 12px;
  box-sizing: border-box;
}

.calendar_section {
  width: 256px;
  height: fit-content;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--Black---B0-W100, #fff);
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.month_section {
  height: 34px;
  padding-bottom: 8px;
  box-sizing: border-box;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-columns: 36px auto 36px;
  gap: 8px;
}

.next_btn {
  display: flex;
  padding: 2px 7px;
  height: 24px;
  align-items: center;
  box-sizing: border-box;
  gap: 10px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(
    --Action-Button-Platter,
    radial-gradient(50% 100% at 50.01% 100%, #232729 0%, #353e42 100%)
  );
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.next_btn:hover {
  background: radial-gradient(ellipse at bottom, #1784b3, #002d40);
  box-shadow: 0px 6px 12px rgba(23, 132, 179, 0.5);
  transition: 0.2s;
}

.calendar_select {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  color: #000;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px; /* 128.571% */
  letter-spacing: -0.28px;
  border: none;
}

.day_section {
  height: 34px;
  padding: 8px 0px;
  box-sizing: border-box;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-columns: repeat(7, auto);
}

.day_section div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.date_section {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(7, auto);
  /* grid-template-rows: repeat(auto-fill,41px); */
}

.date_section .date_block {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 6px;
  padding-bottom: 6px;
  position: relative;
}

.date_section .date_block:nth-last-child(-n + 7) {
  border-bottom: none;
}

.block_noti {
  display: flex;
  align-items: center;
  gap: 2px;
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
}

.blue_noti {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(
    --Action-Button-Blue,
    radial-gradient(50% 100% at 50.01% 100%, #6cc5eb 0%, #69d2ff 100%)
  );
  border: 1px solid var(--Button-Stroke-On-Dark, rgba(255, 255, 255, 0.15));
}

.yellow_noti {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(
    --Action-Button-Yellow,
    radial-gradient(50% 100% at 50.01% 100%, #f4bd31 0%, #ffc226 100%)
  );
  border: 1px solid var(--Button-Stroke-On-Dark, rgba(255, 255, 255, 0.15));
}

.date_select_box {
  /* display: block; */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.date_select_box .t14 {
  z-index: 1;
  height: 18px;
  line-height: 20px;
}

.date_select_box input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}

.date_select {
  position: absolute;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border-radius: 14px;
}

.date_select_box:hover input ~ .date_select {
  background: var(--Blue---Light50, #bfedff);
  cursor: pointer;
}
.date_select_box:hover .t14 {
  cursor: pointer;
}

.date_select_box:hover input:disabled ~ .date_select,
.date_select_box:hover input[disabled="disabled"] ~ .date_select {
  background: unset;
  cursor: unset;
}

.date_select_box input:checked ~ .date_select {
  border: 1px solid var(--Button-Stroke-On-Dark, rgba(255, 255, 255, 0.15));
  background: var(
    --Action-Button-Blue,
    radial-gradient(50% 100% at 50.01% 100%, #6cc5eb 0%, #69d2ff 100%)
  );
}

.date_select_box input:checked ~ .t14 {
  font-weight: bold;
  color: #000000;
}

.date_select_box input:checked ~ .block_noti {
  display: none;
}

.time_section {
  width: 348px;
  /* height: 296px; */
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--Black---B0-W100, #fff);
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.day_month_section {
  height: 40px;
  margin-bottom: 8px;
  padding: 0px 4px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 36px auto 36px;
  gap: 8px;
  align-items: center;
}

.time_slot_layer {
  display: grid;
  grid-template-rows: 114px calc(100% - 114px - 10px);
  gap: 10px;
  box-sizing: border-box;
}

.time_slot_section {
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--Black---B0-W100, #fff);
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
  padding: 12px;
  box-sizing: border-box;
}

.time_layer_seperate {
  display: grid;
  grid-template-columns: 30px auto;
  position: absolute;
  width: 100%;
}

.time_table_section {
  display: grid;
  grid-template-rows: repeat(auto-fill, 32px);
  position: relative;
}

.time_text_section {
  display: grid;
  grid-template-rows: repeat(auto-fill, 32px);
  padding-top: 16px;
}
.time_text_section div {
  display: flex;
  align-items: center;
}

.time_table_block {
  height: 32px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  display: grid;
  grid-template-columns: 10px auto;
}

.time_table_block_R {
  border-left: 1px solid rgba(0, 0, 0, 0.15);
}

/* ใช้เฉพาะตอนกล่องเตี้ยมาก */
.set_time_block.center-text {
  justify-content: center; /* ⬅️ กลางแนวตั้ง */
}

.set_time_block {
  width: calc(100% - 11px);
  border-radius: 4px;
  position: absolute;
  right: 0px;
  display: flex;
  padding: 4px 4px 4px 8px;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  gap: 2px;
  cursor: pointer;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  transition: 0.3s;
}

.set_time_block:hover {
  transform: scale(102%);
  box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.15);
  transition: 0.05s;
}

.set_time_block.blue {
  border: 1px solid var(--Button-Stroke-On-Dark, rgba(255, 255, 255, 0.15));
  background: var(--Blue---Light50, #bfedff);
}

.set_time_block.yellow {
  border: 1px solid var(--Button-Stroke-On-Dark, rgba(255, 255, 255, 0.15));
  background: var(--Yellow---Light50, #ffe299);
}

.set_time_block.green{
  border: 1px solid var(--Button-Stroke-On-Dark, rgba(255, 255, 255, 0.15));
  background: var(--Green---Light50, #cef279);
}

.set_time_block .set_time_block_L {
  width: 4px;
  height: calc(100% + 2px);
  position: absolute;
  left: -1px;
  top: -1px;
  border-radius: 4px 0px 0px 4px;
}

.set_time_block.blue .set_time_block_L {
  background: var(--Blue---Primary, #6cc5eb);
}

.set_time_block.yellow .set_time_block_L {
  background: #f4bd31;
}

.normalize_section {
  display: flex;
  flex-direction: column;
}

.normalize_section .normalize_row {
  display: grid;
  grid-template-columns: 108px 1fr 1fr 1fr;
}

.normalize_section .normalize_row:first-child {
  border-radius: 8px 8px 0px 0px;
}

.normalize_section .normalize_row:last-child {
  border-radius: 0px 0px 8px 8px;
}

.normalize_section .normalize_row:last-child .normalize_block {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.normalize_row.color_yellow {
  background-color: #ffe299;
}

.normalize_row.color_yellow .normalize_block:first-child {
  border-radius: 8px 0px 0px 0px;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #f4bd31 0%,
    #ffc226 100%
  );
}

.normalize_row.color_yellow .normalize_block:last-child {
  border-radius: 0px 8px 0px 0px;
}

.normalize_row.color_blue {
  background-color: #bfedff;
}

.normalize_row.color_blue .normalize_block:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #6cc5eb 0%,
    #69d2ff 100%
  );
}

.normalize_row.color_green {
  background-color: #d5f291;
}

.normalize_row.color_green .normalize_block:first-child {
  border-radius: 0px 0px 0px 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #97cc1c 0%,
    #a7e515 100%
  );
}

.normalize_row.color_green .normalize_block:last-child {
  border-radius: 0px 0px 8px 0px;
}

.normalize_row .normalize_block:first-child {
  text-align: left;
}

.normalize_block {
  padding: 4px 8px;
  height: 24px;
  box-sizing: border-box;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
}

.list_select_section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 8px;
  gap: 8px;
  padding: 0px 11px;
}

.list_select_section.bottom0 {
  margin-bottom: 0px;
}

.special_scroll_section {
  padding: 0px 11px;
  box-sizing: border-box;
  height: fit-content;
  overflow-x: hidden;
  height: 100%;
  /* padding-bottom: 8px; */
  box-sizing: border-box;
}

.layout_input_score {
  width: 100%;
  height: calc(100% - 32px - 12px - 32px - 12px);
}

.layout_excellecne_table {
  width: 100%;
  height: calc(100% - 20px - 8px - 32px - 12px);
}

.layout_lb_progress {
  width: 100%;
  height: calc(100% - 151px - 8px - 12px);
}

.full_scroll_table_xy {
  display: grid;
  width: fit-content;
  grid-auto-rows: minmax(32px, auto);
  grid-template-columns: 100px 280px repeat(15, 120px) 120px 280px;
  position: relative;
}

.full_scroll_table_xy.excellence_table {
  grid-template-columns:
    100px 280px repeat(6, 120px) 144px 120px repeat(7, 120px)
    144px 120px 120px;
}

.full_scroll_table_xy.full_scroll_mile {
  grid-template-columns: 380px repeat(9, 120px);
}

.full_scroll_table_xy.full_scroll_mile_phase_task_list {
  grid-template-columns: 380px repeat(9, 120px);
}

.full_scroll_table_xy.full_scroll_plo {
  grid-template-columns: 300px repeat(8, 108px);
}

.full_scroll_table_xy.full_scroll_lb_progress {
  grid-template-columns: 100px 200px 180px 130px 180px repeat(9, 105px);
}

.full_scroll_table_xy.full_scroll_lb_progress_v2 {
  grid-template-columns: 280px 128px repeat(7, 128px);
}


.full_scroll_table_xy.full_scroll_su_progress_v2 {
  grid-template-columns: 280px 128px repeat(7, 128px) 300px;
}


.full_scroll_table_xy.full_scroll_excellence_progress_v2 {
  grid-template-columns: 280px 128px repeat(7, 128px) 300px;
}

.full_scroll_table_xy.table_plo_mile {
  grid-template-columns: 100px 220px repeat(5, 84px);
}

.full_scroll_table_xy.full_scroll_lb_progress_v2 .stick_l_1 {
  position: sticky;
  left: 280px;
}


.full_scroll_table_xy.full_scroll_su_progress_v2 .stick_l_1 {
  position: sticky;
  left: 100px;
}

.full_scroll_table_xy.full_scroll_excellence_progress_v2 .stick_l_1 {
  position: sticky;
  left: 100px;
}

.full_scroll_table_xy.full_scroll_lb_progress_in {
  grid-template-columns: 180px 180px 128px repeat(5, 128px);
}

.full_scroll_table_xy.full_scroll_lb_progress_in .stick_l_1 {
  position: sticky;
  left: 180px;
}

.full_scroll_table_xy.full_scroll_lb_progress_in_v2 {
  grid-template-columns: 280px 180px 128px repeat(5, 128px);
}

.full_scroll_table_xy.full_scroll_lb_progress_in_v2 .stick_l_1 {
  position: sticky;
  left: 280px;
}

.full_scroll_table_xy .stick_l_0 {
  position: sticky;
  left: 0px;
}
.full_scroll_table_xy .stick_l_1 {
  position: sticky;
  left: 100px;
}
.full_scroll_table_xy .stick_r_0 {
  position: sticky;
  right: 0px;
}
.main_student_data.stick_l_0,
.main_student_data.stick_l_1 {
  z-index: 100;
}

.full_scroll_table_xy .blue_title {
  background: linear-gradient(#8bd1ef, #6cc5eb);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 5px 6px;
}
.full_scroll_table_xy .blue_title_2 {
  background: linear-gradient(#bfedff, #8bd1ef);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 5px 6px;
}
.full_scroll_table_xy .blue_title_3 {
  background: linear-gradient(#d9f4ff, #bfedff);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 5px 6px;
}
.blue_title div,
.blue_title_2 div,
.blue_title_3 div {
  display: flex;
  align-items: center;
  justify-content: center;
  text-wrap: wrap;
  word-break: break-word;
  text-align: center;
}
.normal_title input {
  display: flex;
  align-items: center;
  justify-content: center;
  text-wrap: wrap;
  word-break: break-word;
  text-align: center;
  pointer-events: none;
}
.normal_title input::-webkit-outer-spin-button,
.normal_title input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.full_scroll_table_xy .red_title {
  background: linear-gradient(#ffbfc1, #f28589);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.full_scroll_table_xy .red_title_2 {
  background: linear-gradient(#ffd9da, #ffbfc1);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.15);
}




.full_scroll_table_xy .block_h2 {
  grid-row: span 2;
}

.full_scroll_table_xy .block_h3 {
  grid-row: span 3;
}

.full_scroll_table_xy .normal_title {
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 5px 6px;
  box-sizing: border-box;
  color: #000000;
  font-size: 14px;
  font-weight: bold;
  overflow-x: hidden;
  word-break: break-word;
  text-wrap: wrap;
}

.full_scroll_table_xy .normal_title.align_LR {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  gap: 8px;
}

.full_scroll_table_xy .align_L {
  justify-content: start;
  padding-left: 12px;
}

.full_scroll_table_xy.header_top {
  position: sticky;
  top: 0px;
  z-index: 101;
}

.full_scroll_table_xy .normal_title.red_title {
  background: #ffbfc1;
}

.full_scroll_table_xy .normal_title.yellow_title {
  background: #ffe299;
}

.full_scroll_table_xy .normal_title.blue_title {
  background: #BFEDFF;
}

.full_scroll_table_xy .normal_title.purple_title {
  background: #ecd9ff;
  cursor: pointer;
}

.full_scroll_table_xy .normal_title.comment {
  cursor: pointer;
}
.full_scroll_table_xy .normal_title.comment:hover {
  background: #e6fbff;
}

.full_scroll_table_xy .green_title {
  background-color: #d5f291;
}

.full_scroll_table_xy .normal_title.gray_title_3 {
  background: #c2c9cc;
}

.full_scroll_table_xy .gray_title_2 {
  background-color: #dfe3e6;
}

.full_scroll_table_xy .gray_title_5 {
  background-color: #f7f7f7;
}

.full_scroll_table_xy .gray_title {
  background: linear-gradient(180deg, #f5f7f7 0%, #dfe3e6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.15);
  z-index: 100;
}

.full_scroll_table_xy .normal_title.gray_title {
  z-index: 99;
}

.full_scroll_table_xy .gray_title_4 {
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: linear-gradient(180deg, #c2c9cc 0%, #8e9699 100%);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.full_scroll_table_xy .block_w2 {
  grid-column: span 2;
}
.full_scroll_table_xy .block_w3 {
  grid-column: span 3;
}
.full_scroll_table_xy .block_w4 {
  grid-column: span 4;
}
.full_scroll_table_xy .block_w5 {
  grid-column: span 5;
}
.full_scroll_table_xy .block_w6 {
  grid-column: span 6;
}
.full_scroll_table_xy .block_w7 {
  grid-column: span 7;
}
.full_scroll_table_xy .block_w8 {
  grid-column: span 8;
}
.full_scroll_table_xy .block_w9 {
  grid-column: span 9;
}
.full_scroll_table_xy .block_w10 {
  grid-column: span 10;
}
.full_scroll_table_xy .block_w11 {
  grid-column: span 11;
}
.full_scroll_table_xy .block_w12 {
  grid-column: span 12;
}
.full_scroll_table_xy .block_w13 {
  grid-column: span 13;
}
.full_scroll_table_xy .block_w14 {
  grid-column: span 14;
}
.full_scroll_table_xy .block_w15 {
  grid-column: span 15;
}
.full_scroll_table_xy .block_w16 {
  grid-column: span 16;
}
.full_scroll_table_xy .block_w17 {
  grid-column: span 17;
}
.full_scroll_table_xy .block_w18 {
  grid-column: span 18;
}
.full_scroll_table_xy .block_w19 {
  grid-column: span 19;
}
.full_scroll_table_xy .block_w20 {
  grid-column: span 20;
}

.full_scroll_table_xy .body_table_box {
  display: grid;
  grid-auto-rows: minmax(32px, auto);
  /* grid-auto-columns: 80px; */
}

.body_table_box .table_row {
  display: grid;
  grid-auto-columns: 80px;
  grid-auto-rows: minmax(32px, auto);
}

/* radius */
.radius_l {
  border-radius: 8px 0px 0px 8px;
}
.radius_r {
  border-radius: 0px 8px 8px 0px;
}
.radius_t {
  border-radius: 8px 8px 0px 0px;
}
.radius_b {
  border-radius: 0px 0px 8px 8px;
}
.radius_lb {
  border-radius: 0px 0px 0px 8px;
}
.radius_rb {
  border-radius: 0px 0px 8px 0px;
}
.radius_all {
  border-radius: 8px;
}
/* dashboard */
.main_dashboard_section {
  width: calc(100vw - 78px);
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
}

.dashboard_titlebar {
  height: 32px;
  position: fixed;
  width: calc(100% - 78px - 24px);
  top: 12px;
  right: 12px;
  display: grid;
  grid-template-columns: auto 140px 256px;
  gap: 6px;
}

.title_box_dash {
  display: flex;
  height: 32px;
  padding: 6px 12px;
  justify-content: left;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #bfedff;
  box-sizing: border-box;
}

.title_overview_btn {
  display: flex;
  min-height: 32px;
  justify-content: left;
  align-items: center;
  gap: 10px;
  background: radial-gradient(ellipse at bottom, #232729, #363d40);
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(170, 83, 83, 0.15);
  box-sizing: border-box;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
  padding: 6px 12px;
  white-space: nowrap;
  cursor: pointer;
}

.title_overview_btn:hover {
  background: radial-gradient(ellipse at bottom, #1784b3, #002d40);
  box-shadow: 0px 6px 12px rgba(23, 132, 179, 0.5);
  transition: 0.2s;
}

.dashboard_layout_main {
  position: relative;
  /* background-color: green; */
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
}

.dashboard_layout {
  width: calc(100vw - 78px);
  height: calc(100vh - 32px - 12px);
  /* position: fixed; */
  top: 44px;
  box-sizing: border-box;
  gap: 8px;
  padding: 8px 12px 12px 12px;
  display: flex;
  position: relative;
  /* background-color: red; */
}

.dashboard_head_layout {
  display: flex;
  width: 300px;
  min-width: 280px;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12.5px);
  transition: 0.5s;
  z-index: 2;
  
  /* position: absolute;
  top: 0;
  left: 0; */
}

.dashboard_head_layout.dashboard_head_layout_min {
  position: absolute;
  height: fit-content;
  bottom: 12px;
  right: 12px;
}

.dashboard_head_scroll_layout {
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}


.dashboard_head_scroll_layout.deep_view {
  overflow-y: hidden !important;
}

.dashboard_head_line_divide {
  width: 100%;
  height: 1px;
  min-height: 1px;
  background-color: rgba(0, 0, 0, 0.1);
}

.dashboard_head_layout_minimize {
  display: flex;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  padding: 1px;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  outline: 1px solid rgba(0, 0, 0, 0.1) !important;
  background: var(
    --Action-Button-Blue,
    radial-gradient(50% 100% at 50.01% 100%, #6cc5eb 0%, #69d2ff 100%)
  );
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1) inset;
  cursor: pointer;
}

.dashboard_widget_layout {
  /* display: flex;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    flex: 100%;
    overflow-y: auto; 
    overflow-x: hidden;
    padding-bottom: 6px; */
  display: grid;
  gap: 8px;
  align-items: start;
  justify-content: start;
  align-content: flex-start;
  grid-template-columns: repeat(auto-fill, 147px);
  grid-auto-rows: 124px;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 6px;
}

.dashboard_widget_box {
  display: flex;
  /* width: 302px;
      height: 256px; */
  width: 100%;
  height: 100%;
  padding: 8px 0px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;

  grid-row: span 2;
  grid-column: span 2;
}

.dashboard_widget_box.pd12 {
  /* padding: 11px; */
  padding: 9px;
}

.dashboard_widget_box.size2w {
  grid-column: span 4;
}

.dashboard_widget_box.size0-5w {
  grid-column: span 1;
  cursor: pointer;
}

.dashboard_widget_box.size1-5h {
  grid-column: span 3;
}

.dashboard_widget_box.size0-5h {
  grid-row: span 1;
  /* overflow-x: hidden;
    overflow-y: auto; */
  word-break: break-word;
  white-space: normal;
}

.dashboard_widget_box.size2h {
  grid-row: span 4;
}

.list_select_box {
  position: relative;
  display: grid;
  padding-left: 12px;
  grid-template-columns: 32px auto;
  gap: 6px;
  align-items: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}
.list_select_box.full {
  grid-template-columns: auto;
}



.list_select_box .flex_text_column {
  padding: 6px 0px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.list_select_box .t14 {
  z-index: 1;
  line-height: 18px;
}

.list_select_box input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}

.list_select_box:hover {
  background-color: #e6fbff;
}

.list_select_box:has(input:checked) {
  background: #6cc5eb;
  border-color: rgba(0,0,0,0.15);
  border-radius: 12px;
}

.demo_graph_215x215 {
  width: 215px;
  height: 215px;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/assets/plo_demo-773ee665.svg");
  align-self: center;
  cursor: pointer;
}

.demo_graph_215x215.clo_graph {
  background-image: url("/assets/demo_clo_graph-90cdcd7b.svg");
}

.demo_graph_100x100 {
  width: 100px;
  height: 100px;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/assets/lb_wg_demo-51837800.svg");
  align-self: center;
  cursor: pointer;
  position: sticky;
  top: 0px;
  bottom: 0px;
}

.demo_graph_100x100.red_su {
  background-image: url("/assets/red_graph_su-c2a8f661.svg");
}

.demo_graph_100x100.green_su {
  background-image: url("/assets/green_graph_su-8a46e752.svg");
}

.porgress_section {
  width: 100%;
  height: 12px;
  border-radius: 6px;
  position: relative;
  box-sizing: border-box;
}

.progress_layer {
  width: 100%;
  height: 12px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  position: absolute;
  box-sizing: border-box;
}

.progress_layer.progress_green {
  background: #97cc1c;
}
.progress_layer.progress_green2 {
  background: #cde52e;
}
.progress_layer.progress_yellow {
  background: #f4bd31;
}
.progress_layer.progress_orange {
  background: #f48231;
}
.progress_layer.progress_red {
  background: #d9363c;
}
.progress_layer.progress_blue {
  background: #6cc5eb;
}
.progress_layer.progress_gray {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

.progress_color_mark {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-sizing: border-box;
}
.progress_color_mark.color_green {
  background: #97cc1c;
}
.progress_color_mark.color_green2 {
  background: #cde52e;
}
.progress_color_mark.color_yellow {
  background: #f4bd31;
}
.progress_color_mark.color_orange {
  background: #f48231;
}
.progress_color_mark.color_red {
  background: #d9363c;
}

.box_scroll_mile {
  height: calc(100% - 210px - 12px);
}

.plo_2_layout_section {
  height: calc(100% - 52px - 8px - 8px);
  display: grid;
  grid-template-columns: 256px auto;
  gap: 8px;
}

.plo_2_layout_section.plo_2_layout_section_2 {
  height: calc(100% - 112px - 8px - 8px);
}

.plo_2_layout_section.plo_2_layout_section_3 {
  height: calc(100% - 141px - 8px);
}

.plo_2_layout_section.plo_2_layout_section_4 {
  height: calc(100% - 149px - 8px);
}

.plo_2_layout_section.plo_2_layout_section_5 {
  height: calc(100% - 181px - 8px);
}

.mile_layout {
  height: calc(100% - 112px - 8px - 8px);
}

.lb_layout {
  height: calc(100% - 84px - 8px - 8px);
}

.plo_2_layout_section .first_layout_block {
  height: 100%;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.demo_graph_1 {
  width: 230px;
  height: 230px;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("/assets/graph_demo_1-0b49f6b1.svg");
  background-position: center;
}

.demo_graph_1.demo_graph_2 {
  background-image: url("/assets/graph_demo2-f71ee4bd.svg");
}

.demo_graph_1.clo_graph {
  background-image: url("/assets/demo_clo_graph-90cdcd7b.svg");
}

.yellow_circle {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  box-sizing: border-box;
  background-color: #f4bd31;
}

.green_circle {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  box-sizing: border-box;
  background-color: #97cc1c;
}

.red_circle {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  box-sizing: border-box;
  background-color: #d9363c;
}

.vs_section {
  display: grid;
  grid-template-columns: 1fr 108px 1fr;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0px 6px 12px 6px;
}

.mid_status {
  width: 108px;
  height: 56px;
  display: flex;
  flex-direction: column;
  background-color: #808080;
  box-sizing: border-box;
  padding: 4px;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  border-radius: 8px;
  text-transform: uppercase;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.input_section_mini2:has(.count_input_box) > .input_group {
  padding-right: 56px;
}

.mpl_table_3col {
  display: grid;
  min-height: 32px;
  width: 100%;
  grid-template-columns: 108px 174px auto;
  gap: 0px;
}

.mpl_table_3col.mpl_table_4col {
  grid-template-columns: 160px 100px 100px auto;
}

.mpl_table_3col.mpl_table_3col_2 {
  grid-template-columns: auto 133px 133px;
}

.mpl_table_3col .mpl_header_blue {
  background: var(--Linear_Blue);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-right: none;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mpl_table_3col .mpl_header_blue:last-child {
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  border-top-right-radius: 8px;
}

.mpl_table_3col .mpl_header_blue:first-child {
  border-top-left-radius: 8px;
}

.mpl_table_3col .mpl_row {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-right: none;
  border-top: none;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mpl_row.mpl_gray {
  background: linear-gradient(180deg, #f5f7f7 0%, #dfe3e6 100%);
}

.mpl_table_3col.mpl_table_4col .mpl_row,
.mpl_table_3col.mpl_table_3col_2 .mpl_row {
  padding: 4px 8px;
}

.mpl_table_3col .mpl_row:last-child {
  border-right: 1px solid rgba(0, 0, 0, 0.15);
}

.mpl_table_3col .mpl_row:first-child {
  display: grid;
  grid-template-columns: auto 20px;
  justify-content: space-between;
  gap: 6px;
}

.flex_text_column .mpl_table_3col:last-child .mpl_row:last-child {
  border-bottom-right-radius: 8px;
}

.flex_text_column .mpl_table_3col:last-child .mpl_row:first-child {
  border-bottom-left-radius: 8px;
}

.mpl_title {
  display: flex;
  padding: 4px 8px;
  justify-content: flex-end;
  align-items: center;
  border-radius: 6px 0px 0px 6px;
  border: 1px solid var(--Button-Stroke-On-Light, rgba(0, 0, 0, 0.15));
  background: var(
    --Action-Button-No-Platter,
    radial-gradient(50% 100% at 50.01% 100%, #f5f7f7 0%, #fff 100%)
  );
  position: absolute;
  right: -1px;
  bottom: 5px;
  box-sizing: border-box;
  line-height: 12px;
}

.edit_su_section{
  width: 100%;
  display: grid;
  gap: 6px;
  grid-template-columns: auto 10px;
}

.edit_su_section:not(:has( .drop_down_icon)){
  grid-template-columns: auto;
}

.drop_down_icon{
  width: 10px;
  height: 6px;
  position: relative;
  top: calc(50% - (6px / 2));
  background-image: url("/assets/select_option-98b7eb0c.svg");
  cursor: pointer;
}

.normal_title:has( .drop_down_icon:hover) {
  background: #e6fbff;
}

/* test gif animate */
.like {
  display: block;
  width: 100px;
  height: 100px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/349115/like_animation.png)
    0 0 no-repeat;
  background-size: 2900%;
  animation: like-gif steps(28) 1s infinite both;
}

@keyframes like-gif {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}

.likes_move {
  position: relative;
  animation: like_move_animate 4s infinite both;
}

@keyframes like_move_animate {
  0% {
    left: 0px;
    top: 0px;
  }
  25% {
    left: 200px;
    top: 0px;
  }
  50% {
    left: 200px;
    top: 200px;
  }
  75% {
    left: 0px;
    top: 200px;
  }
  100% {
    left: 0px;
    top: 0px;
  }
}

@keyframes shake {
  0% {
    transform: translate(0px, -50%);
  }
  12.5% {
    transform: translate(-24px, -50%);
  }
  37.5% {
    transform: translate(18px, -50%);
  }
  62.5% {
    transform: translate(-12px, -50%);
  }
  87.5% {
    transform: translate(6px, -50%);
  }
  100% {
    transform: translate(0px, -50%);
  }
}

.password_shake {
  animation-duration: 0.25s;
  animation-timing-function: cubic-bezier(0, 0.23, 1, 0.71);
  animation-name: shake;
  transform-orgin: center bottom;
}

.stick_l_1,
.stick_l_0 {
  z-index: 100;
}

.normal_title:has(> .click_preview_clip) {
  position: relative;
  z-index: 99;
  overflow: hidden;
  padding: 0px 6px;
  min-height: 34px;
  cursor: pointer;
}

.normal_title:has(> .click_preview_clip) > .flex_text_column {
  z-index: 99;
  pointer-events: none;
}

.click_preview_clip {
  cursor: pointer;
  width: 100%;
  height: 100%;
  position: absolute;
}

.normal_title.purple_title.blinking {
  animation: blink 1s;
  animation-iteration-count: 3;
}

@keyframes blink {
  0% {
    background: #ecd9ff;
  }
  50% {
    background: #ffffff;
  }
  100% {
    background: #ecd9ff;
  }
}

.click_preview_clip.active {
  background: #bfedff;
  animation: bg_coldown 3s;
  animation-timing-function: linear;
}

@keyframes bg_coldown {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.click_preview_clip ~ .flex_text_column.content_countdown,
.click_preview_clip.active ~ .flex_text_column.content_default {
  display: none;
}

.click_preview_clip ~ .flex_text_column.content_default,
.click_preview_clip.active ~ .flex_text_column.content_countdown {
  display: flex;
}

.popup_notification {
  display: flex;
  width: 320px;
  padding: 11px;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  left: 72px;
  top: 60px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background: #ffffff;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

.ul_12 {
  font-size: 12px;
  margin: 0px;
  padding: 0px;
  padding-left: 16px;
}

/* Tae */
.hidden {
  display: none !important;
}

.visibility_hidden {
  visibility: hidden;
}
.popup_bg_index_under_toastx_2024_1_lv {
  width: 100vw;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 249999;
}
/* Tae */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* tsl styles */

.popup_bg_n {
  width: 100vw;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 201;
}

.flex_table_list.table_layer_4col_17:last-of-type {
  margin-bottom: 20px;
}

.full_scroll_table_xy .block_plo_headers_dynamic {
  grid-column: span 0;
}

.full_scroll_table_xy .block_sub_plo_headers_dynamic {
  grid-column: span 0;
}

.full_scroll_table_xy .block_milestone_plo_headers_dynamic {
  grid-column: span 0;
}

.dashboard_widget_item_layout {
  width: 100%;
}

.tap_menu {
  color: #000000 !important;
}

.grid_text_row_100_a {
  width: 100%;
  display: grid;
  grid-template-columns: 100px auto;
  align-items: center;
  gap: 12px;
  overflow: auto;
}

.full_scroll_mile_phase_task_list.container_task_list {
  margin-bottom: 10px;
}

.reset_upper {
  text-transform: capitalize !important;
}

.list_table.list_table_course_list {
  margin-bottom: 20px;
}

.gesture-active {
  cursor: pointer;
}

.logbook_epa_widget_panel_tsl .webix_view {
  background-color: transparent !important;
}

.lui_webix_template .webix_template {
  /* padding: 0 !important; */
}

.webix_lui_data_table {
  height: 100%;
  /* overflow: auto; */
}

.webix_lui_data_table.webix_view {
  letter-spacing: -0.4px !important;
}

/* .popup_content_container {
    height: 100%;
    overflow: auto;
  } */

/* circular progress bar  */

.circular_progress_wrapper {
  height: 100%;
  position: sticky;
  top: 0px;
}

.circular_progress_100x100 {
  width: 100px;
  height: 100px;
  align-self: center;
  cursor: pointer;
  position: sticky !important;
  top: 0px;
  bottom: 0px;
}

.progress-container {
  position: relative;
  width: 100px;
  height: 100px;
}
.progress-svg {
  transform: rotate(-90deg);
}
.progress-circle-bg {
  fill: none;
  stroke: rgba(217, 217, 217, 1);
  stroke-width: 7;
}
.progress-circle {
  fill: none;
  stroke-width: 7;
  stroke-dasharray: 282.74;
  stroke-dashoffset: 282.74;
  /* stroke-dasharray: 254.47;
    stroke-dashoffset: 254.47; */
  /* stroke-dasharray: 268.61;
    stroke-dashoffset: 268.61; */
  transition: stroke-dashoffset 1s ease-in-out;
}

.progress-circle-stroke-blue {
  stroke: #6cc5eb;
}

.progress-circle-stroke-green {
  stroke: #97cc1c;
}

.progress-circle-stroke-red {
  stroke: #d9363c;
}


.progress-circle-stroke-light-green {
  stroke: #cde530;
}

.progress-text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75px;
  height: 75px;
  border-radius: 50%;
}

.progress-text-bg-color-blue {
  background-color: #daf0fa;
}

.progress-text-bg-color-red {
  background: rgba(217, 54, 60, 0.25);
}

.progress-text-bg-color-green {
  background: rgba(151, 204, 28, 0.25);
}


.progress-text-bg-color-light-green {
  background: rgb(241, 248, 201);
}

.progress-text {
  width: 100%;
  height: 100%;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 18px;
}

.no_scroll {
  overflow-y: hidden !important;
}

.custom_table_css {
  background: #000;
}

.flex_text_row.tsl_min_max_indicator {
  justify-content: flex-end;
}

.grid_text_row_a_20 {
  display: grid;
  grid-template-columns: auto 20px;
  align-items: center;
}

.grid_text_row_a_20.no_center {
  align-items: flex-start;
}

.grid_text_row_a_20.gap8 {
  gap: 8px;
}

.popup_content_container {
  height: calc(95%);
}

.none_list_section.none_list_filter_dashboard_epa_logbook {
  top: 24px;
}

.full_scroll_table_xy.full_scroll_lb_progress.layout_lb_progress_group_1 {
  grid-template-columns: 100px 200px 180px 130px 180px repeat(9, 105px);
}

.full_scroll_table_xy.full_scroll_lb_progress.layout_lb_progress_group_2 {
  grid-template-columns: 100px 200px 180px 130px 180px repeat(9, 105px);
}

.full_scroll_table_xy.full_scroll_lb_progress.layout_lb_progress_group_3 {
  grid-template-columns: 100px 200px auto 180px;
  grid-auto-flow: row;
}

/* Student rows section - auto-adjust height based on content, min 32px (16px per row * 2 rows) */
.full_scroll_table_xy.full_scroll_lb_progress.layout_lb_progress_group_3:not(.header_top) {
  grid-auto-rows: minmax(16px, auto);
}

/* Ensure cells have minimum height of 32px and can expand */
.full_scroll_table_xy.full_scroll_lb_progress.layout_lb_progress_group_3:not(.header_top) .normal_title {
  min-height: 32px;
}

/* Position Sum column to start at row 1, spanning 3 rows */
/* Note: grid-column will be set dynamically via JavaScript based on number of tasks */
.full_scroll_table_xy.full_scroll_lb_progress.layout_lb_progress_group_3.header_top > .blue_title.block_h3.radius_r {
  grid-row: 1 / span 3;
}



.full_scroll_table_xy.full_scroll_lb_progress.layout_epa_progress_group_1 {
  grid-template-columns: 100px 200px 180px 130px 180px repeat(6, 105px);
}

.full_scroll_table_xy.full_scroll_lb_progress.layout_epa_progress_group_2 {
  grid-template-columns: 100px 200px 180px 130px 180px repeat(6, 105px);
}

.full_scroll_table_xy.full_scroll_lb_progress_v2.layout_lb_progress_group_student {
  grid-template-columns: 280px 128px repeat(7, 128px);
}

.full_scroll_table_xy.full_scroll_su_progress_v2.layout_su_progress_group_student {
  grid-template-columns: 100px 280px repeat(7, 148px);
}


.full_scroll_table_xy.full_scroll_excellence_progress_v2.layout_excellence_progress_group_student {
  grid-template-columns: 100px 280px repeat(7, 148px);
}

.full_scroll_table_xy.full_scroll_lb_progress_v2.layout_EPA_progress_group_student {
  grid-template-columns: 280px 128px repeat(7, 128px);
}

.full_scroll_table_xy.table_plo_mile_dynamic_plo {
  grid-template-columns: 100px 220px repeat(5, 84px);
}

.full_scroll_table_xy.table_plo_mile_dynamic_sub_plo {
  grid-template-columns: 100px 220px repeat(5, 84px);
}

.full_scroll_table_xy.table_plo_mile_dynamic_milestone_plo {
  grid-template-columns: 100px 220px repeat(5, 84px);
}

.clo_graph {
  height: 234px;
  width: 241px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.full_scroll_table_xy.full_scroll_clo_group_1 {
  grid-template-columns: 300px repeat(0, 108px);
}

.plo_graph_tsl {
  height: 234px;
  width: 241px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.radar-chart {
  display: flex;
  justify-content: center;
  align-items: center;
}

.SU_set_widget_block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.SU_color_block {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 6px;
  box-sizing: border-box;
}

.SU_color_block.green_block {
  background: rgba(213, 242, 145, 0.5);
}
.SU_color_block.red_block {
  background: rgba(255, 191, 193, 0.5);
}

.grade_bash {
  display: flex;
  padding: 8px 6px;
  justify-content: center;
  align-items: center;
  width: 100%;
  line-height: 24px;
  box-sizing: border-box;
  gap: 10px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  font-size: 34px;
  font-weight: bold;
  text-transform: uppercase;
}

.grade_bash_new {
  display: flex;
  padding: 8px 6px;
  justify-content: center;
  align-items: center;
  width: 123px;
  height: 77px;
  line-height: 28px;
  box-sizing: border-box;
  gap: 10px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  font-size: 22px;
  font-weight: bold;
}

.grade_bash.green_bash {
  background: linear-gradient(180deg, #d5f291 0%, #cef279 100%);
  color: #628c00;
}
.grade_bash.red_bash {
  background: linear-gradient(180deg, #ffbfc1 0%, #ffa6a9 100%);
  color: #8c1c20;
}
.grade_bash.yellow_bash {
  background: linear-gradient(180deg, #ffe299 0%, #ffdb80 100%);
  color: #a67700;
}
.grade_bash.gray_bash {
  background: linear-gradient(180deg, #dfe3e6 0%, #c2c9cc 100%);
  color: #5d6366;
}

  .grade_bash.light_green_bash {
    background: linear-gradient(180deg, #F2F291 0%, #F2F279 100%);
    color: #8C8C00;
  }



  .grade_bash_new.green_bash {
    background: linear-gradient(180deg, #d5f291 0%, #cef279 100%);
    color: #628c00;
  }
  .grade_bash_new.red_bash {
    background: linear-gradient(180deg, #ffbfc1 0%, #ffa6a9 100%);
    color: #8c1c20;
  }
  .grade_bash_new.yellow_bash {
    background: linear-gradient(180deg, #ffe299 0%, #ffdb80 100%);
    color: #a67700;
  }
  .grade_bash_new.gray_bash {
    background: linear-gradient(180deg, #dfe3e6 0%, #c2c9cc 100%);
    color: #5d6366;
  }
  
 .grade_bash_new.light_green_bash {
      background: linear-gradient(180deg, #F2F291 0%, #F2F279 100%);
      color: #8C8C00;
 }

.plo_graph_tsl {
  display: flex;
  justify-content: center;
  align-items: center;
}

.radar-chart {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* plo loading css  */

.loading_spinner_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.loading_spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #ffffff;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.dashboard_tooltip_radar_chart {
  position: absolute;
  display: none;
  pointer-events: none;
  background: cornsilk;
  border: 1px solid black;
  border-radius: 5px;
  padding: 5px;
  z-index: 1000;
}

.test_background_in_template {
  background-image: url("/assets/book_image-79b06e20.svg");
  width: 200px;
  height: 200px;
}

.circle_glass {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  position: absolute;
  top: 60px;
  left: 28px;
  stroke-width: 5px;
  stroke: #fff;
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle_glass::after {
  content: "";
  width: 64px;
  height: 64px;
  border-radius: 50%;
  position: absolute;
  fill: rgba(160, 160, 160, 0.3);
  stroke-width: 1px;
  stroke: #999;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08) inset,
    0px -1px 2px 0px rgba(255, 255, 255, 0.4) inset;
  backdrop-filter: blur(4px);
}

.learning_tools_section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
}

.learning_tools_card {
  display: grid;
  grid-template-rows: 180px 36px;
  width: 180px;
  height: 216px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: radial-gradient(50% 100% at 50.01% 100%, #f5f7f7 0%, #fff 100%);
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
}

.learning_tools_details {
  width: 100%;
  height: 100%;
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.learning_tools_setting {
  border-radius: 0 0 8px 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #232729 0%,
    #353e42 100%
  );
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: 0.5s;
  width: calc(100% + 2px);
  height: calc(100% + 1px);
  transform: translateX(-1px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.learning_tools_setting:hover {
  background: radial-gradient(ellipse at bottom, #1784b3, #002d40);
  box-shadow: 0px 6px 12px rgba(23, 132, 179, 0.5);
  transition: 0.2s;
}

.learning_tools_card:not(:has(input:checked)) .learning_tools_setting {
  opacity: 25%;
  cursor: unset;
  pointer-events: none;
}

.input_2col_box.input_warning .input_select_section {
  border-color: #d9363c;
  filter: drop-shadow(0px 0px 4px rgba(217, 54, 60, 0.5));
  transition: 0.5s;
}

.input_2col_box.input_warning .t12.t_gray_4 {
  color: #8c1c20;
}

.input_detail_section {
  display: flex;
  padding: 4px 16px;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background: rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15) inset;
  box-sizing: border-box;
}
.input_detail_section > div:last-child {
  margin-bottom: 12px;
}

.input_select_suggest {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--Input-Field-Stroke-Normal, rgba(0, 0, 0, 0.15));
  background: #ffffff;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25) inset;
  font-size: 14px;
  transition: 0.2s;
  position: relative;
}

.input_select_suggest input {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  resize: none;
  box-sizing: border-box;
}

.input_select_suggest input::placeholder {
  font-size: 14px;
}

.select_suggest_section {
  position: relative;
  width: 100%;
}

.suggest_content {
  position: absolute;
  top: calc(100% + 4px);
  height: fit-content;
  width: 100%;
  max-height: 230px;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  z-index: 100;
  border-radius: 8px;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width: thin;
  border: 1px solid rgba(0, 0, 0, 0.15);
  display: none;
}

.suggest_list {
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  padding-top: 7px;
}
.suggest_list:hover {
  background-color: #e6fbff;
}

.suggest_content .suggest_list:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding-top: 6px;
}

.suggest_content .suggest_list:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.select_suggest_section:has(input:focus) .suggest_content {
  display: block;
}

.input_warning .input_select_section:hover {
  background-color: #fff2f2;
  box-shadow: inset 0px 0px 6px rgba(217, 54, 60, 1);
  border: 1px solid rgba(217, 54, 60, 1);
  transition: 0.1s;
}

.custom_checkbox_type1_section {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 32px;
  gap: 6px;
}

.custom_checkbox_type1_section_month {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 32px;
  gap: 6px;
}

.custom_checkbox_type1 input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}

.custom_checkbox_type1 {
  display: flex;
  padding: 7px 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: radial-gradient(50% 100% at 50.01% 100%, #f5f7f7 0%, #fff 100%);
  cursor: pointer;
  transition: 0.5s;
}

.custom_checkbox_type1:hover {
  background: #bfedff;
  transition: 0.2s;
}

.custom_checkbox_type1:has(input:checked) {
  background: radial-gradient(
    50% 100% at 50.01% 100%,
    #6cc5eb 0%,
    #69d2ff 100%
  );
}

.date_name_block {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.date_name {
  width: 100%;
  display: flex;
  height: 34px;
  align-items: center;
  justify-content: end;
  box-sizing: border-box;
  padding: 8px;
  border-bottom: 1px solid #c2c9cc;
}

.classroom_calendar_section {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(7, calc(100% / 7));
  grid-auto-rows: minmax(88px, 1fr);
}

.date_block_cal {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border-right: 1px solid #c2c9cc;
  border-bottom: 1px solid #c2c9cc;
  padding: 4px;
  display: grid;
  grid-template-rows: 26px auto;
  container: eventLayout / inline-size;
}

.date_block_cal:has(.event_layout):hover{
  background: #e6fbff;
  cursor: pointer;
}

.classroom_calendar_section .date_block_cal:nth-child(7n) {
  border-right: 0px;
}

.date_block_cal.today{
  background: #BFEDFF;
}

.date_block_cal.today .number_of_hiding{
  background: linear-gradient(90deg, rgba(191, 237, 255, 0.00) 0%, #BFEDFF 100%);
}

.calendar_layout {
  height: calc(100% - 52px - 8px - 34px);
}

.event_layout {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.event_layout .event_block:nth-child(n + 2) {
  display: none;
}

.show_2_block .event_layout .event_block:nth-child(-n + 2) {
  display: flex;
}
.show_3_block .event_layout .event_block:nth-child(-n + 3) {
  display: flex;
}
.show_4_block .event_layout .event_block:nth-child(-n + 4) {
  display: flex;
}
.show_5_block .event_layout .event_block:nth-child(-n + 5) {
  display: flex;
}
.show_6_block .event_layout .event_block:nth-child(-n + 6) {
  display: flex;
}
.show_7_block .event_layout .event_block:nth-child(-n + 7) {
  display: flex;
}
.show_8_block .event_layout .event_block:nth-child(-n + 8) {
  display: flex;
}

.show_2_block .event_layout .event_layout_hiding .event_block_hide:nth-child(-n + 2) {
  display: none;
}
.show_3_block .event_layout .event_layout_hiding .event_block_hide:nth-child(-n + 3) {
  display: none;
}
.show_4_block .event_layout .event_layout_hiding .event_block_hide:nth-child(-n + 4) {
  display: none;
}
.show_5_block .event_layout .event_layout_hiding .event_block_hide:nth-child(-n + 5) {
  display: none;
}
.show_6_block .event_layout .event_layout_hiding .event_block_hide:nth-child(-n + 6) {
  display: none;
}
.show_7_block .event_layout .event_layout_hiding .event_block_hide:nth-child(-n + 7) {
  display: none;
}
.show_8_block .event_layout .event_layout_hiding .event_block_hide:nth-child(-n + 8) {
  display: none;
}

.event_block {
  display: flex;
  padding: 2px 4px;
  flex-direction: column;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

.event_block.green_event, .event_block_hide.green_event{
  background: radial-gradient(50% 100% at 50.01% 100%, #97CC1C 0%, #A7E515 100%);
}
.event_block.yellow_event, .event_block_hide.yellow_event{
  background: radial-gradient(50% 100% at 50.01% 100%, #F4BD31 0%, #FFC226 100%);
}
.event_block.gray_event, .event_block_hide.gray_event{
  background: radial-gradient(50% 100% at 50.01% 100%, #8E9699 0%, #A9AFB2 100%);
}

.popup_box_size256 .event_block{
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.10);
  line-height: normal;
}

.event_layout_hiding {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}

.event_layout_hiding.only_1_visible{ 
  grid-template-columns: auto;
}

.event_layout_hiding:has(:nth-child(4)) .event_block_hide:nth-child(n+3){
  width: calc(25% - 2px);
  position: absolute;
  left: calc(50% + 1px);
  z-index: 100;
  border-radius: 4px;
}
.event_layout_hiding:has(:nth-child(4)) .event_block_hide:nth-child(n+4) {
  transform: translateX(33%);
  z-index: 99;
}
.event_layout_hiding:has(:nth-child(4)) .event_block_hide:nth-child(n+5) {
  transform: translateX(66%);
  z-index: 98;
}
.event_layout_hiding:has(:nth-child(4)) .event_block_hide:nth-child(n+6) {
  transform: translateX(100%);
  z-index: 97;
}

.event_layout_hiding:has(:nth-child(4)) .event_block_hide.green_event:nth-child(n+3){
  background: radial-gradient(50% 100% at 50.01% 100%, rgba(151, 204, 28, 0.50) 0%, rgba(167, 229, 21, 0.50) 100%), #FFF;
}
.event_layout_hiding:has(:nth-child(4)) .event_block_hide.green_event:nth-child(n+4) {
  background: radial-gradient(50% 100% at 50.01% 100%, rgba(151, 204, 28, 0.25) 0%, rgba(167, 229, 21, 0.25) 100%), #FFF;
}
.event_layout_hiding:has(:nth-child(4)) .event_block_hide.yellow_event:nth-child(n+3){
  background: radial-gradient(50% 100% at 50.01% 100%, rgba(244, 189, 49, 0.50) 0%, rgba(255, 194, 38, 0.50) 100%), #FFF;
}
.event_layout_hiding:has(:nth-child(4)) .event_block_hide.yellow_event:nth-child(n+4) {
  background: radial-gradient(50% 100% at 50.01% 100%, rgba(244, 189, 49, 0.25) 0%, rgba(255, 194, 38, 0.25) 100%), #FFF;
}
.event_layout_hiding:has(:nth-child(4)) .event_block_hide.gray_event:nth-child(n+3){
  background: radial-gradient(50% 100% at 50.01% 100%, rgba(142, 150, 153, 0.50) 0%, rgba(169, 175, 178, 0.50) 100%), #FFF;
}
.event_layout_hiding:has(:nth-child(4)) .event_block_hide.gray_event:nth-child(n+4) {
  background: radial-gradient(50% 100% at 50.01% 100%, rgba(142, 150, 153, 0.25) 0%, rgba(169, 175, 178, 0.25) 100%), #FFF;
}

.event_block_hide{
  display: flex;
  padding: 2px 4px;
  flex-direction: column;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  height: 12px;
}

.number_of_hiding {
  display: flex;
  width: 50%;
  height: 12px;
  padding: 0 2px;
  justify-content: flex-end;
  align-items: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
  position: absolute;
  right: 0px;
  box-sizing: border-box;
  z-index: 101;
}

.popup_box_size256 .content_box_flow{
  max-height: 442px;
  margin-bottom: 8px;
}

.checkin_3col{
  width: 100%;
  height: fit-content;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.checkin_preview{
  width: 108px;
  height: 217px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-origin: content-box;
  
}

.add_list_data{
  border-radius: 8px;
  border: 2px dashed rgba(0, 0, 0, 0.30);
  background: #FFF;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 4px 14px;
  gap: 8px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.2s;
}

.add_list_data:hover {
  background: #e6fbff;
  transition: 0.2s;
}

.box_scroll_load {
    width: 100%;
    overflow-y: auto;
    overflow-x: auto;
    scrollbar-width: thin;
    border-radius: 8px 8px 0 0;
    box-sizing: border-box;
}
.box_scroll_load.h1 {
  height: calc(100% - 52px - 8px - 32px - 8px);
}

.outside_btn_special{
  position: absolute;
  top: calc(50% - (24px / 2));
  right: 6px
}

.focus_list{
  cursor: pointer;
}


/* TSL styles */



/* Student checkbox list item - unique class for student selection */
.student_checkbox_item {
  position: relative;
  display: grid;
  padding-left: 6px;
  grid-template-columns: 24px 32px auto;
  gap: 4px;
  align-items: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

.student_checkbox_item .flex_text_column {
  padding: 6px 0px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.student_checkbox_item .t14 {
  z-index: 1;
  line-height: 18px;
}

.student_checkbox_item input[type="checkbox"] {
  position: relative;
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
  opacity: 1;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #ffffff;
  transition: background-color 0.2s, border-color 0.2s;
}

.student_checkbox_item input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.85809 10C4.18509 10 4.4427 9.86445 4.62008 9.58828L9.81706 1.334C9.94702 1.1288 10 0.94718 10 0.774371C10 0.321246 9.67834 0 9.22997 0C8.9161 0 8.72866 0.110365 8.53713 0.417632L3.83588 8.06783L1.42706 4.93478C1.24766 4.699 1.05414 4.59744 0.783662 4.59744C0.325975 4.59744 0 4.93035 0 5.38529C0 5.58348 0.0661105 5.77157 0.229853 5.97185L3.1024 9.61134C3.31309 9.87537 3.54698 10 3.85809 10Z' fill='white'/%3E%3C/svg%3E"), radial-gradient(50% 100% at 50.01% 100%, #6CC5EB 0%, #69D2FF 100%);
  background-size: 10px 10px, 100% 100%;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  border-color: #6CC5EB;
}





/* Container for student group list with background */
.student_group_container {
  background-color: #f0f0f0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: 8px;
  margin-bottom: 4px;
  box-sizing: border-box;
}

.student_group_container section {
  margin-bottom: 2px;
}

.student_group_container section:last-child {
  margin-bottom: 0;
}

.student_group_container section:last-child .student_checkbox_item .flex_text_column {
  border-bottom: none;
}



/* Group select box item - unique class for group selection with checkbox */
.group_select_box_item {
  position: relative;
  display: grid;
  padding-left: 12px;
  grid-template-columns: auto;
  gap: 8px;
  align-items: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

.group_select_box_item.has_checkbox {
  grid-template-columns: 24px auto;
}

.group_select_box_item input[type="radio"] {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.group_select_box_item .group_checkbox {
  grid-column: 1;
  grid-row: 1;
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
  opacity: 1;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.15) inset;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #ffffff;
  transition: background-color 0.2s, border-color 0.2s;
  position: relative;
  align-self: center;
}


.group_select_box_item .group_checkbox:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.85809 10C4.18509 10 4.4427 9.86445 4.62008 9.58828L9.81706 1.334C9.94702 1.1288 10 0.94718 10 0.774371C10 0.321246 9.67834 0 9.22997 0C8.9161 0 8.72866 0.110365 8.53713 0.417632L3.83588 8.06783L1.42706 4.93478C1.24766 4.699 1.05414 4.59744 0.783662 4.59744C0.325975 4.59744 0 4.93035 0 5.38529C0 5.58348 0.0661105 5.77157 0.229853 5.97185L3.1024 9.61134C3.31309 9.87537 3.54698 10 3.85809 10Z' fill='white'/%3E%3C/svg%3E"), radial-gradient(50% 100% at 50.01% 100%, #6CC5EB 0%, #69D2FF 100%);
  background-size: 10px 10px, 100% 100%;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  border-color: #6CC5EB;
}

.group_select_box_item .group_checkbox:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='2' viewBox='0 0 10 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='10' height='2' rx='1' fill='white'/%3E%3C/svg%3E"), radial-gradient(50% 100% at 50.01% 100%, #6CC5EB 0%, #69D2FF 100%);
  background-size: 10px 2px, 100% 100%;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  border-color: #6CC5EB;
}

.group_select_box_item .group_select_text_column {
  grid-column: 1;
  grid-row: 1;
  padding: 6px 0px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.group_select_box_item.has_checkbox .group_select_text_column {
  grid-column: 2;
}

.group_select_box_item .t14 {
  z-index: 1;
  line-height: 18px;
}

.group_select_box_item:hover {
  background-color: #e6fbff;
}

.group_select_box_item:has(input[type="radio"]:checked) {
  background: #6cc5eb;
}

/* Student Group Select Styles - New classes to avoid affecting existing layouts */
.student_group_select_box {
  position: relative;
  display: grid;

  grid-template-columns: 32px auto;
  gap: 6px;
  align-items: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
padding:6px
}

.student_group_select_box.full {
  grid-template-columns: auto;
  /* padding-bottom: 6px; */
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.student_group_select_box .flex_text_column {
  padding: 6px 0px 0px 0px;
}

.student_group_select_box .t14 {
  z-index: 1;
  line-height: 18px;
}

.student_group_select_box input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}

.student_group_select_box:hover {
  background-color: #e6fbff;
}

.student_group_select_box:has(input:checked) {
  background: #6cc5eb;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
}

.student_group_select_radio {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Selected group stays above blur overlay */
.student_group_select_radio.student_group_head {
  position: relative;
  z-index: 1000;
}

/* Blur overlay for state 2 selection mode */
.dashboard_head_layout__blur-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.3);
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 12px;
}

.dashboard_head_layout__blur-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.student_group_select_radio .student_group_select_box.full {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  grid-template-columns: unset;
  width: 100%;
  flex-wrap: wrap;
  overflow: visible;
  min-height: 0;
}

.student_group_select_radio .student_group_select_box.full > div:first-child {
  flex: 1;
}

.student_group_select_radio .student_group_select_box.full .icon_with_table {
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  width: 36px;
  height: 32px;
}

.student_group_secondary_row {
  width: 100%;
  flex-basis: 100%;
  /* margin-top: 6px; */
  overflow: visible;
  min-height: 0;
  position: relative;
  z-index: inherit;
  /* background-color: red !important; */
 
}

.student_group_secondary_row.deep_view{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Select Student Button and Related Styles */
.select-student-btn {
  width: 100%;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: #31393d;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.select-student-btn:hover,
.select-student-btn:focus {
  opacity: 0.85;
}

.select-student-btn__icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("../images/to-do.svg");
}

.select-student-btn__label {
  white-space: nowrap;
}

.select-student-state-one {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* margin-top: -2px; */
}

.select-student-divider {
  width: 100%;
  height: 2px;
  background-color: rgba(0,0,0,0.15);
}

.select-student-list-wrapper {
  width: 100%;
  border-radius: 8px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.select-student-state-two__bg .select-student-list-wrapper {
  max-height: 400px;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  border: none;
  background-color: transparent;
}

.select-student-list-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px 0px 12px;
}

.select-student-list-item .profile_show {
  flex-shrink: 0;
}

.select-student-list-item__info {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  padding-bottom: 8px;
}

.select-student-list-item:last-child {
  padding-bottom: 8px;
}

.select-student-list-item:last-child .select-student-list-item__info {
  border-bottom: none;
  padding-bottom: 0;
}

.select-student-list-item__name {
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: -0.02em;
  color: #000000;
}

.select-student-list-item__id {
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: -0.02em;
  color: #5D6366;
}

.select-student-list-item--disabled {
  position: relative;
  opacity: 0.4;
  filter: grayscale(30%);
}

.select-student-list-item--disabled::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 0;
  pointer-events: none;
  z-index: 1;
}

.select-student-empty {
  padding: 16px;
  font-size: 12px;
  color: #6b7280;
  text-align: center;
}


.student_group_title_info{
  padding-left: 5px;
  padding-right: 5px;
}

/* Select Student State Two Styles */
.select-student-state-two {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  /* padding: 6px 0px 0px 0px; */
  gap: 6px;
  /* width: 90%; */
  min-height: 114px;
  flex: none;
  align-self: stretch;
  flex-grow: 0;
  box-sizing: border-box;
  position: relative;
  overflow: visible;
}

.select-student-state-two__bg {
  width: 265px;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  position: relative;
  box-sizing: border-box;
  z-index: 1;
  /* max-height: 400px; */
}

.select-student-state-two__button-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  gap: 4px;
  width: 265px;
  height: 32px;
  flex: none;
  align-self: stretch;
  flex-grow: 0;
}

.select-student-state-two__btn-cancel {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 6px 8px;
  gap: 6px;
  width: 118px;
  height: 32px;
  background: radial-gradient(50% 100% at 50.01% 100%, #D9363C 0%, #F23038 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  flex: none;
  order: 0;
  flex-grow: 1;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.select-student-state-two__btn-cancel:hover {
  opacity: 0.9;
}

.select-student-state-two__btn-apply {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 6px 8px;
  gap: 6px;
  width: 118px;
  height: 32px;
  background: radial-gradient(50% 100% at 50.01% 100%, #232729 0%, #353E42 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  flex: none;
  order: 1;
  flex-grow: 1;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.select-student-state-two__btn-apply:hover {
  opacity: 0.9;
}

.select-student-state-two__icon {
  width: 20px;
  height: 20px;
  flex: none;
  order: 0;
  flex-grow: 0;
  position: relative;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  filter: brightness(0) invert(1);
}

.select-student-state-two__icon.icon_delete {
  background-image: url("../images/delete_tag_2024.svg");
}

.select-student-state-two__icon.icon_done {
  background-image: url("../images/done_filled.svg");
}

.select-student-state-two__btn-label {
  font-family: 'noto_sans_thai', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  flex: none;
  order: 1;
  flex-grow: 0;
  white-space: nowrap;
}

.select-student-state-two__instruction {
  width: 265px;
  height: 70px;
  font-family: 'noto_sans_thai', sans-serif;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  letter-spacing: -0.02em;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.select-student-state-two__instruction-info {
  color: #000000;
  font-weight: 400;
}

.select-student-state-two__instruction-warning {
  color: #8C1C20;
  font-weight: 400;
  padding-left: 10px;
  padding-right: 10px;
}

.select-student-state-two__instruction-link {
  text-decoration: underline;
  font-weight: 900;
}

.select-student-state-two__search-input {
  background-color: rgba(35, 39, 41, 0.1);
  width: 100% !important;
  height: 32px !important;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1) inset;
  padding: 0 12px;
  box-sizing: border-box;
  display: block;
  color: #111827 !important;
  position: relative !important;
  z-index: 2;
  opacity: 1 !important;
}

.select-student-state-two__search-input::placeholder {
  color: rgba(17, 24, 39, 0.6);
}

.select-student-state-two__bg .search_input_box {
  position: relative;
}

.select-student-state-two__bg .search_input_box .search_icon {
  width: 16px;
  height: 16px;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  box-sizing: border-box;
  z-index: 1;
}

.select-student-state-two__bg .search_input_box .clear_search {
  width: 24px;
  height: 24px;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  z-index: 2;
  cursor: pointer;
}

.select-student-state-two__bg .search_input_box input {
  padding-left: 34px !important;
  padding-right: 32px !important;
}

.select-student-state-two__select-all-container {
  padding: 8px 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  background-color: #ffffff;
}

.select-student-state-two__select-all-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.select-student-state-two__select-all-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #ffffff;
  flex-shrink: 0;
  opacity: 1;
  transition: background-color 0.2s, border-color 0.2s;
  box-sizing: border-box;
}

.select-student-state-two__select-all-label input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.85809 10C4.18509 10 4.4427 9.86445 4.62008 9.58828L9.81706 1.334C9.94702 1.1288 10 0.94718 10 0.774371C10 0.321246 9.67834 0 9.22997 0C8.9161 0 8.72866 0.110365 8.53713 0.417632L3.83588 8.06783L1.42706 4.93478C1.24766 4.699 1.05414 4.59744 0.783662 4.59744C0.325975 4.59744 0 4.93035 0 5.38529C0 5.58348 0.0661105 5.77157 0.229853 5.97185L3.1024 9.61134C3.31309 9.87537 3.54698 10 3.85809 10Z' fill='white'/%3E%3C/svg%3E"), radial-gradient(50% 100% at 50.01% 100%, #6CC5EB 0%, #69D2FF 100%);
  background-size: 10px 10px, 100% 100%;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  border-color: #6CC5EB;
}

.select-student-state-two__select-all-label input[type="checkbox"]:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='2' viewBox='0 0 10 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='10' height='2' rx='1' fill='white'/%3E%3C/svg%3E"), radial-gradient(50% 100% at 50.01% 100%, #6CC5EB 0%, #69D2FF 100%);
  background-size: 10px 2px, 100% 100%;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  border-color: #6CC5EB;
}

.select-student-state-two__select-all-text {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  line-height: 20px;
}

.select-student-state-two__student-list {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 0px;
  /* border-radius: 8px; */
  background-color: #ffffff;
  /* border: 1px solid #e5e7eb; */
}



.select-student-state-two__student-item:last-child {
  border-bottom: none;
}

.select-student-state-two__student-item .student_checkbox_item {
  margin: 0;
  gap: 12px;
}

.select-student-state-two__student-list .select-student-empty {
  padding: 16px;
  font-size: 12px;
  color: #6b7280;
  text-align: center;
}

/* Toast Notification Popup */
.select-student-toast-bg {
  width: 100vw;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 9999;
}

.select-student-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  gap: 12px;
  width: 360px;
  min-height: 116px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(25px);
  border-radius: 24px;
  box-sizing: border-box;
  z-index: 10000;
}

.select-student-toast__content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  flex: 1;
}

.select-student-toast__header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 12px;
  width: 100%;
  flex: none;
  align-self: stretch;
  flex-grow: 0;
}

.select-student-toast__icon-container {
  width: 44px;
  height: 44px;
  background: #D5F291;
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 22px;
  flex: none;
  flex-grow: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.select-student-toast__icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.102));
}

.select-student-toast__checkmark {
  width: 24px;
  height: 24px;
}

.select-student-toast__text-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 2px;
  flex: 1;
  flex-grow: 1;
  min-width: 0;
}

.select-student-toast__title {
  width: 100%;
  height: 20px;
  font-family: 'noto_sans_thai', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.02em;
  color: #000000;
  flex: none;
  align-self: stretch;
  flex-grow: 0;
}

.select-student-toast__description {
  width: 100%;
  height: 18px;
  font-family: 'noto_sans_thai', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  color: #000000;
  flex: none;
  align-self: stretch;
  flex-grow: 0;
}

.select-student-toast__button-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  gap: 6px;
  width: 100%;
  height: 36px;
  background: radial-gradient(50% 100% at 50.01% 100%, #F5F7F7 0%, #FFFFFF 100%);
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  flex: none;
  align-self: stretch;
  flex-grow: 0;
  cursor: pointer;
}

.select-student-toast__button {
  margin: 0 auto;
  width: auto;
  min-width: 45px;
  height: 20px;
  font-family: 'noto_sans_thai', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.02em;
  color: #000000;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex: none;
  flex-grow: 0;
}

.select-student-toast__button:hover {
  opacity: 0.8;
}

.select-student-toast__button:active {
  opacity: 0.6;
}




/* new filter popup styles */

.cu_plo_filter_popup_header {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e0e0e0;
}

.cu_plo_filter_popup_main_content {
    width: 100%;
    margin-top: 12px;
    margin-bottom: 12px;
}

.cu_plo_filter_section_container {
    width: 100%;
    height: 108px;
}

.cu_plo_filter_section_header {
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: linear-gradient(180deg, #DFE3E6 0%, #D2D6D9 100%);
    height: 32px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px 0 12px;
    box-sizing: border-box;
}

.cu_plo_filter_section_header_text {
    font-family: 'Noto Sans Thai', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: rgba(35, 39, 41, 1);
}

.cu_plo_filter_section_content {
    background-color: rgba(255, 255, 255, 1);
    height: 64px;
    width: 100%;
}

.cu_plo_filter_option_row {
    height: 32px;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    padding: 0 12px;
    box-sizing: border-box;
}

.cu_plo_filter_option_label {
    display: flex;
    align-items: center;
}

.cu_plo_filter_option_text {
    font-family: 'Noto Sans Thai', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: rgba(35, 39, 41, 1);
}

.cu_plo_filter_popup_footer {
    height: 58px;
    width: 100%;
    border-top: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cu_plo_filter_footer_button {
    width: 101px;
    height: 36px;
    background-color: #343d41;
    border-radius: 8px;
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    font-family: 'Noto Sans Thai', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
}

.cu_plo_filter_popup_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 29999;
    display: none;
    cursor: pointer;
}

.cu_plo_filter_popup {
    position: fixed;
    z-index: 30000;
    background-color: #F5F7F7;
    border-radius: 12px;
    width: 456px;
    height: 346px;
    padding: 0 12px 12px 12px;
    box-sizing: border-box;
    display: none;
}

.icon_size_24x24.clear_search_form_pool_list {
    background-image: url("/assets/clear_search-2fd88bdf.svg");
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    z-index: 9999;
}

/* SU css */

/* Indicator icons */
.indicator {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  /* background-color: red; */
  min-width:0;
}

.indicator_text {
  white-space: nowrap;
}

.indicator_icon {
  width: 14px;
  height: 14px;
  border: 1px solid #00000026;
  border-radius: 50%;
  box-sizing: border-box;
  flex-shrink: 0;
}

.indicator_Satisfactory .indicator_icon {
  background: #97CC1C;
  border: 1px solid #00000026;
}

.indicator_Waiting .indicator_icon {
  background: #F4BD31;
  border: 1px solid #00000026;
}

.indicator_Satisfactory_with_Remedial .indicator_icon {
  background: linear-gradient(180deg, #F2F291 0%, #F2F279 200%);
  border: 1px solid #00000026;
}

.indicator_Unsatisfactory .indicator_icon {
  background: #D9363C;
  border: 1px solid #00000026;
}

.indicator_Withdraw .indicator_icon {
  background: #8E9699;
  border: 1px solid #00000026;
}


/* Admin / Status Badge */

/* Auto layout */
.su_tag_status {
  display: flex;
  height: 18px;
  background-color: #808080;
  box-sizing: border-box;
  padding: 0px 6px;
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  text-wrap: nowrap;
  min-width: 104px;
  min-height: 20px;
}

.su_tag_status.su_green_status{
  background: linear-gradient(180deg, #d5f291 0%, #cef279 100%);
  color: #628c00 !important;
}


.su_tag_status.su_red_status{
  background: linear-gradient(180deg, #ffbfc1 0%, #ffa6a9 100%);
  color: #8c1c20 !important;
}

.su_tag_status.su_light_green_status{
  background: linear-gradient(180deg, #F2F291 0%, #F2F279 100%);
  color: #8C8C00 !important;
}

.su_tag_status.su_gray_status{
  background: linear-gradient(180deg, #dfe3e6 0%, #c2c9cc 100%);
  color: #5d6366 !important;
}


.su_tag_status.su_yellow_status{
  background: linear-gradient(180deg, #ffe299 0%, #ffdb80 100%);
  color: #a67700 !important;
}

/* Ensure t12 inside su_tag_status inherits the parent color */
.su_tag_status .t12 {
  color: inherit !important;
}

/* Grade count boxes */
.su_grade_count_box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width:55.2px;
  height: 20px;
  padding: 0px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  box-sizing: border-box;
}

/* Ensure t12 inside count boxes inherits the parent color */
.su_grade_count_box .t12 {
  color: inherit !important;
}

.su_grade_count_box.su_count_waiting {
  background: linear-gradient(180deg, #ffe299 0%, #ffdb80 100%);
  color: #a67700;
}

.su_grade_count_box.su_count_s {
  background: linear-gradient(180deg, #d5f291 0%, #cef279 100%);
  color: #628c00;
}

.su_grade_count_box.su_count_s_with_r {
  background: linear-gradient(180deg, #F2F291 0%, #F2F279 100%);
  color: #8C8C00;
}

.su_grade_count_box.su_count_u {
  background: linear-gradient(180deg, #ffbfc1 0%, #ffa6a9 100%);
  color: #8c1c20;
}

.su_grade_count_box.su_count_w {
  background: linear-gradient(180deg, #dfe3e6 0%, #c2c9cc 100%);
  color: #5d6366;
}


.indicator_grid {
  display: flex;
  flex-wrap: wrap;
  gap:4px 8px; /* row gap | column gap */
}

/* Keep three items per row while sizing to content */
.indicator_grid .indicator {
  min-width: 0;
}


.su_summary_row_header {
  grid-column: 1 / 3;
  background: linear-gradient(180deg, #F5F7F7 0%, #DFE3E6 100%);
  border: 1px solid var(--Button-Stroke-On-Light, #00000026);
}


.su_summary_row_header {
  grid-column: 1 / 3;
  background: linear-gradient(180deg, #F5F7F7 0%, #DFE3E6 100%);
  border: 1px solid var(--Button-Stroke-On-Light, #00000026);
}

.su_summary_row_first {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.su_summary_row_last {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}


.su_individual_student_popup_header{
  padding-left: 12px;
  display: flex;
  align-items: center;
}

/* Indicator Progress Bar - Colors */
.progress_layer.indicator_progress_waiting {
  background: #F4BD31;
}

.progress_layer.indicator_progress_satisfactory {
  background: #97CC1C;
}

.progress_layer.indicator_progress_satisfactory_with_remedial {
  background: linear-gradient(180deg, #F2F291 0%, #F2F279 200%);
}

.progress_layer.indicator_progress_unsatisfactory {
  background: #D9363C;
}

.progress_layer.indicator_progress_withdraw {
  background: #8E9699;
}



/* .layout_su_progress_group_student .stick_l_1,
.layout_su_progress_group_student .stick_l_0,
.stick_l_0 {
  z-index: 99;
} */

/* SU Group Student List - Z-index fixes for vertical and horizontal scrolling */
/* Ensure header container is sticky to top and creates proper stacking context */
#su_group_header_container {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: transparent;
  isolation: isolate;
}

/* Header row: sticky to top with z-index 99 (works for vertical scrolling) */
/* Header cells that are also sticky columns need both top and left sticky - highest z-index in header */
#su_group_header_container .full_scroll_table_xy.full_scroll_su_progress_v2.layout_su_progress_group_student .blue_title.stick_l_0 {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 99;
}


#excellence_group_header_container .full_scroll_table_xy.full_scroll_excellence_progress_v2.layout_excellence_progress_group_student .blue_title.stick_l_0 {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 99;
}

#su_group_header_container .full_scroll_table_xy.full_scroll_su_progress_v2.layout_su_progress_group_student .blue_title.stick_l_1 {
  position: sticky;
  top: 0;
  left: 100px;
  z-index: 99;
}


#excellence_group_header_container .full_scroll_table_xy.full_scroll_excellence_progress_v2.layout_excellence_progress_group_student .blue_title.stick_l_1 {
  position: sticky;
  top: 0;
  left: 100px;
  z-index: 99;
}

/* Regular header cells (not sticky columns) - only sticky to top, lower z-index so they go below sticky column headers when scrolling horizontally */
#su_group_header_container .full_scroll_table_xy.full_scroll_su_progress_v2.layout_su_progress_group_student .blue_title:not(.stick_l_0):not(.stick_l_1) {
  position: sticky;
  top: 0;
  z-index: 98;
}


#excellence_group_header_container .full_scroll_table_xy.full_scroll_excellence_progress_v2.layout_excellence_progress_group_student .blue_title:not(.stick_l_0):not(.stick_l_1) {
  position: sticky;
  top: 0;
  z-index: 98;
}

/* Data rows container - create separate stacking context */
#su_group_student_rows_container {
  isolation: isolate;
  position: relative;
  z-index: 1;
}

/* Data row sticky columns: need to be above regular columns for horizontal scroll, but below headers for vertical */
/* Override the general z-index: 100 rule for this specific layout */
#su_group_student_rows_container .full_scroll_table_xy.full_scroll_su_progress_v2.layout_su_progress_group_student .normal_title.stick_l_0,
#su_group_student_rows_container .full_scroll_table_xy.full_scroll_su_progress_v2.layout_su_progress_group_student .normal_title.stick_l_1 {
  z-index: 98 !important;
}



#excellence_group_student_rows_container .full_scroll_table_xy.full_scroll_excellence_progress_v2.layout_excellence_progress_group_student .normal_title.stick_l_0,
#excellence_group_student_rows_container .full_scroll_table_xy.full_scroll_excellence_progress_v2.layout_excellence_progress_group_student .normal_title.stick_l_1 {
  z-index: 98 !important;
}

/* Regular data row columns: lowest z-index so they go below sticky columns when scrolling horizontally */
#su_group_student_rows_container .full_scroll_table_xy.full_scroll_su_progress_v2.layout_su_progress_group_student .normal_title:not(.stick_l_0):not(.stick_l_1) {
  z-index: 97 !important;
}

#excellence_group_student_rows_container .full_scroll_table_xy.full_scroll_excellence_progress_v2.layout_excellence_progress_group_student .normal_title:not(.stick_l_0):not(.stick_l_1) {
  z-index: 97 !important;
}

/* Excellence summary rows - label spans two columns (like SU) */
.excellence_summary_row_header {
  grid-column: 1 / 3;
  background: linear-gradient(180deg, #F5F7F7 0%, #DFE3E6 100%);
  border: 1px solid var(--Button-Stroke-On-Light, #00000026);
}

.excellence_summary_row_first {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.excellence_summary_row_last {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Excellence styles */

.excellence_overview_rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* margin-top: 8px; */
}

.excellence_overview_row {
  gap: 8px;
}

.excellence_overview_box {
  width: 87.33px;
  height: 93px;
  background-color: #f5f7f7;
  flex-shrink: 0;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.excellence_overview_box_value {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 34px;
  line-height: 42px;
  letter-spacing: -0.02em;
  text-align: center;
  color: #000000;
}

.excellence_overview_box_label {
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  text-align: center;
  color: #000000;
}

.col_flex_section {
  display: flex;
  height: calc(100% - 12px - 12px);
  padding: 12px;
  gap: 12px;
}

.row_flex_section {
  display: flex;
  height: calc(100% - 12px - 12px);
  padding: 12px;
  gap: 12px;
  flex-direction: column;
}

.col_flex_fix {
  flex-basis: 300px;
  display: flex;
  flex-direction: column;
}

.col_flex_auto {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.col_flex_auto_1 {
  display: grid;
  grid-template-columns: 0px auto 54px;
  align-items: center;
  border-bottom: 1px solid #cccccc;
}

.row_flex_title {
  display: grid;
  grid-template-columns: 300px auto;
  align-items: center;
  border-bottom: 1px solid #cccccc;
  gap: 12px;
}

.row_flex_title .col_flex_auto_1 {
  border-bottom: none;
}

.row_flex_list {
  display: flex;
}

.col_flex_auto_2 {
  height: 100%;
  overflow-y: scroll;
}

.flex_title {
}

.flex_auto_title {
}

.flex_search {
}

.flex_list_table {
  overflow-y: auto;
  display: flex;
  gap: 12px;
  flex-direction: column;
}

/* font size */
.t7 {
  font-size: 7px;
  font-weight: normal;
  color: #000000;
}
.t10 {
  font-size: 10px;
  font-weight: normal;
  color: #000000;
}

.t10_white {
  font-size: 10px;
  font-weight: normal;
  color: #ffffff;
}

.t10_gray_1 {
  font-size: 10px;
  font-weight: normal;
  color: #666666;
}

.t12 {
  font-size: 12px;
  font-weight: normal;
  color: #000000;
}

.t14 {
  font-size: 14px;
  font-weight: normal;
  color: #000000;
}

.t14_white {
  font-size: 14px;
  font-weight: normal;
  color: #ffffff;
}

.t16 {
  font-size: 16px;
  font-weight: normal;
  color: #000000;
}

.t18 {
  font-size: 18px;
  font-weight: normal;
  color: #000000;
}

.t20 {
  font-size: 20px;
  font-weight: normal;
  color: #000000;
}

.t22 {
  font-size: 22px;
  font-weight: normal;
  color: #000000;
}

.t24 {
  font-size: 24px;
  font-weight: normal;
  color: #000000;
}

.t28 {
  font-size: 28px;
  font-weight: normal;
  color: #000000;
}

.t34 {
  font-size: 34px;
  font-weight: normal;
  color: #000000;
}

.t_normal {
  font-weight: normal;
}

.t_bold {
  font-weight: bold;
}

.t_medium {
  font-weight: 500;
}

.t_underline {
  text-decoration: underline;
}

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

.t_1line {
  white-space: nowrap;
}

.t_top_data_column {
  margin-top: 9px;
}

.t_mid {
  text-align: center;
}

.t_right {
  text-align: right;
}

.t_left {
  text-align: left;
}

.t_click:hover {
  text-decoration: underline;
  cursor: pointer;
}

/* thai text edit line-height */
.t12.t_thai {
  line-height: 18px;
}
.t14.t_thai {
  line-height: 21px;
}
.t16.t_thai {
  line-height: 24px;
}
.t24.t_thai,
.field_box_in_popup .t24.t_thai {
  line-height: 36px;
}
.t_thai.t_block_40 {
  padding-top: 12px;
  padding-bottom: 8px;
}

/* font color */

.t_gray_1 {
  color: #979797;
}

.t_gray_2 {
  color: #666666;
}

.t_gray_3 {
  color: #404040;
}

.t_black {
  color: #000000;
}

.t_blue {
  color: #6cc5eb;
}

.t_yellow {
  color: #f4bd31;
}

.t_green {
  color: #97cc1c;
}

/* text box space */

.t_space_top8 {
  margin-top: 8px;
}
.t_space_btm4 {
  margin-bottom: 4px;
}
.t_space_btm8 {
  margin-bottom: 8px;
}
.t_space_btm10 {
  margin-bottom: 10px;
}
.t_white {
  color: #ffffff;
}

.t_red {
  color: #e8555a;
}

.flex_search .input_search_box {
  border-radius: 12px;
}

.flex_search .input_search_box::placeholder {
  color: #999999;
}

.title_group_table {
  display: grid;
  height: 32px;
  grid-template-columns: auto 32px;
  background-color: #e6e6e6;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  align-items: center;
  padding-left: 12px;
}

.slide_up_icon {
  width: 32px;
  height: 32px;
  background-image: url("/assets/slide_up-f66e2f12.svg");
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
}

.slide_down_icon {
  width: 32px;
  height: 32px;
  background-image: url("/assets/slide_down-b5d72601.svg");
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
}

.profile_show {
  width: 32px;
  height: 32px;
  background-image: url("/assets/main/avatar_default-8d9ea432.png");
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: 0.2s;
}

.profile_show:hover {
  transform: scale(110%);
  transition: 0.2s;
}

.profile_show.profile_table {
  width: 24px;
  height: 24px;
}

.list_grop_2line {
  display: flex;
  min-height: 44px;
  flex-direction: column;
}

.list_grop_2line_cover {
  display: grid;
  padding-left: 12px;
  transition: 0.1s;
  cursor: pointer;
}
.list_grop_2line_selected {
  background-color: #6cc5eb;
  /* transition: 0.1s; */
}
.list_grop_2line_cover:hover,
.list_grop_2line_profile_cover:hover {
  background-color: #6cc5eb;
  transition: 0.1s;
}

.list_grop_2line_profile_cover {
  display: grid;
  grid-template-columns: 32px auto;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  transition: 0.1s;
  cursor: pointer;
}

.list_grop_2line_box {
  display: grid;
  min-height: 44px;
  grid-template-rows: auto auto;
  padding-top: 3px;
  padding-bottom: 3px;
  box-sizing: border-box;
  border-bottom: 1px solid #e6e6e6;
}

.list_grop_2line_box.loading .t14 {
  width: 119px;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(90deg, #e6e6e6, #d8d6d6, #e6e6e6);
  animation: gradient 15s linear infinite;
}
.list_grop_2line_box.loading .t10_gray_1 {
  width: 66px;
  height: 13px;
  background: linear-gradient(90deg, #e6e6e6, #d8d6d6, #e6e6e6);
  animation: gradient 15s linear infinite;
  border-radius: 4px;
}
.list_grop_2line_profile_cover.loading .profile_show {
  background-image: unset;
  background: linear-gradient(90deg, #e6e6e6, #d8d6d6, #e6e6e6);
  animation: gradient 15s linear infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.list_group_head {
  background-color: var(--color-blue);
}

.list_group_head .list_grop_2line_box {
  border-bottom: none;
}

.flex_title_tab_menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.flex_title_tab_menu_row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
  gap: 6px;
}

.flex_title_tab_menu_row .green_circle_bullet,
.flex_title_tab_menu_row .yellow_circle_bullet {
  top: 0px;
}

.flex_tab_menu_list {
  display: flex;
  flex-direction: initial;
  gap: 4px;
  padding-bottom: 8px;
  overflow-x: auto;
}
.flex_tab_menu_list.flex_tab_menu_list_with_line_divide {
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid #cccccc;
}

.tab_menu_box {
  width: fit-content;
  justify-content: center;
  align-items: center;
  display: flex;
  padding: 0px 12px;
  height: 29px;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  background-color: #ffffff;
  gap: 4px;
}

.tab_menu_box_active {
  background-color: var(--color-blue);
}

.flex_title_slide {
  display: grid;
  grid-template-columns: auto 32px;
  padding: 8px 0px 8px 8px;
  align-items: center;
  border-radius: 6px;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  min-height: 90px;
  margin-bottom: 6px;
}

.flex_title_slide.flex_title_slide_mini {
  padding: 1px 0px 1px 8px;
  min-height: 59px;
  margin-bottom: 4px;
}

.icon_with_txt {
  width: 14px;
  height: 14px;
  background-image: url("/assets/add_black-2fc83482.svg");
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
}

.more_button {
  width: 52px;
  height: 36px;
  font-size: 16px;
  font-weight: bold;
  background-color: #000000;
  color: #ffffff;
  text-align: center;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
}

.icon_with_btn {
  width: 20px;
  height: 20px;
  background-image: url("/assets/import_icon-d273bea2.svg");
  background-origin: border-box;
  background-repeat: no-repeat;
}

.icon_with_data_column {
  width: 36px;
  height: 36px;
  background-image: url("/assets/information_icon-45f391cf.svg");
  background-origin: border-box;
  background-repeat: no-repeat;
}

.icon_with_table {
  width: 32px;
  height: 32px;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.icon_with_badge {
  width: 10px;
  height: 10px;
  background-origin: border-box;
  background-repeat: no-repeat;
}

.icon_with_btn.bin_icon {
  background-image: url("/assets/bin-708ef536.svg");
}
.icon_with_btn.bin_icon2 {
  background-image: url("/assets/bin_white-82dedcc8.svg");
}

.icon_with_btn.keyboard_icon {
  background-image: url("/assets/keyborad-fbe24511.svg");
}

.icon_with_btn.add_section_icon {
  background-image: url("/assets/add_section-b5921782.svg");
}

.icon_with_btn.add_title_icon {
  background-image: url("/assets/add_title-7b65217c.svg");
}

.icon_with_btn.eye_icon {
  background-image: url("/assets/eyes_icon-404fe9ad.svg");
  width: 20px;
  height: 20px;
}
.icon_with_btn.eye_icon_white {
  background-image: url("/assets/eye_icon_white-9704326c.svg");
}

.icon_with_btn.sent_icon {
  /* background-image: url("/assets/sent_icon-36625225.svg"); */
  background-image: url("/assets/sent-36625225.svg");
}

.icon_with_btn.sent_icon_2 {
  background-image: url("/assets/sent_icon-36625225.svg");
  /* background-image: url("/assets/sent-36625225.svg"); */
}

.icon_with_btn.compare_icon {
  background-image: url("/assets/compare_icon-d72e74c6.svg");
}

.icon_with_btn.backward_icon {
  background-image: url("/assets/backward-fd2dac8f.svg");
}

.icon_with_btn.reset_fil_icon {
  background-image: url("/assets/reset_filter_icon-8f8154d2.svg");
}

.icon_with_btn.copy_icon {
  background-image: url("/assets/copy_white-d4c6b8ce.svg");
  background-size: unset;
}

.icon_with_btn.comment_icon {
  background-image: url("/assets/comment_icon-7137ce38.svg");
}

.icon_with_btn.save_disk_icon {
  background-image: url("/assets/save2_icon-6d30c586.svg");
}
.icon_with_btn.save_screen_icon {
  background-image: url("/assets/save_sereen_icon-7e1b3c7d.svg");
}

.icon_with_btn.import_icon {
  background-image: url("/assets/import-c991a982.svg");
}

.icon_with_btn.export_icon {
  background-image: url("/assets/export-053a945a.svg");
}

.icon_with_btn.stop_icon {
  background-image: url("/assets/stop_icon-52c98ee2.svg");
}

.icon_with_btn.gear_icon {
  background-image: url("/assets/setting-951cb5bb.svg");
}

.icon_with_btn.view_permission_icon {
  background-image: url("/assets/view_permission_icon-5d9529d6.svg");
}
.icon_with_btn.click_activity {
  background-image: url("/assets/click_activity-4f2440c2.svg");
}

.icon_with_btn.logbook_icon {
  background-image: url("/assets/logbook_btn-269fab2f.svg");
}

.icon_with_btn.epa_icon {
  background-image: url("/assets/epa_btn-10e06850.svg");
}

.icon_with_btn.form_icon {
  background-image: url("/assets/form_btn-4002c2c7.svg");
}

.icon_with_btn.rotate_icon {
  background-image: url("/assets/rotate_icon-839c8baf.svg");
}
.icon_with_btn.file_icon {
  background-image: url("/assets/file_icon_white-76c55aa9.svg");
}

.icon_with_btn.edit_icon {
  background-image: url("/assets/edit_white-a1b284bc.svg");
}

.icon_with_btn.check_circle_icon {
  background-image: url("/assets/check_circle-7f3671b9.svg");
}
.icon_with_btn.obsolete_icon {
  background-image: url("/assets/obsolete_icon-49a5e38c.svg");
}

.icon_with_btn.add_icon_white {
  background-image: url("/assets/add_icon-2639c62b.svg");
}

.icon_with_btn.circle_check_white {
  background-image: url("/assets/circle_check_white-2d7f181c.svg");
}

.icon_with_btn.done_icon {
  background-image: url("/assets/done_icon-904d52e7.svg");
}

.icon_with_btn.reject_white_icon {
  background-image: url("/assets/reject_white-666727e1.svg");
}

.icon_with_table.slide_up {
  background-image: url("/assets/slide_up-f66e2f12.svg");
}
.icon_with_table.slide_down {
  background-image: url("/assets/slide_down-b5d72601.svg");
}

.icon_with_table.inform_icon {
  background-image: url("/assets/if_white-2479d7ee.svg");
}

.icon_with_table.inform_icon_b {
  background-image: url("/assets/inform_black-d8ddabcd.svg");
}

.icon_with_table.more_icon {
  background-image: url("/assets/more_page_2-a74bbae6.svg");
}

.icon_with_badge.download_icon {
  background-image: url("/assets/download_icon-55408dfc.svg");
}

.popup_auto_box_cover {
  width: 230px;
  position: absolute;
  right: 12px;
  top: 122px;
  z-index: 105;
}

.popup_only_btn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid #d9d9d9;
  background-color: #ffffff;
  box-shadow: 0px 6px 12px rgb(0 0 0 / 0.16);
  padding: 12px;
  border-radius: 6px;
}

.popup_box_floating {
  width: 456px;
  height: 222px;
  z-index: 120;
  left: unset;
}
.popup_box_floating .popup_content {
  padding-top: 8px;
  height: calc(100% - 48px - 58px - 8px);
}

.flex_button {
  display: flex;
  height: 34px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background-color: #000000;
  font-size: 14px;
  color: #ffffff;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
  padding: 0px 12px;
  cursor: pointer;
}

.flex_button.button_yellow {
  background-color: #f4bd31;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #000000;
}

.flex_button.button_red {
  background-color: #e8555a;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.flex_button.button_white {
  background-color: #ffffff;
  border: 1px solid #1a1a1a;
  color: #000000;
}

.flex_button.btn_no_icon {
  padding: 0px 20px;
}

.flex_button_2line {
  display: flex;
  flex-direction: column;
  height: 44px;
  justify-content: center;
  align-items: center;
  background-color: #f7f7f7;
  font-size: 14px;
  color: #000000;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 2px 8px;
  box-sizing: border-box;
  line-height: 20px;
}
.flex_button.button_gray {
  background-color: rgb(0 0 0 / 0.25);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.flex_popop_btn {
  display: flex;
  gap: 6px;
  flex-direction: column;
}

.flex_icon_right {
  justify-content: unset;
}

.flex_icon_right .icon_with_btn {
  margin-left: auto;
}

.flex_button.flex_button_disable {
  opacity: 25%;
  cursor: unset;
}

.flex_list_section {
  display: grid;
  grid-template-columns: auto auto;
  height: 52px;
  background-color: #ffffff;
  border-radius: 6px;
  box-sizing: border-box;
  border: 1px solid #d9d9d9;
  padding: 2px 12px;
  align-items: center;
  grid-column-gap: 6px;
}
.flex_list_section.flex_list_section_popup {
  width: 538px;
}
.flex_list_section.s3line {
  height: 70px;
}
.flex_list_section_with_icon {
  grid-template-columns: 51px auto auto;
  padding: 0px 12px;
}
.flex_list_section_with_profile {
  grid-template-columns: 36px auto auto;
  padding: 0px 12px;
}

.flex_list_section.non_block_list {
  height: 38px;
  border: none;
  margin-bottom: 6px;
  padding: 0px;
}

.flex_list_section_2_block > .flex_txt_section {
  grid-area: row1col1;
}
.flex_list_section_2_block > .flex_btn_section {
  grid-area: row1col2;
}
.flex_list_section_2_block > .flex_list_item {
  padding: 0px;
  border: none;
  grid-area: row2col1;
}
.flex_list_section_2_block > .line_divide {
  height: 1px;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid #cccccc;
  grid-area: linedivide;
}
.flex_list_section_2_block.flex_list_section_with_profile > .profile_show {
  grid-area: profile;
}

.flex_list_section_2_block {
  height: 122px;
  grid-template-areas:
    "row1col1 row1col2"
    "linedivide linedivide"
    "row2col1 row2col1";
  row-gap: 6px;
  padding: 6px 12px;
}

.flex_list_section_2_block {
  height: 122px;
  grid-template-areas:
    "profile row1col1 row1col2"
    "linedivide linedivide linedivide"
    "row2col1 row2col1 row2col1";
  row-gap: 6px;
  padding: 6px 12px;
}

.flex_list_section_2_block.flex_list_section_2_block_106px {
  height: 106px;
}

.flex_list_section_with_profile {
  grid-template-columns: 38px auto auto;
}

.flex_list_section.bottom12 {
  margin-bottom: 12px;
}
.flex_list_section.bottom8 {
  margin-bottom: 8px;
}
.flex_list_section.bottom6 {
  margin-bottom: 6px;
}

.flex_list_section.right_pad4 {
  padding-right: 4px;
}
.flex_list_section.top12 {
  margin-top: 12px;
}
.flex_list_section.top6 {
  margin-top: 6px;
}
.flex_list_section.rad12 {
  border-radius: 12px;
}

.scroll_section .flex_list_section {
  height: unset;
  padding: 11px 12px 12px 12px;
}

.flex_block_section {
  margin: 12px 12px 6px 12px;
}

.flex_block_section.block_data_column {
  margin: 12px 0px;
}

.flex_block_section.block_data_column2 {
  margin: 3px 0px;
}

.flex_block_section.fix_width_1 {
  width: 460px;
}

.flex_2block_section {
  display: grid;
  grid-template-rows: 29px 50px;
  background-color: #ffffff;
  border-radius: 6px;
  box-sizing: border-box;
  border: 1px solid #d9d9d9;
  margin: 12px 12px 6px 12px;
  align-items: center;
}

.flex_2block_section .flex_list_section {
  border: none;
  border-top: 1px solid #d9d9d9;
  height: 50px;
}

.back_scroll_box {
  display: flex;
  padding: 0px 12px;
  overflow-x: auto;
}

.flex_btn_section {
  display: flex;
  gap: 12px;
  margin-left: auto;
  align-items: center;
}

.flex_txt_section {
  display: grid;
  grid-template-rows: auto auto;
  align-items: center;
}
.flex_txt_section.gap4 {
  gap: 4px;
}

.flex_txt_section_with_badge {
  display: flex;
  gap: 4px;
  align-items: center;
}

.flex_txt_section .t16 {
  line-height: 20px;
}

.flex_status_section {
  display: flex;
  gap: 8px;
  align-items: center;
}

.line_divide {
  height: 36px;
  width: 1px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 0.5px;
}

.flex_table_title .line_divide {
  height: 24px;
}

.line_divide.line_h24{
  height: 24px;
}

.flex_footer_bar_popup {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  height: 58px;
  box-sizing: border-box;
  /* background-color: #FFFFFF; */
  position: absolute;
  bottom: 0px;
  text-align: center;
  border-top: 1px solid rgb(0, 0, 0, 15%);
}
.flex_footer_bar_popup.gap8 {
  gap: 8px;
}

/* flex table */

.flex_table_box {
  display: grid;
  width: 100%;
  grid-template-rows: 32px auto;
}

.flex_table_box.scroll_table {
  overflow-x: scroll;
  overflow-y: hidden;
}

/* ใน row ของตารางมี อย่างน้อย 2 บรรทัดแยกกัน แต่ละอันชื่อยาวได้ แล้วเด้งลงข้างล่าง */
.flex_table_box.table_row_2line .flex_table_list {
  min-height: 48px;
}
/* .flex_table_box.table_row_2line.baseline_items .flex_table_list{
    align-items: baseline;
  } */
.flex_table_box.table_row_2line .flex_table_list > div > div {
  line-height: 18px;
}
.flex_table_box.table_row_2line .flex_table_list > div {
  padding-top: 6px;
  padding-bottom: 6px;
}
/* ---------- */

/* table scroll ข้าง */
.special_table_box {
  display: grid;
  width: 100%;
  grid-template-columns: 330px auto;
}
.special_table_box.special_table_box_2 {
  grid-template-columns: 300px auto;
}
.special_table_box .flex_table_list {
  min-height: 21px;
}
/* .special_table_box .flex_table_box{
    display: grid;
  } */
.special_table_box .flex_table_box .flex_table_list > div {
  padding-top: 6px;
  padding-bottom: 6px;
}
.special_table_box
  .flex_table_box
  .flex_table_list.flex_table_list_summary
  > div {
  padding-top: 0px;
  padding-bottom: 0px;
}
.special_table_box .flex_table_box .flex_table_list.table_layer_2col_0 > div {
  padding-top: 0px;
  padding-bottom: 0px;
}
.special_table_box .flex_table_box .flex_table_list.table_layer_2col_0 {
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 21px;
  box-sizing: border-box;
}
.special_table_box .flex_table_box .flex_table_list.table_layer_1col_0 > div {
  padding-top: 0px;
  padding-bottom: 0px;
}
.special_table_box .flex_table_box .flex_table_list.table_layer_1col_0 {
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 21px;
  box-sizing: border-box;
}
/* .special_table_box .flex_table_box .flex_table_list.table_layer_2col_0.flex_table_list_summary{
    padding-top: 0px;
    padding-bottom: 0px;
  } */
.special_table_box .flex_table_box {
  grid-template-rows: 50px auto;
}
.stick_top .flex_table_head {
  height: 100%;
  box-sizing: border-box;
}
.stick_top .table_layer_unlimit_scroll_col {
  height: 100%;
}
/* ---------- */

.flex_table_head {
  display: grid;
  background-color: #6cc5eb;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  align-items: center;
  border-radius: 6px;
  padding-left: 12px;
  gap: 8px;
  cursor: unset !important;
}

.flex_table_head.radius_6 {
  border-radius: 6px;
}

.flex_table_head.green_header {
  background-color: #d5f291;
  color: #598000;
  cursor: pointer;
}

.flex_table_head.yellow_header {
  background-color: #ffe299;
  color: #996e00;
  cursor: pointer;
}

.flex_table_head.blue_header {
  background-color: #bfedff;
  color: #086d99;
  cursor: pointer;
}

.flex_table_title {
  display: grid;
  min-height: 32px;
  background: linear-gradient(180deg, #dfe3e6 0%, #d2d6d9 100%);
  grid-template-columns: auto 32px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #000000;
  font-size: 14px;
  font-weight: bold;
  align-items: center;
  border-radius: 8px;
  padding-left: 12px;
  gap: 8px;
  padding: 5px 0px 5px 12px;
  position: relative;
  box-sizing: border-box;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.flex_table_title.title_summary {
  background: #f7f7f7;
}

.flex_table_title .slide_up_down,
.flex_table_title .icon_with_table {
  position: absolute;
  right: 0px;
  top: calc(50% - (32px / 2));
}

.flex_table_title.no_gap,
.flex_button.no_gap {
  gap: 0px;
}

.flex_table_title.size38 {
  height: 38px;
  box-sizing: border-box;
}

.flex_table_title.size34 {
  padding: 4px 0px 4px 12px;
}

.flex_table_title.flex_table_title_first {
  margin-top: 12px;
}

.flex_table_title.flex_table_title_with_icon {
  border-radius: 6px;
  grid-template-columns: 34px auto auto;
  padding-left: 8px;
}
.flex_table_title.flex_table_title_LR {
  padding-right: 12px;
  grid-template-columns: auto auto;
  justify-content: space-between;
}
.flex_table_title.flex_table_title_LR_slide {
  padding-right: 32px;
  grid-template-columns: auto auto;
  justify-content: space-between;
}

.flex_table_list {
  display: grid;
  min-height: 32px;
  background-color: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  align-items: center;
  gap: 8px;
}

/* .flex_table_list:has(.checkbox_section_V2024){
  cursor: pointer;
} */

.flex_table_list:hover {
  background-color: #e6fbff;
}

.flex_table_list.list_red {
  background-color: #ffbfc1;
}

/* .flex_table_list.list_red_last {
  border-bottom: 2px solid #d9363c;
} */

.flex_table_list.list_red:hover {
  background-color: #f28589;
}

.flex_table_list.list_blue {
  background-color: #BFEDFF;
}

/* .flex_table_list.list_blue_last {
  border-bottom: 2px solid #d9363c;
} */

.flex_table_list.list_blue:hover {
  background-color: #87DDFF;
}

.flex_table_list.flex_table_list_gray_box {
  background-color: #e6e6e6;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #000000;
  align-items: center !important;
  border-radius: 6px;
}

.flex_table_list.no_border {
  border: none;
}

.flex_table_list.flex_table_list_summary {
  background-color: #f7f7f7;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
}

.flex_table_list.flex_table_list_big {
  min-height: 52px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  margin-top: 6px;
}

.flex_table_list_big.flex_table_list .more_page_icon {
  padding-right: 12px;
  right: 0px;
  width: 32px;
}

.flex_table_list.table_layer_3col_0 .icon_size_20x20,
.flex_table_list.table_layer_4col_0 .icon_size_20x20 {
  position: relative;
  top: calc(50% - (20px / 2));
  float: right;
}

.flex_table_list .more_page_icon {
  width: 6px;
  height: 10px;
  position: relative;
  float: right;
  right: 12px;
  top: calc(50% - (10px / 2));
}

.flex_table_list > .t14,
.flex_table_list > .flex_text_row.gap6 > .t14 {
  padding: 6px 0px;
}

.list_table_layer {
  margin-bottom: 8px;
}
.list_table_layer > .data_two_column {
  padding-left: 12px;
}

.list_table_layer > .list_table_layer:last-child {
  margin-bottom: 0px;
}

.list_first_space {
  padding-left: 12px;
}

/* width column normal*/
.table_layer {
  grid-template-columns: 34px auto 154px;
}

.table_radio_2col {
  grid-template-columns: 34px 148px auto;
}

.table_2col {
  grid-template-columns: 128px auto;
}

.table_3col {
  grid-template-columns: 128px auto 266px;
}

.table_2txt_icon {
  grid-template-columns: auto 40px 32px;
}

.table_4col_checkbox_txt_input_icon {
  grid-template-columns: 32px 188px auto 32px;
  padding-left: 0px;
}

.table_4col_checkbox_txt_input {
  grid-template-columns: 32px 188px auto;
  min-height: 40px;
}

.table_6col_profile_txt_more {
  grid-template-columns: 24px 116px auto 176px 252px 30px;
}

.table_6col_checkbox_profile_txt {
  grid-template-columns: 22px 24px 116px auto 146px;
}

.table_4col_checkbox_txt_input.h_spc {
  height: 40px;
}

/* width column head*/
.table_head_2layer {
  grid-template-columns: 46px auto 154px;
}

/* width column 1col*/
.table_layer_1col_0 {
  padding-left: 12px;
  padding-right: 12px;
  grid-template-columns: auto;
}
.table_layer_1col_1 {
  padding: 6px 12px;
  grid-template-columns: auto;
  cursor: pointer;
}

/* width column 2col*/
.table_layer_2col_0 {
  padding-left: 12px;
  grid-template-columns: auto 68px;
}
.table_layer_2col_1 {
  padding-left: 12px;
  grid-template-columns: auto 136px;
}
.table_layer_2col_2 {
  padding-left: 12px;
  grid-template-columns: auto 32px;
  cursor: pointer;
}
.table_layer_2col_3 {
  padding-left: 12px;
  grid-template-columns: auto 190px;
}
.table_layer_2col_4 {
  padding-left: 12px;
  grid-template-columns: auto 32px;
  padding-right: 12px;
  position: relative;
}
.table_layer_2col_5 {
  padding-left: 12px;
  grid-template-columns: 30px auto;
}
.table_layer_2col_6 {
  padding-left: 12px;
  grid-template-columns: 24px auto;
}
.table_layer_2col_7 {
  padding-left: 12px;
  padding-right: 12px;
  grid-template-columns: auto 136px;
}
.table_layer_2col_8 {
  padding-left: 12px;
  grid-template-columns: 150px auto;
}
.table_layer_2col_9 {
  padding-left: 12px;
  grid-template-columns: 120px auto;
}

/* width column 3col*/
.table_layer_3col_0 {
  padding-left: 12px;
  grid-template-columns: auto 32px 32px;
  cursor: pointer;
}
.table_layer_3col_1 {
  padding-left: 12px;
  grid-template-columns: 120px auto 32px;
  cursor: pointer;
}
.table_layer_3col_2 {
  padding-left: 12px;
  grid-template-columns: auto 104px 32px;
  cursor: pointer;
}
.table_layer_3col_3 {
  padding-left: 12px;
  grid-template-columns: 24px auto 186px;
}
.table_layer_3col_4 {
  padding-left: 12px;
  grid-template-columns: 110px auto 32px;
  padding-right: 12px;
  position: relative;
}
.table_layer_3col_5 {
  padding-left: 12px;
  grid-template-columns: 30px 90px auto;
}
.table_layer_3col_6 {
  padding-left: 12px;
  grid-template-columns: auto 180px 32px;
  cursor: pointer;
}
.table_layer_3col_7 {
  padding-left: 12px;
  grid-template-columns: 250px 180px auto;
  cursor: pointer;
}
.table_layer_3col_8 {
  padding-left: 12px;
  grid-template-columns: 24px auto 32px;
}
.table_layer_3col_9 {
  padding-left: 12px;
  grid-template-columns: 24px 100px auto;
}
.table_layer_3col_10 {
  padding-left: 12px;
  grid-template-columns: auto 335px 32px;
  cursor: pointer;
}
.table_layer_3col_11 {
  padding-left: 12px;
  grid-template-columns: 130px auto 400px;
}
.table_layer_3col_12 {
  padding-left: 12px;
  padding-right: 12px;
  grid-template-columns: 130px auto 150px;
}
.table_layer_3col_13 {
  padding-left: 12px;
  grid-template-columns: auto 150px 32px;
  cursor: pointer;
}
.table_layer_3col_14 {
  padding-left: 12px;
  padding-right: 4px;
  grid-template-columns: auto 170px 100px;
}
.table_layer_3col_15 {
  padding-left: 12px;
  grid-template-columns: 28px 100px auto;
}
.table_layer_3col_16 {
  padding-left: 12px;
  grid-template-columns: 28px 100px auto;
  cursor: pointer;
}
.table_layer_3col_16.list_selected {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--Blue---Primary, #6cc5eb);
}
.table_layer_3col_17 {
  padding-left: 12px;
  grid-template-columns: 24px auto 136px;
}
.table_layer_3col_18 {
  padding-left: 12px;
  grid-template-columns: auto auto 32px;
  cursor: pointer;
}
.table_layer_3col_19 {
  padding-left: 12px;
  grid-template-columns: auto 149px 32px;
  cursor: pointer;
}
.table_layer_3col_20 {
  padding-left: 12px;
  padding-right: 12px;
  grid-template-columns: 130px auto 250px;
}
.table_layer_3col_21 {
  padding-left: 12px;
  padding-right: 12px;
  grid-template-columns: auto 150px 250px;
}
.table_layer_3col_22{
  padding-left: 12px;
  grid-template-columns: 24px auto 90px;
}
.table_layer_3col_23{
  padding-left: 12px;
  gap: 0px;
  grid-template-columns: 30px auto 32px;
}
.table_layer_3col_24{
  padding: 8px 0px 8px 12px;
  gap: 8px;
  grid-template-columns: auto 140px 20px;
  cursor: pointer;
}

/* width column 4col*/
.table_layer_4col_0 {
  padding-left: 12px;
  grid-template-columns: auto 122px 32px 32px;
  cursor: pointer;
}
.table_layer_4col_1 {
  padding-left: 12px;
  grid-template-columns: auto 182px 82px 32px;
  cursor: pointer;
}
.table_layer_4col_2 {
  padding-left: 12px;
  grid-template-columns: 30px auto 186px 32px;
}
.table_layer_4col_3 {
  padding-left: 12px;
  grid-template-columns: 106px auto 200px 32px;
  cursor: pointer;
}
.table_layer_4col_4 {
  padding-left: 12px;
  grid-template-columns: auto 260px 180px 32px;
  cursor: pointer;
}
.table_layer_4col_5 {
  padding-left: 12px;
  grid-template-columns: 130px auto 200px 32px;
  cursor: pointer;
}
.table_layer_4col_6 {
  padding-left: 12px;
  grid-template-columns: 30px auto 40px 32px;
  gap: 0px;
}
.table_layer_4col_7 {
  padding-left: 12px;
  grid-template-columns: auto 94px 32px 32px;
  gap: 0px;
}
.table_layer_4col_8 {
  padding-left: 12px;
  grid-template-columns: 154px auto 98px 32px;
  cursor: pointer;
}
.table_layer_4col_9 {
  padding-left: 12px;
  grid-template-columns: auto 140px 100px 32px;
  cursor: pointer;
}
.table_layer_4col_10 {
  padding-left: 12px;
  grid-template-columns: 24px 140px auto 186px;
}
.table_layer_4col_11 {
  padding-left: 12px;
  grid-template-columns: 24px 140px auto 110px;
  padding-right: 4px;
}
.table_layer_4col_12 {
  padding-left: 12px;
  grid-template-columns: 24px auto 120px 110px;
  padding-right: 4px;
}

.table_layer_4col_13 {
  padding-left: 12px;
  grid-template-columns: 24px 28px 100px auto;
}

.table_layer_4col_14 {
  padding-left: 12px;
  grid-template-columns: 24px 146px 160px auto;
}
.flex_table_list.table_layer_4col_14 {
  min-height: 40px;
}

.table_layer_4col_15 {
  padding-left: 12px;
  grid-template-columns: 20px auto auto 32px;
  cursor: pointer;
}
.hide_move .table_layer_4col_15{
  grid-template-columns: auto auto 32px;
}
.hide_move .table_layer_4col_15 > div:first-child{
  display: none;
}

.table_layer_4col_16 {
  padding-left: 12px;
  grid-template-columns: 28px 110px auto 190px;
}

.table_layer_4col_17 {
  padding-left: 12px;
  grid-template-columns: auto 182px 90px 20px;
  cursor: pointer;
}
.table_layer_4col_18 {
  padding-left: 12px;
  grid-template-columns: 28px 125px auto 32px;
  cursor: pointer;
}
.table_layer_4col_19 {
  padding-left: 12px;
  grid-template-columns: 20px auto 50px 32px;
  cursor: pointer;
}
.table_layer_4col_20 {
  padding-left: 12px;
  grid-template-columns: auto 112px 208px 32px;
  cursor: pointer;
}

.table_layer_4col_21 {
  padding-left: 12px;
  grid-template-columns: auto 80px 180px 32px;
  cursor: pointer;
}
.table_layer_4col_22 {
  padding-left: 12px;
  grid-template-columns: 20px auto 210px 32px;
  cursor: pointer;
}


.table_layer_4col_23{
  padding-left: 12px;
  grid-template-columns: 24px auto 136px 32px;
  cursor: pointer;
}

.table_layer_4col_24 {
  padding-left: 12px;
  grid-template-columns: 154px auto 180px 32px;
  cursor: pointer;
}

.table_layer_4col_25 {
  padding-left: 12px;
  grid-template-columns: 108px auto 100px 32px;
  cursor: pointer;
}
.table_layer_4col_26 {
  padding-left: 12px;
  grid-template-columns: 20px 100px auto 80px;
  padding-right: 12px;
}


.table_layer_4col_27 {
  padding-left: 12px;
  grid-template-columns: auto 80px 300px 32px;
  cursor: pointer;
}

/* width column 5col*/
.table_layer_5col_0 {
  padding-left: 12px;
  grid-template-columns: 28px 125px auto 110px 32px;
  cursor: pointer;
}
.table_layer_5col_1 {
  padding-left: 12px;
  grid-template-columns: auto 280px 110px 110px 32px;
  cursor: pointer;
}
.table_layer_5col_2 {
  padding-left: 12px;
  grid-template-columns: 110px auto 110px 115px 32px;
  cursor: pointer;
}
.table_layer_5col_3 {
  padding-left: 12px;
  grid-template-columns: auto 300px 156px 32px 32px;
  cursor: pointer;
}
.table_layer_5col_4 {
  padding-left: 12px;
  grid-template-columns: 10px auto 112px 208px 32px;
  cursor: pointer;
}
.table_layer_5col_5 {
  padding-left: 12px;
  grid-template-columns: 10px auto 165px 180px 32px;
  cursor: pointer;
}
.table_layer_5col_6 {
  padding-left: 12px;
  grid-template-columns: auto 250px 264px 115px 32px;
  cursor: pointer;
}
.table_layer_5col_7 {
  padding-left: 12px;
  grid-template-columns: 106px 188px auto 194px 32px;
  cursor: pointer;
}
.table_layer_5col_8 {
  padding-left: 12px;
  grid-template-columns: auto 252px 124px 108px 32px;
  cursor: pointer;
}
.table_layer_5col_9 {
  padding-left: 12px;
  grid-template-columns: 22px 108px auto 108px 32px;
  cursor: pointer;
}
.table_layer_5col_10 {
  padding-left: 12px;
  grid-template-columns: 140px auto 170px 32px 32px;
  gap: 0px;
  position: relative;
}
.table_layer_5col_11 {
  padding-left: 12px;
  grid-template-columns: 108px auto 122px 72px 80px;
}
.table_layer_5col_12 {
  padding-left: 12px;
  grid-template-columns: 10px 108px auto 320px 32px;
  cursor: pointer;
}
.table_layer_5col_13 {
  padding-left: 12px;
  grid-template-columns: 130px auto 92px 78px 32px;
  cursor: pointer;
}
.table_layer_5col_14 {
  padding-left: 12px;
  grid-template-columns: 40px 125px auto 200px 32px;
  cursor: pointer;
}

.table_layer_5col_15 {
  padding-left: 12px;
  padding-right: 12px;
  grid-template-columns: 130px auto 150px 150px 32px;
  cursor: pointer;
}

.table_layer_5col_16 {
  padding-left: 12px;
  grid-template-columns: 130px auto 92px 92px 32px;
  cursor: pointer;
}

.table_layer_5col_17 {
  padding-left: 12px;
  grid-template-columns: 20px auto 150px 50px 32px;
  cursor: pointer;
}

.table_layer_5col_18 {
  padding-left: 12px;
  grid-template-columns: 20px auto 150px 120px 32px;
  cursor: pointer;
}

.table_layer_5col_19 {
  padding-left: 12px;
  grid-template-columns: 20px auto 150px 150px 32px;
  cursor: pointer;
}

.table_layer_5col_20 {
  padding-left: 12px;
  grid-template-columns: 28px 100px auto 140px 32px;
  cursor: pointer;
}

.table_layer_5col_21 {
  padding-left: 12px;
  grid-template-columns: auto 120px 120px 150px 32px;
  cursor: pointer;
}

.table_layer_5col_22 {
  padding-left: 12px;
  grid-template-columns: auto 150px 92px 78px 32px;
  cursor: pointer;
}

.table_layer_5col_23 {
  padding-left: 12px;
  grid-template-columns: 20px auto 375px 50px 32px;
  cursor: pointer;
}

.table_layer_5col_24 {
  padding-left: 12px;
  grid-template-columns: 20px 28px 100px auto 100px;
  cursor: pointer;
}

.table_layer_5col_25 {
  padding-left: 12px;
  grid-template-columns: 108px auto 100px 100px 32px;
  cursor: pointer;
}

.table_layer_5col_26 {
  padding-left: 12px;
  grid-template-columns: 20px auto 150px 190px  32px;
  cursor: pointer;
}

.table_layer_5col_27 {
  padding-left: 12px;
  grid-template-columns: auto 80px 80px 80px 90px;
}


.table_layer_5col_student_course {
  padding-left: 12px;
  grid-template-columns: 108px auto 250px 120px 40px;
}




/* width column 6col*/
.table_layer_6col_0 {
  padding-left: 12px;
  grid-template-columns: 28px 125px auto 110px 110px 32px;
  cursor: pointer;
}
.table_layer_6col_1 {
  padding-left: 12px;
  grid-template-columns: auto 110px 110px 110px 110px 32px;
  cursor: pointer;
}
.table_layer_6col_3 {
  padding-left: 12px;
  grid-template-columns: 28px 125px auto 200px 200px 32px;
  cursor: pointer;
}
.table_layer_6col_4 {
  padding-left: 12px;
  grid-template-columns: 10px 44px auto 104px 54px 32px;
  cursor: pointer;
}
.table_layer_6col_5 {
  padding-left: 12px;
  grid-template-columns: 20px auto 60px 32px 32px 32px;
  gap: 0px;
}
.table_layer_6col_6 {
  padding-left: 12px;
  grid-template-columns: 10px auto 92px 140px 32px 32px;
  position: relative;
}
.table_layer_6col_7 {
  padding-left: 12px;
  grid-template-columns: 22px 110px auto 372px 108px 32px;
}

.table_layer_6col_8 {
  padding: 3px 0px 3px 12px;
  grid-template-columns: 10px auto 140px 90px 56px 32px;
}
.table_layer_6col_9 {
  padding-left: 12px;
  grid-template-columns: auto 130px 250px 105px 78px 32px;
}
.table_layer_6col_10 {
  padding-left: 12px;
  grid-template-columns: 40px 125px auto 200px 108px 32px;
}
.table_layer_6col_11 {
  padding-left: 12px;
  grid-template-columns: 108px auto 122px 80px 80px 32px;
  cursor: pointer;
}
.table_layer_6col_12 {
  padding-left: 12px;
  padding-right: 12px;
  grid-template-columns: 130px auto 35px 35px 35px 120px;
  cursor: pointer;
}
.table_layer_6col_13 {
  padding-left: 12px;
  grid-template-columns: 110px auto 150px 150px 150px 32px;
  cursor: pointer;
}
.table_layer_6col_14 {
  padding-left: 12px;
  grid-template-columns: 20px auto 262px 100px 80px 32px;
  cursor: pointer;
}
.table_layer_6col_15 {
  padding-left: 12px;
  grid-template-columns: auto 80px 80px 80px 80px 90px;
}


.table_layer_6col_16 {
  padding-left: 12px;
  grid-template-columns: 20px auto 90px 120px 120px 32px;
  cursor: pointer;
}

.table_layer_6col_18 {
  padding-left: 12px;
  grid-template-columns: 20px auto 90px 120px 120px 32px;
  cursor: pointer;
}



.table_layer_6col_19{
  padding-left: 12px;
  grid-template-columns: 28px 125px auto 280px 200px 32px;
  cursor: pointer;
}


/* width column 7col*/
.table_layer_7col_0 {
  padding-left: 12px;
  grid-template-columns: 70px 170px 180px auto 110px 110px 32px;
  cursor: pointer;
}
.table_layer_7col_1 {
  padding-left: 12px;
  grid-template-columns: auto 170px 180px 150px 90px 90px 32px;
  cursor: pointer;
}
.table_layer_7col_2 {
  padding-left: 12px;
  grid-template-columns: 20px auto 114px 82px 90px 53px 32px;
  cursor: pointer;
}
.hide_move .table_layer_7col_2{
  grid-template-columns: auto 114px 82px 90px 53px 32px;
}
.hide_move .table_layer_7col_2 > div:first-child{
  display: none;
}

.table_layer_7col_3 {
  padding-left: 12px;
  grid-template-columns: 20px auto 78px 78px 78px 150px 32px;
  cursor: pointer;
}

/* width column 8col*/
.table_layer_8col_0 {
  padding-left: 12px;
  grid-template-columns: 22px auto 142px 152px 132px 132px 106px 32px;
}

.table_layer_8col_1 {
  padding-left: 12px;
  grid-template-columns: 20px auto 92px 120px 86px 42px 50px 32px;
  cursor: pointer;
}

.table_layer_9col_0 {
  padding-left: 12px;
  grid-template-columns: 20px auto 100px 100px 100px 100px 100px 100px 32px;
  cursor: pointer;
}

.table_layer_9col_1 {
  padding-left: 12px;
  grid-template-columns: 20px auto 100px 100px 100px 300px 32px;
  cursor: pointer;
}



/* list selectable */
.list_selectable {
  cursor: pointer;
}
.list_selectable.list_select_active {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: #6cc5eb;
}
/* list obsolete */
.list_obsoleted {
  background: #F5F7F7;
}

/* width column unlimit scroll col*/
.table_layer_unlimit_scroll_col {
  display: flex;
  flex-direction: row;
  gap: 0px;
}
.table_layer_unlimit_scroll_col.margin_2 {
  margin-right: 2px;
}
.table_layer_unlimit_scroll_col.margin_2 div > div:hover {
  text-decoration: underline;
  cursor: pointer;
}
.table_layer_unlimit_scroll_col div.problem_block {
  background-color: #ffe299;
  color: #996e00;
}
.table_layer_unlimit_scroll_col div.problem_block .t14 {
  color: #996e00;
}

.table_layer_unlimit_scroll_col.flex_table_list > div {
  border-left: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* .table_layer_unlimit_scroll_col.flex_table_list > div > div{
    min-height: 32px;
    line-height: 32px;
  } */

.table_layer_unlimit_scroll_col div {
  width: 108px;
  min-width: 108px;
  text-align: center;
  padding: 0px 12px;
  box-sizing: border-box;
}
.table_layer_unlimit_scroll_col.flex_table_list_summary.flex_table_list {
  right: 1px;
  position: relative;
}
.table_layer_unlimit_scroll_col.flex_table_list_summary div:first-child {
  border-left: none;
}
.table_layer_unlimit_scroll_col.flex_table_list_summary div:last-child {
  border-right: none;
}

/* layer table */

.table_layer_0 {
  margin-left: 0px;
}

.table_layer_1 {
  margin-left: 12px;
}

.flex_table_title_with_icon.table_layer_0,
.flex_table_title_with_icon.table_layer_1 {
  grid-template-columns: auto auto;
}

.table_layer_2 {
  margin-left: 24px;
}

/* all height table */

.list_table {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  text-wrap: wrap;
  word-break: break-word;
}
.list_table.noflex {
  display: block;
}

.list_table > .line_divide {
  height: 1px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  border-bottom: 1px solid #cccccc;
}

.list_table .table_header_box_gray {
  min-height: 34px;
}

.list_table.h_tab_data_1 {
  height: calc(100% - 52px - 38px - 38px - 32px - 10px);
}

.list_table.h_tab_data_2 {
  height: calc(100% - 32px - 32px - 10px);
}

.list_table.h_tab_data_3 {
  height: calc(100% - 32px - 2px);
}

.list_table.h_plo_data_1 {
  /*                  txt1   mrg8  ploGraph marg2 txt2 */
  height: calc(100% - 21px - 8px - 234px - 12px - 21px);
}

.list_table.h_w_tab_menu {
  /*                  Tmenu   mrg12 */
  height: calc(100% - 36px - 12px);
}
.list_table.h_w_tab_menu_fl_list {
  /*                  Tmenu   mrg12 f_list_sec marg12*/
  height: calc(100% - 36px - 12px - 52px - 12px);
}
.list_table.h_w_2tab_menu_fl_list {
  /*                  Tmenu   mrg12 Tmenu  mrg12 f_list_sec marg12*/
  height: calc(100% - 36px - 12px - 36px - 12px - 52px - 12px);
}
.list_table.h_w_fl_list {
  /*              f_list_sec marg12*/
  height: calc(100% - 52px - 12px);
}
.list_table.h_w_fl_list_search {
  /*                  f_list_sec marg12 search mrg8*/
  height: calc(100% - 52px - 12px - 32px - 8px);
}
.list_table.h_w_fl_list_search2 {
  /*                  f_list_sec marg12 search mrg8*/
  height: calc(100% - 52px - 6px - 32px - 8px);
}
.list_table.h_w_2list_2_txt_1search {
  /*                  txt1   tmrg1 li1    limrg1 txt2   tmrg2 li2   limrg2 src1   srcmrg1*/
  height: calc(
    100% - 18px - 4px - 52px - 12px - 18px - 4px - 52px - 8px - 32px - 8px
  );
}
.list_table.h_epa_popup {
  /*                  Tmenu   mrg8 */
  height: calc(100% - 336px - 51px - 8px);
}
.list_table.h_w_1txt {
  /*                  txt1*/
  height: calc(100% - 36px);
}
.list_table.h_w_search {
  /*                  search mrg-t mrg-b*/
  height: calc(100% - 32px - 6px - 8px);
}
.list_table.h_w_search_f {
  /*                  search mrg-b*/
  height: calc(100% - 32px - 8px);
}
.list_table.h_w_search_1txt {
  /*                  search mrg-t mrg-b  t16*/
  height: calc(100% - 32px - 10px - 8px - 16px);
}
.list_table.h_popup_bot_table_epa {
  height: 340px;
}
.list_table.h_sync_data {
  /*                  txt1   txt2*/
  height: calc(100% - 38px - 38px);
}
.list_table.h_sync_data.popup {
  /*                  txt1   txt2*/
  overflow-y: auto;
  height: calc(100% - 68px - 46px);
}
.list_table.h_w_4data_1big_1fl {
  /*                  data1  data2  data3  data4  big1    fllist*/
  height: calc(100% - 38px - 38px - 38px - 38px - 136px - 52px - 6px);
}
.list_table.h_w_3Llist_1big_1txt {
  /*                  list  txt*/
  height: calc(100% - 70px - 38px);
}

/* height table standard */

.flex_table_box.h_tab_block_search {
  height: calc(100% - 52px - 32px - 12px - 12px - 12px);
}

/* height table standard popup */

.flex_table_box.h_popup_title_search_footer_mrg {
  height: calc(100% - 48px - 32px - 58px - 20px);
}

.flex_table_box.h_popup_title_search_1txt_footer_mrg {
  height: calc(100% - 48px - 32px - 58px - 20px - 25px);
}

.flex_table_box.h_popup_title_block_title2_search_footer_mrg {
  height: calc(100% - 48px - 52px - 32px - 38px - 58px - 20px);
}

.flex_table_box.h_popup_title_txt_footer {
  height: calc(100% - 48px - 38px - 58px);
}

.flex_table_box.h_popup_mid_table_epa {
  height: calc(100% - 52px - 12px - 38px - 6px - 52px - 12px - 346px);
  margin-bottom: 12px;
}

.flex_table_box.h_table_with_1list_1search {
  height: calc(100% - 52px - 8px - 32px - 8px);
}
.flex_table_box.h_table_with_1blist_1search_1txt {
  height: calc(100% - 70px - 32px - 8px - 38px);
}
.flex_table_box.h_table_with_1search {
  height: calc(100% - 32px - 8px);
}
.flex_table_box.h_table_with_1tap_1list_1search {
  height: calc(100% - 40px - 8px - 52px - 8px - 32px - 8px);
}
.flex_table_box.h_w_tap_menu_1search {
  /*                  Tmenu   mrg8  search mrg*/
  height: calc(100% - 40px - 8px - 32px - 8px);
}
.flex_table_box.h_w_1txt_1list {
  /*                  */
  height: calc(100% - 40px - 8px - 52px);
}

.flex_table_box.h_popup_1txt {
  height: calc(100% - 21px - 10px);
}

.flex_table_box.h_table_fix_342 {
  height: 342px;
  position: relative;
}

.flex_table_box.h_popup_full,
.flex_table_box.h_table_full {
  height: calc(100%);
}
.flex_table_box.h_popup_half,
.flex_table_box.h_table_half {
  height: calc(50%);
}

.flex_table_box .h_scroll_with_title {
  height: calc(100% - 32px);
  position: absolute;
  top: 32px;
  width: 100%;
}

.flex_table_box.h_phase_popup {
  height: calc(100% - 40px - 54px - 8px);
}

.flex_table_box.h_w_1collist_tab {
  /*                  */
  height: calc(100% - 32px - 8px - 13px - 32px - 6px);
}

.flex_table_box.h_gm_popup1 {
  height: calc(100% - 32px - 8px - 52px - 8px - 202px - 8px);
}

.flex_table_box.h_widget_s1 {
  height: 402px;
}

.table_score {
  width: 100%;
  display: grid;
  grid-template-columns: 105px auto auto auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  margin-bottom: 8px;
}

.table_score div {
  display: flex;
  align-items: center;
  height: 24px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  justify-content: center;
}

.table_score div:nth-child(4n) {
  border-right: none;
}

.table_score div:nth-child(n + 9) {
  border-bottom: none;
}

.table_score div:nth-child(4n - 3) {
  padding-left: 8px;
  justify-content: left;
}

.radio_section .radio_btn .checkmark_radio.radio_in_flex_table {
  display: flex;
  align-items: center;
  margin-left: 12px;
  justify-content: center;
  top: 2px;
  left: 0px;
}

.checkbox_section .checkbox_box .checkbox_square_black.check_in_flex_table {
  display: flex;
  align-items: center;
  margin-left: 12px;
  justify-content: center;
  top: -1px;
  left: 0px;
}

.checkbox_section
  .checkbox_box
  .checkbox_square_black.check_in_flex_table_center {
  display: flex;
  align-items: center;
  justify-content: center;
  top: -1px;
  left: 0px;
}
/* tag status ใหม่*/

.status_box_section_2 {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
.status_box_section_2.gap4 {
  gap: 4px;
}

.status_box_section_2 .txt_des {
  font-weight: bold;
  font-size: 14px;
  color: var(--color-black);
}

.tag_status {
  display: flex;
  height: 22px;
  background-color: #808080;
  box-sizing: border-box;
  padding: 0px 6px;
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
}

.flex_table_title .tag_status {
  height: 20px;
}

.tag_status.h20 {
  height: 20px;
}

.tag_status.w100 {
  width: 100%;
  padding: 0px 4px;
}

.tag_status.yellow_status {
  background: linear-gradient(180deg, #ffe299 0%, #ffdb80 100%);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
  color: #a67700;
}

.tag_status.green_status {
  background: linear-gradient(180deg, #d5f291 0%, #cef279 100%);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
  color: #628c00;
}

.tag_status.light_green_status {
  background: linear-gradient(180deg, #F2F291 0%, #F2F279 100%);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
  color: #8C8C00;
}

.tag_status.blue_status {
  background: linear-gradient(180deg, #bfedff 0%, #a6e6ff 100%);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
  color: #1784b3;
}

.tag_status.red_status {
  background: linear-gradient(180deg, #ffbfc1 0%, #ffa6a9 100%);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
  color: #8c1c20;
}

.tag_status.red_status_2 {
  background: linear-gradient(180deg, #ffbfc1 0%, #ffa6a9 100%);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
  color: #8c1c20;
}

.tag_status.gray_status {
  background: linear-gradient(180deg, #dfe3e6 0%, #c2c9cc 100%);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
  color: #5d6366;
}

.tag_status.gray_status_2 {
  background: linear-gradient(180deg, #dfe3e6 0%, #c2c9cc 100%);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
  color: #5d6366;
}

.tag_status.fix_width {
  width: fit-content;
}

.badgeBox {
  display: flex;
  height: 17px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: #000000;
  color: #ffffff;
  gap: 4px;
  padding: 0px 8px;
  align-items: center;
}

.status_circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.status_circle.red {
  background-color: #e8555a;
}

.status_circle.green {
  background-color: #97cc1c;
}

.status_circle_txt {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* IOS switch checkbox */
.toggle_switch {
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 20px;
}
.toggle_switch .circle_switch {
  position: relative;
  display: inline-block;
  width: 51px;
  height: 31px;
  background-color: rgba(120, 120, 128, 0.16);
  border-radius: 15px;
  vertical-align: text-bottom;
  transition: all 0.1s linear;
}
.toggle_switch .circle_switch::after {
  content: "";
  position: absolute;
  left: 0;
  width: 27px;
  height: 27px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 3px 1px rgba(0, 0, 0, 0.06);
  transform: translate3d(2px, 2px, 0);
  transition: all 0.1s linear;
}
/* .toggle_switch:active .circle_switch::after {
    width: 28px;
    transform: translate3d(2px, 2px, 0);
  }
  .toggle_switch:active input:checked + .circle_switch::after { 
    transform: translate3d(16px, 2px, 0); 
  } */
.toggle_switch input {
  display: none;
}
.toggle_switch input:checked + .circle_switch {
  background-color: #6dc4eb;
}
.toggle_switch input:checked + .circle_switch::before {
  transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
}
.toggle_switch input:checked + .circle_switch::after {
  transform: translate3d(22px, 2px, 0);
}
/* ---------- */

.flex_title_section {
  display: flex;
  gap: 6px;
  flex-direction: row;
  align-items: center;
}
.flex_title_section .yellow_circle_bullet,
.flex_title_section .green_circle_bullet {
  top: -1px;
}

.flex_btn_section .grid_right_layuot {
  display: grid;
  grid-template-columns: 90px 90px 90px;
}

.field_box_in_popup {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #cccccc;
}

.field_box_in_popup .t24 {
  line-height: 24px;
}

.field_box_in_popup.field_box_in_popup_with_profile {
  display: grid;
  grid-template-columns: 56px auto;
  grid-gap: 8px;
}

.field_box_in_popup.field_box_in_popup_with_2_profile_status {
  display: grid;
  grid-template-columns: auto 56px 108px 56px auto;
  grid-gap: 12px;
}

.field_box_in_popup.field_box_in_popup_with_multi_profile_status {
  display: grid;
  grid-template-columns: 319px 56px 108px 112px auto;
  grid-gap: 12px;
}

.field_box_in_popup_with_multi_profile_status .multiprofile_block {
  display: grid;
  grid-template-columns: repeat(auto-fill, 28px);
  grid-auto-flow: row;
}

.field_box_in_popup_with_2_profile_status .left_side {
  text-align: end;
}

.field_box_in_popup_with_2_profile_status .mid_status {
  width: 108px;
  height: 56px;
  display: flex;
  flex-direction: column;
  background-color: #808080;
  box-sizing: border-box;
  padding: 4px;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  border-radius: 8px;
  text-transform: uppercase;
  align-items: center;
  justify-content: center;
}

.field_box_in_popup_with_2_profile_status .bottom_item {
  position: relative;
  top: 20px;
}

.mid_status.yellow_status {
  background-color: #ffe299;
}

.mid_status.green_status {
  background-color: #d5f291;
}

.mid_status.blue_status {
  background-color: #bfedff;
}

.mid_status.red_status {
  background-color: #ffbfc1;
}

.mid_status.gray_status {
  background-color: #e6e6e6;
}

.mid_status.yellow_status div:last-child {
  color: #996e00;
}

.mid_status.green_status div:last-child {
  color: #598000;
}

.mid_status.blue_status div:last-child {
  color: #086d99;
}

.mid_status.red_status div:last-child {
  color: #a6191e;
}

.mid_status.gray_status div:last-child {
  color: #000000;
}

.mid_status div:first-child {
  color: #000000;
  background-color: #ffffff;
  padding: 0px 10px;
  border-radius: 6px;
}

.flex_picture_section {
  display: grid;
  grid-template-columns: repeat(auto-fill, 54px);
  grid-auto-flow: row;
  margin-bottom: 8px;
  grid-gap: 6px;
}

.flex_picture_section .picture_demo {
  width: 54px;
  height: 54px;
}

.popup_layout_2_column {
  position: relative;
  box-sizing: border-box;
  display: grid;
  height: 100%;
  grid-template-columns: 256px auto;
  grid-gap: 8px;
}

.popup_layout_2_column .left_section {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  padding: 8px;
  position: relative;
}
.popup_layout_2_column
  .right_section
  .height_for_scroll_table_with_grade_status {
  position: absolute;
  height: calc(100% - 32px - 8px);
  margin-top: 8px;
}
.popup_layout_2_column .right_section .height_for_table_with_grade_status {
  position: relative;
  height: calc(100% - 32px - 8px);
  margin-top: 8px;
}

.left_section > .t14 {
  line-height: 21px;
  margin-bottom: 6px;
}

.grade_status_block_grid {
  display: grid;
  grid-template-columns: auto auto;
  height: 32px;
  background-color: #ffffff;
  border-radius: 6px;
  box-sizing: border-box;
  border: 1px solid #d9d9d9;
  padding: 2px 12px;
  align-items: center;
  grid-column-gap: 6px;
}

.grade_status_block_grid .flex_status_right {
  display: flex;
  flex-direction: row;
  gap: 12px;
  justify-content: flex-end;
}

.popup_layout_2_column .left_section .flex_plo_section {
  height: calc(100% - 44px - 254px - 14px);
  position: absolute;
  padding-right: 8px;
}

.flex_list_item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 6px;
  padding-top: 6px;
  border-bottom: 1px solid #e6e6e6;
  cursor: pointer;
}
.flex_list_item .text_with_morepage {
  display: grid;
  grid-template-columns: auto 6px;
  grid-gap: 12px;
  /* padding-right: 12px; */
}
.flex_list_item .text_with_flex_status_right {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 8px;
}

.text_with_flex_status_right .flex_status_right {
  display: flex;
  flex-direction: row;
  gap: 12px;
  justify-content: flex-end;
}

.text_with_morepage .more_page_icon {
  position: relative;
  top: 5px;
}

.flex_list_item .progress_bar {
  width: 100%;
  box-sizing: border-box;
  height: 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background-color: #e6e6e6;
  border-radius: 6px;
}

.flex_list_item .progress_bar_progress {
  width: 70%;
  height: 12px;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background-color: #6cc5eb;
  border-radius: 6px;
  position: absolute;
  top: 0px;
}

.flex_progress_with_text {
  display: grid;
  grid-template-columns: 120px auto;
  gap: 6px;
  align-items: center;
}
.flex_progress_with_text .progress_bar {
  width: 120px;
  box-sizing: border-box;
  position: relative;
  height: 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background-color: #e6e6e6;
  border-radius: 6px;
}
.flex_progress_with_text .progress_bar_progress {
  width: 70%;
  height: 12px;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background-color: #6cc5eb;
  border-radius: 6px;
  position: absolute;
  top: -1px;
  left: -1px;
}

.setting_banner_box {
  display: grid;
  height: 98px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  background-color: #1d4f91;
  margin: 12px 0px;
  grid-template-rows: 50% 50%;
  padding: 12px;
  box-sizing: border-box;
}

.setting_banner_1 {
  display: grid;
  grid-template-columns: auto 120px;
}

.banner_1 {
  /* width: 114px;
    height: 32px; */
  width: 169px;
  height: 32px;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("/assets/ex_banner_1-2544f2cf.svg");
}

.setting_banner_2 {
  display: grid;
  grid-template-columns: 36px auto 238px;
  align-items: center;
  gap: 6px;
}

.banner_2 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/assets/ex_logo-0b813950.svg");
}

.banner_txt {
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
}

.show_logo_box {
  width: 128px;
  height: 128px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  background-image: url("/assets/ex_logo-0b813950.svg");
  background-repeat: no-repeat;
  position: relative;
  box-sizing: border-box;
  margin: 3px 0px;
}

.show_banner_box {
  /* width: 460px;
    height: 64px; */
  width: 480px;
  height: 90px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  background-image: url("/assets/ex_banner_1-2544f2cf.svg");
  background-repeat: no-repeat;
  position: relative;
  padding: 16px 0px 16px 16px;
  background-color: #1d4f91;
  box-sizing: border-box;
  background-position: left;
  background-position-x: 16px;
  margin: 3px 0px;
}

.show_banner_box.banner_img {
  background-image: url("/assets/ex_banner_2-54544f66.svg");
  background-position: center;
}

.del_box {
  width: 36px;
  height: 36px;
  border-radius: 0px 6px 0px 6px;
  background-color: #ffbfc1;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background-image: url("/assets/bin_red_2-c3514fdd.svg");
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  right: -1px;
  top: -1px;
}

.preview_box {
  width: 456px;
  height: 375px;
  padding: 0px 42px 0px 42px;
  box-sizing: border-box;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(
    0.25turn,
    rgba(0, 0, 0, 0.05),
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.05)
  );
  border-image-slice: 1;
  margin-top: 24px;
}

/* radio in data 2 column */
.flex_radio_section {
  display: flex;
}
.flex_radio_section.radio_1line {
  flex-direction: row;
  gap: 8px;
}
.flex_radio_section.radio_1line.gap20 {
  flex-direction: row;
  gap: 20px;
}
.flex_radio_section.radio_1line.gap18 {
  gap: 18px;
}
.flex_radio_section.radio_2line {
  flex-direction: column;
  gap: 4px;
}
.flex_radio_section.radio_2line.gap8 {
  gap: 8px;
}
.flex_radio_section.radio_free {
  display: grid;
  grid-template-columns: repeat(auto-fill, 62px);
  grid-auto-flow: row;
  row-gap: 12px;
  column-gap: 18px;
  padding: 10px 0px;
}
.flex_radio_section.radio_free.mini_popup_size {
  width: 384px;
}
.flex_radio_section .radio_section {
  display: grid;
  grid-template-columns: 18px auto;
  grid-gap: 4px;
  position: relative;
  align-items: center;
}
.flex_radio_section .radio_section .radio_btn .checkmark_radio {
  top: calc(50% - (18px / 2));
  left: 0px;
}
.data_two_column_popup_icon .icon_section {
  width: 100%;
  height: 100%;
  position: relative;
}
.data_two_column_popup_icon .icon_section .icon_with_data_column {
  position: absolute;
  top: -8px;
}
/* -------- */

/* checkbox in data 2 column */
.flex_checkbox_section {
  display: flex;
}
.flex_checkbox_section.checkbox_1line {
  flex-direction: row;
  gap: 8px;
}
.flex_checkbox_section.checkbox_1line.gap18 {
  gap: 18px;
}
.flex_checkbox_section.checkbox_1line.gap20 {
  gap: 20px;
}
.flex_checkbox_section.checkbox_2line {
  flex-direction: column;
  gap: 4px;
}
.flex_checkbox_section.checkbox_free {
  display: grid;
  grid-template-columns: repeat(auto-fill, 62px);
  grid-auto-flow: row;
  row-gap: 12px;
  column-gap: 18px;
  padding: 10px 0px;
}
.flex_checkbox_section.checkbox_free.mini_popup_size {
  width: 384px;
}
.flex_checkbox_section .checkbox_section {
  display: grid;
  width: fit-content;
  margin: 0px;
  grid-template-columns: 18px auto;
  grid-gap: 4px;
  position: relative;
  align-items: center;
}
.flex_checkbox_section .checkbox_section .checkbox_box .checkbox_square_black {
  top: calc(50% - (18px / 2));
  left: 0px;
}

/* date input in data 2 column */
.flex_input_date {
  display: flex;
  flex-direction: row;
  gap: 18px;
}
.flex_input_date .input_date_section {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.flex_input_date .input_date_section .input_section,
.flex_input_date .input_date_section .date_input {
  width: 84px;
}

.flex_popup_layout_2_column {
  box-sizing: border-box;
  display: flex;
  height: 100%;
  flex-direction: row;
  gap: 8px;
}

.flex_popup_layout_2_column .left_section {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  flex-basis: 256px;
  padding: 8px;
  box-sizing: border-box;
}

.flex_popup_layout_2_column .right_section {
  display: block;
  width: 634px;
  flex-basis: 634px;
  box-sizing: border-box;
}

.flex_popup_layout_2_column
  .right_section
  .height_for_scroll_table_with_grade_status {
  /* position: absolute; */
  height: calc(100% - 32px - 8px);
  width: 100%;
  margin-top: 8px;
}

/* table scrollข้าง scrollลง fix header left bottom */
.fixed_table {
  border-spacing: 0px;
  table-layout: fixed;
  width: fit-content;
}
.fixed_table th {
  background-color: #bfedff;
  color: #086d99;
  font-size: 14px;
  font-weight: bold;
  width: 108px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 6px 12px;
  white-space: nowrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  text-align: center;
}
.fixed_table td {
  background-color: #ffffff;
  font-size: 14px;
  border: 1px solid #cccccc;
  border-top: none;
  padding: 6px 12px;
  white-space: nowrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  text-align: center;
}
.fixed_table td > span:hover {
  text-decoration: underline;
  cursor: pointer;
}
.fixed_table .fixed_table_summary td > span:hover {
  text-decoration: none;
  cursor: unset;
}
.fixed_table th:first-child,
.fixed_table td:first-child {
  position: sticky;
  left: 0px;
  z-index: 100;
}
.stick_top {
  position: sticky;
  top: 0px;
  z-index: 101;
}
.fixed_table td:first-child {
  border-left: none;
  border-right: none;
  text-align: left;
}
.fixed_table td:last-child {
  border-right: none;
}
.fixed_table tr:first-child th:nth-child(2) {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.fixed_table tr:first-child th:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.fixed_table .fixed_table_head_300px {
  background-color: #6cc5eb;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  width: 300px;
  padding-left: 12px;
  border-radius: 6px;
  text-align: left;
}
.fixed_table .fixed_table_summary {
  position: sticky;
  bottom: 0px;
  z-index: 101;
}
.fixed_table .fixed_table_summary td {
  background-color: #f7f7f7;
  border: 1px solid #cccccc;
}
.fixed_table .fixed_table_summary td:first-child {
  border-radius: 6px;
}
.fixed_table .fixed_table_summary td:nth-child(2) {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.fixed_table .fixed_table_summary td:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* dummy block for empty grid cell */
.dummy_block_36 {
  width: 36px;
}
.code_color {
  width: 20px;
  height: 20px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  margin-right: 4px;
  box-sizing: border-box;
}
.code_color.nomrg {
  margin: 0px;
}

.color_pick_box input[type="color"] {
  border: none;
  border-color: transparent;
  padding: 0;
}
.popup_box_full .color_pick_box input[type="color"]::-webkit-color-swatch {
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}
.color_pick_box input[type="color"]::-moz-color-swatch {
  border: none;
}

.color_pick_box input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color_pick_box input[type="color"]::-webkit-color-swatch,
.color_pick_box input[type="color"] {
  border: none;
  border-radius: 6px;
}

.code_color.size32 {
  width: 32px;
  height: 32px;
}

.list_table_layer .profile_data_title.with_left_pad {
  padding-left: 12px;
}

.popup_layout_2_column .left_section .plo_graph_block {
  width: 238px;
  height: 234px;
  display: flex;
  justify-content: center;
}
.flex_popup_layout_2_column .left_section .plo_graph_block {
  height: 234px;
  width: 236px;
  position: relative;
  left: -5px;
  margin-top: 8px;
  margin-bottom: 12px;
}

/* sync */
.sync_data_list {
  display: grid;
  grid-template-columns: 22px 60px auto;
  column-gap: 8px;
  min-height: 38px;
  align-items: center;
}
.sync_data_list .sync_status {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #cccccc;
  box-sizing: border-box;
}

.sync_data_list .sync_status.sync {
  background-color: #6cc5eb;
  border: 2px solid rgba(0, 0, 0, 0.15);
}
.sync_data_list .sync_status.sync > img {
  animation: syncing 3s infinite;
}
@keyframes syncing {
  100% {
    transform: rotate(360deg);
  }
}

.sync_data_list .sync_status.complete {
  background-color: #97cc1c;
  border: 2px solid rgba(0, 0, 0, 0.15);
}

.input_section_mini_grade {
  width: fit-content;
}

.color_pick_section {
  margin-top: 8px;
  margin-bottom: 12px;
  display: grid;
  grid-gap: 6px;
  grid-template-columns: repeat(auto-fill, 32px);
}

.color_pick_section .add_more_color {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
}

/* fixed preview size popup */
.popup_box_preview {
  padding: 0px;
  background-color: #f7f7f7;
}
.popup_box_preview .UI_titleBar_normal {
  width: 100%;
}
.popup_box_preview .UI_contentView {
  height: 100%;
  width: 100%;
}
.popup_box_preview .UI_contentView_titleBar_normal {
  height: calc(100% - 44px);
  height: calc(100% - (44px + env(safe-area-inset-top)));
}
.popup_box_preview .UI_contentView_titleBar_top_profile_form {
  height: calc(100% - 124px);
  height: calc(100% - (124px + env(safe-area-inset-top)));
}
.popup_box_preview .UI_footerBar_with_BTN {
  width: 100%;
  position: absolute;
}
.table_red_header {
  background-color: #ffbfc1;
}

.table_gray_box {
  background-color: #c2c9cc;
}

.table_gray_box input,
.table_gray_box select {
  background: transparent !important;
}

.table_red_row td {
  background-color: #ffe6e6;
}

.table_red_row td input,
.table_red_row td select {
  background: transparent !important;
}

.table_gray_row td,
.gray_table_row {
  background-color: #dfe3e6;
}

.table_gray_row td input,
.table_gray_row td select {
  background: transparent !important;
}

.tarea_h98 {
  height: 98px;
  resize: none;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding-left: 12px;
  font-size: 14px;
  transition: 0.2s;
}


/* move the stylesheet_2_2.css to this file */
.icon_size_8x14{
  width: 8px;
  height: 14px;
}

.icon_size_9x8{
  width: 9px;
  height: 8px;
}

.icon_size_12x10{
  width: 12px;
  height: 10px;
}

.icon_size_16x16{
  width: 16px;
  height: 16px;
  background-size: 16px;
}

.icon_size_20x20{
  width: 20px;
  height: 20px;
  background-size: 20px;
}

.icon_size_24x24{
  width: 24px;
  height: 24px;
}

.icon_size_28x28{
  width: 28px;
  height: 28px;
}

.icon_size_32x32{
  width: 32px;
  height: 32px;
}

.icon_size_34x34{
  width: 34px;
  height: 34px;
}

.icon_size_36x36{
  width: 36px;
  height: 36px;
}

.icon_size_38x38{
  width: 38px;
  height: 38px;
}

.icon_size_44x44{
  width: 44px;
  height: 44px;
}

.icon_size_50x50{
  width: 50px;
  height: 50px;
}

.icon_size_51x51{
  width: 51px;
  height: 51px;
}
.icon_size_51x51.left_icon{
  top:calc(50% - (51px / 2))
}

.icon_size_56x56{
  width: 56px;
  height: 56px;
}

.btn_block_fit_btn .icon_size_20x20{
  position: relative;
  top: 4px;
  margin-right: 4px;
}
.btn_block_fit_txt .icon_size_20x20{
  position: relative;
  top: 5px;
  margin-right: 2px;
}

.main_display_section_2_0 .display_section_12_padding{
  padding: 12px;
}

.display_list_section_block_full_no_margin {
  width: 100%;
  position: relative;
  background-color: #FFFFFF;
  border-radius: 6px;
  box-sizing: border-box;
  border: 1px solid #CCCCCC;
  padding: 7px 12px 7px 12px;
  margin: 0px;
  color: #000000;
}

.display_list_section_block_full_no_margin.display_list_section_block_normal{
  height: 52px;
}

.display_list_section_block_normal .list_block_txt_1{
  margin-bottom: 0px;
}

.display_list_section_block_full_no_margin.display_list_section_block_narrow{
  height: 32px;
  line-height: 32px;
  padding: 6px 12px 6px 12px;
  margin-top: 8px;
}

.display_list_section_block_full_no_margin.dash_border{
  border-style: dashed;
}

.display_list_section_block_full_no_margin .inner_list_section{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.text_1line .block_txt_section_1line{
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
  line-height: 36px;
}

.display_list_section_block_narrow .block_txt_section_1line{
  line-height: 20px;
}

.scroll_section{
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.scroll_section.scroll_section_with_1list_tabMenu{
  height: calc(100% - 58px - 12px - 36px - 12px);
}

.table_no_data_text{
  width: 100%;
  height: 39px;
  font-size: 14px;
  text-align: center;
}

.information_icon_data_column_popup{
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  position: absolute;
  position: relative;
  top: 3px;
}

.popup_box_full .data_two_column .input_section_period,.data_two_column .input_section_period{
  display: flex;
  flex-direction: row;
  gap: 6px;
}

.data_two_column .input_section_period .input_group{
  width: 184px;
}

.popup_box_full .data_two_column .input_section_period .input_group{
  width: 124px;
}

.popup_box_full .data_two_column .right_info{
  position: absolute;
  right: 0px;
}

.data_two_column .input_section_period .period_space{
  align-items: center; 
  display: flex;
}

.expand_item{
  grid-column: 1/4;
}

.expand_item .line_divide{
  width: 100%;
  height: 1px;
  background-color: #D9D9D9;
  border-radius: 0.5px;
  position: relative;
  margin-top: 8px;
  margin-bottom: 12px;
}

.popup_layout_2col{
  height: 100%;
  display: grid;
  grid-template-columns: 312px auto;
}

.popup_layout_2col .left_flex_section_popup{
  padding-right: 12px;
  border-right: 1px solid #CCCCCC;
  display: flex;
  flex-direction: column;
}

.popup_layout_2col .right_grid_section_popup{
  display: grid;
  grid-template-rows: calc(50% - 4px) calc(50% - 4px);
  grid-row-gap: 8px;
  padding-left: 12px;
}

.right_grid_section_popup > div{
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  padding: 8px;
}

.popup_layout_2col .checkbox_list_grid{
  display: grid;
  grid-template-columns: 42px auto auto 8px 18px;
}

.checkbox_list_grid > div, .checkbox_list_grid > span{
  border-bottom: 1px solid #D9D9D9;
}

.checkbox_list_grid .checkbox_section{
  height: 18px;
  top: 10px;
  left: 12px;
  position: relative;
}

.checkbox_list_grid .tag_status{
  float: right;
  position: relative;
  top: 8px;
}

.color_picker{
  width: 18px;
  height: 18px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  position: relative;
  top: 10px;
  left: 0px;
  box-sizing: border-box;
  background-color: #000000;
}

.flex_table_list .color_picker{
  width: 34px;
  height: 22px;
  top: unset;
}

.color_picker.blue{
  background-color: #6CC5EB;
}
.color_picker.green{
  background-color: #97CC1C;
}
.color_picker.yellow{
  background-color: #F4BD31;
}
.color_picker.pink{
  background-color: #f431a9;
}
.color_picker.red{
  background-color: #b92d34;
}
.color_picker.purple{
  background-color: #7927a8;
}
.color_picker.orange{
  background-color: #ce933a;
}

.h41{
  line-height: 41px;
}

.h38{
  line-height: 38px;
}

.grade_data_area{
  height: calc(100% - 28px);
  position: relative;
  top: 8px;
}

.line_divide_table{
  border-left: 1px solid rgba(255, 255, 255, 0.5);
}

.list_text_right{
  justify-content: flex-end;
}

/* login_page */

.log_in_section{
    width: 100vw;
    height: 100%;
    position: fixed;
    right: 0px;
    top: 0px;
}

.btn_login_transparency{
    width: 100%;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    margin-bottom: 8px;
    cursor: pointer;
}

.login_footer{
    width: 100%;
    position: absolute;
    bottom: 0px;
    display: grid;
    grid-template-columns: 30% 40% 30%;
    padding: 0px 14px 14px 14px;
    box-sizing: border-box;
}

.line_separate_login{
    width: 100%;
    height: 1px;
    background-color: #CCCCCC;
    margin-bottom: 18px;
}

.login_footer .vernity_logo{
    width: 68px;
    height: 14px;
    text-align: left;
}

.login_footer .vertion_text{
    font-size: 10px;
    text-align: center;
}

.login_footer .coppy_right_text{
    font-size: 10px;
    text-align: right;
}

.log_in_section .log_in_section_middle{
    width: 280px;
    text-align: center;
    position: absolute;
    top: calc(50% - (408px / 2));
    left: calc(50% - (280px / 2));
}

.logo_login_btn{
    vertical-align: -1px;
    margin-right: 2px;
}

.rexx_icon_full{
    margin-bottom: 18px;
}

.log_in_section .input_signin{
    width: 280px;
    height: 36px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid #D9D9D9;
    padding-left: 12px;
    font-size: 14px;
    transition: 0.2s;
    transition: 0.2s;
}

.log_in_section .view_password_icon{
    width: 28px;
    position: absolute;
    right: 5px;
    top: 130px;
    cursor: pointer;
}

.log_in_section .information_icon{
    width: 38px;
    position: absolute;
    top: 14px;
    right: 14px;
}

.log_in_section_middle .input_space{
    width: 280px;
    margin-bottom: 8px;
}
.log_in_section_middle .input_space::placeholder{
    color: #D9D9D9;
}

.profile_box{
    width: 100%;
    height: 128px;
}

.main_menu_profile .profile_box{
    width: 50%;
    height: 42px;
    position: absolute;
    right: 64px;
    top: 12px;
    border-right: 1px solid #CCCCCC;
    padding-right: 12px;
}

.profile_img {
    width: 128px;
    height: 128px;
    box-sizing: border-box;
    border-radius:50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    position: relative;
    background-image: url("../img/main/avatar_default.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    top: calc(50% - (128px/2));
    float: left;
}

.main_menu_profile .profile_img{
    width: 42px;
    height: 42px;
    top: calc(50% - (42px/2));
    float: right;
    margin-right: 18px;
}

.profile_detail{
    width: calc(100% - 128px - 24px);
    height: 71px;
    float: left;
    box-sizing: border-box;
    margin-left: 12px;
    top: calc(50% - (71px/2));
    position: relative;
}

.main_menu_profile .profile_detail{
    width: calc(100% - 80px - 68px);
    height: 100%;
    top: unset;
    padding-top: 6px;
    padding-bottom: 6px;
    margin-right: 8px;
    float: right;
}

.main_menu_profile .profile_detail div{
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.main_menu_profile .more_menu_icon{
    width: 10px;
    height: 6px;
    right: 0px;
    position: absolute;
    top: calc(50% - (6px/2));
    cursor: pointer;
}

.main_display_section_2_0 {
    width: calc(100vw - 78px);
    height: 100%;
    position: fixed;
    right: 0px;
    top: 0px;
}


.main_display_section_2_0 .main_title_bar {
    width: calc(100vw - 78px);
    height: 47px;
    position: fixed;
    top: 0px;
    right: 0px;
    line-height: 47px;
    /* transition: 0.1s; */
}

.main_display_section_2_0 .main_title_bar .title_section {
    height: 100%;
    width: fit-content;
    padding-left: 24px;
    cursor: pointer;
    display: flex;
    gap: 24px;
}

.main_display_section_2_0 .main_title_bar .title_txt {
    width: fit-content;
    font-size: 16px;
    font-weight: bold;
    color: var(--color-black);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.main_display_section_2_0 .main_title_bar .title_txt:first-child {
    margin-left: 0px;
}

.main_display_section_2_0 .main_title_bar .line_divide {
    width: calc(100% - 12px - 12px);
    height: 1px;
    background-color: #D9D9D9;
    border-radius: 0.5px;
    left: 12px;
    bottom: 0px;
    position: absolute;
}

.fix_setting_icon_sb{
  height: 46px;
  position: relative;
  top: 4px;
  left: -2px;
}

/* Back navigation icon shown in the title bar when :back_path is set */
.main_display_section_2_0 .main_title_bar .back_icon {
  width: 20px;
  height: 20px;
  align-self: center;
  flex-shrink: 0;
}

.content_box_flow {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    border-radius: inherit;
}