/********** Template CSS **********/
:root {
  --primary: #f5b001;
  --light: #F3F6F9;
  --dark: #191C24;
  --indigo: #4338ca;
}


label:has(+ input[required])::after,
label:has(+ select[required])::after,
label:has(+ textarea[required])::after,
/* label:has(input[required])::after, */
label:has(+ div :is(input[required], input[aria-required="true"]))::after,
label.required-label::after {
  content: " *";
  color: red;
}

/*** Spinner ***/
.logo-spinner-container {
  position: fixed;
  /* Sabit pozisyon */
  top: 50%;
  /* Üstten yüzde 50 */
  left: 50%;
  /* Soldan yüzde 50 */
  transform: translate(-50%, -50%);
  /* Kendi ekseninde yüzde 50 sola ve yukarı taşı */
  z-index: 9999;
  /* Diğer elementlerin üzerinde görünmesini sağlar */
}

.logo-spinner {
  width: 100px;
  height: 100px;
  animation: spin 2s linear infinite;
}

.PhoneInputInput {
  outline: none;
  border: none;
}

.PhoneInputInput:focus {
  outline: none;
  border: none;
}

.PhoneInputInput:hover {
  box-shadow: none;
  outline: none;
  border: none;
}

.PhoneInputInput:invalid {
  border-bottom: none;
}

.phone-input-div {
  border: 1px solid #ced4da;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.phone-input-div.required-empty {
  border-bottom: 3px solid rgb(143, 1, 1);
}

.phone-input-div.not-required-empty {
  border-bottom: 3px solid #86888A;
}

.phone-input-div:has(.PhoneInput--focus) {
  border-color: rgb(248, 215, 132);
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
}

.phone-input-div:hover {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}



/*** Button ***/
.btn {
  transition: .5s;
}

.btn.btn-primary {
  color: #FFFFFF;
}

.btn-square {
  width: 38px;
  height: 38px;
}

.btn-sm-square {
  width: 32px;
  height: 32px;
}

.btn-lg-square {
  width: 48px;
  height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: normal;
  border-radius: 50px;
}


/*** Layout ***/
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 250px;
  height: 100vh;
  overflow-y: auto;
  background: var(--light);
  transition: 0.5s;
  z-index: 999;
}

.content {
  margin-left: 250px;
  min-height: 100vh;
  background: #FFFFFF;
  transition: 0.5s;
}


.card-img-top {
  width: 100%;
  height: 14vw;
  object-fit: cover;
}

.customTooltip {
  max-width: 450px;
}

.custom-stacked-bar-chart {
  height: 330px;
}

@media (min-width: 992px) {
  .sidebar {
    margin-left: 0;
  }

  .sidebar.open {
    margin-left: -250px;
  }

  .content {
    width: calc(100% - 250px);
  }

  .content.open {
    width: 100%;
    margin-left: 0;
  }


}

#cart_draggable::-webkit-scrollbar {
  display: none;
}

#cart_draggable {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

@media (max-width: 991.98px) {
  .sidebar {
    margin-left: -250px;
  }

  .card-img-top {
    width: 100%;
    height: 50vw;
    object-fit: cover;
  }


  .sidebar.open {
    margin-left: 0;
  }

  .content {
    width: 100%;
    margin-left: 0;
  }

  .content.open>.navbar>.sidebar-container {
    order: 2;
    margin-left: 10px;
  }

  .content.open>.navbar>.navbar-nav {
    width: 0;
    overflow: hidden;
  }



  @media (max-width: 768px) {
    .col-md-5th {
      flex: 0 0 50%;
      max-width: 50%;
    }

    .exp-main-date-container {
      width: 100%;
    }

    .w-md-100 {
      width: 50% !important;
    }

    .exp-main-date {
      width: 100%;
      justify-content: space-around;
    }

    .exp-main-filters-container {
      width: 100%;
      justify-content: center;
    }

    .profile-information-container {
      justify-content: center;
    }

    .profile-information-container h2,
    .profile-information-container h4 {
      text-align: center;
    }

    .profile-roles-container {
      width: 100%;
    }

    .approval-group-rows-container {
      justify-content: center;
    }

    .customTooltip {
      max-width: 300px;
    }


  }

  @media (max-width: 430px) {
    .nav-link-name {
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 125px;
    }

  }


  @media (min-width: 992px) {
    .sidebar {
      margin-left: 0;
    }

    .sidebar.open {
      margin-left: -250px;
    }

    .content {
      width: calc(100% - 250px);
    }

    .content.open {
      width: 100%;
      margin-left: 0;
    }

  }

}

