:root {
    --st-primary-color: #9D8AFD;
    --st-whiter-color: #FFFFFF;
    --st-subtext-color: #8E8E8E;
    --st-screen-bg-color: #12161C;
    --st-textfield-color: #2E2E2E;
    --st-box-color: #333333;
    /* font size  */
    --st-font-size-30extralarge: 30px;
    --st-font-size-28mdlarge: 28px;
    --st-font-size-26large: 26px;
    --st-font-size-20large: 20px;
    --st-font-size-18md: 18px;
    --st-font-size-16medium: 16px;
    --st-font-size-14small: 14px;
    --st-font-size-12xsmall: 12px;
    /* roundend  */
    --st-roundend-xl: 16px;
    --st-roundend-lg: 12px;
    --st-roundend-md: 5px;
    /* font-weight:  ; */
    --st-font-weight-bold: 600;
    --st-font-weight-medium: 500;
    --st-font-weight-regular: 400;
    --st-font-weight-light: 300;
    /* table  */
    --st-table-head: #383838;
}

a {
    text-decoration: none;
}


/* DM Sans Regular */

@font-face {
    font-family: 'DMSans';
    src: url('../font/DMSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 4px;
}

.custom-scroll {
    scrollbar-width: 0px;
    scrollbar-color: transparent;
}

main {
    padding-bottom: 95px;
}

body {
    font-family: "DMSans";
    background-color: var(--st-screen-bg-color);
    overscroll-behavior: none;
    touch-action: manipulation;
}


/* comman color class  */

.txt-primary {
    color: var(--st-primary-color);
}

.txt-muted {
    color: var(--st-subtext-color);
}

.bg-gray {
    background-color: var(--st-textfield-color);
}

.st-bg-primary {
    background-color: var(--st-primary-color);
}

.st-bg-black {
    background-color: var(--st-box-color);
}

.st-bg-textfeild {
    background-color: var(--st-textfield-color);
}


/* gap  */

.gap-12 {
    gap: 12px;
}

.dvh100 {
    height: 100dvh;
}


/* font-size */

.fs-12 {
    font-size: var(--st-font-size-12xsmall);
}

.fs-14 {
    font-size: var(--st-font-size-14small);
}

.fs-16 {
    font-size: var(--st-font-size-16medium);
}

.fs-18 {
    font-size: var(--st-font-size-18md);
}

.fs-20 {
    font-size: var(--st-font-size-20large);
}

.fs-26 {
    font-size: var(--st-font-size-26large);
}

.fs-28 {
    font-size: var(--st-font-size-28mdlarge);
}

.fs-30 {
    font-size: var(--st-font-size-30extralarge);
}

p {
    font-size: var(--st-font-size-14small);
    font-weight: var(--st-font-weight-regular);
    color: var(--st-subtext-color);
    line-height: normal;
}

.line-35 {
    line-height: 35px;
}

.line-normal {
    line-height: normal;
}


/* padding-margin  */

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-bottom: 5px;
}

.mt-40 {
    margin-top: 2.5rem;
}

.mb-40 {
    margin-bottom: 2.5rem;
}

.pt-12 {
    padding-top: 12px;
}

.pb-12 {
    padding-bottom: 12px;
}

.ptb-12 {
    padding-top: 12px;
    padding-bottom: 12px;
}

.mt-15 {
    margin-top: 15px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mtb-15 {
    margin-top: 15px;
    margin-bottom: 15px;
}

.plr-20 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.ptb-40 {
    padding-top: 40px;
    padding-bottom: 40px;
}

.ptb-15 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.pt-25 {
    padding-top: 25px;
}

.pb-25 {
    padding-bottom: 25px;
}

.ptb-25 {
    padding-top: 25px;
    padding-bottom: 25px;
}

.ptb-56 {
    padding-top: 3.5em;
    padding-bottom: 3.5em;
}


/* rounded  */

.rounded-16 {
    border-radius: var(--st-roundend-xl);
}

.rounded-12 {
    border-radius: var(--st-roundend-lg);
}

.rounded-5 {
    border-radius: var(--st-roundend-md);
}


/* font-weight  */

.fw-300 {
    font-weight: var(--st-font-weight-light);
}

.fw-400 {
    font-weight: var(--st-font-weight-regular);
}

.fw-500 {
    font-weight: var(--st-font-weight-medium);
}

.fw-600 {
    font-weight: var(--st-font-weight-bold);
}


/* height-weight  */

.hw-48 {
    height: 48px;
    width: 48px;
}

.hw-40 {
    height: 40px;
    width: 40px;
}

.hw-50 {
    height: 50px;
    width: 50px;
}

.icon-40 {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--st-box-color);
    border-radius: 100%;
}

.icon-50 {
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--st-box-color);
    border-radius: 100%;
}


/* primary-btn  */

.st-primary-btn {
    display: block;
    background-color: var(--st-primary-color);
    color: var(--st-whiter-color);
    border: none;
    width: 100%;
    font-size: var(--st-font-size-14small);
    border-radius: var(--st-roundend-lg);
    text-align: center;
    line-height: normal;
    padding: 15px 15px;
}

.blank-btn {
    padding: 0;
    border: 0;
    background-color: transparent
}


/* form control  */

::placeholder {
    color: var(--st-subtext-color) !important;
    font-size: var(--st-font-size-14small);
    text-transform: capitalize !important;
}

