@charset "utf-8";
/* CSS Document */

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    /*background-color: #fff;*/
    background-color: #17669D;
    -webkit-user-select: none;
    user-select: none;
    color: #101010;
}

div.top-menu {
    margin: auto;
    padding-left: 30px;
    padding-right: 30px;
    height: 44px;
    background-color: white;
    border-bottom: 1px solid #E1E1E1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

div.top-menu-item {
    padding-left: 13px;
    padding-right: 13px;
    height: 44px;
    text-align: right;
}

div.top-menu-item a:link,
div.top-menu-item a:visited {
    text-decoration: none;
}

p.top-menu-text {
    font-size: 12px;
    font-weight: 300;
    margin-top: 14px;
    font-family: Heebo, Arial, Helvetica, sans-serif;
    line-height: 1.5;
    letter-spacing: 0.5px;
    color: #333333;
}

div.header {
    margin: auto;
    height: 119px;
    background: white;
    border-bottom: 1px solid #E1E1E1;
}

#logo {
    position: relative;
    top: 29px;
    left: 20px;
}

div.header-menu {
    margin: auto;
    position: relative;
    padding-left: 20px;
    height: 49px;
    background: white;
    border-bottom: 1px solid #CCCCCC;
    box-shadow: 0 5px 15px -5px #CCCCCC;
}

div.header-menu-item {
    padding-right: 20px;
    height: 49px;
    float: left;
}

p.header-menu-text {
    font-size: 17px;
    font-weight: 400;
    margin-top: 12px;
}

a.header-menu-link {
    font-size: 17px;
    font-weight: 400;
    color: #333333;
    text-decoration: none;
    display: inline-block;
    line-height: 49px;
    padding: 0 12px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

a.header-menu-link:hover {
    color: #17669d;
}

.header-container {
    position: sticky;
    top: 0;
    width: 100%;
    max-width: 1300px;
    margin: auto;
    z-index: 900;
    background-color: #EEEEEE;
}

.header-menu-tabs {
    margin: auto;
    opacity: 0.5;
    display: flex;
    justify-content: space-between;
    height: 49px;
    border-bottom: 1px solid #CCCCCC;
    margin-left: 20px;
    margin-right: 20px;
    pointer-events: none;
    box-shadow: 0 5px 10px -5px #CCCCCC;
}

.tab-button {
    background-color: white;
    border: none;
    padding: 10px 20px;
    font-size: 17px;
    font-weight: 400;
    color: #333333;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 100%;
    border-radius: 10px 10px 0 0;
    width: 300px;
}

.tab-button:hover {
    background-color: #006ce14a;
}

.tab-button.active {
    /*background-color: #027bff;*/
    background-color: #0056b3;
    color: white;
}

div.window {
    flex: 1;
    transition: margin-left 0.2s ease;
}

div.navigation {
    width: 273px;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
    min-width: 310px;
    background-color: #0b304a;
    position: fixed;
    top: 0;
    left: 0;
    transition: width 0.2s ease;
    z-index: 1000;
}

div.page {
    position: relative;
    margin: auto;
    width: 100%;
    max-width: 1300px;
    background-color: #EEEEEE;
}

div.content {
    position: relative;
    margin: auto;
    width: 100%;
    max-width: 1260px;
    background: white;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #EEEEEE;
    box-shadow: 3px 3px 3px #DDDDDD;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    min-height: 1000px;
    box-sizing: border-box;
}

div.footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: auto;
    width: 100%;
    max-width: 1300px;
    height: 150px;
    background: #363839;
    border-top: 1px solid #EEEEEE;
    border-bottom: 1px solid #4B4C4D;
    box-sizing: border-box;
    overflow: hidden;
}

.footer-item {
    flex: 1;
    text-align: center;
}

div.footer a,
div.footer a:visited {
    text-decoration: none !important;
    color: inherit;
    transition: color 0.3s ease;
}

.footer-text {
    font-family: 'Heebo', sans-serif;
    font-size: 15px;
    color: #AAA;
    line-height: 1.8;
    margin: 4px 0;
    font-weight: 300;
}

div.footer a:hover .footer-text,
div.footer a:hover {
    color: white !important;
}

div.copyright {
    position: relative;
    margin: auto;
    width: 100%;
    max-width: 1300px;
    height: 62px;
    background: #282A2B;
    border-top: 1px solid #282A2B;
    border-bottom: 1px solid #282A2B;
    text-align: center;
    box-sizing: border-box;
}

