@import "bootstrap/bootstrap.min.css";
@import url('open.iconic/font/css/open-iconic-bootstrap.min.css');
@import url('svg-icons/svg-icons.css');

/* roboto-100 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    src: url('../fonts/roboto/roboto-v30-latin-100.eot'); /* IE9 Compat Modes */
    src: local(''), url('../fonts/roboto/roboto-v30-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto/roboto-v30-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto/roboto-v30-latin-100.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto/roboto-v30-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto/roboto-v30-latin-100.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-100italic - latin */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 100;
    src: url('../fonts/roboto/roboto-v30-latin-100italic.eot'); /* IE9 Compat Modes */
    src: local(''), url('../fonts/roboto/roboto-v30-latin-100italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto/roboto-v30-latin-100italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto/roboto-v30-latin-100italic.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto/roboto-v30-latin-100italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto/roboto-v30-latin-100italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-300 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/roboto/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */
    src: local(''), url('../fonts/roboto/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto/roboto-v30-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-300italic - latin */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 300;
    src: url('../fonts/roboto/roboto-v30-latin-300italic.eot'); /* IE9 Compat Modes */
    src: local(''), url('../fonts/roboto/roboto-v30-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto/roboto-v30-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto/roboto-v30-latin-300italic.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto/roboto-v30-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto/roboto-v30-latin-300italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''), url('../fonts/roboto/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-italic - latin */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/roboto/roboto-v30-latin-italic.eot'); /* IE9 Compat Modes */
    src: local(''), url('../fonts/roboto/roboto-v30-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto/roboto-v30-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto/roboto-v30-latin-italic.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto/roboto-v30-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto/roboto-v30-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/roboto/roboto-v30-latin-500.eot'); /* IE9 Compat Modes */
    src: local(''), url('../fonts/roboto/roboto-v30-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto/roboto-v30-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto/roboto-v30-latin-500.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto/roboto-v30-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto/roboto-v30-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500italic - latin */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 500;
    src: url('../fonts/roboto/roboto-v30-latin-500italic.eot'); /* IE9 Compat Modes */
    src: local(''), url('../fonts/roboto/roboto-v30-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto/roboto-v30-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto/roboto-v30-latin-500italic.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto/roboto-v30-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto/roboto-v30-latin-500italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/roboto/roboto-v30-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''), url('../fonts/roboto/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto/roboto-v30-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700italic - latin */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/roboto/roboto-v30-latin-700italic.eot'); /* IE9 Compat Modes */
    src: local(''), url('../fonts/roboto/roboto-v30-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto/roboto-v30-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto/roboto-v30-latin-700italic.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto/roboto-v30-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto/roboto-v30-latin-700italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-900 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/roboto/roboto-v30-latin-900.eot'); /* IE9 Compat Modes */
    src: local(''), url('../fonts/roboto/roboto-v30-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto/roboto-v30-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto/roboto-v30-latin-900.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto/roboto-v30-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto/roboto-v30-latin-900.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-900italic - latin */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 900;
    src: url('../fonts/roboto/roboto-v30-latin-900italic.eot'); /* IE9 Compat Modes */
    src: local(''), url('../fonts/roboto/roboto-v30-latin-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto/roboto-v30-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto/roboto-v30-latin-900italic.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto/roboto-v30-latin-900italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto/roboto-v30-latin-900italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

:root {
    --background-hell-green-color: #F1F9F7;
    --title-primary-color: #2E937A;
    --titel-secondary-color: #E59846;
    --text-secondary-color: #FCF4EB;
    --input-placeholder-color: #D5D5D5;
    --text-primary-color: #544848;
    --border-color: #A3D7CA;
    --footer-color: #333333;
    --footer-text-primary-color: #FFFFFF;
    --hospital-name-color: #a7a4a4;
    --border-primary-color: #2E937A;
    --border-secondary-color: #E59846;
    /* background */
    --background-primary-color: #dde5f4;
    --background-dark-blue-color: #374151;
    --background-secondary-color: #5f76a7;
    --background-hell-grey-color: #e8e8e8;
    /* button */
    --button-primary-color: #374151;
    --button-secondary-color: #888b8f;
    --button-success-color: #6cbd0c;
    --button-danger-color: #d10e0e;
    --button-primary-hover-color: #333333;
    --button-text-color: #FFFFFF;
    --button-orange-color: #ff9c00;
    /* bg color */
    --hell-blue-bg-color: #c8f3ff;
    --hell-blue-nav-pill-bg-color: #708bc3;
    /* title color */
    --dark-blue-title-color: #004881;
    /* text */
    --text-danger-color: #d10e0e;
    /*bootstrap override*/
    --bp-bg-primary-color: #374151;
    /*score*/
    --score-background-color: #374151;
    --score-primary-btn: #2289a7;
    --score-secondary-btn: #888b8f;
    --score-success-btn: #6cbd0c;
    --score-title-color: #004881;
    --score-question-color: #00447a;
    /*spinner colors*/
    --spinner-d-blau-color: #374151;
    --spinner-green-color: #00b662;
    /* footer */
    --footer-text--secondary-color: #c8f3ff;
    /* form */
    --form-primary-background-color: #fbfbfb;
    --form-disabled-background-color: #8E9092;
}

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    box-sizing: border-box;
    height: 100%;
}

html, body {
    font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--text-primary-color);
    font-weight: 400;
    border: none;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}

#app {
    background-color: var(--background-hell-grey-color);
    flex-grow: 1;
}

.splash-screen-text {
    color: var(--dark-blue-title-color);
}

.page,
.page > div,
.page > div > div {
    min-height: 100vh;
}

a,
p {
    border: none;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
    text-align: inherit;
}

.menu-item-color {
    color: var(--bp-bg-primary-color);
}

.splash-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    height: 100vh;
    font-family: Roboto,"Helvetica Neue", "Segoe UI", "-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;
}

    .splash-screen .spinner-border {
        border: .2em solid;
        border-color: #5f368d #bfbfbf #bfbfbf;
        width: 120px;
        height: 120px;
    }

.splash-screen-caption {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 1.5rem;
}

.splash-screen-text {
    color: #a1a1a1;
    margin-top: .5rem;
}

/* check box / radio style */
/*.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}*/

.invalid {
    outline: 1px solid red;
}

.validation-message {
    margin-top: 6px;
    text-align: center;
    color: var(--text-danger-color);
}

#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;
    }

div.dxbs-btn-group.dxbs-input-group-append > .btn.dx-btn:not(.dxbs-editor-clear-btn).btn-sm, div.dxbs-btn-group.dxbs-input-group-prepend > .btn.dx-btn.btn-sm {
    color: var(--button-primary-color);
    background-color: #fff;
}

.dxbs-button-edit > .input-group > div:not(.input-group-append):not(.input-group-prepend), .dxbs-spin-edit > div.input-group > div:not(.input-group-append):not(.input-group-prepend):not(.dxbs-out-of-range-warn), .dxbs-dropdown-edit > .input-group > div:not(.input-group-append):not(.input-group-prepend):not(.dxbs-dropdown-area):not(.dxbs-out-of-range-warn):not(.dxbs-ld):not(.dxbs-lp), .dxbs-uc div.input-group > div:not(.input-group-append):not(.input-group-prepend), .dxbs-button-edit > .input-group > div:not(.input-group-append):not(.input-group-prepend) > .form-control, .dxbs-spin-edit > div.input-group > div:not(.input-group-append):not(.input-group-prepend):not(.dxbs-out-of-range-warn) > .form-control, .dxbs-textbox > div.input-group > div:not(.input-group-append):not(.input-group-prepend), .dxbs-memo > div.input-group > div:not(.input-group-append):not(.input-group-prepend), .dxbs-dropdown-edit > .input-group > div:not(.input-group-append):not(.input-group-prepend):not(.dxbs-dropdown-area):not(.dxbs-out-of-range-warn):not(.dxbs-ld):not(.dxbs-lp) > .form-control, .dxbs-uc div.input-group > div:not(.input-group-append):not(.input-group-prepend) > .form-control,
.dxbs-input-group.input-group input.form-control-sm {
    padding: 8px 0;
    text-indent: 8px;
}

.dxbs-input-group.input-group > .dxbs-editor-input-container:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    padding: 0;
}

.valid.modified .dxbs-input-group input.form-control, .valid.modified .dxbs-input-group textarea.form-control, .valid.modified.dxbs-tagbox .form-control {
    border-color: #ced4da !important;
}

ul.validation-errors {
    list-style: none;
}

/* Side bar nav */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background: var(--hell-blue-nav-pill-bg-color);
    padding: 0 10px;
}

/*.sidebar,
.header {
    background-color: unset;
    background-color: #F1F9F7 !important;
}*/
.app-sidebar .nav-pills > .nav-item a {
    border-radius: 8px !important;
}

.nav-tabs .nav-link.active:before {
    /* border-bottom-color: var(--button-primary-color);*/
}

.page-item.active .page-link {
    /*background-color: var(--button-primary-color);*/
    /* 
    border-color: var(--background-primary-color);*/
}
/* ******************************************************* */
/* Dx Tab */
.nav-link {
    padding: 6px 10px;
}

.nav-tabs .nav-link {
    border: unset;
}

.nav-tabs {
    border-bottom: unset;
}

    .nav-tabs .nav-item .nav-link {
        border-radius: 8px;
    }

    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        border-bottom: 2px solid var(--button-primary-color);
    }

