:root { /* Primary */ --mauve: #7D7EAF; --pink-dark: #BD85BA; --pink: #F78EAD; --peach: #FFA48E; --orange: #FFCA71; --gold: #CEA716; --green: #1EC198; --grey: #a0a0a0; /* Light */ --mauve-light: #e5e5ef; --pink-dark-light: #f2e7f1; --pink-light: #fde8ef; --peach-light: #ffede8; --orange-light: #fff4e3; --gold-light: #faf6e8; --green-light: #e9f9f5; --grey-light: #e0e0e0; /*Lighter*/ --grey-lighter: #fafafa; --grey-dark-lighter: #f3f3f3; } /* Background */ .bg-mauve-light { background-color: var(--mauve-light); } .bg-pink-dark-light { background-color: var(--pink-dark-light); } .bg-pink-light { background-color: var(--pink-light); } .bg-peach-light { background-color: var(--peach-light); } .bg-orange-light { background-color: var(--orange-light); } .bg-gold-light { background-color: var(--gold-light); } .bg-green-light { background-color: var(--green-light); } /* Text */ .text-mauve { color: var(--mauve); } .text-pink-dark { color: var(--pink-dark); } .text-pink { color: var(--pink); } .text-peach { color: var(--peach); } .text-orange { color: var(--orange); } .text-gold { color: var(--gold); } .text-green { color: var(--green); } /* Cards */ .dashboard-card { border-radius: 0.3rem; display: flex; justify-content: center; margin: 1rem auto; height: 90px; } .dashboard-card__icon-container { height: 50px; width: 50px; border-radius: 50%; } .dashboard-card__icon-container i { font-size: 20px; } .dashboard-card__details { margin-left: 1rem; max-width: 120px; } .dashboard-card__details h3 { font-weight: 700; font-size: 1.5rem; } .dashboard-card__details h4 { font-weight: 700; font-size: 0.7rem; color: var(--grey); margin-top: -5px; } h2.section-header { font-weight: 700; font-size: 1.5rem; } .chart-container { border-radius: 0.3rem; padding: 1rem; margin: 1rem auto; } .chart-container.card-shadow { height: 100%; } .half_chart.chart-container.card-shadow { height: 49%; } .chart-container h2 { font-weight: 700; font-size: 1.125rem; } .item-container { background-color: var(--grey-lighter); border-radius: 0.3rem; padding: 1.2rem 1rem; margin: 1rem auto; } .item-container:hover { background-color: var(--grey-dark-lighter); transition: all 0.3s ease-in-out; cursor: pointer; } .count-container { font-weight: 700; font-size: 1.7rem; background-color: var(--mauve-light); color: var(--mauve); height: 50px; width: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .item-header { padding:inherit; display: flex; align-items: flex-start; } .item-title h3 { font-size: 1.3rem; font-weight: 700; } .item-content ul { list-style: none; padding-left: 0px; } .item-content ul>li { font-size: 0.9rem; color: var(--grey); font-weight: 700; } /* Misc */ .card-shadow { -webkit-box-shadow: 1px 3px 5px 0px rgba(222, 222, 222, 1); -moz-box-shadow: 1px 3px 5px 0px rgba(222, 222, 222, 1); box-shadow: 1px 3px 5px 0px rgba(222, 222, 222, 1); } /* Table */ thead { background-color: #e9ecf0; border-bottom: none; } .table thead th { border-bottom: none; } .table td, .table th { border-top: 1px solid #eceff2; } .crm_scroll_table { max-height: 395px; overflow-y: auto; } .recent_activity_div .crm_scroll_table { max-height: 435px; } .crm_scroll_table thead { position: sticky; top: 0; } .crm_scroll_table .count-container { height: 45px; width: 162px; border-radius: 50px; margin-right: 10px; } .crm_scroll_table .item-content ul > li { font-size: 1.1rem; }