html, body {
	margin: 0;
	padding: 0;
	font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
	height: 100%;
}

.button .text {
	font-size: 10pt;
	font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}

.eEditionURL {
	float: right;
	font-weight: bold;
}

.hideInTopToolbar {
	/* display: none; */
}

.dropdown_container .button .text {
	white-space: nowrap;
}
/*Log Out Button*/
div.button.logout { 
		height: 42px;
		background-position-y: 0;
		overflow: hidden;
		transition-duration: 0.4s;
		width: 100px;
		top: 10px;
		
	}

.logout 
{
	background-image: url(Images/icon_logout.png);
	margin-right: 3px;
	background-size: 95px;
	height: 44px;
	width: 108px;
	top:8px;
}

.logout:hover
{
	background-image: url(Images/icon_logout_on.png);
}


.logout.active
{
	background-image: url(Images/icon_logout_on.png);
	/*margin-left: 20px;*/
}

#toolbar {
	/*position:relative;*/
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
	-webkit-transition: .5s all ease;
	-moz-transition: .5s all ease;
	-o-transition: .5s all ease;
	-ms-transition: .5s all ease;
	transition: .5s all ease;
	height: 50px;
}

	#toolbar.no_toolbar {
		top: -60px;
	}

	#toolbar .hidden-button {
		display: none;
	}

.toolbar_label {
	position: fixed;
	top: 51px;
	left: 0;
	width: 30px;
	height: 0;
	border-top: 50px solid gray;
	border-right: 25px solid transparent;
	opacity: 0.8;
	z-index: 1;
	-webkit-transition: .5s all ease;
	-moz-transition: .5s all ease;
	-o-transition: .5s all ease;
	-ms-transition: .5s all ease;
	transition: .5s all ease;
	cursor: pointer;
}

	.toolbar_label.no_toolbar {
		top: 0;
	}

.toolbar__inner_label {
	position: relative;
	left: 0;
	top: -50px;
	width: 28px;
	height: 0;
	border-top: 45px solid white;
	border-right: 22px solid transparent;
	z-index: 1;
	font-size: 10px;
}

	.toolbar__inner_label .text {
		top: -32px;
		left: 2px;
		position: relative;
		font-size: 1.2em;
		color: #898989;
	}

#restHeightContainer {
	position: absolute;
	/* position: fixed; */
	left: 0;
	right: 0;
	bottom: 0;
	/*border-top: 16px #ebebeb solid;*/
	-webkit-transition: .5s all ease;
	-moz-transition: .5s all ease;
	-o-transition: .5s all ease;
	-ms-transition: .5s all ease;
	transition: .5s all ease;
	top: 50px;
	border-top: 2px #ebebeb solid;
	overflow-y: hidden;
}

	#restHeightContainer .inner {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	#restHeightContainer.with_background {
		background-color: #ebebeb;
	}

#info-msg-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background-color: lemonchiffon;
	z-index: 20;
}

	#info-msg-container .msg {
		text-align: center;
		padding-bottom: 2px;
	}

	#info-msg-container.tb_label .msg {
		/* There is a "toolbar label" button at the left side - do not overlap it */
		padding-left: 50px;
	}

	#info-msg-container .msg-text {
		padding-right: 15px;
		text-align: center;
	}

	#info-msg-container .msg-close {
		display: inline-block;
		font-size: 2em;
		margin-top: 5px;
		margin-right: 5px;
		cursor: pointer;
		float: right;
	}

#restHeightContainer.no_toolbar {
	top: -11px;
}

.leftbar {
	height: 100%;
	float: left;
	position: relative;
	background-color: white;
	overflow: hidden;
	visibility: visible;
	border-right-style: solid;
	border-right-color: #ebebeb;
	border-right-width: 2px;
	border-left-style: solid;
	border-left-color: #ebebeb;
	border-left-width: 2px;
	-webkit-transition: .5s all ease;
	-moz-transition: .5s all ease;
	-o-transition: .5s all ease;
	-ms-transition: .5s all ease;
	transition: .5s all ease;
	display: none;
}

.rightbar {
	height: 100%;
	float: right;
	position: relative;
	background-color: white;
	overflow: hidden;
	visibility: visible;
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: #ebebeb;
	border-right-width: 2px;
	border-right-style: solid;
	border-right-color: #ebebeb;
	-webkit-transition: .5s all ease;
	-moz-transition: .5s all ease;
	-o-transition: .5s all ease;
	transition: .5s all ease;
	display: none;
}

