/*** App Layout *****************************************/
.app-header { padding: 0.5rem 1rem; }
.app-header-name { color: var(--base-color-white); font-size: var(--base-font-size-h4);}
.app-sidebar { }
.app-body { padding: 2rem; }
.app-footer { background-color: #999999; color: var(--base-color-white); font-size: var(--base-font-size-sm); text-align: center; }
.app-btn-link,
.app-btn-link-bk { font-weight: 400; letter-spacing: normal; min-height: auto; padding: 0; margin: 0; min-width: auto; }
.app-btn-link:hover,
.app-btn-link-bk:hover { background-color: transparent !important; }
.app-btn-link span,
.app-btn-link-bk span { background-color: transparent; color: var(--base-color-1st) !important; font-weight: 400; text-transform: none; text-decoration: underline; }
.app-btn-link span:hover,
.app-btn-link-bk span:hover { color: var(--base-color-1st60) !important; text-decoration: none; }
.app-btn-link-bk span { color: var(--base-color-black) !important; }
.app-btn-link-bk span:hover { color: var(--base-color-black) !important; }
.app-btn-ico-sm { cursor: pointer; font-size: 1.25rem; }

/*** Page ************************************************/
.page-hdr { margin-bottom: 1.5rem; }
.page-hdr h3 { margin: 0 !important; }

/*** DataGrid ********************************************/
.grid-hdr-lt { text-align: left !important; }
.grid-hdr-ct { text-align: center !important; }
.grid-hdr-rt { text-align: start !important; }
.grid-hdr-icon { color: var(--rz-grid-header-color); font-size: 1rem !important; margin-left: -0.5rem; margin-top: -0.5rem; position: absolute; }
.grid-col-img { padding-left: 0 !important; padding-right: 0 !important; }
.grid-cell { font-size: var(--rz-grid-cell-font-size) !important; }
.grid-a, .grid-a:visited { color: var(--base-color-1st) !important; font-size: var(--rz-grid-cell-font-size); text-decoration: underline !important; }
.grid-a:hover { color: var(--base-color-1st60) !important; text-decoration: none !important; }
.grid-icon { color: var(--base-color-black) !important; cursor: pointer; line-height: 0; }
.grid-icon:hover { color: var(--base-color-black60) !important; }
.grid-img { border-radius: 15px; height: 30px; width: 30px; }
.grid-text { font-size: var(--rz-grid-cell-font-size); letter-spacing: normal; text-transform: none; }

/*** DataList:Cards **************************************/
.datalist-card { padding: 0.75rem !important; margin: 0 0 1rem 0 !important; width: 415px; flex: unset !important; }
.datalist-card:last-child { margin-bottom: 0 !important; }
.datalist-card-img { height: 75px; margin-right: 1rem; width: auto; }
.badge-card { width: 375px; }

.item-container { border: solid 1px #e0e0e0; border-radius: 0.25rem; padding: 0.25rem; padding-left: 0.5rem; width: 300px; }

/*** Waitlist Answers ************************************/
.ans-l { width: 40%; }
.ans-v { width: 60%; }

/*** Miscellaneous **************************************/
.genre-tag { background-color: var(--base-color-2nd-lt-lt); border: solid 1px var(--base-color-2nd); border-radius: 3px; color: var(--base-color-2nd); font-size: 10px; padding: 2px 4px; }

/*** Dialog Form ****************************************/
.dialog-form { padding: 1.5rem 1rem 1rem; }
.dialog-form .rz-dropdown { width: 100%; }
.dialog-form .rz-alert { margin: 0 !important; }

.danger-zone { background-color: var(--rz-danger-lighter); border: solid 1px var(--rz-danger); box-shadow: none; color: var(--rz-danger); }

/********************************************************/
/*** Radzen Component Overrides *************************/
.rz-alert-xs { padding: 0.5rem; }
.rz-alert-xs .rz-alert-content { font-size: 0.875rem; }
.rz-alert-xs .rz-alert-icon { font-size: 1.25rem; }
.rz-alert-center .rz-alert-content { text-align: center; width: 100%; }
.rz-breadcrumb-item a { color: var(--base-color-1st); font-size: var(--rz-text-body2-font-size); }
.rz-breadcrumb-item a:hover { color: var(--base-color-1st60); }
.rz-calendar .rz-inputtext,
.rz-dropdown .rz-inputtext {  width: calc(100% - 1.5rem); }
.rz-dropdown-item.rz-state-highlight { color: var(--base-color-white) !important; }
.rz-dialog-wrapper { z-index: 1020; }
.rz-dialog-content { padding: 0 1.5rem 1.5rem; }
.rz-dialog-side { overflow-x: hidden; position: absolute; width: 500px; z-index: 1010; }
.rz-dialog-side-content { margin: 0 !important; overflow-x: hidden; padding: 1.5rem !important; }
.rz-dialog-side-position-right { right: 0; top: 0; }
.rz-dialog-side-titlebar-close { cursor: pointer;}
.rz-datalist-data > li { border: none; border-bottom: solid 1px var(--rz-base-300); border-radius: 0; margin: 0 0 1rem 0;  padding: 0 0 1rem 0; }
.rz-datalist-content > ul:last-of-type > li { border: none !important; margin: 0 !important; padding: 0 !important; }
.rz-datepicker-calendar td a.rz-state-default,
.rz-datepicker-calendar td span.rz-state-default,
.rz-datepicker-calendar th a.rz-state-default,
.rz-datepicker-calendar th span.rz-state-default { height: auto; }
.rz-dropdown-item.rz-state-disabled  { color: var(--rz-primary) !important; opacity: 0.75 !important; }
.rz-form-field-content { display: block !important; }
.rz-form-field-content .valid,
.rz-form-field-content .invalid,
.rz-input-text { width: 100% !important; }
.rz-html-editor { height: 500px; }
.rz-notification { z-index: 2000; }
.rz-navigation-item-link-active { color: var(--base-color-white); }
.rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):hover { color: var(--base-color-white); }
.rz-paginator-element,
.rz-paginator-page.rz-state-active { min-height: 1.5rem !important; padding: 0.5rem !important; min-width: 1.5rem; }
.rz-profile-menu { background-color: transparent !important; padding: 0; }
.rzi-times { cursor: pointer; }

:root {
    --rz-panel-menu-item-active-color: var(--base-color-white);
    --rz-panel-menu-item-2nd-level-active-color: var(--base-color-white);
    --rz-pager-numeric-button-selected-color: var(--base-color-white);
}

/*** Blazor UI ******************************************/
#blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }