:root {
  --ana-renk: #657b83;
  --ana-renk2: #657b95;
  --ana-renk3: #273c5796;
  --yazi-rengi: #000000;
  --yazi-arka-rengi:var(--ana-renk);
  --raporlama_renk1:var(--ana-renk);
  --bos-hucre-renk: #880404;
  --button-arka-renk:var(--tablo-arka-renk);
  --button-arka-renk2:var(--tablo-arka-renk2);
  --button-yazi-renk: #0e0e0e;
  --tablo-arka-renk: #bdbcbc;
  --tablo-arka-renk2:rgb(230, 216, 216);
  --tablo-kenar-renk:rgba(7, 104, 160, 0.3);

  --sidebar-width: 280px;
  --sidebar-bg: var(--ana-renk3);
  --sidebar-color: #e2e8f0;
  --sidebar-hover: var(--ana-renk);
  --accent-color: var(--ana-renk2);
  --text-muted: #94a3b8;
}
body {
  font-family: 'Poppins', sans-serif;

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1920' height='1080' preserveAspectRatio='none' viewBox='0 0 1920 1080'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1023%26quot%3b)' fill='none'%3e%3crect width='1920' height='1080' x='0' y='0' fill='rgba(47%2c 97%2c 149%2c 1)'%3e%3c/rect%3e%3cpath d='M-206.98 584.86C26.14 597.59 172.65 1003.22 620.94 1016.86 1069.23 1030.5 1232.06 1272.26 1448.86 1275.24' stroke='rgba(51%2c121%2c194%2c0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-304.13 330.22C-162.31 331.2-28.64 465.22 246.85 465.22 522.34 465.22 481.33 308.58 797.82 330.22 1114.32 351.86 1131.21 1004.28 1348.8 1094.44' stroke='rgba(51%2c121%2c194%2c0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-154.94 187.05C120.46 194.61 417.78 559.62 867.81 597.45 1317.83 635.28 1198.75 1093.49 1379.18 1140.85' stroke='rgba(51%2c121%2c194%2c0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-80.81 194.72C77.73 195.5 229.01 329.72 538.83 329.72 848.66 329.72 789.98 159.85 1158.48 194.72 1526.97 229.59 1523.4 1017.57 1778.12 1139.79' stroke='rgba(51%2c121%2c194%2c0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-86.85 256.91C56.73 257.86 192.26 391.91 471.37 391.91 750.49 391.91 689.71 218.17 1029.6 256.91 1369.48 295.65 1350.25 1054.04 1587.82 1183.06' stroke='rgba(51%2c121%2c194%2c0.58)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1023'%3e%3crect width='1920' height='1080' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}


button {
  padding: 10px 15px;
  background-color: var(--button-arka-renk);
  color:var(--button-yazi-renk);
  font-size: 12pt;
  font-weight: bolder;
  border: 4px solid var(--button-arka-renk2);
  border-radius: 8px 8px 8px 8px;
  cursor: pointer;
}
button:hover {

  background-color: var(--button-arka-renk2);
  cursor: pointer
}



/* Tooltip konteynerinin stili */
.tooltip-container {
  position: relative;
  display: inline-block;
}

/* Tooltip (resim) kutusunun başlangıçta gizlenmesi */
.tooltip-container .tooltip-image {
  visibility: hidden;
  position: absolute;
  top: 30px;
  left: 0;
  width: 200px;
  /* Sabit resim genişliği */
  height: 400px;
  /* Sabit resim yüksekliği */
  border: 1px solid #ccc;
  background-color: white;
  padding: 10px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  /* Taşan kısmı gizler */
}

/* Link üzerine gelindiğinde resmin görünmesi */
.tooltip-container:hover .tooltip-image {
  visibility: visible;
}

/* Resim boyutunu sabitleme */
.tooltip-container .tooltip-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Resmin tamamını gösterir, taşmasını engeller */
}

