.loader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  background-color: #F7F7F7;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* .loader>img {
  width: 5%;
} */

.clase1>.clase2 {
  color: #0069D9;
}

.loader>#loader {
  width: 10%;
}

.loader>#loader-logo {
  position: fixed;
  width: 5%;
  z-index: 10px;
}


.cursor-pointer {
  cursor: pointer;
}

.dispper {
  animation: vanish 1.1s forwards;
}

* {
  font-family: 'Open Sans', sans-serif;
}

.bg-blueberry {
  background-color: #20233E !important;
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  background-color: rgba(0, 0, 0, 0.2);
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading img {
  width: 5%;
}

/*--------------------float buttom -------------------------*/
/* .btn-flotante {
  position: fixed;
  bottom: 50px;
  right: 50px;
  height: 41px;
  min-width: 41px;
  width: 41px;
  padding: 0;
  border-radius: 50%;
  transition: all 300ms ease 0ms;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  z-index: 99;
}

.btn-flotante-option-1 {
  position: fixed;
  bottom: 100px;
  right: 50px;
  height: 41px;
  min-width: 41px;
  width: 41px;
  padding: 0;
  border-radius: 50%;
  transition: all 300ms ease 0ms;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  z-index: 99;
} */



/* .btn-flotante:hover {
  background-color: #2c2fa5;
  box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
  transform: translateY(-5px);
} */

/* @media only screen and (max-width: 600px) {
  .btn-flotante {
    font-size: 14px;
    padding: 12px 20px;
    bottom: 20px;
    right: 20px;
  }
} */



.floating-button {
  width: 55px;
  height: 55px;
  padding: 0;
  border-radius: 50%;
  position: fixed;
  bottom: 30px;
  right: 30px;
}


#container-floating {
  position: fixed;
  width: 70px;
  height: 70px;
  bottom: 30px;
  right: 30px;
  z-index: 50px;
}

#container-floating:hover {
  height: 400px;
  width: 90px;
  padding: 30px;
}




#container-floating:hover .edit {
  animation: edit-in 0.2s;
  animation-delay: 0.1s;
  animation-fill-mode: forwards;
}

@keyframes edit-in {
  from {
    opacity: 0;
    transform: rotateZ(-70deg);
  }

  to {
    opacity: 1;
    transform: rotateZ(0deg);
  }
}

@keyframes edit-out {
  from {
    opacity: 1;
    transform: rotateZ(0deg);
  }

  to {
    opacity: 0;
    transform: rotateZ(-70deg);
  }
}

@keyframes plus-in {
  from {
    opacity: 1;
    transform: rotateZ(0deg);
  }

  to {
    opacity: 0;
    transform: rotateZ(180deg);
  }
}

@keyframes plus-out {
  from {
    opacity: 0;
    transform: rotateZ(180deg);
  }

  to {
    opacity: 1;
    transform: rotateZ(0deg);
  }
}

.nds {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  position: fixed;
  z-index: 300;
  transform: scale(0);
  cursor: pointer;
}

.nd1 {

  right: 40px;
  bottom: 100px;
  animation-delay: 0.2s;
  animation: bounce-out-nds 0.3s linear;
  animation-fill-mode: forwards;
}

.nd2 {

  right: 40px;
  bottom: 160px;
  animation-delay: 0.15s;
  animation: bounce-out-nds 0.15s linear;
  animation-fill-mode: forwards;
}

.nd3 {

  right: 40px;
  bottom: 220px;
  animation-delay: 0.15s;
  animation: bounce-out-nds 0.15s linear;
  animation-fill-mode: forwards;
}

@keyframes bounce-nds {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounce-out-nds {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0);
  }
}

#container-floating:hover .nds {

  animation: bounce-nds 0.1s linear;
  animation-fill-mode: forwards;
}

#container-floating:hover .nd3 {
  animation-delay: 0.08s;
}

#container-floating:hover .nd4 {
  animation-delay: 0.15s;
}

#container-floating:hover .nd5 {
  animation-delay: 0.2s;
}


/*----------------------------------------------------------*/

#modalForms .row {
  background-color: #ECF0F9;
}

