:root {
    --transparent: transparent;
    --black: #22292f;
    --white: white;
    --white-50: rgba(255, 255, 255, 0.5);
    --danger: #e74444;
    --success: #21b978;
    --warning: #ffeb3b;
    --info: #03a9f4;
    --primary: #4099de;
    --primary-dark: #297ec0;
    --primary-70: rgba(64, 153, 222, 0.7);
    --primary-50: rgba(64, 153, 222, 0.5);
    --primary-30: rgba(64, 153, 222, 0.3);
    --primary-10: rgba(64, 153, 222, 0.1);
    --logo: #252d37;
    --sidebar-icon: #b3c1d1;
    --20: #f6fbff;
    --30: #f4f7fa;
    --40: #eef1f4;
    --50: #e3e7eb;
    --60: #bacad6;
    --70: #b3b9bf;
    --80: #7c858e;
    --90: #3c4b5f;
    --90-half: rgba(40, 54, 61, 0.5);
    --warning-light: #fff382;
    --warning-dark: #684f1d;
    --success-light: #c6f6d5;
    --success-dark: #38a169;
    --danger-light: #fed7d7;
    --danger-dark: #e53e3e;
    --info-light: #bee3f8;
    --info-dark: #3182ce;
}

.bg-logo {
    background: white;
}

/* Sidebar */
.bg-grad-sidebar {
    background-image: linear-gradient(0deg, #7e8ea1 0%, #3c4655 100%);
    background-attachment: fixed;
}

input.checkbox[type="radio"] {
    background-image: none !important;
    border-radius: 50% !important;
    color: initial !important;
    background-color: white !important;
}

input.checkbox[type="radio"]:checked {
    box-shadow: 0 0 0 .35rem #4099de inset;
}

div[dusk="matters-search-input"] div.text-70::after {
    content: " Client or Matter No.";
}

@media screen and (max-width: 992px) {

    div[dusk$='index-component'] .btn[dusk='create-button']::before, div[dusk$='index-component'] .btn[dusk='attach-button']::before {
        content: "";
        position: static;
    }

    div[dusk$='index-component'] .btn[dusk='create-button'], div[dusk$='index-component'] .btn[dusk='attach-button'] {
        font-weight: bolder;
        width: auto;
        font-size: 16px;
    }

    html:not([dir="rtl"]) div[dusk$='index-component'] .btn[dusk='create-button']::before, html:not([dir="rtl"]) div[dusk$='index-component'] .btn[dusk='attach-button']::before {
        margin-right: 0;
    }

    .modal {
        top: 25%;
        margin: 0 .5rem;
    }

    #amount {
        width: 100%;
    }

    #rate_employee, #rate_client {
        width: 95%;
        margin-left: 1rem;
        margin-top: .5rem;
    }

    span.flex.items-center.leading-normal.rounded.rounded-r-none.border.border-r-0.border-60.px-3.whitespace-no-wrap.bg-30.text-80.text-sm.font-bold {
        display: none !important;
    }

    html:not([dir="rtl"]) .h-header .dropdown-trigger {
        margin-right: 0 !important;
    }

    .h-header .dropdown-trigger span, .h-header .dropdown-trigger svg {
        display: block;
    }

    button[data-testid="import-action-back-button"] {
        margin-left: 0;
    }

    select[data-testid="action-select"] {
        margin-left: 0;
    }

    .flex.items-center.mr-3 {
        margin-right: 0;
    }

    .flex.w-full.justify-end.items-center {
        width: auto;
    }

    div[dusk$='detail-component'] > div > div.flex.items-center.mb-3 > div.ml-3.w-full.flex.items-center {
        padding-top: 0;
        display: flex;
        justify-content: flex-end;
    }

    div[dusk$='detail-component'] > div > div.flex.items-center.mb-3 {
        display: flex;
    }

    .w-sidebar {
        padding-top: 4rem !important;
    }

    div.absolute.pin-t.pin-l.pin-r.bg-logo.flex.items-center.w-sidebar.h-header.px-6.text-white {
        position: relative !important;
        display: block !important;
        background: transparent !important;
        margin-left: -2rem;
        height: auto !important;
        padding-bottom: .5rem;
    }

    div.absolute.pin-t.pin-l.pin-r.bg-logo.flex.items-center.w-sidebar.h-header.px-6.text-white > div.h-full.py-2.w-full > img.h-full.max-h-90px {
        max-height: 3rem;
    }

    div.modal > div.relative.mx-auto.flex.justify-center.z-20.py-view > div > div.bg-white.rounded-lg.shadow-lg.overflow-hidden {
        width: auto !important;
    }

}