.iframe_wrapper {
	/* The following two lines are a must for scrolling in iOS */
	-webkit-overflow-scrolling: touch;
	overflow: auto;
	/* positioning the panel iframe - */
	/* under the close button and above the status bar */
	position: absolute;
	top: 30px;
	bottom: 44px;
	min-width: 300px;
	margin-left: 9px;
	margin-right: 9px;
	width: auto !important;
}

.leftbar.closed, .rightbar.closed {
	width: 28px;
	min-width: 21px;
	border-width: 0;
	visibility: hidden;
	overflow: hidden;
}

	.leftbar.closed iframe, .rightbar.closed iframe {
		display: none;
	}

#content {
	/*min-width: 60%;*/
	height: 100%;
	/*float: left;*/
	position: relative;
	background-color: white;
	overflow: hidden;
	/*border-left-width: 8px;
	border-left-style: solid;
	border-left-color: #ebebeb;

	border-right-width: 8px;
	border-right-style: solid;
	border-right-color: #ebebeb;
	*/
}

.openMenu {
	display: none;
}

span.icon-bar {
	width: 8px;
	height: 2px;
	line-height: 53px;
}

.dynamic_ctrl, .preview_ctrl {
	position: relative;
	background-color: white;
	height: 100%;
}

.dynamic_selection, .preview_selection {
	max-width: 100%;
	height: 24px;
	background-color: black;
	padding-left: 40px;
}

	.dynamic_selection ul, .preview_selection ul {
		margin: 0;
		/*margin-top: -3px;*/
		padding: 0;
		list-style-type: none;
		text-align: center;
		/*width: 100%;*/
		display: block;
		white-space: nowrap;
		/*overflow: hidden; */
		cursor: pointer;
		color: white;
	}

.dynamic_sections_bar_container, .preview_sections_bar_container {
	overflow: hidden;
	height: 100%;
	position: relative;
}

#dynamic_sections_bar, #preview_sections_bar {
	height: 100%;
}

.dynamic_selection ul li, .preview_selection ul li {
	display: inline-block;
	/*padding-left: 20px;
	 padding-right: 20px;*/
	height: 100%;
	/*width: 95px;*/
	font-size: 12pt;
}

.dynamic_sections_bar_name, .preview_sections_bar_name {
	text-align: center;
	/*margin-top: 5px;*/
	display: block;
	padding-left: 15px;
	padding-right: 15px;
}

.dynamic_selection ul li.active, .preview_selection ul li.active {
	background-color: #FE3F35;
	height: 100%;
}


.preview_image_container {
	position: absolute;
	width: 100%;
	top: 24px;
}

	.preview_image_container img {
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-top: 40px;
		box-shadow: 6px 4px 11px #888888;
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		backface-visibility: hidden;
		max-width: 700px;
		width: 70%;
		cursor: pointer;
	}

.scrollLeft {
	color: white;
	float: left;
	cursor: pointer;
	display: block;
	width: 40px;
	height: 100%;
	background: url(Images/arrow_back.png) no-repeat;
	background-position: 16px 8px;
}

.scrollRight {
	color: white;
	float: right;
	cursor: pointer;
	display: block;
	width: 40px;
	background: url(Images/arrow_forward.png) no-repeat;
	height: 100%;
	background-position: 17px 8px;
}

.preview_ctrl .fog {
	position: relative;
	width: 100%;
	top: 24px;
	background: none;
	height: 100%;
	cursor: pointer;
}


.toolbar_ctrl {
	position: relative;
	width: 100%;
	height: 100%;
}

.left_part {
	width: 400px;
	height: 100%;
	float: left;
}

.right_part {
	position: relative;
	width: 550px;
	height: 100%;
	float: right;
}

.button:hover {
	cursor: pointer;
}

.most_left {
	border-right-color: black;
	border-right-style: solid;
	border-right-width: 1px;
	height: 80%;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-top: 5px;
	padding-left: 10px;
	padding-right: 2px;
	display: inline-block;
}

	.most_left .date {
		font-weight: bold;
		font-size: 15pt;
		line-height: 21px;
		display: none;
	}

	.most_left .logo {
		min-width: 50px;
		display: block;
		height: 45px;
		width: 166px;
		background: url(Images/logo.png) no-repeat;
		cursor: pointer;
	}

/*  ilya */

