/*
Theme Name: XWRITE child
Version: 1.0.0
Template: xwrite
*/


table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}
/* ======================================== */
/* タイトル：トップ画像を中央寄せ
/* 用途　　：
/* 備考　　：削除予定
/* ======================================== */
img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}



/* ======================================== */
/* タイトル：（xwrite）記事一覧のデザイン見直し
/* 用途　　：
/* 備考　　：
/* ======================================== */
/* タイトル非表示 */
.type-card .xw-post-article-media__body,
.type-slider .xw-post-article-media__body
{
  display: none !important;
}

/* 背景色削除 */
.type-slider .xw-post-article-list__item .xw-post-article-media{
	background-color:transparent;
}

/* gap余白を狭く */
.xw-block-post-list.type-card{
	gap:5px!important;
}

/* サムネイルを大きく */
.xw-block-post-list.type-slider .slick-slide{
	margin:0 2.5px;
}

/* ======================================== */
/* タイトル：投稿リストのサムネイルを6列にする
/* 用途　　：
/* 備考　　：https://point-of-view.blog/swell-customize-post-list-four-column/
/* ======================================== */
.-type-card.-pc-col6 .p-postList__item,
.-type-card.-sp-col6 .p-postList__item,
.-type-thumb.-pc-col6 .p-postList__item,
.-type-thumb.-sp-col6 .p-postList__item
{	
	width: calc(100% / 6)!important;
}

/* ======================================== */
/* タイトル：ツールチップ
/* 用途　　：
/* 備考　　：
/* ======================================== */
/* ツールチップ本体のスタイル */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* ツールチップの内容（非表示時） */
.tooltip .tooltip-content {
  display: none;
  position: absolute;
  top: 130%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 10px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 9999;
  max-width: 90vw;
  overflow-wrap: break-word;
  box-sizing: border-box;
  text-align: left;
}

/* ツールチップの内容（表示時） */
.tooltip.active .tooltip-content {
  display: block;
}

/* リンクごとのスタイル */
.tooltip .tooltip-content a {
  display: block;
  color: #fff;
  text-decoration: none;
  margin: 4px 0;
}

/* ツールチップ内アイコン画像 */
.tooltip .tooltip-content a img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 6px;
}

/* オプション：ツールチップの最低幅設定 */
.tooltip-content {
  white-space: nowrap;
  min-width: 300px;
}

/* オプション：リンク設定 */
.tooltip .tooltip-content a {
  display: block;
  color: #00ccff; /* お好みの色に変更できます */
  text-decoration: underline; /* 下線を表示 */
  margin: 4px 0;
  font-weight: bold; /* もし少し太くしたい場合 */
}

/* ======================================== */
/* タイトル：スマホの余白無くす
/* 用途　　：
/* 備考　　：
/* ======================================== */
@media screen and (max-width: 959px) {
	.container {
		padding-right: 0!important;
		padding-left: 0!important;
	}
	.articleContainer {
		padding-right: 1vw!important;
		padding-left: 1vw!important;
	}
} 

/* ======================================== */
/* タイトル：スマホのフォントサイズ
/* 用途　　：
/* 備考　　：
/* ======================================== */
/*フォントサイズ(モバイルのみ)*/
@media screen and (max-width: 767px) {
	p,table {
		font-size:0.9em;
	}
}

/* ================================================================================ */
/* タイトル：テーマ関係なく必要な設定
/* 用途　　：
/* 備考　　：
/* ================================================================================ */
/* 画像の位置 */
td img{
	vertical-align:middle;
}

/* 画像がぼやけない */
img{
	image-rendering:pixelated;
	vertical-align:bottom;
}

/* ================================================================================ */
/* タイトル：ルビー
/* 用途　　：ドロップ一覧で使用
/* 備考　　：
/* ================================================================================ */
/* 上付き（通常） */
.ruby-over {
	ruby-position:over;
}
/* 下付き */
.ruby-under {
	ruby-position:under;
}

