/* Imports */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&family=Roboto:wght@300&display=swap');
@import url('add/status.css');
@import url('add/puzzle.css');
@import url('add/cid2.css');
@import url('add/spindel.css');
@import url('add/agg.css');
@import url('add/mnpc.css');
@import url('add/noNPC.css');


/* Background Setup */
:root {
    --main-bg: #1b1714;
    --sub-main-bg: rgba(49, 47, 46, 0.35);
    --subcaphover: #5d616f;
    --caption-bg: #151210;
    --subcaption-bg: #151210;
    --subsubcaption: #282422;
    --healthokLP: #B8FF93;
    --healthmedLP: #f7c05a;
    --healthcriticalLP: #ff448c;
    --txtcolor: #cecece;
    --link: rgba(164, 182, 201, 0.68);
    --linkhover: #328da9;
    --healthok: #B8FF93;
    --healthmed: #f7c05a;
    --healthcritical: #ff448c;
    --caption-txt: #cececec7;
    --tr-hover: #231f1d;
    }
    


    body { background: var(--main-bg); font-family: Arial; }

    /* global */
    ul,
    ol,
    td,
    span,
    layer,
    table,
    body,
    p {
        font-size: 13px;
        font-family: Arial,Roboto;
        margin: 0px;
        padding: 0px;
        color: var(--txtcolor);
    }

    .framechattextbg span.chattime {
        color: var(--txtcolor) !important;
    }
    input[type*="text"] {background: var(--subsubcaption);
        color: var(--txtcolor); border: 1px solid var(--subcaphover);} 
    input[type*="submit"] { color: var(--link); border: 1px solid var(--subcaphover); padding: 5px; border-radius: 5px; margin: 3px; background: transparent;}
    textarea {background: var(--subsubcaption);
        color: var(--txtcolor); border: 1px solid var(--subcaphover);}

    a:link, a:active, a:visited {color: var(--link); font-weight: bold; text-decoration: none;}
    a:hover {color: #73f6f6; text-decoration: none;}
    * {text-indent: 0px;}
    
    #listrow_lifep .healthok { color: var(--healthokLP); }
    #listrow_lifep .healthmed { color: var(--healthmedLP); }
    #listrow_lifep .healthcritical { color: var(--healthcriticalLP); }
    
    .healthok { color: var(--healthok); }
    .healthmed { color: var(--healthmed); }
    .healthcritical { color: var(--healthcritical); }

    .itemmagic {color: var(--healthok); font-weight: bold;}
    font[color="#0055AA"] {color: var(--healthcritical); }
    .wutaura {fill: var(--healthcritical); }


    /* Phasenenergie */
#phasedisp {
    width: 100% !important;
    height: 13px !important;
}
#fullenergydisp {
    background-image: none !important;
    overflow: hidden;
    background-color: var(--subsubcaption) !important;
    border: 0px solid #000 !important;
    width: 100% !important;
    height: 13px !important;
    
}
#curenergy {
    background-image: none !important;
    background-color: var(--subcaption-bg) !important;
    border: 0px solid #000 !important;
    border-radius: 0 0 0 3px;
    overflow: hidden;
    height: 13px !important;
}
#phasetext {
    color: #eee;
    padding: 0;
    line-height: 13px;
    height: 13px !important;
    width: 100% !important;
}

