/*

o <(hello! i am blobby the little blob! i'm here to make everything stylish!)

o <(my dream is to become the bestest blob stylist ever! what is yours?)

o <(i hope you enjoy your stay. have some tea to soothe your soul!)

*/
@font-face { font-family: NgutangDong; src: url(/fonts/ngutangdong.otf); src: url('/fonts/ngutangdong.woff2') format('woff2'), url('/fonts/ngutangdong.woff2') format('woff'), url('/fonts/ngutangdong.ttf') format('truetype'); font-display: fallback; }
@font-face { font-family: Poppins; src: url('/fonts/poppins.woff2') format('woff2'), url('/fonts/poppins.ttf') format('truetype'); font-display: fallback; }
body, html, form, div, span, p { margin: 0; padding: 0; }
html { scroll-padding-top: 108px; }
/*
    osc
*/
img { transform: translateZ(0); image-rendering: -webkit-optimize-contrast; }
/* one style classes */
.none {

}
.b, .bold { font-weight: bold; }
.i, .italic { font-style: italic; }
.u, .underline { text-decoration: underline; }
.s, .strike { text-decoration: line-through; }
.big { font-size: 110%; }
.bigger { font-size: 125%; }
.small { font-size: 80%; }
.tiny { font-size: 60%; }
.large { font-size: 120%; }
.huge { font-size: 150%; }
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify; }
.fleft { float: left; }
.fright { float: right; }
.clear { clear: both; }
.clear-left { clear: left; }
.clear-right { clear: right; }
.grab { cursor: grab; }
.pointer { cursor: pointer; }
.cp0 td { padding: 0px; }
.cp1 td { padding: 1px; }
.cp2 td { padding: 2px; }
.cp3 td { padding: 3px; }
.cp4 td { padding: 4px; }
.cp8 td { padding: 8px; }
.cs0 { border-spacing: 0px; }
.cs1 { border-spacing: 1px; }
.cs2 { border-spacing: 2px; }
.cs3 { border-spacing: 3px; }
.cs4 { border-spacing: 4px; }
.cs8 { border-spacing: 8px; }
.top, .vtop, .vertical-top { vertical-align: top; }
.middle, .vmiddle, .vmid, .vertical-middle { vertical-align: middle; }
.bottom, .vbottom, .vbot, .vertical-bottom { vertical-align: bottom; }
.text-top, .vtxtop, .vtxttop, .vttop { vertical-align: text-top; }
.margin-auto, .ma { margin: auto; }
.margin-0, .m0 { margin: 0px !important; }
.margin-1, .m1 { margin: 1px; }
.margin-2, .m2 { margin: 2px; }
.margin-3, .m3 { margin: 3px; }
.margin-4, .m4 { margin: 4px; }
.margin-5, .m5 { margin: 5px; }
.margin-6, .m6 { margin: 6px; }
.margin-7, .m7 { margin: 7px; }
.margin-8, .m8 { margin: 8px; }
.padding-0, .p0 { padding: 0px !important; }
.padding-1, .p1 { padding: 1px; }
.padding-2, .p2 { padding: 2px; }
.padding-3, .p3 { padding: 3px; }
.padding-4, .p4 { padding: 4px; }
.padding-5, .p5 { padding: 5px; }
.padding-6, .p6 { padding: 6px; }
.padding-7, .p7 { padding: 7px; }
.padding-8, .p8 { padding: 8px; }
.padding-12, .p12 { padding: 12px; }
.bsbb { box-sizing: border-box; }
.b0, .border-0 { border: 0 !important; }
.r0, .rounded-0 { border-radius: 0px !important; -moz-border-radius: 0px; -webkit-border-radius: 0px; }
.rounded-4 { border-radius: 4px; -moz-border-radius: 5px; -webkit-border-radius: 4px; }
.rounded-8 { border-radius: 8px; -moz-border-radius: 9px; -webkit-border-radius: 8px; }
.rounded-12 { border-radius: 12px; -moz-border-radius: 13px; -webkit-border-radius: 12px; }
.size8, .s8 { width: 8px; height: 8px; }
.size16, .s16 { width: 16px !important; height: 16px !important; }
.size24, .s24 { width: 24px !important; height: 24px !important; }
.size32, .s32 { width: 32px !important; height: 32px !important; }
.size48, .s48 { width: 48px !important; height: 48px !important; }
.size64, .s64 { width: 64px !important; height: 64px !important; }
.size72, .s72 { width: 72px !important; height: 72px !important; }
.size80, .s80 { width: 80px !important; height: 80px !important; }
.size96, .s96 { width: 96px !important; height: 96px !important; }
.size112, .s112 { width: 112px; height: 112px; }
.size128, .s128 { width: 128px; height: 128px; }
.width0, .w0 { width: 0%; }
.width1, .w1 { width: 1%; }
.width5, .w5 { width: 5%; }
.width10, .w10 { width: 10%; }
.width15, .w15 { width: 15%; }
.width20, .w20 { width: 20%; }
.width25, .w25 { width: 25%; }
.width30, .w30 { width: 30%; }
.width30, .w33 { width: 33%; }
.width30, .w34 { width: 34%; }
.width35, .w35 { width: 35%; }
.width40, .w40 { width: 40%; }
.width45, .w45 { width: 45%; }
.width48, .w48 { width: 48%; }
.width49, .w49 { width: 49%; }
.width50, .w50 { width: 50%; }
.width60, .w60 { width: 60%; }
.width65, .w65 { width: 65%; }
.width69, .w69 { width: 69%; }
.width70, .w70 { width: 70%; }
.width75, .w75 { width: 75%; }
.width79, .w79 { width: 79%; }
.width80, .w80 { width: 80%; }
.width85, .w85 { width: 85%; }
.width90, .w90 { width: 90%; }
.width95, .w95 { width: 95%; }
.width97, .w97 { width: 97%; }
.width100, .w100 { width: 100%; }
.w32px { width: 32px; }
.w48px { width: 48px; }
.w50px { width: 50px; }
.w64px { width: 64px; }
.w100px { width: 100px; }
.w128px { width: 128px; }
.w200px { width: 200px; }
.w240px { width: 240px; }
.w250px { width: 250px; }
.w256px { width: 256px; }
.w300px { width: 300px; }
.w320px { width: 320px; }
.w350px { width: 350px; }
.w375px { width: 375px; }
.w400px { width: 400px; }
.w500px { width: 500px; }
.w550px { width: 550px; }
.w575px { width: 575px; }
.w600px { width: 600px; }
.w640px { width: 640px; }
.w650px { width: 650px; }
.h50px { height: 50px; }
.h100px { height: 100px; }
.h128px { height: 128px; }
.h160px { height: 160px; }
.h200px { height: 200px; }
.h250px { height: 250px; }
.h256px { height: 256px; }
.h300px { height: 300px; }
.h480px { height: 480px; }
.mw25 { max-width: 25%; }
.mw50 { max-width: 50%; }
.mw75 { max-width: 75%; }
.mw95 { max-width: 95%; }
.mw100 { max-width: 100%; }
.mw100px { max-width: 100px; }
.mw150px { max-width: 150px; }
.mw200px { max-width: 200px; }
.mw240px { max-width: 240px; }
.mw288px { max-width: 288px; }
.mw300px { max-width: 300px; }
.mw500px { max-width: 500px; }
.mw600px { max-width: 600px; }
.mw640px { max-width: 640px; }
.mw640px { max-width: 640px; }
.mh50 { max-height: 50%; }
.mh100 { max-height: 100%; }
.mh100px { max-height: 100px; }
.mh150px { max-height: 150px; }
.mh200px { max-height: 200px; }
.mh288px { max-height: 288px; }
.mh300px { max-height: 300px; }
.mh320px { max-height: 320px; }
.black-background, .blackbg { background: #000000; }
.gray-background, .graybg { background: #f0f0f0; }
.white-background, .whitebg { background-color: #ffffff !important; }
.dim0 { background: rgba(0, 0, 0, 0); }
.dim25 { background: rgba(0, 0, 0, 0.25); }
.dim50 { background: rgba(0, 0, 0, 0.5); }
.dim75 { background: rgba(0, 0, 0, 0.75); }
.nobg { background: transparent !important; }
.black-border { border: 1px solid #000000; }
.gray-border { border: 1px solid #f0f0f0; }
.white-border { border: 1px solid #ffffff; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.display-none { display: none; }
.table-cell { display: table-cell; }
.ellipsis { text-overflow: ellipsis; }
.shorten { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.space-around { justify-content: space-around; }
.row-wrap { flex-flow: row wrap; }
.ofauto { overflow: auto; }
.wb { word-break: normal; word-wrap: break-word; }
.wb-a { word-break: break-all; }
.ws-nw { white-space: nowrap; }
.tdn, .tdn a, .tdn a:hover, .tdn a:visited, .tdn a:link, .tdn a:active { text-decoration: none !important; }
.txtdn { text-decoration: none; }
div.table { display: table; }
div.tr { display: table-row; }
div.td { display: table-cell; }
.table-fixed { table-layout: fixed; }
.fs1 { flex-shrink: 1; }
.fs2 { flex-shrink: 2; }
.fs3 { flex-shrink: 3; }
.resize { resize: both; }
.resize-horizontal { resize: horizontal; }
.resize-vertical { resize: vertical; }
.no-resize { resize: none; }
/* Transformation */
.rotate-90 { display: inline-block; transform: rotate(90deg); }
.rotate-180 { display: inline-block; transform: rotate(180deg); }
/* Animation */
.rotate { display: inline-block; animation: rotation 4s linear infinite; }
@keyframes rotation { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
/* Icons */
.icona-container { display: inline-block; position: relative; }
.icona-layers { display: inline-block; position: relative; height: 2.5em; width: 2.5em; }
.icona-icon { display: inline-block; position: absolute; left: 0; top: 0; font-size: 2.5em; }
.icona-text { display: inline-block; position: absolute; left: 0.25em; top: 0.35em; height: 2.5em; width: 2.5em; font-size: 0.8em; line-height: 2.5em; text-align: center; vertical-align: middle; }
.icona-number { display: inline-block; position: absolute; display: inline-block; width: 16px; height: 16px; box-sizing: border-box; line-height: 1; font-size: 50%; padding: 0.25em; text-align: center; vertical-align: middle; background: #1976D2; color: #fff; text-shadow: #000000; top: 6px; right: 0px; overflow: hidden; border-radius: 12px; }
.icona-number-red { display: inline-block; position: absolute; display: inline-block; width: 16px; height: 16px; box-sizing: border-box; line-height: 1; font-size: 50%; padding: 0.25em; text-align: center; vertical-align: middle; background: darkred; color: #fff; text-shadow: #000000; top: 6px; right: 0px; overflow: hidden; border-radius: 12px; }
.icona-fw { display: inline-block; width: 1.25em; height: 1.25em; text-align: center; }
/* */
.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 100%;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%);
}
.btn-default {
    color: #333333;
    background-color: #ffffff;
    border-color: #cccccc;
}
.btn-blue {
    color: #ffffff;
    background-color: #286090;
    border-color: #204d74;
}
.btn-red {
    color: #ffffff;
    background-color: #d9534f;
    border-color: #d43f3a;
}
#Window div { box-sizing: border-box; }
#WindowContent { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--panel-content-bg) var(--top-bar-bg); }
/* PayPal */
[id^=zoid-paypal-buttons] > iframe.component-frame {
    z-index: 0 !important;
}
/*
    theme
*/
.theme-day {
    --blue: #1258A0; /*#1976d2;*/
    --green: #20604D; /*#298267;*/
    --red: #E53935;

    --bgcolor: #2b6851;
    --background: linear-gradient(to top, rgba(43,104,81,0), rgba(43,104,81,1)), linear-gradient(to bottom, rgba(43,104,81,0), rgba(43,104,81,1)), url(/images/theme22/background_middle_day.webp);
    --background-header: url(/images/theme22/background_header_day.webp) top no-repeat;
    --background-footer: url(/images/theme22/background_footer_day.webp) bottom no-repeat;
    --content-bg: rgba(255, 255, 255, 0.3);
    --link-color: #000000;
    --link-hover-color: #0039aa;
    --input-bg: #ffffff;
    --input-focus-bg: #eee;
    --input-disabled-bg: #ccc;
    --input-border-color: #C5C6CC;
    --input-txt-color: #000000;
    --button-default: #2f3541;
    --button-default-hover: #636c7c;
    --button-default-txt-color: #ffffff;
    --button-disabled-bg: #777;
    --button-accept: #3370BC;
    --button-accept-hover: #348CF8;
    --button-decline: #dd163b;
    --button-decline-hover: #eb3154;

    --panel-head-bg: #14406b;
    --panel-head-txt-color: #ffffff;
    --panel-content-bg: #ffffff;
    --panel-content-txt-color: #000000;
    --panel-border-color: #c5c6cc;

    --secondary-bg-color: #eee;
    --gradient-bg-1: linear-gradient(to bottom right, #dddddd, #fefefe);
    --gradient-bg-1-hover: linear-gradient(to bottom right, #fefefe, #dddddd);
    
    --important-bg: #eee;
    --important-outline: #C5C6CC;
    --important-border: #FFD6D6;
    --notice-bg: #eee;
    --notice-outline: #C5C6CC;
    --notice-blue: #006FFD;

    --top-bar-bg: #14406b;
    --head-bar-bg: #ffffff;
    --head-bar-bottom-border-color: #c2dcfd;
    --navi-link-color: #333333;
    --navi-hover-color: #348cf8;

    --page-navi: #333333;
    --page-navi-hover: #348CF8;

    --row-hover-color: #d3e7ff;

    /*--footer-divider: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".5" fill="%23ffffff"/></svg>');
    --footer-bg-color: rgba(255, 255, 255, 0.5);
    --footer-txt-color: #333333; */

    --footer-divider: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".75" fill="%23000000"/></svg>');
    --footer-bg-color: rgba(0, 0, 0, 0.75);
    --footer-txt-color: #ffffff;

    --image-brightness: brightness(1);

    --color-scheme: light;
    --day: inherit;
    --night: none;
}
.theme-night {
    --blue: #1258A0;
    --green: #20604D;
    --red: #ed3241;

    --bgcolor: #0F252E;
    --background: linear-gradient(to top, rgba(43,104,81,0), rgba(15,37,46,1)), linear-gradient(to bottom, rgba(43,104,81,0), rgba(15,37,46,1)), url(/images/theme22/background_middle_night.webp);
    --background-header: url(/images/theme22/background_header_night.webp) top no-repeat;
    --background-footer: url(/images/theme22/background_footer_night.webp) bottom no-repeat;
    --content-bg: rgba(51, 51, 51, 0.5);
    --link-color: #C5C6CC;
    --link-hover-color: #348CF8;
    --input-bg: #1F2024;
    --input-focus-bg: #222633;
    --input-disabled-bg: #121214;
    --input-border-color: #8F9098;
    --input-txt-color: #C5C6CC;
    --button-default: #2f3541;
    --button-default-txt-color: #ffffff;
    --button-default-hover: #636c7c;
    --button-accept: #3370BC;
    --button-accept-hover: #348CF8;
    --button-decline: #dd163b;
    --button-decline-hover: #eb3154;

    --panel-head-bg: #292e38;
    --panel-head-txt-color: #E8E9F1;
    --panel-content-bg: #1F2024;
    --panel-content-txt-color: #C5C6CC;
    --panel-border-color: #2c2c2c;

    --secondary-bg-color: #2c2c2c;
    --gradient-bg-1: linear-gradient(to bottom right, #1F2024, #2c2c2c);
    --gradient-bg-1-hover: linear-gradient(to bottom right, #2c2c2c, #1F2024);

    --important-bg: #333438;
    --important-outline: #D4D6DD;
    --important-border: #dd163b;
    --notice-bg: #333438;
    --notice-outline: #D4D6DD;
    --notice-blue: #2897FF;

    --top-bar-bg: #2c2c2c;
    --head-bar-bg: #14406b;
    --head-bar-bottom-border-color: #1d487e;
    --navi-link-color: #ffffff;
    --navi-hover-color: #348cf8;

    --page-navi: #ffffff;
    --page-navi-hover: #348cf8;

    --row-hover-color: #14406b;

    --footer-divider: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".5" fill="%23000000"/></svg>');
    --footer-bg-color: rgba(0, 0, 0, 0.5);
    --footer-txt-color: #ffffff;

    --image-brightness: brightness(0.9);

    --color-scheme: dark;
    --day: none;
    --night: inherit;
}
body {
    background: var(--background);
    background-position: center 1010px, center bottom 990px, center;
    background-repeat: no-repeat, no-repeat, repeat-y;
    background-size: 1925px 1025px, 1925px 1025px, 1925px 925px;
    background-color: var(--bgcolor);
    color: var(--panel-content-txt-color);
    font-family: Arial, "Liberation Sans", Helvetica, sans-serif;
    font-size: 16px;
    transition: background 1s, color 1s;
}
a:link, a:active, a:visited { color: var(--link-color); text-decoration: underline; transition: background 1s, color 1s; }
a:hover { color: var(--link-hover-color); text-decoration: none; transition: color 0s; }
fieldset { display: block; margin: 8px; padding: 8px; box-sizing: border-box; border: 1px solid #bcbcbc; border-radius: 4px; }
hr { height: 1px; color: #d6d6d6; background: #d6d6d6; border: none; margin: 4px; padding: 0; }
img { border: 0px; }
button, input, select, textarea, .button, input::-webkit-file-upload-button, input::file-selector-button { background-color: var(--input-bg); color: var(--input-txt-color); border: 0; border-radius: 8px; font-family: Arial, "Liberation Sans", Helvetica, sans-serif; font-size: 100%; text-decoration: none; transition: background 1s, color 1s; }
input:disabled, select:disabled, textarea:disabled, input[type=text]:read-only, input[type=number]:read-only, input[type=tel]:read-only, input[type=email]:read-only, textarea:read-only  { background: var(--input-disabled-bg); }
.btn-disabled, .button-disabled { background: var(--button-disabled-bg) !important; cursor: default !important; }
input:focus, select:focus, textarea:focus { background: var(--input-focus-bg); }
input, input[type=text], input[type=password] { height: 20px; outline: none; }
input[type=file] { height: 24px; }
input[type=date] { color-scheme: var(--color-scheme); }
select { height: 30px; padding: 0px; position: relative; bottom: 0; }
input, input[type=text], select, textarea { padding: 4px; border: 1px solid var(--input-border-color); box-shadow: 1px 1px 0 var(--top-bar-bg); }
input[type=checkbox], input[type=radio] { box-shadow: none; }
button, input, input[type=text], input[type=password], input[type=button], input[type=submit], input[type=checkbox], input[type=radio], select, .button, input::-webkit-file-upload-button, input::file-selector-button { margin: 1px; vertical-align: middle; text-decoration: none; }
.nocnb::-webkit-inner-spin-button, .nocnb::-webkit-outer-spin-button { -moz-appearance: none; -webkit-appearance: none; opacity: 0; margin: 0; }
.nocnb { appearance: textfield; -moz-appearance: textfield; }
button, input[type=button], input[type=submit], .button, input::-webkit-file-upload-button, input::file-selector-button { height: 28px; line-height: 28px; background: var(--button-default); color: var(--button-default-txt-color) !important; box-shadow: 1px 1px 0 var(--top-bar-bg); font-weight: bold; cursor: pointer; padding-left: 6px; padding-right: 6px; padding-top: 0px; padding-bottom: 0px; border: 0; border-radius: 4px; }
button:hover, input[type=button]:hover, input[type=submit]:hover, .button:hover { background: var(--button-default-hover); color: var(--button-default-txt-color); padding-left: 6px; padding-right: 6px; padding-top: 0px; padding-bottom: 0px; transition: all 0s;}
input[type=radio] { cursor: pointer; }
input::-webkit-file-upload-button, input::file-selector-button { margin-left: -2px; margin-right: 6px; margin-top: -2px;  }
.button:hover { background: var(--button-default-hover) !important; color: var(--button-default-txt-color) !important; }
button:active, input[type=button]:active, input[type=submit]:active, .button:active, .button.pressed { background: var(--button-default-hover); color: var(--button-default-txt-color); padding-left: 6px; padding-right: 6px; padding-top: 0px; padding-bottom: 0px; }
.button { display: inline-block; text-decoration: none !important; }
.button.small { padding: 2px; font-size: 80%; height: 20px; line-height: 20px; }
.blue[type=button], .blue[type=submit], .button.blue { background: var(--button-accept); color: var(--button-default-txt-color); text-decoration: none; border-left: 1px solid #0065b7; border-right: 1px solid #0069b7; border-top: 1px solid #0062b7; border-bottom: 1px solid #005299; }
.blue[type=button]:hover, .blue[type=submit]:hover, .button.blue:hover { background: var(--button-accept-hover) !important; padding-left: 6px; padding-right: 6px; padding-top: 0px; padding-bottom: 0px; }
.blue[type=button]:active, .blue[type=submit]:active, .button.blue:hover { background: var(--button-accept-hover) !important; padding-left: 6px; padding-right: 6px; padding-top: 0px; padding-bottom: 0px; }
.green[type=button], .green[type=submit], .button.green { background: #20604D !important; color: #ffffff !important; text-decoration: none; border-left: 1px solid #0065b7; border-right: 1px solid #0069b7; border-top: 1px solid #0062b7; border-bottom: 1px solid #005299; }
.green[type=button]:hover, .green[type=submit]:hover, .button.green:hover { background: #11998e !important; padding-left: 6px; padding-right: 6px; padding-top: 0px; padding-bottom: 0px; }
.green[type=button]:active, .green[type=submit]:active, .button.green:hover { background: #11998e !important; padding-left: 6px; padding-right: 6px; padding-top: 0px; padding-bottom: 0px; }
.red[type=button], .red[type=submit], .button.red, button.red { background-color: var(--button-decline) !important; color: #ffffff !important; border-left: 1px solid #a12123; border-right: 1px solid #a12123; border-top: 1px solid #a12123; border-bottom: 1px solid #ac0506; }
.red[type=button]:hover, .red[type=submit]:hover, .button.red:hover { background-color: var(--button-decline-hover)  !important; }
.red[type=button]:active, .red[type=submit]:active, .button.red:active { background-color: var(--button-decline-hover)  !important;  }
.nhc, .nhc:hover { color: var(--panel-content-txt-color) !important; }
.element-border { border: 1px solid var(--panel-border-color); }
/* */
.Anchor, .Anker { /* scroll-margin-top: 108px; */ }
.Anchor div, .Anker div { /* scroll-margin-top: 108px; */ }
.rhover:hover, .td-hover:hover, .tr-hover:hover, .tr-hover:hover td { background-color: var(--row-hover-color) !important; transition: background 0.1s; }
.black, .black a:link, .black a:visited, .black > a:link, .black > a:visited { color: #000000; }
.gray, .gray a:link, .gray a:visited, .gray > a:link, .gray > a:visited { color: #f0f0f0; }
.white, .white a:link, .white a:visited, .white > a:link, .white > a:visited { color: #ffffff; }
.red { color: var(--red) !important; }
a.red:not(.button), .red a:link, .red a:visited, .red > a:link, .red > a:visited { color: #ed3241 !important; }
.green { color: #298267; }
a.green, .green a:link, .green a:visited, .green > a:link, .green > a:visited { color: #298267 !important; }
.blue { color: #1976d2; }
a.blue:not(.button), .blue a:link, .blue a:visited, .blue > a:link, .blue > a:visited { color: #1976d2 !important; }
.transparent { color: transparent; }
.invat { color: transparent; margin-left: -16px; }
/* */
#MenuCloser {
    position: fixed;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 3;
    background: rgba(0, 0, 0, 0);
    transition: background 0.25s;
}
#Top {
    width: 100%;
    height: 48px;
    background: var(--top-bar-bg);
    transition: background 1s;
    z-index: 4;
}
#TopInner {
    max-width: 1216px;
    margin: auto;
}
#TopRight {
    float: right;
    height: 48px;
    line-height: 48px;
    padding-right: 16px;
    color: #ffffff;
    font-size: 21px;
    vertical-align: middle;
}
#TopRight ul { list-style: none; display: inline-block; margin: 0; padding: 0; height: 48px; line-height: 48px; }
#TopRight li { display: inline-block; margin: 0; padding: 0 8px; height: 48px; line-height: 48px; text-align: center; }
#TopRight li:hover { background: rgba(0, 0, 0, 0.24); cursor: pointer; }
#TopRight a { color: #ffffff; text-decoration: none !important; }
#TopLeft {
    height: 48px;
    line-height: 48px;
    padding-left: 16px;
}
#Logo {
    display: inline-block;
    color: #ffffff;
    font-family: "NgutangDong";
}
#Logo a { color: #ffffff; text-decoration: none; }
#Logo span {
    color: #5A9EF1;
}
#Slogan {
    position: absolute;
    top: 6px;
    height: 48px;
    line-height: 16px;
    color: #C5C6CC;
    font-size: 12px;
}
.ThemeSwitcher {
    font-size: 20px;
    height: 48px;
    line-height: 48px;
    cursor: pointer;
}
.ThemeSwitchDay { display: var(--day); }
.ThemeSwitchNight { display: var(--night); }
/*
*/
#MobileNavigationOverlay { position: relative; left: 0px; top: 0px; width: 100%; height: 100%; display: none; }
#XMobileNavigation { width: 100%; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; background: rgba(0, 0, 0, 0.75); z-index: 5; display: none; }
#MobileNavigation { left: 0px; top: 0px; margin: 0 !important; border-radius: 0 !important; position: fixed; z-index: 1000; min-width: 240px; max-width: 240px; height: 100%; overflow: auto; background: var(--panel-content-bg); display: none; }
#MobileNavigation { transition: all 1s;}
#MobileNavigation > .PanelHead, #MobileUserMenu > .PanelHead { border: 0 !important; border-radius: 0 !important; }
#MobileNavigation ul { margin: 0px; padding: 0px; list-style: none; }
#MobileNavigation li { display: block; line-height: 200%; font-size: 1.05rem; }
#MobileNavigation .MobileHeadLine { color: var(--panel-head-txt-color); background: var(--panel-head-bg); }
#MobileNavigation .MobileHeadLine a { color: var(--panel-head-txt-color); }
#MobileNavigation a { color: var(--link-color); text-decoration: none; display: block; line-height: 200%; }
#MobileNavigation a:hover { background: rgba(0, 0, 0, 0.24); }
#MobileUserMenuOverlay { position: relative; left: 0px; top: 0px; width: 100%; height: 100%; }
#XMobileUserMenu { width: 100%; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; background: rgba(0, 0, 0, 0.75); z-index: 5; display: none; }
#MobileUserMenu { right: 0px; top: 0px; margin: 0 !important; position: fixed; z-index: 1000; min-width: 240px; height: 100%; overflow: auto; background: var(--panel-content-bg); display: none; border-radius: 0 !important; }
#MobileUserMenu ul { margin: 0px; padding: 0px; list-style: none; }
#MobileUserMenu li { display: block; line-height: 200%; font-size: 1.05rem; }
#MobileUserMenu .MobileHeadLine { color: var(--panel-head-txt-color); background: var(--panel-head-bg); border-radius: 0 !important; }
#MobileUserMenu .MobileHeadLine a { color: var(--panel-head-txt-color); }
#MobileUserMenu li a { color: var(--link-color); text-decoration: none; display: block; line-height: 200%; }
#MobileUserMenu li a:hover { background: rgba(0, 0, 0, 0.24); }
.MobileNavigation span { padding-top: 8px; }
.MobileNavigation ul { margin: 0px; padding: 0px; list-style: none; }
.MobileNavigation li { display: block; line-height: 200%; font-size: 1.05rem; }
.MobileNavigation a { text-decoration: none; display: block; line-height: 200%; }
.MobileNavigation a:hover { background: var(--navi-link-color); }
/*
*/
h1 {
    margin: 0;
    padding: 0;
    font-weight: normal;
    letter-spacing: 0.05em;
}
#Head {
    width: 100%;
    height: 48px;
    background: var(--head-bar-bg);
    border-top: 1px solid var(--head-bar-bottom-border-color);
    border-bottom: 1px solid var(--head-bar-bottom-border-color);
    transition: background 1s, border 1s;
    z-index: 3;
}
#HeadInner {
    max-width: 1216px;
    height: 48px;
    line-height: 48px;
    margin: auto;
}
#HeadRight {
    color: var(--navi-link-color);
    float: right;
    text-align: right;
    width: 356px;
    height: 48px;
    line-height: 48px;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
    transition: color 1s;
}
.SearchForm {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 48px;
    line-height: 48px;
}
.SearchInput {
    width: 100%;
    height: 30px !important;
    padding-left: 8px !important;
    padding-right: 54px !important;
    box-sizing: border-box;
}
.SearchIconM { font-size: 28px; }
.SearchButton {
    position: absolute;
    right: 3px;
    top: 10px;
    width: 48px;
    height: 29px;
    line-height: 29px;
    color: var(--input-txt-color) !important;
    border: 0;
    border-left: 1px solid var(--input-border-color);
    border-radius: 0;
    background: none;
    box-shadow: none;
    transition: color 1s, border 1s;
}
.SearchButton:hover { border: 0; border-left: 1px solid var(--input-border-color); background: none; }
#HeadLeft {
    padding-left: 16px;
    line-height: 48px;
}
#Navigation, #Socials {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 18px;
    line-height: 48px;
}
#Navigation li {
    float: left;
    text-align: center;
    margin: 0 8px;
    padding: 0 12px;
    color: var(--navi-link-color) !important;
    transition: color 1s;
}
#Navigation li:hover {
    background: rgba(125, 125, 125, 0.1);
    padding-bottom: -8px;
    border-bottom: 1px solid var(--navi-hover-color);
    cursor: pointer;
}
#Navigation a { color: var(--navi-link-color) !important; }
#UserName { font-size: 16px; margin: -4px; padding: -4px; }
#UserMenuIcon { display: inline-block; width: 32px; height: 32px; border-radius: 50%; vertical-align: middle; margin-top: -3px; }
#UserMenuIcon img { max-width: 32px; max-height: 32px; border-radius: 16px; }
#UserMenuIconM { display: inline-block; width: 32px; height: 32px; border-radius: 50%; vertical-align: middle; margin-top: -3px; }
#UserMenuIconM img { max-width: 32px; max-height: 32px; border-radius: 16px; }
#AccountMenu {
    background: var(--panel-content-bg);
    outline: 4px solid var(--top-bar-bg);
    border-top: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    position: absolute;
    margin-left: -64px;
    margin-top: 0;
    width: 194px;
    display: none;
    overflow: hidden;
    z-index: 5;
}
#AccountMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    line-height: 20px;
}
#AccountMenu a {
    color: var(--panel-content-txt-color) !important;
}
#AccountMenu li {
    margin: 0;
    padding: 3px;
    width: 100%;
    height: 24px;
    font-size: 17px;
    line-height: 24px;
    text-align: left;
}
#AccountMenu li:hover {
    background: var(--row-hover-color);
}
#AccountMenu hr { width: 85%; margin: 8px; }
#DBMenu, #ComMenu {
    background: var(--panel-content-bg);
    border: 4px solid var(--top-bar-bg);
    border-top: 1px solid var(--navi-hover-color);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    position: absolute;
    margin-left: -16px;
    margin-top: 0px;
    width: 196px;
    display: none;
    z-index: 5;
}
#DBMenu ul, #ComMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}
#DBMenu li, #ComMenu li {
    margin: 0;
    padding: 3px;
    width: 97%;
    font-size: 18px;
    line-height: 28px;
    text-align: left !important;
    border: 0 !important;
    border-top: 1px solid var(--head-bar-bottom-border-color) !important;
    display: block;
}
#DBMenu li:hover, #ComMenu li:hover {
    background: var(--row-hover-color);
}
#DBMenu hr, #ComMenu hr { width: 85%; margin: 8px; }
#Username:hover .SubMenu, #Navigation li:hover .SubMenu {
    display: block !important;
}
#NavMV {
    color: var(--navi-link-color);
    font-size: 32px;
    height: 42px;
    line-height: 42px;
}
#SrchMV {
    color: var(--navi-link-color);
    font-size: 32px;
    height: 42px;
    line-height: 42px;
}
#Socials li {
    display: inline-block;
    text-align: center;
    margin-right: 16px;
}
#Navigation a, #Socials a {
    color: var(--navi-link-color);
    text-decoration: none;
    transition: color 1s;
}
#Navigation a:hover, #Socials a:hover {
    color: var(--navi-hover-color);
    transition: color 0s;
}
#HeadSpacer {
    height: 32px;
    display: block;
}
#Header {
    height: 472px;
    transition: height 1s;
}
#HeaderInner {
    width: 1216px;
    margin: auto;
    position: relative;
}
#Middle {
    max-width: 1950px;
    margin: auto;
    position: relative;
}
#Background1 { position: absolute; background: var(--background-header); background-position: top; background-size: 1925px 925px; background-repeat: no-repeat; width: 100%; height: 1080px; margin-top: 24px; z-index: -1; transition: background 1s; }
#Background2 { background: var(--background-footer); background-position: bottom; background-size: 1925px 925px; background-repeat: no-repeat; width: 100%; height: 1080px; margin-top: -465px; z-index: -1; transition: background 1s; }
#Content {
    max-width: 1216px;
    margin: auto;
    padding: 4px 0;
    background-color: var(--content-bg);
    border-radius: 8px;
    display: block;
    position: relative;
    /* scroll-margin-top: 96px; */
    z-index: 2;
    transition: background 1s;
}
#FooterDivider {
    /* background-image: var(--footer-divider); */
    height: 3rem;
    width: 100%;
    margin-top: -200px;
    transition: all 1s;
}     
#Footer {
    background: var(--footer-bg-color);
    position: relative;
    z-index: 1;
    margin: 0;
    line-height: 32px;
    height: 148px;
    color: var(--footer-txt-color);
    transition: background 1s, color 1s;
}
#FooterWrap {
    max-width: 1216px;
    margin: auto;
    padding: 0;
    position: relative;
    height: 148px;
}
#FooterInner {
    position: absolute;
    bottom: 12px;
    right: 72px;
}
.FooterNavigation {
    width: 216px;
    float: right;
    margin-right: 96px;
}
.FooterNavigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
}
.FooterNavigation li {
    display: block;
    margin: 1px;
    margin-left: 16px;
}
#Footer a {
    padding: 8px;
    color: var(--footer-txt-color);
    text-decoration: none;
    border-radius: 8px;
}
#Footer a:hover {
    background: rgba(0, 0, 0, 0.5);
}
#FooterM {
    background: var(--footer-bg-color);
    position: relative;
    z-index: 1;
    margin: -48px 0 0 0;
    line-height: 48px;
    height: 48px;
    color: var(--footer-txt-color);
    transition: background 1s, color 1s;
}
#FooterWrapM {
    max-width: 1216px;
    margin: auto;
    padding: 0;
    position: relative;
    height: 48px;
}
#FooterInnerM {
    text-align: center;
}
#FooterM a {
    margin: 0 8px;
    padding: 8px;
    color: var(--footer-txt-color);
    text-decoration: none;
    border-radius: 8px;
}
#FooterM a:hover {
    background: rgba(0, 0, 0, 0.5);
}
#Bottom {
    position: relative;
    z-index: 1;
    background: var(--top-bar-bg);
    border-top: 1px solid var(--head-bar-bottom-border-color);
    transition: background 1s, border 1s;
}
#BottomInner {
    max-width: 1216px;
    margin: auto;
    padding: 8px;
    color: #fff;
    text-align: center;
}
#BottomInner a { color: #fff; }
#GoToTop { position: sticky; bottom: 1rem; left: 100%; display: none; width: 64px; margin: 1rem; margin-right: 0; z-index: 5; }
#GoToTop span { padding: 4px; background: var(--panel-head-bg); color: var(--panel-head-txt-color); font-size: 2rem; outline: 1px solid #ffffff; border-radius: 8px; }
/* */
.sbsc {
    display: flex;  
    flex-flow: row wrap;
}
.sbsc > * {
    padding: 8x;
    flex: 1 100%;
}
@media all and (min-width: 1000px) {
    .sbse { flex: 1 0 0; }
  }
  
  @media all and (min-width: 1000px) {
    .sbsel { order: 1; } 
    .sbser { order: 2; }
  }
