.trnPanel
{	
	width:100%;
	height:100%;
	position:absolute;
	z-index:996;
	overflow: hidden;
	border-radius:0;
	-moz-border-radius:0;
	-webkit-border-radius:0;	
	/*yatay-konum, dikay-konum, bulanıklık,yayılma,renk*/
	-webkit-box-shadow: 0 1px 10px #131313;
	-moz-box-shadow: 0 1px 10px #131313;
	box-shadow: 0 1px 10px #131313;	
	background-color:#131313;
}

.trnPanel .trnPanelHeader
{
	width:100%;
	height:100px;
	position:absolute;
	z-index:920;
	flex-shrink: 0;   /* boyu sabit */
	background-color:#131313;
	display:none;
}

.trnPanel .trnPanelHeader .trnPanelTopHeader
{
	width:100%;
	color:#EDEDED;	
	font-size: var(--font-size-lg);
	/*background-color:#EDEDED;*/
	cursor:move;
	border-bottom:1px solid #131313;
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelTitle
{
	display: block;
	width: 100%;              /* container genişliğini otomatik alır */
	max-width: 100%;          /* taşmayı engeller */
	white-space: nowrap;      /* tek satırda tutar */
	overflow: hidden;         /* taşanı gizler */
	text-overflow: ellipsis;  /* ... ekler */
	box-sizing: border-box;   /* padding eklense bile taşma olmaz */
	height:100px;
	line-height:100px;
	padding-left:15px;
	float:left;
	font-size: var(--font-size-lg);
	
	
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelTitle i
{
	margin-right:10px;
	font-size: var(--font-size-lg);
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelTitle span
{
	line-height:100px;
	margin-left:15px;
	font-family: metropolis-thin;
	font-size: var(--font-size-md);
	font-weight:200;
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav
{
	width:100%;
	float:right;
	height:100px;
	line-height:100px;
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav .trnHiddenPanelBtn
{
	width:30px;
	height:30px;
	float:left;
	margin:0;
	padding:0;
	color:#EDEDED;
	background-color:transparent;
	border:none;
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav .trnHiddenPanelBtn i
{
	font-size: var(--font-size);
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav button:hover i
{
	color:#006165;
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav .trnClosePanelBtn
{
	width:30px;
	height:30px;
	float:left;
	margin:0 10px 0 10px;
	padding:0;
	color:red;
	background-color:transparent;
	border:none;
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav .trnClosePanelBtn i
{
	font-size: var(--font-size);
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav .trnRestorePanelBtn
{
	width:30px;
	height:30px;
	float:left;
	margin:0 0 0 10px;
	padding:0;
	color:#EDEDED;
	background-color:transparent;	
	border:none;
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav .trnRestorePanelBtn i
{
	font-size: var(--font-size);
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav .trnAlignLeftPanelBtn
{
	width:30px;
	height:30px;
	float:left;
	margin:0 0 0 10px;
	padding:0;
	color:#EDEDED;
	background-color:transparent;	
	border:none;
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav .trnAlignLeftPanelBtn i
{
	font-size: var(--font-size);
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav .trnAlignRightPanelBtn
{
	width:30px;
	height:30px;
	float:left;
	margin:0 0 0 10px;
	padding:0;
	color:#EDEDED;
	background-color:transparent;	
	border:none;
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav .trnAlignRightPanelBtn i
{
	font-size: var(--font-size);
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav button:hover
{
	color:#EDEDED;
	/*background-color:#EDEDED;*/
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav form
{
	width:100%;
	height:34px;
	margin:33px 0 0 0;
	display: flex;
	justify-content: flex-end; /* sağa yasla */
	gap: 10px; /* aralarına boşluk */
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav form .form-item
{
	width:auto;
}

.trnPanel .trnPanelContent
{

	width:100%;
	height:100%;
	position:absolute;
	top:0;
	color:#EDEDED;
	background-color:#131313;
}

.trnPanel .trnPanelContent .trnScrollContainer
{
	width:100%;
	height:100%;
	/*padding:15px 0 15px 0;*/
	padding:0;
	position:absolute;
	overflow:hidden;
}

.trnShowHeader .trnPanelHeader
{
	display:block !important;
}

.trnShowHeader .trnPanelContent  .trnScrollContainer
{
	padding:100px 0 15px 0!important;
}

.trnPanel .trnShowFooter .trnScrollContainer
{
	padding-bottom:120px!important;
}

.trnPanel .trnPanelContent .trnFooter
{
	width:100%;
	height:60px;
	position:fixed;
	right:0;
	bottom:0;
	z-index:999;
	background-color:#131313;
	color:#FFF;
	display:none;
	
    align-items: center;	
	padding:0 15px 0 15px;	
}

.trnPanel .trnPanelContent .trnShowFooter .trnFooter
{
	display:block;
	display: flex;
	justify-content: center; /* ortala */
}

.trnPanel .trnPanelContent .trnShowFooter .trnFooter
{
	display:block;
	display: flex;
	justify-content: center; /* ortala */
}

.trnPanel .trnPanelContent .trnFooter ul
{
	width:auto;
	height:40px;
	margin:10px 0 0 0;
	padding:0;
	list-style:none;
}

.trnPanel .trnPanelContent .trnFooter ul li
{
	width:auto;
	padding:0;
	margin:0 0 0 5px;
	list-style:none;
	cursor:pointer;
}

.trnPanel .trnPanelContent .trnFooter .trnBtn
{
	border-radius:34px;
	-moz-border-radius:34px;
	-webkit-border-radius:34px;	
}

.trnPanel .trnPanelContent .trnLeftContent
{
	width: 300px;
	height: 100%;
	position: fixed;
	top:0;
	left: 0;
	padding:60px 0 0 0!important;
	overflow: hidden;
	background-color: #ffffff;
	z-index: 2;
}

.trnPanel .trnPanelContent .trnCenterContent
{
	width: 100%;
	position: fixed;
	top:0;
	left: 0;   /* soldan sonra başlat */
	right: 0;  /* sağ başlamadan bitir */
	padding:75px 235px 15px 235px;
	height: 100%;
	overflow: auto;
	z-index: 1;
}

.trnPanel .trnPanelContent .trnRightContent
{
	width: 300px;
	height: 100%;
	position: fixed;
	right: 0;
	top:0;
	padding:60px 0 0 0!important;
	overflow: hidden;
	background-color: #ffffff;
	z-index: 3;
}



.trnPanel .trnPanelContent.trnRightFullContent .trnCenterContent
{
	display:none !important;
}

.trnPanel .trnPanelContent.trnRightFullContent .trnRightContent
{
	width: 100%;
	height: 100%;
	right: 0;
	top:0;
	padding:60px 0 0 0!important;
	overflow: hidden;
	z-index: 1;
	background-color:transparent;
}



.trnPanel .trnPanelContent .w5
{
	width:5%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	/*background-color:#131313;*/
	color:#EDEDED;
}

.trnPanel .trnPanelContent .w10
{
	width:10%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	/*background-color:#131313;*/
	color:#EDEDED;
}

.trnPanel .trnPanelContent .w15
{
	width:15%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	/*background-color:#131313;*/
	color:#EDEDED;
}

.trnPanel .trnPanelContent .w20
{
	width:20%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	/*background-color:#131313;*/
	color:#EDEDED;
}

.trnPanel .trnPanelContent .w25
{
	width:25%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	/*background-color:#131313;*/
	color:#EDEDED;
}

.trnPanel .trnPanelContent .w30
{
	width:30%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	/*background-color:#131313;*/
	color:#EDEDED;
}

.trnPanel .trnPanelContent .w35
{
	width:35%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	/*background-color:#131313;*/
	color:#EDEDED;
}

.trnPanel .trnPanelContent .w40
{
	width:40%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	/*background-color:#131313;*/
	color:#EDEDED;
}

.trnPanel .trnPanelContent .w45
{
	width:45%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	/*background-color:#131313;*/
	color:#EDEDED;
}

.trnPanel .trnPanelContent .w50
{
	width:50%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	/*background-color:#EDEDED;*/
	color:#EDEDED;
}

.trnPanel .trnPanelContent .w55
{
	width:55%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	/*background-color:#EDEDED;*/
	color:#EDEDED;
}

.trnPanel .trnPanelContent .w60
{
	width:60%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	/*background-color:#EDEDED;*/
	color:#EDEDED;
}

.trnPanel .trnPanelContent .w65
{
	width:65%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	/*background-color:#EDEDED;*/
	color:#EDEDED;
}

.trnPanel .trnPanelContent .w70
{
	width:70%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	/*background-color:#EDEDED;*/
	color:#EDEDED;
}

.trnPanel .trnPanelContent .w75
{
	width:75%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	/*background-color:#EDEDED;*/
	color:#EDEDED;
}

.trnPanel .trnPanelContent .w80
{
	width:80%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	/*background-color:#EDEDED;*/
	color:#EDEDED;
}

.trnPanel .trnPanelContent .w85
{
	width:85%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	/*background-color:#EDEDED;*/
	color:#EDEDED;
}

.trnPanel .trnPanelContent .w90
{
	width:90%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	/*background-color:#EDEDED;*/
	color:#EDEDED;
}

.trnPanel .trnPanelContent .w95
{
	width:95%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	/*background-color:#EDEDED;*/
	color:#EDEDED;
}

.trnPanel .trnPanelContent .w100
{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	/*background-color:#EDEDED;*/
	color:#EDEDED;
}

.trnPanel .trnPanelContent .ls5
{
	left:5%;
}

.trnPanel .trnPanelContent .ls10
{
	left:10%;
}

.trnPanel .trnPanelContent .ls15
{
	left:15%;
}

.trnPanel .trnPanelContent .ls20
{
	left:20%;
}

.trnPanel .trnPanelContent .ls25
{
	left:25%;
}

.trnPanel .trnPanelContent .ls30
{
	left:30%;
}

.trnPanel .trnPanelContent .ls35
{
	left:35%;
}

.trnPanel .trnPanelContent .ls40
{
	left:40%;
}

.trnPanel .trnPanelContent .ls45
{
	left:45%;
}

.trnPanel .trnPanelContent .ls50
{
	left:50%;
}

.trnPanel .trnPanelContent .ls55
{
	left:55%;
}

.trnPanel .trnPanelContent .ls60
{
	left:60%;
}

.trnPanel .trnPanelContent .ls65
{
	left:65%;
}

.trnPanel .trnPanelContent .ls70
{
	left:70%;
}

.trnPanel .trnPanelContent .ls75
{
	left:75%;
}

.trnPanel .trnPanelContent .ls80
{
	left:80%;
}

.trnPanel .trnPanelContent .ls85
{
	left:85%;
}

.trnPanel .trnPanelContent .ls90
{
	left:90%;
}

.trnPanel .trnPanelContent .ls95
{
	left:95%;
}

.trnPanel .trnPanelContent .ls100
{
	left:100%;
}

@media only screen and (max-width: 1024px),(min-device-width: 768px) and (max-device-width: 1024px)
{
	
	.trnPanel .trnPanelHeader .trnPanelHeaderContent .trnPanelFilter
	{
		display:block;
	}
	
	.trnHiddenPanelBtn
	{
		display:none;
	}
	
	.trnAlignLeftPanelBtn
	{
		display:none;
	}
	
	.trnRestorePanelBtn
	{
		display:none;
	}
	
	.trnAlignRightPanelBtn
	{
		display:none;
	}
	
}


.trnMediaCenter .mediaSelectButton
{
	width:100%;
	height:200px;
	padding:10px;
	text-align:center;
	background-color:#EDF2F6;
	border:3px solid #EEEEEE;
}

.trnMediaCenter .mediaSelectButton figure
{
	width:100%;
	height:100px;
	line-height:100px;
}

.trnMediaCenter .mediaSelectButton figure img
{
	max-height:100px;
	max-width:100%;
}

.trnMediaCenter .mediaSelectButton figure .frontText
{
	max-width:100%;
	height:100px;
	line-height:100px;
	font-size: var(--font-size-lg);
}

.trnMediaCenter .trnActive
{
	border:3px solid #F00;
}

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

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

.trnRemoveItem
{
	width:20px;
	height:20px;
	position:absolute;
	right:0;
	line-height:20px;
	text-align:center;
	font-size: var(--font-size);
	background-color:red;
	color:#EDEDED;
	cursor:pointer;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;			
}

.trnRemoveItem:hover
{
	color:#EDEDED;
	background-color:gray;
}

.trnDeleteItem
{
	width:20px;
	height:20px;
	position:absolute;
	right:15px;
	line-height:20px;
	text-align:center;
	font-size: var(--font-size);
	background-color:red;
	color:#EDEDED;
	cursor:pointer;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;			
}

.trnDeleteItem:hover
{
	color:#EDEDED;
	background-color:gray;
}

.trnPictureResult
{
	width:100%;
	height:130px;
	line-height:130px;
	text-align:center;
	background-color:#EDEDED;
	border:1px solid #131313;
	font-size: var(--font-size-xs);
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
}

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

.trnPictureResult i
{
	font-size: var(--font-size-xs);
}

.trnPictureResult .frontText
{
	max-width:100%;
	height:130px;
	line-height:130px;
	font-size: var(--font-size-lg);
}

.trnAddObject
{
	width:100%;
	height:130px;
	padding:35px 0 35px 0;
	text-align:center;
	background-color:#EDEDED;
	border:1px solid #131313;
	font-size: var(--font-size-xs);
}

.trnAddObject div
{
	height:30px;
	line-height:30px;
}

.trnAddObject i
{
	font-size: var(--font-size-md);
}

.trnObjectList
{
	width:100%;
	height:130px;
	text-align:center;
	background-color:#EDEDED;
	border:1px solid #131313;
	font-size: var(--font-size);
}

.trnObjectList div
{
	height:30px;
	line-height:30px;
	/*background-color:#131313;*/
}

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

.trnObjectList .frontText
{
	max-width:100%;
	height:100px;
	line-height:100px;
	font-size: var(--font-size-lg);
}

.trnIconResult
{
	width:100%;
	height:50px;
	line-height:50px;
	text-align:center;
	background-color:#EDEDED;
	border:1px solid #131313;
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
}

.trnIconResult img
{
	max-width:100%;
	max-height:100%;
}

.trnFormElementContainer
{
	width:100%;
	height:200px;
	padding:5px;
	border:1px solid #131313;
}

.trnFormElementContainer .trnFormElementScroll
{
	width:100%;
	height:100%;
	overflow-y: auto;
}

.requestElement
{
	margin-bottom:15px;
	border-bottom:1px solid #131313;
}