:root {
--primary: #0b0b0b;
--primary-darker: #d10b00;
--primary-superdark: #910901;
--primary-lighter: #ffff19;
--primary-lighter-font: #940101;
--primary-highlight: #ffff19;
--warning: #ff0d00;
--highlight: #efefef;
--grey: #e6e6e6;
}

body {margin:0;}

main {margin:1% 3%; }

table.fancy th {background-color: var(--primary);}

h1 {margin:0;}

a:link {color: var(--primary)}
a:visited {color:inherit;}

/* Table Sort */
table.js-sortable th {cursor:pointer;}
table.js-sortable th.dir-u {background-image: linear-gradient(to top, #0d0d0d 0%, #242424 82%, #ffe26f 82%, #ffd147 100%) !important}
table.js-sortable th.dir-d {background-image: linear-gradient(#0d0d0d 0%, #242424 82%, #ffd147 82%, #ffe26f 100%) !important}
table.fancy.js-sortable th:hover {background-color: #0b0b0b}
table.fancy tr:hover {background-color: var(--grey);}


/* Main Navigation */
.main-nav {background-color:var(--primary); margin-bottom:2.5em; padding:0em; color:white; flex-wrap:wrap; transition: background-color 0.5s ease;}
.main-nav {display:flex; justify-content:space-between; padding-left: 1em; padding-right:1em;}
.main-nav a {padding:.5em; color:white;}
.main-nav a:hover, .main-nav a:focus {color:#1c2733; background-color:#e1e1e1;}


/* Drop Down Navigation */
.main-nav li { position: relative;}
.main-nav ul li ul {visibility: hidden; opacity: 0; display:none; position: absolute;
z-index:99999; border-bottom-left-radius:10px; border-bottom-right-radius:10px;}
.main-nav ul li ul.rightmenu {right:0;}
.main-nav ul li:hover > ul,
.main-nav ul li:focus-within > ul,
.main-nav ul li ul:hover,
.main-nav ul li ul:focus {visibility: visible; opacity: 1; display: block;
animation: menu-scroll-in 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}

@keyframes menu-scroll-in {
0% {transform: scale(0); transform-origin: 0% 0%; opacity: 1;}
100% {transform: scale(1); transform-origin: 0% 0%; opacity: 1;} }

.main-nav ul li:hover {background-color:var(--primary-darker);}
.main-nav ul li ul li {width: 100%; box-sizing: border-box; border-bottom:1px dashed var(--primary-highlight); background:var(--primary-darker);}
.main-nav ul li ul li:last-of-type {border-bottom:none; border-bottom-left-radius:10px; border-bottom-right-radius:10px;}
.main-nav ul li ul li a {text-indent:.5em; white-space: nowrap; padding-right:.5em; }
.main-nav ul li ul li:last-of-type:hover {background:none !important;}
.main-nav ul li ul li:last-of-type:hover, .main-nav ul li ul li:last-of-type a:hover {border-bottom-left-radius:10px; border-bottom-right-radius:10px;}
.main-nav ul li ul li a:after {content: "\0000a0";  letter-spacing: 0.5em;}
.main-nav ul li ul li.hightlight {background-color: #315984;}

@media only screen and (max-width: 1400px) {
	.main-nav {font-size:0.8em;}
	.main-nav a {padding:.25em;}
	.main-nav a:hover {padding:.25em;}
	.login-icon svg {width:10px; margin-bottom: -3px;}
}

@media only screen and (max-width: 960px) {.main-logo {display:none;} }

.color-mode {cursor:pointer;}
li.color-mode:hover {background-color:#333 !important;}

.nowrap {white-space: nowrap;}

.mini-url {background-color:var(--grey); padding:0.1em 0.5em; border-radius:0.3em; font-size:0.6em; display:inline-block; margin-bottom:3em;}
.mini-url a {text-decoration: none;}
.url {font-size:0.8em; display:inline-block;}


.stats-block {margin-bottom:0.7em; background-color:var(--grey); display:inline-block; border-radius:0.3em; padding:0.4em 0.5em;}
.stats-block span {background-color:#444959; color:white; padding:0.05em 0.2em; border-radius:0.3em;}

.filter-grid {display:grid; grid-gap:1em;
grid-template-columns: max-content max-content 3fr 2fr;
justify-items:center; align-items:center; margin-bottom:1.5em;}

.filter-box {padding:0.5em; background-color:var(--grey);
border-radius:0.3em; justify-self: end;}

.filter-form {display:flex; flex-wrap: nowrap; gap:1em; align-items:center;}

.filter-box form, .filter-box select, .filter-box label {margin-bottom:0;}
.filter-box select {min-width:130px;}
.filter-box label {text-align:right;}
.filter-impressions, .filter-clicks { width:100%;}
.filter-tag {text-transform: uppercase; font-size:0.8em; font-weight:bold;}


.date-filter-box {justify-self: center;  align-items:center;}
.date-filter-box form, .date-filter-box fieldset, .date-filter-box input {margin-bottom:0;}

.date-filter-grid {padding:0.5em; background-color:var(--grey);
border-radius:0.3em; display:flex; align-items:center; gap:0.5em;}

.date-button-group {display:flex;}

/* Searchbox */
.main-nav ul li.search-container:hover {background-color:transparent;}
.searchbox {position:relative; margin-bottom:0; margin-right:0.5em;}
.searchbox input { background-color: #2f2f2f; color: white; width:200px; transition: width .3s;
border: none; padding: 4px 30px 2px 9px; font-size: 0.9em; box-sizing: border-box; height:1.85em;
}

.searchbox input:focus {background-color:#4d2424; border:2px solid #ac4e4e; width:300px; transition: width .1s}
.searchbox button { position:absolute; right:6px; top:1px; height:100%; opacity:0.4;
background-color:transparent; background-position: center; background-size:65%; background-image: url('/styles/flundr/img/icon-search-white.svg');
background-repeat: no-repeat; transition: opacity 0.4s
}

.searchbox input {outline:0 !important}

.searchbox input::placeholder {color:white;}
.searchbox button:focus, .searchbox button:hover {background-color:transparent !important}
.searchbox:focus-within button {opacity:1; transition: opacity 0.1s}

.searchbox input::selection {background-color: var(--primary);}

@media only screen and (max-width: 768px) {
	.searchbox input  {width:90px;}

}


table.fancy td.td-border {border-left:3px dashed #ddd; padding:0; padding-right:0.5em}

/*
.currentdate, .predate {display:inline-block; border-radius: 0.2em; padding:0 0.2em;}
.currentdate {background-color:#737373; color:white;}*/
.predate {font-size:0.8em; opacity:.6;}
td.Neu .predate, td.Re-Entry .predate {opacity:1;}
td.Neu {background-color:#ace48d;}
td.Re-Entry {background-color:#66cfe8;}
/*
.impressions {background-color:#717171}
.clicks {background-color:#576179}
.ctr {background-color:white; color:black;}
*/

.ctr-bg {background-color: #444959; color:white; }

.shorter {max-width:220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.titlefield {max-width:720px; width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

table td.t-right, table.fancy th.t-right {text-align:right; padding-right:0;}
table.fancy th.t-center {text-align:center;}
table td.t-left {padding-left:.6em; text-align:left;}

tr .hover-predate .predate {display:none;}
tr:hover .hover-predate .predate {display:inline-block;}

.align-center {display:flex; gap:1em; align-items: center;}

.import-picker {max-width:450px}
td.indicator {padding-right: 16px; width:30px;}

div.arrow-up, div.arrow-down, div.arrow-left, div.arrow-right {width: 0px; height: 0px; --size: 6px;
position: relative; top:12px; left:-3px;}

div.arrow-up {border-left: var(--size) solid transparent; border-right: var(--size) solid transparent;
border-bottom: var(--size) solid #94df89;}

div.arrow-down {border-left: var(--size) solid transparent; border-right: var(--size) solid transparent;
border-top: var(--size) solid #ff7373;}

div.arrow-right {border-top: var(--size) solid transparent; border-bottom: var(--size) solid transparent;
border-left: var(--size) solid #ffdf93; top:10px;}

div.arrow-left {border-top: var(--size) solid transparent;border-bottom: var(--size) solid transparent; 
border-right:var(--size) solid #ffdf93;}

/*
span.arrow-up {background-color: #76b373; color:white;}
span.arrow-down {background-color: #d75454; color:white;}
span.arrow-right {background-color: #ffe5c9; color:black}
span.arrow-left {background-color: #ffe5c9; color:black}
*/

input[type="date"]::-webkit-inner-spin-button,

input[type="date"]::-webkit-calendar-picker-indicator {

    display: none;

    -webkit-appearance: none;

}