/*
 * Flexbox Layout (alternative way of grid for older browsers such as IE)
 * 2019-07-03
 * by Dave Park
 * Copyright Mint Company Inc.
 */
/* Variables
 ================================== */
/* Tables
================================== */
.Rtable {
    display: flex;
    flex-wrap: wrap;

    width: 70%;

    margin:0px 0px 0px 0px;
    padding:20px 20px 20px 20px;
    background-color:#6a62d2;
}
.Rtable-cell {
    box-sizing: border-box;
    flex-grow: 1;
    width: 100%;
    overflow: hidden;
    list-style: none;
}
.Rtable-cell img {
    width: 170.19px;
    height: 170.19px;
}
.filling-empty-space-childs {
    width:176.20px; /*the width of the images in this example*/
    height:0; /*Important! for the divs to collapse should they fall in a new row*/
}

/* Table column sizing
================================== */
.Rtable--1cols > .Rtable-cell {
    width: 100%;
}
.Rtable--2cols > .Rtable-cell {
    width: 50%;
}
.Rtable--3cols > .Rtable-cell {
    width: 33.33%;
}
.Rtable--4cols > .Rtable-cell {
    width: 25%;
}
.Rtable--5cols > .Rtable-cell {
    width: 20%;
}
.Rtable--6cols > .Rtable-cell {
    width: 16.6%;
}
/* Page styling
================================== */

.dave-grid-symbol-title {
    position: absolute;
    height: 90%;
    text-align: center;
    width: 100%;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    font-size: 0.98rem;
    font-weight: 600;
}

.dave-grid-symbol-title p {
    margin-top: auto;
    color: #282422
}

@media (max-width: 1132px) {
    .Rtable{
        width: 100%;
    }
    .Rtable-cell img {
        width: 218px;
        height: 218px;
    }
}

@media (max-width: 1022px) {
    .Rtable{
        width: 100%;
    }
    .Rtable-cell img {
        width: 200px;
        height: 200px;
    }
}


@media (max-width: 922px) {
    .Rtable{
        width: 100%;
    }
    .Rtable-cell img {
        width: 180px;
        height: 180px;
    }
}

@media (max-width: 868px) {
    .Rtable{
        width: 100%;
    }
    .Rtable-cell img {
        width: 166px;
        height: 166px;
    }
}

@media (max-width: 822px) {
    .Rtable{
        width: 100%;
    }
    .Rtable-cell img {
        width: 152px;
        height: 152px;
    }
}

@media (max-width: 762px) {
    .Rtable{
        width: 100%;
    }
    .Rtable-cell img {
        width: 146px;
        height: 146px;
    }
}

@media (max-width: 722px) {
    .Rtable{
        width: 100%;
    }
    .Rtable-cell img {
        width: 140px;
        height: 140px;
    }
}

@media (max-width: 692px) {
    .Rtable{
        width: 100%;
    }
    .Rtable-cell img {
        width: 132px;
        height: 132px;
    }
}

@media (max-width: 662px) {
    .Rtable{
        width: 100%;
    }
    .Rtable-cell img {
        width: 124px;
        height: 124px;
    }
}

@media (max-width: 628px) {
    .Rtable{
        width: 100%;
    }
    .Rtable-cell img {
        width: 114px;
        height: 114px;
    }
}

@media (max-width: 600px) {
    .Rtable{
        width: 100%;
    }
    .Rtable-cell img {
        width: 180px;
        height: 180px;
    }
    /* Table column sizing
    ================================== */
    .Rtable--1cols > .Rtable-cell {
        width: 100%;
    }
    .Rtable--2cols > .Rtable-cell {
        width: 50%;
    }
    .Rtable--3cols > .Rtable-cell {
        width: 50%;
    }
    .Rtable--4cols > .Rtable-cell {
        width: 50%;
    }
    .Rtable--5cols > .Rtable-cell {
        width: 50%;
    }
    .Rtable--6cols > .Rtable-cell {
        width: 50%;
    }
}
@media (max-width: 500px) {
    .Rtable{
        width: 100%;
    }
    .Rtable-cell img {
        width: 150px;
        height: 150px;
    }
    /* Table column sizing
    ================================== */
    .Rtable--1cols > .Rtable-cell {
        width: 100%;
    }
    .Rtable--2cols > .Rtable-cell {
        width: 100%;
    }
    .Rtable--3cols > .Rtable-cell {
        width: 50%;
    }
    .Rtable--4cols > .Rtable-cell {
        width: 50%;
    }
    .Rtable--5cols > .Rtable-cell {
        width: 50%;
    }
    .Rtable--6cols > .Rtable-cell {
        width: 50%;
    }
    .filling-empty-space-childs {
        width:120px; /*the width of the images in this example*/
        height:0; /*Important! for the divs to collapse should they fall in a new row*/
    }
}
@media (max-width: 398px) {
    .Rtable{
        width: 100%;
    }
    .Rtable-cell img {
        width: 140px;
        height: 140px;
    }
    /* Table column sizing
    ================================== */
    .Rtable--1cols > .Rtable-cell {
        width: 100%;
    }
    .Rtable--2cols > .Rtable-cell {
        width: 100%;
    }
    .Rtable--3cols > .Rtable-cell {
        width: 50%;
    }
    .Rtable--4cols > .Rtable-cell {
        width: 50%;
    }
    .Rtable--5cols > .Rtable-cell {
        width: 50%;
    }
    .Rtable--6cols > .Rtable-cell {
        width: 50%;
    }
    .filling-empty-space-childs {
        width:120px; /*the width of the images in this example*/
        height:0; /*Important! for the divs to collapse should they fall in a new row*/
    }
}

.dave-grid-title p {
    color: #FFFFFF;
    font-size: 1.2rem;
    font-weight: 400;
}

.dave-summary-grid {
    word-break: break-word;
    min-width: 0;

    width: 100%;

    grid-template-columns: repeat(2, 1fr);
    display: grid;

    grid-column-gap: 8px;
    grid-row-gap: 8px;

    margin:0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background-color:#ffffff;
}
.dave-summary-grid-title {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: row1-start
    grid-row-end: 2;

    padding-left: 10px;
    margin-top: -10px;
    margin-bottom: -30px;
}