@font-face {
    font-family: 'Bahnschrift';
    src: url(../static/bahnschrift.ttf) format('truetype');
}


:root {
    --buttons:  hsl(0, 76.5%, 54.9%); /*hsl(210,50%,50%); /*#22236b;    */
    --button-font-size: calc(14px + 0.5vw);
    --button-font-size-small: calc(10px + 0.25vw);
    --tabs: #AAA;
    --background-field: #FAFAFA;
    --height_info: 20vh;

/*#ec1b2d;*/

}


select {
    -webkit-appearance: none;
    line-height: 54px;
    font-size: 14px;
}


body,
html {
    margin: 0;

    font-family: 'Bahnschrift';
    font-weight: 100;
    color: #333;
    background-position:top;
    background-repeat: no-repeat;
    background-size: cover;

    height: 100%;
}



* {
    margin: 0;
    padding: 0;

}

html {
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
/*
    background-image: linear-gradient(to top, #F8F8F8 0%, #E8E8E8 100%);
	background-attachment:fixed;
	text-align: left;*/

    font-size: 22px;
    line-height: 110%;
    font-variant: normal;
    text-transform: none;
}


#wrapper_out {
    width: 100vw;
    margin: 0 auto;
    float: left;
}


.header_wrapper {
    width: 100vw;

    box-sizing: border-box;

    height: 100px !important;

    background-color: #FFF;

    margin: 0 auto;
    position: fixed !important;

    top: 0px;
    z-index: 33;

    border-bottom: #e6e3e3 3px solid;
}

.body_wrapper {
    width: 100vw;

    box-sizing: border-box;
    position: absolute;

    margin-top: 1vh;
    padding-top: 2vh;
    
    /*min-height: 100vh;*/

    top: 100px;

    background-color: #FFF;

    z-index: 0;

    display: block;

    /*border: 2px #f00 solid;*/
}



/* --------------------------------------------------------------------------------------- */
/* Text (links)                    														   */
/* --------------------------------------------------------------------------------------- */
#header_text_left {
    box-sizing: border-box;

    padding-top: 20px;
    padding-left: 2vw;
    padding-bottom: 10px;
    width: 30vw;

    float: left;
}

#header_text_left p {
    padding-top: 20px;
    width: 100%;
    height: auto;
    font-size: calc(12px + 2vw);
    font-weight: 500;
    font-family: 'Bahnschrift';
}

#header_text_left a img {
    width: 100%;
    height: auto;
    max-width: 300px;
    float: left;
}


/* --------------------------------------------------------------------------------------- */
/* Logo (rechts)                    														   */
/* --------------------------------------------------------------------------------------- */
#header_logo {
    box-sizing: border-box;

    /*padding-top: 20px;*/
    padding-right: 2.5vw;
    padding-bottom: 10px;
    width: 26vw;

    float: left;
}

#header_logo_div {
    height: 85px;

    display: flex;
    align-items: center;
}

#header_logo a {
    width: 100%;
    float: right;    
}

#header_logo img {
    max-width: 250px;
    display: block;
}


/* --------------------------------------------------------------------------------------- */
/* Systeminformationen (mittig)    														   */
/* --------------------------------------------------------------------------------------- */
#header_system_informations {
    
    padding-top: 13px;

    box-sizing: border-box;
    width: 30vw;
    float: left;
}

#header-system-information-login-wrapper {
    border: #ddd 1px solid;
    border-radius: 4px;
    height: 64px !important;
}

#header-system-information-login-wrapper table {
    /*border: 1px #444 solid;*/
    
    margin-top: 5px;

    border-collapse: collapse;
    width: 100%;

    vertical-align: top;
}

#header-system-information-login-wrapper table tbody tr {
    margin: 0px !important;
    padding: 0px !important;

    line-height: 15px; /*normal;*/
}

#header-system-information-login-wrapper table tbody tr td {
    margin: 0px !important;
    padding: 2px 6px !important;
    /*border: 1px solid #F00;*/

    text-align: center;
}

#header-system-information-login-wrapper table tbody tr td h1 {
    margin: 0px !important;
    padding: 0px !important;
    color:#222;
    font-size: 0.75vw;
    font-weight: 500;
    text-align: left;
    line-height: 15px;
    vertical-align: bottom;
}

#header-system-information-login-wrapper table tbody tr td h2 {
    margin: 0px !important;
    padding: 0px !important;
    color:#888;
    font-size:0.6vw;
    font-weight: 300;
    text-align: left;
    line-height: 15px;
    vertical-align: top;
}

/*#header-system-information-login-wrapper table tbody tr td .button a:link {*/
#header-system-information-login-wrapper a.button-login:link {
    background-color: #BBB; /* #ec1b2d;*/
    border: none;
    color: white;
    padding: 6px 12px !important;
    text-align: center;
    text-decoration: none;
    font-size: 0.85vw;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 500;
    text-decoration: none;
}

#header-system-information-login-wrapper a.button-login:visited {
    color: white;
    text-decoration: none;
}



/* --------------------------------------------------------------------------------------- */
/* Batterieanzeige (rechts)        														   */
/* --------------------------------------------------------------------------------------- */
#header_battery {
    box-sizing: border-box;

    width: 8vw;
    float: left;

    margin-top: 8px;

}




/* --------------------------------------------------------------------------------------- */
/* Spacer
/* --------------------------------------------------------------------------------------- */
#header_spacer {
    box-sizing: border-box;

    width: 6vw;
    float: left;

    margin-top: 10px;
}




/* --------------------------------------------------------------------------------------- */
/* Sprachauswahl                   														   */
/* --------------------------------------------------------------------------------------- */
#header_language {
    box-sizing: border-box;
    width: 7vw;
    float: left;
    margin-top: 25px;

    /*border: #000 1px solid;*/
}

#header_language img {
    /*width: 50%;
    height: auto;*/
    height: 45px;
    width: auto;
}









/* --------------------------------------------------------------------------------------- */
/* Login                           														   */
/* --------------------------------------------------------------------------------------- */
#signin_box {    
    border-radius: 18px;

    box-sizing: content-box;
    
    padding-top: 50px;
    padding-bottom: 50px;

    width: 20vw;
    min-width: 250px;
    margin: auto;
    text-align: center;

    border: #d1cccc 1px solid;

    background-color: #FAFAFA;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#signin_box h1 {
    box-sizing: border-box;

    font-size: 22px;
    font-weight: 400;
    
    width: 20vw;
    min-width: 250px;
    
    padding-top: 10px;
    padding-bottom: 10px;

    background-color: #ec1b2d;
    color: #fff;

    border-top: #e6e3e3 1px solid;
    border-bottom: #e6e3e3 1px solid;
    
}

#signin_box p {
    font-size: 14px;
    font-weight: 200;
    padding: 2%;
    margin-top: 1.5vw;
}


#LoginBtn {
    color: #fff;
    font-size: 14px;
    font-weight: 500;

    width: 50%;
    height: 50px;
    background: #888;
    background-color: #ec1b2d;


    border-radius: 8px;
    border: #fffcfc 2px solid;
    
    margin-top: 2.5vw;
}


#LoginBtn:hover {
    background: #AAA;
}




.graph_container {
    padding-left: 2vw;
    /*width: 98vw;
    float: left;
    height: 40vw;

    min-height: 200px;
    max-height: 60vh;*/

    /*border-bottom: #EEE 4vh solid;*/

    overflow: auto !important;

    padding-top: 50px;

    max-height: 600px;

}

.graph_container p {
    text-align: center;
    padding-top: 5vw;
    padding-bottom: 2vw;
    font-weight: 500;
    font-size: 2vw;
}




#table_wrapper {
    padding-top: 2hv;

    padding-left: 2vw;
    width: 98vw;
    float: left;

    border-bottom: #EEE 4vh solid;
}

#table_wrapper p {
    text-align: center;
    padding-top: 5vw;
    padding-bottom: 2vw;
    font-weight: 500;
    font-size: calc(8px + 1.75vw);
}

.table_container {
    margin-top: 2vw;
    margin-bottom: 3vw;

}

.table_container table {
    margin: 0 auto;
    border: #888 1px solid;
}

.table_container table tbody tr td {    
    font-size: calc(10px + 0.4vw);
    
    border: #CCC 1px solid;
    line-height: 1.3;
    
    padding-left: 5px;
    padding-right: 2vw;
    padding-top: 5px;
    padding-bottom: 5px;
}


#comment {
    display: inline-block;
    padding-left: 2vw;
    width: 98vw;

    text-align: center;
    padding-top: 5vw;
    padding-bottom: 2vw;
    font-weight: 500;
    font-size: calc(16px + 1vw);
}




#wrapper-Kacheln {
    padding-left: 2vw;
    width: 98vw;
    float: left;
    text-align: center;
    display: block;
}

#wrapper-Kacheln h1 {
    padding: 3vw;
    font-size: 3vw;
    color: #333;
    font-weight: 500;
}

#wrapper-Kacheln h3 {
    text-align: center;
    font-size: 1vw;
    color: #999;
    font-weight: 300;
}

.Kachel_10x10 {
    display: inline-block !important;

    width: 10vw;
    height: 10vw;

    min-height: 100px;
    min-width: 200px;

    background-color: #EEE;
    border: #D8D8D8 1px solid;
    border-radius: 6px;

    margin: 1vw;
    padding-top: 0.75vw;
}