@media screen and (max-width: 540px) {

    div.bg-clip.w-48.uppercase.font-bold.text-xs.text-80.tracking-wide.px-3.py-3 {
        width: 50%;
    }

    div.flex.flex-grow.border-b.border-50.key-value-fields > div.w-48.cursor-text {
        width: 50%;
    }

    div.flex.flex-grow.border-b.border-50.key-value-fields > div.flex-grow.border-l.border-50 {
        width: 50%;
    }

    html:not([dir="rtl"]) div[dusk$='index-component'] .btn[dusk='create-button']::before, html:not([dir="rtl"]) div[dusk$='index-component'] .btn[dusk='attach-button']::before {
        margin-right: 20px;
    }

    div[dusk$='index-component'] .btn[dusk='create-button']::before, div[dusk$='index-component'] .btn[dusk='attach-button']::before {
        content: "+";
        position: relative;
    }

    div[dusk$='index-component'] .btn[dusk='create-button'], div[dusk$='index-component'] .btn[dusk='attach-button'] {
        font-weight: bolder;
        font-size: 26px;
        padding: 0 12px;
        width: 39px;
        overflow: hidden;
    }

    div[dusk$='detail-component'] > div > div.flex.items-center.mb-3 > div.ml-3.w-full.flex.items-center {
        padding-top: 1.5rem;
        display: block;
    }

    div[dusk$='detail-component'] > div > div.flex.items-center.mb-3 {
        display: block;
    }

    .flex.mb-6 {
        flex-wrap: wrap;
    }

    .flex-no-shrink.ml-auto {
        margin-left: auto !important;
        margin-top: 0 !important;
    }

    select[dusk=action-select] {
        width: 7rem;
        margin-right: .2rem;
    }

    .flex.mb-6 > .ml-auto {
        margin-left: 0;
        margin-top: 1rem;
    }

    .mb-6 > .form-input-password > #password {
        margin-left: 0 !important;
        width: 100% !important;
    }

    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
        overflow-x: hidden !important;
    }

    thead {
        display: none;
    }

    td {
        width: 100% !important;
        margin: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 0 !important;
        padding-right: 1.5rem !important;
    }

    td:first-child {
        border-top: 7px solid #EEF1F4;
    }

    td:last-child {
        border-bottom: 2px solid #EEF1F4;
        display: flex;
        justify-content: center;
        padding-left: 2rem !important;
    }

    td:not(:last-child):before {
        content: attr(data-th);
        background-color: #F4F7FA;
        display: flex;
        font-weight: 800;
        text-align: center;
        height: 100%;
        vertical-align: middle;
        align-items: center;
        width: 40% !important;
        justify-content: center;
        word-wrap: break-word;
        color: #7c858e;
        padding: 0 .5rem 0 .5rem;
    }

    td > div {
        text-align: right !important;

    }

    td > div > span {
        white-space: normal !important;
    }

    [id^=popover] {
        left: -30% !important;
    }

    #password, #password_confirmation {
        margin-left: 1.5rem;
        width: 90%;
    }

    a.btn.btn-link.dim.cursor-pointer.text-80.ml-auto.mr-6 {
        margin-bottom: 1rem;
        margin-right: .8rem;
    }

}

@media screen and (max-width: 320px) {
    td, td:not(:last-child):before {
        font-size: .9rem;
    }

    td {
        padding-right: .5rem !important;
    }

    [id^=popover] {
        left: -45% !important;
    }

    label[for=password], label[for=password_confirmation] {
        font-size: .8rem;
    }
}

@media screen and (max-width: 1370px) {
    .btn[dusk='run-action-button-generate-project billing'] {
        white-space: nowrap;
    }

    .btn[dusk='run-action-button-generate-retainer billing'] {
        white-space: nowrap;
    }

    div[dusk='external-billings-index-component'] > div.flex {
        flex-wrap: wrap;
    }
}

.form-input-password {
    position: relative;

}

.form-input-password .form-input-icon {
    position: absolute;
    top: 6px;
    right: 1rem;
    cursor: pointer;
}

[data-ref="currency-PHP"] ~ p::before {
    content: 'PHP'
}

[data-currency="currency-PHP"] ~ p::before {
    content: 'PHP'
}

.btn[dusk='run-action-button-external-time billing'] {
  order: 1 !important;
}

.btn[dusk='run-action-button-generate-project billing'] {
  order: 2 !important;
}

.btn[dusk='run-action-button-generate-retainer billing'] {
  order: 3 !important;
}

.btn[dusk='run-action-button-internal-expense billing'] {
  order: 1 !important;
}

.btn[dusk='run-action-button-internal-time billing'] {
  order: 2 !important;
}

.btn[dusk='run-action-button-generate-reimbursement request'] {
  order: 5 !important;
}

.btn[dusk='run-action-button-ope-billing'] {
  order: 4 !important;
}