/**
 * /-------------------------------------------------\
 * |- Arrow Theme - License: CTI - Author: CTI      -|
 * |- Surface: CTI Bootstrap 4.1.x series   -|
 * |- Mods: CSS3    -|
 * \-------------------------------------------------/
 */
@import 'https://fonts.googleapis.com/css?family=Rubik%3A100%2C300%2C400%7CMontserrat%3A100%2C300%2C400%2C500%2C700%2C900&subset=latin%2Clatin-ext';
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
/**
 * Core element styling
 */
html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-family: 'Montserrat', 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

* {
    box-sizing: inherit;
    -webkit-box-sizing: inherit;
}

body {
    scroll-behavior: smooth;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#pagecontent { /* #pagecontent contains main */
    flex-grow: 1;
}

/**
 * 1. Body
 */
body.reg-light-background {
    background-color: #f4f5fa;
    background-color: #ffffff;
    color: #6B6F81;
    font-family: 'Montserrat',-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.71;
    font-weight: 400;
    font-size: 16px;
    font-feature-settings: 'kern' 1;
    text-rendering: optimizeLegibility;
    margin: 0;
    overflow-x: hidden;
    overflow-y: visible;
}

body.reg-light-background label {
    color: #6c757d;
    font-size: 16px;
}

/**
 * 2. Headers
 */
header.default {
    border-color: #eff0f5;
    border-style: solid;
    border-width: 0 0 1px;
    display: block;
}

/**
 * 3. Sections
 */
section.arrow--top-bar {
    position: relative;
    padding-top: 8px;
    padding-bottom: 8px;
}
section.arrow--top-bar::after {
    background-color: #f4f5fa;
    background-color: #ffffff;
    position: absolute;
    content: "";
    left: 50%;
    height: 1.1px;
    width: 100vw;
    margin-left: -50vw;
    bottom: 0;
}
section.main-header {
    padding-top: 14px;
    padding-bottom: 14px;
}

/**
 * 4. Links
 */
section.arrow--top-bar a.topbar-link {
    color: #434759;
	font-weight: 300;
}
section.arrow--top-bar a.topbar-link:hover {
		color: #353745;
		font-weight: 400;
}

/**
 * 5. Theme Colorsets
 */
.has-white-background {
    background: #ffffff;
}

/**
 * 6. Generic / Helper Utility Classes
 */
.site-title {
    font-family: 'Rubik', sans-serif;
    text-transform: uppercase;
    margin: 0;
    /*letter-spacing: 2px;*/
    line-height: 1.11;
    font-weight: 600;
    font-size: 27px;
    color: #6c757d;
		transition: .3s;
		-webkit-transition: .3s;
		-o-transition: .3s;
		-moz-transition: .3s;
}
.site-description {
    color: #6c757d;
    margin: 0;
    line-height: 1.41;
    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
}
li.nav-item.active > a.nav-link {
    color: #fff;
}
li.nav-item > a.nav-link:hover {
    color: #eee;
}
li.nav-item > a.nav-link {
    color: #fff;
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
}
.site-content::before {
    word-wrap: break-word;
}
.arrow--main-content {
    background: #f4f5fa;
    background-color: #ffffff;
}

/**
 * 7. Forms
 */
form.site-search-form {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
}
form.site-search-form input.search-input:focus {
    border-color: #898EA2;
    outline: 0;
    box-shadow: none !important;
}
input.search-input {
    padding-top: 11px;
    padding-bottom: 11px;
    border-radius: 0px !important;
}
.form-inline-input, .cart-item input[type="number"] {
    border: 0px !important;
    outline: 0px !important;
}
input.square, .square {
    border-radius: 0px !important;
}
.btn-end-of-form-card {
    margin-top: 40px;
    margin-bottom: -20px;
    z-index: 1000;
    padding: 10px;
}
.input-default {
    background-color: #ffffff;
    color: #898EA2;
    border-color: #DDDFE7;
}
.input-default:valid {
    border-color: #28D094 !important;
}
.input-optional:valid {
    border-color: #DDDFE7 !important;
}
.input-default:invalid {
		border-color: red !important;
}
input[type="password"], input[type="text"], input[type="email"], select, textarea {
    -webkit-box-shadow: 0 2px 1px 0 rgba(0,0,0,.03);
    box-shadow: 0 2px 1px 0 rgba(0,0,0,.03);
    -webkit-transition: border .3s ease !important;
    -o-transition: border .3s ease !important;
    transition: border .2s ease !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-style: solid;
    border-width: 1px;
    outline: 0 !important;
}
input[type="number"] {
    -moz-appearance: textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
    -moz-appearance: none;
}

