/**
 * Display info about a Session
 */

#session-sync .session-container {
	height: 100%;
	background: #FEFEFE;

	font-size: 14px;
	float: right;
	overflow: hidden;

	/*CSS3*/
	box-sizing: border-box;
	position: relative;

	display: flex;
	flex-direction: column;
	flex: 1;
}

/*
 * Save button - not used for the moment
 */

#session-sync[session] .session-container .save-session {
	display: none;
}

#session-sync .session-container .save-session {
	height: 3.4em;
	width: 3.4em;

	background: url("images/icons/heart.png") no-repeat;
	background-size: 2em;
	background-position: 1em 0.4em;
	background-color: #F5F5F5;

	border-radius: 0 0 0 100%;
	border-left: 1px solid #CCC;
	border-bottom: 1px solid #CCC;

	position: absolute;
	z-index: 1;
	top: 0;
	right: -1px;

	filter: saturate(75%);
}

#session-sync .session-container .save-session:hover {
	cursor: pointer;
	background-color: #FFF;
	filter: saturate(100%);
}

/*
 * Style Tabs
 */

#session-sync .session-container .bookmarks {
	width: calc(100% + 10px);
	margin: 2px 0 2px 2px;

	overflow-x: hidden;
	overflow-y: scroll;
	position: relative;

	/*CSS3*/
	box-sizing: border-box;
	flex: 1;
}

#session-sync .session-container .bookmarks:hover {
	overflow-y: scroll;
}

#session-sync .session-container .window-separator {
	width: 100%;
	height: 2em;
	background: #F8F8F8;
	color: #555;

	line-height: 1.9em;
	position: absolute;
	transition: all 0.2s;
}

#session-sync .session-container .window-separator .text {
	text-align: center;
	font-weight: 600;
}

#session-sync .session-container .window-separator:hover {
	cursor: pointer;
	text-decoration: underline;
	color: #333;
}

#session-sync .session-container .window-separator:hover:after {
	content: "(switch to)";
	position: absolute;
	font-size: 0.8em;
	top: 0;
	margin-left: 40px;
	left: 50%;
}

#session-sync .session-container .bookmark {
	width: 100%;
	height: 2em;
	padding: 0 4px;

	line-height: 1.9em;
	word-break: keep-all;

	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0;

	/*CSS3*/
	box-sizing: border-box;
	transition-property: left, top, background, color;
	transition-duration: 0.2s;
	display: flex;
	flex: 1;
}

#session-sync .session-container .bookmark:hover {
	background: #EEE;
	cursor: pointer;
	transition-property: left, top;
}

#session-sync .session-container .bookmark[highlight] {
	transition-duration: 0.5s;
	background: #4396E9 !important;
	color: #FFF;
}

#session-sync .session-container .bookmark[dragging] {
	width: 400px;
	margin: 1px 0 0 1px;
	background-color: #FBD4B0;
	background: #4396E9 !important;
	color: #FFF;
	opacity: 0.9;

	transition: none;
	position: fixed;
	z-index: 1000;
}

#session-sync .session-container .bookmark[dragging="drop"] {
	background: #4396E9 !important;
	color: #FFF;
	opacity: 0.9;
	transition: none;
	position: absolute;

	z-index: 1000;
}

#session-sync .session-container .bookmark[dragging]:hover {
	cursor: default;
}

#session-sync .session-container .bookmark[pinned='true']:before {
	content: "";
	width: 1.5em;
	height: 100%;
	background-image: url("images/icons/pin.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	color: green;
	position: absolute;
	top: 0;
	right: 0.35em;
	z-index: 0;
	opacity: 0.85;
}

#session-sync .session-container .bookmark * {
	float: left;
}

#session-sync .session-container .bookmark .favicon {
	width: 1.33em;
	height: 100%;
	background: url("images/icons/globe.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

#session-sync .session-container .bookmark .text {
	height: 100%;
	padding: 0 5px;
	word-break: keep-all;
	white-space: nowrap;
	overflow: hidden;

	box-sizing: border-box;
	flex: 1;
}

/*
 * History Style
 */

#session-sync .session-container .history-window-separator {
	width: 100%;
	height: 2em;
	line-height: 1.9em;
	background: #F8F8F8;
	color: #555;
	position: absolute;
	transition: all 0.2s;
}

#session-sync .session-container .history-window-separator .text {
	text-align: center;
}

#session-sync .session-container .history-window-separator:hover {
	cursor: pointer;
	text-decoration: underline;
	color: #333;
}