.main-loading-animation {
  -webkit-animation: spin-animation 3s linear infinite;
  -moz-animation: spin-animation 3s linear infinite;
  animation: spin-animation 3s linear infinite;
}

.notification-dropdown-content {
  min-width: 300px;
  max-width: 400px;
  color: black;
}

.notification-dropdown-content .dropdown-title {
  padding: 16px;
  padding-bottom: 10px;
  min-height: 0px;
  font-size: smaller;
  color: gray;
  border-bottom: 1px solid #f1f1f1;

}

.notification-item {
  display: block;
  padding: 16px;
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: pointer !important;
  border-bottom: 1px solid #f1f1f1;
}

.notification-title {
  padding: 0px;
  font-size: smaller;
  color: gray;
}

.notification-description {
  padding: 0px;
  font-size: smaller;
}

.notification-date {
  padding: 0px;
  text-align: end;
  font-size: x-small;
}

@-moz-keyframes spin-animation {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin-animation {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin-animation {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.tiny-circle {
  /* position: absolute; */
  width: 25px;
  height: 25px;
  overflow: hidden;
  /* left: 15px; */
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  text-align: center;
  font-size: 10px;
}

.bell-ring {
  color: red;
  -webkit-animation: ring 4s .7s ease-in-out infinite;
  -webkit-transform-origin: 50% 4px;
  -moz-animation: ring 4s .7s ease-in-out infinite;
  -moz-transform-origin: 50% 4px;
  animation: ring 4s .7s ease-in-out infinite;
  transform-origin: 50% 4px;
}

.syn-modal-form {
  padding: 0px !important;
  height: calc(100% - 60px) !important;
}

.syn-modal-form .syn-modal-title {
  position: fixed;
  z-index: 100;
  background-color: #28a352;
  padding: 16px !important;
  text-transform: uppercase;
  color: white;
  font-weight: 600;
}

.syn-modal-form .syn-modal-content {
  margin-top: 60px;
  padding-left: 16px !important;
  padding-top: 16px !important;
  padding-right: 16px !important;
}

.syn-circle-number {
  border-radius: 50%;
  color: white;
  padding: 4px 8px;
  margin-right: 10px;
  background-color: black;
}

.syn-section-subtitle {
  font-size: small;
  color: grey;
  /* padding-top: 10px !important; */
  padding-bottom: 24px !important;
}

.syn-modal-error-view {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 50;
  background-color: white;
  padding-top: 60px;
  padding-left: 16px;
  padding-right: 16px;
}

.syn-modal-view-panel {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 50;
  background-color: white;
  padding-top: 60px;
  padding-left: 16px;
  padding-right: 16px;
}

@-webkit-keyframes ring {
  0% {
    -webkit-transform: rotateZ(0);
  }

  1% {
    -webkit-transform: rotateZ(30deg);
  }

  3% {
    -webkit-transform: rotateZ(-28deg);
  }

  5% {
    -webkit-transform: rotateZ(34deg);
  }

  7% {
    -webkit-transform: rotateZ(-32deg);
  }

  9% {
    -webkit-transform: rotateZ(30deg);
  }

  11% {
    -webkit-transform: rotateZ(-28deg);
  }

  13% {
    -webkit-transform: rotateZ(26deg);
  }

  15% {
    -webkit-transform: rotateZ(-24deg);
  }

  17% {
    -webkit-transform: rotateZ(22deg);
  }

  19% {
    -webkit-transform: rotateZ(-20deg);
  }

  21% {
    -webkit-transform: rotateZ(18deg);
  }

  23% {
    -webkit-transform: rotateZ(-16deg);
  }

  25% {
    -webkit-transform: rotateZ(14deg);
  }

  27% {
    -webkit-transform: rotateZ(-12deg);
  }

  29% {
    -webkit-transform: rotateZ(10deg);
  }

  31% {
    -webkit-transform: rotateZ(-8deg);
  }

  33% {
    -webkit-transform: rotateZ(6deg);
  }

  35% {
    -webkit-transform: rotateZ(-4deg);
  }

  37% {
    -webkit-transform: rotateZ(2deg);
  }

  39% {
    -webkit-transform: rotateZ(-1deg);
  }

  41% {
    -webkit-transform: rotateZ(1deg);
  }

  43% {
    -webkit-transform: rotateZ(0);
  }

  100% {
    -webkit-transform: rotateZ(0);
  }
}

@-moz-keyframes ring {
  0% {
    -moz-transform: rotate(0);
  }

  1% {
    -moz-transform: rotate(30deg);
  }

  3% {
    -moz-transform: rotate(-28deg);
  }

  5% {
    -moz-transform: rotate(34deg);
  }

  7% {
    -moz-transform: rotate(-32deg);
  }

  9% {
    -moz-transform: rotate(30deg);
  }

  11% {
    -moz-transform: rotate(-28deg);
  }

  13% {
    -moz-transform: rotate(26deg);
  }

  15% {
    -moz-transform: rotate(-24deg);
  }

  17% {
    -moz-transform: rotate(22deg);
  }

  19% {
    -moz-transform: rotate(-20deg);
  }

  21% {
    -moz-transform: rotate(18deg);
  }

  23% {
    -moz-transform: rotate(-16deg);
  }

  25% {
    -moz-transform: rotate(14deg);
  }

  27% {
    -moz-transform: rotate(-12deg);
  }

  29% {
    -moz-transform: rotate(10deg);
  }

  31% {
    -moz-transform: rotate(-8deg);
  }

  33% {
    -moz-transform: rotate(6deg);
  }

  35% {
    -moz-transform: rotate(-4deg);
  }

  37% {
    -moz-transform: rotate(2deg);
  }

  39% {
    -moz-transform: rotate(-1deg);
  }

  41% {
    -moz-transform: rotate(1deg);
  }

  43% {
    -moz-transform: rotate(0);
  }

  100% {
    -moz-transform: rotate(0);
  }
}

@keyframes ring {
  0% {
    transform: rotate(0);
  }

  1% {
    transform: rotate(30deg);
  }

  3% {
    transform: rotate(-28deg);
  }

  5% {
    transform: rotate(34deg);
  }

  7% {
    transform: rotate(-32deg);
  }

  9% {
    transform: rotate(30deg);
  }

  11% {
    transform: rotate(-28deg);
  }

  13% {
    transform: rotate(26deg);
  }

  15% {
    transform: rotate(-24deg);
  }

  17% {
    transform: rotate(22deg);
  }

  19% {
    transform: rotate(-20deg);
  }

  21% {
    transform: rotate(18deg);
  }

  23% {
    transform: rotate(-16deg);
  }

  25% {
    transform: rotate(14deg);
  }

  27% {
    transform: rotate(-12deg);
  }

  29% {
    transform: rotate(10deg);
  }

  31% {
    transform: rotate(-8deg);
  }

  33% {
    transform: rotate(6deg);
  }

  35% {
    transform: rotate(-4deg);
  }

  37% {
    transform: rotate(2deg);
  }

  39% {
    transform: rotate(-1deg);
  }

  41% {
    transform: rotate(1deg);
  }

  43% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(0);
  }
}


.ag-floating-filter-input .ag-input-wrapper .ag-input-field-input {
  height: 20px !important;
}

.ag-row-level-0 {
  /* background-color: #fff !important; */
}

.ag-row-level-1 {
  background-color: #FAFAFA !important;
}

.ag-row-level-2 {
  background-color: #EEEEEE !important;
}

.ag-row-level-3 {
  background-color: #E0E0E0 !important;
}

.ag-row-level-3 {
  background-color: #BDBDBD !important;
}

.ag-filter-toolpanel-search-input .ag-input-wrapper .ag-text-field-input {
  height: 30px !important;
}

.notification-li-no-pointer {
  cursor: default !important;
}

.notification-li-no-hover:hover {
  background-color: #fff !important;
}

.notification-footer-label {
  -webkit-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.1);
  -moz-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.1);
  box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.1);
}

