#myModal-ingredient-buy{}

#myModal-ingredient-buy .modal-content .modal-header{display:block;}
#myModal-ingredient-buy .modal-content .modal-header .modal-title{padding-bottom:5px; position:relative; font-size:18px; color:var(--color-blue)}
#myModal-ingredient-buy .modal-content .modal-header .modal-title:before{content:'Nguyên liệu món:'; padding-right:5px; font-weight:500; opacity:.7; color:var(--color); font-size:17px;}
#myModal-ingredient-buy .modal-content .modal-body{border-bottom:1px solid var(--color-border); padding:50px 5px 0 5px; overflow:hidden; transition:.3s;}
#myModal-ingredient-buy .modal-content .modal-body .wrap-nav{width:100%; display:flex; margin:0 ; padding: 10px 0; height:50px; float:left; left:0; top:0; position:absolute; border-bottom:1px solid var(--color-border); }
#myModal-ingredient-buy .modal-content .modal-body .wrap-nav a{flex:1; padding: 0px 20px; position:relative; border-right:1px solid var(--color-border); transition:.3s; color:var(--color)}
#myModal-ingredient-buy .modal-content .modal-body .wrap-nav a:before{font-family: "Font Awesome 5"; font-weight: 400; font-size:16px; padding-right:8px; color:var(--color-green)}
#myModal-ingredient-buy .modal-content .modal-body .wrap-nav a:first-child:before{content: "\f81e";}
#myModal-ingredient-buy .modal-content .modal-body .wrap-nav a:first-child:after{font-family: "Font Awesome 5"; font-weight: 400; font-size:16px; content:"\f340"; position:absolute; right:10px; transition:.3s;}
#myModal-ingredient-buy .modal-content .modal-body .wrap-nav a:nth-child(2):before{content: "\f2e6";}
#myModal-ingredient-buy .modal-content .modal-body .wrap-nav a:nth-child(3):before{content:"\f560";}
#myModal-ingredient-buy .modal-content .modal-body .wrap-nav a.active:nth-child(3):before{content: "\f00c"; background:var(--color-blue); box-shadow: 0 0 0 1px var(--color-blue);}
#myModal-ingredient-buy .modal-content .modal-body .panel-ingredient{width:286px; height:calc(100% - 50px); position:absolute; top:50px; left:-50px; border-right:4px solid var(--color-border); padding: 0 20px; overflow:auto; transition:.3s; opacity:0; visibility:hidden; pointer-events:none;}
#myModal-ingredient-buy .modal-content .modal-body ul.list-products{margin:0; padding:0; list-style:none; display:flex; overflow:auto; width:100%; height:100%  }
#myModal-ingredient-buy .modal-content .modal-body ul.list-products li{width:230px; border-left:1px solid var(--color-border)}
#myModal-ingredient-buy .modal-content .modal-body ul.list-products li:first-child{border:none;}
#myModal-ingredient-buy .modal-content .modal-body.show-ingredient{padding-left:290px;}
#myModal-ingredient-buy .modal-content .modal-body.show-ingredient .wrap-nav a:first-child:after{content:"\f33e"}
#myModal-ingredient-buy .modal-content .modal-body.show-ingredient .panel-ingredient{left:0; opacity:1; visibility:initial; pointer-events:initial}

ul.list-number{width:100%; margin:5px 0 0 0px; padding:0; list-style:none; float:left;}
ul.list-number li{width:100%; margin: 0; float:left; position:relative; line-height:22px; font-size:15px; display:table;padding: 11px 0 11px 25px; border-top:1px solid var(--color-border);}
ul.list-number li:first-child{border:none;}
ul.list-number li:before{text-align:left; position:absolute; left:0; width:25px; opacity:.7 }
ul.list-number li b,
ul.list-number li strong{display:table-cell; vertical-align:middle; position:relative; vertical-align:top; min-width:60px; font-weight:400 }
ul.list-number li i,
ul.list-number li em{display:table-cell; vertical-align:middle; position:relative; text-align:right; font-style:normal; vertical-align:top; font-weight:500; }
ul.list-number li:nth-child(1):before{content:'1.';}
ul.list-number li:nth-child(2):before{content:'2.';}
ul.list-number li:nth-child(3):before{content:'3.';}
ul.list-number li:nth-child(4):before{content:'4.';}
ul.list-number li:nth-child(5):before{content:'5.';}
ul.list-number li:nth-child(6):before{content:'6.';}
ul.list-number li:nth-child(7):before{content:'7.';}
ul.list-number li:nth-child(8):before{content:'8.';}
ul.list-number li:nth-child(9):before{content:'9.';}
ul.list-number li:nth-child(10):before{content:'10.';}
ul.list-number li:nth-child(11):before{content:'11.';}
ul.list-number li:nth-child(12):before{content:'12.';}
ul.list-number li:nth-child(13):before{content:'13.';}
ul.list-number li:nth-child(14):before{content:'14.';}
ul.list-number li:nth-child(15):before{content:'15.';}

@media (min-width:992px){
   #myModal-ingredient-buy .modal-dialog{max-width: 970px;} 
}