/* Panels & Windows */
.panel, .Panel {
    margin: 8px;
    padding: 0;
    background: var(--panel-content-bg);
    border-radius: 8px;
    transition: background 1s;
}
.panel_head, .PanelHead {
    min-height: 28px;
    line-height: 28px;
    padding: 8px;
    background: var(--panel-head-bg);
    color: var(--panel-head-txt-color);
    font-family: "Poppins";
    font-size: 105%;
    font-weight: normal;
    text-align: left;
    border: 1px solid var(--panel-border-color);
    border-bottom: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    transition: background 1s, color 1s, border 1s;
}
.panel_head a, .PanelHead a { color: var(--panel-head-txt-color); text-decoration: none; transition: color 1s; }
.panel_head .fa, .PanelHead .fa { font-size: 105%; padding-left: 2px; padding-right: 2px; }
.panel_content, .PanelContent {
    padding: 8px;
    background: var(--panel-content-bg);
    color: var(--panel-content-txt-color);
    font-size: 100%;
    text-align: left;
    word-break: normal;
    word-wrap: break-word;
    border: 1px solid var(--panel-border-color);
    border-top: 0;
    border-radius: 8px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    transition: background 1s, color 1s, border 1s;
}
#Window { opacity: 0; transform: scale(1); transition: all 0.15s ease-out; }
#CloseWindow { transition: all 0.15s ease-out; }

