:root {
    --color-dev-primary: #00b1e6;
    --color-dev-secondary: #1a2c5f;
    --color-dev-third: #8dd8f8;
    --color-dev-heading: #1a2c5f;
    --color-fourth: #1F82C0;
    --color-body: #636363;
    --color-gray-1: #D3D5DD;
    --color-bg-page: #F2F2F2;
  }
body {
    color: var(--color-body);
}
#dashboard {

        h2 {
            color: var(--color-fourth);
        }
        h3 {
            font-weight: 800;
        }
        .link {
            color: var(--color-primary);
            .icon {
                color: var(--color-primary);
            }
        }
        .icon-in-link {
            color: var(--color-primary);
        }

    .hook-dashboard {
        display: flex;
        flex-wrap: wrap;
        padding:  15px;
    }
    solid-resource {
        display:block;
        flex-basis: calc(66% - 15px);
        &>.solid-resource>solid-display {
            background: #fff;
            box-shadow: 0 0 6px 0 rgb(0 0 0 / 11%);flex-grow: 1;
            flex-shrink: 1;
            padding: 15px;
            display: block;
            margin-left: -15px; 
            margin-right: -15px; 
            div>solid-display {
                display: block;
                margin-bottom: 15px;
            }
            a {
                display: inline;
                vertical-align: baseline;
                color: var(--color-primary);
            }
            p {
                display: inline;
            }
        }

        solid-form-search {
            display: none;
        }
        solid-display {
            nav {
                display: none;
            }
        }
        &.cardsList {
            flex-basis: calc(100%);
            &>.solid-resource>solid-display {
                background: transparent;
                box-shadow: none;
                flex-shrink: 1;
                display: block;
                padding: 0 0 15px 0;
            }
        }
    }
    solid-event {
        display:block;
        flex-basis: calc(34% - 15px);
        margin-left: 30px;
        &>.solid-event>solid-display {
            background: #fff;
            box-shadow: 0 0 6px 0 rgb(0 0 0 / 11%);flex-grow: 1;
            flex-shrink: 1;
            padding: 15px;
            display: block;
            &>div>solid-display {
                display: block;
                margin-bottom: 15px;

                span {
                    text-transform: capitalize;
                    font-weight: 900;
                }
                a {
                    color: var(--color-primary);
                    vertical-align: top;
                }
            }
        }

        solid-form-search {
            display: none;
        }
        solid-display {
            nav {
                display: none;
            }
        }
    }
}