/*
default.css - The default theme css file for dmarcts-report-viewer, a PHP based viewer of parsed DMARC reports.
Copyright (C) 2016 TechSneeze.com, John Bieling and John P. New
with additional extensions (sort order) of Klaus Tachtler.

Available at:
https://github.com/techsneeze/dmarcts-report-viewer

This file is free software: you can redistribute it and/or modify it
under the terms of the GNU General Public License as published by the Free
Software Foundation, either version 3 of the License, or (at your option)
any later version.

This file is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranty of  MERCHANTABILITY or
FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
more details.

You should have received a copy of the GNU General Public License along with
this program.  If not, see <http://www.gnu.org/licenses/>.
*/

/* All colors are controlled by the following section */
:root {
	/* Ordered from darkest the lightest */
	--text: black;
	--text_over_colorbg: #000000;
	--shadow: grey;
	--header: silver;
	--selected: gainsboro;
	--hover: whitesmoke;
	--background: white;

	--link: #0000EE;
	--link_visited: #551A8B;
	--green: #00FF00;
	--yellow: #FFFF00;
	--orange: #FFA500;
	--red: #FF0000;
	--xml_highlighted: lightcyan;
	--xml_pinned: #99ffff;
}

body {
	color: var(--text);
	background-color: var(--background);
}

h1 {
}

pre {
	margin: 0px;
	cursor: pointer;
}

a {
  color: var(--link);
}

option.green {
	background-color: var(--green);
}

option.yellow {
	background-color: var(--yellow);
}

option.orange {
	background-color: var(--orange);
}

option.red {
	background-color: var(--red);
}

a:visted {
  color: var(--link_visited);
}

.title {
	font-size: 140%;
	font-weight: bold;
	text-align: center;
	padding: 5px 0px;
}

#screen_overlay {
	top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    position: absolute;
    display: block;
    z-index: 1;
}

table.optionlist tr.option_title {
	font-size: 120%;
	font-weight: bold;
	text-align: left;
	background-color: var(--header);
}

table.optionlist {
	margin: auto;
	border-spacing: 0 15px;
	clear: both;
	cursor: inherit;
}

table.optionlist td {
	padding-right: 10px;
	vertical-align: baseline;
	padding-left: 10px;
}

table.optionlist td.left_column {
	padding-right: 10px;
	padding-left: 10px;
	vertical-align: baseline;
	border-right: 1px solid  var(--text);
	width: 50%
}

table.optionlist td.right_column {
	vertical-align: middle;
}
table.optionlist td {
	vertical-align: baseline;
}

table.optionlist span.bold {
	vertical-align: baseline;
	font-weight: bold;
}

.option_description {
	font-family: sans-serif;
	font-size: 95%;
	font-style: italic;
}

table.reportlist {
	margin: auto;
	border-collapse: collapse;
	clear: both;
	cursor: pointer;
}

table.reportlist td {
	padding:0px 10px;
}

table.reportlist td.circle_container {
	padding-left: 0px;
	padding-right: 0px;
}

table.reportlist td span.status_sort_key {
	display: none;
}

table.reportlist th {
	padding:3px;
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	background-color: var(--header);
	white-space: nowrap;
}

table.reportlist th.circle_container {
	padding-left: 0px;
	padding-right: 0px;
}

table.reportlist tr:hover {
	background-color: var(--hover);
}

table.reportlist tbody tr:first-child td {
	padding-top: 10px;
}

table.reportlist tr.sum {
	border-top: 1px solid var(--shadow);
}

table.reportlist tr.selected {
	background-color: var(--selected);
}

table.reportlist td.hidden, table.reportlist th.hidden {
	display: none;
}

.reportdesc {
	display:inline-block;
	font-weight: bold;
	padding: 1em 0;
	margin: 0 auto;
}

.reportdesc_container {
	border-top: 2px solid var(--shadow);
	margin: 0 auto;
}

table.reportdata {
	margin: 0 auto;
}

table.reportdata thead {
	cursor:pointer;
}

table.reportdata tr {
	color: var(--text_over_colorbg);
	text-align: center;
	padding: 3px;
}

table.reportdata th {
	color: var(--text);
}

