/*table{*/
/*    border-collapse: collapse;*/
/*    border:1px solid #aaa;*/
/*}*/


th,td{
    /*border:1px solid #aaa;*/
    position :relative;
}
.active-cell{
    z-index: 20!important;/*クリックしたtdを最前面に配置*/
}
.form-wrapper{
    border:1px solid #aaa;
    padding :15px;
    margin-top:20px;
}

.heading{
    font-size: 14px;
    font-weight: bold;
}
.inline{
    background: #aaa;
    margin-top:30px;
    margin-bottom:0;
}
.popup-wrapper{
    position:absolute;
    z-index: 2;
    top:3px;
    left:-3px;
    background: #fff;
    border:2px solid #aaa;
    border-radius: 4px;
    box-shadow: 3px 3px 5px rgba(170, 170, 170,0.8);
    padding:0px 70px 0px 5px;
}
.popup{
    line-height:2rem;
    outline: none;
    background: #fff;
    font-size:16px;
    border:none;
    height:2.3rem;
}
.popup-wrapper select{
    height: 2.3rem;
    line-height: 2rem;
}
.popup-wrapper button.inline-edit-btn {
    border:none;
    border-radius:4px;
    position: absolute;
    z-index: 1;
    width:27px;
    height:27px;
    margin:auto;
    top: 0;
    bottom:0;
}
.popup-wrapper button.inline-edit-btn i {
    color:#fff;
    border:none;
    border-radius:4px;
    position: absolute;
    top: 50%;
    laft: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.popup-wrapper button.check-btn{
    right: 35px;
    background: #007bff;
}

.popup-wrapper button.close-btn{
    right: 5px;
    background: #dc3545;
}

.popup-wrapper button.check-btn:active,.popup-wrapper button.close-btn:active{
    outline: none;
}

.popup-wrapper select{
    border :none;
}

.editable-inner{
    border-bottom: 1px dashed #0e90d2;
    cursor :pointer;
}
.editable-inner input[type="checkbox"]:checked+label {
    background: #31A9EE;/* マウス選択時の背景色を指定する */
    color: #ffffff; /* マウス選択時のフォント色を指定する */
}

/*エラーメッセージ*/
.ajax-error-message-wrapper{
    position :sticky;
    left :0;
    margin: 15px 0 0 0;
}

.ajax-error-message-wrapper.active .ajax-error-message{
    color:#721c24;
    background-color: #f8d7da;
    padding:15px 45px;
    text-align: left;
    display: list-item;
    list-style-type: disc;
    list-style-position: inside;
    border-radius: 0.25rem;

}
.ajax-error-message-wrapper.active .ajax-error-message::marker
.ajax-error-message-wrapper.active .ajax-error-message-inner span::marker{
    display: inline-block;
}

.ajax-error-message-wrapper.active .ajax-error-message-inner{
    color:#721c24;
    background-color: #f8d7da;
    padding:15px 45px;
    text-align: left;
    border-radius: 0.25rem;
}
.ajax-error-message-wrapper.active .ajax-error-message-inner span{

    display: list-item;
    list-style-type: disc;
    list-style-position: inside;
}
/*チェックボックス*/

.editable-inner input[type="checkbox"],
.with-checkbox input[type="checkbox"]{
    display :none;
}

.editable-inner .checkbox-parts,
.with-checkbox .checkbox-parts{
    position:relative;
}

.editable-inner .mode-wrap .checkbox-parts{
    font-size: 14px;
    padding: 8px 5px;
    width: 80px;
}

.editable-inner .checkbox-parts::before,
.with-checkbox .checkbox-parts::before{
    content: "";
    display: block;
    position: absolute;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 1.3rem;
    height: 1.3rem;
    border: 1px solid #ced4da;
    border-radius: 3px;
}
.editable-inner .checkbox-parts::before{
    top: 5px;
    left: 50%;
}

.with-checkbox .checkbox-parts::before{
    top: -16px;
    left: 50%;
}


.editable-inner .checkbox-parts:hover::before,
.with-checkbox .checkbox-parts:hover::before{
    transition :0.4s;
    background :#fff;
}


.editable-inner label,
.with-checkbox label{
    margin :0;
}



.editable-inner input:checked + .checkbox-parts::after,
.with-checkbox input:checked + .checkbox-parts::after{
    content: "";
    display: block;
    position: absolute;
    width: 7px;
    height: 14px;
    transform: rotate(40deg);
    border-bottom: 3px solid #000;
    border-right: 3px solid #000;
}

.editable-inner input:checked + .checkbox-parts::after{
    top: 7px;
    left: 1px;
}

.with-checkbox input:checked + .checkbox-parts::after {
    top: -14px;
    left: -4px;
}