@import url('normalize.css');
body {
    background: #FAFAFA;
}
.orders{
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
    padding: 0 5px;
    max-height: 100vh;
}
.title-header {
    font-size: 23px;
    font-weight: 300;
    margin: 10px 0;
    vertical-align: inherit;
}

.title-header > span {
    display: inline-block;
    vertical-align: bottom;
}

.logo {
    height: 27px;
    display: inline-block;
    vertical-align: bottom;
}

.order{
    background: white;
    cursor: pointer;
}

.order:hover{
    /* background: #eee; */
}

.order .info{
    display: none;
    padding: 10px;
    /* background: #eee; */
    font-size: 13px;
}

.order.active > .order-header{
    /*background: #f3f3f3;*/
}

.order-wrapper {
    padding: 12px 10px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

@media (hover: hover){
    .order-wrapper:hover{
        background: #f2f5f7;
    }
}

@media (hover: none) and (pointer: coarse) {
    .order-wrapper:active{
        background: #f2f5f7;
    }
}


.order .info label{
    display: block;
    color: #8c959c;
    margin-top: 5px;
}

.order .info .order-statuses{
    display: none;
}

.order .address {
    font-weight: 300;
    width: auto;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 500;
}

.order .sum {
    /*color: #919090;*/
    font-weight: 500;
}

.order .timer {
    color: #8c959c;
    font-weight: 300;
}

.order .number {
    color: #8c959c;
}

.order .status {
    font-weight: 500;
    padding: 2px 8px;
    background: #f7f8fa;
    border-radius: 8px;
    color: #8c959c;
}

.order .status-wrapper {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.total-sum-orders li{
    font-size: 14px;
    z-index: 1!important;
}

.badge-primary {
    color: #fff;
    background-color: #007bff;
}
.badge-pill {
    padding-right: .6em;
    padding-left: .6em;
    border-radius: 10rem;
}

.security-numbers {
    padding: 0 30px 30px;
}

.security-code .numbers,
.security-code .login{
    text-align: center;
    color: black;
    padding: 21px;
    font-size: 25px;
    /* width: 10px; */
}

.security-code .login{
    color: #4caf50;
}

.security-code .reset {
    color: #ff9800;
}

.security-code .numbers:hover,
.security-code .login:hover
{
    /*background: #009AF0;*/
    cursor: pointer;
    /*border-radius: 100%;*/
    /*color: white;*/
}

@media (hover: hover){
    .security-code .numbers:hover{
        background: #FFC107;
    }
}

@media (hover: none){
    .security-code .numbers:active{
        background: #FFC107;
    }
}


.security-pincode {
    width: 100%;
    display: block;
    height: 30px;
    text-align: center;
    margin: 10px 0;
}

.security-pincode > span {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: grey;
    border-radius: 100%;
    margin: 3px;
}

.security-pincode > span.im {
    background: #4CAF50;
    animation: preloader .6s ease-in-out alternate;/*infinite*/
}

.error .security-pincode > span{
    background: red!important;
}

@keyframes preloader {
    0% {
        transform: scale(1.0);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1.0);
    }
}

.security-code {
    max-width: 500px;
    margin: 0px auto;
}

.security-code .code {
    padding: 20px 20px 0;
    margin-bottom: 80px!important;
    position: relative;
}

.security-code .code label {
    color: #9e9e9e;
}


.security-code .code input,
.security-code .code input:focus {
    display: none;
    background: transparent;
    border: none;
    color: black;
    font-size: 50px;
    text-align: center;
}

.security-code .code.error input{
    color: red;
}

.security-code .code:before {
    content: 'Неверный пароль';
    position: absolute;
    bottom: -10px;
    left: 0px;
    color: red;
    font-size: 10px;
    width: 100%;
    text-align: center;
    transition: transform .3s;
    transform: scale(0) translate(-50%, -50%);
}

.security-code .code.error:before {
    transform: scale(1) translate(0%, 0%);
}

.security-code .row{
    margin: 0;
}

.menu {
    display: flex;
    padding: 5px;
    background: #F5F4F2;
    border-radius: 10px;
    margin-bottom: 10px;
}

.menu-first {
}

.menu-last {
    margin-left: auto;
    display: flex;
}

.menu-first a {
    display: inline-block;
    text-decoration: none;
    color: black;
    padding: 7px 15px;
    font-size: 16px;
    font-weight: 400;
    border-radius: 10px;
    transition: background .2s ease;
}

.menu-first a.active {
    background: white;
}
.search-orders-wrapper{
    display: none;
}

.icon-search {
    height: 100%;
    display: inline-block;
    width: 35px;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-right: 5px;
    background-image: url('/assets/img/icon-search.png');
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

/*.icon-search:hover {
    background: #e6e6e6;
}*/

input#datepicker {
    display: inline-block;
    text-decoration: none;
    padding: 8px 22px 8px 8px;
    font-size: 16px;
    font-weight: 400;
    border-radius: 10px;
    transition: background .2s ease;
    border: none;
    background: none;
    max-width: 92px;
    cursor: pointer;
    background-image: url('/assets/img/icon-pencil.png');
    background-size: 11px;
    background-repeat: no-repeat;
    background-position: right 7px center;
    border: 1px solid #ddd;
}

input#datepicker:focus { outline: none; }

#datepicker.loading {
    background-image: url('/assets/img/load.gif');
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
}

