@CHARSET "UTF-8";

@media (prefers-color-scheme: dark) {

    /* 全体の背景色とフォント */
    #boxed-wrapper {
        background-color: #5d5d5d!important;
        color: #f2f2f2;
    }

    a {
        color: rgb(202, 225, 255);
    }

    a:hover {
        color: rgb(195, 238, 255);
    }

    a:focus {
        color: #fff
    }


    /* 第1レベルナビゲーション navbar 関連 */
    .navbar {
        border-bottom: 1px solid #404040;
    }

    .navbar-light {
        background-color: #404040;
    }

    .navbar-light .navbar-text {
        color: #f2f2f2;
    }

    .navbar-light .navbar-text a {
        color: #c1deff;
    }

    .navbar-light .navbar-text a:hover {
        color: #c1deff;
    }

    .navbar-light .navbar-nav .nav-link {
        color: #f2f2f2;
    }

    .dropdown-item:focus, .dropdown-item:hover,
    .dropdown-item:focus, .dropdown-item:focus {
        background-color: #e5f5ff;
    }

    .navbar-light .navbar-nav .nav-link:focus,
    .navbar-light .navbar-nav .nav-link:hover {
        color: #c1deff;
    }

    .navbar-light .dropdown-item .nav-link:focus,
    .navbar-light .dropdown-item .nav-link:hover {
        color: #c1deff;
    }

    .navbar-brand img {
        filter: invert(100%);
    }

    .dropdown-menu {
        background-color: #333;
        color: #f2f2f2;
    }

    .dropdown-item {
        color: #f2f2f2;
    }

    .navbar-light .dropdown-item .nav-link:focus, .navbar-light .dropdown-item .nav-link:hover,
    .navbar-light .dropdown-item .nav-link:focus, .navbar-light .dropdown-item .nav-link:focus {
        color: #333;
    }


    /* 第2レベル nav-tabs ナビゲーション */
    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        background-color: #5d5d5d!important;
        color: #f2f2f2;
        border-bottom-color: transparent;
    }


    /* テーブル表示調整 */
    .pretty-table table {
        background-color: #5c5c5c!important;
        color: #f2f2f2;
    }

    .pretty-table table thead th {
        background-color: #444!important;
        color: #f2f2f2;
    }

    .pretty-table table th {
        background-color: #444!important;
        color: #f2f2f2;
    }

    .pretty-table table {
        border-color: #bbb !important;
    }

    .pretty-table table .text-danger a {
        color: #0056b3;
    }


    /* テキスト系 標準ユーティリティクラス */
    .text-muted {
        color: #ddd!important;
    }

    .text-success {
        color: #68c669;
    }

    .text-danger {
        color: #ffc7c6!important;
    }
    .bg-danger-light.text-danger {
        color: #dc3545!important;
    }


    /* カード */
    .card {
        background-color: rgba(255, 255, 255, 0.1);
        border: 1px solid rgb(0 0 0 / 23%);
    }


    /* ボタン */
    .btn-default {
        background-color: #f0f0f0;
    }

    .btn-success {
        background-color: #5ead5c;
    }

    .btn-warning {
        background-color: #e5a54a;
    }

    .btn-primary {
        background-color: #5f8dbf;
    }

    .btn-info {
        background-color: #54b3ce;
    }


    /* form-control関連 */
    .form-control {
        background-color: #f6f6f6;
    }

    .form-control:focus {
        border-color: #6ec2fe;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(166, 215, 255, 0.9);
    }

    .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
        background-color: #b4b4b4;
    }

    .select2-container--default.select2-container--disabled .select2-selection--single {
        background-color: #b4b4b4 !important;
        cursor: default;
    }


    /* モーダル関連 */
    .modal-content {
        background-color: #f0f0f0;
    }


    /* 水平線 */
    hr {
        border-top: 1px solid #bbb;
    }


    /* テキスト系 独自ユーティリティクラス */
    .h3-tooltip {
        color: #9bb7db;
    }

    .status-table > tbody > tr > th {
        background-color: #676767;
    }

    .status-table > tbody > tr > td {
        border-color: rgba(229, 229, 229, 0);
    }

    .check-ok {
        color: #87d489;
    }

    .check-ng {
        color: #fc6260;
    }

    .two-lines:after {
        border-top: 1px solid #bbb;
        border-bottom: 1px solid #bbb;
    }

}