/*
ウインドウの種類
    Window                              シングルウインドウ用のウインドウ
    SubWindow                           マルチウインドウ対応の作業用ウインドウ
    ModelessDialog                      マルチウインドウ対応のメッセージおよび設定用ウインドウ
    ModalDialog                         マスクがあり他のウインドウの操作を禁止するダイアログ。縮小・閉じる機能はない。中央に表示されるが移動はできる。

プログラムとcssの役割分担
    位置とサイズはプログラム中心で設定する。特に幅、高さはプログラムが出来る限り自動で計算して設定する
    色や形状、フォントなどはcssで設定する
    画像のソースの設定はプログラム中心で設定する。ただし背景画像は場合による。
*/

.errmsg {
    color:red;
}
.mask{
    position:absolute;
    width:100%;
    height:100%;
    background-Color:black;
    padding:0px;
    top:0px;
    left:0px;
    opacity:0.2;
}

.window.login {
    margin:0 auto;
    width:600px;
    height:400px;
    border:2px green solid;
    position:relative;
    top : 100px;
}

.window.login > div:first-child {
    display: grid;
    place-items: center;
    border-width: 0 0 1px 0;
    border-color: green;
    border-style: solid;
    grid-template-columns: 210px 1fr;
}
.window.login form div:nth-child(2) {
    display: grid;
    padding: 10px;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 50px 50px 50px;
}
.window.login img {
    width:90%;
}
.window.login  > div:first-child span {
    font-size:32px;
}
.window.login  > span:nth-child(2)  {
    font-size:24px;
    margin: 20px;
    display: inline-block;
}
.window.login form div:nth-child(2) span {
    display:inline-block;
    text-align:right;
}
.window.login form div:nth-child(2) span::after {
    content: "：";
}
.window.login form div:nth-child(2) input {
    display:inline-block;
    text-align:left;
    width:200px;
    height:25px;
}
.window.login input[type=button],input[type=submit] {
    margin:10px;
    width:100px;
}


.DialogWindow {
    border: 1px solid gray;
    position: absolute;
    top: 100px;
    left: 300px;
    width: 300px;
    height: 300px;
}
.DialogWindow .titlebar {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 30px;
    border: 1px solid gray;
    border-width : 0px 0px 1px 0px;
    background-color : #e0e0e0;
    text-align:left;
}
.DialogWindow .titlebar span {
    position: absolute;
    top: 0px;
    left: 23px;
}
.DialogWindow .mainblock {
    position: absolute;
    top: 31px;
    left: 0px;
    width: 100%;
    /*height: calc(100% - 31px);*/
    border: 0px solid gray;
    border-width : 0px 0px 0px 0px;
    background-color : #f0f0f0;
    text-align:left;
}

.titlebar select {
    font-size:16px;
}
.titlebar span:first-child {
    font-size:16px;
    font-weight:bold;
}

.SubWindow {
    border: 1px solid gray;
    position: absolute;
    top: 70px;
    left: 250px;
    width: fix-content;
    height: fix-content;
}
.SubWindow * {
    font-size:12px;
    color:#505050;
}
.diaryeditbox span:first-child {
    font-weight: bold;
    width: 90%;
    display: inline-block;
    text-align: left;
    margin-top: 7px;
    margin-bottom: 2px;
    /* padding-left: 8px; */
    position: relative;
    left: 3px;
}
.titlebar {
    position: unset;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 30px;
    border: 1px solid gray;
    border-width : 0px 0px 1px 0px;
    background-color : #9bcca0;
    text-align:left;
}
.titlebar span {
    position: absolute;
    top: 5px;
    left: 25px;
}
.mainblock {
    position: unset;
    top: 31px;
    left: 0px;
    width: fit-content;
    height: fit-content;
    padding:10px;
    border: 0px solid gray;
    border-width : 0px 0px 0px 0px;
    background-color : #f0f0f0;
    text-align:center;
    white-space: nowrap;
}
.mainblock input[type=button] {
    padding: 5px;
    margin: 10px;
}
.movemark {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 15px;
    height: 15px;
    border: 0px solid green;
    /*background-color : green;*/
    background-image: url(../img/move.png);
}
.refreshmark {
    position: absolute;
    top: 5px;
    right: 55px;
    width: 15px;
    height: 15px;
    border: 0px solid blue;
    background-repeat: no-repeat;
    background-position: center;
    /*background-color : blue;*/
    background-image: url(../img/refresh7.png);
}
.minmark {
    position: absolute;
    top: 5px;
    right: 30px;
    width: 15px;
    height: 15px;
    border: 0px solid blue;
    background-repeat: no-repeat;
    background-position: center;
    /*background-color : blue;*/
    background-image: url(../img/min1.png);
}

