/* TR-SPECIFIC CLASSES AND OVERRIDES TO TIGA-SUPPLIED STYLES */


.tr-error {
    font-weight: bold;
    color: red;
}

.tr-done {
    font-weight: bold;
    color: black;
}

.show_more_less {
    cursor: pointer;
    text-decoration: underline;
    margin: 10px 0 0;
}

.filterSpacer {
    padding-bottom: 30px;
}

.table_gap {
    margin-top: 2em;
}

.product-border {
    border: 1px solid #979797;
}

.product-search {
    display: flex;
}

.product-search-input {
    text-align: left;
}

.product-search-input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: white;
    opacity: 1; /* Firefox */
}

.product-search-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: white;
}

.product-search-input::-ms-input-placeholder { /* Microsoft Edge */
    color: white;
}

.product-search-button {
    margin-left: -10px;
}

.product-search-form {
    flex-shrink: 0;
    flex-grow: 1;
    display: flex;
}

.page-icons {
    width: 3em;
}

.video-width {
    width: 100%;
}

.table_gap {
    margin-top: 2em;
}

.product-border {
    border: 1px solid #979797;
}

.inline {
    display: inline-block !important;
}

.plain-backgrond {
    background-color: #fff;
}

.video-icon {
    width: 2em;
}

.lastMenuRow {
    padding-bottom: 40px;
}

.bottom-spacing {
    padding-bottom: 40px;
}

dt.component79__noafter:after {
    content: "";
}

.pl-none {
    padding-left: 0 !important;
}

.pr-none {
    padding-right: 0 !important;
}

.gotoPage:hover {
    text-decoration: underline;
    color: #00a9b3;
}

#loginDropdown:hover, .pointer {
    cursor: pointer;
}

.dropdown-item:hover {
    color: #f0f0f0 !important;
    text-decoration: none;
    background-color: #16181b !important;
}

.hidden {
    display: none !important;
}

.pl-10 {
    padding-left: 10px !important;
}

/* *** Footer changes *** */
.footer__report__image {
    background-color: transparent !important;
}

.footer__upper__newsletter-report {
    align-items: flex-start;
}

@media (min-width: 992px) {
    .footer__upper__newsletter-report {
        flex-direction: row !important;
    }
}

