.main{
    position: relative;
    z-index: 1000;
    color: var(--text-color);
    margin-bottom: -150px;
    font-family: 'iranSans';
    padding-bottom:25rem;
}
/********** secondary header *******/
div.secondary__header{
    width:85%;
    height: 250px;
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
}
.main-box{
    display:flex;
    flex-direction: column;
    align-items: center;

}
.box-menu {
    height: 80px;
    width: 80px;
    border-radius: 30px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    background: rgb(254, 156, 50);
    background: radial-gradient(circle, rgb(248, 167, 85) 0%, rgba(253, 126, 8, 1) 67%);
}

.box-menu img{
    width:70px;
    height:70px;
    line-height: 50px;
    margin: auto;
    display:block;
}
p.menu__title{
    font-weight: 600;
    margin-top: 1rem;
    color: var(--text-color);
}
.management__invite{
    width:90%;
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin:auto;
    border: 2px solid var(--primary-color);
    border-radius: 15px;
    padding: 2rem 1rem;
}
.div__single{
    position: relative;
}
.row__union{
    display: flex;
    justify-content: space-evenly;
    align-items: baseline;
}
.phone__label{
    width:100px;
    font-weight: 600;
}
.single__phone,.group__phone{
    margin-right: unset!important;
}
.single__phone::placeholder{
    font-size: 1.2rem;
    text-align: left;
    padding-left:5rem;
    font-weight: 900;
}
.group__phone::placeholder{
    font-size: 1.2rem;
}
.single__image{
    width:30px;
    height: 30px;
    position: absolute;
    left: 2.5rem;
    top:0.6rem;
}
.group__image{
    width:30px;
    /*height: 40px;*/
    position: absolute;
    left: 2.5rem;
    top:0.3rem;
    cursor:pointer;
}
.download_sample{
    font-size: 0.8rem;
    position: absolute;
    left:2rem;
    top:4rem;
    color: var(--text-color);
    padding-top: 0rem;
}
.single__invite{
    width:120px;
    border-radius: 20px;
    background-color: var(--primary-color);
    border: 3px solid var(--primary-color);
    color: var(--white-color);
    padding:0.5rem 1.5rem;
    text-align: center;
    font-size: 1.2rem;
    font-family: var(--primary-font)!important;
    cursor:pointer;
}
/*********************************/
.food__row{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 5rem  0 ;
    font-family: var(--primary-font)!important;
    font-size: 1.1rem;
    border: 5px solid var(--primary-color);
    border-radius: 60px;
    margin-top:5rem;
}
.column__right{
    width:30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-right: 1rem;
    margin-top:1rem;
}
.column__middle{
    width:50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 1rem;
    margin-right: 1rem;
}
.column__left{
    width:20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /*padding-right: 1rem;*/
}
.food__items,.counter-container{
    width: 100%;
}
.form-select,form input,textarea{
    text-align: right;
    width: 90%;
    margin-right: 2rem;
    border: 2px solid var(--primary-color);
    border-radius: 20px;
    padding: 12px 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 1rem;
}
.select2-container--krajee-bs5[dir=rtl] .select2-selection--multiple,.select2-container--krajee-bs5[dir="rtl"] .select2-selection--single{
    width: 90%;
    height: 50px;
    margin-right: 2rem;
    background-color: white;
    border: 2px solid var(--primary-color);
    border-radius: 20px;
    padding: 12px 1rem;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--text-color);
}
.form-select2{
    width: 90%!important;
    height: 50px;
    margin-right: 2rem;
    margin-top: 4rem;
    background-color: white!important;
    border: 2px solid var(--primary-color)!important;
    border-radius: 20px!important;
    padding: 12px 1rem!important;
    font-size: 1.1rem!important;
    margin-bottom: 1rem!important;
    font-weight: 600!important;
    color: var(--text-color)!important;
}
.select2-container--krajee-bs5[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    color:var(--text-color);
}
.select2-container .select2-search--inline .select2-search__field {
    margin: unset!important;
}
.select2-container--krajee-bs5 .select2-selection--multiple .select2-search--inline .select2-search__field {
    line-height: unset!important;
    font-weight: 600;
    font-family: var(--primary-font)!important;
}
.food__price,.food__discount,.food__count,.equip__count{
    display: flex;
    justify-content: space-evenly;
    position: relative;

}
.food__amount,.food__dis,.equip__count{
   text-align: left;
}
.food__amount__label,.food__discount__label{
    position: absolute;
    right: 3rem;
    top: 1rem;
    z-index: 50000;
    font-weight: 600;
    font-size: 1.1rem;
}
.counter-container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
}
.counter-container .increase,.counter-container .increase2{
    background: #FF7700;
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    color: white;
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 1rem;
    font-weight: 600;
    position: absolute;
    text-align: center;
    left: 4.5rem;
    top:1.3rem;
    cursor: pointer;
    text-decoration: none;
    z-index: 555;
}
.counter-container .decrease,.counter-container .decrease2{
    background: #FF7700;
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    color: white;
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    position: absolute;
    left: 1rem;
    top:1.3rem;
    cursor: pointer;
    text-decoration: none;
}
.food__dis,.equip__count{
    padding-left: 2.5rem;
    padding-top:1.1rem;
    font-size: 1rem;
}
.unit__code {
    text-align: right;
    width:90%;
    border: 2px solid var(--primary-color);
    border-radius: 20px;
    padding: 6px 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
}
.unit__code p{
    padding:0.5rem;
    margin-bottom: 0!important;
}

