#main{
    animation: main 2s ease 1;
}

@keyframes main{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.is-invalid {
    animation: is-invalid 1s ease 1;
}

@keyframes is-invalid {
    0%, 100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(20px);
    }
}

.is-valid {
    animation: is-valid 1s ease 1;
}

@keyframes is-valid {
    0%, 100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-20px);
    }
}

.invalid-feedback {
    animation: invalid-feedback 1s ease 1;
}

@keyframes invalid-feedback {
    0%, 100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-20px);
    }
}

.img-style{
    height: 300px;
    width: 300px;
    border-radius: 120px;
    transition: 1s;
    cursor: pointer;
    filter: opacity(50%);
}

.img-style:hover{
    scale: 1.5;
    filter: opacity(100%);
}

.logo{
    height: 40px;
    width: 40px;
    border-radius: 150px;
}

.mess{
    height: 30px;
    width: 30px;
    border-radius: 150px;
}

.mess:hover{
    filter: opacity(100%);
}

.block_icon{
cursor: pointer;
}

/* Цвета для 7 статусов */
.bg-success { background-color:  #54cd76 !important; }      /* 🟡 Новый */
.bg-primary { background-color: #007bff !important; }        /* 🟢 В обработке */
.bg-info { background-color: #8861d6 !important; }           /* 🟣 Принят */
.bg-warning { background-color: #ffc107 !important; color: #000; } /* 🟤 В сборке */
.bg-danger { background-color: #dc3545 !important; }         /* 🟥 В пути */
.bg-secondary { background-color: #318745 !important; }        /* 🟦 Доставлен */
.bg-danger { background-color: #bb3333ef !important; }           /* 🟧 Отменён */

/* Добавьте в ваш CSS */
.navbar.bg-dark {
    background: rgba(32, 32, 32, 0.85) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    font-weight: 600;
    font-size: 1.4rem;
    background: linear-gradient(45deg, #fff, #ffc107);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo {
    border: 2px solid #ffc107;
    padding: 2px;
    transition: transform 0.3s;
}

.logo:hover {
    transform: rotate(360deg);
}

html {
    overflow-x: hidden;
    margin-right: calc(-1 * (100vw - 100%));
}