@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

* {
   margin: 0;
   padding: 0;
}

body {
   font-family: 'Roboto', sans-serif;
   font-style: normal;
   font-weight: 300;
   font-smoothing: antialiased;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: 15px;
   background: #eee;
}

.intro {
   background: #fff;
   padding: 60px 30px;
   color: #333;
   margin-bottom: 15px;
   line-height: 1.5;
   text-align: center;
}

.intro h1 {
   font-size: 18pt;
   padding-bottom: 15px;

}

.intro p {
   font-size: 14px;
}

.action {
   text-align: center;
   display: block;
   margin-top: 20px;
}

a.btn {
   text-decoration: none;
   color: #666;
   border: 2px solid #666;
   padding: 10px 15px;
   display: inline-block;
   margin-left: 5px;
}

a.btn:hover {
   background: #666;
   color: #fff;
   transition: .3s;
   -webkit-transition: .3s;
}

.btn:before {
   font-family: FontAwesome;
   font-weight: normal;
   margin-right: 10px;
}

.github:before {
   content: "\f09b"
}

.down:before {
   content: "\f019"
}

.back:before {
   content: "\f112"
}

.credit {
   background: #fff;
   padding: 12px;
   font-size: 9pt;
   text-align: center;
   color: #333;
   margin-top: 40px;

}

.credit span:before {
   font-family: FontAwesome;
   color: #e41b17;
   content: "\f004";


}

.credit a {
   color: #333;
   text-decoration: none;
}

.credit a:hover {
   color: #1DBF73;
}

.credit a:hover:after {
   font-family: FontAwesome;
   content: "\f08e";
   font-size: 9pt;
   position: absolute;
   margin: 3px;
}

main {
   background: #fff;
   padding: 20px;
}

article h1,
article h2,
article h3,
article h4,
article p {
   padding: 14px;
   color: #333;
}

article p {
   font-size: 15px;
   line-height: 1.5;
}

@media only screen and (min-width: 820px) {
   main {
      max-width: 820px;
      margin-left: auto;
      margin-right: auto;
      padding: 24px;
   }


}

.set-overlayer,
.set-glass,
.set-sticky {
   cursor: pointer;
   height: 45px;
   line-height: 45px;
   padding: 0 15px;
   color: #333;
   font-size: 16px;
}

.set-overlayer:after,
.set-glass:after,
.to-active:after,
.set-sticky:after {
   font-family: FontAwesome;
   font-size: 18pt;
   position: relative;
   float: right;
}

.set-overlayer:after,
.set-glass:after,
.set-sticky:after {
   content: "\f204";
   transition: .6s;
}

.to-active:after {
   content: "\f205";
   color: #008080;
   transition: .6s;
}

.set-overlayer,
.set-glass,
.set-sticky,
.source,
.theme-tray {
   margin: 10px;
   background: #f2f2f2;
   border-radius: 5px;
   border: 2px solid #f1f1f1;
   box-sizing: border-box;
}

/* Syntax Highlighter*/

pre.prettyprint {
   padding: 15px !important;
   margin: 10px;
   border: 0 !important;
   background: #f2f2f2;
   overflow: auto;
}

.source {
   white-space: pre;
   overflow: auto;
   max-height: 400px;
}

code {
   border: 1px solid #ddd;
   padding: 2px;
   border-radius: 2px;
}


/* ANIMATIONS ONBOARDING */

/*font Variables*/
/*Color Variables*/
@import url("https://fonts.googleapis.com/css?family=Roboto:300i,400,400i,500,700,900");

.multi_step_form {
   background: #f6f9fb;
   display: block;
   /* overflow-x: hidden; */
}

.multi_step_form #msform {
   text-align: center;
   position: relative;
   padding-top: 50px;
   min-height: 820px;
   height: auto;
   max-width: 820px;
   margin: 0 auto;
   background: #ffffff;
   z-index: 1;
}

.multi_step_form #msform .tittle {
   text-align: center;
   padding-bottom: 55px;
}

