@charset "UTF-8";
/*
 Calisto Sigorta CRM
 Koyu tema — renk paleti public/assets/scss/_variables.scss icinde.
 Derlemek icin: npm run tema
*/
/* ============
TABLES OF CSS
---------------

01. General
02. Bootstrap-custom
03. Helper
04. Waves Effect
05. Demo Only
06. Menu
07. Buttons
08. Cards
09. Email
10. Calender
11. Ecommerce
12. Project
13. Alerts
14. Pagination
15. Popover & Tooltip
16. Rangeslider
17. Sweet alert
18. Tab & Accordion
19. Form Elements
20. Form Validation
21. Form advanced
22. Form editor
23. Form summernote
24. Form upload
25. Form wizard
26. Chart
27. Tables
28. widgets
29. Maps
30. Timeline
31. Invoice
32. Pricing
33. Extra pages
34. Account pages
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap");
/* ==============
  General
===================*/
:root {
  --sayfa-zemin: #0d1117;
  --kart-yuzey: #151b23;
  --kart-yukseltilmis: #212a37;
  --kart-kenarlik: #3d444d;
  --metin: #e6edf3;
  --metin-soluk: #828b96;
}

body {
  background-repeat: repeat;
  background: #0d1117;
  font-family: "Poppins", sans-serif;
  color: #e6edf3;
  font-size: 13px;
}

@media (max-width: 991px) {
  body {
    overflow-x: hidden;
  }
}
html {
  overflow-x: hidden;
  position: relative;
  min-height: 100%;
}

h1, h2, h3, h4, h5, h6 {
  margin: 10px 0;
  font-family: "Poppins", sans-serif;
}

h6 {
  font-size: 14px;
}

p {
  line-height: 1.7;
}

svg {
  max-width: 100%;
}

* {
  outline: none !important;
}

a {
  color: #3d8cdb;
  text-decoration: none;
}
a:hover, a:active, a:focus {
  color: rgb(37.4172208014%, 62.9019607843%, 88.3867007673%);
  outline: 0;
  text-decoration: none;
}

b, strong {
  font-weight: 500;
}

.container-alt {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

#wrapper {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.slimScrollDiv {
  height: auto !important;
}

/* ==============
  Bootstrap-custom
===================*/
.dropdown-item-text {
  color: #9198a1;
}

.dropdown-divider {
  border-top: 1px solid #3d444d;
}

.dropdown-menu {
  padding: 4px 0;
  font-size: 13px;
  background-color: #151b23;
  border-width: 1px;
  border-color: #3d444d;
  border-radius: 6px;
  margin: 0;
}

.dropdown-item {
  background-color: #151b23;
  color: #9198a1;
  padding: 0.4rem 1rem;
}
.dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus {
  background-color: rgb(12.7352941176%, 16.3739495798%, 21.2254901961%) !important;
  color: #9198a1 !important;
}

.dropdown-item.active, .dropdown-item:active {
  background-color: rgb(12.7352941176%, 16.3739495798%, 21.2254901961%);
  color: #9198a1;
}

.dropdown-menu-animated {
  display: block;
  visibility: hidden;
  opacity: 0;
  transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  margin-top: 20px !important;
}

.show > .dropdown-menu {
  visibility: visible;
  opacity: 1;
  margin-top: 0px !important;
}

.breadcrumb > li + li:before {
  padding: 0 5px;
  color: #828b96;
  content: "\f105" !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.blockquote {
  padding: 10px 20px;
  margin-bottom: 20px;
  border-left: 4px solid #9198a1;
}

.blockquote-reverse {
  border-left: 0;
  border-right: 4px solid #9198a1;
  text-align: right;
}

.bg-primary {
  background-color: #3d8cdb !important;
}

.bg-success {
  background-color: #2bb673 !important;
}

.bg-info {
  background-color: #3d8cdb !important;
}

.bg-warning {
  background-color: #f0b429 !important;
}

.bg-danger {
  background-color: #e05263 !important;
}

.bg-muted {
  background-color: #828b96 !important;
}

.bg-secondary {
  background-color: #9198a1 !important;
}

.bg-white {
  background-color: #151b23 !important;
}

.bg-light,
.table-light,
.table .table-light > th,
.table .table-light > td {
  background-color: #212a37 !important;
  color: #e6edf3 !important;
}

.bg-lighten-primary {
  background-color: rgb(99.8346121057%, 99.9019607843%, 99.9693094629%);
}

.bg-lighten-success {
  background-color: rgb(82.3947712418%, 95.8405228758%, 89.3594771242%);
}

.bg-lighten-info {
  background-color: rgb(57.6606990622%, 74.9019607843%, 92.1432225064%);
}

.bg-lighten-warning {
  background-color: rgb(96.7377343951%, 83.6886719753%, 53.4583440363%);
}

.bg-lighten-danger {
  background-color: rgb(93.9215686275%, 66.0784313725%, 69.4117647059%);
}

.bg-lighten-secondary {
  background-color: white;
}

.text-white {
  color: #ffffff !important;
}

.text-danger {
  color: #e05263 !important;
}

.text-muted {
  color: #828b96 !important;
}

.text-primary {
  color: #3d8cdb !important;
}

.text-warning {
  color: #f0b429 !important;
}

.text-success {
  color: #2bb673 !important;
}

.text-info {
  color: #3d8cdb !important;
}

.text-dark {
  color: #151b23 !important;
}

.text-secondary {
  color: #9198a1 !important;
}

.border-primary {
  border-color: #3d8cdb !important;
}

.border-success {
  border-color: #2bb673 !important;
}

.border-info {
  border-color: #3d8cdb !important;
}

.border-warning {
  border-color: #f0b429 !important;
}

.border-danger {
  border-color: #e05263 !important;
}

.border-dark {
  border-color: #151b23 !important;
}

.border-secondary {
  border-color: #9198a1 !important;
}

.border-bottom {
  border-bottom: 1px solid #3d444d !important;
}

dt {
  font-weight: 500;
}

.bs-spinner .spinner-border, .bs-spinner .spinner-grow {
  margin-right: 8px;
  margin-top: 10px;
}

.custom-control-input:checked ~ .custom-control-label:before {
  border-color: #3d8cdb;
  background-color: #3d8cdb;
}

.custom-control-label::before {
  background-color: rgb(12.7352941176%, 16.3739495798%, 21.2254901961%);
  border: #3d444d solid 1px;
  border-radius: 6px;
}

/* Navs & Tabs */
.nav-tabs {
  border-bottom: 1px solid #3d444d;
}
.nav-tabs .nav-item .nav-link {
  border-radius: 6px 6px 0 0;
}
.nav-tabs .nav-item .nav-link.active, .nav-tabs .nav-item .nav-link:hover, .nav-tabs .nav-item .nav-link:focus {
  background: rgb(12.7352941176%, 16.3739495798%, 21.2254901961%);
  color: #e6edf3;
  border-color: #3d444d;
}

.nav-pills .nav-item.show .nav-link, .nav-pills .nav-link.active {
  background-color: #3d8cdb;
}

.nav-pills > .active > a > .badge {
  color: #3d8cdb;
}

/*  Accordion  */
#accordion a {
  color: #9198a1 !important;
}
#accordion .card {
  background: rgb(12.7352941176%, 16.3739495798%, 21.2254901961%);
}

.modal .modal-dialog .close {
  color: #9198a1;
}
.modal .modal-dialog .modal-content {
  background: rgb(12.7352941176%, 16.3739495798%, 21.2254901961%);
  border-width: 1px;
  border-color: #3d444d;
  border-radius: 6px;
}
.modal .modal-dialog .modal-content .modal-header, .modal .modal-dialog .modal-content .modal-footer {
  border-width: 1px;
  border-color: #3d444d;
}

.img-thumbnail {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.1);
}

.progress {
  background-color: rgb(12.7352941176%, 16.3739495798%, 21.2254901961%);
}

.badge {
  font-weight: 500;
}

.badge-primary {
  background-color: #3d8cdb;
}

.badge-success {
  background-color: #2bb673;
}

.badge-info {
  background-color: #3d8cdb;
}

.badge-warning {
  background-color: #f0b429;
  color: #ffffff;
}

.badge-danger {
  background-color: #e05263;
}

.badge-dark {
  background-color: #151b23;
}

.badge-secondary {
  background-color: #9198a1;
}

.badge-soft-primary {
  background-color: rgba(61, 140, 219, 0.2);
  color: #3d8cdb;
}

.badge-soft-success {
  background-color: rgba(43, 182, 115, 0.2);
  color: #2bb673;
}

.badge-soft-info {
  background-color: rgba(61, 140, 219, 0.2);
  color: #3d8cdb;
}

.badge-soft-warning {
  background-color: rgba(240, 180, 41, 0.2);
  color: #f0b429;
}

.badge-soft-danger {
  background-color: rgba(224, 82, 99, 0.2);
  color: #e05263;
}

.badge-soft-dark {
  background-color: rgba(21, 27, 35, 0.2);
  color: #151b23;
}

.badge-soft-secondary {
  background-color: rgba(145, 152, 161, 0.2);
  color: #9198a1;
}

/* ==============
  Progressbar
===================*/
.progress-bar {
  background-color: #3d8cdb;
}

/* ==============
  Pagination
===================*/
.pagination .page-item .page-link {
  color: #3d8cdb;
  background-color: rgb(12.7352941176%, 16.3739495798%, 21.2254901961%);
  border-width: 1px;
  border-color: #3d444d;
  border-radius: 6px;
}
.pagination .page-item.disabled .page-link {
  color: #9198a1;
  background-color: rgb(15.7352941176%, 20.231092437%, 26.2254901961%);
}
.pagination .page-item.active .page-link {
  color: #9198a1;
  background-color: #3d8cdb;
  border-color: #3d8cdb;
}

/* ==============
  Helper Classes
===================*/
.m-b-5 {
  margin-bottom: 5px;
}

.m-b-10 {
  margin-bottom: 10px;
}

.m-b-15 {
  margin-bottom: 15px;
}

.m-b-20 {
  margin-bottom: 20px;
}

.m-b-30 {
  margin-bottom: 30px;
}

.m-b-40 {
  margin-bottom: 40px;
}

.m-t-5 {
  margin-top: 5px;
}

.m-t-10 {
  margin-top: 10px;
}

.m-t-15 {
  margin-top: 15px;
}

.m-t-20 {
  margin-top: 20px;
}

.m-t-30 {
  margin-top: 30px;
}

.m-t-40 {
  margin-top: 40px;
}

.m-r-5 {
  margin-right: 5px;
}

.w-30 {
  max-width: 30px;
}

.w-xs {
  min-width: 80px;
}

.w-sm {
  min-width: 95px;
}

.w-md {
  min-width: 110px;
}

.w-lg {
  min-width: 140px;
}

.l-h-23 {
  line-height: 23px;
}

.l-h-34 {
  line-height: 34px;
}

.font-12 {
  font-size: 12px;
}

.font-13 {
  font-size: 13px;
}

.font-14 {
  font-size: 14px;
}

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

.font-16 {
  font-size: 16px;
}

.font-18 {
  font-size: 18px;
}

.font-20 {
  font-size: 20px;
}

.font-22 {
  font-size: 22px;
}

.font-24 {
  font-size: 24px;
}

.font-30 {
  font-size: 30px;
}

.font-32 {
  font-size: 32px;
}

.thumb-sm {
  height: 32px;
  width: 32px;
}

.thumb-md {
  height: 48px;
  width: 48px;
}

.thumb-lg {
  height: 88px;
  width: 88px;
}

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

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

.header-title {
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 5px;
}

.rating-symbol-foreground {
  top: 0px;
}

.sub-title {
  margin-bottom: 25px;
  color: #828b96;
}

.bg-pattern {
  background-image: url("../images/bg-pattern.png");
  background-size: cover;
  background-position: bottom;
}

/* ==============
  Popover & Tooltips
===================*/
.popover-header {
  margin-top: 0;
}

.tooltip .tooltip-inner {
  padding: 4px 10px;
}

/* ==============
  Waves Effect
===================*/
/*!
 * Waves v0.7.6
 * http://fian.my.id/Waves 
 * 
 * Copyright 2014-2018 Alfiana E. Sibuea and other contributors 
 * Released under the MIT license 
 * https://github.com/fians/Waves/blob/master/LICENSE */
.waves-effect {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
}

.waves-effect .waves-ripple {
  position: absolute;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  opacity: 0;
  background: rgba(0, 0, 0, 0.2);
  background: radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  transition: all 0.5s ease-out;
  transition-property: transform, opacity;
  transform: scale(0) translate(0, 0);
  pointer-events: none;
}

.waves-effect.waves-light .waves-ripple {
  background: rgba(255, 255, 255, 0.4);
  background: radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
}

.waves-effect.waves-classic .waves-ripple {
  background: rgba(0, 0, 0, 0.2);
}

.waves-effect.waves-classic.waves-light .waves-ripple {
  background: rgba(255, 255, 255, 0.4);
}

.waves-notransition {
  transition: none !important;
}

.waves-button,
.waves-circle {
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

.waves-button,
.waves-button:hover,
.waves-button:visited,
.waves-button-input {
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: none;
  outline: none;
  color: inherit;
  background-color: rgba(0, 0, 0, 0);
  font-size: 1em;
  line-height: 1em;
  text-align: center;
  text-decoration: none;
  z-index: 1;
}

.waves-button {
  padding: 0.85em 1.1em;
  border-radius: 0.2em;
}

.waves-button-input {
  margin: 0;
  padding: 0.85em 1.1em;
}

.waves-input-wrapper {
  border-radius: 0.2em;
  vertical-align: bottom;
}

.waves-input-wrapper.waves-button {
  padding: 0;
}

.waves-input-wrapper .waves-button-input {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}

.waves-circle {
  text-align: center;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  border-radius: 50%;
}

.waves-float {
  -webkit-mask-image: none;
  box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
  transition: all 300ms;
}

.waves-float:active {
  box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
}

.waves-block {
  display: block;
}

/******* Metis Menu css *******/
.metismenu {
  padding: 0;
}
.metismenu ul {
  padding: 0;
}
.metismenu ul li {
  list-style: none;
}

/******* Topbar *******/
.topbar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999;
}
.topbar .topbar-left {
  background-color: #010409;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  position: relative;
  width: 240px;
  padding: 0 18px;
  z-index: 1;
}
.topbar .topbar-left .logo {
  line-height: 70px;
  color: #e6edf3;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
}
.topbar .topbar-left .logo .logo-sm {
  display: none;
}
.topbar .navbar-custom {
  background-color: #010409;
  border-bottom: 1px solid #3d444d;
  border-radius: 0;
  margin-bottom: 0;
  padding: 0 10px 0 0;
  margin-left: 240px;
  min-height: 70px;
  box-shadow: 1px 0 5px rgba(0, 0, 0, 0.05);
}
.topbar .navbar-custom .navbar-right .dropdown-toggle:after {
  content: initial;
}

