/* this makes the vertical scrollbar appear regardless of whether the page needs scrolling or not - don't use this as it puts scroll bars in iframes!*/
html {
	overflow: -moz-scrollbars-vertical;
	overflow-y: scroll;
}

html,
body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	/*overflow-x: hidden;*/
}

iframe {
	display: block; /* This prevents the iframe from having padding below it */
}

/* Fix position or radio/checkboxes relative to adjacent text */
input[type='radio'],
input[type='checkbox'] {
	vertical-align: middle;
	/*margin-top:-1px;*/
	/*padding:2px;
	margin:3px;*/
	/*margin:1px;*/
	margin-right: 3px;
}

/* Remove the "X" that the browser automatically adds to the right-hand side of input boxes */
input[type='text']::-ms-clear {
	display: none;
	width: 0;
	height: 0;
}
input[type='text']::-ms-reveal {
	display: none;
	width: 0;
	height: 0;
}
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
	display: none;
}

/* This fixed the issue with input boxes with width 100% spanning more than 100% */
input,
textarea,
select {
	box-sizing: border-box;
}

input[type='button'],
input[type='submit'] {
	cursor: pointer;
}

.padding_inside_width {
	box-sizing: border-box;
}

/* This prevents Google Charts axis from being italic */
text {
	font-style: normal;
}

/*
Placeholder style for input fields
*/

::-webkit-input-placeholder {
	/* Chrome/Opera/Safari */
	color: #aaaaaa;
}
::-moz-placeholder {
	/* Firefox 19+ */
	color: #aaaaaa;
}
:-ms-input-placeholder {
	/* IE 10+ */
	color: #aaaaaa;
}
:-moz-placeholder {
	/* Firefox 18- */
	color: #aaaaaa;
}

/* Get rid of rounded corners that some browsers add to input boxes */
.input_no_corners/*,select - doing this on select boxes removes the drop-down arrow! */ {
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	border-radius: 0;
}

form {
	display: inline;
}

a {
	border: 0px;
}

/* Remove bottom margin from paragraphs within table cells - this was causing unwanted things, such as no paragraph spacing below tables and the content below the table
td p {
	margin-bottom: 0px;
} */

img {
	display: block;
	border: 0px;
	-ms-interpolation-mode: bicubic;
}

.fix_image_spacing {
	display: inline-block;
	vertical-align: top;
}
.fix_image_spacing img {
	display: inline-block;
	vertical-align: top;
}

.undo_fix_image_spacing {
	display: inline;
	/*vertical-align: baseline;*/
}
.undo_fix_image_spacing img {
	display: inline;
	/*vertical-align: baseline;*/
}

.undo_fix_image_spacing_no_baseline {
	display: inline;
}
.undo_fix_image_spacing_no_baseline img {
	display: inline;
}

.img_cell_container {
	display: table-cell;
	vertical-align: middle;
}
.img_cell_container img {
	/*display: inline;*/
	vertical-align: middle;
}

/* This version has "vertical-align: middle" for the container rather than <img> tags
.img_cell_container_alt {
	display: table-cell;
	vertical-align: middle;
}
.img_cell_container_alt img {
	display: inline;
	margin-top: 2px;
}*/

.img_text_container {
	display: table-cell;
	vertical-align: middle;
}

/*! Gray v1.4.5 (https://github.com/karlhorky/gray) | MIT */
.grayscale {
	/* Firefox 10-34 */
	filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='saturate' values='0'/></filter></svg>#grayscale");

	/*
    Chrome 19+,
    Safari 6+,
    Safari 6+ iOS,
    Opera 15+
  */
	-webkit-filter: grayscale(1);

	/* Firefox 35+ */
	filter: grayscale(1);

	/* IE 6-9 */
	filter: gray;
}

.grayscale.grayscale-fade {
	transition: filter 0.5s;
}

/* Webkit hack until filter is unprefixed */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
	.grayscale.grayscale-fade {
		-webkit-transition: -webkit-filter 0.5s;
		transition: -webkit-filter 0.5s;
	}
}

