*,

		*:before,

		*:after {

			box-sizing: border-box;

		}

		@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

		body{

			font-family: 'Open Sans', Arial, Helvetica;

		}

		.yukleniyor{

			display: flex;

			flex-direction: column;

			align-items: center;

		}

		.load_ilk{					

			position:absolute;

			z-index:3;

		}

		.load_arka{					

			position: absolute;

			z-index: 1;

			top: 0;

			bottom: 0;

			width: 100%;

			height: auto;

			left: 0;

			right: 0;

			margin-left: auto;

			margin-right: auto;

			filter: opacity(0.9);

		}

		.load_on{

			opacity:1;

			background: rgb(255,255,255);

			background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 88%, rgba(255,255,255,0) 100%);

			position:absolute;

			z-index:2;

			width:100%;

			top: 0px;

			bottom: 0px;

			height: 100%;

			left: 0;

			right: 0;

			margin-left: auto;

			margin-right: auto;

		}

		.load_tx{ 

			background-color:#e5e5e5;

			padding: 20px;

			opacity:0.9;

			border-radius:10px;

			font-size: larger;

			margin-top: 40px;

		}

		body {

			width: 100%;

			margin: 0px;

		}

		#yuzde {

			text-align: center;

			margin-top: 100px;

			width: 100%;

			position: absolute;

			z-index: 1000;

		}

		.cevir {

			width: 100%;

			max-width: 100%;

			font-size: 1.5em;

			line-height: 2em;

			padding: 0px;

			text-align: center;

		}

		.cevirbuton {

			width: 100%;

			max-width: 100%;

			height: 70px;

			font-size: 1em;

			padding: 0px;

			cursor: pointer;

			display: flex;

			flex-wrap: nowrap;

			justify-content: center;

			align-items: center;

			border-radius:0px;

		}

		.mobildeGoster {

			width: 100vw;

			justify-content: center;

			align-items: center;

		}



		.cookie-banner {

			position: fixed;

			bottom: 0px;

			margin: 0px;

			width: 100%;

			display: none;

			align-items: flex-start;

			justify-content: space-between;

			background-color: #ffb700;

			height: 30vh;

			padding: 2px;

			z-index:100;

		}

		.close {

			background-color: #777;

			border: none;

			color: white;

			border-radius: 2px;

			cursor: pointer;

			padding: 5px;

			margin: 2px;

			width: 100%;

		}

		.donanim_detay {

			font-size: 10px;

		}

		.donanimbilgi {

			font-size: 18px;

		}

		.ayar_butonlar {

			margin: 2px;

			padding: 5px;

			cursor: pointer;

			filter: brightness(0.7);

		}

		.ayar_butonlar:hover {

			margin: 2px;

			filter: brightness(0.4);

		}

		.ayarlar {

			position: absolute;

			z-index: 98;

			bottom: 127px;

			display: flex;

			width: 100%;

			flex-direction: row;

			justify-content: flex-end;

			padding-right: 20px;

			flex-wrap: nowrap;

			align-items: flex-end;

			background-color: #ffffff87;

		}

		.kameralar img:hover {

			-webkit-filter: drop-shadow(5px 5px 15px #000);

			filter: drop-shadow(5px 5px 15px #000);

			cursor: pointer;

		}

		.kameralar img {

			position: absolute;

			z-index: 100;

			top: 0px;

			left: 0px;

			-webkit-filter: drop-shadow(5px 5px 15px #fff);

			filter: drop-shadow(5px 5px 15px #fff);

			display: none;

		}

		.kameralar {

			position: absolute;

			z-index: 100;

			top: 0px;

		}

		.hiz_goster{

			display: flex;

			flex-direction: column;

			align-items: center;

			color: #b5b5b5;

			font-family: sans-serif;

		}

		.hiz_birim{

			display: none;

			background-color: #e5e5e5;

			border-radius: 5px;

    		padding: 5px;

		}

		.zoom_goster{

			display: flex;

			flex-direction: column;

			align-items: center;

			color: #b5b5b5;

			font-family: sans-serif;

		}

		.zoom_birim{

			display: none;

			background-color: #e5e5e5;

			border-radius: 5px;

    		padding: 5px;

		}

		.renksec{

			width: 40%;

		}

		.ayar_baslik{

			width: 100%;

			border-top-left-radius: 10px;

			border-top-right-radius: 10px;

			padding: 5px;

			display: flex;

			flex-wrap: nowrap;

			justify-content: space-between;			

			/*background-color: #777;*/

			background: rgb(167,167,167);

			background: linear-gradient(180deg, rgba(167,167,167,1) 0%, rgba(255,255,255,1) 100%);

			border-bottom: solid 1px #ddd;

		}

		.ayar_pencere{

			display: none;

			position: fixed;

			left: 10%;

			border: solid #ddd 1px;

			border-radius:10px;

			width: 80vw;			

			background-color: #ffffffee;

			-webkit-box-shadow: 6px 7px 20px 0px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */

			-moz-box-shadow:    6px 7px 20px 0px #ccc;  /* Firefox 3.5 - 3.6 */

			box-shadow:         6px 7px 20px 0px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */

			z-index:1001;

		}		

		.bilgi_pencere{

			display: none;

			position: fixed;

			left: 10%;

			border: solid #ddd 1px;

			border-radius:10px;

			width: 80vw;			

			background-color: #ffffffee;

			-webkit-box-shadow: 6px 7px 20px 0px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */

			-moz-box-shadow:    6px 7px 20px 0px #ccc;  /* Firefox 3.5 - 3.6 */

			box-shadow:         6px 7px 20px 0px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */

			z-index:2000;

			bottom: 30px;

			top: 50px;

			font-size: large;

		}

		.ayar_pencere div{

			padding: 10px;

			margin-bottom:10px;

		}

		.ayarkapat{

			padding: 5px;

			cursor:pointer;

		}

		.metinsil{

			position: absolute;

			/* top: 20px; */

			right: 10px;

			border: none;

			width: 30px;

			height: 30px;

			margin-top: 10px;

			background-color: #3333332e;

			cursor:pointer;

			display:none;

		}

		

		/* kamera açılır menü */

		.dropup {

		  position: relative;

		  display: inline-block;

		}

		.dropup-content {

		  display: none;

		  position: absolute;

		  max-width: 70px;

		  bottom: 50px;

		  z-index: 1;

		  margin-left: -70px;		  

		}

		.upkam {

		  padding: 5px 10px;

		  display: block;

		  filter: brightness(5);

		  width:50px;

		  cursor:pointer;

		}

		.upkam:hover {

			filter: brightness(0.6);

		}

		.yardim_metin{

			bottom: 37px;

			top: 96px;

			position: fixed;

			width: 78vw;

			padding: 15px;

			left: 11%;

			overflow-y: scroll;

			overflow-x: clip;

		}

		.bekle{

			cursor: not-allowed;

		}

		.kamera_tablo{

			-webkit-box-shadow: 0px -9px 20px 0px #bbbbbb;

			-moz-box-shadow:    0px -9px 20px 0px #bbbbbb;

			box-shadow: 		0px -9px 20px 0px #bbbbbb;

		}

		.dokunma_alani{

			background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);

			background-repeat: repeat;

			height: 60vw;

			width: 99vw;

			/* border: 1px solid red; */

			background-size: 100% 100%;

			position: absolute;

			top: 0;

			left: 0;

		}

		.wrapper {

			display:inline-block;

			filter:hue-rotate(0deg);

		}

		.renkkutu{

			border: 1px solid #333;

			width: fit-content;

			height: 32px;

			padding: 5px!important;

		}

		.tile {

			width:150px;

			height:20px;

			display:inline-block;

			background: #ff6600;

			padding: 5px;

			margin-bottom: 10px;

		}