.card-header { border-bottom: 0; font-size: 18px; @media (min-width: 465px) { font-size: 20px; } } .main-title { position: relative; color: #ffffff91; margin-top: -13px; font-size: 10px; text-transform: uppercase; font-weight: 500; text-align: center; padding-bottom: 3px; } .full-container { padding: 0px 15px; width: 100%; min-height: 500px; height: calc(100% - 150px); @media (max-width: 992px) { height: 100%; padding-bottom: 100px; }; } .chart { width: 100%; height: 100%; padding-bottom: 20px; padding-right: 10px; @media (max-width: 992px) { padding-bottom: 25px; } @media (max-width: 829px) { padding-bottom: 50px; } @media (max-width: 767px) { padding-bottom: 50px; } } .chart-widget { width: 100%; height: 100%; max-height: 293px; } .formRadioGroup { margin-top: 6px; display: flex; flex-direction: column; @media (min-width: 991px) { position: relative; top: -65px; } @media (min-width: 830px) and (max-width: 991px) { position: relative; top: 0px; } @media (min-width: 830px) { flex-direction: row; float: right; margin-top: 0px; } .btn-sm { font-size: 9px; @media (min-width: 830px) { font-size: 14px; } } } .loadingGraphs { position: absolute; top: 50%; left: calc(50% - 15px); z-index: 100; } .loadingGraphs.widget { top: 75%; }