.notification-item-list {
  max-height: 230px;
}

.navbar-custom .dropdown-menu.dropdown-menu-right {
  transform: none !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
}

.notification-list.list-inline-item:not(:last-child) {
  margin-right: 0;
}
.notification-list .nav-link {
  padding: 0 15px;
  line-height: 70px;
  color: #e6edf3;
  max-height: 70px;
}
.notification-list .noti-icon {
  font-size: 24px;
  vertical-align: middle;
}
.notification-list .noti-icon-badge {
  display: inline-block;
  position: absolute;
  top: 16px;
  right: 10px;
}
.notification-list .notify-item {
  padding: 10px 20px;
}
.notification-list .notify-item .notify-icon {
  float: left;
  height: 36px;
  width: 36px;
  line-height: 36px;
  text-align: center;
  margin-right: 10px;
  border-radius: 50%;
}
.notification-list .notify-item .notify-icon i {
  height: 32px;
  width: 32px;
  border-radius: 50%;
  line-height: 32px;
  margin-top: 2px;
  color: #ffffff;
}
.notification-list .notify-item .notify-details {
  margin-bottom: 0;
  overflow: hidden;
  margin-left: 45px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Poppins", sans-serif;
}
.notification-list .notify-item .notify-details span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  font-size: 12px;
  font-weight: normal;
  font-family: "Poppins", sans-serif;
}
.notification-list .language-switch a img {
  float: right;
  margin-top: 3px;
}
.notification-list.show .nav-link {
  background-color: rgba(21, 27, 35, 0.05);
}
.notification-list .nav-user img {
  height: 36px;
  width: 36px;
}
.notification-list .profile-dropdown {
  width: 170px;
}
.notification-list .profile-dropdown i {
  font-size: 17px;
  vertical-align: middle;
  margin-right: 5px;
  color: #9198a1;
}
.notification-list .profile-dropdown span {
  margin-top: 5px;
}

.arrow-none:after {
  border: none;
  margin: 0;
  display: none;
}

.dropdown-menu-lg {
  width: 300px;
}

/******* Sidemenu *******/
.side-menu {
  width: 240px;
  z-index: 10;
  background: #010409;
  border-right: 1px solid #3d444d;
  bottom: 0;
  margin-top: 0;
  padding-bottom: 30px;
  position: fixed;
  top: 70px;
}
.side-menu .waves-effect .waves-ripple {
  background-color: rgba(21, 27, 35, 0.4);
}

#sidebar-menu {
  padding-top: 10px;
}
#sidebar-menu > ul > li.mm-active > a > span > .menu-arrow i {
  transform: rotate(90deg);
}
#sidebar-menu > ul > li > a {
  color: rgb(61.1764705882%, 63.6470588235%, 66.8235294118%);
  display: block;
  padding: 13px 20px;
  font-size: 14px;
  position: relative;
  transition: all 0.5s;
  font-family: "Poppins", sans-serif;
}
#sidebar-menu > ul > li > a:hover, #sidebar-menu > ul > li > a:focus, #sidebar-menu > ul > li > a:active {
  color: #e6edf3;
  text-decoration: none;
}
#sidebar-menu > ul > li > a > span {
  margin-left: 7px;
}
#sidebar-menu > ul > li > a i {
  line-height: 1;
  width: 20px;
  display: inline-block;
  vertical-align: middle;
}
#sidebar-menu > ul > li > a .badge {
  margin-top: 3px;
}
#sidebar-menu > ul > li > a.mm-active {
  color: #e6edf3 !important;
  background-color: rgb(12.7352941176%, 16.3739495798%, 21.2254901961%);
}
#sidebar-menu .menu-title {
  padding: 12px 20px !important;
  letter-spacing: 1px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  color: #e6edf3;
}
#sidebar-menu .submenu li a {
  padding: 8px 20px 8px 10px;
  color: rgb(61.1764705882%, 63.6470588235%, 66.8235294118%);
  display: block;
  transition: all 0.5s;
}
#sidebar-menu .submenu li a:focus {
  background-color: #010409;
}
#sidebar-menu .submenu li a:hover {
  background-color: rgb(12.7352941176%, 16.3739495798%, 21.2254901961%);
  color: #e6edf3;
}
#sidebar-menu .submenu > li > a {
  padding-left: 50px;
}
#sidebar-menu .submenu > li .submenu > li > a {
  padding-left: 70px;
}

/******* Enlarged *******/
.enlarged .slimScrollDiv {
  overflow: inherit !important;
}
.enlarged .slimScrollBar {
  visibility: hidden;
}
.enlarged #wrapper .topbar .topbar-left {
  width: 70px !important;
}
.enlarged #wrapper .topbar .topbar-left .logo .logo-light {
  display: none;
  opacity: 0;
}
.enlarged #wrapper .topbar .topbar-left .logo .logo-sm {
  display: block;
  line-height: 70px;
  font-size: 28px;
}
.enlarged #wrapper .navbar-custom {
  margin-left: 70px;
}
.enlarged #wrapper #sidebar-menu .menu-title,
.enlarged #wrapper #sidebar-menu .menu-arrow,
.enlarged #wrapper #sidebar-menu .badge {
  display: none !important;
}
.enlarged #wrapper #sidebar-menu .mm-collapse.mm-show {
  display: none;
}
.enlarged #wrapper #sidebar-menu .nav.mm-collapse {
  height: inherit !important;
}
.enlarged #wrapper #sidebar-menu ul ul {
  padding-bottom: 5px;
  padding-top: 5px;
  background-color: #151b23;
}
.enlarged #wrapper .left.side-menu {
  position: absolute;
  width: 70px;
  z-index: 5;
}
.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li {
  position: relative;
  white-space: nowrap;
}
.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li:hover > a {
  position: relative;
  width: 260px;
  color: #e6edf3;
  background-color: rgb(12.7352941176%, 16.3739495798%, 21.2254901961%);
  z-index: 1;
}
.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li:hover > a.open :after, .enlarged #wrapper .left.side-menu #sidebar-menu > ul > li:hover > a.mm-active :after {
  display: none;
}
.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li:hover > ul {
  display: block;
  left: 70px;
  position: absolute;
  width: 190px;
  height: auto !important;
}
.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li:hover > ul a {
  box-shadow: none;
  padding: 8px 20px;
  position: relative;
  width: 190px;
  z-index: 6;
}
.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li:hover > ul a:hover {
  color: #ffffff;
}
.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li:hover a span {
  display: inline-block;
}
.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a {
  padding: 15px 20px;
  transition: none;
}
.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a:hover, .enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a:active, .enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a:focus {
  color: #e6edf3;
  background-color: rgb(12.7352941176%, 16.3739495798%, 21.2254901961%);
}
.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a i {
  font-size: 18px;
  margin-left: 5px;
  margin-right: 20px !important;
}
.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a span {
  display: none;
  padding-left: 10px;
}
.enlarged #wrapper .left.side-menu #sidebar-menu ul ul li:hover > ul {
  display: block;
  left: 190px;
  margin-top: -36px;
  position: absolute;
  width: 190px;
}
.enlarged #wrapper .left.side-menu #sidebar-menu ul ul li > a span.float-right {
  position: absolute;
  right: 20px;
  top: 12px;
  transform: rotate(270deg);
}
.enlarged #wrapper .left.side-menu #sidebar-menu ul ul li.mm-active a {
  color: #ffffff;
}
.enlarged #wrapper .content-page {
  margin-left: 70px;
}
.enlarged #wrapper .footer {
  left: 70px;
}

/******* Footer *******/
.footer {
  bottom: 0;
  text-align: center !important;
  padding: 19px 30px 20px;
  position: absolute;
  background-color: #0d1117;
  right: 0;
  left: 240px;
  font-family: "Poppins", sans-serif;
}

/******* Responsive *******/
@media (min-width: 769px) {
  .enlarged {
    min-height: 1200px;
  }
  .enlarged .slimscroll-menu {
    overflow: inherit !important;
  }
}
@media (max-width: 419px) {
  .content-page {
    margin-left: 70px;
  }
  .enlarged .side-menu.left {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
  }
}
@media (max-width: 480px) {
  .side-menu {
    z-index: 10 !important;
  }
  .button-menu-mobile {
    display: block;
  }
  .navbar-custom {
    margin-left: 0 !important;
  }
}
@media (max-width: 768px) {
  .topbar .topbar-left {
    width: 70px !important;
    height: 70px;
  }
  .topbar .topbar-left .logo-light {
    display: none !important;
  }
  .topbar .topbar-left .logo-sm {
    display: block !important;
    line-height: 70px !important;
    font-size: 28px;
  }
  .navbar-custom {
    margin-left: 70px !important;
  }
  .content-page {
    margin-left: 0 !important;
  }
  .content-page .content {
    padding: 0px;
  }
  .enlarged .left.side-menu {
    margin-left: -70px;
  }
  .footer {
    left: 0 !important;
  }
}
.right-sidebar {
  position: fixed;
  width: 280px;
  top: 70px;
  bottom: 0px;
  right: 0px;
  padding-bottom: 30px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

@media (min-width: 1200px) {
  .dasboard-content {
    margin-right: 280px;
  }
}
/******* Content Page *******/
.content-page {
  margin-left: 240px;
  overflow: hidden;
}
.content-page .content {
  padding: 0 15px 10px 15px;
  margin-top: 70px;
  margin-bottom: 60px;
}

/******* Page Title *******/
.page-title-box {
  padding: 20px 0px;
}
.page-title-box .page-title {
  font-size: 18px;
  margin: 0;
  line-height: 30px;
}
.page-title-box .breadcrumb {
  padding: 4px 0;
  background-color: transparent;
  margin-bottom: 0;
}
.page-title-box .breadcrumb a {
  color: #9198a1;
}
.page-title-box .breadcrumb a:hover {
  color: rgba(145, 152, 161, 0.9);
}
.page-title-box .breadcrumb .active {
  color: rgba(145, 152, 161, 0.7);
}

/******* menu light *******/
.left-side-menu-light .side-menu {
  background-color: #ffffff;
}
.left-side-menu-light #sidebar-menu > ul > li > a.mm-active {
  color: #3d8cdb !important;
  background-color: rgb(97.5%, 97.5%, 97.5%);
  box-shadow: 0px 1px 1px 0px rgba(43, 46, 49, 0.07);
}
.left-side-menu-light #sidebar-menu > ul > li > a:hover, .left-side-menu-light #sidebar-menu > ul > li > a:focus, .left-side-menu-light #sidebar-menu > ul > li > a:active {
  color: #3d8cdb;
}
.left-side-menu-light #sidebar-menu > ul > li > a.waves-effect .waves-ripple {
  background: rgba(255, 255, 255, 0.4);
}
.left-side-menu-light #sidebar-menu > ul > li > a .badge-light {
  background-color: #3d8cdb;
  color: #010409;
}
.left-side-menu-light #sidebar-menu .submenu li a:hover {
  background-color: #ffffff;
  color: #3d8cdb;
}
.left-side-menu-light.enlarged #sidebar-menu > ul > li:hover > a {
  color: #3d8cdb !important;
  background-color: rgb(97.5%, 97.5%, 97.5%) !important;
}
.left-side-menu-light.enlarged #sidebar-menu > ul > li:hover > ul a:hover {
  color: #3d8cdb !important;
}
.left-side-menu-light.enlarged #sidebar-menu > ul > li > a:hover, .left-side-menu-light.enlarged #sidebar-menu > ul > li > a:active, .left-side-menu-light.enlarged #sidebar-menu > ul > li > a:focus {
  color: #3d8cdb !important;
}
.left-side-menu-light.enlarged #sidebar-menu ul ul {
  background-color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.left-side-menu-light .navbar-custom {
  background-color: #383c40;
}
.left-side-menu-light .navbar-custom .button-menu-mobile {
  color: #9198a1;
  background-color: #383c40;
}
.left-side-menu-light .navbar-custom .btn-light {
  background-color: rgb(25.6941176471%, 27.5294117647%, 29.3647058824%) !important;
  border-color: rgb(25.6941176471%, 27.5294117647%, 29.3647058824%) !important;
  color: #6b7280 !important;
  box-shadow: none !important;
}
.left-side-menu-light .navbar-custom .notification-list .nav-link {
  color: #6b7280;
}
.left-side-menu-light .navbar-custom .notification-list .app-search .form-control::-moz-placeholder {
  color: #6b7280;
}
.left-side-menu-light .navbar-custom .notification-list .app-search .form-control::placeholder {
  color: #6b7280;
}
.left-side-menu-light .navbar-custom .notification-list .app-search .form-control,
.left-side-menu-light .navbar-custom .notification-list .app-search .form-control:focus {
  border: 1px solid rgb(25.6941176471%, 27.5294117647%, 29.3647058824%);
  background: rgb(25.6941176471%, 27.5294117647%, 29.3647058824%);
  color: #6b7280;
}

@media (max-width: 576px) {
  .page-title-box .breadcrumb {
    display: none;
  }
}
@media (max-width: 420px) {
  .dropdown-menu-lg {
    width: 220px;
  }
  .notify-icon {
    display: none;
  }
  .notify-details {
    margin-left: 0px !important;
  }
}
/* ==============================================================
   Ust cubuk — R2 yeniden duzenlemesi
   ==============================================================

   Onceki hali: arama cubugu 200px genisliginde, kose yuvarlakligi
   30px, arama dugmesi mutlak konumla kutunun disinda "uctan" bir
   yerdeydi. Sezon secici ve kullanici resmi farkli yuksekliklerdeydi.

   Yeni duzen: ust cubuk iki yana yaslanir. Sol yarida menu dugmesi
   ve onun hemen ardindan baslayip yarinin sonuna kadar uzanan arama
   cubugu; sagda ayni yukseklikte iki "kart" (sezon, kullanici).
   ============================================================== */