/* ================================================================================ */
/* タイトル：カテゴリ
/* 用途　　：
/* 備考　　：レシピ一覧などで使いたい
/* ================================================================================ */
.category-je{
	display: inline-block;
	background: #0067c0;
	color:white;
	border-radius: 5px;
	text-align: center;
	width:auto;
	font-size:90%;
	padding-left:2px;
	padding-right:2px;
	margin-right:2px;
}
.category-be{
	display: inline-block;
	background: #487C38;
	color:white;
	border-radius: 5px;
	text-align: center;
	width:auto;
	font-size:90%;
	padding-left:2px;
	padding-right:2px;
	margin-right:2px;
}

/* ================================================================================ */
/* タイトル：レシピテーブル
/* 用途　　：レシピ一覧、エンチャント一覧、ポーション一覧などで使用
/* 備考　　：
/* ================================================================================ */
/* 全体 */
.table-recipe {
  border: 1px solid black;
  /*margin-bottom: 0;*/
  padding: 1px;
}

/* 連続する .table-recipe 同士だけ margin を打ち消す */
.table-recipe + .table-recipe {
  margin-top: -1px;
}

/* 列 */
.table-recipe-body,.table-recipe-header,.table-recipe-footer {
	display:flex;
	width:100%;
	margin-bottom:2px;
}

/* ヘッダー - キー */
.table-recipe-header-key {
	float: left;
	width:80px;
	margin-right:2px;
}
.table-recipe-header-key img{
	width:100%;
}

/* ヘッダー - バリュー */
.table-recipe-header-value {
	width:100%;
}
.table-recipe-header-value-name{
	font-size:130%;
	font-weight:bold;
}
.table-recipe-header-value-id{
	font-size:90%;
}

/* ボディー - キー */
.table-recipe-body-key {
	float: left;
	width:67px;
	margin-right:2px;
}

/* ボディー - バリュー */
.table-recipe-body-value {
	width:100%;
}

.table-recipe-body-value p{
	display:none;
}

span.recipe-title {
	display: inline-block;
    background: #4472C4;
    color: white;
    border-radius: 5px;
    text-align: center;
    width: 100%;
}


/* ================================================================================ */
/* タイトル：ブロック一覧
/* 用途　　：
/* 備考　　：
/* ================================================================================ */
table.blockID-table{
	width:100%;
}
.blockID-table tbody{

}
.blockID-table td{
	font-size: 16px;
	border-top:solid 1px gray!important;
	border-bottom:solid 1px gray!important;
	border-left:none!important;
	border-right:none!important;
	padding-left:0!important;
	padding-right:0!important;
}

div.blockID-image{
	float: left;
	width: 15%;
}
div.blockID-data{
	float: left;
	width: 85%;
}
div.blockID-name{
	font-weight:bold;
	width: 85%;
}
div.blockID-item{
	float: left;
	width: 11%;
}
div.blockID-separator{
	float: left;
}
div.clear{
	clear:both;
}
@media screen and (max-width: 480px){
	div.blockID-image{
		float: left;
		width: 15%;
		height: 80px;
	}
	div.blockID-name{
		font-weight:bold;
		width: 100%;
	}
	div.blockID-item{
		width: 17%;
		font-size:11px;
		float: left;
	}
	div.blockID-separator{
		width: 3%;
		font-size:11px;
		float: left;
	}
	div.blockID-data{
		width: 80%;
		font-size:11px;
		float: left;
	}
}

/* 入力ボタン */
input[type="button"].blockID-button{
	position: relative;
	width: 100px;
	padding: 0.8em;
	text-align: center;
	text-decoration: none;
	color: #1B1B1B;
	background: #fff;
	border:1px solid #1B1B1B;
	margin:3px 2px;
}	
input[type="button"].blockID-button:hover{
	background: #1B1B1B;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
}
/* 入力エリア */
input[type="text"].blockID-text{
	border-radius:	0;
	font-size:		18px;
	min-height: 18px;
}

/* ================================================================================ */
/* タイトル：ドロップ一覧
/* 用途　　：
/* 備考　　：廃止予定
/* ================================================================================ */
table.table-drop{
	width:100%;
	text-align:center;
}
.table-drop th{
	width:calc(100%/6);
	height:40px;
	background: #4472C4;
	border:solid 1px #000000!important;
	color:#ffffff;
}
.table-drop td{
	width:calc(100/6)%;
	height:40px;
	background: #FFFFFF;
	border:solid 1px #000000!important;
	color:auto;
}

