/* =========================================================
   SWEVLAND OVERRIDE
   Gemensam ram med vanster, mitten och hoger.
   Laddas SIST efter basic.css, news.css och style.css.
   ========================================================= */

/* =========================================================
   GRUND
   ========================================================= */

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
}

#ArtworkHelper {
    width: 100% !important;
    min-width: 1180px !important;
    min-height: 100vh !important;
    padding-top: 155px !important;
    background: transparent !important;
    background-image: none !important;
    box-sizing: border-box !important;
}

#DeactivationContainer {
    background: transparent !important;
    background-image: none !important;
}

/* =========================================================
   GEMENSAM RAM
   180px vanster | flexibel mitten | 180px hoger
   ========================================================= */

#Bodycontainer {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) 180px !important;
    grid-template-rows: auto !important;
    align-items: stretch !important;
    gap: 0 !important;

    width: 1160px !important;
    max-width: none !important;
    min-height: 900px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: left !important;
    background: rgba(2, 22, 30, 0.94) !important;

    border: 2px solid #176b7d !important;
    border-top: 3px solid #238da2 !important;

    box-shadow:
        0 0 18px rgba(0, 0, 0, 0.95),
        0 0 13px rgba(0, 192, 225, 0.22),
        inset 0 0 25px rgba(0, 0, 0, 0.55) !important;

    box-sizing: border-box !important;
}

/* =========================================================
   VANSTERKOLUMN
   ========================================================= */

#MenuColumn {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 180px !important;
    min-width: 180px !important;
    min-height: 900px !important;

    margin: 0 !important;
    padding: 0 !important;

    background:
        linear-gradient(
            to right,
            rgba(2, 17, 25, 0.98),
            rgba(4, 35, 44, 0.94)
        ) !important;

    border-right: 1px solid #176b7d !important;
    box-sizing: border-box !important;
    z-index: 20 !important;
}

#LeftArtwork {
    position: absolute !important;
    top: -140px !important;
    left: 4px !important;
}

#Menu {
    width: 170px !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
}

#Loginbox {
    width: 170px !important;
}

.MenuButton {
    width: 170px !important;
    margin: 0 !important;
}

.Submenu {
    width: 160px !important;
}

/* =========================================================
   MITTENKOLUMN
   ========================================================= */

#ContentColumn {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 900px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: rgba(3, 30, 39, 0.91) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    z-index: 10 !important;
}

#Content,
.Content,
#ContentHelper,
#ContentRow,
#container {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-image: none !important;
    box-sizing: border-box !important;
}

#ContentColumn .Box {
    width: 100% !important;
    margin: 0 !important;

    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #176b7d !important;
    border-left: 0 !important;

    background: rgba(3, 34, 43, 0.90) !important;
    box-sizing: border-box !important;
}

#ContentColumn .Border_2 {
    margin: 3px !important;
}

#ContentColumn .Border_3 {
    margin: 1px !important;
}

#ContentColumn .BoxContent {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;

    padding: 10px !important;
    overflow: hidden !important;

    background: rgba(3, 34, 43, 0.91) !important;
    background-image: none !important;
    box-sizing: border-box !important;
}

#ContentColumn table {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* =========================================================
   HOGERKOLUMN
   ========================================================= */

#ThemeboxesColumn {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    grid-column: 3 !important;
    grid-row: 1 !important;

    width: 180px !important;
    min-width: 180px !important;
    min-height: 900px !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;

    background:
        linear-gradient(
            to left,
            rgba(2, 17, 25, 0.98),
            rgba(4, 35, 44, 0.94)
        ) !important;

    border-left: 1px solid #176b7d !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    z-index: 20 !important;
}

#Themeboxes {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 180px !important;
    height: auto !important;

    margin: 12px 0 0 0 !important;
    padding: 0 !important;

    transform: none !important;
    box-sizing: border-box !important;
}

.Themebox,
.HighscoreBox,
.TranslateBoxing,
#HighscoreBox,
#EventsBox,
#DiscordBox {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 180px !important;

    margin: 0 0 8px 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
}

/* =========================================================
   SWEVLAND MAXED PLAYERS ONLINE BOX
   ========================================================= */

