/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-bottom: 20px;
    font-size: 14px !important;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 10px;
    margin-bottom: 30px !important;
    max-width: 1383px !important;
    min-width: 1383px !important;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
    background-color: #777;
    border-color: #fff
}

.hidden {
    display: none;
}

.select2-search__field{
    min-width:100% !important;
}
/***************************************************************************/
/* 各属性の定義
/***************************************************************************/
/* テキストボックスの幅を設定 */
input[type="text"] {
    min-width: 100%;
    height: 28px;
}

/* テキストエリアの幅を設定 */
textarea {
    min-width: 100%;
}

/* テキストエリアのエリア変更無効 */
.textarea-resize {
    resize: none;
}

/* セレクトボックス、コンボボックスの幅、高さを設定 */
select {
    /* min-width: 100%;*/
    width: 100%;
    height: 28px;
}

/* セレクトボックス空選択肢の高さ */
.select2-results__option--selectable {
    min-height: 33px;
}

/* チェックボックスの設定 */
input[type=checkbox] {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-bottom: 2px;
}

    input[type=checkbox] + label {
        margin-left: 3px;
        display: initial;
    }

/* ラジオボタンの設定 */
input[type=radio] {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-bottom: 2px;
}

    input[type=radio] + label {
        margin-left: 3px;
        display: initial;
    }

/* テキストボックスのReadOnlyの設定 */
input[type="text"][readonly] {
    background-color: rgb(247 247 247);
    cursor: default;
    border-color: rgb(206 206 206);
    border-width: 1px;
    border-style: Solid;
    border-radius: 0.15em;
}

/* フィールドセット枠ありの設定 */
fieldset {
    border: 2px solid #c0c0c0;
    margin: 5px 2px;
    padding: 1.35em 1.625em 0.75em;
}

/* フィールドセット枠なしの設定 */
.fieldset-non-border {
    border: none;
    margin: 0px;
    padding: 0em 1.625em 0em;
}

