/*  This definition should fix the mdl-tooltip text blurry on Chrome v.53 and higher */
.mdl-tooltip {
	will-change:unset;
}

.objectTitle {
	max-width: 73%;
}

.hideAZHeaders {
	display: none;
}


@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(MaterialIcons-Regular.woff2) format('woff2'),
       url(MaterialIcons-Regular.woff) format('woff'),
       url(MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

.rtl .material-icons {
	direction: rtl;
}

/* unavailable message */
p.unavailable-message {
	font-size: large;
	margin: 20px;
}

#sfx-results-loader {
  position: fixed;
  bottom: 0;
  z-index: 1000;
  width: 100%;
  height: 0;
  display: none; }
  #sfx-results-loader .sfx-loader {
    opacity: 0;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    min-height: 50px;
    min-width: 50px;
    border-radius: 50%;
    background-color: white;
    box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
  #sfx-results-loader.loader-animating.loader-visible .sfx-loader {
    opacity: 1;
    -webkit-transform: translateY(-30vh);
        -ms-transform: translateY(-30vh);
            transform: translateY(-30vh);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }

 /* Fix the mdl-spinner being not centered with background for I.E. 11 browser (no background in this case) */
/* This media means that it will affect only I.E. browser  */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  #sfx-results-loader .sfx-loader {
    opacity: 0;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    background-color: transparent;
    box-shadow: none;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
 }


.clear_icon_in_input {
	  position: absolute;
	  right: 0;
	  top: 5px;
	  color: #bbb;
	  direction:ltr;
}

/* prevent text to override the 'x' clear buttin in the input field */
#param_pattern_value {
	padding-right: 5%;
}

/* Remove the default 'x' clear button from internet explorer */
#param_pattern_value::-ms-clear {
    display: none;
}
.sfx-inactive-item-title{color:grey !important;}

.peer_reviewed_icon {
	margin-right: 0px;
}

/*  There is some bug with the auto-width of 'getmdl-select' so in order to make sure long
 *   headers won't cut we set the width dropdown list to be a little bit wider */
.az_alphabet_headers {
	width: 190px;
}

#languageMenu {
	width: 170px !important;
}

.sfx-alphabet-list {
  	-webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.rtl_keyboard_arrow_down {
	  position: absolute;
	  left: 0;
}

.direction_ltr {
	direction: ltr;
}
.title_color {
	color: #ff5252;
	text-decoration-color: #ff5252 !important;
}

.mdl_menu_rtl {
	margin:8px;
}

.object_search_input_rtl {
	text-align: right;
	padding-right:8px
}


/* Remove the blue outline in Chrome which related to tabindex focus */
*:focus {
    outline: none;
}

.sfx-svg-icon img {
    width: 100%;
    height: 100%;
}

.sfx-svg-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
}

.sfx-logo-image {
	max-width: 380px;
	max-height: 50px;
}

@media (max-width: 390px) {
	/* Set the width of dropdown lists for small devices */
  	.select_field_sm {
    	width: 240px !important;
    }

    /* Set the reset button position small devices */
    #vendors-reset {
    	margin-left: -0.4em;
    }
	.sfx-logo-image {
		max-width: 115px;
	}
}

@media (max-width: 600px) {
	/* Make the reset buttons ("x") bigger in small devices */
    #categories-reset {
    	padding-top: 5px;
    	padding-bottom: 5px;
    }
}

@media (min-width: 391px) and (max-width: 600px) {
	.sfx-logo-image {
		max-width: 160px;
	}
}

@media (max-width: 959px) {
	.sfx-logo-placeholder {
		margin-left: 20px;
	}

	.rtl_sfx-logo-placeholder {
		margin-right: 30px;
		margin-left: 0px;
	}
	.mdl-layout .mdl-layout__drawer-button:not(.show-gt-xs):not(.show-sm):not(.show) {
    	right: 0 !important;
    }

    /* prevent text to override the 'x' clear buttin in the input field */
	#param_pattern_value {
		padding-right: 10%;
	}
	.sfx-topbar .mdl-layout__header-row {
    	padding: 0 20px;
	}
 }

@media (min-width: 600px) and (max-width: 959px) {
	/* Make the navigation bar on the header width smaller so long text will be wrapped */
	/* and go to next row. Other wise the UI language dropdown disapears  */
	.mdl-navigation__link:not(.mobile_navigation_link) {
		max-width: 80px;
		line-height: 18px !important;
		text-align: center;
	}

	/* add the drawer for mobile navigation bar (urls) instead of the upper navigation bar */
	.mdl-layout .mdl-layout__drawer-button:not(.show-gt-xs):not(.show-sm):not(.show) {
    	display: block !important;
    }

	.rtl_sfx-logo-placeholder {
		margin-right: 30px;
	}
	.sfx-logo-image {
		margin-left: 0px;
	}

	/* Fix the wrapping issue in i.e. for the service name in the object view  */
	.i_e_11 .availability_div {
		width: 350px;
	}

	/* width of the 'report broken link' dialog box */
	.report_broken_link_box {
		width: 400px;
	}
}

