/*! tailwindcss v2.0.3 | MIT License | https://tailwindcss.com */





/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */



*,

::after,

::before {

	box-sizing: border-box

}



:root {

	-moz-tab-size: 4;

	-o-tab-size: 4;

	tab-size: 4

}



html {

	line-height: 1.15;

	-webkit-text-size-adjust: 100%;

	-webkit-user-select: none; /* Safari */

    -ms-user-select: none; /* IE 10 and IE 11 */

    user-select: none; /* Standard syntax */

}



body {

	margin: 0;

	overflow: hidden;

}



body {

	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'

}



hr {

	height: 0;

	color: inherit

}



abbr[title] {

	-webkit-text-decoration: underline dotted;

	text-decoration: underline dotted

}



b,

strong {

	font-weight: bolder

}



code,

kbd,

pre,

samp {

	font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;

	font-size: 1em

}



small {

	font-size: 80%

}



sub,

sup {

	font-size: 75%;

	line-height: 0;

	position: relative;

	vertical-align: baseline

}



sub {

	bottom: -.25em

}



sup {

	top: -.5em

}



table {

	text-indent: 0;

	border-color: inherit

}



button,

input,

optgroup,

select,

textarea {

	font-family: inherit;

	font-size: 100%;

	line-height: 1.15;

	margin: 0

}



button,

select {

	text-transform: none

}



[type=button],

[type=reset],

[type=submit],

button {

	-webkit-appearance: button;

	cursor:pointer;

}



legend {

	padding: 0

}



progress {

	vertical-align: baseline

}



[type=search] {

	-webkit-appearance: textfield;

}



summary {

	display: list-item

}



blockquote,

dd,

dl,

figure,

h1,

h2,

h3,

h4,

h5,

h6,

hr,

p,

pre {

	margin: 0

}



button {

	background-color: transparent;

	background-image: none

}



button:focus {

	outline: 1px dotted;

	outline: 5px auto -webkit-focus-ring-color

}



fieldset {

	margin: 0;

	padding: 0

}



ol,

ul {

	list-style: none;

	margin: 0;

	padding: 0

}



html {

	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

	line-height: 1.5

}



body {

	font-family: inherit;

	line-height: inherit

}



*,

::after,

::before {

	box-sizing: border-box;

	border-width: 0;

	border-style: solid;

	border-color: #e5e7eb

}



hr {

	border-top-width: 1px

}



img {

	border-style: solid

}



textarea {

	resize: vertical

}



input::-moz-placeholder,

textarea::-moz-placeholder {

	opacity: 1;

	color: #9ca3af

}



input:-ms-input-placeholder,

textarea:-ms-input-placeholder {

	opacity: 1;

	color: #9ca3af

}



input::placeholder,

textarea::placeholder {

	opacity: 1;

	color: #9ca3af

}



[role=button],

button {

	cursor: pointer

}



table {

	border-collapse: collapse

}



h1,

h2,

h3,

h4,

h5,

h6 {

	font-size: inherit;

	font-weight: inherit

}



a {

	color: inherit;

	text-decoration: inherit

}



button,

input,

optgroup,

select,

textarea {

	padding: 0;

	line-height: inherit;

	color: inherit

}



code,

kbd,

pre,

samp {

	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace

}



audio,

canvas,

embed,

iframe,

img,

object,

svg,

video {

	display: block;

	vertical-align: middle

}



img,

video {

	max-width: 100%;

	height: auto

}



html {

	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif

}



body {

	font-size: .875rem;

	line-height: 1.25rem;

	line-height: 1.5;

	letter-spacing: 0

}



/* .box {

	margin: 1rem;

	padding: 1rem

} */



.bg-danger {

	--tw-bg-opacity: 1;

	background-color: rgba(254, 226, 226, var(--tw-bg-opacity))

}



.bg-info {

	--tw-bg-opacity: 1;

	background-color: rgba(254, 243, 199, var(--tw-bg-opacity))

}



.diagramStyling {

	--tw-bg-opacity: 1;

	background-color: rgba(229, 231, 235, var(--tw-bg-opacity))

}



h1 {

	font-weight: 700;

	font-size: 1.7rem;

	line-height: 2.5rem;

	line-height: 1;

	margin-bottom: .75rem

}



h2 {

	font-weight: 700;

	font-size: 1.875rem;

	line-height: 2.25rem;

	line-height: 1;

	margin-bottom: .75rem

}



h3 {

	font-weight: 600;

	font-size: 1.5rem;

	line-height: 2rem;

	line-height: 1;

	margin-bottom: .75rem

}



h4 {

	font-weight: 600;

	font-size: 1.25rem;

	line-height: 1.75rem;

	line-height: 1;

	margin-bottom: .75rem

}



a {

	--tw-text-opacity: 1;

	color: rgba(3, 102, 214, var(--tw-text-opacity));

	text-decoration: none;

	transition-property: background-color, border-color, color, fill, stroke;

	transition-timing-function: cubic-bezier(.4, 0, .2, 1);

	transition-duration: 150ms;

	transition-duration: .2s

}



.button a,

.sidebar-nav a,

.topnav-link a {

	--tw-text-opacity: 1;

	color: rgba(98, 127, 145, var(--tw-text-opacity))

}



.button a:hover,

.sidebar-nav a:hover,

.topnav-link a:hover {

	box-shadow: inherit

}



footer a {

	--tw-text-opacity: 1;

	color: rgba(255, 255, 255, var(--tw-text-opacity));

	box-shadow: 0 -1px 0 0 rgba(255, 255, 255, .35) inset, 0 -2px 0 0 rgba(31, 73, 99, .45) inset

}



footer a:hover {

	--tw-text-opacity: 1;

	color: rgba(255, 255, 255, var(--tw-text-opacity))

}



ol,

p,

ul {

	padding-bottom: .75rem

}



ol,

ul {

	list-style-position: inside;

	list-style-type: disc;

	padding-left: 1rem;

	padding-right: 1rem

}



.inputgroup input,textarea {

	--tw-border-opacity: 1;

	border-color: rgba(75, 85, 99, var(--tw-border-opacity));

	border-radius: 2px;

	border-width: 1px;

	padding: .5rem

}



select {

	--tw-border-opacity: 1;

	border-color: rgba(75, 85, 99, var(--tw-border-opacity));

	border-radius: .125rem;

	border-width: 1px

}



pre {

	background: #272822;

	padding: 1em;

	overflow: auto;

	border-radius: .3em;

	color: #fff;

	max-height:260px;

}



code[class*=lang],

pre[class*=lang],