/* 枠ありラベル */
.label-with-border {
    border: 1px solid #dee2e6 !important;
    height: 28px;
    display: inline-block;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

/* 枠ありラベルの高さ変更 */
.label-with-border-height {
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;
}

    .label-with-border-height::-webkit-scrollbar {
        display: none;
    }

/* スクロールラベル */
.label-scroll {
    white-space: nowrap;
}

/* フィールドセットタイトルラベルの設定*/
.title-label {
    font-size: 20px !important;
}

/***************************************************************************/
/* 行関連の定義
/***************************************************************************/

/* 行と行の間隔を空ける */
.item-row {
    margin-bottom: 15px;
}

/* 1行内のラベルの位置を調整 */
.row label {
    margin-top: 4px;
}

/***************************************************************************/
/* ラベル関連の定義
/***************************************************************************/

/* 文字を右寄せ+太字にする */
.text-right-weight-bold {
    text-align: right;
    font-weight: 700;
    font-weight: 700;
}

/* グレー注釈 */
.gray-annotation {
    color: #666666;
}

/***************************************************************************/
/* ボタンの定義
/***************************************************************************/

/* ボタンのフォント、パディング領域設定 */
.btn {
    min-width: 100%;
    font-size: 15px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-weight: bold;
}

/* リンクボタン非活性 */
a[disabled] {
    pointer-events: none; /* aタグのリンクを無効にする */
}

/* リンクボタンのカーソル変更 */
.link-btn-cursor {
    cursor: pointer;
}

/* SlickGrid内のボタンのフォント、パディング領域設定 */
.slick-cell .btn {
    min-width: 100%;
    font-size: 12px;
    padding-top: 3px;
    padding-bottom: 1px;
    margin-bottom: 3px;
}

/* 戻るボタン */
.btn-back {
    background-color: #3C3C35;
    border-color: #3C3C35;
    color: #FFF;
}

    .btn-back:hover, .btn-back:focus, .btn-back:visited,
    .btn-back:active {
        background-color: #7E7D76;
        border-color: #7E7D76;
        color: #FFF;
    }

/* 処理ボタン */
.btn-submit {
    background-color: #0B406B;
    border-color: #0B406B;
    color: #FFF;
}

    .btn-submit:hover, .btn-submit:focus, .btn-submit:visited,
    .btn-submit:active {
        background-color: #0F558F;
        border-color: #0F558F;
        color: #FFF;
    }

/* 遷移ボタン */
.btn-transition {
    background-color: #2B7906;
    border-color: #2B7906;
    color: #FFF;
}

    .btn-transition:hover, .btn-transition:focus, .btn-transition:visited,
    .btn-transition:active {
        background-color: #78A662;
        border-color: #78A662;
        color: #FFF;
    }

/* 確定ボタン */
.btn-confirm {
    background-color: #E73440;
    border-color: #E73440;
    color: #FFF;
}

    .btn-confirm:hover, .btn-confirm:focus, .btn-confirm:visited,
    .btn-confirm:active {
        background-color: #FF3232;
        border-color: #FF3232;
        color: #FFF;
    }

/* 登録ボタン */
.btn-register {
    background-color: #F08300;
    border-color: #F08300;
    color: #FFF;
}

    .btn-register:hover, .btn-register:focus, .btn-register:visited,
    .btn-register:active {
        background-color: #F09930;
        border-color: #F09930;
        color: #FFF;
    }

/* ショートカットボタン */
.btn-shortcut {
    background-color: #FFFFFF;
    border: solid 2px #078cdf;
    color: #078cdf;
    font-weight: bold;
}

    .btn-shortcut:hover, .btn-shortcut:focus, .btn-shortcut:visited,
    .btn-shortcut:active {
        background-color: #FFFFFF;
        border: solid 2px #7aa8c5;
        color: #7aa8c5;
        font-weight: bold;
    }

/* ダウンロードボタン */
.btn-download span:after {
    content: " ";
    position: absolute;
    background: url(../Image/icon-download.png) no-repeat 92% 2px;
    background-size: contain;
    height: 22px;
    width: 16px;
    margin-left: 8px;
}

/* 検索ボタン */
.btn-search span:after {
    content: " ";
    position: absolute;
    background: url(../Image/icon-search.png) no-repeat 92% 2px;
    background-size: contain;
    height: 22px;
    width: 16px;
    margin-left: 8px;
}

/* 検索ボタン 虫眼鏡アイコンのみ表示用*/
.btn-search-only-logo {
    padding: 13px 0px;
    min-width: 30px;
}

    .btn-search-only-logo span:before {
        content: " ";
        position: absolute;
        margin-top: -10px;
        background: url(../Image/icon-search.png) no-repeat 92% 2px;
        background-size: contain;
        height: 22px;
        width: 16px;
        margin-left: -8px;
    }

/* メール送信ボタン */
.btn-mail span:before {
    content: " ";
    position: absolute;
    background: url(../Image/icon-mail.png) no-repeat 92% 2px;
    background-size: contain;
    height: 22px;
    width: 16px;
    margin-left: 8px;
}

/* ゴミ箱ボタン */
.btn-garbage {
    padding: 13px 0px;
    min-width: 30px;
}

    .btn-garbage span:before {
        content: " ";
        position: absolute;
        margin-top: -10px;
        background: url(../Image/icon-garbage.png) no-repeat 92% 2px;
        background-size: contain;
        height: 22px;
        width: 16px;
        margin-left: -8px;
    }

/* クリップボタン */
.btn-clip {
    padding: 13px 0px;
    min-width: 30px;
}

    .btn-clip span:before {
        content: " ";
        position: absolute;
        margin-top: -10px;
        background: url(../Image/icon-clip.png) no-repeat 92% 2px;
        background-size: contain;
        height: 22px;
        width: 16px;
        margin-left: -8px;
    }

/* バツボタン */
.btn-batu {
    padding: 13px 0px;
    min-width: 30px;
}

    .btn-batu span:before {
        content: " ";
        position: absolute;
        margin-top: -10px;
        background: url(../Image/icon-batu.png) no-repeat 92% 2px;
        background-size: contain;
        height: 22px;
        width: 16px;
        margin-left: -8px;
    }

/* ファイルボタン */
.btn-file {
    padding: 13px 0px;
    min-width: 30px;
}

    .btn-file span:before {
        content: " ";
        position: absolute;
        margin-top: -10px;
        background: url(../Image/icon-file.png) no-repeat 92% 2px;
        background-size: contain;
        height: 22px;
        width: 16px;
        margin-left: -8px;
    }

/* 右矢印ボタン */
.btn-right-arrow {
    padding: 13px 0px;
    min-width: 30px;
}

    .btn-right-arrow span:before {
        content: " ";
        position: absolute;
        margin-top: -10px;
        background: url(../Image/icon-right-arrow.png) no-repeat 92% 2px;
        background-size: contain;
        height: 22px;
        width: 16px;
        margin-left: -8px;
    }

/* カレンダーボタン */
.ui-datepicker-trigger {
    background-color: #3C3C35;
    border-color: #3C3C35;
    color: #FFF;
    padding: 12px 0px;
    min-width: 30px;
    border-radius: 4px;
    vertical-align: top;
}

    .ui-datepicker-trigger:hover, .ui-datepicker-trigger:focus, .ui-datepicker-trigger:visited,
    .ui-datepicker-trigger:active {
        background-color: #7E7D76;
        border-color: #7E7D76;
        color: #FFF;
        padding: 12px 0px;
        min-width: 30px;
        border-radius: 4px;
        vertical-align: top;
    }

    .ui-datepicker-trigger span:before {
        content: " ";
        position: absolute;
        margin-top: -11px;
        background: url(../Image/icon-calendar.png) no-repeat 92% 2px;
        background-size: contain;
        height: 22px;
        width: 18px;
        margin-left: -9px;
    }

/* 全ボタン非活性 */
.btn-back[disabled],
.btn-submit[disabled],
.btn-transition[disabled],
.btn-confirm[disabled],
.btn-register[disabled] {
    background-color: #B1B1AC !important;
    border-color: #B1B1AC !important;
    color: #7E7D76 !important;
    opacity: .65;
}


/***************************************************************************/
/* ヘッダー部の定義
/***************************************************************************/

/* ヘッダーの高さなど */
.navbar-default {
    height: 45px;
    background-color: #f9f9f9;
    color: #212529;
    box-shadow: 0px 5px 5px -5px #CCC;
    background-image: none;
    font-size: 14px;
    /*min-width: 1383px !important;*/
}

/* ロゴ */
img.logo {
    height: 25px;
    margin-left: 10px;
}
/* 画面サイズが最小～1140pxまで */
@media (max-width: 1140px) {
    /* システム名称 */
    img.logo {
        height: 25px;
        margin-left: 10px;
        margin-top: 13px;
    }
}

/* ログイン画面ロゴ */
img.login-logo {
    height: 37px;
    position: relative;
    top: 4px;
}

/* システム名称 */
.system-name {
    margin-left: 20px;
    margin-top: 10px;
    font-weight: bold;
    font-size: 17px;
}
/* 画面サイズが最小～1140pxまではシステム名称を表示しない */
@media (max-width: 1140px) {
    /* システム名称 */
    .system-name {
        display: none;
    }
}

/* 画面名 */
.page-name {
    position: absolute;
    left: 46%;
    top: 10px;
    font-weight: bold;
    font-size: 17px;
}

/* ユーザ名 */
.user-name {
    margin-top: 10px;
    margin-right: 70px;
    font-weight: bold;
    font-size: 17px;
    min-width: 250px;
}
/* 画面サイズが最小～852pxまではユーザ名を表示しない */
@media (max-width: 852px) {
    /* システム名称 */
    .user-name {
        display: none;
    }
}

/* ハンバーガーボタン */
#menu-trigger {
    display: block;
    width: 50px;
    height: 45px;
    background-color: #3c3c35;
    cursor: pointer;
    z-index: 300;
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
}

    #menu-trigger a,
    #menu-trigger a span {
        transition: all .4s;
    }

    #menu-trigger a {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

        #menu-trigger a span {
            display: block;
            position: absolute;
            left: 8px;
            width: 34px;
            height: 2px;
            background-color: white;
        }

            #menu-trigger a span:nth-of-type(1) {
                top: 13px;
            }

            #menu-trigger a span:nth-of-type(2) {
                top: 20px;
            }

            #menu-trigger a span:nth-of-type(3) {
                top: 27px;
            }

            #menu-trigger a span:before {
                content: "";
                display: inline-block;
                width: 2px;
                height: 2px;
                background-color: #3c3c35;
                margin-right: 2px;
                position: absolute;
                top: 0;
                right: auto;
                bottom: auto;
                left: 2px;
            }

        #menu-trigger a.active span:nth-of-type(1) {
            -webkit-transform: translateY(8px) rotate(-45deg);
            transform: translateY(8px) rotate(-45deg);
        }

        #menu-trigger a.active span:nth-of-type(2) {
            opacity: 0;
        }

        #menu-trigger a.active span:nth-of-type(3) {
            -webkit-transform: translateY(-5px) rotate(45deg);
            transform: translateY(-5px) rotate(45deg);
        }

        #menu-trigger a.active span:before {
            display: none;
        }

    #menu-trigger > p {
        width: 100%;
        color: white;
        text-align: center;
        position: absolute;
        top: auto;
        right: 0;
        bottom: 4px;
        left: auto;
        font-size: 40px;
        font-size: 2.5vw;
    }

