/*

    #844CE6 - фиолетовый основной
    #25CBC5 - дополнительный, цвет success
    #EA4D43 — красный

    Оттенки серого:
    #ffffff (white) — белый
    #a8a8a8 — серый светлый
    #676767 — серый темный
    #c0c0c0 — черный

    Фоны:
    #f5f5f5 — общий фон
    #f8f8f8 — фон меню и обводка на белом фоне
    #f6f6f6 — фоны полей форм
    #fafafa — фон активного текстового поля формы

    Редкие дополнительные оттенки:
    #303030 — используется только во всплывающих алертах

 */

.clear {
    clear : both;
}

body, html {
    background  : #efefef;
    font-family : Rubik, sans-serif;
    font-size   : 14px;
    color       : #0c0c0c;
    height      : 100%;
    margin      : 0 auto;
}

.b-body {
    min-width       : 1040px;
}

.b-body--svg-bg {
    background      : #0c0c0c url("/assets/my.creatium.io/74fc721fc4b5-login-bg-2.svg");
    background-size : cover;
}

body.b-body--clear {
    min-width : 0 !important;
}

hr {
    border: 1px solid rgba(151, 151, 151, 0.15);
}

b {
    font-weight : 500;
}

.b-admin-mode-panel {
    height      : 25px;
    background  : red;
    text-align  : center;
    line-height : 25px;
    color       : white;
    z-index     : 102010;
}

.b-wrapper {
    position       : relative;
    display        : flex;
    height         : 100%;
    flex-direction : column;
}

.b-content {
    flex      : 1 0 auto;
    padding   : 40px 40px 100px;
    max-width : 1800px;
    width     : calc(100% - 80px);
    margin    : 0 auto;
}

a {
    color  : #0c0c0c;
    cursor : pointer;
}

a:hover {
    color : #844ce6;
}

.b-link {
    border-bottom : 1px solid #0c0c0c;
}

.b-link:hover {
    color         : #844ce6;
    border-bottom : 1px solid #844ce6;
}

h1 {
    font-family   : "museo-sans", sans-serif;
    font-weight   : 500;
    font-size     : 22px;
}

h2 {
    font-family   : "museo-sans", sans-serif;
    font-size     : 20px;
    /*font-weight   : 300;*/
    margin-bottom : 20px;
    margin-top    : 30px;
}

h3 {
    font-family   : "museo-sans", sans-serif;
    font-size     : 18px;
    margin-bottom : 20px;
}

p {
    line-height   : 1.6;
    margin-bottom : 20px;
}

.b-bright-text {
    line-height : 1.6;
    max-width   : 800px;
}

    .b-bright-text--grey {
        color : #676767;
    }

    .b-bright-text a {
        text-decoration: underline;
    }

/* Быстрое центрование. Если нежны еще стили, то рефакторить в другой стиль! */
.fast-centring {
    display     : flex;
    align-items : center;
}

/* Отступы */

.gap--5  {height :  5px;} /* div.gap--10 */
.gap--8  {height :  8px;}
.gap--10 {height : 10px;}
.gap--12 {height : 12px;}
.gap--13 {height : 13px;}
.gap--14 {height : 14px;}
.gap--15 {height : 15px;}
.gap--17 {height : 17px;}
.gap--20 {height : 20px;}
.gap--22 {height : 22px;}
.gap--25 {height : 25px;}
.gap--30 {height : 30px;}
.gap--35 {height : 35px;}
.gap--40 {height : 40px;}
.gap--50 {height : 50px;}
.gap--55 {height : 55px;}
.gap--60 {height : 60px;}
.gap--65 {height : 65px;}
.gap--80 {height : 80px;}

.pit--5  {display : inline-block; width: 5px;}  /* span.pit--5 */
.pit--3  {display : inline-block; width: 3px;}
.pit--10 {display : inline-block; width: 10px;}
.pit--12 {display : inline-block; width: 12px;}
.pit--20 {display : inline-block; width: 20px;}

/* иконка со стрелкой влево для перхеода назад */

.b-go-back {
    font-size      : 24px;
    margin-right   : 23px;
    color          : #0c0c0c;
    vertical-align : middle;
}