.notification-footer-label:hover {
  background-color: #28a352 !important;
  color: white;
  font-weight: bold;
}


.editorial {
  display: block;
  width: 100%;
  height: 50px;
  max-height: 50px;
  margin: 0;
  z-index: 5;
  bottom: 0;
  /* position: absolute; */
  left: 0px;
  float: left;
}

.parallax1>use {
  animation: move-forever1 10s linear infinite;
}

.parallax1>use:nth-child(1) {
  animation-delay: -2s;
}

.parallax2>use {
  animation: move-forever2 8s linear infinite;
}

.parallax2>use:nth-child(1) {
  animation-delay: -2s;
}

.parallax3>use {
  animation: move-forever3 6s linear infinite;
}

.parallax3>use:nth-child(1) {
  animation-delay: -2s;
}

.parallax4>use {
  animation: move-forever4 4s linear infinite;
}

.parallax4>use:nth-child(1) {
  animation-delay: -2s;
}

@keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }

  100% {
    transform: translate(-90px, 0%);
  }
}

@keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

@keyframes move-forever3 {
  0% {
    transform: translate(85px, 0%);
  }

  100% {
    transform: translate(-90px, 0%);
  }
}

@keyframes move-forever4 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

/* ------------------------- ellipsis loading------------------- */
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 100px;
  height: 80px;
}

