/* Accordion */
.accordion.rc-collapse {
  @apply bg-transparent border-0 space-y-2.5;
}
.accordion.rc-collapse > .rc-collapse-item {
  @apply px-6 bg-gray-200 border-0 rounded-md;
}
.accordion.rc-collapse > .rc-collapse-item > .rc-collapse-header {
  @apply px-0 py-4 outline-none;
}
.accordion.rc-collapse > .rc-collapse-item > .rc-collapse-header h3 {
  @apply py-0.5 transition duration-200 ease-in;
  letter-spacing: 0.015em;
}
.accordion.rc-collapse > .rc-collapse-item > .rc-collapse-header:hover h3 {
  @apply text-black;
}
.accordion.rc-collapse > .rc-collapse-item > .rc-collapse-content {
  @apply py-0 pl-0 bg-transparent ltr:pr-32 rtl:pl-32 text-body;
}
.accordion.rc-collapse
  > .rc-collapse-item
  > .rc-collapse-content
  > .rc-collapse-content-box {
  @apply pb-5 my-0 text-sm leading-6;
}

.react-tabs__tab--selected {
  @apply font-semibold  rounded-md bg-gray-100 !important;
}

.react-stars {
  @apply space-x-0.5;
}

/* React toastify */
.Toastify .fancy-progress-bar {
  background: rgba(255, 255, 255, 0.45);
}
.Toastify__toast-theme--colored.Toastify__toast--dark {
  background-color: #121212 !important;
}
@media (max-width: 480px) {
  .Toastify .Toastify__toast-container--top-left,
  .Toastify .Toastify__toast-container--top-center,
  .Toastify .Toastify__toast-container--top-right {
    top: 66px;
  }
  .Toastify .Toastify__toast-container {
    width: calc(100vw - 32px);
    left: 50%;
    transform: translateX(-50%);
    border-radius: 4px;
    overflow: hidden;
  }
}
.drawer-search {
  transform: translate(-50%, 50px);
}
.drawer-search.open {
  @apply fixed top-0 visible block opacity-100;
  transform: translate(-50%, 0);
}
.overlay {
  background-color: rgba(0, 0, 0, 0.35);
  z-index: 21;
  visibility: hidden;
  @apply w-full;
  @apply h-full;
  @apply flex;
  @apply fixed;
  @apply opacity-0;
  @apply top-0;
  @apply ltr:left-0 rtl:right-0;
  transition: 0.35s ease-in-out;
}
.overlay.open {
  @apply opacity-100;
  visibility: visible;
}
/*
* RC Pagination
*/
.rc-pagination {
  @apply flex flex-wrap items-center;
}

.rc-pagination .rc-pagination-item,
.rc-pagination .rc-pagination-prev,
.rc-pagination .rc-pagination-next,
.rc-pagination.rc-pagination-simple .rc-pagination-prev,
.rc-pagination.rc-pagination-simple .rc-pagination-next {
  @apply flex items-center justify-center w-8 h-8 mt-2 transition-all bg-white border border-gray-300 rounded cursor-pointer ltr:mr-2 rtl:ml-2 hover:border-heading hover:text-heading focus:border-gray-100 focus:text-heading;
}
.rc-pagination .rc-pagination-next {
  @apply mr-0;
}

.rc-pagination .rc-pagination-prev.rc-pagination-disabled,
.rc-pagination .rc-pagination-next.rc-pagination-disabled {
  @apply border-gray-100 text-body text-opacity-60 hover:text-body hover:border-gray-200 hover:text-opacity-60 focus:border-gray-200 focus:text-opacity-60;
}

.rc-pagination .rc-pagination-prev svg,
.rc-pagination .rc-pagination-next svg {
  @apply w-4 h-4 rtl:transform rtl:rotate-180;
}

.rc-pagination .rc-pagination-item:focus a,
.rc-pagination .rc-pagination-item:hover a {
  @apply text-heading;
}

.rc-pagination .rc-pagination-item.rc-pagination-item-active {
  @apply border-heading bg-heading text-body;
}

.rc-pagination .rc-pagination-item.rc-pagination-item-active a {
  @apply text-white hover:text-white focus:text-white;
}

.rc-pagination .rc-pagination-options .rc-pagination-options-quick-jumper,
.rc-pagination.rc-pagination-simple .rc-pagination-simple-pager {
  @apply flex items-center text-sm font-body text-heading;
}