.b-go-back:hover {
    color : #844ce6;
}



/* Глобальные иконки */

.b-icon-right-arrow {
    display        : inline-block;
    vertical-align : middle;
    font-size      : 25px;
    margin-left    : 5px;
    margin-top     : -4px;
}

    .b-icon-right-arrow--far {
        margin-left : 12px;
    }

    .b-icon-right-arrow--menu {
        font-size    : 16px;
        margin-top   : -2px;
        margin-left  : auto;
        padding-left : 5px;
    }

    .b-icon-right-arrow--faq {
        color: #844CE6;
        padding-left: 10px;
    }

    .b-icon-right-arrow--page {
        font-size   : 20px;
    }

.b-outer-link-icon {
    font-size   : 9px;
    margin-left : 5px;
}

/* Флеш-сообщения */

.b-alert {
    font-weight   : 300;
    display       : flex;
    position      : fixed;
    bottom        : 10px;
    min-width     : 100px;
    max-width     : 580px;
    padding       : 22px 27px 21px 22px;
    margin        : 10px 40px;
    border-radius : 4px;
    background    : #303030;
    color         : white;
    z-index       : 10101010;
}

.b-alert--inline {
    position : static;
    display  : inline-block;
    margin   : 10px 0;
}

.b-alert--success {
    border-left : 10px solid #25cbc5;
}

.b-alert--danger,
.b-alert--error {
    border-left : 10px solid #EA4D43;
}

.b-alert__icon {
    width     : 16px;
    font-size : 11px;
    margin    : 5px 11px 0 7px;
}

.b-alert__icon--success {
    color : #25cbc5;
}

.b-alert__icon--danger,
.b-alert__icon--error {
    color : #EA4D43;
}

.b-alert__message {
    flex        : 1;
    line-height : 1.6;
}

.b-alert__message a,
.b-alert__message a:visited {
    color         : #ababab;
    border-bottom : 1px solid #ababab;
}

.b-alert__message a:hover,
.b-alert__message a:focus {
    color         : #a37ee4;
    border-bottom : 1px solid #a37ee4;
}

.b-alert__closer {
    position      : absolute;
    top           : 20px;
    right         : -11px;
    box-sizing    : border-box;
    width         : 24px;
    height        : 24px;
    padding       : 0 0 0 1px;
    text-align    : center;
    line-height   : 27px;
    color         : #d6d6d6;
    background    : rgba(24, 24, 24, 0.7);
    font-size     : 9px;
    border-radius : 50%;
    cursor        : pointer;
}


/* Grid */

ul.pagination {
    font-family : "museo-sans", sans-serif;
    display     : flex;
    align-items : center;
    margin-top  : 25px;
}

ul.pagination li {
    margin : 0 10px;
}

ul.pagination li.active {
    display         : flex;
    align-items     : center;
    justify-content : center;
    box-sizing      : border-box;
    margin          : 0 10px;
    background      : #0c0c0c;
    color           : white;
    border-radius   : 100%;
    width           : 21px;
    height          : 21px;
}

ul.pagination li.disabled {
    margin     : 0 15px;
    visibility : hidden;
}

ul.pagination li.first {flex : 1;}
ul.pagination li.last {flex : 1; text-align : right;}

ul.pagination li.first span,
ul.pagination li.last span {
    font-size      : 26px;
    vertical-align : middle;
}

ul.pagination li a {
    font-size : 12px;
    color     : #676767;
    padding   : 5px;
}

ul.pagination li a:hover {
    color: #0c0c0c;
}

ul.pagination li.active a {
    font-size     : 11px;
    color         : white;
    border-radius : 100%;
}


.summary {
    padding    : 10px;
    margin-top : 10px;
    text-align : center;
    color      : #a8a8a8;
    font-size  : 10px;
}

/* AB test */
.b-page-variant-title-icon {
    font-family    : "museo-sans", sans-serif;
    font-size      : 14px;
    width          : 8px;
    padding        : 4px 9px;
    margin-right   : 4px;
    border-radius  : 100%;
    background     : #844ce6;
    color          : white;
    display        : inline-block;
    vertical-align : top;
    text-transform : uppercase;
}