/* Dolj hela det gamla online-systemet */
#RightArtwork,
#RightArtwork #Monster,
#RightArtwork #PedestalAndOnline,
#RightArtwork #PlayersOnline {
	display: none !important;
}

/* Wrapper ovanfor Highscores */
#SwevOnlineWrapper {
	position: relative !important;
	width: 180px !important;
	margin: 0 0 9px 0 !important;
	padding: 0 !important;
	z-index: 100 !important;
	box-sizing: border-box !important;
}

/* Sjalva fantasy-rutan */
#SwevOnlineBox {
	position: relative !important;
	display: block !important;

	width: 174px !important;
	min-height: 176px !important;

	margin: 0 auto !important;
	padding: 13px 10px 11px !important;

	color: #ffffff !important;
	text-align: center !important;
	text-decoration: none !important;

	background:
		radial-gradient(
			circle at 50% 42%,
			rgba(19, 117, 142, 0.30) 0%,
			rgba(5, 49, 63, 0.20) 34%,
			transparent 68%
		),
		linear-gradient(
			180deg,
			rgba(8, 53, 68, 0.98) 0%,
			rgba(4, 34, 47, 0.99) 48%,
			rgba(2, 20, 31, 1) 100%
		) !important;

	border: 1px solid #247f95 !important;
	border-radius: 3px !important;

	box-shadow:
		0 0 5px rgba(44, 204, 240, 0.35),
		0 0 16px rgba(0, 150, 210, 0.18),
		inset 0 0 0 1px rgba(116, 231, 255, 0.09),
		inset 0 0 26px rgba(0, 0, 0, 0.68) !important;

	overflow: hidden !important;
	box-sizing: border-box !important;
	transition:
		transform 180ms ease,
		border-color 180ms ease,
		box-shadow 180ms ease !important;
}

/* Ljus langs overkanten */
#SwevOnlineBox .swev-online-topline {
	position: absolute !important;
	top: 0 !important;
	left: 12px !important;
	right: 12px !important;
	height: 2px !important;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(92, 231, 255, 0.95),
			#ffffff,
			rgba(92, 231, 255, 0.95),
			transparent
		) !important;

	box-shadow: 0 0 8px rgba(71, 224, 255, 0.85) !important;
	pointer-events: none !important;
}

/* Sidoglimmer */
#SwevOnlineBox .swev-online-energy {
	position: absolute !important;
	top: 30px !important;
	width: 1px !important;
	height: 105px !important;

	background:
		linear-gradient(
			180deg,
			transparent,
			rgba(63, 221, 255, 0.70),
			transparent
		) !important;

	box-shadow: 0 0 7px rgba(36, 206, 255, 0.70) !important;
	opacity: 0.65 !important;
	pointer-events: none !important;
}

#SwevOnlineBox .swev-energy-left {
	left: 4px !important;
}

#SwevOnlineBox .swev-energy-right {
	right: 4px !important;
}

/* Fantasyhorn */
#SwevOnlineBox .swev-online-corner {
	position: absolute !important;
	width: 13px !important;
	height: 13px !important;
	border-color: #4dd9f3 !important;
	border-style: solid !important;
	opacity: 0.85 !important;
	pointer-events: none !important;
}

#SwevOnlineBox .corner-top-left {
	top: 5px !important;
	left: 5px !important;
	border-width: 1px 0 0 1px !important;
}

#SwevOnlineBox .corner-top-right {
	top: 5px !important;
	right: 5px !important;
	border-width: 1px 1px 0 0 !important;
}

#SwevOnlineBox .corner-bottom-left {
	bottom: 5px !important;
	left: 5px !important;
	border-width: 0 0 1px 1px !important;
}

#SwevOnlineBox .corner-bottom-right {
	right: 5px !important;
	bottom: 5px !important;
	border-width: 0 1px 1px 0 !important;
}

/* Rubrikrad */
#SwevOnlineBox .swev-online-header {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;

	margin: 5px 0 8px !important;
	padding: 0 !important;
}

/* Pulserande gron statuspunkt */
#SwevOnlineBox .swev-online-status-dot {
	display: inline-block !important;

	width: 7px !important;
	height: 7px !important;

	background: #52ff91 !important;
	border: 1px solid #baffd0 !important;
	border-radius: 50% !important;

	box-shadow:
		0 0 4px #52ff91,
		0 0 9px rgba(82, 255, 145, 0.85) !important;

	animation: swevOnlinePulse 1.7s infinite ease-in-out !important;
}

