:root {
	--body-background: #eee;
	--header-color: #ba296f;
	--header-font: 'Cinzel', Arial, sans-serif;
	--container-background: #eee;
	--body-color: #141111;
	--body-font: 'Genos', Arial, sans-serif;
	--bold-font: 'Cinzel', Arial, sans-serif;
	--button-color: #ba296f;
	--bottom-bar-border: #555555;
	--link-color: #ba296f;
	--link-hover: #ba296f;
	--idle-color: #c5b7b9;
	--user-background: #091114;
	--user-online: #060;
	--tool-color: #091114;
	--tool-border: #888;
	--lightbox-toolbar: rgba(0, 0, 0, 0.5);
	--gray-anyway: #d5c9c7;
	--green-anyway: #0a0;
	--red-anyway: #c00;
	--yellow-anyway: #ba296f;
}

body { background: var(--body-background); font-size: 15pt; color: var(--body-color); margin:0; padding:0 }
.container, .main, .inner, .inner-window, .uk-card { background:var(--container-background) !important; color:var(--body-color) !important; font-family: var(--body-font); overflow-x: hidden; overflow-y:scroll; -ms-overflow-style: none; scrollbar-width: none; scrollbar-color: var(--body-background) }
.container { padding-bottom: 2em }
input { background: transparent !important }
.container::-webkit-scrollbar { display: none }
.main::-webkit-scrollbar { display: none }
.inner::-webkit-scrollbar { display: none }
.inner-window::-webkit-scrollbar { display: none }
.uk-card::-webkit-scrollbar { display: none }
.inner-window { position: relative; padding: 1rem 0.25rem }
.inner { padding: 1rem 0rem 6rem }
.inner-toggler { float: left; padding: 0.6rem 0.3rem }
.inner-toggler-centered { float: none; padding: inherit }
.closer { float: left; padding: 0 1rem 0 0; cursor: pointer }
.chat-toggler { color: var(--body-color) !important; cursor: pointer }
.chat-toggler:hover, .closer:hover { color: var(--yellow-anyway) !important }

@keyframes blinker { 0% { opacity: 0 } 50% { opacity: 1 } 100% { opacity: 0 }  }
@keyframes swinger { 0% { transform: rotate(-15deg) } 50% { transform: rotate(15deg) } 100% { transform: rotate(-15deg) }  }
@keyframes slidingIn { 0% { top: 100% } 100% { top: 0% }}
.idle { position: absolute; top:100%; left:0; display: none }
.active { position: absolute; top:0; left:0; display: block; animation: 0.8s slidingIn }
.swinging { visibility: hidden; margin-left: 0.5rem; animation: 2s infinite swinger }

.panel-header { z-index: 120; background: var(--body-background); border-bottom: 1px solid var(--idle-color); position: fixed; top: 0; left: 0; animation: 0.8s slidingIn }

h1, h2, h3, h4, h5, h6 { text-transform:uppercase; text-align:center; font-family: var(--header-font); font-weight: 700; color: var(--header-color) !important; margin: 0 !important; padding: 0 !important }
.uk-button-default, h3.uk-card-title { text-transform:uppercase; text-align:center; font-family: var(--body-font); background: var(--header-color) !important; color: var(--body-background) !important }
h6 { text-align: right; border-bottom: 1px solid var(--idle-color); padding-right: 1rem }
h6.simple { text-align: left; border: none; padding-left: 1rem }
b, em { font-family: var(--bold-font); color: var(--header-color); font-weight: 800 }
th { font-family: var(--body-font); font-weight: 700; color: var(--header-color) !important }
strong { color: var(--header-color); font-weight: 800 }
small { font-size:90% !important; color: var(--link-color) }
.uk-form-icon { color: var(--body-color) !important }
input:focus { background: var(--container-background)!important; color: var(--body-color)!important; outline:none!important }
a, a:visited { color: var(--link-color); text-decoration: none }
a.toggler { color: var(--body-color) }
a:hover { transition: all 0.25s; color: var(--link-hover) !important; text-decoration: none }
a.white { color: var(--body-color) !important }
a.pink { color: var(--idle-color) !important }
a label { font-size: 66%; text-transform: uppercase; display: block; padding: 0.5em 0 1em }
table td { font-size: 100% }
.bookingSwitch { margin: 0.25rem;}
.uk-label, .uk-label > * { cursor: pointer; background: var(--header-color); color: var(--body-background) }
.uk-label.silent { background: var(--body-background); color: var(--body-color) !important; }
.uk-label:hover, .uk-label.silent:hover { background: var(--red-anyway); color: var(--body-background) !important }
.uk-description-list > dt { position: relative; color: var(--header-color) }

