
:root
{
	--footer-height: 3.8em;

	--color-hover-white: #e7e7e7;
	--color-hover-white: #fff;

	--color-white-05: #ffffffbb;

	--color-red: #c9302c;
}

html, body
{
	min-height: 100%;
	height: unset;
}

html
{
	position: relative;
}


footer.ps
{
	position: absolute;
	bottom: 0;
	width: 100%;
}


body
{
	margin-bottom: var(--footer-height) !important;
}
footer.ps
{
	height: var(--footer-height);
}

.navbar
{
	_position: fixed;
	_width: 100%;
	border: none;
}
.navbar-gap
{
	min-height: 50px;
}

html:not([data-scroll='0']) .navbar
{
	box-shadow: 0 0 12px 0 #000a;
}


.navbar li:hover > a
{
/* 
	color: #060 !important;
	background-color: #e7e7e7;
	 */
	 color: var(--color-hover-white) !important;
	 /* background-color: #060 !important; */
	 /* background-color: #006600ab  !important; */
	 background-color: #0609  !important;
 }

.navbar li.active > a
{
	/* color: #000 !important; */
	/* color: #0609  !important; */
	color: #006600c0  !important;
	background-color: #dbdbdb !important;
}


footer.section
{
	padding-bottom: 2em;
}


footer.ps
{
	background-color: #fff;
	color: #006600;
	padding: .6em;

	display: flex;
	justify-content: center;
}

div.ps
{
	display: flex;

	font-size: clamp(10px, 1.2vw, 1.2rem);  /* min: 10px, max: 1.2rem */
}

div.ps  .weaccept
{
	margin: 0;
	padding: 0;

	align-self: center;

	font-size: 1.7em;
	font-weight: bold;
	padding-right: .4em;
	padding-bottom: .25em;
}
div.ps  .weaccept:first-letter
{
	text-transform: capitalize;
}

div.ps  .weaccept::after
{
	content: ":";
}

div.ps  .icons
{
	display: flex;
	align-items: center;
}

div.ps  .icons > div
{
	flex-grow: 1;

	min-width: 30px;
	min-height: 20px;

	width:  4em;
	height: 3em;

	background-repeat: no-repeat;
	background-position: 50% 50%;
}

div.ps  .icons > div.aba
{
	background-image: url(../img/ps/aba.svg);
}
div.ps  .icons > div.jcb
{
	background-image: url(../img/ps/jcb.svg);
}
div.ps  .icons > div.mc
{
	background-image: url(../img/ps/mc.svg);
}
div.ps  .icons > div.up
{
	background-image: url(../img/ps/up.svg);
}
div.ps  .icons > div.visa
{
	background-image: url(../img/ps/visa.svg);

	margin-right: .25em;
}


.pjBsFormBody  div.ps
{
	margin-top: .5em;
}


/* Button */

.btn-book
{
	text-transform: uppercase;
}

/* Button at navbar */

.navbar  .btn-book
{
	_margin-left: 3.5em;
	_margin-left: 6.5em;
	_margin-left: 5.5em;
	margin-left: 5em;
}
@media (max-width: 1200px) and (min-width: 500px) {
	.navbar  .btn-book
	{
		_margin-left: calc(50% - 130px / 2 - 145px);
		_margin-left: calc(50% - 130px / 2 - 75px);
		margin-left: calc(50% - 130px / 2 - 62px);
	}
}
@media (max-width: 499px) {
	.navbar  .btn-book
	{
		_margin-left: calc(50% - 130px / 2 - 75px);
		margin-left: calc(50% - 130px / 2 - 77px);
	}
}


/* Form at navbar */

.navbar  .navbar-form
{
	margin-bottom: 0;
	margin-top: .75em;
  margin-left: 2em;
}
@media (max-width: 1200px) and (min-width: 500px) {
	.navbar  .navbar-form
	{
		margin-left: 0;
		margin-right: 0;
		padding: 0;
		border: 0;
	}
}
@media (max-width: 499px) {
	.navbar  .navbar-form
	{
		margin-left: 0;
		margin-right: 0;
		padding: 0;
		border: 0;
	}
}



/* Navbar Logo */

.navbar-brand
{
	background-image: url(../img/dynamicvan.jpg);
	background-color: transparent;
	background-size: 54%;
	background-repeat: no-repeat;
	background-position: 85% 5px;

	color: #060 !important;
	font-weight: bold;
	font-size: 1.2em;

	position:relative;
	top: -9px;
}

.navbar-brand span
{
	text-align: center;
}

.navbar-brand span.full
{
	display: block;
}
.navbar-brand span.shrt
{
	display: none;
}
@media (max-width: 499px) {
	.navbar-brand
	{
		background-image: none !important;
	}
	.navbar-brand span.full
	{
		display: none;
	}
	.navbar-brand span.shrt
	{
		display: block;
	}
}

/* Force small logo */
.navbar-brand
{
	background-image: none !important;
}
.navbar-brand span.full
{
	display: none;
}
.navbar-brand span.shrt
{
	display: block;
}



/* Bootstrap overrides */

	/* Bootstrap - Navbar */

	/* change collapse point */