/**
 * 8. Buttons
 */
button.top-search-button {
    margin-left: -4px;
    border-radius: 0px;
    color: #ffffff;
    border-color: #666EE8;
    background-color: #666EE8;
    border-style: solid;
    border-width: 1px;
    padding: 11px 40px;
    outline: 0;
    transition: .3s;
    -webkit-transition: .3s;
    -o-transition: .3s;
    letter-spacing: normal;
}
button.navbar-toggler {
    border: 1px solid #666EE8;
    color: #666EE8;
}
button.btn, a.btn, span.btn {
    border-radius: 0px;
}
input.arrow--btn-brand,button.arrow--btn-brand,a.arrow--btn-brand {
    color: #ffffff;
    border-color: #666EE8;
    background-color: #666EE8;
    border-style: solid;
    border-width: 1px;
    outline: 0;
    transition: .3s;
    -webkit-transition: .3s;
    -o-transition: .3s;
    letter-spacing: normal;
}
a.arrow--btn-expand:hover, button.arrow--btn-expand:hover {
    padding: 11px 40px;
    border-radius: 0px;
    transition: .3s;
    -webkit-transition: .3s;
    -o-transition: .3s;
    letter-spacing: normal;
}
.btn-link:hover {
    border-color: #666EE8;
    background-color: #666EE8;
    color: #FFFFFF;
}
a.arrow--btn-brand:hover {
    color: #ffffff;
    border-color: #666EE8;
    background-color: #666EE8;
    border-style: solid;
    border-width: 1px;
    padding: 11px 40px;
    border-radius: 0px;
    outline: 0;
    transition: .3s;
    -webkit-transition: .3s;
    -o-transition: .3s;
    letter-spacing: normal;
}
a.arrow--basket-button {
    background-color: #666EE8;
    border-color: #666EE8;
    color: #ffffff;
    border-style: solid;
    border-width: 1px;
    padding: 5px 34px 5px 10px;
}
a.top-action-button {
    display: none;
}

/**
 * 9. Footers
 */
.arrow--site-footer {
    background-color: #353745;
    margin: 0;
    padding: 0;
    padding-top: 31px;
    padding-bottom: 28px;
    /*z-index: -2;*/ /* removing this line fixed a bug introduced in GIT commit... 77fd0e549738370d8517fbd4015f064c8ea41a7c */
}
h5.footer-title {
    color: #F4F5Fa;
    color: #ffffff;
    border-color: #6E6F70;
    border-width: 0 0 1px;
    border-style: solid;
    display: inline-block;
    padding-top: 25px;
    padding-bottom: 15px;
    z-index: 2;
    text-transform: uppercase;
    position: relative;
    line-height: normal;
    font-weight: 500;
    font-size: 14px;
    font-family: 'Rubik', sans-serif;
}
h5.footer-title::after {
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    content: "";
    opacity:.5;
    border-width: 0 0 1px;
    position: absolute;
    border-style: solid;
}
a.footer-link {
    color: #6E6F70;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
}
a.footer-link:hover {
    text-decoration: underline;
}

/**
 * 10. Cards
 */
.card {
    /* parent class */
}
.card-shadow {
    box-shadow: 0 10px 14px 0 rgba(69,73,91,.08);
}
.card-shadow-on-hover:hover {
    box-shadow: 0 10px 14px 0 rgba(69,73,91,.08);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}
