body {
    font-family: Arial, Helvetica, sans-serif;
    !important;
    overflow-x: hidden;
}

header, footer {
    width: 100vw;
    height: 5vh;
    background-repeat: repeat-x;
    background-position: left bottom;
}

header {
    top: 0;
    background-image: url(../../Images/header_bg.png);
}

footer {
    bottom: 0;
    overflow: hidden;
    background-image: url(../../Images/footer_bg.png);
}

main {
    width: 100vw;
    height: 90vh;
    overflow: auto;
    background-image: url(../../Images/bg.png);
    background-repeat: repeat;
}

.med_logo {
    transform: translateY(-50%);
    position: relative;
    top: 55%;
    left: 4VW;
    height: 100%;
    width: 15vw;
}

.content_flex {
    position: relative;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 95vw;
    height: 80vh;
    display: flex;
    justify-content: space-between;
}

.content {
    width: 32%;
    height: 100%;
    overflow: hidden;
}

table {
    border-collapse: collapse;
    width: 100%;
    font-size: 1.7vh !important;
}

    table tr {
        border-bottom: 1px solid black;
        height: 4vh;
    }

.table-header {
    /*height: 3vh !important;*/
}

th {
    font-weight: bold;
    background-color: aliceblue;
    border-bottom: 0.3vh solid black;
}

.Dashboard tr {
    font-weight: normal;
    /*display: none;*/
}

.pag-0 {
    display: table-row;
}

td, th {
    /*padding-bottom: 0.5em;*/
    /*    padding-right: 2vh;
    padding-left: 2%;*/
    text-align: center;
}

.table_common {
    height: 100%;
    width: 100%;
    border: 1px solid black;
    overflow-y: hidden;
    background-color: white;
}

.row-Yellow {
    background-color: #F1FFB5 !important;
}

.row-Red {
    background-color: #FF9DA4 !important;
}

.row-Green {
    background-color: #B9FFA6 !important;
}

.row-Blue {
    background-color: #C1F1FF !important;
}

.row-White {
    background-color: White !important;
}

.row-1 {
    background-color: floralwhite !important;
}

.row-0 {
    background-color: white !important;
}

.blue_table .color_sign {
    color: white;
    background-color: blue !important;
}

.green_table .color_sign {
    color: white;
    background-color: green !important;
}

.yellow_table .color_sign {
    background-color: yellow !important;
    color: black !important;
}

.color_sign {
    width: 100%;
    border-bottom: 1px solid black;
    height: 2vh;
    text-align: center;
    font-size: 1vw;
    font-weight: bold;
}

.yellow_table {
    height: 50% !important;
}

.content-second-pie {
    width: 80vw !important;
}

.pie_chart {
    position: relative;
    top: 10vh;
    height: 100%;
    width: 60vw;
}

.ingradient_logo {
    position: relative;
    left: 85vw;
    height: 100%;
}

    .ingradient_logo img {
        position: relative;
        top: 53%;
        transform: translateY(-50%);
        height: 190%;
    }

.crucea_img {
    margin-top: 10%;
    height: 40%;
}

.crucea {
    height: 100%;
    position: relative;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}

.content-second {
    transform: translateY(-50%);
    position: relative;
    top: 47%;
    left: -15%;
    width: 30% !important;
    height: 60% !important;
}

.statistic_table {
    height: 100%;
    width: 100%;
    font-size: 1.2vw !important;
}

.statistic_table tr {
    display: table-row !important;
}

.statistic_table td {
    padding-top: 1.7em;
    padding-left: 2vh;
    padding-right: 2vh;
    text-align: left;
}

.None {
    display: none;
}

.Dashboard {
    height: 100%;
    width: 100%;
}

.DMU_informatie {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    height: 80vh;
}

.DMU_informatie_blue_imagen {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    height: 80vh;
}

.DMU_informatie_from_administration {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    height: 80vh;
}

.DMU_AVC {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 16%;
    top: 50%;
    max-height: 800px;
    max-width: 600px;
}

.DMU_informatie img {
    height: 100%;
}

b {
    font-weight: 700 !important;
}

.PopUp_Container {
    position: absolute;
    z-index: 1000 !important;
    max-width: 53vw;
    min-width: 31vw;
    min-height: 10vw;
    max-height: 32vw;
    transform: translateX(-50%);
    left: 50%;
    background-color: #aef1ffd9;
    border: 1px solid black;
    text-align: center;
    margin-top: 3%;
    /*border-radius: 3vw;*/
    color: black;
}

