/*#region Form Element Styling */

/* the second selector ensures the style also applies inside a jq dialog */

.select_input, .ui-jqdialog-content form .select_input {
    padding: 3px;
    width: 212px;
    font-size: 11px;
}

.text_input, .ui-jqdialog-content form .text_input {
    padding: 3px;
    width: 203px;
    font-size: 11px;
    line-height: 100%;
}

.textname_input, .ui-jqdialog-content form .textname_input {
    padding: 5px;
    width: 98%;
    font-size: 11px;
}

.textarea_input, .ui-jqdialog-content form .textarea_input {
    padding: 3px;
    font-size: 11px;
}

.check_input, .ui-jqdialog-content form .check_input {
    margin-right: 8px;
}

.radio_input, .ui-jqdialog-content form .radio_input {
    margin-right: 5px;
}

/*#endregion */

/*#region Form Element Theming */

/* no jq dialog selector here because dialogs will use jquery-ui theme */

.select_input {
    border: 1px solid #898989;
    color: #454545;
}

.text_input {
    border: 1px solid #898989;
    color: #454545;
}

.textname_input {
    border: 1px solid #898989;
    color: #454545;
}

.textarea_input {
    border: 1px solid #898989;
    color: #454545;
}

.check_input {
    border: 1px solid #898989;
}

.radio_input {

}

/*#endregion */

/*#region jqGrid Overrides */

/* override row highlight colour to match Purveyance theme */
.jqgrow.selected-row .ui-state-highlight {
    background-color: var(--bg-highlight-jq);
}

/* wrap grid headers and vertically center the header labels */
.dd-jqgrid-wrap-header th.ui-th-column div {
    white-space: normal !important;
    height: auto !important;
    padding: 2px;
}

/* make icons in grid headers honor text alignment */
tr.ui-jqgrid-labels .ui-icon {
    display: inline-block;
}

/* select elements match column width */
.jqgrid-select-fill select {
    width: 99%;
}

/*#endregion */

/*#region jQueryUi Overrides */

/* fix the stripe in the background behind dialogs */
.ui-widget-overlay {
    background: #aaa !important;
}

/*#endregion */

/*#region Material Icons */

.material-icons.md-16 { font-size: 16px; }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
.material-icons.md-72 { font-size: 72px; }
.material-icons.md-84 { font-size: 84px; }
.material-icons.md-96 { font-size: 96px; }
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

.material-icons.text-warning {
    color: var(--ic-warning);
}

/* make material icons use jquery ui theme colours if ui-icon class applied */
.ui-icon.material-icons {
    background: unset;
    background-image: unset;
    text-indent: unset;
    width: unset;
    height: unset;
}

.ui-icon.material-icons {
    color: var(--ic-default);
}

.ui-state-hover .ui-icon.material-icons, .ui-state-focus .ui-icon.material-icons {
    color: var(--ic-hover);
}

.ui-pg-table.navtable .ui-icon.material-icons {
    width: 16px;
    height: 16px;
}

/*#endregion */

/*#region Bootstrap-esque Style Helpers */

.cursor-sortable {
    cursor: ns-resize;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

.w-100, .wh-100 {
    width: 100%;
}

.h-100, .wh-100 {
    height: 100%;
}

.w-100v, .wh-100v {
    width: 100vw;
}

.h-100v, .wh-100v {
    height: 100vh;
}

.ml-auto, .mx-auto {
    margin-left: auto !important;
}

.mr-auto, .mx-auto {
    margin-right: auto !important;
}

.p-0 {
    padding: 0 !important;
}

.border-0 {
    border: 0 !important;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-grow-1 {
    flex-grow: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.flex-row.flex-spaced > *:not(:first-child) {
    margin-left: var(--flex-gap, 1em);
}

.flex-column.flex-spaced > *:not(:first-child) {
    margin-top: var(--flex-gap, 1em);
}

.align-items-center {
    align-items: center;
}

.align-self-center {
    align-self: center;
}

.postition-relative {
    position: relative;
}

.d-inline {
    display: inline;
}

.d-block {
    display: block;
}

.abs-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.abs-top-right {
    position: absolute;
    top: 0;
    right: 0;
}

.abs-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.text-center {
    text-align: center !important;
}

.hidden-content {
    display: none;
    visibility: collapse;
}

.animation-spin {
    --speed: 1.8s;
    animation: animation-spin var(--speed) linear infinite;
}

@keyframes animation-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/*#endregion */

.tooltip-wrapper {
    display: none;
    visibility: hidden;
}

.tooltip-content {
    max-width: 500px;
}

.info-tooltip {
    cursor: pointer;
}

hr.table-separator {
    border: none;
    border-bottom: 1px dotted var(--bd-default);
}

.ui-jqdialog-content .info-tooltip {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
}

img.preserve-aspect {
    object-fit: contain;
}