/* Global Responsive Overrides */
@media (max-width: 1300px) {
    .header-container {
        width: 100% !important;
    }
}

@media (max-width: 850px) {
    div.footer {
        flex-direction: column !important;
        height: auto !important;
        padding: 30px 20px !important;
    }

    div.footer-item {
        margin-bottom: 20px;
    }

    div.content {
        padding-top: 30px;
    }
}

p.copyright-text {
    font-family: 'Heebo', sans-serif;
    font-size: 14px;
    color: #777;
    margin-top: 22px;
    font-weight: 300;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 100;
    text-align: center;
    padding-top: 20%;
}

#overlay-image {
    width: 160px;
    height: 160px;
    object-fit: contain;
    padding: 16px;
    border: solid 1px #17669d;
    border-radius: 200px;
    box-shadow: inset 0 0 10px 1px #17669d;
    animation: opac 0.8s
}

@keyframes opac {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

#welcome-title {
    font-size: 40px;
    font-family: Heebo, Arial, Helvetica, sans-serif;
    color: #888888;
    letter-spacing: -1px;
}

#welcome-text {
    font-size: 17px;
    font-family: Heebo, Arial, Helvetica, sans-serif;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: #333333;
    padding: 20px;
}

#download-frame {
    border: 3px dashed #17669d;
    z-index: 9999;
    pointer-events: none;
    background-color: rgba(23, 102, 157, 0.1);
    display: none;
    border-radius: 15px;
}

.interval_download_area,
.overview_download_area,
.analysis_download_area,
.three_download_area,
.calibration_download_area,
.profile_download_area,
.aiprompt_download_area,
.compare_download_area,
.classification_download_area {
    border: 3px solid transparent;
    /* Platzhalter für den Rahmen */
    border-radius: 15px;
    box-sizing: border-box;
    padding: 10px;
}

.download-active-border {
    border-color: #17669d;
    /* Ändert nur die Farbe des Rahmens */
    border-style: dashed;
}

.control-bar {
    position: relative;
    background-color: #fff;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: auto auto;
    gap: 20px;
    justify-items: center;
    margin: auto;
}

.dropdown-button {
    cursor: pointer;
    background-color: #F9F9F9;
    color: #333333;
    padding: 0 12px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.2s ease;
    width: 140px;
    box-shadow: 3px 3px 5px #CCCCCC;
    border: none;
}

.dropdown-button img {
    margin-right: 0;
    /* managed by gap */
}

/* ... existing styles ... */

.dropdown-button:hover {
    background-color: #e0e0e0;
}

.dropdown-content {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 500;
    border-radius: 10px;
    padding: 10px;
    /* animation: fadeIn 0.3s ease-out; */
    /* wird nicht mehr benötigt */
    /* width: 750px; */
    box-sizing: border-box;
    margin-top: 10px;
    transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
}

.dropdown:hover .dropdown-content,
.dropdown-content.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out;
}

.dropdown-content.show {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.dropdown-group {
    padding: 20px 10px;
    border-bottom: 1px solid #ccc;
    width: 100%;
    box-sizing: border-box;
}

.dropdown-group:last-child {
    border-bottom: none;
}

.dropdown-group.full-width {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.dropdown-group h4 {
    margin: 0 0 10px 0;
    color: #18669d;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: left;
    width: 100%;
}

.three-by-three-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    /* Oder den gewünschten Abstand */
}

.dropdown-item-row {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.dropdown-item-row.full-width-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 10px;
}

.dropdown-item,
.copy-dropdown-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.2s ease;
    border: 2px solid transparent;
    box-sizing: border-box;
    text-align: left;
    background-color: #f9f9f9;
}

.dropdown-item.active,
.copy-dropdown-item.active {
    background-color: #f1f1f1;
    border-color: #007bff;
}

.dropdown-item:hover,
.copy-dropdown-item:hover {
    background-color: #f1f1f1;
}

.dropdown-item span,
.copy-dropdown-item span {
    font-weight: bold;
    color: #333;
}

.dropdown-item .description,
.copy-dropdown-item .description {
    font-size: 12px;
    color: #666;
    margin: 0;
}

.dropdown-container {
    position: relative;
    display: inline-block;
}

