/*
    DEMO STYLE
*/

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";

@font-face {
   font-family: Anja Eliane;
   src: url('/webfonts/Anja Eliane.ttf') format("truetype");
}


body {
    font-family: 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo,'Noto Sans JP', 游ゴシック体, 'Yu Gothic', YuGothic, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    background: #f5f5f5;
    color: #343a40;
    font-size: .875rem;
    /*padding-top: 70px;*/
}

p {
    font-family: 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo,'Noto Sans JP', 游ゴシック体, 'Yu Gothic', YuGothic, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size: 1em;
    font-weight: 300;
    margin-bottom: .5rem;
}
[hidden] {display: none;}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.overflow-visible {
    overflow: visible!important;
}
.user-dropdown .dropdown-toggle::after,
.dropdown-toggle.dropdown-menu-arrow-none::after{content: none !important;}

/* ---------------------------------------------------
    SIDEMENU STYLE
----------------------------------------------------- */
#sidebar { width: 100%; transition: .3s; background: #456179; color: #fff; padding: 0!important; margin: 0!important; }
#sidebar > .container-fluid { padding: 0!important; margin: 0!important; }
#sidebar h1 { margin-bottom: 0; }
#sidebar h1 a { font-family: 'Anja Eliane', sans-serif; font-size: 1.4rem; letter-spacing: 0.04em; color: #fff; line-height: 1; }
#sidebar .navbar-nav { background: #456179;}
#sidebar .navbar-nav .nav-item { width: 100%; }
#sidebar .navbar button[data-toggle="collapse"] { position: relative; border-color: #ccc; color: #ccc; padding-top: .4em; padding-bottom: .4em; }
#sidebar .navbar-nav .nav-item a { position: relative; font-size: 0.937rem; }
#sidebar .navbar-nav .nav-item a:before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: #7de7bc; opacity: 0; transition: .3s; }
#sidebar .navbar-nav .nav-item a.active, #sidebar .navbar-nav .nav-item a:hover { background: #228281; }
#sidebar .navbar-nav .nav-item a.active:before, #sidebar .navbar-nav .nav-item a:hover:before { opacity: 1; }
#sidebar .navbar-nav .nav-item i { opacity: 0.3; transition: .3s; margin-right: 1.5rem; }
#sidebar .navbar-nav .nav-item a.active i, #sidebar .navbar-nav .nav-item a:hover i { opacity: 1; }

#sidebar .header-btn { width: 100%; padding: 1em;}


@media screen and (min-width: 1201px) {
#sidebar h1 { padding: 1.75rem 0;}
#sidebar .navbar-header { width: 100%;}
#sidebar .navbar-nav .nav-item { width: 100%;}
#sidebar .navbar-nav .nav-item a { display: block; padding: 1rem .5rem 1rem 1.5rem;}
}

@media screen and (max-width: 1200px) and (min-width: 992px){
#sidebar { padding: 0 1rem;}
#sidebar .navbar-collapse { justify-content: flex-end;}
#sidebar .navbar-nav { margin: 0!important;}
#sidebar .navbar-nav .nav-item a { padding: 1rem;}
#sidebar .navbar-nav .nav-item i { margin-right: .5rem;}
}
@media only screen and (min-width: 993px) {
#sidebar { width: 300px; position: fixed; height: 100vh; left: -300px; }
#sidebar.toggle-open { left: 0; }
}
@media screen and (max-width: 992px) {
#sidebar .navbar-nav .nav-item{ width: auto; }
#sidebar .navbar-header { height: 60px; display: flex; align-items: center;}
#sidebar h1 { margin-left: 1rem;}
#sidebar li.nav-item a { display: block; padding: .8em .3em .8em 1.5em; width: 100%; height: 100%;}
#sidebar .navbar-toggler i { color: #fff;}
#sidebar .header-btn { width: auto;}
}

/* ---------------------------------------------------
    HEADER-TOP
----------------------------------------------------- */

#header-top { background: #00a389; color: #fff; z-index: 9; }
#header-top h1 { display: none;}
#header-top h1 a { font-family: 'Anja Eliane', sans-serif; letter-spacing: 0.04em; 	font-size: 1.5rem;}
#header-top #sidebar-btn { display: none;}