input[type="date"] {
  text-align-last: left; 
}


.form-control {
    font-size: var(--st-font-size-14small);
    color: var(--st-subtext-color);
    background-color: var(--st-textfield-color);
    border: var(--bs-border-width) solid var(--st-textfield-color);
    border-radius: var(--st-roundend-lg);
    padding: 14px 15px 14px 45px;
    line-height: normal;
}

.form-label {
    color: var(--st-whiter-color);
    font-size: var(--st-font-size-14small);
    font-weight: var(--st-font-weight-regular);
}

.form-control-wrapper {
    position: relative;
    width: 100%;
}

.form-control-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.form-textarea-icon {
    position: absolute;
    top: 15px;
    left: 14px;
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.error-text {
    display: none;
    width: 100%;
    margin-top: .25rem;
    font-size: .875em;
    color: var(--bs-form-invalid-color);
}


/* nav bar  */

.navbar-fixed a.active img {
    filter: brightness(0) invert(1);
}

.navbar-fixed a.active p {
    color: var(--st-whiter-color);
}


/* home page  */

.back-icon img {
    filter: brightness(0) invert(1);
    transform: rotate(180deg);
}


/* table css  */

thead th {
    background-color: var(--st-table-head) !important;
}

table th,
table td {
    color: var(--st-whiter-color) !important;
    font-size: var(--st-font-size-14small);
    font-weight: var(--st-font-weight-regular);
    padding: 15px 20px !important;
    border-color: #3B3B3B;
    vertical-align: middle;
}

table tr td {
    background-color: var(--st-textfield-color) !important;
}

table tr:first-child th:first-child {
    border-top-left-radius: 12px;
}

table tr:first-child th:last-child {
    border-top-right-radius: 12px;
}

table tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

table tr:last-child td {
    border-color: transparent;
}


/* select 2  */

.select-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.select2-container--default .select2-selection--single {
    background-color: var(--st-textfield-color);
    border: none;
    border-radius: 12px !important;
    height: 48px;
    padding-left: 40px;
    display: flex;
    align-items: center;
}

.select2-selection__rendered {
    color: var(--st-whiter-color);
    line-height: 48px;
}

.select2-selection__arrow {
    height: 100%;
    right: 10px;
}


/* .select2-selection__placeholder::before {
content: "🏦 ";
margin-right: 4px;
} */

.select2-selection__placeholder {
    color: var(--st-subtext-color) !important;
    font-size: var(--st-font-size-14small);
    text-transform: capitalize !important;
}

.select2-selection__rendered:before {
    content: "";
    position: absolute;
    left: 14px;
    top: 12px;
    background: url('/assets/images/icons/bank.svg');
    height: 20px;
    width: 20px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--st-subtext-color);
    padding-left: 5px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow::after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-image: url(../images/icons/arrow.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 40px;
    top: 50%;
    transform: translate(0px, -50%);
}

.select2-dropdown {
    background-color: var(--st-table-head);
    border-color: #313131;
    border-radius: var(--st-roundend-lg);
}

.select2-results__options {
    border-radius: var(--st-roundend-lg);
}

.select2-results__option {
    font-size: var(--st-font-size-14small);
    font-weight: var(--st-font-weight-regular);
    color: var(--st-whiter-color);
    padding: 15px;
    border-bottom: 1px solid #313131;
}

.select2-results__option:last-child {
    border-bottom: 0px solid transparent;
}

.select2-container--open .select2-dropdown {
    top: 10px;
}

.select2-container--open .select2-dropdown--below {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: transparent;
}

.select2-container--default .select2-results__option--selected {
    background-color: transparent;
}

.select-container ::-webkit-scrollbar {
    width: 1px;
    height: 1px;
}

.select-container ::-webkit-scrollbar-track {
    background: var(--st-primary-color);
}


/* .select2-container--default .select2-results>.select2-results__options {
    min-height: unset;
} */

.modal-content .select2-selection__rendered:before {
    background: url('/assets/images/icons/add-product-gray.svg');
    top: 14px;
}

.place-icon .select2-selection__rendered:before {
    background: url('/assets/images/icons/add-product-gray.svg');
    top: 14px;
}

.expance-placeicon .select2-selection__rendered:before {
    background: url('/assets/images/icons/receipt-2.svg');
    top: 14px;
}

.gst-placeicon .select2-selection__rendered:before {
    background: url('/assets/images/icons/percentage-square.svg');
    top: 14px;
}

.not-place-icon .select2-selection__rendered:before {
    display: none;
}

.not-place-icon .select2-container--default .select2-selection--single {
    padding-left: 8px;
}

select.select-comman {
    visibility: hidden;
}


/* modal  */

.modal-content {
    background-color: var(--st-textfield-color);
}

.modal-header .btn-close {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
    background-size: 12px;
}

.modal-header .btn-close:focus {
    box-shadow: none;
}

.modal-content .form-control {
    background-color: #3D3D3D;
}

.modal-content .select2-container--default .select2-selection--single {
    background-color: #3D3D3D;
}

.modal-content .select2-container {
    width: 100% !important;
}

::-webkit-inner-spin-button {
    display: none;
}

.active-effect .st-bg-black {
    transition: transform 0.1s ease, background-color 0.1s ease;
}

a.active-effect:hover .st-bg-black {
    background-color: var(--st-box-color) !important;
    transform: scale(0.97);
}