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

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

.dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-header, .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content .dxbl-popup-header > .dxbl-modal-header
{
    --dxbl-popup-border-width: 0px !important;
}

.dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-footer {
    --dxbl-popup-border-width: 0px !important;
}

.dxbl-btn-standalone.dxbl-btn-secondary {
    --dxbl-btn-box-shadow: 0 !important;
    --dxbl-btn-border-color: var(--hms-border-colour) !important;
    --dxbl-btn-hover-border-color: var(--hms-border-colour) !important;
}

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

.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;
}

.hms-card {
    background-color: var(--hms-primary-bg-colour);
    border-radius: 8px;
    border: 1px solid var(--hms-border-colour);
    margin: 3px;
    margin-top: 4px;
}


.btn.btn-ht-orange
{
    background-color: #ff9800;
    border-color: #ff9800;
    color: black;
    font-weight: bold;
}

.btn.btn-ht-orange:hover
{
    background-color: #ffb133;
    border-color: #ffb133;
    color: black;
    font-weight: bold;
}


.hsm-card-info-title
{
    font-size: 1.2em;
}

.hms-card-ht-yellow
{
    background-color: #FFF4BC;
    border-color: #FFF4BC;
    color: black;
    padding: 12px;
    border-radius: 4px;
}

.hms-card-ht-yellow > p {
    margin: 0;
}

.hms-card-holder {
    padding: 0.25rem;
}

.hms-card-body {
    background-color: var(--hms-primary-bg-colour);
    border-radius: 0.5rem;
    border: 1px solid var(--hms-border-colour);
    padding: 0.25rem;
}

.hms-card-body-small {
    background-color: var(--bs-white);
    border-radius: 0.25rem;
    border: 1px solid var(--hms-border-colour);
    padding: 0.25rem;
    overflow:auto;
    height:100%;
}

.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);
}

/*Popup header class*/
.hms-popup-header {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    font-size: 1.2rem;
}

/*Popup body class*/
.hms-popup-content {
    height: 100%;
    padding: 10px;
}
.popup-rounded-border-bottom {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.hms-popup-footer-buttons {
    display: flex;
    column-gap: 0.25rem;
    flex-direction: row-reverse;
}

.dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-body {
    padding: 0 !important;
}

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

.main-content {

}

.device-panel {
    background-color: var(--hms-header-bg-colour);
    padding: 15px;
    margin: 0px;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(221, 221, 221, 0.6);
    font-size: 12px;
    vertical-align: bottom;
}

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

.form-panel {
    background-color: var(--hms-header-bg-colour);
    border-style: solid;
    border-width: 1px;
    border-color: rgba(221, 221, 221, 0.6);
}

.service-item-num {
    font-weight: bold;
    width: 80px;
    padding-right: 4px;
}

.service-health-fund-code {
    font-weight: bold;
    width: 100px;
    padding-left: 4px;
}

/*Style for tooltip*/
.hms-tooltip {
    background-color: var(--hms-header-bg-colour);
    padding: 15px;
    font-size: 11px;
}

/*Asset Management*/
.inventory-panel {
    background-color: var(--hms-header-bg-colour);
    padding: 6px;
    margin: 0px;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(221, 221, 221, 0.6);
    padding-left: 10px;
    padding-right: 10px;
}

.notes-panel {
    background-color: var(--hms-header-bg-colour);
    padding: 15px;
    margin: 0px;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(221, 221, 221, 0.6);
    height: 300px;
}

.notes-container {
    padding: 0px, 15px, 0px, 15px;
    margin: 0px;
    border-style: solid;
    border-width: 2px;
    border-color: rgba(200, 200, 200, 0.6);
    background-color: #DEEAF5;
}

.patient-panel {
    padding: 0;
}

.blazored-toast-container {
    z-index: var(--zindex-above-all-else) !important;
}

/* Overrides cursor to keep it the same for DxGrid when mousing over text in item */
dxbl-grid {
    cursor: default;
}

dxbl-listbox {
    overflow-x: hidden;    
}

input[type="radio" i] {
    color: var(--hms-primary-colour) !important;
    accent-color: currentcolor;
}

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

.devexpress-component-no-content-label {
    font-weight: 400;
    color: #888888;
    -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;
}

.dxbl-flyout > .dxbl-flyout-dialog-fade.dxbl-flyout-dialog-show {
    transition: opacity 0.3s ease 0.5s !important;
}

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

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

.dxbl-drawer-body {
    background-color: var(--hms-primary-bg-colour);
}

.dxbl-loading-panel .dxbl-loading-panel-container.dxbl-loading-panel-shading {
    background-color: var(--hms-loading-panel-bg-shading-colour) !important;
}

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

/* loading page */
.splash-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    height: 100vh;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", "-apple-system", BlinkMacSystemFont, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: .88rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
}

/* TODO: use this class for the HT icon */
.splash-screen .healthtrack-logo {
    width: 90px;
    height: 90px;
}

.splash-screen-caption {
    font-size: 3.5rem;
    font-weight: 600;
    margin-top: 1.5rem;
}

.splash-screen-text {
    color: #a1a1a1;
    margin-top: .5rem;
}

/* Progress bar */
.progress-container {
    width: 300px;
    height: 6px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin: 0 auto;
}

    .progress-container.no-loading {
        display: none;
    }

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--hms-primary-colour) 0%, var(--hms-primary-hover-colour) 100%);
    border-radius: 3px;
    animation: loading 2s ease-in-out infinite;
    transition: background 0.3s ease;
}

/* TODO: use when swapping to new design */
.progress-bar.orange {
    background: linear-gradient(90deg, #ff9800 0%, #f57c00 100%);
}

@keyframes loading {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(0%); }
    100% { transform: translateX(100%); }
}

.infobox-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background-color: var(--hms-primary-bg-colour);
    border-radius: 4px;
    padding: 8px;
}

.infobox-wrapper.light {
    background-color: white;
}


.infobox-title {
    font-size: 1.2em;
}

.infobox-text {
    margin: 0;
}