@charset "utf-8";
/* CSS Document */

/*
 * ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Common Style
 */

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background: #edf0f2;
    font-size: 16px;
    line-height: 1;
    font-family: "メイリオ", Meiryo, Osaka,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    overflow: hidden;
    height: 100%;
}

form.search {
    display: inline-block;
}

input[type="radio"],
input[type="checkbox"]{
    transform: scale(1.5);
}




table {
    border: solid 1px #666;
    border-collapse: collapse;
    background: #FFF;
}

td, th {
    border: solid 1px #666;
    font-weight: normal;
}

#header {
    width: 100%;
}

#header .system_icon {
    width: 38px;
    height: 38px;
    float: left;
    margin: 0 0 0 10px;
}

#tab_wrap {
    /* width: calc( 100% - 20px ); */
    width: calc( 100% - 58px );
    height: 38px;
    margin: 0 auto;
    padding: 0;
    /* float: none; */
    float: left;
    /* clear: both; */
    overflow: hidden;
    box-sizing: border-box;
}

#tab_wrap > li {
    width: 160px;
    height: 38px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    float: left;
    list-style: none;
    color: #000;
    line-height: 38px;
    text-align: center;
}

#tab_wrap > li:nth-last-child(1) {
    float: right;
}


#tab_wrap > li:nth-child(1):hover,
#tab_wrap > li:nth-child(1).current { font-weight: bold; background: linear-gradient(#B900491F 90%, #B90049 90%, #B90049 95%, transparent 95%); }
#tab_wrap > li:nth-child(2):hover,
#tab_wrap > li:nth-child(2).current { font-weight: bold; background: linear-gradient(#ED5E001F 90%, #ED5E00 90%, #ED5E00 95%, transparent 95%); }
#tab_wrap > li:nth-child(3):hover,
#tab_wrap > li:nth-child(3).current { font-weight: bold; background: linear-gradient(#F2A1001F 90%, #F2A100 90%, #F2A100 95%, transparent 95%); }
#tab_wrap > li:nth-child(4):hover,
#tab_wrap > li:nth-child(4).current { font-weight: bold; background: linear-gradient(#006B2B1F 90%, #006B2B 90%, #006B2B 95%, transparent 95%); }
#tab_wrap > li:nth-child(5):hover,
#tab_wrap > li:nth-child(5).current { font-weight: bold; background: linear-gradient(#006E701F 90%, #006E70 90%, #006E70 95%, transparent 95%); }
#tab_wrap > li:nth-child(6):hover,
#tab_wrap > li:nth-child(6).current { font-weight: bold; background: linear-gradient(#004FAD1F 90%, #004FAD 90%, #004FAD 95%, transparent 95%); }
#tab_wrap > li:nth-last-child(1):hover,
#tab_wrap > li:nth-last-child(1).current { font-weight: bold; background: linear-gradient(#8B00821F 90%, #8B0082 90%, #8B0082 95%, transparent 95%); }



#tab_wrap > li > a {
    display: block;
    color: #000;
    text-decoration: none;
    width: 100%;
    height: 100%;
}


#fn_wrap { height: 52px;}

#fn_wrap2 { height: 94px;}

.fn_wrap {
    width: calc( 100% - 20px );
    margin: 0 auto;
    background: #FFF;
    float: none;
    clear: both;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    overflow: hidden;
}

.fn_wrap *{
    float: left;
    margin: 0 10px 0 0;
    box-sizing: border-box;
    height: 32px;
    font-size: 16px;
    line-height: 2em;
}


.fn_wrap select,
.fn_wrap button,
.fn_wrap input[type="text"],
.fn_wrap input[type="submit"],
.fn_wrap input[type="button"] {
    box-sizing: border-box;
    border: solid 1px #bbb;
    border-radius: 4px;
    padding: 0 0.5em;
}

.fn_wrap select,
.fn_wrap button,
.fn_wrap input[type="submit"],
.fn_wrap input[type="button"],
.fn_wrap input[type="radio"],
.fn_wrap label {
    cursor: pointer;
}

.fn_wrap select:disabled,
.fn_wrap button:disabled,
.fn_wrap input[type="submit"]:disabled,
.fn_wrap input[type="button"]:disabled,
.fn_wrap input[type="radio"]:disabled {
    cursor: not-allowed;
}

.fn_wrap input[type="text"]{
    cursor: text;
}

.fn_wrap form {
    margin: 0 !important;
}

#cnt_wrap { height: calc( 100% - 100px );}
#cnt_wrap2 { height: calc( 100% - 142px );}

.cnt_wrap {
    width: calc( 100% - 10px );
    padding: 0;
    margin: 10px 0 0 10px;
    overflow: scroll;
}

