@font-face 
{
	font-family: "Symbols";
	src: url("../assets/EmojiSymbols-Regular.woff") format('woff');
	font-weight: normal;
	font-style: normal;
}

:root 
{
	--system_main_color: #232220;
	--system_red: #ce1527;
	--system_green: #2E8B57;
	--system_white: #fcfcfc;
	--system_lighter_gray: #eeedeb;
	--system_light_gray: #e5e4e2;
	--system_gray: #babdb6;
	--system_dark_gray: #8a8d86;
	
	--system_theme_color: var(--system_red);
	--system_theme_hover_color: #de2537;
	--system_green_hover_color: #3e9c68;
	--system_gray_hover_color: #3e9c68;
	
	--system_font: Mulish,Arial,sans-serif;
	--system_title_font: Mulish,Arial,sans-serif;
	--system_line_height: 1.4em;
	
	--container_bg_color: var(--system_white);
	--container_shadow: 0px 0px 10px -3px var(--system_dark_gray);
	--container_padding: 20px;
	--container_header_font: 700 15px var(--system_title_font);
	--container_header_color: var(--system_red);
	--container_header_line_height: 2.5em;
	--container_element_border: 1px solid #ccc;
	--container_border_radius: 8px;
	
	--info_note_bg_color: #fff176;
	--hover_bg_color: #eeeeec;
	--select_bg_color: #cacdc6;
	
	--button_bg_color: var(--system_red);
	--button_hover_bg_color: #ee3547;
}

body
{
	background-color: #e3e2e0;
	overflow-x: hidden;
	
	&:after
	{
		content: "";
		position: absolute;
		top: 0px; left: 0px; right: 0px;
		
		display: block;
		height: 0px;
		background-color: rgba(0,0,0,0.90);
		transition: 0s;
		z-index: 2;
	}
	
	&.inactive:after { height: 100%; }
}

*
{
	padding: 0px;
	margin: 0px;
	border: 0px;
	outline: none;
}

strong
{
	font: inherit;
	font-weight: 700;	
}

em
{
	font: inherit;
	font-style: italic;
}

u
{
	font: inherit;
	text-decoration: underline;
}

sup, sub
{
	font: inherit;
	font-size: 0.83em;
	font-style: italic;
}

ul
{
	list-style: none;
}

a
{
	text-decoration: none;
	outline: none;
	cursor: hand;
	cursor: pointer;
	color: black;
	
	&:visited { color: black; }
}

button, a.button_like
{
	position: relative;
	
	display: inline-block;
	vertical-align: middle;
	background: 0;
	line-height: 1.5em;
	font: 600 12px var(--system_font);
	transition: 0.35s;
}

button::-moz-focus-inner
{
	position: relative;
	
	display: inline-block;
	border: 0;
	outline: none;
	transition: 0.35s;
	cursor: pointer;
}

button:hover, select:hover
{
	cursor: pointer;
}

button:disabled, a.button_like:disabled
{
	cursor: default;
	opacity: 0.5;
}

