/* 
  --------------------------------------------
  Inbound Systems & AE Tours
  Custom Styles
  --------------------------------------------
*/

/* SEE "DEVELOPMENT" FOLDER FOR RESOURCES */

/* FIXES */

/* Zoho chat - to clear bottom scroll bars on scroll. */
.siq_bR {bottom: 65px !important;}


/* TYPOGRAPHY*/

p {
	line-height: 1.5;
	margin: 15px 0 20px 0;
}

/* Other margins */
.margin-top-5 {margin-top: 5px !important;}
.margin-top-10 {margin-top: 10px !important;}
.margin-top-15 {margin-top: 15px !important;}
.margin-top-20 {margin-top: 20px !important;}
.margin-top-25 {margin-top: 25px !important;}
.margin-top-30 {margin-top: 30px !important;}
.margin-top-40 {margin-top: 40px !important;}
.margin-top-50 {margin-top: 50px !important;}
.margin-top-60 {margin-top: 60px !important;}
.margin-bottom-5 {margin-bottom: 5px!important;}
.margin-bottom-10 {margin-bottom: 10px!important;}
.margin-bottom-15 {margin-bottom: 15px !important;}
.margin-bottom-20 {margin-bottom: 20px !important;}
.margin-bottom-25 {margin-bottom: 25px !important;}
.margin-bottom-30 {margin-bottom: 30px !important;}
.margin-bottom-40 {margin-bottom: 40px !important;}
.margin-bottom-50 {margin-bottom: 50px !important;}
.margin-bottom-60 {margin-bottom: 60px !important;}
.no-margin {margin: 0 !important;}
.no-margin-top {margin-top: 0 !important;}
.no-margin-bottom {margin-bottom: 0 !important;}
.no-margin-right {margin-right: 0 !important;}

/* Padding */
.no-padding {padding: 0 !important;}
.no-padding-top {padding-top: 0 !important;}
.no-padding-right {padding-right: 0 !important;}
.no-padding-bottom {padding-bottom: 0 !important;}
.no-padding-left {padding-left: 0 !important;}
.padding-top-4 {padding-top: 4px !important;}
.padding-top-6 {padding-top: 6px !important;}
.padding-top-10 {padding-top: 10px !important;}
.padding-top-20 {padding-top: 20px !important;}
.padding-top-30 {padding-top: 30px !important;}
.padding-top-30 {padding-top: 30px !important;}
.padding-bottom-4 {padding-bottom: 4px !important;}
.padding-bottom-6 {padding-bottom: 6px !important;}
.padding-bottom-10 {padding-bottom: 10px !important;}
.padding-bottom-12 {padding-bottom: 12px !important;}
.padding-bottom-20 {padding-bottom: 20px !important;}
.padding-bottom-30 {padding-bottom: 30px !important;}
.padding-bottom-40 {padding-bottom: 40px !important;}
.padding-bottom-50 {padding-bottom: 50px !important;}

/* Font weight */
.strong, tr.strong td, tr.strong th {font-weight: bold !important;}

/* Ordered lists */
ol li {margin-top: 10px}


/* CENTERING */

/* Paragraphs and table cell content */
.centered, tr.centered td, tr.centered th {
	text-align: center !important;
}
.centered-80 {
	text-align: center !important;
	margin-left: 10%;
	margin-right: 10%;
}
div.centered, table.centered, td.centered div {margin: 0 auto; text-align: center;}
.align-left {text-align: left !important;}
.align-right {text-align: right !important;}

