/* ##### Genel Tanımlamalar Başladı ##### */
a{text-decoration:none;}
a:hover{text-decoration:none;}

svg{
	height:40px;
	max-height:60px;
}

::-webkit-scrollbar {
}

/* Demonstrate a "mostly customized" scrollbar
 * (won't be visible otherwise if width/height is specified) */
::-webkit-scrollbar {
  max-width: 7px;
  background-color: #aaa; /* or add it to the track */
}

/* Add a thumb */
::-webkit-scrollbar-thumb {
    background: #000; 
}

.trnToogleBtn
{
	cursor:pointer;
}

.trnToogleClose
{
	cursor:pointer;
}

.trnToogleContent
{
	display:none;
}

.trnNoStyle{
	border:none;
	background-color:transparent;
	padding:0;
	margin:0;
}

.trnMobile{
	display:none;
}

.trnNoMobile{
	display:block;
}

.trnResult{
	z-index:999999999;
}

.trnPictureResult{ width:100%; margin-top:10px; text-align:center;}

.trnPictureResult img{ max-width:100%; height:200px;}

.trnPictureResult .trnLoading {width:100%; height:100%; background-color:#498AF4; color:#FFF; text-align:center;}
.trnPictureResult .trnLoading  .trnText{width:100%; line-height:200px; text-align:center; position:absolute; top:0;}

.trnBottomResult{
	position:fixed;
	height:40px;
	bottom:120px;
	right:0;
}

.trnBottomResult .trnPopUp{
	width:100%;
	position:fixed;
	height:100%;
	top:0;
	left:0;
	margin:0;
	padding:0;
	display:block;
	z-index:10000;
}

.trnFullScreenError{
	position:fixed;
	height:100%;
	width:100%;
	display: table;
	top:0;
	left:0;
	z-index:1000;
	color:#FFF;
	background-color:#ea1515;
}

.trnFullScreenError .trnErrorContainer{	
	width:100%;
	height:auto;
	position:relative;
	color:#FFF;
	display: table-cell;
	vertical-align: middle;
	text-align:center;
}
.trnFullScreenError .trnErrorContainer h1{
	color:#FFF;
	font-size:24px;
}

.alert {
	font-size:14px;
	padding: 10px;
	background-color: #f44336; /* Red */
	color: white;
	margin-bottom: 15px;
}

.info {
	font-size:14px;
	padding: 10px;
	background-color: #47A8F5; /* Red */
	color: white;
	margin-bottom: 15px;
}

.warning {
	font-size:14px;
	padding: 10px;
	background-color: #FFA92B; /* Red */
	color: white;
	margin-bottom: 15px;
}

.success {
	font-size:14px;
	padding: 10px;
	background-color: #6ABC6E; /* Red */
	color: white;
	margin-bottom: 15px;
}

.alert  i{
	font-size:14px;
	margin-right:10px;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

.trnBasketOldPrice{
	text-decoration:line-through;
}

.trnBasketPrice{
	width:auto;
	margin-right:5px;
}

.trnDiscount{
	color:#FFAF10;
}

.trnBasketObj{
	margin-right:10px;
}

.trnNoPadding{
	padding:0;
}

.m15{margin:10px 15px 10px 15px;}
.p15{margin:10px 15px 10px 15px;}
.p10{padding:10px;}
.p5{padding:5px;}

.mt10{margin:10px 0 0 0;}
.pt15{margin:10px 0 0 0;}

.centerWrap {
  position: relative;
  text-align: center;
}

.centerItem {
	display: inline-block;
	padding: 0 10px 0 10px; 
	margin:0 5px 0 5px;
	height:30px;
	line-height:30px;
	cursor: pointer;
	color: #292929;
	background: #efefef;
	-webkit-transition: 0.3s;
	transition: 0.3s;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.trnSearch{
	height:30px;
	background-color:#404040;
	border:none;
}

.trnSearch input{
	width:80%;
	height:30px;
	float:left;
	border:none;
	padding:5px;
	color:#FFF;
	background-color:transparent;
}

.trnInputText{
	width:100%;
	height:30px;
	float:left;
	border:1px solid #EFEFEF;
	border-radius:none;
	-moz-border-radius:none;
	-webkit-border-radius:none;
	padding:5px;
	color:#FFF;
	background-color:transparent;
}

.trnInputText:focus{
	border:1px solid #FFAF10;
	background-color:transparent;
	text-shadow:none;
	box-shadow:none;
}

.trnInputTextarea{
	height:60px;
}

.trnBtn{
	height:30px;
	line-height:30px;
	border:none;
	background-color:transparent;
	padding:0 10px 0 10px;
	margin:0;
	cursor:pointer;
}

.trnBtn svg{
	height:20px;
	float:left;
	margin-top:5px;
	margin-right:5px;
}





.trnTascAlertDanger {
	color:#DC2514;
	text-align:center;
	background-color:#FFF;
	border:1px solid #DC2514;
	border-left:10px solid #DC2514;
	padding:5px;
	border-radius:5px;
	-webkit-box-shadow: 5px;
	-moz-box-shadow: 5px;
	box-shadow: 5px;
}

.trnTascAlertSucces {
	color:#86A100;
	text-align:center;
	background-color:#FFF;
	border:1px solid #86A100;
	border-left:10px solid #86A100;
	padding:5px;
	border-radius:5px;
	-webkit-box-shadow: 5px;
	-moz-box-shadow: 5px;
	box-shadow: 5px;
}

.trnTascAlertInfo {
	color:#666666;
	text-align:center;
	background-color:#FFF;
	border:1px solid #666666;
	border-left:10px solid #666666;
	padding:5px;
	border-radius:5px;
	-webkit-box-shadow: 5px;
	-moz-box-shadow: 5px;
	box-shadow: 5px;
}

.trnTascAlertWarning {
	color:#FFAF10;
	text-align:center;
	background-color:#FFF;
	border:1px solid #FFAF10;
	border-left:10px solid #FFAF10;
	padding:5px;
	border-radius:5px;
	-webkit-box-shadow: 5px;
	-moz-box-shadow: 5px;
	box-shadow: 5px;
}

.trnTascAlertBlue {
	color:#00BCD4;
	text-align:center;
	background-color:#FFF;
	border:1px solid #00BCD4;
	border-left:10px solid #00BCD4;
	padding:5px;
	border-radius:5px;
	-webkit-box-shadow: 5px;
	-moz-box-shadow: 5px;
	box-shadow: 5px;
}	

.trnFullScreenBtn
{
	width:100%;
	text-align:center;
}

.trnSearch button{
	width:20%;
	height:20px;
	padding:0;
	margin:0;
	text-align:right;
	background-color:transparent;
	border:none;
}

.trnSearch button svg{
	height:20px;
	padding:0;
	margin:5px;
	background-color:transparent;
	border:none;
}
/* ##### Genel Tanımlamalar Bitti ##### */





/* Checkbox button başladı */
.button-wrap {
	position: relative;
	text-align: center;
}

.button-label {
	display: inline-block;
	padding: 0 10px 0 10px; 
	height:40px;
	line-height:40px;

	cursor: pointer;
	color: #FFFFFF;
	background: #343434;
	/*box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.22);*/
	-webkit-transition: 0.3s;
	transition: 0.3s;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.button-label h1 {
	padding-top:5px;
	font-size: 1em;
	font-family: "Lato", sans-serif;
}

.button-label:hover {
	background: #d6d6d6;
	color: #101010;
	/*box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.32);*/
}

.button-label:active {
	-webkit-transform: translateY(2px);
	transform: translateY(2px);
	/*box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0px -1px 0 rgba(0, 0, 0, 0.22);*/
}

@media (max-width: 40em) {
	.button-label {
	padding: 0em 1em 3px;
	margin: 0.25em;
  }
}

#trnCardPaymentBtn:checked + .button-label {
	background: #DC2514;
	color: #efefef;
}

#trnCashPaymentBtn:checked + .button-label {
	background: #86A100;
	color: #efefef;
}

#trnBankPaymentBtn:checked + .button-label {
	background: #D89500;
	color: #efefef;
}

#trnDebtPaymentBtn:checked + .button-label {
	background: #666;
	color: #efefef;
}