.PanelContent .PageNavigation { margin: -0.5rem; }
.panel_content .PageNavigation { margin: -0.5rem; }
.PageNavigation { color: #ffffff; padding: 0.5rem; background: #292e38; }
.PageNavigation ul { margin: 0; padding: 0; list-style: none; display: block; }
.PageNavigation li { display: inline-block; padding-left: 0.25rem; padding-right: 0.25rem; min-width: 4%; color: #575757; font-family: Verdana, "DejaVu Sans", Geneva, sans-serif; font-size: 1rem; font-weight: bold; text-align: center; text-decoration: none;  line-height: 280%; display: inline-block; border: 1px solid #454545; border-radius: 4px; }
.PageNavigation a { color: #ffffff !important; text-decoration: none; }
.PageNavigation .Desc { padding: 6px; background: var(--panel-content-bg); color: var(--panel-content-txt-color) !important; border-top: 1px solid #454545; }
.PageNavigation .Current, .PageNavigation .Current:hover { padding: 6px; background: var(--panel-content-bg); color: var(--panel-content-txt-color) !important; border-top: 1px solid #454545; }

.page_navigation { margin: 4px; padding: 6px; line-height: 36px; text-decoration: none; background: var(--button-default); border: var(--input-border-color); border-radius: 4px; transition: background 1s; }
.page_navigation:hover { background: var(--button-default-hover); }

#TSearchResults {
    background: var(--panel-content-bg);
    outline: 4px solid var(--top-bar-bg);
    border-top: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    position: absolute;
    margin-left: 13px;
    margin-top: -4px;
    display: none;
    overflow: hidden;
    z-index: 5;
}
#TSearchResults a { color: var(--link-color); }
#TSearchResults a:hover { background: var(--row-hover-color); }
.TSearchProduct { display: block; position: relative; box-sizing: border-box; height: 3rem; border: 1px solid var(--panel-border-color); border-radius: 8px; margin: 0.25rem; text-decoration: none !important; overflow: hidden; }
.TSearchProductImg { display: flex; position: absolute; left: 0; overflow: hidden; justify-content: center; align-items: center; width: 3rem; height: 3rem; background-color: #fff; border-right: 1px solid var(--panel-border-color); border-radius: 8px; filter: var(--image-brightness); }
.TSearchProductImg img { max-width: 100%; max-height: 100%; }
.TSearchProductName { position: absolute; left: 3rem; padding: 0.25rem; max-height: 1.9rem; line-height: 1.1rem; font-size: 1rem; font-weight: bold; color: var(--panel-content-txt-color); text-align: left; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;  }

.TPreviewProduct { display: block; position: relative; box-sizing: border-box; height: 3rem; border: 1px solid var(--panel-border-color); border-radius: 8px; margin: 0.25rem; text-decoration: none !important; }
.TPreviewProductImg { display: flex; position: absolute; left: 0; overflow: hidden; justify-content: center; align-items: center; width: 3rem; height: 3rem; background-color: #fff; border-right: 1px solid var(--panel-border-color); border-radius: 8px; filter: var(--image-brightness); }
.TPreviewProductImg img { max-width: 100%; max-height: 100%; }
.TPreviewProductName { position: absolute; left: 3rem; padding: 0.25rem; max-height: 1.9rem; line-height: 1.1rem; font-size: 1rem; font-weight: bold; color: var(--panel-content-txt-color); text-align: left; -webkit-box-orient: vertical;  }

#TNotifications, #TNotificationsM {
    background: var(--panel-content-bg);
    outline: 4px solid var(--top-bar-bg);
    border-top: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    position: absolute;
    margin-left: -292px;
    margin-top: 0;
    width: 344px;
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 5;
    scrollbar-width: thin;
    scrollbar-color: var(--panel-content-bg) var(--top-bar-bg);
}
#TNotifications { max-height: 480px; }
#TNotificationsM {
    margin: auto;
    width: 100%;
}
#TNotifications ul, #TNotificationsM ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    text-align: left;
}
#TNotifications a, #TNotificationsM a {
    color: var(--panel-content-txt-color) !important;
    text-decoration: none;
}
#TNotifications li, #TNotificationsM li {
    margin: 0;
    padding: 3px;
    padding-right: 24px;
    width: 100%;
    height: auto;
    font-size: 17px;
    line-height: 24px;
    text-align: left;
    border-bottom: 3px solid var(--top-bar-bg);
    transition: background .25s;
}
#TNotificationsM li { margin: 0; line-height: 200%; font-size: 1.05rem; }
#TNotifications li:hover, #TNotificationsM li:hover {
    background: var(--row-hover-color);
}
#TNotifications hr, #TNotificationsM hr { width: 85%; margin: 8px; }

