#wqo-form { 
	display: none;
	background: #f7f7f7;
	border: 1px solid #ddd;
	border-radius: 3px;
	overflow:auto;
	padding:20px;
	position: absolute;
	top: 0;
}
#bulk-button {
	    font-family: var(--e-global-typography-accent-font-family), Sans-serif;
    font-size: var(--e-global-typography-accent-font-size);
    font-weight: var(--e-global-typography-accent-font-weight);
    text-transform: var(--e-global-typography-accent-text-transform);
    letter-spacing: var(--e-global-typography-accent-letter-spacing);
    border-radius: 50px 50px 50px 50px;
    padding: 16px 16px 16px 16px;
    color: #FFFFFF;
    background-color: var(--e-global-color-accent);
    transition: all 0.2s;
}
#wqo-form .button { float:right; height: fit-content; }
#wqo-form table { margin: -15px -15px 20px -15px; width: calc(100% + 30px); }
#wqo-form table th { padding:10px; border-bottom:1px solid #aaa; }
#wqo-form table td { padding:10px; }
/* #wqo-form table td.col-small { width:170px; } */
#wqo-form table td:last-of-type { padding:0; padding-left:10px; }
#wqo-form table td input { width:calc(100% - 10px); }
#wqo-form table tr { border-bottom: 1px solid #ddd; }
#wqo-form table tr:hover { background-color: #d5e9c6; }

#wqo-result:not(.success):not(.fail) { display: none; }
#wqo-result.success { color:green; background:#e5ffe5; display:inline-block; padding-left:10px; padding-right:10px; }
#wqo-result.success a { color:inherit; text-decoration:underline; }
#wqo-result.fail { color:red; background:#ffe4e4; display:inline-block; padding-left:10px; padding-right:10px; }
#wqo-result.fail a { color:inherit; text-decoration:underline; }

#variations #colour-4-sizes span {
	width: 30px;
    height: 30px;
    display: block;
    border-radius: 50%;
    border: 2px solid #000;
    top: 10px;
    position: relative;
}

#wqo-toggle a {
   background: #3f2891;
   padding: 0 15px;
   line-height: 34px;
   display: inline-block;
   color: #fff;
   border-radius: 3px;
   float: right;
   transition: 600ms all;
	outline: 4px solid white;
}
#wqo-toggle a:hover {
   opacity: 0.9;
   transition: 100ms all;
   outline: 4px solid #b6a7ed;
}

.colour_selector {
	padding-top: 15px;
    width: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.colour_selector span {
    display: block;
    border-radius: 50%;
    border: 2px #CB508F solid;
}
.colour_selector span span {
	width: 25px;
	height: 25px;align-content;
}
.colour_selector.show span span {
	border: 2px #000 solid;
}
#variations p {
	 display: flex;
    gap: 10px;
}
#colour-4-sizes span {
	top: 5px;
}
#wqo-form {
	border-radius: 20px;
    flex-wrap: wrap;
    align-content: flex-end;
    align-items: flex-end;
    justify-content: space-between;
}
#wqo-form.show{
	display: flex;
}
#wqo-button {
	background-color: #CB508F;
    color: #FFF;
    border-radius: 50px;
    padding: 20px 60px;
    font-family: "Sofia Sans";
    text-transform: uppercase;
	transistion: all 1s;
}
#wqo-button:hover {
	background-color: #FFF;
	color: #CB508F;
}
.colour_selector .inner-span {
	border: 2px #FFF solid;
}
.colour_selector span {
	border: 2px #000 solid;
}
.colour_selector span:hover {
	border: 2px #CB508F solid;
}
#wqo-form input {
	width: 50px;
}
.colour_selector p {
	font-family: "PT Sans";
    font-size: 14px;
	margin: 4px;
}
#variant_picker {
	display: flex;
    flex-wrap: wrap;
}
#variations {
	font-family: "PT Sans";
	border-top: 1px solid #d1d1d1;
    display: flex;
    flex-wrap: wrap;
    margin-top: 15px;
}
/* product page */
.single-product .hide-me { display: none!important; }

.variant-container {
	display: none;
}
span.variant-container {
	border: 1px solid black;
    border-top: 0;
    border-bottom: 0;
    padding: 5px 12px;
}
#variations p {
	width: 100%;
}
.variant-container.show {
	display: flex;
    flex-direction: column;
}
.variant-container .col-small {
    display: flex;
    flex-direction: column;
    align-items: center;
    order: 2;
}
.variant-container p {
	text-align: center;
}
.colour_selector span span {
	width: 45px;
	height: 45px;
}
#wqo-form .wqo-icon:before {
    content: '';
    width: 32px;
    height: 32px;
    display: inline-block;
    background: url('icons/tt_blister_48x.png');
    background-size: contain;
}
#wqo-form .wqo-icon.wqo-icon-banded:before { background-image: url('icons/tt_wrap_48x.png'); }
#wqo-form td:has(.wqo-icon) { padding: 0; }