body {
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
    overflow-y: hidden; /* Hide vertical scrollbar */
    overflow-x: hidden; /* Hide horizontal scrollbar */
}



html, body{
    height: 100%;
    margin: 0;
}
.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%;
}
.v-box{
    border: 3px solid #982937;

    
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    text-align: left;
}

.loginForm label {
    width: 30%;
    font-size: 20px;
}

.loginForm input {
    font-size: 20px;
}

.loginForm {
    width: 500px;
}

#submit-login {
    padding: 5px 25px 5px 25px;
}


.loginForm, loginForm input, loginForm select,
.queueForm,
.queueForm input,
.queueForm select {
    font-size: 20px;
}

.queueform {
    height: 200px;
    position: relative;
    border: 3px solid #982937;
}

.queueform p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.queueheader {
    text-align: left;
    background-image: url("/gfx/bg.png");
    background-repeat: repeat-x;
}


*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/*    background-image: url("gfx/bg.png");
    background-repeat: repeat-x;
*/


.item0  {
    grid-area: header1;
    height: 100px !important;
    padding: 0px !important;
    text-align: left !important;;
    background-image: url("/gfx/bg.png");
    background-repeat: repeat-x;
}
.item1  { grid-area: header2; font-weight: bold; }
.item2  { grid-area: ko_h; }
.item3  { grid-area: ko_d; }
.item4  { grid-area: lengste_h; }
.item5  { grid-area: lengste_d; }
.item6  { grid-area: gns_h; }
.item7  { grid-area: gns_d; }
.item8  { grid-area: ledige_h; }
.item9  { grid-area: ledige_d; }
.item10 { grid-area: samtale_h; }
.item11 { grid-area: samtale_d; }
.item12 { grid-area: pause_h; }
.item13 { grid-area: pause_d; }
.item14 { grid-area: svarprocent_h; }
.item15 { grid-area: svarprocent_d; }
.item16 { grid-area: opkald_h; }
.item17 { grid-area: opkald_d; }
.item18 { grid-area: besvaret_h; }
.item19 { grid-area: besvaret_d; }
.item20 { grid-area: tabte_h; }
.item21 { grid-area: tabte_d; }
.item22 { grid-area: fritekst; }


.header {
    font-size: 2.5vw !important;
/*    font-weight: bold; */
}
.data {
    font-size: 8vw !important;
/*    font-weight: bold; */

}

.dataBig {
    font-size: 20vw !important;
/*    font-weight: bold; */
}

.dataSmall {
    font-size: 7vw !important;
/*    font-weight: bold; */

}

.grid-container {
    position: relative;
/*    grid-template-columns: 10em auto 10em; */
    grid-template-rows: 0.5fr 0.5fr 0.3fr 1fr 0.3fr 1fr 0.3fr 1fr 0.5fr;
    display: grid;
    grid-template-areas:
        'header1       header1        header1       header1   header1   header1    header1    header1  header1'
        'header2       header2        header2       header2   header2   header2    header2    header2  header2'
	'ko_h          ko_h           ko_h          lengste_h lengste_h lengste_h  gns_h      gns_h    gns_h'
	'ko_d          ko_d           ko_d          lengste_d lengste_d lengste_d  gns_d      gns_d    gns_d'
	'ko_d          ko_d           ko_d          ledige_h  ledige_h  samtale_h  samtale_h  pause_h  pause_h'
	'ko_d          ko_d           ko_d          ledige_d  ledige_d  samtale_d  samtale_d  pause_d  pause_d'
	'svarprocent_h svarprocent_h  svarprocent_h opkald_h  opkald_h  besvaret_h besvaret_h tabte_h  tabte_h'
	'svarprocent_d svarprocent_d  svarprocent_d opkald_d  opkald_d  besvaret_d besvaret_d tabte_d  tabte_d'
	'fritekst      fritekst       fritekst      fritekst  fritekst  fritekst   fritekst   fritekst fritekst';
    grid-gap: 2px;
/*    background-color: #2196F3;  */
    padding: 0px;
    width: 100vw;
    height: 100vh;
}

.grid-container > div {
    background-color: rgba(255, 255, 255, 0.8); 
    text-align: center;
    padding: 0px 0;
    font-size: 30px;
}
    

form label {
    display: inline-block;
    width: 100px;
}

form div {
    margin-bottom: 10px;
}

.error {
    color: red;
    margin-left: 5px;
}

label.error {
    display: inline;
}