.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #000;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
  background-color: #00a745;
}

.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
  background-color: #04cc6b;

}

.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
  background-color: #26d37f;

}

.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis2 0.6s infinite;
  background-color: #69f0ae;

}

.lds-ellipsis div:nth-child(5) {
  left: 80px;
  animation: lds-ellipsis3 0.6s infinite;
  background-color: #7cffa3;

}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(24px, 0);
  }
}

/* -------------------------------------------- */
.syn-collapsible-list {
  border: none !important;
  box-shadow: none !important;
}

.syn-collapsible-list li div {
  border: none;
  padding-top: 10px;
  padding-bottom: 10px;
}

.syn-collapsible-list li .collapsible-header {
  border: 1px solid #F2F2F2;
}

.syn-collapsible-list li .collapsible-body {
  padding-top: 10px;
  padding-bottom: 10px;
}

.syn-error-input-mssg {
  color: red;
  font-size: small;
}

.syn-labelbox {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  border-radius: 7px;
  color: white;
  font-weight: bold;
  text-align: center;
}

.syn-dropdown-list li a {
  height: 100%;
}

.syn-cell-icon div {
  height: 100% !important;

}

.syn-cell-icon div span {
  height: 100% !important;
  display: flex;
  align-items: center;
}

.syn-tag-round .tagify {
  border-radius: 5px !important;
}