.b-page-variant-title-icon--order {
    vertical-align : middle;
}

/*noinspection CssOverwrittenProperties*/
.b-redactor {
    position   : fixed;
    top        : 0;
    bottom     : 0;
    left       : 0;
    right      : 0;
    width      : 100%;
    width      : 100vw;
    height     : 100%;
    height     : 100vh;
    background : #e8e8e8 url("/assets/my.creatium.io/f59b12f17208-iframe-bg-animated.gif") center no-repeat;
    z-index    : 1010101010;
}

.b-redactor--visible {
    z-index    : 2020202020;
}

.b-redactor--loaded {
    background : #ffffff
}

/* Grid */

.grid-view {
    display       : table;
    width         : 100%;
    box-sizing    : border-box;
    background    : #dfdfdf;
    padding       : 0 10px 10px;
    border-radius : 8px;
    margin        : 40px 0 0;
}

.b-grid-table {
    width        : 100%;
    table-layout : fixed;
}

    .b-grid-table--layout_auto {
        table-layout: auto;
    }

    .b-grid-table--order {
        table-layout: auto;
    }

    .b-grid-table thead {
        background : #dfdfdf;
    }

    .b-grid-table th {
        font-family : "museo-sans", sans-serif;
        font-weight : 500;
        font-size   : 18px;
        text-align  : left;
        color       : #0c0c0c;
        padding     : 25px 27px 23px;
        white-space : nowrap;
    }

    .b-grid-table tbody tr {
        border-top  : 1px solid #e9e9e9;
    }

    .b-grid-table td {
        background     : white;
        min-height     : 47px;
        padding        : 17px 20px 13px;
        white-space    : normal;
        vertical-align : middle;
        word-break     : break-all;
        overflow       : hidden;
    }

    .b-grid-table--order td:nth-child(1),
    .b-grid-table--order td:nth-child(2),
    .b-grid-table--order td:nth-last-child(1),
    .b-grid-table--order td:nth-last-child(2) {
        white-space : nowrap;
    }

    .b-grid-table--balance th:nth-last-child(1),
    .b-grid-table--balance th:nth-last-child(2),
    .b-grid-table--balance td:nth-last-child(1),
    .b-grid-table--balance td:nth-last-child(2) {
        text-align : right;
    }

    .b-grid-table--referrals {
        min-width : 1030px;
    }

    .b-grid-table--referrals td:first-child {
        color : #676767;
    }

    .b-grid-table--referrals td:last-child {
        position   : relative;
        text-align : center;
        overflow   : visible;
    }

    .b-grid-table--referral-change {}

    .b-grid-table--referral-change td:first-child {
        color : #676767;
    }

    .b-grid-table--referral-change td:nth-child(2) {
        white-space: nowrap;
    }

    .b-grid-table--referral-change th:nth-child(3),
    .b-grid-table--referral-change td:nth-child(3) {
        text-align : right;
    }



    .b-grid-table--transfer td:first-child {
        font-weight : 500;
        font-size   : 18px;
    }


    .b-grid__datetime {
        font-size : 14px;
        color     : #676767;
    }

    .b-grid-table tr:first-child td:first-child { border-top-left-radius     : 4px; }
    .b-grid-table tr:first-child td:last-child  { border-top-right-radius    : 4px; }
    .b-grid-table tr:last-child  td:first-child { border-bottom-left-radius  : 4px; }
    .b-grid-table tr:last-child  td:last-child  { border-bottom-right-radius : 4px; }

    .b-grid-table-disabled-tr {
        border-top: 1px solid white !important;
    }

        .b-grid-table-disabled-tr td {
            background-color: rgba(234, 234, 234, 1);
        }

/* Блок в ячейке таблицы */
.b-cell-item {
    white-space : nowrap;
}

    .b-cell-item + .b-cell-item {margin-top : 10px;}

    .b-cell-item--wrap {
        white-space : inherit;
        word-break  : break-word;
    }

    .b-cell-item--grey {
        color : #676767;
    }

    .b-cell-item__label {
        display      : inline-block;
        font-size    : 12px;
        color        : #676767;
        min-width    : 65px;
        margin-right : 5px;
    }

