::selection {color:var(--primaryForeground) !important;background-color:var(--primaryBackground) !important;}

*[font='title'] {font-family: 'Bakbak One', cursive !important;}
*[font='digit'] {font-family: 'Inconsolata', monospace !important;}
*[font='text'] {font-family: 'Noto Sans', sans-serif !important;}

a { cursor: pointer; }
html[device='desktop'] onmobile,
html[device='tablet'] onphone, html[device='desktop'] onphone,
html[device='mobile'] ontablet, html[device='desktop'] ontablet,
html[device='mobile'] ondesktop, html[device='tablet'] ondesktop
{display: none;}

body wrapper content {
	display:block;
}

body wrapper content.removed:after {
	display:block;content:'';
	position: fixed;
	top:0;left:0;right:0;bottom:0;
	background: rgba(0,0,0,0.5);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.ui.modal, .ui.segment, .ui.accordion, .ui.dropdown:not(.button) > .text {color: #000000;}

.ui.dropdown .sizer {display:none;}
.ui.dropdown .menu {scrollbar-width: thin};

.ui.table.inherit {color:inherit;}
.ui.backblur {backdrop-filter: blur(2px) !important;}
.ui.translucent {background-color: rgba(255,255,255,0.8) !important;backdrop-filter: blur(5px) brightness(5) !important;}
.ui.placeholder .header:not(:first-child)::before, .ui.placeholder .image:not(:first-child)::before, .ui.placeholder .paragraph:not(:first-child)::before {
	height: auto !important;
}

.ui.label.dot {width:10px !important;height:10px !important;border-radius: 100%;padding:0 !important;margin: 5px !important;}
.readmore[aria-expanded="false"] + a[data-readmore-toggle] {
	display: block;
	background-color: rgba(255,255,255,0.25);
	backdrop-filter: blur(5px);
	margin:-5px 0 0 0;
	padding: 10px 0 0 0;
	opacity: 1 !important;
	text-align: center;
	cursor: pointer
}
.readmore[aria-expanded="true"] + a[data-readmore-toggle] {
	display: block;
	margin:0;
	padding: 10px 0 0 0;
	opacity: 1 !important;
	text-align: center;
	cursor: pointer
}

drag {display:block;overflow-y:hidden;overflow-x:auto;scrollbar-width:thin;}
drag.active * {pointer-event:none !important;}
drag scroll {display:block;}
drag scroll > .ui.menu {margin: 0 !important;}

body {overflow-x: hidden !important;}

body ._navigator {}

.navigator {}
.navigator .ui.button {
	border-radius: 0 !important;
	z-index: 993;
	position: fixed !important;
	top: auto !important; bottom: 0px !important;
	font-size: 10px !important;
	text-align: center; margin: 0 !important;
	padding: 1em;
	min-width: 0px;
	height: 67px;
}
.navigator .ui.button i.icon {font-size: 24px !important; margin: 0px !important;}
.navigator .ui.button text { display: block !important; margin-top: 1em; font-weight: 900 !important; line-height: 1 }
.navigator .ui.button.texts text { font-size: 1.75rem !important; margin: 0 !important; }
body.mobile .navigator .ui.button.texts text { font-size: 1.25rem !important; }
.navigator .ui.button.icon {display: flex;}
.navigator .ui.button.icon i.icon {align-self:center;width: 100%;font-size: 2rem !important;}
.navigator .ui.button.icon text { display: none !important; }

.navigator .ui.button.approve { /*border-top-left-radius: 0;border-bottom-left-radius: 0;border-bottom-right-radius: 0;*/ }
.navigator .ui.button.decline { /*border-top-right-radius: 0;border-bottom-right-radius: 0;border-bottom-left-radius: 0;*/ }
.navigator .ui.button.loading { font-size: 1.5rem !important; }

html[device='mobile'] .navigator .ui.button { border-radius: 0; }

body:not(.scroll) .navigator.static { position:static;text-align:center;margin:0;padding-top:1em; }
body:not(.scroll) .navigator.static .ui.button { border-radius:5px; }

.ui.header.warning > .icon {margin-bottom:10px !important;}

.ui.table td.disabled {
	background-image: url(/pattern/funky-lines) !important;
	background-size: auto !important;
	background-repeat: repeat !important;
	background-attachment: fixed !important;
}
.ui.table tr.activated {
	background-color: #eeeeee;
}

.counter-blocks { counter-reset: n; }
.counter-blocks .counter-block n::before { display: inline-block; content: counter(n); counter-increment: n; }

#ct-header {
	background:var(--primaryBackground);
	color:var(--primaryForeground);
	height: 50px;
}

#ct-header .ui.header.title {
	color:var(--primaryForeground) !important;
	margin:0;
	margin-top: -.25em !important;
	display: inline;
}

