:root {
  --clrA:#4e9eff;
  --clrBack:#1a0040; /*#160036*/
  --clrBannerBorderDetail:#140061; /*Lighter Navy-Purple*/
  --clrBannerBorderError:#b50202; /*Med Red*/
  --clrBannerBorderInfo:#0029e0; /*Med Blue*/
  --clrBannerBorderSuccess:#129900; /*Med Green*/
  --clrBannerBorderWarning:#d98600; /*Med Orange*/
  --clrBannerDetail:#0a0030; /*Navy-Purple*/
  --clrBannerError:#ffa1ac; /*Light Red*/
  --clrBannerInfo:#8cbeff; /*Light Blue*/
  --clrBannerSuccess:#96ff98; /*Light Green*/
  --clrBannerWarning:#ffdfab; /*Light Orange*/
  --clrBar:#0d001f;
  --clrBorder:#986bff;
  --clrHighlight1:#3c0e80; /*#ba6bff*/
  --clrHighlight2:#7321de;
  --clrText:#eee; /*TODO*/
  --clrTODO:#000;
}

html {
  background:rgb(98,66,173);
  background:radial-gradient(circle, rgba(98,66,173,1) 0%, rgba(62,27,129,1) 35%, rgba(11,0,33,1) 100%);
  color:var(--clrText);
}

a { color:var(--clrA); }

body {
  margin:auto;
  width:90%;
}

table { border-collapse:collapse; }

.ctv_section {
  background-color:var(--clrBack);
  border:solid 1px var(--clrBorder);
  border-radius:5px;
  margin:15px 0px;
  overflow:hidden
  padding:0px 0px 10px 0px;
}
.ctv_section p {
  padding:1px 18px 1px 35px;
}
.ctv_section table, .ctv_section ul {
  margin-left:35px;
  margin-right:18px;
}
.ctv_section h2 {
  background-color:var(--clrBar);
  border-bottom:solid 1px var(--clrBorder);
  border-top-left-radius:8px;
  border-top-right-radius:8px;
  margin:0px;
  padding:4px 10px;
}

/***** Global Helper Classes *****/
.ctv_indent { text-indent:35px; }
.ctv_indent_all { margin-left:20px; }
.ctv_invisible, .ctv_invisible2 { display:none; }
.ctv_tab { dislplay:inline-block; width:35px; }


/***** Webkit Styling *****/
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background-color:var(--clrBack); }
::-webkit-scrollbar-thumb { /* Handle */
  background:var(--clrHighlight1);
  border-radius:10px;
}
::-webkit-scrollbar-thumb:hover { background:var(--clrBorder); }


/***** Banner Styling (JS inserts Banners) *****/
.ctv_banner {
  border:solid 3px #ccc;
  border-radius:9px;
  color:#000;
  margin:1px 2px 1px 45px;
}
.ctv_banner.error   { background-color:var(--clrBannerError);   border-color:var(--clrBannerBorderError); }
.ctv_banner.info    { background-color:var(--clrBannerInfo);    border-color:var(--clrBannerBorderInfo); }
.ctv_banner.success { background-color:var(--clrBannerSuccess); border-color:var(--clrBannerBorderSuccess); }
.ctv_banner.warning { background-color:var(--clrBannerWarning); border-color:var(--clrBannerBorderWarning); }

.ctv_banner .ctv_icon_close{ margin:1px 1px 0px 0px; }
.ctv_banner .ctv_load_msg { display:block; } /*JS moves them into .banner divs*/

.ctv_banner_text div {
   margin:0px;
   padding:9px 14px; }
.ctv_banner_text div:nth-child(even) {
   background-color:rgba(0,0,0,0.05);
   border-bottom:solid 1px rgba(0,0,0,0.1);
   border-top:solid 1px rgba(0,0,0,0.1);
}
.ctv_banner_text p {
  border-left:dotted 1px #666;
  margin:0px 30px;
  padding-left:10px;
}

.ctv_icon {
  background-repeat:no-repeat;
  cursor:pointer;
  display:inline-block;
  filter:brightness(80%);
  vertical-align:middle;
}
.ctv_icon:hover { filter:brightness(100%); }
.ctv_icon.disabled {
  cursor:auto;
  filter:saturate(0) brightness(400%); /*TODO: test this!!!*/
}

.ctv_icon_close {
  float:right;
  height:20px;
  margin:1px 1px 0px 0px;
  padding:0;
}


/***** Nav Bar Styling (JS inserts nav bar) *****/
#ctv_foot {
  background-color:var(--clrHighlight1);
  border-top:solid 1px var(--clrBorder);
  font-size:1.2em;
  margin-top:100px;
  padding:0;
  text-align:center;
}
#ctv_foot a {
  display:inline-block;
  color:var(--clrA);
  padding:15px 25px;
}
#ctv_foot a:hover {
  background-color:var(--clrBorder);
  color:black;
  font-weight:bold;
}
#ctv_foot a+a { border-left:solid 1px var(--clrBack); }

#ctv_head {
  background-color:var(--clrHighlight1);
  color:var(--clrText);
  overflow:hidden;
}
#ctv_head a { text-decoration:none; }
#ctv_head > a { color:var(--clrText); }
#ctv_head > a, #ctv_head > div {
  display:inline-block;
  color:inherit;
  margin:0;
  padding:8px 16px;
  text-align:center;
  vertical-align:top;
}
#ctv_head > div img {
  height:32px;
  vertical-align:middle;
}
#ctv_head .dropdown { /* dropdown container */
  background-color:inherit;
  overflow:hidden;
}
/* Link coloring, on hover */
#ctv_head a:hover, #ctv_head .dropdown:hover {
  background-color:var(--clrBorder);
  color:black;
}
/* Dropdown content (hidden by default) */
#ctv_head .dropdown-content {
  display:none;
  position:absolute;
  background-color:#f9f9f9;
  box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
  margin:8px 0px 0px -16px;
  min-width:160px;
  z-index:999;
}
/* Links inside the dropdown */
#ctv_head .dropdown-content a {
  display:block;
  color:black;
  padding:8px;
  text-align:left;
}
/* Add a grey background color to dropdown links on hover */
#ctv_head .dropdown-content a:hover { background-color:#ddd; }
/* Show the dropdown menu on hover */
#ctv_head .dropdown:hover .dropdown-content { display:block; }