/* Colour overrides */
:root {
	--bs-body-color: #fafafa;
	--bs-body-bg: #181818;
	--bs-bg-dark: #181818;
	--bs-dark-rgb: #202020;
	
	--bs-primary: #181818;
    --bs-secondary: #313131;
	--bs-muted-txt: #262626;
	
	
	--bs-navbar-dark: #202020; /*#323232;*/
	--bs-navbar-dark-btn: #181818; /*#242424;*/
	--bs-navbar-default-btn: #313131; /*#494949;*/
	--bs-main-container-bg: #181818; /*#242424;*/
	--bs-card-header: #202020; /*#323232;*/
	--bs-dark-text-input-bg: #eee; /* #121212; */
	--bs-dark-text-input-color: #000; /* hsla(0, 100%, 100%, 0.88); */
	
	--editor-container: #202020;
	--editor-background: #eee;
	--editor-color: #000;

	--section-header-background: #202020; /*#333;*/
	--card-background: #333;

	--bs-table-bg: #181818;
	--dark-table-border: #555;
	
	--btn-primary-color: #fff !important;
	--btn-primary-background: #17a2dc !important;
	--btn-primary-background-hover: #17a2dcde !important;
	--btn-primary-border-color: #17a2dcde !important;	

	--bs-btn-color: #fff;
	--bs-btn-color-hover: #fff;
	--bs-btn-bg: #313131;
	--bs-btn-bg-hover: #313131;

	--pagination-border: #999 !important;
	--pagination-background: #000 !important;
	--pagination-page-numbers-background: #666;

	--alert-color: #fff;
	--alert-error-bg: #181818;
	
	--alert-info-bg: #333232;
}

.text-muted{
	color: var(--bs-muted-txt)!important;
}

.bg-dark{
	background-color: var(--bs--bg-dark);
}

html, body{
	height: 100%;
}
body > footer{
	position: sticky;
	top: 100vh;
}


body {
	height: 100vh;
	display:flex;
	flex-direction:column;
	background-color: var(--bs-body-bg);
}

.content_wrapper{
	width: 100%;
}

footer > span {
	flex-grow: 1;
	text-align: center;
}
.site_logo{
	max-width: 128px;
	max-width: 202px;
	margin: 0 auto;
	margin: 0 auto 20px;
	display: block;
	/*border: 1px solid #333;
	border: 1px solid #0cca65de;*/
}

.alert-danger{
	color:  var(--alert-color)!important;
	background-color: var(--alert-error-bg) !important;
	border-color: var(--alert-error-bg)!important;
}
.alert-info{
	color: var(--alert-color)!important;
    background-color: var(--alert-info-bg)!important;
	border-color: var(--alert-info-bg)!important;
}

.navbar-dark, 
.footer-dark {
    background-color: var(--bs-navbar-dark);
}
	.navbar-nav > a {
		padding: .5em;
		font-weight: 500;
		text-decoration: none;
		color: #fab827f1;
	}
		.navbar-nav > a:hover{
			color: #fab827;
		}
		.btn:hover {
			color: #fab827;
		}
		.navbar-layer-container{
			width: 100%;
		}
		.navbar-nav > .btn-group {
			flex-grow: 1;
		}
		.navbar-nav > .btn-group > .btn {
			flex-grow: 0;
		}
@media(prefers-reduced-motion){
	.nabar-nav > a:hover {
		animation-name: none;
	}
}
@keyframes glow {
	from {
	  text-shadow: 0 0 0 var(--bs-gray-200), 0 0 1px var(--bs-gray-200);
	}
	to {
	  text-shadow: 0 0 1px var(--bs-gray-200), 0 0 2px var(--bs-gray-200);
	}
 }	

.inline-img {
	display: inline-block;
	max-width:100%;
	max-height:100%;
}
.card{
	background-color: var(--bs-body-bg);
	border: 1px solid var(--bs-navbar-dark);
}
.card-title{
	background-color: var(--bs-navbar-dark);
}

.dashboardSection .card-body{
	min-height: 350px;
}
.dashboardSection_staff .card-body{
	min-height: 235px;
}
.dashboardSection_staff .btn,
.dashboardSection .btn,
.purchase_history_container .btn,
.card_locations .btn,
.card_users .btn{
	white-space: nowrap;
}


.btn-primary{
	color: var(--btn-primary-color)!important;
    background-color: var(--btn-primary-background)!important;
    border-color: var(--btn-primary-border-color)!important
}
	.btn-primary:hover, .btn-primary:focus {
		color: var(--btn-primary-color)!important;
		background-color: var(--btn-primary-background-hover)!important;
		border-color: var(--btn-primary-border-color)!important;
	}
	
