@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/*
	The following file is based on the HTML5 Boilerplate and has been adapted by Luke Roughley for the Couponshop website.
	Credit to Nicolas Gallagher, Jonathan Neal, Kroc Camen, and the H5BP dev community and team.
==========================================================================
	Base styles
========================================================================== */
div, p, a, b, strong, li, ul, ol, i, h1, h2, h3, h4, h5, h6, table, tr, td {
    font-family: 'Inter', sans-serif;
    font-weight: normal;
    color: #414141;
}

.test {
    font-family: 'Inter', sans-serif;
}

td, p, a, h3, h2,
h4, span, strong, div, small, input, button, i {
    font-family: 'Inter', sans-serif;
    color: #414141;
    font-weight: 400;
    font-size: 12px;
    background-color: transparent;
}

select {
    font-family: 'Lato', sans-serif;
    color: #414141;
    font-weight: 400;
    background-color: transparent;
    font-size: 15px;
}

label {
    font-size: 13px;
}

body {
    font-size: 1em;
    line-height: 1.4;
    color: #414141;
}

body html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #c7e6ed;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */
.chromeframe {
    margin: 0.2em 0;
    background: #c7e6ed;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   MAIN STYLING
   ========================================================================== */
#mti_wfs_colophon {
    display: none !important;
}

.subNote {
    display: block;
    margin-top: 20px;
}

/* CONTAINER */
:root {
    --header-height-offset: 0px; /* Adjust this value (e.g., 20px or -10px) to tweak the size to your liking */
    --footer-height: 120px; /* Manually adjust the footer height here */
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
}

header {
    flex-shrink: 0;
}

.page-body {
    flex: 1 0 auto;
    background-color: #EFEFEF;
    padding-bottom: 90px;
}

footer {
    flex-shrink: 0;
}

.page-contents {
    display: flex;
    margin-top: 0 !important;
    gap: 24px;
}

.logo-container {
    display: flex;
    margin: 30px auto 0;
    height: 150px;
    position: relative;
}

.logo-container img {
    height: 100%;
}

.content-card {
    width: 100%;
    position: relative;
    background-color: white;
    padding: 36px 62px 62px;
    box-shadow: 0 0 6px 6px rgb(0 0 0 / 0.03), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    border-radius: 8px;
    margin: 0 0 42px;
    overflow-x: scroll;
    min-height: calc(100vh - 450px);
}

.orders .content-card {
    min-height: calc(100vh - 400px);
}

.products .create-products-card {
    min-height: auto;
}

.content-card hr {
    border-color: #F5F5F5;
    margin: 25px -62px 0;
}

.configuration .form-section {
    width: fit-content;
}

/* DEFAULTS */
input[type="text"], input[type="number"], input[type="password"], input[type="email"] {
    width: 100%;
    text-indent: 9px;
    height: 50px;
    text-align: start;
    border-radius: 0;
}

.login_form {
    border: 0.5px solid #0f0f0f !important;
    background-color: #dde6f4 !important;

    border-radius: 10px !important;
    width: 70% !important;
    padding: 12px !important;
    margin: 10px 0 !important;
    box-sizing: border-box !important;
}

.login_form:focus {
    border: 0.5px solid #0f0f0f !important;
    background-color: #dde6f4 !important;
}

input:focus {
    background-color: #FBF7FB !important;
    outline: none !important;
    border-bottom: 1px solid #C481D1 !important;
}

.padding-6 {
    padding-bottom: 6px;
}

h2, h3, h4, h5 {
    font-weight: bold;
    font-family: 'Inter', sans-serif;
    text-align: start;
    margin: 0;
}

h2 {
    font-size: 17px;
}

h3 {
    font-size: 15px;
}

h4 {
    font-size: 15px;
}

h5 {
    font-size: 16px;
}

.form-contents {
    display: flex;
    justify-content: space-between;
}

.form-contents > div {
    width: 44%;
}

.form-section {
    padding: 38px 0 40px;

}

.input {
    padding-top: 29px;
}

.flex-form {
    display: flex;
    justify-content: space-between;
    width: 100% !important;
    position: relative;
    align-items: end;
    gap: 30px
}

.flex-form .input {
    padding-top: 0;
}

.flex-form button {
    width: fit-content;
}

.description, .shipping_message {
    padding: 0;
    margin-right: -40px;
    min-height: 60px;
    max-height: 200px;
    resize: vertical;
}

label {
    font-family: 'Inter', sans-serif;
}

/* HEADER */
header {
    width: 100%;
    position: relative;
}

.header-area {
    display: flex;
    flex-direction: column;

}

header nav a:hover {
    color: white;
}

.container {
    margin: auto;
    max-width: 1200px;
}

.table-titles td {
    font-weight: bold;
}

.header_container{
    background-color: #362157;
    overflow: hidden;
}
.no-js{
    background-color: #362157;
}
.header-settings {

    display: flex;
    align-items: center;
    margin: 60px 0 10px;
    position: relative;
    top: -25px;
    justify-content: space-between;
}

.header-settings nav {
    display: flex;
    align-items: center;
}

.header-settings nav div {
    display: flex;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

.nav-links {
    display: flex;
}

.header-settings nav div svg {
    padding-right: 10px;
}

.header-settings nav a {

    margin-left: 33px;
    border: #9e72ff solid 1px;
    padding: 12px 21px;
    border-radius: 0 15px 15px 15px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    cursor: pointer;
}

#logoutlink:hover {
    border-radius: 0 15px 15px 15px;
    background-color: #b89aff !important;
    color: #ffffff !important;
}

