:root {
    --mainFontColor: #333;
    --reversalFontColor: #fff;
    --mainColor: #fff;
    --middleMainColor: #746f6f;
    --lightMainColor: #efefef;
    --attentionColor1: #f48e8e;
    --attentionColor2: #ffd7d7;
    --attentionColor3: #fff7d5;
    --alertSubColor: #cf0000;
    --alertColor: #e23a3a;
    --pointColor: #d01414;
    --partsWorning: #f1b6b2;
    --overColor: #fbf6f6;
    --oddColor: #e7e6e6;
    --lineColor: #e1d7d7;
    --markerColor: #d32f2f; /*要変更*/
    --buttonBGColor: #dce7e8;
    --buttonShadow: #746f6f;
    --buttonHighLight: #fff;
    --japaneseFont: sans-serif;
    --englishFont: Verdana;
    --defaultFontSize: 15px;
    --littleFontSize: 12px;
    --menuFontSize: 14px;
    --defaultFontWeight: 500;
    --titleFontSize: 25px;
    --subTitleFontSize: 20px;
    --mainContentMarginLeft: 10px;
    --sideNavWidth: 126px;
    --viewWidth: 1346px;
    --viewHeight: 768px;
    --contentWidth: calc(var(--viewWidth) - var(--sideNavWidth));
    --worningLevelColor: #cd7c00;
    --attentionLevelColor: #e5a50c;
    --leftPos: calc((100vw-1366px)/2+800px);
    --toolBoxColor: #f3e3e3;
    --toolBoxLineColor: #dcb5b5;
}

/*--------------------共通スタイル------------------------*/
body#login nav {
    display: none;
}

body {
    font-family: var(--japaneseFont,--englishFont);
    font-size: var(--defaultFontSize);
    font-weight: var(--defaultFontWeight);
    color: var(--mainFontColor);
    grid-template-rows: 50px 700px 18px;
    width: var(--viewWidth);
    min-width: var(--viewWidth);
    height: var(--viewHeight);
    margin: 0 auto;
}

    body.close div.contentBox {
        grid-template-columns: 10px auto;
    }

button, input, textarea, select, ol, ul, li, label {
    font-family: var(--japaneseFont,--englishFont);
    font-size: var(--littleFontSize);
    font-weight: var(--defaultFontWeight);
}

label[for="searchWord"] {
    white-space: nowrap; /*改行禁止*/
    margin: auto;
}

label[for="MainContent_searchWord"]{
    white-space: nowrap;/*改行禁止*/
    margin: auto;
}

label[for="searchWord"], 
label[for="MainContent_searchWord"],
label[for="MainContent_searchAlertWord"],
label[for="MainContent_searchPartsWord"]{
    white-space: nowrap; /*改行禁止*/
    margin: auto;
}

/*部分一致(*=)
末尾一致($=)
先頭一致(^=)*/
div[id*="UpdatePanel4"]{
    width: 100%;
    display: inline-flex;
}

    button:hover,
    input[type="submit"]:hover,
    a:hover {
        cursor: pointer;
    }

form {
    overflow-y: scroll;
    overflow-x: clip;
    margin-bottom: 2px;
}

    form::-webkit-scrollbar {
        display: none;
    }

.bold {
    font-weight: 700;
}

.grid {
    display: grid;
}

.hide {
    display: none;
}

.mainColor {
    color: var(--mainColor);
}

.attention {
    background-color: var(--attentionColor1);
}

.point {
    color: var(--pointColor);
}

.white {
    color: var(--reversalFontColor);
}

.subTitle {
    font-size: var(--subTitleFontSize);
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.inline {
    display: inline-block;
}

.block {
    display: block;
}

.margin-left {
    margin-left: var(--mainContentMarginLeft);
}

.center {
    text-align: center;
    place-items: center;
}

.putRight {
    text-align: end;
    place-items: end;
}

.end {
    text-align: end;
    padding-right: 5px;
}

.sort:hover {
    cursor: pointer;
}

.hoverP:hover {
    cursor: pointer;
}

.hoverD:hover {
    cursor: default;
}

.BGreversal {
    background-color: var(--reversalFontColor);
}

.col2 {
    grid-template-columns: 50% 50%;
}

.margin-top {
    margin-top: 20px;
}

.pushRight {
    margin-left: 30px;
}

.noData {
    top: 240px;
    left: 43%;
}

.fixedLayout {
    table-layout: fixed;
}
/*--------------------共通スタイルここまで------------------------*/

/*--------------------リストテーブルの幅調節用------------------------*/
.par_XS {
    width: 6%;
}

.par_S {
    width: 7.5%;
}

.par_M {
    width: 10%;
}

.par_ML {
    width: 12.5%;
}

.par_L {
    width: 15%;
}

.par_XL {
    width: 20%;
}

.size_XXS {
    width: 20px;
}

.size_XS {
    width: 55px;
}

.size_S {
    width: 80px;
}

.size_M {
    width: 100px;
}

.size_ML {
    width: 120px;
}

.size_L {
    width: 150px;
}

.size_XL {
    width: 200px;
}
/*--------------------リストテーブルの幅調節用ここまで------------------------*/

/*--------------------テーブルの調節------------------------*/
div.content2 .noData {
    top: 100px;
    left: 100px;
}

div.content3 .noData {
    top: 130px;
    left: 37%;
}

div.content3 section.Hauto .noData {
    top: 45px;
}

    div.content3 section.Hauto .noData.low-top {
        top: 60px;
    }

p.small {
    font-size: var(--littleFontSize);
}

.L_pc {
    color: var(--attentionColor2);
}

.marker {
    margin: 2px 4px;
    font-size: 16px;
}

table.H350 {
    max-height: 350px;
}

section {
    overflow-y: scroll;
    min-height: 435px;
    max-height: 435px;
}

    section#alertDetailTable {
        min-height: 90px;
        max-height: 300px;
    }

    section.H230 {
        min-height: 228px;
        max-height: 228px;
    }

    section.H290 {
        min-height: 290px;
        max-height: 290px;
    }

    section.H260,
    section.H260 table {
        min-height: 475px;
        max-height: 475px;
    }

    section.history,
    section.H450 {
        min-height: 464px;
        max-height: 464px;
    }

    section.H460 {
        min-height: 467px;
        max-height: 467px;
    }

    section.H525 {
        min-height: 500px;
        max-height: 500px;
    }


