.faq-order-list {
  list-style: none;
  counter-reset: item;
}

  .faq-order-list li {
	counter-increment: item;
	margin-bottom: 5px;
  }

	.faq-order-list li:before {
	  margin-right: 10px;
	  content: counter(item);
	  background: #0077C8;
	  border-radius: 100%;
	  color: white;
	  width: 21px;
	  text-align: center;
	  display: inline-block;
	  height: 21px;
	}

.blurred::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px); /* apply the blur */
  pointer-events: none; /* make the overlay click-through */
}

.blurred {
  position: relative;
  background: no-repeat center center;
  background-size: cover;
}

.gps-demo-text {
  position: absolute;
  z-index: 100;
  background: white;
  padding: 17px;
  border-radius: 12px;
  text-align: center;
  top: 68%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@font-face {
  font-family: 'Aptos';
  src: url('/fonts/Aptos Fonts/Aptos-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aptos';
  src: url('/fonts/Aptos Fonts/Aptos-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aptos';
  src: url('/fonts/Aptos Fonts/Aptos.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aptos Mono';
  src: url('/fonts/Aptos Fonts/Aptos-Mono.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aptos Mono';
  src: url('/fonts/Aptos Fonts/Aptos-Mono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* 
	ONBOARDING CSS START
*/
#dvOnboardingModal p {
  font-weight: 400;
}

#dvOnboardingModal .card-header {
  background: #fff;
  border: none;
}

.custom-control.form-check-inline {
  display: inline-flex !important;
}

.successful-requirement {
  color: #0b8316;
}

.password-requirement-icon {
  min-width: 25px;
}

p.bold {
  font-weight: 500 !important;
}

.btn-next,
.btn-back {
  width: 225px;
}

#dvOnboardingModal .btn-skip-guide {
  width: 125px;
}

.btn.btn-back,
#dvOnboardingModal .btn-skip-guide {
  border: none;
  font-weight: 600 !important;
}

  .btn.btn-back:hover,
  #dvOnboardingModal .btn-skip-guide:hover {
	border: none;
	background: #E8F0FE !important;
	color: #004F71 !important;
	font-weight: 600 !important;
  }

.onboarding-nav {
  text-align: right;
  margin-top: 40px;
}

.link-card {
  border: 1px solid #E2E4E9;
  border-radius: 12px;
  padding: 1.25rem;
  color: #545454;
  background-color: white;
  height: 100%;
  align-content: center;
}

  .link-card i {
	font-size: 17px;
  }

  .link-card span {
	font-size: 13px;
  }

  .link-card:hover {
	text-decoration: none;
	background-color: #E8F0FE;
  }

.modal-fit-content {
  max-width: fit-content;
}

.device-icon {
  max-width: 60px;
  height: 60px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  margin: 0px 0px 25px 0px;
}

.result-image-icon {
  width: 100% !important;
  height: 100px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  border-radius: 8px;
}

.device-item {
  border: solid 2px;
  border-radius: 15px;
  border-color: #004F7133;
  height: 183px;
  width: 300px;
  max-width: 100%;
}

  .device-item span {
	font-weight: 600 !important;
	color: #01547D;
	font-size: 16px;
  }

  .device-item:hover {
	text-decoration: none;
  }


.registered-device {
  border: solid 2px;
  border-radius: 15px;
  border-color: #004F7133;
  max-width: 100%;
  color: #000;
}

  .registered-device:hover {
	text-decoration: none;
	background-color: #E8F0FE;
	cursor: pointer;
	color: #000;
  }

.device-image {
  height: 183px;
  width: 836px;
  background: url(/images/devices/lumiso-device.png) #E8F0FE;
  background-size: cover;
  background-position-y: -60px;
  border-radius: 8px;
}

.kemio-image {
  background: url(/images/devices/kemio-device.png) #E8F0FE;
  background-size: cover;
  background-position-y: -91px;
}

.compact-image {
  background: url(/images/devices/lumiso-device.png) #E8F0FE;
  background-size: cover;
  background-position-y: -60px;
}

.expert-image {
  background: url(/images/devices/expert-device.png) #E8F0FE;
  background-size: cover;
  background-position-y: -27px;
}

.turbidity-image {
  background: url(/images/devices/turbidity-device.png) #E8F0FE;
  background-size: cover;
  background-position-y: -27px;
}

.sim-verification {
  position: fixed;
  bottom: 20px;
  right: 20px;
}


/* 
	ONBOARDING CSS END
*/

.text-muted {
  color: #979797 !important;
}

.text-muted-light {
  color: #BEC0C1 !important;
}
/*progressbar*/
#progressbar {
  margin-bottom: 30px;
  overflow: hidden;
  color: lightgrey;
  text-align: center;
}

  #progressbar .complete {
	color: #000000;
  }

  #progressbar .active {
	color: #004f70;
	font-weight: 500;
  }

  #progressbar li {
	list-style-type: none;
	font-size: 12px;
	width: 15%;
	float: left;
	position: relative;
  }

	/*Icons in the ProgressBar*/
	#progressbar li:before {
	  position: relative;
	}

  #progressbar .check-icon:before {
	font-family: FontAwesome;
	content: "\f00c";
  }

  #progressbar #personal:before {
	font-family: FontAwesome;
	content: "\f007";
  }

  #progressbar #payment:before {
	font-family: FontAwesome;
	content: "\f09d";
  }

  #progressbar #confirm:before {
	font-family: FontAwesome;
	content: "\f00c";
  }

  /*ProgressBar before any progress*/
  #progressbar li:before {
	width: 35px;
	height: 35px;
	line-height: 30px;
	display: block;
	font-size: 18px;
	color: #e9eaeb;
	background: #e9eaeb;
	border-radius: 50%;
	margin: 0 auto 10px auto;
	padding: 2px;
	border: 2px solid lightgray;
  }

  /*ProgressBar connectors*/
  #progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: lightgray;
	position: absolute;
	left: 0;
	top: 18px;
	z-index: -1;
  }

  /*Color number of the step and the connector before it*/
  #progressbar li.active:before,
  #progressbar li.complete:before,
  #progressbar li.active:after,
  #progressbar li.complete:after {
	background: #004f70;
	border-color: #004f70;
  }

  #progressbar li.active:before,
  #progressbar li.active:after {
	color: #004f70;
  }

  #progressbar li:before {
	z-index: 10;
  }

  #progressbar li:after {
	z-index: 4;
  }

