/* ADA responsive style overrides */

/*
 * Shalaka & Smitty (2023/06/01 - 2024/??/??)
 *  Made extensive changes from original used for RDO ADA compliance to support RDSO 3.19 upgrade
 *
 * NOTES:
 *
 * + Whenever this file is updated make sure to also deploy it to /WebHelp/css
 *   so that the static pages served from the web servers will be consistent.
 *
 * + Use versioning for any images referenced by adding a '?v=n' to the end of
 *   the URL reference to force browsers to download the latest images.
 *
 *       background-image: url("../images/logo_BofA.svg?v=3");
 *
 *   If an image gets updated add 1 to n to ensure the new image is downloaded.
 */

@media screen and (max-width: 1400px) {
	.TRTransactionSummaryTop > td,
	.TRTransactionSummaryBottom > td {
		width: 50%;
	}
	.TRTransactionSummaryTop > td:nth-last-child(-n + 2) {
		padding-top: 1.6rem;
	}
}

@media screen and (max-width: 1200px) {
	.HeaderButton .User {
		flex-direction: column;
		align-items: end;
	}
	.HeaderButton .UserRoles {
		max-width: 35rem;
	}
	.HeaderButton .UserName {
		background: none;
		padding-right: 0;
		max-width: 35rem;
	}
	.Table2Columns > tbody > tr {
		flex-direction: column;
	}
	.TDImageRight {
		padding-top: 0;
		padding-left: 0;
	}
	.TDSummaryGroup,
	.TDSummaryGroupC,
	.TDSummaryGroupFR,
	.TDSummaryGroupAC {
		width: 50%;
	}
	.TDSummaryGroup,
	.TDSummaryGroupC {
		padding-bottom: 1.6rem;
	}
	.ShowDepositBalancingAreaPanels .ReadOnlyFieldOutline,
	.ShowDepositBalancingAreaPanels .TDSummaryValue {
		height: unset;
	}
	.ShowDepositBalancingAreaPanels #Form\:BalanceExpectedAmountPanel {
		display: flex;
		flex-direction: column;
	}
	#Form\:ShowDepositBalancingArea {
		border-bottom: solid 0.1rem #ccd3e1;
	}
	#Form\:ShowDepositTopButtons {
		padding-top: 2rem;
	}
	#Form\:ItemSearchCriteriaRegion .InformationPanels {
		flex-direction: column;
	}
	.ResearchDocumentPreviewPanelWidth {
		border-left: none;
		margin-top: 3.2rem;
	}
	.ResearchDocumentPreviewPanelWidth::before,
	.ResearchDocumentPreviewPanelWidth .ImageFrameOuter {
		margin-left: 0;
	}
	#Form\:transactionDetails .GoodValue,
	#Form\:transactionDetails .BadValue,
	#Form\:transactionDetails .SummaryValue {
	    width: calc(50% - 10rem);
	}
	#Form\:transactionDetails span:nth-last-child(-n + 4) {
		padding-top: 1.6rem;
	}
}

@media screen and (max-width: 992px) {
	/* BACResizeTableListWrapper (in ncr_scripts.js) relies on the font-size
	 * change being made here when the browser window viewport size is less
	 * than or equal to this maximum to calculate the resize value. If this
	 * change is moved to a different max-width media check be sure to make
	 * the appropriate changes there as well. - Smitty (2024/02/22) */
	html {
		font-size: 50%;
	}
	.TDSideNavBorder {
		width: 1.6rem;
	}
}

@media screen and (max-width: 806px) {
	/* Deal with special case of buttons wrapping to 2nd line on the Deposit List page */
	
	.DepositList #Form\:ReturnButton {
		margin-top: 1.6rem;
	}
}