.Kachel_10x10 p {
    color: #FFF;
    font-size: 22px;
    text-align: center;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    background-color: #ec1b2d;
    box-sizing: border-box;
    font-weight: 600;
}

.Kachel_10x10 span {
    display: block;
    color: #444;
    font-size: 18px;
    text-align: center;
    padding-top: 2.25vw;
    font-weight: 400;
}


.Kachel_20x10 {
    display: inline-block !important;

    width: 20vw;
    height: 10vw;

    min-height: 100px;
    min-width: 400px;

    background-color: #EEE;
    border: #D8D8D8 1px solid;
    border-radius: 6px;

    margin: 1vw;
    padding-top: 0.75vw;
}

.Kachel_20x10 p {
    color: #FFF;
    font-size: 22px;
    text-align: center;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    background-color: #ec1b2d;
    box-sizing: border-box;
    font-weight: 600;
}

.Kachel_20x10 span {
    display: block;
    color: #444;
    font-size: 18px;
    text-align: center;
    padding-top: 2.25vw;
    font-weight: 400;
}


#wrapper-Buttons {
    margin-top: 1vw;
    padding-left: 2vw;
    width: 98vw;
    float: left;
    text-align: center;
    display: block;
}

.button {
    background-color: var(--buttons); 
    border: none;
    color: white;
    padding: 20px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: var(--button-font-size);
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    user-select: none;
}

.button-small {
    background-color: var(--buttons); 
    border: none;
    color: white;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: var(--button-font-size-small);
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    user-select: none;
}




#wrapper-DateiAuswahl {
    -webkit-appearance: none;
    padding-left: 2vw;
    width: 98vw;
    float: left;
    text-align: center;
    display: block;
}

#wrapper-DateiAuswahl h1 {
    padding: 3vw;
    font-size: 3vw;
    color: #333;
    font-weight: 500;
}

#wrapper-DateiAuswahl h3 {
    padding: 1vw;
    font-size: 1.5vw;
    color: #333;
    font-weight: 500;
}

#Dateiauswahl {
    width: 30vw;
    min-width: 300px;
}

#Dateiauswahl option {
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;

    line-height: 1.5;

    padding: 5px;
}


#Select-Dateiauswahl {
    padding-top: 1vw;
    padding-bottom: 3vw;
    width: 100%;

}

#Form-Dateiauswahl h3 {
    font-size: 1.5vw;
    font-weight: 300;    
}

input[type=button] {
    background-color: #ec1b2d;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: var(--button-font-size);
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 300;
}

input[type=submit] {
    background-color: #ec1b2d;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
}




fieldset {
    border: 0 none;
}



/* --------------------------------------------------------------------------------------- */
/* Eingabemaske                   														   */
/* --------------------------------------------------------------------------------------- */
#config_container {
    margin: 0 auto;
}

#config_container p {
    font-size: 30px;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 20px;
}

#config_container table {
    margin: 0 auto;        
    text-align: left;
}

#config_container table tr td {
    font-size: calc(14px + 0.4vw);
    line-height: 1.3;
    border-top: #DDD 1px solid;
    border-bottom: #DDD 1px solid;        
}

#config_container table tr td input[type="text"] {
    box-sizing: content-box;
    font-size: calc(14px + 0.4vw);
    font-weight: 500;
    font-family: 'Bahnschrift';
    width: 15vw;
    background-color: #FFF;    
    border: #FAFAFA 1px solid;
    padding-left: 5px;
}


#config_container table tr td select {
    box-sizing: content-box;
    font-size: calc(14px + 0.4vw);
    font-weight: 500;
    font-family: 'Bahnschrift';
    width: 15vw;
    background-color: #FFF;
    padding-left: 5px;
    padding-top: 0px;
}

#config_container table {
    width: 40vw;
    background-color: #F8F8F8;
    padding: 0.2vw;
    margin-top: 0.4vw;
    margin-bottom: 0.4vw;
}

#parameter_container {
    margin-bottom: 3vw;
}


.tc_Messort, .tc_Messkonfiguration, .tc_Masse {
    padding: 5px;
    border: 1px #CCC solid;
    margin-bottom: 2vw;
}









#wrapper-Titel {    
    border-bottom: #EEE 4vh solid;

    padding-left: 2vw;
    padding-bottom: 2vh;

    width: 98vw;
    float: left;
    text-align: center;
    display: block;
}

#wrapper-Titel h1 {
    padding: 3vw;
    font-size: 3vw;
    color: #333;
    font-weight: 500;
}

#wrapper-Titel h2 {
    font-size: calc(18px + 0.5vw);
    color: #333;
    font-weight: 400;
}


#wrapper-Titel p {
    font-size: calc(14px + 0.5vw);
    color: #333;
    font-weight: 300;
    line-height: 1.3;
}






#info_wrapper {
    padding-top: 1hv;
    width: 98vw;
    float: left;
}

#info_wrapper p {
    text-align: center;
    padding-bottom: 1vw;
    padding-bottom: 1vw;
    font-weight: 500;
    font-size: calc(16px + 0.5vw);
}

#info_container {
    margin-top: 2vw;
    margin-bottom: 2vw;

}

#info_container table {
    margin: 0 auto;
    border: #888 1px solid;
    text-align: left;
}

#info_container table tbody tr td {
    border: #CCC 1px solid;
    line-height: 1.3;

    font-size: calc(10px + 0.2vw);
    font-weight: 300;

    padding-left: 5px;
    padding-right: 2vw;
    padding-top: 2px;
    padding-bottom: 2px;
}

details {
    padding-bottom: 3vw;
    font-size: calc(16px + 0.2vw);
    font-weight: 500;    
}





/* --------------------------------------------------------------------------------------- */
/* Main                          														   */
/* --------------------------------------------------------------------------------------- */
#wrapper-main {
    width: 100%;
    float: left;
    text-align: center;
    display: block;
}

#wrapper-main h1 {
    font-family: 'Bahnschrift';
    padding: 2vw;
    font-size: 3vw;
    color: #333;
    font-weight: 500;
}

#wrapper-main h2 {
    padding-bottom: 1.5vw;
    font-size: calc(14px + 0.2vw);
    color: #555;
    font-weight: 500;
}



#wrapper-Buttons-main {
    padding-top: 0vw;
    padding-left: 0px;

    margin: 0 auto;

    width: 20vw;    
    min-width: 300px;

    text-align: center;

    display: flex;
    flex-direction: column;
}

.button-main {

    background-color: #ec1b2d;
    border: none;
    color: white;
    padding: 20px 34px;
    text-align: center;
    text-decoration: none;

    display: block;

    font-size: calc(14px + 0.2vw);
    margin: 4px 4px;
    cursor: pointer;
    border-radius: 4px;
}








#log_wrapper {
    width: 98vw;
    float: left;
    font-family: 'Bahnschrift';
    font-size: calc(12px + 0.2vw);
    font-weight: 500;
}

#log_container {
    margin-bottom: 2vw;
}

#log_container table {
    margin: 0 auto;
    border: #888 1px solid;
    text-align: left;
}

#log_container table tbody tr td {
    line-height: 1.3;

    font-size: calc(10px + 0.2vw);
    font-weight: 300;

    font-family: 'Bahnschrift';

    padding-left: 5px;
    padding-right: 2vw;
    padding-top: 2px;
    padding-bottom: 2px;
}




#measurement-status {
    font-family: 'Bahnschrift';
    font-size: calc(14px + 0.2vw);
    font-weight: 500;
    color: #555;
    
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;

    border: 3px #DDD solid;
    border-radius: 15px;
    background-color: #FFF;

    margin: 0px 4px 2vw 4px;

}

.activeSession::before {
    content: "\2707";
    color: #ec1b2d;
    padding-right: 10px;

    animation: smoothing 2s infinite;
}

@keyframes smoothing {
    0% {
        opacity: 1.0;
    }

    25% {
        opacity: 0.5;
    }

    50% {
        opacity: 0.25;
    }

    75% {
        opacity: 0.5;
    }

    100% {
        opacity: 1.0;
    }
}







#wrapper-selftest {
    margin: 0 auto;
    text-align: center;
    display: block;
    width: 10vw; 
    padding-bottom: 2vw;
}

.selftest-item {
    border-radius: 10px;
    box-sizing: border-box;
    font-family: 'Bahnschrift';
    font-size: calc(14px + 0.2vw);
    font-weight: 500;
    color: #555;
    background-color: rgba(255, 0, 0, 0.158);
    border: 1px solid #333;
    margin: 5px;
    padding: 7px;

}




#installation_wrapper {
    margin: 0 auto;
    text-align: center;
    padding-left: 20vw;
    padding-right: 20vw;
    width: 60vw;
    height: auto;
    display: block;
    padding-top: 2vw;
    padding-bottom: 3vw;
}

#installation_container {
    position: relative;
    width: 100%;
    height: auto;
    object-fit:scale-down;
}

#installation_container span {
    display:block;
    padding: 0px;
    text-align: left;
    font-size: 0.75vw;
    font-weight: 300;
    color: #999;
}


.installation_picture {
    width: 60vw;
    height: auto;
    z-index: 0;
    overflow: hidden;
    border: 5px #EEE solid;
}

.installation_picture img {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
}

