﻿.card-counter {
    box-shadow: 2px 2px 10px #DADADA;
    margin: 5px;
    padding: 12px 10px;
    background-color: #fff;
    height: 80px;
    border-radius: 5px;
    transition: .3s linear all;
}

.card-counter:hover {
    box-shadow: 4px 4px 20px #DADADA;
    transition: .3s linear all;
}

.card-counter.primary {
    background-color: #007bff;
    color: #FFF;
}

.card-counter.danger {
    background-color: #ef5350;
    color: #FFF;
}

.card-counter.success {
    background-color: #66bb6a;
    color: #FFF;
}

.card-counter.info {
    background-color: #26c6da;
    color: #FFF;
}

.card-counter i {
    font-size: 5em;
    opacity: 0.2;
}

.card-counter .count-numbers {
    position: absolute;
    right: 35px;
    top: 13px;
    font-size: 28px;
    display: block;
}

.card-counter .count-name {
    position: absolute;
    right: 35px;
    top: 53px;
    /*  font-style: italic;*/
    text-transform: capitalize;
    /*  opacity: 0.5;*/
    display: block;
    font-size: 18px;
    color:black;
}
#layout_0.dilo-4card {
    height: 18% !important;
    margin:0;
}
.new-dilo #dash #layout_1, .new-dilo #dash #layout_2 {
    top: 100px !important;
}
#layout_0.dilo-4card .row {
    margin: 0;
}
/*    .new-dilo #dash #layout_1 {
    height: 228px !important;
}*/
.new-dilo #dash #layout_2 {
    height: 463px !important;
}
.new-dilo #dash #layout_3 {
    top: 335px !important;
    height: 228px !important;
}
.new-dilo #dash .e-panel-container .e-panel-content {
    height: 99% !important;
}


    /* Dilo New Css start*/
.Dilo-main-container {
    height: calc(100% - 0px);
    display: grid;
    grid-template-rows: 18% 41% 41%;
    grid-template-columns: 8fr 4fr;
    grid-template-areas: "dilo-row-one dilo-row-one"
        "task-sec alert-sec"
        "notification-sec alert-sec";
    grid-gap: 0px 5px;
}
.dilo-row-one {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.dilo-row-one .col-md-3 {
    max-width: 100%;
}
.dilo-row-two {
    display: grid;
    grid-template-columns: 8fr 4fr;
    grid-template-rows: minmax(50%, 100%);
}
.dilo-row-two > div {
    max-width: 100%;
}
.dilo-row-two-left {
    padding-right: 6px;
}

.task-sec {
    grid-area: task-sec;
}
.notification-sec {
    grid-area: notification-sec;
}
.alert-sec {
    grid-area: alert-sec;
}
.dilo-row-one {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-area: dilo-row-one;
    align-items: center;
}
    /* Dilo New Css end*/
