@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
 
* {
    font-family: 'Ubuntu', sans-serif;
}
 
html, body{
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
        padding: unset;
        margin: unset;
    }
    body{
        background-color: #74EBD5;
        background-image: linear-gradient(127deg, #74EBD5 0%, #9FACE6 100%);
    }
    #main-wrapper{
        width: 80%;
        height: 100%;
        display: flex;
        flex-flow: column;
		margin: 2% auto;
        justify-content:center;
        align-items:center;
    }
   
    #form-wrapper{
        width: 100%;
        max-width: 400px;
        background-color: #fff;
        border: 1px solid #cacaca;
        box-shadow: 3px 3px 7px #0000003a;
        padding: 0.5em 1.75em;
    }
   
    .form-title{
        font-size: 1.3rem;
        text-align: center;
        font-weight: 400;
        letter-spacing: .8px;
        color:#464646;
        margin-bottom: 5px;
    }
   
    .form-title2{
        font-size: 0.7rem;
        text-align: center;
        font-weight: 400;
        letter-spacing: .8px;
        color:#464646;
        margin-bottom: 5px;
    }
    /*
    Step Progress Designs
    */
    #step-progress{
        position: relative;
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: start;
        direction: rtl;
        margin-bottom: 2px;
    }
    #step-progress .step{
        position: relative;
        width: 25%;
        display: flex;
        flex-flow: column wrap;
        justify-content: start;
        align-items: center;
    }
    #step-progress .step > *{
        width: 100%;
        text-align: center;
    }
    #step-progress .step > .step-icon {
        position: relative;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #d1d1d1;
        border-radius: 50% 50%;
        color: #d1d1d1;
        margin-bottom: 5px;
        z-index: 2;
    }
    #step-progress .step:not(:nth-child(1)):before {
        content: "";
        position: absolute;
        top: 15px;
        left: calc(50% + 15px);
        width: calc(100% - 30px);
        height: 2px;
        background-color: #d1d1d1;
    }
    #step-progress .step > .step-text {
        font-size: .8rem;
        color: #858585;
    }
    #step-progress .step.active > .step-icon,
    #step-progress .step.active > .step-text{
        border-color:#464646;
        color: #464646;
    }
    #step-progress.step-progress-done .step>.step-icon,
    #step-progress .step.active ~ .step>.step-icon{
        border-color:#18da69;
        background: #18da69;
        color: #fff;
    }
    #step-progress.step-progress-done .step>.step-text,
    #step-progress .step.active ~ .step>.step-text{
        color: #18da69;
    }
    #step-progress .step.active ~ .step:before{
        background: #18da69;
       
    }
    #step-progress.step-progress-done .step-icon:before,
    #step-progress .step.active ~ .step>.step-icon:before{
        content: "\2713";
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #18da69;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        border-radius: 50% 50%;
    }
   
    #signup-form{
        overflow: hidden;
    }
    /*
    Multi Step Form Styles
    */
    div#form-step-container {
        width: 400%;
        overflow: hidden;
        position: relative;
        display: flex;
        align-items: center;
        flex-flow: row nowrap;
        transition: .5s ease-in-out;
        left: 0;
    }
   
    div#form-step-container>.form-step-item {
        position: relative;
        width: 100%;
    }
    div#form-step-container>.form-step-item>.form-step-group{
        margin-bottom: .5em;
    }
    div#form-step-container>.form-step-item>.form-step-group > label {
        display: block;
        width: 100%;
        color: #464646;
        margin-bottom: 8px;
        font-size: 1rem;
    }
    div#form-step-container>.form-step-item>.form-step-group > input {
        width: calc(100% - 1.28em);
        display: block;
        padding: 0.5em 0.5em;
        border: 1px solid #cfcfcf;
        border-radius: 3px;
        outline: none;
        color: #464646;
    }
    div#form-step-container>.form-step-item>.form-step-group > input:focus,
    div#form-step-container>.form-step-item>.form-step-group > input:active{
        border-color: #037ca1b0;
        box-shadow: 0px 4px 2px #8ccde100;
    }
   
    #review dl>dt{
        font-size: .85rem;
        color: #464646;
        letter-spacing: 1px;
    }
    #review dl>dd{
        margin-bottom: 5px;
        font-size: .9rem;
        color: #464646;
    }
   
    /*
    Buttons Styles
    */
    #form-action-btns{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly ;
        column-gap:10px;
    }
   
    #previous, #submit, #data-submitted{
        display: none;
    }
   
    button.form-action {
        padding: 0.4em 1.5em;
        background: #20bbff;
        color: #fff;
        font-weight: 700;
        letter-spacing: 1.2px;
        border: unset;
        border-radius: 0.3em;
        font-size: 1rem;
        cursor: pointer;
    }
   
    button.form-action:hover, button.form-action:active {
        background: #1385b7;
        box-shadow: 1px 2px 5px #0c213945;
    }
   
    div#data-submitted {
        padding: 1.75em 0.5em;
        font-size: 1.3rem;
        line-height: 1.4rem;
        text-align: center;
        letter-spacing: 1.5px;
        color: #3b3b3b;
    }
	
	.dl {
  color: #FFF0F0 !important;
  font-size: 14px;
  text-shadow: 0px 0px 0px #7CACDE;
  box-shadow: 1px 1px 1px #BEE2F9;
  padding: 10px 25px;
  border-radius: 5px;
  border: 0px solid #3866A3;
  background: #4AF520;
}
.dl:hover {
  color: #E8E2E1 !important;
  background: #49CF19;
}