#trnCardPaymentBtn .button-label:hover {
	background: #2ECC71;
	color: #e2e2e2;
}

#trnCashPaymentBtn .button-label:hover {
	background: #2ECC71;
	color: #e2e2e2;
}

#trnBankPaymentBtn .button-label:hover {
	background: #2ECC71;
	color: #e2e2e2;
}

#trnDebtPaymentBtn .button-label:hover {
	background: #2ECC71;
	color: #e2e2e2;
}


#trnRadioActiveBtn:checked + .button-label {
	background: #86A100;
	color: #efefef;
}

#trnRadioTaxActiveBtn:checked + .button-label {
	background: #86A100;
	color: #efefef;
}	

#trnRadioPassiveBtn:checked + .button-label {
	background: #DC2514;
	color: #efefef;
}

#trnRadioTaxPassiveBtn:checked + .button-label {
	background: #DC2514;
	color: #efefef;
}

/* Checkbox button bitti */





/* PopUp Başladı */
.trnPopUp{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	background-color:rgb(0,0,0,0.5);
	z-index:100000;
	display:block;
}

.trnPopUpContainer{
	width:500px;
	height:300px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-150px 0 0 -250px;
	background-color:#FFF;
	z-index:1000;
	display:block;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	box-shadow: 0 0 20px #333;
   -moz-box-shadow: 0 0 20px #333;
   -webkit-box-shadow: 0 0 20px #333;	
}