.disabled-link {
  pointer-events: none;
  /* Linkin tıklanmasını engeller */
  color: grey;
  /* Devre dışı görünüm için renk değiştirebiliriz */
  text-decoration: none;
  /* Alt çizgi kaldırılabilir */
}

.body_wrapper {
  padding: 0px;
  background: transparent none;
  /*-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;*/
  width: 960px;
  margin: -85px auto -134px auto;
}


textarea {
  resize: none;
  overflow: hidden;
  min-height: 100px;
  max-height: 500px;
}


.check {
  width: 100%;
  /* Checkbox genişliğini %100 yapıyoruz */
  height: 100%;
  /* Checkbox yüksekliğini %100 yapıyoruz */
  margin: 0;
  /* Varsayılan margin'i sıfırlıyoruz */
  padding: 0;
  /* Varsayılan padding'i sıfırlıyoruz */

}


.kullanici {

  font-size: 1em;
  background-color: rgb(7, 1, 1);
  color: rgb(188, 192, 214);
  border: 5px solid rgba(0, 0, 0, 1);
  text-align: center;
  font-weight: bold;
  margin-top: 5px;
  border-radius: 5px;
}


.disabled {
  pointer-events: none;
  cursor: default;
}


.menu {
  background: rgba(0, 0, 0, 0.5);
  margin-right: 0rem;
  transition: all 200ms ease-in-out;
  z-index: 1;
}

.resim {
  width: 50px;
  z-index: -1;
}

.menu:hover {
  background: rgba(0, 116, 200, 0);
  cursor: pointer;
  z-index: 1000;
}



.linkmenu {

  text-decoration: none;
  color: black;
  font-size: 2em;
}

.menu {

  position: relative;
  text-align: center;
  color: black;
}

.menut {
  width: 20%;
  border: 0px ridge white;
}



#ge {
  font-size: 0.9em;
  /*border:4px solid black;*/
  width: 20%;
}

#main {

  margin: 50px auto;

}

#bilgi {
  width: 100%;
  color: #000;
  padding: 10px;
  font-size: 15px;
  font-weight: bold;

}

.zimmettablo {
  border-collapse: collapse;
  font-size: 1em;
  background-color: var(--yazi-arka-rengi);
  color: var(--yazi-rengi);
  border: 2px solid var(--tablo-kenar-renk);
  padding: 0px;
  border-radius: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  text-align: center;
}

.biluyar {
  margin-top: 2em;
  color: rgb(178, 0, 0);
  font-size: 1.4em;
  font-weight: bold;
  border: 5px solid rgb(178, 0, 0);
}


/* Sortable tables */
table,
th,
td {
  border: 2px solid black;
  text-align: center;
  font-weight: bold;
  border-collapse: collapse;
  margin-left: 5%;
  margin-right: 5%;
}

p {
  font-size: 1em;
}

h1 {
  font-size: 1.5em;
}

.silbt {
  cursor: pointer;
  height: 100%;
  background: transparent;
  border: 0px solid black;
  font-size: 1em;
}

h2 {

  text-align: center;
  border-radius: 10px 10px 0 0;
  margin: 10px 40px;
  padding: 10px
}

hr {
  border: 0;
  border-bottom: 1px solid #ccc;
  margin: 10px -40px;
  margin-bottom: 30px
}

#login {
  width: 300px;
  float: left;
  border-radius: 10px;
  border: 2px solid #ccc;
  padding: 10px 40px 25px;
  margin-top: 70px
}


select {
 
  background-color: var(--button-arka-renk);
  color:var(--button-yazi-renk);
  border: 0px solid var(--button-arka-renk);
  padding: 10px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}

option {

  background-color: var(--button-arka-renk);
  color: var(--button-yazi-renk);
  border: 0px solid var(--button-arka-renk);
}


.sor {
  background-color: var(--button-arka-renk);
  color: var(--button-yazi-renk);
  padding: 10px;
  font-size: 20px;
  text-align: center;
}

.metin {
  font-size: 1em;
  background-color: rgba(0, 116, 200, 0.3);
  color: var(--yazi-rengi);
  border: 3px solid rgba(0, 102, 161, 0.3);
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 0px;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
}



