/* Use local versions of fonts bcs if Google is not accessible the page load will hang

/* Google: Noto Sans */
/* @import url('https://fonts.googleapis.com/css?family=Noto+Sans&display=swap'); */

/* cyrillic-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/strelkaclientssite/res/webtemplate/fonts/noto_sans/o-0iipqlx3qulc5a4pnr6draw_0.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/strelkaclientssite/res/webtemplate/fonts/noto_sans/o-0iipqlx3qulc5a4pnr4traw_0.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* devanagari */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/strelkaclientssite/res/webtemplate/fonts/noto_sans/o-0iipqlx3qulc5a4pnr5draw_0.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* greek-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/strelkaclientssite/res/webtemplate/fonts/noto_sans/o-0iipqlx3qulc5a4pnr6traw_0.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/strelkaclientssite/res/webtemplate/fonts/noto_sans/o-0iipqlx3qulc5a4pnr5jraw_0.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/strelkaclientssite/res/webtemplate/fonts/noto_sans/o-0iipqlx3qulc5a4pnr6jraw_0.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/strelkaclientssite/res/webtemplate/fonts/noto_sans/o-0iipqlx3qulc5a4pnr6zraw_0.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/strelkaclientssite/res/webtemplate/fonts/noto_sans/o-0iipqlx3qulc5a4pnr5tra.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Google: Roboto */
/* @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); */

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/strelkaclientssite/res/webtemplate/fonts/roboto/kfomcnqeu92fr1mu72xkozy.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/strelkaclientssite/res/webtemplate/fonts/roboto/kfomcnqeu92fr1mu5mxkozy.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/strelkaclientssite/res/webtemplate/fonts/roboto/kfomcnqeu92fr1mu7mxkozy.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/strelkaclientssite/res/webtemplate/fonts/roboto/kfomcnqeu92fr1mu4wxkozy.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/strelkaclientssite/res/webtemplate/fonts/roboto/kfomcnqeu92fr1mu7wxkozy.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/strelkaclientssite/res/webtemplate/fonts/roboto/kfomcnqeu92fr1mu7gxkozy.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/strelkaclientssite/res/webtemplate/fonts/roboto/kfomcnqeu92fr1mu4mxk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Other fonts */

/* Оставляем старое название для обратной совместимости. Слово bold здесь ломает шрифт */
@font-face {
    font-family: 'Noto Sans Bold';
    src: url("/static/strelkaclientssite/res/webtemplate/fonts/noto-sans-bold.ttf");
    font-weight: bold;
    font-display: swap;
}
/* Добавляем ПРАВИЛЬНОЕ объявление для той же самой ссылки */
@font-face {
    font-family: 'Noto Sans'; /* Общее имя с основным шрифтом */
    src: url("/static/strelkaclientssite/res/webtemplate/fonts/noto-sans-bold.ttf");
    font-weight: 700;        /* Привязываем этот файл к весу 700 */
    font-display: swap;
}



@font-face {
    font-family: 'Raleway';
    src: url("/static/strelkaclientssite/res/webtemplate/fonts/raleway_bold.ttf");
    font-weight: bold;
    font-display: swap;
}
@font-face {
    font-family: 'Raleway';
    src: url("/static/strelkaclientssite/res/webtemplate/fonts/raleway_light.ttf");
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'Raleway';
    src: url("/static/strelkaclientssite/res/webtemplate/fonts/raleway_medium.ttf");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Raleway';
    src: url("/static/strelkaclientssite/res/webtemplate/fonts/raleway_regular.ttf");
    font-weight: normal;
    font-display: swap;
}



body {
  margin: 0;

  font-family: 'Noto Sans', 'Roboto', Arial;
  /* font-family: 'Roboto', Arial; */
   /* font-family: 'Noto Sans', Arial; */

  -webkit-font-feature-settings: "lnum";
  -moz-font-feature-settings: "lnum";
  -ms-font-feature-settings: "lnum";
  -o-font-feature-settings: "lnum";
  font-feature-settings: "lnum";
}

html {
  /* Prevent highlight during mobile taps */
  -webkit-tap-highlight-color:transparent;
}

html.noscroll {
  /* height: 100%;  */

  /* Don't hide overflow bcs it will move content. Instead we will block scroll in JS */
  /* overflow: hidden; */
}

/* Show progress image for text */
p.progress:not(.custom-progress) {
  background-image: url("/static/strelkaclientssite/res/webtemplate/ui/rol_progr_green.gif");
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center center;
  color: rgba(0, 0, 0, 0);
}

div.progress:not(.custom-progress) {
  background-image: url("/static/strelkaclientssite/res/webtemplate/ui/rol_progr_green.gif");
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center center;
  color: rgba(0, 0, 0, 0);
}

span.progress:not(.custom-progress) {
  background-image: url("/static/strelkaclientssite/res/webtemplate/ui/rol_progr_green.gif");
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center center;
  color: rgba(0, 0, 0, 0);
}

a.progress:not(.custom-progress) {
  background-image: url("/static/strelkaclientssite/res/webtemplate/ui/rol_progr_green.gif");
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center center;
  color: rgba(0, 0, 0, 0);
}

.unselectable {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

/* Hide Safari autofill buttons */
input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}

/* Show placdeholders on same vertical position */
::-webkit-input-placeholder { /* WebKit browsers */
  line-height: 1.4em;
  color: #a1a0a0;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  line-height: 1.4em;
  color: #a1a0a0;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  /* line-height: 1.4em; */
  color: #a1a0a0;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
  line-height: 1.4em;
  color: #a1a0a0;
}

div.container {
  width: 1530px;
  margin: 0 auto;
}
@media screen and (max-width: 1599px) {
  div.container {
    width: 1110px;
  }
}
@media screen and (max-width: 1199px) {
  div.container {
    width: 701px;
  }
}
@media screen and (max-width: 767px) {
  div.container {
    width: calc(100% - 30px);
    margin: 0 15px 0 15px;
  }
}

span.strelka-mark {
  display: block;

  background-repeat: no-repeat;
  background-image: url("/static/strelkaclientssite/res/webtemplate/strelka_mark.svg");
  background-size: 14px auto;
  background-position: 0 0;
}

/* Shake element to pay user attention to it */
.repeatable-shake {
  animation: shake 0.72s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-0.9px, -0.9px, 0);
  }
  20%, 80% {
    transform: translate3d(0.9px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-0.9px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(0.9px, -0.9px, 0);
  }
}

/* Shake element when entering to error state */
.repeatable-error-shake {
  animation: shake 0.72s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-0.9px, -0.9px, 0);
  }
  20%, 80% {
    transform: translate3d(0.9px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-0.9px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(0.9px, -0.9px, 0);
  }
}

span.arrow {
  display: inline-block;
  vertical-align: top;
  background: url("/static/strelkaclientssite/res/webtemplate/ui/menu-down_black_blue_wide.svg") no-repeat 0 0;
  background-repeat: no-repeat;
  background-size: auto 16px;

  width: 10px;
  height: 8px;
  margin: 9px 10px 0 9px;
  background-position: 0 -8px;
}
@media screen and (max-width: 1599px) {
  span.arrow {
    width: 9px;
    height: 7px;
    margin: 10px 0 0 7px;
    background-size: auto 14px;
    background-position: 0 -7px;
  }
}
@media screen and (max-width: 1199px) {
  span.arrow {
    width: 8px;
    height: 6px;
    margin: 10px 0 0 6px;
    background-size: auto 12px;
    background-position: 0 -6px;
  }
}
@media screen and (max-width: 767px) {
  span.arrow {
    width: 8px;
    height: 6px;
    margin: 10px 0 0 5px;
    background-size: auto 12px;
    background-position: 0 -6px;
  }
}

/* ------ Button ------ */

/* General styles */

button.widget-button {
  vertical-align: top;

  /* Prevent focus highlighting */
  outline: none;

  /* Needed for progress gif */
  background-position: center center;

  border-radius: 6px;
  border-style: none;

  /* position: absolute; */
  width: 360px;
  height: 60px;
  /* z-index: 10; */
  cursor: pointer;

  padding: 0;
  align-items: stretch;

  font-size: 18px;
  font-family: "Noto Sans";
  line-height: 1.778;
  text-align: center;

  -webkit-transition-duration: 0.2s; /* Safari */
  transition-duration: 0.2s;
}
button.widget-button.disabled {
  background-color: rgb(138 121 121 / 11%) !important;
  color: rgb(184 183 183) !important;
  border-color: rgb(162 159 159 / 30%) !important;
  cursor: default !important;
}
@media screen and (max-width: 1599px) {
  button.widget-button {
    height: 50px;
    font-size: 16px;
  }
}
@media screen and (max-width: 1199px) {
  button.widget-button {
    height: 46px;
    font-size: 14px;
  }
}
@media screen and (max-width: 767px) {
  button.widget-button {
    height: 48px;
    font-size: 16px;
  }
}


/* CTA */

button.widget-button.cta {
  background-color: rgb(1, 138, 70);
  color: rgb(255, 255, 255);
}

button.widget-button.cta:hover {
  background-color: rgb(22, 161, 80);
}


/* Non-CTA */

button.widget-button.non-cta {
  background-color: rgb(75, 81, 88);
  color: rgb(255, 255, 255);
}

button.widget-button.non-cta:hover {
  background-color: #55626d;
}


/* Light */

button.widget-button.light {
  padding: 0 22px 0 22px;
  background-color: rgba(0, 0, 0, 0);
  width: 223px;
  height: 48px;
  color:rgb(51, 51, 51);
  font-size: 17px;
  line-height: 19px;

  border-color: rgba(51, 51, 51, 0.3);
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;

  transition-duration: 0.3s, 0.3s, 0.3s;
}
@media screen and (max-width: 1599px) {
  button.widget-button.light {
    padding: 0 18px 1px 18px;
    width: 194px;
    height: 40px;
    font-size: 14px;
    line-height: 19px;
  }
}
@media screen and (max-width: 1199px) {
  button.widget-button.light {
    padding: 0 15px 0 15px;
    width: 181px;
    height: 43px;
    font-size: 15px;
    line-height: 21px;
  }
}
@media screen and (max-width: 767px) {
  button.widget-button.light {
    padding: 0 18px 0 18px;
    width: 194px;
    max-width: 195px;
    height: 36px;
    font-size: 12px;
    line-height: 16px;
  }
}

button.widget-button.light:hover {
  background-color: #edeeef;
}
button.widget-button.light.progress {
  background-image: url("/static/strelkaclientssite/res/webtemplate/ui/rol_progr_green.gif");
}




button.widget-button.non-cta:hover {
  background-color: #55626d;
}



button.widget-button.progress {
  color: rgba(0, 0, 0, 0);
  background-repeat: no-repeat;
  background-image: url("/static/strelkaclientssite/res/webtemplate/ui/rol_progr_white.gif");
  background-size: auto 55%;
}

/* Icon text */
/* (there can be either icon and text or icon only) */

button.widget-button.icon-text {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

button.widget-button.icon-text img {
  display: block;
  object-position: center center;
  object-fit: contain;
  margin: 0 0 0 0;
  width: 20px;
  height: 20px;
}

button.widget-button.icon-text span {
  font-family: 'Noto Sans', 'Roboto', Arial;
  align-items: center;
  text-align: center;

  margin: 0 0 0 10px;
  font-size: 16px;
  line-height: 12px;
}

/* ------ End: Button ------ */



/* ------ Filtered input ------ */

/* Исп прозрачность для стилей скролла, чтобы она не перечеркивала закругленные границы */
/* scroll width */
div.widget-filtered-input *::-webkit-scrollbar {
  width: 6px;
}
/* scroll Track */
div.widget-filtered-input *::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
}
/* scroll Handle */
div.widget-filtered-input *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}
/* scroll Handle on hover */
div.widget-filtered-input *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.18);
}

div.widget-filtered-input {
  vertical-align: top;
  display: inline-block;
  background-color: rgb(255, 255, 255);
  border-radius: 6px;
}

/* Open list */
div.widget-filtered-input.expanded.relative {
  /* display: inline-block; */
  background-color: rgb(255, 255, 255);
  position: relative;

  /* border-width: 1px; */
  /* border-color: rgb(1, 138, 70);
  border-style: solid; */
  border-radius: 6px;

  /* Hight of ul */
  top: -300px;
}
@media only screen and (max-width: 900px) {
  div.widget-filtered-input.expanded.above {
    position: static;
    top: auto;
  }
}


div.widget-filtered-input div.popup {

}

div.widget-filtered-input div.dialog {

}


div.widget-filtered-input div.filtered-input-field {
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* 2px given to border */
  width: calc(100% - 2px);

  height: 28px;

  border-width: 1px;
  border-color: rgb(1, 138, 70);
  /* border-color: rgb(126, 134, 143); */
  border-style: solid;
  border-radius: 4px;

  cursor: pointer;

  /* margin: 15px 15px 15px 15px; */
}
div.widget-filtered-input.disabled div.filtered-input-field {
  border-color: rgb(210, 210, 210);
  cursor: default;
}
@media screen and (max-width: 1599px) {
  div.widget-filtered-input div.filtered-input-field {
    height: 25px;
  }
}
@media screen and (max-width: 1199px) {
  div.widget-filtered-input div.filtered-input-field {
    height: 24px;
  }
}
@media screen and (max-width: 767px) {
  div.widget-filtered-input div.filtered-input-field {
    height: 24px;
  }
}

div.widget-filtered-input:not(.expanded) div.filtered-input-field:hover {
  /* border-color: rgb(126, 134, 143); */
  /* border-color: rgb(1, 138, 70); */
}


