.field-module__root {
    /* composes: content-start from global; */
    /* composes: grid from global; */
}

.field-module__label {
    /* composes: flex from global;
    composes: font-semibold from global;
    composes: items-center from global;
    composes: justify-between from global;
    composes: leading-none from global;
    composes: px-0.5 from global;
    composes: py-2.5 from global;
    composes: text-colorDefault from global;
    min-height: 2.125rem; */
    color: #000000;
    text-transform: capitalize;
    letter-spacing: 0px;
}

.field-module__input:disabled {
    background: rgb(var(--venia-global-color-gray-100));
    border-color: rgb(var(--venia-global-color-gray-400));
    color: rgb(var(--venia-global-color-gray-darker));
}

.field-module__optional {
}

/* For Mobile */

.field-module__root {
    padding-bottom: 0px;
}

.field-module__label {
    font-weight: 300;
    display: flex;
    font-size: 0.8125rem;
    text-transform: capitalize;
    letter-spacing: 0px;
    --tw-text-opacity: 1;
    color: rgba(0, 0, 0, var(--tw-text-opacity));
}

.field-module__input {
    font-size: 0.8125rem;
}

@media (min-width: 1120px) {

    .field-module__input {
        font-size: 1rem;
    }
}

.field-module__input {
    outline: none;
    border-bottom: 1px solid #707070;
    width: 19rem;
    height: 1.5rem;
    /* font-size: 0.8125rem; */

    color: #000000;
}

.field-module__input[type='number']::-webkit-inner-spin-button,
.field-module__input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0; /* Removes the default margin */
}

/* For Firefox */

@-moz-document url-prefix() {
    .field-module__input:focus-visible {
        outline: none;
    }
    .field-module__input[type='number'] {
        -moz-appearance: textfield; /* Firefox */
    }
    .field-module__input[type='number']::-webkit-inner-spin-button,
    .field-module__input[type='number']::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0; /* Removes the default margin */
    }
}

/* For Desktop */

@media (min-width: 800px) {
    .field-module__root {
        padding-bottom: 1rem;
    }
    .field-module__input {
        line-height: 2rem;
    }
    .field-module__input {
        height: 2.2rem;
    }
    .field-module__input {
        width: 100%;
    }
    .field-module__input {
        font-size: 1rem;
    }
    .field-module__label {
        font-size: 1rem;
    }
    .field-module__label {
        display: flex;
    }
}

/* .input {
    composes: input from '../Field/field.module.css';

    composes: disabled_text-subtle from global;
}

.input_error {
    composes: input from '../Field/field.module.css';

    composes: border-error from global;
}

.input_shimmer {
    composes: h-[2.5rem] from global;
    composes: m-0 from global;
    composes: max-w-full from global;
    composes: rounded-md from global;
    composes: w-full from global;
    font-size: 1rem;
    /* padding: calc(0.375rem - 1px) calc(0.625rem - 1px); */
/* } */
.textInput-module__input{
    border-bottom: 1px solid black;
    height: 2.5rem;
    outline: none;
    border-radius: 0;
}

.Button-module__root {
    position: relative;
    z-index: 1;
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0.25rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgba(0, 0, 0, var(--tw-border-opacity));
    background-image: none;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.5rem;
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 384ms;
    transition-duration: 150;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}

.Button-module__root[disabled] {
    pointer-events: none
}

.Button-module__root[disabled] {
    border-width: 1px
}

.Button-module__root:hover {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgba(0, 0, 0, var(--tw-border-opacity));
    --tw-text-opacity: 1;
    color: rgba(0, 0, 0, var(--tw-text-opacity))
}

.Button-module__root:focus {
    border-width: 1px;
    outline: 2px solid transparent;
    outline-offset: 2px
}

.Button-module__root:focus-visible {
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.Button-module__root[data-active] {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-gray) / var(--tw-bg-opacity))
}

.Button-module__loading {
    cursor: not-allowed;
    --tw-bg-opacity: 1;
    background-color: rgba(112, 112, 112, var(--tw-bg-opacity))
}

/* Primary btn */

.Button-module__primary {
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity))
}

.Button-module__primary::before {
    position: absolute
}

.Button-module__primary::before {
    left: 0px;
    right: 0px
}

.Button-module__primary::before {
    top: 100%
}

.Button-module__primary::before {
    bottom: 0px
}

.Button-module__primary::before {
    z-index: -1
}

.Button-module__primary::before {
    content: ""
}

.Button-module__primary:hover {
    border-width: 1px
}

.Button-module__primary:hover {
    --tw-border-opacity: 1;
    border-color: rgba(168, 153, 104, var(--tw-border-opacity))
}

.Button-module__primary:hover {
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity))
}

.Button-module__primary:hover::before {
    top: 0px
}

.Button-module__primary:before {
    --tw-bg-opacity: 1;
    background-color: rgba(168, 153, 104, var(--tw-bg-opacity));
    -webkit-transition: top 150ms ease-in-out
}

/* Secondary btn */

.Button-module__secondary {
    --tw-border-opacity: 1;
    border-color: rgba(0, 0, 0, var(--tw-border-opacity));
    background-image: none;
    --tw-text-opacity: 1;
    color: rgba(0, 0, 0, var(--tw-text-opacity))
}

.Button-module__secondary::before {
    position: absolute
}

.Button-module__secondary::before {
    left: 0px;
    right: 0px
}