/* Rubriken */
#SwevOnlineBox .swev-online-title {
	font-family: Verdana, Arial, sans-serif !important;
	font-size: 10px !important;
	font-weight: bold !important;
	letter-spacing: 0.9px !important;

	color: #b6f6ff !important;

	text-shadow:
		0 0 5px rgba(74, 222, 255, 0.70),
		1px 1px 2px #000000 !important;
}

/* Ornamenterad linje */
#SwevOnlineBox .swev-online-divider {
	position: relative !important;
	width: 100% !important;
	height: 8px !important;
	margin-bottom: 1px !important;
}

#SwevOnlineBox .swev-online-divider::before,
#SwevOnlineBox .swev-online-divider::after {
	content: "" !important;
	position: absolute !important;
	top: 3px !important;
	width: 56px !important;
	height: 1px !important;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(83, 221, 247, 0.80)
		) !important;
}

#SwevOnlineBox .swev-online-divider::before {
	left: 5px !important;
}

#SwevOnlineBox .swev-online-divider::after {
	right: 5px !important;
	transform: scaleX(-1) !important;
}

#SwevOnlineBox .swev-online-divider span {
	position: absolute !important;
	top: 0 !important;
	left: 50% !important;

	width: 7px !important;
	height: 7px !important;

	margin-left: -4px !important;

	background: #45d6ed !important;
	border: 1px solid #b6f8ff !important;

	box-shadow: 0 0 7px rgba(61, 221, 248, 0.90) !important;
	transform: rotate(45deg) !important;
}

/* Onlineantalet */
#SwevOnlineBox .swev-online-count {
	position: relative !important;

	margin: 1px 0 4px !important;
	padding: 0 !important;

	font-family: Georgia, "Times New Roman", serif !important;
	font-size: 42px !important;
	font-weight: bold !important;
	line-height: 44px !important;

	color: #ffe58d !important;

	text-shadow:
		0 1px 0 #8c5d00,
		0 0 6px rgba(255, 219, 103, 0.65),
		0 0 15px rgba(255, 189, 42, 0.22),
		2px 2px 2px #000000 !important;
}

/* Serverstatus */
#SwevOnlineBox .swev-online-status {
	margin-bottom: 11px !important;

	font-family: Verdana, Arial, sans-serif !important;
	font-size: 8px !important;
	font-weight: bold !important;
	letter-spacing: 0.6px !important;

	color: #819daa !important;
	text-shadow: 1px 1px 1px #000000 !important;
}

#SwevOnlineBox .swev-online-status strong {
	margin-left: 3px !important;
	color: #52ff91 !important;

	text-shadow:
		0 0 5px rgba(82, 255, 145, 0.75),
		1px 1px 1px #000000 !important;
}

/* Knappen langst ner */
#SwevOnlineBox .swev-online-button {
	position: relative !important;
	display: block !important;

	width: 100% !important;

	padding: 7px 5px !important;

	font-family: Verdana, Arial, sans-serif !important;
	font-size: 9px !important;
	font-weight: bold !important;
	letter-spacing: 0.5px !important;

	color: #d1f9ff !important;

	background:
		linear-gradient(
			180deg,
			rgba(20, 100, 120, 0.85),
			rgba(7, 52, 69, 0.92)
		) !important;

	border: 1px solid rgba(68, 197, 224, 0.50) !important;
	border-radius: 2px !important;

	box-shadow:
		inset 0 1px 0 rgba(184, 246, 255, 0.14),
		0 0 7px rgba(0, 142, 190, 0.12) !important;

	box-sizing: border-box !important;
	transition: all 180ms ease !important;
}

#SwevOnlineBox .swev-online-arrow {
	position: absolute !important;
	top: 2px !important;
	right: 9px !important;

	font-family: Georgia, serif !important;
	font-size: 17px !important;

	color: #7deaff !important;
}

/* Glod langst ner */
#SwevOnlineBox .swev-online-bottom-glow {
	position: absolute !important;
	right: 20px !important;
	bottom: -1px !important;
	left: 20px !important;
	height: 2px !important;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(55, 197, 230, 0.75),
			transparent
		) !important;

	box-shadow: 0 0 8px rgba(35, 198, 240, 0.60) !important;
}

