*, *::before, *::after{box-sizing:border-box;}
*{margin:0; padding:0;}
html:focus-within{scroll-behavior:smooth;}
a:not([class]){text-decoration-skip-ink:auto;}
img, picture, video, canvas{max-width:100%; height:auto; vertical-align:middle; font-style:italic; background-repeat:no-repeat; background-size:cover;}
input, button, textarea, select{font:inherit;}
body, html{height:100%; scroll-behavior:smooth;}
p, h1, h2, h3, h4, h5, h6 {overflow-wrap:break-word;}
p {text-wrap:pretty;}
h1, h2, h3, h4, h5, h6 {text-wrap:balance;}
@media (prefers-reduced-motion: reduce){
    html:focus-within {scroll-behavior:auto;}
    *, *::before, *::after {animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; transition:none;}
}

:root {
    --standard: #323232;
    --link: #007eba;
    --linkhover: #de3168;
    --white: #fff;
    --input: #014982;
    --inputborder: #014982;
    --inputback: #f7fbfd;
    --inputfocus: #bd8301;
    --inputfocusborder: #ead59d;
    --inputfocusback: #fdf7e7;
    --placeholder: #7fa5c4;
    --blue: #014982;
    --darkblue: #002c4f;
    --purple: #6658b5;
    --lightpurple: #c7c3ed;
    --yellowback: #fcf8e3;
    --yellowborder: #faebcc;
    --yellowtext: #8a6d3b;
    --lightblue: #e9f0f5;
    --lightbluetext: #9ccbde;
    --tabtext: #7fa5c4;
    --alertred-bg: #f2dede;
    --alertred-border: #ebccd1;
    --alertred-colour: #a94442;
    --alertyellow-bg: #fcf8e3;
    --alertyellow-border: #faebcc;
    --alertyellow-colour: #8a6d3b;
    --alertblue-bg: #d9edf7;
    --alertblue-border: #bce8f1;
    --alertblue-colour: #31708f;
    --alertgreen-bg: #dff0d8;
    --alertgreen-border: #d6e9c6;
    --alertgreen-colour: #3c763d;
}

#access {position:absolute; top:0; left:0; width:1px;}

html {font-family:system-ui, sans-serif;}
body {font-size:1rem; line-height:1.5; background-color:var(--lightblue);}

h1 {font-size:2rem; line-height:1.2; margin-bottom:1rem; color:var(--blue); font-weight:600; margin-bottom:10px;}
h1:focus {outline:none;}
h2 {font-size:1.5rem; line-height:1.0; font-weight:normal; margin-bottom:1rem; padding:0px;}
h2 a {color:var(--standard);}

a {color:var(--link); text-decoration:none;}
a:hover {color:var(--linkhover); text-decoration:underline;}
a:focus {outline: thin dotted var(--standard); outline:5px auto -webkit-focus-ring-color; outline-offset:-2px;}
a:hover, a:active {outline:0;}

#blazor-error-ui {color:var(--yellowtext); background:var(--yellowback); bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000;}
#blazor-error-ui .dismiss {cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem;}

.formelement {padding-bottom:20px;}
label {color:var(--input);}
input {color:var(--input); border:var(--inputborder) 1px solid; background-color:var(--inputback); font-size:1rem; padding:5px; border-radius:5px;}
select {color:var(--input); border:var(--inputborder) 1px solid; background-color:var(--inputback); font-size:1rem; padding:5px; border-radius:5px;}
textarea {color:var(--input); border:var(--inputborder) 1px solid; background-color:var(--inputback); font-size:1rem; padding:5px; border-radius:5px;}

