*, *:before, *:after{box-sizing:border-box;}
body{background-color:#000;color:#fff;padding: 0px;margin: 0px;font-family: arial;margin-top:70px;}
.pagebody{margin-top: 100px;}
header{
    width:100%; 
    background:#ffffff; 
    height:60px; 
    border-bottom:1px solid #dddddd;
    color: #333;
    padding: 0px 10px;
    background-image: url('images/backhead.jpg');
    margin-bottom:10px;
    position:fixed;
    top:0px;
    z-index:10000000000;
    display:flex;
    flex-direction: row;
    align-items: center;
    gap:10px;
}

header .currentteam .character{width:85px;border-color:#aaa;}

.modal {
  background: #fff;border: 1px solid #ccc;
  width: 50%;             
  position: absolute;
   left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  /*display: none;*/
}
.modalbar{background-color: #e8e8e8;background-image: linear-gradient(#60b0f4, #328ad4);padding: 6px;overflow: hidden}
.modalbar .closebutton{float: right;border: 1px solid #ccc;background-color: background-color: #cf0015;background-image: linear-gradient(#cf0015, #ff001a);text-align: center;padding: 5px 10px;color: #fff;font-weight: bolder;font-size: 12px;}
.modalbar .closebutton a{color: #fff;padding: 5px}
.modalbar .closebutton:hover{background-color: #a10111;background-image: none;}
.modalbartitle{float: left;color: #fff;font-weight: bold;text-transform: uppercase;font-size: 1.0em;margin: 2px 0px 0px 10px;}
.hide{display: none;}
.show{display: block;}

.panel{background-color:#0558b6;padding:2px;border:3px solid #fff;border-radius:5px;overflow:hidden;color: #fff;}
.fade{opacity: 0.2}
.sitetitle{font-family: 'Arial Black';font-weight: bold;}

.hamburger{
  background:none;
  position:absolute;
  top:0;
  right:0;
  line-height:45px;
  padding:5px 15px 0px 15px;
  color:#999;
  border:0;
  font-size:1.4em;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}      

.menu{z-index:1000000; font-weight:bold; font-size:0.8em; width:100%; background:#f1f1f1;  position:absolute; text-align:center; font-size:12px;}
.menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
.menu li {display: block;   padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
.menu li:hover{display: block;    background:#ffffff; padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
.menu ul li a { text-decoration:none;  margin: 0px; color:#666;}
.menu ul li a:hover {  color: #666; text-decoration:none;}
.menu a{text-decoration:none; color:#666;}
.menu a:hover{text-decoration:none; color:#666;}



label{display:block}
.pathrow label{display:flex;}
/* ==========================================
   jQuery UI Tabs - Dark RPG Theme
   ========================================== */

.ui-tabs{position:relative;padding:0;border:none;background:transparent;font-family:"Segoe UI",Tahoma,sans-serif;}
.ui-tabs .ui-tabs-nav{margin:0;padding:6px 6px 0;display:flex;gap:4px;list-style:none;border:none;background:#08111c;}
.ui-tabs .ui-tabs-nav li{position:relative;margin:0;padding:0;border:1px solid #48586d;border-bottom:none;border-radius:6px 6px 0 0;background:linear-gradient(to bottom,#39495d 0%,#273342 45%,#1b2430 100%);transition:.18s;}
.ui-tabs .ui-tabs-nav li.ui-state-default,
.ui-tabs .ui-tabs-nav li.ui-widget-content,
.ui-tabs .ui-tabs-nav li.ui-state-active{background-image:none;}
.ui-tabs .ui-tabs-nav li a{display:block;padding:12px 24px !important;text-decoration:none;color:#dcecff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;text-shadow:0 1px 1px #000;}
.ui-tabs .ui-tabs-nav li:hover{background:linear-gradient(to bottom,#4d6480,#324355,#243141);border-color:#6e89a6;}
.ui-tabs .ui-tabs-nav li:hover a{color:#fff;}
.ui-tabs .ui-tabs-nav li.ui-tabs-active{border-color:transparent;background:linear-gradient(to bottom,#2a7de2,#1664bd,#114f9c);box-shadow:inset 0 1px rgba(255,255,255,.20),0 0 10px rgba(80,170,255,.35);}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a{color:#fff;}
.ui-tabs .ui-tabs-nav li.ui-state-focus{outline:none;}
.ui-tabs .ui-tabs-nav li a:focus{outline:none;}
.ui-tabs .ui-tabs-nav li.ui-state-disabled{opacity:.45;filter:none;}
.ui-tabs .ui-tabs-panel{padding:10px;border:0 solid #2b6bb7;border-top:none;background:#08111c;}
.ui-tabs .ui-tabs-hide{display:none;}
.ui-tabs .ui-tabs-nav li.ui-tabs-active::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:#ffffff55;}
.ui-widget.ui-widget-content{border-width:0;}





/*====================================================
    FINAL FANTASY SECTION HEADER
====================================================*/
.ffheader{position:relative;display:flex;align-items:center;justify-content:center;padding:8px 20px;color:#fff;font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;text-shadow:0 1px 2px rgba(0,0,0,.65);background:linear-gradient(to bottom,#1d6fc9 0%,#165eb5 40%,#0f4e99 70%,#0a4285 100%);border-top:1px solid #8dc6ff;border-bottom:1px solid #052f63;box-shadow:inset 0 1px rgba(255,255,255,.18),inset 0 -1px rgba(0,0,0,.30),0 2px 4px rgba(0,0,0,.25);}
.ffheader::before,.ffheader::after{content:"";flex:1;height:2px;margin:0 18px;background:linear-gradient(to right,transparent,rgba(255,255,255,.55),transparent);}
.ffheader span{position:relative;padding:0 18px;white-space:nowrap;}
.ffheader span::before,.ffheader span::after{content:"";position:absolute;top:50%;width:5px;height:5px;margin-top:-2px;border-radius:50%;background:#9ed3ff;box-shadow:0 0 5px rgba(255,255,255,.75);}
.ffheader span::before{left:0;}
.ffheader span::after{right:0;}
.ffheader:hover{background:linear-gradient(to bottom,#2378d8 0%,#1a66bf 40%,#1356a6 70%,#0d488e 100%);}



.ffheader-small{display:flex;align-items:center;justify-content:center;gap:16px;margin:18px 0;padding:4px 0;color:#63a8ff;font-size:14px;font-weight:bold;text-transform:uppercase;letter-spacing:2px;text-shadow:0 2px 4px rgba(0,0,0,.8),0 0 6px rgba(80,160,255,.35);}
.ffheader-small.white{color:#fff;}
.ffheader-small::before,.ffheader-small::after{content:"";flex:1;height:2px;background:linear-gradient(to right,transparent 0%,#4b97ef 20%,#76c3ff 50%,#4b97ef 80%,transparent 100%);box-shadow:0 0 6px rgba(80,170,255,.45);}
.ffheader-small span{position:relative;display:inline-block;padding:0 18px;}
.ffheader-small span::before,.ffheader-small span::after{content:"◆";position:absolute;top:50%;transform:translateY(-50%);font-size:9px;color:#58a8ff;text-shadow:0 0 6px rgba(90,170,255,.7);}
.ffheader-small.white span::before,.ffheader-small.white span::after{color:#fff}
.ffheader-small span::before{left:0;}
.ffheader-small span::after{right:0;}

.ffheader-smallest{font-weight:bold;text-transform: uppercase;text-align:center;font-size:12px;}




.currentteam{color: #fff;font-size: 10px;display:flex;flex-direction: row;gap:2px;}
.currentteam .character{flex:1;background-color: #0558b6;border: 2px solid #fff;border-radius: 5px;padding: 5px 10px;text-align: center;display:flex;flex-direction: column;justify-content: center;align-content: center}
.currentteam .character img{height: 28px;float: left;}
.currentteam .characterclass{margin-bottom: 5px;letter-spacing: 0.07em;font-weight: bold;}
.currentteam .charactername{font-weight: bold;margin-top: 12px;font-size: 12px;}









#shoptracking{display:flex;flex-direction: column;gap:20px;}

.shoppinglists{display:flex;flex-direction: row;gap:0px;background-color:#001c44;justify-content:center;padding:5px 20px 0px 20px;}
.shoppinglist{display:flex;flex-direction: column;gap:0px;background-color:#011533;padding-bottom:20px;min-width:150px;}
.shoppinglist + .shoppinglist{border-left:2px solid #0558b6;}


.shopwhite{background-image: url('images/magic_white.png');}
.shopblack{background-image: url('images/magic_black.png');}
.shoppingarmor{background-image: url('images/wa_armor.png');}
.shoppingweapon{background-image: url('images/wa_weapons.png');}
.magicrow, .shopping{display:flex;flex-direction: row;gap:8px;padding-left: 32px;background-position: 7px center;background-repeat: no-repeat;font-size: 14px;align-items: center;}

.locationheader, .topsheadercharacter, .topsheaderwaitem{display: flex;flex-direction: row;gap:8px;align-items: center;align-content: center;justify-content: center; border-bottom:2px solid #0558b6;font-variant: small-caps;background-color:#011229}
.locationheader img, .topsheaderimage img{height:20px;width:21px;}
.locationitems, .topsheadertype{padding:0px 2px;font-weight:bold;}

.shopwhite + .shopblack, .shopblack + .shopwhite, .shoppingarmor + .shoppingweapon, .shoppingweapon + .shoppingarmor{margin-top: 3px;padding-top: 3px;border-top: 1px solid #666;}
.magicname, .waname{width:87%;  white-space: nowrap;}

.magicrow + .magicrow, .shopping + .shopping{margin-top: 6px;}

.magicform{background-color:#011229;padding:10px;}
.magicform .frmAddMagic{display:flex;flex-direction: row;justify-content: center;align-items: center; gap:20px;}
.magicform .frmAddMagic select{height:24px;min-width:24px;padding:0px 6px;}

.removeshopping{margin-left:10px;}

td.Blurst select{width:40px;}

.magicform .select.formfield{display:flex;gap:8px;} 










.magicrow, .shopping{padding-left: 30px;background-position: 5px center;background-repeat: no-repeat;font-size: 14px;}
    .magicrow + .magicrow, .shopping + .shopping{margin-top: 2px;padding-top: 2px;}
    
    .shoptracker{width: 100%;padding:10px;}
    .shoptracker + .shoptracker{margin-top: 0px;}
    .shopwhite + .shopblack, .shoppingarmor + .shoppingweapon{margin-top: 3px;padding-top: 3px;border-top: 1px solid #666;}
    .shopblack + .shopwhite{margin-top: 3px;padding-top: 3px;border-top: 1px solid #666;}
    .shoppingweapon + .shoppingarmor{border-top: 1px solid #666;}
    .shopwhite{background-image: url('images/magic_white.png');}
    .shopblack{background-image: url('images/magic_black.png');}
    .magicrow,.shopping{overflow:hidden;width:100%;}
    .removeshopping{float: right;width:10px;}
    
    .shoppingarmor{background-image: url('images/wa_armor.png');}
    
    .shoppingweapon{background-image: url('images/wa_weapons.png');}
    .tracker{clear:both; float:left;top:10px;}
    .magictracker td, .watracker td{vertical-align: top !important;text-align: left !important;padding:10px 0px;}
    .watracker td{width:12.5%;padding:0px;}
    .magictracker td{width:10%;}
    .waname{float: left;width: 90%;font-size: 1.1em;margin-top: 2px;}
    .magicname{float:left;font-weight:bold;letter-spacing:0.05em;padding:1px 0px;}



.ffbutton{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;background:linear-gradient(to bottom,#4ea4ff 0%,#2b82df 45%,#175fbf 100%);border:2px solid #97d5ff;border-radius:6px;color:#ffffff;font-size:10px;font-weight:bold;letter-spacing:1px;text-transform:uppercase;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 14px rgba(0,0,0,.35);transition:.15s;}
.ffbutton-large{height:56px;font-size:18px;}
.ffbutton-small{height:36px;font-size:12px;}
.ffbutton:hover{background:linear-gradient(to bottom,#69b6ff 0%,#3e93ec 45%,#2670d0 100%);border-color:#d7f0ff;transform:translateY(-1px);}
.ffbutton:active{transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(0,0,0,.30);}
.ffbutton img{height:22px;image-rendering:pixelated;image-rendering:crisp-edges;}
.ffbutton.ffbutton-small img{height:12px;}










    .loginform{margin:0px auto;text-align:center;padding:30px;float:none;width:400px;}
    .loginform h2{margin:0px;}
    .loginform input[type=text],.loginform input[type=password]{font-size:16px;padding:2px;}
    .loginform .label{margin-top:20px;}
.floatleft{float: left;}
.floatright{float: right;}

/* Tooltip container */
            .tooltip {
              position: relative;
              display: inline-block;
              border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
            }

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 10;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
.ui-tabs .ui-tabs-panel{padding:0.5em 0.5em;}
.tabbedbodies{overflow:hidden;background-color:#000;}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{border:1px solid #ccc;background-color:#000;}

input::file-selector-button,input[type=submit],input[type=button]{padding:6px 20px;border-radius:6px;margin-bottom:10px;}


.cross{
  background:none;
  position:absolute;
  top:0px;
  right:0;
  padding:7px 15px 0px 15px;
  color:#999;
  border:0;
  font-size:3em;
  line-height:65px;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}



.blockstats{display:flex;gap:5px;justify-content: center;}
.blockstat, .blocksection{border:1px solid #0558b6;border-radius:5px;}
.blockstat{flex:1;padding:5px;}
.blockstat .blockstatcontainer{gap:12px;}
.blocksectioncontainer{width:100%;}
.blockstat .blockstatcontainer, .blocksectioncontainer{border:1px solid #002249;display:flex;flex-direction: column;margin:5px;padding:5px;border-radius:5px;background-color:#011229;font-size:32px;justify-content: center;}
.blockstat .blockstatinfo{display:flex;gap:20px;justify-content: center;align-content: center;align-items: center;font-size:26px;font-weight:bold;}
.blockstattitle{text-align:center;font-weight:bold;font-size:18px;}