.navbar-custom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-right: 20px;
}

/* --------------------------------------------------------------
   Calisto'nun ust cubugu ozgun Stexo isaretlemesini kullanir: iki
   `float`lu <ul>, DOM'da once .navbar-right sonra .menu-left gelir.
   Flex duzene gecince `float` etkisiz kalir ve ogeler DOM sirasina
   duser — kullanici menusu sola, arama saga gecerdi.

   `order` gorsel sirayi geri koyar. Boylece isaretlemeye hic
   dokunmadan iki yana yaslanmis duzen elde ediliyor.
   -------------------------------------------------------------- */
.navbar-custom > .menu-left {
  order: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 50%;
  min-width: 0;
  float: none;
}
.navbar-custom > .menu-left > li {
  float: none;
  margin: 0;
  min-width: 0;
}
.navbar-custom > .menu-left > li.w-50 {
  width: auto !important;
  flex: 1 1 auto;
}

.navbar-custom > .navbar-right {
  order: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  float: none !important;
}
.navbar-custom > .navbar-right > li {
  margin: 0;
}

.button-menu-mobile {
  border: none;
  background: transparent;
  color: #9198a1;
  height: 70px;
  width: 54px;
  flex: 0 0 auto;
  font-size: 24px;
  transition: color 0.15s;
}
.button-menu-mobile:hover {
  color: #e6edf3;
}

/* --- Arama --- */
.app-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 560px;
}
.app-search .form-control {
  height: 42px;
  padding: 4px 44px 4px 16px;
  width: 100%;
  font-size: 14px;
  border-radius: 4px;
  background: #212a37;
  border: 1px solid #3d444d;
  color: #e6edf3;
  box-shadow: none;
}
.app-search .form-control::-moz-placeholder {
  color: #828b96;
}
.app-search .form-control::placeholder {
  color: #828b96;
}
.app-search .form-control:focus {
  background: #212a37;
  border-color: #3d8cdb;
  color: #e6edf3;
  box-shadow: 0 0 0 2px rgba(61, 140, 219, 0.25);
}
.app-search button {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0 6px 6px 0;
  background: transparent;
  color: #828b96;
  font-size: 14px;
  transition: color 0.15s, background 0.15s;
}
.app-search button:hover {
  color: #010409;
  background: #3d8cdb;
}

/* --- Ust cubugun sag tarafi ---
   Calisto'da sag tarafta iki acilir menu var: dil bayragi ve
   kullanici resmi. haltakipv2'nin sezon secici / kullanici karti
   bilesenleri Calisto'da bulunmadigi icin tasinmadi. */
.navbar-right .notification-list .nav-link {
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 10px;
  line-height: normal;
  max-height: none;
  color: #e6edf3;
}
.navbar-right .notification-list .nav-link:hover {
  color: #e6edf3;
  opacity: 0.75;
}
.navbar-right .nav-user img {
  width: 30px;
  height: 30px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

@media (max-width: 767px) {
  .app-search {
    display: none;
  }
}
/* ==============================================================
   Ust cubuk — teal duzen (R2, ikinci tur)

   Ust cubuk logo alani dahil bastan sona teal. Teal uzerinde beyaz
   yazi 3.68 ile esikte kalir, koyu yazi 5.54 ile gecer; bu yuzden
   cubuk uzerindeki tum yazi/ikonlar KOYU.

   Girdiler (arama, sezon, kullanici) sayfa siyahiyla "kuyu" gibi
   oyuluyor: teal'e gore 5.54 ile ayrisiyorlar, iclerindeki acik
   yazi 16.67 ile okunuyor.
   ============================================================== */
.topbar-left .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: normal;
}
.topbar-left .logo img {
  max-width: 100%;
  max-height: 70px;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

.navbar-custom {
  background-color: #010409;
  border-bottom: none;
}

.button-menu-mobile {
  color: #e6edf3;
}
.button-menu-mobile:hover {
  color: #e6edf3;
  opacity: 0.7;
}

/* Marka lacivert cubuk uzerindeki "kuyu": arama kutusu.
   Cubuk (#123961) zaten koyu; arama kutusu sayfa zeminine (#04070C)
   oyularak 1.71 ile ayrisir, icindeki acik yazi 15.50 ile okunur. */
.app-search .form-control {
  background: #0d1117;
  border-color: rgba(0, 0, 0, 0.35);
  color: #e6edf3;
}

.app-search .form-group {
  margin-bottom: 0;
  width: 100%;
}
.app-search .form-control::-moz-placeholder {
  color: #828b96;
}
.app-search .form-control::placeholder {
  color: #828b96;
}
.app-search .form-control:focus {
  background: #0d1117;
  border-color: #3d8cdb;
  color: #e6edf3;
  box-shadow: 0 0 0 2px rgba(61, 140, 219, 0.3);
}
.app-search button {
  color: #828b96;
}
.app-search button:hover {
  background: #3d8cdb;
  color: #010409;
}

/* ==============================================================
   Sol menu — R2 duzenlemesi

   Onceki hali: ogeler arasi bosluk yok, hover yalnizca yazi rengini
   degistiriyordu, aktif oge dikdortgen bir blok halinde tum genisligi
   kapliyordu. Tiklanabilir alan belirsizdi.

   Yeni hali: her oge yuvarlatilmis bir yuzey; hover'da hafif dolgu,
   aktif ogede teal dolgu ve sol kenarda vurgu cizgisi.
   ============================================================== */
#sidebar-menu {
  padding: 12px 0;
}
#sidebar-menu > ul > li {
  margin-bottom: 2px;
}
#sidebar-menu > ul > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #9198a1;
  transition: background-color 0.15s, color 0.15s;
}
#sidebar-menu > ul > li > a i {
  font-size: 18px;
  width: 22px;
  text-align: center;
  color: #828b96;
  transition: color 0.15s;
}
#sidebar-menu > ul > li > a > span {
  margin-left: 0;
}
#sidebar-menu > ul > li > a:hover, #sidebar-menu > ul > li > a:focus {
  background-color: #212a37;
  color: #e6edf3;
}
#sidebar-menu > ul > li > a:hover i, #sidebar-menu > ul > li > a:focus i {
  color: #3d8cdb;
}
#sidebar-menu > ul > li.mm-active > a {
  color: #e6edf3;
}
#sidebar-menu > ul > li.mm-active > a i {
  color: #3d8cdb;
}
#sidebar-menu .submenu {
  padding: 2px 0 6px;
}
#sidebar-menu .submenu li a {
  position: relative;
  display: block;
  margin: 1px 0;
  padding: 8px 12px 8px 44px;
  font-size: 13px;
  color: #828b96;
  transition: background-color 0.15s, color 0.15s;
}
#sidebar-menu .submenu li a:hover {
  background-color: #212a37;
  color: #e6edf3;
}
#sidebar-menu .submenu li.mm-active > a {
  background-color: #3d8cdb;
  color: #010409;
  font-weight: 600;
  margin-left: 10px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
#sidebar-menu .submenu li.mm-active > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 6px 6px 0;
  background: #010409;
  opacity: 0.55;
}
#sidebar-menu .submenu li.mm-active > a:hover {
  background-color: #3d8cdb;
  color: #010409;
}
#sidebar-menu .menu-title {
  padding: 12px 12px 8px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #828b96;
  font-weight: 600;
}

/* =============
   Alerts
============= */
.alert {
  position: relative;
  border: 0;
}
.alert .alert-link {
  font-weight: 500;
  text-decoration: underline;
}

.alert-primary {
  color: #ffffff;
  background-color: #3d8cdb;
}
.alert-primary hr {
  border-top-color: rgb(14.0562659847%, 44.9019607843%, 75.747655584%);
}

.alert-success {
  color: #ffffff;
  background-color: #2bb673;
}
.alert-success hr {
  border-top-color: rgb(13.0405228758%, 55.1947712418%, 34.8758169935%);
}

.alert-danger {
  color: #ffffff;
  background-color: #e05263;
}
.alert-danger hr {
  border-top-color: rgb(84.8039215686%, 15.1960784314%, 23.5294117647%);
}

.alert-warning {
  color: #ffffff;
  background-color: #f0b429;
}
.alert-warning hr {
  border-top-color: rgb(84.2880383594%, 60.6558780718%, 5.9080400719%);
}

.alert-info {
  color: #ffffff;
  background-color: #3d8cdb;
}
.alert-info hr {
  border-top-color: rgb(14.0562659847%, 44.9019607843%, 75.747655584%);
}

.alert-secondary {
  color: #ffffff;
  background-color: #9198a1;
}
.alert-secondary hr {
  border-top-color: rgb(46.0784313725%, 49.5098039216%, 53.9215686275%);
}

.alert-light {
  color: #e6edf3;
  background-color: #212a37;
  border-color: #3d444d;
}

.alert-dark {
  color: #ffffff;
  background-color: #151b23;
}
.alert-dark hr {
  border-top-color: rgb(0.7352941176%, 0.9453781513%, 1.2254901961%);
}

/* ==============
  Buttons
===================*/
.btn {
  border-radius: 6px;
  font-size: 13px;
}

button:focus {
  outline: none;
}

.btn-sm {
  font-size: 10.8333333333px;
}

.btn-lg {
  font-size: 15.6px;
}

.btn-primary, .btn-success, .btn-info, .btn-warning,
.btn-danger, .btn-dark, .btn-pink, .btn-purple, .btn-indigo, .btn-teal,
.btn-lime, .btn-orange, .btn-brown, .btn-blue-grey {
  color: #ffffff;
}

.btn-primary {
  background-color: #3d8cdb;
  border: 1px solid #3d8cdb;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover,
.open > .dropdown-toggle.btn-primary, .btn-outline-primary.active, .btn-outline-primary:active,
.show > .btn-outline-primary.dropdown-toggle, .btn-outline-primary:hover, .btn-primary.active,
.btn-primary:active, .show > .btn-primary.dropdown-toggle,
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle,
.btn-outline-primary:not([disabled]):not(.disabled).active, .btn-outline-primary:not([disabled]):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle {
  background-color: rgb(15.621483376%, 49.9019607843%, 84.1824381927%);
  border: 1px solid rgb(15.621483376%, 49.9019607843%, 84.1824381927%);
}

.btn-primary.focus, .btn-primary:focus, .btn-outline-primary.focus, .btn-outline-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 2px rgba(61, 140, 219, 0.3);
}

.btn-secondary.focus, .btn-secondary:focus, .btn-outline-secondary.focus, .btn-outline-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-secondary.dropdown-toggle:focus,
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 2px rgba(21, 27, 35, 0.3);
}

.btn-success {
  background-color: #2bb673;
  border: 1px solid #2bb673;
}

.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active,
.btn-success.focus, .btn-success:active, .btn-success:focus, .btn-success:hover,
.open > .dropdown-toggle.btn-success, .btn-outline-success.active, .btn-outline-success:active,
.show > .btn-outline-success.dropdown-toggle, .btn-outline-success:hover, .btn-success.active,
.btn-success:active, .show > .btn-success.dropdown-toggle,
.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show > .btn-success.dropdown-toggle:focus,
.btn-outline-success:not([disabled]):not(.disabled).active, .btn-outline-success:not([disabled]):not(.disabled):active,
.show > .btn-outline-success.dropdown-toggle {
  background-color: rgb(14.9516339869%, 63.2836601307%, 39.9869281046%);
  border: 1px solid rgb(14.9516339869%, 63.2836601307%, 39.9869281046%);
}

.btn-success.focus, .btn-success:focus, .btn-outline-success.focus, .btn-outline-success:focus,
.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show > .btn-success.dropdown-toggle:focus,
.btn-outline-success:not(:disabled):not(.disabled).active:focus, .btn-outline-success:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 2px rgba(43, 182, 115, 0.3);
}

.btn-info {
  background-color: #3d8cdb;
  border: 1px solid #3d8cdb;
}

.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .btn-info.focus,
.btn-info:active, .btn-info:focus, .btn-info:hover, .open > .dropdown-toggle.btn-info,
.btn-outline-info.active, .btn-outline-info:active,
.show > .btn-outline-info.dropdown-toggle, .btn-outline-info:hover, .btn-info.active, .btn-info:active,
.show > .btn-info.dropdown-toggle, .btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show > .btn-info.dropdown-toggle,
.btn-outline-info:not([disabled]):not(.disabled).active, .btn-outline-info:not([disabled]):not(.disabled):active, .show > .btn-outline-info.dropdown-toggle {
  background-color: rgb(15.621483376%, 49.9019607843%, 84.1824381927%);
  border: 1px solid rgb(15.621483376%, 49.9019607843%, 84.1824381927%);
}

.btn-info.focus, .btn-info:focus, .btn-outline-info.focus, .btn-outline-info:focus,
.btn-info:not(:disabled):not(.disabled).active:focus, .btn-info:not(:disabled):not(.disabled):active:focus, .show > .btn-info.dropdown-toggle:focus,
.btn-outline-info:not(:disabled):not(.disabled).active:focus, .btn-outline-info:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 2px rgba(61, 140, 219, 0.3);
}

.btn-warning {
  background-color: #f0b429;
  border: 1px solid #f0b429;
}

.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active,
.btn-warning.focus, .btn-warning:active, .btn-warning:focus, .btn-warning:hover,
.open > .dropdown-toggle.btn-warning, .btn-outline-warning.active, .btn-outline-warning:active,
.show > .btn-outline-warning.dropdown-toggle, .btn-outline-warning:hover, .btn-warning.active,
.btn-warning:active, .show > .btn-warning.dropdown-toggle,
.btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active, .show > .btn-warning.dropdown-toggle,
.btn-outline-warning:not([disabled]):not(.disabled).active, .btn-outline-warning:not([disabled]):not(.disabled):active, .show > .btn-outline-warning.dropdown-toggle {
  background-color: rgb(93.4626252248%, 67.3131261238%, 6.7334532066%);
  border: 1px solid rgb(93.4626252248%, 67.3131261238%, 6.7334532066%);
  color: #ffffff;
}