#index-dropdown {
    width: 550px;
    margin-left: -410px;
}

#settings-dropdown {
    width: 750px;
    margin-left: -610px;
}

#copy-dropdown {
    width: 550px;
}

#copy-dropdown .dropdown-item-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* Timer-Anzeige für Copy-Button */
.copy-timer-container {
    position: relative;
    display: inline-block;
}

.copy-timer-overlay {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 32px;
    height: 32px;
    background-color: #ff6b35;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: white;
    z-index: 101;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
}

.copy-timer-overlay.active {
    opacity: 1;
    transform: scale(1);
}

.copy-timer-overlay.warning {
    background-color: #ffa500;
    animation: pulse 1s infinite;
}

.copy-timer-overlay.expired {
    background-color: #dc3545;
    animation: none;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.dropdown-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f8f9fa;
}

.dropdown-button:disabled .copy-timer-overlay {
    background-color: #6c757d;
}

/* History */
/* Reihe 1 */
#history-print-button {
    grid-column: 1;
    grid-row: 1;
}

/* Reihe 2 */
#history-test-button {
    grid-column: 1;
    grid-row: 2;
}

/* Chart */
/* Reihe 1 */
#chart-print-button {
    grid-column: 1;
    grid-row: 1;
}

#save-local-file-button {
    grid-column: 2;
    grid-row: 1;
}

#load-first-local-file-button {
    grid-column: 3;
    grid-row: 1;
}

#save-button {
    grid-column: 4;
    grid-row: 1;
}

#delete-button {
    grid-column: 5;
    grid-row: 1;
}

#status-toggle-button {
    grid-column: 1;
    grid-row: 2;
    background-color: #7ebfff;
}

/* Chart */
/* Reihe 2 */
#index-dropdown-container {
    grid-column: 6;
    grid-row: 1;
}

#settings-dropdown-container {
    grid-column: 7;
    grid-row: 1;
}

#load-second-local-file-button {
    grid-column: 3;
    grid-row: 2;
}

#overlay-button {
    grid-column: 4;
    grid-row: 2;
}

/* General Health Form */
/* Reihe 1 */
#general-health-print-button {
    grid-column: 1;
    grid-row: 1;
}

#general-health-save-button {
    grid-column: 4;
    grid-row: 1;
}

/* Reihe 2 */
#general-health-expand-all-sections {
    grid-column: 1;
    grid-row: 2;
}

#general-health-collapse-all-sections {
    grid-column: 2;
    grid-row: 2;
}

/* Microbiology Form */
/* Reihe 1 */
#microbiology-print-button {
    grid-column: 1;
    grid-row: 1;
}

#microbiology-save-button {
    grid-column: 4;
    grid-row: 1;
}

/* Reihe 2 */
#microbiology-expand-all-sections {
    grid-column: 1;
    grid-row: 2;
}

#microbiology-collapse-all-sections {
    grid-column: 2;
    grid-row: 2;
}

.control-button {
    padding: 0 12px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    background-color: #F9F9F9;
    color: #333333;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 3px 3px 5px #CCCCCC;
    width: 140px;
}

.control-button img {
    margin-right: 0;
    /* managed by gap */
}

.control-button i {
    margin-right: 0 !important;
    /* managed by gap */
}

.control-placeholder {
    padding: 0;
    border: none;
    background-color: #FFF;
    height: 45px;
    width: 140px;
    color: white;
}

.control-button:hover {
    background-color: #E8E8E8;
}

.control-button.active {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

.control-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f8f9fa;
}

.remote-control-bar {
    position: absolute;
    margin: auto;
    text-align: center;
    padding: 10px;
    z-index: +100;
    width: 100px;
    background-color: #F9F9F9;
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    border-radius: 10px;
    box-shadow: 2px 2px 10px #D2D2D2;
    top: 443px;
    animation: opac 0.8s;
}

.left-remote-control-bar {
    left: -60px;
}

.right-remote-control-bar {
    left: 1025px;
    width: 115px;
}

.right-remote-control-bar .remote-control-button {
    width: 90px;
}

.remote-control-button {
    position: relative;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    padding: 10px;
    z-index: +100;
    width: 50px;
    background-color: #F9F9F9;
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    border-radius: 5px;
    box-shadow: 3px 3px 5px #D2D2D2;
    cursor: pointer;
}