/* メニューエリア */
.menuArea {
    display: block;
    width: 350px;
    position: fixed;
    background-color: #FFFFFF;
    top: 45px;
    right: -1000px;
    bottom: 0;
    transition: all 0.5s;
    z-index: 3;
    opacity: 0;
}

.open .menuArea {
    right: 0;
    opacity: 1;
}

.menuArea .inner {
    padding: 20px;
}

    .menuArea .inner ul {
        list-style: none;
        padding: 0;
    }

        .menuArea .inner ul li {
            margin-top: 5px;
            border-bottom: 1px solid #E6E6E6;
        }

            .menuArea .inner ul li a {
                display: block;
                text-decoration: none;
                color: #333;
                padding: 10px;
                transition-duration: 0.2s;
            }

                .menuArea .inner ul li a:hover {
                    color: #dc143c;
                }

            .menuArea .inner ul li:nth-child(10) {
                text-align: right;
            }

            .menuArea .inner ul li a span {
                font-weight: 700;
            }

#mask {
    display: none;
    transition: all 0.5s
}

.open #mask {
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    position: fixed;
}

/* パンくずリスト */
.breadcrumb-list {
    top: 45px;
    position: sticky;
    margin-right: 3% !important;
    margin-left: 3% !important;
    max-width: 94% !important;
    font-size: 14px;
    z-index: 2;
}

