/* Body and container styles */

    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        font-size: 25px;
    }

    mrQuestionTable {
        font-size: 0.8em;
    }

    mrQuestionText {
        font-size: 0.8em;
    }

    #content-wrapper {
        display: flex;
        flex: 1;
    }

    #left-column {
        flex: 0 0 auto;
        width: 300px;
        padding: 20px;
        max-width: 20vw;
        height: 95vh;
        background-color: #3399cc42;
        position: sticky;
        top: 0;
    }

    #right-column {
        flex: 1;
        padding: 20px;
    }

    footer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 12px;
        color: #888;
        padding: 10px;
        width: 90%;
    }

    /* Navigation styles */

    #nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mrPrev,
    .mrNext,
    .mrStop {
        background-color: #006699;
        color: #fff;
        padding: 10px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        margin: 0 5px;
        white-space: nowrap;
        /* Added property */
        overflow: hidden;
        /* Added property */
        text-overflow: ellipsis;
        /* Added property */
        width: 100% !important;
    }

    #prev,
    #next,
    #stop {
        flex: 1;
        margin: 0 5px;
    }

    .mrDropdown {
        font-size: 1em;
        padding: 0 1em 0 0.5em;
    }

    .mrEdit,
    .mrListBox {
        font-family: Tahoma, 'Lucida Grande CE', lucida, sans-serif;
        font-size: 0.8em;
    }

    .mrData {
        font-family: Tahoma, 'Lucida Grande CE', lucida, sans-serif;
        font-size: 0.8em;
    }

    .mrBannerText {
        font-family: Tahoma, 'Lucida Grande CE', lucida, sans-serif;
        font-size: 0.8em;
    }

    .mrErrorText {
        font-family: Tahoma, 'Lucida Grande CE', lucida, sans-serif;
        font-size: 12px;
        color: red;
        font-weight: bold
    }

    .logo {
        xborder: 2px solid blue;
        max-height: 50%;
    }

    .logo img {
        xborder: 2px solid yellow;
        max-width: 100%;
    }

    .motto {
        xborder: 2px solid green;
        font-weight: bold;
        text-align: center;
    }

    #zahlavi {}

    #zahlavi_mobile {
        display: none;
    }

    input textarea {
        box-shadow: 1px 1px 2px 2px rgba(0, 66, 11, .2);
        max-width: 75%;
    }

    textarea:focus {
        background-color: #0099cc30;
        max-width: 75%;
    }

    /* Kapitoly dotazniku*/
    .Sekce ul {
        list-style-type: none;
    }

    .Sekce li {
        font-size: 0.8em;
        color: #6aa8ea;
    }

    .AktivniKapitola {
        font-weight: bold;
        color: #0067b3;
        padding: 1em 0;
        xtext-decoration: underline;
    }

    /* -- kapitoly dotazniku -- */

    .motto {
        color: #6aa8ea;
    }

    input[type="radio"],
    input[type="checkbox"] {
        width: 2em;
        height: 2em;
    }

    /*Zvyrazneni textu v otazkach*/
    .Polozka {
        color: #3399cc;
        font-size: 1.1em;
        font-weight: bold;
    }

    /*schovani pomocnych textu*/
    .Cati_only {
        display: none;
    }

    .Cati_Only {
        display: none;
    }

    /* -- schovani pomocnych textu -- */

    .mrOtherEdit {
        width: 20em;
    }

    input[name="_QSMAuth_QId"] {
        font-family: 'Inconsolata', monospace;
    }

    .OtazkaJenProTest {
        background-color: #adff2f3b;
    }

    .ojpt_disclaimer {
        xborder: 1px black dotted;
        color: white;
        margin: auto;
        text-align: center;
        background-color: rgb(218, 218, 218);
        border-bottom: 3px solid white;
    }

    .TestovyProjekt .UnresolvedGender {
        color: red;
        text-decoration: underline;
    }

    .TestovyProjekt .Zamena {
        background-color: #3399cc1f;
    }

    .karta {
        font-size: 0.8em;
        font-style: italic;
    }

    /* zobrazeni QR kodu pro rekrutaci do panelu */

    #QRkod{
        display: block;
        margin: 10px ;
        max-width: 100px;
        xborder: 1px dashed red;
    }

    #QRodkaz {
        font-size: 0.8em;
        
        text-decoration: none;
        display: block;
        margin: 10px ;
        width: 600px;
        max-width: 100vw;
    
        word-wrap: break-word;
        text-align: center;
        xborder: 1px dashed red;
    }
    /* -- zobrazeni QR kodu pro rekrutaci do panelu  -- */

    /* *******************  media only ************************* */

    @media only screen and (max-width: 640px) {
        body {
            overflow: hidden;
            overflow-y: scroll;
            background-color: aliceblue;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 5px;
            font-size: 20px;
        }

        .vycpavka_top {
            xbackground-color: #cc33bf9c;
            height: 10vh;
            top: 0;
            text-align: center;
            width: 90vw;
            xborder: 1PX solid green;
            padding: 0px;
            display: none;
        }

        .vycpavka_bottom {
            xbackground-color: #f2f569;
            height: 50px;
            bottom: 0;
            text-align: center;
            width: 90vw;
            xborder: 1PX solid green;
            padding: 0px;
        }

        #content-wrapper {}

        #left-column {
            width: 1px;
            height: 95vh;
            background-color: #c9cc3342;
            padding: 0px;
        }

        .motto {
            display: none;
        }

        #right-column {
            width: 99vw;
        }

        footer {
            bottom: 0;
            width: 90vw;
            xborder: 1PX solid green;
            position: fixed;
            margin: auto;
        }

        #zapati {
            font-size: 0.5em;
        }

        /* Navigation styles */
        #nav {}

        .mrPrev,
        .mrNext,
        .mrStop {}

        #prev,
        #next,
        #stop {}

        /* Adjust button width for smaller screens */
        .logo {
            margin: auto;
        }

        .logo img {
            max-height: 10vh;
        }

        .motto {}

        .mrPrev,
        .mrNext,
        .mrStop {
            flex-basis: 70px;
            margin: 0 2px;
        }

        #zahlavi {
            display: none;
        }

        #zahlavi_mobile {
            display: inherit;
        }

        input,
        textarea {
            max-width: 90%;
        }

        #right-column {
            max-width: 85vw;
        }

        .Sekce {
            display: none;
        }

        .tblSlider {
            max-width: 85vw !important;
        }

        .DlouhyText {
            font-size: 0.6em;
        }
    }

    /* ****************  media only **************************** */