.closemark {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 15px;
    height: 15px;
    border: 0px solid pink;
    /*background-color : pink;*/
    background-image: url(../img/close1.png);
}
.resizemark {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 14px;
    height: 14px;
    border: 0px solid red;
    background-image: url(../img/size.png);
}

.SubWindow .mainblock {
    position: unset;
    top: 31px;
    left: 0px;
    width: 100%;
    height: calc(100% - 31px);
    border: 0px solid gray;
    border-width : 0px 0px 0px 0px;
    background-color : #e7fbe9;
    text-align:center;
    padding:0;
    overflow:auto;
    scrollbar-color: #d4aa70 #e4e4e4;
    scrollbar-width: thin;

}
.SubWindow .mainblock .definevalue {
    display:inline-block;
    text-align:left;
    margin: 0px;
}
.SubWindow .mainblock .definelabel {
    display:inline-block;
    text-align:right;
    margin: 0px;
}
.SubWindow .mainblock .definelabel::after {
    content: "：";
}
.SubWindow .mainblock input[type=text] {
    margin: 0px 0px;
}
.SubWindow .mainblock input[type=button] {
    margin: 0px 10px;
}
.SubWindow .mainblock select {
    margin: 0px 5px 5px 0px;
    height: 24px;
}

.sqlsource {
    resize: none;
    display:block;
    width: calc(100% - 6px);
    height: 200px;
}
.sqlresult {
    width: calc(100% - 2px);
    height: calc(100% - 250px);
    border: 1px solid gray;
    overflow:auto;
}
.sqlresult table th , .sqlresult table td{
    border: 1px solid gray;
}

.SubWindow.CreateDataBaseWindow {
    width:400px;
    height:100px;
}
.SubWindow.CreateDataBaseWindow .mainblock {
    text-align:center;
}
.SubWindow.CreateRoleWindow {
    width:430px;
    height:180px;
}

.formlabel {
    display:inline-block;
    text-align:right;
/*    width:200px;  */
    margin:5px;
}
span.formlabel::after {
    content: "：";
}
.formitem {
    display:inline-block;
    text-align:left;
    width:200px;
    margin:5px;
}
.definelabel {
    display:inline-block;
    text-align:right;
/*    width:200px;  */
    margin:5px;
}
span.definelabel::after {
    content: "：";
}
.definevalue {
    display:inline-block;
    text-align:left;
    margin:5px;
}

.SubWindow.CreateRoleWindow .mainblock {
    text-align:center;
}
.SubWindow.CreateRoleWindow .formitem {
    display:inline-block;
    text-align:left;
    width:200px;
    margin:5px;
}
.SubWindow.CreateRoleWindow input[type=text].formitem {
    width:192px;
}
.SubWindow.CreateRoleWindow .formlabel {
    display:inline-block;
    text-align:right;
    width:200px;
    margin:5px;
}
.SubWindow.CreateRoleWindow span.formlabel::after {
    content: "：";
}
.ModalDialog {
    border: 0px solid gray;
    position: absolute;
    top: 100px;
    left: 300px;
    width: 300px;
    height: 300px;
    box-shadow: 2px 2px 5px 1px;
}
.ModalDialog .mainblock {
    text-align:center;
}
.ModalDialog .mainblock input[type=button] {
    margin: 10px;
}
.ModalDialog .mainblock span {
    display:inline-block;
    margin: 10px;
}
.ModelessDialog {
    border: 0px solid gray;
    position: absolute;
    top: 100px;
    left: 300px;
    width: fit-content;
    height: fit-content;
    
/*
    height: 300px;
*/
    box-shadow: 2px 2px 5px 1px;
}

