.document-item * {
    /* color: #ffffff; */
}

.document-item {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    background-color: #fefefe;
    border-bottom: 1px solid #444;
}

.document-item a {
    height: 100%;
    font-size: 24pt;
    border-left: 1px solid #444;
    color: #333;
    padding: 20px 20px;
    background-color: #eee;
}


.document-item a:hover {
    background-color: #bb6464;
    text-decoration: none;
    color: #ffffff;
}

.document-item h3 {
    padding: 20px 20px;
    margin: 0;
    width: 100%;
    font-size: 24pt;
    cursor:default;
}

.document-item details {
    width: 100%;
}

.document-item summary {
    /* Makes the h3 and the icon align nicely */
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    cursor: pointer; /* Shows it's clickable */
    list-style: none; /* Hides the default triangle marker */
}

/* Hides the marker on Webkit browsers (Chrome, Safari) */
.document-item summary::-webkit-details-marker {
    display: none;
}

.dropdown-content {
    padding-top: 10px;
}


@media only screen and (max-width:760px) {
    #documents{
        min-height: 65vh;
    }

    .document-item h3{
        font-size: 16pt;
    }

}