@media (min-width: 768px) {
    .footer__group__list {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}
/* *** End of Footer changes *** */


.header_spacer {
    padding-top: 1.5em;
}

.bookmark-badge {
    position: relative;
    border: black;
}

.bookmark-badge[data-badge]:after {
    content: attr(data-badge);
    position: absolute;
    top: 0px;
    right: -5px;
    font-size: .7em;
    background: red;
    color: white;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    border-radius: 50%;
    box-shadow: 0 0 1px #333;
}

.enlarge {
    float: right;
    margin: 2px 0;
    display: block;
    height: 24px;
    cursor: pointer;
}

.signout {
    left: -45px;
}

.greeting_name {
    left: -205px;
}

.wizard, .tabcontrol {
    display: block;
    width: 100%;
    overflow: hidden
}

.wizard a, .tabcontrol a {
    outline: 0
}

.wizard ul, .tabcontrol ul {
    list-style: none !important;
    padding: 0;
    margin: 0
}

.wizard ul > li, .tabcontrol ul > li {
    display: block;
    padding: 0
}

.wizard > .steps .current-info, .tabcontrol > .steps .current-info {
    position: absolute;
    left: -999em
}

.wizard > .content > .title, .tabcontrol > .content > .title {
    position: absolute;
    left: -999em
}

.wizard > .steps {
    position: relative;
    display: block;
    width: 100%
}

.wizard.vertical > .steps {
    display: inline;
    float: left;
    width: 30%
}

.wizard > .steps .number {
    font-size: 1.429em
}

.wizard > .steps > ul > li {
    width: 25%
}

.wizard > .steps > ul > li, .wizard > .actions > ul > li {
    float: left
}

.wizard.vertical > .steps > ul > li {
    float: none;
    width: 100%
}

.wizard > .steps a, .wizard > .steps a:hover, .wizard > .steps a:active {
    display: block;
    width: auto;
    margin: 0 .5em .5em;
    padding: .7em .7em;
    text-decoration: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
}

.wizard > .steps .disabled a, .wizard > .steps .disabled a:hover, .wizard > .steps .disabled a:active {
    background: #eee;
    color: #aaa;
    cursor: default
}

.wizard > .steps .current a, .wizard > .steps .current a:hover, .wizard > .steps .current a:active {
    background: #023c6f;
    color: #fff;
    cursor: default
}

.wizard > .steps .done a, .wizard > .steps .done a:hover, .wizard > .steps .done a:active {
    background: #7887a7;
    color: #fff
}

.wizard > .steps .error a, .wizard > .steps .error a:hover, .wizard > .steps .error a:active {
    background: #ff3111;
    color: #fff
}

.wizard > .content {
    background: #eee;
    display: block;
    margin: .5em;
    min-height: 17em;
    overflow: hidden;
    position: relative;
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
}

.wizard.vertical > .content {
    display: inline;
    float: left;
    margin: 0 2.5% .5em 2.5%;
    width: 65%
}

.wizard > .content > .body {
    float: left;
    position: absolute;
    width: 95%;
    padding: 2.5%
}

.wizard > .content > .body ul {
    list-style: disc !important
}

.wizard > .content > .body ul > li {
    display: list-item
}

.wizard > .content > .body > iframe {
    border: 0 none;
    width: 100%;
    height: 100%
}

.wizard > .content > .body input {
    display: block;
    border: 1px solid #ccc;
}

.wizard > .content > .body input[type="checkbox"] {
    display: inline-block
}

.wizard > .content > .body input.error {
    background: #fbe3e4;
    border: 1px solid #fbc2c4;
    color: #8a1f11
}

.wizard > .content > .body label {
    display: inline-block;
    margin-bottom: .5em
}

.wizard > .content > .body label.error {
    color: #8a1f11;
    display: inline-block;
    margin-left: 1.5em
}

.wizard > .actions {
    position: relative;
    display: block;
    text-align: right;
    width: 100%
}

.wizard.vertical > .actions {
    display: inline;
    float: right;
    margin: 0 2.5%;
    width: 95%
}

.wizard > .actions > ul {
    display: inline-block;
    text-align: right
}

.wizard > .actions > ul > li {
    margin: 0 .5em
}

.wizard.vertical > .actions > ul > li {
    margin: 0 0 0 1em
}

.wizard > .actions a, .wizard > .actions a:hover, .wizard > .actions a:active {
    background: #023c6f;
    color: #fff;
    display: block;
    padding: .5em 1em;
    text-decoration: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
}

.wizard > .actions .disabled a, .wizard > .actions .disabled a:hover, .wizard > .actions .disabled a:active {
    background: #eee;
    color: #aaa
}

.wizard > .loading {
}

.wizard > .loading .spinner {
}

.wizard > .steps > ul > li {
    width: auto;
}

.wizard h4 {
    color: #023c6f;
}

.product-result {
    display: flex;
}

.product-result-D1 {
    width: 8%;
}

.product-result-D2 {
    width: 73%;
}

.product-result-D3 {
    width: 18%;
    text-align: right;
}

.last {
    margin-right: auto;
}

.research {
    display: block;
}

.tokenbox {
    width: 70%;
}

.product_thumbnail {
    width: 70%;
}

.side_image {
    width: 50%;
    float: left;
}

.clickLink {
    text-decoration: underline;
    cursor: pointer;
}

.rollover-container { }

.rollover-container .rollover-img {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

.rollover-container:hover .rollover-img {
    display: inline;
}


/* ********** COMPONENT OVERRIDES ********** */
.component80__collection-icon {
    padding-top: 0;
}

.info-bar__icon {
    z-index: 999 !important;
}

.component11_just_link {
    color: #38a2dc;
}

.component11__item_no_expand {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* (Marketing don't want automatic lines between videos. They'll add them where they need them) */
.component68__list__item:first-child {
    border: none !important;
}

.component68__list__item {
    border: none !important;
}

/* Show link text as white within this component where appropriate */
.component34__items h3 a {
    color: #fff !important;
}

.component34__items h3 a, .component25__item__copy a {
    color: #fff !important;
}

/* Show hover text as black */
.component25__item__copy a:hover {
    color: #000 !important;
}

.component40__filters__list__values {
    margin-bottom: 0px !important;
}

#dropdownModelButton {
    margin-top: 20px !important;
    padding: 21px 40px !important;
    font-size: .9rem !important;
    font-weight: 500 !important;
}

@media (min-width: 768px) {
    .component21_3__row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 10px;
        row-gap: 10px;
    }
}

@media (max-width: 1459.98px) {
    #dropdownModelButton {
        margin-bottom: 20px !important;
        padding: 21px 10px !important;
    }
}

/* ********** END OF COMPONENT OVERRIDES ********** */



/* ********** REGISTER/LOGIN/ACCOUNT ENHANCEMENTS ********** */

.accountBackground {
    background-color: #E9F9F7 !important;
}

