/*  this is in theme.css, but I put it here for reference
.color_white_after_button_click {
    color: #fff !important;
}
*/

/* 11/10/2023:  
table-responsive-md is what gives the correct margins, so we need it.  sticky table header is for desktop only, but it doesn't work with table-responsive-md, so we encapsulate it within min-width... table-responsive-md keeps the top menu functioning on mobile, so it seems to be a fair tradeoff, since tables will be viewed on desktop 99% of the time, and we want sticky header on desktop 
*/
@media screen and (min-width: 768px) {
	th {
		position: sticky;
		top: 60px; /* needed to bump up against the top menu */
		z-index:10; /* needed or else buttons cover up the sticky header when scrolling */
	  	background-clip: padding-box; /* absolute lifesaver... without this, the gray background covers up the borders. with it, it works perfectly https://www.w3schools.com/cssref/playdemo.php?filename=playcss_background-clip */
	}
}

.balance-text { /* #balance_text this is needed for our balanceText plugin. balancetext.min.js. note: Use balance-text class. Note: balance-text class seems to need to be within a div  */
   text-wrap: balance;  /* shorthand: supported in CSS as of March 2024 */
/*	text-wrap-style: balance;*/ /* longhand */
 }
.image_picker_thumbnail {
	background-color:white;
}
label.form-label {
	font-weight: bold;
	margin-bottom: .3rem;
}
label.form-check-label { /* bold within form-check-label needs to be <b> tags so we can have non-bold too */
	margin-bottom: .6rem;
}
.short_plaintext {
	margin-top: -5px;
}
.form_group { /* form-group was removed in bs5, but why change everything to something generic like mb-3? */
  margin-bottom: 1rem;
}
a { text-decoration: none; }

.date_picker{ cursor: pointer; }

/*date-picker overrides for https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css */
.datepicker table tr td.today,.datepicker table tr td.today:hover,.datepicker table tr td.today.disabled,.datepicker table tr td.today.disabled:hover {	background-image: none; }
.datepicker table tr td.range.today,.datepicker table tr td.range.today:hover,.datepicker table tr td.range.today.disabled,.datepicker table tr td.range.today.disabled:hover {	background-image: none; }
.datepicker table tr td.selected,.datepicker table tr td.selected:hover,.datepicker table tr td.selected.disabled,.datepicker table tr td.selected.disabled:hover {	background-image: none;}
.datepicker table tr td.active,.datepicker table tr td.active:hover,.datepicker table tr td.active.disabled,.datepicker table tr td.active.disabled:hover {	background-image: none;}
.datepicker table tr td span.active,.datepicker table tr td span.active:hover,.datepicker table tr td span.active.disabled,.datepicker table tr td span.active.disabled:hover {	background-image: none;}
.datepicker { z-index: 100 !important; } /* when the datepicker overlays on top of our overlay_* images, we get a z-index conflict, where you can't select a month because it thinks you clicking on the overlay_* image behind the datepicker */


/* ################# makes footer sit on bottom */
html {
	min-height: 100%; 
	position: relative;
}
#main_content {
	/*margin-bottom: 140px;*/ /* 11/28/2022: need more footer room, now that we increased the height of the footer */
	margin-bottom: 160px;
}
#main_content_full_embed {
	/*margin-bottom: 140px;*/ /* 11/28/2022: need more footer room, now that we increased the height of the footer */
	margin-bottom: 20px;
}
@media (max-width: 991px) { /* 575/576, 767/768 991/992 1199/1200 */
	#main_content {
		margin-bottom: 220px; /* needs to be enough to cover for the increased height of scrunched footer when at narrowest width */	
	}
	#main_content_full_embed {
		margin-bottom: 20px; /* needs to be enough to cover for the increased height of scrunched footer when at narrowest width */	
	}
}	
.footer {
	width:100%;
	bottom: 0;
    position: absolute;
}
/* ################# END makes footer sit on bottom */

.dark_hr {
	border-color: #CCCCCC;
}
.coupon_preview_image {
	text-align: center; 
	padding:5px; 
	border: 2px dashed #000000;
	background-color: #FFFFFF;
}
.general_preview_image {
	text-align: center; 
	padding:5px; 
	border: 1px solid #CCCCCC;
	background-color: #FFFFFF;
}
.gift_theme_image {
	text-align: center; 
	padding:2px; 
	border: 1px solid #CCCCCC;
/*	background-color: #FFFFFF;*/
	-webkit-border-radius: 8px;	border-radius: 8px;  -moz-border-radius: 8px;		
}
.img_round {
	-webkit-border-radius: 4px;	border-radius: 4px;  -moz-border-radius: 4px;		
}
.element_centered {
	margin: 0 auto;
}
.text_ad_coupon {
	padding:5px; 
	border: 2px dashed #000000;
	background-color: #FFFFFF;
}
.text_ad_neutral {
	padding:5px; 
	border: 1px solid #CCCCCC;
	background-color: #FFFFFF;
}
.regular_price {
	color: #999999;
}
.promo_price {
	color: #47A447;
}

