#HomeHeaderPanel {
    background-color: var(--dx-color-main-bg) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin: 10px;
    padding: 10px;
    position: relative;
    z-index: 100;
    border-bottom: 1px solid #e0e6ed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    row-gap: 0 !important;
}

#menuButtonPanel {
    display: flex;
    align-items: center;
    height: 100%;
}

#logoPanel {
    padding: 1em;
}

#logo {
    transition: transform 0.2s ease;
    height: 1.8em;
    margin-right: 0.5em;
}

#logo:hover {
    transform: scale(1.02);
}

#btnMenu {
    background-color: var(--dx-menu-background) !important;
    border: 1px solid var(--dx-menu-background);
    border-radius: 6px;
    transition: all 0.2s ease;
    height: 2em;
    width: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 0.5em;
}

#btnMenu:hover {
    background-color: var(--dx-color-separator) !important;
    border: 1px solid var(--dx-color-separator);
}

#btnMenu .dx-icon:before {
    content: "\f0c9" !important;
    color: var(--dx-menu-text-color) !important;
}

#toolPanel {
    display: flex;
    align-items: center;
    height: 100%;
}

#toolPanel button {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #e0e6ed;
    border-radius: 6px;
    color: #4a5568;
    margin-left: 0.8em;
    transition: all 0.2s ease;
    height: 2em;
    width: 2em;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#toolPanel button:hover {
    background-color: #f0f6ff;
    color: #2d3748;
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

#btnNotification {
    position: relative;
    color: #3a7bd5;
}

#btnNotification:after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 6px;
    height: 6px;
    background-color: #e53e3e;
    border-radius: 50%;
    display: block;
    border: 1px solid #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

#userPanel {
    display: flex;
    align-items: center;
    height: 100%;
}

#userInfoPanel {
    background-color: var(--dx-menu-background);
    border: 1px solid var(--dx-menu-background);
    color: var(--dx-menu-text-color);
    border-radius: 10px;
    padding: 0.4em 0.6em;
    margin-left: 0.8em;
    margin-right: 0.8em;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    min-width: 5em;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

#userInfoPanel:hover {
    background-color: var(--dx-btn-hover-color);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

#userImage {
    border-radius: 50%;
    border: 1px solid var(--dx-menu-background);
    height: 1.8em;
    width: 1.8em;
    object-fit: cover;
    margin-bottom: 0.2em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    color: var(--dx-menu-text-color);
}

#userName,
#nameSurename {
    color: var(--dx-menu-text-color);
    margin: 0;
    padding: 0;
    font-weight: 500;
    line-height: 1.1;
    width: 100%;
    text-align: center;
    font-size: 0.9em;
}

#userName {
    font-weight: 600;
    color: var(--dx-menu-text-color);
    font-size: 1em;
}

#btnLogout,
#btnOther {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #e0e6ed;
    border-radius: 6px;
    color: #3a7bd5;
    transition: all 0.2s ease;
    height: 2em;
    width: 2em;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.3em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#btnLogout:hover,
#btnOther:hover {
    background-color: #f0f6ff;
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

#btnLogout {
    color: #e53e3e;
}

#btnLogout:hover {
    background-color: #fff5f5;
    border-color: #fed7d7;
}

#btnOther {
    color: #4a5568;
}

#btnOther:hover {
    color: #3a7bd5;
}

#MenuSplit {
    border-right: 1px solid var(--dx-color-border);
    /* background-color: #f8f9fa; */
}

#menuTree {
    padding: 1em;
    color: #4a5568;
}

.dx-button-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.dx-icon {
    font-size: 0.9em;
}

.dx-scrollable-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    /* padding: 15px; */
}

.dx-context-menu.dx-overlay-content {
    height: auto !important;
}

.dx-menu-item-wrapper {
    margin-bottom: 8px !important;
}

#sidebarPanel {
    /* background: linear-gradient(to right, #f8f9fa, #f0f4f9, #f8f9fa); */
    background-color: var(--dx-color-main-bg) !important;
}