#logoutlink:active {
    border-radius: 0 15px 15px 15px;
    background-color: #8c5bff !important;
    /*border: 1px solid #9e72ff;*/
}
#logoutlink{
    border-radius: 0 15px 15px 15px;
    background-color: #9e72ff !important;
    /*color: #ffffff !important;*/
}

@media screen and (max-width: 575px) {
    .button-primary {
        font-size: 14px !important;
        padding: 12px 0 !important;
        width: 100% !important;
    }
}

.checkout-page {
    background-color: #EFEFEF;
    height: 100vh;
}

.checkout-page-contents {
    display: flex;
    justify-content: center;
    margin: -82px 0 0 !important;
}

.checkout-contents {
    width: fit-content !important;
}

.nav-area, .checkout-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    background-color: #EFEFEF;
    margin: auto;
    height: 180px;
}

.main-nav {

    margin: 40px auto 140px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

header .main-nav a {
    display: flex;
    background-color: #FFFFFF;
    width: fit-content;
    margin: 10px 13px;
    border-radius: 0 15px 15px 15px;
    align-items: center;
    padding: 0 28px;
    cursor: pointer;
    color: #3c3c3c;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    font-size: 12px;
    line-height: 15px;
    font-weight: 600;
    border-radius: 0 15px 15px 15px;
    text-align: center;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    /*border: 1px solid #9e72ff;*/
}

header .main-nav a div {
    width: 10px;
    height: 15px;
    padding: 16px 0
}

header .main-nav a:hover {
    background-color: #d1d1d1;
    color: #3c3c3c !important;
}

.main-nav a:focus-within span {
    color: white !important;
}

#bloglink {
    display: block;
    border: 0;
    font-size: 14px;
    margin: 0 !important;
    line-height: 34px;
    height: 35px;
}

.mainlogo {
    display: flex;
    align-items: center;
}

.welcome {
  font-family: Inter, arial, helvetica, sans-serif;
  font-weight: 800;
  font-size: 50px;  /* desktop default from current styling */
  color: #362157;
  /* Choose a fixed opsz value; Inter’s typical range is 14..32 */
  font-variation-settings: "opsz" 32, "wght" 900;

}
.resetPw {
  font-family: Inter, arial, helvetica, sans-serif;
  font-weight: 800;
  font-size: 40px;  /* desktop default from current styling */
  color: #362157;
  /* Choose a fixed opsz value; Inter’s typical range is 14..32 */
  font-variation-settings: "opsz" 32, "wght" 900;

}

.welcome_txt {
    font-size: 12px;
    font-weight: 550;
    color: #352157;
    font-family: 'Inter', sans-serif;

}

.login_Feilds {
    font-size: 20px;
    color: #362157;
    font-family: Inter black, sans-serif;
    font-weight: 800;
}


.mailer-logo {
    font-size: 21px;
    font-weight: 500 !important;
    font-family: 'Inter', sans-serif;
    line-height: 26px;
    color: #333738;
    position: relative;
    background-color: #AADCDC;
    height: 100%;
    margin-left: 10px;
    padding: 7px 21px;
    border-radius: 20px;
}

header .main-nav section div:hover a {
    display: block;
}

header .main-nav section div a {
    border-top: 1px solid #c7e6ed;
}

header i {
    position: absolute;
    top: 8px;
    font-size: 16px;
    right: 10px;
}


#blog-edit #bloglink,
#blog-create-new #bloglink,
#blog-posts #bloglink,
#blog-edit #bloglink,
#dash #dashboardlink,
#cms-home #cmslink,
#cms-whoisjordon #cmslink,
#cms-inthepress #cmslink,
#cms-mission #cmslink,
#cms-contact #cmslink,
#cms-messages #cmslink,
#cms-forum #cmslink,
#users #userslink,
#useredit #userslink,
#loan-book #loanbooklink,
#arrears #arrearslink,
#arrears-user #arrearslink,
#retailers #retailerslink,
#retailers-single #retailerslink,
#applications #statslink,
#applicationdetails #statslink {
    font-weight: bold;
    text-decoration: underline;
}

/* LOGIN */

.login {
    height: 100vh;
    width: 100vw;
    background-color: #F8F8F8;
}

.login p {
    font-size: 15px;
    line-height: 24px;
    margin: 1.5em 0 2em;
}

.login h1 {
    font-family: 'Inter', sans-serif;
    color: #000000;
    font-size: 32px;
    font-weight: 600;
    line-height: 29px;
    text-decoration-thickness: 10px !important;
    text-decoration: underline;
    text-decoration-color: #9e72ff;
    text-underline-offset: 1px;
    text-decoration-skip-ink: none;
    white-space: pre !important;
    margin: 0 0 39px;
}

.login-contents {
    display: flex;
    position: absolute;
    left: 50%;
    top: 200px;
    transform: translateX(-50%);
    gap: 56px;
}

.login-intro {
    width: 600px;
}

.login-form-contents {

    width: 500px;

}

