/* ************************************************* */
/* 共通部品 */
/* ************************************************* */
@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-Regular.ttf');
}

.pnlFunction {
    padding: 20px;
    white-space: nowrap;
}
/* 機能ボタン */
.cmnButton {
    width: 120px;
    margin-right: 5px;
    color: darkslategray;
}
.cmnButton:hover {
    cursor: pointer;
}
/* WKP010 */
.cmnButton--partsPhoto {
    width: 100px;
}
.cmnButton--bpcUpdate {
    width: 70px;
}
/* WKR010 */
.cmnButton--repairRequestSheet {
    width: 180px;
}
/* WKR020 */
.cmnButton--issueInvoice {
    width: 200px;
}
/* WKR030 */
.cmnButton--repairDownload {
    width: 160px;
}

.cmnInputNum {
    text-align: right;
}
.cmnTxtAlignCenter {
    text-align: center;
}
.cmnRadioText {
    display: inline-block;
    padding-left: 4px;
    padding-top: 1px;
    vertical-align: top;
}
.cmnReadOnlyText {
    width: 100%;
    background-color: transparent;
    border: none;
    outline: none;
    user-select: none;
}
.cmnHiddenStyle {
    display: none;
}
.cmnTriangleSymbol {
    width: 8.5px;
}

/* 検索画面用 */
.cmnTxtAlignSearch {
    text-align: right;
}
/* 幅575px以下のとき */
@media (max-width: 575px) {
    .cmnTxtAlignSearch {
        text-align: left;
    }
}