/* Hovereffekt */
#SwevOnlineBox:hover {
	border-color: #55d7ef !important;

	box-shadow:
		0 0 8px rgba(61, 220, 249, 0.55),
		0 0 22px rgba(0, 174, 223, 0.30),
		inset 0 0 0 1px rgba(145, 240, 255, 0.14),
		inset 0 0 28px rgba(0, 0, 0, 0.63) !important;

	transform: translateY(-2px) !important;
}

#SwevOnlineBox:hover .swev-online-button {
	color: #ffffff !important;

	background:
		linear-gradient(
			180deg,
			rgba(31, 132, 153, 0.95),
			rgba(9, 69, 89, 0.96)
		) !important;

	border-color: rgba(98, 225, 249, 0.80) !important;
	box-shadow:
		inset 0 1px 0 rgba(209, 251, 255, 0.20),
		0 0 10px rgba(42, 204, 237, 0.30) !important;
}

#SwevOnlineBox:hover .swev-online-count {
	color: #fff1b8 !important;

	text-shadow:
		0 1px 0 #8c5d00,
		0 0 9px rgba(255, 225, 120, 0.90),
		0 0 20px rgba(255, 192, 49, 0.35),
		2px 2px 2px #000000 !important;
}

/* Pulseffekt */
@keyframes swevOnlinePulse {
	0%,
	100% {
		opacity: 0.75;
		transform: scale(0.90);
	}

	50% {
		opacity: 1;
		transform: scale(1.16);
	}
}

/* Highscores borjar direkt efter online-rutan */
#Themeboxes {
	position: relative !important;
	width: 180px !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
}


/* =========================================================
   SWEVLAND GLOBAL 3-COLUMN SAFETY FIX
   header.php kan nu rendera hogersidan fore ContentColumn.
   Grid-column gor att ordningen i HTML inte spelar nagon roll.
   ========================================================= */

#Bodycontainer {
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) 180px !important;
    grid-template-rows: auto !important;
    align-items: stretch !important;
    gap: 0 !important;
}

#MenuColumn {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

#ContentColumn {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

#ThemeboxesColumn {
    display: block !important;
    grid-column: 3 !important;
    grid-row: 1 !important;

    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    z-index: 20 !important;
}

/* ---------------------------------------------------------
   Gamla PHP-sidor med fasta wrapperbredder halls i mitten.
   Inga interna scrollbars skapas.
   --------------------------------------------------------- */

#ContentColumn .wrapper,
#ContentColumn [class*="wrapper"],
#ContentColumn .page-container,
#ContentColumn .main-container,
#ContentColumn .wiki-wrapper,
#ContentColumn .shop-wrapper,
#ContentColumn .event-wrapper,
#ContentColumn .server-wrapper,
#ContentColumn .profile-wrapper {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    min-width: 0 !important;

    margin-left: 10px !important;
    margin-right: 10px !important;

    box-sizing: border-box !important;

    height: auto !important;
    max-height: none !important;

    overflow: visible !important;
}

/* Vanliga stora inline-widths fran aldre sidor */
#ContentColumn [style*="width: 700px"],
#ContentColumn [style*="width:700px"],
#ContentColumn [style*="width: 750px"],
#ContentColumn [style*="width:750px"],
#ContentColumn [style*="width: 800px"],
#ContentColumn [style*="width:800px"],
#ContentColumn [style*="width: 850px"],
#ContentColumn [style*="width:850px"],
#ContentColumn [style*="width: 900px"],
#ContentColumn [style*="width:900px"],
#ContentColumn [style*="width: 950px"],
#ContentColumn [style*="width:950px"],
#ContentColumn [style*="width: 1000px"],
#ContentColumn [style*="width:1000px"],
#ContentColumn [style*="width: 1100px"],
#ContentColumn [style*="width:1100px"],
#ContentColumn [style*="width: 1200px"],
#ContentColumn [style*="width:1200px"] {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    min-width: 0 !important;

    margin-left: 10px !important;
    margin-right: 10px !important;

    box-sizing: border-box !important;
}

