.bank-items-left{
    width: 13%;
    left: 10%; 
    bottom: 0;
}

@media only screen and (max-width: 767px) {
  .bank-items-left{
    width: 23%;
    left: 2%; 
  }
}

.bank-items-right{
    width: 55%;
    right: 2%; 
    bottom: 0;
}


@media only screen and (max-width: 767px) {
  .bank-items-right{
    width: 75%;
    right: 0%; 
  }
}

.bank-camera {
  top: 5%;
  width: 7%;
  z-index: 400;
}


@media only screen and (max-width: 767px) {
  .bank-camera {
    width: 12%;
  }
}


.bg-bank-screen {
    background: #1e1e1e;
    background-size: cover;
    border: 10px solid #696969;
    color: #eee9e9;
    border-radius: 10px;
    margin:  20px;
    padding:  20px;
}


@media only screen and (max-width: 767px) {
  .bg-bank-screen {
    margin:  10px;
    padding:  10px;
  }
}



.piggy-bank {
  background: transparent url(../images/bank/bank-piggy-bank.svg) no-repeat;
  width:  75%;
}

@media only screen and (max-width: 767px) {
  .piggy-bank {
    width:  100%;
  }
}





/* Hide all steps by default: */
.formTab {
  display: none;
}

#pocket-money-screen-outer button {
    width: 45%;
    text-align: center;
    background-color: #16768b;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    font-size: 21px;
    cursor: pointer;
    border-radius: 4px;
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #15768b;
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;  
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}


.pocket-money-toolbar {
    padding: 19px;
    border-radius: 4px;
    margin-top: 35px;
    background: #1d94ae;
    border-color: #ffffffa8;
    position: relative;
    min-height: 340px;
}

.pocket-money-toolbar input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.pocket-money-toolbar label {
   padding: 10px 20px;
    font-size: 22px;
    border: 1px solid #cef4fd;
    text-align: center;
    width: 100%;
    display: inline-block;
    border-radius: 4px;
    padding-top: 20px;
    background: #1d94ae;
}

@media only screen and (max-width: 767px) {
    .pocket-money-toolbar label {
        padding: 6px 15px;
        font-size: 18px;
        padding-top: 15px;
    }
}

.pocket-money-toolbar label:hover {
  background-color: #3fa7be;
}

/*.pocket-money-toolbar input[type="radio"]:focus + label {
    border: 2px dashed #444;
}*/

.pocket-money-toolbar input[type="radio"]:checked + label {
    background-color: #206b7c;
    border-color: #206b7c;
}

#pocket-money-screen {
  display: table;
    background-color: black;
    border-radius: 4px;
    border: 4px solid grey;
    color: white;
    min-height: 200px;
    width: 100%;
    padding: 20px;
}

#pocket-money-screen h3 {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

#pocket-money-screen-outer {
    background-color: #3fa7be;
    color: white;
    max-width: 600px;
    margin: auto;
    padding: 20px;
}

#validation-msg {
  display: block;
}

/*BS overrides*/
.form-check-inline {
    margin-right: 0; 
    width: 49%;
    padding-left: 0;
}

@media only screen and (max-width: 767px) {
  .form-check {
        padding-left: 0;
  }

  .form-check-inline {
    width: 48%;
  }
    
  #pocket-money-screen-outer {
    padding: 10px;
  }

  #pocket-money-screen {
    min-height: 150px;
    padding: 10px;
  }

  .pocket-money-toolbar {
    padding: 10px;
    margin-top: 15px;
  }
  
  .bg-bank-screen {
    padding: 0px;
  }
  
  #pocket-money-screen-outer button {
    width: 100%;
  }
 
        
}