.sorz {
  font-size: 10%;
  background-color: var(--button-arka-renk);
  border: 3px solid var(--button-arka-renk);
  /*border-radius: 20px;*/
  font-weight: bold;
  color: var(--button-yazi-renk);
  /* White text */
  padding: 12px 16px;
  /* Some padding */
  font-size: 16px;
  /* Set a font size */
  cursor: pointer;
  /* Mouse pointer on hover */
}

.sorz:hover {

  background-color: var(--button-arka-renk2);

}

.sorb {
  background-color: rgba(0, 116, 200, 0.5);
  color: var(--button-yazi-renk);
  padding: 10px;
  font-size: 20px;
  cursor: pointer;
  /*border-radius: 20px;*/
  text-align: center;
}

.sorb:hover {

  background-color: var(--button-arka-renk2);
  color: var(--button-yazi-renk);
  padding: 10px;
  font-size: 20px;
  cursor: pointer;

  text-align: center;
}

.sora {
  font-size: 1em;
  background-color: var(--button-arka-renk);
  color: #fff;
  border: 1px solid var(--button-arka-renk);
  cursor: pointer;

  text-align: center;
}

.sora:hover {
  font-size: 1em;
  background-color: var(--button-arka-renk2);
  color: #ddd;
  border: 2px solid rgba(0, 120, 100, 1);
  cursor: pointer;
  text-align: center;
}

.silb {
  background-color: rgba(50, 90, 200, 1);
  color: #000;
  border: 3px solid rgba(50, 90, 200, 1);
  padding: 10px;
  font-size: 20px;
  cursor: pointer;
  text-align: center;
  width: 100%;
}

.silb:hover {
  background-color:var(--button-arka-renk2);
  color: #000;
  border: 3px solid var(--button-arka-renk);
  padding: 10px;
  font-size: 20px;
  cursor: pointer;

  text-align: center;
  width: 100%;
}



th span {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

input {

  background-color: var(--button-arka-renk);
  color: var(--yazi-rengi);
  border: 1px solid var(--button-arka-renk);
  padding: 0px;
  font-size: 20px;
  font-weight: bolder;
  
}




#profile {
  padding: 50px;
  border: 1px dashed grey;
  font-size: 20px;
  background-color: #DCE6F7
}

#logout {
  float: right;
  padding: 5px;
  border: dashed 1px gray
}

a {

  color: rgb(76, 15, 0);
}




th {
  cursor: pointer;


}



.uyar {
  font-weight: bold;
}

input.gr {
  text-align: center;
  width: 99.5%;
  padding: 5px;
  margin-top: 8px;
  border: 1px solid #ccc;
  padding-left: 5px;
  font-size: 1.5em;
}

label {
  color: #000;
  padding: 10px;
  margin-bottom: 100px;
  font-size: 20px;
  font-weight: bold;
}

body.loading .modal {
  display: block;
}

.yok {
  border: 3px solid white;
  width: 150px;
  height: 40px;
  font-size: 1.4em;
  color: white;
  background-color: green;
  font-weight: bold;
}

.clockStyle {
  border: #111 4px inset;
  padding: 6px;
  color: #000;
  font-size: 1.4em;
  font-weight: bold;
  letter-spacing: 2px;

  display: inline;
  text-align: left;
}

.yk {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.281) url('yuk.gif') 50% 50% no-repeat;
  background-size: 200px 160px;
  filter: grayscale(100%) brightness(0) invert(0);
}

.baslik {
  font-weight: bold;
  font-size: 1.5em;
  width: 99.5%;
  /*padding:1em;*/
  margin-top: 1em;
  /*border:1px solid #ccc;*/
  padding-left: 5px;

}

/* The container must be positioned relative: */
.custom-select {
  position: relative;
  
}

.custom-select select {
  display: none;
  /*hide original SELECT element: */
}

.select-selected {
  background-color: var(--button-arka-renk);
}

/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;

}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}

