body {
    margin: 0;
    padding: 0;
    font: 15px/1.6 'Rajdhani';
    background: url('/minata/theme/bg.jpg') no-repeat fixed center;
    background-color: rgba(17, 17, 17, 0.32);
    backdrop-filter: blur(64px);
    background-size: cover;
}
a               { text-decoration: none;  transition:0.3s all;-moz-transition:0.3s all;-webkit-transition:0.3s all;}
.left           { float:left; }
.right          { float:right; }
.width          { width: 100%; }
.clear          { clear:both; }
.bold           { font-weight: 600; }
.center         { text-align: center; }
.text-left      { text-align: left; }
.mr-40          { margin-right:40px; }
.mbb-5          { margin-bottom:5px; border-bottom:1px solid #c5b6b621; padding-bottom: 5px; }
.mb-5           { margin-bottom:5px; }
.mb-15           { margin-bottom:15px; }
header          { width: 100%; box-sizing: border-box; padding:10px; margin:0; border-bottom:1px solid #c5b6b621; height:70px;}
header ul       { padding:0;margin:0; height:60px;}
header ul li    { display: table-cell; padding:5px; }
header ul li a  { text-decoration: none; color:rgba(114,105,105,1); display: block; border-bottom:0px; padding:10px 10px 20px 10px; position: relative;}
header ul li a::before, header ul li a::after { content: ''; position: absolute; bottom: 0; width: 0; height: 1px; background-color: #eccf9c; transition: all 0.3s; }
header ul li a::before { left: 50%; }
header ul li a::after { right: 50%; }
header ul li a.active::before, header ul li a.active::after, header ul li a:hover::before, header ul li a:hover::after { width: 50%; }
header ul li a.active, header ul li a:hover { color: #eccf9c; }
header .social_media a{ display:flex; align-items:center; justify-content:center; border-radius:3px; background:#2f2e2e; width: 40px; height: 40px; float: left; text-align: center; padding:0 0 0 0; margin:3px 5px 0 0;}
header .social_media a:hover { background: #66677b}
table           { width: 100%; }
table td        { padding: 5px; }
table td .icon  { padding: 0 5px; }
footer          { max-width: 1200px; width: 100%; margin: 10px auto 20px auto; text-align: center; background-color: rgba(17, 17, 17, 0.2); padding:1% 2%; box-sizing: border-box; color:#fff; }
footer .footer_socail { display: table; margin:0 auto; }
footer .social_media a{ display:flex; align-items:center; justify-content:center; border-radius:3px; background:#2f2e2e; width: 30px; height: 30px; float: left; text-align: center; padding:0 0 0 0; margin:0 2px 0 2px;}
footer .social_media a:hover { background: #66677b}
label           { width: 30%; box-sizing: border-box; clear: both; }
input           { width: 70%; box-sizing: border-box; margin:2px 0 0 0; }
select          { width: 70%; box-sizing: border-box; margin:2px 0 0 0; }
textarea        { width: 70%; box-sizing: border-box; height: 200px; }
a.button        { border-radius: 5px; padding:5px; text-align: center; width: 100%; display: block; background: #00c7d9; color:#fff; margin-bottom:10px; }
a.button:hover  { background: #555; }
a.pages         { padding:5px 8px; background: #f2f2f2; margin:5px 2px;}
.tooltip                    { position:relative; display:inline-block; font-size:12px;}
.tooltip .tooltiptext       { visibility:hidden; width:130px; background-color:#555; color:#fff; text-align:center; padding:5px 0; border-radius:6px; position:absolute; z-index:1; bottom:125%; left:50%; margin-left:-60px; opacity:0; transition:opacity .3s}
.tooltip:hover .tooltiptext { visibility:visible; opacity:1}

#container              { max-width: 1200px; width: 100%; color:#fff; margin:50px auto 20px auto; border-radius: 5px; display: flex; overflow: hidden; }
#container #menu        { width: 20%; background-color: rgba(17, 17, 17, 0.8); padding:2%; }
#container #menu ul     { width: 100%; margin:0; padding: 0; list-style:none; display: flow }
#container #menu ul li  { position: relative;  width: 100%; float: left;}
#container #menu ul li.indent  { text-indent: 20px; }
#container #menu ul li a { display:block; color:#eccf9c; padding:0 0; line-height:200%; border-bottom:1px solid transparent;}
#container #menu ul li a:hover { border-bottom:1px solid #eccf9c;}
#container #menu ul li ul {
    top: 0;
    left: 100%;
    display: none;
    width: 200px;
    padding: 5px;
    margin-left: 10px;
    z-index:9999999 !important; clear:both; z-index:200; background-color: rgba(17, 17, 17, 0.9);
position: absolute; border-radius: 5px }
#container #menu ul li ul li { text-indent: 10px; }
#container #content     { width: 80%; background-color: rgba(17, 17, 17, 0.2); padding:2%; }
#container #content2    { width: 80%; background-color: rgba(17, 17, 17, 0.7); padding:2%; }
#container #content2 td { background: #434343; }
#container #content2 td.baslik { background: #242424; color:#eccf9c }
#container #content .search { width:100%; margin-bottom: 1%;  }
#container #content .search input { font-family:'Rajdhani'; width:100%; border-radius: 4px; background: transparent; border:1px solid #ECCF9C; outline: none; resize: none; padding:10px; box-sizing: border-box; color:#eccf9c;padding-right: 35px;  }
#container #content .search-icon { width:30px; height:30px; position: absolute; margin: 7px 0 0 -35px; padding: 0px; background: none; border: none; cursor: pointer; outline: none;}

.grid { width: 100%; }
.grid-1 { width: 33%; display:inline-flex; box-sizing:border-box; margin:0.5% 0; padding:1%; height:148px; border-radius: 10px; }
.grid-1 .width195 { width: 195px; height: 130px; position: relative}
.grid-1 .item-name {  margin-left:10px; float: left; font-weight: 600; font-size: 18px;}
.grid-1 .item-lvl {  margin-left:10px; float: left; font-size:14px;}
.grid-1 .item-class {  margin-left:10px; float: left; font-size:14px;}
.grid-1 .item-type {  margin-left:10px; float: left; font-size:14px; font-weight: 600}
.grid-1 .item-detail {  margin-left:10px; position: absolute; bottom:0; left:0 }
.grid-1 .item-detail a{  width: 180px; display: block; text-align: center; color:#eccf9c; padding: 4px 3px 2px 3px; border-radius: 3px; background:#1a1b23; }
.grid-1 .item-detail a:hover{ color:#eccf9c; background:#333; }
.grid .image { background:#1111113b; width: 80px; height: 130px;display:inline-flex; border-radius:3px; align-items:center; justify-content:center; }
.grid .image img { min-height:32px; max-height: 128px; min-width: 32px; max-width: 64px; object-fit: contain; }
.itembg-1 { background-image: url('/minata/theme/itembg-1.png'); background-repeat: no-repeat; background-size: cover; }
.itembg-2 { background-image: url('/minata/theme/itembg-2.png'); background-repeat: no-repeat; background-size: cover; }
.itembg-3 { background-image: url('/minata/theme/itembg-3.png'); background-repeat: no-repeat; background-size: cover; }
.itembg-4 { background-image: url('/minata/theme/itembg-5.png'); background-repeat: no-repeat; background-size: cover; }
.itembg-5 { background-image: url('/minata/theme/itembg-4.png'); background-repeat: no-repeat; background-size: cover; }
.itembg-6 { background-image: url('/minata/theme/itembg-2.png'); background-repeat: no-repeat; background-size: cover; }



.detail-image { background:#1111113b; width: 200px; height: 200px; display:flex; border-radius:3px; align-items:center; justify-content:center; float:left; margin:0 20px 20px 0}
.detail-item-name { font-size:22px; font-weight: 600;}

.tab { width: 100%; background:#1111113b; padding:5px; box-sizing: border-box; border-radius: 5px 5px 0 0; }
.tab button.tablinks { border-radius:3px; background:#1111113b; float:left; color:#eccf9c; border: 0px; padding: 10px 20px; cursor: pointer; margin-right:5px;}
.tab button.active { background: #111111cf; }
.tab button:hover { background: #111111cf; }
.tabcontent { background: #1111113b; width: 100%; padding: 5px 10px 10px 10px; box-sizing: border-box; border-radius: 0 0 5px 5px; float:left; }
.tabcontent .h_upgrade_text     { text-align: center; padding:10px; border-radius: 5px; margin:0 2px 0 0; width:140px; box-sizing: border-box; }
.tabcontent .h_upgrade          { font-weight:600; background: #2f2e2e; text-align: center; padding:10px; border-radius: 5px; margin:0 0 0 2px; width:70px; box-sizing: border-box; }
.tabcontent .bonus_row          { display: flex; width: 100%;}
.tabcontent .h_bonus            { font-weight:600; flex:1; background: #2f2e2e; text-align: center; padding:10px; border-radius: 5px; margin:0 0 0 2px; display: table-column; box-sizing: border-box; }
.tabcontent .bonus              { flex:1; text-align: center; padding:10px; margin:0 0 0 2px; box-sizing: border-box; }
.tabcontent .baslik             { flex:1; font-weight: 600; padding:10px; background:#000; color:#eccf9c; box-sizing: border-box; border-radius: 5px; margin:0 0 5px 0 }
.tabcontent .upgrade_text       { text-align: center; background: #2f2e2e; padding:5px 10px; border-radius: 5px; margin:0 2px 5px 0; width:140px; box-sizing: border-box; }
.tabcontent .upgrade            { text-align: center; padding:5px 10px; border-radius: 5px; margin:0 0 5px 2px; width:70px; box-sizing: border-box; }
.tabcontent .upgrade img        { max-width:25px; max-height:25px; justify-items: center; vertical-align: middle}
.tabcontent .bonus_image        { width: 70px; height:40px; background: #fff; border-radius: 5px; display: flex; text-align: center; align-items:center; justify-content:center; margin:0 5px 0 0;}
.tabcontent .bonus_type         { width: 100px; height:40px;  display: flex; align-items:center; justify-content:center; background: #2f2e2e; font-weight: 600; border-radius: 5px; margin:0 5px 0 0;}
.tabcontent .bonus_name         { width: 578px; height:40px;  display: flex; align-items:center; background: #2f2e2e; font-weight: 600; border-radius: 5px; margin:0 5px 0 0; padding: 0 0 0 10px; box-sizing: border-box }
.tabcontent .bonus_lvl          { width: 100px; height:40px;  display: flex; align-items:center; justify-content:center; background: #2f2e2e; font-weight: 600; border-radius: 5px; }
.tabcontent .bonus_image img    { max-width: 50px; max-height:40px; }
.tabcontent .no-bg              { background: transparent; font-weight: 300; }
.tabcontent .rarity             { margin:8px 20px 0 0; }
select[name="rarity"] { appearance: none;  -webkit-appearance: none;  -moz-appearance: none; width: 120px; border-radius: 5px;
    background: url('data:image/svg+xml,<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 0.958984L5.99974 5.95925L1 0.958984" stroke="white" stroke-width="1.07145" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat;
    background-position: 100px center; background-color: #15171c; padding: 10px 20px 10px 10px; border: none; color: #eccf9c;
}
select[name="rarity"]:focus { outline: none; }


.tooltip-container {
    position: relative;
    display: inline-block;
}
.tooltip-container a { color:#fff;}

.tooltip-text {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    background-color: #111111;
    color: #eccf9c;
    border-radius: 4px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    z-index: 1;
    white-space: nowrap;
    font-size: 12px;
}

.tooltip-container:hover .tooltip-text {
    display: block;
}