.inner {
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 0;
    /*
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    filter: url(/elements/grayscale.svg#desaturate);
    filter: gray;
    -webkit-filter: grayscale(1);
    */

    opacity: 15%;
}



#video-wrapper {
    margin: 0 auto;
    text-align: center;
    width: 60vw;
}

#video-container {
    width: 100%;
}

#video-container video {
    width: 100%;
}







#wrapper-MessungAuswahl {
    -webkit-appearance: none;
    margin: auto 0;
    width: 100%;
    float: justify;
    text-align: center;
    display: block;
}

#wrapper-MessungAuswahl h1 {
    padding: 2vw;
    font-size: 3vw;
    color: #333;
    font-weight: 500;
}

#wrapper-MessungAuswahl h3 {
    padding: 0.5vw;
    font-size: calc(18px + 0.5vw);
    color: #333;
    font-weight: 400;
}

#commander_content_container {

    margin: auto 0;
    text-align: center;
    
    display: inline-block;
}


#progress_area {
    margin-top: 30px;
    padding: 20px;
    border: 2px #555 solid;

    display: none;
}




/* Tabelle select_session */


#select_table {
    border: 2px #AAA solid;
}













#log-table-details { 
    display: block;
    border: 2px #AAA solid;
}


#button_area {
    padding-top: 30px;
}


[type="checkbox"] {
    width: 1.5em;
    height: 1.5em;
}

[type="radio"] {
    width: 1.5em;
    height: 1.5em;
}


#commander_content_container table thead tr th {         
    line-height: 1.8;

    font-size: calc(6px + 0.6vw);
    font-weight: 500;

    font-family: 'Bahnschrift';

    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
}

#commander_content_container table tbody tr td {
    line-height: 1.8;

    font-size: calc(6px + 0.6vw);
    font-weight: 300;

    font-family: 'Bahnschrift';

    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
}

#commander_content_container table tbody tr:nth-of-type(odd) {
    background-color: #EEEEEE;
}








#filter-button-container {
    margin-left: 20px;
    padding-left: 20px;
    width: 0px;
}

.switch {
    /* Das label-Element */
    position: relative;
    /* Um im nächsten Schritt den runden Button mit position:absolute festzusetzen */
    width: 64px;
    height: 34px;
    display: inline-block;
}

.switch span {
    /* Der graue Untergrund des Schalters */
    position: absolute;
    background-color: #ccc;
    border-radius: 17px;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: background-color .4s;
}

.switch span::before {
    /* Der kreisrunde Button im Switch */
    background-color: white;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 4px;
    bottom: 4px;
    height: 26px;
    width: 26px;
}

input:checked+span {
    background-color: darkgreen;
}

input:checked+span::before {
    transform: translateX(30px);
}


.switch input {
    display: none;
}








/* --------------------------------------------------------------------------------------------- */
/* Bild ESAH im Hauptmenü mit overlay Statusanzeige                                              */
/* --------------------------------------------------------------------------------------------- */
.img-container-main {
    padding-top: 30px;
    width: 20vw;
    min-width: 200px;
    margin: 0 auto;
    position: relative;
    
}

.img-container {    
    width: 100%;
    height: auto;
    z-index: 0;
    overflow: hidden;
}


.img-container img {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
}


.state-symbol {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}











#searchInput {
    border: 1px solid #CCC;
    outline: none;
    width: 10%;
    margin-bottom: 20px;
}

/* When input gains focus, add a blue border below it */

#searchInput:focus {
    border-bottom: 2px solid #4575b6;
}



button[type=submit] {
    background-color: var(--buttons);
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: var(--button-font-size);
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 300;
}


.button-sub {
    background-color: #ec1b2d;
    border: none;
    color: white;
    padding: 20px 34px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: var(--button-font-size);
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 300;
}


button[type=button] {
    background-color: #ec1b2d;
    border: none;
    color: white;
    padding: 20px 34px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: var(--button-font-size);
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 300;
}

button[name="sel_desel"] {
    background-color: #ec1b2d;
    border: none;
    color: white;
    padding: 4px 6px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 300;
}




/* progress */


#wrapper-progress {
/*    border: 1px #333 solid;
    height: 500px;*/
    /*background-image: radial-gradient(circle farthest-corner at center, #3C4B57 0%, #1C262B 100%);*/
    display: none;
}

#wrapper-progress .loader {
    position: absolute;
    top: calc(50% - 32px);
    left: calc(50% - 32px);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    perspective: 800px;
}

#wrapper-progress .inner {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

#wrapper-progress .inner.one {
    left: 0%;
    top: 0%;
    animation: rotate-one 1s linear infinite;
    border-bottom: 3px solid #333;
}

#wrapper-progress .inner.two {
    right: 0%;
    top: 0%;
    animation: rotate-two 1s linear infinite;
    border-right: 3px solid #333;
}

#wrapper-progress .inner.three {
    right: 0%;
    bottom: 0%;
    animation: rotate-three 1s linear infinite;
    border-top: 3px solid #333;
}

@keyframes rotate-one {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@keyframes rotate-two {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}

@keyframes rotate-three {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}








/* Absolute Center Spinner */
.loading {
    position: fixed;
    z-index: 999;
    height: 2em;
    width: 2em;
    overflow: visible;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/* Transparent Overlay */
.loading:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
    /* hide "loading..." text */
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

.loading:not(:required):after {
    content: '';
    display: block;
    font-size: 10px;
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    -webkit-animation: spinner 1500ms infinite linear;
    -moz-animation: spinner 1500ms infinite linear;
    -ms-animation: spinner 1500ms infinite linear;
    -o-animation: spinner 1500ms infinite linear;
    animation: spinner 1500ms infinite linear;
    border-radius: 0.5em;
    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


#list_passed {
    margin-left: 5px;
    margin-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: rgb(68, 216, 68);
    color: #FFF;
    border: 2px #DDD solid;
    border-radius: 8px;
    display: inline-block;
    font-weight: 700;
    font-family:'Courier New', Courier, monospace;
    min-width: 30px;    
}

#list_failed {
    margin-left: 5px;
    margin-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: rgb(236, 233, 37);
    color: #FFF;
    border-radius: 8px;
    border: 2px #DDD solid;
    display: inline-block;
    font-weight: 700;
    font-family: 'Courier New', Courier, monospace;
    /*-webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #DDD;*/
    color: #444;
    min-width: 30px;
}

#list_void {
    margin-left: 5px;
    margin-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: rgb(236, 37, 37);
    color: #FFF;
    border-radius: 8px;
    border: 2px #DDD solid;
    display: inline-block;
    font-weight: 700;
    font-family: 'Courier New', Courier, monospace;
    min-width: 30px;
}



#language-box {
    border-radius: 18px;

    box-sizing: content-box;

    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 5px;

    width: 20vw;
    min-width: 250px;
    margin: auto;
    text-align: center;

    border: #d1cccc 1px solid;

    background-color: #FAFAFA;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


#language-box p {
    padding-top: 20px;
    padding-bottom: 20px;

    font-size: 18px;
    font-weight: 600;

}

#language-box span {
    margin-top: 10px;
    margin-bottom: 30px;

    font-size: 14px;
    font-weight: 300;

}

#language-box-selector {
    display: block;
}


#language-box-selector img {
    padding: 20px;
    width: 80px;
    height: 50px;
}


#index-footer {
    display: block;
    width: 100%;
    height: 100%;
    border-top: 3px #EEE solid;
}


#index-footer-info {
    text-align: left;
    float: left;
    width: 100%;
    float: left;
    height: auto;
    font-size: 12px;
    font-weight: 300;
}

#index-footer-adr {
    width: 35%;
    float: left;
}



#index-footer-info details {
    padding: 0;
}

#index-footer-info details summary {
    font-size: 12px;
    font-weight: 300;
    color: #999;
    margin: -0.5em -0.5em 0;
    padding: 0.5em;
}

#index-footer-info details summary::marker {
    font-size: 18px;
    color: #ec1b2d;
}

#index-footer-info details[open] {
    padding: 0.5em;
    font-size: 14px;
    font-weight: 500;
    color: #555;  
    line-height: 120%;
}

#index-footer-info details[open] td {
    padding-right: 20px;
}


#index-footer-info details[open] summary {
}







/* ------------------------------------------------------------------------------- */
/* Login-Box (sign-up + login)                                                     */
/* ------------------------------------------------------------------------------- */
#login-box {
    border-radius: 0px;

    box-sizing: content-box;

    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;

    width: 20vw;
    min-width: 250px;
    margin: auto;
    text-align: center;

    border: #d1cccc 1px solid;

    background-color: #FAFAFA;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


#login-box p {
    padding-top: 20px;
    padding-bottom: 20px;

    font-size: 18px;
    font-weight: 600;

}

#login-box-txt {
    margin-top: 10px;
    margin-bottom: 30px;

    font-size: 14px;
    font-weight: 300;

}












#list-container {
    margin: 0 auto;
    text-align: center;
    display: inline-block;
}


#list-wrapper {  
    /*text-align: left;  */
    display: table;
}


