/********************************* General *********************************/

body, body *{
    font-family: "Roboto", sans-serif;
    margin: 0;
    padding: 0;
}

p{
    font-size: 1em; 
    margin-bottom: 1em;
    font-weight: 400;
}

h1{
    font-size: 3em; 
    margin-bottom: 2em;
    font-weight: 700;
}

h2{
    font-size: 1.2em; 
    margin-bottom: 1em;
    font-weight: 700;
    border-bottom: 2px solid #000;
}

h3{
    font-size: 1.5em; 
    margin-bottom: .5em;
    font-weight: 700;
}

/********************************* Buttons *********************************/

button, input[type="submit"], a.btn, span.btn{
    display: block;
    clear: both;
    padding: 10px 20px;
    border: 1px solid #3c4b64;
    background-color: #3c4b64;
    color: #fff;
    cursor: pointer;
    transition: all .2s ease;
    font-size: 2em;
    text-decoration: none;
    text-align: center;
    margin-bottom: 15px;
    border-radius: 15px;
}

.discountlist .btn, .discountlist input[type="submit"]{
    font-size: 1.2em;
    width: auto;
    padding: 10px 20px;
    display: inline-block;
}

.btn img{
    filter: invert(1);
    max-height: 25px;
    transform: all .2s ease;
}

.btn:hover img{
    filter: invert(0);
}

.btn.hidden{
    display: none;
}

button:hover, input[type="submit"]:hover, a.btn:hover, span.btn:hover{
    background-color: #fff;
    color: #3c4b64;
}

/********************************* Forms *********************************/

input[type="text"], input[type="password"]{
    float:left;
    clear: both;
    padding: 20px 20px;
    border: none;
    border-bottom: 1px solid #3c4b64;
    margin-bottom: 15px;
    font-size: 2em;
}

input[type="text"]:disabled{
    background-color: #dedede;
    color: #bbb;
}

/********************************* Login *********************************/
.loginbg{
    float: left;
    width: 100%;
    height: 100vh;
    background-image: url('../img/loginbg.jpg');
    background-size: cover;
    background-position: center;
}

.loginmodal{
    margin-top: 10vh;
    float: left;
    width: 500px;
    padding: 45px;
    border-radius: 10px;
    background-color: #fff;
    margin-left: calc(50% - 295px);
    text-align: center;
}

.loginmodal img{
    max-width: 100%;
    margin-bottom: 40px;
}

.loginmodal form input{
    width: calc(100% - 40px);
}

.loginmodal form input[type="submit"]{
    width: 100%;
}

.loginmodal *{
    text-align: center;
}

span.notice{
    float: left;
    width: 100%;
    text-align: center;
    padding: 25px 0;
    font-size: 1.5em;
    color: red;
}