.text-gradient {
  /* Fallback: Set a background color. */
  background-color: red;

  /* Create the gradient. */
  background-image: linear-gradient(to bottom right, #0100EC, #FB36F4);

  /* Set the background size and repeat properties. */
  background-size: 100%;
  background-repeat: repeat;

  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}


/*----------------------------------------------------------*/

.imput-disabled {
  background-color: silver;
}

.border-div {
  border-bottom: solid rgba(0, 0, 0, 0.2) 1px !important;
}

.text-blue-primary {
  color: #007BFF !important;
}

.text-yellow-warning {
  color: #FB8E03 !important;
}

#incidence-card-border {
  border: solid rgba(0, 0, 0, 0.2) 1px !important;
  height: 200px;
}

#notification-card-border-primary {
  border: solid #007BFF 1px !important;
}


#notification-card-border-warning {
  border: solid #FB8E03 1px !important;
}



.card-hover:hover {
  background: #F7F7F7;
}


.my-custom-scrollbar {
  position: relative;
  height: 400px;
  overflow: auto;
}

.wrapper-scroll-y {
  display: block;
}


@keyframes vanish {
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.ck-editor__editable {
  min-height: 300px !important;
}

@media print {
  .no-print {
    display: none;
  }

  .content-print {
    padding: 0 !important;
  }

  body {
    background-color: transparent !important;
  }

  div {
    font-size: 20px;
  }

  th {
    font-weight: bold !important;
  }

  @page {
    margin: 3%;
    margin-top: 5%;
  }

}


/* dispositivos moviles */
@media only screen and (min-width: 320px) and (max-width: 736px) {
  .loader>img {
    width: 70%;
  }

}


/* text */

.text-lg {
  font-size: 1.125rem !important;
}

.text-md {
  font-size: 1rem !important;
}

.text-sm {
  font-size: 0.875rem !important;
}

.text-xs {
  font-size: 0.75rem !important;
}

.text-xxs {
  font-size: 0.65rem !important;
}

.font-weight-bolder {
  font-weight: 700 !important;
}

/** opacity */

.opacity-0 {
  opacity: 0 !important;
}

.opacity-1 {
  opacity: 0.1 !important;
}

.opacity-2 {
  opacity: 0.2 !important;
}

.opacity-3 {
  opacity: 0.3 !important;
}

.opacity-4 {
  opacity: 0.4 !important;
}

.opacity-5 {
  opacity: 0.5 !important;
}

.opacity-6 {
  opacity: 0.6 !important;
}

.opacity-7 {
  opacity: 0.7 !important;
}

.opacity-8 {
  opacity: 0.8 !important;
}

.opacity-9 {
  opacity: 0.9 !important;
}

.opacity-10 {
  opacity: 1 !important;
}

/** border radius custon*/

.border-radius-xs {
  border-radius: 0.1rem !important;
}

.border-radius-sm {
  border-radius: 0.125rem !important;
}

.border-radius-md {
  border-radius: 0.375rem !important;
}

.border-radius-lg {
  border-radius: 0.5rem !important;
}

.border-radius-xl {
  border-radius: 0.75rem !important;
}

.border-radius-xxl {
  border-radius: 1rem !important;
}

/*--------------------------------------------------------*/

.hover-element-light:hover {
  background-color: rgb(223, 249, 251);
}




/** card */

.box-shadow-none {
  box-shadow: 0 !important;
}



/*---------------------------------------------------------*/

.upcomming {
  border-left: 14px solid rgba(255, 235, 59, 0.78);

}

/**---------------------------------------------------------*/

.document-hover:hover {
  background-color: #ecf0f1 !important;
}


.hover-element:hover {
  background-color: #ecf0f1 !important;
}

/**--------------- Proyects and task custom styles------------**/

.open-button {
  padding: 2px 5px 2px 5px !important;

}

.badge-custom-secondary {
  color: #ffffff;
  background-color: #535c68;
}

.badge-custom-secondary span {
  color: #95afc0;
}

.badge-custom-warning {
  color: #ffffff;
  background-color: #CA8E1B;
}

.badge-custom-warning span {
  color: #f9ca24;
}

.badge-custom-primary {
  color: #ffffff;
  background-color: #0069D9;
}

.badge-custom-primary span {
  color: #7ed6df;
}

.badge-custom-success {
  color: #ffffff;
  background-color: #27ae60;
}

.badge-custom-success span {
  color: #2ed573;
}

.badge-custom-danger {
  color: #ffffff;
  background-color: #c0392b;
}