.card-no-border {
    border: 0px;
}

/**
 * 11. Cart Highlighers and Extensions
 */
.arrow--tablelike-grid, .highlight {
    background-color: #F4F7F5;
}
.arrow--checkout-billing-section-title {
    padding-bottom: 5px;
    margin-bottom: 0;
    text-transform: uppercase;
    line-height: 1.75;
    color: #6c757d;
    font-size: 16px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    border-bottom: 1px solid #eee;
}
.arrow--checkout-billing-label-title {
    letter-spacing: .5px;
    color: #898d9f;
    text-align: right;
    font-size: 12px !important;
    text-transform: uppercase;
}

/**
 * 12. Call to Actions (CTAs) and Floating Action Buttons (FABs)
 */
.fab {
    width: 40px;
    height: 40px;
    line-height: 40px;
    background-color: #666EE8;
    border-radius: 50%;
    transition: all 0.1s ease-in-out;
    box-shadow: 0 6px 10px 0 rgba(255,255,255,0.1);

    font-size: 22px;
    color: white;
    text-align: center;
    /*line-height: 70px;*/

    position: fixed;
    right: 50px;
    bottom: 50px;
}

.fab:hover {
    box-shadow: 0 6px 14px 0 #666;
    transform: scale(1.05);
    color: #ffffff;
}

.fab-module {
    position: fixed;
    right: 50px;
    bottom: 50px;
    margin-right: 45px;
    box-shadow: 0 6px 10px 0 rgba(255,255,255, 0.1);
}
.fab-module--search-form {
    transition: all 0.3s;
}

/**
 * 13. Custom Size and Hover Actions
 */
.arrow--card-hover-highlight:hover {
    background: #666EE8;
    color: #ffffff;
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

/**
 * 14. CTI Override Replacements (cti-noimage -> arrow--no-image, etc)
 */
.arrow--noimage-wrapper {
    width: 100%;
    min-height: 300px;
    background-color: #eee;
    text-align: center;
    border-radius: 8px;
    margin: auto;
}
.arrow--noimage {
    display: block;
    padding-top: 120px;
}
.arrow--noimage-wrapper-sm {
    width: 100%;
    min-height: 100px;
    background-color: #eee;
    text-align: center;
    border-radius: 8px;
    margin: auto;
}
.arrow--main-content  img {
	max-width: 100%;
	height: auto;
}
.arrow--noimage-sm {
    display: block;
    padding-top: 40px;
}
.arrow--border-radius-0 {
    border-radius: 0px !important;
}

/**
 * 15. Alerts
 */
.alert-primary {
    background-color: #666EE8;
    color: #ffffff;
}
.arrow--alert {
    padding: 14px;
    width: 100%;
    display: block;
}

/**
 * 16. Badges
 */
.badge-primary {
    background-color: #666EE8;
    color: #ffffff;
}

/**
 * 17. List Group Items
 */
.list-group-item.active {
    background-color: #666EE8;
    border-color: #666EE8;
}

/**
 * 18. Accents
 */
.arrow--underlight {
    color: #666EE8;
    padding-bottom: 4px;
    margin-bottom: 4px;
    border-bottom: 4px solid #666EE8;
}
.arrow--underlight::before {
    background-color: #666EE8;
    padding-bottom: 34px;
    display: inline-block;
    transition: .3s;
    -o-transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    padding-top: 23px;
}
.arrow--underlight::after {
    color: #FFF;
    background-color: #666EE8;
    right: 0;
    border-radius: 100px 0 0 100px;
    font-weight: 600;
    font-size: 22px;
}

/**
 * 19. Feather Replacements
 */

/**
 * 20. Media Queries
 */
@media screen and (max-width: 415px) {
    .d-cs-none {
display: none;
    }
    .d-cs-block {
display: block !important;
    }
    .search-input {
padding-top: 4px !important;
padding-bottom: 4px !important;
    }
    button.top-search-button {
margin-left: -4px;
border-radius: 0px;
color: #ffffff;
border-color: #666EE8;
background-color: #666EE8;
border-style: solid;
border-width: 1px;
padding: 4px 10px;
outline: 0;
transition: .3s;
-webkit-transition: .3s;
-o-transition: .3s;
letter-spacing: normal;
    }
    a.top-action-button {
margin-top: 5px;
margin-left: -4px;
border-radius: 0px;
color: #ffffff;
border-color: #666EE8;
background-color: #666EE8;
border-style: solid;
border-width: 1px;
padding: 4px 10px;
outline: 0;
transition: .3s;
-webkit-transition: .3s;
-o-transition: .3s;
letter-spacing: normal;
display:block;
    }
}

.no-underline:hover {
	text-decoration: none;
	color: inherit !important;
	text-shadow: 1px 2px rgba(0,0,0,0.1);
}

/**
 * Courses
 */
.arrow--main-content h3#course_list {
	border: 1px solid #ccc;
	border-radius: 0px;
}

