:root {
  --basecc: #00308f;
  --navh: 80px;
  --footerh: 60px;
  --dech: 80px;
  --minw: 1024px;
  --purplecc: #1974d2;
  --purplell: #00308f;
  --purplebd: #DC4949;
  --bluecc: #0050FF;
	--redcc:#cd2828;
	
	--lblue:#e3ecff;
	--lblue_tt:#0050FF;
	--lred:#ffece3;
	--lred_tt:#FF3B00; 
	--lgreen:#eaf5e9;
	--lgreen_tt:#0DA700;
}
/*


var(--purplell)
var(--lred)
var(--lgreen)
*/
body{ 
min-height:100vh; 
 
margin:0; padding:0;

  position: relative;
color: #555555;
font-size:16px;
  background: #ffffff;
/*
min-width:var(--minw);
 */
  overflow: auto;

} 

.form-control {
  border-color: var(--purplecc) !important;;
}

*{ border-radius:0 !important;}
a,button{ outline:0;}
.btn-link,
a{ color:#fff}
.btn-link:hover,
a:hover{ color:#fff}
body.inner{ 
min-height:100vh; padding-bottom:0;
} 


body.inner #section_footer{ /*position:absolute; left:0; bottom:0; height:60px; width:100%; overflow:hidden; z-index:1;*/ display: none;
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus,
.btn-check:focus + .btn-info, .btn-info:focus { 
  box-shadow: 0 0 0 0;
}

.nouline{ text-decoration:none}
.container {
    max-width: 1280px;  
}

.container.inn {
    max-width: 1140px;  
}
.container.inn2 {
    max-width: 1400px;  
}


section{ margin:0; padding:0; }
.section_p{ padding:25px 25px 40px 25px; margin:0 0 0 0;
}

body.home{


}

.btn{ border-radius: 0 !important;}

.inner.modal-open  #nav,
.home.modal-open  #nav{z-index:900;}

/*------------------------------LOGIN-------------------------------------*/

#home_cnt_inner{  padding:0 0 0 0;margin:0; width:100%; /*min-height:calc(100vh - var(--footerh));*/
 height:100vh ;
  display:flex;
flex-wrap: no-wrap;
 justify-content: center;
 align-items:center;
 
 
 -moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-repeat: no-repeat; 
background-position: 50% 50%;
position:relative;
max-width:100%; 
background-color:#444;
 

}
#home_cnt_inner.staff{background-image:url(../images/bg.jpg) }
#home_cnt_inner.fpwd,
#home_cnt_inner.member{background-image:url(../images/bg.jpg) }
  
.t_blue{ color:var(--bluecc)}
.t_pp{ color:var(--purplecc)}
.bg_pp{ background:var(--purplecc)}
 .t_rr{color:#ce605d} 
#home_cnt_inner .lbx{  
padding:20px 40px 20px 40px; width:100%; max-width:480px;
background:rgba(255,255,255,0.9); border-radius:0 !important;   
  box-shadow: 0 0 4px 2px #aaa; margin:0 auto;
}
#home_cnt_inner  h1{ font-size:24px; text-transform:uppercase; text-align:center; font-weight:bold; margin:0 0 18px 0; padding:20px; border:0;  color:#00308f;}
#home_cnt_inner.lg3  h1,
#home_cnt_inner.lg2  h1{ font-size:34px; }

#home_cnt_inner .i_tt{ margin:0 0 5px 0; font-weight:300; letter-spacing:3px;  text-align:center; color:var(--basecc);}
#home_cnt_inner .inp_js{ margin:0 0 15px 0;}
.infoform label.error{ display: block;background:rgba(255,0,0,0.8); color:#fff; padding:10px; margin:0 0 10px 0; font-size:12px;}
#home_cnt_inner #error_ct{display:block; position:relative; min-height:30px;}
.mybtn:hover{opacity:0.7}
.mybtn.loginbtn{padding:9px 60px 9px 60px; }
#infoform #sb_div{ text-align:center; margin:10px 0 0 0;}

#section_footer {display:none; width:100%;  height:var(--footerh); padding:0 10px 0 10px; background:var(--purplell)}
#section_footer span,
#section_footer a{ color:#fff; line-height:var(--footerh); color:var(--basecc); font-size:16px; display:inline-block; padding:0 5px 0 5px;}


#section_footer.login{ position:fixed; bottom:0; left:0; text-align:center; background:0; display:none}
#section_footer.login span,
#section_footer.login a{ color:#fff; line-height:var(--footerh); text-shadow: 0 0 4px #444; font-size:16px;  display:inline-block; padding:0 5px 0 5px;}


/*------------------------------LOGIN-------------------------------------*/

/*------------------------------NAV-------------------------------------*/  

 #tt_cnt{  color:var(--basecc);font-size:18px; font-weight:bold; margin:0 0 5px 0 ; text-align:right;
  display:flex;
flex-wrap: nowrap;
 justify-content: flex-end;
 }
 #sbg_cnt{ width:70%; text-align:right;
   display:block;  height:80px; 
 }
 #sd_cnt{ width:100%; text-align:right; background:var(--basecc);
 height:80px; padding:0 0 0 0;
     display:flex;