div.close section {
    min-height: 510px;
    max-height: 510px;
}

    div.close section.history {
        min-height: 529px;
        max-height: 529px;
    }

div.close .content2 section {
    min-height: 200px;
    max-height: 200px;
}

div.close .content3 section {
    min-height: 90px;
}

.content3 section {
    min-height: 90px;
    max-height: 468px;
}

div.Wmin,
table.Wmin {
    width: 310px;
    margin-top: 15px;
}

    div.Wmin.Right {
        width: 260px;
    }

    div.Wmin.Left {
        width: 375px;
    }

section.overX {
    overflow-x: scroll;
    max-width: 1213px;
}

.Wmin th {
    width: 40%;
}

.Wmin td {
    width: 60%;
}

select option:nth-child(even) {
    background-color: var(--oddColor);
}

th.fixed {
    position: sticky;
    top: 0;
}

    th.fixed:before {
        content: "";
        position: absolute;
        top: -1px;
        left: -1px;
        width: 100%;
        height: 100%;
        border: 1px solid #ccc;
    }

th.small,
td.small {
    width: 4%;
}

th.sort.ASC:after {
    content: "";
    position: relative;
    top: -15px;
    right: -5px;
    border-bottom: 5px solid var(--reversalFontColor);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid transparent;
}

th.sort.DESC:after {
    content: "";
    position: relative;
    top: 5px;
    right: -5px;
    border-top: 5px solid var(--reversalFontColor);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
}
/*-------------------- テーブルの調節ここまで ------------------------*/

nav {
    background-color: var(--pointColor);
    font-size: var(--menuFontSize);
}

footer {
    border-top: 3px solid var(--oddColor);
    place-items: center;
    padding-top: 2px;
}

header.header {
    grid-template-columns: 20% 35% 45%;
    border-bottom: 2px solid var(--oddColor);
}

#headLogo {
    position: relative;
    top: 14%;
    left: 1%;
}

p#lastLogin {
    line-height: 25px;
}

div.headUserName {
    place-items: center;
}

button#toMain {
    height: 50px;
    width: auto;
    border-radius: 5px;
    font-size: var(--defaultFontSize);
    background-color: transparent;
}

button#logout {
    border: 2px solid var(--pointColor);
    width: 100px;
    height: 30px;
    margin: 3px;
    border-radius: 5px;
    color: var(--mainFontColor);
    background-color: var(--attentionColor1);
}

    button#logout:hover {
        background-color: var(--reversalFontColor);
        border: 3px solid var(--pointColor);
        color: var(--pointColor);
        font-weight: 700;
    }

.headUserName {
    position: relative;
}

.headDate {
    place-items: center;
    padding-bottom: 2px;
}

div.contentBox {
    grid-template-columns: var(--sideNavWidth) var(--contentWidth);
}

div#sideMenuController {
    top: 1px;
    left: 0px;
    width: 20px;
    height: 20px;
    border: 1px solid var(--reversalFontColor);
}

    div#sideMenuController.close {
        left: 4px;
        border-color: var(--pointColor);
    }

div#icon {
    margin: 3px 7px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid var(--reversalFontColor);
    border-left: none;
}

.close div#icon {
    margin: 3px 5px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid var(--pointColor);
    border-right: none;
}

nav#sideMenu.close {
    width: 5px;
}

nav.close div.menu {
    display: none;
}

div.rightNavContent {
    grid-template-rows: 50px 650px;
    height: 100%;
    background-color: var(--mainColor);
    position: relative;
}

nav.menu {
    padding-top: 50px;
    width: var(--sideNavWidth);
}

div.grid-item {
    margin: 4px 3px;
    padding-left: 4px;
    padding-right: 4px;
    margin-bottom: 15px;
    height: 30px;
    line-height: 30px;
    background-color: #fdf8f8;
    border-radius: 2px;
}

    div.grid-item p:hover {
        cursor: pointer;
        background-color: var(--oddColor);
    }

div.divider {
    border-bottom: 3px solid #ccc;
    margin: 10px 10px;
}

div.open {
    height: auto;
    margin-bottom: 0;
}

    div.open > p.menuParent {
        color: var(--pointColor);
        border-bottom: 1px solid;
    }

div.inner-grid-container {
    place-items: start;
    padding-top: 5px;
    grid-template-rows: 32px 32px;
}

    div.inner-grid-container .inner_grid_item:hover {
        background-color: var(--oddColor);
        width: 100%;
    }

div.inner_grid_item {
    width: 100%;
}

p#headTooltip {
    background-color: var(--middleMainColor);
    color: var(--reversalFontColor);
    position: absolute;
    top: 20px;
    left: 80%;
    height: 30px;
    width: 100px;
    padding: 1px;
}

    p#headTooltip:after {
        content: "";
        border: 7px solid var(--reversalFontColor);
        border-right: 7px solid var(--middleMainColor);
        position: absolute;
        top: 25%;
        left: -13%;
    }
/*見出し*/
.title {
    margin: 20px 0;
    display: flex;
    align-items: center;
    font-size: var(--titleFontSize);
    font-weight: 500;
}

    .title::before {
        content: "";
        height: 5px;
        background: var(--attentionColor1);
        flex-grow: 1;
        margin-right: 20px;
    }

    .title::after {
        content: "";
        height: 5px;
        background: var(--attentionColor1);
        flex-grow: 1;
        margin-left: 20px;
    }

div#pagerBox {
    width: auto;
    height: 33px;
    line-height: 33px;
    text-align: center;
    grid-template-columns: 50px 400px 50px;
    margin-left: var(--mainContentMarginLeft);
}

.pagerInfo {
    font-size: 13px;
}

div#pagerBox p {
    width: 30px;
    height: 25px;
    line-height: 25px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 1px 1px 3px #aaa;
    font-size: 12px;
}