.btn-warning.focus, .btn-warning:focus, .btn-outline-warning.focus, .btn-outline-warning:focus,
.btn-warning:not(:disabled):not(.disabled).active:focus, .btn-warning:not(:disabled):not(.disabled):active:focus, .show > .btn-warning.dropdown-toggle:focus,
.btn-outline-warning:not(:disabled):not(.disabled).active:focus, .btn-outline-warning:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 2px rgba(240, 180, 41, 0.3);
}

.btn-danger {
  background-color: #e05263;
  border: 1px solid #e05263;
}

.btn-danger:active, .btn-danger:focus, .btn-danger:hover, .btn-danger.active,
.btn-danger.focus, .btn-danger:active, .btn-danger:focus, .btn-danger:hover,
.open > .dropdown-toggle.btn-danger, .btn-outline-danger.active, .btn-outline-danger:active,
.show > .btn-outline-danger.dropdown-toggle, .btn-outline-danger:hover, .btn-danger.active,
.btn-danger:active, .show > .btn-danger.dropdown-toggle,
.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show > .btn-danger.dropdown-toggle,
.btn-outline-danger:not([disabled]):not(.disabled).active, .btn-outline-danger:not([disabled]):not(.disabled):active, .show > .btn-outline-danger.dropdown-toggle {
  background-color: rgb(86.3235294118%, 23.6764705882%, 31.1764705882%);
  border: 1px solid rgb(86.3235294118%, 23.6764705882%, 31.1764705882%);
}

.btn-danger.focus, .btn-danger:focus, .btn-outline-danger.focus, .btn-outline-danger:focus,
.btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus, .show > .btn-danger.dropdown-toggle:focus,
.btn-outline-danger:not(:disabled):not(.disabled).active:focus, .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 2px rgba(224, 82, 99, 0.3);
}

.btn-dark {
  background-color: #151b23;
  border: 1px solid #151b23;
  color: #ffffff;
}

.btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark.active, .btn-dark.focus,
.btn-dark:active, .btn-dark:focus, .btn-dark:hover, .open > .dropdown-toggle.btn-dark,
.btn-outline-dark.active, .btn-outline-dark:active,
.show > .btn-outline-dark.dropdown-toggle, .btn-outline-dark:hover,
.btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active, .show > .btn-dark.dropdown-toggle,
.btn-outline-dark:not([disabled]):not(.disabled).active, .btn-outline-dark:not([disabled]):not(.disabled):active, .show > .btn-outline-dark.dropdown-toggle {
  background-color: rgb(4.4852941176%, 5.7668067227%, 7.4754901961%);
  border: 1px solid rgb(4.4852941176%, 5.7668067227%, 7.4754901961%);
  color: #ffffff;
}

.btn-dark.focus, .btn-dark:focus, .btn-outline-dark.focus, .btn-outline-dark:focus,
.btn-dark:not(:disabled):not(.disabled).active:focus, .btn-dark:not(:disabled):not(.disabled):active:focus, .show > .btn-dark.dropdown-toggle:focus,
.btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 2px rgba(21, 27, 35, 0.3);
}

.btn-secondary {
  background-color: #9198a1;
  border: 1px solid #9198a1;
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active,
.btn-secondary.focus, .btn-secondary:active, .btn-secondary:focus, .btn-secondary:hover,
.open > .dropdown-toggle.btn-secondary, .btn-outline-secondary.active, .btn-outline-secondary:active,
.show > .btn-outline-secondary.dropdown-toggle, .btn-outline-secondary:hover, .btn-secondary.active,
.btn-secondary:active, .show > .btn-secondary.dropdown-toggle,
.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-secondary.dropdown-toggle:focus,
.btn-outline-secondary:not([disabled]):not(.disabled).active, .btn-outline-secondary:not([disabled]):not(.disabled):active,
.show > .btn-outline-secondary.dropdown-toggle {
  background-color: rgb(51.4705882353%, 54.5588235294%, 58.5294117647%);
  border: 1px solid rgb(51.4705882353%, 54.5588235294%, 58.5294117647%);
}

.btn-secondary.focus, .btn-secondary:focus, .btn-outline-secondary.focus, .btn-outline-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-secondary.dropdown-toggle:focus,
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 2px rgba(145, 152, 161, 0.3);
}

.btn-link {
  color: #151b23;
}
.btn-link:hover {
  color: #3d8cdb;
}

/* button Outline */
.btn-outline-primary {
  color: #3d8cdb;
  border-color: #3d8cdb;
}

.btn-outline-success {
  color: #2bb673;
  border-color: #2bb673;
}

.btn-outline-info {
  color: #3d8cdb;
  border-color: #3d8cdb;
}

.btn-outline-warning {
  color: #f0b429;
  border-color: #f0b429;
}

.btn-outline-danger {
  color: #e05263;
  border-color: #e05263;
}

.btn-outline-dark {
  color: #151b23;
  background-image: none;
  background-color: transparent;
  border-color: #151b23;
}

.btn-outline-secondary {
  color: #9198a1;
  border-color: #9198a1;
}

.btn-rounded {
  border-radius: 30px;
}

.btn-icon {
  position: relative;
}
.btn-icon .btn-icon-label {
  margin: -0.55rem 0.9rem -0.55rem -0.9rem;
  padding: 0.6rem 0.9rem;
}
.btn-icon::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  width: 38%;
  background-color: rgba(255, 255, 255, 0.15);
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  transition: all 0.4s;
}
.btn-icon:hover::before {
  width: 100%;
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%);
}

/* --------------------------------------------------------------
   Renkli butonlarda KOYU yazi

   Vurgu rengi (#3d8cdb) uzerinde beyaz yazi 3.52 ile WCAG AA'nin
   altinda kaliyor; koyu yazi 5.84 ile geciyor. Ayni durum success/
   warning/danger icin de gecerli. Tek ve tutarli kural: renkli
   zeminde koyu yazi.

   Bootstrap 5'te bu tek satirlik bir degisken atamasiydi
   (`--bs-btn-color`). Bootstrap 4'un buton renkleri degisken
   kullanmadigi icin her durum acikca yaziliyor; ayrica stok
   bootstrap.min.css `.btn-primary:hover{color:#fff}` kuralini
   iki sinifli seciciyle veriyor, o yuzden durumlar atlanamaz.
   -------------------------------------------------------------- */
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
  color: #010409;
  font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:active,
.btn-success.active,
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.btn-info:hover,
.btn-info:focus,
.btn-info.focus,
.btn-info:active,
.btn-info.active,
.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus,
.btn-warning:active,
.btn-warning.active,
.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus,
.btn-danger:active,
.btn-danger.active,
.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active {
  color: #010409;
}
.btn-primary:disabled, .btn-primary.disabled,
.btn-success:disabled,
.btn-success.disabled,
.btn-info:disabled,
.btn-info.disabled,
.btn-warning:disabled,
.btn-warning.disabled,
.btn-danger:disabled,
.btn-danger.disabled {
  color: rgba(1, 4, 9, 0.65);
}

.show > .btn-primary.dropdown-toggle,
.show > .btn-success.dropdown-toggle,
.show > .btn-info.dropdown-toggle,
.show > .btn-warning.dropdown-toggle,
.show > .btn-danger.dropdown-toggle {
  color: #010409;
}

.badge-primary,
.badge-success,
.badge-info,
.badge-warning,
.badge-danger,
.badge-secondary {
  color: #010409 !important;
}

/* ==============
  Card
===================*/
.card {
  border: 1px solid #3d444d;
  margin-bottom: 30px;
  background: #151b23;
}

.list-group-item {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.125);
}

@media (min-width: 576px) {
  .card-columns {
    -moz-column-gap: 30px;
    column-gap: 30px;
  }
}
.card-columns .card {
  margin-bottom: 30px;
}

/* Kart basligi ve govde araligi — R2 */
.card {
  border-radius: 6px;
}
.card .card-body {
  padding: 20px;
}
.card .header-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #e6edf3;
}

.page-title-box .page-title {
  font-size: 18px;
  font-weight: 600;
  color: #e6edf3;
}
.page-title-box .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 13px;
}
.page-title-box .breadcrumb .breadcrumb-item.active {
  color: #828b96;
}

/* ==============
  Form-elements
===================*/
label {
  font-weight: 600;
}

.form-control {
  font-size: 13px;
  background: rgb(12.7352941176%, 16.3739495798%, 21.2254901961%);
  border: 1px solid rgb(15.7352941176%, 20.231092437%, 26.2254901961%);
  color: #9198a1;
}
.form-control:focus {
  background: rgb(12.7352941176%, 16.3739495798%, 21.2254901961%);
  border: 1px solid rgb(15.7352941176%, 20.231092437%, 26.2254901961%);
  box-shadow: none;
  color: #9198a1;
}
.form-control::-moz-placeholder {
  color: #9198a1;
}
.form-control::placeholder {
  color: #9198a1;
}

.custom-control-input:checked ~ .custom-control-indicator {
  background-color: #3d8cdb;
}

.custom-control-input:focus ~ .custom-control-indicator {
  box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #3d8cdb;
}

.has-success .form-control {
  border-color: #2bb673;
  box-shadow: none;
}

.has-warning .form-control {
  border-color: #f0b429;
  box-shadow: none;
}

.has-danger .form-control {
  border-color: #e05263;
  box-shadow: none;
}

.input-group-addon {
  border-radius: 2px;
  border: 1px solid #e6edf3;
}

.input-group-text {
  font-size: 13px;
}

/* ==============================================================
   Form kontrolleri — tek yukseklik, tek gorunum (R2)
   ==============================================================

   Sorun: metin girdileri, select'ler, select2 kutulari ve
   DataTables'in urettigi kontroller birbirinden farkli yuksekliklerde
   ve bir kismi BEYAZ zeminliydi. Koyu temada yamali duruyordu.

   Cozum: hepsi asagidaki tek yukseklik ve tek gorunumu paylasir.
   ============================================================== */
/* --- Bootstrap kontrolleri ---
   Bootstrap 5'te acilir liste kontrolu `.form-select`; Bootstrap 4'te
   `.custom-select` ya da dogrudan `select.form-control`. Calisto
   isaretlemesi `select.form-control` kullaniyor, ikisi de kapsandi. */
.form-control,
.custom-select,
select.form-control {
  height: 40px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #3d444d;
  border-radius: 4px;
  background-color: #212a37;
  color: #e6edf3;
  font-size: 14px;
  line-height: 38px;
  box-shadow: none;
}
.form-control:focus,
.custom-select:focus,
select.form-control:focus {
  border-color: #3d8cdb;
  background-color: #212a37;
  color: #e6edf3;
  box-shadow: 0 0 0 2px rgba(61, 140, 219, 0.25);
  outline: none;
}
.form-control::-moz-placeholder, .custom-select::-moz-placeholder, select.form-control::-moz-placeholder {
  color: #828b96;
}
.form-control::placeholder,
.custom-select::placeholder,
select.form-control::placeholder {
  color: #828b96;
}
.form-control:disabled, .form-control[readonly],
.custom-select:disabled,
.custom-select[readonly],
select.form-control:disabled,
select.form-control[readonly] {
  background-color: #151b23;
  color: #9198a1;
  opacity: 1;
}

/* --- Kontrol siralarindaki dugmeler ---
   Bir dugme `.form-group` icindeyse bir kontrol yuvasini dolduruyor
   demektir (suzgec cubuklarindaki Filtrele/Temizle boyle). Bootstrap'in
   .btn'i 33.5px, .btn-sm'i 26px; yanindaki kontrol ise 40px. Fark
   dogrudan goze carpiyordu.

   `min-height`: daha uzun dugmeler (.btn-lg, giris formundaki gonder)
   kisalmasin. Dugme metni yeni yukseklikte dikeyde ortalansin diye
   inline-flex; `.btn-block` tam genisligini kaybetmesin diye ayrica
   `flex`e cekiliyor. */
.form-group > .btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.form-group > .btn.btn-block {
  display: flex;
}

.custom-select {
  background: #212a37 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d6e3f2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") right 12px center/12px 9px no-repeat;
  padding-right: 34px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.custom-select option,
select.form-control option {
  background-color: #151b23;
  color: #e6edf3;
}

textarea.form-control {
  height: auto;
  min-height: 90px;
  padding: 10px 12px;
  line-height: 1.5;
}

input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.6);
  cursor: pointer;
}

label,
.form-label,
.col-form-label {
  color: #9198a1;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
}

.form-check-input {
  background-color: #212a37;
  border-color: #3d444d;
}
.form-check-input:checked {
  background-color: #3d8cdb;
  border-color: #3d8cdb;
}
.form-check-input:focus {
  border-color: #3d8cdb;
  box-shadow: 0 0 0 2px rgba(61, 140, 219, 0.25);
}

.input-group-text {
  height: 40px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #3d444d;
  border-radius: 4px;
  background-color: #212a37;
  color: #e6edf3;
  font-size: 14px;
  line-height: 38px;
  box-shadow: none;
  background-color: #151b23;
  color: #828b96;
}

/* --- select2 ---
   select2'nin kendi CSS'i sabit beyaz zemin ve #aaa kenarlik tasiyor;
   kurulu BS5 temasi degisken kullanmadigi icin burada acikca eziliyor. */
.select2-container--bootstrap-5 .select2-selection,
.select2-container--default .select2-selection {
  height: 40px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #3d444d;
  border-radius: 4px;
  background-color: #212a37;
  color: #e6edf3;
  font-size: 14px;
  line-height: 38px;
  box-shadow: none;
  display: flex;
  align-items: center;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  color: #e6edf3;
  line-height: inherit;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder,
.select2-container--default .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
  color: #828b96;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #828b96;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px;
  right: 8px;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow b,
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #9198a1 transparent transparent transparent;
}
.select2-container--bootstrap-5.select2-container--open .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
  border-color: #3d8cdb;
  background-color: #212a37;
  color: #e6edf3;
  box-shadow: 0 0 0 2px rgba(61, 140, 219, 0.25);
  outline: none;
}
.select2-container--bootstrap-5 .select2-selection--multiple,
.select2-container--default .select2-selection--multiple {
  height: auto;
  min-height: 40px;
  padding: 4px 8px;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #3d8cdb;
  border: none;
  color: #010409;
  border-radius: 6px;
  padding: 2px 8px;
  margin: 3px 4px 0 0;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #010409;
}

