* {
    /* box-sizing: border-box; */
    /* font-family: 'Montserrat', sans-serif; */
}

:root {
    --DarkBlue: #0B2A5B;
    --DarkPink: #b22964;
    --DarkYellow: #c17d2a;
    --DarkGreen: #697f36;
    --DarkGrey: #48535b;
    --Pink: #E83E8C;
    --Yellow: #eda517;
    --Green: #95b049;
    --Grey: #8ca0aa;
    --Blue: #0067ac;
    --LightBlue: #7da7d9;
    --LightGrey: #CCCCCC;
    --PaleBlue: #dceaf8;
    --SystemBlue1: #1F4E8C;
    --SystemBlue2: #E8F0FA;
    --Neutrals3: #E5E7EB;
    --Neutrals4: #F9FAFB;
    --bs-border-radius: 9999px;
    --IceBlue: #F5F8FD;
}

.white {
    color: white !important;
}


.black {
    color: black !important;
}

.pink {
    color: var(--Pink) !important;
}

.darkblue {
    color: var(--DarkBlue) !important;
}

.bgwhite {
    background-color: white !important;
    color: var(--DarkBlue) !important;
}
    .bgwhite.button:hover {
        background-color: #fce2ee !important;
    }


.bgblack {
    background-color: black !important;
    color: white !important;
}

.bgpink {
    background-color: var(--Pink) !important;
    color: white !important;
}

.bgdarkblue {
    background-color: var(--DarkBlue) !important;
    color: white !important;
}

.bgpaleblue {
    background-color: var(--PaleBlue) !important;
}

.bgsystemblue1 {
    background-color: var(--SystemBlue1) !important;
    color: white !important;
}

.bgsystemblue2 {
    background-color: var(--SystemBlue2) !important;
}
.bggrey {
    background-color: var(--Grey) !important;
    color: white !important;
}

.bglightgrey {
    background-color: var(--LightGrey) !important;
}
.bgneutrals3 {
    background-color: var(--Neutrals3) !important;
}

.bgneutrals4 {
    background-color: var(--Neutrals4) !important;
}

.bgIceBlue {
    background-color: var(--IceBlue) !important;
}

.whiteaccent {
    border: 2px !important;
    border-style: solid !important;
    border-color: white !important;
    color: white !important;
}

.pinkaccent {
    border: 2px !important;
    border-style: solid !important;
    border-color: var(--Pink) !important;
    color: var(--Pink) !important;
}

.darkblueaccent {
    border: 2px !important;
    border-style: solid !important;
    border-color: var(--DarkBlue) !important;
    color: var(--DarkBlue) !important;
}

input[type=submit] {
    -webkit-appearance: none;
}

/* Ensure AjaxControlToolkit tabs use the site's font */
.ajax__tab_xp .ajax__tab_header,
.ajax__tab_xp .ajax__tab_header *,
.ajax__tab_xp .ajax__tab_body {
    font-family: inherit !important;
}

@font-face {
    font-family: 'Montserrat';
    src: url('./Montserrat-VariableFont_wght.ttf');
    src: local('Montserrat'), url('./Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 1 999;
    font-display: swap;
}

body {
    font-family: 'Montserrat', sans-serif;
    /* light = 300, regular = 400, bold = 700, extra-bold = 800 */
    /* font-weight: 400; */
    /*max-width: 1200px;*/
    margin: 0 auto;
    color: var(--DarkBlue);
}

select {
    border: solid 2px;
    border-radius: 90px;
    border-color: var(--Neutrals3);
    padding: 0px 10px;
}

#ccc-close{
    display:none;
}

#ccc-recommended-settings {
    background-color: var(--Pink) !important;
}

h1, h2, h3, h4, h5 {
    color: var(--DarkBlue);
}

h1 {
    font-weight: 600;
    margin: 30px auto;
    /*font-size: 2em;*/
}

.button {
    border: none;
    padding: 8px 30px 8px 30px;
    margin-top: 20px;
    font-weight: bold;
    color: white;
    text-decoration: none !important;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    border-radius:90px;
}
    .button a {
        text-decoration: none !important;
        color: white;
    }

        .button a:visited {
            text-decoration: none !important;
            color: white;
        }

    .button:hover {
        filter: brightness(0.9);
    }
    .button:disabled {
        filter: brightness(1.2);
    }

.linkbutton {
    background: none !important;
    border: none;
    padding: 0 !important;
    color: #0d6efd;
    cursor: pointer;
}

input[type=radio] {
     margin: 5px;
     padding: 5px;
}

.botBanner {
    margin-top: 30px;
}

.DYOOptions {
    height: 30px;
    line-height: 30px;
    margin: 10px 0 10px 0;
}

.CTA{
    padding-top:5%;
}


.centerimg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.headerL{
    font-size:44pt;
    text-align:center;
    margin-top:0;
    margin-bottom:2%;
}

.listHeader {
}

.clipArt{
    max-width:100%;
    max-height:80px;
}

.homeTile {
    background-color: var(--PaleBlue);
    margin: 3px;
}

.relatedProducts {
    margin: 3px;
    min-height: 200px;
}

.miniicons {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
    margin-right: 8px;
}


.tile {

/*    height: 290px;
    width: 250px !important;
    text-align: center;
    margin-bottom: 10px;
    margin-left:5px;
    margin-right:5px;
    position:relative;*/
}

/*.container {
    position: relative;
    width: 50%;
    max-width: 700px;
}*/

/* Make the image to responsive */
.image {
    display: block;
    width: 100%;
    height: auto;
}

.LP-logos {
    width: 70%;
}

.slide-up {
    overflow: hidden;
    transition: opacity 0.1s ease;
    opacity: 1;
}

    .slide-up.hidden {
        height: 0;
        opacity: 0;
    }

/* The overlay effect - lays on top of the container and over the image */
.overlay {
    position: absolute;
    top: 0;
    width: 100%;
    transition: .5s ease;
    opacity: 1;
    color: white;
    font-size: 20px;
    text-align: center;
}

a {
    text-decoration: none !important;
}

/*.selected {
    border-color: var(--DarkBlue);
    background-color: var(--Neutrals4);
}
*/
.largecircle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: solid 1px grey;
}
.largecircle:hover {
    cursor: pointer;
}

.selectedcircle {
    border: solid 2px var(--Pink) !important;
}

.circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: solid 1px grey;
}

    .circle.d-inline-block:hover {
        border: solid 2px var(--Pink);
    }

.square {
    width: 25px;
    height: 25px;
    margin: 5px;
}

.squareRed {
    width: 25px;
    height: 25px;
    background-color: #d51f39;
    margin: 5px;
}
.squareBlack {
    width: 25px;
    height: 25px;
    background-color: #262626;
    margin: 5px;
}
.squareGreen {
    width: 25px;
    height: 25px;
    background-color: #008f3e;
    margin: 5px;
}
.squareOrange {
    width: 25px;
    height: 25px;
    background-color: #de5c17;
    margin: 5px;
}
.squareRoyal_Blue {
    width: 25px;
    height: 25px;
    background-color: #33286f;
    margin: 5px;
}
.squarePurple {
    width: 25px;
    height: 25px;
    background-color: #64348a;
    margin: 5px;
}

.squareYellow {
    width: 25px;
    height: 25px;
    background-color: #f3d35b;
    margin: 5px;
}

.squareOcean_Blue {
    width: 25px;
    height: 25px;
    background-color: #085aa3;
    margin: 5px;
}

.squareNavy {
    width: 25px;
    height: 25px;
    background-color: #1b2848;
    margin: 5px;
}

.squareWhite, .squareClear {
    width: 25px;
    height: 25px;
    background-color: #f6f6f6;
    margin: 5px;
    border-style: solid;
}

.squareFrosted_Silver, .squareGrey {
    width: 25px;
    height: 25px;
    background-color: #979a9a;
    margin: 5px;
}

.squareBurnt_Orange {
    width: 25px;
    height: 25px;
    background-color: #dd4629;
    margin: 5px;
}

.squarePink {
    width: 25px;
    height: 25px;
    background-color: #e50073;
    margin: 5px;
}

.squareBlue {
    width: 25px;
    height: 25px;
    background-color: #7ea8cc;
    margin: 5px;
}

.squareTurquoise {
    width: 25px;
    height: 25px;
    background-color: #24a6a4;
    margin: 5px;
}