@media (min-width: 768px) {
  .col-md-5th {
    flex: 0 0 20% !important;
    max-width: 20% !important;
  }

  .ps-md-6 {
    padding-left: 4rem !important;
  }

  .ps-md-7 {
    padding-left: 5rem !important;
  }
}

/*** Navbar ***/
.sidebar .navbar .navbar-nav .nav-link {
  padding: 7px 20px;
  color: var(--dark);
  font-weight: 500;
  border-left: 3px solid var(--light);
  border-radius: 0 30px 30px 0;
  outline: none;
}

.sidebar .navbar .navbar-nav .nav-link:hover,
.sidebar .navbar .navbar-nav .nav-link.active {
  color: var(--primary);
  background: #FFFFFF;
  border-color: var(--primary);
}

.sidebar .navbar .navbar-nav .nav-link i {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 40px;
}

.sidebar .navbar .navbar-nav .nav-link:hover i,
.sidebar .navbar .navbar-nav .nav-link.active i {
  background: var(--light);
}

/* New Sidebar */
.sidebar .navbar .navbar-nav .new-nav-link {
  padding: 7px 5px;
  color: var(--dark);
  font-weight: 500;
  outline: none;
  border-left: none;
  border-radius: 10px;
  margin-top: 10px;
}

.sidebar .navbar .navbar-nav .new-nav-link:hover,
.sidebar .navbar .navbar-nav .new-nav-link.active {
  color: var(--indigo);
  background: #eef2ff;
}

.sidebar .navbar .navbar-nav .new-nav-link i {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sidebar .navbar .navbar-nav .new-nav-link:hover i,
.sidebar .navbar .navbar-nav .new-nav-link.active i {
  color: var(--indigo);
}

.content .navbar .navbar-nav .new-nav-link {
  margin-left: 25px;
  padding: 12px 0;
  color: var(--dark);
  outline: none;
}

.content .navbar .navbar-nav .new-nav-link:hover,
.content .navbar .navbar-nav .new-nav-link.active {
  color: var(--primary);
}

.content .navbar .sidebar-toggler {
  width: 40px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #383b3f;
  color: #fff;
}

.hover-effect:hover {
  background: #383b3f;
}

.content .navbar .sidebar-toggler:hover {
  width: 40px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #4D5154;
  color: #D3D3D4;
}

.sidebar-home-icon:hover {
  color: var(--indigo);
}

.sidebar .navbar .dropdown-toggle::after {
  position: absolute;
  top: 15px;
  right: 15px;
  border: none;
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  transition: .5s;
}

.sidebar .navbar .dropdown-toggle[aria-expanded=true]::after {
  transform: rotate(-180deg);
}

.sidebar .navbar .dropdown-item {
  padding-left: 25px;
  border-radius: 0 30px 30px 0;
}

.dropdown-item {
  font-weight: 600 !important;

}

.dropdown-item:hover {
  opacity: .85;
}

@keyframes slideIn {
  0% {
    transform: translateY(-1rem);
    opacity: 0;
  }

  100% {
    transform: translateY(0rem);
    opacity: 1;
  }
}

.delete-color {
  background-color: #d20000 !important;
}

.delete-color:hover {
  background-color: #C20000FF !important;
}

#UpdateReqForm .react-datepicker-wrapper {
  width: 100%;
}

.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
  animation-duration: 0.4s;
  animation-fill-mode: both;
}

.content .navbar .navbar-nav .nav-link {
  padding: 12px 0;
  color: var(--dark);
  outline: none;
}

.content .navbar .navbar-nav .nav-link:hover,
.content .navbar .navbar-nav .nav-link.active {
  color: var(--primary);
}