header#header p {
    line-height: 56px;
    font-size: var(--subTitleFontSize);
}

div#pagerBox div.attend {
    font-size: 12px;
    line-height: 25px;
    margin: auto;
    width: 50px;
    height: 25px;
    background-color: var(--reversalFontColor);
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 1px 1px 3px #aaa;
    box-sizing: border-box;
}

div.dateBox {
    display: grid;
    grid-template-columns: 60% 14% 13% 13%;
    width: 300px;
    height: 45px;
    place-items: center;
}

.dateChange {
    position: relative;
    top: -1px;
    background-color: var(--reversalFontColor);
    border-radius: 50%;
    border: 1px solid #ccc;
    height: 30px;
    width: 30px;
    line-height: 30px;
    box-shadow: 1px 1px 3px #aaa;
}

    .dateChange img {
        position: absolute;
        top: 5px;
        left: 3px;
    }

    .dateChange.inactive,
    .dateChange.inactive img {
        opacity: 60%;
        cursor: default;
    }

#searchDateInput {
    border-radius: 10px;
    padding: 0 5px;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 3px #aaa;
}

button.change.smallBT2.inactive {
    background-color: #fff;
    border-color: #aba9a9;
    color: #aba9a9;
}

div#pagerBox div.attend.inactive {
    color: #ccc;
    border: 1px solid #ccc;
}

.dateChange:hover,
div#pagerBox div.attend:hover,
div#pagerBox p:hover {
    cursor: pointer;
    background-color: #bbb;
    color: var(--reversalFontColor);
}

.dateChange.inactive:hover,
div#pagerBox p.inactive:hover {
    background-color: var(--reversalFontColor);
    color: var(--pointColor);
    cursor: default;
}

div#pagerBox div.attend.inactive:hover {
    background-color: var(--reversalFontColor);
    color: #ccc;
}

div#pager {
    margin-top: 15px;
}

div#pager_rightSide {
    top: 160px;
    right: 10px;
}

div.titleBox div#pager_rightSide {
    margin-top: 135px;
}

p#titleSubMarker {
    z-index: 10;
    top: 0px;
    right: 20px;
}

button#logout {
    border: 2px solid var(--reversalFontColor);
    width: 100px;
    height: 30px;
    margin: 3px;
    border-radius: 5px;
    color: var(--reversalFontColor);
    background-color: var(--attentionColor1);
    margin-top: 14px;
}

#choosedMachineInfo_HP p#titleSubMarker::after,
#choosedMachineInfo p#titleSubMarker::after {
    content: "";
    position: relative;
    top: -17px;
    left: 4px;
    border-bottom: 10px solid #333;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-top: 10px solid transparent;
}

div#pager {
    margin-top: 2px;
}

    div#pager.history {
        margin-top: 0px;
    }

.pagerBox {
    margin-top: 5px;
}

div#pager_rightSide {
    place-items: start;
    margin-right: 10px;
}

div.titleBox div#pager_rightSide {
    margin-top: 135px;
}

#choosedMachineInfo_HP.inactive p#titleSubMarker::after,
#choosedMachineInfo.inactive p#titleSubMarker::after {
    content: "";
    position: relative;
    top: 14px;
    left: 4px;
    border-top: 10px solid #333;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-bottom: 10px solid transparent;
}

/**toolBox*/
.toolBox,
.content1 {
    grid-template-columns: 140px auto auto auto auto;
    padding-left: 12px;
    place-items: start;
    background-color: var(--toolBoxColor);
    height: 47px;
    line-height: 45px;
    border-bottom: 1px solid var(--lineColor);
}

.toolBox {
    grid-template-columns: 12% auto auto;
    line-height: 45px;
}

.tools {
    max-width: 100px;
    height: 25px;
    border-radius: 10px;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 3px #aaa;
    box-sizing: border-box;
}

select.tools.non-appearance {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 3px 5px;
}

#historyToolBox {
    grid-template-columns: 140px 260px 190px 360px auto;
}

#alertToolBox {
    grid-template-columns: 330px auto auto;
}

#partsToolBox {
    grid-template-columns: 140px 310px 210px 246px auto auto;
}

#historyToolBox.jp {
    grid-template-columns: 140px 250px 220px 330px auto;
}

#alertToolBox.jp {
    grid-template-columns: 330px auto auto;
}

#partsToolBox.jp {
    grid-template-columns: 140px 260px 200px 200px auto auto;
}
/*.historyTool{
    margin-top: 10px;
}*/
.tools:focus {
    outline: none;
}

div.ui-helper-hidden-accessible {
    display: none;
}

ul.ui-menu {
    background-color: var(--reversalFontColor);
    z-index: 10;
    color: var(--mainFontColor);
    padding: 5px;
    min-height: 50px;
    height: max-content;
    max-height: 160px;
    width: auto;
    max-width: 220px;
    overflow-y: scroll;
    overflow-x: scroll;
}

    ul.ui-menu li div.ui-state-active {
        background-color: #afced2;
    }

    ul.ui-menu li:nth-child(even) {
        background-color: var(--oddColor);
    }
/*ul.ui-menu li{
    border-bottom: 1px solid var(--lineColor);
}*/
li.ui-menu-item {
    font-size: var(--menuFontSize);
    margin-top: 5px;
    font-size: 10px;
}

.ul-wigget-content {
    border: 1px solid #999;
}

.ul-corner-all {
    border-radius: 0px;
}

.ul-wigget-content a {
    color: #999;
    font-size: 14px;
}

.ambigousBox input[type="text"] {
    /*  width: 146px;*/
}

.ambigousBox select {
    width: 170px;
    margin-left: 108px;
}

.searchBox ul.front {
    z-index: 10;
    background-color: var(--reversalFontColor);
    top: 0px;
    left: 115px;
    width: 150px;
    padding: 0 5px 5px;
}

ul.complementBox li {
    margin-top: 6px;
}

