/*#region Common Styles*/
:root {
    --ap-action-bar-top: -12px;
}

.validation-message {
    color: red;
}

#loading-bar .bar {
    height: 4px !important;
}

/* logo container classes and ids can be customized for branding */
.header-logo-container {
}

#ap-main-menu-container {
}

#ap-snapshot-container {
    background: initial;
}

@media screen and (max-width: 991px) {
    #ap-snapshot-container {
        width: 100vw;
    }
}

@media screen and (min-width: 992px) {
    #ap-snapshot-container {
        width: 34vw;
    }
}

#ap-main-menu-logo-container {
}

#ap-login-logo-container {
}

#ap-main-breadcrumb-container {
    background-color: white;
    position: sticky;
    top: 0;
    z-index: 1021;
    width: 100%;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--rz-primary-dark);
}

#ap-main-breadcrumb-container:empty {
    display: none;
}

#ap-main-component-header-text {
    color: var(--rz-text-title-color);
    font-weight: 800;
}

/* marker classes used for testing */
.ap-entity-ref-container {
}

.ap-entity-ref-summary-container {
}

.ap-entity-ref-summary-line-1 {
}

.ap-entity-ref-summary-line-2 {
}

.ap-entity-ref-open-new-container {
}

.ap-entity-ref-action-container {
}

.ap-required-input-field-label::after {
    content: " *";
    font-weight: bold;
}

.ap-input-helper-text {
    margin-top: -1px;
}

.ap-row-padding {
    padding-bottom: 6px;
}

.ap-sub-section-heading {
    padding: .5rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, .15);
    border-bottom: 1px solid rgba(0, 0, 0, .3)
}

.ap-sub-section-heading-text {
    color: var(--rz-text-title-color);
    font-weight: 700;
}

.ap-sub-component-render-hr {
    margin-left: 5px;
    height: 3px !important;
    border-radius: 5px;
    background-color: var(--rz-text-title-color);
}

.ap-entity-summary-config-line-field-header {
    text-decoration: underline
}

/*#endregion*/

/*#region App Loading*/

.ap-loading-section {
    text-align: center;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ap-loading-section .ap-loader {
    border: 16px solid #f3f3f3;
    border-top: 16px solid darkgrey;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: ap-loading-spin 2s linear infinite;
    margin: 10px auto;
}

@keyframes ap-loading-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*#endregion*/

/*#region Error Bar*/

#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: 1000000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/*#endregion*/

/*#region Telerik Blazor CSS Tweaks*/

/*reset dialog window padding and color*/
.ap-remove-window-content-padding.k-window > div.k-window-content {
    padding: 0 !important;
}

/*Change hierarchy column width*/
.ap-bulk-entity-editor col.k-hierarchy-col {
    width: 20px;
}

/*
fix for work item 1000. Remove when underlying telerik issue has been fixed. 
https://www.telerik.com/account/support-center/view-ticket/1677436
https://github.com/telerik/kendo-themes/issues/5358
TODO: Update Telerik Nuget and Fix. See #1155
*/
.k-grid-filter-popup {
    min-width: 259px;
}

/*#endregion*/

/*#region Radzen CSS Tweaks*/

:root {
    /*make disabled fields easier to read*/
    --rz-input-disabled-color: var(--rz-input-value-color);
    --rz-input-disabled-opacity: 1;
}

/*Fix for Action Bar in Sub Component Renderer not sticky*/
.rz-tabview-panels {
    overflow: unset;
}

/*Fix Radzen Panels not being sticky due to introduction of animations in v7
Remove if and when https://github.com/radzenhq/radzen-blazor/issues/2309 is addressed.*/
.rz-state-expanded > .rz-expander-content {
    overflow: unset;
}

/*see https://forum.radzen.com/t/radzen-right-sidebar-not-working-in-mobile-bug/12619*/
@media (max-width: 768px) {
    .rz-header, .rz-footer, .rz-body {
        width: auto !important;
    }
}

/*remove main layout borders*/
/*do not wrap the layout in bootstrap container or container-fluid*/
.rz-body {
    padding: 0;
}

.rz-body .row {
    --bs-gutter-x: 0rem;
}

/* this should match all col-* */
.rz-body .row > div {
    padding-right: 1rem;
}

@media (max-width: 991px) {
    .rz-body .row > div {
        padding-right: 5px;
    }
}

@media (max-width: 768px) {
    .rz-body .row > div {
        padding-right: 0;
    }
}

/*fix popups and dropdowns not showing in Telerik dialogs*/
.rz-popup {
    z-index: 10002 !important;
}

/*fix notifications not showing over Telerik dialogs*/
.rz-notification {
    z-index: 100002 !important;
}

/*tab view tweaks*/
.ap-no-tab-view-padding .rz-tabview-panel {
    padding: 0;
}

.ap-scrollable-tabs > ul[role=tablist] {
    overflow-x: auto;
    overflow-y: hidden;
}

.ap-wrap-tabs > ul[role=tablist] {
    flex-wrap: wrap;
}

@media (max-width: 599px) {

    .ap-scrollable-tabs > ul[role=tablist] {
        -ms-overflow-style: none; /* IE and Edge */
        /* ReSharper disable once CssNotResolved */
        scrollbar-width: none; /* Firefox */
    }

    .ap-scrollable-tabs > ul[role=tablist]::-webkit-scrollbar {
        display: none; /* for Chrome, Safari, and Opera */
    }
}

.rz-tabview-top > .rz-tabview-nav li {
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: var(--rz-tabs-tab-color);
}

/* Adjust padding for rz-accordion inside bulk editor grid */
div.ap-bulk-entity-editor .rz-accordion-content {
    padding: 1em;
}

/* These classes makes the Radzen Panel title bar look like the bootstrap card-header. Allows for collapsible sub sections. */
.ap-panel-card-header.rz-panel {
    padding: 0;
}

.ap-panel-card-header > .rz-panel-titlebar {
    padding: .5rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, .15) !important;
    border-bottom: 1px solid rgba(0, 0, 0, .3)
}

/*#endregion*/

/*#region Workflow controls*/

.ap-wf-field-label {
    font-weight: 600;
    font-style: italic
}

#ap-wf-diagram-img-container {
    display: table;
    margin: auto;
}

#ap-wf-diagram-img {
}

.ap-wf-diagram-overlay {
    display: table;
    position: relative;
    height: 26px;
    width: 26px;
    margin-bottom: -26px;
    cursor: pointer;
}

.ap-wf-diagram-overlay-complete {
    background: url("../images/workflow/ActivityComplete.png");
    background-size: 100%;
}

.ap-wf-diagram-overlay-in-progress {
    background: url("../images/workflow/ActivityInProgress.png");
    background-size: 100%;
}

.ap-wf-diagram-view-events-button {
    height: 26px;
    width: 26px;
    margin-bottom: -26px;
    cursor: pointer;
    background: url("../images/workflow/ViewEvents.png");
    background-size: 100%;
}

/*#endregion*/