.remote-control-button:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.remote-control-button.active {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

.form-header {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 17px;
    margin-top: 30px;
    width: 1100px;
}

.form-header label {
    font-family: Arial, sans-serif;
    font-weight: normal;
    font-size: 18px;
    white-space: nowrap;
}

.header-row {
    display: flex;
    align-items: center;
    gap: 25px;
}

.form-title {
    width: 420px;
    margin: 0;
    font-size: 42px;
    font-family: "Arial Narrow", Arial, Sans-Serif;
    font-weight: bold;
    font-stretch: condensed;
    /* Für moderne Browser */
    transform: scaleX(0.85);
    /* Fallback für iOS/Safari */
    transform-origin: left center;
    white-space: nowrap;
    text-align: left;
}

.header-input {
    flex-grow: 1;
    padding: 3px 4px;
    border: 1px solid #999999;
    border-radius: 2px;
    font-size: 18px;
    font-family: "Arial", Regular, Sans-Serif;
    background-color: #e7f3fd;
}

.input-container {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
}

.header-input.empty-field {
    border: 1px solid #dc3545;
    background-color: #f8d7da;
}

.form-header-checkbox-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.toggle-checkbox {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.toggle-checkbox.active .check-indicator {
    border-color: #17669D;
}

.toggle-checkbox.active .check-indicator span {
    display: block;
}

.toggle-label {
    white-space: nowrap;
    font-size: 18px;
}

.check-indicator {
    width: 30px;
    height: 30px;
    border: 2px solid #ccc;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    transition: all 0.2s ease;
    font-size: 0;
}

.check-indicator:hover {
    background-color: #e7f3fd;
    border-color: #17669D;
}

.checkbox-with-input-container {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-grow: 1;
}

.checkbox-with-input-container .toggle-checkbox {
    padding: 0;
}

.checkbox-with-input-container .header-input {
    flex-grow: 1;
}

.toggle-checkbox.active .check-indicator svg {
    display: block !important;
}

#reevaluation_note,
#general_health_reevaluation_note,
#microbiology_reevaluation_note {
    width: 410px;
}

#periodontal_chart_grids {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

.chart-container {
    position: relative;
    left: 50px;
    margin-top: 30px;
}

.upper-jaw,
.lower-jaw {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}

.chart-table-copyright {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 2px;
    margin-bottom: 0px;
}

.copyright-content {
    width: 783px;
    display: flex;
    justify-content: space-between;
    position: relative;
    left: 10.5px;
    font-family: 'Heebo', Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 300;
    color: #333333;
    letter-spacing: 0.5px;
}

#print-upper-jaw,
#print-lower-jaw {
    position: relative;
    width: 1100px;
}

.quadrant-container {
    display: flex;
    flex-direction: row;
    z-index: 2;
}

#quadrant_1 {
    position: relative;
    left: 0;
}

#quadrant_2 {
    position: relative;
    left: 21px;
}

#quadrant_3 {
    position: relative;
    left: 16px;
}

#quadrant_4 {
    position: relative;
    left: 5px;
}

.row-labels-column {
    display: flex;
    flex-direction: column;
    min-width: 130px;
    z-index: 3;
    position: absolute;
}

#upper-jaw-labels {
    left: -135px;
}

#lower-jaw-labels {
    left: -535px;
}

.row-label {
    height: 20px;
    padding: 2.4px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-right: 5px;
    text-align: right !important;
    border: none !important;
    font-size: 14px;
    font-family: "Arial Narrow", Arial, Sans-Serif;
    font-weight: unset;
    font-stretch: condensed;
    /* Für moderne Browser */
    transform: scaleX(0.85);
    /* Fallback für iOS/Safari */
    transform-origin: right center;
    /* Rechts ausgerichtet, da text-align: right */
}

.row-labels-column .row.hidden {
    display: none !important;
}

.row-label.hidden {
    display: none !important;
}

.horizontal-line {
    width: 789px;
    height: 4.5px;
    background-color: #101010;
    border-radius: 5px;
    z-index: 10;
    margin: 18px 0;
    position: relative;
    left: 165px;
    display: flex;
    justify-content: center;
}

#summary-metrics-container {
    display: flex;
    margin: 10px 0;
    padding: 5px 0;
    font-size: 14px;
    font-weight: bold;
    position: relative;
    top: -20.5px;
    background-color: #ffffff;
    border: 2px black solid;
    width: 95%;
    height: 10px;
    justify-content: space-evenly;
    align-items: center;
}

