/*here you can define your own color schema*/
/*You can add more color definitions*/
.formtabsOrange{
  --white: white;
  --btn-navs-bck: orange;
  --btn-navs-txt: white;
  --btn-send-bck: red;
  --pr-bar-light: orange;
  --pr-bar-dark: red;
  --textFill: #212121  
}
.formtabsBlue{
  --white: white;
  --btn-navs-bck: #5A4ABF;
  --btn-navs-txt: white;
  --btn-send-bck: red;
  --pr-bar-light: #A397F0;
  --pr-bar-dark: #5A4ABF;
  --textFill: #212121
}
/*optional, just for demo*/
body{
  display: flex;
  flex-direction: column;
  justify-content:space-around;
  height: 90vh;
}

/*Define widths*/
.ms-forms{
  width: 100%;
  height: 500px;
}

.ms-forms .ms-form{
  width: 100%;
  position: relative;
  margin: 0 auto;
}

@media (min-width: 768px){
  .ms-forms{
    width: 75%;
  }
 .ms-forms .ms-form{
  width:85%;
  }
}

@media (min-width: 1024px){
  .ms-forms{
    width: 50%;
  }
  .ms-forms .ms-form{
  width:85%;
  }
}
/*width for progress bar in tabs section 
/*width = 100%*(1 - 1 / num de tabs)*/
.ms-forms .data{
  height: 3px;
  margin: 0 auto;
}
.ms-forms .tabs >div{
  position: relative;
  padding-top: 10px;
  color: var(--pr-bar-dark);
  cursor: pointer;
}
.ms-forms .tabs >div span{
  opacity: 0.2;
    cursor: pointer;
  pointer-events: none
}
.ms-forms .tabs > div.filled span{
  opacity: 1;
  pointer-events: none
}

.ms-forms .tabs div::before, 
.ms-forms .tabs div::after{
  content:'';
  position: absolute;
  display:block;
  height: 20px;
  width: 20px;
  line-height: 16px;
  top: -10px;
  left: calc(50% - 10px);
  background: var(--white);
  border: 1px solid var(--pr-bar-dark);
  border-radius: 50%;
  transition: background 500ms;
}
.ms-forms .tabs div::after{
  height: 14px;
  width: 14px;
  line-height: 14px;
  top: -7px;
  left: calc(50% - 7px);
  border: 0;
}

.ms-forms .tabs .filled::after{
  content: '';
  background: var(--pr-bar-dark);
  }
/*buttons, tabas and progress bar colors*/
.ms-forms :is(.msf-prev, .msf-next){
  color: var(--btn-navs-txt);
  background-color: var(--btn-navs-bck);
  border-color: transparent;
    height: fit-content;
}

.ms-forms :is(.msf-prev:hover, .msf-next:hover){
    border: 2px solid var(--btn-navs-bck);
    box-shadow: 0px 0 9px 1px #80808047;
}
.ms-forms .msf-send:hover{
    border: 2px solid var(--btn-send-bck);
    box-shadow: 0px 0 9px 1px #80808047;
}
.ms-forms .msf-send{
  background-color: var(--btn-send-bck);
  border-color: transparent;
}
/*Backgrund form controls*/
input:-webkit-autofill, 
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active 
{ -webkit-box-shadow: 0 0 0 30px white inset !important; }

input:-webkit-autofill 
{ -webkit-text-fill-color: var(--textFill) !important; }



/*fieldset:  field groups on every panel.*/
.ms-forms .msf-panel{
  position: absolute;
  top: 0px;
  height: 0;
  opacity: 0;
  visibility: hidden;
}

/*Animation effects*/
.ms-forms .msf-panel.active {
  height: auto;
  opacity: 1;
  visibility: visible;
}

.ms-forms .msf-panel[data-animation="scaleIn"] {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

.ms-forms .msf-panel[data-animation="scaleIn"].active {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.ms-forms .msf-panel[data-animation="scaleOut"] {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.ms-forms .msf-panel[data-animation="scaleOut"].active {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.ms-forms .msf-panel[data-animation="slideHorz"] {
  left: 50px;
}
.ms-forms .msf-panel[data-animation="slideHorz"].active {
  transition-property: all;
  transition-duration: 0.25s;
  transition-timing-function: cubic-bezier(0.2, 1.13, 0.38, 1.43);
  transition-delay: 0s;
  left: 0;
}
.ms-forms .msf-panel[data-animation="slideVert"] {
  top: 30px;
}
.ms-forms .msf-panel[data-animation="slideVert"].active {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  top: 0;
}
.ms-forms .msf-panel[data-animation="fadeIn"].active {
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: linear;
  transition-delay: 0s;
}