/*
   DAPROS COMPACT PREMIUM UI
   Shared visual contract for every current and future module.

   New pages should start with:
   .dp-page.dp-ui > .dp-frame > .dp-page-hero + .dp-tabs + .dp-panel
   Module-specific CSS belongs in the module; size, rhythm and controls belong here.
*/

:root {
  --dp-font-family: system-ui, "Segoe UI", Arial, sans-serif;
  --dp-text-xs: 11px;
  --dp-text-sm: 12.5px;
  --dp-text-md: 14px;
  --dp-text-lg: 16px;
  --dp-text-xl: 20px;
  --dp-title-size: clamp(28px, 2.4vw, 36px);

  --dp-control-h: 44px;
  --dp-control-h-sm: 36px;
  --dp-control-h-lg: 46px;

  --dp-space-1: 4px;
  --dp-space-2: 8px;
  --dp-space-3: 12px;
  --dp-space-4: 16px;
  --dp-space-5: 20px;
  --dp-space-6: 24px;

  --dp-radius-sm: 10px;
  --dp-radius-md: 14px;
  --dp-radius-lg: 20px;
  --dp-radius-xl: 26px;

  --dp-page-max: 1480px;
  --dp-page-gap: 20px;
  --dp-card-padding: 20px;
  --dp-panel-padding: 22px;

  --dp-blue: #2563eb;
  --dp-cyan: #06b6d4;
  --dp-green: #22c55e;
  --dp-red: #ef4444;
  --dp-orange: #f97316;
  --dp-amber: #f59e0b;
  --dp-purple: #7c3aed;
  --dp-ink: #0f172a;
  --dp-muted: #64748b;
  --dp-line: rgba(15, 23, 42, .10);
  --dp-surface: rgba(255, 255, 255, .82);
  --dp-gradient: linear-gradient(135deg, #2563eb 0%, #06b6d4 50%, #22c55e 100%);
  --dp-shadow: 0 18px 48px rgba(15, 23, 42, .12);
  --dp-shadow-soft: 0 10px 28px rgba(15, 23, 42, .08);

  /* Used by the existing layout without changing its behavior. */
  --layout-topbar-h: 60px;
}

/* Shared page shell */
.dp-ui,
.dp-page { font-family: var(--dp-font-family); color: var(--dp-ink); }
.dp-ui { box-sizing: border-box; }
.dp-ui *, .dp-ui *::before, .dp-ui *::after { box-sizing: border-box; }

.dp-page {
  width: min(var(--dp-page-max), calc(100% - 36px));
  margin: 18px auto 48px;
}
.dapros-page { width: min(var(--dp-page-max), calc(100% - 36px)); margin: 18px auto 48px; }
.dapros-frame { padding: var(--dp-space-4); border-radius: var(--dp-radius-xl); }
.dp-frame {
  position: relative;
  overflow: hidden;
  padding: var(--dp-space-4);
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: var(--dp-radius-xl);
  background: var(--dp-surface);
  box-shadow: var(--dp-shadow);
  backdrop-filter: blur(18px);
}
.dp-frame > * { position: relative; z-index: 1; }

/* Header contract. Existing profile, institution and navigation behavior is untouched. */
header.topbar { height: var(--layout-topbar-h) !important; min-height: var(--layout-topbar-h) !important; }
header.topbar .brand img { width: 40px !important; height: 40px !important; border-radius: 12px !important; }
.hdr-profile { top: 8px !important; height: 44px !important; }
.hdr-home { width: 40px !important; height: 40px !important; border-radius: 13px !important; }
.profile-chip { height: 42px !important; border-radius: 13px !important; }

/* Hero: .dp-hero remains a compatibility name; .dp-page-hero is the canonical name. */
.dp-page-hero,
.dp-ui .dp-hero,
.dapros-hero {
  min-height: 104px;
  padding: 16px 22px;
  border-radius: 21px;
}
.dp-page-hero { display: flex; align-items: center; gap: 14px; color: #fff; background: var(--dp-gradient); }
.dp-page-hero__icon,
.dp-ui .dp-hero-icon,
.dapros-hero .hero-icon {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 16px;
  display: grid; place-items: center;
}
.dp-page-hero__title { margin: 0; font-size: var(--dp-title-size); line-height: 1; font-weight: 900; letter-spacing: -.035em; }
.dp-page-hero__subtitle { margin: 7px 0 0; font-size: 13px; line-height: 1.4; opacity: .88; }
.dp-page-hero__kicker { margin-bottom: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; opacity: .82; }
.dp-page-hero__badge { min-height: 29px; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.dp-ui .dp-hero-title { font-size: var(--dp-title-size); }
.dp-ui .dp-hero-subtitle { font-size: 13px; }

/* Tabs */
.dp-tabs,
.dp-ui .tabs {
  display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none;
  margin: 12px 0; padding: 4px; border: 1px solid var(--dp-line); border-radius: 14px;
  background: rgba(255, 255, 255, .66);
}
.dp-tabs::-webkit-scrollbar, .dp-ui .tabs::-webkit-scrollbar { display: none; }
.dp-tab,
.dp-ui .tabs > button,
.dp-ui .tabs > a,
.dp-ui .tabs > .tab {
  min-height: var(--dp-control-h-sm); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent;
  color: var(--dp-muted); font: 700 var(--dp-text-sm)/1 var(--dp-font-family); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.dp-tab.is-active, .dp-tab[aria-selected="true"], .dp-ui .tabs > .is-active,
.dp-ui .tabs > button[aria-selected="true"] { color: #fff; background: var(--dp-gradient); box-shadow: 0 5px 14px rgba(37, 99, 235, .20); }

/* Panels and cards */
.dp-panel,
.dp-ui .tabpanel.is-visible,
.dp-ui .panel-outer { padding: var(--dp-panel-padding); border: 1px solid var(--dp-line); border-radius: 21px; background: rgba(255, 255, 255, .72); }
.dp-ui .tabpanel { display: none; }
.dp-card,
.dp-ui .card, .dp-ui .box { padding: var(--dp-card-padding); border: 1px solid var(--dp-line); border-radius: var(--dp-radius-lg); background: rgba(255, 255, 255, .86); box-shadow: var(--dp-shadow-soft); }
.dp-ui .box legend { margin-bottom: 8px; font-size: var(--dp-text-lg); font-weight: 800; }
.dp-ui #ogrenciTopbar { display: none; }
.dp-card--blue { border-top: 3px solid var(--dp-blue); }
.dp-card--green { border-top: 3px solid var(--dp-green); }
.dp-card--orange { border-top: 3px solid var(--dp-orange); }
.dp-card--purple { border-top: 3px solid var(--dp-purple); }
.dp-card--danger { border-top: 3px solid var(--dp-red); }

/* Forms: scoped to the design system and its explicit legacy compatibility surface. */
.dp-form { display: flex; flex-direction: column; gap: 8px; }
.dp-form .row { display: grid; grid-template-columns: minmax(140px, 170px) minmax(0, 1fr); align-items: center; gap: 8px 14px; }
.dp-form label, .dp-form .row > label { margin: 0; font-size: 13px; font-weight: 750; color: #334155; }
.dp-form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.dp-form input:not([type="checkbox"]):not([type="radio"]), .dp-form select, .dp-form textarea,
.dp-ui .dp-control {
  width: 100%; min-width: 0; min-height: var(--dp-control-h); padding: 0 13px;
  border: 1px solid rgba(15, 23, 42, .14); border-radius: var(--dp-radius-md); background: #fff; color: var(--dp-ink);
  font: 500 13.5px/1.35 var(--dp-font-family); transition: border-color .15s ease, box-shadow .15s ease;
}
.dp-form textarea { min-height: 104px; padding-top: 11px; padding-bottom: 11px; resize: vertical; }
.dp-form input:focus, .dp-form select:focus, .dp-form textarea:focus, .dp-ui .dp-control:focus { outline: 0; border-color: rgba(37, 99, 235, .72); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.dp-ui input:not([type="checkbox"]):not([type="radio"]), .dp-ui select, .dp-ui textarea,
.dp-ui .inp, .dp-ui .select, .dp-ui .ctrl {
  min-height: var(--dp-control-h) !important;
  height: var(--dp-control-h) !important;
  min-width: 0;
  border-radius: var(--dp-radius-md) !important;
  font-size: 13.5px !important;
}
.dp-ui textarea { height: auto !important; min-height: 104px !important; }
.dp-field--required > label::after, .dp-form label.is-required::after { content: " *"; color: var(--dp-blue); }

/* Buttons and safe aliases for existing screens. */
.dp-btn, .dp-ui .btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border: 1px solid transparent; border-radius: 13px; font: 750 12.5px/1 var(--dp-font-family); cursor: pointer; transition: filter .15s ease, transform .1s ease; }
.dp-btn:active, .dp-ui .btn:active { transform: translateY(1px); }
.dp-btn--primary, .dp-ui .btn.primary, .dp-ui .btn.blue { color: #fff; background: var(--dp-gradient); }
.dp-btn--success, .dp-ui .btn.green { color: #fff; background: linear-gradient(135deg, #16a34a, #22c55e); }
.dp-btn--danger, .dp-ui .btn.red { color: #fff; background: linear-gradient(135deg, #ef4444, #b91c1c); }
.dp-btn--warning, .dp-ui .btn.amber { color: #422006; background: #fbbf24; }
.dp-btn--secondary, .dp-ui .btn.neutral { color: #334155; border-color: var(--dp-line); background: #f1f5f9; }
.dp-btn--ghost, .dp-ui .btn.ghost { color: var(--dp-ink); border-color: var(--dp-line); background: transparent; }
.dp-btn--sm, .dp-ui .btn.small { min-height: 35px; padding-inline: 10px; font-size: 12px; }
.dp-btn--lg, .dp-ui .btn.lg { min-height: 45px; }
.dp-btn--pill { border-radius: 999px; }

/* Toolbars, tables and generic modal primitives */
.dp-toolbar, .dp-ui .toolbar, .dp-ui .report-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--dp-line); border-radius: 18px; background: rgba(255, 255, 255, .72); }
.dp-table, .dp-ui table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.dp-table th, .dp-ui table th { padding: 9px 11px; color: #475569; font-size: 12px; font-weight: 800; text-align: left; background: #eef5ff; }
.dp-table td, .dp-ui table td { padding: 8px 11px; border-bottom: 1px solid rgba(15, 23, 42, .08); }
.dp-modal, .dp-ui .modal { max-height: calc(100vh - 40px); }
.dp-modal__header, .dp-ui .modal__header { min-height: 58px; padding: 12px 18px; }
.dp-modal__body, .dp-ui .modal__body { max-height: calc(100vh - 150px); padding: 16px 18px; overflow: auto; }
.dp-modal__footer { padding: 12px 16px; }

@media (max-width: 900px) {
  .dp-page { width: min(100% - 24px, var(--dp-page-max)); margin-top: 12px; }
  .dp-form .row { grid-template-columns: 1fr; gap: 5px; }
  .dp-form-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dp-page { width: calc(100% - 16px); margin-bottom: 24px; }
  .dp-frame { padding: 10px; border-radius: 20px; }
  .dp-panel, .dp-ui .tabpanel.is-visible, .dp-ui .panel-outer { padding: 14px; border-radius: 17px; }
  .dp-card, .dp-ui .card { padding: 16px; }
  .dp-page-hero, .dp-ui .dp-hero, .dapros-hero { min-height: 92px; padding: 13px 15px; }
  .dp-page-hero__title, .dp-ui .dp-hero-title { font-size: 28px; }
  .dp-form input:not([type="checkbox"]):not([type="radio"]), .dp-form select, .dp-form textarea { min-height: 40px; }
  .dp-toolbar, .dp-ui .toolbar { align-items: stretch; }
}

/* The screen system never changes physical print components. */
@media print {
  .dp-page, .dp-frame { width: auto; margin: 0; box-shadow: none; }
  .dp-ui .dp-page-hero, .dp-ui .dp-tabs, .dp-ui .tabs { break-inside: avoid; }
}

/*
   Legacy module migration
   These selectors are temporary compatibility bridges for existing Razor markup.
   They establish the same measurements before modules are gradually renamed to
   the canonical dp-* classes. They do not touch state, IDs or event hooks.
*/
.dp-ui#personnel .wrap,
.dp-ui#randevu-page .wrap,
.dp-ui#yoklama-page .y-new-wrap,
.dp-ui#yonetici-page .wrap,
.dp-ui#dk-page,
.dp-ui#fin .wrap,
.dp-ui.servis-page .dapros-frame,
.dp-ui#ap-wrap .ap-shell {
  width: min(var(--dp-page-max), calc(100% - 36px)) !important;
  max-width: var(--dp-page-max) !important;
  margin: 18px auto 48px !important;
  padding: var(--dp-space-4) !important;
  border-radius: var(--dp-radius-xl) !important;
}

.dp-ui#personnel .personnel-head,
.dp-ui#randevu-page .randevu-head,
.dp-ui#yoklama-page .hero,
.dp-ui#dk-page .dk-hero,
.dp-ui#dk-page .dk-hero-inner,
.dp-ui#fin .fin-hero,
.dp-ui#yonetici-page .ribbon-inner,
.dp-ui.servis-page .dapros-hero {
  min-height: 104px !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 14px !important;
  padding: 16px 22px !important;
  border-radius: 21px !important;
}

/* Welcome keeps its dashboard grid, while sharing the same compact hero metrics. */
.dp-ui.wk-page .wk-hero {
  min-height: 104px !important;
  padding: 16px 22px !important;
  border-radius: 21px !important;
}
.dp-ui.wk-page .wk-hero h1 { font-size: var(--dp-title-size) !important; line-height: 1 !important; }
.dp-ui.wk-page .wk-hero__icon { width: 52px !important; height: 52px !important; border-radius: 16px !important; }

.dp-ui#personnel .personnel-main-icon,
.dp-ui#randevu-page .randevu-main-icon,
.dp-ui#yoklama-page .hero-icon,
.dp-ui#dk-page .dk-hero-badge,
.dp-ui#yonetici-page .ribbon-label::before,
.dp-ui#fin .fin-hero-icon {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 16px !important;
}

.dp-ui#personnel .personnel-title h1,
.dp-ui#randevu-page .randevu-title h1,
.dp-ui#yoklama-page .hero h1,
.dp-ui#dk-page .dk-hero-title,
.dp-ui#yonetici-page .ribbon-label,
.dp-ui#fin .fin-hero h1 {
  font-size: var(--dp-title-size) !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}

.dp-ui#personnel .tabs,
.dp-ui#personnel #p-tabs,
.dp-ui#randevu-page .tabs,
.dp-ui#yoklama-page .top-tabs,
.dp-ui#dk-page .dk-topnav,
.dp-ui#fin .tabs,
.dp-ui#yonetici-page .tabs,
.dp-ui.servis-page .inner-tabs,
.dp-ui#ap-wrap .ap-tabs {
  margin: 12px 0 !important;
  padding: 4px !important;
  gap: 4px !important;
  min-height: 0 !important;
  height: auto !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  border-radius: 14px !important;
}

.dp-ui#personnel .tabs .tab,
.dp-ui#personnel #p-tabs .tab,
.dp-ui#randevu-page .tabs .tab,
.dp-ui#yoklama-page .top-tab,
.dp-ui#dk-page .dk-topnav .dk-pill,
.dp-ui#fin .tabs .tab,
.dp-ui#yonetici-page .tabs .tab,
.dp-ui.servis-page .inner-tabs .tab,
.dp-ui#ap-wrap .ap-tabs > * {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

.dp-ui#personnel .panel-outer,
.dp-ui#randevu-page .panel-outer,
.dp-ui#yoklama-page .pagepanel,
.dp-ui#dk-page .dk-body,
.dp-ui#fin .panel-outer,
.dp-ui#yonetici-page .panel-outer,
.dp-ui.servis-page .tabpanel,
.dp-ui#ap-wrap .ap-panel,
.dp-ui#ap-wrap .ap-card {
  padding: var(--dp-panel-padding) !important;
  border-radius: 21px !important;
}

.dp-ui#personnel .field input,
.dp-ui#personnel .field select,
.dp-ui#personnel .field textarea,
.dp-ui#randevu-page input:not([type="checkbox"]):not([type="radio"]),
.dp-ui#randevu-page select,
.dp-ui#randevu-page textarea,
.dp-ui#yoklama-page input:not([type="checkbox"]):not([type="radio"]),
.dp-ui#yoklama-page select,
.dp-ui#dk-page .ctrl,
.dp-ui.servis-page .inp,
.dp-ui#fin input:not([type="checkbox"]):not([type="radio"]),
.dp-ui#fin select,
.dp-ui#fin textarea,
.dp-ui#yonetici-page .inp,
.dp-ui#yonetici-page .select,
.dp-ui#yonetici-page textarea,
.dp-ui#ap-wrap input:not([type="checkbox"]):not([type="radio"]),
.dp-ui#ap-wrap select,
.dp-ui#ap-wrap textarea {
  min-height: var(--dp-control-h) !important;
  height: var(--dp-control-h) !important;
  border-radius: var(--dp-radius-md) !important;
  font-size: 13.5px !important;
}

.dp-ui#randevu-page textarea,
.dp-ui#yoklama-page textarea,
.dp-ui#dk-page textarea,
.dp-ui#fin textarea,
.dp-ui#yonetici-page textarea { height: auto !important; min-height: 104px !important; }

.dp-ui#personnel .btn,
.dp-ui#randevu-page .btn,
.dp-ui#yoklama-page .btn,
.dp-ui#dk-page .btn,
.dp-ui.servis-page .btn,
.dp-ui#fin .btn,
.dp-ui#yonetici-page .btn,
.dp-ui.servis-page .btn,
.dp-ui#ap-wrap .btn { min-height: 40px !important; border-radius: 13px !important; font-size: 12.5px !important; }

@media (max-width: 900px) {
  .dp-ui#personnel .wrap, .dp-ui#randevu-page .wrap, .dp-ui#yoklama-page .y-new-wrap,
  .dp-ui#yonetici-page .wrap, .dp-ui#dk-page, .dp-ui#fin .wrap,
  .dp-ui.servis-page .dapros-frame, .dp-ui#ap-wrap .ap-shell {
    width: calc(100% - 24px) !important;
    margin: 12px auto 24px !important;
    padding: 12px !important;
    border-radius: 20px !important;
  }
  .dp-ui#personnel .personnel-head, .dp-ui#randevu-page .randevu-head,
  .dp-ui#yoklama-page .hero, .dp-ui#dk-page .dk-hero, .dp-ui#dk-page .dk-hero-inner,
  .dp-ui#fin .fin-hero, .dp-ui#yonetici-page .ribbon-inner,
  .dp-ui.servis-page .dapros-hero {
    min-height: 92px !important;
    padding: 13px 15px !important;
  }
}

/* Head-loaded precedence for pages whose legacy module CSS is emitted in body. */
.dp-ui#yonetici-page {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow-x: hidden !important;
}

.dp-ui.wk-page {
  width: min(var(--dp-page-max), calc(100% - 36px)) !important;
  max-width: var(--dp-page-max) !important;
  margin: 18px auto 48px !important;
}

#fin.dp-ui .dp-page .tabs,
#fin.dp-ui .dp-page .panel-outer,
#fin.dp-ui .dp-page input:not([type="checkbox"]):not([type="radio"]),
#fin.dp-ui .dp-page select,
#fin.dp-ui .dp-page textarea,
#fin.dp-ui .dp-page .inp,
#fin.dp-ui .dp-page .select {
  border-radius: var(--dp-radius-md) !important;
}

#fin.dp-ui .dp-page input:not([type="checkbox"]):not([type="radio"]),
#fin.dp-ui .dp-page select,
#fin.dp-ui .dp-page .inp,
#fin.dp-ui .dp-page .select {
  min-height: var(--dp-control-h) !important;
  height: var(--dp-control-h) !important;
}