.unit__code .code{
    padding:0.5rem;
    margin-bottom: 0!important;
    text-align: left;
    color: var(--primary-color);
}
.row__item{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-left: 4rem;
}
.food__items1{
    width:40%;
    margin-top: 0.8rem;
}
.food__items3{
    width:40%;
    margin-top: 1.3rem;
}
.food__items2{
    width:60%;
    margin-top: 0.8rem;
}
.final__price {
    text-align: right;
    width: 100%;
    border: 2px solid var(--primary-color);
    border-radius: 20px;
    padding: 6px 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
}
.final__price p{
    padding:0.5rem;
    margin-bottom: 0!important;
}

.final__price .code{
    padding:0.5rem;
    margin-bottom: 0!important;
    text-align: left;
    color: var(--primary-color);
}
.upload-icon,.upload-icons {
    width: 130px;
    height: 130px;
    display: block;
    border-radius: 20px;
    object-fit: cover;
}
.image-preview-container {
    max-height: 200px; 
    overflow-y: auto; 
    padding: 10px; 
    display: flex; 
    flex-wrap: wrap; 
}
.upload-input {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}
.dropzone {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    margin-top:1rem;
}
.upload-label{
    margin-top:1rem;
}
.btn-orange {
    background-color: #FF7700;
    border: 1px solid var(--primary-color);
    color: white;
    width: 150px;
    display:block;
    margin-top: 6.5rem;
    padding: 13px 1rem;
    border-radius: 20px;
}
.row__food__item{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem 1rem 0;
    font-family: var(--primary-font)!important;
    font-size: 1.3rem;
    border: 5px solid var(--primary-color);
    border-radius: 29px;
    margin-top: 3rem;
    position: relative;
    font-weight: 600;
}
.row__food__item a{
    font-size: 1.3rem;
    text-decoration: none;
    color: var(--text-color);
}
.row__food__item a:hover{
    color: var(--text-color);
}
.row__food__item span:nth-child(1){
    width:100px;
}
.row__food__item span:nth-child(2){
    width:200px;
    font-size: 1.6rem;
}
.row__food__item span:nth-child(3){
    width:150px;
}
.row__food__item span:nth-child(4){
    width:100px;
}
.row__food__item a{
    width:150px;
}
.food__image{
    position: absolute;
    left: -2px;
    height: 73px;
    width: 75px;
    object-fit: cover;
    top: -1px;
    border-radius: 25px;
}
.closef{
    width:30px;
    height:30px;
    border-radius:100%;
    color: var(--white-color) !important;
    font-size:2rem!important;
    text-align:center;
    line-height:30px;
    position:absolute;
    left:10px;
    top:5px;
    z-index:1000;
    cursor:pointer;
}
#myModalDetails,#myModalDetails2,#myModalDetails3,#myModalDetails4,#myModalDetails5{
    width:80%;
    height: 700px;
    padding:2rem;
    font-size:1.2rem;
    position:absolute;
    /*top:180px;*/
    right:100px;
    z-index: 1000000;
}
#foodList{
    position: relative;
}
.modal__row{
    width:100%;
    display:flex;
    justify-content: space-between;
    padding: 1rem 0 0 1rem;
}
form h3{
    background-color: var(--secondry-color);
    padding:1rem;
    color: var(--white-color);
}
form .modal__section{
    border: 5px solid var(--secondry-color);
    font-weight: 600;
}
.modal__meal{
    color: var(--secondry-color);
    padding-right: 2rem;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0

}
.modal__final__price{
    text-align: right;
    width: 90%;
    border: 2px solid var(--primary-color);
    border-radius: 20px;
    padding: 6px 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right:2rem;
}
.modal__final__price p{
    padding:0.5rem;
    margin-bottom: 0!important;
}

