/* SR Grid */
:root {
     --grid-background: #ffffff;
     --grid-color: #333;
     --grid-active: #000000;
     --grid-disabled: #cecece;

     --title-background: #00587a;
     --title-color: #ffffff;
     --title-fontsize: 13px;

     --grid-header-background: #00587a;
     --grid-header-color: #ffffff;
     --grid-header-highlight: #1892ff;

     --row-default: #ffffff;
     --row-offset: #f5f5f5;
     --row-highlight: #1892ff;
     --row-highlight-color: #ffffff;
     --row-hover: #dcdcdc;
     --row-hover-color: #666666;

     --btn-width: 24px;
     --btn-height: 24px;
     --btn-normal: #004661;
     --btn-color: #ffffff;
     --btn-delete-color: #7c2300;
     --btn-border-color: #666666;
     --btn-border-radius: 2px;
     --btn-delete-image: url("delete.png");
     --btn-create-image: url("create.png");
     --btn-edit-image: url("edit.png");
     --btn-save-image: url("save.png");
     --btn-list-image: url("display_btn.png");
     --btn-export-image: url("export_btn.png");
     --btn-refresh-image: url("refresh_btn.png");
     --btn-fontsize: 12px;

     --grid-border-color: #666666;
     --grid-border-width: 1px;
     --grid-border: 1px solid #666666;
     --grid-border-radius: 4px;

     --head-border-color: #9a9a9a;

     --filter-submit: url("filter_submit.png");
     --filter-reset: url("filter_reset.png");
     --filter-highlight: #a4effc;

     --scroll-track: #f1f1f1;
     --scroll-bar: #c1c1c1;
     --scroll-bar-hover: #a8a8a8;
     --scroll-bar-active: #787878;
     --scroll-hover: #d2d2d2;
     --scroll-hover: #d2d2d2;
     --scroll-btn: #f1f1f1;
     --scroll-btn-hover: #a8a8a8;
     --scroll-btn-active: #787878;
     --scroll-up: url("scroll_up.png");
     --scroll-dn: url("scroll_dn.png");
     --scroll-up-active: url("scroll_up_active.png");
     --scroll-dn-active: url("scroll_dn_active.png");

     --scroll-width: 15px;
     --scroll-height: 15px;

     --row-height: 30px;
     --header-height: 30px;

     --grid-width: "auto";
}
.srGrid {
     overflow-x: hidden;
     overflow-y: hidden;
     display: block;
     white-space: nowrap;
     width: var(--grid-width);
     position: relative;
     transition: opacity 0.3s ease;
     opacity: 0;
     height: auto;
     background: var(--grid-background);
     color: var(--grid-color);
}
.srGrid.srGrid-active {
     opacity: 1;
}
.srGrid input,
.srGrid select,
.srGrid textarea {
     outline: none;
}
.srGrid-content {
     display: flex;
     flex-direction:column;
     justify-content:start;
     align-items: start;
     overflow-x: hidden;
     overflow-y: auto;
     white-space: nowrap;
     position: relative;
     border-style: solid;
     border-color: var(--grid-border-color);
     border-radius: 0;
     border-collapse: collapse;
     border-width: var(--grid-border-width);
     border-left-width: 0;
     border-right-width: 0;
     border-top-width: 0;
     opacity: 0;
     transition: opacity 0.3s ease;
}
.srGrid-content.srGrid-active {
     opacity: 1;
}
.srGrid .srGrid-content {
     height: auto;
}
.srGrid-page {
     display: flex;
     flex-direction: column;
     gap:0;
     flex-grow:0;
     width: 100%;
     height: auto;
     border: 0;
     flex-shrink:0;
     flex-basis:auto;
}
.srGrid-content-message {
     width: 100%;
     display: block;
     text-align: center;
}
.srGrid-title,
.srGrid-head,
.srGrid-notes {
     position: relative;
     display: block;
     width: 100%;
     line-height: var(--header-height);
     height: var(--header-height);
     text-align: left;
     white-space: nowrap;
     border-width: var(--grid-border-width);
     border-style: solid;
     border-color: var(--head-border-color);
     border-radius: 0;
     border-collapse: collapse;
     border-top-width: 0;
     border-left-width: 0;
     border-right-width: 0;
     background: var(--grid-header-background);
     color: var(--grid-header-color);
     font-weight: bold;
}
.srGrid-notes {
     padding: 0 5px;
     text-align: left;
     font-weight: bold;
}
.srGrid-filters {
     position: relative;
     display: block;
     width: 100%;
     line-height: 24px;
     min-height: 24px;
     max-height: 24px;
     text-align: left;
     white-space: nowrap;
     border-width: var(--grid-border-width);
     border-style: solid;
     border-color: var(--grid-border-color);
     border-radius: 0;
     border-collapse: collapse;
     border-top-width: 0;
     border-left-width: 0;
     border-right-width: 0;
}
.srGrid-row,
.srGrid-full {
     position: relative;
     display: block;
     width: 100%;
     line-height: var(--row-height);
     min-height: var(--row-height);
     text-align: left;
     white-space: nowrap;
     border-width: var(--grid-border-width);
     border-style: solid;
     border-color: var(--grid-border-color);
     border-radius: 0;
     border-collapse: collapse;
     border-top-width: 0;
     border-left-width: 0;
     border-right-width: 0;
     box-sizing: border-box;
     flex-shrink:0;
     flex-grow:0;
     flex-basis:auto;
}
.srGrid-full {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: 100%;
     border-width: 0;
     text-align: center;
}

