.aNonEvent {
    pointer-events: none;
}

#btnPasswortVergessen,
#btnNewVerificatioCode{
    cursor: pointer;
}
#divWellcome{
    position: absolute;
    top: calc((100vh - 330px) / 2);
    left: calc((100vw - 905px) / 2);
    width: 905px;
    height: 330px;
    z-index: 500;
    visibility: hidden;
}
#tblWellcome{
    font-size: smaller;
    font-weight: bold;
    text-align: center;
    color:var(--vgColor);
    border: 0; 
    height: 100%;
    width: 100%;
    background-color: var(--hgColor);
}

#divLetzteNummern {
    position:absolute; 
    top:5px; 
    left:30px; 
    width:240px; 
    z-index:100; 
}

#divHeader {
    position: absolute;
    width: 600px;
    left: var(--divHeaderLeft);
}
#divRennbahnContainer {
    position: absolute;
    top: 0;
    left: 0;  
    top: calc((100vh - 330px) / 2);
    left: calc((100vw - 905px) / 2);

    background-color: var(--bgTransDark);
    width: 900px;
    height: 330px; 
    z-index: 310; 

}
#divRennbahn{
    position: absolute;
    top: 0px;  
    left: 68px;
    width: 763px;
    height: 300px; 
}
#btnRennbahnBack {
    height: 40px;
    padding: 0 1rem;
}
#spielName{
    position: sticky;
    top: 10px;
    padding: 5px;
    border: 5px outset var(--vgColorLight);
    border-radius: 8px;
    box-shadow: 5px 5px var(--hgColorDark);
    text-align: center;
    text-shadow: .15em .15em var(--vgColorDark);
    font-weight: bolder;
}

#divZahlSelektorScreen{
    position: absolute; 
    display: none;
    background-color: var(--shaddowTrans);
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%;
    min-width: 906px;
    min-height: 420px;
    text-align: center;
    z-index:1000; 

}
#divZahlSelektorScreen button{
    height: 32px;
    padding: 0 1rem;
}

#divZahlSelektor{
    position: absolute; 
    display: none;
    background-color: var(--hgColor);
    top:0px; 
    left:600px; 
    width:300px; 
    text-align: center;
    z-index:420; 
}
#divCasinoMode{
    position: absolute; 
    display: none;
    background-color: var(--hgColor);
    top:0px; 
    left:0px; 
    width:600px; 
    height:300px; 
    z-index:410; 
}

#btnCasinoModeRennbahn {
    display: none;
}

#msgBox,
#divSpielerLayer,
#divSpielerLoginLayer,
#divSpielerLoginLoginLayer,
#divSpielerLoginRegisterLayer,
#divSpielerWorkbench,
#divSpielerWorkbenchAuswahl,
#divSpielerSaveLoad{
    top: calc((100vh - 330px) / 2);
    left: calc((100vw - 905px) / 2);
    height: 330px;
    width: 905px;
}
#divSpielerWorkbenchAuswahl img {
    border: 2px solid #00000000;
    
}
#divSpielerWorkbenchAuswahl img:hover {
    border: 2px solid var(--vgColorDark);
    border-radius: 20px;
}
#quickMenue {
    position: absolute;
    box-sizing: border-box;
    /* top: 335px; */
    top: var(--contentTop);
    left: 0;
    width: 100%;
    padding: .5rem;
    background-color: var(--hgColor);
    font-size: 1.5rem;
    border-radius: 20px;

    z-index: 310;
}
#quickMenue table td{
    width: 33.33%;
    height: 34px;
}
#manuelGameCounterButtons {
    box-sizing: border-box;
    position: absolute;
    /* top: 204px; */
    top: calc(var(--contentTop) - 131px);
    left: calc(50% - 150px);
    width: 300px;
    padding: 1rem 2rem 0 ;
    background-color: var(--hgColor);
    font-size: 2rem;
    text-align: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom: 0;
    z-index: 311;
}
#manuelGameCounterButtons button {
    margin-bottom: 20px;
    height: 32px;
    font-size: 1.5rem;
    padding: 0 1rem;
}
#qMenStatistik,
#qMenRennbahn {
    height: 32px;
    margin-top: 5px;
}
#qMenBtnRoulAddMemo,
#qMenBtnRoulMemoMinus,
#qMenBtnRoulMemoPlus,
#qMenHistoryOneBack,
#qMenRemoveJetons,
#qMenReplay,
#qMenKeeselClick {
    display: inline-block;
    width: 32px;
    height: 32px;

    cursor: pointer;
    background-color: var(--hgColorDark);
    text-align: center;

    border: 1px solid var(--vgColor);
    border-radius: calc(var(--roul-chip-width) / 2);
  
}
#qMenBtnRoulAddMemo,
#qMenBtnRoulMemoMinus,
#qMenBtnRoulMemoPlus {
    position: relative;
    top: -9px;
}
#qMenBtnRoulAddMemo {
    font-size: 1.3rem;
}
#qMenKeeselClick {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 60px;
    height: 60px;

    border: 0;
    background: url(../image/spielbank/kessel_bottom.png) no-repeat;
    background-size: 60px 60px;
}

