BODY {
	font-family: 'Hubballi', Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

IMG.profile {
	aspect-ratio: 1 / 1;
	border-radius: 50% 50%;
	width: 50%;
}

FORM LABEL {
	display: block;
	padding: 5px;
	text-align: left;
}

FORM .form-control {
	border: 1px solid #CCCCCC;
	border-radius: 3px;
	display: block;
	font-family: 'Hubballi', Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	padding: 5px;
	width: 100%;
}

.p {
	margin: 35px 0;
	padding: 0;
}

.tooltip-top, .tooltip-left, .tooltip-right, .tooltip-bottom {
	position: relative;
}
.tooltip-top::before, .tooltip-left::before, .tooltip-right::before, .tooltip-bottom::before, .tooltip-top::after, .tooltip-left::after, .tooltip-right::after, .tooltip-bottom::after {
	line-height: 1;
	user-select: none;
	pointer-events: none;
	position: absolute;
	display: none;
	opacity: 0;
	text-transform: none; 
	font-size: .9em;
}
.tooltip-top.on::before, .tooltip-left.on::before, .tooltip-right.on::before, .tooltip-bottom.on::before, .tooltip-top.on::after, .tooltip-left.on::after, .tooltip-right.on::after, .tooltip-bottom.on::after {
	display: block;
	opacity: 1;
}
.tooltip-top::before, .tooltip-left::before, .tooltip-right::before, .tooltip-bottom::before {
    content: '';
    z-index: 1001;
    border: 5px solid transparent;
}
.tooltip-top::after, .tooltip-left::after, .tooltip-right::after, .tooltip-bottom::after {
    content: attr(data-tooltip); /* magic! */
    z-index: 1000;
    font-family: Helvetica, sans-serif;
    text-align: center;
    min-width: 3em;
    max-width: 21em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1ch 1.5ch;
    border-radius: .3ch;
    box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
    background: #333;
    color: #fff;
}
.tooltip-top::before {
    bottom: 100%;
    border-bottom-width: 0;
    border-top-color: #333;
}
 
.tooltip-top::after {
    bottom: calc(100% + 5px);
}

.tooltip-top::before, .tooltip-top::after {
    left: 50%;
    transform: translate(-50%, -.5em);
}
.tooltip-left::before {
    top: 50%;
    border-right-width: 0;
    border-left-color: #333;
    left: calc(0em - 5px);
    transform: translate(0, -50%);
}
 
.tooltip-left::after {
    top: 50%;
    right: calc(100% + 5px);
    transform: translate(0, -50%);
}
.btn {
	border: 0;
	background-color: #000000;
	border-radius: 5px;
	color: #FFFFFF;
	cursor: pointer;
	display: inline-block;
	font-family: 'Hubballi', Arial, Helvetica, sans-serif;
	font-size: 1em;
	line-height: 1.1em;
	padding: .5em 1em;
	text-decoration: none;
}

.btn-sec {
	border: 1px solid #AAAAAA;
	background-color: #FFFFFF;
	border-radius: 5px;
	color: #000000;
	cursor: pointer;
	display: inline-block;
	font-family: 'Hubballi', Arial, Helvetica, sans-serif;
	font-size: 1em;
	line-height: 1.2em;
	padding: .5em 1em;
	text-decoration: none;
}

.btn-link {
	background-color: #FFFFFF;
	border: 0;
	color: #000000;
	cursor: pointer;
	display: inline-block;
	font-size: 1em;
	line-height: 1.2em;
	padding: .5em 1em;
	text-decoration: none;
}

.hidden {
	display: none ! important;
}
.inside {
	max-width: 640px;
}
.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}
.d-block {
	display: block;
}
.ms-1, .mx-1, .m-1 {
	margin-left: 0.25em;
}
.ms-2, .mx-2, .m-2 {
	margin-left: 0.5em;
}
.ms-3, .mx-3, .m-3 {
	margin-left: 0.75em;
}
.ms-4, .mx-4, .m-4 {
	margin-left: 1em;
}
.me-1, .mx-1, .m-1 {
	margin-right: 0.25em;
}
.me-2, .mx-2, .m-2 {
	margin-right: 0.5em;
}
.me-3, .mx-3, .m-3 {
	margin-right: 0.75em;
}
.me-4, .mx-4, .m-4 {
	margin-right: 1em;
}
.mt-1, .my-1, .m-1 {
	margin-top: 0.25em;
}
.mt-2, .my-2, .m-2 {
	margin-top: 0.5em;
}
.mt-3, .my-3, .m-3 {
	margin-top: 0.75em;
}
.mt-4, .my-4, .m-4 {
	margin-top: 1em;
}
.mb-1, .my-1, .m-1 {
	margin-bottom: 0.25em;
}
.mb-2, .my-2, .m-2 {
	margin-bottom: 0.5em;
}
.mb-3, .my-3, .m-3 {
	margin-bottom: 0.75em;
}
.mb-4, .my-4, .m-4 {
	margin-bottom: 1em;
}
.cid {
	color: #444444;
	font-family: monospace;
	font-size: 1.2em;
	padding: 15px 0 0 0;
	text-decoration: none;
}
.qrcode IMG {
	margin-left: auto;
	margin-right: auto;
}
.img-loader {
	background: transparent;
	border: 0;
	cursor: pointer;
	margin: 0;
	padding: 15px;
}
.img-loader IMG {
	background-color: #CCCCCC;
	background-image: url( img/open.png );
	background-repeat: no-repeat;
	background-position: center center;
	border-radius: 50%;
	display: block;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: auto;
}
.text-center {
	text-align: center;
}
.validated :invalid {
	border-color: #FF0000;
}
.validated .validation {
	color: #FF0000;
}