/* Grundskydd for innehall */
#ContentColumn #Content,
#ContentColumn .Content,
#ContentColumn #ContentHelper,
#ContentColumn #ContentRow,
#ContentColumn #container,
#ContentColumn .Box,
#ContentColumn .Border_2,
#ContentColumn .Border_3,
#ContentColumn .BoxContent {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    box-sizing: border-box !important;
}

#ContentColumn img,
#ContentColumn form,
#ContentColumn fieldset,
#ContentColumn input,
#ContentColumn select,
#ContentColumn textarea {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#ContentColumn table {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Vanliga card/grid-sidor */
#ContentColumn .wiki-grid,
#ContentColumn .item-grid,
#ContentColumn .shop-grid,
#ContentColumn .event-grid,
#ContentColumn .card-grid,
#ContentColumn .boss-grid,
#ContentColumn .quest-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#ContentColumn .wiki-grid > *,
#ContentColumn .item-grid > *,
#ContentColumn .shop-grid > *,
#ContentColumn .event-grid > *,
#ContentColumn .card-grid > *,
#ContentColumn .boss-grid > *,
#ContentColumn .quest-grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Hogerboxarna far aldrig flyta ivag eller bli absoluta */
#ThemeboxesColumn #SwevOnlineWrapper,
#ThemeboxesColumn #Themeboxes,
#ThemeboxesColumn #HighscoreBox,
#ThemeboxesColumn #EventsBox,
#ThemeboxesColumn #DiscordBox {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
}

#ThemeboxesColumn #Themeboxes {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#ThemeboxesColumn iframe {
    max-width: 170px !important;
}

@media (max-width: 1100px) {
    #ContentColumn .wiki-grid,
    #ContentColumn .item-grid,
    #ContentColumn .shop-grid,
    #ContentColumn .event-grid,
    #ContentColumn .card-grid,
    #ContentColumn .boss-grid,
    #ContentColumn .quest-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* =========================================================
   SWEVLAND GLOBAL LEGACY PAGE NORMALIZER v2
   Laggs sist i override-filen.

   Syfte:
   - gamla PHP-sidor med egna 700-1200px wrappers far plats
   - fungerar aven nar sidans egen <style> ligger EFTER override.css
     eftersom reglerna har anvander hogre specificity + !important
   - vanster/hogerkolumn paverkas inte
   - ingen intern vit scrollbar i mittenkolumnen
   ========================================================= */

/* ---------------------------------------------------------
   1. Sjalva content-kedjan far aldrig skapa intern scroll
   --------------------------------------------------------- */
html body #ContentColumn,
html body #ContentColumn #Content,
html body #ContentColumn .Content,
html body #ContentColumn #ContentHelper,
html body #ContentColumn #ContentRow,
html body #ContentColumn #container,
html body #ContentColumn .Box,
html body #ContentColumn .Border_2,
html body #ContentColumn .Border_3,
html body #ContentColumn .BoxContent {
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
}

html body #ContentColumn {
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* WebKit-scrollbars */
html body #ContentColumn::-webkit-scrollbar,
html body #ContentColumn #Content::-webkit-scrollbar,
html body #ContentColumn .Content::-webkit-scrollbar,
html body #ContentColumn #ContentHelper::-webkit-scrollbar,
html body #ContentColumn #ContentRow::-webkit-scrollbar,
html body #ContentColumn #container::-webkit-scrollbar,
html body #ContentColumn .Box::-webkit-scrollbar,
html body #ContentColumn .Border_2::-webkit-scrollbar,
html body #ContentColumn .Border_3::-webkit-scrollbar,
html body #ContentColumn .BoxContent::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ---------------------------------------------------------
   2. VIKTIGAST:
   Forsta riktiga sid-wrappern inne i #container normaliseras.
   Detta traffar t.ex:
   .premium-wrap
   .boss-guide-wrap
   .market-page
   .highscores-page-wrap
   .rules-page-wrap
   .guild-page-wrap
   osv, aven om klassen inte finns med i var lista.
   --------------------------------------------------------- */
html body #ContentColumn #container > div:not(#ThemeboxesColumn):not(#MenuColumn),
html body #ContentColumn #container > section,
html body #ContentColumn #container > main,
html body #ContentColumn #container > article {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    min-width: 0 !important;

    margin-left: 10px !important;
    margin-right: 10px !important;

    box-sizing: border-box !important;
}