pre[class*=lang] code {

	background: #272822;

	color: #d4d4d4;

	font-size: 13px;

	text-shadow: none;

	font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;

	direction: ltr;

	text-align: left;

	white-space: pre;

	word-spacing: normal;

	word-break: normal;

	line-height: 1.5;

	-moz-tab-size: 4;

	-o-tab-size: 4;

	tab-size: 4;

	-webkit-hyphens: none;

	-ms-hyphens: none;

	hyphens: none

}



code {

	--tw-bg-opacity: 1;

	background-color: rgba(229, 231, 235, var(--tw-bg-opacity));

	border-radius: .125rem;

	padding-left: .25rem;

	padding-right: .25rem

}



canvas:focus {

	outline: 2px solid transparent;

	outline-offset: 2px

}



.button,

button {

	--tw-bg-opacity: 1;

	background-color: rgba(31, 73, 99, var(--tw-bg-opacity));

	border-radius: .25rem;

	display: inline-block;

	margin: .25rem;

	padding-top: .25rem;

	padding-bottom: .25rem;

	padding-left: .5rem;

	padding-right: .5rem;

	--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

	--tw-text-opacity: 1;

	color: rgba(255, 255, 255, var(--tw-text-opacity))

}



.button:hover,

button:hover {

	--tw-bg-opacity: 1;

	background-color: rgba(98, 127, 145, var(--tw-bg-opacity));

	--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

	--tw-text-opacity: 1;

	color: rgba(255, 255, 255, var(--tw-text-opacity));

	transition-property: background-color, border-color, color, fill, stroke;

	transition-timing-function: cubic-bezier(.4, 0, .2, 1);

	transition-duration: 150ms;

	transition-duration: .2s

}



.bigger {

	font-weight: 700;

	margin-top: .5rem;

	margin-bottom: .5rem;

	padding-top: 1rem;

	padding-bottom: 1rem;

	padding-left: 1rem;

	padding-right: 1rem

}



.sidebar-nav>a {

	border-radius: .5rem;

	display: block;

	font-weight: 600;

	padding-top: .25rem;

	padding-bottom: .25rem;

	padding-left: 1rem;

	padding-right: 1rem

}



.sidebar-nav>a:hover {

	--tw-bg-opacity: 1;

	background-color: rgba(31, 73, 99, var(--tw-bg-opacity));

	--tw-text-opacity: 1;

	color: rgba(243, 244, 246, var(--tw-text-opacity))

}



.topnav-link {

	border-radius: .5rem;

	padding-top: .5rem;

	padding-bottom: .5rem;

	padding-left: .5rem;

	padding-right: .5rem;

	--tw-text-opacity: 1;

	color: rgba(255, 255, 255, var(--tw-text-opacity))

}



.topnav-link:hover {

	--tw-bg-opacity: 1;

	background-color: rgba(98, 127, 145, var(--tw-bg-opacity));

	--tw-shadow: 0 0 #0000;

	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

	--tw-text-opacity: 1;

	color: rgba(255, 255, 255, var(--tw-text-opacity))

}



.sample-item {

	margin-top: .5rem;

	margin-bottom: .5rem;

	padding-left: .5rem;

	padding-right: .5rem;

	width: 15rem

}



.sample-item-inner {

	--tw-bg-opacity: 1;

	background-color: rgba(249, 250, 251, var(--tw-bg-opacity));

	border-radius: .5rem;

	height: 100%;

	overflow: hidden;

	--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)

}



.sample-item-inner h2 {

	font-size: 1.125rem;

	line-height: 1.75rem;

	padding-top: .5rem;

	padding-left: 1rem

}



.sample-item-inner p {

	justify-content: space-between;

	line-height: 1.25;

	padding: .5rem

}



.sample-item img {

	display: block;

	height: auto;

	width: 100%

}



.feature-grid div {

	--tw-border-opacity: 1;

	border-color: rgba(229, 231, 235, var(--tw-border-opacity));

	border-top-width: 1px;

	margin-top: 2rem;

	padding-top: 2rem

}



.feature-grid:nth-child(n)>:first-child,

.feature-grid:nth-child(n)>:nth-child(2) {

	border-top-width: 0;

	margin-top: 0;

	padding-top: 0

}



@media (min-width:1024px) {

	.feature-grid:nth-child(n)>:nth-child(3) {

		border-top-width: 0;

		margin-top: 0;

		padding-top: 0

	}

}



.container {

	width: 100%

}



#stats{

	width:30%;

	height:25%;

    position: absolute;

    z-index: 1000;

    background: #cccccc40;

    bottom: 0px;

}



#table{

	width:100%;

	height:100%;

    position: absolute;

    z-index: 1001;

    background: #ffffffd6;

    bottom: 0px;

}



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

  #stats{

	  width:100%;

  }

}



@media (min-width:640px) {

	.container {

		max-width: 640px

	}

}



@media (min-width:768px) {

	.container {

		max-width: 768px

	}

}



@media (min-width:1024px) {

	.container {

		max-width: 1024px

	}

}



@media (min-width:1280px) {

	.container {

		max-width: 1280px

	}

}



@media (min-width:1536px) {

	.container {

		max-width: 1536px

	}

}



.space-y-4>:not([hidden])~:not([hidden]) {

	--tw-space-y-reverse: 0;

	margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));

	margin-bottom: calc(1rem * var(--tw-space-y-reverse))

}



.bg-white {

	--tw-bg-opacity: 1;

	background-color: rgba(255, 255, 255, var(--tw-bg-opacity))

}



.bg-nwoods-primary {

	--tw-bg-opacity: 1;

	background-color: rgba(31, 73, 99, var(--tw-bg-opacity))

}



.bg-nwoods-secondary {

	--tw-bg-opacity: 1;

	background-color: rgba(98, 127, 145, var(--tw-bg-opacity))

}



.hover\:bg-nwoods-secondary:hover {

	--tw-bg-opacity: 1;

	background-color: rgba(98, 127, 145, var(--tw-bg-opacity))

}



.border-collapse {

	border-collapse: collapse

}



.border-gray-600 {

	--tw-border-opacity: 1;

	border-color: rgba(75, 85, 99, var(--tw-border-opacity))

}



.rounded {

	border-radius: .25rem

}



.rounded-lg {

	border-radius: .5rem

}



.rounded-xl {

	border-radius: .75rem

}



.border {

	border-width: 1px

}



.border-t {

	border-top-width: 1px

}



.border-b {

	border-bottom-width: 1px

}



.block {

	display: block

}



.inline-block {

	display: inline-block

}



.inline {

	display: inline

}



.flex {

	display: flex

}