/*

#measurement-mode-container {
    margin: 0 auto;
    width: 80%;
    display: block;
    border: 1px #555 solid;
    box-sizing: content-box;
}


#measurement-mode-config-data {
    padding: 5px;
    border: 3px #777 solid;
    border-radius: 5px;
    text-align: left;
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
}

#measurement-mode-info-wrapper {
    width: 100%;
    float: left;
}


#measurement-mode-info-container {
}
*/
/*
#info_container table {
    margin: 0 auto;
    border: #888 1px solid;
    text-align: left;
}

#info_container table tbody tr td {
    border: #CCC 1px solid;
    line-height: 1.3;

    font-size: calc(10px + 0.2vw);
    font-weight: 300;

    padding-left: 5px;
    padding-right: 2vw;
    padding-top: 2px;
    padding-bottom: 2px;
}

details {
    padding-bottom: 3vw;
    font-size: calc(16px + 0.2vw);
    font-weight: 500;
}

*/





/* ------------------------------------------------------------------------------- */
/* Tabs bei measurement-mode                                                       */
/* ------------------------------------------------------------------------------- */
#tabs {
    margin: 0 auto;
    width: 99vw;
    /*max-width: 1000px;*/
    display: block;
    box-sizing: content-box;
    position: relative;
    
    padding-left: 15px;
    padding-top: 60px;
}


.details-tab {
    box-sizing: content-box;
    
    text-align: center;
    font-size: calc(8px + 0.4vw);
    font-weight: 300;

    background-color: #DDD;
    
    border: 1px solid #BBB;
    border-bottom: 1px solid #333;

    /*border-radius: 0.5em 0.5em 0 0;*/

    height: 1.5em;
    width: 10em;
    /*padding: 0.125vw 10px 0.25vw 15px;*/
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;

    z-index: 1;
}


.details-tab::marker,
.details-tab::-webkit-details-marker {
    /*display: none;*/
    color: transparent;
}


.details-tabs {
    user-select: none;

    position: relative;
    justify-content: left;
    display: flex;
    flex-wrap: wrap;
    /*margin-left: 20px;*/

    padding: 0;
}

.details-tabs:hover {
    cursor: pointer;
}


.details-content {
    user-select: none;
    order: 1; 
    
    text-align: left;

    width: calc(99vw - 40px);

    box-sizing: border-box;
    margin-left: 1px;
    outline: 1px #333 solid;
    z-index: 0;    

    min-height: 400px;

    details {
        summary {
            font-weight: 600;
            
        }

        margin: 1.5rem;                
    }
}


.details-content:hover {
    cursor: default;
}


.details-item {
    display: contents;

    &[open] {
        &>.details-tab {
            background-color: #FFF;
            color: #333;
            border: 1px solid #333;
            border-bottom: 1px solid #FFF;
        }
    }
}







/* ------------------------------------------------------------------------------- */
/* measurement-mode: Tab 1: Konfiguration                                          */
/* ------------------------------------------------------------------------------- */
#config-rows {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 5px;
}

#config-img-container {
    grid-column: 2 / 2;
    width: 100%;
    overflow: hidden;
    padding: 20px;
}

#config-img-container img {
    width: 100%;
    height: auto;
}


#config-list-container {
    grid-column: 1 / 1;
    
    margin: auto 0;
    text-align: left;
    display: inline-block;

    width: 100%;

}

#config-list-container table {
    border: 2px #ccc solid;
}

#config-list-container table tr td {
    line-height: 1.1;

    font-size: calc(4px + 0.7vw);
    font-weight: 300;

    font-family: 'Bahnschrift';

    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
}

#config-list-container table tbody tr:nth-of-type(odd) {
    background-color: #EEEEEE;
}



/* ------------------------------------------------------------------------------- */
/* measurement-mode: Tab 2: Status                                                 */
/* ------------------------------------------------------------------------------- */
#measurement-mode-status-data {
    padding: 5px;
    border: 3px #777 solid;
    background-color: #F5F5F5;
    border-radius: 5px;
    text-align: left;
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    margin-top: 30px;
    margin-bottom: 20px;    
}

#measurement-mode-status-data p {
    padding: 5px;
    font-size: 28px;
    font-weight: 500;
}    



#kachel-wrapper {
    padding: 0;
    margin: 0;

    padding-top: 15px;
    padding-bottom: 15px;
    display: inline-block;
    box-sizing: border-box;

    float: left;

}

#Kacheln_Stammgleis {

    margin: 10px;
}

#Kacheln_Zweiggleis {

    margin: 10px;
}

.kachel {
    display: inline-block !important;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 150px;
    aspect-ratio: 1;
    background-color: #DDD;
    border: 4px #888 solid;
    border-radius: 15px;
}

.kachel p {
    font-size: 15px;
    font-weight: 100;
    box-sizing: border-box;
}

.kachel span {
    display: block;
    margin: 15px;
    padding-top: 50px;

    font-family: 'Courier New', Courier, monospace;
    font-size: 90px;
    font-weight: 900;
    color: #FFF;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #999;
}


/* ------------------------------------------------------------------------------- */
/* measurement-mode: Tab 3: Messungen                                              */
/* ------------------------------------------------------------------------------- */
#measurement-list-container {
    margin: auto 0;
    text-align: center;

    display: inline-block;

    padding-bottom: 10px;
}

#measurement-list-container table thead tr th {
    line-height: 2;

    font-size: calc(6px + 0.7vw);
    font-weight: 500;

    font-family: 'Bahnschrift';

    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
}

#measurement-list-container table tbody tr td {
    line-height: 2;

    font-size: calc(6px + 0.7vw);
    font-weight: 300;

    font-family: 'Bahnschrift';

    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
}

#measurement-list-container table tbody tr:nth-of-type(odd) {
    background-color: #EEEEEE;
}



#measurement-list-counter span {
    background-color: #bbb;
    border: 1px #999 solid;
    border-radius: 15px;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: #FFF;
}


/* ------------------------------------------------------------------------------- */
/* measurement-mode: Links (Buttons) am unteren Rand                               */
/* ------------------------------------------------------------------------------- */
#wrapper-buttons-measurement {        
    padding-top: 40px;
    padding-bottom: 60px;
    
    text-align: center;
    display: flex;    
    justify-content: center;    
    flex-direction: column;
}

.button-measurement {
    background-color: #ec1b2d;
    border: none;
    color: white;
    padding: calc(12px + 0.5vw) calc(8px + 0.5vw);
    text-align: center;
    text-decoration: none;
    font-size: calc(8px + 0.9vw);
    margin-top: 30px;
    margin-bottom: 30px;    
    line-height: 5;
    cursor: pointer;
    border-radius: 4px;
}

/* Anordung der Tasten nebeneinander bei breiten Bildschirmen */
@media screen and (min-width: 800px) {
    #wrapper-buttons-measurement {
        flex-direction: row;
    }
    
    .button-measurement {
        margin: calc(8px + 0.4vw) calc(8px + 0.1vw);
    }
}






/*
.button-start {
    background-color: #ec1b2d;
    border: none;
    color: white;
    padding: 20px 34px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
}

.button-stop {
    background-color: #ec1b2d;
    border: none;
    color: white;
    padding: 20px 34px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
}
*/


#measurement-mode-status-table {
    width: 100%;
}

#measurement-mode-status-table table {

    margin: 0 auto;
    display: inline-block;

    font-size: 24px;
    font-weight: 500;
    padding: 10px;
    
}

#measurement-mode-status-table table th {

    padding-top: 15px;
    padding-bottom: 15px;

    padding-left: 1vw;
    padding-right: 1vw;
    
}


#measurement-mode-status-table table td {

    padding: 10px;

    margin-top: 15px;
    margin-bottom: 15px;
        
    height: calc(40px + 3vw);

    border-radius: 15px;
}

#measurement-mode-status-table table td.kachel_row {
    padding-left: 30px;
    padding-right: 30px;
    font-size: calc(10px + 1vw);
    font-weight: 500;
    background-color: #F8F8F8;
}

#measurement-mode-status-table table td.kachel_gn {
    border: 4px #888 solid;
    background-color: rgb(57, 233, 57);
    font-family: 'Courier New', Courier, monospace;
    font-size: calc(20px + 3vw);
    font-weight: 900;
    color: #FFF;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #999;
}

#measurement-mode-status-table table td.kachel_ge {
    border: 4px #888 solid;
    background-color: rgb(243, 243, 20);
    font-family: 'Courier New', Courier, monospace;
    font-size: calc(20px + 3vw);
    font-weight: 900;
    color: #FFF;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #999;
}

#measurement-mode-status-table table td.kachel_rt {
    border: 4px #888 solid;
    background-color: rgb(233, 25, 25);
    font-family: 'Courier New', Courier, monospace;
    font-size: calc(20px + 3vw);
    font-weight: 900;
    color: #FFF;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #999;
}



#meta-table-details {
    
    padding-top: 15px;
    padding-left: 15px;
    text-align: left;
    /*display: block;
    border: 2px #AAA solid;*/
    line-height: 1.8;
}


#meta-table-details a:link {

    background-color: #EEE;
    border-radius: 5px;
    padding: 5px;

    color: #333;
    text-decoration: none;    
}

#meta-table-details a:visited {
    color: #333;
    text-decoration: none;
}