.overlay_margin_top_fix {
}

.overlay_link {
	color: white; 
	text-decoration: none; 
}
.overlay_link:hover {
	color: #DDDDDD; 
}
.overlay_wrapper_fill_scenic_flexible {
	position: relative; /* this is needed for it's children with position:absolute (The absolute element is positioned relative to its first positioned (NOT static) ancestor element. */
	max-height: 400px; 
	overflow:hidden;
	background-color: white; /* this way at least white backgrounds will not have the line between the image background and the gray well */
}
.overlay_wrapper_fit_graphic_flexible, .overlay_wrapper_blur_display_flexible {
	position: relative; /* this is needed for it's children with position:absolute (The absolute element is positioned relative to its first positioned (NOT static) ancestor element. */
	background-color: white; /* this way at least white backgrounds will not have the line between the image background and the gray well */
	min-height: 170px;
	z-index: 0; /* it seems like this needs to be declared (it doesn't assume it to be zero, when not declared) */  /* don't exceed datepicker z-index! */
}
.overlay_wrapper_fill_scenic_consistent {
	position: relative; /* this is needed for it's children with position:absolute (The absolute element is positioned relative to its first positioned (NOT static) ancestor element. */
	height: 200px;
	background-color: white; /* this way at least white backgrounds will not have the line between the image background and the gray well */
	overflow:hidden;
}
.overlay_wrapper_fit_graphic_consistent, .overlay_wrapper_blur_display_consistent {
	position: relative; /* this is needed for it's children with position:absolute (The absolute element is positioned relative to its first positioned (NOT static) ancestor element. */
	height: 200px;
	background-color: white; /* this way at least white backgrounds will not have the line between the image background and the gray well */
	z-index: 0; /* it seems like this needs to be declared (it doesn't assume it to be zero, when not declared) */ /* don't exceed datepicker z-index! */
}

.overlay_img_fill_scenic_flexible {
	min-width: 100%;
}
.overlay_img_fit_graphic_flexible, .overlay_img_blur_display_flexible {
	display: block;
	max-height: 340px;
}
.overlay_img_fill_scenic_consistent {
/*	max-height: 200px;
	max-width: 100%;*/
	min-width: 100%;
	min-height: 100%;
	-o-object-fit: cover;
    object-fit: cover;
}
.overlay_img_fit_graphic_consistent, .overlay_img_blur_display_consistent {
	display: block; /* display block is needed for text-align:center */
	text-align: center;
	max-height: 100%;
	max-width: 100%;
}

.underlay_blur_wrapper {
    width: 100%;
	height: 100%;
	position:absolute;
	overflow:hidden;
	z-index:-10; /* when testing, you can have z-index on either underlay_blur_img or underlay_blur_wrapper but don't need it on both */ /* don't exceed datepicker z-index! */
}
.underlay_blur_img {
    width: 100%;
	height: 100%;
/*	position:absolute;*/ /* I don't think we need this because the image is nested within underlay_blur_wrapper div  */
    filter: blur(15px);
/*	z-index:-10;*/ /* when testing, you can have z-index on either underlay_blur_img or underlay_blur_wrapper but don't need it on both */ /* don't exceed datepicker z-index! */
}
.dark_opacity_fill_scenic {
	opacity: .6; /*  */
	filter: alpha(opacity=60);
}
.dark_opacity_fit_graphic {
	opacity: .6; /* fit_graphic needs to be darker than fill_scenic since this will often be used for logos which contain text, which is busy behind the white text */
	filter: alpha(opacity=60);
}
.dark_opacity_blur_wrapper {
	opacity: .6; /*  */
	filter: alpha(opacity=60);
}
.overlay_dark {
	background-color: black;
	position: absolute;
	height: 100%;
	width: 100%;
}
.overlay_logo {
	position: absolute;
	top: 0px;
	right: 0px;
	padding: 20px;
	max-width: 40%;
	max-height: 40%;
	z-index: 10; /* don't exceed datepicker z-index! */
	background-color: rgba(0, 0, 0, 0.6);
	border-bottom-left-radius: .5rem !important;
}
.overlay_text {
	position: absolute;
	bottom: 0px;
	padding: 20px;
/*	font-size: 30px; */
	color: #ffffff;
/*	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);*/
	width: 100%;
	z-index: 20; /* don't exceed datepicker z-index! */
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .2),
				-1px -1px 1px rgba(0, 0, 0, .2),
				1px -1px 1px rgba(0, 0, 0, .2),
				-1px 1px 1px rgba(0, 0, 0, .2);

}
.overlay_strike {
	color: #CCCCCC !important; 
/* I tried different levels and .6 is the best (with white text) */
/*	opacity: .6;*/
/*	filter: alpha(opacity=60);*/
}
.small_sub_header {
	font-size:75%;
	line-height:85%
}
.small_strike_overlay {
	color: #CCCCCC;
	/* text-decoration: line-through; */
}
.margin_2 {
  margin-top: 2px;
  margin-bottom: 2px;
}
.margin_5 {
  margin-top: 5px;
  margin-bottom: 5px;
}
.margin_10 {
  margin-top: 10px;
  margin-bottom: 10px;
}
.margin_20 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.powered_by {
	color: #777777;
}
.play_button_overlay_wrapper {
/*	position: relative;*/
}
.play_button_overlay_image {
	margin-top:-50px; /* first we center the middle of the button at exactly 50%, and then we offset one half the height of the button with a negative margin */
}
.play_button_overlay_image:before {
  content: '';
  display: block;
   height: 50%;
}
/*.img_gift_card_rounded {
  border-radius: 20px;
}*/
.vertical_align_chevron {
/*	padding: 5px 0;*/
}