.table {

	display: table

}



.grid {

	display: grid

}



.contents {

	display: contents

}



.hidden {

	display: none

}



.flex-col {

	flex-direction: column

}



.flex-col-reverse {

	flex-direction: column-reverse

}



.flex-wrap {

	flex-wrap: wrap

}



.items-start {

	align-items: flex-start

}



.items-center {

	align-items: center

}



.justify-end {

	justify-content: flex-end

}



.justify-center {

	justify-content: center

}



.justify-between {

	justify-content: space-between

}



.flex-grow {

	flex-grow: 1

}



.flex-shrink-0 {

	flex-shrink: 0

}



.font-medium {

	font-weight: 500

}



.font-semibold {

	font-weight: 600

}



.font-bold {

	font-weight: 700

}



.h-6 {

	height: 1.5rem

}



.text-xs {

	font-size: .75rem;

	line-height: 1rem

}



.text-sm {

	font-size: .875rem;

	line-height: 1.25rem

}



.text-base {

	font-size: 1rem;

	line-height: 1.5rem

}



.text-2xl {

	font-size: 1.5rem;

	line-height: 2rem

}



.text-5xl {

	font-size: 3rem;

	line-height: 1

}



.leading-none {

	line-height: 1

}



.leading-tight {

	line-height: 1.25

}



.leading-normal {

	line-height: 1.5

}



.list-none {

	list-style-type: none

}



.my-0 {

	margin-top: 0;

	margin-bottom: 0

}



.my-3 {

	margin-top: .75rem;

	margin-bottom: .75rem

}



.my-4 {

	margin-top: 1rem;

	margin-bottom: 1rem

}



.my-6 {

	margin-top: 1.5rem;

	margin-bottom: 1.5rem

}



.mx-auto {

	margin-left: auto;

	margin-right: auto

}



.mt-0 {

	margin-top: 0

}



.mb-0 {

	margin-bottom: 0

}



.mb-2 {

	margin-bottom: .5rem

}



.mb-3 {

	margin-bottom: .75rem

}



.mb-8 {

	margin-bottom: 2rem

}



.max-w-5xl {

	max-width: 64rem

}



.max-w-screen-lg {

	max-width: 1024px

}



.max-w-screen-xl {

	//max-width: 1280px

}



.min-h-screen {

	min-height: 100vh

}



.opacity-0 {

	opacity: 0

}



.opacity-50 {

	opacity: .5

}



.focus\:outline-none:focus {

	outline: 2px solid transparent;

	outline-offset: 2px

}



.overflow-hidden {

	overflow: hidden

}



.p-0 {

	padding: 0

}



.p-1 {

	padding: .25rem

}



.p-2 {

	padding: .5rem

}



.p-4 {

	padding: 1rem

}



.p-6 {

	padding: 1.5rem

}



.py-0 {

	padding-top: 0;

	padding-bottom: 0

}



.px-0 {

	padding-left: 0;

	padding-right: 0

}



.px-1 {

	padding-left: .25rem;

	padding-right: .25rem

}



.py-2 {

	padding-top: .5rem;

	padding-bottom: .5rem

}



.px-2 {

	padding-left: .5rem;

	padding-right: .5rem

}



.py-3 {

	padding-top: .75rem;

	padding-bottom: .75rem

}



.px-3 {

	padding-left: .75rem;

	padding-right: .75rem

}



.py-4 {

	padding-top: 1rem;

	padding-bottom: 1rem

}



.px-4 {

	padding-left: 1rem;

	padding-right: 1rem

}



.py-6 {

	padding-top: 1.5rem;

	padding-bottom: 1.5rem

}



.px-8 {

	padding-left: 2rem;

	padding-right: 2rem

}



.px-12 {

	padding-left: 3rem;

	padding-right: 3rem

}



.pb-0 {

	padding-bottom: 0

}



.pt-4 {

	padding-top: 1rem

}



.pb-4 {

	padding-bottom: 1rem

}



.pb-8 {

	padding-bottom: 2rem

}



.pb-14 {

	padding-bottom: 3.5rem

}



.pb-16 {

	padding-bottom: 4rem

}



.static {

	position: static

}



.fixed {

	position: fixed

}



.absolute {

	position: absolute

}



.relative {

	position: relative

}



.top-0 {

	top: 0

}



.resize {

	resize: both

}



* {

	--tw-shadow: 0 0 #0000

}



.shadow {

	--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);

	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)

}



.shadow-lg {

	--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)

}



.hover\:shadow-none:hover {

	--tw-shadow: 0 0 #0000;

	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)

}



* {

	--tw-ring-inset: var(--tw-empty, );

	/*!*/

	/*!*/

	--tw-ring-offset-width: 0px;

	--tw-ring-offset-color: #fff;

	--tw-ring-color: rgba(59, 130, 246, 0.5);

	--tw-ring-offset-shadow: 0 0 #0000;

	--tw-ring-shadow: 0 0 #0000

}



.ring {

	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);

	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);

	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)

}



.focus\:ring:focus {

	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);

	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);

	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)

}



.text-center {

	text-align: center

}



.text-white {

	--tw-text-opacity: 1;

	color: rgba(255, 255, 255, var(--tw-text-opacity))

}



.text-gray-100 {

	--tw-text-opacity: 1;

	color: rgba(243, 244, 246, var(--tw-text-opacity))

}



.text-gray-700 {

	--tw-text-opacity: 1;

	color: rgba(55, 65, 81, var(--tw-text-opacity))

}



.text-gray-800 {

	--tw-text-opacity: 1;

	color: rgba(31, 41, 55, var(--tw-text-opacity))

}



.text-nwoods-secondary {

	--tw-text-opacity: 1;

	color: rgba(98, 127, 145, var(--tw-text-opacity))

}



.hover\:text-white:hover {

	--tw-text-opacity: 1;

	color: rgba(255, 255, 255, var(--tw-text-opacity))

}



.italic {

	font-style: italic

}



.uppercase {

	text-transform: uppercase

}



.lowercase {

	text-transform: lowercase

}



.underline {

	text-decoration: underline

}



.no-underline {

	text-decoration: none

}



.hover\:no-underline:hover {

	text-decoration: none

}



.tracking-normal {

	letter-spacing: 0

}



.tracking-wide {

	letter-spacing: .025em

}



.visible {

	visibility: visible

}



.invisible {

	visibility: hidden

}



.break-words {

	overflow-wrap: break-word

}



.w-6 {

	width: 1.5rem

}



.w-12 {

	width: 3rem

}



.w-64 {

	width: 16rem

}



.w-auto {

	width: auto

}



