@font-face {
    font-family: "Abel_Regular";
    src: url("../fonts/caldwell/abel-regular.ttf");
}
@font-face {
    font-family: "Alata_Regular";
    src: url("../fonts/caldwell/alata-regular.ttf");
}
@font-face {
    font-family: "Roboto_Regular";
    src: url("../fonts/caldwell/roboto_regular.ttf");
}
@font-face {
    font-family: "Roboto_Bold";
    src: url("../fonts/caldwell/roboto_regular.ttf");
}

.footStyle {
    font-family: "Roboto_Regular" !important;
    font-size: 15px;
    color: #212529;
}

/* ALERT FORGOT PASSWORD */
.hideAlertEmail {
    background-color: #e14747;
    position: relative;
    height: 50px;
    width: fit-content;
    padding: 10px 10px 10px 10px;
    border-radius: 5px;
    margin: 10px;
    display: none;
    bottom: 78%;
}
.hideAlertEmail::after {
    content: " ";
    background-color: #e14747;
    height: 15px;
    width: 15px;
    position: absolute;
    transform: rotate(45deg);
    right: 14%;
    bottom: -12%;
    border-radius: 2px;
}

.textAlert {
    color: #fff !important;
    font-family: "Roboto_Regular" !important;
    position: relative;
    font-size: 12px;
    margin-left: 5px;
}

#myPasswordConfirm {
    padding: 0.375rem 2.75rem;
}

.form-control {
    display: block;
    width: 290px;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* spinner  */

.spinner {
    display: none;
    z-index: 999999;
    position: absolute;
    left: 42%;
    top: 50%;
    height: 60px;
    width: 60px;
    margin: 0px auto;
    -webkit-animation: rotation 0.6s infinite linear;
    -moz-animation: rotation 0.6s infinite linear;
    -o-animation: rotation 0.6s infinite linear;
    animation: rotation 0.6s infinite linear;
    border-left: 6px solid rgba(0, 174, 239, 0.15);
    border-right: 6px solid rgba(0, 174, 239, 0.15);
    border-bottom: 6px solid rgba(0, 174, 239, 0.15);
    border-top: 6px solid rgba(0, 174, 239, 0.8);
    border-radius: 100%;
}
.showSpinner {
    display: block;
}
@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}
@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(359deg);
    }
}
@-o-keyframes rotation {
    from {
        -o-transform: rotate(0deg);
    }
    to {
        -o-transform: rotate(359deg);
    }
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

/* END FORGOT PASSWORD  */

/* HOME */

header {
    height: 150px;
    width: 100%;
    margin: 0;
    padding: 30px;
    background-color: #2b88f3;
}

img {
    width: 190px;
}

* {
    box-sizing: border-box;
}

body {
    background-color: #f1f1f1;
}
#regForm {
    position: relative;
    background-color: #ffffff;
    margin: 50px auto;
    font-family: "Raleway";
    padding: 50px 50px 50px 50px;
    width: 500px;
    min-width: 300px;
    border-radius: 6px;
    box-shadow: 0 0 10px;
}

h1 {
    text-align: center;
    font-family: roboto;
}

input {
    padding: 10px;
    width: 100%;
    font-size: 17px;
    font-family: "Roboto_Regular";
    border: 1px solid #aaaaaa;
    opacity: 0.7;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
    background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
    display: none;
}

button {
    background-color: #4caf50;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    font-size: 17px;
    font-family: "Roboto_Regular";
    cursor: pointer;
}

button:hover {
    opacity: 0.8;
}

#prevBtn {
    background-color: #bbbbbb;
}

.steps-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-left: 20px;
    padding-right: 20px;
}

/* Make circles that indicate the steps of the form: */
.step {
    height: 45px;
    width: 40px;
    margin: 0 2px;
    background-color: #f2f6fa;
    /* border: #c2c7d0 solid 3px; */
    border-radius: 50%;
    display: inline-block;
    z-index: 0;
    position: relative;
    margin: 0 2px;
    border: #f2f6fa solid 4px;
}

