/* ==========================================
   jQuery UI Tabs - Dark RPG Theme
   ========================================== */

.ui-tabs {
    position: relative;
    padding: 0;
    border: none;
    background: transparent;
    font-family: "Segoe UI", Tahoma, sans-serif;
}

/*==========================
    TAB BAR
==========================*/

.ui-tabs .ui-tabs-nav {
    margin: 0;
    padding: 6px 6px 0;
    display: flex;
    gap: 4px;
    list-style: none;

    border: none;
    background: #08111c;
}

/*==========================
    TAB
==========================*/

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

/* Remove all jQuery backgrounds */

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

/*==========================
    LINKS
==========================*/

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

/*==========================
    HOVER
==========================*/

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

/*==========================
    ACTIVE TAB
==========================*/

.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;

}

/*==========================
    FOCUS
==========================*/

.ui-tabs .ui-tabs-nav li.ui-state-focus{
    outline:none;
}

.ui-tabs .ui-tabs-nav li a:focus{
    outline:none;
}

/*==========================
    DISABLED
==========================*/

.ui-tabs .ui-tabs-nav li.ui-state-disabled{

    opacity:.45;

    filter:none;

}

/*==========================
    TAB PANEL
==========================*/

.ui-tabs .ui-tabs-panel{

    padding:10px;

    border:0px solid #2b6bb7;
    border-top:none;

    background:#08111c;

}

/*==========================
    HIDE
==========================*/

.ui-tabs .ui-tabs-hide{
    display:none;
}

/*==========================
    OPTIONAL GLOW
==========================*/

.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:0px;}






.pathselectcontainer{

    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;

    padding:12px;

    border-radius:8px;

    overflow:hidden;
}


/* kill the inline floats */
.pathselectcontainer > div{

    float:none !important;

}


/****************************************
    LEFT
****************************************/

.pathselectcontainer .select,
.pathselectcontainer .room-select{

    flex:1;

}

#sltAddRoom{

    width:100%;

}


/****************************************
    RIGHT
****************************************/

.pathswitch{

    display:flex;
    align-items:flex-end;
    gap:10px;

}


/****************************************
    DROPDOWNS
****************************************/

select{

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    
   
    border-radius:3px;

    border:1px solid #4d78a7;
    /*
    background:
        linear-gradient(#17283b,#0e1825);
    
    color:white;
*/
    font-size:14px;

    transition:.15s;

    box-shadow:
        inset 0 1px rgba(255,255,255,.08);
        /*
    background-image:
        linear-gradient(#17283b,#0e1825),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='white' d='M0 0l5 6 5-6'/%3E%3C/svg%3E");

    background-repeat:no-repeat,no-repeat;

    background-position:0 0,right 14px center;

    background-size:100%,10px;
    */
}

.pathselectcontainer select:hover{

    border-color:#78baff;

}

.pathselectcontainer select:focus{

    outline:none;

    border-color:#9dd1ff;

    box-shadow:0 0 12px rgba(70,160,255,.45);

}


/****************************************
    SIZES
****************************************/

#sltFrom{

    width:210px;

}

#sltTo{

    width:210px;

}

/*
.pathselectcontainer select {
    background: #17283b;
    color: #fff;
}

.pathselectcontainer select option {
    background: #17283b;
    color: #fff;
    padding: 6px;
}

.pathselectcontainer select option:hover {
    background: #2b6bb7;
}

.pathselectcontainer select option:checked {
    background: #2b6bb7;
    color: white;
}
*/

.roompath{
    border-radius:5px;
   background: linear-gradient(
    to right,
    #ffffff 0%,
    #f8fbff 20%,
    #edf5ff 45%,
    #dcecff 75%,
    #c9def9 100%
);
}

label{display:block}
.rootroomname label{

    margin:0 0 0px 2px;


    font-family:"Segoe UI", Arial, sans-serif;
    font-size:14px;
    

    font-variant: small-caps;
    letter-spacing:1px;

    line-height:1;
     display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
}

.roompaths label{
    color:#fff;
    font-size:11px;
  
    
    letter-spacing:0.05px;
    padding-left:2px;
}

