/* --------- GLOBAL STRUCTURE --------- 

------ GLOBAL ------

#00ffff TGA aqua 
#f95108 TGA orange
#151515 darkest slate -- background
#323844 medium slate -- table header
#616161 light slate -- borders

------ MAIN ------

#4c9393 aqua
#006666 dark aqua
#f2c665 retro yellow

------ DASHBOARD ------

#6d6b9c indigo
#2b2b40 dark indigo

------ W3.CSS ------

#f44336 w3 red
#ff9800 w3 orange
#ff5722 w3 deep orange
#4CAF50 w3 green
#4c729f w3 blue
#3f51b5 w3 indigo
#f1f1f1 w3 light grey
#9e9e9e w3 grey
#616161 w3 dark grey

https://www.color-hex.com/color-palette/1016433

#ca3c4a	(202,60,74) -- red
#ef7546	(239,117,70) -- orange
#f2c665	(242,198,101) -- yellow
#93d4a5	(147,212,165) -- green
#99beb7	(153,190,183) -- blue
#6d6b9c (109,107,156) -- purple

------ BACKGROUND IMAGES ------

/images/bg-stardestroyer.jpg
/images/bg-deathstar.png
/images/bg-stars-page.jpg
/images/bg-planet.jpg
/images/bg-bountyhunter.jpg
/images/bg-forceuser.jpg
/images/bg-mando.jpeg
/images/bg-scouttrooper.jpg

------ CSS DIRECTORY ------

DEFAULT 
PATTERNS - font, colors, shapes
GRIDS
MODALS
BLOCKS
TABLES
OBJECTS
FORMS
ANIMATIONS
MEDIA - responsive

---------------------------
*/

:root {
/* CHECKBOX https://gist.github.com/EternityForest/929a3fcd3c752a19ebccfff6b5348dff */
  --graphical-fg: var(--input-bg);
  --box-bg: var(--light-slate);
  --control-height: 1.6rem;
  --control-border-width: 1px;
  --3d-highlight: color-mix(in srgb, var(--box-bg) 50%, rgba(241, 241, 241, 0.695));
  --3d-shadow: color-mix(in srgb, var(--box-bg) 50%, rgba(0, 0, 0, 0.101));
  --concave-item-bg: linear-gradient(180deg, var(--3d-shadow) 12%, var(--3d-highlight) 88%);
  --convex-item-bg: linear-gradient(180deg, var(--3d-highlight) 0%, var(--3d-shadow) 96%);
  --concave-item-box-shadow: inset 0px 0px 4px 2px #383838;
  --control-bg: var(--input-border);
  --highlight-color: var(--green);
  --control-border-color: color-mix(in srgb, var(--graphical-fg) 35%, rgb(0 0 0 / 0%))
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: all 0.5s ease;
}

*, *:before, *:after {
  box-sizing: inherit;
}

html { 
 scroll-behavior: auto;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 background-attachment: fixed;
}

body {
  font-family: "Play", sans-serif;
  color:var(--global-font);
  font-size:16px;
  line-height: 1.4;
  letter-spacing:1.0px;
  padding:0;
  margin:0;
  height:100%;
  min-height:100vh;
  min-height:100dvh;
  background: url('/images/bg-tv-static-vertical.png') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
}

::-webkit-scrollbar {width: 10px;height:10px;}

h1, h2, h3, h4, h1 span, h2 span, h3 span, h4 span {font-family: 'Aurebesh-English', sans-serif;margin:0;color:var(--hlarge);}
h5, h6, h5 span, h6 span {font-family: 'ShapeFont', sans-serif;margin:0;color:var(--hsmall);}

h1 {font-size: clamp(2rem, 2vw + 1rem, 2.5rem);line-height:1.3;}
h2 {font-size: clamp(1rem, 2vw + 1rem, 2rem);line-height:1.2;}
h3 {font-size: clamp(1rem, 1.5vw + 1rem, 1.5rem);line-height:1.1;}
h4 {font-size: clamp(1rem, 1vw + 1rem, 1rem);line-height:1.0;}

a[id] {scroll-margin-top: 100px;}
a, a i {
 text-decoration:none;
 cursor: pointer;
 transition: all 0.5s ease;
}
a:hover, a:active, a:hover i, a:active i {cursor: pointer;}

a, a i {color:var(--link-color);}
a:hover, a:active, a:hover i, a:active i {color:var(--link-hover);}

a i {color:var(--link-color);}
a:hover i, a:active i {color:var(--link-hover);}

.anchor {display: block;position: relative;top: -50px;visibility: hidden;}

/* Track */
::-webkit-scrollbar-track {
    background: var(--dark-slate);
    border-radius:10px;
}

::-webkit-scrollbar-corner { background: transparent; }

/* Handle */
::-webkit-scrollbar-thumb {
  background-color: var(--main-dark);
  border: solid 2px var(--main-dark);
    border-radius:10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
border: solid 2px var(--main-color);
background-color: var(--main-color);
}

::-webkit-scrollbar-thumb:horizontal{
  background-color: #333;
  border: solid 2px #333;
  border-radius:10px;
}

/* 
 ------------------------------------------------------------
 ------------ PATTERNS - font, colors, shapes
 ------------------------------------------------------------
*/

.pageheader {color:var(--yellow);}
.pageheader span {color:var(--main-dark);font-family: 'Aurebesh', sans-serif !important;}