/* style the items (options), including the selected item: */
.select-items div,
.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color:var(--button-arka-renk);
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover,
.same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}


input[type="text"],
input[type="number"],
input[type="date"],
input[type="checkbox"],
input[type="password"],
select,
option,
input[type="file"] {
  /*width: 50%;*/
  /* Input'un genişliğini hücrenin genişliğine uyacak şekilde ayarlar */

  /* Kenarlık ve iç boşlukları da dahil ederek genişliği hesaplar */
  background-color: var(--button-arka-renk);
  border: 2px solid var(--tablo-kenar-renk);
}


/* Arama kutusu stil */
#kisiyerarama {
  width: 30%;
  padding: 8px;
  font-size: 16px;
  border: 1px solid var(--tablo-arka-renk);
  border-radius: 4px;
  text-align: center;
}

/* Dropdown menü stil */
#suggestions {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 30%;
  border: 1px solid var(--tablo-arka-renk);
  border-top: none;
  font-weight: bolder;

  display: none;
  /* Başlangıçta gizli */
}

#suggestions li {
  padding: 8px;
  cursor: pointer;
  background-color: var(--tablo-arka-renk);
  border-radius: 2px 2px 2px 2px;
}

#suggestions li:hover {
  background-color: var(--tablo-arka-renk);
}

/*Yeni raporlama tablosu */
.tg {
  border-collapse: collapse;
  border-color: #93a1a1;
  border-spacing: 0;
  text-align: center;
  max-width: 85%;
  margin: 0 auto; /* Ortalamak için */
  overflow-x: auto;
}

