body {
    font-family: "Plus Jakarta Sans", sans-serif;
    background: #FAFAF9;
    font-size:13px;
}

/* Element 147 */
.element-147 {
    position: fixed;
    left: 3%;
    right: 59.52%;
    top: 72.01%;
    bottom: -43.66%;

    background: #FFE5DA;
    filter: blur(300px);
    transform: matrix(-0.08, 1, 1, 0.08, 0, 0);
    z-index: -1;
    overflow: hidden;
}

/* Element 150 */
.element-150 {
    position: fixed;
    left: 101.76%;
    right: -12.64%;
    top: 59.62%;
    bottom: 1.97%;

    background: #FFE8AB;
    opacity: 0.7;
    filter: blur(150px);
    transform: matrix(0, -1, -1, 0, 0, 0);
    z-index: -1;
    overflow: hidden;
}

/* Element 149 */
.element-149 {
    position: fixed;
    left: 41.3%;
    right: 27.91%;
    top: 94.91%;
    bottom: -101.74%;

    background: #DAD5F7;
    opacity: 0.2;
    filter: blur(100px);
    transform: matrix(0, -1, -1, 0, 0, 0);
    z-index: -1;
    overflow: hidden;
}

/* Element 151 */
.element-151 {
    position: fixed;
    left: 84.37%;
    right: -9.51%;
    top: 47.74%;
    bottom: 4.19%;

    background: #DADDFF;
    filter: blur(200px);
    transform: matrix(-0.08, 1, 1, 0.08, 0, 0);
    z-index: -1;
    overflow: hidden;
}


header {
    margin: 20px;
    border-radius: 20px;
    font-size: 12px;
    display: flex;
    flex-direction: row;
    position: relative;
    padding: 12px;
    align-items: center;
    height: 72px;
    border-radius: 20px;

}

header img.logo {
    height: 72px;
    padding-right: 12px;
}

header img.icon {
    height: 44px;
}

header img.app {
    height: 48px;
    margin-left: 20px;
    border: 1px solid #301D6E;
    border-radius: 8px;
    padding: 12px;
}

header div div div a {
    color: white;
    text-decoration: none;
    opacity: 40%;
    margin-right: 28px;
    font-size: 13px;
}

header div div div > a:hover {
    opacity: 100%;
    color: #FFC412 !important;
}

header .dropdown-toggle {
    background: none !important;
    border: none;
    padding: 0;
    font-size: 13px;
    margin-top: -3px;
}

header .dropdown-menu {
    background: #301D6E;
    border: none;
}

header .dropdown-menu a {
    color: white;
    opacity: 40%;
    border-radius: 8px;
    padding: 8px;
}

.dropdown-menu.show {
    padding: 8px 16px;
}

header .dropdown-menu a:hover {
    background: #FFC412;
    opacity: 100%;
}

.content {
    margin: 0 20px;
    padding: 0 32px;
    min-height: calc(75vh );
}

header, .content, footer {
    min-width: 1280px;
}

.container-fluid.canvas {
    background: white;
    border-radius: 20px;
    padding: 0;
    border: 1px solid #CBD5E1;
}

.container-fluid.canvas.p {
    padding: 20px;
    width: 888px;
}

.container-fluid.canvas.ph {
    padding: 20px 0;
    width: 888px;
    background: none;
}

.alert {
    border-radius: 20px;
    //width: 888px;
    margin: 0 auto;
    margin-bottom: 24px;
    padding: 20px;
}

.stats > div {
    border-right: 1px solid #D6D3D1;
    min-width: 110px;
    text-align: right;
    padding: 15px;
    padding-right: 20px;
}

.stats {
    border-top: 1px solid #D6D3D1;
    border-bottom: 1px solid #D6D3D1;

    padding: 5px;
}

.stats div span {
    font-size: 13px;
    color: #78716C;
}

.stats div div {
    font-size: 20px;
    font-weight: 600;
    color: #F05600;
}

.action.master {
    border-top: none;
}

.action {
    border-top: 1px solid #D6D3D1;
    border-bottom: 1px solid #D6D3D1;
    padding-right: 20px;
}

.action input {
    margin-left: 12px;
}

.action input[name=q] {
    background: url("/ezgo/mag.png");
    background-repeat: no-repeat;
    background-position: calc(100% - 12px);
    background-size: 10%;
    padding-right: 40px;
}

h1 {
    font-size: 24px;
}

.action h1 {
    margin: 24px 20px;
    padding: 0;
    font-weight: bold;
    margin-left: 20px;
    font-size: 24px;
}

.canvas table {
    width: calc(100% - 40px);
    margin: 0 20px;
    margin-top: 24px;
}

th {
    background: #F1F5F9;
    color: #1E293B;
    padding: 14px 12px;
    border-left: 3px solid #fff;
    font-weight: 400;
    padding: 12px;
    white-space: nowrap;
    height: 48px;
}

thead th:first-child,
tbody td:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

