nav .headding {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 5px;
    font-size: 85%;
    font-weight: normal;
    letter-spacing: 1px;
    color: #51586a;
    text-transform: uppercase;
}

.nav > li + .headding {
    margin-top: 20px;
}
.user-panel-container {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;

    grid-template-areas: "main";
    grid-column-gap: 0;
    grid-row-gap: 0;
    justify-items: stretch;
    align-items: stretch;
    padding: 0 1em;
}

.user-panel-container .content {
    background: white;
}
.user-panel-container .content.bg-transparent {
    background: transparent;
}
@media all and (min-width: 768px) {
    .user-panel-container {
        display: grid;
        grid-template-columns: 230px auto;
        grid-template-rows: auto;
        grid-template-areas: "sidebar main";
        grid-column-gap: 0;
        grid-row-gap: 0;
        justify-items: stretch;
        align-items: stretch;
        padding: 1.5em 0;
    }

    .user-panel-container .sidemenu {
        grid-area: sidebar;
        background: white;
    }

    .user-panel-container .content {
        grid-area: main;
    }
}

.user-panel-container .table .thead-dark th {
    color: #fff;
    background-color: #23c154;
    border-color: #10c144;
}
.dashboard {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 40px auto auto;
    grid-template-areas: "header"
                         "center"
                         "bottom";
    grid-column-gap: 1.2em;
    grid-row-gap: 1em;
    padding-bottom: 1em;
}
.dashboard .headding {
    grid-area: header;
}
@media all and (min-width: 768px) {
    .dashboard {
        grid-template-rows: 70px auto auto;
    }
}
.headding-super {
    margin-top: 0;
    margin-bottom: 5px;
    font-weight: normal;
    font-size: 85%;
    color: #434857;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.dashboard .profile-box {
    grid-area: center;
}
.dashboard .profile-box img.card-img-top {
  width: 22%;
}
.dashboard .clear {
    grid-area: 3/center;
}
.dashboard .booking-overview {
    grid-area: 4/bottom;
}
.dashboard .pets-overview {
    grid-area: 5/bottom;
}

@media all and (min-width: 768px) {
    .dashboard {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 70px auto auto;
        grid-template-areas: "header header header"
                             "center-left center center-right"
                             "bottom-left bottom bottom-right";
        padding-right: 1em;
    }
    .dashboard .clear {
        grid-area: 3/center-left-start/3/center-right-end;
    }
    .dashboard .booking-overview {
        grid-area: 4/bottom-left;
    }
    .dashboard .pets-overview {
        grid-area: 4/bottom-start/4/bottom-right-end;
    }
    .dashboard .profile-box img.card-img-top {
      width: 100%;
    }
}
.pet-mini-list {
    display: grid;
    grid-template-columns: repeat(3, 120px);
    grid-auto-columns: 120px;
    grid-template-rows: auto;
    justify-items: start;
    justify-content: start;
    align-items: start;
    grid-row-gap: 1em;
    grid-auto-flow: column;
    overflow: auto;
    min-height: 60px;
}

.pet-mini-list .card-img {
    height: 32px;
    width: 32px;
    border-radius: 50% !important;
    border: 1px solid #E2E2E2;
    margin:auto;
    vertical-align: middle;
}
.pet-mini-list .pet-info {
    line-height: 1.2em;
    vertical-align: middle;
}

.user-pets-page .content {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 10px auto auto;
    grid-template-areas: "header"
                         "center"
                         "bottom";
    grid-column-gap: 1.2em;
    grid-row-gap: 1em;
    padding-bottom: 1em;
}
.user-pets-page .content .headding {
    grid-area: header;
}
.user-pets-page .content .pet-list {
    grid-area: center;
}
.user-pets-page .content .pet-info {
    grid-column: 1;
    grid-row: 1 / span 2;
    background: #FFFFFF;
}
.user-pets-page .content .pet-info > div {
    background: #FFFFFF;
}
.user-pets-page  .pet-list li {
    display: grid;
    grid-template-columns: 12% auto;
    grid-template-rows: auto;
    grid-template-areas: "left right";
    grid-column-gap: 1em;
    grid-row-gap: 1em;

    border-radius: 2px;
}
.user-pets-page .pet-list li.selected {
    background: #f4f7f5;
}
.user-pets-page  .pet-list li .item-profile-icon {
    grid-area: left;
    overflow: hidden;
}
.user-pets-page  .pet-list li .item-profile-icon img {
    width: auto;
    min-height: 50px;
    max-height: 50px;
    max-width: 50px;
    margin: auto;
}
.user-pets-page  .pet-list li .item-inner {
    grid-area: right;
}

.user-pets-page .content .pet-info .icon-image {
    height: 180px;
    width: 180px;
    border-radius: 50%;
}
.user-pets-page .content .pet-info dt {
    margin-top: 1em;
}
.user-pets-page .content .pet-info dd {
    padding-left: 1em;
    border-bottom: 1px solid #d8d8d8;
    text-transform: capitalize;
}

@media all and (min-width: 768px) {
    .user-pets-page .content {
        display: grid;
        grid-template-columns: 40% 60%;
        grid-template-rows: 60px auto auto;
        grid-template-areas: "header header"
                             "left right"
                             "bottom-left bottom-right";
        grid-column-gap: 1.2em;
        grid-row-gap: 1em;
        padding-bottom: 1em;
    }
    .user-pets-page .content .headding {
        grid-area: header;
    }
    .user-pets-page .content .pet-list {
        grid-area: left;
    }
    .user-pets-page .content .pet-info {
        grid-area: right;
        border-left: 1px solid #eeeeee;
    }
    .user-pets-page  .pet-list li .item-profile-icon img {
        min-height: 30px;
        max-height: 30px;
        max-width: 30px;
    }
}