.popup {
    width: 100%;
    height: 100%;
}

.table_popup {
    width: 100%;
    height: 100%;
    margin: 30px auto;
    /*margin-bottom: 20px;*/
    /*border: 1px solid #dddddd;*/
    border: none;
    border-collapse: collapse;
}

.table_popup td {
    padding: 1vh;
    text-align: center;
}


.table_popup tr {
    vertical-align: central;
    display: table-row !important;
    border-bottom: 0px !important
}

.surgery {
    height: 87vh !important;
    width: 98vw !important;
}

.surgery .table_common {
    background-color: #f5f5f5 !important;
    height: fit-content;
    padding-bottom: 1rem;
}

.surgery .td {
    text-align: center;
}

.floor {
    background-color: #78B2AF;
    color: white;
}


.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    justify-items: center;
    margin-top: 0.5rem;
}

.grid-container > *:only-child {
    grid-column: 1 / 3;
    justify-self: center;
}

.surgery_section {
    width: 20%;
}

.table_surgery td {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.table_surgery tr {
    border-bottom: none;
}

.grid-container > :last-child:nth-child(2n+1) {
    grid-column: 1 / 3;
    justify-self: center;
}

.table_surgery {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    width: 96vw;
    margin: 0 auto;
    height: fit-content;
    padding-bottom: 1rem;
}

.table_surgery th {
    background: linear-gradient(135deg, #009688, #004d40);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 1vh 0.5vw;
    border-bottom: 0;
}

.table_surgery th.floor {
    background: linear-gradient(135deg, darkcyan, teal);
}

.table_surgery tr:nth-child(even) td {
    background-color: #fdfdfd;
}

.table_surgery tr:nth-child(odd) td {
    background-color: #fefefe;
}

.table_surgery td {
    border-right: 1px solid #ccc;
}

.table_surgery td:last-child {
    border-right: none;
}

.table_surgery tr {
    border-bottom: 1px solid #ccc !important;
}

.box {
    border: 1px solid black;
    width: 100%;
    padding-top: 0.25rem;
    padding-bottom: 0.4rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.10);
    border-radius: 8px;
    color: #fff;
    text-align: center;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
}


.box > * {
    margin: 0.25rem 0;
}

.color-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.legend-item {
    display: flex;
    align-items: center;
    font-size: 1em;
    gap: 0.3rem;
    font-weight: normal;
}

.legend-color {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 1px solid #fff;
}

.box-1 {
    background: linear-gradient(135deg, #E7211E 0%, #941F1C 100%);
}

.legend-color.red {
    background-color: #E7211E;
}

.box-2 {
    background: linear-gradient(135deg, #19C121 0%, #285C2B 100%);
}

.legend-color.green {
    background-color: #19C121;
}

.box-3 {
    background: linear-gradient(135deg, #2197FF 0%, #135A90 100%);
}

.legend-color.blue {
    background-color: #2197FF;
}

.box-4 {
    background: linear-gradient(135deg, #CF99FB 0%, #A031FB 100%);
}

.legend-color.yellow {
    background-color: #CF99FB;
}

.box-5 {
    background: linear-gradient(135deg, #D07D00 0%, #A45F00 100%);
}

.legend-color.orange {
    background-color: #D07D00;
}

.chart-container {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}

.chart-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chart-title {
    margin-bottom: 0.5rem;
    font-weight: bold;
    text-align: center;
}

/*.chart-item {
    width: 17vw;
    height: 17vw;
}

.chart-item canvas {
    width: 100%;
    height: 100%;
}*/

.chart-container {
    /*width: 40vw;*/
    height: 33vh;
}

.barchart {
    text-align: center;
    margin-top: 1rem;
}

.barchart-container {
    width: 60vw;
}

.workinghourschart-container {
    width: 30vw;
}

.charts-container {
    width: 90vw !important;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

@media (max-width: 1000px) {
    .chart-container {
        width: 90vw !important;
        margin: 0 auto;
    }

    .charts-container {
        display: block;
        justify-content: initial;
    }
}


.epilLogo1 {
    display: block;
    text-align: center;
    margin: 0px auto;
    width: 40%;
}

.epilLogo2 {
    display: block;
    margin: 25% auto;
}
.epilinfo1 {
    display: block;
    width: 40%;
    float: left;
    margin: 0px auto;
}

.epilinfo2 {
    display: block;
    width: 40%;
    float: right;
    margin: 0px auto;
}