.cocktails__data-container{
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.step3-main-screen__item{
    align-items: flex-start;
}
.red{
    border: 2.5px solid red!important;
  }
a.disabled{
    opacity: 0.5;
}
.right-from-title{
    display: flex;
    gap: 8px;
    align-items: center;
}
.select-custom{

    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    width: fit-content;
    cursor: pointer;
}
.select-custom .select__list{
    border: 1px solid var(--c-placeholder-text);
}
.select-custom .select__list li{
    list-style: none;
    padding: 8px 16px;
    display: flex;
    gap: 8px;
}
.select-custom .select__header{
    width: fit-content;
    min-width: fit-content;
    border: 1px solid var(--c-numval-b);
    border-radius: 5px;
    padding: 10px 30px 10px 20px;
}

.select-custom__values{
    display: flex;
    flex-direction: column;
}

.volume-ingridients-all{
    font-weight: 600;
    border: 1px solid var(--c-numval-t);
}
.right-filters{
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
select:not(._yellow){
    appearance: none;
    background: url("/assets/img/select-arrow.svg") no-repeat right;
    background-position-x: calc(100% - 5px);
}

.step3-main-screen__titleblock p{
    margin: 0!important;
}

.step3-main-screen__titleblock .step3-main-screen__title:nth-child(3),
.step3-main-screen__titleblock .step3-main-screen__title:nth-child(4){
    text-align: center;
}

.step3-main-screen__titleblock,.step3-main-screen__item{
    display: grid; 
    grid-auto-columns: 1fr; 
    grid-auto-rows: 1fr; 
    grid-template-columns: 1fr 1fr 1fr 1fr ; 
    grid-template-rows: 1fr; 
    gap: 10px 10px; 
    grid-template-areas: 
      ". . . ."; 
}
.hidden{
    display: none;
}

.excel-import{
    background-color: var(--c-accent-light);
    border-radius: 5px;
    color: var(--c-white);
    cursor: pointer;
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    padding: 9px 33px;
}

.step4-titleblock,.step4-item{
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    grid-template-areas: 
    ". . . . ."; 
}

.step4-titleblock .step3-main-screen__title:nth-child(3){
    text-align:left;
}

.step4-titleblock .step3-main-screen__title:nth-child(2){
    text-align: center;
}

.sort-by-name{
    padding-right: 15px;
    background-position-x: calc(100% - 0px);
    width: 100px;
}
.sort-container{
    display: flex;
    gap: 20px;
}
.order__status select{
    -webkit-appearance: none;
    -moz-appearance: none;
}
/* .drink-list__result .cocktails__data:last-of-type{
    margin-bottom: 40px;
} */

.cocktails__data-container .category{
    color: #6F5E91;
    font-size: 16px;
    margin-top: 20px;
}

.cocktails__data-container .category:first-of-type{
    margin-top: 0;
}
.btn-back{
    padding: 10px 20px;
    font-size: 18px;
    display: flex;
    gap: 10px;
    align-items: center;
    background-color: var(--c-accent-light);
    color: white;
    border-radius: 10px;
    cursor: pointer;
    transition:var(--transition);
    margin-bottom: 30px;
    text-decoration: none;
    width: fit-content;
}
.btn-back:hover{
    opacity: 0.75;
}
#categories-select-search{
    padding: 8px 16px;
    font-size: 16px;
}
.workers-main-screen__add._mobile{
    display: none;
}

.settings_header p:nth-child(2){
    text-align: right;
}

.buttons-group{
    display: flex;
    align-items: center;
    gap: 20px;
}

.custom-select{
    padding: 10px 16px;
    color: var(--c-black);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    padding-right: 25px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid var(--c-placeholder-text);
    border-radius: 5px;
    margin-top: 8px;
    width: 100%;
    position: relative;
    display: inline-block;
}
.cocktails-main-screen .cocktails-list {
    justify-content: flex-start;
}
.modal{
    width: 100vw;
    height: 100vh;
    display: none;
}
.d-flex{
    display: flex;
}
.flex-column{
    flex-direction: column;
    height: fit-content;
}
#modal_add_ingridient{
    z-index: 10000;
}