.syn-slim-td tr td {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.syn-record-date {
  font-size: smaller !important;
  color: gray;
  text-transform: uppercase;
}

.syn-record-title {
  font-weight: bold;
  text-transform: uppercase;
}

.syn-record-subtitle {
  font-size: smaller;
}

.syn-full-loading-screen {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 99999 !important;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}

/* ---------------------- */
.ag-details-row {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  padding-right: 0px !important;
  padding-left: 40px !important;
}

.ag-warning-red {
  background-color: lightcoral !important;
}

.ag-warning-ligth-red {
  background-color: rgb(255, 181, 181) !important;
}

.ag-warning-green {
  background-color: lightgreen !important;
}

.ag-warning-yellow {
  background-color: lightgoldenrodyellow !important;
}

.ui-datepicker {
  z-index: 99999 !important;
}

/* -------------------------------------------agg select cell */
.ag-rich-select-list {
  height: auto !important;
}

.tagify {
  /* Add These: */
  overflow-y: scroll;
  max-height: 200px;
}

.ag-checkbox-input-wrapper .ag-checkbox-input {
  pointer-events: auto !important;
}

/*-----------------------------------------------checkmark*/
.checkmark__circle {
  stroke-dasharray: 216;
  /* ORIGINALLY 166px */
  stroke-dashoffset: 216;
  /* ORIGINALLY 166px */
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #00a745;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
  width: 106px;
  /* ORIGINALLY 56px */
  height: 106px;
  /* ORIGINALLY 56px */
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px #00a745;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 98;
  /* ORIGINALLY 48px */
  stroke-dashoffset: 98;
  /* ORIGINALLY 48px*/
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

.failmark__circle {
  stroke-dasharray: 216;
  /* ORIGINALLY 166px */
  stroke-dashoffset: 216;
  /* ORIGINALLY 166px */
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #d23838;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.failmark {
  width: 106px;
  /* ORIGINALLY 56px */
  height: 106px;
  /* ORIGINALLY 56px */
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff !important;
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px #d23838;
  animation: fillfail .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.failmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 98;
  /* ORIGINALLY 48px */
  stroke-dashoffset: 98;
  /* ORIGINALLY 48px*/
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes scale {

  0%,
  100% {
    transform: none;
  }

  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 80px #00a745;
  }
}

@keyframes fillfail {
  100% {
    box-shadow: inset 0px 0px 0px 80px #d23838;
  }
}

/* --------------------------- CHACHI -------------------------------- */
.ag-theme-alpine .ag-cell-inline-editing,
.ag-theme-alpine .ag-rich-select-value {
  height: 33px !important;
}

.ag-root-wrapper .tagify {
  background: white;
  border-radius: 4px;
  line-height: 13px;
  overflow: hidden;
}

.ag-root-wrapper .input-field {
  padding-bottom: 0;
  min-height: initial !important;
  display: inline-block;
  width: 100%;
}

.ag-root-wrapper .input-field:last-child {
  margin-bottom: 0;
}

.ag-root-wrapper .input-field input {
  min-height: 32px !important;
  background: white !important;
}

.ag-root-wrapper .input-field .chosen-container {
  background: white !important;
  border-radius: 4px !important;
  margin-bottom: 0 !important;
}

.ag-root-wrapper .chosen-container-single .chosen-results li,
.ag-root-wrapper .chosen-container-multi .chosen-results li {
  padding: 4px 16px;
  font-size: 13px;
  min-height: 28px;
  line-height: 20px;
  margin: 5px 5px 5px 0;
}

.ag-root-wrapper .search-choice {
  font-size: 13px;
  min-height: 21px;
  line-height: 15px !important;
  font-weight: normal !important;
  border-radius: 4px;
  background-color: #e5e5e5;
}

.ag-root-wrapper .search-field {
  height: 32.8px;
  line-height: 21px;
  margin-top: -1px;
}

.ag-root-wrapper .input-field.solid input,
.ag-root-wrapper .input-field.solid textarea,
.ag-root-wrapper .input-field.solid .chosen-container,
.ag-root-wrapper .input-field.solid .switch {
  font-size: 13px !important;
  min-height: 32.8px !important;
}

.ag-root-wrapper .search-field input {
  margin: 0 3px !important;
}

.ag-root-wrapper .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
  top: 5px;
}

.ag-root-wrapper .input-field label {
  top: -16px !important;
  left: 0px !important;
}

.ag-root-wrapper {
  border: 0 !important;
}

.ag-border-child .ag-root-wrapper {
  border: 1px solid #babfc7 !important;
}


.ag-root-wrapper [type=checkbox]:not(:checked),
.ag-root-wrapper [type=checkbox]:checked,
.ag-root-wrapper [type=radio]:not(:checked),
.ag-root-wrapper [type=radio]:checked {
  pointer-events: initial !important;
}

.ag-root-wrapper input:not([type=checkbox]) {
  height: 100% !important;
}

.ag-root-wrapper .button-list .btn-outline,
.ag-root-wrapper .button-list select {
  margin-top: -1px;
  font-size: .8rem;
  height: 30px;
  line-height: 28px;
  color: darkslategray;
  border-color: gray;
  text-align: initial;
}

.ui-datepicker-week-col {
  text-align: center;
}

#ui-datepicker-div {
  /* margin-top: -20px;
  margin-left: -50px; */
}

.ag-root-wrapper .ag-details-grid {
  border: 1px solid #ccc;
}

.ag-root-wrapper .ag-rich-select {
  max-height: 200px;
  overflow-y: auto;
}

.ag-root-wrapper .ag-status-bar {
  line-height: 0.5 !important;
}

.ag-root-wrapper .chosen-container-single .chosen-search input[type=text],
.ag-root-wrapper .chosen-rtl .chosen-search input[type=text] {
  background-image: none !important;
}

.ag-root-wrapper button.ag-side-button-button {
  min-height: 100px !important;
}

