/* SR Tools */
.sr-tooltip {
     position: absolute;
     padding: 4px 8px;
     background: var(--content-back);
     color: var(--content-text);
     border: var(--content-border);
     border-radius: var(--content-border-radius);
     font-weight: bold;
     box-shadow: var(--content-shadow);
     z-index: 1000;
}

.srDatePicker {
     width: 100px;
     max-width: 100px;
     text-align: center;
}
#sr-datepicker, #sr-colorpicker, #sr-timepicker, #sr-datalist {
     background:var(--content-back);
     color:var(--content-text); 
     border:var(--content-border);
     border-radius:var(--content-border-radius);
     box-shadow: var(--content-shadow);
}
#sr-datepicker-head,
#sr-colorpicker-title {
     background: var(--content-title-back);
     color: var(--content-title-text);
     font-size: var(--font-size-16);
     font-weight: bold;
}
#sr-datepicker-controls {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     padding: 0 4px;
     height:30px;
}
.sr-datepicker-button,
.sr-timepicker-button,
.sr-colorpicker-button,
.sr-butto,.sr-button,
.sr-colorpicker-button {     
     border-radius: var(--button-radius);
     width: auto;
     height: var(--button-height);
     line-height: var(--button-height);
     max-height: var(--button-height);
     min-width: var(--button-height);
     text-align: center;
     cursor: pointer;
     font-size: var(--font-size-14);
     background-color: var(--button-standard-back);
     color: var(--button-standard-text);
     border: var(--button-standard-border);
     display: inline-flex;
     flex-direction: row;
     justify-content: space-around;
     align-items: center;
     box-shadow: var(--button-shadow);
     font-weight: bold;
}

.srTimePicker {
     width: 70px;
     max-width: 70px;
     text-align: center;
}

/* SR Grid */
.srGrid {
     display: inline-block;
     border-radius: var(--radius);
     border: var(--content-border-internal);
     background-color: var(--content-back);
     color: var(--content-text);
}
.srGrid-content {
     border: 0;
}
.srGrid-title {
     background-color: var(--grid-title-back);
     color: var(--grid-title-color);
     height: var(--grid-row-height);
     line-height: var(--grid-row-height);
}
.srGrid-head,
.srGrid-notes {
     background-color: var(--table-header-back);
     color: var(--table-header-text);
}
.srGrid-title-controls {
     border: 0;
     border-right: 0; 
     display:inline-flex;
     flex-direction:row;
     align-items:center;
     height: var(--grid-row-height);
     justify-content: flex-start;
     gap:8px;     
}

.srGrid-filters {
     height: var(--grid-row-height);
     line-height: var(--grid-row-height);
     min-height: var(--grid-row-height);
}
.srGrid-row,
.srGrid-full {
     line-height: var(--grid-row-height);
     min-height: var(--grid-row-height);
}
.srGrid-head-highlight {
     background: var(--grid-hover-back);
     color: var(--grid-hover-text);
}
.srGrid-asc {
     background-image: url(../icons/base/ascending.svg);
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
}
.srGrid-dsc {
     background-image: url(../icons/base/descending.svg);
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
}

.srGrid-row {
     background-color: transparent;
}
.srGrid-row:nth-child(even) {
     background-color: var(--row-offset-back);
     color: var(--row-offset-text);
}
.srGrid-row.warning {
     background-color: var(--color-warning);
}
.srGrid-row.inactive {
     background-color: var(--color-inactive);
}
.srGrid-row.caution {
     background-color: var(--color-caution);
}
.srGrid-row.highlight {
     background-color: var(--color-highlight);
}
.srGrid-filter-input {
     height:24px;min-height:24px;max-height:24px;
     border: var(--input-border);
     border-radius: var(--input-border-radius);
     background-color: var(--input-back);
     font-size: var(--font-size-14);
     color: var(--input-text);
}
.srGrid-fieldFilter {
     height:23px;
     min-height:23px;
     max-height:23px;
     font-size: var(--font-size-12);
     color: var(--input-text);
     background-color: var(--input-back);
     border:0;
     width:100%;margin:0;padding:0;
}
.srGrid-content {
     border-color: var(--content-border-internal);
}

.sr-tooltip.item-status-good {
     background-color: var(--color-good);
}
.sr-tooltip.item-status-active {
     background-color: var(--color-active);
}
.sr-tooltip.item-status-deleted {
     background-color: var(--color-deleted);
}
.sr-tooltip.item-status-locked {
     background-color: var(--color-locked);
}
.sr-tooltip.item-status-warning {
     background-color: var(--color-warning);
}
.sr-tooltip.item-status-caution {
     background-color: var(--color-caution);
}
.sr-tooltip.item-status-inactive {
     background-color: var(--color-inactive);
}
.sr-tooltip.item-status-highlight {
     background-color: var(--color-highlight);
}

/* SR Datalist */
input[sr-datalist].sr-enabled:not([disabled]),
input[list],
input[list]:hover,
input[list]:focus,
input[list]:active {
     background-image: url(../icons/list-drop.png);
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-position: right center;
     padding-right: 20px;
}
input::-webkit-calendar-picker-indicator {
     display: none !important;
     -webkit-appearance: none;
}
.sr-datalist-option {
     height:30px;min-height:30px;max-height:30px;
     border: 0;
}
.sr-datalist-option:nth-child(even) {
     background-color: var(--row-offset-back);
     border: 0;
}
.sr-datalist-option:hover {
     background-color: var(--hover-back);
     color: var(--hover-text);
     border: 0;
}

.sr-datalist-option.sr-selected {
     background-color: var(--hover-back);
     color: var(--hover-text);
}

.srAttach-button {
     display: inline-flex;
     flex-direction: row;
     align-items: center;
}
.srAttach-button-image {
     width: 100%;
     height: 100%;
     justify-content: center;
     text-align: center;
}

/* Editor */
.ql-toolbar {
     border-top-left-radius: var(--radius);
     border-top-right-radius: var(--radius);
     background-color: var(--input-back);
     color: var(--input-color);
}
.ql-container {
     border-bottom-left-radius: var(--radius);
     border-bottom-right-radius: var(--radius);
}
.ql-formats,
.ql-toolbar,
.ql-picker {
     overflow: unset;
}

.ql-editor {
     background-color: var(--input-back);
     color: var(--input-color);
     font-size: var(--font-size-14);
     line-height: 1;
     padding: 0 4px;
     max-height: 200px;
     overflow-y: auto;
}
/* Quill */
.ql-indent-1 {
     padding-left: 20px;
}
.ql-indent-2 {
     padding-left: 40px;
}
.ql-indent-3 {
     padding-left: 60px;
}
.ql-indent-4 {
     padding-left: 80px;
}
.ql-indent-5 {
     padding-left: 100px;
}