.select2-container--bootstrap-5 .select2-dropdown,
.select2-container--default .select2-dropdown {
  background-color: #151b23;
  border: 1px solid #3d444d;
  border-radius: 4px;
  color: #e6edf3;
  overflow: hidden;
}
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field,
.select2-container--default .select2-search--dropdown .select2-search__field {
  height: 40px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #3d444d;
  border-radius: 4px;
  background-color: #212a37;
  color: #e6edf3;
  font-size: 14px;
  line-height: 38px;
  box-shadow: none;
  height: 34px;
  min-height: 34px;
  line-height: 32px;
  width: 100%;
}
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus,
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: #3d8cdb;
  background-color: #212a37;
  color: #e6edf3;
  box-shadow: 0 0 0 2px rgba(61, 140, 219, 0.25);
  outline: none;
}
.select2-container--bootstrap-5 .select2-results__option,
.select2-container--default .select2-results__option {
  color: #e6edf3;
  background-color: #151b23;
  padding: 9px 12px;
  font-size: 14px;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted, .select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #3d8cdb;
  color: #010409;
}
.select2-container--bootstrap-5 .select2-results__option[aria-selected=true], .select2-container--bootstrap-5 .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--selected {
  background-color: #212a37;
  color: #e6edf3;
}
.select2-container--bootstrap-5 .select2-results__options,
.select2-container--default .select2-results__options {
  background-color: #151b23;
}
.select2-container--bootstrap-5 .select2-results__message,
.select2-container--default .select2-results__message {
  color: #828b96;
}

/* --- DataTables'in urettigi kontroller ---
   Sayfa uzunlugu select'i ve arama kutusu; DataTables 2.x isaretlemesi. */
div.dt-container div.dt-length select,
div.dt-container div.dt-search input,
div.dt-container .dataTables_length select,
div.dt-container .dataTables_filter input {
  height: 40px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #3d444d;
  border-radius: 4px;
  background-color: #212a37;
  color: #e6edf3;
  font-size: 14px;
  line-height: 38px;
  box-shadow: none;
  width: auto;
  display: inline-block;
}
div.dt-container div.dt-length select:focus,
div.dt-container div.dt-search input:focus,
div.dt-container .dataTables_length select:focus,
div.dt-container .dataTables_filter input:focus {
  border-color: #3d8cdb;
  background-color: #212a37;
  color: #e6edf3;
  box-shadow: 0 0 0 2px rgba(61, 140, 219, 0.25);
  outline: none;
}
div.dt-container div.dt-length select {
  padding-right: 30px;
}
div.dt-container label,
div.dt-container .dt-info {
  color: #9198a1;
}

/* ==============
  Form-Validation
===================*/
.error {
  color: #ff0000;
}

.parsley-error {
  border-color: #e05263;
}

.parsley-errors-list {
  display: none;
  margin: 0;
  padding: 0;
}

.parsley-errors-list.filled {
  display: block;
}

.parsley-errors-list > li {
  font-size: 12px;
  list-style: none;
  color: #e05263;
  margin-top: 5px;
}

/* ==============
  Widgets
===================*/
.widget-chart li {
  width: 31.5%;
  display: inline-block;
  padding: 0;
}
.widget-chart li i {
  font-size: 22px;
}

.mini-stat-icon i {
  font-size: 30px;
  width: 58px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
}

.dashboard-ct-chart .ct-grid {
  stroke: rgba(0, 0, 0, 0.05);
}

#slider-1 {
  height: 49px;
}

#slider-2 {
  height: 49px;
}

/* Activity */
.activity-feed {
  list-style: none;
}
.activity-feed .feed-item {
  position: relative;
  padding-bottom: 30px;
  padding-left: 30px;
  border-left: 2px solid rgb(15.7352941176%, 20.231092437%, 26.2254901961%);
}
.activity-feed .feed-item:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 6px solid #3d8cdb;
  background-color: #9198a1;
}

.activity-feed .feed-item:last-child {
  border-color: transparent;
}

.friends-suggestions-list .suggestion-icon i {
  width: 30px;
  height: 30px;
  line-height: 30px;
  color: #010409;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  background-color: #3d8cdb;
  font-size: 15px;
}
.friends-suggestions-list .desc h5 {
  color: #9198a1;
}

/* ==============
  Charts (ApexCharts)
===================*/
.apexcharts-tooltip {
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4) !important;
  border: 1px solid #3d444d !important;
  background: #151b23 !important;
  color: #e6edf3 !important;
}
.apexcharts-tooltip .apexcharts-tooltip-title {
  background: #212a37 !important;
  border-bottom: 1px solid #3d444d !important;
  color: #e6edf3 !important;
  font-weight: 600;
}

.apexcharts-legend-text {
  font-family: "Poppins", sans-serif !important;
  color: #e6edf3 !important;
}

.apexcharts-text,
.apexcharts-title-text,
.apexcharts-datalabel-label {
  fill: #e6edf3;
}

.apexcharts-xaxis-label,
.apexcharts-yaxis-label {
  fill: #828b96;
}

.apexcharts-gridline {
  stroke: #3d444d;
}

/* ==============
  Tables
===================*/
.table {
  margin-bottom: 10px;
}

.table > tbody > tr > td, .table > tfoot > tr > td, .table > thead > tr > td {
  padding: 15px 12px;
}

.table-hover tbody tr:hover, .table-striped tbody tr:nth-of-type(odd),
.thead-default th {
  background-color: rgb(14.2352941176%, 18.3025210084%, 23.7254901961%);
}

.table td, .table th {
  vertical-align: middle;
  border-color: rgba(255, 255, 255, 0.05) !important;
  color: #9198a1;
}

.table-bordered {
  border: 1px solid rgb(14.2352941176%, 18.3025210084%, 23.7254901961%);
}

.table-hover tbody tr:hover {
  color: #e6edf3;
}

/************** datatables ***************/
.dataTables_wrapper.container-fluid {
  width: auto;
}

/* == Responsive Table ==*/
table.focus-on tbody tr.focused th {
  background-color: #3d8cdb;
  color: #ffffff;
}
table.focus-on tbody tr.focused td {
  background-color: #3d8cdb;
  color: #ffffff;
}

.table-rep-plugin .btn-toolbar {
  display: block;
}
.table-rep-plugin .table-responsive {
  border: none !important;
}
.table-rep-plugin .fixed-solution {
  margin-bottom: 0px;
}
.table-rep-plugin .fixed-solution .sticky-table-header {
  top: 70px !important;
  background-color: #0d1117;
  border-color: #0d1117;
}
.table-rep-plugin .btn-group.float-right .dropdown-menu {
  left: auto;
  right: 0;
  transform: none !important;
  top: 100% !important;
}
.table-rep-plugin tbody th {
  font-size: 14px;
  font-weight: normal;
}
.table-rep-plugin .checkbox-row {
  padding-left: 40px;
  color: #9198a1 !important;
}
.table-rep-plugin .checkbox-row:hover {
  background-color: rgb(12.7352941176%, 16.3739495798%, 21.2254901961%) !important;
}
.table-rep-plugin .checkbox-row label {
  display: inline-block;
  padding-left: 5px;
  position: relative;
}
.table-rep-plugin .checkbox-row label::before {
  -o-transition: 0.3s ease-in-out;
  -webkit-transition: 0.3s ease-in-out;
  background-color: #ffffff;
  border-radius: 3px;
  border: 1px solid #828b96;
  content: "";
  display: inline-block;
  height: 17px;
  left: 0;
  margin-left: -20px;
  position: absolute;
  transition: 0.3s ease-in-out;
  width: 17px;
  outline: none !important;
}
.table-rep-plugin .checkbox-row label::after {
  color: #828b96;
  display: inline-block;
  font-size: 11px;
  height: 16px;
  left: 0;
  margin-left: -20px;
  padding-left: 3px;
  padding-top: 1px;
  position: absolute;
  top: -1px;
  width: 16px;
}
.table-rep-plugin .checkbox-row input[type=checkbox] {
  cursor: pointer;
  opacity: 0;
  z-index: 1;
  outline: none !important;
}
.table-rep-plugin .checkbox-row input[type=checkbox]:disabled + label {
  opacity: 0.65;
}
.table-rep-plugin .checkbox-row input[type=checkbox]:focus + label::before {
  outline-offset: -2px;
  outline: none;
}
.table-rep-plugin .checkbox-row input[type=checkbox]:checked + label::after {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
.table-rep-plugin .checkbox-row input[type=checkbox]:disabled + label::before {
  background-color: #e6edf3;
  cursor: not-allowed;
}
.table-rep-plugin .checkbox-row input[type=checkbox]:checked + label::before {
  background-color: #3d8cdb;
  border-color: #3d8cdb;
}
.table-rep-plugin .checkbox-row input[type=checkbox]:checked + label::after {
  color: #ffffff;
}

/* ==============================================================
   Tablolar — R2 son duzenleme

   Baslik satiri yukseltilmis yuzey, satir aralari daha ferah,
   hover geri bildirimi belirgin. Onceki halde satirlar birbirine
   yapisik ve baslik govdeden ayrilmiyordu.
   ============================================================== */
.table {
  margin-bottom: 0;
}
.table > thead > tr > th {
  background-color: #212a37;
  color: #9198a1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px 14px;
  border-bottom: 1px solid #3d444d;
  white-space: nowrap;
}
.table > tbody > tr > td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(61, 68, 77, 0.5);
  vertical-align: middle;
}
.table > tbody > tr:last-child > td {
  border-bottom: none;
}

.table-hover > tbody > tr:hover > td {
  background-color: #212a37;
}

/* ==============================================================
   Statü hücresi

   Poliçe statüsü tablolarda rozet olarak duruyordu: dar hücrede
   yaziyi kucultuyor ve satira yapistirilmis gibi duruyordu. Hücrenin
   KENDISI renkleniyor; sol kenardaki serit de goz tararken kolonu
   yakalamayi kolaylastiriyor.

   Rozet kart/detay gibi hücre olmayan yerlerde kullanilmaya devam
   ediyor (bkz. police_statu_rozet).
   ============================================================== */
td.statu-hucre {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2px;
  white-space: nowrap;
  padding-left: 12px;
}

td.statu-success {
  background-color: rgba(43, 182, 115, 0.16) !important;
  color: #2bb673;
  box-shadow: inset 3px 0 0 0 #2bb673;
}

.table-hover tbody tr:hover td.statu-success {
  background-color: rgba(43, 182, 115, 0.26) !important;
}

td.statu-danger {
  background-color: rgba(224, 82, 99, 0.16) !important;
  color: #e05263;
  box-shadow: inset 3px 0 0 0 #e05263;
}

.table-hover tbody tr:hover td.statu-danger {
  background-color: rgba(224, 82, 99, 0.26) !important;
}

td.statu-warning {
  background-color: rgba(240, 180, 41, 0.16) !important;
  color: #f0b429;
  box-shadow: inset 3px 0 0 0 #f0b429;
}

.table-hover tbody tr:hover td.statu-warning {
  background-color: rgba(240, 180, 41, 0.26) !important;
}

td.statu-info {
  background-color: rgba(61, 140, 219, 0.16) !important;
  color: #3d8cdb;
  box-shadow: inset 3px 0 0 0 #3d8cdb;
}

.table-hover tbody tr:hover td.statu-info {
  background-color: rgba(61, 140, 219, 0.26) !important;
}

td.statu-primary {
  background-color: rgba(61, 140, 219, 0.16) !important;
  color: #3d8cdb;
  box-shadow: inset 3px 0 0 0 #3d8cdb;
}

.table-hover tbody tr:hover td.statu-primary {
  background-color: rgba(61, 140, 219, 0.26) !important;
}

td.statu-secondary {
  background-color: rgba(145, 152, 161, 0.16) !important;
  color: #9198a1;
  box-shadow: inset 3px 0 0 0 #9198a1;
}

.table-hover tbody tr:hover td.statu-secondary {
  background-color: rgba(145, 152, 161, 0.26) !important;
}

/* ==============
  Ajanda takvimi
===================*/
.fc {
  --fc-border-color: #3d444d;
  --fc-page-bg-color: #0d1117;
  --fc-neutral-bg-color: #212a37;
  --fc-neutral-text-color: #9198a1;
  --fc-today-bg-color: rgba(61, 140, 219, 0.1);
  --fc-now-indicator-color: #e05263;
  --fc-event-border-color: transparent;
  --fc-list-event-hover-bg-color: #212a37;
  --fc-highlight-color: rgba(61, 140, 219, 0.18);
  color: #e6edf3;
  font-size: 13px;
}

.fc .fc-toolbar-title {
  font-size: 18px;
  font-weight: 600;
  color: #e6edf3;
}

.fc .fc-toolbar.fc-header-toolbar {
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 34px;
  align-items: center;
}

.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number,
.fc .fc-list-day-text,
.fc .fc-list-day-side-text,
.fc .fc-timegrid-axis-cushion,
.fc .fc-timegrid-slot-label-cushion {
  color: #9198a1;
  text-decoration: none;
}

.fc .fc-col-header-cell {
  background-color: #212a37;
}
.fc .fc-col-header-cell .fc-col-header-cell-cushion {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 4px;
}

.fc .fc-day-other .fc-daygrid-day-number {
  color: #828b96;
  opacity: 0.55;
}

.fc .fc-day-today .fc-daygrid-day-number {
  background: #3d8cdb;
  color: #010409;
  font-weight: 700;
  border-radius: 6px;
  padding: 1px 7px;
}

.fc .fc-list-day-cushion {
  background-color: #212a37;
}

.fc .fc-list-empty {
  background-color: #151b23;
  color: #828b96;
}

.fc .fc-popover {
  background: #151b23;
  border: 1px solid #3d444d;
  border-radius: 6px;
}

.fc .fc-popover-header {
  background: #212a37;
  color: #e6edf3;
}

.fc .fc-daygrid-more-link {
  color: #3d8cdb;
}

