
  
  #agent-options-wrap {
	border: 2px solid black;
	padding: 1rem;
  }

  /* TESTING BUTTONS */
  #testing-wrap {
	margin: 2rem; 
	padding: 2rem; 
	border: 2px solid black;
  }

  #testing-wrap h3 {
	color: black;
  }

  #testing-wrap p {
	margin: 0;
  }

  .test-btn {
	display: inline-block;
	padding: 10px 20px;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	border: none;
	border-radius: 6px;
	transition: all 0.2s ease;
	background-color: grey; 
	color: #fff;
	margin: 10px 5px;
  }

  .test-btn.is-active {
	background-color: #6fb841; 
  }

  .test-btn:not(:disabled):hover {
	background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
	transform: translateY(-1px);
  }
  /* /TESTING BUTTONS */



  .ssid-tip {
	position: absolute;
	background: #efefef;
	border: 1px solid #efefef;
	padding: 1rem;
	border-radius: 1rem;
	bottom: 40px;
	width: 420px;
	max-width: 100%;
  }

  .ssid-tip-content {
	margin: 0;
  }

  .mobile-only {
	display: block;
  }

  @media(min-width: 992px) {
	.ssid-tip {
	  max-width: 175%;
	}
	.mobile-only {
	  display: none;
	}
  }

  section.checkout-section {
	scroll-margin-top: 140px;
  }

  .security-add-on-count {
	width: 50px;
  }

  #five-gig-flag {
	position: absolute;
	bottom: 100%;
	background: white;
	font-size: 16px;
	color: #1682c5;
	left: 0;
	right: 0;
	width: 100%;
	padding: 0.5rem;
	border: 1px solid #1682c5;
	border-top-left-radius: 2rem;
	border-top-right-radius: 2rem;
  }

  #five-gig-wrap {
	margin-top: 7rem;
  }

  @media(min-width: 1200px) {
	#five-gig-wrap {
	  margin-top: 0;
	}
  }

  #security-pin-wrap {
	position: relative;
  }

  .outdoor-wifi-top {
	margin-top: 1rem;
	background: #58ab2a;
	padding: 1rem;
  }

  .outdoor-wifi-top label {
	font-size: 16px;
	color: white;
  }

  .outdoor-wifi-top label .price { 
	font-weight: normal;
	font-size: 14px;
  }

  @media(min-width: 1200px) {
	.outdoor-wifi-top {
	  margin-top: 0;
	  margin-right: 41%;
	}
  }

  .input-visibility-toggle {
	position: absolute;
	right: 20px;
	top: 7px;
	background: none;
	border: none;
  }

  .input-visibility-toggle svg {
	fill: #999;
	width: 20px;
	max-width: 100%;
  }

  .gray100 {
	filter: grayscale(1);
  }

  .billing-error {
	background: #D32F2F;
	color: white;
	border-radius: 1rem;
	padding: 1rem;
	margin: 1rem;
  }

  .billing-error  svg {
	cursor: pointer;
	display: block;
	margin-left: auto;
	width: 12px;
	height: 12px;
	fill: white;
  }

  #popup-shop-link {
	display:none;
  }

  .PrintFriendly {
	min-height: 1000px;
  }

  #free-mywifi-img,
  #free-stream {
	max-width: 90%;
	object-fit: contain;
	margin: 2rem auto;
	height: 200px;
  }

  @media(min-width: 992px) {
	#free-mywifi-img,
	#free-stream {
	  margin: 0 auto;
	}
  }

  .light-border {
	border: 2px solid #efefef;
  }

  #loading,/* this has inline display: none*/
  #processing-indicator {
	background-color: white;
	width: 90%;
	max-width: 1100px;
	margin: 75px auto;
	padding: 40px 40px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 930px;
  }

  #loading .logo,
  #processing-indicator .logo {
	width: 350px;
	max-width: 90%;
	margin-bottom: 2rem;
  }

  #loading h2,
  #processing-indicator h2 {
	color: #1682c5;
	font-family: 'bebas_kairegular', sans-serif;
	font-size: 42px;
	margin: 2rem 0 1rem 0;
  }

  #loading .animation,
  #processing-indicator .animation {
	width: 100px;
  }

  /* processing indicator differences */
  #processing-indicator {
	height: auto;
	margin: 0 auto;
	width: 100%;
  }

  #do-more-banner {
	background: url('/Images/HomeSC/2023/shoptool/shoptool-header.png') no-repeat center top / cover;
	color: #fff;
	padding: 7% 25px 9%;
	display: none;
  }

  #do-more-banner h1 {
	font-family: 'Bebas Neue', sans-serif;
	color: #fff;
	font-size: 100px;
	line-height: .9em;
	text-transform: uppercase;
	margin: 0;
  }

  #do-more-banner p {
	font-family: 'Quasimoda', sans-serif;
	color: #fff;
	font-size: 25px;
	margin: 5px 5px;
	font-weight:300;
	margin: 0;
  }

  /* PROMO BOXES */
  /* individual promo boxes are included via lib item and contain their own styles */
  .promo-popup-row {
	margin: 1rem 0;
	padding: 4rem 2rem;
	background: white;
  }

  .promo-popup-row .col-md-6 {
	overflow: hidden;
  }

  .promo-popup-row .col-md-6:first-of-type {
	border-bottom: 2px solid #efefef;
	margin-bottom: 2rem;
	padding-bottom: 2rem;
  }

  .promo-popup-row .col-md-6.col-md-offset-3 {
	border: none;
  }

  .promo-popup-row .col-md-6 article {
	height: 100%;
	width: 100%;
	cursor: pointer;
  }

  .promo-popup-row .col-md-6 article p {
	margin: 0;
	font-size: 16px;
  }

  .promo-popup-row .col-md-6 article a {
	color: inherit;
  }

  .promo-popup-row .col-md-6 article a:hover {
	text-decoration: none;
  }

  .promo-popup-row .col-md-6 article .large {
	font-size: 18px;
  }

  .promo-popup-row .col-md-6 article .font-weight-normal {
	font-weight: normal;
  }

  .promo-popup-row .col-md-6 article .font-weight-bold {
	font-weight: bold;
  }

  @media(min-width: 992px) {
	.promo-popup-row .col-md-6:first-of-type {
	  border-bottom: none;
	  margin-bottom: 0;
	  padding-bottom: 0;
	  border-right: 2px solid #efefef;
	}

	.promo-popup-row .col-md-6.col-md-offset-3 {
	  border: none;
	}

	.promo-popup-row .col-md-6 article {
	  aspect-ratio: 16 / 6;
	}
  }

  #please-note {
	max-width: 600px;
	margin:0px auto 10px;

  }

  #shoptool-intro .container  {
	width: 756px;
	margin: 0 auto;
  }

  #shoptool-intro .spacer {
	margin-top: 50px;
  }

  .nowrap-shop-label-phone {
	float:none !important;
	font-weight:300 !important;
	white-space:nowrap;
  }

  @media screen and (max-width: 1200px) {
	#do-more-banner h1 {
	  font-size: 60px;
	}
	#do-more-banner p {
	  font-size: 16px;
	}
  }
  @media screen and (max-width: 992px) {
	#do-more-banner {
	  padding: 13% 15px;
	}
  }
  @media screen and (max-width: 767px) {
	#do-more-banner h1 {
	  font-size: 55px;
	}
	#do-more-banner p {
	  font-size: 15px;
	}
  }
  .bold-it {
	font-weight:600;
	font-style:italic;
  }
  .min-200 {
	min-height: 200px;
  }

  .min-180 {
	min-height: 180px;
  }

  .row.disclaimer {
	padding: 1rem 0;
  }

  .disclaimer-link {
	color: #333;
	cursor: pointer;
	text-align: right;
  }

  .video-disclaimer {
	text-align: right;
	z-index: 99999;
	position: relative;
	width: 100%;
	display: block;
	right: 35px;
	bottom: 50px;
  }

  #subtotal-disclaimer {
	position:relative;
	float:right;
	margin-right:10px;
  }

  .modal {
	z-index:99999;
  }
  .sm-ask {
	font-size: .6em;
	position: relative;
	top: -0.6em;
  }
  .custom-checkbox {
	display: block;
	position: relative;
	padding-left: 15px;
	margin-bottom: 15px;
	cursor: pointer;
	font-size: 20px;
  }

  .clear-address-btn {
	font-size: 6px;
	padding: 1px 2px;
	position: relative;
	top: -2px;
	color: black;
	line-height: normal;
	font-family: arial;
	border-radius: 8px;
	border: 0;
  }



  /* Creating a custom checkbox
  based on demand */
  .green-check {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	border-radius:25px;
	border:2px solid #999;
  }
  .green-check-text {
	width:92%;
	display:inline-block
  }
  /* Specify the background color to be
  shown when hovering over checkbox */
  .custom-checkbox:hover input ~ .green-check {
	background-color: #999;
  }


  /* Specify the background color to be
  shown when checkbox is checked */
  .custom-checkbox input:checked ~ .green-check {
	background-color: #999;
  }

  /* Checkmark to be shown in checkbox */
  /* It is not be shown when not checked */
  .green-check:after {
	content: "";
	position: absolute;
	display: none;
  }

  /* Display checkmark when checked */
  .custom-checkbox input:checked ~ .green-check:after {
	display: block;
  }
  /* Styling the checkmark using webkit */
  /* Rotated the rectangle by 45 degree and 
  showing only two border to make it look
  like a tickmark */
  .custom-checkbox .green-check:after {
	left: 8px;
	bottom: 5px;
	width: 6px;
	height: 12px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
  }


  #scroll-to-shop-tool {

	position: absolute;
	top: 0;
	left: 0;
	height: 10px;
	width: 100vw;

	/*
	position: relative;
	top: -100px;
	*/
  }

  .dsign {
	display: inline-block;
	font-size: 41px;
	font-style: normal;
  }



  /* BOTTOM BAR */
  #action-bar {
	position: fixed;
	bottom: 0;
	width: 100vw;
	z-index: 100;
	background: white;
  }

  #action-bar .content {
	display: flex;
	/*flex-direction: column;*/
	flex-wrap: wrap;
	justify-content: center;
	min-height: 120px;


	padding: 1rem 0;
	align-items: center;
	justify-content: center;
  }

  @media(min-width: 992px) {
	#action-bar .content {
	  flex-direction: row;
	  padding: 0;
	  justify-content: space-between;
	}

	#action-bar .content .green-btn {
	  margin: 0;
	}
  }

  #action-bar .content .green-btn {
	margin: 1rem;
	text-transform: none;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
  }

  #action-bar .address-wrap {
	display: flex;
  }

  #action-bar p.address {
	font-size: 20px;
	font-weight: 400;
  }

  #action-bar .clear-address-button {
	width: 24px;
	height: 24px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background-color: lightgray;
	margin-left: 1rem;
  }

  #action-bar .clear-address-button svg {
	width: 10px;
	height: 10px;
	fill: white;
  }


  #cart-toggle-button img {
	width: 30px;
	margin-right: 1rem;
  }

  #cart-toggle-button .chevron {
	fill: white;
	width: 15px;
	transition: all 1s;
  }

  #cart-toggle-button.open .chevron {
	transform: rotate(180deg);
  }