/*Sayfa Bileşenleri*/
.top_panel
{
	position: relative;
	
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	
	height: 56px;
	background-color: var(--system_main_color);
	box-shadow: var(--container_shadow);
	z-index: 10000;
	
	& > div 
	{
		flex: none; 
		
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		
		
		&.middle_box { flex: 1; }
		
		&.left_box > a
		{
			display: inline-block;
			background: #434240;
			font-size: 0px;
			& > img { width: auto; height: 30px; padding: 13px 10px; }
		}
		&.right_box
		{
			& > p.user_info { text-align: right; }
			& > form 
			{
				height: 100%; overflow: hidden;
				& > img { height: 56px; } 
			}
		}
	}
	
	& p 
	{
		margin: 0px 20px;
		font: 600 13px/1.4em var(--system_title_font);
		color: #fafafa;
		
		& > span
		{
			font: inherit;
			color: #888;
			font-size: 12.5px;
			letter-spacing: 0px;
		}
	}
	
	& button
	{
		position: relative;
		height: 56px;
		padding: 16px 18px;
		background-color: transparent;
		margin-left: 1px;
		text-align: left;
		
		& > * { display: inline-block; vertical-align: middle; }
		& > img { width: 20px; & + * { margin-left: 15px; } }
		& > span, & > p
		{
			font: 600 12px/1.4em var(--system_font);
			color: #fafafa;
			letter-spacing: 1px;
		}
		&:hover { background-color: rgba(255,255,255,0.15); }
		&:focus:after
		{
			content: "";
			position: absolute;
			top: 7px; left: 7px; right: 7px; bottom: 7px;
			border: 1px dashed rgba(255,255,255,0.25);
			border-radius: 4px;
		}
	}
	
	& div.expander, & button.expander
	{
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		width: 56px;
		font-size: 0px;
		
		white-space: nowrap;
		overflow: hidden;
		transition: 0.3s;
		
		&.expand { width: 227px; background-color: rgba(255,255,255,0.15); }
		&.wide.expand { width: 275px; }
		&:hover { background-color: rgba(255,255,255,0.15); }
	}
	
	& div.expander
	{
		& > button:first-child { width: 56px; & > img.flip { transform: scaleX(-1); } }
		& > button#authority_button { & > img { width: 18px; }}
		& > *:not(:first-child) { display: inline-flex; width: 0px; margin-left: 0px; overflow: hidden; }
		&.expand { & > *:not(:first-child) { width: auto; } }
		
		& button:hover { background-color: transparent; }
		& > form#switch_context_form > button, & > button#authority_details_button
		{
			height: auto;
			margin-left: 0px;
			padding: 0px;
			border: none;
			
			&:focus:after { content: none; border: none; }
			&:focus > span, &:hover > span, &:focus > p > span, &:hover > p > span { text-decoration: underline; }
			&#authority_details_button { & > * { margin: 0px; } }
		}
	}
	
	& button.expander
	{
		& > img:first-child.flip { transform: scaleX(-1); }
		& > span { display: inline-flex; width: 0px; overflow: hidden; }
		&.expand > span { width: auto }
	}
}

.top_panel ul.account_settings_menu
{
	display: inline-block;
	position: absolute;
	right: -284px; top: 56px;
	width: 284px;
	padding-top: 15px;
	background-color: #fff;
	opacity: 0;
	transition: 0.3s;
	overflow: hidden;
}

.top_panel ul.account_settings_menu.displayed_state
{
	right: -1px;
	opacity: 1;
}

.top_panel ul.account_settings_menu li button,
.top_panel ul.account_settings_menu li a
{
	display: inline-block;
	width: 100%;
	font: 600 12.5px var(--system_font);
	padding: 1.8em 2em;
	border-left: 0;
	color: var(--system_main_color);
}

.top_panel ul.account_settings_menu li button img,
.top_panel ul.account_settings_menu li a img
{
	display: inline-block;
	height: auto; width: 12px;
	margin-right: 20px;
	vertical-align: middle;
}

.top_panel ul.account_settings_menu li button span,
.top_panel ul.account_settings_menu li a span
{
	display: inline-block;
	font: inherit;
	color: inherit;
	vertical-align: middle;
	white-space: nowrap;
}

.top_panel ul.account_settings_menu li button:hover,
.top_panel ul.account_settings_menu li a:hover
{
	background-color: var(--hover_bg_color);
}

.top_panel button#logout_button
{
	background-color: var(--button_bg_color);
}

.top_panel button#logout_button:hover, .top_panel button#logout_button:focus
{
	background-color: var(--button_hover_bg_color);
}

/*Sol İşlem Menüsü*/
.left_panel
{
	position: absolute;
	top: 56px; left: -300px; bottom: 0px;
	width: 300px;
	padding-top: 15px;
	background-color: #fff;
	opacity: 0;
	overflow: hidden;
	z-index: 10;
	transition: 0.3s;
	
	&.displayed_state
	{
		left: 0px;
		opacity: 1;
		box-shadow: var(--container_shadow);
	}
}