.content .navbar .navbar-nav .nav-link i {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 40px;
}

.w-fit {
  width: fit-content;
}

.sliding-text {
  display: inline-block;
  transition: transform 0.3s ease;

}

.sliding-text:hover {
  animation: slideText 5s linear infinite;
}

@keyframes slideText {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

.content .navbar .dropdown-toggle::after {
  margin-left: 6px;
  vertical-align: middle;
  border: none;
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  transition: .5s;
}

.content .navbar .dropdown-toggle[aria-expanded=true]::after {
  transform: rotate(-180deg);
}

@media (max-width: 575.98px) {

  .custom-modal {
    z-index: 777;
    max-width: 100%;
    min-height: 100%;
  }

}


/*** Date Picker ***/
.bootstrap-datetimepicker-widget.bottom {
  top: auto !important;
}

.bootstrap-datetimepicker-widget .table * {
  border-bottom-width: 0px;
}

.bootstrap-datetimepicker-widget .table th {
  font-weight: 500;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
  padding: 10px;
  border-radius: 2px;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
  background: var(--primary);
}

.bootstrap-datetimepicker-widget table td.today::before {
  border-bottom-color: var(--primary);
}


/*** Testimonial ***/
.progress .progress-bar {
  width: 0px;
  transition: 2s;

}


/*** Testimonial ***/
.testimonial-carousel .owl-dots {
  margin-top: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.testimonial-carousel .owl-dot {
  position: relative;
  display: inline-block;
  margin: 0 5px;
  width: 15px;
  height: 15px;
  border: 5px solid var(--primary);
  border-radius: 15px;
  transition: .5s;
}

.testimonial-carousel .owl-dot.active {
  background: var(--dark);
  border-color: var(--primary);
}

.login-wrapper {
  position: relative;
  overflow: hidden;
  background-color: white;
  z-index: 1;
  ;
}

.top-left-svg {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  /* Sol üst köşe etrafında ölçeklendir */
  /* transform: scale(3) scaleX(-1) scaleY(-1) translateX(-100%) translateY(-100%); */
  transform: scale(3) scaleX(1) scaleY(-1) translate(0, -100%);
  z-index: -1;
}



.bottom-right-svg {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: scale(3);
  transform-origin: bottom right;
  /* Sağ alt köşe etrafında ölçeklendir */

  transform: scale(3) scaleX(-1) translate(100%, 0%);
  z-index: -1;
}

.my-custom-background {
  background-color: rgba(36, 36, 36, 0.808);
  /* Arka plan rengini beyaz yapar */
  color: rgba(51, 51, 51, 0.808);
}

.my-custom-background-color {
  background-color: rgba(18, 18, 18, 0.808);
  /* Arka plan rengini beyaz yapar */
  color: rgba(19, 18, 18, 0.808);
}

.no-background {
  background-color: transparent;
}

.my-custom-column-max-heigth {
  height: 350px;
  overflow-y: auto;
}

.create-expense-form {
  min-height: 300px;
}

.custom-sidebar-nav-link {
  padding-left: 5px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0 30px 30px 0;
}

.custom-sidebar-nav-link i {
  background-color: rgba(255, 255, 255, 1);
}

.custom-sidebar-nav-link span {
  color: #000;
  /* Assuming you want the text dark */
}

.avatar {
  vertical-align: middle;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.comment-row:hover {
  pointer-events: none;
}

select:invalid {
  border-bottom: 3px solid rgb(143, 1, 1);
}

input:invalid {
  border-bottom: 3px solid rgb(143, 1, 1);
}

textarea:invalid {
  border-bottom: 3px solid rgb(143, 1, 1);
}

form input.form-control:not([required]):not([type="checkbox"]):not([aria-label="test"]):placeholder-shown,
form select.form-control:not([required]):placeholder-shown,
form textarea.form-control:not([required]):placeholder-shown {
  border-bottom: 3px solid #86888AFF !important;
}


input:hover {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
}

input+span {
  display: none;
}

.error-modal {
  z-index: 10000000 !important;
  position: fixed;
}

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

.white {
  color: white
}

.btn-help-cursor {
  cursor: help;
}

.help-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  /* veya tercihinize göre */
  height: 30px;
  /* veya tercihinize göre */
  border-radius: 50%;
  background-color: #22bb46;
  /* Bootstrap yeşil rengi */
  color: white;
  cursor: help;
  border: 3px solid #22bb46;

}

.help-circle:hover {
  background-color: #16da43;
  /* Hover durumunda daha koyu yeşil */
  border: 3px solid #16da43;

}

.apprv-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  /* veya tercihinize göre */
  height: 30px;
  /* veya tercihinize göre */
  border-radius: 50%;
  background-color: #616161;
  /* Bootstrap yeşil rengi */
  color: white;
  cursor: help;
  border: 3px solid #616161;
  /* Yeşil border */
  /* Soru işareti boyutu */
}

.apprv-circle:hover {
  background-color: #504e4e;
  /* Hover durumunda daha koyu yeşil */
  border: 3px solid #504e4e;

}

.multi-select {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  position: relative;
  width: 100%;
  user-select: none;
}

.multi-select .multi-select-header {
  border: 1px solid #dee2e6;
  padding: 7px 30px 7px 12px;
  overflow: hidden;
  gap: 7px;
  min-height: 45px;
}

.multi-select .multi-select-header::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23949ba3' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.1l-8-8 2.1-2.2 5.9 5.9 5.9-5.9 2.1 2.2z'/%3E%3C/svg%3E");
  height: 12px;
  width: 12px;
}

