:root {
  --tskb-main: #b81c22;
  --dx-color-primary: #b81c22 !important;
  --dx-color-primary-light: #ff373e15 !important;
  --dx-color-primary-medium: #b81c217a !important;
  --dx-color-title-background: #b81c22 !important;
  --dx-color-blue-light: #2664a727 !important;
  --dx-color-blue-medium: #2664a794 !important;

  --box-shadow-soft: rgba(0, 0, 0, 0.05) 0px 2px 8px 0px;
}

.omni-form-login {
  background-image: url("../assets/backgrounds/login-background.jpg");
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, 0);
  /* Saydamlık için arka plan rengi ve blend mode */
  background-blend-mode: lighten;
}

#loginPanel {
  padding: 2em;
  border-radius: 2em;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  background-color: rgba(255, 255, 255, 0.3);
  grid-column: 4 !important;
}

#HomeHeaderPanel {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  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;
  margin-bottom: 1rem;
  height: 60px;

  background-image: url("../assets/backgrounds/header-background.jpg");
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.7);
  /* Saydamlık için arka plan rengi ve blend mode */
  background-blend-mode: lighten;
}

#pageContainer {
  display: flex !important;
  flex-direction: row;
  height: 100vh;
  width: 100vw;
}

/* Modern Sidebar Styling - Based on React Sidebar */
#sidebarPanel {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 40 !important;
  width: 288px !important;
  /* w-72 equivalent */
  background-color: white !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  /* shadow-xl */
  transform: translateX(0) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  /* transition-all duration-300 ease-in-out */
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

#sidebarPanel.menu-closed {
  width: 80px !important;
  /* w-20 equivalent */
}

/* Logo Panel Styling */
#logoPanel {
  padding: 24px !important;
  /* p-6 when open */
  border-bottom: 1px solid #f3f4f6 !important;
  /* border-gray-100 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#sidebarPanel.menu-closed #logoPanel {
  padding: 16px !important;
  /* p-4 when closed */
}

#logoPanel .logo-container {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  /* space-x-3 */
}

#sidebarPanel.menu-closed #logoPanel .logo-container {
  justify-content: center !important;
}

#logoPanel #logo {
  /*width: 40px !important; /* w-10 */
  /*height: 40px !important; /* h-10 */
  /*background: linear-gradient(135deg, #ef4444, #dc2626) !important; /* bg-gradient-to-br from-red-500 to-red-700 */
  /*border-radius: 12px !important; /* rounded-xl */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /*box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important; /* shadow-lg */
  object-fit: contain !important;
  /*filter: brightness(0) invert(1) !important; /* Make logo white */
}

#logoPanel .logo-text {
  font-size: 20px !important;
  /* text-xl */
  font-weight: 700 !important;
  /* font-bold */
  color: #1f2937 !important;
  /* text-gray-800 */
  overflow: hidden !important;
  transition: opacity 0.3s ease !important;
}

#sidebarPanel.menu-closed #logoPanel .logo-text {
  opacity: 0 !important;
  width: 0 !important;
}

/* Menu Tree Styling */
#menuTree {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 16px 0 !important;
  /* py-4 */
}

/* Menu Items Container */
#menuTree .dx-treeview {
  padding: 0 16px !important;
  /* px-4 when open */
}

#sidebarPanel.menu-closed #menuTree .dx-treeview {
  padding: 0 8px !important;
  /* px-2 when closed */
}

/* Individual Menu Items */
#menuTree .dx-treeview-item {
  margin-bottom: 4px !important;
  /* space-y-1 */
  border-radius: 12px !important;
  /* rounded-xl */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#menuTree .dx-treeview-item-content {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding: 12px 16px !important;
  /* py-3 px-4 when open */
  color: #374151 !important;
  /* text-gray-700 */
  border-radius: 12px !important;
  /* rounded-xl */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

#sidebarPanel.menu-closed #menuTree .dx-treeview-item-content {
  padding: 12px !important;
  /* px-3 py-3 when closed */
  justify-content: center !important;
}

#menuTree .dx-treeview-item-content:hover {
  color: #dc2626 !important;
  /* hover:text-red-600 */
  /*background-color: #fef2f2 !important; /* hover:bg-red-50 */
  transform: translateX(4px) !important;
  /* hover:translate-x-1 */
}

