/* =============================================
    ボタン
    ※スタイルbtnと一緒に使う
    　（class="btn btnM_gold"）
============================================= */

/*
    通常ボタンM（ゴールド）
    「Save temporaｒily」ボタン
*/
.btnM_gold {
    height: 38px;
    background-color: #FF3333;
    color: #FFFFFF;
    border-color: #FF3333;
    font-size: 16px;
    padding: 0px;
}

    .btnM_gold:hover {
        background-color: #FFBBBB;
        color: #FFFFFF;
    }

/*
    通常ボタンM（ブルー）
    「Search」、「OK」、「Yes」、「Update total order qtys」、
　　「User data upload」、「Export Catalog」、「Item selection completed」ボタン
*/
.btnM_blue {
    height: 38px;
    background-color: #005D8C;
    color: #FFFFFF;
    border-color: #005D8C;
    font-size: 16px;
    padding: 0px;
}

    .btnM_blue:hover {
        background-color: #5698BE;
        color: #FFFFFF;
    }

/*
    通常ボタンSS（ブルー）
    「Action」ボタン
*/
.btnSS_blue {
    height: 22px;
    background-color: #005D8C;
    color: #FFFFFF;
    border-color: #005D8C;
    font-size: 12px;
    padding: 0px;
    position: absolute;
    top: 1px;
    left: 0px;
    width:100%;
}

    .btnSS_blue:hover {
        background-color: #5698BE;
        color: #FFFFFF;
    }

/*
    通常ボタンM（グレー）
    「No」、「Delete」、「All Clear」ボタン
*/
.btnM_gray {
    height: 38px;
    background-color: #5D5D5D;
    color: #FFFFFF;
    border-color: #5D5D5D;
    font-size: 16px;
    padding: 0px;
}

    .btnM_gray:hover {
        background-color: #AAAAAA;
        color: #FFFFFF;
    }

/*
    通常ボタンSS（グレー）
    「×clear」、「Action」ボタン
*/
.btnSS_gray {
    height: 27px;
    background-color: #5D5D5D;
    color: #FFFFFF;
    border-color: #5D5D5D;
    font-size: 14px;
    padding: 0px;
}

    .btnSS_gray:hover {
        background-color: #AAAAAA;
        color: #FFFFFF;
    }

/*
    通常ボタンM（テラコッタ）
    「Add」「All」ボタン
*/
.btnM_terracotta {
    height: 38px;
    background-color: #C65911;
    color: #FFFFFF;
    border-color: #C65911;
    font-size: 16px;
    padding: 0px;
}

    .btnM_terracotta:hover {
        background-color: #D4976F;
        color: #FFFFFF;
    }

/*
    通常ボタンM（ライトブルー）
    「Sign in」ボタン
*/
.btnM_lightbulue {
    height: 38px;
    background-color: #86B6D0;
    color: #FFFFFF;
    border-color: #86B6D0;
    font-size: 20px;
    padding: 0px;
}

    .btnM_lightbulue:hover {
        background-color: #ACC9D9;
        color: #FFFFFF;
    }


/* =============================================
    ヘッダーメニュー
============================================= */

.menu_head {
    height: 63px;
    background-color: #00819B;
    color: #FFFFFF;
}

/* =============================================
    ラベル（検索ラベル）
============================================= */

.lbl_serch_str {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #EAF3F6;
    color: #000000;
    font-size: 12px;
    font-weight: normal;
    padding-left: 10px;
}

/* =============================================
    一覧ヘッダー
    ※CompornentOneのFlexGridに反映される（スタイル適用の必要なし）
============================================= */

.wj-cell {
    text-align: center;
}

.wj-cell.wj-header {
    height: 100px;
    background-color: #00819B;
    color: #FFFFFF;
}

/* =============================================
    検索Accordion
    ※CompornentOneのAccordionに反映される（スタイル適用の必要なし）
============================================= */

.wj-accordion > .wj-header {
    background-color: #00819B;
    color: #FFFFFF;
}

    .wj-accordion > .wj-header.wj-state-active {
        background-color: #00819B;
        color: #FFFFFF;
    }

body {
    font-family: "Noto Sans";
}

#overlay {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0,0,0,0.6);
}

.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}

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

.is-hide {
    display: none;
}

.btn {
    box-shadow: 2px 2px 4px gray;
    color: #FFFFFF;
}
    .btn:focus {
        color: #FFFFFF;
        outline: none;
    }