/* Om sidan borjar direkt med form/table istallet for wrapper */
html body #ContentColumn #container > form,
html body #ContentColumn #container > table {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    min-width: 0 !important;

    margin-left: 10px !important;
    margin-right: 10px !important;

    box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   3. Vanliga gamla wrappernamn.
   Hog specificity gor att detta vinner aven mot sidans
   senare .premium-wrap { width:900px; } osv.
   --------------------------------------------------------- */
html body #ContentColumn [class*="-wrap"],
html body #ContentColumn [class*="_wrap"],
html body #ContentColumn [class*="wrapper"],
html body #ContentColumn [class*="Wrapper"],
html body #ContentColumn [class*="-page"],
html body #ContentColumn [class*="_page"],
html body #ContentColumn [class*="page-wrap"],
html body #ContentColumn [class*="PageWrap"],
html body #ContentColumn [class*="container"],
html body #ContentColumn [class*="Container"] {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Bara top-level page wrappers far sidmarginalen */
html body #ContentColumn #container > [class*="-wrap"],
html body #ContentColumn #container > [class*="_wrap"],
html body #ContentColumn #container > [class*="wrapper"],
html body #ContentColumn #container > [class*="Wrapper"],
html body #ContentColumn #container > [class*="-page"],
html body #ContentColumn #container > [class*="_page"] {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    min-width: 0 !important;

    margin-left: 10px !important;
    margin-right: 10px !important;

    box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   4. Gamla fasta bredder i INLINE style.
   --------------------------------------------------------- */
html body #ContentColumn [style*="width: 600px"],
html body #ContentColumn [style*="width:600px"],
html body #ContentColumn [style*="width: 610px"],
html body #ContentColumn [style*="width:610px"],
html body #ContentColumn [style*="width: 650px"],
html body #ContentColumn [style*="width:650px"],
html body #ContentColumn [style*="width: 690px"],
html body #ContentColumn [style*="width:690px"],
html body #ContentColumn [style*="width: 700px"],
html body #ContentColumn [style*="width:700px"],
html body #ContentColumn [style*="width: 720px"],
html body #ContentColumn [style*="width:720px"],
html body #ContentColumn [style*="width: 740px"],
html body #ContentColumn [style*="width:740px"],
html body #ContentColumn [style*="width: 750px"],
html body #ContentColumn [style*="width:750px"],
html body #ContentColumn [style*="width: 760px"],
html body #ContentColumn [style*="width:760px"],
html body #ContentColumn [style*="width: 780px"],
html body #ContentColumn [style*="width:780px"],
html body #ContentColumn [style*="width: 800px"],
html body #ContentColumn [style*="width:800px"],
html body #ContentColumn [style*="width: 820px"],
html body #ContentColumn [style*="width:820px"],
html body #ContentColumn [style*="width: 850px"],
html body #ContentColumn [style*="width:850px"],
html body #ContentColumn [style*="width: 880px"],
html body #ContentColumn [style*="width:880px"],
html body #ContentColumn [style*="width: 900px"],
html body #ContentColumn [style*="width:900px"],
html body #ContentColumn [style*="width: 920px"],
html body #ContentColumn [style*="width:920px"],
html body #ContentColumn [style*="width: 950px"],
html body #ContentColumn [style*="width:950px"],
html body #ContentColumn [style*="width: 1000px"],
html body #ContentColumn [style*="width:1000px"],
html body #ContentColumn [style*="width: 1100px"],
html body #ContentColumn [style*="width:1100px"],
html body #ContentColumn [style*="width: 1200px"],
html body #ContentColumn [style*="width:1200px"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   5. Tabeller, formular, media
   --------------------------------------------------------- */
html body #ContentColumn table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body #ContentColumn th,
html body #ContentColumn td {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
}

html body #ContentColumn img,
html body #ContentColumn video,
html body #ContentColumn iframe,
html body #ContentColumn canvas {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html body #ContentColumn form,
html body #ContentColumn fieldset,
html body #ContentColumn input,
html body #ContentColumn select,
html body #ContentColumn textarea,
html body #ContentColumn button {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html body #ContentColumn textarea {
    width: 100% !important;
}

/* ---------------------------------------------------------
   6. Gamla beige Tibia/Znote-contentfarger -> SwevLand
   --------------------------------------------------------- */