.left_panel li
{
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	
	&.accordion_item
	{
		flex-flow: column nowrap;
		align-items: stretch;
	
		& > ul
		{
			display: none;
			max-height: 0px;
			overflow: hidden;
			opacity: 0;
			
			& > li { background-color: var(--hover_bg_color); }
		}
	}
	&.disabled { opacity: 0.5; }
}

.left_panel li a, .left_panel li a:visited, 
.left_panel li.accordion_item button
{
	flex: 1;
	background-color: inherit;
	font: 600 12.5px/1em var(--system_font);
	padding: 1.8em 2em;
	color: #232220;
	text-align: left;
}

.left_panel li a span, .left_panel li.accordion_item button span
{
	display: block;
	position: relative;
	padding-left: 0px;
	font: inherit;
	white-space: nowrap;
}

.left_panel li.accordion_item a span
{
	margin-left: 10px;
}

.left_panel li a p::before, 
.left_panel li.accordion_item button span::before
{
	content: "";
	display: inline-block;
	position: absolute;
	top: 1px; right: 0px;
	width: 0px; height: 0px; 
	border-top: 0.45em solid transparent;
	border-bottom: 0.45em solid transparent;
	border-left: 0.68em solid #555;
	transition: 0.2s;
	transform: rotate(0deg);
}

.left_panel li.accordion_item button span.rotated::before
{
	content: "";
	transition: 0.15s;
	transform: rotate(90deg);
}

.left_panel li a:hover, .left_panel li a:focus, 
.left_panel li button:hover, .left_panel li button:focus,
.left_panel li.accordion_item a:hover, .left_panel li.accordion_item a:focus
{
	background-color: var(--hover_bg_color);
}
/*Sol İşlem Menüsü*/

.content_area
{
	position: relative;
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	overflow: auto;
	padding: 5px;
	
	/*background-image: url(../visual/bg/abstract_01.jpg);
	background-size: cover;*/
}

.content_area > *
{
	flex: 1;
	margin: 10px;
}

.dbman_result_container
{
	position: absolute;
	top: 20px; right: 46px;
	background-color: rgb(0, 180, 0);
	padding: 20px;
	border-radius: 5px;
	box-shadow: var(--container_shadow);
	z-index: 1000000;
}

.dbman_result_container > *
{
	display: inline-block;
	vertical-align: middle;
}

.dbman_result_container p
{
	font: 600 14px var(--system_font);
	color: var(--system_white);
	margin-right: 45px;
}

.dbman_result_container.delete
{
	background-color: rgb(200, 0, 0);
}

.dbman_result_container.edit
{
	background-color: rgb(248, 166, 35);
}

.dbman_result_container button
{
	flex: none;
	width: auto;
	background: none;
	outline: none;
	font: 700 15px Symbols,var(--system_font);
	color: var(--system_white);
	transition: 0.2s;
}

.dbman_result_container button:hover
{
	color: red;
	text-shadow: 0px 0px 2px #aaa;
}