.w-4\/5 {

	width: 80%

}



.w-5\/6 {

	width: 83.333333%

}



.w-full {

	width: 100%;

	padding:0;

	height:100%

}



.z-20 {

	z-index: 20

}



.z-30 {

	z-index: 30

}



.z-50 {

	z-index: 50

}



.gap-x-12 {

	-moz-column-gap: 3rem;

	column-gap: 3rem

}



.gap-y-10 {

	row-gap: 2.5rem

}



.grid-cols-1 {

	grid-template-columns: repeat(1, minmax(0, 1fr))

}



.grid-cols-2 {

	grid-template-columns: repeat(2, minmax(0, 1fr))

}



.row-span-2 {

	grid-row: span 2/span 2

}



.transform {

	--tw-translate-x: 0;

	--tw-translate-y: 0;

	--tw-rotate: 0;

	--tw-skew-x: 0;

	--tw-skew-y: 0;

	--tw-scale-x: 1;

	--tw-scale-y: 1;

	transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))

}



.transition {

	transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;

	transition-timing-function: cubic-bezier(.4, 0, .2, 1);

	transition-duration: 150ms

}



@-webkit-keyframes spin {

	to {

		transform: rotate(360deg)

	}

}



@keyframes spin {

	to {

		transform: rotate(360deg)

	}

}



@-webkit-keyframes ping {

	100%,

	75% {

		transform: scale(2);

		opacity: 0

	}

}



@keyframes ping {

	100%,

	75% {

		transform: scale(2);

		opacity: 0

	}

}



@-webkit-keyframes pulse {

	50% {

		opacity: .5

	}

}



@keyframes pulse {

	50% {

		opacity: .5

	}

}



@-webkit-keyframes bounce {

	0%,

	100% {

		transform: translateY(-25%);

		-webkit-animation-timing-function: cubic-bezier(.8, 0, 1, 1);

		animation-timing-function: cubic-bezier(.8, 0, 1, 1)

	}

	50% {

		transform: none;

		-webkit-animation-timing-function: cubic-bezier(0, 0, .2, 1);

		animation-timing-function: cubic-bezier(0, 0, .2, 1)

	}

}



@keyframes bounce {

	0%,

	100% {

		transform: translateY(-25%);

		-webkit-animation-timing-function: cubic-bezier(.8, 0, 1, 1);

		animation-timing-function: cubic-bezier(.8, 0, 1, 1)

	}

	50% {

		transform: none;

		-webkit-animation-timing-function: cubic-bezier(0, 0, .2, 1);

		animation-timing-function: cubic-bezier(0, 0, .2, 1)

	}

}



@media (min-width:640px) {

	.sm\:block {

		display: block

	}

	.sm\:hidden {

		display: none

	}

	.sm\:flex-row {

		flex-direction: row

	}

	.sm\:flex-nowrap {

		flex-wrap: nowrap

	}

	.sm\:p-0 {

		padding: 0

	}

	.sm\:px-6 {

		padding-left: 1.5rem;

		padding-right: 1.5rem

	}

	.sm\:pb-20 {

		padding-bottom: 5rem

	}

	.sm\:w-1\/2 {

		width: 50%

	}

	.sm\:grid-cols-3 {

		grid-template-columns: repeat(3, minmax(0, 1fr))

	}

}



@media (min-width:768px) {

	.md\:space-y-1>:not([hidden])~:not([hidden]) {

		--tw-space-y-reverse: 0;

		margin-top: calc(.25rem * calc(1 - var(--tw-space-y-reverse)));

		margin-bottom: calc(.25rem * var(--tw-space-y-reverse))

	}

	.md\:block {

		display: block

	}

	.md\:flex {

		display: flex

	}

	.md\:hidden {

		display: none

	}

	.md\:flex-row {

		flex-direction: row

	}

	.md\:mb-6 {

		margin-bottom: 1.5rem

	}

	.md\:min-h-screen {

		min-height: 100vh

	}

	.md\:overflow-y-auto {

		overflow-y: auto

	}

	.md\:px-0 {

		padding-left: 0;

		padding-right: 0

	}

	.md\:px-8 {

		padding-left: 2rem;

		padding-right: 2rem

	}

	.md\:pb-0 {

		padding-bottom: 0

	}

	.md\:pl-4 {

		padding-left: 1rem

	}

	.md\:text-left {

		text-align: left

	}

	.md\:w-40 {

		width: 10rem

	}

	.md\:w-48 {

		width: 12rem

	}

	.md\:w-2\/5 {

		width: 40%

	}

	.md\:w-3\/5 {

		width: 60%

	}

	.md\:w-full {

		width: 100%

	}

	.md\:grid-cols-4 {

		grid-template-columns: repeat(4, minmax(0, 1fr))

	}

}



@media (min-width:1024px) {

	.lg\:text-4xl {

		font-size: 2.25rem;

		line-height: 2.5rem

	}

	.lg\:mr-0 {

		margin-right: 0

	}

	.lg\:ml-4 {

		margin-left: 1rem

	}

	.lg\:px-0 {

		padding-left: 0;

		padding-right: 0

	}

	.lg\:px-4 {

		padding-left: 1rem;

		padding-right: 1rem

	}

	.lg\:w-48 {

		width: 12rem

	}

	.lg\:grid-cols-3 {

		grid-template-columns: repeat(3, minmax(0, 1fr))

	}

}



@media (min-width:1280px) {

	.xl\:max-w-screen-xl {

		max-width: 1280px

	}

}







leaflet-marker-label{z-index:9999}







html, body, #wrapper{

	height: 100%;

	width: 100%;

}

body.leaflet-dragging{

	cursor: grab;

}





h1{ margin: 0; }

label.login, label.input {

    /* Other styling... */

    text-align: left;

    clear: both;

    float:left;

	padding: 5px;

	width:100px;

    margin-right:4px;

}



.inputgroup input, textarea, select{

  font-family: inherit; 

  text-transform: inherit; 

  font-size: inherit;

  display: block; 

  padding: .4em;

}



.inputgroup input, textarea, select{

  font-family: inherit; 

  text-transform: inherit; 

  font-size: inherit;

  display: block;

  width:200px;

  padding: .4em;

}

.inputgroup{

	margin:2px 7px;

	display: flex;

	flex-flow: row wrap;

	align-items: center;

	width: 310px;

}

textarea { height: 80px; resize: none; }



.formBtn { 

  width: 47%;

  display: inline-block;

  background: cornflowerblue;

  color: #fff;

  font-weight: 100;

  font-size: 1.2em;

  border: none;

  height: auto;

  padding:10px 5px;

}