#headerPanel {
    padding: 15px 10px;
    align-items: center;
    top: 0px !important;
    width: unset !important;
    box-shadow: var(--box-shadow);
    margin: 10px;
    background-color: var(--dx-color-main-bg) !important;
    color: var(--dx-texteditor-color-text) !important;
    /* border: 1px solid var(--dx-color-border) !important; */
}

#panelAsil {
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

div[data-caption="Üye"] {
    border-radius: 10px;
    border-block-start: 1px solid #0d6efd;
    margin-bottom: 15px;
}

div[data-caption="Yakın"] {
    border-radius: 10px;
    border-block-start: 1px solid #dc3545;
    margin-bottom: 15px;
}

#panelYakin {
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

#panelAsil,
#panelYakin {
    /* border: 1px solid; */
    padding: 0.5em;
}

.dx-treeview-item {
    margin: 0 !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

.dx-treeview-item:hover,
.dx-treeview-item.dx-state-hover {
    background-color: var(--dx-color-primary-light, --dx-color-separator) !important;
    color: var(--dx-color-primary) !important;
}

.dx-treeview-item.dx-state-focused,
.dx-treeview-item.selected,
.dx-treeview-item.dx-state-selected {
    background-color: var(--dx-color-primary-medium, --dx-color-separator) !important;
    color: var(--dx-color-primary) !important;
    font-weight: 600 !important;
}

.dx-treeview-toggle-item-visibility {
    color: var(--dx-color-primary) !important;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.dx-treeview-toggle-item-visibility:hover {
    opacity: 1;
}

.dx-treeview-toggle-item-visibility-opened {
    background-color: transparent !important;
}

.dx-treeview-search {
    margin-bottom: 10px !important;
}

.omni-pagebox {
    margin: 0;
}

#loginPanel {
    padding: 2em;
    border-radius: 2em;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.dx-editor-underlined.dx-texteditor-with-floating-label .dx-texteditor-label {
    height: 20px !important;
    line-height: 15px !important;
}

.dx-texteditor-container {
    padding-top: 4px !important;
}

.dx-editor-underlined.dx-texteditor-with-floating-label.dx-texteditor-empty .dx-texteditor-label {
    font-size: 11px !important;
    color: gray !important;
}

.dx-editor-underlined.dx-texteditor-with-floating-label .dx-texteditor-label,
.dx-editor-underlined.dx-texteditor-with-floating-label.dx-state-focused .dx-texteditor-label {
    font-size: 11px !important;
    color: var(--dx-input-title-text);
}

.dx-texteditor-label .dx-label {

    font-weight: bold;
    display: flex;
}

.dx-editor-underlined.dx-texteditor-with-floating-label .dx-texteditor-input {
    padding-top: 8px !important;
}

.dx-fileuploader-wrapper {
    padding: 0px !important;
}

.dx-button {
    height: 24px !important;
}

/************************************************************
 * Tema renkleri
 ************************************************************/

.dx-button.dx-button-default {
    background-color: var(--dx-button-bg-primary) !important;
}

.dx-button.dx-button-default.dx-state-disabled {
    opacity: 0.7 !important;
}

.dx-button.dx-button-default:hover {
    background-color: var(--dx-button-bg-primary-hover) !important;
}

.dx-button.dx-button-danger {
    background-color: var(--dx-button-bg-danger) !important;
}

.dx-button.dx-button-danger.dx-state-disabled {
    opacity: 0.7 !important;
}

.dx-button.dx-button-danger:hover {
    background-color: var(--dx-button-bg-danger-hover) !important;
}

.dx-button.dx-button-success {
    background-color: var(--dx-button-bg-success) !important;
}

.dx-button.dx-button-success.dx-state-disabled {
    opacity: 0.7 !important;
}

.dx-button.dx-button-success:hover {
    background-color: var(--dx-button-bg-success-hover) !important;
}

.dx-button.dx-button-default .dx-icon,
.dx-button.dx-button-success .dx-icon,
.dx-button.dx-button-danger .dx-icon {
    color: var(--dx-icon-color) !important;
    font-size: var(--dx-font-size-sm) !important;
}

.dx-button-text {
    color: var(--dx-icon-color) !important;
}

.dx-button.dx-button-normal .dx-button-text {
    color: var(--dx-texteditor-color-text) !important;
}

.dx-button-mode-text .dx-icon {
    color: var(--dx-texteditor-color-text) !important;
}

.dx-button-mode-text.dx-closebutton .dx-icon {
    color: var(--dx-icon-color) !important;
}

.dx-button-mode-text.dx-closebutton.dx-state-hover .dx-icon,
.dx-button-mode-text.dx-closebutton.dx-state-focused .dx-icon,
.dx-button-mode-text.dx-closebutton.dx-state-selected .dx-icon {
    color: var(--dx-texteditor-color-text) !important;
}

.dx-calendar-navigator .dx-button .dx-icon {
    color: var(--dx-texteditor-color-text) !important;
}

.dx-treeview-search.dx-state-focused {
    border-color: var(--dx-color-primary) !important;
}

.dx-treeview-search .dx-icon-search {
    color: var(--dx-color-primary) !important;
}

.dx-treeview-item:focus {
    outline: none !important;
}

.dx-treeview .dx-state-focused>.dx-treeview-item {
    background-color: var(--dx-color-primary-medium, --dx-menu-background-hover) !important;
    color: var(--dx-color-primary) !important;
}

.dx-menu-item {
    color: var(--dx-texteditor-color-text) !important;
}

.dx-menu-item.dx-state-hover,
.dx-menu-item.dx-state-focused {
    background-color: var(--dx-color-primary-medium, --dx-menu-background-hover) !important;
    color: var(--dx-color-primary) !important;
}

.dx-menu-item.dx-menu-item-selected {
    background-color: var(--dx-color-primary-medium, --dx-menu-background-hover) !important;
    color: var(--dx-color-primary) !important;
    font-weight: 600 !important;
}

/************************************************************/

/************************************************************
 * Tablolarda kullanılan stiller
 ************************************************************/

.dx-datagrid .dx-column-lines>td {
    border-left: none !important;
    border-right: none !important;
}

.dx-datagrid-borders>.dx-datagrid-filter-panel,
.dx-datagrid-borders>.dx-datagrid-headers {
    border-top: none !important;
}

.dx-datagrid-borders>.dx-datagrid-headers,
.dx-datagrid-borders>.dx-datagrid-rowsview,
.dx-datagrid-borders>.dx-datagrid-total-footer {
    border-left: none !important;
    border-right: none !important;
}

.dx-datagrid-borders>.dx-datagrid-rowsview,
.dx-datagrid-borders>.dx-datagrid-total-footer {
    border-bottom: none !important;
}

#gridPanel {
    box-shadow: var(--box-shadow);
    margin: 10px;
    padding: 10px;
}

td .dx-icon {
    color: var(--dx-texteditor-color-text) !important;
}

/************************************************************/

.dx-resize-handle {
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.dx-resize-handle:hover {
    opacity: 1;
}

.dx-splitter .dx-resize-handle {
    background-color: #e0e0e0ab !important;
}

.omni-window {
    border: none !important;
}

.dx-menu-item-content .dx-icon {
    color: var(--dx-menu-text-color) !important;
}

.dx-icon.fa-bell {
    color: var(--dx-menu-text-color) !important;
}

#btn_KaydetGuncelle {
    color: var(--dx-icon-color) !important;
}

#userImage .dx-icon {
    color: var(--dx-menu-text-color) !important;
}

