<div>
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-8" style="text-align: right; padding-right: 12px;">
      <div style="float: right; width:auto;">
        <div id="advance-daterange" class="btn btn-white advance-daterange-class">
          <span></span>
          <i class="fa fa-angle-down fa-fw"></i>
        </div>
      </div>
      <label class="control-label" style="float: right; width: 50px;margin-right: 5px; margin-top: 8px;"><span
          style="font-size: 14px;">Period</span></label>
      <div class="form-group" style="float: right; width: 200px;">
        <div style="float: right;float: right;width: 80px;margin-right: 8px;">
          <select id="statsplatform" onchange="semusiChart.getTotalStats(this.value)"
            style="padding: 6px; border: 1px solid; border-radius: 2px; font-weight: 400;  color: #333;   background: #fff; border-color: #e2e7eb; margin-top: 1px;">
            <option value="all" selected>All</option>
            <option value="android">Android</option>
            <option value="ios">iOS</option>
            <option value="web">Web</option>
          </select>
        </div>
        <label class=" control-label" style="float: right;width: 100px;padding-top: 8px;"><span
            style="font-size: 14px;">Platform</span></label>
      </div>
      <div class="text-muted f-w-600 mt-2 mt-sm-0 col-md-12 text-md-right"
        style="margin-bottom: 10px; padding-right: 0px;">Compared to <span id="daterange-prev-date">11 May - 18 May
          2020</span></div>
    </div>
  </div>

  <!-- begin row -->
  <div class="row" style="padding: 10px;">
    <!-- begin col-6 -->
    <div class="col-sm-6">
      <!-- begin row -->
      <div class="row" style="background:#fff;border-radius: 3px 0px 0px 3px; padding-top: 15px; ">
        <!-- begin col-6 -->
        <div class="col-sm-6">
          <!-- begin card -->
          <div class="card border-0 text-truncate mb-3 ">
            <!-- begin card-body -->
            <div class="card-body">
              <!-- begin title -->
              <div class="f-s-13">
                <b class="mb-3">NEW USERS
                </b>
                <!-- <span class="ml-2 text-muted"><i class="fa fa-info-circle" data-toggle="popover" data-trigger="hover" data-title="Conversion Rate" data-placement="top" data-content="Percentage of sessions that resulted in orders from total number of sessions." data-original-title="" title=""></i></span> -->
              </div>
              <!-- end title -->
              <!-- begin conversion-rate -->
              <div class="d-flex align-items-center mb-1">
                <h2 class="mb-0">
                  <span data-animation="number" data-value="2.19">
                    <span id="lblNewInstalls" style="font-weight: 500;"></span>
                  </span>
                </h2>
                <div class="ml-auto">
                  <div id="conversion-rate-sparkline">
                    <img src="assets/minifiedImg/s-2.png" style="width: 116px; height: 50px;" />
                  </div>
                </div>
              </div>
              <!-- end conversion-rate -->
              <!-- begin percentage -->
              <div class="mb-3" style="height: 25px;">
                <!-- <i class="fa fa-caret-down" id="i-downarrow" style="display:none;"></i> 
              <i class="fa fa-caret-up" id="i-downarrow" style="display:none;"></i> -->

                <span id="i-uparrow" style="display:none;">
                  <i class="fa  fa-caret-up"></i>
                </span>
                <span id="i-downarrow" style="display:none;">
                  <i class="fa fa-caret-down"></i>
                </span>
                <span data-animation="number" data-value="0.50"><span id="lblChangeInstalls"></span> </span>w.r.t. <span
                  class="lw">This Month</span>
              </div>
              <!-- end percentage -->
              <!-- begin info-row -->
              <div class="d-flex mb-2">
                <div class="d-flex align-items-center">
                  <i class="fa fa-android text-teal f-s-8 mr-2" style="color: #A4C639"></i>
                  Android
                </div>
                <div class="d-flex align-items-center ml-auto">
                  <div class="width-50 text-right pl-2 f-w-600"><span data-animation="number" data-value="53210"
                      id="card_android">0</span></div>
                </div>
              </div>
              <!-- end info-row -->
              <!-- begin info-row -->
              <div class="d-flex mb-2">
                <div class="d-flex align-items-center">
                  <i class="fa fa-apple text-blue f-s-8 mr-2" style="color:#1CB6F9"></i>
                  iOS
                </div>
                <div class="d-flex align-items-center ml-auto">
                  <div class="width-50 text-right pl-2 f-w-600"><span data-animation="number" data-value="11959"
                      id="card_ios">0</span></div>
                </div>
              </div>
              <!-- end info-row -->
              <!-- begin info-row -->
              <div class="d-flex">
                <div class="d-flex align-items-center">
                  <i class="fa fa-globe text-aqua f-s-8 mr-2"></i>
                  Web
                </div>
                <div class="d-flex align-items-center ml-auto">
                  <div class="width-50 text-right pl-2 f-w-600"><span data-animation="number" data-value="5545"
                      id="card_web">0</span></div>
                </div>
              </div>
              <!-- end info-row -->
              <div class="stats-link">
                <a href="javascript:;">
                  <i id="i-downloadLink" title="Download Installs Csv" class="fa fa-2x fa-download"
                    style="cursor:pointer; float:left;margin-top: 10px;" href="#modal-dialog" data-toggle="modal"></i>
                  <span class="view-details" data-page="dashboard?action=installs"
                    style="float: right;margin-top: 5px;">View Detail <i
                      class="fa fa-arrow-circle-o-right"></i></span></a>
              </div>
            </div>
            <!-- end card-body -->
          </div>
          <!-- end card -->
        </div>
        <!-- end col-6 -->
        <!-- begin col-6 -->
        <div class="col-sm-6">
          <!-- begin card -->
          <div class="card border-0 text-truncate mb-3 ">
            <!-- begin card-body -->
            <div class="card-body">
              <!-- begin title -->
              <div class="f-s-13">
                <b class="mb-3">ACTIVE USERS </b>
                <!-- <span class="ml-2 text-muted"><i class="fa fa-info-circle" data-toggle="popover" data-trigger="hover" data-title="Store Sessions" data-placement="top" data-content="Number of sessions on your online store. A session is a period of continuous activity from a visitor." data-original-title="" title=""></i></span> -->
              </div>
              <!-- end title -->
              <!-- begin store-session -->
              <div class="d-flex align-items-center mb-1">
                <h2 class="mb-0"><span data-animation="number" data-value="70719" id="totalUsers">0</span></h2>
                <div class="ml-auto">
                  <div id="store-session-sparkline">
                    <img src="assets/minifiedImg/s-1.png" style="width: 90px; height: 42px;" />
                  </div>
                </div>
              </div>
              <!-- end store-session -->
              <!-- begin percentage -->
              <div class="mb-3" style="height: 25px;">
                <span id="users-uparrow" style="display:none">
                  <i class="fa fa-caret-up"></i>
                </span>
                <span id="users-downarrow" style="display:none">
                  <i class="fa fa-caret-up"></i>
                </span>
                &nbsp;&nbsp;
                <!-- <span data-animation="number" data-value="9.5" id="lblUserChange">0.00</span>% compare to last week -->
              </div>
              <!-- end percentage -->
              <!-- begin info-row -->
              <div class="d-flex mb-2">
                <div class="d-flex align-items-center">
                  <i class="fa fa-circle text-red f-s-8 mr-2"></i>
                  DAU
                </div>
                <div class="d-flex align-items-center ml-auto">
                  <div class="width-50 text-right pl-2 f-w-600"><span data-animation="number" data-value="3.79"
                      id="card_dau">0.00</span></div>
                </div>
              </div>
              <!-- end info-row -->
              <!-- begin info-row -->
              <div class="d-flex mb-2">
                <div class="d-flex align-items-center">
                  <i class="fa fa-circle text-warning f-s-8 mr-2"></i>
                  WAU
                </div>
                <div class="d-flex align-items-center ml-auto">
                  <div class="width-50 text-right pl-2 f-w-600"><span data-animation="number" data-value="3.85"
                      id="card_wau">0.00</span></div>
                </div>
              </div>
              <!-- end info-row -->
              <!-- begin info-row -->
              <div class="d-flex">
                <div class="d-flex align-items-center">
                  <i class="fa fa-circle text-lime f-s-8 mr-2"></i>
                  MAU
                </div>
                <div class="d-flex align-items-center ml-auto">
                  <div class="width-50 text-right pl-2 f-w-600"><span data-animation="number" data-value="2.19"
                      id="card_mau">0.00</span></div>
                </div>
              </div>
              <!-- end info-row -->
              <div class="stats-link">
                <a href="dashboard?action=users#/users/getall" style="margin-top: 5px; float: right;">View Detail <i
                    class="fa fa-arrow-circle-o-right"></i></a>
              </div>
            </div>
            <!-- end card-body -->
          </div>
          <!-- end card -->
        </div>
        <!-- end col-6 -->
      </div>
      <!-- end row -->
    </div>
    <!-- end col-6 -->

    <!-- begin col-6 -->
    <div class="col-sm-6">
      <!-- begin row -->
      <div class="row" style="background:#fff;border-radius: 0px 3px 3px 0px; padding-top: 15px; ">
        <!-- begin col-6 -->
        <div class="col-sm-6">
          <!-- begin card -->
          <div class="card border-0 text-truncate mb-3 ">
            <!-- begin card-body -->
            <div class="card-body">
              <!-- begin title -->
              <div class="f-s-13">
                <b class="mb-3">ENGAGEMENT </b>
                <!-- <span class="ml-2 text-muted"><i class="fa fa-info-circle" data-toggle="popover" data-trigger="hover" data-title="Store Sessions" data-placement="top" data-content="Number of sessions on your online store. A session is a period of continuous activity from a visitor." data-original-title="" title=""></i></span> -->
              </div>
              <!-- end title -->
              <!-- begin store-session -->
              <div class="d-flex align-items-center mb-1">
                <h2 class="mb-0"><span data-animation="number" data-value="70719" id="lblTotalSessions">0</span></h2>
                <div class="ml-auto">
                  <div id="store-session-sparkline">
                    <img src="assets/minifiedImg/s-4.png" style="width: 116px; height: 50px;" />
                  </div>
                </div>
              </div>
              <!-- end store-session -->
              <!-- begin percentage -->
              <div class="mb-3" style="height: 25px;">
                <span id="s-uparrow" style="display:none;">
                  <i class="fa  fa-caret-up"></i>
                </span>
                <span id="s-downarrow" style="display:none;">
                  <i class="fa fa-caret-down"></i>
                </span>
                <span data-animation="number" data-value="0.50"><span id="lblChangeTotalSessions"></span> </span>w.r.t.
                <span class="lw">This Month</span>
              </div>
              <!-- end percentage -->
              <!-- begin info-row -->
              <div class="d-flex mb-2">
                <div class="d-flex align-items-center">
                  <i class="fa fa-circle text-red f-s-8 mr-2"></i>
                  Active Campaigns
                </div>
                <div class="d-flex align-items-center ml-auto">
                  <div class="width-50 text-right pl-2 f-w-600"><span data-animation="number" data-value="3.79"
                      id="card_activecmp">0.00</span></div>
                </div>
              </div>
              <!-- end info-row -->
              <!-- begin info-row -->
              <div class="d-flex mb-2">
                <div class="d-flex align-items-center">
                  <i class="fa fa-circle text-warning f-s-8 mr-2"></i>
                  Total Campaigns
                </div>
                <div class="d-flex align-items-center ml-auto">
                  <div class="width-50 text-right pl-2 f-w-600"><span data-animation="number" data-value="3.85"
                      id="card_totalcmp">0.00</span></div>
                </div>
              </div>
              <!-- end info-row -->
              <!-- begin info-row -->
              <div class="d-flex">
                <div class="d-flex align-items-center">
                  <i class="fa fa-circle text-lime f-s-8 mr-2"></i>
                  DAU/MAU
                </div>
                <div class="d-flex align-items-center ml-auto">
                  <div class="width-50 text-right pl-2 f-w-600"><span data-animation="number" data-value="2.19"
                      id="card_DAUdMAU">0.00</span></div>
                </div>
              </div>
              <!-- end info-row -->
              <div class="stats-link">
                <a href="dashboard?action=usage#/usage" style="margin-top: 5px; float: right;">View Detail <i
                    class="fa fa-arrow-circle-o-right"></i></a>
              </div>
            </div>
            <!-- end card-body -->
          </div>
          <!-- end card -->
        </div>
        <!-- end col-6 -->
        <!-- begin col-6 -->
        <div class="col-sm-6">
          <!-- begin card -->
          <div class="card border-0 text-truncate mb-3 ">
            <!-- begin card-body -->
            <div class="card-body">
              <!-- begin title -->
              <div class="f-s-13">
                <b class="mb-3">CHURN
                </b>
              </div>
              <!-- end title -->
              <!-- begin conversion-rate -->
              <div class="d-flex align-items-center mb-1">
                <h2 class="mb-0">
                  <span data-animation="number" data-value="2.19">
                    <span id="uniqueChurn" style="display:none;"></span>
                    <span id="lblTotalChurn" style="font-weight: 500;"></span>
                    <span id="lblTotalChurns" style="display: none;"></span>
                  </span>
                </h2>
                <div class="ml-auto">
                  <div id="conversion-rate-sparkline">
                    <img src="assets/minifiedImg/s-5.png" style="width: 116px; height: 50px;" />
                  </div>
                </div>
              </div>
              <!-- end conversion-rate -->
              <!-- begin percentage -->
              <div class="mb-3" style="height: 5px;">
                <!-- <i class="fa fa-caret-down" id="i-downarrow" style="display:none;"></i> 
                <i class="fa fa-caret-up" id="i-downarrow" style="display:none;"></i> -->
                <span id="c-uparrow" style="display:none;">
                  <i class="fa  fa-caret-up"></i>
                </span>
                <span id="c-downarrow" style="display:none;">
                  <i class="fa fa-caret-down"></i>
                </span>
                <span data-animation="number" data-value="0.50"><span id="lblChangeTotalChurn"></span> </span>w.r.t.
                <span class="lw">This Month</span>
              </div>
              <!-- end percentage -->
              <!-- begin info-row -->
              <div class="d-flex mb-2">
                <div class="d-flex align-items-center">
                  <i class="fa fa-android text-teal f-s-8 mr-2" style="color: #A4C639"></i>
                  AtRisk Users
                </div>
                <div class="d-flex align-items-center ml-auto">
                  <div class="width-50 text-right pl-2 f-w-600"><span data-animation="number" data-value="53210"
                      id="atRisk"> </span></div>
                </div>
              </div>
              <!-- begin info-row -->
              <div class="d-flex mb-2">
                <div class="d-flex align-items-center">
                  <i class="fa fa-android text-teal f-s-8 mr-2" style="color: #A4C639"></i>
                  Android
                </div>
                <div class="d-flex align-items-center ml-auto">
                  <div class="width-50 text-right pl-2 f-w-600"><span data-animation="number" data-value="53210"
                      id="churn_android">0</span></div>
                </div>
              </div>
              <!-- end info-row -->
              <!-- begin info-row -->
              <div class="d-flex mb-2">
                <div class="d-flex align-items-center">
                  <i class="fa fa-apple text-blue f-s-8 mr-2" style="color:#1CB6F9"></i>
                  iOS
                </div>
                <div class="d-flex align-items-center ml-auto">
                  <div class="width-50 text-right pl-2 f-w-600"><span data-animation="number" data-value="11959"
                      id="churn_ios">0</span></div>
                </div>
              </div>
              <!-- end info-row -->
              <!-- begin info-row -->
              <div class="d-flex">
                <div class="d-flex align-items-center">
                  <i class="fa fa-globe text-aqua f-s-8 mr-2"></i>
                  Web
                </div>
                <div class="d-flex align-items-center ml-auto">
                  <div class="width-50 text-right pl-2 f-w-600"><span data-animation="number" data-value="5545"
                      id="churn_web">0</span></div>
                </div>
              </div>
              <div class="stats-link">
                <a href="javascript:;">
                  <span class="view-details" data-page="dashboard?action=campaigns"
                    style="float: right;margin-top: 5px;">Create Campaign <i
                      class="fa fa-arrow-circle-o-right"></i></span></a>
              </div>
            </div>
            <!-- end card-body -->
          </div>
          <!-- end card -->
        </div>
        <!-- end col-6 -->

      </div>
      <!-- end row -->
    </div>
    <!-- end col-6 -->

  </div>


  <!-- start row -->
  <div class="row" style="">
    <div class="col-md-12 ui-sortable">
      <div class="panel panel-inverse panel-dropdown-hover" data-sortable-id="chart-js-2"
        style="padding: 10px; padding-bottom: 15px; padding-top: 15px;">
        <div class="panel-body card">
          <div class="row">
            <div class="col-md-6 col-sm-6 " style="width: calc(50% - 16px); margin-right: 16px;">
              <!-- <div class="f-s-13 " style="margin-left: 10px;">
                    <b class="mb-3">Top Channels</b> 
                </div> -->
              <div id="make_container" style=" width: 100%;height: 350px;margin: 0;padding: 0;"></div>
            </div>
            <div class="col-md-6 col-sm-6">
              <!-- <div class="f-s-13 " style="margin-left: 10px;">
                <b class="mb-3">Top 10 Search Keywords</b> 
            </div> -->
              <div id="av_container" style="width: 100%;height: 350px;margin: 0;padding: 0;"></div>
              <div
                style="width: 100%; height:20px;position: relative; background: #fff; text-align: right; z-index: 99;">
                <a href="dashboard?action=aud#/aud/create" style="margin-top: 5px; float: right;"><button type="button"
                    class="btn btn-primary">Launch Campaign</button></a>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- end row -->

  <!-- start row -->
  <div class="row" style="">
    <div class="col-md-12 ui-sortable">
      <div class="panel panel-inverse panel-dropdown-hover" data-sortable-id="chart-js-2"
        style="padding: 10px; padding-bottom: 15px; padding-top: 15px;">
        <div class="panel-body card">
          <div class="row">
            <div class="col-md-6 col-sm-6 " style="width: calc(100% - 16px); margin-right: 16px;">
              <!-- <div class="f-s-13 " style="margin-left: 10px;">
                    <b class="mb-3">Top Channels</b> 
                </div> -->
              <div id="session_container" style=" width: 100%;height: 350px;margin: 0;padding: 0;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- end row -->

