:root {
    --color-app-background: #ffffff;
    --color-theme: #342999;
    --color-white: #ffffff;
    --color-theme-light: #F2F1F9;
    --color-text-primary: #222222;
    --color-text-secondary: #6D6D6D;
    --color-light-button-background: #F2F1F9;
    --color-light-button-text: #342999;
    --color-purple-button-background: #342999;
    --color-blue-button-text: #F2F1F9;
    --color-border: #cccccc;
    --toolbar: #28272e;
    --color-navbar-icon: #28272e;
    --color-box-background: #F9F9F9;
    --color-box-subtitle: #F1692B;
    --color-swipe-handler: #848484;
    --success-color: #00751b;
    --success-background: #28a74514;
    --danger-color: #c40303;
    --danger-background: #ffaeae42;
    --claret-red-color: #922F2F;
    --dark-purple-color: #292874;
    --dark-orange-color: #D06D17;
    --dark-green-color: #18836D;
    --warning-box-text-color: #e26900;
    --warning-box-background-color: #FFEAE0;
    --transparanet-background-purple: #ebe9ff;
    font-family: 'Inter', sans-serif;
}

.ios,
.md {
    background-color: var(--color-app-background) !important;
}

.page,
.navbars,
.navbar-inner,
.toolbar {
    background-color: var(--color-app-background) !important;
}

body {
    font-family: 'Inter', sans-serif !important;
}

.toolbar,
.toolbar .toolbar-inner,
.toolbar .tabbar-label {
    font-family: 'Inter', sans-serif !important;
}

#main-toolbar .menu-selected {
    color: var(--toolbar);
}

.navbar {
    height: 70px !important;
    line-height: 70px !important;
    color: var(--color-navbar-icon) !important;
}

.navbar-inner {
    padding: 1rem !important;
}

.navbar-inner,
.navbar-bg {
    height: 70px;
}

.navbar a {
    color: var(--color-text-primary) !important;
}

.page-content {
    padding: 1rem;
    padding-bottom: 100px !important;
}

.sheet-modal-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.sheet-modal-inner .block {
    flex: 1 1 auto;
    overflow-y: auto;
}

.sheet-modal-inner {
    max-height: 80vh;
    overflow-y: auto;
}

.sheet-modal-inner .block .list {
    margin-top: 0;
}


.messages-content {
    padding-bottom: 130px !important;
}

.claret-red-color {
    color: var(--claret-red-color);
}

.dark-purple-color {
    color: var(--dark-purple-color);
}

.dark-orange-color {
    color: var(--dark-orange-color);
}

.dark-green-color {
    color: var(--dark-green-color);
}

.text-xs {
    font-size: 0.75rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.font-bold {
    font-weight: 700;
}

.font-medium {
    font-weight: 500;
}

.font-normal {
    font-weight: 400 !important;
}

.font-semibold {
    font-weight: 600;
}

.gap-1 {
    gap: 1rem;
}

.flex-1 {
    flex: 1;
}

.grid-template-columns-fr {
    grid-template-columns: 1fr 3fr !important;
}

/* login.php css kodları*/
.page[data-name="login"] .login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    box-sizing: border-box;
    padding: 1rem;
}

.page[data-name="login"] .form-box {
    width: 100%;
    max-width: 400px;
}

.page[data-name="login"] .login-title,
.page[data-name="login"] .login-sub-title {
    text-align: left;
    margin: 0;
    font-size: 15px;
}

.page[data-name="login"] .login-title {
    margin-bottom: 1rem;
    font-size: 35px;
}

.page[data-name="login"] .login-sub-title {
    margin-bottom: 2rem;
    color: var(--color-text-secondary);
}

