/* These styles will take into effect when the screen size reaches 640px or less */
@media (max-width: 470px){
	.responsiveColumnTitle{
		width: 100%;
	}
	.responsiveTabView li{
		width: 100% !important;
	}
	
	.responsiveWizardRightButton{
		margin-left: 0 !important;
		float: right;
	}
	
	.responsivePanel input, .responsivePanel select{
		width: 100% !important;
	}
	.responsiveColumn{
		display: block;
	}
	.ui-chkbox-label {
		font-weight: bold;
		width: 100% !important;
		margin: 0 !important;
	}
	.formfield_checkbox {
		text-align: left;
	}
}

@media (max-width: 799px){
	.widgetColumn{
		display: block;
	}

	.ui-dashboard-column{
		width: 100% !important;
	}
/* 	.headerBar{ */
/* 		position: fixed; */
/* 		top: 0; */
/* 		left: 0; */
/* 		width: 100%; */
/* 		z-index: 100; */
/* 	} */

	.configsDiv{
		width:100%;
	}

	.responsiveTableContent{
    	margin-left: 20%;
    	text-overflow: ellipsis;
    	overflow: hidden;
    	display: block;
    	font-size: 0.9em;
	}
	
	.genericFieldPanelDiv div{
		padding: 0 !important;
	}
	.footerWrapper{
		margin: 0 !important;
	}
	.responsivePanelGrid{
		width: 100% !important;
		font-size: 0.8em !important;
	}
	.responsivePanelGrid td{
		width: 100% !important;
		display: inline-block !important;
		padding: 0 !important;
	}
	.responsiveWizardCancelButtonDiv{
		display:inline-block;
		width: 100%;
		text-align: center !important;
		margin-top: 10px;
	}
	.responsiveWizardCancelButtonDiv button{
		float: none !important;
	}
	.responsiveWizardCancelButtonDiv span{
		padding: 7px !important;
	}
	
	.responsiveWizardNavigationButton{
		width: 48% !important;
		margin: 0 !important;
		padding: 0 !important;
		font-size: 0.8em !important;
	}
	
	.autoPayEnrollmentButton{
		width: 45% !important;
		margin: 5px !important;
		padding: 0 !important;
		font-size: 0.8em !important;
		height: 35px;
	}
	
	.autoPayCancellationButton{
		width: 100%;
		height: 45px;
	}

	.mobileBillInfoTemplate, .mobileHeader,
	.displayOnSmallerScreens{
		display: inline-block !important;
	}
	
	.mobileBillInfoTemplate{
		width: 100%;
    	text-align: center;
    	overflow: hidden;
    	text-overflow: ellipsis;
	}

	.mobileBillInfoTemplate b{
		font-size: 16px;
	}
	.mobileBillInfoTemplate span{
		font-size: 15px;
	}

	.templateHeader {
		position: -webkit-sticky; /* Safari */
		position: sticky;
		top: 0px;
		z-index: 1;
	}
	
	.templateContent {
		/*position: relative;
    	z-index: 0;*/
	}

	.templateHeader,
	.templateContent,
	.templateFooter,
	.templateContentBody,
	.content,
	.recurringPayResponsiveSelectMenu{
		min-width: 0px !important;
	}
	
	.defaultHeader, .defaultBillInfoTemplate,
	.billSearchDefaultCriteriaInput, .responsiveMenu,
	.ui-wizard-step-titles, .removeOnSmallerScreens{
		display:none !important;
	}
	
	.responsivePanel{
		/*text-align: center;*/
		width: 100% !important;
	}
	
	.responsivePanel label{
		font-weight: bold;
		width: 100% !important;
		margin: 0 !important;
	}
	
	.responsivePanel div{
		float: none !important;
		min-width: 0px !important;
	}
	
	.responsivePanel input,
	.responsivePanel select,
	.responsivePanel textarea{
		width: 70% !important;
		/*text-align: center;*/
	}
	
	.centerContentsDiv{
		text-align: center !important;
	}
	
	.responsiveText{
		font-size: 0.9em !important;
	}
	
	.responsiveText span{
		font-size: 0.9em !important;
	}
	
	.responsiveTabView{
		border: none;
	}
	.responsiveTabView div{
		padding: 0px !important;
	}
	
	.responsiveTabView li{
		display: none !important;
/* 		width: 48%; */
/* 		white-space: normal !important; */
	}
	
	.responsiveDataTable thead th{
	      display: none;
	}
	
	.responsiveDataTable .ui-datatable-data td {
	     text-align: left;
	     display: block;
	     border: 0px none;
	     width: 100% !important;
	     -webkit-box-sizing: border-box;
	     -moz-box-sizing: border-box;
	     box-sizing: border-box;
	     float: left;
	     clear: left;
	     padding: 2px;
	}
	
	.responsiveColumnTitle{
		font-weight: bold;
		display: inline-block;
		min-width: 40%;
	}
	
	#cardsSection li{
		background: linear-gradient(white, rgba(158, 158, 158, 0.4));
	}
	
	.recurringPymtOptionSelectionTable > tbody > tr > td > label{
		line-height: normal;
		font-weight: normal;
		font-size: 0.9em;
	}
	
	.recurringPymtScheduleTable{
		table-layout: auto !important;
	}
	
	.displayAsBlockOnSmallerScreens{
		display: block !important;
	}
	
	.removeMarginsPaddingsOnSmallerScreens{
		margin: 0 !important;
		padding: 0 !important;
	}
	
	.removeMarginsOnSmallerScreens,
	.billSearch_searchParametersList{
		margin: 0 !important;
	}
	
	.billSearch_searchParametersList > div > ul{
		padding: 0;
		font-size: 0.9em;
	}
	
	.removeSideMarginsOnSmallerScreens{
		margin-left: 0px;
		margin-right: 0px;
	}
	
	.fullWidthOnSmallerScreens{
		width: 100% !important;
		line-height: normal !important;
	}
	
	.removeTopBorderOnSmallerScreens{
		border-top: none !important;
	}
	
	.removeBottomBorderOnSmallerScreens{
		border-bottom: none !important;
	}
	
	.fullWidthTextAlignCenter{
		width: 100% !important;
		text-align:center;
	}
	
	.maxWidthOnSmallerScreens{
		width: 100% !important;
	}
	
	.boldTextOnSmallerScreens{
		font-weight: bold;
	}
	
	.removeFloatOnSmallerScreens{
		float: none !important;
	}
	
	.removeBorderOnSmallerScreens{
		border: none !important;
	}
	
	.floatRightOnSmallerScreens{
		float: right;
	}
	