#divSpielerTable {
    display: none;
    position: absolute; 
    top: 225px; 
    left: 422px; 
    width: 45px;
    height: 73px;
    background-color: var(--hgColor);
    z-index: 322; 
}

#btnSpieler {
    display: inline-block;
    width: 21px; 
    cursor: pointer; 
}

#btnAudio {
    display: inline-block;
    width: 25px; 
    margin-top: 3px;
    cursor: pointer; 
}

#divSpielGeschwindigkeit {
    display: inline-block;
    position: relative;
    top: -3px;
}

#divGeschwSteuerung {
    display: inline-block;
}

#txtGeschw,
#txtGeschwSteuerung {
    display: inline-block;
    font-size: .8em;
    width: 40px;
    border-top: 1px solid var(--vgColor);
    border-bottom: 1px solid var(--vgColor);
}

#btnSpielStatistikMini {
    cursor: pointer; 
}

#divSettingsLayer,
#divUserVerwaltung {
    box-sizing: border-box;
    display:none;
    position:absolute; 
    background-color: var(--hgColor);
    top: calc((100vh - 330px) / 2);
    left: calc((100vw - 905px) / 2);
    width:906px; 
    height:330px; 
    z-index:520; 
}
#divUserVerwaltung{
    text-align: center;
}
#divStatistik{
    position:absolute; 
    display: none;
    white-space: nowrap;
    top: 0px;
    left: 910px;
    min-width: 200px;
    min-height: 20px;
    /* max-height: 90vh;
    overflow: auto;
    overflow-x: hidden; 
    overflow-y: visible;  */
    padding: 10px;
    background-color: var(--hgColor);
    z-index: 300; 
}
#divStatistikOutput {
    margin-right: 10px;
}

#divSpielerSteuerung {
    position:absolute; 
    background-color: var(--hgColor);
    min-width: 906px;
    width: 100%;
    top: var(--contentTop); 
    text-align: center;
    /* z-index: 300;  */
}

#divSpieleDaten{
    position:absolute; 
    width: calc(100vw - 70px);
    min-width: 906px;
    background-color: var(--hgColor);
    padding: 20px;
    top: var(--contentTop);
}

#divZahlenEditor {
    position:absolute; 
    background-color: var(--hgColor);
    width: 100%;
    top:0px; 
    text-align: center;
    z-index:520; 
}

#divProgressionsVerwaltung,
#divReportVerwaltung {
    box-sizing: border-box;
    position:absolute; 
    top:0px; 
    /* width: calc(100vw - 50px); */
    width: 100%;
    background-color: var(--hgColor);
    text-align: center;
    z-index:520; 
}
#divKessel {
    position: relative; 
    top: 35px; 
    left: 5px;
    width: 290px;
    z-index: 100;
}
#rouletteKessel {
    position: absolute; 
    top: 35px; 
    left: 5px;
    border-radius: 50%;
    background-color: black;
    z-index: 110;
}
#divStepKesselKlick{
    position: absolute; 
    display: none;
    padding: 10px;
    border-radius: 32px;
    top: 150px; 
    left: 25px; 
    width: 250px;
    background-color: var(--hgColor); 
    border: 2px solid var(--vgColorDark);
    z-index: 180; 
}

#divWbHg{
    position: fixed;
    background-color: var(--bgTransDark);
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 499;
}

#divdialogHg{
    position: fixed;
    display: none;
    background-color: var(--shaddowTrans);
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