.page[data-name="login"] .login-button {
    width: 100%;
    max-width: 400px;
    padding: 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(to right, #453aa8, #342999);
    color: var(--color-white);
    border: none;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    text-transform: capitalize;
}

.page[data-name="login"] .login-button:active {
    background: linear-gradient(to right, #342999, #453aa8);
}

.page[data-name="login"] .form-box .item-input:nth-child(2) input {
    height: 3rem;
    border-radius: 0.5rem;
    box-sizing: border-box;
    padding: 0 1rem;
    border: 1px solid var(--color-border);
}

.input-with-icon,
.input-with-company {
    display: flex;
    align-items: center;
    height: 3rem;
    padding: 0 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border);
    box-sizing: border-box;
}

.input-with-icon input {
    flex: 1;
    border: none;
    outline: none;
    height: 100%;
    padding: 0;
}

.input-with-icon .icon,
.input-with-company .icon {
    margin-left: 0.5rem;
    font-size: 1.5rem;
    cursor: pointer;
}

.list.no-hairlines.form-box label {
    color: var(--color-text-secondary);
}

.list.no-hairlines.form-box .item-input input::placeholder {
    color: var(--color-text-secondary);
    opacity: 1;
}

.forgot-password {
    font-size: 15px;
}

/* */


/* total miktarların verildiği kutucukların bulunduğu alan */
.page-detail-title {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--color-text-primary);
}

.page-detail-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border-radius: 1rem;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    height: 100px;
    background-color: var(--color-box-background);
}

.page-detail-box .div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    overflow: hidden;
    text-align: center;
}

.page-detail-box div div i {
    font-size: 1.3rem;
    color: var(--color-box-subtitle);
    margin-left: 0.5rem;
}

.detail-box-title {
    font-size: 1rem;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-box-subtitle {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-box-subtitle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
    box-sizing: border-box;
}

/*  */


/* buton şeklinde konumlandırılan tarih filtreleri */
.filter-calendar-box {
    padding: .7rem;
    border-radius: .7rem;
    background-color: var(--color-light-button-background);
    color: var(--color-purple-button-background);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 500;
    border: none;
    height: 50px;
}

.filter-calendar-box.tab-link-active {
    background-color: var(--color-purple-button-background);
    color: var(--color-blue-button-text);
    border: none;
}

/*  */


/* arama, sıralama ve diğer filtrelerin bulunduğu alan */
.filter-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 100%;
    box-sizing: border-box;
}

.searchbar-frame {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    max-width: 100%;
}

.searchbar-wrapper {
    background-color: var(--color-box-background);
    position: relative;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.searchbar-frame>.searchbar-wrapper>input {
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 1rem 1rem 2.8rem;
}

.search-icon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: var(--color-purple-button-background);
}

.search-icon i {
    font-size: 22px;
}

.filter-btn {
    border: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30%;
    width: 50px;
    height: 50px;
    background-color: var(--color-box-background);
    color: var(--color-text-primary);
}

.filter-btn i {
    font-size: 22px;
    color: var(--color-text-secondary);
}

/*  */


/* pazaryerlerinin listelediğimiz kutucukların olduğu alan  */
.page-marketplace-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    border-radius: 1rem;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    background-color: var(--color-box-background);
    color: var(--color-text-primary);
    word-wrap: break-word;
    white-space: normal;
    font-size: 1rem;
}

.marketplace-detail-box li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.marketplace-detail-box li div:first-child {
    flex: 0 0 150px;
    text-align: left;
    line-height: 1.5rem;
}

.marketplace-detail-box li div:last-child {
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    text-align: right;
    line-height: 1.5rem;

}

.marketplace-logo {
    width: 70px !important;
    height: auto;
}

.nowrap-row {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.total-title {
    color: var(--color-text-primary);
}

#transfer-order,
#change-company-filter,
#special-date-sheet,
#inclusive-sheet,
#question-and-answer-filter,
#question-and-answer-shopping,
#question-and-answer-calendar,
#product-sheet,
#erp-status,
#brand-select,
#category-select,
#analysis-product-sheet,
#invoices-calendar-sheet,
#ready-answer-list,
#rebate-filter-container,
#transfer-rebate,
#return-page-company-filter,
#rebate-special-date-sheet {
    height: 85%;
    border-radius: 2rem 2rem 0 0;
}


.choose-company,
.selection-inputs {
    display: flex;
    align-items: center;
    height: 3rem;
    padding: 0 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border);
    box-sizing: border-box;
}

.order-number-input input,
.rebate-number-input input {
    height: 3rem !important;
    border-radius: 0.5rem !important;
    box-sizing: border-box !important;
    padding: 0 1rem !important;
    border: 1px solid var(--color-border) !important;
}

