/*
*	Customized CSS Style
*
*
*/

/* start:Loader */
.loader {
  border: 5px solid #f3f3f3;
  border-radius: 50%;
  border-top: 5px solid #555;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 600ms linear infinite; /* Safari */
  animation: spin 600ms linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* end:Loader */

/* ---------------------------------------------------------------------- */
/*  Custom styles by roland
/* ---------------------------------------------------------------------- */

/* hindi kasi gumagana inside .swMain wizard form*/
.loader-2 {
  border: 5px solid #f3f3f3;
  border-radius: 50%;
  border-top: 5px solid #555;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 600ms linear infinite; /* Safari */
  animation: spin 600ms linear infinite;
}
.loader-2 {
  position: absolute;
  top: 45%;
  left: 45%;
  z-index: 100;
}

/* ---------------------------------------------------------------------- */
/*  Custom styles for Vue
/* ---------------------------------------------------------------------- */

[v-cloak] {
  visibility: hidden;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* ---------------------------------------------------------------------- */
/*  Custom styles for Switchery
/* ---------------------------------------------------------------------- */

.switchery-time-in {
  transform: scale(0.8);
}

/* ---------------------------------------------------------------------- */
/*  Custom styles for some elements
/* ---------------------------------------------------------------------- */

.alert-stale {
  background-color: #f0f0f0;
}

/* ---------------------------------------------------------------------- */
/*  Custom styles for Ticket Typing
/* ---------------------------------------------------------------------- */

.tc-remittance-row {
  cursor: pointer;
  transition: 50ms ease-in-out;
}

.tc-remittance-row:hover {
  background-color: #ecfdf5 !important;
}

.tc-remittance-row-selected {
  font-weight: bold;
  background-color: #ecfdf5 !important;
}

.tc-booklet-head {
  transition: 50ms ease-in-out;

  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.tc-booklet-head:hover {
  background-color: #f0f9ff;
  color: #000000;
}

.tc-booklet-head:active {
  opacity: 0.8;
}

.tc-input input[type='text'] {
  transition: none;
}

.tc-input input[type='text']:focus {
  outline-color: #373737;
  outline-style: solid;
  outline-width: 1.5px;
}

.tc-input .tc-input-saved,
.tc-input .tc-input-saved:focus {
  background-color: #ecfdf5;
  border-color: #67be77 !important;
  font-weight: bold;
}

.tc-input .tc-input-filled,
.tc-input .tc-input-filled:focus {
  background-color: #f0f9ff !important;
}

.tc-input .tc-input-changed,
.tc-input .tc-input-changed:focus {
  background-color: #fffbeb !important;
}

.tc-input .tc-input-zero-value,
.tc-input .tc-input-zero-value:focus {
  color: #d4380d !important;
}

.tc-input .tc-input-transferred,
.tc-input .tc-input-transferred:focus {
  color: #c41d7f !important;
  /* background: #fff0f6 !important; */
  border-color: #ffadd2 !important;
}