.grayscale.grayscale-off,
.grayscale.grayscale-fade:hover {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}

/* Background element */
.grayscale.grayscale-replaced {
	-webkit-filter: none;
	filter: none;
}

.grayscale.grayscale-replaced > svg {
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
	opacity: 1;
}

.grayscale.grayscale-replaced.grayscale-off > svg,
.grayscale.grayscale-replaced.grayscale-fade:hover > svg {
	opacity: 0;
}

.no_scrollbars {
	overflow-x: hidden;
	overflow-y: hidden;
}

.button {
	background-color: #f4f4f4;
	border: 1px solid #b2b2b2;
}

.button_padding {
	padding-left: 10px;
	padding-right: 10px;
}

.no_enlarge {
}

.paragraph_no_bottom {
	margin-bottom: 0px;
}

/* Miscellaneous */

.nowrap {
	white-space: nowrap;
}

/* PARAGRAPH FIX */

/* decrease the spacing between paragraphs */

#para_small p {
	margin: 0px 0px 7px 0px;
}

/* CURSORS */

label {
	vertical-align: middle;
	cursor: pointer;
	cursor: hand;
}

.cursor {
	cursor: pointer;
	cursor: hand;
}

.cursor_default {
	cursor: default;
}

.move {
	cursor: move;
}

/* BULLET */

ul {
	list-style-type: square;
	margin: 0px 0px 5px 25px;
	padding-left: 0px;
}
ol {
	margin: 0px 0px 0px 25px;
	padding-left: 0px;
}

.bullet_nopadding {
	list-style-type: square;
	margin: 0px 0px 0px 17px;
	padding-left: 0px;
}

/* FONT SIZES */

.font_ss {
	font-size: 10px;
}
.font_s {
	font-size: 11px;
}
.font_m {
	font-size: 12px;
}
.font_l {
	font-size: 13px;
}
.font_ll {
	font-size: 14px;
}
.font_lll {
	font-size: 15px;
}
.font_llll {
	font-size: 16px;
}
.font_lllll {
	font-size: 17px;
}
.font_llllll {
	font-size: 18px;
}
.font_lllllll {
	font-size: 19px;
}
.font_llllllll {
	font-size: 20px;
}
.font_lllllllll {
	font-size: 21px;
}
.font_22 {
	font-size: 22px;
}
.font_24 {
	font-size: 24px;
}
.font_32 {
	font-size: 32px;
}
.font_35 {
	font-size: 35px;
}
.font_36 {
	font-size: 36px;
}

.font_bold {
	font-weight: bold;
}
.font_italic {
	font-style: italic;
}

/* FONT COLOURS */

.font_box_example {
	color: #aaaaaa;
}
.font_grey {
	color: #666666;
}
.font_grey-light {
	color: #aaaaaa;
}
.font_white {
	color: #ffffff;
}
.font_white_important {
	color: #ffffff !important;
}
.font_purple {
	color: #333092;
}
.font_purple-light {
	color: #9291c5;
}
.font_purple-light-light {
	color: #adacd2;
}
.font_black {
	color: #000000;
}

.font_black_important {
	color: #000000 !important;
}

.font_yellow {
	color: #ffff00;
}

/* LINKS */

.no_underline {
	text-decoration: none;
}

.font_white a,
.font_white a *,
.font_white a:link,
.font_white a:visited,
.font_white a:active {
	color: #ffffff;
	text-decoration: underline;
}
.font_white a:hover {
	color: #ffffff;
	opacity: 0.8;
	text-decoration: underline;
}

.link_white a,
.link_white a *,
.link_white a:link,
.link_white a:visited,
.link_white a:active {
	color: #ffffff;
	text-decoration: none;
}
.link_white a:hover {
	opacity: 0.8;
	text-decoration: none;
}

.link_white_underline a,
.link_white_underline a *,
.link_white_underline a:link,
.link_white_underline a:visited,
.link_white_underline a:active {
	color: #ffffff;
}
.link_white_underline a:hover {
	color: #dddddd;
}

