@font-face {
    font-family: 'gibsonregular';
    src: url('font/gibson-webfont.eot');
    src: url('font/gibson-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/gibson-webfont.woff') format('woff'),
         url('font/gibson-webfont.ttf') format('truetype'),
         url('font/gibson-webfont.svg#gibsonregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gibson_lightbold';
    src: url('font/gibson-semibold-webfont.eot');
    src: url('font/gibson-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/gibson-semibold-webfont.woff') format('woff'),
         url('font/gibson-semibold-webfont.ttf') format('truetype'),
         url('font/gibson-semibold-webfont.svg#gibson_lightbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gibson_lightitalic';
    src: url('font/gibson-light-italic-webfont.eot');
    src: url('font/gibson-light-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/gibson-light-italic-webfont.woff') format('woff'),
         url('font/gibson-light-italic-webfont.ttf') format('truetype'),
         url('font/gibson-light-italic-webfont.svg#gibson_lightitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}


body {
    font-family:"Arial";
}

button.bigbut {
    padding: 10px;
    border: 2px solid #506b9d;
    display: block;
    width: 60%;
    border-radius: 10px;
    font-size: 25px;
    margin: auto;
    color: #629f99;
    font-weight: 700;
}

h1.title {
    font-family: arial;
    padding: 5px;
    border: 7px solid #5cc7ae;
    margin: 15px;
    display: inline-block;
    color: #506b9d;
    text-align: center;
    width: 80%;
    margin: auto;
    display: block;
}


div.scanwrapper {
    /**/
    height:70vh;
}



table.layout {
    position: relative;
    background-color: rgb(216, 216, 216);
    padding:15px;
}


table.layout td {
    display:block;
    vertical-align: top;
}

#container {
    width:100%;
    position:relative;
    margin:auto;
    
}

#counter  {
    padding-left: 12px;
    background-color: #ebebeb;
    padding:5px;
}



#message {
    margin-top:25px;
    border-bottom:2px solid #7683a1;
    font-family:arial;
    font-size:18pt;
}

.msgbox {
    border: 1px solid grey;
    list-style-type: none;
    padding-left: 85px;
    box-shadow: 1px 5px 6px #ccc;
    margin-bottom: 20px;
    border-radius: 15px 0px 15px 0px;
    border-top: 24px solid #7683a1;
    width: 80%;
    margin: auto;
    padding:5px;
    transition:all 0.5s linear;
    overflow:hidden;
}

.msgbox ul {
    list-style-type: none;
    margin:0;
    padding:0;
}

.msgbox ul li.main {
    color: black!important;
    position: relative;
    font-size: 22px;
}

.msgbox ul li {
    font-size: 22px;
    margin: 7px 0px;

}

.msgbox ul li.optional  {
    /*margin-left:150px;*/
}

.msgbox ul li:nth-child(odd) {
    background-color: #f7f7f7;
}
.msgbox b.label {
    display: inline-block;
    width: 45%;
    font-size:17px;
    font-family: "arial";
    border-radius: 10px;
    /* border: 1px solid grey; */
    padding: 5px;
    text-transform: uppercase;
    color: grey;
}


.stat {
    font-weight:bold;
    text-transform:uppercase;
}

.inscroll {
    height: 200px;
    overflow-y: scroll;
    padding-left: 15px;
    line-height: 17px;
    color: grey;
}


#reader {
    padding: 0px;
    border: 1px solid rgb(216, 168, 11);
    margin: auto;
    margin-top: 55px;
    }


    #message {
        transition: all linear 0.3s;
        opacity: 1;
    }
#message.hidden {
    opacity:0;
}

#reader {
    display:block;
}

#reader.hidden {
    display:none;

}