.sheet-modal .sheet-modal-inner .block div .transfer-button,
.sheet-modal .sheet-modal-inner .block div .rebate-transfer-button {
    width: 100%;
    max-width: 400px;
    padding: 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(to right, #453aa8, #342999);
    color: var(--color-white);
    border: none;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    text-transform: capitalize;
    margin-top: 1rem;
}

.sheet-modal .sheet-modal-inner .block div .transfer-button:active,
.sheet-modal .sheet-modal-inner .block div .rebate-transfer-button:active {
    background: linear-gradient(to right, #342999, #453aa8);
}

.sheet-modal .toolbar .toolbar-inner {
    position: relative;
}

.swipe-handler {
    height: 20px;
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    background: var(--color-app-background);
    cursor: pointer;
    z-index: 10;
}

.swipe-handler:after {
    content: '';
    width: 100px;
    height: 6px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 3px;
    background: var(--color-swipe-handler);
}

.error-message {
    color: var(--danger-color);
    display: none;
}

.error-toast {
    background-color: var(--color-box-background) !important;
    color: var(--danger-color) !important;
    font-weight: 700;
}

.success-toast {
    background-color: var(--color-box-background) !important;
    color: var(--success-color) !important;
    font-weight: 700;
}

.toast-button {
    color: var(--color-text-primary) !important;
    text-transform: capitalize !important;
}

/*  */

/* orders_detail.php */


.marketplace-detail-box {
    background-color: transparent !important;
    position: relative;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.product-img {
    width: 70px;
    border-radius: 1rem;
}

.marketplace-product-box,
.rebate-product-box {
    display: grid;
    gap: 1.5rem;
    border-radius: 1rem;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    background-color: var(--color-box-background);
    color: var(--color-text-primary);
}

.orders-total::before {
    content: "";
    display: block;
    width: 100%;
    border-bottom: 1px solid #ccc;
    margin-bottom: 15px;
}

.sheet-modal .sheet-modal-inner .block div .company-select-button,
.sheet-modal .sheet-modal-inner .block div .rebate-company-select-button,
.sheet-modal .sheet-modal-inner .block div .status-select-button,
.sheet-modal .sheet-modal-inner .block div .brand-select-button,
.sheet-modal .sheet-modal-inner .block div .category-select-button,
.sheet-modal .sheet-modal-inner .block div .product-select-button {
    width: 100%;
    max-width: 400px;
    padding: 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(to right, #453aa8, #342999);
    color: var(--color-white);
    border: none;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    text-transform: capitalize;
    margin-top: 1rem;
}

.sheet-modal .sheet-modal-inner .block div .company-select-button:active,
.sheet-modal .sheet-modal-inner .block div .rebate-company-select-button:active,
.sheet-modal .sheet-modal-inner .block div .status-select-button:active,
.sheet-modal .sheet-modal-inner .block div .brand-select-button:active,
.sheet-modal .sheet-modal-inner .block div .category-select-button:active,
.sheet-modal .sheet-modal-inner .block div .product-select-button:active {
    background: linear-gradient(to right, #342999, #453aa8);
}

.no-data-message {
    text-align: center;
    background-color: var(--danger-background);
    padding: 1rem;
    border-radius: 1rem;
    color: var(--danger-color);
}

.sheet-modal .sheet-modal-inner .sheet-modal-inner-content div #applyDateRange {
    width: 100%;
    max-width: 400px;
    padding: 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(to right, #453aa8, #342999);
    color: var(--color-white);
    border: none;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    text-transform: capitalize;
    margin-top: 1rem;
}

.sheet-modal .sheet-modal-inner .sheet-modal-inner-content div #applyDateRange:active {
    background: linear-gradient(to right, #342999, #453aa8);
}

.sheet-modal .sheet-modal-inner .sheet-modal-inner-content div input {
    display: flex;
    align-items: center;
    height: 3rem;
    padding: 0 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border);
    box-sizing: border-box;
}

.clear-content {
    display: grid;
    gap: 1rem;
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.clear-content li {
    background-color: var(--color-box-background) !important;
    border-radius: 1rem;
}

.clear-content li div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.clear-content li div div i {
    font-size: 20px;
    color: var(--color-text-primary);
}

.ios .list-outline-ios ul:after,
.list-outline ul:after,
.md .list-outline-md ul:after {
    content: none !important;
}

.ios .list-outline-ios ul:before,
.list-outline ul:before,
.md .list-outline-md ul:before {
    content: none !important;
}

/* Product ile ilgili sayfalar css kodları */

.report-box {
    background-color: var(--color-box-background);
    border-radius: 1rem;
    padding: 2rem;
    align-items: center;
    justify-content: center;
    display: flex;
    gap: 1rem;
    flex-direction: column;
    text-align: center;
    height: 90px;
}

.report-box i {
    font-size: 35px !important;
}

.report-box-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-primary);
}

[data-name="product_list"] .searchbar-frame {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    max-width: 100%;
}

.searchbar-product {
    background-color: var(--color-box-background);
    position: relative;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.searchbar-frame>.searchbar-product>input {
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 1rem 1rem 2.8rem;
}


.searchbar-invoices {
    background-color: var(--color-box-background);
    position: relative;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.searchbar-frame>.searchbar-invoices>input {
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 1rem 1rem 2.8rem;
}

.marketplace-based-products {
    background-color: var(--color-box-background);
    position: relative;
    border-radius: 1rem 1rem 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: .5rem;
}

.marketplace-listing-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px !important;
    height: auto;
}

.page-product-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    border-radius: 1rem;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    background-color: var(--color-box-background);
    color: var(--color-text-primary);
    word-wrap: break-word;
    white-space: normal;
}

.page-product-box {
    background-color: var(--color-box-background) !important;
    color: var(--color-text-primary);
}

.page-product-box li {
    display: grid !important;
    grid-template-columns: 1fr 4fr !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.page-product-box li div:first-child {
    text-align: left;
    font-weight: 500;
}

.page-product-box li div:last-child {
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    text-align: right;
    line-height: 1rem;
    font-size: .9rem;
}

.product-detail-box {
    background-color: var(--color-box-background) !important;
    color: var(--color-text-primary);
}

.product-detail-box li {
    display: grid !important;
    grid-template-columns: 1fr 2fr !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 55px !important;
}

.product-detail-box li div:first-child {
    text-align: left;
    font-weight: 500;
}

.product-detail-box li div:last-child {
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    text-align: right;
    line-height: 1rem;
    font-size: .9rem;
}



/* soru ve cevap sayfası css kodları */
.segmented .tab-link {
    border-color: var(--color-border);
    padding: 1.5rem;
    text-transform: capitalize;
    color: var(--color-text-primary);
}

.segmented .tab-link-active {
    background-color: var(--color-purple-button-background);
    color: var(--color-blue-button-text);
}

.filter-marketplace-box.active {
    background-color: var(--color-purple-button-background);
    color: var(--color-blue-button-text);
    border: none;
}

.warning-box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    background-color: var(--warning-box-background-color);
    color: var(--warning-box-text-color);
    font-weight: 400;
    border-radius: 1rem;
    font-size: 12px;
}

.grid .swiper-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.filter-marketplace-box {
    padding: .7rem;
    border-radius: .7rem;
    background-color: var(--color-light-button-background);
    color: var(--color-purple-button-background);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 500;
    border: none;
    height: 50px;
}

.filter-marketplace-box.tab-link-active {
    background-color: var(--color-purple-button-background);
    color: var(--color-blue-button-text);
    border: none;
}

.reply-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 40px;
    padding: 1rem;
    border: none;
    border-radius: .5rem;
    background-color: var(--danger-color);
    color: var(--color-blue-button-text);
    margin-left: auto;
    margin-top: 1rem;
}

.answered-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 40px;
    padding: 1rem;
    border: none;
    border-radius: .5rem;
    background-color: var(--success-color);
    color: var(--color-blue-button-text);
    margin-left: auto;
    margin-top: 1rem;
}

.page-question-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    border-radius: 1rem;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    background-color: var(--color-box-background);
    color: var(--color-text-primary);
    word-wrap: break-word;
    white-space: normal;
}