.tour {
  opacity: 100 !important;
}

.location-container > .card-body {
  background: #e9eaeb;
}

.group-container > .card-body {
  background: #f8f9f9;
}

.text-black {
  color: black;
}

.alert-filter {
  border-color: #bec0c1;
  background: #bec0c1;
}

.swal2-popup {
  border-radius: 35px;
}

.badge {
  border-radius: 35px;
}

.table thead {
  height: 50px;
}

  .table thead tr th {
	border-top: none;
  }

.pagination .page-item:first-child .page-link {
  border-radius: 35px 0 0 35px;
}

.dropdown-item.active, .dropdown-item:active {
  background-color: #004f70;
}

.pagination .page-item:last-child .page-link {
  border-radius: 0 35px 35px 0;
}

.table th {
  font-weight: 500 !important;
}

.pagination {
  margin: 0;
}

.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #004f70;
  border-color: #004f70;
  border: none;
}
/*

  Admin Dashboard Icons

*/
.sidebar-icon-only .nav-badge {
  position: absolute;
  left: 40px;
  margin-top: 7px;
}

.nav-badge {
  position: absolute;
  left: 50px;
  margin-top: 7px;
}

.dashboard-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.circular-icon {
  background: lightseagreen;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  text-align: center;
  line-height: 100px;
  vertical-align: middle;
  padding: 0px;
  font-size: 50px;
  color: rgba(255, 255, 255, 0.7);
}

a.card-body {
  text-decoration: none;
}