/**
 * Covers
 */
.cover-transparent {
	background-color: transparent;
}
.cover-dark {
	background-color: #333;
}
.cover-light {
	background-color: #fefefe;
}
.cover-none {
	background-color: transparent;
}
.cover {
	padding: 0 1.5rem;
}
.cover .btn-lg {
	padding: .75rem 1.25rem;
	font-weight: 700;
}
.cover-container {
	width: 100vw !important;
	height: 100vh !important;
}
/**
 * HD Laptop/Desktop Display
 */
@media (min-width: 1920px) {
	.cover-container {
		margin-left: -400px !important;
	}
}
/**
 * Standard Laptop (1366x768)
 */
@media screen and  (min-width: 1366px) and (max-width: 1800px) {
	.cover-container {
		margin-left: -50px !important;
	}
}
/**
 * Standard Laptop (1280x720)
 */
@media screen and (min-width: 1280px) and (max-width: 1299px) {
	.cover-container {
		margin-left: -85px !important;
	}
}
/**
 * iPad/iPad Mini 2
 */
@media screen and (min-width: 1024px) and (max-width: 1260px) {
	.cover-container {
		margin-left: -50px !important;
	}
}
/**
 * iPhone SE, 6x and 6x Plus, 7x and 7x Plus, Nexus 4, Nexus 5, Nexus 6, Nexus S Series
 */
@media screen and (min-width: 320px) and (max-width:700px) {
	.cover-container {
		margin-left: -15px !important;
	}
}

/**
 * Better List Group Styling
 */
ul.stylized {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	padding-left: 0;
	margin-bottom: 0;
}
ul.stylized li:first-child {
	border-top-left-radius: .25rem;
	border-top-right-radius: .25rem;
}
ul.stylized li {
	position: relative;
	display: block;
	padding: .75rem 1.25rem;
	background-color: #fff;
	margin-bottom: -1px;
	border: 1px solid rgba(0,0,0,0.125);
	transition: all 0.3s;
	-o-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-moz-transition: all 0.3s;
}
ul.stylized li:last-child {
	margin-bottom: 0;
	border-bottom-right-radius: .25rem;
	border-bottom-left-radius: .25rem;
}
ul.stylized li:hover {
	box-shadow: 0 1rem 3rem rgba(0,0,0,0.175) !important;
}
.theme-arrow-view .card.yellow {
	color: white;
	background-color: #dc8633;
}
.theme-arrow-view .card.grey {
	color: white;
	background-color: #D3D3D3;
}
.theme-arrow-view .card.green {
	color: white;
	background-color: #98b99f;
}
.theme-arrow-view .card.red {
	color: white;
	background-color: #c1272d;
}
.theme-arrow-view .card.blue {
	color: white;
	background-color: #add8e6;
}
.theme-arrow-view .card.green-lt {
	color: white;
	background-color: #00df5a;
}
.theme-arrow-view .card.marsal {
	color: white;
	background-color: #a9585c;
}
.theme-arrow-view .card.dark-grey {
    color: white;
    background-color: #6e6f70;
    opacity: 0.7;
}