/* tausenderpunkte erfahrung */
.hidden1000sep { display: inline !important; }
    
    /* > > > > > Frame */
    
    /* Bannerframe */
    
    .framebannerbg:after {content: url(https://freewar.zocker.eu/teepflanze_shop.php?bg=e4e8eb);
        position: absolute;
        top: 0px;
        right: 0px;
        opacity: .8;
        filter: invert(100);
}
    
    /* Mainframe */

    /* Bank */
form[name="bank"] table tr:nth-child(odd){background: var(--main-bg); }
form[name="bank"] table{width: 100%;  }
form[name="bank"] table tr td {padding-left: 5px;}

    
    /* Items Nehmen & Angriff */
.listplaceitemsrow a:after{
    content: "\2666";
    font-size: 30px;
    position: absolute;
    right: 0px;
    background: -moz-linear-gradient(right, rgba(47,49,55,0.65) 0%, rgba(37,38,43,0.65) 22%, rgba(0,0,0,0) 100%);;
    padding: 7px;
    display: inline;
    width: 30px;
    height: 30px;
    line-height: 1;
    padding: 5px;
    border: 1px solid #8d919f26;
    border-right: none;
    transform: translate(0px, -5px);
    border-left: 0px;
    }
    .listusersrow .fastchase {color: #be00ce; }
    .listusersrow .fastchase:hover {color: #f364ff; }
    .listusersrow .fastchase:after   { 
        content: "\25C8";
        font-size: 30px;
        position: absolute;
        right: 40px;
        background: -moz-linear-gradient(right, rgba(47,49,55,0.65) 0%, rgba(37,38,43,0.65) 22%, rgba(0,0,0,0) 100%);
        padding: 7px;
        display: inline;
        width: 30px;
        height: 30px;
        line-height: 1;
        padding: 5px;
        border: 1px solid #8d919f26;
        border-right: none;
        transform: translate(0px, -5px);
        border-left: 0px;
        } 
.listusersrow .fastattack:after { 
    content: "\2694";
    font-size: 30px;
    position: absolute;
    right: 0px;
    background: -moz-linear-gradient(right, rgba(47,49,55,0.65) 0%, rgba(37,38,43,0.65) 22%, rgba(0,0,0,0) 100%);
    padding: 7px;
    display: inline;
    width: 30px;
    height: 30px;
    line-height: 1;
    padding: 5px;
    border: 1px solid #8d919f26;
    border-right: none;
    transform: translate(0px, -5px);
    border-left: 0px;
    }

    .listusersrow .fastattack:after:hover {background: -moz-linear-gradient(right, rgba(255, 255, 255, 0.51) 0%, rgba(37,38,43,0.65) 60%, rgba(0,0,0,0) 100%);}
    
    .framemainbg table[align*="center"] {margin-left: auto; margin-right: auto;}
    ul {padding-left: 30px;}

    
    .framemainbg {padding: 3px;}
    .mainheader {background: var(--caption-bg); height: 60px; font-size: 25px;
        color: var(--caption-txt);
        text-shadow: 2px 2px 3px black;
        padding-left: 10px;}
    .imageborder { 
  margin-right: 10px;
            padding: 0px;
            position: relative;
            top: 27px;
            left: -7px;
            border: none;
            background-size: 45px !important;
            width: 40px !important;
            height: 40px !important;
            background: var(--caption-bg) no-repeat;
            padding: 10px;
            background-position: center;
            border: none !important;
            border-radius: 0px 0px 5px 5px;
            z-index: 1 !important;
          
    }
        .areadescription {width: calc(100% + 6px); margin-left: -3px;}
    td.areadescription {background: var(--sub-main-bg); border-bottom: 1px solid #00000012; padding: 5px;
        text-indent: 65px;box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.71); 
        padding-top: 15px;}
    
        .placeenv {position: absolute;
            top: 29px;
            right: 0px;
            padding: 5px;
            background: var(--subcaption-bg);
            border-radius: 9px 0px 0px 0px;
        font-size: 0px;}
        .tdplaceenv {border: none !important;}
    
        .ukbar {background: var(--subcaption-bg) !important; 
            display: inline-block;
            position: absolute;
            top: -27px;
            border-radius: 5px 0px 0px 0px;
            font-size: 0px;}
        .ukbar b, .ukbar a {font-size: 12px; padding-left: 5px;}
    
    .framemainbg .listrow {background: var(--sub-main-bg); padding-left: 5px; margin: 3px;}
    .maincaption, .maincaption2 {font-weight: bold;
        font-family: Raleway;
        background: var(--sub-main-bg);
        padding-left: 5px;
        border-left: 5px solid #0000005c;
        margin: 5px;
        padding: 5px;}
    .maindesc1 {margin-left: 5px;}
    
    
    
    .personlistcaption, .itemlistcaption {font-family: Raleway; border-bottom: 3px solid var(--caption-bg); max-width: 969px; margin-left: 5px; font-weight: bold; opacity: .7;}
    .listusersrow, .listplaceitemsrow {background: var(--sub-main-bg); margin: 2px 5px 2px 5px; padding:5px; max-width: 969px;}
    
    
    
    
    /* Freundesliste */
    .friendlist {border-spacing: 0;
        border-collapse: collapse;}
        
        .friendlist a[href="#"][onclick*="tt(event,"]:after {
                content: attr(title);
                position: absolute;
                left: 440px;
                right: 5px;
                display: inline-block;
                padding: 0px;
                color: #14121080;
                font-weight: bold;
                height: 17px;
                overflow: hidden;
                width: 400px;
                font-size: 10px;
                padding-top: 1px;
                padding-left: 3px;
        }
        .friendlist a[href="#"][onclick*="tt(event,"][title*="Kommentar verfassen"]:after {
                content: attr(title);
              color: #14121033 !important;}
         .friendlist tr td[width="200px"],.friendlist tr td[width="425px"] {width: 980px; }
        .friendlist tr:nth-child(odd) {background: var(--sub-main-bg); }
    
    /* Produktionen (Labor, Phasenspeicher etc) */
    .build_text {
        background: var(--main-bg);
        padding: 5px;
         margin-top:8px;
         width:750px;
         display: inline-block;
         box-shadow: 1px 1px 5px #0006;
    
      }
      .build_unable .build_text { border-left: 6px solid #ad2929;
        width:750px;
         display: inline-block;
        border-radius: 5px 0px 0px 5px; }
    
       .build_able .build_text {
         border-left: 6px solid #4a964a;
         width:750px;
         display: inline-block;
         border-radius: 5px 0px 0px 5px; }
    
    
      .prodnot {
          color: var(--healthcritical) !important;
          font-weight: bold;
      }
    
      .prodok {
          color: var(--healthok) !important;
          font-weight: bold;
      }


/* Chatframe */
.framechattextbg {margin-left: 5px;}
.framechattextbg:before {
    content: "";
    position: fixed;
    top: 0px;
    left: 0px;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.26) 0%, rgba(0,0,0,0) 100%);
    width: 100%;
    height: 10px;
}

.chattextneck {  
    background: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  
  text-shadow: 1px 1px 3px #ffffff2e;}

.submitsagen                 { font-size: 10px; font-weight: bold; color: #FFF; margin-left: 1px; margin-right: 2px; background: #1b1714;  border: None;}
.submitschreien         { font-size: 10px; font-weight: bold; color: #7FA9DA; margin-right: 2px; background: #1b1714; border: None; }
.submitclan                 { font-size: 10px; font-weight: bold; color: #DA6767;  margin-right: 2px; background: #1b1714; border: None; }
.submitgroup                { font-size: 10px; font-weight: bold; color: rgb(209, 132, 61); margin-right: 2px; background: #1b1714; border: None; }
.submitworldsay         { font-size: 10px; font-weight: bold; color: #000000;  margin-right: 2px; background: #1b1714; border: None;  }
.submitmod                { font-size: 10px; font-weight: bold; color: #F457A5; margin-right: 2px; background: #1b1714; border: None; }
.submitwhisper                { font-size: 10px; font-weight: bold; color: #F457A5; margin-right: 2px; background: #1b1714; border: None; }

/* text classes */
.chattext { color: rgba(196, 196, 196, 0.61); font-size: 13px; }
.chattextscream { color: #7FA9DA; font-size: 13px;  }
.chatpics {
        display: none;
}
.chattextclan { color: #DA6767; font-size: 13px;  }
.chattextclan i { color: rgb(77, 143, 77); font-size: 13px;  }

.chattextinfo { color: #ECD781; font-style: italic; font-size: 13px;  }
.chattextgroup { color: rgb(209, 132, 61); font-size: 13px; }
.chattextinspiration { opacity: .5; }
.chattextworldsay { color: rgba(0, 0, 0, 1); background-color: #C1CEF9; font-size: 13px; }
.chattextwhisper {color: #F78EC2;font-size: 13px;}
.chattextwhisper b {color: #F457A5;}
.submitglobalchat { font-size: 11px; font-weight: bold; color: #918546; border: None;  background: #1b1714; }

.chattextinfo {
    color: rgb(92, 255, 0);
    font-style: italic;
    font-size: 13px;
    background: var(--sub-main-bg);
    margin: 2px 0px 2px 0px;
}
.chattextinfo:before {
    content: "\2601 ";
    color: rgba(0, 77, 159, 0.48);
    font-weight: bold;
    padding-right: 5px;
    padding-left: 5px;
}

.worldsay tr[bgcolor="#99EE99"] td {
    background: var(--subsubcaption);
    padding: 3px;
    color: var(--txtcolor);
    border: 1px solid rgba(0,0,0,.2) !important;
    height: 20px;
    line-height: 1.7;
    }
    
    .worldsay tr[bgcolor="#C1CEF9"] td {
      background: #3b425c;
      padding: 3px;
      color: #c2c2c2;
        border: 1px solid rgba(0,0,0,.2) !important;
        height: 20px;
        line-height: 1.7;
    }


/* Chatformbg (Chateingabe) */
.framechatformbg table {border-top: none !important}

/* Itemframe */
img[src$="../images/item_divider.gif"] {
    display: none;
}
.listcaption {background: var(--subcaption-bg); padding: 5px;color: var(--caption-txt); font-family: Raleway; font-weight: bold; text-align: center;}
#listrow_aka_battlep {background: var(--subsubcaption); text-align: center; padding: 3px; }
#listrow_aka_battlep  span { font-size: 10px; color: var(--caption-txt); }
.itemequipped {
color: #00ffcf;
font-weight: bold;
}


/* Schnellzauber Items direkt sehen */
#ItemFrameItem a[href^="item.php?action=fastspell&spellslot"]:not([href$="mode=delete"]) {
    display: block;
    margin: -12px 0px 0px -10px;
    background-color: var(--sub-main-bg);
    padding: 2px 15px;
    z-index: 10;
    position: relative
}
#listrow_attackw .itemmagic {
    display: none;
}
#ItemFrameItem a[href^="item.php?action=fastspell&spellslot"]:not([href$="mode=delete"]):first-of-type {
    margin-top: 0;
}
#ItemFrameItem a[href^="item.php?action=fastspell&spellslot"]:not([href$="mode=delete"]):last-of-type {
    margin-bottom: 8px
}
#fssel1:after,
#fssel2:after,
#fssel3:after,
#fssel4:after,
#fssel5:after,
#fssel6:after,
#fssel7:after,
#fssel8:after,
#fssel9:after {
    display: inline-block;
    margin-left: 8px;
    content: attr(title)
}
#fastspell b {    color: var(--caption-txt) !important;}
#fastspell {
    border-left: 0;
    border-right: 0;
    color: var(--main-bg) !important;
    font-weight: bold;
   width: 100%;
    font-size: 13px;
    height: 20px;
    line-height: 20px;
    height: 30px;
    background: var(--subcaption-bg);
font-family: Raleway;
padding: 5px 5px 5px 5px;
text-align: center;
position: relative;
font-weight: bold;
margin-bottom: 3px;
}

a.fast_spell_set, span.fast_spell_set {
    display: inline-block;
    text-decoration: none;
    width: 16px;
    height: 16px;
    background: var(--main-bg);
    text-align: center;
    font-size: 11px;
    line-height: 16px;
   margin-left:2px;
   margin-right:2px;
    position: relative;
    top: 0px;
    color: #b9b9b9;
}

#fastspell tr > td + td > b {
    color: transparent;
    font-size: 0;
}



/* Fastspells */
span#fast_spell_set_1 { border-bottom: 2px solid #2df9f8; }
span#fast_spell_set_2 { border-bottom: 2px solid #a0a9eb;  }
span#fast_spell_set_3 { border-bottom: 2px solid #e8b0eb; }
span#fast_spell_set_4 { border-bottom: 2px solid #eec185; }
span#fast_spell_set_5 { border-bottom: 2px solid #93f785; }

#fast_spell_set_1 { border-bottom: 2px solid #2dd9f8; }
#fast_spell_set_2 { border-bottom: 2px solid #8894eb; }
#fast_spell_set_3 { border-bottom: 2px solid #e888eb; }
#fast_spell_set_4 { border-bottom: 2px solid #eea185; }
#fast_spell_set_5 { border-bottom: 2px solid #93dd85; }
#fastspell b { font-size: 12px;}
#fastspell {
font-weight: bold;
text-align: center;
padding: 2px 5px 2px 5px;
white-space: nowrap;
overflow: hidden;
}

a.fast_spell_set, span.fast_spell_set {
display: inline-block;
text-decoration: none;
width: 16px;
height: 16px;
background: var(--main-bg);
text-align: center;
font-size: 11px;
line-height: 16px;
margin-left: 2px;
margin-right: 2px;
position: relative;
top: 0px;
  color: #bdbdbd;
}


#fastspell1,#fastspell3,#fastspell5,#fastspell7,#fastspell9 {background: var(--sub-main-bg);
padding-top:1px; padding-bottom: 1px; }


.listitemrow:hover {background: #3c3e44; transition: background 250ms;}
.listitemrow {padding: 2px 3px 2px 5px;}
#toplp {    background-color: var(--main-bg) !important; }

/* Mapframe */
#test {font-size: 10px;}
.maptable {margin-left: auto;
    margin-right: auto;}

/* Menuframe */

.framemenubg {padding: 5px; font-size: 11px; }
.framemenubg a {padding: 2px;}

/* Specials */
/* Options */
    /* AN */
    p.listrow a[href$="profil.php?action=skipglobalchat"],
    p.listrow a[href$="profil.php?action=skipreports"],
    p.listrow a[href$="profil.php?action=skipmsgs"],
    p.listrow a[href$="profil.php?action=skipnpcgfx"],
    p.listrow a[href$="profil.php?action=skipcry"],
    p.listrow a[href$="profil.php?action=skipwhisper"],
    p.listrow a[href$="profil.php?action=skipgroup"],
    p.listrow a[href$="profil.php?action=skipphaseenergy"],
    p.listrow a[href$="profil.php?action=skipcam"],
    p.listrow a[href$="profil.php?action=skipdungeoncry"],
    p.listrow a[href$="profil.php?action=enablewebsocket"],
    p.listrow a[href$="profil.php?action=enablechromeiframes"],
    p.listrow a[href$="profil.php?action=shownpcdesc"],
    p.listrow a[href$="profil.php?action=enableplaceenv"],
    p.listrow a[href$="profil.php?action=compactitemframe"] {
            border-left: 5px solid #00b764;
            padding-left: 4px;
            border-radius: 5px;
    }


    /* AUS */
    p.listrow a[href$="profil.php?action=enableglobalchat"],
    p.listrow a[href$="profil.php?action=showreports"],
    p.listrow a[href$="profil.php?action=showmsgs"],
    p.listrow a[href$="profil.php?action=shownpcgfx"],
    p.listrow a[href$="profil.php?action=showcry"],
    p.listrow a[href$="profil.php?action=showwhisper"],
    p.listrow a[href$="profil.php?action=showgroup"],
    p.listrow a[href$="profil.php?action=showphaseenergy"],
    p.listrow a[href$="profil.php?action=enableautocomplete"],
    p.listrow a[href$="profil.php?action=enablecam"],
    p.listrow a[href$="profil.php?action=enabledungeoncry"],
    p.listrow a[href$="profil.php?action=disablewebsocket"],
    p.listrow a[href$="profil.php?action=disablechromeiframes"],
    p.listrow a[href$="profil.php?action=skipnpcdesc"],
    p.listrow a[href$="profil.php?action=skipplaceenv"],
    p.listrow a[href$="profil.php?action=defaultitemframe"] {
            border-left: 5px solid #f64459;
            padding-left: 4px;
            border-radius: 5px;
    }

    p.listrow a[href$="premium.php"],
    p.listrow a[href$="profil.php?action=changestyle"] { 
        border-left: 5px solid #449af6;
        padding-left: 4px;
        border-radius: 5px;
    }


    #listrow_defensew .healthok,
    #listrow_defensew .healthmed,
    #listrow_defensew .healthcritical,
    #listrow_attackw .healthok,
    #listrow_attackw .healthmed,
    #listrow_attackw .healthcritical {display: none;}
    
    /* AF Zeug */
    /* Talente Link */
    .frameitembg a[href*="talentbaum.php"] {
    font-size: 11px;
    position: fixed;
    top: 3px;
    display: block;
    right: 50px;
    color: var(--main-bg);}
    
    .frameitembg a[href*="talentbaum.php"]:hover {color: var(--sub-main-bg);}
        
        /* XP Grenze Link */
        a[href*="item.php?action=xplimits"] {
        position: absolute;
        top: 25px;
        display: inline-block;
        left: -190px;
        width: 40px;
        }
    
        a[href*="item.php?action=xplimits"]:after {content: "\2250";
    font-size: 30px;
    opacity: 0.6;
    position: absolute;
    left: -31px;
    background: var(--subsubcaption);
    height: 26px;
    line-height: .8;
    top: 1px; }
        a[href*="item.php?action=xplimits"]:hover:after {opacity: 1;}
    
    .leveltalent {
        padding: 10px;
        white-space: nowrap;
        background: var(--subcaption-bg);
        border: 2px solid #ffd70080;
        box-shadow: 0 0 5px #ffd70080;
        position: relative;
        color: var(--main-bg) !important;
    }

    
select[name="z_pos_id"] option[value="290"], select[name="z_pos_id"] option[value="110"] { font-weight:bold; background: #ffb40085 !important;}
select[name="z_pos_id"] option[value="1321"], select[name="z_pos_id"] option[value="538"] { font-weight:bold; background: #fc472987 !important;}

select[name="filtercat"] option[value="14"] { font-weight:bold; background: #ffb400 !important;}
select[name="filtercat"] option[value="15"] { font-weight:bold; background: #62abff !important;}
select[name="filtercat"] option[value="4"] { font-weight:bold; background: #7bc37b !important;}

table[style="border-collapse:collapse; table-layout:fixed; border: 2px solid #C85424;"] {border: none !important;}
table[style="border-collapse:collapse; table-layout:fixed; border: 2px solid #C85424;"] tr:nth-child(odd) { background: var(--sub-main-bg); }
table[style="border-collapse:collapse; table-layout:fixed; border: 2px solid #C85424;"] tr { background: var(--main-bg);border: none !important; }

#post_item_options { border: none !important;}
#post_item_options tr { background: var(--main-bg); border: none;}
#post_item_options tr:nth-child(odd) { background: var(--sub-main-bg); }

/* AF Änderung hervorheben */
#x-100y-95 li[style^="font-weight: bold"] {color: var(--link);}
.framemainbg a[href*="extra_active"]:after { content: "\2717"; font-size: 30px;
    position: absolute;
    right: 0px;
    background: -moz-linear-gradient(right, rgba(47,49,55,0.65) 0%, rgba(37,38,43,0.65) 22%, rgba(0,0,0,0) 100%);
    padding: 7px;
    display: inline;
    width: 30px;
    height: 30px;
    line-height: 1;
    padding: 5px;
    border: 1px solid #8d919f26;
      border-right-width: 1px;
      border-right-style: solid;
      border-right-color: rgba(141, 145, 159, 0.15);
      border-left-width: 1px;
      border-left-style: solid;
      border-left-color: rgba(141, 145, 159, 0.15);
    border-right: none;
    transform: translate(0px, -5px);
    border-left: 0px;}