/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!../node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!../node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!../node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/TopLoader.vue?vue&type=style&index=0&id=2b9cc470&lang=scss&scoped=true ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Фирменная тень
 */
/**
 * Тень, одинаковая со всех сторон (фирменная тень больше снизу)
 */
/**
 * Легкая тень
 */
/**
 * Радиус кнопок
 */
/**
 * Радиус инпутов
 */
/**
 * Стили плейсхолдеров
 */
/**
* Отключить выделение текста
*/
/**
 * Для маленького десктопа
 */
/**
 * Для маленького лептопа
 */
/**
 * Для маленького планшета
 */
/**
 * Для мобильника
 */
/**
 * Замена hsla, потому что в scss оно не работает с css variables
 * Пример использования: aplha($primary-color, 0.5);
 * https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables
 */
/**
 * Для функции alpha-hsl
 */
/**
 * Важно для работы функции alpha-hsl
 * Нужно объявлять css variables через этот миксин, чтоб aplha работал
 * Пример использования: @include defineColorHSL(--primary-color, 220, 89%, 56%);
 *
 * $forTest - "пустой" параметр, чтобы разработчик мог передать туда цвет в норм виде и 
 * IDE с помощью цветового плагина показала ему этот цвет, чтоб удобно изменять цвет и всё такое
 */
html[data-v-2b9cc470] {
  --approved-color: var(--green);
  --approved-color-dark: var(--green-dark);
  --rejected-color: var(--pink-dark);
  --rejected-color-dark: var(--pink-darkest);
  --pending-color: var(--primary-color-light);
}

/**
 * Фирменная тень
 */
/**
 * Отключить выделение текста
 */
/**
 * Карта статусов макетов, новая версия кода (06.12.2021)
 */
/**
 * Статусы макетов, новая версия кода (19.01.2022)
 * Это миксин, который подключен глобально (в App.vue). Отлично подходит для статусов-плашек.
 * - Как использовать: просто написать в html-коде название нужного класса, он подтянет все
 * стили.
 * - ooh-cs = oohdesk creative status (оно юзается глобально, поэтому
 * нужно уникальное название класса)
 * - у каждого класса можно написать .not-active и .has-actions
 */
/**
 * Статусы кампаний
 */
.top-loader[data-v-2b9cc470] {
  height: 4px;
  width: 100%;
  position: fixed;
  z-index: var(--z-index-top-loader);
  overflow: hidden;
}
.top-loader[data-v-2b9cc470]:before {
  display: block;
  position: absolute;
  content: "";
  width: 0%;
  height: 4px;
  background-color: var(--primary-color);
  -webkit-animation: loader-action-2b9cc470 14s linear infinite;
          animation: loader-action-2b9cc470 14s linear infinite;
}
@-webkit-keyframes loader-action-2b9cc470 {
from {
    width: 0%;
}
30% {
    width: 30%;
}
30% {
    width: 80%;
}
40% {
    width: 90%;
}
to {
    width: 100%;
}
}
@keyframes loader-action-2b9cc470 {
from {
    width: 0%;
}
30% {
    width: 30%;
}
30% {
    width: 80%;
}
40% {
    width: 90%;
}
to {
    width: 100%;
}
}
.bounce-enter-active[data-v-2b9cc470] {
  -webkit-animation: bounce-in-2b9cc470 0.3s;
          animation: bounce-in-2b9cc470 0.3s;
}
.bounce-leave-active[data-v-2b9cc470] {
  animation: bounce-in-2b9cc470 0.3s reverse;
}
@-webkit-keyframes bounce-in-2b9cc470 {
0% {
    -webkit-transform: scale(0);
            transform: scale(0);
}
50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
}
100% {
    -webkit-transform: scale(1);
            transform: scale(1);
}
}
@keyframes bounce-in-2b9cc470 {
0% {
    -webkit-transform: scale(0);
            transform: scale(0);
}
50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
}
100% {
    -webkit-transform: scale(1);
            transform: scale(1);
}
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!../node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!../node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!../node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!../common/src/components/Notifies.vue?vue&type=style&index=0&id=6ac6d85f&lang=scss&scoped=true ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Фирменная тень
 */
/**
 * Тень, одинаковая со всех сторон (фирменная тень больше снизу)
 */
/**
 * Легкая тень
 */
/**
 * Радиус кнопок
 */
/**
 * Радиус инпутов
 */
/**
 * Стили плейсхолдеров
 */
/**
* Отключить выделение текста
*/
/**
 * Для маленького десктопа
 */
/**
 * Для маленького лептопа
 */
/**
 * Для маленького планшета
 */
/**
 * Для мобильника
 */
/**
 * Замена hsla, потому что в scss оно не работает с css variables
 * Пример использования: aplha($primary-color, 0.5);
 * https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables
 */
/**
 * Для функции alpha-hsl
 */
/**
 * Важно для работы функции alpha-hsl
 * Нужно объявлять css variables через этот миксин, чтоб aplha работал
 * Пример использования: @include defineColorHSL(--primary-color, 220, 89%, 56%);
 *
 * $forTest - "пустой" параметр, чтобы разработчик мог передать туда цвет в норм виде и 
 * IDE с помощью цветового плагина показала ему этот цвет, чтоб удобно изменять цвет и всё такое
 */
html[data-v-6ac6d85f] {
  --approved-color: var(--green);
  --approved-color-dark: var(--green-dark);
  --rejected-color: var(--pink-dark);
  --rejected-color-dark: var(--pink-darkest);
  --pending-color: var(--primary-color-light);
}

/**
 * Фирменная тень
 */
/**
 * Отключить выделение текста
 */
/**
 * Карта статусов макетов, новая версия кода (06.12.2021)
 */
/**
 * Статусы макетов, новая версия кода (19.01.2022)
 * Это миксин, который подключен глобально (в App.vue). Отлично подходит для статусов-плашек.
 * - Как использовать: просто написать в html-коде название нужного класса, он подтянет все
 * стили.
 * - ooh-cs = oohdesk creative status (оно юзается глобально, поэтому
 * нужно уникальное название класса)
 * - у каждого класса можно написать .not-active и .has-actions
 */
/**
 * Статусы кампаний
 */