.productadded{
    display: block;
    width: 400px;
    padding: 20px;
    font-size: 1.5em;
    color: green;
    position: fixed;
    top: 15vh;
    left: calc(50% - 200px);
    z-index: 99;
    background-color: #fff;
    text-align: center;
    filter: drop-shadow(5px 5px 10px #000000);
    display: none;
}

.adddiscount{
    display: block;
    width: 900px;
    max-height: 65vh;
    overflow-y: scroll;
    padding: 40px 20px;
    font-size: 1.5em;
    position: fixed;
    top: 15vh;
    left: calc(50% - 450px);
    z-index: 99;
    background-color: #fff;
    filter: drop-shadow(5px 5px 10px #000000);
    display: none;
}

.customerpopup{
    display: block;
    width: 800px;
    max-height: 65vh;
    overflow-y: scroll;
    padding: 40px 20px;
    font-size: 1.5em;
    position: fixed;
    top: 15vh;
    left: calc(50% - 400px);
    z-index: 99;
    background-color: #fff;
    text-align: center;
    filter: drop-shadow(5px 5px 10px #000000);
    display: none;
}

.orderdetails{
    display: block;
    width: 800px;
    max-height: 65vh;
    overflow-y: scroll;
    padding: 40px 20px;
    position: fixed;
    top: 15vh;
    left: calc(50% - 400px);
    z-index: 99;
    background-color: #fff;
    filter: drop-shadow(5px 5px 10px #000000);
    display: none;    
}

.nocustomer, .addcustomer, .closepopup{
    display: block;
    clear: both;
    padding: 10px 20px;
    border: 1px solid #3c4b64;
    background-color: #3c4b64;
    color: #fff;
    cursor: pointer;
    transition: all .2s ease;
    font-size: 2em;
    text-decoration: none;
    margin-bottom: 35px;
    border-radius: 15px;
}

.gekoppeldeKlant{
    float: left;
    width: 100%;
    margin: 20px 0;
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
}


/********************************* Home *********************************/
.homecontainer{
    float: left;
    width: calc(100% - 40px);
    padding: 20px;
}

a.navbtn{
    float: left;
    width: calc(33.333333333% - 110px);
    padding: 60px 35px;
    margin: 20px;
    color: #fff;
    background-color: #3c4b64;
    font-size: 2em;
    text-align: center;
    text-decoration: none;
    border-radius: 15px;
}

.navbtn.inactive, button.inactive, .paymentoption.inactive{
    background-color: grey;
}


/********************************* Layout *********************************/
.container{
    float: left;
    width: 100%;
}

.cnt{
    float: left;
    width: 100%;
    height: 100vh;
}

.header{
    float: left;
    width: calc(100% - 40px);
    padding: 20px;
    border-bottom: 2px solid #cecece;
}

.mainlogo{
    float: left;
    width: 15%;
}

.mainlogo img{
    max-height: 50px;
}

.useropts{
    float: left;
    width: 85%;
    text-align: right;
    font-size: 1.5em;
}

.useropts a.btn{
    clear: none;
    width: auto;
    display: inline-block;
    font-size: 1em;
    margin-left: 20px;
    position: relative;
}

.ticker{
    position: absolute;
    right: -15px;
    top: -15px;
    background-color: red;
    color: white;
    padding: 0 10px;
    line-height: 30px;
    border-radius: 50%;
}

img.lockicon{
    filter: invert(1);
    max-height: 25px;
    transition: all .2s ease;
}

.btn:hover > img.lockicon{
    filter: invert(0);
}

.leftcol{
    float: left;
    width: calc(60% - 2px);
    height: 89%; 
    border-right: 2px solid #cecece;
    overflow-y: scroll;
}

.checkout .leftcol.bon{
    width: calc(30% - 42px);
}

.leftcol.bon #boncontainer{
    float: left;
    width: 100%;
}

.rightcol{
    float: left;
    height: calc(89% - 40px);
    width: calc(40% - 40px);
    padding: 20px;
    overflow: hidden;
    overflow-y: scroll;
}

.checkout .rightcol.bon{
    width: calc(70% - 40px);
}

.footer{
    float: left;
    width: calc(100% - 40px);
    padding: 20px;
    border-top: 2px solid #cecece;
}

.searchbox{
    float: left;
    width: 100%;
}

.searchbox input{
    width: calc(100% - 40px);
}

.resultbox{
    float: left;
    width: 100%;
}

.product{
    float: left;
    width: calc(100% - 32px);
    padding: 15px;
    border: 1px solid #cecece;
    cursor: pointer;
}

.product.wide .pselect{
    float: left;
    width: 10%;
}

.cart .product{
    width: calc(100% - 32px);
}

.pimg{
    float: left;
    width: 35%;
}

.wide .pimg{
    width: 25%;
}

.pdisc{
    float: left;
    width: 100%;
    text-align: left;
    font-weight: bold;
    color: red;
    font-size: 1.1em;
}

.pimg img{
    max-width: 100%;
    max-height: 100px;
}

.pdesc{
    float: left;
    width: calc(65% - 15px);
    margin-left: 15px;
    position: relative;
}

.deletep, .addp{
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 2em;
    color: #cecece;
    font-weight: bold;
    cursor: pointer;
}

.resultbox .deletep, .cart .addp, .productsearchresults .deletep{
    display: none;
}

.pbrand, .psku, .pcode, .pcolor, .psize, .pstock{
    float: left;
    width: 100%;
}

.psize{
    font-size: 22px;
    color: #6ead5e;
    font-weight: bold;
}

.pprice, .discount_price{
    font-size: 1.5em;
    font-weight: bold;
    position: relative;
    float: left;
    width: auto;
    clear: both;
}

.pprice.strikethrough:after{
    content: ''; 
    height: 3px;
    width: 115%;
    background-color: red;
    position: absolute;
    left: -1px;
    top: 100%; 
    transform: rotate(-14deg);
    transform-origin: 1px 1px;
}

.spinner{
    float: left;
    width: 100%;
    padding: 35px 0;
    text-align: center;
}

.checkout{
    float: left;
    width: calc(100% - 40px);
}

.checkout .leftcol{
    padding: 20px;
    width: calc(60% - 42px);
}

.paymentoption{
    float: left;
    width: calc(100% - 40px);
    padding: 20px;
    text-align: center;
    color: #fff;
    background-color: #3c4b64;
    font-weight: bold;
    font-size: 2em;
    margin: 20px 0;
    cursor: pointer;
    border-radius: 15px;
}

.addpaymentoption{
    display: block;
    width: 70%;
    padding: 20px;
    font-size: 1.5em;
    position: fixed;
    top: 15vh;
    left: calc(15% - 20px);
    z-index: 99;
    background-color: #fff;
    filter: drop-shadow(5px 5px 10px #000000);
    display: none;    
}

.addpaymentoption .close, .orderdetails .close, .adddiscount .close, .customerpopup .close{
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}

.checkout .addp, .checkout .deletep{
    display: none;
}


/*** Scanner ***/
#interactive.viewport {
    float: left;
    position: relative;
    float: left;
    width: 100%;
    height: 40vh;
}

#interactive.viewport > canvas, #interactive.viewport > video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

canvas.drawing, canvas.drawingBuffer {
    position: absolute;
    left: 0;
    top: 0;
}

.controls{
    display: none;
}



/************************** Artikelen zoeken **************************/
.psearch{
    float: left;
    width: calc(100% - 40px);
    padding: 20px;
    margin-bottom: 15px;
    border-bottom: 1px solid #cecece;
}

input.ps, select.ps{
    float: left;
    clear: none;
    width: calc(20% - 40px);
    padding: 5px 10px;
    margin: 10px 10px;
    border: none;
    border-bottom: 1px solid #3c4b64;
    background-color: transparent;
    font-size: 1.2em;
}

input.ps.wide, select.ps.wide{
    width: calc(50% - 40px);
}

select.ps{
    width: calc(20% - 20px);
}

select.ps.wide{
    width: calc(50% - 20px);
}

.psearch input[type="submit"]{
    float: left;
    clear: none;
    font-size: 1.2em;
    width: calc(20% - 42px);
}

.productsearchresults{
    float: left;
    width: calc(40% - 40px);
    padding: 20px;
    height: 67%;
    overflow-y: scroll;
}

.productdetails{
    float: left;
    width: calc(60% - 41px);
    border-left: 1px solid #cecece;
    padding: 20px;
    height: 67%;
    overflow-y: scroll;
}

.half{
    float: left;
    width: calc(50% - 20px);
    padding: 10px;
}

.half img{
    max-width: 50%;
}

.ttl{
    float: left;
    width: 50%;
    margin-bottom: 10px;
    font-weight: bold;
}

.value{
    float: left;
    width: 50%;
    margin-bottom: 10px;
}

.instock{
    color: green;
}

.nostock{
    color: red;
}

/**************************** Klanten ****************************/
input.usersrc{
    float: left;
    width: calc(100% - 40px);
    font-size: 1.5em;
}

.customerlist, .orderlist{
    float: left;
    width: calc(100% - 40px);
    padding: 20px;
    list-style: none;
}

.customerlist li, .orderlist li{
    float: left;
    width: calc(100% - 20px);
    padding: 15px 10px;
    font-size: 1.3em;
    cursor: pointer;
}

.orderlist li{
    font-size: 1.1em;
}

.customerlist li:nth-of-type(even), .orderlist li:nth-of-type(even){
    background-color: #cecece;
}

li.tblheader{
    border-bottom: 2px solid #000;
}

li.tblheader span{
    font-weight: bold;
}

.firstname, .username{
    float: left;
    width: 24%;
    font-size: .8em;
}

.lastname{
    float: left;
    width: 28%;
    font-size: .8em;
}

.username{
    width: 48%;
    font-size: .8em;
    overflow: hidden;
}

.transactiondate, .transactionamount{
    width: 50%;
    float: left;
}

.address{
    float: left;
    width: calc(100% - 72px);
    margin: 20px;
    padding: 15px;
    border: 1px solid #cecece;
}

.adtype{
    float: left;
    width: 35px;
    margin-right: 15px;
}

.addetails{
    float: left;
    width: calc(100% - 50px);
}

/*************************** Giftcards ***************************/
.leftcol.giftcards, .rightcol.giftcards{
    width: calc(50% - 40px);
    height: calc(89% - 40px);
    padding: 20px; 
}

.leftcol.giftcards{
    width: calc(50% - 42px);
}

h1.totalamount{
    float: left;
    width: 100%;
    text-align: center;
    margin-bottom: 25px;
}

h2.originalamount{
    float: left;
    width: 100%;
    text-align: center;
    border-bottom: none;
    font-size: 1.8em;
}

.createGiftcard{
    width: 100%;
    text-align: center;
    margin-bottom: 25px;
}

#bcsearch{
    width: calc(100% - 40px);
}

#giftcardvalue{
    width: calc(100% - 40px);
}

.addgcpayment{
    display: none;
}

.creategiftcard{
    float: left;
    width: 100%;
    display: none;
}

.creategiftcard input{
    float: left;
    width: calc(100% - 40px);
}

.creategiftcard input[type="submit"]{
    width: 100%;
    margin-bottom: 35px;
}

span.notify{
    float: left;
    width: 100%;
    text-align: center;
    margin-bottom: 25px;
    font-size: 2em;
    font-weight: bold;
    color: green;
}

#totals, #payments, .net{
    float: left;
    width: 100%;
    padding: 20px 0;
}

