@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('animations.css');

@import url('hms-components/hms-components.css');

@import url('overrides/devexpress-overrides.css');
@import url('overrides/blazored-toast-overrides.css');

@import url('pages/asset-management.css');
@import url('pages/billing-worksheet.css');
@import url('pages/patient-editor.css');
@import url('pages/prescriptions.css');
@import url('pages/scribe-steps.css');
@import url('pages/splash-screen.css');

@font-face {
    font-family: 'GT-Amertica';
    src: url('/fonts/GT-America-Standard-Regular.woff2') format('woff2'),
    url('/fonts/GT-America-Standard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GT-Amertica-medium';
    src: url('/fonts/GT-America-Standard-Medium.woff2') format('woff2'),
    url('/fonts/GT-America-Standard-Medium.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'tiempos-headline';
    src: url('/fonts/tiempos-headline-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* HealthTrack new colours */
    --hms-yellow: #ff9d00;
    --hms-yellow-pastel: #fff4bc;
    --hms-black: #202020;
    --hms-light-black: #6a6d6e;
    --hms-oatmeal: #f5f1eb;
    --hms-white: #ffffff;
    
    --hms-sparkles-gradient-color-1: var(--hms-yellow);
    --hms-sparkles-gradient-color-2: var(--hms-oatmeal);
    
    /* exposes colours variables from HealthTrackStylesheet to IntelliSense */
    --hms-primary-colour: var(--hms-primary-colour);
    --hms-primary-hover-colour: var(--hms-primary-hover-colour);
    --hms-primary-disabled-colour: var(--hms-primary-disabled-colour);
    --hms-success-colour: var(--hms-success-colour);
    --hms-success-hover-colour: var(--hms-success-hover-colour);
    --hms-success-disabled-colour: var(--hms-success-disabled-colour);
    --hms-danger-colour: var(--hms-danger-colour);
    --hms-danger-hover-colour: var(--hms-danger-hover-colour);
    --hms-danger-disabled-colour: var(--hms-danger-disabled-colour);
    --hms-selection-colour-lime-green-1: var(--hms-selection-colour-lime-green-1);
    --hms-selection-colour-lime-green-2: var(--hms-selection-colour-lime-green-2);
    --hms-selection-colour-grey: var(--hms-selection-colour-grey);
    --hms-border-colour: var(--hms-border-colour);
    --hms-grid-header-colour: var(--hms-grid-header-colour);
    --hms-primary-bg-colour: var(--hms-primary-bg-colour);
    --hms-secondary-bg-colour: var(--hms-secondary-bg-colour);
    --hms-zebra-grey-colour: var(--hms-zebra-grey-colour);
    --hms-text-colour: var(--bs-gray-700);
    /* added variables */
    --hms-header-bg-colour: #f7f7f7;
    --sidebar-width: 138px;
    --topbar-height: 107px;
    /*Total available high and width for content*/
    --available-height: calc(100svh - var(--topbar-height));
    --available-width: calc(100svw - var(--sidebar-width));
    --available-height: calc(100vh - var(--topbar-height));
    --available-width: calc(100vw - var(--sidebar-width));
    --tab-bar-height: 36px;
    /* z-index */
    --zindex-base: 100;
    --zindex-higher: 200;
    --zindex-popover: 300;
    /* No standard elements should be above this line, navigation is on top of every standard control */
    --zindex-sidebar-navigation-flyout: 3000;
    /* Above here is the "always on top of devexpress" line. */
    --zindex-tooltip: 3000;
    /* 
        Please, for the love of all things H�kon Wium Lie, do not use this for just about anything. 
        This should be for like, loading modules that have to cover the whole screen, toasts, and must force above everything,
        not for "oh this popup should be above stuff"
    */
    --zindex-above-all-else: 10000;
    /* Custom Colors */
    --folder-yellow-colour: #f4c461;
	--hms-ophthalmology-highlight: #ffffe0;
    --hms-nav-button-internal-padding: 4px;
    --hms-loading-panel-bg-shading-colour: rgba(211, 211, 211, 0.4);


    --dxbl-popup-header-bg: var(--bs-white);
    --dxbl-popup-border-width: 0px !important;
    --dxbl-popup-footer-bg: var(--bs-white);
    --dxbl-popup-header-color: var(--hms-text-colour);
    
    --hms-showcase-background-color: var(--hms-oatmeal);
}


html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.fa-solid, .fa, .fa-regular  {
    font-family: 'Font Awesome 6 Free' !important;
}

/* main layout */
.normal-background {
    background-color: var(--hms-primary-bg-colour);
}

.new-background {
    background-color: var(--bs-white) !important;
}

html, body, #app {
    height: 100%;
}

#app {
    background-color: inherit;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

#blazor-error-ui {
    position: fixed;
    display: none;
    background: var(--hms-primary-bg-colour);
    box-shadow: 2px 2px 2px grey;
    max-width: 550px;
    width: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--zindex-above-all-else);
}

#blazor-error-ui-grey-bg {
    position: fixed;
    background: rgb(33, 37, 41);
    opacity: 50%;

    width: 100vw;
    height: 100vh;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

#blazor-error-ui-content {
    position: relative;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    background: var(--hms-primary-bg-colour);
    z-index: 100;
}

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

#simd-unsupported-ui {
    position: relative;
    display: none;
    background-color: inherit;
}

#simd-unsupported-ui .block-bg {
    position: fixed;
    background: var(--hms-primary-bg-colour);
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: var(--zindex-tooltip);
}

#simd-unsupported-ui .error-message {
    position: fixed;
    display: flex;
    gap: 0.25rem;
    flex-direction: column;
    color: var(--hms-danger-colour);
    background-color: #fce1de;
    border: 1px solid var(--hms-danger-colour);
    border-radius: 4px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 1rem;
    font-size: 1rem;
    width: 90%;
    max-width: 730px;
    z-index: calc(var(--zindex-tooltip) + 1);
}

#simd-unsupported-ui .error-message > p {
    padding: 0;
    margin: 0;
}

#simd-unsupported-ui .error-message > hr {
    margin-bottom: 4px;
    background-color: var(--hms-danger-colour);
}

/*Styles for body and main cards*/
.body-container {
    border-radius: 8px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    padding: 15px;
}

.main-content {

}

.second-groups {
    background-color: rgba(191, 191, 191, 0.15);
    padding: 20px;
}

/* Custom "nowrap with ellipsis" style for data grid cells */
.grd-cell-nowrap {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Prevent text highlight */
.prevent-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

/* used for the new tooltip ui until it is made universal */
.improved-tooltip {
    background-color: #337ab7 !important;
    border-radius: 8px !important;
    border: 1px solid #337ab7 !important;
}

    .improved-tooltip .dxbl-popover-end > .dxbl-arrow::after {
        border-right-color: #337ab7 !important;
    }

    .improved-tooltip .dxbl-popover-start > .dxbl-arrow::after {
        border-left-color: #337ab7 !important;
    }

    .improved-tooltip .dxbl-popover-top > .dxbl-arrow::after {
        border-top-color: #337ab7 !important;
    }

    .improved-tooltip .dxbl-popover-bottom > .dxbl-arrow::after {
        border-bottom-color: #337ab7 !important;
    }

.improved-tooltip-content {
    padding: 5px 10px;
    font-weight: 600;
    color: var(--hms-header-bg-colour);
    white-space: nowrap;
}


.available-height {
    height: var(--available-height);
}

.available-width {
    width: var(--available-width);
}

.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba !important;
}