.tg td {
  background-color: var(--tablo-arka-renk);
  border-color: #93a1a1;
  border-style: solid;
  border-width: 1px;
  color: #002b36;
 
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg th {
  background-color: var(--ana-renk);
  border-color: #93a1a1;
  border-style: solid;
  border-width: 1px;
  color: var(--yazi-rengi);
 
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg .tg-2bhk {
  background-color: var(--tablo-arka-renk);
  border-color: inherit;
  text-align: center;
  vertical-align: top
}

.tg .tg-0pky {
  border-color: inherit;
  text-align: center;
  vertical-align: top
}

.tg .bos-hucre {
  background-color: var(--bos-hucre-renk) !important;
  color: #ccc;
  cursor: not-allowed;
  pointer-events: none;
}





/* Modal arka plan */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

/* Modal içeriği */
.modal-content {
  background-color: var(--ana-renk);
  margin: 10% auto;
  padding: 20px;
  border-radius: 8px;
  width: 400px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.close {
  color: #aaa;
  float: right;
  font-size: 24px;
  font-weight: bold;
}

.close:hover {
  color: black;
  cursor: pointer;
}

input,
textarea {
  width: 100%;
  padding: 8px;
  margin: 8px 0;
  box-sizing: border-box;
}



.alt-bosluk {
  margin-bottom: 100px;
}
.centered {
  text-align: center;
}



.liste-container {
  list-style: none;
  padding: 0;
  max-width: 300px;
  margin: auto;
}

.liste-container li {
  background-color: var(--tablo-arka-renk);
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.liste-container li:hover {
  transform: translateY(-10px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.sil-btn {
  background: transparent;
  border: none;
  color: #e74c3c;
  /* Kırmızı renk */
  font-size: 16px;
  /* Küçük boyut */
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.2s ease, transform 0.1s ease;
}

.sil-btn:hover {
  color: #c0392b;
  /* Hover olduğunda koyu kırmızı */
  transform: scale(1.1);
  /* Hafif büyüsün */
}

.sil-btn:focus {
  outline: none;
  /* Odak halkasını kaldır */
}

.belge-ikon {
  color: #555;
  /* Gri renk */
  font-size: 32px;
  /* Küçük boyut */
}

.talep-ekle {
  background: transparent;
  /* Yeşil */
  color: rgb(15, 146, 26);
  /* Yazı rengi */
  border: none;
  font-size: 32px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* ikon ile yazı arası boşluk */
  transition: background-color 0.3s ease;
}

.talep-ekle i {
  font-size: 32px;
}

.talep-ekle:hover {
  background-color: transparent;
}




/* Modal arka plan */
.modal-talep {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

/* Modal içeriği */
.modal-content-talep {
  background-color: var(--ana-renk);
  margin: 10% auto;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/*MBS ÜST MENU*/
#menu {
	background: var(--ana-renk);
	height: 110px;
	padding-left: 18px;
	border-radius: 10px;
  width: 80%;
}
#menu ul, #menu li {
	margin: 0 auto;
	padding: 0;
	list-style: none
}
#menu ul {
	width: 100%;
	text-align: center;
}
#menu li {
	display: inline-block;
	position: relative;
  
}
#menu a {
	display: block;
	line-height: 45px;
	padding: 0 14px;
	text-decoration: none;
	color: var(--button-yazi-renk);
	font-size: 20px;
  font-weight: bolder;
}
#menu a.dropdown-arrow:after {
	content: "\25BE";
	margin-left: 5px;
}
#menu li a:hover {
	color: var(--button-yazi-renk);
	background: var(--button-arka-renk2);
}
#menu input {
	display: none;
	margin: 0;
	padding: 0;
	height: 90px;
	width: 100%;
	opacity: 0;
	cursor: pointer
}
#menu label {
	display: none;
	line-height: 45px;
	text-align: center;
	position: absolute;
	left: 60px
}
#menu label:before {
	font-size: 1.6em;
	color: var(--button-yazi-renk);
	content: "\2261"; 
	margin-left: 20px;
}
#menu ul.sub-menus{
	height: auto;
	overflow: hidden;
	width: 400px;
	background: var(--ana-renk);
	position: absolute;
	z-index: 99;
	display: none;
}
#menu ul.sub-menus li {
	display: block;
	text-align: left;
	width: 100%;
}
#menu ul.sub-menus a {
	color:var(--button-yazi-renk);
	font-size: 16px;
  border: 1px solid #F1F5F9;
}
#menu li:hover ul.sub-menus {
	display: block
}
#menu ul.sub-menus a:hover{
	background: var(--button-arka-renk2);
	color: var(--button-yazi-renk);
}
#menu a i {
  margin-right: 8px; /* İkon ile metin arasına boşluk ekler */
  font-size: 20px;   /* İkon boyutunu ayarlamak için */
  color: black;      /* İkonların rengini siyah yapar */
}

#menu li a:hover i {
  color: black; /* Hover durumunda ikon rengini siyah tutar */
}

@media screen and (max-width: 500px){
	#menu {position:relative}
	#menu ul {background:#444444;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;text-align:left;}
	#menu ul.sub-menus {width:100%;position:static;}
	#menu ul.sub-menus a {padding-left:30px;}
	#menu li {display:block;float:none;width:auto;}
	#menu input, #menu label {position:absolute;top:0;left:0;display:block}
	#menu input {z-index:4}
	#menu input:checked + label {color:#FFFFFF}
	#menu input:checked + label:before {content:"\00d7"}
	#menu input:checked ~ ul {display:block}
}

/*checkbox*/
.cr-wrapper *,
.cr-wrapper *::before,
.cr-wrapper *::after {
	box-sizing: content-box !important;
}

.cr-wrapper input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}

.cr-wrapper span {
	font-size: 16px;
}

.cr-wrapper {
	display: table;
	position: relative;
	padding-left: 30px;
	cursor: pointer;
	margin-bottom: 5px;
}

.cr-wrapper input[type="checkbox"] ~ .cr-input {
	position: absolute;
	top: 50%;
	left: 0;
	height: 20px;
	width: 20px;
	background: #94A3B8;
	transition: background 250ms;
	border: 1px solid #F1F5F9;
	border-radius: 3px;
	transform: translate(0, -50%);
}