.trnPopUpContainer .trnPopUpContent{
	width:100%;
	height:250px;
	margin:0;
	padding:0;
}

.trnPopUpContainer .trnPopUpContent svg{
	width:100px;
	height:100px;
	margin:10px 0 10px 0;
	padding:0;
	fill: #F6831D;
}

.trnPopUpContainer .trnPopUpContent .trnButtonContainer{
	height:100px;
	line-height:100px;
	margin:10px 0 10px 0;
	padding:0;
}

.trnPopUpContainer .trnPopUpContent .title{
	width:100%;
	height:50px;
	line-height:50px;
	margin:0;
	font-size:30px;
	font-weight:bold;
	background-color:#23A9F2;
	color:#FFF;
	text-align:center;
}

.trnPopUpContainer .trnError .title{
	background-color:#ea1515;
	color:#FFF;
}

.trnPopUpContainer .trnWarning .title{
	background-color:#FFAF10;
	color:#FFF;
}

.trnPopUpContainer .trnSuccess .title{
	background-color:#17AB13;
	color:#FFF;
}

.trnPopUpContainer .trnError svg path{ 
	fill: #ea1515;
}

.trnPopUpContainer .trnWarning svg path{ 
	fill: #FFAF10;
}

.trnPopUpContainer .trnSuccess svg path{ 
	fill: #17AB13;
}

.trnPopUpContainer .trnPopUpContent .message{
	width:100%;
	height:200px;
	padding:10px;
	margin:0;
	font-size:12px;
	font-weight:bold;
	overflow:scroll;
	overflow-x:hidden;
	scrollbar-width: thin;
}

.trnPopUpContainer .trnPopUpContent .message p{
	width:100%;
	height:80px;
	padding:10px;
	margin:0;
	font-size:14px;
	font-weight:bold;
}

.trnPopUpContainer .trnPopUpFooter{
	width:100%;
	height:50px;
	line-height:50px;
	text-align:center;
	border-top:1px solid #158A9D;
}

.trnPopUpContainer .trnPopUpFooter button{
	font-size:16px;
}
/* PopUp Bitti */





/* Yükleniyor Başladı */
.trnLoader{
	position:absolute;
	height:100%;
	width:100%;
	top:0;
	left:0;
	z-index:1000000;
	display:block;
	background-color:rgb(0,0,0,0.5);
}

.trnLoaderContent{
	width:200px;
	height:200px;
	position:absolute;
	left:50%;
	top:50%;
	margin:-125px 0 0 -100px;
	text-align:center;
	color:#FFF;
}

.trnLoaderContent img{
	width:200px;
	height:200px;
}

.trnLoaderText{	
	width:200px;
	height:200px;
	line-height:200px;
	position:absolute;
	top:0;
	text-align:center;
}
/* ##### Yükleniyor Bitti ##### */





/* Ana Menü Başladı */
.trnTopArea{
	position:fixed;
	width:100%;
	height:60px;
	top:0;
	left:0;
	background-color:#000;
	color:#FFF;
	/*overflow:hidden;*/
	z-index:1000;
}

.trnTopArea .trnLogo{
	height:50px;
	line-height:50px;
	margin-top:5px;
	font-size:24px;
	color:#FFF;
	font-weight:bold;
}

.trnTopArea .trnLogo a{
	color:#FFF;
	text-decoration:none;
}

.trnTopArea .trnClockContainer{
	height:50px;
	margin-top:5px;	
	text-align:right;
	color:#FFF;
}

.trnTopArea .trnClockContainer .trnClock{
	font-weight:bold;	
	text-align:right;
	font-size:20px;
}

.trnTopArea .trnClockContainer .trnDate{
	text-align:right;
	font-size:16px;
}

.trnTopArea .trnHamburgerBtn{
	line-height:50px;
	margin-top:5px;
}

.trnTopArea .trnHamburgerBtn svg{
	height:40px;
	margin-top:5px;
}

.trnTopArea .trnHamburgerMenu{
	height:100%;
	margin-top:5px;
	z-index:1000000000;
}