@keyframes modalOpen {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}


.modal._open{
    opacity: 1;
    display: block;
    animation: modalOpen .5s ease-in-out forwards;

}

.custom-select::after {
    content: "▼";
    padding: 0 8px;
    font-size: 12px;
    position: absolute;
    right: 8px;
    top: 4px;
    z-index: 1;
    text-align: center;
    width: 10%;
    height: 100%;
    pointer-events: none;
    box-sizing: border-box;
  }
.settings_header,.settings_values{
    display: flex;
    justify-content: space-between;
}

@media(max-width: 700px){
    .workers-main-screen__add._mobile{
        display: block;
    }
}

.order-ingredients__info-item-grid,.order-drink__header{
    display: grid!important; 
    grid-auto-columns: 1fr; 
    align-items: unset!important;
    justify-content: unset!important;
    grid-template-columns: 200px 100px 100px 100px; 
    grid-template-rows: 1fr; 
    gap: 20px 75px; 
    grid-template-areas: 
      ". . . ."; 
}
.order-ingredients__info-item p{
    text-align: unset!important;
}

.step-3-page .step3-main-screen__title:nth-child(3){
    margin-left: 290px;
}
.step-3-page .step3-main-screen__title:nth-child(2){
    margin-left: 215px;
}
.order__link.flex button:hover{
    opacity: 0.5;
}
.order__link.flex{
    transition: .3s linear;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.excel-export-ingridients{
    display: flex;
    align-items: center;
    padding: 10px 20px;
}
.order__controls{
    align-items: center;
}
.ingridients-buttons-group{
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-bottom: 10px;
    align-items: center;
}
.prod-card__prices input{
    font-weight: 600!important;
    border: 1px solid var(--c-numval-t)!important;
}
.order-drink{
    min-width: fit-content;
}

@media (max-width: 959px){
    .step-3-page .step3-main-screen__title:nth-child(2) {
        margin-left: 180px;
    }
    .step-3-page .step3-main-screen__title:nth-child(3) {
        margin-left: 120px;
    }
}

@media(max-width: 900px){
    .order-ingredients__info-item-grid,.order-drink__header{
        grid-template-columns: 200px 100px 100px 100px; 
        gap: 10px 25px; 
    }
}

@media(max-width: 756px){
    .right-from-title .select.select-custom
    {
        padding: 0;
    }
    .right-from-title{
        margin-top: 15px;
        flex-direction: column;
    }
    .cocktails-main-screen__header{
        flex-direction: column;
        align-items: flex-start;
    }
    .step3-main-screen__titleblock {
        display: none!important;
    }
    .ingredients-main-screen__header,.sort-container{
        display: flex;
        width: 100%;
        margin-top: 10px;
        flex-direction: column;
    }
    .ingredients-main-screen__title{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .order-ingredients__info-item-grid,.order-drink__header{
        grid-template-columns: 75px 60px 80px 70px;
        gap: 10px 10px;
    }
    .order-ingredients__info-item p:nth-child(3),
    .order-drink__header p:nth-child(3){
        text-align: center!important;
    }
    .ingridients-buttons-group{
        flex-direction: column;
        width: 100%;
    }
    .ingridients-buttons-group label,
    .ingridients-buttons-group form,
    .ingridients-buttons-group a{
        width: 100%;
        justify-content: center;
        font-size: 16px;
    }
    .btns-column{
        flex-direction: column;
        width: 100%;
        gap: 10px;
        align-items: center;
    }
    .btns-column a{ 
        width: 100%;
    }
}

nav div:first-of-type,
nav div>div:first-of-type{
    display: none;
}

nav svg{
    width: 20px;
    height: 20px;
}

nav a,nav span{
    color: black;
    font-family: "PT-Sans";
    text-decoration: none;
    font-size: 16px;
}

nav .inline-flex {
    display: flex;
    align-items: center;
    gap: 10px;
}