table.reportdata tr th {
	text-align: center;
	padding: 3px;
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0px;
	background-color: var(--header);
}

table.reportdata tr.sum {
	cursor: default;
	color: var(--text);
}

table.reportdata td.right {
	text-align: right;
}

table.reportdata tr.red {
	background-color: var(--red);
}

table.reportdata td.red {
	background-color: var(--red);
}

table.reportdata tr.orange {
	background-color: var(--orange);
}

table.reportdata td.orange {
	background-color: var(--orange);
}

table.reportdata tr.green {
	background-color: var(--green);
}

table.reportdata td.green {
	background-color: var(--green);
}

table.reportdata tr.yellow {
	background-color: var(--yellow);
}

table.reportdata td.yellow {
	background-color: var(--yellow);
}

table.reportdata tr.highlight {
	background-color: var(--xml_highlighted);
	color: var(--text)
}

table.reportdata tr.pinned {
	background-color: var(--xml_pinned);
	color: var(--text)
}

.highlight {
	background-color: var(--xml_highlighted);
	color: var(--text)
}

.pinned {
	background-color: var(--xml_pinned);
	color: var(--text)
}

.footer {
	font-size: 70%;
	text-align: center;
	border-top: 2px solid var(--shadow);
	width: 100%;
	margin: 0px auto;
	padding: 10px 0px;
	position: fixed;
	bottom: 0;
	background-color: var(--background);
}

form {
	vertical-align: bottom;
	}

.optionblock {
	white-space: nowrap;
	overflow: auto;
	font-size: 80%;
	padding: .5em;
	background-color: var(--header);
	margin: auto;
	text-align: center;
}

.optionlabel {
	font-weight: bold;
}

.options {
	margin-right: .5em;
	display: inline-block;
	border-right: 1px solid var(--text);
	padding-right: 1em;
	cursor: default;
	text-align: center;
	vertical-align: bottom;
}

.menu_icon {
	width: 1.5em;
	cursor: default;
	border: .2em solid var(--header);
	border-radius: .3em;
	padding: .3em;
	vertical-align: bottom;
	transition: 0.15s all linear;
}

.menu_icon:hover{
	border-color: var(--shadow);
}

.menu {
  font-family: arial, sans-serif;
  color: var(--text);
  position: absolute;
  display: none;
  z-index: 2;
  background: var(--hover);
  margin-top: 5px; /* Controls how close the main bubble is the the calling div */
  border-radius: 2px;
  box-shadow: 7px 7px 3px var(--shadow);
}

/* menu callout tail */
.menu::after {
  position: absolute;
  content: '';
  border: 15px solid transparent; /* The 'border-width' property controls the size of the tail and should be the same as .top.menu::after {top: } */
}

/* Tail position on top */
.top.menu::after {
  /* up triangle */
  border-bottom-color: var(--hover);
  border-top: 0;
  top: -15px;	/* Controls how close the tail is to the main bubble and should be the same as .menu::after {border-width:} */
  left: 95%;	/* Controls how close the tail is to the right corner of the main bubble */
  margin-left: -20px;
}

.menu_option {
	width: 100%;
	padding: 7px 0;
	margin-right: 20px;
	cursor: default;
}