.login-container {
    border-radius: 0px;

    box-sizing: content-box;

    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;

    width: 20vw;
    min-width: 250px;
    margin: auto;
    text-align: center;

    border: #d1cccc 1px solid;

    background-color: #FAFAFA;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*
.login-container:hover {
    box-shadow: 0 14px 30px var(--shadow);
    transform: translateY(-5px);
}
*/


.login-header {
    margin-bottom: 30px;
    text-align: center;
}

.login-header img {
    display: block;
    width: 100%;
    margin-top: 15px;
}

.login-title {
    font-size: 24px;
    font-weight: 600;
    color: #2c4b7c;
    margin-bottom: 8px;
    padding-top: 15px;
}

.login-subtitle {
    padding-top: 15px;
    font-size: 14px;
    color: #777;
    max-width: 100%; /*320px;*/
    margin: 0 auto;
    line-height: 1.5;
}

.form-group {
    margin-bottom: 24px;
    position: relative;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #545b67;
    transition: color 0.3s ease;
    text-align: left;
}

.form-control {
    /*display: block;*/
    width: 88%;
    padding: 14px 16px;
    font-size: 15px;
    color: #545b67;
    background-color: #e4e6e9;
    border: 2px solid transparent;
    border-radius: 6px;
    transition: all 0.3s ease;
    outline: none;
    filter:none;
}

.form-control:focus {
    border-color: #2c4b7c;
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(44, 75, 124, 0.1);
}

.form-control.error {
    border-color: #d64045;
}


.form-control-readonly {
    width: 88%;
    padding: 14px 16px;
    font-size: 15px;
    color: #545b67;
    background-color: #e4e6e9;
    border: 2px solid transparent;
    border-radius: 6px;
    transition: all 0.3s ease;
    outline: none;
}



.error-message {
    text-align: left;
    display: none;
    color: #d64045;
    font-size: 12px;
    margin-top: 6px;
    font-weight: 500;
}

#passwordToggle {
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    color: #444;
}


.password-toggle {
    position: absolute;
    right: -15px;
    top: 25px;
    color: #000; /*#a0a5ad;*/
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.password-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.checkbox-data-protection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8x;
    font-size: 14px;
}

.checkbox-container {
    display: flex;
    align-items: center;
}


input[type="checkbox"] {
/*    display: none;*/
    margin-right: 10px;

}

input[type="checkbox"]:checked {
    background-color: #2c4b7c;
    border-color: #2c4b7c;
}

.login-button {
    padding-top: 16px;
}



/*
.login-button {
    width: 100%;
    padding: 14px;
    background-color: #2c4b7c;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}


.login-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #1e3a5f;
    transition: width 0.3s ease;
    z-index: -1;
}

.login-button:hover::before {
    width: 100%;
}

.login-button:active {
    transform: scale(0.98);
}

.login-button.loading {
    color: transparent;
}

.login-button.loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: calc(50% - 10px);
    left: calc(50% - 10px);
    border: 2px solid transparent;
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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


.pulse-animation {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

@media (max-width: 480px) {
    .login-container {
        width: 100%;
        max-width: 340px;
        padding: 30px 20px;
        margin: 0 20px;
    }

    .login-title {
        font-size: 22px;
    }

    .form-control {
        padding: 12px 14px;
    }
}


.shape {
    position: absolute;
    z-index: -2;
    opacity: 0.1;
    filter: blur(2px);
}

.shape-1 {
    width: 120px;
    height: 120px;
    background: var(--primary-blue);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    top: 10%;
    left: 15%;
    animation: float1 12s ease-in-out infinite;
}

.shape-2 {
    width: 80px;
    height: 80px;
    background: var(--secondary-blue);
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    bottom: 10%;
    right: 15%;
    animation: float2 10s ease-in-out infinite;
}

.shape-3 {
    width: 60px;
    height: 60px;
    background: var(--accent-blue);
    border-radius: 59% 41% 31% 69% / 59% 31% 69% 41%;
    top: 60%;
    left: 10%;
    animation: float3 12s ease-in-out infinite;
}

@keyframes float1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-15px, 15px) rotate(5deg); }
    50% { transform: translate(10px, 30px) rotate(-5deg); }
    75% { transform: translate(15px, 5px) rotate(3deg); }
}

@keyframes float2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(15px, -15px) rotate(-5deg); }
    50% { transform: translate(-10px, -20px) rotate(10deg); }
    75% { transform: translate(-15px, 10px) rotate(-3deg); }
}

@keyframes float3 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(10px, 10px) rotate(-8deg); }
    50% { transform: translate(20px, -15px) rotate(8deg); }
    75% { transform: translate(-5px, -10px) rotate(-3deg); }
}


button:focus-visible,
input:focus-visible,
a:focus-visible {
    outline: 3px solid var(--primary-blue);
    outline-offset: 2px;
}
*/


.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}





#footer-impressum {
    position: absolute;
    bottom: 0;
    float: left;
 }


#footer-impressum .footer-impressum-button {
    display: inline-block;
    border-radius: 5px;
    background-color: #FFF;
    font-family: 'Bahnschrift';
    font-weight: 300;
    font-size: 14px;
    margin: 10px;
    padding: 5px 10px;
}

#footer-impressum a:link {
    color: #333;
    text-decoration: none;    
}

#footer-impressum a:visited {
    color: #333;
    text-decoration: none;
}






#table-legal-notice {
    margin-top: 25px;
    vertical-align: top;
}

#table-legal-notice tr td {
    padding: 10px;
    vertical-align: top;
    text-align: left;
    width: 50%;
}

#table-legal-notice tr td img {
    margin-top: 0px !important;
    vertical-align: top;
}

#table-legal-notice tr td span {
    font-size: clamp(10px, 0.6vw, 15px);
    font-style: italic;
    vertical-align: top;
}

#table-legal-notice tr td p {
    font-size: clamp(10px, 0.75vw, 20px);
    line-height: 135%;
    text-align: left;
}





.data-protection-text-scrollable {
    box-sizing: border-box;
    margin: 25px !important;

    height: 50vh;
    width: 96%;
    overflow: scroll;

    font-size: clamp(12px, 0.8vw, 18px);
    font-weight: 300;
    text-align: left;
    line-height: 125%;
}

.data-protection-text-scrollable h1 {
    font-size: clamp(14px, 0.9vw, 20px);
    font-weight: 800;
    padding-top: 20px;
    padding-bottom: 10px;
}

.data-protection-text-scrollable h2 {
    font-size: clamp(13px, 0.85vw, 19px);
    font-weight: 600;
    padding-top: 15px;
    padding-bottom: 7px;
}

.data-protection-text-scrollable h3 {
    font-size: clamp(12px, 0.80vw, 18px);
    font-weight: 400;
    padding-top: 10px;
    padding-bottom: 7px;
}

.data-protection-text-scrollable p {
    font-size: clamp(12px, 0.8vw, 18px);
    font-weight: 400;
    padding-left: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.data-protection-text-scrollable ul {
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.data-protection-text-scrollable li {
    font-size: clamp(12px, 0.8vw, 18px);
    font-weight: 300;
    text-align: left;
    line-height: 125%;
    list-style-type: square;
}




/*--------------------------------------------------------------------------------------------------*/
/* index.html: datatables-Objekt Auswahl Technischer Platz */
/*--------------------------------------------------------------------------------------------------*/
#index-select-places {
    width: 100% !important;
    margin: 15px;
    margin-bottom: 0px;
    font-size: calc(6px + 0.4vw);
}

#index-select-places span {
    font-size: calc(8px + 0.4vw);
    font-weight: 500;
    max-width: 50vw;
    padding-left: 5px;
}

#index-select-places-detail {
    position: relative;
    top: 0px;
    user-select: none;
}



#index-select-places table {
    margin: 0 auto;
    border: 1px #999 solid;
}

#index-select-places table thead{
    text-align: left;
}

#index-select-places table thead tr th {
    padding-left: 5px;
    padding-right: 15px;
    background-color: #666;
    color: #FFF;
}

#index-select-places table tbody{
    text-align: left;
}

#index-select-places table tbody tr:nth-of-type(even) {
    background-color: #EEE;
}

#index-select-places table tbody tr:nth-of-type(odd) {
    background-color: #FFF;
}

#index-select-places table tbody tr td {
    padding-left: 5px;
    padding-right: 15px;
}




/*--------------------------------------------------------------------------------------------------*/
/* index.html: datatables-Objekt Auswahl Session */
/*--------------------------------------------------------------------------------------------------*/
#index-sessions-container {
    display: flex;
}

#index-sessions-container span {
    padding-left: 19px;
    font-size: calc(8px + 0.4vw);
    font-weight: 500;
    max-width: 30vw;
    line-height: 150%;
}

#index-sessions-import-sessions {
    padding-left: 20px;
    padding-right: 20px;
    display: flex-item;
}

#index-sessions-import-meta {
    padding-left: 20px;
    padding-right: 20px;
    display: flex-item;
}

#index-sessions-import-profile {
    padding-left: 20px;
    padding-right: 20px;
    display: flex-item;
}

#index-sessions-lock {
    padding-left: 20px;
    padding-right: 20px;
    display: flex-item;
}

#index-sessions-delete {
    padding-left: 20px;
    padding-right: 20px;
    display: flex-item;
}


#index-select-sessions {
    width: 100%;
    margin: 15px;
    margin-bottom: 0px;
    font-size: calc(6px + 0.4vw);
}

#index-select-sessions span {
    font-size: calc(8px + 0.4vw);
    font-weight: 500;
    max-width: 50vw;
}

#index-select-sessions-detail {
    position: relative;
    top: -40px;
    top: 0px;
    user-select: none;
}