.multi_step_form #msform .tittle h2 {
   font: 500 24px/35px "Roboto", sans-serif;
   color: #3f4553;
   padding-bottom: 5px;
}

.multi_step_form #msform .tittle p {
   font: 400 16px/28px "Roboto", sans-serif;
   color: #5f6771;
}

.multi_step_form #msform fieldset {
   border: 0;
   padding: 20px 105px 0;
   padding-bottom: 60px !important;
   position: relative;
   width: 100%;
   left: 0;
   right: 0;
}

.multi_step_form #msform fieldset:not(:first-of-type) {
   display: none;
}

.multi_step_form #msform fieldset h3 {
   font: 500 18px/35px "Roboto", sans-serif;
   color: #3f4553;
}

.multi_step_form #msform fieldset h6 {
   font: 400 15px/28px "Roboto", sans-serif;
   color: #5f6771;
   padding-bottom: 30px;
}

.multi_step_form #msform fieldset .intl-tel-input {
   display: block;
   background: transparent;
   border: 0;
   box-shadow: none;
   outline: none;
}

.multi_step_form #msform fieldset .intl-tel-input .flag-container .selected-flag {
   padding: 0 20px;
   background: transparent;
   border: 0;
   box-shadow: none;
   outline: none;
   width: 65px;
}

.multi_step_form #msform fieldset .intl-tel-input .flag-container .selected-flag .iti-arrow {
   border: 0;
}

.multi_step_form #msform fieldset .intl-tel-input .flag-container .selected-flag .iti-arrow:after {
   content: "\f35f";
   position: absolute;
   top: 0;
   right: 0;
   font: normal normal normal 24px/7px Ionicons;
   color: #5f6771;
}

.multi_step_form #msform fieldset #phone {
   padding-left: 80px;
}

.multi_step_form #msform fieldset .form-group {
   padding: 0 10px;
}

.multi_step_form #msform fieldset .fg_2,
.multi_step_form #msform fieldset .fg_3 {
   padding-top: 10px;
   display: block;
   overflow: hidden;
}

.multi_step_form #msform fieldset .fg_3 {
   padding-bottom: 70px;
}

.multi_step_form #msform fieldset .form-control,
.multi_step_form #msform fieldset .product_select {
   border-radius: 3px;
   border: 1px solid #d8e1e7;
   padding: 0 20px;
   height: auto;
   font: 400 15px/48px "Roboto", sans-serif;
   color: #5f6771;
   box-shadow: none;
   outline: none;
   width: 100%;
}

.multi_step_form #msform fieldset .form-control.placeholder,
.multi_step_form #msform fieldset .product_select.placeholder {
   color: #5f6771;
}

.multi_step_form #msform fieldset .form-control:-moz-placeholder,
.multi_step_form #msform fieldset .product_select:-moz-placeholder {
   color: #5f6771;
}

.multi_step_form #msform fieldset .form-control::-moz-placeholder,
.multi_step_form #msform fieldset .product_select::-moz-placeholder {
   color: #5f6771;
}

.multi_step_form #msform fieldset .form-control::-webkit-input-placeholder,
.multi_step_form #msform fieldset .product_select::-webkit-input-placeholder {
   color: #5f6771;
}

.multi_step_form #msform fieldset .form-control:hover,
.multi_step_form #msform fieldset .form-control:focus,
.multi_step_form #msform fieldset .product_select:hover,
.multi_step_form #msform fieldset .product_select:focus {
   border-color: #182d52;
}

.multi_step_form #msform fieldset .form-control:focus.placeholder,
.multi_step_form #msform fieldset .product_select:focus.placeholder {
   color: transparent;
}

.multi_step_form #msform fieldset .form-control:focus:-moz-placeholder,
.multi_step_form #msform fieldset .product_select:focus:-moz-placeholder {
   color: transparent;
}

.multi_step_form #msform fieldset .form-control:focus::-moz-placeholder,
.multi_step_form #msform fieldset .product_select:focus::-moz-placeholder {
   color: transparent;
}