.btn-secondary{
	background-color: var(--card-background) !important;
	border: 1px solid var(--card-background) !important;
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
	pointer-events: none;
	opacity: .15;
}
.no-padding-btn{
	padding: 0 !important;
	border: 0 !important;
	line-height: 1;
}
.navbar-nav .btn-primary{
	max-height: 40px;
}
input[type=text],
input[type=password],
input[type=email],
input[type=date],
.location_file_input,
.form-select-sm,
#let_location {
	background-color: var(--bs-dark-text-input-bg) !important;
	border: 1px solid var(--bs-dark-text-input-bg) !important;
	color:  var(--bs-dark-text-input-color) !important;
	filter: none;
}
.input-group-text {
    color: var(--btn-primary-color)!important;
	color: #fff!important;
    background-color: var(--btn-primary-background)!important;
	background-color: #000!important;
    border: 1px solid var(--btn-primary-background)!important;
	border: 1px solid #000!important;
}
input:autofill {
	background-color: var(--bs-dark-text-input-bg) !important;
	filter: none;
	background-image: url(/img/solid_bg_eee.gif); /* dark bg color is solid_bg.gif */
}
.settings_textarea_holder{
	max-height: 175px;
	overflow: auto;
	white-space: pre-wrap;
}
.letter_confirm_disclaimer{
	background: #111;
	padding: 0.5rem;
}
.disclaimer_title{
	padding-bottom: 0.5rem;
}
.disclaimer_content{
	max-height: 175px;
	overflow: auto;
	white-space: pre-wrap;
	background: #111;
	margin-bottom: 0;
}
.table{
	margin-bottom: 0;
}
.table-dark,
.table-dark thead,
.table-dark tbody,
.table-dark th,
.table-dark tr,
.table-dark td{
	background: var(--card-background);
	border-color: var(--dark-table-border);
}
.table-dark th{
	background: #282828;
	border-color: var(--dark-table-border);
}

.table > :not(:first-child) {
	border-top: 2px solid var(--dark-table-border);
  }
.mobileTableMinWidth{
	min-width: 730px;
}
.login_form_container {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: calc(100vh - 137px);
}
	.login_form_container > form {
		margin: auto;
		min-width: 30%;
		
	}
@media (min-width: 992px) { 
	.login_form_container > form {
		max-width: 30%;			
	}
}
		.login_form_container > form > .card-title{
			border-bottom: 1px solid rgba(0,0,0,.125);
			width: 100%;
			padding: .5em 1em;
			font-weight: 700;
		}
		.login_form_container > form > .card-body {
			padding: 2em;
		}

@media (max-width: 767.98px) {		
	.login_form {
		width:100%;
		height:100%;
	}		
}
		
.form-group > label {
	font-weight: 500;
}

.form_links {
	margin-top: .5em;
}
	.form_links > a {
		margin-left: 0.5em;
		text-decoration: none;
		color: var(--bs-body-color);
	}