.link_grey a,
.link_grey a *,
.link_grey a:link,
.link_grey a:visited,
.link_grey a:active {
	color: #666666;
	text-decoration: none;
}
.link_grey a:hover {
	color: #949494;
	text-decoration: none;
}

.link_grey-light a,
.link_grey-light a *,
.link_grey-light a:link,
.link_grey-light a:visited,
.link_grey-light a:active {
	color: #aaaaaa;
	text-decoration: none;
}
.link_grey-light a:hover {
	color: #bfbfbf;
	text-decoration: none;
}

.link_links-bar_inactive a,
.link_links-bar_inactive a *,
.link_links-bar_inactive a:link,
.link_links-bar_inactive a:visited,
.link_links-bar_inactive a:active {
	color: #ffffff;
	text-decoration: none;
}
.link_links-bar_inactive a:hover {
	color: #e6e6e6;
	text-decoration: none;
}

.link_links-bar_active a,
.link_links-bar_active a *,
.link_links-bar_active a:link,
.link_links-bar_active a:visited,
.link_links-bar_active a:active {
	color: #ffffff;
	text-decoration: underline;
	font-weight: bold;
}
.link_links-bar_active a:hover {
	color: #e6e6e6;
	text-decoration: underline;
	font-weight: bold;
}

.link_purple-light a,
.link_purple-light a *,
.link_purple-light a:link,
.link_purple-light a:visited,
.link_purple-light a:active {
	color: #9291c5;
	text-decoration: none;
}
.link_purple-light a:hover {
	color: #adacd2;
	text-decoration: none;
}

/* CAPTURE BOTS */

.bot_capture {
	display: none;
}

/* BACKGROUNDS */

.background_purple {
	background-color: #333092;
}
.background_purple-medium {
	background-color: #8583be;
}
.background_purple-light {
	background-color: #eaeaf4;
}
.background_grey {
	background-color: #cecece;
}
.background_white {
	background-color: #ffffff;
}
.background_black {
	background-color: #000000;
}

.background_menu_out {
	background-color: #6c6ab0;
}
.background_menu_over {
	background-color: #605daa;
}

/* Borders */

.border_white {
	border: 1px solid #ffffff;
}

/* DISPLAY */

.display_inline {
	display: inline;
}

.display_inline-block {
	display: -moz-inline-block;
	display: -moz-inline-box;
	display: inline-block;
}

.display_block {
	display: block;
}

.display_table_cell_important {
	display: table-cell !important;
}

/* ERROR/SUCCESS BOXES */

.awaiting_box {
	color: #666666;
	border: 1px solid #666666;
	background-color: #cccccc;
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	text-align: center;
}

.success_box {
	color: #009933;
	border: 1px solid #00f951;
	background-color: #9bffbc;
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	text-align: center;
}

.success_link a,
.success_link a *,
.success_link a:link,
.success_link a:visited,
.success_link a:active {
	color: #009933;
}
.success_link a:hover {
	color: #33ad5c;
}

.SecureBox {
	color: #000000;
	border: 1px solid #00f951;
	background-color: #9bffbc;
	padding: 5px;
	margin-top: 5px;
}

.error_box {
	color: #ff0000;
	border: 1px solid #ff0000;
	background-color: #ffd2d2;
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	text-align: center;
}

.error /* this is needed as forms still use the class name "error" for the error box */ {
	color: #ff0000;
	border: 1px solid #ff0000;
	background-color: #ffd2d2;
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	text-align: center;
}

.error_link a,
.error_link a *,
.error_link a:link,
.error_link a:visited,
.error_link a:active {
	color: #ff4040;
}
.error_link a:hover {
	color: #ff8080;
}

.error_input {
	background-color: #ffd2d2;
}

.error_button {
	color: #ff4040;
	background-color: #ffcece;
	border: 1px solid #ff4040;
	padding: 2px;
	padding-left: 5px;
	padding-right: 5px;
	font-weight: bold;
}