/* Hover Styles */
.theme-arrow-view .card.yellow:hover,
.theme-arrow-view .card.grey:hover,
.theme-arrow-view .card.green:hover,
.theme-arrow-view .card.red:hover,
.theme-arrow-view .card.blue:hover,
.theme-arrow-view .card.green-lt:hover,
.theme-arrow-view .card.marsal:hover,
.theme-arrow-view .card.dark-grey:hover {
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.175);
}
/** Nospace Rows removes all column padding, makes all blocks evenly aligned */
.row.nospace-row .card {
	min-height: 11.5rem;
	max-height: 100%;
	border: 0px;
}
.row.nospace-row h3.title {
	font-weight: bold;
	font-family: 'Roboto', sans-serif;
}
.row.col-nospace-row {
	padding: 0;
	margin: 0;
}
.row.col-nospace-row div[class^='columns'] {	
	padding: 0;
}
.row.col-nospace-row h3.title {
	font-weight: bold;
	font-family: 'Roboto', sans-serif;
}

/**
 * Resolutions via CSRs
 */
@media screen and (min-width: 1279px) and (max-width: 1291px) {
	.alert-primary-enforce-policy {
		bottom: 20px !important;
	}
}

/**
 * Widgets
 */
.arrow-stickybar {
	position: fixed;
	background: #fff;
	width: 100% !important;
	z-index: 999;
	transition: visibility 2s ease-in-out;
}
.better-input-form-control {
	background-color: #fff;
	width: 100%;
	height: 2.375rem;
	padding: 0.375rem 0.75rem;
	font-weight: 400;
	line-height: 1.6;
	background-clip: padding-box;
	border: 1px solid rgba(0, 40, 100, 0.12);
	border-radius: 3px;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.adjust-inline-search-btn {
	margin-left: -35px;
	border-left: 0px;
	border-radius-top-left: 0px;
	border-radius-bottom-left: 0px;
	border-top: 1px solid rgba(0, 40, 100, 0.12);
	border-bottom: 1px solid rgba(0, 40, 100, 0.12);
	border-right: 1px solid rgba(0, 40, 100, 0.12);
	border-radius: 3px;
}
.adjust-inline-search-btn:hover {
	background: #58cfa0;
	color: #fff;
}
/**
 * Backports
 */
#customer-login, #create-new-account {
    min-height: 100%;
    margin-bottom: 1rem;
}
#cti_adfs_login {
    height: 105%;
}
#cti_guest_login{
    height: 100%;
}
.arrow-hero-banner{
    position: absolute !important;
    margin-bottom: 0px !important;
    border-color: transparent !important;
    bottom: 0px !important;
    right: 0px !important;
    left: 0px !important;
    text-align: center !important;
    padding-top: 10px !important;
}
.arrow-hero-banner-primary{
    background-color: #6e6f6f !important;
    color: #ffffff !important;
}
.arrow-hero-banner-secondary{
    background-color: #ffffff !important;
    color: #000000 !important;
}
.btn.btn-orderhistory[type=submit]:hover {
	background: #0066d9!important;
}
.modal-content{
	top:20px!important;
}
.arrow-noimage {
    background: #ddd;
    padding-top: 6em;
    padding-left: 14em;
    padding-right: 8em;
    padding-bottom: 6em;
}


/* esolution accordion collapsible */