.srGrid-head-highlight {
     background: var(--grid-header-highlight);
}

.srGrid-display-column {
     display: inline-flex;
     flex-direction: row;
     align-items: center;
     justify-content: start;
     line-height: inherit;
     box-sizing: border-box;
     white-space: normal;
     min-width: 24px;
     flex-shrink: 0;
     flex-grow: 0;
     flex-basis: auto;
     border-radius: 0;
     border-collapse: collapse;
     vertical-align: top;
     min-height: 24px;
     background-repeat: no-repeat;
     background-size: 100%;
     background-position: center;
     background-color: transparent;
     transition: all 1s ease;
}
.srGrid-bordered {     
     border: 1px solid var(--grid-border-color);
}
.srGrid-display-check {
     background-image: url("srGrid/display_on.png");
     /* border-width: 1px; */
     min-width: 20px;
     background-size: contain;
}

.srGrid-matches {
     width: 400px;
}
.srGrid-match {
     background-image: url("srGrid/match_empty.png");
     cursor: pointer;
     background-size: 70%;
}
.srGrid-match.srGrid-match-empty {
     opacity: 0.5;
     cursor: inherit;
}
.srGrid-match.srGrid-match-filled {
     background-image: url("srGrid/match_filled.png");
}
.srGrid-match.srGrid-match-clear {
     background-image: url("srGrid/match_clear.png");
}
.srGrid-column {
     display: inline-flex;
     flex-direction: row;
     flex-wrap: wrap;
     align-items: start;
     gap: 4px;
     justify-content: flex-start;
     padding-left: 4px;
     padding-right: 4px;
     line-height: inherit;
     box-sizing: border-box;
     white-space: normal;
     border-width: var(--grid-border-width);
     border-style: solid;
     border-color: var(--grid-border-color);
     border-radius: 0;
     border-collapse: collapse;
     border-right-width: 0;
     border-top-width: 0;
     border-bottom-width: 0;
     vertical-align: top;
}
.srGrid-column-center {
     display: inline-flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
}
.srGrid-row-center {
     display: inline-flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     gap: 4px;
}
.srGrid-head .srGrid-column,
.srGrid-filters .srGrid-column {
     justify-content: center;
     align-items: center;
     gap: 4px;
     display: inline-block;
     overflow: hidden;
     white-space: nowrap;
     text-align: center;
     height: 100%;
     font-size: 12px;
     overflow: hidden;
     line-height: inherit;
     font-weight: bold;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     border-color: var(--head-border-color);
}
.srGrid-head .srGrid-column {
     height: var(--header-height);
}
.srGrid-head .srGrid-column.srGrid-control,
.srGrid-control,
.srGrid-head .srGrid-column.sr-talignl {
     text-align: left;
}
.srGrid-head .srGrid-column.sr-talignr {
     text-align: right;
}
.srGrid-column:first-child {
     border-left-width: 0;
}
.srGrid-column:empty:before {
     content: "\00a0 ";
     text-align: center;
}

.srGrid-grouped {
     background-color: rgba(0, 0, 0, 0.1);
}

.srGrid-row {
     background: var(--row-default);
     font-weight: normal;
     font-size: 12px;
}
.srGrid-row:nth-child(even) {
     background-color: var(--row-offset);
}