flex-wrap: nowrap;
 justify-content: flex-end; align-items:center;
 }
 #sd_cnt2{ padding:0 15px 0 0;}
 #nav_cnt  #tt_cnt{margin:15px 0 5px 0 ;}
 #tt_cnt a.chglang{ font-size:16px;}
  #sbg_cnt a{ color:var(--basecc);display:inline-block; cursor:pointer;margin: 0 10px 0 10px;}
  #sbg_cnt a:last-child{ margin-right:0}
 
  #sbg_cnt span{ display:inline-block; height:20px;width:1px; background:#fff; margin: 2px 5px 0 5px; overflow:hidden; color:#fff; opacity:0.5;}
  
  #sd_cnt div,
  #sd_cnt p,
  #sd_cnt a,
  #sd_cnt span{ font-size:14px;  color:#fff; margin:0;}
  #sd_cnt div{ font-size:16px; font-weight:bold;}
  #sd_cnt span{  margin:0 13px 0 3px;}
  
   #sbg_cnt a.pos-rel{ position:relative;margin: 0 10px 0 10px;}
   #sbg_cnt span.alb{ padding:0 4px 0 4px;   border-radius:8px !important; font-size:12px; line-height:16px; font-weight:bold; background:#f00; color:#fff; display:block;
   position: absolute; top:-3px; right:-6px; opacity:1; margin:0; height:16px; width:auto; text-align:center}
  
  
 #nav{ height:var(--navh); overflow: visible; padding:0; background:#fff ;overflow:hidden; flex-wrap:wrap !important; } 
#nav_cnt{ width:100%; max-width:1280px;
	 height:var(--navh);
  display:flex;
flex-wrap: nowrap;
 justify-content: space-between; align-items:center; margin:0 auto;}
 
     #ssbtn_cnt{ width:30%; position: relative}
      #ssbtn{ width:100%; padding:0; line-height:80px; text-align:center; background:#1974d2;}
	  
 
 #nav.staff{ height:var(--navh); overflow:hidden; padding:0; background:#5924d4;
display:flex;
flex-wrap: nowrap;
 justify-content: space-between; align-items:center;  } 
 #nav .container-fluid-cnt{ background:var(--basecc);padding:0;  height:40px;  width:100%;
 display:flex;
flex-wrap: nowrap;
 justify-content:center; align-items:center;}
  #nav .container-fluid .navbar-brand{ display:none;}
 #nav .container-fluid{ float:left; background:0;padding:0; height:40px;  width:100%; max-width:1280px; margin:0 auto; position:relative}
 
 #nav .container-fluid a{color:#fff;} 
  #nav .container-fluid .navbar-toggler{ display:none;}
  #nav   #navbarNavAltMarkup{ background:0;padding:0;}
    #nav .container-fluid .navbar-nav{ width:100%; display:flex; flex-wrap:  wrap;
 justify-content: center; align-items:center;}
      #nav .container-fluid .navbar-nav .nav-link {width:auto; display:inline-block; padding:0 30px 0 30px; line-height:40px; text-align:center}
      #nav .container-fluid .navbar-nav .nav-link.active { border-radius:15px 15px 0 0 !important; background:#fff;color:var(--basecc); height:34px; margin:6px; width:auto; display:inline-block; padding:0 30px 0 30px; line-height:34px; text-align:center}
  
 #logo_cnt{ height:100%; width:200px; margin:0 0 0 20px;}
 #logo_cnt a{ display:block; height:100%; width:100%;}
  #nav{ position:fixed; left:0; top:0; width:100%; z-index:1000; }
    #nav_gap{ height:var(--navh); display:block;}
 /*   #nav_gap.login{ height:0; display:none;}*/
    #nav.login #sd_cnt{  margin:43px 20px 0 0;}
 