/*
WYSIWYG editor
*/

.wysiwyg_body {
	margin: 5px;
}

.cke a,
.cke a *,
.cke a:link,
.cke a:visited,
.cke a:active,
.cke a:hover {
	color: black !important;
}

/*
Comment styles
*/

.comment_email_alerts a,
.comment_email_alerts a *,
.comment_email_alerts a:link,
.comment_email_alerts a:visited,
.comment_email_alerts a:active {
	font-size: 11px;
	color: #999999;
	text-decoration: none;
}
.comment_email_alerts a:hover {
	font-size: 11px;
	color: #999999;
	text-decoration: underline;
}

.comment_email_reply a,
.comment_email_reply a *,
.comment_email_reply a:link,
.comment_email_reply a:visited,
.comment_email_reply a:active {
	font-size: 11px;
	color: #666666;
	text-decoration: none;
}
.comment_email_reply a:hover {
	font-size: 11px;
	color: #666666;
	text-decoration: underline;
}

/*
Shadows
*/

.box_shadow {
	box-shadow: 5px 5px 5px -1px #b9bbb9;
}

.box_shadow_above {
	box-shadow: 0px -3px 5px -1px #1E243B;
}

.box_shadow_above_light {
	box-shadow: 0px -3px 5px -1px #3A4360;
}

.shadow_bottom_left {
	background-image: url(/media/images/shadow_box/bottom_left.png);
}
.shadow_bottom_middle {
	background-image: url(/media/images/shadow_box/bottom_middle.png);
}
.shadow_bottom_right {
	background-image: url(/media/images/shadow_box/bottom_right.png);
}
.shadow_right_middle {
	background-image: url(/media/images/shadow_box/right_middle.png);
}
.shadow_right_top {
	background-image: url(/media/images/shadow_box/right_top.png);
}

/*
Video overlay box - used by all domains
*/

.overlay_box_video {
	border: 1px solid #ffffff;
	background-color: #333333;
}

/*
Hide element
*/

.hide_it {
	display: none;
}
.show_it {
	display: inline;
}

/*
Fixed position element
*/

.FixedPositionTop {
	z-index: 9989;
	position: fixed;
	width: 100%;
	top: 0px;
	left: 0px;
	right: 0px;
}

.FixedPositionBottom {
	z-index: 9989;
	position: fixed;
	width: 100%;
	bottom: 0px;
	left: 0px;
	right: 0px;
}

/*
Ellipsis - shorten text string by putting a "..." at the end
*/

.TextEllipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
}

/*
Tranparency Levels
*/
.TransparencyLevel0 {
	opacity: 0;
}
.TransparencyLevel10 {
	opacity: 0.1;
}
.TransparencyLevel15 {
	opacity: 0.15;
}
.TransparencyLevel25 {
	opacity: 0.25;
}
.TransparencyLevel30 {
	opacity: 0.3;
}
.TransparencyLevel40 {
	opacity: 0.4;
}
.TransparencyLevel50 {
	opacity: 0.5;
}
.TransparencyLevel60 {
	opacity: 0.6;
}
.TransparencyLevel75 {
	opacity: 0.75;
}
.TransparencyLevel80 {
	opacity: 0.8;
}
.TransparencyLevel85 {
	opacity: 0.85;
}

.WhiteTransparencyLevel20 {
	background-color: rgba(255, 255, 255, 0.2);
}
.WhiteTransparencyLevel25 {
	background-color: rgba(255, 255, 255, 0.25);
}
.WhiteTransparencyLevel50 {
	background-color: rgba(255, 255, 255, 0.5);
}
.WhiteTransparencyLevel75 {
	background-color: rgba(255, 255, 255, 0.75);
}

.scrollbar-measure {
	width: 100px;
	height: 100px;
	overflow: scroll;
	position: absolute;
	top: -9999px;
}

.reverse_string {
	unicode-bidi: bidi-override;
	direction: rtl;
}