.tab-content>.active {
    padding: 0;
}

.stats-block-title {
    font-size: 14px;
    font-weight: 400;
    color: #8c959c;
    /* text-align: center; */
    padding: 11px 10px;
    background: white;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid #f3f3f3;
}

.stats-block {
    border-radius: 10px;
    border-bottom: 1px solid rgba(229, 225, 225, 0.70);
    background: #FFF;
    padding: 13px 15px;
    margin-bottom: 10px;
}

.stats-block-title + .stats-block {
    border-radius: 0 0 10px 10px;
}

.stats-row {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: flex-start;
    -webkit-justify-content: space-between;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    gap: 10px;
}

.stats-block .stats-row:first-child {
    margin-bottom: 10px;
}

.stats-item {
    width: 30%;
}

.item-name {
    font-size: 14px;
    font-weight: 300;
}

.item-value {
    font-size: 20px;
    font-weight: 500;
}

.item-value-back {
    color: grey;
    font-size: 12px;
}

.navigation-block {
    border-radius: 10px;
    border-bottom: 1px solid rgba(229, 225, 225, 0.70);
    background: #FFF;
    padding: 13px 15px;
    margin-bottom: 10px;
}

.bottom-stats span {
    color: red;
    padding-left: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' color='%23F5523A' fill='none' class='QWYBBbkQvUgOqT7m0v_k' font-size='22' data-testid='ui-icon-ArrowDown' style='fill: none; font-size: 22px;'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.7071 14.7071C16.0976 14.3166 16.0976 13.6834 15.7071 13.2929C15.3166 12.9024 14.6834 12.9024 14.2929 13.2929L13 14.5858L13 7C13 6.44771 12.5523 6 12 6C11.4477 6 11 6.44771 11 7L11 14.5858L9.70711 13.2929C9.31658 12.9024 8.68342 12.9024 8.29289 13.2929C7.90237 13.6834 7.90237 14.3166 8.29289 14.7071L11.2929 17.7071C11.6834 18.0976 12.3166 18.0976 12.7071 17.7071L15.7071 14.7071Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
    background-size: 19px;
    background-repeat: no-repeat;
    background-position: left -2px;
}

.top-stats span {
    color: rgb(0, 202, 80);
    padding-left: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 25' color='%2300CA50' fill='none' class='QWYBBbkQvUgOqT7m0v_k' font-size='22' data-testid='ui-icon-ArrowUp' style='fill: none; font-size: 22px;'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.29289 9.79289C7.90237 10.1834 7.90237 10.8166 8.29289 11.2071C8.68342 11.5976 9.31658 11.5976 9.70711 11.2071L11 9.91421V17.5C11 18.0523 11.4477 18.5 12 18.5C12.5523 18.5 13 18.0523 13 17.5V9.91421L14.2929 11.2071C14.6834 11.5976 15.3166 11.5976 15.7071 11.2071C16.0976 10.8166 16.0976 10.1834 15.7071 9.79289L12.7071 6.79289C12.3166 6.40237 11.6834 6.40237 11.2929 6.79289L8.29289 9.79289Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
    background-size: 19px;
    background-repeat: no-repeat;
    background-position: left -3px;
}

.card-mama {
    background: #e42834;
    padding: 25px 20px;
}

.card-romitto {
    padding: 25px 20px;
}