/* 
 * Styles for Data Dashboard element, Supply Remaining.
 */
 #psr .container {
  width: 100%;
  padding: 10px; }

#psr .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 10px; }

#psr .col-md-6 {
  position: relative;
  width: 100%;
  min-height: 1px; }

@media (min-width: 576px) {
  #psr .container {
    max-width: 540px; } }

@media (min-width: 768px) {
  #psr .container {
    max-width: 720px; }
  #psr .col-md-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; } }

@media (min-width: 992px) {
  #psr .container {
    max-width: 960px; } }

#psr .page-wrapper {
  width: 100%; }
  #psr .page-wrapper .title {
    font-family: "Open Sans", sans-serif;
    text-align: center;
    font-size: 20pt;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #58595b; }
  #psr .page-wrapper .sub-title {
    font-family: "Open Sans", sans-serif;
    text-align: center;
    font-size: 13pt;
    letter-spacing: 0.5px;
    color: #58595b;
    padding: 0 15px; }
  #psr .page-wrapper .chart-area {
    height: 120px; }
    #psr .page-wrapper .chart-area .chart {
      margin-top: 15px;
      width: 100%;
      height: 50px;
      text-align: center;
      border: 1px solid #58595b;
      font-family: "Open Sans", sans-serif; }
      #psr .page-wrapper .chart-area .chart .out-ppe {
        background-color: #bc4d34; }
        #psr .page-wrapper .chart-area .chart .out-ppe .percentage {
          color: #fff; }
      #psr .page-wrapper .chart-area .chart .more-7 {
        background-color: #d77b27; }
        #psr .page-wrapper .chart-area .chart .more-7 .percentage {
          color: #fff; }
      #psr .page-wrapper .chart-area .chart .less-7 {
        background-color: #ffc831; }
        #psr .page-wrapper .chart-area .chart .less-7 .percentage {
          color: #58595b; }
      #psr .page-wrapper .chart-area .chart div {
        font-family: "Open Sans", sans-serif;
        height: 100%;
        float: left;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative; }
        #psr .page-wrapper .chart-area .chart div .percentage {
          font-weight: 600;
          font-size: 16px;
          letter-spacing: 0.5px; }
        #psr .page-wrapper .chart-area .chart div .line {
          position: absolute;
          top: 50px;
          height: 15px;
          border-right: 1px solid #939598; }
        #psr .page-wrapper .chart-area .chart div .label {
          width: 100%;
          position: absolute;
          top: 70px;
          line-height: 15px;
          color: #58595b;
          font-weight: 600;
          font-size: 15px; }
  #psr .page-wrapper .explaination {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #58595b; }