.modal__final__price .code{
    padding:0.5rem;
    margin-bottom: 0!important;
    text-align: left;
    color: var(--primary-color);
}
.modal__food__discount{
    display: flex;
    justify-content: space-evenly;
    position: relative;
    margin-left: 1rem;
}
.modal__food__dis{
    padding-left: 1rem;
    padding-top:1.1rem;
    font-size: 1.2rem;
    text-align: left;
}
.modal__row textarea{
    margin-right: 2rem;
}
.btnmodal-orange {
    background-color: #FF7700;
    border: 1px solid var(--primary-color);
    color: white;
    width: 150px;
    display:block;
    margin: 2rem auto;
    padding: 13px 1rem;
    border-radius: 20px;
}

#toast-container>.toast-success {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==)!important;
}
#toast-container>div {
    position: relative;
    pointer-events: auto;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 15px 15px 15px 50px;
    width: 300px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-position: 15px center;
    background-repeat: no-repeat;
    -moz-box-shadow: 0 0 12px #999;
    -webkit-box-shadow: 0 0 12px #999;
    box-shadow: 0 0 12px #999;
    color: #fff;
    opacity: 1!important;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
    filter: alpha(opacity=90);
}

.toast-success {
    background-color: #51a351!important;
}
.toast-error {
    background-color: #BD362F!important;
}
/****** responsive ********/
@media screen and (max-width:1200px) {
    .management__invite {
        width: 90%;
        height: inherit;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .row__union {
        margin-bottom: 1rem;
    }

    div .input-group {
        position: unset;
        display: flex;
    }
}
@media screen and (max-width:992px) {
    div.secondary__header {
        width: 95%;
    }
    .food__row {
        flex-wrap: wrap;
    }
    .column__right {
        width: 40%;
        margin-top:0;
    }
    .unit__code {
        font-size: 1rem;
    }
    .column__left {
        width: 80%;
        display: flex;
        flex-direction: row;
    }
    .btn-orange {
        margin-top: 3rem;
    }
    .row__food__item {
        flex-wrap: wrap;
    }
    .food__image {
        height: 80px;
        width: 80px;
        top: 26px;
        left: 0px;
    }
    .modal__row {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    #myModalDetails,#myModalDetails2,#myModalDetails3,#myModalDetails4,#myModalDetails5 {
        right: 70px;
    }
    .food__price, .food__discount {
        display: block;
    }
    .counter-container {
        display: block;
    }
    .modal__food__discount {
        margin-left: 0;
    }
    .modal__meal {
        margin-bottom: 2rem;
    }
}
@media screen and (max-width:768px) {
    .column__right {
        width: 100%;
    }
    .food__items {
        margin-left: 1.5rem;
    }
    .column__middle {
        width: 100%;
        padding-right: 2rem;
    }
    .counter-container .decrease,.counter-container .decrease2 {
        left: 3rem;
    }
    .food__dis,.equip__count {
        padding-left: 3.5rem;
    }
    .counter-container .increase,.counter-container .increase2 {
        left: 7.5rem;
    }
    .row__food__item span:nth-child(1) {
        width: 50px;
    }
    .row__food__item span:nth-child(2) {
        width: 150px;
        font-size: 1.2rem;
    }
    .row__food__item span:nth-child(5) {
        width: 150px;
        font-size: 1.5rem;
        margin-top:2rem;
    }
    .row__food__item a {
        margin-top:2rem;
    }
    .food__image {
        height: 80px;
        top: 48px;
    }
    .sidebar-a .select2-container--krajee-bs5[dir=rtl] .select2-selection--multiple, .sidebar-a .select2-container--krajee-bs5[dir="rtl"] .select2-selection--single {
        padding:0;
        height:unset;
        margin-right:0!important;
        font-weight:unset!important;
        font-size: unset!important;
    }
    .food__items .select2-container--krajee-bs5 .select2-selection--single .select2-selection__placeholder{
        color:#999!important;
    }
    .food__items .select2-container--krajee-bs5[dir="rtl"] .select2-selection--single{
        padding:12px 1rem!important;
    }
}
@media screen and (max-width:535px) {
    .row__union {
        flex-direction: column;
        align-items: center;
        width: 100%;
        /*border-bottom: 1px dashed var(--secondry-color);*/
    }

    .single__invite {
        margin: 0.5rem;
    }

    hr {
        display: block !important;
        width: 90%;
        margin-bottom: 1rem;
    }

    .single__phone, .group__phone {
        margin: auto !important;
        display: block;
    }

    .div__single {
        width: 100%;
        margin: 1rem auto;
    }
}
@media screen and (max-width:511px) {
    #myModalDetails,#myModalDetails2,#myModalDetails3,#myModalDetails4,#myModalDetails5 {
        right: 40px;
    }
    .row__food__item span:nth-child(4) {
        margin-top: 2rem;
    }
    .row__food__item a {
        margin-left: 3rem;
    }
    .food__image {
        top: 109px
    }
    .column__right {
        padding-right: 0;
    }
    .food__items1, .food__items3{
        width: 50%;
    }
}
@media screen and (max-width:450px) {
    div.secondary__header {
        width: 80%;
        flex-wrap: wrap;
        margin-top:3rem;
        margin-bottom:3rem;
    }
    .main-box {
        width: 50%;
    }
    p.menu__title {
        margin-bottom: 2rem;
    }
    .counter-container .decrease {
        left: 2rem;
    }
    .column__left {
        width: 100%;
    }
    .btn-orange {
        margin-left: 0.5rem;
    }
    .row__item {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding-left: 2rem;
        flex-wrap: wrap;
    }
    .food__items1,.food__items3 {
        width: 100%;
    }
    .food__items2 {
        width: 100%;
        margin-top: 0.8rem;
    }
    .unit__code {
        text-align: right;
        width: 100%;
    }
    .column__left {
        width: 100%;
        flex-direction: column;
    }
}
@media screen and (max-width:400px) {
    .unit__code {
        width: 100%;
    }
    .column__middle {
         padding-right: 1rem;
    }
    .row__food__item {
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .row__food__item span:nth-child(1),.row__food__item span:nth-child(3),.row__food__item span:nth-child(4),.row__food__item span:nth-child(5),.row__food__item span:nth-child(2) {
        width: 100%;
        text-align: center;
        padding-bottom: 1.5rem;
        font-size: 1.5rem;
    }
    .row__food__item span:nth-child(5),.row__food__item span:nth-child(4) {
        margin-top: 0;
    }
    .row__food__item a {
        display:block;
        width: unset;
        margin: 1rem auto;
    }
    .food__image {
        width: 100px;
        height: 100px;
        top: 0;
        right: 0;
    }
    #myModalDetails,#myModalDetails2,#myModalDetails3,#myModalDetails4,#myModalDetails5 {
        width: 100%;
        padding:0;
        right: 0;
    }

    }
@media screen and (max-width:350px) {
    div.secondary__header {
        margin-bottom:3rem;
    }
    p.menu__title {
        font-size:0.9rem;
    }
    .column__left {
        flex-direction: column;
    }
    .modal__row {
        padding: 1rem 0 0 2rem;
    }
}

.newElem{
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.image-container{
    position: relative;
    
}
 .image-container .delete-btn{
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    background: coral;
    border-radius: 5px;
    color: #fff;
    padding: 0 0.3rem;
}