body {
	margin: 0;
	padding: 0;
	position: absolute;
	width: 100%;
	height: 100%;
}

.block-ui {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 5010;
	vertical-align: middle;
	text-align: center;
	background-color: #000;
	opacity: 0.5;
}

/*#region toolbar */
.toolbar {
	width: 100%;
	background-color: #fff;
	height: 61px;
	line-height: 61px;
	display: inline-block;
	position: relative;
}

	.toolbar .vcenter {
		height: 50%;
		width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.toolbar .left {
		float: left;
		margin-left: 20px;
		height: 100%;
		line-height: 100%;
	}

	.toolbar .right {
		float: right;
		margin-right: 100px;
		height: 100%;
		line-height: 100%;
	}

	.toolbar .nav-box {
		width: 50px;
	}

/*#endregion */

.popup {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: auto;
	min-height: 0;
	border-width: 0;
	-ms-touch-action: none;
	touch-action: none;
	background-color: #333;
	display: none;
	width: 800px;
	height: 600px;
}

	.popup#articleViewer {
		background-color: white;
	}

	.popup#listView {
		background-color: #333;
	}

.thumbnailsMenu {
	height: 300px;
	width: 1000px;
	display: none;
}

input[type="date"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	-moz-appearance: none;
}

button.selected {
	color: #fd3f35 !important;
}

.thumbnail {
	width: 122px;
	height: 101px;
}

/*#region Overrides */

div.docviewer.with-top {
	top: 61px;
}
/*#endregion */

.with-close {
	position: absolute;
}

.dynamic_view {
	display: none;
}

	.dynamic_view.active {
		display: inline;
	}

.digest_view {
	display: none;
}

	.digest_view.active {
		display: inline;
	}


.home_view {
	display: none;
}

	.home_view.active {
		display: inline;
	}

.check-box {
	padding-left: 30px;
	margin-left: 8px;
	margin-top: 17px;
	cursor: pointer;
}

.check-box-unchecked {
	background: url(Images/check.png) left center no-repeat;
}

.check-box-checked {
	background: url(Images/check_on.png) left center no-repeat;
}

.buttons_container .text.dropdown {
	margin-top: 0;
}

.openBar {
	position: absolute;
	width: 20px;
	height: 100px;
	border: 1px #a0a4a3 solid;
	margin: auto;
	top: 0;
	bottom: 50%;
	color: black;
	cursor: pointer;
	visibility: hidden;
	opacity: 0;
}

.leftbar.closed > .openBar,
.rightbar.closed > .openBar {
	margin-top: 75px;
}

.leftbar .openBar {
	margin-left: 0;
	border-left: none;
}

.rightbar .openBar {
	border-right: none;
	right: -6px;
}


.leftbar.closed .openBar {
	visibility: visible;
	left: 0;
	background-color: red;
	-moz-transition: opacity 0.3s 0.4s linear;
	-o-transition: opacity 0.3s 0.4s linear;
	-webkit-transition: opacity 0.3s 0.4s linear;
	transition: opacity 0.3s 0.4s linear;
	opacity: 0.5;
}

.rightbar.closed .openBar {
	visibility: visible;
	left: 0;
	background-color: lightgrey;
	-moz-transition: opacity 0.3s 0.4s linear;
	-o-transition: opacity 0.3s 0.4s linear;
	-webkit-transition: opacity 0.3s 0.4s linear;
	transition: opacity 0.3s 0.4s linear;
	opacity: 0.5;
}

.leftbar .openBarText {
	line-height: 100px;
}

	.leftbar .openBarText::before {
		content: "Help";
	}

.rightbar .openBarText {
	line-height: 144px;
}

	.rightbar .openBarText::before {
		content: "Updates";
	}

.rotate {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	/* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	/* Should be unset in IE9+ I think. */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

#settingsPopup {
	display: none;
	background-color: white;
	font-family: 'Segoe UI';
	font-size: 10.5pt;
	width: 305px;
	height: 212px;
	border: 1px solid #cccccc;
	border-collapse: collapse;
	line-height: 10.5px;
	margin-left: 7px;
}

	#settingsPopup #ok {
		left: 62px;
		top: 176px;
	}

	#settingsPopup #cancel {
		left: 183px;
		top: 176px;
	}

	#settingsPopup p, form {
		margin: 20px;
		line-height: 16px;
	}

	#settingsPopup input {
		margin: 5px;
	}