[type="checkbox"]:not(:checked), [type="checkbox"]:checked { position: absolute; opacity: 0; pointer-events: none }
[type="checkbox"]+span:not(.lever) { position: relative; padding-left: 35px; cursor: pointer; display: inline-block;
	height: 25px; line-height: 25px; font-size: 1rem; user-select: none }
[type="checkbox"]+span:not(.lever):before, [type="checkbox"]:not(.filled-in)+span:not(.lever):after { content: ''; position: absolute;	top: 0; left: 0; width: 18px; height: 18px; z-index: 0; border: 1px solid var(--link-color); border-radius: 1px; margin-top: 3px; transition: .2s }
[type="checkbox"]:not(.filled-in)+span:not(.lever):after { border: 0; transform: scale(0) }
[type="checkbox"]:checked+span:not(.lever):before { top: -4px; left: -5px; width: 12px; height: 22px; border-top: 1px solid transparent; border-left: 1px solid transparent; border-right: 1px solid var(--header-color); border-bottom: 1px solid var(--header-color); transform: rotate(40deg); backface-visibility: hidden; transform-origin: 100% 100% }

[type="radio"]:not(:checked), [type="radio"]:checked { position: absolute; opacity: 0; pointer-events: none }
[type="radio"]+span:not(.lever) { position: relative; padding-left: 35px; cursor: pointer; display: inline-block;
	height: 25px; line-height: 25px; font-size: 1rem; user-select: none }
[type="radio"]+span:not(.lever):before, [type="radio"]:not(.filled-in)+span:not(.lever):after { content: ''; position: absolute;	top: 0; left: 0; width: 18px; height: 18px; z-index: 0; border: 1px solid var(--link-color); border-radius: 1px; margin-top: 3px; transition: .2s }
[type="radio"]:not(.filled-in)+span:not(.lever):after { border: 0; transform: scale(0) }
[type="radio"]:checked+span:not(.lever):before { top: -4px; left: -5px; width: 12px; height: 22px; border-top: 1px solid transparent; border-left: 1px solid transparent; border-right: 1px solid var(--header-color); border-bottom: 1px solid var(--header-color); transform: rotate(40deg); backface-visibility: hidden; transform-origin: 100% 100% }

.uk-button-default, .uk-button-primary { background: var(--header-color); font-family: var(--body-font); font-weight: bold; font-size: 90% !important; color: var(--body-background) !important; border:1px solid var(--header-color); padding: 0 30px }
.uk-button-default:hover, .uk-button-primary:hover { transition: all 0.5s; background: var(--red-anyway) !important; color: var(--body-background) !important; border:1px solid var(--body-background) !important; transition: all 0.5s }
.bottom-bar { display: block; margin:1px 0 0 0; height: 5rem; width: 100%; padding: 0.6rem 0.2rem 1.2rem; text-align:center; background: var(--body-background); border-top:1px solid var(--bottom-bar-border) }
.borderless { border: none }
.bottom-bar .uk-icon { font-size: 90%; margin-top: 0.6rem; padding: 0 0.4rem }
.buttons .uk-icon { color: var(--body-color) !important }
.buttons .uk-icon:hover { color: var(--yellow-anyway) !important }
.uk-subnav-pill>a, .uk-subnav-pill:hover { background: var(--background-color); color: var(--header-color) }
.uk-subnav-pill>.uk-active>a { background: var(--background-color); color: var(--header-color) }
.uk-subnav-pill>.uk-active>a:hover { background: var(--background-color); color: var(--header-color) }
.scroller { padding: 0.5rem; background: var(--body-background); border-radius: 50%; position:fixed; bottom:1rem; right:1rem; border: 1px solid var(--idle-color) }

.miniature { display: inline-flex; justify-content: center; align-items: center; position: relative; width: 6rem; height: 6rem; margin: 0.2rem; cursor: pointer; border: 1px solid var(--idle-color); font-size: 60% }
.miniature span { padding: 1rem }
.veiled::after { content:"\02713"; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); color: var(--body-background); width: 6rem; height: 6rem; font-size: 200%; text-align: center; padding: 0 }
.mce-content-body { border: none !important; font-family: var(--body-font) !important; color: var(--body-color) !important; background-color: var(--body-background) !important }

