/*
* This css file is a part of ...
* Данный css файл является частью ... 
*/

body *{appearance: none; overflow: hidden; box-sizing: border-box; width: 100%; height: auto; padding: 0; margin: 0 auto; font-family: 'Roboto Slab', sans-serif; color: #eee; transition: 0.5s; scroll-behavior: smooth; scrollbar-width: none;}
*::-webkit-scrollbar{width: 0px}
*:focus-visible{border: 4px solid #00e00e !important; background-color: #182888 !important; outline: none}
::placeholder{color: #eee; opacity: 0.8}
[disabled]{cursor: not-allowed}
[hidden]{display: none !important}
button[hidden]{transition: none}
scrollbar{width: 0px}
html{height: 100%; background: #d5d5d5}
body{height: 100%; margin: 0}
body, #Main{overflow-y: auto}
div, span, ul, li, a, img, #Header, #Main, #Footer{display: block}
span{text-align: center}
a{text-decoration: underline; overflow-wrap: break-word}
a:visited{color: #eee}
ul{list-style-type: none}
li{text-align: left}
input:focus::placeholder{opacity: 0}
input:invalid {border-color: red}
button, a, input[type="checkbox"]{cursor: pointer}
button, input{border: 4px solid #eee; background-color: #066aa1; background-repeat: no-repeat; background-position: center; font-size: 24px; font-weight: bold}
button{touch-action: manipulation}

.OE{display: block; position: absolute; left: -100%}
.ImgBox{float: left; width: 100px; height: 100px; margin-right: 15px;}

#Root{max-width: 1280px; height: 100%}
#Root>*{max-width: inherit}
#Main{overflow-y: auto; height: calc(100% - 120px); padding: 10px}
#Header, #Footer{height: 60px; background: #066aa1; box-shadow: 0px 0px 10px 0px #000}

#Pop{z-index: 99; position: absolute; top: 5px; left: 5px; width: 300px}
#Pop>*{position: relative; padding: 4px; background: #1f1f1f; border: solid 2px #eee; font-size: 20px; animation: show 0.5s reverse; animation-delay: 4.5s}
#Pop>*+*{margin-top: 5px}
#Pop>*::after{content: ''; position: absolute; left: 2px; bottom: 2px; width: 100%; border-bottom: solid 4px #f10; animation: width 5s linear forwards}

#UserLOR{width: 320px; text-align: center;}
#UserLOR a{padding: 8px 0px; margin: 10px 0px; border: 4px solid #eee;}

#Header>div{z-index: 1; position: absolute; overflow-y: auto; max-width: inherit; height: calc(100% - 120px); font-size: 24px; font-weight: bold; padding: 10px; background:#1f1f1f}
#HeaderNav{height: 100%}
#HeaderNav *{height: 100%}
#HeaderNav a{text-decoration: none}
#HotNav:first-child{border-left: 4px solid #054163}
#HotNav li{float: left; width: 25%; border-right: 4px solid #054163}
#HotNav li>*{display: block; border: solid 4px #066aa1; background-color: inherit}
#HotNav li>span{position: relative; top: -35px; left: 5px; width: 30px; height: 30px; margin: 0; border: 0; border-radius: 50%; background-color: #ea8102; font-size: 21px; font-weight: bold}
#HotNav img{width: 39px; height: 39px}

#MainNav ul{float: left; width: calc((100%/2) - 10px)}
#MainNav ul+ul{margin-left: 20px}
#MainNav li{border-bottom: 4px solid #066aa1; margin-top: 5px}
#MainNav a{padding: 5px; border: solid 4px #1f1f1f; text-decoration: none}

.Search{height: 50px; border: solid 4px #eee; padding-left: 10px; font-weight: bold; font-size: 24px; color: #eee; background-image: url(/assets/img/core/search.svg); background-size: 22px; background-position: right; background-position-x: 99%; transition: background-size 0.5s ease, border-color 0.45s;}
.Search:focus-visible{background-size: 0;}
#ResSearch{display: flex; flex-wrap: wrap; margin-top: 10px}
#ResSearch>li{width: calc((100%/2) - 5px); margin: 0; border: 4px solid #eee; margin-bottom: 10px}
#ResSearch>li>*{margin-bottom: 5px}
#ResSearch>li:nth-child(2n+1){margin-right: 10px}
#ResSearch a{min-height: 50px; border: 4px solid #066aa1; border-bottom: 4px solid #fff; padding: 5px; text-decoration: none; background: #066aa1}
#ResSearch img{max-width: 480px; max-height: 270px; width: 100%; height: 100%}
.PrBut{height: 20px; text-align: center; line-height: 0}
.PrBut>button{width: 20px; height: 20px; margin-right: 5px; border-radius: 50%}
.PrPid>*{float: left; display: inline; height: 50px; text-align: center}
.PrPid>input{width: calc(100% - 220px); border-left: 4px solid #066aa1}
.PrPid>span{width: 160px; border-top: 4px solid #eee; border-bottom: 4px solid #eee; padding: 0px 5px; line-height: 42px}
.PrPid>button{width: 60px; border-right: 4px solid #066aa1; background-image: url(/assets/img/core/cartp.svg); background-size: 35px}
.PrDesc{max-height: 150px; overflow-y: auto; padding: 0px 5px}

#CartList li{margin-bottom: 10px; border: 4px solid #eee}
#CartList li>*{float: left; height: 90px; line-height: 90px}
#CartList li>div{width: 40px; border-right: 4px solid #eee; text-align: center}
#CartList li>img{width: 160px; padding: 4px}
#CartList li>p{width: 400px; padding: 0px 5px}
#CartList li>input{width: calc(100% - 850px); border: 4px solid #066aa1; text-align: center;}
#CartList li>span{width: 160px}
#CartList li>button{width: 90px; border: 4px solid #066aa1; background-image: url(/assets/img/core/cartm.svg); background-size: 70px}
#CartList li>p, #CartList li>span{border-left: 4px solid #eee; border-right: 4px solid #eee}
#PP>*{margin-bottom: 5px}
#PP span{padding: 5px}
#PP button{width: 320px; height: 80px; padding: 5px}
#PP img{width: 320px}

#Footer>div{width: 320px}
#Footer>div>a:first-child{width: 200px; padding: 5px; font-size: 22px; font-weight: bold; line-height: 42px}
#Footer>div>a{float: left; width: 60px; height: 60px; border: 4px solid #066aa1}

@keyframes width {0%{width: 100%;}100%{width: 0%;}}

@font-face
{
font-family: 'Roboto Slab';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/roboto-slab-v12-latin_cyrillic-regular.eot');
src: local(''),
url('/assets/fonts/roboto-slab-v12-latin_cyrillic-regular.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/roboto-slab-v12-latin_cyrillic-regular.woff2') format('woff2'),
url('/assets/fonts/roboto-slab-v12-latin_cyrillic-regular.woff') format('woff'),
url('/assets/fonts/roboto-slab-v12-latin_cyrillic-regular.ttf') format('truetype'),
}

@media(hover: hover)
{a:hover, button:hover, summary:hover, label:hover, input:hover, select:hover{border: solid 4px #00e00e !important; background-color: #182888 !important}}

@media (max-width: 1000px)
{
#ResSearch a, .PrDesc{font-size: 20px}
#ResSearch a{padding: 7px 4px}
#ResSearch img{width: 100%; height: auto}
#CartList li>*{height: 72px; line-height: 72px}
#CartList li>div{height: 144px; line-height: 144px}
#CartList li>img{width: 128px; border-bottom: 4px solid #fff}
#CartList li>p{width: calc(100% - 168px); border-right: 0; border-bottom: 4px solid #fff}
#CartList li>input, #CartList li>span{width: calc((100% - 112px)/2)}
#CartList li>button{width: 72px; background-size: 60px}
}
@media (max-width: 680px)
{
#ResSearch li{width: 100%; height: 100%}
#ResSearch>li:nth-child(2n+1){margin-right: 0px}
}
@media (max-width: 475px)
{
#Header>div{padding: 10px 0px}
#HotNav li>span{width: 20px; height: 20px; top: -25px; font-size: 15px}
.PrPid>input{width: calc(100% - 160px)}
.PrPid>span{border-right: 4px solid #fff}
.PrPid>button{width: 100%; margin-top: 5px; border-left: 4px solid #066aa1; background-size: 35px}
#CartList li>*{height: 50px; line-height: 50px}
#CartList li>div{height: calc(310px + 85 * ((100vw - 320px) / (475 - 320))); line-height: calc(310px + 85 * ((100vw - 320px) / (475 - 320)))}
#CartList li>img{max-width: 435px; max-height: 245px; width: calc(100% - 40px); height: auto; border-bottom: 4px solid #fff}
#CartList li>p{width: calc(100% - 40px); border-left: 0; font-size: 20px}
#CartList li>input, #CartList li>span{width: calc((100% - 40px)/2)}
#CartList li>span{border-right: 0}
#CartList li>button{width: calc(100% - 40px); border-top: 4px solid #fff; background-size: 35px}
}