.dx-icon-more {
    color: var(--dx-menu-text-color) !important;
}

#MenuBox {
    padding-left: 10px;
}

/*.dx-button-content {
  color: var(--dx-icon-color) !important;
}

.dx-tabs {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  z-index: 999;
}

.dx-tab-content {
  border-radius: 5px;
  padding: 3px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}*/

.dx-item-content.dx-tab-content .dx-icon-close {
    color: var(--dx-button-bg-primary) !important;
}

.dx-tab .dx-icon {
    color: var(--dx-texteditor-color-text) !important;
}

.dx-tab.dx-tab-selected .dx-icon {
    color: var(--dx-color-primary) !important;
}

/*.dx-show-clear-button .dx-icon-clear {
  background-color: transparent !important;
  color: var(--dx-button-bg-primary) !important;
}*/

/*.dx-tab.dx-tab-selected {
  background-color: var(--dx-color-primary-medium,
      --dx-color-separator) !important;
  color: var(--dx-color-primary) !important;
}*/
#userMenu {
    position: absolute;
    opacity: 0;
    overflow: hidden;
}

/* Panel genel stili */
#uyeIletisimPanel, #uyeNotPanel, #uyeKBilgiPanel, #uyeOBilgiPanel, #uyeHizmetBilgiPanel, #uyeEmeklilikBilgiPanel, #tahsisBilgileriTabPanel,
#uyeGidenEvrakPanel, #uyeGelenEvrakPanel, #uyeYakinListesiPanel, #yakinGidenEvrakPanel, #yakinGelenEvrakPanel, #pnlEmekliSayilar, #pnlBordroUyarilar,
#pnlUyeBilgileri, #pnlbirikmisler, #pnlBordroOlustur, #pnlIkramiyeBordroOlustur, #pnlmusterekHizmetler, #pnlMusterekHizmetAlt,
#pnlMaasBaglamaOzet, #pnlIkramiyeOzet, #pnlOrtalamaOzet, #pnlmaasBaglanacakHakSahipleri, #pnlTahsisYapilmamisYakinlar,
#pnlKanuniBordro, #pnlMunzamBordro, #pnlBordroEmekliSayilar, #pnlMunzamEmekliSayilar, #pnlBordroHatalar, #pnlBordroIptalHatalar,
#pnlAlacakHisseler, #pnlBorcHisseler, #pnlAlacakHisseYeniKayit, #pnlalacakHisseBilgiler, #pnlborcHisseBilgiler,
#pnlMaasOzet, #pnlicmalBilgileri3, #pnlIcmalKesintiBilgiKanuni, #pnlIcmalKesintiBilgiMunzam, #pnlicmalBilgileri8,
#pnl_altSinirAltiHakSahipleri, #mktZam, #pnlPrimAktarimBilgiler, #panelUploadDocumentInfo, #sifreDegistirPanelUyari, #sifreDegistirPanel, #sifreDegistirSonucPanel,
#HizliRaporMainFiltrePanel, #RaporSelectTipler, #ParametrePanel, #HizliRaporButtonPanel, #hizmetTarihlerPanel, #normalEmeklilikPanel, #kismiEmeklilikPanel {
    padding: 24px;
    background-color: var(--dx-component-color-bg) !important;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
}