#start {
	align-items: center;
	bottom: 0;
	display: flex;
	justify-content: center;
	left: 0;
	line-height: 1.5em;
	overflow-y: auto;
	padding: 0;
	position: fixed;
	right: 0;
	top: 0;
}
#start IMG {
	display: block;
	margin: 0 auto 40px auto;
	max-width: 33%;
	height: auto;
}
#start UL {
	list-style-type: none;
	margin: 0;
	padding: 10px;
}
#start UL LI {
	margin: 0;
	padding: 10px;
}
#start UL LI BUTTON {
	display: block;
	width: 100%;
	font-size: 1.1em;
}
#toolbar {
	align-content: center;
	background: #000000;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	position: absolute;
	top: -15px;
	width: 100%;
	height: 50px;
	z-index: 10;
}

#toolbar BUTTON {
	background-color: #000000;
	border: 0;
	border-radius: 50%;
	color: #FFFFFF;
	cursor: pointer;
	flex-grow: 0;
	margin: 0;
	padding: 10px;
	transition: transform .2s;
	transform: translateY(22px);
}

#toolbar BUTTON .fas {
	font-size: 1.75em;
}

#container {
	align-items: stretch;
	bottom: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	position: absolute;
	top: 35px;
	transition: transform .2s;
}

#container ADDRESS {
	font-style: normal;
}

#container .panel {
	flex-basis: 33.33%;
	flex-grow: 1;
	flex-shrink: 1;
	text-align: center;
	overflow-y: auto;
	padding: 70px 35px 35px 35px;
	position: relative;
}

#container .panel TABLE {
	margin: 0 auto;
}
#container .panel .close {
	background-color: transparent;
	border: 0;
	cursor: pointer;
	padding: 5px;
	position: absolute;
	right: 15px;
	top: 15px;
}
#container .table {
	align-items: flex-start;
	justify-content: space-between;
	display: inline-flex;
	flex-wrap: wrap;
	margin-left: auto;
	margin-right:  auto;
}

#container .table DT {
	margin: 7px 0 5px 0;
	min-width: 150px;
	max-width: 100%;
	text-align: left;
}

#container .table DD {
	flex-grow: 1;
	margin: 0 0 15px 0;
	min-width: min( 300px, 100% );
	max-width: 100%;
	text-align: right;
	white-space: nowrap;
}

#container .table DD A {
	display: inline-flex;
	gap: 15px;
}

#container .table DD A.multiline {
	align-items: center;
}
#container .table DD A:not(.multiline) {
	align-items: baseline;
}

#container .table DD I {
	font-size: 1.2em;
	padding-bottom: 5px;
}

#container .table .break {
	flex-basis: 100%;
}

#scanner {
	background-color: #EAEAEA;
}

#cam {
	aspect-ratio: 1 / 1;
	align-items: center;
	background-color: #444444;
	border-radius: 5px;
	color: #FFFFFF;
	cursor: pointer;
	display: flex;
	justify-content: center;
	margin: 0 auto;
	position: relative;
	width: 100%;
}

#cam.checking::after {
	background-color: rgba( 255, 255, 0, .5 );
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

#cam.success::after {
	background-color: rgba( 0, 255, 0, .5 );
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

#cam.failed::after {
	background-color: rgba( 255, 0, 0, .5 );
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

#cam VIDEO {
	aspect-ratio: 1 / 1;
	background-color: #444;
	border-radius: 5px;
	max-width: 100%;
	object-fit: cover;
}
#cam-helper {
	white-space: nowrap;
}

#scanner-file {
	display: none;
}
#business-qrcode-link, #personal-qrcode-link {
	text-decoration: none;
}
#business-vcard, #business-app, #personal-vcard, #personal-app {
	margin-top: 5px;
	margin-bottom: 5px;
}

@media screen and (max-width: 991px) {
	BODY {
		font-size: 16px;
	}
	#container {
		width: 300%;
	}
	#toolbar {
		justify-content: space-evenly;
	}
	#toolbar BUTTON.on {
		color: #FFF;
		transform: scale(1.5) translateY(15px);
	}
	#container.business {
		transform: translateX(0);
	}
	#container.scanner {
		transform: translateX(-33.33%);
	}
	#container.personal {
		transform: translateX(-66.33%);
	}
}

@media screen and (min-width: 992px) {
	BODY {
		font-size: 22px;
	}
	#container {
		width: 100%;
	}
	#toolbar {
		justify-content: space-around;
	}
}