.question-detail-box {
    background-color: var(--color-box-background) !important;
    color: var(--color-text-primary);
}

.question-detail-box li {
    display: grid !important;
    grid-template-columns: 1fr 4fr !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 65px !important;
}

.question-detail-box li div:first-child {
    text-align: left;
    font-weight: 500;
}

.question-detail-box li div:last-child {
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    text-align: right;
    line-height: 1rem;
    font-size: .9rem;
}

.message {
    margin-bottom: 10px;
}

.messages-date {
    margin: 6px 0;
    text-align: center;
    font-size: 0.8rem;
    color: #999;
}

#myMessagebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 56px;
    z-index: 9999;
    width: 100%;
    height: 100px;
    background-color: var(--color-app-background);
    box-sizing: border-box;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

#myMessagebar .messagebar-area textarea {
    min-height: 65px;
    box-sizing: border-box;
    resize: none;
    padding: 8px;
    font-size: 15px;
}

.messagebar .toolbar-inner {
    display: flex !important;
    align-items: center !important;
    gap: 1rem;
    height: 100%;
    box-sizing: border-box;
}

.messagebar-area {
    flex: 1;
}

.send-btn {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    top: -10px;
    background-color: var(--color-purple-button-background);
}

.toolbar-inner .link.send-btn i.f7-icons {
    font-size: 20px;
    color: var(--color-blue-button-text);
}