.multi-select .multi-select-header.multi-select-header-active {
  border-color: #c1c9d0;
}

.multi-select .multi-select-header.multi-select-header-active::after {
  transform: translateY(-50%) rotate(180deg);
}

.multi-select .multi-select-header.multi-select-header-active+.multi-select-options {
  display: flex;
}

.multi-select .multi-select-header .multi-select-header-placeholder {
  color: #65727e;
}

.multi-select .multi-select-header .multi-select-header-option {
  display: inline-flex;
  align-items: center;
  background-color: #f3f4f7;
  font-size: 14px;
  padding: 3px 8px;
  border-radius: 5px;
}

.multi-select .multi-select-header .multi-select-header-max {
  font-size: 14px;
  color: #65727e;
}

.multi-select .multi-select-options {
  display: none;
  box-sizing: border-box;
  flex-flow: wrap;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 999;
  margin-top: 5px;
  padding: 5px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
}

.multi-select .multi-select-options::-webkit-scrollbar {
  width: 5px;
}

.multi-select .multi-select-options::-webkit-scrollbar-track {
  background: #f0f1f3;
}

.multi-select .multi-select-options::-webkit-scrollbar-thumb {
  background: #cdcfd1;
}

.multi-select .multi-select-options::-webkit-scrollbar-thumb:hover {
  background: #b2b6b9;
}

.multi-select .multi-select-options .multi-select-option,
.multi-select .multi-select-options .multi-select-all {
  padding: 4px 12px;
  height: 42px;
}