/* Vertical centering
.container {
	height: 200px;
	position: relative;
	border: 3px solid green;
}
<div class="container">
  <div class="vertical-center">
    <p>I am vertically centered.</p>
  </div>
</div>
*/
.vertical-center {
	margin: 0;
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

/* Display divs, spans in line, apply to each div. Also allows margins to be applied to span elements. */
.inline {display: inline-block;}
.margin-right-5 {margin-right: 5px;}
.margin-right-10 {margin-right: 10px;}

/* Align */
.valign-middle, tr.valign-middle td {
	vertical-align: middle !important;
}
.valign-top, tr.valign-top td {
	vertical-align: top !important;
}

/* Article paragraph effects */
.indent30 {margin-left: 30px !important;}
.indent60 {margin-left: 60px !important;}
.article-quote {
	font-family: Georgia, "Times New Roman", Times, serif !important;
	font-style: italic;
}
.indent-border {
	border-left: 4px solid #FFA404;
	padding-left: 20px;
}

/* FONTS */

/* These not yet in use
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;700&display=swap" rel="stylesheet"> 
font-family: 'Roboto Slab', serif;
*/
p.standard {
	font-family: 'Open Sans', sans-serif;
	font-size: 1rem /* this has 14px */
}

/* h1 {font-family: 'RageItalic';} */
@font-face {
	font-family: 'RageItalic';
	src: url(../../Fonts/RageItalic/RageItalic.woff);
}

/* Used in MRV header */
h1.rageitalic, h2.rageitalic {
	font-family: 'RageItalic';
	font-size: 160%;
}
h2.rageitalic {font-size: 240% !important;}
span.rageitalic.header {font-size: 240% !important;}


/* 
Material Design
Icons: https://material.io/resources/icons/?style=baseline 
(In MasterPages)
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons" media="all">
<i class="m-icon md-24">face</i>
<span class="m-icon">double_arrow</span>

(Back-link) See below.
<div class="back-wrapper">
  <div class="m-icon inline valign-middle">
    arrow_back_ios
  </div>
  <div class="inline valign-middle">
  <a href="{back_link_Src}" class="text-link-dark" id="contentback_link">Back to start</a>
  </div>
</div>

Error message example.
<span class="m-icon md-32 red-text-alert valign-middle">error_outline</span>&nbsp;<span class="red-text-alert small-font valign-middle">Destination airport is required.</span>

<p class="logistics-message"><span class="m-icon md-32">info</span>&nbsp;<span class="m-icon-message">View details</span></p>
*/
.m-icon {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;	/* Preferred icon size */
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
	vertical-align: middle;

	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;

	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;

	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;

	/* Support for IE. */
	font-feature-settings: 'liga';
}
/* Rules for sizing the icon. */
.m-icon.md-14 { font-size: 14px !important; }
.m-icon.md-16 { font-size: 16px !important; }
.m-icon.md-18 { font-size: 18px !important; }
.m-icon.md-24 { font-size: 24px !important; }
.m-icon.md-32 { font-size: 32px !important; }
.m-icon.md-36 { font-size: 36px !important; }
.m-icon.md-48 { font-size: 48px !important; }

/* Rules for using icons as black on a light background. */
.m-icon.md-dark { color: rgba(0, 0, 0, 0.54); }
.m-icon.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.m-icon.md-light { color: rgba(255, 255, 255, 1); }
.m-icon.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

/* Rounded border */
.m-icon.m-round {
	border: 2px solid #000;
	padding: 6px;
	border-radius: 50%;
	text-align: center;
}

/* Base colour and other styles that can be overridden. */
.m-icon-wrapper {
	color: #000;
}
.m-icon-wrapper.middle span, .m-icon-wrapper.middle div, 
.m-icon-message, .m-icon-text {
	vertical-align: middle;
}

/* Left align message > fix wrap indent. 
<p class="m-icon-para"><span class="m-icon md-32">info</span>&nbsp;<span class="m-icon-message">This booking confirmation is intended as a summary only. Please refer to your travel plan for full details of inclusions.</span></p>
*/
.m-icon-para {
	padding-left: 1.5em;
	text-indent: -1.3em;
	margin-left: 0.9em;
	line-height: 1;
}

/* Material icon link 
<p><a href="#summary-container" class="scrollLink"><span class="m-icon md18 aqua-text valign-middle">arrow_circle_up</span>&nbsp;<span class="aqua-text small-font valign-middle">View details</span></a></p>
NB: Might need border removed by setting this rule on container element.
*/
.m-icon-link, .m-icon-link:hover {
    border-bottom: 0 !important;
}


/* TEXT */

.strong {font-weight: 700;}
.black-text {color: #000 !important;}

.red-text {color: #D21A00 !important;}
.ltred-text {color: #FF614B !important;}
.red-text-alert, .red-text-error {color: #FF2304 !important;}

.gray-text {color: #444 !important;}
.midgray-text {color: #555 !important;}
.ltgray-text {color: #E1E1E1 !important;}
.dkgray-text {color: #333 !important;}
.dark-text {color: #222 !important;}

.orange-text {color: #FF6C04 !important;}
.dkorange-text {color: #D25D00 !important;}

.blue-text {color: #045EEC !important;}
.ltblue-text {color: #6BA4FD !important;}
.dkblue-text {color: #0349B8 !important;}

.aqua-text {color: #0191C8 !important;}
.ltaqua-text {color: #4CCDFE !important;}
.dkaqua-text {color: #0182B3 !important;}

.green-text {color: #03B13D !important;}
.white-text {color: #FFF !important;}
.pink-text {color: #CF035A !important;}

.gold-text {color: #B49900 !important;}
.ochre-text {color: #F09900 !important;}
.yellow-text {color: #FFDA04 !important;}

.lime-text {color: #65C903 !important;}
.ltlime-text {color: #86FB13 !important;}
.dklime-text {color: #59B103 !important;}


/* NEW METHOD */

/* Text colors */
.alert-text {color: #FF2304 !important;}  /* Bright	red */
.warn-text {color: #D28600 !important;}  /* Dark ochre */
.theme-midgray {color: #555; color: rgba(85, 85, 85, 1) !important;}
.theme-lightgray {color: #E1E1E1; color: rgba(225, 225, 225, 1) !important;}

/* Australian Escapes */
.theme-color1 {color: #0191C8 !important;}  /* Aqua */
.theme-color2 {color: #FF6C04 !important;}  /* Orange */
.theme-color3 {color: #59B103 !important;}  /* Lime (darker) */
.theme-color4 {color: #D21A00 !important;}  /* Red */
.theme-color5 {color: #03BD41 !important;}  /* Green */

/* Background colors */
.bg-theme-color3 {background-color: #65C903 !important;}

/* Border colors */
.border-theme-midgray {border-color: #555 !important;}
.border-theme-color3 {border-color: #65C903 !important;}  /* Lime */
.border-theme-color4 {border-color: #D21A00 !important;}  /* Red */
.border-theme-color5 {border-color: #03BD41 !important;}  /* Green */


/* For transparent backgrounds */
.dark-text-trans {color: rgba(15,15,15,1);}

/* Size */
.small-font {font-size: 93% !important;}
.std-font {font-size: 100% !important;}
.lge-font {font-size: 120% !important;}
.xlge-font {font-size: 140% !important;}
.xxlge-font {font-size: 160% !important;}

/* h2, h3 */
h2.section-header {font-size: 40px !important;}

/* Expanded */
.expanded1 {letter-spacing: 1px;}
.expanded2 {letter-spacing: 2px;}

/* Text highlight */
mark.dark {
	background-color: #FFF;
	color: #000;
}
mark.yellow {
	background-color: #FFF2A5;
	color: #000;
}
span.yellow-bg {
	background-color: #FFDA04;
	color: #000;
}

/* Tooltips */
.p7TTM_trg_dashed {
	text-decoration: none !important;
	border-bottom: 1px dashed;
}


/* LAYOUT & GENERAL */

/* Float clearing */
br.clear, div.clear {
	clear: both;
	height: 0;
	line-height: 0.0;
	font-size: 0;
	display: block;
}
.hidden {display: none !important;}

/* iFrames */
.iframe {
	width: 100%;
	padding: 0;
	border: 0;
	overflow: auto;
}

/* Responsive iframes 
<div class="resp-container">
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
*/
.resp-container, .iframe-container {
	overflow: hidden;
	padding-top: 100%;  /* Auto resizes to fit content */
	position: relative;
}

/* See media query */
.resp-container iframe, .iframe-container iframe {
	border: 0;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

/* Minimal height */
.iframe-container-min {
	padding: 20px;
	height: auto;
}
.iframe-container-min iframe {
	height: auto;
	min-height: 450px;
	width: 100%;
	padding: 0;
	border: 0;
	overflow: hidden;
}

/* PBX, MBX */
.pbx-iframe, .mbx-iframe {margin-top: 10px;}

/* Tab panels */
.p7tp3-col-wrapper li {
	margin: 4px 0;
}

/* Scrollable eg. for calendar in accom package details. 

<script src="../js/jquery-3.5.1.min.js" type="text/javascript"></script></script>
<script src="../js/jquery-migrate-1.4.1.min.js"></script></script>
 Requires jQuery > removes scroll from tab panels where not needed 
<link rel="stylesheet" type="text/css" href="../js/floating-scroll/jquery.floatingscroll.css">
<script src="../js/floating-scroll/jquery.floatingscroll.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
// Apply to this div.
$(".scroll-wrapper").floatingScroll();
// Cleat scroll.
$("#p7TP3tab1_2").click(function () {
    $(".scroll-wrapper").floatingScroll("destroy");
});
$("#p7TP3tab1_3").click(function () {
    $(".scroll-wrapper").floatingScroll("destroy");
});
});

*/
.scroll-wrapper {
	overflow-x: scroll;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}
#floating-scrollbar {
	background-color: #FF2D0F !important;
}

/* Search form */
#search_box {width: 350px;}

/* Horizontal line 
https://css-tricks.com/examples/hrs/
*/
.hr-red, .hr-dark, .hr-light, .hr-aqua, .hr-orange {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(206, 58, 31, 0), rgba(206, 58, 31, 0.75), rgba(206, 58, 31, 0));
}
.hr2 {height: 2px !important;}
.hr-dark {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)) !important;
}
.hr-light {
    background-image: linear-gradient(to right, rgba(195, 195, 195, 0), rgba(225, 225, 225, 0.75), rgba(0, 0, 0, 0)) !important;
}
.hr-aqua {
    background-image: linear-gradient(to right, rgba(1, 145, 200, 0), rgba(1, 145, 200, 0.75), rgba(1, 145, 200, 0)) !important;
}
.hr-orange {
    background-image: linear-gradient(to right, rgba(255, 115, 4, 0), rgba(255, 115, 4, 0.75), rgba(255, 115, 4, 0)) !important;
}


/* FIXED PAGE FOOTER */
/* 
<div id="fixed_page_footer" class="footer-white-bg">
  <table id="fixed_footer_links" width="100%">
    <tr>
      <td class="footer40 centred">[Return to Member Area]</td> 
      <td class="footer60 valign-top align-right" style="PADDING-RIGHT: 20px">PayPal Payment</td> 
    </tr>
  </table>
</div>
*/

#fixed_page_footer {
	position: fixed;
	z-index: 9;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: #444;
	color: white;
	text-align: center;
	display: none;
}
#fixed_page_footer.footer-white-bg {
    background-color: #FFF !important;
	-webkit-box-shadow: 3px -4px 12px -1px rgba(68,68,68,1);
	-moz-box-shadow: 3px -4px 12px -1px rgba(68,68,68,1);
	box-shadow: 3px -4px 12px -1px rgba(68,68,68,1);
}

#fixed_footer_links td {padding: 12px;}
.footer30 {width: 30%}
.footer40 {width: 40%}

/* Any screen less than 1024px goes single column. */
@media only screen and (min-width: 0px) and (max-width: 1024px) {
	#fixed_page_footer {display: block !important;}
}


/* TEXT GENERAL */

/* Inline form instructions */
.instructions, .instr {
	margin: 4px 0 0 0;
	color: #555;
	font-size: 90%;
	line-height: 1.3 !important;
}
.instr:before {
	font-family: "Material Icons";
	content: 'info_outline';
	font-size: 18px;
	color: #555;
	margin-right: 4px;
 	vertical-align: middle;
	padding-bottom: 2px;
}
.instr.aqua-text:before {color: #0191C8 !important;}
.instr.orange-text:before {color: #FF6C04 !important;}
.instr.red-text:before {color: #D21A00 !important;}
.instr.small-font {font-size: 90% !important;}


/* IMAGES */

img.border {
	border: 1px solid #CCC;
	padding: 6px;
}
img.border2 {
	border: 1px solid #333;
	padding: 6px;
	background-color: #FFF;
}
p img, h1 img, h2 img, h3 img, h4 img {
    width: auto;
    height: auto;
    max-width: 100%;
	border-radius: 5px;
}
img.rounded {border-radius: 5px;}

/*Make images scalable - also in p7qc.css*/
img.scalable {
	height: auto !important;
	width: auto !important;
	max-width: 100% !important;
}

/* Photo-style borders based on Itineraries.css
<div class="photo-image">
<img >
</div>
*/
.photo-image {
	background-color: #FFF;
	border: 1px solid #CCC;
	border-radius: 12px;
	padding: 8px;
	/*width: 350px; */
	display: inline-block;
	line-height: 0 !important;
}
.photo-image.no-border {
	border-color: #FFF !important;
}
.photo-image.med-padding {
	padding: 8px !important;
}
.photo-image img {
	width: 100%;
	border-radius: 8px;
}

/* Shadow */
.image-shadow {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Image widths, make scalable */
img.max150, img.max200, img.max250, img.max350,
img.max450, img.max600, img.max750, img.max900 {
	border-radius: 6px;
	height: auto;
	max-width: 100% !important;
}
img.max150 {width: 150px;}
img.max200 {width: 200px}
img.max250 {width: 250px}
img.max350 {width: 350px}
img.max450 {width: 450px}
img.max600 {width: 600px}
img.max750 {width: 750px}
img.max900 {width: 900px}

/* Div > Image widths, make scalable */
div.max150 img, div.max200 img, div.max250 img, div.max350 img,
div.max450 img, div.max600 img, div.max750 img, div.max900 img {
	border-radius: 6px;
	height: auto;
	width: 100% !important;
}
div.max150 {width: 150px;}
div.max200 {width: 200px;}
div.max250 {width: 250px;}
div.max350 {width: 350px;}
div.max450 {width: 450px;}
div.max600 {width: 600px;}
div.max750 {width: 750px;}
div.max900 {width: 900px;}

/* Image captions */
.caption, .img-descr {
	color: #555;
	margin-top: 10px;
	text-align: center;
	font-style: italic;
}
.img-descr {
	color: #444;
	margin-top: 10px;
	text-align: center;
}
.caption.italics {
	font-style:italic;
}


/* BANNER ELEMENTS */

/* Free trial button, banner float right */
#ft-container {
	width: 300px;
	float: right;
	padding: 6px;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 6px;
	margin: 10px 0;
	text-align: center;
}
.ft-prompt {
	display: inline-block;
	color: #FFF;
	font-weight: bold;
	padding-right: 8px;
}
.ft-btn {display: inline-block;}

/* Logo paragraph in booking_enquiry pages. See mobile version below. */
.free-trial {
	margin-bottom: 0;
	padding: 12px 0 32px 100px;
	background: url(../Images/icons/free_trial2-90.png) no-repeat top left;
}

/* User logged in notice */
.user-logged-in {
	height: auto;
	width: auto;
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 100px;
	background-color: #151515;
	color: #EEE;
    padding: 6px 12px 8px 12px;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	font-size: 90%;
	line-height: 1;
}


/* SUPPLIER PANEL */

/* Front page */
#supplier-container {
	width: 966px;
	margin: auto;
}
.supplier {
	width: 150px;
	float: left;
	margin: 0 10px 10px 0;
}


/* GOOGLE RECAPTCHA */

.g-recaptcha {overflow: auto;} 
.g-recaptcha div {max-width: 310px;} 


/* VIDEO */
/*
<div class="videoWrapper">
     Copy & Pasted from YouTube 
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
*/
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* See Packages/css */
/* Video trigger (see "video_link_inc.html")
<div class="video-trigger-container">
  <div class="video-trigger stack-top"></div>
  <div class="video-image stack-middle"><img src="../css/video/Video-placeholder.png"></div>
</div>
*/


/* COLOR CHANGE EFFECTS */

/* See package details pages. Flash header. 
<h3 id="reviews" class="no-margin-bottom flash-aqua">Member Feedback</h3>
*/
/* AQUA */
.flash-aqua {
    color: #000000;
    -webkit-animation-name: flashaqua; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
    animation-name: flashaqua;
    animation-duration: 2s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes flashaqua {
    from {color: #000000;}
    to {color: #0191C8;}
}

/* Standard syntax */
@keyframes flashaqua {
    from {color: #000000;}
    to {color: #0191C8;}
}

/* RED */
.flash-red {
    color: #000000;
    -webkit-animation-name: flashred; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
    animation-name: flashred;
    animation-duration: 2s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes flashred {
    from {color: #000000;}
    to {color: #FF2304;}
}

/* Standard syntax */
@keyframes flashred {
    from {color: #000000;}
    to {color: #FF2304;}
}

/* Flash table row. 
https://stackoverflow.com/questions/14607695/flashing-table-row
*/

/*
<table>
    <tr class="flash-row-red">
        <td>true</td>
        <td>false</td>
        <td>true</td>
        <td>true</td>
    </tr>
</table>
*/

@-webkit-keyframes flash-row-red td {
	from { background-color: red; }
	to { background-color: inherit; }
}
@-moz-keyframes flash-row-red td {
	from { background-color: red; }
	to { background-color: inherit; }
}
@-o-keyframes flash-row-red td {
	from { background-color: red; }
	to { background-color: inherit; }
}
@keyframes flash-row-red td {
	from { background-color: red; }
	to { background-color: inherit; }
}

/* Change infinite to a number = number of times to flash */
.flash-row-red td {
	-webkit-animation: flash-row-red 1s infinite; /* Safari 4+ */
	-moz-animation: flash-row-red 1s infinite; /* Fx 5+ */
	-o-animation: flash-row-red 1s infinite; /* Opera 12+ */
	animation: flash-row-red 1s infinite; /* IE 10+ */
}


/* CCS FORM STYLES */

/* Extra cell padding */
.RowAquaFlat td, .AltRowAquaFlat td {padding: 8px !important}
tr.ErrorAquaFlat td, div.ErrorAquaFlat {
	border: 6px solid #FFF !important;
	background-color: #FF2304 !important;
	color: #FFF !important;
	padding: 12px !important;
}
tr.Error td {
	border: 6px solid #FFF !important;
	background-color: #FF2304 !important;
	color: #FFF !important;
	padding: 12px !important;
}
.wrap {white-space: normal !important;}
.no-wrap {white-space: nowrap !important;}
.required {
	color: red;
	font-size: 110%;
}
.Sorter a {text-transform: none !important;}
.FooterOchreFlat a {
	text-decoration: underline !important;
	color: #FF7304 !important;
}
.FooterAquaFlat a {
	text-decoration: underline !important;
	color: #10BCFE !important;
}
.HeaderLeftAquaFlat img {
	width: 9px !important;
}
.HeaderRightAquaFlat img {
	width: 9px !important;
}

/* Create a section divider on CCS form page */
.table-section-bg {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
	background-color: #2EC4FE !important;
	color: #FFF !important;
	font-weight: bold;
}
.table-section-light-bg {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
	background-color: #D2D2D2 !important;
}
.ccs-padded {padding: 8px 12px !important;}

/* Tables, cells, fields - see also responsive styles below */
.w100 {width: 100% !important}
.w15 {width: 15% !important}
.w20 {width: 20% !important}
.w25 {width: 25% !important}
.w30 {width: 30% !important}
.w33 {width: 33% !important}
.w40 {width: 40% !important}
.w45 {width: 45% !important}
.w50 {width: 50% !important}
.w60 {width: 60% !important}
.w70 {width: 70% !important}
.w80 {width: 80% !important}

/* Minimum width */
.m200 {min-width: 200px}
.m450 {min-width: 450px}

/* Main table */
.MainTable.centered {
	margin: 0 auto;
}

/* 
<div class="cbox-container">
 BEGIN CheckBoxList excluded_plans 
<div class="cbox-list">
<input type="checkbox" id="contentmembership_promo_vouchexcluded_plans_{excluded_plans:optionNumber}" value="{Value}" name="{excluded_plans_Name}" {Check}><label for="contentmembership_promo_vouchexcluded_plans_{excluded_plans:optionNumber}">{Description}</label> 
</div>
 END CheckBoxList excluded_plans 
</div>
</td>
*/
.cbox-container {
	border: 2px solid #CCC;
	padding: 4px;
	max-height: 200px;
	overflow: auto;
}
.radio-container {
	border: 2px solid #CCC;
	border-radius: 12px;
	padding: 8px;
	max-height: 250px;
	overflow: auto;
}
.cbox-list, .radio-list {
	padding: 4px 0;
	display: block;
	clear: both;
	font-weight: bold;
}
.radio-list label {padding-left: 4px;}
.radio-container.red-border {border: 1px solid #CE3A1F !important;}
.radio-container.thin-border {border-width: 1px !important;}
.radio-list.plain-list {font-weight: normal !important;}

/* Basic radio list divs */
.radio-container2 {overflow: auto;}
.radio-container2 div {
	display: inline-block;
	margin: 5px;
}


/* FORM LABELS */

/* Form label above field
    <label class="free-form-field" for="abc">
     <span class="label-above">Label text</span>
	 <field goes here>
    </label>
*/
.label-above {
    font-size: 90%;
    color: rgba(30, 30, 30, 1);
    font-weight: 700;
    display: inline-block;
    margin-bottom: 5px;
}
.free-form-field {
    margin-right: 10px;
    vertical-align: top;
    display: inline-block;
    max-width: 400px;
    position: relative;
    margin-top: 5px;
}

/* Responsive label only shows on small screens. See media queries below.
eg. Bookings/family_accommodation.html
<td class="centered"><label class="resp-label">Check-in</label> {checkin_date_display}</td>
*/
.resp-label {display: none;}
.resp-centered {}

/* See media queries. Text centering when normally left-aligned
<td class="ccs-padded strong aqua-text resp-centered" colspan="5">This is Booking # {bkg_num} of {bkg_num1} for {group_name_display1}...</td>
.resp-centered {text-align: center !important;}
 */

/* Alternative > Packages/css/Styles.css:
   Grid labels, row highlight (if used) 
   For "accom_voucher_packages_inc". See also "accom_voucher_packages"
   for css to hide captions. Also accom_package_rate_compare_inc.
     @media only screen and (min-width: 0px) and (max-width: 679px) {
	 .CaptionOchreFlat td, .CaptionOchreFlat th {
	 display:none !important;
     }
     }

<td class="grid-highlight"><span class="grid-label">Room type:&nbsp;</span>{room_type}</td> 
<td><span class="grid-label">Persons included:&nbsp;</span>{persons_included}</td> 

.grid-label {display: block !important;}
.grid-highlight {background-color: #FFCDA5 !important;}

See this version in tour_booking_step1:
.grid-label {display: none; margin-bottom: 5px}
@media only screen and (min-width: 0px) and (max-width: 480px) {
.CaptionAquaFlat td, .CaptionAquaFlat th {
display:none !important;
}
.grid-label {display: block !important;}
}
*/

/* TOGGLE FORM FIELD +/- */

.qty {
	width: 40px;
	height: 25px;
	text-align: center;
}
input.qtyplus {width:25px; height:25px; margin-left: 5px}
input.qtyminus {width:25px; height:25px; margin-right: 5px}


/* SPAM CONTROL */

/* Honey pot */

.formhp {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	height: 0;
	width: 0;
	z-index: -1;
}

/* FLAT UI*/

/* Form Controls */

.form-control:-moz-placeholder {color: #999999;}
.form-control::-moz-placeholder {color: #999999;}
.form-control:-ms-input-placeholder {color: #999999;}
.form-control::-webkit-input-placeholder {color: #999999;}
.form-control, .suburbtown-lookup {
	display: block;
	width: 90%;
	height: 34px;
	padding: 4px 8px;
	font-size: 14px;
	line-height: 1.428571429;
	color: #000;
	vertical-align: middle;
	background-color: #ffffff;
	background-image: none;
	border: 1px solid #cccccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
	transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.form-control:focus, .suburbtown-lookup:focus {
	border-color: #CE3A1F; /* AE Red */
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(206, 58, 31, 0.6) !important;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(206, 58, 31, 0.6) !important;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
	cursor: not-allowed;
	background-color: #eeeeee;
}
textarea.form-control {height: auto;}

/* Variations */
.form-control.medfield {width: 60%;}
.form-control.smallfield {width: 40%;}
.form-control.fc-auto {width: auto !important;}
.form-control.fc-fixed-120 {width: 120px !important;}
.form-control.large {
	height: 42px !important;
	padding: 8px 12px !important;
	font-size: 140% !important;
}

/* For suburb lookup (get_address_data) */
.suburbtown-lookup {width: 60%;}

/*
<div class="fc-group">
  <label for="accom_booking_groupsgroup_name_{accom_booking_groups:rowNumber}">Family Name <font color="#ff0000">*</font></label>
  <input type="text" id="accom_booking_groupsgroup_name_{accom_booking_groups:rowNumber}" class="form-control medfield" maxlength="60" size="30" value="{group_name}" name="{group_name_Name}" placeholder="Family {accom_booking_groups:rowNumber}">
</div>
*/
.fc-group label, .fc-group input, .fc-group select,
.fc-group textarea {
	display: block;
	white-space: nowrap;
	margin: 0 auto;
}
.fc-group label {
	margin-bottom: 5px;
	/*font-weight: bold;*/
}
.fc-group .styled-select {
	margin: 0 auto;
}


/* TILE BOX */
/*
Boxed image panel with text and button as per booking_enquiries.php
<div class="tile">
<img class="tile-image big-illustration" alt="Compas" src="images/icons/svg/compas.svg">
<h3 class="tile-title">Web Oriented</h3>
<p>100% convertable to HTML/CSS layout.</p>
<a class="btn btn-primary btn-large btn-block" href="http://designmodo.com/flat">Get Pro</a>
</div>
*/
.tile-container {
	width: 700px;
	margin: 0 auto;
	}
.tile {
    background-color: #EFF0F2;
    border-radius: 6px;
    padding: 14px;
    position: relative;
    text-align: center;
}
.tile-image.big-illustration {
    border: 0;
    margin-top: 20px;
   /*height: 112px;
    width: 112px;*/
}
.tile-image.big-image {
    border: 0;
	margin-top: 20px;
}
.tile-title {
    color: #333;
    font-size: 20px;
    margin: 10px 0 0 0;
}
.tile p {
    color: #333;
	font-size: 18px;
    line-height: 1.72222;
    margin: 0 0 15px;
}


/* HONGKIAT */

/* Checkboxes, Radio Buttons */

/* Radio */
input[type="checkbox"], input[type="radio"] {
    padding: 0;
	line-height: normal;
}
.radio label:before  {
	border-radius: 12px;
    background-color: #0197D1;
    bottom: -2px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3) inset, 0 1px 0 0 rgba(255, 255, 255, 0.8);
    content: "";
    display: inline-block;
    height: 25px;
    left: 0;
    margin-right: 15px;
    position: absolute;
    width: 25px;
}
.radio label {
    cursor: pointer;
    display: inline-block;
    margin-right: 20px;
    padding-left: 32px;
    position: relative;
}
.radio.red label:before {
	background-color: #CE3A1F !important;
}

/* Checkbox */
.checkbox label {
	display: inline-block;
	cursor: pointer;
	position: relative;
	padding-left: 34px;
	margin-right: 15px;
}
.radio input[type=radio],
.checkbox input[type=checkbox] {
	display: none;
}
.checkbox label:before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-right: 10px;
	position: absolute;
	left: 0;
	bottom: -3px;
	background-color: #CE3A1F; /* AE Red */
	box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
.checkbox label {
	margin-top: 10px;
	margin-bottom: 10px;
}
.checkbox label:before {
    border-radius: 3px;
}
.checkbox label.red-check:before {
	background-color: #FF2304 !important;
}
.radio input[type=radio]:checked + label:before {
    content: "\2022";
    color: #f3f3f3;
    font-size: 30px;
    text-align: center;
    line-height: 20px;
}
.checkbox input[type=checkbox]:checked + label:before {
	content: "\2713";
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
	font-size: 18px;
	color: #FFF;
	text-align: center;
    line-height: 24px;
}
.checkbox.red-border-box {
	border: 2px solid #ff2304;
	background-color: #ffcac3;
}

/* List boxes
Example use: map_search.php
http://bavotasan.com/2011/style-select-box-using-only-css/

<div class="styled-select">
   <select>
      <option>Here is the first option</option>
      <option>The second option</option>
   </select>
</div>
*/
.styled-select select {
	color: #000;
	background: transparent;
	width: 240px;
	padding: 5px;
	font-size: 14px;
	line-height: 1;
	border: 0;
	border-radius: 0;
	height: 34px;
	-webkit-appearance: none;
	cursor: pointer;
}

/* Change image here if change CCS style */
.styled-select {
	width: 240px;
	height: 34px;
	overflow: hidden;
	background: url(images/down_arrow_large_aqua.png) no-repeat right #FFF;
	border: 1px solid #CCC;
}
.styled-select.red-arrow {
	background: url(images/down_arrow_large_aered.png) no-repeat right #FFF;
}
.styled-select.orange-arrow {
	background: url(images/down_arrow_large_ochre.png) no-repeat right #FFF;
}

.small-select select {width: 75px !important;}
.small-select {width: 75px !important;}
.med-select select {width: 160px !important;}
.med-select {width: 160px !important;}

/* Booking forms etc. */
.large-select select {
	width: 360px !important;
	height: 48px !important;
	padding: 12px !important;
	}
.large-select {
	width: 360px !important;
	height: 48px !important;
}
.med-large-select select {
	width: 260px !important;
	height: 48px !important;
	padding: 12px !important;
	}
.med-large-select {
	width: 260px !important;
	height: 48px !important;
}
.sml-large-select select {
	width: 120px !important;
	height: 48px !important;
	padding: 12px !important;
	}
.sml-large-select {
	width: 120px !important;
	height: 48px !important;
}

/* For standard grids */
.auto-large-select select {
	width: 100% !important;
	height: 48px !important;
	padding: 12px !important;
	}
.auto-large-select {
	width: 100% !important;
	height: 48px !important;
	}

/*Focus - no outline */
.styled-select:focus {
	border-color: #03CAC3;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}


/* (NEW) CHECKBOX STYLE 
https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
*/

/* The container 
<label for="subscribe_incsubscription_detailsft_reg" class="check-container">Register
  <input type="checkbox" onclick="showRow()" id="subscribe_incsubscription_detailsft_reg" value="1" name="{ft_reg_Name}" {ft_reg}>
  <span class="checkmark"></span>
</label>
*/
.check-container {
	display: inline-block;
	position: relative;
	padding-top: 4px;
	padding-left: 35px;
	margin-bottom: 8px;
	cursor: pointer;
	/*font-size: 22px;*/
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default checkbox */
.check-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox (aqua) */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #A5E6FF;
	border: 1px solid #6AD5FE;
	border-radius: 3px;
	box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}

/* On mouse-over, add a background color */
.check-container:hover input ~ .checkmark {
	background-color: #6AD5FE;
}

/* When the checkbox is checked, add a darker background */
.check-container input:checked ~ .checkmark {
	background-color: #0191C8;
	border-color: #0191C8;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.check-container input:checked ~ .checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.check-container .checkmark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* JUMP MENU */

/* Ref: package_list_tours_inc */
.jump-menu {}
.jump-menu td {padding: 4px 12px 4px 8px;}
.jump-menu td.divider {border-right: 2px solid #FFA404;}
.jump-menu td.divider.aqua {border-right: 2px solid #4CCDFE !important;}


/* ALERT BOX */

/* Notification boxes 
Source: Almost Flat UI
Example use: [Australian Escapes]/index.php

<div class="alert-box success" data-alert="">
This is a success alert (div.alert-box.success).
<a class="close" href="">�</a>
</div>

Javascript required:
<script type="text/javascript">
  function closeAlert() {
    document.getElementById("close_alert").style.display = "none";
  }
</script>

// MESSAGE

global $message;

$email_entered = CCGetSession("email_entered","");

	if ($email_entered == "entered") {
		$message_text = "Thank you. We will notify you as soon as the site is back up again.";
		$message_text = alertBox($message_text, $type = "alert");
		$message->SetValue($message_text);
	}

CCSetSession("email_entered","");
*/

/*
*, *:before, *:after {
	-moz-box-sizing: border-box;
}
*/

/*
<div class="alert-box radius" data-alert="">
This is a standard alert (div.alert-box).
<a class="close" href="">�</a>
</div>
*/
.alert-box {
	background-color: #3498DB;
	border-color: #217DBB;
	border-style: solid;
	border-width: 2px;
	color: #FFFFFF;
	display: block;
	font-size: 0.875em;
	font-weight: bold;
	margin-bottom: 1.25em;
	padding: 0.6875em 1.3125em 0.75em 0.6875em;
	position: relative;
}
.alert-box .close {
	color: #333333;
	font-size: 1.375em;
	line-height: 0;
	opacity: 0.3;
	padding: 5px 4px 4px;
	position: absolute;
	right: 0.3125em;
	top: 0.4375em;
}

/*
<script type="text/javascript">
function closeAlert(alertID) {
  var result_style = document.getElementById(alertID).style;
  result_style.display = 'none';
}
</script>

<div id="alert1" class="alert-box alert round" data-alert="">
This is an alert (div.alert-box.alert.round).
<a class="close" onclick="closeAlert('alert1')" href="">x</a>
</div>
*/
.alert-box.success {
	background-color: #2ECC71;
	border-color: #25A25A;
	color: #FFFFFF;
}
.alert-box.alert {
    background-color: #E74C3C;
    border-color: #D62C1A;
    color: #FFFFFF;
}
.alert-box.round {
    border-radius: 1000px;
}

/*
<div class="alert-box secondary" data-alert="">
This is a secondary alert (div.alert-box.secondary).
<a class="close" href="">�</a>
</div>
*/
.alert-box.secondary {
    background-color: #ECF0F1;
    border-color: #CFD9DB;
    color: #505050;
}


/* MESSAGE BOX */

.message-box,
.message-box-red, .message-box-orange, 
.message-box-green, .message-box-gold,
.message-box-yellow, .message-box-ltgray,
.message-box-aqua {
	display: flex;
	align-items: center;
	background-color: #FFA404; /* Orange (default) */
	color: #FFF;
	padding-left: 60px !important;
	min-height: 56px;
	background-image: url(../Images/icons/info-white40.png);
	background-position: left;
	background-repeat: repeat-y;
	margin-bottom: 25px;
	padding: 12px;
}
.message-box p,
.message-box-red p, .message-box-orange p, 
.message-box-green p, .message-box-gold p,
.message-box-yellow p, .message-box-ltgray p,
.message-box-aqua p {
	margin: 5px 0 !important;
}
.message-box-red {
	background-color: #FF472D !important;
}
.message-box-orange {
	background-color: #FF7304 !important;
}
.message-box-green {
	background-color: #03BD41 !important;
}
.message-box-gold {
	background-color: #FFA404 !important;
	color: #000 !important;
}
.message-box-yellow {
	background-color: #FFE44B !important;
	color: #000 !important;
}
.message-box-ltgray {
	border: #DDD 4px solid;
	background-color: #E1E1E1 !important;
	color: #000 !important;
}
.message-box-aqua {
	background-color: #01ADEF !important;
}
.mbox-round {border-radius: 6px;}
.no-border {border: 0 !important;}
.pencil-border {border-width: 1px !important;}

/* Message box links */
.message-box-red a, .message-box-orange a, 
.message-box-green a, .message-box-aqua a {
	color: #FFF !important;
}
.message-box-gold a, .message-box-yellow a, 
.message-box-ltgray a {
	color: #000 !important;
}

/* White box for trans image background (see packages.html) */
.message-box-white-trans {
	margin-bottom: 20px;
	padding: 4px 8px;
	background-color: #FFF;
	background: rgba(255,255,255,0.5);
	border-radius: 6px;
}
.message-box-white-trans.clear-box-dark {
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(15,15,15,0.7);
}
.message-box-white-trans.clear-box-red {
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(210,26,0,0.7);
}

/* Table cell */
.alert-td {
	border: 2px solid #ff2304 !important;
}


/* p7 TOOLTIPS */

a.p7tooltip:link, a.p7tooltip:visited, 
a.p7tooltip:hover, a.p7tooltip:active {
	color: #0349B8;
	text-decoration: none;
}

/* Example: gcash_panel_inc */
.tip-link-float {
	float: right;
	width: 120px;
	text-align: right;
	padding-top: 24px;
}


/* FLEX BOX */

/* Flex box: Attributes, Form elements */
/* https://www.youtube.com/watch?v=JJSoEo8JSnc 
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*/

/* See tour booking styles for .field-box .inside-box */

/* Wrapper to similate narrow window. 
<div class="flex-wrapper-small">
(Flex row here)
</div>
*/
.flex-wrapper-small .flex-row {
    flex-direction: column !important;
}
.flex-wrapper-small .flex-box {
	margin-right: 0 !important;
	text-align: center;
}
.flex-wrapper-small .left-padded {padding-left: 0 !important;}
.flex-wrapper-small .align-left {text-align: center !important;}

/* General flex styles */
.flex-row {
	padding-top: 20px;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center; /* Default center */
  	align-items: stretch;
}
.flex-row.left, .flex-row.start {
	/* Push to left */
	justify-content: flex-start !important;
}
.flex-row.right {
	/* Push to right */
	justify-content: flex-end !important;
}

/* Item axis */
.flex-row.center {
	/* Center axis */
	align-items: center; !important;
}
.flex-row.baseline {
	/* Content center */
	align-items: baseline; !important;
}
.flex-row.bottom {
	/* Content bottom */
	align-items: flex-end; !important;
}

.flex0 {flex: 0 !important;}
.flex1 {flex: 1 !important;}
.flex2 {flex: 2 !important;}
.flex3 {flex: 3 !important;}
.flex4 {flex: 4 !important;}

.no-margin-right {margin-right: 0 !important}
.margin-right-10 {margin-right: 10px !important}
.margin-right-15 {margin-right: 15px !important}
.margin-right-20 {margin-right: 20px !important}

/* General content box */
.flex-box {margin-right: 20px;}

/* Field box */
.flex-field-box {
	padding: 10px 20px 0 20px;
	flex-basis: auto;
}
.flex-field-box.first {
	padding-left: 0 !important;
}
.flex-field-box.no-wrap {
	white-space: nowrap;
}

/* Stack elements vertically in a column box (inc. for mobile) 
   See eg. "Itineraries.css" for mobile styles.
*/
.flex-column {
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	margin-right: 20px;
}
.flex-column.single, .flex-column.flex-last {margin-right: 0 !important;}
.flex-col-box {
	text-align: center;
	margin: 0 auto;
	width: 100%;
}

/* Set max width */
.flex-max600 {
	max-width: 600px; 
	flex-grow: 1;
	flex-basis: 0; /* Even width */
}
.flex-max700 {
	max-width: 700px; 
	flex-grow: 1;
	flex-basis: 0;
}

/* Order image/other content to left/right like float */
.flex-order-1 {
	order: 1;
	margin: 5px 20px 10px 0;
	padding-left: 20px;
}
.flex-order-2 {
	order: 2;
	margin: 5px 0 10px 20px;
}

/*
<div class="flex-parent">
  <a class="child" href="#0">Button</a>
</div>
*/
.flex-parent {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* General (non-flex) field containers 
   (See tour booking pages)
*/
.field-row {
	padding-top: 20px;
	width: 100%;
}
.field-box {
	padding-top: 20px;
}

/* Inside field box (can be non-flex) */
.inline-box {
	padding: 10px 0;
	display: inline-block;
	margin-right: 20px;
	vertical-align: middle;
}
.inside-box {
	display: block;
	padding: 10px 0;
}

.left-padded {
	padding-left: 20px;
}


/* For mobile (more specific rules applied in other css files eg. Itineraries.css). */
@media only screen and (min-width: 0px) and (max-width: 679px) {

	/* Flex only here. */

	.flex-row {
    	flex-direction: column !important;
	}
	.flex-field-box {
		padding-left: 0 !important;
	}
	.flex-box {
		margin-right: 0;
		text-align: center;
	}
	.flex-column {margin-right: 0 !important;}

	/*
	.flex-order-1 {
		margin: 0 !important;
		padding-left: 0 !important;
	}
	.flex-order-2 {
		order: 1 !important;
		margin: 0 !important;
	}
	*/
}

/* Small screens */
@media only screen and (min-width: 0px) and (max-width: 480px) {
	.field-box .inline-box {width: 90% !important}
}


/* FEATURED CONTENT BOXES
See also p7-synergy-theme.css
*/
.feature-box {
	margin-bottom: 15px;
	border: 3px solid #BBB;
	border-radius: 12px;
	padding: 20px;
	text-align: center;
	background-color: #FFF;
}
.feature-box ul.centered, 
.feature-box.centered ul {list-style-position: inside;}
.feature-box li {
	line-height: 1.6;
	margin-top: 3px;
}
.feature-box ul.left-aligned {
	list-style-position: outside !important;
	margin-left: 1.5em;
}
.feature-box.align-left {text-align: left !important;}
.feature-box.no-border {border: 0 !important;}
.feature-box.squared {border-radius: 0 !important;}
.feature-box.pencil-border {border: 1px solid #DDD  !important;}
.feature-box.dashed-border {border-style: dashed !important;}
.feature-box.low-padding {padding: 12px !important;}

/* Feature box background colours */
.feature-box.transparent-bg {background-color: rgba(255,255,255,0.5) !important;}
.feature-box.light-bg {background-color: #F1F1F1 !important;}
.feature-box.orange-bg {background-color: #FFDEC3 !important;}
.feature-box.orange-bg-solid {background-color: #FF7304 !important;}
.feature-box.dark-bg {background-color: #222 !important;}
.feature-box.aqua-bg {background-color: #01ADEF !important;}

/* Feature box border colours */
.feature-box.white {border: 0  !important;}
.feature-box.aqua-border {border-color: #2EC4FE !important;}
.feature-box.dark-border {border: 1px solid #222 !important;}
.feature-box.orange-border {border: 1px solid #FF7304 !important;}
.feature-box.red-border {border: 1px solid #D21A00 !important;}
.feature-box.aqua-border {border: 1px solid #0191C8 !important;}

/* Feature box background images */
.travel-bg1 {
	position: relative;
	background-image:url(../Images/travel-concept1030-310.png);
	background-position: bottom;
	background-repeat:no-repeat;
	min-height: 270px;
}
.travel-bg1 .bottom {
	position: absolute;                  
	bottom: 25px;
	left: 50%;
}

/* 3px dashed box */
.cart-box {
	margin-bottom: 25px;
	border: 3px dashed #BBB;
	border-radius: 12px;
	padding: 12px;
	text-align: center;
}
.cart-box table {
	margin: 0 auto;
}

/* See index.html */
.feature-box-a {
	min-height: 300px;
	vertical-align: middle;
	margin-bottom: 15px;
	border: 1px solid #BBB;
	padding: 40px 30px;
	text-align: center;
	line-height: 1.6;
}
.feature-box-b {
	min-height: 300px;
	vertical-align: middle;
	margin-bottom: 15px;
	border: 1px solid #FF7304;
	padding: 40px 30px;
	text-align: center;
	line-height: 1.6;
}

/* Flight Centre Price Beater page*/
#fc_box {
	padding: 12px;
	background-color: #D21A00;
	color: #FFF;
	font-size: 160%;
	font-family: "Arial Black", Gadget, sans-serif;
	text-align: center;
}

/* Flight Centre Price Beater page - Trip-a-Deal*/
#td_box {
	padding: 12px;
	background-color: #000;
	color: #FFF;
	font-size: 160%;
	font-family: "Arial Black", Gadget, sans-serif;
	text-align: center;
}

/* Scroll boxes - testimonials, other */
.scr-box-a, .scr-box-b {
	height: 630px;
	padding: 4px;
	border-top: 1px solid #BBB;
	border-bottom: 1px solid #BBB;
	overflow: auto;
}
.scr-box-a {
	border: 0 !important;
}
.scr-box-b {
	height: 600px !important;
}

/* Containers eg. retrieve login details, member_login_prompt */
.container-150 {width: 150px; max-width: 100%}
.container-300 {width: 300px; max-width: 100%}
.container-600 {width: 600px; max-width: 100%}
.container-750 {width: 750px; max-width: 100%}
.container-900 {width: 900px; max-width: 100%}
.container-150.ctrd, .container-300.ctrd, .container-600.ctrd,
.container-750.ctrd, .container-900.ctrd {
	margin: 0 auto;
}

/* Boxes, gradients */
.grad-light-gray {
  background-image: linear-gradient(to right, #D2D2D2 , #F0F0F0);
}
.grad-light-gray-left {
  background-image: linear-gradient(to left, #D8D8D8 , #F0F0F0);
}
.grad-blue {
  background-image: linear-gradient(to right, #A6C8FE , #E1EDFF);
}
.grad-gold {
  background-image: linear-gradient(to right, #FFD387 , #FFEEE1);
}

/* Rounded corners */
.all-rounded {border-radius: 8px;}
.top-left-rounded {border-top-left-radius: 8px}
.bottom-left-rounded {border-bottom-left-radius: 8px}


/* FEATURE TABLE */

/* Eg. membership plans */
.feature-table {
	border: 2px solid #FF7304;
	width: 100%;
}
.feature-table.rounded {border-radius: 6px;}
.feature-table td, .feature-table th {
	padding: 8px !important;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	line-height: 1.4em;
	background-color: #F8F8F8;
}
.feature-table td.first, .feature-table tr.first td, 
.feature-table th.first {
	border-top: 0 !important;
}
.feature-table td.last {
	border-right: 0 !important;
}

/* Header cells - orange (default) */
.feature-table td.header, .feature-table tr.header td {
	background-color: #FF8A2D;
}
.feature-table td.footer, .feature-table tr.footer td {
	background-color: #FFAB69;
}

/* Header cells - red */
.feature-table td.header.red-dark-bg, .feature-table tr.header.red-dark-bg td {
	background-color: #D21A00;
	color: #FFF;
}
.feature-table td.footer.red-dark-bg, .feature-table tr.footer.red-dark-bg td {
	background-color: #D21A00;
	color: #FFF;
}
.feature-table td.header.red-mid-bg, .feature-table tr.header.red-mid-bg td {
	background-color: #E46048;
}
.feature-table td.footer.red-mid-bg, .feature-table tr.footer.red-mid-bg td {
	background-color: #E46048;
}

/* Header cells - blue */
.feature-table td.header.blue-mid-bg, .feature-table tr.header.blue-mid-bg td {
	background-color: #4E91FC;
	color: #FFF !important;
}
.feature-table td.footer.blue-mid-bg, .feature-table tr.footer.blue-mid-bg td {
	background-color: #4E91FC;
	color: #FFF !important;
}

/* Header cells - aqua */
.feature-table td.header.aqua-dark-bg, .feature-table tr.header.aqua-dark-bg td {
	background-color: #01ADEF;
	color: #FFF !important;
}
.feature-table td.footer.aqua-dark-bg, .feature-table tr.footer.aqua-dark-bg td {
	background-color: #01ADEF;
	color: #FFF !important;
}
.feature-table td.header.aqua-mid-bg, .feature-table tr.header.aqua-mid-bg td {
	background-color: #4CCDFE;
	color: #FFF !important;
}
.feature-table td.footer.aqua-mid-bg, .feature-table tr.footer.aqua-mid-bg td {
	background-color: #4CCDFE;
	color: #FFF !important;
}

/* Content */
.feature-table p {
	margin: 6px 0;
	/*line-height: 1.4em;*/
}

/* Apply to text in tables */
.feature-table tr.low-margins p {
	margin-top: 3px !important;
	margin-top: 3px !important;
	line-height: 1.2em !important;
}

/* Border colours. Default colour is orange. */
.feature-table.dark {
	border-color: #333 !important;
}
.feature-table.aqua {
	border-color: #01ADEF !important;
}
.feature-table.red {
	border-color: #D21A00 !important;
}
.feature-table.blue {
	border-color: #0349B8 !important;
}

/* Fill colours (can be used on header cells) */
.feature-table td.red-bg, .feature-table tr.red-bg td {
	background-color: #D21A00 !important;
	color: #FFF !important;
}
.feature-table td.dark-bg, .feature-table tr.dark-bg td {
	background-color: #333 !important;
	color: #EEE !important;
}
.feature-table td.blue-bg, .feature-table tr.blue-bg td {
	background-color: #045EEC !important;
	color: #FFF !important;
}
.feature-table td.aqua-bg, .feature-table tr.aqua-bg td {
	background-color: #01ADEF !important;
	color: #FFF !important;
}

/* Gold */
.feature-table td.gold-vlight-bg {
	background-color: #FFE9C3 !important;
	/*color: #FFF !important;*/
}
.feature-table td.gold-light-bg {
	background-color: #FFDEA5 !important;
}
.feature-table td.gold-light-mid-bg {
	background-color: #FFD387 !important;
}
.feature-table td.gold-mid-bg {
	background-color: #FFC969 !important;
}
.feature-table td.gold-dark-mid-bg {
	background-color: #FFBE4B !important;
}

/* Blue */
.feature-table td.blue-vlight-bg {
	background-color: #E1EDFF !important;
	/*color: #FFF !important;*/
}
.feature-table td.blue-light-bg {
	background-color: #C4DAFE !important;
}
.feature-table td.blue-light-mid-bg {
	background-color: #A6C8FE !important;
}
.feature-table td.blue-mid-bg {
	background-color: #89B6FD !important;
}
.feature-table td.blue-dark-mid-bg {
	background-color: #6BA4FD !important;
}

/* Aqua */
.feature-table td.aqua-vlight-bg {
	background-color: #E1F7FF !important;
	/*color: #FFF !important;*/
}
.feature-table td.aqua-light-bg {
	background-color: #C3EEFF !important;
}
.feature-table td.aqua-light-mid-bg {
	background-color: #A5E6FF !important;
}
.feature-table td.aqua-mid-bg {
	background-color: #88DEFE !important;
}
.feature-table td.aqua-dark-mid-bg {
	background-color: #6AD5FE !important;
}

/* Red */
.feature-table td.red-vlight-bg {
	background-color: #FFE5E1 !important;
	/*color: #FFF !important;*/
}
.feature-table td.red-light-bg {
	background-color: #FFCAC3 !important;
}
.feature-table td.red-light-mid-bg {
	background-color: #FFB0A5 !important;
}
.feature-table td.red-mid-bg {
	background-color: #FF9687 !important;
}
.feature-table td.red-dark-mid-bg {
	background-color: #FF7C69 !important;
}

/* Green */
.feature-table td.green-vlight-bg {
	background-color: #E1FFEB !important;
	/*color: #FFF !important;*/
}
.feature-table td.green-light-bg {
	background-color: #C4FED7 !important;
}
.feature-table td.green-light-mid-bg {
	background-color: #A6FEC3 !important;
}
.feature-table td.green-mid-bg {
	background-color: #89FDB0 !important;
}
.feature-table td.green-dark-mid-bg {
	background-color: #6BFD9C !important;
}

/* Orange 
    <tr>
      <td class="strong">Membership Level</td> 
      <td class="orange-light-bg">{membership_level_current}</td> 
      <td class="orange-light-bg">Silver</td> 
      <td class="orange-light-mid-bg">{membership_level_maint}</td> 
      <td class="orange-mid-bg">{membership_level_std}</td> 
    </tr>
*/
.feature-table td.orange-vlight-bg {
	background-color: #FFEEE1 !important;
	/*color: #FFF !important;*/
}
.feature-table td.orange-light-bg {
	background-color: #FFDEC3 !important;
}
.feature-table td.orange-light-mid-bg {
	background-color: #FFCDA5 !important;
}
.feature-table td.orange-mid-bg {
	background-color: #FFBC87 !important;
}
.feature-table td.orange-dark-mid-bg {
	background-color: #FF8A2D !important;
}

/* Divider row */
.feature-table tr.divider-white td {
	background-color: #FFF !important;
}

/* Font-sizes */
.feature-table .lge-font {
	font-size: 160% !important;
}
.feature-table .med-font {
	font-size: 140% !important;
}
.feature-table .small-font {
	font-size: 100% !important;
}
.feature-table .xsmall-font {
	font-size: 90% !important;
}

/* Can be used to create a set of table-like divs in a single cell */
.feature-table div {
	display: inline-block;
}
.feature-table .div33 {
	width: 32%;
}
.feature-table div.left-border {
	border-left: 2px solid #000;
}
.feature-table div.left-padded {
	padding-left: 8px;
}
.feature-table div.right-padded {
	padding-right: 8px;
}
/*
Column for Narrow Browser Windows and Smartphones in both orientations
@media only screen and (min-width: 0px) and (max-width: 700px) {

	.offer-boxes div {
		display: block !important;
	}
	.offer-boxes .div33 {
		width: auto !important;
	}
}
*/

/* SMALL HEADER BOXES */

/*<div class="header-box">
  <h2>Step 1: Choose package</h2>
</div>*/

.header-box {
	display: inline-block;
	padding: 8px 12px;
	background-color: #136DFB;
	border-radius: 8px;
	margin-top: 10px;
}
.header-box h2, .header-box h3 {
	color: #FFF;
	text-transform: uppercase;
	margin: 0 !important;
}
.header-box.olive {
	background-color: #A0D200 !important;
}
.header-box.pink {
	background-color: #D200A4 !important;
}
.header-box.green {
	background-color: #03CF47 !important;
}
.header-box.red {
	background-color: #D21A00 !important;
}
.header-box.gold {
	background-color: #D2B300 !important;
}


/* SIMPLE TAB PANELS */
/* Ref: main_menu_inc */

.change-panel {}
.change-panel.active {
	font-weight: bold;
	letter-spacing: 2px;
}


/* 48px ICON PARAGRAPH MESSAGES */

.tip, .info, .info2, .help, .warn, .correct, 
.incorrect, .search-info, .fav48, .secure,
.sent-mail, .customer, .offer, .no-membership,
.member, .transferable, .smile, .bronze-star, 
.silver-star, .gold-star, .boomerang, .lock,
.bonus, .thumbs-up, .gcash {
	margin: 15px 0;
	padding: 12px 8px 16px 56px;
	line-height: 1.3;
	font-weight: bold;
	color: #222;
	text-align: left !important;
}
.tip {
	background: url(../Images/icons/Light-Bulb-Gold-48.png) no-repeat top left;
}
.info {
	background: url(../Images/icons/info2-48.png) no-repeat top left;
}
.info2 {
	background: url(../Images/icons/info2-48.png) no-repeat top left;
}
.help {
	background: url(../Images/icons/help_info48.png) no-repeat top left;
}
.warn {
	/*color: #D28600 !important;*/
	background: url(../Images/icons/warning48.png) no-repeat top left;
}
.correct {
	/*color: #03BD41 !important;*/
	background: url(../Images/icons/Check-48.png) no-repeat top left;
}
.incorrect {
	color: #BE1E2D !important;
	background: url(../Images/icons/cross48.png) no-repeat top left;
}
.search-info {
	background: url(../Images/icons/search-red48.png) no-repeat top left;
}
.fav48 {
	background: url(../Images/icons/Favorites-48.png) no-repeat top left;
}
.secure {
	font-weight: normal !important;
	background: url(../Images/icons/secure.png) no-repeat top left;
}
.sent-mail {
	background: url(../Images/icons/Sent-Mail-48.png) no-repeat top left;
}
.customer {
	background: url(../Images/icons/boomerang48.png) no-repeat top left;
}
.offer {
	color: #000 !important;
	background: url(../Images/icons/Gift-48.png) no-repeat top left;
}
.no-membership {
	padding-top: 0 !important;
	background: url(../Images/icons/no-membership48.png) no-repeat top left;
}
.member {
	color: #000 !important;
	background: url(../Images/icons/member48.png) no-repeat top left;
}
.transferable {
	font-weight: normal !important;
	background: url(../Images/icons/transferable48.png) no-repeat top left;
}
.smile {
	background: url(../Images/icons/Smile-48.png) no-repeat top left;
}
.boomerang {
	background: url(../Images/icons/boomerang48.png) no-repeat top left;
}
.lock {
	color: #000 !important;
	background: url(../Images/icons/lock48.png) no-repeat top left;
}
.bonus {
	color: #000 !important;
	background: url(../Images/icons/bonus48.png) no-repeat top left;
}
.thumbs-up {
	color: #000 !important;
	background: url(../Images/icons/thumbs-up48.png) no-repeat top left;
}
.gcash {
	color: #000 !important;
	background: url(../Images/icons/gcash48.png) no-repeat top left;
}

/* h2, h3 versions */
h2.info {padding-top: 8px !important;}
h3.info {padding-top: 10px !important;}

/* Unbold */
.unbold {font-weight: normal !important;}

/* Centering with icon above */
.centered-above {
	padding: 54px 0 16px 0 !important;
	text-align: center !important;
	background-position: top center;
}
/*
<div class="centered">
  <div class="smile centered-inline">This is the text here</div>
</div>
*/
.centered-inline {
	display: inline-block;
	margin: 0 0 !important;
	/*padding: 8px 8px 16px 56px !important;*/
}

/* Star ratings */
.bronze-star {
	color: #CB3E06;
	background: url(../Images/icons/bronze-star-48.png) no-repeat top left;
}
.silver-star {
	color: #4F5960;
	background: url(../Images/icons/silver-star-48.png) no-repeat top left;
}
.gold-star {
	color: #E08D06;
	background: url(../Images/icons/gold-star-48.png) no-repeat top left;
}

/* DIV version 
$membership_level->SetValue('<div class="feature-box no-border light-bg"><div class="div-msg container-600 ctrd"><p class="customer no-margin-top no-margin-bottom">Your membership level is '.$mship_details["membership_level"].'. See below for entitlements.</p></div></div>');
*/
.div-msg {
	background-position: left !important;
}
.div-msg p {
	display: inline-block;
	vertical-align: middle;
}


/* FFV */
.ffv {
	margin: 15px 0;
	padding: 16px 12px 16px 70px;
	line-height: 1.3;
	text-align: left !important;
	background: url(../Images/FFV-Valid-dom.png) no-repeat top left;
}
.ffv-int {
	background: url(../Images/FFV-Valid-int.png) no-repeat top left !important;
}

/* Travel benefits */
.mastercard, .lounge, .seating, .footrest, .transfer, 
.guide, .dining, .drink, .upgrade, .coffee {
	margin: 15px 0;
	padding: 16px 8px 16px 58px;
	line-height: 1.3;
	font-weight: bold;
}
.mastercard {
	background: url(../Images/icons/Master-Card-48.png) no-repeat top left;
}
.lounge {
	background: url(../Images/icons/Sofa-48.png) no-repeat top left;
}
.seating {
	background: url(../Images/icons/Aircraft-Seat-48.png) no-repeat top left;
}
.footrest {
	background: url(../Images/icons/Pillow-48.png) no-repeat top left;
}
.transfer {
	background: url(../Images/icons/Car-Side-View-48.png) no-repeat top left;
}
.guide {
	background: url(../Images/icons/Book-Open-48.png) no-repeat top left;
}
.dining {
	background: url(../Images/icons/Cutlery-Fork-Knife-48.png) no-repeat top left;
}
.drink {
	background: url(../Images/icons/Wine-48.png) no-repeat top left;
}
.upgrade {
	background: url(../Images/icons/Bed-01-48.png) no-repeat top left;
}
.coffee {
	background: url(../Images/icons/Coffee-01-48.png) no-repeat top left;
}


/* 32px ICON PARAGRAPH MESSAGES */

.no-membership32, .info32, .correct32,
.tip32, .warn32, .info-alert32 {
	margin: 10px 0;
	padding: 6px 8px 8px 38px;
	line-height: 1.4;
	font-weight: bold;
	color: #222;
	font-size: 90% !important;
	background: url(../Images/icons/no-membership32.png) no-repeat top left;
	/*font-weight: normal !important;*/
}
.info32 {
	background: url(../Images/icons/info32.png) no-repeat top left !important;
}
.correct32 {
	color: #B47300 !important;
	background: url(../Images/icons/Check-32.png) no-repeat top left !important;
}
.tip32 {
	background: url(../Images/icons/Light-Bulb-Gold-32.png) no-repeat top left !important;
}
.warn32 {
	color: #B47300 !important;
	background: url(../Images/icons/warning32.png) no-repeat top left !important;
}
.info-alert32 {
	background: url(../Images/icons/info-alert32.png) no-repeat top left !important;
}


/* 24px ICON PARAGRAPH MESSAGES */
/*
<div class="centered margin-top-10 margin-bottom-5">
  <p class="info24 centered-inline24">Click/tap "BOOK THIS ACCOMMODATION" to select your accommodation and book the dates you want.</p>
</div>
*/
.centered-inline24 {
	display: inline-block;
	margin: 0 0 !important;
}
.correct24, .info24, .warn24, .news-item {
	margin: 15px 0;
	padding: 2px 8px 6px 30px;
	line-height: 1.3;
	color: #333;
}
.correct24 {
	color: #03B13D !important;
	background: url(../Images/icons/Check-24.png) no-repeat top left;
}
.info24 {
	color: #0191C8 !important; /* Aqua */
	background: url(../Images/icons/info24.png) no-repeat top left;
}
.warn24 {
	color: #D28600 !important;
	background: url(../Images/icons/warning24.png) no-repeat top left;
}
.info24.orange {
	color: #555 !important;
	background: url(../Images/icons/info-orange24.png) no-repeat top left;
	font-size: 95%;
}
.info24.orange-orange {
	color: #FF7304 !important;
	background: url(../Images/icons/info-orange24.png) no-repeat top left;
	font-size: 95%;
}
.info24.ltgray {
	color: #777 !important;
	background: url(../Images/icons/info-ltgray24.png) no-repeat top left;
	font-size: 95%;
}
.info24.red-gray {
	color: #444 !important;
	background: url(../Images/icons/info-red24.png) no-repeat top left;
	font-size: 95%;
}
.info24.red {
	color: #D21A00 !important;
	background: url(../Images/icons/info-red24.png) no-repeat top left;
}
.news-item {
	background: url(../Images/icons/megaphone24.png) no-repeat top left;
}


/* HOTEL & PACKAGE STANDARDS */

/* Packages 48px */
.bronze-star, .silver-star, .gold-star {
	margin: 15px 0;
	padding: 12px 8px 16px 58px;
	line-height: 1.3;
	font-weight: bold;
}
.bronze-star {
	color: #CB3E06;
	background: url(../Images/icons/bronze-star-48.png) no-repeat top left;
}
.silver-star {
	color: #4F5960;
	background: url(../Images/icons/silver-star-48.png) no-repeat top left;
}
.gold-star {
	color: #E08D06;
	background: url(../Images/icons/gold-star-48.png) no-repeat top left;
}

/* Accom standards 72px */
.bronze-standard, .silver-standard, .gold-standard,
.diamond-standard {
	margin: 15px 0;
	padding: 16px 8px 32px 80px;
	line-height: 1.3;
	font-size: 120%;
	font-weight: bold;
}
.bronze-standard {
	color: #CB3E06;
	background: url(../Images/icons/bronze-std-72.png) no-repeat top left;
}
.silver-standard {
	color: #4F5960;
	background: url(../Images/icons/silver-std-72.png) no-repeat top left;
}
.gold-standard {
	color: #E08D06;
	background: url(../Images/icons/gold-std-72.png) no-repeat top left;
}
.diamond-standard {
	color: #222; /*70D1F4*/
	background: url(../Images/icons/diamond-std-72.png) no-repeat top left;
}

/* Center aligned with centered title and content 
<div class="center-align">
  <div class="gold-standard standards">Gold standard<br>
  <a class="toggle" href="#example">Details</a>
  </div>
</div>
*/
div.center-align {
	text-align: center;
}
div.standards {
	display: inline-block;
	margin: 0 0 !important;
	padding: 8px 8px 16px 80px !important;
}
div.standards a {
	font-size: 14px !important;
	letter-spacing: 2px;
}
div.standards a:link, div.standards a:visited {
	color: #333 !important;
}
div.standards a:hover, div.standards a:active {
	color: #D21A00 !important;
}

/* Center aligned with centered title 
<div class="center-align">
  <div class="gold-standard standards2">
    Gold standard
  </div>
</div>
*/

div.standards2 {
	display: inline-block;
	margin: 0 0 !important;
}


/* ASSISTANT 
<table class="w100 responsive margin-bottom-15">
  <tr>
    <td><div class="assistant-img">&nbsp;</div></td> 
    <td><div class="assistant">This is where you manage your vouchers and bookings. Need help? Call 1800 669 579 or click the blue chat button at the bottom of your screen.</div></td> 
  </tr>
</table>
*/
.assistant-img {
	height: 70px;
	width: 70px;
	margin: 0 auto;
	background: url(../Images/assistant2.png) no-repeat left;
	border-radius: 35px;
	-webkit-border-radius: 35px;
	-moz-border-radius: 35px;
}
.assistant-img.img2 {
	background: url(../Images/assistant4.png) no-repeat left !important;
}
.assistant {
	padding: 0 0 0 10px;
	line-height: 1.3;
	color: #333;
}
.assistant p {
	margin-top: 8px;
	margin-bottom: 0;
}

/* PAYPAL & OTHER VERIFICATION 
<p class="paypal">Australian Escapes is a verified PayPal business. 
All payments are processed through Paypal and are 100% secure.</p>
*/

.paypal, .money-back {
	margin: 15px 0;
	padding: 110px 0 32px 0 !important;
	text-align: center !important;
	line-height: 1.3;
}
.paypal {
	background: url(../Images/Paypal-verified90.png) no-repeat top center;
}
.money-back {
	background: url(../Images/money-back2-105.png) no-repeat top center;
}

/* TOGGLE CONTENT 
(See Admin version for table rows and other options.)

Requires toggle.js
Example #1:
<div class="center-align">
  <div class="gold-standard standards">Gold standard<br>
  <a class="toggle" href="#example">Details</a>
  </div>
</div>

<div class="toggle-content" id="example">
	This content reveals at normal speed.
</div>

Example #2:
<div class="center-align margin-bottom-15">
  <div class="bronze-standard standards">
    Bronze standard<br>
<a href="#bronze-standard" class="toggle">Details</a> 
  </div>
</div>
<div id="bronze-standard" class="toggle-content feature-box no-border light-bg no-padding-top no-padding-bottom">
  {bronze_standard_inc} 
</div>

*/
.toggle-content {
	display: none;
	height: 0;
	opacity: 0;
	overflow: hidden;
	transition: height 350ms ease-in-out, opacity 750ms ease-in-out;
}
.show-fast {
	transition: height: 100ms ease-in-out, opacity 300ms ease-in-out;
}
.show-slow {
	transition: height: 2000ms ease-in-out, opacity 2500ms ease-in-out;
}
.toggle-content.is-visible {
	display: block !important;
	height: auto !important;
	opacity: 1 !important;
}


/* NUMBERED LISTS */
/* 
<ol class="numbered-list">
  <li><span>&nbsp;</span><div>The thinking is done for you. You don't have to worry about logistics at all.</div></li>
</ol>
*/
ol.numbered-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding-left: 18px;
	list-style: none;
	counter-reset: list-number;
}
ol.numbered-list li {
	counter-increment: list-number;
	margin-bottom: 7px;
	display: flex;
	width: 90%;
	vertical-align: middle;
}
ol.numbered-list li span:before {
	content: counter(list-number);

	margin-right: 10px;
	background-color: #0191C8;
	border-radius: 50%;
	color: #FFF;
	width: 2rem;
	height: 2rem;
	padding-top: 0.3rem;
	display: inline-block;
	text-align: center;
	font-size: 16px;
	box-sizing: border-box;
}


/* BULLET LISTS */

/* Can be applied to a div eg. <div class="field-box bullet-list"> */

ul.bullet-list, .bullet-list ul {
	list-style-type: none;
	/*list-style-position: inside;*/
	padding-left: 18px;
	margin: 0;
}
.bullet-list li {
	/*margin: 10px 0 5px 0;?*/
	padding: 0 0 8px 32px;
	line-height: 1.2 !important;
	margin-bottom: 10px !important;
}

/* This is the key to centering list items */
.bullet-list.centered li {
	display: table;
	margin: 0 auto;
}

/* Centered standard list */
ul.centered {
	padding-left: 18px;
	margin: 0;
}

/* 20px icon */
.bullet-list li, .bullet-list.orange-bullet li {
	/* Default square */
	background: url(../Images/icons/Bullet-Orange20.png) no-repeat top left !important;
}
.bullet-list.red-bullet li {
	background: url(../Images/icons/Bullet-Red20.png) no-repeat top left !important;
}
.bullet-list.gold-ochre-bullet li {
	/* Square */
	background: url(../Images/icons/Bullet-GoldOchre20.png) no-repeat top left !important;
}
.bullet-list.green-tick li {
	padding-top: 2px;
	background: url(../Images/icons/Check-24.png) no-repeat top left !important;
}

/* Plain tick (no bg) */
.bullet-list.lime-tick li {
	padding-top: 2px;
	background: url(../Images/icons/Check-lime24.png) no-repeat top left !important;
}

/* MESSAGE LIST 
   Ref: Functions_General
*/
.message-list {
	margin-bottom: 15px;
	padding: 0 8px;
}
.message-list li {
	margin: 5px 0;
	list-style-type: none;
}
.message-list li.bullet {
	list-style-type: none !important;
	padding: 0 0 4px 32px;
	line-height: 1.3;
	color: #0191C8;
	background: url(../Images/icons/info24.png) no-repeat top left;
}
.message-list li.bullet.red {
	color: #CE3A1F !important;
	background: url(../Images/icons/info-red4.png) no-repeat top left !important;
}
.message-list li.bullet.error {
	background-image: url(../Images/icons/Delete-24.png) !important;
	color: #FF2304 !important;
}


/* MEMBERSHIP INCLUSIONS */

.inclusions li {margin-top: 5px;}


/* 24px ICON MESSAGES */

.fav24, .tick24, .close24,
.num1, .num2, .num3, .num4 {
	margin: 15px 0;
	padding: 0 8px 4px 32px;
	line-height: 1.3;
	font-weight: bold;
	text-align: left;
}
.fav24 {
	background: url(../Images/icons/Favorites-32.png) no-repeat top left;  /* 32px */
	padding: 4px 8px 12px 40px !important;
}
.tick24 {
	background: url(../Images/icons/Check-24.png) no-repeat top left;
	font-weight: normal !important;
}
.close24 {
	background: url(../Images/icons/Delete-24.png) no-repeat top left;
	color: #000 !important;
	font-weight: normal !important;
}
.num1 {
	background: url(../Images/icons/Number-one24.png) no-repeat top left;
	font-weight: normal !important;
}
.num2 {
	background: url(../Images/icons/Number-two24.png) no-repeat top left;
	font-weight: normal !important;
}
.num3 {
	background: url(../Images/icons/Number-three24.png) no-repeat top left;
	font-weight: normal !important;
}
.num4 {
	background: url(../Images/icons/Number-four24.png) no-repeat top left;
	font-weight: normal !important;
}


/* FRONT PAGE LISTINGS */
/* Not including Packages/css/Styles.css */

.listing-box {
	box-shadow: 0 2px 3px -1px rgba(186, 186, 186, 0.7);
	padding: 20px 24px 12px 24px;
	background-color: #FFF;
}

/* F3 header style links used on <p> tags in featured listing boxes.
   This font is used in p7synergy for h1,h2 etc.
*/
.pf3 {
	font-family: "Roboto Condensed", "Segoe UI", Arial, Helvetica, sans-serif;
	font-size: 140%;
	font-weight: 700;
	text-align: center;
	margin: 0;
}

/* Featured listing header link combined with text-link-[colour] */
.pf3 a {
	display: block;
	padding: 20px 15px;
	text-transform: uppercase;
	text-decoration: underline !important;
	border-bottom: none !important;
	color: #0349B8;
}
.pf3.low-padding a {padding: 15px 10px !important;}
.pf3 a.aqua:link, .pf3 a.aqua:visited {color: #222 !important; border-left: 5px solid #0197D1;}
.pf3 a.red:link, .pf3 a.red:visited {color: #222 !important; border-left: 5px solid #FF2D0F;}
.pf3 a.aqua:hover, .pf3 a.aqua:active {
	color: #0191C8 !important;
	border-bottom: none !important; 
}
.pf3 a.aqua:hover span {color: #6AD5FE !important;}
.pf3 a.red:hover, .pf3 a.red:active {
	color: #D21A00 !important;
	border-bottom: none !important; 
}
.pf3 a.red:hover span, 
.pf3 a.red:active span {
	color: #FF7C69 !important;
	}

/* eg. Guided tours */
.feat-image-header {border-bottom: 3px dotted #FF2304;}
.feat-image-header.aqua {border-bottom: 3px dotted #01ADEF !important;}

/* NEW text as per featured packages
<span class="new">NEW</span>
*/
.new {
	display: inline-block;
	margin-right: 5px;
	padding: 6px 10px 4px 10px;
	font-weight: bold;
	color: #FFF;
	background-color: #0191C8;
	border-radius: 6px;
}
.red-bg {background-color: #F01E00 !important;}
.gold-ochre-bg {background-color: #FFA404 !important;}
.green-bg {background-color: #03BD41 !important;}
.orange-bg {background-color: #FF7304 !important;}
.lime-bg {background-color: #65C903 !important;}

@media only screen and (min-width: 0px) and (max-width: 679px) {

	/* Front page listings */
	.listing-box {height: auto !important;}

}


/* TABLE CELLS */

.cell-highlight {
	background-color: #FFF2A5 !important; /* Yellow */
}
.cell-highlight2 {
	background-color: #88DEFE !important; /* Light aqua */
}
.cell-highlight3 {
	background-color: #F1E9C1 !important; /* Caption bg */
}
.cell-highlight4 {
	background-color: #FFDEC3 !important; /* Light orange */
}
.cell-highlight5 {
	background-color: #FFF6C3 !important; /* Light yellow */
}
.cell-highlight6 {
	background-color: #FFCAC3 !important; /* Light red */
}
.cell-highlight7 {
	background-color: #E1FFEB !important; /* Light green */
}
.cell-highlight8 {
	background-color: #F0F0F0 !important; /* Light gray */
}

/* Striped - red */
.highlight-striped {
	background: repeating-linear-gradient(
	-45deg,
	#EB8E7D,
	#EB8E7D 10px,
	#F7D2CB 10px,
	#F7D2CB 20px);
}

/* Striped - gray */
.highlight-striped-gray {
	background: repeating-linear-gradient(
	-45deg,
	#E1E1E1,
	#E1E1E1 10px,
	#F0F0F0 10px,
	#F0F0F0 20px);
}

/* TR/TD Red or pink */
tr.cell-highlight6 td {
	background-color: #FFCAC3 !important;
}


/* SIMPLE CONTAINER TABLE 
   eg. main menu featured promotions list.
*/

.info-boxes {
	border: 2px solid #FFA304;
	width: 100%;
}
.info-boxes td {
	padding: 8px !important;
	border-top: 2px solid #FFA304;
}
.info-boxes td.th {
	font-weight: bold;
}
.info-boxes td.first, .info-boxes tr.first td {
	border-top: 0 !important;
}
.info-boxes td.last {
	border-right: 0 !important;
}
.info-boxes tr.dark td {
	border-top-color: #555 !important;
}
.info-boxes p {
	margin: 6px 0;
	line-height: 1.4em;
}

/* Border colours. Default colour is gold. */
.info-boxes.aqua, .info-boxes.aqua td {
	border-color: #01ADEF !important;
}
.info-boxes.red, .info-boxes.red td {
	border-color: #D21A00 !important;
}
.info-boxes.dark, .info-boxes.dark td {
	border-color: rgba(0,0,0,.5) !important;
}
.info-boxes.orange, .info-boxes.orange td {
	border-color: #FF7304 !important;
}
.info-boxes.light-orange, .info-boxes.light-orange td {
	border-color: #FFDEC3 !important;
}

/* Cell colour */
.info-boxes td.light-orange {
	background-color: #FF9B4B;
}
.info-boxes td.mid-orange {
	background-color: #FF9B4B;
}
.info-boxes td.mid-gray {
	background-color: #999;
	color: #EEE;
}
.info-boxes td.dk-gray {
	background-color: #444;
	color: #EEE;
}

/* Border size */
.onepx-borders, .onepx-borders td {
	border-width: 1px !important;
}
.right-borders td {
	border-right: 2px solid #FFA304;
}

/* Apply to text in tables */
.low-margins p {
	margin-top: 3px !important;
	margin-top: 3px !important;
	line-height: 1.2em !important;
}


/* LINKS */

/* Fix P7 Tool-tip Magic trigger links */
.p7TTM_trg {border: 0; border-bottom: 0 !important;}

/* General text links */
.text-link-light {color: #EEE !important;}
.text-link-dark {color: #000 !important;}
.text-link-orange {color: #FF7304 !important;}
.text-link-blue {color: #0349B8 !important;}
.text-link-aqua {color: #0191C8 !important;}
.text-link-ltaqua {color: #A5E6FF !important;}
.text-link-gold {color: #FFDA04 !important;}
.text-link-green {color: #03B13D !important;}
.text-link-red {color: #D21A00 !important;}
.text-link-aered {color: #CE3A1F !important;}
.text-link-pink {color: #E40363 !important;}
.text-link-white {color: #FFF !important;}
.text-link-lime {color: #59B103 !important;}
.text-link-dark, .text-link-light, .text-link-orange,
.text-link-blue, .text-link-aqua, .text-link-ltaqua, 
.text-link-gold, .text-link-green, .text-link-red, 
.text-link-pink, .text-link-aered, .text-link-white, 
.text-link-lime {
	text-transform: uppercase;
    text-decoration: none !important;
	border-bottom: 1px dotted !important;
}
.text-link-dark:hover, .text-link-light:hover, 
.text-link-orange:hover, .text-link-blue:hover,
.text-link-aqua:hover, .text-link-ltaqua:hover,
.text-link-gold:hover, .text-link-green:hover, 
.text-link-red:hover, .text-link-pink:hover, 
.text-link-aered:hover, .text-link-white:hover, 
.text-link-lime:hover {
    border-bottom: 1px solid !important;
}
.ucase, .upper {text-transform: uppercase !important;}
.lcase {text-transform: lowercase;}
.nocase {text-transform: none !important;}

/* Link divider (hidden on small devices) */
.pipe {
	font-size: 120%; 
	color: #555;
	margin: 0 7px;
}


/* Image link - remove border applied via p7synergy theme link style,
   usually applied to img tag. This is an icon or other image as part of a link
   such as a property photo.
*/
.image-link a, .image-link img, .image-link {
	text-decoration: none;
	border: 0 !important; 
	border-bottom: 0 !important;
}

/* Icon control links (image only, no text)
<a href="{details_Src}" class="icon-control" id="Panel1itineraries_listdetails_{itineraries_list:rowNumber}"><img id="Image_{itineraries_list:rowNumber}_1" title="View or edit record" alt="Details" src="Images/icons/Data-Edit-24.png"></a>
*/
.icon-control {}
.icon-control img {
	vertical-align: middle;
	margin-bottom: .25em;
	padding-top: 4px;
	border: 0;
}

/* New window/popup/p7MBX etc. link. (Blue default) */
.new-win {
	margin: 5px 0 !important;
	padding: 0 0 2px 26px !important;
	display: inline-block;
	background: url(../Images/icons/new_win_blue24.png) no-repeat left;
	border-bottom: none !important;
	text-decoration: underline !important;
}
.win-blue20 {
	color: #0349B8 !important;
	background: url(../Images/icons/new_win_blue20.png) no-repeat left !important;
	padding: 0 0 0 22px !important;
}
.new-win:link, .new-win:visited {
	color: #0349B8;
}
.new-win:hover, .new-win:active {
	color: #023B94 !important;
	border-bottom: none !important;
}

/* Red */
.win-red:link, .win-red:visited {
	color: #D21A00 !important;
	background: url(../Images/icons/new_win_red24.png) no-repeat left !important;
}
.win-red20 {
	color: #D21A00 !important;
	background: url(../Images/icons/new_win_red20.png) no-repeat left !important;
	padding: 0 0 0 22px !important;
}
.win-red:hover, .win-red:active, .win-red20:hover, .win-red20:active {
	color: #B41600 !important;
}

/* Aqua */
.win-aqua {
	color: #0191C8 !important;
	background: url(../Images/icons/new_win_aqua24.png) no-repeat left !important;
}
.win-aqua20 {
	color: #0191C8 !important;
	background: url(../Images/icons/new_win_aqua20.png) no-repeat left !important;
	padding: 0 0 0 22px !important;
}
.win-aqua:hover, .win-aqua:active, .win-aqua20:hover, .win-aqua20:active {
	color: #016C95 !important;
}

/* Green */
.win-green {
	color: #03BD41 !important;
	background: url(../Images/icons/new_win_green24.png) no-repeat left !important;
}
.win-green20 {
	color: #03BD41 !important;
	background: url(../Images/icons/new_win_green20.png) no-repeat left !important;
	padding: 0 0 0 22px !important;
}
.win-aqua:hover, .win-aqua:active, .win-aqua20:hover, .win-aqua20:active {
	color: #016C95 !important;
}

/* Dark */
.win-dark:link, .win-dark:visited {
	color: #000 !important;
	background: url(../Images/icons/new_win_black24.png) no-repeat left !important;
}
.win-dark:hover, .win-dark:active {
	color: #444 !important;
}

/* Pink */
.win-pink:link, .win-pink:visited {
	color: #E40363 !important;
	background: url(../Images/icons/new_win_pink24.png) no-repeat left !important;
}
.win-pink:hover, .win-pink:active {
	color: #000 !important;
}


/* BACK LINK */

/* Based on New Win. Default blue, plain icon link. */
.back-link {
	padding: 0 0 4px 28px !important;
	display: inline-block;
	background: url(../Images/icons/Arrowhead-Left-24.png) no-repeat left;
	text-transform: uppercase;
	color: #0349B8;
	text-decoration: underline !important;
	border-bottom: 0 !important;
}
.back-link:hover, .back-link:active {
	color: #000 !important;
}

/* Red */
.back-red {
	color: #D21A00 !important;
	background: url(../Images/icons/Arrowhead-Left-Red24.png) no-repeat left !important;
}
.back-red:hover, .back-red:active {
	color: #B41600 !important;
}

/* Using m-icon 
<div class="back-wrapper">
  <div class="m-icon inline valign-middle">
    arrow_back_ios
  </div>
  <div class="inline valign-middle">
  <a href="{back_link_Src}" class="text-link-dark" id="contentback_link">Back to start</a>
  </div>
</div>
*/
.back-wrapper {padding-top: 20px;}


/* NAV LIST */

/* Icon text links in an unordered <ul> in table row and elsewhere. Icon plus text floated left eg. in a table row. 
<ul class="navlist border">
<li><a href="{package_search_Src}" class="back-link back-red strong" id="package_list_accom_incpackage_search">Back to search</a></li>
<li><a href="#" class="p7mbx-trigger mbx-external new-win win-red strong" data-mbx-slide="1" data-mbx="4">Subscribe</a></li>
<div class="clear"></div>
</ul>
*/
.navlist {
	margin: 0;
	padding: 0;
}
.navlist.border {
	border-bottom: 1px dotted #444;
}
.navlist li {
	float: left;
	list-style-type: none;
	margin: 0 15px 5px 0;
	padding: 0;
	white-space: nowrap;
}
.navlist a {
	/*height: 30px;*/
	display: inline-block;
	padding: 6px 4px 6px 30px;
	color: #333 !important; /* Red */
	background-image: url(../Images/icons/info24.png);
	background-repeat: no-repeat;
	background-position: left;
	text-decoration: underline !important;
	border-bottom: none !important;
}
.navlist a:hover {
	color: #000 !important;
	border-bottom: none !important;
}
.navlist .active {
	font-weight: bold;
	cursor: default;
}
.navlist a { 
	-webkit-transition: color linear .3s 0s; 
	transition: color linear .3s 0s; 
}

.navlist .info-orange24 {background-image: url(../Images/icons/info-orange24.png); !important;}
.navlist .invoice-red24 {background-image: url(../Images/icons/Invoice-Red-24.png); !important;}
.navlist .calendar-red24 {background-image: url(../Images/icons/Calendar-Date-Red-24.png); !important;}
.navlist .transfer-red24 {background-image: url(../Images/icons/Share-Red-24.png); !important;}
.navlist .discount-red24 {background-image: url(../Images/icons/Discount-Red-24.png); !important;}
.navlist .price-red24 {background-image: url(../Images/icons/Dollar-Red-24.png); !important;}

/* Adjust padding if in navlist. */
.navlist .new-win, .navlist .back-link {
	padding-top: 0 !important;
}


/* BORDER BUTTON 
(Based on Bgen) 
Use .btn-inline-group to group.
*/

.border-btn {
	color: #444 !important;
	-webkit-border-radius: 12;
	border: 2px solid #444;
	border-radius: 12px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
	padding: 10px 20px;
	text-align: center;
	display: inline-block;
	text-decoration: none !important;
	border-bottom-style: solid !important;
	border-bottom-width: 2px !important;
	line-height: 1.4 !important;
	text-transform: uppercase;
	margin-right: 10px;
}
.border-btn:hover {
	color: #222 !important;
	border-color: #222;
	text-decoration: none;
	transition: all 0.5s ease;
}

/* Red */
.bb-red {
	color: #D21A00 !important;
	border-color: #D21A00 !important;
}
.bb-red:hover {
	color: #B41600 !important;
	border-color: #B41600 !important;
}

/* Aqua */
.bb-aqua {
	color: #0191C8 !important;
	border-color: #0191C8 !important;
}
.bb-aqua:hover {
	color: #0182B3 !important;
	border-color: #0182B3 !important;
}

/* Orange */
.bb-orange {
	color: #FF7304 !important;
	border-color: #FF7304 !important;
}
.bb-orange:hover {
	color: #D25D00 !important;
	border-color: #D25D00 !important;
}

/* Pink */
.bb-pink {
	color: rgba(228,3,99,1) !important;
	border-color: rgba(228,3,99,1) !important;
}
.bb-pink:hover {
	color: rgba(178,2,77,1) !important;
	border-color: rgba(178,2,77,1) !important;
}

/* For bb-pink/other eg. in top panel on index page. */
.bb-low-padding {padding: 6px 16px !important;}

/* Last button margin. */
.last-btn {margin-right: 0 !important;}


/* BREADCRUMB MENU */

/* See member_login.php, member_area.php, other */
#breadcrumb {margin-bottom: 15px; clear: both}

/* &#8674; = arrow */
/* Pathway */
.pathway {
	padding: 12px 12px 8px 12px;
	font-size: 110%;
	background-color: #F0F0F0;
	border-radius: 6px;
	display: block;
	height: auto;
	overflow: hidden;
}
.pathway li {
	float: left;
	list-style-type: none;
	margin: 0 10px 0 0;
	padding: 0 0 4px 0;
	white-space: nowrap;
}
.pathway a {
	float: left;
	display: inline-block;
	margin-right: 10px;
	text-decoration: none;
	border-bottom: 1px dashed;
	text-transform: uppercase;
	font-weight: bold;
	color: #0349B8;
}
.pathway a:hover {border-bottom-style: solid;}
.pathway .current {
	font-weight: bold;
	text-transform: uppercase;
	color: #777;
}
.sep {
	display: inline-block;
	font-size: 120%;
	margin-top: -5px;
	color: #444;
}

/* Colored */
#breadcrumb.bc-red-bg .pathway {background-color: #CE3A1F !important;}
#breadcrumb.bc-red-bg .pathway a {color: #FFF !important;}
#breadcrumb.bc-red-bg .pathway .current {color: #F7D2CB !important;}
#breadcrumb.bc-red-bg .sep {color: #F7D2CB !important;}

#breadcrumb.bc-orange-bg .pathway {background-color: #FF7304 !important;}
#breadcrumb.bc-orange-bg .pathway a {color: #FFF !important;}
#breadcrumb.bc-orange-bg .pathway .current {color: #FFDEC3 !important;}
#breadcrumb.bc-orange-bg .sep {color: #FFDEC3 !important;}

#breadcrumb.bc-dkgray-bg .pathway {background-color: #444 !important;}
#breadcrumb.bc-dkgray-bg .pathway a {color: #FFF !important;}
#breadcrumb.bc-dkgray-bg .pathway .current {color: #D2D2D2 !important;}
#breadcrumb.bc-dkgray-bg .sep {color: #D2D2D2 !important;}

#breadcrumb.scroll {
	position: sticky;
	top: 20px;
	z-index: 9;
}
#breadcrumb.scroll .pathway {
	-webkit-box-shadow: 3px 3px 9px 0px rgba(145,143,145,1);
	-moz-box-shadow: 3px 3px 9px 0px rgba(145,143,145,1);
	box-shadow: 3px 3px 9px 0px rgba(145,143,145,1);
}


/* NUMBERED CIRCLES */

/* Container */
.number-box-left {
	width: 15%;
	min-height: 80px;
	/*border: 1px solid red;*/
	float: left;
}
.number-box-right {
	width: 80%;
	min-height: 80px;
	/*border: 1px solid blue;*/
	float: left;
	text-align: left !important;
}

/* 
.numberCircle {
	border-radius: 50%;
	behavior: url(PIE.htc);
	width: 36px;
	height: 36px;
	padding: 8px;
	background: #fff;
	border: 2px solid #666;
	color: #666;
	text-align: center;
	font: 32px Arial, sans-serif;
}

<div class="number-circle red"><div>STEP</div><br class="clear">2</div> */
.number-circle {
	border-radius: 50%;
	width: 40px;
	height: 40px;
	padding: 8px;
	background: #fff;
	border: 2px solid #666;
	color: #666;
	text-align: center;
	font-size: 12px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: bold;
	line-height: 1;
}
.number-circle div {
	text-align: center;
	font-size: 12px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-top: 2px;
	line-height: 1;
}
.number-circle div.num {
	font-size: 28px !important;
}

/* Colours */
.number-circle.gold {
	background: #B49900 !important;
	border: 0;
	color: #FFF !important;
}
.number-circle.pink {
	background: #F00098 !important;
	border: 0;
	color: #FFF !important;
}
.number-circle.ochre {
	background: #F09900 !important;
	border: 0;
	color: #FFF !important;
}
.number-circle.red {
	background: #FF2D0F !important;
	border: 0;
	color: #FFF !important;
}


/* STICKY SCROLL BOX 

This needs to be at the top of the page. See reg_free_trial2, package_details_travel.

<div id="sbox" class="sticky-box">Sticky</div>
<script>
myID = document.getElementById("sbox");
var myScrollFunc = function() {
  var y = window.scrollY;
  if (y >= 200) {
    myID.className = "sticky-box sbox-show"
  } else {
    myID.className = "sticky-box sbox-hide"
  }
};
window.addEventListener("scroll", myScrollFunc);
</script>
*/

.sticky-box {
	position: fixed;
	width: 200px;
	height: 65px;
	/*border: 1px solid red;*/
	right: 5px;
	top: 200px;
	padding: 20px 0;
	text-align: center;
	z-index: 99999;
	display: none;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.sbox-show {display: block !important;}
.sbox-hide {display: none !important;}

/* Set below standard top offset of 200px */
.sticky-box.level2 {top: 300px;}

/* Sticky box styles */
.sticky-box.dark {
	background: rgba(0,0,0,.75);
	border: 1px solid #000;
	border-radius: 8px;
	padding: 12px;
	height: auto !important;
}

/* Aqua bg */
.sticky-box.aqua {
	background: rgba(1,151,209,.75);
	border: 1px solid #0182B3;
	border-radius: 8px;
	padding: 12px;
	height: auto !important;
}
.sticky-box.aqua-top {
	right: 5px;
	top: 135px;
	background: rgba(1,151,209,.75);
	border: 1px solid #0182B3;
	border-radius: 8px;
	padding: 12px;
	height: auto !important;
}

/* Orange bg */
.sticky-box.orange-top {
	right: 5px;
	top: 135px;
	background: rgba(240,106,0,.85);
	border: 1px solid #F06A00;
	border-radius: 8px;
	padding: 12px;
	height: auto !important;
}

/* Red bg */
.sticky-box.red-top {
	right: 5px;
	top: 135px;
	background: rgba(240,30,0,.75);
	border: 1px solid #D21A00;
	border-radius: 8px;
	padding: 12px;
	height: auto !important;
}

/* Links */
.sticky-box .link-div {margin-top: 5px;}
.sticky-box .link-div.first {margin-top: 0;}

/*
Scroll to top (in MasterPages) with scroll link
<div id="stt1" class="sticky-box stt">
<a href="#page_top" class="scrollLink"><i></i><span>Scroll To Top</span></a> 
</div>

<script src="../js/jquery-3.5.1.min.js" type="text/javascript"></script>
 Standard scroll link 
<a href="#target_id" class="scrollLink text-link-red strong">Itinerary</a>

<script type="text/javascript">
$(document).ready(function(){
    $( "a.scrollLink" ).click(function( event ) {
        event.preventDefault();
        $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top }, 500);
    });
});
</script>
*/
.sticky-box.stt {
	width: auto !important;
	height: auto !important;
	color: #AAA;
	background: rgba(0,0,0,.9) !important;
	right: 6px;
	top: auto !important;
	bottom: 200px !important;  /* Bottom positioned */
	padding: 0px 6px 2px 6px;
	font-size: 2.5em;
	border-radius: 5px !important;
}
.sticky-box.stt a span {
	display: none;
}
.sticky-box.stt i:before {
	padding: 0px;
}
.sticky-box.stt a {
	text-decoration: none;
	color: #AAA;
}
.sticky-box.stt a:hover {
	color: #FFF;
}
.sticky-box.stt i {
   font-style: normal;
} 
.sticky-box.stt i:before {
	content: "\2191";
	padding-right: 2px;
	padding-left: 2px;
}


/* SUB NAV */ 
/* Ref: about_us_menu_inc. See below for right-arrow. */

.sub-nav {
	text-align: center;
	line-height: 2;
}
.sub-nav span.active a {
	border-bottom: 1px solid !important;
}
.sub-nav span.right-arrow {display: none;}
.sub-nav span.active span.right-arrow {
	display: inline !important;
	color: #0349B8;  /* default blue */
}
span.right-arrow.dark {
	color: #333 !important;
}
span.right-arrow.red {
	color: #CE3A1F !important;
}


/* ARROWS & CONNECTORS
<h1 class="centered margin-top-20 margin-bottom-20">MY RESORT VOUCHERS (MRV) 
<span class="red-text connector">&nbsp;</span> CONTROL PANEL</h1>
http://www.amp-what.com/unicode/search/right%20arrow

For links. The following only displays an arrow. Example MRV/vouchers_issued.php.
<p><a href="{return_link_Src}" id="Panel_return_linkreturn_link" class="sml-more button small-button red"><span class="xlge-font left-arrow white-text upper">&nbsp;</span></a></p>

Get css version of eg arrow or other symbol.
*/
.vine-leaf {margin: 0 5px;}
.vine-leaf:before {
	content: '\1f65f';
}

/* eg. "user_signed_in_inc",
about_us_menu_inc" */
.right-arrow {margin: 0 5px;}
.right-arrow:before {
	content: '\27bd';
}

/* Return link */
.left-arrow {margin: 0 5px;}
.left-arrow:before {
	content: '\0025c0';
}

/* For plain text links */
.right-arrow2:before {
	content: '\0027b2';
	display: inline-block;
	margin-right: 5px;
}


/* ARROW CALLOUT 
http://www.cssarrowplease.com/	
<div class='arrow_box'>
  <h1 class='logo'>css arrow please!</h1>
</div>
Not in use
*/
.arrow_box {
	position: relative;
	background: #d54a20;
	border: 4px solid #f52516;
}
.arrow_box:after, .arrow_box:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.arrow_box:after {
	border-color: rgba(213, 74, 32, 0);
	border-right-color: #d54a20;
	border-width: 30px;
	margin-top: -30px;
}
.arrow_box:before {
	border-color: rgba(245, 37, 22, 0);
	border-right-color: #f52516;
	border-width: 36px;
	margin-top: -36px;
}

/* WINDOWS 
<div class="close-popup">
<a href="#" onclick="closePopup()">Close this popup window</a>
</div>
<div class="clear">
</div>
*/

.close-popup {
	height: 36px;
	position: relative;
	float: right;
	display: inline-block;
	padding: 3px 6px;
	-webkit-border-radius: 6;
	border: 2px solid #FF2304;
	border-radius: 6px;
}

.close-popup a {
	color: #FF2304 !important;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
	display: block;
	padding: 10px 40px 10px 4px;
	background-image: url(../Images/icons/Close-32.png);
	background-repeat: no-repeat;
	background-position: right;
	text-align: left;
	text-decoration: none !important;
	border-bottom: none !important;
}
.close-popup a:hover {
	color: #000 !important;
	transition: all 0.5s ease;
}


/* MRV */

#mrv-menu-box {
	position: relative;
	max-width: 450px;
	background-image: url(../Images/mrv-menu-bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	padding: 20px;
	border-radius: 8px;
}
#mrv-menu-box-overlay {
	position: obsolute;
	top: 10px;
	left: 10px;
	background-color: rgba(255,255,255,0.7);
	text-align: center;
	padding: 12px;
	border-radius: 6px;
	color: rgba(228,3,99,1);
}
#mrv-menu-box-overlay h2 {
	color: rgba(228,3,99,1);
}
#mrv-menu-box-overlay p {
	color: rgba(0,0,0,1);
}

/* MEDIA QUERIES*/

/*
/Exclude certain ID from style (in use [Packages] p7qc.css)
div:not(#bar){
    color:red;
}
*/

/* MEDIA QUERIES 
See also p7-synergy/-theme.css for 1024 width.
*/

/* 1 Column for Narrow Browser Windows and Smartphones in both orientations
https://medium.com/@banuriwick/min-width-max-width-media-queries-994e2ec5fca3
*/
@media only screen and (min-width: 481px) and (max-width: 679px) {

	.iframe {overflow: scroll !important;}

	/* Table containers */
	.w15,.w20,.w25,.w30,.w33,.w40,
	.w45,.w50,.w60,.w70,.w80 {
		width: 100% !important;
	}

	/* Minimum width */
	.m200 {min-width: inherit !important}
	.m450 {min-width: inherit !important}

	/* Text centering when normally left-aligned */
	.resp-centered {text-align: center !important;}

	/* Label that only shows on small screens. */
	.resp-label {
		display: block;
		color: #555;
		font-size: 90%;
	}

	#enquiry_detailsmessage {width: 80% !important;}

	/* Sub-menus (Content, Packages) tappable */
	.submenu {line-height: 2 !important;}

	/* The js sets a width on fields where the js is applied */
	.easy-autocomplete {width: auto !important;}

	/* Free trial mobile */
	#ft-container {width: 100% !important;}

	/* Logo paragraph in booking_enquiry pages. */
	.free-trial {
		padding-top: 90px !important;
		padding-bottom: 0 !important;
		padding-left: 0 !important;
		background-position: top !important;
		margin-bottom: 20px !important;
		font-size: 90%;
	}

	/* Suppliers */
	#supplier-container {
		height: 360px;
		overflow: auto;
	}
	.supplier {
		width: auto !important;
		float: none !important;
		margin: 0 auto !important;
	}

	/* Google Recaptcha */
	.g-recaptcha div {width: 200px !important;} 

	/* See also responsive_table_styles.html for responsive forms css
	http://css-tricks.com/responsive-data-tables/
	*/

	/* Number circle and container (reg_free_trial2) */
	.number-box-left {
		width: 100% !important;
		float: none !important;
	}
	.number-box-right {
		width: 100% !important;
		float: none !important;
		text-align: center;
	}
	.number-circle {
		margin: 0 auto !important;
	}

	/* Tool tips as per gcash_panel_inc */
	.tip-link-float {
		float: none !important;
		width: auto !important;
		text-align: center !important;
	}

	/* Nav list */
	.navlist li {
		float: none !important;
		text-align: center !important;
	}
}

/*Smartphones ONLY*/
@media only screen and (min-width: 0px) and (max-width: 480px) {

	#logo {padding-top: 40px;}
	#logo.no-padding {padding-top: 0 !important;}

	/* The js sets a width on fields where the js is applied */
	.easy-autocomplete {width: auto !important;}

	/* Text centering when normally left-aligned */
	.resp-centered {text-align: center !important;}

	/* Label that only shows on small screens. */
	.resp-label {
		display: block;
		color: #555;
		font-size: 90%;
	}

	/* Image containers */
	div.max150 {width: 100% !important;}
	div.max200 {width: 100% !important;}
	div.max250 {width: 100% !important;}
	div.max350 {width: 100% !important;}
	div.max450 {width: 100% !important;}
	div.max600 {width: 100% !important;}
	div.max750 {width: 100% !important;}
	div.max900 {width: 100% !important;}

	/* Table containers */
	.w15,.w20,.w25,.w30,.w33,.w40,
	.w45,.w50,.w60,.w70,.w80 {
		width: 100% !important;
	}

	/* Feature table */
	.feature-table td {border-right: 0 !important;}

	/* Minimum width */
	.m200 {min-width: inherit !important}
	.m450 {min-width: inherit !important}

	/* Forms */
	.styled-select select {width: 100% !important;}
	.styled-select {width: 100% !important;}

	.small-select {width: 40% !important; margin: 0 auto;}
	.med-select {width: 60% !important; margin: 0 auto;}

	input.smallfield {width: 60% !important;}
	input.medfield {width: 80% !important;}

	.radio-container2 div {font-weight: normal !important;}
	.radio-container2 label {padding-left: 4px !important;}

	.checkbox label {margin-top: 0 !important;}

	/* Message paragraphs */
	.tip, .info, .info2, .help, .warn, .correct, 
	.incorrect, .search-info, .fav48, .secure,
	.sent-mail, .customer, offer, .no-membership,
	.member, .transferable, .smile, .bronze-star, 
	.silver-star, .gold-star, .boomerang, .lock,
	.bonus, .thumbs-up, .gcash {
		padding: 54px 0 16px 0 !important;
		text-align: center !important;
		background-position: top center;
	}

	/* PBX */
	.pbx-iframe {width: auto !important;}

	/* General and MBX iframes */
	.iframe-container {height: 650px !important;}

	/* Assistant */
	.assistant-img {margin-bottom: 5px !important;}

	/* Solution for Google Recaptcha scaling
	@media screen and (max-height: 575px){ 
	#rc-imageselect, .g-recaptcha {
		transform:scale(0.77);
		-webkit-transform:scale(0.77);
		transform-origin:0 0;
		-webkit-transform-origin:0 0;
		} 
	}
	*/

	/* Search form */
	#search_box {width: auto !important;}

	.g-recaptcha div:first-child {
		width: 180px !important;
	}
	.g-recaptcha {
		transform: scale(0.9);
		-webkit-transform: scale(0.9);
		transform-origin: 0 0;
		-webkit-transform-origin: 0 0;
	}

	/* Nav list */
	.navlist li {
		float: none !important;
		text-align: center !important;
	}
	.navlist a {
		/*padding-left: 0  !important;
		background-image: none !important;*/
		text-decoration: underline !important;
	}
}

@media only screen and (min-width: 0px) and (max-width: 679px) {

	/* Sticky scroll box */
	.sticky-box {
		top: 80px !important;
		right: auto;
		left: 5px;
	}

	.sticky-box.stt {
		right: 6px !important;
		left: auto !important;
	}

	/* Enquiry button at top > colour (active) */
	.sticky-box.aqua-top, .sticky-box.orange-top,
	.sticky-box.red-top {
		top: 20px !important;
		right: auto;
		left: 5px;
	}

	.sticky-box .link-div {
		margin-top: 10px !important;
		margin-bottom: 10px !important;
	}

	/* Scroll to top */
	.sticky-box.stt {
		/*top: 80px !important;*/
	}
	.sticky-box.stt i:before {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	/* Jump menu */
	.jump-menu td.divider, 
	.jump-menu td.divider.aqua {
		border-right: 0 !important;
	}

	/* Boxes & containers */
	.feature-box {padding: 12px !important;}
	.feature-box.align-left {text-align: center !important;}

	.tile-container {
		width: auto !important;
		max-width: none !important;
	}

	.container-300, .container-600, .container-750, .container-900 {
		width: 100% !important; 
		margin: auto !important;
	}

	/* General */
	.align-left {text-align: center !important;}

	/* Responsive table styles */
	table.responsive, 
	table.responsive thead, 
	table.responsive tbody, 
	table.responsive tr, 
	table.responsive th,
	table.responsive td { 
		display: block;
		width: auto !important;
		text-align: center !important;
	}

	/* Center fields */
	table.responsive input, 
	table.responsive textarea, 
	table.responsive div, 
	table.responsive select
	{
		margin: 0 auto;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	table.responsive thead { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	table.responsive td { 
		/* Behave like a "row" */
		position: relative;
		/*border-right: 1px solid #FFF;
		border-top: 1px solid #FFF;
		/*min-width: 300px;*/
	}
	table.responsive td {
		/*border-right: 1px solid #FFF;
		border-top: 1px solid #FFF;*/
	}
	table.responsive td.padded {
		padding: 12px !important;
	}

	/* Not tested
	table.responsive.full-width {
		width: 100% !important;
	}
	table.responsive td.HeaderLeftOchreFlat,
	table.responsive td.HeaderRightOchreFlat {
		width: 9px !important;
	}
	table.responsive tr,
	table.responsive th,
	table.responsive td:not(.HeaderLeftOchreFlat) {
		width: 100% !important;
	}
	*/

	/* Grids only */
	table.resp-grid td { 
		padding-left: 50%; /* Grids */
	}
	table.resp-grid td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		padding-right: 10px; 
		white-space: nowrap;
		text-align: left;
	}
}