﻿

.common-flex-block {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
    /*左寄せ(縦方向時上寄せ)*/
    .common-flex-block.left_start {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
    .common-flex-block.left_end {
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }
    /*中寄せ*/
    .common-flex-block.center_start {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    .common-flex-block.center {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    .common-flex-block.center_end {
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    /*右寄せ(縦方向時下寄せ)*/
    .common-flex-block.right_start {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }
    .common-flex-block.right_center {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }
    .common-flex-block.right_end {
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    .common-flex-block.direction_column {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .common-flex-block.justify_between {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .common-flex-block.dispnone,
    .common-flex-block.nodisp {
        display: none;
    }
    .common-flex-block.hidden {
        visibility: hidden;
    }


.btn {
    color: #fff;
    width: 120px;
    height: 28px;
    font-size: 14px;
}

.btn-comm {
    color: #fff;
    width: 120px;
    height: 28px;
    font-size: 14px;
    outline: 0;
}

.btn-style {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0 5px;
    font-size: 14px;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .1s ease-in-out,background-color .1s ease-in-out,border-color .1s ease-in-out,box-shadow .1s ease-in-out;
    cursor: pointer;
    outline: 0;
}
    .btn-style:disabled {
        opacity: .65;
        cursor: default;
    }
    .btn-style > i {
        margin:0 2px 0 0;
        text-align:left;
    }


/*ボタン(灰色)*/
.btn_gray {
    background-color: #888888;
    color: #fff;
    width: 120px;
    height: 28px;
}

    .btn_gray:hover:not(:disabled) {
        background-color: #777777;
        color: #fff;
    }

    .btn_gray:focus, .btn_gray.focus {
        box-shadow: 0px 0px 0px 0.1rem rgba(150,150,150,0.5);
        border-color: transparent;
        outline: 0;
    }

    .btn_gray.active {
        background-color: #777777;
    }

/*ボタン(オレンジ色)*/
.btn_orange {
    background-color: #FFA500;
    color: #fff;
    width: 120px;
    height: 28px;
}

    .btn_orange:hover:not(:disabled) {
        background-color: #E59500;
        color: #fff;
    }

    .btn_orange:focus, .btn_orange.focus {
        box-shadow: 0px 0px 0px 0.1rem rgba(255,165,0,0.5);
        border-color: transparent;
        outline: 0;
    }

    .btn_orange.active {
        background-color: #E59500;
    }

/*ボタン(赤色)*/
.btn_danger {
    background-color: #dc3545;
    color: #fff;
    width: 120px;
    height: 28px;
}

    .btn_danger:hover:not(:disabled) {
        background-color: #ad2330;
        color: #fff;
    }

    .btn_danger:focus, .btn_danger.focus {
        box-shadow: 0px 0px 0px 0.1rem rgba(255,0,0,0.5);
        border-color: transparent;
        outline: 0;
    }

    .btn_danger.active {
        background-color: #ad2330;
    }

/*ボタン(青色)*/
.btn_primary {
    background-color: #007bff;
    color: #fff;
    width: 120px;
    height: 28px;
}

    .btn_primary:hover:not(:disabled) {
        background-color: #0064d0;
        color: #fff;
    }

    .btn_primary:focus, .btn_primary.focus {
        box-shadow: 0px 0px 0px 0.1rem rgba(0,60,255,0.5);
        border-color: transparent;
        outline: 0;
    }

    .btn_primary.active {
        background-color: #0064d0;
    }

/*ボタン(水色)*/
.btn_info {
    background-color: #15b5ce;
    color: #fff;
    width: 120px;
    height: 28px;
}

    .btn_info:hover:not(:disabled) {
        background-color: #1096ab;
        color: #fff;
    }

    .btn_info:focus, .btn_info.focus {
        box-shadow: 0px 0px 0px 0.1rem rgba(0, 170, 255, 0.5);
        border-color: transparent;
        outline: 0;
    }

    .btn_info.active {
        background-color: #0d8092;
    }

/*ボタン(緑色)*/
.btn_success {
    background-color: #28a745;
    color: #fff;
    width: 120px;
    height: 28px;
}

    .btn_success:hover:not(:disabled) {
        background-color: #24923d;
        color: #fff;
    }

    .btn_success:focus, .btn_success.focus {
        box-shadow: 0px 0px 0px 0.1rem rgba(0, 170, 20, 0.5);
        border-color: transparent;
        outline: 0;
    }

    .btn_success.active {
        background-color: #24923d;
    }

/*ボタングループ*/
.btn_group {
    position: relative;
    display: -ms-inline-flexbox;
    display: inline-flex;
    vertical-align: middle;
}

/*----タブボタン----*/
.btn_tab {
    height: calc(100% + 1px) !important;
    border: 1px solid #ccc;
    background: #a7b9cc40;
    color: #455a64;
    width: 140px;
    -webkit-transition: color .0s ease-in-out,background-color .0s ease-in-out,border-color .0s ease-in-out,-webkit-box-shadow .0s ease-in-out;
    transition: color .0s ease-in-out,background-color .0s ease-in-out,border-color .0s ease-in-out,-webkit-box-shadow .0s ease-in-out;
    -o-transition: color .0s ease-in-out,background-color .0s ease-in-out,border-color .0s ease-in-out,box-shadow .0s ease-in-out;
    transition: color .0s ease-in-out,background-color .0s ease-in-out,border-color .0s ease-in-out,box-shadow .0s ease-in-out;
    transition: color .0s ease-in-out,background-color .0s ease-in-out,border-color .0s ease-in-out,box-shadow .0s ease-in-out,-webkit-box-shadow .0s ease-in-out;
}

    .btn_tab:hover:not(.active) {
        height: 100% !important;
        /*background-color: #ceecf3;*/
        background-color: #d7eef3;
    }

    .btn_tab.active {
        background-color: #f0f3f5 !important;
        color: #455a64;
        /*z-index: 4000000;*/
        z-index: 10;
        cursor: default;
    }



/*----トグルボタン----*/
.btn_toggle {
    border: 1px solid #bbb;
    background: rgba(255,255,255,0.3);
    color: #455a64;
    width: 140px;
    height: 28px;
    -webkit-transition: color .0s ease-in-out,background-color .0s ease-in-out,border-color .0s ease-in-out,-webkit-box-shadow .0s ease-in-out;
    transition: color .0s ease-in-out,background-color .0s ease-in-out,border-color .0s ease-in-out,-webkit-box-shadow .0s ease-in-out;
    -o-transition: color .0s ease-in-out,background-color .0s ease-in-out,border-color .0s ease-in-out,box-shadow .0s ease-in-out;
    transition: color .0s ease-in-out,background-color .0s ease-in-out,border-color .0s ease-in-out,box-shadow .0s ease-in-out;
    transition: color .0s ease-in-out,background-color .0s ease-in-out,border-color .0s ease-in-out,box-shadow .0s ease-in-out,-webkit-box-shadow .0s ease-in-out;
}

    .btn_toggle:hover:not(.active) {
        background-color: #d7eef3;
        /*border-color: #4897aa;*/
    }

    .btn_toggle.active {
        background-color: #0064d0 !important;
        border: 1px solid #0064d0 !important;
        color: #fff;
        cursor: default;
    }


/*----トグルスイッチ(30px*80px)----*/
.cmn-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
}

    .cmn-toggle + label {
        display: block;
        position: relative;
        cursor: pointer;
        outline: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

.cmn-toggle-round + label {
    width: 80px;
    height: 30px;
    background-color: #dddddd;
    border-radius: 60px;
}

    .cmn-toggle-round + label::before,
    .cmn-toggle-round + label::after {
        position: absolute;
        top: 1px;
        left: 1px;
        bottom: 1px;
        content: "";
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .cmn-toggle-round + label::before {
        right: 1px;
        background-color: #b6b8b9;
        border-radius: 60px;
        -webkit-transition: all 0.4s;
        -o-transition: all 0.4s;
        transition: all 0.4s;
        content: attr(off-text);
        color: #fff;
    }

    .cmn-toggle-round + label::after {
        width: 24px;
        height: calc(100% - 6px);
        margin: 2px;
        background-color: #fff;
        border-radius: 100%;
        -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        -webkit-transition: all 0.4s;
        -o-transition: all 0.4s;
        transition: all 0.4s;
    }

.cmn-toggle-round:checked + label::before {
    background-color: #46b55f;
    content: attr(on-text);
    color: #fff;
}

.cmn-toggle-round:checked + label::after {
    margin-left: 52px;
}



/*---inputEditor---*/
.cmn-input-block {
    position: relative;
    height: 100%;
    width: 100%;
}

    .cmn-input-block :hover {
        cursor: pointer;
    }

    .cmn-input-block input {
        font-size: 14px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        height: 100%;
        width: 100%;
        padding: 0.3em;
        -webkit-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
        border: 1px solid #b8b8b8;
        border-radius: 4px;
        outline: none;
        color: #455A64;
        cursor: pointer !important;
    }

        .cmn-input-block input:focus {
            border-color: #da3c41;
        }

            .cmn-input-block input:focus + i {
                color: #64B5F6;
            }

        .cmn-input-block input:hover {
            border-color: #64B5F6;
        }

    .cmn-input-block.no-radius input {
        border-radius: 0;
    }

    .cmn-input-block textarea {
        font-size: 14px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        height: 100%;
        width: 100%;
        padding: 0.3em;
        -webkit-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
        border: 1px solid #b8b8b8;
        border-radius: 4px;
        outline: none;
        resize: none;
    }

        .cmn-input-block textarea:focus {
            border-color: #da3c41;
        }

        .cmn-input-block textarea:hover {
            border-color: #64B5F6;
        }

    .cmn-input-block.no-radius textarea {
        border-radius: 0;
    }

    .cmn-input-block i {
        position: absolute;
        height: 100%;
        width: 30px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        top: 0;
        right: 0;
        -webkit-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
        color: #999999;
        pointer-events: none;
        padding: 1px 0 0 0;
    }

    .cmn-input-block input[type="number"] {
        text-align: right;
        -moz-appearance: textfield;
    }

    .cmn-input-block input[type=number]::-webkit-inner-spin-button,
    .cmn-input-block input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }


/*チェックボックスデザイン*/
/*最終的には↓のコメントアウトを外すこと*/
/*input[type=checkbox] {
    display: none;
}*/

.cmn-checkbox-block-outer {
    cursor: pointer;
}

.cmn-checkbox-block {
    position: relative;
    height: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 0 1px 28px;
    align-items: center;
    cursor: pointer;
}

    .cmn-checkbox-block:after {
        -webkit-transition: border-color 0.2s linear,background-color 0.2s linear;
        -o-transition: border-color 0.2s linear,background-color 0.2s linear;
        transition: border-color 0.2s linear,background-color 0.2s linear;
        position: absolute;
        top: 1px;
        left: 0;
        display: block;
        width: 16px;
        height: 16px;
        border: 2px solid #ccc;
        border-radius: 4px;
        content: '';
        z-index: 5;
        background-color: #fff;
    }

    .cmn-checkbox-block:before {
        -webkit-transition: opacity 0.2s linear;
        -o-transition: opacity 0.2s linear;
        transition: opacity 0.2s linear;
        position: absolute;
        top: 3px;
        left: 5px;
        display: block;
        width: 6px;
        height: 9px;
        border-right: 2px solid #455A64;
        border-bottom: 2px solid #455A64;
        content: '';
        opacity: 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        z-index: 10;
    }

    .cmn-checkbox-block:hover:after,
    .cmn-checkbox-block-outer:hover .cmn-checkbox-block:after {
        border-color: #455A64;
    }

    /*サイズ変更*/
    .cmn-checkbox-block.checkbox-size-14 {
        height: 16px;
        padding: 0 0 1px 23px;
    }

        .cmn-checkbox-block.checkbox-size-14:after {
            width: 14px;
            height: 14px;
        }

        .cmn-checkbox-block.checkbox-size-14:before {
            left: 4px;
            width: 6px;
            height: 8px;
        }

input[type=checkbox]:checked + .cmn-checkbox-block:before {
    opacity: 1;
}

input[type=checkbox]:checked + .cmn-checkbox-block:after {
    border-color: #455A64;
}

/*色変更*/
.cmn-checkbox-block.checkbox-color-blue:hover:after,
.cmn-checkbox-block-outer:hover .cmn-checkbox-block.checkbox-color-blue:after {
    border-color: #0171bd;
}

.cmn-checkbox-block.checkbox-color-red:hover:after,
.cmn-checkbox-block-outer:hover .cmn-checkbox-block.checkbox-color-red:after {
    border-color: #da3c41;
}

.cmn-checkbox-block.checkbox-color-blue:before,
.cmn-checkbox-block.checkbox-color-red:before {
    border-color: #fff;
}

input[type=checkbox]:checked + .cmn-checkbox-block.checkbox-color-blue:after {
    border-color: #0171bd;
    background-color: #0171bd;
}

input[type=checkbox]:checked + .cmn-checkbox-block.checkbox-color-red:after {
    border-color: #da3c41;
    background-color: #da3c41;
}

/*disable*/
.cmn-checkbox-block-outer.disable {
    cursor: default;
}

input[type=checkbox]:disabled + .cmn-checkbox-block {
    cursor: default;
}

    input[type=checkbox]:disabled + .cmn-checkbox-block:hover:after,
    .cmn-checkbox-block-outer:hover input[type=checkbox]:disabled + .cmn-checkbox-block:after {
        border-color: #ccc;
    }

input[type=checkbox]:checked:disabled + .cmn-checkbox-block:hover:after,
.cmn-checkbox-block-outer:hover input[type=checkbox]:checked:disabled + .cmn-checkbox-block:after {
    border-color: #455A64;
}

input[type=checkbox]:checked:disabled + .cmn-checkbox-block.checkbox-color-blue:hover:after,
.cmn-checkbox-block-outer:hover input[type=checkbox]:checked:disabled + .cmn-checkbox-block.checkbox-color-blue:after {
    border-color: #0171bd;
}

input[type=checkbox]:checked:disabled + .cmn-checkbox-block.checkbox-color-red:hover:after,
.cmn-checkbox-block-outer:hover input[type=checkbox]:checked:disabled + .cmn-checkbox-block.checkbox-color-red:after {
    border-color: #da3c41;
}




/*ラジオデザイン*/
/*最終的には↓のコメントアウトを外すこと*/
/*input[type=radio] {
    display: none;
}*/

.cmn-radio-block-outer {
    cursor: pointer;
}

.cmn-radio-black {
    position: relative;
    height: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 0 0 28px;
    align-items: center;
    cursor: pointer;
}

    .cmn-radio-black:after {
        -webkit-transition: border-color 0.2s linear;
        -o-transition: border-color 0.2s linear;
        transition: border-color 0.2s linear;
        position: absolute;
        top: 1px;
        left: 0px;
        display: block;
        width: 16px;
        height: 16px;
        border: 2px solid #ccc;
        border-radius: 50%;
        content: '';
        z-index: 5;
        background-color: #fff;
    }

    .cmn-radio-black:before {
        -webkit-transition: opacity 0.2s linear;
        -o-transition: opacity 0.2s linear;
        transition: opacity 0.2s linear;
        position: absolute;
        top: 5px;
        left: 4px;
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #455A64;
        content: '';
        opacity: 0;
        z-index: 10;
    }

    .cmn-radio-black:hover:after,
    .cmn-radio-block-outer:hover .cmn-radio-black:after {
        border-color: #455A64;
    }

    /*サイズ変更*/
    .cmn-radio-black.radio-size-14 {
        height: 16px;
        padding: 0 0 1px 23px;
    }

        .cmn-radio-black.radio-size-14:after {
            width: 14px;
            height: 14px;
        }

        .cmn-radio-black.radio-size-14:before {
            left: 4px;
            width: 6px;
            height: 6px;
        }

input[type=radio]:checked + .cmn-radio-black:before {
    opacity: 1;
}

input[type=radio]:checked + .cmn-radio-black:after {
    border: 2px solid #455A64;
}

/*色変更*/
.cmn-radio-black.radio-color-blue:hover:after,
.cmn-radio-block-outer:hover .cmn-radio-black.radio-color-blue:after {
    border-color: #0171bd;
}

.cmn-radio-black.radio-color-blue:before {
    border-color: #fff;
}

input[type=radio]:checked + .cmn-radio-black.radio-color-blue:before {
    background-color: #0171bd;
}

input[type=radio]:checked + .cmn-radio-black.radio-color-blue:after {
    border-color: #0171bd;
}


/*タブデザイン*/
.cmn-radio-tab-block {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 13px;
}

    .cmn-radio-tab-block > input[class=cmn-radio-tab] + label {
        height: 100%;
        width: 210px;
        cursor: pointer;
        position: relative;
    }

        .cmn-radio-tab-block > input[class=cmn-radio-tab] + label::after {
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            border: 1px solid #657f8e;
            border-bottom: none;
            background-color: #d9e0e7;
            overflow: hidden;
            content: attr(data-tabtitle);
            position: absolute;
        }

    .cmn-radio-tab-block > input[class=cmn-radio-tab]:not(:first-child) + label::after {
        border-left: none;
    }

    .cmn-radio-tab-block > input[class=cmn-radio-tab]:first-child + label::after {
        border-radius: 10px 0 0 0;
    }

    .cmn-radio-tab-block > input[class=cmn-radio-tab]:nth-last-child(2) + label::after {
        border-radius: 0 10px 0 0;
    }

    .cmn-radio-tab-block > input[class=cmn-radio-tab]:not(:checked):not(:disabled) + label:hover::after {
        background-color: #889ba7;
        color: #fff;
    }

    /*checked*/
    .cmn-radio-tab-block > input[class=cmn-radio-tab]:checked + label {
        cursor: default;
    }

        .cmn-radio-tab-block > input[class=cmn-radio-tab]:checked + label::after {
            height: calc(100% + 1px);
            padding: 0 0 1px 0;
            background-color: #f2f4f8;
        }

    /*disable*/
    .cmn-radio-tab-block > input[class=cmn-radio-tab]:disabled + label {
        cursor: default;
    }

        .cmn-radio-tab-block > input[class=cmn-radio-tab]:disabled + label::after {
            color: #878b8e;
        }




/*ボーダーライン*/
.border-vertical {
    width: 1px;
    min-width: 1px;
    height: 100%;
    margin: 0 5px 0 5px;
    border-right: 1px solid rgba(0,0,0,0.15);
    box-shadow: 1px 0 0 rgba(255,255,255,0.15);
}

.border-line {
    width: 100%;
    height: 1px;
    min-height: 1px;
    margin: 5px 0 5px 0;
    border-bottom: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 1px 0 rgba(255,255,255,0.15);
}

.link-text {
    color: #03f;
    -webkit-text-decoration-line: underline;
    /*text-decoration-line: underline;*/
}

.linkhover {
    cursor: pointer;
}

    .linkhover:hover {
        color: #c60;
    }


.ui-widget {
    font-size: 14px;
}

.ui-iggrid-headertable {
    background-color: transparent;
}

.headerStyle {
    text-align: center !important;
}

.Buton_Space {
    margin: 0px 20px 0px 20px;
}

.btn-space {
    margin: 0px 0px 0px 15px;
}

.btn-space-middle {
    margin: 0px 5px 0px 5px;
}

.btn-space-large {
    margin: 0px 15px 0px 0;
}


/*ダイアログ*/
.modal-dlg {
    color: #455A64;
    font-size: 14px;
}

    .modal-dlg.ui-dialog {
        /*background: radial-gradient(ellipse farthest-corner at center top, #ECEFF1 0%, #CFD8DC 100%);*/
        background: radial-gradient(ellipse farthest-corner at center top, #FFFFFF 0%, #ECEFF1 100%);
        border: none;
        border-radius: 5px;
        box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2), 0px 6px 20px 0px rgba(0,0,0,0.3);
        overflow: visible;
    }

        .modal-dlg.ui-dialog .ui-dialog-titlebar {
            height: 60px;
            background: transparent;
            border: none;
            padding: 8px 10px 3px 10px;
            display: flex;
            justify-content: center;
            align-content: center;
            position: relative;
        }

        .modal-dlg.ui-dialog .ui-dialog-titlebar-close {
            display: none;
        }

        .modal-dlg.ui-dialog .ui-dialog-title {
            color: #455A64;
            font-size: 22px;
            display: flex;
            align-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }

        .modal-dlg.ui-dialog .ui-dialog-content {
            padding: 0px;
            color: #455A64;
            overflow: visible;
        }

    .modal-dlg .modal-dlg-contents {
        padding: 0px 15px 0px 15px;
    }

    .modal-dlg .item-title {
        margin-top: 5px;
        font-size: 14px;
    }

    .modal-dlg .modal-dlg-footer {
        margin-top: 10px;
    }

    .modal-dlg .dlgbtn {
        width: 100px;
        height: 28px;
        padding: 0 5px 0 5px;
        color: white;
        background: #CCCCCC;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    /*青色ヘッダーのダイアログスタイル*/
    .modal-dlg.ui-dialog.modal-dlg-blueStyle {
        border-radius: 0;
    }

        .modal-dlg.ui-dialog.modal-dlg-blueStyle .ui-dialog-titlebar {
            background: #657f8e;
            border: 1px solid #4f6a79;
        }

        .modal-dlg.ui-dialog.modal-dlg-blueStyle .ui-dialog-title {
            color: #ffffff;
        }

        .modal-dlg.ui-dialog.modal-dlg-blueStyle .ui-dialog-content {
            border: 1px solid #4f6a79;
            border-top: none;
        }


/*文字列が指定幅を超えていれば...で表示する*/
.str-omission {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*画面*/
.main-body {
    min-height: 680px;
    min-width: 1150px;
    height: 100%;
    width: 100%;
    padding: 15px;
}
    .main-body.master-rpt-main-body {
        max-width: 1150px;
    }
    .main-body.report-main-body {
        max-width: 1300px;
    }

/*画面(外枠)*/
.outer-frame {
    height: 100%;
    width: 100%;
    border-radius: 3px;
    color: #455A64;
    background-color: rgba(255,255,255,0.2);
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2), 0px 6px 20px 0px rgba(0,0,0,0.19);
    padding: 10px;
    cursor: default;
}

/*画面(タイトル)*/
.top-title {
    font-size: 18px;
    padding-bottom: 5px;
    padding-top: 5px;
    min-width: 1100px;
}

.regist_block_color {
    background-color: #f0f3f5;
}

/*ボタン右寄せ*/
.btn-right-block {
    float: right;
    text-align: right;
    padding: 3px 0px 3px 0px;
}

.btn-center-block {
    text-align: center;
    padding: 3px 0px 3px 0px;
}


/*igGrid CSS上書き*/
.ui-iggrid th, .ui-iggrid th.ui-state-default, .ui-iggrid-headertable {
    border-right: 1px solid #4f6a79;
    border-bottom: 1px solid #4f6a79;
    background: #657f8e !important;
}

.ui-iggrid td.ui-state-hover {
    background: #c7e4ea !important;
    color: #455a64 !important;
}

.ui-iggrid tbody td {
    border-right: 1px solid #d2dae2;
    border-bottom: 1px solid #d2dae2;
    color: #455a64;
}

.ui-iggrid tr.ui-ig-altrecord {
    background-color: #eaeff5;
    color: #455a64;
}

.ui-iggrid .ui-ig-altrecord td.ui-state-active, .ui-iggrid td.ui-state-active {
    color: #364d5a;
    outline: 0;
    border: 1px solid transparent;
}

.ui-iggrid-headertable {
    background-color: transparent;
}

.ui-iggrid table td, .ui-iggrid table th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.ui-widget-header {
    background: #657e8e;
}

.ui-iggrid-fixedcontainer-left {
    border-right: 1px solid #4f6a79 !important;
}


/*igGrid(階層) CSS上書き*/
.ui-iggrid table tbody td.ui-iggrid-expandcolumn,
.ui-iggrid tr .ui-icon.ui-iggrid-expandbutton {
    cursor: pointer;
}

td.ui-iggrid-childarea,
.ui-ig-altrecord + tr > td.ui-iggrid-childarea {
    background-color: #e2e2e2;
}

.ui-iggrid td.ui-iggrid-childarea {
    padding-left: 29px;
}

.ui-iggrid-childarea .ui-iggrid-scrolldiv {
    border-bottom: none !important;
}

.ui-icon.ui-icon-triangle-1-se {
    visibility: hidden;
}


/*igCombo CSS上書き*/
.ui-igcombo {
    /*border: 1px solid #9db0bb !important;*/
}

/*.ui-igcombo-button {
    background-color: #ffffff !important;
    border: 0px solid #ffffff !important;
}*/

.ui-igcombo-field {
    background-color: #ffffff !important;
    color: #364d5a;
    font-size: 14px !important;
    padding: 2px 5px 0 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ui-igcombo-dropdown {
    -webkit-box-shadow: 1px 2px 2px 0px rgba(0,0,0,0.2);
    box-shadow: 1px 2px 2px 0px rgba(0,0,0,0.2);
}

.ui-igcombo-listitemholder li.ui-state-default {
    color: #364d5a;
    background-color: white;
    padding: 3px 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*.ui-igcombo-buttonicon {
    color: #667f8e !important;
}*/

/*.ui-igcombo.ui-state-active .ui-igcombo-button {
    background-color: #ffffff;
    border: 0px solid #ffffff;
    color: #fff;
}*/

/*.ui-igcombo-button.ui-state-hover {
    border: 0px solid #ffffff;
    color: #fff;
}*/

/*.ui-igcombo.ui-state-hover {
    border-color: #444;
}*/

.ui-igcombo-listitemholder li.ui-state-hover {
    border: 1px solid transparent;
    background-color: #cbe7ef;
    color: #364d5a !important;
}

.ui-igcombo-listitemholder li.ui-state-active {
    border: 1px solid transparent;
    background-color: #a2cfda;
    color: #364d5a;
}

/*igCombo CSS上書き 2019/07/25更新*/
.ui-igcombo.ui-widget.ui-state-default {
    /*border-radius: 5px;*/
    background-color: #fff;
}

    .ui-igcombo.ui-widget.ui-state-default.ui-state-hover, .ui-igcombo.ui-widget.ui-state-default.ui-state-hover.ui-state-active {
        border-color: #64B5F6;
    }

        .ui-igcombo.ui-widget.ui-state-default.ui-state-hover .ui-igcombo-button, .ui-igcombo.ui-widget.ui-state-default.ui-state-hover.ui-state-active .ui-igcombo-button {
            background-color: #E3F2FD;
            border-color: #64B5F6;
        }

    .ui-igcombo.ui-widget.ui-state-default.ui-state-active {
        border-color: #da3c41;
    }

        .ui-igcombo.ui-widget.ui-state-default.ui-state-active .ui-igcombo-button {
            background-color: #fedcdc;
            border-color: #da3c41;
        }

        .ui-igcombo.ui-widget.ui-state-default.ui-state-active .ui-igcombo-buttonicon {
            color: #888;
        }

    .ui-igcombo.ui-widget.ui-state-default .ui-icon {
        height: 11px !important;
        width: 11px !important;
    }


/*.ui-igcombo-fieldholder {
    border-radius: 4px;
}*/

.ui-igcombo.ui-state-hover {
    border-color: #64B5F6;
}

.ui-igcombo-button.ui-state-default {
    position: static;
    width: 15px;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0;
    border-left: 1px solid #bcbcbc;
    /*border-radius: 0 4px 4px 0;*/
    background-color: #fff;
}

    .ui-igcombo-button.ui-state-default.ui-state-hover {
        border-color: #64B5F6;
        background-color: #E3F2FD;
    }

        .ui-igcombo-button.ui-state-default.ui-state-hover .ui-igcombo-buttonicon {
            color: #888;
        }


.ui-igcombo-buttonicon {
    position: static;
    top: auto;
    margin-top: 0;
}


/* ig-edit */
.ui-igedit-input {
    color: #364d5a;
}

/*ig-edit CSS上書き 2019/07/26更新*/
.ui-igedit.ui-igedit-container {
    border-color: #bcbcbc;
    border-radius: 5px;
}

    .ui-igedit.ui-igedit-container.ui-state-hover, .ui-igedit.ui-igedit-container.ui-state-hover.ui-state-focus {
        border-color: #64B5F6;
    }

    .ui-igedit.ui-igedit-container.ui-state-focus {
        border-color: #da3c41;
    }

.ui-igeditor-input-container {
    border-radius: 5px;
}

.ui-igedit-input {
    padding: 2px 5px 0 5px;
}


/*チェックボックス*/
.fld-checkbox {
    display: none;
}

    .fld-checkbox + .icon-checkbox {
        cursor: pointer;
        font-size: 20px;
        color: #CCCCCC;
    }

    .fld-checkbox:checked + .icon-checkbox, .fld-checkbox.checked + .icon-checkbox {
        color: #2c77b0;
    }

.icon-edit {
    /*cursor: pointer;*/
    font-size: 16px;
    color: #53656f;
    margin: 0px 5px 0px 5px;
}


/*スクロールバー*/
/*igGrid*/
/*.ui-iggrid-scrolldiv::-webkit-scrollbar {
    width: 17px;
}

    .ui-iggrid-scrolldiv::-webkit-scrollbar:horizontal {
        height: 17px;
    }

.ui-iggrid-scrolldiv::-webkit-scrollbar-track {
    background: #fff;
    width: 15px;
}

.ui-iggrid-scrolldiv::-webkit-scrollbar-thumb {
    background: #b1bec5;
    border-radius: 20px;
    border: 2px solid #fff;
}

.ui-iggrid-scrolldiv::-webkit-scrollbar-corner {
    background: #b1bec5;
}

.ui-iggrid-scrolldiv {
    background-color: #889fad1f !important;
    scrollbar-face-color: #b1bec5;
    scrollbar-shadow-color: #ffffff;
    scrollbar-arrow-color: #657f8e;
}*/

/*igCombo*/
.ui-igcombo-list {
    background-color: #f3f3f3 !important;
    scrollbar-face-color: #b1bec5;
    scrollbar-shadow-color: #ffffff;
    scrollbar-arrow-color: #657f8e;
}

    .ui-igcombo-list::-webkit-scrollbar {
        width: 15px;
    }

        .ui-igcombo-list::-webkit-scrollbar:horizontal {
            height: 17px;
        }

    .ui-igcombo-list::-webkit-scrollbar-track {
        background: #fff;
        width: 15px;
        /*border-radius:5px;*/
    }

    .ui-igcombo-list::-webkit-scrollbar-thumb {
        background: #b1bec5;
        /*border-radius: 20px;*/
        /*border: 2px solid #fff;*/
    }

    .ui-igcombo-list::-webkit-scrollbar-corner {
        background: #b1bec5;
    }



/*ダイアログ表示中のオーバーレイの色を変更する*/
.ui-widget-overlay {
    background: #000;
    opacity: 0.4;
}

.common-cursor-pointer {
    cursor: pointer;
}


/* 入力チェック吹き出し */
.validata-popup {
    display: none;
    position: absolute;
    z-index: 9999;
    padding: 6px 5px;
    color: #FFFFFF;
    background-color: #de364b;
    border-radius: 4px;
    width: 100px;
    height: auto;
    font-size: 11px;
    box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.3);
    cursor: default !important;
}

.validata-tri {
    width: 0px;
    height: 0px;
    content: "";
    z-index: 9999;
    display: block;
    position: absolute;
    left: -21px;
    top: 9px;
    border: solid transparent;
    border-right-color: #de364b;
    border-width: 6px 12px;
    pointer-events: none;
}

::-webkit-input-placeholder {
    text-align: left;
    color: #ccc;
}

::-moz-placeholder {
    text-align: left;
    color: #ccc;
}

:-ms-input-placeholder {
    text-align: left;
    color: #ccc;
}

::-ms-input-placeholder {
    text-align: left;
    color: #ccc;
}

::placeholder {
    text-align: left;
    color: #ccc;
}


.common-dialog-rightup-name {
    height: 100%;
    color: #fff;
    background-color: #657f8e;
    width: 128px !important;
    border-radius: 0 0 0 0;
    padding: 0 0 0 8px;
    border: 1px solid #4f6a79;
    margin-right: 5px;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.common-dialog-leftup-value {
    height: 100%;
    width: calc(100% - 133px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 5px;
    border-radius: 0 0 0 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    margin-right: 5px;
}

.common-dialog-rightup-block {
    height: 30px;
    width: 100%;
    margin: 5px 0 5px 0;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
}


.common-flex-div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

input::-ms-clear {
    display: none;
}