:root {
	--branding-image-bg: url('bg.jpg');
	--branding-color-bg: #213e5dc0;

	--branding-image-logo: url('logo.png');
	--branding-image-logo-white: url('logo-white.png');	

	--branding-color-primary: #213e5d;
	--branding-color-secondary: #213e5d80;
}


.enter:before { background: var(--branding-image-bg) no-repeat center center; background-size: cover; }
.enter::after { background-color: var(--branding-color-bg); }

.enter > .document > .logo              { left: 20px; top: 20px; z-index: 200; transform: translate(0, 0); }
.enter > .document > .logo              { width: 90px; height: 60px; background: var(--branding-image-logo-white) no-repeat center center; background-size: contain; }

.enter .modal-form > .container > .logo { width: 90px; height: 60px; background: var(--branding-image-logo) no-repeat center center; background-size: contain; }

header.main > .logo { width: 90px; height: 60px; background: var(--branding-image-logo) no-repeat center center; background-size: contain; }
header.main > .logo { margin: 0 auto 0 90px; flex-shrink: 0; }

/* official branding */

.modal-form.new .button.green { background-color: var(--branding-color-primary); box-shadow: 0 8px 15px 0 var(--branding-color-secondary); }

aside { background-color: var(--branding-color-primary); }

aside > nav > ul > li a { background-color: var(--branding-color-primary); }
aside > nav > ul > li > ul.subitems > li > a { background-color: var(--branding-color-primary); }

aside > nav > ul > li form > button { background-color: var(--branding-color-primary); }

.classowl-button.blue-ns { background-color: var(--branding-color-primary); }

.button.btn1 { background-color: var(--branding-color-primary); }