.circular-icon-red {
  background: linear-gradient(120deg, red, #ff5959, red);
}

.card-body:hover > .circular-icon-red {
  background: linear-gradient(120deg, red, red, red);
}

.circular-icon-pt {
  background: linear-gradient(120deg, #004f70, #0076a7, #004f70);
}

.card-body:hover > .circular-icon-pt {
  background: linear-gradient(120deg, #004f70, #004f70, #004f70);
}

.circular-icon-orange {
  background: linear-gradient(120deg, orange, #ffc761, orange);
}

.card-body:hover > .circular-icon-orange {
  background: linear-gradient(120deg, orange, orange, orange);
}

.circular-icon-light-green {
  background: linear-gradient(120deg, #bcbc00, #e0e000, #bcbc00);
}

.card-body:hover > .circular-icon-light-green {
  background: linear-gradient(120deg, #bcbc00, #bcbc00, #bcbc00);
}

.circular-icon-green {
  background: linear-gradient(120deg, green, #00a800, green);
}

.card-body:hover > .circular-icon-green {
  background: linear-gradient(120deg, green, green, green);
}

.circular-icon-light-blue {
  background: linear-gradient(120deg, lightseagreen, #28d4ca, lightseagreen);
}

.card-body:hover > .circular-icon-light-blue {
  background: linear-gradient(120deg, lightseagreen, lightseagreen, lightseagreen);
}

.circular-icon-blue {
  background: linear-gradient(120deg, dodgerblue, #69b5ff, dodgerblue );
}

.card-body:hover > .circular-icon-blue {
  background: linear-gradient(120deg, dodgerblue, dodgerblue, dodgerblue );
}


.motd-alert {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  background: white !important;
  color: #004F71;
  font-weight: bold;
  border-width: 3px;
  padding-right: 40px;
}

#windows-download-icon {
  background: #000;
  border-radius: 10px;
  border: #a6a6a6 1px solid;
  color: #fff !important;
}

  #windows-download-icon a {
	display: flex;
	color: #fff;
	padding: 5px 14px;
	text-decoration: none;
  }

  #windows-download-icon i {
	font-size: 34px;
  }

  #windows-download-icon .windows-content {
	margin-left: 15px;
	text-align: left;
  }

  #windows-download-icon .windows-text {
	font-size: 22px;
	line-height: 1;
  }



h1, h2, h3, h4, h5, label, .card-header, .breadcrumb, a, th, small, .btn, span {
  font-family: 'Aptos', sans-serif;
  font-weight: 400;
}

h1 {
  font-size: 25px;
}

input::placeholder {
  font-family: 'Aptos', sans-serif;
}

.alert {
  border-radius: 35px;
  border: none;
}

.custom-control-input:checked ~ .custom-control-label::before {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  border: none;
}

.custom-control-label::after {
  top: 0.18rem;
  left: -1.6rem;
  width: 1.4rem;
  height: 1.4rem;
}

.input-group-prepend .input-group-text {
  border-radius: 35px 0px 0px 35px !important;
  border: none;
}

.input-group-append .input-group-text {
  border: none;
  border-radius: 0px 35px 35px 0px;
  color: #828B99;
}

.custom-control-label {
  padding-top: 3px;
  padding-left: 5px;
}

.custom-checkbox .custom-control-label::before {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background-color: #e9e9eb;
  border: none;
}

.custom-checkbox .custom-control-label.custom-control-label-empty::before {
  top: 0px;
}

.custom-checkbox .custom-control-label.custom-control-label-empty::after {
  top: 0px;
}

p {
  font-family: 'Aptos', sans-serif !important;
  font-weight: 300;
}

label {
  font-family: 'Aptos', sans-serif !important;
  font-weight: 400;
}

body {
  font-family: 'Aptos', sans-serif;
}

.fa, .far, .fas {
  font-family: "Font Awesome 5 Free" !important;
}

.modal-header {
  border-radius: 16.5px 16.5px 0 0;
}

.modal-body {
  padding: 1.5rem 2rem 0.5rem 2rem;
}

.modal-footer {
  border-radius: 0 0 16.5px 16.5px;
  background: #FFFFFF;
  border: none;
}

.modal-content {
  border-radius: 16.8px;
  border: none;
  box-shadow: 0px 1.4px 2.8px 0px #0000001A, 0px 5.6px 5.6px 0px #00000017, 0px 11.9px 7px 0px #0000000D, 0px 21px 8.4px 0px #00000003, 0px 32.9px 9.1px 0px #00000000;
}

.card-header {
  border-radius: 8px 8px 0 0 !important;
}

.badge-lg {
  font-size: 20px !important;
}

label {
  font-size: 100% !important;
}

.form-control:disabled, .form-control[readonly],
.card.parent-card > .card-body,
.alert-info,
.alert-warning,
.alert-success {
  background-color: #E8F0FE;
}

.bg-warning {
  background-color: #cb9a05 !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #d7d9da;
}

.table-compact tr th:first-child {
  padding-left: 1rem !important;
}

.table-compact tr td:first-child {
  padding-left: 1rem !important;
}

.table-compact tr th:last-child {
  padding-right: 1rem !important;
}

.table-compact tr td:last-child {
  padding-right: 1rem !important;
}

.btn.btn-xs {
  padding: .35rem .4rem .25rem .4rem;
  font-size: .875rem;
  line-height: .5;
  border-radius: .2rem;
}



.alert-info,
.alert-warning,
.alert-success {
  color: black;
  border-color: #b2d4e8;
}

.btn-pt,
.btn-success,
.btn-warning,
.btn-secondary,
.btn-info {
  background: #0077C8;
  color: white !important;
  border: none;
  font-weight: 600 !important;
}

.btn-danger {
  background: #d92323;
  color: white;
  border: none;
}

  .btn-danger:hover,
  .btn-danger:focus,
  .btn-danger:active {
	background: #a51a1a;
	color: white;
	border: none;
  }


.btn-pt:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-secondary:hover,
.btn-info:hover,
.btn-pt:focus,
.btn-success:focus,
.btn-warning:focus, :focus
.btn-secondary:focus,
.btn-info:focus,
.btn-pt:active,
.btn-success:active,
.btn-warning:active,
.btn-secondary:active,
.btn-info:active {
  color: #fff !important;
  background-color: #0769ab !important;
  border-color: #0364a7 !important;
  border: none !important;
}


.btn-pt:focus,
.btn-success:focus,
.btn-warning:focus,
.btn-danger:focus, :focus
.btn-secondary:focus,
.btn-info:focus {
  box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%) !important;
  border: none !important;
}


.btn-pt-secondary {
  background: #E8F0FE;
  color: black;
}


.ko-error {
  display: block;
  width: 100%;
  text-align: center;
  border-radius: 5px;
  background-color: #014f6e;
  color: white;
  margin-top: 5px;
}

body.body-center {
  height: 100% !important;
  /*overflow: scroll;*/
}

.modal.fade {
  opacity: 1;
}

.modal-backdrop.show {
  opacity: 0.1 !important;
}

.data-point-selected {
  animation: blinker 2s linear infinite;
  animation: colorTransition 2s linear infinite;
  background-color: red;
  transition: background-color 1000ms linear;
}

.tabError {
  background-color: white;
  border: 1px solid grey;
  margin-left: 5px;
  animation: blinker 2s linear infinite;
}

.unauth-language {
  width: 150px;
  position: fixed;
  top: 20px;
  left: 20px;
}

.btn-select {
  display: block;
  background-clip: padding-box;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  height: 38.38px;
  padding: 11px 1rem;
  font-size: 0.875rem;
}

.bootstrap-select .dropdown-menu .form-control {
  height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

@keyframes colorTransition {
  from {
	background-color: red;
  }

  to {
	background-color: yellow;
  }

  50% {
	opacity: 0;
  }
}

@keyframes blinker {
  50% {
	opacity: 0;
  }
}

.bg-primary {
  background-color: #004F71 !important;
  border-color: #1a3f4e !important;
}

/* BOOTSTRAP DASHBOARD */

body {
  font-size: .875rem;
  background: #EEF1F4;
}

.card {
  box-shadow: none;
  border: 1px solid #E2E4E9;
  border-radius: 12px;
}

.breadcrumb {
  border: none;
  border-radius: 35px;
}

.feather {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
}

.gateway-app-link-container {
  position: absolute;
  bottom: 0;
  background: #fff;
  box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/*
  Help buttons
*/
.help-link {
  background: transparent;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
  transform: scale(1);
  animation: pulse 2s infinite;
}

.help-link-alt {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
  animation: pulse-black 2s infinite;
}

@keyframes pulse {
  0% {
	box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }

  70% {
	box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }

  100% {
	box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

@keyframes pulse-black {
  0% {
	transform: scale(0.95);
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }

  70% {
	transform: scale(1);
	box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }

  100% {
	transform: scale(0.95);
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}


/*
 * Sidebar
 */


.sidebar-sticky {
  position: relative;
  top: 0;
  height: 100vh padding-top: .5rem;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sidebar-sticky {
	position: -webkit-sticky;
	position: sticky;
  }
}


.sidebar .nav-link {
  color: #333;
  font-weight: 775;
  color: #333;
  border-bottom: 1px solid #cccccc;
}

  .sidebar .nav-link .feather {
	margin-right: 4px;
	color: #999;
  }

  .sidebar .nav-link.active,
  .sidebar .nav-link.active i {
	color: #004F71 !important;
  }

	.sidebar .nav-link:hover .feather,
	.sidebar .nav-link.active .feather {
	  color: inherit;
	}

.sidebar-heading {
  font-size: .75rem;
  text-transform: uppercase;
}

/*
 * Navbar
 */

.navbar-brand {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: 1rem;
}

.navbar .navbar-toggler {
  top: .25rem;
  right: 1rem;
}

.navbar .form-control {
  padding: .75rem 1rem;
  border-width: 0;
  border-radius: 0;
}

.form-control-dark {
  color: #fff;
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .1);
}

  .form-control-dark:focus {
	border-color: transparent;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
  }


/* END OF BOOTSTRAP DASHBOARD */

.avatar {
  height: 35px;
  width: 35px;
  border-radius: 50% !important;
}

.gradient-background {
  background: linear-gradient(120deg, #fff, #ffffff, #004F71);
}

.bg-grey {
  background-color: #efefef !important;
}

/*
  Styling for override limits
*/

.nav-pills > .nav-link.active {
  background-color: #1a3f4e;
  color: white;
}

.nav-pills > .nav-link {
  background-color: #cdcdcd;
  color: black;
  margin: 10px 10px 10px 10px;
  border-radius: 35px;
}

select.form-control {
  padding: 0px 1rem;
  height: 38.32px;
}

/*
  End of Styling for override limits
*/

.far.fa-caret-square-up {
  transition: .3s transform linear;
}

.droppedDown.far {
  transform: rotate(180deg);
}

.toggle.btn.btn-sm.btn-primary.disabled input,
.toggle.btn.btn-sm.btn-primary.disabled .toggle-group,
.toggle.btn.btn-sm.btn-primary.disabled .toggle-group .btn {
  cursor: not-allowed;
}

.btn,
.swal2-confirm,
.swal2-cancel {
  border-radius: 12px !important;
}

  .btn.btn-sm,
  .btn {
	padding-left: 15px;
	padding-right: 15px;
  }

.toggle-group .btn.btn-sm,
.toggle-group .btn {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.btn-outline-primary {
  color: #224f72;
  border-color: #224f72;
}

  .btn-outline-primary:hover {
	background-color: #0769ab !important;
	border-color: #0364a7 !important;
  }

.btn-outline-danger {
  color: #d92323;
  border-color: #d92323;
}

.card-body-bottom-radius {
  border-radius: 0 0 35px 35px !important;
}

btn-outline-danger:hover {
  background-color: #a51a1a !important;
  border-color: #a51a1a !important;
}

.btn-lg,
.swal2-confirm,
.swal2-cancel {
  font-size: 14px !important;
  padding: 10px 12px;
}

.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
  background-color: #224f72;
  border-color: #224f72;
}


#languageSelect {
  border-radius: 0px 35px 35px 0px !important;
}
/*
 * Off Canvas sidebar at medium breakpoint
 * --------------------------------------------------
 */
@media screen and (max-width: 768px) {

  .onboarding-nav a {
	width: 100%;
	margin-top: 15px;
  }

  .row-offcanvas {
	position: relative;
	-webkit-transition: all 0.25s ease-out;
	-moz-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
	left: -33%;
	padding-top: 0px;
  }

  .row-offcanvas-left.active {
	left: 33%;
	margin-left: -6px;
  }

  .sidebar-offcanvas {
	position: absolute;
	top: 0;
	width: 33%;
	height: 100%;
	overflow: auto;
  }

  .card-body {
	padding: 0.75rem;
  }
}

/*
 * Off Canvas wider at sm breakpoint
 * --------------------------------------------------
 */
@media screen and (max-width: 34em) {
  .row-offcanvas-left
  .sidebar-offcanvas {
	left: -65%;
	padding-top: 0px;
  }

  .row-offcanvas-left.active {
	left: 65%;
	margin-left: -6px;
  }

  .sidebar-offcanvas {
	width: 65%;
  }

  .row-offcanvas-left.active {
	top: 0px;
  }
}

/*
 * Scrollable Table
 * --------------------------------------------------
 */
.table-scrollable {
  overflow-x: auto;
  overflow-y: auto;
  scrollbar-width: thin;
}

  .table-scrollable thead th {
	border: none;
	position: sticky;
	top: 0px;
	background-color: white;
	margin-top: -1px;
	margin-bottom: -1px;
	box-shadow: inset 0 1px 0 #dee2e6, inset 0 -1px 0 #dee2e6;
	z-index: 100;
  }

/*
 * Autocomplete dropdown
 * --------------------------------------------------
 */
/*.dropdown-item
{
	display: block;
	width: 100%;
	padding: 0.25rem 0.5rem;
	clear: both;
	font-weight: 400;
	color: #212529;
	text-align: inherit;
	white-space: nowrap;
	background-color: transparent;
	border: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.75rem;
}*/

.highcharts-title {
  font-family: 'Aptos', sans-serif;
  font-weight: 500;
  text-decoration: underline;
}

.popup-overlay {
  display: none;
  position: fixed;
  height: 100vh;
  width: 100vw;
  z-index: 8;
}


  /*
 * Popover
 * --------------------------------------------------
 */
  .popup-overlay:before {
	content: '';
	background-image: linear-gradient(to right, rgba(171, 163, 181, 0.4), rgba(171, 163, 181, 0.4));
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 30;
	position: fixed;
  }



.popover[class*="tour-"].orphan {
  left: 50% !important;
  top: 50% !important;
  margin-top: 0;
  position: absolute;
  transform: translate(-50%, -50%) !important;
}



.tour-GettingStarted-0 {
  max-width: 600px !important;
  padding: 45px !important;
  background: #d5e2ff !important;
}



  .tour-GettingStarted-0 .popover-body {
	background: #d5e2ff;
  }



.tour-logo-holder {
  position: absolute;
  margin-top: 8px;
}



  .tour-logo-holder span {
	font-size: 20px;
	color: #4a674a;
	line-height: 20px;
  }



.popover .popover-header, .popover .popover-body {
  background: #f3f4fa;
}

.popover-title {
  margin: 0;
  padding: 8px 14px;
  font-size: 14px;
  background-color: #1a3f4e;
  border-bottom: 1px solid #ebebeb;
  border-radius: 5px 5px 0 0;
  color: white;
}


.tour-GettingStarted {
  max-width: 600px !important;
  padding: 0 !important;
  background: #f3f4fa !important;
  border: none;
  border-radius: 30px;
}

  .tour-GettingStarted .popover-title {
	border: none;
	border-radius: 20px 20px 0 0;
  }



.popover .popover-header {
  font-size: 0.9375rem;
  border-bottom: 0;
  color: #000000;
  font-weight: bold;
}



.tour-GettingStarted .btn-secondary {
  color: #fff;
  background: #868686;
  border: #868686;
}



  .tour-GettingStarted .btn-secondary.disabled, .btn-secondary:disabled {
	background-color: #cecece;
	border: #cecece;
  }



  .tour-GettingStarted .btn-secondary[data-role*="end"] {
	/* Attribute value contains this value somewhere in it */
	background-color: #000000 !important;
	border: #000000 !important;
  }




.tour-GettingStarted-0 {
  will-change: auto !important;
}

/*
 * END Popover
 * --------------------------------------------------
 */

.bg-light {
  background: #e9eaeb;
}

/*
 * START AdminPanel
 * --------------------------------------------------
 */
#AdminPanel {
  position: fixed;
  bottom: 0px;
  width: 70%;
  z-index: 10000;
  text-align: center;
  background-color: black;
  border-radius: 35px 35px 0 0;
  padding: 5px 20px;
  font-size: 13px;
  left: 50%;
  transform: translate(-50%, -0%);
}

  #AdminPanel a {
	color: #ffffff;
  }
/*
 * END AdminPanel
 * --------------------------------------------------
 */

/*
 * START SubUserPanel
 * --------------------------------------------------
 */
#SubUserPanel {
  position: fixed;
  bottom: 0px;
  height: 30px;
  width: 100%;
  z-index: 10000;
  text-align: center;
  background-color: #5a5a5a;
  padding-top: 4px;
}

  #SubUserPanel a {
	color: #ffffff;
  }
/*
 * END AdminPanel
 * --------------------------------------------------
 */












@media screen and (max-width:1200px) {

  .header-container {
	min-width: auto !important;
  }

  .device-image {
	width: auto;
	background-position-y: -132px !important;
  }

  .sidebar-offcanvas {
	position: fixed;
	max-height: calc(100vh - 88px);
	top: 63px;
	bottom: 0;
	overflow: auto;
	left: -297px;
	-webkit-transition: all .25s ease-out;
	transition: all .25s ease-out
  }

	.sidebar-offcanvas.active {
	  left: 0
	}
}

.navbar.default-layout .navbar-menu-wrapper .navbar-toggler {
  border: 0;
  color: inherit
}

.navbar-toggler:not(:disabled):not(.disabled) {
  cursor: pointer
}

.navbar.default-layout .navbar-brand-wrapper .brand-logo-mini {
  display: none
}

button.navbar-toggler.navbar-toggler.align-self-center.toggle-button-lg {
  top: 13px;
  left: 260px;
  transition: top .25s ease,background .25s ease;
  -webkit-transition: top .25s ease,left .25s ease;
  -moz-transition: top .25s ease,left .25s ease;
  -ms-transition: top .25s ease,left .25s ease;
}

@media (min-width:768px) {
  .sidebar-icon-only .sidebar .nav .nav-item .nav-link .badge, .sidebar-icon-only .sidebar .nav .nav-item .nav-link .menu-title,
  .sidebar-icon-only .sidebar .nav .menu-title,
  .sidebar-icon-only .nav-hide-collapsed {
	display: none
  }

  .sidebar-icon-only .sidebar {
	width: 96px
  }
}

.sidebar {
  min-height: calc(100vh - 63px);
  background: #0077C8;
  font-family: 'Aptos', sans-serif;
  padding: 0;
  width: 298px;
  z-index: 11;
  transition: width .25s ease,background .25s ease, left .25s ease;
  -webkit-transition: width .25s ease,background .25s ease, left .25s ease;
  -moz-transition: width .25s ease,background .25s ease, left .25s ease;
  -ms-transition: width .25s ease,background .25s ease, left .25s ease;
}

.nav-link, .navbar-toggler {
  padding: 10px 25px
}

@media (min-width:768px) {
  .sidebar-icon-only .main-panel {
	width: calc(100% - 70px)
  }
}

.main-panel {
  -webkit-transition: width .25s ease,margin .25s ease;
  transition: width .25s ease,margin .25s ease;
  width: calc(100% - 255px);
  min-height: calc(100vh - 63px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column
}

.navbar {
  height: 63px
}

.navbar-brand {
  margin-right: 0
}

.container-fluid {
  padding-left: 0;
  padding-right: 0
}

.container-scroller {
  overflow: hidden
}

.navbar.default-layout .navbar-brand-wrapper {
  transition: width .25s ease,background .25s ease;
  -webkit-transition: width .25s ease,background .25s ease;
  -moz-transition: width .25s ease,background .25s ease;
  -ms-transition: width .25s ease,background .25s ease;
  width: 255px;
  height: 63px
}

@media (min-width:768px) {
  .sidebar-icon-only .navbar .navbar-brand-wrapper {
	width: 70px
  }

  .sidebar-icon-only .navbar .navbar-menu-wrapper {
	width: calc(100% - 70px)
  }
}

.navbar.default-layout .navbar-menu-wrapper {
  transition: width .25s ease;
  -webkit-transition: width .25s ease;
  -moz-transition: width .25s ease;
  -ms-transition: width .25s ease;
  padding-left: 15px;
  padding-right: 15px;
  width: calc(100% - 255px);
  height: 63px
}

  .navbar.default-layout .navbar-menu-wrapper .navbar-toggler {
	border: 0;
	color: inherit
  }

.navbar-toggler:not(:disabled):not(.disabled) {
  cursor: pointer
}

.navbar.default-layout .navbar-brand-wrapper .brand-logo-mini {
  display: none
}

  .navbar.default-layout .navbar-brand-wrapper .brand-logo-mini img {
	width: calc(75px - 50px);
	max-width: 100%;
	height: 28px;
	margin: auto
  }

.align-self-center {
  -ms-flex-item-align: center !important;
  align-self: center !important
}

.navbar-toggler {
  padding: .25rem .75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: .25rem
}

.navbar.default-layout .navbar-menu-wrapper .navbar-nav {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.navbar-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none
}

@media (min-width:768px) {
  .sidebar-icon-only .navbar .navbar-brand-wrapper .brand-logo {
	display: none
  }

  .sidebar-icon-only button.navbar-toggler.navbar-toggler.align-self-center.toggle-button-lg {
	top: 13px;
	left: 70px;
  }

  .sidebar-icon-only .navbar .navbar-brand-wrapper .brand-logo-mini {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
  }

  .sidebar-icon-only .navbar .navbar-menu-wrapper {
	width: calc(100% - 70px)
  }

  .navbar.default-layout .navbar-menu-wrapper .navbar-nav.navbar-nav-right {
	margin-left: auto
  }

  .sidebar-icon-only .sidebar .nav .nav-item .nav-link {
	display: block;
	text-align: center;
	padding-left: 25px;
	padding-right: 25px
  }
}



.page-body-wrapper {
  min-height: calc(100vh - 63px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  padding-left: 0;
  padding-right: 0;
}

.navbar.default-layout {
  transition: background .25s ease;
  -webkit-transition: background .25s ease;
  -moz-transition: background .25s ease;
  -ms-transition: background .25s ease
}

.sidebar .nav .nav-item .nav-link .menu-icon {
  margin-right: 1.25rem;
  width: 16px;
  line-height: 1;
  font-size: 18px;
  color: #fff;
}

.sidebar .nav .nav-item .nav-link {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 16px 35px;
  white-space: nowrap;
  height: 52px;
  color: #4a4a4a
}

.close {
  color: #ffffff;
}

.traffic-light {
  height: 25px;
  width: 25px;
  border-radius: 100%;
}

.alert.sm-radius {
  border-radius: 12px !important;
}

#languageSelect.login-language-select {
  border-radius: 35px 35px 35px 35px !important;
  border: 1px #ccc solid !important;
  background: none !important;
}

.bg-white.no-border {
  border: none !important;
}

body.none-authenticated {
  height: 100%;
  background: #EEF1F4;
}

.device-select {
  border: 1px solid rgba(0, 0, 0, 0.125);
  color: #545454 !important;
}

  .device-select a {
	color: #545454 !important;
  }

.device-select-header {
  background: #e8f0fe;
  height: 169px;
  /*	background-image: url(/images/devices/kemio-device.png);*/
  background-size: 300px;
  background-repeat: no-repeat;
  background-position-y: 15px;
  background-position-x: center;
}


a {
  color: #0077C8;
}

label {
  margin-bottom: 0.3rem;
}

/*.dropdown-toggle.bs-placeholder {
	background-color: #E9E9EB;
	color: #212529;
}*/

.dropdown-toggle {
  background-color: #E8F0FE;
  color: #212529;
  /*border: none;*/
}

.bootstrap-select .dropdown-toggle:focus {
  outline: none !important;
  box-shadow: none !important;
}

.dropdown.bootstrap-select.dropup.show .dropdown-toggle {
  background: #E8F0FE;
}

.bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:active, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
  color: #212529;
}

.form-control {
  border-radius: 35px;
  background-color: #fff;
  border: 1px solid #E0E5EB;
  padding: 22px;
  color: #212529;
}

  .form-control:focus {
	border-color: #E0E5EB;
	box-shadow: none;
  }

  .form-control:hover {
	background-color: #f8f9fa;
	box-shadow: none;
  }

.form-control-sm {
  padding: 1.2rem 1rem;
  font-size: 14px;
}

.btn-sm .material-symbols-sharp {
}

.form-control::placeholder {
  color: #828B99;
}


/* Style for uncompleted fields */
/*input:focus:not(:valid),
input:not(:focus):not(:valid):not(:placeholder-shown),
textarea:focus:not(:valid),
textarea:not(:focus):not(:valid):not(:placeholder-shown) {*/
/*border: 3px solid #a5a5a5 !important;*/
/*}*/

/* Style for completed fields */
/*input:not(:placeholder-shown):valid,
textarea:focus:valid,
textarea:not(:placeholder-shown):valid,
.login_form select.form-control.blank-select-complete.blank-select {
	background: #ffffff;
}*/


/* Style for uncompleted fields */
select:focus:not(:valid),
select:not(:focus):not(:valid):not(:placeholder-shown) {
  /*border: 3px solid #a5a5a5 !important;*/
}

/* Style for completed fields */
select:focus:valid,
select:not(:placeholder-shown):valid {
  background: #E0E5EB;
}

.popover-content {
  padding: 0.85rem;
}

.input-group > .form-control:not(:last-child), .input-group > .custom-select:not(:last-child) {
  border-right: none;
}

.input-group-append {
  margin-left: -1px;
  border: 1px solid #E0E5EB;
  border-left: none;
  border-radius: 0px 99px 99px 0px;
}


.input-group-text {
  background: #fff;
}

.input-group:hover .input-group-append,
.input-group:hover .form-control,
.input-group:hover .input-group-append .input-group-text {
  background: #f8f9fa;
}



/* Style for uncompleted fields */


.btn-inverted {
  background-color: #FFFFFF;
  color: #0077C8 !important;
  border: none !important;
  font-weight: 600 !important;
  outline: none;
}

  .btn-inverted:hover {
	background-color: #E1E5EA !important;
	color: #232933 !important;
  }

  .btn-inverted:focus {
	background-color: #E1E5EA !important;
	border-color: #D2D7E0 !important;
	color: #232933 !important;
	outline: 2px solid #D2D7E0 !important;
	box-shadow: none !important;
  }

  .btn-inverted:active {
	background-color: #D2D7E0 !important;
	color: #232933 !important;
  }

.btn-primary,
.swal2-confirm,
.swal2-cancel {
  background-color: #0077c8 !important;
  color: #fff !important;
  border: none !important;
  font-weight: 500 !important;
  outline: none;
}

  .btn-primary:hover,
  .swal2-confirm:hover,
  .swal2-cancel:hover {
	background-color: #006AB2 !important;
	border-color: #006AB2 !important;
	color: #fff !important;
  }

  .btn-primary:focus,
  .swal2-confirm:focus,
  .swal2-cancel:focus {
	background-color: #006AB2 !important;
	border-color: #006AB2 !important;
	color: #fff !important;
	outline: 2px solid #234676 !important;
	box-shadow: none !important;
  }

  .btn-primary:active,
  .swal2-confirm:active,
  .swal2-cancel:active {
	background-color: #234676 !important;
	border-color: #234676 !important;
	color: #fff !important;
  }

  .btn-primary:disabled,
  .btn-primary.btn-disabled,
  .btn-primary.btn-disabled:focus {
	background-color: #E1E5EA !important;
	border-color: #E1E5EA !important;
	color: #687B97 !important;
	outline: none !important;
  }

  .btn-primary.btn-lg,
  .swal2-confirm,
  .swal2-cancel {
	min-width: 90px;
  }

/* Buttons */


.sidebar-dropdown-menu {
  top: calc(100vh - 82px) !important;
  left: 260px !important;
  position: fixed !important;
}

.sidebar-icon-only .sidebar-dropdown-menu {
  left: 70px !important;
}


.sidebar-dropdown-phone {
  top: calc(100vh - 247px) !important;
  left: 260px !important;
  position: fixed !important;
}

.sidebar-icon-only .sidebar-dropdown-phone {
  left: 70px !important;
}

.dropdown-item .material-symbols-sharp {
  font-size: 21px;
}

.device-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(100px, 300px));
  grid-template-rows: repeat(2, 1fr);
  width: max-content; /* shrink to the boxes’ intrinsic width */
  margin-left: auto; /* center inside the column */
  margin-right: auto;
  justify-content: center;
}

.device-box {
  width: 100%;
  aspect-ratio: 300 / 210;
  background-color: white;
  border: 1px solid #E0E5EB;
  border-radius: 0;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

  .device-box:hover {
	transform: scale(1.01);
	border-color: #c7d0db;
	box-shadow: 0 0 0 1px rgba(0, 136, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);
  }

  .device-box:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(31, 46, 66, 0.12);
  }

  .device-box.device-box-tl {
	border-radius: 10px 0px 0px 0px;
  }

  .device-box.device-box-tr {
	border-radius: 0px 10px 0px 0px;
  }

  .device-box.device-box-br {
	border-radius: 0px 0px 10px 0px;
  }

  .device-box.device-box-bl {
	border-radius: 0px 0px 0px 10px;
  }

.device-link {
  height: 100%;
  text-decoration: none;
  color: inherit;
}

  .device-link:hover,
  .device-link:focus {
	text-decoration: none;
	color: inherit;
  }

.device-label {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.device-box.hardware-selected {
  border: 1.5px solid #1a73e8;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(26,115,232,0.15);
}

  /* Don’t over-animate selected on hover */
  .device-box.hardware-selected:hover {
	transform: none;
	box-shadow: 0 0 0 2px rgba(0, 119, 200, .25), 0 6px 16px rgba(31, 46, 66, .08);
  }


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .device-box {
	transition: none;
  }

	.device-box:hover {
	  transform: none;
	}
}

@media screen and (max-width: 991px) {
  .device-grid {
	grid-template-columns: repeat(2, 1fr);
  }

  .device-box img {
	max-width: 150px !important;
	max-height: 100px !important;
  }


  .onboarding-wrap {
	margin: auto; /* centers both axes when there's spare space */
  }
}

@media screen and (max-width: 767px) {
  .device-grid {
	width: 100%;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(4, auto);
  }

  .device-box {
	border-radius: 10px !important;
	margin-bottom: 10px;
  }

	.device-box.device-box-tl,
	.device-box.device-box-tr,
	.device-box.device-box-bl,
	.device-box.device-box-br {
	  border-radius: 10px !important;
	}

	.device-box img {
	  max-width: 140px !important;
	  max-height: 90px !important;
	}
}

.btn-responsive {
}
/* default (mobile) */
@media (max-width: 575.98px) {
  .btn-responsive {
	padding: .25rem .5rem;
	font-size: .875rem;
	line-height: 1.5;
	border-radius: .2rem;
  }
}
/* ≥576px behaves like btn-lg */
@media (min-width: 576px) {
  .btn-responsive {
	padding: .5rem 1rem;
	font-size: 1.25rem;
	line-height: 1.5;
	border-radius: .3rem;
  }
}

@media screen and (max-width: 480px) {
  .device-box img {
	max-width: 120px !important;
	max-height: 80px !important;
  }
}

@media screen and (max-width: 375px) {
  .device-box img {
	max-width: 100px !important;
	max-height: 70px !important;
  }
}

.shadow-top {
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
}

.flex-fill-xs {
  flex: 1 1 auto;
  min-width: 0;
}

@media (min-width: 576px) {
  .flex-fill-xs {
	flex: 0 0 auto;
  }

  .btn-sm-inline {
	display: inline-block !important;
	width: auto !important;
  }
}

/* Base look */
.custom-radio-card {
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  transition: border-color .15s ease, box-shadow .15s ease;
  cursor: pointer;
  position: relative;
}

  .custom-radio-card .card-body {
	padding-right: 2.25rem;
  }

  .custom-radio-card .right-icon {
	position: absolute;
	right: .75rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.25rem;
	color: #6c757d;
	pointer-events: none; /* keeps the whole card clickable */
  }

  /* Hover/focus hints */
  .custom-radio-card:hover {
	border-color: #6c757d;
  }

  .custom-radio-card:focus {
	outline: 0;
	box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
  }

  .custom-radio-card.hardware-selected {
	border: 1.5px solid #1a73e8;
	background-color: #ffffff;
	box-shadow: 0 2px 8px rgba(26,115,232,0.15);
  }

  /* Don’t over-animate selected on hover */
	.custom-radio-card.hardware-selected:hover {
	  transform: none;
	  box-shadow: 0 0 0 2px rgba(0, 119, 200, .25), 0 6px 16px rgba(31, 46, 66, .08);
	}

  /* Visually hide the native radio but keep it for forms/AT */
  .custom-radio-card .form-check-input {
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
  }