/* 	.templateHeader{ */
/* 		margin-top: 75px; */
/* 	} */

	.noticePanel {
		max-width: 100% !important;
	}
	
	.paymentMethodItemMobile {
	}
	
	.paymentMethodItemMobile div > div {
		border: none;
	}
	
	.paymentMethodItemMobile a {
		text-decoration-line: none; 
	}
	
	.paymentMethodItemMobile a span {
		background-color: lightslategray;
		border: 1px solid royalblue; 
		float: left;
		height: 50px;
		width: 8px; 
	}
	
	.paymentMethodItemMobile a > div {
		border: 1px solid royalblue; 
		box-shadow: 4px 4px 4px #808080; 
		font-size: x-large; 
		font-style: italic; 
		height: 50px;
		margin-bottom: 10px; 
	}
	
	.selectedPaymentMethodItemMobile {
		margin-left: -20px;
	}
	
	.selectedPaymentMethodItemMobile div > div {
		border: none;
	}
	
	.selectedPaymentMethodItemMobile a {
		text-decoration-line: none; 
	}
	
	.selectedPaymentMethodItemMobile a span {
		background-color: royalblue;
		border: 1px solid royalblue; 
		float: left;
		height: 50px;
		width: 8px; 
	}
	
	.selectedPaymentMethodItemMobile a > div {
		border: 1px solid royalblue; 
		box-shadow: 4px 4px 4px #808080; 
		font-size: x-large; 
		font-style: italic; 
		height: 50px;
		margin-bottom: 10px; 
	}
	
	.paymentMethodItemDisabled {
  		/*pointer-events: none;
    	cursor: default;
    	text-decoration: none;
    	opacity: 0.5;*/
    	
    	/* We aren't graying out anymore. We are hiding instead.*/
    	display: none;
	}
	
	.hiddenPanelInMobile {
		display: none;
	}
	
	.hiddenHeaderInMobile div:first-child {
		display: none;
	}
	
	.buttonDisabled {
		pointer-events: none;
    	cursor: default;
    	text-decoration: none;
		opacity: 0.5;
	}
	
	.coverEverything {
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1;
		position: fixed;
	    width: 100%;
	    height: 100%;
		display: none;
	}
	
	.mobileCustomerLogoImage {
		border-radius: 5%;
		vertical-align: middle;
		width: 40px;
	}
	
	.customerLogoImage {
		display: none;
	}
	
	.customerLogoImageDiv {
		display: none;
	}
	
	.additionalOptionsTable div table tbody {
		box-shadow: 1px 2px 4px 2px;
		display: block !important;
		margin-left: 24px;
    	border: none;
    	border-bottom-style: solid;
		border-bottom-width: thin;
    	border-top-style: solid;
		border-top-width: thick;
		width: 95%;
	}
	
	.additionalOptionsTable div table tbody tr {
		border: none;
	}
	
	.additionalOptionsTable div table tbody tr td {
		padding: 10px !important;
	}
	
	.otherActionColumn {
		width: 60px;
	}
	
	.otherActionColumn div {
		display: none;
	}
	
	.otherActionsRowExpansion {
		
	}
	.ui-chkbox-label {
		font-weight: bold;
		width: 100% !important;
		margin: 0 !important;
	}
	.formfield_checkbox {
		text-align: left;
	}
	
}
@media(max-width: 1200px) {
	/* Above Terms Panel CSS */
	.aboveTermsPanel > .aboveTermsDept { 
		min-width: 0 !important;
		max-width: 100% !important;
		background: #dfe6f9;
	}
	.aboveTermsPanel > .aboveTermsDept > div {
	  padding-left: 0 !important;
	  background: none !important;
	  border: 1px solid #808080;
	  border-image: none !important;
	  text-align: center;
	}
	.aboveTermsPanel > .aboveTermsDept > .aboveTermsDeptInnerOuterDiv > .aboveTermsDeptInnerDiv {
		max-width: 100% !important;
	}
}