#fin.dp-ui .dp-page textarea { height: auto !important; min-height: 104px !important; }

/* Canonical classes are authoritative even when a legacy body <style> follows. */
.dp-ui.dp-page .dp-page-hero,
.dp-ui.dp-page .dp-hero {
  min-height: 104px !important;
  padding: 16px 22px !important;
  border-radius: 21px !important;
}

.dp-ui.dp-page .dp-tabs,
.dp-ui.dp-page > .tabs,
.dp-ui.dp-page .tabs {
  min-height: 0 !important;
  height: auto !important;
  padding: 4px !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border-radius: 14px !important;
}

.dp-ui.dp-page .dp-tab,
.dp-ui.dp-page .tabs > .tab,
.dp-ui.dp-page .tabs > button,
.dp-ui.dp-page .tabs > a {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
}

/* --------------------------------------------------------------------------
   DAPROS MODULE RAIL
   The former horizontal module hero is a navigation landmark, not page
   content.  It therefore lives beside the module content in normal flow.
   Page files only provide .dp-module-layout/.dp-module-rail/.dp-module-content;
   all geometry and responsive behavior remain centralized here.
---------------------------------------------------------------------------- */
:root {
  --dp-module-rail-w: 76px;
  --dp-module-rail-gap: 14px;
  --dp-module-rail-radius: 20px;
  --dp-module-rail-icon: 46px;
  --dp-module-top-gap: 8px;
}

