/* settings here apply to all pages, including non hattrick pages.
   so any own class HAS TO start with eg 'foxtrick_' to make it foxtrick specific */

html[data-theme="standard"] #stageLogo {
	background-image: url('chrome://foxtrick/content/resources/img/logo_green_stage_foxtrick.png');
}
html[data-theme="standard"] #logo {
	background-image: url('chrome://foxtrick/content/resources/img/logo_green_foxtrick.png');
}
html[data-theme="simple"] #stageLogo {
	background-image: url('chrome://foxtrick/content/resources/img/logo_green_stage_foxtrick_simple.png');
}
html[data-theme="simple"] #logo {
	background-image: url('chrome://foxtrick/content/resources/img/logo_green_foxtrick_simple.png');
}

html[dir="rtl"] .date { padding-right: initial; }

/* start ft-modal-dialog */
.ft-clearfix:before,
.ft-clearfix:after {
	content: '';
	display: table;
	border-collapse: collapse;
}
.ft-clearfix:after {
	clear: both;
}
.ft-clearfix {
	min-height: 0;
}
.ft-rborder {
	border-radius: 10px;
}

#foxtrick-modal-screen {
	z-index: 100000;
	background-color: hsl(0, 0%, 67%);
	opacity: 0.4;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#foxtrick-modal-dialog {
	position: fixed;
	z-index: 100001;
	width: 600px;
	height: 50%;
	top: 0; right: 0; left: 0; bottom: 0; margin: auto;
	color: black;
}

#foxtrick-modal-dialog h2 {
	color: hsl(0, 0%, 13%);
	border: 0;
	margin: 0.6em 0;
	font-size: 1.6em;
}

.ft-dialog-hdrWrapper {
	position: absolute;
	width: 100%;
	background: white;
	border: 1px solid hsl(0, 0%, 67%);
	border-width: 1px 1px 0 1px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.ft-dialog-header {
	padding: .4em 1em;
	border: 1px solid hsl(0, 0%, 67%);
	background: linear-gradient(to bottom, hsl(210, 100%, 74%) 0%, hsl(210, 92%, 67%) 44%,
	                            hsl(210, 84%, 59%) 100%);
	margin: 0.2em 0.2em 0.8em 0.2em;
}

.ft-dialog-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: bold;
	font-size: 2em;
	width: 100%;
	margin: .1em 0;
	color: hsl(0, 0%, 13%);
	border: 0;
	line-height: 1.3em;
}

