.as-table-of-text-input-wrapper {
    border: 1px solid #dddddd;
}

.as-table-of-text-input-content-ctn {
    overflow: auto;
    padding-bottom: 10px;
}


.as-table-of-text-input {
    width: 100%;
    border-collapse: collapse;
    color: black;
    font-family: 'Aptos Narrow', Calibri, sans-serif, 'Mongolian Baiti', 'Microsoft Yi Baiti', 'Javanese Text', 'Yu Gothic';
    font-size: 11pt;
}

.as-table-of-text-input-wrapper.as-size-a4 {
    min-width: min(460pt, calc(100vw - 200px));
    max-width: calc(100vw - 200px);
}


.as-table-of-text-input-wrapper.as-size-a3 {
    min-width: min(850pt, calc(100vw - 200px));
    max-width: calc(100vw - 200px);
}

/*.as-table-of-text-input-wrapper.as-size-a4 .as-table-of-text-input {*/
/*    width: 445pt;*/
/*}*/

/*.as-table-of-text-input-wrapper.as-size-a3 .as-table-of-text-input {*/
/*    width: 841pt;*/
/*}*/

.as-table-of-text-input pre {
    font: inherit;
    line-height: 1.75;
}

.as-table-of-text-input > thead {
    background-color: rgb(240, 240, 240);
}

.as-table-of-text-input thead th:first-child{
    color: rgb(224, 224, 224);
}

.as-table-of-text-input > thead th {
    border: 1px solid rgba(224, 224, 224);
    color: rgba(106, 106, 106);
    font-family: "Segoe UI", Arial, sans-serif;
}

.as-table-of-text-input.as-inline {
    display: inline-table;
}

.as-table-of-text-input-cell {
    vertical-align: top;
    padding: 0px 5px;
    border: 1px solid rgb(224, 224, 224);
    position: relative;
}

.as-table-of-text-input-cell.as-focus::before {
    pointer-events: none;
    content: "";
    position: absolute;
    border: 2px solid #76a0cd;
    left: -1px;
    right: -1px;
    top: -1px;
    bottom: -1px;
}

.as-table-of-text-input-wrapper.as-focus .as-table-of-text-input-cell.as-focus::before {
    border-color: var(--variant-color-primary);
}

.as-table-of-text-input-cell .as-preinput {
    outline: none;
    display: block;
}

.as-table-of-text-input-cell.as-bold {
    font-weight: bold;
}

.as-table-of-text-input-cell.as-italic {
    font-style: italic;
}

.as-table-of-text-input-tool {
    background-color: #f8f8f8;
    font-size: 14px;
    /*-webkit-box-shadow: 2px 2px 9px 0px rgba(20, 20, 20, 1);*/
    /*-moz-box-shadow: 2px 2px 9px 0px rgba(20, 20, 20, 1);*/
    /*box-shadow: 2px 2px 9px 0px rgba(20, 20, 20, 1);*/
    /*border-radius: 4px;*/
    padding: 3px;
    border-bottom: 1px solid #dddddd;
}

.as-table-of-text-input-tool > button,
.as-table-of-text-input-tool-group > button {
    height: 30px;
    width: 30px;
    vertical-align: middle;
}


.as-table-of-text-input-tool-group {
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
}

.as-table-of-text-input-tool-group:not(:last-child) {
    border-right: 1px solid #dddddd;
}


.as-table-of-text-input-tool  button.as-checked {
    color: #2977ff;
    /*background-color: rgb(240, 247, 255);*/
    box-shadow: inset gray 0px 0px 4px -2px;
}

.as-tei-idx-cell {
    border: 1px solid rgb(224, 224, 224);
    background-color: rgb(240, 240, 240);
    width: 25px;
    min-width: 25px;
    max-width: 25px;
    text-align: right;
    padding-right: 5px;
    color: rgba(106, 106, 106);
}

.as-tei-idx-cell::before{
    content: attr(data-idx);
}