#ct-header .ui.header.title .sub.header {
	color:inherit;
	opacity: 0.75;
	font-size: 11px;
	margin-top:-2px;
}

#ct-header .ui.subtitle {
	color:var(--primaryForeground) !important;
	padding-top: 5px;
	padding-bottom: 10px;
	font-size: 24px;
	line-height: 1 !important;
}
#ct-header .ui.subtitle .sub.header {
	color:inherit !important;
	font-size: 14px;
	font-weight: normal;
	padding-bottom: 5px;
}
#ct-header .ui.subtitle text {
	font-weight: bold;
	padding-top: 5px;
}
body.mobile #ct-header .ui.container {
	padding-left: .5em;
	padding-right: .5em;
}
#ct-header drag scroll .ui.menu {
	padding-bottom: 5px;
}
#ct-header drag scroll .ui.menu > .item {
	color:var(--secondaryBackgroundOnPrimary) !important;
	font-weight: bold;
}
#ct-header drag scroll .ui.menu > .item:hover {
	background-color:var(--secondaryBackgroundOnPrimary) !important;
	color:var(--secondaryForegroundOnPrimary) !important;
	opacity: 1 !important;
}

#ct-header .ui.navigation.menu {
	
}
#ct-header .ui.navigation.menu > a.item {
	color:var(--primaryForeground) !important;
	padding: .5em 1em;
}
#ct-header .ui.navigation.menu > a.item.button {
	background:var(--secondaryBackground) !important;
	color:var(--secondaryForeground) !important;
	font-weight: bold;
}
#ct-header .ui.navigation.menu > a.item.bars {
	margin-right: -.3em;
}
#ct-header .ui.navigation.menu > a.item .icon {
	margin:0;
	font-size: 1.5em;
}

#ct-header .ui.navigation.menu > a.item.link {

}

#ct-header .ui.navigation.menu > a.item:not(.ui.button) {
	margin-left: -.5em;
}

#ct-header .ui.container .ui.menu {
	margin-bottom: .5em;
}

html:not([device='desktop']) #ct-header .ui.navigation.menu > a.item.link {
	display: none;
}
html:not([device='desktop']) #ct-header .ui.container {
	margin:0;
}

/*body.scroll.over #ct-header { position: fixed; top:0; left:0; right:0; z-index: 999; }*/
body.scroll.over #ct-header .ui.container { visibility: hidden; height: 1px; }

#ct-header-over { display: none; }
body.scroll.over #ct-header-over { display: block; height: 125px; }

#ct-header-over .ui.header.title {
	color:var(--primaryForeground) !important;
	margin:0;
	margin-top: -.25em !important;
	display: inline;
}
#ct-header-over .ui.header.subtitle {
	color:var(--primaryForeground) !important;
	padding-bottom: 0.5em;
}

#ct-menu {
	padding-bottom:60px;
	display: none;
}
#ct-menu .navigator {
	display: none;
}

#ct-menu .ui.segment.link {
	padding:0.5em;
}

#ct-menu .ui.segment.link .ui.header {
	margin:0;
}

#ct-menu .ui.segment.link .ui.header > .ui.image {
	width:auto;
	height: 42px !important;
	object-fit: cover;
	margin-right: 0;
	margin-bottom: 7px;
}