.dp-ui.dp-page,
.dp-ui.dapros-page {
  margin-top: var(--dp-module-top-gap) !important;
}

.dp-ui .dp-module-layout {
  display: grid !important;
  grid-template-columns: var(--dp-module-rail-w) minmax(0, 1fr) !important;
  gap: var(--dp-module-rail-gap) !important;
  align-items: stretch !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.dp-ui .dp-module-layout > .dp-module-rail {
  grid-column: 1 !important;
  grid-row: 1 / -1 !important;
  width: var(--dp-module-rail-w) !important;
  min-width: var(--dp-module-rail-w) !important;
  min-height: 320px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 12px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  position: relative !important;
  overflow: hidden !important;
  color: #fff !important;
  background: var(--dp-gradient) !important;
  border: 0 !important;
  border-radius: var(--dp-module-rail-radius) !important;
  box-shadow: 0 16px 34px rgba(37, 99, 235, .24) !important;
}

.dp-ui .dp-module-layout > .dp-module-content {
  grid-column: 2 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  overflow-x: auto !important;
}

.dp-ui .dp-module-layout > :not(.dp-module-rail):not(.dp-module-content) {
  grid-column: 2 !important;
  min-width: 0 !important;
}

.dp-ui .dp-module-layout > .dp-module-legacy-side {
  display: none !important;
}

html body .dp-ui#personnel .dp-module-layout,
html body .dp-ui#randevu-page .dp-module-layout,
html body .dp-ui#yoklama-page .dp-module-layout,
html body .dp-ui#dk-page .dp-module-layout,
html body .dp-ui#fin .dp-module-layout,
html body .dp-ui#yonetici-page .dp-module-layout,
html body .dp-ui#counsel-page .dp-module-layout,
html body .dp-ui#schedule .dp-module-layout,
html body .dp-ui#email-page .dp-module-layout,
html body .dp-ui#olcme .dp-module-layout,
html body .dp-ui#reh .dp-module-layout,
html body .dp-ui#revir .dp-module-layout,
html body .dp-ui#sinif-page .dp-module-layout,
html body .dp-ui#social-page .dp-module-layout {
  display: grid !important;
  grid-template-columns: var(--dp-module-rail-w) minmax(0, 1fr) !important;
  gap: var(--dp-module-rail-gap) !important;
  align-items: stretch !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: var(--dp-space-4) !important;
  border-radius: var(--dp-radius-xl) !important;
}