#index-select-sessions table {
    margin: 0 auto;
    border: 1px #999 solid;
}

#index-select-sessions table thead{
    text-align: left;
}

#index-select-sessions table thead tr th {
    padding-left: 5px;
    padding-right: 15px;
    background-color: #666;
    color: #FFF;
}

#index-select-sessions table tbody{
    text-align: left;
}

#index-select-sessions table tbody tr:nth-of-type(even) {
    background-color: #EEE;
}

#index-select-sessions table tbody tr:nth-of-type(odd) {
    background-color: #FFF;
}

#index-select-sessions table tbody tr td {
    padding-left: 5px;
    padding-right: 15px;
}



/*--------------------------------------------------------------------------------------------------*/
/* index.html: datatables-Objekt Switches */
/*--------------------------------------------------------------------------------------------------*/
#index-select-switches {
    width: 100%;
    margin: 15px;
    margin-bottom: 0px;
    font-size: calc(6px + 0.4vw);
}

#index-select-switches span {
    font-size: calc(8px + 0.4vw);
    font-weight: 500;
    max-width: 50vw;
}

#index-select-switches-detail {
    position: relative;
    user-select: none;
}

#index-select-switches table {
    margin: 0 auto;
    border: 1px #999 solid;
}

#index-select-switches table thead{
    text-align: left;
}

#index-select-switches table thead tr th {
    padding-left: 5px;
    padding-right: 15px;
    background-color: #666;
    color: #FFF;
}

#index-select-switches table tbody{
    text-align: left;
}

#index-select-switches table tbody tr:nth-of-type(even) {
    background-color: #EEE;
}

#index-select-switches table tbody tr:nth-of-type(odd) {
    background-color: #FFF;
}

#index-select-switches table tbody tr td {
    padding-left: 5px;
    padding-right: 15px;
}



/* Befehlsschaltflächen im Weichenkatalog */

#index-switches-container-upload-download {
    display: flex;
}

#index-switches-container-upload-download span {
    padding-left: 19px;
    font-size: calc(8px + 0.4vw);
    font-weight: 500;
    max-width: 50vw;
    line-height: 150%;
}

#index-switches-container-list-preview {
    display: flex;
    width: 100%;
}

#index-select-switches-preview {
    display: flex-item;
    width: 50%;

    border: 1px #DDD solid;
    margin: 15px;
    
    padding: 0px 10px;
    margin-bottom: 0px;
    font-size: calc(6px + 0.4vw);
}


#index-select-switches-list {
    display: flex-item;
    width: 50%;
    
    border: 1px #DDD solid;
    margin: 15px;
        
    font-size: calc(6px + 0.4vw);
    margin-bottom: 0px;
    padding: 0px 10px;
}



#index-switches-download {
    padding-left: 20px;
    padding-right: 20px;
    display: flex-item;
}


#index-switches-upload {
    padding-left: 20px;
    padding-right: 20px;
    display: flex-item;
}

#index-switches-deploy {
    padding-left: 20px;
    padding-right: 20px;
    display: flex-item;
}



/*--------------------------------------------------------------------------------------------------*/
/* index.html: datatables-Objekt Ramps */
/*--------------------------------------------------------------------------------------------------*/


#index-ramps-container-list-preview {
    display: flex;
}

 
#index-select-ramps-preview {
    display: flex-item;
    width: 50%;

    border: 1px #DDD solid;
    margin: 15px;
    
    padding: 0px 10px;
    margin-bottom: 0px;
    font-size: calc(6px + 0.4vw);
}



#index-ramps-container-upload-download {
    display: flex;
}

#index-ramps-download {
    padding-left: 20px;
    padding-right: 20px;
    display: flex-item;
}


#index-ramps-upload {
    padding-left: 20px;
    padding-right: 20px;
    display: flex-item;
}




#index-select-ramps-list {
    border: 1px #DDD solid;

    display: flex-item;
    width: 50%;
    margin: 15px;
    margin-bottom: 0px;
    font-size: calc(6px + 0.4vw);
    padding: 0px 10px;
}

#index-select-ramps span {
    font-size: calc(8px + 0.4vw);
    font-weight: 500;
    max-width: 50vw;
}

#index-select-ramps-detail {
    position: relative;
    top: 0px;
    user-select: none;
}

#index-select-ramps-list table {
    margin: 0 auto;
    border: 1px #999 solid;
}

#index-select-ramps-list table thead{
    text-align: left;
}

#index-select-ramps-list table thead tr th {
    padding-left: 5px;
    padding-right: 15px;
    background-color: #666;
    color: #FFF;
}

#index-select-ramps-list table tbody{
    text-align: left;
}

#index-select-ramps-list table tbody tr:nth-of-type(even) {
    background-color: #EEE;
}

#index-select-ramps-list table tbody tr:nth-of-type(odd) {
    background-color: #FFF;
}

#index-select-ramps-list table tbody tr td {
    padding-left: 5px;
    padding-right: 15px;
}













#container-top-info {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 25% 30% 24% 20%;
    padding: 10px;
}
 

#container-top-info > div { 
    background-color: var(--background-field);
    border-radius: 0px;
    margin: 10px;
    margin-bottom: 2px;    
    line-height: normal;
    height: 100%;
    display: block;

    border: 1px #D8D8D8 solid;
}


#container-top-info > div > p {
    background-color: #666;    
    color: #FFF;

    font-size: 16px;
    font-weight: 600;

    padding: 3px 5px;
}

#top-info-content {
    user-select: none;
    padding-top: 7px; 
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 3px;

    /*border: 1px #F00 solid;*/

    max-height: var(--height_info);

    /*overflow: hidden;*/
    overflow-y: auto;


    display: block;
}



#top-info-customer-data h1 {
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 5px;
}

#top-info-customer-data h2 {
    font-size: 13px;
    font-weight: 500;
    padding-bottom: 4px;
}

#top-info-customer-data h3 {
    font-size: 13px;
    font-weight: 400;
    padding-bottom: 3px;
}

#top-info-customer-data h4 {
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 2px;

}

#top-info-customer-data h5 {
    font-size: 13px;
    font-weight: 300;
    padding-bottom: 2px;

}

#top-info-customer-data h6 {
    color: #F00;
    padding-top: 15px;
    font-size: 16px;
    font-weight: 600;
}



#top-info-devices table {
    table-layout: fixed;   
    border-spacing: 5px;
    word-wrap: break-word;
    width: 100%;
    max-height: var(--height_info);
    display: block;
}

#top-info-devices thead {
    text-align: left;
    padding: 0;    
}



#top-info-devices th {
    padding-right: 30px;
    font-size: 0.75vw;
    font-weight: 600;    
    /*border: 1px #333 solid;*/
}

#top-info-devices th:nth-child(1), td:nth-child(1) {
    overflow: hidden;
    width: calc(8vw - 30px);
}

#top-info-devices th:nth-child(2), td:nth-child(2) {
    overflow: hidden;
    width: calc(7vw - 30px);
}

#top-info-devices th:nth-child(3), td:nth-child(3) {
    overflow: hidden;
    width: calc(9vw - 30px);
}

#top-info-devices th:nth-child(4), td:nth-child(4) {
    overflow: hidden;
    width: calc(4vw - 30px);
}

#top-info-devices tbody {
    text-align: left;
    padding: 0;
}

#top-info-devices td {
    padding-right: 30px;
    font-size: 0.70vw;
    font-weight: 300;

    /*border: 1px #0F0 solid;*/
}
    


#top-info-devices h1 {
    font-size: 16px;
    font-weight: 600;
}

#top-info-devices h6 {
    color: #F00;
    padding-top: 15px;
    font-size: 16px;
    font-weight: 600;
}



#top-info-system {
    font-size: 0.75vw;
    font-weight: 300;
}


#top-info-system table {
    table-layout: fixed;   
    border-spacing: 5px;
    word-wrap: break-word;
    width: 100%;
    max-height: var(--height_info);
    display: block;

/*
    width: 100%;
    border-spacing: 5px;
    table-layout: fixed;
    word-wrap: break-word;*/
}

#top-info-system td {
    
    padding-right: 30px;

}
    
#top-info-system h1 {
    font-size: 0.75vw;
    font-weight: 600;
}

#top-info-system h2 {
    padding: 5px;
    font-size: 0.75vw;
    font-weight: 300;
}


#top-info-system h6 {
    color: #F00;
    padding-top: 15px;
    font-size: 0.75vw;
    font-weight: 600;
}




#top-info-contact-data h1 {
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 5px;
}

#top-info-contact-data h2 {
    font-size: 13px;
    font-weight: 500;
    padding-bottom: 4px;
}

#top-info-contact-data h3 {
    font-size: 13px;
    font-weight: 400;
    padding-bottom: 3px;
}

#top-info-contact-data h4 {
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 2px;
}

#top-info-contact-data h5 {
    font-size: 13px;
    font-weight: 300;
    padding-bottom: 2px;
}

#top-info-contact-data h6 {
    color: #F00;
    padding-top: 15px;
    font-size: 16px;
    font-weight: 600;
}





#drop-area {
    width: 100px;
    height: 100px;

    border: 3px #777 solid;
    border-radius: 6px;

}

#drop-area.highlight {
    border: 3px #AAA solid;
}