.login-form-contents a {
    padding-left: 20px;
    text-decoration: underline;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

.login-form-contents h2 {
    padding: 20px 0 5px;
}

.login-form-contents a:hover {
    color: #C481D1;
}

p.fail {
    padding: 2%;
    border-radius: 12px 12px 12px 12px;
    background-color: #924530;
    border: 1px solid #482720;
    margin: -20px 0;
    color: #fff;
    width: 50%;
}

.btn:hover {
    background-color: #ADA8D0 !important;
    color: #FFFFFF !important;
}

.btn.red {
    color: #fff !important;
    background-color: #a11;
}

.btn.red:hover {
    background-color: #c11;
}

.btn.green {
    color: #fff !important;
    background-color: #77A681;
}

.btn.green:hover {
    background-color: #1c1;
}

.btn.black {
    color: #fff !important;
    background-color: #111;
}

.btn.black:hover {
    background-color: #222;
}

.button-primary {
    font-family: 'Inter', sans-serif;
    border-radius: 40px;
    width: fit-content;
    font-size: 18px;
    font-weight: bold;
    line-height: 36px;
    border: 0;
    background-color: #AADCDC;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    padding: 14px 50px;
}

.button-primary:disabled {
    color: #ADB0B5 !important;
    background-color: #f7f7f7 !important;
}

.btn {
    border-radius: 40px;
    height: 64px;
    width: 100%;
    font-size: 14px;
    line-height: 38px;
    border: 0;
    background-color: #423893;
    color: #fff;
    cursor: pointer;
    text-indent: -30px;
    margin-top: 24px;
    background-image: url('/frontend/img/payl8r-arrow-white.png');
    background-repeat: no-repeat;
    background-position: 90% center;
    background-size: 34px;
    max-width: 291px;
    margin-left: auto;
    text-align: center;
    margin-right: auto;
}

.btn:disabled {
    color: #ADB0B5 !important;
    background-color: #f7f7f7 !important;
    background-image: url('/frontend/img/payl8r-arrow-grey.png');
}

table {
    width: 100%;
}

.table-filters {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    padding-top: 24px;
}

.table-filters > h2 {
    padding-left: 20px;
}

.table-wrapper {
    overflow-x: scroll;
    margin: 10px -62px 0;
    padding-bottom: 12px;
    position: relative;
}

.table-scroll {
    transform: rotateX(-180deg);
    margin-top: 32px;
}

.table-scroll::-webkit-scrollbar {
    border-radius: 7px;
    height: 14px;
    margin: 15px 31px 0;
}

.table-scroll::-webkit-scrollbar-track {
    /* Customize the scrollbar track */
    margin: 40px;
}

.table-scroll::-webkit-scrollbar-thumb {
    /* Customize the scrollbar thumb */
    background-color: #DDDDDD;
    border-radius: 7px;
}

.table-scroll-inner {
    transform: rotateX(-180deg);
}

#orders_table {
    width: 1732px;
}

table tr td {
    padding: 15px 10px;
}

table tr:nth-child(2n) {
    background-color: #FAFAFA;
}

.tabs {
    background-color: #fff;
    width: 100%;
    padding-top: 20px;
}

.tab {
    float: left;
    margin-right: 2px;
    cursor: pointer;
    font-size: 11px;
    padding: 10px;
}

.tab.selected {
    background-color: #65c6c0;
}

/* HOME/DASH */
.section {
    padding: 3%;
    background-color: #c1e1df;
    width: 94%;
    margin-bottom: 20px;
    display: none !important;
}

.section.selected {
    display: block !important;
}

.section.controls {
    display: block !important;
}

.section h3,
.section h4 {
    margin-left: 10px;
}

.section .left {
    float: left;
    width: 47%;
}

.section .right {
    float: right;
    width: 47%;
}

.section p {
    background-color: #fff;
    opacity: 0.9;
    margin: 10px;
    padding: 5px;
}

/* CMS Pages */
.cms .leftcol {
    width: 20%;
    float: left;
    margin-right: 5%;
}

.cms .rightcol {
    width: 75%;
    float: left;
}

.cms .leftcol a {
    line-height: 35px;
    height: 35px;
    background-color: #B4ECC7;
    color: #eee;
    display: block;
    padding: 0 5px;
}

.cms textarea {
    resize: none;
    height: 100px;
    max-width: 390px;
    padding: 5px;
}

.cms .leftcol a:hover {
    background-color: #c7e6ed;
    color: #B4ECC7;
}

.cms input[type="text"], .cms label, .cms .comment {
    max-width: 400px;
    display: block;
}

.cms label {
    margin-top: 5px;
    margin-bottom: 2px;
}

.cms .comment {
    font-size: 10px;
}

.cms input[type="submit"] {
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
}

.cms .element {
    margin: 10px 0;
    border-bottom: 1px dashed #c7e6ed;
}

/* TABLE PAGES (admin overview, blog posts) */

.blog-posts p {
    overflow: hidden !important;
}

.blog-posts #postscontainer p.first {
    width: 10%;
}

.blog-posts #postscontainer p.second {
    width: 40%
}

.blog-posts #postscontainer p.third {
    width: 15%
}

.blog-posts #postscontainer p.forth {
    width: 20%;
}

.blog-posts #postscontainer p.fifth {
    width: 15%;
}

#arrears-user #postscontainer p.first {
    width: 25%;
}

#arrears-user #postscontainer p.second {
    width: 20%
}

#arrears-user #postscontainer p.third {
    width: 15%
}

#arrears-user #postscontainer p.forth {
    width: 15%;
}

#arrears-user #postscontainer p.fifth {
    width: 25%;
}

.admin #postscontainer p.first {
    width: 10%;
}

.admin #postscontainer p.second {
    width: 40%
}

.admin #postscontainer p.third {
    width: 40%
}

.admin #postscontainer p.forth {
    width: 10%;
}

.users #postscontainer p.first {
    width: 10%;
}