.table_container
{
	background-color: var(--container_bg_color);
	box-shadow: var(--container_shadow);
	padding: var(--container_padding);
	margin-bottom: 15px;
	border-radius: var(--container_border_radius);
	
	& table { width: 100%; }
}
.table_container > header
{
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	
	margin-bottom: 20px;
	
	& > div { flex: none; }
	& > h2:first-child 
	{ 
		flex: 1; 
		font: var(--container_header_font);
		color: var(--container_header_color);
		line-height: var(--container_header_line_height);
	}
	& > div.controls
	{
		font-size: 0px;
		&:not(:first-child) { border-left: 1px solid black; margin-left: 20px; }
		& > *
		{
			position: relative;
			padding: 0px 0px 0px 18px; margin-left: 20px;
			line-height: 1em;
			vertical-align: middle;
			
			&:disabled { opacity: 0.4; }
			&:before
			{
				content: "";
				
				position: absolute;
				top: calc(0.5em - 6px); left: 0px;
				
				display: inline-block;
				height: 12px; width: 12px;
				background-size: contain;
				background-repeat: no-repeat;
			}
			
			&#new_item_button:before 		{ background-image: url(../visual/table_icons/plus.png); }
			&#delete_item_button 			{  color: var(--system_red); padding-left: 16px; &:before {  width: 10px; background-image: url(../visual/table_icons/trash.png); }}
			&#edit_item_button:before 		{ background-image: url(../visual/table_icons/edit.png); }
			&#export_table_button:before 	{ background-image: url(../visual/table_icons/export.png); }
		}
	}
	& > div.filters
	{
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		
		position: relative;
		
		& > input
		{
			width: 70px;
			padding: 10px 10px 10px 33px;
			background-color: #f0f0f0;
			border-radius: 20px;
			border: none;
			outline: 0;
			transition: 0.3s;
			
			&:focus, &:not(:placeholder-shown) { width: 200px; }
		}
		
		&:before
		{
			content: "";
			position: absolute;
			top: calc(50% - 6px); left: 15px;
			height: 12px; width: 12px;
			
			background-image: url(../visual/table_icons/search.png);
			background-size: 12px auto;
			background-repeat: no-repeat;
		}
	}
}