/* ================================================================================ */
/* タイトル：リスト
/* 用途　　：
/* 備考　　：廃止予定
/* ================================================================================ */
table.table-list{
	width:70%;
}
.table-list th{
	width:30%;
	height:40px;
	border:solid 1px #000000!important;
	background: #4472C4;
	color:#ffffff;
}
.table-list td{
	width:70%;
	height:40px;
	border:solid 1px #000000!important;
}
@media screen and (max-width: 834px){
	table.table-list{
		width:100%;
	}
}
@media screen and (max-width: 834px){
	table.table-list{
		width:100%;
	}
}

/* ================================================================================ */
/* タイトル：テーブル一覧（シンプル）
/* 用途　　：
/* 備考　　：削除予定(Search Regexより、未使用)
/* ================================================================================ */
table.simple-table{
	width:auto;
}
/* ================================================================================ */
/* タイトル：テーブル一覧（横スクロール）
/* 用途　　：
/* 備考　　：すべてのテーブルで使用したい
/* ================================================================================ */
.table-multiple-columns table{
	width:auto;
}
.table-multiple-columns th{
	width:auto;
	height:40px;
	border:solid 1px #000000!important;
	background: #4472C4!important;
	color:#ffffff;
	text-align:center;
	color:white!important;
	vertical-align: middle;
	padding: .0 .0em;
}
.table-multiple-columns td{
	width:auto;
	height:40px;
	border:solid 1px #000000!important;
	vertical-align: middle;
	padding: .0 .5em;
}
.table-note {
    font-size: 85%;
    color: gray;
	margin: 0;
    position: relative;
    top: -24px; /* div を上に移動 */
}

/* 横スクロールを有効にするテーブル用クラス
	 テーブルが親要素幅を超えるときに横スクロールさせる */
.h-scroll-table{
	display: block; /* 親の幅を無視して横に伸ばせるようにする */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	width: 100%;
}
.h-scroll-table caption{caption-side:top}

.h-scroll-table th{ white-space:nowrap }

/* データセルは折り返し禁止（nowrap）に戻す */
.table-multiple-columns.h-scroll-table td{ white-space:nowrap }

/* テーブルの自然幅を尊重して必要なときだけ横スクロールを発生させる */
.table-multiple-columns.h-scroll-table table{ min-width: max-content }

/* 画像をアイコンサイズで固定し、テキストは右側で折り返さず横スクロールで処理する */
.table-multiple-columns.h-scroll-table td a{ display:inline-flex; align-items:center;  }
/* Make image a fixed, non-shrinking flex item so it contributes to cell min-width */
.table-multiple-columns.h-scroll-table td a img{
	display:block; width:32px; height:32px; object-fit:contain; margin:0;
	flex: 0 0 32px; /* do not shrink or grow; reserve 32px space */
	-webkit-flex: 0 0 32px; /* iOS Safari fallback */
	min-width:32px; max-width:32px; /* strictly reserve 32px so it can't overflow */
}
.table-multiple-columns.h-scroll-table td img:not(a img){
	/* fallback for img outside links */
	width:32px; height:32px; object-fit:contain; display:inline-block; margin:0;
}

/* 小画面でテーブルが横スクロール可能であることを示す左側のヒント */
@media (max-width:720px){
	/* ヒントは .h-scroll-table が付いているテーブルのときだけ表示 */
	.table-multiple-columns.h-scroll-table{position:relative}
	.table-multiple-columns.h-scroll-table::before{
		content: '← 横にスクロール →';
		position:absolute; left:8px; top:8px;
		background: rgba(0,0,0,0.6); color:#fff; font-size:12px;
		padding:6px 10px; border-radius:999px; pointer-events:none; z-index:30;
		box-shadow:0 2px 6px rgba(0,0,0,0.12);
		opacity:0.95;
	}
}

/* 画像設定 */
.table-multiple-columns td:has(img) {
	/*line-height: 0;*/
}
.table-multiple-columns td:has(img) img {
	vertical-align: middle;
}