table {
    border-collapse: collapse;
    border-spacing: 1px 0;
    margin: 2px var(--mainContentMarginLeft) 5px var(--mainContentMarginLeft);
    width: 1186px;
}

    table tr {
        border-bottom: 1px solid var(--lineColor);
    }

section table {
    margin: 2px 0 5px var(--mainContentMarginLeft);
}

div.content3 table {
    /*width: 1140px;*/
    width: 98%;
}

body.close table {
    width: 1340px;
}

tr.hoverD {
    cursor: default;
}

table th, td {
    padding: 6px 5px;
    text-align: center;
    width: 100px;
    font-size: 11px;
    word-wrap: break-word;
    height: 20px;
}

    td.text-left {
        text-align: left;
    }

th {
    background-color: var(--middleMainColor);
    color: var(--reversalFontColor);
    font-size: 90%;
    line-height: 20px;
}

tr:nth-child(odd) {
    background-color: var(--reversalFontColor);
}

tr:nth-child(even) {
    background-color: var(--oddColor);
}

tr.over {
    background-color: var(--overColor);
    cursor: pointer;
}

table.H350 {
    max-height: 350px;
}

tr.attention {
    background-color: var(--attentionColor1);
}

tr.choosen {
    background-color: var(--attentionColor2);
}

.underNavContent {
    grid-template-rows: 40px 115px 50px auto;
}

    .underNavContent.close {
        grid-template-rows: 40px 40px 50px auto;
    }

.underNavContentD {
    grid-template-rows: 50px 117px 80px auto auto;
}

    .underNavContentD.close {
        grid-template-rows: 50px 40px 80px auto auto;
    }

.underNavContentH.close {
    grid-template-rows: 40px 40px 50px auto;
}

.underNavContentH {
    grid-template-rows: 40px 100px 50px auto;
}

img.W20 {
    width: 20px;
    height: 20px;
    margin-bottom: -10px;
}

img.W25 {
    width: 25px;
    height: 25px;
    margin-bottom: -5px;
}

/**** ページ内コンテンツ要素の割合 ****/
body#HistoryPage div.underNavContent,
body#DetailPage div.underNavContent {
    grid-template-rows: auto auto;
}

body#ClientListPage div.underNavContent {
    grid-template-rows: 30% 5% 65%;
}

    body#ClientListPage div.underNavContent.close {
        grid-template-rows: 10% 5% 85%;
    }

/**** コンテンツ要素のフレームとタイトル ****/
div.content2 {
    grid-template-columns: auto auto;
    place-items: start;
}

    div.content2 .grid {
        grid-template-rows: 20% 80%;
    }

    div.content2 .flame,
    div.content3 .flame {
        height: 465px;
        width: 1210px;
        border: 1px solid #ccc;
        background-color: inherit;
        margin-left: 7px;
        box-sizing: border-box;
    }

div.close div.content3 .flame {
    height: 525px;
}

div.content2 .flame {
    height: auto;
    margin-bottom: 5px
}

div.content3 .flame#auto {
    height: auto;
}

div.content3 .auto section.Hauto {
    min-height: 75px;
}

div.content2 div.flame.grid {
    grid-template-rows: 22px auto;
}

.contentTitle p {
    font-size: 12px;
    padding-left: 5px;
}

.contentTitle {
    height: 25px;
    line-height: 25px;
    width: 100%;
    background-color: var(--oddColor);
}

div#order {
    text-align: end;
    margin: auto 3px 5px auto;
}

    div#order div.searchInputDateBox {
        text-align: start;
        padding: 0 10px;
    }

    div#order button:hover {
        background-color: var(--pointColor);
    }

/**** 戻るボタン ****/
#toBack,
#toDetail,
#toHistory {
    width: 135px;
    height: 35px;
    left: 6px;
    top: -12px;
    font-size: 11.5px;
    background-color: var(--buttonShadow);
    color: var(--reversalFontColor);
}

div.title button#toBack:hover {
    background-color: #c9c1c1;
}

span.toBack:after {
    content: "";
    position: absolute;
    border-left: 8px solid transparent;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid var(--reversalFontColor);
    left: -5px;
}

.inactive #toDetail {
    top: -57px;
}

/**** 機械詳細画面 ****/
body#DetailPage table th,
body#DetailPage table td {
    height: 30px;
    line-height: 30px;
    text-align: center;
}

body#DetailPage table {
    height: 150px;
    margin: 20px 20px 10px auto;
}

    body#DetailPage table#DetailAlertTable td:first-child,
    body#DetailPage table#DetailAlertTable th:first-child {
        width: 30px
    }

    body#DetailPage table#DetailExchangeTable th {
        width: 140px;
    }

#choosedMachineTitle {
    top: 0;
    left: 0;
    background-color: var(--attentionColor1);
    width: 663px;
    height: 30px;
    text-align: center;
    line-height: 38px;
    border-radius: 0 8px 0 0;
    z-index: 2;
}

#choosedMachineInfo_HP,
#choosedMachineInfo {
    top: -90px;
    left: 10px;
    /*right: 0px;*/
    background-color: var(--reversalFontColor);
    width: 643px;
    height: 140px;
    padding: 32px 10px 0 10px;
    line-height: 22px;
    box-shadow: 1px 1px 6px var(--middleMainColor);
    border-radius: 0 10px 0 0;
}

    #choosedMachineInfo_HP.inactive,
    #choosedMachineInfo.inactive {
        height: 75px;
    }

#choosedMachineInfo_HP {
    top: -14px;
}

#choosedMachineContent {
    grid-template-rows: auto;
    grid-template-columns: 60% 40%;
}

#choosedMachineInfo_HP span:after,
#choosedMachineInfo span:after {
    content: "";
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 9px solid var(--mainFontColor);
    position: absolute;
    top: 4px;
    left: 0px;
}

#choosedMachineInfo_HP p.pushRight,
#choosedMachineInfo p.pushRight {
    margin-left: 12px;
}

.infoLine {
    border-bottom: 2px solid #dce7e8;
}
/*アラート情報*/
.searchTitle {
    border-radius: 0 5px 0 0;
    height: 35px;
    line-height: 40px;
    padding-left: 60px;
}