.trnTopArea .trnHamburgerMenu ul{
	width:auto;
	margin-top:5px;
	float:right;
	margin:0;
	padding:0;
	list-style:none;
}

.trnTopArea .trnHamburgerMenu ul li{
	width:auto;
	line-height:40px;
	margin:0 0 0 5px;
	padding:5px 10px 5px 10px;
	float:left;
	list-style:none;
	background-color:#212121;
}

.trnTopArea .trnHamburgerMenu ul li:hover{
	background-color:#343434;	
}

.trnTopArea .trnHamburgerMenu ul li a{
	font-size:14px;
	color:#FFF;
	text-decoration:none;
}

.trnTopArea .trnHamburgerMenu ul li button{
	height:40px;
	line-height:40px;
	font-size:14px;
	color:#FFF;
	text-decoration:none;
	margin:0;
	padding:0;
}

.trnTopArea .trnHamburgerMenu ul li a:hover{
	color:#FFF;
	text-decoration:none;
}


.trnTopArea .trnHamburgerMenu ul li figure{
	width:60px;
	height:40px;
	line-height:40px;
	float:left;
	margin-right:5px;
	text-align:center;
}

.trnTopArea .trnHamburgerMenu ul li figure svg{
	height:30px;
	max-width:40px;
	margin:5px 0 0 10px;
	float:left;
	fill:#FFFFFF;
}

.trnTopArea .trnHamburgerMenu ul li figure img{
	height:30px;
	max-width:40px;
	margin:5px 0 5px 0;
	margin:0;
}




.trnTopArea .trnHamburgerDropMenu {
	width:300px;
	height:100%;
	position:fixed;
	z-index:1000000000;
	padding-top:50px;
	top:0;
	right:0;
	background-color:#212121;
	display:none;
}

.trnTopArea .trnHamburgerDropMenu ul{
	width:300px;
	height:100%;
	float:right;
	margin:0;
	padding:0;
	list-style:none;

	overflow:scroll;
	overflow-x:hidden;
	scrollbar-width: thin;		
}

.trnTopArea .trnHamburgerDropMenu ul li{
	width:300px;
	line-height:40px;
	margin:0;
	padding:0;
	float:none;
	list-style:none;
	background-color:#212121;
}

.trnTopArea .trnHamburgerDropMenu ul li ul
{
	width:100%;
	margin:0;
	padding:0;
	list-style:none;
}

.trnTopArea .trnHamburgerDropMenu ul li ul li
{
	width:100%;
	line-height:30px;
	margin:0;
	padding:5px 10px 5px 20px;
	list-style:none;
	border-bottom:1px solid #666;
}

.trnTopArea .trnHamburgerDropMenu ul li ul li:hover
{
	background-color:#000;
}

.trnTopArea .trnHamburgerDropMenu .trnToogleClose
{
	position:absolute;
	top:0;
	right:0;
	padding:0 10px 0 10px;
	font-size:24px;
	color:#FFF;
}

.trnTopArea .trnHamburgerDropMenu .trnToogleClose:hover
{
	background-color:#498AF4;
}




.trnTopArea .trnPage{
	text-align:left;
}
.trnTopArea .trnPage figure{
	width:50px;
	height:40px;
	line-height:40px;
	float:left;
	margin-right:5px;
	text-align:center;
}

.trnTopArea .trnPage figure svg{
	height:30px;
	max-width:40px;
	margin:5px 0 5px 0;
	fill:#FFFFFF;
}

.trnTopArea .trnPage figure img{
	height:40px;
	max-width:40px;
	margin:0;
}
/* ##### Ana Menü Bitti ##### */



/* ##### Buton Menü Başladı ##### */
.trnButtonMenu
{
	margin:0;
	padding:0;
	list-style:none;
}

.trnButtonMenu li
{
	width:auto;
	margin:0 0 0 5px;
	padding:0;
	list-style:none;
	cursor:pointer;
	float:right;
}

.trnButtonMenu li:hover
{
	background-color:#FFAF10;
	text-decoration:none;
}

.trnButtonMenu li a
{
	color:#FFF;
	text-decoration:none;
}
/* ##### Buton Menü Bitti ##### */


/* Title Alanı Başladı */

.trnTitleContainer figure 
{
	height:30px;
	float:left;
}


.trnTitleContainer h1{
	height:30px;
	line-height:30px;
	margin:0;
	padding:0;
	font-size:14px;
	font-weight:bold;
	color:#FFF;
}

.trnTitleContainer h2{
	height:15px;
	margin:0;
	padding:0;
	font-size:12px;
	font-weight:bold;
	color:#FFAF10;
}