.summary-metric {
    display: flex;
    align-items: center;
}

.summary-metric .metric-label {
    font-weight: normal;
    margin-right: 5px;
}

.summary-metric .metric-value {
    font-weight: bold;
    color: #000;
}

.row {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.9px solid #101010;
    height: 20px;
    padding: 2.4px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.row.hidden {
    display: none !important;
}

.tooth-column .row.hidden {
    display: none !important;
}

.empty-row {
    height: 100px !important;
    padding: 0;
    border: none !important;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.tooth-inner-content.tooth-content-hidden {
    display: none !important;
}

.implant-active .furcation-button {
    display: none !important;
}

.implant-active .mobility-input {
    display: none !important;
}

.hover-button {
    background-color: #ECECEC;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    font-weight: bold;
    height: 18px;
    font-size: 10px;
}

.hover-button:hover {
    background-color: #D3DFE7;
    border-color: #999;
}

.furcation-button {
    position: relative;
    padding: 0;
}

.furcation-button {
    min-width: 16px;
    min-height: 16px;
    background-color: #ECECEC;
}

.furcation-button svg {
    width: 100%;
    height: 100%;
    max-width: 16px;
    max-height: 16px;
}

.implant-button {
    position: relative;
    padding: 0;
}

.implant-button svg {
    width: 100%;
    height: 100%;
    max-width: 16px;
    max-height: 16px;
}

.tooth-number {
    font-size: 14px;
    font-family: "Arial Narrow", Sans-Serif;
    font-weight: bold;
}

.tooth-number:hover {
    background-color: #D3DFE7;
    border-color: #0056b3;
}

.tooth-column {
    display: flex;
    flex-direction: column;
    position: relative;
}

.tooth-missing .tooth-inner-content {
    display: none !important;
}

.tooth-number.tooth-missing {
    opacity: 0.45;
}

.tooth-missing .furcation-button,
.tooth-missing [data-bop],
.tooth-missing [data-pi],
.tooth-missing input {
    pointer-events: none;
}

.single-button {
    width: 100%;
    height: 100%;
}

.single-button-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.single-button-container .furcation-button,
.single-button-container .hover-button {
    width: 100%;
    height: 100%;
}

.two-button-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.two-button-container .hover-button {
    width: calc(50% - 0.5px);
    height: 100%;
}

.three-button-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 1px;
    height: 100%;
}

.three-button-container .hover-button {
    width: calc(33.33% - 1px);
    height: 100%;
}

.input-group {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 1px;
    height: 18px;
}

.input-group input {
    width: calc(33.33% - 1px);
    border: none;
    font-family: "Arial Narrow", Sans-Serif;
    font-stretch: extra-condensed;
    font-size: 14px;
    text-align: center;
    padding: 0;
    color: #101010;
}

.single-input {
    width: 100%;
    height: 18px;
    text-align: center;
    border: none;
    background-color: #fff;
    padding: 0;
    box-sizing: border-box;
    font-family: "Arial Narrow", Sans-Serif;
    font-size: 14px;
    color: #101010;
}

.bop-indicator {
    width: 80%;
    height: 100%;
    background-color: #f66;
    border-radius: 20% / 150%;
    display: none;
}

.pi-indicator {
    width: 80%;
    height: 100%;
    background-color: #09f;
    border-radius: 20% / 150%;
    display: none;
}

.bop-indicator.active,
.pi-indicator.active {
    display: block;
}

body.shift-pressed .hover-button[data-bop]:hover,
body.shift-pressed .hover-button[data-pi]:hover {
    background-color: #b3d9ff !important;
    cursor: crosshair;
}

.input-group input.pd-high {
    color: red !important;
}

input:focus {
    background-color: #e6e6e6;
    border-radius: 2px;
    box-shadow: none;
    display: block;
    color: #101010;
}

input::selection {
    background-color: #add8e6;
    border-radius: 2px;
    color: #101010;
}

#upper_jaw_svg {
    position: relative;
    left: 365px;
}

#lower_jaw_svg {
    position: relative;
    left: 360px;
}

:root {
    --pd-5mm-color: rgba(255, 235, 0, 0.53);
    --pd-6mmplus-color: rgba(255, 165, 0, 0.53);
}