.users #postscontainer p.second {
    width: 20%
}

.users #postscontainer p.third {
    width: 40%
}

.users #postscontainer p.forth {
    width: 30%;
}

.dash #postscontainer p.first {
    width: 10%;
}

.dash #postscontainer p.second {
    width: 15%;
}

.dash #postscontainer p.third {
    width: 20%;
}

.dash #postscontainer p.forth {
    width: 15%;
}

.dash #postscontainer p.fifth {
    width: 20%;
}

.dash #postscontainer p.sixth {
    width: 20%;
}

.dash #postscontainer p {
    font-size: 11px;
}

#applications #postscontainer p.first {
    width: 10%;
}

#applications #postscontainer p.second {
    width: 15%;
}

#applications #postscontainer p.third {
    width: 20%;
}

#applications #postscontainer p.forth {
    width: 15%;
}

#applications #postscontainer p.fifth {
    width: 20%;
}

#applications #postscontainer p.sixth {
    width: 20%;
}

#useredit #postscontainer p.first {
    width: 10%;
}

#useredit #postscontainer p.second {
    width: 15%;
}

#useredit #postscontainer p.third {
    width: 20%;
}

#useredit #postscontainer p.forth {
    width: 15%;
}

#useredit #postscontainer p.fifth {
    width: 20%;
}

#useredit #postscontainer p.sixth {
    width: 20%;
}

.arrears #postscontainer p.first {
    width: 10%;
}

.arrears #postscontainer p.second {
    width: 25%;
}

.arrears #postscontainer p.third {
    width: 20%;
}

.arrears #postscontainer p.forth {
    width: 10%;
}

.arrears #postscontainer p.fifth {
    width: 25%;
}

.arrears #postscontainer p.sixth {
    width: 10%;
}

.retailers #postscontainer p.first {
    width: 5%;
}

.retailers #postscontainer p.second {
    width: 20%;
}

.retailers #postscontainer p.third {
    width: 25%;
}

.retailers #postscontainer p.forth {
    width: 20%;
}

.retailers #postscontainer p.fifth {
    width: 15%;
}

.retailers #postscontainer p.sixth {
    width: 15%;
}

#useredit #postscontainer {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

#postscontainer p {
    margin: 0;
    font-size: 11px;
    padding: 0;
}

#postscontainer a, #postscontainer div {
    display: block;
    height: 35px;
}

#pagination {
    background-color: transparent !important;
}

.paginator {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    padding-top: 32px;
}

#postscontainer .posts-header p {
    background-color: #423893;
    color: #eee;
    height: 35px;
}

#postscontainer a:nth-child(even), #postscontainer div.admin:nth-child(even) {
    background-color: #c7e6ed
}

select.paginate {
    margin-left: 5px;
}

/* NEW BLOG POST */
#shortdescription {
    resize: none;
}

#post {
    width: 100%;
    height: 200px;
}

#pagination {
    border: 0 !important;
}

#pagination a {
    width: 32px;
    height: 32px;
    margin-right: 16px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 34px;
    float: left;
    border: #707070 1px solid;
    border-radius: 6px;
    font-weight: 400;
}

#postscontainer #pagination a:nth-child(even) {
}

#pagination a.current, #pagination a:hover {
    background-color: #EFEFEF !important;
    border: #EFEFEF 1px solid;
}

/* CREATE ADMIN */
#create-admin form {
    width: 400px;
}

/* change-password */
#change-password form {
    width: 400px;
}

#change-password p {
    font-size: 15px;
    line-height: 24px;
}

/* NOTIFICATIONS */
#notifications {
    z-index: 1000;
    position: relative;
    background-color: #EFEFEF;
}

.message {
    padding: 10px;
    border-radius: 7px;
    font-size: 12px;
    margin: -8px 0;
}

.success-message {
    background-color: #B4ECC7;
}

.error-message {
    background-color: #FFD2D2;
}

#notifications .notification {
    text-align: center;
    font-weight: bold;
    background-color: #FFD2D2;
}

#notifications .notification.success {
    background-color: #0a0;
    border-bottom: 1px solid #0d0;
}

.application form {
    margin: 10px;
    position: relative;
    width: auto;
}

.application textarea {
    padding: 2%;
    width: 96%;
    margin-bottom: 10px;
    height: 50px;
}

/* MISSION AND VISION */

/* CONTACT */

/* FORUM CLIPPING & BARCODE DISPLAY PAGE */

/* FORUM ARCHIVE */

/* FORUM SINGLE */

/* 404 */

/* FOOTER */
footer {
    height: var(--footer-height);
    position: relative;
    background-color: #362157;
    flex-shrink: 0;
}

.footer-contents, .footer-contents p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 14px;
}

input, select, textarea {
    margin-top: 16px;
}

select:focus-visible, textarea:focus-visible {
    outline: none;
    border: #C481D1 1px solid !important;
    border-radius: 4px;
}

.standard-input,
#opc_input,
input {
    padding: 14px;
    border: 0;
    border-bottom: 1px solid #707070;
    width: 100%;
    font-size: 15px;
    text-align: left;
    box-sizing: border-box;
    -webkit-transition: border 0.2s, color 0.2s, background-color 0.2s;
    transition: border 0.2s, color 0.2s, background-color 0.2s;
    background-repeat: no-repeat;
    background-size: auto 22px;
    background-position: 97%;
    background-image: none;
    background-color: #f9f9f9;
}

