body,
html {
    height: 100%;
}

/*
 * Off Canvas sidebar at medium breakpoint
 * --------------------------------------------------
 */
@media screen and (max-width: 992px) {

    .row-offcanvas {
        position: relative;
        -webkit-transition: all 0.25s ease-out;
        -moz-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
    }

    .row-offcanvas-left .sidebar-offcanvas {
        left: -33%;
    }

    .row-offcanvas-left.active {
        left: 33%;
        margin-left: -6px;
    }

    .sidebar-offcanvas {
        position: absolute;
        top: 0;
        width: 33%;
        height: 100%;
    }
}

/*
 * Off Canvas wider at sm breakpoint
 * --------------------------------------------------
 */
@media screen and (max-width: 34em) {
    .row-offcanvas-left .sidebar-offcanvas {
        left: -45%;
    }

    .row-offcanvas-left.active {
        left: 45%;
        margin-left: -6px;
    }

    .sidebar-offcanvas {
        width: 45%;
    }
}

.card {
    overflow: hidden;
}

.card-body .rotate {
    z-index: 8;
    float: right;
    height: 100%;
}

    .card-body .rotate i {
        color: rgba(20, 20, 20, 0.15);
        position: absolute;
        left: 0;
        left: auto;
        right: -10px;
        bottom: 0;
        display: block;
        -webkit-transform: rotate(-44deg);
        -moz-transform: rotate(-44deg);
        -o-transform: rotate(-44deg);
        -ms-transform: rotate(-44deg);
        transform: rotate(-44deg);
    }

.dashboard-box a {
    color: #fff !important;
    text-decoration: none !important;
}

.bg-primary {
    background-color: #14b04d !important;
}

.bg-secondary {
    background-color: #000000 !important;
}

.dashboard-box {
    height: 250px;
}

.dashboard-box-long {
    min-height: 400px;
}