/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url('https://fonts.googleapis.com/css?family=Raleway');

/* sets background image and global font */
body {
    font-family: 'Raleway', sans-serif;
    background-color: #eee;
}

input, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* div surrounding login form */
#login, #payform, #smsform {
    background-color: #eee;
    opacity: .99;
    height: 50vh;
    width: 90vw;
    border-radius: 1vw;
    margin: 0 auto;
    margin-top: 50px;
    padding: 0;
    text-align: center;
}


/* form header */
h1
{
  border-top-left-radius: 2vw;
  border-top-right-radius: 2vw;
  font-size: 6vw;
  padding: 2vw;
  margin: 0;
  color: #fff;
  background-color: #55acee;
  margin-bottom: 2vw;
}

#gotobut2 {
    margin-top: 0vw;
    margin-bottom: 7vw;
    border-top-left-radius: 2vw;
    border-top-right-radius: 2vw;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#passportimage {
    width: 25vw;
    border-top-left-radius: 2vw;
    border-top-right-radius: 2vw;
    border-bottom-left-radius: 2vw;
    border-bottom-right-radius: 2vw;
    margin-bottom: 3vw;
    margin-top: 3vw;
}

#tbutton, .centerbutton, #buyit, #arole, #rrole, #rsabutton, #savemyeid, #Button1, #eid {
    border-top-left-radius: 2vw;
    border-top-right-radius: 2vw;
    margin-bottom: 7vw;
}

#logoffbutton, #menubutton, #bhome {
    margin-bottom: 7vw;
}

#msbutton {
  border-top-left-radius: 2vw;
  border-top-right-radius: 2vw;
  margin-bottom: 7vw;
  margin-top: 7vw;
}

label, .label {
    border-top-left-radius: 2vw;
    border-top-right-radius: 2vw;
    font-size: 6vw;
    padding: 3vw;
    margin-top: 90vw;
    color: #000;
    width: 100%;
    height: 12vw;
    position: relative;
}

/* text fields */
input:not([type="button"]):not([type="submit"]), select {
    width: 70vw;
    height: 12vw;
    font-size: 6vw;
    border-radius: 1vw;
    border: 1px solid #acacac;
    margin-bottom: 2vw;
    text-align: center;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
    font-family: 'Open Sans', 'sans-serif';
}

select {
    font-size: 4.5vw;
}

    input:not([type="button"]):not([type="submit"]):not([id="NoticeText"]):focus, select:focus {
        color: #55acee;
        width: 80vw;
        border: 1px solid #55acee;
        outline: none;
    }

/* submit button */
input[type="button"], input[type="submit"], #buyit {
    font-size: 6vw;
    color: #fff;
    background-color: #55acee;
    box-shadow: 0 5px 0 0 #3C93D5;
    border: none;
    padding: 2vw;
    width: 90vw;
    display: inline-block;
    position: relative;
    outline: none;
    border-bottom-left-radius: 2vw;
    border-bottom-right-radius: 2vw;
}

#qrcode {
    width: 50vh;
    height: 50vh;
    padding: 2vw;
}

.alogo {
    height: 10vh;
    padding: 2vw;
}

#createqr, #requestpay, #govoucher, #getstatement, #paybutton, #buybutton, #scannerbutton, #logonbutton, #homebutton, #sbutton, #my_qbutton, #other_qbutton, #rpkbutton, #messbut, #smsbut, #fdatabut, #mdatabut, #dstore, #spkbutton, #salias, #semail, #gidentity {
    border-top-left-radius: 2vw;
    border-top-right-radius: 2vw;
    padding: 1vw;
    margin-top: 1vw;
    margin-bottom: 3vw;
    height: 12vw;
}

#oldindex {
  border-top-left-radius: 2vw;
  border-top-right-radius: 2vw;
  padding: 1vw;
  margin-top: 1vw;
  margin-bottom: 4vw;
  height: 12vw;
}

#CamsOn {
  visibility: hidden;
  margin-top:2vw;
  border-top-left-radius: 2vw;
  border-top-right-radius: 2vw;
  border-bottom-left-radius: 0vw;
  border-bottom-right-radius: 0vw;
}

#CamsOff {
  border-top-left-radius: 0vw;
  border-top-right-radius: 0vw;
  border-bottom-left-radius: 2vw;
  border-bottom-right-radius: 2vw;
  margin-bottom:2vw;
}

#fileupload {
    padding: 1vw;
    border-top-left-radius: 2vw;
    border-top-right-radius: 2vw;
    font-size: 5vw;
    height: 15vw; 
    width: 90%;
}

#middlelabel {
    border-top-left-radius: 2vw;
    border-top-right-radius: 2vw;
    font-size: 5vw;
}

.uploader
{
 font-size: 2vw;
 width: 100%;
}

#bar {
    background-color:#00FF00;
    border-radius: 1vw;
    width: 100%;
    height:6vw;
}

#preview {
  margin-top:2vw;
  border-top-left-radius: 2vw;
  border-top-right-radius: 2vw;
  border-bottom-left-radius: 2vw;
  border-bottom-right-radius: 2vw;
}

input[type="button"]:active, input[type="submit"]:active, #buyit {
    box-shadow: 0 1vw 0 0 #3C93D5;
    -webkit-transform: translate(0,3px);
    -moz-transform: translate(0,3px);
    transform: translate(0,3px);
}

#wcams {
    visibility: hidden;
}

#preview {
    width: 80vw;
}

#fbalance {
    font-size: 8vw;
    font-weight: 700;
    margin-top: 2vw;
    margin-bottom: 2vw;
}

bb {
    font-size: 8vw;
    color: #eee;
    font-weight: 700;
}

#NoticeText {
    font-size: 4vw;
    color: #000000;
    font-weight: 700;
    height: 50vh;
    width: 90vw;
    border: none;
    margin-bottom: 7vw;
    border-top-left-radius: 2vw;
    border-top-right-radius: 2vw;
    border-bottom-left-radius: 2vw;
    border-bottom-right-radius: 2vw;
    background-color: #eee;
}