.fc .fc-button-primary {
  background-color: #212a37;
  border-color: #3d444d;
  color: #e6edf3;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  padding: 0 11px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
}
.fc .fc-button-primary:hover {
  background-color: rgb(15.9411764706%, 20.2887700535%, 26.568627451%);
  border-color: #3d444d;
  color: #e6edf3;
}
.fc .fc-button-primary:disabled {
  background-color: #212a37;
  border-color: #3d444d;
  color: #828b96;
  opacity: 0.55;
}
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active {
  background-color: #3d8cdb;
  border-color: #3d8cdb;
  color: #010409;
}
.fc .fc-button-primary:focus, .fc .fc-button-primary:not(:disabled).fc-button-active:focus {
  box-shadow: 0 0 0 2px rgba(61, 140, 219, 0.3);
}

/* --------------------------------------------------------------
   Durum renkleri

   Renkler artik SCSS'te DEGIL, donuslers tablosunda: durum ekleyen
   kullanici rengini de seciyor ve deger her olaya inline geliyor
   (FullCalendar'a backgroundColor/textColor, tepsi kartina style).
   Burada yalnizca "renk secilmemis" hali tanimli — cozulemeyen ya
   da renksiz durum notr yuzeye duser.

   Zemin uzerindeki yazi rengini de sunucu hesapliyor (bkz.
   Donusler::yaziRengi): renk kullanicinin elinde oldugu icin
   "renkli zeminde koyu yazi" kurali tek basina yetmiyordu.
   -------------------------------------------------------------- */
.ajanda-durum-yok {
  background-color: #212a37 !important;
  border-color: #3d444d !important;
  color: #e6edf3 !important;
}

.ajanda-gecikmis {
  box-shadow: inset 3px 0 0 0 #e05263;
}

.fc-event {
  border-radius: 6px;
  padding: 3px 5px 3px 8px;
  font-size: 11.5px;
  cursor: pointer;
  text-align: left;
}

/* --------------------------------------------------------------
   Takvim kutucugunun ici

   Saat + baslik ust satirda; not varsa altinda kirpilmis onizleme.
   Not sinira takildiysa "Devamını Gör" satiri cikar — ogenin tamami
   zaten tiklanabilir oldugu icin ayri baglanti verilmiyor.
   -------------------------------------------------------------- */
.ajanda-olay-ust {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  text-align: left;
}

.ajanda-olay-saat {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  opacity: 0.75;
  flex: none;
}

.ajanda-olay-baslik {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ajanda-olay-not {
  font-size: 10.5px;
  line-height: 1.35;
  opacity: 0.85;
  margin-top: 1px;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ajanda-olay-devam {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.7;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  text-align: left;
}

.fc-daygrid-event.ajanda-olay,
.fc-daygrid-event.ajanda-olay .fc-event-main {
  white-space: normal;
}

.fc-event.ajanda-gecikmis {
  padding-left: 11px;
}

/* --------------------------------------------------------------
   Yukseklik davranisi

   JS yalnizca .ajanda-satir'a piksel bir boy verir. Geri kalani
   burada: iki kolon da satiri doldurur, kolon icindeki kart ve takvim
   de kolonu. Excel dugmesi sabit boyda oldugu icin kart kalan yeri
   alir — iki sutun kendiliginden ayni yerde biter, hizalamak icin
   olcum yapmaya gerek kalmaz.
   -------------------------------------------------------------- */
.ajanda-satir > [class*=col-] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

#ajandaTakvim {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.ajanda-satir .card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 0;
}

.ajanda-satir .card-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#ajandaTepsi {
  flex: 1;
  min-height: 0;
  container: tepsi/inline-size;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #3d444d transparent;
}
#ajandaTepsi::-webkit-scrollbar {
  width: 8px;
}
#ajandaTepsi::-webkit-scrollbar-track {
  background: transparent;
}
#ajandaTepsi::-webkit-scrollbar-thumb {
  background: #3d444d;
  border-radius: 999px;
}
#ajandaTepsi::-webkit-scrollbar-thumb:hover {
  background: rgb(32.7621483376%, 36.5217391304%, 41.3554987212%);
}

@media (max-width: 991px) {
  .ajanda-satir {
    height: auto !important;
  }
  .ajanda-satir > [class*=col-],
  .ajanda-satir .card {
    display: block;
    height: auto;
  }
  .ajanda-satir .card {
    margin-bottom: 30px;
  }
  #ajandaTakvim {
    height: 520px;
  }
  #ajandaTepsi {
    max-height: 520px;
  }
}
/* --------------------------------------------------------------
   Calisma tepsisi
   -------------------------------------------------------------- */
.ajanda-grup {
  margin-bottom: 16px;
}
.ajanda-grup:last-child {
  margin-bottom: 0;
}

.ajanda-grup-baslik {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #828b96;
  margin: 0 0 7px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ajanda-sayi {
  background: #212a37;
  border: 1px solid #3d444d;
  border-radius: 999px;
  padding: 0 6px;
  font-size: 10px;
  color: #9198a1;
}

.ajanda-fazla {
  margin-left: auto;
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  color: #828b96;
}

/* --------------------------------------------------------------
   Tepsi karti

   Yatay bosluk kartin KENDISINDE degil ic satirlarinda: ad / telefon
   / e-posta seridi kartin iki kenarina da yaslanip tam genislikte
   durabilsin diye.
   -------------------------------------------------------------- */
.ajanda-kart {
  position: relative;
  border-radius: 6px;
  padding: 7px 0;
  margin-bottom: 5px;
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-align: left;
  overflow: hidden;
}
.ajanda-kart:active {
  cursor: grabbing;
}
.ajanda-kart.ajanda-gecikmis {
  box-shadow: none;
}
.ajanda-kart.ajanda-gecikmis::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: #e05263;
  z-index: 1;
}

.ajanda-kart-tarih,
.ajanda-kart-not {
  padding-left: 11px;
  padding-right: 9px;
}

/* Ust satir: tarih, saat ve gun ibaresi solda BITISIK durur; ekleyen
   kullanicinin rozeti sagda acilan bosluga oturur. Rozet onceden
   kartin altinda ayri bir satir harciyordu. */
.ajanda-kart-tarih {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  opacity: 0.85;
  min-width: 0;
  overflow: hidden;
}

.ajanda-tarih-gun {
  font-weight: 700;
  flex: none;
}

.ajanda-tarihsiz {
  font-weight: 600;
  opacity: 0.75;
}

.ajanda-saat {
  font-variant-numeric: tabular-nums;
  flex: none;
}

.ajanda-ibare {
  font-style: italic;
  flex: none;
}

/* --------------------------------------------------------------
   Ad / telefon / e-posta seridi

   Satiri tam uce bolen esit sutunlar. Zemin butonlarla ayni dil:
   kart renginden bir tik koyu. Sutun ayraci ayri bir renk DEGIL,
   kartin kendi zemini — seffaf kenarlik + `background-clip:
   padding-box` ile arkadaki kart rengi sizdiriliyor. Boylece ayrac
   hangi durum renginde olursa olsun dogru renkte cikiyor. Seridin
   sagi ve solu kenara dayanir; disa kenarlik ve radius yok.
   -------------------------------------------------------------- */
.ajanda-kart-kisi {
  display: flex;
  align-items: stretch;
  margin: 6px 0;
  font-size: 10px;
  line-height: 1.5;
}

.ajanda-alan {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 5px;
  color: inherit;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.22);
  background-clip: padding-box;
  border-left: 2px solid transparent;
}
.ajanda-alan:first-child {
  border-left: 0;
}
.ajanda-alan i {
  flex: none;
  font-size: 11px;
  opacity: 0.75;
}

