.distribution-chart__item { display: flex; margin: 1.5em 0; min-height: 3.5em; padding: 0; width: 100%; border: none; font-weight: normal; align-items: center; font-size: 90%; position: relative; } .distribution-chart__bar-container { display: flex; align-items: center; flex: 1; } .distribution-chart__bar { border-radius: 0.4em; min-height: 1.5em; } .distribution-chart__item-content { flex: 1; } .distribution-chart__counterparts { width: 25em; line-height: 1.2em; font-weight: 300; } .distribution-chart__item:hover .distribution-chart__bar { opacity: 0.9; } .distribution-chart__amount { font-weight: bold; margin-left: 1em; } .distribution-chart__percent { margin-left: 1em; opacity: 0; transition: 0.3s opacity; } .distribution-chart__item:hover .distribution-chart__percent { opacity: 1; } @media screen and (max-width: 600px) { .distribution-chart__item { flex-direction: column; align-items: stretch; } .distribution-chart__legend { align-items: center !important; justify-content: flex-start !important; position: initial !important; flex-direction: column !important; padding-right: 0 !important; width: auto !important; height: initial !important; } .distribution-chart__counterparts { display: flex; flex-direction: column; margin: auto; width: auto; margin-bottom: 1rem; text-align: center; align-items: center; } .distribution-chart__bar { /* Enable printing of background color */ min-height: 1.5em !important; } .distribution-chart__branche-name { font-size: inherit !important; } } @media print { .distribution-chart__bar { box-shadow: inset 0 0 0 1000px var(--colour); } } .distribution-chart__legend { display: flex; flex-direction: column; align-items: center; color: rgba(0, 0, 0, 0.7); padding: 0.4em 0; padding-right: 1em; justify-content: space-evenly; width: 6em; flex-grow: 0; flex-shrink: 0; } .distribution-chart__branche-name { font-weight: 500; } .distribution-chart__icon { font-size: 200%; height: 1.2em; } .distribution-chart__total { border-top: 1px dotted rgba(0, 0, 0, 0.7); color: black; margin-top: 1em; padding-top: 0.8em; } .distribution-chart__total { display: grid; grid-template-columns: 1fr auto auto; grid-column-gap: 1em; grid-row-gap: 0.4em; align-items: end; text-align: right; margin-bottom: 1em; } .distribution-chart__total-border { grid-column: 2 / span 2; border-top: solid 1px rgba(0, 0, 0, 0.7); } /* IE11 Special */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .distribution-chart__total > * { margin: 8px; } .distribution-chart__total-border { border: none; } }