@media (max-width: 1200px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none !important;
  }
  .navbar-nav {
      float: none !important;
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
}


.navbar-nav > li
{
	text-align: center;
}


@media (min-width: 768px) {
  .navbar-right {
    margin-right: 0;
  }
}


	/* Bootstrap - Table */

.table
{
}

.table-hover > tbody > tr:hover
{
	background-color: #f5f5f51f;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td
{
	border-color: #fc0;
	border-color: var(--color-white-05);
}


	/* Bootstrap - Anchor */

a,
a:active,
a:focus
{
	color: #3b8dd5;
	color: #3484c8;
}

a:hover
{
	text-decoration: none;

	color: #3c91db;
	color: #89c6fb;
	color: #fff;
}

	/* Bootstrap - Button */

.btn-danger
{
	/* original colors */
	--lighter-color: #d9534f;
	--darkker-color: #c9302c;

	/* switch original color */
	background-color: var(--darkker-color);
}
.btn-danger:hover
{
	background-color:	var(--lighter-color);
}

.btn-warning
{
	/* original colors */
	--lighter-color: #f0ad4e;
	--darkker-color: #ec971f;

	/* switch original color */
	background-color: var(--darkker-color);
}
.btn-warning:hover
{
	background-color:	var(--lighter-color);
}
.btn-warning,
.btn-warning:focus, .btn-warning.focus, .btn-warning:active, .btn-warning.active,.open > .dropdown-toggle.btn-warning
{
	color: var(--color-red);
}

.btn-danger:hover,
.btn-warning:hover
{
	color: var(--color-hover-white);
}


/* Table at 'schedule' page */

body.page-schedule  .table
{
}

body.page-schedule  .table  td  span
{
	white-space: nowrap;
}

body.page-schedule  .table  tr.o /* onward route */
{
	background-color: #007a00;
}

body.page-schedule  .table  tr.i /* inward route */
{
	background-color: #005e00;
}


body.page-schedule  .table  th  br
{
	display: none;
}
@media (max-width: 992px) {
	body.page-schedule  .table  th  br
	{
		display: inline;
	}
}

/* Button section */

/* Button at navbar */

.button-section
{
	display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
@media (max-width: 499px) {
	.button-section
	{
		flex-direction: column;
	}
}

.button-section > span
{
	padding: 1em;
}


.form-control
{
	border-color: #00bc00;
	border-color: #139113;
}

.soc
{
	background: scroll no-repeat;

	display: flex;
	gap: .75em;
	justify-content: center;
}
.navbar  .soc
{
	gap: .5em;
}

.soc  a
{
	--bg-grad-white: radial-gradient(ellipse at center, #fff 60%, transparent 60%);
	--bg-grad-green: radial-gradient(ellipse at center, #060 60%, transparent 60%);

	display: inline-block;
	width:  2em;
	height: 2em;
	background: scroll no-repeat 50% 50% / contain;
	background-image: var(--img-url), var(--bg-grad-green);
}
.soc  a:hover
{
	background-image: var(--img-url), var(--bg-grad-white);
}

.soc  .wa
{
	--img-url: url(../img/soc/wa.svg);
}
.soc  .tg
{
	--img-url: url(../img/soc/tg.svg);
}
.soc  .ln
{
	--img-url: url(../img/soc/ln.svg);
}
.soc  .sk
{
	--img-url: url(../img/soc/sk.svg);
}
.soc  .fb
{
	--img-url: url(../img/soc/fb.svg);
}

.soc.content  a
{
	width: 2.5em;
	height: 2.5em;
}



.cellop
{
	--image-url: ur();

	text-align: left;

	display: flex;
	-justify-content: space-between;
	gap: .5em;
	align-items: center;
	width: max-content;
	margin: 0 auto;
}


.cellop  i
{
	display: inline-block;
	width:  1.8em;
	height: 1.15em;

	-border: solid #139113 1px;
	border-radius: .2em .2em 0 .2em;

	text-align: center;

	clip-path: polygon(0px 0px, 0px 100%, 85% 100%, 100% 75%, 100% 0px);
}
.cellop  i:after
{
	content: "";
	display: inline-block;
	width:  90%;
	height: 90%;
	background: var(--image-url) scroll no-repeat transparent 50% 50% / contain;

	filter: grayscale(50%);
}

.cellop.cellop-landline
{
	--image-url: url(../img/cellops/landphone.svg);
}
.cellop.cellop-landline  i
{
	height: 1.15em;
}

.cellop.cellop-cellcard
{
	--image-url: url(../img/cellops/cellcard.png);
}
.cellop.cellop-cellcard  i
{
	background-color: #000;
}

.cellop.cellop-metfone
{
	--image-url: url(../img/cellops/metfone.png);
}
.cellop.cellop-metfone  i
{
	background-color: #fff;
}

.cellop.cellop-smart
{
	--image-url: url(../img/cellops/smart.svg);
}
.cellop.cellop-smart  i
{
	background-color: #009a3e;
}


.cellop  span.z:after
{
	content: "0";
	color: transparent;
}