.ag-root-wrapper .ag-side-buttons {
  padding-top: 0 !important;
}

.ag-root-wrapper .ag-row {
  font-size: 13px !important;
}

.ag-menu-list i[class^="icon-"],
.ag-side-buttons i[class^="icon-"] {
  font-size: 16px;
}

.ag-toolbar {
  color: #000;
  height: 36px;
  background-color: white;
  border-bottom: 1px solid #e0e0e0;
  padding: 3px 4px;
}

.ag-toolbar ul li.ag-toolbar-item i,
.ag-toolbar ul li.ag-toolbar-item i.material-icons {
  height: 100%;
}

.ag-toolbar ul li.ag-toolbar-item i.icon-only {
  font-size: 18px;
  line-height: 28px;
  color: #555;
}

.ag-toolbar ul li.ag-toolbar-item i.left {
  margin-right: 8px
}

.ag-toolbar ul li.ag-toolbar-item a {
  color: #000;
  height: 28px;
  line-height: 28px;
  border-radius: 3px;
  padding: 0 6px;
  font-size: 14px;
}

.ag-toolbar ul li.ag-toolbar-item {
  height: 28px;
  line-height: 25px;
}

.ag-toolbar .dropdown-content {
  padding: 8px 0;
  min-width: 300px;
}

.ag-toolbar .dropdown-content li {
  height: 28px;
  line-height: 25px;
  min-height: initial;
}

.ag-toolbar .dropdown-content li a {
  border-radius: 0 !important;
  padding: 0 12px !important;
}

.ag-toolbar .divider {
  margin: 8px 0;
}

.ag-toolbar .dropdown-content li a i {
  font-size: 14px;
  margin-right: 8px;
}

.ag-toolbar .search-field {
  margin: 0 !important;
  height: 29px !important;
  line-height: 27px !important;
  padding: 0 0 0 40px !important;
}

.ag-toolbar .search-field input {
  height: 28px !important;
  font-size: 13px !important;
  min-width: 300px;
}

.bordered {
  border: 1px solid #e0e0e0 !important;
}

.radius {
  border-radius: 6px;
}

input.pw {
  -webkit-text-security: disc;
  text-security: disc;
}

.last-added li:first-child {
  background: #f6f6f6 !important;
}

.badge-clear {
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
  font-size: .8rem;
  text-transform: uppercase;
  display: inline-block;
}

[dark-mode] .ag-toolbar {
  color: #fff;
  background-color: #1f1f1f;
  border-bottom: 1px solid #2d2d2d;
}

[dark-mode] .ag-toolbar ul li.ag-toolbar-item i.icon-only {
  color: #aaa;
}

[dark-mode] .ag-toolbar ul li.ag-toolbar-item a {
  color: #fff;
}

[dark-mode] .ag-toolbar ul li .search-field {
  background: #2d2d2d;
  border-color: #2d2d2d !important;
}

[dark-mode] .ag-toolbar .input-field.bordered.search-field:focus-within {
  background: #2d2d2d;
}

/* ----------------------------- FIN --------------------------------- */

.chosen-container-single .chosen-search input[type=text] {
  background: none !important;
}
/* ----- progress gradient*/
.gradient-complete{
  background: rgb(193,255,172);
  background: linear-gradient(90deg, rgba(193,255,172,1) 0%, rgba(128,217,86,1) 41%, rgba(0,212,24,1) 100%);
}
.gradient-over-50{
  background: rgb(193,255,172);
  background: linear-gradient(90deg, rgba(193,255,172,1) 0%, rgba(86,217,169,1) 41%, rgba(0,154,212,1) 100%);
}
.gradient-under-50{
  background: rgb(193,255,172);
  background: linear-gradient(90deg, rgba(193,255,172,1) 0%, rgba(217,198,86,1) 41%, rgba(255,157,45,1) 100%);
}

/* ---------------------------  graneros container generator + matid */
.syn-grn-generate-status{
  display: flex;
  padding-top: 8px;
  justify-content: center;
  align-content: center;
}
.syn-grn-generate-status span{
  width: 100%;
  padding: 8px;
  text-align: center;
  font-weight: bold;
  border-radius: 7px;
  color: white;
}