.pd-highlight-5mm {
    box-shadow: var(--pd-5mm-color) 0px 0px 4px 2px;
    background-color: var(--pd-5mm-color);
}

.pd-highlight-6mmplus {
    box-shadow: var(--pd-6mmplus-color) 0px 0px 4px 2px;
    background-color: var(--pd-6mmplus-color);
}

.modal-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
    justify-content: center;
    background-color: rgba(128, 128, 128, 0.25);
    animation: opac 0.8s;
}

.modal {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 10%);
    width: 1100px;
    position: relative;
    height: 1500px;
    overflow-y: auto;
    top: 180px;
}

.modal.classification-modal {
    height: 1650px;
}

.modal.interval-modal {
    height: 1060px;
}

.modal.overview-modal {
    height: 1100px;
}

.modal.three-modal {
    height: 1450px;
}

.modal.analysis-modal {
    height: 1570px;
}

.modal.qrcode-modal {
    height: 950px;
}

.modal.calibration-modal {
    height: 1600px;
}

.modal.bone-modal,
.modal.pockets-modal,
.modal.furcation-modal {
    height: 1360px;
}

.modal.profile-modal {
    height: 1650px;
    top: 150px;
}

.modal.aiprompt-modal {
    height: 1100px;
    top: 150px;
}

.modal.compare-modal {
    height: 1160px;
    top: 150px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin: 40px 40px 0;
}

#staticModalCloseButton {
    position: relative;
    right: -20px;
    top: -20px;
    font-size: 34px;
    width: 34px;
    height: 34px;
    line-height: 0;
    /* Reset default but Flexbox handles centering */
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
    padding: 0;
    font-family: Arial, sans-serif;
    transform: translateY(-1px);
}

#staticModalCloseButton:hover,
#exportImportModalCloseButton:hover {
    border-radius: 50%;
    background-color: lightgray;
    color: #101010;
}

.modal-header h2 {
    margin: 0;
    font-weight: normal;
}

.modal-header button {
    background: none;
    border: none;
    font-size: 34px;
    cursor: pointer;
    color: #888;
    text-align: center;
    font-weight: normal;
}

.modal-body {
    padding: 20px 40px;
}

.modal-section h3 {
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: left;
}

.modal-section p {
    font-size: 18px;
    line-height: 1.5;
    text-align: left;
}

.modal-section img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}

.modal-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ccc;
}

.modal-toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.modal-opt-in-section {
    padding: 10px;
}

.modal-opt-in-section>p {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 10px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: #2196F3;
}

input:checked+.slider:before {
    transform: translateX(26px);
}

.opt-in-info {
    font-size: 14px;
    color: #101010;
    margin-top: 10px;
    text-align: center;
}

.modal-close-btn,
.modal-download-btn,
.modal-save-btn {
    border: none;
    position: relative;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    padding: 10px;
    z-index: +100;
    width: 150px;
    background-color: #F9F9F9;
    font-family: Arial, Sans-Serif;
    font-size: 14px;
    border-radius: 5px;
    box-shadow: 3px 3px 5px #D2D2D2;
    cursor: pointer;
}

.modal-close-btn:hover,
.modal-download-btn:hover,
.modal-save-btn:hover {
    background-color: #E8E8E8;
}

.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1050;
    pointer-events: none;
}

.toast {
    background-color: #f2f2f2;
    color: #333;
    padding: 15px 25px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 15px;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    pointer-events: auto;
    max-width: 350px;
    text-align: left;
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast.success {
    border-left: 5px solid #28a745;
}

.toast.error {
    border-left: 5px solid #dc3545;
}

.toast.success #toast-message::before {
    content: '✓';
    color: #28a745;
    margin-right: 10px;
    font-weight: bold;
    font-size: 1.2em;
}

.toast.error #toast-message::before {
    content: '×';
    color: #dc3545;
    margin-right: 10px;
    font-weight: bold;
    font-size: 1.2em;
}

#toast-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #888;
    padding: 0;
}

#toast-close-btn:hover {
    color: #333;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.status-charts {
    height: 355px !important;
}

#upper_status_charts,
#lower_status_charts {
    width: 787px;
    height: 325px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

#upper_status_charts {
    left: 365px;
}

#lower_status_charts {
    left: 360px;
}

.chart-placeholder {
    position: relative;
    width: 787px;
    height: 325px;
}

