html, body {
    /* スクロールバーの二重表示回避 */
    height: calc(99% - 0.5px) !important;
}

body {
    /*font-family: "メイリオ", Meiryo, Sans-Serif;*/
    /*font-family: "Meiryo UI", Meiryo, Sans-Serif!important;*/
    font-family: 'Noto Sans Mono CJK JP', monospace;
    padding-top: 0;
    padding-bottom: 0;
    overflow-y: hidden;
    overflow-x: hidden;
    scrollbar-track-color: #ffffff;
}

/*body {
    padding-top: 50px;
    padding-bottom: 20px;
}*/

/* Set padding to keep content from hitting the edges */
.body-content {

    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}


/* Set padding to display errors that occur during databinding */
.padding-error {
    padding-top: 20px;
}

@media only screen and (max-width: 767px) {
    .nofloat {
        float: none;
        padding: 10px 15px;
    }
}

/* Bootstrap styles overwrite */
/*.container {
    margin-left: 0 !important;
    padding-left: 0;
    padding-right: 0;
    width: 100% !important;
    height: 100% !important;
}*/


/* Bootstrap icon color*/
.my-white {
    color: #ffffff
}

/* 入力欄とエラーメッセージのグループスタイル */
.form-control-group {
    position: relative;
}

/* 非エラー時のエラーメッセージのスタイル */
.field-validation-valid {
    display: none;
}

/* エラーメッセージのスタイル */
.field-validation-error.errorMsg {
    /*
    position: absolute;
    width: 150px;
    right: -80px;
    bottom: 30px;
    background-color: #C61400;
    box-shadow: 0 0 3px 2px rgba(0,0,0,.4);
    z-index: 100;
*/
    padding: 5px;
    color: #ffffff;
    font-size: 12px;
    background-color: #ff4a63;
    border-radius: 4px;
    width: 100%;
    display: block;
}

.field-validation-error.errorMsg-textarea {
    /*
    position: absolute;
    width: 150px;
    right: -80px;
    top: -30px;
    background-color: #C61400;
    box-shadow: 0 0 3px 2px rgba(0,0,0,.4);
    z-index: 100;
*/
    padding: 5px;
    color: #ffffff;
    font-size: 12px;
    background-color: #ff4a63;
    border-radius: 4px;
    width: 100%;
    display: block;
}
/* エラーメッセージを吹き出し形式にするスタイル */
/*
    .field-validation-error.errorMsg:before,
    .field-validation-error.errorMsg-textarea:before {
        content: '';
        display: block;
        position: absolute;
        height: 0;
        width: 0;
        left: 15px;
        bottom: -8px;
        border: 8px transparent solid;
        border-bottom-width: 0;
        border-top-color: #AE1100;
        z-index: 100;
    }
*/
/* エラーメッセージ hover 時 */
/*
    .field-validation-error.errorMsg:hover {
        transition: all 0.3s ease;
        opacity: .2;
        cursor: default;
    }
*/

/* Ajax loading */
div.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    z-index: 2000;
    animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

div.loading:before {
    content: url('loading.gif');
    position: absolute;
    margin: -15px 0 0 -15px;
    left: 50%;
    top: 50%;
}

pre.disp-line {
    margin: 0px !important;
    font-size: inherit;
    color: inherit;
    background-color: inherit;
    border: none;
    border-radius: 0;
    padding: 0;
}

pre.disp-line {
    margin: 0px !important;
    font-size: inherit;
    color: inherit;
    background-color: inherit;
    border: none;
    border-radius: 0;
    padding: 0;
}

/* 一覧の省略表示 */
div.shortcut {
    height: 1.25em;
    overflow: hidden;
}

/* 検索条件レイアウト */
main .conditions {
    padding: 10px 20px 0 20px;
    width: 100%;
}

    main .conditions .row {
        margin-bottom: 15px;
    }

main .button-area {
    text-align: right;
}

    main .button-area #search {
        margin-right: 10px;
    }

/* 検索結果レイアウト */
main #List {
    padding: 0 20px 0 20px;
}