html body #ContentColumn .Content .Box,
html body #ContentColumn .Content .BoxContent,
html body #ContentColumn .Box,
html body #ContentColumn .BoxContent,
html body #ContentColumn .SmallBox .Message,
html body #ContentColumn .SmallBox .ErrorMessage,
html body #ContentColumn .MessageContainer,
html body #ContentColumn .TableContentContainer,
html body #ContentColumn .TableContainer .Table1,
html body #ContentColumn .TableContainer .Table2,
html body #ContentColumn .TableContainer .Table3,
html body #ContentColumn .TableContainer .Table4,
html body #ContentColumn .TableContainer .Table5 {
    background-color: rgba(3, 34, 43, 0.91) !important;
    background-image: none !important;
    color: #d9f7ff !important;
    border-color: #176b7d !important;
}

/* Gamla dekorationsramar runt SmallBox */
html body #ContentColumn .SmallBox .BoxFrameHorizontal,
html body #ContentColumn .SmallBox .BoxFrameVerticalRight,
html body #ContentColumn .SmallBox .BoxFrameVerticalLeft,
html body #ContentColumn .SmallBox .BoxFrameEdgeLeftTop,
html body #ContentColumn .SmallBox .BoxFrameEdgeLeftBottom,
html body #ContentColumn .SmallBox .BoxFrameEdgeRightTop,
html body #ContentColumn .SmallBox .BoxFrameEdgeRightBottom {
    background-image: none !important;
}

/* Standardtabellutseende */
html body #ContentColumn table th {
    background: #2a5d67 !important;
    color: #ffffff !important;
    border-color: #1e4750 !important;
}

html body #ContentColumn table td {
    background: rgba(49, 78, 93, 0.92) !important;
    color: #ffffff !important;
    border-color: #203f49 !important;
}

html body #ContentColumn table tr:nth-child(even) td {
    background: rgba(56, 89, 105, 0.92) !important;
}

html body #ContentColumn tr.yellow td,
html body #ContentColumn tr.yellow th {
    background: #2a5d67 !important;
    color: #ffffff !important;
}

/* ---------------------------------------------------------
   7. Gamla grid-system med for manga fasta kolumner
   --------------------------------------------------------- */
html body #ContentColumn .wiki-grid,
html body #ContentColumn .item-grid,
html body #ContentColumn .shop-grid,
html body #ContentColumn .event-grid,
html body #ContentColumn .card-grid,
html body #ContentColumn .boss-grid,
html body #ContentColumn .quest-grid,
html body #ContentColumn [class*="-grid"] {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Bara kanda kortgrids tvingas till tre kolumner.
   Vi andrar INTE godtyckliga layout-grids. */
html body #ContentColumn .wiki-grid,
html body #ContentColumn .item-grid,
html body #ContentColumn .shop-grid,
html body #ContentColumn .event-grid,
html body #ContentColumn .card-grid,
html body #ContentColumn .boss-grid,
html body #ContentColumn .quest-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* ---------------------------------------------------------
   8. Hogerkolumnen ar HELT separat och far aldrig paverkas
   av legacy-normaliseringen ovan.
   --------------------------------------------------------- */
html body #ThemeboxesColumn {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    overflow: visible !important;
}

html body #ThemeboxesColumn #SwevOnlineWrapper,
html body #ThemeboxesColumn #Themeboxes,
html body #ThemeboxesColumn #HighscoreBox,
html body #ThemeboxesColumn #EventsBox,
html body #ThemeboxesColumn #DiscordBox {
    position: relative !important;
    width: 180px !important;
    max-width: 180px !important;
    transform: none !important;
}

/* ---------------------------------------------------------
   9. Responsiv sakerhet for sjalva center-innehallet
   --------------------------------------------------------- */
@media (max-width: 1100px) {
    html body #ContentColumn .wiki-grid,
    html body #ContentColumn .item-grid,
    html body #ContentColumn .shop-grid,
    html body #ContentColumn .event-grid,
    html body #ContentColumn .card-grid,
    html body #ContentColumn .boss-grid,
    html body #ContentColumn .quest-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}/* =========================================================
   REMOVE OLD TIBIA LOGO ABOVE MY ACCOUNT
   ========================================================= */

#LeftArtwork,
#MenuColumn #LeftArtwork {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}/* =========================================================
   SWEVLAND BACKGROUND DEPTH
   Gor sidornas tomrum mer levande utan att flytta layouten
   ========================================================= */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(25, 130, 160, 0.10) 0%,
            rgba(10, 55, 75, 0.05) 28%,
            transparent 58%
        ),
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0.38) 0%,
            transparent 18%,
            transparent 82%,
            rgba(0, 0, 0, 0.38) 100%
        );
}