.trnTitleContainer h3{
	height:15px;
	margin:0;
	padding:0;
	font-size:12px;
	font-weight:bold;
	color:#FFF;
}


.trnTitleContainer figure:hover h1{
	color:#FFF;
}

.trnTitleContainer figure:hover h2{
	color:#FFF;
}

.trnTitleContainer figure:hover h2,h3{
	color:#FFF;
}

.trnTitleContainer figure  img{
	max-width:40px;
	height:30px;
	float:left;
	margin-right:15px;
}

.trnTitleContainer figure svg{
	max-width:40px;
	height:30px;
	float:left;
	margin-right:15px;
}

.trnTitleContainer figure path{
	fill:#FFAF10;
}

.trnTitleContainer figure:hover path{
	fill:#FFF;
	color:#FFF;
}

/* ##### Title Alanı Bitti ##### */





/* ##### Kayıt Listele Başladı ##### */


.trnCollapse{
	width:100%;
	height: auto;
	float:left;
	padding:15px;
	background-color:#498AF4;
	display:none;
	font-size:14px;
	display:none;
	clear:both;
}



.trnCollapseBtn{
	width:100%;
	height:auto;
	padding:15px;
	font-size:12px;
	clear:both;
}

.trnSelectItem .trnCollapseBtn
{
	/*padding:0;*/
}

.trnSelectItemContainer{
	width:100%;
	height:auto;
	position:relative;
	display: table-cell;
	vertical-align: middle;
}

.trnSelectList .trnSelectItem{
	background-color:#343434;
	height:33.33%;
	display: table;
	cursor:pointer;
	color:#FFFFFF;
}

.trnSelectList .trnSelectItem:nth-child(even) {
  background-color: #EFEFEF;
  color:#404040;
}

.trnSelectList .trnSelectItem .trnGray
{
	color:#FFF;
}

.trnSelectList .trnSelectItem a{
	color:#FFFFFF;
	text-decoration:none;
}

.trnSelectList .trnSelectItem h1{
	width:100%;
	padding:20px;
	padding:0;
	font-size:24px;
	text-align:center;
}

.trnSelectList .trnSelectItem h1 small{
	color:#FFF;
}

.trnSelectList .trnSelectItem h2{
	width:100%;
	padding:20px;
	padding:0;
	font-size:18px;
	text-align:center;
}

.trnSelectList .trnSelectItem img{
	height:12px;
	margin:0 10px 0 5px;
}

.trnSelectList .trnSelectItem figure{
	height:40px;
	line-height:40px;
	text-align:center;
	font-size:12px;
}

.trnSelectList .trnSelectItem figure svg{
	height:40px;
	max-width:40px;
	fill:#FFFFFF;
}

.trnSelectList .trnSelectItem:nth-child(even) {
  background-color: #EFEFEF;
  color:#404040;
}

.trnSelectList .trnSelectItem:nth-child(even) a {
  color:#404040;
}

.trnSelectList .trnSelectItem:nth-child(even) figure svg{
	fill:#404040;
}

.trnSelectList .trnSelectItem:nth-child(even) .trnGray{
	color:#404040;
}

.trnSelectList .trnSelectItem:nth-child(even) small{
	color:#404040;
}

.trnSelectList .trnSelectItem .trnYellow{
	color:#FFAF10;
}

.trnRecordList .trnSelectItem{
	width:100%;
}


.trnRecordList .trnSelectItem:nth-child(even) {
  background-color: #EFEFEF;
  color:#404040;
}

.trnLeftArea .trnContentScroll{
	background-color:#404040;
}

.trnLeftArea .trnSelectItem{
	width:100%;
	background-color:#404040;
	height:10%;
	display: table;
	cursor:pointer;
	color:#FFFFFF;
}

/* ##### Kayıt Listele Bitti ##### */



/* ##### Listele Başladı ##### */

.trnList{
	width:100%;
	height:100%;
	position:relative;
	display: table;
	background-color:#EFEFEF;
}

.trnList .trnItem{
	width:100%;
	cursor:pointer;
	color:#000;
	background-color:#FFF;
	border-bottom:1px dashed #343434;
}

.trnList .trnItem figure{
	height:30px;
}

.trnList .trnItem figure img{
	height:30px;
}

.trnList .trnItem .trnCollapseBtn{
	width:100%;
	height:20%;
	display: table;
	cursor:pointer;
}

.trnList .trnItem .trnItemContainer{
	width:100%;
	height:20%;
	display: table;
	cursor:pointer;
	padding:15px;
	font-size:14px;
}