.tabbedboddies{background-color:#08111c;}
.panel.root{border-width:1px;}
.root{padding:10px;display:flex;flex-direction: column;}
.root.active{background: linear-gradient(
    180deg,
    #093d7d 0%,
    #07315f 45%,
    #05274d 75%,
    #031f3e 100%
);}
.hasnext .rootroomname {padding-bottom:6px;}
.pathrows{gap:4px;background-color:transparent;padding: 0px 8px 8px 8px;}
.pathrow{flex:1;min-width:0;}
.roomslist{display:flex;flex-direction: row;}

.roomslistitem{flex:1;display: flex;flex-direction: column;}
.roomlist{display: flex;flex-direction: column;}

.roomslistheader{
    background: linear-gradient(
    180deg,
    #093d7d 0%,
    #07315f 45%,
    #05274d 75%,
    #031f3e 100%);
    height:42px;
    display:flex;
 flex-direction: row;
 gap:8px;
 justify-content: center;
  align-items: center;
  font-variant: small-caps;

}

.roomslistheadericon img{height:25px;}
/*====================================================
    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%);}




/*==========================================================
    FINAL FANTASY TABLE THEME
==========================================================*/

.fftable{

    width:100%;
    border-collapse:collapse;
    border-spacing:0;

    background:#0d3567;

    border:2px solid #ffffff;
    border-radius:6px;

    overflow:hidden;

    box-shadow:
        0 4px 12px rgba(0,0,0,.35),
        inset 0 0 0 2px #2d74c8;

    color:#fff;

    font-family:"Segoe UI",Tahoma,Arial,sans-serif;
    font-size:13px;

}


/*==========================
    HEADER
==========================*/

.fftable thead th{

    padding:7px 6px;

    background:
        linear-gradient(
            to bottom,
            #2a88ee 0%,
            #1464c0 55%,
            #0c4e9b 100%
        );

    color:#fff;

    font-weight:bold;

    text-transform:uppercase;

    text-align:center;

    letter-spacing:.5px;

    border-right:1px solid rgba(255,255,255,.18);

    border-bottom:2px solid #083a77;

    text-shadow:
        0 1px 2px rgba(0,0,0,.55);

}

.fftable thead th:last-child{

    border-right:none;

}


/*==========================
    BODY
==========================*/

.fftable tbody td{

    padding:4px 6px;

    border-right:1px solid rgba(255,255,255,.08);

    border-bottom:1px solid rgba(255,255,255,.08);

    color:#fff;

    vertical-align:middle;

}


/*==========================
    ROW COLORS
==========================*/

.fftable tbody tr:nth-child(odd){

    background:#1a64ba;

}

.fftable tbody tr:nth-child(even){

    background:#1559a7;

}


/*==========================
    HOVER
==========================*/

.fftable tbody tr:hover{

    background:#2d83e6;

}


/*==========================
    FIRST COLUMN
==========================*/

.fftable tbody td:first-child{

    font-weight:bold;

    color:#fff;

    white-space:nowrap;

    text-shadow:
        0 1px rgba(0,0,0,.5);

}


/*==========================
    NUMERIC CELLS
==========================*/

.fftable td.number{

    width:40px;

    text-align:center;

}


/*==========================
    SHOP COLUMN
==========================*/

.fftable td.shop{

    text-align:center;

}


/*==========================
    CHARACTER COLUMNS
==========================*/

.fftable td.char{

    width:28px;

    text-align:center;

}


/*==========================
    ICONS
==========================*/

.fftable img{

    image-rendering:pixelated;

    image-rendering:crisp-edges;

    vertical-align:middle;

}


/*==========================
    LINKS
==========================*/

.fftable a{

    color:#fff;

    text-decoration:none;

}

.fftable a:hover{

    color:#ffe97a;

}


/*==========================
    INPUTS
==========================*/

.fftable select,
.fftable input{

    height:24px;

    background:
        linear-gradient(
            #ffffff,
            #dcecff
        );

    border:1px solid #5d93ca;

    border-radius:4px;

    color:#123d68;

    font-size:12px;

}

.fftable select:hover,
.fftable input:hover{

    border-color:#88c4ff;

}

.fftable select:focus,
.fftable input:focus{

    outline:none;

    border-color:#9bd3ff;

    box-shadow:
        0 0 6px rgba(120,190,255,.5);

}


/*==========================
    CHECKMARKS
==========================*/

.fftable .check{

    color:#8cff87;

    font-weight:bold;

}


/*==========================
    REMOVE ICON
==========================*/

.fftable .remove{

    color:#ff5c5c;

    font-weight:bold;

    cursor:pointer;

}

.fftable .remove:hover{

    color:#ffb3b3;

}


/*==========================
    PANEL
==========================*/

.fftable-panel{

    background:#07182d;

    border:2px solid #ffffff;

    border-radius:6px;

    padding:4px;

    box-shadow:
        inset 0 0 0 2px #2f78d5,
        0 5px 12px rgba(0,0,0,.45);

}


/*==========================
    CAPTION
==========================*/

.fftable-caption{

    padding:8px;

    text-align:center;

    color:#fff;

    font-size:18px;

    font-weight:bold;

    letter-spacing:.8px;

    text-transform:uppercase;

    background:
        linear-gradient(
            #2b87ec,
            #125db6
        );

    border-bottom:2px solid #083f82;

    text-shadow:
        0 1px 2px rgba(0,0,0,.6);

}


/*==========================
    SCROLLBAR
==========================*/

.fftable::-webkit-scrollbar{

    width:10px;

    height:10px;

}

.fftable::-webkit-scrollbar-track{

    background:#0c2748;

}

.fftable::-webkit-scrollbar-thumb{

    background:#2d7dd9;

    border-radius:6px;

}

.fftable::-webkit-scrollbar-thumb:hover{

    background:#56a4ff;

}


/*==========================
    TRANSITIONS
==========================*/

.fftable tr,
.fftable td,
.fftable th,
.fftable select{

    transition:.15s;

}





.basename.hasnext{background-position:13px 20px;}

.watops{display:flex;flex-direction: row;gap:20px;}
.watops table td{padding:12px 10px;}
.watops table td.classtype{font-variant:small-caps;display:flex;flex-direction: row;gap:8px;align-items: center;align-content: center;color:#fff;font-weight:bold;letter-spacing: 0.1em;text-shadow: 1px 1px 1px #888;font-size:14px;}

.watops table td.waitem div
{margin-left:10px;}

.watops .waitem 
{display:flex;flex-direction: column;gap:6px;margin-left:10px;}

.hasnext .rootroomname{background-image: url('images/px60.png');background-position: 13px 35px;background-repeat: repeat-y;padding-bottom: 4px;}
.basename.hasnext{background-image: url('images/px.png');background-position: 13px 2px;background-repeat: repeat-y;padding-bottom: 6px;}




/* CROSS ROOM */
.crossroom{margin-top:10px;float: left;position: relative;}
.crossrow{overflow:hidden;}
.crossrow .crosscell{float:left;background-image:url('images/cross200.jpg');width:200px;height:175px;position:relative;}
.crossrow .cell21,.crossrow .endcell{background-image:url('images/crossstart200.jpg');}
.crossrow .crossbar{display:relative;z-index:5}
.crossrow .crossbar{border:2px solid #444;}
.crossrow .pathbar{border:1px dashed #444;}
.crossrow .crossbar:hover, .crossrow .pathbar:hover{cursor: pointer;}

.crossrow .crosstop{height:2px;width:100px;position:absolute;top:36px;left:50px;}
.crossrow .crossbottom{height:2px;width:100px;position:absolute;bottom:36px;left:50px;}
.crossrow .crossleft{width:2px;height:100px;position:absolute;top:36px;left:50px;}
.crossrow .crossright{width:2px;height:100px;position:absolute;bottom:36px;right:50px;}
.crossrow .crossbar.active{border-color:#f8b800;display:relative;z-index:10}

.crossrow .pathbar{position:relative;z-index: 8}
.crossrow .pathtop{height:85px;width:2px;position:absolute;top:0px;left:98px;}
.crossrow .pathleft{width:85px;height:2px;position:absolute;top:90px;left:0px;}
.crossrow .pathbottom{height:85px;width:2px;position:absolute;bottom:0px;left:98px;}
.crossrow .pathright{width:85px;height:2px;position:absolute;top:90px;right:0px;}
.crossrow .pathbar.active{border-color:#f83800;}

.crossrow .crosscell .cellname{font-size:16px;margin:80px 0px 0px 90px;color:#999;font-weight:bold;position: relative;z-index: 10;width:17px;}



#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;}
.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{display: flex;flex-direction: row;gap:8px;padding:4px 40px;align-items: center;align-content: center;border-bottom:2px solid #0558b6;margin-bottom:8px;font-variant: small-caps;background-color:#011229}
.locationheader img{height:20px;width:21px;}
.locationitems{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:8px;}
.magicform .frmAddMagic select{height:24px;}

.removeshopping{margin-left:10px;}

/*



.shoptracker{width: 100%;}
.shoptracker + .shoptracker{margin-top: 20px;}

.shopblack + .shopwhite{margin-top: 3px;padding-top: 3px;border-top: 1px solid #666;}
.shoppingweapon + .shoppingarmor{border-top: 1px solid #666;}

.magicrow,.shopping{overflow:hidden;width:100%;}



.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{font-weight:bold;letter-spacing:0.05em;padding:1px 0px;}
*/