.dashboard-card {
    display: block;
    float: left;

    width: 33.333%;

    text-decoration: none;

    color: #000;
}

@media (min-width: 1250px) {
    .dashboard-card {
        width: 25%;
    }
}

@media (min-width: 1550px) {
    .dashboard-card {
        width: 20%;
    }
}

@media (min-width: 1840px) {
    .dashboard-card {
        width: 16.667%;
    }
}

.dashboard-card__frame {
    position: relative;

    box-sizing: border-box;
    margin: 10px;
    padding: 14px 0 0;

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

    border: 1px solid #e7ebff;
    border-radius: 4px;
    background: #fff;

    transition: 300ms ease;
}

.dashboard-card__frame:hover {
    box-shadow: 0 4px 15px #dfe4f9;
}

.dashboard-card__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.dashboard-card__header {
    display: flex;
    align-items: center;

    padding: 0 48px 10px 20px;
}

.dashboard-card__icon {
    width: 44px;
    height: 44px;

    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 33px auto;
}

.dashboard-card__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    margin-left: 12px;

    font-size: 18px;
    font-weight: 500;
    line-height: 18px;
}

.dashboard-card__beta-icon {
    overflow: hidden;

    width: 15px;
    height: 16px;
    margin: 0 .15em;

    transform: translate(0, -.33em);
}

.dashboard-card__beta-icon svg {
    width: 15px;
    height: 15px;
}

.dashboard-card__configure {
    position: absolute;
    z-index: 2;
    top: 18px;
    right: 10px;

    width: 16px;
    height: 16px;
    padding: 10px;

    color: #a9b0c0;

    transition: 300ms ease;
}

.dashboard-card__configure-icon svg {
    width: 16px;
    height: 16px;
}

.dashboard-card__configure:hover {
    color: #555;
}

.dashboard-card__content {
    height: 42px;
    padding: 0 20px;
}

.dashboard-card__footer {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;

    min-height: 16px;
    padding: 20px;

    line-height: 16px;
    pointer-events: none;
}

.dashboard-card__counter,
.dashboard-card__action {
    pointer-events: auto;
}

.dashboard-card__counter::after {
    display: block;
    float: right;

    box-sizing: border-box;
    width: 6px;
    height: 15px;
    margin: 0 0 0 10px;

    content: '';

    background-image: url("data:image/svg+xml,%3Csvg width='6' height='11' viewBox='0 0 6 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.82642 5.82617C5.82642 5.50075 5.68661 5.16069 5.35388 4.82795C4.10131 3.57538 1.59617 1.07025 1.59617 1.07025C1.27074 0.744813 0.743099 0.744813 0.417662 1.07025C0.0922247 1.39569 0.0922247 1.92332 0.417662 2.24876L3.99507 5.82617L0.417662 9.40358C0.0922247 9.72902 0.0922247 10.2567 0.417662 10.5821C0.743099 10.9075 1.27074 10.9075 1.59617 10.5821C1.59617 10.5821 4.09789 8.08038 5.34875 6.82952C5.6832 6.49507 5.82642 6.1516 5.82642 5.82617Z' fill='%230044BB'/%3E%3C/svg%3E%0A"); /* stylelint-disable-line */
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 6px;
}

.dashboard-card__counter:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='11' viewBox='0 0 6 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.82642 5.82617C5.82642 5.50075 5.68661 5.16069 5.35388 4.82795C4.10131 3.57538 1.59617 1.07025 1.59617 1.07025C1.27074 0.744813 0.743099 0.744813 0.417662 1.07025C0.0922247 1.39569 0.0922247 1.92332 0.417662 2.24876L3.99507 5.82617L0.417662 9.40358C0.0922247 9.72902 0.0922247 10.2567 0.417662 10.5821C0.743099 10.9075 1.27074 10.9075 1.59617 10.5821C1.59617 10.5821 4.09789 8.08038 5.34875 6.82952C5.6832 6.49507 5.82642 6.1516 5.82642 5.82617Z' fill='%23CC0000'/%3E%3C/svg%3E%0A"); /* stylelint-disable-line */
}

.dashboard-card__action::before {
    display: block;
    float: left;

    box-sizing: border-box;
    width: 16px;
    height: 16px;
    margin: 0 10px 0 0;

    content: '';

    border: 1px solid #04b;
    border-radius: 4px;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='7.5' width='8' height='1' rx='0.5' fill='%230044BB'/%3E%3Crect x='8.5' y='4' width='8' height='1' rx='0.5' transform='rotate(90 8.5 4)' fill='%230044BB'/%3E%3C/svg%3E%0A"); /* stylelint-disable-line */
    background-position: 50%;
    background-size: 16px;
}

.dashboard-card__action:hover::before {
    border-color: #c00;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='7.5' width='8' height='1' rx='0.5' fill='%23CC0000'/%3E%3Crect x='8.5' y='4' width='8' height='1' rx='0.5' transform='rotate(90 8.5 4)' fill='%23CC0000'/%3E%3C/svg%3E%0A"); /* stylelint-disable-line */
}

.dashboard-card__action_process {
    color: #979797;
}

.dashboard-card__action_process::before {
    display: none;
}

.dashboard-card__action .spin2 {
    display: block;
    float: left;

    width: 16px;
    height: 16px;
    margin: 0 10px 0 0;
}

.dashboard-card__more {
    position: relative;
    z-index: 2;

    float: right;

    text-decoration: none;

    color: #4b4b4b;
}

.dashboard-card_with-counter .dashboard-card__action::before {
    float: right;

    margin-right: 0;
    margin-left: 10px;
}

.dashboard-card__badge {
    z-index: 51;

    margin-top: 5px;
}

.dashboard-card_featured .dashboard-card__frame {
    padding-top: 12px;

    border-top-width: 3px;
    border-top-color: #ffcc01;
}