/* Menu Item Icons */
#menuTree .dx-treeview-item-content::before {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  /* w-10 when open */
  height: 40px !important;
  /* h-10 when open */
  border-radius: 8px !important;
  /* rounded-lg */
  background-color: #f3f4f6 !important;
  /* bg-gray-100 */
  color: #4b5563 !important;
  /* text-gray-600 */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin-right: 12px !important;
  /* ml-3 */
}

#sidebarPanel.menu-closed #menuTree .dx-treeview-item-content::before {
  width: 32px !important;
  /* w-8 when closed */
  height: 32px !important;
  /* h-8 when closed */
  margin-right: 0 !important;
}

#menuTree .dx-treeview-item-content:hover::before {
  background-color: #fecaca !important;
  /* group-hover:bg-red-100 */
  color: #dc2626 !important;
  /* group-hover:text-red-600 */
}

/* Menu Item Text */
#menuTree .dx-treeview-item-content .dx-treeview-item-text {
  font-weight: 500 !important;
  /* font-medium */
  flex: 1 !important;
  text-align: left !important;
  transition: opacity 0.3s ease !important;
}

#sidebarPanel.menu-closed
  #menuTree
  .dx-treeview-item-content
  .dx-treeview-item-text {
  opacity: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* Submenu Styling */
#menuTree
  .dx-treeview-node[aria-expanded="true"]
  > .dx-treeview-item
  > .dx-treeview-item-content {
  /*background-color: #fef2f2 !important;*/
  color: #dc2626 !important;
}

#menuTree .dx-treeview-node .dx-treeview-node {
  margin-left: 10px !important;
  /* ml-14 */
  margin-top: 4px !important;
  /* mt-1 */
}

#menuTree .dx-treeview-node .dx-treeview-node .dx-treeview-item-content {
  padding: 8px 16px !important;
  /* py-2 px-4 */
  font-size: 14px !important;
  /* text-sm */
  color: #4b5563 !important;
  /* text-gray-600 */
  border-radius: 8px !important;
  /* rounded-lg */
}

#menuTree .dx-treeview-node .dx-treeview-node .dx-treeview-item-content:hover {
  color: #dc2626 !important;
  /* hover:text-red-600 */
  /*background-color: #fef2f2 !important; /* hover:bg-red-50 */
  transform: none !important;
  /* Remove translate for subitems */
}

/* Hide submenu items when sidebar is closed */
#sidebarPanel.menu-closed #menuTree .dx-treeview-node .dx-treeview-node {
  display: none !important;
}

/* Expand/Collapse Arrow */
#menuTree .dx-treeview-toggle-item-visibility {
  width: 20px !important;
  /* w-5 */
  height: 20px !important;
  /* h-5 */
  color: #9ca3af !important;
  /* text-gray-400 */
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#menuTree
  .dx-treeview-node[aria-expanded="true"]
  .dx-treeview-toggle-item-visibility {
  transform: rotate(180deg) !important;
}

#sidebarPanel.menu-closed #menuTree .dx-treeview-toggle-item-visibility {
  display: none !important;
}

#HomeBodySplit {
  flex: 1 1 0%;
  min-width: 0;
  width: auto !important;
}

#tileBox_Breadcrumb {
  overflow: hidden !important;
  display: flex;
  align-items: center;
  padding: 0 30px;
  width: 100%;
}

#pageHeaderPanel {
  display: flex !important;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 0 20px;
  box-shadow: var(--box-shadow);
  padding: 20px 0px;
  background-color: var(--card-bg-color);
  border-radius: 10px 10px 0px 0px;
}

#tarihFiltre {
  margin-bottom: 20px;
  align-items: center;
  display: flex !important;
  flex-wrap: wrap;
}

#altBilgiPanel {
  margin-top: 30px;
  padding: 15px;
  /* box-shadow: var(--box-shadow); */
  border-radius: 8px;
  /* border-left: 12px solid #17a2b8; */
  background-color: var(--dx-color-blue-light) !important;
  line-height: 20px;
  padding-left: 20px;
  display: flex !important;
  align-items: center;
}

#altBilgiBaslik {
  margin-left: 0 !important;
  text-align: center;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--tskb-main);
  border-bottom: 1px solid lightgray;
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding-bottom: 15px;
}

#altBilgiBaslik_btn {
  margin-bottom: 0 !important;
  border-radius: 50px;
}