.accordion:has(.esolution-accordion) {
    border: none !important;
}
.accordion .card:has(.esolution-accordion) {
    border: none !important;
    margin-top: 0px !important;
    margin-bottom: 0.25rem;
}
.esolution-accordion {
	padding-right: 25px;
}
.esolution-accordion.accordion-header {
        font-size:17px;
        font-weight: bold;
}
.esolution-accordion.collapsible.card-header {
        padding-top: 17px!important;
        padding-left: 10px;
        height: auto;
        background-color: #eeeeee;
        border-bottom: 1px solid rgba(0,0,0,.125);
}
.esolution-accordion {
    color: #212529;
}
.esolution-accordion.card-header {
    padding: 1rem;
    background-color: #343a40;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Both the "header" and the "caret" are display block. */
    color: #ffffff;
}
.esolution-accordion.card-header:hover {
    cursor: pointer;
}
.esolution-accordion.card-header::after {
    content: "\f0da"; /* unicode for FontAwesome caret-right icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* FontAwesome solid icons require font-weight of 900 */
    font-size: 1rem;
}
.esolution-accordion.card-header.active::after {
    content: "\f0d7"; /* unicode for FontAwesome caret-down icon */
}
.esolution-accordion.card-header > .esolution-accordion.accordion-header {
    /* e.g. <h2 class="esolution-accordion accordion-header">Header</h2> */
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0; /* Removes margin from header tags. */
    color: #ffffff;
}
.esolution-accordion.content {
    border: 1px solid #343a40;
    /*display: none;*/ /* Using max-height vs display to have transition. */
    max-height: 0px; /* All accordion content is not to be displayed initially. */
    overflow-y: hidden;
    overflow-x: auto; /* A horizontal scrollbar may be required. */
    transition: max-height 0.5s ease;
}
.esolution-accordion.content > .esolution-accordion.card-body {
    /* e.g. <div class="esolution-accordion card-body">Content</div> */
    padding: 1rem;
}



/*
* style for popup used for item forms
* carried forward from esolution.css
*/

#cti-buy-form-wrapper {
    position: fixed; /* Changed from fixed to absolute */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centering the modal */
    width: 45%; /* One-third of the viewport on large displays */
    background-color: #eeeeee;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5); /* Adding some shadow for better visibility */
    z-index: 1050; /* Ensuring it's above other content */
    display:none;
    padding: 15px;
}

@media (max-width: 768px) {
	#cti-buy-form-wrapper {
        	position: fixed;
        	padding-top: 100px;
        	width: 100%;
        	height: 100%;
        	top: 0;
        	left: 0;
        	transform: none; /* Resetting transform for full coverage */
	}
	.arrow-stickybar {
		z-index: 999;
	}
}
#cti-buy-form-wrapper #cti-buy-form {
    width: 95%;
}
#cti-buy-form-wrapper .modal-header {
    position: relative; /* Ensure positioning context */
}

#cti-buy-form-wrapper .cti-buy-form-close {
    position: absolute;
    right: 10px; /* Adjust as needed */
}

#cti-buy-form-wrapper .cti-buy-form-close {
    cursor: pointer; /* Making it clear it's clickable */
}

#cti-buy-form-wrapper .modal-dialog, #cti-buy-form-wrapper .modal-content {
    height: 100%; /* Ensure full height */
}

#cti-buy-form-wrapper .modal-header {
    border-bottom: 1px solid #ddd; /* A subtle separator */
}

#cti-buy-form-wrapper .modal-body {
    overflow-y: auto; /* In case the content overflows */
}



/* catalogue banner block */

.catalogue_banner a.catalogue_banner_thumbnail_title {
    display: block;
}

.catalogue_banner a.catalogue_banner_thumbnail_title:hover {
    /*text-decoration: none;*/
}

.catalogue_banner a.catalogue_banner_thumbnail_title > div:has(.catalogue_banner_thumbnail) {
    aspect-ratio: 3 / 4; /* This rule may be overwritten in theme.css as per the image width / height ratio of the customer's catalogue images. */
    display: flex;
    justify-content: center;
    align-items: center;
}

.catalogue_banner .catalogue_banner_thumbnail {
    max-width: 100%;
    max-height: 100%;
}

.catalogue_banner .price {

}

.catalogue_banner .price .new {

}

.catalogue_banner .price .old {
    text-decoration: line-through;
}



/* slider view slides */

.arrow-slider.carousel.slide .carousel-item .carousel-img-container a.btn {
    background-color: transparent !important;
    display: block;
    /* height in px is set in view *** */
}

