/*
.noto-sans-<uniquifier> {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}  
*/
/*#######  Global Start  ######*/
a,
a:active,
a:focus,
a:hover,
a:visited {
    outline: 0;
    text-decoration: none
}

input[type='text'],input[type='number'],textarea, select {transform: scale(1);}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
body{ -webkit-text-size-adjust:none;}
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: auto!important;
  }
}

img{ max-width: 100%; height: auto;}
html,body{ width:100%; height:100%; min-height: 100%; margin:0; padding:0; background-color:#fdfdfd; font-family: "Noto Sans", sans-serif; font-size:16px; color:#333; line-height: 1.2;}
samp{font-family: "Noto Sans", sans-serif!important;}
.main_wrapper{height:100%; min-height: 100vh; }
h1{font-size:18px; font-weight: 600;}
.bg_blue{background-color: #386097;}
.bg_sky_blue{background-color: #4c79af;}
.bg_green{background-color: #5c7d70;}   
.bg_orange{background-color: #c25700;}
.bg_black{background-color: #343047;}
.btn.btn-primary{background-color:#385f96;}
.btn.btn-success{background-color:#218a09;}
.btn.btn-warning{background-color:#e0690f;}
.btn.btn-force-complete{background-color:#000000; color:white; margin-left:10px; padding:5px 15px; border:none; border-radius:4px; cursor:pointer; font-size:0.9em;}
.btn.btn-force-complete:hover{background-color:#333333;}


.hamburger{width:63px; height:42px; position: relative; margin-right: 10px; display: none;}
.hamburger:after{content:''; display: block; position: absolute; right:-1px; top:-10px; bottom:-10px; width:1px; background-color:#cbcfd9;}
.hamburger span{display: block; width: 35px; height: 35px; margin-top:10px; margin-left:6px; cursor: pointer; }
.bar1, .bar2, .bar3 {width: 30px;height:3px;background-color: #333; margin: 6px 0; transition: 0.4s;}
.hamburger span.close .bar1 {transform: translate(0, 11px) rotate(-45deg);}
.hamburger span.close .bar2 {opacity: 0;}
.hamburger span.close .bar3 {transform: translate(0, -7px) rotate(45deg);}

/*#######  Header Start  ######*/
header{padding: 6px 13px; background-color: #f7f4f4; border-bottom: 1px solid #cbcfd9;display: flex;align-items: center; position: fixed; top: 0; width: 100%; z-index: 102;}
header .logo{width:60px; float: left;}
header .logo a{display: block;}
header .logo img{height: 27px; }
.header_content{width:calc(100% - 60px); float:left; display: flex; align-items: center; padding-left: 20px;}
header h1{color:#e0690f;text-transform: uppercase; float: left; margin-bottom: 0; font-size:18px; font-weight: 600;}
header .mbl_menu{float:left; background-color:#f00;}
header .header_right{ float: right;margin-left: auto;}
header .header_right .user_info_icon{width:32px; cursor: pointer; display: none;}
.user_info_icon:before{content:'\F4D4'; font-family: bootstrap-icons !important; font-size:18px; display: block; }
header .header_right > ul{ margin: 0; padding:0 ;}
header .header_right > ul > li{ margin: 0; padding:0 ; list-style-type: none; border-right:1px solid #b4b4b4; float: left; padding-right: 22px; margin-right: 22px; position: relative;}
header .header_right > ul > li:last-child{border-right:none; padding-right: 0; margin-right: 0;}
header .header_right > ul > li .header_butn{ display: flex; font-size:14px; color:#242424; align-items: center;}
header .header_right > ul > li .header_butn.profile_dropdown{ cursor: pointer; }
header .header_right > ul > li .header_butn strong, header .header_right > ul > li .header_butn span{float: left; font-size:14px; color:#242424; line-height: 24px;  }
header .header_right > ul > li .header_butn strong{position: relative; padding-left:25px; display: block;}
header .header_right > ul > li .user_code strong:before{content:'\F4D4'; font-family: bootstrap-icons !important; font-size:18px; display: block; position: absolute; left: 0; top:0}
header .header_right > ul > li .profile_dropdown strong:before{content:'\f4d7'; font-family: bootstrap-icons !important; font-size:18px; display: block; position: absolute; left: 0; top:0}
header .header_right > ul > li .profile_dropdown strong:after{content:'\F229'; font-family: bootstrap-icons !important; font-size:12px; display: block; float: right; margin-left: 8px;}
header .header_right > ul > li .header_butn span{color:#e0690f; padding-left: 5px;}
header .header_right > ul > li .drop_down_item{ min-width: 160px; position:  absolute; right: 0; left: auto; top: 100%; margin:0; padding: 0; padding-top:15px; display: none; }
header .header_right > ul > li .drop_down_item:before{content:'\F235'; font-family: bootstrap-icons !important; font-size:18px; color:#b4b4b4; display: block; position:  absolute; right:20px; top:0px;}
header .header_right > ul > li .drop_down_item li{ list-style-type: none;margin:0; padding: 0; background-color: #fff; border:1px solid #b4b4b4; border-bottom:none}
header .header_right > ul > li .drop_down_item li a{ display: block; padding:10px 12px; font-size:14px; color:#242424; }
header .header_right > ul > li .drop_down_item li a:hover{color:#e0690f;}
header .header_right > ul > li .drop_down_item li:last-child{border-bottom:1px solid #b4b4b4;}
header .header_right > ul > li:hover .drop_down_item{ display: block;}

.lang_switch {position: relative;display: inline-block;width: 60px;height: 24px;}
.lang_switch input { opacity: 0;width: 0;height: 0;}
.lang_switch .slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #218a09;
-webkit-transition: .4s;transition: .4s;}
.lang_switch .slider s{display:block;float:left;width:50%;height: 24px;text-align: center; text-decoration: none;font-weight: bold;color: #fff;line-height: 24px;}
.lang_switch .slider:before {position: absolute;content: "";height: 22px;width: 25px;left: 2px;bottom: 1px;background-color: white;-webkit-transition: .4s;transition: .4s;}
.lang_switch  input:checked + .slider {background-color: #ba002c;}
.lang_switch input:focus + .slider {box-shadow: 0 0 1px #2196F3;}
.lang_switch input:checked + .slider:before {-webkit-transform: translateX(26px);-ms-transform: translateX(26px);transform: translateX(31px);}
.lang_switch .slider.round {border-radius: 34px;}
.lang_switch .slider.round:before {border-radius: 50%;}
/*#######  Header End  ######*/

/*#######  Nav Start  ######*/
nav.leftnav{width:72px; float: left; background-color: #ffffff;border-right: 1px solid #cbcfd9; min-height: 100vh; position: fixed; top:0; left:0; padding-top:63px; z-index:5;}
nav.leftnav > ul{margin: 0; padding:0 ;}
nav.leftnav > ul > li{margin: 0; padding:0 ; list-style-type: none; display: flex; flex-direction: column;}
nav.leftnav > ul > li a{ display: flex; flex-direction: column; text-align: center; padding: 20px 0; color:#4c4c4c; font-size: 11px; text-decoration: none; position: relative; transition: 0.4s all ease-in-out !important;}
nav.leftnav > ul > li a:before{width:4px; height: 100%; background-color: #386097; content: ""; position: absolute; left: 0; top: 0;visibility: hidden;   opacity: 0;  transition: visibility 0s, opacity 0.5s linear;}
nav.leftnav > ul > li a:hover, nav.leftnav > ul > li a.active{color:#386097; background-color: #f7f4f4;}
nav.leftnav > ul > li a:hover:before, nav.leftnav > ul > li a.active:before{visibility: visible; opacity: 1;}
nav.leftnav > ul > li a:hover:before i, nav.leftnav > ul > li a.active:before i{color:#386097;}
nav.leftnav > ul > li a i{font-size:14px;}
/*#######  Nav End  ######*/
.timesheet-err {position: relative; padding-right: 30px;}
.timesheet-err .close{position: absolute; right: 10px; top: 10px; background-color: #fff; border: none; width: 30px; height: 30px; border-radius:5px;}
.timesheet-err .close:after{content:'\F62A'; font-family: bootstrap-icons !important; color: #333; font-size:24px;}

.err-msg strong{color:#00589c; cursor: pointer; border-bottom: 1px solid #00589c;}

main{display:flex; flex-direction: column; width:100%; min-height:calc(100vh - 50px); padding-top: 50px;}
.main_container{width:100%; float: left; padding-left: 72px; min-height: 100%;}
.container_wrapper{padding: 5px 20px; width: 100%;}
.container_wrapper_timesheet{padding: 5px 0px; width: 100%;}
.blank_msg{display: flex; justify-content: center; align-items: center; height:calc(100% - 150px); flex-direction: column; text-align: center; }
.blank_msg i{ font-size:2vw; color:#385f96; margin-bottom: 25px;}
.blank_msg h5{ font-size:2vw; font-weight: 600; color:#385f96; margin-bottom: 20px;}

/* .switch input[type="checkbox" i], .switch2 input[type="checkbox" i] {border: 1px solid #9ca0a9;}
.switch input[type=checkbox], .switch2 input[type=checkbox]{scale: 1.5; cursor: pointer; } */


.switch, .switch2, .switch3{position: relative; display: inline-block;  width:16px;  height:16px; overflow: hidden;}
.switch input[type=checkbox], .switch2 input[type=checkbox], .switch3 input[type=checkbox]{position: absolute;opacity: 0; cursor: pointer;height: 0;width: 0;}
.switch .slider, .switch2 .slider, .switch3 .slider{position: absolute;top: 0;left: 0;height:16px;width:16px;cursor: pointer; background-color: #fff; border:1px solid #767676; border-radius: 3px; text-align: center; display: flex; align-items: center; justify-content: center;  }
.switch input:checked + .slider, .switch2 input:checked + .slider, .switch3 input:checked + .slider{background-color: #0078d4; border-color: #0078d4;}
.switch input:checked + .slider:hover, .switch2 input:checked + .slider:hover, .switch3 input:checked + .slider:hover{background-color: #00589c; border-color: #00589c;}
.switch.slider:hover, .switch2.slider:hover, .switch3.slider:hover{background-color: #f8f8f8;}
.switch input:checked + .slider:before, .switch2 input:checked + .slider:before{content:'\2714'; font-size:11px; line-height:1; color:#fff;font-family: "Bootstrap Icons";}
.switch3 input:checked + .slider:before{content:'\2716'; font-size:11px; line-height:1; color:#fff; font-family: "Bootstrap Icons";}
.switch input:checked:disabled + .slider, .switch2 input:checked:disabled + .slider, .switch3 input:checked:disabled + .slider{background-color: #cccccc; border-color: #cccccc;}
.switch input:checked:disabled + .slider:before, .switch2 input:checked:disabled + .slider:before, .switch3 input:checked:disabled + .slider:before{color:#ebebeb;}

.switch input:disabled + .slider, .switch2 input:disabled + .slider, .switch3 input:disabled + .slider{background-color: #cccccc; border-color: #cccccc;}
.switch input:disabled + .slider:before, .switch2 input:disabled + .slider:before, .switch3 input:disabled + .slider:before{color:#ebebeb;}

/* .switch, .switch2{position: relative;  display: inline-block;  width:44px;  height:22px; line-height:10px;}
.switch input, .switch2 input{   opacity: 0;  width: 0;  height: 0;}
.switch  .slider, .switch2 .slider{position: absolute;  cursor: pointer;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: rgb(204, 204, 204);  -webkit-transition: .4s;  transition: .4s;}
.switch  .slider:before, .switch2  .slider:before {  position: absolute;  content: "";  height:16px;  width:16px;  left: 4px;  bottom: 3px;  background-color: white;  -webkit-transition: .4s;  transition: .4s;}
input:checked + .slider {  background-color: #2196F3;}
input:checked:disabled + .slider {  background-color: rgb(204, 204, 204, 0.5); cursor: not-allowed;}
input:disabled + .slider {  background-color: rgb(204, 204, 204); cursor: not-allowed; }
input:disabled + .slider:before{content:'\F2EA'; font-family: bootstrap-icons !important; font-size:14px; line-height: 16px; text-align: center; color:#333; }
input:checked:disabled + .slider:before{content:'\F272'; font-family: bootstrap-icons !important; font-size:14px; line-height: 16px; text-align: center; color:#333; }
input:focus + .slider {  box-shadow: 0 0 1px #2196F3;}
input:checked + .slider:before {  -webkit-transform: translateX(18px);  -ms-transform: translateX(18px);  transform: translateX(18px);} */

/* .switch {  position: relative;  display: inline-block;  width:44px;  height:22px; line-height:10px;}
.switch input {   opacity: 0;  width: 0;  height: 0;}
.slider {  position: absolute;  cursor: pointer;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: #ccc;  -webkit-transition: .4s;  transition: .4s;}
.slider:before {  position: absolute;  content: "";  height:16px;  width:16px;  left: 4px;  bottom: 3px;  background-color: white;  -webkit-transition: .4s;  transition: .4s;}
input:checked + .slider {  background-color: #2196F3;}input:focus + .slider {  box-shadow: 0 0 1px #2196F3;}
input:checked + .slider:before {  -webkit-transform: translateX(18px);  -ms-transform: translateX(18px);  transform: translateX(18px);} */

.switch_radio{position: relative; display: inline-block;  width:18px;  height:18px; overflow: hidden;background-color: #fff; border:1px solid #767676; border-radius:50%;}
.switch_radio input[type=checkbox]{position: absolute;opacity: 0; cursor: pointer;height: 0;width: 0;}
.switch_radio .slider{position: absolute;top: 3px; left: 3px;height:10px;width:10px;cursor: pointer; text-align: center; display: block; /*background-color: #0078d4;*/ border-radius:50%; }
.switch_radio input:checked + .slider{background-color: #0078d4; border-color: #0078d4;}
.switch_radio input:checked + .slider:hover{background-color: #00589c; border-color: #00589c;}
.switch_radio .slider:hover{background-color: #0078d4;}
.switch_radio input:disabled + .slider{background-color: #cccccc; border-color: #cccccc; cursor: auto;}


.select_month_section{background-color: #fff; box-shadow: 0 2px 20px 1px rgb(0 0 0 / 16%); -webkit-box-shadow: 0 2px 20px 1px rgb(0 0 0 / 16%); -moz-box-shadow: 0 2px 20px 1px rgb(0 0 0 / 16%); padding:0 20px;}
.select_month_section section{display: flex; justify-content: space-between;}
.select_month_section section .co_name{display: flex; align-items: center;}
.select_month_section section .co_name p{float: left; color:#385f96; padding-left: 15px;}
.select_month_section .select_month{display: flex; padding:6px 0; align-items: center;}
/* .select_month_section .select_month .form-select.year, .select_month_section .select_month .form-select.month{width:80px;} */
.select_month_section h2{color:#e0690f; font-size:14px; font-weight:400; line-height: 20px; margin-bottom: 0; padding-left: 10px; float: left; white-space: nowrap;}
.select_month_section h2 i{font-size:14px; color:#001737; padding-right: 6px; }
.select_month_section p{margin: 0; line-height: 20px; font-size:12px;}
.select_month_section select{ max-width: 300px; width: auto; float: left; border:1px solid #b4b4b4; height: 26px; border-radius:10px; padding: 2px 8px; padding-right: 32px; color:#333; margin-left: 10px; font-size:12px; font-weight: 400;}
.select_month_section .summary{ display: flex; align-items: center; padding-top:6px; padding-bottom:6px; }
.select_month_section .summary ul {margin: 0; padding:0; float: left; margin-top: 1px;}
.select_month_section .summary ul li{margin: 0; padding:0 ; padding-left:4px; padding-right:4px; list-style: none; border-right:2px solid rgba(103, 105, 111, 0.33); float: left; font-size:12px; line-height: 20px;}
.select_month_section .summary ul li:last-child{border-right: none;}
.select_month_section .summary ul li p strong{color:#385f96; font-weight:400;}

.select_month_section .download_dropdown{float: left; position: relative;}
.select_month_section .download_dropdown>ul{position: absolute; top:100%; right:0; margin: 0; padding: 0; padding-top:7px; z-index: 22; visibility: hidden;}
.select_month_section .download_dropdown>ul:before{content:'\F235'; font-family: bootstrap-icons !important; font-size:18px; color:#b4b4b4; display: block; position:  absolute; right:20px; top:3px;line-height: 0;}
.select_month_section .download_dropdown>ul>li{list-style:none; margin: 0; padding: 0; float:none; background-color: #fff; border:1px solid #b4b4b4; border-bottom: none;}
.select_month_section .download_dropdown>ul>li a{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; padding:8px 12px; font-size: 14px; color: #242424; text-decoration: none;}
.select_month_section .download_dropdown>ul>li a:hover{color:#e0690f;}
.select_month_section .download_dropdown>ul>li:last-child{border-bottom: 1px solid #385f96; border-right: 1px solid #385f96;}
.select_month_section .download_dropdown:hover>ul{visibility: visible;}


.actio_button_area{ display: flex; justify-content: end; align-items: center; padding: 6px 0;}
.actio_button_area .asso_name {margin-right: auto; font-size: 12px;}
.actio_button_area .asso_name strong{color: #e0690f;}
.actio_button_area .butn{ background-color: #386097; border-color:#386097; border-width:2px; border-radius: 5px; color:#fff; font-size:14px; font-weight: 600; padding: 4px 15px; cursor: pointer; margin-right: 10px; }
.actio_button_area .butn:last-child{ margin-right: 0;}
.actio_button_area .butn:after{content:'\F66D'; font-family: bootstrap-icons !important; padding-left: 8px; float: right; margin-bottom: -2px;}
.actio_button_area .butn.save_entry:after{content:'\F527';}
.actio_button_area .butn.cancel_entry:after{content:'\F813';}
.actio_button_area .butn.log_entry:after{content:'\F444';}
.actio_button_area .butn.download:after{content:'\F30A';}
.actio_button_area .butn.go_back:after{content:'\F113';}
.actio_button_area .butn.as_resource:after{content:'\F4CF';}
.actio_button_area .butn.as_approver:after{content:'\F4D5';}
.actio_button_area .butn.pdf_down:after{content:'\F63E';}
.actio_button_area .result_count{display: block; background-color:#3893cd; text-align: center; padding:6px 15px; color:#fff; font-weight: 600; margin-right: 10px;}


.actio_button_area .butn.save_entry{background-color: #218a09; border-color:#218a09;}
.actio_button_area .butn.cancel_entry{background-color: #e0690f; border-color:#e0690f;}
.actio_button_area .butn.log_entry{background-color: #fff;  border-color:#e0690f; color:#e0690f;}
.actio_button_area .butn.download{background-color: #fff;  border-color:#385f96; color:#385f96;}
.actio_button_area .butn.claim_history{background-color: #e0690f; border-color:#e0690f;}
.actio_button_area .butn.training_history{background-color: #fff;  border-color:#385f96; color:#385f96;}
.actio_button_area .butn{background-color: #385f96;  border-color:#385f96; color:#fff;}
.actio_button_area .butn:hover, .actio_button_area .butn.download:hover{background-color: #1e3e6b;  border-color:#385f96; color:#fff;}

.actio_button_area .butn:disabled{background-color: #e4e4e4!important; border-color: #e4e4e4!important;}


.consent_popup{ position: fixed; width: 100vw; height: 100%; top:0; left:0; background-color: rgba(0,0,0,0.5); z-index:11; display: flex; justify-content: center; align-items: flex-start; padding-top: 15vh;}
.consent_popup_content{position: relative; max-width: 500px; width: 90%; padding: 20px; background-color: #fff; border-radius: 10px; }
.consent_popup_content h3{font-size:22px; font-weight: 600; color: #385f96; margin-bottom: 25px;}
.consent_close{position: absolute; top:-30px; right:-20px; width:30px; height:30px; border:none; background-color: transparent; font-size:18px; cursor: pointer; color:#333; border: none; font-size: 0;}
.consent_close:after{content:'\F62A'; font-family: bootstrap-icons !important; color: #fff; font-size:36px;}
.consent_footer{ display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #ccc; padding-top: 10px;}
.consent_footer label{ font-size:16px; color:#333; font-weight: 600;}
.consent_popup label input[type=checkbox]{scale: 1.5; margin-right: 8px;}
/*#######  Footer Start  ######*/
footer{font-size:12px; height: 50px; padding-left:92px; border-top:1px solid #cbcfd9; display: flex; align-items: center; background-color: rgb(255, 255, 255);} 
#topBtn {display: none;position: fixed;bottom: 20px; right: 30px;z-index: 99;border: none;outline: none; background-color: red;color: white; cursor: pointer;padding: 15px; 
border-radius: 10px; font-size: 18px; }
#topBtn:hover {background-color: #555;}
/*#######  Footer Start  ######*/

.custom_modal .modal-content{border: 2px solid #00589c;}
.custom_modal .modal-content .modal-header{background-color: #00589c; padding: 8px 10px;color:#fff; }
.custom_modal .modal-content .modal-header h3{color:#fff; font-size:18px;;}
.custom_modal .modal-content .sub_header_block{background-color: #edf2fa; display: flex; align-items: center; padding: 8px 10px; }
.custom_modal .modal-content .sub_header_block .col-auto{ padding-right: 8px;}
.custom_modal .modal-content .modal-body{padding: 8px 15px;}
.custom_modal .modal-content .modal-footer{padding: 8px 10px;}

.custom_accordion .accordion-button{background-color: #e7f1ff;font-size:16px; font-weight: 600; color:#00589c}
.custom_accordion .accordion-button:not(.collapsed){background-color: #00589c; color:#fff; fill: currentcolor;}
.accordion-button:not(.collapsed)::after{color:#fff;}
.custom_accordion .accordion-button:focus{ box-shadow: none;}

.common_table{border: 1px solid #385f96;}
.common_table table{ width:100%; border-collapse: collapse; border-spacing: 0; }
.common_table table thead tr th{padding: 10px 6px;font-size: 14px;font-weight: 600;color: #fff;background-color: #385f96;text-align: center; vertical-align: middle;border: 2px solid #fff;}
.common_table table tbody tr td{padding:6px 6px; font-size: 13px; font-weight: 600;color: #333; background-color: rgb(97, 175, 254, 0.3); text-align: center;vertical-align: middle; border: 2px solid #fff;}
.common_table table tfoot tr td{padding:6px 6px; font-size: 14px; font-weight: 600;color: #fff; background-color: #3893cd; text-align: center;vertical-align: middle; border: 2px solid #fff;}
.common_table caption{background-color: #e5e0e0; padding-left:8px; font-size: 14px; font-weight: 600; color:#00589c}

.asso_info{ width: 100%;}
.asso_info ul{padding: 0; margin: 0; display: flex; flex-wrap: wrap;}
.asso_info ul li{padding: 0; margin: 0; float: left; width:50%; border-right: 1px solid #b5b5b5; border-bottom: 1px solid #b5b5b5;  padding:0 15px; list-style-type: none; background-color: #fff;}
.asso_info ul li p{ padding:12px 0; margin: 0; font-size:12px; color:#001737;}


.filter_options{ background-color: #edf2fa; padding:15px; border:1px solid #cccccc; margin-bottom: 25px;}
.filter_options .row{display: flex;}
.filter_options .row>div{ padding: 0 10px; width: auto; float: left;}
.filter_options h3{color: #e87e0f;font-size:22px;font-weight: 600;margin-bottom: 0;}
.filter_options .col-form-label{ font-size:14px; font-weight: 600; float: left;}
.filter_options .form-control, .filter_options .form-select{border-color:#cbcfd9; padding:4px 8px; padding-right: 32px; font-size: 14px; color:#333;}
.filter_options .btn.btn-primary{padding:5px 15px; }
.filter_options .btn{ margin-right: 3px; font-size: 12px; font-weight: 600;}
.filter_options .btn:last-child{ margin-right: 0;}
.filter_options .float_end{margin-left: auto; order: 2;}
.filter_options .result_count{display: block; background-color:#3893cd; text-align: center; padding:10px 15px; color:#fff; font-weight: 600;}


@media (max-width: 1300px) {
.select_month_section{ flex-wrap: wrap;}
.select_month_section .select_month{ width: 100%;}
.select_month_section section .co_name, .select_month_section .summary{width:auto;}
.select_month_section .co_name h2, .select_month_section .summary h2{ padding-left:0px;}
}

@media (max-width: 1200px) {
  /*#######  Login Start  ######*/
.inner_container{max-width: 95%;}

  /*#######  Login End  ######*/
}




@media (max-width: 1080px) and (pointer: coarse) {
main{ min-height: calc(100dvh - 32px); }
nav.leftnav{left: -72px; transition: all 0.3s ease;}
nav.leftnav.show{left:0; z-index: 101;}
.main_container{padding-left: 10px; padding-right: 10px;}
.hamburger{display: block;}
.header_content{padding-left: 10px; width: calc(100% - 70px);}
header .header_right{margin-top: -3px; margin-bottom: -3px;}
header .header_right .user_info_icon{ display: block;}
header .header_right > ul > li{ margin: 0; padding: 0 5px; border: none;}
header .header_right > ul > li .user_code strong:before, header .header_right > ul > li .profile_dropdown strong:before, header .header_right > ul > li .profile_dropdown strong:after{display:none;}
header .header_right > ul > li .user_code strong, header .header_right > ul > li .header_butn strong{ padding: 0; cursor: auto;}
header .header_right > ul > li:hover .drop_down_item{ display: none;}
header .header_right > ul > li .header_butn strong, header .header_right > ul > li .header_butn span{font-size:11px; line-height:18px;}
.lang_switch, .lang_switch .slider s{height: 20px; line-height: 20px;}
.lang_switch .slider:before, .lang_switch .slider:before{height:18px}
.select_month_section section{justify-content: normal;  }
.select_month_section section .col-auto{flex: auto; width: auto; max-width: none;}
.select_month_section .summary{display: block; float: right;}
.select_month_section .download_dropdown{float: right;}
.select_month_section section .select_month{ width: 100%; float: none; clear: both;}

footer{ padding-left: 0;justify-content: center; height: 32px; background-color: #ededed;}



/* .switch input[type="checkbox" i], .switch2 input[type="checkbox" i] {border:none;}
.switch input[type=checkbox], .switch2 input[type=checkbox]{scale: 1; }
.switch, .switch2{position: relative;  display: inline-block;  width:44px;  height:22px; line-height:10px;}
.switch input, .switch2 input{   opacity: 0;  width: 0;  height: 0;}
.switch  .slider, .switch2 .slider{position: absolute;  cursor: pointer;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: rgb(204, 204, 204);  -webkit-transition: .4s;  transition: .4s;}
.switch  .slider:before, .switch2  .slider:before {  position: absolute;  content: "";  height:16px;  width:16px;  left: 4px;  bottom: 3px;  background-color: white;  -webkit-transition: .4s;  transition: .4s;}
input:checked + .slider {  background-color: #2196F3;}
input:checked:disabled + .slider {  background-color: rgb(204, 204, 204, 0.5); cursor: not-allowed;}
input:disabled + .slider {  background-color: rgb(204, 204, 204); cursor: not-allowed; }
input:disabled + .slider:before{content:'\F2EA'; font-family: bootstrap-icons !important; font-size:14px; line-height: 16px; text-align: center; color:#333; }
input:checked:disabled + .slider:before{content:'\F272'; font-family: bootstrap-icons !important; font-size:14px; line-height: 16px; text-align: center; color:#333; }
input:focus + .slider {  box-shadow: 0 0 1px #2196F3;}
input:checked + .slider:before {  -webkit-transform: translateX(18px);  -ms-transform: translateX(18px);  transform: translateX(18px);}*/
  
}
@media (max-width: 768px) {
.select_month_section .download_dropdown>ul{right: auto; left: 0;}
.actio_button_area{flex-wrap:wrap; justify-content: start;}
.actio_button_area .asso_name{width:100%; padding-bottom: 10px;}
.actio_button_area a:first-child .butn, .actio_button_area a:first-child, .actio_button_area .butn:first-child, .actio_button_area .no_mar{margin-left:0px;}
}


@media (max-width: 640px) {
main{padding-top: 70px;}
header{padding:8px 4px; min-height: 70px;}
header .logo img{height: 23px;}
header .logo{width:30px;}
header .header_right > ul > li{float:none; display: flex; justify-content: end;}
.hamburger{width: 40px; height: 42px;}
.hamburger span {display: block;width: 32px;height: 35px;margin-top: 9px;margin-left: 2px;}
.bar1, .bar2, .bar3{width:26px}
.header_content{padding-left: 2px; justify-content: space-between;}
header h1{font-size: 11px;}
header .header_right{margin: 0;}
header .header_right > ul > li .header_butn strong, header .header_right > ul > li .header_butn span{font-size: 11px;line-height: 16px;}
.select_month_section h2, .select_month_section section .co_name, .select_month_section .summary{padding-left:0}
.container_wrapper, .container_wrapper_timesheet{padding: 8px;padding-top: 0; padding-bottom: 0;}
.actio_button_area .butn{font-size: 11px;padding: 5px 10px; margin-right: 5px;;}
app-home, app-dashboard{display: block; margin: 0 !important; padding: 0 !important;}
main{padding-bottom: 0 !important;}
.main_container{padding-bottom: 0 !important;}
footer{margin-bottom: 0 !important;}
body{padding-bottom: 0 !important; margin-bottom: 0 !important;}

}

/* 転記処理タブのテーブルスタイル */
.table-section {
  overflow-x: auto;
  margin: 15px 0;
}

.table-section .data-table {
  width: auto !important;
  table-layout: auto !important;
  border-collapse: collapse;
  font-size: 14px;
}

.table-section .data-table th,
.table-section .data-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.table-section .data-table th {
  background-color: #f5f5f5;
  font-weight: bold;
  white-space: nowrap;
}

.table-section .data-table td {
  white-space: nowrap;
}

/* 表1: TimesheetLineItem - 列幅を内容に合わせる */
.lineitem-table .col-timesheet-id,
.lineitem-table .col-state,
.lineitem-table .col-date,
.lineitem-table .col-time,
.lineitem-table .col-minutes,
.lineitem-table .col-telework,
.lineitem-table .col-lineitem,
.lineitem-table .col-costitem,
.lineitem-table .col-cost {
  white-space: nowrap;
  width: 1%;
}

/* 表2: Comments - コメント系は最大300pxで折り返し */
.comments-table .col-comment-timesheet-id {
  white-space: nowrap;
  width: 1%;
}

.comments-table .col-comment,
.comments-table .col-training,
.comments-table .col-complaint {
  max-width: 300px;
  word-wrap: break-word;
  white-space: normal;
  overflow-wrap: break-word;
}

/* チェックボックス列 */
.table-section .checkbox-col {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}

/* 右寄せ */
.table-section .right-align {
  text-align: right;
}

/* 中央寄せ */
.table-section .center-align {
  text-align: center;
}