/* 行番号列なしバージョンに調整してある */
.tableex {
    overflow: auto;
    white-space: nowrap;
    /*height: calc(100% - 48px);*/
    height:fit-content;
    width: 100%;
}
.tableex table{
    /*tableの余白リセット*/
    border-collapse: separate;
    border-spacing:0px;
    /* width: calc(100%); */
    /* height: calc(100%); */
    table-layout: fixed;
    text-align:left;
    margin:auto;
}
/*セルの余白*/
.tableex td,th{
    padding: 0px;
    width:70px;
    max-height:22px;
    height:22px;
    min-height:22px;
}
/*角の空白*/
.tableex tr:nth-child(1) td:nth-child(1) {        /*1列目1行目*/
    /*background: #B0B0B0;*/
    z-index: 3;
}
.tableex tr:nth-child(1) td:nth-child(2) {        /*2列目1行目*/
   /* background: #B0B0B0;*/
    z-index: 2;
}
.tableex td, .tableex th{
    border-right: 1px green solid;
    border-bottom: 1px green solid;
}
.tableex tr:nth-child(odd) td{
    background: #fffee4;
}
.tableex tr:nth-child(even) td{
    background: #f0f0f0;
}
/*タテの見出し固定*/
.tableex tr td:nth-child(1) {     /*1列目 No.*/
    position: sticky;
    left: 0px;
    /*background: #B0B0B0;*/
    border-left: 1px green solid;
    width:30px;
    text-align:center;
    padding-right:3px;
    cursor:default;
}
.tableex tr td:nth-child(2) {
    /*position: sticky;*/
    /*left: 35px;*/
    border-left: 0px green solid;
}
/*上の見出し固定*/
.tableex tr:nth-child(1) td {     /*1行目*/
    position: sticky;
    top: 0;
    background: #B0B0B0;
    border-top: 1px green solid;
    text-align:center;
}
.documentselectdialog {
    width : fit-content;
    height : fit-content;
    position : absolute;
    padding : 5px;
    background-color : #eeeeee;
    z-index : 8000;
    text-align : left;
}
.rightclickmenu1 {
    position: fixed;
    z-index: 9000;
    height: 20px;
    width: fit-content;
    border: 1px #808080 solid;
    border-radius: 4px;
    background-color:#d0d0d0;
    text-align:left;
}
.rightclickmenu1 img {
    position: absolute;
    right: 1px;
}
.rightclickmenu2 {
    position: fixed;
    z-index: 9000;
    height: 20px;
    width: fit-content;
    border: 1px #808080 solid;
    border-radius: 4px;
    background-color:#d0d0d0;
    text-align:left;
}
.rightclickmenu2 img {
    position: absolute;
    right: 1px;
}
.rightclickmenu3 {
    position: fixed;
    z-index: 9000;
    height: 20px;
    width: fit-content;
    border: 1px #808080 solid;
    border-radius: 4px;
    background-color:#d0d0d0;
    text-align:left;
}
.rightclickmenu3 img {
    position: absolute;
    right: 1px;
}
.rightclickmenu4 {
    position: fixed;
    z-index: 9000;
    height: 20px;
    width: fit-content;
    border: 1px #808080 solid;
    border-radius: 4px;
    background-color:#d0d0d0;
    text-align:left;
}
.rightclickmenu4 img {
    position: absolute;
    right: 1px;
}
.rightclickmenu1:hover {
    background-color:#c0c0c0;
}
.rightclickmenu2:hover {
    background-color:#c0c0c0;
}
.rightclickmenu3:hover {
    background-color:#c0c0c0;
}
.rightclickmenu4:hover {
    background-color:#c0c0c0;
}