.Button-module__secondary::before {
    top: 100%
}

.Button-module__secondary::before {
    bottom: 0px
}

.Button-module__secondary::before {
    z-index: -1
}

.Button-module__secondary::before {
    content: ""
}

.Button-module__secondary:hover {
    border-width: 1px
}

.Button-module__secondary:hover {
    --tw-border-opacity: 1;
    border-color: rgba(0, 0, 0, var(--tw-border-opacity))
}

.Button-module__secondary:hover {
    background-image: none
}

.Button-module__secondary:hover {
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity))
}

.Button-module__secondary:hover::before {
    top: 0px
}

.Button-module__secondary:before {
    --tw-bg-opacity: 1;
    background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
    -webkit-transition: top 150ms ease-in-out
}

/* Disabled  */

.Button-module__disabled, .Button-module__disabled:hover {
    cursor: not-allowed;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgba(0, 0, 0, var(--tw-border-opacity));
    opacity: 0.5
}

/* Link */

.Button-module__link {
    margin: 0px;
    border-width: 0px;
    background-image: none;
    padding: 0px;
    font-weight: 500;
    text-transform: none;
    --tw-text-opacity: 1;
    color: rgba(168, 153, 104, var(--tw-text-opacity));
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.Button-module__link:hover {
    border-width: 0px
}

.Button-module__link:hover {
    background-image: none
}

.Button-module__link:hover {
    text-decoration: underline
}

/* Simple */

.Button-module__slim {
    transform: none;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-transform: none
}

.Button-module__quickAdd {
    display: grid;
    width: 91.666667%;
    place-content: center;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    font-family: Lato, sans-serif;
    font-size: 0.875rem;
    font-weight: 700
}

.Button-module__quickAdd:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-gray) / var(--tw-bg-opacity))
}

span {
    display: flex
}
.fieldIcons-module__root {
    /* composes: grid-flow-col from global; */
    /* composes: inline-grid from global; */
    grid-template-areas: 'before input after';
    grid-template-columns: auto 1fr auto;
    display: grid;
}

.fieldIcons-module__input {
    grid-column: before-start / after-end;
    grid-row: input-start / input-end;
    color: #000000;
    background-color: #fff;
    flex-grow: 1;
}

/* TODO @TW: cannot compose */

.fieldIcons-module__input > input {
    /* padding-left: calc(1.875rem * var(--iconsBefore) + 0.625rem); */
    /* padding-right: calc(1.875rem * var(--iconsAfter) + 0.625rem); */
    height: 1.6rem;
    font-size: 0.8125rem;
}

@media (min-width: 1120px) {

    .fieldIcons-module__input > input {
        height: 2.5rem;
    }

    .fieldIcons-module__input > input {
        font-size: 1rem;
    }
}

.fieldIcons-module__input > input {
    flex-grow: 1;
    width: 100%;
    border-bottom: 1px solid black;
    height: 2.5rem;
    outline: none;
    border-radius: 0;
}

.fieldIcons-module__before,
.fieldIcons-module__after {
    /* composes: items-center from global; */
    /* composes: justify-center from global; */
    /* composes: w-[2.5rem] from global; */
    color: black;
}

/* TODO @TW: cannot compose */

.fieldIcons-module__before:empty,
.fieldIcons-module__after:empty {
    display: none;
}

.fieldIcons-module__before {
    grid-area: before;
}

.fieldIcons-module__after {
    grid-area: after;
}

/* TODO @TW: cannot compose */

.fieldIcons-module__before svg {
    /* composes: stroke-gray-600 from global; */
    stroke: rgb(var(--venia-global-color-gray-600));
}

/* For Mobile */

.fieldIcons-module__root{
    /* @apply h-0 */
  }

/* For Desktop */

@media (min-width: 800px){
    .fieldIcons-module__root{
      /* @apply h-[2.5rem] */
    }
}
.message-module__root {
}

/* TODO @TW: cannot compose */

.message-module__root:empty {
    display: none;
}

.message-module__root_error {
    text-align: start;
    font-size: 12px;
}

@media (min-width: 1120px) {

    .message-module__root_error {
        font-size: 14px;
    }
}

body:has(.message-module__isUrdu) .message-module__root_error {
    font-size: 0.75rem;
}

@media (min-width: 1199px) and (max-width: 1400px) {
    .message-module__root {
    font-size: 11px !important;
    } 
}
.LoadingDots-module__root {
        display: inline-flex;
        align-items: center;
        text-align: center;
        line-height: 1.75rem
}

.LoadingDots-module__root span {
        height: 0.5rem
}

.LoadingDots-module__root span {
        width: 0.5rem
}

.LoadingDots-module__root span {
        border-radius: 9999px
}

.LoadingDots-module__root span {
        --tw-bg-opacity: 1;
        background-color: rgb(var(--color-gray) / var(--tw-bg-opacity))
}

.LoadingDots-module__root span {
        animation-name: LoadingDots-module__blink;
        animation-duration: 1.4s;
        animation-iteration-count: infinite;
        animation-fill-mode: both;
        margin: 0 2px
    }

.LoadingDots-module__root span:nth-of-type(2) {
            animation-delay: 0.2s;
        }

.LoadingDots-module__root span:nth-of-type(3) {
            animation-delay: 0.4s;
        }

@keyframes LoadingDots-module__blink {
    0% {
        opacity: 0.2;
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0.2;
    }
}