#divInfoMessage{
    position: fixed;
    display: none;
    background-color: var(--hgColorDark);
    color: var(--vgColor);
   
    margin: auto;
    top: 20vh;
    right: 0;
    left: 0;
    width: 66vw;

    border: 6px ridge var(--vgColorLight);
    border-radius: 32px;
    padding: 20px;

    font-size: 1.5rem;
    font-weight: bolder;
    text-align: center;
    box-shadow: 5px 5px var(--shaddowTrans);
    z-index: 2000;
}

#btnCasinoMode{
    cursor: pointer;
    width: 50px;
}
#btnMenue{
    cursor: pointer;
    width: 50px;
}
#btnStart{
    cursor: pointer;
    width: 50px;
}


#btnSteuerungPlay,
#btnSteuerungStop,
#btnSteuerungReset {
    height: 40px;
}

#divTooltip{
    position: fixed;
    display: none;
    overflow: auto;
    overflow-y: visible;
    margin: 0 auto;
    white-space: nowrap;

    background-color: var(--hgColorDark);
    color: white;
    top: 25vh;
    height: 50vh;
    left: 20vw;
    width: 60vw;
    border: 3px solid white;
    padding: 10px;
    text-align: center;
    z-index: 550;
}

#divMoveArrayElems{
    position: fixed; 
    display: none;
    overflow: auto;
    overflow-y: visible;
    margin: 0 auto;
    white-space: nowrap;

    background-color: var(--bgTrans);
    top:0px; 
    left:0px; 
    width: 100vw; 
    height: 100vh;
    text-align: center;
    z-index:1000; 
}

#tblMoveArrayElems {
    background-color: var(--hgColorDark);
    width: 300px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid white;
    border-radius: 20px;
    box-shadow: 5px 5px var(--shaddowTransBlack);
    font-size: 1.2rem;
}

#tblMoveArrayElems th,
#tblMoveArrayElems td {
    padding-left: 10px;
    padding-right: 10px;
    /* border: 1px solid black; */
}

#tblMoveArrayElems td {
    background-color: var(--hgColor);
    /* border: 1px solid black; */
}

#tblMoveArrayElems th {
    background-color: var(--hgColorDark);
}

#tblMoveArrayElems td > button {
    margin-left: 5px;
    margin-right: 5px;

    padding-bottom: 5px;
    font-size: 1.2rem;
    font-weight: bold;
    width: 40px;
}

#outputMemoSpiel {
    color: var(--blau);
    display: none;
}
#btnToTop {
    position: fixed;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 780;
}
#menBottomCenter {
    position: fixed;
    bottom: 10px;
    width: 60px;
    height: 60px;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    background: url(../image/spielbank/kessel_bottom.png) no-repeat;
    background-size: 60px 60px;
    z-index: 760;
}

#mehrSpieleMenue {
    position: fixed;
    bottom: 10px;
    left: 10px;
    cursor: pointer;
    z-index: 780;
}
#mehrSpieleManipulator {
    position: fixed;
    box-sizing: border-box;
    padding: 1em;
    left: calc(50vw - 400px); 
    right: calc(50vw - 400px); 
    top: 10px;
    width: 800px;
    background-color: var(--bgColorBody);
    z-index: 1010;
}
#mehrSpieleManipulator h2, #mehrSpieleManipulator h3 {
    margin-top: 0;
    margin-bottom: 0;
}
#msmProgessionsVerteiler {
    margin-bottom: 1em;
}
#tblMsmProgression td {
    padding: 5px;
}
.msmReset {
    font-size: 1.2em;
    margin-left: 1em;
    margin-right: 1em;
    padding: 1em;
}

@keyframes pulse {
	from {
		scale: 1;
	}
	to {
		scale: 3;
	}
}


.winnSymbol {
    display: inline-block;
    position: absolute;
    margin-left: 4px;
    margin-top: -5px;
    animation: 1s infinite alternate pulse;
}



.table,
.tableFlex{
    /* border: 0; */
    margin-left:auto; 
    margin-right:auto;
    text-align: left;
    /* table-layout: fixed; */
}
.table td {
    /* word-wrap: break-word; */
    padding: .3rem;
    outline: 2px solid var(--vgColorDark);
    vertical-align: top;
}
.tableFlex td {
    /* word-wrap: break-word; */
    padding: .3rem;
    outline: 2px solid var(--vgColorDark);
    vertical-align: top;
}
.table{
    border: 3px solid var(--vgColorDark);
    width: 90%;
}