#uyeGidenEvrakPanel, #uyeGelenEvrakPanel, #uyeHizmetBilgiPanel, #uyeEmeklilikBilgiPanel {
    width: calc(100vw - 186px) !important;
}

#yakinGidenEvrakPanel, #yakinGelenEvrakPanel {
    width: calc(100vw - 156px) !important;
}

#uyePrimUstBilgiPanel {
    padding: 24px;
    margin: 0 10px;
    background-color: var(--dx-component-color-bg) !important;
    box-shadow: var(--box-shadow);
}

#uyeKBilgiPanel, #uyeOBilgiPanel {
    grid-template-rows: repeat(5, 30px);
}

#gridHizmetGetir2 .dx-datagrid-header-panel {
    display: none !important;
}

#tileBox_UyeNot {
    height: fit-content !important;
}

.uyeNotSection {
    margin: 0 0 15px 0 !important;
}

.uyeNotSection h4,
.uyeNotSection p,
.uyeNotSection label {
    margin: 0 0 5px 0 !important;
}

.dx-tile {
    border: none !important;
    position: unset !important;
    height: unset !important;
    width: unset !important;
}

.dx-tileview-wrapper {
    height: 100% !important;
    max-height: 200px;
    overflow-y: auto !important;
}

.dx-tile.dx-state-active {
    background-color: var(--dx-component-color-bg) !important;
    color: var(--dx-menu-text-color) !important;
    transition: none !important;
    transform: none !important;
}

/* Scrollbar inceltme */
.dx-tileview-wrapper::-webkit-scrollbar {
    width: 6px !important;
    background: transparent;
}

