/*progress header*/
#progress_header {
    overflow: hidden;
    margin: 0 auto 30px;
    padding: 0;
}

#progress_header li {
    list-style-type: none;
    position: relative;
    font-size: 16px;
    font-weight: bold;
    font-family: monospace;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
}

#progress_header li:after {
    width: 35px;
    height: 35px;
    line-height: 35px;
    display: block;
    font-size: 22px;
    color: #888;
    border-style: solid;
    border-color: #eceeef;
    background-color: #fff;
    border-radius: 100px;
    margin: 10px auto;
    font-family: "Roboto", sans-serif;
}

#progress_header li:nth-child(1):after {
    content: "1";
}

#progress_header li:nth-child(2):after {
    content: "2";
}

#progress_header li:nth-child(3):after {
    content: "3";
}

#progress_header li:before {
    content: "";
    width: 100%;
    height: 5px;
    background: #c7cdd0;
    position: absolute;
    left: -50%;
    top: 50%;
    z-index: -1;
}

#progress_header li:first-child:before {
    content: none;
}

#progress_header li.active:before,
#progress_header li.active:after {
    background-image: linear-gradient(
        to right top,
        #3597e8,
        #369bed,
        #3d8ef2,
        #4aa3f7,
        #5984fb
    ) !important;
    color: #fff !important;
    transition: all 0.5s;
}

.stepper-bg {
    background-color: white;
}
.side-bg {
    background: linear-gradient(
        180deg,
        #77cdff 0%,
        #4cc9fe 18.4%,
        #199cf6 42.9%,
        #0d92f4 57.9%
    );
}
.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.alert-container {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alert-backdrop {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.75;
    background-color: #7a7b7c;
}

.alert-content {
    position: relative;
    display: inline-block;
    /* background-color: white; */
    padding: 20px;
    border-radius: 10px;
    /* border: 5px solid black; */
}
.disabled:disabled {
    background-color: white;
}
.uil--google {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M22.602 10.004a1 1 0 0 0-.984-.822H12.2a1 1 0 0 0-1 1v3.868a1 1 0 0 0 1 1h3.962a3.65 3.65 0 0 1-1.131 1.187a5.06 5.06 0 0 1-2.831.785a4.935 4.935 0 0 1-4.646-3.437v-.002a4.9 4.9 0 0 1 0-3.167v-.002A4.94 4.94 0 0 1 12.2 6.978a4.38 4.38 0 0 1 3.131 1.217a1 1 0 0 0 1.399-.015l2.868-2.868a1 1 0 0 0-.025-1.439A10.62 10.62 0 0 0 12.2 1a10.95 10.95 0 0 0-9.829 6.059l-.001.002A10.9 10.9 0 0 0 1.2 12a11.1 11.1 0 0 0 1.17 4.94l.001.001A10.95 10.95 0 0 0 12.2 23a10.53 10.53 0 0 0 7.295-2.687l.001-.001a10.8 10.8 0 0 0 3.304-8.084a12.5 12.5 0 0 0-.198-2.224M12.2 3a8.7 8.7 0 0 1 5.209 1.673l-1.454 1.453A6.46 6.46 0 0 0 12.2 4.978a6.89 6.89 0 0 0-5.99 3.55L5.142 7.7l-.585-.454A8.95 8.95 0 0 1 12.2 3M3.68 14.903a9.03 9.03 0 0 1 0-5.806l1.782 1.382a6.85 6.85 0 0 0 0 3.042ZM12.2 21a8.95 8.95 0 0 1-7.644-4.246l.379-.294l1.276-.99a6.89 6.89 0 0 0 5.989 3.552a7.3 7.3 0 0 0 3.306-.75l1.691 1.313A8.9 8.9 0 0 1 12.2 21m6.526-2.76l-.183-.143l-1.377-1.069a5.6 5.6 0 0 0 1.4-2.796a1 1 0 0 0-.984-1.182H13.2v-1.868h7.549q.051.518.051 1.046a9.05 9.05 0 0 1-2.074 6.011'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}
.split {
    height: 100%;
    width: 50%;
    position: fixed;
    z-index: 1;
    top: 0;
    overflow-x: hidden;
    padding-top: 20px;
}
.left {
    left: 0;
}

.right {
    right: 0;
}