/*--------------------------------------------------------------------------------------------------*/
/* index.html: Tabs
/*--------------------------------------------------------------------------------------------------*/
#index-select-tabbed {
    width: 99vw; 
    padding-left: 19px;
    padding-right: 19px;
    padding-top: 0px;
    padding-bottom: 3px;
    display: block;

    box-sizing: border-box;
}


.tabbed {
    width: 100%;
}


/* Tabs mit radio-Buttons */
.tabbed menu { 
	list-style-type: none;

    width: 100%;

    display: block;
}


.tabbed > input,
.tabbed menu li {
	display: none;
}

.tabbed menu > li {
    box-sizing: border-box;

    padding: 19px;
    
    width: calc(99vw - 38px); 

    border: 1px solid silver;
    background: var(--background-field);
    line-height: 1.5em;
    letter-spacing: 0.3px;
    color: #444;

    display: flex-item;


    margin-bottom: 30px;
}

#tab1:checked ~ menu .tab1,
#tab2:checked ~ menu .tab2,
#tab3:checked ~ menu .tab3,
#tab4:checked ~ menu .tab4 {
  display: flex; 
  justify-content: space-between; 
  /*padding-bottom: 2em; */
}

.nav label {
    float: left;
    padding: 10px 15px;
    border-top: 1px solid silver;
    border-right: 1px solid silver;
    background: var(--tabs);
    color: #eee;

    font-size: 14px;
    font-weight: 600;

    user-select: none;
}



.nav label:nth-child(1) { border-left: 1px solid silver; }
.nav label:hover { 
    background: var(--tabs);
    cursor: pointer;
}
.nav label:active { background: #ffffff; }

#tab1:checked ~ .nav label[for="tab1"],
#tab2:checked ~ .nav label[for="tab2"],
#tab3:checked ~ .nav label[for="tab3"],
#tab4:checked ~ .nav label[for="tab4"] {
  background: white;
  color: #111;
  position: relative;
  border-bottom: none;
}

#tab1:checked ~ .nav label[for="tab1"]:after,
#tab2:checked ~ .nav label[for="tab2"]:after,
#tab3:checked ~ .nav label[for="tab3"]:after,
#tab4:checked ~ .nav label[for="tab4"]:after {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: white;
  left: 0;
  bottom: -1px;
}





.flex-item-space {
    width: calc(100% - 38px);

    display: block;    
}




/*--------------------------------------------------------------------------------------------------*/
/* Eingabefelder index.html => Tabs 
/*--------------------------------------------------------------------------------------------------*/
#index-edit-places {
/*    position: relative;
    top: -110px;*/

    /*border: 1px #EEE solid;*/
    background-color: var(--background-fields);
    
    padding: 0px 15px;
    padding-bottom: 5px;

    width: 100%;    
}


#index-edit-places label {
    font-size: calc(8px + 0.5vw);
    font-weight: 600;

    padding-left: 10px;
    padding-right: 10px;    
}


#index-edit-places input[type=text] {
    font-family: 'Bahnschrift';
    font-size: calc(8px + 0.5vw);
    font-weight: 300;

    padding-left: 10px;
    padding-right: 10px;
    margin-right: 30px;    

    width: 200px;  
    height: 30px;
}


#index-edit-places select {
    font-family: 'Bahnschrift';
    font-size: calc(8px + 0.5vw);
    font-weight: 300;

    
    
    padding-left: 10px;
    padding-right: 10px;
    margin-right: 80px;    

    width: 230px;  
    /*height: 34px;*/

    background-color: #FFF;
    border: 1px #777 solid;

    position: relative;
    top: 0px;
}




#index-edit-places input[type=submit] {
    font-family: 'Bahnschrift';
    background-color: #ec1b2d;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
}




#index-edit-places input[type=submit]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}



/*
<div id="index-edit-places">
                                <form id="form-index-edit-places" method="post" action="">
                                    <label for="technischerPlatz">Technischer Platz:</label>
                                    <input type="text" name="technischerPlatz" id="input-field-technischerPlatz"/>
                                    
                                    <label for="weichentyp">Weichentyp:</label>
                                    <input type="text" name="weichentyp" id="input-field-weichentyp"/>

                                    <input type='submit' value="Änderungen anwenden">
                                </form>        

*/







#accordeon-top-info {
    
}


#accordeon-top-info summary {
    font-size: calc(8px + 0.8vw);
    padding-left: 25px;
    padding-top: 20px;
    user-select: none;
}

#accordeon-top-info summary span {
    font-size: calc(11px + 0.85vw);
    padding-left: 25px;
    user-select: none;
    color: #f00;
}

#accordeon-top-info summary:hover {
    cursor: pointer;
}

#accordeon-top-info summary a {
    background-color: var(--buttons);
    border: none;
    color: white;
    padding: 18px 24px !important;
    text-align: center;
    text-decoration: none;
    font-size: calc(8px + 0.75vw);
    cursor: pointer;
    border-radius: 4px;
    font-weight: 500;
    position: absolute;
    right: calc(1vw + 19px); /*50vw;*/

    margin-top: -20px;

}





#accordeon-top-info details[open] summary ~ * {animation: sweep .2s ease-in-out;}

@keyframes sweep {
  0%    {opacity: 0; margin-left: 0px}
  100%  {opacity: 1; margin-left: 0px}
}



#wrapper-full-height {
    width: 100vw;    
    margin: 0 auto;
    float: left;
    border-bottom: 3px #DDD solid;
    display: block;
}


#index-footer {
    width: 100vw;
    font-size: calc(6px + 0.3vw);
    font-weight: 400;
    font-family: 'Bahnschrift';
    display: block;
    float: left;

}

#index-footer a {
    padding-left: 19px;
    padding-top: 6px;
    color: #333;
    text-decoration: none;
}









 #spinner {
    
    background-color: #FFF;
    opacity: 0.8;

    position: absolute;
    left: 50%;
    top: 50%;
    height: 60px;
    width: 60px;
    margin: 0px auto;
    
    -webkit-animation: rotation .6s infinite linear;
    -moz-animation: rotation .6s infinite linear;
    -o-animation: rotation .6s infinite linear;
    animation: rotation .6s infinite linear;
    border-left:10px solid rgba(255,17,23,.15);
    border-right:10px solid rgba(255,17,23,.15);
    border-bottom:10px solid rgba(255,17,23,.15);
    border-top:10px solid rgba(255,17,23,.8);
    
    border-radius:100%;

    z-index: 100;

    display: none;
    }
        
    @-webkit-keyframes rotation {
       from {-webkit-transform: rotate(0deg);}
       to {-webkit-transform: rotate(359deg);}
    }
    @-moz-keyframes rotation {
       from {-moz-transform: rotate(0deg);}
       to {-moz-transform: rotate(359deg);}
    }
    @-o-keyframes rotation {
       from {-o-transform: rotate(0deg);}
       to {-o-transform: rotate(359deg);}
    }
    @keyframes rotation {
       from {transform: rotate(0deg);}
       to {transform: rotate(359deg);}
    }

#spinner-progress {
    position: absolute;
    left: calc(50% + 10px);
    top: calc(50% + 30px);

    width: 60px;
    height: 60px;
    
    margin: 0px auto;
    
    text-align: center;
    vertical-align: center;

    font-size: 1.0vw;
    font-weight: 700;
    color: rgba(255,17,23,.8);

    z-index: 101;

    display: none;
}



#remote-wrapper {
    margin: 0 auto;
    width: 1280px;
}

#remote-container {
    width: 1280px;
    height: 914px;
    background-image: url("tablet_remote_small.png");
    z-index: 0;
}

#remote-embedded {
    position: relative;
    top: 53px;
    left: 122px;
    z-index: 1;
}

#remote-embedded iframe {
    background-color: #FFF;
    border: none;
}


.body_wrapper iframe {
    background-color: #FFF;
    border: 1px #ddd solid;
}


#remote-exit-button-container {
    max-width: 120px;
    float: right;
}

a.remote-exit-button {
    background-color: #2427c4c0; /*var(--buttons); */
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
}

a.remote-exit-button:visited {
    color: white;
    text-decoration: none;
}

#remote_offline {
    text-align: center;
    border: 2px rgba(221, 0, 0, 0.377) solid;
    border-radius: 5px;
    color: rgba(221, 0, 0, 0.377);
    font-size: 10px;
    font-weight: 300;
    padding: 5px 3px;

}

#remote_online {
    text-align: center;
    border: 2px rgba(0, 221, 18, 0.363) solid;
    border-radius: 5px;
    background-color: rgba(0, 221, 18, 0.808);
    color: #FFF;
    font-weight: 500;
    font-size: 10px;
    padding: 5px 3px;

}

#remote_online a {
    color: #FFF;
    text-decoration: none;
}

#remote_online a:visited {
    color: white;
    text-decoration: none;
}



#table-switches {
    display: none;
}


#switches-informations {
    width: 10vw;
    padding: 10px;
    color: #333;
    font-size: 0.8vw;
    font-weight: 300;
    line-height: 150%;
}

#lastExport, #lastImport, #lastDeploy {
    padding-top: 3px;
    color: #999;
    font-size: calc(9px + 0.15vw);
    font-weight: 300;
}


#buttonIndexSessionLockUnlock:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}


#buttonIndexSessionDelete:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}





/* ------------------------------------------------------------------------------------ */
/* AUSWERTUNG: Auswahl Technischer Platz                                                */
/* ------------------------------------------------------------------------------------ */
#analysis-select-places-header {
    padding: 0px 30px;

}