#altBilgiLabel {
  margin-left: 0 !important;
}

#altBilgiPanel_red {
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 8px;
  background-color: var(--dx-color-primary-light) !important;
  line-height: 20px;
  padding-left: 20px;
  display: flex !important;
  align-items: center;
  gap: 10px !important;
}

#altBilgiBaslik_btn_red {
  margin-bottom: 0 !important;
  border-radius: 50px;
  background-color: var(--tskb-main) !important;
}

#mainContainer {
  /* padding: 10px; */
  box-sizing: border-box;
}

#contentHeader {
  margin: 0 15px !important;
}

.omni-form-home {
  overflow-y: hidden !important;
  /* Sadece ana sayfada */
}

/* Diğer .omni-form-xxx'lerde gizleme olmasın */
[class^="omni-form-"]:not(.omni-form-home) {
  overflow-y: auto !important;
  /* veya initial ya da unset da olur */
}

#sidebarPanel {
  background-image: url("../assets/backgrounds/sidebar-background.jpg");
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.7);
  /* Saydamlık için arka plan rengi ve blend mode */
  background-blend-mode: lighten;
  flex: 0 0 18rem;
  width: 18rem !important;
  min-width: 14rem;
  max-width: 22rem;
  height: 100%;
}

#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; */
}

#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.7em;
}

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

#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: auto !important;
  /* padding: 15px; */
}

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

.dx-menu-item-wrapper {
  margin-bottom: 8px !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: 0 !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
}

.dx-treeview-node-container {
  padding: 5px !important;
}

.dx-treeview-node {
  padding: 4px 0 !important;
}

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

.dx-treeview-item.dx-state-focused,
.dx-treeview-item.selected,
.dx-treeview-item.dx-state-selected {
  box-shadow: var(--box-shadow);
  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;
}

@media screen and (max-width: 768px) {
  #bordroPanel {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  #tarihFiltre {
    display: flex !important;
    flex-wrap: wrap !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-tabs-styling-mode-secondary.dx-tab-indicator-position-bottom
  .dx-tab.dx-tab-selected
  .dx-tab-content::after,
.dx-tabs-styling-mode-secondary.dx-tab-indicator-position-bottom
  .dx-tab.dx-tab-selected.dx-state-focused
  .dx-tab-content::after {
  background-color: var(--dx-color-primary) !important;
}

.dx-treeview .dx-state-focused > .dx-treeview-item {
  /* background-color: var(
    --dx-color-primary-medium,
    --dx-menu-background-hover
  ) !important; */
  box-shadow: var(--box-shadow);
  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-datagrid-header-panel {
  display: none !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,
#pnlEmekliSayilar,
#pnlBordroUyarilar,
#pnlUyeBilgileri {
  padding: 24px;
  background-color: var(--dx-component-color-bg) !important;
  border-radius: 8px;
  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;
}

#tileBox_Breadcrumb .dx-tileview-wrapper {
  height: 100% !important;
  max-height: 200px;
  overflow-y: auto !important;
  width: auto !important;
  display: flex;
  align-items: baseline;
}

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

.dx-tile {
  margin-right: 5px;
  background-color: transparent !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;
}

.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;
}

#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);
}

/* Dx-Editör stilleri */

/* Üye Prim Üst Bilgi Paneli */
#uyePrimPanel,
#uyeHizmetBilgiPanel,
#kvkkBeyaniPanel {
  display: block !important;
  gap: 8px;
  background: transparent;
  border: none;
  box-shadow: none;
  justify-content: flex-start;
  align-items: center;
  margin: 0 20px;
  box-shadow: var(--box-shadow);
  padding: 30px 30px 30px;
  background-color: var(--card-bg-color);
  border-radius: 0 0 8px 8px;
  width: calc(100vw - 100px);
}

/* #uyePrimPanel>div[id$="PrimGun"] {
  background: #f5f8fa;
  box-shadow: 0 1px 2px rgba(110, 130, 180, 0.07);
  min-width: 110px;
  flex: 0 0 auto;
  padding: 7px 15px 7px 15px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-left: 3px solid var(--tskb-main);
}
 */

#bilgiPanelHeader {
  /* color: var(--tskb-main); */
  margin-left: 0px !important;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 30px;
  padding: 10px 0 10px 10px;
  background: linear-gradient(45deg, transparent, var(--dx-color-blue-light));
  border-radius: 50px;
  box-shadow: var(--box-shadow-soft);
}