@media (min-width : 800px){
	.mobileMenu{
		display:none;
	}
	
	.coverEverything{
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 80;
		position: fixed;
	    width: 100%;
	    height: 100%;
		display:none !important;
	}
	
	.mobileCustomerLogoImage {
		display: none;
	}
	
	.billSearchMobileCriteriaInput{
		display:none;
	}
	
	.grid{
		display: block;
		grid-template-columns: 1fr repeat(2, minmax(auto, 25em)) 1fr;
	}
	
	content-wrap,
	#cardsSection ul{
		grid-column: 2/4;
	}
	
	#cardsSection ul{
		display: flex;
		justify-content: space-between;
	}
	
	#cardsSection li{
		width: 48%;
	}
	
	.responsiveColumnTitle{
		display: none;
	}
	
	.paymentMethodItemMobile {
		display: none;
	}
	
	.selectedPaymentMethodItemMobile {
		display: none;
	}
	
	.additionalOptionsTable {
		margin-top: -5px;
	}
	
	.additionalOptionsTable div table thead tr th {
		border: none !important;
    	background-color: white !important;
    	background-image: linear-gradient(45deg, transparent 10%, rgb(223, 230, 249) 0%) !important;
	}
	
	.additionalOptionsTable div table tbody {
		display: none;
    	margin-left: 100px;
    	border: none;
	}
	
	.additionalOptionsTable div table tbody tr {
		border: none;
	}
	
	.additionalOptionsTable div table tbody tr td {
		border: none;
		width: 1000px; 
	}
	
	.additionalOptionsTable div table tbody tr td i {
		display: none;
	}
	
	.otherActionColumn {
		border-width: 0px !important;
		padding: 0px !important;
		margin: 0px;
		width: 0px;
	}
}