.tableNoCellBorder{
    /* border: 0; */
    width: 90%;
    border: 3px solid var(--vgColorDark);
    margin-left:auto; 
    margin-right:auto;
    text-align: left;
    font-weight: bold;
    font-size: 1.2rem;
}
.tableSmallNoCellBorder{
    /* border: 0; */
    width: 960px;
    border: 3px solid var(--vgColorDark);
    margin-left:auto; 
    margin-right:auto;
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
}
.tableSmallCellBorder{
    border: 1px solid var(--vgColorDark);
    margin-left:auto; 
    margin-right:auto;
    text-align: center;
}
.tableSmallCellBorder td {
    outline: 1px solid var(--vgColorDark);
}

.table80noBorder {
    width: 80%;
    border: 0;
}
.table80noBorderCenter {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border: 0;
    text-align: center;

}

.table100noBorder {
    width: 100%;
    border: 0;
}
.table100noBorder td{
    outline: 0;
}


.tblSpielerSpieleList td{
    width: 20%;
    vertical-align: middle
}

.tableNullBorderCenter {
    margin-left: auto;
    margin-right: auto;
    border: 0;
    text-align: left;
}

.tableTd_M0P0 {
    padding: 0;
    margin: 0;
    vertical-align: middle;
}



.tableLoginScreen{
    background-color: var(--hgColorDark);
    width: 300px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid white;
    border-radius: 20px;
    box-shadow: 5px 5px var(--shaddowTransBlack);
    white-space: nowrap;
}


.tableZahlSelektorScreenOutside{
    background-color: var(--hgColorDark);
    width: 820px;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid white;
    border-radius: 20px;
    box-shadow: 5px 5px var(--shaddowTransBlack);
}
.tableZahlSelektorScreen{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap;
}
.tzssTdZero {
    width: 40px;
}
.tzssTd {
    height: 40px;
    width: 40px;
}

.tableBorderTdRight {
    display: inline-block;
    width: 100%;
    border: 0;
    margin: 0;
    padding: 0;
}
.tableBorderTdRight td{
    margin: 0;
    padding: 0;
    outline: 0;
}
.borderRight2{
    border-right: 2px solid var(--vgColorDark);

}

.input {
    padding: 2px;
    background-color: var(--vgColor);
    border-color: var(--vgColorDark);
}
.input3 {
    width: 30px;
}
.input5 {
    width: 50px;
}
.input8 {
    width: 80px;
}

.inputBig {
    width: 90%;
    font-size: 1.25rem;
}
.inputBig70 {
    width: 70%;
    font-size: 1.25rem;
}

.divLayer {
    display:none;
    position:absolute; 

    top: calc((100vh - 330px) / 2);
    left: calc((100vw - 905px) / 2);
    width:906px; 
    height:330px; 
    
    font-size: smaller;
    font-weight: bold;
    text-align: center;
    color: var(--vgColor);
    background-color: var(--hgColor);
}

.divFooter{
    position: sticky;
    bottom: 5px;
    margin: 0 auto;

    padding-top: 10px;
    padding-bottom: 5px;
    width: 90%;
    background-color: var(--hgColor);
    border: 5px outset var(--vgColorDark);
    border-radius: 8px;
    box-shadow: 5px 5px var(--hgColorDark);
    text-align: center;
}

.divLayerFormularSend {
    display:none;
    position:absolute; 
    top:300px; left:0px; 
}

.selectSpielWahl {
    width: 80%;
    text-align: center;
}

.rennWinn {
    position: absolute;
    width: 2rem;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 1px #fff000;
    color: #000;
    background-color: #fff00080;
    border-radius: 8px;
    border: 1px solid #ff0;
}

.zIndex510 {
    z-index:510;
}
.zIndex750 {
    z-index:750;
}
.zIndex1000 {
    z-index:1000;
}

.borderOut {
    border: 3px outset var(--vgColorLight);
}
.borderGold90 {
    width: 89%;
    border: 4px solid var(--vgColorDark);
    margin-left: auto;
    margin-right: auto;
}

.noMarginY {
    margin-top: 0;
    margin-bottom: 0;
}

.padding5 {
    padding: 5px;
}
.padding-lr5 {
    padding-left: 5px;
    padding-right: 5px;
}