select {
    display: block;
    width: 159px;
    height: 53px;
    border-radius: 6px;
    border: 1px solid #707070;
    padding: 10px;
    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-appearance: none;
}

.info-box {
    width: 48%;
    margin: 1%;
    float: left;
    background-color: rgba(12, 188, 198, 1);
    color: #fff;
    position: relative;
    border-radius: 4px;
}


.info-box a {
    padding: 15px;
    height: 100%;
    display: block;
    background-color: rgba(0, 0, 0, 0.4);
    cursor: default;
}

.info-box.important a {
    background-color: transparent;
    cursor: pointer;
}

.info-box.important:hover a {
    background-color: rgba(0, 255, 145, 0.5);
}

.info-box h4,
.info-box p {
    color: #fff;
    text-align: center;
}

.info-box h4 {
    font-weight: 300;
}

.progress-meter {
    border-radius: 30px;
    height: 60px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.17);
    position: relative;
    overflow: hidden;
    margin-top: 24px;
}

.progress-meter .stage {
    background-color: #B4ECC7;
    opacity: 0.8;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
}

.progress-meter-inner {
    position: relative;
    z-index: 20;
    padding-top: 6px;
}

.progress-meter-inner * {
    text-align: center;
}

.order-section {
    padding: 15px;
}

.order-section.order-details {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: rgba(0, 0, 0, 0.04);
}

.order-section .t {
    position: absolute;
    top: -12px;
    padding: 2px;
    background-color: #fff;
    font-size: 20px;
    font-weight: 300;
}

.detail {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 400;
}

.line {
    margin-top: 10px;
    border-bottom: 1px solid #ddd;
}

.detail strong {
    font-weight: 700;
    font-size: 18px;
}

.detail.error,
.detail.error * {
    color: red !important;
    font-weight: bold !important;
    cursor: pointer;
}

.detail-expander {
    padding: 4px 15px;
    background-color: rgba(0, 0, 0, 0.05);
    margin-bottom: 4px;
    background-image: url('/frontend/img/payl8r-down-c.png');
    background-repeat: no-repeat;
    background-position: 98% 50%;
    background-size: 50px;
}

.detail-expander strong {
    display: block;
}

.detail-expander .detail {
    cursor: pointer
}

.detail-expander .more {
    display: none;
}

.detail-expander.expanded .more {
    display: block;
    padding: 4px;
    background-color: rgba(0, 0, 0, 0.075);
    position: relative;
}

label {
    position: relative;
}

textarea {
    height: 60px;
    width: 100%;
    font-family: 'Lato', sans-serif;
    line-height: 24px;
    font-size: 15px;
}

.required {
    font-size: 25px;
    top: -10px;
    color: red;
    position: absolute;
}

.warning p {
    margin: unset;
    padding-left: 20px;
    font-size: 15px;
}

.warning {
    display: flex;
    align-items: center;
    color: #FFC12D;
    padding: 15px 47px;
    background-color: #FFF9E9;
    border-radius: 7px;
}

svg {
    display: flex;
    flex-shrink: 0;
}

.recipient-total {
    margin: 24px 0 52px;
}

#recipient_total {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 15px !important;
}

#recipient_total:disabled {
    color: #414141
}

.custom-scrollbar {
    height: 14px;
    width: calc(100% + 44px);
    background-color: #F5F5F5;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 7px;
}

@-moz-document url-prefix() {
    .custom-scrollbar {
        display: none;
    }
}

.center {
    clear: both;
}

/* notifications */
#notifications .errors,
#notifications .warnings,
#notifications .successes,
#notifications .generals {
    margin: 0;
}

/* Show only green (success) notifications */
#notifications .errors,
#notifications .warnings,
#notifications .generals {
    display: none !important;
    margin: 0;
}

#notifications .errors p,
#notifications .warnings p,
#notifications .successes p,
#notifications .generals p {
    margin: 0;
    font-size: 15px;
    padding: 10px;
}

#notifications .errors p {
    background-color: #aa2222;
}

#notifications .warnings p {
    background-color: #B4ECC7;
}

#notifications .successes p {
    background-color: #B4ECC7;

}

#notifications .generals p {
    background-color: #222;
}

#notifications div p:nth-child(2n) {
    opacity: 0.9 !important;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */
.hidden {
    display: none !important;
    visibility: hidden;
}

.clearfix {

}

.page-items {
    display: flex;
    align-items: center;
}

.page-items select {
    margin: 0 0 0 20px;
    width: 83px;
    height: 43px;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

.button-bar {
    display: flex;
    flex-wrap: wrap;
}

.button-bar .button {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    border: 0;
    padding: 10px 25px;
    text-align: center;
    border-radius: 0 15px 15px 15px;
    display: inline-block;
    width: fit-content;

}

.login-btn {

    background-color: #9e72ff !important;
    color: #ffffff;
    padding: 12px 32px;
    display: inline-block;
    text-transform: capitalize;
    font-size: 16px;
    border-radius: 0 15px 15px 15px;
    text-align: left;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    font-weight: 600;
    width: 130px;
}

.button-bar .button {
    font-size: 11px;
    margin: 6px 8px;
    background-color: #FFFFFF !important;
    color: #3c3c3c !important;
    border: 1px solid #9e72ff !important;
}
.button-bar .button:hover {
    font-size: 11px;
    margin: 6px 8px;
    background-color: #c8c8c8 !important;
    color: #3c3c3c !important;
    /*border: 1px solid #9e72ff !important;*/
}

.login-btn {
    font-size: 12px;
    /*background-color: #3c3c3c;*/
    color: #FFFFFF;
}

.login-btn:hover {
    background-color: #C481D1;
}

.login-btn:focus {
    background-color: #C481D1 !important;
    border: 0 !important;
}

.button-bar .button.selected {
    background-color: #9e72ff !important;
    color: #FFFFFF !important;
}

.button-bar .button:hover {
    background-color: #EBEEF5;
    color: #3c3c3c !important;
}

.button-bar .button.selected:hover {
    background-color: #b89aff !important;
}

/* ==========================================================================
   Print styles.
   ========================================================================== */
@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a, a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after, a[href^="#"]:after {
        content: "";
    }

    pre, blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;

    }

    tr, img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p, h2, h3 {
        orphans: 3;
        widows: 3;
    }

    h2, h3 {
        page-break-after: avoid;
    }
}