.chart-placeholder .background-image {
    height: 102.5%;
    width: 102.5%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: -9px;
    z-index: 1;
}

.implant-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 3;
}

.implant-marker-colored {
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 4px, black calc(100% - 4px), transparent);
    mask-image: linear-gradient(to bottom, transparent, black 4px, black calc(100% - 4px), transparent);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.svg-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

.svg-placeholder svg {
    height: 100%;
    width: 100%;
}

.overlay-button.active {
    background-color: #90ee90 !important;
    /* lightgreen */
    color: #000;
}

.load-button.active {
    background-color: #90ee90 !important;
    /* lightgreen */
    color: #000;
}

.chart-container.frozen,
#chart-form-header.frozen {
    pointer-events: none;
    opacity: 1;
    -webkit-user-select: none;
    user-select: none;
}

.input-group input[id^="al_"] {
    background-color: #f1f1f1;
    cursor: default;
    pointer-events: none;
    user-select: none;
}

.spiegeln_vertikal {
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
}

/* Neue CSS-Regeln für das Sondierungs-Dropdown */
.arrow-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    justify-items: center;
    align-items: center;
    width: 100%;
    margin: 20px auto 20px;
    position: relative;
    z-index: 10;
    opacity: 0.8;
}

.arrow-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ccc;
    border-radius: 10px;
    width: 110px;
    height: 35px;
    font-size: 18px;
    cursor: pointer;
    user-select: none;
    background-color: #eef;
    transition: background-color 0.3s;
}

.arrow-cell:hover {
    background-color: #d0ebff;
}

.arrow-cell i {
    margin: 0 5px;
}

.sortable-swap-highlight {
    background-color: #d0ebff !important;
    border: 2px dashed #3399ff;
}

.dashboard-flex-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
    margin-top: 10px;
}

.dashboard-flex-row p {
    margin: 0;
    font-size: 16px;
}

.last-toggle-slider {
    margin-bottom: 0;
}

.button-row-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    align-items: center;
}

.button-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 90%;
}

.button-description {
    flex: 1;
    font-size: 16px;
    color: #444;
    font-family: Arial;
    text-align: left;
}

.edit-button {
    padding: 10px 20px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    cursor: pointer;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: #4CAF50;
}

input:checked+.slider:before {
    transform: translateX(26px);
}

#probing-sequence {
    text-align: center;
    position: relative;
    margin-top: -225px;
    opacity: 0.5;
    width: 100%;
}

#scroll-to-top-button {
    background-color: #C7C7C7;
    bottom: 10px;
    height: 45px;
    position: fixed;
    text-align: center;
    width: 60px;
    opacity: 0.9;
    z-index: 100000;
    transition: all 0.2s ease-in-out 0s;
    line-height: 1;
    border-radius: 4px 4px 0 0;
    display: none;
    right: 75px;
    cursor: pointer;
    border: none;
    outline: none;
    padding-top: 5px;
    color: black;
}

#scroll-to-top-button:hover {
    background-color: #eee;
}

@media (max-width: 850px) {
    #scroll-to-top-button {
        right: 15px;
        bottom: 5px;
        width: 50px;
        height: 40px;
    }
}

.main-chart-container,
.main-history-container,
.main-microbiology-container,
.main-general-health-container {
    display: none;
    /* Alle Container ausblenden */
    position: relative;
}

.main-overlay-container {
    position: relative;
    height: 1000px;
    display: flex;
    /* Beim Laden einblenden */
    justify-content: center;
    align-items: center;
}

.main-history-container,
.main-chart-container,
.main-general-health-container,
.main-microbiology-container {
    align-items: center;
    position: relative;
    flex-direction: column;
    width: 1100px;
    margin: auto;
}

.main-history-container {
    align-items: center;
    position: relative;
    /*padding: 5px 50px;*/
}

.frozen-save-button,
.frozen-delete-button {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    border-color: #f5c6cb !important;
    opacity: 0.8;
    pointer-events: none;
}

/* Edit Patient Modal Styling */
.edit-patient-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
}

.edit-patient-modal-content {
    background-color: #fefefe;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 90%;
    position: relative;
    font-family: Arial, sans-serif;
}

.edit-patient-modal-close {
    color: #aaa;
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    line-height: 0;
    background: none;
    border: none;
    padding: 0;
    font-family: Arial, sans-serif;
    transform: translateY(-1px);
}

