html {scroll-behavior: smooth;}
body {margin:0; transition: background-color 0.5s ease;}
main {margin:2em 4em; margin-bottom:1em;}
@media only screen and (max-width: 960px) {main {margin:4%;}}

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

table.fancy th {background-color: var(--primary);}
table.compact {font-size:0.9em;}


/* Form Grids */
.grid-2-col, .grid-2-wide, .grid-2-narrow, .grid-2-back-wide, .grid-3-col, .grid-3-front-wide, .grid-3-back-wide, .grid-4-col, .grid-4-back-wide, .grid-5-col, .grid-5-wide, .grid-5-back-wide, .grid-2-1, 
.grid-3-wide ,.grid-4-wide, .grid-4-2col, .grid-min {display:grid; grid-gap:1em; grid-row-gap:0em;}

.grid-2-1 {grid-template-columns: 2fr 1fr;}
.grid-2-narrow {grid-template-columns: 1.5fr 1fr;}
.grid-2-wide {grid-template-columns: 3fr 1fr;}
.grid-2-back-wide {grid-template-columns: 1fr 2fr;}
.grid-2-col {grid-template-columns: 1fr 1fr;}
.grid-3-col {grid-template-columns: 1fr 1fr 1fr;}
.grid-3-front-wide {grid-template-columns: 1.5fr 1.5fr 1fr;}
.grid-3-back-wide {grid-template-columns: 1fr 1fr 2fr;}
.grid-3-wide {grid-template-columns: 2fr 1fr 1fr;}
.grid-4-col {grid-template-columns: 1fr 1fr 1fr 1fr;}
.grid-4-back-wide {grid-template-columns: 1fr 1fr 1fr 4fr;}
.grid-4-2col {grid-template-columns: 2fr 2fr 1fr 1fr;}
.grid-4-wide {grid-template-columns: 2fr 1fr 1fr 1fr;}
.grid-5-col {grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
.grid-5-wide {grid-template-columns: 2fr 1fr 1fr 1fr 1fr;}
.grid-5-back-wide {grid-template-columns: 2fr 1fr 1fr 1fr 3fr;}
.grid-min {grid-template-columns: max-content;}

.grid-flex {display:flex; justify-content: start; gap:1em;}
.grid-flex-column {display:flex; justify-content: start; gap:1em; flex-flow: column;}

@media only screen and (max-width: 1100px) {
.grid-2-col, .grid-2-narrow, .grid-2-wide, .grid-2-back-wide, .grid-3-col, .grid-3-front-wide, .grid-3-back-wide, .grid-4-col, .grid-2-1, 
.grid-3-wide ,.grid-4-wide, .grid-4-back-wide, .grid-4-2col, .grid-5-col, .grid-5-wide, .grid-5-back-wide, .grid-min {
	grid-template-columns: 1fr 1fr }
}

@media only screen and (max-width: 768px) {
.grid-2-col, .grid-2-narrow, .grid-2-wide, .grid-2-back-wide, .grid-3-col, .grid-3-front-wide, .grid-3-back-wide, .grid-4-col, .grid-2-1, 
.grid-3-wide ,.grid-4-wide, .grid-4-2col, .grid-4-back-wide, .grid-5-col, .grid-5-wide, .grid-5-back-wide, .grid-min {
	grid-template-columns: 1fr }
}

/* Icons */
.icon-delete {opacity:0.2; position:relative;top:4px; cursor:pointer; width:20px; transition: width 0.1s;}
.icon-delete:hover {opacity: 0.6;}
.icon-edit {opacity:0.2; position:relative;top:2px; width:23px;}
button .icon-delete {opacity: 0.4; top:2px;}

.icon-copy {opacity:0.5; position:relative;top:2px; right:1px; cursor:pointer; width:20px; transition: width 0.1s;}
.icon-copy:hover {opacity: 0.8;}

.color-mode {cursor:pointer;}
.color-mode:hover {opacity:0.7}


/* 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-dark);}
.main-nav ul li ul li {width: 100%; box-sizing: border-box; border-bottom:1px dashed var(--highlight); background:var(--primary-dark);}
.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;} }



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


/* Auth */
.auth-layout {max-width:700px; margin:0 auto; margin-top:6em; margin-bottom:3em; padding: 2em 3em 1em 3em; background: #e8e8e8; border-radius:0.5em;}
.auth-layout.user-table {max-width:90%;}
@media only screen and (max-width: 960px) {
	.auth-layout {margin-top:3em;}
	.auth-login a {white-space:nowrap;}
	.auth-login button {margin-bottom:1em;}
}


/* Searchbox */
.searchbox {position:relative; margin-bottom:0;}
.searchbox input { background-color: var(--primary-dark); 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:var(--primary-dark); border:1px solid var(--primary-dark); 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::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-dark);}

/* Pager */
ul.pager {display: flex; box-sizing: border-box; gap:0.3em;
flex-wrap: wrap; flex-direction: row;
justify-content:center; align-items: center;
margin-top:1.5em; margin-bottom:1.5em;
list-style-type: none; padding:0.5em
}

ul.pager li a {color:#444; background:#efefef; padding:.3em .8em; border-radius:3px;
white-space:nowrap;text-decoration:none;
text-align:Center; box-sizing: border-box; display:block;}

ul.pager li a:hover, a.archiv:hover {background:#444; color:white;}
ul.pager li a.active {background:var(--primary); color:white;}
ul.pager li a.disabled {background:#ececec; color:#b1b1b1;}