html {
  font-size: 14px;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    /*padding-top: 48px;*/
    margin-bottom: 60px;
    background-color: #f8f9fa;
}

/* Navigation Bar */
.compact-navbar {
    padding-top: 0.25rem; /* Standard: ~0.5–1rem */
    padding-bottom: 0.25rem;
}

.navbar-brand img {
    max-height: 30px;
    height: auto;
}

.navbar-nav .nav-link {
    display: flex;
    align-items: center;
    height: 100%;
}

.logout-btn {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
}

/*Large devices (small pc/notebooks, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {
    .row-with {
        width: 75%;
    }
}

/*X-Large devices (medium pc/notebooks, 1200px and up)*/
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .row-with {
        width: 60%;
    }
}

/*XX-Large devices (large pc/notebooks, 1400px and up)*/
@media (min-width: 1400px) {
    .row-with {
        width: 45%;
    }

    .row-with-bigger {
        width: 60%;
    }

    .row-with-big {
        width: 75%;
    }

    .row-with-biggest {
        width: 90%;
    }
}

/* Google Material Icons based on Google Fonts */
@font-face {
    font-family: 'Material Icons Outlined';
    font-style: normal;
    font-weight: 400;
    /*src: url('/fonts/material-icons/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2') format('woff2');*/
    /*font-display: block;*/ /* verhindert das Anzeigen von Fallback-Text */
}

.material-icons-outlined {
    font-family: 'Material Icons Outlined' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /*visibility: hidden;*/ /* Icons zunächst ausblenden */
}

.adjust-icon-btn {
    vertical-align: -0.24rem;
}

.material-icons-outlined.md-18 {
    font-size: 18px;
}

.material-icons-outlined.md-24 {
    font-size: 24px;
}

/* Background- und Border-Colors */
.bg-app {
    background-color: #f8f9fa;
}

.bg-static {
    /*background-color: #e8e8e8;*/
    background-color: #f1f1f1;
}

.bg-replace {
    background-color: gainsboro;
}

.bg-keyboard-light {
    background-color: #f1f1f1;
}

.border-lightgray {
    border-color: lightgray;
}

/* Keyboard Keybuttons and Rows (btn-groups) */
/* Fixe Höhe für die btn-group */
.key-row-height {
    height: 50px;
    max-height: 50px;
    width: 100%;
}

.key-row-height-big {
    height: 60px;
    max-height: 60px;
    width: 100%;
}

    /* Buttons auf volle Höhe strecken und gleich breit machen */
    .key-btn-cell .btn {
        height: 100%;
        margin: 0; /* kein spacing */
        font-size: 18px !important;
        /*font-size: 24px !important;*/
        font-weight: 600;
        color: white;
        line-height: 1 !important;
        flex: 1 1 0;
    }

.btn-group {
    display: flex !important;
}

.btn.sub-key-button {
    font-size: 18px !important;
    /*font-size: 24px !important;*/
    font-weight: 600;
    /*color: white;*/
    line-height: 1 !important;
}

/* Sizes, Paddings and Margins */
.ctrl-btn-size {
    height: 50px;
    max-height: 50px;
}

.tb-btn-size {
    height: 60px;
    max-height: 60px;
    width: 100%;
}

.tb-fs-lg {
    font-weight: 400 !important;
    font-size: 20px !important;
}

.img-size {
    width: 35px;
    height: 35px;
}

.img-size-phrase {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

img.svg-icon {
    width: 35px;
    height: 35px;
    object-fit: contain; /* optional, falls aspect ratio wichtig ist */
}

.p-phrase-button {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

.btn-img {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.icon-fix-size {
    font-size: 43px; /* exakt wie .img-size */
    line-height: 43px; /* optional für vertikale Zentrierung */
}

.inputbox-size {
    height: 60px;
    max-height: 60px;
    width: 100%;
}

.btn.text-break {
    /*line-height: 1;*/
    -moz-hyphens: auto;
    /*-o-hyphens: auto;*/
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word; /* Bricht das Wort bei Bedarf */
}

.break-badge {
    /*width: 90%;*/
    line-height: 1;
    white-space: normal; /* Erlaubt Zeilenumbruch */
    overflow-wrap: break-word; /* Bricht das Wort bei Bedarf */
    max-width: 100%; /* Verhindert, dass der Badge breiter wird als der Button */
    hyphens: auto; /* Aktiviert automatische Silbentrennung */
    transition: width 0.3s; /* Für einen sanften Übergang */
}

.btn.tb-smaller-font {
    font-size: small;
}

.badge-bottom-center {
    margin-top: -5px;
}

.narrow {
    width: 95%; /* Breite auf 90% setzen, wenn es mehr als eine Zeile hat */
}

button:focus {
    scroll-margin-top: 8px; /* oder so groß wie dein pb-1 */
}

.icon-display-none {
    display: none;
}

.btn-light {
    background-color: gainsboro;
    border-color: lightgray;
}

    .btn-light:hover {
        background-color: gainsboro;
        border-color: lightgray;
        box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.5);
    }

    .btn-light:focus, .btn-light.focus {
        background-color: gainsboro;
        border-color: lightgray;
        box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.5);
    }

    .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
    .show > .btn-light.dropdown-toggle {
        background-color: gainsboro;
        border-color: lightgray;
        box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.5);
    }

        .btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus,
        .show > .btn-light.dropdown-toggle:focus {
            background-color: gainsboro;
            border-color: lightgray;
            box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.5);
        }