.odn_button {
	width: 104px;
	height: 26px;
	border: 1px solid #cccccc;
	line-height: 25px;
	text-align: center;
	font-size: 10pt;
	cursor: default;
}

	.odn_button:hover {
		color: white;
		background-color: #fe3f35;
	}

#cancel {
	position: absolute;
	left: 313px;
	top: 182px;
}

#ok {
	position: absolute;
	left: 192px;
	top: 182px;
}

@media screen and (max-width:497px) {

	.leftbar {
		z-index: 12; /*10 is for narrow screen, 12 for very narrow */
	}

	.rightbar {
		z-index: 13; /*11 is for narrow screen, 13 for very narrow */
	}
}


:-ms-fullscreen {
	width: 100%;
}

.button-download-progress {
	position: absolute;
	top: 10px;
	width: 20px;
	height: 0;
	max-height: 24px;
	background-color: #20ee20;
	left: 20px;
	opacity: .5;
	/*display:none;*/
}

.button-download-progress-icon {
	position: absolute;
	top: 10px;
	width: 22px;
	height: 24px;
	left: 20px;
	background: url('images/loading.gif') no-repeat center center;
	background-size: 20px;
	opacity: .7;
	/*display:none;*/
}

.rtl_ui .button-download-progress-icon {
	left: 2px;
}

.rtl_ui .button-download-progress {
	left: 2px;
}

.button-download-progress-invisible {
	height: 0;
	display: none;
}

.ReplicaViewer:focus, .ThumbnailViewer:focus {
	outline: 0;
}

/* Disable interactive actions when offline */
.is_offline .online_only {
	display: none !important;
}

.button {
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	height: 50px;
}

	.button.recent {
		-moz-background-size: 24px;
		-o-background-size: 24px;
		background-size: 24px;
		display: inline-block;
		font-size: 1.5em !important;
		vertical-align: top;
	}

		.button.recent .text {
			margin-top: -1.6em;
		}

.buttons_container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
	margin-top: auto;
	margin-bottom: auto;
	position: absolute;
	height: auto !important;
	top: 0;
	right: 0;
	transition: all, 0s;
}

	.buttons_container .button {
		position: relative;
	}

	.buttons_container > .button {
		justify-content: center;
		margin-left: 7px;
		min-width: 36px;
	}

.change_view_group_separator {
	margin-left: 10px;
}

.buttons_container > .button.change_view {
	width: 84px; /* @change_view_width; */
	margin-left: 0;
	padding: 0;
}

.change_view.home {
	display: none;
}

/*decrease margin for zoomin*/
.zoomin.button {
	/*margin-left: 5px; */
}

.buttons_container > .button > .text {
	text-align: center;
	margin-top: -1.2em;
	width: 100%;
}

.odn-icon.printedition:before, .odn-icon.digest:before, .odn-icon.dynamic:before {
	 margin-top: -4px;
}

#toolbar .printedition .text, #toolbar .digest .text, #toolbar .dynamic .text {
	margin-top: -0.87em;
}

@media screen and (max-width:845px) {

	#toolbar .printedition .text, #toolbar .digest .text, #toolbar .dynamic .text {
		margin-top: 0;
	}
}

.buttons_container > .button.odn-icon:not(.change_view):before, .Toolbar .small-screen-mode .button.odn-icon:before {
	line-height: 0.9;
	font-size: 0.92em;
}

.button:before {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	content: '';
	display: block;
	background-position: center 6px;
}

.active .displayOptions {
	border-left-color: black;
	border-left-style: solid;
	border-left-width: 1px;
	border-right-color: black;
	border-right-style: solid;
	border-right-width: 1px;
}

/*submenu style for display options and download*/
.dropdown_container {
	display: none;
	position: absolute;
	top: 50px;
	margin-top: 0;
	margin-left: -10px;
	width: auto;
	overflow: visible;
	z-index: 1000;
	background: white;
	border-width: 1px;
	border-style: solid;
	border-color: #e0bbbb;
	color: #919797;
	font-size: 10pt;
	padding-top: 0;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.download .dropdown_container {
	margin-left: -5px;
}

/*when item button has class ACTIVE, then show submenu*/
.active .dropdown_container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.dropdown_container .button {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	/* justify-content: center; */
	align-items: center;
	height: 50px;
}

.buttons_container .dropdown_container .button {
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;
}

	.buttons_container .dropdown_container .button .text {
		margin-left: 0px;
	}

.dropdown_container .button:before {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	width: 36px;
	height: 36px;
	background-size: 36px 36px;
	background-repeat: no-repeat;
	content: '';
	display: block;
	padding-right: 10px;
	padding-bottom: 10px;
}

.rtl_ui #dynamic_sections_bar, .rtl_ui #preview_sections_bar {
	direction: rtl;
}

