* {
  font-family:IRANSans;
  margin: 0px;
  padding: 0px;
  text-align: right;
}
body {
  direction: rtl;
  font-family:IRANSans;
  font-size: 120%;
  background: #F8F8FF;
}
@font-face{
    font-family:IRANSans;
    src:url(../../fonts/PelakFA-Bold.woff2) 
    format('woff2'),url(../../fonts/PelakFA-Bold.woff)
     format('woff'),url(../../fonts/PelakFA-Bold.eot) 
     format('eot'),url(../../fonts/PelakFA-Bold.ttf) 
     format('truetype');font-weight:400;font-style:normal;font-display:fallback}

#app {
      display: inline;
      width: 100%;
  }
.side {
  background: rgba(255, 0, 0, 0.05);
  padding: 10px 30px 10px;
  text-align: right;
  width: 100%;
  float: right;
  }
.forms {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 10px;
    position: relative;
    width: 100%;
}
#app .side>img {
  display: inline;
  float: left;
}
.text-center {
  text-align: center!important;
  float: left;
  padding-top: 20px;
  padding-right: 13px;
}
.header {
  width: 40%;
  margin: 50px auto 0px;
  color: white;
  background: #5F9EA0;
  text-align: center;
  border: 1px solid #B0C4DE;
  border-bottom: none;
  border-radius: 10px 10px 0px 0px;
  padding: 20px;
}
.img-t img{
  width: 40px;
  height: 30px;
}
form, .content {
  width:40%;
  margin: 0px auto;
  padding: 20px;
  border: 1px solid #B0C4DE;
  background: white;
  border-radius: 0px 0px 10px 10px;
}
* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
}

#regForm {
  background-color: #ffffff;
  margin: 50px auto;
  font-family: IRANSans;
  padding: 40px;
  width: 70%;
  min-width: 300px;
}

h1 {
  text-align: center;  
}

input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family:IRANSans;
  border: 1px solid #aaaaaa;
  border-radius: 10px;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}
select.form-select.ftm-select {
  width: 32%;
  display: inline;
}
/* Hide all steps by default: */
.tab {
  display: none;
}
input.ftm-input {
  width: 32% !important;
}
button {
  background-color: #04AA6D;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 17px;
  font-family: IRANSans;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}

/* 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;
}

.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #04AA6D;
}

.form-check {display: flex;}
.form-switch .form-check-input {margin-left: 15px !important;float: right;}
.from-check-ftm {
  margin-bottom: 15px;}
.form-check-label {
  float: right;
}
.form-check .form-check-input {
  float: left;
  margin-left: 10px;
}