.btn-outline-light {
    background-color: #f1f1f1;
    border-color: lightgray;
    color: #000;
}

    .btn-outline-light:hover {
        background-color: #f1f1f1;
        border-color: #ecf0f1;
        box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.5);
        /*z-index: 2000;*/
    }

    .btn-outline-light:focus, .btn-outline-light.focus {
        background-color: #f1f1f1;
        border-color: #ecf0f1;
        box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.5);
    }

    .btn-outline-light.high-zindex {
        z-index: 2000 !important;
    }

    /*.btn-outline-light.high-zindex:focus {
        z-index: 2000;
    }*/

    .btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active,
    .show > .btn-outline-light.dropdown-toggle {
        background-color: #f1f1f1;
        border-color: #ecf0f1;
        box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.5);
    }

        .btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-light.dropdown-toggle:focus {
            background-color: #f1f1f1;
            border-color: #ecf0f1;
            box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.5);
        }

.btn-outline-info {
    background-color: lightslategray;
    border-color: lightslategray;
    color: white !important;
}

    .btn-outline-info.high-zindex {
        z-index: 2000 !important;
    }

    .btn-outline-info:hover {
        background-color: lightslategray;
        color: white !important;
        border-color: lightslategray;
        box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.5);
    }

    .btn-outline-info:focus, .btn-outline-info.focus {
        background-color: lightslategray;
        color: white !important;
        border-color: lightslategray;
        box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.5);
    }

    .btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active,
    .show > .btn-outline-info.dropdown-toggle {
        background-color: lightslategray;
        border-color: lightslategray;
        color: white !important;
        box-shadow: 0 0 0 0.2rem rgba(60, 89, 142, 0.5);
    }

        .btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-info.dropdown-toggle:focus {
            background-color: lightslategray;
            border-color: lightslategray;
            color: white !important;
            box-shadow: 0 0 0 0.2rem rgba(60, 89, 142, 0.5);
        }

.btn-outline-success {
    border-color: lightslategray;
    color: lightslategray !important;
}

    .btn-outline-success:hover {
        background-color: lightslategray;
        color: white !important;
        border-color: lightslategray;
        box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.5);
    }

    .btn-outline-success:focus, .btn-outline-success.focus {
        background-color: lightslategray;
        color: white !important;
        border-color: lightslategray;
        box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.5);
    }

    .btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active,
    .show > .btn-outline-success.dropdown-toggle {
        background-color: lightslategray;
        border-color: lightslategray;
        color: white !important;
        box-shadow: 0 0 0 0.2rem rgba(60, 89, 142, 0.5);
    }

        .btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-success.dropdown-toggle:focus {
            background-color: lightslategray;
            border-color: lightslategray;
            color: white !important;
            box-shadow: 0 0 0 0.2rem rgba(60, 89, 142, 0.5);
        }

/* Optional in deiner CSS-Datei */
.status-success {
    color: green;
}

.status-error {
    color: red;
}

/* Sidepanel Voice Settings*/
.sidepanel-left {
    height: 100%; /* Specify a height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 2000 !important; /* Stay on top */
    top: 0;
    left: 0;
    overflow: hidden; /* Disable horizontal scroll */
    padding-left: 0;
    padding-right: 0;
    /*padding-top: 10px;*/
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}

    /* Position and style the close button (top right corner) */
    .sidepanel-left .closebtn {
        margin-top: 30px;
        font-size: 24px;
        /*outline: none;*/
    }

.option-label {
    display: inline-block;
    float: left;
    width: 295px;
}

input[type="range"] {
    width: 100%;
}

.volume {
    height: 24px;
    max-height: 24px;
    overflow: hidden;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

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

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

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

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

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

div.stickyXXX {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 65px;
    z-index: 1;
}

div.sticky-0XXX {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0px;
    z-index: 1;
}

/*.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}*/