.dp-ui .dp-module-rail::before {
  content: "" !important;
  position: absolute !important;
  inset: -36px -54px auto auto !important;
  width: 130px !important;
  height: 130px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.18) !important;
  pointer-events: none !important;
}

/* Normalize every legacy hero geometry when it is used as the rail. */
.dp-ui .dp-module-rail.dp-page-hero,
.dp-ui .dp-module-rail.dp-hero,
.dp-ui .dp-module-rail.personnel-head,
.dp-ui .dp-module-rail.randevu-head,
.dp-ui .dp-module-rail.hero,
.dp-ui .dp-module-rail.dapros-hero,
.dp-ui .dp-module-rail.dk-hero,
.dp-ui .dp-module-rail.fin-hero,
.dp-ui .dp-module-rail.ribbon-inner,
.dp-ui .dp-module-rail.mail-hero,
.dp-ui .dp-module-rail.olcme-hero,
.dp-ui .dp-module-rail.revir-head,
.dp-ui .dp-module-rail.sinif-hero {
  min-height: 320px !important;
  height: auto !important;
  padding: 12px 8px !important;
  background: var(--dp-gradient) !important;
  border-radius: var(--dp-module-rail-radius) !important;
  box-shadow: 0 16px 34px rgba(37, 99, 235, .24) !important;
}