.payline{
    float: left;
    width: 100%;
    padding: 10px 0;
    font-size: 1.5em;
}

.popt{
    font-weight: bold;
    float: left;
    width: 50%;
}

.pamnt{
    float: left;
    width: 40%;
}

.deleteline{
    text-align: center;
    margin-top: -5px;
    float: left;
    width: calc(10% - 20px);
    cursor: pointer;
    padding: 5px 10px;
    color: #fff;
    background-color: #3c4b64;
}

span.thead{
    float: left;
    width: 50%;
    font-size: 2em;
    font-weight: bold;
}

span.tnumb{
    float: left;
    width: 50%;
    font-size: 2em;
    font-weight: bold;
    text-align: right;
}

#finalisebtn{
    display: none;
}

.olist_ordernumber, .olist_datum, .olist_bedrag{
    float: left;
    width: 33.333334%;
}

.discountlist{
    float: left;
    width: 100%;
    padding: 20px 0;
}

.size{
    float: left;
    padding: 10px; 
    margin: 3px;
    background-color: #cecece;
}

.top{
    float: left;
    width: 100%;
}

.info{
    float: left;
    width: 65%;
}

.productimage_detail{
    float: left;
    width: 35%;
    text-align: right;
}

.productimage_detail img{
    max-width: 70%;
}