/*
Hide elements on screen but show elements when printed
*/

@media screen {
	.no_print {
	}
	.no_screen {
		display: none;
	}
}

/*
Hide elements when printed but show elements on screen
*/

@media print {
	.no_print {
		display: none;
	}
	.no_screen {
	}
}

/*
Table
*/

.table_layout_fixed {
	width: 100%;
	table-layout: fixed;
}

.table_no_border th {
	border: none !important;
	font-weight: normal;
}
.table_no_border td {
	border: none !important;
}
.table_no_border {
	border-collapse: collapse !important;
}

/*
Flex styles
*/

@media (max-width: 700px) {
	.mobile_hide {
		display: none;
	}
}
@media (min-width: 700px) {
	.mobile_show {
		display: none;
	}
}

@media (max-width: 1000px) {
	.tablet_hide {
		display: none;
	}
}

/* columns wrap depending on screen width */

@media screen and (min-width: 1000px) {
	.flex_container_tablet {
		display: flex;
		flex-wrap: nowrap;
	}
}

@media (max-width: 1000px) {
	.flex_container_tablet {
		display: flex;
		flex-wrap: wrap;
	}
	.flex_item_tablet {
		flex-basis: 100% !important;
	}
}

@media screen and (min-width: 500px) {
	.flex_container_mobile {
		display: flex;
		flex-wrap: nowrap;
	}
}

@media (max-width: 500px) {
	.flex_container_mobile {
		display: flex;
		flex-wrap: wrap;
	}
	.flex_item_mobile {
		flex-basis: 100% !important;
	}
}

/* columns with equal width that don't wrap */

.flex_container_nowrap {
	display: flex;
	flex-wrap: nowrap;
}

.flex_item_nowrap {
	flex-basis: 100%;
}

/* Make elements span 100% */

video {
	max-width: 100%;
	height: auto;
}
audio {
	max-width: 100%;
	height: auto;
}

/* CMS Content */

.cms_content img {
	display: inline;
}

.cms_content iframe {
	max-width: 100%;
}

.alignleft {
	float: left;
	margin-right: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.aligncenter {
}

.alignright {
	float: right;
	margin-left: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
}

/* Search Engine Optimization friendly */

.no_margin {
	margin: 0px;
}

/* My Profile Form Validation */

/* This is the style to apply to the submit button if certain fields are invalid */

/* Subscribe Form Validation */
#AreaSubscribeText:has(input[type='text'][name^='Contact[']:invalid) div [type='submit']:not(:disabled) {
	opacity: 0.5;
	filter: grayscale(100%);
	cursor: not-allowed !important;
	pointer-events: none;
}

/* This is the style to apply to the field label if the field is invalid */
#AreaSubscribeText .subscribe_field_label:has(+ td > .subscribe_field_input:invalid),
#AreaSubscribeText .subscribe_field_input:invalid {
	color: var(--button-background-color) !important;
}

/* Contact Form Validation */
#tableContactDetails:has(input[type='text'][name^='Contact[']:invalid)~div [type='submit']:not(:disabled) {
	opacity: 0.5;
	filter: grayscale(100%);
	cursor: not-allowed !important;
	pointer-events: none;
}

/* This is the style to apply to the field label if the field is invalid */
#tableContactDetails .subscribe_field_label:has(+ td > .subscribe_field_input:invalid),
#tableContactDetails .subscribe_field_input:invalid {
	color: var(--button-background-color) !important;
}

/* Billing Form Validation */
#tableBillingDetails:has(input[type='text'][name^='Contact[']:invalid)~div [type='submit']:not(:disabled) {
	opacity: 0.5;
	filter: grayscale(100%);
	cursor: not-allowed !important;
	pointer-events: none;
}

/* This is the style to apply to the field label if the field is invalid */
#tableBillingDetails .subscribe_field_label:has(+ td > .subscribe_field_input:invalid),
#tableBillingDetails .subscribe_field_input:invalid {
	color: var(--button-background-color) !important;
}