.userIcon { position: relative; display: inline-table; background: var(--user-background); text-align:center }
.userIcon.offline::after { content:""; position: absolute; top:0.2em; right:0.2em; width:0.6em; height:0.6em; background: var(--idle-color); border-radius: 50% }
.userIcon.online::after, .userFixedIcon.online::after { content:""; position:absolute; top:0.2em; right:0.2em; width:0.3em; height:0.3em; background: var(--user-online); border-radius: 50%; animation: blinker 2s linear infinite }
.userIcon.red::after { content:""; position: absolute; top:0.2em; right:0.2em; width:0.8em; height:0.8em; background: var(--yellow-anyway); border-radius: 50%; animation: blinker 2s linear infinite }
.userIcon div, .userFixedIcon div { font-family: var(--header-font); font-size: 60%; display:block; width:100%; text-align:center; margin: 0.2rem auto }
.userIcon img, .userFixedIcon img { border-radius: 50%; width: 3rem; height: 3rem; object-fit: cover; cursor: pointer }
.gallery-thumbnails img { width: 4.8rem; height: 4.8rem; object-fit: cover; padding: 0.12rem; cursor: pointer }

#search-pane { width: 100%; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center }
span.user { flex-basis: 49%; padding-top: 1rem; text-align:center; font-size: 100%; overflow: hidden; cursor: pointer }
span.user b { font-size: 90%; font-family: var(--header-font) }
span.user img { border-radius: 50%; width: 6rem; height: 6rem; object-fit: cover }

div.event { width: 100%; padding: 0; margin-bottom: 1rem; cursor: pointer }
.event img { width: 40%; height: 12rem; object-fit: cover }
.event span { display: inline-block; text-align: right; width: 55%; font-size: 80%; margin-left: 5%; }

div.form, div.payment { width: 100%; cursor: pointer; padding: 0.75rem 0 }
.bookingLink, .paymentLink { cursor: pointer }

.date { display: block; max-width: 8rem; border-radius: 1rem; margin: 1em auto; padding: 0.25rem 1rem; text-align: center; font-size: 80%; background: var(--yellow-anyway); color: var(--body-background) }
.clientName { position: relative; font-family: var(--header-font); color: var(--header-color); cursor: pointer }
.clientName.online::after { content:""; position:absolute; top:0.5em; left:-0.5em; width:0.3em; height:0.3em; background: var(--user-online); border-radius: 50% }
.clientName.living::after { content:""; position:absolute; top:0.5em; left:-0.5em; width:0.3em; height:0.3em; background: var(--yellow-anyway); border-radius: 50%; animation: blinker 0.8s linear infinite }
.clientMessage { width: 100%; height: 1.6em; overflow: hidden; cursor: pointer }
.clientDate { width: 100%; text-align: right; font-size: 80% }

.uk-lightbox { background: var(--body-background) }
.uk-lightbox-caption { font-family: var(--body-font); font-weight: bold; color: var(--body-color) }
.uk-lightbox-toolbar { background: var(--lightbox-toolbar) }
.uk-modal-body, .uk-modal-footer { background: var(--body-background); color: var(--body-color); font-family: var(--body-font) }
.uk-card { padding: 1em 2em }
.uk-badge { background: var(--header-color); color: var(--body-background) !important; text-transform: uppercase; margin-top: 1rem; margin-bottom: 1rem; padding: 0.5rem 1rem !important }
.uk-small-badge { position: absolute; top: -2px; right: 2px; padding: 0.25rem !important }
#seal-section .seal { margin: 1rem auto }

/*.red::after { content: ""; position:absolute; top: 0.2em; right: 0.2em; width: 0.8em; height: 0.8em; background: var(--red-anyway); border-radius: 50%; animation: blinker 1.2s ease-in-out infinite }*/
.userIcon, .userFixedIcon { margin: 0.25rem 1rem }
.userCmd span, .userFixedIcon span { color: var(--idle-color) }
.userCmd span.full, .userFixedIcon span.full { color: var(--header-color) }
.userIcon.flat, .userIcon.flat img { cursor: default }
.userIcon.large img { border-radius: 50%; width: 4.8rem; height: 4.8rem; padding:0.2rem; cursor: pointer }
.userIcon.tiny img { border-radius: 50%; width: 2.8rem; height: 2.8rem; padding:0.2rem }
.userIcon.inProfile::after { top: -1rem !important }
.border-bottom { border-bottom: 1px solid var(--header-color) }
.chat-control { color: var(--header-color); padding-right: 2em; cursor:pointer }
.chat-control:hover { color: var(--body-color) }
.userCmd { padding: 0; margin: 0 1.2rem; cursor: pointer }
#lock-link { cursor: default }