.close {
    float: right;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

	button.close {
		padding: 0;
		background-color: transparent;
		border: 0;
		appearance: none;
	}

.alert {
	margin: 0 auto 1rem auto;
	width:100%;
	border-radius: 0;
	text-align: center;
}
.section-header{
	background-color: var(--section-header-background);
	padding: .5em 1em;
}
.location_switcher {
	max-width: 200px;
	padding: 1em;
}
	.location_switcher > li{	
		text-overflow: ellipsis;
		max-width: 100%;
		overflow: hidden;
		white-space: nowrap;
		display: block;
	}

	.dropdown-menu{
		background-color: var(--bs-btn-bg)!important;
		color: var(--bs-btn-color)!important;
	  }
	  .dropdown-toggle {
		/*color: var(--bs-gray-400)!important;*/
	  }
		.dropdown-toggle:hover {
		  /*color: #fff!important;*/
		}
	  .dropdown-menu a {
		  color: var(--bs-gray-400);
	  }
		.dropdown-menu a:hover {
		  color: #fff;
		}
	  

.table-settings td {
	vertical-align:middle;
}
.loc_settings_table tr td:first-child{
	max-width: 200px;
	width: 200px;
}
.loc_settings_table tr td:nth-child(3){
	min-width: 100px;
	max-width: 100px;
	width: 100px;
}
.table-location-list tr td:nth-child(3){
	max-width: 150px;
	width: 150px;
}
.table-location-list tr td:nth-child(2){
	max-width: 400px;
	min-width: 400px;
	width: 400px;
}

.is-wrapper{
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
	background-color: var(--bs-table-bg);
}
.is-outer-wrapper{
	background-color: var(--bs-table-bg);
}

.login_form_container .card,
.is-wrapper .card{
	background-color: var(--card-background);
}
.location_file_input{
	max-width: 300px;
	margin-top: 8px;
}
.preview_location_site_logo,
.preview_location_site_favicon{
	background-size: cover;
	background-position: center center;
}
.preview_location_site_logo{
	width: 200px;
	height: 200px;
}
.preview_location_site_favicon{
	width: 50px;
	height: 50px;	
}
.location_image div{
	cursor: pointer;	
}
.card_add_letter table tr:last-child td{
	border: 0;
}
.letterAdminTextView{
	max-height: 250px;
	overflow: auto;
}
.draft_save_placeholder{
	animation: fade-out 1.5s;
	opacity: 0;
}
.draftShow{
	animation: fade-in 1.5s;
	opacity: 1;
}
@keyframes fade-in {
	from {
	  opacity: 0;
	}
	to {
	  opacity: 1;
	}
  }
  
  @keyframes fade-out {
	from {
	  opacity: 1;
	}
	to {
	  opacity: 0;
	}
  }
  

@media screen and (max-width: 756px){
	.is-wrapper{
		padding-right: 0.75rem;
		padding-left: 0.75rem;
	}
	.card_add_letter .row > * {
		padding-right: 0.5rem;
		padding-left: 0.5rem;
	}	

	.preview_location_site_logo, .preview_location_site_favicon {
		max-width: 150px;
		margin-top: 8px;
	  }
}

/* filters */
.filterArea > div, .filterArea > form, .adminFilter > div, .pager > div, .pageListHolder > div, .pageNumberHolders > div, .finalPage > div { display: inline-block; }
.pager > div.hidden, .adminFilter > div.hidden { display: none!important; }
.pager, .adminFilter { margin-right: 8px; }
.objHolder { margin-right: 8px; padding-right: 8px; }
.objHolder .label { font-family: "Roboto", sans-serif; font-weight: bold; padding-right: 8px; }
.objHolder > div { display: inline-block; }
/* end filters */


/* pagination */
.pager {
	color: var(--bs-btn-color);
	font-size: 11px;
	font-weight: normal;
	min-width: 300px;
	text-align: right;
	align-items: center !important;
	display: flex !important;
}
.pager.hidden{
	display: none;
}
.pager > div{
	display: inline-block;
}
.goToPageNumber {
	background-color: var(--pagination-background);
	-moz-appearance: none;
	-webkit-appearance: none;
	resize: none;
	border: 1px solid var(--pagination-border);
}
.goToPageHolder {
	width: 50px;
	border-left: 1px solid var(--pagination-border);
	padding: 0 8px;
}
.pageListHolder {
	margin-right: 8px;
}
.pageNumberHolders {
	margin: 0 4px;
}
.pageNumbers {
	cursor: pointer;
	text-align: center;
	padding: 4px;
	border: 1px solid var(--pagination-border);
	background: var(--pagination-page-numbers-background);
	color: var(--bs-btn-color);
	margin: 0 2px;
}
.goToPage, .goToPage:hover {
	color: #fff;
	background: var(--btn-primary-background) !important;
	border: none;
	/* font-size: 11px;
	line-height: 11px!important; */
}
.pageNumbers.active {
	background: var(--bs-body-bg);
	color: var(--bs-btn-color);
}
.firstPage, .nextPage {
	cursor: pointer;
}
.section-header .titleWithPagination{
	display:block;
	min-width: 200px;
}
@media screen and (max-width: 500px){
	.mobile_pagination_holder {
		flex-direction: column !important;
		margin-left: auto;
		margin-right: auto;
		min-width: 280px;
		padding-top: 8px;
	}
	.mobile_pagination_holder > * {
		margin-bottom: 8px;
	}
}  
/* end pagination */


/* modals*/
.modal-content{
	background: var(--bs-navbar-dark);
}
.modal-header{
	color: var(--bs-body-color) !important;
	border-bottom: 1px solid var(--bs-navbar-dark);
}
.modal-body{
	color: var(--bs-body-color) !important;
	background: var(--bs-body-bg);
}
.modal-footer {
	border-top: 1px solid var(--bs-navbar-dark);
}
.btn-close {
	color: var(--bs-body-color) !important;
}

/*start: bootstrap-select tweaks */
.navbar-nav .dropdown-menu a:hover {
	color: #000;
}
.navbar-nav .dropdown-item.active, 
.navbar-nav .dropdown-item:active,
.navbar-nav .dropdown-item.active:hover {
	background-color: #000;
	color: #fff;
}
.bootstrap-select .dropdown-menu.inner {
	overflow-x: hidden;
}
@media screen and (max-width: 991px){
	.navbar-nav .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn),
	.navbar .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){
		width: 100%;
	}
	.navbar .dropdown.bootstrap-select{
		margin-top: 8px;
	}
}
/*end: bootstrap-select tweaks */