.padding10 {
    padding: 10px;
}
.padding-lr10 {
    padding-left: 10px;
    padding-right: 10px;
}

.padding20 {
    padding: 20px;
}

.flexbox {
    display: flex;
    justify-content: space-between;
}

.middleScreen{
    position: absolute;
    display: block;
    overflow: auto;
    overflow-y: visible;
    margin: 0 auto;
    white-space: nowrap;
    
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.width33{
    width: 33%;
}
.middle {
    vertical-align: middle;
}
.gold {
    color: var(--vgColor);
}

.gruen {
    color: #009900;
}
.hellGruen{
    color: var(--gruenLight);
}
.gruen_z {
    padding: 4px;
    background-color: #009900;
    color: white;
}
.hg_dark{
    background-color: var(--hgColorDark);
}
.hg_dezent{
    background-color: var(--hgDezent);
}
.hg_default{
    background-color: var(--hgColor);
}

  
.rot{
    color: var(--rot);
}
.blau{
    color: var(--blau);
}
.blau_z{
    padding: 4px;
    background-color: var(--blau);
    color: white;
}

.rot_z{
    padding: 4px;
    background-color: var(--rot);
    color: white;
}
.schwarz{
    color: black;
}
.schwarz_z{
    padding: 4px;
    background-color: black;
    color: white;
}
.weiss{
    background-color: white;
}
.font4 {
    font-size: 0.25rem;
}

.font8 {
    font-size: 0.5rem;
}
.font10 {
    font-size: 0.625rem;
}
.font14 {
    font-size: 0.875rem;
}
.font20 {
    font-size: 1.25rem;
}
.font2rem{
    font-size: 2rem;
}
.font3rem{
    font-size: 3rem;
}
.font4rem{
    font-size: 4rem;
}
.font06{
    font-size: .6rem;
}


.schatten{
    text-shadow: .1em .1em var(--hgColorDark);
}
.schatten1{
    text-shadow: .1em .1em black;
}
.schatten2{
    text-shadow: .2em .2em black;
}
.schatten2gruen{
    text-shadow: .2em .2em var(--hgColorDark);
}

.mausPointer {
    cursor: pointer;
}
.hidden {
    display: none;
}
.hidden-important {
    display: none !important;
}
.vhidden {
    visibility: hidden;
}
.vhidden-important {
    visibility: hidden !important;
}



/* TODO - bessere lösung suchen */

/* Wenn Breite darunter liegt */
@media (max-width: 1024px) {
    .tableSmallNoCellBorder {
        width: 800px;
        font-size: 1em;
    }
}
@media (max-width: 930px) {
    /* :root {
        --contentTop: 410px;
    } */
    #divSpieleDaten{
        box-sizing: border-box;
        width: 906px;
    }
    
    #divProgressionsVerwaltung,
    #divReportVerwaltung {
        width: 905px;
    }
    
    #divStatistik{
        left: 300px;
    }

    #quickMenue {
        top: 335px;
        width: 904px;
    }
    #manuelGameCounterButtons {
        top: 204px;
    }
    #manuelGameCounterButtons {
        left: 300px;
    }
    #spielName{
        position: static;
    }
    #mehrSpieleManipulator {
        left: 60px;
    }

    .kapAnzResize {
        position: fixed; 
        top: 10px;
        left: 200px;
        font-size: 1.1rem;
        font-weight: bold;
        text-shadow: .1em .1em var(--hgColorDark);
    
        padding: 2px .5em; 
        background-color: var(--hgColor);
        border: 2px solid var(--vgColor); 
        border-radius: 7px;
        box-shadow: 3px 3px 3px black;
        /* z-index: 790; */ 
    }
    .spanKapAnzKapital {
        display: inline-block;
    }

    .divFooter{
        position: static;
    }
    .tableNoCellBorder{
        width: 100%;
    }    
    .table{
        width: 860px;
    }
    .borderGold90 {
        width: 99%;
    }    

}
@media (max-width: 480px) {
    #headRoulette{
        font-size: 2.5rem;
    }
    #txtHierEntsteht{
        font-size: 1.8rem;
        padding: 10px;
    }
}

@media screen and (device-width: 760px) {
    h1 { color:var(--hgColorDark); }
    #divTooltip{
        overflow: auto;
        overflow-y: visible;
    }
}