/* Базові :root винесені в head.php */
/* Ховаємо спочатку */
/* Потім скрипти включать коли підгрузиться сторінка чи коли то буде потрібно */
.top,
.content,
.footer,
.alang,
.modal {
display: none
}
/* важливо для мобільної версії */
html {
background-color: var(--topColor);
}
/* Базовые стили */
h1 {
font-size: 160%;
color: var(--TB);
margin: 0px;
}
.logoa {
width: calc(100% - 55px);
display: block;
}
/* calc(100% - 80px)*/
h2 {
font-size: 140%;
color: var(--TB);
margin: 10px 5px;
clear: both
}
h3 {
margin: 10px 0;
}
table {
border-collapse: collapse;
}
p {
text-indent: 15px;
margin: 5px 2px 0 2px;
text-align: justify;
display: block;
}
p,
span,
div,
.btn span,
.namecard,
.headmenu span,
.btn {
color: var(--TB);
}
input, textarea, select, li.drop,input:-internal-autofill-selected {
font-size: 16px;
padding: 8px 4px;
color: var(--cardColor);
margin: 0;
border-bottom: 2px solid var(--BackgroundFonColorNew);
}
textarea {
overflow: auto;
}
/* Удаляем полосы прокрутки многострочного поля в IE */
div {
height: auto
}a {
text-decoration: none;
color: var(--linki)
}/* DISPLAY NONE */
#formDiv #country,
.home #home,
.fb #fb,
.home .homemin,
.fb .fbmin,
.we,
.ro,
.statusik,
.revtop {
display: none
}
/* Базовые классы */
.fp-enabled body,
html.fp-enabled {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
.fp-section {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.fp-slide {
float: left
}
.fp-slide,
.fp-slidesContainer {
height: 100%;
display: block
}
.fp-slides {
z-index: 1;
height: 100%;
overflow: hidden;
position: relative;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out
}
.fp-section.fp-table,
.fp-slide.fp-table {
display: table;
table-layout: fixed;
width: 100%
}
.fp-tableCell {
display: table-cell;
width: 100%;
height: 100%
}
.fp-slidesContainer {
float: left;
position: relative
}
.fp-controlArrow {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
user-select: none;
position: absolute;
z-index: 4;
top: 50%;
cursor: pointer;
width: 0;
height: 0;
border-style: solid;
margin-top: -38px;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.fp-controlArrow.fp-prev {
left: 15px;
width: 0;
border-width: 38.5px 34px 38.5px 0;
border-color: transparent #fff transparent transparent
}
.fp-controlArrow.fp-next {
right: 15px;
border-width: 38.5px 0 38.5px 34px;
border-color: transparent transparent transparent #fff
}
.fp-notransition {
-webkit-transition: none !important;
transition: none !important
}
#fp-nav {
position: fixed;
z-index: 100;
top: 50%;
opacity: 1;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translate3d(0, -50%, 0)
}
.fp-slidesNav {
position: absolute;
z-index: 4;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0 !important;
right: 0;
margin: 0 auto !important
}
#fp-nav ul,
.fp-slidesNav ul {
margin: 0;
padding: 0
}
#fp-nav ul li,
.fp-slidesNav ul li {
display: block;
width: 14px;
height: 13px;
margin: 7px;
position: relative
}
.fp-slidesNav ul li {
display: inline-block
}
#fp-nav ul li a,
.fp-slidesNav ul li a {
display: block;
position: relative;
z-index: 1;
width: 100%;
height: 100%;
cursor: pointer;
text-decoration: none
}
#fp-nav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li a.active span,
.fp-slidesNav ul li:hover a.active span {
height: 12px;
width: 12px;
margin: -6px 0 0 -6px;
border-radius: 100%
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
border-radius: 50%;
position: absolute;
z-index: 1;
height: 4px;
width: 4px;
border: 0;
background: #333;
left: 50%;
top: 50%;
margin: -2px 0 0 -2px;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out
}
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span {
width: 10px;
height: 10px;
margin: -5px 0 0 -5px
}
#fp-nav ul li .fp-tooltip {
position: absolute;
top: -2px;
color: #fff;
font-size: 14px;
font-family: arial, helvetica, sans-serif;
white-space: nowrap;
max-width: 220px;
overflow: hidden;
display: block;
opacity: 0;
width: 0;
cursor: pointer
}
#fp-nav ul li:hover .fp-tooltip,
#fp-nav.fp-show-active a.active+.fp-tooltip {
-webkit-transition: opacity .2s ease-in;
transition: opacity .2s ease-in;
width: auto;
opacity: 1
}
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell,
.fp-auto-height.fp-section {
height: auto !important
}
/* стилі теми */
.cfct,
.stdaev,
.stdaev span,
.toalbt:hover,
.alterror {
color: var(--BackgroundFonColorTwo);
}
.bct,
.dayweek {
background-color: var(--BackgroundFonColorTwo);
}
.bfct {
background: var(--BackgroundFonColorTwo);
}
.bordalt {
border: 1px solid var(--TB)
}
.namecard {
height: 32px;
}
.purse {
font-family: monospace;
margin-top: 5px;
}
.fms {
font-family: monospace;
}
.copied {
background-color: var(--bg);
}
/* Позволяет красиво отобразить страницу до момента полной загрузки nivo.css КОТОРЫЙ УЖЕ КСТАТИ НЕ ИСПОЛЬЗУЕТСЯ!!!!! */
.bl,
.avatar {
display: block
}
.dfr {
display: flow-root;
}
.clears {
width: 100%;
height: 3px;
display: inline-block;
clear: both;
margin: 20px;
}
.shirina {
padding: 12px 20px 20px 0;
margin: auto;
}
.shirina p,
.f16 {
font-size: 16px
}
.btn {
background-clip: padding-box;
border: 1px solid var(--TB);
outline: medium none;
display: block;
transition: all 0.1s ease-in-out 0s;
width: 310px;
padding: 10px 0;
font-size: 16px;
}
.btn:hover {
border-bottom: 1px solid var(--BackgroundFonColorTwo);
color: var(--BackgroundFonColorTwo);
}
.altbtn {
margin: auto;
display: inline-block;
color: var(--TB);
border: 1px solid var(--TB);
padding: 10px 3px;
}
.altbtn:hover,
.btn:hover,
.btn:hover>span,
.altbtn:hover>span,
.btn span:hover,
.altbtn span:hover {
border-color: var(--BackgroundFonColorTwo);
color: var(--BackgroundFonColorTwo);
}
.white {
color: gainsboro
}
.tb {
color: var(--TB)
}
.red {
color: red
}
.crimson {
color: crimson;
}
.bgcrimson {
background-color: crimson;
}
.green {
color: green !important;
}
.blue {
color: blue
}
.centr {
text-align: center;
margin: auto
}
.fn {
height: 70px !important;
}
.gray {
background-color: darkgray;
}.pl {
display: contents;
}
.altRb {
width: 140px;
align-items: center;
height: 100%;
}
.gc {
color: gray
}
.coral {
color: coral
}
.orange {
color: orange !important;
}
.w310,
.field,
.modal select,
.modal input,
.modal textarea,
.infodiv {
width: 310px;
}
.field::placeholder {
color: var(--cardColor);
}
.field:focus::placeholder {
color: var(--BackgroundFonColorNew);
}
.sisin {
color: var(--SpoilerLinkText);
}
.sisbg {
background: var(--SpoilerLinkText);
}
.jf {
text-align: justify;
}
.top,.topload {
position: fixed;
z-index: 7;
width: 100%;
height: var(--HT);
top: 0;
background-color: var(--topColor);
}
.uzko,
.tabset,
.shirina,
#menugoal {
max-width: 900px;
min-width: 310px;
margin: auto
}
.underline {
text-decoration: underline;
}
.hide {
display: none !important;
}.statusik {
text-align: justify;
padding: 0 10px 25px;
color: crimson;
font-size: 14px;
}.falstart {
height: 50px
}
.bold {
font-weight: bold;
}
.content,
.modal,
.needwayt {
padding-top: var(--HT);
background-color: var(--bg);
}.fl {
float: left;
}.fr {
float: right;
}
.fbt {
/* shop del width: 127px; */
height: 100%;
}
.fbtl {
justify-content: center;
padding: 10px;
}
.fbtr {
justify-content: center;
padding: 10px 23px 10px 3px;
}
/* Блок на странице с формой обратной связи */
#button,
#button:hover {
box-shadow: none !important;
margin: 0 !important;
}
.logo img {
width: 36px;
margin: auto;
height: 36px;
float: left;
cursor: pointer;
margin: 1px 7px 2px 4px;
}
.telo {
border-bottom: 1px dotted grey;
padding-bottom: 20px;
margin: 5px;
}
.response {
display: none;
color: var(--BackgroundFonColorTwo);
margin: 10px auto;
text-align: center;
padding-left: 8px;
}
.disbtn,
input:disabled {
opacity: 0.8;
color: var(--topColor);
}
.rev {
display: block;
margin: 6px 3px 15px 3px;
max-width: 650px;
}
.revbtn {
padding: 2px;
margin: 3px 0 0 0;
height: 48px;
width: 155px;
word-wrap: break-word;
display: inline-block;
cursor: pointer;
}
.revhe {
padding: 5px;
height: 50px
}
.revco {
padding: 5px;
text-align: justify;
}
.revco p,
.spt p {
font-size: 14px !important
}
.spt {
background-color: aquamarine;
position: relative;
}
.revfo {
padding-bottom: 5px;
margin: 6px 3px 0 3px;
max-width: 700px
}
.revhe img {
width: 34px;
float: inherit;
}
.revhespr {
font-size: 13px;
padding-left: 7px;
font-weight: 600;
}
.revhespl {
font-size: 12px;
float: right;
padding-right: 6px;
color: black;
text-align: right;
width: 63px;
}
.revkof {
float: right;
font-size: 36px;
font-weight: 600;
line-height: 20px;
}
#purselistnot {
padding: 5px;
margin: 10px 0;
width: 310px;
border: 1px dotted grey
}
.revtop {
border-top: 1px solid grey;
padding: 5px 0;
height: 70px;
margin: 15px 5px 5px 5px;
max-width: 700px
}
.rbtn {
padding: 8px 0;
margin: 15px 0 0 0;
width: 145px;
font-size: 100%
}
.container {
height: calc(100% - var(--HF));
overflow: hidden;
z-index: 1
}
.content{
height:100%;
}
.headmenu {
display: block;
float: right;
width: auto;
position: absolute;
right: 60px;
z-index: 0;
}
.headmenu div {
float: right;
height: var(--HT);
text-align: center;
display: block;
border-left: 0.5px solid var(--bg);
}
.headmenu div a {
height: var(--HT);
display: block;
padding: 0 10px 0 10px;
}
.headmenu div a span {
display: block;
text-align: center;
padding: 10px 0;
height: 100%;
}
.mh {
height: var(--HT);
width: 52px;
position: absolute;
right: 1px;
z-index: 1;
}.headmenu div a:hover {
background: var(--BackgroundFonColorNew);
}
.logo {
float: left;
width: 100%;
left: 0;
position: absolute;
display: block;
z-index: 0;
}
.minw {
width: 320px
}
.linkbottom {
border-bottom: 1px dashed grey;
font-size: 14px;
margin-bottom: 15px;
display: inline-block;
}
.nowtabtov {
padding: 14px 0;
border-bottom: 3px solid var(--topColor);
}
.fraza {
margin: 15px auto;
display: inline-block;
width: 100%;
font-weight: normal;
color: black;
}
.ibl {
display: inline-block;
}
.searchg {
width: 263px !important;
color: var(--BackgroundFonColorTwo);
}
.searchg::placeholder {
color: var(--TB);
}
.searchf {
border: 0px;
border-bottom: 4px solid var(--BackgroundFonColorTwo);
padding: 10px;
height: 52px;
background: var(--bg);
}
.searchbtn {
width: 47px;
float: right;
font-size: 140%;
padding-top: 9px;
color: var(--cardColor);
}
.anketa,
.grid,
#menugoal,
.infodiv {
display: grid;
}
.infodiv {
grid-template-columns: 42px auto;
grid-column-gap: 3px;
}
.grotz {
grid-template-columns: 40px auto 96px;
grid-column-gap: 3px;
}
#menugoal {
grid-template-columns: 1fr 110px;
grid-column-gap: 3px;
}
.grweek {
grid-template-columns: repeat(7, 1fr);
grid-column-gap: 3px;
grid-row-gap: 3px;
}
#menugoal {
grid-template-columns: repeat(4, 1fr);
grid-row-gap: 3px;
}
#menugoal a {
background: rgba(0, 0, 0, 0.28);
padding: 5px;
border-radius: 5px;
width: auto;
display: block;
height: 48px;
color: var(--TB);
margin: 0 4px;
}
#menugoal img {
width: 38px
}
.section {
z-index: 1;
position: relative;
}
#menugoal {
z-index: 6;
width: 100%;
position: fixed;
bottom: calc(10px + var(--HF));
}
.activepunkt>a,
.activepunkt>a:hover {
background-color: var(--topColor) !important;
opacity: 0.9;
}
.activepunkt span {
color: var(--BackgroundFonColorNew);
}
li.activepunkt a {
cursor: unset;
}
.topgrw {
border: 1px solid gray;
padding: 2px;
height: 60px;
}
.grw {
grid-column-start: 1;
grid-column-end: 8;
grid-row-start: 2;
grid-row-end: 3;
border: 1px solid gray;
padding: 0px 0 2px 0;
height: 86px;
}
.grwb {
grid-column-start: 1;
grid-column-end: 8;
grid-row-start: 3;
grid-row-end: 4;
border: 1px solid gray;
padding: 2px;
height: 83px;
}
.forpaytop,
.tritop {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.forpayinp {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
width: auto !important;
}
.forpayval {
grid-column-start: 3;
grid-row-start: 2;
}
.selicard {
background: var(--cardColor);
width: 305px;
padding: 7px 4px 0 4px;
border-left: 4px solid var(--TB);
transition: border-left 0.3s;
height: 170px;
margin-left: 2px;
margin-right: 2px;
border-radius: 4px;
}
.selicard:hover {
border-left: 4px solid var(--BackgroundFonColorTwo);
}
.slcde {
width: 137px;
padding: 7px 5px;
font-size: 80%;
font-family: Verdana;
height: fit-content;
border: 0.5px solid var(--TB);
}
.alcobt {
background: var(--topColor);
color: var(--TB)
}
.ccbc {
background: var(--cardColor);
}
.rela {
position: relative;
}
.absl {
position: absolute;
bottom: 3px;
left: 5px;
}
.absr {
position: absolute;
bottom: 3px;
right: 8px;
}
.kartgoalkol {
width: 100%;
height: 27px;
}
.msvg {
width: 20px;
height: 20px;
}
.infotop {
background: var(--topColor);
padding: 10px 8px;
color: var(--TB);
}
.toptext {
text-transform: uppercase;
}
.loadpage {
margin-top: 100px;
}
.vertal {
height: 100%;
align-items: center;
}
.dayactive {
font-weight: 600;
border-bottom: 4px solid white;
background-color: darkgreen;
}
.goaldet {
height: 80px;
padding: 2px 3px;
position: absolute;
bottom: 37px;
width: 137px;
left: 5px;
}
.modal .response {
padding: 20px 0;
}
.topplashka {
position: absolute;
top: -7px;
right: 8px;
padding: 0px 4px 1px 4px;
border-radius: 2px;
font-size: 80%;
}
.kartgoalkol[title]:hover:after,
.withInfo[title]:hover:after {
content: attr(title);
background-color: var(--BackgroundFonColorTwo);
padding: 8px;
font-size: 80%;
display: inline-block;
position: absolute;
}
.withInfo[title]:hover:after {
z-index: 1;
height: auto;
bottom: calc(var(--HF) + 12px);
}
.kartgoalkol[title]:hover:after {
animation: togleVis 2s forwards;
right: 0px;
width: 100%;
z-index: 1;
height: 35px;
vertical-align: middle;
margin: auto;
justify-content: center;
align-items: center;
display: flex;
top: -44px;
}
.mnframe {
height: 90px;
padding: 2px 0;
}
.stopSend {
opacity: 0.3;
cursor: not-allowed;
}
.MiniNext_yes {
width: 120px;
height: 41px;
margin: 4px 0 0 10px;
}
.MiniNext_no {
width: 120px;
height: 41px;
margin: 4px 10px 0 0;
}
.MiniNext div:first-child {
width: 100%;
height: 33px;
}
.kartgoalkol span:nth-child(2) {
margin: 0px 0 0 4px;
}
.headerkriv {
height: 350px;
background-size: contain;
transform: rotate(-11deg);
margin-top: -195px;
position: absolute;
top: 0;
right: -20%;
left: -20%;
bottom: 0;
border: 2px solid var(--topColor);
z-index: -2;
background: var(--topColor);
clip-path: polygon(0 5%, 100% 70%, 100% 100%, 0% 100%)
}
.footerkriv {
height: 240px;
background-size: contain;
transform: rotate(176deg);
position: absolute;
right: -20%;
left: -20%;
bottom: -40px;
z-index: -2;
background: var(--topColor);
}
.avatar:empty::after {
content: attr(title);
/* Відображення тексту з атрибута title */
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--BackgroundFonColorTwo);
/* Колір тексту заглушки */
font-size: 100px;
/* Розмір тексту заглушки */
}
.baseprofile {
position: absolute;
bottom: 230px;
right: 100px;
}
.swowcase {
position: absolute;
right: 100px;
top: 60px;
}
.fle {
display: flex
}
.flextworight {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
padding: 0;
margin: 0;
list-style: none;
}
.f12 {
font-size: 12px
}
.t70 {
font-size: 70%;
}
.t90 {
font-size: 90%;
}
.t85 {
font-size: 85%;
}
.t80,
.infodiv p {
font-size: 80%;
}
.t110 {
font-size: 110%
}
.t120 {
font-size: 120%
}
.t130 {
font-size: 130%
}
.t160 {
font-size: 160%;
}
.t200 {
font-size: 200%;
}
.pall10 {
padding: 10px;
}
.p10 {
padding: 10px 0;
}.infodiv div:nth-child(2) {
padding-bottom: 10px;
}
.pl5 {
padding-left: 5px
}
.pl10 {
padding-left: 10px
}
.pr10 {
padding-right: 10px
}
.m0 {
margin: 0
}
.m10 {
margin: 10px 0
}
.m15 {
margin: 15px 0
}
.prl15 {
padding-left: 15px;
padding-right: 15px
}
.t10 {
margin-top: 10px
}
.t20 {
margin-top: 20px
}
.t30,.reg .regiall,.regionset {
margin-top: 30px
}
.tb5 {
margin: 5px auto
}
.tb10 {
margin: 10px auto
}
.tb20,
#filtergoal select,
#editregion select,
.infodiv {
margin: 20px auto
}
.tb30 {
margin: 30px auto
}
.tb40 {
margin: 40px auto
}
.b10 {
margin-bottom: 10px
}
.b15 {
margin-bottom: 15px
}
.b20 {
margin-bottom: 20px
}
.b30 {
margin-bottom: 30px
}
.w100 {
width: 100%
}
.mh35 {
min-height: 35px
}
canvas {
display: block;
}
/* ТОВАРКА */
.cartatovara {
min-width: 310px;
border-bottom: 1px solid var(--topColor);
margin: 5px;
height: 200px
}
.counter__decrement,
.counter__increment {
border: 1px solid grey;
padding: 5px;
border-radius: 4px;
width: 22px;
display: inline-block;
}
.counter__count {
display: inline-block;
width: 20px;
}
.counter {
float: left;
padding: 0 0 0 11px;
}
.product__totalPrice {
padding-top: 2px;
margin-right: 11px;
}
.cf {
color: var(--BrandColor);
}/* Основной цвет сайта (фона) */
#button,
.c1,
.headmenu ul li,
.ui-datepicker .ui-datepicker-calendar .ui-state-highlight a {
background-color: var(--topColor);
}
body{background: var(--bg)}.top, .footer, .headmenu, .grotz, .footerload {
background: var(--topColor) !important;
}
.t1 {
border-bottom-color: var(--topColor) !important;
}/* Основной цвет трапеций */
.ask #ask {
background-color: var(--contrastColor);
}#ask {
pointer-events: visible !important
}
.triangle {
border-top: 0.4em solid var(--topColor)
}
/* Основной цвет (c1) сайта внедрённый в css фигуры */
.dropOut li:hover {
border-color: var(--topColor) !important;
}
/* Основной цвет (c1) сайта внедрённый в css фигуры */
#button,
.nowtabtov {
background: var(--BackgroundFonColorTwo);
border-right: 0px;
border-left: 0px;
border-top: 0px;
color: var(--TB) !important;
}
.bcab {
background: var(--BackgroundFonColorNew);
}
.waitloadingform {
margin-top: calc(65px + var(--HT))
}
.clip {
overflow: hidden;
/* Обрезаем все, что не помещается в область */
text-overflow: ellipsis;
/* Добавляем многоточие */
white-space: nowrap
}
/* КОНЕЦ - Базовые стили и классы */
/* стили простейшего спойлера */
.spoiler-trigger {
color: grey;
display: block;
}
/* display: block; */
.spoiler-trigger>span {
border-bottom: 1px dashed var(--TB);
color: var(--TB);
font-size: 16px;
}
.spoiler-trigger:hover>span {
border-bottom-style: solid;
}
.spoiler-block {
display: none;
text-align: justify;
padding: 2px 5px 15px 5px;
}
.spoiler-block p,
.spoiler-block b,
.spoiler-block strong {
font-size: 14px;
}
.spoilask {
padding: 8px 5px;
border: solid 1px;
display: block;
margin: 15px 10px 0 10px;
border-color: var(--topColor);
background: var(
--BackgroundFonColorNew);
}
.spoilask>span {
color: var(--contrastColor);
border-bottom: 0px;
padding-left: 20px;
}
.cover-block {
padding: 4px;
z-index: 999;
background: var(--BackgroundFonColorTwo);
}
.cover-block p {
color: white !important;
}
.br {
border-bottom: 1px solid red;
border-top: 1px solid red;
}
/* всплывашки подсказки типсы сверху */
/* похерил код всплывашек ради конкретной цели - отображать кошельки */
/* Hover over meTooltip text
*/
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted var(--BackgroundFonColorNew);
}
input[type="button"],
input[type="submit"] {
cursor: pointer;
border: 1px solid var(--TB);
color: #fff;
outline: none;
padding: 8px 0;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
/* КОНЕЦ - стили кнопок */
.adminfdi {
border-top: 2px dotted gray;
border-bottom: 2px dotted gray;
padding: 5px;
margin: 8px 0;
max-width: 700px;
}
/* типичный блок с ошибками */
.zoo {
width: 310px;
margin: auto;
}
.zoo p {
display: block;
font-size: 90%;
margin-bottom: 15px
}
select#birthDay {
width: 78px !important;
}
select#birthMonth {
width: 100px !important;
padding-left: 0;
}
select#birthYear {
width: 120px !important;
}
.mainForm select#city option {
color: black;
font-size: 14px
}
.mainForm div {
text-align: center;
height: 27px
}
#tip span,
#tips span {
color: green !important;
padding: 3px 0 0 0;
text-align: center;
font-size: 13px;
width: 100%;
}
.jserror {
font-size: 80%
}
.error,
.error::placeholder,
.error * {
color: #f13850 !important;
fill: #f13850 !important;
}
select.error,
input.error {
border-color: red !important;
}
.errorbottom {
color: red !important;
border-bottom: 4px solid red !important;
}
.trumbowyg-box {
height: 180px !important;
}
.grw div:first-child {
background-color: var(--BackgroundFonColorTwo);
}
.selh {
margin: 10px 0 0 8px !important;
width: 140px !important;
}
.selm {
margin: 10px 8px 0 0 !important;
width: 130px !important;
}#bt-menu select,
#formDiv option[value="minus"],
#formDiv option[value="plus"] {
display: none
}
#feedback {
float: right;
height: 20px;
text-align: center;
font-weight: bold;
margin: 10px 30px 0 0
}
#news {
float: left;
height: 20px;
width: 200px;
text-align: center;
font-weight: bold;
margin-top: 10px
}
#login {
width: 450px !important
}
#login input {
width: 120px;
border: 2px solid gray;
margin: 0;
padding: 3px;
color: gray;
margin: 7px 7px 0 0
}.bcgr {
background-color: green;
}
#region,
#money {
height: 100% !important
}
input[type='checkbox'] {
width: 13px;
padding: 0px;
margin: 7px;
border: 0;
height: 13px;
}
#unsubscribe select {
padding: 4px;
width: 150px;
font-size: 14px;
top: 2px;
position: relative;
}
#unsubscribe {
margin: 15px 5px 0 5px
}
.infodiv {
border-top: 2px solid gray;
border-bottom: 2px solid gray;
max-width: 650px
}
.infodiv img {
margin: 10px auto;
height: 36px;
}
.infodiv p {
display: block;
}
.infodiv a,
.infodiv b,
.infodiv strong {
display: inline;
}
.coocies_lout {
width: 77px;
padding: 4px 0px;
margin: 5px 0 5px 0px;
}
/* КОНЕЦ - фигуры, текст в них и украшательства фигур */
/* красивые чекбоксы и радиокнопки */
/* Cначала обозначаем стили для IE8 и более старых версий т.е. здесь мы немного облагораживаем стандартный чекбокс. */
.checkbox {
vertical-align: top;
margin: 0 3px 0 0;
width: 17px;
height: 17px;
top: 10px;
}
/* Это для всех браузеров, кроме совсем старых, которые не поддерживают селекторы с плюсом. Показываем, что label кликабелен. */
.checkbox+label {
cursor: pointer;
}
/* Далее идет оформление чекбокса в современных браузерах, а также IE9 и выше. Благодаря тому, что старые браузеры не поддерживают селекторы :not и :checked, в них все нижеследующие стили просто не сработают. */
/* Прячем оригинальный чекбокс. */
.checkbox:not(checked) {
opacity: 0;
display: contents;
}
.checkbox:not(checked)+label {
position: relative;
/* будем позиционировать псевдочекбокс относительно label */
padding: 10px 10px 10px 60px;
}
/* оставляем слева от label место под псевдочекбокс */
/* Оформление первой части чекбокса в выключенном состоянии (фон). */
.checkbox:not(checked)+label:before {
content: '';
position: absolute;
top: 4px;
left: 0;
width: 50px;
height: 26px;
border-radius: 13px;
background: #CDD1DA;
box-shadow: inset 0 2px 3px rgba(0, 0, 0, .2);
}
/* Оформление второй части чекбокса в выключенном состоянии (переключатель). */
.checkbox:not(checked)+label:after {
content: '';
position: absolute;
top: 6px;
left: 2px;
width: 22px;
height: 22px;
border-radius: 10px;
background: #FFF;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
transition: all .2s;
}
/* Меняем фон чекбокса, когда он включен. */
.checkbox:checked+label:before {
background: #9FD468;
color: black;
}
/* Сдвигаем переключатель чекбокса, когда он включен. */
.checkbox:checked+label:after {
left: 26px;
}
/* Показываем получение фокуса. */
.checkbox:focus+label:before {
box-shadow: 0 0 0 3px rgba(255, 255, 0, .5);
}
.flecentr {
justify-content: center;
align-items: center;
}
/* що стосується скану QR коду */
#your-video-container {
width: 310px;
/* встановлюєте бажану ширину */
height: 310px;
/* встановлюєте бажану висоту */
}
#your-video-element,
.tikResp {
width: 100%;
height: 100%;
object-fit: cover;
/* або інший спосіб заповнення відео в обгортці */
}
.top #identuser {
margin: 0 !important;
box-shadow: none !important;
}
.top #identuser li {
border: none !important;
height: 40px;
padding-left: 5px;
}
#identuser li {
height: 41px;
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5) !important
}
.triangle {
width: 0;
top: 38px;
height: 0;
position: absolute;
border-left: .4em solid transparent;
border-right: .4em solid transparent;
border-top: .4em solid #2CC6AB;
left: 285px;
opacity: 0;
margin-top: 2px;
}
#identuser ul {
display: block !important
}
li.drop {
padding: 2px !important
}
#identuser {
width: 310px;
margin: 10px 0 27px;
height: 40px;
}
.user-avatar img {
-webkit-border-radius: 4em 4em;
border-radius: 4em / 4em;
float: left;
margin-left: 2px;
margin-top: 0.1em;
}
.icon-reorder {
color: #FFFFFF;
float: right;
margin-right: -3px;
padding: 2em;
}
.drop {
position: relative;
font-size: 1em;
cursor: pointer;
}
.drop a {
line-height: 2.4em;
color: #4d4d4d !important;
text-decoration: none;
margin-top: -27px;
width: 50%;
overflow: hidden;
white-space: nowrap;
word-wrap: normal;
font-size: 14px;
text-overflow: clip;
display: block;
width: 71%;
float: left;
padding-left: 4px;
}
.dropdownContain {
width: 110px;
position: absolute;
z-index: 2;
left: 199px;
top: -310px;
}
.dropOut {
width: 110px;
height: 48px !important;
background: #f6f6f6;
float: left;
position: relative;
margin-top: 0;
opacity: 0;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.75);
overflow: hidden;
transition: all 0.1s ease-out;
}
.dropOut ul {
padding: .1em 0;
margin: 0;
border: 1px solid #808080;
}
.dropOut li {
text-align: left;
width: 100%;
padding: 0.3em 0;
color: gray;
background-color: #F6F6F6 !important;
background: -moz-linear-gradient(center bottom, #F6F6F6 70%, #F6F6F6 100%) !important;
border-left: 3px solid #f7f7f7 !important;
transition: all 0.1s ease-out;
box-shadow: none !important;
}
.dropOut li span {
margin: 0 0 0 20px;
}
.dropOut li:hover {
color: #4d4d4d !important;
background: #ededed !important;
}
.dropOut li:hover span {
color: gray;
}
ul li:hover .triangle {
opacity: 1;
}
ul li:hover .dropdownContain {
top: 40px;
}
ul li:hover .dropOut {
opacity: 1;
margin-top: 7px;
}
.hamburger {
position: relative;
font-size: 10px;
width: 3.3em;
height: 3.3em;
margin-top: -30px;
padding: 2.05em;
}
.hamburger:before {
border-top: 0.5em solid #efefef;
content: "";
position: absolute;
width: 3em;
height: 2.7em;
margin: auto;
border-bottom: 0.5em solid #efefef;
top: .6em;
left: .6em;
}
.hamburger:after {
display: block;
content: "";
position: absolute;
top: 1.7em;
width: 3em;
height: .5em;
background: #efefef;
left: .6em;
}
/* Конец стилей ОКОШКА идентифицированного юзера */
/* СТИЛИ ШУТКИ "УСКОРИТЬ ОПЕРАТОРА" */
.restart .anime-image {
height: 238px;
position: relative;
margin-right: 238px;
}
.restart .anime-image img,
.abs {
position: absolute
}
.restart .anime-image img.hidden,
.restart .button img.hidden {
display: none
}
/* СТИЛИ ДНА */
.logout {
width: 77px;
/* в shop це зайве !!! margin: 5px 0 5px 0px; */
}
.footer,
.scanfooter,.footerload {
position: fixed;
z-index: 6;
width: 100%;
left: 0;
height: var(--HF) !important;
bottom: 0px;
}
.bot_block,
.polomka
{width: 310px;
top: var(--HT);
position: relative;
}
/*.fakefooter{bottom: -var(--HF);} */
/*если footer фиксированное, то height: calc(var(--HF) + 20px);*/
/*а если нет, то height: 30px;*/
.dno {
height: calc(var(--HF) + 20px);
clear: both;
bottom: 0px;
width: 100%;
position: fixed;
}
.footer a:not(.admin-menu-item),
.aaf {
text-align: center;
max-width: 147px;
align-items: center;
height: 100%;
}
.cartview {
width: 60px !important;
padding: 5px 0 0 9px !important;
display: block;
height: 45px;
}
.h3k img {
width: var(--HF);
height: var(--HF);
padding: 9px;
}
.h3k {
height: var(--HF);
width: var(--HF);
}
.button-md {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
color: #fff;
text-align: center;
text-transform: uppercase;
cursor: pointer;
overflow: hidden;
-webkit-transition: ease 0.3s;
transition: ease 0.3s;
}
.button-md:before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: 1;
-webkit-transition: ease 0.3s;
transition: ease 0.3s;
}
.button-md:after {
content: "";
display: block;
width: 30px;
height: 300px;
margin-left: 60px;
background: var(--BackgroundFonColorTwo);
position: absolute;
left: -40px;
top: -150px;
z-index: 1;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.1s;
transition: all 0.1s;
-webkit-animation-name: slideme;
animation-name: slideme;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-delay: 0.05s;
animation-delay: 0.05s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes slideme {
0% {
left: -30px;
margin-left: 0px;
}
30% {
left: 110%;
margin-left: 80px;
}
100% {
left: 110%;
margin-left: 80px;
}
}
@keyframes slideme {
0% {
left: -30px;
margin-left: 0px;
}
30% {
left: 110%;
margin-left: 80px;
}
100% {
left: 110%;
margin-left: 80px;
}
}
/* лодер на css Loading...
*/
.loader {
font-size: 90px;
text-indent: -9999em;
overflow: hidden;
width: 1em;
height: 1em;
border-radius: 50%;
margin: 62px auto;
position: relative;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load6 1.7s infinite ease;
animation: load6 1.7s infinite ease;
}
@-webkit-keyframes load6 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.087em -0.825em 0 -0.42em #ffffff, -0.173em -0.812em 0 -0.44em #ffffff, -0.256em -0.789em 0 -0.46em #ffffff, -0.297em -0.775em 0 -0.477em #ffffff;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.338em -0.758em 0 -0.42em #ffffff, -0.555em -0.617em 0 -0.44em #ffffff, -0.671em -0.488em 0 -0.46em #ffffff, -0.749em -0.34em 0 -0.477em #ffffff;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.377em -0.74em 0 -0.42em #ffffff, -0.645em -0.522em 0 -0.44em #ffffff, -0.775em -0.297em 0 -0.46em #ffffff, -0.82em -0.09em 0 -0.477em #ffffff;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
}
}
@keyframes load6 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.087em -0.825em 0 -0.42em #ffffff, -0.173em -0.812em 0 -0.44em #ffffff, -0.256em -0.789em 0 -0.46em #ffffff, -0.297em -0.775em 0 -0.477em #ffffff;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.338em -0.758em 0 -0.42em #ffffff, -0.555em -0.617em 0 -0.44em #ffffff, -0.671em -0.488em 0 -0.46em #ffffff, -0.749em -0.34em 0 -0.477em #ffffff;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.377em -0.74em 0 -0.42em #ffffff, -0.645em -0.522em 0 -0.44em #ffffff, -0.775em -0.297em 0 -0.46em #ffffff, -0.82em -0.09em 0 -0.477em #ffffff;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
}
}
/* */
@keyframes load-search {
0% {
transform: translate(1px, 1px)
}
33.33% {
transform: translate(51px, 1px)
}
66.66% {
transform: translate(21px, 51px)
}
100% {
transform: translate(1px, 1px)
}
}
.load-search>div {
transform: scale(0.8);
transform-origin: 50px 50px;
}
.load-search>div>div {
animation: load-search 1s linear infinite;
position: absolute
}
.load-search>div>div div:nth-child(1) {
width: 36px;
height: 36px;
border-radius: 50%;
border: 6px solid #1d3f72;
background: #5699d2
}
.load-search>div>div div:nth-child(2) {
width: 8.5px;
height: 25.5px;
transform: rotate(-45deg);
background: #1d3f72;
border-radius: 0 0 4px 4px;
position: absolute;
top: 34px;
left: 42.5px
}
.loadingio {
width: 89px;
height: 89px;
display: block;
overflow: hidden;
}
.load-search {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(0.89);
backface-visibility: hidden;
transform-origin: 0 0;
/* see note above */
}
.load-search div {
box-sizing: content-box;
}
/* */
@keyframes load-kapkap {
0% {
top: 48px;
left: 48px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 9px;
left: 9px;
width: 78px;
height: 78px;
opacity: 0;
}
}
.load-kapkap div {
position: absolute;
border-width: 2px;
border-style: solid;
opacity: 1;
border-radius: 50%;
animation: load-kapkap 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.load-kapkap div:nth-child(1) {
border-color: #e90c59;
animation-delay: 0s;
}
.load-kapkap div:nth-child(2) {
border-color: #46dff0;
animation-delay: -0.5s;
}
.loadingio-kapkap {
width: 95px;
height: 95px;
display: block;
overflow: hidden;
}
.load-kapkap {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(0.95);
backface-visibility: hidden;
transform-origin: 0 0;
/* see note above */
}
.load-kapkap div {
box-sizing: content-box;
}
/* spinner */
.spinner {
display: block;
width: 100%;
padding: 80px;
}
.spinner:before {
transform: rotateX(60deg) rotateY(45deg) rotateZ(45deg);
animation: 750ms rotateBefore infinite linear reverse;
}
.spinner:after {
transform: rotateX(240deg) rotateY(45deg) rotateZ(45deg);
animation: 750ms rotateAfter infinite linear;
}
.spinner:before,
.spinner:after {
content: '';
display: block;
position: absolute;
left: 50%;
margin-top: -5em;
margin-left: -5em;
width: 10em;
height: 10em;
transform-style: preserve-3d;
transform-origin: 50%;
transform: rotateY(50%);
perspective-origin: 50% 50%;
perspective: 340px;
/* Використовуємо маску, щоб можна було керувати кольором через background-color */
background-color: var(--topColor);
-webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2NnB4IiBoZWlnaHQ9IjI5N3B4IiB2aWV3Qm94PSIwIDAgMjY2IDI5NyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8dGl0bGU+c3Bpbm5lcjwvdGl0bGU+CiAgICA8ZGVzY3JpcHRpb24+Q3JlYXRlZCB3aXRoIFNrZXRjaCAoaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoKTwvZGVzY3JpcHRpb24+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4KICAgICAgICA8cGF0aCBkPSJNMTcxLjUwNzgxMywzLjI1MDAwMDM4IEMyMjYuMjA4MTgzLDEyLjg1NzcxMTEgMjk3LjExMjcyMiw3MS40OTEyODIzIDI1MC44OTU1OTksMTA4LjQxMDE1NSBDMjE2LjU4MjAyNCwxMzUuODIwMzEgMTg2LjUyODQwNSw5Ny4wNjI0OTY0IDE1Ni44MDA3NzQsODUuNzczNDM0NiBDMTI3LjA3MzE0Myw3NC40ODQzNzIxIDc2Ljg4ODQ2MzIsODQuMjE2MTQ2MiA2MC4xMjg5MDY1LDEwOC40MTAxNTMgQy0xNS45ODA0Njg1LDIxOC4yODEyNDcgMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IDE0NS4yNzczNDQsMjk2LjY2Nzk2OCBDMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IC0yNS40NDkyMTg3LDI1Ny4yNDIxOTggMy4zOTg0Mzc1LDEwOC40MTAxNTUgQzE2LjMwNzA2NjEsNDEuODExNDE3NCA4NC43Mjc1ODI5LC0xMS45OTIyOTg1IDE3MS41MDc4MTMsMy4yNTAwMDAzOCBaIiBpZD0iUGF0aC0xIiBmaWxsPSIjMDAwMDAwIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==);
mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2NnB4IiBoZWlnaHQ9IjI5N3B4IiB2aWV3Qm94PSIwIDAgMjY2IDI5NyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8dGl0bGU+c3Bpbm5lcjwvdGl0bGU+CiAgICA8ZGVzY3JpcHRpb24+Q3JlYXRlZCB3aXRoIFNrZXRjaCAoaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoKTwvZGVzY3JpcHRpb24+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4KICAgICAgICA8cGF0aCBkPSJNMTcxLjUwNzgxMywzLjI1MDAwMDM4IEMyMjYuMjA4MTgzLDEyLjg1NzcxMTEgMjk3LjExMjcyMiw3MS40OTEyODIzIDI1MC44OTU1OTksMTA4LjQxMDE1NSBDMjE2LjU4MjAyNCwxMzUuODIwMzEgMTg2LjUyODQwNSw5Ny4wNjI0OTY0IDE1Ni44MDA3NzQsODUuNzczNDM0NiBDMTI3LjA3MzE0Myw3NC40ODQzNzIxIDc2Ljg4ODQ2MzIsODQuMjE2MTQ2MiA2MC4xMjg5MDY1LDEwOC40MTAxNTMgQy0xNS45ODA0Njg1LDIxOC4yODEyNDcgMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IDE0NS4yNzczNDQsMjk2LjY2Nzk2OCBDMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IC0yNS40NDkyMTg3LDI1Ny4yNDIxOTggMy4zOTg0Mzc1LDEwOC40MTAxNTUgQzE2LjMwNzA2NjEsNDEuODExNDE3NCA4NC43Mjc1ODI5LC0xMS45OTIyOTg1IDE3MS41MDc4MTMsMy4yNTAwMDAzOCBaIiBpZD0iUGF0aC0xIiBmaWxsPSIjMDAwMDAwIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==);
-webkit-mask-size: 10em 10em;
mask-size: 10em 10em;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
mask-position: center;
}
@keyframes rotateBefore {
from {
transform: rotateX(60deg) rotateY(45deg) rotateZ(0deg);
}
to {
transform: rotateX(60deg) rotateY(45deg) rotateZ(-360deg);
}
}
@keyframes rotateAfter {
from {
transform: rotateX(240deg) rotateY(45deg) rotateZ(0deg);
}
to {
transform: rotateX(240deg) rotateY(45deg) rotateZ(360deg);
}
}
/* */
@keyframes ldio-mastercard-o {
0% {
opacity: 1;
transform: translate(0 0)
}
49.99% {
opacity: 1;
transform: translate(40px, 0)
}
50% {
opacity: 0;
transform: translate(40px, 0)
}
100% {
opacity: 0;
transform: translate(0, 0)
}
}
@keyframes ldio-mastercard {
0% {
transform: translate(0, 0)
}
50% {
transform: translate(40px, 0)
}
100% {
transform: translate(0, 0)
}
}
.ldio-mastercard div {
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
top: 30px;
left: 10px;
}
.ldio-mastercard div:nth-child(1) {
background: #ec1c24;
animation: ldio-mastercard 1s linear infinite;
animation-delay: -0.5s;
}
.ldio-mastercard div:nth-child(2) {
background: #fdbd10;
animation: ldio-mastercard 1s linear infinite;
animation-delay: 0s;
}
.ldio-mastercard div:nth-child(3) {
background: #ec1c24;
animation: ldio-mastercard-o 1s linear infinite;
animation-delay: -0.5s;
}
.loadingio-mastercard {
width: 62px;
height: 55px;
display: inline-block;
overflow: hidden;
}
.ldio-mastercard {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(0.62);
backface-visibility: hidden;
transform-origin: 0 0;
/* see note above */
}
.ldio-mastercard div {
box-sizing: content-box;
}
/*ещё более простые табы*/
/*
CSS for the main interaction
*/
.tabset>input[type="radio"] {
position: absolute;
left: -200vw;
}
/*
Styling
*/
.tabset>label {
position: relative;
display: inline-block;
padding: 10px 35px 15px 15px;
border: 1px solid transparent;
border-bottom: 0;
cursor: pointer;
font-weight: 600;
}
.tabset>label::after {
content: "";
position: absolute;
left: 15px;
bottom: 10px;
width: 22px;
height: 4px;
background: #8d8d8d;
}
.tabset>label:hover,
.tabset>input:focus+label {
color: #06c;
}
.tabset>label:hover::after,
.tabset>input:focus+label::after,
.tabset>input:checked+label::after {
background: #06c;
}.tabset>input:checked+label {
border-color: #ccc;
border-bottom: 1px solid var(--bg);
margin-bottom: -1px;
background-color: var(--bg);
}
/*
Demo purposes only
*/
.tabset {
max-width: 65em;
}
/* выпадающее меню */
/*
.headmenu - используется чтобы скрывать меню при уменьшении
*/
.headmenu ul,
.headmenu li,
.headmenu ul li a {
position: relative;
}
.headmenu ul {
list-style: none;
display: none
}
.headmenu ul li {
float: none;
position: relative;
margin: 0;
text-align: center;
display: block;
box-shadow: 1px 1px 2px #000000, 0 0 0.2em #008000;
-webkit-transition: 0.25s linear opacity;
transition: 0.25s linear opacity;
border-radius: 3px;
}#ask li a {
line-height: var(--HT);
color: white;
margin-top: -3px;
text-shadow: 1px 1px 2px #000000, 0 0 0.2em #008000 !important;
display: block;
position: relative;
}#ask:hover ul {
display: block;
transform: scale(0.99);
}#ask li:hover {
transform: scale(1.2);
}
/* НОВОЕ выпадающее меню */
/* таймер */
.timer__items {
width: fit-content;
display: flex;
font-size: 25px;
}
.timer__item {
position: relative;
min-width: 30px;
margin-left: 8px;
margin-right: 8px;
padding-bottom: 10px;
text-align: center;
color: var(--TB);
}
.timer__item:first-child {
margin: 0 5px;
}
.timer__item::before {
content: attr(data-title);
display: block;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
font-size: 11px;
}
.timer__item:not(:last-child)::after {
content: ':';
position: absolute;
right: -11px;
}
.timerFooter {
margin: 15px 0 0 0;
}
.timerFooter .timer__items {
font-size: 22px;
}
.timerFooter .timer__item {
min-width: 25px;
}
.timerFooter .timer__item::before {
display: none;
}
.timerFooter .timer__item:not(:last-child)::after {
right: -8px;
}
.timerFooter .timer__item {
margin: 0 5px;
}
.features {
font-family: 'Lato', sans-serif;
font-size: 1rem;
text-transform: uppercase;
}
.features li {
width: 100%;
text-align: center;
padding: .25em;
}
.drawer-list {
position: fixed;
z-index: 5;
right: 0;
top: 0;
height: 100vh; /* fallback */
height: 100dvh;
width: 100vw;
transform: translate(100vw, 0);
/* ie workaround */
-ms-transform: translatex(-100vw);
pointer-events: none;
transition: width 475ms ease-out, transform 450ms ease, border-radius .7s .1s ease;
border-bottom-left-radius: 100vw;
background: var(--topColor);
}
@media (min-width: 768px) {
.drawer-list {
width: 40vw;
}
}
.drawer-list ul {
height: 100%;
width: 100%;
margin: 0;
padding: 70px 0 60px 0;
overflow: auto;
overflow-x: hidden;
pointer-events: auto;
}
.drawer-lang {
position: absolute;
bottom: 20px;
width: 100%;
justify-content: right;
gap: 15px;
display: flex;
z-index: 1000;
padding-right: 15px;
pointer-events: auto;
}
.drawer-lang .lang-btn {
width: 32px;
height: 32px;
background-size: cover;
background-position: center;
cursor: pointer;
opacity: 0.5;
transition: opacity 0.3s;
pointer-events: auto;
}
.drawer-lang .lang-btn:hover {
opacity: 1;
}
.drawer-lang .lang-btn.active {
transform: scale(1.3);
border: 1px solid var(--contrastColor);
opacity: 1;
}
.drawer-list li {
list-style: none;
text-transform: uppercase;
pointer-events: auto;
white-space: nowrap;
transform: translatex(100vw);
/* ie workaround */
-ms-transform: translatex(-100vw);
}
.drawer-list li:last-child {
margin-top: 13px;
bottom: 0px;
width: 100%;
}
.drawer-list li:first-child a {
margin: 6px 0px 4px 20px;
}
.drawer-list li:first-child a:hover {
background-color:rgba(169, 169, 169, 0.1);
}
.drawer-list li:first-child a:hover span {
color: white;
}
.drawer-list li a {
text-decoration: none;
color: #FEFEFE;
text-align: right;
display: block;
padding: 6px 10px;
font-size: 20px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.drawer-list li a:hover {
cursor: pointer;
background-color: var(--bg);
color: var(--BackgroundFonColorTwo);
}
input.hamb {
display: none;
}
input.hamb:checked~.drawer-list {
transform: translatex(0);
border-bottom-left-radius: 0;
}
input.hamb:checked~.drawer-list li {
transform: translatex(0);
}
input.hamb:checked~.drawer-list li:nth-child(1) {
transition: transform 0.7s 0.05s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamb:checked~.drawer-list li:nth-child(2) {
transition: transform 0.7s 0.1s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamb:checked~.drawer-list li:nth-child(3) {
transition: transform 0.7s 0.15s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamb:checked~.drawer-list li:nth-child(4) {
transition: transform 0.7s 0.2s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamb:checked~.drawer-list li:nth-child(5) {
transition: transform 0.7s 0.25s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamb:checked~.drawer-list li:nth-child(6) {
transition: transform 0.7s 0.3s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamb:checked~.drawer-list li:nth-child(7) {
transition: transform 0.7s 0.35s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamb:checked~.drawer-list li:nth-child(8) {
transition: transform 0.7s 0.4s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamb:checked~.drawer-list li:nth-child(9) {
transition: transform 0.7s 0.45s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamb:checked~.drawer-list li:nth-child(10) {
transition: transform 0.7s 0.5s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamb:checked~.drawer-list li:nth-child(11) {
transition: transform 0.7s 0.55s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamb:checked~.drawer-list li:nth-child(12) {
transition: transform 0.7s 0.6s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamb:checked~.drawer-list li:nth-child(13) {
transition: transform 0.7s 0.65s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamb:checked~.drawer-list li:nth-child(14) {
transition: transform 0.7s 0.7s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamb:checked~.drawer-list li:nth-child(15) {
transition: transform 0.7s 0.75s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamb:checked~.drawer-list li:nth-child(16) {
transition: transform 0.7s 0.8s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamb:checked~.drawer-list li:nth-child(17) {
transition: transform 0.7s 0.85s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamb:checked~.drawer-list li:nth-child(18) {
transition: transform 0.7s 0.9s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamb:checked~.drawer-list li:nth-child(19) {
transition: transform 0.7s 0.95s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamb:checked~.drawer-list li:nth-child(20) {
transition: transform 0.7s 1s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamb:checked~.drawer-list li:nth-child(21) {
transition: transform 0.7s 1.05s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamb:checked~.drawer-list li:nth-child(22) {
transition: transform 0.7s 1.1s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamb:checked~.drawer-list li:nth-child(23) {
transition: transform 0.7s 1.15s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamb:checked~.drawer-list li:nth-child(24) {
transition: transform 0.7s 1.2s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamb:checked~.drawer-list li:nth-child(25) {
transition: transform 0.7s 1.25s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
/*input.hamb:checked ~ .drawer-list li a {padding-right: 15px;}*/
input.hamb:checked~label>i {
background-color: transparent;
transform: rotate(90deg);
}
input.hamb:checked~label>i:before {
transform: translate(-50%, -50%) rotate(315deg);
}
input.hamb:checked~label>i:after {
transform: translate(-50%, -50%) rotate(-315deg);
}
input.hamb:checked~label close {
color: #FEFEFE;
width: 100%;
top: -7px;
}
input.hamb:checked~label open {
color: transparent;
width: 0;
}
label.hamb {
z-index: 9999;
position: relative;
display: block;
height: var(--HT);
bottom: 1px;
padding-left: 4px;
}
label.hamb:hover {
cursor: pointer;
}
label.hamb text close,
label.hamb text open {
text-transform: uppercase;
font-size: 60%;
position: absolute;
transform: translateY(50px);
text-align: center;
overflow: hidden;
transition: width .2s .3s, color .4s .3s;
}
label.hamb text close {
color: transparent;
right: 0;
width: 0;
}
label.hamb text open {
color: #FEFEFE;
width: 100%;
}
label.hamb>i {
position: absolute;
width: 45px;
height: 2px;
padding: 0 4px;
top: 50%;
background-color: #FEFEFE;
pointer-events: auto;
transition-duration: .35s;
transition-delay: .35s;
}
label.hamb>i:before,
label.hamb>i:after {
position: absolute;
display: block;
width: 100%;
height: 2px;
left: 50%;
background-color: #FEFEFE;
content: "";
transition: transform 0.35s;
transform-origin: 50% 50%;
}
label.hamb>i:before {
transform: translate(-50%, -14px);
}
label.hamb>i:after {
transform: translate(-50%, 14px);
}
.apple::after {
content: '';
position: absolute;
width: 1rem;
height: 1.5rem;
top: -4px;
left: 40px;
border-radius: 50% 5%;
background: #4CAF50;
animation: scale 1s infinite alternate;
}
.apple::before {
content: '';
position: absolute;
width: 1rem;
height: 1.5rem;
top: -4px;
left: 40px;
border-radius: 50% 5%;
background: transparent;
transform: rotate(-20deg);
border: 1px solid #555;
box-sizing: border-box;
}
@keyframes scale {
from {
transform: rotate(-20deg) scale(1)
}
to {
transform: rotate(-20deg) scale(0)
}
}
/* */
.lds-ellipsis {
position: sticky;
height: 40px;
display: block;
width: 80px;
}
.lds-ellipsis div {
position: absolute;
top: 13px;
width: 13px;
height: 13px;
border-radius: 50%;
background: #fff;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
left: 8px;
animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
left: 8px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
left: 32px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
left: 56px;
animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}
.loadsearch {
position: sticky;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
width: 47px;
padding: 10px 0 0 0;
}
.loadsearch div {
position: absolute;
width: 20px;
height: 36px;
opacity: 0;
font-family: Helvetica, Arial, sans-serif;
animation: move 2s linear infinite;
-o-animation: move 2s linear infinite;
-moz-animation: move 2s linear infinite;
-webkit-animation: move 2s linear infinite;
transform: rotate(180deg);
-o-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
color: #35C4F0;
}
.loadsearch div:nth-child(2) {
animation-delay: 0.2s;
-o-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
.loadsearch div:nth-child(3) {
animation-delay: 0.4s;
-o-animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
.loadsearch div:nth-child(4) {
animation-delay: 0.6s;
-o-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
.loadsearch div:nth-child(5) {
animation-delay: 0.8s;
-o-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
.loadsearch div:nth-child(6) {
animation-delay: 1s;
-o-animation-delay: 1s;
-moz-animation-delay: 1s;
-webkit-animation-delay: 1s;
}
.loadsearch div:nth-child(7) {
animation-delay: 1.2s;
-o-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
}
@keyframes move {
0% {
left: 0;
opacity: 0;
}
35% {
left: 41%;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
65% {
left: 59%;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
100% {
left: 100%;
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
opacity: 0;
}
}
@-moz-keyframes move {
0% {
left: 0;
opacity: 0;
}
35% {
left: 41%;
-moz-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
65% {
left: 59%;
-moz-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
100% {
left: 100%;
-moz-transform: rotate(-180deg);
transform: rotate(-180deg);
opacity: 0;
}
}
@-webkit-keyframes move {
0% {
left: 0;
opacity: 0;
}
35% {
left: 41%;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
65% {
left: 59%;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
100% {
left: 100%;
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
opacity: 0;
}
}
@-o-keyframes move {
0% {
left: 0;
opacity: 0;
}
35% {
left: 41%;
-o-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
65% {
left: 59%;
-o-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
100% {
left: 100%;
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
opacity: 0;
}
}
/* */
@keyframes rota {
to {
transform: rotate(360deg);
}
}
@keyframes opa {
12.0% {
opacity: 0.80;
}
19.5% {
opacity: 0.88;
}
37.2% {
opacity: 0.64;
}
40.5% {
opacity: 0.52;
}
52.7% {
opacity: 0.69;
}
60.2% {
opacity: 0.60;
}
66.6% {
opacity: 0.52;
}
70.0% {
opacity: 0.63;
}
79.9% {
opacity: 0.60;
}
84.2% {
opacity: 0.75;
}
91.0% {
opacity: 0.87;
}
}
.spinnersu {
font-size: 35px;
width: 1em;
height: 1em;
margin: 3px auto;
position: relative;
list-style: none;
border-radius: 50%;
border: .01em solid rgba(150, 150, 150, 0.15);
background: rgba(150, 150, 150, 0.1);
box-shadow: 0 0 1.5em rgba(0, 0, 0, 0.4);
}
.spinnersu:before {
content: "\0020";
position: absolute;
width: .65em;
height: .65em;
border: .01em solid rgba(150, 150, 150, 0.15);
border-radius: 50%;
top: 17%;
left: 17%;
background: rgba(150, 150, 150, 0.1);
}
.spinnersu:after {
content: "\0020";
position: absolute;
width: .25em;
height: .25em;
border: .01em solid rgba(150, 150, 150, 0.15);
border-radius: 50%;
top: 38%;
left: 38%;
background: rgba(150, 150, 150, 0.1);
}
.spinnersu li {
width: .2em;
height: .2em;
position: absolute;
border-radius: 50%;
}
/* blue */
.spinnersu li:nth-child(1) {
background: #0076c1;
top: 0;
left: 50%;
margin-left: -.1em;
transform-origin: 50% 250%;
animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
}
/* red */
.spinnersu li:nth-child(2) {
background: #ff003c;
top: 60%;
right: 20%;
margin-top: -.1em;
transform-origin: -50% 0;
animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
}
/* yellow */
.spinnersu li:nth-child(3) {
background: #fabe28;
bottom: 0;
left: 50%;
margin-left: -.1em;
transform-origin: 50% -150%;
animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
}
/* green */
.spinnersu li:nth-child(4) {
background: #88c100;
top: 60%;
left: 20%;
margin-top: -.1em;
transform-origin: 150% 0%;
animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;
}
.input-file-row {
display: inline-block;
}
.input-file {
position: relative;
display: inline-block;
width: 100%;
}
.input-file span {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
text-decoration: none;
vertical-align: middle;
text-align: center;
background-color: var(--BackgroundFonColorTwo);
padding: 10px 20px;
margin: 0;
transition: background-color 0.2s;
width: 100%;
}
.input-file input[type=file] {
position: absolute;
z-index: -1;
opacity: 0;
display: block;
width: 0;
height: 0;
}
/* Focus */
.input-file input[type=file]:focus+span {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}
/* Hover/active */
.input-file:hover span {
background-color: #59be6e;
}
.input-file:active span {
background-color: #2E703A;
}
/* Disabled */
.input-file input[type=file]:disabled+span {
background-color: #eee;
}
.input-file-list-item {
display: inline-block;
margin: 0 15px 15px;
width: 150px;
vertical-align: top;
position: relative;
}
.input-file-list-item img {
width: 150px;
}
.input-file-list-name {
text-align: center;
display: block;
font-size: 12px;
text-overflow: ellipsis;
overflow: hidden;
}
.input-file-list-remove {
color: #fff;
text-decoration: none;
display: inline-block;
position: absolute;
padding: 0;
margin: 0;
top: 5px;
right: 5px;
background: #ff0202;
width: 16px;
height: 19px;
text-align: center;
line-height: 16px;
border-radius: 30%;
}
.ribbon-3 {
position: absolute;
top: -6.1px;
right: 6px;
}
.ribbon-3:after {
position: absolute;
content: "";
width: 0;
height: 0;
right: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 12px solid #F8463F;
}
.ribbon-3 span {
position: relative;
display: block;
text-align: center;
background: #F8463F;
font-size: 17px;
line-height: 1;
padding: 10px 6px 4px;
border-top-right-radius: 8px;
width: 50px;
}
.ribbon-3 span:before,
.ribbon-3 span:after {
position: absolute;
content: "";
}
.ribbon-3 span:before {
height: 6px;
width: 6px;
left: -6px;
top: 0;
background: #F8463F;
}
.ribbon-3 span:after {
height: 6px;
width: 8px;
left: -8px;
top: 0;
border-radius: 8px 8px 0 0;
background: #C02031;
}
.section {
z-index: 1;
position: relative;
}
#menugoal {
z-index: 6;
width: 100%;
position: fixed;
bottom: calc(10px + var(--HF));
}
/*work button*/
.edit {
position: absolute;
width: 10px;
height: 13px;
border: 2px solid white;
border-radius: 2px;
display: inline-block;
right: 35px;
top: 20px;
}
.edit:after,
.edit:before {
content: "";
position: absolute;
left: -3px;
}
.edit:after {
border: 2px solid white;
border-radius: 2px;
width: 14px;
height: 24px;
background: white;
transform: rotate(-90deg);
-moz-transition: -moz-transform 0.3s 0.4s, width 0.3s, height 0.3s, top 0.3s;
-o-transition: -o-transform 0.3s 0.4s, width 0.3s, height 0.3s, top 0.3s;
-webkit-transition: -webkit-transform 0.3s, width 0.3s, height 0.3s, top 0.3s;
-webkit-transition-delay: 0.4s, 0s, 0s, 0s;
transition-delay: 0.4s, 0s, 0s, 0s;
transition: transform 0.3s 0.4s, width 0.3s, height 0.3s, top 0.3s;
}
.admenu {
z-index: 11;
border: none;
outline: 0;
position: relative;
width: 100%;
transform: translateY(50%);
transition: all 0.3s;
cursor: pointer;
height: 100%;
top: -30px;
}
.admenu.open .edit {
-moz-transition: all 0.2s 0.2s;
-o-transition: all 0.2s 0.2s;
-webkit-transition: all 0.2s;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
transition: all 0.2s 0.2s;
transform: rotate(45deg);
width: 24px;
height: 1px;
top: 30px;
left: 30px;
background: white;
}
.admenu.open .edit:after {
position: absolute;
width: 24px;
height: 1px;
top: -2px;
left: -2px;
transform: rotate(90deg);
border-radius: 2px;
-moz-transition: width 0.1s 0.1s, top 0.1s 0.1s, -moz-transform 0.3s;
-o-transition: width 0.1s 0.1s, top 0.1s 0.1s, -o-transform 0.3s;
-webkit-transition: width 0.1s, top 0.1s, -webkit-transform 0.3s;
-webkit-transition-delay: 0.1s, 0.1s, 0s;
transition-delay: 0.1s, 0.1s, 0s;
transition: width 0.1s 0.1s, top 0.1s 0.1s, transform 0.3s;
}
.admenu::-moz-focus-inner {
border: 0;
}
/**/
.box {
position: absolute;
justify-content: center;
align-items: center;
margin: 60px 30px 0 44px;
background: #060c21;
/* Change */
transition: 0.3s;
float: left;
display: block;
}
.box,
.box .imgBx {
width: 250px;
height: 250px;
}
.box.box:hover {
height: 298px;
}
.box .imgBx {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.box .imgBx img {
max-width: 100%;
opacity: 0.8;
transition: 0.3s;
content: "";
width: 0px;
}
.box:hover .imgBx img {
opacity: 1;
}
.box:before {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: #fff;
z-index: -1;
}
.box:after {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: #fff;
z-index: -2;
filter: blur(7px);
}
.box:after,
.box:before {
background: linear-gradient(235deg, rgba(33, 150, 243, 1), rgba(0, 0, 0, 1), rgba(240, 0, 0, 1));
}
.box:nth-child(2):before,
.box:nth-child(2):after {
/* not supported 😣 */
background: linear-gradient(235deg, #2196f3, #010615, #F00000);
}
.box .contenth {
position: absolute;
bottom: 1px;
left: 0px;
right: 0px;
background: rgba(0, 0, 0, 0.04);
justify-content: center;
align-items: center;
opacity: 0;
transition: 0.3s;
width: 100%;
}
.box:hover .contenth {
opacity: 1;
}
.box .contenth h2 {
font-size: 20px;
color: #fff;
font-weight: 500;
/* just one style 😐 */
line-height: 20px;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0px 0px 3px 0;
bottom: 0;
}
.box .contenth h2 span {
font-size: 14px;
color: #fff;
font-weight: 200;
/* just one style 😐 */
letter-spacing: 2px;
}
.shadow {
position: relative;
border-radius: 5px;
}
.shadow:before,
.shadow:after {
content: '';
position: absolute;
top: -2px;
left: -2px;
background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000);
background-size: 400%;
width: calc(100% + 4px);
height: calc(100% + 4px);
z-index: -1;
animation: animate 20s linear infinite;
border-radius: 5px;
}
.shadow:after {
filter: blur(20px);
}
@keyframes animate {
0% {
background-position: 0 0;
}
50% {
background-position: 300% 0;
}
100% {
background-position: 0 0;
}
}
@media screen and (max-width: 1200px) {
#ask,
.akc #akc,
#akciya {
display: none !important;
}
}
@media screen and (min-width: 1170px) {
.logo {
max-width: 700px
}
.baseprofile,
.swowcase {
right: 70px;
}
}
@media screen and (max-width: 1000px) {
.logo {
max-width: 500px;
}
}
@media screen and (max-width: 928px) {
.beneficialhide,
.beneficialplustwo {
display: none !important;
}
.shirina p {
font-size: 15px
}
.baseprofile,
.swowcase {
right: 30px;
}
}
@media screen and (max-width: 860px) {
#calcul {
display: none !important;
}
}
@media screen and (max-width: 800px) {
.logo h1 {
font-size: 130%;
}
}
@media screen and (min-width: 690px) {
#fbform {
min-width: 310px;
margin: auto;
width: 42%;
}
.snfb {
display: none;
}
/* .headmenu select,.snfb,.mh {display: none}*/
#feedback {
display: block !important;
}
}
@media screen and (max-width: 690px) {
.logo h1 {
width: auto;
}
.snfb {
display: inline;
}
.sprfb,
#feedback,
#home,
#cabin {
display: none !important;
}
/* Тут мы начинаем показывать мобильное меню*/
.mh {
display: block;
}
#feedback {
margin-right: 10px;
}
nav select {
margin-left: 26% !important;
position: absolute;
margin-right: 0px !important;
}
#formDiv {
margin: auto;
height: 100%;
float: none;
}
h2 {
font-size: 120%;
}
.baseprofile {
top: 380px;
position: absolute;
left: 0;
right: 0;
}
}
@media screen and (max-width: 632px) {
.trumbowyg-box {
width: 310px !important;
}
}
@media screen and (max-width: 590px) {
nav select {
margin: 0 !important;
width: 100% !important;
}
label .green {
font-size: 150% !important;
}.headmenu {
display: none !important;
}
.selicard {
width: 95%
}
.opismodal,
h1 {
font-weight: 300;
}
}
@media screen and (max-width: 555px) {
.alluvedpay,
.uvedompay {
width: 310px;
}
}
@media screen and (max-width: 530px) {
table.uslov img,
#calcul,
#adaptiv,
.uslov td span,
.calccentral {
display: none !important;
}
.shirina {
padding: 12px 0 0 0 !important;
}
.box,
.box .imgBx {
width: 190px !important;
height: 190px !important;
}
.box:hover {
height: 239px !important;
}
.box .contenth h2 {
font-size: 16px;
margin: 0px !important;
}
.baseprofile {
top: 320px;
}
.toph {
margin-top: 4px;
margin-bottom: 4px
}
}
@media screen and (max-width: 470px) {
.beneficial {
font-size: 65%;
width: 98%;
}
.infodiv {
margin: 5px 2px 2px 2px;
}
.tabset>label {
padding: 10px 9px 15px 5px;
}
.tabset>label::after {
left: 5px;
}
.logo {
width: 100%
}
.opismodal,
h1 {
font-size: 100% !important;
}
}
@media screen and (max-width: 370px) {
#ConsciousChoice .korpus {
width: 98%;
}
.avatar:empty::after {
font-size: 70px;
}
.revtop {
margin: 15px 3px 5px 3px;
}
.spoilask>span {
font-size: 90%
}
.box,
.box .imgBx {
width: 150px !important;
height: 150px !important;
}
.box:hover {
height: 192px !important;
}
.box .imgBx {
padding: 3px;
}
.contenth span {
font-size: 80% !important;
}
.box .contenth h2 {
margin: 3px 0;
font-size: 14px;
}
.baseprofile {
top: 270px;
}
.purse {
font-size: 70%;
}
}
@media screen and (max-width: 320px) {
.logo h1 {
font-size: 90%;
}
}
/* Універсальний перемикач (alt-toggle) */
.alt-toggle {
--color: #d55;
--text-color: #fff;
--border: 0.1em;
--time: 0.5s;
--border-width: max(1px, var(--border));
color: var(--color);
appearance: none;
position: relative;
font-size: 1em;
width: 1em;
height: 1em;
margin: 0 1em;
box-shadow: inset 0 0 0 var(--border-width);
box-sizing: border-box;
transform: translate(0, 0);
transition: transform var(--time), color var(--time);
cursor: pointer;
}
@media print {
.alt-toggle, .alt-toggle::before, .alt-toggle::after {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
@media (prefers-reduced-motion) {
.alt-toggle, .alt-toggle::before, .alt-toggle::after {
animation-duration: 0s !important;
transition-duration: 0s !important;
}
}
.perspective.modalview .container::after {
background: rgba(0,0,0,0.7);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.checkbox-wrapper-2 .checnew {
appearance: none;
background-color: #dfe1e4;
border-radius: 72px;
border-style: none;
flex-shrink: 0;
height: 20px;
margin: 0;
position: relative;
width: 30px;
}
.checkbox-wrapper-2 .checnew::before {
bottom: -6px;
content: "";
left: -6px;
position: absolute;
right: -6px;
top: -6px;
}
.checkbox-wrapper-2 .checnew,
.checkbox-wrapper-2 .checnew::after {
transition: all 100ms ease-out;
}
.checkbox-wrapper-2 .checnew::after {
background-color: #fff;
border-radius: 50%;
content: "";
height: 14px;
left: 3px;
position: absolute;
top: 3px;
width: 14px;
}
.checkbox-wrapper-2 input[type=checkbox] {
cursor: default;
}
.checkbox-wrapper-2 .checnew:hover {
background-color: #c9cbcd;
transition-duration: 0s;
}
.checkbox-wrapper-2 .checnew:checked {
background-color: #6e79d6;
}
.checkbox-wrapper-2 .checnew:checked::after {
background-color: #fff;
left: 13px;
}
.checkbox-wrapper-2 :focus:not(.focus-visible) {
outline: 0;
}
.checkbox-wrapper-2 .checnew:checked:hover {
background-color: #535db3;
}
/* Уніфіковані стилі реферального попапа */
.ref-popup {
--ref-tx: -50%;
position: absolute;
bottom: 70px;
left: 50%;
transform: translateX(var(--ref-tx));
width: 300px;
background: var(--topColor);
border: 1px solid #333;
padding: 10px 20px;
z-index: 1000;
animation: refFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 0 !important;
}
@keyframes refFadeIn {
from { opacity: 0; transform: translate(var(--ref-tx), 10px); }
to { opacity: 1; transform: translate(var(--ref-tx), 0); }
}
/* Стрілочка (зовнішня рамка) */
.ref-popup::after {
content: '';
position: absolute;
bottom: -11px;
left: 50%;
transform: translateX(-50%);
border-width: 10px 10px 0;
border-style: solid;
border-color: #333 transparent transparent;
}
/* Стрілочка (внутрішня заливка фоном попапа) */
.ref-popup::before {
content: '';
position: absolute;
bottom: -9.5px;
left: 50%;
transform: translateX(-50%);
border-width: 10px 10px 0;
border-style: solid;
border-color: var(--topColor) transparent transparent;
z-index: 2;
}
/* Специфічні класи для позиціонування */
.ref-popup.ref-popup-left {
--ref-tx: 0%;
left: 10px;
}
.ref-popup.ref-popup-left::after,
.ref-popup.ref-popup-left::before {
left: 20px;
transform: none;
}
.ref-popup.ref-popup-center {
--ref-tx: -50%;
left: 50%;
width: calc(100% - 20px);
max-width: 350px;
}
.ref-popup .btn { border-radius: 0 !important; transition: all 0.2s ease; }
.ref-popup .btn:hover { filter: brightness(1.2); transform: translateY(-2px); }
#ref_qr_trigger:hover { transform: scale(1.05); }
.tglYeah {
display: none;
}
.tglYeah,
.tglYeah:after,
.tglYeah:before,
.tglYeah *,
.tglYeah *:after,
.tglYeah *:before,
.tglYeah + .tgl-btn {
box-sizing: border-box;
}
.tglYeah::-moz-selection,
.tglYeah:after::-moz-selection,
.tglYeah:before::-moz-selection,
.tglYeah *::-moz-selection,
.tglYeah *:after::-moz-selection,
.tglYeah *:before::-moz-selection,
.tglYeah + .tgl-btn::-moz-selection,
.tglYeah::selection,
.tglYeah:after::selection,
.tglYeah:before::selection,
.tglYeah *::selection,
.tglYeah *:after::selection,
.tglYeah *:before::selection,
.tglYeah + .tgl-btn::selection {
background: none;
}
.tglYeah + .tgl-btn {
outline: 0;
display: block;
width: 4em;
height: 2em;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tglYeah + .tgl-btn:after,
.tglYeah + .tgl-btn:before {
position: relative;
display: block;
content: "";
width: 50%;
height: 100%;
}
.tglYeah + .tgl-btn:after {
left: 0;
}
.tglYeah + .tgl-btn:before {
display: none;
}
.tglYeah:checked + .tgl-btn:after {
left: 50%;
}
.tgl-flip + .tgl-btn:after,
.tgl-flip + .tgl-btn:before {
display: inline-block;
transition: all 0.4s ease;
width: 100%;
text-align: center;
position: absolute;
line-height: 2em;
font-weight: bold;
color: #fff;
position: absolute;
top: 0;
left: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 4px;
}
.tgl-flip + .tgl-btn:after {
content: attr(data-tg-on);
background: #02C66F;
transform: rotateY(-180deg);
}
.tgl-flip + .tgl-btn:before {
background: var(--cardColor);
content: attr(data-tg-off);
}
.tgl-flip + .tgl-btn:active:before {
transform: rotateY(-20deg);
}
.tgl-flip:checked + .tgl-btn:before {
transform: rotateY(180deg);
}
.tgl-flip:checked + .tgl-btn:after {
transform: rotateY(0);
left: 0;
background: var(--BackgroundFonColorTwo);
}
.tgl-flip:checked + .tgl-btn:active:after {
transform: rotateY(20deg);
}
/* Універсальні стилі для дропдаун-іконки (.ddwn) */
.ddwn {
display: inline-block;
vertical-align: middle;
width: 22px;
height: 22px;
transition: transform 0.3s ease, background-color 0.3s ease, stroke 0.3s ease, color 0.3s ease;
}
/* Обертання при активному спойлері */
.spoiler-trigger.active .ddwn {
transform: rotate(180deg);
}
/* Логіка для картинки (img) - динамічне фарбування через маску */
img.ddwn {
background-color: var(--topColor);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
/* Приховуємо оригінальний чорний колір img та замінюємо його маскою */
content: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E");
}
/* Визначаємо маски для конкретних джерел */
img[src*="chevron-down"].ddwn {
-webkit-mask-image: url('../../img/svg/chevron-down.svg');
mask-image: url('../../img/svg/chevron-down.svg');
}
img[src*="dropDowh"].ddwn {
-webkit-mask-image: url('../../img/svg_old/dropDowh.svg');
mask-image: url('../../img/svg_old/dropDowh.svg');
}
/* Логіка для інлайнового SVG (якщо десь використовується svg::inc) */
svg.ddwn {
stroke: var(--topColor);
color: var(--topColor);
fill: none;
}
.container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0px;
opacity: 0;
background: rgba(0,0,0,0.4);
/* the transition delay of the height needs to be synced with the container transition time */
-webkit-transition: opacity 0.4s, height 0s 0.4s;
transition: opacity 0.4s, height 0s 0.4s;
}
.wrapper {
position: relative;
}
.component {
margin: 0 auto;
width: 60%;
text-align: justify;
font-size: 1.5em;
}
.animate .container::after {
opacity: 1;
height: 101%;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
/* Media Queries */
@media screen and (max-width: 77em) {
.outer-nav.top {
top: 15%;
}
}
@media screen and (max-width: 36.625em), screen and (max-height: 41.75em) {
.outer-nav.top {
top: 5%;
}
}
@media screen and (max-width: 31em), screen and (max-height: 36.2em) {
.outer-nav.horizontal,
.outer-nav.vertical {
font-size: 1.2em;
width: 6.8em;
}
}
@media screen and (max-height: 31.6em) {
.outer-nav a {
margin-bottom: 20px;
}
}
/* НОВІ СТИЛІ ДЛЯ ADMENU ТА ADMINMENU */
.admenu {
width: 80px !important;
height:var(--HF) !important;
background: #202020 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
color: #fff !important;
transition: background 0.3s !important;
vertical-align: middle !important;
z-index: 1000 !important;
}
.admenu i.edit {
filter: brightness(0) invert(1) !important;
display: block !important;
font-size: 24px !important;
transition: transform 0.3s !important;
}
.admenu.open i.edit {
transform: rotate(45deg) !important;
}
#adminMenu {
display: none;
position: fixed;
bottom: var(--HF);
background-color: var(--topColor);
padding: 15px 5px;
right: 0;
width: 100%;
overflow-y: auto !important;
height: calc(100% - var(--HF) - var(--HT));
scrollbar-width: none;
}
/* СТАНДАРТНИЙ РЕЖИМ СІТКИ (layout-grid) */
.admin-menu-container.layout-grid .admin-menu-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important; /* 3 іконки на мобільному за замовчуванням */
gap: 10px !important;
max-width: 1000px !important;
margin: 0 auto !important;
padding: 0 10px !important;
}
@media screen and (min-width: 768px) {
.admin-menu-container.layout-grid .admin-menu-grid {
grid-template-columns: repeat(4, 1fr) !important; /* Більше на великих екранах */
gap: 20px !important;
}
}
.admin-menu-container .admin-menu-grid.single-item {
grid-template-columns: 1fr !important;
}
@media screen and (min-width: 1200px) {
.admin-menu-container.layout-grid .admin-menu-grid {
grid-template-columns: repeat(6, 1fr) !important;
}
}
@media screen and (max-width: 768px) {
.admin-menu-container.layout-list .admin-menu-item {
font-size: 85% !important;
min-height: 45px !important;
max-height: 60px;
}
}
.admin-menu-container .admin-menu-item {
text-decoration: none !important;
display: flex !important;
align-items: center !important;
justify-content: center;
transition: background 0.2s, transform 0.1s !important;
text-align: center !important;
min-height: 60px;
border-radius: 0 !important;
}
.admin-menu-container .admin-menu-item:hover {
transform: translateY(-2px) !important;
}
.admin-menu-container .admin-menu-item:active {
transform: translateY(0) !important;
}
/* РЕЖИМ СПИСКУ (layout-list) */
.admin-menu-container.layout-list .admin-menu-grid {
display: grid !important;
/* Використовуємо auto-fit для автоматичного центрування та адаптивності */
grid-template-columns: repeat(auto-fit, minmax(280px, 420px)) !important;
justify-content: center !important;
gap: 15px 20px !important;
padding: 0 10px !important;
width: 100% !important;
max-width: 1400px !important;
margin: 0 auto !important;
}
@media screen and (max-width: 450px) {
.admin-menu-container.layout-list .admin-menu-item {
max-height: 60px;
min-height: 45px;
}
}
.admin-menu-container.layout-list .admin-menu-item {
display: flex !important;
flex-direction: row !important; /* Рядок замість стовпця */
justify-content: flex-start !important;
align-items: center !important; /* Центрування по вертикалі */
padding: 10px 15px !important;
text-align: left !important;
border-radius: 0 !important;
background: var(--cardColor);
}
.admin-menu-container.layout-list .admin-menu-icon {
margin-right: 15px !important;
margin-bottom: 0 !important; /* Скидаємо маргін з cabinet.css */
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 60px !important; /* Компактніший розмір для списку */
height: 60px !important;
flex-shrink: 0 !important;
background-color: transparent !important; /* Прибираємо фон іконки з кабмінівських стилів */
box-shadow: none !important;
}
.admin-menu-container.layout-list .admin-menu-icon svg,
.admin-menu-container.layout-list .admin-menu-icon img {
width: 32px !important;
height: 32px !important;
}
.admin-menu-container.layout-list .admin-menu-title {
display: -webkit-box !important;
line-clamp: 2 !important;
box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.25 !important;
text-align: left !important;
flex: 1 !important;
height: auto !important; /* Скидаємо фіксовану висоту */
align-items: center !important;
justify-content: flex-start !important;
font-size: 14px !important;
}
/* Кнопка перемикача у футері */
.menu-layout-toggle {
opacity: 0;
transition: opacity 0.3s ease;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
}
.menu-layout-toggle.show {
opacity: 1;
}
.admin-menu-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 10px;
}
.admin-menu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, 110px);
justify-content: center;
gap: 20px 10px;
width: 100%;
max-width: 580px;
margin: 0 auto;
}
.admin-menu-item {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: inherit;
}
.admin-menu-icon {
width: 110px;
height: 100px;
background-color: var(--ButtonColor);
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 6px;
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Легка тінь замість рамки */
}
.admin-menu-item:hover .admin-menu-icon {
transform: scale(1.05);
}
.admin-menu-icon img, .admin-menu-icon svg {
width: 60%;
height: 70%;
object-fit: contain;
}
.admin-menu-title {
font-size: 12px;
font-weight: 500;
text-align: center;
width: 100%;
height: 30px;
display: flex;
align-items: flex-start;
justify-content: center;
line-height: 1.2;
overflow: hidden;
word-break: break-word;
color: var(--TB);
}