#searchList > thead > tr > td > a {
    color: #ffffff;
    text-decoration: none;
}

    #searchList > thead > tr > td > a.asc:after {
        font-family: 'FontAwesome';
        content: "\f0de";
        float: right;
    }

    #searchList > thead > tr > td > a.desc:after {
        font-family: 'FontAwesome';
        content: "\f0dd";
        float: right;
    }

/* ページングレイアウト設定 */
ul.pagination {
    margin: 0 20px 0 0;
}

/* 変更履歴レイアウト */
#History .panel-heading {
    cursor: pointer;
}

#History .accordion-toggle a:after {
    font-family: 'FontAwesome';
    content: "\f077";
    float: right;
    color: inherit;
}

#History .accordion-toggle a.collapsed:after {
    font-family: 'FontAwesome';
    content: "\f078";
    float: right;
    color: inherit;
}

/* jQuery Messagebox style overwrite */
.messagebox { /* IE9 が flex に未対応の為、位置・サイズを固定 */
    width: 500px\9 !important;
    margin: 0 auto\9;
}

.messagebox_overlay {
    background: rgba(0, 0, 0, 0.5);
    z-index: 300;
}

.messagebox_content {
    position: relative;
    padding: 5px;
}

    .messagebox_content:before {
        /*content: 'Jicwels EPA Integration System';*/
        content: '基幹システム';
        display: block;
        padding: 2px 5px;
        color: white;
        background: #4084C0;
        border-radius: 3px 3px 0 0;
    }

    .messagebox_content > label {
        position: relative;
        display: block;
        margin: 25px 10px 5px 60px;
    }

        .messagebox_content > label:before {
            position: absolute;
            left: -45px;
            top: -7px;
            font: normal normal normal 36px/1 FontAwesome;
        }

        /* .fa-info-circle */
        .messagebox_content > label.info:before {
            color: #315297;
            content: "\f05a";
        }

        /* .fa-warning */
        .messagebox_content > label.warning:before {
            color: #d2a800;
            content: "\f071";
        }

        /* .fa-exclamation-circle */
        .messagebox_content > label.error:before {
            color: #d20b0B;
            content: "\f06a";
        }

        /* .fa-question-circle */
        .messagebox_content > label.confirm:before {
            color: #315297;
            content: "\f059";
        }

/* メッセージ用アイコンカラー */
.icon-default {
    color: #777;
}

.icon-primary {
    color: #337ab7;
}

.icon-success {
    color: #5cb85c;
}

.icon-info {
    color: #5bc0de;
}

.icon-warning {
    color: #f0ad4e;
}

.icon-danger {
    color: #d9534f;
}

/* PlaceFolderの色設定 */
/* for Webkit */
.form-control::-webkit-input-placeholder {
    color: #9f9f9f;
    font-size: 0.9em;
}

/* for Firefox */
.form-control::-moz-placeholder {
    color: #9f9f9f;
    font-size: 0.9em;
}

/* for Firefox 18以前 */
.form-control:-moz-placeholder {
    color: #9f9f9f;
    font-size: 0.9em;
}

/* for Windows IE */
.form-control:-ms-input-placeholder {
    color: #9f9f9f;
    font-size: 0.9em;
}

/* 標準となるForm設定 */
.form-base {
    width: 100%;
    /* iphoneの画面サイズが300なので */
    min-width: 300px;
    /*min-width: 380px;*/
    padding: 15px;
    max-width: 800px;
    background-color: #EEEEEE;
}

.form-base .checkbox {
    font-weight: 400;
}

    /*bootstrapと競合する為*/
    /*.form-base .form-control {
    position: relative;
    box-sizing: border-box;
    height: auto;
    padding: 10px;
    font-size: 16px;
    margin-left: auto;
    margin-right: auto;
}*/

.form-base .form-control:focus {
    z-index: 2;
}