.cancel_order_button:hover {
    cursor: pointer;
}

.cancel_button {
    border: 0;
    background-color: #a11;
    color: #fff;
    padding: 10px;
    text-align: center;
    border-radius: 3px;
    display: inline-block;
}

.cancel_button:hover {
    cursor: pointer;
    background-color: #c11;
}

.view_notes_button:hover {
    cursor: pointer;
}

.view_notes_button {
    border: 0;
    background-color: #1a1;
    line-height: 25px;
    height: 25px;
    color: #fff;
    padding: 10px;
    text-align: center;
    border-radius: 3px;
    display: inline-block;
    margin-top: 2%;
    width: 15%;
}

.view_notes_button:hover {
    cursor: pointer;
    background-color: #1c1;
}

#payl8r_template_header {
    width: 100%;
    height: 10%;
    text-align: center;
    display: inline-block;
}

#payl8r_template_full {
    width: 100%;
    height: auto;
    display: inline-block;
    margin: 0;
    padding: 0;
}

#payl8r_template_leftcolumn {
    height: auto;
    width: 50%;
    float: left;
    display: inline-block;
}

#payl8r_template_rightcolumn {
    height: auto;
    width: 50%;
    float: right;
    display: inline-block;
}

.payl8r_template_content_wrapper {
    padding: 5%;
    height: auto;
}

.payl8r_template_content {
    padding: 5%;
    border: 1px solid;
    border-color: rgb(229, 230, 233) rgba(223, 224, 228, 0.72) rgb(208, 209, 213);
    border-radius: 3px;
    height: auto;
    margin-bottom: 5%;
}

.payl8r_template_content_text {
    text-align: left;
}

.payl8r_template_content_text h3 {
    font-weight: 300;
    color: #777;
    text-align: left;
}

.payl8r_template_content_text p {
    width: 100%;
    border-bottom: 1px solid rgba(206, 206, 206, 0.23);
    padding-bottom: 1%;
    padding-top: 0.5%;
    margin-bottom: 2%;
}

.payl8r_template_content_text p span {
    display: block;
    color: #B4ECC7;
}

.payl8r_template_content_text p span:first-child {
    margin-top: 2%;
}

.payl8r_template_content_text p span:last-child {
    margin-bottom: 3%;
}

.view_order_notes_form {
    margin: 0;
    padding-top: 2%;
    width: 100%;
}

@media (max-width: 950px) {
    #payl8r_template_leftcolumn, #payl8r_template_rightcolumn {
        float: none;
        width: 100%;
    }
}

.clickable_order_id {
    text-decoration: underline !important;
}

#items {
    margin-bottom: 50px;
}

.item {
    display: flex;
    align-items: start;
    width: 100%;
    justify-content: space-between;
    padding-top: 2px;
}

.item-values {
    display: flex;
    align-items: flex-start;
    width: 210px;
    justify-content: space-between;
}

.item-values > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.item_quantity {
    padding-left: 15px;
}

.item-values input {
    width: 70px;
    background-color: unset;
    height: 40px;
    padding: 8px 10px;
    box-sizing: border-box;
}

.item-values input:focus {
    background-color: unset !important;
}

.item_price {
    padding-right: 20px;
    position: relative;
}

.item_delete {
    cursor: pointer;
    position: absolute;
    right: 0;
}

.mailer_Create {


      font-family: Inter, arial, helvetica, sans-serif;
  font-weight: 900;
  font-size: 32px;  /* desktop default from current styling */
  color: #362157;
  /* Choose a fixed opsz value; Inter’s typical range is 14..32 */
  font-variation-settings: "opsz" 32, "wght" 900;
}

.button-submit {
    display: flex;
    justify-content: center;

    width: 50%;
    color: white;
    height: fit-content;
    padding: 16px 20px;
    border: none;
    background: #9e72ff;
    border-radius: 0 15px 15px 15px;
    align-items: center;
    font-size: 14px;
    font-family: Inter black, sans-serif;
    font-weight: bold;
    white-space: nowrap;
    border-radius: 0 15px 15px 15px;
    text-align: center;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;

}