#breadcrumbBox {
    position: sticky;
    top: 45px;
    z-index: 1019;
}

ul.breadcrumb {
    background-color: #FFF;
    border-color: #dad9d6;
    margin-bottom: 10px;
    padding: 3px;
    padding-left: 0;
    border-radius: 0;
}
/* パンくずリストの区切り文字指定 */
.breadcrumb > li + li:before {
    padding: 0.5px;
    content: ">\00a0";
    color: #8c8c8c;
}
/* パンくずリストの文字 */
.breadcrumb > .active {
    color: #444;
}

.breadcrumb a {
    color: #00aeff;
}

    .breadcrumb a:hover {
        color: #008bcc;
    }


/***************************************************************************/
/* フッター部の定義
/***************************************************************************/
/* フッターの幅、高さ、色の設定 */
.footer {
    width: 100%;
    height: 30px;
    background-color: #f9f9f9;
    color: #212529;
    line-height: 30px;
    box-shadow: 0px 5px 5px 5px #CCC;
}

    .footer .footer-container {
        padding: 0 25px;
    }


/***************************************************************************/
/* 入力エラーの定義
/***************************************************************************/

/* 入力エラー表示用クラス（エラーがあった要素につける）*/
.input-error {
    background-color: #FFC0D2 !important;
}