.dp-ui .dp-module-rail > * {
  position: relative !important;
  z-index: 1 !important;
}

.dp-ui .dp-module-rail > .ribbon,
.dp-ui .dp-module-rail > .RibbonHost,
.dp-ui .dp-module-rail .ribbon-inner {
  display: contents !important;
}

.dp-ui .dp-module-rail .dp-hero-icon,
.dp-ui .dp-module-rail .hero-icon,
.dp-ui .dp-module-rail .personnel-main-icon,
.dp-ui .dp-module-rail .randevu-main-icon,
.dp-ui .dp-module-rail .mail-hero-icon,
.dp-ui .dp-module-rail .fin-hero-icon,
.dp-ui .dp-module-rail .olcme-hero-icon,
.dp-ui .dp-module-rail .revir-main-icon,
.dp-ui .dp-module-rail .sinif-hero-icon,
.dp-ui .dp-module-rail .hero-left > .hero-icon {
  flex: 0 0 var(--dp-module-rail-icon) !important;
  width: var(--dp-module-rail-icon) !important;
  height: var(--dp-module-rail-icon) !important;
  min-width: var(--dp-module-rail-icon) !important;
  min-height: var(--dp-module-rail-icon) !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35) !important;
}

.dp-ui .dp-module-rail .dp-hero-icon svg,
.dp-ui .dp-module-rail .hero-icon svg,
.dp-ui .dp-module-rail .personnel-main-icon svg,
.dp-ui .dp-module-rail .randevu-main-icon svg,
.dp-ui .dp-module-rail .mail-hero-icon svg,
.dp-ui .dp-module-rail .fin-hero-icon svg,
.dp-ui .dp-module-rail .olcme-hero-icon svg,
.dp-ui .dp-module-rail .revir-main-icon svg,
.dp-ui .dp-module-rail .sinif-hero-icon svg {
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
}

.dp-ui .dp-module-rail .dp-hero-text,
.dp-ui .dp-module-rail .personnel-titlebox,
.dp-ui .dp-module-rail .personnel-title,
.dp-ui .dp-module-rail .randevu-titlebox,
.dp-ui .dp-module-rail .randevu-title,
.dp-ui .dp-module-rail .hero-text,
.dp-ui .dp-module-rail .hero-left > div:not(.hero-icon),
.dp-ui .dp-module-rail .fin-hero-text,
.dp-ui .dp-module-rail .mail-hero-text,
.dp-ui .dp-module-rail .olcme-hero-text,
.dp-ui .dp-module-rail .revir-titlebox,
.dp-ui .dp-module-rail .revir-title,
.dp-ui .dp-module-rail .sinif-hero-text,
.dp-ui .dp-module-rail .dk-hero-inner > div:not(.dk-hero-badge) {
  display: contents !important;
}

.dp-ui .dp-module-rail > div:not(.dp-hero-icon):not(.hero-icon):not(.personnel-titlebox):not(.randevu-titlebox):not(.fin-hero-text):not(.mail-hero-text):not(.olcme-hero-text):not(.revir-titlebox):not(.sinif-hero-text):not(.dk-hero-inner):not(.hero-left):not(.hero-badges),
.dp-ui .dp-module-rail .dp-hero > div:not(.dp-hero-icon) {
  display: contents !important;
}

.dp-ui .dp-module-rail h1,
.dp-ui .dp-module-rail .dp-hero-title,
.dp-ui .dp-module-rail .ribbon-label,
.dp-ui .dp-module-rail .dk-hero-title,
.dp-ui .dp-module-rail .personnel-title h1,
.dp-ui .dp-module-rail .randevu-title h1,
.dp-ui .dp-module-rail .hero-text h1,
.dp-ui .dp-module-rail .mail-title,
.dp-ui .dp-module-rail .fin-hero-text h1,
.dp-ui .dp-module-rail .olcme-hero-text h1,
.dp-ui .dp-module-rail .revir-title h1,
.dp-ui .dp-module-rail .sinif-hero-text h1 {
  display: block !important;
  width: max-content !important;
  max-width: 250px !important;
  margin: 8px 0 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 16px !important;
  line-height: 1.15 !important;
  letter-spacing: .02em !important;
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  transform: rotate(180deg) !important;
  white-space: normal !important;
  text-align: left !important;
}

