:root {
	/* custom */
	--shadow: rgba(0,0,0,0.5);
	--background: black;
	--background-header: grey;
	--background-invert: grey;
	--text: silver;
	--text-invert: black;
	--text-hover: white;
	--text-grey: grey;
	--text-red: red;

	--header-bg: rgb(12,13,14);
	--header-text: white;

	--left-bg: rgb(6,7,8);
	--left-text: white;

	--panel-bg: rgb(12,13,14);
	--panel-bg-head: rgb(22,24,26);
	--panel-text-head: white;
}

body { background-color:black;color:grey;font-family:'Montserrat',helvetica,sans-serif; }
body, .input { text-shadow:0 0 2px black; }

/* fonts */
@font-face { font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:local('Montserrat Regular'), local('Montserrat-Regular'), url(/fonts/pretty/montserrat.woff2) format('woff2'); }
@font-face { font-family:'Hacker';font-style:normal;font-weight:400;font-display:swap;src:local('Hack Regular'), local('Hack-Regular'), url(/fonts/pretty/hacker.woff2) format('woff2'); }
.hacker { font-family:'Hacker'; }

/* layout */
#header { font-size:2em;position:fixed;height:50px;top:0;left:0;right:0;color:var(--header-text);background-color:var(--header-bg);z-index:3; }
#body { min-height:100vh;padding:var(--gutter);padding-top:calc(var(--gutter) + 50px);padding-left:calc(var(--gutter) + 200px); }
#page { max-width:1500px; }
#left { position:fixed;top:0;bottom:0;left:0;width:200px;padding-top:calc(var(--gutter) + 50px);color:var(--left-text);background-color:var(--left-bg);z-index:1; }
#footer { text-align:center;padding:calc(var(--gutter) * 2);color:var(--header-text);background-color:var(--header-bg);z-index:3; }

/* panels */
.panel { border-color:var(--panel-bg-head);background-color:var(--panel-bg); }
.panel > .panel-heading { background-color:var(--panel-bg-head);color:var(--panel-text-head); }
.panel > .panel-body { border-color:var(--background); }

/* popups */
.modal { position:fixed;top:0;bottom:0;left:0;right:0;background-color:var(--shadow);display:none;z-index:99; }
.modal-dialog { margin-top:10px;box-shadow:0 5px 10px -5px black;position:fixed;left:50%;transform:translateX(-50%);width:600px;max-width:95vw;max-height:calc(100% - 20px);overflow:auto;padding:calc(var(--gutter) * 2); }
.modal-close { color:var(--text-grey);font-size:20px;cursor:pointer; }
.modal-close:hover { color:var(--text-red); }

/* inputs */
.input-wrapper { position:relative;margin:var(--gutter) 0px; }
.input-wrapper-delete { margin-top:calc(var(--gutter) * -1) !important;margin-bottom:var(--gutter) !important;padding-top:0px !important;padding-bottom:0px !important; }
.input-wrapper-delete .input-wrapper:first-of-type { margin-top:0px !important; }
.input-wrapper-delete .input-wrapper:last-of-type { margin-bottom:0px !important; }
.input-wrapper-delete.first { padding-top:var(--gutter) !important; }
.input-wrapper:first-of-type { margin-top:0px; }
.input-wrapper:first-of-type > .row { margin-top:calc(var(--gutter) * -0.5); }
.input-wrapper:last-of-type { margin-bottom:calc(var(--gutter) * 0.5); }
.input-wrapper .row div[class*=col] { margin:0px; }
.input-wrapper .input-icon { color:var(--text);position:absolute;top:calc(55% - var(--gutter));right:calc(var(--gutter) / 2);cursor:pointer;display:block;z-index:3;text-shadow:0 0 1px black !important; }
.input-wrapper .input-icon:hover { color:var(--text-hover); }
.input-wrapper .input-icon.left { right:0;left:calc(var(--gutter) / 2); }
.input.color { padding-left:calc(var(--gutter) * 3); }
.input, .button { font-weight:bold;padding:4px 10px;border-radius:5px;display:block;width:100%; }
.input, .button { color:var(--text);border:1px solid transparent;background-color:var(--background-header);font-size:inherit;font-family:inherit;line-height:inherit; }
.input:focus, .dropdown-options { color:var(--text-hover);border:1px solid white;background-color:var(--background-header); }
.input.mini { max-width:200px; }
.button { display:inline-block;width:auto;background-color:var(--background-header);color:var(--text-hover);border:1px solid transparent; }
.button:hover, .dropdown-option.hovering, .dropdown-option.selected { background-color:var(--background-invert);color:var(--text-invert);text-decoration:none; }
.button.disabled { background-color:var(--background);color:var(--text-grey); }
.buttons .button { margin-right:var(--gutter);margin-bottom:var(--gutter); }
.buttons.input-wrapper { margin-bottom:calc(var(--gutter) * -2) !important; }
.dropdown-wrapper .input { margin-bottom:0px; }
.dropdown-options { margin-top:-1px;padding:0px;max-height:40vh;overflow:auto;position:absolute;z-index:9;border-radius:0px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;display:none; }
.dropdown-option { padding:7px 15px 7px 15px; }
.dropdown-option, .dropdown-option { cursor:pointer; }
.dropdown-wrapper .empty { display:none;font-style:italic;padding-left:20px; }
.dropdown:focus { border-bottom-left-radius:0px;border-bottom-right-radius:0px; }
.form-label { color:var(--text-grey);font-style:italic;padding:calc(var(--gutter) * 1.25); }
.input-errors { position:absolute;width:calc(100% - (var(--gutter) * 1));color:var(--text-hover);border:1px solid var(--text-red);background-color:var(--background);z-index:2;cursor:pointer; }
.button:active { background-color:var(--background-invert) !important;color:var(--text-invert) !important; }
input[type=checkbox] { width:auto;transform:scale(1.5);margin-top:calc(var(--gutter) / 2); }
input:focus, select:focus, textarea:focus, button:focus { outline:none; }
textarea { resize:vertical;min-height:100px; }
textarea.lyrics { height:300px; }
form label, .input-wrapper label { font-size:var(--font-size);padding-top:5px; }
iframe { border:none;width:100%;margin:calc(var(--gutter) * 0.5) 0px;border-radius:5px;padding:0px !important; }
.no-input-padding .input-wrapper { padding:0px;margin:0px; }