#analysis-select-places-header h1 {
    font-size: calc(24px + 0.5vw);
    font-weight: 600;
    padding-bottom: 20px;
}

#analysis-select-places-header span {
    font-size: calc(14px + 0.25vw);
    font-weight: 300;
    padding-bottom: 40px;
}

#analysis-select-places-header a {
    background-color: var(--buttons);
    border: none;
    color: white;
    padding: 18px 24px !important;
    text-align: center;
    text-decoration: none;
    font-size: calc(8px + 0.75vw);
    cursor: pointer;
    border-radius: 4px;
    font-weight: 500;
    position: absolute;
    right: calc(1vw + 19px); /*50vw;*/

    margin-top: -50px;
}

#analysis-select-places-filter {

}

#analysis-select-places-list {
    border: 1px #DDD solid;

    display: flex-item;
    width: calc(100vw - 52px);
    margin: 15px;
    margin-bottom: 0px;
    font-size: calc(6px + 0.4vw);
    padding: 0px 10px;
    user-select: none;
}

#analysis-select-places-detail {
    position: relative;
    top: 0px;
}


#analysis-select-places-list table {
    margin: 0 auto;
    border: 1px #999 solid;
}

#analysis-select-places-list table thead{
    text-align: left;
}

#analysis-select-places-list table thead tr th {
    padding-left: 5px;
    padding-right: 15px;
    background-color: #666;
    color: #FFF;
}

#analysis-select-places-list table tbody{
    text-align: left;
}

#analysis-select-places-list table tbody tr:nth-of-type(even) {
    background-color: #EEE;
}

#analysis-select-places-list table tbody tr:nth-of-type(odd) {
    background-color: #FFF;
}

#analysis-select-places-list table tbody tr td {
    padding-left: 5px;
    padding-right: 15px;
}

#analysis-select-places-buttons {
    padding: 30px 30px;
    text-align: center;
    user-select: none;
}


/* ------------------------------------------------------------------------------------ */
/* AUSWERTUNG: Auswahl Sessions                                                         */
/* ------------------------------------------------------------------------------------ */
#analysis-select-sessions-header {
    padding-top: 0px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
}

#analysis-select-sessions-header h1 {
    font-size: calc(24px + 0.5vw);
    font-weight: 600;
    padding-bottom: 20px;
}

#analysis-select-sessions-header p {
    font-size: calc(14px + 0.25vw);
    font-weight: 300;
}


#analysis-select-sessions-header a {
    background-color: var(--buttons);
    border: none;
    color: white;
    padding: 18px 24px !important;
    text-align: center;
    text-decoration: none;
    font-size: calc(8px + 0.75vw);
    cursor: pointer;
    border-radius: 4px;
    font-weight: 500;
    position: absolute;
    right: calc(1vw + 19px); /*50vw;*/

    margin-top: -50px;

}




#table-preselection-place {
    padding-top: 0px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
}

#table-preselection-place p {
    font-size: calc(10px + 0.25vw);
    font-weight: 300;
    padding-bottom: 8px;
}

#table-preselection-place table {
    border: 1px #CCC solid;
    background-color: #F8F8F8;
}

#table-preselection-place thead {
    font-size: calc(8px + 0.35vw);
    font-weight: 600;
}

#table-preselection-place tbody {
    font-size: calc(8px + 0.35vw);
    font-weight: 300;
}

#table-preselection-place table thead th {
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
    /*border: 1px #CCC solid;*/
}

#table-preselection-place table tbody td {
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
    /*border: 1px #CCC solid;*/
}








#analysis-select-sessions-filter {
    padding: 10px 30px;    
    user-select: none;
}

#analysis-select-sessions-filter-container {
    display: flex;
}

#analysis-select-sessions-filter p {
    font-size: calc(14px + 0.25vw);
    font-weight: 600;
    padding-bottom: 8px;    
    padding-right: 20px;
}

/* ------------------------------------------------------------------------------------ */
/* hier kommt die Tabelle mit den einzelnen Filtern                                     */
/* ------------------------------------------------------------------------------------ */
.analysis-select-sessions-filter-container-item {
    padding-right: 20px;
    vertical-align: top;
}

#analysis-select-sessions-filter-container table {
    border: 1px #CCC solid;
    padding-right: 30px;
    /*min-width: 70vw;*/
}

#analysis-select-sessions-filter-container table thead {
    font-size: calc(8px + 0.35vw);
    font-weight: 600;
}

#analysis-select-sessions-filter-container table tbody {
    font-size: calc(8px + 0.35vw);
    font-weight: 300;
}

#analysis-select-sessions-filter-container table thead th {
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
}

#analysis-select-sessions-filter-container table tbody td {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}


/* ------------------------------------------------------------------------------------ */
/* FILTER Datum von                                                                     */
/* ------------------------------------------------------------------------------------ */
#analysis-select-sessions-filter-datumVon-container input {
    font-family: 'Bahnschrift';
    font-size: calc(8px + 0.35vw);
    font-weight: 300;

    padding-left: 20px;
    padding-right: 20px;
    height: 48px;
}

/* ------------------------------------------------------------------------------------ */
/* FILTER Datum bis                                                                     */
/* ------------------------------------------------------------------------------------ */
#analysis-select-sessions-filter-datumBis-container input {
    font-family: 'Bahnschrift';
    font-size: calc(8px + 0.35vw);
    font-weight: 300;

    padding-left: 20px;
    padding-right: 20px;
    height: 48px;
}

/* ------------------------------------------------------------------------------------ */
/* FILTER Gerätetyp                                                                     */
/* ------------------------------------------------------------------------------------ */
#analysis-select-sessions-filter-geraetetyp-container {
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
}

#analysis-select-sessions-filter-geraetetyp-container select {
    margin-top: 0px;
    margin-bottom: 0px;

    padding-left: 20px;
    padding-right: 20px;

    text-align: left;
    line-height: 120%;

    height: 52px;
    background-color: #FFF;
    border: 1px #777 solid;

    font-family: 'Bahnschrift';
    font-size: calc(8px + 0.35vw);
    font-weight: 300;
}


/* ------------------------------------------------------------------------------------ */
/* FILTER Messzweck (checkboxes)                                                        */
/* ------------------------------------------------------------------------------------ */
#analysis-select-sessions-filter-messzweck-container {
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
}

#analysis-select-sessions-filter-messzweck-container label {
    display: block;   
}

#analysis-select-sessions-filter-messzweck-container .chkFilter input {
    vertical-align: middle;
    position: relative;
}

/* ------------------------------------------------------------------------------------ */
/* FILTER Gleisauswahl                                                                  */
/* ------------------------------------------------------------------------------------ */
#analysis-select-sessions-filter-gleisauswahl-container {
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
}

#analysis-select-sessions-filter-gleisauswahl-container select {
    margin-top: 0px;
    margin-bottom: 0px;

    padding-left: 20px;
    padding-right: 20px;
    padding-top: 3px;
    padding-bottom: 3px;

    text-align: left;
    line-height: 120%;

    height: 52px;
    width: auto;

    background-color: #FFF;
    border: 1px #777 solid;

    font-family: 'Bahnschrift';
    font-size: calc(8px + 0.35vw);
    font-weight: 300;    
}

/* ------------------------------------------------------------------------------------ */
/* FILTER Anzahl gültiger Messungen                                                     */
/* ------------------------------------------------------------------------------------ */
#analysis-select-sessions-filter-anzahlMinGueltig-container {
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
}

#analysis-select-sessions-filter-anzahlMinGueltig-container input {
    text-align: left;
    line-height: 120%;

    background-color: #FFF;
    border: 1px #777 solid;

    font-family: 'Bahnschrift';
    font-size: calc(8px + 0.35vw);
    font-weight: 300;
    
    padding-left: 20px;
    padding-right: 20px;

    max-width: 100px;
    height: 52px;
}


/* ------------------------------------------------------------------------------------ */
/* Button "Filter anwenden"                                                             */
/* ------------------------------------------------------------------------------------ */
#analysis-select-sessions-filter-button {
    float: left;
}







#analysis-select-sessions-list {

    float: none;
    border: 1px #DDD solid;

    display: flex-item;
    width: calc(100vw - 52px);
    margin: 15px;
    margin-bottom: 0px;
    font-size: calc(6px + 0.4vw);
    padding: 0px 10px;
    user-select: none;
}

#analysis-select-sessions-detail {
    position: relative;
    top: 0px;
}

#analysis-select-sessions-list table {
    margin: 0 auto;
    border: 1px #999 solid;
}

#analysis-select-sessions-list table thead{
    text-align: left;
}

#analysis-select-sessions-list table thead tr th {
    padding-left: 5px;
    padding-right: 15px;
    background-color: #666;
    color: #FFF;
}

#analysis-select-sessions-list table tbody{
    text-align: left;
}

#analysis-select-sessions-list table tbody tr:nth-of-type(even) {
    background-color: #EEE;
}

#analysis-select-sessions-list table tbody tr:nth-of-type(odd) {
    background-color: #FFF;
}

#analysis-select-sessions-list table tbody tr td {
    padding-left: 5px;
    padding-right: 15px;
}

#analysis-select-sessions-buttons {
    padding: 30px 30px;
    text-align: center;
    user-select: none;
}