html,
body{
    width: 100%;
    height: 100%;
}

body{
    overflow: hidden;
    margin: 0;
    background-color: #000;

    background-image: url('../img/bg1.jpg');
    background-size: 100% 100%;


    text-align: center;
}


center{
    text-align: center;
    width: 100%;
    /*background-color: green;*/
}

.col{
    position: relative;
    margin: auto;
    height: 100%;
    padding: 0;


}
.row{
    position: relative;
    width: 100%;
}




#measure{
    display: none;
}
#bCanvas{
    width: 100%;
    height: 100%;
    z-index:0;
    /*background-color: yellow;*/

}

#scanner{
    /*background-color: rgba(0,0,0,0) !important;*/

    z-index: 100 !important;
    /*background-color: red !important;*/
}
#matrix{
    z-index: 2;
    /*border: 1px solid red;*/
    background-color: rgba(0,0,0,0);
    /*background-color: red !important;*/
    width: auto;
    height: auto;
    position: absolute;
}
#code{
    position: absolute;


    /*z-index: -1;*/
    /*border: 1px solid pink;*/
    background-color: rgba(0,0,0,0) !important;
    /*background-color: red !important;*/
}


#scene{
    /*opacity: 0;*/
    position: relative;

    width: 80%;
    max-width: 1000px;

    height: 70%;
    max-height: 800px;
    margin:auto;
    margin-top: 2%;
/*    background-color: #184656;*/
    /*    background-image: url('../img/monitor.png');
        background-position: center;
        background-repeat: no-repeat;*/
    /*box-shadow: 15px 15px 15px #000;*/
    padding: 5px;

    /*border: 5px solid #184656;*/
    /*    background: rgb(10,11,24);
    background: linear-gradient(90deg, rgba(0,1,4,1) 0%, rgba(20,25,52,1) 25%, rgba(20,25,52,1) 55%, rgba(7,7,3,1) 100%);*/
}
#monitor{
    position: relative;
    width: 100%;
    height: 100%;
    /*    margin-top: 1%;
        margin-left: 1%;*/
    background: rgb(10,11,24);
    background: linear-gradient(90deg, rgba(0,1,4,1) 0%, rgba(10,15,32,1) 25%, rgba(10,15,32,1) 45%, rgba(0,1,4,1) 100%);
}

#Canvas{
    display: none;
}

#akdiv{

    height: 70%;
    /*border-bottom: 5px solid #184656;*/

}
#codediv{
    height: 30%;
    border-top: 5px solid #184656;
    margin-top: -5px;
}

#monitor > div{
    position: relative;
    float: left;
    width: 100%;
    box-shadow: inset 0 0 20px #000;
    /*background: rgb(10,11,24);*/
    background: linear-gradient(0deg, rgba(0,1,4,1) 0%, rgba(50,55,102,0) 40%, rgba(50,55,102,0) 40%, rgba(0,1,4,1) 82%);

}

.uploaderdiv{
/*    position: fixed;*/
/*    width: 200px;
    height: 50px;*/
/*    left: 50%;
    top: 50%;*/
/*    margin-left: -100px;
    margin-top: -25px;*/

    /*padding-top: 2%;*/

    /*display: none;*/
    /*z-index: 100;*/
    margin-top: 10px;
    padding-bottom: 20px;
}
.aktionbutton{
    /*margin-top: 20px;*/
    opacity: 0;
}

#uploader{
    display: none;
}

#uploaderl{
    display: inline-block;
    border: 3px solid #434656;
    border-radius: 3px;
    width: 250px;
    color: rgba(120,190,200,.8);
    font-size: 20px;
    padding: 10px 20px;
    box-shadow: 8px 8px 8px rgba(0,0,0,.8);
    background: rgb(10,11,24);
    background: linear-gradient(90deg, rgba(20,40,50,1) 0%, rgba(10,15,32,1) 25%, rgba(10,15,32,1) 45%, rgba(20,40,50,1) 100%);
    cursor: pointer;
    margin-bottom: 20px;
    fill: rgba(120,190,200,.8);
}
#uploaderl.done{
    color: rgba(20,60,70,.8);
    background: linear-gradient(90deg, rgba(10,20,30,1) 0%, rgba(10,15,32,1) 25%, rgba(10,15,32,1) 45%, rgba(10,20,30,1) 100%);
    fill: rgba(20,60,70,.8);
}