.multi_step_form #msform fieldset .form-control:focus::-webkit-input-placeholder,
.multi_step_form #msform fieldset .product_select:focus::-webkit-input-placeholder {
   color: transparent;
}

.multi_step_form #msform fieldset .product_select:after {
   display: none;
}

.multi_step_form #msform fieldset .product_select:before {
   content: "\f35f";
   position: absolute;
   top: 0;
   right: 20px;
   font: normal normal normal 24px/48px Ionicons;
   color: #5f6771;
}

.multi_step_form #msform fieldset .product_select .list {
   width: 100%;
}

.multi_step_form #msform fieldset .done_text {
   padding-top: 20px;
}

.multi_step_form #msform fieldset .done_text .don_icon {
   height: 36px;
   width: 36px;
   line-height: 36px;
   font-size: 22px;
   margin-bottom: 10px;
   background: #182d52;
   display: inline-block;
   border-radius: 50%;
   color: #ffffff;
   text-align: center;
}

.multi_step_form #msform fieldset .done_text h6 {
   line-height: 23px;
}

.multi_step_form #msform fieldset .code_group {
   margin-bottom: 60px;
}

/* INPUT CODE VERIFICATION */

.multi_step_form #msform fieldset .number-code .form-control {
   border: 0;
   border-bottom: 1px solid #a1a7ac;
   border-radius: 0;
   display: inline-block;
   width: 30px;
   font-size: 30px;
   color: #5f6771;
   padding: 0;
   /* margin-right: 7px; */
   text-align: center;
   line-height: 1;
}

:root {
   --spacing: 8px;
   --hue: 400;
   --background1: hsl(214, 14%, 20%);
   --background2: hsl(214, 14%, 13%);
   /* --background3: hsl(214, 14%, 5%); */
   --brand1: hsl(var(--hue) 80% 60%);
   --text1: hsl(0, 0%, 100%);
   --text2: hsl(0, 0%, 90%);
}

.number-code>div {
   display: flex;
}

.number-code>div>input:not(:last-child) {
   margin-right: calc(var(--spacing) * 2);
}

.content-area {
   display: flex;
   flex-direction: column;
   /* gap: calc(var(--spacing) * 2); */
   /* background: var(--background2); */
   /* padding: var(--spacing); */
   border-radius: var(--spacing);
}

.content-area p {
   color: var(--text2);
   font-size: 0.8em;
}

#showCode input.code-input {
   font-size: 1.5em;
   width: 1em;
   text-align: center;
   /* flex: 1 0 1em; */
}

#showCode input[type='submit'] {
   margin-left: auto;
   display: block;
   font-size: 1em;
   cursor: pointer;
   transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

#showCode input[type='submit']:hover {
   background: var(--background3);
}

#showCode input {
   /* padding: var(--spacing); */
   border-radius: calc(var(--spacing) / 2);
   /* color: var(--text1); */
   /* background: var(--background1); */
   border: 0;
   border: 4px solid transparent;
}

#showCode input:invalid {
   box-shadow: none;
}

#showCode input:focus {
   outline: none;
   border: 4px solid var(--brand1);
   background: var(--background3);
}

/* END INPUT CODE VERIFICATION */



.multi_step_form #msform fieldset .passport {
   margin-top: -10px;
   padding-bottom: 30px;
   position: relative;
}

.multi_step_form #msform fieldset .passport .don_icon {
   height: 36px;
   width: 36px;
   line-height: 36px;
   font-size: 22px;
   position: absolute;
   top: 4px;
   right: 0;
   background: #182d52;
   display: inline-block;
   border-radius: 50%;
   color: #ffffff;
   text-align: center;
}

.multi_step_form #msform fieldset .passport h4 {
   font: 500 15px/23px "Roboto", sans-serif;
   color: #5f6771;
   padding: 0;
}

.multi_step_form #msform fieldset .input-group {
   padding-bottom: 40px;
}

.multi_step_form #msform fieldset .input-group .custom-file {
   width: 100%;
   height: auto;
}

