@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-4xl font-bold;
  }

  h2 {
    @apply text-3xl font-semibold;
  }

  h3 {
    @apply text-2xl font-semibold;
  }

  h4 {
    @apply text-xl font-medium;
  }

  h5 {
    @apply text-lg font-medium;
  }

  h6 {
    @apply text-base font-normal;
  }
}


.text-base {
    font-size: 1.125rem !important; /* same as text-base */
}
.text-sm {
    font-size: 17px !important; /* same as text-base */
}

.form-input {
  @apply w-full px-4 py-2 text-sm rounded-md text-[#1a1a1a] bg-white border border-[#d1d5db] focus:outline focus:outline-1 focus:outline-[#adadad] placeholder:text-[#9ca3b7];
}

select.form-input option {
  @apply !text-base;
}

.date-no-icon {
  -moz-appearance: textfield;
}

.date-no-icon::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

body {
  @apply font-sans text-gray-900 bg-gray-50;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 18px;
}

.text-label-th {
  font-size: 12px !important;
  margin-bottom: 6px !important;
  margin-top: 4px !important;
}

.text-modal-th {
  font-size: 16px;
}

#UI_Render .vf-error {
  font-size: 12px !important;
}

/* Hide "show password" eye in Edge/IE */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

/* Hide Chrome/Opera/other WebKit based browsers decorations */
input[type="password"]::-webkit-textfield-decoration-container {
  visibility: hidden;
  pointer-events: none;
}

/* Chrome, Safari, Edge */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

.underline-effect {
  @apply relative;
}

.underline-effect::after {
  @apply content-[''] absolute w-full h-2 left-0 bottom-[-4px] bg-white origin-bottom-right hover:origin-bottom-left scale-x-0 hover:scale-x-100 transition-transform duration-300;
}

.underline-effect.active::after {
  @apply scale-x-100;
  /* Always show the underline at full width */
}

.splide__slide img {
  width: 100%;
  height: auto;
}

.carousel-caption {
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
}

.carousel-caption h3 {
  margin: 0;
  font-size: 1.5rem;
}

.carousel-caption p {
  margin: 0;
  font-size: 1rem;
}

#leadsTable_filter input[type='search'] {
  @apply focus:outline-none rounded !important
}


.paginate_button {
  @apply px-2 py-1 !important
}


.submenu-left {
  left: 2.75rem;
  /* left-11 */
  transition: left 0.3s ease;
}

.submenu-right {
  left: 17rem;
  transition: left 0.3s ease;
}



.dataTables_wrapper .dataTables_paginate .paginate_button {
  background-color: #ffffff !important;
  border-radius: 6px;
  padding: 6px 12px;
  margin: 0 2px;
  border: 1px solid #cdd6e1 !important;
  cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background-color: #ff7959 !important;
  color: #ffffff !important;
  border-color: #ff7959 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: white !important;
  background: #ff7959 !important;
  border-color: #ff7959 !important;
}

#quotationTable_wrapper .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  color: #ffffff !important;
}

.paginate_button.previous.disabled:hover,
.paginate_button.next.disabled:hover {
  background: none !important;
  border: 1px solid #cdd6e1 !important;
}

.dataTables_info {
  @apply !pl-5 py-2
}

.dataTables_paginate.paging_simple_numbers {
  @apply py-2 whitespace-nowrap
}

.dataTables_length {
  @apply whitespace-nowrap
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

#button-to-top {
  display: inline-block;
  background-color: #ff7959;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: -10px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#button-to-top::after {
  content: "↑";
  font-weight: bold;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}
#button-to-top:hover {
  cursor: pointer;
  background-color: #333;
}
#button-to-top:active {
  background-color: #555;
}
#button-to-top.show {
  opacity: 0.9;
  visibility: visible;
}

@media (min-width: 500px) {

  #button-to-top {
    margin: 30px;
  }
}

@media (max-width: 500px) {

  #button-to-top {
    right: 10px;
  }
}


.k-pager-numbers-wrap {
    display: flex;
    flex-direction: row;
    position: relative;
}

.k-pager-sizes {
    gap: 1ex;
}

.k-pager-info, .k-pager-sizes, .k-pager-input {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.k-pager-responsive {
    flex-wrap: nowrap;
}

.k-pager {
    outline: 0;
    white-space: nowrap;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    overflow: hidden;
    cursor: default;
    flex: 0 0 auto;
    justify-content: space-between;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.k-pager-sizes .k-picker,
.k-pager-sizes > span {
    display: block !important;
}

.k-pager-sizes .k-picker {
    border: 1px solid #d8d7d9;
    padding: 4px;
}

    .k-pager-sizes .k-picker .k-input-button {
        height: 24px;
        background: transparent;
        box-shadow: none;
        border: 0;
    }

.k-pager-input .k-numerictextbox .k-input-inner {
    margin-bottom: 0;
}

.k-pager-sizes .k-input-inner, .k-pager-sizes .k-input-value-text {
    text-overflow: clip
}

.k-pager-info {
    text-align: end;
    justify-content: flex-end;
    flex: 1 1 0%;
    order: 9
}