.form-base input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-base input[type="password"] {
    /*  margin-bottom: 10px;*/
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.form-base .input330w {
    max-width: 330px;
}

.container-cutom {
    width: 90%;
    max-width: 100%;
    min-height: calc(100vh - 145px);
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 80px;
    margin-bottom: 20px;
}

.footer {
    border-top: 1px solid rgba(67, 89, 102, 0.1);
    color: #58666e;
    text-align: center;
    /*margin-top: 1.25rem;*/
    padding: 10px 0px;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgb(255, 255, 255);
}
/*@media only screen and (max-width:1200px) {
    .container-cutom {
        max-width: 1140px;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }
}
@media only screen and  (max-width: 992px) {
    .container-cutom {
        max-width: 960px;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

}
@media only screen and (max-width: 768px) {
    .container-cutom {
        max-width: 720px;
        margin-right: auto;
        margin-left: auto;
    }
}
@media only screen and (max-width: 576px) {
    .container-cutom {
        max-width: 540px;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }
}*/
@media only screen and (max-width: 1253px) and (min-width:576px) {
    .navbar-expand-sm .navbar-toggler {
        display: block !important;
    }

    .navbar-toggler {
        vertical-align: top;
    }

    .collapse:not(.show) {
        display: none !important;
    }

    .show {
        display: block !important;
    }

    .navbar-nav {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column !important;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
    }

    #navbarNav {
        clear: both;
        display: none;
    }

    .show {
        display: block !important;
    }
}


.ui-autocomplete {
    max-height: 195px;
    overflow-y: auto; /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index: 1000 !important;
    padding-top: 1px;
    padding-bottom: 1px;
}

#loading {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.2) url(../Images/loading.gif) no-repeat center center;
    z-index: 10000;
    /*background: url("../Images/loading.GIF") no-repeat scroll center center #ffffff;
    z-index: 10;
    filter: alpha(opacity=75);
    -moz-opacity: 0.75;
    opacity: 0.75;*/
}

/* MMS標準テーブルスタイル */
.table.mms-basic th {
    background-color: #b8ebf4;
}

.table.mms-basic .highlight {
    background-color: #fffacd;
}

.table.mms-basic .highlight1 {
    background-color: #F5A9F2;
}

.table.mms-basic th {
    text-align: center;
}

/* MMS標準グループボックス */
.group-box {
    padding: 15px 30px;
    border: solid 3px #55bcca;
    margin-bottom: 15px;
}

.group-box-caption {
    margin-bottom: 0px;
    font-weight: bold;
    color: #ffffff;
    display: inline-block;
    background-color: #55bcca;
    padding: 2px 5px 0px 5px;
    border-top-right-radius: 0.25rem;
    border-top-left-radius: 0.25rem;
}

/* -- CSSによるタブ選択によるコンテンツ表示切替機能 -- */
/* 
使用方法
    下記のようにHTMLを構築する

    "ボタンのid"と、"コンテンツのtab-selectの名前"は、予めここに作成してあるものを使用する場合の設定方法
    2つ以上のタブ領域を作成したい場合や細かい操作を行いたい場合は、
    "選択されたタブに対応するコンテンツを表示する"設定にあるようにradioボタンのidに対応するコンテンツを表示状態にするCSSを記載するだけで動作する
    
<div class="mms-tab">
    <!-- タブボタン -->
    <input id="tab-btn1" name="tab" type="radio" checked />
    <label for="tab-btn1" class="btn">タブ１</label>
    <input id="tab-btn2" name="tab" type="radio" />
    <label for="tab-btn2" class="btn">タブ２</label>

    <!-- タブの内容 -->
    <div class="tab-contents">
        <div tab-select="tab-btn1">
         タブ１の内容
        </div>
        <div tab-select="tab-btn2">
         タブ２の内容
        </div>
    </div>
</div>
*/
/* タブ表示エリアのラジオボタンを非表示にする */
.mms-tab > input[type=radio] {
    display: none;
}

    /* 選択されたラジオボタンの直後のラベル（ボタン）にフォーカススタイルを充てる */
    .mms-tab > input[type=radio]:checked + label {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

/* コンテンツの内容を非表示 */
.mms-tab .tab-contents > * {
    display: none;
}

/* 選択されたタブに対応するコンテンツを表示する */
/* 標準で使用できるものを予約 */
#tab-btn1:checked ~ .tab-contents > [tab-select=tab-btn1],
#tab-btn2:checked ~ .tab-contents > [tab-select=tab-btn2],
#tab-btn3:checked ~ .tab-contents > [tab-select=tab-btn3],
#tab-btn4:checked ~ .tab-contents > [tab-select=tab-btn4],
#tab-btn5:checked ~ .tab-contents > [tab-select=tab-btn5] {
    display: block;
}

