.abp-badge {
  position: relative;
  overflow: visible;
}

.abp-badge[data-abp-badge]:after {
  content: attr(data-abp-badge);
  position: absolute;
  font-size: 10px;
  top: -10px;
  right: 2px;
  width: auto;
  font-weight: bold;
  color: white;
  text-shadow: rgba(0, 0, 0, 0.5) 0 -0.08em 0;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding: 1px 4px;
  background-image: none;
  background-color: #c00;
  background-image: -webkit-gradient(
    linear,
    50% 0%,
    50% 100%,
    color-stop(0%, #ff1a1a),
    color-stop(3%, #e60000),
    color-stop(100%, #b30000)
  );
  background-image: -webkit-linear-gradient(top, #ff1a1a, #e60000 3%, #b30000);
  background-image: linear-gradient(top, #ff1a1a, #e60000 3%, #b30000);
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 0.1em 0.1em;
  box-shadow: rgba(0, 0, 0, 0.3) 0 0.1em 0.1em;
}

.abp-badge.hide-badge[data-abp-badge]:after {
  display: none !important;
}
body {
  background: #eaecfa;
}
.loader {
  width: 250px;
  height: 150px;
  line-height: 50px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: helvetica, arial, sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  color: #ce4233;
  letter-spacing: 0.2em;
}
.loader::before,
.loader::after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background: #ce4233;
  position: absolute;
  animation: load 0.7s infinite alternate ease-in-out;
}
.loader::before {
  top: 0;
}
.loader::after {
  bottom: 0;
}
@keyframes load {
  0% {
    left: 0;
    height: 70px;
    width: 15px;
  }
  50% {
    height: 8px;
    width: 40px;
  }
  100% {
    left: 235px;
    height: 70px;
    width: 15px;
  }
}
.valid-cell {
  background-color: #dff2bf;
  background-image: url(../images/valid.png); /*16px*/
  background-repeat: no-repeat;
  background-position: right;
}

.invalid-cell {
  background-color: #ffbaba;
  background-image: url(../images/invalid.png); /*16px*/
  background-repeat: no-repeat;
  background-position: right;
  /*text-decoration: line-through;*/
}

.is_duplicate_cell {
  background-color: #ffbaba !important;
}

.is_notduplicate_cell {
  background-color: #dff2bf !important;
}

.valid-row {
  background-color: #dff2bf !important;
}

.invalid-row {
  background-color: #ffbaba !important;
}
.fast-track-row {
  background-color: #35baf6 !important;
}
.delayed-task-row {
  background-color: #f8c471 !important;
}
.normal-task-row {
  background-color: #7dcea0 !important;
}
.expired-task-row {
  background-color: #f1948a !important;
}
.striked-valid-row {
  text-decoration: line-through !important;
  color: BLACK !important;
  background-color: #dff2bf !important;
}
.striked-invalid-row {
  text-decoration: line-through !important;
  color: BLACK !important;
  background-color: #ffbaba !important;
}

.medium-row {
  background-color: #d1e0e0 !important;
}
.wrap .x-grid-cell-inner {
  white-space: normal;
}
.rowHeight {
  white-space: normal;
  height: 50px;
}
.rowHeight .x-grid-cell-inner {
  white-space: normal;
}

/*
navigation
*/

.x-treelist-navigation .x-treelist-item-text {
  color: #adb3b8 !important;
  margin-left: 40px !important;
  margin-right: 24px !important;
  font-size: 12px !important;
  line-height: 50px !important;
}

.x-treelist-navigation .x-treelist-item-icon:before,
.x-treelist-navigation .x-treelist-item-tool:before,
.x-treelist-navigation .x-treelist-item-expander {
  line-height: 50px !important;
}

/*Alerts Notifications*/
.noti {
  padding: 0px 2px 0px 2px;
  background: #e3495a;
  color: #fff;
  font-weight: bold;
  font-size: 22px;
  position: relative;
  overflow: visible;
  border-radius: 50%;
  /* height: 18px;
    width: 34px;*/
  text-align: center;
}
.noti:after {
  height: 38px;
  width: 34px;
  display: inline-block;
  position: absolute;
  top: 22px;
  right: -180px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 10px;
  line-height: 18px;
}

/*.frame {
      border: 2px solid #ccc;
      padding: 20px;
      border-radius: 10px;
    }

    .circle-container {
      display: flex;
    }

    .circle-frame {
      margin-right: 20px;
    }

    .circle {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #3498db;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 24px;
      font-weight: bold;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease-in-out;
    }

    .circle:hover {
      transform: translateY(-10px);
    }

    .circle1 {
      background-color: #2ecc71;
    }

    .title {
      text-align: center;
      margin-top: 8px;
      font-size: 14px;
    }

.shadow_class {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}*/

.frame {
  border: 2px solid #ccc;
  padding: 20px;
  border-radius: 10px;
}

.rectangle-container {
  display: flex;
  flex-direction: column; /* Stack the rectangles vertically */
  gap: 20px; /* Add gap between rectangles */
}

.rectangle-frame {
  flex: 1; /* Allow rectangles to stretch */
}

.rectangle {
  height: 50px; /* Adjust the height as needed */
  border-radius: 10px;
  background-color: #3498db;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  text-align: center; /* Center text horizontally */
  padding: 10px; /* Add padding for text wrapping */
  word-wrap: break-word; /* Allow text to wrap */
  width: 100%; /* Make rectangle take full width of container */
}

.rectangle:hover {
  transform: translateY(-10px);
}

.rectangle1 {
  background-color: #2ecc71;
}

.title {
  text-align: center;
  margin-top: 8px;
  font-size: 14px;
}

.shadow_class {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.innerRevText {
  color: black;
  font-size: 12px;
  font-weight: bold;
}

.row-quota-not-calculated .x-grid-cell {
  /* background-color: #ffe6e6 !important;
  color: #990000 !important;
  font-weight: bold; */
  background-color: #35baf6 !important;
}

/* custom css */
@font-face {
  font-family: "Gilsun";
  src: url("path/to/gilsun.woff2") format("woff2"),
    url("path/to/gilsun.woff") format("woff");
}

.x-htmleditor-font-select .x-list-item {
  font-family: var(--font-family);
}

/* Example for Gilsun */
.x-htmleditor-font-select .x-list-item[data-value="Gilsun"] {
  font-family: "Gilsun";
}