.pin-code { 
  padding: 0; 
  margin: 0 auto; 
  display: flex;
} 
 
.pin-code input { 
  border: none; 
  text-align: center;
  width: 48px;
  height:48px;
  font-size: 36px; 
  color: #000000;
  background-color: #F3F3F3;
  margin-right:5px;
} 

.pin-code input:focus { 
  border: 1px solid #573D8B;
  outline:none;
} 

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.portrait-container {
  display: flex;
  justify-content:center;
}

.portrait-img-1 {
  z-index: 1;
}

.portrait-img-2 {
  position: absolute;
  z-index: 2;
}

.portrait-img-3 {
  position: absolute;
  z-index: 3;
}

.portrait-img-4 {
  position: absolute;
  z-index: 5;
}

.portrait-img-5 {
  position: absolute;
  z-index: 5;
}

.portrait-img-6 {
  position: absolute;
  z-index: 6;
}

.portrait-img-7 {
  position: absolute;
  z-index: 7;
}

.portrait-img-8 {
  position: absolute;
  z-index: 8;
}

.portrait-img-9 {
  position: absolute;
  z-index: 9;
}