html {
  overflow-y: scroll;
}
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: bold;
  margin: 4px 0;
}

.bold {
	font-weight: bold;
}
.color-alert {
	color: var(--color-red-500);
}
.color-active {
	color: var(--color-green-500);
}

#content {
	display: grid;
	grid-template-columns: 1fr 7fr;
}

header {
	grid-column: 1 / 3;
	background-color: var(--color-green-400);
	color: var(--color-gray-800);
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

header > * {
	margin: 0 1.5rem;
}

nav {
	background-color: var(--color-green-200);
	color: var(--color-gray-700);
	padding: 2rem 0;
}
nav ul li > a {
	display: block;
	font-size: 1.1rem;
	font-weight: bold;
	padding: 6px 0 6px 24px;
	opacity: 0.75;
}
nav ul li > a:hover {
	opacity: 1;
}

.nav-selected {
	background-color: var(--color-green-300);
}

main {
	margin: 1rem;
	color: var(--color-gray-500);
}

main a {
	color: var(--color-blue-600);
}

.item-props {
	display: grid;
	grid-template-columns: 1fr 7fr;
	color: var(--color-gray-700);
	grid-gap: 0.5rem;
}

.item-props > *:nth-child(even) {
	font-weight: bold;
}

.item-header > * {
	display: inline-block;
	margin: 0 1rem 1rem 0;
}
.item-header > *:nth-child(1) {
	text-transform: uppercase;
	font-weight: 800;
	color: var(--color-gray-400);
}
.item-header > *:nth-child(2) {
	font-size: 2rem;
	font-weight: bold;
	color: var(--color-gray-700);
}
.item-header > b {
	font-size: 2rem;
	font-weight: bold;
	color: var(--color-gray-500);
}

.item-pubkey {
	color: var(--color-gray-300);
}

.search-record > *:nth-child(1) {
	text-transform: uppercase;
	font-weight: bold;
	color: var(--color-gray-400);
	margin-top: 0.5rem;
}

.search-box {
	background-color: var(--color-green-200);
	outline: none;
	padding: 2px 6px;
}

.staffname::before {
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="black"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>') no-repeat;
	content: '';
	display: inline-block;
	width: 24px;
	height: 24px;
	vertical-align: top;
	margin: 0 0.5rem;
}

.copyable {
	position: relative;
	cursor: pointer;
	padding: 2px 8px;
	border-radius: 6px;
}
.copyable > * {
	display: inline-block;
}
.copyable > div::before {
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="gray"><path d="M9 2a2 2 0 00-2 2v8a2 2 0 002 2h6a2 2 0 002-2V6.414A2 2 0 0016.414 5L14 2.586A2 2 0 0012.586 2H9z"></path><path d="M3 8a2 2 0 012-2v10h8a2 2 0 01-2 2H5a2 2 0 01-2-2V8z"></path></svg>') no-repeat;
	content: '';
	display: inline-block;
	width: 32px;
	height: 32px;
	margin: 0 0.3rem;
	visibility: hidden;
	opacity: 0.25;
}

.copyable:hover {
	background-color: var(--color-gray-200);
}
.copyable:hover > div::before {
	visibility: visible;
}

.icon-plus::before {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="gray"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"></path></svg>');
	background-repeat: no-repeat;
	content: '';
	display: inline-block;
	width: 24px;
	height: 24px;
	vertical-align: top;
	margin: 0 0.3rem;
}



.loader-none {
	color: var(--color-gray-300);
	font-weight: bold;
	font-size: 1.5rem;
}
.loader-error {
	color: var(--color-red-300);
	font-weight: bold;
	font-size: 1.5rem;
}
.loader-spinner {
	display: inline-block;
	width: 80px;
	height: 80px;
}
.loader-spinner:after {
	content: " ";
	display: block;
	width: 64px;
	height: 64px;
	margin: 8px;
	border-radius: 50%;
	border: 6px solid #bbb;
	border-color: var(--color-gray-300)  transparent var(--color-gray-300)  transparent;
	animation: loader-spinner 1.2s linear infinite;
}
@keyframes loader-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.bigdot {
    height: 20px;
    width: 20px;
    border-radius: 100px;
    display: inline-block;
}
.mediumdot {
    height: 14px;
    width: 14px;
    border-radius: 100px;
    display: inline-block;
}
.smalldot {
    height: 8px;
    width: 8px;
    border-radius: 100px;
    display: inline-block;
}
.bigdot2 {
    height: 20px;
    width: 40px;
    border-radius: 100px;
    display: inline-block;
}
.mediumdot2 {
    height: 14px;
    width: 28px;
    border-radius: 100px;
    display: inline-block;
}
.smalldot2 {
    height: 8px;
    width: 16px;
    border-radius: 100px;
    display: inline-block;
}
.doton {
    background-color: #48bb78; 
}
.dotoff {
    background-color: #f56565; 
}

.spinning-button img {
	display: inline-block;
	width: 20px;
	margin: 2px 6px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% {  transform: rotate(359deg); }
}
.spinning {
    animation: spin 2s linear infinite;

}

.checkbox-show {
	display: none;
}

.checkbox-show + label {
}
.checkbox-show + label + * {
	display: none;
}
.checkbox-show:checked + label + * {
	display: inline;
}

.editable {
	background-color: var(--color-yellow-100);
}
.tbl h3 {
	padding: 10px;
}

.sliding-message {
	position: fixed;
	background-color: var(--color-gray-500);
	color: var(--color-white);
	font-weight: bold;
	padding: 4px 20px;
	bottom: -4em;
	transform: translateX(-50%);
       	left: 50%;
	transition-timing-function: linear;
	transition: bottom 500ms, opacity 500ms;
	opacity: 0.5;
}


.auth-form > * {
	text-align: center;
	margin: 30px;
}
.auth-form input {
	padding: 4px;
}

.button1 {
	background-color: var(--color-blue-500);
	color: var(--color-white);
	font-size: 1.1rem;
	font-weight: bold;
	padding: 0px 8px;
	margin: 4px;
	opacity: 0.75;
}
button:hover {
	opacity: 1;
}


.newrow > * {
	display: inline-block;
	margin: 2rem 1rem;
	font-size: 1.2rem;
}

.newrow input, .newrow select {
	padding: 2px 8px;
	background-color: var(--color-yellow-100);
}


.tooltip {
	position:relative; /* making the .tooltip span a container for the tooltip text */
}
.tooltip:before {
	content: attr(data-text); /* here's the magic */
	position: absolute;
	z-index: 10;
	
	/* vertically center */
	top:50%;
	transform:translateY(-50%);
	
	/* move to right */
	left:100%;
	margin-left:15px; /* and add a small left margin */
	
	/* basic styles */
	width:200px;
	padding:10px;
	border-radius:10px;
	background-color: var(--color-gray-700);
	color: var(--color-gray-200);
	text-align:center;
	
	opacity:0;
	visibility: hidden;
	transition: .3s opacity;
	transition-delay: .1s;
}
.tooltip:hover:before {
	opacity:1;
	visibility: visible;
}

.vgt-responsive {
	overflow: hidden;
}

.dangerzone {
	margin: 50px 0;
}

.dangerzone h3 {
	color: var(--color-red-600);
}

.dangerzone button {
	background-color: var(--color-red-600);
	color: var(--color-white);
	font-size: 1.1rem;
	font-weight: bold;
	padding: 0px 8px;
	margin: 4px;
	opacity: 0.75;
}
.dangerzone button:hover {
	opacity: 1;
}
.dangerzone input {
	border: 1px solid var(--color-red-600);
}

.mt-0 {
  margin-top: 0px;
}

.mr-0 {
  margin-right: 0px;
}

.mb-0 {
  margin-bottom: 0px;
}

.ml-0 {
  margin-left: 0px;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mr-4 {
  margin-right: 1rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.ml-4 {
  margin-left: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mr-5 {
  margin-right: 1.25rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.ml-5 {
  margin-left: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mr-6 {
  margin-right: 1.5rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.ml-6 {
  margin-left: 1.5rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.mr-7 {
  margin-right: 1.75rem;
}

.mb-7 {
  margin-bottom: 1.75rem;
}

.ml-7 {
  margin-left: 1.75rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mr-8 {
  margin-right: 2rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-8 {
  margin-left: 2rem;
}

input.classic {
  border: 1px solid #444;
  border-radius: 3px;
}