/* Cover */
.srGrid-cover {
     width: 100%;
     height: calc(100% - 30px);
     position: absolute;
     left: 0;
     right: 0;
     top: 30px;
     bottom: auto;
     background-color: rgb(0, 0, 0);
     pointer-events: all;
     opacity: 0.25;
     transition: all 0.5s ease;
     z-index: 1;
}
.srGrid-cover.srGrid-cover-hidden {
     pointer-events: none;
     opacity: 0;
}

/* Display Edit Box */
.srGrid-display-button {
     display: inline-block;
     border: 1px solid transparent;
     cursor: pointer;
     height: 24px;
     line-height: 24px;
}
.srGrid-display-button:hover {
     border-bottom: 1px solid #333;
}

.srGrid-display,
.srGrid-matches {
     position: absolute;
     left: 0;
     right: auto;
     top: 30px;
     bottom: auto;
     min-width: 400px;
     width: 400px;
     height: calc(100% - 31px);
     background: var(--grid-background);
     color: var(--grid-color);
     border-right-width: 1px;
     border-right-style: solid;
     border-collapse: collapse;
     border-color: var(--grid-border-color);
     transition: left 0.5s ease;
     z-index: 2;
}
.srGrid-display.srGrid-display-closed,
.srGrid-matches.srGrid-matches-closed {
     left: -400px;
}
.srGrid-display-content,
.srGrid-match-content {
     overflow-y: auto;
     height: calc(100% - 65px);
     margin: 2px;
     /* border-top-width: 1px; */
     border-color: var(--grid-border-color);
     padding-bottom: 5px;
}
.srGrid-display-check.srGrid-display-check-no {
     background-color: transparent;
     background-image: url("srGrid/display_off.png");
}
.srGrid-display-check.srGrid-display-check-req {
     opacity: 0.3;
     cursor: auto;
}
.srGrid-display-row,
.srGrid-match-row {
     position: relative;
     display: block;
     line-height: 30px;
     min-height: 30px;
     height: 30px;
     max-height: 30px;
     text-align: left;
     white-space: nowrap;
     border-width: 1px;
     border-style: solid;
     border-color: var(--grid-border-color);
     border-top:0;
     border-left:0;
     border-right:0;
     border-radius: 2;
     border-color:rgba(0,0,0,2.5);
     border-collapse: collapse;
     margin: 4px;
}
.srGrid-display-row {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     gap: 4px;
     padding: 0 4px 4px 4px;
     box-sizing: border-box;
     white-space: normal;
}
.srGrid-match-content > .srGrid-display-row:nth-child(odd), .srGrid-display-content > .srGrid-display-row:nth-child(odd) {
     background-color: var(--row-offset);
}
.srGrid-match-content > .srGrid-display-row, .srGrid-display-content > .srGrid-display-row {border:0;padding:2px 4px;}

.srGrid-button {
     border-radius: var(--btn-border-radius);
     border-width: 1px;
     border-style: solid;
     border-color: var(--btn-border-color);
     background-repeat: no-repeat;
     background-position: center;
     background-size: 90%;
     display: inline-block;
     margin-top: 2px;
     padding: 0 5px;
     vertical-align: top;
     line-height: var(--btn-height);
     min-width: var(--btn-width);
     width: auto;
     height: var(--btn-height);
     font-size: var(--btn-fontsize);
     background-color: var(--btn-normal);
     cursor: pointer;
}
.srGrid-title-button {
     display: inline-block;
     width: 30px;
     height: 30px;
     border: 0;
     position: relative;
     background-color: transparent;
     background-position: center;
     background-size: 65%;
     cursor: pointer;
}
.srGrid-button-create {
     background-image: var(--btn-create-image);
     background-repeat: no-repeat;
     background-size: 80%;
     background-position: center center;
}
.srGrid-button-edit {
     background-image: var(--btn-edit-image);
     background-repeat: no-repeat;
     background-size: 80%;
     background-position: center center;
}
.srGrid-button-save {
     background-image: var(--btn-save-image);
     background-repeat: no-repeat;
     background-size: 80%;
     background-position: center center;
}
.srGrid-button-delete {
     background-color: var(--btn-delete-color);
     background-image: var(--btn-delete-image);
     background-repeat: no-repeat;
     background-size: 80%;
     background-position: center center;
}
.srGrid-button-import {
     background-image: url("import.png");
}
.srGrid-button-export {
     background-image: url("export.png");
}
.srGrid-button-refresh {
     background-image: url("refresh.png");
}
.srGrid-button-display,
.srGrid-button-settings {
     background-image: url("settings.png");
}
.srGrid-button-back {
     background-image: url("goback_black.png");
}
.srGrid-button:hover,
.srGrid-button:active,
.srGrid-title-button:hover,
.srGrid-title-button:active {
     transform: scale(110%);
}