#FormLoginheader,#AddNodeheader{

	padding:20px; 

	cursor:move; 

	background:cornflowerblue; 

	color:white;

}



.formBtn:hover { 

  background: royalBlue;

}



#close,#closeLogin{

	background: none;

	position: fixed;

	top: 0px;

	right: 0px;

	padding: 5px;

}



#login{

	float: right;

	width: 45px;

    text-align: center;

    padding: 0.4em;

    border: 1px solid #333;

	border-radius: 0.125rem;

}



#login:hover{

	background:cornflowerblue;

	cursor:pointer;

	color:white;

}



.leaflet-control-attribution{

	display: none;

}

.leaflet-touch .leaflet-control-layers-toggle {

    width: 30px;

    height: 30px;

}

.leaflet-retina .leaflet-control-layers-toggle {

    background-image: url(images/layers-2x.png);

    background-size: 23px 23px;

}

.leaflet-control-layers-base{

	white-space:nowrap;

}

.leaflet-control-layers-selector [type=radio]{

	width:20px;

}

.leaflet-touch .leaflet-control-geocoder-icon {

    width: 23px;

    height: 23px;

}

.leaflet-control-geocoder-form{

	margin-bottom:5px;

}

.leaflet-control-scale-line{

	background: none;

    text-align: right;

    border: none;

	color: white;

}

section .leaflet-control-layers-list{

	width:150px;

	padding:5px;

}

#map{

	float:left;

}



.mapDiagram {

	height: 100%;

	width: 100%;

}

#myDiagramDiv {

	z-index: 700;

}

.list{

	cursor: pointer;

	white-space: nowrap;

	width:100%;

	padding:0px 2px;

}

.list:hover{

	background:orange;

}

.panel{

	font-size:smaller;

	position: absolute;

	z-index: 1000;

	background: white;

	right: 0px;

	top:0px;

	padding: 5px;

	width:250px;

	box-shadow: 7px 5px 50px #000000;

	min-height: 40px;

}

#mapType{

	padding: 5px;

	width:180px;

	float: left;

}

#area{

	margin-top: 33px;

    width: 100%;

}



.down, .up{

	float:left;

	padding: 3px 5px;

	border-radius: 5px;

	margin: 2px 0px;

	border : 1px solid #333;

	cursor:pointer;

}

.down{

	background:red;

	color: white;

}

.up{

	background:lime;

	margin-left:2px;

}

.datetime{

	padding: 3px 0px;

	border-radius: 5px;

	margin: 2px 0px;

	border : 1px solid #fff;

	float:right;

}



select{

	/* min-width:110px; */

}

#autoreload{

	width:100%;

}

.lastdown{

	color:red;

	float:right;

	margin-left:5px;

}

.lastup{

	color:black;

	float:right;

	margin-left:5px;

}

.tooltip {

  cursor:pointer;

  position: relative;

  border: 1px solid white;

}



.tooltip .tooltiptext {

  visibility: hidden;

  background-color: #333;

  color: #fff;

  text-align: left;

  border-radius: 6px;

  padding: 5px 10px;

  margin-left:3px;



  /* Position the tooltip */

  position: absolute;

  z-index: 1;

}



.tooltip:hover .tooltiptext {

  visibility: visible;

}





#overlay{

  width: 100%;

  height: 100%;

  background: #ffffff2b;

  position: fixed;

  top:50%;

  left:50%;

  z-index:999;

  transform: translate(-50%,-50%);

  -webkit-transform: translate(-50%,-50%);

}



#AddNode,#FormLogin {

  width:320px;

  font-size: smaller;

  padding-bottom: 10px;

  text-align: center;

  background: #fff;

  position: fixed;

  top:50%;

  left:50%;

  z-index:1000;

  transform: translate(-50%,-50%);

  -webkit-transform: translate(-50%,-50%);

  box-shadow: 7px 15px 40px #000000;

}



.icon{

	width: 16px;

	padding: 2px;

	display:inline;

	background: red;

	border-radius: 10px;

	margin: 0px 3px 4px 0px;

}

.trouble{

	cursor:pointer;

}



#snackbar1 {

	display: flex;

	align-items: center;

	justify-content: center;

	background-color: #ff57228a;

	color: #fff;

	text-align: center;

	font-size:smaller;

	max-width:50%;

	border-radius: 2px;

	padding: 2px 5px;

	position: fixed;

	z-index: 1000;

	bottom: 0px;

	left: 0px;

}



#snackbar {

  visibility: hidden;

  background-color: #2196f3;

  color: #fff;

  font-size:small;

  text-align: center;

  border-radius: 3px;

  padding: 5px 10px;

  position: fixed;

  z-index: 1000;

  left: 50%;

  transform: translate(-50%,-50%);

  -webkit-transform: translate(-50%,-50%);

  box-shadow: 0px 8px 30px #000000;

  bottom: 15px;

}



#snackbar.show {

  visibility: visible;

  -webkit-animation: fadein 0.5s, fadeout 0.5s 7.5s;

  animation: fadein 0.5s, fadeout 0.5s 7.5s;

}



@-webkit-keyframes fadein {

  from {bottom: 0; opacity: 0;} 

  to {bottom: 30px; opacity: 1;}

}



@keyframes fadein {

  from {bottom: 0; opacity: 0;}

  to {bottom: 30px; opacity: 1;}

}



@-webkit-keyframes fadeout {

  from {bottom: 30px; opacity: 1;} 

  to {bottom: 0; opacity: 0;}

}



@keyframes fadeout {

  from {bottom: 30px; opacity: 1;}

  to {bottom: 0; opacity: 0;}

}



/* Show the snackbar when clicking on a button (class added with JavaScript) */

#snackbar.show {

  visibility: visible; /* Show the snackbar */

  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.

  However, delay the fade out process for 2.5 seconds */

}



/* Animations to fade the snackbar in and out */

@-webkit-keyframes fadein {

  from {bottom: 0; opacity: 0;}

  to {bottom: 10px; opacity: 1;}

}



@keyframes fadein {

  from {bottom: 0; opacity: 0;}

  to {bottom: 10px; opacity: 1;}

}



@-webkit-keyframes fadeout {

  from {bottom: 10px; opacity: 1;}

  to {bottom: 0; opacity: 0;}

}



@keyframes fadeout {

  from {bottom: 10px; opacity: 1;}

  to {bottom: 0; opacity: 0;}

}



.tabs-box{

  color:#000;

  width:100%;

}

.tabs-box .acord{

 position:relative;

 overflow:hidden;

}

.tabs-box .acord:hover{

	font-weight:bold;

	background:#e9e9e9;

}

