:root {
	--navbar-height: 45px;
	--navbar-item-padding: 30px;
	--color-grey-light: #f8f9fa;
	--color-grey-dark: #ced4da;
	--color-green-light: #E3EADA;
	--color-green-medium: #D1E8C0;
	--color-green-dark: #0A5026;
	--color-white: #ffffff;
	--main-width: 1500px;
}

body {
	font-family: -apple-system, BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
	font-size: 15px;
	box-sizing: border-box; /* https://css-tricks.com/box-sizing/ */
	background-color: var(--color-grey-dark);
	color: var(--color-green-dark);
}


*, *:before, *:after { /* https://css-tricks.com/box-sizing/ */
  box-sizing: inherit;
}

/* display: flow-root => if not used the margin collapsed and the last element (example the contactus form on CNA site) ends up with no bottom margin) https://www.smashingmagazine.com/2019/07/margins-in-css/  and https://www.smashingmagazine.com//2017/12/understanding-css-layout-block-formatting-context/   */
.main {display: flow-root; max-width:var(--main-width);margin-left:auto;margin-right:auto;background-color: var(--color-white);min-height: 100vh;}

.h1 {
	font-size: 2.5rem;
	font-weight: 500;
}
.h2 {font-size:2rem;font-weight: 500;}
.h3 {font-size:1.75rem;font-weight: 500;}
.h4 {font-size:1.5rem;font-weight: 500;}
.h5 {font-size:1.25rem;font-weight: 500;}
.h6 {font-size:1rem;font-weight: 500;}

/* .overlay { position: fixed;   top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: rgba(0,0,0,0.5);z-index:20;} */

