.k-notification-info {
      border-color: #532575;
      color: #16264e;
      background-color: #FAFAFA;
    }

    .hidden {
      display: none;
    }

    .k-card {
      align-items: center;
      justify-content: center;
    }

    /*
    .k-card-header {
      z-index: 0;
    }

    #wrap {
      width: 655px;
      height: 298px;
      position: relative;

    }

    #wrap img {
      position: absolute;
      width: 82px;
      top: 5px;
    }

    align-items: center;
    */


    html,
    body,
    #parent,
    .grid {
      margin: 0;
      padding: 0;
      border-width: 0;
      height: 100%;
      /* DO NOT USE !important for setting the Grid height! */
    }

    #SelectAccounts {
      margin-top: 20px;
      margin-left: 20px;
    }

    #SelectBills {
      margin-top: 20px;
      margin-left: 20px;
    }

    #SelectMeterDetails {
      margin-top: 20px;
      margin-left: 20px;
    }

    #ReportCards {
      margin-right: 20px;
      margin-left: 20px;
      font-family: Calibri;
    }

    #View_Schedules {
      margin-top: 20px;
      margin-left: 20px;
    }

    #Completed_Reports {
      margin-top: 20px;
      margin-left: 20px;
    }

    #Contact_Us {

      margin-top: 20px;
      margin-left: 20px;
      margin-right: 20px;

    }

    #Billing {
      margin-top: 20px;
      margin-left: 20px;
    }


    #MY_Account {
      margin-top: 20px;
      margin-left: 20px;
      margin-right: 20px;
    }


    .introjs-tooltip {
      position: absolute;
      visibility: visible;
      /* padding: 10px; */
      min-width: 500px;
      max-width: 600px;
    }


    .k-button {
      margin-bottom: auto;
      /* margin-left:auto; */
      /* margin-right:auto; */
      margin-top: auto
    }


    /* .k-spacer,
    .k-flex {
      flex: none !important;
    } */
    .k-spacer,
    .k-flex {
      flex: 1 0 auto;
    }

    .k-w-300 {
      width: 420px;
    }


    .demo-section label {
      margin-bottom: 5px;
      font-weight: bold;
      display: inline-block;
    }

    #employees {
      width: 220px;
    }

    #example .demo-section {
      max-width: none;
      width: 600px;
    }

    #example .k-listbox {
      width: 220px;
      height: 300px;
    }

    #example .k-listbox:first-of-type {
      width: 220px;
      margin-right: 1px;
    }

    /* grid stop wrap of data */
    .k-grid td,
    .k-grid .k-table-td td {
      border-block-end-width: 0px;
      white-space: nowrap !important;
      vertical-align: middle;
    }

    /* grid tool bar */


    .k-grid-toolbar {
      padding: .6em 1.3em .6em .4em;
    }

    .category-label {
      vertical-align: middle;
      padding-right: .5em;
    }

    #category {
      vertical-align: middle;
    }

    .refreshBtnContainer {
      display: inline-block;
    }

    .toolbar {
      margin-left: auto;
      margin-right: 0;
    }


    .k-drawer-items {
      overflow-y: auto;
      max-height: 80vh;
    }

    #drawer {
      -webkit-user-select: none;
      -moz-user-select: -moz-none;
      -ms-user-select: none;
      user-select: none
    }


    .HightLightRowError {
      color: #ff7e05;
    }


    /*
  html {
    font: 13px sans-serif;
    overflow: hidden;
  }
  

  #appbar {
    padding: 0px 25px 0px 24px;
    height: 48px;
    background: #FFFFFF;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.06);
  }

  #signOutButton {
    pointer-events: auto;
    margin: 12px 0 9px 0;
    background: rgba(66, 66, 66, 0.16);
  }

  



  .k-popover-callout {
    display: none;
  }

  .k-popover-body {
    padding: 0px;
  }

  .k-grid td {
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  */

    .hoverable-card:hover {
      background: #ced3db;
    }


    #listView>.k-listview-content {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 32px;
      max-height: 1100px;
    }

    .k-card-header {
      background-color: inherit;
    }


    .k-card-image {
      width: 100%;
      height: 111px;
    }

    .k-card-title {
      font-style: normal;
      font-weight: normal;
      font-size: 13px;
      line-height: 15px;
    }

    .k-card-subtitle {
      font-style: normal;
      font-weight: normal;
      font-size: 13px;
      line-height: 15px;
    }

    .k-tilelayout-item.k-card:nth-child(2) {
      border: none;
      background: inherit;
    }

    .k-listview {
      background: inherit;
      border: none;
    }

    .k-listview2 {
      background: inherit;
      border: none;
    }

    .k-d-flex-row>.k-textbox {
      width: 40%;
    }

    .introjs-tooltip {
      position: absolute;
      visibility: visible;
      /* padding: 1px; */
      min-width: 500px;
      max-width: 600px;
    }


    #loader-large {
      border: 5px solid;
      margin: 0 auto;
      padding: 10px;
      z-index: 100;
    }



    /*<!-- Card CSS -->*/

    #Reports #SelectReports {
      font-size: .9rem;
      line-height: 1;
      font-family: Calibri;
      position: relative;
      color: inherit;
      background: none;
    }

    .k-card-horizontal:hover {
      background: rgb(196, 29, 29);
    }

    #listViewReportType .k-card-title,
    #reportsListViewReportType .k-card-title,
    #reportsListViewReportTypeSubUsers .k-card-title {
      font-style: normal;
      font-weight: normal;

    }

    #listViewReports .k-card-title,
    #reportsListViewReports .k-card-title,
    #reportsListViewReportsSubUsers .k-card-title {
      font-style: normal;
      font-weight: normal;

    }

    #listViewReports .k-card-subtitle,
    #reportsListViewReports .k-card-subtitle,
    #reportsListViewReportsSubUsers .k-card-title {
      font-style: normal;
      font-weight: normal;

    }


    #listViewReportType .k-card,
    #listViewReportType .k-listview-item,
    #listViewReports .k-card,
    #listViewReports .k-listview-item,
    #reportsListViewReports .k-card,
    #reportsListViewReports .k-listview-item,
    #reportsListViewReportsSubUsers .k-card,
    #reportsListViewReportsSubUsers .k-listview-item,
    #reportsListViewReportType .k-card,
    #reportsListViewReportType .k-listview-item,
    #reportsListViewReportTypeSubUsers .k-card,
    #reportsListViewReportTypeSubUsers .k-listview-item {
      background-color: white;
      border-color: gray;
      border-width: thin;
    }


    #listViewReports .k-selected,
    #listViewReportType .k-selected,
    #reportsListViewReportType .k-selected,
    #reportsListViewReportTypeSubUsers .k-selected,
    #reportsListViewReports .k-selected,
    #reportsListViewReportsSubUsers .k-selected {
      background-color: lightgray;
      border-color: gray;
      border-width: medium;
    }

    #listViewReports>.k-listview-content {
      display: flex;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
      gap: 32px;

    }

    #listViewReportType>.k-listview-content {
      display: flex;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
      gap: 32px;
      max-height: 1100px;
    }

    #reportsListViewReportType>.k-listview-content {
      display: flex;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
      gap: 32px;
      max-height: 1100px;
    }

    #reportsListViewReportTypeSubUsers>.k-listview-content {
      display: flex;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
      gap: 32px;
      max-height: 1100px;
    }

    #reportsListViewReports>.k-listview-content {
      display: flex;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      justify-content: flex-start !important;
      align-content: flex-start;
      gap: 20px;

    }

    #reportsListViewReportsSubUsers>.k-listview-content {
      display: flex;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
      gap: 32px;
      max-height: 1100px;
    }

    .customTooltip * {}

    .introjs-tooltip {
      padding: 5px;
      min-width: 800px;
      max-width: 1000px;
    }

    .introjs-tooltiptext {
      padding: 10px;
    }


    /*<!-- help style -->*/
    .k-expander {
      font-family: Calibri;
      line-height: 1.4;
    }

    .k-expander-sub-title {
      font-size: 1.5rem;
    }

    .k-expander h1 {
      font-size: 1.4em;
      color: #DB8E33;
    }


    .k-expander h2 {
      font-size: 1.4em;
      color: #5a287f
    }

    .k-expander h3 {
      font-size: 1.4em;
      color: #cf5f75
    }

    .k-expander  ol {
      margin: 0 0 1.5em;
      padding: 0;
      counter-reset: item;
    }

    .k-expander ol>li {
      margin: 0;
      padding: 0 0 0 2em;
      text-indent: -2em;
      list-style-type: none;
      counter-increment: item;
    }

    .k-expander ol>li:before {
      display: inline-block;
      width: 1.5em;
      padding-right: 0.7em;
      font-weight: bold;
      font-size: 1.4em;
      text-align: right;
      color: red;
      content: counter(item) ".";
    }
    

    kendo-pdf-document ol {
      margin: 0 0 1.5em;
      padding: 0;
      counter-reset: item;
    }

    kendo-pdf-document ol>li {
      margin: 0;
      padding: 0 0 0 2em;
      text-indent: -2em;
      list-style-type: none;
      counter-increment: item;
    }

    kendo-pdf-document ol>li:before {
      display: inline-block;
      width: 1.5em;
      padding-right: 0.7em;
      font-weight: bold;
      font-size: 1.4em;
      text-align: right;
      color: red;
      content: counter(item) ".";
    }

   /* Page Template for the exported PDF */
   .page-template {
    font-family: "DejaVu Sans", "Arial", sans-serif;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .page-template .header {
    position: absolute;
    top: 30px;
    left: 30px;
    right: 30px;
    border-bottom: 1px solid #888;
    color: #888;
  }
  .page-template .footer {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    border-top: 1px solid #888;
    text-align: center;
    color: #888;
  }
  .page-template .watermark {
    font-weight: bold;
    font-size: 400%;
    text-align: center;
    margin-top: 30%;
    color: #aaaaaa;
    opacity: 0.1;
    transform: rotate(-35deg) scale(1.7, 1.5);
  }


 
    

    #About h1 {
      font-size: 1.4em;
      color: #DB8E33;
    }

    #About h2 {
      font-size: 1.4em;
      color: #5a287f
    }

    #About h3 {
      font-size: 1.4em;
      color: #cf5f75
    }

    #About {
      font-family: Calibri;
      line-height: 1.4;
    }

    
    .version-text {
      position: absolute;
      bottom: 5px;
      right: 10px;
      font-size: 0.8em;
      color: gray;
    }

.k-grid {
  border-radius: 6px; /* Or whatever value you want */
  overflow: hidden;    /* Clip the grid content to rounded shape */
}

    .reportrange-error {
  border: 1px solid red;
}

.reportrange-success {
  border: 1px solid green;
}

.reportrange-error-message {
  color: red;
  display: none;
}