.orders.admin .button-submit,
.create-order .button-submit {
    width: 200px !important;
    min-width: 180px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.configuration .form-section .button-submit {
    width: fit-content !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.button-submit:hover {
    background-color: #c0a4fd;
}

.button-submit:active {
    background-color: #c0a4fd;
    color: white;
}

.button-submit svg {
    padding-right: 10px;
}
.button-submit-forgot-pw {
    display: flex;
    justify-content: center;

    width: 25%;
    color: white;
    height: fit-content;
    padding: 16px 20px;
    border: none;
    background: #9e72ff;
    border-radius: 0 15px 15px 15px;
    align-items: center;
    font-size: 14px;
    font-family: Inter black, sans-serif;
    font-weight: bold;
    white-space: nowrap;
    border-radius: 0 15px 15px 15px;
    text-align: center;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;

}

.button-submit-forgot-pw:hover {
    background-color: #c0a4fd;
}

.button-submit-forgot-pw:active {
    background-color: #c0a4fd;
    color: white;
}

.button-submit-forgot-pw svg {
    padding-right: 10px;
}

.button-secondary {
    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
    color: #414141;
    font-weight: bold;
    padding: 10px 30px;
    background-color: #EFEFEF;
    white-space: pre-wrap;
    border-radius: 0 15px 15px 15px;
    cursor: pointer;
    text-align: center;
}

.button-secondary:hover {
    background-color: #D8D8D8;
}

.button-secondary:active {
    background-color: #414141;
    color: white;
}

.btn-small {
    border-radius: 0 15px 15px 15px;
    height: 32px;
    width: 100%;
    font-size: 14px;
    line-height: 19px;
    border: 0;
    background-color: #423893;
    color: #fff;
    cursor: pointer;
    text-indent: 0;
    margin-top: 12px;
    background-image: url('/frontend/img/payl8r-arrow-white.png');
    background-repeat: no-repeat;
    background-position: 90% center;
    background-size: 34px;
    max-width: 145px;
    margin-left: auto;
    text-align: center;
    margin-right: auto;
}

a.btn-small {
    display: block;
    padding-top: 10px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.delete_button {
    display: flex;
    justify-content: end;
}

#changepasslink {
    border: none;
    text-decoration: underline 1px solid;
    padding: unset;
}

.mobile-display-only {
    display: none;
}

.desktop-mtop-0 {
    margin-top: 0;
}

@media only screen and (max-width: 1399px) {
    .container {
        max-width: 1000px;
    }

    .description, .shipping_message {
        margin-right: 100px;
        min-height: 60px;
        max-height: 200px;
        padding-right: 10px;
        resize: vertical;
    }

    .warning {
        padding: 15px 30px;
    }

    table tr td {
        padding: 15px 8px;
    }

    .login-contents {
        top: 140px;
    }
}

@media only screen and (max-width: 1199px) {
    .container {
        max-width: 850px;
    }

    .item {
        flex-direction: column;
        align-items: start;
    }

    .item-values {
        padding-top: 15px;
        width: 250px;
    }

    .description, .shipping_message {
        margin-right: 0;
        resize: vertical;
    }

    .warning {
        padding: 15px 30px;
    }

    .content-card {
        padding: 36px 40px 62px;
    }

    .content-card hr {
        margin: 25px -40px 0;
    }

    .checkout-page-contents {
        margin: -82px 0 0 !important;
    }

    .main-nav {

        padding: 0 17% !important;
    }

    .form-contents > div {
        width: 47%;
    }

    .table-wrapper {
        margin: 32px -40px 0
    }

    .custom-scrollbar {
        width: 100%;
    }

    .flex-form {
        flex-direction: column;
        align-items: start;
    }

    .login {
        position: relative;
    }

    .desktop-mtop-0 {
        margin-top: 0;
    }
}

@media only screen and (max-width: 991px) {
    .page-contents {
        margin-left: 16px;
        margin-right: 16px;
    }

    .container {
        max-width: 767px;
    }

    .main-nav {
        padding: 0 !important;
    }

    .login-contents {
        flex-direction: column;
        top: 50px;
        gap: 0;
        padding: 30px 0;
    }

    .login-intro img, .login-contents h1 {
        display: none;
    }

    .desktop-mtop-0 {
        margin-top: 0;
    }
}

@media only screen and (max-width: 767px) {

    #changepasslink {
        padding: 0;
    }

    .button-bar {
        justify-content: center;
    }

    .header-settings {
        padding-top: 10px;
        top: 0;
        flex-direction: column;
        position: relative;
        justify-content: unset;
        min-height: auto;
        margin: 20px 0 10px;
        background-color: #362157;
    }

    .header-settings nav {
        position: relative;
        top: 0;
        align-items: center;
        padding: 10px 0;
        width: 100%;
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .header-settings nav a {
        font-size: 12px;
        padding: 8px 18px;
    }

    .nav-links {
        flex-direction: row;
        align-items: center !important;
        gap: 10px;
    }

    .nav-links a {
        margin-left: 10px !important;
    }

    .form-contents {
        flex-direction: column;
    }

    .page-body {

        padding-bottom: 0;
    }

    #container {
        min-width: unset;
    }

    .item {
        flex-direction: row;
        align-items: start;
        justify-content: start;
    }

    .item_description {
        width: 50%;
        margin-right: 30px;
    }

    .item-values {
        padding-top: 15px;
        width: 250px;
    }

    .description, .shipping_message {
        margin-right: -100px;
        min-height: 60px;
        max-height: 200px;
        resize: vertical;
    }

    .warning {
        padding: 15px 30px;
    }

    .content-card {
        margin: 0;
        box-shadow: none;
        width: auto;
    }

    .content-card hr {
        margin: 25px -40px 0;
    }

    .page-contents {
        margin: 40px 0 0 !important;
        flex-direction: column;
        gap: 0;
    }

    .nav-area, .checkout-header {
        height: auto;
        min-height: 100px;
    }

    .main-nav {
        margin: 20px auto;
    }

    .form-contents > div {
        width: 100%;
    }

    .table-wrapper {
        margin-top: 32px;
        padding-bottom: 12px;
    }

    .configuration {
        padding-bottom: 0;
    }

    .footer-contents {
        padding: 0 50px;
    }

    .login {
        background-color: white;
    }

    .login-form-contents {
        padding: 0;
        box-shadow: none;
    }

    .login-contents {
        top: 5%;
        gap: 16px;
        padding: 50px 0;
    }

    .login-contents {
        justify-content: center;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .login-intro {
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    table {
        min-width: 576px;
    }

    .desktop-mtop-0 {
        margin-top: 0;
    }

    .custom-scrollbar {
        display: none;
    }

    .checkout-contents {
        width: 100vw !important;
    }
}

@media only screen and (max-width: 575px) {
    .footer-contents {
        flex-direction: column-reverse;
    }

    .checkout-page {
        height: 100%;
    }

    .content-card {
        border-radius: unset;
    }

    .item {
        flex-direction: column;
        align-items: start;
        justify-content: space-between;
    }

    .item_description {
        width: 100%;
        margin-right: 0;
    }

    .item-values {
        width: 250px;
    }

    .page-items {
        align-items: end;
        flex-direction: column;
        width: 150px;
    }

    .page-items select {
        margin: 10px 0 0 0;
        width: 83px;
        height: 43px;
    }

    .login-form-contents {
        width: 100%;
    }

    .login-intro {
        width: 320px;
    }

    #change-password form {
        width: 100%;
    }

    .mobile-display-only {
        display: unset;
    }

    .desktop-mtop-0 {
        margin-top: 24px;
    }
}



/* Step 1: Headlines to Inter Black 900 at 20px (2026-02-06) */
h1,  h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 20px !important;
}

h2 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 30px !important;
}