.squareDark_Navy {
    width: 25px;
    height: 25px;
    background-color: #37475b;
    margin: 5px;
}

.squareNHS_Blue {
    width: 25px;
    height: 25px;
    background-color: #005EB8;
    margin: 5px;
}

.squareNHS_Pink {
    width: 25px;
    height: 25px;
    background-color: #AE2573;
    margin: 5px;
}

.squareLilac {
    width: 25px;
    height: 25px;
    background-color: #7c87c0;
    margin: 5px;
}

.squareBurgundy {
    width: 25px;
    height: 25px;
    background-color: #5a3040;
    margin: 5px;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    margin-right: 3px;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
}

.btnCTA {
    font-weight: 700;
    font-size: 1em;
    float: right;
    text-align: center;
    line-height: 29px;
    cursor: pointer;
    white-space: nowrap;
    border: none;
    color: #ffffff;
    padding: 8px;
}

.CTA-buttonL {
    float:left;
    margin-top: 2%;
    margin-bottom: 4%;
}

.CTA-buttonM {
    margin-right: 45%;
    margin-top: 5%;
    margin-bottom: 5%;
}

input[type="checkbox"] {
    width: 19px;
    height: 19px;
}
input[type="radio"] {
    /* width: 17px; */
    /* height: 17px; */
}
input[type="text"] {
    padding: 2px;
    border: 1px solid var(--Grey);
}
textarea {
    padding: 2px;
    border: 1px solid var(--Grey);
}

.form-control,
.form-select,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"] {
    border-radius: 13px; /* Pill shape */
    min-height: 30px;
    padding: 0.3rem 1rem;
    border: 1px solid #ddd;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.modal {
    display: block; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99999999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    /*animation: fadeIn 0.4s;*/
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 2% auto; /* 15% from the top and centered */
    border: 1px solid #888;
    max-width: 700px; /* Could be more or less, depending on screen size */
    width: 50%;
    text-align: left;
    padding-bottom: 30px;
}

/* Modal Content/Box */
.modal-body {
    width: 80%; /* Could be more or less, depending on screen size */
    margin: auto;
}

    .modal-body .bold {
        font-size: 20px;
        font-weight: bold;
    }

    .modal-body .link {
        color: #1b2654;
    }

    .modal-body .gradient-right-pink {
        font-weight: 700;
        display: flex;
        line-height: 29px;
        text-align: center;
        min-width: 200px;
        float: none;
        margin: 0 auto;
    }

        .modal-body .gradient-right-pink .signup {
            text-decoration: none;
            padding: 8px 8px 8px 18px;
            color: #ffffff;
            width: 100%;
        }

        .modal-body .gradient-right-pink .arrow {
            width: 29px;
            height: 29px;
            vertical-align: top;
        }

/* Modal Content/Box */
.modal-header {
    background-color: #e52b76;
    padding: 30px;
    position: relative;
    text-align: center;
    display: block !important;
}

    .modal-header .header {
        margin: 0px;
        color: white;
        font-size: 30px;
        font-weight: bold;
    }


.modal-fields {
    text-align: left;
    padding-bottom: 10px;
}


@media only screen and (max-width: 800px) {
    .modal-content {
        width: 90%;
    }

    .modal-body {
        width: 80%; /* Could be more or less, depending on screen size */
    }
}


@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* For mobile phones: */
/*[class*="col-"] {
    width: 100%;
    float: left;
}*/
.mobile, .desktopBlock, .desktopInline, .desktopInlineBlock, .desktopFlex, .inline992 {
    display: none;
}

/* HEADER */
#navigation {
    max-width: 1200px;
    position: fixed;
    text-align: right;
    z-index: 999;
}

#navbarTop {
    background-color: var(--DarkBlue);
    height: 35px;
    line-height: 35px;
    padding: 0 20px;
    display: none;
}
    #navbarTop img {
        height: 15px;
        vertical-align: text-bottom;
    }
    #navbarTop a {
        text-decoration: none;
        color: #ffffff;
    }

#navbarBottom {
    background-color: var(--PaleBlue);
    padding: 0;
    font-weight: 700;
    font-size: 0.9em;
    line-height:1 !important;
}
    #navbarBottom img {
        height: 40px;
    }
    #navbarBottom div.container {
        text-align: center;
        color: var(--DarkBlue);
        float: right;
        display: inline-block;
        cursor: pointer;
        line-height: 21px;
        padding: 10px 1%;
        width: 33%;
    }
    #navbarBottom a {
        text-decoration: none;
        max-width: 9999px;
        padding: 14px 5px;
        color: var(--DarkBlue);
        display: none;
        vertical-align: top;
    }
        #navbarBottom a:hover, #navbarBottom div.container:hover {
            color: var(--Pink);
        }
            #navbarBottom div.container:not(.change):hover div.bar1,
            #navbarBottom div.container:not(.change):hover div.bar2,
            #navbarBottom div.container:not(.change):hover div.bar3 {
                background-color: var(--Pink);
            }
        #navbarBottom a.basket, #navbarBottom a.icon {
            text-align: center;
            display: inline-block;
            line-height: 16px;
            padding: 13px 1%;
            width: 30%;
        }
    #navbarBottom ul.navbarBottomItem {
        position: relative;
        display: inline;
        padding: 0;
        z-index:1;
    }
        #navbarBottom ul.navbarBottomItem li {
            display: inline-block;
        }
    #navbarBottom ul.headerSubitem {
        display: none;
        position: absolute;
        background-color: var(--PaleBlue);
        /*margin-right: 10px;*/
        padding: 0;
        left: auto;
        right: 0;
    }
        #navbarBottom ul.headerSubitem li {
            display: block;
        }
    #navbarBottom ul.navbarBottomItem:hover ul.headerSubitem {
        display: block;
    }
    #navbarBottom ul.headerSubitem li a {
        float: left;
    }



.CurrencySelector {
    color: black;
    border: none;
    background-color: var(--PaleBlue);
    -webkit-appearance: none;
    background-image: url('Images/Arrowhead-Down-01.png');
    background-position: 88px;
    background-repeat: no-repeat;
    text-indent: 0.01px; /*In Firefox*/
    text-overflow: ''; /*In Firefox*/
    font-weight: 700;
    padding:0px;
    min-height: 0px;
}

       
.basketCount {
    position: relative;
    top: -20px;
    right: 15px;
    margin-right: -25px;
    color: #ffffff;
    background-color: var(--Pink);
    padding: 2px 4px;
    border-radius: 10px;
}
#mobileMenu {
    background-color: var(--Pink);
    text-align: left;
    padding: 10px 0;
    z-index: 1000;
}
    #mobileMenu img {
        width: 29px;
        height: 29px;
    }
    #mobileMenu a {
        display: block;
        color: #ffffff;
        padding: 10px 10px 10px 20px;
        text-decoration: none;
        line-height: 29px;
        font-weight: 700;
    }
        #mobileMenu a.smallText {
            line-height: 20px;
            font-weight: 400;
            font-size: 0.9em;
        }

.wpl-logo {
    width: auto;
    height: 60px;
    max-height: 15%;
    position: fixed;
    z-index: 1001;
    margin-left: 9999px;
}

.headerMargin {
    position: relative;
    /*height: 90px;*/
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: var(--DarkBlue);
    margin: 6px auto;
    transition: 0.4s;
}

#navbarBottom div.container.change {
    color: #ffffff;
    background-color: var(--Pink);
}
.change .bar1 {
    background-color: #ffffff;
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
    opacity: 0;
}
.change .bar3 {
    background-color: #ffffff;
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}
/* END: HEADER */

/* Banner */
.bannerText {
    background-color: var(--DarkBlue);
    padding: 20px 9px;
    text-align: center;
    color: #ffffff;
    font-size: 0.9em;
}
.bannerText img {
    height: 45px;
    width: auto;
    max-width: 100%;
    display: inline-block;
}
/* END: Banner */