.patient-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 34px;
    width: 34px;
    height: 34px;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
    padding: 0;
    font-family: Arial, sans-serif;
    transform: translateY(-1px);
}

.edit-patient-modal-close:hover,
.edit-patient-modal-close:focus {
    color: #000;
    text-decoration: none;
}

.edit-patient-modal-title {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bold;
}

.edit-patient-modal-form-container {
    display: flex;
    flex-direction: column;
}

.edit-patient-form-group {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.edit-patient-form-group label {
    font-weight: bold;
    color: #555;
    margin-bottom: 5px;
    text-align: left;
}

.edit-patient-form-group input[type="text"],
.edit-patient-form-group input[type="date"] {
    width: 100%;
    padding: 8px;
    border: 2px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 17px;
}

.edit-patient-form-group input:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);
}

.edit-patient-button-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 20px;
}

.edit-patient-button-save {
    padding: 5px 10px;
    background-color: #caeec5;
    border: solid #82c582;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}

.edit-patient-button-cancel {
    padding: 5px 10px;
    background-color: #eec5c5;
    border: solid #c58282;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}

.input-error {
    border: 2px solid #dc3545 !important;
}

.error-message {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
    display: none;
}

.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: opacity 0.3s ease-in-out;
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.hidden {
    display: none;
    opacity: 0;
    visibility: hidden;
}

.dark-orange {
    color: #cc5500;
    font-weight: 700;
    padding: 0 10px;
}

.impersonated {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 970px;
    background:
        linear-gradient(to right,
            transparent 0%,
            yellow 5%,
            yellow 95%,
            transparent 100%);
}

/* Export / Import Styles */
#navigation-export-import-button-outer,
#navigation-export-import-button-inner {
    top: 60px !important;
}

#navigation-export-import-button-outer:hover,
#navigation-export-import-button-inner:hover,
#navigation-open-button:hover,
#navigation-hide-button:hover {
    background-color: #d0ebff;
    /* Match hover style of other buttons if needed */
}

.export-import-modal {
    width: 1000px !important;
    height: auto !important;
    max-height: 90vh;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 10%);
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* Remove padding to match standard modal structure where header/body handle margins */
    padding: 0;
    font-family: Arial, sans-serif;
    font-size: 17px;
    z-index: 100000;
}

#exportImportModalCloseButton {
    position: relative;
    right: -20px;
    top: -20px;
    font-size: 34px;
    width: 34px;
    height: 34px;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
    text-align: center;
    font-weight: normal;
    padding: 0;
    font-family: Arial, sans-serif;
    transform: translateY(-1px);
}

#exportImportModalCloseButton:hover {
    border-radius: 50%;
    background-color: lightgray;
    color: #101010;
}

.export-import-modal .modal-header {
    /* Reuse standard modal header style but ensure it matches context */
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin: 40px 40px 0;
}

.export-import-modal .modal-body {
    padding: 20px 40px;
}

.export-import-container {
    display: flex;
    gap: 40px;
    padding: 20px;
}

.export-section,
.import-section {
    flex: 1;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.export-section h3,
.import-section h3 {
    margin-top: 0;
    color: #333;
    border-bottom: 2px solid #17669D;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.export-actions,
.import-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.export-actions .control-button,
.import-actions .control-button {
    width: 100%;
    text-align: left;
    padding-left: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-footer {
    padding: 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
}

/* Export Import Modal Styles - separate to avoid conflicts */
.export-import-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
}

.export-import-modal {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    background: white;
    /*padding: 25px;*/
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    font-family: Arial, sans-serif;
    font-size: 17px;
    z-index: 100000;
}

/* Contact Modal Styles */
.contact-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    justify-content: center;
    align-items: center;
}

.contact-modal {
    display: none;
    position: relative;
    width: 1000px;
    max-width: 90vw;
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    font-family: Arial, sans-serif;
    font-size: 17px;
    z-index: 100000;
    padding: 20px;
}

.contact-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin: 20px 20px 0;
}

.contact-modal .modal-body {
    padding: 20px;
    text-align: left;
}

div.top-menu-social {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 5px;
}

div.top-menu-social .social-icon {
    height: 16px;
    width: auto;
}

div.top-menu-items {
    display: flex;
    align-items: center;
}