input::-webkit-input-placeholder{
    color: white !important;
}
input:-moz-placeholder {
    color: white !important;
}


::placeholder {
    color: white !important;
}


::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: white !important;
}

::-moz-placeholder { /* Firefox 19+ */
    color: white !important;
}

:-ms-input-placeholder { /* IE 10+ */
    color: white !important;
}

:-moz-placeholder { /* Firefox 18- */
    color: white !important;
}



.bootstrap-touchspin-up {
    font-size: 3.875rem !important;
}

.bootstrap-touchspin-down {
    font-size: 3.875rem !important;
}

.bootstrap-touchspin-prefix .input-group-text {
    font-size: 3.875rem !important;
}



#menuToggle
{
  display: block;
  position: relative;

  left: 50px;
  
  z-index: 100000;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: block;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 100010; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  margin-bottom: 5px;
  position: relative;
  
  background: #fff;
  border-radius: 3px;
  
  z-index: 90000;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */

#menu a
{
color:#fff !important;
}

#menu
{
  position: absolute;

  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;

  background: #0286c1;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;

}

#menuToggle input:checked ~ ul
{
  transform: none;
}













#menu{

  height: 600px;
  width: 400px;
}


#menuToggle input
{
  width: 40px;
  height: 32px;
}



#menu li{

font-size: 21px;

}

#menuToggle span
{
  width: 33px;
  height: 4px;
}


#menuToggle
{
  top: 30;
}

#checkbox .form-group {text-align:left;}

[bpdiv=checkouttotal]{ font-size:1.5em; }

[bpfield=bppro_response]{ font-size:1.3em; }