.aurebesh {font-family: 'Aurebesh', sans-serif !important;}
.aurebesheng {font-family: 'Aurebesh-English', sans-serif !important;}
.encrypt {font-family: 'Wollicht', sans-serif !important;}
.shapefont {font-family: 'ShapeFont', sans-serif !important;}

.bx, .bxl, .swg {vertical-align:middle !important;padding:0 !important;margin:0 !important;}

.staff {color:#6d6b9c !important;}
.volunteer {color:#4c729f !important;}
.ghost {color:#00ffff !important;}
.red {color:#f44336 !important;}
.orange {color:#ff9800 !important;}
.deeporange {color:#ff5722 !important;}
.green {color:#4CAF50 !important;}
.merchant {color:#abf977 !important}

.notice {
  width: 100%;
  padding:8px;
  font-size:0.9em;
  background: rgb(255, 87, 34) !important;
  background: rgba(255, 87, 34,0.4) !important; 
}

.wordwrap {
/* wrap long text and urls */
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
word-wrap: break-word; /* IE 5+ */
overflow-wrap: break-word;
word-break: break-word
} 

.line-height .w3-col {padding:8px 8px 0 0 !important;}
.margintop8 {margin-top:8px !important;}
.padding8 {padding:8px;}
.padding16 {padding:16px;}
.padding16-8 {padding:16px 8px;}
.stretch {margin:0 -8px !important;}

.editor p {color:#ddd;font-family: "Play", sans-serif;}
.editor ul, ol {color:#ddd;font-family: "Play", sans-serif;}
.editor li {color:#ddd;font-family: "Play", sans-serif;}
.editor ul li li {color:#ddd;font-family: "Play", sans-serif;}
.editor table {color:#ddd;font-family: "Play", sans-serif;}
.editor table tr {color:#ddd;font-family: "Play", sans-serif;}
.editor table td {color:#ddd;font-family: "Play", sans-serif;}
.editor {line-height:1.8;}
.editor p {padding:5px 0;margin:0;}
.editor ul, ol {margin-left:30px;}
.editor li {letter-spacing:1px;}
.editor ul li li {letter-spacing:1px;}
.editor table {border-collapse: collapse;}
.editor table tr {border:solid 1px #505050;}
.editor table td {border:0;padding:5px;vertical-align:top;}

.textarea-frame {
 background: #323844 !important;
 padding:5px !important;   
}

.textarea-box {
 background:#101010 !important;
 padding:10px !important;
 height:200px !important;
 overflow: auto;   
}

.textarea-flex {
 background:#101010 !important;
 padding:10px !important;
}

.hexgon {
  --b: 10px; /* adjust to control the border  */
  height: 100px; /* adjust to control the size  */
  aspect-ratio: 1/cos(30deg);
  clip-path: 
    polygon(0 50%,50% -50%,100% 50%,50% 150%,0 50%,
    var(--b) 50%,
    calc(25% + var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)),
    calc(75% - var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)),
    calc(100% - var(--b)) 50%,
    calc(75% - var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)),
    calc(25% + var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)),
    var(--b) 50%);
  background: var(--light-slate);
  position: relative;
}

.hexagon {
  width: 100px;
  aspect-ratio: 1 / 1.2;
  background: #3b82f6; /* Border Color */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  padding: 8px; /* Border Thickness */
  box-sizing: border-box;
}

.hexagon-content {
  width: 100%;
  height: 100%;
  background: #ffffff; /* Inner Background */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* 
 ------------------------------------------------------------
 ------------ GRIDS
 ------------------------------------------------------------
*/

.grid-main {
   display:grid;
   grid-template-rows:auto 1fr auto;
   grid-template-columns:100%;
   min-height:100vh;
   min-height:100svh;
   grid-template-areas:
        'header'
        'main'
        'footer';
}

.grid-main > * {
    padding:0;
}

.grid-main > .header {
  grid-area:header;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.6);
  border-bottom:solid 1px #333;
  position:sticky;
  top:0;
  width:100%;
  height:50px;
  padding:0;
  display:flex;
  align-items:center;
  z-index:100;
}

.header .nav-left {width:40%;}
.header .logo {width:100%;}
.header .nav-middle {
  flex:1;
  text-align:right;
}
.header .nav-right {
  width:55px;
  height:50px;
  text-align:center;
  border-left:solid 1px #333;
  align-self:center;  
}
.header i {color:#ddd;margin-right:12px !important;}
.header .avatar {
 width:45px;
 height:45px;
 margin-top:3px;
 border-radius:50%;
 background: #151515;
 border:solid 2px #151515;
}
.header .avatar img {
  width:100%;
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: top center;
}  
.header .avatar:hover {border:solid 2px var(--link-hover);}
    
.grid-main > .main {
  grid-area:main;
  background:none;
}

.grid-main > .footer {
  grid-area:footer;
  font-size:0.8em;
  padding:18px;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.6);
}

.footer a, .footer a h6 {color:#9e9e9e;}
.footer a:hover, .footer a:active, .footer a:hover h6, .footer a:active h6 {color: var(--link-hover);}
.footer i {color:#9e9e9e;}
.footer a img {filter:grayscale(100%);}
.footer a:hover img {filter:grayscale(0);}

.w3-row.custom-flex  {display: flex; flex-wrap: wrap;}
.w3-row.custom-flex.flex > .w3-col {flex: 1 0 290px;}
.flex-sticky-bottom {display: flex;
  flex-direction: column;
  justify-content: space-between;height:100%;}

.grid-interior {
  display:grid;
  grid-gap: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
        'mainA';
}

.grid-interior > .mainA {
  grid-area:mainA;
  background:none;
  padding:8px;
}

.sideA .date-block {
  height:50px;
  display:flex;
  align-items:center;
  font-size:12px;
  font-family: 'ShapeFont', sans-serif;
  color:var(--yellow);
}

.sideA a {
  color:#9e9e9e;
  display:block;
}
.sideA i {color:#9e9e9e;}

.sideA .button {border:0 !important;}

.sideA a:hover, .sideA a:active, .sideA .active {
  color:#fff !important;
}

.sideA a:hover i, .sideA a:active i, .sideA .active i {
  color:var(--main-color) !important;
}

.sideA .swg {
  padding-right:5px !important;
  font-size:1.5em;
}


.sideA .bx-caret-big-down {
  margin-top:5px !important;
  float:right;
  font-size:1.5em;
}

.sideA .accordion {
  color:#9e9e9e;
  padding: 0;
  margin:0;
  transition: all 0.5s ease;
  background:none;
  border:0 !important;
  width:100%;
}

.sideA .accordion:hover, .sideA .accordion:active, .sideA .accactive {
  color:#fff;
  background:none;
  border:0 !important;
}

.sideA .accordion:hover i, .sideA .accordion:active i, .sideA .accactive i {
  background:none;
  border:0;
  color: var(--main-color);
}

.sideA .accordion:before, .sideA .accordion:after {border:0 !important;}

.sideA .panel {
  padding:0 0 0 33px;
  background:none;
  border:0; 
  margin-bottom:0;
}

.sideA::-webkit-scrollbar { 
    display: none;  /* Older Safari and Chromium */
}

/* https://css-tip.com/hexagon-grid/ */


/*.grid-hex .hex:nth-child(odd) {color: #e92d00;}

/* 
 ------------------------------------------------------------
 ------------ MODALS
 ------------------------------------------------------------
*/

.modal-nav {display: block;z-index:98;}
.modal-navcontent {
 margin: 60px auto;
 padding:0;
 outline:0;
 z-index:99;
 position:relative;
 }

.modal {
  position: fixed;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index:101;
  width:100%;
  height:100%;
  overflow:auto;
  background:transparent;
 /* -ms-overflow-style: none;   Internet Explorer 10+ 
  scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
}
/*.modal::-webkit-scrollbar {display: none;  Older Safari and Chromium }*/

.modal-blurred {
  background-color:rgb(97, 97, 97);
  background-color:rgba(97, 97, 97,0.2);
-webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);    
}

.modal-close {
 display:flex;
 justify-content:center;
 align-items:center;
 width:40px;
 height:40px;
 position:sticky;
 top:0;
 right:0;
 float:right;
 z-index:1000;
 margin:1px 1px 0 0;
 background: var(--main-dark);
}
.modal-close a {
 display:flex;
 justify-content:center;
 align-items:center;
 width:100%;
 height:100%;
 padding-top:5px;
}
.modal-close i {font-size:2.0em;}
.modal-close a, .modal-close a i {color: #fff;}
.modal-close a:hover, .modal-close a:hover i {color: var(--link-hover);}

.modal-login {padding:16px !important;}
.modal-login button, .modal-login input {width:100%;}
.modal-login a {color: var(--main-color);}
.modal-login a:hover, .modal-login a:active {color: var(--link-hover);}

.modal-content {
 margin: 50px auto;
 padding:0;
 outline:0;
 z-index:102;
 position:relative;
 }

.modal-container {
 position: relative;
 padding:0;
 background-color: #151515;
 clip-path: polygon(0 20px,20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);
}

.modal-container:before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--light-slate);
  clip-path: polygon(0 20px,20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px,1px  calc(20px + 0.41px),1px calc(100% - 1px),calc(100% - 20px - 0.41px) calc(100% - 1px),calc(100% - 1px) calc(100% - 20px - 0.41px),calc(100% - 1px) 1px,calc(20px + 0.41px) 1px,1px calc(20px + 0.41px));
}

.modal-transparent {
  background-color:rgb(21, 21, 21);
  background-color:rgba(21, 21, 21,0.7);
}

.modal-menuformat {padding:8px 16px;}
.modal-menuformat a {
 display:block;
 padding:6px 0;
 color:#9e9e9e;
 font-size:0.7em;
 font-family: 'ShapeFont', sans-serif;
}
.modal-menuformat a:hover, .modal-menuformat a:active {color:#fff;}
.modal-menuformat i {
 font-size:2.3em;
 width:35px;
}
.modal-menuformat p {
 padding:12px 12px 12px 0;
 color: var(--yellow);
 font-family: 'Aurebesh-English', sans-serif;
}
.modal-menuformat a:hover i, .modal-menuformat a:active i {color: var(--main-color);}

.modal-250 {width:270px;}
.modal-400, .modal-500, .modal-600, .modal-700, .modal-800, .modal-900, .modal-1100 {width:95%;}

/* 
 ------------------------------------------------------------
 ------------ BLOCKS
 ------------------------------------------------------------
*/

.block-item {
  padding:8px;
  font-size:0.9em;
}

.block-header {
  font-weight:bold;
  text-transform:uppercase;
}

.public {font-size:1.1em !important;}
.public a {color:var(--link-hover) !important;}
.public a:hover, .public a:active {color:var(--link-highlight) !important;}

.block-item .squarebox {
  border:solid 1px var(--light-slate);
}

.block-item .cornercut {
  position: relative;
  overflow:hidden;
}

.block-item .cornercut:before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--light-slate);
  clip-path: polygon(0 20px,20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px,1px  calc(20px + 0.41px),1px calc(100% - 1px),calc(100% - 20px - 0.41px) calc(100% - 1px),calc(100% - 1px) calc(100% - 20px - 0.41px),calc(100% - 1px) 1px,calc(20px + 0.41px) 1px,1px calc(20px + 0.41px));
}

.block-item .flexbox {
  height:100%;
  padding:16px; 
}

.block-item .fixedbox {
  padding:16px 16px 12px 16px; 
}

.block-item .pic img {
  width:100%;
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: top center;
  clip-path: polygon(0 16px,16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
  filter:grayscale(75%);
 }
.block-item .pic img:hover {filter:grayscale(0);}

.block-item .scrollbox {
  padding:16px;
  overflow:auto;
  max-height:200px;
}

.block-item .link {
  display:block;
  color:#f1f1f1;
  --s: 10px; /* the size on the corner */
  padding: 5px 0; /* the gap between the border and image */
  border: 1px solid transparent; /* the thickness and color */
  -webkit-mask:
    conic-gradient(at var(--s) var(--s),#0000 75%,#000 0)
    0 0/calc(100% - var(--s)) calc(100% - var(--s)),
    linear-gradient(#000 0 0) content-box;
}

.block-item .link:hover {
  border: 1px solid var(--link-hover);
  padding:5px 8px;
}

.block-item .link span {
  color:#9e9e9e;
  font-size:0.9em;
}

.link .bx-pencil, .link .bx-link, .link .bx-edit-alt, .link .bx-fullscreen  {
  color:#9e9e9e;
  float:right;
  margin:5px 5px 0 0 !important;
}
.bx-fullscreen {color:#9e9e9e;}

.block-item .symbol {
  padding:8px 0;
}

.block-item .symbol:hover {
  padding:8px 5px;
}

.block-item .symbol img {
  width:60px;
  margin-right:8px;
  vertical-align: middle;
  display:inline-block;
}

.block-item .symbol p {
  display:inline-block;
  font-size:1.1em;
}

.block-item .info {
  display:block;
  color:#f1f1f1;
  padding: 5px 0;
  border: 1px solid transparent; 
}

.block-item .info span {
  color:#9e9e9e;
  font-size:0.9em;
}

.block-item .title {
  color:#fff;
  font-weight:bold;
}

.block-item h5, .block-item h6 {
  color:var(--main-color);
  margin:5px 0;
}

.block-item .w3-col {
  color:#ddd;
}

/*.block-item a {
  color:#ddd;
}

.block-item a:hover, .block-item a:active {
  color: var(--link-hover);
}
*/

.blockpro {
  color:#fff !important;
  margin:5px 0 0 0 !important;
  background:none !important;
  transition: all 0.5s ease !important;
  width:100% !important;
  --s: 5px; /* the size on the corner */
  padding: 0 !important; /* the gap between the border and image */
  border: 1px solid transparent; /* the thickness and color */
  -webkit-mask:
    conic-gradient(at var(--s) var(--s),#0000 75%,#000 0)
    0 0/calc(100% - var(--s)) calc(100% - var(--s)),
    linear-gradient(#000 0 0) content-box;
}
.blockpro span {
  color:#9e9e9e;
  font-size:0.9em;    
}
.blockpro .bx-pencil {
  color: #9e9e9e !important;
  font-size:0.9em;
  float:right;
  margin-top:8px !important;
}

.blockpro:hover, .blockpro:active {
  color:var(--link-hover) !important;
}

.blockpro:hover .bx-pencil, .blockpro:active .bx-pencil {
  color: var(--link-hover) !important;
}

.blockpro:before, .blockpro:after {border: solid 1px transparent !important;background:none !important;}

.blockpropanel {
  border: 1px solid var(--link-hover) !important;
  border-top:0 !important;
  background:none !important;
}

.blockacc {
  color:#fff !important;
  font-weight:bold !important;
  text-transform:uppercase !important;
  padding: 0 !important;
  margin:0 !important;
  transition: all 0.5s ease !important;
  background:none !important;
  border:0 !important;
  width:100% !important;
}

.blockacc .bx-caret-big-down {
  margin-top:0 !important;
  float:right;
  font-size:1.5em;
  color: #9e9e9e !important;
}

.blockacc:hover, .blockacc:active, .blockacc .accactive {
  color:var(--link-hover) !important;
  background:none !important;
  border:0 !important;
}

.blockacc:hover .bx-caret-big-down, .blockacc:active .bx-caret-big-down, .blockacc .accactive .bx-caret-big-down {
  color: var(--link-hover) !important;
}

.blockacc:before, .blockacc:after {border:0 !important;background:none !important;}

.blockpanel {
  padding:0 !important;
  background:none !important;
  border:0 !important;    
}

/* 
 ------------------------------------------------------------
 ------------ TABLES
 ------------------------------------------------------------
*/

.block-table {
 border:solid 1px #616161;   
 width:100%;
 overflow-x: scroll;
 -webkit-overflow-scrolling: touch;
}

.table {
  border-collapse: collapse;
  border-spacing: 0;
  width:100%;
  min-width:992px;
  font-size:0.9em;
}

.table tr:hover {
  background: rgb(var(--table-hover));
  background: rgba(var(--table-hover), 0.7);  
}

.table td, .table th {vertical-align:middle !important;}

.table th {
  background:var(--table-th);
  padding:8px 12px;
}

.table td {
  padding:8px 12px;
}

.table td a {display:block;}
.table a, table td a, .table td a:hover {color:#ddd;}
.table a:hover, .table tr:hover a {color:#fff;}

.table img {
  width:100%;
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: top center;
 }
 
/* 
 ------------------------------------------------------------
 ------------ OBJECTS
 ------------------------------------------------------------
*/

.icon {
 width:40px;
 vertical-align:middle;
 display:inline-block;
}

hr {border-top: 3px solid var(--main-color);}
.hr-grey {border-top: 3px solid var(--light-slate);} 

.counter {
    display:inline-block;
    background:var(--main-dark);
    border-radius:10px;
    width:40px;
    line-height:20px;
    text-align:center;
    margin:0 8px 0 0;
    color:white;
    font-size:0.9em;
    font-family: 'Play', sans-serif !important;
}

.counter-active {
    background: var(--link-hover);    
}

.error {
  width: 100%;
  max-width:800px;  
  padding:8px;
  text-align:center;
  margin:25px auto;
  color: #fff;
  font-size:0.9em;
  font-family: "Shapefont", sans-serif;
  background: rgb(255, 152, 0) !important;
  background: rgba(255, 152, 0,0.4) !important; 
  position: relative;
}

.error:before {
   content: " ";
   position: absolute;
   border-left:2px solid #ff9800;
   border-top:2px solid #ff9800;
   border-bottom:2px solid #ff9800;
   padding:5px;
   top:0;
   bottom:0;
   left: 0;  
}

.error:after {
  content:" ";
   position: absolute;
   border-right:2px solid #ff9800;
   border-top:2px solid #ff9800;
   border-bottom:2px solid #ff9800;
   padding:5px;
   top:0;
   bottom:0;
   right:0;
}

.success {
  width: 100%;
  max-width:800px;  
  padding:8px;
  text-align:center;
  margin:25px auto;
  color: #fff;
  font-size:0.9em;
  font-family: "Shapefont", sans-serif;
  background: rgb(76, 175, 80) !important;
  background: rgba(76, 175, 80,0.4) !important; 
  position: relative;
}

.success:before {
   content: " ";
   position: absolute;
   border-left:2px solid #4CAF50;
   border-top:2px solid #4CAF50;
   border-bottom:2px solid #4CAF50;
   padding:5px;
   top:0;
   bottom:0;
   left: 0;  
}

.success:after {
  content:" ";
   position: absolute;
   border-right:2px solid #4CAF50;
   border-top:2px solid #4CAF50;
   border-bottom:2px solid #4CAF50;
   padding:5px;
   top:0;
   bottom:0;
   right:0;
}

.rednotice {
  width: 100%;
  max-width:800px;  
  padding:8px;
  text-align:center;
  margin:25px auto;
  color: #fff;
  font-size:0.9em;
  font-family: "Shapefont", sans-serif;
  background: rgb(244, 67, 54) !important;
  background: rgba(244, 67, 54,0.4) !important; 
  position: relative;
}

.rednotice:before {
   content: " ";
   position: absolute;
   border-left:2px solid #f44336;
   border-top:2px solid #f44336;
   border-bottom:2px solid #f44336;
   padding:5px;
   top:0;
   bottom:0;
   left: 0;  
}

.rednotice:after {
  content:" ";
   position: absolute;
   border-right:2px solid #f44336;
   border-top:2px solid #f44336;
   border-bottom:2px solid #f44336;
   padding:5px;
   top:0;
   bottom:0;
   right:0;
}

.accordion {
  position: relative;
  width:95%;
  padding:10px 10px 10px 20px;
  color: var(--global-font);
  font-family: "Play", sans-serif;
  margin-top:16px;
  background: var(--dark-slate);
  transition: all 0.5s ease; 
  cursor: pointer;
  width: 100%;
}

.accordion:before {
   content: " ";
   position: absolute;
   border-left:2px solid #616161;
   border-top:2px solid #616161;
   border-bottom:2px solid #616161;
   padding:5px;
   top:0;
   bottom:0;
   left: 0;  
}

.accordion:after {
  content:" ";
   position: absolute;
   border-right:2px solid #616161;
   border-top:2px solid #616161;
   border-bottom:2px solid #616161;
   padding:5px;
   top:0;
   bottom:0;
   right:0;
}

.accordion:hover, .accordion:active, .accactive {
  width:100%;
  color:var(--main-color);
  background: var(--input-bg);
}

.accordion:hover:before {
  content: " ";
  position: absolute;
  padding:5px;
  top:0;
  bottom:0;
  left: 0;  
  border-left:2px solid var(--main-color);
  border-top:2px solid var(--main-color);   
}

.accordion:hover:after {
  content:" ";
  position: absolute;
  padding:5px;
  top:0;
  bottom:0;
  right:0;
  border-right:2px solid var(--main-color);
  border-top:2px solid var(--main-color);  
}

.accactive:before {
  content: " ";
  position: absolute;
  border-bottom:0;
  padding:5px;
  top:0;
  bottom:0;
  left: 0; 
  border-left:2px solid var(--main-color);
  border-top:2px solid var(--main-color);   
}

.accactive:after {
  content:" ";
  position: absolute;
  border-bottom:0;
  padding:5px;
  top:0;
  bottom:0;
  right:0;
  border-right:2px solid var(--main-color);
  border-top:2px solid var(--main-color);   
}

.panel {
  display: none;
  padding: 10px 20px;
  margin-bottom:10px;
  font-family: "Play", sans-serif;
  background: var(--input-bg);
  border: solid 2px var(--main-color);
  border-top:0;
  color: var(--global-font);  
}

.panel p {
  font-family: "Play", sans-serif;
}

.accordionclear {background:none !important;}
.accordionclear:hover, .accordionclear:active {background:none !important;}

/* 1. Set container to relative to allow absolute child */
.filter-container {
  position: relative;
  display: inline-block;
  width:100%;
}

.filter-button {
  background: #101010;
  font-family: 'ShapeFont', sans-serif;
  color:#ddd;
  display:flex;
  align-items: center;
  justify-content: center;
  padding-top:8px;
  width:100%;
  height:42px;
  transition: all 0.5s ease;
  cursor: pointer;
  clip-path: polygon(0 20px,20px 0,100% 0,100% 100%,0 100%);
}

.filter-button:before {
  content: "";
  position: absolute;
  inset: 0;
  background: #616161;
  clip-path: polygon(0 20px,20px 0,100% 0,100% 100%,0 100%,0 20px,1px  calc(20px + 0.41px),1px calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) 1px,calc(20px + 0.41px) 1px,1px calc(20px + 0.41px));  
  }

.filter-button:hover, .filter-button:active {
  color:#6d6b9c;
}

/* 2. Style the hidden menu (floating) */
.hidden-filter {
  max-height: 0;
  overflow: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top:-2px;
  padding-bottom:8px;
  background-color:#101010;
  border: 1px solid #616161;
  border-top:0;
  transition: max-height 0.9s ease-in-out;
  width:100%;
  z-index:99;
}

/* 3. Class to expand the menu */
.hidden-filter.show {
  max-height: 800px; /* Large enough to fit content */
}

.hidden-filter a {
  display: block;
  padding:8px 8px 8px 16px;
  text-decoration: none;
  color: #ddd;
  font-family: 'ShapeFont', sans-serif;
  font-size:0.8em;
}

.hidden-filter a:hover {
  color: #fff;
  background:#222;
}

.video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index:-1;
}

.backtotop {
 position: fixed;
 bottom: 30px;
 right: 20px;
 display:flex;
 justify-content:center;
 align-items:center;
 z-index:99;
 transition: all 0.5s ease;
 background:none;
}

.backtotop i {
 font-size:3.0em;
 color: var(--main-color);
}

.backtotop i:hover {color: var(--link-hover);}

.grecaptcha-badge {visibility: hidden;}
.g-recaptcha {margin-top: 10px;}

.hex-profile {
   display:table;
   table-layout: fixed;
   width:100%;
   height:102px;
   padding:0;
   transition: all 0.5s;
   cursor:pointer;
   position: relative;
   border:solid 1px #444444;
   border-left:0;
   background:#151515;
}

.hex-profile:hover {
  background:#272928;
}

.hex-profile legend {
 font-size:0.6em !important;
 color:#2196F3 !important;
 font-family: "ShapeFont", sans-serif;
 padding: 0 8px;
 position: absolute;
 top: 0;
 right: 0;
}

.borderLeft {
  background:#000;
  position: absolute;
  width:25px;
  height:103px;
  top: -1px;
  left: 0;
}

.hex-profile .pic {
   display:table-cell;
   width:100px;
   height:100px;
   overflow:hidden;
   padding:0;
   background-color:#fff;
   border:solid 1px #444;
   border-top:0;
   border-bottom:0;
   clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.hex-profile .pic img {
   width:100px;
   height:100px;
   object-fit: cover;
   object-position: 50% top;
   filter: grayscale(100%);
}

.hex-profile .icon {
   display:inline;
   text-align:center;
   padding:5px;
   position: absolute;
   top: 0;
   right: 0;  
}

.hex-profile .icon img {
   width:30px;
   height:30px;
   filter: grayscale(100%);
}

.hex-profile:hover img,.hex-profile:active img {
  transform: scale(1.15);
  filter: grayscale(0);
}

.hex-profile .info {
   display:table-cell;
   vertical-align:middle;
   padding:0 40px 0 15px;
   width:100%; 
}

.hex-profile p {
   font-family: 'ShapeFont', sans-serif;
   font-size:0.7em;
   color:#2196F3;
}

/* 
 ------------------------------------------------------------
 ------------ FORMS
 ------------------------------------------------------------
*/

button {
  text-align: center;
  transition: all 0.5s linear;
  cursor: pointer;
  margin: 0;
  padding: 0 8px 0 8px;
  height:50px;
}

button span {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.5s linear;
}

button span:after {
  content: "";
  opacity: 0;
}

button:hover span {
  padding-right: 0;
}

button:hover span:after {
  content: " >>";
  opacity: 1;
  padding-left: 20px;
  animation: flickerOnce 3s ease-in-out 0s 1 forwards;
}

.button-small {
  display:block !important;
  padding:3px 8px !important;
  height:auto !important;
}

.button {
  display:inline-block;
  background:var(--input-bg);
  border: solid 1px var(--input-border);
  color:var(--global-font);
}

.button span {color:var(--global-font);font-family: 'ShapeFont', sans-serif;font-size:0.9em;}

.button:hover {color:var(--main-color);border: solid 1px var(--main-color);}
.button:hover span {color:var(--main-color);}

/* https://stackoverflow.com/questions/58311325/displaying-spinner-onclick */
.loader {
  display: none;
  margin:0 auto;
  transform: translate(-50%, -50%);
}

.loading {
  width: 35px;
  height: 35px;
  margin-left:8px;
  border-radius: 50%;
  animation: spin 1s infinite ease-in;
  display:inline-block;
  border: 4px solid #ccc;
  border-top-color: var(--main-color);
  border-left-color:  var(--main-color);  
}

@keyframes spin {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

.image-upload>input {display: none;}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
  /* This is the key property for text color */
  -webkit-text-fill-color: var(--main-color); 
  /* Use a large inset box-shadow to override forced backgrounds */
  -webkit-box-shadow: 0 0 0px 1000px var(--input-bg) inset;
  /* Optional: keeps the background transition from flickering */
  transition: background-color 5000s ease-in-out 0s;
}

input, select{
  letter-spacing:1.0px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="url"], input::file-selector-button {
  cursor:pointer;
  display:inline-block;
  outline: none;
  border:0;
  font-family: 'Play', sans-serif;
  color: var(--main-color);
  background: var(--input-bg);
  padding:8px;
  width: 100%;
  height:50px;
  clip-path: polygon(0 10px,10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);  
  }

input[type='checkbox'], input[type='radio'] {
  -webkit-appearance: none !important;
  border-radius: 50px;
  appearance: none;
  background: var(--concave-item-bg);
  box-shadow: var(--concave-item-box-shadow);
  border: var(--control-border-width) solid var(--control-border-color);
  height: var(--control-height);
  width: calc(var(--control-height) * 1.77);
  --slider-position: 0px;
}

input[type='checkbox']:checked, input[type='radio']:checked {
  position: relative;
  --slider-position: calc(var(--control-height) * 0.77);
}

input[type='checkbox']:checked::before, input[type='radio']:checked::before {
  background: var(--highlight-color);
}

input[type='checkbox']:before, input[type='radio']:before {
  content: "";
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  border: var(--control-border-width) solid var(--control-border-color);
  left: var(--slider-position);
  border-radius: 50px;
  margin: 0px;
  padding: 0px;
  height: calc(var(--control-height) - calc(var(--control-border-width) *2));
  width: calc(var(--control-height) - calc(var(--control-border-width) *2));
  background: var(--convex-item-bg);
  transition: left 0.25s ease, background 0.25s ease;
}

select {
  appearance: none;
  @supports (appearance: base-select) {
    &,
    &::picker(select) {
      appearance: base-select;
    }
  }
}

select {
  display: flex;
  width: 100%;
  align-items: center;
  padding:8px;
  color: var(--main-color);
  font-family: 'Play', sans-serif;
  height:50px;
  border: 0;
  border-radius:0;
  cursor: pointer;
  font-weight: 400;
  clip-path: polygon(0 10px,10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  background: var(--input-bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23FFF' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A")
    right 10px center / 20px no-repeat;
  @supports (appearance: base-select) {
    padding-inline: 10px;
    background-image: none;
    &::picker-icon {
      content: "";
      width: 20px;
      height: 20px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23FFF' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A");
      transition: rotate 0.2s ease-out;
    }
    &:open::picker-icon {
      rotate: 180deg;
    }
    &::picker(select) {
      padding: 0;
      margin: 0 0 0 -2px;
      color:#9e9e9e;
      border: 1px solid #444;
      background: #101010;
      font-weight: 400;
      opacity: 0;
      height: 0;
      overflow: clip;
      transition: height 0.5s ease-out, opacity 0.5s ease-out, overlay 0.5s,
        display 0.5s;
      transition-behavior: allow-discrete;
    }
    &:open::picker(select) {
      opacity: 1;
      height: auto;
      overflow: auto;
      @starting-style {
        opacity: 0;
        height: 0;
      }
    }
    option {
      padding: 10px;
      border-top: 1px solid #444;
      cursor: pointer;
      transition-property: color, background;
      transition-duration: 0.2s;
      transition-timing-function: ease-out;
      &:where(:hover, :focus, :active) {
        background: var(--main-dark);
        color: white;
      }
      &:checked {
        background: var(--main-dark);
        color: white;
      }
      &::checkmark {
        display: none;
      }
      &:first-child {
        border: 0;
      }
    }
  }
}

select::picker(select) {
  scrollbar-width: thin;
  scrollbar-color: #616161 #151515; /* thumb color | track color */
}

.input-clip {position: relative;padding:2px;margin-bottom:5px;}
.input-clip:before {
  content: "";
  position: absolute;
  background: var(--input-border);
  inset: 0;
  clip-path: polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px,1px  calc(12px + 0.41px),1px calc(100% - 1px),calc(100% - 12px - 0.41px) calc(100% - 1px),calc(100% - 1px) calc(100% - 12px - 0.41px),calc(100% - 1px) 1px,calc(12px + 0.41px) 1px,1px calc(12px + 0.41px));
  }

.input-clip input, .input-clip select {height:46px;}
.input-clip:hover:before {background: var(--main-color);}

.input-inline {
 height:50px;
 display:flex;
 background: var(--input-bg);
 clip-path: polygon(0 10px,10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
}
.input-inline .button {
  flex: 0 0 10%;
  text-align: center;
  align-self: center;
  border:0;
}
.input-inline input, .input-inline select {height:46px;}

.input-mock 
 {
 cursor:pointer;
 display:inline-block;
 outline: none;
 border:0;
 font-family: 'Play', sans-serif;
 color: inherit;
 letter-spacing: inherit;
 background: none;
 width: 100%;
 }

.thininput {
  display:flex;
  width:100%;
  border:solid 2px transparent;
  margin:-7px 0 0 0;
}
.thininput input[type="text"] {
  color: #f1f1f1 !important;
  background: transparent !important;
  margin:0;
  display:inline-block;
  flex: 0 0 80%;
  border:0 !important;
  height:auto !important;
  clip-path:none;
  font-size:1.1em !important;  
}
.thininput .button {
  flex: 0 0 20%;
  padding:1px !important;
  border:0 !important;
  background: transparent !important;
}
.thininput:hover {
  border-bottom:solid 2px #6d6b9c !important;
}

input[list] {
  display:inline;
  outline: none;
  padding: 10px 15px;
  margin-bottom: 5px;
  -webkit-appearance: none;
  width: 100%;
  -webkit-transition: width .35s ease-in-out;
  transition: width .35s ease-in-out;
  }

input[list]:hover {
  width: 100%;
  }

input[type="date"] {
  display:inline;
  outline: none;
  padding: 10px 15px;
  margin-bottom: 5px;
  }

input[type="datetime-local"] {
  display:inline;
  outline: none;
  padding: 10px 15px;
  margin-bottom: 5px;
  }

.checkbox {
  display:flex;
  align-items:center;
  margin:8px 0;
}

.checkbox label {
  margin-left:5px;
}

label {margin-left:8px;}

/* autocomplete */

.ui-widget.ui-widget-content {
  border: 1px solid #6d6b9c !important;
  z-index:1000;  
}

.ui-widget-content {
  background: #101010 !important;
  border: solid 1px #101010 !important;
  border-radius:0;
  padding:0 !important;
}

.ui-menu-item {
  color: #6d6b9c !important;
  font-family: "Play", sans-serif !important;
  padding:4px 8px 4px 8px !important;    
}
    
.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    background: #101010 !important;
    color: #ddd !important;
    font-weight: lighter !important;    
    margin: 0 !important;
    border: 0 !important;	
} 

/* 
 ------------------------------------------------------------
 ------------ ANIMATIONS
 ------------------------------------------------------------
*/

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

@keyframes flipAnimation {
  0% { transform: perspective(400px) rotateY(0); }
  100% { transform: perspective(400px) rotateY(360deg); }
}

@keyframes flickerOnce {
  0%, 10%, 20%, 30%, 100% { opacity: 1; }
  5%, 15%, 25% { opacity: 0.1; }
}

.animate-flip-hover:hover, .animate-flip-hover:active {
  animation-name: flipAnimation;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: both; 
}

.socials a {
  color:#9e9e9e;
  font-size:2.0em;
  margin:0 8px;
}
.socials a:hover, .socials a:active {
  color: var(--link-hover);
  animation-name: flickerAnimation;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: both;     
}

/* 
 ------------------------------------------------------------
 ------------ MEDIA - responsive
 ------------------------------------------------------------
*/

@media (max-width:992px) {
.sideA {
  display:none;
  background:#444;
  border-top: solid 2px #444;
  border-bottom: solid 2px #444;
  padding-left: 2px;
  width:274px;
  position: fixed;
  right: 0;
  max-height: 90vh;
  overflow-y: auto;
  z-index:101;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
  }
.sideA-content {
  background:#151515;
  font-size:0.9em;
  line-height:2.2;
  padding:0 12px 12px 12px;
  } 
}

/* tablet breakpoint */
@media (min-width:601px) {
.modal-400, .modal-500, .modal-600 {width:70%;}
.modal-700, .modal-800, .modal-900 {width:80%;}
.modal-1100 {width:90%;}
}

/* desktop breakpoint */
@media (min-width:993px) {
.modal-400 {width:400px;padding:0;}
.modal-500 {width:500px;padding:0;}
.modal-600 {width:600px;padding:0;}
.modal-700 {width:700px;padding:0;}
.modal-800 {width:800px;padding:0;}
.modal-900 {width:950px;padding:0;}
.modal-1100 {width:1100px;padding:0;}

.header .nav-left {width:250px;}

.grid-interior {
  grid-template-columns:274px minmax(0, 1fr);
  grid-template-areas:
        'sideA mainA';
}

.grid-interior > .sideA {
  grid-area:sideA;
  background:none;
  padding:0 12px;
  font-size:0.9em;
  line-height:2.2;
  position:sticky;
  top:50px;
  align-self: start;
  overflow: scroll;
  max-height: 100vh; /* calc(100vh - 80px) */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
 }
.sideA-content {padding-bottom:12px;} 
.sideA .modal-close {display:none;}
.display-mobile {display:none;} 
 
}