.step::before {
    content: " ";
    position: relative;
    background-color: #f2f6fa;
    width: 60px;
    height: 7px;
    position: absolute;
    left: 33px;

    top: 19px;
}

.step.active::before {
    content: " ";
    position: relative;
    background-color: #82b7f9;
    width: 65px;
    height: 7px;
    position: absolute;
    left: 5px;
    left: 33px;
    top: 17px;
}

.step.finish {
    background-color: #82b7f9;
}

.step-text {
    top: 20px;
    color: #646464;
    font-size: 12px;
}

.step-text.active {
    top: 20px;
    color: #1775a9;
    font-size: 12px;
}

p {
    color: #646464;
    font-family: "Roboto_Regular";
    position: relative;
    top: 13%;
    font-size: 19px;
}

.step.active {
    /* color: #82b7f9; */
    background-color: #1775a9;
    height: 45px;
    width: 40px;
    margin: 0 2px;
    border: #82b7f9 solid 4px;
}
.step.active p {
    color: #fff;
}

.step-collumn:last-child .step::before {
    display: none !important;
}

.step4 {
    height: 45px;
    width: 40px;
    margin: 0 2px;
    background-color: #f2f6fa;
    border-radius: 50%;
    display: inline-block;
    z-index: 0;
    position: relative;
}
/* .step-n-4.active {
    height: 45px;
    width: 40px;
    margin: 0 2px;
    border-radius: 50%;
    display: inline-block;
    z-index: 0;
    position: relative;
    background-color: #1775a9;
    height: 45px;
    width: 40px;
    margin: 0 2px;
    border: #82b7f9 solid 4px;
} */

/* Mark the steps that are finished and valid: */
.step.finish {
    background-color: #82b7f9;
    height: 45px;
    width: 40px;
    border-color: #82b7f9;
}

.step.finish::before {
    background-color: #82b7f9;
    height: 8px;
    width: 65px;
    left: 30px;
}
#step-1::after {
    content: "Account Information";
    position: relative;
    font-family: "Roboto_Regular";
    position: absolute;
    font-size: 10px;
    left: 5px;
    left: -11px;
    top: 49px;
}
.step.finish::after {
    content: "Account Information";
    position: relative;
    font-family: "Roboto_Regular";
    position: absolute;
    font-size: 10px;
    left: 5px;
    left: -11px;
    top: 49px;
    color: #82b7f9;
}

#step-1.active::after {
    content: "Account Information";
    position: relative;
    font-family: "Roboto_Regular";
    color: #82b7f9;
    position: absolute;
    font-size: 10px;
    left: 5px;
    left: -11px;
    top: 49px;
}
#step-2::after {
    content: "Authorization Code";
    position: relative;
    font-family: "Roboto_Regular";
    position: absolute;
    font-size: 10px;
    left: 5px;
    left: -11px;
    top: 49px;
}
#step-2.active::after {
    content: "Authorization Code";
    position: relative;
    font-family: "Roboto_Regular";
    position: absolute;
    font-size: 10px;
    left: 5px;
    left: -11px;
    top: 49px;
    color: #82b7f9;
}

#step-3::after {
    content: "Choose New  Password";
    position: relative;
    font-family: "Roboto_Regular";
    position: absolute;
    font-size: 10px;
    left: 5px;
    left: -11px;
    top: 49px;
}
#step-3.active::after {
    content: "Choose New  Password";
    position: relative;
    font-family: "Roboto_Regular";
    position: absolute;
    font-size: 10px;
    left: 5px;
    left: -11px;
    top: 49px;
    color: #82b7f9;
}
#step-4::after {
    content: "  Finish";
    position: relative;
    font-family: "Roboto_Regular";
    position: absolute;
    font-size: 10px;
    left: 15px;
    left: 2px;
    top: 49px;
}
#step-4.active::after {
    content: "  Finish";
    position: relative;
    font-family: "Roboto_Regular";
    position: absolute;
    font-size: 10px;
    left: 15px;
    left: 2px;
    top: 49px;
    color: #82b7f9;
}

