.centered {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 10000;
    text-align: center;
    transform: translate(-50%, -50%);
    animation: fadein 1s;

    &.nofade {
        animation: none;
    }

    border-radius: 10px;

    :global(.hiddenByPosition) & {
        display: none !important;
    }

    > :global(.sk-spinner) {
        background: $brand-primary;
        padding: 15px;
        border-radius: 50%;
        height: 115px;
        width: 115px;
    }

    .color {
        > div {
            color: #fff !important;
        }
    }
}

/*.centered-relative-to-container {
  position:absolute;
  top: 300px;
  left:50%;
  z-index:10000;
  text-align:center;
  transform: translateX(-50%);
}*/

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.centered-with-children {
    // fixes blurry text bug to have an even # of pixels in width
    width: 600px;
}

.color {
    > div {
        color: $brand-primary !important;
    }
}

.small {
    > div {
        width: 3px !important;
        margin: 0 2px !important;
        height: 12px !important;
        width: 3px !important;
    }
    margin-left: 10px;
}

.big {
    > div {
        height: 75px !important;
        width: 6px !important;
        margin: 4px !important;
    }
}

.progressUI {
    position: absolute;
    top: 140px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 20px;
    padding: 15px;

    &:empty {
        display: none;
    }
}