/* CONTENT */
div.content {
    max-width: 1400px;
    padding: 0px 20px 0px 20px;
    margin: auto;
}



    div.slimcontent {
        padding: 0 10px 0 10px;
        max-width: 1200px;
        margin: auto;
    }



    .linkNoStyle {
        text-decoration: none;
        color: #000000;
    }

    .speechBubbleNumber {
        font-weight: 800;
        font-size: 2.6em;
        float: left;
        left: 160px;
        top: 45px;
        position: relative;
        transform: rotate(350deg);
    }

    hr {
        width: 100%;
        margin: 10px 0px 10px 0px;
    }

    .leftImg {
        float: left;
        padding: 10px 30px 10px 30px;
        text-align: center;
        font-size: 0.8em;
    }

    .rightImg {
        float: right;
        padding: 10px 0 10px 30px;
        text-align: center;
        font-size: .8em;
    }

        .leftImg img, .rightImg img {
            width: 100%;
        }

    /* About Us - Contact Form */
    .contact {
        color: Black;
        font-weight: bold;
        padding: 20px;
    }

    #pnlContact {
        margin-bottom: 50px;
    }

        #pnlContact div {
            vertical-align: top;
            padding: 5px;
        }
    /* END: About Us */

    /* About Our Lanyards */
    #DLProductList {
        width: 100%;
    }

        #DLProductList p {
            margin: 5px 15px 3px 15px;
        }
    /* END: About Our Lanyards */

    /* Shop products */
    .productTile {
        text-align: center;
    }

        .productTile:hover {
            box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.10), 0px 2px 0px 0px var(--Pink);
        }


    .productImgList {
        width: 100%;
    }

    .productImgListLarge {
        /*margin: 10px;*/
        /*padding: 2px;*/
        min-width: 300px;
        height: 400px;
    }

    .imgZoomTileFixed {
    }

    .specTable {
        width: 100%
    }

    table.specTable td {
        padding: 6px 20px;
    }

    table.specTable tr:nth-child(even) {
        background-color: #F5F5F5;
    }

    .BlockBanner {
        background-color: var(--DarkBlue);
        padding: 6px 20px;
        margin: 10px 0px;
        color: #ffffff;
        font-size: 1em;
        font-weight: bold;
    }

    .productText {
        margin: 0px 5px;
    }

    .productTitle {
        font-size: 1.2em;
    }

        .productTitle a {
            text-decoration: none;
            color: #333366;
        }

    .price {
        color: var(--Pink);
        font-weight: bold;
    }

    .productAddToCart {
        margin-top: 5px;
        text-align: center;
    }

        .productAddToCart select, .productAddToCart input {
            height: 28px;
            vertical-align: bottom;
        }

    .formTextQty {
        font-size: 1em;
        padding: 7px 2px;
        border: 1px solid var(--LightBlue);
        color: var(--DarkGrey);
    }

    #checkmark {
        display: inline-block;
        width: 17px;
        height: 17px;
        -ms-transform: rotate(45deg); /* IE 9 */
        -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
        transform: rotate(45deg);
    }

        #checkmark:before {
            content: "";
            position: absolute;
            width: 4px;
            height: 15px;
            background-color: #fff;
            left: 10px;
            top: 2px;
        }

        #checkmark:after {
            content: "";
            position: absolute;
            width: 6px;
            height: 4px;
            background-color: #fff;
            left: 6px;
            top: 13px;
        }

    .pbTable {
        padding: 2px;
        border: 1px solid #ccc;
        font-weight: bold;
    }

        .pbTable th, #pbTable td {
            padding: 3px;
        }

        .pbTable th {
            background: var(--Neutrals4);
            color: black;
            text-align: center;
            border-bottom: 1px solid #ccc;
            padding: 6px 0px;
        }

        .pbTable td {
            text-align: center;
            padding: 4px 5px 4px 5px;
        }

    .msgerror {
        color: #ff0000;
    }
    /* END: Shop products */

    /* ID Cards */

    /*Custom Product Designer Visuals*/
    .fpd-tool-fill-opacity {
        display: none !important;
    }

    .fpd-navigation {
        background-color: var(--DarkBlue) !important;
    }

    .fpd-tool-move {
        display: none !important;
    }

    .fpd-align-right {
        display: none !important;
    }

    .fpd-align-left {
        display: none !important;
    }

    .fpd-align-top {
        display: none !important;
    }

    .fpd-align-bottom {
        display: none !important;
    }

    .fpd-content {
        background-color: white !important;
    }

    table.tbl {
        width: 100%;
        border: 0;
        margin: 0;
        padding: 0;
        border-spacing: 0;
        font-size: 0.95em;
    }

    .tbl th, .tbl td {
        padding: 4px;
    }

    .tbl th {
        color: white;
    }

    .tbl td {
        width: 33%;
        background-color: var(--PaleBlue);
        font-weight: bold;
    }

        .tbl td span {
            color: #999;
        }


    .save-ID {
        background: #FF3E3E;
        background-image: -webkit-linear-gradient(top, var(--Blue), var(--DarkBlue));
        background-image: -moz-linear-gradient(top, var(--Blue), var(--DarkBlue));
        background-image: -ms-linear-gradient(top, var(--Blue), var(--DarkBlue));
        background-image: -o-linear-gradient(top, var(--Blue), var(--DarkBlue));
        background-image: linear-gradient(to bottom, var(--Blue), var(--DarkBlue));
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        color: #ffffff !important;
        font-size: 20px;
        padding: 10px 20px 10px 20px;
        font-weight: bold;
        height: 50px;
        cursor: pointer;
        display: inline-block;
    }

    .card-basket {
        background: var(--DarkBlue);
        color: #ffffff;
        height: 30px;
        text-decoration: none;
        font-weight: bold;
        cursor: pointer;
        padding: 4px 10px 4px 10px;
        border-style: none;
        border-radius: 5px;
    }

    .PriceBreakTable {
        Width: 100%;
        max-width: 375px;
        border: 1px, solid, var(--Neutrals3);
        margin-left: auto;
        margin-right: auto;
    }

        .PriceBreakTable td {
            border: 1px, solid, var(--Neutrals3);
            padding: 4px;
        }

    @keyframes arrowuptodown {
        from {
            transform: rotate(90deg);
        }

        to {
            transform: rotate(-90deg);
        }
    }

    @keyframes arrowdowntoup {
        from {
            transform: rotate(-90deg);
        }

        to {
            transform: rotate(90deg);
        }
    }

    @keyframes tablefadein {
        0% {
            padding-top: 0px;
            max-height: 0px;
            opacity: 0;
            transform: translateY(-10px);
            /*visibility: hidden;*/
            display: none;
            overflow: hidden;
        }

        100% {
            padding-top: 30px;
            max-height: 99999px;
            opacity: 1;
            transform: translateY(0px);
            /*visibility: visible;*/
            display: flex;
            overflow: hidden;
        }
    }

    @keyframes tablefadeout {
        0% {
            padding-top: 30px;
            max-height: 99999px;
            opacity: 1;
            transform: translateY(0px);
            /*visibility: visible;*/
            display: flex;
            overflow: hidden;
        }

        100% {
            padding-top: 0px;
            max-height: 0px;
            opacity: 0;
            transform: translateY(-10px);
            /*visibility: hidden;*/
            display: none;
            overflow: hidden;
        }
    }


    /* END: ID Cards */

    /* Design Your Lanyards */
    .designSelector {
        margin: 0 5px;
    }

    img.preview {
        padding: 4px;
        margin: 2px;
        cursor: pointer;
        clip-path: circle(25px);
        width: 60px;
        height: 60px;
        object-fit: cover;
    }

    .switch-field {
        /*display: flex;*/
        /*overflow: hidden;*/
    }

        .switch-field input {
            position: absolute !important;
            clip: rect(0, 0, 0, 0);
            height: 1px;
            width: 1px;
            border: 0;
            overflow: hidden;
        }

        .switch-field label {
            background-color: #e4e4e4;
            color: var(--Grey);
            /*font-size: 14px;
        font-weight: bold;
        line-height: 0.8;
        text-align: center;*/
            padding: 4px 8px;
            margin-right: -4px;
            border: 1px solid rgba(0, 0, 0, 0.2);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 2px rgba(255, 255, 255, 0.1);
            transition: all 0.1s ease-in-out;
        }

            .switch-field label:hover {
                cursor: pointer;
            }

        .switch-field input:checked + label {
            background-color: var(--PaleBlue);
            color: #000000;
            box-shadow: none;
        }

        .switch-field span.left label {
            border-radius: 4px 0 0 4px;
        }

        .switch-field span.right label {
            border-radius: 0 4px 4px 0;
        }

        .switch-field span.top label {
            border-radius: 4px 4px 0 0;
            display: grid;
            line-height: 1;
        }

        .switch-field span.bottom label {
            border-radius: 0 0 4px 4px;
            display: grid;
            line-height: 1;
        }

    .rblProduct td:first-child {
        text-align: right;
    }

    .rblProduct td:last-child {
        text-align: left;
    }

    .rblProductMobile {
        width: calc(100% - 10px);
    }


    /* Reorder panel */
    .reorderButton {
        background: #FF3E3E;
        background-image: -webkit-linear-gradient(top, var(--Blue), var(--DarkBlue));
        background-image: -moz-linear-gradient(top, var(--Blue), var(--DarkBlue));
        background-image: -ms-linear-gradient(top, var(--Blue), var(--DarkBlue));
        background-image: -o-linear-gradient(top, var(--Blue), var(--DarkBlue));
        background-image: linear-gradient(to bottom, var(--Blue), var(--DarkBlue));
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        color: #ffffff;
        font-size: 20px;
        padding: 10px 20px 10px 20px;
        font-weight: bold;
        height: 50px;
        cursor: pointer;
    }

        .reorderButton:hover {
            background: #dd1b1b;
            background-image: -webkit-linear-gradient(top, var(--DarkBlue), var(--Blue));
            background-image: -moz-linear-gradient(top, var(--DarkBlue), var(--Blue));
            background-image: -ms-linear-gradient(top, var(--DarkBlue), var(--Blue));
            background-image: -o-linear-gradient(top, var(--DarkBlue), var(--Blue));
            background-image: linear-gradient(to bottom, var(--DarkBlue), var(--Blue));
        }

    .reorderPanel {
        text-align: center;
        font-weight: bold;
        background: #FFFFFF;
        padding: 15px 5px;
        width: calc(100% - 10px);
        margin: auto;
    }

        .reorderPanel input[type="text"] {
            font-weight: normal;
        }

        .reorderPanel input[type="checkbox"] {
            width: 20px;
            height: 20px;
        }

        .reorderPanel label {
            display: inline-block;
            vertical-align: middle;
            width: calc(100% - 30px);
        }

        .reorderPanel table#tblReorder {
            padding-bottom: 15px;
            width: 100%;
        }

    /* END: Design Your Lanyards */

    /* Gallery */
    .outer {
        width: calc(100% - 20px);
        float: left;
        margin: 10px;
    }

    .imgZoom {
        width: calc(100%);
        float: left;
        margin: 10px;
    }


    img.galleryPreview {
        border-radius: 10px;
        width: 100%;
    }

    DIV#lanyardImageContainer {
        height: 100%;
        padding: 5px;
        overflow: auto;
    }
    /* END: Gallery */

    /* Basket */

    @media screen and (max-width: 992px) {
        .basket-panel {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1050;
        }

            .basket-panel.is-released {
                position: static !important;
            }

            /* hidden while docked */
            .basket-panel:not(.is-released) .unstuckhide {
                display: none !important;
            }

            /* visible when released */
            .basket-panel.is-released .unstuckhide {
                display: block;
            }

            .basket-panel:not(.is-released) .BasketDetails {
                padding: 20px 130px 20px 80px;
            }
    }

    @media screen and (min-width: 992px) {
        .basket-panel {
            position: sticky;
            top: 0px;
            padding: 0px;
        }
    }

    .BasketDetails {
        background-color: var(--Neutrals4);
        padding: 40px;
    }


    .normalRow {
        background-color: #ffffff;
        border-bottom: 1px solid #E3E8CA;
    }

    .alternateRow {
        border-bottom: 1px solid #E3E8CA;
    }

    div.basketHeader {
        color: #333366;
        font-weight: bolder;
        text-align: center;
        padding: 3px;
    }

    div.basketContent div {
        text-align: center;
        padding: 3px;
    }

        div.basketContent div.rowTitle {
            text-align: left;
            padding: 0 25px;
        }

        div.basketContent div.rowPrice {
            color: var(--Pink);
            /*font-weight:bold;*/
        }

    div.basketControls input, div.basketControls div {
        height: 40px;
        float: left;
    }

        div.basketControls input.basketControlRemove {
            width: 100px;
            margin-right: 5%;
            margin-left: 10px;
            -webkit-appearance: button;
        }

        div.basketControls input.basketControlQty {
            width: 40px;
        }

        div.basketControls div.basketControlPrice {
            line-height: 25px;
        }

    input[type=number].qty {
        width: 60px;
        text-align: center;
        -moz-appearance: textfield;
    }

        input[type=number].qty::-ms-clear {
            display: none;
        }

        input[type=number].qty::-webkit-inner-spin-button,
        input[type=number].qty::-webkit-outer-spin-button {
            display: none;
        }

    .note {
        color: #AA0000;
        font-size: 0.9em;
    }

    #BasketTotals {
        text-align: right;
    }

        #BasketTotals .totalLabel {
            width: 200px;
            color: #c00000;
        }

        #BasketTotals span {
            padding-right: 5px;
        }

    .BasketProceed .rgt {
        float: right;
    }

    .BasketProceed .lft {
        float: left;
    }
    /* END: Basket */

    /* Register */
    .watermark {
        color: rgba(0, 0, 0, 0.6);
        text-transform: capitalize !important;
    }
    /* END: Register */

    /* FOOTER */
    #footerWrapper {
        margin-top: 20px;
        font-size: 0.7em;
        color: white;
    }

        #footerWrapper ul {
            list-style-type: none;
            font-size: 1.5em;
        }

        #footerWrapper li {
            margin-bottom: 10px;
        }

            #footerWrapper li a {
                text-decoration: none;
                color: white;
                text-align: left;
            }

        #footerWrapper .social {
            height: 40px;
            width: 40px;
        }

        #footerWrapper .partners {
            height: 50px;
        }

        #footerWrapper img {
            vertical-align: baseline;
        }

    /* END: FOOTER */

    /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 768px) {
        /*    .col-xs-0 {width: 0%;}
    .col-xs-1 {width: 8.33%;}
    .col-xs-2 {width: 16.66%;}
    .col-xs-3 {width: 25%;}
    .col-xs-4 {width: 33.33%;}
    .col-xs-5 {width: 41.66%;}
    .col-xs-6 {width: 50%;}
    .col-xs-7 {width: 58.33%;}
    .col-xs-8 {width: 66.66%;}
    .col-xs-9 {width: 75%;}
    .col-xs-10 {width: 83.33%;}
    .col-xs-11 {width: 91.66%;}
    .col-xs-12 {width: 100%;}*/

        .desktopBlock {
            display: none;
        }

        .desktopInline {
            display: none;
        }

        .desktopInlineBlock {
            display: none;
        }

        .desktopFlex {
            display: none;
        }

        .mobile {
            display: block;
        }

        .headerMargin {
            /*height: 150px;*/
        }

        /*input, select {
        font-size: 1.2em;
    }*/

        .productBlock {
            font-size: 0.9em;
        }

            .productBlock div table#pbTable {
                font-size: 0.9em;
            }

        .reorderPanel table#tblReorder input#txtWPL {
            width: 40%;
        }

        .reorderPanel table#tblReorder input#txtReorderOID {
            width: 55%;
            max-width: 55%;
        }

        .reorderPanel table#tblReorder input#txtReorderPC {
            width: 100%;
        }

        .CTA-button {
            margin-right: 30%;
            margin-top: 10px;
        }

        .smMargBotMob {
            margin-bottom: 10px;
        }

        .btnStageFinal {
            width: 100%;
        }

        .basketTotal {
            display: none;
        }

        .CTA-buttonL {
            margin-top: 5%;
            margin-bottom: 5%;
            white-space: unset;
        }

        .LP-logos {
            margin-bottom: 2%;
            width: 50%;
        }

        .headerL {
            font-size: 28pt;
            text-align: center;
            margin-top: 0;
            margin-bottom: 2%;
        }

        .homeHeader {
            font-size: 34pt;
        }

        .footerText {
            font-size: 6pt;
        }

        .basketImage {
            width: 50%;
            margin: auto;
        }

        .footerLogo {
            width: 50%;
        }
    }

    /* Medium devices (landscape tablets, 768px and up) */
    @media only screen and (min-width: 768px) {
        /* For desktop: */
        /*    .col-0 {width: 0%;}
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}*/

        .mobile {
            display: none;
        }

        .desktopBlock {
            display: block;
        }

        .desktopInline {
            display: inline;
        }

        .desktopInlineBlock {
            display: inline-block;
        }

        .desktopFlex {
            display: flex;
        }

        .flex {
            display: flex;
        }

        #navbarTop {
            display: block;
        }

            #navbarTop img {
                height: 20px;
            }

        #navbarBottom {
            padding: 0 20px;
            width: 100%;
        }

            #navbarBottom a {
                display: inline-block;
                font-size: 0.9em;
                text-align: left;
                height: 60px;
            }

                #navbarBottom a.basket {
                    text-align: left;
                    line-height: 10px;
                    padding: 5px 0px 5px 0px;
                    min-width: 84px;
                    width: 0;
                }

                #navbarBottom a.icon {
                    display: none;
                }

            #navbarBottom div.container {
                display: none;
            }

        .headerMargin {
            /*height: 200px;*/
        }

        .bannerText img:not(.arrow) {
            margin: 0 30px;
        }

        #footerWrapper img {
            margin: 0 5px;
        }

        .reorderPanel {
            padding: 25px;
            width: 67%;
        }

        .outer {
            width: calc(33.3% - 30px);
            margin: 15px;
        }

        .imgZoom {
            width: calc(33.3%);
            margin: 10px;
        }

        .CTAButtonLGBT {
            margin-top: -110px;
        }

        .CTAButtonLan {
            margin-top: -150px;
        }

        .CTAButtonTop {
            margin-top: -5%;
        }


        .basketCount {
            position: absolute;
            top: 40px;
            right: 40px;
            margin-right: 0;
            padding: 4px;
        }

        .CTA-button {
            margin-right: 75%;
            margin-top: 0%;
        }

        .LP-p {
            padding-right: 10px;
            float: left;
            margin-top: -2px;
        }

        .imgXL {
            float: right;
            width: 95%
        }

        .imgMed {
            float: right;
            width: 75%;
        }

        .imgSm {
            float: right;
            width: 60%
        }

        .btnStageFinal {
            width: 30%;
        }



        .basketTotal {
            margin-top: 20px;
            color: var(--Pink);
            position: absolute;
        }

        .homeHeader {
            font-size: 40pt;
        }

        .proceedPay {
            transform: translate(0%, -100%);
        }

        .basketImage {
            width: 100%;
            margin: auto;
        }

        .footerLogo {
            width: 80%;
        }

        .basketDiv {
            display: flex;
        }

        .basketProceed {
            order: 2;
        }

        .basketBack {
            order: 1;
        }

        .bubbleHeightSm {
        }

        .bubbleHeightMd {
            height: 375px;
        }

        .bubbleHeightLg {
            height: 425px;
        }
    }



    .lanyardelement::after {
        content: "";
        clear: both;
        display: table;
    }

    .clr {
        clear: both;
        margin: 10px 0 10px 0;
    }

    .noMargin {
        margin: 0;
    }

    /* Yellow gradient */
    .gradient-top-yellow {
        background: rgb(237,165,23);
        background: linear-gradient(deg, rgba(237,165,23,1) 0%, rgba(193,125,42,1) 100%);
    }

    .gradient-right-yellow {
        background: rgb(237,165,23);
        background: linear-gradient(90deg, rgba(237,165,23,1) 0%, rgba(193,125,42,1) 100%);
    }

    .gradient-bottom-yellow {
        background: rgb(237,165,23);
        background: linear-gradient(180deg, rgba(237,165,23,1) 0%, rgba(193,125,42,1) 100%);
    }

    .gradient-left-yellow {
        background: rgb(237,165,23);
        background: linear-gradient(270deg, rgba(237,165,23,1) 0%, rgba(193,125,42,1) 100%);
    }
    /* Pink gradient*/
    .gradient-top-pink {
        background: var(--Pink);
        background: linear-gradient(0deg, rgba(229,43,118,1) 0%, rgba(178,41,100,1) 100%);
    }

    .gradient-right-pink {
        background: var(--Pink);
    }

    .gradient-bottom-pink {
        background: var(--Pink);
        background: linear-gradient(180deg, rgba(229,43,118,1) 0%, rgba(178,41,100,1) 100%);
    }

    .gradient-left-pink {
        background: var(--Pink);
        background: linear-gradient(270deg, rgba(229,43,118,1) 0%, rgba(178,41,100,1) 100%);
    }
    /* Green gradient */
    .gradient-top-green {
        background: rgb(149,176,73);
        background: linear-gradient(0deg, rgba(149,176,73,1) 0%, rgba(105,127,54,1) 100%);
    }

    .gradient-right-green {
        background: rgb(149,176,73);
        background: linear-gradient(90deg, rgba(149,176,73,1) 0%, rgba(105,127,54,1) 100%);
    }

    .gradient-bottom-green {
        background: rgb(149,176,73);
        background: linear-gradient(180deg, rgba(149,176,73,1) 0%, rgba(105,127,54,1) 100%);
    }

    .gradient-left-green {
        background: rgb(149,176,73);
        background: linear-gradient(270deg, rgba(149,176,73,1) 0%, rgba(105,127,54,1) 100%);
    }
    /* Blue gradient */
    .gradient-top-blue {
        background: rgb(0,103,172);
        background: linear-gradient(0deg, rgba(0,103,172,1) 0%, rgba(27,38,84,1) 100%);
    }

    .gradient-right-blue {
        background: rgb(0,103,172);
        background: linear-gradient(90deg, rgba(0,103,172,1) 0%, rgba(27,38,84,1) 100%);
    }

    .gradient-bottom-blue {
        background: rgb(0,103,172);
        background: linear-gradient(180deg, rgba(0,103,172,1) 0%, rgba(27,38,84,1) 100%);
    }

    .gradient-left-blue {
        background: rgb(0,103,172);
        background: linear-gradient(270deg, rgba(0,103,172,1) 0%, rgba(27,38,84,1) 100%);
    }

    /* Navy gradient*/
    .gradient-top-blue {
        background: rgb(0,60,127);
        background: linear-gradient(0deg, rgba(0,60,127,1) 0%, rgba(0,33,87,1) 100%);
    }

    .gradient-right-navy {
        background: rgb(0,60,127);
        background: linear-gradient(90deg, rgba(0,60,127,1) 0%, rgba(0,33,87,1) 100%);
    }

    .gradient-bottom-navy {
        background: rgb(0,60,127);
        background: linear-gradient(180deg, rgba(0,60,127,1) 0%, rgba(0,33,87,1) 100%);
    }

    .gradient-left-navy {
        background: rgb(0,60,127);
        background: linear-gradient(270deg, rgba(0,60,127,1) 0%, rgba(0,33,87,1) 100%);
    }
    /* Grey gradient */
    .gradient-top-grey {
        background: rgb(140,160,170);
        background: linear-gradient(0deg, rgba(140,160,170,1) 0%, rgba(72,83,91,1) 100%);
    }

    .gradient-right-grey {
        background: rgb(140,160,170);
        background: linear-gradient(90deg, rgba(140,160,170,1) 0%, rgba(72,83,91,1) 100%);
    }

    .gradient-bottom-grey {
        background: rgb(140,160,170);
        background: linear-gradient(180deg, rgba(140,160,170,1) 0%, rgba(72,83,91,1) 100%);
    }

    .gradient-left-grey {
        background: rgb(140,160,170);
        background: linear-gradient(270deg, rgba(140,160,170,1) 0%, rgba(72,83,91,1) 100%);
    }

    .selectedBoxShadow {
        box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.10), 0px 2px 0px 0px var(--Pink);
    }

    .nextArrow {
        height: 30px;
    }

    .backArrow {
        height: 30px;
        transform: rotate(180deg);
    }

    /* =========================================
   Wizard TabContainer
   ========================================= */

    .wizard-tabs {
        border: 0 !important;
        visibility: visible !important;
        overflow: visible !important;
    }

        /* =========================================
   Header
   ========================================= */

        .wizard-tabs .ajax__tab_header {
            display: flex !important;
            width: 100%;
            min-height: 85px;
            position: relative;
            overflow: visible !important;
            border: 0 !important;
            background: transparent !important;
        }

            .wizard-tabs .ajax__tab_header > .ajax__tab {
                flex: 1 1 0 !important;
                position: relative;
                text-align: center;
                min-width: 0;
            }

                /* Connector line */
                .wizard-tabs .ajax__tab_header > .ajax__tab:not(:last-child)::after {
                    content: "";
                    position: absolute;
                    top: 13px;
                    left: calc(50% + 24px);
                    width: calc(100% - 48px);
                    height: 1px;
                    background: #D2D7E1;
                    z-index: 0;
                }

        /* =========================================
   Remove Ajax Toolkit styling
   ========================================= */

        .wizard-tabs .ajax__tab_outer,
        .wizard-tabs .ajax__tab_inner,
        .wizard-tabs .ajax__tab_tab {
            display: block !important;
            width: 100% !important;
            height: auto !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
            background: none !important;
            overflow: visible !important;
        }

            .wizard-tabs .ajax__tab_tab > span {
                display: flex;
                flex-direction: column;
                align-items: center;
            }

        /* =========================================
   Step Circle
   ========================================= */

        .wizard-tabs .step-number {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            margin: 0 auto;
            border: 1px solid #B9C2D1;
            border-radius: 50%;
            background: #fff;
            color: var(--DarkBlue);
            font-size: 12px;
            font-weight: 600;
            line-height: 1;
            transition: all .2s ease;
        }

        /* Active step */

        .wizard-tabs .ajax__tab_active .step-number {
            width: 34px;
            height: 34px;
            margin-top: -4px;
            border: 2px solid var(--Pink);
            background: #fff;
            color: var(--Pink);
            font-size: 15px;
            font-weight: 700;
        }

        /* =========================================
   Step Title
   ========================================= */

        .wizard-tabs .step-title {
            display: block;
            margin-top: 8px;
            color: var(--DarkBlue);
            font-size: 16px;
            font-weight: 600;
            white-space: nowrap;
            transition: color .2s ease;
        }

        .wizard-tabs .ajax__tab_active .step-title {
            color: var(--Pink);
            font-weight: 700;
        }

        /* =========================================
   Hover
   ========================================= */

        .wizard-tabs .ajax__tab:hover .step-number {
            border-color: var(--Pink);
            color: var(--Pink);
        }

        .wizard-tabs .ajax__tab:hover .step-title {
            color: var(--Pink);
        }

        /* =========================================
   Content
   ========================================= */

        .wizard-tabs .ajax__tab_body {
            clear: both;
            position: relative;
            width: 100% !important;
            height: auto !important;
            max-height: none !important;
            margin-top: 20px;
            padding: 0 !important;
            border: 0 !important;
            background: transparent !important;
            overflow: visible !important;
        }

        .wizard-tabs .ajax__tab_panel {
            width: 100% !important;
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
            box-sizing: border-box;
        }

        .wizard-tabs .step-number,
        .wizard-tabs .step-title {
            transition: all .2s ease;
        }

    @media (max-width: 768px) {

        .wizard-tabs .ajax__tab_header {
            min-height: 88px;
        }

            /* Keep all steps evenly distributed */
            .wizard-tabs .ajax__tab_header > .ajax__tab {
                flex: 1 1 0 !important;
                min-width: 0;
                position: relative;
            }

        /* Make the whole tab a large touch target */
        .wizard-tabs .ajax__tab_tab {
            display: flex !important;
            align-items: flex-start;
            justify-content: center;
            min-height: 72px;
            padding: 6px 2px 10px !important;
            box-sizing: border-box;
            touch-action: manipulation;
        }

            .wizard-tabs .ajax__tab_tab > span {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                width: 100%;
                min-height: 56px;
            }

        /*
       6px tab padding + 13px circle radius = 19px.
       This places the connector through the centre of
       both normal and active circles.
    */
        .wizard-tabs .ajax__tab_header > .ajax__tab:not(:last-child)::after {
            content: "";
            position: absolute;
            top: 19px;
            left: calc(50% + 18px);
            width: calc(100% - 36px);
            height: 1px;
            background: #d2d7e1;
            z-index: 0;
        }

        /* Normal circle */
        .wizard-tabs .step-number {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            flex: 0 0 26px;
            margin: 0 auto;
            box-sizing: border-box;
            border: 1px solid #b9c2d1;
            border-radius: 50%;
            background: #fff;
            color: var(--DarkBlue);
            font-size: 12px;
            font-weight: 600;
            line-height: 1;
        }

        /*
       The active circle is 6px larger and moves up 3px,
       so its centre remains aligned at the same 19px point.
    */
        .wizard-tabs .ajax__tab_active .step-number {
            width: 32px;
            height: 32px;
            flex-basis: 32px;
            margin-top: -3px;
            border: 2px solid var(--Pink);
            background: #fff;
            color: var(--Pink);
            font-size: 14px;
            font-weight: 700;
        }

        /* Labels */
        .wizard-tabs .step-title {
            display: block;
            width: 100%;
            margin-top: 7px;
            padding: 0 1px;
            color: var(--DarkBlue);
            font-size: 12px;
            font-weight: 600;
            line-height: 1.1;
            text-align: center;
            white-space: normal;
            overflow-wrap: anywhere;
        }

        .wizard-tabs .ajax__tab_active .step-title {
            color: var(--Pink);
            font-weight: 700;
        }
    }

    .ajax__tab_body {
        border: none !important;
    }
    /****************New Designer*********************/
    .accordionHeader {
        border: 1px solid #2F4F4F;
        color: white;
        font-weight: bold;
        padding: 10px 0;
        margin-top: 10px;
        cursor: pointer;
        background-color: var(--Blue);
    }

    .accordionHeaderSelected {
        border: 1px solid #2F4F4F;
        color: white;
        font-weight: bold;
        background-color: var(--DarkBlue);
        padding: 10px 0;
        margin-top: 10px;
        cursor: pointer;
        white-space: nowrap;
    }

    .accordionHeaderSpan {
        margin-right: 10px;
        padding: 13px 20px;
        background-color: var(--DarkBlue);
    }

    .accordionContent {
        background-color: var(--PaleBlue);
        border: 1px dashed #2F4F4F;
        border-top: none;
        padding: 0 20px 20px 20px;
    }

    div.title {
        font-size: 1em;
        font-weight: 700;
        margin: 20px 0;
    }

    .accordionContent div.desc {
        font-size: 0.9em;
        font-weight: 400;
        margin-bottom: 15px;
    }

    .accordionContent div.addon {
        text-align: center;
        height: 220px;
        margin-bottom: 30px;
    }

    .accordionContent div.addonbutton {
    }

    .accordionContent div.addonimage {
    }

    .horizontalBar {
        width: 99%;
        text-align: center;
        height: 1px;
        background: #000;
        overflow: hidden;
        margin: 0 auto;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .designArea {
        display: block;
        width: 100%;
        max-width: 1200px;
        background-color: var(--Neutrals4);
        padding: calc((75 / 1459) * 100%) 0 0 0;
        position: relative;
    }

    .desginAreaWaterMark {
        padding: 0 0 0 0;
    }


    .designAreaWristband {
        display: block;
        width: 90%;
        max-width: 1002px;
        background-color: #ffffff;
        padding: calc((58 / 1000) * 100%) 0 0 0;
        position: relative;
        margin: 0 auto;
    }

        .designArea.sticky, .designAreaWristband.sticky {
            position: fixed; /* TODO: support for older browsers (IE11) */
            position: sticky;
        }

    .designAreaZoom {
        /*transition: transform 0.5s ease-out;*/
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
    }

    .designerAreaZoom {
        /*transition: transform 0.5s ease-out;*/
        /* height: 100%; */
        /* width: 100%; */
        /* left: 0; */
        /* top: 0; */
    }

    #lanyardClip, #imgLanyardReorder, #wristbandClip, #imgWristbandReorder {
        height: 100%;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
    }

    #imgRibbonReorder {
        height: 50%;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
    }

    #dyesubContent {
        padding: 0;
    }

    .cmykBox {
        width: 60px;
        text-align: center;
    }

    tr.cmyk {
        font-size: 0.8em;
        font-weight: bold;
    }

    input.cmyk {
        min-width: 100px;
        min-height: 100px;
        background: url(/images/colour_selector.png) no-repeat left top;
        background-size: contain;
        cursor: pointer;
        border: none;
    }

    input.cmyksmall {
        width: 38px;
        height: 38px;
        background: url(/images/colour_selector.png) no-repeat left top;
        background-size: contain;
        cursor: pointer;
        border: none;
        padding: 0px;
    }

    .form-switch .form-check-input {
        background-color: #e9ecef;
        border-color: #adb5bd;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23ffffff'/%3E%3C/svg%3E");
    }

        .form-switch .form-check-input:checked {
            background-color: #e9ecef;
            border-color: #adb5bd;
        }

        .form-switch .form-check-input:focus {
            box-shadow: none;
        }

    .ajaccDesign, .ajaccGallery {
        width: 100%;
        color: Black;
    }

    #ajaccDesign td {
        padding: 2px;
    }

    table.colourOptions {
        width: 100%;
        border-spacing: 20px;
        vertical-align: top;
    }

        table.colourOptions td.textTable {
            vertical-align: top;
            width: 230px;
            padding: 0;
        }

    .radio {
        text-align: center;
        border-spacing: 0px;
        background-color: #ddd;
    }

    .radioTitle {
        background-color: var(--DarkBlue);
        color: #fff;
        padding: 5px;
    }

    .designerInput {
        min-height: 30px;
        margin: 7px 0;
    }


    .lanyardShadow {
        height: 100%;
        position: relative;
        left: -1.5%;
        overflow: hidden;
    }

    .wristbandShadow {
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    .Ribbontexture {
        background: url("/images/blank.png") no-repeat left top;
        background-size: 100% 100%;
        position: relative;
        height: 100%;
        border: solid 1px #c8c8c8;
    }

    .texture {
        background: url("/images/lanyard-texture-small.png") no-repeat left top;
        background-size: 100% 100%;
        position: relative;
        height: 100%;
        border: solid 1px #c8c8c8;
    }

    .textureFront, .textureRev {
        background: url("/images/lanyard-texture-small.png") no-repeat left top;
        background-size: 100% 100%;
        position: relative;
        height: 1002px;
        border: solid 1px #c8c8c8;
    }

    .wristbandTexture {
        /*background: url("/images/wristband-texture.png") no-repeat left top;*/
        background-size: 100% 100%;
        position: relative;
        height: 100%;
        border: solid 1px #c8c8c8;
    }

    #lanyardTemplate {
        position: relative;
        /*top: 9.6%;*/
        height: 80.8%;
        line-height: 22.5px;
        width: 20000px;
        overflow: hidden;
        background-size: contain;
    }

    #wristbandTemplate {
        position: relative;
        top: 8%;
        height: 84%;
        line-height: 22.5px;
        width: 1002px;
        overflow: hidden;
        background-size: contain;
    }

    #additionalAttachment {
        height: 100%
    }

    .priceTableHeader {
        border-style: none;
        color: white;
        font-weight: bold;
        background-color: #ff0000;
        padding: 3px;
        margin-top: 2px;
        cursor: pointer;
        text-align: center;
        font-size: 11px;
    }

    td.tips {
        width: 200px;
        background-color: #ffcccc;
        padding: 0 10px 5px 10px !important;
        color: #000;
        vertical-align: top;
    }

    .designText {
        width: 90%;
    }

    .mainImage, .splitImage,
    .mainImageFront, .splitImageFront,
    .mainImageRev, .splitImageRev {
        vertical-align: middle;
        height: 23px;
    }

    .mainLabel, .mainLabelFront, .mainLabelRev,
    .splitLabel, .splitLabelFront, .splitLabelRev {
        vertical-align: middle;
        float: left;
    }

    .lanyardelement {
        float: left;
    }

    div#dyesubContent td.title {
        text-align: center;
        font-weight: bold;
        font-size: 11px;
    }

    .colour-container {
        position: relative;
        max-height: 110px; /* Adjust for 2 rows */
        overflow: hidden;
        transition: max-height .3s ease;
    }

    @media (max-width: 992px) {
        .colour-container {
            max-height: 200px; /* 4 rows */
        }
    }

    /* Fade overlay */
    .colour-container::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 40px;
        background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
        pointer-events: none;
        transition: opacity .3s ease;
    }

    /* Expanded state */
    .colour-container.expanded {
        max-height: 2000px;
    }

        .colour-container.expanded::after {
            opacity: 0;
        }

    .colour-btn {
        height: 32px;
    }

    td.content {
        text-align: center;
    }

    .btnStageNext, .btnStageBack {
        font-weight: 700;
        display: flex;
        line-height: 29px;
        text-align: center;
        margin-top: 20px;
        cursor: pointer;
        white-space: nowrap;
    }

    .btnStageNext {
        float: right;
    }

        .btnStageNext span, .btnStageBack span {
            color: #ffffff;
            width: 100%;
        }

    .btnStageBack span {
        padding: 8px 18px 8px 8px;
    }

    .btnStageNext span {
        padding: 8px 8px 8px 18px;
    }

        .btnStageBack span img, .btnStageNext span img {
            width: 29px;
            height: 29px;
            vertical-align: top;
        }

    .btnStageBack span img {
        transform: rotate(180deg);
    }

    .btnStageFinal {
        font-weight: 700;
        font-size: 1em;
        float: right;
        text-align: center;
        line-height: 29px;
        margin-top: 20px;
        cursor: pointer;
        white-space: nowrap;
        border: none;
        color: #ffffff;
        padding: 8px;
    }

    .smMargTopMob {
        margin-top: 0px;
    }


    #pnlNewDesign input[type=button], #pnlNewDesign input[type=submit] {
        font-size: 1em;
        font-weight: 700;
    }

    .designLanyardButton {
        margin: 0 15px;
    }

    .designImageButton {
        width: 250px;
    }

    .popupBackground {
        background-color: Gray;
        filter: alpha(opacity=70);
        opacity: 0.7;
        -moz-opacity: 0.7;
    }

    .popupPanel {
        border: solid 10px #3AC0F2;
        border-radius: 30px;
        text-align: center;
        font-weight: bold;
        background: #FFFFFF;
        padding: 25px;
        width: 70%;
        min-width: 720px;
        margin: auto;
    }

    .remove {
        background: url("/images/remove.png") no-repeat left top;
        width: 112px;
        height: 42px;
        border: none;
        cursor: pointer;
    }

    .continuePanel {
        border: solid 10px var(--DarkBlue);
        border-radius: 30px;
        text-align: center;
        font-weight: bold;
        background: #FFFFFF;
        padding: 15px 5px;
        width: calc(100% - 10px);
        margin: auto;
    }

    .divider-vertical {
        position: relative;
        height: 100%;
    }

        .divider-vertical::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 1px;
            background: #dee2e6;
            transform: translateX(-50%);
        }

        .divider-vertical span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--Neutrals4);
            padding: .5rem;
            color: #6c757d;
            white-space: nowrap;
        }

    .lanType, .lanFrontType, .lanRevType {
        cursor: pointer;
        vertical-align: middle;
    }

        .lanFrontType div {
            border: 3px !important;
            border-style: solid !important;
            border-color: var(--DarkBlue) !important;
            color: var(--DarkBlue) !important;
        }

        .lanFrontType.select div {
            border: 3px !important;
            border-style: solid !important;
            border-color: var(--Pink) !important;
            color: var(--Pink) !important;
        }

    #updpnlAddress2 input[type=text] {
        height: 30px;
    }

    #updpnlAddress2 input[type=checkbox] {
        /* Double-sized Checkboxes */
        -ms-transform: scale(1.5); /* IE */
        -moz-transform: scale(1.5); /* FF */
        -webkit-transform: scale(1.5); /* Safari and Chrome */
        -o-transform: scale(1.5); /* Opera */
        transform: scale(1.5);
        padding: 10px;
        margin-left: 10px;
        font-size: 20px;
    }

    #updpnlAddress2 input[type=radio] {
        height: 15px;
        transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -o-transform: scale(1.2);
        font-size: 20px;
    }

    input[type=number].quantity {
        height: 30px;
        max-width: 110px;
        margin-left: 20px;
        font-weight: bold;
        text-align: center;
        font-size: 18px;
        -moz-appearance: textfield;
    }

    input[type=number].noSpinner {
        -moz-appearance: textfield;
    }

        input[type=number].quantity::-ms-clear, input[type=number].noSpinner::-ms-clear {
            display: none;
        }

        input[type=number].quantity::-webkit-inner-spin-button, input[type=number].quantity::-webkit-outer-spin-button,
        input[type=number].noSpinner::-webkit-inner-spin-button, input[type=number].noSpinner::-webkit-outer-spin-button {
            display: none;
            /*-webkit-appearance: none;
        margin: 0;*/
        }

    #txtReorderOID {
        max-width: 25%;
    }

    div.templates {
        background-color: #fff;
        height: 200px;
        overflow: auto;
        border: solid 1px var(--Neutrals3);
        margin-top: 10px;
    }

    .categoryList {
        width: 200px;
        font-size: 14px;
        font-weight: bold;
        margin: 10px;
        padding: 3px;
        text-align: center;
    }

    .categoryButton {
        background: var(--DarkBlue);
        color: #ffffff;
        height: 40px;
        text-decoration: none;
        font-weight: bold;
        cursor: pointer;
        padding: 5px 20px 5px 20px;
        border-top: solid #1b6b99 3px;
        border-right: solid #000000 3px;
        border-bottom: solid #000000 3px;
        border-left: solid #1b6b99 3px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0px;
        -webkit-box-shadow: 0px 1px 3px #666666;
        -moz-box-shadow: 0px 1px 3px #666666;
        box-shadow: 0px 1px 3px #666666;
    }

        .categoryButton:hover {
            background: #dd1b1b;
            background-image: -webkit-linear-gradient(top, var(--Blue), var(--DarkBlue));
            background-image: -moz-linear-gradient(top, var(--Blue), var(--DarkBlue));
            background-image: -ms-linear-gradient(top, var(--Blue), var(--DarkBlue));
            background-image: -o-linear-gradient(top, var(--Blue), var(--DarkBlue));
            background-image: linear-gradient(to bottom, var(--Blue), var(--DarkBlue));
            text-decoration: none;
        }

        .categoryButton:active, .categoryButtonPressed {
            background: #1b6b99;
            background-image: -webkit-linear-gradient(top, var(--Blue), var(--DarkBlue));
            background-image: -moz-linear-gradient(top, var(--Blue), var(--DarkBlue));
            background-image: -ms-linear-gradient(top, var(--Blue), var(--DarkBlue));
            background-image: -o-linear-gradient(top, var(--Blue), var(--DarkBlue));
            background-image: linear-gradient(to bottom, var(--Blue), var(--DarkBlue));
            color: #ffffff;
            text-decoration: none;
            height: 40px;
            font-weight: bold;
            cursor: pointer;
            padding: 5px 20px 5px 20px;
            border-top: solid #000000 3px;
            border-right: solid #1b6b99 3px;
            border-bottom: solid #1b6b99 3px;
            border-left: solid #000000 3px;
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0px;
            -webkit-box-shadow: 0px 1px 3px #666666;
            -moz-box-shadow: 0px 1px 3px #666666;
            box-shadow: 0px 1px 3px #666666;
        }

    .addToBasketButton {
        background: #697f36;
        color: #ffffff;
        height: 28px;
        text-decoration: none;
        font-weight: bold;
        cursor: pointer;
        padding: 4px 10px 4px 10px;
        border-top: solid #95b049 2px;
        border-right: solid #000000 2px;
        border-bottom: solid #000000 2px;
        border-left: solid #95b049 2px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0px;
        -webkit-box-shadow: 0px 1px 3px #666666;
        -moz-box-shadow: 0px 1px 3px #666666;
        box-shadow: 0px 1px 3px #666666;
    }

        .addToBasketButton:hover {
            background: #dd1b1b;
            background-image: -webkit-linear-gradient(top, #95b049, #697f36);
            background-image: -moz-linear-gradient(top, #95b049, #697f36);
            background-image: -ms-linear-gradient(top, #95b049, #697f36);
            background-image: -o-linear-gradient(top, #95b049, #697f36);
            background-image: linear-gradient(to bottom, #95b049, #697f36);
            border-top: solid #697f36 2px;
            border-left: solid #697f36 2px;
            text-decoration: none;
        }

        .addToBasketButton:active {
            background: #697f36;
            background-image: -webkit-linear-gradient(top, #697f36, #95b049);
            background-image: -moz-linear-gradient(top, #697f36, #95b049);
            background-image: -ms-linear-gradient(top, #697f36, #95b049);
            background-image: -o-linear-gradient(top, #697f36, #95b049);
            background-image: linear-gradient(to bottom, #697f36, #95b049);
            color: #ffffff;
            text-decoration: none;
            height: 28px;
            font-weight: bold;
            cursor: pointer;
            padding: 4px 20px 4px 20px;
            border-top: solid #000000 2px;
            border-right: solid #697f36 2px;
            border-bottom: solid #697f36 2px;
            border-left: solid #000000 2px;
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0px;
            -webkit-box-shadow: 0px 1px 3px #666666;
            -moz-box-shadow: 0px 1px 3px #666666;
            box-shadow: 0px 1px 3px #666666;
        }

    /*input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    height: auto;
    min-height: 30px;
    margin: 7px 0;
    background: none;
    cursor: pointer;
}

    input[type=range]:focus {
        outline: none;
    }
    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 12px;
        cursor: pointer;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: var(--Pink);
        border-radius: 10px;
        border: 0px solid #010101;
    }
    input[type=range]::-webkit-slider-thumb {
        box-shadow: 0.9px 0.9px 1px #000031, 0px 0px 0.9px #00004b;
        border: 1.6px solid #00001e;
        height: 26px;
        width: 26px;
        border-radius: 15px;
        background: #ffffff;
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -7px;
    }
    input[type=range]:focus::-webkit-slider-runnable-track {
        background: rgba(54, 126, 189, 0.78);
    }
    input[type=range]::-moz-range-track {
        width: 100%;
        height: 12px;
        cursor: pointer;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: var(--Pink);
        border-radius: 10px;
        border: 0px solid #010101;
    }
    input[type=range]::-moz-range-thumb {
        box-shadow: 0.9px 0.9px 1px #000031, 0px 0px 0.9px #00004b;
        border: 1.6px solid #00001e;
        height: 26px;
        width: 26px;
        border-radius: 15px;
        background: #ffffff;
        cursor: pointer;
    }
    input[type=range]::-ms-track {
        width: 100%;
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        color: transparent;
    }
    input[type=range]::-ms-fill-lower {
        background: var(--Pink);
        border: 0px solid #010101;
        border-radius: 20.2px;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    }
    input[type=range]::-ms-fill-upper {
        background: var(--Pink);
        border: 0px solid #010101;
        border-radius: 20.2px;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    }
    input[type=range]::-ms-thumb {
        box-shadow: 0.9px 0.9px 1px #000031, 0px 0px 0.9px #00004b;
        border: 1.6px solid #00001e;
        height: 26px;
        width: 26px;
        border-radius: 15px;
        background: #ffffff;
        cursor: pointer;
        margin-top: 0px;
    }
    input[type=range]:focus::-ms-fill-lower {
        background: var(--Pink);
    }
    input[type=range]:focus::-ms-fill-upper {
        background: var(--Pink);
    }*/

    input[type=range] {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 4px;
        background: #e9e9e9;
        border-radius: 999px;
        outline: none;
    }

        /* Chrome, Edge, Safari */
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #fff;
            border: 2px solid #ff4f93;
            cursor: pointer;
        }

        /* Firefox */
        input[type=range]::-moz-range-track {
            height: 4px;
            background: #e9e9e9;
            border-radius: 999px;
        }

        input[type=range]::-moz-range-thumb {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #fff;
            border: 2px solid #ff4f93;
            cursor: pointer;
        }

    /*****  File Upload Button *****/
    .file-upload {
        display: inline-block;
        overflow: hidden;
        text-align: center;
        vertical-align: middle;
        border: 3px solid var(--Neutrals4);
        color: #000;
        border-radius: 6px;
        -moz-border-radius: 6px;
        cursor: pointer;
        -webkit-border-radius: 6px;
    }

        /* Hide standard file upload button */
        .file-upload input, .file-upload button {
            /* Loses tab index in webkit if width is set to 0 */
            cursor: pointer;
        }

        /* New button text */
        .file-upload span {
            display: inline-block;
            /* Adjust button text vertical alignment */
            padding-top: 15px;
            text-align: center;
            vertical-align: middle;
        }

    .greyborder {
        border: solid 1px var(--Neutrals3);
        border-radius: 5px;
    }

        .greyborder.selected {
            border: solid 1px var(--DarkBlue);
            border-radius: 5px;
            background-color: var(--Neutrals3) !important;
        }