@media only screen and (max-width: 991px) {
#sidebar { background: #00a389; }
#header-top { position: inherit!important; background: none; padding: 1em 0 0;}
#header-top .page-ttl { color: #111;}
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
/*

#content {
    width: calc(100vw - 250px);
    padding: 30px 20px 50px;
    min-height: calc(100vh - 70px);
    transition: all 0.3s;
    background-color: #efefef;
    margin: 0 auto;
}
*/
#content { width: 100%; /*min-height: 100vh;*/ transition: all 0.3s; }

@media only screen and (min-width: 993px) {
#sidebar.toggle-open + #content { width: calc( 100% - 300px );margin-left: 300px}
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */


/* ---------------------------------------------------
    FONTSIZE
----------------------------------------------------- */
.f-10{ font-size: 10px !important; }
.f-11{ font-size: 11px !important; }
.f-12{ font-size: 12px !important; }
.f-13{ font-size: 13px !important; }
.f-14{ font-size: 14px !important; }
.f-15{ font-size: 15px !important; }
.f-16{ font-size: 16px !important; }
.f-17{ font-size: 17px !important; }
.f-18{ font-size: 18px !important; }
.f-19{ font-size: 19px !important; }
.f-20{ font-size: 20px !important; }
.f-21{ font-size: 21px !important; }
.f-22{ font-size: 22px !important; }
.f-23{ font-size: 23px !important; }
.f-24{ font-size: 24px !important; }
.f-25{ font-size: 25px !important; }
.f-26{ font-size: 26px !important; }
.f-27{ font-size: 27px !important; }
.f-28{ font-size: 28px !important; }
.f-29{ font-size: 29px !important; }
.f-30{ font-size: 30px !important; }
.f-31{ font-size: 31px !important; }
.f-32{ font-size: 32px !important; }
.f-33{ font-size: 33px !important; }
.f-34{ font-size: 34px !important; }
.f-35{ font-size: 35px !important; }
.f-36{ font-size: 36px !important; }
.f-37{ font-size: 37px !important; }
.f-38{ font-size: 38px !important; }
.f-39{ font-size: 39px !important; }
.f-40{ font-size: 40px !important; }

/* ---------------------------------------------------
    TEXTCOLOR
----------------------------------------------------- */
.text-soft-light{color: #d5dbe0!important}
a.text-soft-light:focus,
a.text-soft-light:hover {color: #b5bfc7!important}

.text-soft-dark{color: #858d93!important}
a.text-soft-dark:focus,
a.text-soft-dark:hover {color: #747a80!important}

.form-control::placeholder { color: #b5babf;}

/* ---------------------------------------------------
    BGCOLOR
----------------------------------------------------- */
.bg-soft-dark { background-color: #858d93!important}
a.bg-dark:focus,a.bg-dark:hover,button.bg-dark:focus,button.bg-dark:hover {background-color: #747a80!important}


.bg-orange{ background-color: #e95513 !important;}
.bg-pink{ background-color: #e51572 !important;}
.bg-purple{ background-color: #673ab7 !important;}
.bg-red-light {background: #ffebe8 !important;}

.list-group-flush .list-group-item:first-child {
    border-top: none;
}

/************* login ***************/
.border-center{
    position: relative;
}
.border-center::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    margin: auto;
    background-color: #ced4da;
}
.border-center span{
     background-color: #fff;
     position: relative;
     padding: 0 10px;
}
/******************* カレンダー ************************/

.input-group>.input-datepicker-yearMonthonly{ width: 10em;}

.input-group.date.datepicker-monthonly{ width: 4.5em; margin: auto; }

.input-group.date > .input-group-prepend{
    z-index: 2;
}
.input-group.date > .input-group-prepend .input-group-text{
    background-color: #e9ecef;
    padding: 4px 5px;
    border: none;
    margin-right: .5em;
}

.input-group.date > input{
    padding: 0;
    height: 30px;
    z-index: 1;
    width: 0;
    border: none;
    transition: width 0.3s ease;
    font-size: 15px;
}
.input-group.date.active > input{
    padding: 0 5px;
    width: 3em;
    transition: width 0.3s ease;
}
.input-group.date > input:focus{
    box-shadow: none;
}

.breadcrumb-belong > .breadcrumb .breadcrumb-item+.breadcrumb-item::before{
    font-family: "Font Awesome 5 Free";
    content:"\f054";
    font-weight: 900;
}
.project-date .flatpickr-input {
    max-width: 8em;
}
@media screen and (max-width: 768px) {
.input-group>.input-datepicker-yearMonthonly{ width: 100%;}
}
/******************* ユーザー select ************************/
/*

.input-group.charge{
    border: solid 1px #ccc;
    padding: 3px;
    flex-wrap: nowrap;
    width: 40px;
    margin: auto;
}
.input-group.charge.active{
    width: auto;
}
.input-group.charge > .input-group-prepend{
    z-index: 2;
}
.input-group.charge > .input-group-prepend .input-group-text{
    background-color: #fff;
    padding: 0;
    border: none;
}
.input-group.charge > .input-group-prepend img{
    width: 1.5em;
    height: 1.5em;
}

.input-group.charge > input{
    margin-left: 3px;
    padding: 0;
    height: 24px;
    z-index: 1;
    width: 0;
    border: none;
    transition: width 0.3s ease;
}
.input-group.charge.active > input{
    padding: 0 0 0 10px;
    width: 110px;
    transition: width 0.3s ease;
    font-size: 12px;
}

.input-group.charge > input:focus{
    box-shadow: none;
}
*/


/******************* form ************************/
.form-group {margin-bottom: .5rem;}
.form-control {font-size: .875rem;}
.input-group-text {font-size: .875em;}

/******************* input-group ************************/

.input-group-middle{
    margin-left: -1px;
    margin-right: -1px;
    display: -ms-flexbox;
    display: flex;
}

.input-group-middle .input-group-text{
    border-radius: 0;
}
.input-group-middle .input-group-text + .input-group-text{
    margin-left: -1px;
}
.input-group.plain input{
    border-radius: .2rem !important;
}
.input-group.plain .input-group-append .input-group-text {
    border: none;
    background: transparent;
    padding-right: 0;
}

.z-index-2{
    z-index: 2;
}


/************* modal ***************/
.modal-open {
  padding-right: 0px !important;
  overflow: auto;
}
.modal {
  padding-right: 0px !important;
}
.mdl-detail {
	cursor: pointer;
}


/************* task ***************/

.card {
    border-color: #ededed;
    box-shadow: 0 0.1875rem 0.375rem rgba(33, 37, 41, 0.05);
}
.card-header {
    background-color: #fff;
    border-color: #ededed;
}
.card-header .task-count {
    width: 3.5rem;
    height: 3.5rem;
    padding: 1.2rem 0;
    font-size: 1.2rem;
    text-align: center;
}
.task-count {
    width: 2.5rem;
    height: 2.5rem;
    padding: .5rem 0;
    font-size: 1.4rem;
    text-align: center;
}


.uesr-icon img {
    width: 3em;
    height: 3em;
}


.datepicker{
    max-width: 200px;
}

/* btn
------------------------------ */
.btn-purple {
	color: #fff;
	background-color: #6f42c1;
	border-color: #6f42c1;
}
.btn-purple:hover {
	color: #fff;
	background-color: #5830a0;
	border-color: #5830a0;
}
.btn-green-01 {
	color: #fff;
	background-color: #28a745;
	border-color: #28a745;
}
.btn-green-01:hover {
	color: #fff;
	background-color: #218838;
	border-color: #218838;
}
.btn-green-02 {
	color: #fff;
	background-color: #1c8434;
	border-color: #1c8434;
}
.btn-green-02:hover {
	color: #fff;
	background-color: #16762c;
	border-color: #16762c;
}
.btn-green-03 {
	color: #fff;
	background-color: #156c29;
	border-color: #156c29;
}
.btn-green-03:hover {
	color: #fff;
	background-color: #156427;
	border-color: #156427;
}
.btn-green-04 {
	color: #fff;
	background-color: #125a23;
	border-color: #125a23;
}
.btn-green-04:hover {
	color: #fff;
	background-color: #115321;
	border-color: #115321;
}
.btn-lightgray {
	color: #fff;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}
.btn-lightgray:hover, .btn-lightgray:focus {
	color: #fff;
    background-color: #e2e6ea;
    border-color: #e2e6ea;
}


.btn:not(.btn-sm):not(.btn-lg):not(.btn-xs) {
    font-size: .9rem;
    padding: 0.375rem .95rem;
}
.btn .fa-caret-down {
    margin-left: 10px;
    font-size: .7em;
    vertical-align: middle;
}

.list-group.li-h-115{
    height: 457px;
    overflow-y: scroll;
}
.list-group.li-h-115 .list-group-item{
    min-height: 115px;
    height: 115px;
}
.list-group.li-h-115 .list-group-item a + div.row{
    height: 91px;
}
@media screen and (max-width: 991px) {
    .list-group.li-h-115 .list-group-item{
        min-height: auto;
        height: auto;
    }
    .list-group.li-h-115 .list-group-item a + div.row{
        height: auto;
    }
    .list-group.li-h-115{
        height: auto;
        max-height: 464px;
        overflow-y: scroll;
    }
}

/* alert
------------------------------ */
.alert + .alert {
    margin-top: 0!important;
}


/* pagination(pager)
------------------------------ */


/************* table ***************/
.table-responsive{
    overflow-x: auto;
    overflow-y: none;
}
.table td, .table th {
    border-color: #ededed; vertical-align: top; background: #FFF;
	font-size: 13px;
	padding: .4rem;
}
.table-sm td, .table-sm th {
	padding: .2rem;
}
.table thead th {
    text-align: center;
}
.table .thead-light th {
    background-color: #f5f5f5;
    border-color: #ededed;
}
.table-warning,.table-warning>td,.table-warning>th {
    background-color: #fff8e4;
}

.table-danger, .table-danger>td, .table-danger>th {
    background-color: rgba(245, 198, 203, 0.25);
}


.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fff;
}
.table-striped tbody tr:nth-of-type(even) {
    background-color: #f8f9fa;
}

table .total th,table .total td { border-top: solid 2px #e2e2e2; font-weight: bold;}
table th.total,table td.total { border-left: solid 2px #e2e2e2; font-weight: bold;}

.table-border-mixture td, .table-border-mixture.table th { border-left: 1px dashed #e2e2e2; border-right: 1px dashed #e2e2e2;}
.table-border-mixture td:nth-of-type(1) { border-left: 1px solid #e2e2e2;}
.table-border-mixture tr.dot_line td:nth-of-type(1) {border-left: 1px dashed #e2e2e2;}
.table-border-mixture .thead-dark th {border: none;}
.table-border-mixture tr.dot_line {border-top: 1px dashed #e2e2e2;}
.table-border-mixture tr.dot_line td {border-top: none;}
.table-border-mixture tr.total td {border-bottom: 1px solid #e2e2e2; border-right: 1px solid #e2e2e2;}
.table-border-mixture td.total {border-right: 1px solid #e2e2e2;}

.table-alignmiddle th,.table-alignmiddle td{vertical-align:middle;}

.table-account{width:auto;margin:auto;}
.table-account td{padding-left:15px;padding-right:15px;}

.table-forecast td {border-right: none; border-left-style: dashed;}
.table-forecast td:first-of-type {border-left-style: solid;}
.table-forecast td.solid {border-left-style: solid;}
.table-forecast tr.dashed td {border-top-style: dashed;}
.table-forecast tr.total td {background-color: #f5f5f5;}
.table-forecast tr.total:last-of-type td {border-bottom-width: 1px;}

.table-forecast tr.total2 td {background-color: #ebebeb;}
.table-forecast tr.total2:last-of-type td {border-bottom-width: 1px;}

.table-forecast tr td.total {border-right: 1px solid #e2e2e2; border-left: 1px solid #e2e2e2; background-color: #eff3fe;}
.table-forecast tr td.total + td.total {background-color: #ebfbfd; border-right-width: 2px;}
.table-forecast tr td.total + td.total + td.total {background-color: #f5f5f5; border-right-width: 1px;}
.table-forecast tr:not(.total) td.total-last {background-color: #fff;}
.table-forecast tr td.total-last:last-of-type {border-right: 1px solid #e2e2e2;}
.table-forecast tr td.total-su:not(:last-of-type) {border-right-width: 2px !important;}

.table-bordered th {border: none;}
.table-bordered tr td {border-style: dashed;}
.table-bordered tr td:nth-of-type(1) { border-left: 1px solid #e2e2e2;}
.table-bordered tr td:nth-of-type(2) { border-left: 1px solid #e2e2e2;}
.table-bordered tr.dot_line td:nth-of-type(1) {border-left: 1px dashed #e2e2e2;}
.table-bordered tr.total td {border-style: solid;}
.table-bordered tr td.total {border-left-style: solid;border-right-style: solid;}

/*.table-border-mixture tr td:nth-of-type(3) { border-left: 1px solid #e2e2e2;}*/
.table-border-mixture tr.dot_line td:nth-of-type(2) {border-left: 1px solid #e2e2e2;}
.table-border-mixture tr.dot_line td:nth-of-type(3) {border-left: 1px dashed #e2e2e2;}

.table-transition tr:not(.line) td:nth-of-type(2) {border-left-style: dashed;}

.table-analysis tr td.total {border-right: 2px solid #e2e2e2;}
.table-analysis tr.line {border-top: 1px solid #e2e2e2;}
.table-analysis tr:not(.line) td:nth-of-type(2) {border-left-style: dashed;}
.table-analysis tr.total {border-bottom: 2px solid #e2e2e2;}

.table-process .thead-dark th {border-top: 2px solid #e2e2e2 !important;}
.table-process .thead-dark th:not(:last-of-type) {border-right: 1px solid #e2e2e2;}
.table-process .thead-dark th.solid2 {border-right-width: 2px;}
.table-process .thead-dark {border-right: 2px solid #000;}
.table-process tr td.total-last:last-of-type {border-right-width: 2px !important; border-right-color: #000 !important;}
.table-process tr .total-r-bk {border-right-color: #000 !important;}
.table-process tr .total-t-bk {border-top-width: 2px !important; border-top-color: #000 !important;}
.table-process tr .total-b-bk {border-bottom-width: 2px !important; border-bottom-color: #000 !important;}
.table-process tbody td {font-weight: normal;}
.table-process tbody td input {display: inline; max-width: 4em;}
.table-process tbody td .btn-xs {padding: .2rem;}
.table-process tbody td .btn-xs i {font-size: .7rem;}

.overview .table-category:not(:first-child){opacity: 0;}
.table-category col {width: 100px; min-width: 100px;}
.table-category td.current{background-color:#fdf9eb;}

/* scroll */
.scrollWrap {width: fit-content;}

.fixed-left {position: sticky; left: 0;}
.fixed-left:before {content: ""; position: absolute; top: 0; left: -1px; width: 1px; height: 100%; background-color: #e2e2e2;}
.fixed-left02 {position: sticky !important; left: 75px !important;}
.fixed-left02-name {left: 180px !important;}
.fixed-left02-category {left: 100px !important;}
.fixed-left02:before {content: ""; position: absolute; top: 0; left: -1px; width: 1px; height: 100%; background-color: #e2e2e2;}
.fixed-left02:after {content: ""; position: absolute; top: 0; right: -1px; width: 1px; height: 100%; background-color: #e2e2e2;}
.fixed-left03 {position: sticky !important; left: 200px !important;}
.fixed-left03:before {content: ""; position: absolute; top: 0; left: -1px; width: 1px; height: 100%; background-color: #e2e2e2;}
.fixed-left03:after {content: ""; position: absolute; top: 0; right: -1px; width: 1px; height: 100%; background-color: #e2e2e2;}
.thead-fixed tr th {position: sticky; left: 0; top: -1px; z-index: 1;}
.thead-fixed tr th.fixed-left02 {z-index: 2 !important;}
.thead-fixed tr th.fixed-left03 {z-index: 2 !important;}
.thead-fixed tr:first-of-type th:first-of-type {z-index: 2;}
.thead-fixed tr th:before {content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background-color: #454d55;}

#scrollbar-top {width: 100%; height: 70vh; overflow-x: hidden;}
#scrollbar-top .viewport {width: 100%; height: 100%; position: relative;}
#scrollbar-top .overview {width: 100%; position: absolute;}
#scrollbar-top .scrollbar {border: solid 1px #cccccc; position: relative; width: 100%; height: 15px;}
#scrollbar-top .thumb {background-color: #ccc; background: -moz-linear-gradient(top, #ccc, #ccc); background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#ccc)); width: 15px; height: 15px; margin-bottom: 10px; cursor: pointer; overflow: hidden; position: absolute;}

.scrollbar-wrap {width: 100%; /*height: 70vh; overflow-x: auto;*/}
.scrollbar-wrap table thead {position: sticky; top: 70px; z-index: 1;} 

@media screen and (max-width:599px){
    .scrollWrap {width: 100%;}

    .table-account td{padding-left:.4rem;padding-right:.4rem;}

    .scrollbar-wrap {height: 70vh; overflow-x: auto;}
    .scrollbar-wrap table thead {position: static;}
    .scrollbar-wrap table thead th {position: sticky; top: 0; z-index: 1;}
}

/************* custom task checkboxes /*************/

.custom-task-checkbox input[type=checkbox] {
    display:none;
}
.custom-task-checkbox input[type=checkbox] + label {
    margin: 0;
    line-height: 1;
    cursor: pointer;
}
.custom-task-checkbox input[type=checkbox] + label:before {
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    font-size: 1.8rem;
    cursor: pointer;
    content: "\f058";
    transition: .2s ease-in;
}
.custom-task-checkbox input[type=checkbox] + label:before {
    color: #d5dbe0;
}
.custom-task-checkbox input[type=checkbox]:checked + label:before {
    color: #678bff;
}

.custom-task-checkbox input[type=checkbox] + label > span{
    padding: 6px 5px;
    line-height: 1;
    vertical-align: top;
    display: inline-block;
}

.custom-task-checkbox input[type=checkbox]:disabled {
    cursor:default;
}
.custom-task-checkbox input[type=checkbox]:disabled + label {
    cursor:default;
}
.custom-task-checkbox input[type=checkbox]:disabled + label:before {
    cursor:default;
}

/************* custom checkboxes /*************/

.custom-checkbox input[type=checkbox] {
    display:none;
}
.custom-checkbox input[type=checkbox] + label {
    margin: 0;
    line-height: 1;
    cursor: pointer;
    margin: 3px 10px 3px 0;
}
.custom-checkbox input[type=checkbox] + label:before {
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    font-size: 1rem;
    cursor: pointer;
    content: "\f0c8";
    transition: .2s ease-in;
}
.custom-checkbox input[type=checkbox] + label:before {
    color: #d5dbe0;
}
.custom-checkbox input[type=checkbox]:checked + label:before {
    content: "\f14a";
    color: #678bff;
    font-weight: 900;
}

.custom-checkbox input[type=checkbox] + label > span{
    padding: 0 5px;
    line-height: 1;
    vertical-align: top;
    display: inline-block;
}

/************* custom radio /*************/

.custom-radio input[type=radio] {
    display:none;
}
.custom-radio input[type=radio] + label {
    margin: 0;
    line-height: 1;
    cursor: pointer;
    margin: 3px 10px 3px 0;
}
.custom-radio input[type=radio] + label:before {
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    font-size: 1rem;
    cursor: pointer;
    content: "\f111";
    transition: .2s ease-in;
}
.custom-radio input[type=radio] + label:before {
    color: #d5dbe0;
}
.custom-radio input[type=radio]:checked + label:before {
    content: "\f192";
    color: #678bff;
}

.custom-radio input[type=radio] + label > span{
    padding: 0 5px;
    line-height: 1;
    vertical-align: top;
    display: inline-block;
}

/************* custom switch /*************/

.custom-switch.switch-md {
    padding-left: 2.75rem;
}

.custom-switch.switch-md .custom-control-label::before {
    left: -2.45rem;
    width: 2.75rem;
    height: 1.3rem;
    pointer-events: all;
    border-radius: 1rem;
}

.custom-switch.switch-md .custom-control-label::after {
    top: calc(.25rem + 2px);
    left: calc(-2.45rem + 2px);
    width: calc(1.3rem - 4px);
    height: calc(1.3rem - 4px);
    background-color: #adb5bd;
    border-radius: .5rem;
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-transform .15s ease-in-out;
    transition: transform .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: transform .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-transform .15s ease-in-out;
}

@media (prefers-reduced-motion:reduce) {
    .custom-switch.switch-md .custom-control-label::after {
        transition: none
    }
}

.custom-switch.switch-md .custom-control-input:checked~.custom-control-label::after {
    background-color: #fff;
    -webkit-transform: translateX(.75rem);
    transform: translateX(1.45rem);
}

.custom-switch.switch-md .custom-control-input:disabled:checked~.custom-control-label::before {
    background-color: rgba(0,123,255,.5)
}

/***** sortable *****/
#sortable-box .handle {
    cursor: move;
}

/***** select *****/
.bootstrap-select.form-control .dropdown-toggle{
    background-color: #fff;
    border: 1px solid #ced4da;
}
.bootstrap-select.form-control + .select2 .select2-search__field{
  width:100%!important;
}

@media all and (-ms-high-contrast: none) {
  .bootstrap-select.form-control.input-group-btn, .input-group .bootstrap-select.form-control {
    display: block;
  }
}


/***** datepicker *****/
.datepicker table tr td span.active.active, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled.disabled, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active.disabled:hover.active, .datepicker table tr td span.active.disabled:hover.disabled, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active.disabled:hover:hover, .datepicker table tr td span.active.disabled:hover[disabled], .datepicker table tr td span.active.disabled[disabled], .datepicker table tr td span.active:active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active:hover.active, .datepicker table tr td span.active:hover.disabled, .datepicker table tr td span.active:hover:active, .datepicker table tr td span.active:hover:hover, .datepicker table tr td span.active:hover[disabled], .datepicker table tr td span.active[disabled]{ background-color: #2a3149;background-image: none;}

/***** diff *****/
select.is-diff, select.is-diff.select-select2 + .select2, .bootstrap-select.dropdown select.is-diff + .dropdown-toggle, input.is-diff, .custom-radio input.is-diff[type=radio] + label { background-color: #d4edda!important;}
.custom-radio.radio-p input[type=radio] + label { padding: .5rem .75rem .5rem; border-radius: .25rem;}
.diff-alert .alert { margin: .5rem 0 0; font-size: .8rem; padding: 0.475rem .95rem; display: inline-block;}
table .diff-alert .alert { padding: 0.275rem .45rem;}

/***** task-detail *****/
.task-detail-sales table th,.task-detail-sales table td { font-weight: normal;}
/*.task-detail-sales table thead th { height: 40px;}*/
.task-detail-sales table thead th:nth-of-type(n+2) { min-width: 85px;}
.task-detail-sales table button.adjust-btn,.task-detail-claim table button.adjust-btn { width: 1rem; height: 1rem; line-height: 0;}
.task-detail-sales table button.adjust-btn i,.task-detail-claim table button.adjust-btn i { font-size: .5rem; }
.task-detail-sales table thead th.adjust-cell,.task-detail-claim table thead th.adjust-cell { min-width: 20px; }
.task-detail-sales table td.adjust-cell,.task-detail-claim table td.adjust-cell { padding: 0;}
.task-detail-claim table th { min-width: 85px; font-weight: normal;}
/*.task-detail-claim table td { text-align: right;}*/

/***** analysis-sales-product *****/
.analysis-sales-product table{table-layout: fixed;}
.analysis-sales-product table.table-max {width: max-content;}
.analysis-sales-product table tr:last-of-type {border-bottom: 1px solid #e2e2e2;}
.analysis-sales-product table th,
.analysis-sales-product table td {font-size: 12px;}
.analysis-sales-product table td span.abridgement {display: block; width: 7em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.analysis-sales-product .name {min-width: 180px;width: 180px;}
.analysis-sales-product .name2 {width: 400px;}
.analysis-sales-product .category {min-width: 80px;width: 80px;}
.analysis-sales-product .category2 {width: 150px;}
.analysis-sales-product .date {width: 50px;}
.analysis-sales-product .date2 {width: 240px;}
.analysis-sales-product .date3 {width: 110px;}
.analysis-sales-product .date4 {width: 80px;}
.analysis-sales-product .total {min-width: 90px;width: 90px;}
.analysis-sales-product .total + tr td {border-top: 2px solid #e2e2e2;}
.analysis-sales-product .total + tr td:first-of-type {border-bottom: 1px solid #e2e2e2;}

table span.project-name {display: inline-block;width: 15em;}

table span[class^="overflow"],
table span[class*=" overflow"] {display: inline-block;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;width: 100%;}

table span.overflow15 {width: 15em;}

/***** tab-total *****/
#top-tab-total .total-slider div.google-visualization-tooltip ul li{white-space:nowrap;}
#top-tab-total .total-slider01 div.google-visualization-tooltip ul li:first-child{display:none;}
#top-tab-total .total-slider01 div.google-visualization-tooltip ul li:nth-child(2) span:nth-child(2)::after{content:"万";display:inline;}
#top-tab-total .total-slider02 div.google-visualization-tooltip ul li:nth-child(2) span:nth-child(2)::after{content:"%";display:inline;}
#top-tab-total .total-chart-wrap{position:relative;padding-top:5px;}
#top-tab-total .total-chart-wrap .total-unit{position:absolute;left:4%;top:0;font-size:12px;color:#999;}
#top-tab-total .total-chart-wrap .total-unit-right{position:absolute;right:1%;top:0;font-size:12px;color:#999;}
#top-tab-total .total-slider02 .total-chart-wrap .total-unit{left:1%;}
#top-tab-total .total-chart{width:100%;height:400px;}
#top-tab-total .total-title{font-size:18px;}
#top-tab-total .slick-slider{padding:0 30px;}
#top-tab-total .slick-slider .slick-arrow{position:absolute;top:50%;z-index:10;font-size:0;width:40px;height:50px;background:transparent;outline:0;border:0;margin-top:-25px;display:flex;align-items:center;justify-content:center;}
#top-tab-total .slick-slider .slick-prev{left:-10px;}
#top-tab-total .slick-slider .slick-prev::before{content:"";display:block;width:20px;height:20px;border-top:2px solid #00a389;border-left:2px solid #00a389;transform:rotate(-45deg);transform-origin:center top;}
#top-tab-total .slick-slider .slick-next{right:-10px;}
#top-tab-total .slick-slider .slick-next::before{content:"";display:block;width:20px;height:20px;border-top:2px solid #00a389;border-right:2px solid #00a389;transform:rotate(45deg);transform-origin:center top;}
#top-tab-total .slick-slider .slick-disabled{cursor:default;}
#top-tab-total .slick-slider .slick-disabled::before{border-color:#ccc;}

@media screen and (max-width:768px){
  #top-tab-total .total-title{font-size:16px;}
  #top-tab-total .total-chart{height:350px;}
  #top-tab-total .total-slider02 .total-chart-wrap .total-unit{left:2%;}
  #top-tab-total .slick-slider{padding:0;}
  #top-tab-total .slick-slider .slick-prev{left:-30px;}
  #top-tab-total .slick-slider .slick-next{right:-30px;}
}

/*.row.square-btn-wrapper*/

	.square-btn-wrapper button {
		width: 80px;
		height: 80px;
		padding: .4rem!important;
	}
@media (max-width: 991px){
	.square-btn-wrapper {
		padding: 0 15px;
	}
	.square-btn-wrapper button {
		width: 100%;
		height: auto;
	}
}

/***** table-input-money *****/
.table-input-money table thead th { min-width: 8em;}

/***** search-dropmenu *****/
.search-dropmenu{
	width: 500px;
	position: absolute;
	right: -90px;
	top: 40px;
	display: none;
	z-index: 1;
}
.search-dropmenu .bootstrap-select{
	display: block !important;
}
.period-custom{ display: none; }

@media (max-width: 767px){
	.search-dropmenu{
		width: 94vw;
	}
}

/***** custom-nav-tabs *****/
.custom-nav-tabs.nav-tabs {
    border: none;
}
.custom-nav-tabs.nav-tabs .nav-link {
    border-color: inherit;
    font-size: .7rem !important;
    padding: 0.375rem 0 !important;
    min-width: 75px;
}

/***** fixed table head *****/
#fix-card.fixed .fixedhead-clone { position: fixed; top: 70px; left: 2.25rem; overflow-x: auto; -webkit-overflow-scrolling: touch;}
#fix-card .fixedhead-clone table { margin:0;}
#fix-card .fixedhead-clone::-webkit-scrollbar { width: 1px;}

/***** sticky-cell *****/
@media (min-width: 767px){
	.table .sticky-cell-left { position: -webkit-sticky!important; position: sticky!important; left: 0;}
}

/***** sticky-cell *****/
.page-link.text-dark.disabled {
    color: #bbb!important;
}
.page-link.disabled:hover {
    background-color: #ffffff;
}
/***** title *****/
.ttl-con{
    font-size: 20px;
    font-weight: bold;
    padding: 0 10px 0 20px;
    border-left: double 9px #00a389;
    position: relative;
}
.ttl-con::before{
    content: "";
    height: 100%;
    width: 0;
    border-left: double 9px #00a389;
    position: absolute;
    top: 0;
    left: 3px;
}

/***** graphs *****/
.total-slider { display:flex; justify-content:flex-start; flex-wrap:wrap; }
.total-slider > div { width:50%; padding:15px 10px; }
.total-slider > div.wide { width:100%; }
.total-chart-summary { text-align:center; }
.total-chart-summary span { display:inline-block; padding:10px; border:1px solid #333; text-align:left; }

@media (max-width: 767px){
	.total-slider > div { width:100%; }
}

/***** control-btn *****/
#control-btn {position: absolute; width: 30px; height: 30px; right: 1.25rem; top: 20px; cursor: pointer; z-index: 10;}
#control-btn:before {content: "\f078"; position: absolute; top: 50%; left: 50%; color: #fff; font-family: "Font Awesome 5 Free"; font-size: 1.4rem; font-weight: 900; transform: translate(-50%, -50%);}
#control-btn.open:before {content: "\f077";}

/***** card-specify *****/
.card-specify .form-group {padding-left: 15px; padding-right: 15px;}
.card-specify .period {width: 230px;}
.card-specify .unit {width: 180px;}
.card-specify .person {width: calc(100% - 910px); /*overflow: hidden;*/}
/*.card-specify .person .select2-selection {max-width: 100%;}
.card-specify .person .select2-selection__rendered {width: max-content;}*/
.card-specify .execution {width: 100px;}
.card-specify .terms {width: 200px; border-left: 1px solid #ced4da;}
.card-specify .operation {width: 200px;}

@media (max-width: 1400px){
    .card-specify .person {width: calc(100% - 510px);}
}
@media (max-width: 991px){
    .card-specify .row {margin: 0;}
    .card-specify .form-group {padding-left: 0; padding-right: 0;}
    .card-specify .period {width: 100%;}
    .card-specify .unit {width: 100%;}
    .card-specify .person {width: 100%;}
    /*.card-specify .person .select2-selection {width: 265px;}*/
    .card-specify .execution {width: 100%;}
    .card-specify .terms {width: 100%; padding-top: 15px; margin-top: 15px !important; border-left: none; border-top: 1px solid #ced4da;}
    .card-specify .operation {width: 100%;}
}

/***** tab *****/
@media (min-width: 992px){
    #tab8 .card #scrollbar-top {height: calc(100vh - (200.8px + 4.25rem));}
    #tab8 .card.open #scrollbar-top {animation: card-open .5s forwards linear; height: calc(70vh + 80px);}
    @keyframes card-open {
        0% {height: 70vh;}
        100% {height: calc(70vh + 80px);}
    }
}