*, *::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: #242424;
    --inputborder: #e0e0e0;
    --inputborderbottom: #616161;
    --inputback: #fff;
    --inputfocus: #bd8301;
    --inputfocusborder: #0f6cbd;
    --inputfocusback: #fdf7e7;
    --placeholder: #242424;
    --darkblue: #002c4f;
    --blue: #014982;
    --midblue: #174c8d;
    --tabblue: #3694d1;
    --lightblue: #e9f0f5;
    --lightbluetext: #9ccbde;
    --green: #26a95e;
    --red: #db164c;
    --purple: #6658b5;
    --lightpurple: #c7c3ed;
    --yellowback: #fcf8e3;
    --yellowborder: #faebcc;
    --yellowtext: #8a6d3b; 
    --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;}
.input-wrap {position:relative; display:inline-block; width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.input-wrap::after {content:""; position:absolute; left:50%; bottom:0; height:3px; width:0; background:var(--inputfocusborder); transition: all 0.25s ease; border-bottom-left-radius:5px; border-bottom-right-radius:5px;}
.input-wrap:focus-within::after {width:100%; left:0;}

.formdateelement {width:100%; padding-bottom:20px;}

label {color:var(--input);}
input {color:var(--input); border:var(--inputborder) 1px solid; border-bottom-color:var(--inputborderBottom); background-color:var(--inputback); font-size:0.9rem; padding:4px 8px; border-radius:5px; transition:border .2s, box-shadow .2s; outline: none;}
select {color:var(--input); border:var(--inputborder) 1px solid; border-bottom-color:var(--inputborderBottom); background-color:var(--inputback); font-size:0.9rem; padding:6px 8px; border-radius:5px; transition:border .2s, box-shadow .2s;}
textarea {color:var(--input); border:var(--inputborder) 1px solid; border-bottom-color:var(--inputborderBottom); background-color:var(--inputback); font-size:0.9rem; padding:4px 8px; border-radius:5px; transition:border .2s, box-shadow .2s;}

input[type="text"], select, textarea, input[type="password"] {width:100%; -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(--inputborder) 1px solid; border-bottom-color:var(--inputfocusborder); outline:none;}
select:focus {border:var(--inputborder) 1px solid; border-bottom-color:var(--inputfocusborder); outline:none;} 
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%); position:relative;}
.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:200px; height:200px; fill:var(--lightblue);}
.clienticon {width:190px; height:190px; fill:var(--lightblue);}
.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:var(--blue);}
.requiredicon {width:12px; height:12px; fill:#db164c;}
.statustick {width:24px; height:24px; fill:var(--green); cursor:pointer;}
.statuscross {width:24px; height:24px; fill:var(--red); cursor:pointer;}

.downarrowicon, .uparrowicon, .sortarrowicon {width:20px; height:20px; fill:var(--blue); cursor:pointer;}
.editicon, .deleteicon, .cancelicon, .confirmicon {width:20px; height:20px; cursor:pointer; fill:var(--blue);}

.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; grid-template-rows:auto; width:100%; grid-gap:20px;}
.icongrid a {color:#014982; text-transform:uppercase; letter-spacing:0.2em;}
.icongrid a:hover {text-decoration:none; color:var(--blue); background: linear-gradient(170deg, rgba(255,255,255,0.05) 30%, var(--lightblue) 100%);}
.icongrid a:hover .iconsvg svg {fill:var(--blue);}
.iconbox {border:solid 1px var(--tabtext); box-shadow:0 4px 8px 0  rgba(187, 205, 218, 0.75); position:relative; overflow:hidden; height:220px; z-index:1}
.iconsvg {position:absolute; left:-70px; z-index:1}
.iconname {position:absolute; bottom:5px; right:10px; font-size:1.2em; z-index:2}

#curvetool {position:absolute; left:0; top:-100px; width:200%;}

/* ==========================================================================
   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;}

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

.tabbargrid {display:grid; grid-template-columns:1fr; grid-template-rows:auto; width:100%; height:100%; grid-gap:0; border-bottom:solid 1px var(--tabtext); margin-bottom:20px;}
.tabs {display:flex; flex-wrap:wrap; grid-row-gap:10px;}
.tab {border-bottom:solid 1px var(--tabtext); width:100%;}
.tab a { cursor:pointer; color:var(--tabtext);}
.tab a:hover {color:var(--blue); text-decoration:none;}
.tabtext {padding:6px 8px; text-align:center; text-transform:uppercase; font-size:0.8rem;}

.tabselected {border-bottom:solid 2px var(--tabblue); width:100%;}
.tabselected a {cursor:pointer;}
.tabselected a:hover {text-decoration:none;}
.tabselected .tabtext {font-weight:bold;}
.tablink {padding:6px 8px; text-transform:uppercase; text-align:center;}
.tablink a {color:var(--tabtext); font-size:0.8rem;}
.tablink a:hover {color:var(--blue); text-decoration:none;}


/* ==========================================================================
   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%); overflow:hidden;}
.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%);}

.linkbutton {width:100px; height:22px; padding:5px 8px; border-radius:5px; color:var(--blue); border:1px solid transparent;}
.linkbutton:hover {text-decoration:none;}

.savebutton {color:#fff; background-color:var(--midblue); 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-color:var(--lightblue); color:var(--blue); border:1px solid var(--blue);}

.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%);}

.iconbuttongrid {display:grid; grid-template-columns:30px 1fr; grid-template-rows:auto;  height:30px; padding:5px 8px; border-radius:5px; color:var(--blue); border:1px solid #fff; cursor:pointer;}
.iconbuttonicon svg {display:inline-block;}
.iconbuttontext {font-size:0.9rem; display:none;}

.buttonlink {border:none; background-color:transparent;}
a.editlink {text-decoration:none;}

.editbutton {color:var(--blue); width:40px;}
.editbutton:hover {text-decoration:none; border:1px solid var(--green); color:var(--green);}
.editbutton:hover .editicon {fill:var(--green);}

.deletebutton {color:var(--blue);}
.deletebutton:hover {text-decoration:none; border:1px solid var(--red); color:var(--red);}
.deletebutton:hover .deleteicon {fill:var(--red);}

.confirmbutton {border:1px solid var(--red); color:var(--red);}
.confirmicon {fill:var(--red);}
.confirmbutton:hover {text-decoration:none; background-color:var(--red); color:#fff;}
.confirmbutton:hover .confirmicon {fill:#fff;}

.cancelbutton {border:1px solid var(--blue); color:var(--blue);}
.cancelbutton:hover {text-decoration:none; background-color:var(--blue); color:#fff;}
.cancelbutton:hover .cancelicon {fill:#fff;}


/* ------------------------------------------------------- 
    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%;}
.grid33 {display:grid; grid-template-columns:1fr; grid-template-rows:auto; width:100%; height:100%;}
.grid25 {display:grid; grid-template-columns:1fr; grid-template-rows:auto; width:100%; height:100%;}

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

.copyright {padding:20px; text-align:right;}

/* ------------------------------------------------------- 
    table 1
------------------------------------------------------- */

.gridtable {width:100%; margin-bottom:20px; border-spacing:0;font-size:0.9rem;}

.gridtable tr.head {height:40px; color:var(--blue);}
.gridtable tr.head th {text-align:left; border-bottom:solid 3px var(--blue); font-weight:500;}
.gridtable tr.head th a {color:var(--blue); text-decoration:underline;}
.gridtable tr.head th a:hover {color:#0a243f; text-decoration:none;}
.gridtable tr.head th.first a:hover {color:#0a243f; text-decoration:none; background-color:transparent;}
 
.gridtable tr.rows {}
.gridtable tr.rows td {border-bottom:solid 1px #abd3f7; background-color:#f9fbfc;}

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

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

/* ------------------------------------------------------- 
    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; background-color:var(--lightblue);}
.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; margin-bottom:20px;}
.searchflex {display:flex; flex-wrap:wrap; grid-row-gap:10px;}
.searchinput {width:100%;}
.searchinput2 {width:100%;}
.directorypageof {color:var(--blue); text-align:left; padding-top:5px; font-size:0.9rem;}

.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; font-size:0.9rem;}
.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;}

    .tabbargrid {grid-template-columns:1fr 150px; grid-gap:20px;}
    .tabs {}
    .tab {border-bottom:none; width:auto;}
    .tabtext, .tablink {padding:13px 25px;}
    .tabselected {border-bottom:solid 5px #3694d1; width:auto;}

    .searchinput, .searchinput2  {width:45%; padding-right:5%;}
    .icongrid {grid-template-columns:1fr 1fr 1fr;}
    #curvetool {position:absolute; left:100px; top:-200px; width:2000px;}
}

@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;}
    #curvetool {position:absolute; left:100px; top:-350px; width:3500px;}
    #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; grid-gap:20px;}
    .grid25 {grid-template-columns:1fr 1fr 1fr 1fr; grid-gap:20px;}
    .searchgrid {grid-template-columns:1fr 250px;}
    .cardgrid {grid-template-columns:1fr 1fr; grid-gap:40px;}

    .gridtable td.first {padding-left:10px;}
    .gridtable tr.rows {height:50px;}
    .gridtable tr.rowsalt {height:50px;}
    .gridtable tr.selected {height:30px;}
    .gridtable tr.firstinvol {height:30px;}
    .responsivetable .textright {text-align:right;}

    .iconbuttontext {display:inline-block;}
    .editbutton {width:80px;}
    .directorypageof {text-align:right;}
    .searchinput {width:235px; padding-right:20px;}
    .searchinput2 {max-width:230px; padding-right:20px;}
   
    .icongrid {grid-template-columns:1fr 1fr 1fr 1fr;}

}

@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;}
    .icongrid {grid-template-columns:1fr 1fr 1fr 1fr 1fr;}
}

@media screen and (min-width:1200px) {
    .icongrid {grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;}
    #curvetool {position:absolute; left:100px; top:-400px; width:4000px;}
}