.btn-point-right {
    min-width: 130px;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
    transition: background-color 0.3s ease;
}

.btn-point-right-text {
    margin-left: -10px; 
}

.btn-point-right-icon {
    position: absolute;
    right: 10px;
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 91 127'%3E%3Cpath fill='%23fff' d='M34.62,83.18l-.09-42.22c0-1.15.44-2.26,1.21-3.01.62-.61,1.38-.93,2.17-.91,1.79.04,3.26,1.74,3.26,3.8v32.14c.01,1.12.93,2.04,2.06,2.04s2.04-.92,2.04-2.04v-8.54c0-2.05,1.45-3.72,3.24-3.72s3.24,1.67,3.24,3.72v9.83c0,1.12.91,2.04,2.04,2.04s2.04-.92,2.04-2.04c0-.66.01-8.33.03-9.1.21-1.83,1.59-3.22,3.21-3.22,1.79,0,3.24,1.67,3.24,3.72v10.31c0,1.12.91,2.04,2.04,2.04s2.04-.92,2.04-2.04v-8.65c0-2.06,1.45-3.73,3.24-3.73s3.24,1.67,3.24,3.73v7.22c0,11.94-1.18,23.89-3.52,35.55-.56,2.79-2.81,4.82-5.35,4.82h-22.69c-2.24,0-4.36-1.33-5.54-3.47l-19.06-34.67c-.23-.53-.25-1.15-.05-1.7.18-.49.51-.86.93-1.05.69-.32,1.42-.47,2.14-.47,1.59,0,3.16.76,4.26,2.15l6.96,8.78c.54.68,1.45.94,2.27.66.83-.29,1.38-1.07,1.37-1.93M69.65,59.5c-1.66,0-3.26.6-4.56,1.7-1.37-2.11-3.6-3.35-6.01-3.35-1.75,0-3.42.66-4.74,1.85-1.39-1.94-3.54-3.08-5.83-3.08-1.12,0-2.24.28-3.24.8v-16.6c-.02-4.27-3.28-7.8-7.29-7.88-1.88-.05-3.7.7-5.11,2.09-1.56,1.53-2.44,3.7-2.44,5.95l.08,36.33-3.3-4.16c-2.8-3.53-7.34-4.67-11.31-2.85-1.41.64-2.5,1.83-3.05,3.35-.59,1.58-.52,3.35.18,4.87.02.05.04.09.06.13l19.1,34.77c1.9,3.45,5.4,5.59,9.13,5.59h22.69c4.48,0,8.42-3.42,9.36-8.11,2.39-11.92,3.6-24.15,3.6-36.35v-7.22c0-4.31-3.29-7.81-7.33-7.81'/%3E%3Cpath fill='%23fff' d='M24.43,60.74c.32.19.68.29,1.05.29.71,0,1.39-.38,1.76-1,.28-.47.36-1.02.23-1.55-.13-.53-.46-.98-.93-1.26-6.7-4.01-10.69-11.07-10.69-18.88,0-12.13,9.86-22,22-22s22,9.86,22,22c0,3.46-.78,6.77-2.31,9.83-.5,1.01-.09,2.24.91,2.75.49.24,1.04.28,1.56.11.52-.17.94-.53,1.18-1.03,1.82-3.64,2.74-7.56,2.74-11.66,0-14.39-11.7-26.09-26.09-26.09s-26.09,11.7-26.09,26.09c0,9.26,4.74,17.63,12.68,22.39'/%3E%3Cpath fill='%23fff' d='M48.22,45.82c.15.53.49.96.97,1.23.31.17.66.26,1,.26.74,0,1.42-.4,1.79-1.05,1.35-2.4,2.06-5.14,2.06-7.91,0-8.93-7.26-16.2-16.2-16.2s-16.2,7.27-16.2,16.2c0,2.57.62,5.13,1.78,7.4.25.48.67.84,1.2,1.01.52.17,1.07.12,1.56-.12.49-.25.85-.67,1.01-1.2.17-.52.12-1.08-.13-1.56-.88-1.72-1.33-3.57-1.33-5.52,0-6.68,5.44-12.11,12.11-12.11s12.11,5.44,12.11,12.11c0,2.07-.53,4.12-1.53,5.92-.27.47-.33,1.03-.19,1.55'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

.enquiryHeader {
    background-color: #00a9b3 !important;
    color: #fff !important;
    height: 55px !important;
    font-weight: normal !important;
}

.enquiryLine {
    background-color: #99e6e9 !important;
    color: #000 !important;
    height: 55px !important;
    font-weight: bold !important;
}
    .enquiryLine a {
        color: #000 !important;
    }

#enquiriesTable {
    border-collapse: separate;
    border-spacing: 7px 10px; 
}