.ft-dialog-content {
	background: white;
	padding: 5em 1em 1em 1em;
	margin-right: -2px;
	overflow-y: auto;
	max-height: 100%;
	border: 1px solid hsl(0, 0%, 67%);
	border-width: 1px 1px 0 1px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.ft-dialog-btnWrapper {
	background: white;
	margin-right: -2px;
	border: 1px solid hsl(0, 0%, 67%);
	border-width: 0 1px 1px 1px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.ft-dialog-button-row {
	border: 1px solid hsl(0, 0%, 67%);
	border-width: 1px 0 0 0;
	margin: 0 0.4em;
}

.ft-dialog-button {
	padding: 0;
	margin: .5em .4em;
	cursor: pointer;
	border: 1px solid hsl(0, 0%, 83%);
	color: hsl(0, 0%, 33%);
	background: hsl(0, 0%, 90%);
	font-size: 1.3em;
}

.ft-dialog-button-text {
	padding: 0.4em 1em;
	display: block;
}

.ft-dialog-button:hover {
	border: 1px solid hsl(0, 0%, 60%);
	background: white;
}
/* end ft-modal-dialog */

.ft-expand {
	width: 100%;
}

.ft-hidden {
	display: none !important;
}

/* faux-link */
.ft-link { cursor: pointer; text-decoration: underline; }

/* icons and hover icons */
.ft_actionicon {cursor: pointer; height: 16px; background: 50% no-repeat; }
.ft_icon {width: 16px; height: 16px; background: 50% no-repeat; }
.ft_actionicon_large {cursor: pointer; height: 34px; width:36px; padding:0px 5px 0px 0px; }

.foxtrickCopy {background-image: url('chrome://foxtrick/content/resources/img/copy/copy_small.png'); width: 16px; }
.foxtrickCopy:hover {background-image: url('chrome://foxtrick/content/resources/img/copy/copy_yellow_small.png'); width: 16px; }
.foxtrickHelp {background-image:url('chrome://foxtrick/content/resources/img/help.png'); width: 16px; }
.foxtrickHelp:hover {background-image: url('chrome://foxtrick/content/resources/img/help-hover.png'); width: 16px; }
.foxtrickExport {background-image: url('chrome://foxtrick/content/resources/img/Aiga_downarrow_green.png'); width: 16px; }
.foxtrickExport:hover {background-image: url('chrome://foxtrick/content/resources/img/Aiga_downarrow_yellow.png'); width: 16px; }
.foxtrickRemove { background-image: url('chrome://foxtrick/content/resources/img/cross_small.png'); width: 12px; height: 12px; margin-top: 2px; cursor: pointer; }
.foxtrickRemove:hover { background-image: url('chrome://foxtrick/content/resources/img/crossRed_small.png'); }
.subMenuConf .foxtrickRemove { margin-left: 10px; }
.foxtrickRemove img {
  width: 12px;
}
.foxtrickInfo {background-image: url('chrome://foxtrick/content/resources/img/info.png'); width: 16px; }
.foxtrickInfo:hover {background-image: url('chrome://foxtrick/content/resources/img/info-hover.png'); width: 16px; }
.foxtrickScreenshot { background-image: url("chrome://foxtrick/content/resources/img/screenshot.png"); width: 16px; }
.foxtrickScreenshot:hover { background-image: url("chrome://foxtrick/content/resources/img/screenshot-hover.png"); width: 16px; }

.foxtrickBrowse img {
	width: 16px;
}

div.rightHandBoxBody > div {
	margin: 10px 0;
}

/* expanders */
div.ft-expander-unexpanded, div.ft-expander-expanded,
h2.ft-expander-unexpanded, h2.ft-expander-expanded {
	cursor: pointer;
}

div.ft-expander-unexpanded h4, div.ft-expander-expanded h4,
h2.ft-expander-unexpanded, h2.ft-expander-expanded {
	background-repeat: no-repeat;
}

div.ft-expander-unexpanded h4 {
	background-image: url("chrome://foxtrick/content/resources/img/link-down.png");
}
div.ft-expander-expanded h4 {
	background-image: url("chrome://foxtrick/content/resources/img/link-up.png");
}

h2.ft-expander-unexpanded {
	background-image: url("chrome://foxtrick/content/resources/img/down.gif");
}
h2.ft-expander-expanded {
	background-image: url("chrome://foxtrick/content/resources/img/up.gif");
}

html[dir="ltr"] h2.ft-expander-unexpanded, html[dir="ltr"] h2.ft-expander-expanded,
html[dir="ltr"] div.ft-expander-unexpanded h4, html[dir="ltr"] div.ft-expander-expanded h4 {
	background-position: right;
}
html[dir="rtl"] h2.ft-expander-unexpanded, html[dir="rtl"] h2.ft-expander-expanded,
html[dir="rtl"] div.ft-expander-unexpanded h4, html[dir="rtl"] div.ft-expander-expanded h4 {
	background-position: left;
}

div.ft-expander-unexpanded i.icon-caret-up {
	display: none;
}
div.ft-expander-expanded i.icon-caret-down{
	display: none;
}

/*Forum HighlighthreadOpener PostID*/
.ft_slH_PID_right, .ft_slH_PID_left {background-color:#000000;}

.sidebarBox h5 { font-size: 100%; margin: 0.5em 0; }

/* personality images */
.ft-personality-img { height: 8px; width: 8px; margin-left: 0.1em;}

/* lineup shortcut */
td.ft-lineup-cell { vertical-align: middle }

/* history stats */
.historystats th, .historystats td { text-align:left; padding:2px; }

/* showlineupset */
.bold{ font-weight:700; }

/* TeamStats filter */
.ft-select-container {
	width: auto;
	float: inline-end;
	padding-top: 5px;
}
.ft-select-container:has(#foxtrick-filter-select.sorting) { padding-top: 20px; }
.ft-select-container > select { display: block; margin: 0; clear: both; float: inline-end }
#foxtrick-filter-select option[value="attribute-all"] {background-color:#ccc;}

/* same style as HT's a.flag img */
span.flag img {
	width: 20px;
	height: 12px;
	border: #ddc 1px solid;
	vertical-align: middle;
	margin: 0 2px 2px 0;
}

.ft-link-span a.flag img {
	vertical-align: baseline;
	margin: 0;
}

/* Foxtrick note */
.ft-note {
	background-color: #efefff;
	border: 1px solid #2f31ff;
	clear: both;
	margin: 10px 0;
	padding: 7px 10px;
	overflow: hidden;
}

#divReport > .ft-note {
	margin-bottom: 20px;
}
.ft-note a.close {
	cursor: pointer;
	float: right;
}

.ft-youth-series-estimation.near-start {
	color: red;
}

#ft-log {
	background: #dce2dc;
	border: 1px solid #abcdef;
	font-size: 12px;
	max-height: 250px;
	overflow: auto;
}

/* max-height no good for mobile devices */
#ctl00_ctl00_pnlMobileLink+form #ft-log {
	max-height: none;
}

#ft-log h2 {
	margin: 6px 0 15px 6px;
}

#ft-log-pre {
	width: auto;
}

#ft-link-img-preview {
	vertical-align: middle;
	display: inline-block;
}
#foxtrick_links_content a, a.ft-link-keeper, a.ft-link-injury {
	padding: 0 2px;
}

#foxtrick_links_content div.ft_actionicon {
	padding-right: 5px;
}

.ft-link-span {
	display: inline-block;
}