/*------------------------------NAV-------------------------------------*/ 
 
  
/*------------------------------STAFF-------------------------------------*/ 


#inner_cnt.row{ background:#f0f0f0; margin:0; padding:0;  
min-height:calc(100vh - var(--dech));
}

#side_cnt{ background:#fff; padding:0;  }
#main_cnt{background:#fff; padding:0 ;}
#main_cnt.mb{background:#fff; padding:0 0 0 0;}
#main_cnt_inner{ padding:0 60px 60px 60px;}
#main_cnt.mb #main_cnt_inner{  padding:0 0 60px 0;}

 

 #side_nav{margin:15px 0 0 0; padding:8px 10px 10px 10px; border:0; }
 #side_nav li {display:block;width:100%; }
 #side_nav li a.side_link{ display:block;width:100%; line-height:16px;border:1px solid #fff; padding:12px 20px 12px 20px;}
 #side_nav li a.side_link:hover{border:1px solid var(--basecc); }
 #side_nav li a.side_link.active{ color:#fff; background:var(--basecc) }
 
 #inner_pplcnt{ height:calc(100vh - 290px); position: relative}
 #edit_main #inner_pplcnt{ height:auto}
 #inner_pplcnt #sc_ppl_inner{ height:calc(100vh - 340px);   overflow:auto;  }
 
 #inner_pplcnt .fx_cnt{width:100%;  height:40px;  display:flex;
flex-wrap: nowrap;
 justify-content: space-between; align-items:center;position: absolute; bottom:0; left:0}
 
 #inner_pplcnt .fx_cnt p{ display:block;margin:0; padding: 0 0 0 15px; line-height:40px;}
 
 #tlist_left_cnt{ border:1px solid #eee; padding:15px 5px 0 5px; margin:10px 0 10px 0;}
 
 #log_menu_row{align-content:flex-start;}
 #log_menu{display:flex; margin:20px 0 0 0;
flex-wrap: nowrap; height:40px;
 justify-content: center; align-items:center;}
  #log_menu a{ margin:0 10px 0 10px;}
/*------------------------------STAFF-------------------------------------*/ 