#enquiriesTable td,
#enquiriesTable th {
    padding-left: 10px;
}


.enquiryDetailsLine {
    background-color: #00a9b3 !important;
    color: #fff !important;
    height: 55px !important;
    font-weight: normal !important;
    vertical-align: top !important;
    padding-top: 10px !important;
}

.enquiryDetailsLineImage {
    background-color: #fff !important;
    padding-left: 0 !important;
}

    .enquiryDetailsLine a {
        color: #fff !important;
        font-weight: normal !important;
    }
/* ********** END OF REGISTER/LOGIN/ACCOUNT ENHANCEMENTS ********** */


.rollover {
    -webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out;
}

    .rollover:hover {
    }


/* ***** Product Dashboard (with /******** Traffic lights  and Bins ********/
.gotoPage:hover {
    text-decoration: underline;
    color: #00a9b3;
    font-weight: bold;
}

.DashboardResultsTable td, .DashboardResultsTable th {
    padding-left: 5px;
    padding-right: 5px;
}

.NoOrdersFound {
    border: 1px #38a2dc solid !important;
}

.DisplayOrders {
    background-color: #38a2dc !important;
}

.ProductPageNumber {
    background-color: #00a9b3 !important;
    color: #fff !important;
}

#DashboardCustomerResults td {
    vertical-align: top;
}

#DashboardOrderResults tbody tr:nth-of-type(even) {
    background-color: #f0f0f0;
}

#DashboardOrderResults tbody tr:nth-of-type(odd) {
    background-color: #fff;
}

#DashboardPageLoaderDisplay {
    height: 35px !important;
    text-align: center !important;
}

#traffic-light {
    float: right;
    display: block;
    left: 50%;
    top: 50%;
    background-color: #333;
    width: 17px;
    height: 42px;
    border-radius: 30px;
}

#traffic-light input {
    appearance: none;
    position: relative;
    left: 50%;
    width: 7px;
    height: 7px;
    margin-left: -3px;
    margin-top: 5px;
    vertical-align: middle;
    border-radius: 100%;
    display: block;
}

.tl-red {
    background-color: #FF0000 !important;
}

.tl-amber {
    background-color: #FFBF00 !important;
}

.tl-green {
    background-color: #00FF00 !important;
}

.tl-neutral {
    background-color: grey;
}

.bin-warn,
.bin-warn::before,
.bin-warn::after {
    position: relative;
    padding: 0;
    margin: 0;
}

.bin-warn {
    font-size: 36px;
    color: transparent;
}

.bin-warn.bin-warning {
    display: inline-block;
    top: 0.225em;
    width: 1.15em;
    height: 1.15em;
    overflow: hidden;
    border: none;
    background-color: transparent;
    border-radius: 0.625em;
}

.bin-warn.bin-warning::before {
    content: "";
    display: block;
    top: -0.08em;
    left: 0.0em;
    position: absolute;
    border: transparent 0.6em solid;
    border-bottom-color: #fd3;
    border-bottom-width: 1em;
    border-top-width: 0;
    box-shadow: #999 0 1px 1px;
}

.bin-warn.bin-warning::after {
    display: block;
    position: absolute;
    top: 0.3em;
    left: 0;
    width: 100%;
    padding: 0 1px;
    text-align: center;
    font-family: "Garamond";
    content: "!";
    font-size: 0.65em;
    font-weight: bold;
    color: #333;
}

.pct-circle {
    --size: 120px;
    --fill: #16a34a;
    --ring-color: #0ea5e9;
    --gap: 8px;
    --ring: 10px;
    --text-color: #fff;
    --font-size: 1.0rem;
    width: var(--size);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--fill);
    box-shadow: 0 0 0 var(--gap) #fff, 0 0 0 calc(var(--gap) + var(--ring)) var(--ring-color);
    display: grid;
    place-items: center;
    color: var(--text-color);
    font: 600 var(--font-size)/1 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    text-align: center;
    user-select: none;
    margin-right: 2em;
    margin-bottom: 1em;
}

.bin-total-results {
    display: flex;
    justify-content: right;
}
/******** End of Product Dashboard, Traffic lights and Bins ********/

/*********  TWO FA MODAL ***********/
.twofa-modal {
    position: fixed;
    z-index: 99999;
    padding-top: 300px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.twofa-modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 60%;
}

/*********   END OF 2FA MODAL **********/

/*********  COLLECTIONS ***********/
#collectionsModalWrapper {
    padding: 5px;
}