/* ================================================================================ */
/* タイトル：テーブル詳細
/* 用途　　：
/* 備考　　：削除予定
/* ================================================================================ */
table.table-details{
	width:100%;
}
.table-details th{
	width:30%;
	height:40px;
	background:royalblue;
	border:solid 1px darkgray;
	color:white;
	font-size:14px;
}
.table-details td{
	width:70%;
	background: white;
	border:solid 1px darkgray;
	color:auto;
	font-size:14px;
}
@media screen and (max-width: 834px){
	table.table-details{
    	display: block;
		width:100%;
	}
	table.table-details th{
    	display: block;
		width:100%;
		height:auto;
	}
	table.table-details td{
    	display: block;
		width:100%;
	}
}



/* ================================================================================ */
/* タイトル：ボックス - コマンド
/* 用途　　：
/* 備考　　：
/* ================================================================================ */
.box-command {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	max-width:100%; /* ボックスの横幅 */
	margin: 2em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 1.7em 1.2em;	/* ボックスの内側余白(上下:1.7em　左右:2em) */
	border: 1px solid #58be89;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 0px;	/* ボックスの角丸 */
}
.box-command .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -10px; /* 上から（-10px）移動*/
	left: 10px; /* 左から(30px)移動 */
	background: #fff; /* タイトル背景色 */
	color: #58be89; /* タイトル文字色 */
	padding: 0 10px;/* タイトルの余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-size: 120%;/* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
}
.box-command .box-title:before {
	list-style-position: inside;
	/*font-family: 'FontAwesome';*/
	/*content: '\f040';*/
	font-family: icomoon!important;
	content: "\e934"!important;
	padding:0 5px 0 0px;
}
.box-command p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}

/* ================================================================================ */
/* タイトル：ボックス - レシピ
/* 用途　　：
/* 備考　　：
/* ================================================================================ */
.box-recipe {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	max-width:100%; /* ボックスの横幅 */
	margin: 2em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 1.7em 1.2em;	/* ボックスの内側余白(上下:1.7em　左右:2em) */
	border: 1px solid #0e7ac4;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 0px;	/* ボックスの角丸 */
}
.box-recipe .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -10px; /* 上から（-10px）移動*/
	left: 10px; /* 左から(30px)移動 */
	background: #fff; /* タイトル背景色 */
	color: #0e7ac4; /* タイトル文字色 */
	padding: 0 10px;/* タイトルの余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-size: 120%;/* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
}
.box-recipe .box-title:before {
	list-style-position: inside;
	font-family: icomoon!important;
	content: "\e92d"!important;
	padding:0 5px 0 0px;
}
.box-recipe p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}

/* ================================================================================ */
/* タイトル：ボックス - お知らせ
/* 用途　　：
/* 備考　　：
/* ================================================================================ */
/* ボックス直線-赤 */
.box-info {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	max-width:100%; /* ボックスの横幅 */
	margin: 2em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 1.7em 1.2em;	/* ボックスの内側余白(上下:1.7em　左右:2em) */
	border: 1px solid #f27398;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 0px;	/* ボックスの角丸 */
}
.box-info .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -10px; /* 上から（-10px）移動*/
	left: 10px; /* 左から(30px)移動 */
	background: #fff; /* タイトル背景色 */
	color: #f27398; /* タイトル文字色 */
	padding: 0 10px;/* タイトルの余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-size: 120%;/* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
}
.box-info .box-title:before {
	list-style-position: inside;
	font-family: icomoon!important;
	content: '\e915'!important;
	padding:0 5px 0 0px;
}
.box-info p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}

/* ================================================================================ */
/* タイトル：ボックス
/* 用途　　：
/* 備考　　：廃止予定
/* ================================================================================ */
/* ボックス直線-赤 */
.box3-pink {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	max-width:100%; /* ボックスの横幅 */
	margin: 2em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 1.7em 2em;	/* ボックスの内側余白(上下:1.7em　左右:2em) */
	border: 2px solid #f27398;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 0px;	/* ボックスの角丸 */
}
.box3-pink .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -10px; /* 上から（-10px）移動*/
	left: 30px; /* 左から(30px)移動 */
	background: #fff; /* タイトル背景色 */
	color: #f27398; /* タイトル文字色 */
	padding: 0 10px;/* タイトルの余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-size: 20px;/* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
}
.box3-pink p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}

/* ボックス直線-青 */
.box3-blue {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	max-width:100%; /* ボックスの横幅 */
	margin: 2em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 1.7em 2em;	/* ボックスの内側余白(上下:1.7em　左右:2em) */
	border: 2px solid #0e7ac4;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 0px;	/* ボックスの角丸 */
}
.box3-blue .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -10px; /* 上から（-10px）移動*/
	left: 30px; /* 左から(30px)移動 */
	background: #fff; /* タイトル背景色 */
	color: #0e7ac4; /* タイトル文字色 */
	padding: 0 10px;/* タイトルの余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-size: 20px;/* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
}
.box3-blue p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}


/* ---------- ---------- */
/* アップデート情報カード  */
/* ---------- ---------- */
.card {
  display: inline-flex; /* inline so multiple cards can sit side-by-side without a wrapper */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  text-align: center;
  background: #fff; /* white card for readability */
  color: #111;
  border-radius: 8px;
  text-decoration: none;
  width: 24%; /* four across */
  box-sizing: border-box; /* include padding in width calculation */
  vertical-align: top;
  margin-bottom: 2px; /* space for wrap */
  min-height: 96px; /* keep cards consistent height */
}