.tabs-box .acord label{

  position:relative;

  z-index: 1000;

  padding:0 0 0 18px;

  cursor:pointer;

  width:auto;

  overflow: hidden;

  white-space: nowrap;

  max-width: 139px;

  float:left;

}

.tabs-box .acord label i{

  display:block;

  position:absolute;

  top:0;

  right:0;

  width:40px;

  text-align: center;

}

.tabs-box .acord label,

.tabs-box .acord label i,

.tabs-box .acord i.fa-chevron-circle-down{

}

.tabs-box .acord i.fa-chevron-circle-down{

  position:absolute;

  z-index: 1111;

  top:0;

  left:0;

  width: 40px;

  text-align: center;

  -moz-transition:all .2s linear 0s;

  -webkit-transition:all .2s linear 0s;

  transition:all .2s linear 0s;

}



.tabs-box .acord input{

  display:none;

}



.tabs-box .content{

  position:relative;

  overflow:hidden;

  -moz-transition:height 1s linear 0s;

  -webkit-transition: height 1s linear 0s;

  transition: height 1s linear 0s;

  height:0;

  text-align:left;

  direction:ltr;

  width:100%;

  padding-left:18px

}



.tabs-box input[type="checkbox"]:checked ~ div.content{

  height:auto;

  color: #666;

}

.tabs-box input[type="checkbox"]:checked ~ i.fa-chevron-circle-down{

	transform:rotate(180deg);

}

.icon {

    display: inline;

    background: red;

    border-radius: 10px;

	position: absolute;

    z-index: 1111;

    top: 0;

    left: 0;

    width: 11px;

	margin:3px;

	padding:1px;

    text-align: center;

    -moz-transition: all .2s linear 0s;

    -webkit-transition: all .2s linear 0s;

    transition: all .2s linear 0s;

}

#online,#offline{

	max-height: 300px;

    overflow-y: auto;

    overflow-x: hidden;

	cursor:pointer;

}



.icon.online{

	background:lime;

}



#custom{

    position: fixed;

    z-index: 700;

    background: none;

	width:50px;

	left:40px;

}



.control{

	margin: 2px;

    text-align: center;

}

.control a{

	color:black;

}

.toggle-line,.toggle-label,.search,.toggle-chart,#div-zoom{

	/* display:block; */

	/* width: 30px; */

    /* height: 30px; */

    /* line-height: 30px; */

	/* background:#fff; */

	/* text-align:center; */

	/* border-bottom: 1px solid #ccc; */

	/* cursor:pointer; */

    text-align: center;

    display: table;

    vertical-align: middle;

    padding: .34rem;

	//margin: .25rem;

	margin:0px auto;

	cursor:pointer;

}

.toggle-line,.toggle-label,.search,.toggle-chart,.reload{

    border-radius: 2px 2px 0px 0px;

	margin:0px auto;

}

#div-keyword{

	top: 72px;

    left: 74px;

    position: fixed;

    background: #fff;

}

#div-cpu{

	top: 312px;

	position: fixed;

    background: #fff;

	text-align:center;

}

#div-traffic{

	top: 347px;

	position: fixed;

    background: #fff;

	text-align:center;

}

#div-user{

	top: 382px;

	position: fixed;

    background: #fff;

	text-align:center;

}

#div-zoom{

	top: 427px;

	position: fixed;

    background: #fff;

	text-align:center;

}

a#zoom,a#reload,a#cpu,a#traffic,a#user{

	width: 30px;

    height: 30px;

    line-height: 30px;

	/* border-radius:4px; */

	line-height: 1.1;

    font-size: small;

}

pre{

	font-size:smaller;

}

#message{

	width:100%;

}

.jconfirm-holder{

	width: 300px;

	padding: 40px;

	margin: 0px auto;

}

#showpanel{

	right:0px;

}

#hidepanel{

	right: 250px;

}

#hidepanel,#showpanel{

	z-index: 1000;

	top:0px;

	position: absolute;

	background: #fff;

	font-weight: bold;

	padding: 8px 12px;

    line-height: 1.16;

    font-size: 20px;

	border-top: none;

	background-clip: padding-box;

	cursor: pointer;

	min-height: 40px;

	width:40px;

	text-align:center;

}

#logo{

	z-index: 1000;

    position: fixed;

	cursor: pointer;

	background:white;

	width:180px;

}

#jointalk{

	z-index: 1000;

    position: absolute;

    right: 50px;

    cursor: pointer;

	bottom:0px;

	width:120px;

}

#supportus{

	z-index: 1000;

    position: absolute;

    right: 5px;

    cursor: pointer;

	bottom:0px;

	width:120px;

}



/*the container must be positioned relative:*/

.autocomplete {

  position: relative;

  display: inline-block;

}



.autocomplete-items {

  width: 200px;

  overflow: auto;

  border: 1px solid #d4d4d4;

  border-bottom: none;

  border-top: none;

  z-index: 99;

  margin-left: 69px;

  /*position the autocomplete items to be the same width as the container:*/

  top: 100%;

  left: 0;

  right: 0;

}



.autocomplete-items div {

  padding: 3px;

  cursor: pointer;

  background-color: #fff; 

  border-bottom: 1px solid #d4d4d4; 

  text-align: left;

}



/*when hovering an item:*/

.autocomplete-items div:hover {

  background-color: #e9e9e9; 

}



/*when navigating through the items using the arrow keys:*/

.autocomplete-active {

  background-color: DodgerBlue !important; 

  color: #ffffff; 

}



.ui-front {

    z-index: 1001;

	background:#ddd

}



#ip, #name, #nmarea, #phone, #object, #source{

	padding-left:10px;

}



#coordinat{

	padding-left:8px;

	font-size:x-small;

}



.ui-menu{

	max-height: 200px;

    overflow-x: hidden;

	overflow-y: scroll;

	background: white;

}



.inputgroup [type=radio] { 

  position: absolute;

  opacity: 0;

  width: 0;

  height: 0;

}



/* IMAGE STYLES */

.inputgroup [type=radio] + img {

  cursor: pointer;

  padding:2px;

  width:20px;

  border-radius:10px;

  outline: 1px solid #000;

}



/* CHECKED STYLES */

.inputgroup [type=radio]:checked + img {

  outline: 2px solid #000;

  border-radius:10px;

  background: lime;

  padding:2px;

}



.iconobject {

	padding:0px; 

	margin:7px 10px 0px 10px; 

	width:20px;; 

	border-radius: 10px;

}



.caption{

    display: flex;

    font-size: smaller;

    align-items: center;

    justify-content: center;

}