/*.ck-editor__editable_inline {
    min-height: 300px !important;
}*/

.card_bottom {
  margin-bottom: 20px;
}
.card_bottom_full_embed {
  margin-bottom: 0px;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #999999 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #999999 !important;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #999999 !important;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #999999 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #999999 !important;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #999999 !important;
}



/*gallery*/
.btn:focus, .btn:active, button:focus, button:active {
  outline: none !important;*/
  box-shadow: none !important;*/
}

#image-gallery .modal-footer{
  display: block;
}

.thumb{
/*  margin-top: 15px;*/
  margin-bottom: 15px;
}






/* 11/10/2023: I don't think table-responsive-stack used anymore (after code search) */
.table-responsive-stack tr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.table-responsive-stack td,
.table-responsive-stack th {
   display:block;
/*      
   flex-grow | flex-shrink | flex-basis   */
   -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
.table-responsive-stack .table-responsive-stack-thead {
   font-weight: bold;
}
@media screen and (max-width: 768px) {
   .table-responsive-stack tr {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      border-bottom: 3px solid #ccc;
      display:block;
      
   }
}



.carousel_full_screen {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.carousel_logo {
	position: absolute;
	top: 0px;
	right: 0px;
	padding: 20px;
	max-width: 30%;
	max-height: 25%;
	z-index: 10; /* don't exceed datepicker z-index! */
	background-color: rgba(0, 0, 0, 0.6);
	border-bottom-left-radius: .5rem !important;
}
.carousel_text {
	position: absolute;
	top: 0px;
	padding-left: 10%;
	padding-top: 10%;
/*	font-size: 30px; */
	color: #ffffff;
	text-shadow: 5px 5px 8px rgba(0, 0, 0, 1),
				-5px -5px 8px rgba(0, 0, 0, 1),
				5px -5px 8px rgba(0, 0, 0, 1),
				-5px 5px 8px rgba(0, 0, 0, 1);
	width: 100%;
	z-index: 30; /* don't exceed datepicker z-index! */
}
@media screen and (max-width: 1200px) {
   .carousel_text {
		padding-top: 15%;
   }
}
.carousel_qr_code {
	position: absolute;
	bottom: 5%;
	right: 5%;
	padding: 20px;
	max-width: 40%;
	max-height: 40%;
	z-index: 20; /* don't exceed datepicker z-index! */
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: .5rem !important;
}
.carousel_dark {
	opacity: .6;
	filter: alpha(opacity=60);
	background-color: black;
	position: absolute;
	height: 100%;
	width: 100%;
}

[data-bs-theme=dark] .carousel .carousel-control-prev-icon,
[data-bs-theme=dark] .carousel .carousel-control-next-icon, [data-bs-theme=dark].carousel .carousel-control-prev-icon,
[data-bs-theme=dark].carousel .carousel-control-next-icon {
  filter: invert(1) grayscale(100);
}

.password_mask {
    -webkit-text-security: disc;
    -moz-webkit-text-security: disc;
    -moz-text-security: disc;
}

.footer_link:not(:last-child) {
  margin-right: 1rem;
}
.hpt_website {
	position:fixed; 
	left:-100%;
	z-index: -1;
}
.extra_fill_in_fields {
	position:fixed; 
	left:-100%;
}