.message-received .message-bubble {
    padding: 1rem;
    background-color: var(--color-box-background) !important;
    color: var(--color-text-primary) !important;
    font-size: 15px;
}

.message-sent .message-bubble {
    padding: 1rem;
    background-color: var(--color-purple-button-background) !important;
    color: var(--color-blue-button-text) !important;
    font-size: 15px;
}

.message-sent .message-bubble .message-text {
    text-align: right !important;
}

.messagebar-area textarea::-webkit-scrollbar {
    width: 6px;
}

.messagebar-area textarea::-webkit-scrollbar-track {
    background: var(--color-app-background);
    border-radius: 2rem;
}

.messagebar-area textarea::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: 2rem;
    border: 1px solid var(--color-app-background);
}

.messagebar-area textarea::-webkit-scrollbar-corner {
    background: var(--color-app-background);
    border-radius: 2rem;
}

.date-filter-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.calendar-header,
.calendar-header .toolbar,
.calendar-header .toolbar-inner {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.date-filter-btn {
    padding: .8rem;
    text-align: center;
    background: #f5f5f5;
    border-radius: 1rem;
    border: none;
    color: #333;
    font-size: 15px;
}

.date-filter-btn.active {
    background-color: var(--color-purple-button-background);
    color: #fff;
}

.date-filter-calendar {
    margin-top: 2rem;
}

.date-filter-calendar .calendar {
    margin-top: -8px;
}

#apply-date-filter {
    border-radius: 1rem;
    background-color: var(--color-purple-button-background);
    color: var(--color-white);
    padding: 1.3rem;
    text-transform: capitalize;
}

#my-calendar-container .calendar .toolbar.toolbar-top .toolbar-inner .link,
#my-calendar-container .calendar .toolbar.toolbar-top .toolbar-inner .link i,
#my-calendar-container .calendar .toolbar.toolbar-top .toolbar-inner .link svg {
    color: var(--color-text-primary) !important;
}

.calendar-day-selected .calendar-day-number {
    background-color: var(--color-purple-button-background) !important;
    color: var(--color-white) !important;
}

.calendar-day-selected-left:before,
.calendar-day-selected-range:before,
.calendar-day-selected-right:before {
    background-color: #a19bd1 !important;
}

.calendar-day-selected-range .calendar-day-number {
    background-color: transparent !important;
    color: var(--color-text-primary) !important;
}



.fab-right-bottom {
    bottom: 70px !important;

}

.fab-label-button .fab-label {
    font-size: 15px;
    background-color: var(--color-box-background) !important;
    color: var(--color-text-primary) !important;
    font-weight: 500;
    box-shadow: none !important;
}

.fab-buttons a,
.fab>a {
    background-color: #29996d !important;
    color: var(--color-white) !important;
    box-shadow: none !important;
}