.machineDetail .searchTitle {
    padding-left: 20px;
}

div.titleBox {
    width: 100%;
    height: 35px;
    background: var(--pointColor);
}

.search {
    grid-template-columns: 50% 50%;
}

div#machineList p {
    font-size: 13px;
    position: relative;
    color: var(--mainFontColor);
}

body.close div.searchContent,
body.close div.titleBox,
body.close .searchBox {
    width: 1345px;
}

body.close .searchBox {
    margin-left: 20px;
}

.searchBox {
    width: 1210px;
    height: 185px;
    margin-left: 5px;
    border-radius: 0 5px 0 0;
    grid-template-rows: 35px 75px; /*35px auto*/
    border-radius: 0 5px 0 0;
}

    .searchBox.detail {
        height: 110px;
        grid-template-rows: 35px 75px; /*35px auto*/
    }

        .searchBox.detail .titleBox {
            grid-template-columns: 1% 30% auto;
        }

div.close div.searchBox {
    border: none;
    height: 35px;
}

.sortInfo {
    margin: 5px var(--mainContentMarginLeft) 0;
    font-size: 16px;
}

.searchContent {
    display: none;
}

    .searchContent.active {
        display: grid;
        grid-template-rows: 50% 50%;
        grid-auto-flow: row;
        place-items: start;
        background-color: var(--lightMainColor);
        height: 75px;
        width: 1210px;
        border-bottom: 1px solid var(--lineColor);
    }

        .searchContent.active div.alert-firstLow {
            grid-template-columns: 19% 19% 17% 22% 20%;
            width: inherit;
        }

        .searchContent.active div.alert-secondLow {
            grid-template-columns: 22% 15% 20% 20% 24% 8%;
            width: inherit;
        }

        .searchContent.active div.client-firstLow {
            grid-template-columns: 15% 20% auto auto auto;
            width: inherit;
        }

        .searchContent.active div.client-secondLow {
            grid-template-columns: 22% 15% 20% 25% 10% 8%;
            width: inherit;
        }

        .searchContent.active div.firstLow {
            grid-template-columns: 19% 19% 20% 21% 15%;
            width: inherit;
        }

        .searchContent.active div.secondLow {
            /*grid-template-columns: 26% 22% 22% 23% 8%;*/
            grid-template-columns: 16% 18% 15% 20% 32% 8%;
            width: inherit;
        }

div.searchContent.active div.longBorder {
    width: 240px;
}

div.detail .searchContent {
    padding-top: 5px;
    grid-template-rows: 50% 50%;
    height: 68px;
    line-height: 30px;
    border-bottom: 1px solid var(--lineColor);
}

.selectedItem {
    width: auto;
    padding-right: 6px;
    margin-left: 5px;
}

div.searchContent label.short {
    min-width: 20px;
    width: auto;
}

.searchContent.active .searchInputDateBox,
.searchContent.active .searchInputBox,
.searchContent.active .searchSelectBox {
    margin: 0 0 0 7px;
    border-bottom: 1px solid #7e7777;
    box-sizing: border-box;
    min-width: 160px;
    width: auto;
    height: 35px;
}

.searchContent.active .searchInputDateBox {
    width: 220px;
}

div.searchContent div#period {
    width: 275px;
}

.searchContent button.change {
    margin: 3px 60px 0 auto;
    width: 60px;
    height: 30px;
    top: 0px;
    right: 0px;
}

div.searchContent label {
    display: inline-block;
    min-width: 55px;
    width: auto;
}

div.searchInputDateBox label {
    width: 60px;
}

.searchInputBox input[type="text"],
.searchInputBox input[type="number"],
.orderBox select,
.selector select,
.searchInputDateBox input[type="date"],
.searchSelectBox select {
    min-width: 100px;
    max-width: 160px;
    height: 30px;
    border: none;
    border-radius: 4px;
}

    .searchInputBox input[type="text"]#client {
        width: 220px;
    }

.searchInputDateBox input[type="date"] {
    width: 160px;
}

#order select:first-child {
    width: 150px;
}

.orderBox select:focus,
.selector select:focus,
input#searchDateInput:focus,
.searchInputDateBox input[type="date"]:focus,
div.searchSelectBox select:focus,
div.searchInputBox input[type="text"]:focus {
    outline: 0;
    border-bottom: 2px solid var(--pointColor);
    font-weight: 700;
}
/*検索文字列にfocus当たっている時の赤枠を調整*/
div.searchBoxMDM input[type="text"] {
    min-width: 100px;
    max-width: 100%;
    width: 100%;
    margin: inherit;
}
/*div.selectedItem{
grid-template-columns: 32% 68%;
}*/
div.searchContent.active div.selectedBox,
div.selectedBox {
    background-color: #fff;
    border: 0.2px solid #ccc;
    height: 27px;
}

    div.selectedBox div.head {
        background-color: var(--attentionColor2);
        padding: 0px 5px;
        border-right: 0.4px solid var(--toolBoxLineColor);
        height: 27px;
        min-width: 25px;
        max-width: 120px;
    }

        div.selectedBox div.content p,
        div.selectedBox div.head p {
            line-height: 30px;
        }

    div.selectedBox.two-lows div.head.two-lows {
        width: 40px;
    }

    div.selectedBox.two-lows div.head p {
        line-height: 20px;
    }

    div.selectedBox div.content p.two-lows {
        line-height: 20px;
    }

div.selectedItem div.content {
    padding-left: 5px;
    height: 27px;
    max-width: 300px;
    min-width: 50px;
}

div.selectedBox div.selectedContent1 {
    width: 99%;
    grid-template-columns: auto auto auto;
}

div.selectedBox div.selectedContent2 {
    width: 99%;
    grid-template-columns: auto auto auto auto auto;
}

p#searchDate {
    font-size: var( --subTitleFontSize);
    color: var(--pointColor);
}
/*Detail.html用CSS*/
.picAndButton .sampleImg {
    margin: 20px;
    background-color: #ccc;
    width: 300px;
    height: 300px;
    line-height: 300px;
    text-align: center;
}