#uploaderl:hover{
    background: linear-gradient(90deg, rgba(20,21,24,1) 0%, rgba(30,35,52,1) 25%, rgba(30,35,52,1) 45%, rgba(20,21,24,1) 100%);
    color: rgba(190,210,230,1);
}

.vorschau{
    margin-top: 20px;
}

.keyinput{
    z-index: 10;
    position: relative;

    width: 100%;
    text-align: center;
    opacity: 0;
    margin-top: 2%;

}

#keydiv{
    width: 80%;

    max-width: 1000px;
    margin: auto;
    position: relative;

}

.kin{
    width: 70%;
    margin: auto;
    /*background-color: red;*/
    border: 3px solid #184656;
    background-color: rgba(0,1,4,1);
    position: relative;
    box-shadow: 8px 8px 8px #000;
    /*float: left;*/
}

.keyinput label{
    display: inline-block;
    color: rgba(30,120,30,1);
    font-size: 24px;
    font-weight: bold;
    /*color: rgba(160,180,200,1);*/
    position: relative;
    height: 100%;
    width: 30%;
    margin: 0;
    padding: 0;
    padding-right: 2%;
    text-align: right;
    /*max-width: 80px;*/
    /*float: left;*/

}
.keyinput input{
    display: inline-block;
    font-size: 24px;
    border: none;
    padding: 2px 5px;
    background-color: rgba(0,1,4,1);
    color: rgba(0,80,0,1);

    /*float: left;*/
    height: 100%;
    width: 67%;
    margin: 0;
    padding: 0;

}
.keyinput input:focus{
    border: none;
}


.nodatabg{
    background: linear-gradient(90deg, rgba(100,1,4,1) 0%, rgba(200,15,32,1) 25%, rgba(200,15,32,1) 45%, rgba(100,1,4,1) 100%);
}

#hcan{
    /*display: none;*/
}

h2{
    font-size: 42px;
    font-weight: bold;
    color: rgba(120,190,200,.8);
    text-shadow: 4px 4px #000;
}



#eingabetext{
    width: 80%;

    border: 3px solid #434656;
    border-radius: 3px;
    resize: none;
    color: rgba(160,230,160,1);
    line-height: 14px;
    font-size: 14px;
    padding: 10px 20px;
    box-shadow: 8px 8px 8px rgba(0,0,0,.8);
    background: rgb(10,11,24);
    background: linear-gradient(90deg, rgba(0,1,4,1) 0%, rgba(10,15,32,1) 25%, rgba(10,15,32,1) 45%, rgba(0,1,4,1) 100%);
    /*cursor: pointer;*/
}




#parole{
    width: 70%;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 3px solid #434656;
    border-radius: 3px;
    resize: none;
    color: rgba(160,230,160,1);
    line-height: 14px;
    font-size: 14px;
    padding: 10px 20px;
    box-shadow: 8px 8px 8px rgba(0,0,0,.8);
    background: rgb(10,11,24);
    background: linear-gradient(90deg, rgba(0,1,4,1) 0%, rgba(10,15,32,1) 25%, rgba(10,15,32,1) 45%, rgba(0,1,4,1) 100%);
    /*cursor: pointer;*/
}




#createing{
    border: 3px solid #434656;
    border-radius: 3px;
display: inline-block;
    color: rgba(120,190,200,.8);
    font-size: 20px;
    padding: 10px 20px;
    box-shadow: 8px 8px 8px rgba(0,0,0,.8);
    background: rgb(10,11,24);
    background: linear-gradient(90deg, rgba(20,40,50,1) 0%, rgba(10,15,32,1) 25%, rgba(10,15,32,1) 45%, rgba(20,40,50,1) 100%);
    cursor: pointer;
    width: 250px;
}
#createing:hover{
    background: linear-gradient(90deg, rgba(20,21,24,1) 0%, rgba(30,35,52,1) 25%, rgba(30,35,52,1) 45%, rgba(20,21,24,1) 100%);
    color: rgba(190,210,230,1);
}





.hider {
    opacity: 0;
    transition: opacity 0.2s linear;
}


.hiderm {
    opacity: 0.4;
    transition: opacity 1.2s linear;
}



.shower {
    opacity: 1 !important;
    transition: opacity 0.8s linear;
}