/*------------------------------LIST-------------------------------------*/ 
.list_view_main{ background:#fff; display:block; /* overflow:hidden*/}
.lv_main{ }
.list_view .lv_tt h1{ font-size:36px !important; line-height:45px; font-weight:bold; color:var(--basecc); margin:0;}
.list_view  h1{ font-size:20px !important; line-height:45px; font-weight:bold; color:var(--basecc); margin:0;}
.list_view .lv_btn_cnt{ text-align:right}
.lvcnt_flr{
display:flex;
flex-wrap: nowrap;
 justify-content: space-between; align-items:center;
padding:15px 15px 15px 15px; line-height:30px;
} .lvcnt_flr.end{ justify-content: flex-end; }
.lvcnt_flr .d2{justify-content: flex-start; align-items:center;} 
.lvcnt_flr .d1{justify-content: flex-end; align-items:center;}
.lvcnt_flr .d1 p{ line-height:18px;}

.lvcnt_flr.fr{ justify-content: flex-end;}
.lvcnt_flr.bwn{ justify-content: space-between;}
.lvcnt_flr.line2{ padding-top:0;}

.lvcnt_flr .lv_select{ width:200px; margin: 0 20px 0 0}
.lvcnt_flr .lv_input{ width:200px; margin: 0 20px 0 0}
.lvcnt_flr.fr .lv_input{ margin:0}
.lvcnt_flr.bwn .lv_input{ margin:0}


 .lvcnt_flr #m_resp_dn_btn,
 .lvcnt_flr #m_del_fps_btn,
 .lvcnt_flr .m_del_btn{ display:none; line-height:16px; height:30px; white-space: nowrap; padding:6px 15px 6px 15px; font-size:14px;} 
 .lvcnt_flr.show_del #m_resp_dn_btn,
 .lvcnt_flr.show_del #m_del_fps_btn,
 .lvcnt_flr.show_del .m_del_btn{display: block; }
 
 
.lvcnt_th,
.lvcnt_tdcnt,
table.list_table{ width:100%; /* overflow:hidden;*/ table-layout:fixed}
table.list_table .cbox{ text-align:center;}
table.list_table th{   padding:10px 10px 10px 10px; background:var(--purplell)}
table.list_table td{ vertical-align:middle;  padding:3px 10px 3px 10px;  border-bottom:1px solid #C7C5C5;  }

table.list_table.form_list_done   th,
table.list_table.mb_home th{   padding:10px 10px 10px 10px; background:#fff; border-bottom:1px solid #ccc !important;}
table.list_table.form_list_done   td,
table.list_table.mb_home td{ border:0;   }

table.list_table.nosort th i.fa{ display:none}
table.list_table.nobgc th{ background:#fff}
table.list_table.nobgc th,
table.list_table.nobgc td{ border:0}

table.list_table.with_status1 td{ background:var(--lblue)}
table.list_table.with_status2 td{ background:var(--lred)}
table.list_table.with_status3 td{ background:var(--lgreen)}

 #nav_cnt{  
 justify-content: flex-end;}
  #logo_cnt{ display:none}
table.list_table.qrlist  .th0{ width:25%;} 
table.list_table.qrlist  .th1{ width:20%;}  
table.list_table.qrlist  .th2{ width:25%;}
table.list_table.qrlist  .th3{ width:15%;} 
table.list_table.qrlist  .th4{ width:15%; min-width:60px; text-align:right} 
table.list_table.qrlist  .th5{  } 
.list_table  tr.done td{ background-color:#ccf1ff; color:#00308f}
.list_table  td table td,
.list_table  tr.done td table td{ background-color:#fff; color:#00308f; text-align:left }
 
  
	  #reader_cnt{display:flex;
flex-wrap: wrap; width:100%; max-width:360px; margin:0 auto;
 justify-content: center; align-items:center;}
  #reader{ width:250px; height:250px; overflow:hidden; border:4px solid #444; background:#fff; position: relative;}
  #reader_res{ position: relative; width:100%; max-width:360px; height:250px; margin:0 auto; margin-top:15px; border:1px solid #ccc;}
  
   
  
   #reader #nextbtn{ display:block; width:250px; height:250px; position: absolute; left:0;top:0; background:rgba(0,0,0,0.9); text-align:center; line-height:250px; font-size:20px; color:#fff}
  
  .email_sp{ word-break: break-all;}
   

table.list_table .th0{ /*white-space: nowrap*/}
table.list_table th.cbox,
table.list_table td.cbox{width:32px; min-width:32px !important} 
table.list_table .blank.th0{ width:1%;} 
.edit_resp table.list_table .blank.th0{ width:0.5%; padding:0;} 

table.m_quest .th6,
table.m_quest_incat .th5,
table.m_quest_cat .th4 { text-align:right; min-width:160px;  }

.alert{ font-size:16px;}

.mybtn{cursor:pointer; background:var(--purplecc); border:0;  color:#fff; font-size:16px; display:inline-block; padding:10px 25px 10px 25px;
white-space: nowrap; opacity:1;   border-radius:0 !important; text-align:center; max-width:100%  }
.mybtn:hover{color:#fff; }
.mybtn.outline{ color:var(--purplecc); background:#fff; }
.mybtn.outline:hover{color:var(--purplecc); }

.mybtn.min{ padding:2px 25px 2px 25px;}
.mybtn.blue{ background:var(--bluecc); border:1px solid var(--bluecc);}
.mybtn.green{ background:#10ae00; border:1px solid #10ae00;}


.mybtn.red{ background:var(--redcc); border:1px solid var(--redcc);}
.mybtn.red.outline{ color:var(--redcc); background:#fff; }
.mybtn.red.outline:hover{color:var(--redcc); }
 
.mybtn.lblue{ background:var(--lblue); border:1px solid var(--lblue);	color:var(--lblue_tt); }
.mybtn.lred{ background:var(--lred); border:1px solid var(--lred);	color:var(--lred_tt); }
.mybtn.lgreen{ background:var(--lgreen); border:1px solid var(--lgreen);	color:var(--lgreen_tt); }

 
 
nav.pager_cnt{ text-align:center; width:100%;}
.pagination{ margin:20px auto 25px auto; display:flex;
flex-wrap: nowrap; padding:0 0 20px 0;
 justify-content: center; align-items:center;
 }
#toppager_cnt .pagination{ margin:0 auto 0 auto; display:flex;
flex-wrap: nowrap; padding:0 0 10px 0;
 justify-content: center; align-items:center;
 }

 ul.pagination{}
 ul.pagination li.page-item{ margin:0 3px 0 3px }
 ul.pagination li.page-item a.page-link{ border:0; font-size:14px;  color:#222;
    transition: all .3s ease-in-out; cursor:pointer}
 ul.pagination li.page-item a.page-link{ background:#f0f0f0}
 ul.pagination li.page-item a.page-link.ar{background:#d6d6d6}
 ul.pagination li.page-item a.page-link.active{background:var(--purplecc); color:#fff} 
 
 ul.pagination li.page-item a.page-link:hover,
 ul.pagination li.page-item a.page-link.ar:hover{background:var(--purplecc); color:#fff} 

 ul.pagination li.page-item a.page-link.disable:hover,
 ul.pagination li.page-item a.page-link.disable{background:#d6d6d6; color:#ddd}
 
 .list_table .btn.btn-light{ padding:0; height:28px; width:28px; background:0; border:0;
    transition: all .3s ease-in-out; color:var(--basecc);}
  .list_table .btn.btn-light:hover{ opacity:0.5}
 .list_table .btn.btn-light .fa{height:28px; width:28px; line-height:28px;}
 .list_table .btn.btn-light .fa.fa-chevron-right{ color:var(--basecc);}  /*
  .list_table .btn.btn-light .fa.fa-download::before ,
  .list_table .btn.btn-light .fa.fa-search::before ,
  .list_table .btn.btn-light .fa.fa-plus::before ,
  .list_table .btn.btn-light .fa.fa-copy::before ,
  .list_table .btn.btn-light .fa.fa-times::before ,
  .list_table .btn.btn-light .fa.fa-pencil::before {  content: "";}

  .list_table .btn.btn-light .fa.fa-copy{background:url(../images/ico_copy.png) no-repeat 50% 50%; }
  .list_table .btn.btn-light .fa.fa-pencil{background:url(../images/ico_edit.png) no-repeat 50% 50%; }
  .list_table .btn.btn-light .fa.fa-times{background:url(../images/ico_del.png) no-repeat 50% 50%; }
  */
  .list_table .btn.btn-light .fa.fa-times{color:#222; }
  
  .list_table .btn.btn-light .fa.fa-hand-pointer-o{ font-size:26px; color:var(--purplecc);}

  
  /*
  .list_table .btn.btn-light .fa.fa-download{background:url(../images/ico_download.png) no-repeat 50% 50%; }
  .list_table .btn.btn-light .fa.fa-search{background:url(../images/ico_search.png) no-repeat 50% 50%; }
  .list_table .btn.btn-light .fa.fa-plus{background:url(../images/ico_add.png) no-repeat 50% 50%; }
  */
  
  .badge {padding:8px 15px 8px 15px !important;; border-radius:15px !important; white-space: normal !important; width:100%; text-align:center}
  .badge.bg-danger{ background-color:#fee9e8 !important;color:#965b5b !important}
  .badge.bg-info { background-color:#f0f4ff  !important; color:#5c80b5}
  
  .sort_list_btn{}
  .sort_list_btn .fa-arrow-up,
  .sort_list_btn .fa-arrow-down{ display:none}
  
  .sort_list_btn.asc .fa-arrow-up{ display:inline-block}
  .sort_list_btn.asc .fa-arrow-down{ display:none}
  .sort_list_btn.desc .fa-arrow-up{ display:none}
  .sort_list_btn.desc .fa-arrow-down{ display:inline-block}
  .sort_list_btn { cursor:pointer}
  
#search_inp2_cnt,
#search_inp_cnt{ width:160px;display:flex; flex-wrap: nowrap;
 justify-content: flex-start; align-items:center;
 border:1px solid var(--basecc);
 height:31px; overflow:hidden;}
#search_inp2_cnt #search_inp2_btn,
#search_inp_cnt #search_inp_btn{width:60px; color:#fff; background:var(--basecc); line-height:30px; font-size:12px; height:30px; padding:0 8px 0 8px;    text-align:center; display:block}
#search_inp2_cnt .form-control,
#search_inp_cnt .form-control{ border:0; width:85px}
  
  tr.highlight_row td{ background:#f7f7f7;}
  
  .action_btn_cnt{display:flex; flex-wrap: nowrap;
 justify-content: flex-start; align-items:center;}
  .action_btn_cnt.left{ justify-content: flex-start;} 
 
 .highlight{ background:#FF0;}
 
 .list_table .btn.btn-light .fa.fa-eye{display:block; height:30px; width:30px; margin:5px auto; line-height:30px; background:#5924d4; color:#fff;  border-radius: 5px !important;}
 
 .list_table .btn.btn-light.upstat_after  .fa,
 .list_table .btn.btn-light.upstat_btn  .fa{display:block; height:30px; width:30px; margin:5px auto; line-height:30px; font-size:24px; background:0; color:#cc0000;  border-radius: 5px !important;}
 
/*------------------------------LIST-------------------------------------*/ 

/*------------------------------EDIT-------------------------------------*/ 

.new_tt{ font-size:36px !important; line-height:45px; font-weight:bold; color:var(--basecc); margin:0;}
.edit_tt{ margin:0;font-size:20px !important; font-weight:bold; color:var(--basecc); }

.edit_view_btncnt{display:flex; flex-wrap: nowrap;
 justify-content: flex-start; align-items:center;}
 
 .edit_view_main{ background:#fff; padding:20px 25px 5px 25px;}
 
.edit_tt_flex{display:flex; flex-wrap: nowrap;
 justify-content: flex-start; align-items:center;}
 
 
 .edit_resp_cnt #v-pills-tab{ width:30%; margin:0;}
  .edit_resp_cnt #v-pills-tab .nav-link{ text-align:left;}
 .edit_resp_cnt .tab-content{width:70%; min-height:600px;  background:#fff; padding:30px;}
  .edit_resp_cnt #v-pills-tab .nav-link{ padding:20px; background:0; font-weight:bold;color:var(--purplecc);}
  .edit_resp_cnt #v-pills-tab .nav-link.active{ padding:20px; background:#fff;color:var(--purplecc);}
 
 
 .reply_box{ display:flex;flex-wrap: wrap;
 justify-content: space-between; }
 .input_fix{ display:block; padding:10px 10px 10px 10px;  line-height:20px; width:85%; border:1px solid #eee;}
 .reply_btn{ width:14%; padding:0 10px 0 10px;height:40px; line-height:40px; }
 .reply_cnt .collapse{ background:var(--purplell); color:var(--basecc)  ;  padding:20px 20px 20px 20px; width:100%;}
 .reply_cnt .collapse .btn{ }

  .reply_cnt .collapse.show{ border-top:1px solid var(--purplebd); }
 .resp_rp_content_outter{ padding:0 15px 0 15px;}
 .resp_rp_content{ padding:30px; background:#fff;  margin:0 0 20px 0 }
.resp_rp_tt{ margin:20px 0 0 0; padding:0 15px  0 15px;}
.resp_rp_tt h2{ position:relative;}
.resp_rp_tt span.dot{  background:var(--purplecc);color:#fff; height:30px; width:30px; line-height:30px; font-size:14px; text-align:center; display:block;  border-radius:15px !important;}
.resp_rp_tt .clp_btn{ width:40px; display:inline-block}
.resp_rp_tt h2  b{color:var(--purplecc); font-size:16px; line-height:19px; position:absolute; white-space:no-wrap; width:90%; min-width:400px; left:40px; top:5px;  }
.resp_rp_tt .clp_btn.clp_btn_intt{ width:100%;  
display:flex;flex-wrap: wrap;
 justify-content: flex-start;  align-items:center;color:#666;
}

 .resp_rp_content.intt{ padding:0;}
.resp_rp_tt.intt{ margin:0; padding:0;}

.radio_cnt{ position: relative;}
.sort_li{ cursor:move;}

.comm_box_cnt{ padding:20px;  background:var(--purplell);}

#myTab .nav-link{ font-size:16px; padding:20px; border:0;}
#myTab.nav-tabs .nav-link {color:var(--purplecc);}
#myTab.nav-tabs .nav-link.active {
  color: #222;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{ border:0;}
 .tab-content{ padding:20px; background:#fff; min-height:400px;}
 .select2-selection__rendered{ padding:7px 10px 7px 10px !important}
.select2-container .select2-selection--single{ height:42px!important}
.select2-container--default .select2-selection--single .select2-selection__arrow{ top:5px !important; right:5px !important;}

#Tab_imp .nav-link.active{ border:1px solid #ccc; border-bottom:1px solid #fff; color:#444; }

#Tab_imp .nav-link{color:var(--purplecc);}
 
 .text-success.ppd{color:var(--purplecc) !important;}
/*------------------------------EDIT-------------------------------------*/ 

/*------------------------------FORM---------------------------*/
.form-control{ border-color:#C7C5C5;    }
.form-select{ border-color:var(--purplebd); border-width:1px}

 
.clp_btn .on{ display:inline-block}
.clp_btn .off{display:none}
.clp_btn.collapsed .on{ display:none}
.clp_btn.collapsed .off{display:inline-block }
.qs_inner_cnt{ border:1px solid var(--purplell); padding:10px}
.qs_inner_cnt .table,
.qs_inner_cnt .table td{ border:0}
.form-check-input:checked[type="radio"] {
  background-image: url('../images/dot.svg');
}
.form-check-input:checked[type="checkbox"] {
  background-image: url('../images/check.svg');
}

.form-select { 
  background-image: url('../images/arrow_d.svg'); 
}


/*------------------------------FORM-----------------------------*/


/*------------------------------STAFF HOME-----------------------------*/
.home_btn{ display:block; background:#fff;  text-align:center;margin:10px 0 20px 0; padding:20px 20px 30px 20px; border-radius:10px 10px 10px 10px !important;}
.home_btn span{display:block; font-weight:bold; text-align:center; color:var(--basecc);}
.home_btn:hover{opacity:0.5}

.home_resp_cnt{display:block; background:#fff; padding:5px 20px 20px 20px; border-radius:10px 10px 10px 10px !important;}

.home_stbb{ border:1px solid   #A3C0FF; padding:10px;  border-radius:10px 10px 10px 10px !important;}
/*------------------------------STAFF HOME-----------------------------*/


/*------------------------------MOdal-------------------------------------*/ 

#myModal .modal-dialog{ height:100%; width:100%; overflow-y:auto; display:flex;flex-wrap: nowrap;
 justify-content: center; align-items:center; margin:0 auto 0 auto;}
#myModal .modal-dialog.top{ align-items:flex-start;} 
#myModal .modal-content{ /*margin-bottom:10vh;*/ padding:0 0 30px 0;
border-radius: 0  !important; overflow:hidden;

}
 #myModal .modal-header{ padding:8px 10px 0 0; border:0;}
 #myModal .modal-header.have_tt{  background:var(--purplecc);color:#fff;  padding:0 10px 0 10px; margin:0 0 10px 0; border:0; border-radius: 0 !important; }
  #myModal .modal-header.have_tt  .modal-title{padding:13px 0 12px 0; font-weight:bold;} 
  
 #myModal .modal-header.have_tt.del_header{ background:#cd2828; padding:0px 10px 0 10px; border:0;}
  #myModal .modal-header.have_tt.del_header  .modal-title{padding:5px 0 5px 0; font-weight: normal;color:#fff} 
  
 #myModal .modal-header.have_tt.pd0{ padding:5px 10px 0 15px; border:0;}
  /*
   #myModal .modal-header.have_tt.del_header   .btn-close:hover,
   #myModal .modal-header.have_tt.del_header  .btn-close{ color:#fff; opacity:1;}
   */
   
   #myModal .modal-header  .btn-myclose{ overflow:hidden; position:relative; background:0; width:32px; height:32px; opacity:1; display:inline-block}
   #myModal .modal-header  .btn-myclose .d2,
   #myModal .modal-header  .btn-myclose .d1{ position:absolute;  display:inline-block; width:20px; height:1px; border-bottom:1px solid #fff; background:#fff;}
 	#myModal .modal-header  .btn-myclose .d1{ top:16px; left:8px;  transform: rotate(45deg);}
	#myModal .modal-header  .btn-myclose .d2{top:16px; left:8px;   transform: rotate(-45deg);}
   #myModal .modal-header.del_header   .btn-myclose .d2,
   #myModal .modal-header.del_header   .btn-myclose .d1{ border-bottom:1px solid #fff; background:#fff; }
   
 #myModal .modal-footer{ padding:10px 0 10px 0; border:0;
 display:flex; flex-wrap: nowrap;
 justify-content:center; align-items:center;
 }
 #myModal .modal-body{ padding:0px 30px 5px 30px; border:0;max-height:80vh; overflow-y:auto;}
 #myModal #aj_table_cnt{max-height:calc(70vh - 90px); overflow:auto} 
 
 
  table.list_table.have_scl{ width:calc(100% - 19px); }
 #res_cnt #list_table_cnt.popup{ max-height:calc(70vh - 200px); overflow-y: scroll;}
/*------------------------------MOdal-------------------------------------*/

/*------------------------------Member-------------------------------------*/

#mb_cnt{ width:100%; margin:0 auto; max-width:640px; padding: 0 0 0 0; min-height:100%; position: relative; display:flex;  } 
 #mb_cnt .badge { width:220px; text-align:center}
 #mb_cnt .form_list_done   .badge { width:100%; text-align:center}
  #mb_cnt .mb_cnt_rw{ min-height:100%;width:100%; }
  #mb_cnt .mb_cnt_left{ min-height:100%; border-right:1px solid #ccc;}
 
 #sidebar {    width:340px; overflow:visible;  position: absolute ; top:130px; left:0;padding:0 0 0 20px }
 #sidebar h1{ font-weight:bold; margin:0 0 10px 0; font-size:24px;}
 #sidebar h2{ font-weight:bold; margin:0 0 5px 0; font-size:14px;}
 /*
#sidebar .save_area{ position: absolute; top:calc(100vh - 290px); left:70px;}
*/
#sidebar_inner{   padding: 20px 0 0 20px; height: calc(100vh - 150px);
display:flex;
flex-wrap: wrap; 
 align-items:space-between;
 }
#sidebar .fill_nav{ height:80%; overflow:auto;}
#sidebar .save_area{justify-content:center;align-items:flex-start;  height:20%; width:100%}
#sidebar .save_area .mybtn   { height:50px;}

#fill_content {
   width:100%; padding: 20px 0  0 360px; margin:0 auto;
}
#fill_content_inner {
   width:100%; 
}
 #fill_content_inner section{padding: 20px 30px 20px 30px; background:#fff; margin:0 0 80px 0;}
 #fill_content_inner section h1{ font-weight:bold; margin:0 0 30px 0; font-size:24px;}
 
nav.fill_nav {
  width:100% ;background:0; border:0;padding:0; margin:0;
}
nav.fill_nav li a span.dot{ background:#ccc;color:#fff; height:30px; width:30px; line-height:30px; font-size:14px; text-align:center; display:block;  border-radius:15px !important;}
 
nav.fill_nav   ul {list-style-type:none;margin:0;padding:20px 0 0 30px ;}
nav.fill_nav   li { padding: 0 0 30px 0}
nav.fill_nav   li a { position: relative;display:block; }
nav.fill_nav   li a b{color:#ccc; font-size:16px; line-height:19px; position: absolute; left:40px; top:5px;   }
 
 
nav.fill_nav   li a.active b{
color: var(--purplecc);text-decoration: none;
}
 
 
nav.fill_nav li a.active  span.dot{ background:var(--purplecc); }
 
 #side_btn{ display:none; position: relative}
 .unit_cnt label.error{ position:absolute; right:0; top:0;}
 
 
 #submit_btn_cnt{ display: inline-block; position: relative} 
 
 #save_btn_cnt{ display: inline-block; position: relative} 
 
 #save_btn_cnt .base{display:block}
 #save_btn_cnt .ok{ display:none}
 #save_btn_cnt.saved .base{display:none}
 #save_btn_cnt.saved .ok{ display:block}
 
 #modal_footer{ position: relative; overflow:hidden }
 .havefile_inp{ visibility:hidden; width:20px; height:2px; border:1px solid #f00; overflow:hidden}
 
 .fix_answ_cnt{display:flex;
flex-wrap: nowrap;
 justify-content: space-between; align-items:flex-start;}
 
 .fix_answ_val{ width:85%; margin:0 !important}
 .fix_answ_val.full{ width:100%; margin:0 !important}
 .fix_answ_cnt .reply_btn{ width:14%;}
 
 
 #fill_content input::placeholder {
    font-size: 12px  !important;
}

/*------------------------------Member-------------------------------------*/
@media all and (max-width: 1200px){ 

.list_table .btn.btn-light,
.list_table .btn.btn-light .fa{ width:30px;}

	#fill_content { 
	  padding: 20px 0 0 260px; 
	}
	#sidebar {
	  width: 260px;
	  padding: 0 0 0 0;
	}
	nav.fill_nav ul {
	  padding: 20px 0 0 0px;
	}

}
@media all and (max-width: 1028px){ 
#inner_cnt{width:100% !important; overflow:hidden}
#side_cnt{ position:fixed; width:300px !important;  left:-300px; z-index:1000;   }
#side_cnt.on{ left:0; border:1px solid #ccc;}
#side_cnt.on  #staff_side_nav{height:calc(100vh - 130px); padding: 0 0 40px 0; overflow: auto}
#side_btn{border-radius:0 10px 10px 0!important;   display:block; position:absolute; right:-30px; top:300px; width:30px; line-height;120px; height:120px; background:var(--purplecc); color:#fff}
 #side_cnt #side_btn .left{ display:none}
 #side_cnt #side_btn .right{ display:block}
 #side_cnt.on #side_btn .left{ display:block}
 #side_cnt.on #side_btn .right{ display:none}
 
#main_cnt{ width: 100%  !important; padding:0;}

#main_cnt_inner{ padding:0  40px 20px 40px;}
.newitem_msg{  padding:10px 40px 10px 40px;}








}