.far{
    margin-right: 0.5em
}

/* パンくず ================================================================== */
.breadcrumb-custom {
    display: flex;
    gap: 0 20px;
    list-style: none;
    padding: 6px 0 6px 18px;
    overflow: hidden;
    background-color: var(--breadcrumb-custom-bg-color);
    font-size: .9em;
}

.breadcrumb-custom li {
    display: flex;
    align-items: center;
    position: relative;
    padding-right: 20px;
}

.breadcrumb-custom li:not(:last-child)::before,
.breadcrumb-custom li:not(:last-child)::after{
    position: absolute;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    content:'';
}
.breadcrumb-custom li:not(:last-child)::before{
    right: 0;
    border-left: 10px solid var(--breadcrumb-custom-color);
}

.breadcrumb-custom li:not(:last-child)::after{
    right: 2px;
    border-left: 10px solid var(--breadcrumb-custom-bg-color);
}

.breadcrumb-custom a {
    color: var(--breadcrumb-custom-color);
    text-decoration: underline;
}
.breadcrumb-custom span {
    color: var(--breadcrumb-custom-color);
}
/* == */


/* Sweet Alert ================================================================== */
.swal2-actions {
    flex-direction: row-reverse;
}
/* == */


/* loading ================================================================== */
.app_preload {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒色 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* ローディング画面を他の要素の上に表示するための値 */
}

/* パスワード表示ボタン ================================================================== */
.disp_pass.js_disp_pass_toggle .password_disp{
    display: none;
}
.disp_pass .password_disp{
    display: inline-block;
}
/* == */


/* ボタン ================================================================== */
.btn_icon:not([class^="mgc_"], [class*=" mgc_"]){
    display: inline-block;
    vertical-align: middle;
}
.btn_label{
    padding-right: .25em;
}
.btn-area-start-end>*{
    display: block;
}
.modal-header .close{
    color: var(--main-color-fore);
}
.btn-outline-main {
    color: var(--main-color);
    border-color: var(--main-color);
}
.btn-outline-main:hover {
    color: #fff;
    background-color: var(--main-color);
    border-color: var(--main-color);
}
/* == */


/* datatables ================================================================== */
table.dataTable tbody th, table.dataTable tbody td {
    padding: .3rem;
}
table.dataTable thead th {
    white-space: nowrap;
}
table.table{
    width: auto;
    min-width: 100%;
}
table.table tr th,
.modal-header{
    background-color: var(--main-color);
    color: var(--main-color-fore);
}
table.dataTable td.dataTables_empty{
    text-align: left;
}
.app_list_table_action_cell button>span{
    font-size: 1em;
}
.app_list_table_action_cell button{
    padding: 0 .25em 2px;
}
.dataTables_wrapper{
    overflow-x: auto;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    /*color: inherit !important;*/
    color: var(--main-color-fore) !important;
    border: 1px solid rgba(0, 0, 0, 0.3);
    background-color: var(--gradation-main-dark);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, var(--gradation-main-light)), color-stop(100%, var(--gradation-main-dark)));
    background: -webkit-linear-gradient(top, var(--gradation-main-light) 0%, var(--gradation-main-dark) 100%);
    background: -moz-linear-gradient(top, var(--gradation-main-light) 0%, var(--gradation-main-dark) 100%);
    background: -ms-linear-gradient(top, var(--gradation-main-light) 0%, var(--gradation-main-dark) 100%);
    background: -o-linear-gradient(top, var(--gradation-main-light) 0%, var(--gradation-main-dark) 100%);
    background: linear-gradient(to bottom, var(--gradation-main-light) 0%, var(--gradation-main-dark) 100%);
}
.user_datatables_wrapper{
    clear: both;
    max-width: 100%;
    overflow: auto;
}
.table_controller_parent::after{
    content: "";
    display: table;
    clear: both;
}
#app_list_table_parent{
    position: relative;
}
#app_list_table th {
    position: sticky;
    top: 0;
}
#app_list_table td {
    max-width: 25em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-bordered th {
    outline: 1px solid #dee2e6;
    outline-offset: -1px;
}

/* == */


/* select2 修正 ================================================================== */
.form-control-sm + .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered{
    /*line-height: 1.75em;*/
    font-size: .875rem;
}
.form-control-sm + .select2-container--bootstrap4 .select2-selection--single{
    height: inherit !important;
}
.is-invalid .select2-container--bootstrap4 .select2-selection{
    border-color: #dc3545 !important;
}
.is-invalid .select2~.invalid-feedback{
    display: block;
}
.select2-results__option {
    white-space: nowrap;
}
/* == */


/* サイドバー ================================================================== */
.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active{
    background-color: var(--main-color);
    color: var(--main-color-fore);
}
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active, [class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active:focus, [class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active:hover{
    background-color: var(--main-color-light);
    color: var(--main-color-light-fore);
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active{
    background-color: var(--main-color);
    color: var(--main-color-fore);
}
.sidebar .nav-item i:not(.fa-angle-left) {
    min-width: 1.5em;
}
/*body:not(.layout-fixed) .main-sidebar{*/
/*    height: 100vh;*/
/*}*/
/* == */

/* ファイル入力 ================================================================== */
.app_input_file label{
    padding: .5em 1em;
    border-radius: 4px;
    color: var(--main-color-fore);
    background-color: var(--main-color);
    cursor: pointer;
    margin-right: 1em;
}
.app_input_file label:hover{
    opacity: 0.7;
}
.app_input_file input[type="file"] {
    display: none;
}
.is-invalid .app_input_file~.invalid-feedback{
    display: block;
}
/* == */

/* ファイル入力 ================================================================== */
.badge_require{
    background-color: var(--badge_require_bg-color);
    border: 2px groove var(--badge_require_border-color);
    color: var(--badge_require-fore-color);
}
/* == */


/* グラフ ================================================================== */
.chart_canvas{
    width: 100%;
}
table.graph_col_table{

}
table.graph_col_table th,
table.graph_col_table td{
    width: 1% !important;
    white-space: nowrap !important;
}
table.graph_col_table th{
    padding-left: 1em;
    padding-right: 2.25em;
}
table.graph_col_table td{
    padding-left: 1em;
    padding-right: 1em;
}
/* == */


/* icheck ================================================================== */
.is-invalid [class*="icheck-"]~.invalid-feedback{
    display: block;
}
/* == */


/* tooltip ================================================================== */
.custom-tooltip {
    max-width: 100%; /* 必要に応じて最大幅を調整 */
    white-space: nowrap; /* 改行せずにテキストを一行で表示 */
    overflow: hidden; /* コンテンツがオーバーフローした場合は非表示に */
    text-overflow: ellipsis; /* オーバーフローしたテキストを省略記号で表示 */
}
/* == */