/* -- END CSSによるタブ選択によるコンテンツ表示切替機能 --- */

[v-cloak] {
    display: none;
}

.form-control.input-validation-error {
    border: solid #ff4a63 1px;
}

/* --- テーブルTopリンク機能に関する表示 --- */
/*
幅などを指定する必要があるので、グリッドを利用する
<table data-toplink="true">
    <thead>
        <tr class="row">
            <th class="col-md-5">a1</th>
            <th class="col-md-6">a2</th>
        </tr>
    </thead>
    <tbody>
        <tr class="row">
            <td class="col-md-5">a1</td>
            <td class="col-md-6">a2</td>
        </tr>
    </tbody>
*/
.fixed-header[data-toplink=true] {
    z-index: 1000;
}

/*[data-toplink=true] th, [data-toplink=true] td {
    empty-cells: show;
    white-space: normal;
}*/

[data-toplink=true] thead {
    position: sticky;
    position: -webkit-sticky;
    top: 20px;
    z-index: 1000;
}

[data-toplink=true] .row {
    margin-right: 0px;
    margin-left: 0px;
}

/* --- END テーブルTopリンク機能に関する表示 --- */

/* --- IE col-md 対応 --- */
@media all and (-ms-high-contrast: none) {
    tr.row {
        display: table-row;
    }

    .col-md {
        width: 100%;
    }

    .col-md-auto {
        width: 100%;
    }

    .col-md-1 {
        width: 8.333333%;
    }

    .col-md-2 {
        width: 16.666667%;
    }

    .col-md-3 {
        width: 25%;
    }

    .col-md-4 {
        width: 33.333333%;
    }

    .col-md-5 {
        width: 41.666667%;
    }

    .col-md-6 {
        width: 50%;
    }

    .col-md-7 {
        width: 58.333333%;
    }

    .col-md-8 {
        width: 66.666667%;
    }

    .col-md-9 {
        width: 75%;
    }

    .col-md-10 {
        width: 83.333333%;
    }

    .col-md-11 {
        width: 91.666667%;
    }

    .col-md-12 {
        width: 100%;
    }
}
/* --- END IE col-md 対応 --- */

/* --- typeaheadの表示設定 --- */
.twitter-typeahead {
    width: 100%;
}

.tt-menu {
    width: 500px;
    margin: 12px 0;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    text-align: left;
    max-height: 300px;
    overflow-y: auto;
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
}

    .tt-suggestion:hover {
        cursor: pointer;
        color: #fff;
        background-color: #0097cf;
    }
/* --- END typeaheadの表示設定 --- */

.dynamic-sticky {
    position: fixed;
    z-index: 1000;
}

.cursor-pointer {
    cursor: pointer;
}

.five-string {
    min-width: 120px;
}

.operation-area > * {
    display: inline-block;
    margin: 10px 30px 15px 30px;
}

/*-------------------------------------------------*/
/* v-cloak属性が指定された要素に対して、           */
/* CSSで「display: none」を設定します。            */
/*-------------------------------------------------*/
[v-cloak] {
    display: none;
}

/*-------------------------------------------------*/
/* disabled and Readonly cursor  not-allowed       */
/*-------------------------------------------------*/
.custom-control-input:disabled ~ .custom-control-label {
    /*cursor: not-allowed !important;*/
}

.form-control:disabled,
.btn:disabled,
.form-control[readonly] {
    /*cursor: not-allowed !important;*/
}

.custom-radio .custom-control-label,
.custom-checkbox .custom-control-label {
    cursor: pointer !important;
}

input:-moz-read-only, select:-moz-read-only, textarea:-moz-read-only,
input:read-only, textarea:read-only {
    /*cursor: not-allowed !important;*/
}