.multi-select .multi-select-options .multi-select-option .multi-select-option-radio,
.multi-select .multi-select-options .multi-select-all .multi-select-option-radio {
  margin-right: 14px;
  height: 16px;
  width: 16px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

.multi-select .multi-select-options .multi-select-option .multi-select-option-text,
.multi-select .multi-select-options .multi-select-all .multi-select-option-text {
  box-sizing: border-box;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  font-size: 16px;
  line-height: 20px;
}

.multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-radio,
.multi-select .multi-select-options .multi-select-all.multi-select-selected .multi-select-option-radio {
  border-color: #40c979;
  background-color: #40c979;
}

.multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-radio::after,
.multi-select .multi-select-options .multi-select-all.multi-select-selected .multi-select-option-radio::after {
  content: "";
  display: block;
  width: 3px;
  height: 7px;
  margin: 0.12em 0 0 0.27em;
  border: solid #fff;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

.multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-text,
.multi-select .multi-select-options .multi-select-all.multi-select-selected .multi-select-option-text {
  color: #40c979;
}

.multi-select .multi-select-options .multi-select-option:hover,
.multi-select .multi-select-options .multi-select-option:active,
.multi-select .multi-select-options .multi-select-all:hover,
.multi-select .multi-select-options .multi-select-all:active {
  background-color: #f3f4f7;
}

.multi-select .multi-select-options .multi-select-all {
  border-bottom: 1px solid #f1f3f5;
  border-radius: 0;
}

.multi-select .multi-select-options .multi-select-search {
  padding: 7px 10px;
  border: 1px solid #dee2e6;
  border-radius: 5px;
  margin: 10px 10px 5px 10px;
  width: 100%;
  outline: none;
  font-size: 16px;
}

.multi-select .multi-select-options .multi-select-search::placeholder {
  color: #b2b5b9;
}

.multi-select .multi-select-header,
.multi-select .multi-select-option,
.multi-select .multi-select-all {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 16px;
  color: #212529;
}

.underline {
  text-decoration: underline;
}


.indicator {
  position: relative;
  width: 15px;
  height: 15px;

  transform: rotate(45deg);

  span {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: none;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    animation: animate 1s linear infinite;

    &:nth-child(1) {
      top: -30px;
      left: -30px;
      animation-delay: 0s;
    }

    &:nth-child(2) {
      top: -15px;
      left: -15px;
      animation-delay: 0.2s;
    }

    &:nth-child(3) {
      top: 0;
      left: 0;
      animation-delay: 0.4s;
    }

    &:nth-child(4) {
      top: 15px;
      left: 15px;
      animation-delay: 0.6s;
    }

    &:nth-child(5) {
      top: 30px;
      left: 30px;
      animation-delay: 0.8s;
    }
  }
}

@keyframes animate {
  0% {
    border-color: #51ff00;
    transform: translate(0, 0);
  }

  20% {
    border-color: #a2ff77;
    transform: translate(15px, 15px);
  }

  20.1%,
  100% {
    border-color: #e0fdd3;
  }
}

.clickable {
  cursor: pointer;
}

.confirm-modal {
  z-index: 999;
  /* Popover'dan daha yüksek bir değer */
}

.custom-popover {
  z-index: 850;
}


.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.custom-dropdown-menu {
  max-height: 400px;
  overflow-y: auto;
}

.table-responsive {
  min-height: 300px;
}

.text-faded {
  opacity: 0.5;
}

.h-22 {
  height: 150px;
}

.selected {
  background-color: #37A037 !important;
}

.index-999 {
  z-index: 1095 !important;
}

.mymodal {
  z-index: 777;
  background-image: url('../img/modalbg.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
  display: flex;
  min-height: 65vh;
  min-width: 90vh;
  border-radius: 8px;
}

.custom-modal-content {
  background-color: transparent !important;
  border: none !important;
}

.table-responsive:has(.dropdown-menu li:nth-child(2):last-child) {
  padding-bottom: 75px;
}

.table-responsive:has(.dropdown-menu li:nth-child(3):last-child) {
  padding-bottom: 115px;
}

.table-responsive:has(.dropdown-menu li:nth-child(4):last-child) {
  padding-bottom: 125px;
}

.table-responsive:has(.dropdown-menu li:nth-child(5):last-child) {
  padding-bottom: 200px;
}

#actionDropdown1+.dropdown-menu .dropdown-item.active,
#actionDropdown1+.dropdown-menu .dropdown-item:active {
  background-color: #f8f9fa !important;
  color: #000 !important;
}

.sbo-checkbox:checked {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
}

@media (max-width: 575.98px) {

  .mymodal {
    max-width: 400px;
    min-height: 844px;
  }
}

@media (min-width: 300px) {
  .mymodal {
    min-height: 600px;
    min-width: 300px;
    background-image: url('../img/modalbg.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
  }
}




.hidden-scrollbar {
  overflow-y: scroll;
  /* Yatay kaydırma için */
  max-height: 500px;
}

.hidden-scrollbar::-webkit-scrollbar {
  display: none;
  /* Webkit tarayıcılarında (Chrome, Safari) gizler */
}

.hidden-scrollbar {
  -ms-overflow-style: none;
  /* Internet Explorer ve Edge için gizler */
  scrollbar-width: none;
  /* Firefox için gizler */
}

/* Flip kart kapsayıcısı */
.card-container {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

/* Kart dönmüşse */
.card-container.flipped {
  transform: rotateY(180deg);
}

/* Kart yüzleri */
.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/* Ön yüz */
.card-front {
  transform: rotateY(0deg);
}

/* Arka yüz */
.card-back {
  transform: rotateY(180deg);
}

.module-box {
  aspect-ratio: 3/4;
  max-height: 310px;
  max-width: 310px;
}

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 100%;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  border-radius: 3rem;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  background-color: #fff;
}

.flip-card-back {
  transform: rotateY(180deg);
  background-color: #fff;
}

.flip-card-back::-webkit-scrollbar {
  display: none;
}

.flip-card-back>p {
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.mymodal {
  margin: 0 auto;
  width: inherit;
}




/* Scrollbar genişliği */
.custom-scrollbar {
  scrollbar-width: thin;
  /* Firefox için */
  scrollbar-color: #888 #f1f1f1;
  /* Renkler: thumb ve track */
  max-height: 300px;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 10px;
  /* Gerekli padding */
}

/* Chrome, Edge, Safari için */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  /* Scrollbar genişliği */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #888;
  /* Thumb rengi */
  border-radius: 10px;
  /* Thumb yuvarlatma */
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #555;
  /* Hover durumunda thumb rengi */
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  /* Track rengi */
}

.fa-eraser:hover {
  opacity: 0.85;
}

.disabled-link {
  opacity: 0.6;
  cursor: not-allowed;
}

.card-container-effect {
  transition: background-color 0.3s ease;
}

.card-container-effect.clickable:hover {
  cursor: pointer;
  transform: translateY(-2px);
}

.bg-gray-100 {
  background-color: #f3f4f6;

}

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

.btn-sbo {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: #757575;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 5px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Hide bootstrap dropdown icon */
.no-caret.dropdown-toggle::after {
  display: none;
}

.btn-sbo:hover {
  color: #757575;
}

.btn-info-sbo {
  color: #000;
  background-color: #2563eb;
  border-color: #2563eb;
}

.btn-info-sbo:hover {
  color: #000;
  background-color: #1d4ed8;
  border-color: #1d4ed8;
}

.btn-info-sbo:disabled,
.btn-info-sbo.disabled {
  color: #000;
  background-color: #2563eb;
  border-color: #2563eb;
}

.btn-outline-info-sbo {
  color: #2563eb;
  background-color: transparent;
  border-color: #2563eb;
}

.btn-outline-info-sbo:hover {
  color: #fff;
  background-color: #2563eb;
  border-color: #2563eb;
}

.btn-outline-info-sbo:disabled,
.btn-outline-info-sbo.disabled {
  color: #2563eb;
  background-color: transparent;
  border-color: #2563eb;
}

.btn-group .btn-sbo {
  position: relative;
  flex: 1 1 auto;
  border-radius: 0;
}

/* Grup içindeki ilk butonun sol köşeleri yuvarlak */
.btn-group .btn-sbo:first-child {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

/* Grup içindeki son butonun sağ köşeleri yuvarlak */
.btn-group .btn-sbo:last-child {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

/* Aradaki butonlarda double-border olmasın */
.btn-group .btn-sbo:not(:last-child) {
  border-right: none;
}

.btn-info-sbo-dark {
  color: #000;
  background-color: #104581;
  border-color: #104581;
}

.btn-info-sbo-dark:hover {
  color: #000;
  background-color: #104581;
  border-color: #104581;
}

.btn-info-sbo-dark:disabled,
.btn-info-sbo-dark.disabled {
  color: #000;
  background-color: #104581;
  border-color: #104581;
}


.btn-info-extra-dark {
  color: #000;
  background-color: #001e3b;
  border-color: #001e3b;
}

.btn-info-extra-dark:hover {
  color: #000;
  background-color: #001e3b;
  border-color: #001e3b;
}

.btn-info-extra-dark:disabled,
.btn-info-extra-dark.disabled {
  color: #000;
  background-color: #001e3b;
  border-color: #001e3b;
}

.btn-outline-extra-dark {
  color: #001e3b;
  background-color: transparent;
  border-color: #001e3b;
}

.btn-outline-extra-dark:hover {
  color: #fff;
  background-color: #001e3b;
  border-color: #001e3b;
}

.btn-outline-extra-dark:disabled,
.btn-outline-extra-dark.disabled {
  color: #001e3b;
  background-color: transparent;
  border-color: #001e3b;
}

.text-sbo {
  color: #2563eb !important;
}

.bg-sbo {
  background-color: #2563eb !important;
}

.btn-sbo:disabled,
.btn-sbo.disabled,
fieldset:disabled .btn-sbo {
  pointer-events: none;
  opacity: 0.65;
}

.btn-outline-sbo {
  color: #2563eb;
  border-color: #2563eb;
}

.btn-outline-sbo:hover {
  color: #fff;
  background-color: #2563eb;
  border-color: #2563eb;
}

.btn-outline-sbo:disabled,
.btn-outline-info.disabled {
  color: #2563eb;
  background-color: transparent;
}

.btn-sbo-sm,
.btn-sbo-group-sm>.btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.2rem;
}

.sidebar-user-profile:hover {
  color: var(--indigo);
}

.ql-editor {
  min-height: 170px;
}

.btn-success {
  background-color: #059669 !important;
  border-color: #059669 !important;
  /* Burada istediğiniz rengi verin */

}

.bg-success-new {
  background-color: #059669 !important;
}

.btn-success:hover {
  background-color: #10b981 !important;
  border-color: #10b981 !important;

}

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

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

.role-item:hover {
  /* Bootstrap shadow-sm eşdeğeri: */
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.modal-footer>div:has(.custom-modal-footer-width) {
  width: 100%;
}

.custom-range-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 7px;
  border-radius: 5px;
  background: #D6D6D6FF;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.custom-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #0d6efd;
  cursor: pointer;
}

.custom-range-input::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #0d6efd;
  cursor: pointer;
}

.ql-editor p {
  /*Normal font-size +2pt otomatik */
  font-size: 16px !important;
}

.bold {
  font-weight: bold;
}

@keyframes flash-bg {
  0% {
    background-color: #0d6dfd9c;
  }

  100% {
    background-color: transparent;
  }
}

.flash-highlight {
  animation: flash-bg 3s ease-out forwards;
  border-radius: 12px;
}

.msgBorder {
  border-width: 4px;
}

.msgBorder.incoming {
  border-left: 4px solid #b5b5b6;
}

.msgBorder.outgoing {
  border-right: 4px solid #0d6efd;
}

.form-select.no-arrow {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
}

/* DWS Dashboard Reminder Button Hover Effects */
.btn-reminder-today {
  background-color: #fee2e2 !important;
  color: #dc2626 !important;
  transition: background-color 0.2s ease;
}

.btn-reminder-today:hover {
  background-color: #fecaca !important;
}

.btn-reminder-overdue {
  background-color: #fed7aa !important;
  color: #c2410c !important;
  transition: background-color 0.2s ease;
}

.btn-reminder-overdue:hover {
  background-color: #fdba74 !important;
}

.table> :not(caption)>*>* {
  vertical-align: middle !important;
}

.table-new th {
  font-weight: 500 !important;
}

.table-new {
  height: 45px;
  /* Ana renk (açık mavi) */
  --bs-table-bg: #f5f8ff;
  /* Metin renkleri: beyazlar siyah oldu */
  --bs-table-striped-color: #000;
  --bs-table-active-color: #000;
  --bs-table-hover-color: #000;
  color: #000;

  /* Ana renge yakın tonlar (biraz koyulaştırılmış varyantlar) */
  --bs-table-striped-bg: #ecf2ff;
  /* ~%6-8 koyu */
  --bs-table-hover-bg: #e6eeff;
  /* ~%10-12 koyu */
  --bs-table-active-bg: #dbe7ff;
  /* ~%15-18 koyu */

  /* Kenarlık rengi: ana renge yakın, kontrast için bir ton daha koyu */
  border-color: #c7d6ff;
  --bs-table-border-color: #c7d6ff;
  /* (Bootstrap 5.3+ için) */
}

.table-new th {
  white-space: nowrap;
  /* Satır kaymasını engelle */
  overflow: hidden;
  /* Taşan kısmı gizle */
  text-overflow: ellipsis;
  /* Sonuna "..." koy */
}


/* Başlıktaki ay/hafta/gün başlığı */
.fc .fc-toolbar-title {
  color: #0d47a1;
}

/* Üstteki gün isimleri (Mon, Tue / Pzt, Sal) */
.fc .fc-col-header-cell-cushion {
  color: #1565c0;
  text-decoration: none;
}

/* Ay görünümünde gün numaraları */
.fc .fc-daygrid-day-number {
  color: #283593;
}

/* Haftalık/Günlük görünümde saat etiketleri (8:00, 9:00...) */
.fc .fc-timegrid-slot-label-cushion {
  color: #424242;
}

/* Etkinlik başlığı (genel) */
.fc .fc-event .fc-event-main {
  color: #1b5e20;
}

.fc .fc-button {
  text-transform: capitalize;
  /* her kelimenin baş harfi büyük */
}

.fc-holiday-bg {
  background-color: rgba(238, 84, 57, 0.397) !important;
  pointer-events: none;
}

.react-datepicker-popper {
  z-index: 9999 !important;
}

.input-no-border:focus {
  outline: none;
  border: none;
}

.fc-holiday {
  color: #000000 !important;
  /* Yazı rengini kırmızı yapar */
  font-weight: 600;
  /* (isteğe bağlı) kalın yapar */
}

.collapse-vert {
  overflow: hidden;
  max-height: 0;
  transition: max-height 220ms ease;
}

.collapse-vert.open {
  max-height: 1550px;
  /* içerik uzunluğuna göre artırılabilir */
}

.react-calendar__tile.tile-range-start-end:not(.tile-holiday) {
  border: 2px solid #2563eb;
  background: rgba(37, 100, 235, 0.50);
}

.react-calendar__tile.tile-range:not(.tile-holiday) {
  background: rgba(37, 100, 235, 0.47);
  border: none;
}

.react-calendar__tile.tile-holiday {
  /* Açık kırmızı zemin (yaklaşık red-500 %10 opaklık) */
  background-color: rgba(239, 68, 68, 0.10);
}

/* Tatiller tıklanamaz (JS tarafında tileDisabled=true); görsel destek */
.react-calendar__tile.tile-holiday.react-calendar__tile--disabled {
  cursor: not-allowed;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

/* Tatil günü seçiliyse: sadece kontur, zemin aynı kalsın */
.react-calendar__tile.tile-holiday.tile-selected-outline {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}

/* Güvenlik: Herhangi bir sebeple tatil gününe range class’ları da gelirse
   arka planı nötralize ederek tatil rengini koru. */
.react-calendar__tile.tile-holiday.tile-range,
.react-calendar__tile.tile-holiday.tile-range-start-end {
  /* İsteğe bağlı: tatil çerçevesini koru */
  border: 1px solid rgba(239, 68, 68, 0.25);
}

/* (Opsiyonel) Hover'da tatil rengini azıcık belirginleştir; disabled ise değişmesin */
.react-calendar__tile.tile-holiday:not(.react-calendar__tile--disabled):hover {
  background-color: rgba(239, 68, 68, 0.76);
}

.react-calendar__tile.tile-holiday:not(.react-calendar__tile--disabled) {
  background-color: rgba(239, 68, 68, 0.445);
}

.react-datepicker-popper {
  z-index: 9999 !important;
}

.input-no-border:focus {
  outline: none;
  border: none;
}

.react-datepicker-popper {
  z-index: 9999 !important;
}

.input-no-border:focus {
  outline: none;
  border: none;
}
.label-one-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 150px; /* ihtiyaca göre artır/azalttt */
}