.rtl_ui .check-box-unchecked {
	background: url(Images/check.png) right center no-repeat;
}

.rtl_ui .check-box-checked {
	background: url(Images/check_on.png) right center no-repeat;
}

.rtl_ui .check-box {
	padding-left: inherit;
	padding-right: 30px;
	margin-left: inherit;
	margin-right: 8px;
}

.rtl_ui .displayOptions_dropdown {
	margin-left: 0;
	margin-right: -15px;
}

.rtl_ui .download_dropdown {
	margin-left: -140px;
	width: 220px; /* Hebrew text takes more space */
}

.rtl_ui .buttons_container .button {
	direction: rtl;
}

/* start - print */
.rtl_ui .print_popup.popup_open {
	direction: rtl;
}

.rtl_ui .close_button {
	right: initial;
	left: 0;
}

.rtl_ui .printLabel_PopupTitle {
	padding-left: initial;
	padding-right: 23px;
}

.rtl_ui .printLabel_printRange {
	left: initial;
	right: 24px;
}

.rtl_ui .printSelection {
	left: initial;
	right: 24px;
	padding-left: initial;
	padding-right: 30px;
}

.rtl_ui .printLabel_From {
	left: initial;
	right: 82px;
	padding-left: initial;
	padding-right: 30px;
}
/* end - print */

.tableOfContents, .recent {
	text-align: center;
}

.rtl_ui .button .text.dropdown {
	margin-right: 10px;
}

.rtl_ui .buttons_container .dropdown_container .button {
	padding-right: 10px;
}

@media screen and (max-width:1045px) {
	/* Medium-size screen - make "change view" buttons smaller, hide zoom buttons */
	.zoomin.button {
		display: none !important;
	}



	.zoomout.button {
		display: none !important;
	}

	.buttons_container > .button.change_view {
		width: 60px; /* @change_view_smaller_width; */
	}

	.rtl_ui .button-download-progress-icon {
		left: 0px;
	}

	.rtl_ui .button-download-progress {
		left: 0px;
	}
}