.rc-pagination .rc-pagination-options .rc-pagination-options-quick-jumper input,
.rc-pagination.rc-pagination-simple .rc-pagination-simple-pager input {
  @apply h-8 px-2 text-sm border border-gray-200 rounded bg-gray-50 font-body text-heading hover:border-gray-200 focus:border-gray-200 focus:outline-none;
}

/* Order Table */
.rc-table {
  @apply pb-1 overflow-hidden border border-separate border-gray-100 rounded-md md:pb-3;
  border-spacing: 0;
}

.rc-table .rc-table-content,
.rc-table .rc-table-body,
.rc-table .rc-table-header {
  @apply border-0;
}

.rc-table tr th {
  @apply border-0 border-b border-gray-100;
}

.rc-table tr td {
  @apply border-0;
}

.rc-table thead.rc-table-thead th {
  @apply bg-gray-100 py-3 px-4 md:px-5 font-body font-bold text-sm md:text-[15px] lg:text-base text-heading border-gray-100;
}
.rc-table .rc-table-cell.rc-table-cell-row-hover {
  @apply bg-gray-200;
}
.rc-table tr.rc-table-row:hover {
  background-color: inherit;
}

.rc-table tr.rc-table-row td {
  @apply pt-4 pb-1 px-3 md:px-6 font-body text-sm md:text-[15px] font-normal text-heading;
}

.rc-table tr.rc-table-row:not(.rc-table-expanded-row) {
  cursor: pointer;
}

.rc-table tr.rc-table-expanded-row > td {
  @apply p-0 whitespace-normal border border-gray-50;
}

.rc-table tr.rc-table-expanded-row tr.rc-table-row {
  cursor: default;
}

.rc-table .rc-table-expanded-row-fixed::after {
  border-width: 0;
}
.subOrderTable.rc-table {
  @apply pb-0;
}
.subOrderTable.rc-table thead.rc-table-thead th:first-of-type,
.subOrderTable.rc-table tr.rc-table-row td:first-of-type {
  @apply ltr:pl-7 rtl:pr-7;
}
.subOrderTable.rc-table tr.rc-table-row td {
  @apply px-4 py-6 md:px-5;
}

/* React Tel Input */
.react-tel-input .selected-flag.open::before,
.react-tel-input .selected-flag:focus::before {
  border-color: transparent !important;
  box-shadow: none !important;
}
.react-tel-input .country-list {
  margin-top: 7px !important;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0) !important;
}
.rtl-view .react-tel-input .selected-flag {
  @apply pr-3;
}
.rtl-view .react-tel-input .selected-flag .arrow {
  @apply left-auto right-8;
}

/* card view table */
.card-view-table {
  @apply pb-0;
}
.card-view-table table {
  border-collapse: unset;
}
.card-view-table .rc-table-thead tr th {
  @apply border-b-0 bg-[#F7F7FA] py-4;
}
.card-view-table .rc-table-tbody tr td {
  @apply border-0 border-b border-solid border-[#e1e7ec] py-5 transition-all duration-300;
}
.row-highlight .rc-table-cell {
  @apply bg-[#F7F7F7];
}
.rc-table-cell.rc-table-cell-row-hover .default-card-button,
.rc-table-cell.rc-table-cell-row-hover .make-default-card {
  @apply opacity-100;
}
.row-highlight .rc-table-cell.rc-table-cell-row-hover {
  @apply !bg-[#ebebeb];
}
.card-view-table .rc-table-tbody tr:last-child td {
  @apply border-b-0;
}
.notify-button:hover .notify-button-icon svg {
  animation: 4s ease-in-out 0.05s infinite normal none running ring;
  transform-origin: 50% 4px;
}

@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);
  }
}
.info-button:hover .info-button-icon svg {
  animation: 2s ease-in-out 0s infinite normal none running shake;
}

@keyframes shake {
  0%,
  20%,
  80%,
  100% {
    transform: translateX(0px);
  }
  40% {
    transform: translateX(-5px);
  }
  60% {
    transform: translateX(6px);
  }
}

.lang-switch-icon {
  animation: 0.7s ease-in-out 0s infinite alternate none running blink;
}

@keyframes blink {
  0% {
    transform: translateY(5px) scale(0.8);
  }
  100% {
    transform: translateY(0px) scale(1);
  }
}

/* some utilities that are not been supported yet in Tailwind v2 */
.use-blur-backdrop {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}