* {
    margin : 0;
    padding: 0
}

html {
    height: 100%
}

p {
    color: grey
}

#heading {
    text-transform: uppercase;
    color         : #000000;
    font-weight   : normal
}

#msform {
    text-align: center !important;
    position  : relative !important;
    margin-top: 20px !important;
}

#msform fieldset {
    border-radius : 0.5rem !important;
    box-sizing    : border-box !important;
    width         : 100% !important;
    margin        : 0 !important;
    padding-bottom: 20px !important;
    position      : relative !important;
}

.card {
    background-color: transparent !important;
}

.bg-transform {
    background-color: #024f42 !important;
    color           : #deadff !important;
    border-radius   : 2% !important;
}

.text-transform {
    color: #deadff !important;

}

.bg-replae {
    background-color: #deaeff !important;
    color           : #584c9f !important;
    border-radius   : 2% !important;
}

.card_fname_lname {
    color: #024f42 !important;
}

.img-point {
    border-radius: 8px !important;
}

.text-replae {
    color: #584c9f !important;

}

.bg-reduce {
    background-color: #4ae180 !important;
    color           : #014e41 !important;
    border-radius   : 2% !important;
}

.text-reduce {
    color: #014e41 !important;

}


.form-card {
    text-align: left;
}

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


#msform .action-button {
    width        : 100px;
    background   : #dcadfe;
    border-radius: 0px;
    cursor       : pointer;
    padding      : 10px 5px;
    margin       : 10px 5px 10px 0px;
    /* float     : right; */
}

#msform .action-button:hover,
#msform .action-button:focus {
    background-color: #dcadfe;
}

#msform .action-button-previous {
    width        : 100px;
    background   : #616161;
    border       : 0 none;
    border-radius: 0px;
    cursor       : pointer;
    padding      : 10px 5px;
    margin       : 10px 5px 10px 0px;
    /* float     : right; */
}

#msform .action-button-previous:hover,
#msform .action-button-previous:focus {
    background-color: #000000;
}

.card {
    z-index : 0;
    border  : none;
    position: relative;
}

.fs-title {
    font-size    : 25px;
    color        : #3a9ab7;
    margin-bottom: 15px;
    font-weight  : normal;
    text-align   : left
}

.purple-text {
    color      : #9abae1;
    font-weight: normal
}


.steps {
    font-size    : 25px;
    color        : gray;
    margin-bottom: 10px;
    font-weight  : normal;
    text-align   : right
}

.fieldlabels {
    color     : #000c1d;
    text-align: left;
}

#progressbar {
    margin-bottom: 5px;
    overflow     : hidden;
    color        : lightgrey;
}

#progressbar .active {
    color: #dcadfe;
}

#progressbar li {
    list-style-type: none;
    font-size      : 15px;
    width          : 33%;
    float          : left;
    position       : relative;
    font-weight    : 400;
}

#progressbar #account:before {
    font-family: "Font Awesome 5 Brands";
    content    : "\f13e"
}

#progressbar #personal:before {
    font-family: "Font Awesome 5 Brands";
    content    : "\f007"
}

#progressbar #payment:before {
    font-family: "Font Awesome 5 Brands";
    content    : "\f030"
}

#progressbar #confirm:before {
    font-family: "Font Awesome 5 Brands";
    content    : "\f00c"
}

#progressbar #confirm:before {
    font-family: "Font Awesome 5 Brands";
    content    : "\f00c"
}


#progressbar li:before {
    width        : 50px;
    height       : 50px;
    line-height  : 45px;
    display      : block;
    font-size    : 20px;
    color        : #ffffff;
    background   : lightgray;
    border-radius: 50%;
    margin       : 0 auto 10px auto;
    padding      : 2px
}

#progressbar li:after {
    content   : '';
    width     : 100%;
    height    : 2px;
    background: lightgray;
    position  : absolute;
    left      : 0;
    top       : 25px;
    z-index   : -1
}

#progressbar li.active:before,
#progressbar li.active:after {
    background: #dcadfe
}

.progress {
    height: 20px
}

.progress-bar {
    background-color: #dcadfe
}

.fit-image {
    width     : 100%;
    object-fit: cover
}


/* css consent */
.close {

    font-weight: 100 !important;
    color      : #000000 !important;
    font-size  : 50px !important;
    padding    : 0 10px !important;
    opacity    : initial !important;
}

/* css consent */


/* card */
.container {
    position  : relative;
    text-align: center;
    color     : white;
}

/* Bottom left text */
.bottom-left {
    position: absolute;
    bottom  : 168px;
    left    : 40px;
}

/* Top left text */
.top-left {
    position: absolute;
    top     : 20px;
    left    : 45px;
}

/* Top right text */
.top-right {
    position: absolute;
    top     : 30px;
    right   : 45px;
}

/* Bottom right text */
.bottom-right {
    position: absolute;
    bottom  : 8px;
    right   : 16px;
}

/* Centered text */
.centered {
    position : absolute;
    top      : 50%;
    left     : 50%;
    transform: translate(-50%, -50%);
}

.swal2-image {
    max-width: 40% !important;
    margin   : 0.65em auto !important;
}

.font-18 {
    font-size: 18px !important;
}

.font-22 {
    font-size: 22px !important;
}

.font-26 {
    font-size: 26px !important;
}

.font-30 {
    font-size: 30px !important;
}

.font-150 {
    font-size: 150px !important;
}



@media (min-width: 320px) {

    .top-left {
        position: absolute;
        top     : 10px;
        left    : 32px;
    }

}

@media (min-width: 425px) {

    .top-left {
        position: absolute;
        top     : 10px;
        left    : 38px;
    }

}

@media (min-width: 576px) {

    .top-left {
        position: absolute;
        top     : 10px;
        left    : 32px;
    }

}

@media (min-width: 768px) {
    .top-left {
        position: absolute;
        top     : 31px;
        left    : 44px;
    }
}

@media (min-width: 1024px) {
    .top-left {
        position: absolute;
        top     : 15px;
        left    : 30px;
    }
}

@media (min-width: 1440px) {
    .top-left {
        position: absolute;
        top     : 20px;
        left    : 55px;
    }
}