@media screen and (max-width: 768px) {
	#Header .CloseLink,
	.HeaderButton a {
		width: 0;
		color: transparent;
	}
	#Header .CloseLink,
	#HeaderForm\:LogoffLink,
	#HeaderForm\:PageHelpLink {
		padding-left: 2rem;
	}
	#HeaderForm\:TipsOffLink {
		padding-left: 2.5rem;
	}
	#HeaderForm\:TipsOnLink {
		padding-left: 3rem;
	}
	#Header .Right {
		width: 13rem;
	}
	#Nav li {
		padding-left: 0.2rem;
		padding-right: 0.2rem;
	}
	#SideNav {
		min-width: 15rem;
	}
	.TDSideNavBorder {
		width: 1.6rem;
	}
	.TableSummary:not(#Form\:SampleTable) > tbody > tr,
	.TableSummaryManyListbox > tbody > tr {
		width: 100%;
	}
	.HeaderButton .User {
		line-height: 1.6rem;
		width: 10rem;
		flex-direction: row;
	}
	.HeaderButton .UserLastLogin {
		width: 8.75rem;
		color: transparent;
		overflow: hidden;
		background-image: url("../images/rdso-message-info.svg?v=3");
		background-repeat: no-repeat;
		background-position: right center;
		background-size: 1.4rem;
	}
	.HeaderButton .UserLastLogin:hover {
		width: auto;
		color: #646464;
		background-image: none;
		overflow: visible;
		background-color: #ffffff;
	}
	.HeaderButton .UserLastLogin::before {
		color: #646464;
	}
	.HeaderButton .UserLastLogin:hover::before {
		content: "";
	}
	.HeaderButton .UserRoles {
		width: 6.6rem;
		color: transparent;
		overflow: hidden;
		background-image: url("../images/rdso-message-info.svg?v=3");
		background-repeat: no-repeat;
		background-position: right center;
		background-size: 1.4rem;
	}
	.HeaderButton .UserRoles:hover {
		width: auto;
		color: #646464;
		background-image: none;
		overflow: visible;
		background-color: #ffffff;
	}
	.HeaderButton .UserRoles::before {
		content: "Roles:";
		color: #646464;
	}
	.HeaderButton .UserRoles:hover::before {
		content: "";
	}
	.HeaderButton .UserName {
		width: 5.3rem;
		color: transparent;
		overflow: hidden;
		background-image: url("../images/rdso-message-info.svg?v=3");
		background-repeat: no-repeat;
		background-position: right center;
		background-size: 1.4rem;
	}
	.HeaderButton .UserName:hover {
		width: auto;
		color: #646464;
		background-image: none;
		overflow: visible;
		background-color: #ffffff;
	}
	.HeaderButton .UserName::before {
		content: "User:";
		color: #646464;
	}
	.HeaderButton .UserName:hover::before {
		content: "";
	}
	.TwoColumnPageTable #Form\:FormSearchTypeInput {
		display: block;
		width: 30rem;
	}
	.TwoColumnPageTable #Form\:SearchTermInput {
		margin-top: 1.6rem;
		margin-bottom: 1.6rem;
	}
	.TwoColumnPageTable #Form\:SearchButton {
		margin-left: 0;
	}
	.TDSummaryGroup,
	.TDSummaryGroupC,
	.TDSummaryGroupFR,
	.TDSummaryGroupAC {
		width: 100%;
	}
	.TDSummaryGroupFR {
		padding-bottom: 1.6rem;
	}
	#Form\:AccountCurrencyForExpAmountPanel {
	    padding-bottom: 0;
	}
	.TDFormLabel4 .FormLabelNoWrap,
	.TDFormLabel4 .FormLabelNoWrapDisabled {
		white-space: normal;
	}
	.RPSummaryLeft,
	.RPSummaryRight {
		width: 100%;
	}
	.FDICSignageBelow {
		flex-direction: column;
		align-items: normal;
	}
	.FDICSignageLink {
		padding-left: 0;
	}
	#SubHeader {
		padding-top: 6.5rem;
	}
}

@media screen and (max-width: 576px) {
	.TableHotLinks {
		max-width: none;
		height: min-content;
	}
	.TableHotLinks .HotLinkTitle {
		padding: 1.6rem 1.6rem 0;
	}
	.TableHotLinks .FullWidth {
		padding-top: 2.4rem;
		height: auto;
	}
	tbody#Form\:HotLinks\:tbody_element td {
		padding-bottom: 1.6rem;
	}
	.TwoColumnPageTable #PaginationContent {
		height: auto;
		flex-direction: column;
	}
	.TwoColumnPageTable #Pagination {
		width: auto;
		text-align: left;
	}
	.TwoColumnPageTable #PageSizeSelector {
		text-align: left;
		width: auto;
	}
	.TwoColumnPageTable .paginationInfo {
		width: auto;
	}
	.ErrorData dt,
	.MessageText dt {
		width: 20rem;
		padding-left: 1.6rem;
	}
	.ErrorData dd,
	.MessageText dd {
		width: calc(100% - 21.6rem);
	}
}

@media screen and (max-width: 465.67px) {
	/* This is a special breakpoint to be used for the FDIC Signage to allow for proper wrapping of the FDIC related elements - Smitty (2024/10/24) */
	
	#SubHeader {
		padding-top: 7.8rem;
	}
}

@media screen and (max-width: 360px) {
	.HeaderButton .LoggedInUserBlock {
		display: none;
	}
	#HeaderForm\:PageHelpLink,
	#HeaderForm\:TipsOffLink,
	#HeaderForm\:TipsOnLink {
		display: none;
	}
}