div.widget-filtered-input.expanded div.filtered-input-field {
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  cursor: default;

  border-color: rgb(1, 138, 70);
  border-bottom-color: rgb(183, 223, 203);
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
@media only screen and (max-width: 900px) {
  div.widget-filtered-input.expanded div.filtered-input-field {
    /*   margin: 22px 20px 15px 20px; */
  margin: 0 0 0 0;
  background-color: rgb(255, 255, 255);

  display: block;
  width: auto;
  height: 58px;

  border-width: 1px;
  /* border-color: rgb(1, 138, 70); */
  border-color: rgba(128, 128, 128, 1);

 /* border-color:  rgb(183, 223, 203); */
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;

  border-style: none;
  border-bottom-style: solid;


  clear: both;
  }
}

div.widget-filtered-input.error:not(.expanded) div.filtered-input-field {
  /* border-color: rgb(125, 7, 0); */
  border-color: rgb(174, 10, 1);
}


div.widget-filtered-input.error:not(.expanded) div.filtered-input-field:hover {
  /* border-color: rgb(174, 10, 1); */
}

div.widget-filtered-input span.filtered-input-closed {
  display: inline-block;
  line-height: 1.32;
  font-size: 14px;
  font-family: "Noto Sans";
  color: rgb(13, 13, 13);
  text-align: left;
  vertical-align: middle;
  width: calc(100% - 24px - 8px);
  height: auto;
  margin: 0 0 0 12px;
  /* margin: 0 0 0 0; */

  /* display: none; */

  /* Needed to trim text if it's too long */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* Unselectable */
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
div.widget-filtered-input.progress span.filtered-input-closed {
  /* Transparent text bcs we want to display upload gif without text */
  color: #000; /* Fallback for older browsers */
  color: rgba(0, 0, 0, 0);

  /* Progress gif */
  background-image: url("/static/strelkaclientssite/res/webtemplate/ui/rol_progr_green.gif");
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
div.widget-filtered-input.disabled span.filtered-input-closed {
  color: rgb(183, 183, 183);
}
@media screen and (max-width: 1599px) {
  div.widget-filtered-input span.filtered-input-closed {
    line-height: 1.32;
    font-size: 13px;
    height: auto;
    margin: 0 0 0 12px;
  }
}
@media screen and (max-width: 1199px) {
  div.widget-filtered-input span.filtered-input-closed {
    line-height: 1.32;
    font-size: 12px;
    height: auto;
    margin: 0 0 0 12px;
  }
}
@media screen and (max-width: 767px) {
  div.widget-filtered-input span.filtered-input-closed {
    line-height: 1.32;
    font-size: 12px;
    height: auto;
    width: calc(100% - 9px - 18px - 8px);
    margin: 0 0 0 9px;
  }
}
@media screen and (max-width: 350px) {
  div.widget-filtered-input span.filtered-input-closed {
    height: auto;
    width: calc(100% - 13px - 9px - 17px);
    margin: 0 0 0 8px;
  }
}


div.widget-filtered-input.expanded span.filtered-input-closed {
  display: none;
}

div.widget-filtered-input.error span.filtered-input-closed {
  color: rgb(174, 10, 1);
}

div.widget-filtered-input input.filtered-input-opened {
  border-radius: 4px;
  background-color: transparent;
  /* width: 345px; */
  width: calc(100% - 12px - 33px);
  height: 16px;
  line-height: 1.32;
  font-size: 14px;
  font-family: "Noto Sans";
  color: rgb(13, 13, 13);
  text-align: left;
  vertical-align: middle;
  padding: 6px 0 6px 12px;
  border: none;

  display: none;
}
@media screen and (max-width: 1599px) {
  div.widget-filtered-input input.filtered-input-opened {
    height: 15px;
    line-height: 1.32;
    font-size: 13px;
    padding: 5px 0 5px 12px;
  }
}
@media screen and (max-width: 1199px) {
  div.widget-filtered-input input.filtered-input-opened {
    width: calc(100% - 12px - 18px - 12px);
    height: 14px;
    line-height: 1.32;
    font-size: 12px;
    padding: 5px 0px 5px 12px;
  }
}
@media screen and (max-width: 900px) {
  div.widget-filtered-input input.filtered-input-opened {
    border-radius: 4px;
    width: calc(100% - 58px);
    height: 18px;
    line-height: 18px;
    font-size: 18px;
    font-family: "Noto Sans";
    color: rgb(13, 13, 13);
    text-align: left;
    vertical-align: middle;
    padding: 20px 0 20px 19px;
    border: none;

    /* display: inline-block; */
  }
}


div.widget-filtered-input input.filtered-input-opened::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgb(217, 217, 217);
  opacity: 1; /* Firefox */
}
div.widget-filtered-input input.filtered-input-opened:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: rgb(217, 217, 217);
}
div.widget-filtered-input input.filtered-input-opened::-ms-input-placeholder { /* Microsoft Edge */
  color: rgb(217, 217, 217);
}

div.widget-filtered-input.expanded input.filtered-input-opened {
  display: inline-block;
}

div.widget-filtered-input input.filtered-input-opened:focus {
  /* Prevent focus highlighting */
  outline: none;
}


div.widget-filtered-input span.filtered-input-icon {
  width: 8px;
  height: 6px;
  display: inline-block;
  float: right;
  margin: 0 12px 0 12px;

  background: url("/static/strelkaclientssite/res/webtemplate/ui/input-down.svg") no-repeat center center / cover;
}
div.widget-filtered-input span.filtered-input-icon:after {
  display:none;
  content: url("/static/strelkaclientssite/res/webtemplate/ui/search.svg") url("/static/strelkaclientssite/res/webtemplate/ui/input-down-error.svg");
}
div.widget-filtered-input.disabled span.filtered-input-icon {
  /* Make gif gray */
  filter: invert(95%) sepia(0%) saturate(0%) hue-rotate(187deg) brightness(91%) contrast(84%);
}
@media screen and (max-width: 1599px) {
  div.widget-filtered-input span.filtered-input-icon {
    width: 8px;
    height: 6px;
    margin: 0 12px 0 12px;
  }
}
@media screen and (max-width: 1199px) {
  div.widget-filtered-input span.filtered-input-icon {
    width: 8px;
    height: 6px;
    margin: 0 12px 0 12px;
  }
}
@media screen and (max-width: 767px) {
  div.widget-filtered-input span.filtered-input-icon {
    margin: 0 9px 0 9px;
  }
}


div.widget-filtered-input.expanded span.filtered-input-icon {
  background: url("/static/strelkaclientssite/res/webtemplate/ui/search.svg") no-repeat center center / cover;
  width: 13px;
  height: 13px;
  margin: 0 10px 0 10px;
}
@media screen and (max-width: 1599px) {
  div.widget-filtered-input.expanded span.filtered-input-icon {
    width: 13px;
    height: 13px;
    margin: 0 10px 0 10px;
  }
}
@media screen and (max-width: 1199px) {
  div.widget-filtered-input.expanded span.filtered-input-icon {
    width: 12px;
    height: 12px;
    margin: 0 9px 0 9px;
  }
}
@media screen and (max-width: 900px) {
  div.widget-filtered-input.expanded span.filtered-input-icon {
    display: inline-block;
    float: right;
    height: 18px;
    width: 18px;
    margin: 21px 17px 0 0;
  }
}

div.widget-filtered-input.error:not(.expanded) span.filtered-input-icon {
  background: url("/static/strelkaclientssite/res/webtemplate/ui/input-down-error.svg") no-repeat center center / cover;
}

div.widget-filtered-input div.popup {
  display: block;
}
@media only screen and (max-width: 900px) {
  /* Mobile popup only for small screen sizes */
  div.widget-filtered-input.expanded div.popup {
    position: fixed; /* Stay in place */
    z-index: 20; /* Sit on top */
    /* padding-top: 100px; */
    /* padding: 0 10px 0 10px; */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%;
    /* overflow: auto; Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.75); /* Black w/ opacity */
  }
}

div.widget-filtered-input div.dialog {
  display: block;
}
@media only screen and (max-width: 900px) {
  /* Mobile popup only for small screen sizes */
  div.widget-filtered-input.expanded div.dialog {
    background-color: #fefefe;
    margin: 10px auto 10px auto;
    /* padding: 20px; */
    border: 1px solid #888;
    width: calc(100% - 30px);
    max-width: 400px;
    height: calc(100% - 20px);
    border-radius: 6px;
    border-style: solid;
  }
}


div.widget-filtered-input ul.filtered-input {
  display: none;

  background-color: rgb(255, 255, 255);
  list-style-type: none;

  /* We want to have it above some sticky controls */
  z-index: 2;

  /* width: 93px; */
  /* width: 100%; */

  height: 300px;
  /* max-height: 300px; */
  min-height: 60px;

  overflow-y: auto;

  margin: 0 0 0 0;
  padding: 0 0 0 0;

  border-width: 1px;
  border-color: rgb(1, 138, 70);
  border-style: solid;
  border-radius: 4px;
}

div.widget-filtered-input.expanded ul.filtered-input {
  display: block;
  /* width: 100%; */
  border-top: none;
  border-radius: 0 0 4px 4px;
  position: absolute;
  z-index: 1;

  cursor: pointer;
}
@media only screen and (max-width: 900px) {
  div.widget-filtered-input.expanded ul.filtered-input {
    position: static;

    background-color: rgb(255, 255, 255);
    list-style-type: none;
    width: 100%;
    height: calc(100% - 58px);
    /* height: 400px; */
    overflow-y: scroll;

    margin: 0 0 0 0;
    padding: 0 0 0 0;

    border-style: none;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  }
}


div.widget-filtered-input li.filtered-input-item,
div.widget-filtered-input li.filtered-input-item a {
  line-height: 1.32;
  font-size: 14px;
  font-family: "Noto Sans";
  color: rgb(26, 26, 26);
  vertical-align: middle;
  text-align: left;

  /* Unselectable */
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
@media screen and (max-width: 1599px) {
  div.widget-filtered-input li.filtered-input-item,
  div.widget-filtered-input li.filtered-input-item a {
    line-height: 1.32;
    font-size: 13px;
  }
}
@media screen and (max-width: 1199px) {
  div.widget-filtered-input li.filtered-input-item,
  div.widget-filtered-input li.filtered-input-item a {
    line-height: 1.32;
    font-size: 12px;
  }
}
@media screen and (max-width: 900px) {
  div.widget-filtered-input li.filtered-input-item,
  div.widget-filtered-input li.filtered-input-item a {
    font-size: 16px;
    line-height: 23px;

    /* border-top-color: rgb(183, 223, 203); */
  }
  div.widget-filtered-input li.filtered-input-item {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(233, 244, 250);
  }
}


/* For clickable links as items it's a little bit different */

/* Non-clickable items links */
div.widget-filtered-input:not(.a-items) li.filtered-input-item {
  padding: 5px 7px 5px 36px;
}
@media screen and (max-width: 1599px) {
  div.widget-filtered-input:not(.a-items) li.filtered-input-item {
    padding: 5px 7px 5px 34px;
  }
}
@media screen and (max-width: 1199px) {
  div.widget-filtered-input:not(.a-items) li.filtered-input-item {
    padding: 4px 7px 4px 32px;
  }
}
@media screen and (max-width: 900px) {
  div.widget-filtered-input:not(.a-items) li.filtered-input-item {
    padding: 11px 7px 11px 20px;
  }
}


/* Clickable items links */
div.widget-filtered-input.a-items li.filtered-input-item {
  padding: 0;
}

div.widget-filtered-input.a-items li.filtered-input-item a {
  display: block;
  text-decoration: none;
  color: black;
  padding: 10px 10px 10px 57px;
}
@media screen and (max-width: 1599px) {
  div.widget-filtered-input.a-items li.filtered-input-item a {
    padding: 8px 8px 8px 57px;
  }
}
@media screen and (max-width: 1199px) {
  div.widget-filtered-input.a-items li.filtered-input-item a {
    padding: 7px 7px 7px 50px;
  }
}
@media screen and (max-width: 900px) {
  div.widget-filtered-input.a-items li.filtered-input-item a {
    padding: 11px 11px 11px 20px;
  }
}



div.widget-filtered-input li.filtered-input-item.hide {
  display: none;
}


/* Manual hover is used for highlighting current item bcs of arrow buttons */
/* div.widget-filtered-input li.filtered-input-item:hover, */
div.widget-filtered-input li.filtered-input-item.widget-focus,
div.widget-filtered-input li.filtered-input-item.widget-focus a {
  background-color: rgb(84, 183, 120);
  color: rgb(255, 255, 255);
}

div.widget-filtered-input li.filtered-input-item.active:not(.widget-focus) {
  background-color: rgb(239, 239, 239);
}


/* Switch between mobile and desktop */

div.widget-filtered-input div.mobile {
  display: none;
}
/* Width to allow iPhoneX in landscape mode work as mobile */
@media only screen and (max-width: 900px) {
  div.widget-filtered-input div.desktop {
    display: none;
  }
  div.widget-filtered-input div.mobile {
    display: block;
  }
}


/* ------ End - Filtered input ------ */


/* ------ Select input ------ */

/* Исп прозрачность для стилей скролла, чтобы она не перечеркивала закругленные границы */
/* scroll width */
div.widget-select-input *::-webkit-scrollbar {
  width: 6px;
}
/* scroll Track */
div.widget-select-input *::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
}
/* scroll Handle */
div.widget-select-input *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}
/* scroll Handle on hover */
div.widget-select-input *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.18);
}

div.widget-select-input {
  vertical-align: top;
  display: inline-block;
  background-color: rgb(255, 255, 255);
  border-radius: 4px;
}

/* Open list */
div.widget-select-input.expanded.relative {
  /* display: inline-block; */
  background-color: rgb(255, 255, 255);
  position: relative;

  /* border-width: 1px; */
  /* border-color: rgb(1, 138, 70);
  border-style: solid; */
  border-radius: 4px;

  /* Hight of ul */
  /* Is set manually in JS anyway */
  /* top: -300px; */
}


div.widget-select-input div.desktop {
  /* border-style: solid;
  border-color: red; */
}


div.widget-select-input div.desktop div.select-input-field {
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* 2px given to border */
  width: calc(100% - 2px);

  height: 28px;

  border-width: 1px;
  border-color: rgb(1, 138, 70);
  /* border-color: rgb(126, 134, 143); */
  border-style: solid;
  border-radius: 4px;

  cursor: pointer;

  /* margin: 15px 15px 15px 15px; */
}
div.widget-select-input.disabled div.desktop div.select-input-field {
  border-color: rgb(210, 210, 210);
  cursor: default;
}
@media screen and (max-width: 1599px) {
  div.widget-select-input div.desktop div.select-input-field {
    height: 25px;
  }
}
@media screen and (max-width: 1199px) {
  div.widget-select-input div.desktop div.select-input-field {
    height: 24px;
  }
}
@media screen and (max-width: 767px) {
  div.widget-select-input div.desktop div.select-input-field {
    height: 24px;
  }
}

div.widget-select-input:not(.expanded) div.desktop div.select-input-field:hover {
  /* border-color: rgb(126, 134, 143); */
  /* border-color: rgb(1, 138, 70); */
}


div.widget-select-input.expanded div.desktop div.select-input-field {
  display: none;
}

div.widget-select-input.error:not(.expanded) div.desktop div.select-input-field {
  /* border-color: rgb(125, 7, 0); */
  border-color: rgb(174, 10, 1);
}


div.widget-select-input.error:not(.expanded) div.desktop div.select-input-field:hover {
  /* border-color: rgb(174, 10, 1); */
}

