:root {
    --branding-image-bg: url('bg.jpg');
	--branding-color-bg: #85b511;
	--branding-opacity-bg: 0.25;

	--branding-image-logo: url('logo.jpg');

	--branding-color-primary: #85b511;
	--branding-color-secondary: #85b51180;
}


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

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

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

header.main > .logo { width: 60px; 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); }