.srGrid-controls {
     line-height: var(--row-height);
     width: 100%;
     display: block;
     text-align: left;
     white-space: nowrap;
     padding: 2px;
     background-color: transparent;
     color: inherit;
     border-width: 0;
     border-style: solid;
     border-color: var(--grid-border-color);
     border-radius: 0;
     border-collapse: collapse;
}
/* srGrid SOrt */
.srGrid-sort {
     width: 10px;
     height: calc(100% - 4px);
     position: relative;
     float: left;
     margin: 2px 1px; /* position:absolute;left:2px;top:0;bottom:0;right:auto;height:100%; */
     background-repeat: no-repeat;
     background-size: 70%;
     background-position: center;
     background-color: transparent;
     background-image: url("srGrid/sort_none.png");
}
.srGrid-asc {
     background-image: url("srGrid/sort_asc.png");
}
.srGrid-dsc {
     background-image: url("srGrid/sort_desc.png");
}

.srGrid-group {
     background-size: 100%;
     background-image: url("srGrid/group_no.png");
     border: 0;
     cursor: pointer;
}
.srGrid-group.srGrid-group-active {
     background-image: url("srGrid/group_yes.png");
}

.srGrid-position {
     cursor: pointer;
     background-image: url("srGrid/move_updn.png");
     background-size: 50%;
}
.srGrid-position-selected {
     background: #fff;
     color: #333;
     opacity: 0.5;
}
.srGrid-position-hint {
     background: #aaffff;
     color: #333;
}
.srGrid-position-active {
     background: #aaffaa;
     color: #333;
}
.srGrid-position-hint div,
.srGrid-position-active div {
     pointer-events: none;
}
.srGrid-position-reset {
     background-image: url("srGrid/move_reset.png");
}

/* Title */
/* Title Right */

.srGrid-title {
     background-color: var(--title-background);
     color: var(--title-color);
     padding: 0;
     font-size: var(--title-fontsize);
     overflow: hidden;
     font-weight: bold;
     display: flex;
     flex-direction:row;
     justify-content:start;
     align-items:center;
     gap:8px;
     padding:0 8px;
}
.srGrid-title-controls {
     display:inline-flex;
     flex-direction:row;
     justify-content:start;
     align-items:center;
     width: auto;
     display: inline-flex;
     flex-direction: row;
     justify-content: space-around;
     align-items: center;
     border-right: 1px;
     border-style: solid;
     border-color: var(--head-border-color);
}
.srGrid-title-label {
     color: inherit;
     background: transparent;
     display: inline-flex;
     flex-direction:row;
     align-items:center;
     justify-content:start;
     font-size: inherit;
     width: auto;
     flex-grow:1;
     flex-shrink:0;
     font-weight: bold;
     gap:4px;
}
.srGrid-title-left, .srGrid-title-right {
     display:inline-flex;
     flex-direction:row;
     align-items:center;
     justify-content:start;
     width: auto;
     height:100%;
     gap:8px;
}
/* Counter */
.srGrid-counter {
     line-height: inherit;
     width: auto;
     max-width: 150px;
     font-size: 12px;
     color: inherit;
     text-align: right;
     display: inline-flex;
     justify-content:center;
     align-items:center;
     flex-direction:row;
     padding:0 4px;
     flex-shrink:0;
}

/* srGrid Filter */
.srGrid-filter,
.srGrid-filter:focus {
     display: inline-block;
     min-width: 100px;
     max-width: 100px;
     width: 100px;
     height: inherit;
     border: 0;
     box-shadow: none;
     border-radius: 2px;
     background-color: transparent;
     box-sizing: border-box;
     outline: none;
     border: 0;
}
.srGrid-filter-input {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     line-height: 1005;
     width: 100%;
     height: calc(100% - 4px);
     outline: none;
     border-radius: 2px;
     border-collapse: collapse;
     margin: 2px 0;
     padding: 2px 5px;
     text-align: left;
     color: var(--grid-color) !important;
     background-color: var(--grid-background) !important;
     box-shadow: none !important;
     border-width: 1px;
     border-style: solid;
     border-color: var(--grid-border-color) !important;
}
.srGrid-filter-input:focus,
.srGrid-filter-input:active,
.srGrid-filter-input:required,
.srGrid-filter-input:hover {
     background: #fff;
     color: #333;
     outline: none;
}
.srGrid-filter-input.srGrid-filter-highlight {
     outline: none;
     border-style: solid;
     border-width: 1px;
     background: var(--filter-highlight);
     border-color: var(--grid-border-color);
}
.srGrid-filter-input:required:placeholder-shown {
     background-image: url("filter_submit.png");
     background-position: center right;
     background-repeat: no-repeat;
     background-size: 18px 18px;
     border-width: 1px;
     outline: none;
     border-style: solid;
     border-color: var(--grid-border-color);
}
.srGrid-filter-input:valid {
     background-image: none;
     outline: none;
     border-width: 1px;
     border-style: solid;
     border-color: var(--grid-border-color);
}