.remember:hover{

	background:#ccc;

}



/* MAKE IT CUTE ----- */

.tabs {

	position: relative;

	display: flex;

	overflow: hidden;

}



.tabby-tab {

	flex: 1;

}

.tabby-tab label {

	display: block;

	box-sizing: border-box;

	cursor: pointer;

	transition: background 0.5s ease;

	

}



.tabby-tab .titletab label:hover {

	background: #6495ed80;

}



.tabby-tab .titletab {

	padding: 12px;

	background: #ddd;

	color:#999

}



.tabby-content {

	position: absolute;

	left: 0; bottom: 0; right: 0;

	top: 40px; 

	transition: 

	opacity 0.8s ease,

	transform 0.8s ease		;

	opacity: 0;

	transform: scale(0.1);

	transform-origin: top left;

	

}



.tabby-content img {

	float: left;

	margin-right: 20px;

	border-radius: 8px;

}





/* MAKE IT WORK ----- */



.tabby-tab [type=radio] { display: none; }

[type=radio]:checked ~ label {

	background: white;

	color:black;

	z-index: 2;

}



[type=radio]:checked ~ label ~ .tabby-content {

	z-index: 1;

	

	/* show/hide */

		opacity: 1;

		transform: scale(1);

}



.foto {

  width:66px;

  height:66px;

  margin-right:1px;

  border:1px solid #00000033;

  position:relative;

  float:left;

  display:flex;

  background:#eee;

}

img.aspect-fit {

  max-height: 100%;

  max-width: 100%;

  object-fit: contain;

  height:100%;

  width:100%;

}



.leaflet-draw-toolbar.leaflet-bar.menu-mikhmon.leaflet-control a.leaflet-menu-mikhmon{

	background-image: url(/img/mikhmon.png);

    background-repeat: no-repeat;

    background-size: 60%;

}



.leaflet-draw-toolbar.leaflet-bar.center-map.leaflet-control a.leaflet-center-map{

	background-image: url(/img/center.png);

    background-repeat: no-repeat;

    background-size: 60%;

}



.leaflet-draw-toolbar.leaflet-bar.autofit-map.leaflet-control a.leaflet-autofit-map{

	background:#fff;

}



.leaflet-draw-toolbar.leaflet-bar.center-map.leaflet-control,

.leaflet-draw-toolbar.leaflet-bar.autofit-map.leaflet-control{

	margin-top:0px;

}



.subtitle{

	font-size: small;

    line-height: 16px;

    margin-top: 5px;

    background: beige;

    padding: 5px;

	width:100%;

}

.jconfirm-title{

	width:100%;

}



.apodp .tgl {

  display: none;

}



.apodp .tgl,

  .apodp .tgl:after,

  .apodp .tgl:before,

  .apodp .tgl *,

  .apodp .tgl *:after,

  .apodp .tgl *:before,

  .apodp .tgl + .tgl-btn {

  box-sizing: border-box;

}



.apodp .tgl::-moz-selection,

  .apodp .tgl:after::-moz-selection,

  .apodp .tgl:before::-moz-selection,

  .apodp .tgl *::-moz-selection,

  .apodp .tgl *:after::-moz-selection,

  .apodp .tgl *:before::-moz-selection,

  .apodp .tgl + .tgl-btn::-moz-selection,

  .apodp .tgl::selection,

  .apodp .tgl:after::selection,

  .apodp .tgl:before::selection,

  .apodp .tgl *::selection,

  .apodp .tgl *:after::selection,

  .apodp .tgl *:before::selection,

  .apodp .tgl + .tgl-btn::selection {

  background: none;

}



.apodp .tgl + .tgl-btn {

	outline: 0;

	display: block;

	height: 2.44em;

	padding: 0.29em;

	border-radius: 3px;

	position: relative;

	cursor: pointer;

	-webkit-user-select: none;

	-moz-user-select: none;

	-ms-user-select: none;

	user-select: none;

}



.apodp .tgl + .tgl-btn:after,

  .apodp .tgl + .tgl-btn:before {

  position: relative;

  display: block;

  content: "";

  width: 50%;

  height: 100%;

}



.apodp .tgl + .tgl-btn:after {

  left: 0;

}



.apodp .tgl + .tgl-btn:before {

  display: none;

}



.apodp .tgl:checked + .tgl-btn:after {

  left: 50%;

}



.apodp .tgl-skewed + .tgl-btn {

  overflow: hidden;

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

  transition: all 0.2s ease;

  font-family: sans-serif;

  background: #333;

}



.apodp .tgl-skewed + .tgl-btn:after,

  .apodp .tgl-skewed + .tgl-btn:before {

  display: inline-block;

  transition: all 0.2s ease;

  width: 100%;

  text-align: center;

  position: absolute;

  line-height: 2em;

  font-weight: bold;

  color: #fff;

  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);

}



.apodp .tgl-skewed + .tgl-btn:after {

  left: 100%;

  content: attr(data-tg-on);

  color:#000;

  text-shadow: 0 0px 0 #fff;

}



.apodp .tgl-skewed + .tgl-btn:before {

  left: 0;

  content: attr(data-tg-off);

}



.apodp .tgl-skewed + .tgl-btn:active {

  background: #333;

}



.apodp .tgl-skewed + .tgl-btn:active:before {

  left: -10%;

}



.apodp .tgl-skewed:checked + .tgl-btn {

  background: #86d993;

}



.apodp .tgl-skewed:checked + .tgl-btn:before {

  left: -100%;

}



.apodp .tgl-skewed:checked + .tgl-btn:after {

  left: 0;

}



.apodp .tgl-skewed:checked + .tgl-btn:active:after {

  left: 10%;

}

#ip:disabled{

	background-color:#333;

}



img.dropdown{

	width:32px;

	height:32px;

}



* {

	list-style: none;

}

.ddcontainer {

	width:100px;

	position: absolute;

}



.box {

	height: 100%;

	user-select: none;

	overflow: hidden;

}



.box .by_default {

	padding:0px;

	background: #dde1e7;

	border-radius: 5px;

	position: relative;

	cursor: pointer;

	z-index: 2;

	padding-left: 5px;

}



.box .by_default li {

	padding: 0px;

}



.box .by_default:before {

	content: "";

	position: absolute;

	top: 8px;

	right: 5px;

	width: 0.5rem;

	height: 0.5rem;

	border: 2.5px solid;

	border-color: transparent transparent #333 #333;

	transform: rotate(-45deg);

}