.nav-link span:first-child {
    color: var(--button-primary-color);
}

.iaf-tabs-wrapper .nav-tabs > .nav-item > .nav-link > span:first-child,
.iaf-tabs-wrapper .nav-tabs > .nav-item > .nav-link > span:last-child {
    color: var(--button-primary-color);
}

    .iaf-tabs-wrapper .nav-tabs > .nav-item > .nav-link > span:first-child:hover,
    .iaf-tabs-wrapper .nav-tabs > .nav-item > .nav-link > span:last-child:hover {
        color: #2462c7;
    }

.rubrics-tabs-wrapper .nav-tabs > .nav-item > .nav-link > span:first-child,
.rubrics-tabs-wrapper .nav-tabs > .nav-item > .nav-link > span:last-child {
    color: #fff;
}

.rubrics-tabs-wrapper .nav-tabs > .nav-item > .nav-link.active > span:first-child,
.rubrics-tabs-wrapper .nav-tabs > .nav-item > .nav-link.active > span:last-child {
    color: var(--button-primary-color);
}

.rubrics-tabs-wrapper .nav-tabs > .nav-item > .nav-link > span:first-child:hover,
.rubrics-tabs-wrapper .nav-tabs > .nav-item > .nav-link > span:last-child:hover {
    color: var(--hell-blue-bg-color);
}