input[type="text"], select, textarea, input[type="password"] {width:94%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
input[type="checkbox"], input[type="radio"], input[type="image"] {border:none;}
input[type="checkbox"] {margin-right:10px; color:#73a0b4;}

input[type=checkbox] {position:relative; cursor:pointer;}
input[type=checkbox] + label {display:inline-block; height:25px; vertical-align:middle; margin-left:20px; padding-top:13px;}
input[type=checkbox]:before {content: ""; display:block; position:absolute; width:18px; height:18px; top:0; left:0; border:1px solid #014982; border-radius:3px; background-color:#fff;}
input[type=checkbox]:checked:before {background-color:#499d60; border:1px solid #499d60;}
input[type=checkbox]:checked:after {content: ""; display:block; width:5px; height:10px; border:solid #fff; border-width: 0 2px 2px 0; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); position:absolute; top:2px; left:6px;}

.logincheckbox {display:inline-block;}
.logincheckbox label {color:#8dbbce;}

input:focus {border:var(--inputfocusborder) 1px solid; background-color:var(--inputfocusback); color:var(--inputfocus);}
select:focus {border:var(--inputfocusborder) 1px solid; background-color:var(--inputfocusback); color:var(--inputfocus);} 
textarea:focus {border:var(--inputfocusborder) 1px solid; background-color:var(--inputfocusback); color:var(--inputfocus);} 
input[type="submit"]:focus {background-color:#096da5; color:#fff;}

::placeholder {color:var(--placeholder); opacity:1;}

.validation-message {color:#a94442;}
input.invalid, select.invalid, textarea.invalid {border-color:#a94442; background-color:#f2dede; color:#a94442;}

.link {text-decoration:none; color:#fff; background-color: var(--blue); background: linear-gradient(150deg, var(--darkblue) 10%, var(--blue) 75%); text-align:center; font-size:1em; letter-spacing:0.1em; padding:8px 20px; text-transform:uppercase; border:1px solid #01457b; border-radius:5px;}
.link:hover {text-decoration:none; color:#fff; background-color:var(--blue); background: linear-gradient(150deg, var(--blue) 10%, var(--purple) 75%); border:1px solid #01457b;}
.linkright {text-align:right; width:100%;}

.cf:before, .cf:after {content:""; display:table;}
.cf:after {clear:both;}
.cf {zoom:1;}

.tabpage li {margin-left:30px;}

/* ==========================================================================
   Grid
   ========================================================================== */

header, nav, main, footer {position:relative; width:100%;}
.container {max-width:1400px; width:100%; margin:0px auto; position:relative;}

.greytop {color:var(--grey);}
.greybot {color:var(--grey); background: linear-gradient(15deg, var(--lightblue) 70%, var(--lightpurple) 100%);}
.blueback {background-color: var(--blue); background: linear-gradient(150deg, var(--darkblue) 10%, var(--blue) 75%, var(--purple) 100%);}
.white {background-color:#fff;} 

.headergrid {display:grid; grid-template-columns:1fr 60px 0; grid-template-rows:auto; width:100%; height:100%; grid-gap:20px; padding:20px;}
#OpenMenu {text-align:right;}

.logo {font-size:1.4rem; margin-top:10px;}
.logo a {color:#fff; text-decoration:none; padding:10px;}
.logo a:hover {color:var(--lightbluetext); text-decoration:none; background-color:rgba(255,255,255,0.05); border-radius:5px;}

footer {min-height:140px;}

/* ------------------------------------------------------- 
    vectors                             
------------------------------------------------------- */

.vectors {display:none;}
.vector {position:relative; width:100%; height:100%;}
.imglink {overflow:hidden; width:1px; height:1px;}

.menuicon {width:40px; height:25px; cursor:pointer; fill:#fff;}
.usericon {width:100px; height:100px; fill:#014982;}
.clienticon {width:100px; height:100px; fill:#014982;}
.note {width:24px; height:24px; fill:#2d6da0;}
.tooltip {width:20px; height:20px; fill:#fff; padding:6px; text-align:center; border-radius:50%; background-color:#ffc74d;}
.erroricon {width:100px; height:100px; fill:#014982;}
.requiredicon {width:12px; height:12px; fill:#db164c;}
.statustick {width:24px; height:24px; fill:#26a95e; cursor:pointer;}
.statuscross {width:24px; height:24px; fill:#db164c; cursor:pointer;}

.mybox {width:500px; height:100px; position:relative;}
.line1 {position:absolute; left:0; width:100px; height:100px; stroke:var(--lightpurple);}
.line2 {position:absolute; left:20px; width:100px; height:100px; stroke:var(--lightpurple);}
.line3 {position:absolute; left:40px; width:100px; height:100px; stroke:var(--lightpurple);}

.animated {animation-duration:1s; animation-fill-mode:both;}
.slide1 {animation-name:slide1;} @keyframes slide1 {from {transform:translate3d(-40%, 30%, 0);visibility:visible;}to {transform: translate3d(0, 0, 0);}}
.slide2 {animation-name:slide2;} @keyframes slide2 {from {transform:translate3d(-40%, 30%, 0);visibility:visible;}to {transform: translate3d(10%, -10%, 0);}}
.slide3 {animation-name:slide3;} @keyframes slide3 {from {transform:translate3d(-40%, 30%, 0);visibility:visible;}to {transform: translate3d(20%, -20%, 0);}}

.icongrid {display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:auto; width:100%; grid-gap:20px;}
.iconbox a {color:#014982; text-transform:uppercase; letter-spacing:0.2em;}
.iconbox a:hover {text-decoration:none; color:#33848c;}
.iconbox a:hover .usericon {fill:#33848c; transform: scale(1.4);}
.iconbox a:hover .clienticon {fill:#33848c; transform: scale(1.4);}
.iconbox a:hover .erroricon {fill:#33848c; transform: scale(1.4);}

.iconitem {display:grid; grid-template-columns:1fr; grid-template-rows:1fr 40px; width:100%; grid-gap:0px;}
.iconsvg {align-self:center; text-align:center; transition: transform .2s; padding-bottom:15px;}
.iconname {text-align:center; font-size:1.2em;}

/* ==========================================================================
   Navigation
   ========================================================================== */

#toolbar {clear:both;}
.toggleMenu {display:inline-block;}
.toggleSearch {display:inline-block;}
nav, ul, li, a  {margin:0; padding:0;}

#nav{position:fixed; padding:0; margin:0; top:0; left:0; width:100%; height:100%; z-index:998; background-color:var(--blue); background: linear-gradient(150deg, var(--darkblue) 10%, var(--blue) 75%, var(--purple) 100%);}

#nav {display:none;}
.nav {list-style:none; z-index:99;}

.nav:before, .nav:after {content:" "; display:table;}
.nav:after {clear:both;}

.nav ul {padding:0; list-style-type:none; display:block; width:100%;}
.nav a {padding:10px; color:#fff; font-size:1.4em;}
.nav a.nav-link {}
.nav a.nav-link.active{background-color:rgba(255,255,255,0.1); color:#9ccbde; border-radius:5px;}
.nav a:hover {color:var(--lightbluetext); text-decoration:none; background-color:rgba(255,255,255,0.05); border-radius:5px;}
.nav li {position:relative; margin:0; padding:0;}
.nav > li {float:none; text-align:center;}
.nav > li > a {display:block;}

#closebut {display:none;}
.nav li.closenav {margin:0; border-bottom:none; font-size:4em; padding:0 30px 0 0; cursor:pointer; color:#fff;}
.nav li.closenav a:hover {background-color:transparent;}
.nav > li.closenav {border-top:none;}

.left {float:left;}
.right {float:right;}
.setright {float:right; text-align:right; width:100%;}
.textright {text-align:right;}

.logininfo {color:var(--lightbluetext); position:absolute; left:30px; top:45px;}
.logininfo form {display:inline-block;}
.logininfo a {color:var(--lightbluetext)}
.logininfo a:hover {color:#fff;}
.logout {color:var(--lightbluetext); border:none; background-color:transparent; display:inline-block; cursor:pointer;}
.logout:hover {text-decoration:underline; color:#fff;}

/* ==========================================================================
   Content
   ========================================================================== */

header, nav, main, footer {position:relative; width:100%;}
.container {max-width:1600px; width:100%; margin:0px auto; position:relative;}

.blueback {background-color: var(--blue); background: linear-gradient(150deg, var(--darkblue) 10%, var(--blue) 75%, var(--purple) 100%);}
.white {background-color:#fff; color:#323232;} 

.pagegrid {display:grid; grid-template-columns:1fr; grid-template-rows:auto; width:100%; height:100%; grid-gap:20px; padding:20px;}
.fullwidth {padding:20px;}

.button {float:right; margin:0 0 5px 10px;}
.button a {color:var(--blue); background-color:#fff; cursor:pointer; text-align:center; font-size:1.2em; padding:8px 12px; text-transform:uppercase; letter-spacing:0.05em; border:none; font-weight:600; border-radius:5px;}
.button a:hover {text-decoration:none; color:#fff; background:linear-gradient(90deg, var(--blue) 70%, var(--purple) 100%);}

.cancelbutton {color:#fff; background-color:#018dcb; padding:5px 8px 5px 8px; border-radius:2px; border:none;}
.cancelbutton:hover {color:#014982; background-color:transparent; text-decoration:none; border:1px solid #014982;}
.confirmbutton {color:#fff; background-color:#f12222; padding:5px 8px; border-radius:2px; border:none;}
.confirmbutton:hover {color:#f12222; background-color:transparent; text-decoration:none; border:1px solid #f12222;}
.deletebutton {color:#f12222; background-color:transparent; padding:5px 8px; border-radius:2px; border:none;}
.deletebutton:hover {color:#fff; background-color:#f12222; text-decoration:none;}

.savebutton {color:#fff; background:linear-gradient(90deg, var(--blue) 70%, var(--purple) 100%); cursor:pointer; text-align:center; padding:8px 12px; letter-spacing:0.05em; border:none; font-weight:600; border-radius:5px;}
.savebutton:hover {text-decoration:none; background:linear-gradient(120deg, var(--blue) 0%, var(--purple) 50%);}

.slimbutton {color:#fff; background:linear-gradient(90deg, var(--blue) 70%, var(--purple) 100%); cursor:pointer; text-align:center; padding:5px 10px; letter-spacing:0.05em; border:none; font-weight:600; border-radius:5px; font-size:1rem}
.slimbutton:hover {text-decoration:none; background:linear-gradient(120deg, var(--blue) 0%, var(--purple) 50%);}

.green {color:#34c46f; padding:5px 8px 5px 8px; border-radius:2px;}
.green:hover {color:#fff; background-color:#34c46f; text-decoration:none;}

/* ------------------------------------------------------- 
    page framework                                
------------------------------------------------------- */

.tabpage {position:relative; top:0px; left:0px; padding:10px 20px 20px 20px;}
.admintop {padding:0 0 5px 0; margin-bottom:20px; border-bottom:6px solid var(--blue);}
.admintop2 {margin-bottom:20px;}

.grid5050 {display:grid; grid-template-columns:1fr; grid-template-rows:auto; width:100%; height:100%; grid-gap:20px;}
.grid33 {display:grid; grid-template-columns:1fr; grid-template-rows:auto; width:100%; height:100%; grid-gap:20px;}
.grid25 {display:grid; grid-template-columns:1fr; grid-template-rows:auto; width:100%; height:100%; grid-gap:20px;}

.adminleft {float:left; width:70%;}
.adminright {float:left; width:30%; text-align:right;}

.copyright {padding:20px;}

/* ------------------------------------------------------- 
   tabs                                
------------------------------------------------------- */

.tabbargrid {display:grid; grid-template-columns:1fr 150px; grid-template-rows:auto; width:100%; height:100%; grid-gap:20px; border-bottom:solid 1px var(--tabtext); margin-bottom:20px;}
.tab {float:left;}
.tab a { cursor:pointer; color:var(--tabtext);}
.tab a:hover {text-decoration:none;}
.tabtext {padding:13px 25px; text-align:center; text-transform:uppercase; font-size:1rem;}

.tabselected {float:left; border-bottom:solid 5px #3694d1;}
.tabselected a {cursor:pointer;}
.tabselected a:hover {text-decoration:none;}
.tabselected .tabtext {font-weight:bold;}
.tablink {padding:13px 25px; text-transform:uppercase;}
.tablink a {color:var(--tabtext);}
.tablink a:hover {color:var(--linkhover);}

/* ------------------------------------------------------- 
    table 2
------------------------------------------------------- */

.gridtable2 {width:100%; margin-bottom:20px; border-spacing:0;}

.gridtable2 tr.head {height:50px; color:#014982;}
.gridtable2 tr.head th {text-align:left; border-bottom:solid 1px #014982;}
.gridtable2 tr.head th.textright {text-align:right; padding-right:10px;}

.gridtable2 tr.head th a {color:#014982; text-decoration:underline;}
.gridtable2 tr.head th a:hover {color:#0a243f; text-decoration:none;}
.gridtable2 tr.head th.first a:hover {color:#0a243f; text-decoration:none; background-color:transparent;}
 
.gridtable2 tr.rows {height:50px;}
.gridtable2 tr.rows td {border-bottom:solid 1px #abd3f7;}
.gridtable2 tr.rowsalt {background-color:#f7fbfd; height:50px;}
.gridtable2 tr.rowsalt td {border-bottom:solid 1px #abd3f7;}

.gridtable2 td {padding:4px 10px 4px 0px;}
.gridtable2 td.first a {color:#3e6283; text-decoration:underline; padding:5px 8px 5px 8px;}
.gridtable2 td.first a:hover {color:#fff; background-color:#09233e; text-decoration:none;}

.gridtable2 th.first {padding-left:10px;}
.gridtable2 td.hfirst a {color:#3e6283;}
.gridtable2 td.first {padding-left:10px;}
.gridtable2 td.first2 {padding-left:10px;}

/* ------------------------------------------------------- 
    record paging
------------------------------------------------------- */

.searchgrid {display:grid; grid-template-columns:1fr; grid-template-rows:auto; width:100%; height:100%; grid-gap:15px;}
.directorypageof {color:var(--tabtext);}

.pagingrid {display:grid; grid-template-columns:1fr; grid-template-rows:auto; width:100%; height:100%; grid-gap:15px;}

.pagingnav {width:100%; font-weight:bold; margin-top:40px;}
.pagingnav ul{margin:0px; padding:0px; list-style-image: none; list-style-type: none; text-indent:0px; text-align: left;}
.pagingnav li {display:inline; margin-left:10px;}
.pagingnav li button {color:#014982; font-weight:bold; padding:6px 10px; margin-right:0px; border-radius:5px; border:none; background-color:transparent;}
.pagingnav li button:hover {text-decoration:underline;}

.pagingnav li.pagingon button {background-color:rgba(69,98,163,0.5); background-image: linear-gradient(150deg, var(--darkblue) 10%, var(--blue) 60%, var(--purple) 100%); color:#fff; border-radius:5px; border:none;}

/* ------------------------------------------------------- 
    card layout                 
------------------------------------------------------- */

.cardgrid {display:grid; grid-template-columns:1fr; grid-template-rows:auto; width:100%; height:100%; grid-gap:20px; padding-top:40px;}
.card {display:grid; grid-template-columns:1fr; grid-template-rows:1fr 50px; width:100%; height:100%; border:solid 1px var(--tabtext); box-shadow:0 4px 8px 0  rgba(187, 205, 218, 0.75); z-index:1;}
.cardcontent {padding:20px;}
.cardlink {text-align:right; padding:0 20px 10px 0;}

/* ------------------------------------------------------- 
    warnings                 
------------------------------------------------------- */

.alert {padding:15px; margin:20px 0; border:1px solid transparent; border-radius:4px; width:94%;}
.alert-red, .alert-danger {color:var(--alertred-colour); background-color:var(--alertred-bg); border-color:var(--alertred-border);}
.alert-yellow, .alert-warning {color:var(--alertyellow-colour); background-color:var(--alertyellow-bg); border-color:var(--alertyellow-border);}
.alert-blue, .alert-info {color:var(--alertblue-colour); background-color:var(--alertblue-bg); border-color:var(--alertblue-border);}
.alert-green, .alert-success {color:var(--alertgreen-colour); background-color:var(--alertgreen-bg); border-color:var(--alertgreen-border);}

/* ------------------------------------------------------- 
    confidentiality
------------------------------------------------------- */

h2.terms {color:#6d6e71;}
.termslarge {font-size:1.4em; font-weight:600;}
.termstable {border:1px solid #6d6e71;}
.termstable th {text-align:left; padding:10px;}
.termstable td {border-top:1px solid #6d6e71; padding:10px;}
.termstable .termscat {border-right:1px solid #6d6e71; text-align:center;}
.termstable .termsused {border-left:1px solid #6d6e71; text-align:center;}
.termsagree {padding:20px; color:#3c763d; background-color:#dff0d8; border-color:#d6e9c6;}
.buttonagree {color:#fff; background-color:#3c763d; cursor:pointer; text-align:center; font-size:1.4em; padding:5px 10px; border-radius:5px;}


.dategrid {display:grid; grid-template-columns:1fr 1fr 100px; grid-template-rows:auto; width:100%; height:100%; grid-gap:15px; max-width:500px;}

/* ------------------------------------------------------- 
    reconnect modal
------------------------------------------------------- */

.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible,
.components-rejoining-animation {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
    display: block;
}

#components-reconnect-modal {background-color:white; width:20rem; margin:20vh auto; padding:2rem; border:0; border-radius:0.5rem; box-shadow:0 3px 6px 2px rgba(0, 0, 0, 0.3); opacity:0; transition:display 0.5s allow-discrete, overlay 0.5s allow-discrete; animation: components-reconnect-modal-fadeOutOpacity 0.5s both;
&[open]
{animation:components-reconnect-modal-slideUp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity 0.5s ease-in-out 0.3s; animation-fill-mode: both;}
}

#components-reconnect-modal::backdrop {background-color:rgba(0, 0, 0, 0.4); animation:components-reconnect-modal-fadeInOpacity 0.5s ease-in-out; opacity:1;}
@keyframes components-reconnect-modal-slideUp {0% {transform: translateY(30px) scale(0.95);} 100% {transform: translateY(0);}}
@keyframes components-reconnect-modal-fadeInOpacity {0%{opacity: 0;} 100%{opacity: 1;}}
@keyframes components-reconnect-modal-fadeOutOpacity {0% {opacity: 1;} 100% {opacity: 0;}}

.components-reconnect-container {display:flex; flex-direction:column; align-items:center; gap: 1rem;}
#components-reconnect-modal p {margin:0; text-align:center;}
#components-reconnect-modal button {border:0; background-color:#6b9ed2; color:white; padding:4px 24px; border-radius:4px;}
#components-reconnect-modal button:hover {background-color:#3b6ea2;}
#components-reconnect-modal button:active {background-color: #6b9ed2;}
.components-rejoining-animation {position:relative; width:80px; height:80px;}
.components-rejoining-animation div {position:absolute; border:3px solid #0087ff; opacity:1; border-radius:50%; animation:components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;}
.components-rejoining-animation div:nth-child(2) {animation-delay: -0.5s;}

@keyframes components-rejoining-animation {
    0% {top:40px; left:40px; width:0; height:0; opacity:0;}
    4.9% {top:40px; left:40px; width:0; height:0; opacity:0;}
    5% {top:40px; left:40px; width:0; height:0; opacity:1;}
    100% {top:0px; left:0px; width:80px; height:80px; opacity:0;}
}



@media screen and (min-width:481px) {

}

@media screen and (min-width:600px) {
    .grid25 {grid-template-columns:1fr 1fr;}
}

@media screen and (min-width:900px) {
    #access {width:2px;}
    .headergrid {grid-template-columns:1fr 0 300px; grid-template-rows:70px;}
    #navbox {position:relative; top:0; left:0; z-index:2;}
    #OpenMenu {display:none;}
    #nav {position:relative; padding:0; margin:0; background:none; display:block;}
    .navcontainer {width:100%;}

    .nav {position:relative; padding:0; float:right;} 
    .nav li {margin:0;}
    .nav a {padding:8px 15px; color:#fff;}

    .nav a.navparent .menuright {padding-left:15px;}
    .nav > li {float:left; border-top:none; position:static;}
    .nav ul {list-style:none; z-index:999; width:200px; }

    .logininfo {right:15px; top:50px; text-align:right;}

    .tabpage {padding:10px 30px 30px 30px;}
    .grid5050 {grid-template-columns:1fr 1fr; grid-gap:40px;}
    .grid33 {grid-template-columns:1fr 1fr 1fr;}
    .grid25 {grid-template-columns:1fr 1fr 1fr 1fr;}
    .searchgrid {grid-template-columns:1fr 250px;}
    .cardgrid {grid-template-columns:1fr 1fr; grid-gap:40px;}
}

@media screen and (min-width:1000px) {

}

@media screen and (min-width:1100px) {
    .tabpage {padding:10px 40px 40px 40px;}
    .cardgrid {grid-template-columns:1fr 1fr 1fr;}
    .cardcontent {padding:30px;}
    .cardlink {padding:0 40px 20px 0;}
}

@media screen and (min-width:1200px) {

}