.box-list {
    list-style: none;
    margin: 0;
    margin-left: 0 !important;
    margin-bottom: 1em;
    margin-top: 1em
}

.box-list>div {
    background-color: white;
    color: #575047;
    height: 4.5rem;
    margin-bottom: 15px;
    display: -webkit-flex;
    display: flex;
    -webkit-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.3);
    -ms-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.3);
    -o-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.3)
}

@media only screen and (min-width: 0em) and (max-width: 39.9375em) {
    .box-list>div {
        height: 4.14rem
    }
}

@media only screen and (min-width: 40em) and (max-width: 63.9375em) {
    .box-list>div {
        height: 4.22rem
    }
}

.box-list>div>img {
    height: 4.3125rem;
    width: 4.3125rem
}

@media only screen and (min-width: 0em) and (max-width: 39.9375em) {
    .box-list>div>img {
        height: 3.9525rem;
        width: 3.9525rem
    }
}

@media only screen and (min-width: 40em) and (max-width: 63.9375em) {
    .box-list>div>img {
        height: 4.0325rem;
        width: 4.0325rem
    }
}

.box-list>div>.caption {
    padding: 0 10px;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
    display: flex;
    align-items: flex-start;
    align-self: center;
    flex-direction: row
}

@media only screen and (min-width: 0em) and (max-width: 39.9375em) {
    .box-list>div>.caption {
        flex-direction: column
    }
}

.box-list>div>.caption>h3 {
    margin: 0;
    font-size: 1.25rem;
    flex-grow: 1;
    line-height: 1.4;
    max-height: 3.5rem;
    overflow-y: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

@media only screen and (min-width: 0em) and (max-width: 39.9375em) {
    .box-list>div>.caption>h3 {
        flex-grow: 0;
        font-size: 1.05rem;
        max-height: 2.94rem
    }
}

@media only screen and (min-width: 40em) and (max-width: 63.9375em) {
    .box-list>div>.caption>h3 {
        font-size: 1.15rem;
        max-height: 3.22rem
    }
}

.box-list>div>.caption>p {
    margin: 0
}

@media only screen and (min-width: 0em) and (max-width: 39.9375em) {
    .box-list>div>.caption>p {
        font-size: .75rem
    }
}

main div[data-af-link].module h3 {
    color: #492365 !important
}

main div[data-af-link].module:hover,
main div[data-af-link].module:focus {
    cursor: pointer
}

main div[data-af-link].module:hover h3,
main div[data-af-link].module:focus h3 {
    color: #fafafa !important
}

main div[data-af-link].word {
    background-color: white;
    border: 3px solid #2a5695
}

main div[data-af-link].word:hover,
main div[data-af-link].word:focus {
    background-color: #2a5695
}

main div[data-af-link].excel {
    background-color: white;
    border: 3px solid #1d7044
}

main div[data-af-link].excel:hover,
main div[data-af-link].excel:focus {
    background-color: #1d7044
}

main div[data-af-link].power-point {
    background-color: white;
    border: 3px solid #d04325
}

main div[data-af-link].power-point:hover,
main div[data-af-link].power-point:focus {
    background-color: #d04325
}

main div[data-af-link].cid {
    background-color: white;
    border: 3px solid #575048
}

main div[data-af-link].cid:hover,
main div[data-af-link].cid:focus {
    background-color: #575048
}

main div[data-af-link].docs {
    background-color: white;
    border: 3px solid #4285f4
}

main div[data-af-link].docs:hover,
main div[data-af-link].docs:focus {
    background-color: #4285f4
}

main div[data-af-link].sheets {
    background-color: white;
    border: 3px solid #34a853
}

main div[data-af-link].sheets:hover,
main div[data-af-link].sheets:focus {
    background-color: #34a853
}

main div[data-af-link].slides {
    background-color: white;
    border: 3px solid #fbbc05
}

main div[data-af-link].slides:hover,
main div[data-af-link].slides:focus {
    background-color: #fbbc05
}