.notifies[data-v-6ac6d85f] {
  position: fixed;
  z-index: var(--z-index-notify);
  right: 40px;
  bottom: 40px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.notifies__notify[data-v-6ac6d85f] {
  margin-top: 20px;
}
.notifies .notify[data-v-6ac6d85f] {
  position: relative;
  top: -50px;
  width: 400px;
  background-color: rgba(38, 50, 63, 0.85);
  border-radius: 5px;
  color: var(--white-always);
  opacity: 0;
  -webkit-animation: show-6ac6d85f 0.3s linear forwards;
          animation: show-6ac6d85f 0.3s linear forwards;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
}
.notifies .notify[data-v-6ac6d85f] {
  -webkit-box-shadow: 0 4px 28px rgba(161, 174, 211, 0.05), 0 4px 10px rgba(161, 174, 211, 0.05);
          box-shadow: 0 4px 28px rgba(161, 174, 211, 0.05), 0 4px 10px rgba(161, 174, 211, 0.05);
}
.notifies .notify_hidden[data-v-6ac6d85f] {
  -webkit-animation: hide-6ac6d85f 0.3s linear forwards;
          animation: hide-6ac6d85f 0.3s linear forwards;
}
.notifies .notify[data-v-6ac6d85f]:hover {
  background-color: rgb(38, 50, 63);
}
.notifies .notify:hover .notify__triangle[data-v-6ac6d85f] {
  border-right-color: rgb(38, 50, 63);
}
.notifies .notify:hover .notify__link[data-v-6ac6d85f] {
  background-color: var(--primary-color-dark);
}
.notifies .notify__triangle[data-v-6ac6d85f] {
  position: absolute;
  top: 22px;
  left: -16px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 16px solid rgba(38, 50, 63, 0.85);
}
.notifies .notify__close[data-v-6ac6d85f] {
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  font-size: 16px;
  color: var(--white);
}
.notifies .notify__close[data-v-6ac6d85f]:hover {
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  color: var(--primary-color);
}
.notifies .notify__header[data-v-6ac6d85f] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 12px 15px 0;
}
.notifies .notify__icon[data-v-6ac6d85f] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 27px;
  min-width: 27px;
  height: 27px;
  min-height: 27px;
  border-radius: 50%;
  background-color: var(--white);
  color: rgb(38, 50, 63);
  font-size: 12px;
  font-weight: bold;
}
.notifies .notify__title[data-v-6ac6d85f] {
  margin-left: 10px;
  font-size: 14px;
  font-weight: bold;
}
.notifies .notify__text[data-v-6ac6d85f] {
  padding: 12px 15px;
  font-size: 13px;
}
.notifies .notify__info[data-v-6ac6d85f] {
  margin-top: 10px;
  font-weight: bold;
}
.notifies .notify__link[data-v-6ac6d85f] {
  display: block;
  padding: 5px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  background-color: var(--primary-color);
  color: var(--white);
  border-radius: 0 0 5px 5px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media (max-width: 512px) {
.notifies[data-v-6ac6d85f] {
    left: 20px;
    right: 20px;
}
.notifies .notify[data-v-6ac6d85f] {
    padding: 10px;
    width: 100%;
    margin-top: 10px;
}
.notifies .notify__title[data-v-6ac6d85f] {
    font-size: 16px;
    font-weight: bold;
}
.notifies .notify__header[data-v-6ac6d85f] {
    padding: 0;
    margin: 0px 30px 0 0;
}
.notifies .notify__text[data-v-6ac6d85f] {
    margin-top: 0;
    padding: 12px 0;
    font-size: 13px;
}
.notifies .notify__icon[data-v-6ac6d85f] {
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    font-size: 10px;
}
}
@-webkit-keyframes show-6ac6d85f {
0% {
    top: -50px;
    opacity: 0;
}
100% {
    top: 0;
    opacity: 1;
}
}
@keyframes show-6ac6d85f {
0% {
    top: -50px;
    opacity: 0;
}
100% {
    top: 0;
    opacity: 1;
}
}
@-webkit-keyframes hide-6ac6d85f {
0% {
    top: 0;
    opacity: 1;
}
100% {
    top: -50px;
    opacity: 0;
}
}
@keyframes hide-6ac6d85f {
0% {
    top: 0;
    opacity: 1;
}
100% {
    top: -50px;
    opacity: 0;
}
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!../node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!../node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!../node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/ImageFullScreen.vue?vue&type=style&index=0&id=098272d4&lang=scss&scoped=true ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Фирменная тень
 */
/**
 * Тень, одинаковая со всех сторон (фирменная тень больше снизу)
 */
/**
 * Легкая тень
 */
/**
 * Радиус кнопок
 */
/**
 * Радиус инпутов
 */
/**
 * Стили плейсхолдеров
 */
/**
* Отключить выделение текста
*/
/**
 * Для маленького десктопа
 */
/**
 * Для маленького лептопа
 */
/**
 * Для маленького планшета
 */
/**
 * Для мобильника
 */
/**
 * Замена hsla, потому что в scss оно не работает с css variables
 * Пример использования: aplha($primary-color, 0.5);
 * https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables
 */
/**
 * Для функции alpha-hsl
 */
/**
 * Важно для работы функции alpha-hsl
 * Нужно объявлять css variables через этот миксин, чтоб aplha работал
 * Пример использования: @include defineColorHSL(--primary-color, 220, 89%, 56%);
 *
 * $forTest - "пустой" параметр, чтобы разработчик мог передать туда цвет в норм виде и 
 * IDE с помощью цветового плагина показала ему этот цвет, чтоб удобно изменять цвет и всё такое
 */
html[data-v-098272d4] {
  --approved-color: var(--green);
  --approved-color-dark: var(--green-dark);
  --rejected-color: var(--pink-dark);
  --rejected-color-dark: var(--pink-darkest);
  --pending-color: var(--primary-color-light);
}

/**
 * Фирменная тень
 */
/**
 * Отключить выделение текста
 */
/**
 * Карта статусов макетов, новая версия кода (06.12.2021)
 */
/**
 * Статусы макетов, новая версия кода (19.01.2022)
 * Это миксин, который подключен глобально (в App.vue). Отлично подходит для статусов-плашек.
 * - Как использовать: просто написать в html-коде название нужного класса, он подтянет все
 * стили.
 * - ooh-cs = oohdesk creative status (оно юзается глобально, поэтому
 * нужно уникальное название класса)
 * - у каждого класса можно написать .not-active и .has-actions
 */
/**
 * Статусы кампаний
 */
#image-full-screen[data-v-098272d4] {
  width: 100%;
  height: 100%;
  display: none;
  z-index: var(--z-index-full-screen);
  position: fixed;
  top: 0;
  left: 0;
}
#image-full-screen.open[data-v-098272d4] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#image-full-screen[data-v-098272d4]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: hsla(var(--gray-dark-h), var(--gray-dark-s), var(--gray-dark-l), 0.6);
}
#image-full-screen #image-full-screen-img[data-v-098272d4] {
  z-index: 2;
  max-height: 90vh;
  max-width: 90vw;
  border-radius: 0.5rem;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!../node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!../node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!../common/src/assets/icomoon/style.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
  font-family: 'icomoon';
  src:  url(/fonts/icomoon.304e9346.eot);
  src:  url(/fonts/icomoon.304e9346.eot#iefix) format('embedded-opentype'),
    url(/fonts/icomoon.1efa43ae.ttf) format('truetype'),
    url(/fonts/icomoon.e19861ad.woff) format('woff'),
    url(/img/icomoon.854b0e53.svg#icomoon) format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-exit:before {
  content: "\e9c6";
}
.icon-copy:before {
  content: "\e9c7";
}
.icon-time-available:before {
  content: "\e991";
}
.icon-connection-off:before {
  content: "\e91b";
}
.icon-connection:before {
  content: "\e98e";
}
.icon-document:before {
  content: "\e934";
}
.icon-time-unavailable:before {
  content: "\e947";
}
.icon-camera-off:before {
  content: "\e9c4";
}
.icon-camera:before {
  content: "\e9c5";
}
.icon-eye-circle:before {
  content: "\e9c3";
}
.icon-video:before {
  content: "\e9c2";
}
.icon-monitoring:before {
  content: "\e9c0";
}
.icon-stat-bars:before {
  content: "\e9c1";
}
.icon-user2:before {
  content: "\e9bf";
}
.icon-list2:before {
  content: "\e9b5";
}
.icon-clock3:before {
  content: "\e9b7";
}
.icon-circle-success:before {
  content: "\e9b9";
}
.icon-circle-stop:before {
  content: "\e9ba";
}
.icon-circle-plus:before {
  content: "\e9bb";
}
.icon-circle-pause:before {
  content: "\e9bc";
}
.icon-circle-play:before {
  content: "\e9bd";
}
.icon-archive:before {
  content: "\e9be";
}
.icon-ratio-horizontal-32:before {
  content: "\e9ab";
}
.icon-ratio-vertical-32:before {
  content: "\e9ac";
}
.icon-ratio-square-32:before {
  content: "\e9af";
}
.icon-line-height:before {
  content: "\e9b3";
}
.icon-font-size:before {
  content: "\e9b4";
}
.icon-radius-2:before {
  content: "\e95b";
}
.icon-corners:before {
  content: "\e9b2";
}
.icon-drag:before {
  content: "\e9b1";
}
.icon-money-trust:before {
  content: "\e9b0";
}
.icon-image:before {
  content: "\e997";
}
.icon-magic-wand:before {
  content: "\e977";
}
.icon-point:before {
  content: "\e915";
}
.icon-info2:before {
  content: "\e90d";
}
.icon-hammer2:before {
  content: "\e9aa";
}
.icon-clear2:before {
  content: "\e913";
}
.icon-pencil3:before {
  content: "\e9a9";
}
.icon-handshake:before {
  content: "\e948";
}
.icon-hammer:before {
  content: "\e968";
}
.icon-filter2:before {
  content: "\e96f";
}
.icon-filter2-32:before {
  content: "\e9a7";
}
.icon-warn-outline2:before {
  content: "\e9a8";
}
.icon-select-multiple:before {
  content: "\e9a1";
}
.icon-coords-32:before {
  content: "\e9a2";
}
.icon-coords:before {
  content: "\e9a3";
}
.icon-address:before {
  content: "\e9a4";
}
.icon-address-32:before {
  content: "\e9a5";
}
.icon-poi:before {
  content: "\e91c";
}
.icon-file2:before {
  content: "\e994";
}
.icon-cog:before {
  content: "\e9a0";
}
.icon-trash2-minimal:before {
  content: "\e99d";
}
.icon-trash-minimal:before {
  content: "\e99e";
}
.icon-trash:before {
  content: "\e99f";
}
.icon-back:before {
  content: "\e99a";
}
.icon-chat:before {
  content: "\e999";
}
.icon-user-legal:before {
  content: "\e998";
}
.icon-user-physical:before {
  content: "\e982";
}
.icon-trash2:before {
  content: "\e996";
}
.icon-download2:before {
  content: "\e995";
}
.icon-upload2:before {
  content: "\e993";
}
.icon-search:before {
  content: "\e992";
}
.icon-folder-bold:before {
  content: "\e91e";
}
.icon-folder:before {
  content: "\e990";
}
.icon-car:before {
  content: "\e98f";
}
.icon-send:before {
  content: "\e99b";
}
.icon-text-align-hor-justified:before {
  content: "\e98c";
}
.icon-new:before {
  content: "\e926";
}
.icon-user-care:before {
  content: "\e987";
}
.icon-user:before {
  content: "\e986";
}
.icon-unlock-alt:before {
  content: "\e98a";
}
.icon-lock:before {
  content: "\e936";
}
.icon-unlock:before {
  content: "\e960";
}
.icon-admin:before {
  content: "\e981";
}
.icon-create-video:before {
  content: "\e978";
}
.icon-import:before {
  content: "\e979";
}
.icon-text-align-hor-center:before {
  content: "\e97a";
}
.icon-text-align-hor-left:before {
  content: "\e97b";
}
.icon-text-align-hor-right:before {
  content: "\e97c";
}
.icon-layers-up:before {
  content: "\e97d";
}
.icon-layers-down:before {
  content: "\e97e";
}
.icon-layers:before {
  content: "\e97f";
}
.icon-cloud:before {
  content: "\e975";
}
.icon-upload:before {
  content: "\e974";
}
.icon-night:before {
  content: "\e971";
}
.icon-day:before {
  content: "\e972";
}
.icon-earth:before {
  content: "\e970";
}
.icon-file-excel:before {
  content: "\e96c";
}
.icon-line:before {
  content: "\e963";
}
.icon-bar:before {
  content: "\e96b";
}
.icon-compass-edit:before {
  content: "\e93b";
  color: #46494e;
}
.icon-file:before {
  content: "\e900";
}
.icon-hexagon:before {
  content: "\e969";
}
.icon-finish:before {
  content: "\e966";
}
.icon-side:before {
  content: "\e961";
}
.icon-puzzle:before {
  content: "\e935";
}
.icon-big-arrow-right:before {
  content: "\e94c";
}
.icon-automation:before {
  content: "\e94d";
}
.icon-package:before {
  content: "\e93c";
}
.icon-wallet:before {
  content: "\e93a";
}
.icon-empty:before {
  content: "\e93e";
}
.icon-debt:before {
  content: "\e940";
}
.icon-robot:before {
  content: "\e95f";
}
.icon-frames:before {
  content: "\e937";
}
.icon-warn-outline:before {
  content: "\e927";
}
.icon-close-outline:before {
  content: "\e928";
}
.icon-success-outline:before {
  content: "\e929";
}
.icon-360:before {
  content: "\e98b";
}
.icon-text-align-vert-top:before {
  content: "\e983";
}
.icon-text-align-vert-center:before {
  content: "\e984";
}
.icon-text-align-vert-bottom:before {
  content: "\e985";
}
.icon-italic:before {
  content: "\e980";
}
.icon-share1:before {
  content: "\e973";
}
.icon-sort:before {
  content: "\e96e";
}
.icon-clear:before {
  content: "\e96a";
}
.icon-playlist_add_check:before {
  content: "\e92a";
}
.icon-unlock1:before {
  content: "\e989";
}
.icon-email:before {
  content: "\e96d";
}
.icon-circle-o:before {
  content: "\f10c";
}
.icon-circle:before {
  content: "\f111";
}
.icon-crop:before {
  content: "\f125";
}
.icon-object-ungroup:before {
  content: "\f248";
}
.icon-tools:before {
  content: "\e962";
}
.icon-tools:before {
  content: "\e962";
}
.icon-resize1:before {
  content: "\e964";
}
.icon-resize2:before {
  content: "\e965";
}
.icon-streetlight:before {
  content: "\e91d";
}
.icon-filter:before {
  content: "\e925";
}
.icon-warning1:before {
  content: "\e90e";
}
.icon-chevron-down:before {
  content: "\e901";
}
.icon-chevron-left:before {
  content: "\e902";
}
.icon-chevron-right:before {
  content: "\e906";
}
.icon-chevron-up:before {
  content: "\e907";
}
.icon-dots-three-horizontal:before {
  content: "\e90f";
}
.icon-dots-three-vertical:before {
  content: "\e910";
}
.icon-attachment1:before {
  content: "\e911";
}
.icon-box:before {
  content: "\e90b";
}
.icon-check:before {
  content: "\e908";
}
.icon-direction:before {
  content: "\e917";
}
.icon-edit:before {
  content: "\e919";
}
.icon-help-with-circle:before {
  content: "\e909";
}
.icon-help:before {
  content: "\e90c";
}
.icon-info-with-circle:before {
  content: "\e90a";
}
.icon-log-out:before {
  content: "\e914";
}
.icon-paper-plane:before {
  content: "\e918";
}
.icon-scissors:before {
  content: "\e91a";
}
.icon-move:before {
  content: "\e95e";
}
.icon-link:before {
  content: "\e95d";
}
.icon-stack:before {
  content: "\e967";
}
.icon-arrow-right:before {
  content: "\e952";
}
.icon-forward:before {
  content: "\e954";
}
.icon-redo:before {
  content: "\e955";
}
.icon-arrow-left:before {
  content: "\e95a";
}
.icon-box-remove:before {
  content: "\e94a";
}
.icon-box-add:before {
  content: "\e94b";
}
.icon-stats-bars:before {
  content: "\e99c";
}
.icon-star-full:before {
  content: "\e9d9";
}
.icon-snowy:before {
  content: "\e93d";
}
.icon-rainy:before {
  content: "\e941";
}
.icon-lightning:before {
  content: "\e942";
}
.icon-cloudy:before {
  content: "\e943";
}
.icon-wind:before {
  content: "\e944";
}
.icon-windy:before {
  content: "\e945";
}
.icon-sun1:before {
  content: "\e946";
}
.icon-alarm:before {
  content: "\e950";
}
.icon-meter:before {
  content: "\e9a6";
}
.icon-clipboard:before {
  content: "\e9b8";
}
.icon-arrow-up:before {
  content: "\e939";
}
.icon-arrow-down:before {
  content: "\e938";
}
.icon-down:before {
  content: "\e938";
}
.icon-download:before {
  content: "\e938";
}
.icon-bottom:before {
  content: "\e938";
}
.icon-list:before {
  content: "\e933";
}
.icon-plus:before {
  content: "\e932";
}
.icon-attachment:before {
  content: "\e92b";
}
.icon-paperclip:before {
  content: "\e92b";
}
.icon-pie-chart:before {
  content: "\e92c";
}
.icon-stats:before {
  content: "\e92c";
}
.icon-statistics:before {
  content: "\e92c";
}
.icon-graph:before {
  content: "\e92c";
}
.icon-floppy-disk:before {
  content: "\e92d";
}
.icon-save:before {
  content: "\e92d";
}
.icon-pushpin:before {
  content: "\e92e";
}
.icon-pin:before {
  content: "\e92e";
}
.icon-price-tags:before {
  content: "\e92f";
}
.icon-price-tag:before {
  content: "\e930";
}
.icon-paint-format:before {
  content: "\e931";
}
.icon-format:before {
  content: "\e931";
}
.icon-color:before {
  content: "\e931";
}
.icon-map:before {
  content: "\e91f";
}
.icon-map1:before {
  content: "\e920";
}
.icon-compass1:before {
  content: "\e922";
}
.icon-location:before {
  content: "\e923";
}
.icon-location1:before {
  content: "\e924";
}
.icon-home:before {
  content: "\e903";
}
.icon-office:before {
  content: "\e904";
}
.icon-newspaper:before {
  content: "\e905";
}
.icon-pencil:before {
  content: "\e912";
}
.icon-play1:before {
  content: "\e916";
}
.icon-library:before {
  content: "\e921";
}
.icon-credit-card:before {
  content: "\e93f";
}
.icon-compass:before {
  content: "\e949";
}
.icon-clock:before {
  content: "\e94e";
}
.icon-clock2:before {
  content: "\e94f";
}
.icon-bell:before {
  content: "\e951";
}
.icon-calendar:before {
  content: "\e953";
}
.icon-display:before {
  content: "\e956";
}
.icon-laptop:before {
  content: "\e957";
}
.icon-mobile:before {
  content: "\e958";
}
.icon-mobile2:before {
  content: "\e959";
}
.icon-user-tie:before {
  content: "\e976";
}
.icon-key:before {
  content: "\e98d";
}
.icon-bin2:before {
  content: "\e9ad";
}
.icon-briefcase:before {
  content: "\e9ae";
}
.icon-switch:before {
  content: "\e9b6";
}
.icon-eye:before {
  content: "\e9ce";
}
.icon-eye-blocked:before {
  content: "\e9d1";
}
.icon-warning:before {
  content: "\ea07";
}
.icon-notification:before {
  content: "\ea08";
}
.icon-info:before {
  content: "\ea0c";
}
.icon-cancel-circle:before {
  content: "\ea0d";
}
.icon-cross:before {
  content: "\ea0f";
}
.icon-checkmark:before {
  content: "\ea10";
}
.icon-play2:before {
  content: "\ea15";
}
.icon-pause:before {
  content: "\ea16";
}
.icon-stop:before {
  content: "\ea17";
}
.icon-play3:before {
  content: "\ea1c";
}
.icon-pause2:before {
  content: "\ea1d";
}
.icon-stop2:before {
  content: "\ea1e";
}
.icon-loop2:before {
  content: "\ea2e";
}
.icon-circle-up:before {
  content: "\ea41";
}
.icon-circle-right:before {
  content: "\ea42";
}
.icon-circle-down:before {
  content: "\ea43";
}
.icon-circle-left:before {
  content: "\ea44";
}
.icon-checkbox-checked:before {
  content: "\ea52";
}
.icon-checkbox-unchecked:before {
  content: "\ea53";
}
.icon-crop1:before {
  content: "\ea57";
}
.icon-whatsapp:before {
  content: "\ea93";
}
.icon-eyedropper:before {
  content: "\e988";
}
.icon-bold:before {
  content: "\ea62";
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!../node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!../node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!../node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Фирменная тень
 */
/**
 * Тень, одинаковая со всех сторон (фирменная тень больше снизу)
 */
/**
 * Легкая тень
 */
/**
 * Радиус кнопок
 */
/**
 * Радиус инпутов
 */
/**
 * Стили плейсхолдеров
 */
/**
* Отключить выделение текста
*/
/**
 * Для маленького десктопа
 */
/**
 * Для маленького лептопа
 */
/**
 * Для маленького планшета
 */
/**
 * Для мобильника
 */
/**
 * Замена hsla, потому что в scss оно не работает с css variables
 * Пример использования: aplha($primary-color, 0.5);
 * https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables
 */
/**
 * Для функции alpha-hsl
 */
/**
 * Важно для работы функции alpha-hsl
 * Нужно объявлять css variables через этот миксин, чтоб aplha работал
 * Пример использования: @include defineColorHSL(--primary-color, 220, 89%, 56%);
 *
 * $forTest - "пустой" параметр, чтобы разработчик мог передать туда цвет в норм виде и 
 * IDE с помощью цветового плагина показала ему этот цвет, чтоб удобно изменять цвет и всё такое
 */
html {
  --approved-color: var(--green);
  --approved-color-dark: var(--green-dark);
  --rejected-color: var(--pink-dark);
  --rejected-color-dark: var(--pink-darkest);
  --pending-color: var(--primary-color-light);
}

/**
 * Фирменная тень
 */
/**
 * Отключить выделение текста
 */
/**
 * Карта статусов макетов, новая версия кода (06.12.2021)
 */
/**
 * Статусы макетов, новая версия кода (19.01.2022)
 * Это миксин, который подключен глобально (в App.vue). Отлично подходит для статусов-плашек.
 * - Как использовать: просто написать в html-коде название нужного класса, он подтянет все
 * стили.
 * - ooh-cs = oohdesk creative status (оно юзается глобально, поэтому
 * нужно уникальное название класса)
 * - у каждого класса можно написать .not-active и .has-actions
 */
/**
 * Статусы кампаний
 */
.ooh-cs-ready_to_convert.not-active {
  color: #ffddc6 !important;
  background: var(--orange-dark) !important;
  border-color: #ffddc6 !important;
  border-color: !important;
}
.ooh-cs-ready_to_convert.not-active.has-actions:hover {
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  color: #ae6e4a !important;
  border-color: #ae6e4a !important;
}
.ooh-cs-ready_to_convert:not(.not-active) {
  color: var(--orange-dark) !important;
  background: #ffddc6 !important;
  border-color: #ffddc6 !important;
  border-color: !important;
}
.ooh-cs-ready_to_convert:not(.not-active).has-actions:hover {
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-color: #ae6e4a !important;
  background: #ae6e4a !important;
}
.ooh-cs-unknown.not-active {
  color: var(--gray-dark) !important;
  background: var(--gray-light) !important;
  border-color: var(--gray-dark) !important;
  border-color: !important;
}
.ooh-cs-unknown.not-active.has-actions:hover {
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  color: var(--black-light) !important;
  border-color: var(--black-light) !important;
}
.ooh-cs-unknown:not(.not-active) {
  color: var(--gray-light) !important;
  background: var(--gray-dark) !important;
  border-color: var(--gray-dark) !important;
  border-color: !important;
}
.ooh-cs-unknown:not(.not-active).has-actions:hover {
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-color: var(--black-light) !important;
  background: var(--black-light) !important;
}
.ooh-cs-prepared.not-active {
  color: var(--white) !important;
  background: var(--gray-dark) !important;
  border-color: var(--white) !important;
  border-color: var(--gray) !important;
}
.ooh-cs-prepared.not-active.has-actions:hover {
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  color: var(--gray-light) !important;
  border-color: var(--gray-light) !important;
}
.ooh-cs-prepared:not(.not-active) {
  color: var(--gray-dark) !important;
  background: var(--white) !important;
  border-color: var(--white) !important;
  border-color: var(--gray) !important;
}
.ooh-cs-prepared:not(.not-active).has-actions:hover {
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-color: var(--gray-light) !important;
  background: var(--gray-light) !important;
}
.ooh-cs-pending.not-active {
  color: #6bb7ff !important;
  background: var(--white) !important;
  border-color: #6bb7ff !important;
  border-color: !important;
}
.ooh-cs-pending.not-active.has-actions:hover {
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  color: #448ed3 !important;
  border-color: #448ed3 !important;
}
.ooh-cs-pending:not(.not-active) {
  color: var(--white) !important;
  background: #6bb7ff !important;
  border-color: #6bb7ff !important;
  border-color: !important;
}
.ooh-cs-pending:not(.not-active).has-actions:hover {
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-color: #448ed3 !important;
  background: #448ed3 !important;
}
.ooh-cs-approved.not-active {
  color: var(--green) !important;
  background: var(--white) !important;
  border-color: var(--green) !important;
  border-color: !important;
}
.ooh-cs-approved.not-active.has-actions:hover {
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  color: var(--green-dark) !important;
  border-color: var(--green-dark) !important;
}
.ooh-cs-approved:not(.not-active) {
  color: var(--white) !important;
  background: var(--green) !important;
  border-color: var(--green) !important;
  border-color: !important;
}
.ooh-cs-approved:not(.not-active).has-actions:hover {
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-color: var(--green-dark) !important;
  background: var(--green-dark) !important;
}
.ooh-cs-rejected.not-active {
  color: var(--pink) !important;
  background: var(--white) !important;
  border-color: var(--pink) !important;
  border-color: !important;
}
.ooh-cs-rejected.not-active.has-actions:hover {
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  color: var(--pink-dark) !important;
  border-color: var(--pink-dark) !important;
}
.ooh-cs-rejected:not(.not-active) {
  color: var(--white) !important;
  background: var(--pink) !important;
  border-color: var(--pink) !important;
  border-color: !important;
}
.ooh-cs-rejected:not(.not-active).has-actions:hover {
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-color: var(--pink-dark) !important;
  background: var(--pink-dark) !important;
}
.ooh-tag-cs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0px 5px 5px 0;
  padding: 4px 9px;
  border-radius: 5px;
  border: 1px solid transparent;
  font-size: 12px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  background: var(--pink);
  border-color: var(--pink);
  color: var(--white);
}
.ooh-tag-cs.ooh-cs-prepared {
  border-style: dashed;
}
.ooh-circle-cs {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: var(--pink);
  border-color: var(--pink);
  color: var(--white);
}
.ooh-circle-cs.ooh-cs-prepared {
  border-style: dashed;
}
@font-face {
  font-family: "SegoeUI";
  src: url(/fonts/segoeUIRegular.75d4902e.eot);
  src: url(/fonts/segoeUIRegular.75d4902e.eot?#iefix) format("embedded-opentype"), url(/fonts/segoeUIRegular.1abf783f.woff) format("woff"), url(/fonts/segoeUIRegular.87d65d6b.ttf) format("truetype");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "SegoeUI";
  src: url(/fonts/SegoeUISemiBold.0264d95e.eot);
  src: url(/fonts/SegoeUISemiBold.0264d95e.eot?#iefix) format("embedded-opentype"), url(/fonts/SegoeUISemiBold.7adc831f.woff) format("woff"), url(/fonts/SegoeUISemiBold.97fcaea4.ttf) format("truetype");
  font-style: normal;
  font-weight: bold;
}
@font-face {
  font-family: "SegoeUI";
  src: url(/fonts/SegoeUIBold.8460ca08.eot);
  src: url(/fonts/SegoeUIBold.8460ca08.eot?#iefix) format("embedded-opentype"), url(/fonts/SegoeUIBold.bf2ba46e.woff) format("woff"), url(/fonts/SegoeUIBold.c389e8e2.ttf) format("truetype");
  font-style: normal;
  font-weight: 800;
}
@font-face {
  font-family: "SegoeUI";
  src: url(/fonts/SegoeUILight.073ccfa8.eot);
  src: url(/fonts/SegoeUILight.073ccfa8.eot?#iefix) format("embedded-opentype"), url(/fonts/SegoeUILight.fe7b6c42.woff) format("woff"), url(/fonts/SegoeUILight.a658a76a.ttf) format("truetype");
  font-style: normal;
  font-weight: 300;
}
@font-face {
  font-family: "SegoeUI";
  src: url(/fonts/SegoeUIItalic.db44d0a0.eot);
  src: url(/fonts/SegoeUIItalic.db44d0a0.eot?#iefix) format("embedded-opentype"), url(/fonts/SegoeUIItalic.df68dce7.woff) format("woff"), url(/fonts/SegoeUIItalic.bb90c12d.ttf) format("truetype");
  font-style: italic;
  font-weight: normal;
}
@font-face {
  font-family: "GilroyBold";
  src: url(/fonts/Gilroy-Bold.ea58f09d.ttf) format("truetype");
  font-style: normal;
  font-weight: bold;
}
@font-face {
  font-family: "HelveticaBlack";
  src: url(/fonts/HelveticaBlack.9095cd09.ttf) format("truetype");
  font-style: normal;
  font-weight: bolder;
}
@font-face {
  font-family: "HelveticaBlackItalic";
  src: url(/fonts/HelveticaBlackItalic.ec2f1223.ttf) format("truetype");
  font-style: italic;
  font-weight: bolder;
}
@font-face {
  font-family: "HelveticaBold";
  src: url(/fonts/HelveticaBold.3865e536.ttf) format("truetype");
  font-style: normal;
  font-weight: bold;
}
@font-face {
  font-family: "HelveticaBoldItalic";
  src: url(/fonts/HelveticaBoldItalic.1ac54de5.ttf) format("truetype");
  font-style: italic;
  font-weight: bold;
}
@font-face {
  font-family: "HelveticaHeavy";
  src: url(/fonts/HelveticaHeavy.f8193010.ttf) format("truetype");
  font-style: normal;
  font-weight: heavy;
}
@font-face {
  font-family: "HelveticaHeavyItalic";
  src: url(/fonts/HelveticaHeavyItalic.c08234f1.ttf) format("truetype");
  font-style: italic;
  font-weight: heavy;
}
@font-face {
  font-family: "HelveticaItalic";
  src: url(/fonts/HelveticaItalic.63bacf2b.ttf) format("truetype");
  font-style: italic;
  font-weight: normal;
}
@font-face {
  font-family: "HelveticaLight";
  src: url(/fonts/HelveticaLight.2700ecca.ttf) format("truetype");
  font-style: normal;
  font-weight: lighter;
}
@font-face {
  font-family: "HelveticaLightItalic";
  src: url(/fonts/HelveticaLightItalic.7451b9d2.ttf) format("truetype");
  font-style: italic;
  font-weight: lighter;
}
@font-face {
  font-family: "HelveticaMedium";
  src: url(/fonts/HelveticaMedium.78917aab.ttf) format("truetype");
  font-style: normal;
  font-weight: medium;
}
@font-face {
  font-family: "HelveticaMediumItalic";
  src: url(/fonts/HelveticaMediumItalic.36e1f05e.ttf) format("truetype");
  font-style: italic;
  font-weight: medium;
}
@font-face {
  font-family: "HelveticaRegular";
  src: url(/fonts/HelveticaRegular.607a92c2.ttf) format("truetype");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "HelveticaThin";
  src: url(/fonts/HelveticaThin.f3f90fcf.ttf) format("truetype");
  font-style: normal;
  font-weight: thin;
}
@font-face {
  font-family: "HelveticaThinItalic";
  src: url(/fonts/HelveticaThinItalic.2df9d837.ttf) format("truetype");
  font-style: italic;
  font-weight: thin;
}
@font-face {
  font-family: "HelveticaUltraLightItalic";
  src: url(/fonts/HelveticaUltraLightItalic.de0192b9.ttf) format("truetype");
  font-style: italic;
  font-weight: thin;
}
body {
  font-family: SegoeUI, Arial, sans-serif;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
[hidden],
template {
  display: none;
}
hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 16px;
  font-weight: bold;
}
h1 {
  font-size: 24px;
}
button,
input,
select,
textarea {
  font: inherit;
  margin: 0;
}
button {
  overflow: visible;
}
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}
input[type=checkbox],
input[type=radio] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}
input[type=search] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
html {
  position: fixed;
  font-size: 8px;
}
body {
  color: var(--black-light);
  background: var(--body-background);
  background: var(--body-background-linear);
  line-height: 1.4;
  position: relative;
  font-size: 12px;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
button {
  cursor: pointer;
  border: 0;
  background: none;
  text-align: left;
}
button:focus {
  outline: 0;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
img {
  display: block;
}
a {
  text-decoration: none;
  color: var(--primary-color);
}
input:focus {
  outline: 0;
}
::-moz-selection {
  color: var(--white-always);
  background: var(--primary-color-light);
}
::selection {
  color: var(--white-always);
  background: var(--primary-color-light);
}
::v-deep .splitter-pane-resizer.vertical {
  width: 0 !important;
}
::v-deep .splitter-pane-resizer.horizontal {
  height: 5px !important;
}
::v-deep .splitter-pane.horizontal.splitter-paneR {
  padding-top: 0;
}
::v-deep .splitter-pane.vertical.splitter-paneL {
  padding-right: 0;
}
::v-deep .splitter-pane.vertical.splitter-paneR {
  padding-left: 0;
}
.v--modal-overlay {
  z-index: var(--z-index-modal) !important;
  background-color: rgba(var(--modal-bckg-rgb), 0.6) !important;
}
.vue-dialog-button {
  text-align: center;
}
::v-deep .gm-style-iw {
  max-height: calc(100vh - 100px) !important;
  --maxCardWidth: 100%;
  max-width: var(--maxCardWidth) !important;
}
::v-deep .gm-style-iw-d {
  max-height: -webkit-min-content !important;
  max-height: -moz-min-content !important;
  max-height: min-content !important;
  max-width: -webkit-min-content !important;
  max-width: -moz-min-content !important;
  max-width: min-content !important;
}
::v-deep .gm-ui-hover-effect {
  width: 35px !important;
  height: 25px !important;
  top: 0 !important;
  right: 0px !important;
  background: var(--white) !important;
  opacity: 1 !important;
}
::v-deep .gm-ui-hover-effect > * {
  width: 20px !important;
  height: 20px !important;
}
::v-deep .gm-bundled-control-on-bottom {
  right: 50px;
}
.video-for-sizes-info {
  width: 0;
  height: 0;
  position: absolute;
}
.separation-by-word {
  white-space: nowrap;
  word-break: break-word;
}
.separation-by-word2 {
  word-break: break-all;
}
.tooltip {
  display: block !important;
  z-index: var(--z-index-tooltip);
}
.tooltip-inner {
  background: var(--gray-dark-always);
  color: var(--white-always);
  border-radius: 5px;
  padding: 8px 15px 10px 15px;
  font-size: 14px;
}
.tooltip-inner__size_small {
  font-size: 12px;
}
.tooltip-inner__size_normal {
  font-size: 14px;
}
.tooltip-inner__size_large {
  font-size: 18px;
}
.tooltip-inner__size_largest {
  font-size: 22px;
}
.tooltip-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  margin: 5px;
  border-color: var(--gray-dark-always);
  z-index: var(var(--z-index-tooltip)-1);
}
.tooltip[x-placement^=top] {
  margin-bottom: 5px;
}
.tooltip[x-placement^=top] .tooltip-arrow {
  border-width: 5px 5px 0 5px;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  bottom: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}
.tooltip[x-placement^=bottom] {
  margin-top: 5px;
}
.tooltip[x-placement^=bottom] .tooltip-arrow {
  border-width: 0 5px 5px 5px;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-top-color: transparent !important;
  top: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}
.tooltip[x-placement^=right] {
  margin-left: 5px;
}
.tooltip[x-placement^=right] .tooltip-arrow {
  border-width: 5px 5px 5px 0;
  border-left-color: transparent !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  left: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}
.tooltip[x-placement^=left] {
  margin-right: 5px;
}
.tooltip[x-placement^=left] .tooltip-arrow {
  border-width: 5px 0 5px 5px;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  right: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}
.tooltip[aria-hidden=true] {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.15s, visibility 0.15s;
  transition: opacity 0.15s, visibility 0.15s;
}
.tooltip[aria-hidden=false] {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity 0.15s;
  transition: opacity 0.15s;
}
.loader-for-component-wrapper {
  position: relative;
  height: 100%;
}
.loader-for-component-wrapper .loader-for-component {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--zIndex);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: var(--alignItems);
      -ms-flex-align: var(--alignItems);
          align-items: var(--alignItems);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: var(--width);
  height: var(--height);
  background: var(--background);
  padding: var(--padding);
}
.loader-for-component-wrapper .loader-for-component::before {
  content: "\e94e";
  font-family: "icomoon" !important;
  display: inline-block;
  position: absolute;
  z-index: var(var(--zIndex)1);
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  color: var(--primary-color);
  font-size: 45px;
  -webkit-animation-name: spin;
          animation-name: spin;
  -webkit-animation-duration: 4000ms;
          animation-duration: 4000ms;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}
@-webkit-keyframes spin {
from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
}
}
@keyframes spin {
from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
}
}
@-webkit-keyframes highlight {
0% {
    background-color: transparent;
}
20% {
    background-color: var(--primary-color-1010);
}
80% {
    background-color: var(--primary-color-1010);
}
100% {
    background-color: transparent;
}
}
@keyframes highlight {
0% {
    background-color: transparent;
}
20% {
    background-color: var(--primary-color-1010);
}
80% {
    background-color: var(--primary-color-1010);
}
100% {
    background-color: transparent;
}
}
.vue-highlight {
  -webkit-animation-name: highlight;
          animation-name: highlight;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
.has-advanced-upload {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-radius: 7px;
  background: #fffbf9;
}
.v-tree-dots__dots {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  height: 22px;
  padding: 2px 10px 4px;
  margin: 3px 6px 3px 0;
  border-radius: 6px;
  color: var(--black-light);
  font-weight: bold;
  background: var(--gray-light);
  text-align: center;
  line-height: 50%;
  font-size: 16px;
  padding-bottom: 3px;
  letter-spacing: 2px;
}
.v-tree-dots__dots:hover {
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background: var(--gray);
}

/*BUTTON SELECT*/
.btn-select {
  background: var(--gray-lightest);
  border: 1px solid var(--gray-lightest);
  height: 34px;
  width: 100%;
  text-align: left;
  padding: 0 10px;
  border-radius: 3px;
  position: relative;
  text-align: left;
  -webkit-transition: all 250ms;
  transition: all 250ms;
}
.btn-select:after {
  content: "\e901";
  display: block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  position: relative;
  font-family: "icomoon";
  font-size: 18px;
  margin-left: 4px;
  position: absolute;
  right: 10px;
  top: 9px;
}
.section {
  height: 100%;
  position: relative;
}

/*TEXT TITLE*/
.title {
  font-size: 14px;
  line-height: 1;
  margin-left: 30px;
  font-weight: bold;
}

/**
 * Пример ссылки: 
 * <div class="ooh-link">
 *   <div class="ooh-link-inner">Контент ссылки</div>
 * </div>
**/
.ooh-link {
  padding: 0.5rem 1rem;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.ooh-link:hover .ooh-link-inner {
  color: var(--primary-color-darkest);
  border-color: var(--primary-color-darkest);
}
.ooh-link-inner {
  font-size: 1.75rem;
  color: var(--primary-color);
  border-bottom: 1px dashed var(--primary-color);
}
.ooh-description {
  font-size: 1.75rem;
  color: var(--gray-darkish);
}
.ooh-required {
  color: #e65651;
}
.ooh-empty {
  color: var(--gray);
}

/**
 * Идея с hsl отсюда:
 * https://stackoverflow.com/a/55267265/14183414
 */
html {
  --pc-h: 209;
  --pc-s: 91%;
  --pc-l: 52%;
  --pc-hsl: var(--pc-h), var(--pc-s), var(--pc-l);
  --primary-color: hsl(var(--pc-h), var(--pc-s), var(--pc-l));
  --primary-color-h: var(--pc-h);
  --primary-color-s: var(--pc-s);
  --primary-color-l: var(--pc-l);
  --primary-color-1500: hsl(var(--pc-h), calc(var(--pc-s) - 25%), calc(var(--pc-l) + 45%));
  --primary-color-1300: hsl(var(--pc-h), calc(var(--pc-s) - 25%), calc(var(--pc-l) + 40%));
  --primary-color-1200: hsl(calc(var(--pc-h) + 5), 80%, 90%);
  --primary-color-1100: hsl(var(--pc-h), calc(var(--pc-s) * 0.57), calc(var(--pc-l) * 1.81));
  --primary-color-lighten: hsl(calc(var(--pc-h) + 12), calc(var(--pc-s) * 0.83), calc(var(--pc-l) * 1.73));
  --primary-color-lighten-h: calc(var(--pc-h) + 12);
  --primary-color-lighten-s: calc(var(--pc-s) * 0.83);
  --primary-color-lighten-l: calc(var(--pc-l) * 1.73);
  --primary-color-light: hsl(var(--pc-h), calc(var(--pc-s) * 0.7), var(--pc-l));
  --primary-color-light-h: var(--pc-h);
  --primary-color-light-s: calc(var(--pc-s) * 0.7);
  --primary-color-light-l: var(--pc-l);
  --primary-color-1020: hsl(var(--pc-h), var(--pc-s), calc(var(--pc-l) / 0.56));
  --primary-color-1020-h: var(--pc-h);
  --primary-color-1020-s: var(--pc-s);
  --primary-color-1020-l: calc(var(--pc-l) / 0.56);
  --primary-color-1010: hsl(var(--pc-h), var(--pc-s), calc(var(--pc-l) / 0.7));
  --primary-color-1010-h: var(--pc-h);
  --primary-color-1010-s: var(--pc-s);
  --primary-color-1010-l: calc(var(--pc-l) / 0.7);
  --primary-color-1005: hsl(var(--pc-h), var(--pc-s), calc(var(--pc-l) / 0.8));
  --primary-color-1005-h: var(--pc-h);
  --primary-color-1005-s: var(--pc-s);
  --primary-color-1005-l: calc(var(--pc-l) / 0.8);
  --primary-color-dark: hsl(var(--pc-h), calc(var(--pc-s) * 0.9), calc(var(--pc-l) * 0.85));
  --primary-color-dark-h: var(--pc-h);
  --primary-color-dark-s: calc(var(--pc-s) * 0.9);
  --primary-color-dark-l: calc(var(--pc-l) * 0.85);
  --primary-color-darkest: hsl(var(--pc-h), var(--pc-s), calc(var(--pc-l) * 0.6));
  --primary-color-darkest-h: var(--pc-h);
  --primary-color-darkest-s: var(--pc-s);
  --primary-color-darkest-l: calc(var(--pc-l) * 0.6);
  --primary-color-opacity-05: hsla(var(--pc-h), var(--pc-s), var(--pc-l), 0.5);
  --primary-color-linear-light: var(--primary-color-light);
  --primary-color-linear: var(--primary-color);
  --primary-color-linear-dark: var(--primary-color-dark);
  --primary-color-linear-lightish-dark: var(--primary-color-1010);
  --primary-color-linear-darkest: var(--primary-color-darkest);
  --secondary-color-lightest: #9ab0c2;
  --secondary-color-lighten: #7890a5;
  --secondary-color-1100: #687d9a;
  --secondary-color: #647b90;
  --secondary-color-darken: #4a5f74;
  --secondary-color-rgb: 100, 123, 144;
  --gr-h: 210;
  --gr-s: 27%;
  --gr-l: 80%;
  --purple-lighten: hsl(252, 59%, 90%);
  --purple-light: hsl(252, 59%, 85%);
  --purple: hsl(252, 59%, 75%);
  --purple-dark: hsl(252, 59%, 65%);
  /**
  	Логика такая:
  	gray - серый
  	gray-dark - темнее, чем серый
  	gray-dark-dark - темнее, чем gray-dark
  	gray-dark-light - светлее, чем gray-dark
  	gray-dark-dark-dark - темнее, чем gray-dark-dark (но надо стараться 3 поколение не юзать)
   */
  --white: hsl(var(--gr-h), calc(var(--gr-s) * 0), 100%);
  --white-h: var(--gr-h);
  --white-s: calc(var(--gr-s) * 0);
  --white-l: 100%;
  --gray-lightest-light: hsl(var(--gr-h), calc(var(--gr-s) * 0.74), calc(var(--gr-l) * 1.225));
  --gray-lightest-light-h: var(--gr-h);
  --gray-lightest-light-s: calc(var(--gr-s) * 0.74);
  --gray-lightest-light-l: calc(var(--gr-l) * 1.225);
  --gray-lightest-lightish: hsl(var(--gr-h), calc(var(--gr-s) * 0.85), calc(var(--gr-l) * 1.2));
  --gray-lightest-lightish-h: var(--gr-h);
  --gray-lightest-lightish-s: calc(var(--gr-s) * 0.85);
  --gray-lightest-lightish-l: calc(var(--gr-l) * 1.2);
  --gray-lightest: hsl(var(--gr-h), calc(var(--gr-s) * 1.04), calc(var(--gr-l) * 1.19));
  --gray-lightest-h: var(--gr-h);
  --gray-lightest-s: calc(var(--gr-s) * 1.04);
  --gray-lightest-l: calc(var(--gr-l) * 1.19);
  --gray-lightest-darkish: hsl(var(--gr-h), calc(var(--gr-s) * 0.78), calc(var(--gr-l) * 1.15));
  --gray-lightest-darkish-h: var(--gr-h);
  --gray-lightest-darkish-s: calc(var(--gr-s) * 0.78);
  --gray-lightest-darkish-l: calc(var(--gr-l) * 1.15);
  --gray-light: hsl(var(--gr-h), var(--gr-s), calc(var(--gr-l) * 1.1));
  --gray-light-h: var(--gr-h);
  --gray-light-s: var(--gr-s);
  --gray-light-l: calc(var(--gr-l) * 1.1);
  --gray: hsl(var(--gr-h), var(--gr-s), var(--gr-l));
  --gray-h: var(--gr-h);
  --gray-s: var(--gr-s);
  --gray-l: var(--gr-l);
  --gray-darkish: hsl(var(--gr-h), calc(var(--gr-s) * 0.33), calc(var(--gr-l) * 0.88));
  --gray-darkish-h: var(--gr-h);
  --gray-darkish-s: calc(var(--gr-s) * 0.33);
  --gray-darkish-l: calc(var(--gr-l) * 0.88);
  --gray-dark-light: var(--gray-darkish);
  --gray-dark: hsl(var(--gr-h), calc(var(--gr-s) * 0.33), calc(var(--gr-l) * 0.625));
  --gray-dark-h: var(--gr-h);
  --gray-dark-s: calc(var(--gr-s) * 0.33);
  --gray-dark-l: calc(var(--gr-l) * 0.625);
  --black-light: hsl(var(--gr-h), calc(var(--gr-s) * 0.19), calc(var(--gr-l) * 0.36));
  --black-light-h: var(--gr-h);
  --black-light-s: calc(var(--gr-s) * 0.19);
  --black-light-l: calc(var(--gr-l) * 0.36);
  --black: hsl(var(--gr-h), calc(var(--gr-s) * 0.15), calc(var(--gr-l) * 0.28));
  --black-h: var(--gr-h);
  --black-s: calc(var(--gr-s) * 0.15);
  --black-l: calc(var(--gr-l) * 0.28);
  --white-opacity-03: hsla(var(--gr-h), 0%, 100%, 0.3);
  --white-opacity-06: hsla(var(--gr-h), 0%, 100%, 0.6);
  --black-opacity-04: hsla(var(--gr-h), 0%, 0%, 0.4);
  --disabled-light: #f5f7fa;
  --disabled: #96a7b6;
  --notify: #e9f3fd;
  --body-background: var(--gray-lightest-light);
  --body-background-linear: var(--body-background);
  --step1-background-linear: var(--body-background-linear);
  --step1-background-piece-linear: var(--step1-background-linear);
  --white-button: var(--white);
  --input-bckg: var(--gray-lightest);
  --dropdown-bckg: var(--white);
  --auth-bckg: #d3dff9;
  --block-bckg: var(--white);
  --dark-block-bckg: var(--block-bckg);
  --block-bckg-rgb: 255, 255, 255;
  --shadow-rgb: 217, 225, 233;
  --modal-bckg-rgb: 28, 43, 59;
  --pink-lighten: hsl(342, 80%, 97%);
  --pink-light: hsl(342, 90%, 87%);
  --pink: hsl(342, 100%, 77%);
  --pink-dark: hsl(342, 70%, 67%);
  --pink-darkest: hsl(342, 50%, 49%);
  --pink-opacity-03: hsl(342, 100%, 77%, 0.3);
  --pink-rgb: 255, 139, 174;
  --blue-light: #c9e5ff;
  --blue: #6bb7ff;
  --blue-dark: #448ed3;
  --blue-opacity-03: hsl(209, 100%, 71%, 0.3);
  --blue-opacity-06: hsl(209, 100%, 71%, 0.6);
  --lemon-light: #f7dac9;
  --lemon: #ffddc6;
  --lemon-dark: #ae6e4a;
  --lemon-darkish: #ce8961;
  --lemon-opacity-03: hsl(28, 100%, 87%, 0.3);
  --white-true: #ffffff;
  --white-always: #ffffff;
  --black-light-true: #46494e;
  --gray-dark-light-always: #adb6c4;
  --gray-dark-true: #747e8c;
  --gray-dark-always: #747e8c;
  --gray-bright-light: #747e8c;
  --gray-bright: #beccda;
  --gray-bright-dark: rgb(190, 204, 218);
  --gray-bright-darken: rgb(236, 239, 242);
  --gray-bright-dark-rgb: 190, 204, 218;
  --green-light: rgb(221, 253, 253);
  --green-lightish: rgb(171, 226, 226);
  --green-opacity-light: rgba(130, 220, 223, 0.4);
  --green: #82dcdf;
  --green-darkish: rgb(97, 197, 197);
  --green-dark: #54adad;
  --orange-light: #ffdbc3;
  --orange: #eb7425;
  --orange-dark-light: #ae6f4a99;
  --orange-dark: #ae6e4a;
  --orange-darkest: #965834;
  --z-index-map-action: 10;
  --z-index-map-action-loader: 12;
  --z-index-map-form: 14;
  --z-index-map-card: 20;
  --z-index-pagination: 800;
  --z-index-header: 900;
  --z-index-top-loader: 910;
  --z-index-header-menu: 920;
  --z-index-header-hamburger: 930;
  --z-index-dropdown-background: 1100;
  --z-index-dropdown: 1399;
  --z-index-modal-background: 1300;
  --z-index-modal: 1350;
  --z-index-dialog: 1370;
  --z-index-dropdown-over-modal: 1400;
  --z-index-tooltip: 1500;
  --z-index-notify: 1600;
  --z-index-alert: 1650;
  --z-index-full-screen: 1700;
}
html[theme=default-dark-telegram], html[theme=default-dark-minia], html[theme=default-dark], html[theme=default-new-year-dark], html[theme=default-spring-dark], html[theme=default-cosmonautics-day-dark], html[theme=default-aniversary5-dark], html[theme=king-media-dark], html[theme=prodigital-dark], html[theme=sharit-media-dark] {
  --primary-color: hsl(var(--pc-h), var(--pc-s), var(--pc-l));
  --primary-color-h: var(--pc-h);
  --primary-color-s: var(--pc-s);
  --primary-color-l: var(--pc-l);
  --primary-color-1500: hsl(var(--pc-h), calc(var(--pc-s) - 60%), calc(var(--pc-l) - 40%));
  --primary-color-1500-h: var(--pc-h);
  --primary-color-1500-s: calc(var(--pc-s) - 60%);
  --primary-color-1500-l: calc(var(--pc-l) - 40%);
  --primary-color-1300: hsl(var(--pc-h), calc(var(--pc-s) / 0.9), calc(var(--pc-l) * 0.36));
  --primary-color-1300-h: var(--pc-h);
  --primary-color-1300-s: calc(var(--pc-s) / 0.9);
  --primary-color-1300-l: calc(var(--pc-l) * 0.36);
  --primary-color-1200: hsl(calc(var(--pc-h) + 5), 50%, 25%);
  --primary-color-1100: hsl(var(--pc-h), calc(var(--pc-s) - 60%), calc(var(--pc-l) * 0.56));
  --primary-color-1100-h: var(--pc-h);
  --primary-color-1100-s: calc(var(--pc-s) - 60%);
  --primary-color-1100-l: calc(var(--pc-l) * 0.56);
  --primary-color-lighten: hsl(calc(var(--pc-h) + 12), calc(var(--pc-s) / 2.7), calc(var(--pc-l) * 0.56));
  --primary-color-lighten-h: calc(var(--pc-h) + 12);
  --primary-color-lighten-s: calc(var(--pc-s) / 2.7);
  --primary-color-lighten-l: calc(var(--pc-l) * 0.56);
  --primary-color-light: hsl(var(--pc-h), calc(var(--pc-s) / 0.7), var(--pc-l));
  --primary-color-light-h: var(--pc-h);
  --primary-color-light-s: calc(var(--pc-s) / 0.7);
  --primary-color-light-l: var(--pc-l);
  --primary-color-1020: hsl(var(--pc-h), var(--pc-s), calc(var(--pc-l) * 0.36));
  --primary-color-1020-h: var(--pc-h);
  --primary-color-1020-s: var(--pc-s);
  --primary-color-1020-l: calc(var(--pc-l) * 0.36);
  --primary-color-1010: hsl(var(--pc-h), var(--pc-s), calc(var(--pc-l) * 0.7));
  --primary-color-1010-h: var(--pc-h);
  --primary-color-1010-s: var(--pc-s);
  --primary-color-1010-l: calc(var(--pc-l) * 0.7);
  --primary-color-1005: hsl(var(--pc-h), var(--pc-s), calc(var(--pc-l) * 0.8));
  --primary-color-1005-h: var(--pc-h);
  --primary-color-1005-s: var(--pc-s);
  --primary-color-1005-l: calc(var(--pc-l) * 0.8);
  --primary-color-dark: hsl(var(--pc-h), calc(var(--pc-s) / 0.9), calc(var(--pc-l) / 0.75));
  --primary-color-dark-h: var(--pc-h);
  --primary-color-dark-s: calc(var(--pc-s) / 0.9);
  --primary-color-dark-l: calc(var(--pc-l) / 0.75);
  --primary-color-darkest: hsl(var(--pc-h), var(--pc-s), calc(var(--pc-l) / 0.6));
  --primary-color-darkest-h: var(--pc-h);
  --primary-color-darkest-s: var(--pc-s);
  --primary-color-darkest-l: calc(var(--pc-l) / 0.6);
  --white: hsl(var(--gr-h), calc(var(--gr-s) * 1.4), calc(var(--gr-l) * 0.28));
  --white-h: var(--gr-h);
  --white-s: calc(var(--gr-s) * 1.4);
  --white-l: calc(var(--gr-l) * 0.28);
  --gray-lightest-light: hsl(var(--gr-h), calc(var(--gr-s) * 0.85), calc(var(--gr-l) * 0.12));
  --gray-lightest-light-h: var(--gr-h);
  --gray-lightest-light-s: calc(var(--gr-s) * 0.85);
  --gray-lightest-light-l: calc(var(--gr-l) * 0.12);
  --gray-lightest-lightish: hsl(var(--gr-h), calc(var(--gr-s) * 2.89), calc(var(--gr-l) * 0.21));
  --gray-lightest-lightish-h: var(--gr-h);
  --gray-lightest-lightish-s: calc(var(--gr-s) * 2.89);
  --gray-lightest-lightish-l: calc(var(--gr-l) * 0.21);
  --gray-lightest: hsl(var(--gr-h), calc(var(--gr-s) * 2.78), calc(var(--gr-l) * 0.19));
  --gray-lightest-h: var(--gr-h);
  --gray-lightest-s: calc(var(--gr-s) * 2.78);
  --gray-lightest-l: calc(var(--gr-l) * 0.19);
  --gray-lightest-darkish: hsl(var(--gr-h), calc(var(--gr-s) * 2.59), calc(var(--gr-l) * 0.16));
  --gray-lightest-darkish-h: var(--gr-h);
  --gray-lightest-darkish-s: calc(var(--gr-s) * 2.59);
  --gray-lightest-darkish-l: calc(var(--gr-l) * 0.16);
  --gray-light: hsl(var(--gr-h), calc(var(--gr-s) * 0.63), calc(var(--gr-l) * 0.45));
  --gray-light-h: var(--gr-h);
  --gray-light-s: calc(var(--gr-s) * 0.63);
  --gray-light-l: calc(var(--gr-l) * 0.45);
  --gray: hsl(var(--gr-h), var(--gr-s), calc(var(--gr-l) * 0.6));
  --gray-h: var(--gr-h);
  --gray-s: var(--gr-s);
  --gray-l: calc(var(--gr-l) * 0.6);
  --gray-darkish: hsl(var(--gr-h), calc(var(--gr-s) * 0.33), calc(var(--gr-l) * 0.88));
  --gray-darkish-h: var(--gr-h);
  --gray-darkish-s: calc(var(--gr-s) * 0.33);
  --gray-darkish-l: calc(var(--gr-l) * 0.88);
  --gray-dark: hsl(var(--gr-h), calc(var(--gr-s) * 0.33), calc(var(--gr-l) * 0.68));
  --gray-dark-h: var(--gr-h);
  --gray-dark-s: calc(var(--gr-s) * 0.33);
  --gray-dark-l: calc(var(--gr-l) * 0.68);
  --black-light: hsl(var(--gr-h), calc(var(--gr-s) * 0.18), calc(var(--gr-l) * 1));
  --black-light-h: var(--gr-h);
  --black-light-s: calc(var(--gr-s) * 0.18);
  --black-light-l: calc(var(--gr-l) * 1);
  --black: hsl(var(--gr-h), calc(var(--gr-s) * 0.15), calc(var(--gr-l) * 1));
  --black-h: var(--gr-h);
  --black-s: calc(var(--gr-s) * 0.15);
  --black-l: calc(var(--gr-l) * 1);
  --lemon-light: #ce8961;
  --lemon: #ae6e4a;
  --lemon-dark: #ffddc6;
  --lemon-darkish: #f7dac9;
}
html[theme=default-dark-telegram] .gmnoprint:not(.gm-style-cc) > div, html[theme=default-dark-minia] .gmnoprint:not(.gm-style-cc) > div, html[theme=default-dark] .gmnoprint:not(.gm-style-cc) > div, html[theme=default-new-year-dark] .gmnoprint:not(.gm-style-cc) > div, html[theme=default-spring-dark] .gmnoprint:not(.gm-style-cc) > div, html[theme=default-cosmonautics-day-dark] .gmnoprint:not(.gm-style-cc) > div, html[theme=default-aniversary5-dark] .gmnoprint:not(.gm-style-cc) > div, html[theme=king-media-dark] .gmnoprint:not(.gm-style-cc) > div, html[theme=prodigital-dark] .gmnoprint:not(.gm-style-cc) > div, html[theme=sharit-media-dark] .gmnoprint:not(.gm-style-cc) > div {
  background: var(--white) !important;
  border-radius: 6px !important;
}
html[theme=default-dark-telegram] .gm-control-active::before, html[theme=default-dark-minia] .gm-control-active::before, html[theme=default-dark] .gm-control-active::before, html[theme=default-new-year-dark] .gm-control-active::before, html[theme=default-spring-dark] .gm-control-active::before, html[theme=default-cosmonautics-day-dark] .gm-control-active::before, html[theme=default-aniversary5-dark] .gm-control-active::before, html[theme=king-media-dark] .gm-control-active::before, html[theme=prodigital-dark] .gm-control-active::before, html[theme=sharit-media-dark] .gm-control-active::before {
  color: white;
  font-weight: 400;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
html[theme=default-dark-telegram] .gm-control-active:first-child::before, html[theme=default-dark-minia] .gm-control-active:first-child::before, html[theme=default-dark] .gm-control-active:first-child::before, html[theme=default-new-year-dark] .gm-control-active:first-child::before, html[theme=default-spring-dark] .gm-control-active:first-child::before, html[theme=default-cosmonautics-day-dark] .gm-control-active:first-child::before, html[theme=default-aniversary5-dark] .gm-control-active:first-child::before, html[theme=king-media-dark] .gm-control-active:first-child::before, html[theme=prodigital-dark] .gm-control-active:first-child::before, html[theme=sharit-media-dark] .gm-control-active:first-child::before {
  content: "+";
  font-size: 24px;
}
html[theme=default-dark-telegram] .gm-control-active:last-child::before, html[theme=default-dark-minia] .gm-control-active:last-child::before, html[theme=default-dark] .gm-control-active:last-child::before, html[theme=default-new-year-dark] .gm-control-active:last-child::before, html[theme=default-spring-dark] .gm-control-active:last-child::before, html[theme=default-cosmonautics-day-dark] .gm-control-active:last-child::before, html[theme=default-aniversary5-dark] .gm-control-active:last-child::before, html[theme=king-media-dark] .gm-control-active:last-child::before, html[theme=prodigital-dark] .gm-control-active:last-child::before, html[theme=sharit-media-dark] .gm-control-active:last-child::before {
  content: "-";
  font-size: 32px;
}
html[theme=default-new-year] {
  --body-background: url(/img/background-new-year-light.d3bedb14.svg), var(--white);
  --body-background-linear: url(/img/background-new-year-light.d3bedb14.svg), var(--white);
  --auth-bckg: url(/img/background-new-year-light.d3bedb14.svg), #d3dff9;
  --step1-background-linear: transparent;
}
html[theme=default-spring] {
  --body-background: url(/img/background-spring-light.c4a56eec.svg), var(--white);
  --body-background-linear: url(/img/background-spring-light.c4a56eec.svg), var(--white);
  --auth-bckg: url(/img/background-spring-light.c4a56eec.svg), #e3f1ed;
  --step1-background-linear: url(/img/background-spring-light.c4a56eec.svg), var(--white);
}
html[theme=default-cosmonautics-day] {
  --body-background: url(/img/background-cosmonautics-day-light.a59f6ed9.svg), var(--white);
  --body-background-linear: url(/img/background-cosmonautics-day-light.a59f6ed9.svg), var(--white);
  --auth-bckg: url(/img/background-cosmonautics-day-light.a59f6ed9.svg), #f0eef8;
  --step1-background-linear: url(/img/background-cosmonautics-day-light.a59f6ed9.svg), var(--white);
}
html[theme=default-aniversary5] {
  --body-background: url(/img/background-anniversary-light.2018eeea.svg), var(--white);
  --body-background-linear: url(/img/background-anniversary-light.2018eeea.svg), var(--white);
  --auth-bckg: url(/img/background-anniversary-light.2018eeea.svg), #f0eef8;
  --step1-background-linear: url(/img/background-anniversary-light.2018eeea.svg), var(--white);
}
html[theme=default-dark-minia] {
  --pc-h: 237;
  --pc-s: 58%;
  --pc-l: 67%;
  --secondary-color-lightest: #4a5f74;
  --secondary-color-lighten: #647b90;
  --secondary-color-1100: #687d9a;
  --secondary-color: rgb(120, 144, 165);
  --secondary-color-darken: #9ab0c2;
  --gr-h: 232;
  --disabled-light: rgb(63, 66, 83);
  --disabled: rgb(103, 114, 123);
  --auth-bckg: #0d1e2e;
  --block-bckg: rgb(63, 71, 83);
  --block-bckg-rgb: 63, 71, 83;
  --shadow-rgb: 48, 56, 68;
  --pink-lighten: #fff1f5;
  --pink: rgb(228, 124, 156);
  --pink-dark: #f06982;
  --pink-darkest: #c91f3e;
  --pink-rgb: 228, 124, 156;
  --gray-bright-light: #eff0f2;
  --gray-bright: #beccda;
  --gray-bright-dark: rgb(113, 115, 123);
  --gray-bright-darken: rgb(44, 54, 60);
  --gray-bright-dark-rgb: 113, 115, 123;
  --secondary-color-rgb: 120, 144, 165;
}
html[theme=default-dark-telegram] {
  --pc-h: 206;
  --pc-s: 91%;
  --pc-l: 67%;
  --secondary-color-lightest: #4a5f74;
  --secondary-color-lighten: #647b90;
  --secondary-color-1100: #687d9a;
  --secondary-color: rgb(120, 144, 165);
  --secondary-color-darken: #9ab0c2;
  --gr-h: 232;
  --disabled-light: rgb(63, 66, 83);
  --disabled: rgb(103, 114, 123);
  --auth-bckg: #0d1e2e;
  --block-bckg: rgb(63, 71, 83);
  --block-bckg-rgb: 63, 71, 83;
  --shadow-rgb: 48, 56, 68;
  --pink-lighten: #fff1f5;
  --pink: rgb(228, 124, 156);
  --pink-dark: #f06982;
  --pink-darkest: #c91f3e;
  --pink-rgb: 228, 124, 156;
  --gray-bright-light: #eff0f2;
  --gray-bright: #beccda;
  --gray-bright-dark: rgb(113, 115, 123);
  --gray-bright-darken: rgb(44, 54, 60);
  --gray-bright-dark-rgb: 113, 115, 123;
  --secondary-color-rgb: 120, 144, 165;
}
html[theme=default-dark], html[theme=default-new-year-dark], html[theme=default-spring-dark], html[theme=default-aniversary5-dark], html[theme=default-cosmonautics-day-dark] {
  --pc-h: 209;
  --pc-s: 100%;
  --pc-l: 69%;
  --secondary-color-lightest: #4a5f74;
  --secondary-color-lighten: #647b90;
  --secondary-color-1100: #8eb3e7;
  --secondary-color: rgb(120, 144, 165);
  --secondary-color-darken: #9ab0c2;
  --gr-h: 222;
  --gr-s: 9%;
  --gr-l: 100%;
  --disabled-light: #32394b;
  --disabled: rgb(103, 114, 123);
  --auth-bckg: #0d1e2e;
  --block-bckg: rgb(63, 71, 83);
  --block-bckg-rgb: 63, 71, 83;
  --dark-block-bckg: #0d1e2e;
  --shadow-rgb: 48, 56, 68;
  --pink-lighten: #fff1f5;
  --pink: rgb(228, 124, 156);
  --pink-dark: #f06982;
  --pink-darkest: #c91f3e;
  --pink-rgb: 228, 124, 156;
  --gray-dark-always: #74778c;
  --black-light-true: rgb(46, 53, 69);
  --gray-bright-light: #eff0f2;
  --gray-bright: #beccda;
  --gray-bright-dark: rgb(113, 115, 123);
  --gray-bright-darken: rgb(44, 54, 60);
  --gray-bright-dark-rgb: 113, 115, 123;
  --secondary-color-rgb: 120, 144, 165;
}
html[theme=default-new-year-dark] {
  --body-background: url(/img/background-new-year-dark.1bfc69b0.svg), #222831;
  --body-background-linear: url(/img/background-new-year-dark.1bfc69b0.svg), #222831;
  --auth-bckg: url(/img/background-new-year-dark.1bfc69b0.svg), #0d1e2e;
  --step1-background-linear: transparent;
}
html[theme=default-spring-dark] {
  --body-background: url(/img/background-spring-dark.c4a56eec.svg), #222831;
  --body-background-linear: url(/img/background-spring-dark.c4a56eec.svg), #222831;
  --auth-bckg: url(/img/background-spring-dark.c4a56eec.svg), #0d1e2e;
  --step1-background-linear: url(/img/background-spring-dark.c4a56eec.svg), #222831;
}
html[theme=default-cosmonautics-day-dark] {
  --body-background: url(/img/background-cosmonautics-day-dark.a59f6ed9.svg), #222831;
  --body-background-linear: url(/img/background-cosmonautics-day-dark.a59f6ed9.svg), #222831;
  --auth-bckg: url(/img/background-cosmonautics-day-dark.a59f6ed9.svg), #0d1e2e;
  --step1-background-linear: url(/img/background-cosmonautics-day-dark.a59f6ed9.svg), #222831;
}
html[theme=default-aniversary5-dark] {
  --body-background: url(/img/background-anniversary-dark.ed61d21d.svg), #222831;
  --body-background-linear: url(/img/background-anniversary-dark.ed61d21d.svg), #222831;
  --auth-bckg: url(/img/background-anniversary-dark.ed61d21d.svg), #0d1e2e;
  --step1-background-linear: url(/img/background-anniversary-dark.ed61d21d.svg), #222831;
}
html[theme=king-media] {
  --pc-h: 38;
  --pc-s: 59%;
  --pc-l: 50%;
  --secondary-color-lightest: rgb(220, 210, 194);
  --secondary-color-lighten: rgb(196, 186, 169);
  --secondary-color-1100: #a09379;
  --secondary-color: rgb(170, 160, 143);
  --secondary-color-darken: rgb(150, 137, 115);
  --gray-lightest-light: #fafafa;
  --gray-lightest: rgb(244, 242, 242);
  --gray-lightest-lightish: rgb(244, 246, 248);
  --gray-lightest-darkish: #f1eee9;
  --gray-light: rgb(221, 220, 220);
  --gray: rgb(177, 175, 167);
  --gray-darkish: rgb(182, 178, 178);
  --gray-dark: rgb(136, 133, 134);
  --black-light: rgb(61, 58, 58);
  --black: rgb(36, 35, 35);
  --gray-bright-light: #747e8c;
  --gray-bright: #beccda;
  --gray-bright-dark: rgb(190, 204, 218);
  --gray-bright-darken: rgb(236, 239, 242);
  --gray-bright-dark-rgb: 190, 204, 218;
  --secondary-color-rgb: 170, 160, 143;
}
html[theme=king-media-dark] {
  --pc-h: 34;
  --pc-s: 86%;
  --pc-l: 73%;
  --secondary-color-lightest: rgb(220, 210, 194);
  --secondary-color-lighten: rgb(196, 186, 169);
  --secondary-color-1100: #ccbea2;
  --secondary-color: rgb(153, 118, 85);
  --secondary-color-darken: rgb(150, 137, 115);
  --gr-h: 0;
  --gr-s: 0%;
  --gr-l: 80%;
  --disabled-light: rgb(63, 75, 83);
  --disabled: rgb(103, 114, 123);
  --auth-bckg: #0d1e2e;
  --dark-block-bckg: #0d1e2e;
  --shadow-rgb: 48, 56, 68;
  --pink-lighten: #fff1f5;
  --pink: rgb(228, 124, 156);
  --pink-dark: #f06982;
  --pink-darkest: #c91f3e;
  --pink-rgb: 228, 124, 156;
  --gray-bright-light: #eff0f2;
  --gray-bright: #beccda;
  --gray-bright-dark: rgb(113, 115, 123);
  --gray-bright-darken: rgb(44, 54, 60);
  --gray-bright-dark-rgb: 41, 45, 48;
  --secondary-color-rgb: 148, 107, 68;
}
html[theme=sber-marketing] {
  --pc-h: 256;
  --pc-s: 91%;
  --pc-l: 52%;
  --gr-h: 240;
  --primary-color-linear-light: linear-gradient(35.96deg, rgb(139, 85, 255) 19.7%, rgb(195, 255, 240) 94.07%);
  --primary-color-linear: linear-gradient(35.96deg, rgb(102, 36, 250) 19.7%, rgb(61, 251, 205) 94.07%);
  --primary-color-linear-dark: linear-gradient(35.96deg, rgb(88, 34, 206) 19.7%, rgb(44, 206, 165) 94.07%);
  --primary-color-linear-lightish-dark: linear-gradient(35.96deg, rgb(184, 156, 245) 19.7%, rgb(205, 252, 240) 94.07%);
  --primary-color-linear-darkest: linear-gradient(35.96deg, rgb(76, 32, 172) 19.7%, rgb(40, 167, 135) 94.07%);
  --disabled-light: #f3f1f8;
  --disabled: #9e9eb2;
}
html[theme=krugom-digital] {
  --pc-h: 192;
  --pc-s: 98%;
  --pc-l: 42%;
  --primary-color-1005: hsl(var(--pc-h), var(--pc-s), calc(var(--pc-l) - 8.4%));
  --primary-color-1010: hsl(var(--pc-h), calc(var(--pc-s) - 20%), calc(var(--pc-l) + 31%));
  --primary-color-1020: hsl(var(--pc-h), calc(var(--pc-s) - 25%), calc(var(--pc-l) + 47%));
  --primary-color-lighten: hsl(var(--pc-h), calc(var(--pc-s) - 20%), calc(var(--pc-l) + 43%));
  --primary-color-1200: hsl(calc(var(--pc-h) + 7), calc(var(--pc-s) - 20%), calc(var(--pc-l) + 30%));
  --gr-h: 192;
  --disabled-light: #f3f1f8;
  --disabled: #9e9eb2;
  --auth-bckg: rgb(151, 195, 216);
}
html[theme=get-ad-light] {
  --pc-h: 356;
  --gr-h: 356;
  --auth-bckg: #e9e8e8;
}
html[theme=prodigital] {
  --pc-h: 265;
  --pc-s: 79%;
  --pc-l: 54%;
  --gr-h: 45;
  --gr-s: 30%;
  --gr-l: 79%;
  --disabled-light: #f3f1f8;
  --disabled: #9e9eb2;
  --input-bckg: #ece9e2;
  --auth-bckg: #ede3fd;
  --gray-bright-dark: rgb(178, 199, 207);
}
html[theme=prodigital-dark] {
  --pc-h: 55;
  --pc-s: 100%;
  --pc-l: 57%;
  --secondary-color-lightest: rgb(220, 210, 194);
  --secondary-color-lighten: rgb(196, 186, 169);
  --secondary-color-1100: #ccbea2;
  --secondary-color: rgb(153, 118, 85);
  --secondary-color-darken: rgb(150, 137, 115);
  --gr-h: 232;
  --gr-s: 17%;
  --gr-l: 100%;
  --black-light-true: var(--gray-light);
  --disabled-light: rgb(34, 31, 66);
  --disabled: rgb(103, 114, 123);
  --body-background-linear: linear-gradient(0deg, hsl(261, 59%, 30%) 0%, rgba(25, 20, 65, 1) 30%, rgb(10, 7, 35) 100%);
  --step1-background-linear: rgb(28, 23, 68);
  --step1-background-piece-linear: rgb(28, 23, 68);
  --input-bckg: #0a0f2d;
  --dropdown-bckg: #0a0f2d;
  --auth-bckg: #1b1e33;
  --dark-block-bckg: #0d1e2e;
  --block-bckg: rgb(66, 63, 83);
  --shadow-rgb: 63, 71, 83;
  --gray-bright-light: #eff0f2;
  --gray-bright: #beccda;
  --gray-bright-dark: rgb(113, 115, 123);
  --gray-bright-darken: rgb(44, 54, 60);
  --gray-bright-dark-rgb: 41, 45, 48;
  --secondary-color-rgb: 148, 107, 68;
}
html[theme=prodigital] {
  --pc-h: 265;
  --pc-s: 79%;
  --pc-l: 54%;
  --gr-h: 45;
  --gr-s: 30%;
  --gr-l: 79%;
  --disabled-light: #f3f1f8;
  --disabled: #9e9eb2;
  --input-bckg: #ece9e2;
  --auth-bckg: #ede3fd;
  --gray-bright-dark: rgb(178, 199, 207);
}
html[theme=sharit-media-dark] {
  --pc-h: 7;
  --pc-s: 75%;
  --pc-l: 55%;
  --secondary-color-lightest: rgb(220, 210, 194);
  --secondary-color-lighten: rgb(196, 186, 169);
  --secondary-color-1100: #9a8968;
  --secondary-color: rgb(153, 118, 85);
  --secondary-color-darken: rgb(150, 137, 115);
  --gr-h: 0;
  --gr-s: 1%;
  --gr-l: 84%;
  --auth-bckg: #252525;
  --white-button: white;
  --gray-bright-light: #eff0f2;
  --gray-bright: #beccda;
  --gray-bright-dark: rgb(113, 115, 123);
  --gray-bright-darken: rgb(44, 54, 60);
  --gray-bright-dark-rgb: 41, 45, 48;
  --secondary-color-rgb: 148, 107, 68;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!../node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!../node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!../node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/App.vue?vue&type=style&index=1&id=7ba5bd90&lang=scss&scoped=true ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Фирменная тень
 */
/**
 * Тень, одинаковая со всех сторон (фирменная тень больше снизу)
 */
/**
 * Легкая тень
 */
/**
 * Радиус кнопок
 */
/**
 * Радиус инпутов
 */
/**
 * Стили плейсхолдеров
 */
/**
* Отключить выделение текста
*/
/**
 * Для маленького десктопа
 */
/**
 * Для маленького лептопа
 */
/**
 * Для маленького планшета
 */
/**
 * Для мобильника
 */
/**
 * Замена hsla, потому что в scss оно не работает с css variables
 * Пример использования: aplha($primary-color, 0.5);
 * https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables
 */
/**
 * Для функции alpha-hsl
 */
/**
 * Важно для работы функции alpha-hsl
 * Нужно объявлять css variables через этот миксин, чтоб aplha работал
 * Пример использования: @include defineColorHSL(--primary-color, 220, 89%, 56%);
 *
 * $forTest - "пустой" параметр, чтобы разработчик мог передать туда цвет в норм виде и 
 * IDE с помощью цветового плагина показала ему этот цвет, чтоб удобно изменять цвет и всё такое
 */
html[data-v-7ba5bd90] {
  --approved-color: var(--green);
  --approved-color-dark: var(--green-dark);
  --rejected-color: var(--pink-dark);
  --rejected-color-dark: var(--pink-darkest);
  --pending-color: var(--primary-color-light);
}

/**
 * Фирменная тень
 */
/**
 * Отключить выделение текста
 */
/**
 * Карта статусов макетов, новая версия кода (06.12.2021)
 */
/**
 * Статусы макетов, новая версия кода (19.01.2022)
 * Это миксин, который подключен глобально (в App.vue). Отлично подходит для статусов-плашек.
 * - Как использовать: просто написать в html-коде название нужного класса, он подтянет все
 * стили.
 * - ooh-cs = oohdesk creative status (оно юзается глобально, поэтому
 * нужно уникальное название класса)
 * - у каждого класса можно написать .not-active и .has-actions
 */
/**
 * Статусы кампаний
 */
.dooh[data-v-7ba5bd90] {
  width: 100%;
  height: 100%;
}
.dooh__top-progress[data-v-7ba5bd90] {
  z-index: var(--z-index-top-loader) !important;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!../node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!../node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!../node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!../common/src/plugins/Alert/Alert.vue?vue&type=style&index=0&id=4e14b50e&lang=scss&scoped=true ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Фирменная тень
 */
/**
 * Тень, одинаковая со всех сторон (фирменная тень больше снизу)
 */
/**
 * Легкая тень
 */
/**
 * Радиус кнопок
 */
/**
 * Радиус инпутов
 */
/**
 * Стили плейсхолдеров
 */
/**
* Отключить выделение текста
*/
/**
 * Для маленького десктопа
 */
/**
 * Для маленького лептопа
 */
/**
 * Для маленького планшета
 */
/**
 * Для мобильника
 */
/**
 * Замена hsla, потому что в scss оно не работает с css variables
 * Пример использования: aplha($primary-color, 0.5);
 * https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables
 */
/**
 * Для функции alpha-hsl
 */
/**
 * Важно для работы функции alpha-hsl
 * Нужно объявлять css variables через этот миксин, чтоб aplha работал
 * Пример использования: @include defineColorHSL(--primary-color, 220, 89%, 56%);
 *
 * $forTest - "пустой" параметр, чтобы разработчик мог передать туда цвет в норм виде и 
 * IDE с помощью цветового плагина показала ему этот цвет, чтоб удобно изменять цвет и всё такое
 */
html[data-v-4e14b50e] {
  --approved-color: var(--green);
  --approved-color-dark: var(--green-dark);
  --rejected-color: var(--pink-dark);
  --rejected-color-dark: var(--pink-darkest);
  --pending-color: var(--primary-color-light);
}

/**
 * Фирменная тень
 */
/**
 * Отключить выделение текста
 */
/**
 * Карта статусов макетов, новая версия кода (06.12.2021)
 */
/**
 * Статусы макетов, новая версия кода (19.01.2022)
 * Это миксин, который подключен глобально (в App.vue). Отлично подходит для статусов-плашек.
 * - Как использовать: просто написать в html-коде название нужного класса, он подтянет все
 * стили.
 * - ooh-cs = oohdesk creative status (оно юзается глобально, поэтому
 * нужно уникальное название класса)
 * - у каждого класса можно написать .not-active и .has-actions
 */
/**
 * Статусы кампаний
 */
.slide-fade-enter-active[data-v-4e14b50e],
.slide-fade-leave-active[data-v-4e14b50e] {
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}
.slide-fade-enter[data-v-4e14b50e],
.slide-fade-leave-to[data-v-4e14b50e] {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  opacity: 0;
}
.ui-alert[data-v-4e14b50e] {
  max-height: 50%;
  overflow-y: auto;
  margin: auto;
  position: fixed;
  top: 90px;
  left: 0;
  right: 0;
  z-index: var(--z-index-alert);
  outline: 0;
  border: none;
  border-radius: 5px;
  -webkit-box-shadow: none;
          box-shadow: none;
  width: 25vw;
  min-width: 320px;
  max-width: 500px;
  padding: 15px;
  background: var(--block-bckg);
  color: var(--black-light);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  /* Темы */
}
.ui-alert[data-v-4e14b50e] {
  -webkit-box-shadow: 0 4px 28px hsla(var(--black-light-h), var(--black-light-s), var(--black-light-l), 0.05), 0 4px 10px hsla(var(--black-light-h), var(--black-light-s), var(--black-light-l), 0.05);
          box-shadow: 0 4px 28px hsla(var(--black-light-h), var(--black-light-s), var(--black-light-l), 0.05), 0 4px 10px hsla(var(--black-light-h), var(--black-light-s), var(--black-light-l), 0.05);
}
.ui-alert__close > *[data-v-4e14b50e] {
  margin-top: -8px;
  margin-right: -8px;
}
.ui-alert__icon[data-v-4e14b50e] {
  min-width: 60px;
  height: 60px;
  border-radius: 5px;
  margin-right: 15px;
  color: var(--white);
  font-size: 35px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.ui-alert__content[data-v-4e14b50e] {
  text-align: left;
  font-size: 14px;
  word-break: break-word;
  margin-right: 20px;
}
.ui-alert__title[data-v-4e14b50e] {
  font-weight: bold;
  font-size: 16px;
  margin-top: -4px;
  margin-bottom: 4px;
}
.ui-alert.default .ui-alert__icon[data-v-4e14b50e] {
  background: var(--primary-color);
}
.ui-alert.default .ui-alert__title[data-v-4e14b50e] {
  color: var(--primary-color);
}
.ui-alert.error .ui-alert__icon[data-v-4e14b50e] {
  background: #e65651;
}
.ui-alert.error .ui-alert__title[data-v-4e14b50e] {
  color: #e65651;
}
.ui-alert.warning .ui-alert__icon[data-v-4e14b50e] {
  background: var(--orange);
}
.ui-alert.warning .ui-alert__title[data-v-4e14b50e] {
  color: var(--orange);
}
.ui-alert.success .ui-alert__icon[data-v-4e14b50e] {
  background: var(--green);
}
.ui-alert.success .ui-alert__title[data-v-4e14b50e] {
  color: var(--green);
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!../node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!../node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!../node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!../common/src/components/ui/Button.vue?vue&type=style&index=0&id=0c6ad076&lang=scss&scoped=true ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Фирменная тень
 */
/**
 * Тень, одинаковая со всех сторон (фирменная тень больше снизу)
 */
/**
 * Легкая тень
 */
/**
 * Радиус кнопок
 */
/**
 * Радиус инпутов
 */
/**
 * Стили плейсхолдеров
 */
/**
* Отключить выделение текста
*/
/**
 * Для маленького десктопа
 */
/**
 * Для маленького лептопа
 */
/**
 * Для маленького планшета
 */
/**
 * Для мобильника
 */
/**
 * Замена hsla, потому что в scss оно не работает с css variables
 * Пример использования: aplha($primary-color, 0.5);
 * https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables
 */
/**
 * Для функции alpha-hsl
 */
/**
 * Важно для работы функции alpha-hsl
 * Нужно объявлять css variables через этот миксин, чтоб aplha работал
 * Пример использования: @include defineColorHSL(--primary-color, 220, 89%, 56%);
 *
 * $forTest - "пустой" параметр, чтобы разработчик мог передать туда цвет в норм виде и 
 * IDE с помощью цветового плагина показала ему этот цвет, чтоб удобно изменять цвет и всё такое
 */
html[data-v-0c6ad076] {
  --approved-color: var(--green);
  --approved-color-dark: var(--green-dark);
  --rejected-color: var(--pink-dark);
  --rejected-color-dark: var(--pink-darkest);
  --pending-color: var(--primary-color-light);
}

/**
 * Фирменная тень
 */
/**
 * Отключить выделение текста
 */
/**
 * Карта статусов макетов, новая версия кода (06.12.2021)
 */
/**
 * Статусы макетов, новая версия кода (19.01.2022)
 * Это миксин, который подключен глобально (в App.vue). Отлично подходит для статусов-плашек.
 * - Как использовать: просто написать в html-коде название нужного класса, он подтянет все
 * стили.
 * - ooh-cs = oohdesk creative status (оно юзается глобально, поэтому
 * нужно уникальное название класса)
 * - у каждого класса можно написать .not-active и .has-actions
 */
/**
 * Статусы кампаний
 */
.ui-button[data-v-0c6ad076] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  border: 1px solid transparent;
  outline: 0;
  text-align: center;
  vertical-align: middle;
  line-height: 110%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  overflow: visible !important;
  width: var(--width);
  height: var(--height);
  min-height: var(--height);
  font-size: var(--fontSize);
  /* Анимация загрузки*/
  /* Темы, меняющие кусочек основных стилей */
  /* Темы */
}
.ui-button[data-v-0c6ad076]:hover {
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media (pointer: coarse) {
.ui-button[data-v-0c6ad076] {
    width: var(--touchWidth, var(--width));
    height: var(--touchHeight, var(--height));
    font-size: var(--touchFontSize, var(--fontSize));
}
}
.ui-button__loader[data-v-0c6ad076] {
  margin: 0 10px 0 0;
}
.ui-button[loading][data-v-0c6ad076] {
  pointer-events: none;
}
.ui-button[data-v-0c6ad076]:not(.without-uppercase) {
  text-transform: uppercase;
}
.ui-button[data-v-0c6ad076]:not(.without-bold) {
  font-weight: bold;
}
.ui-button[data-v-0c6ad076]:not(.without-padding) {
  padding: 0 10px;
}
.ui-button[data-v-0c6ad076]:not(.without-nowrap) {
  white-space: nowrap;
}
.ui-button[data-v-0c6ad076]:not(.without-border-radius) {
  border-radius: 5px;
}
.ui-button.without-border-color[data-v-0c6ad076] {
  border-color: inherit;
}
.ui-button.transparent[data-v-0c6ad076] {
  background: transparent;
  color: inherit;
}
@media (pointer: fine) {
.ui-button.transparent[data-v-0c6ad076]:hover {
    background: var(--primary-color-light);
}
}
.ui-button.transparent[data-v-0c6ad076]::before {
  background: transparent;
}
.ui-button.transparent-gray[data-v-0c6ad076] {
  background: transparent;
  color: var(--gray-darkish);
}
@media (pointer: fine) {
.ui-button.transparent-gray[data-v-0c6ad076]:not([disabled]):hover {
    color: var(--gray-dark);
}
}
.ui-button.transparent-gray[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: hsla(var(--gray-h), var(--gray-s), var(--gray-l), 0.8);
}
.ui-button.transparent-gray[data-v-0c6ad076]::before {
  background: transparent;
}
.ui-button.transparent-primary[data-v-0c6ad076] {
  background: transparent;
  color: var(--primary-color);
}
@media (pointer: fine) {
.ui-button.transparent-primary[data-v-0c6ad076]:not([disabled]):hover {
    color: var(--primary-color-darkest);
}
}
.ui-button.transparent-primary[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: var(--primary-color-1005);
}
.ui-button.transparent-primary[data-v-0c6ad076]::before {
  background: transparent;
}
.ui-button.transparent-danger[data-v-0c6ad076] {
  background: transparent;
  color: var(--pink-dark);
}
@media (pointer: fine) {
.ui-button.transparent-danger[data-v-0c6ad076]:not([disabled]):hover {
    color: var(--pink-darkest);
}
}
.ui-button.transparent-danger[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: var(--pink);
}
.ui-button.transparent-danger[data-v-0c6ad076]::before {
  background: transparent;
}
@media (pointer: fine) {
.ui-button.white[data-v-0c6ad076]:not([disabled]):hover {
    color: var(--gray-dark);
}
}
.ui-button.white[data-v-0c6ad076]:not([active]) {
  background: var(--white);
  color: var(--black-light);
}
@media (pointer: fine) {
.ui-button.white[data-v-0c6ad076]:not([active]):hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
}
.ui-button.white[active][data-v-0c6ad076]:not([disabled]) {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: var(--primary-color-1020);
}
@media (pointer: fine) {
.ui-button.white[active][data-v-0c6ad076]:not([disabled]):hover {
    background: var(--primary-color-1010);
}
}
.ui-button.white[disabled][data-v-0c6ad076] {
  pointer-events: none;
}
.ui-button.white[disabled][active][data-v-0c6ad076] {
  color: var(--gray);
  border-color: var(--gray);
}
.ui-button.white[disabled][data-v-0c6ad076]:not([active]) {
  color: var(--gray);
  background: var(--gray-lightest);
}
.ui-button.gray[data-v-0c6ad076] {
  background: var(--gray-dark);
  color: var(--white);
}
@media (pointer: fine) {
.ui-button.gray[data-v-0c6ad076]:hover {
    background: var(--black-light);
}
}
.ui-button.gray[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: var(--gray-light);
  background: var(--gray-lightest);
}
.ui-button.gray-lightest[data-v-0c6ad076] {
  background-color: var(--gray-lightest-lightish);
  color: var(--black-light);
}
@media (pointer: fine) {
.ui-button.gray-lightest[data-v-0c6ad076]:not([disabled]):hover {
    background: var(--gray-lightest-darkish);
}
}
.ui-button.gray-lightest[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: var(--gray-light);
}
.ui-button.gray-light[data-v-0c6ad076] {
  background: var(--gray);
  color: var(--white);
}
@media (pointer: fine) {
.ui-button.gray-light[data-v-0c6ad076]:not([disabled]):hover {
    background: var(--gray-dark);
}
}
.ui-button.gray-light[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: var(--gray-light);
  background: var(--gray-lightest);
}
.ui-button.light[data-v-0c6ad076] {
  background: var(--gray-light);
  color: var(--gray-dark);
}
@media (pointer: fine) {
.ui-button.light[data-v-0c6ad076]:not([disabled]):hover {
    background: var(--gray);
    color: var(--black-light);
}
}
.ui-button.light[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: var(--gray-darkish);
  background: var(--gray-light);
}
.ui-button.light-input[data-v-0c6ad076] {
  background: var(--input-bckg);
  color: var(--gray-dark);
}
@media (pointer: fine) {
.ui-button.light-input[data-v-0c6ad076]:not([disabled]):hover {
    background: var(--gray);
    color: var(--black-light);
}
}
.ui-button.light-input[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: var(--gray-darkish);
  background: var(--gray-light);
}
.ui-button.light-white[data-v-0c6ad076] {
  background: var(--gray-light);
  color: var(--white);
}
@media (pointer: fine) {
.ui-button.light-white[data-v-0c6ad076]:not([disabled]):hover {
    background: var(--gray);
}
}
.ui-button.light-white[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: var(--gray-darkish);
  background: var(--gray-lightest);
}
.ui-button.light-dark[data-v-0c6ad076] {
  background: var(--gray);
}
@media (pointer: fine) {
.ui-button.light-dark[data-v-0c6ad076]:not([disabled]):hover {
    background: var(--gray-darkish);
}
}
.ui-button.light-dark[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: var(--gray-darkish);
  background: var(--gray-light);
}
.ui-button.light-blue[data-v-0c6ad076] {
  color: var(--white);
  background: var(--primary-color-light);
  background: var(--primary-color-linear-light);
}
@media (pointer: fine) {
.ui-button.light-blue[data-v-0c6ad076]:not([disabled]):hover {
    background: var(--primary-color);
    background: var(--primary-color-linear);
}
}
.ui-button.light-blue[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: var(--gray-darkish);
  background: var(--gray-lightest);
}
.ui-button.blue[data-v-0c6ad076] {
  color: var(--primary-color-dark);
  background: var(--primary-color-lighten);
}
@media (pointer: fine) {
.ui-button.blue[data-v-0c6ad076]:not([disabled]):hover {
    background: var(--primary-color-1010);
    color: var(--primary-color-darkest);
}
}
.ui-button.blue[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: var(--primary-color-1005);
  background: var(--primary-color-1300);
}
.ui-button.primary[data-v-0c6ad076] {
  color: var(--white-button);
  background: var(--primary-color);
}
@media (pointer: fine) {
.ui-button.primary[data-v-0c6ad076]:not([disabled]):hover {
    background: var(--primary-color-dark);
}
}
.ui-button.primary[disabled][data-v-0c6ad076] {
  pointer-events: none;
  background: var(--primary-color-1010);
}
.ui-button.primary-linear[data-v-0c6ad076] {
  color: var(--white-button);
  background: var(--primary-color);
  background: var(--primary-color-linear);
  border: 0px solid transparent;
}
@media (pointer: fine) {
.ui-button.primary-linear[data-v-0c6ad076]:not([disabled]):hover {
    background: var(--primary-color-dark);
    background: var(--primary-color-linear-dark);
}
}
.ui-button.primary-linear[disabled][data-v-0c6ad076] {
  pointer-events: none;
  background: var(--primary-color-1010);
  background: var(--primary-color-linear-lightish-dark);
}
.ui-button.primary-inverse[data-v-0c6ad076] {
  color: var(--primary-color);
  background: var(--white);
}
@media (pointer: fine) {
.ui-button.primary-inverse[data-v-0c6ad076]:not([disabled]):hover {
    background: var(--primary-color-1020);
}
}
.ui-button.primary-inverse[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: var(--primary-color-light);
  background: var(--gray-light);
}
.ui-button.secondary[data-v-0c6ad076] {
  color: var(--white);
  background: var(--secondary-color);
}
@media (pointer: fine) {
.ui-button.secondary[data-v-0c6ad076]:not([disabled]):hover {
    background: var(--secondary-color-darken);
}
}
.ui-button.secondary[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: var(--white-opacity-06);
  background: var(--secondary-color-lighten);
}
.ui-button.dark[data-v-0c6ad076] {
  background: var(--black-light);
  color: var(--white);
}
@media (pointer: fine) {
.ui-button.dark[data-v-0c6ad076]:not([disabled]):hover {
    background: hsla(var(--black-light-h), var(--black-light-s), var(--black-light-l), 0.8);
}
}
.ui-button.dark[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: var(--white-opacity-06);
  background: hsla(var(--black-light-h), var(--black-light-s), var(--black-light-l), 0.5);
}
.ui-button.success[data-v-0c6ad076] {
  background: var(--green);
  color: var(--white);
}
@media (pointer: fine) {
.ui-button.success[data-v-0c6ad076]:not([disabled]):hover {
    background: var(--green-darkish);
}
}
.ui-button.success[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: hsla(var(--white-h), var(--white-s), var(--white-l), 0.7);
  background: var(--green-lightish);
}
.ui-button.success-outline[data-v-0c6ad076] {
  background: var(--white);
  color: var(--green);
  border-color: var(--green);
}
@media (pointer: fine) {
.ui-button.success-outline[data-v-0c6ad076]:not([disabled]):hover {
    border-color: var(--green-darkish);
    color: var(--green-darkish);
}
}
.ui-button.success-outline[disabled][data-v-0c6ad076] {
  pointer-events: none;
  border-color: var(--green-lightish);
  color: var(--green-lightish);
  background: hsla(var(--white-h), var(--white-s), var(--white-l), 0.7);
}
.ui-button.warn[data-v-0c6ad076] {
  background: var(--orange);
  color: var(--white);
}
@media (pointer: fine) {
.ui-button.warn[data-v-0c6ad076]:not([disabled]):hover {
    background: var(--orange-dark);
}
}
.ui-button.warn[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: var(--white-opacity-06);
  background: rgba(var(--orange), 0.5);
}
.ui-button.danger[data-v-0c6ad076] {
  background: var(--pink-dark);
  color: var(--white);
}
@media (pointer: fine) {
.ui-button.danger[data-v-0c6ad076]:not([disabled]):hover {
    background: var(--pink-darkest);
}
}
.ui-button.danger[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: var(--white-opacity-06);
  background: var(--pink-light);
}
.ui-button.pink[data-v-0c6ad076] {
  background: var(--pink-dark);
  color: var(--white);
}
@media (pointer: fine) {
.ui-button.pink[data-v-0c6ad076]:not([disabled]):hover {
    background: var(--pink-darkest);
}
}
.ui-button.pink[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: var(--white-opacity-06);
  background: rgba(246, 137, 159, 0.5);
}
.ui-button.pink-light[data-v-0c6ad076] {
  background: var(--pink-lighten);
  color: var(--pink-dark);
}
@media (pointer: fine) {
.ui-button.pink-light[data-v-0c6ad076]:not([disabled]):hover {
    background: var(--pink-light);
}
}
.ui-button.pink-light[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: var(--white-opacity-06);
  background: rgba(246, 137, 159, 0.5);
}
.ui-button.pink-outline[data-v-0c6ad076] {
  background: var(--white);
  border-color: var(--pink-dark);
  color: var(--pink-dark);
}
@media (pointer: fine) {
.ui-button.pink-outline[data-v-0c6ad076]:not([disabled]):hover {
    border-color: var(--pink-darkest);
    color: var(--pink-darkest);
}
}
.ui-button.pink-outline[disabled][data-v-0c6ad076] {
  pointer-events: none;
  border-color: rgba(246, 137, 159, 0.5);
  color: rgba(246, 137, 159, 0.5);
}
.ui-button.checkbox[data-v-0c6ad076] {
  background: var(--gray-lightest);
  color: var(--black-light);
  font-weight: normal;
}
@media (pointer: fine) {
.ui-button.checkbox[data-v-0c6ad076]:not([disabled]):hover {
    border-color: var(--primary-color);
}
}
.ui-button.checkbox[active][data-v-0c6ad076] {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: var(--primary-color-1020);
}
@media (pointer: fine) {
.ui-button.checkbox[active][data-v-0c6ad076]:not([disabled]):hover {
    background: var(--primary-color-1010);
}
}
.ui-button.checkbox[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: var(--gray-light);
  background: hsla(var(--gray-lightest-h), var(--gray-lightest-s), var(--gray-lightest-l), 0.7);
  border-color: transparent;
}
.ui-button.checkbox-outline[data-v-0c6ad076] {
  background: var(--gray-lightest);
  color: var(--gray-darkish);
  border: 1px solid var(--gray-darkish);
  font-weight: normal;
}
@media (pointer: fine) {
.ui-button.checkbox-outline[data-v-0c6ad076]:not([disabled]):hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}
}
.ui-button.checkbox-outline[active][data-v-0c6ad076] {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: var(--primary-color-1020);
}
@media (pointer: fine) {
.ui-button.checkbox-outline[active][data-v-0c6ad076]:not([disabled]):hover {
    background: var(--primary-color-1010);
}
}
.ui-button.checkbox-outline[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: var(--gray-light);
  background: hsla(var(--gray-lightest-h), var(--gray-lightest-s), var(--gray-lightest-l), 0.7);
  border-color: transparent;
}
.ui-button.checkbox2[data-v-0c6ad076] {
  background: var(--gray-lightest-darkish);
  color: var(--black-light);
  font-weight: normal;
}
@media (pointer: fine) {
.ui-button.checkbox2[data-v-0c6ad076]:not([disabled]):hover {
    border-color: var(--primary-color);
}
}
.ui-button.checkbox2[active][data-v-0c6ad076] {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: var(--primary-color-1020);
}
@media (pointer: fine) {
.ui-button.checkbox2[active][data-v-0c6ad076]:not([disabled]):hover {
    background: var(--primary-color-1300);
}
}
.ui-button.checkbox2[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: var(--gray-light);
  background: hsla(var(--gray-lightest-h), var(--gray-lightest-s), var(--gray-lightest-l), 0.7);
  border-color: transparent;
}
.ui-button.checkbox3[data-v-0c6ad076] {
  background: var(--gray-light);
  color: var(--black-light);
  font-weight: normal;
}
@media (pointer: fine) {
.ui-button.checkbox3[data-v-0c6ad076]:not([disabled]):hover {
    border-color: var(--primary-color);
}
}
.ui-button.checkbox3[active][data-v-0c6ad076] {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: var(--primary-color-1020);
}
@media (pointer: fine) {
.ui-button.checkbox3[active][data-v-0c6ad076]:not([disabled]):hover {
    background: var(--primary-color-1010);
}
}
.ui-button.checkbox3[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: var(--white);
  background: hsla(var(--gray-lightest-h), var(--gray-lightest-s), var(--gray-lightest-l), 0.7);
  border-color: transparent;
}
@media (pointer: fine) {
.ui-button.checkbox-outline-light[data-v-0c6ad076]:hover {
    cursor: pointer;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
}
.ui-button.checkbox-outline-light[data-v-0c6ad076]:not([active]) {
  background: var(--white);
  border-color: var(--gray);
  color: var(--gray);
}
@media (pointer: fine) {
.ui-button.checkbox-outline-light[data-v-0c6ad076]:not([active]):hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
}
.ui-button.checkbox-outline-light[active][data-v-0c6ad076]:not([disabled]) {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: var(--primary-color-1300);
}
@media (pointer: fine) {
.ui-button.checkbox-outline-light[active][data-v-0c6ad076]:not([disabled]):hover {
    background: var(--white);
}
}
.ui-button.checkbox-outline-light[disabled][data-v-0c6ad076] {
  pointer-events: none;
  border-color: var(--gray-lightest);
  color: var(--gray-lightest);
}
.ui-button.toggle[data-v-0c6ad076] {
  background: var(--white);
  color: var(--black);
}
@media (pointer: fine) {
.ui-button.toggle[data-v-0c6ad076]:not([disabled]):hover {
    background: var(--gray);
}
}
.ui-button.toggle[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: var(--gray);
  background: var(--white);
  border-color: var(--gray);
}
.ui-button.toggle[active][data-v-0c6ad076] {
  color: var(--white);
  background: var(--primary-color);
}
@media (pointer: fine) {
.ui-button.toggle[active][data-v-0c6ad076]:not([disabled]):hover {
    background: var(--primary-color-light);
}
}
.ui-button.input[data-v-0c6ad076] {
  background: var(--gray-lightest);
  color: var(--black-light);
}
@media (pointer: fine) {
.ui-button.input[data-v-0c6ad076]:not([disabled]):hover {
    border-color: var(--primary-color);
}
}
.ui-button.input[disabled][data-v-0c6ad076] {
  pointer-events: none;
  color: var(--disabled);
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!../node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!../node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!../node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!../common/src/components/ui/Close.vue?vue&type=style&index=0&id=0351e235&lang=scss&scoped=true ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Фирменная тень
 */
/**
 * Тень, одинаковая со всех сторон (фирменная тень больше снизу)
 */
/**
 * Легкая тень
 */
/**
 * Радиус кнопок
 */
/**
 * Радиус инпутов
 */
/**
 * Стили плейсхолдеров
 */
/**
* Отключить выделение текста
*/
/**
 * Для маленького десктопа
 */
/**
 * Для маленького лептопа
 */
/**
 * Для маленького планшета
 */
/**
 * Для мобильника
 */
/**
 * Замена hsla, потому что в scss оно не работает с css variables
 * Пример использования: aplha($primary-color, 0.5);
 * https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables
 */
/**
 * Для функции alpha-hsl
 */
/**
 * Важно для работы функции alpha-hsl
 * Нужно объявлять css variables через этот миксин, чтоб aplha работал
 * Пример использования: @include defineColorHSL(--primary-color, 220, 89%, 56%);
 *
 * $forTest - "пустой" параметр, чтобы разработчик мог передать туда цвет в норм виде и 
 * IDE с помощью цветового плагина показала ему этот цвет, чтоб удобно изменять цвет и всё такое
 */
html[data-v-0351e235] {
  --approved-color: var(--green);
  --approved-color-dark: var(--green-dark);
  --rejected-color: var(--pink-dark);
  --rejected-color-dark: var(--pink-darkest);
  --pending-color: var(--primary-color-light);
}

/**
 * Фирменная тень
 */
/**
 * Отключить выделение текста
 */
/**
 * Карта статусов макетов, новая версия кода (06.12.2021)
 */
/**
 * Статусы макетов, новая версия кода (19.01.2022)
 * Это миксин, который подключен глобально (в App.vue). Отлично подходит для статусов-плашек.
 * - Как использовать: просто написать в html-коде название нужного класса, он подтянет все
 * стили.
 * - ooh-cs = oohdesk creative status (оно юзается глобально, поэтому
 * нужно уникальное название класса)
 * - у каждого класса можно написать .not-active и .has-actions
 */
/**
 * Статусы кампаний
 */
.ui-close[data-v-0351e235] {
  position: absolute;
  right: 23px;
  top: 20px;
}
.ui-close.small[data-v-0351e235] {
  height: 25px;
  width: 20px;
  min-width: 20px;
}
.ui-close.small .ui-close__one[data-v-0351e235],
.ui-close.small .ui-close__two[data-v-0351e235] {
  position: relative;
  content: "";
  height: 17px;
  width: 2px;
  background: var(--gray-darkish);
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
.ui-close.small .ui-close__one[data-v-0351e235] {
  right: -13px;
  top: -2px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.ui-close.small .ui-close__two[data-v-0351e235] {
  right: -13px;
  top: -19px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.ui-close.normal[data-v-0351e235] {
  height: 30px;
  width: 30px;
}
.ui-close.normal .ui-close__one[data-v-0351e235],
.ui-close.normal .ui-close__two[data-v-0351e235] {
  position: relative;
  content: "";
  height: 26px;
  width: 4px;
  background: var(--gray-dark);
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
.ui-close.normal .ui-close__one[data-v-0351e235] {
  right: -13px;
  top: 1px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.ui-close.normal .ui-close__two[data-v-0351e235] {
  right: -13px;
  top: -25px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.ui-close.large[data-v-0351e235] {
  height: 40px;
  width: 40px;
}
.ui-close.large .ui-close__one[data-v-0351e235],
.ui-close.large .ui-close__two[data-v-0351e235] {
  position: relative;
  content: "";
  height: 26px;
  width: 4px;
  background: var(--gray-dark);
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
.ui-close.large .ui-close__one[data-v-0351e235] {
  right: -13px;
  top: 1px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.ui-close.large .ui-close__two[data-v-0351e235] {
  right: -13px;
  top: -25px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.ui-close[data-v-0351e235]:hover {
  cursor: pointer;
}
.ui-close:hover .ui-close__one[data-v-0351e235] {
  background: var(--black-light) !important;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}
.ui-close:hover .ui-close__two[data-v-0351e235] {
  background: var(--black-light) !important;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!../node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!../node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!../node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!../common/src/plugins/Dialog/Dialog.vue?vue&type=style&index=0&id=bd27b482&lang=scss&scoped=true ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Фирменная тень
 */
/**
 * Тень, одинаковая со всех сторон (фирменная тень больше снизу)
 */
/**
 * Легкая тень
 */
/**
 * Радиус кнопок
 */
/**
 * Радиус инпутов
 */
/**
 * Стили плейсхолдеров
 */
/**
* Отключить выделение текста
*/
/**
 * Для маленького десктопа
 */
/**
 * Для маленького лептопа
 */
/**
 * Для маленького планшета
 */
/**
 * Для мобильника
 */
/**
 * Замена hsla, потому что в scss оно не работает с css variables
 * Пример использования: aplha($primary-color, 0.5);
 * https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables
 */
/**
 * Для функции alpha-hsl
 */
/**
 * Важно для работы функции alpha-hsl
 * Нужно объявлять css variables через этот миксин, чтоб aplha работал
 * Пример использования: @include defineColorHSL(--primary-color, 220, 89%, 56%);
 *
 * $forTest - "пустой" параметр, чтобы разработчик мог передать туда цвет в норм виде и 
 * IDE с помощью цветового плагина показала ему этот цвет, чтоб удобно изменять цвет и всё такое
 */
html[data-v-bd27b482] {
  --approved-color: var(--green);
  --approved-color-dark: var(--green-dark);
  --rejected-color: var(--pink-dark);
  --rejected-color-dark: var(--pink-darkest);
  --pending-color: var(--primary-color-light);
}

/**
 * Фирменная тень
 */
/**
 * Отключить выделение текста
 */
/**
 * Карта статусов макетов, новая версия кода (06.12.2021)
 */
/**
 * Статусы макетов, новая версия кода (19.01.2022)
 * Это миксин, который подключен глобально (в App.vue). Отлично подходит для статусов-плашек.
 * - Как использовать: просто написать в html-коде название нужного класса, он подтянет все
 * стили.
 * - ooh-cs = oohdesk creative status (оно юзается глобально, поэтому
 * нужно уникальное название класса)
 * - у каждого класса можно написать .not-active и .has-actions
 */
/**
 * Статусы кампаний
 */
.modal-background[data-v-bd27b482] {
  z-index: var(--z-index-dialog);
}
[data-v-bd27b482] .v--modal {
  background: var(--white) !important;
}
.dialog div[data-v-bd27b482] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  word-break: break-word;
}
.dialog .dialog-flex[data-v-bd27b482] {
  width: 100%;
  height: 100%;
}
.dialog .dialog-content[data-v-bd27b482] {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  width: 100%;
  padding: 30px;
  padding-bottom: 15px;
  font-size: 14px;
  word-break: break-word;
}
.dialog .dialog-c-title[data-v-bd27b482] {
  margin: 0 10px 25px 0;
  font-size: 26px;
  word-break: break-word;
  line-height: 110%;
}
@media (max-width: 500px) {
.dialog .dialog-c-title[data-v-bd27b482] {
    font-size: 22px;
}
}
.dialog .dialog-buttons[data-v-bd27b482] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  width: 100%;
  padding: 30px;
}
.dialog .dialog-buttons > * + *[data-v-bd27b482] {
  margin-left: 20px;
}
.dialog .dialog-buttons-none[data-v-bd27b482] {
  width: 100%;
  padding-bottom: 15px;
}