.ft-link-icon, #ft-link-img-preview {
	height: 16px;
}
.ft-link-injury .ft-link-icon, .ft-link-keeper .ft-link-icon {
	height: 12px;
}

.ft-links-custom-icon-edit {
	display: inline-block;
	width: 16px;
	height: 16px;
	overflow: hidden;
}

#ft-custom-links-table td {
	vertical-align: middle;
}

.ft-last-login-diff {
	margin-left: 10px;
}

.ft-ownerless {
	background-image: url("chrome://foxtrick/content/resources/img/ownerless.png");
	background-repeat: no-repeat;
	padding: 0px 0px 0px 11px;
}


/* pop lists that are displayed when hovering */
.ft-pop-up-container {
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.ft-pop-up-container.icon {
	padding-right: 4px;
	background: url(chrome://foxtrick/content/resources/img/pop-up.png) 24px 4px no-repeat;
}
.ft-pop-up-container.icon.header {
	position: absolute;
	padding-right: 4px;
	background: url(chrome://foxtrick/content/resources/img/pop-up.png) 24px 4px no-repeat;
}

ul.ft-pop {
	color: #000;
	background-color: #eee;
	border: solid 1px #aaa;
	border-bottom: 0px; /* use the border provided by the last item */
	display: none;
	position: absolute;
	list-style-type: none;
	z-index: 101;
	padding: 0px;
	margin: 0px;
}
html[dir="ltr"] ul.ft-pop.right {
	right: 0px;
	left: initial;
	text-align:left;
}
html[dir="rtl"] ul.ft-pop.right {
	left: 0px;
	right: initial;
	text-align:right;
}
ul.ft-pop.top {
	top: 0px;
}
.ft-pop-up-container:hover > ul.ft-pop {
	display: block;
}
ul.ft-pop > li {
	white-space: nowrap;
	padding: 2px 2px;
	border-bottom: solid 1px #aaa;
	margin: 0px 0px;
}
ul.ft-pop > li:hover {
	background-color: #d0d0d0;
}
ul.ft-pop > li a, ul.ft-pop span {
	text-decoration: none;
	display: block;
	cursor: pointer;
}
#ft_clear_cache, #ft_report_bug {cursor: pointer; color:#3F7137; margin: 0 6px;}


#ft-monitor-sidebar-box {
	overflow: hidden;
}

#ft_versionInfo {
}

.ft-nowrap {
	white-space: nowrap;
}
.ft-bordertop {
    border-top: 1px solid #000;
}

.ftTeamHighlight {
background-color: #eed;
}

.ft-clear-both {
	clear:both;
}

/* rating differences highlighting */
.ft-colorLower {
	color: orange;
}
.ft-colorHigher {
	color: #00A9E0;
}
.ft-tableHighlight {
	background-color: yellow !important;
}

/* why use this shit anyway?! */
.mainRegular > .boxBody {
	overflow: visible;
}
/* disable useless block styling for SVG pie charts */
.percentage {
	display: inline-block !important;
}

html[data-theme="simple"] tr.darkereven {
	background-color: #dde1dd;
}

/* ft box header icons */
@font-face {
	font-family: 'ft-icomoon';
	src:  url('https://foxtrick-ng.github.io/assets/font/icomoon.eot?88dyqd');
	src:  url('https://foxtrick-ng.github.io/assets/font/icomoon.eot?88dyqd#iefix') format('embedded-opentype'),
	url('https://foxtrick-ng.github.io/assets/font/icomoon.ttf?88dyqd') format('truetype'),
	url('https://foxtrick-ng.github.io/assets/font/icomoon.woff?88dyqd') format('woff'),
	url('https://foxtrick-ng.github.io/assets/font/icomoon.svg?88dyqd#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

[class^="ft-icon-"], [class*=" ft-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'ft-icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ft-icon-header::before {
	content: "\e900" / "FT";
	/*FIXME: set Font Metrics and Alignment Options properly in icomoon so that
	FT glyphs align correctly, and we can get rid of these micro-adjustments.*/
	font-size: 1.05em;
	padding: 0px 1px 1px 0px;
}

/* CopyPlayerAd - coloured cells in youth player forum posts */
#mainWrapper table.htMlTable td:has(em:empty), #mainWrapper table.htMlTable td:has(i:empty) {
	background-color: #fe6;
}
#mainWrapper table.htMlTable td:has(strong:empty), #mainWrapper table.htMlTable td:has(b:empty) {
	background-color: #8e7;
}
#mainWrapper table.htMlTable td:has(u:empty) {
	background-color: #f3f3f3;
}
#mainWrapper table.htMlTable td:has(u > u:empty) {
	background-color: #dfdfdf;
}

#ft-bug-report-message {
	box-sizing: border-box;
	width: 100%;
	line-height: 1;
	min-height: 5em;
	resize: vertical;
}

@supports (field-sizing: content) {
	#ft-bug-report-message {
		field-sizing: content;
		line-height: unset;
		min-height: 5lh;
		resize: none;
	}
}
