html {
	font-family: 'Roboto', 'Segeo UI', sans-serif;
}
.disabled, button:disabled {
	opacity: .4;
	background-color: #666;
}
button {
	padding: 0 5px;
}


html, body {
	overflow: hidden;
	padding: 0;
	margin: 0;
}
body {
	font-size: .8em;
	/* do not set width directly to avoid scrollbars when in overflow menu */
	max-width: 750px;
	max-height: 500px;
}
/* nasty hack to negociate a popup as big as possible */
#hr {
	min-width: 750px;
	height: 0px;
	margin: 0;
	visibility: hidden;
}
#vr {
	min-height: 500px;
	width: 0px;
	margin: 0;
	visibility: hidden;
}
#title a {
    color: #bbb;
	text-decoration: none;
}
#title {
    font-size: smaller;
    background-color: #444;
    border: 0;
    margin: 0;
    padding: 1px 0;
    width: 100%;
	text-align: center;
	align-items: center;
}
#icon {
	text-align: center;
	flex: 80px 1 1;
}
#icon img {
	width: 60px;
	height: 60px;
	padding: 0;
	margin: 0;
}
#bottom {
	background: white;
	bottom: 0;
	position: fixed;
	width: calc(100% - 10px);
	margin: 5px;
	display: flex;
	align-items: center;
}

#history:empty:before {
	content: attr(placeholder);
	color: grey;
	font-size: 1.5em;
	display: block;
	text-align: center;
	margin-top: 1em;
}

#history {
	position: absolute;
	top: calc(80px + 2em);
	bottom: 45px;
	left: 0;
	right: 0;

	display: block;
	border-top: black thin solid;
	border-bottom: black thin solid;
	overflow-y: scroll;
	overflow-x: hidden;
	padding: 0 1px 0 0;
}

#history.hierarchy div {
    border-bottom: black thin solid;
	border-left: grey 3px solid;
	margin: 0 1px 0 .5em;
	padding: 0;
	position: relative;
}

#history div:empty {
	display: none;
}

#history.hierarchy div:before {
    content: '';
    display: block;
    position: absolute;
	left: -8px;

	width: 15px;
	height: 15px;
	background-size: 15px 15px;
	background-position: center;
	background-repeat: no-repeat;
}

#history.hierarchy div:before {
	background-image: url('/icons/minus.svg');
}

#history.hierarchy div.closed:before {
	background-image: url('/icons/plus.svg');
}

#history.hierarchy p {
	display: block;
	position: relative;
	width: calc(100% - 2.25em);
	margin: .25em 0 .25em 2em;
	padding-left: .25em;
	cursor: pointer;
}

#history.hierarchy p:first-child {
	margin: .25em 0 .25em 1em;
	width: calc(100% - 1em);
}

#history.hierarchy p:not(:first-child) {
    border-top: black thin solid;
}

#history.hierarchy p:not(:first-child):before {
    content: "";
    display: block;
    width: 2em;
    height: 3px;
    position: relative;
	top: 10px;
    left: -2.25em;
    background-color: grey;
}

#history.hierarchy p:last-child:after {
    content: '';
    display: block;
    width: 1.2em;
    position: absolute;
	border: none;
	background: white;
}

#history.hierarchy p:not(:only-child):last-child:after {
    top: 13px;
    bottom: -.25em;
    left: -2.75em;
}

#history.hierarchy p:only-child:after {
    top: 15px;
    bottom: -.25em;
    left: -1.75em;
}

#history.hierarchy div p.noclean-parent {
	background-color: #eee;
	cursor: default;
}

#history.one-level div p.noclean-parent {
	display: none;
}

#history.one-level p {
	margin: 0;
	padding: 0;
	width: 100%;
	border: black thin solid;
	cursor: pointer;
}

#history p > span {
	display: block;
	padding: 2px;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#history p.selected > span {
	background-color: #eef;
	border-left: #38c 5px solid;
	white-space: normal;
	word-break: break-all;
}
#history p.dropped > span {
	background-color: #f031;
}
#history p .del {
	text-decoration: line-through;
	color: #c11;
}
#history p .ins {
	text-decoration: underline;
	color: green;
}
#history p .keep {
	background-color: rgba(230, 230, 230, 0.5);
}
#history p .url {
	text-decoration: underline overline;
	color: #38c;
}