/*toolbar for small screens (not only toolbar styles)*/
@media screen and (max-width:845px) {
	.buttons_container {
		position: fixed !important;
		width: 184px;
		height: 100% !important;
		top: 51px;
		margin-top: initial !important;
		margin-bottom: auto !important;
		right: -184px !important;
		-webkit-transition: right 0.5s !important;
		-moz-transition: right 0.5s !important;
		-o-transition: right 0.5s !important;
		transition: right 0.5s !important;
		background-color: white;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
		overflow-y: auto;
	}

		.buttons_container .dynamic {
			border-left: 0px;
		}

		.buttons_container > .button {
			margin-left: 0px;
			padding-right: 0px;
		}

			.buttons_container > .button.odn-icon:before {
				margin-top: 10px;
			}

		/*each row should contains inline elements*/
		.buttons_container .button {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: horizontal;
			-webkit-box-direction: normal;
			-ms-flex-direction: row;
			flex-direction: row;
			height: 62px;
			width: auto !important;
			border-bottom: #d8d8d8 solid 1px;
		}

		.buttons_container > .button {
			border-top: #d8d8d8 solid 1px;
		}

			/*when submenus are opened last we can't scroll to last item of main menu. This fixes described issue*/
			.buttons_container > .button:last-child {
				margin-bottom: 100px;
			}

		.buttons_container > .dynamic.button.change_view {
			margin-left: 0;
		}

		.buttons_container.shown {
			height: auto !important;
			overflow: auto;
			right: 0 !important;
			bottom: 0;
		}

			.buttons_container.shown.wide {
				width: 100px;
			}

		.buttons_container .dropdown_container {
			display: none;
			position: relative;
			width: 100%;
			margin-left: 0;
			padding-left: 0;
			border: none;
		}

		.buttons_container .button.active .dropdown_container {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			padding-top: 0;
		}

		.buttons_container > .button {
			-webkit-box-pack: start;
			-ms-flex-pack: start;
			justify-content: flex-start;
			-webkit-box-align: center;
			-ms-flex-align: center;
			-ms-grid-row-align: center;
			align-items: center;
			margin-left: 0;
			-ms-flex-negative: 0;
			flex-shrink: 0;
		}


		/*in this mode displays options should have this padding like Downwload subitems*/
		.buttons_container .dropdown_container .button {
			padding-left: 0;
			-webkit-box-pack: start;
			-ms-flex-pack: start;
			justify-content: flex-start;
			-webkit-box-align: center;
			-ms-flex-align: center;
			-ms-grid-row-align: center;
			align-items: center;
			-ms-flex-negative: 0;
			flex-shrink: 0;
		}


		/* .text in markup is placed after dropdown. But we should change order of displaying */
		.buttons_container > .button.dd > * {
			-webkit-box-ordinal-group: 2;
			-ms-flex-order: 1;
			order: 1;
		}

		.buttons_container > .button.dd > .text {
			-webkit-box-ordinal-group: 1;
			-ms-flex-order: 0;
			order: 0;
		}

		.buttons_container > .button.dd.active > .text {
			/*we need this trick for text alignment cause all children has column alignment but we need to place 
	icon and text in row*/
			margin-left: 63px;
			padding-bottom: 18px;
			margin-top: -42px;
		}

		.buttons_container > .button > .text {
			margin-top: 0;
			text-align: center;
			position: static; /* position: initial; did not work in IE11 */
			width: auto;
		}

	.button-download-progress-icon {
		left: 20px !important;
		top: 18px;
	}

	.button-download-progress {
		left: 21px !important;
		top: 19px !important;
		width: 21px;
		border-radius: 2px;
	}

	.hideInTopToolbar {
		display: block;
	}

	.buttons_container .button.dropdown {
		height: 50px;
		background-color: gray;
	}

		.buttons_container .button.dropdown:before {
			margin-top: 20px;
		}

	.button .text.hideInTopToolbar {
		bottom: -1px;
	}

	.button.dropdown .text.hideInTopToolbar {
		bottom: 0;
	}

	#toolbar {
		z-index: 17;
	}

	.button.dd {
		overflow: hidden;
		-webkit-transition: height 0.4s;
		transition: height 0.4s;
		height: auto;
	}

	.button.dropdown .text.dropdown {
		margin-left: 6px;
		text-align: left;
		font-size: 8pt;
		bottom: 0;
	}

	.toolbar_ctrl .button.dropdown,
	.toolbar_ctrl .button.dropdown .text.dropdown {
		color: white;
	}

	/*set margin for download submenu items*/
	.dropdown_container .button .text {
		margin-left: 6px;
		margin-top: 0;
	}

	.openMenu {
		display: block;
		background-position: center;
		right: 0;
		position: absolute;
		top: 0;
	}

	.leftbar {
		float: left;
		overflow: hidden;
		/*width: 180px;*/
		z-index: 10;
		border-right-width: 1px;
		border-right-color: black;
	}

	.rightbar {
		float: right;
		overflow: hidden;
		/*width: 180px;*/
		z-index: 11; /*11 is for narrow screen, 13 for very narrow */
		border-left-width: 1px;
		border-left-color: black;
	}

	#content {
		position: absolute;
		right: 0;
		overflow: hidden;
		left: 0;
	}


	.buttons_container.shown.wide,
	.buttons_container.shown {
		width: 250px;
		right: 0 !important;
		border-left: #d8d8d8 solid 1px;
	}

	.buttons_container.shown > .button.odn-icon:not(.change_view):before {
		line-height: 1;
		font-size: 1em;
	}

	/* start - add triangle icon*/
	.button.dd > .text:after {
		content: "";
		width: 15px;
		height: 15px;
		position: absolute;
		right: 8px;
		background-image: url('Images/triangle_gray.png');
		background-repeat: no-repeat;
		-webkit-transition: 0.2s, -webkit-transform;
		transition: 0.2s, -webkit-transform;
		transition: transform, 0.2s;
		transition: transform, 0.2s, -webkit-transform;
	}

	.button.dd.active .text.hideInTopToolbar:after {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
		-webkit-transition: 0.2s, -webkit-transform;
		transition: 0.2s, -webkit-transform;
		transition: transform, 0.2s;
		transition: transform, 0.2s, -webkit-transform;
	}
	/* end - add triangle icon*/

	.button.dropdown {
		height: 62px;
	}

	/* start - hide/show submenu */

	.active.dd > .dropdown_container {
		max-height: 1520px;
	}

	.dropdown_container {
		max-height: 0;
		overflow: hidden;
		top: 0 !important;
	}

	.dd.active .text {
		color: #919797;
	}

	.dropdown_container .button:hover {
		background-color: #FE3F35;
	}

	/* end - hide/show submenu */

	.button.dd.active {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
	}

	.buttons_container .button:before {
		width: 63px; /*but real image is 83*/
		height: 61px;
		background-position: center;
	}

	/*don't highlight home button*/
	.button.home.active:before,
	.button.home:hover:before {
		background-color: inherit;
	}

	.rtl_ui .button-download-progress-icon {
		left: initial;
		right: 19px !important;
		width: 24px;
	}

	.rtl_ui .button-download-progress {
		left: initial;
		right: 19px !important;
	}

	.rtl_ui .dd .dropdown_container {
		margin-right: 0;
	}

	.rtl_ui .buttons_container {
		direction: rtl;
	}

	.rtl_ui .button.dd.active > .text {
		margin-right: 64px;
	}

	.rtl_ui .button.dd > .text.hideInTopToolbar:after {
		left: 8px;
		right: inherit;
		transform: rotate(180deg);
	}

	.rtl_ui .button.dd.active > .text.hideInTopToolbar:after {
		transform: rotate(90deg);
	}

	.rtl_ui .dropdown_container .button {
		padding-left: 0 !important;
		padding-right: 10px;
	}

		.rtl_ui .dropdown_container .button .text {
			margin-left: 0;
			margin-right: 10px;
		}
		
		.logout {
			top: 255px;
		}
}