/* Step 2: Headlines colour to #362157 (2026-02-06) */
h1, h2, h3, h4, h5, h6 {
  color: #362157 !important;
}




/* Step 3: Form field titles to Inter Bold 700 at 15px (2026-02-06) */
label, legend, .form-title, .field-title, .login_Feilds, .form label span, .form .label, th.label {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}


/* Step 4: Form field entries to Inter Semi-bold 600 at 14px (2026-02-06) */
input, select, textarea, .form input, .form select, .form textarea {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}


/* Step 5: Form field titles, entries and boxed text colour to #262626 (2026-02-06) */
label, legend, .form-title, .field-title, .login_Feilds, .form label span, .form .label, th.label,
input, select, textarea, .form input, .form select, .form textarea,
.info-box, .info-box p, .info-box h4 {
  color: #262626 !important;
}


/* Step 6: Button background colors to #9e72ff (2026-02-06) */
button, .btn, input[type="button"], input[type="submit"], .button:not(.button-bar .button), .button-primary, .button-submit, .view_notes_button {
  background-color: #9e72ff !important;
  background: #9e72ff !important;
}
button:hover, .btn:hover, input[type="button"]:hover, input[type="submit"]:hover, .button:not(.button-bar .button):hover, .button-primary:hover, .button-submit:hover, .view_notes_button:hover {
  background-color: #b89aff !important; /* slight lighten for hover */
  background: #b89aff !important;
}
button:active, .btn:active, input[type="button"]:active, input[type="submit"]:active, .button:not(.button-bar .button):active, .button-primary:active, .button-submit:active, .view_notes_button:active {
  background-color: #8c5bff !important; /* slight darken for active */
  background: #8c5bff !important;
}


/* Step 7: Button font color to #FFFFFF (2026-02-06) */
button, .btn, input[type="button"], input[type="submit"], .button:not(.button-bar .button), .button-primary, .button-submit, .view_notes_button {
  color: #FFFFFF !important;
}


/* Step 8: Button font to Inter Bold 700 at 15px (2026-02-06) */
button, .btn, input[type="button"], input[type="submit"], .button, .button-primary, .button-submit, .view_notes_button {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}


/* Step 9: Button radius 0px top-left, 15px other corners (2026-02-12) */
button, .btn, input[type="button"], input[type="submit"], .button, .button-primary, .button-submit, .view_notes_button, .login-btn, .btn-small, .button-bar .button {
  border-radius: 0 15px 15px 15px !important;
}

/* Utilities to reduce inline styles (2026-02-06) */
.text-center { text-align: center !important; }
.inline { display: inline !important; }
.fw-300 { font-weight: 300 !important; }
.login-illustration { padding-top: 100px !important; }
.maxw-400-auto { max-width: 400px !important; margin-left: auto !important; margin-right: auto !important; }
.pt-100 { padding-top: 100px !important; }
.pb-20 { padding-bottom: 20px !important; }
.mt-60 { margin-top: 60px !important; }
.text-indent-0 { text-indent: 0 !important; }
.px-10 { padding-left: 10px !important; padding-right: 10px !important; }
 .spacer-100 { display: block !important; height: 100px !important; width: 100% !important; }
.w-140 { width: 140px !important; }
.checkout-title { margin: 0 !important; padding: 30px 0 100px 0 !important; }


/* Global font reset to Inter to eliminate remaining Montserrat/Lato usage (2026-02-06) */
html, body, div, p, a, b, strong, li, ul, ol, i, table, tr, td, span, small, th {
  font-family: 'Inter', sans-serif !important;
}


/* Specific sizing for Legal notice textarea: set to max (200px) minus 20px (2026-02-18) */
#store_legal_message {
  height: 180px !important;
}