@import url('bootstrap/bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('MudBlazorOverrides.css');
:root {
    --not-wide-page:; /*Intentionally left blank*/
    --wide-page: false;
    --wide-page: false;
    --nav-transition-time: .3s;
    --nav-transition-bezier: cubic-bezier(0.65, 0.05, 0.36, 1);
    --olx-icon-large: 1.75rem;
}

/* Overrides MOVE vars in root */
.oasys-theme {

}

html, body {
    font-family: 'Poppins', 'PT Sans',Helvetica,Arial,Lucida,sans-serif;
}

.link-text {
    color: var(--color-guide-info);
}

a, .btn-link {
    color: var(--color-guide-info);
}

.btn-primary {
    color: var(--color-text-primary);
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#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;
}

.container {
    position: relative;
    width: 95%;
    margin: auto;
}

.full-flex {
    display: flex;
    flex-flow: column;
    flex: 1;
}

.center-text {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}

/*Prevent the dropdown list items from wrapping, probably want to revisit this when we spend more time on responsive design and expected behavior*/
.user-dropdown-list {
    white-space: nowrap;
}

/* Prevent issues with dialog background scrolling */
.olx-scroll-locked {
    padding-right: 8px !important;
    overflow: hidden !important;
}

/* Management POC */
.centered-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px 24px;
    gap: 24px;
    flex-flow: column;
    width: 100%;
    height: 100%;
}

.flex-row {
    display: flex;
    width: 100%;
    flex-flow: row;
}

.detail-section-header {
    display: flex;
    align-items: center;
    height: 75px;
    padding: 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.details-header-h1 {
    color: var(--color-guide-primary);
    font-size: 24px;
    font-weight: 600;
    padding: 10px;
    margin-bottom: 0;
}
/* Management POC End */

/* Apex Charts */

.apexcharts-toolbar {
    z-index: 2 !important;
}

.apexcharts-tooltip {
    max-width: 350px;
}

.apexcharts-tooltip .portal-card {
    padding: 8px !important;
}

.apexcharts-tooltip .tooltip-title {
    white-space: normal;
}

.apexcharts-tooltip .olx-divider {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}

.apexcharts-legend {
    max-height: 75px !important;
}

.olx-apexcharts-interactive .apexcharts-marker,
.olx-apexcharts-interactive .apexcharts-bar-area,
.olx-apexcharts-interactive .apexcharts-pie-area,
.olx-apexcharts-interactive .apexcharts-xaxis-label,
.olx-apexcharts-interactive .apexcharts-legend-series {
    cursor: pointer !important;
}

/* Prevent max height for pie chart legends */
.apexcharts-legend.apx-legend-position-right {
    max-height: none !important;
}

.olx-apexcharts-tooltip {
    border: 3px;
    border-style: solid;
}

.olx-apexcharts-hide-title .apexcharts-title-text {
    display: none !important;
}

.olx-apexcharts-hide-svg-export .exportSVG {
    display: none !important;
}

.olx-apexcharts-hide-png-export .exportPNG {
    display: none !important;
}


.olx-apexcharts-hide-csv-export .exportCSV {
    display: none !important;
}

.olx-apexcharts-sub .apexcharts-toolbar {
    right: 12px !important;
}

/* Apex Charts End */

.mud-popover .olx-list {
    display: flex;
    flex-flow: column;
    padding: 10px;
}

/* Rounded Popover */
.olx-popover-rounded-border {
    border-color: var(--color-guide-primary);
    border-radius: 25px;
    border-style: solid;
    border-width: 2px;
}

.olx-pill-wrapper .mud-chip.mud-chip-size-medium {
    height: 38px;
}