.trnList .trnItem:nth-child(even) {
  background-color: #EFEFEF;
  color:#404040;
}

.trnList .trnItem .trnRow{
	font-size:10px;
	font-weight:bold;
}

.trnBasketItemList
{
	width:100%;
	/*padding:10px;*/
	padding:0;
	margin:0;
	text-align:left;
	color:#343434;
}

.trnBasketItemList ul
{
	width:100%;
	margin:0;
	padding:0;
	list-style:none;
	text-align:left;
}

.trnBasketItemList ul li
{
	width:100%;
	margin:0;
	padding:10px 0 10px 0;
	list-style:none;
	border-bottom:1px dashed #FFF;
	text-align:left;
	color:#FFF;
}

.trnBasketItemList ol
{
	width:auto;
	min-width:30%;
	margin:0;
	padding:5px;
	float:right;
	list-style:none;
	text-align:left;
	border:1px solid #FFF;
}

.trnBasketItemList ol li
{
	width:100%;
	margin:0;
	padding:5px 0 5px 0;
	list-style:none;
	border:none;
	text-align:right;
	color:#FFF;
}

.trnBasketItemList ol li span
{
}

.trnBasketItemList ol li label
{
	width:100px;
}

/* ##### Listeleme Bitti ##### */


/* ##### Footer Başladı ##### */

.trnFooterContent{
	height:60px;
	line-height:60px;
	padding:0 15px 0 15px;
}

/* ##### Footer Bitti ##### */





/* ##### Klavye Başladı ##### */
.trnTotalPrice{
	width:100%;
	height:50px;
	line-height:50px;
	position:fixed;
	bottom:0;
	left:15px;
	font-size:18px;
	font-weight:bold;
	color:#FFF;
}


.trnKeyboard{
	width:100%;
	height:250px;
	line-height:50px;
	position:absolute;
	bottom:0;
	left:0;
	padding:0;
	font-size:18px;
	font-weight:bold;
	color:#FFF;
	z-index:100;
	background-color:#FEFEFE;
	display:none;
}

.trnKeyboardOpenClose{
	height:50px;
	line-height:50px;
	font-size:18px;
	font-weight:bold;
	color:#FFF;
}

.trnKeyboardOpenClose svg{
	height:30px;
	max-height:50px;
	margin-top:10px;
}

.trnKeyboard .trnDisplay{
	height:50px;
	line-height:50px;
	padding:5px 0 5px 5px;
	font-size:16px;
	color:#000;
	background-color:#33495F;
}

.trnKeyboard .trnDisplay .trnPay{
	width:70%;
	float:left;
	text-align:right;
	height:40px;
	line-height:40px;
	padding:0 15px 0 15px;
	font-size:16px;
	color:#000;
	background-color:white;
}

.trnKeyboard .trnDisplay .trnTotal{
	width:28%;
	float:right;
	text-align:right;
	height:40px;
	line-height:40px;
	padding:0 15px 0 15px;
	font-size:16px;
	color:#000;
}

.trnKeyboard .trnNumbers{
	width:70%;
	height:200px;
	line-height:auto;
	float:left;
	font-size:16px;
	color:#000;
}

.trnKeyboard .trnNumbers ul{
	width:100%;
	margin:0;
	padding:0;
	list-style:none;
}

.trnKeyboard .trnNumbers ul li{
	width:33.33%;
	height:50px;
	line-height:50px;
	text-align:center;
	position:statik;
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	background-color:#FFF;
	cursor:pointer;
}

.trnKeyboard .trnNumbers ul li:hover{
	background-color:#212121;
	color:#FFF;
}
.trnKeyboard .trnNumbers ul li:hover:nth-child(even){
	background-color:#212121;
	color:#FFF;
}

.trnKeyboard .trnNumbers ul li:nth-child(even) {
	background-color:#EFEFEF;
}

.trnKeyboard .trnButtons{
	width:30%;
	height:280px;
	line-height:auto;
	float:left;
	font-size:16px;
	color:#000;
}


.trnKeyboard .trnButtons ul{
	width:100%;
	margin:0;
	padding:0;
	list-style:none;
}

.trnKeyboard .trnButtons ul li{
	width:100%;
	height:70px;
	line-height:70px;
	text-align:center;
	position:statik;
	margin:0;
	padding:0;
	list-style:none;
	float:left;
}

.trnKeyboard .trnButtons ul li .trnBtn{
	height:70px;
	line-height:70px;
}

.trnKeyboard .trnButtons ul li .trnBtn svg{
	height:20px;
	margin-top:25px;
}

