/* CUSTOM CSS Authored by Waldo van Wyk */
:root {
	--primary-yellow: #ffc20e;
	--primary-black: #000;
	--primary-dark-grey: #333333;
	--primary-light-grey: #cccccc;
}

@import url("https://fonts.googleapis.com/css2?family=Homemade+Apple&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");

@font-face {
	font-family: "open sans";
	src: url("https://fonts.googleapis.com/css2?family=Homemade+Apple&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
}

h1 {
	font-family: "open sans", sans-serif !important;
	font-size: 36px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
}

h2 {
	font-family: "open sans", sans-serif !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
}

h3 {
	font-family: "open sans", sans-serif !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
}

h4 {
	font-family: "open sans", sans-serif !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
}

h5 {
	font-family: "open sans", sans-serif !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
}

h6 {
	font-family: "open sans", sans-serif !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
}

.top-nav {
	background-color: #000;
	padding: 0px 80px;
	color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.top-nav a {
	color: #fff;
	padding: 0px 6px;
	text-decoration: none !important;
}

.top-nav a:hover {
	color: var(--primary-yellow);
}

.top-nav {
	font-size: 12px;
	font-weight: 100;
}

.socials {
	display: flex;
	margin: 0px 5px;
	list-style-type: none;
	padding: 5px 5px;
}

.top-nav .socials .icon {
	background-color: #fff;
	margin: 0px 5px !important;
	border-radius: 100%;
}

.top-nav .socials .icon a{
	margin-left: 0px !important;
}

.top-nav .socials .icon:hover {
	background-color: var(--primary-yellow);
}

.socials .icon a svg {
	fill: black;
	height: 25px;
	width: 25px;
	//background-color: #fff;
	padding: 6px;
	margin-top: 6px;
}

.bottom-footer {
	background-color: #000;
	padding: 10px 80px;
	color: #fff;
	display: flex;
	font-size: 12px;
	font-weight: 200;
	justify-content: center;
}

.bottom-footer span {
	margin: 0px 2px;
}

.bottom-footer a {
	color: #fff;
	text-decoration: none !important;
}

.bottom-footer a:hover {
	color: var(--primary-yellow);
}

.footer-details h5 {
	text-transform: uppercase;
	font-weight: 600;
	font-size: 15px;
	padding: 0 0 10px 0;
	margin: 20px 0 8px 0;
}

.footer-details p {
	font-weight: 200;
	font-size: 14px;
	margin: 0 30px 0 0;
}

.footer-details a {
	color: black;
	text-decoration: none !important;
}
.footer-details a:hover {
	text-decoration: underline !important;
}

@media screen and (max-width: 768px) {
	.devider {
		display: none;
	}
	.bottom-footer {
		flex-direction: column;
		align-items: center;
	}
}

.weblink a {
	font-family: "Open Sans", Helvetica, Arial, Lucida, sans-serif;
	color: var(--primary-black) !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	font-weight: 600 !important;
	font-size: 13px !important;
}

.weblink :hover {
	color: var(--primary-yellow) !important;
	text-decoration: none !important;
	background-color: transparent !important;
	transition: color 300ms ease 0ms;
}

.navbar-inverse .navbar-nav > li > a {
	color: var(--primary-black) !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
}

.navbar-inverse .navbar-nav > li > a:hover {
	color: var(--primary-yellow) !important;
	text-decoration: none !important;
	background-color: transparent !important;
}

.navbar-brand div div a img {
	height: 50px !important;
}

li
	> a[aria-label="Sign in"][aria-roledescription="link"][href="/SignIn?returnUrl=%2F"] {
	border: 1px solid var(--primary-black) !important;
	border-radius: 100px !important;
	font-size: 11px !important;
	background-color: white !important;
	color: var(--primary-black) !important;
	padding: 8px 17px !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	font-weight: 500 !important;
	margin-top: 6px !important;
}

li
	> a[aria-label="Sign in"][aria-roledescription="link"][href="/SignIn?returnUrl=%2F"]:hover {
	background-color: var(--primary-yellow) !important;
	border: 1px solid var(--primary-yellow) !important;
	color: var(--primary-black) !important;
	text-decoration: none !important;
	transition: all 300ms ease 0ms;
}

.spacer {
	height: 15px;
	width: 100%;
	background-color: var(--primary-yellow) !important;
}

.tab-title {
	border: none !important;
}

#WebResource_stx_google_maps_iframe {
	height: 500px !important;
}

#WebResource_Destination_Google_Map {
	height: 500px !important;
}

#pac-input {
	left: 10 !important;
	background-color: #fff;
	font-family: Roboto;
	font-size: 15px;
	font-weight: 300;
	text-overflow: hidden;
	z-index: 0;
	position: absolute;
	top: 60px !important;
	width: 250px !important;
	padding: 8px 8px !important;
	border: solid 1 rgb(133, 133, 133) !important;
	border-radius: 5px !important;
}