.fn_block {
    height: 100%;
}

.fn_block.border-right {
    border-right: solid 1px #888;
}

.fn_line {
    height: 32px;
    clear: both;
}

.fn_line + .fn_line {
    margin: 10px 0 0 0;
}

span.required {
    color: red;
}


/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* XN CHASE begin */

.datasheet {
	background: #FFF;
    cursor: default;
    border: solid 1px #A5ACB5;
}

.datasheet th {
    font-weight: normal;
    text-align: center;
    border: solid 1px #A9B0B8;

	background: #d2d8dc;
    padding: 0.25em;
    white-space: nowrap;
}

.datasheet > thead {
	position: sticky;
	z-index: 1;
	white-space: nowrap;
	top: 0px;
}

/* 売上帳用 */
.datasheet > tbody > tr > td.special_sticky {
	position: sticky;
	z-index: 1;
	white-space: nowrap;
	top: 0px;
}

/* 売上帳用 */
.datasheet > tbody > tr.special_sticky {
	position: sticky;
	z-index: 1;
	white-space: nowrap;
	top: 0px;
}

.datasheet > thead > tr > th.special_sticky {
	position: sticky;
	z-index: 2;
	left: 0;
}

.datasheet > thead > tr > th.date {
    font-weight: bold;
}

.datasheet > tbody {
    counter-reset: rowCount;
}

/* 偶数・奇数で色を変えるテーブルの場合 */
.datasheet.colored_row tr:nth-child(odd) {
	background: #FFFFFF;
}

.datasheet.colored_row tr:nth-child(even) {
	background: #EFEFEF;
}

.datasheet > tbody > tr{
	counter-increment: rowCount;
}


.datasheet > tbody > tr > th.row_num {
	text-align: right;
	position: -webkit-sticky;
	position: sticky;
	left: 0;
}

.datasheet > tbody > tr > th.row_num::before {
	content: counter(rowCount);
}


.datasheet > tbody > tr > td {
    font-weight: normal;
    text-align: left;
    border: solid 1px #A9B0B8;
    padding: 0.25em;
    white-space: nowrap;
}

.datasheet > tbody > tr > td.num {
    text-align: right;
}

.datasheet > tbody > tr > td.num[data-num^="-"] {
    color: #F00;
}


/* XN CHASE end */
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */



/*
 * ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Default Set
 */


/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:block;
    overflow:hidden;
}

.cf:after {
    clear:both;
}

/*
 * ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: jQuery UI Subset
 */

#dialog_edit table.xn-2col {
    border: none;
    width: 100%;
}

#dialog_edit table.xn-2col td {
    border: none;
    padding: 0.5em 0.1em;
}

#dialog_edit input[type="text"],
#dialog_edit input[type="number"],
#dialog_edit input[type="date"],
#dialog_edit select {
    display: block;
    box-sizing: border-box;
    border: solid 1px #bbb;
    border-radius: 4px;

    padding: 0 0.5em;
    height: 32px;

    font-size: 16px;
    line-height: 2em;
}

#dialog_edit input[type="text"]:read-only,
#dialog_edit input[type="number"]:read-only,
#dialog_edit input[type="date"]:read-only,
#dialog_edit select.read-only,
#dialog_edit textarea:read-only {
    background: #DDD;
}

/* select には read-only が存在しないのでクラスが必要 */
#dialog_edit select.read-only 
{
    pointer-events: none;
    background: #DDD;
}

#dialog_edit textarea {
    display: block;
    box-sizing: border-box;
    border: solid 1px #bbb;
    border-radius: 4px;

    padding: 0 0.5em;

    font-size: 16px;
    line-height: 1.5em;
}



#dialog_edit input[readonly] {
    background-color: #eee; /* 任意の色 */
}

#dialog_edit input.text::placeholder {
    color: lightpink;
    padding: 0 0.5em;
}

#dialog_edit fieldset {
    padding:0;
    border:0;
    margin-top:25px;
}

#dialog_edit h1 {
    font-size: 1.2em;
    margin: .6em 0;
}

#dialog_edit div#users-contain {
    width: 350px;
    margin: 20px 0;
}

#dialog_edit div#users-contain table {
    margin: 1em 0;
    border-collapse: collapse;
    width: 100%;
}

#dialog_edit div#users-contain table td, div#users-contain table th {
    border: 1px solid #eee;
    padding: .6em 10px;
    text-align: left;
}

#dialog_edit .ui-dialog .ui-state-error {
    padding: .3em;
}

#dialog_edit .tips {
    border: 1px solid transparent;
    padding: 0.3em;
}

#dialog_edit td.gray {
    background: #EEE;
}