#ct-menu .ui.segment.link .ui.header.mini > .ui.image {
	width:auto;
	height: 36px !important;
}

#ct-menu .ui.segment.link.button {
	background:var(--secondaryBackgroundOnBody) !important;
	color:var(--secondaryForegroundOnBody) !important;
}

#ct-menu .ui.segment.link.button .ui.header {
	color:var(--secondaryForegroundOnBody) !important;
	opacity: 1 !important;
}

#ct-menu .ui.segment.link.manage, #ct-menu .ui.segment.link.button.secondary {
	background:var(--primaryBackgroundOnBody) !important;
	color:var(--primaryForegroundOnBody) !important;
}

#ct-menu .ui.segment.link.manage .ui.header, #ct-menu .ui.segment.link.button.secondary .ui.header {
	color:var(--primaryForegroundOnBody) !important;
	opacity: 1 !important;
}

#ct-menu .ui.close.button {
	background:var(--secondaryBackgroundOnBody) !important;
	color:var(--secondaryForegroundOnBody) !important;
	min-width:50px;
	margin: 15px;
	font-size: 24px;
	width: 100px !important; margin-left: -50px !important; left: 50% !important; 
}

#ct-menu-float {
	position:fixed;
	bottom:0;left:0;right:0;
	margin:0;
	z-index:992;
	
}

body.mobile #ct-menu-float {
	
}

#ct-menu-float .ui.menu .item text {
	margin-top: .4em;
}

#ct-menu-float .ui.menus {
	display: none;
	margin-bottom: 10px;
}

body.mobile #ct-menu-float .ui.menus {
	margin-bottom: 0;
}

#ct-menu-float .ui.menus a.app {
	
}

#ct-menu-float .ui.menus a.app i.icon {
	font-size: 40px !important;
}

#ct-menu-float .ui.menus a.app img.image {
	height: 40px !important;
	width: auto !important;
}

#ct-menu-float .ui.menus a.app text {
	display: block;
	margin-top: 5px;
	font-size: 11px
}

body.mobile #ct-menu-float .ui.menus a.app i.icon {
	font-size: 32px !important;
}

body.mobile #ct-menu-float .ui.menus a.app img.image {
	height: 32px !important;
}

body.mobile #ct-menu-float .ui.menus a.app text {
	font-size: 10px
}

#ct-menu-float .ui.bar {
	padding: 0;
	background: rgba(255,255,255,0.75) !important;
	backdrop-filter: blur(5px);
}

#ct-menu-float .ui.bar text {
	font-size: 10px !important
}

#ct-menu-float .ui.bar .ui.menu .item {
	visibility: hidden;
}

#ct-menu-float .ui.view {
	overflow: auto;
	overflow-x: hidden;
}

#ct-content {
	
}

/* ITEM */

.ui.itema {
	display:inline-block;
	position:relative;
	color:#000;
	margin:2px;
	text-align: center
}

.ui.itema > .ui.segment {
	display:inline-block;
	width:70px;height:70px;
	padding:8px;
	border:4px solid rgba(0,0,0,0.25);
	margin:0;
	text-shadow: #000000 1px 1px 0;
	text-align: center
}

.ui.itema.active > .ui.segment {
	box-shadow: 0px 0px 5px rgba(0,0,0,1);
	transform: scale(1.1);
}

.ui.itema > .ui.segment.inverted.white {
	background: #fff;
	color: #000;
}

.ui.itema > .ui.segment > .ui.image {
	-webkit-filter: drop-shadow(0px 0px 1px rgba(0,0,0,.5));
	width:48px;height:48px;
	object-fit: contain;
}

.ui.itema > .ui.segment > .quantity {
	position:absolute;
	bottom:-2px;right:3px;
	font-size:13px;
	font-weight:900;
	font-family:'Inconsolata';
	color: #ffffff;
}

