/* missing classes: waittime deliveryreason builddescription parts cost */
html {
height: 100%;
width: 100%;
}
* {
box-sizing: border-box;
}
@font-face {
font-family: titlefont;
src: url(../fonts/roboto.ttf);
font-display: swap;
}
@font-face {
font-family: poppins;
src: url(../fonts/opensans.ttf);
font-display: swap;
}
h1 {
font-size: clamp(20px, 3.5vw, 48px);
}
h2 {
font-size: clamp(18px, 2.5vw, 32px);
margin-top:1em;
}
p{
font-family: poppins, serif;
font-size: clamp(16px, 1.5vw, 18px);
}
li{
font-family: titlefont, sans-serif;
font-weight: 800;
font-size: clamp(16px, 1.4vw, 25px);
color: #ffffff;
overflow-wrap: break-word;
word-wrap: break-word;
}
.review_page{
max-width: 1000px !important;
background: rgba(0, 0, 0, 0.65) !important;
}
#review-list li{
font-weight: normal;
padding-bottom:5px;
}
.supp_h1{
color:#444;
}
button {
text-decoration: none !important;
margin: 20px 0;
padding: 10px 20px;
background: #6194cb;
color: #fff;
text-align: center;
width: fit-content;
cursor: pointer;
border-radius: 6px;
font-weight: bold;
transition: background 0.3s ease;
}
button:hover {
background: #0056b3;
}
input[type="radio"]{
visibility: hidden;
height: 0;
width: 0;
}
input::placeholder {
color: #888;
font-style: italic;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 222;
font-size: 18px;
border: none;
outline: none;
background-color: #fff;
color: #000;
cursor: pointer;
padding: 15px;
border: 0.1rem solid #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#myBtn:hover {
background-color: #121d2a;
color: #fff;
}
/*
.cookie-back{
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
max-width:110%;
background-color:#002B5B;
opacity:95%;
z-index: 990;
transition: opacity 0.4s ease;
}
*/
/* Universal form input styling */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
width: calc(100% - 40px);
max-width: 400px; /* Or whatever works well in your layout */
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background-color: #f9f9f9;
font-size: 16px;
color: #222;
transition: border-color 0.3s, box-shadow 0.3s;
box-sizing: border-box;
}
/* Focus state for interactivity */
input:focus,
textarea:focus,
select:focus {
border-color: #6194cb;
box-shadow: 0 0 4px rgba(0, 123, 255, 0.4);
outline: none;
}
/* Optional: dark mode (if applicable) */
body.dark input,
body.dark textarea,
body.dark select {
background-color: #1e1e1e;
border: 1px solid #444;
color: #eee;
}
.cookie-back {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 110%;
background: radial-gradient(ellipse at center, #001930, #002B5B);
opacity: 100%;
z-index: 1990;
overflow: hidden;
transition: opacity 0.4s ease;
}
.cookie-back .orb {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 0 8px 3px rgba(0, 255, 255, 0.2);
/* animation: floatOrb 6s linear infinite;*/
opacity: 0;
}
/*
@keyframes floatOrb {
0% {
transform: translateY(100vh) scale(0.8);
opacity: 0;
}
10% {
opacity: 0.8;
}
50% {
transform: translateY(50vh) scale(1);
}
90% {
opacity: 0.6;
}
100% {
transform: translateY(-20vh) scale(0.7);
opacity: 0.2;
}
}
*/
@keyframes pulseGradient {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.1);
}
100% {
transform: rotate(360deg) scale(1);
}
}
#toggle-password {
margin: 0;
}
.stay_left {
text-align: left;
margin-left: 0;
margin-right: auto;
}
.push{
margin-left: 20px;
}
.underline {
display: inline-block; /* Make the element only as wide as its content */
/* You might need to adjust margins or padding here to control spacing around the heading */
}
.underline::after {
content: '';
display: block; /* This will now be block relative to the *shrunk* .underline element */
height: 2px;
background: linear-gradient(to right, #00ccff, #0066ff);
margin-top: 8px;
}
.highindex {
position: fixed; /* Or absolute if within a parent */
bottom: 47%;
left: 50%;
width: 95%;
z-index: 1991;
margin: 0 auto;
text-align: center;
translate: -50%; /* Alternative to transform */
}
.highindex h2{
font-size: clamp(18px, 2.0vw, 30px);
}
.cookielogo {
position: absolute;
margin: 0 auto;
max-width: 45%;
max-height: 30%;
padding: 20px;
top: 25% !important; /* Center vertically */
left: 50%; /* Center horizontally */
transform: translate(-50%, -50%); /* Correct initial positioning */
z-index:500;
}
.cookie-banner {
position: fixed;
top: 55%;
left: 50%;
transform: translateX(-50%);
background: #111;
color: #ccc;
padding: 1.5em 2em;
border: 2px solid #3c6871;
border-radius: 12px;
z-index:100000;
width: 80%;
max-width: 600px;
max-height: 40%;
overflow: auto;
text-align: center;
font-family: 'Segoe UI', sans-serif;
box-shadow: 0 0 20px rgba(0, 255, 170, 0.3);
position: fixed;
}
.cookie-banner p{
font-size: clamp(13px, 1.1vw, 16px) !important;
}
.cookie-banner a {
color: #9fc2ff;
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 500;
}
/* Glowing border circuit animation */
/*.cookie-banner::before,
.cookie-banner::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid transparent;
border-radius: 12px;
box-sizing: border-box;
z-index: -1;
pointer-events: none;
animation: sweep-border 6s linear infinite;
}*/
@keyframes pulseGradient {
0%, 100% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.05);
opacity: 0.9;
}
}
.cookie-back::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, rgba(0, 200, 255, 0.12), rgba(0, 50, 100, 0.05));
mix-blend-mode: screen;
pointer-events: none;
z-index: 1;
animation: pulseGradient 12s ease-in-out infinite;
}
@keyframes floatHex {
0% {
transform: translateY(100vh) scale(0.8) rotate(0deg);
opacity: 0;
}
10% {
opacity: 0.6;
}
50% {
transform: translateY(40vh) scale(1) rotate(180deg);
}
100% {
transform: translateY(-20vh) scale(1.1) rotate(360deg);
opacity: 0;
}
}
.hex-bokeh {
position: absolute;
width: 40px;
height: 40px;
background: linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(255, 0, 255, 0.15), rgba(255, 255, 0, 0.1));
clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 0 8px rgba(0, 255, 255, 0.2),
0 0 12px rgba(255, 0, 255, 0.1),
inset 0 0 4px rgba(255, 255, 255, 0.05);
opacity: 0;
z-index: 2;
animation: floatHex 14s linear infinite;
filter: blur(0.5px);
backdrop-filter: blur(1px);
}
.cookie-banner::before {
border-color: #00ff88;
}
.cookie-banner::after {
border-color: #00c2ff;
animation-delay: 1.5s;
}
/* Button Styling */
.cookie-banner button {
background: #00ff88;
border: none;
color: #000;
padding: 0.7em 1.5em;
margin-top: 1em;
font-size: 0.9em;
font-weight: bold;
border-radius: 6px;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease;
}
.cookie-banner button:hover {
background: #00c2ff;
transform: scale(1.05);
}
.fade-out {
opacity: 0;
transition: opacity 0.4s ease;
}
/*
@keyframes sweep-border {
0% {
clip-path: inset(0 100% 100% 0);
}
25% {
clip-path: inset(0 0 100% 0);
}
50% {
clip-path: inset(0 0 0 0);
}
75% {
clip-path: inset(100% 0 0 0);
}
100% {
clip-path: inset(0 100% 100% 0);
}
}*/
body.no-scroll {
overflow: hidden;
}
/*
@keyframes sweep-border {
0% {
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}
25% {
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
50% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
}
75% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
100% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
*/
.headline {
text-transform: uppercase;
color: #fefefe;
letter-spacing: 1px;
}
.subtext, .after-config-text, .pre-price-anchor, .after-config-sub {
font-size: clamp(16px, 1.5vw, 20px);
line-height: 1.6;
color: #e0e0e0;
}
.bigwrapper{
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
max-width:110%;
margin: 0 auto;
}
.hidden, .choices, .hideit {
display: none;
}
.contact_hidden{
display: none !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
background: none !important;
}
.customise_hidden {
display: none !important;
}
.container{
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.footer{
box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
border-top:3px solid #b5b7bb;
background-color:#717377;
background: linear-gradient(to top, #5f6063 0%, #6a6b6f 100%);
margin-bottom:10px;
padding:10px;
padding-top:20px;
margin-top:100px;
position: relative;
bottom: 0;
z-index: 111;
}
.footer-nav a {
color: #cfd1d4;
text-decoration: none;
margin: 0 15px;
font-weight: 500;
transition: color 0.2s ease;
text-underline-offset: 5px;
}
.footer-nav a:hover {
color: #ffffff;
text-decoration: underline;
}
.footertext{
/*font-size:1.2em;*/
font-size: clamp(14px, 1.4vw, 18px);
}
.footer_cookie a {
color: #9fc2ff; /* Less bright than #0000ee */
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 500;
}
.footer_cookie a:hover {
color: #ffffff;
}
.footer-gdpr a {
color: #eaeaea;
font-weight: 600;
text-decoration: none;
}
.footer-gdpr a:hover {
color: #ffffff;
text-decoration: underline;
}
.footwrapper{
max-width: 1400px;
margin: 0 auto;
width:95%;
}
.wrapper{
max-width: 1400px;
margin: 0 auto;
padding: 40px 20px;
width:95%;
min-height:50vh;
/* min-height: calc(100vh - 600px);*/
/* background: rgba(0, 0, 0, 0.15); Subtle distinction */
border-radius: 20px;
}
/*loading screen*/
.tempdull{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background-color: rgba(0, 0, 0, 0.5); /* Slight dim */
backdrop-filter: blur(5px); /* ✅ Blurs the background */
pointer-events: none; /* Prevent interaction */
z-index:100;
}
.center-container {
text-align: center; /* Center content inside this container */
}
.logo-container {
display: flex; /* Flexbox parent to prevent collapse */
/* justify-content: center; Center horizontally */
align-items: center; /* Center vertically */
width: 100%;
position: relative; /* Anchor for child absolute positioning */
padding-left: 30px;
/**/
max-width: 1600px; /* or match your main wrapper */
margin: 0 auto;
padding: 20px 40px;
display: flex;
align-items: center;
justify-content: flex-start;
/**/
}
.logo {
top: 10px !important;
margin: 0 auto;
min-width: 200px;
max-width: 95%;
max-height: 40vh;
padding: 20px;
padding-top: 50px;
position: absolute; /* Required for transform centering */
top: 50%; /* Center vertically */
left: 50%; /* Center horizontally */
transform: translate(-50%, 10%); /* Correct initial positioning */
transition: top 2s, left 2s, width 2s, transform 2s; /* Smooth transition */
z-index:500;
}
.logo.transitioned {
margin: inherit;
top: 10px !important; /*Move to the top*/
left: 10px; /* Move to the left */
width: 200px; /* Shrink the width */
transform: translate(0, 0); /* Remove centering adjustments */
position: relative;
}
.logosmall {
margin: inherit;
top: 10px;
left: 10px;
width: 200px;
transform: translate(0, 0);
position: relative;
/*max-width: 95%;*/
max-height: 40vh;
/* padding: 20px;*/
padding-top: 50px;
/* Center horizontally
transition: top 2s, left 2s, width 2s, transform 2s; */ /* Smooth transition */
}
.loading{ /*animated gif*/
height:200px;
max-height:20vh;
margin-top: 20px;
position: fixed; /* Match the logo's positioning context */
top: calc(50% + 10px); /* Position below the logo */
left: 50%; /* Center horizontally */
transform: translate(-50%, 0); /* Correct horizontal alignment */
z-index:500;
opacity: 1;
transition: opacity 0.3s ease-in-out; /* Smooth fade-out */
}
.opac {
opacity: 0;
}
.collapse {
position: fixed !important;
margin: inherit;
top: 45px;
right: 50%;
/*transform: translateX(-50%);*/
position: relative;
padding: 8px !important;
font-size: clamp(10px, 1.4vw, 1.5em) !important;
cursor: pointer;
margin-top:0px !important;
z-index:100;
}
/*progress bar: */
.bottom {
z-index: 1;
width: 100%;
background-color: #f1f1f1;
z-index: 99999;
}
/* The progress container (grey background) */
.pageprogress-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: #ccc;
border-bottom:2px solid #6e6e6e;
z-index: 99999;
}
/* The progress bar (scroll indicator)*/
.pageprogress-bar {
height: 5px;
background: #280137;
width: 0%;
z-index: 99999;
}
.point{
cursor: pointer;
}
/*Customise.php css */
.nojava{
background-color: #f0f0f0;
padding: 20px;
text-align: center;
}
.wideback{
/* background-image: url("../images/backgif.gif");*/
background-position: center;
}
.textright{
text-align:right;
}
.configmargin{
margin: 0 auto;
margin-top:75px;
margin-left:7%;
border: 4px solid #6194cb;
border-radius: 10px;
width:80%;
max-width: 800px;
padding: 10px 5px;
}
.topmargin{
margin-top:10%;
}
.displayinline{
display:inline;
}
.visibilityhidden{
visibility: hidden;
}
.whiteprewrap{
white-space: pre-wrap;
}
.nav-arrow {
width: 24px; /* Adjust arrow size */
height: 24px;
cursor: pointer;
vertical-align: middle; /* Align with text */
margin: 0 10px; /* Spacing around the arrows */
}
/* Align the inline-block h1 within its wrapper */
.sticky-total-wrapper {
text-align: right;
right:-100px;
}
/*.sticky-total-wrapper h1{ font-size: 2.5vw !important;}*/
#total-summary-sticky {
position: relative;
z-index: 100;
padding: 10px;
border-radius: 15px;
display: inline-block; /* Keep this to ensure background only covers content width */
background-color: #1a1f33; /* Deep, rich slate blue */
color: #f1f1f1;
border: 1px solid #555;
}
.is-sticky {
position: fixed !important;
margin: inherit;
top: 45px;
left: 50%;
position: relative;
padding: 8px !important;
font-size: clamp(10px, 1.4vw, 1.5em) !important;
cursor: pointer;
margin-top:0px !important;
z-index: 99;
-webkit-border-radius: 6px !important;
-moz-border-radius: 6px !important;
border-radius: 6px !important;
box-shadow: 0.2em 0.2em 0.2em #333333;
}
.tooltip {
position: relative; /* ✅ Ensures hover text stays inside the tooltip container */
display: inline-block;
}
.hovertext {
display: none;
position: absolute; /* ✅ Prevents affecting layout */
top: 0%; /* ✅ Moves text to the vertical center */
left: 80%; /* ✅ Centers horizontally */
white-space: nowrap; /* ✅ Prevents wrapping */
color: orange;
background-color: black;
border-radius: 5px;
padding: 3px;
text-align: center;
z-index: 1;
}
.tooltip:hover .hovertext {
display: block; /* ✅ Shows hover text on hover */
}
.icons {
border-radius: 50%;
max-width: 5vw;
min-width: 45px;
cursor: pointer;
margin-bottom: 0.7vw;
margin-left: 1vw;
transition: background-color 0.3s, transform 0.3s; /* Smooth transitions */
background-color: #47525e;
}
.icons:hover {
background-color: yellow !important; /* Hover overrides other styles */
}
.icons.selected {
background-color: orange; /* Selected state */
transform: scale(1.2); /* Enlarged when selected */
}
.icons.visited {
background-color: teal; /* Visited state */
}
/* Ensure CSS cascade applies correctly */
.icons.visited:not(.selected):not(:hover) {
background-color: teal !important; /* Teal applies unless hovering or selected */
}
.selection-buttons {
margin:15px;
margin-left: 150px;
margin-top:35px;
display: flex; /* Or inline-flex */
gap: 8px; /* Space between buttons */
align-items: center; /* ✅ Centers vertically */
justify-content: center; /* ✅ Centers horizontally */
margin-bottom: 15px; /* Space below buttons */
text-align: center;
/* margin-left:-30px;*/
}
.selection-button {
padding-top: clamp(7px, 1.5vw, 15px);
padding-bottom: clamp(7px, 1.5vw, 15px);
padding-left: clamp(5px, 1vw, 30px);
padding-right: clamp(5px, 1vw, 30px);
margin: clamp(2px, 0.8vw, 20px);
background: linear-gradient(to bottom right, #a8912a, #7c6a30); /* classy metallic gold-bronze */
color: #f9f5dc;
border: 1px solid #c4b45f;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
font-size: 1rem;
box-shadow: 0 2px 5px rgba(0,0,0,0.25);
transition: background 0.3s ease, color 0.2s ease, transform 0.2s ease;
}
.selection-button:hover {
background: linear-gradient(to bottom right, #ffe96b, #b28d1a);
color: #0a1a2f !important;
transform: scale(1.03);
}
.selection-button.selected {
background: linear-gradient(to bottom right, #dca902, #b17c00); /* Richer gold with depth */
color: #0a0a0a; /* Dark text for contrast */
border: 1px solid #ffcc33;
box-shadow: 0 4px 12px rgba(255, 215, 0, 0.35);
font-weight: 700;
}
.button {
text-decoration: none !important;
margin: 20px 5px;
padding: 10px 20px;
background: linear-gradient(to bottom right, #6194cb, #0056b3);
color: #fff;
text-align: center;
width: fit-content;
cursor: pointer;
border-radius: 6px;
font-weight: bold;
transition: background 0.3s ease, transform 0.2s ease;
display: inline-block;
box-sizing: border-box;
vertical-align: middle;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
border: 1px solid #0056b3;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.button:hover {
background: linear-gradient(to bottom right, #3399ff, #003e80);
transform: scale(1.03);
}
/*
.button {
text-decoration: none !important;
margin: 20px 5px;
padding: 10px 20px;
background: #6194cb;
color: #fff;
text-align: center;
width: fit-content;
cursor: pointer;
border-radius: 6px;
font-weight: bold;
transition: background 0.3s ease;
display: inline-block;
box-sizing: border-box;
vertical-align: middle;
box-shadow: 0.2em 0.2em 0.2em #333333;
}
.button:hover {
background: #0056b3;
}
*/
.chselected{
border: 10px solid #419149;
border-radius: 15px;
padding: 0vw;
margin: 0;
}
.chselected h1{
margin:0px;
margin-block-start: 0.0em;
}
.chnotselected{
border: 3px solid #BB6464;
border-radius: 5px;
padding: 0vw;
margin: 0;
}
.chnotselected h1{
margin:0px;
margin-block-start: 0.0em;
}
.chpadding{
padding:1.5vw;
display: block;
cursor:pointer;
}
.compad{
padding:1.5vw;
}
.tot{
font-size: clamp(20px, 3vw, 35px);
margin-bottom:0;
}
.customise-after{
margin: 0 auto;
margin-top:30px;
margin-left:7%;
border: 4px solid #6194cb;
border-radius: 10px;
max-width: 800px;
width:80%;
padding: 10px 5px;
}
.est{
font-size: clamp(18px, 2vw, 25px);
}
.shipwait{
font-size: clamp(10px, 1vw, 12px) !important;
}
.h1{
margin:0px;
margin-block-start: 0.0em;
font-size: clamp(20px, 3.5vw, 36px);
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
unicode-bidi: isolate;
}
input[type="radio"][name$="choice"] { /* Targets inputs whose name ends with "choice" */
margin: 0; /* Removes the default user agent margin */
position: absolute; /* Takes the element out of normal flow */
opacity: 0; /* Makes it completely transparent */
pointer-events: none; /* Ensures clicks pass through to the label */
width: 1px; /* Give it minimal dimensions */
height: 0; /*the line that breaks*/
overflow: hidden; /* Hide any overflow */
clip: rect(0, 0, 0, 0); /* For older IE, to clip content */
white-space: nowrap; /* Prevents text wrap */
}
/* terms css */
.cookies-container, .faq-container, .contact-container, .about-container, .terms-container, .privacy-container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
line-height: 1.6;
color: #444;
border-radius: 25px;
z-index:10000;
position:relative;
}
.cookies-container h2, .faq-container h2, .contact-container h2, .about-container h2, .terms-container h2, .privacy-container h2 {
margin-bottom: 1em;
color: #333;
font-size: 2em;
}
.cookies-container p, .faq-container p, .contact-container p, .about-container p, .terms-container p, .privacy-container p {
line-height: 1.6;
color: #444;
margin: 0 auto;
width: 90%;
margin-bottom: 1.2em;
}
.cookies-container a, .faq-container a, .contact-container a, .about-container a, .terms-container a, .privacy-container a {
font-size: 0.9rem;
text-decoration: none;
color: #0D47A1;
text-underline-offset: 2px;
font-weight: 600;
}
.cookies-container a:hover, .faq-container a:hover, .contact-container a:hover, .about-container a:hover, .terms-container a:hover, .privacy-container a:hover {
text-underline-offset: 5px;
font-weight: 600;
text-decoration: underline;
}
.cookies-container li, .faq-container li, .contact-container li, .about-container li, .terms-container li, .privacy-container li {
color: #444;
font-size: clamp(16px, 1.4vw, 1.3em);
font-weight: normal;
line-height: 1.6;
}
.terms-container li{
}
.contact-container a {
margin: 0 auto;
margin-top: 10px;
}
.contact-container label {
display: block;
margin-bottom: 5px;
font-weight: 600;
}
.contact-container input[type="text"],
.contact-container input[type="email"],
.contact-container textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.contact-container button {
background-color: #6194cb;
color: white;
padding: 10px 15px;
border: none;
cursor: pointer;
}
.contact-container button:hover {
background-color: #0056b3;
}
#contact-message{
margin-top: 20px;
}
/* faqs css */
.faq-item {
border-bottom: 1px solid #eee;
padding-bottom: 15px;
margin-bottom: 2em;
}
.faq-item h3 {
margin-bottom: 0.5em;
color: #333;
font-size: 1.2em;
color: #0000ff;
}
.faq-container h2 {
text-align: center;
}
/* sign in / profile */
.error-message {
color: #BB6464;
}
.success-message {
color: #419149;
}
/* profile css*/
#profile-container {
max-width: 600px;
margin: 0 auto;
}
#profile-container input, #profile-container button {
width: 100%;
margin-bottom: 10px;
}
/*members orders*/
/* Basic responsive table styling */
#previous-orders table, #pending-orders table {
width: 100%;
border-collapse: collapse;
}
#previous-orders th, #previous-orders td, #pending-orders th, #pending-orders td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
#previous-orders th, #pending-orders th {
background-color: #f2f2f2;
}
/* Pagination styling */
.pagination {
margin-top: 20px;
text-align: center;
}
.pagination a {
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
margin: 0 4px;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
/* Order Details Overlay */
.order-details-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
overflow: auto;
}
.order-details-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close-details {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close-details:hover,
.close-details:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* members bar */
#members-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #222;
color: white;
padding: 10px 10px;
z-index: 20000;
font-size: clamp(11px, 1.6vw, 17px);
gap: clamp(5px, 0.9vw, 15px);
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
display: flex; /* Flexbox for horizontal alignment */
align-items: center; /* Vertically align items */
justify-content: flex-end; /* Align all elements to the right */
box-shadow: inset 0 0 5px rgba(0, 255, 255, 0.2), 0 0 10px rgba(0, 123, 255, 0.1);
}
#members-bar a {
color: #00ffcc;
text-decoration: none;
padding: 5px 10px;
display: inline-block;
}
#members-bar a:hover {
text-decoration: underline;
}
#basket-summary {
display: flex; /* Ensure basket info contents are aligned horizontally */
align-items: center; /* Vertically align basket icon and text */
}
#basket-icon {
display: flex; /* Ensure basket icon and text are inline */
align-items: center; /* Align text vertically */
text-decoration: none; /* Remove underline from the link */
}
#basket-dropdown {
position: absolute; /* Independent of members bar */
top: 50px; /* Adjust this to align below the basket icon */
right: 20px; /* Align to the right edge of the screen */
background-color: white; /* Background for dropdown */
border: 1px solid #ccc; /* Border for dropdown */
padding: 10px; /* Padding for contents */
z-index: 9999; /* Ensure it appears on top of other elements */
display: none; /* Hidden by default */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a shadow for visual distinction */
}
#basket-dropdown.hidden {
display: none; /* Keep it hidden when inactive */
}
/*
#basket-summary:hover + #basket-dropdown,
#basket-icon:hover + #basket-dropdown {
display: block; Show dropdown on hover of the basket icon
}
*/
#basket-details {
list-style: none; /* Remove bullet points */
margin: 0;
padding: 0;
}
.view-basket-btn {
display: block;
margin-top: 10px;
text-align: center;
text-decoration: none;
color: #6194cb;
}
.order-table table {
width: 100%;
border-collapse: collapse;
}
.order-table th, .order-table td {
padding: 8px;
text-align: left;
}
.order-table th {
background-color: #b0b0b0;
color: #444;
}
.order-table li{
font-size: clamp(12px, 1.3vw, 16px);
font-weight: 400 !important;
}
.order-table th:nth-child(1),
.order-table td:nth-child(1) {
border-radius: 10px 0 0 10px;
}
.order-table th:nth-child(3),
.order-table td:nth-child(2) {
border-radius: 0 10px 10px 0;
}
.order-table .order-specs-row td {
border-left: 10px solid #6194cb;
border-right: 10px solid #6194cb;
border-bottom: 10px solid #6194cb;
border-top: none;
border-radius: 0 0 15px 15px;
padding: 16px;
overflow: hidden;
}
.order-table {
border-collapse: separate;
border-spacing: 0;
}
/* basket.php css*/
/* Responsive table styling */
#basket-container table {
width: 100%;
border-collapse: collapse;
}
#basket-container th, #basket-container td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
#basket-container th {
background-color: #808080;
}
/* Visual feedback styling */
.basket-message {
margin-bottom: 10px;
color: black;
}
.success-message {
color: #419149;
font-weight: bold;
}
.error-message {
color: #BB6464;
}
/* Total cost styling */
#basket-total {
text-align: right;
font-weight: bold;
margin-top: 10px;
}
.estdelivery {
text-align: right;
font-weight: bold;
margin-top: 10px;
}
.waitexp{
font-size:0.8em !important;
}
.basket-quantity-control {
display: flex;
align-items: center;
justify-content: center;
}
.basket-minus,
.basket-plus {
width: 30px;
height: 30px;
border: none;
border-radius: 50%;
font-size: 20px;
font-weight: bold;
color: white;
background-color: #6194cb;
cursor: pointer;
margin: 0 5px;
display: flex;
align-items: center;
justify-content: center;
}
.basket-minus:disabled {
background-color: #a0a0a0;
cursor: not-allowed;
}
.basket-quantity {
min-width: 30px;
text-align: center;
font-size: 16px;
font-weight: bold;
}
.basket-remove {
padding: 10px 20px;
font-size: 14px;
font-weight: bold;
color: white;
background-color: #ff4d4d; /* Red for attention */
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.basket-remove:hover {
background-color: #ff1a1a; /* Darker red for hover */
}
.undo-message {
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ddd;
margin-top: 10px;
text-align: center;
font-size: 14px;
color: #333;
}
.undo-message button {
font-size: 14px;
font-weight: bold;
color: #6194cb;
background: none;
border: none;
cursor: pointer;
text-decoration: underline;
}
.undo-message button:hover {
text-decoration: none;
}
.checkout-btn {
width: fit-content;
padding: 15px 30px;
font-size: 16px;
font-weight: bold;
color: white;
background-color: #28a745; /* Green for checkout */
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.no_under{
text-decoration: none;
}
.checkout-btn:hover {
background-color: #218838; /* Darker green for hover */
transform: scale(1.05); /* Slight zoom effect */
}
.undo-row {
background-color: #f9f9f9; /* Light background for clarity */
text-align: center;
}
.undo-message-cell {
padding: 10px;
font-size: 14px;
font-weight: bold;
color: #333;
border: 1px solid #ddd;
}
.undo-message-cell {
font-size: 14px;
font-weight: bold;
color: #6194cb;
background: none;
border: none;
cursor: pointer;
text-decoration: underline;
}
.undo-message-cell {
text-align: center !important; /* Center the message */
vertical-align: middle;
padding: 10px;
font-size: 16px;
font-weight: bold;
color: #333;
background-color: #f9f9f9;
border: 1px solid #ddd;
}
.undo-message-text {
display: inline-block;
margin-right: 10px; /* Adds spacing if needed */
}
.undo-button-cell {
text-align: right; /* Position it in the rightmost column */
}
.undo-remove {
display: flex;
align-items: center; /* Align text and icon together */
justify-content: center;
padding: 10px 20px;
font-size: 14px;
font-weight: bold;
color: white;
background-color: #17a2b8; /* Bright yellow for Undo */
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.undo-remove:hover {
background-color: #138496; /* Slightly darker yellow on hover */
transform: scale(1.05); /* Add a subtle zoom effect */
}
.undo-icon {
width: 16px;
height: 16px;
margin-right: 8px; /* Space between icon and text */
}
/* payment css*/
/* Responsive form styling */
#payment-container form input, #payment-container form select, #payment-container form button {
width: 100%;
margin-bottom: 10px;
}
/* Visual feedback styling */
.payment-message {
margin-bottom: 10px;
}
.basket-clickable-cell {
cursor: pointer;
text-align: left;
padding: 10px;
background: #e0ecf9;
color: #252525;
}
.basket-clickable-cell:hover {
background-color: #d6e7f8;
}
.basket-specs {
border-top: 1px solid #ddd;
display: none; /* Initially hidden */
}
.basket-specs:not(.hidden) {
display: table-row;
}
.basket-specs li {
font-weight: normal !important; /* Reset to default font-weight */
}
.specs-list {
margin: 0;
padding: 0;
list-style-type: none; /* Clean display for the specifications list */
}
.component-type {
display: block; /* Forces the label to be on its own line */
margin-top: 7px; /* Adds spacing above only the component type */
}
.component-value {
margin: 0; /* Ensure no extra margin for the value */
font-size: 120%;
margin-bottom:10px;
}
table {
border-collapse: collapse; /* Prevent double borders */
}
th:nth-child(1),
td:nth-child(1) {
width: 17%;
}
th:nth-child(2),
td:nth-child(2) {
width: 43%;
}
th:nth-child(3),
td:nth-child(3),
th:nth-child(4),
td:nth-child(4) {
width: 20%;
}
.edit-build {
padding: 10px 20px;
background-color: #6194cb;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.edit-build:hover {
background-color: #0056b3;
}
/* Align members-bar and basket-summary */
/* Basket summary alignment */
#basket-summary {
display: inline-flex; /* Align basket icon and text horizontally */
align-items: center; /* Vertically center icon and text */
position: relative; /* Relative to allow dropdown alignment */
/* margin-left: auto; Push it to the right */
}
/* Dropdown positioning */
#basket-dropdown {
position: fixed; /* Keep dropdown fixed while scrolling */
top: 50px; /* Position below the members bar */
right: 20px; /* Align to the right side */
background-color: #222; /* Match the bar background */
color: white; /* Text color */
border: 1px solid #444; /* Subtle border */
padding: 10px;
z-index: 1100; /* Ensure it stays on top of other elements */
display: none; /* Hidden by default */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add shadow for distinction */
}
/* Show dropdown when hovering over basket-summary */
#basket-summary:hover + #basket-dropdown {
display: block; /* Show dropdown when hovering over basket-summary */
}
/* Button styling */
.view-basket-btn {
display: block;
margin-top: 10px;
text-align: center;
background-color: #6194cb; /* Professional blue tone */
color: white;
text-decoration: none;
padding: 10px 15px;
border-radius: 5px;
font-weight: bold;
transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover effects */
}
.view-basket-btn:hover {
background-color: #0056b3; /* Darker blue on hover */
transform: scale(1.05); /* Subtle zoom effect */
}
#basket-icon {
color: #00ffcc;
text-decoration: none;
cursor: pointer;
display: inline-block;
padding: 5px 10px;
}
#basket-dropdown ul {
margin: 0;
padding: 0;
list-style-type: none;
max-height: 200px; /* Scrollable if too many items */
overflow-y: auto;
}
#basket-dropdown ul li {
margin-bottom: 10px;
font-size: 14px;
}
/* dashboard css */
.dashboard-card {
background: #ffffff;
border: 1px solid #ddd;
border-radius: 10px;
padding: 20px;
text-align: center;
cursor: pointer;
min-width: 140px;
flex: 1 1 200px;
max-width: 220px;
height: 120px;
font-size: 1.1rem;
font-weight: 500;
color: #333; /* Force clean text color for all cards */
text-decoration: none; /* Remove underline from links */
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
z-index:10;
opacity: 1;
isolation: isolate;
}
.dashboard-card:hover {
transform: translateY(-6px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
background-color: #f4f6f8;
}
/* For links inside dashboard grid */
#dashboard-grid a.dashboard-card {
color: #333; /* Make sure links have same color */
text-decoration: none;
}
/* Grid layout */
#dashboard-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
margin-top: 20px;
z-index: 10;
position:relative;
max-width:1000px;
}
/* Dashboard Sections */
.dashboard-section {
margin-top: 20px;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s ease, transform 0.4s ease;
display: none; /* Always start hidden */
}
/* When section becomes visible */
.dashboard-section.active {
display: block;
opacity: 1;
transform: translateY(0);
}
/* Back button */
#back-button,
#back-button1,
#back-button2 {
text-decoration: none !important;
margin: 20px 0;
padding: 10px 20px;
background: #6194cb;
color: #fff;
text-align: center;
width: fit-content;
cursor: pointer;
border-radius: 6px;
font-weight: bold;
transition: background 0.3s ease;
}
#back-button:hover,
#back-button1:hover,
#back-button2:hover {
background: #0056b3;
}
.toggle-order{
padding: 5px 10px;
}
.no-text-decoration {
text-decoration: none !important;
}
.dashboard-hidden {
display: none !important;
}
/*addresses section*/
/* Addresses Container */
#addresses-container {
padding: 20px;
}
#address-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
.address-card {
border: 1px solid #ccc;
border-radius: 8px;
padding: 15px;
background: #f9f9f9;
position: relative;
color: black;
}
.address-card h4 {
margin: 0;
}
.address-card .address-actions {
margin-top: 10px;
}
.address-card button {
margin-right: 10px;
}
/* Modal */
#address-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border-radius: 8px;
border: 1px solid #ccc;
display: none;
z-index: 1000;
color: black;
}
#address-modal.hidden {
display: none;
}
.checkbox-group {
margin: 10px 0;
}
/* Overlay for modal */
#modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
display: none;
z-index: 999;
}
#modal-overlay.hidden {
display: none;
}
/* profile section */
.profile-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
pointer-events: auto; /* Ensure interaction with modal */
}
.profile-modal {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
text-align: center;
width: 300px;
z-index: 1001; /* Ensure it's above the overlay */
position: relative; /* Prevent overlay from blocking interactions */
}
.profile-modal-buttons {
display: flex;
justify-content: space-between;
margin-top: 15px;
}
.profile-modal-buttons button {
padding: 8px 12px;
border: none;
cursor: pointer;
font-size: 16px;
}
#profileSubmitPassword, #profileCancelPassword{
background: #6194cb;
color: white;
}
.profile-modal-active {
pointer-events: none;
}
.profile-modal h3, .profile-modal p {
color: #333; /* Darker text for better visibility */
font-weight: bold;
}
.profile-modal input[type="password"] {
width: 100%;
padding: 8px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
pointer-events: auto;
}
/* Contact Form */
/* ✅ General Contact Form Styling */
.contact-form {
max-width: 500px;
margin: 20px auto;
padding: 20px;
background-color: #f8f9fa; /* Light grey */
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* ✅ Label Styling */
.contact-form label {
font-weight: bold;
margin-top: 15px;
color: #333; /* Dark text */
align-items: center;
gap: 8px; /* ✅ Ensures spacing remains clean */
}
/* ✅ Ensure checkbox and text are on the same line */
.contact-form label input[type="checkbox"] {
vertical-align: middle;
margin-right: 8px;
position: relative;
top: -3px; /* ✅ Nudges checkbox into alignment with text */
}
/* ✅ Ensure privacy policy link stays inline */
.contact-form label a {
display: inline;
white-space: nowrap; /* ✅ Prevents unwanted wrapping */
margin-left: 4px;
color: #0078D4;
text-decoration: none;
}
.contact-form label a:hover {
text-decoration: underline; /* Add hover effect */
}
/* ✅ Input Fields */
.contact-form input:not([type="checkbox"]),
.contact-form select,
.contact-form textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
background: #fff;
color: #000; /* Black text for contrast */
}
/* ✅ Textarea Resizing */
.contact-form textarea {
height: 120px;
resize: vertical;
}
/* ✅ GDPR Checkbox */
#contact-gdpr {
margin-top: 10px;
}
/* ✅ Submit Button */
#contact-submit {
width: 100%;
padding: 10px;
margin-top: 15px;
background: #0078D4; /* Microsoft blue */
border: none;
color: white;
font-size: 16px;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}
#contact-submit:hover {
background: #005ba1;
}
#contact-submit.disabled {
background: #a0a0a0;
cursor: default;
}
/* ✅ Response Message */
#contact-response {
margin-top: 15px;
padding: 10px;
text-align: center;
font-weight: bold;
border-radius: 5px;
}
/* ✅ Success Message */
.response-success {
background: #28a745; /* Green background */
color: white;
font-weight: 600;
padding: 10px;
border-radius: 5px;
display: block;
align-items: center;
gap: 8px;
}
/* ✅ Error Message */
.response-error {
background: #dc3545; /* Red background */
color: white;
font-weight: 600;
padding: 10px;
border-radius: 5px;
display: flex;
align-items: center;
gap: 8px;
}
.inline_a {
color: #00cfff;
transition: color 0.2s ease;
text-decoration: none;
text-underline-offset: 5px;
}
.inline_a:hover {
color: #66e0ff;
text-decoration: underline !important;
}
/* ✅ Support Ticket System */
.support-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9; /* ✅ Light grey for structure */
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* ✅ Ticket Sections */
.ticket-sections h3 {
margin-top: 30px;
font-size: 20px;
color: #333;
border-bottom: 2px solid #0078D4; /* ✅ Section Separator */
padding-bottom: 5px;
}
/* ✅ Ticket List Table */
.ticket-table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
background: white;
}
.ticket-table th {
background: #6194cb;
color: white;
padding: 10px;
text-align: left;
}
.ticket-table td {
padding: 12px;
border-bottom: 1px solid #ddd; /* ✅ Separating each row */
}
/* ✅ Hover Effect on Tickets */
.view-ticket {
cursor: pointer;
transition: background 0.3s;
}
.view-ticket:hover {
background: #f5f5f5;
}
.view-ticket td:last-child {
text-align: right;
}
.view-ticket i {
color: #888;
transition: color 0.3s;
}
.view-ticket:hover i {
color: #333;
}
/* ✅ Conversation Thread */
.ticket-conversation {
/* display: none; ✅ Initially hidden */
background: #f5f7fa; /* ✅ Light shading for readability */
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
margin-top: 5px;
}
/* ✅ Admin & Customer Messages */
.admin-message, .customer-message {
padding: 10px;
margin-bottom: 8px;
border-radius: 5px;
}
.admin-message {
background: #eaf2ff;
border-left: 4px solid #0078D4;
}
.customer-message {
background: #dfffd6;
border-left: 4px solid #28a745;
}
/* ✅ Reply Button & Form */
.reply-form {
display: none; /* ✅ Hidden until activated */
margin-top: 15px;
}
.reply-form textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
resize: vertical;
background: white;
}
.reply-form button {
background: #0078D4;
color: white;
font-weight: bold;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}
.reply-form button:hover {
background: #005ba1;
}
.supp_textarea{
resize: vertical;
width: 100%;
max-width: 100%;
}
/* ✅ Ensure text is visible */
.support-container h2,
.support-container p,
.support-form label,
.support-form input,
.support-form select,
.support-form textarea,
.ticket-sections h3 {
color: #333; /* ✅ Dark text for readability */
}
/* ✅ Ensure ticket list text is visible */
.ticket-table th,
.ticket-table td {
color: #333; /* Dark text for visibility */
}
/* ✅ Adjust section headers */
.ticket-sections h3 {
color: #333;
font-weight: bold;
padding-bottom: 5px;
}
/* ✅ Align chevron icon */
.view-ticket td:last-child {
text-align: center;
width: 40px; /* Ensure proper spacing */
}
/* ✅ Adjust chevron icon visibility */
.view-ticket i {
font-size: 16px;
color: #888;
transition: color 0.3s;
}
.view-ticket:hover i {
color: #333;
}
/* ✅ Highlight row on hover */
.view-ticket:hover {
background: #d6e4f0; /* ✅ Light blue tint for improved contrast */
cursor: pointer;
}
.message-content, .cancel-suggestion {
white-space: pre-wrap; /* This will preserve whitespace and wrap long lines */
word-break: break-word; /* Optional: ensures long words break to prevent overflow */
}
/*Basket Error is url*/
.basket-error {
background-color: #ffdddd;
border: 1px solid #ff5c5c;
color: #a33;
padding: 12px;
margin-bottom: 15px;
text-align: center;
border-radius: 5px;
font-size: 1.2rem;
}
/*show inc vat*/
.vat80{
font-size: 0.8em;
}
.vat70{
font-size: 0.7em;
}
.vat50{
font-size: 0.5em;
}
.partcontainer {
display: flex; /* ✅ Uses flexbox for better alignment */
align-items: center; /* ✅ Aligns image & text vertically */
gap: 10px; /* ✅ Adds spacing between image & text */
}
.textcenter{
text-align: center;
}
.break_email{
overflow-wrap: break-word;
}
@media (min-width: 2000px) {
.header-container {
padding-left: calc((100vw - 1600px) / 2);
}
}
@media (max-width: 787px) {
#total-summary-sticky {
margin-right:20px;
}
.button{
margin: 10px 2px;
padding: 5px 4px;
}
.h1 {font-size: clamp(14px, 1.5vw, 36px); }
.compad p.whiteprewrap {
font-size: clamp(12px, 1.5vw, 18px);
}
.parts{width:50%;}
}
@media (max-width: 550px) {
.toggle-password{
padding: 3px 8px !important;
}
.support-container {
padding: clamp(1px, 2.2vw, 20px);
}
/* ✅ Ticket Sections */
.ticket-sections h3 {
font-size: clamp(15px, 3vw, 20px);
}
.ticket-table th {
padding: clamp(5px, 2vw, 10px);
}
.ticket-table td {
padding: clamp(5px, 1.7vw, 12px);
}
.ticket-table tr, th {
font-size: clamp(9.8px, 2.5vw, 16px);
}
.ticket-conversation {
padding: clamp(5px, 3vw, 15px);
}
.button{
margin: 10px 3px;
}
h3.configmargin {
font-size: 0.8em ;
}
.basket-clickable-cell {
padding: 1px;
}
#basket-container th, #basket-container td {
padding: 3px;
}
.basket-remove{
padding: 8px 10px;
font-size: 0.7em;}
td.basket-clickable-cell {
font-size: 3vw;
}
.basket-specs li {
font-size: 3.5vw;
font-weight: 100 !important;
}
}
@media (max-width: 491px) {
body h2 {
font-size: 0.77em;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
textarea,
select {
font-size: 12px;
}
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], textarea, select
Specificity: (0,1,1)
{
padding: 5px 2px;
}
li {font-size: clamp(13px, 1.4vw, 25px);}
.midright { width: 71%;} /* see if already below/above */
/*.selection-buttons { margin-left: -50px; }*/
.topmargin { margin-top: 20%; }
.point h1 { font-size: clamp(13px, 3.5vw, 48px); }
p { font-size: clamp(12px, 1.5vw, 20px); }
.chselected { border: 5px solid #419149; }
.chnotselected { border: 2px solid #BB6464; }
.selection-buttons{
margin-left: 15px;
}
.tooltip, .hovertext {
margin-left:10px;
font-size: 0.85em;
}
.parts{
width:100px;
}
.button {
padding: 6px 14px;
margin: 20px 6px;
font-size: 14px;
}
.nav-arrow {
width: 16px;
height: 16px;
}
.welcome-message {
display: none;
}
#members-bar {
padding-right: 2px;
}
#basket-dropdown{
font-size: 0.8em;
}
#basket-dropdown ul li{
font-size: 10px;
}
.order-card{
padding:0.5em !important;}
.order-table .order-specs-row td {
border-left: 5px solid #6194cb !important;
border-right: 5px solid #6194cb !important;
border-bottom: 5px solid #6194cb !important;
padding: 3px !important;
}
.progress-bar{
font-size: 0.7em;}
.cookies-container h2, .faq-container h2, .contact-container h2, .about-container h2, .terms-container h2, .privacy-container h2 {
margin-bottom: 1em;
color: #333;
font-size: 1.5em;
}
.cookies-container li, .faq-container li, .contact-container li, .about-container li, .terms-container li, .privacy-container li {
font-size: clamp(12px, 1.4vw, 3em);
}
.basket-minus, .basket-plus {
width: 15px;
height: 15px;
margin: 0 auto;
padding: 12px 12px;
}
.wrapper{
padding: 40px 5px;
width:98%;
}
}
@media (max-width: 380px) {
.ticket-table th {
padding: clamp(2px, 0.6vw, 5px) !important;
}
.ticket-table tr, th {
font-size: clamp(8.5px, 1vw, 9.8px) !important;
}
.ticket-table td {
padding: clamp(3px, 0.5vw, 6px) !important;
}
button {
margin: 10px 0 !important;
padding: 7px 14px !important;
}
}