.menu_option:hover {
	background-color: var(--selected);
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

.circle {
    width: 7px;
    height: 14px;
	margin-top: 4px;
    margin-bottom: 2px;
}

.circle_right {
    border-bottom-right-radius: 500px;
    border-top-right-radius: 500px;
    border-left: 0;
    display: inline-block;
}

.circle_left {
    border-bottom-left-radius: 500px;
    border-top-left-radius: 500px;
    border-right: 0;
    display: inline-block;
}

.circle_yellow {
    width: 6px;
    height: 12px;
    background-color: yellow;
	 border-top: 1px solid var(--selected);
	 border-right: 1px solid var(--selected);
	 border-bottom: 1px solid var(--selected);

}

.circle_green {
    background-color: lime;
}

.circle_orange {
    background-color: orange;
}

.circle_red {
    background-color: red;
}

.circle_black {
    background-color: var(--text);
}

.asc_triangle:after {
	content: ' \25B2';
	font-size: 15px;
	vertical-align: top;
}

.desc_triangle:after {
	content: ' \25BC';
	font-size: 15px;
}

.resizer {
	display: none;
	position: absolute;
	border-radius: 7px;
	background: var(--background);
	border: 2px solid  var(--shadow);
	top: 8px;
	left: 50%;
}

.resizer_horizontal {
	width: 30px;
	height: 10px;
	cursor: ns-resize;
}

.resizer_vertical {
	width: 10px;
	height: 30px;
	cursor: ew-resize;
}

/* Cross-browser (hopefully) styling of buttons and inputs
	Based on https://github.com/filamentgroup/select-css */

/* class applies to select element itself, not a wrapper element */
.x-css {
	font-size: inherit;
	font-family: inherit;
	display: block;
	margin: auto;
	color: var(--text);
	padding: .2em 1.4em .2em .3em;
	box-sizing: border-box;
	border: .2em solid var(--header);
	border-radius: .3em;
	transition: 0.15s all linear;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-image:
	/* Note: background-image uses 2 urls.
		The first is an svg data uri for the arrow icon.
		The second is the gradient for the icon.
			If you want to change the color, be sure to use `%23` instead of `#`, since it's a url.
		You can also swap in a different svg icon or an external image reference */
		url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%233DAEE9%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
		linear-gradient(to bottom, var(--background) 0%,var(--selected) 100%);
	background-repeat: no-repeat, repeat;
	/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
	background-position: right .5em top 50%, 0 0;
	/* icon size, then gradient */
	background-size: .65em auto, 100%;
}

.x-css-left-align {
	margin: 0;
}
.x-css option {
	color: var(--text_over_colorbg);
}

.x-css label {
	padding: 0 .5em 0 0;
}

div.x-css,
button.x-css,
input[type=submit].x-css,
input[type=number].x-css,
input[type=radio].x-css {
	display: inline-block;
	padding: .2em .5em;
	background-image: linear-gradient(to bottom, var(--background) 0%,var(--selected) 100%);
	background-repeat: repeat;
	background-position: 0 0;
	background-size: 100%;
}

input[type=radio].x-css {
	margin: 0 0 0 .15em;
}

/* button.x-css,
input[type=submit].x-css {
	border: 2px outset var(--shadow);
} */

div.x-css {
	padding: .25em .3em .1em .3em;
}

input[type=number].x-css {
	padding: .1em .3em;
}

input[type=radio].x-css,
label.x-css {
	background-image: unset;
	padding: 0;
	border-radius: 49%;
	width: .8em;
	height: .8em;
	border: .15em solid var(--text);
	}

button:active,
input[type=submit]:active {
	transform: translate(0.08em, 0.1em);
}

input[type=radio].x-css:checked {
		background-color: #3daee9;
	}

/* Hide arrow icon in IE browsers */
.x-css::-ms-expand {
	display: none;
}

/* Hover style */
.x-css:hover {
	border-color: var(--shadow);
}

.x-css:focus,
.menu_icon:focus,
button:focus,
input[type=number]:focus,
input[type=submit]:focus,
input[type=radio]:focus {
	/* border-color: #aaa; */
	/* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
	box-shadow: 0 0 1px 2px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 2px -moz-mac-focusring;
	color: var(--text);
	outline: none;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .x-css,
:root:lang(ar) .x-css,
:root:lang(iw) .x-css {
	background-position: left .7em top 50%, 0 0;
	padding: .6em .8em .5em 1.4em;
}

/* Disabled styles */
select.x-css:disabled,
select.x-css[aria-disabled=true] {
	color: var(--shadow);
	background-image:
	/* Note: background-image uses 2 urls.
		The first is an svg data uri for the arrow icon.
		The second is the gradient for the icon.
			If you want to change the color, be sure to use `%23` instead of `#`, since it's a url.
		You can also swap in a different svg icon or an external image reference */
		url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
		linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}

.x-css:disabled,
.x-css[aria-disabled=true] {
	background-image: linear-gradient(to bottom, var(--selected) 0%,var(--hover) 100%);
	color: var(--shadow);
}

.x-css:disabled:hover,
.x-css[aria-disabled=true] {
	border: .1em solid var(--hover);
}

/* Will have to work on this if ever need to disable radio buttons */
/* input[type=radio].x-css {} */