.b-badge {
    display       : inline-block;
    background    : #0c0c0c;
    padding       : 4px 15px;
    font-size     : 12px;
    font-family   : Rubik, sans-serif;
    color         : white;
    border-radius : 4px;
}

    .b-badge--error {
        background : #EA4D43;
    }

/*** Всплывающая подсказка ***/

.b-help {
    display       : inline-block;
    position      : relative;
    width         : 30px;
    height        : 30px;
    margin        : 25px 25px 25px auto;
    border-radius : 100%;
    font-family   : "museo-sans", sans-serif;
    color         : white;
    background    : #cecece;
    text-align    : center;
    line-height   : 30px;
    font-size     : 14px;
    cursor        : help;
    padding       : 0.5px 0 0 0.5px;
    box-sizing    : border-box;
}

    .b-help--inline {
        margin : 0 10px;
    }

    .b-help--line-text-input {
        margin : 25px;
    }

    .b-help--referrals {
        position : absolute;
        right    : -40px;
        top      : 0;
    }

    .b-help:hover {
        color      : white;
        background : #844ce6;
    }

    .b-help__tooltip, .b-help__tooltip--left {
        position      : absolute;
        width         : 215px;
        min-height    : 40px;
        padding       : 28px 105px 28px 30px;
        border-radius : 4px;
        font-size     : 12px;
        line-height   : 20px;
        text-align    : left;
        white-space   : pre-line;
        word-break    : normal;
        background    : #343434;
        color         : #a8a8a8;
        z-index       : 20;
    }

    .b-help__tooltip--left {
        padding       : 28px 30px 28px 60px;
    }

@media (max-width: 600px) {
    .b-help {
        display : none;
    }
}


/*** Pop UP ***/

.b-pop-up-wrap {
    position        : fixed;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background      : rgba(0, 0, 0, 0.28);
    z-index         : 999;
}

.b-pop-up {
    width         : 550px;
    padding       : 40px;
    border-radius : 8px;
    text-align    : center;
    background    : white;
    box-shadow    : 6px 8px 8px rgba(0, 0, 0, 0.07);
    z-index       : 101020;
}

    .b-pop-up__header {
        margin-bottom : 40px;
        font-size     : 80px;
        line-height   : 1;
    }

    .b-pop-up__description {
        margin-bottom : 40px;
        font-size     : 20px;
        line-height   : 1.5;
    }


/** Кнопка удаления **/

.b-delete {
    color        : #ea4d43;
    margin-left  : auto;
    margin-right : 25px;
    min-width    : 130px;
    display      : inline-block;
    font-size    : 16px;
}

    .b-delete--margined {
        margin-left  : 20px;
        margin-right : 0;
    }

    .b-delete__x {
        font-size    : 12px;
        font-weight  : bold;
        margin-right : 8px;
    }

    .b-delete--narrow {
        min-width: 120px;
    }

/** SKED ROW **/

.b-row {
    display         : flex;
    align-items     : center;
    width           : 100%;
    height          : 80px;
    min-width       : 1050px;
    margin-bottom   : 20px;
    background      : white;
    border-radius   : 4px;
    white-space     : nowrap;
    justify-content : space-between;
}

    .b-row--draggable {
        cursor: move;
    }

    .b-row--scenario {
        min-height: 80px;
        min-width: 975px;
        height: auto;
        padding-left: 20px
    }