.text-reset-container {
    padding: 30px;
}
.text-reset {
    color: #aaaaaa;
    font-size: 12px;
    padding-left: 25px;
    padding-right: 25px;
    text-align: center;
}
.input-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 40px;
    padding-right: 40px;
    width: 100%;
}

.text-label {
    font-size: 11px;
    font-family: "Roboto_Regular";
    opacity: 0.7;
    padding-left: 0;
}

#nextBtn {
    border-radius: 5px;
    background-color: #33e0fe;
    color: #646464;
    font-family: "Roboto_Regular";
    height: 40px;
    padding: 9px 19px 11px 17px;
}

hr {
    color: #646464;
}

.footer-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.colorInput,
.selectColorInput + span {
    padding: 8px 13px 4px 45px;
    /* border: 1px solid #33e0fe !important; */
    border-radius: 6px;
    margin-bottom: 25px;
    margin-top: 2px;
    width: 100%;
    box-sizing: border-box;
    font-family: "Roboto_Regular";
    font-size: 14px;
    background-color: transparent;
}

svg {
    position: absolute;
    top: 30px;
    left: 27px;
    transform: rotateZ(132deg);
    z-index: 6;
}

#warning-white {
    position: relative;
    top: auto;
    left: auto;
    transform: unset;
}

.separator-input {
    height: 19px;
    width: 2px;
    background-color: #646464;
    position: relative;
    top: 29px;
    left: 35px;
    z-index: 6;
}
.eye-container {
    position: relative;
    top: 20px;
    right: 10p;
}
.btn-finish {
    background-color: #212529;
    color: #fff;
    font-family: "Roboto_Regular";
    border-radius: 5px;
    font-size: 13px;
}
.copyright {
    font-size: 15px;
}
.strength_meter div {
    width: 100%;
    height: 23px;
    text-align: center;
    color: #495057;
    font-weight: bold;
    line-height: 23px;
    font-weight: 100;
}
/* .strength_meter div::after {

    content: " ";
    position: absolute;
    max-height: 10px;
    max-width: 10px;
    background-color: red;
} */
/* #codeError {
  background-color: #e14747;
  height: 50px;
  width: fit-content;
  padding: 10px 10px 10px 10px;
  border-radius: 5px;
  margin: 10px;
} */
/* #codeError::after {
  content: " ";
  background-color: #e14747;
  height: 15px;
  width: 15px;
  position: relative;
  transform: rotate(45deg);
  right: 43px;
  top: 30px;
  border-radius: 2px;
} */

/* #matchError {
  background-color: #e14747;
  height: 50px;
  width: fit-content;
  padding: 10px 10px 10px 10px;
  border-radius: 5px;
  margin: 10px;
} */

/* #matchError::after {
  content: " ";
  background-color: #e14747;
  height: 15px;
  width: 15px;
  position: relative;
  transform: rotate(45deg);
  right: 43px;
  top: 30px;
  border-radius: 2px;
} */
/*
#mailError {
  background-color: #e14747;
  height: 50px;
  width: fit-content;
  padding: 10px 10px 10px 10px;
  border-radius: 5px;
  margin: 10px;
} */

/* #mailError::after {
  content: " ";
  background-color: #e14747;
  height: 15px;
  width: 15px;
  position: relative;
  transform: rotate(45deg);
  right: 43px;
  top: 30px;
  border-radius: 2px;
} */

@media (max-width: 1000px) {
    #regForm {
        position: relative;
        background-color: #ffffff;
        margin: 50px auto;
        font-family: "Raleway";
        padding: 20px 20px 20px 20px;
        width: 50%;
        min-width: 300px;
        border-radius: 6px;
        box-shadow: 0 0 10px;
    }
}