/*#region Common Styles*/

.validation-message {
    color: red;
}

#loading-bar .bar {
    height: 4px !important;
    /*background: greenyellow !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 {
}

/* 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-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);
}

/*#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 hiearchy 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*/
.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;
}

/*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: 0px;
    }
}

/*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;
    /*For Debugging*/
    /*background: lightblue;*/
}

#ap-wf-diagram-img {
    /*For Debugging*/
    /*background: lightgoldenrodyellow;*/
}

.ap-wf-diagram-overlay {
    display: table;
    position: relative;
    height: 26px;
    width: 26px;
    margin-bottom: -26px;
    cursor: pointer;
    /*For Debugging*/
    /*background: red;*/
}

.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*/