.b-row-cell {
    display     : flex;
    align-items : center;
    font-family : "museo-sans", sans-serif;
    font-weight : 500;
    font-size   : 18px;
    margin      : 0 20px;
}

    .b-row-cell--no_mrr {
        margin-right: 0;
    }

    .b-row-cell--no_mrl {
        margin-left: 0;
    }

    .b-row-cell--wide {
        flex : 1;
    }

    .b-row-cell__name {
        font-family   : 'MuseoSansCyrl', sans-serif;
        font-size     : 18px;
        line-height   : 21px;
        color         : #0C0C0C;
        margin-bottom : 0;
        max-width: 800px;
        min-width: 400px;
        overflow: hidden;
        white-space     : normal;
    }

    .b-row-cell__type {
        font-family   : 'Rubik', sans-serif;
        font-style    : normal;
        font-weight   : normal;
        font-size     : 12px;
        line-height   : 23px;
        color         : #939393;
        margin-bottom : 0;
    }

    .b-row-cell__logo
    {
        margin-right : 20px;
        width: 40px;
    }

    .b-row-cell__logo-image {
        max-width  : 40px;
        max-height : 40px;
    }

    .b-cell__badge {
        margin-right : 20px;
        min-width    : 10px;
    }

    .b-row-cell__status-name {
        font-family : 'Rubik', sans-serif;
        color       : #939393;
        font-size   : 14px;
        margin      : 0 30px 0 10px;
        font-weight : normal;
    }

    .b-row-cell__quantity-number{
        color : #444444;
    }

    .b-row-cell__quantity {
        color                   : #444444;
        text-decoration         : underline;
        text-decoration-style   : dashed;
        text-underline-position : under;
        cursor                  : pointer;
    }

    .b-row-cell__statuses{
        display     : flex;
        align-items : center;
    }

    .b-row-cell__status {
        width         : 9px;
        height        : 9px;
        border-radius : 50%;
        display       : inline-block;
    }

    .b-row-cell__status--active {
        background : #25CBC5;
    }

    .b-row-cell__status--inactive {
        background : #EA4D43;
    }

/*** END SKED ROW ***/

/*** SLIDER CHECKBOX ***/
.b-disable {
    position       : relative;
    display        : inline-block;
    border-radius  : 18px;
    width          : 71px;
    height         : 36px;
    vertical-align : middle;
    margin         : 0 10px 0 0;
    transition     : all 1s ease;
}

    .b-disable__active {
        background : #844CE6;
    }

    .b-disable__disabled {
        background : #E8E8E8;
    }

    .b-disable__toggle {
        display       : inline-block;
        position      : absolute;
        width         : 30px;
        height        : 30px;
        border-radius : 50%;
        transition    : all 0.5s ease-in;
    }

    .b-disable__toggle-active {
        right      : 3px;
        top        : 3px;
        background : #fff;
    }

    .b-disable__toggle-disabled {
        right      : auto;
        top        : 3px;
        background : #A8A8A8;
        left       : 3px;
    }
/*** END SLIDER CHECKBOX ***/

/*** BLOCK CONNECTED ***/
.b-connected {
    position      : absolute;
    background    : #0c0c0c;
    padding       : 22px;
    top           : 63px;
    right         : 85px;
    border-radius : 4px;
    box-shadow    : 0 23px 21px -16px rgba(0, 0, 0, 0.1);
    opacity       : 0.95;
    font-size     : 14px;
    z-index       : 20;

}
    .b-connected--position{
        top     : 50px;
        right   : -115px;
        display : none;
        width   : 300px;
    }

    .b-connected__link {
        color : #939393;
    }

    .b-connected__link--white{
        color: white;
    }

    .b-connected--to_right{
        top       : 50px;
        right     : 290px;
        display   : none;
        max-width : 300px;
    }

    .b-connected__arrow {
        position      : absolute;
        display       : inline-block;
        width         : 0;
        height        : 0;
        border-left   : 8px solid transparent;
        border-right  : 8px solid transparent;
        border-bottom : 8px solid white;
        border-bottom : 8px solid #0c0c0c;
        top           : -8px;
        right         : auto;
        left          : 220px;
    }

    .b-connected__name {
        overflow-y  : auto;
        max-height  : 400px;
        width       : 400px;
        font-family : 'Rubik', sans-serif;
        color       : white;
        padding     : 0 10px;
        white-space : normal;
    }

    .b-connected__name-item {
        margin : 5px 0;
    }

/*** END BLOCK CONNECTED PAGES ***/