@media screen and (max-width: 1025px) {
	.replica_view.vScroll.ltr .arrow_right {
		right: 15px;
	}

	.replica_view.vScroll.ltr .rightbar.closed {
		right: 15px;
	}

	.replica_view.vScroll.rtl .arrow_left {
		left: 16px;
	}

	.replica_view.vScroll.rtl .leftbar.closed {
		left: 16px;
	}
}

.dynamic {
	border-left: 2px solid #EBEBEB;
}

div.table-of-contents {
	display: flex;
	flex-grow: 1;
	max-height: initial !important; /*somewhere in ODN we have it at 50%...*/
}

.leftbar > .table-of-contents + div.iframe_wrapper,
.rightbar > .table-of-contents + div.iframe_wrapper {
	display: flex !important;
	height: 50%;
	bottom: 45px; /* For some reason, our rails are all the way to screen bottom, beneath the status bar (44px high). So here we're putting the ad high enough to be visible. Alternatively, we can try to change the rail bottom, but that might require more changes. */
	top: inherit;
	margin-top: 70px;
	overflow: hidden;
}

	.leftbar > .table-of-contents + div.iframe_wrapper.ad-parent,
	.rightbar > .table-of-contents + div.iframe_wrapper.ad-parent {
		/* For an iframe_wrapper that has an ad */
		min-height: 255px;
	}

@media screen and (max-height: 500px) {
	.leftbar .table-of-contents, .rightbar .table-of-contents {
		display: none !important; /* Trying to hide the TOC if there's too little space. Perhaps should add more conditions to the rule sop this will happen only if there's a nd ad beneath it. */
	}
}

.odn-icon {
	font-size: 48px;
	text-align: center;
}

/* Rail content adjustments */

/* Making rail width constant */
.rightbar, .leftbar {
	width: 320px;
	min-width: 320px;
}
/* For the parent of two external elements*/
.iframe_wrapper.double-parent {
	display: flex;
	flex-direction: column;
	max-width: 100%;
}
/* The element that is not an ad should resize*/
.iframe_wrapper > :not(.olv-ad) {
	display: flex;
	flex-grow: 1;
}
/*The element that is an ad should be constant size*/
.iframe_wrapper > .olv-ad {
	display: flex;
	height: 250px;
	min-height: 250px;
	overflow: hidden;
}
/* Gining some margins between ads/content*/
.iframe_wrapper.double-parent > .ExternalContentView {
	margin-top: 10px;
}

@media screen and (max-height: 300px) {
	/* Screen too small for two elements, hide the second one if not ad */
	.iframe_wrapper.double-parent > .ExternalContentView + :not(.olv-ad) {
		display: none;
	}
}

@media screen and (max-height: 500px) {
	/* Screen too small for an ad and a widget/external, hide the widget/external */
	.iframe_wrapper.double-parent.ad-parent > :not(.olv-ad) {
		display: none;
	}
}

