* {
    box-sizing: border-box;
}

/* General styles ===================== */

#crd_data .padding-horizontal {
    padding-left: 5px;
    padding-right: 5px;
}

#crd_data .padding-vertical {
    padding-bottom: 3px;
    padding-top: 3px;
}

#crd_data .padding-horizontal,
#crd_data .padding-vertical {
    clear: both;
    float: none;
}


/* Specific styles for data elements ===================*/

#crd_data.col.s12 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    padding: 0;
    margin: 0 10px 0 0;
}

#crd_data .match-results {

}

#crd_data .match-results span {
    vertical-align: middle;
}

#crd_data .match-results span.score {
    display: inline-block;
    float: left;
    font-size: 1.5em;
    font-weight: bold;
    padding: 5px;
    vertical-align: middle;
    width: 44%;
}

#crd_data .match-results span.versus {
    float: left;
    font-size: 1.4em;
    font-weight: bold;
    vertical-align: middle;
    width: 10%;
}

#crd_data .match-results span.game-score.score .score {
    font-size: inherit;
    padding-top: 0px;
    padding-bottom: 0px;
}

#crd_data h2.match-section {
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 0.95em;
    font-weight: 500;
    margin: 1em 0 0 0;
    min-width: 160px;
    padding: 8px 16px 5px;
    text-transform: uppercase;
    width: 20%;
}


#crd_data div.match-details-meta { 
    font-size: 0.8em;
    padding: 10px 10px 0px;
}

#crd_data .scorer {
    font-size: 0.9em;
    line-height: 0.1em;

}

#crd_data div.match-details-meta,
#crd_data div.ronaldo-stats {
    border-top: 3px solid #4caf50;
    margin-bottom: 5px;
}

#crd_data div.ronaldo-stats {
    border-bottom: 1px solid #bdbdbd;
    font-size: 0.9em;
    margin: 0px;
    padding: 8px 20px 16px;
    text-align: left;
}

#crd_data div.ronaldo-stats div {
    margin-top: 8px;
    margin-bottom: 8px;
    padding-left: 5%;
}

.data-name {
    color: #757575;
    font-weight: bold;
}

.match-note {
    font-size: 1.1em;
}

/* Overwriting styles */

.collapsible .collapsible-header {
    color: #616161;
}

.collapsible .collapsible-header:hover {
    background-color: #2e7d32;
    color: #fff;
}

ul.collapsible.expandable>li {
    margin-left: 0;
    margin-right: 0;
}

.collapsible-header span.preview,
.collapsible-header span.report {
    width: 85%;
}

/* Media Queries =============================== */

@media screen and (max-width: 480px) {
    
    #crd_data .match-results span.score,
    #crd_data .match-results span.versus {
        font-size: 1.1em;
    }
}