/*-------------------------------------------------*/
/* (Excel)ボタン    */
/*-------------------------------------------------*/
.btn-excel {
    background-image: url("../Images/xlsx.png");
    background-size: 20px 25px;
    background-repeat: no-repeat;
    background-position: 8px 6px;
    padding-left: 35px;
    padding-top: 6px;
}

/*-------------------------------------------------*/
/* (PDF)ボタン    */
/*-------------------------------------------------*/
.btn-pdf {
    background-image: url("../Images/pdf.png");
    background-size: 20px 25px;
    background-repeat: no-repeat;
    background-position: 8px 6px;
    padding-left: 35px;
    padding-top: 6px;
}

/*-------------------------------------------------*/
/* (WORD)ボタン                                    */
/*-------------------------------------------------*/
.btn-docx {
    background-image: url("../Images/docx.png");
    background-size: 20px 25px;
    background-repeat: no-repeat;
    background-position: 8px 6px;
    padding-left: 35px;
    padding-top: 6px;
}

/*-------------------------------------------------*/
/* グレーボタン                                    */
/*-------------------------------------------------*/
.btn-gray {
    color: #212529;
    background-color: #cbced1;
    border-color: #cbced1;
}

    .btn-gray:hover {
        color: #212529;
        background-color: #b7bbbf;
        border-color: #b0b5b9;
    }

    .btn-gray:focus, .btn-gray.focus {
        box-shadow: 0 0 0 .2rem rgba(178, 181, 184, 0.5);
    }

    .btn-gray.disabled, .btn-gray:disabled {
        color: #212529;
        background-color: #cbced1;
        border-color: #cbced1;
    }

    .btn-gray:not(:disabled):not(.disabled):active, .btn-gray:not(:disabled):not(.disabled).active, .show > .btn-gray.dropdown-toggle {
        color: #212529;
        background-color: #b0b5b9;
        border-color: #a9aeb3;
    }

        .btn-gray:not(:disabled):not(.disabled):active:focus, .btn-gray:not(:disabled):not(.disabled).active:focus, .show > .btn-gray.dropdown-toggle:focus {
            box-shadow: 0 0 0 .2rem rgba(178, 181, 184, 0.5);
        }

/*-------------------------------------------------*/
 背景色
/*-------------------------------------------------*/
.bg-gray {
    background-color: #d6d8db;
}

.bg-yellow {
    background-color: #fff9c4;
}

.bg-orange {
    background-color: #ffd4aa;
}

.bg-blue {
    background-color: #bee5eb;
}

.input-bg-blue {
    background-color: #b6edff !important;
}

.bg-red {
    background-color: #f5c6cb;
}

.bg-lightblue {
    background-color: rgba(0, 123, 255, 0.25);
}


.input-bg-red {
    background-color: #fca9a9 !important;
}

.bg-green {
    background-color: #d1f5d1;
}

.input-bg-green {
    background-color: #b3f0b3 !important;
}

.input-bg-white {
    background-color: #fff !important;
}

/*-------------------------------------------------*/
/* Compoment vue-datetimepicker.js*/
/*-------------------------------------------------*/
.datepicker-dropdown {
    padding: 10px !important;
}

.datepicker-days td, .datepicker-days th {
    width: 30px !important;
    height: 30px !important;
}

.datepicker.datepicker-dropdown {
    font-size: .9rem;
    z-index: 1060 !important;
}

/*-------------------------------------------------*/
/* Compoment vue-calendar.js */
/*-------------------------------------------------*/
.bg-block {
    background-color: #f7f7f9 !important;
}

.active-date {
    background-color: #d7edf5;
    text-decoration: underline;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

/*-------------------------------------------------*/
/* Vcon */
/*-------------------------------------------------*/
.fixed-bottom {
    background-color: rgba(0, 0, 0, 0.4);
}

.ui-autocomplete {
    position: absolute;
    cursor: default;
    z-index: 99999 !important;
}

/*-------------------------------------------------*/
/* 日付コントロールグループ幅定義 */
/*-------------------------------------------------*/
.dateGroup {
    width: 9rem;
}

/*-------------------------------------------------*/
/* 要素非表示    */
/*-------------------------------------------------*/
d-none{
    display:none;
}