@media screen and (max-height: 600px) {
	/* Screen too small for two ads, hide the second one */
	.iframe_wrapper.double-parent.ad-parent > .olv-ad + .olv-ad {
		display: none;
	}
}

.odn-icon.close_button {
	font-size: 2.5em;
	color: #919797;
}

	.odn-icon.close_button:hover {
		color: inherit;
	}

.odn-icon,
.button > .text {
	color: #919797;
}


.button.change_view.active,
.button.change_view.active .text,
.dropdown_container .button:hover,
.dropdown_container .button:hover .text {
	color: white;
}

.odn-icon:hover,
.button:hover > .text {
	color: #FD3F35;
}

.button.search-icon-for-small-devices.active, .button.search-icon-for-small-devices.active > .text {
	color: #FD3F35;
}

.button.change_view.active,
.dropdown_container .button:hover {
	background-color: #FE3F35;
}

div.docviewer,
.replica_view > #content {
	background-color: #EBEBEB;
}

#toolbar {
	background-color: #FFFFFF;
}


.tableOfContents {
	width: 50px;
	top: -5px;
	display: inline-block;
}

.tableOfContents .text {
		display: none;
	}

.logo-wrapper {
	display: inline-block;
	vertical-align: top;
}

.button.change_view.active {
	background-color: #FE3F35;
}

	.button.change_view.active .text {
		color: white;
	}

.button.change_view:not(.active):hover {
	background-color: transparent;
}

@media screen and (max-height: 400px) {
	.leftbar div.table-of-contents {
		display: none !important; /* Trying to hide the TOC if there's too little space. Perhaps should add more conditions to the rule sop this will happen only if there's a nd ad beneath it. */
	}
}

.hide {
	display: none !important;
}

/*Shared Article View Template*/
.shared-header {
	border-bottom: 1px solid silver;
	width: 100%;
}

	.shared-header .most_left {
		border: 0px !important;
		margin: 0px !important;
		padding: 0px !important;
	}

input[readonly] {
	background-color: #ffffcc;
}

.Toolbar .small-screen-mode {
	display: none;
	height: 50px;
	vertical-align: top;
}

	.Toolbar .small-screen-mode .small-screen-mode-item {
		position: relative;
	}

		.Toolbar .small-screen-mode .small-screen-mode-item .download-progress-icons-block {
			cursor: pointer;
		}

		.Toolbar .small-screen-mode .small-screen-mode-item .button-download-progress {
			top: 10px !important;
			left: 14px !important;
		}

		.Toolbar .small-screen-mode .small-screen-mode-item .button-download-completed .button-download-progress {
			height: 100%;
			display: block;
		}

		.Toolbar .small-screen-mode .small-screen-mode-item .button-download-progress-icon {
			position: absolute;
			top: 10px !important;
			left: 14px !important;
		}


@media screen and (max-width:845px) {
	/*hide progress icons in sidebarmenu*/
	.button-download-progress,
	.button-download-progress-icon {
		display: none;
	}


	.Toolbar .small-screen-mode .small-screen-mode-item .button-download-progress,
	.Toolbar .small-screen-mode .small-screen-mode-item .button-download-progress-icon {
		display: inline;
	}

	.Toolbar .small-screen-mode.offline {
		display: inline-flex;
	}

	.download_dropdown .odn-icon.download-offline {
		display: none;
	}
}

@media screen and (max-width:330px) {
	.Toolbar .small-screen-mode.offline {
		display: none;
	}

	.download_dropdown .odn-icon.download-offline {
		display: flex;
	}
}

.Toolbar .search-icon-for-small-devices .text, .Toolbar .small-screen-mode.offline .text {
	text-align: center;
	margin-top: -1.2em;
	width: 50px;
	display:block;
}

@media screen and (max-width:560px) {
	.most_left.shrinked {
		margin-right: 0px;
	}

	.most_left .logo.shrinked {
		margin-left: -5px;
		width: 115px;
		/*background-image: url('Images/shortcut_icon.jpg');*/
		background-size: 113px;
		margin-top: 2px;
	}
	.logout {
		top: 255px !important;
	}
}

/*Logout button*/
.logout {
	background-image: url(Images/icon_logout.png);
	margin-right: 3px;
	background-size: 85px;
	width: 108px;
}

.logout:hover {
	background-image: url(Images/icon_logout_on.png);
}