.tabbar-icons.toolbar-bottom~* .fab-right-bottom {
    margin-bottom: 0 !important;
    bottom: 30px !important;
    right: 0 !important;
}

label.item-checkbox input[type=checkbox]:checked~.icon-checkbox {
    background-color: var(--color-purple-button-background) !important;
    border-color: var(--color-purple-button-background) !important;
}

/* ürünler */
#selectedStatusList,
#selectedBrandList,
#selectedCategoryList {
    display: grid;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.products-filtering-result {
    margin-bottom: .5rem;
    font-weight: 500;
    font-size: 15px;
}

.filter-chip {
    padding: 8px 12px;
    background-color: var(--transparanet-background-purple);
    color: var(--color-light-button-text);
    border-radius: 1rem;
    gap: 10px;
}

.clear-all {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--transparanet-background-purple);
    color: var(--color-light-button-text);
    width: 50px;
    height: 50px;
    border-radius: 50% !important;
    padding: 1rem;
    border: none;
    font-size: 20px;
}

.filter-group-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.filter-chips-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1rem;
}

.sheet-modal .sheet-modal-inner .block div .product-apply-all {
    width: 100%;
    max-width: 400px;
    padding: 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(to right, #453aa8, #342999);
    color: var(--color-white);
    border: none;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    text-transform: capitalize;
    margin-top: 1rem;
}

.sheet-modal .sheet-modal-inner .block div .product-apply-all:active {
    background: linear-gradient(to right, #342999, #453aa8);
}

.commission_calculation {
    background-color: var(--color-light-button-background) !important;
    color: var(--color-purple-button-background) !important;
    padding: 1.5rem !important;
    border-radius: 1rem !important;
    text-transform: capitalize !important;

}

.commission_calculation.tab-link-active {
    background-color: var(--color-purple-button-background) !important;
    color: var(--color-blue-button-text) !important;

}

.radio-group-inline {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 15px;
}

.radio-group-inline label.radio {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.custom-percent-wrapper {
    border: 1px solid var(--color-border);
    border-radius: .5rem;
    padding: .2rem;
    width: 55px;
}

.calculate,
.clear,
.analysis-list-btn {
    width: 100% !important;
    max-width: 400px !important;
    padding: 1.5rem !important;
    border-radius: 1rem !important;
    background: linear-gradient(to right, #453aa8, #342999) !important;
    color: var(--color-white) !important;
    border: none !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-transform: capitalize !important;
}

.calculate:active,
.clear:active,
.analysis-list-btn:active {
    background: linear-gradient(to right, #342999, #453aa8) !important;
}

.calculate-commission-input input {
    height: 3rem !important;
    border-radius: 0.5rem !important;
    box-sizing: border-box !important;
    padding: 0 1rem !important;
    border: 1px solid var(--color-border) !important;
}

.calculation-result-container {
    background-color: var(--color-box-background);
    color: var(--color-text-primary);
    border-radius: 1rem;

}

.product-stock-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    border-radius: 1rem;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    background-color: var(--color-box-background);
    color: var(--color-text-primary);
    word-wrap: break-word;
    white-space: normal;
}

.product-stock-box div {
    display: grid;
    gap: 1rem;
}

.product-stock-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.product-stock-box li {
    display: grid !important;
    grid-template-columns: 1fr 4fr !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.5rem 0;
}

.product-stock-box li div:first-child {
    text-align: left;
    font-weight: 500;
}

.product-stock-box li div:last-child {
    min-width: 0;
    white-space: normal;
    text-align: right;
    line-height: 1rem;
    font-size: 0.9rem;
}

.platform-container {
    background-color: var(--color-box-background);
    position: relative;
    border-radius: 1rem 1rem 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem;
}

.platform-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px !important;
    height: auto;
}

#analysis-platform-sheet {
    height: 50%;
    border-radius: 2rem 2rem 0 0;
}

.chips-like-input {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 38px;
    border: 1px solid #ccc;
    border-radius: .5rem;
    padding: .3rem 1rem;
    background-color: #fff;
    cursor: pointer;
    position: relative;
}

.chips-like-input .chip {
    margin: 2px 8px 2px 4px;
}

.chips-like-input .chips-placeholder {
    color: var(--color-text-secondary);
    font-size: 16px;
    font-weight: 400;
    font-family: 'Inter', sans-serif !important;
}

.platform-icon {
    position: absolute !important;
    right: 1rem;
    top: 2.2rem;
}

.radio-inline-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.sheet-modal-inner .block .list .radio-inline-list li .radio {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.sheet-modal-inner .block .list .radio-inline-list li label i {
    margin-right: 1rem;
}

.analysis-seachbar {
    min-width: 0;
    box-sizing: border-box;
    max-width: 100% !important;
    margin-bottom: 1rem;
}

.page-invoices-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    border-radius: 1rem;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    background-color: var(--color-box-background);
    color: var(--color-text-primary);
    word-wrap: break-word;
    white-space: normal;
    font-size: 1rem;
}

.invoices-detail-box {
    background-color: var(--color-box-background) !important;
    color: var(--color-text-primary);
}

.invoices-detail-box li {
    display: grid !important;
    grid-template-columns: 1fr 4fr !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.invoices-detail-box li div:first-child {
    text-align: left;
    font-weight: 500;
}

.invoices-detail-box li div:last-child {
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    text-align: right;
    line-height: 1rem;
    font-size: .9rem;
}

.transferred,
.download-invoice,
.transfer-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 1rem;
    border: none;
    border-radius: .5rem;
    margin-left: auto;
}

.download-invoice {
    background-color: var(--color-purple-button-background);
    color: var(--color-white);
}

.transferred {
    background-color: var(--success-color);
    color: var(--color-white);
}

.transfer-btn {
    background-color: var(--danger-color);
    color: var(--color-white);
}

.ios .list-dividers-ios .item-inner:after {
    content: none !important;
}

.invoice-transactions,
.completed-invoice-transactions {
    margin-top: 1rem;
}

.invoice-filter-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 100%;
    box-sizing: border-box;
}

.invoice-bulk-transactions {
    display: flex;
    align-items: center;
    justify-content: center;
}

.question-and-answer-all {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.shopping-all-btn {
    border: none;
    background-color: transparent;
    cursor: pointer;
    width: 50px;
    color: var(--color-text-secondary);
}

.shopping-all-btn i {
    font-size: 22px;
}

.shopping-all-btn.active {
    color: var(--color-purple-button-background);
}

.ready-answer-button-wrapper {
    position: fixed;
    bottom: 10rem;
    right: 1rem;
    z-index: 9999;
    background-color: var(--success-background);
    width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ready-answer-button-wrapper a i {
    color: var(--success-color) !important;
}

.hidden {
    display: none !important;
}


/* İadeler sayfası css kodları (rebate.php) */

.rebate-marketplace-box {
    display: grid;
    gap: .5rem;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    border-radius: 1rem;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    background-color: var(--color-box-background);
    color: var(--color-text-primary) !important;
    word-wrap: break-word;
    white-space: normal;
    font-size: .8rem;
    height: 150px;
}

.rebate-marketplace-box a {
    color: var(--color-text-primary) !important;
}

.rebate-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 100%;
    box-sizing: border-box;
}

.rebateDetail-marketplace-box {
    display: grid;
    gap: .5rem;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    border-radius: 1rem;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    background-color: var(--color-box-background);
    color: var(--color-text-primary) !important;
    word-wrap: break-word;
    white-space: normal;
    font-size: .8rem;
    height: 150px;
}

.rebateDetail-marketplace-box a {
    color: var(--color-text-primary) !important;
}

.rebate-detail-box {
    background-color: transparent !important;
    position: relative;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}


.rebate-detail-box li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.rebate-detail-box li div:first-child {
    flex: 0 0 150px;
    text-align: left;
    line-height: 1.5rem;
}

.rebate-detail-box li div:last-child {
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    text-align: right;
    line-height: 1.5rem;

}

.page-rebate-marketplace-box,
.rebate-marketplace-detail-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    border-radius: 1rem;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    background-color: var(--color-box-background);
    color: var(--color-text-primary);
    word-wrap: break-word;
    white-space: normal;
    font-size: 1rem;
}