.trnCollapseClose:hover svg{
	fill:#FFF;
}
/* ##### Klavye Bitti ##### */




/* ##### Radio/Checkbox Başladı ##### */
.form-items {
  margin: 30px 0;
}
.form-items:first-child {
  margin-top: 0;
}
.form-items:last-child {
  margin-bottom: 0;
}
.form-items .form-title {
  margin-bottom: 12px;
}
.form-items .form-item {
  padding: 0 0 0 0;
  color: #AAAAAA;
  text-align:center;
}
.form-items .form-item input[type="checkbox"],
.form-items .form-item input[type="radio"] {
  display: none;
}
.form-items .form-item input[type="checkbox"] + label,
.form-items .form-item input[type="radio"] + label {
  position: relative; 
  padding: 0 15px 0 15px;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-color: #FFF;
  color: #17AB13;
  background-size: 15px;
  background-repeat: no-repeat;
  background-position: center left 10px;
  transition: .1s;
}
.form-items .form-item input[type="checkbox"]:checked + label,
.form-items .form-item input[type="radio"]:checked + label {
  padding-left: 36px;
  background-color: #17AB13;
  color: #FFF;
  background-image: url("../img/default/icons/tick.svg");
}
/* ##### Radio/Checkbox Bitti ##### */





/* ##### Radio/Checkbox Bitti ##### */
.trnRadioBtn {
  margin: 0;
}

.trnRadioBtn input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.trnRadioBtn label {
	height:30px;
	line-height:30px;
    display: inline-block;
    background-color: #343434;
	color:#FFF;
    padding: 0 20px 0 20px;
    border: none;
	cursor:pointer;
}

.trnRadioBtn label:hover {
  background-color: #666666;
}

.trnRadioBtn input[type="radio"]:focus + label {
    border: none;
}

.trnRadioBtn input[type="radio"]:checked + label {
	background-color:#17AB13;
	color:#FFF;
}
/* ##### Radio/Checkbox Bitti ##### */





/* ##### Select Başladı ##### */

.box select {
	background-color: transparent;
	color: #FFF;
	width: 100%;
	height:30px;
	border:1px solid #EFEFEF;
	font-size: 12px;
	-webkit-appearance: button;
	appearance: button;
	outline: none;
}

.box:hover::before {
	color: rgba(255, 255, 255, 0.6);
	background-color: #000;
}

.box select option {
	height:30px;
}
.box select option:hover{
	padding: 30px;
	background-color:red;
}
/* ##### Select Bitti ##### */





.trnWhiteBtn{
	background-color:#FFF;
	color:#555;
	font-weight:bold;
}

.trnWhiteBtn svg{
	fill:#555;
}

.trnWhiteBtn:hover {
	color:#000;
}

.trnWhiteBtn:hover svg{
	fill:#000;
	color:#000;
}