#pagenf{font-size:1.2em;}
label{font-size:1.3em;}
input[type=password]{font-size:1.5em;text-align:center;background:#03a9f3;color:#fff;border:4px solid #0286c1;}
input[type=password]:focus{background:#03a9f3;color:#fff;border:4px solid #0286c1;}

input[type=text]{font-size:1.5em;text-align:center;background:#03a9f3;color:#fff;border:4px solid #0286c1;}
input[type=text]:focus{background:#03a9f3;color:#fff;border:4px solid #0286c1;}
input[type=radio]{width: 1em; height: 1em;}
input[type=checkbox]{width: 1.5em; height: 1.5em;margin-right:2px;}

select{font-size:1.5em !important;height:2.5em;text-align:center;background:#03a9f3;color:#fff;border:4px solid #0286c1;width:100%;}
select:focus{background:#03a9f3;color:#fff;border:4px solid #0286c1;}



.ppaf-select-wrapper{ width: 120px; }

select#currencies{ height: 20px; width: 120px; font-size:20px !important; padding: .175rem 1.75rem .375rem .75rem }

#start_btn{ font-size: 20px; width:80%;margin-top:40px;}
#next_btn{ font-size: 20px; width:40%;margin-top:40px;}
#login_btn{ font-size: 20px; width:80%;margin-top:40px;}
#checkout_btn{ font-size: 20px; width:40%;margin-top:40px;}


.bpproname{
    padding-top: 12px;
    padding-bottom: 6px;
    font-size: 20px;
    color: rgb(44, 46, 47);
    margin: 0px;
}


.bpproalias {
    padding-bottom: 0px;
    font-size: 18px;
    color: #0286c1;
    margin-bottom:20px;
    font-weight:bolder;
}

.topbar, .topbar_mobile {
    min-height: 72px;
    max-height: 84px;
    padding: 0;
    border-bottom: 1px solid #03a9f3;
    background-color: #03a9f3;
    background-image: linear-gradient(100deg, #03a9f3, #0286c1);


}


.card{
width:500px;margin:0 auto;
}

#price{ 
font-size:47px;
}


#bpprofile{
    width: 8em;
    height: 8em;
}


.bpproprofile {
    opacity: 1;
    background-size: auto;
    width: 8em;
    height: 8em;
    background-size: 7em 7em;
    background-image: url(images/uppowerlogobppro.jpg);
    background-color: white;
    box-shadow: rgba(2, 2, 2, 0.3) 0px 5px 12px 0px;
    overflow: hidden;
    border-radius: 50%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    transition: opacity 0.3s ease 0s;
}


.input-group-text{ font-size: 1.875rem; }
.btn{ font-size: 1.875rem; }


[bpfield=bp_done_1] { font-size:1.5em; }
[bpfield=bp_done_2] { font-size:1.2em; }
[bpfield=bp_done_3] { font-size:1.5em; }

@media screen and (max-width: 980px) {

[bpfield=bp_done_1] { font-size:2.5em; }
[bpfield=bp_done_2] { font-size:2.2em; }
[bpfield=bp_done_3] { font-size:2.5em; }


input[type=radio]{width: 1.5em; height: 1.5em;}


.bootstrap-touchspin-up {
    font-size: 5.875rem !important;
}

.bootstrap-touchspin-down {
    font-size: 5.875rem !important;
}

.bootstrap-touchspin-prefix .input-group-text {
    font-size: 3.875rem !important;
}



#menuToggle input
{
  width: 120px;
  height: 52px;
}


#menu{

  height: 150vw;
  width: 600px;
}


#menu li{

font-size: 42px;

}

#menuToggle
{
  top: 70;
}


#menuToggle span
{
  width: 60px;
  height: 10px;
}



#pagenf{font-size:2em;}
[bpdiv=checkouttotal]{ font-size:3em; }

select{font-size:5vw !important;height:1.7em;text-align:center;background:#03a9f3;color:#fff;border:4px solid #0286c1;width:100%;}
select:focus{background:#03a9f3;color:#fff;border:4px solid #0286c1;}


[bpfield=bppro_response]{ font-size:3.5vw; }
label{font-size:3.5vw;}
input[type=text]{font-size:3em;}
input[type=password]{font-size:3em;}
input[type=checkbox]{width: 2.8em; height: 2.8em;margin-right:4px;}

.card{
width:100%;margin:0 auto;position: absolute;
    bottom: 0;
}



#price{ 
font-size:10vw;text-align:center;
}


#bpprofile{
    width: 20em;
    height: 20em;
}


.input-group-text{ font-size: 10vw; }
.btn{ font-size: 9vw; }


.bpproprofile {
    opacity: 1;
    background-size: auto;
    width: 20em;
    height: 20em;
    background-size: 18em 18em;
    background-color: white;
    box-shadow: rgba(2, 2, 2, 0.3) 0px 5px 12px 0px;
    overflow: hidden;
    border-radius: 50%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    transition: opacity 0.3s ease 0s;
}


.topbar, .topbar_mobile {
    padding: 0;
    min-height: 16vw;
    max-height: 20vw;
    border-bottom: 1px solid #03a9f3;
    background-color: #03a9f3;
    background-image: linear-gradient(100deg, #03a9f3, #0286c1);
}


.bpproname{
    padding-top: 12px;
    padding-bottom: 6px;
    font-size: 6vw;
    color: rgb(44, 46, 47);
    margin: 0px;
}


.bpproalias {
    padding-bottom: 0px;
    font-size: 4.5vw;

}

#start_btn{ font-size: 5vw; width:80%;}
#next_btn{ font-size: 5vw; width:40%;}
#login_btn{ font-size: 5vw; width:80%;}
#checkout_btn{ font-size: 5vw; width:80%;}

.ppaf-select-wrapper{ width: 220px; }


select#currencies{ height: 6vw; width: 220px; font-size:4vw !important; padding: .175rem 1.75rem .375rem .75rem }


}



@media screen and (max-width: 680px) {

#menuToggle
{
  top: 40;
}

#pagenf{font-size:1.1em;}
[bpdiv=checkouttotal]{ font-size:3.5em; }

#bpprofile{
    width: 15em;
    height: 15em;
}

.bpproprofile {
    width: 15em;
    height: 15em;
    background-size: 13em 13em;
}


[bpfield=bppro_response]{ font-size:4.5vw; }
label{font-size:4.5vw;}
input[type=text]{font-size:3em;}
input[type=password]{font-size:3em;}



}