#cost-container{
 margin: 60px auto;
 width: 90%;
 height: 705px;
 overflow-y: hidden;
 overflow-x: hidden;   
}
.container-all-cost{
 display: none;
 width: 100%;
 height: 705px;
 justify-content:center;
 border: 5px solid #7f7c7c; 
}
#cost-table{
 display: flex;
 flex-direction: column;
 flex-basis: 60%;
 height: 700px; 
}
.table-title{
 height: fit-content;
 font-size: 26px;
 background-color: wheat;
 font-family:Verdana, Geneva, Tahoma, sans-serif;  
}
.table-title  p{
 padding: 5px;
 height: fit-content;
 text-align: center;  
}
.table-wrap{
 height: 600px;
 background-color: #b87332;
 overflow-y: scroll;
}
#cost-table table {
  width: 100%;
  border-collapse: collapse;
}
#cost-table table .number{
 padding: 10px;
 width: fit-content;
 font-size: 25px;
 color:blue;
 background-color:#c0c0c0;
}
#cost-table table .name {
 padding: 10px;
 width: 80%;
 font-size: 25px; 
 color:blue;
 background-color: #c0c0c0;   
}
#cost-table table .price {
 padding: 10px;
 width: fit-content;
 font-size: 25px;
 color:blue;
 background-color: #c0c0c0;   
}
#cost-table table td{
 padding: 10px;
 font-size: 18px;
}
#cost-photo{
flex-basis:  40%;
height: 700px;
overflow-x:hidden;
overflow-y: scroll;
}
#cost-photo-row img{
 display: block;
 margin: 0px auto;
 margin-bottom: 10px;
 width:100%;
 height: 100%;
}
 tr:nth-child(odd){background-color: rgb(244, 245, 224);}
 tr:nth-child(even){background-color: rgb(250, 250, 243);}
#cost-photo-row{
 display: flex;
 flex-direction: column;
 height: inherit;   
}
#button-wrapper-cost{
position: relative;
}
#slideLeftCost{
 display:none;
 position: absolute;
 top:0px;
 left: 5%;
 height: 50px;
 width: 50px;
 font-size: 30px;
 font-weight:600;
 border: none;
 background-color: red;
 cursor: pointer;
} 
#slideRightCost{
position: absolute;
top:0px;
right: 5%; 
height: 50px;
width: 50px;
font-size: 30px;
font-weight:600;
background-color:red;
border: none;
cursor: pointer;
}
@media(max-width:1368px){
#cost-container{
  width: 100%;
}
#slideLeftCost{
left: 0%;
} 
#slideRightCost{
position: absolute;
right: 0%; 
}
}
@media(max-width:1024px){
#cost-container{
width: 100%;
margin: 40px auto;
}  
#slideLeftCost{
 top:-10px;
} 
#slideRightCost{
top:-10px;
}
}
@media(max-width:768px){
#slideLeftCost{
top:-10px;
} 
#slideRightCost{
top:-10px;
}
#cost-container{
width: 100%;
margin: 40px auto;
display: flex;
overflow-x: scroll;
scroll-snap-type:x mandatory;
}  
.container-all-cost{
 display: block;
 margin:0px;
 min-width: 100%;
 scroll-snap-align: center;
}
#cost-container{
 width: 100%;
 height: fit-content;
}
.container-all-cost{
  height: fit-content;
  flex-wrap: wrap;
  flex-direction: column;
  border: none; 
}
#cost-table{
height: fit-content;
flex-basis: 100%;
border:3px solid #c0c0c0;  
}
.table-wrap{
width: 100%;
}
#cost-photo{
  display: none;
flex-basis:  100%;
height: 400px;
scroll-snap-type:y mandatory;
}
#cost-photo-row img{
height: auto;
scroll-snap-align: center;
}
}
@media(max-width:478px){
#cost-container{
 margin:0px auto;
 margin-bottom: 20px;
}
.container-all-cost{
 margin: 10px auto;   
}
.table-title{
 margin: auto 0px;
 width: inherit;
 font-size: 20px;
}
#cost-table table .number{
 padding: 5px;
 width: 10%;
 font-size: 22px;
}
#cost-table table .name {
 padding: 5px;
 width: 70%;
 font-size: 22px;
}
#cost-table table .price {
 padding: 5px;
 width: 20%;
 font-size: 22px;
}
#cost-table table td{
 padding: 4px;
 font-size: 16px;
}
#cost-photo-row img:nth-child(even) {
 display: none;
}
#slideLeftCost{display: none;
 top:0px;
 left: 0px;
 height: 30px;
 width: 30px;
} 
#slideRightCost{display: none;
top:0px;
right: 0px;
 height: 30px;
 width: 30px;
}
}