.sizetable{
    float: left;
    width: 100%;
}

.stocktable{
    float: left;
    width: 100%;
}

.sizetab{
    float: left;
    width: calc(16.6666666667% - 20px);
    padding: 0 10px;
}

.sizetab ul{
    list-style: none;
}

.sizetab ul li{
    padding: 10px 0;
    position: relative;
    float: left;
    width: 100%;
}

.sizetab ul li, .sizetab ul li *{
    line-height: 2em;
    font-size: 1em;
}

.sizetab ul li.lined{
    border-top: 1px solid green;
    border-bottom: 1px solid green;
}

.vest{
    float: left;
    width: 75%;
}

.stc{
    float: left;
    width: 25%;
}

.adder{
    float: left;
    margin-left: 15px;
    position: relative;
    display: block;
    width: 25px;
}

.adder .addp{
    position: relative;
    float: left;
    top: 0;
    right: 0;
    font-size: 1.5em;
    font-weight: bold;
    color: green;
}

.sztab{
    float: left;
    width: 100%;
}

.sztab ul{
    list-style: none;
    float: left;
    width: 100%;
}

.sztab ul li{
    float: left;
    width: 100%;
    padding: 5px 0;
    margin: 5px 0;
    border-bottom: 1px solid #000;
}

.sztab ul li:first-child *{
    font-size: 22px;
    font-weight: bold;
}

.tblsize, .tblvest, .tblstock, .tblopts{
    float: left;
    width: 20%;
}

.retourname{
    float: left;
    width: calc(100% - 40px);
    padding: 20px;
}

.formlabel{
    float: left;
    width: 30%;
    font-weight: bold;
    padding: 5px 0;
}

.formvalue{
    float: left;
    width: 70%;
    padding: 5px 0;
}

ul.tbl{
    float: left;
    width: 100%;
    list-style: none;
    margin-bottom: 25px;
}

ul.tbl li{
    float: left;
    width: 100%;
    padding: 5px 0;
}

ul.tbl li:nth-of-type(odd){
    background-color: #cecece;
}

ul.tbl li:first-child{
    border-top: 1px solid #000;
    font-weight: bold;
}

.pmethod, .pamount, .pdate{
    float: left;
    width: 33.333333334%;
}

.ouuser, .oudate, .ouupdate{
    float: left;
    width: 33.333333334%;
}

input[type="submit"].processreturns{
    float: left;
    margin-top: 25px;
    display: none;    
}

.product.active{
    width: calc(100% - 36px);
    border: 3px solid green;
}

.product.startreturn .pimg{
    width: 25%;
}

.product.startreturn .selector{
    float: left;
    width: 20%;
}

.product.startreturn .selector input[type="checkbox"]{
    transform: scale(2);
    margin: 25px 0;
}

.product.startreturn .pdesc{
    width: calc(55% - 15px);
}

.return_actions{
    float: left;
    width: 100%;
    display: none;
}

.product.greyed.out *{
    filter: grayscale(100%);
}

label.chkbx{
    float: left;
    width: 100%;
    margin: 15px 0 25px;
    text-align: left;
    font-size: 1.5em;
    font-weight: 400;
}

.chkbx input{
    transform: scale(2);
    margin-right: 25px;
}