.dp-ui .dp-module-rail p,
.dp-ui .dp-module-rail .dp-hero-subtitle,
.dp-ui .dp-module-rail .hero-sub,
.dp-ui .dp-module-rail .dk-hero-sub,
.dp-ui .dp-module-rail .hero-kicker,
.dp-ui .dp-module-rail .fin-kicker,
.dp-ui .dp-module-rail .fin-hero-badge,
.dp-ui .dp-module-rail .hero-badges,
.dp-ui .dp-module-rail .dk-hero-badge,
.dp-ui .dp-module-rail::after {
  display: none !important;
}

.dp-ui .dp-module-rail .hero-left,
.dp-ui .dp-module-rail .dk-hero-inner {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}

.dp-ui .dp-module-rail::marker { display: none !important; }

/* Legacy decorative pseudo-elements must not recreate the old horizontal
   hero once the same element has become a rail. */
.dp-ui .dp-module-rail .ribbon-inner::before,
.dp-ui .dp-module-rail .ribbon-inner::after,
.dp-ui .dp-module-rail .dk-hero-inner::before,
.dp-ui .dp-module-rail .dk-hero-inner::after,
.dp-ui .dp-module-rail::after { display: none !important; }

#personnel.dp-ui .dp-module-rail::before,
#personnel.dp-ui .dp-module-rail::after,
#randevu-page.dp-ui .dp-module-rail::before,
#randevu-page.dp-ui .dp-module-rail::after,
#yoklama-page.dp-ui .dp-module-rail::before,
#yoklama-page.dp-ui .dp-module-rail::after,
#dk-page.dp-ui .dp-module-rail::before,
#dk-page.dp-ui .dp-module-rail::after,
#fin.dp-ui .dp-module-rail::before,
#fin.dp-ui .dp-module-rail::after,
#revir.dp-ui .dp-module-rail::before,
#revir.dp-ui .dp-module-rail::after,
#sinif-page.dp-ui .dp-module-rail::before,
#sinif-page.dp-ui .dp-module-rail::after,
#email-page.dp-ui .dp-module-rail::before,
#email-page.dp-ui .dp-module-rail::after,
#olcme.dp-ui .dp-module-rail::before,
#olcme.dp-ui .dp-module-rail::after { display: none !important; }

/* Page styles are emitted after the layout head by several legacy Razor
   modules.  Keep the rail contract authoritative against their ID-scoped
   !important hero rules as well. */
html body .dp-ui#personnel .dp-module-layout > .dp-module-rail,
html body .dp-ui#randevu-page .dp-module-layout > .dp-module-rail,
html body .dp-ui#yoklama-page .dp-module-layout > .dp-module-rail,
html body .dp-ui#dk-page .dp-module-layout > .dp-module-rail,
html body .dp-ui#fin .dp-module-layout > .dp-module-rail,
html body .dp-ui#yonetici-page .dp-module-layout > .dp-module-rail,
html body .dp-ui#counsel-page .dp-module-layout > .dp-module-rail,
html body .dp-ui#schedule .dp-module-layout > .dp-module-rail,
html body .dp-ui#email-page .dp-module-layout > .dp-module-rail,
html body .dp-ui#olcme .dp-module-layout > .dp-module-rail,
html body .dp-ui#reh .dp-module-layout > .dp-module-rail,
html body .dp-ui#revir .dp-module-layout > .dp-module-rail,
html body .dp-ui#sinif-page .dp-module-layout > .dp-module-rail,
html body .dp-ui#social-page .dp-module-layout > .dp-module-rail {
  width: var(--dp-module-rail-w) !important;
  max-width: var(--dp-module-rail-w) !important;
  min-width: var(--dp-module-rail-w) !important;
  min-height: 320px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 12px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  border-radius: var(--dp-module-rail-radius) !important;
  background: var(--dp-gradient) !important;
  box-shadow: 0 16px 34px rgba(37,99,235,.24) !important;
}

html body .dp-ui#personnel .dp-module-rail > *,
html body .dp-ui#randevu-page .dp-module-rail > *,
html body .dp-ui#yoklama-page .dp-module-rail > *,
html body .dp-ui#dk-page .dp-module-rail > *,
html body .dp-ui#fin .dp-module-rail > *,
html body .dp-ui#yonetici-page .dp-module-rail > *,
html body .dp-ui#counsel-page .dp-module-rail > *,
html body .dp-ui#schedule .dp-module-rail > *,
html body .dp-ui#email-page .dp-module-rail > *,
html body .dp-ui#olcme .dp-module-rail > *,
html body .dp-ui#reh .dp-module-rail > *,
html body .dp-ui#revir .dp-module-rail > *,
html body .dp-ui#sinif-page .dp-module-rail > *,
html body .dp-ui#social-page .dp-module-rail > *,
html body .dp-ui#yonetici-page .dp-module-rail .ribbon-inner,
html body .dp-ui#counsel-page .dp-module-rail .ribbon-inner {
  display: contents !important;
}

