/* =========================================================== */
/* ====================== SPECIFICATIES ====================== */
/* =========================================================== */
#specificaties ~ * a { text-decoration: underline; color: var(--main-color); text-decoration-color: rgba(0,0,0,0.5); }


/* =========================================================== */
/* ======================= ADMIN TABLE ======================= */
/* =========================================================== */
.admintable { border-spacing: 0; padding: 0; margin: 1.5rem 0; width: 100%; }
.admintable tr td, .admintable tr th { padding: 0.25rem 0.75rem; text-align: left; }
.admintable tr td:not(:last-child) a,
.admintable tr th a { color: #404042; }
.admintable tr.inactive td:not(:last-child), .admintable tr.inactive td:not(:last-child) a { color: silver!important; text-decoration: line-through; text-decoration-color: silver; }
.admintable tr:nth-child(odd) td { background: #edf7fa; }
.admintable a { color: #00a8e9; }
.admintable tr.deleted td:not(.actions) { text-decoration: line-through; }


/* =========================================================== */
/* ======================== TRUST BAR ======================== */
/* =========================================================== */
.trustbar, .small { font-size: 0.8rem; }
.trustbar em { font-style: normal; color: #6dc148; font-weight: 700; }
.trustbar ul { padding-top: 0.75rem; height: 3rem; display: flex; align-items: center; flex-wrap: wrap; overflow: hidden; justify-content: center; width: 100%; }
.trustbar ul li { list-style: none; padding-right: 1.5rem; white-space: nowrap; height: 2.25rem; }
.trustbar ul li::before { content: "✔"; color: #6dc148; display: inline-block; margin-right: .1rem; font-size: 1.5rem; vertical-align: middle; position: relative; bottom: 0.1rem; line-height: 1.4; }
.trustbar ul.vertical { padding-top: 0; height: auto; display: block; align-items: left; width: auto; text-align: left; margin-bottom: 1.4rem; }
.trustbar ul.vertical li { height: 1.4rem; }
.trustbar ul.vertical li::before { line-height: 1.4rem; }


/* =========================================================== */
/* ========================== WELL =========================== */
/* =========================================================== */
.well {border: 1px solid rgba(0,0,0,0.15); padding: 2rem 1.75rem 2.5rem;}
.well.blue {background: #edf7fa;border: 0;}
.well *:first-child {padding-top: 0; margin-top: 0;}
.well *:last-child {margin-bottom: 0; padding-bottom: 0;}
div.well + .well {border-top: 0;}

.well.medium {padding: 1.5rem 1.75rem 1.65rem 1.75rem; position: relative;}
.floatlink {position: absolute; top: 0; right: 0; font-weight: bold;}
.well .floatlink {top: 1.5rem; right: 1.75rem;}

label.well {border-radius: 0.3rem; padding: 1rem 1.25rem 1.2rem 3rem; margin-bottom: 0.5rem; cursor: pointer; position: relative; line-height: 1.4;}
label.well span:first-child {float: right; font-weight: bold; color: #00a8e9;}
label.well.blue {border: 1px solid #00a8e9;}
label.well input {position: absolute; margin: 1.1rem 0 0 -1.75rem;}
label.well img {vertical-align: middle; display: inline-block; width: 2rem; margin-right: 0.3rem;}

label.well input[type="radio"] + *::before {top: 0; left: 1.2rem; background-position: center 1.25rem;}


@media only screen and (max-width: 600px) {
    .well.medium {padding-left: 0rem; padding-right: 0rem; border-left: 0; border-right: 0; border-bottom: 0; border-top: 1px solid rgba(0,0,0,0.15)!important;}
    .well .floatlink {right: 0rem;}
}


/* =========================================================== */
/* ======================= BRAND IMAGE ======================= */
/* =========================================================== */
#brandimage {margin-top: 1.5rem;}
#brandimage .container > div {min-height: 22rem;  padding-bottom: 37%; width: 100%; position: relative; border-radius: 0.3rem; overflow: hidden; background: url('/p/uploads/banners/lifetime-smiles.jpg') left center / cover no-repeat;}


/* =========================================================== */
/* ======================= ADMIN FORM ======================== */
/* =========================================================== */
.adminform.search {max-width: 100%;}
.adminform.search label {display: none;}
.adminform.search + p, .adminform.search + script + p {opacity: 0.5; position: relative; bottom: 0.75rem;}



/* =========================================================== */
/* ======================= PAGINATION ======================== */
/* =========================================================== */
ul.paginationlinks {margin: 50px 0 0; padding: 0; text-align: center;}
ul.paginationlinks li {list-style: none; display: none;}
ul.paginationlinks li a {display: block; padding: 0 7px 2px; border: 1px solid #dcdcdc; line-height: 1.4em;}
ul.paginationlinks li:last-child,
ul.paginationlinks li:first-child {display: inline-block;}
ul.paginationlinks li.visible {display: inline-block;}
ul.paginationlinks li.current a {background: #009ac7; border-color: #009ac7;}
ul.paginationlinks li.current a {color: white;}


@media only screen and (max-width: 600px) {
    ul.paginationlinks li.visible {display: none;}
    ul.paginationlinks li.current,
    ul.paginationlinks li.isnearmobile,
    ul.paginationlinks li:last-child,
    ul.paginationlinks li:first-child {display: inline-block;}
}

/* =========================================================== */
/* ======================== CHECKOUT ========================= */
/* =========================================================== */
.checkout #menutoggle, .checkout #search, .checkout #nav, .checkout #breadcrumbs {display: none!important;}
.checkout #header {height: 7rem;}
.checkout form > div {margin-bottom: 0.5rem;}
.checkout #header #brand {position: absolute;}

#checkout_steps {display: block; text-align: center; color: rgba(0,0,0,0.25);}
#checkout_steps li {width: 110px; text-align: left; display: inline-block; border-top: 1px solid rgba(0,0,0,0.15); padding-top: 8px;}
#checkout_steps li.past {border-color: #00a8e9;}
#checkout_steps li:last-child {border: 0; width: 0px;}
#checkout_steps li > span > * {
    white-space: nowrap;
    display: inline-block;
    -ms-transform: translateX(-50%); 
    -webkit-transform: translateX(-50%); 
    transform: translateX(-50%);
}
#checkout_steps li > span > a {color: #00a8e9;}
#checkout_steps li > span > a:before {content: ""; position: absolute; bottom: 0; width: 100%; height: 3.5rem;}
#checkout_steps li > *:before {position: absolute; margin: -16px 0 0 -5px; width: 11px; height: 11px; content: ""; 
    border-radius: 99px; border: 2px solid white; 
    box-shadow: 0px 0px 0.1px 1px #bbb; background: white;
}
#checkout_steps li.past > span:before,
#checkout_steps li.current > span:before {box-shadow: 0px 0px 0.1px 1px #00a8e9; background: #00a8e9;}


@media only screen and (max-width: 600px) {
    #checkout_steps {margin: 0 auto; width: 9rem;}
    #checkout_steps li {display: block; width: auto; border-top: none; border-left: 1px solid rgba(0,0,0,0.15); margin-left: 8px;}
    #checkout_steps li > ::before {margin: -16px 0 0 -8px;}
    #checkout_steps li > span > * {transform: translate(17px, -20px);}
    #checkout_steps li > span > a:before {height: 100%; left: 0; width: 2rem; margin-left: -2rem;}
}


/* =========================================================== */
/* ====================== ACCOUNT PAGE ======================= */
/* =========================================================== */
.accountpage {display: flex; flex-direction: row-reverse;}
.accountpage .accountcontent {flex-grow: 1; padding-right: 3rem; width: 100%;}
.accountpage .accountcontent h2 {margin-top: 0;}
.accountpage .accountmenu {padding-top: 0.85rem; position: relative; width: 15rem; border-left: 1px solid rgba(0,0,0,0.15); padding-left: 2.25rem;}
.accountpage .accountmenu ul {margin-left: 0;}
.accountpage .accountmenu ul li {list-style: none;}
.accountpage .accountmenu ul li.selected a {color: #404042;}


@media only screen and (max-width: 975px) {
    .accountpage {display: block;}
    .accountpage .accountcontent {padding-right: 0;}
    .accountpage .accountmenu {padding-left: 0; border: 0; padding-top: 0;}
}