.rubrics-tabs-wrapper .nav-tabs > .nav-item > .nav-link.active > span:first-child:hover,
.rubrics-tabs-wrapper .nav-tabs > .nav-item > .nav-link.active > span:last-child:hover {
    color: var(--button-primary-color);
}

.nav-link:hover {
    color: var(--hell-blue-bg-color);
}

.dxbs-tree ul.nav > .nav-item > .nav-link > span + .badge {
    color: unset !important;
    background-color: #a6ff90 !important;
}

.dxbs-grid > .card .dxbs-scroll-viewer > .dxbs-scroll-viewer-content > .dxbs-grid-table > thead {
    position: unset;
}

@media (max-width: 960px) {
    .app-sidebar > .nav-pills > .nav-item:first-of-type {
        padding-top: 0.5rem !important;
    }
}

/*
.no-data-msg,
.no-patient-cases {
    display: inline-block;
    padding: 10px;
    margin: 16px 0 28px 0;
    border-radius: 8px;
    border: 1px solid var(--border-primary-color);
    text-align: center;
    color: var(--title-primary-color);
    background-color: var(--background-secondary-color);
    -webkit-box-shadow: 8px 5px 10px 5px rgb(0,0,0,0.26);
    box-shadow: 8px 5px 10px 5px rgb(0,0,0,0.26);
}*/