.ajanda-alan-metin {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ajanda-alan-bos {
  opacity: 0.45;
}

a.ajanda-alan:hover,
a.ajanda-alan:focus {
  background: rgba(0, 0, 0, 0.38);
  color: inherit;
  text-decoration: none;
}

.ajanda-tel .ajanda-alan-metin {
  font-variant-numeric: tabular-nums;
}

/* Serit daraldikca iki asamada teslim olur:

     1. 280px alti: uc sutun ic ice gecmeye baslar, E-POSTA dusurulur — zaten
        en cok kirpilan ve en az aranan alan o. Ad ve telefon tam
        genislikte kalir.
     2. 190px alti: ikisi de sigmiyor, alan basina bir satir; e-posta geri gelir,
        artik yatay yer sorunu yok.

   Olcu ekranin degil TEPSININ genisligi: tepsi genis ekranda dar bir
   sutundur, dar ekranda tam genislige acilir — media query tam
   tersini yapardi. */
@container tepsi (max-width: 280px) {
  .ajanda-alan.ajanda-eposta {
    display: none;
  }
}
@container tepsi (max-width: 190px) {
  .ajanda-kart-kisi {
    flex-direction: column;
  }
  .ajanda-alan {
    border-left: 0;
    border-top: 2px solid transparent;
  }
  .ajanda-alan:first-child {
    border-top: 0;
  }
  .ajanda-alan.ajanda-eposta {
    display: flex;
  }
}
/* --------------------------------------------------------------
   Not onizlemesi

   Takvim kutucugundakiyle ayni is, burada biraz daha uzun. Sonundaki
   goz ikonlu "Detaylar" eki kartin tiklanabilir oldugunu duyurur;
   ayri baglanti verilmiyor, kartin tamami zaten modali aciyor.
   -------------------------------------------------------------- */
.ajanda-kart-not {
  padding-top: 10px;
  font-size: 10.5px;
  line-height: 1.4;
  opacity: 0.85;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ajanda-detay {
  font-weight: 600;
  white-space: nowrap;
}
.ajanda-detay i {
  font-size: 11px;
}

.ajanda-sahip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 1px 8px 1px 2px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  font-size: 10px;
  line-height: 1.6;
}

.ajanda-sahip-harf {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  font-size: 8px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ajanda-sahip-ad {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 991px) {
  .ajanda-kart {
    cursor: default;
  }
}
/* --------------------------------------------------------------
   Musteri karti

   Hatirlatma modalinda bir kisi secildiginde soldan giren salt
   okunur ozet panel. Bootstrap 4'te offcanvas bileseni yok; panel
   modalin kardesi olarak duruyor ve konumu iki kirilimda degisiyor:

     >= 1600px : modal dialogunun (1140px) SOLUNDAKI bos alana oturur,
                 hicbir seyi ortmez — istenen "yan yana" gorunum.
     <  1600px : soldan kayip modalin UZERINE gelir; dar ekranda yan
                 yana sigdirmaya calismak ikisini de okunmaz yapardi.

   Ekstra genis modal 1140px oldugu icin yan panel ancak genis masaustu
   ekraninda yanina sigar; daha dar ekranda soldan acilan panel olarak kalir.
   -------------------------------------------------------------- */
.ajanda-kisi-karti {
  position: fixed;
  top: 1.75rem;
  left: 0;
  width: 320px;
  max-width: 88vw;
  max-height: calc(100vh - 3.5rem);
  z-index: 1055;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgb(12.7352941176%, 16.3739495798%, 21.2254901961%);
  border: 1px solid #3d444d;
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-24px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.ajanda-kisi-karti.acik {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (min-width: 1600px) {
  .ajanda-kisi-karti {
    left: auto;
    right: calc(50% + 570px + 18px);
    transform: translateX(-16px);
  }
  .ajanda-kisi-karti.acik {
    transform: none;
  }
}
.ajanda-modal-dialog {
  max-width: 1140px;
}

.ajanda-kisi-ozet {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #3d444d;
  border-radius: 6px;
  background: #212a37;
  color: #e6edf3;
}
.ajanda-kisi-ozet[hidden] {
  display: none;
}
.ajanda-kisi-ozet > i {
  color: #3d8cdb;
  font-size: 20px;
}
.ajanda-kisi-ozet > span {
  font-weight: 600;
}
.ajanda-kisi-ozet .btn-link {
  margin-left: auto;
  color: #3d8cdb;
  font-weight: 600;
}
.ajanda-kisi-ozet .btn-link:hover, .ajanda-kisi-ozet .btn-link:focus {
  color: rgb(44.1650468883%, 66.9019607843%, 89.6388746803%);
}

.ajanda-konum-harita {
  height: 380px;
  border: 1px solid #3d444d;
  border-radius: 6px;
  background: #151b23;
}

.ajanda-konum-modal {
  z-index: 1070;
}

.ajanda-konum-ozeti {
  margin-top: 10px;
  color: #e6edf3;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  .ajanda-modal-dialog {
    max-width: none;
  }
  .ajanda-konum-harita {
    height: 280px;
  }
}
.ajanda-kisi-basi {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 12px;
  border-bottom: 1px solid #3d444d;
}

.ajanda-kisi-kimlik {
  min-width: 0;
}

.ajanda-kisi-etiket {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #828b96;
}

.ajanda-kisi-ad {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #e6edf3;
  line-height: 1.3;
}

.ajanda-kisi-kapat {
  margin-left: auto;
  flex: none;
  border: 0;
  background: none;
  color: #828b96;
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}
.ajanda-kisi-kapat:hover {
  color: #e6edf3;
}

.ajanda-kisi-govde {
  padding: 10px 12px 12px;
  overflow-y: auto;
  font-size: 12px;
}

.ajanda-kisi-rozetler {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}
.ajanda-kisi-rozetler span {
  background: #212a37;
  border: 1px solid #3d444d;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10px;
  color: #9198a1;
}

/* Satir duzeni: ikon | etiket | deger. Etiket sabit genislikte ki
   degerler hizali bir sutun olustursun; uzun adres ve aciklama
   kendi icinde sarar. */
.ajanda-kisi-satir {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 0;
  border-top: 1px solid rgba(61, 68, 77, 0.55);
  line-height: 1.45;
}
.ajanda-kisi-satir:first-child {
  border-top: 0;
  padding-top: 0;
}
.ajanda-kisi-satir i {
  flex: none;
  width: 13px;
  font-size: 13px;
  color: #828b96;
}

.ajanda-kisi-etiketi {
  flex: none;
  width: 62px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #828b96;
}

.ajanda-kisi-deger {
  min-width: 0;
  flex: 1;
  word-break: break-word;
  color: #e6edf3;
}
.ajanda-kisi-deger a {
  color: #3d8cdb;
  text-decoration: none;
}
.ajanda-kisi-deger a:hover {
  text-decoration: underline;
}

.ajanda-kisi-bos {
  margin: 0;
  color: #828b96;
  font-size: 11.5px;
}

.ajanda-kisi-baglanti {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #3d8cdb;
  text-decoration: none;
}
.ajanda-kisi-baglanti:hover {
  color: #3d8cdb;
  text-decoration: underline;
}

/* --------------------------------------------------------------
   Hatirlatma cizelgesi (musteri kartindaki akordiyon)

   "Bu musteriyle gecmiste ne konusuldu, ileride ne bekliyor"
   sorusunu kart icinde yanitlar. Kapali baslar: kart ozet olmayi
   surdursun, ayrinti isteyen acsin.
   -------------------------------------------------------------- */
.ajanda-akordiyon {
  margin-top: 12px;
  border-top: 1px solid #3d444d;
}

.ajanda-bolum {
  border-bottom: 1px solid #3d444d;
}

.ajanda-bolum-baslik {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 7px 0;
  border: 0;
  background: none;
  color: #e6edf3;
  font-size: 11.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.ajanda-bolum-baslik i {
  flex: none;
  font-size: 15px;
  color: #828b96;
  transition: transform 0.15s ease;
}
.ajanda-bolum-baslik:hover i {
  color: #e6edf3;
}

.ajanda-bolum-govde {
  display: none;
  padding-bottom: 8px;
}

.ajanda-bolum.acik > .ajanda-bolum-baslik i {
  transform: rotate(90deg);
}
.ajanda-bolum.acik > .ajanda-bolum-govde {
  display: block;
}

/* Tablo: Tarih | Durum ust satirda, not ikisinin ALTINDA tam
   genislikte. Ucuncu bir sutun bu genislikte okunmazdi. */
.ajanda-cizelge {
  width: 100%;
  font-size: 11px;
  border-collapse: collapse;
}
.ajanda-cizelge th {
  padding: 0 0 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #828b96;
  border-bottom: 1px solid #3d444d;
}
.ajanda-cizelge th:last-child {
  text-align: right;
}

.ajanda-cizelge-ust td {
  padding: 5px 0 0;
  border-top: 1px solid rgba(61, 68, 77, 0.5);
  vertical-align: baseline;
}
.ajanda-cizelge-ust td:first-child {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 600;
}
.ajanda-cizelge-ust td:last-child {
  color: #9198a1;
  text-align: right;
}

.ajanda-cizelge tbody tr:first-child td {
  border-top: 0;
}

.ajanda-cizelge-not td {
  padding: 2px 0 5px;
  color: #828b96;
  font-size: 10.5px;
  line-height: 1.4;
  text-align: left;
  word-break: break-word;
}

.ajanda-cizelge-fazla td {
  padding: 6px 0 0;
  text-align: center;
  font-style: italic;
  font-size: 10.5px;
}
.ajanda-cizelge-fazla td a {
  color: #3d8cdb;
  text-decoration: none;
}
.ajanda-cizelge-fazla td a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------
   Tepside gizlenmis kayit

   Kayit tepsiden duser ama takvimde durur: "bu gun bir sey vardi
   ama is olarak kapandi" bilgisi kaybolmasin. Soluk + capraz tarama
   ikisini birden soyler; renk hala durumu anlatir.
   -------------------------------------------------------------- */
.fc-event.ajanda-gizli {
  position: relative;
  opacity: 0.55;
}
.fc-event.ajanda-gizli::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(0, 0, 0, 0.28) 4px 8px);
}

.fc .fc-list-event.ajanda-gizli {
  opacity: 0.55;
}
.fc .fc-list-event.ajanda-gizli .fc-list-event-title {
  text-decoration: line-through;
}

/* --------------------------------------------------------------
   Kart eylem menusu (uc nokta)

   Menu BODY'ye tasiniyor ve `position: fixed` ile konumlaniyor:
   tepsi kendi icinde kaydiriyor (overflow) ve kart `overflow:
   hidden` tasiyor — kart icinde acilan bir menu kirpilirdi.
   Tek bir menu ogesi var, hangi karta aitse ona tasiniyor.
   -------------------------------------------------------------- */
.ajanda-kart-sag {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  min-width: 0;
}

.ajanda-menu-dugme {
  flex: none;
  padding: 0 3px;
  border: 0;
  background: none;
  color: inherit;
  opacity: 0.7;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.ajanda-menu-dugme:hover {
  opacity: 1;
}

.ajanda-kart-menu {
  position: fixed;
  z-index: 1060;
  min-width: 168px;
  padding: 4px;
  background: rgb(12.7352941176%, 16.3739495798%, 21.2254901961%);
  border: 1px solid #3d444d;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  display: none;
}
.ajanda-kart-menu.acik {
  display: block;
}
.ajanda-kart-menu button,
.ajanda-kart-menu a {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 9px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: #e6edf3;
  font-size: 12px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.ajanda-kart-menu button:hover,
.ajanda-kart-menu a:hover {
  background: #212a37;
  color: #e6edf3;
}
.ajanda-kart-menu button i,
.ajanda-kart-menu a i {
  flex: none;
  width: 14px;
  font-size: 14px;
  color: #828b96;
}
.ajanda-kart-menu .ajanda-menu-sil {
  color: #e05263;
}
.ajanda-kart-menu .ajanda-menu-sil i {
  color: #e05263;
}

.ajanda-menu-ayirac {
  height: 1px;
  margin: 4px 2px;
  background: #3d444d;
}

/* Donus tanimlama ekranindaki renk alani. */
.donus-renk-ornek {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  border-radius: 3px;
  border: 1px solid #3d444d;
  vertical-align: -2px;
}

.donus-renk-secici {
  width: 56px;
  flex: none;
  padding: 3px;
  cursor: pointer;
}

/* --------------------------------------------------------------
   Tumunu Excel'e aktar

   Tepsi kartinin USTUNDE, karttan bagimsiz ve kolon genisliginde.
   Marka rengi (Excel yesili) bilerek palet disinda: dugme bir dis
   bicimi temsil ediyor, temanin vurgu rengiyle karistirilmamali.
   Zemin koyu oldugu icin uzerine beyaz yazi geliyor — temanin
   "renkli zeminde koyu yazi" kurali acik vurgu renkleri icindi.
   -------------------------------------------------------------- */
.btn-excel {
  min-height: 34px;
  padding-top: 0;
  padding-bottom: 0;
  background-color: #217346;
  border-color: #217346;
  color: #fff;
  font-weight: 600;
}
.btn-excel:hover, .btn-excel:focus {
  background-color: rgb(15.6168521463%, 54.42236354%, 33.1266560678%);
  border-color: rgb(15.6168521463%, 54.42236354%, 33.1266560678%);
  color: #fff;
}
.btn-excel:focus {
  box-shadow: 0 0 0 2px rgba(33, 115, 70, 0.45);
}
.btn-excel i {
  margin-right: 5px;
  font-size: 15px;
  vertical-align: -1px;
}

.ajanda-disa-aktar {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------
   Tepsi suzgec cubugu

   Solda zaman dilimi (segment gorunumlu uc dugme), sagda durum
   suzgeci acan ikon. Ikisi de istemci tarafinda calisiyor.
   -------------------------------------------------------------- */
.ajanda-tepsi-arac {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  position: relative;
}

.ajanda-zaman {
  display: flex;
  flex: 1;
  min-width: 0;
}

.ajanda-toggle {
  flex: 1 1 0;
  min-width: 0;
  height: 26px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 0;
  border: 1px solid #3d444d;
  border-left-width: 0;
  background: #212a37;
  color: #828b96;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
}
.ajanda-toggle input {
  flex: none;
  width: 11px;
  height: 11px;
  margin: 0;
  cursor: pointer;
}
.ajanda-toggle span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ajanda-toggle:first-child {
  border-left-width: 1px;
  border-radius: 6px 0 0 6px;
}
.ajanda-toggle:last-child {
  border-radius: 0 6px 6px 0;
}
.ajanda-toggle:hover {
  color: #e6edf3;
}
.ajanda-toggle.acik {
  background: #3d8cdb;
  border-color: #3d8cdb;
  color: #010409;
}
.ajanda-toggle.acik + .ajanda-toggle.acik {
  border-left-color: rgba(0, 0, 0, 0.25);
  border-left-width: 1px;
}

.ajanda-suzgec-dugme {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #3d444d;
  border-radius: 6px;
  background: #212a37;
  color: #9198a1;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.ajanda-suzgec-dugme:hover {
  color: #e6edf3;
}
.ajanda-suzgec-dugme[aria-expanded=true] {
  background: #3d8cdb;
  border-color: #3d8cdb;
  color: #010409;
}

/* Durum menusu.

   Tepsi kendi icinde kaydiriyor ama bu cubuk kaydirma kabinin DISINDA
   (kart govdesinde) duruyor; normal bir mutlak konumlu menu kirpilmadan
   acilabiliyor. Kart eylem menusundeki fixed hesaplamaya gerek yok. */
.ajanda-suzgec-menu {
  display: none;
  position: absolute;
  top: calc(26px + 4px);
  right: 0;
  z-index: 20;
  min-width: 190px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
  background: rgb(12.7352941176%, 16.3739495798%, 21.2254901961%);
  border: 1px solid #3d444d;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.ajanda-suzgec-menu.acik {
  display: block;
}

.ajanda-suzgec-satir {
  display: grid;
  grid-template-columns: 18px auto 1fr;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 5px 6px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 400;
  cursor: pointer;
}
.ajanda-suzgec-satir:hover {
  background: #212a37;
}
.ajanda-suzgec-satir input {
  grid-column: 1;
  margin: 0;
  cursor: pointer;
}

.ajanda-suzgec-baslik {
  grid-template-columns: 18px 1fr;
  margin-bottom: 4px;
  padding-bottom: 7px;
  border-radius: 0;
  border-bottom: 1px solid #3d444d;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #828b96;
}
.ajanda-suzgec-baslik:hover {
  background: none;
}

.ajanda-suzgec-nokta {
  grid-column: 2;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid #3d444d;
}

.ajanda-suzgec-ad {
  grid-column: 3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dar tepside uc etiket + onay kutusu tek satira sigmiyor ve yazilar
   "Gelec…" diye kirpiliyordu. Kirpmak yerine cubuk iki satira
   ayriliyor: suzgec ikonu ustte saga, zaman kutulari altta tam
   genislikte. Olcu yine tepsinin kendi genisligi.

   Esik olculerek bulundu: kutu 11 + bosluk 4 + en uzun etiket ~39 +
   dolgu 10 = 64px/dugme, ucu 192, ikon ve arasindaki bosluk 32 —
   toplam ~224px. */
.ajanda-tepsi-govde {
  container: tepsiArac/inline-size;
}

@container tepsiArac (max-width: 230px) {
  .ajanda-tepsi-arac {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .ajanda-durum-suzgec {
    order: 1;
    margin-left: auto;
  }
  .ajanda-zaman {
    order: 2;
    flex: 1 1 100%;
  }
  .ajanda-toggle {
    padding: 0 2px;
    gap: 2px;
  }
}
/* --------------------------------------------------------------
   Personel etiketleme (@)

   Not alani duz bir <textarea> DEGIL, contenteditable bir div:
   etiketin kutunun ICINDE gorunmesi gerekiyordu. Onceki denemede
   textarea'nin arkasina ayna bir katman konmustu; iki kutu birebir
   hizalansa bile imlec farkli yazi olculerinde geriden geliyor ve
   dar ekranda kayiyordu.
   -------------------------------------------------------------- */
.ajanda-not-sarmal {
  position: relative;
}

.ajanda-not-alan {
  min-height: 180px;
  max-height: 360px;
  overflow-y: auto;
  padding: 10px 72px 10px 12px;
  border: 1px solid #3d444d;
  border-radius: 4px;
  background: #212a37;
  color: #e6edf3;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  cursor: text;
}
.ajanda-not-alan:focus {
  border-color: #3d8cdb;
  box-shadow: 0 0 0 2px rgba(61, 140, 219, 0.25);
  outline: none;
}
.ajanda-not-alan:empty::before {
  content: attr(data-bos);
  color: #828b96;
  pointer-events: none;
}
.ajanda-not-alan.salt-okunur {
  background: #151b23;
  color: #9198a1;
  cursor: default;
}

/* Etiket ATOMIK: span contenteditable="false" tasiyor, tarayici onu
   tek bir oge gibi ele aliyor. Ortasina yazilamaz, bolunemez,
   backspace tamamini tek seferde siler - metin ile etiket listesi
   bu yuzden ayrisamiyor. */
.ajanda-etiket {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0 1px;
  padding: 1px 4px 1px 7px;
  border-radius: 3px;
  background: #f0e3c8;
  color: #1b1b1b;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.ajanda-etiket-sil {
  border: 0;
  padding: 0 2px;
  border-radius: 2px;
  background: none;
  color: #1b1b1b;
  font-size: 14px;
  line-height: 1;
  opacity: 0.65;
  cursor: pointer;
}
.ajanda-etiket-sil:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.12);
}

.ajanda-konum-etiketi {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: min(100%, 360px);
  margin: 0 1px;
  padding: 1px 4px 1px 7px;
  border: 1px solid rgba(61, 140, 219, 0.5);
  border-radius: 3px;
  background: rgba(61, 140, 219, 0.16);
  color: rgb(64.4085251492%, 78.9019607843%, 93.3953964194%);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  vertical-align: baseline;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ajanda-konum-etiketi > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ajanda-konum-etiketi:hover, .ajanda-konum-etiketi:focus {
  border-color: #3d8cdb;
  background: rgba(61, 140, 219, 0.26);
  outline: none;
}

.ajanda-konum-etiket-sil {
  flex: none;
  border: 0;
  padding: 0 2px;
  border-radius: 2px;
  background: none;
  color: inherit;
  font-size: 14px;
  line-height: 1;
  opacity: 0.72;
  cursor: pointer;
}
.ajanda-konum-etiket-sil:hover {
  opacity: 1;
  background: rgba(61, 140, 219, 0.2);
}

.ajanda-not-alan.salt-okunur .ajanda-konum-etiket-sil {
  display: none;
}

.ajanda-not-araclar {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 4px;
}

.ajanda-etiket-dugme {
  position: static;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: #212a37;
  color: #9198a1;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.ajanda-etiket-dugme:hover {
  background: #3d8cdb;
  color: #010409;
}

.ajanda-etiket-menu {
  display: none;
  position: absolute;
  z-index: 5;
  right: 8px;
  bottom: 40px;
  min-width: 200px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid #3d444d;
  border-radius: 6px;
  background: #151b23;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.ajanda-etiket-menu.acik {
  display: block;
}

.ajanda-etiket-secim {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: #e6edf3;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.ajanda-etiket-secim:hover {
  background: #212a37;
}

.ajanda-etiket-bos {
  padding: 8px 10px;
  color: #9198a1;
  font-size: 12px;
}

.ajanda-etiket-secim.secili {
  background: #3d8cdb;
  color: #010409;
}

.ajanda-etiket-pasif {
  float: right;
  font-size: 10px;
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ajanda-etiket-menu {
  right: auto;
  bottom: auto;
}

/* ==============
  Email
===================*/
.email-leftbar {
  width: 230px;
  float: left;
  background-color: #151b23;
  padding: 20px;
  border-radius: 5px;
}

.email-rightbar {
  margin-left: 260px;
}

.dot-online {
  position: absolute;
  left: 28px;
  font-size: 12px;
}

.chat-user-box p.user-title {
  font-size: 13px;
  color: #151b23;
  font-weight: 500;
}
.chat-user-box p {
  font-size: 12px;
}

@media (max-width: 767px) {
  .email-leftbar {
    float: none;
    width: 100%;
  }
  .email-rightbar {
    margin: 0;
  }
}
.mail-list a {
  display: block;
  color: rgb(62.2549019608%, 64.6568627451%, 67.7450980392%);
  font-size: 13px;
  line-height: 24px;
  padding: 5px;
}
.mail-list a.active {
  color: #e05263;
  font-weight: 500;
}

.message-list {
  display: block;
  padding-left: 0;
}
.message-list li {
  position: relative;
  display: block;
  height: 75px;
  line-height: 75px;
  cursor: default;
  transition-duration: 0.3s;
}
.message-list li a {
  color: #9198a1;
}
.message-list li:hover {
  background: rgb(12.7352941176%, 16.3739495798%, 21.2254901961%);
  transition-duration: 0.05s;
}
.message-list li .col-mail {
  float: left;
  position: relative;
}
.message-list li .col-mail-1 {
  width: 320px;
}
.message-list li .col-mail-1 .star-toggle,
.message-list li .col-mail-1 .checkbox-wrapper-mail,
.message-list li .col-mail-1 .dot {
  display: block;
  float: left;
}
.message-list li .col-mail-1 .dot {
  border: 4px solid transparent;
  border-radius: 100px;
  margin: 22px 26px 0;
  height: 0;
  width: 0;
  line-height: 0;
  font-size: 0;
}
.message-list li .col-mail-1 .checkbox-wrapper-mail {
  margin: 28px 10px 0 20px;
}
.message-list li .col-mail-1 .star-toggle {
  margin-top: 31px;
  font-size: 13px;
  margin-left: 5px;
}
.message-list li .col-mail-1 .title {
  position: absolute;
  left: 110px;
  right: 0;
  top: 8px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 0;
}
.message-list li .col-mail-2 {
  position: absolute;
  top: 0;
  left: 360px;
  right: 0;
  bottom: 0;
}
.message-list li .col-mail-2 .subject,
.message-list li .col-mail-2 .date {
  position: absolute;
  top: 0;
}
.message-list li .col-mail-2 .subject {
  left: 0;
  right: 200px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  top: 8px;
}
.message-list li .col-mail-2 .date {
  right: 0;
  width: 170px;
  padding-left: 70px;
}
.message-list li.active,
.message-list li.active:hover {
  box-shadow: inset 3px 0 0 #3d8cdb;
}
.message-list li.unread {
  background-color: rgb(12.7352941176%, 16.3739495798%, 21.2254901961%);
  font-weight: 500;
  color: #e6edf3;
}
.message-list li.unread a {
  color: #e6edf3;
  font-weight: 500;
}
.message-list .checkbox-wrapper-mail {
  cursor: pointer;
  height: 20px;
  width: 20px;
  position: relative;
  display: inline-block;
  box-shadow: inset 0 0 0 1px #828b96;
  border-radius: 1px;
}
.message-list .checkbox-wrapper-mail input {
  opacity: 0;
  cursor: pointer;
}
.message-list .checkbox-wrapper-mail input:checked ~ label {
  opacity: 1;
}
.message-list .checkbox-wrapper-mail label {
  position: absolute;
  height: 20px;
  width: 20px;
  left: 0;
  cursor: pointer;
  opacity: 0;
  margin-bottom: 0;
  transition-duration: 0.05s;
  top: 0;
}
.message-list .checkbox-wrapper-mail label:before {
  content: "\f12c";
  font-family: "Material Design Icons";
  top: 0;
  height: 20px;
  color: #e6edf3;
  width: 20px;
  position: absolute;
  margin-top: -27px;
  left: 4px;
  font-size: 13px;
}

.email-inbox {
  position: relative;
}
.email-inbox .form-control,
.email-inbox .form-control:focus {
  border: 1px solid #0d1117;
  font-size: 13px;
  height: 40px;
  padding-left: 34px;
  padding-right: 12px;
  margin-right: 16px;
  background: rgb(12.7352941176%, 16.3739495798%, 21.2254901961%);
  box-shadow: none;
  border: none;
  color: #9198a1;
}
.email-inbox button {
  position: absolute;
  top: 12px;
  left: 6px;
  display: block;
  color: #9198a1;
  font-size: 11px;
  border: none;
  background-color: transparent;
}

@media (max-width: 425px) {
  .title img {
    display: none;
  }
}
.email-img-overlay .email-overlay i {
  background: #3d8cdb;
  color: #ffffff;
  font-size: 20px;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  line-height: 40px;
  transition: all 0.5s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  left: 0;
  right: 0px;
  margin: 0 auto;
  opacity: 0;
}
.email-img-overlay:hover img {
  opacity: 0.2;
}
.email-img-overlay:hover .email-overlay i {
  opacity: 1;
}

@media (max-width: 375px) {
  .date {
    display: none;
  }
}
@media (max-width: 768px) {
  .mo-mb-2 {
    margin-bottom: 10px;
  }
  .mo-mt-2 {
    margin-top: 10px !important;
  }
  .ex-pages {
    padding: 24px 0px;
  }
  .btn-toolbar {
    margin-top: 15px;
  }
}
.home-btn {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 1;
}

.accountbg {
  background: url("../images/restaurant.png");
  position: absolute;
  background-position: center center;
  height: 100%;
  width: 100%;
  top: 0;
}

.wrapper-page {
  margin: 7.5% auto;
  width: 420px;
  position: relative;
}

@media (max-width: 767px) {
  .wrapper-page {
    width: 90%;
  }
}
.account-pages {
  margin: 10.5% auto;
  position: relative;
}

.comming-watch div {
  display: inline-block;
}
.comming-watch div .card {
  margin: 0px 15px 15px 15px;
}
.comming-watch div .card .countdown-num {
  font-weight: 600;
  color: #3d8cdb;
}
.comming-watch div span {
  width: 150px;
  display: block;
}
.comming-watch div span:first-child {
  height: 60px;
  font-weight: 300;
  font-size: 3em;
  line-height: 48px;
}
.comming-watch div span:last-child {
  padding-top: 14px;
  font-size: 0.9em;
}

.coming-soon-search-form input {
  padding: 15px 20px;
  width: 100%;
  color: #9198a1;
  border: 2px solid rgb(12.7352941176%, 16.3739495798%, 21.2254901961%);
  outline: none !important;
  padding-right: 180px;
  padding-left: 30px;
  border-radius: 30px;
  background: rgb(12.7352941176%, 16.3739495798%, 21.2254901961%);
}
.coming-soon-search-form button {
  position: absolute;
  top: 7px;
  right: 8px;
  outline: none !important;
  border-radius: 30px;
  padding: 9px 30px;
}
.coming-soon-search-form form {
  position: relative;
  max-width: 600px;
  margin: 0px auto;
}

.faq-box {
  border-left: 3px solid;
}

.error-bg {
  background: url("../images/error.png");
  position: absolute;
  background-position: center center;
  height: 100%;
  width: 100%;
  top: 0;
}

.error-page {
  text-transform: uppercase;
  background: repeating-linear-gradient(45deg, #3d8cdb, #3d8cdb 10px, #2bb673 10px, #2bb673 20px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 110px;
  line-height: 0.7;
  position: relative;
}

.maintenance-img img {
  max-width: 320px;
}

/* ==============
  Timeline
===================*/
.cd-container {
  width: 90%;
  max-width: 1170px;
  margin: 0 auto;
}

.main-timeline {
  overflow: hidden;
  position: relative;
}
.main-timeline:before {
  content: "";
  width: 3px;
  height: 100%;
  background: rgb(18.7352941176%, 24.0882352941%, 31.2254901961%);
  position: absolute;
  top: 0;
  left: 50%;
}
.main-timeline .timeline {
  padding-right: 30px;
  position: relative;
}
.main-timeline .timeline-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgb(18.7352941176%, 24.0882352941%, 31.2254901961%);
  border: 2px solid rgb(18.7352941176%, 24.0882352941%, 31.2254901961%);
  box-sizing: content-box;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: -4px;
}
.main-timeline .timeline-icon:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9198a1;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.main-timeline .year {
  display: inline-block;
  padding: 8px 20px;
  margin: 0;
  font-size: 14px;
  color: #ffffff;
  background: #3d8cdb;
  text-align: center;
  position: absolute;
  top: 50%;
  right: 35%;
  transform: translateY(-50%);
}
.main-timeline .year:before {
  content: "";
  border-right: 18px solid #3d8cdb;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  position: absolute;
  top: 0;
  left: -18px;
}
.main-timeline .timeline-content {
  width: 46.5%;
  padding: 43px 50px;
  margin: 0 20px 0 0;
  background: rgb(12.7352941176%, 16.3739495798%, 21.2254901961%);
  position: relative;
}
.main-timeline .timeline-content:after {
  content: "";
  border-left: 20px solid rgb(12.7352941176%, 16.3739495798%, 21.2254901961%);
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
}
.main-timeline .title {
  float: left;
  font-size: 18px;
  margin: 0 20px 20px 0;
}
.main-timeline .description {
  font-size: 14px;
  line-height: 24px;
  margin: 0;
  clear: both;
}

.main-timeline .timeline:before,
.main-timeline .timeline:after {
  content: "";
  display: block;
  width: 100%;
  clear: both;
}

.main-timeline .timeline:first-child:before,
.main-timeline .timeline:last-child:before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid rgb(18.7352941176%, 24.0882352941%, 31.2254901961%);
  background: #9198a1;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: -3px;
}

.main-timeline .timeline:last-child:before {
  top: auto;
  bottom: 0;
}
.main-timeline .timeline:nth-child(2n) {
  padding: 0 0 0 30px;
}
.main-timeline .timeline:nth-child(2n) .year {
  right: auto;
  left: 35%;
}
.main-timeline .timeline:nth-child(2n) .year:before {
  border: 18px solid transparent;
  border-right: none;
  border-left: 18px solid #3d8cdb;
  left: auto;
  right: -18px;
}
.main-timeline .timeline:nth-child(2n) .timeline-content {
  float: right;
  margin: 0 0 0 20px;
}
.main-timeline .timeline:nth-child(2n) .timeline-content:after {
  border-left: none;
  border-right: 20px solid rgb(12.7352941176%, 16.3739495798%, 21.2254901961%);
  right: auto;
  left: -20px;
}

@media only screen and (max-width: 1200px) {
  .main-timeline .year {
    right: 30%;
  }
  .main-timeline .timeline:nth-child(2n) .year {
    left: 30%;
  }
}
@media only screen and (max-width: 990px) {
  .main-timeline .year {
    right: 25%;
  }
  .main-timeline .timeline:nth-child(2n) .year {
    left: 25%;
  }
}
@media only screen and (max-width: 767px) {
  .main-timeline:before {
    left: 10px;
  }
  .main-timeline .timeline {
    padding: 0 0 0 30px;
    margin-bottom: 20px;
  }
  .main-timeline .timeline:last-child {
    margin-bottom: 0;
  }
  .main-timeline .timeline:first-child:before,
  .main-timeline .timeline:last-child:before {
    display: none;
  }
  .main-timeline .timeline-icon {
    margin: 0;
    position: absolute;
    top: 7px;
    left: 0;
  }
  .main-timeline .year,
  .main-timeline .timeline:nth-child(2n) .year {
    display: block;
    font-weight: bold;
    margin: 0 0 32px 30px;
    z-index: 1;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
  }
  .main-timeline .timeline:nth-child(2n) .year:before {
    border-left: none;
    border-right: 18px solid #3d8cdb;
    right: auto;
    left: -18px;
  }
  .main-timeline .timeline-content {
    padding: 20px;
  }
  .main-timeline .timeline-content,
  .main-timeline .timeline:nth-child(2n) .timeline-content {
    width: auto;
    float: none;
    margin: 0 0 0 30px;
  }
  .main-timeline .timeline-content:after,
  .main-timeline .timeline:nth-child(2n) .timeline-content:after {
    border: none;
    border-bottom: 20px solidlighten(#151b23, 6%);
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    top: -20px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}
@media only screen and (max-width: 480px) {
  .main-timeline .title {
    float: none;
  }
  .main-timeline .year,
  .main-timeline .timeline:nth-child(2n) .year {
    margin-left: 20px;
  }
  .main-timeline .timeline-content,
  .main-timeline .timeline:nth-child(2n) .timeline-content {
    margin-left: 10px;
  }
}
.pricing-box {
  padding: 30px;
  position: relative;
}
.pricing-box .pricing-icon i {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
  font-size: 24px;
  line-height: 56px;
  top: -25px;
  position: absolute;
  display: inline-block;
  margin: 0 auto;
  left: 0px;
  right: 0px;
}
.pricing-box .pricing-features {
  padding-left: 20px;
}
.pricing-box .pricing-plan sup {
  font-size: 26px;
  position: relative;
  top: -18px;
}
.pricing-box .pricing-border {
  border-top: 1px solid rgb(14.2352941176%, 18.3025210084%, 23.7254901961%);
  margin: 0 auto;
  border-bottom: 1px solid rgb(14.2352941176%, 18.3025210084%, 23.7254901961%);
  padding: 5px;
}
.pricing-box .pricing-features {
  padding-left: 20px;
}