.srGrid-fieldFilter {
     background-size: 20px 70%;
     text-align: left;
     color: inherit;
     border-width: 0px !important;
     height: 20px !important;
     line-height: 20px !important;
     outline: none !important;
     background-color: transparent !important;
     color: var(--grid-color) !important;
     box-shadow: none !important;
     box-sizing: border-box;
     font-size: 12px !important;
     margin: 1px auto;
     border-radius: 4px;
     width: calc(100% - 4px) !important;
     padding: 0 15px 0 5px !important;
}

.srGrid-fieldFilter.srGrid-filter-highlight,
.srGrid-fieldFilter:focus,
.srGrid-fieldFilter:focus-visible {
     background-color: var(--filter-highlight);
     outline: none;
}
.srGrid-fieldFilter:required:placeholder-shown {
     background-image: url("filter_submit.png");
     background-position: 99% 50%;
     background-repeat: no-repeat;
     background-size: 16px 16px;
     top: 0;
}
.srGrid-filter-button {
     position: absolute;
     right: 2px;
     width: 20px;
     height: 100%;
     background-size: 70%;
     cursor: pointer;
     background-position: center;
}
.srGrid-filter-submit:hover,
.srGrid-filter-submit:active,
.srGrid-filter-reset:hover,
.srGrid-filter-reset:active {
     border-width: var(--grid-border-width);
     border-style: solid;
     border-color: var(--grid-border-color);
     border-radius: 0;
     border-collapse: collapse;
}
.srGrid-filter-submit {
     background-image: var(--filter-submit);
}
.srGrid-filter-reset {
     background-image: var(--filter-reset);
     position: absolute;
     right: 2px;
     top: 0;
}
.srGrid-fieldfilter-reset {
     background-image: var(--filter-reset);
     position: absolute;
     right: 2px;
     top: 0;
     background-size: 15px 15px;
}

.srGrid-selectall {
     float: left;
     height: 24px;
     line-height: 24px;
     width: auto;
     border-width: 0;
     margin-right: 10px;
     margin-left: 5px;
     cursor: pointer;
}
.srGrid-alpha {
     float: left;
     height: 24px;
     line-height: 24px;
     width: auto;
     border-width: 0;
}
.srGrid-alpha-letter {
     font-size: 12px;
     cursor: pointer;
     height: 18px;
     line-height: 18px;
     width: 17px;
     color: var(--grid-color);
     display: inline-block;
     text-align: center;
     margin-right: 1px;
     margin-top: 3px;
     border-width: 0;
     border-style: solid;
     border-color: var(--grid-border-color);
     border-radius: 0;
     border-collapse: collapse;
}
.srGrid-alpha-letter:hover {
     color: var(--grid-active);
     border-width: 1px;
}
.srGrid-alpha-letter.srGrid-disabled {
     color: var(--grid-disabled);
     border-width: 0;
}

