html, body              { margin: 0; padding: 0; height: 100%; min-height: 100%; }
main                    { padding: 0; font-family: arial,helvetica,sans-serif; }

a                       { color: blue; text-decoration: none; }
a:hover                 { color: red; }

header                  { display: flex; flex-direction: column; background: #3256E2; }
.header_flex            { display: flex; align-items: center; background: url(/files/pic/logo.png);  height: 70px; font-size:10pt; }
.header_title           { flex: auto; font-size: 24pt; margin-left: 200px; float: left; color: white !important; background: none !important; }
.header_right           { display: grid; gap: 2px; text-align: right; padding: 0 10px; float: right; background: none !important; }
.header_right a         { color: white !important; text-decoration: none; white-space: nowrap; }
.header_right a:hover   { color: red !important; }

footer                  { display: flex; position: sticky; top: 100%; align-items: center; padding: 3px; color: white; background: #3256E2 !important; border-top: solid #000000; border-top-width: 1px; }
.footer_conf            { flex: auto; text-align: left;  font-size: 75%; }
.footer_main            { flex: auto; text-align: center; }
.footer_orphus          { flex: auto; text-align: right; font-size: 60%; }
footer *                { background: none !important; }
footer a                { color: white !important; text-decoration: none; white-space: nowrap; }
footer a:hover          { color: black !important; }

nav                     { margin: 0; padding: 0; line-height: 0; }
nav ul *:not(input)     { background: none !important; }
nav ul                  { position: relative; width: 100%; display: inline-block; padding: 0; margin: 0; list-style: none; background: url("/files/pic/menu_fon.gif") repeat; font: bold 10pt/normal "Arial", "Verdana"; }
nav ul ul               { position: absolute; width: auto; display: none; padding: 5px 0; background: #e6eff9 !important; border: 1px solid #507eb2; box-shadow: 4px 4px 10px 1px rgba(0, 0, 0, 0.2); font-weight: normal; }
nav ul ul ul            { left: 100%; top: 0; }
nav ul li               { float: left; line-height: 32px; margin: 0; text-align: left; white-space: nowrap; }
nav ul ul li            { position: relative; float: none; line-height: normal; }
nav ul li a             { color: #FFF !important; display: block; padding: 0 20px; text-decoration: none; cursor: default; }
nav ul ul li a          { color: #000 !important; margin: 0 5px; padding: 5px; }
nav ul ul li:hover > a  { color: #00F !important; background: #d7e1f2 !important; }
nav ul li:hover > a     { color: #000 !important; }
nav ul li:hover > ul    { display: block; z-index: 99; }
nav ul ul a.sbm::before { content: "\27A4"; font-size: 80%; position: absolute; transform: translateY(-50%); top: 50%; right: 5px; color: #888; }

#lbm                    { padding: 0 10px; float: left; cursor: default; line-height: 32px; font-size: 1.3em; color: #FFF;  }
#lbm:hover              { color: #000; }
#lbm::before            { content: '\2630'; }
#btm, .hdm              { display: none;  }
#btm:checked~.hdm       { display: block; }
#btm:checked+#lbm       { display: block; }
#btm:checked+#lbm:before{ content: '\00d7'; font-size: 125%; }

#sr_txt                 { width: 80px; }
#sr_txt:focus           { color: blue; width: 40vw; max-width: 250px; }
#sr_rec                 { width: 24px; vertical-align: middle; padding-right: 5px; }
#sr_txt:placeholder-shown+#sr_but { display: none; }


s:empty:before      { content: "\0020\00A9\0020"; color: red; font: 120% bold; vertical-align: middle; }

ul.price_prd        { margin: 0 auto; padding: 0; gap: 35px; display: flex; flex-flow: wrap; justify-content: center; text-align: center; } 
a.price_prd         { margin: 4px 0 10px 0; display: block; color: darkblue; font-size: 1.17em; font-weight: bold; }
li.price_prd        { width: 20%; min-width: 280px; max-width: 480px; padding: 3px; display: flex; background: white; border: 1px solid #C0C0C0; border-radius: 10px !important; box-shadow: 5px 5px 5px rgba(0,0,0,0.5); }
div.price_prd       { width: 100%; padding: 10px; display: flex; flex-flow: column; justify-content: space-between; background: linear-gradient(#EAEAEA, #FFF); border-radius: 7px !important; }
div.price_prd *     { background: none !important; }
div.price_itm       { margin: 10px auto 0 auto; display: flex; justify-content: center; }
div.price_itm span  { margin-right: 20px; color: darkblue; font-weight: bold; }
.my_ul              { margin-left: 0px; padding-left: 15px; list-style-type: disc; text-align: left; font-size: 14px; }
.my_div             { font-weight: bold; }
.my_div2            { margin-top: 7px; margin-bottom: 12px; color: black; font-size: 14px; }
.price_prd img      { max-width: 100%; max-height: 240px; }
a.price_but         { flex: 0.3 0 auto; cursor: pointer; color: #0000bd; background: #f2f8fd !important; border: 1px solid #7cb8e9; border-radius: 6px; padding: 5px; transition: all 0.1s ease-out; }
a.price_but:hover   { background: #dcecf9 !important; color: #0000bd; }

div.about_hdr       { width: 90%; margin: 10px auto; padding: 3px; background: white; border: 1px solid #C0C0C0; border-radius: 10px !important; box-shadow: 5px 5px 5px rgba(0,0,0,0.5); }
div.about_item      { padding: 5px 20px; text-align: left; background: linear-gradient(#EAEAEA, #FFF); border-radius: 7px !important; }
div.about_item *    { background: none !important; }

.spoiler-wrap       { width: 90%; margin: 2px; padding: 2px 0; background: 0px 0px #F4F4F4; border-width: 1px 1px 1px 2px; border-style: solid; border-color: rgb(195, 203, 209); }
.spoiler-head       { width: 95%; padding: 1px 0px 3px 32px; display: inline-block; cursor: pointer; }
.spoiler-text       { padding: 5px; overflow: hidden; border-width: 1px 0px 0px 0px; border-style: solid; border-color: rgb(195, 203, 209);  }
.spoiler-body       { background: 0px 0px #FCFCFC; padding: 1px 6px 2px; line-height: 20px; border-top-color: rgb(195, 203, 209); border-top-width: 1px; border-top-style: solid; }
.folded             { background: url("/files/pic/spoiler_plus.svg")  no-repeat 8px / 16px; }
.unfolded           { background: url("/files/pic/spoiler_minus.svg") no-repeat 8px / 16px; }

.auto               { width: 96%; max-width: 800px; margin: auto; padding: 20px 0px; }
.auto img           { max-width: 100%; min-width: 1px; height: auto; object-fit: contain; }

.tbl                { margin: auto; border-spacing: 0; border-collapse: collapse; border: 1px solid #999999; background: #f0f0f0; word-break: break-word; }
.tbl td             { padding: 5px; text-align: center; font-weight: bold; border: 1px solid #999999; }
.tbl tr:first-child td { text-align: center; background: #e0e0e0; }


@media (max-width: 450px) { #lbm { float: none; text-align: right; }    .hdm { float: none; background: royalblue !important; }}

@media (min-width: 800px) { #lbm { display: none !important; }          .hdm { display: block !important; }}

@media (max-width: 768px) { .header_title { margin-left: 5%; font-size: 5vw; }     .footer_orphus, .footer_conf { display: none; } }


link[id*=-mode][href^=chrome]~body div.about_item   { background: linear-gradient(#484848, #292929); }
link[id*=-mode][href^=chrome]~body div.price_prd    { background: linear-gradient(#484848, #292929); }

@media (prefers-color-scheme: dark) {
  body                              { background: #292929 !important; }
  table.tbl                         { background: #404040 !important; }
  table.tbl tr:first-child td       { background: #585858 !important; }
  main img:not([src*=".svg"])       { filter: brightness(80%); }
  header, footer                    { filter: saturate(55%); }

  html *:not(input)                 { color: #dcdcdc !important; }
  html a                            { color: skyblue !important; }
  html a:hover                      { color: gold !important; }

  div.price_itm span                { color: steelblue !important; }
  div.price_prd, div.about_item     { background: linear-gradient(#484848, #292929); }
  li.price_prd,  div.about_hdr      { background: none; border-color: #606060; }
  .spoiler-wrap, .spoiler-body      { background: #383838; border-color: #606060; }
  
  a.price_but                       { background: #0e395d !important; }
  a.price_but:hover                 { background: #12446d !important; }
}