/*@media (max-width: 500px) {
    .nav-link span:first-child {
        display: none;
    }
}
*/

/*div.select-case-wrapper .dxbs-button-edit > .input-group > div:not(.input-group-append):not(.input-group-prepend), .dxbs-spin-edit > div.input-group > div:not(.input-group-append):not(.input-group-prepend):not(.dxbs-out-of-range-warn), .dxbs-dropdown-edit > .input-group > div:not(.input-group-append):not(.input-group-prepend):not(.dxbs-dropdown-area):not(.dxbs-out-of-range-warn):not(.dxbs-ld):not(.dxbs-lp), .dxbs-uc div.input-group > div:not(.input-group-append):not(.input-group-prepend), .dxbs-button-edit > .input-group > div:not(.input-group-append):not(.input-group-prepend) > .form-control, .dxbs-spin-edit > div.input-group > div:not(.input-group-append):not(.input-group-prepend):not(.dxbs-out-of-range-warn) > .form-control, .dxbs-textbox > div.input-group > div:not(.input-group-append):not(.input-group-prepend), .dxbs-memo > div.input-group > div:not(.input-group-append):not(.input-group-prepend), .dxbs-dropdown-edit > .input-group > div:not(.input-group-append):not(.input-group-prepend):not(.dxbs-dropdown-area):not(.dxbs-out-of-range-warn):not(.dxbs-ld):not(.dxbs-lp) > .form-control, .dxbs-uc div.input-group > div:not(.input-group-append):not(.input-group-prepend) > .form-control,
.dxbs-input-group.input-group input.form-control-sm {
    padding: 10px 0;
    font-size: 14px;
    text-indent: 8px;
}*/

