*{
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
}
#root {
    width: 100%;
    min-height: 100vh;
    background: transparent;
}
.preloader{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: #242424;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;;
}
.title{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% - 65px));
}
h1.logo{
    display: flex;
    flex-flow: row nowrap;
    margin: 0;
    justify-content: center;
    align-items: center;
    font-size: 34px;
    font-weight: 700;
    color: #fff;
    position: relative;
}
.logo img{
    width: 150px;
    margin-bottom: 10px;
}
.loading-text{
    position: relative;
    text-align: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: flex-end;
    width: 80px;
    margin: 0 auto;
    opacity: 0.7;
    color: #fff;
}
.dots{
    overflow: hidden;
    position: absolute;
    left: 76px;
    white-space:nowrap;
    letter-spacing: 2px;
    text-align: center;
    animation: animation 3s infinite steps(50, end);
    transition: none;
}
.helper{
    color: #fff;
    text-align: center;
    margin: 20px auto;
    position: absolute;
    bottom: 30px;
    padding: 0 20px;
    width: 100%;
    transition: all .5s ease-in-out;
}
.helper:after{
    content: ' . . .';
}
@keyframes animation{
    0% {width: 17px;}
    10% {width: 5px;}
    39% {width: 5px;}
    40% {width: 11px;}
    69% {width: 11px;}
    70% {width: 17px;}
    100% {width: 17px;}
}


.mt-20 {
    margin-top: 20px;
}

.mb-20 {
    margin-bottom: 20px;
}

.sales-products-list.collapsed {
    display: flex;
    flex-wrap: wrap;
}