/* 入力エラーメッセージ表示エリア */
.error-area {
    display: table;
    font-size: 85%;
    font-weight: bold;
    color: red;
}


/***************************************************************************/
/* 編集権限なしの場合のメッセージ表示エリアの定義
/***************************************************************************/

/* 編集権限なしの場合のメッセージ表示エリア */
.edit-auth-message-area {
    display: table;
    font-size: 85%;
    font-weight: bold;
    color: red;
}


/***************************************************************************/
/* ローディング
/***************************************************************************/

/* ローディングアニメーションの設定 */
#loader_box {
    width: 50px;
    height: 50px;
    margin: auto;
    margin-top: 10px;
}

#loader {
    position: absolute;
    width: 50px; /* ローディングアイコンの横サイズ */
    height: 50px; /* ローディングアイコンの縦サイズ */
    border-radius: 50px; /* CSS3で円を書く */
    border: 8px solid #17cddd; /* 円に枠をつける */
    border-right-color: transparent; /* 円の右にC状の空きをつける */
    -webkit-animation: spin 1s infinite linear; /* 回転のアニメーションをつける */
    -moz-animation: spin 1s infinite linear;
    -ms-animation: spin 1s infinite linear;
}

/* キーフレームのアニメーションをつける */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        opacity: 0.4;
    }

    50% {
        -webkit-transform: rotate(180deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(360deg);
        opacity: 0.4;
    }
}

@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
        opacity: 0.4;
    }

    50% {
        -moz-transform: rotate(180deg);
        opacity: 1;
    }

    100% {
        -moz-transform: rotate(360deg);
        opacity: 0.4;
    }
}

@-ms-keyframes spin {
    0% {
        -ms-transform: rotate(0deg);
        opacity: 0.4;
    }

    50% {
        -ms-transform: rotate(180deg);
        opacity: 1;
    }

    100% {
        -ms-transform: rotate(360deg);
        opacity: 0.4;
    }
}

/***************************************************************************/
/* Modal
/***************************************************************************/
.modal-header {
    border-bottom: none
}

/* 自動改行 */
.modal-body {
    overflow-wrap: break-word;
}

/*
    z-indexについて
    各画面の入力ポップアップ：modal部品のデフォルト（1000前後）
    確認ポップアップ：'modal-top'の設定値（9999）
    ローディングマーク：LoadingBox.jsで設定（10000）
    エラーポップアップ：'error-modal-top'の設定値（99999）
*/
/* エラーモーダルは一番上に設定 */
.error-modal-top {
    z-index: 99999;
}

/* 2枚以上モーダルを出す場合の一番上のモーダルに設定 */
.modal-top {
    z-index: 9999;
}

/* フッター */
.modal-footer-common {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}

/* 色付きヘッダー */
.modal-header-common {
    background-color: #3C3C35;
    color: #FFF;
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}

    .modal-header-common .close {
        opacity: 0.5;
    }

    .modal-header-common span {
        color: #FFF;
    }

/* 検索ポップアップのタイトル部分 */
.ui-widget-header {
    background-color: #7E7D76;
    color: #FFF;
    border: 1px solid #dddddd;
    font-weight: bold;
}

/* ポップアップの文字サイズ */
.popup-font {
    font-size: 17px;
}

/* ポップアップの幅サイズ */
.modal-dialog {
    max-width: 650px !important;
}

/* ポップアップの表示位置 */
.modal-dialog-position {
    top: 60%;
}

/* ポップアップ内で非同期処理をしたときに操作できなくなる件の対応 */
.ui-dialog {
    z-index: 1041;
}

/***************************************************************************/
/* 必須項目
/***************************************************************************/
/* 必須項目のマーク */
.required:before {
    content: "*";
    color: red;
}