/*---------------------------------------------------------------------------------------------------*/
a
/*,
a:hover,
a:focus,
a:active*/ {
    text-decoration: none;
    color: var(--dark-blue-title-color);
    cursor: pointer;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

select option:hover,
select option:focus,
select option:active {
    background: linear-gradient(#000000, #000000);
    background-color: #000000 !important; /* for IE */
    color: #ffed00 !important;
}

select option:checked {
    background: linear-gradient(#d6d6d6, #d6d6d6);
    background-color: var(--button-primary-color) !important; /* for IE */
    color: #fff !important;
}

select.decorated option:hover {
    box-shadow: 0 0 10px 100px red inset;
}

/*---------------------------------------------------------------------------------------------------*/
/*----------------------------------------button / anchor button-------------------------------------*/

.a-primary-btn,
.primary-btn,
.secondary-btn,
.danger-btn,
.success-btn,
.white-btn,
.info-btn,
.orange-btn,
.disabled-btn,
.header-btn {
    border: none;
    border-radius: 8px;
    color: var(--button-text-color);
    font-size: 1.0rem;
    text-align: center;
    padding: 6px 10px;
    -webkit-box-shadow: 6px 10px 20px -10px #3e4684;
    box-shadow: 6px 10px 20px -10px #3e4684;
}

.a-primary-btn,
.primary-btn {
    background: rgb(55,65,81);
    background: linear-gradient(0deg, rgba(55,65,81,1) 23%, rgb(79 99 131) 50%, rgba(55,65,81,1) 77%);
}

.secondary-btn {
    background: rgb(136,139,143);
    background: linear-gradient(0deg, rgba(136,139,143,1) 23%, rgba(111,115,121,1) 50%, rgba(136,139,143,1) 77%);
}

.danger-btn {
    background: rgb(209,14,14);
    background: linear-gradient(0deg, rgba(209,14,14,1) 23%, rgba(241,21,21,1) 50%, rgba(209,14,14,1) 77%);
}

.success-btn {
    background: rgb(108,189,12);
    background: linear-gradient(0deg, rgba(108,189,12,1) 23%, rgba(97,170,12,1) 50%, rgba(108,189,12,1) 77%);
}

.white-btn {
    color: var(--dark-blue-title-color);
    background: rgb(240,240,240);
    background: linear-gradient(0deg, rgba(240,240,240,1) 23%, rgba(223,223,223,1) 50%, rgba(240,240,240,1) 77%);
}

    .white-btn:hover {
        background: rgb(51,51,51);
        background: linear-gradient(0deg, rgba(51,51,51,1) 23%, rgba(87,81,81,1) 50%, rgba(51,51,51,1) 77%);
        color: var(--button-text-color);
    }


.orange-btn {
    background-color: var(--button-orange-color);
    background: rgb(255,156,0);
    background: linear-gradient(180deg, rgba(255,156,0,1) 0%, rgba(228,118,0,1) 50%, rgba(255,156,0,1) 100%);
}

.info-btn {
    /*
    background: rgb(10,174,176);
    background: linear-gradient(180deg, rgba(10,174,176,1) 0%, rgba(6,150,152,1) 50%, rgba(10,174,176,1) 100%);
    */
    background: rgb(84,171,175);
    background: linear-gradient(180deg, rgba(84,171,175,1) 0%, rgba(12,154,161,1) 50%, rgba(84,171,175,1) 100%);
}

.a-primary-btn,
.a-primary-btn:focus,
.a-primary-btn:active {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}

    .a-primary-btn:hover,
    .secondary-btn:hover,
    .primary-btn:hover,
    .danger-btn:hover,
    .success-btn:hover,
    .orange-btn:hover,
    .info-btn:hover {
        background: rgb(51,51,51);
        background: linear-gradient(0deg, rgba(51,51,51,1) 23%, rgba(87,81,81,1) 50%, rgba(51,51,51,1) 77%);
        color: var(--button-text-color);
    }

.close-btn {
    padding: 4px 6px 0 6px;
    font-size: 20px;
    border: none;
    border-radius: 8px;
    background: white;
    color: var(--title-primary-color);
    /*  -webkit-box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.49);
    box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.49);*/
    -webkit-box-shadow: 6px 10px 20px -10px #3e4684;
    box-shadow: 6px 10px 20px -10px #3e4684;
}

.header-btn {
    font-weight: 600;
    text-transform: uppercase;
    background-color: #4F82DC;
}

.icon-primary-color {
    color: var(--title-primary-color);
}

.btn-center {
    display: block;
    margin: auto;
}

.btn-block {
    display: block;
    width: 100%;
}

.mp-scan-btn {
    margin: 12px 0;
}

.disabled-btn {
    color: #B5B5B5;
    background-color: #E5E5E5;
}

/*-----------------------------------------------------------------------------------------------*/

/*------------------------------------------App Header-------------------------------------------*/
.header-menu-logo,
.header-auth,
.krankenhaus {
    display: flex;
    align-content: center;
}

.header-menu-logo {
    flex-grow: 1;
}

.krankenhaus-logo {
    margin-left: 12px;
    max-height: 34px;
    max-width: 100px;
}

.krankenhaus > a {
    margin: auto;
}

.header-clock {
    padding-top: 3px;
}

    .krankenhaus-titel,
    .anrede,
    .header-clock.minutes {
        display: none;
    }

.anrede {
    margin-top: 4px;
    font-weight: 600;
    text-align: center;
    color: var(--dark-blue-title-color);
}

.krankenhaus-titel {
    color: var(--hospital-name-color);
}

.header-auth {
    align-items: center;
}

.link-name.login-header,
.link-name.logout-header {
    display: none;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    position: relative;
    top: -8px;
    padding-left: 6px;
}

.log-in-out {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    color: #fff;
    background-color: var(--bp-bg-primary-color);
}

    .log-in-out:hover .logout-header {
        color: #ff7d7d;
    }

    .log-in-out:hover .h-logout-icon {
        color: #ff7d7d;
    }

i.h-logout-icon {
    color: #fff;
    font-size: 36px;
    padding: 3px 2px 3px 6px;
}

i.h-login-icon {
    color: #fff;
    font-size: 36px;
    padding: 3px 8px 3px 2px;
}

.header-clock-wrapper {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
    height: 42px;
    background-color: var(--bp-bg-primary-color);
    color: white;
    font-size: 20px;
    padding: 6px 4px;
}

.mb-welcome-wrapper {
    padding: 2px 6px;
    text-align: center;
    background-color: var(--hell-blue-bg-color);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.mb-welcome {
    font-size: 16px;
    font-weight: 600;
    color: var(--dark-blue-title-color);
}

.page-main-content {
    padding-top: 48px;
}

@media (min-width: 640px) {
    .krankenhaus-titel {
        display: block;
        flex-grow: 1;
    }

    .header-logout {
        flex-shrink: 0;
    }

        .header-logout > a {
            display: flex;
            align-items: center;
        }

    .link-name.login-header,
    .link-name.logout-header {
        display: inline-block;
    }

    i.h-logout-icon {
        padding-left: 0;
    }

    .krankenhaus-titel {
        margin: auto 0 auto 12px;
    }

    .krankenhaus-logo {
        max-width: 150px;
    }
}

@media (min-width: 960px) {
    .anrede {
        display: flex;
        align-content: center;
        margin-right: 12px;
    }

    .header-clock.minutes {
        display: inline-block;
    }

    .mb-welcome-wrapper {
        display: none;
    }
}
/*--------------------------------------button / anchor button end-----------------------------------*/

/*-------------------------------- Kontaktpersonen --------------------------*/
.contact-access-mf {
    margin-top: 12px;
}

    .contact-access-mf > button {
        display: block;
        width: 100%;
    }

    .contact-access-mf.ca-selected > button:first-child {
        margin-bottom: 12px;
    }

@media (min-width: 600px) {
    .modal-content {
        padding: 20px 16px;
        border-radius: 8px;
    }

    .contact-access-mf {
        text-align: right;
    }

    .ca-selected {
        display: flex;
        justify-content: space-between;
        gap: 8px;
    }

    .contact-access-mf.ca-selected > button:first-child {
        margin-bottom: unset;
    }
}
/*----------------------------------------------------------------------------------------*/
/*------------------------------ Med plan/cam buttons -------------------------------------------*/

div.case-wrapper > div.modal.alert-popup > div.modal-dialog > div.modal-content > div.modal-body {
    padding: unset !important;
}

    div.case-wrapper > div.modal.alert-popup > div.modal-dialog > div.modal-content > div.modal-body > button:nth-child(1) {
        background-color: var(--button-success-color) !important;
        border: none !important;
    }

    div.case-wrapper > div.modal.alert-popup > div.modal-dialog > div.modal-content > div.modal-body > button:nth-child(2) {
        display: none !important;
    }

    div.case-wrapper > div.modal.alert-popup > div.modal-dialog > div.modal-content > div.modal-body > button:nth-child(3) {
        background-color: unset !important;
        background-color: var(--button-danger-color) !important;
        color: var(--button-text-color) !important;
        border: none !important;
        border-radius: 8px !important;
    }

        div.case-wrapper > div.modal.alert-popup > div.modal-dialog > div.modal-content > div.modal-body > button:nth-child(1):hover,
        div.case-wrapper > div.modal.alert-popup > div.modal-dialog > div.modal-content > div.modal-body > button:nth-child(3):hover {
            background-color: var(--button-primary-hover-color) !important;
            border-radius: 8px !important;
        }

div.case-wrapper > div.modal.alert-popup > div.modal-dialog > div.modal-content > div.modal-body {
    text-align: center;
}

    div.case-wrapper > div.modal.alert-popup > div.modal-dialog > div.modal-content > div.modal-body > button {
        display: inline-block;
        width: unset !important;
        width: 47% !important;
        border-radius: 8px !important;
        color: var(--button-text-color) !important;
    }

        div.case-wrapper > div.modal.alert-popup > div.modal-dialog > div.modal-content > div.modal-body > button:hover {
            width: unset !important;
            width: 47% !important;
            background-color: var(--button-primary-hover-color) !important;
            color: var(--button-text-color) !important;
            border-radius: 8px !important;
        }

@media (min-width: 1280px) {
    div.case-wrapper > div.modal.alert-popup > div.modal-dialog > div.modal-content > div.modal-body > button {
        margin: unset !important;
        margin: 0 10px 10px 0 !important;
    }
}

.dxbl-stacklayout > .dxbl-stacklayout-root, .dxbl-gridlayout > .dxbl-gridlayout-root {
    min-height: calc(100vh - 48px);
}

.dxbl-text-edit .dxbl-text-edit-input {
    padding: 8px;
}

.dxbl-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-btn:not(.dxbl-nav-expand-btn-custom) {
    display: none;
}

.dxbl-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-container:not(.dxbl-disabled):not(:disabled) {
    padding-left: 4px;
    font-size: 1rem;
}

    .dxbl-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-container:not(.dxbl-disabled):not(:disabled).dxbl-active {
        background-color: #708bc3;
    }

.dxbl-badge.dxbl-text {
    background-color: #4dd22c;
    color: #ffffff;
}

.dxbl-text-edit.valid.modified:not([type=checkbox]).dx-without-border {
    --dxbl-text-edit-focus-shadow-color: unset;
    --dxbl-text-edit-focus-border-color: unset;
    --dxbl-text-edit-border-color: unset;
    --dxbl-text-edit-focus-border-color: unset;
    border: 1px solid #ced4da;
}

    .dxbl-text-edit.valid.modified:not([type=checkbox]).dx-without-border.dx-calendar-invalid,
    .dx-without-border.dx-calendar-invalid {
        outline: 1px solid red !important;
    }


#diat-box.form-control.dxbl-text-edit {
    display: flex;
    padding: 2px 4px;
}

.icon-mlr {
    margin: 0 4px;
}

.icon-mr {
    margin-right: 4px;
}

.icon-t1 {
    top: 1px;
}

.icon-t2 {
    top: 2px;
}

.link-white-color {
    color: #fff;
}

.dark-blue-text-color {
    color: var(--background-dark-blue-color);
}

.ul-style {
    list-style-type: disc;
    padding-inline-start: 40px;
    margin: 1em 0;
}

/* index page */
@media (min-width: 870px) {
    .fb-100 {
        flex-basis: 100%;
    }

    .fb-70 {
        flex-basis: 70%;
    }

    .fb-60 {
        flex-basis: 60%;
    }

    .fb-50 {
        flex-basis: 50%;
    }

    .fb-40 {
        flex-basis: 40%;
    }

    .fb-30 {
        flex-basis: 30%;
    }
}

/* Index loading container Parent container to center the loading animation */
.loading-container {
    margin-top: 18px;
    text-align: center;
}

/* Progress bar container */
.progress-bar {
    max-width: 100%;
    height: 20px;
    background-color: #ccc;
    border-radius: 10px;
    overflow: hidden;
  /*  position: relative;*/
    margin-bottom: 10px;
}

/* Actual progress */
.progress {
    height: 100%;
    background-color: #5f368d; /* Accent color */
    width: 0;
    animation: loading 60s linear forwards;
}

/* Keyframes for the progress animation */
@keyframes loading {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

/* Loading text */
.loading-text {
    font-style: italic;
    color: #545b61;
}

/* Keyframes to simulate percentage counting */
@keyframes updateText {
    0% {
        counter-increment: progress 0;
    }

    100% {
        counter-increment: progress 100;
    }
}