.picAndButton {
    padding: 0 20px 0 0;
}

.historyButton {
    background-color: rgb(14,42,180);
    width: 150px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 5px;
    margin: 0 auto;
}

    .historyButton a {
        color: #fff;
    }

.tooltip_small {
    width: 115px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #7e7777;
    color: var(--reversalFontColor);
    font-size: 12px;
}

    .tooltip_small:after {
        content: "";
        position: absolute;
        top: 100%;
        left: 40%;
        border: 5px solid transparent;
        border-top: 10px solid #7e7777;
    }

div.close .tooltip_small {
    top: 140px;
}

.tooltip {
    position: absolute;
    top: 245px;
    left: 10px;
    background-color: var(--pointColor);
    border-radius: 5px;
    color: #fff;
    width: 230px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}

    .tooltip::after {
        content: "";
        position: absolute;
        top: 30%;
        left: 100%;
        border: 5px solid var(--lightMainColor);
        border-left: 12px solid var(--pointColor);
    }

div.close .tooltip {
    position: absolute;
    top: 93px;
    left: 10px;
}

div#ClientListTooltip {
    width: 300px;
    top: 241px;
}

div.close div#ClientListTooltip {
    top: 93px;
}

div.content3 h2 {
    padding-left: 10px;
    font-size: 16px;
}

table#DetailAlertTable {
    width: 98%;
}

div#AlertListPage div.close .tooltip {
    top: 150px;
}

div.selector {
    text-align: end;
}
/*button.change{
    margin: 0 10px;
    width: 100px;
    height: 40px;
    background-color: var(--buttonBGColor);
    border-radius: 5px;
    border-top: 3px solid var(--buttonHighLight);
    border-left: 3px solid var(--buttonHighLight);
    border-bottom: 3px solid var(--buttonShadow);
    border-right: 3px solid var(--buttonShadow);
}*/
button.smallBT,
button.change {
    /*margin: 0 10px;*/
    width: 100px;
    height: 40px;
    background-color: var(--reversalFontColor);
    border-radius: 10px;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 3px #aaa;
}

    button.change.smallBT2 {
        width: 62px;
        height: 26px;
    }

button.switch {
    width: 80px;
    height: 25px;
    background-color: var(--buttonBGColor);
    border-radius: 2px;
    border-top: 1px solid var(--buttonHighLight);
    border-left: 1px solid var(--buttonHighLight);
    border-bottom: 1px solid var(--buttonShadow);
    border-right: 1px solid var(--buttonShadow);
}

button.switchBT2 {
    width: 75px;
    height: 30px;
    margin: 0
}

button.smallBT3 {
    width: 48px;
    height: 35px;
}

select.graphControll {
    width: 60px;
    height: 32px;
    outline: none;
    border: none;
    border-radius: 10px;
}

div.tabAndTool {
    grid-template-rows: 25px 50px;
}

button.show {
    border: 3px solid var(--pointColor);
    width: 80px;
    height: 35px;
}

button#showParts.show:hover,
button#showAlert.show:hover {
    cursor: default;
    border: 3px solid var(--pointColor);
    background-color: var(--reversalFontColor);
    color: var(--mainFontColor);
}

div.tab {
    background-color: var(--lightMainColor);
    height: 100%;
    width: 150px;
    line-height: 25px;
    padding-left: 10px;
    margin-right: -5px;
    border-right: 1px solid var(--toolBoxLineColor);
    border-radius: 0 5px 0 0;
}

    div.tab:hover {
        background-color: #dbd3d3;
        opacity: 80%;
    }

    div.tab.select {
        background-color: var(--toolBoxColor);
        opacity: 100%;
    }

button.smallBT {
    width: 75px;
    height: 24px;
}

div.border {
    padding-right: 20px;
    border-right: 1px solid var(--toolBoxLineColor);
}

.content3 section.H450,
.content2 section.H450 {
    min-height: 435px;
    max-height: 435px;
    width: 450px;
}

.content3 section.H400,
.content3 section.H450 {
    width: 99.5%;
}

.content3 section.H400 {
    min-height: 400px;
    max-height: 400px;
}

.content2 section.H450 th {
    width: 90px;
}

.content2 .col2 {
    top: 58px;
    right: 480px;
    /*left: 710px;*/
}

button.change:hover {
    background-color: #bbb;
    color: var(--reversalFontColor);
}
/*検索ボックスの開閉ボタン設定*/
div.menuButton,
div.menuButton.active {
    position: relative;
    top: -35px;
    left: 7px;
    box-sizing: border-box;
    background-color: var(--pointColor);
    cursor: pointer;
    width: 35px;
    height: 35px;
    border-radius: 5px;
}

.machineInfo div {
    padding-left: 50px;
}

.machineDetail div.menuButton {
    top: 0px;
}

.menuIcon:before,
.menuIcon:after {
    position: absolute;
    content: "";
    display: block;
    transition: all 0.4s;
    background: #fff;
    left: 50%;
    top: 50%;
    width: 50%;
    height: 2px;
    transform: translate(-50%,-50%);
}

.menuIcon:before {
    transform: translate(-50%,-50%) rotate(0deg);
}

.close .menuIcon:before {
    transform: translate(-50%,-50%) rotate(90deg);
}

table#historyTable th,
table#historyTable td {
    padding: 4px 8px;
}
/*table#clientListTable th,
table#clientListTable td{
    width: 300px;
    height: 20px;
    line-height: 20px;
    padding: 7px 15px;
}*/

/*SessionTimeoutページ*/
body.timeout h1 {
    line-height: 22;
    text-align: center;
}

span.ambiguous {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #ccc;
    margin-top: 5px;
}

    span.ambiguous.close::after {
        position: absolute;
        content: "";
        top: 7px;
        left: 5px;
        border-top: 5px solid #333;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        border-bottom: 5px solid transparent;
    }

    span.ambiguous::after {
        position: absolute;
        content: "";
        top: 2px;
        left: 5px;
        border-bottom: 5px solid #333;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        border-top: 5px solid transparent;
    }

