/* TODO !DOCTYPE html対応 */
@page {
    size: auto!important;
}

/* ポップアップ内のフォントサイズをリセットし、親に合わせる */

.w2ui-popup .w2ui-popup-body {
    font-size: inherit !important;
}


/* w2uiのレイアウトでheight:100%指定で正しく表示されるのに必要(指定しないと高さが0になる) */

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
}


/* !DOCTYPE html対応 */

html {
    touch-action: manipulation;
    /* 画面全体のスクローリングを無効化する。レイアウトのメニューやメインはスクロール可能なまま。 */
    overflow: hidden;
}

body {
    background: #eeeeee;
}


/* 丸ボタンCSS　===> */


/* <a href="#" class="btn-circle-fishy">BUTTON</a> */

.btn-circle-fishy {
    display: inline-block;
    text-decoration: none;
    color: #FFF;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    background-image: linear-gradient(45deg, #709dff 0%, #91fdb7 100%);
    transition: .4s;
}

.btn-circle-fishy:hover {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}

.control {
    display: inline-block;
}


/* 丸ボタンCSS　<=== */


/* TODO 持参薬一覧用に作った新しいタイプの画面 セレクタ変更要 */


.layout-body {
    display: flex;
    position: absolute;
    flex-direction: column;
    padding: 1vh 1vw;
    width: 100%;
    height: 99%;
}

.layout-body>.grid-wrapper {
    height: 100%;
    min-height: 300px;
}

.layout-body #control label {
    text-align: left;
}

/* #body2と同内容をclassで指定 */

/* .body {
    display: flex;
    position: absolute;
    flex-direction: column;
    padding: 1vh 1vw;
    width: 100%;
    height: 99%;
}

.body>p:last-of-type {
    flex: 1;
    min-height: 0;
}

.body>.grid-wrapper {
    height: 100%;
    min-height: 300px;
}

.body>.grid-wrapper>div {
    height: 100%;
}

.body #control label {
    text-align: right;
}
 */

/* コンポーネント */

.component {
    display: flex;
    flex-direction: column;
}

.component>.grid-wrapper {
    height: 100%;
}


/* グリッド ラッパーは親要素の残サイズいっぱいに広げ、グリッドはその中で最大まで広げる。 */

.grid-wrapper>div {
    width: 100%;
    height: 100%;
}


/* bootstrapの設定上書き */

.form-group {
    margin-bottom: 0.1rem !important;
}

.form-group>label {
    margin-bottom: 0.2rem !important;
    border: 1px solid #28a745 !important;
    background-color: #90ee90 !important;
}

.form-group>span {
    margin-bottom: 0.2rem !important;
    border-bottom: 1px solid #28a745 !important;
    word-break: break-all;
}

.btn_margin {
    margin: 10px 0 10px 5px !important;
}

.usage_guide {
    border: 1px solid;
    margin: 5px;
    padding: 2px;
    font-size: 80%;
}

.date_box {
    display:flex;
}
.date_box>span{
    margin: 0px 5px 0px 5px
}


/* bootstrapの.rowと併用してgridの間隔を変更する cf. .no-gutters */

.gutters-2 {
    margin-right: 2px;
    margin-left: 2px;
}

.gutters-2>.col,
.gutters-2>[class*="col-"] {
    padding-right: 2px;
    padding-left: 2px;
}

.gutters-4 {
    margin-right: 4px;
    margin-left: 4px;
}

.gutters-4>.col,
.gutters-4>[class*="col-"] {
    padding-right: 4px;
    padding-left: 4px;
}

.gutters-8 {
    margin-right: 8px;
    margin-left: 8px;
}

.gutters-8>.col,
.gutters-8>[class*="col-"] {
    padding-right: 8px;
    padding-left: 8px;
}


/* チェックボックス(ラジオボタン) チェックボックス自体は隠す+後ろのラベルに装飾。disabledでラベルも非表示。 */

.check_box {
    display: none;
}

.check_box:checked+.label {
    background-color: orange;
}

.check_box:disabled+.label {
    display: none;
}

.label {
    cursor: pointer;
    padding: 5px;
    margin-right: 2px;
    margin-left: 2px;
    border: 1px solid #434343;
    border-radius: 5px;
    font-size: 90%;
}


/* .check_boxクラスの代替 .checkbox-wrapperクラスのラベルでinput(radio|chekbox)とspanをラップする */

.checkbox-wrapper>input[type="radio"],
.checkbox-wrapper>input[type="checkbox"] {
    display: none;
}

.checkbox-wrapper>input[type="radio"]:checked+span,
.checkbox-wrapper>input[type="checkbox"]:checked+span {
    background-color: orange;
}

.checkbox-wrapper>input[type="radio"]:disabled+span,
.checkbox-wrapper>input[type="checkbox"]:disabled+span {
    display: none;
}

.checkbox-wrapper {
    padding-top: 3px;
    padding-bottom: 3px;
    margin-top: 2px;
    margin-bottom: 2px;
    display: inline-block !important;
}

.checkbox-wrapper>span {
    cursor: pointer;
    padding: 5px;
    margin-right: 2px;
    margin-left: 2px;
    border: 1px solid #434343;
    border-radius: 5px;
    font-size: 0.875rem;
}


/* w2uiのスタイルを上書き */

.w2ui-tabs {
    background-color: inherit !important;
}


.w2ui-grid-select-check {
    height: 15px;
}

/* bootstrapのボタンにマージン設定 デフォルトでは折返しで上下、html上の改行なしで左右のボタンがくっついてしまうため */

.btn {
    margin: 1px;
}

.menu_html_area {
    background-color: #eee;
    padding: 10px 5px;
    border-bottom: 1px solid silve;
    text-align: center;
}

.menu_html_area>input {
    font-size: 120%;
    height: 25px;
    width: 150px;
}

.w2ui-sidebar .w2ui-sidebar-div .w2ui-node-caption {
    font-size: 14px;
    padding: 2px 0 2px 3px;
}

/* 画面全体を覆うローディング */
#overlay {
    position: fixed;
    top: 0;
    /* w2uiのレイアウトがz-index 100台なので、それより大きく*/
    z-index: 999;
    width: 100%;
    height:100%;
    display: none;
    background: rgba(0,0,0,0.6);
}
#overlay .cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#overlay .spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}

#overlay .message {
    color: white; 
    position: fixed;
    top: 350px;
    font-size: xx-large;
}

@keyframes sp-anime {
    100% {
      transform: rotate(360deg);
    }
}

.lock_display_box {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    line-height: 1.5em;
}
#lock_display {
    position: fixed;
    top: 0;
    /* w2uiのレイアウトがz-index 100台なので、それより大きく*/
    z-index: 9999;
    width: 100%;
    height:100%;
    display: none;
    background: rgba(0,0,0,1);
}

.icon-excel {
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAN1JREFUOE+lU0EOwkAIhD7BkwcTP2Li9tx9jXdj/dNytr4MO00xRGm7xp7owkyGAZhWvpxzsnQpZYhKeS5Kqnp2BW+gvYkIhwRd1+maCpeLFCSuJYgUAFtNoKoXZj4R0ZGIDiKy/yJg5nb04sHM91JK79WBoGmanTP1GhIQUQI459yr6s0AILUYhotIG7UwIPEJBhDqQI54kcCkY7RoxU+nSgGcBhhLE7SwqWAYZT7RtzMRKibZcwsIp38zuXqMIHXbmqD2pz34e5FG6fEqwyw/3zmuP6atQ7KTXjrnF3DVqZFI18WNAAAAAElFTkSuQmCC) no-repeat center!important
}