/* left stripe to indicate category */
.card {
  position: relative;
  overflow: visible;
}
.card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 6px;
  border-radius: 4px;
  background: transparent;
  pointer-events: none;
}

/* chip: rendered via pseudo-element (no HTML changes required) */
.card::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  color: #111;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
}

/* per-variant content + tinted backgrounds */
.card--block::after { content: "Block"; background: rgba(139,191,255,0.18); color: #0b3d61; }
.card--mob::after   { content: "Mob";   background: rgba(159,230,184,0.18); color: #0b3d20; }
.card--enchant::after { content: "Enchant"; background: rgba(215,195,255,0.18); color: #3a2350; }

/* stripe colors */
.card--block::before { background: #8fbfff; }
.card--mob::before   { background: #9fe6b8; }
.card--enchant::before { background: #d7c3ff; }

/* (removed .chip element styles because HTML does not include .chip elements) */

/* block modifier */
.card--block {
  border: 1px solid #cfe6ff; /* clearer blue border */
  background: #f0f7ff; /* subtle blue tint to distinguish from white */
  color: #111;
}

/* mob modifier */
.card--mob {
  border: 1px solid #cfeedd; /* soft green border */
  background: #f0fff4; /* subtle green tint */
  color: #0b3d20; /* dark green text for contrast */
}

/* enchant modifier (purple) */
.card--enchant {
  border: 1px solid #e8d9ff; /* light purple border */
  background: #f6f0ff; /* subtle purple tint */
  color: #211234; /* dark purple-ish text for contrast */
}

.card .icon {
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  vertical-align: middle;
}

.card .label {
  display: block;
  font-size: 13px;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* hover / focus for cards */
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(16,24,40,0.08);
}
.card:focus {
  outline: 3px solid rgba(66,133,244,0.16);
  outline-offset: 2px;
}
/* ---------- ---------- */
/* 知識セッション  */
/* ---------- ---------- */

.knowledge-link {
  display: flex; /* full-width block-level flex */
  box-sizing: border-box;
  margin-block: 6px; /* 上下の隙間 */
  align-items: center; /* 縦方向中央揃え */
  gap: 12px; /* アイコンとテキストの間隔 */
  background: #fff; /* white background */
  color: #0b1720; /* dark text for contrast */
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  /* subtle outer shadow (no inner inset) */
  /* use a subtle outer black outline via shadow instead of border */
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 2px 6px rgba(11,61,97,0.06);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.12s ease;
  border: none;
  width: 100%; /* 横幅最大まで広げる */
  justify-content: flex-start; /* アイコン＋テキストを左寄せ */
}

.knowledge-link:hover {
  background: #e6f7ff; /* soft light blue */
  color: #0b3d61;
}

/* アイコン付き（任意） */

/* PNG 画像アイコン用: 強制サイズと縦位置を安定させる */
.knowledge-link img.icon {
  /* PNG-specific override (kept for compatibility) */
  width: 40px;
  height: 40px;
  vertical-align: -6px;
}