/***************************************************************************/
/* アコーディオン
/***************************************************************************/
nav {
    display: none;
}

/* アコーディオン全体 */
.nav-parent {
    overflow-y: hidden;
    height: auto;
    border: solid;
    border-width: thin;
}

.nav-parent-title {
    padding: 10px;
    margin-bottom: 0px !important;
    border: solid;
    border-width: thin;
    font-weight: bold;
}

.nav-parent-body {
    overflow-y: scroll;
    height: auto;
    max-height: 600px;
}

/* トリガー部分 */
.nav-open {
    padding: 3px;
    background: #E6E6E6;
    position: relative;
    margin: 0px !important;
    border: solid;
    border-width: thin;
    cursor: pointer;
}
    /* トリガー部分 開 */
    .nav-open.active {
        background: #DBE7FF;
    }

    /* トリガー部分 閉 */
    .nav-open div {
        background: #F0F5FF;
    }

    /* トリガー部分のラベル(セクション名) */
    .nav-open label {
        margin-top: 5px;
        margin-bottom: 5px;
        margin-left: 12px;
        font-weight: bold;
        font-size: 13px;
    }

    /* トリガー部分 閉じている時 */
    .nav-open::before {
        content: "＋";
        margin-top: 5px;
        margin-bottom: 5px;
        margin-left: 20px;
        font-weight: bold;
        font-size: 17px;
    }

    /* トリガー部分 開いている時 */
    .nav-open.active::before {
        content: "－";
    }

/* メニュー部分 */
.nav-open-div {
    border: none !important;
    width: 98.5%;
    margin-top: 5px;
    height: auto;
}

    .nav-open-div table {
        margin-bottom: 5px;
    }

    .nav-open-div .row {
        margin-left: 0px;
    }

    .nav-open-div .list-area {
        overflow-x: scroll !important;
    }

/***************************************************************************/
/* 下線の設定
/***************************************************************************/

/*データ箇所の下線*/
.under-line {
    position: relative;
    padding-bottom: 0.2em;
    border-bottom: 1px solid #000;
}

/***************************************************************************/
/* フェーズ
/***************************************************************************/
.phase-label {
    font-size: 16px !important;
}

/* 問合せラベル */
.inquiry-label {
    border-color: #548235;
    background-color: #548235;
    color: #FFFFFF;
}
/* 問合せエリア */
.inquiry-area {
    border-color: #E2F0D9;
    background-color: #E2F0D9;
}
/* 受付ラベル */
.reception-label {
    border-color: #2E75B6;
    background-color: #2E75B6;
    color: #FFFFFF;
}
/* 受付エリア */
.reception-area {
    border-color: #DEEBF7;
    background-color: #DEEBF7;
}
/* 完了ラベル */
.complete-label {
    border-color: #BF9000;
    background-color: #BF9000;
    color: #FFFFFF;
}
/* 完了エリア */
.complete-area {
    border-color: #FFF2CC;
    background-color: #FFF2CC;
}
/* 承認ラベル */
.approval-label {
    border-color: #C00000;
    background-color: #C00000;
    color: #FFFFFF;
}
/* 承認エリア */
.approval-area {
    border-color: #F6E2DC;
    background-color: #F6E2DC;
}
/* 見積ラベル */
.qotation-label {
    border-color: #C55A11;
    background-color: #C55A11;
    color: #FFFFFF;
}
/* 見積エリア */
.qotation-area {
    border-color: #FBE5D6;
    background-color: #FBE5D6;
}

/* 商品検索 バツボタン */
button.ui-dialog-titlebar-close {
    display: none;
}

/** 日付の選択済みの背景色 **/
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background: #fffa90 !important;
}

.modal-backdrop {
    background-color: transparent !important;
    width: 100%;
    height: 100%;
}

.modal-content {
    background-color: #f0f0f0 !important;
    border: 3px solid !important;
    border-color:black !important;
}

.select2-selection {
    border-color: #333333 !important;
}

.select2-dropdown {
    border-color: #333333 !important;
}