/* Share Form Validation */
#shareForm:has(input[type='text']:invalid) #shareSend,
#shareForm:has(textarea.invalid) #shareSend {
	opacity: 0.5;
	filter: grayscale(100%);
	pointer-events: none;
	cursor: not-allowed !important;
}

/* This is the style to apply to the field label for the Share Form if the field is invalid */
#shareForm td.overlay_text:has(+ td input[type='text']:invalid),
#shareForm td.overlay_text:has(+ td textarea.invalid),
#shareForm td.overlay_text + td input[type='text']:invalid,
#shareForm td.overlay_text + td textarea.invalid {
	color: var(--button-background-color) !important;
}

/* Unsubscribe reason validation */
form[name='SubscriptionsForm']:has(textarea.invalid) #confirmUnsubscribe {
	opacity: 0.5;
	filter: grayscale(100%);
	pointer-events: none;
	cursor: not-allowed !important;
}

/* Subscription Form Validation */
#contactTable tr:has(td .contactField[type='text']:invalid)~tr td [type='submit']:not(:disabled) {
	opacity: 0.5;
	filter: grayscale(100%);
	cursor: not-allowed !important;
	pointer-events: none;
}

/* This is the style to apply to the field label if the field is invalid */
#contactTable tr td > .contactField[type='text']:invalid,
#contactTable tr .contactLabel:has(~ td > .contactField[type='text']:invalid),
#contactTable tr .contactLabel:has(~ td > table tr .contactField[name='State']:invalid),
#contactTable tr .contactLabel:has(~ td > table tr .contactField[name='Phone STD']:invalid),
#contactTable tr .contactLabel:has(~ td > table tr .contactField[name='Phone Number']:invalid) {
	color: var(--button-background-color) !important;
}

#contactTable tr td [type='submit'],
#contactTable tr td [type='button'] {
	margin-top: 6px;
}

/* RM1298 Promo Box Pen Test */
#promoCodeTable tr td input[type='text'][name='PromoCode']:invalid {
	color: var(--button-background-color) !important;
}

/* Billing Form Validation */
#promoCodeTable tr td:has(input[type='text'][name='PromoCode']:invalid) ~ td [type='button']:not(:disabled) {
	opacity: 0.5;
	filter: grayscale(100%);
	cursor: not-allowed !important;
	pointer-events: none;
}

#promoCodeTable tr td input[type='text'][name='PromoCode']:disabled, 
#promoCodeTable tr td ~ td [type='button']:disabled {
	opacity: 0.5;
	filter: grayscale(100%);
	cursor: not-allowed !important;
	pointer-events: none;
}
                                                                                                                                                                                                
/* Mobile and Desktop for Subscriptions*/
@media (max-width: 767px) {
	.subscription_add-journals-section {
		flex-wrap: wrap;
	}
	.subscription_add-journals {
		margin-bottom: 1rem;
		flex-basis: 100%;
	}
	#SubscriptionStep2ContinueButtonTop {
		margin-left: 0;
	}
}
@media (min-width: 768px) {
	.subscription_add-journals-section {
		flex-wrap: unset;
	}
	.subscription_add-journals {
		margin-bottom: 1rem;
		flex-basis: 99%;
	}
	#SubscriptionStep2ContinueButtonTop {
		margin-left: 20px;
	}
}

.top-menu-item-divider + .top-menu-item-divider {
	display: none !important;
}


/* For OAO ads */
.OAOAdSlot {
	display: flex;
	justify-content: center;
}

.moreArticlesResponsive {
	display: flex;
	flex-direction: column;
	margin-left: -15px;
	margin-right: -15px;
}

@media (min-width: 992px) {
	.moreArticlesResponsive {
		flex-direction: row;
		column-gap: 10px;
	}
}

.moreArticlesResponsive__item {
	flex:100%;
}

@media (min-width: 992px) {
	.moreArticlesResponsive__item {
		flex: 50%;
	}
}