.cmplz-video.cmplz-iframe-styles{background-color:transparent}.cmplz-video.cmplz-hidden{visibility:hidden !important}.cmplz-blocked-content-notice{display:none}.cmplz-placeholder-parent{height:inherit}.cmplz-optin .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optin .cmplz-wp-video .cmplz-blocked-content-notice,.cmplz-optout .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optout .cmplz-wp-video .cmplz-blocked-content-notice{display:block}.cmplz-blocked-content-container,.cmplz-wp-video{animation-name:cmplz-fadein;animation-duration:600ms;background:#FFF;border:0;border-radius:3px;box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15);display:flex;justify-content:center;align-items:center;background-repeat:no-repeat !important;background-size:cover !important;height:inherit;position:relative}.cmplz-blocked-content-container.gmw-map-cover,.cmplz-wp-video.gmw-map-cover{max-height:100%;position:absolute}.cmplz-blocked-content-container.cmplz-video-placeholder,.cmplz-wp-video.cmplz-video-placeholder{padding-bottom:initial}.cmplz-blocked-content-container iframe,.cmplz-wp-video iframe{visibility:hidden;max-height:100%;border:0 !important}.cmplz-blocked-content-container .cmplz-custom-accept-btn,.cmplz-wp-video .cmplz-custom-accept-btn{white-space:normal;text-transform:initial;cursor:pointer;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:200px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-custom-accept-btn:focus,.cmplz-wp-video .cmplz-custom-accept-btn:focus{border:1px dotted #cecece}.cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-wp-video .cmplz-blocked-content-notice{white-space:normal;text-transform:initial;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:300px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links{display:block;margin-bottom:10px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links a,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links a{color:#fff}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body{display:block}.cmplz-blocked-content-container div div{display:none}.cmplz-wp-video .cmplz-placeholder-element{width:100%;height:inherit}@keyframes cmplz-fadein{from{opacity:0}to{opacity:1}}body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
} #main-container {
display: flex;
flex-wrap: wrap; max-width: 1200px;
margin: 20px auto;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
} #order-list {
flex: 2;
background-color: #f9f9f9;
padding: 20px;
border-right: 1px solid #ddd;
border-radius: 8px;
margin-right: 10px;
}
#order-list h3 {
text-align: center;
font-size: 18px;
color: #333;
margin-bottom: 15px;
}
#product-list {
list-style-type: none;
padding: 0;
margin: 0;
}
#product-list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid #ddd;
}
#product-list .remove-btn {
background-color: #e74c3c;
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
}
#product-list .remove-btn:hover {
background-color: #c0392b;
} #total-tonnage {
text-align: center;
font-weight: bold;
color: #333;
margin-top: 20px;
} #quote-form {
flex: 3;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#quote-form h2 {
text-align: center;
font-size: 20px;
color: #444;
margin-bottom: 20px;
}
#quote-form label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
#quote-form input,
#quote-form select,
#quote-form textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
} #quote-form button {
background-color: #3498db;
color: white;
border: none;
padding: 12px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
width: 100%;
margin-top: 10px;
}
#quote-form button:hover {
background-color: #2980b9;
}
#quote-form button:disabled {
background-color: #bbb;
cursor: not-allowed;
} @media (max-width: 768px) {
#main-container {
flex-direction: column;
padding: 10px;
}
#order-list,
#quote-form {
flex: none;
width: 100%;
margin: 0;
}
#quote-form input,
#quote-form select,
#quote-form textarea {
font-size: 14px;
}
#quote-form button {
font-size: 14px;
}
}    body, html {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
background-color: #f4f4f4;
}
.weight-calculator-container {
max-width: 1200px;
margin: 30px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
} h1 {
text-align: center;
color: #333;
margin-bottom: 20px;
} .navigation-menu {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-bottom: 20px;
}
button {
padding: 10px 15px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
} .profile-buttons {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
margin-bottom: 20px;
}
.profile-btn {
padding: 15px 20px;
font-size: 16px;
border: none;
background-color: #f0f0f0;
color: #333;
border-radius: 5px;
cursor: pointer;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.profile-btn:hover {
background-color: #e74c3c;
color: white;
transform: scale(1.1);
}
.profile-btn.selected {
background-color: #c0392b;
color: white;
} .profile-form {
text-align: center;
margin-bottom: 20px;
}
.calculation-result {
text-align: center;
padding: 20px;
background-color: #ecf0f1;
border-radius: 10px;
margin-top: 20px;
}