@media (min-width: 960px) and (max-width: 1100px) {
	/* Make the navigation bar on the header width smaller so long text will be wrapped */
	/* and go to next row. Other wise the UI language dropdown disapears  */
	.mdl-navigation__link:not(.mobile_navigation_link) {
		max-width: 100px;
		line-height: 18px !important;
		text-align: center;
		padding-right: 6px !important;
		padding-left: 6px !important;
	}

	/* Fix the wrapping issue in i.e. for the service name in the object view  */
	.i_e_11 .availability_div {
		width: 500px;
	}

	/* width of the 'report broken link' dialog box */
	.report_broken_link_box {
		width: 400px;
	}
}

@media (min-width: 1101px) and (max-width: 1600px) {
	/* Make the navigation bar on the header width smaller so long text will be wrapped */
	/* and go to next row. Otherwise the UI language dropdown disapears  */
	.mdl-navigation__link:not(.mobile_navigation_link) {
		max-width: 115px;
		line-height: 18px !important;
		text-align: center;
		padding-right: 16px !important;
		padding-left: 16px !important;
	}
}

@media (min-width: 1601px) and (max-width: 1800px) {
	/* Make the navigation bar on the header width smaller so long text will be wrapped */
	/* and go to next row. Other wise the UI language dropdown disapears  */
	.mdl-navigation__link {
		max-width: 200px;
		line-height: 18px !important;
		text-align: center;
		padding-right: 20px !important;
		padding-left: 20px !important;
	}

	/* width of the 'report broken link' dialog box */
	.report_broken_link_box {
		width: 500px;
	}
}

@media (max-width: 960px) {
	/* Show all pagination button "..." for medium and smaller devices instead of the ranges' */
	.show_all_pagination_on_medium_devices {
		display: block !important;
	}
}

.disabled_link {
	pointer-events: none !important;
	cursor: default !important;
}

[data-sfx-view=full] .sfx-item-details-container {
	position:absolute;
	top:0;
	right:0;
	width:50%;
	max-width:500px;
	z-index:1;
	height:100%;
	background-color:#fff;
	-webkit-transform:translateX(30%);
	transform:translateX(30%);
	transition:all .4s cubic-bezier(.25,.8,.25,1);
	transition-duration:.3s;
	opacity:0
}
@media screen and (max-width:600px) {
	[data-sfx-view=full] .sfx-item-details-container {
		width:100%
	}

	/* width of the 'report broken link' dialog box */
	.report_broken_link_box {
		width: 300px;
	}
}

@media screen and (max-height:400px) {
	/* height of the 'report broken link' dialog box */
	.report_broken_link_box {
		height: 280px;
	}
}


[data-sfx-view=full] .sfx-item-details-container .sfx-item-details-container-inner {
	padding:2em;
	height:100%;
	box-sizing:border-box;
	overflow-y:auto
}
[data-sfx-view=full].item-details-visible .sfx-item-details-container {
	-webkit-transform:translateX(0);
	transform:translateX(0);
	opacity:1;
	transition:all .4s cubic-bezier(.25,.8,.25,1);
	transition-duration:.4s
}
[data-sfx-view=standalone] .sfx-item-details-container {
	background-color:#fff
}

/* Align the down arrows icons in the dropdown lists to the left for RTL languages  */
[class*=getmdl-select] > label:first-of-type {
	position:static;
}

/* Fix the view button icon in the brief view screen in I.E. browser  */
.toggled.sfx-toggle-button .sfx-show-on-toggled {
	display: block;
}

/* Fix the long services names overlay on the categories on the right in I.E. browser  */
.full_flex_wrap {
	width:100%;
}

/* Fix the footer overlay with the results in I.E. browser  */
/* This media means that it will affect only I.E. browser  */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   footer {
	    position: relative;
	    width:100%;
	    padding-top: 20%;
	}
	[dir="rtl"] .sfx-availability-links .sfx-source-link.sfx-external-source:focus .sfx-external-icon, [dir="rtl"] .sfx-availability-links .sfx-source-link.sfx-external-source:hover .sfx-external-icon {
	                -ms-transform: translateX(20px);
	}
}

[dir="rtl"] .sfx-availability-links .sfx-source-link.sfx-external-source:focus .sfx-external-icon, [dir="rtl"] .sfx-availability-links .sfx-source-link.sfx-external-source:hover .sfx-external-icon {
                -webkit-transform: translateX(-20px);
                -moz-transform: translateX(-20px);
}
/* edge transform fix */
@supports (-ms-ime-align:auto){
	[dir="rtl"] .sfx-availability-links .sfx-source-link.sfx-external-source:focus .sfx-external-icon, [dir="rtl"] .sfx-availability-links .sfx-source-link.sfx-external-source:hover .sfx-external-icon {
	                transform: translateX(20px);
	}
}