td.level1,
span.level1 {
    font-weight: 600;
    color: var(--mainFontColor);
}

td.level2,
span.level2 {
    font-weight: 600;
    color: var(--worningLevelColor);
}

td.level3,
span.level3 {
    font-weight: 600;
    color: var(--pointColor);
}

tr.worning {
    background-color: var(--partsWorning);
}

.flash {
    animation: flash 1s linear infinite;
}

@keyframes flash {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

#showGraphDate {
    width: 100%;
    min-height: 260px;
    max-height: 260px;
}

section.smallTable {
    min-height: 280px;
    max-height: 280px;
}

div#timeline {
    width: 950px;
}

.control-group,
.control-group1 {
    display: flex; /* ラベルと入力フィールドを横に並べる */
    align-items: center; /* ラベルと入力フィールドを垂直方向に中央揃え */
    padding: 5px;
}
    .control-group label,
    .control-group1 label {
        width: 300px; /* ラベルの幅を200pxに設定 */
        font-size: 20px;
    }

    .labelspan {
        width: 300px; /* ラベルの幅を200pxに設定 */
        font-size: 20px;
    }

.control-group input[type="text"],
.control-group select,
.control-group textarea,
.control-group1 input[type="text"],
.control-group1 select,
.control-group1 textarea {
    font-size: 20px;
    margin: 5px 10px;
}

    .control-group input[type="submit"],
    .control-group1 input[type="submit"] {
        margin: 5px 10px;
    }

    .control-group .label-class,
    .control-group1 .label-class {
        width: 500px; /* ラベルの幅を200pxに設定 */
        display: inline-block; /* ラベルの幅を適用するためにブロックレベルに設定 */
        margin-right: 10px; /* ラベルと入力フィールドの間に余白を追加 */
        font-size: 20px;
        margin: 5px 10px;
        vertical-align: central;
        height: 30px;


        /*現在の位置から相対的に下に移動させる方法
        周囲のレイアウトを崩さずに移動できる　余白ではなく物理的に位置を変えたい時に有効*/
        /*確認ページのデータ右側のラベルの高さ調整()*/
        position: relative;
        top: 5px;
    }

    .label-class {
        display: inline-block; /* ラベルの幅を適用するためにブロックレベルに設定 */
        margin-right: 10px; /* ラベルと入力フィールドの間に余白を追加 */
        font-size: 20px;
        margin: 5px 10px;
        vertical-align: central;
    }

    .control-group .textbox-class,
    .control-group1 .textbox-class {
        width: 500px; /* 入力フィールドの幅を400pxに設定 */
        display: inline-block;
        font-size: 20px;
        border: 1px solid #999;
        margin: 5px 10px;
    }

    /*プレースホルダーのCssを設定する*/
    .control-group .textbox-class::placeholder,
    .control-group1 .textbox-class::placeholder {
        font-size: 16px; /* ここで文字の大きさを指定します */
        /*color: #999;*/ /* プレースホルダーの文字色も指定できます */
    }


    .control-group .half-width,
    .control-group1 .half-width {
        width: 200px !important;
    }
    .control-group .textarea,
    .control-group1 .textarea {
        width: 500px !important;
        height: 180px !important;
    }
    .control-group .label-textarea,
    .control-group1 .label-textarea {
        width: 500px !important;
        height: 160px !important;
        white-space: pre-wrap;     /* 改行と空白を保持しつつ折り返し */
        word-wrap: break-word;     /* 長い単語も折り返す */
        overflow-x: hidden;     /* 横スクロールを防ぐ */
        overflow-y: hidden;     /* 縦スクロールも防ぐ（内容を隠す） */
    }

    .control-group .half-width.password__input,
    .control-group1 .half-width.password__input {
        width: 200px !important;
    }
    
    .control-group .half-width1{
        width: 180px !important;
    }

    .control-group .wide-width,
    .control-group1 .wide-width {
        width: 700px !important;
    }

    .control-group .memo-label,
    .control-group1 .memo-label {
        font-size: 15px;
        width: 300px;
        inline-size: max-content;
    }

.message {
    color: #ff0000;
    font-weight: bold;
    display: block;
    margin-left: 20px;
    font-size: 16px;
    width: 600px;
    padding: 10px;
}

.container-class {
    padding: 10px;
    margin: 20px;
    height: 530px;
    display: table;
}

.control-group {
    display: flex;
    align-items: center;
    padding: 4px 5px;
}
.control-group1 {
    display: flex;
    align-items: center;
    padding: 4px 5px;
    margin-bottom: -8.5px; /* 各要素の下の余白を縮小(詰めて表示) */
}

.submit-buttons-box {
    display: flex;
    margin-left: var(--mainContentMarginLeft);
}

.input-label-group {
    margin-right: auto;
}

.input-label-group1 {
    display: flex;
    margin-right: var(--mainContentMarginLeft)
}

.position-left {
    float: inline-end;
}

.btn-action {
    margin: 0 5px;
    height: 30px;
    min-width: 90px; /*最小幅を設定*/
    max-width: 100%; /*文字列に応じて動的にボタンの幅変更*/
    background-color: var(--reversalFontColor);
    border-radius: 10px;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 3px #aaa;
    cursor: pointer;
}
.btn-action.clear{
    color: #fff;
    background-color: #d01414;
}

    .btn-action:hover {
        background-color: #bbb;
        color: var(--reversalFontColor);
    }

    .btn-action.clear:hover {
        background-color: #fff;
        color: #d01414;
    }

    .btn-action:disabled:hover {
        cursor: not-allowed;
    }

.small-btn {
    width: 50px;
}

.wide-btn {
    width: 130px;
}

.danger-btn {
    background-color: #dc3545;
    color: white;
}

.flex-container {
    width: 150px;
    align-items: center;
}

.wide-dropdownlist {
    width: 130px;
    margin-left: 450px;
}

.link-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /*１列に最大2*/
    grid-gap: 20px;
    /*grid-column-gap: 200px;*/ /*横のボタン同士の距離を設定*/
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    /*flex-wrap: wrap;*/ /*ボタンが多くなった場合に折り返す*/
    /*}*/
}

