* {
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

html {
	height: 100%;
}

body {
  -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
  -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
  -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
  user-select: none;
  background-color: #f9f9f9;
  background-attachment: fixed;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: sans-serif;
}

.disabled {
  pointer-events: none;
}

#header-fixed {
    background: #738F93;
    position:fixed;
    top:0;
    right: 0;
    left:0;
    height: 50px;
    z-index: 1000;
}

#header-menu {
	display: flex;
	position: absolute;
}

#header-title {
    color: #fff;
    margin: auto;
    font-size: 23px;
    font-weight: 400;
}

.navbar {
	justify-content: unset;
}

.reg-methods-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0px 10px;
}

.btn:focus,
.btn:active {
   outline: 0 !important;
   box-shadow: none;
}

.btn {
  background-color: #fff;
  border: 1px solid #414141;
  border-radius: .25rem;
  color: #414141;
  padding: .60rem 1rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight:normal;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: .4s;
  width: 100%;
  margin: 6px auto 20px;
}

.btn-red,
.btn-red:hover,
.btn-red.hover,
.btn-red:active,
.btn-red.active,
.btn-red:focus,
.btn-red.focus {
  background-image: linear-gradient(to bottom,#C1403F 0,#C1403F 100%);
  background-color:#C1403F;
  background-repeat:no-repeat;  
  border-color: #C1403F;
  color: #fff;
  box-shadow: none;
}

.btn-transparent {
  margin: 0;
  color: #C1403F;
  background: transparent;
  border: 0;
  padding: 10px;
  font-weight: 500;
  font-size: 18px;
}
.btn-transparent:hover {
	color: #C1403F;
}

.btn-submit {
  max-width: 230px;
  display: block;
}

.btn-setup-new-device,
.btn-remove-account {
	display: flex;
    flex-direction: row;
    align-items: center;
    height: 66px;
    color: #313940;
    background-color: #ECECEC;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0px 20px;
}

.btn-setup-new-device > img,
.btn-remove-account > img
{
	padding-right: 16px;
}

.form-control {
  font-size: 13px;
}

.form-control:focus,
.custom-select:focus {
    box-shadow: unset;
}

.navbar-dark .navbar-toggler {
  border: 0;
  color: #fff;
  padding: 0;
  outline: 0;
}

#nvFrame {
	border: none;
	width: 100%;
	height: 450px;
}

#nvModal .modal-body {
	padding: 10px;
}

.sidr {
  font-family: sans-serif;
  font-size: 18px;
  background: #fff;
  box-shadow: 0 0 15px 5px rgba(0, 0, 0, .5);
}

.sidr.left {
  left: -275px;
}

.sidr ul li a {
  color: #666;
}

.sidr ul li.active a {
  box-shadow: none;
  color: #840014;
}

@media (hover: hover)  and (pointer: fine) {
    .sidr ul li:hover a {
        color: #840014;
    }
}

.sidr ul li:hover > a,
.sidr ul li:hover > span {
    box-shadow: none;
}

.sidr ul li:hover, .sidr ul li.active {
  line-height: 48px;
  border-top: 1px solid #fff;
}

.sidr ul li {
  font-weight: 400;
}

.sidr ul li.disabled a {
  opacity: 0.5;
}

#sidr-header {
  background: #738F93;
  min-height: 50px;
  color: #fff;
}

#account-section {
	display: flex;
	flex-direction: column;
	padding: 15px;
	font-size: 15px;
}

#user-id {
	font-weight: bold;
	word-wrap: break-word;
}

.sidr-open #overlay {
    display: block;
}

#overlay {
    position: absolute;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 999998;
    display: none;
}

#logout-button {
  align-self: flex-end;
  padding: 0.25rem 0.6rem;
  width: auto;
  margin: 0 0 10px 0;
  font-size: 14px;
  line-height: 1rem;
}

#loader {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 99999;
}

#loader-bg {
	margin: 0;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    z-index: 99998;
    background: rgba(0, 0, 0, 0.6);
}

#loader .loader-content {
    display: flex;
    align-items: center;
	position: relative;
    left: -50%;
    background: rgba(0,0,0, 0.7);
    padding: 10px;
    border-radius: 4px;
}