#bilgiPanelHeader_hr {
  /* display: block !important;
  border: none;
  height: 2px;
  margin-top: 4px;
  margin-bottom: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--tskb-main) 0%, #e3c9c9 100%); */
}

/* Tablolar */
/* .dx-datagrid,
.dx-datagrid-headers {
  background: #fff;
}

.dx-header-row td {
  font-weight: 600;
  font-size: 16px;
  border-bottom: 2px solid #e2e8f0;
  border-top: 1px solid #e2e8f0;
}

.dx-row.dx-data-row {
  font-size: 1.03rem;
  border-bottom: 1px solid #e9edf2;
  transition: background 0.2s;
}

.dx-row.dx-data-row:hover {
  background: #e3eefd36;
}


.dx-row.dx-summary-row,
.dx-row.dx-total-row {
  background: #eef4fa !important;
  font-weight: 700;
  font-size: 1.08rem;
  color: #17477b;
}

td {
  padding: 12px 8px;
}

.dx-data-row:nth-child(even) {
  background: #e8f2fb !important;

}

.dx-data-row:nth-child(odd) {
  background: #fff !important;

}

.dx-data-row:hover {
  background: #d2e4f9 !important;
} */

#listeGridBox_Kanuni .dx-data-row:nth-last-of-type(2) td,
#listeGridBox_Munzam .dx-data-row:nth-last-of-type(2) td {
  font-weight: bold !important;
}

[class^="omni-form-"] {
  margin: 1em !important;
}

.breadcrumb-link {
  color: var(--dx-color-primary) !important;
  text-decoration: none !important;
  margin-right: 3px;
}

.breadcrumb-not-link {
  margin-right: 3px;
}

#hizmetDetaylariUstBilgiPanel {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
}

#hizmetDetaylariUstBilgiPanelDetayPanel {
  background-color: var(--dx-color-primary);
  color: white;
  margin-bottom: 30px;
  border-radius: 8px;
  row-gap: 0.3em !important;
  padding: 10px;
  width: 150px;
  box-shadow: var(--box-shadow);
}

#ustBilgiPanelLabelBaslik {
  font-weight: 600;
  font-size: 12px;
}

@media screen and (max-width: 768px) {
  #hizmetDetaylariUstBilgiPanel {
    flex-direction: column;
    align-items: flex-start;
  }

  #hizmetDetaylariUstBilgiPanelDetayPanel {
    width: -webkit-fill-available;
    margin-bottom: 10px;
  }
}

#tarihFiltreRow {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 20px !important;
}

#rowPanel {
  display: flex !important;
  flex-direction: row !important;
  row-gap: 20px !important;
  column-gap: 20px !important;
  flex-wrap: wrap;
}

#emeklilikBilgileriPanelDetay,
#gunPanelDetay,
#yasPanelDetay,
#yilPanelDetay,
#emeklilikGelenEvrakDetayPanelDetay,
#saglikGelenEvrakDetayPanelDetay,
#saglikGidenEvrakDetayPanelDetay {
  padding: 10px;
}

#emeklilikBilgileriPanel,
#gunPanel,
#yasPanel,
#yilPanel,
#emeklilikGelenEvrakDetayPanel,
#saglikGelenEvrakDetayPanel,
#saglikGidenEvrakDetayPanel {
  border-radius: 16px !important;
  box-shadow: var(--box-shadow);
}

#emeklilikBilgileriPanelCaption,
#gunPanelCaption,
#yasPanelCaption,
#yilPanelCaption,
#emeklilikGelenEvrakDetayPanelCaption,
#saglikGelenEvrakDetayPanelCaption,
#saglikGidenEvrakDetayPanelCaption {
  background: linear-gradient(135deg, #c41e3a 0%, #dc2626 100%) !important;
  color: white !important;
  padding: 16px 24px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  border-radius: 16px 16px 0 0 !important;
  margin-left: 0 !important;
}

