@import 'https://fonts.googleapis.com/css?family=Open+Sans:wght@400;800&display=swap';
@import 'https://fonts.googleapis.com/css?family=Quattrocento:wght@400;700&display=swap';

/*Color variables*/
:root {
	--body-background: #ffffff;
	--header-color: #111111;
	--header-font: 'Open Sans', Arial, sans-serif;
	--container-background: #ffffff;
	--body-color: #111111;
	--body-font: 'Quattrocento', Arial, sans-serif;
	--button-color: #78776f;
	--bottom-bar-border: #555555;
	--link-color: #78776f;
	--idle-color: #111111;
	--user-background: #091114;
	--user-online: #060;
	--tool-color: #091114;
	--tool-border: #111111;
	--lightbox-toolbar: rgba(0, 0, 0, 0.5);
	--green-anyway: #080;
	--red-anyway: #900;
	--yellow-anyway: #f9aa0b;
}

body { background: var(--body-background); color: var(--body-color); margin:0; padding:0 }
body, .uk-card { background:var(--container-background); color:var(--body-color); font-size:14pt; font-family: var(--body-font); overflow-x: hidden; overflow-y:scroll; -ms-overflow-style: none; scrollbar-width: none; scrollbar-color: var(--body-background) }
.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 { padding: 1rem 0 }
.inner { padding: 1rem 0rem 6rem }
.inner-toggler { float: left; padding: 0.6rem 0 0 1.2rem }
.inner-toggler-centered { float: none; padding: inherit }

@keyframes blinker { 0% { opacity: 0 } 50% { opacity: 1 } 100% { opacity: 0 }  }
@keyframes slidingIn { 0% { margin-left: 100% } 100% { margin-left: 0% }}
@keyframes slidingOut { 0% { margin-left: 0% } 100% { margin-left: 100% }}
.idle { position: absolute; top:0; left:0; display: none; animation: 0.5s slidingOut }
.active { position: absolute; top:0; left:0; display: block; animation: 0.5s slidingIn }

h1, h2, h3, h4, h5, h6, .uk-button-default { font-family: var(--body-font); text-transform:uppercase; font-weight: 800; color: var(--header-color) !important }
h1, h2, h3 { text-align:center }
h1 { font-size: 32pt }
h2 { font-size: 24pt }
h3, h4 { font-size: 14pt;  letter-spacing: 0.15em; font-family: var(--header-font) }
h4 { font-weight: 400; text-align: left }
b, em, strong { font-weight: 700 }
div { margin-top: 1rem; text-align: justify }
small { font-size:90% !important; color: var(--link-color) }
input:focus { background: var(--container-background)!important; color: var(--body-color)!important; outline:none!important }
a { color: var(--link-color) !important; text-decoration: none !important }
a:hover { color: var(--body-color) !important }
a.white { color: var(--body-color) !important }
.uk-section-primary { background: #ea0026 !important }
.uk-section-primary * { color: #FFFFFF !important }
.uk-lightbox-page * { margin-top: 0 !important }

.uk-button-default, .uk-button-primary { background: var(--body-background); font-family: var(--header-font); color: var(--header-color) !important; border:1px solid var(--header-color) }
.uk-button-default:hover, .uk-button-primary:hover { background: var(--idle-color) !important; color: var(--body-color) !important; border:1px solid var(--body-color) !important }
.bottom-bar { display: block; margin:1px 0 0 0; height: 4rem; width: 100%; padding: 0.6rem 1.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, #conversation-tools .uk-icon, .small-bottom-bar .uk-icon { margin-top: 0.6rem; padding: 0 1rem }

.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: transparent; 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 }
.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: 0; border: 1px solid var(--header-color) }
.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 }

/*Checkboxes*/
.permissionStatus { display: inline-block; position: relative; width: 1.2rem; height: 1.2rem }
.permissionStatus.green::after { content: ""; position: absolute; top: 50%; right: 50%; width: 0.8em; height: 0.8em; background: var(--green-anyway); border-radius: 50%; animation: none }
.permissionStatus.red::after { content: ""; position: absolute; top: 50%; right: 50%; width: 0.8em; height: 0.8em; background: var(--red-anyway); border-radius: 50%; animation: none }
.permissionStatus.yellow::after { content: ""; position: absolute; top: 50%; right: 50%; width: 0.8em; height: 0.8em; background: var(--yellow-anyway); border-radius: 50%; animation: none }

.boxes { margin: auto; padding: 0 1rem }
input[type="checkbox"] { display: none }
input[type="checkbox"] + label { display: block; position: relative; padding-left: 35px; margin-bottom: 20px; font: 14px/20px var(--body-font); color: var(--body-color); cursor: pointer }
input[type="checkbox"] + label:last-child { margin-bottom: 0 }
input[type="checkbox"] + label:before { content: ''; display: block; width: 20px; height: 20px; border: 1px solid var(--idle-color); position: absolute; left: 0; top: 0; -webkit-transition: all .12s, border-color .08s; transition: all .25s, border-color .08s
}
input[type="checkbox"]:checked + label:before { width: 10px; top: -5px; left: 5px; border-radius: 0; border: 1px solid var(--header-color); border-top-color: transparent; border-left-color: transparent; -webkit-transform: rotate(45deg); transform: rotate(45deg) }

/*Notifications*/
.notification { font-size: 0.9em }
.notification small { display: block; position: relative }

#event-pane, #archive-pane { padding: 0 0.5rem !important }
#conversation-pane { font-size: 85% }
#message-pane { float: clear; height: 80%; overflow: hidden; overflow-y:scroll; -ms-overflow-style: none; scrollbar-width: none; padding-bottom: 8rem }
.message-body { padding: 0.5rem 0.75rem; margin: 0.5rem 0 }
#message-pane .pull { position: relative; background: var(--idle-color); margin: 0.5rem 5px }
#message-pane .push { position: relative; background: var(--link-color); color: var(--body-background); text-align: right; margin: 0.5rem 5px }
#message-pane .pull::after { display: block; width: 0; content: ""; border: 5px solid transparent; position: absolute; border-right-color: var(--idle-color); border-left: 0; left: -5px; top: calc(50% - 5px) }
#message-pane .push::after { display: block; width: 0; content: ""; border: 5px solid transparent; position: absolute; border-left-color: var(--link-color); border-right: 0; right: -5px; top: calc(50% - 5px) }
.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: 8rem; width: 100%; background: var(--tool-color); padding-top: 2px }
#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 }
.chat-toggler { color: var(--body-background) }
#dynamic-tools a, #editor-tools a { padding: 0 1.2rem }
.read-flag.read::before { padding-right: 1em; color: var(--user-online); content: '\2713' }
.read-flag.unread::before { padding-right: 1em; content: '\22ee' }
#google-maps { position: relative; padding-bottom: 80%; height: 0; overflow: hidden }
#google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important }
.invisible { display: none }
.image-block { position: relative; display: inline-block; margin: 0.5rem; width: 8rem; height: auto }
.edit-icon { position: absolute; font-size: 25px; top: -15px; left: -15px; border-radius: 50%; text-align: center }
#editor-pane img { width: auto; height: auto; max-height: 70vh; max-width: 90vw }
@media screen and (max-width: 600px) {
	body { font-size: 10pt }
	.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 }
}