@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

html, body{height:100%; margin:0; padding:0; box-sizing:border-box;}

a{color:#fff;}
a:hover{text-decoration:underline;}

body, input{box-sizing:border-box !important;}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{
  color:#004225 !important; -webkit-text-fill-color:#004225 !important; -webkit-box-shadow:0 0 0 30px white inset !important;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
input[type=number]{-moz-appearance:textfield;}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{color:#004225 !important; -webkit-text-fill-color:#004225 !important; -webkit-box-shadow:0 0 0 30px white inset !important;}

::-webkit-input-placeholder{font-size:14px; color:#888; font-weight:300; font-family:'Fira Sans', sans-serif;}
:-moz-placeholder{/* Firefox 18- */font-size:14px; color:#888; font-weight:300; font-family:'Fira Sans', sans-serif;}
::-moz-placeholder{/* Firefox 19+ */font-size:14px; color:#888; font-weight:300; font-family:'Fira Sans', sans-serif;}


/* ---- quill for core side ---- */
.ql-container{min-height:350px !important; font-size:14px !important; font-family:'Fira Sans', sans-serif !important;}
.ql-editor{line-height:1.85rem !important; padding:15px !important;}
.ql-editor.ql-blank::before{left:15px !important;}
.ql-editor ol, .ql-editor ul{padding-left:0 !important;}
.ql-editor li{line-height:28px !important;}
.ql-editor.ql-blank::before{font-style:normal !important;}

.ql-toolbar.ql-snow{border:1px solid #ccc; box-sizing:border-box; font-family:'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; padding:8px; border-radius:2px 2px 0 0;}
.ql-container.ql-snow{border-radius:0 0 2px 2px;}
.ql-container::-webkit-scrollbar{width:5px;}
.ql-container::-webkit-scrollbar-track{box-shadow:inset 0 0 5px #f9fdfb; border-radius:10px;}
.ql-container::-webkit-scrollbar-thumb{background:#ddd; border-radius:10px;}
.ql-container::-webkit-scrollbar-thumb:hover{background:#f6f9fc;}

.editor{display:none;}
.editor_content{min-height:350px; height:350px; max-height:500px; overflow-x:hidden; overflow-y:scroll; text-transform:none; background:#fff; margin:0 auto;}

/* ---- END quill for core side ---- */


.header_layout{/*height:3.5rem;*/ border-bottom:1px solid #ddd;}

.header_title{font-weight:600; color:#000; text-transform:uppercase !important; display:flex; align-items:center; justify-content:flex-start; gap:10px;}

.header_ent{background:#000 !important;}


/* ---- default font sizes ----- */
.default_header{line-height:48px; font-size:24px !important;}

.default_title{line-height:28px; font-size:18px !important;}
.default_subtitle{line-height:28px; font-size:16px !important;}

.default_content{line-height:22px; font-size:14px !important;}
.default_hint{line-height:16px; font-size:12px !important;}

/* ---- END default font sizes ----- */

/* ---- text sizes ----- */
.menu_header{font-size:18px !important;}
.menu_title{font-size:16px !important;}
.menu_content{font-size:14px !important;}

.content_header{font-weight:600; color:#000; /*text-transform:uppercase;*/}
.content_title{font-weight:600; color:#000; text-transform:uppercase; vertical-align:middle;}
.content_subtitle{font-size:12px; font-weight:400; color:#757269;}
.content_hint{line-height:28px; font-size:12px; font-weight:400; color:#888;}

/* ---- END menu sizes ----- */

/* ---- input ----- */
.default_text{height:40px; line-height:40px; border:1px solid #ddd; border-radius:2px; padding:0 15px;}
.default_text:hover, .default_text:focus{border:1px solid #004225; outline:none;}

.default_select{height:40px; line-height:40px; border:1px solid #ddd; border-radius:2px;
                background:url('https://asset.jouku.com/images/icon/icon_arrow_down_grey.png') #fff no-repeat center right 10px/10px;
                appearance:none; -webkit-appearance:none; -moz-appearance:none; padding:0 35px 0 15px;}
.default_select:hover, .default_select:focus{border:1px solid #004225; outline:none;}

.default_textarea{height:85px; line-height:1.25rem; text-align:left; border:1px solid #ddd; border-radius:2px;
                  padding:5px 0; margin:0 auto; resize:none; overflow-y:scroll;}
.default_textarea:hover, .default_textarea:focus{border:1px solid #004225; outline:none;}
.default_textarea::-webkit-scrollbar{width:5px;}
.default_textarea::-webkit-scrollbar-track{box-shadow:inset 0 0 5px #f9fdfb; border-radius:10px;}
.default_textarea::-webkit-scrollbar-thumb{background:#ddd; border-radius:10px;}
.default_textarea::-webkit-scrollbar-thumb:hover{background:#f6f9fc;}

.default_textarea_basic{height:85px; line-height:1.25rem; text-align:left; background:#fff; border:1px solid #ddd; border-radius:2px;
                        padding:5px 10px; margin:0 auto; resize:none; overflow-y:scroll;}
.default_textarea_basic:hover{border:1px solid #004225; outline:none;}
.default_textarea_basic::-webkit-scrollbar{width:5px;}
.default_textarea_basic::-webkit-scrollbar-track{box-shadow:inset 0 0 5px #f9fdfb; border-radius:10px;}
.default_textarea_basic::-webkit-scrollbar-thumb{background:#ddd; border-radius:10px;}
.default_textarea_basic::-webkit-scrollbar-thumb:hover{background:#f6f9fc;}

/* ---- END input ----- */

/* ---- button ----- */
.default_button_green{height:40px; line-height:40px; color:#fff; font-weight:600; text-align:center; background:#004225; border:1px solid #004225;
                      border-radius:2px; padding:0 2.5%;text-transform:uppercase !important;}
.default_button_green:hover, .default_button_green:focus{color:#004225; background:#fff; outline:none; cursor:pointer;}
.default_button_green:disabled{opacity:50%;cursor:not-allowed;}

.default_button_outline{height:40px; line-height:40px; color:#004225; text-align:center;font-weight:600;
                        border:1px solid #004225; border-radius:2px; padding:0 2.5%;text-transform:uppercase !important;}
.default_button_outline:hover, .default_button_outline:focus{color:#fff; background:#004225; outline:none; cursor:pointer;}
.default_button_outline:disabled{opacity:50%;cursor:not-allowed;}

.default_button_clear{height:40px; line-height:40px; color:#004225; text-align:center; text-transform:uppercase !important;
                      border:1px solid transparent; border-radius:2px; padding:0 5%;font-weight:600;}
.default_button_clear:hover, .default_button_clear:focus{border:1px solid #004225; outline:none; cursor:pointer;}
.default_button_clear:disabled{opacity:50%;cursor:not-allowed;}

.default_button_text{height:40px; line-height:40px; color:#004225; padding:0 1.5%;font-weight:600;text-transform:uppercase !important;}
.default_button_text:hover, .default_button_text:focus{color:#000; outline:none; cursor:pointer;}
.default_button_text:disabled{opacity:50%;cursor:not-allowed;}

/*.box_button_green{height:35px; line-height:35px; color:#fff; text-align:center; background:#004225; border:1px solid #004225; border-radius:2px; padding:0 2.5%;}*/

/* ---- END button ----- */

/* ---- font, layout styling ----- */

.display_block{display:block !important; width:100% !important;}
.display_inline{display:inline-block; width:auto; vertical-align:middle;}

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

.text_uppercase{text-transform:uppercase;}
.text_lowercase{text-transform:lowercase;}
.text_capitalize{text-transform:capitalize;}
.text_normalcase{text-transform:none;}

.text_underline{text-decoration:underline;}

.text_italic{font-style:italic;}

.text_center{text-align:center;}
.text_right{text-align:right;}

.text_required{font-size:11px; color:#b91c1c;}

.font_black{color:#000;}
.font_dark{color:#333;}
.font_grey{color:#666;}
.font_lightgrey{color:#888;}
.font_white{color:#fff;}
.font_primary{color:#004225;}
.font_secondary{color:#00a562;}
.font_yellow{color:#fbb43e;}
.font_red{color:#b91c1c;}

.font_light{font-weight:300;}
.font_normal{font-weight:400;}
.font_medium{font-weight:500;}
.font_semibold{font-weight:600;}
.font_bold{font-weight:700;}


/* ---- END font, layout styling ----- */

/* ----- pro section + badge ----- */

/*.pro_bg{display:none; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:100;}*/
.pro_bg{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); z-index:100;}

.pro_flexbox{display:flex; align-items:center; gap:25px; width:100%; /*box-sizing:border-box; padding:10px; background:#f6f9fc; border:1px dotted #ddd;*/}

.pro_upgrade_box{display:none; padding:35px; margin:2rem auto; width:450px; max-width:90%; position:fixed; top:50%; left:50%; box-sizing:border-box;
                 transform:translate(-50%, -50%); background-color:white; border-radius:2px; box-shadow:0 5px 15px rgba(0,0,0,0.3); z-index:1000;}
.pro_box{display:none; padding:35px; margin:2rem auto; width:450px; max-width:90%; position:fixed; top:50%; left:50%; box-sizing:border-box;
         transform:translate(-50%, -50%); background-color:white; border-radius:2px; box-shadow:0 5px 15px rgba(0,0,0,0.3); z-index:1000;}
.pro_close{font-size:20px; color:/*#c00*/#aaa; float:right; margin:-18px -18px 0 0; cursor:pointer;}
.pro_close:hover{color:#f00;}
.pro_details{margin:3rem auto;}
.pro_details div{margin:0.85rem 0;}

.pro_upgrade_block{/*display:flex; align-items:stretch; width:100%; justify-content:space-between; gap:2.5%;*/ display:block; margin-top:2.5%;}
.pro_upgrade_content{/*flex:1;*/ border:1px dotted #ddd; border-radius:2px; padding:25px 5%; position:relative;}
.pro_upgrade_msg a{color:#00a562; text-decoration:underline; text-decoration-style:dotted;}
.pro_upgrade_msg a:hover{color:#000; text-decoration:underline; text-decoration-style:solid;}
.pro_upgrade_button{display:block; /*width:80%; position:absolute; bottom:5%; left:50%; transform:translateX(-50%);*/}

.pro_checkbox{display:flex; align-items:center; position:relative; cursor:pointer; margin:10px 0;
              -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.pro_checkbox input{position:absolute; opacity:0; cursor:pointer; height:0; width:0;}
.pro_checkbox div{margin-left:35px;}
.pro_checkmark{position:absolute; top:2px; left:5px; height:12px; width:12px; background-color:#eee; border:1px solid #ddd;}
.pro_checkbox:hover input ~ .pro_checkmark{background-color:#ccc;}
.pro_checkbox input:checked ~ .pro_checkmark{border:1px solid #004225; background-color:#00a562;}
.pro_checkmark:after{content:""; position:absolute; display:none;}
.pro_checkbox input:checked ~ .pro_checkmark:after{display:block;}
.pro_checkbox input:checked ~ div{color:#000;}
.pro_checkbox .pro_checkmark:after{left:3px; top:0; width:3px; height:8px; border:solid white; border-width:0 2px 2px 0;
                            -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg);}

/*.pro_block{width:fit-content; text-align:center; background:#efe9d7; border:1px dotted #888; border-radius:2px; padding:0.5rem 1rem;}*/
.pro_block{width:fit-content; margin:1rem auto 0;}
.pro_badge{color:#000; background:#ffb000; border:1px solid #ffb000; border-radius:5px; text-transform:uppercase; padding:2.5px 5px; margin:0 10px 0 5px; position:relative;}

.pro_ent_badge{color:#fff; background:#000; border:1px solid #000; border-radius:5px; text-transform:uppercase; padding:2.5px 5px; margin:0 10px 0 5px; position:relative;}

.pro_button_gold{height:40px; line-height:40px; color:#000; font-weight:600; text-align:center; background:#ffb000; border:1px solid #ffb000;
                 border-radius:2px; padding:0 2.5%;text-transform:uppercase !important;}
.pro_button_gold:hover, .pro_button_gold:focus{background:#fff; outline:none; cursor:pointer;}
.pro_button_gold:disabled{opacity:50%; cursor:not-allowed;}

/*.pro_badge .pro_badge_tooltip{visibility:visible; width:max-content; background:rgba(0,0,0,0.65); color:#fff; font-weight:400; text-align:center; text-transform:none;*/
/*                              padding:5px 10px; border-radius:5px; position:absolute; margin:-2.5px 0 0 10px; z-index:1; cursor:help;}*/
/*.pro_badge:hover .pro_badge_tooltip{visibility:visible;}*/

/*.pro_badge_upgrade{color:#00a562; cursor:pointer;}*/
/*.pro_badge_upgrade span{border-bottom:1px dashed #00a562;}*/
/*.pro_badge_upgrade:hover{color:#004225;}*/
/*.pro_badge_upgrade:hover span{border-bottom:1px dashed #004225;}*/

.logo_badge_pro{width:auto; background:#ffb000; border:1px solid #ffb000; position:absolute; top:12px; left:115px;}
.logo_badge_ent{width:auto; background:#000; border:1px solid #666; color:#fff; position:absolute; top:12px; left:115px;}

/* ----- END pro badge ----- */


/* --- scroll button --- */
.button_scroll{position:fixed; bottom:20px; right:20px; display:none; width:40px; height:40px; background:rgba(0,165,98,0.4); color:#fff; 
               border:none; border-radius:50%; text-align:center; cursor:pointer; font-size:20px; z-index:1000;}
.button_scroll:hover{background:rgba(0,165,98,0.85);}


/* ------ header, body, content block setting ------ */

.body_content{display:block; width:100%; font-family:'Fira Sans', sans-serif; position:relative;}

.nav_menu_bar{display:block; width:100%; height:90px; line-height:90px; text-align:center !important;
              font-family:'Fira Sans', sans-serif; background:#004225; position:relative;}

.nav_menu_container{display:grid; max-width:1440px; grid-template-columns:1fr 3fr 1fr; margin:0 auto;}

/*.nav_menu_left{display:inline-block; width:300px; max-width:25%; height:90px; text-align:center; position:relative; vertical-align:top;}*/
/*.nav_menu_center{display:inline-block; width:980px; max-width:49.25%; height:90px; font-weight:400; color:#fff; text-align:left; */
/*                 text-transform:uppercase; vertical-align:top; position:relative;}*/
/*.nav_menu_right{display:inline-block; width:300px; max-width:25%; height:90px; text-align:center; vertical-align:top; position:relative;}*/

.nav_menu_left{text-align:center; position:relative;}
.nav_menu_center{color:#fff; text-align:left; text-transform:uppercase; position:relative;}
.nav_menu_right{text-align:center; position:relative;}

.nav_container{display:block; width:100%; min-height:100vh; text-align:center; position:relative;}

.nav_branding_logo{display:block; width:125px; max-width:100%; height:90px; max-height:90px; margin:0; object-fit:contain; image-rendering:crisp-edges;}
.nav_branding_logo_mobile{display:none; width:80px; max-width:100%; height:90px; max-height:90px; margin:0; object-fit:contain; image-rendering:crisp-edges;}

.nav_menu_list{display:block; width:80%; border-right:2px solid #eee;}

.nav_menu_each{display:block; margin:0 auto 2rem;}

.nav_menu_header{display:flex; align-items:center; justify-content:space-between; width:100%; font-family:'Fira Sans', sans-serif; margin:0 auto; cursor:pointer;}
.nav_menu_header:hover{color:#000;}

.nav_menu_open{display:none; width:80%; height:90px; text-align:right; margin-left:-50%; cursor:pointer; vertical-align:top;}
.nav_menu_open_icon{color:#fff;}
.nav_menu_close{display:inline-block; width:15%; height:90px; text-align:right; cursor:pointer; vertical-align:top;}
.nav_menu_close_icon{color:#fff;}

.nav_menu_header_title{display:block; line-height:20px; font-weight:600; color:#004225;}

.nav_menu_header_icon{display:inline-block; width:20px; height:20px; text-align:center; margin-right:10px; vertical-align:middle;}

.nav_menu_header_icon_recruit{display:inline-block; vertical-align:middle;}

.nav_menu_header_icon_recruit_req{width:25px; height:25px; background:url('https://asset.jobstore.my/images/icon/recruitment/icon_menu_approval_file.png') no-repeat center/25px; vertical-align:middle;}
.nav_menu_header_icon_recruit_job{width:25px; height:25px; background:url('https://asset.jobstore.my/images/icon/recruitment/icon_menu_briefcase.png') no-repeat center/25px; vertical-align:middle;}
.nav_menu_header_icon_recruit_candidate{width:25px; height:25px; background:url('https://asset.jobstore.my/images/icon/recruitment/icon_menu_candidates_duo.png') no-repeat center/25px; vertical-align:middle;}
.nav_menu_header_icon_recruit_setting{width:25px; height:25px; background:url('https://asset.jobstore.my/images/icon/recruitment/icon_menu_setting_gear.png') no-repeat center/25px; vertical-align:middle;}

.nav_menu_header_title_recruit{display:inline-block; font-weight:600; color:#004225; margin-left:5%; vertical-align:middle;}

.nav_menu_header_title_recruit{display:inline-block; font-weight:600; color:#004225; margin-left:5%; vertical-align:middle;}

.nav_menu_header_arrow_open, .nav_menu_header_arrow_closed{display:block; width:auto; height:auto; margin-right:12%; cursor:pointer;}
.nav_menu_header_arrow_icon{font-size:18px; color:#333;}

.nav_menu_content{display:block; width:auto; padding:0; margin:/*0.5rem 0 1rem*/10px 0 20px;}
#menu_list_dashboard{display:block;}
#menu_list_recruitment, #menu_list_onboarding{display:none;}

.nav_menu_link{display:block; width:100%; font-weight:500; font-family:'Fira Sans', sans-serif; color:#888; padding:5px 0; vertical-align:middle;}

.nav_menu_link_icon{display:inline-block; width:20px; text-align:center; margin-right:10px; vertical-align:middle;}

.nav_menu_link_bullet{display:block; width:9px; height:9px; background:transparent; border:1px solid #888; border-radius:50px; margin:0 auto; vertical-align:middle;}
.nav_menu_link_bullet p{background:transparent; width:5px; height:5px; margin:1px; border:1px solid transparent; border-radius:50px;}

.nav_menu_link_title{font-weight:500; color:#888; vertical-align:middle;}

.nav_menu_link:hover .nav_menu_link_bullet{border:1px solid #004225;}
.nav_menu_link:hover .nav_menu_link_bullet p{background:#004225;}
.nav_menu_link:hover .nav_menu_link_title{color:#004225;}

.nav_menu_locked{color:#ccc !important; position:relative;}
.nav_menu_locked span{vertical-align:middle; float:right; margin-right:1rem;}
.nav_menu_locked img{width:15px; height:15px; object-fit:contain; vertical-align:middle;}

.nav_locked_tooltip{visibility:hidden; width:280px; max-width:90%; font-weight:600; color:#fff; text-align:center;
                    background:rgba(0,0,0,0.85); padding:0.25rem 1rem; border-radius:3px; position:absolute; top:95%; left:-8%; cursor:pointer;}
.nav_locked_tooltip::after{content:""; position:absolute; bottom:100%; left:50%; margin-left:-5px; border-width:5px; border-style:solid; border-color:transparent transparent rgba(0,0,0,0.85) transparent;}

.nav_menu_locked:hover{cursor:help; border-left:3px solid #f6f9fc;}
.nav_menu_locked:hover .nav_locked_tooltip{visibility:visible;}

.nav_feature_lock{display:block; width:100%; height:100%; position:absolute; top:0; left:0; background:url('https://asset.jouku.com/images/icon/icon_lock_feature_dark.png') no-repeat center/30px;}
.nav_feature_locked_box{display:block; width:100%; height:100%; pointer-events:none; opacity:0.5;}

.nav_locked_temp{display:block; width:100%; position:relative;}
.nav_locked_temp .nav_locked_temp_tooltip{visibility:hidden; width:205px; max-width:100%; font-weight:600; color:#fff; text-align:center;
                                          background:rgba(0,0,0,0.85); border-radius:3px; padding:0.5rem 0; position:absolute; top:40%; left:1%; cursor:pointer;}
.nav_locked_temp:hover .nav_locked_temp_tooltip{visibility:visible;}


.nav_link_menu{display:inline-block; height:89px; line-height:89px; color:#fff; font-family:'Fira Sans', sans-serif;
               box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
               border-bottom:2px solid transparent; padding:0; margin-right:30px; vertical-align:top; opacity:0.5; cursor:pointer;}
.nav_link_menu:hover{opacity:0.85; color:#eee; border-bottom:2px solid #ddd;}
.nav_link_menu_on{opacity:1 !important; font-family:'Fira Sans', sans-serif; color:#fff; height:89px; line-height:89px;
                 box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border-bottom:2px solid #fff;}

.nav_link_on{width:100%; color:#004225; font-weight:600; border-right:2px solid #004225; /*box-shadow:2px 0 0 0 #004225;*/ box-sizing:content-box;}
.nav_link_on .nav_menu_link_bullet{border:1px solid #004225;}
.nav_link_on .nav_menu_link_bullet p{background:#004225;}
.nav_link_on .nav_menu_link_title{color:#004225; font-weight:600; }

.nav_link_menu_buy{display:block; width:100%; height:40px; line-height:40px; font-size:13px; font-weight:600; font-family:'Fira Sans', sans-serif;
                   color:#000; text-align:center; background:#ffb000; border:2px solid #ffb000; padding:0; margin:0 auto 2rem;}
.nav_link_menu_buy:hover{color:#333; background:#ffcf9d; border:2px solid #333;}

.nav_link_menu_locked{display:inline-block; color:#fff; font-family:'Fira Sans', sans-serif; padding:0; margin-right:35px; vertical-align:middle; cursor:help; position:relative;}
.nav_link_menu_locked img{width:15px; height:15px; object-fit:contain; vertical-align:middle; margin:-2px 0 0 5px;}
.nav_link_menu_locked span{opacity:0.5;}
.nav_menu_locked_tooltip{visibility:hidden; width:150px; font-weight:600; color:#fff; text-align:center; text-transform:none; opacity:1;
                         background:rgba(0,0,0,1); padding:0.25rem 1rem; border-radius:3px; position:absolute; cursor:pointer; top:60px; left:-25%;}
.nav_menu_locked_tooltip::after{content:""; position:absolute;
                                bottom:100%; left:50%; margin-left:-5px; border-width:5px; border-style:solid; border-color:transparent transparent rgba(0,0,0,1) transparent;}

.nav_link_menu_locked:hover{cursor:help;}
.nav_link_menu_locked:hover .nav_menu_locked_tooltip{visibility:visible;}

.nav_right_menu{display:block; width:100%; font-weight:400; color:#fff; text-align:right; text-transform:uppercase;
                margin:0 auto; vertical-align:top; position:relative;}

.nav_right_menu_icon{display:inline-block; color:#fff; text-align:center; margin-right:15px; cursor:pointer;}
.nav_right_menu_icon:hover{text-decoration:underline;}
.nav_right_menu_icon_img{display:block; width:25px;height:100%; font-size:18px; color:#fff;position:relative;}

.nav_right_menu_link{display:inline-block; color:#fff; margin-right:35px; vertical-align:middle;}
.nav_right_menu_link:hover{text-decoration:underline;}

.nav_right_menu_login{display:inline-block; width:40px; max-width:65%; height:40px; background:#ddd; /*border:1px solid transparent;*/
                      border-radius:50px; vertical-align:middle; cursor:pointer; box-sizing:border-box;}

.nav_right_menu_picbox{position:relative;}
.nav_menu_arrow{display:flex; align-items:center; justify-content:center; font-size:8px; color:#333; text-align:center; 
                background:#fff; border:1px solid #eee; border-radius:50px; position:absolute; bottom:3px; right:-3px; padding:3px;}

.nav_right_menu_logo{display:inline-block; width:60%; height:100%; object-fit:contain; vertical-align:top; box-sizing:border-box;}
.nav_right_menu_nologo{display:inline-block; width:60%; height:40px; line-height:40px; font-weight:600; color:#000; text-align:center;
                       white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:top; box-sizing:border-box;}

.nav_right_menu_pic{width:100%; height:40px; object-fit:cover; border-radius:50%; box-sizing:border-box;}

.nav_right_menu_list{display:none; min-width:250px; font-weight:600; color:#333; text-align:left; text-transform:none; padding:5% 2.5%;
                     position:absolute; top:90px; right:0; background:#fff; z-index:1000; box-shadow:0px 0px 15px 0px rgba(0,66,37,0.25);
                     -webkit-box-shadow:0px 0px 25px 0px rgba(0,66,37,0.25); -moz-box-shadow:0px 0px 25px 0px rgba(0,66,37,0.25);}
.nav_right_menu_list_show{display:block;}

.nav_right_menu_list span{display:inline-block; width:25px; height:auto; font-size:13px; color:#888; vertical-align:middle;}

.nav_right_menu_list_block{display:flex; flex-direction:column; justify-content:flex-start; max-width:100%; height:auto;}

.nav_right_menu_list_each{height:auto; font-weight:500; color:#666; padding:5px 0; margin:0 15px; position:relative;}
.nav_right_menu_list_each a{color:#000; cursor:pointer;}
.nav_right_menu_list_each:hover, .nav_right_menu_list_each:hover span{color:#333;}

.nav_list_name{display:flex; align-items:center; justify-content:space-between; color:#000;}
.nav_list_name div:nth-child(1){line-height:1.25rem; word-break:break-word; overflow-wrap:break-word;}
.nav_list_name div:nth-child(2){line-height:1.25rem; width:auto; margin:0 0 0 10px !important;}

.nav_hint{color:#9ca3af !important;}
.nav_right_menu_list_line{display:block; width:100%; height:auto; border-bottom:1px solid #eee; margin:10px 0;}

.nav_notif_menu{display:block; width:80%; text-align:right; margin-left:20%; position:relative;}

.nav_notif_banner{display:block; width:100%; height:auto;}
.nav_notif_content{display:block; text-align:left; border:1px solid #eee; padding:5% 10% 10%;}
.nav_notif_details{display:block; width:100%; font-weight:600; color:#000;}
.nav_notif_details div{display:block; margin:1rem auto;}
.nav_notif_btn{display:block; width:auto; height:40px; line-height:40px; font-weight:600; color:#fff; text-align:center; text-transform:uppercase;
               background:#000; border:2px solid #000; margin-top:1rem; padding:0 15% 0 5%; background:url('https://asset.jouku.com/images/icon/icon_newtab_white.png') #000 no-repeat center right 12%/12px;}
.nav_notif_btn:hover{color:#000; background:url('https://asset.jouku.com/images/icon/icon_newtab_black.png') #fff no-repeat center right 12%/12px;}


/* ------ body, common box setting ------ */

.content_container{display:grid; max-width:1440px; min-height:100vh; padding:3rem 0; margin:0 auto; grid-template-columns:1fr 3fr 1fr;}

.content_left{
  text-align:left;
  margin-top:3rem;
  /*border-top:1px dotted pink;*/
}

.content_center{display:block; width:100%; text-align:left; margin:0 auto;}

.content_right{
  text-align:right;
  margin-top:3rem;
  position:relative;
  /* border-top:1px dotted pink; */
}


.content_notice_box{display:block; font-weight:500; background:#efe9d7; border-top:2px solid #fee9c6; padding:2.5%; margin:2rem auto; position:relative;}
.content_notice_icon{display:inline-block; max-width:5%; color:#fbb43e; font-size:18px; margin:2px 1.5% 0 0; vertical-align:top;}
.content_notice_info{display:inline-block; max-width:92%; vertical-align:top;}

.content_body_box{display:block; width:95%; margin:0 auto; box-sizing:border-box !important;}

.content_button_box{display:flex; align-items:center; justify-content:space-between; width:100%; padding:1rem 0; margin:1rem auto;}

.notification-badge{position:absolute; top:1.5rem; transform:translateX(0.75rem); background-color:#ef4444; width:1.25rem; height:1.25rem; 
                    display:none; align-items:center; justify-content:center; color:white; font-size:10px; font-weight:500; border-radius:9999px;}

/* ----- confirm css - added 29/10/2024 - 01:22pm ------ */
.jconfirm.jconfirm-white .jconfirm-box, .jconfirm.jconfirm-light .jconfirm-box{width:350px !important;}
.jconfirm .jconfirm-box div.jconfirm-title-c{display:block; font-size:1.2rem !important; font-weight:600 !important; line-height:1.5rem !important;}
.jconfirm .jconfirm-box div.jconfirm-content-pane.no-scroll{height:auto !important; max-height:auto !important;}
.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content{overflow:visible !important; font-size:1rem !important; line-height:1.5rem !important;
                                                                    margin:0.5rem auto 1rem !important;}
.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button, 
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button{text-transform:capitalize !important; font-size:0.9rem !important; font-weight:600 !important;
                                                                font-family:'Fira Sans', sans-serif !important;
                                                                margin-left:0.5rem !important; outline:none !important; border-radius:0 !important;}


/* ----------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------- media css - added 08/12/2023 - 04:25pm - updated 22/10/2024 - 05:11pm --------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------- */

@media only screen and (min-width:320px) and (max-width:480px) {

  .nav_menu_bar, .content_left, .content_right{display:none;}

  .content_center{display:block; width:100%; max-width:100%; margin:0 auto;}

  .nav_menu_container, .content_container{max-width:90%; grid-template-columns:auto;}

  .content_notice_box{padding:5%;}
  .pro_flexbox{display:block;}
  .pro_checkbox{max-width:100%; text-align:left;}
  
  .default_header{line-height:2.5rem;}
  
  .content_button_box{display:block; padding:0; margin:0 auto;}
  
  /*.pro_upgrade_box{height:auto; padding:5%; overflow:auto;}*/
  /*.pro_upgrade_block{display:block; height:auto; margin:1rem auto 0;}*/
  /*.pro_upgrade_content{display:block; width:100%; padding:0; border:none;}*/
  /*#plan_ent{display:none;}*/
  /*#plan_pro .pro_upgrade_button{display:block; width:100%; position:static; transform:none; margin:0 auto;}*/
  
}

@media only screen and (min-width:481px) and (max-width:660px) {

  .nav_menu_bar, .content_left, .content_right{display:none;}

  .content_center{display:block; width:100%; max-width:100%; margin:0 auto;}

  .nav_menu_container, .content_container{max-width:90%; grid-template-columns:auto;}

  .content_notice_box{padding:5%;}
  .pro_flexbox{display:block;}
  .pro_checkbox{max-width:100%; text-align:left;}
  
  .default_header{line-height:2.5rem;}
  
  .content_button_box{display:block; padding:0; margin:0 auto;}
  
  /*.pro_upgrade_box{min-width:350px; height:auto; padding:5%; overflow:auto;}*/
  /*.pro_upgrade_block{display:block; height:auto; margin:1rem auto 0;}*/
  /*.pro_upgrade_content{display:block; width:100%; padding:0; border:none;}*/
  /*#plan_ent{display:none;}*/
  /*#plan_pro .pro_upgrade_button{display:block; width:100%; position:static; transform:none; margin:0 auto;}*/
  
}

@media only screen and (min-width:661px) and (max-width:720px) and (orientation:portrait) {

  .nav_menu_bar, .content_left, .content_right{display:none;}

  .content_center{display:block; width:100%; max-width:100%; margin:0 auto;}

  .nav_menu_container, .content_container{max-width:90%; grid-template-columns:auto;}

  .content_notice_box{padding:2.5%;}
  .pro_flexbox{display:block;}
  .pro_checkbox{max-width:100%; text-align:left;}

  .default_header{line-height:2.5rem;}
  
  .content_button_box{display:block; padding:0; margin:0 auto;}

}

@media only screen and (min-width:721px) and (max-width:920px) {

  .nav_menu_bar, .content_left, .content_right{display:none;}

  .content_center{display:block; width:100%; max-width:100%; margin:0 auto;}

  .nav_menu_container, .content_container{max-width:90%; grid-template-columns:auto;}

  .pro_flexbox{display:block;}
  .pro_checkbox{max-width:100%; text-align:left;}
  
  .default_header{line-height:2.5rem;}

}

@media only screen and (min-width:921px) and (max-width:980px) {

  .content_right{display:none;}

  .nav_link_menu{margin-right:2.5%;}
  .nav_right_menu_login{width:auto; height:auto; padding:0; background:none; border:none;}
  .nav_right_menu_logo{display:none;}
  .nav_right_menu_pic{width:40px; max-width:100%; height:40px; margin:0;}

  .nav_menu_list{width:85%;}
  .nav_notif_menu{width:85%; margin-left:15%;}

  #menu_opt_help{display:none;}

  .nav_menu_container{max-width:90%; grid-template-columns:30% 55% 15%;}
  .content_container{max-width:90%; grid-template-columns:30% 70%;}

  .pro_flexbox{display:block;}
  .pro_checkbox{max-width:100%; text-align:left;}
  
  .default_header{line-height:2.5rem;}

}

@media only screen and (min-width:981px) and (max-width:1023px) {

  .content_right{display:none;}

  .nav_link_menu{margin-right:2.5%;}
  .nav_right_menu_login{width:auto; height:auto; padding:0; background:none; border:none;}
  .nav_right_menu_logo{display:none;}
  .nav_right_menu_pic{width:40px; max-width:100%; height:40px; margin:0;}

  .nav_menu_list{width:85%;}
  .nav_notif_menu{width:85%; margin-left:15%;}

  #menu_opt_help{display:none;}

  .nav_menu_container{max-width:90%; grid-template-columns:30% 55% 15%;}
  .content_container{max-width:90%; grid-template-columns:30% 70%;}

  .pro_flexbox{display:block;}
  .pro_checkbox{max-width:100%; text-align:left;}
  
  .default_header{line-height:2.5rem;}

}

@media screen and (min-width:1024px) and (max-width:1200px) {

  .content_right{display:none;}

  .nav_link_menu{margin-right:2.5%;}
  .nav_right_menu_login{width:auto; height:auto; padding:0; background:none; border:none;}
  .nav_right_menu_logo{display:none;}
  .nav_right_menu_pic{width:40px; max-width:100%; height:40px; margin:0;}

  .nav_menu_list{width:85%;}
  .nav_notif_menu{width:85%; margin-left:15%;}

  #menu_opt_help{display:none;}

  .pro_flexbox{display:block;}
  .pro_checkbox{max-width:100%; text-align:left;}
  
  .nav_menu_container{max-width:90%; grid-template-columns:30% 55% 15%;}
  .content_container{max-width:90%; grid-template-columns:30% 70%;}

}

@media screen and (min-width:1201px) and (max-width:1439px) {

  .nav_menu_list{width:85%;}
  .nav_notif_menu{width:85%; margin-left:15%;}

  .pro_flexbox{display:block;}
  .pro_checkbox{max-width:100%; text-align:left;}
  
  .nav_menu_container{max-width:90%; grid-template-columns:23% 55% 22%;}
  .content_container{max-width:90%; grid-template-columns:23% 55% 22%;}

}

@media screen and (min-width:1440px) and (max-width:1600px) {

  .pro_flexbox .temp_notice_btn, .pro_checkbox{flex:1;}
  
  .nav_menu_container, .content_container{max-width:90%; grid-template-columns:22% 55% 22%;}

}

@media screen and (min-width:1601px) and (max-width:2500px) {

}

@media only screen and (max-device-width:480px) and (orientation:portrait) {

  .nav_menu_bar, .content_left, .content_right{display:none;}

  .content_center{display:block; width:100%; max-width:100%; margin:0 auto;}

  .nav_menu_container, .content_container{max-width:90%; grid-template-columns:auto;}

  .content_notice_box{padding:5%;}
  .pro_flexbox{display:block;}
  .pro_checkbox{max-width:100%; text-align:left;}
  
  .default_header{line-height:2.5rem;}
  
  .content_button_box{display:block; padding:0; margin:0 auto;}
  
}

@media only screen and (max-device-width:720px) and (orientation:landscape) {

  .nav_menu_bar, .content_left, .content_right{display:none;}

  .content_center{display:block; width:100%; max-width:100%; margin:0 auto;}

  .nav_menu_container, .content_container{max-width:90%; grid-template-columns:auto;}

  .content_notice_box{padding:2.5%;}
  .pro_flexbox{display:block;}
  .pro_checkbox{max-width:100%; text-align:left;}

  .default_header{line-height:2.5rem;}
  
  .content_button_box{display:block; padding:0; margin:0 auto;}

}

/* --------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------- END media css - added 08/12/2023 - 04:25pm - updated 22/10/2024 - 05:11pm --------------------------- */
/* --------------------------------------------------------------------------------------------------------------------------------- */