#loader .loader-icon { 
    border: 4px solid rgba(0,0,0,0.2);
    border-radius: 50%;
    border-top: 4px solid #fcd953;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#loader .loader-text {
    font-size: 16px;
    font-weight: initial;
    color: white;
    margin-left: 10px;
}

#loader .loader-close {
	position: absolute;
    top: -10px;
    right: -10px;
    color: #C1403F;
    background: white;
    border: 1px solid white;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
}

.account-footer {
  color: #555;
  font-size: 0.9rem;
  text-align: center;
  padding: 0 1em 2em 1em;
}

#sign-in-page {
	max-width: 400px;
}

#content {
  padding-top: 70px;
  min-height: 100%;
}

#transaction-form {
	max-width: 400px;
}

#transaction-check:disabled {
	color: lightgray;
}

#content p {
  font-size: 1rem;
  margin: 0.25rem 0;
  font-weight: 400;
  text-align: center;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 30% 10px 50px;
}

@media (max-width: 999px) and (orientation: landscape) {
  .modal-dialog {
    position: relative;
    width: auto;
    margin: 10% auto;
  }
}

.toast-message {
  word-break: break-all;
  position: fixed;
  text-align: center;
  bottom: 15%;
  left: 0;
  right: 0;
  background: rgba(0,0,0, 0.7);
  padding: 10px;
  margin: 0px 20px;
  border-radius: 4px;
  color: #ffffff;
  font-weight: 400;
  display: none;
  z-index: 1100;
}

.modal-content {
  border-radius: .75rem;
}

.modal-body {
  padding: 7px 0 1px;
  text-align: center;
}
#content .modal-body p {
  margin: 10px;
  text-align: center;
  font-weight: initial;
  font-size: 15px;
  line-height: 22px;
}

.modal-footer {
  padding: 0;
  border-color: #ccc;
}

.dpks-button span {
	display: none;
}
.dpks-button.collapsed .show-dpks,
.dpks-button:not(.collapsed) .hide-dpks {
	display: block;
}

.settings-toggle {
	margin: 0px;
}

.settings-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}

.settings-toggle span {
	height: 20px;
	width: 36px;
	border-radius: 16px;
	border: 1px solid #313940;
	box-sizing: content-box;
	background-color: transparent;
	transition: .4s;
	cursor: pointer;
	position: relative;
	display: block;
}

.settings-toggle span:before {
	position: absolute;
	content: "";
	height: 16px;
	width: 16px;
	left: 2px;
	top: 2px;
	border-radius: inherit;
	background-color: #656B70;
	transition: .4s;
}

.settings-toggle input:checked + span {
	background-color: transparent;
}

.settings-toggle input:checked + span:before {
	transform: translateX(16px);
	background-color: #313940;
}

@media (min-width: 1000px) {
  .modal-dialog {
    max-width: 600px;
    margin: 200px auto 50px;
  }
}

@supports(padding: max(0px)) {
  .reg-methods-container {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
    
  #sidr-header,
  .sidr ul li {
    padding-left: max(10px, env(safe-area-inset-left));
  }
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: #555555;
		color: #ffffff
	}

	.btn-transparent,
	.btn-transparent:hover {
		color: #ff3352
	}

	.sidr {
		background-color: #555555;
	}

	.sidr ul li a {
		color: #ffffff
	}

	.sidr ul li.active a {
		color: #ff3352
	}

	@media (hover: hover) and (pointer: fine) {
		.sidr ul li:hover a {
			color: #ff3352
		}
	}

	.settings-toggle span {
		border-color: #ffffff;
	}
	.settings-toggle input:checked + span {
		background-color: #ffffff;
	}
	.settings-toggle span:before {
		background-color: #ffffff;
	}
	.settings-toggle input:checked + span:before {
		background-color: #313940;
	}

	.account-footer {
		color: #ffffff;
	}

	/* dark mode colors for bootstrap components */
	.modal-content {
		background-color: #555555;
	}
	.close {
		color: #ffffff;
		opacity: 1;
	}
	.text-primary {
		color: #a3cfff!important;
	}
	.text-secondary {
		color: #c9c9c9!important;
	}
	.text-success {
		color: #38e960!important;
	}
	.text-danger {
		color: #ff3352!important;
	}
}