.b-all-cards {
    position       : relative;
    display        : flex;
    flex-wrap      : wrap;
    align-content  : start;
    margin         : auto;
    overflow       : auto;
    padding-bottom : 20px;
}

    .b-all-cards--ajax {
        margin      : 0 0 20px 20px;
        padding-top : 20px;
        height      : calc(100% - 113px);
    }

    .b-all-cards--stretched {
        align-content : stretch;
        margin-right  : -20px;
    }

    .b-all-cards--integration {
        overflow : visible;
    }

    .b-all-cards--no-flex {
        display: block;
    }

.b-card-breaker {
    flex : 0 0 100%;
}

.b-card-hr {
    margin: 0;
    margin-bottom: 11px;
    border: 3px solid black;
    width: calc(100% - 22px);
    opacity: 0.2;
}

.b-card-wrap {
    margin : 0 20px 20px 0;
}

    .b-card-wrap--stretched {
        flex      : 1;
        min-width : 343px;
    }

    .b-card-wrap--inline {
        display : inline-block;
    }

.b-card {
    position       : relative;
    display        : flex;
    flex-direction : column;
    width          : 307px;
    height         : 182px;
    min-width      : 300px;
    background     : #fff;
    border-radius  : 8px;
}

    .b-card:hover {
        box-shadow : 0 12px 20px rgba(0, 0, 0, 0.07);
        cursor     : pointer;
    }

    .b-card--site {
        border     : 2px solid #e8e8e8;
        /*box-sizing : border-box; куделинское */
    }

    .b-card--big {
        width  : 412px;
        height : 221px;
    }

    .b-card--tiny {
        width  : 198px;
        height : 100px;
    }

    .b-card--small {
        width     : auto;
        min-width : 343px;
        height    : 134px;
    }

    .b-card--small:hover {
        box-shadow: none !important;
        cursor: default !important;
    }

    .b-card--site:hover {
        border : 2px solid #844ce6;
    }

    .b-card--active,
    .b-card--active:hover {
        border:none;
    }

    .b-card--active,
    .b-card--active .b-card-page-count,
    .b-card--active .b-card-name__title,
    .b-card--active .b-card-name__link,
    .b-card--active .b-card-name__url {
        background : #844ce6;
        color      : white;
    }

    .b-card--next-site-price {
        background    : none;
        border        : 1px solid #676767;
        border-radius : 8px;
        font-family   : 'Museo Sans Cyrl', sans-serif;
        font-size     : 18px;
        line-height   : 26px;
        box-sizing    : border-box;
    }


    .b-card--new {
        width         : 303px;
        height        : 178px;
        background    : none;
        border        : 2px dashed #676767;
        border-radius : 11px;
        text-align    : center;
        color         : #676767;
    }

    .b-card--new:hover {
        background : #676767;
        color      : white;
        cursor     : pointer;
    }

    .b-card--folder {
        box-shadow : 5px 7px 0 rgba(255, 255, 255, 0.6), 10px 14px 0 rgba(255, 255, 255, 0.3);
    }

    .b-card--new-folder {
        width         : 303px;
        height        : 178px;
        background    : #f6f6f6;
        border        : 2px solid #676767;
        border-radius : 11px;
        text-align    : center;
        color         : #676767;
    }

    .b-card--new-folder:hover {
        background : #676767;
        color      : white;
        cursor     : pointer;
    }

    .b-card--ab-test {
        height : 142px;
        border-radius  : 8px 8px 0 0 ;
    }

    .b-card__new-icon {
        font-size  : 60px;
        margin-top : 40px;
    }

    .b-card__new-caption {
        font-size   : 18px;
        margin      : 30px auto 0;
        max-height  : 54px;
        max-width   : 257px;
        overflow    : hidden;
        white-space : nowrap;
        text-overflow: ellipsis;
    }

    .b-card__folder-name {
        font-size   : 18px;
        margin      : 20px auto 0;
        max-height  : 54px;
        max-width   : 257px;
        overflow    : hidden;
        white-space : nowrap;
    }

    .b-card__folder-info {
        font-size   : 12px;
        margin      : 8px auto 0;
        max-height  : 54px;
        max-width   : 257px;
        overflow    : hidden;
        white-space : nowrap;
    }

    .b-card__row {
    }

    .b-card__row--top {
        position    : relative;
        display     : flex;
        align-items : center;
        margin      : 17px 0 0 0;
        height      : 24px;
    }

    .b-card__row--margined {
        margin : 20px 25px 0;
    }

    .b-card__row--bottom {
        margin : auto 25px 25px;
    }

    .b-card__row--bottom-pay {
        margin : auto 25px 10px;
    }

    .b-card__row--bottom-ab-test {
        margin : auto 25px 17px;
    }

    .b-card:hover .b-card-site-badge { background : #844CE6; }

    .b-card--active .b-card-site-badge,
    .b-card--active:hover .b-card-site-badge { background : #FFAF46; }

.b-card-site-badge {
    width         : 8px;
    height        : 8px;
    border-radius : 100%;
    background    : #e8e8e8;
    margin-left   : 25px;
    margin-top    : -2px;
}

.b-card-publish-status {
    font-size   : 12px;
    margin-left : 20px;
}

.b-card-page-count {
    margin-left  : auto;
    margin-right : 20px;
    font-size    : 12px;
    color        : #5d5d5d;
}

.b-card-name {
    display        : flex;
    flex-direction : column;
    max-height     : 89px;
    width          : 100%;
}

    .b-card-name__title,
    .b-card-name__link {
        flex-grow     : 1;
        display       : block;
        font-family   : "museo-sans", sans-serif;
        font-weight   : 300;
        font-size     : 22px;
        color         : #0c0c0c;
        max-height    : 54px;
        padding-top   : 0;
        max-width     : 257px;
        overflow      : hidden;
        margin-bottom : 10px;
    }

    .b-card-name__title--unpublished {
        color : #676767;
    }

.b-card-name__title--hidden,
.b-card-name__link--hidden {
    display : none;
}

.b-card-name__link {
    color : #844ce6;
}

    .b-card-name__url {
        flex-basis  : 15px;
        color       : #676767;
        font-size   : 12px;
        padding-top : 2px;
        white-space : nowrap;
        overflow    : hidden;
        text-overflow: ellipsis;
    }

    .b-card-name__url--half {
        width       : 50%;
        float       : left;
    }

    .b-card-name__url--services {
        max-width : 410px;
    }

/* From pages.php*/

.b-card-page-icon-home {
    width : 28px;
}

.b-card-page-stat {
    display     : flex;
    align-items : center;
    margin-left : 24px;
    color       : #844ce6;
    font-size   : 12px;
    opacity     : 0.8;
}

    .b-card-page-stat__icon {
        font-size   : 10px;
        width        : 14px;
        margin-right : 9px;
        color        : #0c0c0c;
    }

    .b-card-page-stat__number {
        min-width : 20px;
    }

.b-card-page-menu-button {
    margin-left  : auto;
    margin-right : 25px;
}

    .b-card-page-menu-button__icon {
        width : 22px;
    }

.b-card-page-menu {
    display       : none;
    border        : 1px solid #E8E8E8;
    border-radius : 4px;
    position      : absolute;
    right         : 11px;
    top           : -12px;
    padding       : 6px 0;
    background    : white;
    box-shadow    : 0 3px 5px rgba(0, 0, 0, 0.04);
    z-index       : 500;
}

    .b-card-page-menu__a {
        display   : block;
        padding   : 6px 13px;
        font-size : 12px;
        color     : #676767;
    }

    .b-card-page-menu__a:hover {
        color      : #844ce6;
        background : #f8f8f8;
    }



/* AB tests */

.b-page-variants {
    display    : flex;
    background : #f6f6f6;
    border-radius  : 0 0 8px 8px;
}

.b-page-variant {
    flex        : 1;
    text-align  : left;
    height      : 40px;
    line-height : 40px;
    padding     : 0 25px;
    cursor      : pointer;
}

    .b-page-variant--active {
        background    : white;
        border-radius : 0 0 8px 8px;
    }

.b-card-billing {
    display     : flex;
}

    .b-card-billing__title {
        font-size   : 18px;
        font-family : "museo-sans", sans-serif;
        font-weight : 500;
        line-height : 24px;
        max-width   : 70%;
        overflow    : hidden;
    }

    .b-card-billing__price {
        margin-left  : auto;
        margin-top   : 5px;
        white-space  : nowrap;
        padding-left : 10px;
    }

.b-card-name-bottom-right {
    margin-left : auto;
    color       : #9a9a9a;
    font-size   : 12px;
    text-align  : right;
    float       : right;
    padding-top : 2px;
}