.content_container
{
	flex: 0;
	
	position: relative;
	display: flex;
	width: 380px; max-width: 380px; min-width: 380px;
	min-height: 380px;
	background-color: var(--container_bg_color);
	box-shadow: var(--container_shadow);
	border-radius: var(--container_border_radius);
	
	& > div
	{
		flex: none;
		
		display: none;
		color: #333;
		
		&.placeholder
		{
			flex-flow: column nowrap;
			align-items: center;
			justify-content: center;
			margin: var(--container_padding);
			overflow: hidden;
			
			& > img 
			{ 
				height: auto; width: 34px;
				&.page_logo { height: 64px; width: auto; }
				& + * { margin-top: 1em; }
			}
			&#loading_placeholder > img 
			{
				height: 32px; width: 32px; 
				opacity: 0.80 
			}
			& > h2 
			{
				font: 700 16px/var(--system_line_height) var(--system_font);
				color: var(--system_main_color); 
			}
			& > p
			{
				font: 400 14px/var(--system_line_height) var(--system_font);
				margin-top: 10px;
				color: var(--system_main_color);
				text-align: center;
				
				& + p, & + button { margin-top: 1em; }
			}
		}
		
		&.shown { flex: 1; display: flex; }
			
		&.data_card
		{
			flex-flow: column nowrap;
			margin: var(--container_padding) 0px;
			
			& > * { flex: none; margin-left: var(--container_padding); margin-right: var(--container_padding); }
			& > div { margin-top: 15px; }
			
			/*QR*/
			& > div.qr_container
			{
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
				justify-content: center;
				
				max-height: 160px;
				overflow: hidden;
				
				& > img
				{
					display: inline-block;
					height: 160px; width: auto;
					max-height: 160px;
					margin: 10px;
				}
			}
			
			& > div.logo_header
			{
				 display: flex; 
				 flex-flow: row nowrap; 
				 align-items: flex-end; 
				 gap: 12px;
				 margin-top: 0px;
				 
				 & > img { display: inline-flex; height: 104px; width: 104px; border: 1px dashed var(--system_dark_gray); } 
				 & > div { margin-bottom: 5px; & > p.subheader { line-height: 1.4em; }}
			}
			
			& p.header 
			{ 
				font: 400 14px var(--system_font); color: #000; 
				&.bold { font-size: 16px; font-weight: 600; }
				& + p.subheader
				{
					font: italic 400 13.5px var(--system_font);
					margin-top: 5px;
					color: #414141;
					&.bold { font-weight: 600; }
				}
			}
			
			& p
			{
				position: relative;
				font: 400 13.5px/var(--system_line_height) var(--system_font);
				color: #414141;
				
				&:not(:first-child) { margin-top: 10px; }
				&.data_with_icon 
				{ 
					padding-left: 18px;
					& + div.data_with_icon { margin-top: 8px; }
					& > span.yes_no 
					{ 
						display: inline-block; 
						min-width: 80px;
						margin-top: 5px;
						margin-right: 15px;
						font-weight: 600;
						&.yes { color: var(--system_green); }
						&.no { color: var(--system_red); }
						&:not(.yes):not(.no) { opacity: 0.75; }
					}
					& a 
					{
						font: inherit;
						text-decoration: underline;
						color: #105798;
						
						&:hover, &:focus { color: #5097d8; }
					}
					&:before
					{
						content: '';
						
						position: absolute;
						top: calc(0.5 * (var(--system_line_height) - 12px)); left: 0px;
						
						display: inline-block;
						height: 11px; width: 11px;
						
						background-image: url(../visual/unit.png);
						background-size: contain;
						background-repeat: no-repeat;
						background-position: center;
						opacity: 0.9;
					}
				}
			}
			& > div.info_note
			{
				position: relative;
				margin: 20px 0px 0px 0px;
				& + * { margin-top: 20px; }
				padding: 16px 16px 16px 60px;
			  	
				background-color: var(--info_note_bg_color);
				border-top: 1px solid rgba(0,0,0,0.15);
				border-bottom: 1px solid rgba(0,0,0,0.15);
				
				&:before
				{
					content: "";
			  		position: absolute;
					top: 16px; left: 20px;
					height: 24px; width: 24px;
					background-size: contain;
					background-repeat: no-repeat;
					background-position: center;
					
					background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIgc3Ryb2tlPSIjNDA0MDQwIiBzdHJva2Utd2lkdGg9IjIiLz48bGluZSB4MT0iMTIiIHkxPSIxMCIgeDI9IjEyIiB5Mj0iMTYiIHN0cm9rZT0iIzQwNDA0MCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjciIHI9IjEuMiIgZmlsbD0iIzQwNDA0MCIvPjwvc3ZnPg==");
				}
				&.ok, &.error { & p, & li { color: var(--system_white);} }
				&.ok 
				{ 
					background-color: var(--system_green); 
					&:before { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSJNNyAxMi41TDEwLjUgMTZMMTcgOSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==");} 
				}
				&.error
				{
					background-color: var(--system_red); 
					&:before { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48bGluZSB4MT0iOC41IiB5MT0iOC41IiB4Mj0iMTUuNSIgeTI9IjE1LjUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iMTUuNSIgeTE9IjguNSIgeDI9IjguNSIgeTI9IjE1LjUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=");}
				}
			}
			
			& > div.button_group_container
			{
				flex: 1;
				
				display: flex;
				align-items: flex-end;
				justify-content: center;
				margin-top: 20px;
				
				& > *:not(:last-child) { margin-right: 4px; }
			}
		}
	}
}

button.subgroup_controller
{
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	
	position: relative;
	padding: 0px 0px 0px 35px;
	margin-top: 10px;
	background-color: #fff;
	text-align: left;
	overflow: hidden;
}

button.subgroup_controller > span
{
	display: inline-block;
	flex: 1;
	font: 700 14px var(--system_font);
	color: #000;
	line-height: 1.3em;
	margin: 18px 0px;
}

button.subgroup_controller:hover
{
	background-color: #eaeaea;
}

button.subgroup_controller:before
{
	content: "";
	
	position: absolute;
	top: 20px; left: 15px; 
	width: 0px; height: 0px;
	border-top: 7px solid transparent;
	border-left: 10px solid black;
	border-bottom: 7px solid transparent;
	transform: rotate(0deg);
	transition: 0.2s;
}

button.subgroup_controller:after
{
	content: '';
	
	display: none;
	position: absolute;
	top: 5px; right: 5px; bottom: 5px; left: 5px;
	border: 1px dashed #aaa;
}

button.subgroup_controller:focus:after
{
	display: block;
}

button.subgroup_controller.expanded:before
{
	transform: rotate(90deg);	
}

div.subgroup table.data_table
{
	margin-top: 0px;
}

.dummy_div
{
	display: inline-block;
	height: 100%;
	width: 0px;
	vertical-align: middle;
}

.content_area div.content_grid
{
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	margin-top: 10px;
	
	background-color: white;
	padding: 10px;
}

.content_area div.content_grid > div.grid_item
{
	flex: 1;
	
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	
	width: 230px; max-width: 230px; min-width: 230px;
	padding: 10px;
	margin: 5px;
	border: 1px solid #ccc;
	cursor: pointer;
	cursor: hand;
	transition: 0.2s;
}

.content_area div.content_grid > div.grid_item > img
{
	flex: none;
	display: inline-block;
	height: 24px; width: 24px;
}

.content_area div.content_grid > div.grid_item > div.data_container
{
	flex: 1;
	margin-left: 8px;
}

.content_area div.content_grid > div.grid_item > div.data_container p
{
	flex: 1;
	font: 300 15px var(--system_font);
	color: #333;
}	

.content_area div.content_grid > div.grid_item:hover
{
	/*background-color: #fce94f;*/
	background-color: #ffe649;
	border: 1px solid #ccc;
}

.content_area .content_grid div.grid_item.selected_state
{
	background-color: #e5e5e5;
	border: 1px solid #ccc;
}

/*Ortak Tablo Grubu*/
header.overlay_header
{
	margin-top: 10px;
	margin-bottom: 5px;
	
	& h2
	{
		font: 600 17px/1.8em var(--system_font);
		color: var(--system_main_color);
		line-height: 1.4em;
	}
	
	& p { opacity: 0.75; }
	
	&.logo_header
	{
		display: flex; flex-flow: row nowrap; align-items: center;
		&.logo_header > img { flex: none; height: 56px; }
		&.logo_header > div { flex: 1; margin-left: 16px; }	
	}
}

p.overlay_text
{
	max-width: 550px;
	margin-top: 3px;
	font: italic 400 13.5px var(--system_font);
	color: #555;
	line-height: 1.4em;
}

p.overlay_text > strong
{
	font: inherit;
	font-weight: 500;
}

table.overlay_table
{
	margin-top: 15px;
	width: 100%; max-width: 1100px;
	border-spacing: 0px;
    border-collapse: collapse;
}

table.overlay_table + table.overlay_table
{
	margin-top: 25px;
}

table.overlay_table tr th
{
	padding: 5px 8px;
	text-align: left;
	font: 700 12px var(--system_font);
	color: var(--system_main_color);
	white-space: nowrap;
	border-bottom: 1px solid var(--system_main_color);
	
	&.align_center { text-align: center; }
	&.align_right { text-align: right; }
	&.content_middle > * { vertical-align: middle; }
}

table.overlay_table tbody tr:hover
{
	background-color: var(--hover_bg_color);
}

table.overlay_table tbody tr.highlight
{
	background-color: #fce94f;
}

table.overlay_table tr td
{
	max-width: 500px; min-width: 10px;
	padding: 10px 8px;
	border-top: 1px solid #ccc;
	font: 400 12px/var(--system_line_height) var(--system_font);
	color: black;
	overflow: hidden;
	
	&.align_center { text-align: center; }
	&.align_right { text-align: right; }
	&.content_middle > * { vertical-align: middle; }
}

table.overlay_table.condensed tr td { padding: 5px 8px; }

table.overlay_table tr:last-of-type td
{
	border-bottom: 1px solid #ccc;
}

table.overlay_table tr.input_row td
{
	padding: 6px;	
}

table.overlay_table tr td:last-child
{
	border-right: none;
}

table.overlay_table tr td.flexible_cell
{
	width: 1%; 
	white-space: nowrap;
	text-overflow: ellipsis;
	
	&.limit_width { max-width: 200px; } 
}

table.overlay_table tr td.state_cell
{
	width: 10px; min-width: 10px; max-width: 10px;
	padding: 10px 5px 10px 10px;
	border-right: none;
	font: 700 16px var(--system_font);
	text-align: center;
	vertical-align: middle;
	line-height: 0em;
	
	&.active 				{ color: #0a0; }
	&.pending 				{ color: #f57900; }
	&.pending_confirmation 	{ color: #f57900; }
	&.suspended				{ color: #cc0000; }
}

table.overlay_table tr td.icon_cell
{
	position: relative;
	width: 1%; white-space: nowrap;
	min-width: 20px;
	& > button
	{
		position: relative;
		width: 1.6em; height: 1.6em;
		&:disabled { opacity: 0.45; }
		&:not(:disabled):hover, &:focus { filter: brightness(130%); }
		
		&:after		
		{
			content: "";
			position: absolute; inset: 2px;		
			
			background-repeat: no-repeat;
			background-size: auto 85%;
			background-position: center;
		}
		
		&.add:after 	{ background-image: url(../visual/table_icons/plus_green.png); }
		&.delete:after	{ background-image: url(../visual/table_icons/trash_solid.png); }
		&.edit:after	{ background-image: url(../visual/table_icons/edit.png); }
		
		&.activate:after{ background-image: url(../visual/table_icons/activate.png); background-size: auto 65% }
		&.suspend:after	{ background-image: url(../visual/table_icons/suspend.png); }
		
		&.video:after 	{ background-image: url(../visual/table_icons/video.png); }
		&.play:after 	{ background-image: url(../visual/table_icons/play.png); }
		&.link:after 	{ background-image: url(../visual/table_icons/link.png); }
		&.next:after 	{ background-image: url(../visual/table_icons/forward.png); }
		&.export:after 	{ background-image: url(../visual/table_icons/export.png); }
	}
	
	&.live_cell		
	{
		padding: 10px calc(1.4em + 6px) 10px 8px;
		&:after
		{
			content: "";
			position: absolute; top: calc(50% - 0.7em); right: 3px;
			height: 1.4em; width: 1.4em;
			
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
		}
		&.processing:after { background-image: url(../visual/loading.gif) }
		&.success:after    { content: "👍"; font-size: 15px; margin-top: 2px; text-align: center; }	
	}
}

table.overlay_table tr td.input_cell
{
	& > div.input_container
	{
		padding: 6px 8px; 
		background-color: var(--system_light_gray);
		border: 0;
		border-radius: 4px;
		
		&.select:after { bottom: calc(50% - 4.5px) }
	}
}

table.overlay_table tr td > input[type="text"]
{
	height: 30px;
	font-size: 13px;
}

table.overlay_table tr td > div.input_container
{
	position: relative;
}

table.overlay_table tr td > div.input_container.has_state:before
{
	content: '';
	
	position: absolute;
	top: calc(50% - 9px); right: 10px;
	
	display: inline-block;
	height: 18px; width: 18px;
	background-image: none;
	z-index: 10;
	opacity: 1;
}

table.overlay_table tr td > div.input_container.has_state > input[type="text"]
{
	padding-right: 38px;
}

table.overlay_table tr td > div.input_container.has_state.loading:before
{
	background-image: url("../visual/user_form/loading.gif");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;		
}

table.overlay_table tr td > div.input_container.has_state.success:before
{
	background-image: url("../visual/user_form/success.png");
	background-repeat: no-repeat;
	background-size: 80%;
	background-position: center;		
}

table.overlay_table tr td > div.input_container.has_state.error:before
{
	background-image: url("../visual/user_form/error.png");
	background-repeat: no-repeat;
	background-size: 70%;
	background-position: center;		
}
/*Ortak Tablo Grubu*/