.green { display: inline-block; margin-right: 0.65em; width: 0.65em; height: 0.65em; background-color: #050 !important; border-radius: 50% }
.red { display: inline-block; margin-right: 0.65em; width: 0.65em; height: 0.65em; background-color: #900 !important; border-radius: 50% }
span.blue-grey { display: inline-block; margin-right: 0.65em; width: 0.65em; height: 0.65em; background-color: #666 !important; border-radius: 50% }
.yellow, .arancio { display: inline-block; margin-right: 0.65em; width: 0.65em; height: 0.65em; background-color: #ffab40 !important; border-radius: 50% }
.halfgreen { display: inline-block; margin-right: 0.65em; width: 0.65em; height: 0.65em; background: linear-gradient(135deg, #070 0 50%, #ffab40 50% 100%) !important; border-radius: 50%; animation: blinker 1.2s ease-in-out infinite }
.user-card { display: inline-block; cursor: pointer; margin: 0 0.25em; width: 1.4em; height: 2.4em; padding-top: 0.7em }
.red-card { border: 2px solid #d22; background-color: #d22 !important }
.orange-card { border: 2px solid #fa2; background-color: #fa2 !important }
.yellow-card { border: 2px solid #fd2; background-color: #fd2 !important; color: #000 }
.chat-card { border: 2px solid #999; background-color: #999 !important; color: #000 }
.red-card.cActive, .orange-card.cActive, .yellow-card.cActive, .chat-card.cActive { border: 2px solid var(--body-color) }

.purple { display: inline-block; margin-right: 0.65em; width: 0.65em; height: 0.65em; background-color: #a020f0 !important; border-radius: 50% }
.grey { display: inline-block; margin-right: 0.65em; width: 0.65em; height: 0.65em; background-color: #999 !important; border-radius: 50% }
.blink { display: inline-block; margin-right: 0.65em; width: 0.65em; height: 0.65em; background-color: #ffab40 !important; border-radius: 50%; animation: blinker 1.2s ease-in-out infinite }

#message-pane { float: clear; height: 80%; overflow: hidden; overflow-y:scroll; -ms-overflow-style: none; scrollbar-width: none; padding-bottom: 9rem }
.message-body { padding: 1rem; margin: 0 1rem }
.message-body p { margin: 0 !important }
.messageDate { font-size: 80% }
.pull { width: 85%; margin-right: 15%; border: 1px solid var(--body-background); background: var(--gray-anyway); border-radius: 0 10px 10px 0 }
.push { width: 85%; margin-left: 15%; text-align: right }
.message-shell { margin: 0.5rem 0; padding: 0.5rem }
.message-shell.pull { border-radius: 0 5px 5px 0 }
.message-shell.push { border-radius: 5px 0 0 5px }
.push > .message-body a, .push > .message-body a:visited { color: var(--red-anyway) !important }
#conversation-tools { display: block; position: absolute; bottom: 0; left: 0; height: 7rem; width: 100%; padding-top: 10px; border-top: 1px solid var(--gray-anyway) }
#upload-tools, #image-tools { display: block; position: absolute; bottom: 0; left: 0; height: 4rem; background: var(--tool-color); padding-top:1px }
#conversation-input { width: 100%; resize: none; height: 4rem; margin: 0; border: 1px solid var(--tool-border); padding-right: 4.8em }
#conversation-input:focus { background: var(--body-background) !important; color: var(--body-color) !important }
@media screen and (max-width: 600px) {
	body { font-size: 12pt }
	.event img { width: 40%; height: 6rem; object-fit: cover }
	.userIcon, .userFixedIcon { margin: 0.1rem }
	.userIcon.offline::after { top:-0.1em; right:-0.1em }
	.userIcon.online::after, .userFixedIcon.online::after { top:-0.1em; right:-0.1em }
	.userIcon img, .userFixedIcon img { border-radius: 50%; width: 2.2rem; height: 2.2rem; margin: 0.1rem; cursor: pointer }
	.userCmd { margin: 0 0.8rem }
}