.arrow-slider.carousel.slide .carousel-item .carousel-img-container img {
    /* center image in slide... */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.arrow-slider.carousel.slide .carousel-item .carousel-img-container img.arrow-slider-image-cover {
    /* have the image cover the slider */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.arrow-slider.carousel.slide .carousel-item .carousel-img-container img.arrow-slider-image-contain {
    /* contain the image within the slider */
    max-width: 100%;
    max-height: 100%;
}



/* section ecommerce */

section#ecommerce_bar {
    padding: 0.25rem 0;
}

section#ecommerce_bar li.nav-item > a.nav-link {
    color: #212529;
}

section#ecommerce_bar li.nav-item > a.nav-link:hover {
    color: #6c757d !important;
}

section#ecommerce_bar .site-logo, section#ecommerce_bar .navbar-toggler, section#ecommerce_bar .navbar {
    position: relative;
    top: 50%;
    transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
}

section#ecommerce_bar .site-logo img {
    max-width: 100%;
    max-height: 48px; /* Adjust logo height in local theme. */
}

section#ecommerce_bar .navbar {
    padding-top: 0;
    padding-bottom: 0;
}

section#ecommerce_bar button:focus, section#ecommerce_bar button:focus-visible {
    outline: none;
}



/* header and arrow-sticky */

header.arrow-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
}

section#ecommerce_bar .container.arrow-sticky-at-top {
    max-width: 100%; /* As declared in Bootstrap class container-fluid. */
}

section#ecommerce_bar .navbar-toggler-container.arrow-sticky-at-top {
    display: block !important;
}

section.primary-navigation .navbar-collapse.arrow-sticky-at-top {
    display: none !important;
}

section.primary-navigation .navbar-collapse.arrow-sticky-at-top.show {
    display: block !important;
}



/* search bar */

#search_bar_desktop {
    width: 100%;
    height: 5.875rem;
    background-color: #353745;
    display: none;
}

#search_bar_desktop.active {
    display: block;
}

#search_bar_desktop input#search_input {
    margin-top: 1rem !important;
    padding: 1rem !important;
    font-size: 2rem;
}

#search_bar_desktop button[data-dismiss=close_search_bar] {
    line-height: 3.875rem;
    padding-right: 1rem
}

#search_bar_mobile {
    /*display: none;*/
    width: 100%;
}

#search_bar_mobile form {
    margin-top: 0.25rem;
}

#search_bar_mobile input {

}

#search_bar_desktop input, #search_bar_mobile input {
    border: none;
    border-left: 1px solid #353745;
    border-right: 1px solid #353745;

}

#search_bar_desktop button.close {
    color: #353745;
}

#search_bar_mobile.active {
    /*display: block;*/
}

.arrow_nav_block {
	margin-bottom: 15px;
	display: flex;
	justify-content: center;
}

.megaad-image:hover {
        opacity: .8;
}
.megaadd-block {
        display: flex;
        flex-direction: column; 
        align-items: center; 
        width: 100%;
}

.megaad-images {
        display: flex;
        gap: 20px; 
        justify-content: center;
        margin-bottom: 20px; 
}

.megaad-image {
        width: 200px; 
        height: 220px;
        position: relative;
        text-align: center;
        line-height: 200px;
        color: white; 
        font-weight: bold;
        background-color: #ddd; 
}

.megaad-link {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}

.mega-button {
        padding: 5px 10px;
        background-color: #007bff;
        color: #ffffff;
        text-decoration: none;
        font-size: 16px;
        border-radius: 5px;
        display: inline-block;
        text-align: center;
}
/* quantity border on Basket View page*/
.rounded-pill {
    width: fit-content;
}
/* button colour in Basket View */
.btn-basket{
    background-color: #ffffff;
    transition: background-color 0.2s ease;
}
.btn-basket:hover {
    background-color:#f4f5fa;
}
.cart-row-fix {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.qty-mobile{
    margin-left: -5px;
}