a {color: #0068d6;text-decoration: none;background-color: transparent;}
a:hover {text-decoration: underline;}

table {border-collapse: collapse;padding: .3rem;line-height: 1.5;table-layout: fixed; margin-left:auto; margin-right:auto; }
th , td {padding: .3rem;}
td {overflow:hidden;text-overflow: ellipsis;white-space: nowrap}
td.overflow-visible {overflow: visible;	white-space: normal	}

img.responsive {
	max-width: 100%;
	height: auto;
}

form {
	padding-top:15px;
	padding-left:15px;
	padding-right:15px;
    background-color: var(--color-grey-light);
    border: 1px solid var(--color-grey-dark);
    border-radius: .25rem;
}

.form-container {padding-left:10px;	padding-right:10px; margin-left:auto;margin-right:auto;margin-bottom:20px;}

.navbar {
	background-color: var(--color-grey-light);
	position: fixed;
	top: 0;
	width: 100%;
	max-width: var(--main-width);
	display: flex;
	border-bottom: 1px solid var(--color-grey-dark);
	z-index: 10;
}

.header-text {
	position: absolute;
	left: 3%;
	font-weight: bold;
	color: var(--color-green-dark);
}

@media only screen and (max-width: 875px) {
	.header-text-ls {display: none}
	.header-text {top: 15px;}
	.header-text1 {font-size:clamp(20px, 3.5vw, 28px);display: block; }
    .header-text2 {font-size:clamp(15px, 2.5vw, 20px);display: block;margin-top: 12px;}
	}

@media only screen and (min-width: 875px) {
	.header-text-ss {	display: none}
	.header-text {top: 30px;	}
	.header-text1 {font-size:clamp(20px, 2.23vw, 28px);display: block}
    .header-text2 {font-size:clamp(15px, 1.7vw, 20px);display: block;margin-top: 30px;}
}

.navbar + * {margin-top:var(--navbar-height)} /* Move down the first sibbling after the navbar by the height of the navbar */

.navbar-hamburger {display:none;cursor: pointer;}
.navbar-item , .navbar-hamburger , .navbar-dropdown-header {line-height:var(--navbar-height);padding-left:var(--navbar-item-padding);padding-right:var(--navbar-item-padding);background-color: var(--color-grey-light)}
.navbar-dropdown-header {cursor: pointer;}
.navbar a {color: black;  text-decoration: none;}
.navbar-item:hover , .navbar-dropdown-header:hover {  background: var(--color-grey-dark);}
.navbar-dropdown-items {display:none; position:absolute;top:var(--navbar-height); border: 1px solid var(--color-grey-dark);} 
.navbar-active {background: var(--color-grey-dark);}
.navbar-dropdown-flags , .navbar-item.align-right { margin-left: auto;}  /* https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties#33856609 */
.navbar-dropdown-flags img {width:40px;vertical-align: middle;}

@media (hover: hover) { /*To make sure it's ignored on touchscreen. Instead the click will be used */
	.navbar-dropdown:hover > .navbar-dropdown-items , .navbar-dropdown-flags:hover > .navbar-dropdown-items { display:flex;flex-direction:column }
}

/*The max-width will depends on each site as it depends on the width of the navbar */
/*if we want it to be javascript driven in the future check: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_matchmedia*/
@media only screen and (max-width: 550px) {
	.navbar {flex-direction:column;}
	.navbar-hamburger:not(.clicked) ~ div {display:none}
	.navbar-hamburger {display:block;font-size:35px} 
	.navbar-dropdown-header.clicked + .navbar-dropdown-items { display:flex;flex-direction:column }
	.navbar-dropdown-items {position:static;}
	.navbar-dropdown-items > .navbar-item {padding-left:calc(var(--navbar-item-padding)*2);padding-right:0px}
	.navbar-dropdown-flags {margin-left: 0;} 
}

@media print {
	body {font-size: 9pt; filter: grayscale(100%);	}	/*so that it's black & white*/  
	.hide-print {display: none;	}
	.row-flex.hide-print {display: none; }
}

.table-bordered td, .table-bordered th {  border: 1px solid #dee2e6;}
.table-striped tr:nth-child(odd) {background-color: rgba(0,0,0,.05);} 
.table-hover tbody tr:hover {background-color: var(--color-grey-dark);}
.table-hover tbody td:hover {filter:brightness(1.2);border-color:white}
table > caption > .caption-left {float:left}
table > caption > .caption-right {float:right}

.hide {display:none}
.text-small-90 {font-size: 90%;}
.text-small {font-size: 80%;}
.text-center {text-align:center;}
.text-right {text-align:right;}
.text-justify {text-align:justify;}
.text-bold {font-weight:bold;}
.text-italic {font-style: italic;}
.text-underline {text-decoration: underline;}
.text-highlight {background-color: #FFFF00;}
.text-line-through {text-decoration: line-through;}

.overflow-auto {overflow: auto;}

.break-spaces {white-space: break-spaces}

.centerparent {
	margin-left: auto;
	margin-right: auto;
}

abbr.required {text-decoration:none; }

.h-40 {height: 40px}
.h-60 {height:60px}
.h-80 {height:80px}
.h-100 {height:100px}
.h-120 {height:120px}
.h-140 {height:140px}
.h-160 {height:160px}
.h-180 {height:180px}
.h-200 {height:200px}
.h-220 {height:220px}
.h-240 {height:240px}
.h-260 {height:260px}
.h-280 {height:280px}
.h-300 {height:300px}
.h-400 {height:400px}
.h-500 {height:500px}
.h-600 {height:600px}
.h-700 {height:700px}
.h-800 {height:800px}
.h-900 {height:900px}

.h-20vh {height:20vh}
.h-55vh {height:55vh}

.maxh-20vh {max-height:20vh} 
.maxh-55vh {max-height:55vh}

.w-15 {width:15px}
.w-20 {width:20px}
.w-25 {width:25px}
.w-27 {width:27px}
.w-30 {width:30px}
.w-40 {width:40px}
.w-50 {width:50px}
.w-60 {width:60px}
.w-80 {width:80px}
.w-90 {width:90px}
.w-100 {width:100px}
.w-120 {width:120px}
.w-130 {width:130px}
.w-140 {width:140px}
.w-150 {width:150px}
.w-160 {width:160px}
.w-170 {width:170px}
.w-200 {width:200px}
.w-300 {width:300px}
.w-400 {width:400px}
.w-500 {width:500px}
.w-600 {width:600px}

.flex-grow-1 {flex-grow:1;}
.flex-550 {flex-basis: 550px;}

.w-30p {width:30%}
.w-70p {width:70%}
.w-100p {width:100%}
.w-fit-content {width: fit-content}

.maxw-150 {max-width:150px}
.maxw-560 {max-width:560px}
.maxw-700 {max-width:700px}
.maxw-800 {max-width:800px}
.maxw-850 {max-width:850px}
.maxw-870 {max-width:870px}
.maxw-880 {max-width:880px}
.maxw-890 {max-width:890px}
.maxw-900 {max-width:900px}
.maxw-950 {max-width: 950px}
.maxw-1000 {max-width:1000px}
.maxw-1100 {max-width:1100px}
.opacity-08 {opacity: 0.8;}
.mb-10 {margin-bottom: 10px;}
.mb-15 {margin-bottom: 15px;}
.mb-20 {margin-bottom: 20px;}
.mb-50 {margin-bottom: 50px;}
.mb-100 {margin-bottom: 100px;}
.mt-10 {margin-top: 10px;}
.mt-15 {margin-top: 15px;}
.mt-20 {margin-top: 20px;}
.mt-30 {margin-top: 30px;}
.mt-40 {margin-top: 40px;}
.mt-50 {margin-top: 50px;}
.mt-60 {margin-top: 60px;}
.mr-50 {margin-right: 50px;}
.ml-5 {margin-left: 5px;}
.ml-15 {margin-left: 15px;}
.ml-20 {margin-left: 20px;}
.ml-30 {margin-left: 30px;}
.my-20 {margin-top: 20px;margin-bottom: 20px;}
.my-30 {margin-top: 30px;margin-bottom: 30px;}
.mx-10 {margin-left: 10px;margin-right: 10px;}
.mx-20 {margin-left: 20px;margin-right: 20px;}

.pt-20 {padding-top: 20px;}
.pr-10 {padding-right:10px}
.pr-20 {padding-right: 20px;}
.px-20 {padding-left: 20px;padding-right: 20px;}
.py-20 {padding-top: 20px;padding-bottom: 20px;}
.p-20 {padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px;}

.spinner {text-align:center;padding-top:5px;padding-bottom:5px;} 

.repeater-pagination {text-align:center;margin-bottom:20px;} 
.repeater-transition {animation-name: repeater-transition-color; animation-duration: 5s;}

/* https://lea.verou.me/2012/12/animations-with-one-keyframe/ If a 100% or “to” keyframe is not specified, then the user agent constructs a 100% keyframe using the computed values of the properties being animated.*/
@keyframes repeater-transition-color {
  from {background-color: #ffff99;} 
 }

.row-flex { display: flex; 	margin-bottom:20px;}
.row-flex.hide {display: none;}
.row-flex.flex-center {justify-content: center;}
.row-flex.flex-end {justify-content: flex-end;}
.row-flex.flex-col-gap-10 {column-gap: 10px;}
.row-flex.flex-col-gap-30 {column-gap: 30px;}
.row-flex.flex-col-gap-40 {column-gap: 40px;}
.row-header {padding-left: 20px;padding-right: 20px;margin-bottom:15px;}
.row-text {line-height:1.7;padding-left: 20px;padding-right: 20px;margin-bottom:20px}
.row-parallax {background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;margin-bottom:20px;}

.cell  {
	display: flex;
	flex-direction: column;
}

.cell.hide {display: none;}

.cell label:not(.font-weight-normal) {font-weight:bold;}
.cell select  {height: calc(2.25rem + 2px);}
.cell textarea {height:100%}

.cell-header {min-height:25px;}

.cell-body input:not([type="image"]), .cell-body textarea, .cell-body select, .cell-body button, .cell-body.stripe-card {
	padding: .375rem .75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-style: solid;
	border-width: 1px;
	border-radius: .25rem;
	outline: none;
}

.cell-body input:not([type="image"]), .cell-body textarea, .cell-body select, .cell-body.stripe-card {
	color: #495057;
	border-color: var(--color-grey-dark);
}

.cell-body input:not([type="image"]), .cell-body textarea, .cell-body select:not(.fit-content), .cell-body.stripe-card {
	width: 100%;
}

.cell-body input[readonly] {background-color:#e9ecef;}

.stripe-card {
	background-color: white;
}

.cell-body-text {font-size: 1rem;  font-weight: 400;line-height: 1.5; text-align:justify}

/*card-1 used for reviews for CNA*/
.cell.card-1 {
	padding: .375rem .75rem;
    background-color: var(--color-grey-light);
    border: 1px solid var(--color-grey-dark);
    border-radius: .25rem;
	margin-left:10px;
	margin-right:10px;
	width:100%;
}

.cell.card-1 > .cell-header {font-weight: 500;}
.cell.card-1 > .cell-body {font-size: 1rem;   font-weight: 400;line-height: 1.5; text-align:justify}
.cell.card-1 > .cell-footer {margin-top:0.5rem;font-size: 80%;color: #6c757d;}

/*card-2 used for invalid payment request for CNA*/
.cell.card-2 {
	background-color: var(--color-grey-light);
	border: 1px solid var(--color-grey-dark);
	border-radius: .25rem;
	margin-left: 10px;
	margin-right: 10px
}

.cell.card-2 > .cell-header {padding: .75rem .75rem 2rem .75rem; font-size:1.5rem; line-height:1.5;   font-weight: 500; text-align:center; }
.cell.card-2 > .cell-body {	padding: .75rem; font-size: 1rem;font-weight: 400;line-height: 1.5;	text-align: center;	}
.cell.card-2 > .cell-footer {margin-top: 0.5rem;font-size: 80%;	color: #6c757d;	}

/*card-3 used for UpcomingBookingList*/
.cell.card-3 {
	padding: .375rem .75rem;
	border: 1px solid var(--color-grey-dark);
	border-radius: .25rem;
	margin-left: 10px;
	margin-right: 10px;
	width: 100%;
}

.cell.card-3 > .cell-header {font-weight: bold;	}
.cell.card-3 > .cell-body {font-size: 1rem;font-weight: 400;line-height: 1.5;text-align: justify}

input:focus, textarea:focus, select:focus {
	box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	border: 1px solid rgba(81, 203, 238, 1);
}

.btn {display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}
.btn:hover { cursor: pointer;filter:brightness(1.2);}
.btn:disabled {border: 1px solid #999999; background-color: #cccccc;color: #666666;	}

/* https://alistapart.com/article/creating-intrinsic-ratios-for-video/ */
.iframe-16by9 {position: relative;padding-top: 56.25%;}
.iframe-16by9 > iframe {position: absolute;top: 0; left: 0;width:100%;height:100%;border:0}

.text-color-primary {color: #0d6efd;}
.text-color-danger {color: #dc3545;}
.text-color-histo, .text-color-histo a {color: #848687;}

.color-primary, .color-primary a {color: #fff; background-color: #0d6efd; border-color: #0d6efd;}
.color-secondary, .color-secondary a {color: #fff;  background-color: #6c757d;  border-color: #6c757d;}
.color-success, .color-success a {color: #007bff; background-color: #c3e6cb; border-color: #c3e6cb;}
.color-danger, .color-danger a {color: #007bff;  background-color: #f5c6cb; border-color: #f5c6cb;}
.color-warning, .color-warning a {color: #007bff;  background-color: #ffeeba;  border-color: #ffeeba;}
.color-info, .color-info a {color: #007bff; background-color: #bee5eb; border-color: #bee5eb;}


@media only screen and (max-width: 699px) {
	
    .form-container {max-width: 540px;}
	.row-flex {	flex-direction:column;}
		
	.cell:not(:last-child)  {margin-bottom:20px}
	.row-flex.flex-center {flex-direction:row;}
	.row-flex.flex-center .cell:not(:last-child) {margin-right:10px}
	/* .row-parallax { background-attachment: scroll;} */
	
	.ss-hide {display:none}

	.ss-mt-20 {margin-top: 20px;}
	.ss-mr-20 {margin-right: 20px;}
	.ss-mx-20 {margin-left: 20px;margin-right: 20px;}
	
	.ss-h-400 {height:400px}

}


@media only screen and (min-width: 700px)  {

	/* body {	max-width: 1000px;margin-left:auto; margin-right:auto;} */
	.cell:not(:last-child)  {margin-right:10px}

	.ls-hide {display:none}

		/* https://mastery.games/post/the-difference-between-width-and-flex-basis/ */
	.ls-flex-40 {flex-basis: 40px}
	.ls-flex-60 {flex-basis: 60px}
	.ls-flex-80 {flex-basis: 80px}
	.ls-flex-90 {flex-basis: 90px}
	.ls-flex-100 {flex-basis: 100px}
	.ls-flex-120 {flex-basis: 120px}
    .ls-flex-140 {flex-basis: 140px}
	.ls-flex-160 {flex-basis: 160px}
	.ls-flex-180 {flex-basis: 180px}
	.ls-flex-200 {flex-basis: 200px}
	.ls-flex-220 {flex-basis: 220px}
	.ls-flex-240 {flex-basis: 240px}
	.ls-flex-260 {flex-basis: 260px}
	.ls-flex-280 {flex-basis: 280px}
	.ls-flex-300 {flex-basis: 300px}
	.ls-flex-320 {flex-basis: 320px}
	.ls-flex-340 {flex-basis: 340px}
	.ls-flex-360 {flex-basis: 360px}
	.ls-flex-380 {flex-basis: 380px}
	.ls-flex-400 {flex-basis: 400px}
	.ls-flex-420 {flex-basis: 420px}
	.ls-flex-430 {flex-basis: 430px}
	.ls-flex-440 {flex-basis: 440px}
	.ls-flex-460 {flex-basis: 460px}
	.ls-flex-480 {flex-basis: 480px}
	.ls-flex-500 {flex-basis: 500px}
	.ls-flex-600 {flex-basis: 600px}
	.ls-flex-700 {flex-basis: 700px}
	.ls-flex-800 {flex-basis: 800px}
	.ls-flex-870 {flex-basis: 870px}
	.ls-flex-950 {flex-basis: 950px}
	.ls-flex-1000 {flex-basis: 1000px}
	.ls-flex-1200 {flex-basis: 1200px}
	
	.ls-flex-grow-1 {flex-grow:1;}
	
	.ls-minw-40 {min-width: 40px}
	.ls-minw-60 {min-width: 60px}
	.ls-minw-80 {min-width: 80px}
	.ls-minw-100 {min-width: 100px}
	.ls-minw-120 {min-width: 120px}
    .ls-minw-140 {min-width: 140px}
	.ls-minw-160 {min-width: 160px}
	.ls-minw-180 {min-width: 180px}
	.ls-minw-200 {min-width: 200px}
	.ls-minw-220 {min-width: 220px}
	.ls-minw-240 {min-width: 240px}
	.ls-minw-260 {min-width: 260px}
	.ls-minw-280 {min-width: 280px}
	.ls-minw-300 {min-width: 300px}
	.ls-minw-320 {min-width: 320px}
	.ls-minw-340 {min-width: 340px}
	.ls-minw-360 {min-width: 360px}
	.ls-minw-380 {min-width: 380px}
	.ls-minw-400 {min-width: 400px}
	.ls-minw-420 {min-width: 420px}
	.ls-minw-440 {min-width: 440px}
	.ls-minw-460 {min-width: 460px}
	.ls-minw-480 {min-width: 480px}
	.ls-minw-500 {min-width: 500px}

	.ls-maxw-300 {max-width:300px}
	.ls-maxw-400 {max-width:400px}
	.ls-maxw-500 {max-width:500px}
	.ls-maxw-550 {max-width:550px}
	.ls-maxw-600 {max-width:600px}
	.ls-maxw-650 {max-width:650px}
	.ls-maxw-700 {max-width:700px}
	.ls-maxw-800 {max-width:800px}
	.ls-maxw-870 {max-width:870px}
	.ls-maxw-950 {max-width:950px}
	.ls-maxw-1000 {max-width:1000px}
	
	.ls-mt-50 {margin-top: 50px;}
	.ls-mr-50 {margin-right: 50px;}
	
	.ls-h-800 {height:800px}
}