/* srGrid Scroll Bar */
.srGrid-scroll-control {
     overflow: hidden;
}
.srGrid-scroll-track {
     width: var(--scroll-width);
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
     z-index: 1;
     background: var(--scroll-track);
     border-width: var(--grid-border-width);
     border-style: solid;
     border-color: var(--scroll-track);
     border-radius: 0;
     border-collapse: collapse;
     border-top-width: 0;
     border-bottom-width: 0;
     border-right-width: 0;
}
.srGrid-scroll-bar {
     z-index: 1;
     min-height: var(--row-height);
     height: var(--row-height);
     position: absolute;
     right: 1px;
     left: 1px;
     top: var(--scroll-height);
     z-index: 1;
     background: var(--scroll-bar);
     border: none;
}
.srGrid-scroll-bar:hover {
     background: var(--scroll-bar-hover);
}
.srGrid-scroll-bar:active {
     background: var(--scroll-bar-active);
}
.srGrid-scroll-button {
     z-index: 2;
     height: var(--scroll-height);
     position: absolute;
     right: 0;
     left: 0;
     background-color: var(--scroll-btn);
     border-width: var(--grid-border-width);
     border-style: solid;
     border-color: transparent;
     border-radius: 0;
     border-collapse: collapse;
     border-right-width: 0;
     border-left-width: 0;
     border-bottom-width: 0;
     border-top-width: 0;
     background-repeat: no-repeat;
     background-size: 90%;
     background-position: center;
}
.srGrid-scroll-button:hover {
     background-color: var(--scroll-btn-hover);
}
.srGrid-scroll-button:active {
     background-color: var(--scroll-btn-active);
}
.srGrid-scroll-up {
     top: 0;
     background-image: var(--scroll-up);
}
.srGrid-scroll-dn {
     bottom: 0;
     background-image: var(--scroll-dn);
}
.srGrid-scroll-up:active {
     background-image: var(--scroll-up-active);
}
.srGrid-scroll-dn:active {
     background-image: var(--scroll-dn-active);
}

/* srGrid Misc */
.srGrid-row-highlight,
.srGrid-selected,
.srGrid-row.srGrid-selected:nth-child(even) {
     background: var(--row-highlight) !important;
     color: var(--row-highlight-color) !important;
}
.srGrid-row-highlight:nth-child(odd),
.srGrid-row.srGrid-selected:nth-child(odd) {
     opacity: 0.9;
}
.srGrid-row.srGrid-hover:not(.srGrid-selected),
.srGrid-row.srGrid-hover:nth-child(even):not(.srGrid-selected) {
     background: var(--row-hover);
     color: var(--row-hover-color);
}
.srGrid-row.srGrid-hover.srGrid-selected:nth-child(odd) {
     opacity: 0.9;
     color: var(--row-highlight-color);
}
.srGrid-content.srGrid-nocontrol {
     border-bottom-width: 0px;
}
.srGrid-controls.srGrid-bottomcontrol {
     border-top-width: 0px;
     border-bottom-width: 1px;
}
.srGrid-controls.srGrid-midcontrol {
     border-top-width: 1px;
     border-bottom-width: 1px;
}
.srGrid-nowrap {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}
.srGrid-noellipsis {
     text-overflow: clip;
}

/* Message */
.srGrid-message {
     z-index: 1;
     width: auto;
     height: auto;
     min-width: 240px;
     min-height: 100px;
     font-size: 14px;
     font-weight: bold;
     background-color: var(--grid-background);
     color: var(--grid-color);
     border: var(--grid-border);
     border-radius: var(--grid-border-radius);
     position: absolute;
     left: 30px;
     top: 30px;
     text-align: center;
     display: flex;
     justify-content: center;
     flex-direction: column;
}
.srGrid-message-controls {
     width: 100%;
     height: auto;
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     align-items: center;
     margin-top: 16px;
}
.srGrid-message-button {
     width: 100px;
     height: var(--btn-height);
     line-height: var(--btn-height);
     text-align: center;
     background-color: var(--btn-normal);
     color: var(--btn-color);
     border-radius: 2px;
     margin: 0 4px;
     cursor: pointer;
}

.srGrid-row .srGrid-column span {padding:0 4px;}

.srGrid-row .srGrid-column.srGrid-copy::after {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.5);
     text-align: center;
     content: "Copied";
     background: #dcdcdc;
     color: #333;
     font-size: 11px;
}
.sr-talignl {
     text-align: left;
}
.sr-talignc {
     text-align: center;
}
.sr-talignr {
     text-align: right;
}
.sr-bold {
     font-weight: bold;
}
.sr-hide {
     display: none;
     visibility: hidden;
}
.sr-ellipse {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}
.sr-pad0 {
     padding: 0;
}
.sr-mar0 {
     margin: 0;
}

.sr-border {
     border-width: var(--grid-border-width);
     border-color: var(--grid-border-color);
     border-style: solid;
}
.sr-border-none {
     border-width: 0px;
}
.sr-border-top {
     border-top-width: 1px;
}
.sr-border-bottom {
     border-bottom-width: 1px;
}
.sr-border-left {
     border-left-width: 1px;
}
.sr-border-right {
     border-right-width: 1px;
}
.sr-border-all {
     border-width: 1px;
}

.sr-pointer {
     cursor: pointer;
}