.TNotifSTOTL { float: left; width: 3rem; height: 3rem; margin: 0.3rem; }
.TNotifProductImg { display: flex; position: absolute; left: 0; margin-left: 5px; overflow: hidden; justify-content: center; align-items: center; width: 3rem; height: 3rem; background-color: #fff; border-radius: 8px; filter: var(--image-brightness); }
.TNotifProductImg img { max-width: 100%; max-height: 100%; }

@media screen and (max-width: 960px) { #Header { height: 358px; } }
@media screen and (max-width: 800px) { #Header { height: 310px; } }
@media screen and (max-width: 640px) { #Header { height: 272px; } }
@media screen and (max-width: 480px) { #Header { height: 224px; } }

@media (max-width: 1250px) {
    .DVO { display: none !important; }
    #Top { position: fixed; top: 0px; }
    #TopRight { font-size: 24px; }
    #Head { position: fixed; top: 48px; }
    #Header { transition: height 1s; }
    /* #Header { height: 224px; transition: height 1s; } */
    #HeadLeft { width: 64px; }
    #HeadRight { width: 80%; }
    body {
        background: var(--background);
        background-position: 0, 0, center;
        background-repeat: no-repeat, no-repeat, repeat-y;
        background-size: 0, 0, 100% auto;
        background-color: var(--bgcolor);
    }
    #Background1 { background-position-y: 64px; background-size: 150%; }
    #Background2 { background-position: bottom; background-size: 150%; margin-top: calc(-925px + 16vw); } 
    .SearchInput { width: 200px; }

    .icona-container { width: 1.75em; }
    #TSearchResults { margin-left: 16px; }
}
@media screen and (min-width: 1251px) {
    .MVO { display: none !important; }
    #Top { position: fixed; top: 0px; }
    #Head { position: fixed; top: 48px; }
    #Background1 { background-position-y: 64px; }
    .sbsel, .sbsel50 { float: left; width: 48.5%; }
    .sbsel20 { float: left; width: 19.5%; }
    .sbsel25 { float: left; width: 24.5%; }
	.sbsel30 { float: left; width: 28.5%; }
	.sbsel35 { float: left; width: 33.5%; }
	.sbsel40 { float: left; width: 38.5%; }
	.sbsel60 { float: left; width: 58.5%; }
	.sbsel70 { float: left; width: 68.5%; }
	.sbsel75 { float: left; width: 73.5%; }
	.sbser, .sbser50 { float: right; width: 48.5%; }
	.sbser25 { float: right; width: 23.5%; }
	.sbser30 { float: right; width: 28.5%; }
	.sbser35 { float: right; width: 33.5%; }
	.sbser40 { float: right; width: 38.5%; }
	.sbser60 { float: right; width: 58.5%; }
	.sbser70 { float: right; width: 68.5%; }
	.sbser75 { float: right; width: 74.5%; }
	.sbser80 { float: right; width: 79.5%; }

    .icona-container { width: 2em; }
}

/* shop new */
/* gallery */
.ProductsGallery { display: flex; justify-content: space-around; flex-flow: row wrap; width: 100%; max-width: 100%; }
.ProductsGallery > .Product { position: relative; width: 10rem; border: 1px solid var(--panel-border-color); border-radius: 8px; margin: 0.25rem; text-decoration: none !important; overflow: hidden; transition: border 1s; }
.ProductsGallery .ProductImage { position: relative; display: flex; overflow: hidden; justify-content: center; align-items: center; width: 10rem; height: 10rem; background-color: #fff; border-bottom: 1px solid var(--panel-border-color); border-top-left-radius: 8px; border-top-right-radius: 8px; filter: var(--image-brightness); transition: all 1s; }
.ProductsGallery .ProductImage img { max-width: 100%; max-height: 100%; }
/* .ProductsGallery > .Product:hover > .ProductImage img { max-width: 135%; max-height: 135%; } */
.ProductsGallery > .Product > .ProductName { display: block; padding: 0.25rem; max-height: 3.1rem; line-height: 1.1rem; font-size: 1rem; font-weight: bold; color: var(--panel-content-txt-color); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ProductsGallery > .Product > .ProductPrice { display: block; left: 0; right: 0; padding: 0.5rem; background: var(--panel-head-bg); color: var(--panel-head-txt-color); text-align: right; transition: background 1s; }
.ProductsGallery > .Product > .ProductCategory { padding: 0.25rem; font-size: 0.8rem; color: var(--panel-content-txt-color); }
.ProductsGallery > .Product > .ProductLabels { display: flex; justify-content: flex-start; flex-flow: row wrap; }
/* gallery big */
.ProductsBigGallery { display: flex; justify-content: space-around; flex-flow: row wrap; width: 100%; max-width: 100%; }
.ProductsBigGallery > .Product { position: relative; width: 18.5rem; border: 1px solid var(--panel-border-color); border-radius: 8px; margin: 0.25rem; text-decoration: none !important; overflow: hidden; transition: border 1s; }
.ProductsBigGallery .ProductImage { position: relative; display: flex; overflow: hidden; justify-content: center; align-items: center; width: 18.5rem; height: 18.5rem; background-color: #fff; border-bottom: 1px solid var(--panel-border-color); border-top-left-radius: 8px; border-top-right-radius: 8px; filter: var(--image-brightness); transition: all 1s; }
.ProductsBigGallery .ProductImage img { max-width: 100%; max-height: 100%; }
/* .ProductsBigGallery > .Product:hover > .ProductImage img { max-width: 135%; max-height: 135%; } */
.ProductsBigGallery > .Product > .ProductName { display: block; padding: 0.25rem; max-height: 3.1rem; line-height: 1.1rem; font-size: 1rem; font-weight: bold; color: var(--panel-content-txt-color); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ProductsBigGallery > .Product > .ProductPrice { display: block; left: 0; right: 0; padding: 0.5rem; background: var(--panel-head-bg); color: var(--panel-head-txt-color); text-align: right; transition: background 1s; }
.ProductsBigGallery > .Product > .ProductCategory { padding: 0.25rem; font-size: 0.8rem; color: var(--panel-content-txt-color); }
.ProductsBigGallery > .Product > .ProductLabels { display: flex; justify-content: flex-start; flex-flow: row wrap; }
/* list */
.ProductsList { display: block; justify-content: space-around; width: 100%; max-width: 100%; }
.ProductsList > .Product { position: relative; display: block; height: 10rem; border: 1px solid var(--panel-border-color); border-radius: 8px; margin: 0.5rem; text-decoration: none !important; overflow: hidden; transition: border 1s; }
.ProductsList .ProductImage { position: relative; display: flex; overflow: hidden; justify-content: center; align-items: center; float: left; width: 10rem; height: 10rem; background-color: #fff; border-bottom: 1px solid var(--panel-border-color); border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.ProductsList .ProductImage img { max-width: 100%; max-height: 100%; }
.ProductsList > .Product > .ProductName { display: block; padding: 0.25rem; max-height: 2rem; line-height: 1.1rem; font-size: 1rem; font-weight: bold; color: var(--panel-content-txt-color); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ProductsList > .Product > .ProductCategory { padding: 0.25rem; font-size: 0.8rem; color: var(--panel-content-txt-color); }
.ProductCON { display: block; margin: 0.5rem; margin-top: -1rem; border: 1px solid var(--panel-border-color); border-top: 0; border-radius: 8px; border-top-left-radius: 0; border-top-right-radius: 0; color: var(--panel-content-txt-color); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 1250px) {
    .ProductsList > .Product > .ProductPrice { position: absolute; display: inline-block; bottom: 0; right: 0; padding: 0.5rem; font-size: 0.8rem; background: var(--panel-head-bg); color: var(--panel-head-txt-color); text-align: right; border-top-left-radius: 8px; transition: background 1s; }
    .ProductsList > .Product > .ProductLabels { display: flex; justify-content: flex-start; flex-flow: row wrap; font-size: 0.6rem; }
    .ProductCON { padding: 0.25rem; padding-top: 0.75rem; max-height: 1.2rem; line-height: 0.7rem; font-size: 0.6rem; }
}
@media screen and (min-width: 1251px) {
    .ProductsList > .Product > .ProductPrice { position: absolute; display: inline-block; bottom: 0; right: 0; padding: 0.5rem; font-size: 1rem; background: var(--panel-head-bg); color: var(--panel-head-txt-color); text-align: right; border-top-left-radius: 8px; transition: background 1s; }
    .ProductsList > .Product > .ProductLabels { display: flex; justify-content: flex-start; flex-flow: row wrap; font-size: 1rem; }
    .ProductCON { padding: 0.5rem; padding-top: 0.75rem; max-height: 1.8rem; line-height: 1.1rem; font-size: 1rem; }
}
@media screen and (max-width: 375px) {
    .ProductsGallery > .Product { width: 9rem; }
    .ProductsGallery .ProductImage { width: 9rem; height: 9rem; }
    .ProductsList > .Product { width: 9rem; }
}
/* */
.Product:hover { outline: 1px solid var(--navi-link-color); }
/*.Product:hover .ProductImage { align-items: baseline; }
.Product:hover .ProductImage img { max-width: 200%; max-height: 200%; } */
.ProductBM { position: absolute; right: 0.25rem; top: 0.25rem; display: block; padding: 0.125rem; width: 1.75rem; height: 1.75rem; color: var(--panel-content-txt-color); font-size: 1.25rem; text-align: center; text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff; transition: font-size 0.1s, color 1s; }
.ProductBM:target { font-size: 1.25rem; }
.ProductBM:hover { font-size: 1.5rem; }
.ProductBMO { position: absolute; left: 0.25rem; bottom: 0.25rem; display: block; padding: 0.125rem; width: 1.75rem; height: 1.75rem; color: var(--panel-content-txt-color); font-size: 1.25rem; text-align: center; text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff; }
.ProductISC { position: absolute; right: 0.25rem; bottom: 0.25rem; display: block; padding: 0.125rem; width: 1.75rem; height: 1.75rem; color: var(--red); font-size: 1.25rem; text-align: center; text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff; }
.ProductStock { height: 1rem; background: black; }

.ProductLabels span { display: inline-block; background: var(--panel-head-bg); color: var(--panel-head-txt-color); margin: 0.2rem; padding: 0.4rem; border-radius: 8px; transition: background 1s, color 1s; }
.ProductStock { position: absolute; display: block; left: 0; top: 0; height: 0.7rem; padding: 0.2rem; background: var(--panel-head-bg); color: var(--panel-head-txt-color); font-size: 0.7rem; line-height: 0.7rem; border-bottom-right-radius: 8px; }
.ProductStockIS { background-color: var(--green); }
.ProductStockPO { background-color: var(--blue); }
.ProductStockOOS { background-color: var(--red); }
.ProductNAInfo { position: absolute; display: block; left: 0; top: 5rem; width: 100%; height: 1.2rem; background-color: #000; padding: 0.2rem; color: #fff; font-size: 0.7rem; line-height: 1.2rem; text-align: center; }
.ProductPageBM { text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff; }
/*











*/

/* Copyright 2005, 2006 - 2024 www.tsoto.net / team tsoto / Joey Jerome Smith */
/* HI WIE GEHTS? :) */
#Overlay { position: relative; left: 0px; top: 0px; width: 100%; height: 100%; }
#CookInfo { position: fixed; bottom: 0px; left: 0px; width: 100%; box-sizing: border-box; z-index: 100; background: url(/images_2/theme/tblack.png); color: #b1b1b1; font-size: 120%; padding: 12px; }
#CookInfo a { color: #ffffff; }
/* bbcodes */
.bbcode { margin: 3px; vertical-align: middle; }
.bbcode { height: 16px; width: 16px; display: inline-block; background: url(/images/button.png); background-position: bottom; color: #333333; font-weight: bold; cursor: pointer; padding: 4px; border-left: 1px solid #dcdcdc; border-right: 1px solid #dadada; border-top: 1px solid #dcdcdc; border-bottom: 1px solid #b3b3b3; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
.bbcode:hover { background: url(/images/button_hover.png); padding: 4px; }
.bbcode:focus { background: url(/images/button_pressed.png); padding: 4px; }
.imgbb { border: 0px; max-width: min(100%, 600px); max-height: min(100%, 400px); }
.quote > .imgbb { max-width: 160px; }
.important { padding: 8px; background: var(--important-bg); border-left: 4px solid var(--important-border); border-radius: 4px; outline: 1px solid var(--important-outline); transition: all 1s; }
.important-blue { padding: 8px; background: var(--notice-bg); border-left: 4px solid var(--notice-blue); border-radius: 4px; outline: 1px solid var(--notice-outline); transition: all 1s; }
.spoiler { background: #000000; color: #000000; display: inline-block; border: 1px solid #cccccc; }
.spoiler:hover { background: inline; color: #ffffff; }
.spoiler a { color: #000000; }
.spoiler:hover a { color: #ffffff; }
.emoticon { vertical-align: middle; }
.vplayer { margin: auto; width: 640px; max-width: min(100%, 640px); background: #000000; }
.vplayer a { display: inline-block; margin: auto; width: 640px; max-width: min(100%, 640px); background: url(/images/other/play.png) center no-repeat; }
.youtube a { height: 360px; max-height: min(100%, 360px); }
.vine a { height: 640px; max-height: min(100%, 640px); }
.vplayer a:hover { background: url(/images/other/play_hover.png) center no-repeat; }
.vplayer img { width: 640px; max-width: min(100%, 640px); }
.youtube img { height: 360px; max-height: min(100%, 360px); }
.vine img { height: 640px; max-height: min(100%, 640px); }
/* theme */
#upper { width: 998px; height: 40px; margin: auto; background: url(/images_2/theme/tblack.png); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; }
#upper_inner { width: 980px; height: 32px; margin: auto; background: #2c2c2c; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; }
#upper_right { float: right; margin-right: 8px; color: #b1b1b1; }
#upper_right a { color: #ffffff; font-weight: bold; text-decoration: none; }
.upper_right { position: relative; float: right; height: 32px; margin-left: 8px; padding-left: 8px; padding-right: 8px; padding-top: 2px; z-index: 4; }
.upper_right_hovered { position: relative; float: right; height: 30px; margin-left: 8px; padding-left: 8px; padding-right: 8px; padding-top: 2px; padding-bottom: 8px; background: #030b18; cursor: pointer; z-index: 4; border-top-left-radius: 8px; border-top-right-radius: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; }
#upper_left { float: left; height: 32px; margin-left: 8px; color: #b1b1b1; }
#upper_left a { color: #ffffff; font-weight: bold;  text-decoration: none; }
.upper_left { position: relative; height: 30px; float: left; margin-right: 8px; padding-left: 8px; padding-right: 8px; padding-top: 2px; z-index: 4; }
.upper_left_hovered { position: relative; height: 30px; float: left; margin-right: 8px; padding-left: 8px; padding-right: 8px; padding-top: 2px; padding-bottom: 8px; background: #030b18; cursor: pointer; z-index: 4; border-top-left-radius: 8px; border-top-right-radius: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; }
.upper_right_nli { position: relative; float: right; padding-right: 8px; padding-top: 1px; color: #b1b1b1; z-index: 4; }
.upper_left_nli { position: relative; float: left; padding-left: 8px; padding-top: 1px; color: #b1b1b1; z-index: 4; }
.upper_left_nli a { color: #ffffff; font-weight: bold;  text-decoration: none; }
#header { width: 998px; height: 190px; margin: auto; }
#pm_menu { position: absolute; padding: 8px; padding-top: 0px; background: url(/images_2/theme/tblack.png); display: none; z-index: 4; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; }
#pm_menu div { background: #ffffff; }
#pm_menu ul { margin: 0px; padding: 8px; list-style: none; display: block; line-height: 12px; }
#pm_menu a { padding: 4px; text-decoration: none; display: block; }
#pm_menu a:hover { text-decoration: underline; }
#pm_menu hr { width: 90%; background: #f0f0f0; }
#mytsoto_menu { position: absolute; padding: 8px; padding-top: 0px; background: url(/images_2/theme/tblack.png); display: none; z-index: 4; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; }
#mytsoto_menu div { background: #ffffff; }
#mytsoto_menu ul { margin: 0px; padding: 8px; list-style: none; display: block; }
#mytsoto_menu a { padding: 4px; text-decoration: none; display: block; line-height: 12px; }
#mytsoto_menu a:hover { text-decoration: underline; }
#mytsoto_menu hr { width: 90%; background: #f0f0f0; }
#cart_overview { position: absolute; padding: 8px; padding-top: 0px; background: url(/images_2/theme/tblack.png); display: none; z-index: 4; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; }
#Social { width: 190px; padding: 8px; margin-right: 24px; margin-top: 36px; position: relative; float: right; background: url(/images_2/theme/tblack.png); color: #b1b1b1; font-family: Verdana, "DejaVu Sans", Geneva, sans-serif; font-size: 10px; text-align: center; z-index: 2; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; }
#Links ul { margin: 0px; padding: 0px; width: 100%; list-style: none; }
#Links li { display: block; width: 100%; line-height: 31px; font-weight: bold; }
#Links a { text-decoration: none; display: block; padding: 4px; line-height: 31px; }
#Links a:hover { background: rgba(55, 55, 255, 0.125); }
/* tables */
.table { background: #000000; padding: 0px; }
.table_1 { background: #000000; padding: 0px; }
.table_head { padding: 4px; background: var(--panel-head-bg); background-position: bottom; color: var(--panel-head-txt-color); }
.table_head a, .table_head a:visited { color: var(--panel-head-txt-color); text-decoration: none;}
.table_head_link, .table_head_link:visited { color: var(--panel-head-txt-color); text-decoration: none; }
.table_head_link:hover { color: #ffffff; text-decoration: underline; }
.table_body { background: rgba(0, 0, 0, 0.24); background-repeat: repeat-x; background-color: var(--panel-content-bg); color: var(--panel-content-txt-color); padding: 4px; }
.table_body a, .table_body a:visited { color: var(--panel-content-txt-color); text-decoration: underline; }
.table_body a:hover { color: #0066aa; text-decoration: none; }
.table, .table_head, .table_body { transition: background 1s, color 1s; }
.bbctbl { width: 100%; }
.bbctbl th { color: var(--panel-head-txt-color); background: var(--panel-head-bg); }
/* autocomplete */
#ACResults { background: #ffffff; min-width: 125px; max-width: 500px; max-height: 300px; overflow-y: auto; border: 1px solid #828777; }
#ACResults ul { list-style: none; margin: 0px; padding: 0px; }
#ACResults li { font-size: 13px; display: block; }
#ACResults a { display: block; text-decoration: none; padding: 8px; }
#ACResults a:hover { background: #dddddd; }
#ACResults span { padding: 4px; font-style: italic; }
/* database */
.hnavigation { background: url(/images_2/theme/panel_head.png); height: 28px; margin: auto; overflow: hidden; border-left: 1px solid #b1b1b1; border-bottom: 1px solid #999999; border-right: 1px solid #b1b1b1; border-bottom-left-radius: 8px;  -moz-border-radius-bottomleft: 8px;  -webkit-border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; }
.hnavigation ul { margin: 0px; padding: 0px; list-style: none; display: block; }
.hnavigation li { padding-left: 14px; padding-right: 14px; color: #575757; font-family: Verdana, "DejaVu Sans", Geneva, sans-serif; font-size: 11px; font-weight: bold; text-align: center; text-decoration: none; display: block; float: left; line-height: 28px; border-right: 1px solid #999999; display: block; float: left; }
.hnavigation li:last-child { border-right: 0px; }
.hnavigation a { color: #bbbbbb; font-family: Verdana, "DejaVu Sans", Geneva, sans-serif; font-size: 11px; font-weight: bold; text-align: center; text-decoration: none; display: block; float: left; line-height: 28px; }
.hnavigation a:hover { color: #ffffff; }
.hnavigation .current { background: #ffffff; color: #000000; }
.hnavigations { background: url(/images_2/theme/panel_head.png); height: 28px; margin: auto; overflow: hidden; border-left: 1px solid #b1b1b1; border-bottom: 1px solid #999999; border-right: 1px solid #b1b1b1; border-bottom-left-radius: 8px;  -moz-border-radius-bottomleft: 8px;  -webkit-border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; }
.hnavigations ul { margin: 0px; padding: 0px; list-style: none; display: block; }
.hnavigations li { padding-left: 0px; padding-right: 0px; color: #575757; font-family: Verdana, "DejaVu Sans", Geneva, sans-serif; font-size: 11px; font-weight: bold; text-align: center; text-decoration: none; display: block; float: left; line-height: 28px; border-right: 1px solid #999999; display: block; float: left; }
.hnavigations li:last-child { border-right: 0px; }
.hnavigations a { padding-left: 11px; padding-right: 11px; color: #bbbbbb; font-family: Verdana, "DejaVu Sans", Geneva, sans-serif; font-size: 11px; font-weight: bold; text-align: center; text-decoration: none; display: block; float: left; line-height: 28px; }
.hnavigations a:hover { color: #ffffff; }
.hnavigations .desc { padding-left: 14px; padding-right: 12px; background: #ffffff; color: #000000; }
.gallery_thumbnail { border: 2px solid #dddddd; }
.gallery_thumbnail a { text-decoration: none; }
.gallery_thumbnail div { background: #ffffff; margin-top: -32px; padding: 1px; }
.gallery_thumbnail:hover { border: 2px solid #909aaa; }
.scflags { width: 48px; }
.scflags option { padding-left: 24px; }

#Markings { margin: -0.5rem; margin-bottom: 4px; padding: 0px; display: block; }
#Markings ul { margin: 0px; padding: 0px; list-style: none; display: block; height: 28px; border-bottom: 1px solid #999999; }
#Markings ul li { background: url(//www.tsoto.net/images_2/theme/navigation.png); }
#Markings ul li:first-child a { padding-left: 24px; padding-right: 12px; background: url(/images/icons/fav_unmarked.png); background-position: 6px 6px; background-repeat: no-repeat; float: right; border-left: 1px solid #999999; border-right: 0px; }
#Markings ul li:first-child .favd { color: #000000; background: url(/images/icons/fav_marked.png); background-position: 6px 6px; background-repeat: no-repeat; }
#Markings ul li .note { color: #000000; padding-left: 24px; padding-right: 12px; background: url(/images/icons/post.png); background-position: 6px 6px; background-repeat: no-repeat; float: right; border-left: 1px solid #999999; border-right: 0px; }
#Markings ul .unmarkd { display: none; }
#Markings ul li .mark { color: #000000; text-decoration: none; background: none; padding-left: 12px; }
#Markings ul li .noted { color: #000000; padding-left: 24px; padding-right: 12px; background: url(/images/icons/post.png); background-position: 6px 6px; background-repeat: no-repeat; float: right; border-left: 1px solid #999999; border-right: 0px; }
#Markings ul li .noted { color: #000000; background: url(/images/icons/post.png); background-position: 6px 6px; background-repeat: no-repeat; }
#Markings a { line-height: 28px; color: #999999; background: url(/images/icons/marking.png); background-position: 6px 6px; background-repeat: no-repeat; padding-left: 24px; padding-right: 12px; float: left; border-right: 1px solid #999999; border-left: 0px; cursor: pointer; }
#Markings .markd { color: #000000; background: url(/images/icons/mark.png); background-position: 6px 6px; background-repeat: no-repeat; }
.Markings { margin: 0px; padding: 0px; display: block; }
.Markings ul { margin: 0px; padding: 0px; list-style: none; display: block; width: 100%; min-width: 320px; }
.Markings ul li { border-bottom: 1px solid #999999; display: block; }
.Markings ul li:last-child { border: 0px; }
.Markings ul li .mark { color: #000000; text-decoration: none; }
.Markings a { width: 100%; line-height: 28px; color: #999999; background: url(/images/icons/marking.png); background-position: 6px 6px; background-repeat: no-repeat; padding-left: 24px; padding-right: -24px; display: block; cursor: pointer; text-decoration: none; }
.Markings .markd { color: #000000; background: url(/images/icons/mark.png); background-position: 6px 6px; background-repeat: no-repeat; }

.InfoTable, .info-table { width: 100%; }
.InfoTable, .info-table td { border: 1px solid var(--panel-border-color); }
.InfoTableLine, .info-table-line { padding: 2px; line-height: 120%; border-bottom: 1px solid var(--panel-border-color); }
.InfoTableLine, .info-table-line:last-child { padding: 2px; line-height: 120%; border: 0px; }

.relation { margin-top: -1px; height: 160%; line-height: 160%; }
.rell { background: url(//www.tsoto.net/images/other/rell.gif) 0px 0px no-repeat; padding-left: 16px; }
.relm { background: url(//www.tsoto.net/images/other/relm.gif) 0px 0px no-repeat; padding-left: 16px; }
.relp { background: url(//www.tsoto.net/images/other/rell.gif) 0px 0px no-repeat; padding-left: 16px; }
.rel1 { margin-left: 17px; }
.rel2 { margin-left: 34px; }
.rel3 { margin-left: 51px; }
.rel4 { margin-left: 68px; }
.rel5 { margin-left: 85px; }
.rel6 { margin-left: 102px; }
.rel7 { margin-left: 119px; }
.rel8 { margin-left: 136px; }
.rel9 { margin-left: 153px; }
#TriviaList { list-style: square; margin: 0px; padding: 0px; padding-left: 16px; }

/* shop */
#shop_navigation ul { margin: -6px; padding: 0px; list-style: none; display: block; }
#shop_navigation a { padding: 6px; text-decoration: none; display: block; border-radius: 4px; }
#shop_navigation a:hover { background: rgba(55, 55, 255, 0.125); color: var(--panel-content-txt-color); text-decoration: none; }
#shop_navigation ul ul { margin: 0px; padding: 0px; list-style: none; display: block; }
#shop_navigation ul ul a { padding: 4px; padding-left: 12px; font-weight: normal; text-decoration: none; display: block; }
#shop_navigation ul ul ul { margin: 0px; padding: 0px; list-style: none; display: block; }
#shop_navigation ul ul ul a { padding-left: 16px; }
#shop_navigation hr { width: 98%; background: var(--panel-content-txt-color); }
.ShopHeadline { background-color: var(--panel-head-bg); color: var(--panel-head-txt-color); }
.ShopHeadline a { color: var(--panel-head-txt-color) !important; }
.ShopHeadline a:hover { color: var(--panel-head-txt-color) !important; }
#shop_info_navigation ul { margin: 0px; padding: 0px; list-style: none; display: block; }
#shop_info_navigation a { padding: 2px; text-decoration: none; display: block; }
#shop_info_navigation a:hover { background: #d0dfff; text-decoration: underline; }
.shop_article { height: 275px; position: relative; }
.shop_article_title { font-family: Verdana, "DejaVu Sans", Geneva, sans-serif; font-size: 12px; font-weight: bold; }
.shop_article_image { float: left; width: 250px; height: 250px; margin-right: 8px; text-align: center; filter: var(--image-brightness); }
.shop_article_image span { font-size: 10px; }
.shop_article_price { position: absolute; bottom: 0px; right: 8px; text-align: right; }
.shop_article_price .small { font-size: 10px; }
.shop_article_add_to_cart { position: absolute; bottom: 24px; left: 260px; }
.shop_article_stock { position: absolute; bottom: 0px; left: 245px; }
.shop_article_list { height: 125px; position: relative; }
.shop_article_list_name { display: block; margin: 0px; padding: 0px; padding-right: 96px; font-weight: bold;  }
.shop_article_list_image { float: left; width: 125px; height: 125px; margin-right: 8px; text-align: center; }
.shop_article_list_description { margin-left: 125px; }
.shop_article_list_price { position: absolute; right: 0px; bottom: 0px; text-align: right; }
.shop_article_list_price .small { font-size: 10px; }
.shop_article_list_stock { position: absolute; right: 0px; }
.shop_single_article { height: 75px; padding: 4px; position: relative; border: 1px solid #d5d5d5; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; }
.shop_single_article:hover { background: #f5f5f5; }
.shop_single_article_image { float: left; width: 75px; height: 75px; margin-right: 8px; text-align: center; }
.shop_single_article_description { margin-left: 75px; }
.shop_single_article_add_to_cart { position: absolute; top: 4px; right: 8px; text-align: right; }
.shop_single_article_price { position: absolute; bottom: 4px; right: 8px; text-align: right; }
.shop_single_article_price span { font-size: 10px; }
.shop_stock { width: 10px; height: 10px; line-height: 10px; padding: 1px; background: #ffffff; border: 1px solid #000000; display: inline-block; }
.shop_in_stock { width: 10px; height: 10px; background: #298267; display: inline-block; }
.shop_preorder { width: 10px; height: 10px; background: #1976d2; display: inline-block; }
.shop_reorder { width: 10px; height: 10px; background: #efd914; display: inline-block; }
.shop_out_of_stock { width: 10px; height: 10px; background: #ed3241; display: inline-block; }
.shop_article_gallery_thumbnail { border: 2px solid #dddddd; filter: var(--image-brightness); }
.shop_article_gallery_thumbnail:hover { border: 2px solid #909aaa; }
.ShopAF { display: inline-block; margin: 2px; padding: 4px; border: 1px solid #aaaaaa; border-radius: 4px; overflow-wrap: break-word; max-width: 100%; }

#ArticleGalleryImage { transition: background 0.25s, filter 1s; filter: var(--image-brightness); }

/* ol m */
#ShopArticle { position: relative; display: block; }
#ShopArticleTitle { font-size: 1.1rem; font-weight: bold; }
.m_ShopAF { display: inline-block; margin: 2px; padding: 4px; border: 1px solid #aaaaaa; border-radius: 4px; }
.m_shop_article { height: 275px; position: relative; }
.m_shop_article_title { font-family: Verdana, "DejaVu Sans", Geneva, sans-serif; font-size: 0.9rem; font-weight: bold; }
.m_shop_article_image { float: left; width: 250px; height: 250px; margin-right: 8px; text-align: center; }
.m_shop_article_image span { font-size: 0.8rem; }
.m_shop_article_price { float: right; position: absolute; bottom: 0px; right: 8px; text-align: right; line-height: 1.1rem; padding: 0; }
.m_shop_article_price .small { font-size: 0.8rem; }
.m_shop_article_add_to_cart { position: relative; bottom: 0px; left: 0px; padding: 0; float: left; }
.m_shop_article_stock { position: absolut; bottom: 4px; right: 4px; z-index: 10; }
.m_shop_article_list { height: 152px; position: relative; }
.m_shop_article_list_name { display: block; margin: 4px; padding: 0; font-weight: bold;  }
.m_shop_article_list_image { float: left; width: 125px; height: 152px; margin-right: 8px; text-align: center; }
.m_shop_article_list_description { margin-left: 125px; width: 500px; }
.m_shop_article_list_price { position: absolute; right: 0; bottom: 0; margin: 4px; padding: 0; text-align: right; }
.m_shop_article_list_price span { font-size: 0.8rem; }
.m_shop_article_list_stock { position: absolute; left: 128px; bottom: 0px; }
.m_shop_single_article { padding: 4px; position: relative; border: 1px solid #d5d5d5; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; }
.m_shop_single_article:hover { background: #f5f5f5; }
.m_shop_single_article_image { float: left; width: 75px; height: 75px; margin-right: 8px; text-align: center; }
.m_shop_single_article_description { margin-left: 75px; }
.m_shop_single_article_add_to_cart {  }
.m_shop_single_article_price { position: absolute; bottom: 4px; right: 8px; text-align: right; }
.m_shop_stock { line-height: 10px; padding: 1px; background: #ffffff; border: 1px solid #000000; display: inline-block; }
.m_shop_in_stock { width: 10px; height: 10px; background: #298267; display: inline-block; }
.m_shop_preorder { width: 10px; height: 10px; background: #1976d2; display: inline-block; }
.m_shop_reorder { width: 10px; height: 10px; background: #efd914; display: inline-block; }
.m_shop_out_of_stock { width: 10px; height: 10px; background: #ed3241; display: inline-block; }
#ShopArticleGallery { position: relative; width: 100%; height: 288px; display: block; overflow: hidden; cursor: grab; }
#ShopArticleGallery:active, #ShopArticleGallery a:active { cursor: grabbing; }
#ShopArticleGalleryBox { width: 100%; height: 288px; display: block; overflow: hidden; position: relative; }
#ShopArticleGallery a { max-width: 100%; height: 288px; max-height: 288px; line-height: 288px; cursor: grab; }
#ShopArticleGallery img { max-width: 100%; max-height: 288px; line-height: 288px; vertical-align: middle; filter: var(--image-brightness); }
#ShopArticleGallery ul { list-style: none; margin: 0; padding: 0; width: 100%; position: relative; }
#ShopArticleGallery li { position: absolute; width: 100%; height: 288px; line-height: 288px; text-align: center; vertical-align: middle; display: block-inline; }
#ShopArticleGallery .AGC { left: 0px; }
#ShopArticleGallery .AGQ { left: 7680px; }
.SPGB { position: absolute; top: 0px; width: 48px; height: 288px; line-height: 288px; color: var(--panel-content-txt-color) !important; text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff; text-align: center; vertical-align: middle; background: transparent !important; opacity: 0.5; }
.SPGB:hover { background: transparent !important; color: var(--panel-content-txt-color) !important; cursor: pointer !important; }
.SPGBL { left: 0px; }
.SPGBR { right: 0px; }
#ShopCartButtons { margin: 0; padding: 8px; position: fixed; bottom: 0px; left: 0px; width: 100%; background: #ffffff; border-top: 1px solid #000000; z-index: 4; }
/* general */
.Navigation span { padding-top: 8px; }
.Navigation ul { margin: 0px; padding: 0px; list-style: none; }
.Navigation li { display: block; line-height: 200%; font-size: 1.05rem; }
.Navigation a { text-decoration: none; display: block; line-height: 200%; color: var(--panel-content-txt-color); }
.Navigation a:hover { background: rgba(0, 0, 0, 0.24); color: var(--panel-content-txt-color); }
.agecheck { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: #000000; z-index: 2147483647; } /* itz over 9000000...0000 */
.agecheck div { position: relative; left: 50%; top: 50%; width: 450px; margin-left: -225px; margin-top: -60px; color: #ffffff; text-align: center; } */
.news .news_readmore { display: none; }
.news:hover .news_readmore { display: block; }
.news_shortened { cursor: pointer; width: 652px; max-height: 300px; overflow: hidden; text-overflow: ellipsis; content: ""; position:relative; }
.news_shortened:before { background:linear-gradient(transparent 150px, white); width: 100%; height:100%; content: ""; position: absolute; left: 0px; top: 0px; }
.news_readmore { background: #fefefe; display: none; width: 100%; height: 24px; line-height: 24px; position: absolute; bottom: 12px; font-weight: bold; text-align: center; }
.news-avatar { float: right; margin-top: -4px; margin-right: -4px; padding: 4px; background: #ffffff; border: 0px; text-align: center; }
.news-avatar-avatar { background: #e9e9e9; border: 1px solid #d6d6d6; padding: 4px; }
.notification { height: 54px; margin: 4px; width: 998px; position: fixed; bottom: 4px; left: 50%; margin-left: -499px; font-family: Arial, "Liberation Sans", Helvetica, sans-serif; font-size: 12px; text-align: center; text-shadow: 1px 1px 1px #ffffff; }
.notification_closer { height: 72px; margin: 0; width: 100%; position: fixed; bottom: 0px; left: 0px; z-index: 1000; background: url(/images_2/theme/tblack.png); }
.success { background: url(/images/success.gif) top; color: #466a06; border: 1px solid #b4da95; z-index: 1003; }
.error { background: url(/images/error.gif) top; color: #c22e06; border: 1px solid #e18d9a; z-index: 1002; }
.close { cursor: pointer; float: right; position: absolute; right: 0px; top: 0px; height: 12px; width: 12px; margin-right: 8px; margin-top: 4px; font-size: 16px; text-shadow: 0px; }
.black_captcha { background: #999999; color: #000000; font-weight: bold; font-size: 16px; }
.blue_captcha { background: #000055; color: #9999ff; font-weight: bold; font-size: 16px; }
.green_captcha { background: #005500; color: #99ff99; font-weight: bold; font-size: 16px; }
.red_captcha { background: #550000; color: #ff9999; font-weight: bold; font-size: 16px; }
.white_captcha { color: #ffffff; font-weight: bold; font-size: 16px; }
.notepad { background: #ffffff; border: 1px solid #000000; font-family: Arial, "Liberation Sans", Helvetica, sans-serif; font-size: 13px; height: 384px; width: 600px; }
.mytsoto_links, .mytsoto_links:active, .mytsoto_links:hover, .mytsoto_links:visited { text-decoration: none; }
.code { color: #000000; background: #fefefe; padding: 2px; margin: 0px; border: 1px solid #8a8573; overflow: auto; }
.quote { padding: 8px; background: var(--notice-bg); border-left: 4px solid var(--notice-blue); border-radius: 4px; outline: 1px solid var(--notice-outline); overflow: auto; word-break: normal; word-wrap: break-word; transition: all 1s; }
.quote hr { width: 100%; height: 1px; background: #8a8573; margin-left: 0px; margin-right: 0px; margin-top: 6px; margin-bottom: -6px; padding: 0px; }
#Sitemap, #Sitemap ul { list-style: none; margin: 0px; padding: 0px; }
#Sitemap li { line-height: 20px; }
#Sitemap a { font-weight: bold; }
#Sitemap ul { margin-left: 17px; }
#Sitemap ul li { background: url(/images/other/relm.gif) 0px 0px no-repeat; padding-left: 16px; margin-top: -1px; }
#Sitemap ul li a { font-weight: normal; }
#Sitemap ul li:last-child { background: url(/images/other/rell.gif) 0px 0px no-repeat; }
/* forum */
.forum_search_result { border: 1px solid #aaaaaa; margin: 0px; margin-bottom: 2px; padding: 2px; }

/* forums */
.ForumCategory { padding: 1rem; height: 1.25rem; background: var(--gradient-bg-1); text-decoration: none; border: 1px solid var(--panel-border-color); border-bottom: 1px solid #454545; border-top: 0; }
.ForumCategory a, .ForumCategory { color: var(--link-color) !important; }
.ForumCategoryName { font-weight: bold; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis; }
.ForumCategoryDesc { border-radius: 0 !important; }
.ForumThread { color: var(--panel-content-txt-color); padding: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; background: var(--gradient-bg-1); text-decoration: none; border: 1px solid var(--panel-border-color); border-bottom: 1px solid #454545; transition: background 1s; }
.ForumThreadReplies { margin-top: -6px; }
.ForumThreadSubject { font-weight: bold; padding-right: 1rem; line-height: 1.25rem; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis; }
.ForumThreadAuthor { font-style: italic; margin-top: -0.2rem; line-height: 1.25rem; }
.ForumThreadLast { color: #ffffff; padding: 0.25rem; padding-left: 0.5rem; height: 2rem; line-height: 2rem; background: #454545; text-decoration: none; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis; }
.ForumCategory:hover, .ForumThread:hover { background: var(--gradient-bg-1-hover); }
.ForumPostInfos { margin: 0; padding: 0.5rem; background: #454545; color: #ffffff; border-top: 1px solid #333333; border-bottom: 1px solid #dddddd; }
.ForumPostInfos a { color: #ffffff; text-decoration: none; }
.ForumPostDate { float: right; text-align: right; line-height: 1.3rem; }
.ForumPostAvatarContainer { width: 2.5rem; height: 2.5rem; line-height: 4.1rem; display: block; float: left; margin-right: 0.3rem; text-align: center; }
.ForumPostAvatar { max-width: 2.5rem; max-height: 2.5rem; margin: auto; }
.ForumPostNoAvatar { width: 2.5rem; height: 2.5rem; line-height: 3.3rem; display: block; float: left; margin-right: 0.3rem; text-align: center; font-size: 1.75rem; }
.ForumPostUsername { display: inline-block; vertical-align: top; line-height: 1.3rem; height: 2.6rem; }
.ForumPostContent { margin: 0; padding: 0.5rem; background: var(--panel-content-bg); overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; } /* hyphens: auto; */
.ForumPostEdits {  background: var(--panel-content-bg); border-top: 1px solid #dddddd; padding: 0.5rem; }
.ForumPostSignature {  background: var(--panel-content-bg); border-top: 1px solid #dddddd; padding: 0.5rem; }
.ForumPostActions { padding: 0.5em; background: var(--secondary-bg-color); border-top: 1px solid #dddddd; text-align: right; }
.ForumPostActions button, .ForumPostActions .button { min-width: 1.5rem; height: 2rem; line-height: 2rem; text-align: center; vertical-align: middle; color: #ffffff; text-shadow: 1px 1px #000000; font-size: 0.9rem; border-radius: 1; }
.ForumReply { display: block; width: 100%; }
.ForumReply textarea { min-height: 12rem; }
.ForumReplyTitle { padding: 0.5rem; background: #454545; color: #ffffff; border-bottom: 1px solid #dddddd; }
.ForumReplyInfo { padding: 0.5rem; }
.ForumReplyButtons { padding: 0.5rem; }
.ForumSearchResult { border: 1px solid #aaaaaa; margin: 0; margin-bottom: 1rem; padding: 0.25rem; }

/* */
/* #Shoutbox { min-height: 950px; } */

/* FAQ */
.FAQCategory { padding: 1rem; height: 1.25rem; background: var(--gradient-bg-1); text-decoration: none; border: 1px solid var(--panel-border-color); border-bottom: 1px solid #454545; }
.FAQCategoryName { font-weight: bold; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis; }

/* profiles */
#ProfileNavigation { margin: 0px; padding: 0px; display: block; background: url(/images_2/theme/navigation.png); border-left: 1px solid #000000; border-right: 1px solid #000000; }
#ProfileNavigation ul { margin: 0px; padding: 0px; list-style: none; display: block; height: 28px; }
#ProfileNavigation ul li a { width: 83px; line-height: 28px; color: #555555; text-align: center; text-decoration: none; float: left; border-right: 1px solid #000000; border-left: 0px; cursor: pointer; }
#ProfileNavigation ul li a:hover { color: #000000; }
#ProfileNavigation ul li:first-child a { width: 84px; }
#ProfileNavigation ul li:last-child a { width: 84px; border-right: 0px; }
#ProfileNavigation .current { background: #ffffff; color: #000000; font-weight: bold; cursor: default; }
#ProfileFilter { margin: -3px; padding: 0px; display: block; background: url(/images_2/theme/navigation.png); border-left: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; }
#ProfileFilter ul { margin: 0px; padding: 0px; list-style: none; display: block; height: 28px; }
#ProfileFilter ul li a { width: 95px; line-height: 28px; color: #555555; text-align: center; text-decoration: none; float: left; border-right: 1px solid #000000; border-left: 0px; cursor: pointer; }
#ProfileFilter ul li a:hover { color: #000000; }
#ProfileFilter ul li:first-child a { width: 96px; }
#ProfileFilter ul li:last-child a { width: 96px; border-right: 0px; }
#ProfileFilter .current { background: #ffffff; color: #000000; font-weight: bold; cursor: default; }

/* items */
.ProfileInventory { display: flex; justify-content: space-around; width: 100%; max-width: 100%; flex-flow: wrap; }
.InventoryItem { border: 1px solid var(--panel-border-color); border-radius: 8px; width: 9rem; height: 11rem; text-align: center; margin: 0.25rem; padding: 0.25rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.InventoryItem img { max-width: 9rem; max-height: 9rem; }
.InventoryItem:hover { background-color: var(--row-hover-color) !important; outline: 1px solid var(--navi-link-color); }
/* mytsoto */
.mytsotoNotifications ul { margin: 0px; padding: 0px; list-style: none; }
.mytsotoNotifications li { display: block; font-size: 14px; padding: 0px; }
.mytsotoNotifications a { text-decoration: none; display: block; line-height: 20px; padding: 4px; }
.mytsotoNotifications a:hover { background: rgba(0, 0, 0, 0.24); }
#mytsoto_files { width: 100%; margin: auto; margin-left: 8px; }
#mytsoto_files ul { margin: 0px; padding: 0px; list-style: none; }
#mytsoto_files li { display: inline-block; margin: 6px; padding: 6px; width: 128px; text-align: center; vertical-align: top; }
#mytsoto_files li:hover, #mytsoto_files li.selected { margin: 5px; background: rgba(0, 0, 0, 0.24); border: 1px solid #d0dfff; border-radius: 4px; }
#mytsoto_files li a { display: block; color: var(--link-color); text-decoration: none; cursor: default; }
#mytsoto_files li span { display: block; width: 128px; margin-top: 5px; font-size: 12px; text-align: center; word-break: normal; word-wrap: break-word; }
#FilesContextMenu { color: #ffffff; background: #212121; border: 1px solid #d6d6d6; }
#FilesContextMenu div { padding: 4px; color: #ffffff; font-size: 14px; font-weight: bold; }
#FilesContextMenu ul { list-style: none; margin: 0px; padding: 0px; border-top: 1px solid #d6d6d6; }
#FilesContextMenu ul li { margin: 0px; background: var(--panel-content-bg); }
#FilesContextMenu ul li a { color: var(--link-color); display: block; text-decoration: none; padding: 4px; }
#FilesContextMenu ul li a:hover { background: rgba(55, 55, 255, 0.125); color: var(--link-color); }
#FilesContextMenu ul li a img { margin-top: -4px; vertical-align: middle; }
#FilesFixedMenu { margin: auto; background: url(/images/files/fixed_menu.png); position: fixed; width: 100%; max-width: min(100%, 978px); height: 30px; bottom: 0; right: 0; z-index: 10; border: 1px solid #000000; }
#FilesFixedMenu span { float: left; line-height: 30px; color: #333333; font-weight: bold; padding-left: 8px; }
#FilesFixedMenu ul { list-style: none; margin: 0px; padding: 0px; }
#FilesFixedMenu ul li { margin: 0px; }
#FilesFixedMenu ul li a { display: block; float: right; padding-left: 16px; padding-right: 16px; color: var(--link-color); line-height: 30px; cursor: pointer; border-left: 1px solid #aaaaaa; }
#FilesFixedMenu ul li a:hover { background: rgba(55, 55, 255, 0.125); color: var(--link-color); }
/* webservices */
.ws_smiley_set_preview { margin: auto; float: left; padding: 5px; width: 215px; height: 40px; text-align: center; display: block; cursor: default; }
.ws_smiley_set_preview:hover { background: #f0f0f0; }

/* forms */
#PreviewContainer { list-style: none; padding: 0; margin-top: 10px; }
.PreviewItem { display: flex; flex-direction: column; align-items: flex-start; background: var(--panel-head-bg); border-radius: 8px; padding: 8px; margin-bottom: 5px; border: 1px solid var(--panel-border-color); cursor: grab; transition: transform 0.2s ease, opacity 0.2s ease; }
.Dragging { opacity: 0.5; transform: scale(1.05); }
.PreviewHeader { display: flex; align-items: center; width: 100%; cursor: grab; }
.ThumbnailContainer { position: relative; width: 60px; height: 60px; margin-right: 10px; display: flex; justify-content: center; align-items: center; background: transparent; border: none; flex-shrink: 0; }
.ThumbnailImage { width: 60px; height: 60px; object-fit: cover; border-radius: 5px; border: none; display: block; }
.OverlayIcon { position: absolute; top: 0; left: 0; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; font-size: 24px; color: white; background: rgba(0, 0, 0, 0.5); pointer-events: none; }
.PreviewText { text-align: right; flex-grow: 1; font-size: 14px; color: var(--panel-head-txt-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 1rem; }
.RemoveBtn { background: none; border: none; font-size: 18px; cursor: pointer; }
.VideoPreview, .AudioPreview { width: 100%; display: none; margin-top: 5px; border-radius: 5px; }
/* support form */
.SFormButton { padding: 1rem; height: 1.25rem; background: var(--gradient-bg-1); text-decoration: none !important; border: 1px solid var(--panel-border-color); border-bottom: 1px solid #454545; border-top: 0; }
.SFormButton a, .SFormButton { color: var(--link-color) !important; text-decoration: none !important; }
.SFormButton { font-weight: bold; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis; }
.SFormDesc { border-radius: 0 !important; }
.SFormButton:hover { background: var(--gradient-bg-1-hover); }