@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600&display=swap'); body { font-family: 'Work Sans', sans-serif; } /* body background */ .color__grey { background-color: #f5f5f5; } .row { height: 100vh; } .page-footer { padding-bottom: 20px; } .navbar { background-color: #e57373; } .nav-link { color: rgb(99, 97, 97); padding: 1rem .75rem; } .nav-link:hover { color: rgb(27, 27, 27); } .table tbody th, .table tbody td { padding: 1rem; } td[colspan = '2'] { background-color: rgb(160, 245, 245); } .span { display: block; margin-bottom: .4rem; } .chart-wrapper { max-width: 1150px; padding: 0 10px; margin: 0 auto; } /* CHART-VALUES –––––––––––––––––––––––––––––––––––––––––––––––––– */ .chart-wrapper .chart-values { position: relative; display: flex; margin-bottom: 20px; font-weight: bold; font-size: 1.2rem; } .chart-wrapper .chart-values li { flex: 1; min-width: 80px; text-align: center; } .chart-wrapper .chart-values li:not(:last-child) { position: relative; } .chart-wrapper .chart-values li:not(:last-child)::before { content: ''; position: absolute; right: 0; height: 510px; border-right: 1px solid var(--divider); } /* CHART-BARS –––––––––––––––––––––––––––––––––––––––––––––––––– */ .chart-wrapper .chart-bars li { position: relative; color: var(--white); margin-bottom: 15px; font-size: 16px; border-radius: 20px; padding: 10px 20px; width: 0; opacity: 0; transition: all 0.65s linear 0.2s; } @media screen and (max-width: 600px) { .chart-wrapper .chart-bars li { padding: 10px; } } /* FOOTER –––––––––––––––––––––––––––––––––––––––––––––––––– */ .page-footer { font-size: 0.85rem; padding: 10px; text-align: right; color: var(--black); } .page-footer span { color: #e31b23; } .dark-2 { background-color: #da3e3e; } .dark-1 { background-color: #dd6565; } .lighten-1 { background-color: #e29595; } .lighten-2 { background-color: #ddacac; } .badge { margin: .1rem; } .highTrend { color: white; } .btn__kw { padding: .75rem; background-color: #ddacac; border: none; outline: none; border-radius: 5px; transition: all .2s; } .btn__kw:hover { background-color: #e29595; } .btn__kw:focus { outline: none; } .badge { font-size: 1rem; }