</div>

<style>
  .stats-desc {
    padding-bottom: 5px;
  }

  .c-fff {
    color: #fff !important;
  }

  .i-font {
    font-size: 8px !important;
  }

  .bootstrap-switch-label {
    width: 50px !important;
  }

  .appicedash .card.border-0 {
    -webkit-box-shadow: inset 0 0 0 1px rgba(100, 120, 140, .25);
    box-shadow: inset 0 0 0 1px rgba(100, 120, 140, .25);
  }

  .appicedash .text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .appicedash .mb-3,
  .my-3 {
    margin-bottom: 16px !important;
  }

  .appicedash .border-0 {
    border: 0 !important;
  }

  .appicedash .card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(100, 120, 140, .25);
    border-radius: 6px;
  }

  .appicedash .card-body {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 16px;
  }

  .appicedash .f-s-13 {
    font-size: 13px !important;
  }

  .appicedash .mb-1,
  .my-1 {
    margin-bottom: 4px !important;
  }

  .appicedash .align-items-center {
    align-items: center !important;
  }

  .appicedash .d-flex {
    display: flex !important;
  }

  .appicedash .mb-0,
  .my-0 {
    margin-bottom: 0 !important;
  }

  .appicedash .apexcharts-canvas {
    position: relative;
    user-select: none;
  }

  .appicedash .resize-triggers,
  .resize-triggers>div,
  .contract-trigger:before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  .appicedash .resize-triggers {
    animation: 1ms resizeanim;
    visibility: hidden;
    opacity: 0;
  }

  .appicedash .resize-triggers>div {
    background: #eee;
    overflow: auto;
  }

  .appicedash .resize-triggers,
  .resize-triggers>div,
  .contract-trigger:before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  .appicedash .contract-trigger:before {
    width: 200%;
    height: 200%;
  }

  .appicedash .resize-triggers,
  .resize-triggers>div,
  .contract-trigger:before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  .appicedash .d-flex {
    display: flex !important;
  }


  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(100, 120, 140, 0.25);
    border-radius: 6px;
    color: #212121;
  }

  .card>hr {
    margin-right: 0;
    margin-left: 0;
  }

  .card>.list-group:first-child .list-group-item:first-child {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }

  .card>.list-group:last-child .list-group-item:last-child {
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
  }

  .card-body {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 16px;
    -webkit-box-shadow: 10px 10px 11px -9px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 10px 10px 11px -9px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 2px 15px -9px rgba(0, 0, 0, 0.75);

  }

  .card-body:hover {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }

  .card-title {
    margin-bottom: 12px;
  }

  .card-subtitle {
    margin-top: -6px;
    margin-bottom: 0;
  }

  .card-text:last-child {
    margin-bottom: 0;
  }

  .card-link:hover {
    text-decoration: none;
  }

  .card-link+.card-link {
    margin-left: 16px;
  }

  .card-header {
    padding: 12px 16px;
    margin-bottom: 0;
    background-color: #f2f3f4;
    border-bottom: 1px solid rgba(100, 120, 140, 0.25);
  }

  .card-header:first-child {
    border-radius: 5px 5px 0 0;
  }

  .card-header+.list-group .list-group-item:first-child {
    border-top: 0;
  }

  .card-footer {
    padding: 12px 16px;
    background-color: #f2f3f4;
    border-top: 1px solid rgba(100, 120, 140, 0.25);
  }

  .card-footer:last-child {
    border-radius: 0 0 5px 5px;
  }

  .card-header-tabs {
    margin-right: -8px;
    margin-bottom: -12px;
    margin-left: -8px;
    border-bottom: 0;
  }

  .card-header-pills {
    margin-right: -8px;
    margin-left: -8px;
  }

  .card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 16px;
  }

  .card-img,
  .card-img-bottom,
  .card-img-top {
    flex-shrink: 0;
    width: 100%;
  }

  .card-img,
  .card-img-top {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  .card-img,
  .card-img-bottom {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
  }

  .card-deck .card {
    margin-bottom: 15px;
  }

  @media (min-width: 576px) {
    .card-deck {
      display: flex;
      flex-flow: row wrap;
      margin-right: -15px;
      margin-left: -15px;
    }

    .card-deck .card {
      flex: 1 0 0%;
      margin-right: 15px;
      margin-bottom: 0;
      margin-left: 15px;
    }
  }

  .card-group>.card {
    margin-bottom: 15px;
  }

  @media (min-width: 576px) {
    .card-group {
      display: flex;
      flex-flow: row wrap;
    }

    .card-group>.card {
      flex: 1 0 0%;
      margin-bottom: 0;
    }

    .card-group>.card+.card {
      margin-left: 0;
      border-left: 0;
    }

    .card-group>.card:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    .card-group>.card:not(:last-child) .card-header,
    .card-group>.card:not(:last-child) .card-img-top {
      border-top-right-radius: 0;
    }

    .card-group>.card:not(:last-child) .card-footer,
    .card-group>.card:not(:last-child) .card-img-bottom {
      border-bottom-right-radius: 0;
    }

    .card-group>.card:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    .card-group>.card:not(:first-child) .card-header,
    .card-group>.card:not(:first-child) .card-img-top {
      border-top-left-radius: 0;
    }

    .card-group>.card:not(:first-child) .card-footer,
    .card-group>.card:not(:first-child) .card-img-bottom {
      border-bottom-left-radius: 0;
    }
  }

  .card-columns .card {
    margin-bottom: 12px;
  }

  @media (min-width: 576px) {
    .card-columns {
      column-count: 3;
      column-gap: 16px;
      orphans: 1;
      widows: 1;
    }

    .card-columns .card {
      display: inline-block;
      width: 100%;
    }
  }

  .mb-2,
  .my-2 {
    margin-bottom: 8px !important;
  }

  .d-flex {
    display: flex !important;
  }

  .align-items-center {
    align-items: center !important;
  }

  .text-red {
    color: #ea4335 !important;
  }

  .f-s-8 {
    font-size: 8px !important;
  }

  .mr-2,
  .mx-2 {
    margin-right: 8px !important;
  }

  .mb-3,
  .my-3 {
    margin-bottom: 16px !important;
  }

  .width-50 {
    width: 50px !important;
  }

  .text-right {
    text-align: right !important;
  }

  .f-w-600 {
    font-weight: 600 !important;
  }

  .pl-2,
  .px-2 {
    padding-left: 8px !important;
  }

  .ml-auto {
    margin-left: auto !important;
  }

  .anychart-credits-text {
    display: none;
  }
</style>
