body {
  font-family:sans-serif;
  background-color: #FFFFFF;
  padding:5px;
}

hr {
    border-style:solid;
    border-color:#5551;
    border-width:0.1px;
    max-width:100vw;
    max-height:100vh;
    width:100%;
    height:100%;
}
radio {
    border-style:solid;
    border-color:#5551;
    border-width:0.1px;
    border-size:50px;
}

button {
  padding:20px 20px;
  margin-bottom:1px;
  background-color: #FFFFFF;
  color: #4c9de5;
  border: 1px solid #4c9de5;
  border-radius: 5px;
  cursor: pointer;
  font-weight:400;    
}
button:hover {
  background-color: #FFFFFF;
}

container {
    max-width: 100vw; /* takes up 100% of the viewport width */
    max-height:100vh; /* takes up 100% of the viewport height */
}

.header {
  background-color: #FFFFFF;
  display: inline-block;
  justify-content: space-between;
  align-items: left;
  color: #FFFFFF;
}

.header icons i {
  margin-left: 20px;
}

/* Content */
.content h1 {
  color: #333;
  text-align:left;
  
}


/* info */
.info {
       background-color: #FFFFFF;
}
.info p {
  display: flex;
  font-size:1em;
  justify-content: space-between;
  align-items: left;
}
.info strong {
    font-weight: bold;
    text-align: right;
    margin-top: 0.8rem;
    font-size:0.9rem;
    font-weight:600;
    color:#333;
    padding:0 5px;
}

.info span {
 float: left;
 margin-top: 0.8rem; 
 text-align: left;
 color: #1139;
  font-size:0.9rem;
  font-weight:400;
}
.info strong1 {
    font-weight: bold;
    text-align: right;
    font-weight:600;
    color:#333;
    padding:0 5px;
    margin-bottom:50px;
   
}
.info p2 {
  display: flex;
  font-size:1em;
  justify-content: space-between;
  align-items: left;
  width:auto;
    height:auto;
  max-width:100vw;
    max-height:100vh;
}

.info span1 {
  disply:inline-block;
  color: #1139;
  font-size:0.9rem;
  font-weight:400;
  
}

.info h3 {
   disply:flax;
    font-size:1em;
    font-weight:600;
    color:#333;
    padding:0 5px;
    margin-left:0;
    margin-top:5px;
}



/* Section Title */
.section-title {
  color: #4c9de5;
  font-size: 0.9rem;
  font-weight:400;
  margin-bottom:10px;
  display: inline-block;
  background-color: #FFFFFF;
}

/* Payment Options */
.payment-options {
  background-color: #FFFFFF;
  max-width:100vw;
  max-height:100vh;
  
}

.payment-options label {
  
  display: flex;
  background-color: #FFFFFF;
  max-width:100vw;
  max-height:100vh;
  align-items: left;
  padding:5px;
  margin-top:1px;
  margin: 8px 0;
}

.payment-options img {
  background-color: #FFFFFF;
  max-width:100vw;
  max-height:100vh;
  margin-right:100px;
  margin-top:0px;
  margin-left:70px;
}

/* UTR Instruction */
.utr-instruction {
  color: #4c9de5;
  margin-top:20px;
  margin-bottom:10px;
  font-size: 0.9rem;
  font-weight:400;
  background-color: #FFFFFF;
}

.inline-elements {
  display:flex;
  width:100%;
  height:20px;
  padding:10px;
  font-size:0.9rem;
  background-color: #FFFFFF;
  max-width:100vw;
  max-height:100vh;
  margin-right:30px;
  font-weight:400;
  color:rgba(0, 0, 0, 0.5);;
}
.inline-elements input {
  display: flex;
  width:100%;
  height:20px;
  padding:5px;
  margin-left:40px;
  align-items:right;
  border: none;
  background-color: rgba(0, 0, 0, 0.0);
  font-size:0.9rem;
  outline: none;
  color: #333;
  background-color: #FFFFFF;
}
.inline-elements input:placeholder {
  color: rgba(0, 0, 0, 0.5);
}
.inline-elements input:placeholder:hover {
    background-color: rgba(0, 0, 0, 0.0);
}
.inline-elements span {
  disply:flex;
  color: #333;
  margin-top:10px;
  font-size:0.9em;
  font-weight:400;
  text-align:right;
  background-color: #FFFFFF;
  }
.error-repot {
  width:1px;
  height:1px;
  padding:1px;
  margin-top:20%;
  margin-left:75%;
  background-color:#FFFFFF;
  color:#FF0000;
  border:none;
  font-size:0.5rem;
  text-align:right;
  font-weight:600;
}

/* Submit Button */
.submit-btn {
  width:100%;
  height:25%;
  padding:16px;
  background-color: #1989f9;
  color: white;
  border: none;
  border-radius:50px;
  font-size:0.9rem;
  font-weight:300;
  margin-top: 5px;
  margin-bottom:10px;
}
.submit-btn:hover {
    background-color: #1989f9;
}

.error-btn {
  width:100%;
  height:25%;
  padding:16px;
  background-color: #ff976a;
  color: white;
  border: none;
  border-radius:50px;
  font-size:0.9rem;
  font-weight:300;
  margin-bottom:5px;
}
.error-btn:hover {
    background-color: #ff976a;
}


/* Notification Popup */
.notification {
  width: 100%;
  font-weight:500;
  font-size:0.7rem;
  position: fixed;
  top:0%;
  left:50%;
  right:50%;
  text-align:center;
  transform: translateX(-50%);
  background-color:#4CAF50;
  color: white;
  padding: 10px 10px;
  border-radius: 5px;
  display: none;
  animation: slideIn 1s ease, fadeOut 1s ease 3s;
}

.notification.error {
  background-color: #ff1a1a;
}

@media (min-width:400px) and (max-width:100vw) {
    .body {
        background-color: #FFFFFF;
}

@media (min-height:50px) and (max-height:100vh) {
    .body {
        background-color: #FFFFFF;
    
}