.ui.itema > .ui.segment > .title {
	position:absolute;
	top:-1px;left:0;right:0;
	margin-top: 5px;
	font-size:11px;
	font-weight:400;
	font-family:'Bakbak One';
	color: #ffffff;
}

.ui.itema > .ui.segment > .code {
	position:absolute;
	top:-15px;left:2px;
	margin:2px;
	font-size:18px;
	font-weight:700;
	font-family:'Bakbak One';
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

.ui.itema > .ui.segment > .expiry {
	position:absolute;
	bottom:-3px;left:2px;
	font-size:11px;
	font-weight:700;
	margin:0;
}

.ui.itema > .name {
	display: block;
	font-weight:bold;
	font-size:10px;
	font-family:'Noto Sans';
}

.ui.itema.small > .ui.segment {width:50px;height:50px;padding:5px;border-width: 3px}
.ui.itema.small > .ui.segment > .image {width:33px;height:33px;}
.ui.itema.small > .ui.segment > .quantity {bottom:-3px;font-size:11px;}
.ui.itema.small > .ui.segment > .title {top:-6px;font-size:10px;}
.ui.itema.small > .ui.segment > .code {top:-10px;margin:1px;font-size:12px;}
.ui.itema.small > .ui.segment > .expiry {font-size:8px;bottom:-4px;}
.ui.itema.small > .name {font-size:9px;}

.ui.itema.large > .ui.segment {width:100px;height:100px;padding:10px;border-width: 5px;}
.ui.itema.large > .ui.segment > .image {width:70px;height:70px;}
.ui.itema.large > .ui.segment > .quantity {bottom:0px;font-size:18px;}
.ui.itema.large > .ui.segment > .title {top:1px;font-size:12px;}
.ui.itema.large > .ui.segment > .code {top:-18px;margin:2px;font-size:24px;}
.ui.itema.large > .ui.segment > .expiry {font-size:12px;bottom:-2px;}
.ui.itema.large > .name {font-size:12px;}

.ui.itema.massive > .ui.segment {width:150px;height:150px;padding:10px;border-width: 7px;}
.ui.itema.massive > .ui.segment > .image {width:115px;height:115px;}
.ui.itema.massive > .ui.segment > .quantity {bottom:1px;font-size:20px;}
.ui.itema.massive > .ui.segment > .title {top:3px;font-size:13px;}
.ui.itema.massive > .ui.segment > .code {top:-20px;margin:2px;font-size:26px;}
.ui.itema.massive > .ui.segment > .expiry {font-size:14px;bottom:-1px;}
.ui.itema.massive > .name {font-size:15px;}

.ui.itema.highlight { transform: scale(1.1); }
.ui.itema.highlight > .ui.segment { box-shadow: 0px 0px 5px rgba(0,0,0,0.5); border-style: dotted; }

.ui.itema.surprise { transform: scale(1); }
.ui.itema.surprise > .ui.segment { background: #aaaaaa !important; color: #000 !important; border-style: solid; box-shadow: none; }
.ui.itema.surprise > .ui.segment > .image {content:url(/icon/app);}
.ui.itema.surprise > .ui.segment > .quantity,
.ui.itema.surprise > .ui.segment > .title,
.ui.itema.surprise > .ui.segment > .code,
.ui.itema.surprise > .ui.segment > .expiry,
.ui.itema.surprise > .name {display: none !important}

/* SMART CARD */

.ui.smart.card {text-align: left;border-radius: 5px !important;width:85.6mm;word-break: break-all;color:#000;font-size:16px;}
.ui.smart.card.portrait {width:53.98mm;height:85.6mm;}
.ui.smart.card.fluid {width:100%;}
.ui.smart.card > .head.content {padding:.75em .75em 0 .75em;color:inherit;font-size:20px;}
.ui.smart.card > .head.content > .logo.text {margin-right:.3em;}
.ui.smart.card > .head.content > .logo.image {width:24px;height:24px;object-fit:contain;margin-right:.5em;}
.ui.smart.card > .body.content {padding:.5em 1em;color:inherit;}
.ui.smart.card > .body.content .ui.header.line {color:inherit;font-size:32px;}
.ui.smart.card > .body.content > .ui.table {color:inherit;}
.ui.smart.card > .foot.content {padding:.5em 1em;color:inherit;font-size:16px;}
.ui.smart.card > .foot.content > .ui.table {color:inherit;}
.ui.smart.card > .foot.content > .ui.table td .logo.text {font-size:32px;}
.ui.smart.card > .foot.content > .ui.table td .logo.image {width:40px;height:40px;object-fit:contain}

.ui.smart.card.inverted {color:#fff;}
.ui.smart.card.inverted.dark {color:#000;}

.ui.smart.card.shadow {text-shadow: #000000 1px 1px 0;}
.ui.smart.card.shadow > .foot.content > .ui.table td .logo.image {-webkit-filter: drop-shadow(0px 0px 1px rgba(0,0,0,.5));}
.ui.smart.card.shadow > .foot.content > .ui.table td avatar {box-shadow: 0px 0px 1px rgba(0,0,0,.5);}

.ui.smart.card.shadow.dark, .ui.smart.card.shadow.light {text-shadow: #ffffff 1px 1px 0;}
.ui.smart.card.shadow.dark > .foot.content > .ui.table td .logo.image,
.ui.smart.card.shadow.light > .foot.content > .ui.table td .logo.image
{-webkit-filter: drop-shadow(0px 0px 1px rgba(255,255,255,.5));}
.ui.smart.card.shadow.dark > .foot.content > .ui.table td avatar,
.ui.smart.card.shadow.light > .foot.content > .ui.table td avatar
{box-shadow: 0px 0px 1px rgba(255,255,255,.5);}

/* SMART CARD (STACKED) */

.ui.cards.stacked {
	display: block !important;
	position: relative;
	z-index: 99;
	margin-top:-10px;
}
.ui.cards.stacked .card {
	width: auto;
	height: 100px !important;
	min-height: 100px;
	overflow: hidden;
}
.ui.cards.stacked .card > .content.body, .ui.cards.stacked .card .content.foot
{
	display: none;
}

.ui.cards.stacked .card:first-child {
	margin-top: 10px;
}

.ui.cards.stacked .card:not(:first-child) {
	margin-top: -60px;
}

.ui.cards.stacked:not(.active):not(.reverse) .card:last-child,
.ui.cards.stacked.reverse:not(.active) .card:first-child
{
	height: auto !important;
	overflow: unset;
}

.ui.cards.stacked .card.active,
.ui.cards.stacked:not(.active):not(.reverse) .card:first-child,
.ui.cards.stacked.reverse:not(.active) .card:last-child
{
	height: auto !important;
	overflow: unset;
	z-index: 99;
}

.ui.cards.stacked .card.active > .content,
.ui.cards.stacked:not(.active):not(.reverse) .card:first-child > .content,
.ui.cards.stacked.reverse:not(.active) .card:last-child > .content
{
	display: block;
}

.ui.cards.stacked .card.active + .card,
.ui.cards.stacked:not(.active):not(.reverse) .card:first-child + .card,
.ui.cards.stacked.reverse:not(.active) .card:last-child ~ .card
{
	margin-top: auto !important
}

.ui.cards.stacked:not(.active):not(.reverse) .card:last-child::before,
.ui.cards.stacked.reverse:not(.active) .card:first-child::before,
.ui.cards.stacked.active .card:not(.active):last-child::before
{
	display: inline-block;
	position: absolute;
	bottom:0;left:0;right:0;
	text-align: center;
	font-family: icons;
	font-size: 32px;
	content: " ";
	padding:.75em;
	padding-top:0;
	opacity: 0.5;
}
.ui.cards.stacked .card.active::before,
.ui.cards.stacked:not(.active):not(.reverse) .card:first-child::before,
.ui.cards.stacked.reverse:not(.active) .card:last-child::before
{
	display: none;
}