.cr-wrapper input[type="radio"] ~ .cr-input {
	position: absolute;
	top: 50%;
	left: 0;
	height: 20px;
	width: 20px;
	background: #94A3B8;
	transition: background 250ms;
	border: 1px solid #F1F5F9;
	border-radius: 20px;
	transform: translate(0, -50%);
}

.cr-wrapper input[type="checkbox"] ~ .cr-input::after {
	content: "";
	position: absolute;
	display: none;
	left: 4px;
	top: 4px;
	width: 12px;
	height: 12px;
	transition: background 250ms;
	background-color: #FFFFFF;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.cr-wrapper input[type="radio"] ~ .cr-input::after {
	content: "";
	position: absolute;
	display: none;
	left: 4px;
	top: 4px;
	width: 12px;
	height: 12px;
	border-radius: 20px;
	background: #FFFFFF;
	transition: background 250ms;
}

.cr-wrapper input:checked ~ .cr-input::after {
	display: block;
}

.cr-wrapper:hover input[type="checkbox"]:not([disabled]) ~ .cr-input,
.cr-wrapper input[type="checkbox"]:focus ~ .cr-input {
	background: #E2E8F0;
	border-color: #64748B;
}

.cr-wrapper:hover input[type="radio"]:not([disabled]) ~ .cr-input,
.cr-wrapper input[type="radio"]:focus ~ .cr-input {
	background: #E2E8F0;
	border-color: #64748B;
}

.cr-wrapper input[type="checkbox"]:checked ~ .cr-input {
	background: var(--ana-renk);
	border-color: var(--ana-renk2);
}

.cr-wrapper input[type="radio"]:checked ~ .cr-input {
	background: var(--ana-renk);
	border-color: var(--ana-renk2);
}

.cr-wrapper input[type="checkbox"]:disabled ~ .cr-input,
.cr-wrapper input[type="radio"]:disabled ~ .cr-input {
	opacity: 0.5;
	cursor: not-allowed;
}

.cr-wrapper input[type="checkbox"]:disabled ~ span,
.cr-wrapper input[type="radio"]:disabled ~ span {
	opacity: 0.5;
	cursor: not-allowed;
}

.cr-wrapper input[type="checkbox"]:disabled ~ .cr-input::after {
	background: #FFFFFF;
}

.cr-wrapper input[type="radio"]:disabled ~ .cr-input::after {
	background: #FFFFFF;
}

.cr-wrapper:hover input[type="checkbox"]:not([disabled]):checked ~ .cr-input,
.cr-wrapper input[type="checkbox"]:checked:focus ~ .cr-input {
	background:var(--ana-renk);
	border-color: var(--ana-renk2);
}

.cr-wrapper:hover input[type="radio"]:not([disabled]):checked ~ .cr-input,
.cr-wrapper input[type="radio"]:checked:focus ~ .cr-input {
	background: var(--ana-renk);
	border-color: var(--ana-renk2);
}
/*İkon*/
    #floatingIcon {
      display: block;
      position: fixed;
      bottom: 40px;
      left: 80px;
      background-color: var(--ana-renk);
      color: rgb(0, 0, 0);
      padding: 12px;
      border-radius: 15%;
      cursor: pointer;
      font-size: 36px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      z-index: 1000;
    }
    .renk-ikon {
      color: rgb(0, 0, 0);
      font-size: 24px; /* isteğe bağlı: ikonun boyutunu ayarlarsın */
              }
    #floatingIcon:hover {
      background-color: var(--ana-renk);
    }

    #iconText {
      color: rgb(0, 0, 0);
      font-size: 24px;
      margin-left: 10px;
      font-weight: bolder;
    }

    #talep_popup .modal-content {
    background-color: var(--tablo-arka-renk); /* örnek: açık sarı */
  }

.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  border: 1px solid #ccc;
  padding: 5px;
  min-height: 40px;
  align-items: center;
}

.tag {
  background-color: #e0e0e0;
  border-radius: 4px;
  padding: 3px 8px;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.tag .remove-tag {
  margin-left: 5px;
  cursor: pointer;
  color: red;
  font-weight: bold;
}