html body .dp-ui#personnel .dp-module-rail h1,
html body .dp-ui#randevu-page .dp-module-rail h1,
html body .dp-ui#yoklama-page .dp-module-rail h1,
html body .dp-ui#dk-page .dp-module-rail h1,
html body .dp-ui#fin .dp-module-rail h1,
html body .dp-ui#yonetici-page .dp-module-rail h1,
html body .dp-ui#counsel-page .dp-module-rail h1,
html body .dp-ui#schedule .dp-module-rail h1,
html body .dp-ui#email-page .dp-module-rail h1,
html body .dp-ui#olcme .dp-module-rail h1,
html body .dp-ui#reh .dp-module-rail h1,
html body .dp-ui#revir .dp-module-rail h1,
html body .dp-ui#sinif-page .dp-module-rail h1,
html body .dp-ui#social-page .dp-module-rail h1,
html body .dp-ui#yonetici-page .dp-module-rail .ribbon-label,
html body .dp-ui#counsel-page .dp-module-rail .ribbon-label {
  width: max-content !important;
  max-width: 250px !important;
  margin: 8px 0 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 16px !important;
  line-height: 1.15 !important;
  writing-mode: vertical-rl !important;
  transform: rotate(180deg) !important;
  white-space: normal !important;
}

html body .dp-ui#personnel .dp-module-rail p,
html body .dp-ui#randevu-page .dp-module-rail p,
html body .dp-ui#yoklama-page .dp-module-rail p,
html body .dp-ui#dk-page .dp-module-rail p,
html body .dp-ui#fin .dp-module-rail p,
html body .dp-ui#yonetici-page .dp-module-rail p,
html body .dp-ui#counsel-page .dp-module-rail p,
html body .dp-ui#schedule .dp-module-rail p,
html body .dp-ui#email-page .dp-module-rail p,
html body .dp-ui#olcme .dp-module-rail p,
html body .dp-ui#reh .dp-module-rail p,
html body .dp-ui#revir .dp-module-rail p,
html body .dp-ui#sinif-page .dp-module-rail p,
html body .dp-ui#social-page .dp-module-rail p,
html body .dp-ui#personnel .dp-module-rail [class*="badge"],
html body .dp-ui#randevu-page .dp-module-rail [class*="badge"],
html body .dp-ui#yoklama-page .dp-module-rail [class*="badge"],
html body .dp-ui#dk-page .dp-module-rail [class*="badge"],
html body .dp-ui#fin .dp-module-rail [class*="badge"],
html body .dp-ui#yonetici-page .dp-module-rail [class*="badge"],
html body .dp-ui#counsel-page .dp-module-rail [class*="badge"],
html body .dp-ui#schedule .dp-module-rail [class*="badge"],
html body .dp-ui#email-page .dp-module-rail [class*="badge"],
html body .dp-ui#olcme .dp-module-rail [class*="badge"],
html body .dp-ui#reh .dp-module-rail [class*="badge"],
html body .dp-ui#revir .dp-module-rail [class*="badge"],
html body .dp-ui#sinif-page .dp-module-rail [class*="badge"],
html body .dp-ui#social-page .dp-module-rail [class*="badge"] {
  display: none !important;
}

/* Restore the icon tile after the legacy-wrapper flattening above. */
html body .dp-ui#personnel .dp-module-rail .personnel-main-icon,
html body .dp-ui#randevu-page .dp-module-rail .randevu-main-icon,
html body .dp-ui#yoklama-page .dp-module-rail .hero-icon,
html body .dp-ui#dk-page .dp-module-rail .dk-hero-badge,
html body .dp-ui#fin .dp-module-rail .fin-hero-icon,
html body .dp-ui#email-page .dp-module-rail .mail-hero-icon,
html body .dp-ui#olcme .dp-module-rail .olcme-hero-icon,
html body .dp-ui#revir .dp-module-rail .revir-main-icon,
html body .dp-ui#sinif-page .dp-module-rail .sinif-hero-icon,
html body .dp-ui#social-page .dp-module-rail .social-main-icon,
html body .dp-ui#schedule .dp-module-rail .dp-hero-icon {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 var(--dp-module-rail-icon) !important;
  width: var(--dp-module-rail-icon) !important;
  height: var(--dp-module-rail-icon) !important;
  min-width: var(--dp-module-rail-icon) !important;
  min-height: var(--dp-module-rail-icon) !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35) !important;
}

html body .dp-ui#dk-page .dp-module-rail .dk-hero-badge {
  color: #fff !important;
  font-size: 0 !important;
}

html body .dp-ui#personnel .dp-module-rail .hero-badges,
html body .dp-ui#randevu-page .dp-module-rail .hero-badges,
html body .dp-ui#yoklama-page .dp-module-rail .hero-badges,
html body .dp-ui#dk-page .dp-module-rail .hero-badges,
html body .dp-ui#fin .dp-module-rail .hero-badges,
html body .dp-ui#servis-page .dp-module-rail .hero-badges,
html body .dp-ui#email-page .dp-module-rail .hero-badges,
html body .dp-ui#olcme .dp-module-rail .hero-badges,
html body .dp-ui#revir .dp-module-rail .hero-badges,
html body .dp-ui#sinif-page .dp-module-rail .hero-badges { display: none !important; }