#EmeklilikTarihLabel,
#EmeklilikTarih,
#IlkSigortaTarihiLabel,
#IlkSigortaTarihi,
#VakifGirisTarihiLabel,
#VakifGirisTarihi,
#EmeklilikTarihiHizmetGuneGoreLabel,
#EmeklilikTarihiHizmetGuneGore,
#AsgariPrimGunLabel,
#AsgariPrimGun,
#HizmetGunuLabel,
#HizmetGunu,
#KalanHGunuLabel,
#KalanHGunu,
#EmeklilikTarihiYasaGoreLabel,
#EmeklilikTarihiYasaGore,
#EmeklilikYasLabel,
#EmeklilikYas,
#GuncelYasLabel,
#GuncelYas,
#KalanYasLabel,
#KalanYas,
#EmeklilikTarihiYilaGoreLabel,
#EmeklilikTarihiYilaGore,
#EmeklilikYilLabel,
#EmeklilikYil,
#GuncelYilLabel,
#GuncelYil,
#KalanYilLabel,
#KalanYil {
  width: 130px !important;
}

#GelenEvrakUyeAdSoyadLabel,
#GelenEvrakUyeAdSoyad,
#GelenEvrakYilLabel,
#GelenEvrakYil,
#GelenEvrakSiraNoLabel,
#GelenEvrakSiraNo,
#GelenEvrakGelisTarihLabel,
#GelenEvrakGelisTarih,
#GelenEvrakKonuLabel,
#GelenEvrakKonu,
#GelenEvrakVakifTipLabel,
#GelenEvrakVakifTip {
  width: 250px !important;
}

#buttonPanel {
  display: flex !important;
  flex-wrap: wrap !important;
}

#pnlUyari {
  padding: 10px;
  background-color: var(--dx-color-primary-light);
  color: var(--dx-color-primary);
  border-radius: 8px;
  box-shadow: var(--box-shadow);
  margin-bottom: 20px;
}

#ayrilanPanel {
  display: flex !important;
  margin-bottom: 10px;
}

#sifreDegistirPanelUyari {
  padding: 10px;
  background-color: var(--dx-color-primary-light);
  color: var(--dx-color-primary);
  border-radius: 8px;
  box-shadow: var(--box-shadow);
  margin-bottom: 20px;
}

#btnPanelForm {
  margin-top: 15px;
}

#fileUploadPanel {
  gap: 1rem;
}

#sifreDegistirSonucPanel {
  padding: 10px;
  background-color: var(--dx-color-primary);
  color: var(--dx-icon-color);
  border-radius: 8px;
  box-shadow: var(--box-shadow);
  margin-top: 20px;
}

div[id$="_label"] {
  font-weight: 800 !important;
  margin-bottom: 10px !important;
  margin-left: 0px !important;
}

#nufusKayitOrnegi.dx-fileuploader,
#spas.dx-fileuploader,
#barkodluHizmetDokumu.dx-fileuploader,
#ogrenciMezuniyetBelgesi.dx-fileuploader {
  padding: 1rem !important;
  margin: 2rem 0 0 0 !important;
}

#nufusKayitOrnegi .dx-fileuploader-input-container,
#spas .dx-fileuploader-input-container,
#barkodluHizmetDokumu .dx-fileuploader-input-container,
#ogrenciMezuniyetBelgesi .dx-fileuploader-input-container {
  width: auto !important;
}

#nufusKayitOrnegi .dx-fileuploader-input-wrapper,
#spas .dx-fileuploader-input-wrapper,
#barkodluHizmetDokumu .dx-fileuploader-input-wrapper,
#ogrenciMezuniyetBelgesi .dx-fileuploader-input-wrapper {
  flex-direction: row !important;
  min-height: auto !important;
  padding: 1rem !important;
}

#nufusKayitOrnegi .dx-fileuploader-input-wrapper::before,
#spas .dx-fileuploader-input-wrapper::before,
#barkodluHizmetDokumu .dx-fileuploader-input-wrapper::before,
#ogrenciMezuniyetBelgesi .dx-fileuploader-input-wrapper::before {
  width: 50px !important;
  margin: 0 !important;
}

#nufusKayitOrnegi .dx-fileuploader-input-wrapper::after,
#spas .dx-fileuploader-input-wrapper::after,
#barkodluHizmetDokumu .dx-fileuploader-input-wrapper::after,
#ogrenciMezuniyetBelgesi .dx-fileuploader-input-wrapper::after {
  width: auto !important;
}

.dx-overlay-content {
  width: 40em !important;
}

media screen and (max-width: 600px) {
  .dx-overlay-content {
    width: 30em !important;
  }
}