﻿.pearl {
    background-color: var(--dark-space);
    padding-top: 15px;
    padding-bottom: 10px;
}

.pearls {
    margin: 0;
}

.pearl-icon {
    font-size: 23px;
    border: 0;
    line-height: 38px;
    height: 38px;
    width: 38px;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pearl-title {
    color: white;
    font-size:13px;
}

.pearl.disabled .pearl-icon,
.pearl .pearl-icon,
.pearl.disabled .pearl-number,
.pearl .pearl-number {
    color: #fff;
    background-color: var(--wizard-blue);
}

.pearl.active .pearl-title,
.pearl.current .pearl-title {
    color: var(--citric);
}

.pearl.active .pearl-icon,
.pearl.active .pearl-number,
.pearl.current .pearl-icon,
.pearl.current .pearl-number {
    border: 4px solid var(--citric);
    -webkit-transform: unset;
    transform: unset;
    height: 49px;
    width: 49px;
    margin-top: 0;
    color: var(--citric);
    background-color: var(--dark-space);
}

.pearl:after,
.pearl:before {
    top: 32px;
    height: 5px;
}

.pearl.active:after,
.pearl.active:before,
.pearl.current:after,
.pearl.current:before,
.pearl.done:after,
.pearl.done:before {
    background-color: var(--citric);
}

.pearl:after,
.pearl:before,
.pearl.disabled:after,
.pearl.disabled:before {
    background-color: var(--wizard-blue);
}

.pearl.error .pearl-icon,
.pearl.error .pearl-number {
    color: var(--caramel);
    border-color: var(--caramel);
}

.pearl.error .pearl-title {
    color: var(--caramel);
}

.pearl.error:after {
    background-color: var(--wizard-blue);
}

.pearl.done .pearl-title {
    color: var(--citric);
}

.pearl.done .pearl-icon,
.pearl.done .pearl-number {
    border: 4px solid var(--citric);
    -webkit-transform: unset;
    transform: unset;
    height: 49px;
    width: 49px;
    margin-top: 0;
    color: var(--dark-space);
    background-color: var(--citric);
}

.wizard-pane {
    display: none;
}

    .wizard-pane.active {
        display: block;
    }

.modal-body .pearls {
    margin-left: -24px;
    margin-right: -24px;
    margin-top: -36px;
}
