* {
  box-sizing: border-box;
  outline: none; }

html {
  height: 100%; }

body {
  color: #444;
  margin: 0;
  padding: 0;
  position: relative;
  width: 370px;
  height: 470px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 400;
  font-size: 18px;
  overflow: hidden;
  background: white; }

body:not(.is-preview) {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden; }

.Push-wrapper {
  position: relative;
  margin: 20px auto;
  padding-top: 0;
  width: 400px;
  height: auto; }

.Push-wrapper--mobile {
  display: none;
  width: 100%;
  padding-top: 0; }

body:not(.is-preview):not(.granted):not(.denied).mobile-chrome {
  -ms-flex-pack: start;
      justify-content: flex-start; }

.mobile-chrome .Push-wrapper--mobile {
  display: block; }

.mobile-chrome .Push-wrapper--desktop {
  display: none; }

body.is-preview {
  height: auto;
  overflow: auto; }

body.is-preview .PushTip-ImageTitle {
  font-size: 14px;
  color: #ccc;
  margin: 5px 0;
  display: block; }

.PushTip-ImageTitle {
  display: none; }

.PushTip-title {
  width: 100%;
  padding: 21px 0;
  height: auto;
  text-align: center;
  box-sizing: content-box; }

.PushTip-titleItem {
  color: #363833;
  width: 80%;
  font-size: 18px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 400;
  margin: 0 auto; }

.PushTip-imageWrap {
  text-align: center;
  display: none; }

.PushTip-image {
  width: 234px;
  height: 234px; }

[data-os="windows"],
[data-os="mac-os"] {
  display: none; }

.is-preview [data-os="windows"],
.is-preview [data-os="mac-os"] {
  display: block; }

.windows.chrome [data-os="windows"][data-browser="chrome"],
.mac-os.chrome [data-os="mac-os"][data-browser="chrome"],
.windows.firefox [data-os="windows"][data-browser="firefox"],
.mac-os.firefox [data-os="mac-os"][data-browser="firefox"],
.windows.opera [data-os="windows"][data-browser="opera"],
.mac-os.opera [data-os="mac-os"][data-browser="opera"],
.windows.yandex-browser [data-os="windows"][data-browser="yandex-browser"],
.mac-os.yandex-browser [data-os="mac-os"][data-browser="yandex-browser"] {
  display: block; }

.state {
  display: none; }

.PushTip {
  height: auto;
  box-shadow: none;
  background-color: transparent; }

body.mobile-chrome .Push-wrapper--mobile {
  display: block; }

body.mobile-chrome .Push-wrapper--desktop {
  display: none; }

.push-no-work,
.push-granted,
.push-denied {
  text-align: center; }

.state {
  display: none; }

body.granted .push-granted {
  display: block; }

body.denied .push-denied {
  display: block; }

body.push-unsupported .push-no-work {
  display: block; }

body:not(.push-unsupported):not(.granted):not(.denied) .push-default {
  display: block; }

.Push-wrapperInner {
  text-align: center; }

.Pic__arrow {
  height: 50px;
  display: inline-block;
  vertical-align: top; }

.Pic__down,
.Pic__up {
  width: 80px;
  display: inline-block;
  vertical-align: top; }

.opera .hide-in-opera {
  display: none; }

.opera .Push-wrapper {
  padding-top: 100px; }

.opera .br-in-opera {
  display: block; }

@media (min-width: 480px) {
  .Push-wrapper {
    padding-top: 0; } }