/* start: keyword selection */
.list-group-item { 
	background: var(--card-background); 
	color: #fff;
}
.list-group-item:nth-child(odd) { 
	background: #282828; 
}
.Keyword_location_view_all_container {
	max-height: 400px;
}
.letters_view_all_container .bg-danger{
	width: 38px;
	text-align: center;
	line-height: 26px;
	background-color: #000 !important;
}
/* end : keyword selection */


/*start: customer selection modal*/
.selectedName td{
	background: #ccc !important;
	color: #222 !important;
}
.customerSelectionPlaceholder {
	max-height: 400px;
}
/*end: customer selection modal*/

/* to hide the clear date button on datepicker control */
.picker__button--clear{
	display:none !important;
}
.overflowTable{
	max-height: 400px;
	overflow: auto;
}

/* customer sign up section */
.customerAddressPlaceholder{
	max-height: 400px;
	overflow: auto;
}
.customerAddressPlaceholder .row:nth-child(even){
	background-color: #181818;
}
.customerAddressPlaceholder .row:nth-child(odd){
	background-color: #202020;
}
.customerAddressPlaceholder .row:hover{
	background-color: var(--btn-primary-background) !important;
	color: #000;
	cursor: pointer;
}
.customerSignUpPostCheck{
	background-color: var(--btn-primary-background) !important;
	border-color: var(--btn-primary-background) !important;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	cursor: pointer;
}
._country_group{
	display: none;
}
.input-group > .input-group-text:first-child {
	width: 44px;
	text-align: center;
	display: block;
}

.customer_signup {
	color: #0099d8;
	text-transform:lowercase;
	font-weight: bold;
	text-align: center;
	font-size: 2.4rem;
	line-height: 2.5rem;
	letter-spacing: 0.1rem;	
	text-shadow:	-1px 0 #69a2bc, 
					0 1px #69a2bc,
					1px 0 #69a2bc,
					0 -1px #69a2bc;

	text-shadow:	-1px 0 #adbac0, 
					0 1px #adbac0,
					1px 0 #adbac0,
					0 -1px #adbac0;				
					

}
.customer_signup > span {
	color:#fff200;
	text-shadow:	-1px 0 #bbb77b,
					0 1px #bbb77b,
					1px 0 #bbb77b,
					0 -1px #bbb77b;
	text-shadow:	-1px 0 #c0bea0,
					0 1px #c0bea0,
					1px 0 #c0bea0,
					0 -1px #c0bea0;
}

/* Lightbox fix for QR Codes */
.modal.lightbox > .modal-xl {
	width:512px;
	height:512px;
  }
  .modal.lightbox > .modal-xl .btn-close svg {  
	fill: rgb(0, 0, 0);
  }
  .modal.lightbox > .modal-xl .ratio-16x9 {
	--bs-aspect-ratio: 100%;
  }

.accordion-item{
	background-color: transparent;	
	border: 0;
}
.accordion-body{
	padding: 1rem;
}
.accordion-button {
	color: var(--bs-body-color);	
	background-color: var(--bs-navbar-dark);
}
.accordion-button:focus,
.accordion-button:not(.collapsed) {
	color: var(--bs-body-color);
	background-color: var(--bs-navbar-dark);
	border-color: #86b6fe00;
	box-shadow: none;
}
.accordion-button::after,
.accordion-button:not(.collapsed)::after{
    mix-blend-mode: exclusion;
}
.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(#postcode) {
    border-top-right-radius: 0.25rem; 
    border-bottom-right-radius: 0.25rem; 
}
.form-check .form-check-input {
	clear:left;
}
#collapseThree .form-group,
#collapseFour .form-group,
#collapseFive .form-group {
	padding: 0.3rem;
}
.customer_signup{
	background-color: #181818;
	padding: 1rem;
	white-space: nowrap;
	font-size: 2vw;
}
#toast-container {
	z-index: 100;
}
@media (max-width: 991px) { 
	.customer_signup{
		font-size: 4vw;
	}
}
@media (max-width: 767px) { 
	.dashClearFilterBtn{
		margin-bottom: 18px;
	} 
	.customer_signup{
		font-size: 6vw;
	}
}

#groupDisplayl{
	max-height: 475px;
	overflow-y: scroll;
}