.box .options {

	position: absolute;

	left: 0;

	width: 120px;

	border-radius: 5px;

	transform: translateY(-100%);

	opacity: 0;

	box-shadow: -3px -3px 7px #fffdfdcc,

				  3px 3px 5px rgba(94, 104, 121, 0.342);

}



.box .options li {

	padding: 0px;

	cursor: pointer;

}



.box .sharing {

	display: flex;

	align-items: center;

}



.box .sharing .share-icon {

	margin-right: 2px;

}



.box.active .options {

	opacity: 1;

	transform: translateY(0%);

	background:lightyellow;

	padding: 0px 10px;

}



.box.active .by_default:before {

	top: 13px;

	transform: rotate(-225deg);

}

img.dropdown{

	cursor: pointer;

    padding: 2px;

    width: 20px;

    height: 20px;

    border-radius: 10px;

    outline: 1px solid #000;

}

.ddcontainer p{

	font-size:smaller;

	padding: 7px 5px;

}



.leaflet-routing-container.leaflet-bar.leaflet-routing-container-hide.leaflet-control{

	display:none;

}





#via{

	width:170px;

	color:black;

	margin-left:2px;

}

.colorPickWrapper {

    position: relative;

    width: 0;

    height: 0;

}



#colorPick * {

  -webkit-transition: all linear 0.2s;

  -moz-transition: all linear 0.2s;

  -ms-transition: all linear 0.2s;

  -o-transition: all linear 0.2s;

  transition: all linear 0.2s;

}



#colorPick {

  background: rgba(0, 0, 0, 0.85);

  -webkit-backdrop-filter: blur(15px);

  position: absolute;

  border-radius: 5px;

  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);

  padding: 5px 0px;

  font-family: "Open Sans", sans-serif;

  width: 270px;

  box-sizing: content-box;

  z-index: 9999999;

}



#colorPick span {

  user-select: none;

  font-size: 9pt;

  text-transform: uppercase;

  font-weight: bold;

  color: #bbb;

  margin-bottom: 5px;

  display: block;

  clear: both;

}



.customColorHash {

  border-radius: 5px;

  height: 23px;

  width: 122px;

  margin: 1px 4px;

  padding: 0 4px;

  border: 1px solid #babbba;

  outline: none;

}

.customColorHash.error {

  border-color: #ff424c;

  color: #ff424c;

}



.colorPickButton {

  border-radius: 5px;

  width: 20px;

  height: 20px;

  margin: 0px 2px;

  cursor: pointer;

  display: inline-block;

  border: thin solid #eee;

}



.colorPickDummy {

  background: #fff;

  border: 1px dashed #bbb;

}



.picker {

	border-radius: 2px;

	width: 28px;

	height: 28px;

	cursor: pointer;

	-webkit-transition: all linear .2s;

	-moz-transition: all linear .2s;

	-ms-transition: all linear .2s;

	-o-transition: all linear .2s;

	transition: all linear .2s;

	border: 1px solid #4b5563;

}

#linewidth{

	float: left;

    width: 50px;

    height: 50px;

	border:1px solid #eee;

	border-top-left-radius:0px;

	border-bottom-left-radius:0px;

	border-top-right-radius:5px;

	border-bottom-right-radius:5px;

	text-align: center;

}

#linepreview{

	width:220px; 

	height:50px;

	border-top-left-radius:5px;

	border-bottom-left-radius:5px;

	border-top-right-radius:0px;

	border-bottom-right-radius:0px;

	padding: 14px 5px;

	float:left;

	border:1px solid #eee;

}

.btn-color{

	background-color:#3388ff;

}



@font-face {

  font-family: 'Assistant-Regular';

  src: url('fonts/Assistant-Regular.ttf') format('truetype');

}

* {

 font-family: 'Assistant-Regular','Assistant', sans-serif;

}



#wrapper {

    width:515px;

    margin:5% auto;

    border:1px solid #ccc;

    padding:5px 0 5px 5px;

    overflow:hidden

}

#wrapper li {

    float:left;

    margin-right:5px;

    width:115px;

    height:100px;

    border:1px solid #ccc;

    text-align:center;

    padding:3px

}

#wrapper li img {

    max-height:98%;

    max-width:98%;

    cursor:pointer

}

.modal {

    position:fixed;

    background-color:rgba(0, 0, 0, 0.5);

    height:100%;

    width:100%;

    top:0;

    left:0;

    display:none

}

.modalWrap {

    border:1px solid #000;

    background:#fff;

    width:400px;

    max-height:400px;

    margin:5% auto;

    position:relative

}

.modalWrap #close {

    display:block;

    height:24px;

    width:24px;

    border-radius:8px;

    cursor:pointer;

    background:#900;

    color:#fff;

    font:14px Georgia, "Times New Roman", Times, serif;

    line-height:24px;

    text-align:center;

    position:absolute;

    top:-10px;

    right:-10px

}

#yourDiv {

    padding:5px;

    text-align:center;

}

#yourDiv img {

    max-height:100%;

    max-width:100%

}

.leaflet-mouse-marker{

	background-color:#fff0;

}

.area-tooltip {

	background: #fff0;

	border: 0px solid white;;

	color: cyan;

	box-shadow: none;

	text-align:center;

	line-height: 1;

	animation: neon .08s ease-in-out infinite alternate;

}



.area-tooltip-labelarea {

	background: #fff0;

	border: 0px solid white;;

	color: floralwhite;

	box-shadow: none;

	text-align:center;

	line-height: 1;

	font-size:small;

	animation: neon .08s ease-in-out infinite alternate;

}



.area-tooltip-labelarea u{

	font-size:larger;

}



@keyframes neon {

  from {

    text-shadow:

    0 0 6px rgba(202,228,225,0.92),

    0 0 30px rgba(202,228,225,0.34),

    0 0 12px rgba(30,132,242,0.52),

    0 0 21px rgba(30,132,242,0.92),

    0 0 34px rgba(30,132,242,0.78),

    0 0 54px rgba(30,132,242,0.92);

  }

  to {

    text-shadow:

    0 0 6px rgba(202,228,225,0.98),

    0 0 30px rgba(202,228,225,0.42),

    0 0 12px rgba(30,132,242,0.58),

    0 0 22px rgba(30,132,242,0.84),

    0 0 38px rgba(30,132,242,0.88),

    0 0 60px rgba(30,132,242,1);

  }

}



.blink {

  animation: blink-animation 1s steps(5, start) infinite;

  -webkit-animation: blink-animation 1s steps(5, start) infinite;

  color:red;

}

@keyframes blink-animation {

  to {

    visibility: hidden;

  }

}

@-webkit-keyframes blink-animation {

  to {

    visibility: hidden;

  }

}