.height_auto {
	height: auto;
}

.line_height_normal {
	line-height: normal !important;
}

#categories-list, .subcategory-list {
	margin-top: 5px !important;
}

dialog .sfx-close-button {
    right: 1px;
    top: 1px;
}

/* Fix the checkbox/radio and the labels direction for RTL languages  */
.mdl-radio.is-upgraded, .mdl-checkbox.is-upgraded{padding-right:24px}
.mdl-radio__outer-circle, .mdl-checkbox__box-outline{right:0;}
.mdl-radio__inner-circle {right:4px;}
.mdl-radio__ripple-container, .mdl-checkbox__ripple-container{right:-10px;}


@media (min-width: 1280px) {
	/* Fix the missing scrollbar in dropdown lists in 'Safari' browser  */
	.safari .mdl-menu__outline {
		will-change: unset !important;
	}

	/* Fix the popup navigation bar on the left when scrolling mouse in 'Safari' browser  */
	.safari .mdl-layout {
    	overflow-x: scroll !important;
	}
}

/* Fix the navigation bar on the left in 'Safari' on small devices which corrupt the screen*/
/* when opening the object view  */
.mobile_navigation_bar {
	position: fixed;
}

.Exl_hide {
	display:none;
}

/* Make the hyperling of "report broken link" smaller and aligned */
/* so it won't overlap the hyperlink' icon that next to the object title */
.report_broken_link_hyperlink {
	padding-left: 25px;
	font-size: smaller;
	cursor: pointer;
}

.rtl .report_broken_link_hyperlink {
	padding-right: 25px;
	font-size: smaller;
	cursor: pointer;
}


.report_broken_link_text {
	color: rgb(0,0,0);

}

/* The color of the text in the submit button  */
#report_broken_link_submit_button a {
	color: #ffffff;
	text-decoration-color: #ffffff !important;
}

.ReportingIntroMainText {
	font-size: 18px;
	line-height: 40px;
}

/* report broken link submit button should be on the right for LTR languages  */
.report_broken_link_submit_button {
	direction: rtl;
}
.rtl .report_broken_link_submit_button {
	direction: ltr;
}

/* Prevent overlapping the error message with the submit button  */
/* in the broken link dialog box (mainly in smaller devices) */
#report_broken_link_error_field {
	position: relative;
	font-size: small;
	color: red;
}

.i_e_11 dialog.sfx-dialog .mdl-dialog__content {
	max-height: 400px;
	overflow:auto;
}

@media (min-width: 1100px) {
	/* Fix the wrapping issue in i.e. for the service name in the object view  */
	.i_e_11 .availability_div {
		width: 450px;
	}

	/* width of the 'report broken link' dialog box */
	.report_broken_link_box {
		width: 600px;
	}
}

.report_broken_link_thank_you {
	font-size: small;
	font-style: italic;
}

/* Custom */
main,
.sfx-layout__content-block {
	background-color: #e9e9e9!important;
}

.sfx-topbar {
	background-color: #842C2A!important;
	color: #CBCAB8!important;
	font-weight: 900;
}

.mdl-layout__header-row,
.sfx-search-form,
.mdl-button.button-with-icon,
.sfx-alphabetList,
.sfx-topbar {
	background-color: #CBCAB8!important;
	color: #842C2A!important;
}

.mdl-button--accent.mdl-button--accent.mdl-button--raised,
.mdl-button--accent.mdl-button--accent.mdl-button--fab {
	background-color: #842C2A!important;
	color: #CBCAB8!important;
}

.mdl-radio.is-checked .mdl-radio__outer-circle,
.mdl-checkbox.is-checked .mdl-checkbox__box-outline {
	border-color: #842C2A;
}

.mdl-radio.is-checked .mdl-radio__inner-circle,
.mdl-checkbox .mdl-checkbox__ripple-container .mdl-ripple, {
	background-color: #842C2A;
}

.sfx-alphabet-list .sfx-letter-button,
.sfx-results-toolbar a.mdl-button,
.sfx-results-list .sfx-result-item .title_color {
    color: #842C2A!important;
}

.getmdl-select .mdl-icon-toggle__label,
.mdl-textfield.mdl-textfield--floating-label.is-dirty .mdl-textfield__label,
.mdl-button--accent.mdl-button--accent {
    color: #842c2a!important;
}

.sfx-topbar .mdl-navigation__link {
    font-weight: bold;
}

.mdl-button--fab.mdl-button--colored {
	background-color: : #842c2a!important;
}

.mdl-button--fab.mdl-button--colored {
    background: #842c2a;
    color: #FFFFFF;
}

.mdl-button--fab.mdl-button--colored:hover {
    background: #842c2a;
    color: #FFFFFF;
}

footer {
	background-color: #E9E9E9!important;
}