@import "variables.scss";

.wtotem {
    &_ready {
        background: #e5e5e5;
    }

    &_unit {
    }
}
.wtotem_unit {
    &__first {
        display: flex;
        justify-content: space-between;
    }

    &__wrapper {
        display: flex;
        justify-content: space-between;
        background: #fff;
    }

    &__block {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 30px 30px;
        border-right: 1px solid #f3f5f6;
    }

    &__line {
    }

    &__contain {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    &__circle {
        margin-right: 16px;
        width: 45px;
        height: 45px;
        border-radius: 100px;
        display: flex;
        align-items: center;
        justify-content: center;

        &_loading {
            background: #f3f5f6;
        }

        &_success {
            background: #4bc374;
        }

        &_error {
            background: #ee3f3f;
            position: relative;
            &:before {
                content: "";
                position: absolute;
                width: 19px;
                height: 3px;
                background: #fff;
                border-radius: 1px;
                display: block;
                transform: rotate(45deg);
            }
            &:after {
                content: "";
                position: absolute;
                width: 19px;
                height: 3px;
                background: #fff;
                border-radius: 1px;
                display: block;
                transform: rotate(-45deg);
            }
        }
    }

    &__img {
        &_spinner {
            animation: 1s linear 0s normal none infinite running rot;
            -webkit-animation: 1s linear 0s normal none infinite running rot;

            @keyframes rot {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }
            @-webkit-keyframes rot {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }
        }
    }

    &__expectation {
        font-size: 16px;
        font-weight: 500;
        &_loading {
            color: #7c8087;
        }

        &_success {
            color: #bace3d;
        }

        &_error {
            color: #d56c6a;
        }
    }

    &__repeat {
        color: $c-blue;
        cursor: pointer;
    }
}
.section-header-mb {
}

.title {
}