.trnWhite{ color:#FFF; }

.trnWhiteBorder{ border:2px solid #FFF; }

.trnWhiteBg{ background-color: #FFF; color:#212121 }

.trnWhiteBg .trnInputText{ border: 1px solid #212121; color:#212121;}

.trnWhiteBg ul li{ border-bottom: 1px dashed #212121; }



.trnRedBtn{
	background-color:#ea1515;
	color:#FFFFFF;
	font-weight:bold;
}

.trnRedBtn svg{
	fill:#FFFFFF;
}

.trnRedBtn:hover {
	color:#FFF;
}

.trnRedBtn:hover svg {
	fill:#FFF;
}

.trnRed{ color:#ea1515; }

.trnRedBorder{ border:2px solid #ea1515; border-bottom:2px solid #ea1515;}

.trnRedBg{ background-color: #ea1515; }

.trnRedBg .trnCollapseBtn{ background-color: #FF4340; }

.trnRedBg{ background-color: #ea1515; }

.trnRedBg .trnSelectItem{
	background-color:#ea1515;
	height:33.33%;
	display: table;
	cursor:pointer;
	color:#FFFFFF;
}

.trnRedBg .trnSelectItem .trnRed{
	color:#FFFFFF;
}

.trnRedBg .trnSelectItem:nth-child(even) {
  background-color: #EFEFEF;
  color:#404040;
}
.trnRedBg .trnSelectItem:nth-child(even) .trnRed{
	color:#ea1515;
}



.trnBlueBtn{
	background-color:#498AF4;
	color:#FFFFFF;
	font-weight:bold;
}

.trnBlueBtn svg{
	fill:#FFFFFF;
}

.trnBlueBtn:hover {
	color:#FFF;
}
.trnBlueBtn:hover svg{
	fill:#FFF;
}

.trnBlue{ color:#498AF4; }

.trnBlueBorder{ border:2px solid #498AF4; }

.trnBlueBg{ background-color: #498AF4; }

.trnBlueBg .trnSelectItem{
	background-color:#498AF4;
	height:33.33%;
	display: table;
	cursor:pointer;
	color:#FFFFFF;
}

.trnBlueBg .trnSelectItem:nth-child(even) {
  background-color: #EFEFEF;
  color:#404040;
}

.trnBlueBg .trnCollapseBtn{ background-color: #498AF4; }





.trnGreenBtn{
	background-color:#17AB13;
	color:#FFFFFF;
	font-weight:bold;
}

.trnGreenBtn svg{
	fill:#FFFFFF;
}

.trnGreenBtn:hover {
	color:#FFF;
}
.trnGreenBtn:hover svg{
	fill:#FFF;
}

.trnGreen{ color:#17AB13; }

.trnGreenBorder{ border:2px solid #17AB13; }

.trnGreenBg{ background-color: #17AB13; }

.trnGreenBg .trnCollapseBtn{ background-color: #77EB1E; }

.trnGreenBg{ background-color: #17AB13; }

.trnGreenBg .trnSelectItem{
	background-color:#17AB13;
	height:33.33%;
	display: table;
	cursor:pointer;
	color:#FFFFFF;
}

.trnGreenBg .trnSelectItem:nth-child(even) {
  background-color: #EFEFEF;
  color:#404040;
}



.trnYellowBtn{
	background-color:#FFAF10;
	color:#FFFFFF;
	font-weight:bold;
}

.trnYellowBtn svg{
	fill:#FFFFFF;
}

.trnYellowBtn:hover {
	color:#FFF;
}

.trnYellowBtn:hover svg{
	fill:#FFF;
}

.trnYellow{ color:#FFAF10; }

.trnYellowBorder{ border:2px solid #FFAF10; }

.trnYellowBg{ background-color: #FFAF10; }

.trnYellowBg .trnSelectItem{
	background-color:#FFAF10;
	height:33.33%;
	display: table;
	cursor:pointer;
	color:#FFFFFF;
}

.trnYellowBg .trnSelectItem:nth-child(even) {
  background-color: #EFEFEF;
  color:#404040;
}





.trnGrayBtn{
	background-color:#343434;
	color:#AAA;
	font-weight:bold;
}

.trnGrayBtn svg{
	fill:#AAA;
}

.trnGrayBtn:hover{
	color:#FFF;
}

.trnGrayBtn:hover svg{
	fill:#FFF;
	color:#FFF;
}

.trnGray{ color:#343434; }

.trnGrayBorder{ border:2px solid #343434; }

.trnGrayBg{ background-color: #343434; }

.trnGrayBg .trnCollapseBtn{ background-color: #343434; }


.trnBlackBtn{
	background-color:#000;
	color:#FFF;
	font-weight:bold;
}

.trnBlackBtn svg{
	fill:#FFF;
}

.trnBlackBtn:hover{
	color:#FFF;
}

.trnBlackBtn:hover svg{
	fill:#FFF;
	color:#FFF;
}

.trnBlack{ color:#000; }

.trnBlackBorder{ border:2px solid #000; border-bottom:2px solid #000;}

.trnBlackBg{ background-color: #000; }

.trnAddPopUp{display:none;}

/* Giriş Yap Başladı */
.trnLoginArea{
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background-color:#498AF4;
	color:#FFF;
	overflow:hidden;
	z-index:1000000;
	display: table-cell;
	vertical-align: middle;
}

.trnLoginArea .trnLoginContainer{
	width:500px;
	min-height:280px;
	position:absolute;
	left:50%;
	top:50%;
	margin:-140px 0 0 -250px;
}

.trnLoginArea .trnLoginContainer .trnLoginTitle{
	width:500px;
	height:50px;
	line-height:50px;
	text-align:center;
}
.trnLoginArea .trnLoginContainer .trnLoginTitle h1{
	margin:0;
	padding:0;
	font-size:30px;
}

.trnLoginArea .trnLoginContainer .trnLoginForm{
	width:500px;
	min-height:230px;
	padding:15px 20px 15px 20px;
	border:1px solid #FFF;
	background-color:#000;
}

.trnLoginArea .trnLoginContainer .trnLoginForm .trnLoginReturn{
	margin-top:10px;
	font-size:12px;
}

.trnLoginArea .trnLoginContainer .trnLoginForm .trnLoginReturn a{
	text-decoration:none;
	color:#343434;
}