.multi_step_form #msform fieldset .input-group .custom-file .custom-file-label {
   width: 168px;
   border-radius: 5px;
   cursor: pointer;
   font: 700 14px/40px "Roboto", sans-serif;
   border: 1px solid #99a2a8;
   text-align: center;
   transition: all 300ms linear 0s;
   color: #5f6771;
}

.multi_step_form #msform fieldset .input-group .custom-file .custom-file-label i {
   font-size: 20px;
   padding-right: 10px;
}

.multi_step_form #msform fieldset .input-group .custom-file .custom-file-label:hover,
.multi_step_form #msform fieldset .input-group .custom-file .custom-file-label:focus {
   background: #182d52;
   border-color: #182d52;
   color: #fff;
}

.multi_step_form #msform fieldset .input-group .custom-file input {
   display: none;
}

.multi_step_form #msform fieldset .file_added {
   text-align: left;
   padding-left: 190px;
   padding-bottom: 60px;
}

.multi_step_form #msform fieldset .file_added li {
   font: 400 15px/28px "Roboto", sans-serif;
   color: #5f6771;
}

.multi_step_form #msform fieldset .file_added li a {
   color: #182d52;
   font-weight: 500;
   display: inline-block;
   position: relative;
   padding-left: 15px;
}

.multi_step_form #msform fieldset .file_added li a i {
   font-size: 22px;
   padding-right: 8px;
   position: absolute;
   left: 0;
   transform: rotate(20deg);
}

.multi_step_form #msform #progressbar {
   margin-bottom: 30px;
   overflow: hidden;
}

.multi_step_form #msform #progressbar li {
   list-style-type: none;
   color: #99a2a8;
   font-size: 9px;
   width: calc(100%/3);
   float: left;
   position: relative;
   font: 500 13px/1 "Roboto", sans-serif;
}

.multi_step_form #msform #progressbar li:nth-child(2):before {
   content: "\f1fa";
}

.multi_step_form #msform #progressbar li:nth-child(3):before {
   content: "\f457";
}

.multi_step_form #msform #progressbar li:before {
   content: "\f12f";
   font: normal normal normal 30px/50px Ionicons;
   width: 50px;
   height: 50px;
   line-height: 50px;
   display: block;
   background: #eaf0f4;
   border-radius: 50%;
   margin: 0 auto 10px auto;
}

.multi_step_form #msform #progressbar li:after {
   content: '';
   width: 100%;
   height: 10px;
   background: #eaf0f4;
   position: absolute;
   left: -50%;
   top: 21px;
   z-index: -1;
}

.multi_step_form #msform #progressbar li:last-child:after {
   width: 150%;
}

.multi_step_form #msform #progressbar li.active {
   color: #182d52;
}

.multi_step_form #msform #progressbar li.active:before,
.multi_step_form #msform #progressbar li.active:after {
   background: #182d52;
   color: white;
}

.multi_step_form #msform .action-button {
   background: #182d52;
   color: white;
   border: 0 none;
   border-radius: 5px;
   cursor: pointer;
   min-width: 130px;
   font: 700 14px/40px "Roboto", sans-serif;
   border: 1px solid #182d52;
   margin: 0 5px;
   text-transform: uppercase;
   display: inline-block;
}

.multi_step_form #msform .action-button:hover,
.multi_step_form #msform .action-button:focus {
   background: #405867;
   border-color: #405867;
}

.multi_step_form #msform .previous_button {
   background: transparent;
   color: #99a2a8;
   border-color: #99a2a8;
}

.multi_step_form #msform .previous_button:hover,
.multi_step_form #msform .previous_button:focus {
   background: #405867;
   border-color: #405867;
   color: #fff;
}


@media (max-width: 991px) {
   .multi_step_form #msform fieldset {
      border: 0;
      padding: 20px 20px 0;
      padding-bottom: 60px !important;
      position: relative;
      width: 100%;
      left: 0;
      right: 0;
   }
}