/* ************************************************* */
/** ローディング (line circle) */
/* ************************************************* */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.loading_linecircle {
    box-sizing: border-box;
    width: 60px;
    height: 60px;
    margin: auto;
    border: 10px solid hsl(0, 100%, 100%);
    border-right-color: transparent;
    border-radius: 100%;
    animation: rotate 1s infinite linear;
}
/* ローディング画面背景の透過 */
.opacityWaitDisplay {
    opacity: 0.5;
}
/** 全画面用 (エンドレス用) */
.loadingfullpage {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #808080;
    z-index: 100;
}
.loadingfullpage > * {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
/* 画面フェードイン keyframe */
@keyframes fadeIn {
    0.1% { opacity: 0;}
	100% { opacity: 1;}
}


body {
    animation: fadeIn 0.4s forwards;
    padding-bottom: 0px;
    font-family: 'Roboto', 'Meiryo UI', Segoe UI;
    font-size: 12px;
}
/* 幅980px以下のとき */
@media (max-width:980px) {
    body {
        animation: fadeIn 0.4s forwards;
        padding-bottom: 140px;
        font-family: 'Roboto', 'Meiryo UI', Segoe UI;
        font-size: 12px;
    }
}


/* キャレット制御 */
div, input {
    caret-color: transparent;
}
input:not([type="radio"]):not(.cmnReadOnlyText), textarea {
    caret-color: initial;
}

/* ヘッダー固定 */
.fixedHeader {
    position: fixed;
    top: 0;
    height: 100px;
    width: 100vw;
}
/* 幅980px以下のとき */
@media (max-width:980px) {
    .fixedHeader--smart {
        width: 98vw;
    }
}
/* フッター固定 */
.fixedFooter {
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 100;
}

/* ヘッダーメニュー */
.gs18-HeaderNav__Item a:hover {
    color: #fff;
    background-color: #333;
    cursor: pointer;
}
.gs18-HeaderNav__Text.headerNav_select {
    background-color: #333;
    color: #fff;
}
/* ドロップダウンメニュー */
.headerNav_triangle {
    padding-right: 5px;
    color: red;
    font-size: 12px;
}
.headerNav__dropdown ul {
    padding: 0;
}
.headerNav__dropdown li {
    list-style: none;
    padding: 5px 20px 5px 10px;
}
.headerNav__dropdown a {
    padding-left: 16px;
    text-decoration: none;
    color: #ffffff;
}

/* 幅981px以上のとき */
@media (min-width: 981px) {
    .headerNav__dropdown {
        min-width: 140px;
        margin: 0 calc(50% - 50vw);
        margin-left: 0;
        background-color: #333333;
        opacity: 0;
        position: absolute;
        transform: scaleY(0);
        transform-origin: center top;
        transition: all 0.2s ease;
        visibility: hidden;
        font-size: 15px;
    }
    .headerNav__dropdown li:hover, .headerNav__dropdown li:hover a {
        background-color: red;
        color: #fff;
    }
    /* ドロップダウンメニュー展開 */
    .gs18-HeaderNav__Item:hover .headerNav__dropdown {
        transform: scaleY(1);
        opacity: 1;
        visibility: visible;
    }
}
/* 幅980px以下のとき */
@media (max-width: 980px) {
    .headerNav__dropdown {
        display: none;
    }
    .gs18-HeaderNav__Item .headerNav__dropdown a {
        padding-left: 20px;
        color: #000000;
        font-size: 20px;
    }
    .headerNav__dropdown li:hover, .headerNav__dropdown li:hover a {
        background-color: #333333;
        color: #ffffff;
    }
}

/* システム名 */
.ttlSysName {
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #005a86;
    background-image: linear-gradient(180deg, rgba(85, 85, 85, 1) 15%, rgba(0, 0, 0, 1));
    color: whitesmoke;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

/* 機能名 */
.screenTitle {
    margin-bottom: 6px;
    padding: 2px 8px 6px 8px;
    border-left: 8px solid #f00;
    font-family: 'Roboto', 'Meiryo UI', Segoe UI;
    font-size: 20px;
    white-space: nowrap;
}
/* 小見出し */
.h2Header {
    margin-bottom: 6px;
    padding: 2px 8px 6px 8px;
    border-left: 4px solid #c0c0c0;
    font-family: 'Roboto', 'Meiryo UI', Segoe UI;
    font-size: 16px;
    white-space: nowrap;
}
/* 機能名・見出し用アンダーライン */
.hdline {
    border-bottom: 1px solid silver;
}

.pnlContents {
    margin: 0 auto;
    padding: 125px 20px 20px 20px;
}
/* 幅980px以下のとき */
@media (max-width:980px) {
    .pnlContents {
        padding: 20px;
        padding-top: 115px;
    }
}

/* ************************************************* */
/* パンくずリスト */
/* ************************************************* */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0 0 5px 0;
}
.breadcrumbs li:not(:last-of-type)::after {
    content: ">";
    margin: 0 .6em; /* 記号の左右の余白 */
    color: #777; /* 記号の色 */
}
.breadcrumbs a {
    color: #000;
    text-decoration: none;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}
.breadcrumbs a:visited {
    color: #000;
}

/* ************************************************* */
/* layout table	 */
/* ************************************************* */
.pnlTable {
    padding: 10px;
    padding-bottom: 20px;
}
.pnlTable * {
    font-family: 'Roboto', 'Meiryo UI', Segoe UI;
}
.pnlTable--border {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid lightgrey;
    border-radius: 8px;
}
.pnlTable_layout {
    display: flex;
}
.pnlTable_line {
    display: table;
}
.pnlTable_cell {
    display: table-cell;
    padding: 3px;
    padding-right: 10px;
    vertical-align: middle;
}
.pnlTable_cell--header {
    width: 160px;
    font-weight: bold;
    white-space: nowrap;
}
.pnlTable_panel {
    padding-right: 60px;
    float: left;
}
.pnlTable_cell--blank {
    width: 160px;
}
.pnlTable_cell--input {
    width: 340px;
}
.pnlTable_cell--selectCondition {
    float: left;
    padding-right: 16px;
    white-space: nowrap;
}
.pnlTable_cell--inputDate {
    display: inline-block;
    padding-right: 6px;
    padding-left: 8px;
    white-space: nowrap;
}
.pnlTable_cell--optLabel {
    display: inline-block;
    width: 40px;
}

.pnlTable_cell--roSearchOption {
    padding: 5px;
    padding-left: 0;
}


/* 入力項目フォーカス時の背景色 */
.pnlTable input:focus:not(.cmnReadOnlyText, .cmnButton),
.pnlTable select:focus,
.pnlTable textarea:focus:not(.cmnReadOnlyText),
.pnlTable_cell--inputDate input:focus,
.pnlFunction input:focus:not(.cmnReadOnlyText, .cmnButton) {
    background-color: #ffff80;
}

/* 幅575px以下のとき */
@media (max-width:575px) {
    .pnlTable_layout {
        display: block;
    }
    .pnlTable_panel {
        width: 85%;
    }
    .pnlTable_line {
        display: table;
        margin-bottom: 20px;
    }
    .pnlTable_cell {
        display: block;
        padding-bottom: 0;
    }
    .pnlTable_cell--header {
        width: 90%;
    }
    .pnlTable_cell--headerNoText {
        display: none;
        border-bottom: none;
    }
    .pnlTable_cell--blank {
        display: none;
    }
    .pnlTable_cell--optLabel {
        display: block;
    }
}

/* ************************************************* */
/* Extraction List */
/* ************************************************* */
.pnlExtractionList {
    height: 550px;
    margin-top: 14px;
    caret-color: transparent;
}
.gridExtractionList {
    background-color: #ffffff;
    border: none;
    border-left: 1px solid #808080;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
.gridExtractionList th {
    padding: 4px;
    border-top: 1px solid #808080;
    font-weight: normal;
}
.gridExtractionList a {
    color: #ffffff;
    text-decoration: none;
}
.gridExtractionList_headerRow {
    position: sticky;
    top: 0;
    border: 1px solid #2f4f4f;
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
    background-color: #2f4f4f;
    color: #ffffff;
    white-space: nowrap;
    z-index: 1;
}

.gridExtractionList_headerRow--firstRow {
    height: 10px;
    border-bottom: 1px solid #2f4f4f;
}

.gridExtractionList_headerRow--2ndRow {
    position: sticky;
    top: 24px;
    width: 120px;
    border: 1px solid #2f4f4f;
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
    background: #2f4f4f;
    color: #ffffff;
    white-space: nowrap;
}
.gridExtractionList_alternatingRow {
    background-color: #FAFAFA;
}
/* カーソル行の背景色変更 */
.gridExtractionList tr:hover :not(th, a, img, #SubstituteGrid *, #UploadPartsDetailGrid *) {
    background-color: #ffff80;
    cursor: pointer;
}
.gridExtractionList_item {
    padding: 4px;
    padding-right: 10px;
    border: none;
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
    vertical-align: top;
    white-space: nowrap;
}
.gridExtractionList_item input {
    height: 14px;
}
.gridExtractionList_headerTriangle {
    width: 8.5px;
    margin-left: 6px;
}

/* ページャー */
.pagerStyle {
    background-color: #f5f5f5;
    font-weight: bold;
    font-size: 20px;
}
.pagerStyle span {
    padding: 2px 4px;
    font-size: 20px;
}
.pagerStyle a {
    padding: 2px 4px;
    font-size: 14px;
}
.pagerStyle a:link {
    color: #888888;
}
.pagerStyle a:hover {
    background-color: #99CCFF;
}

/* ************************************************* */
/* ポップアップウィンドウ */
/* ************************************************* */
.cmnModalStyleback {
    padding:10px;
    background-color: #808080;
    filter: alpha(opacity=50);
    opacity: 0.5;
}
.cmnPopupAlert {
    width: 460px;
    border: 1px solid #333333;
    border-radius: 8px;
    background-color: #fffafa;
    user-select: none;
}
.cmnPopupAlert_header {
    padding: 6px;
    border-radius: 5px 5px 0 0;
    background-color: #333333;
    color: #ffffff;
    vertical-align: middle;
}
.cmnPopupAlert_message {
    display: inline-block;
    line-height: 25px;
    padding: 10px;
    padding-left: 15px;
}
.cmnPopupAlert_function {
    padding: 10px;
    text-align: right;
}