#filters {
	display: flex;
	align-items: center;
	margin: 0;
}
#filter_categories {
	flex: 3;
}
#filter_actions {
	flex: 4;
}
.filters {
	display: inline-flex;
	justify-content: space-around;
	border: grey thin solid;
	border-radius: 5px;
	margin: 5px;
}
.filters label {
	flex: 30px 0 1;
	margin: 5px;
}
.filters label img {
	width: 100%;
}
.filters input {
	display: none;
}
.filters input:not(:checked) + img {
	opacity: 0.2;
}

#bottom button, .tooltip {
	display: inline-block;
	margin-left: 5px;
	width: 30px;
	height: 30px;
	background-size: 80%;
	background-position: center;
	background-repeat: no-repeat;
}
#toggle_on { background-image: url("/icons/onoff.svg"); }
#toggle_off { background-image: url("/icons/onoff.svg"); }
#options  { background-image: url("/icons/settings.svg"); }
#refresh  { background-image: url("/icons/refresh.svg"); }
#clearlist { background-image: url("/icons/trashcan.svg"); }
#copy { background-image: url("/icons/copy.svg"); }
#openonce { background-image: url("/icons/open-once.svg"); }
#whitelist { background-image: url("/icons/allow-redirect.svg"); }
#blacklist { background-image: url("/icons/remove-redirect.svg"); }
#open_editor { background-image: url("/icons/edit-rules.svg"); }

#history p span.original {
	background-image: url("/icons/clicked.svg");
	padding-left: 1.2em;
	background-size: 1em;
	background-position: left top .25em;
	background-repeat: no-repeat;
}
#history p.clicked span.original { background-image: url("/icons/clicked.svg"); }
#history p.request span.original { background-image: url("/icons/request.svg"); }
#history p.header span.original { background-image: url("/icons/header.svg"); }

#history p span.cleaned span.icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: .2em;
	background-size: 1em;
	background-position: center;
	background-repeat: no-repeat;
}
#history p span.cleaned span.icon.dropped { background-image: url("/icons/stop.svg"); }
#history p span.cleaned span.icon.embed { background-image: url("/icons/skip.svg"); }
#history p span.cleaned span.icon.remove { background-image: url("/icons/remove.svg"); }
#history p span.cleaned span.icon.rewrite { background-image: url("/icons/replace.svg"); }
#history p span.cleaned span.icon.javascript { background-image: url("/icons/javascript.svg"); }


.spacer {
	flex-grow: 1;
}
.help {
	position: relative;
}
.tooltip {
	background-image: url("/icons/question.svg");
	cursor: help;
}
.help .tooltiptext {
	visibility: hidden;
	position: absolute;
	z-index: 1;

	left: 50%;
	width: 20em;
	bottom: 50%;

	background: white;
	border:thin solid black;
	padding: 5px;
	border-radius: 6px;

	text-align: justify;
}
.help:hover .tooltiptext {
	visibility: visible;
}


input#enabled {
	display: none;
}
input#enabled:checked ~ * .when_disabled {
	display: none !important;
}
input#enabled:not(:checked) ~ * .when_enabled {
	display: none !important;
}


@media only screen and (max-device-width: 480px) {
	body {
		font-size: 2em !important;
		max-width: none !important;
	}
	#hr, #vr {
		display: none;
	}
	#icon {
		text-align: center !important;
		flex: 20px 1 0 !important;
	}
	.filters {
		margin: 2px;
	}
	#history {
		position: relative;
		top: auto !important;
		bottom: auto !important;
		max-height: calc(100vh - 25vw - 120px) !important;
		height: auto !important;
	}
	#history p.selected > span {
		border-left: #38c 10px solid;
		padding-left: 5px;
	}
	.filters label {
		flex: 14% 1 1;
		margin: 2px;
	}

	#filter_actions label {
		flex-grow: 1;
	}

	.tooltip {
		height: 60px;
		width: 60px;
	}
	#bottom button {
		object-fit: contain;
		width: 9%;
		padding-top: 9%;
	}
}
