label {
width: 100%;
}
p {
font-weight: bold;
margin: 0.5em 0;
font-size: 0.8em;
}
select {
min-height:45px
}
.form-check-input {
cursor: pointer;
}
.ct-info-text {
color: #47476c;
padding: 1em;
background: #f5f5f5;
font-size: 0.9em;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: nowrap;
}
.ct-info-text i {
color: #f2602c;
font-size: 1.5em;
margin: 0 0.5em;
}
.card-header {
color: #373795;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
.ct-load-items .card {
margin: 0 0 1em 0;
position: relative;
overflow: hidden;
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.ct-load-items .ct-load-item .card {
position: relative;
overflow: hidden;
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
} .ct-load-items .card .card-body {
z-index: 44;
text-align: center;
}
.ct-load-items .ct-load-item .card .card-body .ct-load-item_price_title .title,
.ct-load-items .ct-load-item .card .card-body .ct-load-item_price_title i.ct-description-tip,
.ct-load-items .ct-load-item .card .card-body .ct-load-item_price_title .price .woocommerce-Price-amount.amount {
color: #2c3e50 !important; }
.ct-load-items .ct-load-item .card .price {
}
.ct-load-items .card .card-body input[type="number"] {
width: 140px !important;
height: 40px !important;
border-radius: 25px;
text-align: center;
margin: 1em auto;
}
.ct-load-items .card .card-body .ct-load-item_price_title,
.ct-load-items .card .card-body p {
}
.ct-load-items .card .card-body .ct-load-item_price_title i {
font-size: 1em;
margin: 0 0.5em;
}
.card-header i {
font-size: small;
}
.card-collection-type .card-header {
color: #373795;
font-weight: bold;
font-size: 1.2em;
}
.card {
display: flex;
flex-direction: column;
background-color: rgb(255, 255, 255);
border-radius:6px;
height: fit-content;
box-shadow: rgba(214, 214, 214, 0.35) 0px 3px 20px;
padding: 7px;
text-align: center;
}
.card-input-element {
display: none;
}
.card-input {
margin: 10px;
padding: 0px;
}
.card-input:hover {
cursor: pointer;
}
.card-input-element:checked + .card-input {
box-shadow: 0 0 4px 3px #d6d6e4;
border: solid 3px #373795;
}
.card-header {
background-color: white;
}
.ct-collection-item {
color: #373795;
font-weight: bold;
}
.ct-load-item_price_title {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
font-weight: bold;
color: #353290;
margin-bottom: 1em;
font-size: 1.2em;
} .card .gallery-container {
display : flex;
flex-wrap: nowrap;
overflow: auto;
overflow-y: hidden;
justify-content: center;
align-items: center;
margin: 0 auto;
} .card .gallery-container {
display: flex;
justify-content: center;
z-index: 112;
} .card .gallery-container .thumbnail {
width: 30px;
height: 30px;
object-fit: cover;
border-radius: 3px;
cursor: pointer;
border:1px solid white;
}
.card .gallery-container .thumbnail:hover {
transform: scale(1.1);
} .ct-slider {
text-align: center;
}
.ct-slider .ct-slider-mainImage {
width: 100%;
max-height: 400px;
border: 2px solid #353290;
margin-bottom: 15px;
border-radius: 6px;
cursor : pointer;
}
.ct-slider .thumbnails {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.ct-slider .thumbnails .ct-thumbnail {
width: 100px;
height: 60px;
object-fit: cover;
cursor: pointer;
border: 2px solid #353290;
border-radius: 6px;
}
.ct-slider .thumbnails .ct-thumbnail.active {
border-color: #373795;
} #ct-lightbox-container {
display: none;
position: absolute;
z-index: 9999999999999;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
align-items: center;
overflow: hidden;
}
#ct-lightbox-container .lightbox {
width: 70%;
height: auto;
margin: 5% auto;
text-align: center;
}
#ct-lightbox-container .lightbox img.lightbox-content {
border: 2px solid white;
border-radius: 6px;
width: auto;
height: 70vh;
margin: 0 auto;
}
#ct-lightbox-container .lightbox .close {
position: absolute;
top: 20px;
right: 30px;
color: white;
font-size: 35px;
font-weight: bold;
cursor: pointer;
}
#ct-lightbox-container .lightbox .close:hover,
#ct-lightbox-container .lightbox .close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
#ct-lightbox-container .lightbox .prev,
#ct-lightbox-container .lightbox .next {
cursor: pointer;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 30px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
text-decoration: none;
user-select: none;
}
#ct-lightbox-container .lightbox .next {
border-radius: 3px 0 0 3px;
}
#ct-lightbox-container .lightbox .prev {
border-radius: 3px 0 0 3px;
}
#ct-lightbox-container .lightbox .prev:hover,
#ct-lightbox-container .lightbox .next:hover {
background-color: rgba(0, 0, 0, 0.8);
} .multistepsform {
width: 100%;
margin: 50px auto;
position: relative;
}
.multistepsform fieldset {
background: white;
border: 0 none;
border-radius: 10px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
box-sizing: border-box;
width: 80%;
margin: 0 10%;
padding: 3em;
position: relative;
display: flex;
flex-direction: column;
}
.multistepsform fieldset:not(:first-of-type) {
display: none;
}
.multistepsform input, .multistepsform textarea {
}
.multistepsform input:focus, .multistepsform textarea:focus {
border-color: #373795;
outline: none;
color: #637373;
}
.multistepsform .action-button {
color: #fff;
transition: 150ms;
cursor: pointer;
background-color: #373795 !important;
margin: 1em 0 0;
width: auto;
}
.multistepsform .action-button:hover,
.multistepsform .action-button:focus {
box-shadow: 0 0 0 2px #b2b3d8, 0 0 0 3px #373795;
color: #fff;
}
.multistepsform .fs-title {
font-size: 18px;
text-transform: uppercase;
color: #2c3e50;
margin-bottom: 10px;
}
.multistepsform .fs-subtitle {
font-weight: normal;
font-size: 15px;
color: #666;
margin-bottom: 20px;
}
.multistepsform #progressbar {
margin-bottom: 30px;
overflow: hidden;
counter-reset: step;
text-align: center;
padding-left: 0;
}
.multistepsform #progressbar li {
list-style-type: none;
color: #373795;
text-transform: uppercase;
font-size: 13px;
width: 25%;
float: left;
position: relative;
font-weight: bold;
} .multistepsform #progressbar li:before {
content: counter(step);
counter-increment: step;
width: 32px;
line-height: 32px;
display: block;
font-size: 18px;
color: #fff;
background: #373795;
border-radius: 50%;
margin: 0 auto 5px auto;
}
.multistepsform #progressbar li:after {
content: "";
width: 100%;
height: 2px;
background: #373795;
position: absolute;
left: -50%;
top: 15px;
z-index: -1;
}
.multistepsform #progressbar li:first-child:after {
content: none;
}
.multistepsform #progressbar li.active {
color: #f2602c;
}
.multistepsform #progressbar li.active:before,
.multistepsform #progressbar li.active:after {
background: #f2602c;
color: white;
} #uploaded-img-preview {
border-radius: 6px;
padding: 1em;
min-height: 240px;
background: #efefef url(//citytasker.co.uk/wp-content/themes/betheme-child/imgs/placeholder.svg) center no-repeat;
background-size: 100px;
justify-content: center;
align-items: center;
cursor: pointer;
}
#uploaded-img-preview .img-wrapper img{
object-fit: cover;
width: 100%;
height: 100%;
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
#uploaded-img-preview .img-wrapper {
position: relative;
width: 240px;
height: 240px;
margin: 1em 1em 0 0;
}
#uploaded-img-preview .img-wrapper .remove-img {
position: absolute;
top: -10px;
right: -10px;
background-color: #373795;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
cursor: pointer;
}
#uploaded-img-preview .img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px;
}
input[type="button"] {
min-width: 155px;
float: left;
}
input[type="button"][value="Next"] {
background-color: #f2602c !important;
width: fit-content;
} input[type="file"] {
position: relative;
}
input[type="file"]::file-selector-button {
width: 136px;
color: transparent;
} input[type="file"]::before {
position: absolute;
pointer-events: none;
top: 10px;
left: 20px;
height: 20px;
width: 20px;
content: "";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23373795'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E"););
}
input[type="file"]::after {
position: absolute;
pointer-events: none;
top: 8px;
left: 50px;
font-weight: bolder;
color: #373795;
content: "Upload Photos";
}  input[type="file"]::file-selector-button {
border-radius: 4px;
padding: 0 16px;
height: 40px;
cursor: pointer;
background-color: white;
border: 2px solid #373795;
width: 200px;
text-align: center;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
margin-right: 16px;
transition: background-color 200ms;
} input[type="file"]::file-selector-button:hover {
background-color: #f3f4f6;
} input[type="file"]::file-selector-button:active {
background-color: #e5e7eb;
}
#ct-submit {
background-color: #f2602c;
margin: 0 10px 15px 0;
float: left;
min-height: 45px;
text-transform: uppercase;
font-weight: 800;
border-radius: 25px !important;
}
input[type="button"], input[type="submit"] {
text-transform: uppercase;
font-weight: bold;
} .ct-product-tab {
width: 100%;
} .ct-cart-button-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.ct-cart-button-wrapper .ct-add-cart,
.ct-cart-button-wrapper .ct-remove-cart {
width: 60px;
border-radius: 25px;
color: white;
font-size: 20px;
font-weight: bold;
cursor: pointer;
margin: 0;
padding: 1px 15px;
}
.ct-cart-button-wrapper .ct-add-cart {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
background-color: #373795;
}
.ct-cart-button-wrapper .ct-remove-cart {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
background-color: #8484ce;
} .flatpickr-day.flatpickr-disabled {
text-decoration: line-through;
}
.ct-manual-address-btn {
background: #fcf5f5;
cursor: pointer;
border-radius: 6px;
padding: 5px 10px;
color: #373695;
}
.order-summery {
background: #f5f5f5;
padding: 1em;
border-radius: 6px;
margin: 0 0 1em 0;
border-bottom: 4px solid #f2602c;
} .order-summery table.products tbody th { }
.order-summery table.products thead th,
.order-summery table.products tbody td,
.order-summery table.products tfoot td {
text-align: left;
}
tr:nth-child(even),
tr:nth-child(even) td,
tr:nth-child(even) th{
background-color: #f2f2f2 !important; }
tbody tr:nth-child(odd) td, tbody tr:nth-child(odd) th{
background-color: rgb(253 202 186) !important; }
.order-summery table th, .order-summery table td {
border-width: 0;
}
.order-summery .order-summery-input {
width: 100px !important;
height: 40px;
border-radius: 25px;
text-align: center;
margin: 1em auto;
}
.order-summery .order-summery-remove {
font-size: 0.7em;
padding: 0 10px;
background: #d63639;
display: inline;
} @media screen and (max-width: 768px) { .multistepsform fieldset {
padding: 0;
margin: 0;
width: 100%;
box-shadow: none;
}
.multistepsform .action-button,
#ct-submit {
width: 100%;
}
#uploaded-img-preview .img-wrapper {
width: 46%;
margin: 1em 0 0 0;
}
}
@media screen and (max-width: 576px) {
#uploaded-img-preview .img-wrapper {
width: 100%;
margin: 1em 0 0 0;
}
} .ct-collection-quote-box {
background: #f5f5f5;
padding: 1em;
border-radius: 6px;
margin: 0 auto;
text-align: center;
width: 80%;
}
.ct-collection-quote-box a {
background: #373795;
color: white;
border-radius: 25px;
padding: 1em 2em;
cursor: pointer;
font-weight: bold;
text-transform: uppercase;
margin: 1em 0;
text-decoration: none;
display: inline-block;
}
.ct-collection-quote-box a,
.ct-collection-quote-box a:hover,
.ct-collection-quote-box a:focus,
.ct-collection-quote-box a:active,
.ct-collection-quote-box a:visited {
text-decoration: none !important;
}