.link {
    white-space: normal;
    display: block;
    text-decoration: none;
    color: #fff;
    background-color: #d01414;
    padding: 15px 30px; /*内側の余白を増やす*/
    border-radius: 5px;
    border: 2px solid var(--reversalFontColor);
    text-align: center;
    transition: background-color 0.3s;
    box-sizing: border-box; /*ボーダーを含めたボックスサイズを維持*/
    word-wrap: break-word; /*長い単語を折り返す*/
    /*width: 100px;
    min-width: 400px;*/
    font-size: 18px;
}

    .link:hover {
        background-color: #fff;
        color: #d01414;
        border: 2px solid #d01414;
    }
.error {
    border: 1px solid red;
    background-color: #ffe6e6; /* 薄い赤背景 */
}

/* ドロップダウンメニュー */
/* ドロップダウンボタン */
.dropdown {
    position: relative;
    display: inline-block;
}

/* ドロップダウンメニューの初期状態（非表示） */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 5px;
    z-index: 1;
    /*display: flex;*/ /* フレックスボックスを使用 */
    flex-direction: column; /* 建て並びに設定 */
    gap: 10px; /* 要素の間隔を設定 */
}
.tttt {
    writing-mode: horizontal-tb; /* 横書き */
    direction: ltr; /* 左から右へ */
}

/* ドロップダウン表示時 */
.dropdown-content.show {
    display: block;
    margin-top: 8px;
}

/* 各メニュー項目のスタイル */
.menu-item {
    font-size: 14px;
    text-align: left;
    color: #0078d7;
    padding: 10px 15px;
    border: 1px solid #ddd;
    background-color: white;
    border-radius: 5px;
    cursor: pointer;
    direction: ltr; /* 左から右へ横方向 */
    text-orientation: mixed; /* 横書き用設定 */
    white-space: nowrap; /* 改行を防ぐ（必要なら）これを入れないと横書きの文字列にならない */
}

    .menu-item:hover {
        background: linear-gradient(90deg, #e3f2fd, #bbdefb); /* 淡いブルー系のグラデーション */
        color: #003c8f; /* 深みのあるブルー */
    }

/*設定完了画面*/
div.CompleteMsg {
    margin-top: 30px;
    margin-left: 20px;
    font-size: 16px;
    color: var(--markerColor);
    font-weight: 700;
}

.toggle-password {
    width: 40px;
    border: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='48' width='48'><path d='M24 31.5q3.55 0 6.025-2.475Q32.5 26.55 32.5 23q0-3.55-2.475-6.025Q27.55 14.5 24 14.5q-3.55 0-6.025 2.475Q15.5 19.45 15.5 23q0 3.55 2.475 6.025Q20.45 31.5 24 31.5Zm0-2.9q-2.35 0-3.975-1.625T18.4 23q0-2.35 1.625-3.975T24 17.4q2.35 0 3.975 1.625T29.6 23q0 2.35-1.625 3.975T24 28.6Zm0 9.4q-7.3 0-13.2-4.15Q4.9 29.7 2 23q2.9-6.7 8.8-10.85Q16.7 8 24 8q7.3 0 13.2 4.15Q43.1 16.3 46 23q-2.9 6.7-8.8 10.85Q31.3 38 24 38Zm0-15Zm0 12q6.05 0 11.125-3.275T42.85 23q-2.65-5.45-7.725-8.725Q30.05 11 24 11t-11.125 3.275Q7.8 17.55 5.1 23q2.7 5.45 7.775 8.725Q17.95 35 24 35Z'/></svg>") no-repeat center center;
    background-size: 50% auto;
    cursor: pointer;
}

/*パスワードが表示されるようになる*/
.toggle-password.is-visible {
    width: 40px;
    border: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='48' width='48'><path d='m31.45 27.05-2.2-2.2q1.3-3.55-1.35-5.9-2.65-2.35-5.75-1.2l-2.2-2.2q.85-.55 1.9-.8 1.05-.25 2.15-.25 3.55 0 6.025 2.475Q32.5 19.45 32.5 23q0 1.1-.275 2.175-.275 1.075-.775 1.875Zm6.45 6.45-2-2q2.45-1.8 4.275-4.025Q42 25.25 42.85 23q-2.5-5.55-7.5-8.775Q30.35 11 24.5 11q-2.1 0-4.3.4-2.2.4-3.45.95L14.45 10q1.75-.8 4.475-1.4Q21.65 8 24.25 8q7.15 0 13.075 4.075Q43.25 16.15 46 23q-1.3 3.2-3.35 5.85-2.05 2.65-4.75 4.65Zm2.9 11.3-8.4-8.25q-1.75.7-3.95 1.075T24 38q-7.3 0-13.25-4.075T2 23q1-2.6 2.775-5.075T9.1 13.2L2.8 6.9l2.1-2.15L42.75 42.6ZM11.15 15.3q-1.85 1.35-3.575 3.55Q5.85 21.05 5.1 23q2.55 5.55 7.675 8.775Q17.9 35 24.4 35q1.65 0 3.25-.2t2.4-.6l-3.2-3.2q-.55.25-1.35.375T24 31.5q-3.5 0-6-2.45T15.5 23q0-.75.125-1.5T16 20.15Zm15.25 7.1Zm-5.8 2.9Z'/></svg>");
    background-size: 50% auto;
    cursor: pointer;
}


@media (any-hover: hover) {
    .password__toggle:hover {
        opacity: 0.7;
    }
}

.password-wrapper {
    display: inline-block;
    border: 1px solid #999;
    margin: 5px 10px;
    width: 250px;
    white-space: nowrap;
}

.password-wrapper1 {
    display: inline-block;
    border: 1px solid #999;
    margin: 5px 10px;
    width: 230px;
    white-space: nowrap;
}


.password__input {
    outline: none;
    font-size: 20px !important;
    margin: 0% !important;
    background: transparent;
}

    .password__input::placeholder {
        font-size: 16px; /* 変更したいサイズに設定 */
    }