@use '../global/globalCssVariables.module.scss' as global;
.keyValueBox-cont {
    overflow-y: scroll;
    width: 100%;
    height: 100%;
    background-color: global.$white;
    border: 1px solid global.$medium-gray;
    border-radius: global.$border-radius;
    box-sizing: border-box;
    display: inline-block;
    cursor: default;
    .imageBox-cont img {
        width: auto;
    }
}
$header-height: 30px;
.keyValueBox-tbody {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow-y: scroll;
}
.keyValueBox-key {
    display: inline-block;
    height: 100%;
    width: 50%;
    text-align: center;
}
.keyValueBox-fields {
    display: inline-block;
    height: 100%;
    width: 50%;
    text-align: center;
}

.keyValueBox-table {
    position: absolute;
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}
.keyValueBox-td-key {
    display: inline-block;
    height: 30px;
}
.keyValueBox-td-value {
    display: inline-block;
    height: 30px;
}
.keyValueBox-valueRow {
    width: 100%;
    height: 30px;
    display: inline-block;
}
.keyValueBox-header {
    width: 100%;
    position: relative;
    display: inline-block;
    background: global.$medium-gray;
    color: global.$white;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    height: $header-height;
    padding-top: 4px;
    th {
        font-weight: normal;
        &:first-child {
            border-right: 1px solid global.$white;
        }
    }
}

.keyValueBox-evenRow {
    position: relative;
    display: flex;
    width: 100%;
    height: $header-height;
    background: global.$white;
    .formattedTextBox-cont {
        background: global.$white;
    }
}
.keyValueBox-cont {
    .collectionfreeformview-overlay {
        position: relative;
    }
}
.keyValueBox-dividerDraggerThumb {
    position: relative;
    width: 4px;
    float: left;
    height: 30px;
    width: 5px;
    z-index: 20;
    right: 0px;
    top: 0px;
    border-radius: 0px;
    background: black;
    pointer-events: all;
}
.keyValueBox-dividerDragger {
    position: relative;
    width: 100%;
    float: left;
    height: 37px;
    z-index: 20;
    right: 0px;
    top: 0px;
    background: transparent;
    pointer-events: none;
}

.keyValueBox-oddRow {
    position: relative;
    display: flex;
    width: 100%;
    height: 30px;
    background: global.$light-gray;
    .formattedTextBox-cont {
        background: global.$light-gray;
    }
}