body::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42vh;
    pointer-events: none;
    z-index: -1;

    background:
        radial-gradient(
            ellipse at center bottom,
            rgba(0, 130, 165, 0.11) 0%,
            rgba(0, 70, 95, 0.06) 32%,
            transparent 72%
        );
}

#Bodycontainer {
    box-shadow:
        0 0 18px rgba(0, 0, 0, 0.95),
        0 0 24px rgba(0, 180, 220, 0.16),
        0 0 55px rgba(0, 110, 150, 0.08),
        inset 0 0 25px rgba(0, 0, 0, 0.55) !important;
}/* =========================================================
   SWEVLAND LIGHTNING EFFECT
   Subtila blixtar ovanpa regnbakgrunden
   ========================================================= */

body::before {
    content: "";
    position: fixed;
    inset: 0;

    pointer-events: none;
    z-index: 9998;

    background:
        radial-gradient(
            circle at 72% 18%,
            rgba(190, 235, 255, 0.45) 0%,
            rgba(120, 205, 255, 0.18) 18%,
            transparent 48%
        );

    opacity: 0;

    animation: swevLightning 14s infinite;
}

@keyframes swevLightning {

    0%,
    77%,
    79%,
    82%,
    100% {
        opacity: 0;
    }

    /* Forsta korta flashen */
    78% {
        opacity: 0.16;
    }

    /* Slacks direkt */
    78.4% {
        opacity: 0;
    }

    /* Starkare andra flash */
    80% {
        opacity: 0.32;
    }

    80.3% {
        opacity: 0.05;
    }

    81% {
        opacity: 0.22;
    }

    81.4% {
        opacity: 0;
    }
}#SwevFog {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    background:
        radial-gradient(
            ellipse at 12% 65%,
            rgba(180, 220, 235, 0.10) 0%,
            rgba(120, 170, 190, 0.05) 30%,
            transparent 62%
        ),
        radial-gradient(
            ellipse at 88% 58%,
            rgba(180, 220, 235, 0.09) 0%,
            rgba(120, 170, 190, 0.04) 32%,
            transparent 64%
        );

    filter: blur(18px);
    animation: swevFogMove 16s ease-in-out infinite alternate;
}

@keyframes swevFogMove {
    from {
        transform: translateX(-18px) translateY(4px) scale(1.02);
        opacity: 0.45;
    }

    to {
        transform: translateX(18px) translateY(-8px) scale(1.07);
        opacity: 0.8;
    }
}

#Bodycontainer {
    position: relative !important;
    z-index: 5 !important;
}/* =========================================================
   SWEVLAND EVENTS + DISCORD SPACING FIX
   Forhindrar att rutorna ligger ovanpa varandra
   ========================================================= */

/* EVENTS */
#ThemeboxesColumn #EventsBox {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 0 16px 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    transform: none !important;
    box-sizing: border-box !important;
}

/* DISCORD */
#ThemeboxesColumn #DiscordBox {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: block !important;

    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;

    height: 230px !important;

    margin: 0 !important;
    padding: 0 !important;

    clear: both !important;
    overflow: hidden !important;

    transform: none !important;
    box-sizing: border-box !important;
}

/* Discord iframe */
#ThemeboxesColumn #DiscordBox iframe {
    position: static !important;

    display: block !important;

    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;

    height: 230px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    transform: none !important;
    box-sizing: border-box !important;
}

/* Hela hogersidans boxflode */
#ThemeboxesColumn #Themeboxes {
    position: relative !important;

    width: 180px !important;
    height: auto !important;

    overflow: visible !important;
}

/* Sakerhet: varje box ska ligga efter foregaende */
#ThemeboxesColumn #HighscoreBox,
#ThemeboxesColumn #EventsBox,
#ThemeboxesColumn #DiscordBox {
    float: none !important;
    display: block !important;
}