/* @import "popup.css";
@import "pin.css";
@import "font/NotoSansThai/NotoSansThai.css";
@import "font/NotoSansDisplay/NotoSansDisplay.css"; */

/* ====== 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: 100vh;
    width: 100vw;
    margin: 0px;
    padding: 0px;
    font-family: -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif;
    position: relative;
    color: #000000;
    background-color: #F7F7F7;
}

input, section, textarea, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* font-family: 'NotoSansDisplay', 'NotoSansThai'; */
}

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

.content_box_flow {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

.content_box_flow_x {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

.safe_area_content_navigation_huge_special_section {
    padding-top: 38px;
}

.padding_top_safe {
    padding-top: env(safe-area-inset-top);
}

.padding_bottom_safe {
    padding-bottom: env(safe-area-inset-bottom);
}

.padding_top_title_bar_safe {
    padding-top: 44px;
    padding-top: calc(44px + env(safe-area-inset-top));
}

.padding_bottom_footer_bar_safe {
    padding-bottom: 50px;
    padding-bottom: calc(50px + env(safe-area-inset-bottom));
}

table, th, td {
    padding: 0px;
    border: none;
    border-collapse: collapse;
    border-spacing: 0px;
}

/* unvisited link */
a:link {
    color: inherit;
    text-decoration: inherit;
}

/* visited link */
a:visited {
    color: inherit;
    text-decoration: inherit;
}

/* mouse over link */
a:hover {
    color: inherit;
    text-decoration: inherit;
}

/* selected link */
a:active {
    color: inherit;
    text-decoration: inherit;
}

/* preset color */
.backgroundColor_blue {
    background-color: #6CC5EB !important;
}

.color_blue {
    color: #6CC5EB !important;
}

.backgroundColor_green {
    background-color: #97CC1C !important;
}

.color_green {
    color: #97CC1C !important;
}

.backgroundColor_yellow {
    background-color: #F4BD31 !important;
}

.color_yellow {
    color: #F4BD31 !important;
}

.backgroundColor_red {
    background-color: #E8555A !important;
}

.color_red {
    color: #E8555A !important;
}

.backgroundColor_gray {
    background-color: #999999 !important;
}

.color_gray {
    color: #999999 !important;
}

.backgroundColor_gray_2 {
    background-color: rgb(26 26 26 / 25%) !important;
}

.backgroundColor_gray_3 {
    background-color: rgb(0 0 0 / 25%) !important;
}

.backgroundColor_gray_4 {
    background-color: #e6e6e6 !important;
}

.backgroundColor_white {
    background-color: #FFFFFF !important;
}

.color_white {
    color: #FFFFFF !important;
}

.txt_bold {
    font-weight: bold !important;
}

input::placeholder, textarea::placeholder {
    color: #CCCCCC;
}

.color_black {
    color: #000000 !important;
}

/* ====== For Custom Coding ====== */

.popup_bg {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    z-index: 1000;
}

.popupSection {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2000;
}

.UI_popupBox_full {
    width: calc(100% + 16px + 16px);
    height: 100%;
    height: calc(100% - env(safe-area-inset-top));
    border-radius: 12px 12px 0px 0px;
    background-color: #F7F7F7;
    position: absolute;
    bottom: 0px;
    left: -16px;
    z-index: 2000;
}

.UI_popupBox_L {
    width: calc(100%);
    border-radius: 12px;
    box-sizing: border-box;
    padding: 12px;
    background-color: #F7F7F7;
    position: absolute;
    top: 64px;
    z-index: 2000;
}

.UI_popupBox_S {
    width: 172px;
    border-radius: 12px;
    box-sizing: border-box;
    background-color: #F7F7F7;
    position: absolute;
    top: 164px;
    right: 0px;
    z-index: 2000;
}

.UI_popupBox_S_monthView {
    top: 400px;
}

.UI_popupBox_S .actionBTN {
    height: 42px;
}

.UI_popupBox_S .actionBTN .action_BTN_icon {
    width: 36px;
    height: 36px;
    position: absolute;
    top: 3px;
    left: 4px;
    background-image: url(../img/icon/example_actionBTN.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

#goTo_today_icon {
    background-image: url(../img/icon/todayView_action_BTN.svg);
}

#monthView_icon {
    background-image: url(../img/icon/monthView_action_BTN.svg);
}

.UI_popupBox_S .actionBTN .t1 {
    font-size: 18px;
    width: calc(100% - 44px);
    height: 100%;
    position: absolute;
    left: 44px;
    box-sizing: border-box;
    padding-top: 10px;
    border-bottom: 1px solid #E6E6E6;
}

.UI_popupBox_S .actionBTN:last-child .t1 {
    border-bottom: 1px solid rgba(0, 0, 0, 0);
}

.UI_popupBox_full .UI_titleBar {
    width: 100%;
    height: 44px;
    position: absolute;
    top: 0px;
    left: 0px;
}

.UI_popupBox_full .UI_titleBar .BTN_backBTN {
    width: 92px;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

.UI_popupBox_full .UI_titleBar .BTN_backBTN .back_BTN_icon {
    width: 12px;
    height: 20px;
    position: absolute;
    left: 10px;
    top: 12px;
    background-image: url(../img/icon/BTN_back_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_popupBox_full .UI_titleBar .BTN_backBTN .tb1 {
    font-size: 18px;
    position: absolute;
    top: 11px;
    left: 28px;
}

.UI_popupBox_full .UI_titleBar .BTN_cancelBTN .tb1 {
    font-size: 18px;
    position: absolute;
    top: 11px;
    left: 16px;
}

.UI_popupBox_full .UI_titleBar .action_section {
    width: 92px;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
}

.action_text {
    height: 100%;
    position: absolute;
    box-sizing: border-box;
    right: 16px;
    padding-top: 11px;
    font-size: 18px;
}

.UI_popupBox_full .UI_titleBar .t1 {
    font-size: 18px;
    font-weight: bold;
    width: calc(100% - 92px - 92px);
    text-align: center;
    position: absolute;
    left: 92px;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

.UI_popupBox_full .Section_contentBoxDisplay {
    width: 100%;
    height: calc(100% - 44px);
    position: absolute;
    top: 44px;
    box-sizing: border-box;
}

.UI_popupBox_full .Section_contentBoxDisplay_result {
    width: 100%;
    height: calc(100% - 36px);
    position: absolute;
    bottom: 0px;
}

.UI_popupBox_full .Section_contentBoxDisplay_result .content_box_flow {
    padding: 0px 16px;
}

.UI_popupBox_full .Section_contentBoxDisplay_with_search{
    height: calc(100% - 44px - 36px - 12px);
    top: calc(44px + 36px + 12px);
}

.UI_popupBox_full .Section_contentBoxDisplay_with_tabMenu{
    height: calc(100% - 44px - 40px - 12px);
    top: calc(44px + 40px + 12px);
}

.UI_popupBox_full .Section_contentBoxDisplay_with_tabMenu_search{
    height: calc(100% - 44px - 40px - 12px - 36px - 12px);
    top: calc(44px + 40px + 12px + 36px + 12px);
}

.UI_popupBox_full .Section_contentBoxDisplay_with_footer{
    padding-bottom: 84px;
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

.content_box_flow_padding {
    padding: 0px 16px;
    padding-bottom: 32px;
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
    box-sizing: border-box;
}

.UI_maxWidth {
    width: 100%;
    height: 100%;
    max-width: 680px;
    box-sizing: border-box;
    margin: auto;
    padding: 0px 16px;
}

.UI_maxWidth_height_80_per {
    width: 100%;
    height: 80%;
    max-width: 680px;
    box-sizing: border-box;
    margin: auto;
    padding: 0px 16px;
}

.UI_maxWidth_no_padding{
    padding: 0px;
}

.UI_titleBar_normal {
    height: 44px;
    height: calc(44px + env(safe-area-inset-top));
    padding-top: 0px;
    padding-top: calc(0px + env(safe-area-inset-top));
    width: 100vw;
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    z-index: 10;
    background-color: #6CC5EB;
}

.UI_titleBar_normal_white{
    border-bottom: 1px solid #D9D9D9;
    background-color: #F7F7F7;
}

.UI_titleBar_profileCover{
    height: calc(44px + 48px);
    height: calc(44px + 48px + env(safe-area-inset-top));
}

.UI_titleBar_profileCover_port{
    height: calc(44px + 48px);
    height: calc(44px + 48px + env(safe-area-inset-top));
    position: relative;
    z-index: 1;
    background-image: url(../img/bg_port.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_titleBar_normal .leftSection , .UI_titleBar .leftSection{
    width: 84px;
    height: 100%;
    position: absolute;
    left: 0px;
    z-index:100;
}

.UI_titleBar_normal .rightSection , .UI_titleBar .rightSection {
    width: 84px;
    height: 100%;
    position: absolute;
    right: 0px;
    z-index:100;
}

.UI_titleBar_normal .rightSectionBig {
    width: 180px;
}

.middleSection {
    width: calc(100% - 84px - 84px);
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    position: absolute;
    left: 84px;
    line-height: 44px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index:100;
}


.UI_titleBar_normal .BTN_back_icon , .UI_titleBar .BTN_back_icon{
    width: 12px;
    height: 20px;
    position: absolute;
    left: 12px;
    top: 12px;
    background-image: url(../img/icon/BTN_back_icon_normal.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_titleBar .BTN_back_icon{
    background-image: url(../img/icon/BTN_back_icon_black.svg);
}

.UI_titleBar_normal .BTN_back_black_icon{
    background-image: url(../img/icon/BTN_back_icon_black.svg);
}

.UI_titleBar_normal .BTN_back_txt , .UI_titleBar .BTN_back_txt{
    font-size: 18px;
    color: #FFFFFF;
    position: absolute;
    left: 30px;
    top: 11px;
}

.UI_titleBar_normal .BTN_cancle_txt , .UI_titleBar .BTN_cancle_txt , .UI_popupBox_full .BTN_cancle_txt{
    font-size: 18px;
    color: #FFFFFF;
    position: absolute;
    left: 16px;
    top: 11px;
}

.UI_titleBar_normal .action_txt {
    font-size: 18px;
    color: #FFFFFF;
    position: absolute;
    right: 12px;
    top: 11px;
}

.UI_titleBar .action_txt {
    font-size: 18px;
    color: #FFFFFF;
    position: absolute;
    right: 12px;
    top: 11px;
}


.UI_titleBar_normal .action_icon , .UI_titleBar .action_icon{
    width: 36px;
    height: 36px;
    background-image: url(../img/icon/action_BTN_info.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    right: 8px;
    top: 4px;
}

.UI_titleBar .action_icon{
    background-image: url(../img/icon/action_BTN_info_black.svg);
}

.UI_titleBar_normal .action_black_icon{
    background-image: url(../img/icon/action_BTN_info_black.svg);
}

.UI_titleBar_normal .qr_icon{
    background-image: url(../img/icon/qr_icon_white.svg);
}

.UI_titleBar .middleSection , .UI_titleBar .BTN_back_txt , .UI_titleBar .BTN_cancle_txt , .UI_titleBar .action_txt{
    color: #000000;
}

.UI_titleBar_normal_with_tab_search .UI_searchSection_with_twoOption{
    top: calc(44px + 12px + 40px + 12px);
}

.UI_titleBar_normal_with_tab_search .UI_searchSection_with_oneOption_right{
    top: calc(44px + 12px + 40px + 12px);
}

.UI_titleBar_huge {
    height: 125px;
    height: calc(125px + env(safe-area-inset-top));
    padding-top: 0px;
    padding-top: calc(0px + env(safe-area-inset-top));
    width: 100vw;
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    z-index: 10;

    background-color: #6CC5EB;

    transition: 0.3s;
}

.UI_titleBar_huge_ultra {
    height: 388px;
    height: calc(388px + env(safe-area-inset-top));
    padding-top: 0px;
    padding-top: calc(0px + env(safe-area-inset-top));
    width: 100vw;
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    z-index: 10;

    background-color: #6CC5EB;

    transition: 0.3s;
}


.UI_titleBar_huge .rexx_badge_logo_black {
    height: 20px;
    width: 82px;
    position: absolute;
    bottom: 43px;
    background-image: url(../img/rexx_logo_v2.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
}

.UI_titleBar_huge .rexx_bot_header_animation {
    height: 98px;
    position: absolute;
    right: -16px;
    bottom: 26px;
}

.UI_titleBar_huge_ultra .rexx_bot_header_animation {
    bottom: 288px;
}

.UI_titleBar_huge .ht1 {
    position: absolute;
    top: 18px;
    font-size: 34px;
    font-weight: bold;
}

.UI_titleBar_huge .date_picker_BTN {
    font-size: 14px;
    width: fit-content;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #000000;
    border-radius: 8px;
    padding: 4px 6px;
    box-sizing: border-box;
    position: absolute;
    top: 62px;
}

.UI_titleBar_huge .date_picker_BTN .date_picker_more_icon {
    width: 14px;
    height: 14px;
    top: 0px;
    display: inline-block;
    vertical-align: -2px;
    margin-left: 2px;
    background-image: url(../img/icon/date_picker_more_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_titleBar_special {
    width: 100%;
    height: 52px;
    border-radius: 12px;
    background-color: #FFFFFF;
    position: absolute;
    bottom: calc(-52px / 2);
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
}

.UI_titleBar_myProgress {
    height: 213px;
    height: calc(213px + env(safe-area-inset-top));
}

.UI_titleBar_Login{
    height: 56px;
    height: calc(56px + env(safe-area-inset-top));
    background-color: unset;
}

.UI_titleBar_Login .BTN_back_icon{
    top: calc(50% - 20px/2);
}

.UI_titleBar_Login .BTN_back_txt{
    top: unset;
    line-height: 56px;
    color: #000000;
}

.UI_titleBar_subTitle{
    height: calc(44px + 32px);
    height: calc(44px + 32px + env(safe-area-inset-top));
}

.UI_titleBar_subTitle .UI_searchSection_with_twoOption , .UI_titleBar_subTitle .UI_searchSection_with_oneOption_right{
    top: calc(44px + 32px + 16px);
}

.UI_titleBar_subTitle .leftSection , .UI_titleBar_subTitle .rightSection{
    height: 44px;
}

.UI_titleBar_subTitle .middleSection{
    height: 44px;
    box-sizing: border-box;
}

.avatar_profile {
    background-image: url(../img/element/avatar.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.uni_icon {
    background-image: url(../img/uni_tu.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}


.toastx_box {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    box-sizing: border-box;
    position: absolute;
    top: calc(50% - (42px / 2));
    left: 8px;
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.toastx_success {
    background-image: url(../img/icon/toastx_success_icon.svg);
}

.toastx_wrong {
    background-image: url(../img/icon/toastx_wrong_icon.svg);
}

.toastx_warning {
    background-image: url(../img/icon/toastx_warning_icon.svg);
}

.toastx_attention {
    background-image: url(../img/icon/toastx_attention_icon.svg);
}

.toastx_delete {
    background-image: url(../img/icon/toastx_delete_icon.svg);
}

.toastx_cleared {
    background-image: url(../img/icon/toastx_clear_icon.svg);
}

.toastx_summit {
    background-image: url(../img/icon/toastx_submit_icon.svg);
}

.toastx_duplicate {
    background-image: url(../img/icon/toastx_duplicate_icon.svg);
}

.toastx_save {
    background-image: url(../img/icon/toastx_save_icon.svg);
}

.toastx_change_to_draft {
    background-image: url(../img/icon/toastx_change_to_draft_icon.svg);
}

.UI_titleBar_special .avatar_profile , .fieldSection .avatar_profile , .displayText_box .avatar_profile {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    position: absolute;
    top: calc(50% - (42px / 2));
    left: 8px;
}

.UI_titleBar_special .avatar_profile_2{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    position: absolute;
    top: 5px;
    left: 8px;
}

.UI_titleBar_special .uni_profile{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    position: absolute;
    top: 23px;
    left: 26px;
}

.fieldSection .avatar_profile_with_checkBox{
    left: 54px;
}

.UI_titleBar_special .t1 {
    font-size: 18px;
    font-weight: bold;
    position: absolute;
    top: 6px;
    left: 62px;
}

.UI_titleBar_special .t2 {
    font-size: 12px;
    position: absolute;
    bottom: 8px;
    left: 62px;
}

.UI_titleBar_special .setting_icon {
    height: 38px;
    width: 38px;
    position: absolute;
    right: 8px;
    top: calc(50% - (38px / 2));
    background-image: url(../img/icon/setting_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_titleBar_special .setting_icon.switch_icon{
    background-image: url(../img/switch_acc.svg);
}

.UI_contentView {
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0px;
    z-index: 0;
    box-sizing: border-box;
}

.UI_contentView_titleBar_normal {
    height: calc(100vh - 44px);
    height: calc(100vh - (44px + env(safe-area-inset-top)));
    top: 44px;
    top: calc(44px + env(safe-area-inset-top));
}

.UI_contentView_titleBar_profile {
    height: calc(100vh - 108px);
    height: calc(100vh - (108px + env(safe-area-inset-top)));
    top: 108px;
    top: calc(108px + env(safe-area-inset-top));
}

.UI_contentView_titleBar_huge {
    height: calc(100vh - 125px);
    height: calc(100vh - (125px + env(safe-area-inset-top)));
    top: 125px;
    top: calc(125px + env(safe-area-inset-top));
}

.UI_contentView_titleBar_huge_with_search {
    height: calc(100vh - 125px);
    height: calc(100vh - (125px + env(safe-area-inset-top)));
    top: 125px;
    top: calc(125px + env(safe-area-inset-top));
    transition: 0.3s;
}

.UI_contentView_titleBar_huge_ultra {
    height: calc(100vh - 388px);
    height: calc(100vh - (388px + env(safe-area-inset-top)));
    top: 388px;
    top: calc(388px + env(safe-area-inset-top));
    transition: 0.3s;
}

.UI_contentView_titleBar_myProgress {
    height: calc(100vh - 213px);
    height: calc(100vh - (213px + env(safe-area-inset-top)));
    top: 213px;
    top: calc(213px + env(safe-area-inset-top));
    transition: 0.3s;
}

.UI_contentView_titleBar_normal_subTitle {
    height: calc(100vh - (44px + 32px));
    height: calc(100vh - (44px + 32px + env(safe-area-inset-top)));
    top: calc(44px + 32px);
    top: calc(44px + 32px + env(safe-area-inset-top));
}

.UI_contentView_profileCover {
    z-index: 11;
}

.UI_contentView_footerBar {
    padding-bottom: 52px;
    padding-bottom: calc(52px + env(safe-area-inset-bottom));
}

.UI_contentView_footerBar_with_BTN {
    padding-bottom: 84px;
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

.UI_contentView_footerBar_Pin {
    padding-bottom: 119px;
    padding-bottom: calc(119px + env(safe-area-inset-bottom));
}

.UI_contentView_titleBar_special .content_box_flow{
    padding-top: 38px;
}

.UI_contentView_titleBar_huge_with_search .content_box_flow{
    padding-top: 74px;
}

.UI_contentView_titleBar_normal_with_search .content_box_flow{
    padding-top: 52px;
}

.UI_contentView_titleBar_normal_with_tab_search .content_box_flow{
    padding-top: calc(52px + 12px + 36px)
}

.UI_contentView_titleBar_normal_with_tab .content_box_flow{
    padding-top: calc(52px + 12px)
}

.UI_contentView_titleBar_search_subTitle .content_box_flow{
    padding-top: 52px;
}

.UI_contentView_titleBar_search_huge .content_box_flow{
    padding-top: 54px;
}

.spaceAdded_16{
    height: 16px;
    width: 100%;
}

.UI_contentView .bended_radius_UI {
    width: 100%;
    height: 12px;
    background-color: #6CC5EB;
    position: absolute;
    top: 0px;
    z-index: 2;
}

.UI_contentView .bended_radius_UI .box_foreground {
    width: 100%;
    height: 100%;
    border-radius: 12px 12px 0px 0px;
    background-color: #F7F7F7;
}

.UI_contentView .bended_radius_UI .gradient_bended_16 {
    position: absolute;
    top: 12px;
    height: 16px;
    width: 100%;
    background-image: linear-gradient(rgba(247, 247, 247 ,1), rgba(247, 247, 247 ,0));
}

.UI_contentView .bended_radius_UI_list_select{
    top: 52px;
}

.UI_contentView .gradient_bended_XL {
    width: 100%;
    height: calc(62px);
    position: absolute;
    top: 12px;
    background-color: #F7F7F7;
}

.UI_contentView .gradient_bended_XL_16 {
    width: 100%;
    height: calc(16px);
    position: absolute;
    top: calc(12px + 62px);
    background-image: linear-gradient(rgba(247, 247, 247 ,1), rgba(247, 247, 247 ,0));
}

.UI_contentView_titleBar_huge_ultra .gradient_bended_XL {
    height: calc(38px);
}

.UI_contentView .gradient_bended_XL_16 {
    width: 100%;
    height: calc(16px);
    position: absolute;
    top: calc(12px + 62px);
    background-image: linear-gradient(rgba(247, 247, 247 ,1), rgba(247, 247, 247 ,0));
}

.UI_contentView_titleBar_huge_ultra .gradient_bended_XL_16 {
    top: calc(12px + 38px);
}

.UI_contentView .gradient_bended_L {
    width: 100%;
    height: calc(40px);
    position: absolute;
    top: 12px;
    background-color: #F7F7F7;
}

.UI_contentView .gradient_bended_L_16 {
    width: 100%;
    height: calc(16px);
    position: absolute;
    top: calc(12px + 40px);
    background-image: linear-gradient(rgba(247, 247, 247 ,1), rgba(247, 247, 247 ,0));
}

.UI_contentView .gradient_bended_2XL {
    width: 100%;
    height: calc(12px + 40px + 36px);
    position: absolute;
    top: 12px;
    background-color: #F7F7F7;
}

.UI_contentView .gradient_bended_2XL_16 {
    width: 100%;
    height: calc(16px);
    position: absolute;
    top: calc(12px + 76px + 12px);
    background-image: linear-gradient(rgba(247, 247, 247 ,1), rgba(247, 247, 247 ,0));
}

.UI_contentView_footer_space{
    width: 100%;
    height: 32px;
    height: calc(32px + env(safe-area-inset-bottom));
}

.UI_searchSection {
    width: 100%;
    height: 36px;
    box-sizing: border-box;
    position: relative;
}

.UI_searchSection_full_normal{
    width: 100%;
    height: 36px;
    box-sizing: border-box;
    position: absolute;
    top: calc(44px + 16px);
}
 
.UI_searchSection_with_moreOption {
    width: 100%;
    height: 36px;
    box-sizing: border-box;
    position: absolute;
    bottom: -74px;
}

.UI_titleBar_huge_ultra .UI_searchSection_with_moreOption {
    bottom: -48px;
}

.UI_searchSection_with_moreOption .UI_searchSection {
    width: calc(100% - 44px);
}

.UI_searchSection_with_moreOption .moreOption_BTN {
    width: 36px;
    height: 36px;
    position: absolute;
    top: 0px;
    right: 0px;
    background-image: url(../img/icon/moreOption_BTN.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_searchSection_with_twoOption,.UI_searchSection_with_oneOption_right,.UI_searchSection_with_oneOption_left{
    width: 100%;
    height: 36px;
    box-sizing: border-box;
    position: absolute;
    top:calc(44px + 16px);
}

.UI_searchSection_with_tabMenu{
    top: calc(44px + 40px + 16px + 8px);
}

.UI_searchSection_with_twoOption .UI_searchSection{
    width: calc(100% - 44px - 44px);
    position: relative;
    left: calc(50% - ((100% - 88px)/2));
}

.UI_searchSection_with_oneOption_right .UI_searchSection{
    width: calc(100% - 44px);
    position: relative;
    left: 0px;
}

.UI_searchSection_with_oneOption_left .UI_searchSection{
    width: calc(100% - 44px);
    position: absolute;
    right: 0px;
}


.UI_searchSection_with_twoOption .leftOption_BTN , .UI_searchSection_with_oneOption_left .leftOption_BTN{
    width: 36px;
    height: 36px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-image: url(../img/icon/filterOptionBTN.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_searchSection_with_twoOption .rightOption_BTN , .UI_searchSection_with_oneOption_right .rightOption_BTN{
    width: 36px;
    height: 36px;
    position: absolute;
    top: 0px;
    right: 0px;
    background-image: url(../img/icon/sortOptionBTN.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_searchSection_popup{
    top:calc(44px + 12px);
    padding: 0px 16px;
}

.optionStatus{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #E8555A;
    position: absolute;
    right: 0px;
}

.popupSection .UI_popupBox_full .Section_contentBoxDisplay .UI_searchSection {
    padding: 0px 16px;
}

.UI_searchSection .UI_searchBox {
    width: 100%;
    height: 100%;
    border: none;
    background-color: #E6E6E6;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 16px;
    padding-left: 32px;
}

.UI_searchSection .UI_searchBox span {
    line-height: 36px;
    color: #666666;
}

.UI_searchSection .inputSearch_box {
    width: 100%;
    height: 100%;
    border: none;
    background-color: #E6E6E6;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 16px;
    padding-left: 32px;
}

.UI_searchSection .inputSearch_box::placeholder{
    color: #999999;
}

.UI_searchSection .search_searchBox_icon {
    position: absolute;
    height: 16px;
    width: 16px;
    left: 10px;
    top: calc(50% - (16px / 2));
    background-image: url(../img/icon/search_searchBox_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_searchSection .scanQR_icon {
    position: absolute;
    height: 36px;
    width: 36px;
    right: 8px;
    top: calc(50% - (36px / 2));
    background-image: url(../img/icon/scanQR_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_searchSection .clear_text_inputBox_icon {
    position: absolute;
    height: 36px;
    width: 36px;
    right: 8px;
    top: calc(50% - (36px / 2));
    background-image: url(../img/icon/clear_text_inputBox_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_tabMenu_box{
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    position: absolute;
    top: calc(44px + 12px);
    background-color: #E6E6E6;
    border-radius: 22px;
    padding: 4px;
}

.UI_tabMenu{
    width: calc(50% - (3px/2));
    height: 32px;
    text-align: center;
    box-sizing: border-box;
    border-radius: 18px;
    float: left;
    font-size: 16px;
    color: #000000;
    font-weight: bold;
}

.UI_tabMenu_3tab{
    width: calc((100%/3) - (3px/2));
}

.UI_tabMenu_select{
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.UI_tabMenu_select_shadow{
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.16);
}

.UI_tabMenu:first-child{
    margin-right: 3px;
}

.UI_tabMenu .t16b{
    font-size: 16px;
    color: #000000;
    font-weight: bold;
    line-height: 30px;
}

.UI_listSelect_box{
    width: 100%;
    height: 52px;
    line-height: 52px;
    background-color: #6CC5EB;
    box-sizing: border-box;
    position: absolute;
    top: 44px;
    z-index: 1;
}

.UI_listSelect_box .t18{
    font-size: 18px;
    color: #FFFFFF;
    text-align: center;
}

.UI_headerBar_split {
    width: 100%;
    height: 46px;
    box-sizing: border-box;
    padding-bottom: 8px;
}

.UI_headerBar_split .t1 {
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    bottom: 0px;
    left: 0px;
}

.UI_headerBar_split .t2 {
    font-size: 14px;
    color: #666666;
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.UI_contentView_mini {
    width: 100%;
    height: 168px;
}

.UI_contentView_medium {
    width: 100%;
    height: 210px;
}

.UI_listItem_standard {
    width: 100%;
    height: 52px;
    border-radius: 12px;
    background-color: #FFFFFF;
    box-sizing: border-box;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 6px;
}

.UI_listItem_standard_3line{
    height: 66px;
    padding: 6px 0px;
}

.UI_listItem_standard:last-child {
    margin-bottom: 0px;
}

.UI_contentView_favMenu_scroll {
    width: calc(16px + 100% + 16px);
    margin-left: -16px;
    height: 116px;
}

.UI_contentView_favMenu_scroll .boxFade_left {
    height: 100%;
    width: 16px;
    background-image: linear-gradient(to right, rgba(247, 247, 247, 1), rgba(247, 247, 247, 0));
    position: absolute;
    left: 0px;
    top: 0px;
}

.UI_contentView_favMenu_scroll .boxFade_right {
    height: 100%;
    width: 16px;
    background-image: linear-gradient(to left, rgba(247, 247, 247, 1), rgba(247, 247, 247, 0));
    position: absolute;
    right: 0px;
    top: 0px;
}

.UI_contentView_favMenu_scroll .content_box_flow_x {
    padding-left: 16px;
    padding-right: 16px;
}

.UI_listItem_boxMenu {
    width: 72px;
    height: 106px;
    margin-right: 18px;
    display: inline-block;
    margin-top: 2px;
}

.UI_listItem_boxMenu:last-child {
    margin-right: 0px;
}

.UI_listItem_boxMenu .boxCircle_menuIcon {
    width: 72px;
    height: 72px;
    background-color: #E6E6E6;
    border-radius: 50%;
    position: absolute;
    top: 0px;
    left: 0px;
    box-sizing: border-box;
    padding: 19px;
}

.UI_listItem_boxMenu .boxCircle_menuIcon .menuIcon {
    height: 34px;
    width: 34px;
    background-image: url(../img/icon/temp_1_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_listItem_boxMenu .boxCircle_menuIcon .alltoolsIcon {
    background-image: url(../img/icon/alltoolIcon.svg);
}

.UI_listItem_boxMenu .boxCircle_menuIcon .helpdesk {
    background-image: url(../img/icon/call_center.svg);
}

.UI_listItem_boxMenu .boxCircle_menuIcon .myCourseIcon {
    background-image: url(../img/icon/mycourseIcon.svg);
}

.UI_listItem_boxMenu .boxCircle_menuIcon .logbookIcon {
    background-image: url(../img/icon/logbookIcon.svg);
}

.UI_listItem_boxMenu .boxCircle_menuIcon .activitylogIcon {
    background-image: url(../img/icon/activitylogIcon.svg);
}

.UI_listItem_boxMenu .boxCircle_menuIcon .epaIcon {
    background-image: url(../img/icon/epaIcon.svg);
}

.UI_listItem_boxMenu .t1 {
    font-size: 12px;
    line-height: 14px;
    inline-size: 100%;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 78px;
    white-space: normal;
}

.UI_listItem_standard .noti_icon {
    height: 34px;
    width: 34px;
    position: absolute;
    left: 12px;
    top: calc(50% - (34px / 2));
    background-image: url(../img/icon/noti_icon_ex.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_listItem_standard .noti_icon_2 {
    height: 34px;
    width: 34px;
    position: absolute;
    left: 12px;
    top: calc(50% - (34px / 2));
    background-image: url(../img/icon/temp_2_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_listItem_standard .t1 {
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    left: 58px;
    top: 8px;
}

.UI_listItem_standard .t2 {
    font-size: 12px;
    width: calc(100% - 58px - 12px);
    position: absolute;
    left: 58px;
    bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.UI_listItem_standard .t3 {
    font-size: 12px;
    color: #999999;
    position: absolute;
    right: 12px;
    top: 9px;
}

.UI_listItem_standard_3line .t1{
    font-size: 14px;
    width: calc(100% - 58px - 12px - 50px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    top: unset;
}

.UI_listItem_standard_3line .t1_2{
    width: calc(100% - 58px - 12px);
    font-size: 12px;
    font-weight: bold;
    position: relative;
    left: 58px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.UI_listItem_standard_3line .t2{
    width: calc(100% - 58px - 12px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    bottom: unset;
}

.UI_listItem_standard .morePage_icon {
    width: 7px;
    height: 12px;
    position: absolute;
    right: 16px;
    top: 20px;
    background-image: url(../img/icon/morePage_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_listItem_selected{
    border: 2px solid #F4BD31;
}

.UI_footerBar {
    height: 52px;
    height: calc(52px + env(safe-area-inset-bottom));
    padding-bottom: 0px;
    padding-bottom: env(safe-area-inset-bottom);
    width: 100vw;
    background-color: #FFFFFF;
    position: absolute;
    bottom: 0px;
    box-sizing: border-box;
    border-top: 0.5px solid #E6E6E6;
}

.UI_footerBar .shadowFade {
    width: 100%;
    height: 6px;
    position: absolute;
    top: -6px;
    left: 0px;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0));
}

.UI_footerBar_with_BTN {
    height: 84px;
    height: calc(84px + env(safe-area-inset-bottom));
    padding-bottom: 0px;
    padding-bottom: env(safe-area-inset-bottom);
    width: 100vw;
    background-color: #FFFFFF;
    position: fixed;
    bottom: 0px;
    box-sizing: border-box;
    border-top: 0.5px solid #E6E6E6;
    border-radius: 24px 24px 0px 0px;
    box-shadow: 0px 0px 12px rgb(0 0 0 / 10%);
}

.UI_footerBar_with_BTN .BTN_group_section {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 16px;
}

.UI_footerBar_with_BTN .BTN_group_section .BTN_full {
    width: 100%;
    height: 52px;
    border-radius: 12px;
    box-sizing: border-box;
    background-color: #1A1A1A;
    color: #FFFFFF;
    font-size: 18px;
    text-align: center;
    padding-top: 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.UI_footerBar_with_BTN .BTN_group_section .BTN_half {
    width: calc(50% - 4px);
    height: 52px;
    border-radius: 12px;
    box-sizing: border-box;
    background-color: #1A1A1A;
    color: #FFFFFF;
    font-size: 18px;
    text-align: center;
    padding-top: 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: inline-block;
    margin-left: 8px;
}

.UI_footerBar_with_BTN .BTN_group_section .BTN_half:first-child {
    margin-left: 0px;
}

.UI_footerBar_with_moreBTN .BTN_group_section .BTN_half_first{
    margin-left: 0px;
}

.UI_footerBar_with_BTN .BTN_group_section .inline_icon_box {
    width: 18px;
    height: 18px;
    line-height: 18px;
    display: inline-block;
    margin-right: 2px;
}

.UI_footerBar_with_BTN .BTN_group_section .inline_icon {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 2px;
    background-image: url(../img/icon/example_inline_BTN_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_footerBar_with_BTN .BTN_group_section .bin_white_icon {
    width: 16px;
    height: 18px;
    position: absolute;
    top: 2px;
    background-image: url(../img/icon/BTN_inline_bin_white.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_footerBar_with_BTN .BTN_group_section .edit_white_icon {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 2px;
    left: -2px;
    background-image: url(../img/icon/BTN_inline_edit_white.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_footerBar_with_BTN .BTN_group_section .edit_white_icon {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 2px;
    left: -2px;
    background-image: url(../img/icon/BTN_inline_edit_white.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_footerBar_with_BTN .BTN_group_section .qr_white_icon {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 2px;
    left: -2px;
    background-image: url(../img/icon/BTN_inline_qr_white.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_footerBar_with_BTN .BTN_group_section .sent_white_icon {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 2px;
    left: -2px;
    background-image: url(../img/icon/BTN_inline_sent_white.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_footerBar_with_BTN .BTN_group_section .save_white_icon {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 2px;
    left: -2px;
    background-image: url(../img/icon/BTN_inline_save_white.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_footerBar_with_BTN .BTN_group_section .duplicate_white_icon {
    width: 15px;
    height: 18px;
    position: absolute;
    top: 2px;
    background-image: url(../img/icon/BTN_inline_duplicate_white.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_footerBar_with_BTN .BTN_group_section .comment_white_Icon {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 2px;
    left: -2px;
    background-image: url(../img/icon/BTN_inline_comment_white.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.fieldSectionBTN .BTNGroup .qr_white_icon {
    width: 18px;
    height: 18px;
    position: absolute;
    top: -2px;
    left: -2px;
    background-image: url(../img/icon/BTN_inline_qr_white.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.fieldSectionBTN .BTNGroup .sent_white_icon{
    width: 18px;
    height: 18px;
    position: absolute;
    top: -2px;
    left: -2px;
    background-image: url(../img/icon/BTN_inline_sent_white.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_footerBar_with_BTN_popup{
    max-width: 680px;
    z-index: 10000;
}

.UI_footerBar_with_BTN_h2{
    height: 119px;
}

.UI_footerBar_with_inputNum{
    height: 336px;
    height: calc(336px + env(safe-area-inset-bottom));
}

.UI_footerBar_with_moreBTN{
    height: unset;
    min-height: 80px;
    min-height: calc(80px + env(safe-area-inset-bottom));
}

.UI_footerBar_with_moreBTN .BTN_group_section{
    padding-bottom: 20px;
}

.UI_footerBar_with_moreBTN .BTN_group_section .BTN_full{
    height: 52px;
    line-height: 52px;
    padding-top: unset;
}

.UI_footerBar_with_moreBTN .BTN_group_section .BTN_full_first{
    margin-top: 24px;
}

.UI_footerBar_with_moreBTN .BTN_group_section .more_btn_box .BTN_full{
    margin-bottom: 6px;
}

.UI_footerBar_with_moreBTN .BTN_group_section .more_btn_box .BTN_full:last-child{
    margin-bottom: 0px;
}

.UI_footerBar_with_BTN .BTN_group_section .btn_txt1 {
    font-size: 18px;
    color: #000000;
    font-weight: bold;
    text-align: center;
    margin-bottom: 6px;
}

.UI_footerBar_with_BTN .BTN_group_section .btn_txt2 {
    font-size: 16px;
    color: #666666;
    text-align: center;
    margin-bottom: 24px;
}

.UI_footerBar_with_BTN .BTN_group_section .btn_txt3 {
    font-size: 16px;
    color: #E8555A;
    text-align: center;
    margin-bottom: 12px;
}

.UI_footerBar_with_moreBTN .BTN_group_section_btnTop{
    padding-top: 0px;
    padding-bottom: 0px;
}

.UI_footerBar_viewer {
    height: 57px;
    height: calc(57px + env(safe-area-inset-bottom));
    padding-bottom: 0px;
    padding-bottom: env(safe-area-inset-bottom);
    width: 100vw;
    background-color: #F7F7F7;
    position: absolute;
    bottom: 0px;
    box-sizing: border-box;
    border-top: 1px solid #D9D9D9;
}

.UI_footerBar_mainMenu {
    height: 57px;
    height: calc(57px + env(safe-area-inset-bottom));
    padding-bottom: 0px;
    padding-bottom: env(safe-area-inset-bottom);
    width: 100vw;
    background-color: #FFFFFF;
    position: absolute;
    bottom: 0px;
    box-sizing: border-box;
}

.fieldSectionBTN .BTNGroup .inline_icon_box {
    width: 18px;
    height: 18px;
    line-height: 18px;
    display: inline-block;
    margin-right: 2px;
}

.fieldSectionBTN .BTNGroup .inline_icon {
    width: 18px;
    height: 18px;
    position: absolute;
    background-image: url(../img/icon/add_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.fieldSectionBTN .BTNGroup .inline_icon_text {
    font-size: 18px;
    color: #FFFFFF;
    display: inline-block;
    vertical-align: 4px;
    margin-left: 6px;
}

.fieldSectionBTN .BTNGroup .google_icon {
    width: 18px;
    height: 18px;
    position: absolute;
    background-image: url(../img/icon/google_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    top: 2px;
}

.fieldSectionBTN .BTNGroup .apple_icon {
    width: 15px;
    height: 18px;
    position: absolute;
    background-image: url(../img/icon/apple_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    top: 1px;
}

.fieldSectionBTN .BTNGroup .BTN_full_curve{
    margin-bottom: 6px;
}

.fieldSectionBTN .BTNGroup .BTN_full_curve:last-child{
    margin-bottom: 0px;
}

.BTN_secondary {
    background-color: #FFFFFF !important;
    border: 1px solid #1A1A1A !important;
    color: #1A1A1A !important;
}

.BTN_red {
    background-color: #E8555A !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    color: #FFFFFF !important;
}

.BTN_disable {
    background-color: rgba(26, 26, 26, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
}

.UI_flex_menuSection {
    padding: 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.UI_flex_symmetrical {
    padding: 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.UI_flex_symmetrical_2 {
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* .UI_flex_symmetrical_2::after {
    content: " ";
    flex: auto;
} */

.UI_flex_menuSection .BTN_menuFooterItem {
    width: 48px;
    height: 50px;
    box-sizing: border-box;
    padding-top: 2px;
}

.calendarBox {
    width: 100%;
    height: 272px;
    background-color: #FFFFFF;
    position: absolute;
    border-radius: 12px;
    bottom: 16px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    padding: 0px 4px;
    transition: 0.3s;
}

.calendarBox_hide {
    height: 52px;
    transition: 0.3s;
}

.calendarBox .calendar_dayWeek_bar {
    width: 100%;
    height: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #E6E6E6;
    display: flex;
    justify-content: space-between;
}

.calendarBox .calendar_dayWeek_bar div {
    width: calc((100% - (4px / 6)) / 7);
    height: 100%;
    text-align: center;
    box-sizing: border-box;
    padding-top: 3px;
    font-weight: bold;
    font-size: 10px;
    color: #000000;
}

.calendarBox .calendar_dayWeek_date {
    height: calc((100% - 20px) / 6);
    width: 100%;
    border-bottom: 1px solid #E6E6E6;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}

.calendarBox .calendar_dayWeek_date .date_box {
    width: calc((100% - (4px / 6)) / 7);
    height: calc(100% - 4px - 4px);
    background-color: #FFFFFF;
    margin-top: 4px;
    border-radius: 10px;
}

.calendarBox .calendar_dayWeek_date .date_box_selected {
    background-color: #6CC5EB;
}

.calendarBox .calendar_dayWeek_date .date_box .date_txt {
    width: 100%;
    font-size: 18px;
    text-align: center;
    position: absolute;
    top: 2px;
}

.calendarBox .calendar_dayWeek_date .date_box_selected .date_txt {
    color: #FFFFFF;
}

.calendarBox .calendar_dayWeek_date .date_box .date_noti {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    bottom: 2px;
    left: calc(50% - (8px / 2));
    background-color: #6CC5EB;
}

.calendarBox .calendar_dayWeek_date .date_box_selected .date_noti {
    background-color: #FFFFFF;
}

.calendarBox .calendar_dayWeek_date:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0);
}

.calendarBox .calendar_dayWeek_bar div:first-child {
    color: #CCCCCC;
}

.calendarBox .calendar_dayWeek_bar div:last-child {
    color: #CCCCCC;
}

.BTN_menuFooterItem .iconItem {
    width: 100%;
    height: 32px;
    background-image: url(../img/icon/home_footer_iconItem.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

#iconItem_home {
    background-image: url(../img/icon/home_footer_iconItem_dis.svg);
}

#iconItem_home_selected {
    background-image: url(../img/icon/home_footer_iconItem.svg);
}

#iconItem_calendar {
    background-image: url(../img/icon/calendar_footer_iconItem_dis.svg);
}

#iconItem_calendar_selected {
    background-image: url(../img/icon/calendar_footer_iconItem.svg);
}

.BTN_menuFooterItem .t1 {
    font-size: 10px;
    text-align: center;
    width: 100%;
    color: #CCCCCC;
}

.BTN_menuFooterItem .t1_selected {
    color: #000000;
}

.txtBox_t1 {
    width: 100%;
    font-size: 14px;
    box-sizing: border-box;
    color: #999999;
    padding: 18px 0px 12px 0px;
}

.txtBox_t1 b {
    color: #000000;
}

.txtBox_t1_no_padding{
    padding: 0px;
}

.txtBox_t1_mid{
    text-align: center;
}

.txtBox_t1_btm{
    position: absolute;
    bottom: 0px;
    width: calc(100% - 18px - 12px);
}

.txtBox_t1.t_g{
    color: #666666;
}

.txtBox_t2 {
    width: 100%;
    font-size: 12px;
    box-sizing: border-box;
    color: #999999;
    padding: 8px 0px 18px 0px;
}

.txtBox_t2.txt_mid{
    text-align: center;
    z-index: 101;
    position: relative;
}

.txtBox_t2_with_onlyTop {
    width: 100%;
    font-size: 12px;
    box-sizing: border-box;
    color: #999999;
    padding: 8px 0px 0px 0px;
}

.txtBox_t3 {
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    box-sizing: border-box;
    color: #000000;
    padding: 19px 0px 8px 0px;
}

.txtBox_t3_with_txtRight{
    width: 100%;
    box-sizing: border-box;
    padding: 19px 0px 8px 0px;
    display: inline-block;
}

.txtBox_t3_with_txtRight .t16b{
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    float: left;
}

.txtBox_t3_with_txtRight .t14{
    font-size: 14px;
    color: #666666;
    float: right;
}

.txtBox_t3_with_txtRight .status_slide_box{
    width: fit-content;
    float: right;
    margin-top: calc(3px/2);
}

.txtBox_t4 {
    width: 100%;
    font-size: 14px;
    text-align: center;
    box-sizing: border-box;
    color: #666666;
    padding: 16px;
}

.txtBox_t5_mid {
    width: 100%;
    font-size: 18px;
    box-sizing: border-box;
    color: #FFFFFF;
    padding: 48px 0px 28px 0px;
    font-weight: bold;
    text-align: center;
}

.txtBox_subTitle {
    width: 100%;
    font-size: 18px;
    box-sizing: border-box;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 44px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.txtBox_t14{
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    box-sizing: border-box;
    color: #000000;
    padding: 12px 0px 9px 12px;
}

.txtBox_t5 {
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    box-sizing: border-box;
    color: #000000;
    padding: 0px 0px 16px 0px;
}

.fieldSection {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
    background-color: #FFFFFF;
    margin-top: 12px;
}

.fieldSection_gray{
    background-color: #E6E6E6;
}

.fieldSection_head_gray{
    border: 1px solid rgba(0, 0, 0, 0.15);;
    background-color: #E6E6E6;
    border-radius: 2px;
}

.fieldSection_passcode {
    width: 100%;
    border-radius: 0px;
    box-shadow: none;
    background-color: none;
    background: none;
    margin-top: 12px;
}

.fieldSectionBTN {
    width: 100%;
    margin-top: 12px;
}

.fieldSection_head_gray{
    width: 100%;
    box-shadow: 0px 0px 6px rgb(0 0 0 / 5%);
    background-color: #E6E6E6;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}

.fieldSection_moreCheckbox{
    padding: 8px 0px;
}

.fieldSectionBTN .BTNGroup .BTN_full {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    border-radius: 6px;
    background-color: #1A1A1A;
    color: #FFFFFF;
    text-align: center;
    padding-top: 11px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.fieldSectionBTN .BTNGroup .BTN_half {
    width: calc(50% - 4px);
    height: 44px;
    box-sizing: border-box;
    border-radius: 6px;
    background-color: #1A1A1A;
    color: #FFFFFF;
    text-align: center;
    padding-top: 11px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: inline-block;
    margin-left: 8px;
}

.fieldSectionBTN .BTNGroup .BTN_full_curve {
    width: 100%;
    height: 52px;
    box-sizing: border-box;
    border-radius: 12px;
    background-color: #1A1A1A;
    color: #FFFFFF;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 13px;
    cursor: pointer;
}

.fieldSectionBTN .BTNGroup .BTN_full_mini {
    width: 100%;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: 6px;
    background-color: #1A1A1A;
    color: #FFFFFF;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.fieldSectionBTN .BTNGroup .BTN_half:first-child {
    margin-left: 0px;
}

.fieldSectionBTN .BTNGroup .BTN_no_mrg{
    margin-bottom: 0px;
}

.fieldSectionBTN .BTNGroup .BTN_full_transparent {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    text-align: center;
    padding-top: 11px;
}

.fieldSectionBTN .BTNGroup .BTN_icon_txt{
    padding-top: 9px;
}
.fieldSectionBTN .BTNGroup .BTN_icon_txt .t18{
    font-size: 18px;
    color: #FFFFFF;
}

.fieldSectionModule {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
    background-color: #FFFFFF;
    margin-top: 8px;
    box-sizing: border-box;
}

.fieldSectionModule:first-child{
    margin-top: 16px;
}

.fieldSectionModule.fieldSection_firstTop14:first-child{
    margin-top: 14px;
}

.fieldSectionModule_yellow{
    border: 2px solid #F4BD31;
}

.fieldSectionModule_red{
    border: 2px solid #E8555A;
}

.fieldSectionModule_green{
    border: 2px solid #97CC1C;
}

.fieldSectionModule_gray{
    border: 2px solid #F4BD31;
}

.fieldSectionModule .displayText_box .textSection_with_profile_status{
    padding-bottom: 0px;
}

.fieldSectionModule .displayText_box .textSection_with_status_profile{
    padding-top: 4px;
}

.fieldSection_first {
    margin-top: 0px !important; 
}

.fieldSection_firstTop18 {
    margin-top: 18px; 
}

.fieldSection_firstTop16 {
    margin-top: 16px; 
}

.fieldSection_firstTop14 {
    margin-top: 14px; 
}

.fieldSection_with_head_gray{
    margin-top: 6px;
    margin-bottom: 12px;
}

.fieldSection_firstTop6{
    margin-top: 6px;
}

.fieldSection_noneBg{
    box-shadow: none;
    background-color: unset;
}

.fieldSection_noneBg .displayText_box .textSection{
    margin-left: unset;
    border: none;
    padding: 9px 0px;
}

.inputBox {
    width: 100%;
    border-top: 1px solid #E6E6E6;
}

.inputBox:first-child {
    border-top: none;
}

.inputBox .input_box {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 12px;
    font-size: 16px;
    padding-left: 16px;
}

.inputBox .input_lable {
    width: 108px;
    height: 48px;
    display: inline-block;
    box-sizing: border-box;
    padding-left: 16px;
    padding-top: 15px;
}

.inputBox .input_box_with_lable {
    width: calc(100% - 108px);
    height: 48px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 12px;
    font-size: 16px;
    padding-left: 16px;
}

.inputBox .input_box_with_icon {
    width: calc(100% - 108px - 34px - 12px);
    height: 48px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 12px;
    font-size: 16px;
    padding-left: 16px;
}

.inputBox .select_box_with_lable {
    width: calc(100% - 108px - 16px);
    height: 48px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 12px;
    font-size: 16px;
    padding-left: 16px;
}

select,
select option {
  color: #000000;
}

select:invalid,
select option[value=""] {
  color: #BFBFBF;
}

.inputBox .input_box_passcode {
    width: 48px;
    height: 48px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 12px;
    font-size: 16px;
    text-align: center;
    background-color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
}

.inputBox .input_box::placeholder {
    color: #CCCCCC;
}

.inputBox .textarea_box{
    width: 100%;
    height: 256px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 12px;
    font-size: 16px;
    padding: 16px;
}

.inputBox .textarea_full_box{
    height: calc(100vh - 44px - 84px - 32px - 32px);
}

.inputBox .textarea_box_600px{
    height: 600px
}

.inputBox .textarea_box_128px{
    height: 128px;
}

.inputBox textarea{
    font-family: -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif;
    font-size: 16px;
}

.inputBox .seePassword_icon {
    width: 34px;
    height: 34px;
    background-image: url(../img/icon/seePassword_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    right: 8px;
    top: 7px;
}
.inputBox .not_seePassword_icon {
    width: 34px;
    height: 34px;
    background-image: url(../img/icon/not_show_password.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    right: 8px;
    top: 7px;
}

.inputBox .charCountingBar {
    width: 100%;
    height: 32px;
    border-top: 1px solid #E6E6E6;
}

.inputBox .charCountingBar .charCountingText {
    font-size: 14px;
    color: #999999;
    position: absolute;
    right: 12px;
    top: 8px;
}

.inputBox .charCountingBar .charCountingText .charCountingActiveText {
    color: #6CC5EB;
}

.inputBox .inputBox_date {
    width: 64px;
    height: 48px;
}

.inputBox .inputBox_month {
    width: calc(100% - 64px - 8px - 8px - 84px);
    height: 48px;
    position: absolute;
    top: 0px;
    left: calc(64px + 8px);
}

.inputBox .inputBox_year {
    width: 84px;
    height: 48px;
    position: absolute;
    top: 0px;
    right: 0px;
}

.inputBox .input_selectOption {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
    font-size: 16px;
    padding-left: 12px;
    color: #000000;
}

.inputBox .selectOption_icon {
    width: 12px;
    height: 7px;
    position: absolute;
    top: calc(50% - (7px / 2));
    right: 12px;
    background-image: url(../img/icon/selectOptione_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.inputBox .selectIcon {
    width: 12px;
    height: 7px;
    position: absolute;
    right: 16px;
    top: calc(50% - (7px/2));
    background-image: url(../img/icon/select_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.mediaBox{
    width: 100%;
    border-top: 1px solid #E6E6E6;
}

.mediaBox:first-child {
    border-top: none;
}

.mediaBox .media_box_img{
    width: calc((100% - (8px * 3)) / 4);
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    font-size: 16px;
    text-align: center;
    /* background-color: #6CC5EB; */
    border-radius: 12px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
    /* margin-right: 8px;
    margin-bottom: 8px; */
    aspect-ratio: 1/1;
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.mediaBox .media_box_img_full{
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    font-size: 16px;
    text-align: center;
    background-color: #6CC5EB;
    border-radius: 12px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
    /* margin-right: 8px;
    margin-bottom: 8px; */
    aspect-ratio: 1/1;
}

.mediaBox .media_box_img_preview{
    width: 100%;
    height: 248px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    font-size: 16px;
    text-align: center;
    background-color: #6CC5EB;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
    aspect-ratio: 1/1;
    position: absolute;
    top: calc((50% - (248px/2)) - 44px);
}

.mediaBox .media_box_img_preview_auto{
    width: 100%;
    height: 248px;
    box-sizing: border-box;
    font-size: 16px;
    text-align: center;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
    aspect-ratio: 1/1;
    position: absolute;
    background-image: url(../img/icon/filterOptionBTN.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.displayText_box .mediaBox_flex{
    border-top: none;
}

.displayText_box .mediaBox_flex .UI_flex_symmetrical_2{
    padding: 8px 0px 0px 0px;
    margin-bottom: 0px;
}

.displayText_box .mediaBox_flex .media_box_img{
    width: calc((100% - (8px * 2)) / 3);
    /* width: 102px; */
    height: 98px;
    margin-bottom: 0px;
    text-align: center;
    padding: 12px 0px;
    background-color: #E6E6E6;
    gap: 6px;
    border: none;
}

.displayText_box .mediaBox_flex_2box .media_box_img{
    width: calc((100% - (8px * 1)) / 2);
}

.displayText_box .mediaBox_flex_1box .media_box_img{
    width: 100%;
}

.displayText_box .mediaBox_flex .media_box_img .t12b{
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 6px;
}

.displayText_box .mediaBox_flex .media_box_img .t12{
    font-size: 12px;
    color: #000000;
    margin-bottom: 6px;
}

.displayText_box .mediaBox_flex .media_box_img .t28b{
    font-size: 28px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 6px;
}

.displayText_box .mediaBox_flex .media_box_img .t32b{
    font-size: 32px;
    font-weight: bold;
    color: #000000;
}

.displayText_box_line{
    border-bottom: 0.5px solid rgba(60, 60, 67, 0.29);
}

.displayText_box_line .textSection_with_selectInput{
    border-bottom: none;
}

.profileBox{
    width: 100%;
    border-top: 1px solid #E6E6E6;
    padding: 16px 0px;
}

.profileBox:first-child {
    border-top: none;
}

.fieldSection .profileBox .avatar_profile{
    width: 96px;
    height: 96px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    position: relative;
    top: calc(50% - (96px / 2));
    left: calc(50% - (96px / 2));
    cursor: pointer;
}

.fieldSection .profileBox .avatar_frame{
    width: 96px;
    height: 96px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    position: absolute;
    top: calc(50% - (96px / 2));
    left: calc(50% - (96px / 2));
    background-image: url(../img/element/avatar_frame.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
    cursor: pointer;
}


.displayText_box {
    width: 100%;
}

.displayText_box .textSection {
    width: calc(100% - 14px);
    box-sizing: border-box;
    padding: 8px 0px;
    padding-right: 12px;
    margin-left: 14px;
    border-bottom: 1px solid #E6E6E6;
}

.displayText_box .textSection_2{
    width: 100%;
    padding: 12px;
    margin-left: 0px;
}

.displayText_box .textSection_pd2 {
    padding: 15px 0px 12px 0px;
}


.displayText_box .textSection_fixHeight_onlyText {
    height: 52px;
    line-height: 52px;
    padding: 0px;
}

.displayText_box .textSection_with_toastx {
    width: calc(100% - 58px);
    margin-left: 58px;
    box-sizing: border-box;
    padding-right: 32px;
}


.displayText_box .textSection_2_with_subText{
    padding-bottom: 0px;
}

.displayText_box .textSection_with_selectInput {
    width: calc(100% - 50px);
    margin-left: calc(50px);
}

.displayText_box .textSection_with_selectInput_form {
    width: calc(100% - 50px);
    margin-left: calc(50px);
    padding-left: 0px;
    border-bottom: none;
}

.displayText_box .textSection_with_moreCheckbox {
    padding: 6px 0px;
}

.displayText_box .textSection_with_morePage {
    padding-right: 32px;
}

.displayText_box .textSection_with_morePage_optionIcon {
    padding-right: 65px;
}

.displayText_box .textSection_with_informationIcon {
    padding-right: 50px;
}

.displayText_box .textSection_with_deleteIcon_statusSection {
    padding-right: 116px;
}

.displayText_box .textSection_with_textRight{
    padding-right: 84px;
}

.displayText_box .textSection_with_statusBox_slideIcon{
    padding-right: 136px;
}

.displayText_box .textSection_with_status{
    padding-right: 82px;
}

.displayText_box .textSection_with_mainIcon {
    width: calc(100% - 58px);
    margin-left: 58px;
}

.displayText_box .textSection_with_mainIcon_selectOption {
    width: calc(100% - 96px);
    margin-left: 96px;
}

.displayText_box .textSection_with_circle_bullet {
    width: calc(100% - 30px);
    margin-left: 30px;
}

.displayText_box .textSection_with_checkBox_mainIcon {
    width: calc(100% - 104px);
    margin-left: 104px;
}

.displayText_box .textSection_with_fileIcon {
    width: calc(100% - 74px);
    margin-left: 74px;
}

.displayText_box .textSection_with_menuIcon {
    width: calc(100% - 58px);
    margin-left: 58px;
    padding-top: 17px;
    padding-bottom: 17px;
}

.displayText_box .textSection_with_switchBox {
    padding-right: 76px;
}

.displayText_box .textSection_with_text1{
    padding-top: 17px;
    padding-bottom: 17px;
}

.displayText_box .textSection_with_toastx .t16b{
    font-size: 16px;
    font-weight: bold;
    text-align: left;
}

.displayText_box .textSection_with_toastx .t14{
    font-size: 14px;
    text-align: left;
}

.displayText_box .textSection_with_reqireTube_tableScore {
    padding-top: 0px;
}

.displayText_box:last-child .textSection {
    border-bottom: none;
}

.displayText_box .textSection_with_moreInform{
    border-bottom: none;
}

.displayText_box .textSection .t16b_r {
    font-size: 16px;
    font-weight: bold;
    color: #E8555A;
}

.displayText_box .textSection .t16b_g {
    font-size: 16px;
    font-weight: bold;
    color: #97CC1C;
}

.displayText_box .textSection .t16b_y {
    font-size: 16px;
    font-weight: bold;
    color: #F4BD31;
}

.displayText_box .textSection .t12 {
    font-size: 12px;
    color: #999999;
}

.displayText_box .textSection .t12b {
    font-size: 12px;
    color: #000000;
    font-weight: bold;
}

.displayText_box .textSection .t12b_green {
    font-size: 12px;
    color: #598000;
    font-weight: bold;
}

.displayText_box .textSection .t12_b {
    font-size: 12px;
    color: #000000;
    font-weight: normal;
}

.displayText_box .textSection .t12_g {
    font-size: 12px;
    color: #666666;
}

.displayText_box .textSection .t12_g_nm{
    font-size: 12px;
    color: #666666;
    text-transform: none;
}

.displayText_box .textSection .t12_r {
    font-size: 12px;
    color: #E8555A;
}

.displayText_box .textSection .t12_b {
    font-size: 12px;
    color: #000000;
}

.displayText_box .textSection .t14 {
    font-size: 14px;
    color: #000000;
}

.displayText_box .textSection .t14b_b {
    font-size: 14px;
    font-weight: bold;
    color: #404040;
}

.displayText_box .textSection .t14_b {
    font-size: 14px;
    color: #404040;
}

.displayText_box .textSection .t14b {
    font-size: 14px;
    color: #000000;
    font-weight: bold;
}

.displayText_box .textSection .t14_g {
    font-size: 14px;
    color: #666666;
}

.displayText_box .textSection .t14_g2 {
    font-size: 14px;
    color: #999999;
}

.displayText_box .textSection .t14_g3 {
    font-size: 14px;
    color: #666666;
}

.displayText_box .textSection .t16 {
    font-size: 16px;
    color: #000000;
}

.displayText_box .t16_g{
    font-size: 16px;
    color: #999999;
}

.displayText_box .t16_g2{
    font-size: 16px;
    color: #666666;
}

.displayText_box .textSection .t16b {
    font-size: 16px;
    font-weight: bold;
    color: #000000;
}

.displayText_box .textSection .t16b_r{
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    color: #E8555A;
}

.displayText_box .textSection .t16b_grn{
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    color: #97CC1C;
}

.displayText_box .textSection .t18b {
    font-size: 18px;
    font-weight: bold;
    color: #000000;
}

.displayText_box .textSection div {
    margin-bottom: 4px;
}

.displayText_box .textSection div:last-child {
    margin-bottom: 0px;
}

.displayText_box .textSection .text_no_mrg {
    margin-bottom: 0px;
}

.displayText_box .textSection.textSection_no_mrg div{
    margin-bottom: 0px;
}

.displayText_box .textSection .more_text span{
    margin-right: 12px;
}

.displayText_box .textSection .more_text span:last-child{
    margin-right: 0px;
}

.displayText_box .textSection_with_textPhoto .t12{
    border-bottom: none;
}

.displayText_box .textSection .subText_Box{
    line-height: 14px;
}

.displayText_box .textSection .subText{
    padding-left: 40px;
}

.displayText_box .textSection_noBorder{
    border-bottom: none;
}

.displayText_box .txt_Right{
    text-align: right;
}

.displayText_box .t12_g {
    font-size: 12px;
    color: #666666;
}

.displayText_box .t16b {
    font-size: 16px;
    font-weight: bold;
    color: #000000;
}

.displayText_box .t18b {
    font-size: 18px;
    font-weight: bold;
    color: #000000;
}

.displayText_box .t24b {
    font-size: 24px;
    font-weight: bold;
    color: #000000;
}

.fieldSectionBTN .t18{
    font-size: 18px;
    color: #000000;
}

.displayText_box .textSection .txt1Line_box{
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    margin-bottom: 12px;
}

.displayText_box .txt1Line_box div{
    margin-bottom: 0px;
}


.displayText_box .morePage_icon {
    width: 7px;
    height: 12px;
    position: absolute;
    right: 16px;
    top: calc(50% - (12px / 2));
    background-image: url(../img/icon/morePage_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.displayText_box .morePage_icon_text1Line{
    top: 17px;
}

.displayText_box .mainIcon {
    height: 34px;
    width: 34px;
    position: absolute;
    left: 12px;
    top: calc(50% - (34px / 2));
    background-image: url(../img/icon/example_MainIcon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.displayText_box .optionIcon {
    width: 18px;
    height: 20px;
    position: absolute;
    right: 38px;
    top: calc(50% - (20px / 2));
    background-image: url(../img/icon/bin_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.displayText_box .informationIcon {
    width: 36px;
    height: 36px;
    position: absolute;
    right: 8px;
    top: calc(50% - (36px / 2));
    background-image: url(../img/icon/action_BTN_info_black.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.displayText_box .binIcon {
    width: 36px;
    height: 36px;
    position: absolute;
    right: 8px;
    top: calc(50% - (36px / 2));
    background-image: url(../img/icon/bin_red_Icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.displayText_box .deleteIcon {
    width: 28px;
    height: 28px;
    position: absolute;
    right: 8px;
    top: calc(50% - (28px / 2));
    background-image: url(../img/icon/deleteIcon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.displayText_box .commentIcon {
    width: 18px;
    height: 18px;
    position: absolute;
    right: 27px;
    top: 14px;
    background-image: url(../img/icon/comment_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.displayText_box .informationIcon_Right {
    width: 18px;
    height: 18px;
    position: absolute;
    right: 14px;
    top: 14px;
    background-image: url(../img/icon/information_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.displayText_box .arrowIcon {
    width: 14px;
    height: 18px;
    position: absolute;
    left: -12px;
    top: 14px;
    background-image: url(../img/icon/arrow_left.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.displayText_box .markComplete_Icon {
    width: 22px;
    height: 22px;
    position: absolute;
    left: -36px;
    top: 12px;
    background-image: url(../img/icon/mark_complete_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 101;
}

.displayText_box .storageIcon {
    height: 34px;
    width: 34px;
    position: absolute;
    left: 12px;
    top: calc(50% - (34px / 2));
    background-image: url(../img/icon/storage.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.displayText_box .storage_photo_Icon {
    height: 34px;
    width: 34px;
    position: absolute;
    left: 12px;
    top: calc(50% - (34px / 2));
    background-image: url(../img/storage_photo.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.displayText_box .storage_doc_Icon {
    height: 34px;
    width: 34px;
    position: absolute;
    left: 12px;
    top: calc(50% - (34px / 2));
    background-image: url(../img/storage_doc.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.displayText_box .rightIcon_first{
    right: 14px;
}

.displayText_box .leftIcon{
    left: 46px;
}

.displayText_box .workbaseIcon , .UI_listItem_boxMenu .boxCircle_menuIcon .workbaseIcon{
    background-image: url(../img/icon/workbaseIcon.svg);
}

.displayText_box .myprogramIcon , .UI_listItem_boxMenu .boxCircle_menuIcon .myprogramIcon{
    background-image: url(../img/icon/myprogramIcon.svg);
}

.displayText_box .mycoursesIcon , .UI_listItem_boxMenu .boxCircle_menuIcon .mycoursesIcon{
    background-image: url(../img/icon/mycoursesIcon.svg);
}

.displayText_box .myprogressIcon , .UI_listItem_boxMenu .boxCircle_menuIcon .myprogressIcon{
    background-image: url(../img/icon/myprogressIcon.svg);
}

.displayText_box .takeleaveIcon , .UI_listItem_boxMenu .boxCircle_menuIcon .takeleaveIcon{
    background-image: url(../img/icon/takeleaveIcon.svg);
}

.UI_listItem_boxMenu .boxCircle_menuIcon .classroomIcon{
    background-image: url(../img/icon/classroomIcon.svg);
}

.UI_listItem_boxMenu .boxCircle_menuIcon .timetableIcon{
    background-image: url(../img/icon/timetableIcon.svg);
}

.UI_listItem_boxMenu .boxCircle_menuIcon .attendanceIcon{
    background-image: url(../img/icon/attendanceIcon.svg);
}

.UI_listItem_boxMenu .boxCircle_menuIcon .progressIcon{
    background-image: url(../img/icon/progressIcon.svg);
}


.displayText_box .gpaBox {
    width: fit-content;
    height: 29px;
    border-radius: 6px;
    position: absolute;
    right: 35px;
    top: calc(50% - (29px / 2));
    font-size: 18px;
    font-weight: bold;
    color: #086D99;
    background-color: #BFEDFF;
    padding: 4px 6px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gpaBox.bg_green{
    background-color: #D5F291;
    color: #598000;
}

.gpaBox.bg_red{
    background-color: #FFBFC1;
    color: #A6191E;
}

.gpaBox.bg_gray{
    background-color: #E6E6E6;
    color: #000000;
}

.displayText_box .textRight{
    position: absolute;
    right: 18px;
    top: calc(50% - (16px/2));
}

.displayText_box .textRight_slideIcon{
    position: absolute;
    right: 36px;
    top: calc(50% - (18px/2));
}

.displayText_box .textRight24{
    position: absolute;
    right: 36px;
    top: calc(50% - (24px/2));
}

.displayText_box .textRight16{
    position: absolute;
    right: 32px;
    top: calc(50% - (18px/2));
}

.displayText_box .textRight16_2{
    position: absolute;
    right: 16px;
    top: calc(50% - (18px/2));
}

.displayText_box .markComplete_Icon_with_textSection {
    left: 12px;
    top: calc(50% - (22px/2));
}

.txtBox_t3_with_txtRight .markComplete_Icon {
    width: 22px;
    height: 22px;
    position: relative;
    left: -36px;
    top: calc(50% - (22px/2));
    background-image: url(../img/icon/mark_complete_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 100;
}

.displayText_box .markInComplete_Icon {
    width: 22px;
    height: 22px;
    position: absolute;
    left: -36px;
    top: 12px;
    background-image: url(../img/icon/mark_incomplete_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #F7F7F7;
    z-index: 100;
}

.displayText_box .markInComplete_white_Icon {
    width: 22px;
    height: 22px;
    position: absolute;
    left: 12px;
    top: calc(50% - (22px/2));
    background-image: url(../img/icon/mark_incomplete_white_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.txtBox_t3_with_txtRight .markInComplete_Icon {
    width: 22px;
    height: 22px;
    position: relative;
    left: -36px;
    top: calc(50% - (22px/2));
    background-image: url(../img/icon/mark_incomplete_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 100;
}

.displayText_box .sequence_line {
    width: 2px;
    position: absolute;
    left: -26px;
    top: 34px;
    background-image: linear-gradient(#97CC1C 100%, rgba(255,255,255,0) 0%);
    background-position: right;
    background-size: 2px 18px;
    background-repeat: repeat-y;
    height: 90px;
}

.sequence_content .sequence_line_complete_full_field {
    width: 2px;
    height: calc(100% - 24px);
    height: calc(100% - 24px - 50px);
    position: absolute;
    left: -26px;
    top: calc(24px);
    top: calc(50px + 24px);
    background-image: linear-gradient(#97CC1C 100%, rgba(255,255,255,0) 0%);
    background-position: right;
    background-size: 2px 18px;
    background-repeat: repeat-y;
    z-index: 99;
}

.sequence_content .sequence_line_waiting_full_field {
    width: 2px;
    height: calc(100% - 24px);
    height: calc(100% - 24px - 50px);
    position: absolute;
    left: -26px;
    top: calc(24px);
    top: calc(50px + 24px);
    background-image: linear-gradient(#CCCCCC 75%, rgba(255,255,255,0) 0%);
    background-position: right;
    background-size: 2px 18px;
    background-repeat: repeat-y;
    z-index: 98;
}

.displayText_box .slideUp_Icon {
    width: 32px;
    height: 32px;
    position: absolute;
    right: 8px;
    top: calc(50% - (32px / 2));
    background-image: url(../img/icon/slide_up.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.feedback_incorrect_icon {
    width: 29px;
    height: 32px;
    position: absolute;
    left: -16px;
    top: calc(50% - (32px/2));
    background-image: url(../img/icon/feedback_incorrect.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.feedback_correct_icon {
    width: 29px;
    height: 32px;
    position: absolute;
    left: -16px;
    top: calc(50% - (32px/2));
    background-image: url(../img/icon/feedback_correct.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.displayText_box .informationIcon_with_morePage{
    right: 29px;
}

.displayText_box_selectOption .mainIcon {
    left: 50px;
}

.evenTask_box {
    width: 100%;
    background-color: #FFFFFF;
    box-sizing: border-box;
    padding: 12px;
    border-radius: 12px;
    border: 2px solid #FFFFFF;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
    margin-top: 6px;
}

.evenTask_box:first-child , .evenTask_box_first{
    margin-top: 0px;
}

.evenTask_box .morePage_icon {
    width: 7px;
    height: 12px;
    position: absolute;
    right: 0px;
    top: calc(50% - (12px / 2));
    background-image: url(../img/icon/morePage_icon.svg);
}

.evenTask_box .morePage_with_moreInform{
    top: calc((50% - 22px) - (12px / 2));
} 

.displayText_box .fileIcon {
    height: 54px;
    width: 54px;
    position: absolute;
    left: 12px;
    top: calc(50% - (54px / 2));
    background-image: url(../img/icon/pdf_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.displayText_box .jpgIcon {
    height: 54px;
    width: 54px;
    position: absolute;
    left: 12px;
    top: calc(50% - (54px / 2));
    background-image: url(../img/icon/jpgIcon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.evenTask_box_green {
    border-color: #97CC1C;
}

.evenTask_box_yellow {
    border-color: #F4BD31;
}

.evenTask_box .textSection .t18b {
    font-size: 18px;
    font-weight: bold;
    color: #000000;
}

.evenTask_box .textSection .t14 {
    font-size: 14px;
    color: #000000;
}

.evenTask_box .textSection .t14b {
    font-size: 14px;
    font-weight: bold;
    color: #000000;
}

.evenTask_box .textSection .t14_g {
    font-size: 14px;
    color: #999999;
}

.evenTask_box .textSection .t12 {
    font-size: 12px;
    color: #000000;
}

.evenTask_box .textSection .t12_g {
    font-size: 12px;
    color: #666666;
}

.evenTask_box .textSection .status_text .t12_g {
    font-size: 12px;
    color: #666666;
    font-weight: normal;
}

.evenTask_box .textSection .status_text {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
    color: #000000;
}

.evenTask_box .textSection .status_text_green {
    color: #97CC1C;
}

.evenTask_box .textSection .status_text_yellow {
    color: #F4BD31;
}

.evenTask_box .textSection .status_text_red {
    color: #E8555A;
}

.evenTask_box .textSection .status_text_grey {
    color: #999999;
}

.evenTask_box .textSection .status_text .status_badge {
    padding: 2px 6px;
    font-size: 10px;
    display: inline-block;
    background-color: #000000;
    color: #FFFFFF;
    border-radius: 4px;
    vertical-align: 1px;
    margin-right: 4px;
}

.evenTask_box .textSection .status_text_green .status_badge {
    background-color: #97CC1C;
}

.evenTask_box .textSection .status_text_yellow .status_badge {
    background-color: #F4BD31;
}

.evenTask_box .textSection .status_text_red .status_badge {
    background-color: #E8555A;
}

.evenTask_box .textSection .status_text_grey .status_badge {
    background-color: #999999;
}

.evenTask_box .textSection div {
    margin-bottom: 2px;
}

.evenTask_box_with_checkBox .textSection{
    margin-left: 34px;
}

.evenTask_box_with_checkBox{
    padding: 10px 12px;
}

.evenTask_box_with_checkBox .container_fav{
    width: 34px;
}

.evenTask_box_with_checkBox .checkmark_fav{
    left: 0px;
}

.evenTask_box_with_more_inform{
    padding-bottom: 0px;
}

#logbook_mainIcon {
    background-image: url(../img/icon/logbook_mainIcon.svg);
}

#epa_mainIcon {
    background-image: url(../img/icon/epa_mainIcon.svg);
}

#incidentRecord_mainIcon {
    background-image: url(../img/icon/incidentRecord_mainIcon.svg);
}

#research_mainIcon {
    background-image: url(../img/icon/research_mainIcon.svg);
}

#eLearning_mainIcon {
    background-image: url(../img/icon/eLearning_mainIcon.svg);
}

#webboard_mainIcon {
    background-image: url(../img/icon/webboard_mainIcon.svg);
}

#seminar_mainIcon {
    background-image: url(../img/icon/seminar_mainIcon.svg);
}

#studySummative_mainIcon {
    background-image: url(../img/icon/studySummative_mainIcon.svg);
}

#lifeLongPort_mainIcon {
    background-image: url(../img/icon/lifeLongPort_mainIcon.svg);
}

#REXXAdvisor_mainIcon {
    background-image: url(../img/icon/REXXAdvisor_mainIcon.svg);
}

#REXXReward_mainIcon {
    background-image: url(../img/icon/REXXReward_mainIcon.svg);
}

#attendance_mainIcon {
    background-image: url(../img/icon/attendance_mainIcon.svg);
}

#examination_mainIcon {
    background-image: url(../img/icon/examination_mainIcon.svg);
}

#programAndCourse_mainIcon {
    background-image: url(../img/icon/programAndCourse_mainIcon.svg);
}

#fileManagement_mainIcon {
    background-image: url(../img/icon/fileManagement_mainIcon.svg);
}

.UI_titleBar_calendar_date {
    padding: 4px;
    box-sizing: border-box;
}

.UI_titleBar_special .day_box {
    width: calc((100% - (4px * 8)) / 7);
    height: 100%;
    background-color: #FFFFFF;
    border-radius: 10px;
}

.UI_titleBar_special .day_box_selected {
    background-color: #6CC5EB;
    color: #FFFFFF !important;
}

.UI_titleBar_calendar_date .content_box {
    display: flex;
    justify-content: space-between;
}

.UI_titleBar_special .day_box .td1 {
    width: 100%;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    color: #CCCCCC;
    position: absolute;
    top: 0px;
}

.UI_titleBar_special .day_box .tdb1 {
    width: 100%;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    color: #000000;
    position: absolute;
    top: 0px;
}

.UI_titleBar_special .day_box .td2 {
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: #000000;
    position: absolute;
    top: 12px;
}

.UI_titleBar_special .day_box_selected .td1, .UI_titleBar_special .day_box_selected .tdb1, .UI_titleBar_special .day_box_selected .td2 {
    color: #FFFFFF !important;
}

.UI_titleBar_special .day_box .noti_icon_circle {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    position: absolute;
    background-color: #6CC5EB;
    left: calc(50% - (8px / 2));
    bottom: 2px;
}

.UI_titleBar_special .day_box_selected .noti_icon_circle {
    background-color: #FFFFFF;
}

.container_fav {
    display: block;
    position: absolute;
    height: 100%;
    width: 50px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    top: 0px;
    left: 0px;
}
  
/* Hide the browser's default checkbox */
.container_fav input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
  
/* Create a custom checkbox */
.checkmark_fav {
    position: absolute;
    box-sizing: border-box;
    top: calc(50% - (22px / 2));
    left: 16px;
    height: 22px;
    width: 22px;
    border-radius: 4px;
    border: 2px solid #999999;
    background-color: #ffffff;
    transition: 0.3s;
}

.checkmark_fav.check_circle{
    border-radius: 50%;
}

.checkmark_fav_boxMenu{
    top: unset;
    left: unset;
    z-index: 1;
    border: 2px solid rgb(0 0 0 / 15%);
}

/* On mouse-over, add a grey background color */
.container_fav:hover input ~ .checkmark_fav {
    background-color: #ffffff;
}
  
/* When the checkbox is checked, add a blue background */
.container_fav input:checked ~ .checkmark_fav {
    background-color: #6CC5EB;
    border: 2px solid rgba(0, 0, 0, 0.15);
    transition: 0.3s;
}

.container_fav input:checked ~ .checkmark_fav_blue2 {
    background-color: #4DB1BA;
}
  
/* Create the checkmark_fav/indicator (hidden when not checked) */
.checkmark_fav:after {
    content: "";
    position: absolute;
    display: block;
}
  
/* Show the checkmark_fav when checked */
.container_fav input:checked ~ .checkmark_fav:after {
    display: block;
    left: 6px;
    top: 1px;
    width: 4px;
    height: 10px;
    opacity: 1;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
    transition: 0.3s;
}
  
/* Style the checkmark_fav/indicator */
.container_fav .checkmark_fav:after {
    left: 2px;
    top: -2px;
    width: 8px;
    height: 20px;
    opacity: 0;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(0deg) scale(2);
    -ms-transform: rotate(0deg) scale(2);
    transform: rotate(0deg) scale(2);
    transition: 0.3s;
}

.container_fav input:checked ~ .check_circle:after{
    left: 5px;
}

.container_rad {
    display: block;
    position: absolute;
    height: 100%;
    width: 50px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    top: 0px;
    left: 0px;
}
  
/* Hide the browser's default checkbox */
.container_rad input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
  
/* Create a custom checkbox */
.checkmark_rad {
    position: absolute;
    box-sizing: border-box;
    top: calc(50% - (24px / 2));
    left: 15px;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    border: 2px solid #999999;
    background-color: #ffffff;
    transition: 0.3s;
}

/* When the checkbox is checked, add a blue background */
.container_rad input:checked ~ .checkmark_rad {
    background-color: #6CC5EB;
    border: 2px solid rgba(0, 0, 0, 0.15);
    transition: 0.3s;
}
  
/* Create the checkmark_rad/indicator (hidden when not checked) */
.checkmark_rad:after {
    content: "";
    position: absolute;
    display: block;
}
  
/* Show the checkmark_rad when checked */
.container_rad input:checked ~ .checkmark_rad:after {
    display: block;
    left: 3px;
    top: 3px;
    width: 14px;
    height: 14px;
    background-color: #FFFFFF;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.05);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    transition: 0.3s;
}

/* Style the checkmark_rad/indicator */
.container_rad .checkmark_rad:after {
    left: 3px;
    top: 3px;
    width: 14px;
    height: 14px;
    background-color: #FFFFFF;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.05);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    transition: 0.3s;
}

.displayText_box .statusSection{
    width: 100%;
    height: 16px;
    line-height: 15px;
    text-transform: uppercase;
}

.displayText_box .statusSectionRight{
    width: unset;
    position: absolute;
    top: calc(50% - (16px/2));
    right: 16px;
}

.displayText_box .statusSectionRight2{
    width: unset;
    position: absolute;
    top: calc(50% - (16px/2));
    right: 36px;
}

.displayText_box .statusSectionRight4{
    width: unset;
    position: absolute;
    top: calc(50% - (16px/2));
    right: 30px;
}

.displayText_box .statusSectionRightTop{
    width: unset;
    position: absolute;
    top: 10px;
    right: 35px
}

.displayText_box .statusSectionRightTop2{
    width: unset;
    position: absolute;
    top: 10px;
    right: 71px
}

.displayText_box .statusSectionText{
    width: unset;
    display: inline-block;
    position: absolute;
    margin-left: 4px;
}

.displayText_box .textSection .statusSection_with_tupe{
    margin-bottom: 4px;
    display: block;
}

.displayText_box .textSection_with_status_morePage{
    padding-right: 100px;
}

.statusSection .status_box{
    width: fit-content;
    height: 16px;
    line-height: 16px;
    border-radius: 4px;
    background-color: #6CC5EB;
    font-size: 10px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 0px 6px 0px 6px;
    box-sizing: border-box;
    margin-right: 4px;
    display: inline-block;
    float: left;
}

.status_green .status_box{
    background-color: #97CC1C;
}

.status_green .textSection_status .t14b{
    color: #97CC1C;
}

.status_yellow .status_box{
    background-color: #F4BD31;
}

.status_yellow .textSection_status .t14b{
    color: #F4BD31;
}

.status_red .status_box{
    background-color: #E8555A;
}

.status_red .textSection_status .t14b{
    color: #E8555A;
}

.status_gray .status_box{
    background-color: #999999;
}

.status_default_color{
    background-color: #6CC5EB !important;
}

.status_gray .textSection_status .t14b{
    color: #999999;
}

.displayText_box .statusSection .status_box{
    margin-bottom: 0px;
}

.statusSection_with_txt13{
    float: left;
}

.statusSection_with_txt13 .status_box{
    margin-right: 8px;
}

.statusSection .textSection_status .t14b{
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
}

.displayText_box .check_icon {
    height: 16px;
    width: 16px;
    left: 10px;
    top: calc(50% - (16px / 2));
    background-image: url(../img/icon/check_green.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: inline-block;
    left: 0px;
    vertical-align: -2px;
}

.displayText_box .information_icon {
    height: 18px;
    width: 18px;
    left: 10px;
    top: calc(50% - (18px / 2));
    background-image: url(../img/icon/information_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: inline-block;
    left: 0px;
    vertical-align: -2px;
}

.displayText_box .circle_icon {
    height: 16px;
    width: 16px;
    left: 10px;
    top: calc(50% - (16px / 2));
    background-color: #6CC5EB;
    position: relative;
    display: inline-block;
    left: 0px;
    vertical-align: -2px;
    border: 1px solid rgb(0 0 0 / 15%);
    box-sizing: border-box;
    border-radius: 50%;
}

.requirePassword_box{
    width: 100%;
    height: 24px;
    line-height: 24px;
    margin-left: 16px;
    padding-bottom: 6px;
}

.fieldSection .requirePassword_box:first-child{
    padding-top: 12px;
}

.fieldSection .requirePassword_box:last-child{
    padding-bottom: 12px;
}

.requirePassword_box .checkPassword_box{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #62BAE0;
    display: inline-block;
    float: left;
    box-sizing: border-box;
}

.requirePassword_box .checkPassword_box .correct_icon{
    width: 12px;
    height: 12px;
    position: relative;
    top: calc(50% - (12px/2));
    left: calc(50% - (12px/2));
    background-image: url(../img/icon/correct_icon.svg);
}

.requirePassword_box .checkPassword_checked{
    background-color: #6CC5EB;
}

.requirePassword_box .t16{
    margin-left: 32px;
}

.requireTubeSection{
    width: 100%;
    height: 8px;
    border-radius: 6px;
    background-color: #E6E6E6;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}

.requireTube{
    width: calc(100% + 2px);
    height: 8px;
    border-radius: 6px;
    background-color: #6CC5EB;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    position: relative;
    left: -1px;
    top: -1px;
}

.requireTube_more{
    position: relative;
    top: -13px;
}

.requireTube_12px{
    height: 12px;
}

.requireTube_12px .requireTube{
    height: 12px;
}

.displayText_box .textSection .tupe_with_statusSection{
    margin-bottom: 4px;
}

.displayText_with_module_box .textSection_with_morePage{
    width: calc(100% - 12px - 52px - 8px);
    margin-left: calc(52px + 12px + 8px);
    padding: 12px 32px 12px 0px;
}

.evenTask_box .evenTask_box_with_morePage{
    width: calc(100% - 20px);
    padding: 0px 20px 0px 0px;
}

.displayText_with_module_box .module_icon{
    width: 54px;
    height: 54px;
    background-image: url(../img/icon/module_icon.svg);
    position: absolute;
    left: 12px;
    top: calc(50% - (54px/2));
}

.displayText_with_module_box .textSection .t18b{
    margin-bottom: 5px;
}

.displayText_with_module_box .textSection .requireTubeSection{
    margin-bottom: 4px;
}

.evenTask_box_space .evenTask_box:first-child{
    margin-top: 16px;
}

.evenTask_box_space .evenTask_box{
    margin-top: 8px;
}

.displayText_box .textSection .div_mrg{
    margin-bottom: 2px;
}

.addPlusIcon{
    background-image: url(../img/icon/add_icon.svg) !important
}

.selectBox{
    width: 100%;
    border-radius: 12px;
    box-shadow: 0px 0px 6px rgb(0 0 0 / 5%);
    background-color: #FFFFFF;
}

.select_box{
    width: 100%;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.05);
    border: none;
    font-size: 16px;
    font-weight: bold;
}

.select_label{
    font-size: 12px;
    color: #666666;
    margin-bottom: 3px;
}

.selectBox .selectIcon{
    width: 12px;
    height: 7px;
    position: absolute;
    right: 8px;
    top: calc(50% - (7px/2));
    background-image: url(../img/icon/select_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.selectText{
    width: 100%;
    padding: 8px 20px 8px 12px;
    box-sizing: border-box;
}

.selectDate{
    width: 22.47%;
    float: left;
    display: inline-block;
}

.selectMonth{
    width: 45.77%;
    float: left;
    display: inline-block;
}

.selectYear{
    width: 26.82%;
    float: left;
    display: inline-block;
}

.selectSpace{
    width: 8px;
    height: 52px;
    float: left;
    display: inline-block;
}

.fieldSection_select3Item{
    width: 100%;
    border-radius: 12px;
    display: grid;
    column-gap: 8px;
    grid-template-columns: auto 46% 27%;
}

/* เอาคืนมาละมีคนลบ */
.fieldSection_select4Item_Equal{
    width: 100%;
    border-radius: 12px;
    display: grid;
    column-gap: 8px;
    grid-template-columns: auto auto auto auto;
}

.fieldSection_select3Item_Equal{
    width: 100%;
    border-radius: 12px;
    display: grid;
    column-gap: 8px;
    grid-template-columns: auto auto auto;
}

.fieldSection_select2Item{
    width: 100%;
    border-radius: 12px;
    display: grid;
    column-gap: 8px;
    grid-template-columns: auto 27%;
}

.fieldSection_select2Item_Equal{
    width: 100%;
    border-radius: 12px;
    display: grid;
    column-gap: 8px;
    grid-template-columns: auto auto;
}

.inputwithTextBox {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0px 0px 6px rgb(0 0 0 / 5%);
    background-color: #FFFFFF;
}

.inputwithTextBox .input_label{
    font-size: 12px;
    color: #666666;
    margin-bottom: 3px;
}

.inputwithTextBox .inputText{
    width: 100%;
    padding: 8px 20px 8px 12px;
    box-sizing: border-box;
}

.inputwithTextBox .input_with_text_box {
    width: 100%;
    box-sizing: border-box;
    border: none;
    font-size: 16px;
    font-weight: bold;
}

.inputwithTextBox {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0px 0px 6px rgb(0 0 0 / 5%);
    background-color: #FFFFFF;
}

.line_space_btn{
    width: 100%;
    height: 1px;
    background-color: #E6E6E6;
    border-radius: 12px;
    margin: 12px 0px;
}

.line_space_btn_2{
    width: 100%;
    height: 1px;
    background-color: #CCCCCC;
    border-radius: 12px;
}

.qr_code_box{
    width: 100%;
    padding: 16px 16px 0px 16px;
    box-sizing: border-box;
}

.qr_code_box .qr_img{
    width: calc(100% - 16px - 16px);
    height: 343px;
    /* background-image: url(../img/element/qr_code.svg); */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-sizing: border-box;
    margin: auto;
}

.qr_code_box .qr_txt{
    width: 100%;
    padding: 18px 0px 18px 0px;
    font-size: 24px;
    text-align: center;
}

.graph_box{
    width: calc(100% - 14px);
    box-sizing: border-box;
    border-bottom: 1px solid #D9D9D9;
    margin-left: 14px;
}

.graph_box:last-child{
    border-bottom: none;
}

.graph_box .graph_img{
    width: calc(100% + 14px);
    height: 348px;
    background-image: url(../img/element/graph_plo.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-sizing: border-box;
    position: relative;
    left: -14px;
}

.graph_box .graph_img_clo{
    background-image: url(../img/graph_clo.svg);
}

.UI_contentView_mini .content_box_flow{
    padding-top: 0px;
}

.UI_contentView_medium .content_box_flow{
    padding-top: 0px;
}

.more_inform_box{
    width: calc(100% - 14px - 14px);
    height: 32px;
    line-height: 32px;
    margin-left: 14px;
    margin-right: 14px;
    border-top: 1px solid #E6E6E6;
}

.more_inform_box_show{
    border-bottom: 1px solid #E6E6E6;
}

.more_inform_box .t14b{
    width: calc(100% - 32px);
    font-size: 14px;
    color: #000000;
    font-weight: bold;
    float: left;
}

.more_inform_box_show .slideDownIcon {
    width: 32px;
    height: 32px;
    background-image: url(../img/icon/slide_down.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    float: right;
}

.more_inform_box_show .slideUpIcon {
    width: 32px;
    height: 32px;
    background-image: url(../img/icon/slide_up.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    float: right;
}

.txtBox_t3_with_txtRight .slideUpIcon {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon/slide_up_no_bg.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
}

.txtBox_t3_with_txtRight .slideDownIcon {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon/slide_down_no_bg.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
}

.txtBox_t3_with_txtRight .informBlack_Icon {
    width: 22px;
    height: 22px;
    background-image: url(../img/icon/inform_black_no_bg_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
    position: relative;
    top: -4px;
    margin-right: 12px;
}

.fieldSection .displayText_box .slideUpIcon {
    width: 32px;
    height: 32px;
    background-image: url(../img/icon/slide_up.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: calc(50% - (32px/2));
    right: 0px;
}

.fieldSection .displayText_box .slideDownIcon {
    width: 32px;
    height: 32px;
    background-image: url(../img/icon/slide_down.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: calc(50% - (32px/2));
    right: 0px;
}

.fieldSection_head_gray .status_slide_box{
    width: fit-content;
    position: absolute;
    right: 34px;
    top: calc(50% - (16px/2));
}

.sequence_content{
    padding-left: 36px;
}

.box_img_data_status{
    width: 160px;
    height: 123px;
    box-sizing: border-box;
    position: relative;
    top: calc(44px + 56px);
    left: calc(50% - (160px/2));
}

.box_img_data_status .rexx_data_status {
    position: relative;
    height: 96px;
    width: 96px;
    left: calc(50% - (96px / 2));
    top: 0px;
    background-image: url(../img/element/rexx_no_data.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.box_img_data_status .t16{
    margin-top: 8px;
    font-size: 16px;
    text-align: center;
}

.BTN_icon_section{
    width: 100%;
    height: 100%;
}

.BTN_icon_section_flex{
    display: flex;
}

.BTN_icon_section .BTN_icon{
    width: calc(100% /4);
    height: 100%;
    display: inline-block;
    float: left;
}

.BTN_icon_section .back_img_icon{
    width: 36px;
    height: 36px;
    position: relative;
    left: 0px;
    top: calc(50% - (36px/2));
    background-image: url(../img/icon/back_img_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.BTN_icon_section .bin_img_icon{
    width: 36px;
    height: 36px;
    position: relative;
    left: calc(((50% - (36px/2)) - 9px));
    top: calc(50% - (36px/2));
    background-image: url(../img/icon/bin_img_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.BTN_icon_section .edit_img_icon{
    width: 36px;
    height: 36px;
    position: relative;
    left: calc(((50% - (36px/2)) + 9px));
    top: calc(50% - (36px/2));
    background-image: url(../img/icon/edit_img_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.BTN_icon_section .next_img_icon{
    width: 36px;
    height: 36px;
    position: absolute;
    right: 0px;
    top: calc(50% - (36px/2));
    background-image: url(../img/icon/next_img_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_footerBar_mainMenu .BTN_icon_section .BTN_icon{
    width: calc(100% /2);
}

.BTN_icon_section .home_img_icon{
    width: 48px;
    height: 49px;
    position: relative;
    left: calc(((50% - (48px/2))));
    top: 0px;
    background-image: url(../img/icon/home_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.BTN_icon_section .lifelong_img_icon {
    width: 48px;
    height: 49px;
    position: relative;
    left: calc(((50% - (48px/2))));
    top: 4px;
    background-image: url(../img/lifelong.png);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.BTN_icon_section .schedule_img_icon{
    width: 48px;
    height: 49px;
    position: relative;
    left: calc(((50% - (48px/2))));
    top: 0px;
    background-image: url(../img/icon/schedule_img_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.BTN_icon_section .port_img_icon{
    width: 48px;
    height: 49px;
    position: relative;
    left: calc(((50% - (48px/2))));
    top: 0px;
    background-image: url(../img/icon/port_img_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.UI_footerBar_mainMenu .bended_radius_UI {
    width: 100%;
    height: 6px;
    position: absolute;
    top: 0px;
    z-index: -1;
    box-shadow: 0px -2px 6px rgb(0 0 0 / 7%);
}

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

.pre_line_txt{
    white-space: pre-line;
}

.table_score_progress {
    width: 100%;
    height: 50px;
    font-size: 14px;
    font-weight: bold;
    border-collapse: initial;
    table-layout: fixed;
}

.table_score_progress td:last-child{
    border-right: none;
}

.table_score_progress td {
    border-right: 1px solid #D9D9D9;
    text-align: center;
}

.table_score_progress .tr_1 td{
    border-top: none;
    border-bottom: 1px solid #D9D9D9;
}

.table_score_progress .tr_2 td{
    border-top: none;
    border-bottom: none;
}

.table_score_progress td:nth-child(3){
    color: #97CC1C;
}

.table_score_progress td:nth-child(4){
    color: #F4BD31;
}

.table_score_progress td:nth-child(5){
    color: #999999;
}

.displayReport_box{
    display: grid;
    grid-template-rows: 31px 31px 31px;
    border-radius: 8px;
    margin: 0px 14px 8px 14px;
    border: 1px solid rgb(0 0 0 / 15%);
    box-sizing: border-box;
    text-align: center;
}

.displayReport_box div{
    line-height: 31px;
    border-bottom: 1px solid rgb(0 0 0 / 15%);
}

.displayReport_box div:last-child{
    border-bottom: none;
}

.displayReport_box div:first-child{
    border-radius: 8px 8px 0px 0px;
    background-color:  #6CC5EB;
    color: #FFFFFF;
    font-weight: bold;
}

.displayReport_box_5col{
    grid-template-columns: 20% 20% 20% 20% 20%;
}

.displayReport_box_5col div:first-child{
    grid-column: 1 / span 5;
    grid-row: 1;
}

.displayReport_box_5col div{
    border-right: 1px solid rgb(0 0 0 / 15%);
    background-color: #E6E6E6;
}

.displayReport_box_5col div:nth-child(5n+1){
    border-right: none;
}

.displayReport_box_5col div:nth-child(n+7){
    border-bottom: none;
    background-color: transparent;
}

.displayReport_box_2col{
    grid-template-columns: 50% 50%;
}

.displayReport_box_2col div:first-child{
    grid-column: 1 / span 2;
    grid-row: 1;
}

.displayReport_box_2col div{
    border-right: 1px solid #BFBFBF;
}

.displayReport_box_2col div:nth-child(2n+1){
    border-right: none;
}

.displayReport_box_2col div:nth-child(n+4){
    border-bottom: none;
}

/* ------------- 3 col ----------------- */
.displayReport_box_3col{
    grid-template-columns: auto auto auto;
}

.displayReport_box_3col div:first-child{
    grid-column: 1 / span 3;
    grid-row: 1;
}

.displayReport_box_3col div{
    border-right: 1px solid rgb(0 0 0 / 15%);
}

.displayReport_box_3col div:nth-child(3n+1){
    border-right: none;
}

.displayReport_box_3col div:nth-child(n+5){
    border-bottom: none;
    background-color: transparent;
}

/* ------------- 4 col ----------------- */
.displayReport_box_4col{
    grid-template-columns: auto auto auto auto;
}

.displayReport_box_4col div {
    background-color: #E6E6E6;
}

.displayReport_box_4col div:first-child{
    grid-column: 1 / span 4;
    grid-row: 1;
}

.displayReport_box_4col div{
    border-right: 1px solid rgb(0 0 0 / 15%);
}

.displayReport_box_4col div:nth-child(4n+1){
    border-right: none;
}

.displayReport_box_4col div:nth-child(n+6){
    border-bottom: none;
    background-color: transparent;
}


.displayReport_box_3col div{
    background-color: #E6E6E6;
}


.UI_contentView_box_space{
    width: 100%;
    height: 6px;
}

.UI_titleBar_profileBox{
    width: 100%;
    height: 169px;
    box-sizing: border-box;
    position: relative;
    top: 44px;
}

.UI_titleBar_profileBox .avatar_profile{
    width: 96px;
    height: 96px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 2px solid rgba(0, 0, 0, 0.15);
    position: relative;
    top: 0px;
    left: calc(50% - (96px / 2));
    background-image: url(../img/element/avatar.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
    margin-bottom: 8px;
}

.UI_titleBar_profileBox .t24b{
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 2px;
    padding: 0px 25px;
}

.UI_titleBar_profileBox .t14{
    font-size: 14px;
    font-weight: normal;
    color: #FFFFFF;
    text-align: center;
}

.signSignature_Box{
    width: 100%;
    height: calc(100% - 18px - 18px);
    margin: 18px 0px;
    background-color: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #E6E6E6;
}

.UI_contentView_Login{
    height: calc(100vh - 56px);
    height: calc(100vh - (56px + env(safe-area-inset-top)));
    top: 56px;
    top: calc(56px + env(safe-area-inset-top));
}

.UI_contentView_welcomePage{
    background-color: #F7F7F7;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

.UI_contentView_selectVersion{
    height: calc(100vh - 42px);
    height: calc(100vh - (42px + env(safe-area-inset-top)));
    top: 42px;
    top: calc(42px + env(safe-area-inset-top));
}

.Head_login{
    width: 100%;
    height: 156px;
}

.UI_contentView_Login .Head_login{
    height: 128px;
    margin-bottom: 52px;
}

.rexxHi_icon{
    width: 120px;
    height: 128px;
    position: absolute;
    background-image: url(../img/main/rexx_hi.svg);
    left: -45px;
}

.rexxLogo_icon{
    width: 192px;
    height: 44px;
    background-image: url(../img/main/rexx_logo.svg);
    position: relative;
    left: 0px;
}

.rexxLogo_box{
    width: 192px;
    height: 62px;
    position: absolute;
    left: calc(50% - (192px/2));
    top: 62px;
}

.Head_login .t14{
    font-size: 14px;
}

.subHead_login{
    width: 100%;
}

.subHead_login .t22{
    font-size: 22px;
    text-align: center;
    margin-bottom: 12px;
}

.subHead_login .t14{
    font-size: 14px;
    text-align: center;
    margin-bottom: 18px;
    color: #666666;
}

.subHead_login .t14_g{
    font-size: 14px;
    text-align: center;
    margin-bottom: 18px;
    color: #999999;
}

.subHead_login .t14_b{
    font-size: 14px;
    text-align: center;
    margin-bottom: 18px;
    color: #000000;
}

.subHead_login .t14_g2{
    font-size: 14px;
    text-align: left;
    margin-bottom: 12px;
    color: #666666;
}

.subHead_login .t14b_r{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 12px;
    color: #E8555A;
}

.subHead_login .t14_r{
    font-size: 14px;
    margin-bottom: 12px;
    color: #E8555A;
}

.subHead_login .importantBox{
    width: calc(100% - 20px);
    display: inline-block;
    padding-left: 20px;
}

.subHead_login .important_icon{
    width: 16px;
    height: 16px;
    background-image: url(../img/icon/important_icon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    position: absolute;
    left: 16px;
}

.subHead_login_mrg1 .t14{
    margin-bottom: 28px;
}

.subHead_login_mrg2 .t14{
    margin-bottom: 16px;
}

.rexxLogin_box{
    width: 100%;
    padding: 0px 20px;
    box-sizing: border-box;
}

.rexxLogin_box .txt_btw_btn{
    font-size: 14px;
    color: #666666;
    margin: 28px 0px 12px 0px;
    text-align: center;
}

.rexxLogin_box .input_box{
    background-color: #F7F7F7;
    border: none;
    border-bottom: 1px solid #CCCCCC;
    border-radius: 0px;
    margin-bottom: 12px;
}

.rexxLogin_box .inputBox{
    border-top: none;
}

.rexxLogin_box .input_box_with_BTN{
    margin-bottom: 28px;
}

.Footer_login{
    width: 100%;
    max-width: 680px;
    position: absolute;
    bottom: 0px;
    text-align: center;
}

.Footer_login .t14{
    font-size: 14px;
    color: #CCCCCC;
}

.Footer_login .txtVersion .t14:last-child{
    margin-bottom: 16px;
}

.Footer_login .t10{
    font-size: 10px;
    color: #CCCCCC;
    margin-bottom: 34px;
}

.lineBetween{
    height: 1px;
    background-color: #CCCCCC;
    margin: 24px 0px;
}

.consentBox{    
    width: 375px;
    height: 220px;
    background-image: url(../img/icon/consent01.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    position: relative;
    left: calc(50% - (375px/2));
    margin-bottom: 16px;
}

.regisBox{    
    width: 138px;
    height: 164px;
    background-image: url(../img/icon/regis01.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    position: relative;
    left: calc(50% - (138px/2));
    margin-bottom: 28px;
}

.consentBox_02{
    background-image: url(../img/icon/consent02.svg);
}

.consentBox_03{
    background-image: url(../img/icon/consent03.svg);
}

.consentBox_04{
    background-image: url(../img/icon/consent04.svg);
}

.deleteBox_01{
    background-image: url(../img/icon/delete_img.svg);
}

.lineTop_txtBox{
    border-top: 1px solid #CCCCCC;
}

.subRequire_Tube{
    display: grid;
    grid-template-columns: 50% 50%;
    margin-top: 8px;
    margin-bottom: 28px;
}

.subRequire_Tube .t12{
    font-size: 12px;
    color: #666666;
}

.subRequire_Tube div:first-child{
    text-align: left;
}

.subRequire_Tube div:last-child{
    text-align: right;
}

.txtPatch{
    font-size: 14px;
    color: #666666;
    text-align: center;
}

.roleBox{
    width: 248px;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 96px 27px;
    position: relative;
    left: calc(50% - (248px/2));
    grid-row-gap: 8px;
    margin-bottom: 15px;
}

.roleBox_avatar{
    position: relative;
}

.roleBox_version{
    margin-top: 42px;
}

.avatar_role{
    width: 96px;
    height: 96px;
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    border: 2px solid rgb(0 0 0 / 10%);
    background-color: #E6E6E6;
    position: absolute;
}

.version_icon{
    width: 96px;
    height: 96px;
    border-radius: 24px;
    box-sizing: border-box;
    cursor: pointer;
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    border: 2px solid rgb(0 0 0 / 15%);
    background-color: #E6E6E6;
    position: absolute; 
}

.avatar_role_stu {
    right: 14px;
    background-image: url(../img/icon/avatar_student.svg);
}

.version_1_icon {
    right: 14px;
    background-image: url(../img/version_1.svg);
}

.avatar_role_sv {
    left: 14px;
    background-image: url(../img/icon/avatar_supervisor.svg);
}

.version_2_icon {
    right: 14px;
    background-image: url(../img/version_2.svg);
}


.roleBox div{
    font-size: 16px;
    text-align: center;
}

.inputNumber_Box{
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 56px 56px 56px 56px;
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    color: #FFFFFF;
    grid-gap: 6px;
    line-height: 56px;
    margin: 16px 0px 0px 0px;
}

.inputNumber_Box div{
    border-radius: 12px;
    background-color: #000000;
}

.inputNumber_Box div:nth-child(10){
    background-color: unset;
    font-size: 16px;
    color: #000000;
}

.inputNumber_Box div:nth-child(12){
    background-color: unset;
}

.inputNumber_Box .cancelNum{
    width: 28px;
    height: 24px;
    position: relative;
    left: calc(50% - (24px/2));
    top: calc(50% - (28px/2));
    background-image: url(../img/icon/cancel_num.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: unset;
    border-radius: unset;
}

.inputPasscode_Box{
    width: 204px;
    height: 24px;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;  
    grid-gap: 12px;
    position: relative;
    left: calc(50% - (204px/2));

}

.inputPasscode_Box .container_rad{
    width: unset;
    position: relative;
    top: unset;
    left: unset;
}


.inputPasscode_Box .checkmark_rad{
    left: unset;
    border: 1px solid #FFFFFF;
    background-color: #6CC5EB;
}

.inputPasscode_Box .container_rad input:checked ~ .checkmark_rad{
    border: 1px solid #FFFFFF;
    background-color: #FFFFFF;
}

.inputPasscode_Box .container_rad input:checked ~ .checkmark_rad:after {
    left: 4px;
    top: 4px;
    background-color: #6CC5EB;
    border: 1px solid #FFFFFF;
}

.signatureShow_box{
    width: 100%;
    height: 156px;
    padding: 0px 42px 8px 42px;
    box-sizing: border-box;
}

.signatureShow{
    width: 100%;
    height: 148px;
}

.profileCover_box{
    width: 100%;
    height: 124px;
    background-image: url(../img/element/profile_bg.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #6CC5EB;
    border: 2px solid rgb(0 0 0 / 15%);
    border-radius: 12px;
    position: relative;
    box-sizing: border-box;
    padding: 12px;
}

.profileCover_box_port{
    background-image: url(../img/bg_port.svg);
}

.profileShow_box{
    width: 84px;
    height: 84px;
    background-image: url(../img/element/avatar.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    left: calc(50% - (84px/2));
    top: calc(50% - (84px/2));
    border-radius: 50%;
    border: 2px solid rgb(0 0 0 / 15%);
    box-sizing: border-box;
}

.profileShow_box.profileShow_left{
    top: 0px;
    left: 0px;
}

.profileCover_box .profileEdit_icon{
    width: 28px;
    height: 28px;
    position: absolute;
    right: 12px;
    bottom: 12px;
    background-image: url(../img/icon/edit_pic_profile.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    cursor: pointer;
}

.profileCover_box .profileShow_box .profileEdit_icon{
    right: 0px;
    bottom: 0px;
}

.profileText_box{
    display: grid;
    margin: 8px 0px 12px 0px;
}

.profileText_box div:nth-child(1){
    font-size: 24px;
    font-weight: bold;
}

.profileText_box div:nth-child(2){
    font-size: 14px;
}

.storageTube{
    width: 100%;
    height: 24px;
    background-color: #E6E6E6;
    border: 1px solid rgb(0 0 0 / 15%);
    border-radius: 6px;
    box-sizing: border-box;
    position: relative;
}

.storageTube_inside{
    position: absolute;
    top: -1px;
    left: -1px;
    border-radius: 6px 0px 0px 6px;
}

.statusTube_group{
    display: flex;
    grid-gap: 10px;
    margin-top: 8px;
}

.displayText_box .statusTube_group div{
    margin-bottom: 0px;
}

.statusTube{
    display: grid;
    grid-template-columns: 10px auto;
    align-items: center;
    grid-gap: 4px;
}

.displayText_box .statusTube div{
    margin-bottom: 0px;
}

.statusTube .statusCircle{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgb(0 0 0 / 15%);
}

/* ถ้า max 100 mb */
/* .storageTube .storageTube_inside:last-child{
    border-radius: 6px;
} */



/* Switch */

.switch_box {
    position: absolute;
    display: inline-block;
    width: 51px;
    height: 31px;
    right: 16px;
    top: calc(50% - (31px/2));
}

.switch_box input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.switch_box .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(120 120 128 / 16%);
    -webkit-transition: .4s;
    transition: .4s;
}

.switch_box .slider:before {
    position: absolute;
    content: "";
    height: 27px;
    width: 27px;
    left: 1px;
    top: calc(50% - (27px/2));
    background-color: white;
    border: 0.5px solid rgb(0 0 0 / 4%);
    box-shadow: 0px 3px 1px rgb(0 0 0 / 4%);
    -webkit-transition: .4s;
    transition: .4s;
    box-sizing: border-box;
}

.switch_box input:checked + .slider {
    background-color: #34C759;
}

.switch_box input:checked + .slider:before {
    -webkit-transform: translateX(22px);
    -ms-transform: translateX(22px);
    transform: translateX(22px);
}

/* Rounded sliders */
.switch_box .slider.round {
    border-radius: 34px;
}

.switch_box .slider.round:before {
    border-radius: 50%;
}

.displayVideo{
    width: 100vw;
    height: calc(100vh + env(safe-area-inset-top));
    background-color: white;
}

.t_underline{
    color: #000000;
    text-decoration: underline;
}

/* Shake obj */

@keyframes shake {
    0% { transform: rotate(-3deg); }
    25% { transform:  rotate(2deg); }
    50% { transform:  rotate(-2deg); }
    75% { transform:  rotate(3deg); }
    100% { transform:  rotate(0deg); }
}

.shakeObj{
    animation: shake 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.notiCircle{
    min-width: 20px;
    height: 20px;
    border-radius: 11px;
    font-size: 14px;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    background-color: #E8555A;
    border: 1px solid rgb(0 0 0 / 15%);
    box-sizing: border-box;
    position: absolute;
    top: -2px;
    right: 0px;
    padding: 0px 6px;
}

.notiCircle_single{
    width: 20px;
    padding: 0px;
}

.notiCircle_del{
    width: 12px;
    height: 2px;
    background-image: url(../img/icon/notiCircle_del.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    position: relative;
    top: calc(50% - (2px/2));
    left: calc(50% - (12px/2));
}

.displayText_box .textSection_with_morePage_optionIcon {
    padding-right: 65px;
    overflow-wrap: break-word;
}

.footerPin_box{
    width: 100%;
    height: 75px;
    background-color: #E6E6E6;
    border-radius: 12px;
    padding: 12px 16px;
    box-sizing: border-box;
    position: relative;
}

.footerPin_box_with_switchBox{
    padding-right: 79px;
}

.footerPin_box .t16b{
    font-size: 16px;
    font-weight: bold;
    color: #000000;
}

.footerPin_box .t12_g{
    font-size: 12px;
    color: #666666;
}

.changePage_box{
    width: 56px;
    height: 56px;
    background-color: #6CC5EB;
    border: 1px solid rgb(0 0 0 / 15%);
    position: fixed;
    bottom: 110px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.15);
}

.changePage_box.changePage_next{
    right: 0px;
    border-right: unset;
    border-radius: 12px 0px 0px 12px;
}

.changePage_box.changePage_back{
    left: 0px;
    border-left: unset;
    border-radius: 0px 12px 12px 0px;
}

.changePage_box .nextIcon{
    width: 24px;
    height: 24px;
    position: relative;
    top: calc(50% - (24px/2));
    left: calc(50% - (24px/2));
    background-image: url(../img/nextIcon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.changePage_box .backIcon{
    width: 24px;
    height: 24px;
    position: relative;
    top: calc(50% - (24px/2));
    left: calc(50% - (24px/2));
    background-image: url(../img/backIcon.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.menu_home_box{
    width: 36px;
    height: 36px;
    background-color: rgb(0 0 0 / 15%);
    border: 1px solid rgb(0 0 0 / 15%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu_home_box .menu_home_icon{
    width: 18px;
    height: 18px;
    background-image: url(../img/qr_white.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.menu_home_box .setting_home_icon{
    background-image: url(../img/setting_white.svg);
}

.menu_home_box .rexx_home_icon{
    width: 36px;
    height: 36px;
    background-image: url(../img/rexx_icon.svg);
}

.list_menu_home{
    position: absolute;
    right: 0px;
    bottom: 35px;
    display: flex;
    gap: 6px;
}

.UI_titleBar_huge .UI_searchSection_huge{
    top: calc(125px);
}

.statusSection .badge_bg_green{
    background-color: #D5F291;
    color: #598000;
}

.statusSection .badge_bg_red{
    background-color: #FFBFC1;
    color: #A6191E;
}

.statusSection .badge_bg_gray{
    background-color: #E6E6E6;
    color: #000000;
}



/* new font */

.UI_listItem_standard_3line.pd2{
    height: 66px;
    padding: 2px 0px;
}

.UI_contentView_medium.list_scorll_2{
    height: 138px;
}

.displayText_box .textSection.text_noMrg div{
    margin-bottom: unset;
}

/* Change university icon and bg */

/* .UI_titleBar_huge.bg_home{
    background-image: url(../img/no_new_noti.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}

..UI_titleBar_huge.bg_home{
    background-color: #C3002F;
}

.UI_titleBar_huge .rexx_badge_logo_black{
    height: 32px;
    width: inherit;
    background-image: url(../img/uni_badge.svg);
    bottom: 37px;
}

.UI_contentView .bended_radius_UI{
    background-color: #C3002F;
} */

.no_noti_box{
    width: 204px;
    height: 66px;
    background-image: url(../img/no_new_noti.svg);
    background-origin: border-box;
    background-repeat: no-repeat;
    position: relative;
    left: calc(50% - (204px/2));
    top: calc(50% - (66px/2));
}


/* ====== For Responsive Coding ====== */

/* iPad */
@media (min-width: 768px) {
    .mediaBox .media_box_img{
        width: calc((100% - (8px * 5)) / 6);
    }
}

@media (min-width: 680px) {
    .UI_footerBar_with_BTN_popup{
        max-width: 680px;
        z-index: 10000;
        left: calc(50% - (680px/2));
    }
}

/* iPhone4 */
@media (width: 320px) and (height: 480px) {}

/* iPhone 5 */
@media (max-width: 320px) {}

/* s8 */
@media (min-width: 320px) and (min-height: 740px) {}

/* iPhone X */
@media (min-width: 375px) and (min-height: 812px) {}

/* iPhone XS Max */
@media (min-width: 414px) and (min-height: 896px) {}

/* s8+ */
@media (min-width: 480px) and (min-height: 960px) {}

/* iPad */
@media (min-width: 768px) and (min-height: 1024px) {}

/* iPad Land */
@media (min-width: 1024px) {}

/* iOS Dark */
/* @media (prefers-color-scheme: dark) {
    body {
        color: #FFFFFF;
        background-color: #1A1A1A;
    }

    .UI_contentView_favMenu_scroll .boxFade_left {
        background-image: linear-gradient(to right, rgba(26, 26, 26, 1), rgba(26, 26, 26, 0));
    }

    .UI_contentView_favMenu_scroll .boxFade_right {
        background-image: linear-gradient(to left, rgba(26, 26, 26, 1), rgba(26, 26, 26, 0));
    }

    .UI_headerBar_split .t2 {
        color: #666666;
    }

    .UI_listItem_standard {
        background-color: #333333;
    }

    .UI_listItem_boxMenu .boxCircle_menuIcon {
        background-color: #333333;
    }

    .UI_searchSection .UI_searchBox {
        background-color: #333333;
        color: #FFFFFF;
    }

    .UI_searchSection .UI_searchBox::placeholder {
        color: #666666;
    }

    .UI_titleBar_special {
        background-color: #333333;
    }

    .UI_titleBar_huge {
        background-color: #177FAC;
    }

    .UI_footerBar {
        background-color: #333333;
        border-color: #666666;
    }

    .UI_searchSection .search_searchBox_icon {
        background-image: url(../img/icon/search_searchBox_icon_dark.svg);
    }

    .UI_searchSection .scanQR_icon {
        background-image: url(../img/icon/scanQR_icon_dark.svg);
    }

    .UI_titleBar_special .setting_icon {
        background-image: url(../img/icon/setting_icon_dark.svg);
    }

    .UI_titleBar_huge .rexx_badge_logo_black {
        background-image: url(../img/element/rexx_lms_logo_text_black_dark.svg);
    }

    .BTN_menuFooterItem .iconItem {
        background-image: url(../img/icon/home_footer_iconItem_dark.svg);
    }

    .UI_popupBox_full {
        background-color: #1A1A1A;
    }

    .UI_popupBox_full .UI_titleBar .BTN_backBTN .back_BTN_icon {
        background-image: url(../img/icon/BTN_back_icon_dark.svg);
    }

    .UI_searchSection .clear_text_inputBox_icon {
        background-image: url(../img/icon/clear_text_inputBox_icon_dark.svg);
    }
} */