#destination-pac-input {
	left: 10 !important;
	background-color: #fff;
	font-family: Roboto;
	font-size: 15px;
	font-weight: 300;
	text-overflow: hidden;
	z-index: 0;
	position: absolute;
	top: 60px !important;
	width: 250px !important;
	padding: 8px 8px !important;
	border: solid 1 rgb(133, 133, 133) !important;
	border-radius: 5px !important;
}

@media screen and (max-width: 991px) {
	#pac-input {
		width: 250px !important;
	}

    #destination-pac-input {
		width: 250px !important;
	}
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
	#pac-input {
		width: 350px !important;
	}

    #destination-pac-input {
		width: 350px !important;
	}
}

@media (max-width: 1200px) {
	#pac-input {
		width: 450px !important;
	}
    #destination-pac-input {
		width: 450px !important;
	}
}

.button2,
.btn-default {
	color: black !important;
}

.navbar .navbar-inverse .navbar-static-top {
	background-color: #fff !important;
}

.btn-primary {
	color: white !important;
	background-color: #2a2c2e !important;
	border-color: #2a2c2e !important;
	border-radius: 2px;
	font-family: Arial;
	font-weight: 600;
	font-size: 14px;
	padding: 6px 20px;
	width: fit-content;
	border-style: solid;
}

.btn-primary:hover {
	color: #2a2c2e !important;
	background-color: white !important;
	border-color: #2a2c2e !important;
}
.btn-primary:active,
.btn-primary.active {
	color: #2a2c2e;
	background-color: #2a2c2e;
	border-color: #2a2c2e;
}
.btn-primary:active:hover,
.btn-primary:active:focus,
.btn-primary:active.focus,
.btn-primary.active:hover,
.btn-primary.active:focus,
.btn-primary.active.focus {
	color: #ffffff;
	background-color: #2a2c2e;
	border-color: #2a2c2e;
}
.btn-primary:focus,
.btn-primary.focus {
	color: #ffffff !important;
	background-color: #2a2c2e;
	border-color: #2a2c2e;
}

.navbar-toggle {
    background: transparent !important;
    border: 1px #ffffff !important;
    border-radius: 2px !important;
  }

.navbar-toggle:hover {
	background: #ffc20e !important;
	border: 1px #ffc20e !important;
}

.dropdown-menu {
    padding: 0px !important;
}

.username {
    font-size: 13px !important;
  }

  .weblinks {
    font-weight: 600 !important;
    border: none !important;
    background-color: transparent !important;
  }

  .navbar-inverse .navbar-nav .open .dropdown-menu {
    background-color: #464545e3 !important;
  }

  .navbar-inverse .navbar-nav > .open > a {
      color: #ffc20e !important;
      background-color: transparent !important;
      text-decoration: Underline;
  }

  #navbar > nav > ul > li.dropdown.open > a::after {
    border: none !important;
  }

  #navbar > nav > ul > li.dropdown.open > ul > li > a {
    background-color: transparent !important;
    margin-left: 0px !important;
    border:none !important;
    padding: 12px 20px !important;
  }

  #navbar > nav > ul > li.dropdown.open > ul > li > a:hover {
    background-color: #464545 !important;
    color: white !important;
    text-decoration: none !important;
  }

  #navbar > nav > ul > li.dropdown.open > ul > li.divider {
    background-color: #b4b4b4 !important;
    margin: 0px !important;
  }

  .navbar-static-top.navbar .menu-bar > .navbar-nav > li > a {
    font-weight: 600 !important;
  }

  #navbar > nav > ul > li > a:active {
    border:none !important;
    background-color: transparent !important;

  }

  #mainContent > div > div > div > div:nth-child(2) > div > div > div > div > div.view-toolbar.grid-actions.clearfix > div > div:nth-child(2) > a {
    background-color: transparent !important;
    color: #2A2C2E !important;
    border-radius: 25px;
    border: 1px solid white;
  }
  #mainContent > div > div > div > div:nth-child(2) > div > div > div > div > div.view-toolbar.grid-actions.clearfix > div > div:nth-child(2) > a:hover{
    background-color: #2A2C2E !important;
    color: white !important;
    border: 1px solid #2A2C2E;
  }

  #mainContent > div > div > div > div:nth-child(2) > div > div > div > div > div.view-toolbar.grid-actions.clearfix > div > div:nth-child(1) > a {
    background-color: white !important;
    color: #2A2C2E !important;
    border-radius: 25px;
    border: 1px solid #2A2C2E;
  }

  #mainContent > div > div > div > div:nth-child(2) > div > div > div > div > div.view-toolbar.grid-actions.clearfix > div > div:nth-child(1) > a:hover{
    background-color: #ffc20e !important;
    color: #2A2C2E !important;
    border: 1px solid #ffc20e;
  }