.MVC-volume-container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 1200px;
text-align: center;
margin: auto;
margin-top: 50px;
}
.MVC-volume-container h1 {
margin-bottom: 20px;
color: #ff0000;
font-size: 24px !important;
font-weight: normal;
}
.MVC-main-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 50px;
}
.MVC-content {
flex: 1;
min-width: 70%;
max-width: 80%;
box-sizing: border-box;
}
.MVC-sidebar {
flex: 1;
min-width: 20%;
max-width: 25%;
box-sizing: border-box;
background-color: #f9f9f9;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-left: 20px;
}
#MVC-selectedItems {
height: 350px;
overflow: auto;
scrollbar-width: thin;
scrollbar-color: #ff0000 #f4f4f4;  
font-weight: normal;
}
.MVC-category-tabs {
display: flex;
overflow-x: auto;
margin-bottom: 20px;
padding: 10px 0;
border-bottom: 2px solid #ddd;
scrollbar-width: thin; scrollbar-color: #ff0000 #f4f4f4; }
.MVC-category-tabs::-webkit-scrollbar {
height: 8px;
}
.MVC-category-tabs::-webkit-scrollbar-thumb {
background-color: #ff0000;
border-radius: 10px;
}
.MVC-category-tabs::-webkit-scrollbar-track {
background-color: #f4f4f4;
}
#MVC-volumeForm {
max-height: 500px;
overflow: auto;
scrollbar-width: thin; scrollbar-color: #ff0000 #f4f4f4; }
#MVC-volumeForm::-webkit-scrollbar {
height: 8px;
}
#MVC-volumeForm::-webkit-scrollbar-thumb {
background-color: #ff0000;
border-radius: 10px;
}
#MVC-volumeForm::-webkit-scrollbar-track {
background-color: #f4f4f4;
}
.MVC-tab {
background-color: #f4f4f4;
border: 1px solid #ddd;
border-radius: 4px;
padding: 10px 20px;
cursor: pointer;
margin: 0 5px;
font-size: 16px;
color: #000;
flex: 0 0 auto;
transition: background-color 0.3s, color 0.3s;
}
.MVC-tab.active {
background-color: #ff0000;
color: white;
border-color: #ff0000;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.MVC-tab:hover:not(.active) {
background-color: #e0e0e0;
}
.MVC-btn {
background-color: #ff0000;
color: white;
border-color: #ff0000;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-weight: bold;
}
#MVC-add-other-item {
margin-top: 15px;
}
.MVC-btn:hover {
background-color: #cc0000;
}
.MVC-leadgen {
margin-top: 50px;
text-align: center;
}
.MVC-leadgen H2 {
font-style: normal;
font-size: 24px !important;
line-height: 1.5;
color: #ff0000;
margin: 0px;
margin-bottom: 30px;
}
.MVC-leadgen p {
color: #333;
font-size: 18px;
margin-bottom: 20px;
}
.MVC-form-group {
margin-bottom: 15px;
text-align: left;
display: flex;
flex-direction: column;
align-items: center;
max-width: 325px;
margin: auto;
}
.MVC-form-group label {
display: block;
margin-bottom: 5px;
width: 100%;
max-width: 600px;
}
.MVC-form-group input[type="text"],
.MVC-form-group input[type="email"] {
width: 100%;
max-width: 600px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.other-item-form {
margin: 0px;
}
#MVC-contactBtn {
background-color: #ff0000;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
margin-top: 20px;
width: 100%;
max-width: 300px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s;
font-weight: bold;
}
#MVC-contactBtn:hover {
background-color: #cc0000;
}
.MVC-result {
margin-top: 20px;
font-size: 18px;
color: #333;
}
.MVC-items {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.MVC-item {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
width: 20%;
margin: 10px;
padding: 20px;
text-align: center;
box-sizing: border-box;
transition: transform 0.3s;
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 300px; }
.MVC-item:hover {
transform: translateY(-5px);
}
.MVC-item i, .MVC-item img.MVC-item-image {
font-size: 50px;
max-height: 100px;
color: #000;
margin-bottom: 25px;
}
.MVC-item img.MVC-item-image {
max-width: 100px;
height: auto;
display: block;
margin: 0 auto 10px;
}
.MVC-item img {
max-height: 100%;
max-width: 125px;
margin: auto;
}
.MVC-item p {
margin: 10px 0;
color: #000;
font-weight: bold;
min-height: 50px; display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.MVC-quantity {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.MVC-quantity .MVC-btn {
background-color: #ff0000;
color: white;
border: 1px solid #ff0000;
border-radius: 0;
padding: 10px;
cursor: pointer;
width: 40px;
height: 50px;
}
.MVC-quantity .MVC-btn:first-of-type {
border-radius: 4px 0 0 4px;
}
.MVC-quantity .MVC-btn:last-of-type {
border-radius: 0 4px 4px 0;
}
.MVC-quantity input[type="number"] {
width: 60px;
text-align: center;
border: 1px solid #ff0000;
border-left: none;
border-right: none;
background-color: #fff;
height: 50px;
padding: 0;
margin: 0;
box-sizing: border-box;
border-radius: 0px;
-moz-appearance: textfield; }
.MVC-quantity input[type="number"]::-webkit-outer-spin-button,
.MVC-quantity input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
#MVC-calculateBtn {
background-color: #000000;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
margin-top: 20px;
width: 100%;
max-width: 600px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s;
}
#MVC-calculateBtn:hover {
background-color: #333333;
}
.MVC-result {
margin-top: 20px;
font-size: 18px;
color: #333;
}
.MVC-divider {
width: 75%;
height: 1px;
background-color: #ccc;
margin: 50px auto;
}
.MVC-total-volume {
margin-top: 20px;
padding-top: 10px;
border-top: 1px solid #ccc;
text-align: center;
font-weight: bold;
}
.MVC-sidebar h2 {
font-style: normal;
font-size: 24px !important;
line-height: 1.5;
color: #212121;
margin: 0px;
}
.MVC-scroll-to-form-btn {
background-color: #ff0000;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
margin-top: 20px;
width: 100%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s;
font-weight: bold;
}
.MVC-scroll-to-form-btn:hover, .MVC-scroll-to-form-btn:focus {
background-color: #cc0000;
}
#MVC-other-quantity {
width: 100%;
}
.MVC-loading-spinner {
border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 2s linear infinite;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@media (max-width: 1024px) {
.MVC-item {
width: 45%;
}
.MVC-sidebar {
margin-left: 0;
margin-top: 20px;
flex: 0 0 100%;
max-width: 100%;
}
.MVC-content {
flex: 0 0 100%;
}
}
@media (max-width: 768px) {
#MVC-selectedItems {
height: 300px;
}
.MVC-item {
width: 45%;
}
.MVC-category-tabs {
justify-content: flex-start;
overflow-x: auto;
white-space: nowrap;
}
.MVC-tab {
flex: 0 0 auto;
margin-bottom: 10px;
}
.MVC-main-container {
flex-direction: column;
}
.MVC-sidebar {
margin-left: 0;
margin-top: 20px;
order: 2;
max-width: 100%;
}
.MVC-content {
order: 1;
max-width: 100%;
}
}
@media (max-width: 480px) {
.MVC-item {
width: 100%;
}
.MVC-tab {
margin-bottom: 10px;
}
.MVC-sidebar {
flex: 0 0 100%;
max-width: 100%;
}
.MVC-content {
flex: 0 0 100%;
max-width: 100%;
}
}