thead th:last-child,
tbody td:last-child  {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

tbody td {
    font-size: 13px;
    padding: 12px;
}

tbody tr:hover td {
    background: #f4f4f4;
}

.tab {
    padding: 0 20px;
}

.tab a {
    display: block;
    padding: 20px;
    font-size: 13px;
    opacity: 40%;
    text-decoration: none;
    color: #000;
}

.tab a.active, .tab a:hover {
    border-bottom: 3px solid #F05600;
    opacity: 100%;
}

.tab.master {
    border-bottom: 1px solid #D6D3D1;
}

footer {
    margin: 40px 10px;
}

hr {
    border-bottom: 1px solid #D6D3D1;
}

.badge {
    border-radius:10px;
    color: #000;
    width: 110px;
    height: 33px;
    line-height: 27px;
}

.badge.badge-wait,
.badge.badge-yellow {
    background: #FFEAB3;
}

.badge.badge-progress,
.badge.badge-blue {
    background: #E4F2FF;
}

.badge.badge-done,
.badge.badge-green {
    background: #E5F5EC;
}

.badge.badge-review,
.badge.badge-purple {
    background: #E9D5FF;
}

.badge.badge-closed,
.badge.badge-grey {
    background: #F1F5F9;
}

.badge.badge-change,
.badge.badge-orange {
    background: #FFC194;
}

.badge.badge-cancel,
.badge.badge-pink {
    background: #FFCCD2;
}

.pagination {
    padding: 24px 20px;
    padding-top: 0;
}

.pagination .item a {
    display: block;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    font-size: 13px;
    text-decoration: none;
}

.pagination .item a:hover,
.pagination .item a.active {
    background: #F1F5F9;
    border-radius: 4px;
}

.pagination a img {
    width: 24px;
    height: 24px;
}

.btn {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 13px;
}

.btn-light {
    background: none;
    border: 1px solid #D6D3D1;
}

.btn-custom,
.btn-custom:hover{
    background: #301D6E !important;
    color: #FFC412 !important;
}

.btn img {
    width: 20px;
    margin-top: -2px;
    margin-right: -8px;
    margin-left: 8px;
}

.action .btn {
    margin-left: 12px;
    height: 44px;
    margin-left: 12px;
    line-height: 28px;
}

.action input {
    height: 44px;
    border-radius: var(--bs-border-radius);
    border: 1px solid #D6D3D1;
    padding: 0 20px;
}

.progress {
    height: 33px;
    width: 100px;
    text-align: center;
    border: 1px solid #FFAD0D;
    background: none;
    color: #000;
    font-size: 11px;
    line-height: 32px;
    position: relative;
}

.progress span {
    position: absolute;
    width: 100%;
}

.progress-bar.progress {
    background: #FFEAB3;
    border: none;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

input[type=text],
input[type=password],
input[type=email],
select.form-control {
    background: none;
    border: 1px solid #ddd;
    padding: 12px 16px;
    border-radius: var(--bs-border-radius);
}

a {
    text-decoration: none;
    color: #292524;
    font-weight: 600;
}

td > a:last-child > svg {
    fill: #e685b5;
}

.btn-theme {
    min-width:120px;
    border-radius:6px;
    text-align:center;
    padding:12px 20px;
    color:#F05600;
    background-color:#F1F5F9 !important;
    font-weight:bold;
    font-size:13px;
    white-space:nowrap;
    display:inline-flex;
    justify-content:center;
    height:46px;
}
.btn-theme.inverted {
    color:#F1F5F9;
    background-color:#F05600 !important;
}
.btn-theme.inverted:disabled{
    background-color:#CBD5E1 !important;
    color: #fff;
}
.btn-theme.fit, .btn-theme2.fit {
    min-width:auto;
}
.btn-theme.full, .btn-theme2.full {
    min-width:100%;
    text-align:center;
    display:block;
}
.btn-theme svg {
    display:inline;
    fill: #F05600;
    margin-right:4px;
}
.btn-theme2 {
    border-radius:6px;
    text-align:center;
    padding:8px;
    background-color:#F1F5F9;
}
.btn-theme2 svg {
    display:inline;
    fill: #DC2626;
}
.btn-theme:disabled, .btn-theme2:disabled {
    color:#A8A29E;
    background-color:#CBD5E1;
}
.btn-theme:disabled svg, .btn-theme2:disabled svg {
    fill:#fff;
}
.btn-theme.disabled {
    pointer-events:none;
    cursor:default;
    text-decoration:none;
    color:#fff;
    background-color:#CBD5E1;
}

.placeholder-table td {
    padding:32px;
    text-align:center;
    font-weight:bold;
    color:#CBD5E1;
}
.placeholder-table td:hover {
    background-color:transparent !important;
}

.pagination-theme {
    display:flex;
    gap:20px;
    padding:20px;
    /*border-top:1px solid #CBD5E1;*/
    width:100%;
    align-items:center;
    justify-content:end;
}
.pagination-theme p {
    color:#1E293B;
    margin:0;
    font-size:13px;
}
.pagination-theme > div {
    display:flex;
    gap:8px;
    align-items:center;
}
.pagination-theme button {
    display:flex;
    height:32px;
    width:32px;
    border-radius:4px;
    align-items:center;
    justify-content:center;
    background-color:transparent;
}
.pagination-theme button:hover {
    background-color:#f3f3f3;
}
.pagination-theme button:disabled {
    opacity:0.5;
    background-color:transparent !important;
}
.pagination-theme button.active:disabled {
    background-color:#F1F5F9;
    opacity:1;
}

.base-container{
    max-width: 888px !important;
}

.item-force-left{
    position: relative;
    left: -1px;
}


.bw-select .text-left.placeholder.grow-0.text-blue-900\/40.dark\:text-slate-500{
    background: transparent;
}

.app-date-wrap .flex.flex-wrap .border.border-transparent {
    border: 0 !important;
}

.app-date-wrap .relative.w-full .p-4{
    padding: 1rem!important
}

.app-date-wrap [x-text="day"]{
    font-size: 10px !important;
    padding-top: 9px;
}

.app_status_label{
    min-height:34px;
    border-radius: 6px;
    background: #E4F2FF;
    display: inline-block;
    text-align: center;
    padding: 8px 12px;
    min-width: 100px;
    font-weight: bold;
}


.alert-with-margin .bw-alert{
    margin-bottom: 10px;
}


.header-option{
    position : relative;
}

.header-option .btn-area{
    position : absolute;
    right: 1rem;
}