﻿html, body {
    /* スクロールバーの二重表示回避 */
    /*height: calc(100% - 0.5px) !important;*/
    /*height: 100%;*/
}

body {
    font-family: "メイリオ", Meiryo, Sans-Serif;
    padding-top: 0;
    padding-bottom: 0;
/*
    スマートフォン対応のためコメントアウト
    overflow-y: hidden;
*/
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
/*
    padding-top: 40px;
    padding-bottom: 40px;
*/
    background-color: #f5f5f5;
    width: 100%;
}

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;
}

.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px 10px 14px;
}

.nav-pills > li > a {
    border-radius: inherit;
}



/* Set width on the form input elements since they're 100% wide by default */
/*input,
select,
textarea {
    max-width: 280px;
}*/

/* search list panel */
.panel-list {
    box-shadow:inherit;
}
.panel-list > .panel-heading {
    padding: 0px 2px 0px 0px;
    text-align: right;
}
.panel-list > table {
    border: 1px solid #dddddd;
}
.panel-list > table thead {
    background-color: #1177ba;
    color: #ffffff;
}
.panel-list > .panel-footer {
    padding-left:0px;
    background-color: inherit;
}
.panel-list > .panel-heading + .panel-collapse > .panel-body {
}
.panel-list > .panel-heading .badge {
}
.panel-list > .panel-footer + .panel-collapse > .panel-body {
}


/* 一覧のヘッダ固定 */
div.scroller {
    overflow: auto;
    overflow-x: scroll;
    /*border:1px solid #dddddd;*/
    margin-top: 5px;
}

table.table-scroller{
    margin-bottom: 0 !important;
}

table.table-scroller thead td {
    background-color: #1177ba;
    color: #ffffff !important;
}

table.table-scroller > thead > tr > td > a {
    color: #ffffff;
    text-decoration: none;
}

table.table-scroller > thead > tr > td > a.asc:after {
    font-family: 'FontAwesome';
    content: "\f0de";
    float: right;
}

table.table-scroller > thead > tr > td > a.desc:after {
    font-family: 'FontAwesome';
    content: "\f0dd";
    float: right;
}

.panel > .tab-content > .tab-pane > .table {
margin-bottom: 0px;
}

/* Input form's required label */
.input-require {
}

.input-require {
    color: #FF0000;
}

    .input-require::before {
        content: "*";
    }

/* オートコンプリートの高さ固定 */
.ui-menu{
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}  
.ui-menu-item{
    white-space: nowrap;
    /*font-family: "メイリオ", Meiryo, Sans-Serif;*/
}

/* Bootstrap styles overwrite */
/*site.cssと設定が重なり表示がおかしくなる為コメント化しました。*/
.container {
 /*スマートフォン対応のため、コメントアウト*/
/*
    margin-left: 0 !important;
    padding-left: 0;
    padding-right: 0;
    min-width: 1240px;
    width: 100% !important;
    height: 100% !important;
*/
}

label {
    font-weight: normal;
}

menu > .nav > li > a:hover,
menu > .nav > li > a:focus{
    background-color: #6f6f6f !important;
    color: #ffffff !important;
}

menu > .nav-pills > li.active > a,
menu > .nav-pills > li.active > a:hover,
menu > .nav-pills > li.active > a:focus {
    background-color: #6f6f6f !important;
    color: #ffffff !important;
}

menu > .nav-pills > li > a {
    border-radius: inherit ;
}


/* 入力欄とエラーメッセージのグループスタイル */
.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;
}

/* 一覧の省略表示 */
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';
        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;
}