.dx-tileview-wrapper::-webkit-scrollbar-thumb {
    background: #bfc7d1;
    border-radius: 4px;
}

.dx-tileview-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

/* Firefox için */
.dx-tileview-wrapper {
    scrollbar-width: thin;
    scrollbar-color: #bfc7d1 transparent;
}

.dx-scrollview-content.dx-tileview-wrapper {
    width: auto !important;
}

.panelUploadDocumentInfo {
    grid-template-columns: repeat(3, 1fr) !important;
}

.dx-splitter .dx-splitter-item-content {
    overflow: auto !important;
}

.dx-splitter .dx-splitter-item-content::-webkit-scrollbar {
    width: 8px;
}

.dx-splitter .dx-splitter-item-content::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 4px;
}

.dx-splitter .dx-splitter-item-content::-webkit-scrollbar-thumb {
    background-color: #c0c0c0;
    border-radius: 4px;
    border: 2px solid #f5f5f5;
}

.dx-splitter .dx-splitter-item-content::-webkit-scrollbar-thumb:hover {
    background-color: #a0a0a0;
}

#topContainer::-webkit-scrollbar {
    width: 8px !important;
}

#topContainer::-webkit-scrollbar-track {
    background: #f5f5f5 !important;
    border-radius: 4px !important;
}

#topContainer::-webkit-scrollbar-thumb {
    background-color: #c0c0c0 !important;
    border-radius: 4px !important;
    border: 2px solid #f5f5f5 !important;
}

#topContainer::-webkit-scrollbar-thumb:hover {
    background-color: #a0a0a0 !important;
}

/* Maas Bordro Islemleri  tutar renkleri */
#GelirlerToplam input {
    color: blue !important;
}

#KesintilerToplam input {
    color: red !important;
}

#OdenecekTutar input {
    color: green !important;
}

#MunzamGelirlerToplam input {
    color: blue !important;
}

#MunzamKesintilerToplam input {
    color: red !important;
}

#MunzamOdenecekTutar input {
    color: green !important;
}

#ToplamNetTutar input {
    color: green !important;
}

#VakifGuncelMaas input {
    color: green !important;
}

#SGKMusterekGuncelMaas input {
    color: green !important;
}

#MunzamEmekliMaas input {
    color: green !important;
}

#SonucMsj input {
    color: var(--dx-color-primary) !important;
}

#BordroTemelPanel, #BordroKanuniPanel, #BordroMunzamPanel, #pnlMaasBagla {
    padding: 24px;
    background-color: var(--dx-component-color-bg) !important;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
}

#txtMesaj textarea {
    color: var(--dx-color-success) !important;
}


#tileBox_YakinFoto {
    height: 200px !important;
}

#tileBox_UyeFoto {
    height: 200px !important;
}

#FotoBelge {
    width: 150px !important;
}

#uyeFotoPanel {
    padding: 24px;
    background-color: var(--dx-component-color-bg) !important;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
}

#yakinFotoPanel {
    padding: 24px;
    background-color: var(--dx-component-color-bg) !important;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
}

/*gridlerin üstündeki boşluğu alır*/
.dx-datagrid-header-panel {
    padding: 0px !important;
}

/*gridlerin üstündeki boşluğu alır*/
.dx-datagrid-header-panel .dx-toolbar .dx-toolbar-items-container {
    height: 0px !important;
}


/*
#musterekHizmetler{
    height: 30px !important;
}

.musterekHizmetlerSection {
    display: flex;
    column-gap: 1em;
    font-size: 16px;
    justify-content: space-between;
    margin-left: 0.5em;
}*/

div[id$="_icon-green"].dx-button,
div[id$="_icon-green"].dx-button.dx-state-hover,
div[id$="_icon-green"].dx-button.dx-state-focused,
div[id$="_icon-green"].dx-button.dx-state-active {
    width: 20px !important;
    height: 20px !important;
    background-color: var(--dx-button-bg-success) !important;
}

div[id$="_icon-red"].dx-button {
    width: 20px !important;
    height: 20px !important;
    background-color: var(--dx-button-bg-danger) !important;
}

div[id$="_lbl"] {
    font-size: 14px !important;
    margin-left: 0 !important;
}