/*** RECOMMENDED BLOCK ***/
.b-recommended {
    margin-top : 50px;
}

    .b-recommended__item {
        display         : flex;
        align-items     : center;
        justify-content : space-between;
        padding         : 5px 15px;

    }

    .b-recommended__item__description {
        max-width : 50%;
    }

    .b-recommended__item__caption {
        display     : flex;
        align-items : center;
        width: 220px;
    }

    .b-recommended__item__image-wrapper {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
        padding: 5px;
        border-radius: 4px;
        margin-right: 10px;
    }

    .b-recommended__item__image{
        max-width: 100%;
    }

    .b-recommended__item__caption-title {
        margin-left : 10px;
        font-family : 'MuseoSansCyrl', sans-serif;
        font-size   : 18px;
        line-height : 21px;
        color       : #0C0C0C;
    }

    .b-recommended__item__description {
        font-family    : 'Rubik', sans-serif;
        font-style     : normal;
        font-weight    : normal;
        font-size      : 12px;
        vertical-align : middle;
        color          : #0C0C0C;
        mix-blend-mode : normal;
        opacity        : 0.5;
        text-align     : left;
        width          : 50%;
        line-height    : 1.5;
    }

    .b-recommended__header {
        display : flex;
        padding : 5px 15px;
    }

    .b-recommended__header-title {
        font-family : 'MuseoSansCyrl', sans-serif;
        font-size   : 18px;
        line-height : 21px;
    }

/*** END RECOMMENDED BLOCK ***/

/*** SETTINGS MENU ***/
.b-page-settings-menu {
    display     : inline-block;
    margin-left : 94px;
}

    .b-page-settings-menu__li {
        display : inline-block;
    }

    .b-page-settings-menu__a {
        color         : #0c0c0c;
        padding       : 5px 12px;
        margin        : 0 7px;
        border-radius : 42px;
    }

    .b-page-settings-menu__a:hover {
    }

    .b-page-settings-menu__a--active,
    .b-page-settings-menu__a--active:hover {
        background : #0c0c0c;
        color      : white;
    }
/*** END SETTINGS MENU ***/

/*** UPGRADE BANNER ***/
.b-upgrade {
    display       : flex;
    width         : 600px;
    min-height    : 360px;
    background    : white;
    border-radius : 10px;
    overflow      : hidden;
}

    .b-upgrade__panel_left {
        max-width  : 256px;
        padding    : 35px;
        color      : white;
        background : #844ce6 url("/assets/my.creatium.io/94178cfdd6fa-upgrade-bg.svg");
    }

    .b-upgrade__panel_right {
        padding : 35px 0 0 35px;
        width   : 240px;
    }

.b-upgrade-h {
    font-family : "museo-sans", sans-serif;
    font-weight : 300;
    font-size   : 24px;
    line-height : 26px;
}

.b-upgrade-h-sub {
    font-family : "museo-sans", sans-serif;
    font-weight : 300;
    font-size   : 14px;
    line-height : 18px;
}

.b-upgrade-h-new {
    display       : inline-block;
    color         : white;
    background    : #25cbc5;
    border-radius : 2px;
    padding       : 5px 15px;
}

.b-upgrade-button {
    display       : inline-block;
    color         : #844ce6;
    padding       : 18px 30px;
    background    : white;
    border-radius : 56px;
}

    .b-upgrade-button:hover, .b-upgrade-button:focus {
        background   : #EFEFEF;
    }

.b-upgrade-features {
    white-space : nowrap;
    line-height : 24.5px;
    font-weight : 300;
    max-height  : 217px;
    max-width   : 240px;
    overflow    : auto;
}

.b-upgrade-features a {
    color : #844ce6;
    text-decoration : underline;
}

    .b-upgrade-features a:hover, .b-upgrade-features a:focus {
        color : #6720e2;
    }

/*** END UPGRADE BANNER ***/

/*** CUSTOM ***/
.b-plugin-list, .b-plugin_edition_site, .b-integration-create {
    opacity : 0;
}

/*** Exports ***/
.b-exports_item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background:  #fff;
    padding: 10px;
    border-bottom: 1px solid #e5e5e5;
}
.b-exports_title{
    font-size : 20px;
}
.b-exports_head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.b-exports_item_column{
    width: 25%;
    text-align: center;
}