@media (max-width: 900px) {
  .dp-ui .dp-module-layout {
    grid-template-columns: 66px minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  .dp-ui .dp-module-layout > .dp-module-rail {
    width: 66px !important;
    min-width: 66px !important;
    min-height: 260px !important;
  }
  .dp-ui .dp-module-rail.dp-page-hero,
  .dp-ui .dp-module-rail.dp-hero,
  .dp-ui .dp-module-rail.hero,
  .dp-ui .dp-module-rail.dapros-hero,
  .dp-ui .dp-module-rail.dk-hero,
  .dp-ui .dp-module-rail.fin-hero,
  .dp-ui .dp-module-rail.ribbon-inner,
  .dp-ui .dp-module-rail.mail-hero,
  .dp-ui .dp-module-rail.olcme-hero,
  .dp-ui .dp-module-rail.revir-head,
  .dp-ui .dp-module-rail.sinif-hero { min-height: 260px !important; }
}

@media (max-width: 760px) {
  .dp-ui .dp-module-layout {
    display: block !important;
  }
  .dp-ui .dp-module-layout > .dp-module-rail {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    height: 58px !important;
    padding: 8px 12px !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    border-radius: 16px !important;
  }
  .dp-ui .dp-module-rail.dp-page-hero,
  .dp-ui .dp-module-rail.dp-hero,
  .dp-ui .dp-module-rail.hero,
  .dp-ui .dp-module-rail.dapros-hero,
  .dp-ui .dp-module-rail.dk-hero,
  .dp-ui .dp-module-rail.fin-hero,
  .dp-ui .dp-module-rail.ribbon-inner,
  .dp-ui .dp-module-rail.mail-hero,
  .dp-ui .dp-module-rail.olcme-hero,
  .dp-ui .dp-module-rail.revir-head,
  .dp-ui .dp-module-rail.sinif-hero { min-height: 58px !important; height: 58px !important; }
  .dp-ui .dp-module-rail .dp-hero-icon,
  .dp-ui .dp-module-rail .hero-icon,
  .dp-ui .dp-module-rail .personnel-main-icon,
  .dp-ui .dp-module-rail .randevu-main-icon,
  .dp-ui .dp-module-rail .mail-hero-icon,
  .dp-ui .dp-module-rail .fin-hero-icon,
  .dp-ui .dp-module-rail .olcme-hero-icon,
  .dp-ui .dp-module-rail .revir-main-icon,
  .dp-ui .dp-module-rail .sinif-hero-icon { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; flex-basis: 40px !important; }
  .dp-ui .dp-module-rail h1,
  .dp-ui .dp-module-rail .dp-hero-title,
  .dp-ui .dp-module-rail .ribbon-label,
  .dp-ui .dp-module-rail .dk-hero-title,
  .dp-ui .dp-module-rail .personnel-title h1,
  .dp-ui .dp-module-rail .randevu-title h1,
  .dp-ui .dp-module-rail .hero-text h1,
  .dp-ui .dp-module-rail .mail-title,
  .dp-ui .dp-module-rail .fin-hero-text h1,
  .dp-ui .dp-module-rail .olcme-hero-text h1,
  .dp-ui .dp-module-rail .revir-title h1,
  .dp-ui .dp-module-rail .sinif-hero-text h1 { max-width: none !important; margin: 0 !important; font-size: 18px !important; writing-mode: horizontal-tb !important; transform: none !important; white-space: nowrap !important; }
  .dp-ui .dp-module-layout > .dp-module-content { margin-top: 10px !important; }
}

@media (max-width: 760px) {
  html body .dp-ui#personnel .dp-module-layout > .dp-module-rail,
  html body .dp-ui#randevu-page .dp-module-layout > .dp-module-rail,
  html body .dp-ui#yoklama-page .dp-module-layout > .dp-module-rail,
  html body .dp-ui#dk-page .dp-module-layout > .dp-module-rail,
  html body .dp-ui#fin .dp-module-layout > .dp-module-rail,
  html body .dp-ui#yonetici-page .dp-module-layout > .dp-module-rail,
  html body .dp-ui#counsel-page .dp-module-layout > .dp-module-rail,
  html body .dp-ui#schedule .dp-module-layout > .dp-module-rail,
  html body .dp-ui#email-page .dp-module-layout > .dp-module-rail,
  html body .dp-ui#olcme .dp-module-layout > .dp-module-rail,
  html body .dp-ui#reh .dp-module-layout > .dp-module-rail,
  html body .dp-ui#revir .dp-module-layout > .dp-module-rail,
  html body .dp-ui#sinif-page .dp-module-layout > .dp-module-rail,
  html body .dp-ui#social-page .dp-module-layout > .dp-module-rail {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 58px !important;
    height: 58px !important;
    padding: 8px 12px !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    border-radius: 16px !important;
  }

  html body .dp-ui#personnel .dp-module-rail h1,
  html body .dp-ui#randevu-page .dp-module-rail h1,
  html body .dp-ui#yoklama-page .dp-module-rail h1,
  html body .dp-ui#dk-page .dp-module-rail h1,
  html body .dp-ui#fin .dp-module-rail h1,
  html body .dp-ui#yonetici-page .dp-module-rail h1,
  html body .dp-ui#counsel-page .dp-module-rail h1,
  html body .dp-ui#schedule .dp-module-rail h1,
  html body .dp-ui#email-page .dp-module-rail h1,
  html body .dp-ui#olcme .dp-module-rail h1,
  html body .dp-ui#reh .dp-module-rail h1,
  html body .dp-ui#revir .dp-module-rail h1,
  html body .dp-ui#sinif-page .dp-module-rail h1,
  html body .dp-ui#social-page .dp-module-rail h1,
  html body .dp-ui#yonetici-page .dp-module-rail .ribbon-label,
  html body .dp-ui#counsel-page .dp-module-rail .ribbon-label {
    max-width: none !important;
    margin: 0 !important;
    font-size: 18px !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
    white-space: nowrap !important;
  }

  html body .dp-ui#personnel .dp-module-rail .personnel-main-icon,
  html body .dp-ui#randevu-page .dp-module-rail .randevu-main-icon,
  html body .dp-ui#yoklama-page .dp-module-rail .hero-icon,
  html body .dp-ui#dk-page .dp-module-rail .dk-hero-badge,
  html body .dp-ui#fin .dp-module-rail .fin-hero-icon,
  html body .dp-ui#email-page .dp-module-rail .mail-hero-icon,
  html body .dp-ui#olcme .dp-module-rail .olcme-hero-icon,
  html body .dp-ui#revir .dp-module-rail .revir-main-icon,
  html body .dp-ui#sinif-page .dp-module-rail .sinif-hero-icon,
  html body .dp-ui#social-page .dp-module-rail .social-main-icon,
  html body .dp-ui#schedule .dp-module-rail .dp-hero-icon {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
}