div.widget-select-input div.desktop span.select-input-closed {
  display: inline-block;
  line-height: 1.32;
  font-size: 14px;
  font-family: "Noto Sans";
  color: rgb(13, 13, 13);
  text-align: left;
  vertical-align: middle;
  width: calc(100% - 24px - 8px);
  height: auto;
  margin: 0 0 0 12px;

  /* Needed to trim text if it's too long */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* Unselectable */
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
div.widget-select-input.progress div.desktop span.select-input-closed {
  /* Transparent text bcs we want to display upload gif without text */
  color: #000; /* Fallback for older browsers */
  color: rgba(0, 0, 0, 0);

  /* Progress gif */
  background-image: url("/static/strelkaclientssite/res/webtemplate/ui/rol_progr_green.gif");
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
div.widget-select-input.disabled div.desktop span.select-input-closed {
  color: rgb(183, 183, 183);
}
@media screen and (max-width: 1599px) {
  div.widget-select-input div.desktop span.select-input-closed {
    line-height: 1.32;
    font-size: 13px;
    height: auto;
    margin: 0 0 0 12px;
  }
}
@media screen and (max-width: 1199px) {
  div.widget-select-input div.desktop span.select-input-closed {
    line-height: 1.32;
    font-size: 12px;
    height: auto;
    margin: 0 0 0 12px;
  }
}

div.widget-select-input.expanded div.desktop span.select-input-closed {
  display: none;
}

div.widget-select-input.error div.desktop span.select-input-closed {
  color: rgb(174, 10, 1);
}

div.widget-select-input div.desktop span.select-input-icon {
  width: 8px;
  height: 6px;
  display: inline-block;
  float: right;
  margin: 0 12px 0 12px;

  background: url("/static/strelkaclientssite/res/webtemplate/ui/input-down.svg") no-repeat center center / cover;
}
div.widget-select-input div.desktop span.select-input-icon:after {
  display:none;
  content: url("/static/strelkaclientssite/res/webtemplate/ui/search.svg") url("/static/strelkaclientssite/res/webtemplate/ui/input-down-error.svg");
}
div.widget-select-input.disabled div.desktop span.select-input-icon {
  /* Make svg gray */
  filter: invert(95%) sepia(0%) saturate(0%) hue-rotate(187deg) brightness(91%) contrast(84%);
}
@media screen and (max-width: 1599px) {
  div.widget-select-input div.desktop span.select-input-icon {
    width: 8px;
    height: 6px;
    margin: 0 12px 0 12px;
  }
}
@media screen and (max-width: 1199px) {
  div.widget-select-input div.desktop span.select-input-icon {
    width: 8px;
    height: 6px;
    margin: 0 12px 0 12px;
  }
}

div.widget-select-input.expanded div.desktop span.select-input-icon {
  background: url("/static/strelkaclientssite/res/webtemplate/ui/input-up.svg") no-repeat center center / cover;
  height: 9px;
  width: 12px;
  margin: 25px 17px 0 17px;
}
@media screen and (max-width: 1599px) {
  div.widget-select-input.expanded div.desktop span.select-input-icon {
    width: 10px;
    height: 8px;
    margin: 22px 17px 0 19px;
  }
}
@media screen and (max-width: 1199px) {
  div.widget-select-input.expanded div.desktop span.select-input-icon {
    width: 9px;
    height: 7px;
    margin: 19px 17px 0 16px;
  }
}


div.widget-select-input.error:not(.expanded) div.desktop span.select-input-icon {
  background: url("/static/strelkaclientssite/res/webtemplate/ui/input-down-error.svg") no-repeat center center / cover;
}

div.widget-select-input div.desktop ul.select-input {
  display: none;

  background-color: rgb(255, 255, 255);
  list-style-type: none;

  /* We want to have it above some sticky controls */
  z-index: 2;

  /* height: 300px; */
  max-height: 300px;
  min-height: 60px;

  overflow-y: auto;

  margin: 0 0 0 0;
  padding: 0 0 0 0;

  border-width: 1px;
  border-color: rgb(1, 138, 70);
  border-style: solid;
  border-radius: 4px;
}

div.widget-select-input.expanded div.desktop ul.select-input {
  display: block;
  /* width: 100%; */
  /* border-top: none;
  border-radius: 0 0 6px 6px; */
  position: absolute;

  cursor: pointer;
}


div.widget-select-input div.desktop li.select-input-group {
  font-size: 18px;
  font-family: "Noto Sans";
  font-weight: bold;
  color: rgb(26, 26, 26);
  vertical-align: middle;
  text-align: left;
  padding: 10px 0 10px 12px;

  cursor: default;

  /* Unselectable */
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
@media screen and (max-width: 1599px) {
  div.widget-select-input div.desktop li.select-input-group {
    font-size: 16px;
    padding: 8px 0 8px 10px;
  }
}
@media screen and (max-width: 1199px) {
  div.widget-select-input div.desktop li.select-input-group {
    font-size: 14px;
    padding: 7px 0 7px 9px;
  }
}


/* Manual hover is used for highlighting current item bcs of arrow buttons */
/* div.widget-filtered-input li.fi]ltered-input-item:hover, */
div.widget-select-input div.desktop li.select-input-group.widget-focus {
  background-color: rgb(84, 183, 120);
  color: rgb(255, 255, 255);
}


div.widget-select-input div.desktop li.select-input-item {
  font-size: 14px;
  font-family: "Noto Sans";
  color: rgb(26, 26, 26);
  vertical-align: middle;
  text-align: left;
  padding: 5px 7px 5px 36px;
  line-height: 1.32;

  /* Unselectable */
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
@media screen and (max-width: 1599px) {
  div.widget-select-input div.desktop li.select-input-item {
    line-height: 1.32;
    font-size: 13px;
    padding: 5px 7px 5px 34px;
  }
}
@media screen and (max-width: 1199px) {
  div.widget-select-input div.desktop li.select-input-item {
    line-height: 1.32;
    font-size: 12px;
    padding: 4px 7px 4px 32px;
  }
}


/* Manual hover is used for highlighting current item bcs of arrow buttons */
/* div.widget-filtered-input li.fi]ltered-input-item:hover, */
div.widget-select-input div.desktop li.select-input-item.widget-focus {
  background-color: rgb(84, 183, 120);
  color: rgb(255, 255, 255);
}

div.widget-select-input div.desktop li.select-input-item.active:not(.widget-focus) {
  background-color: rgb(239, 239, 239);
}

/* Filtered input: Mobile version */

div.widget-select-input div.mobile div.select-input-field {
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* 2px given to border */
  width: calc(100% - 2px);

  height: 24px;

  border-width: 1px;
  border-color: rgb(1, 138, 70);
  border-style: solid;
  border-radius: 4px;
}
@media screen and (max-width: 767px) {
  div.widget-select-input div.mobile div.select-input-field {
    height: 24px;
  }
}

div.widget-select-input div.mobile div.select-input-field:hover {
  cursor: pointer;
  border-color: rgb(126, 134, 143);
}

div.widget-select-input.error div.mobile div.select-input-field {
  border-color: rgb(174, 10, 1);
}

div.widget-select-input.error div.mobile div.select-input-field:hover {
  border-color: rgb(125, 7, 0);
}


div.widget-select-input div.mobile span.select-input-closed {
  display: inline-block;
  font-size: 12px;
  font-family: "Noto Sans";
  color: rgb(13, 13, 13);
  text-align: left;
  vertical-align: middle;
  width: calc(100% - 24px - 8px);
  height: auto;
  line-height: 1.32;
  margin: 0 0 0 12px;

  /* Needed to trim text if it's too long */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* Unselectable */
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
@media screen and (max-width: 767px) {
  div.widget-select-input div.mobile span.select-input-closed {
    line-height: 1.32;
    font-size: 12px;
    height: auto;
    width: calc(100% - 9px - 18px - 8px);
    margin: 0 0 0 9px;
  }
}
@media screen and (max-width: 350px) {
  div.widget-select-input div.mobile span.select-input-closed {
    height: auto;
    width: calc(100% - 13px - 9px - 17px);
    margin: 0 0 0 8px;
  }
}

div.widget-select-input.error div.mobile span.select-input-closed {
  color: rgb(174, 10, 1);
}


div.widget-select-input div.mobile span.select-input-icon {
  width: 8px;
  height: 6px;
  margin: 0 12px 0 12px;
  display: inline-block;
  float: right;

  background: url("/static/strelkaclientssite/res/webtemplate/ui/input-down.svg") no-repeat center center / cover;
}
div.widget-select-input div.mobile span.select-input-icon:after {
  display:none;
  content: url("/static/strelkaclientssite/res/webtemplate/ui/search.svg") url("/static/strelkaclientssite/res/webtemplate/ui/input-down-error.svg");
}
@media screen and (max-width: 767px) {
  div.widget-select-input div.mobile span.select-input-icon {
    margin: 0 9px 0 9px;
  }
}

div.widget-select-input.error div.mobile span.select-input-icon {
  background: url("/static/strelkaclientssite/res/webtemplate/ui/input-down-error.svg") no-repeat center center / cover;
}


div.widget-select-input div.mobile div.popup {
  display: none;

  position: fixed; /* Stay in place */
  z-index: 20; /* Sit on top */
  /* padding-top: 100px; */
  /* padding: 0 10px 0 10px; */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%;
  /* overflow: auto; Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.75); /* Black w/ opacity */
}
div.widget-select-input.expanded div.mobile div.popup {
  display: block;
}


div.widget-select-input div.mobile div.dialog {
  background-color: #fefefe;
  margin: 10px auto 10px auto;
  /* padding: 20px; */
  border: 1px solid #888;
  width: calc(100% - 30px);
  max-width: 400px;
  height: calc(100% - 20px);
  border-radius: 6px;
  border-style: solid;
}

div.widget-select-input div.mobile ul.select-input {
  background-color: rgb(255, 255, 255);
  list-style-type: none;
  width: 100%;
  /* max-height: 316px; */
  /* height: calc(100%); */
  max-height: 300px;
  min-height: 100px;

  overflow-y: auto;

  margin: 0 0 0 0;
  padding: 0 0 0 0;

  /* border-width: 1px;
  border-color: rgb(1, 138, 70);
  border-style: solid;
  border-radius: 6px; */

  border-radius: 4px;
}


div.widget-select-input div.mobile li.select-input-group {
  font-size: 16px;
  font-weight: bold;
  font-family: "Noto Sans";
  color: rgb(26, 26, 26);
  vertical-align: middle;
  text-align: left;
  padding: 11px 11px 11px 20px;

  border-bottom-width: 1px;
  border-bottom-style: solid;
  /* border-bottom-color: rgb(221, 221, 221); */
  border-bottom-color: rgb(233, 244, 250);

  line-height: 23px;

  /* border-top-color: rgb(183, 223, 203); */

  /* Unselectable */
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}



div.widget-select-input div.mobile li.select-input-item {
  font-size: 16px;
  /* font-weight: bold; */
  font-family: "Noto Sans";
  color: rgb(26, 26, 26);
  vertical-align: middle;
  text-align: left;
  padding: 11px 11px 11px 60px;

  border-bottom-width: 1px;
  border-bottom-style: solid;
  /* border-bottom-color: rgb(221, 221, 221); */
  border-bottom-color: rgb(233, 244, 250);

  line-height: 23px;

  /* border-top-color: rgb(183, 223, 203); */

  /* Unselectable */
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
/* Don't need top border for first element */
div.widget-select-input div.mobile li.select-input-item:not(:first-child) {
  /* border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(221, 221, 221); */
}

div.widget-select-input div.mobile li.select-input-item:hover,
div.widget-select-input div.mobile li.select-input-item.widget-focus {
  /* background-color: rgb(245, 247, 250);
  color: rgb(1, 138, 70); */
  background-color: rgb(84, 183, 120);
  color: rgb(255, 255, 255);
}

div.widget-select-input div.mobile li.select-input-item.active:not(.widget-focus) {
  /* font-weight: bold; */
  background-color: rgb(239, 239, 239);
}

/* ------ End - Select input ------ */

/* ------ Checkbox input ------ */

/* Исп прозрачность для стилей скролла, чтобы она не перечеркивала закругленные границы */
/* scroll width */
div.widget-checkbox-input *::-webkit-scrollbar {
  width: 6px;
}
/* scroll Track */
div.widget-checkbox-input *::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
}
/* scroll Handle */
div.widget-checkbox-input *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}
/* scroll Handle on hover */
div.widget-checkbox-input *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.18);
}

div.widget-checkbox-input {
  vertical-align: top;
  display: inline-block;
  background-color: rgb(255, 255, 255);
  border-radius: 4px;
}

/* Open list above */
div.widget-checkbox-input.expanded.above {
  /* display: inline-block; */
  background-color: rgb(255, 255, 255);
  position: relative;

  /* border-width: 1px; */
  /* border-color: rgb(1, 138, 70);
  border-style: solid; */
  border-radius: 4px;

  /* Hight of ul */
  top: -300px;
}


div.widget-checkbox-input div.desktop {
  /* border-style: solid;
  border-color: red; */
}


div.widget-checkbox-input div.desktop div.checkbox-input-field {
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* 2px given to border */
  width: calc(100% - 2px);

  height: 28px;

  border-width: 1px;
  border-color: rgb(1, 138, 70);
  /* border-color: rgb(126, 134, 143); */
  border-style: solid;
  border-radius: 4px;

  cursor: pointer;

  /* margin: 15px 15px 15px 15px; */
}
@media screen and (max-width: 1599px) {
  div.widget-checkbox-input div.desktop div.checkbox-input-field {
    height: 25px;
  }
}
@media screen and (max-width: 1199px) {
  div.widget-checkbox-input div.desktop div.checkbox-input-field {
    height: 24px;
  }
}
@media screen and (max-width: 767px) {
  div.widget-checkbox-input div.desktop div.checkbox-input-field {
    height: 24px;
  }
}

div.widget-checkbox-input:not(.expanded) div.desktop div.checkbox-input-field:hover {
  /* border-color: rgb(126, 134, 143); */
  /* border-color: rgb(1, 138, 70); */
}


div.widget-checkbox-input.expanded div.desktop div.checkbox-input-field {
  /* border-bottom: none;
  border-radius: 6px 6px 0 0;
  cursor: default;

  border-color: rgb(1, 138, 70);
  border-bottom-color: rgb(183, 223, 203);
  border-bottom-style: solid;
  border-bottom-width: 1px; */

  display: none;
}

div.widget-checkbox-input.error:not(.expanded) div.desktop div.checkbox-input-field {
  /* border-color: rgb(125, 7, 0); */
  border-color: rgb(174, 10, 1);
}


div.widget-checkbox-input.error:not(.expanded) div.desktop div.checkbox-input-field:hover {
  /* border-color: rgb(174, 10, 1); */
}

div.widget-checkbox-input div.desktop span.checkbox-input-closed {
  display: inline-block;
  line-height: 1.32;
  font-size: 14px;
  font-family: "Noto Sans";
  color: rgb(13, 13, 13);
  text-align: left;
  vertical-align: middle;
  width: calc(100% - 24px - 8px);
  height: auto;
  margin: 0 0 0 12px;

  /* Needed to trim text if it's too long */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* Unselectable */
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
@media screen and (max-width: 1599px) {
  div.widget-checkbox-input div.desktop span.checkbox-input-closed {
    line-height: 1.32;
    font-size: 13px;
    height: auto;
    margin: 0 0 0 12px;
  }
}
@media screen and (max-width: 1199px) {
  div.widget-checkbox-input div.desktop span.checkbox-input-closed {
    line-height: 1.32;
    font-size: 12px;
    height: auto;
    margin: 0 0 0 12px;
  }
}

div.widget-checkbox-input.expanded div.desktop span.checkbox-input-closed {
  display: none;
}

div.widget-checkbox-input.error div.desktop span.checkbox-input-closed {
  color: rgb(174, 10, 1);
}

div.widget-checkbox-input div.desktop span.checkbox-input-icon {
  width: 8px;
  height: 6px;
  display: inline-block;
  float: right;
  margin: 0 12px 0 12px;

  background: url("/static/strelkaclientssite/res/webtemplate/ui/input-down.svg") no-repeat center center / cover;
}
div.widget-checkbox-input div.desktop span.checkbox-input-icon:after {
  display:none;
  content: url("/static/strelkaclientssite/res/webtemplate/ui/search.svg") url("/static/strelkaclientssite/res/webtemplate/ui/input-down-error.svg");
}
@media screen and (max-width: 1599px) {
  div.widget-checkbox-input div.desktop span.checkbox-input-icon {
    width: 8px;
    height: 6px;
    margin: 0 12px 0 12px;
  }
}
@media screen and (max-width: 1199px) {
  div.widget-checkbox-input div.desktop span.checkbox-input-icon {
    width: 8px;
    height: 6px;
    margin: 0 12px 0 12px;
  }
}

div.widget-checkbox-input.expanded div.desktop span.checkbox-input-icon {
  background: url("/static/strelkaclientssite/res/webtemplate/ui/input-up.svg") no-repeat center center / cover;
  height: 9px;
  width: 12px;
  margin: 25px 17px 0 17px;
}
@media screen and (max-width: 1599px) {
  div.widget-checkbox-input.expanded div.desktop span.checkbox-input-icon {
    width: 10px;
    height: 8px;
    margin: 22px 17px 0 19px;
  }
}
@media screen and (max-width: 1199px) {
  div.widget-checkbox-input.expanded div.desktop span.checkbox-input-icon {
    width: 9px;
    height: 7px;
    margin: 19px 17px 0 16px;
  }
}


div.widget-checkbox-input.error:not(.expanded) div.desktop span.checkbox-input-icon {
  background: url("/static/strelkaclientssite/res/webtemplate/ui/input-down-error.svg") no-repeat center center / cover;
}

div.widget-checkbox-input div.desktop ul.checkbox-input {
  display: none;

  background-color: rgb(255, 255, 255);
  list-style-type: none;

  /* We want to have it above some sticky controls */
  z-index: 2;
  
  /* width: 93px; */
  /* width: 100%; */

  max-height: 300px;
  min-height: 60px;
  overflow-y: auto;

  margin: 0 0 0 0;
  padding: 0 0 0 0;

  border-width: 1px;
  border-color: rgb(1, 138, 70);
  border-style: solid;
  border-radius: 4px;
}

div.widget-checkbox-input.expanded div.desktop ul.checkbox-input {
  display: block;
  /* width: 100%; */
  /* border-top: none;
  border-radius: 0 0 6px 6px; */
  position: absolute;

  cursor: pointer;
}


div.widget-checkbox-input div.desktop li.checkbox-input-group {
  font-size: 18px;
  font-family: "Noto Sans";
  font-weight: bold;
  color: rgb(26, 26, 26);
  vertical-align: middle;
  text-align: left;
  padding: 10px 0 10px 12px;

  cursor: default;

  /* Unselectable */
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
@media screen and (max-width: 1599px) {
  div.widget-checkbox-input div.desktop li.checkbox-input-group {
    font-size: 16px;
    padding: 8px 0 8px 10px;
  }
}
@media screen and (max-width: 1199px) {
  div.widget-checkbox-input div.desktop li.checkbox-input-group {
    font-size: 14px;
    padding: 7px 0 7px 9px;
  }
}


/* Manual hover is used for highlighting current item bcs of arrow buttons */
/* div.widget-filtered-input li.fi]ltered-input-item:hover, */
div.widget-checkbox-input div.desktop li.checkbox-input-group.widget-focus {
  background-color: rgb(84, 183, 120);
  color: rgb(255, 255, 255);
}


div.widget-checkbox-input div.desktop li.checkbox-input-item {
  font-size: 14px;
  font-family: "Noto Sans";
  color: rgb(26, 26, 26);
  vertical-align: middle;
  text-align: left;
  padding: 0 0 0 0;
  line-height: 1.32;

  /* Unselectable */
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
@media screen and (max-width: 1599px) {
  div.widget-checkbox-input div.desktop li.checkbox-input-item {
    line-height: 1.32;
    font-size: 13px;
    padding: 0 0 0 0;
  }
}
@media screen and (max-width: 1199px) {
  div.widget-checkbox-input div.desktop li.checkbox-input-item {
    line-height: 1.32;
    font-size: 12px;
    padding: 0 0 0 0;
  }
}
@media screen and (max-width: 767px) {
  div.widget-checkbox-input div.desktop li.checkbox-input-item {
    line-height: 1.32;
    font-size: 12px;
    padding: 0 0 0 0;
  }
}


/* Manual hover is used for highlighting current item bcs of arrow buttons */
/* div.widget-filtered-input li.fi]ltered-input-item:hover, */
div.widget-checkbox-input div.desktop li.checkbox-input-item.widget-focus {
  background-color: rgb(84, 183, 120);
  color: rgb(255, 255, 255);
}

div.widget-checkbox-input div.desktop li.checkbox-input-item.active:not(.widget-focus) {
  background-color: rgb(239, 239, 239);
}

div.widget-checkbox-input div.desktop li.checkbox-input-item div.widget-checkbox label {
  font-size: 14px;
  line-height: 1.32;
  padding: 5px 7px 5px 36px;
  width: calc(100% - 7px - 36px);
}
@media screen and (max-width: 1599px) {
  div.widget-checkbox-input div.desktop li.checkbox-input-item div.widget-checkbox label {
    line-height: 1.32;
    font-size: 13px;
    padding: 5px 7px 5px 34px;
    width: calc(100% - 7px - 34px);
  }
}
@media screen and (max-width: 1199px) {
  div.widget-checkbox-input div.desktop li.checkbox-input-item div.widget-checkbox label {
    line-height: 1.32;
    font-size: 12px;
    padding: 4px 7px 4px 32px;
    width: calc(100% - 7px - 32px);
  }
}
@media screen and (max-width: 767px) {
  div.widget-checkbox-input div.desktop li.checkbox-input-item div.widget-checkbox label {
    line-height: 1.32;
    font-size: 12px;
    padding: 4px 7px 4px 32px;
    width: calc(100% - 7px - 32px);
  }
}

div.widget-checkbox-input div.desktop li.checkbox-input-item div.widget-checkbox .checkmark {
  margin: 7px 0 0 12px;
  width: 15px;
  height: 15px;
}
@media screen and (max-width: 1599px) {
  div.widget-checkbox-input div.desktop li.checkbox-input-item div.widget-checkbox .checkmark {
    margin: 6px 0 0 11px;
  }
}
@media screen and (max-width: 1199px) {
  div.widget-checkbox-input div.desktop li.checkbox-input-item div.widget-checkbox .checkmark {
    margin: 5px 0 0 10px;
  }
}
@media screen and (max-width: 767px) {
  div.widget-checkbox-input div.desktop li.checkbox-input-item div.widget-checkbox .checkmark {
    margin: 5px 0 0 10px;
  }
}

/* Style the checkmark/indicator */
div.widget-checkbox-input div.desktop li.checkbox-input-item div.widget-checkbox .checkmark:after {
  left: 5px;
  top: 1px;
  width: 3px;
  height: 8px;
}

/* Indeterminate */
div.widget-checkbox-input div.desktop li.checkbox-input-item div.widget-checkbox.indeterminate input ~ .checkmark:after {
  left: 3px;
  top: 4px;
  width: 9px;
  height: 3px;
  border-width: 0 0 3px 0;
}


/* ------ End - Checkbox input ------ */

/* ------ Text input widget ------ */

input.widget-text-input {
  display: inline-block;
  width: 345px;

  background-color: rgb(255, 255, 255);

  border-radius: 6px;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(203, 209, 212);

  text-align: left;
  vertical-align: middle;

  height: 18px;
  font-size: 18px;
  font-family: "Noto Sans";
  color: rgb(13, 13, 13);
  line-height: 18px;
  padding: 20px 0 20px 19px;

  /* No highlightting when focused */
  outline: none;
}
input.widget-text-input:hover {
  border-color: rgb(172, 181, 186);
}

@media screen and (max-width: 1599px) {
  input.widget-text-input {
    height: 16px;
    font-size: 16px;
    line-height: 16px;
    padding: 16px 0 16px 16px;
  }
}
@media screen and (max-width: 1199px) {
  input.widget-text-input {
    font-size: 14px;
    height: 14px;
    line-height: 14px;
    padding: 15px 0 15px 15px;
  }
}
@media screen and (max-width: 767px) {
  input.widget-text-input {
    height: 16px;
    font-size: 16px;
    line-height: 16px;
    padding: 15px 0 15px 15px;
  }
}

input.widget-text-input.error {
  border-color: rgb(174, 10, 1);
}

input.widget-text-input:not(.error):focus {
  border-color: rgb(1, 138, 70);
}

/* ------ End: Text input widget ------ */

/* ------ Phone input widget ------ */

input.widget-phone-input {
  display: inline-block;
  width: 345px;

  background-color: rgb(255, 255, 255);

  border-radius: 6px;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(203, 209, 212);

  text-align: left;
  vertical-align: middle;

  height: 18px;
  font-size: 18px;
  font-family: "Noto Sans";
  color: rgb(13, 13, 13);
  line-height: 18px;
  padding: 20px 0 20px 19px;

  /* No highlightting when focused */
  outline: none;
}
input.widget-phone-input:hover {
  border-color: rgb(172, 181, 186);
}

@media screen and (max-width: 1599px) {
  input.widget-phone-input {
    height: 16px;
    font-size: 16px;
    line-height: 16px;
    padding: 16px 0 16px 16px;
  }
}
@media screen and (max-width: 1199px) {
  input.widget-phone-input {
    font-size: 14px;
    height: 14px;
    line-height: 14px;
    padding: 15px 0 15px 15px;
  }
}
@media screen and (max-width: 767px) {
  input.widget-phone-input {
    height: 16px;
    font-size: 16px;
    line-height: 16px;
    padding: 15px 0 15px 15px;
  }
}

input.widget-phone-input.error {
  border-color: rgb(174, 10, 1);
}

input.widget-phone-input:not(.error):focus {
  border-color: rgb(1, 138, 70);
}

/* ------ End: Phone input widget ------ */

/* ------ Check-box ------ */

div.widget-checkbox {

}

div.widget-checkbox label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 0 4px 0 28px;
  font-size: 16px;
  line-height: 24px;
}
@media screen and (max-width: 1599px) {
  div.widget-checkbox label {
    padding: 1px 4px 0 28px;
    font-size: 15px;
    line-height: 21px;
  }
}
@media screen and (max-width: 1199px) {
  div.widget-checkbox label {
    padding: 2px 4px 0 28px;
    font-size: 14px;
    line-height: 18px;
  }
}
@media screen and (max-width: 767px) {
  div.widget-checkbox label {
    padding: 2px 4px 0 28px;
    font-size: 14px;
    line-height: 18px;
  }
}

div.widget-checkbox.error label {
  background-color: #ebbaba;
}

/* Hide the browser's default checkbox */
div.widget-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0px;
  width: 0px;
}

/* Create a custom checkbox */
div.widget-checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  margin-top: 2px;
  margin-left: 1px;
}

/* On mouse-over, add a grey background color */
div.widget-checkbox:not(.indeterminate) label:hover input:not(:checked):not(:disabled) ~ .checkmark {
  background-color: #ccc;
  /* margin-top: 2px; */
}

/* When the checkbox is checked, add a blue background */
div.widget-checkbox input:checked ~ .checkmark,
div.widget-checkbox.indeterminate input ~ .checkmark {
  margin-top: 2px;
  background-color: #6eb28b;
}

div.widget-checkbox input:disabled ~ .checkmark {
  cursor: default;
}

div.widget-checkbox input:checked:disabled ~ .checkmark {
  background-color: #d2ecdd;
}
div.widget-checkbox input:not(:checked):disabled ~ .checkmark {
  background-color: #f6f6f6;
}


/* Create the checkmark/indicator (hidden when not checked) */
div.widget-checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
div.widget-checkbox input:checked ~ .checkmark:after {
  display: block;

  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Indeterminate */
div.widget-checkbox.indeterminate input ~ .checkmark:after {
  display: block;
  left: 3px;
  top: 5px;
  width: 14px;
  height: 3px;
  border: solid white;
  border-width: 0 0 4px 0;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}



/* ------ End: Check-box ------ */

/* ------ Radio button ------ */

/* The container */
label.widget-radio-button {
  display: block;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;

  font-size: 16px;
  line-height: 24px;
  padding-left: 30px;
  margin-bottom: 0;
}
@media screen and (max-width: 1599px) {
  label.widget-radio-button {
    padding: 1px 4px 0 28px;
    font-size: 15px;
    line-height: 21px;
  }
}
@media screen and (max-width: 1199px) {
  label.widget-radio-button {
    padding: 2px 4px 0 28px;
    font-size: 14px;
    line-height: 18px;
  }
}
@media screen and (max-width: 767px) {
  label.widget-radio-button {
    padding: 2px 4px 0 28px;
    font-size: 14px;
    line-height: 18px;
  }
}

/* Hide the browser's default radio button */
label.widget-radio-button input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
label.widget-radio-button .checkmark {
  position: absolute;
  margin: 2px 0 0 0;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
label.widget-radio-button:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
label.widget-radio-button input:checked ~ .checkmark {
  background-color: #6eb28b;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
label.widget-radio-button .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
label.widget-radio-button input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
label.widget-radio-button .checkmark:after {
  top: 7px;
	left: 7px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: white;
}

/* ------ End: Radio button ------ */


/* ------ Modal message box ------ */

div.message-box {
  display: none;
  justify-content: center;
  align-items: center;
  overflow: auto;
  padding: 30px 0 30px 0;

  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.65); /* Black w/ opacity */
  z-index: 20;
}

div.message-box.show {
  display: flex;
}

div.message-box div.content {
  padding: 25px 25px 25px 25px;
  width: 400px;
  background-color: rgb(255, 255, 255);
  border-radius: 6px;
}
@media screen and (max-width: 1199px) {
  div.message-box div.content {
    width: 360px;
  }
}
@media screen and (max-width: 450px) {
  div.message-box div.content {
    padding: 15px 15px 15px 15px;
    width: calc(100% - 30px - 15px);
  }
}

div.message-box div.content div.icon  {
  display: block;
  margin: 0px auto 20px auto;

  width: 70px;
  height: 70px;

  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
}
div.message-box div.content div.icon::after  {
  position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
  content:url("/static/strelkaclientssite/res/webtemplate/ui/msgbox/success.png") url("/static/strelkaclientssite/res/webtemplate/ui/msgbox/fail.png")
        url("/static/strelkaclientssite/res/webtemplate/ui/msgbox/question.png") url("/static/strelkaclientssite/res/webtemplate/ui/msgbox/warning.png");
}

div.message-box div.content div.icon.success  {
  background-image: url("/static/strelkaclientssite/res/webtemplate/ui/msgbox/success.png");
}
div.message-box div.content div.icon.fail  {
  background-image: url("/static/strelkaclientssite/res/webtemplate/ui/msgbox/fail.png");
}
div.message-box div.content div.icon.question  {
  background-image: url("/static/strelkaclientssite/res/webtemplate/ui/msgbox/question.png");
}
div.message-box div.content div.icon.warning  {
  background-image: url("/static/strelkaclientssite/res/webtemplate/ui/msgbox/warning.png");
}

div.message-box div.content div.text {
  display: block;
  text-align: center;
  overflow-wrap: break-word; /* To break long worlds on small screens */

  font-size: 16px;
  color: rgb(10, 11, 12);
}

div.message-box div.content div.text a:link {
  text-decoration: none;
  color: rgb(49, 106, 198);
}
div.message-box div.content div.text a:visited {
  text-decoration: none;
  color: rgb(49, 106, 198);
}
div.message-box div.content div.text a:hover {
  text-decoration: underline;
  color: rgb(49, 106, 198);
}
div.message-box div.content div.text a:active {
  text-decoration: none;
  color: rgb(49, 106, 198);
}

div.message-box div.content div.buttons {
  display: none;
  justify-content: center;
  margin: 34px auto 0 auto;
}

/* Display buttons set depending on dialog option */
div.message-box.ok div.content div.buttons.ok {
  display: flex !important;
}
div.message-box.ok-cancel div.content div.buttons.ok-cancel {
  display: flex !important;
}
div.message-box.yes-cancel div.content div.buttons.yes-cancel {
  display: flex !important;
}


div.message-box div.content button.widget-button {
  display: block;
  margin: 0 10px 0 10px;
  height: 41px;
  font-size: 16px;
  width: 110px;
}

/* ------ End: Modal message box ------ */

/* ------ Non-working footer ------ */

footer {
  background-color: rgb(25, 26, 27);
  color: rgb(235, 235, 235);
  font-family: 'Noto Sans', 'Roboto', Arial;
  font-size: 16px;
  border-top: 1px solid rgb(234, 238, 242);
  padding: 55px 0 50px 0;
}
@media screen and (max-width: 1599px) {
  footer {
    font-size: 15px;
    padding-bottom: 50px;
  }
}
@media screen and (max-width: 1199px) {
  footer {

  }
}
@media screen and (max-width: 767px) {
  footer {
    padding: 42px 0 50px 0;
  }
}

footer span.disabled {
  text-decoration: none!important;
  font-weight: normal !important;
  color: rgb(140, 140, 140);
}


footer a {
  text-decoration: none;
  color: rgb(235, 235, 235);
}
footer a.disabled {
  text-decoration: none!important;
  font-weight: normal !important;
  color: rgb(140, 140, 140);
}

footer div.main {
  display: flex;
  justify-content: space-evenly;
}
@media screen and (max-width: 1599px) {
  footer div.main {

  }
}
@media screen and (max-width: 1199px) {
  footer div.main {

  }
}
@media screen and (max-width: 767px) {
  footer div.main {
    display: block;
    padding: 0 0 0 10px;
  }
}

footer div.main div.left {
  display: block;
  width: 300px;
}
@media screen and (max-width: 1599px) {
  footer div.main div.left {
    width: 270px;
  }
}
@media screen and (max-width: 1199px) {
  footer div.main div.left {
    width: 240px;
  }
}
@media screen and (max-width: 767px) {
  footer div.main div.left {
    width: auto;
  }
}


footer div.main div.left ul {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  list-style-type: none;
}

footer div.main div.left ul li {
  margin-bottom: 20px;
  line-height: 23px;
}

footer div.main div.right {
  display: block;
  width: 300px;
}
@media screen and (max-width: 1599px) {
  footer div.main div.right {
    width: 270px;
  }
}
@media screen and (max-width: 1199px) {
  footer div.main div.right {
    width: 240px;
  }
}
@media screen and (max-width: 767px) {
  footer div.main div.right {
    width: auto;
  }
}

footer div.main div.right ul {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  list-style-type: none;
}

footer div.main div.right ul li {
  margin-bottom: 20px;
  line-height: 23px;
}

footer div.aux {
  display: flex;
  justify-content: space-between;
  margin: 47px auto 0 auto;
  width: 800px;
}
@media screen and (max-width: 1599px) {
  footer div.aux {
    margin: 47px auto 0 auto;
    width: 750px;
  }
}
@media screen and (max-width: 1199px) {
  footer div.aux {
    display: block;
    margin: 40px auto 0 auto;
    width: calc(100% - 100px);
    padding: 0 0 0 100px;
  }
}
@media screen and (max-width: 767px) {
  footer div.aux {
    display: block;
    margin: 32px auto 0 auto;
    width: calc(100% - 10px);
    padding: 0 0 0 10px;
  }
}

footer div.aux div.copyright {
  display: inline-block;
  margin: 0 0 0 0;
  font-size: 14px;
}
@media screen and (max-width: 1599px) {
  footer div.aux div.copyright {
    margin: 0 0 0 0;
    font-size: 13px;
  }
}
@media screen and (max-width: 1199px) {
  footer div.aux div.copyright {
    display: block;
    width: auto;
  }
}
@media screen and (max-width: 767px) {
  footer div.aux div.copyright {
    width: 100%;
  }
}

footer div.aux div.terms-of-use a {
  text-decoration: underline;
}
footer div.aux div.terms-of-use {
  display: inline-block;
  margin: 0 0 0 0;
  font-size: 14px;
}
@media screen and (max-width: 1599px) {
  footer div.aux div.terms-of-use {
    margin: 0 0 0 0;
    font-size: 13px;
  }
}
@media screen and (max-width: 1199px) {
  footer div.aux div.terms-of-use {
    display: block;
    width: auto;
    margin: 10px 0 0 0;
  }
}
@media screen and (max-width: 767px) {
  footer div.aux div.terms-of-use {
    margin: 8px 0 0 0;
    width: 100%;
  }
}

footer div.aux div.privacy a {
  text-decoration: underline;
}
footer div.aux div.privacy {
  display: inline-block;
  margin: 0 0 0 0;
  font-size: 14px;
}
@media screen and (max-width: 1599px) {
  footer div.aux div.privacy {
    margin: 0 0 0 0;
    font-size: 13px;
  }
}
@media screen and (max-width: 1199px) {
  footer div.aux div.privacy {
    display: block;
    width: auto;
    margin: 10px 0 0 0;
  }
}
@media screen and (max-width: 767px) {
  footer div.aux div.privacy {
    margin: 8px 0 0 0;
    width: 100%;
  }
}

footer div.aux div.privacy-agreement a {
  text-decoration: underline;
}
footer div.aux div.privacy-agreement {
  display: inline-block;
  margin: 0 0 0 0;
  font-size: 14px;
}
@media screen and (max-width: 1599px) {
  footer div.aux div.privacy-agreement {
    margin: 0 0 0 0;
    font-size: 13px;
  }
}
@media screen and (max-width: 1199px) {
  footer div.aux div.privacy-agreement {
    display: block;
    width: auto;
    margin: 10px 0 0 0;
  }
}
@media screen and (max-width: 767px) {
  footer div.aux div.privacy-agreement {
    margin: 8px 0 0 0;
    width: 100%;
  }
}

footer div.aux div.privacy-agreement a {
  text-decoration: underline;
}

/* ------ End: Non-working footer ------ */


/* ------ Sticky header: Partner ------ */

header.partner {
  position: sticky;
  top: 0;

  /* To be above sidebar */
  z-index: 7;
}

header.partner div.cta-menu {
  display: block;
  width: 100%;
  background-color: #FFFFFF;
  border-color: rgb(234, 238, 242);
  border-width: 1px;
  border-style: none;
  border-bottom-style: solid;
  border-top-style: solid;
  z-index: 8;
  padding: 1px 0 1px 0;
  top: 0;
}
@media screen and (max-width: 1599px) {
  header.partner div.cta-menu {
    padding: 1px 0 1px 0;
  }
}
@media screen and (max-width: 1199px) {
  header.partner div.cta-menu {
    padding: 1px 0 1px 0;
  }
}
@media screen and (max-width: 767px) {
  header.partner div.cta-menu {
    padding: 1px 0 1px 0;
  }
}
@media screen and (max-width: 400px) {
  header.partner div.cta-menu {
    padding: 4px 0 4px 0;
  }
}

header.partner div.cta-menu div.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: auto;
  margin: 0 18px;
}
@media screen and (max-width: 1599px) {
  header.partner div.cta-menu div.container {
    margin: 0 18px;
  }
}
@media screen and (max-width: 1199px) {
  header.partner div.cta-menu div.container {
    margin: 0 18px;
  }
}
@media screen and (max-width: 767px) {
  header.partner div.cta-menu div.container {
    margin: 0 16px;
  }
}

header.partner div.cta-menu div.logo-wrap {
  height: 47px;
}
@media screen and (max-width: 1599px) {
  header.partner div.cta-menu div.logo-wrap {
    height: 40px;
  }
}
@media screen and (max-width: 1199px) {
  header.partner div.cta-menu div.logo-wrap {

  }
}
@media screen and (max-width: 767px) {
  header.partner div.cta-menu div.logo-wrap {
    height: 38px;
  }
}
@media screen and (max-width: 400px) {
  header.partner div.cta-menu div.logo-wrap {
    height: 27px;
  }
}

header.partner div.cta-menu div.logo-wrap img.logoheader {
  margin: 9px 0 0 0;
  width: 85px;
}
header.partner div.cta-menu div.logo-wrap img.logoheader.large {
  display: block;
}
header.partner div.cta-menu div.logo-wrap img.logoheader.small {
  display: none;
}
@media screen and (max-width: 1599px) {
  header.partner div.cta-menu div.logo-wrap img.logoheader {
    margin: 6px 0 0 0;
    width: 80px;
  }
}
@media screen and (max-width: 1199px) {
  header.partner div.cta-menu div.logo-wrap img.logoheader {
    margin: 8px 0 0 0;
    width: 75px;
  }
}
@media screen and (max-width: 767px) {
  header.partner div.cta-menu div.logo-wrap img.logoheader {
    margin: 7px 0 0 0;
    width: 70px;
  }
}
@media screen and (max-width: 400px) {
  header.partner div.cta-menu div.logo-wrap img.logoheader {
    margin: 2px 0 0 0;
    width: 16px;
  }
  header.partner div.cta-menu div.logo-wrap img.logoheader.large {
    display: none;
  }
  header.partner div.cta-menu div.logo-wrap img.logoheader.small {
    display: block;
  }
}

header.partner div.cta-menu div.balance-wrap {
  position: relative;
  margin: 0 35px 0 0;
}
@media screen and (max-width: 1599px) {
  header.partner div.cta-menu div.balance-wrap {
    margin: 0 32px 0 0;
  }
}
@media screen and (max-width: 1199px) {
  header.partner div.cta-menu div.balance-wrap {
    margin: 0 30px 2px 0;
  }
}
@media screen and (max-width: 767px) {
  header.partner div.cta-menu div.balance-wrap {
    margin: 0 30px 2px 0;
  }
}
@media screen and (max-width: 400px) {
  header.partner div.cta-menu div.balance-wrap {
    margin: 0 25px 2px 0;
  }
}

header.partner div.cta-menu div.balance-wrap div.available {

}

header.partner div.cta-menu div.balance-wrap div.available a.finance {
  text-decoration: none;
  font-size: 16px;
  line-height: 19px;
  padding-left: 3px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
header.partner div.cta-menu div.balance-wrap[data-balance-low-alert-state="ok"] div.available a.finance {
  background-color: transparent;
  color: #0D0D0D;
}
header.partner div.cta-menu div.balance-wrap[data-balance-low-alert-state="low"] div.available a.finance {
  background-color: #ffefc7;
  color: #ff6062;
}
header.partner div.cta-menu div.balance-wrap[data-balance-low-alert-state="critical"] div.available a.finance {
  background-color:#ff6062;
  color: #ffffff;
}
@media screen and (max-width: 1599px) {
  header.partner div.cta-menu div.balance-wrap div.available a.finance {
    font-size: 15px;
    line-height: 17px;
    margin: 0 0 13px 0;
    padding-left: 3px;
  }
}
@media screen and (max-width: 1199px) {
  header.partner div.cta-menu div.balance-wrap div.available a.finance {
    font-size: 14px;
    line-height: 14px;
    margin: 0 0 12px 0;
    padding-left: 3px;
  }
}
@media screen and (max-width: 400px) {
  header.partner div.cta-menu div.balance-wrap div.available a.finance {
    line-height: 15px;
    margin: 0 0 12px 0;
  }
}

header.partner div.cta-menu div.balance-wrap div.available span.amount {

}

header.partner div.cta-menu div.balance-wrap div.available span.currency-sign {
  margin: 0 0 0 5px;
}
@media screen and (max-width: 1599px) {
  header.partner div.cta-menu div.balance-wrap div.available span.currency-sign {
    margin: 0 0 0 5px;
  }
}
@media screen and (max-width: 1199px) {
  header.partner div.cta-menu div.balance-wrap div.available span.currency-sign {
    margin: 0 0 0 5px;
  }
}
@media screen and (max-width: 767px) {
  header.partner div.cta-menu div.balance-wrap div.available span.currency-sign {
    margin: 0 0 0 4px;
  }
}

header.partner div.cta-menu div.balance-wrap div.available span.arrow {
  margin: 9px 10px 0 9px;
}
@media screen and (max-width: 1599px) {
  header.partner div.cta-menu div.balance-wrap div.available span.arrow {
    margin: 10px 0 0 7px;
  }
}
@media screen and (max-width: 1199px) {
  header.partner div.cta-menu div.balance-wrap div.available span.arrow {
    margin: 10px 0 0 6px;
  }
}
@media screen and (max-width: 767px) {
  header.partner div.cta-menu div.balance-wrap div.available span.arrow {
    margin: 10px 0 0 5px;
  }
}

header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg {
  position: absolute;
  display: none;
  z-index: 6;

  top: 0px;
  right: 0px;
  margin-top: 20px;
  padding-top: 0px;

  /* display: block !important; */
}
header.partner div.cta-menu div.balance-wrap:hover div.detailed-balance-container-bg {
  display: block !important;
}

header.partner div.cta-menu div.balance-wrap div.detailed-balance-container {
  display: block;

  background-color: #FFFFFF;
  border-radius: 5px;
  box-shadow: 0px 0px 8px rgba(174, 174, 174, 0.349019607843137);

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  margin: 19px 0 0 0;
  padding: 17px 17px 17px 17px;
}
@media screen and (max-width: 1599px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container {
    margin: 14px 0 0 0;
    padding: 15px 15px 15px 15px;
  }
}
@media screen and (max-width: 1199px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container {
    margin: 14px 0 0 0;
    padding: 14px 14px 14px 14px;
  }
}
@media screen and (max-width: 767px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container {
    margin: 13px 0 0 0;
    padding: 14px 14px 14px 14px;
  }
}
@media screen and (max-width: 400px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container {
    margin: 11px 0 0 0;
  }
}

header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg div.low-balance-alert-message {
  display: none;
  font-size: 12px;
  line-height: 19px;
  margin: 0 0 10px 0;
  padding: 6px 8px 6px 8px;
}
header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg div.low-balance-alert-message.low {
  background-color: #ffefc7;
  color: #ff6062;
}
header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg div.low-balance-alert-message.critical {
  background-color:#ff6062;
  color: #ffffff;
}
header.partner div.cta-menu div.balance-wrap[data-balance-low-alert-state="low"] div.detailed-balance-container-bg div.low-balance-alert-message.low {
  display: block;
}
header.partner div.cta-menu div.balance-wrap[data-balance-low-alert-state="critical"] div.detailed-balance-container-bg div.low-balance-alert-message.critical {
  display: block;
}
@media screen and (max-width: 1599px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg div.low-balance-alert-message {
    font-size: 11px;
    line-height: 17px;
    margin: 0 0 9px 0;
    padding: 6px 7px 6px 7px;
  }
}
@media screen and (max-width: 1199px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg div.low-balance-alert-message {
    font-size: 11px;
    line-height: 16px;
    margin: 0 0 9px 0;
    padding: 6px 7px 6px 7px;
  }
}
@media screen and (max-width: 767px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg div.low-balance-alert-message {
    font-size: 11px;
    line-height: 16px;
    margin: 0 0 9px 0;
    padding: 6px 7px 6px 7px;
  }
}


header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance {
  display: block;
  list-style-type: none;
  list-style-position: outside;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 0 0;
  padding: 0;
}
header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance li:not(:first-child) {
  margin-top: 9px;
}
@media screen and (max-width: 1599px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance li:not(:first-child) {
    margin-top: 8px;
  }
}
@media screen and (max-width: 1199px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance li:not(:first-child) {
    margin-top: 7px;
  }
}
@media screen and (max-width: 767px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance li:not(:first-child) {
    margin-top: 7px;
  }
}
@media screen and (max-width: 400px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance li {
    display: block;
  }
}

header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance li div.detailed-balance-right {
  margin-left: 30px;
}
@media screen and (max-width: 1599px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance li div.detailed-balance-right {
    margin-left: 25px;
  }
}
@media screen and (max-width: 1199px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance li div.detailed-balance-right {
    margin-left: 23px;
  }
}
@media screen and (max-width: 767px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance li div.detailed-balance-right {
    margin-left: 23px;
  }
}
@media screen and (max-width: 400px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance li div.detailed-balance-right {
    margin-left: 0;
  }
}

header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance li div.detailed-balance-left span.label {
  cursor: default;
  color: #0D0D0D;
  font-size: 16px;
  line-height: 19px;
}
@media screen and (max-width: 1599px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance li div.detailed-balance-left span.label {
    font-size: 15px;
    line-height: 17px;
  }
}
@media screen and (max-width: 1199px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance li div.detailed-balance-left span.label {
    font-size: 14px;
    line-height: 14px;
  }
}
@media screen and (max-width: 767px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance li div.detailed-balance-left span.label {
    font-size: 14px;
    line-height: 14px;
  }
}
@media screen and (max-width: 400px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance li div.detailed-balance-left span.label {
    line-height: 15px;
  }
}

header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance li div.detailed-balance-right span {
  cursor: default;
  color: #0D0D0D;
  font-size: 16px;
  line-height: 19px;
}
@media screen and (max-width: 1599px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance li div.detailed-balance-right span {
    font-size: 15px;
    line-height: 17px;
  }
}
@media screen and (max-width: 1199px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance li div.detailed-balance-right span {
    font-size: 14px;
    line-height: 14px;
  }
}
@media screen and (max-width: 767px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance li div.detailed-balance-right span {
    font-size: 14px;
    line-height: 14px;
  }
}
@media screen and (max-width: 400px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance li div.detailed-balance-right span {
    line-height: 15px;
  }
}

header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance li div.detailed-balance-right span.currency-sign {
  margin: 0 0 0 4px;
}
@media screen and (max-width: 1599px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance li div.detailed-balance-right span.currency-sign {
    margin: 0 0 0 5px;
  }
}
@media screen and (max-width: 1199px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance li div.detailed-balance-right span.currency-sign {
    margin: 0 0 0 5px;
  }
}
@media screen and (max-width: 767px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg ul.detailed-balance li div.detailed-balance-right span.currency-sign {
    margin: 0 0 0 4px;
  }
}

header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg div.replenish {
  margin: 15px 0 0 0;
}
header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg div.replenish.hide {
  margin: 0;
  height: 0;
}
@media screen and (max-width: 1599px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg div.replenish {
    margin: 13px 0 0 0;
  }
}
@media screen and (max-width: 1199px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg div.replenish {
    margin: 12px 0 0 0;
  }
}
@media screen and (max-width: 767px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg div.replenish {
    margin: 12px 0 0 0;
  }
}

header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg div.replenish button.replenish {
  width: 100%;
  min-width: 250px;
  height: 50px;
  font-size: 16px;
}
header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg div.replenish.hide button.replenish {
  visibility: hidden;
}
@media screen and (max-width: 1599px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg div.replenish button.replenish {
    min-width: 240px;
    height: 45px;
    font-size: 15px;
  }
}
@media screen and (max-width: 1199px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg div.replenish button.replenish {
    min-width: 220px;
    height: 40px;
    font-size: 14px;
  }
}
@media screen and (max-width: 767px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg div.replenish button.replenish {
    min-width: 220px;
    height: 42px;
    font-size: 14px;
  }
}
@media screen and (max-width: 400px) {
  header.partner div.cta-menu div.balance-wrap div.detailed-balance-container-bg div.replenish button.replenish {
    min-width: 170px;
    height: 37px;
    font-size: 14px;
  }
}

header.partner div.cta-menu div.user-wrap {
  position: relative;
  margin: 0;
}

header.partner div.cta-menu div.user-wrap a.account {
  text-decoration: none;
}

header.partner div.cta-menu div.user-wrap span.user {
  display: inline-block;
  vertical-align: top;
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  background-image: url("/static/strelkaclientssite/res/webtemplate/ui/user.png");

  margin: 0;
  width: 25px;
  height: 25px;
}
@media screen and (max-width: 1599px) {
  header.partner div.cta-menu div.user-wrap span.user {
    width: 22px;
    height: 22px;
  }
}
@media screen and (max-width: 1199px) {
  header.partner div.cta-menu div.user-wrap span.user {
    width: 20px;
    height: 20px;
  }
}
@media screen and (max-width: 767px) {
  header.partner div.cta-menu div.user-wrap span.user {
    width: 20px;
    height: 20px;
  }
}

header.partner div.cta-menu div.user-wrap span.arrow {
  margin: 10px 10px 0 9px;
}
@media screen and (max-width: 1599px) {
  header.partner div.cta-menu div.user-wrap span.arrow {
    margin: 10px 0 0 7px;
  }
}
@media screen and (max-width: 1199px) {
  header.partner div.cta-menu div.user-wrap span.arrow {
    margin: 9px 0 0 6px;
  }
}
@media screen and (max-width: 767px) {
  header.partner div.cta-menu div.user-wrap span.arrow {
    margin: 9px 0 0 5px;
  }
}

header.partner div.cta-menu div.user-wrap div.submenu-bg {
  position: absolute;
  display: none;
  z-index: 6;

  top: 0px;
  right: 0px;
  margin-top: 20px;
  padding-top: 0px;
}
header.partner div.cta-menu div.user-wrap:hover div.submenu-bg {
  display: block !important;
}

header.partner div.cta-menu div.user-wrap div.submenu-bg div.submenu {
  display: block;

  background-color: #FFFFFF;
  border-radius: 5px;
  box-shadow: 0px 0px 8px rgba(174, 174, 174, 0.349019607843137);

  margin: 19px 0 0 0;
  /* padding: 5px 7px 5px 7px; */
  padding: 8px 8px 8px 8px;
}
@media screen and (max-width: 1599px) {
  header.partner div.cta-menu div.user-wrap div.submenu-bg div.submenu {
    margin: 13px 0 0 0;
    padding: 7px 7px 7px 7px;
  }
}
@media screen and (max-width: 1199px) {
  header.partner div.cta-menu div.user-wrap div.submenu-bg div.submenu {
    margin: 13px 0 0 0;
    padding: 6px 6px 6px 6px;
  }
}
@media screen and (max-width: 767px) {
  header.partner div.cta-menu div.user-wrap div.submenu-bg div.submenu {
    margin: 12px 0 0 0;
    padding: 6px 6px 6px 6px;
  }
}

header.partner div.cta-menu div.user-wrap div.submenu-bg ul {
  display: block;
  list-style-type: none;
  list-style-position: outside;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

header.partner div.cta-menu div.user-wrap div.submenu-bg ul li {
  display: block;
  padding: 0
}

header.partner div.cta-menu div.user-wrap div.submenu-bg ul li .item {
  display: block;
  text-decoration: none;
  padding: 8px 11px 8px 11px;
}
header.partner div.cta-menu div.user-wrap div.submenu-bg ul li.actionable .item {
  cursor: pointer;
  color: #0D0D0D;
  font-size: 16px;
  line-height: 19px;
}
header.partner div.cta-menu div.user-wrap div.submenu-bg ul li.actionable .item:hover {
  background-color: #F7F7F7;
  color: rgb(49, 137, 205);
}
header.partner div.cta-menu div.user-wrap div.submenu-bg ul li:not(.actionable) .item {
  cursor: default;
  background-color: #f6f8f9;
  color: #0D0D0D;
  /* font-weight: bold; */
  font-size: 14px;
  line-height: 17px;
}
header.partner div.cta-menu div.user-wrap div.submenu-bg ul .item.bottom-line {
  border: 1px none RGB(240, 240, 240);
  border-bottom-style: solid;
}
@media screen and (max-width: 1599px) {
  header.partner div.cta-menu div.user-wrap div.submenu-bg ul li .item {
    padding: 7px 10px 7px 10px;
  }
  header.partner div.cta-menu div.user-wrap div.submenu-bg ul li.actionable .item {
    font-size: 15px;
    line-height: 17px;
  }
  header.partner div.cta-menu div.user-wrap div.submenu-bg ul li:not(.actionable) .item {
    font-size: 13px;
    line-height: 15px;
  }
}
@media screen and (max-width: 1199px) {
  header.partner div.cta-menu div.user-wrap div.submenu-bg ul li .item {
    padding: 6px 9px 6px 9px;
  }
  header.partner div.cta-menu div.user-wrap div.submenu-bg ul li.actionable .item {
    font-size: 14px;
    line-height: 14px;
  }
  header.partner div.cta-menu div.user-wrap div.submenu-bg ul li:not(.actionable) .item {
    font-size: 12px;
    line-height: 13px;
  }
}
@media screen and (max-width: 767px) {
  header.partner div.cta-menu div.user-wrap div.submenu-bg ul li .item {
    padding: 6px 9px 6px 9px;
  }
  header.partner div.cta-menu div.user-wrap div.submenu-bg ul li.actionable .item {
    line-height: 15px;
  }
  header.partner div.cta-menu div.user-wrap div.submenu-bg ul li:not(.actionable) .item {
    font-size: 12px;
    line-height: 13px;
  }
}

header.partner div.cta-menu div.user-wrap div.submenu-bg ul li.settings .item {
  margin: 5px 0 0 0;
}

div.partner-header-replenish {
  display: none;
  justify-content: center;
  align-items: center;
  overflow: auto;
  padding: 30px 0 30px 0;

  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.65); /* Black w/ opacity */
  z-index: 10;
}

div.partner-header-replenish.show.top {
  align-items: flex-start;
}

div.partner-header-replenish.show {
  display: flex;
}

div.partner-header-replenish div.content {
  padding: 25px 30px 30px 30px;
  width: 700px;
  background-color: rgb(255, 255, 255);
  border-radius: 6px;
}
@media screen and (max-width: 1599px) {
  div.partner-header-replenish div.content {
    width: 650px;
  }
}
@media screen and (max-width: 1199px) {
  div.partner-header-replenish div.content {
    width: 630px;
  }
}
@media screen and (max-width: 767px) {
  div.partner-header-replenish div.content {
    padding: 15px 15px 15px 15px;
    width: calc(100% - 30px - 15px);
  }
}

div.partner-header-replenish div.content div.caption {
  display: inline-block;
  /* font-family: "Raleway"; */
  margin: 0 0 10px 0;
  font-size: 23px;
  line-height: 1.2;
  font-weight: bold;
  color: rgb(10, 11, 12);
}
@media screen and (max-width: 1199px) {
  div.partner-header-replenish div.content div.caption {
    width: calc(100% - 20px);
  }
}



div.partner-header-replenish div.content span.close {
  overflow: hidden;
  float: right;
  position: relative;
  color: rgb(213, 213, 213);
  height: 27px;
  line-height: 23px;
  font-size: 40px;
  cursor: pointer;

  left: 65px;
  top: -30px;
}
@media screen and (max-width: 1199px) {
  div.partner-header-replenish div.content span.close {
    height: 23px;
    line-height: 20px;
    font-size: 28px;

    left: 55px;
    top: -31px;
  }
}
@media screen and (max-width: 767px) {
  div.partner-header-replenish div.content span.close {
    height: 23px;
    line-height: 20px;
    font-size: 28px;
    color: rgb(187, 191, 196);

    left: 8px;
    top: -11px;
  }
}
div.partner-header-replenish div.content span.close:hover {
  color: rgb(245, 245, 245);
}

div.partner-header-replenish div.content div.payment-methods {
  display: block;
}

div.partner-header-replenish div.content div.payment-methods div.payment-method {
  display: block;
  margin: 25px 0 0 0;
}

div.partner-header-replenish div.content div.payment-method-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 465px) {
  div.partner-header-replenish div.content div.payment-method-wrap {
    display: block;
  }
}

div.partner-header-replenish div.content div.payment-method-wrap label.widget-radio-button {
  width: auto;
}


div.partner-header-replenish div.content div.payment-method-wrap p.fee {
  margin: 0 0 0 0;
  width: 110px;
  font-style: italic;
  color: #6b88ca;
  padding: 3px 8px 2px 8px;
  background-color: #fff6db;
  font-size: 14px;
  line-height: 24px;
}
@media screen and (max-width: 1599px) {
  div.partner-header-replenish div.content div.payment-method-wrap p.fee {
    width: 105px;
    font-size: 13px;
    line-height: 21px;
    padding: 3px 7px 2px 7px;
  }
}
@media screen and (max-width: 1199px) {
  div.partner-header-replenish div.content div.payment-method-wrap p.fee {
    width: 96px;
    font-size: 12px;
    line-height: 18px;
    padding: 2px 6px 2px 6px;
  }
}
@media screen and (max-width: 767px) {
  div.partner-header-replenish div.content div.payment-method-wrap p.fee {
    width: 96px;
    font-size: 12px;
    line-height: 18px;
  }
}
@media screen and (max-width: 465px) {
  div.partner-header-replenish div.content div.payment-method-wrap p.fee {
    display: inline-block;
    width: auto;
    margin: 10px 0 0 30px;
  }
}

div.partner-header-replenish div.content div.bank-cards-list {
  display: none;
  margin: 0 0 0 40px;
}
div.partner-header-replenish div.content div.bank-cards-list.show {
  display: block !important;
}

div.partner-header-replenish div.content div.bank-cards-list div.bank-cards-item {
  display: flex;
  justify-content: space-between;
  margin: 25px 0 0 0;
}
@media screen and (max-width: 630px) {
  div.partner-header-replenish div.content div.bank-cards-list div.bank-cards-item.existing {
    display: block;
  }
}
@media screen and (max-width: 390px) {
  div.partner-header-replenish div.content div.bank-cards-list div.bank-cards-item.new {
    display: block;
  }
}

div.partner-header-replenish div.content div.bank-cards-list div.bank-cards-item.existing div.left {

}

div.partner-header-replenish div.content div.bank-cards-list div.bank-cards-item.existing div.right {
  display: flex;
  justify-content: flex-end;
}
@media screen and (max-width: 630px) {
  div.partner-header-replenish div.content div.bank-cards-list div.bank-cards-item.existing div.right {
    justify-content: flex-start;
    margin: 12px 0 0 0;
  }
}

div.partner-header-replenish div.content div.bank-cards-item.existing div.right p.autopay {
  display: block;
  text-decoration: underline;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  width: auto;

  margin: auto 20px auto 0;
  font-size: 15px;
  line-height: 24px;
  font-style: italic;
}
div.partner-header-replenish div.content div.bank-cards-list div.bank-cards-item.existing.auto-payments div.right p.autopay {
  color: rgb(0, 0, 0);
}
div.partner-header-replenish div.content div.bank-cards-list div.bank-cards-item.existing:not(.auto-payments) div.right p.autopay {
  color: rgb(180, 180, 180);
}
@media screen and (max-width: 1599px) {
  div.partner-header-replenish div.content div.bank-cards-item.existing div.right p.autopay {
    font-size: 14px;
    line-height: 21px;
  }
}
@media screen and (max-width: 1199px) {
  div.partner-header-replenish div.content div.bank-cards-item.existing div.right p.autopay {
    font-size: 13px;
    line-height: 18px;
  }
}
@media screen and (max-width: 767px) {
  div.partner-header-replenish div.content div.bank-cards-item.existing div.right p.autopay {
    font-size: 13px;
    line-height: 18px;
  }
}

div.partner-header-replenish div.content div.bank-cards-list div.bank-cards-item.existing div.right p.unbind {
  display: block;
  text-decoration: underline;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  color: rgb(180, 180, 180);
  width: auto;
  margin: auto 10px auto 0;
  font-size: 15px;
  line-height: 24px;
  font-style: italic;
}
@media screen and (max-width: 1599px) {
  div.partner-header-replenish div.content div.bank-cards-list div.bank-cards-item.existing div.right p.unbind {
    font-size: 14px;
    line-height: 21px;
  }
}
@media screen and (max-width: 1199px) {
  div.partner-header-replenish div.content div.bank-cards-list div.bank-cards-item.existing div.right p.unbind {
    font-size: 13px;
    line-height: 18px;
  }
}
@media screen and (max-width: 767px) {
  div.partner-header-replenish div.content div.bank-cards-list div.bank-cards-item.existing div.right p.unbind {
    font-size: 13px;
    line-height: 18px;
  }
}

div.partner-header-replenish div.content div.bank-cards-list div.bank-cards-item.new div.widget-checkbox.bind {
  display: none;
}
div.partner-header-replenish div.content div.bank-cards-list div.bank-cards-item.new div.widget-checkbox.bind.show {
  display: block !important;
}
@media screen and (max-width: 390px) {
  div.partner-header-replenish div.content div.bank-cards-list div.bank-cards-item.new div.widget-checkbox.bind {
    margin: 13px 0 0 0;
  }
}

div.partner-header-replenish div.content div.amounts {
  display: flex;
  justify-content: space-between;
  margin: 30px 0 0 0;
}
@media screen and (max-width: 767px) {
  div.partner-header-replenish div.content div.amounts {

  }
}
@media screen and (max-width: 540px) {
  div.partner-header-replenish div.content div.amounts {
    display: block;
  }
}

div.partner-header-replenish div.content div.amounts div.net {
  display: block;
  width: calc(50% - 20px);
}
@media screen and (max-width: 767px) {
  div.partner-header-replenish div.content div.amounts div.net {
    width: calc(50% - 10px);
  }
}
@media screen and (max-width: 540px) {
  div.partner-header-replenish div.content div.amounts div.net {
    width: 100%;
  }
}

div.partner-header-replenish div.content div.amounts div.net p.label {
  display: block;
  margin: 0 0 15px 0;
  color: #363636;
  font-size: 16px;
  line-height: 19px;
}
@media screen and (max-width: 1599px) {
  div.partner-header-replenish div.content div.amounts div.net p.label {
    font-size: 15px;
    line-height: 17px;
    margin: 0 0 13px 0;
  }
}
@media screen and (max-width: 1199px) {
  div.partner-header-replenish div.content div.amounts div.net p.label {
    font-size: 14px;
    line-height: 14px;
    margin: 0 0 12px 0;
  }
}
@media screen and (max-width: 400px) {
  div.partner-header-replenish div.content div.amounts div.net p.label {
    line-height: 15px;
    margin: 0 0 12px 0;
  }
}

div.partner-header-replenish div.content div.amounts div.net input.widget-text-input.amount-net {
  display: block;
  width: calc(100% - 20px);
}
@media screen and (max-width: 1599px) {
  div.partner-header-replenish div.content div.amounts div.net input.widget-text-input.amount-net {
    width: calc(100% - 17px);
  }
}
@media screen and (max-width: 1199px) {
  div.partner-header-replenish div.content div.amounts div.net input.widget-text-input.amount-net {
    width: calc(100% - 16px);
  }
}
@media screen and (max-width: 767px) {
  div.partner-header-replenish div.content div.amounts div.net input.widget-text-input.amount-net {
    width: calc(100% - 16px);
  }
}

div.partner-header-replenish div.content div.amounts div.with-fee {
  display: block;
  width: calc(50% - 20px);
}
@media screen and (max-width: 767px) {
  div.partner-header-replenish div.content div.amounts div.with-fee {
    width: calc(50% - 10px);
  }
}
@media screen and (max-width: 540px) {
  div.partner-header-replenish div.content div.amounts div.with-fee {
    margin: 20px 0 0 0;
    width: 100%;
  }
}

div.partner-header-replenish div.content div.amounts div.with-fee p.label {
  display: block;
  margin: 0 0 15px 0;
  color: #363636;
  font-size: 16px;
  line-height: 19px;
}
@media screen and (max-width: 1599px) {
  div.partner-header-replenish div.content div.amounts div.with-fee p.label {
    font-size: 15px;
    line-height: 17px;
    margin: 0 0 13px 0;
  }
}
@media screen and (max-width: 1199px) {
  div.partner-header-replenish div.content div.amounts div.with-fee p.label {
    margin: 12px 0 0 0;
    font-size: 14px;
    line-height: 14px;
    margin: 0 0 12px 0;
  }
}
@media screen and (max-width: 400px) {
  div.partner-header-replenish div.content div.amounts div.with-fee p.label {
    line-height: 15px;
    margin: 0 0 12px 0;
  }
}

div.partner-header-replenish div.content div.amounts div.with-fee div.amount-with-fee {
  display: block;
  width: calc(100% - 20px);

  background-color: #f4f4f4;

  border-radius: 6px;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(203, 209, 212);

  text-align: left;
  vertical-align: middle;

  height: 18px;
  font-size: 18px;
  font-family: "Noto Sans";
  color: rgb(13, 13, 13);
  line-height: 18px;
  padding: 20px 0 20px 19px;

  /* No highlightting when focused */
  outline: none;
}
@media screen and (max-width: 1599px) {
  div.partner-header-replenish div.content div.amounts div.with-fee div.amount-with-fee {
    height: 16px;
    font-size: 16px;
    line-height: 16px;
    padding: 16px 0 16px 16px;
    width: calc(100% - 17px);
  }
}
@media screen and (max-width: 1199px) {
  div.partner-header-replenish div.content div.amounts div.with-fee div.amount-with-fee {
    font-size: 14px;
    height: 14px;
    line-height: 14px;
    padding: 15px 0 15px 15px;
    width: calc(100% - 16px);
  }
}
@media screen and (max-width: 767px) {
  div.partner-header-replenish div.content div.amounts div.with-fee div.amount-with-fee {
    height: 16px;
    font-size: 16px;
    line-height: 16px;
    padding: 15px 0 15px 15px;
    width: calc(100% - 16px);
  }
}

div.partner-header-replenish div.content button.pay {
  display: block;
  margin: 30px auto 0 auto;
  width: 350px;
}
@media screen and (max-width: 1599px) {
  div.partner-header-replenish div.content button.pay {
    margin: 27px auto 0 auto;
    width: 320px;
  }
}
@media screen and (max-width: 1199px) {
  div.partner-header-replenish div.content button.pay {
    margin: 25px auto 0 auto;
    width: 300px;
  }
}
@media screen and (max-width: 767px) {
  div.partner-header-replenish div.content button.pay {
    margin: 25px auto 0 auto;
    max-width: 280px;
    width: calc(100%);
  }
}

div.partner-header-autopay-settings {
  display: none;
  justify-content: center;
  align-items: center;
  overflow: auto;
  padding: 30px 0 30px 0;

  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.65); /* Black w/ opacity */
  z-index: 10;
}

div.partner-header-autopay-settings.show.top {
  align-items: flex-start;
}

div.partner-header-autopay-settings.show {
  display: flex;
}

div.partner-header-autopay-settings div.content {
  padding: 25px 30px 30px 30px;
  width: 400px;
  background-color: rgb(255, 255, 255);
  border-radius: 6px;
}
@media screen and (max-width: 1599px) {
  div.partner-header-autopay-settings div.content {
    width: 350px;
  }
}
@media screen and (max-width: 1199px) {
  div.partner-header-autopay-settings div.content {
    width: 320px;
  }
}
@media screen and (max-width: 767px) {
  div.partner-header-autopay-settings div.content {
    padding: 15px 15px 15px 15px;
    max-width: 320px;
    width: calc(100% - 30px - 15px);
  }
}

div.partner-header-autopay-settings div.content div.caption {
  display: inline-block;
  /* font-family: "Raleway"; */
  margin: 0 0 20px 0;
  font-size: 23px;
  line-height: 1.2;
  font-weight: bold;
  color: rgb(10, 11, 12);
}
@media screen and (max-width: 1199px) {
  div.partner-header-autopay-settings div.content div.caption {
    width: calc(100% - 20px);
  }
}

div.partner-header-autopay-settings div.content span.close {
  overflow: hidden;
  float: right;
  position: relative;
  color: rgb(213, 213, 213);
  height: 27px;
  line-height: 23px;
  font-size: 40px;
  cursor: pointer;

  left: 65px;
  top: -30px;
}
@media screen and (max-width: 1199px) {
  div.partner-header-autopay-settings div.content span.close {
    height: 23px;
    line-height: 20px;
    font-size: 28px;

    left: 55px;
    top: -31px;
  }
}
@media screen and (max-width: 767px) {
  div.partner-header-autopay-settings div.content span.close {
    height: 23px;
    line-height: 20px;
    font-size: 28px;
    color: rgb(187, 191, 196);

    left: 8px;
    top: -11px;
  }
}
div.partner-header-autopay-settings div.content span.close:hover {
  color: rgb(245, 245, 245);
}

div.partner-header-autopay-settings div.content div.error-message {
  display: none;
  color: rgb(10, 11, 12);
  background-color: #ebbaba;
  margin-bottom: 20px;
  padding: 5px 8px 5px 8px;
  font-size: 15px;
  line-height: 22px;
}
div.partner-header-autopay-settings.error-message div.content div.error-message {
  display: block;
}
@media screen and (max-width: 1599px) {
  div.partner-header-autopay-settings div.content div.error-message {
    margin: 0 0 18px 0;
    padding: 4px 7px 4px 7px;
    font-size: 14px;
    line-height: 19px;
  }
}
@media screen and (max-width: 1199px) {
  div.partner-header-autopay-settings div.content div.error-message {
    margin: 0 0 15px 0;
    padding: 3px 6px 3px 6px;
    font-size: 13px;
    line-height: 16px;
  }
}
@media screen and (max-width: 400px) {
  div.partner-header-autopay-settings div.content div.error-message {
    line-height: 16px;
  }
}

div.partner-header-autopay-settings div.content div.card-title {
  display: block;
  font-weight: bold;
  margin: 0 0 15px 0;
  color: #21750d;
  font-size: 15px;
  line-height: 19px;
}
@media screen and (max-width: 1599px) {
  div.partner-header-autopay-settings div.content div.card-title {
    font-size: 14px;
    line-height: 17px;
    margin: 0 0 13px 0;
  }
}
@media screen and (max-width: 1199px) {
  div.partner-header-autopay-settings div.content div.card-title {
    font-size: 13px;
    line-height: 16px;
    margin: 0 0 12px 0;
  }
}
@media screen and (max-width: 767px) {
  div.partner-header-autopay-settings div.content div.card-title {
    line-height: 13px;
    margin: 0 0 12px 0;
  }
}

div.partner-header-autopay-settings div.content div.widget-checkbox.activate {
  display: block;
  margin: 20px 0 0 0;
}

div.partner-header-autopay-settings div.content div.settings {
  margin: 25px 0 0 0;
}
div.partner-header-autopay-settings div.content div.settings.show {
  display: block;
}
div.partner-header-autopay-settings div.content div.settings:not(.show) {
  display: none;
}
@media screen and (max-width: 1599px) {
  div.partner-header-autopay-settings div.content div.settings {
    margin: 22px 0 0 0;
  }
}
@media screen and (max-width: 1199px) {
  div.partner-header-autopay-settings div.content div.settings {
    margin: 20px 0 0 0;
  }
}
@media screen and (max-width: 767px) {
  div.partner-header-autopay-settings div.content div.settings {
    margin: 20px 0 0 0;
  }
}

div.partner-header-autopay-settings div.content div.setting {
  display: block;
  margin: 20px 0 0 0;
}
@media screen and (max-width: 1599px) {
  div.partner-header-autopay-settings div.content div.setting {
    margin: 17px 0 0 0;
  }
}
@media screen and (max-width: 1199px) {
  div.partner-header-autopay-settings div.content div.setting {
    margin: 15px 0 0 0;
  }
}
@media screen and (max-width: 767px) {
  div.partner-header-autopay-settings div.content div.setting {
    margin: 15px 0 0 0;
  }
}

div.partner-header-autopay-settings div.content div.setting p.title {
  display: block;
  margin: 0 0 15px 0;
  color: #363636;
  font-size: 16px;
  line-height: 19px;
}
@media screen and (max-width: 1599px) {
  div.partner-header-autopay-settings div.content div.setting p.title {
    font-size: 15px;
    line-height: 17px;
    margin: 0 0 13px 0;
  }
}
@media screen and (max-width: 1199px) {
  div.partner-header-autopay-settings div.content div.setting p.title {
    font-size: 14px;
    line-height: 14px;
    margin: 0 0 12px 0;
  }
}
@media screen and (max-width: 400px) {
  div.partner-header-autopay-settings div.content div.setting p.title {
    line-height: 15px;
    margin: 0 0 12px 0;
  }
}

div.partner-header-autopay-settings div.content div.setting p.note {
  display: block;
  margin: 0 0 8px 0;
  color: #8a8a8a;
  font-size: 12px;
  line-height: 13px;
}
@media screen and (max-width: 1599px) {
  div.partner-header-autopay-settings div.content div.setting p.note {
    font-size: 11px;
    line-height: 12px;
    margin: 0 0 7px 0;
  }
}
@media screen and (max-width: 1199px) {
  div.partner-header-autopay-settings div.content div.setting p.note {
    font-size: 11px;
    line-height: 12px;
    margin: 0 0 7px 0;
  }
}
@media screen and (max-width: 400px) {
  div.partner-header-autopay-settings div.content div.setting p.note {
    line-height: 12px;
    margin: 0 0 7px 0;
  }
}

div.partner-header-autopay-settings div.content div.setting input {
  display: block;
  width: calc(100% - 20px);
}
@media screen and (max-width: 1599px) {
  div.partner-header-autopay-settings div.content div.setting input {
    width: calc(100% - 17px);
  }
}
@media screen and (max-width: 1199px) {
  div.partner-header-autopay-settings div.content div.setting input {
    width: calc(100% - 16px);
  }
}
@media screen and (max-width: 767px) {
  div.partner-header-autopay-settings div.content div.setting input {
    width: calc(100% - 16px);
  }
}

div.partner-header-autopay-settings div.content div.buttons {
  display: flex;
  justify-content: center;
  margin: 25px 0 0 0;
}
@media screen and (max-width: 1599px) {
  div.partner-header-autopay-settings div.content div.buttons {
    margin: 23px 0 0 0;
  }
}
@media screen and (max-width: 1199px) {
  div.partner-header-autopay-settings div.content div.buttons {
    margin: 21px 0 0 0;
  }
}

div.partner-header-autopay-settings div.content button.apply {
  display: block;
  margin: 0 auto 0 auto;
  height: 44px;
  font-size: 16px;
  width: 168px;
}
@media screen and (max-width: 1599px) {
  div.partner-header-autopay-settings div.content button.apply {
    margin: 0 auto 0 auto;
    height: 42px;
    font-size: 15px;
    width: 148px;
  }
}
@media screen and (max-width: 1199px) {
  div.partner-header-autopay-settings div.content button.apply {
    margin: 0 auto 0 auto;
    height: 36px;
    font-size: 13px;
    width: 135px;
  }
}
@media screen and (max-width: 767px) {
  div.partner-header-autopay-settings div.content button.apply {
    margin: 0 auto 0 auto;
    height: 36px;
    font-size: 13px;
    width: 125px;
  }
}

div.partner-header-autopay-settings div.content button.cancel {
  display: block;
  margin: 0 auto 0 auto;
  height: 44px;
  font-size: 16px;
  width: 168px;
}
@media screen and (max-width: 1599px) {
  div.partner-header-autopay-settings div.content button.cancel {
    margin: 0 auto 0 auto;
    height: 42px;
    font-size: 15px;
    width: 148px;
  }
}
@media screen and (max-width: 1199px) {
  div.partner-header-autopay-settings div.content button.cancel {
    margin: 0 auto 0 auto;
    height: 36px;
    font-size: 13px;
    width: 135px;
  }
}
@media screen and (max-width: 767px) {
  div.partner-header-autopay-settings div.content button.cancel {
    margin: 0 auto 0 auto;
    height: 36px;
    font-size: 13px;
    width: 125px;
  }
}

/* ------ End: Sticky header: Partner ------ */

/* ------ Notification bar ------ */

div.notification-bar-alerts {
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 9;
  width: 400px;
}
@media screen and (max-width: 1599px) {
  div.notification-bar-alerts {
    width: 380px;
  }
}
@media screen and (max-width: 1199px) {
  div.notification-bar-alerts {
    width: 350px;
  }
}
@media screen and (max-width: 767px) {
  div.notification-bar-alerts {
    max-width: 350px;
    width: 100%;
  }
}

div.notification-bar-alerts div.alert {
  display: none;
  background: rgb(0 97 211 / 90%);
  color: #FFF;

  box-shadow: rgb(0 0 0 / 20%) 0 0 15px;
  transition: margin 0.3s, transform 0.3s, filter 0.3s, opacity 0.3s;
  border-radius: 8px;
  padding: 20px 15px 20px 15px;
  margin: 0 0 10px 0;
  font-size: 12px;
}
div.notification-bar-alerts div.alert.show {
  display: block;
}
@media screen and (max-width: 1599px) {
  div.notification-bar-alerts div.alert {
    padding: 17px 13px 17px 13px;
    margin: 0 0 8px 0;
    font-size: 11px;
  }
}
@media screen and (max-width: 1199px) {
  div.notification-bar-alerts div.alert {
    padding: 15px 12px 15px 12px;
    margin: 0 0 7px 0;
    font-size: 10px;
  }
}
@media screen and (max-width: 767px) {
  div.notification-bar-alerts div.alert {
    padding: 15px 12px 15px 12px;
    margin: 0 0 7px 0;
    font-size: 10px;
  }
}

div.notification-bar-alerts div.alert div.alert-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

div.notification-bar-alerts div.alert a.url {
  display: inline;
  text-decoration: none;
  color: inherit;
}

div.notification-bar-alerts div.alert div.alert-header div.title {
  display: inline-block;
  /* font-family: "Raleway"; */
  font-weight: bold;
  color: #FFF;

  padding: 0 0 7px 0;
  font-size: 13px;
  line-height: 1.4;
}
div.notification-bar-alerts div.alert:not(.has-url) div.alert-header div.title {
  cursor: default;
}
@media screen and (max-width: 1599px) {
  div.notification-bar-alerts div.alert div.alert-header div.title {
    padding: 0 0 6px 0;
    font-size: 12px;
    line-height: 1.45;
  }
}
@media screen and (max-width: 1199px) {
  div.notification-bar-alerts div.alert div.alert-header div.title {

  }
}
@media screen and (max-width: 767px) {
  div.notification-bar-alerts div.alert div.alert-header div.title {

  }
}

div.notification-bar-alerts div.alert div.alert-header div.title span.url {
  display: none;

  background: url("/static/strelkaclientssite/res/webtemplate/ui/link_white.svg") no-repeat 0 0;
  background-repeat: no-repeat;
  background-size: auto 12px;
  object-fit: contain;
  width: 12px;
  height: 12px;

  margin: 0 5px 0 0;
}
div.notification-bar-alerts div.alert.has-url div.alert-header div.title span.url {
  display: inline-block;
}
@media screen and (max-width: 1599px) {
  div.notification-bar-alerts div.alert div.alert-header div.title span.url {
    background-size: auto 11px;
    width: 11px;
    height: 11px;

    margin: 0 5px 0 0;
  }
}


div.notification-bar-alerts div.alert div.alert-header div.actions {
  /* display: flex;
  justify-content: flex-end;
  margin: -10px 0 0 10px; */

  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: -10px 0 0 10px;
}
@media screen and (max-width: 1599px) {
  div.notification-bar-alerts div.alert div.alert-header div.actions {
    /* margin: -9px 0 0 9px; */
    margin: -8px 0 0 9px;
  }
}
@media screen and (max-width: 1199px) {
  div.notification-bar-alerts div.alert div.alert-header div.actions {

  }
}
@media screen and (max-width: 767px) {
  div.notification-bar-alerts div.alert div.alert-header div.actions {

  }
}

div.notification-bar-alerts div.alert div.alert-header div.actions span.action {
  display: inline-block;
  overflow: hidden;
  color: #FFF;
  cursor: pointer;
  margin: 0 0 0 10px;
}
@media screen and (max-width: 1599px) {
  div.notification-bar-alerts div.alert div.alert-header div.actions span.action {
    margin: 0 0 0 9px;
  }
}
@media screen and (max-width: 1199px) {
  div.notification-bar-alerts div.alert div.alert-header div.actions span.action {
    /* Give more space for fingers */
    margin: 0 0 0 15px;
  }
}
@media screen and (max-width: 767px) {
  div.notification-bar-alerts div.alert div.alert-header div.actions span.action {

  }
}


div.notification-bar-alerts div.alert span.read {
  /* height: 17px;
  line-height: 17px;
  font-size: 13px; */

  background: url("/static/strelkaclientssite/res/webtemplate/ui/completed_white.svg") no-repeat 0 0;
  background-repeat: no-repeat;
  background-size: auto 9px;
  object-fit: contain;
  width: 12px;
  height: 9px;
}
@media screen and (max-width: 1599px) {
  div.notification-bar-alerts div.alert span.read {
    background-size: auto 8px;
    width: 11px;
  height: 8px;
  }
}
@media screen and (max-width: 1199px) {
  div.notification-bar-alerts div.alert span.read {

  }
}
@media screen and (max-width: 767px) {
  div.notification-bar-alerts div.alert span.read {

  }
}

div.notification-bar-alerts div.alert span.close {
  height: 17px;
  line-height: 17px;
  font-size: 20px;
}
@media screen and (max-width: 1599px) {
  div.notification-bar-alerts div.alert span.close {
    height: 16px;
    line-height: 16px;
    font-size: 18px;
    margin-right: 9px;
  }
}
@media screen and (max-width: 1199px) {
  div.notification-bar-alerts div.alert span.close {

  }
}
@media screen and (max-width: 767px) {
  div.notification-bar-alerts div.alert span.close {

  }
}

div.notification-bar-alerts div.content {
  cursor: default;

  color: #FFF;
  padding: 0 0 0 0;
  margin: 0 0 0 0;

  white-space: pre-line; /* Allow using new-line \n symbols */

  font-size: 12px;
  line-height: 1.5;
}
@media screen and (max-width: 1599px) {
  div.notification-bar-alerts div.content {
    font-size: 11px;
    line-height: 1.5;
  }
}
@media screen and (max-width: 1199px) {
  div.notification-bar-alerts div.content {

  }
}
@media screen and (max-width: 767px) {
  div.notification-bar-alerts div.content {

  }
}

div.notifications-wrap {
  position: relative;
  margin: 0 40px 0 0;
}
@media screen and (max-width: 1599px) {
  div.notifications-wrap {
    margin: 0 32px 0 0;
  }
}
@media screen and (max-width: 1199px) {
  div.notifications-wrap {
    margin: 0 30px 0 0;
  }
}
@media screen and (max-width: 767px) {
  div.notifications-wrap {
    margin: 0 30px 0 0;
  }
}
@media screen and (max-width: 450px) {
  div.notifications-wrap {
    margin: 0 20px 0 0;
  }
}
@media screen and (max-width: 400px) {
  div.notifications-wrap {
    margin: 0 20px 0 0;
  }
}

div.notifications-wrap span.notifications-menu-icon {
  display: inline-block;
  vertical-align: top;
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  background-image: url("/static/strelkaclientssite/res/webtemplate/ui/notification.png");
  cursor: pointer;

  width: 25px;
  height: 25px;
}
@media screen and (max-width: 1599px) {
  div.notifications-wrap span.notifications-menu-icon {
    width: 22px;
    height: 22px;
  }
}
@media screen and (max-width: 1199px) {
  div.notifications-wrap span.notifications-menu-icon {
    width: 20px;
    height: 20px;
  }
}
@media screen and (max-width: 767px) {
  div.notifications-wrap span.notifications-menu-icon {
    position: relative;
    width: 19px;
    height: 19px;
  }
}

div.notifications-wrap span.notifications-menu-icon span.unread-messages {
  display: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #ff6062 0 0;
  border-radius: 20px;
  left: 14px;
  top: -6px;
  box-sizing: border-box;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  min-width: 16px;
  padding: 3px;
  position: absolute;
  text-align: center;
}
div.notifications-wrap span.notifications-menu-icon.display-unread-messages-count span.unread-messages {
  display: block;
}
@media screen and (max-width: 1599px) {
  div.notifications-wrap span.notifications-menu-icon span.unread-messages {
    left: 13px;
    top: -6px;
    font-size: 10px;
    min-width: 16px;
    padding: 3px;
  }
}
@media screen and (max-width: 1199px) {
  div.notifications-wrap span.notifications-menu-icon span.unread-messages {
    left: 11px;
    top: -6px;
    font-size: 9px;
    min-width: 17px;
    padding: 3px;
  }
}
@media screen and (max-width: 767px) {
  div.notifications-wrap span.notifications-menu-icon span.unread-messages {
    left: 9px;
    top: -4px;
    font-size: 9px;
    min-width: 14px;
    padding: 3px;
  }
}

div.notifications-wrap div.notification-bar {
  position: absolute;
  display: none;
  z-index: 6;

  background-color: #FFFFFF;
  border-radius: 5px;
  box-shadow: 0px 0px 8px rgba(174, 174, 174, 0.349019607843137);

  top: 0px;
  right: 0px;

  margin-top: 40px;
  padding: 17px 0 3px 0;

  width: 450px;
}
div.notifications-wrap div.notification-bar.show {
  display: block !important;
}
@media screen and (max-width: 767px) {
  div.notifications-wrap div.notification-bar {
    top: 0px;
    left: -80px;
    width: 280px;
  }
}

/* scroll width */
div.notifications-wrap *::-webkit-scrollbar {
  width: 6px;
}
/* scroll Track */
div.notifications-wrap *::-webkit-scrollbar-track {
  background: rgba(0, 255, 255, 0);
}
/* scroll Handle */
div.notifications-wrap *::-webkit-scrollbar-thumb {
  background: #e1e1e1;
}
/* scroll Handle on hover */
div.notifications-wrap *::-webkit-scrollbar-thumb:hover {
  background: #cfcfcf;
}


div.notifications-wrap div.notification-bar div.header {
  margin: 0 0 0 0;
  padding: 0 15px 15px 15px;
  border: 1px none RGB(240, 240, 240);
  border-bottom-style: solid;
}

div.notifications-wrap div.notification-bar div.header div.title {
  display: block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  font-size: 16px;
  line-height: 16px;
  font-weight: bold;
}

div.notifications-wrap div.notification-bar div.header div.show-only-unread {
  display: block;
  margin: 13px 0 0 0;
}
div.notifications-wrap div.notification-bar div.header div.show-only-unread label {
  font-size: 13px;
  padding: 0 4px 0 22px;
}
div.notifications-wrap div.notification-bar div.header div.show-only-unread .checkmark {
  margin-top: 5px;
  width: 15px;
  height: 15px;
}
@media screen and (max-width: 1599px) {
  div.notifications-wrap div.notification-bar div.header div.show-only-unread .checkmark {
    margin-top: 3px;
  }
}
@media screen and (max-width: 1199px) {
  div.notifications-wrap div.notification-bar div.header div.show-only-unread .checkmark {
    margin-top: 2px;
  }
}
@media screen and (max-width: 767px) {
  div.notifications-wrap div.notification-bar div.header div.show-only-unread .checkmark {

  }
}

/* Style the checkmark/indicator */
div.notifications-wrap div.notification-bar div.header div.show-only-unread .checkmark:after {
  left: 5px;
  top: 1px;
  width: 3px;
  height: 8px;
}

div.notifications-wrap div.notification-bar div.content {
  margin: 0 0 0 0;
  overflow-y: auto;
  max-height: 450px;
}

div.notifications-wrap div.notification-bar div.content div.waiting-content-wrap {
  display: none;
  margin: 10px 0 0 0;
}
div.notifications-wrap div.notification-bar.loading div.content div.waiting-content-wrap {
  display: block !important;
}

div.notifications-wrap div.notification-bar div.content div.waiting-content-wrap div.waiting-content-icon {
  margin: 50px auto 50px auto;
  width: 35px;
  height: 35px;
}

div.notifications-wrap div.notification-bar div.content ul.items {
  display: block;
  list-style-type: none;
  list-style-position: outside;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
div.notifications-wrap div.notification-bar.no-items div.content ul.items,
div.notifications-wrap div.notification-bar.loading div.content ul.items {
  display: none !important;
}

div.notifications-wrap div.notification-bar div.content ul.items li {
  margin: 0 0 0 0;
  padding: 0;
}

div.notifications-wrap div.notification-bar div.content ul.items li div.notification {
  display: block;
  color: #0D0D0D;

  padding: 15px 15px 15px 15px;
  margin: 0 0 0 0;
  font-size: 12px;
}
div.notifications-wrap div.notification-bar div.content ul.items li div.notification.unread {
  background-color: #fcfaf1;
}
div.notifications-wrap div.notification-bar div.content ul.items li:not(:last-child) div.notification {
  border: 1px none RGB(240, 240, 240);
  border-bottom-style: solid;
}

div.notifications-wrap div.notification-bar div.content ul.items li div.notification div.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

div.notifications-wrap div.notification-bar div.content ul.items li div.notification div.notification-header div.title {
  display: inline-block;
  /* font-family: "Raleway"; */
  font-weight: bold;

  font-size: 13px;
  line-height: 1.4;

  /* Как для хэдера, чтобы ссылка оборачивала с паддингом */
  padding: 0 0 7px 0;
}
div.notifications-wrap div.notification-bar div.content ul.items li div.notification:not(.has-url) div.notification-header div.title {
  cursor: default;
}
div.notifications-wrap div.notification-bar div.content ul.items li div.notification.unread div.notification-header div.title {

}

div.notifications-wrap div.notification-bar div.content ul.items li div.notification div.notification-header div.title span.url {
  display: none;

  background: url("/static/strelkaclientssite/res/webtemplate/ui/link.svg") no-repeat 0 0;
  background-repeat: no-repeat;
  background-size: auto 12px;
  object-fit: contain;
  width: 12px;
  height: 12px;

  margin: 0 5px 0 0;
}
div.notifications-wrap div.notification-bar div.content ul.items li div.notification.has-url div.notification-header div.title span.url {
  display: inline-block;
}

div.notifications-wrap div.notification-bar div.content ul.items li div.notification div.notification-header div.actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 2px 0 0 15px;
}

div.notifications-wrap div.notification-bar div.content ul.items li div.notification div.notification-header div.actions span.action {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  display: inline-block;
  overflow: hidden;
  cursor: pointer;
}
div.notifications-wrap div.notification-bar div.content ul.items li div.notification div.notification-header div.actions span.action:not(:first-child) {
  margin: 0 0 0 13px;
}

div.notifications-wrap div.notification-bar div.content ul.items li div.notification a.url {
  display: inline;
  text-decoration: none;
  color: inherit;
}

/* div.notifications-wrap div.notification-bar div.content ul.items li div.notification div.notification-header div.actions span.read {
  height: 17px;
  line-height: 17px;
  font-size: 12px;
} */
/* div.notifications-wrap div.notification-bar div.content ul.items li div.notification div.notification-header div.actions span.read {
  background: url("/static/strelkaclientssite/res/webtemplate/ui/completed.svg") no-repeat 0 0;
  background-repeat: no-repeat;
  background-size: auto 9px;
  width: 12px;
  height: 9px;
} */
div.notifications-wrap div.notification-bar div.content ul.items li div.notification div.notification-header div.actions span.read {
  background: url("/static/strelkaclientssite/res/webtemplate/ui/completed.svg") no-repeat 0 0;
  background-repeat: no-repeat;
  background-size: auto 9px;
  object-fit: contain;
  width: 12px;
  height: 9px;
}

/* div.notifications-wrap div.notification-bar div.content ul.items li div.notification div.notification-header div.actions span.delete {
  height: 17px;
  line-height: 17px;
  font-size: 19px;
} */
div.notifications-wrap div.notification-bar div.content ul.items li div.notification div.notification-header div.actions span.delete {
  /* display: inline-block;
  vertical-align: top; */
  background: url("/static/strelkaclientssite/res/webtemplate/ui/delete.svg") no-repeat 0 0;
  background-repeat: no-repeat;
  background-size: auto 12px;

  width: 12px;
  height: 12px;
}

div.notifications-wrap div.notification-bar div.content ul.items li div.notification div.notification-content {
  cursor: default;

  padding: 0 0 0 0;
  margin: 0 0 7px 0;

  white-space: pre-line; /* Allow using new-line \n symbols */

  font-size: 12px;
  line-height: 1.5;
}
div.notifications-wrap div.notification-bar div.content ul.items li div.notification.unread div.notification-content {

}

div.notifications-wrap div.notification-bar div.content ul.items li div.notification div.notification-date-time {
  padding: 0 0 0 0;
  margin: 0 0 0 0;

  font-size: 12px;
  line-height: 1.5;

  cursor: default;
}
div.notifications-wrap div.notification-bar div.content ul.items li div.notification.unread div.notification-date-time {

}

div.notifications-wrap div.notification-bar div.content div.no-items-wrap {
  display: none;
  padding: 15px 0 25px 0;
}
div.notifications-wrap div.notification-bar.no-items div.content div.no-items-wrap {
  display: block !important;
}
div.notifications-wrap div.notification-bar div.content div.no-items-wrap p.no-items-label {
  display: block;
  margin: 0;
  color: #0D0D0D;
  font-size: 16px;
  padding: 0 15px 0 15px;
  text-align: center
}

div.notifications-wrap div.notification-bar div.content div.loading-more-items-wrap {
  display: none;
}
div.notifications-wrap div.notification-bar.loading-more-items div.content div.loading-more-items-wrap {
  display: block !important;
}

div.notifications-wrap div.notification-bar div.content div.loading-more-items-wrap p.loading-more-items-icon {
  display: block;
  margin: 10px auto 10px auto;
  width: 20px;
  height: 20px;
}

div.notifications-wrap div.notification-bar div.content div.no-more-items-wrap {
  display: none;
  border: 1px none RGB(240, 240, 240);
  border-top-style: solid;
  padding: 15px 0 15px 0;

}
div.notifications-wrap div.notification-bar.no-more-items div.content div.no-more-items-wrap {
  display: block !important;
}

div.notifications-wrap div.notification-bar div.content div.no-more-items-wrap p.no-more-items-label {
  display: block;
  margin: 0;
  color: #0D0D0D;
  font-size: 14px;
  padding: 0 15px 0 15px;
  text-align: center
}

/* ------ End: Notification bar ------ */


/* ------ Sidebar ------ */

/* Splits page for sidebar and content */
div.sidebar-page-splitter {
  display: block;
  margin: 0;

  /* Padding for sidebar */
  padding: 0 0 0 68px;
}
@media screen and (max-width: 1599px) {
  div.sidebar-page-splitter {
    padding: 0 0 0 65px;
  }
}
@media screen and (max-width: 1199px) {
  div.sidebar-page-splitter {
    padding: 0 0 0 63px;
  }
}
@media screen and (max-width: 767px) {
  div.sidebar-page-splitter {
    padding: 0 0 0 60px;
  }
}

div.sidebar-page-splitter > div.content {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

/* Container for pages with sidebar. For pages where width is not critical. They have slightly less width due to sidebar */
div.sidebar-page-container {
  width: 1480px;
  margin: 0 auto;
}
@media screen and (max-width: 1599px) {
  div.sidebar-page-container {
    width: 1085px;
  }
}
@media screen and (max-width: 1199px) {
  div.sidebar-page-container {
    width: 680px;
  }
}
@media screen and (max-width: 767px) {
  div.sidebar-page-container {
    width: calc(100% - 30px);
    margin: 0 15px 0 15px;
  }
}

/* Container for pages with sidebar. For pages where width IS critical. They occupy all width. But mobile view is still adaptable to screen width */
div.sidebar-page-container-wide {
  width: calc(100% - 60px);
  margin: 0 30px 0 30px;
}
@media screen and (max-width: 1599px) {
  div.sidebar-page-container-wide {
    width: calc(100% - 50px);
    margin: 0 25px 0 25px;
  }
}
@media screen and (max-width: 1199px) {
  div.sidebar-page-container-wide {
    width: calc(100% - 40px);
    margin: 0 20px 0 20px;
  }
}
@media screen and (max-width: 767px) {
  div.sidebar-page-container-wide {
    width: calc(100% - 30px);
    margin: 0 15px 0 15px;
  }
}

/* scroll width */
div.sidebar::-webkit-scrollbar {
  width: 3px;
}
/* scroll Track */
div.sidebar::-webkit-scrollbar-track {
  background: rgba(0, 255, 255, 0);
}
/* scroll Handle */
div.sidebar::-webkit-scrollbar-thumb {
  background: #2f61ad;
}
/* scroll Handle on hover */
div.sidebar::-webkit-scrollbar-thumb:hover {
  background: #2468f0;
}

div.sidebar {
  display: block;
  position: fixed;
  width: 68px;
  left: 0;
  margin: 0;
  padding: 0;

  /* To display scroll on the left, bcs on the right it will hide submenu oin hover */
  direction: rtl;

  overflow-y: auto;
  overflow-x: hidden;

  background-color: #FFFFFF;
  border-color: rgb(234, 238, 242);
  border-width: 1px;
  border-style: none;
  border-right-style: solid;

  /* To be under header */
  z-index: 6;

  /* Dont't overlap header */
  height: calc(100% - 50px);
  top: 50px;
}
@media screen and (max-width: 1599px) {
  div.sidebar {
    width: 65px;

    /* Dont't overlap header */
    height: calc(100% - 44px);
    top: 44px;
  }
}
@media screen and (max-width: 1199px) {
  div.sidebar {
    width: 63px;

    /* Dont't overlap header */
    height: calc(100% - 44px);
    top: 44px;
  }
}
@media screen and (max-width: 767px) {
  div.sidebar {
    width: 60px;

    /* Dont't overlap header */
    height: calc(100% - 37px);
    top: 37px;
  }
}


div.sidebar ul.sidebar {
  /* Rollback rtl rule of container to standard mode */
  direction: ltr;

  display: block;
  list-style-type: none;
  list-style-position: outside;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

div.sidebar ul.sidebar li.sidebar {
  position: relative;
  margin: 0 0 0 0;
  padding: 0;
}
div.sidebar ul.sidebar li.sidebar:hover,
div.sidebar ul.sidebar li.sidebar.current {
  background-color: #F7F7F7;
}

div.sidebar li.sidebar a.lev0_url {
  text-decoration: none;
  color: #0D0D0D;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div.sidebar li.sidebar div.lev0_itembox {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 6px 5px;
  width: calc(100% - 10px);
  height: 65px;
}
@media screen and (max-width: 1599px) {
  div.sidebar li.sidebar div.lev0_itembox {
    padding: 5px 4px;
    width: calc(100% - 8px);
    height: 60px;
  }
}
@media screen and (max-width: 1199px) {
  div.sidebar li.sidebar div.lev0_itembox {
    padding: 4px 4px;
    width: calc(100% - 8px);
    height: 58px;
  }
}
@media screen and (max-width: 767px) {
  div.sidebar li.sidebar div.lev0_itembox {
    padding: 4px 4px;
    width: calc(100% - 8px);
    height: 55px;
  }
}

/* General menu item */
div.sidebar li.sidebar div.lev0_itembox .pic {
  display: block;
  object-position: center center;
  object-fit: contain;
  margin: 0 auto 0 auto;
  width: 30px;
  height: 30px;
}
@media screen and (max-width: 1599px) {
  div.sidebar li.sidebar div.lev0_itembox .pic {
    width: 28px;
    height: 28px;
  }
}
@media screen and (max-width: 1199px) {
  div.sidebar li.sidebar div.lev0_itembox .pic {
    width: 26px;
    height: 26px;
  }
}
@media screen and (max-width: 767px) {
  div.sidebar li.sidebar div.lev0_itembox .pic {
    width: 25px;
    height: 25px;
  }
}

/* Tasks menu item */
div.sidebar li.sidebar div.lev0_itembox.tasks .pic {
  display: inline-block;
  vertical-align: top;
  background-size: 30px 60px;
  background-repeat: no-repeat;
  position: relative;
  background-image: url("/static/strelkaclientssite/res/webtemplate/navigation_menu/tasks.svg");
  cursor: pointer;
  background-position: 0 0;
}
div.sidebar li.sidebar div.lev0_itembox.tasks .pic.deadline {
  background-position: 0 -30px;
}
@media screen and (max-width: 1599px) {
  div.sidebar li.sidebar div.lev0_itembox.tasks .pic {
    background-size: 28px 56px;
  }
  div.sidebar li.sidebar div.lev0_itembox.tasks .pic.deadline {
    background-position: 0 -28px;
  }
}
@media screen and (max-width: 1199px) {
  div.sidebar li.sidebar div.lev0_itembox.tasks .pic {
    background-size: 26px 52px;
  }
  div.sidebar li.sidebar div.lev0_itembox.tasks .pic.deadline {
    background-position: 0 -26px;
  }
}
@media screen and (max-width: 767px) {
  div.sidebar li.sidebar div.lev0_itembox.tasks .pic {
    position: relative;
    background-size: 25px 50px;
  }
  div.sidebar li.sidebar div.lev0_itembox.tasks .pic.deadline {
    background-position: 0 -25px;
  }
}

div.sidebar li.sidebar div.lev0_itembox.tasks .pic span.tasks-count {
  display: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #ff6062 0 0;
  border-radius: 20px;
  left: 16px;
  top: -6px;
  box-sizing: border-box;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  min-width: 16px;
  padding: 3px;
  position: absolute;
  text-align: center;
}
div.sidebar li.sidebar div.lev0_itembox.tasks .pic.display-tasks-count span.tasks-count {
  display: block;
}
@media screen and (max-width: 1599px) {
  div.sidebar li.sidebar div.lev0_itembox.tasks .pic span.tasks-count {
    left: 14px;
    top: -6px;
    font-size: 10px;
    min-width: 16px;
    padding: 3px;
  }
}
@media screen and (max-width: 1199px) {
  div.sidebar li.sidebar div.lev0_itembox.tasks .pic span.tasks-count {
    left: 12px;
    top: -6px;
    font-size: 9px;
    min-width: 17px;
    padding: 3px;
  }
}
@media screen and (max-width: 767px) {
  div.sidebar li.sidebar div.lev0_itembox.tasks .pic span.tasks-count {
    left: 10px;
    top: -4px;
    font-size: 9px;
    min-width: 14px;
    padding: 3px;
  }
}


div.sidebar li.sidebar div.lev0_itembox span.caption {
  font-family: 'Noto Sans', 'Roboto', Arial;
  display: flex;
  align-items: center;
  text-align: center;
  color: rgb(99, 99, 99);

  margin: 0 auto 0 auto;
  font-size: 10px;
  line-height: 12px;
}
div.sidebar li.sidebar:hover div.lev0_itembox span.caption,
div.sidebar li.sidebar.current div.lev0_itembox span.caption {
  color: rgb(49, 137, 205);
}
@media screen and (max-width: 1599px) {
  div.sidebar li.sidebar div.lev0_itembox span.caption {
    font-size: 10px;
    line-height: 11px;
  }
}
@media screen and (max-width: 1199px) {
  div.sidebar li.sidebar div.lev0_itembox span.caption {
    font-size: 9px;
    line-height: 10px;
  }
}
@media screen and (max-width: 767px) {
  div.sidebar li.sidebar div.lev0_itembox span.caption {
    font-size: 9px;
    line-height: 10px;
  }
}

div.sidebar li.sidebar div.submenu-bg {
  position: fixed;
  display: none;
  z-index: 6;

  top: 0px;
  left: 68px; /* Sidebar width */
  margin-left: 0px;
  padding-left: 0px; /* For border */
}
div.sidebar li.sidebar.show-submenu div.submenu-bg {
  display: block !important;
}
@media screen and (max-width: 1599px) {
  div.sidebar li.sidebar div.submenu-bg {
    left: 65px;
  }
}
@media screen and (max-width: 1199px) {
  div.sidebar li.sidebar div.submenu-bg {
    left: 63px;
  }
}
@media screen and (max-width: 767px) {
  div.sidebar li.sidebar div.submenu-bg {
    left: 60px;
  }
}

div.sidebar li.sidebar div.submenu-bg div.submenu {
  display: block;

  background-color: #FFFFFF;
  border-radius: 5px;
  box-shadow: 0px 0px 2px rgba(174, 174, 174, 0.349019607843137);
  background-color: #FFFFFF;
  border-color: rgb(234, 238, 242);
  border-width: 0px;
  /* border-style: solid; */
  margin: 0 0 0 0;

  padding: 7px 7px 7px 7px;
  width: 180px;
}
@media screen and (max-width: 1599px) {
  div.sidebar li.sidebar div.submenu-bg div.submenu {
    padding: 6px 6px 6px 6px;
    width: 170px;
  }
}
@media screen and (max-width: 1199px) {
  div.sidebar li.sidebar div.submenu-bg div.submenu {
    padding: 5px 5px 5px 5px;
    width: 165px;
  }
}
@media screen and (max-width: 767px) {
  div.sidebar li.sidebar div.submenu-bg div.submenu {
    padding: 5px 5px 5px 5px;
    width: 160px;
  }
}

div.sidebar ul.submenu {
  display: block;
  list-style-type: none;
  list-style-position: outside;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

div.sidebar ul.submenu li.submenu {
  display: block;
  padding: 0
}

div.sidebar ul.submenu li.submenu a.lev1_url {
  display: block;
  padding: 0;
  display: block;
  text-decoration: none;
  cursor: pointer;
  color: #0D0D0D;

  padding: 8px 11px 8px 11px;
  font-size: 14px;
  line-height: 19px;
}
div.sidebar ul.submenu li.submenu a.lev1_url:hover,
div.sidebar ul.submenu li.submenu a.lev1_url.current {
  background-color: #F7F7F7;
  color: rgb(49, 137, 205);
}
@media screen and (max-width: 1599px) {
  div.sidebar ul.submenu li.submenu a.lev1_url {
    padding: 8px 10px 8px 10px;
    font-size: 13px;
    line-height: 18px;
  }
}
@media screen and (max-width: 1199px) {
  div.sidebar ul.submenu li.submenu a.lev1_url {
    padding: 7px 9px 7px 9px;
    font-size: 12px;
    line-height: 16px;
  }
}
@media screen and (max-width: 767px) {
  div.sidebar ul.submenu li.submenu a.lev1_url {
    padding: 7px 9px 7px 9px;
    font-size: 12px;
    line-height: 17px;
  }
}

/* ------ End: Sidebar ------ */


/* ------ Widget question tip ------ */

span.widget-question-tip {
  display: inline-block;
  vertical-align: top;
  cursor: help;
  background: url("/static/strelkaclientssite/res/webtemplate/ui/question-tip.svg") no-repeat 0 0;
  background-repeat: no-repeat;
  background-size: auto 15px;
  width: 15px;
  height: 15px;
  margin: 0 0px 0 0px;
  background-position: 0 0px;
}
@media screen and (max-width: 1599px) {
  span.widget-question-tip {
    background-size: auto 14px;
    width: 14px;
    height: 14px;
  }
}
@media screen and (max-width: 1199px) {
  span.widget-question-tip {
    background-size: auto 13px;
    width: 15px;
    height: 15px;
  }
}
@media screen and (max-width: 767px) {
  span.widget-question-tip {
    span.widget-question-tip {
      background-size: auto 13px;
      width: 15px;
      height: 15px;
    }
  }
}

/* Исп прозрачность для стилей скролла, чтобы она не перечеркивала закругленные границы */
/* scroll width */
.widget-question-tip-hover-box::-webkit-scrollbar {
  width: 6px;
}
/* scroll Track */
.widget-question-tip-hover-box::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
}
/* scroll Handle */
.widget-question-tip-hover-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}
/* scroll Handle on hover */
.widget-question-tip-hover-box::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.18);
}

.widget-question-tip-hover-box {
  box-shadow:0px 0px 5px rgba(170, 170, 170, 0.349019607843137);
  position: absolute;
  box-sizing: border-box;
  background: #fff;
  text-align: left;
  color: #0D0D0D;
  display: none;
  cursor: auto;
  overflow: auto;

  /* Allow new lines */
  white-space: pre-line;

  /* To be above fixed header */
  z-index: 100;

  font-size: 12px;
  font-weight: normal;
  line-height: 1.50;
  padding: 13px 13px 13px 13px;
  top: 0;
  left: 0;
  max-width: 600px;
  max-height: 500px;
}
.widget-question-tip-hover-box.show {
  display: block;
}
@media screen and (max-width: 1599px) {
  .widget-question-tip-hover-box {
    font-size: 11px;
    line-height: 1.50;
    padding: 12px 12px 12px 12px;
    max-width: 520px;
    max-height: 500px;
  }
}
@media screen and (max-width: 1199px) {
  .widget-question-tip-hover-box {
    font-size: 10px;
    line-height: 1.50;
    padding: 11px 11px 11px 11px;
    max-width: 500px;
    max-height: 350px;
  }
}
@media screen and (max-width: 550px) {
  .widget-question-tip-hover-box {
    font-size: 10px;
    line-height: 1.50;
    padding: 11px 11px 11px 11px;
    max-width: calc(100% - 50px);
    max-height: 350px;
  }
}



/* ------ End: Widget question tip ------ */