/* --------------------------------------------------------------------------------
 * NOTIFICATION PANE (additional panel shown at the top of the My EE page, following
 * completion of an activity, e.g. a top-up flow - user is returned to My EE page,
 * and the notification message is displayed)
 * -------------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------------
 * ADDENDUM, 2014-04-32:
 * Added suport for NESTED RENDERING of the notification pane, specifically for use
 * in the Association pages. This allows the pane to be rendered in a .span-8 column,
 * with the JSP for the panel still honouring the grid system implementation.
 *
 * CDD, 2014-04-23.
 * -------------------------------------------------------------------------------- */
.mod-notification-pane {
	padding: 1.5em;
	margin-bottom: 1.5em;
}
.nested.mod-notification-pane {
	padding: 0.5em;
}

/* THERE CAN BE ONLY ONE .mod-notification-pane .col.span-12 ... */
.mod-notification-pane .col.span-12 { 
	background-color: #EFEFD1;
	border: 1px solid #D1DA53;
	-webkit-border-radius: 0.2em;
	-moz-border-radius: 0.2em;
	-ms-border-radius: 0.2em;
	-o-border-radius: 0.2em;
	border-radius: 0.2em;
	color: #3C3D41;
	padding: 0;
}

.mod-notification-pane.nested {
	display:block;
	width: 100%;
}
	
.panels .panel.mod-notification-pane__title,
.nested .mod-notification-pane__title {
    display:inline-block;
    margin-bottom: 0;
    padding: 0.5em 1.5em 0.75em;
	color: #3C3D41;
	width: 47%;
	
}
.mod-notification-pane__title-text {
	display: inline-block;
    padding-left: 0.5em;
    padding: 0.5em 1.5em 0 0.5em;
	margin: 0;
}

.mod-notification-pane__title-text {
	padding: 0.5em 0 0 0.3em;
}

.mod-notification-pane__title [class*="ee-icon"] {
    display: inline-block;
    vertical-align: top;
}
.mod-notification-pane__subtitle {
	font-family: Rubrik, Arial, sans-serif;
	font-size: 2.0em;
    color: #3C3D41;
    margin-top: 0;
    padding-right: 0;
    padding-left: 1.75em;
    float: left;
}
.mod-notification-pane__data {
	margin-top: 0em !important;
	padding: 0 2em 1em;
	width: 53%;
	float: right;
}
.mod-notification-pane__data table {
	width: 100%;
}

/* Micro-theming... */
.mod-notification-pane .col.span-12.mod-notification-pane--warning,
.nested .mod-notification-pane--warning,
.module .mod-notification-pane--warning {
	background-color: #F8F1C0;
	border: 1px solid #FFE600;
	color: #3C3D41;
}
.mod-notification-pane .col.span-12.mod-notification-pane--error,
.nested .mod-notification-pane--error {
	background-color: #FDE0E1;
	border: 1px solid #F3666B;
	color: #3C3D41;
}
.mod-notification-pane .col.span-12.mod-notification-pane--success,
.nested .mod-notification-pane--success {
	background-color: #EFEFD1;
	border: 1px solid #D1DA53;
	color: #3C3D41;
}

.mod-notification-pane--success {
	background-color: #EFEFD1;
	border: 1px solid #D1DA53;
	border-radius: 0.2em;
	color: #3C3D41;
	padding: 0;
}

.mod-notification-pane--success div.panel.mod-notification-pane-title {
	margin-top: 0em !important;
	padding: 0.5em;
	width: 100%;
	float: left;
}

.col.span-12.mod-notification-pane--success-green {
	background-color: #def7d0;
	border: 1px solid #63d21c;
}

.nested [class*="mod-notification-pane--"] {
	display:inline-block;
	width: 100%;
	-webkit-border-radius: 0.2em;
	-moz-border-radius: 0.2em;
	-ms-border-radius: 0.2em;
	-o-border-radius: 0.2em;
	border-radius: 0.2em;
}

.mod-notification-pane .col.span-12.mod-notification-pane--warning p,
.mod-notification-pane .col.span-12.mod-notification-pane--error p,
.mod-notification-pane .col.span-12.mod-notification-pane--success p,
.mod-notification-pane .col.span-12.mod-notification-pane p,
.nested [class*="mod-notification-pane--"] p,
.nested.mod-notification-pane p {
	font-family: Arial, sans-serif;
	color: #3C3D41;
	padding-left: 3.3em;
	margin-top: 0;
	margin-bottom: 1.0em;
}
	
.mod-notification-pane .col.span-12.mod-notification-pane--warning .text-cta,
.mod-notification-pane .col.span-12.mod-notification-pane--error .text-cta,
.mod-notification-pane .col.span-12.mod-notification-pane--success .text-cta,
.nested [class*="mod-notification-pane--"] .text-cta {
	color: #3C3D41;
	font-weight: bold;
}

.mod-notification-pane .col.span-12.mod-notification-pane--warning .text-cta:hover,
.mod-notification-pane .col.span-12.mod-notification-pane--error .text-cta:hover,
.mod-notification-pane .col.span-12.mod-notification-pane--success .text-cta:hover,
.mod-notification-pane .col.span-12.mod-notification-pane--warning .text-cta:active,
.mod-notification-pane .col.span-12.mod-notification-pane--error .text-cta:active,
.mod-notification-pane .col.span-12.mod-notification-pane--success .text-cta:active,
.nested [class*="mod-notification-pane--"] .text-cta:hover,
.nested [class*="mod-notification-pane--"] .text-cta:active {
	color: #000000;
}

.mod-notification-pane .col.span-12.mod-notification-pane--error .mod-notification-pane__title,
.mod-notification-pane .col.span-12.mod-notification-pane--error .mod-notification-pane__subtitle,
.nested [class*="mod-notification-pane--"] [class*="mod-notification-pane__"] {
	color: #3C3D41;
	width: 80%;
}
.nested [class*="mod-notification-pane--"] [class*="mod-notification-pane__"] {
	color: #3C3D41;
	width: 80%;
	text-align: left;
}
	

/*
 * Media query variations
 */
@media (min-width: 0) { /* 320px */
	.panels .panel.mod-notification-pane__title {
		width: 100%;
	}
	.mod-notification-pane__title-text {
		padding: 0.5em 0 0 0.3em;
		margin: 0;
	}
	.mod-notification-pane__subtitle {
		padding-left: 1.6em;
		padding-right: 0;
	}
	.mod-notification-pane__data {
		padding-top: 0.5em;
		padding-left: 2em;
		clear: left;
		width: 100%;
	}
	.mod-notification-pane__data td:last-child {
		text-align: right;
	}
	
	.mod-notification-pane .col.span-12.mod-notification-pane--warning .mod-notification-pane__title-text,
	.mod-notification-pane .col.span-12.mod-notification-pane--error .mod-notification-pane__title-text,
	.mod-notification-pane .col.span-12.mod-notification-pane--success .mod-notification-pane__title-text,
	.mod-notification-pane .col.span-12.mod-notification-pane--success-green .mod-notification-pane__title-text,
	.nested .mod-notification-pane__title-text {
	    width: 80%;
	    margin-bottom: 0.5em;
	    padding-top: 0.35em;
	}
	.nested .mod-notification-pane__title-text {
		text-align: left;
	    width: 90%;
	}

	.nested [class*="mod-notification-pane--"] .mod-notification-pane__title {
	    display:inline-block;
	    padding: 0.75em 0.75em 0.25em;
		width: 100%;
	}
}
@media (min-width: 25em) { /* 400px */
	.mod-notification-pane__data {
		margin: 0 auto;
		padding: 0 2em 1em;
		float: none;
		width: 90%;
	}
	.nested [class*="mod-notification-pane--"] .mod-notification-pane__title {
	    padding: 0.75em 1.5em 0.25em;
	}
}
@media (min-width: 30em) { /* 480px */
	.mod-notification-pane__data {
		width: 84%;
	}
}
@media (min-width: 37.5em) { /* 600px */
	.mod-notification-pane__data {
		width: 85%;
	}
}
@media (min-width: 45em) { /* 720px */
	.panels .panel.mod-notification-pane__title,
	.nested .mod-notification-pane__title {
	    display:inline-block;
	    margin-bottom: 0;
	    padding: 0.5em 1.5em 0.75em;
		color: #3C3D41;
		width: 100%;
		
	}
	.mod-notification-pane__title-text {
		display: inline-block;
	    padding-left: 0.5em;
	    padding: 0.5em 1.5em 0 0.5em;
		margin: 0;
	}
	.mod-notification-pane__data {
		margin-top: 0 !important;
		padding: 0 2em 1em;
		width: 86%;
		float: none;
	}
	.mod-notification-pane__data table {
		width: 100%;
	}

	.mod-notification-pane .col.span-12.mod-notification-pane--warning p,
	.mod-notification-pane .col.span-12.mod-notification-pane--error p,
	.mod-notification-pane .col.span-12.mod-notification-pane--success p,
	.nested [class*="mod-notification-pane--"] p {
		padding-left: 3.4em;
	}
	
}
@media (min-width: 48em) { /* 768px  */
	.panels .panel.mod-notification-pane__title,
	.nested .mod-notification-pane__title {
		width: 100%;
	}
	.mod-notification-pane__subtitle {
		display: inline-block;
		width: 100%;
	}
	.mod-notification-pane__data {
		width: 87%;
	}
}
@media (min-width: 50em) { /* 800px  */
	.panels .panel.mod-notification-pane__title,
	.nested .mod-notification-pane__title {
		float: left;
		width: 55%;
	}
	.mod-notification-pane__subtitle {
		width: 100%;
	}
	.mod-notification-pane__data {
	    float: right;
	    clear: none;
	    margin-top: 0 !important;
	    padding: 1em 1.5em 0 0;
		width: 45%;
	}
	
	.mod-notification-pane--warning > .panel.mod-notification-pane__title,
	.mod-notification-pane--error > .panel.mod-notification-pane__title,
	.mod-notification-pane--success > .panel.mod-notification-pane__title,
	.mod-notification-pane--success-green > .panel.mod-notification-pane__title,
	.nested [class*="mod-notification-pane--"] > .mod-notification-pane__title {
		width: 95% !important;
	}
}

@media (min-width: 60em) { /* 960px  */
	.panels .panel.mod-notification-pane__title,
	.nested .mod-notification-pane__title {
    	padding: 0.5em 1.5em 0.7em;
    	width: 47%;
	}
	.mod-notification-pane__data {
		padding: 1em 2em 1em;
		width: 53%;
	}
}

.mod-notification-pane--topup {
	background-color: #EFEFD1;
	border: 1px solid #D1DA53;
	border-radius: 0.2em;
	color: #3C3D41;
	padding: 0;
}

.mod-notification-pane--topup .panel.mod-notification-pane__title {
	margin-top: 0em !important;
	padding: 0.5em;
	width: 50%;
	float: left;
}

.mod-notification-pane--topup .panel.mod-notification-pane__title p{
	clear: both;
}

.panel.mod-notification-pane-title-email {
	margin-top: 0em !important;
	padding: 0.5em;
	width: 100%;
	float: left;
}

.panel.mod-notification-pane-title-new-card {
	margin-top: 0em !important;
	padding: 0.5em;
	width: 100%;
	float: left;
}

.mod-notification-pane-topup-data {
	margin-top: 0em !important;
	padding: 0.5em;
	width: 50%;
	float: right;
}

.mod-notification-pane-topup-buy-data {
	clear: both;
}

fieldset.fieldset-no-border {
	border: none;
	padding: 0.5em;
}

.mod-notification-pane__subtitle {
  font-family: Rubrik, Arial, sans-serif;
  font-size: 2.0em;
  color: #3C3D41;
}

/*
 * Media query variations
 */
@media (min-width: 0) { /* 320px */
	.mod-notification-pane--topup .panel.mod-notification-pane__title{
		width: 100%;
		margin-bottom: 0em;
	}
	.panel.mod-notification-pane-title:after {
		content: "";
  		display: table;
	  	clear: both;
	}
	.h4.mod-notification-pane-title-text{
		font-size: 0.9em;
		line-height: 1.5;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
	.mod-notification-pane__subtitle:before {
		content: "";
  		display: table;
	  	clear: both;
	}
	.mod-notification-pane-topup-data {
		width: 100%;
		padding:0;
		margin: 0;
	}

}
@media (min-width: 18em) { /* 400px */
	.mod-notification-pane--topup .panel.mod-notification-pane__title{
		width: 100%;
		margin-bottom: 0em;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
	.panel.mod-notification-pane-title:after {
		content: "";
  		display: table;
	  	clear: both;
	}
	span.h4.mod-notification-pane-title-text{
		font-size: 0.9em;
		line-height: 1.5;
	}
	.mod-notification-pane-topup-data {
		width: 100%;
		padding:0;
		margin: 0;
	}
	.h4.mod-notification-pane-title.ee-icon-email {
		font-size: 1em;
		line-height: 1.5;
		text-overflow: ellipsis;
		overflow: hidden;
		width: 98%;
	}
	.h4.mod-notification-pane-title.ee-icon-paybycreditcard {
		font-size: 1em;
		line-height: 1.5;
		text-overflow: ellipsis;
		overflow: hidden;
		width: 98%;
	}
}
@media (min-width: 25em) { /* 400px */
	.mod-notification-pane--topup .panel.mod-notification-pane__title{
		width: 100%;
		margin-bottom: 0em;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
	.panel.mod-notification-pane-title:after {
		content: "";
  		display: table;
	  	clear: both;
	}
	.mod-notification-pane-topup-data {
		width: 100%;
	}
	.h4.mod-notification-pane-title.ee-icon-email {
		font-size: 1em;
		line-height: 1.5;
	}
	.h4.mod-notification-pane-title.ee-icon-paybycreditcard {
		font-size: 1em;
		line-height: 1.5;
	}
}
@media (min-width: 30em) { /* 480px */
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
}

@media (max-width: 769px) {
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
	span.h4.mod-notification-pane-title-text{
		font-size: 0.9em;
		line-height: 1.5;
	}
	.h4.mod-notification-pane-title.ee-icon-email {
		font-size: 1em;
		line-height: 1.5;
		text-overflow: ellipsis;
		overflow: hidden;
		width: 98%;
	}
	.h4.mod-notification-pane-title.ee-icon-paybycreditcard {
		font-size: 1em;
		line-height: 1.5;
		text-overflow: ellipsis;
		overflow: hidden;
		width: 98%;
	}
}

@media (min-width: 45em)  { /* 800px  */
	span.h4.mod-notification-pane-title-text{
		font-size: 0.9em;
		line-height: 1.5;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title{
		width: 100%;
		margin-bottom: 0em;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
	.panel.mod-notification-pane-title:after {
		content: "";
  		display: table;
	  	clear: both;
	}
	.mod-notification-pane-topup-data {
		width: 100%;
	}
	.h4.mod-notification-pane-title.ee-icon-email {
		font-size: 1em;
		line-height: 1.5;
	}
	.h4.mod-notification-pane-title.ee-icon-paybycreditcard {
		font-size: 1em;
		line-height: 1.5;
	}
}

@media (min-width: 50em) { /* 800px  */
	span.h4.mod-notification-pane-title-text{
		font-size: 1.25em;
		line-height: 1.5;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title{
		width: 100%;
		margin-bottom: 0em;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
	.panel.mod-notification-pane-title:after {
		content: "";
  		display: table;
	  	clear: both;
	}
	.mod-notification-pane-topup-data {
		width: 100%;
	}
	.h4.mod-notification-pane-title.ee-icon-email {
		font-size: 1em;
		line-height: 1.5;
	}
	.h4.mod-notification-pane-title.ee-icon-paybycreditcard {
		font-size: 1em;
		line-height: 1.5;
	}
}

@media (min-width: 60em) { /* 960px  */
	span.h4.mod-notification-pane-title-text{
		font-size: 1.25em;
		line-height: 1.5;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title{
		width: 100%;
		margin-bottom: 0em;
	}
	.panel.mod-notification-pane-title:after {
		content: "";
  		display: table;
	  	clear: both;
	}
	.mod-notification-pane-topup-data {
		width: 100%;
	}
	.h4.mod-notification-pane-title.ee-icon-email {
		font-size: 1em;
		line-height: 1.5;
	}
	.h4.mod-notification-pane-title.ee-icon-paybycreditcard {
		font-size: 1em;
		line-height: 1.5;
	}
}

@media (min-width: 65em) {
	span.h4.mod-notification-pane-title-text{
		font-size: 1.25em;
		line-height: 1.5;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title{
		width: 60%;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
	.mod-notification-pane-topup-data {
		width: 40%;
	}
}

@media (min-width: 70em) {
	span.h4.mod-notification-pane-title-text{
		font-size: 1.25em;
		line-height: 1.5;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title{
		width: 60%;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
	.mod-notification-pane-topup-data {
		width: 40%;
	}
}

@media (min-width: 75em) {
	span.h4.mod-notification-pane-title-text{
		font-size: 1.25em;
		line-height: 1.5;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title{
		width: 60%;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
	.mod-notification-pane-topup-data {
		width: 40%;
	}
}

@media (min-width: 80em) {
	span.h4.mod-notification-pane-title-text{
		font-size: 1.25em;
		line-height: 1.5;
	}

	.mod-notification-pane--topup .panel.mod-notification-pane__title{
		width: 60%;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
	.mod-notification-pane-topup-data {
		width: 40%;
	}
}

@media (min-width: 83.75em) {
	span.h4.mod-notification-pane-title-text{
		font-size: 1.25em;
		line-height: 1.5;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title{
		width: 50%;
	}

	.mod-notification-pane-topup-data {
		width: 50%;
	}
}

.mod-notification-pane__title {
    white-space: nowrap;
}
.mod-notification-pane__title *{
    white-space: normal;
}

/* mod-notification-pane--topup */

.mod-notification-pane--topup {
	background-color: #EFEFD1;
	border: 1px solid #D1DA53;
	border-radius: 0.2em;
	color: #3C3D41;
	padding: 0;
}

.mod-notification-pane--topup .panel.mod-notification-pane__title {
	margin-top: 0em !important;
	padding: 0.5em;
	width: 50%;
	float: left;
}

.mod-notification-pane--topup .panel.mod-notification-pane__title p{
	clear: both;
}

.panel.mod-notification-pane-title-email {
	margin-top: 0em !important;
	padding: 0.5em;
	width: 100%;
	float: left;
}

.panel.mod-notification-pane-title-new-card {
	margin-top: 0em !important;
	padding: 0.5em;
	width: 100%;
	float: left;
}

.mod-notification-pane-topup-data {
	margin-top: 0em !important;
	padding: 0.5em;
	width: 50%;
	float: right;
}

.mod-notification-pane-topup-buy-data {
	clear: both;
}

fieldset.fieldset-no-border {
	border: none;
	padding: 0.5em;
}

.mod-notification-pane__subtitle {
  font-family: Rubrik, Arial, sans-serif;
  font-size: 2.0em;
  color: #3C3D41;
}

/*
 * Media query variations
 */
@media (min-width: 0) { /* 320px */
	.mod-notification-pane--topup .panel.mod-notification-pane__title{
		width: 100%;
		margin-bottom: 0em;
	}
	.panel.mod-notification-pane-title:after {
		content: "";
  		display: table;
	  	clear: both;
	}
	.h4.mod-notification-pane-title-text{
		font-size: 0.9em;
		line-height: 1.5;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
	.mod-notification-pane__subtitle:before {
		content: "";
  		display: table;
	  	clear: both;
	}
	.mod-notification-pane-topup-data {
		width: 100%;
		padding:0;
		margin: 0;
	}

}
@media (min-width: 18em) { /* 400px */
	.mod-notification-pane--topup .panel.mod-notification-pane__title{
		width: 100%;
		margin-bottom: 0em;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
	.panel.mod-notification-pane-title:after {
		content: "";
  		display: table;
	  	clear: both;
	}
	span.h4.mod-notification-pane-title-text{
		font-size: 0.9em;
		line-height: 1.5;
	}
	.mod-notification-pane-topup-data {
		width: 100%;
		padding:0;
		margin: 0;
	}
	.h4.mod-notification-pane-title.ee-icon-email {
		font-size: 1em;
		line-height: 1.5;
		text-overflow: ellipsis;
		overflow: hidden;
		width: 98%;
	}
	.h4.mod-notification-pane-title.ee-icon-paybycreditcard {
		font-size: 1em;
		line-height: 1.5;
		text-overflow: ellipsis;
		overflow: hidden;
		width: 98%;
	}
}
@media (min-width: 25em) { /* 400px */
	.mod-notification-pane--topup .panel.mod-notification-pane__title{
		width: 100%;
		margin-bottom: 0em;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
	.panel.mod-notification-pane-title:after {
		content: "";
  		display: table;
	  	clear: both;
	}
	.mod-notification-pane-topup-data {
		width: 100%;
	}
	.h4.mod-notification-pane-title.ee-icon-email {
		font-size: 1em;
		line-height: 1.5;
	}
	.h4.mod-notification-pane-title.ee-icon-paybycreditcard {
		font-size: 1em;
		line-height: 1.5;
	}
}
@media (min-width: 30em) { /* 480px */
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
}

@media (max-width: 769px) {
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
	span.h4.mod-notification-pane-title-text{
		font-size: 0.9em;
		line-height: 1.5;
	}
	.h4.mod-notification-pane-title.ee-icon-email {
		font-size: 1em;
		line-height: 1.5;
		text-overflow: ellipsis;
		overflow: hidden;
		width: 98%;
	}
	.h4.mod-notification-pane-title.ee-icon-paybycreditcard {
		font-size: 1em;
		line-height: 1.5;
		text-overflow: ellipsis;
		overflow: hidden;
		width: 98%;
	}
}

@media (min-width: 45em)  { /* 800px  */
	span.h4.mod-notification-pane-title-text{
		font-size: 0.9em;
		line-height: 1.5;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title{
		width: 100%;
		margin-bottom: 0em;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
	.panel.mod-notification-pane-title:after {
		content: "";
  		display: table;
	  	clear: both;
	}
	.mod-notification-pane-topup-data {
		width: 100%;
	}
	.h4.mod-notification-pane-title.ee-icon-email {
		font-size: 1em;
		line-height: 1.5;
	}
	.h4.mod-notification-pane-title.ee-icon-paybycreditcard {
		font-size: 1em;
		line-height: 1.5;
	}
}

@media (min-width: 50em) { /* 800px  */
	span.h4.mod-notification-pane-title-text{
		font-size: 1.25em;
		line-height: 1.5;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title{
		width: 100%;
		margin-bottom: 0em;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
	.panel.mod-notification-pane-title:after {
		content: "";
  		display: table;
	  	clear: both;
	}
	.mod-notification-pane-topup-data {
		width: 100%;
	}
	.h4.mod-notification-pane-title.ee-icon-email {
		font-size: 1em;
		line-height: 1.5;
	}
	.h4.mod-notification-pane-title.ee-icon-paybycreditcard {
		font-size: 1em;
		line-height: 1.5;
	}
}

@media (min-width: 60em) { /* 960px  */
	span.h4.mod-notification-pane-title-text{
		font-size: 1.25em;
		line-height: 1.5;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title{
		width: 100%;
		margin-bottom: 0em;
	}
	.panel.mod-notification-pane-title:after {
		content: "";
  		display: table;
	  	clear: both;
	}
	.mod-notification-pane-topup-data {
		width: 100%;
	}
	.h4.mod-notification-pane-title.ee-icon-email {
		font-size: 1em;
		line-height: 1.5;
	}
	.h4.mod-notification-pane-title.ee-icon-paybycreditcard {
		font-size: 1em;
		line-height: 1.5;
	}
}

@media (min-width: 65em) {
	span.h4.mod-notification-pane-title-text{
		font-size: 1.25em;
		line-height: 1.5;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title{
		width: 60%;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
	.mod-notification-pane-topup-data {
		width: 40%;
	}
}

@media (min-width: 70em) {
	span.h4.mod-notification-pane-title-text{
		font-size: 1.25em;
		line-height: 1.5;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title{
		width: 60%;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
	.mod-notification-pane-topup-data {
		width: 40%;
	}
}

@media (min-width: 75em) {
	span.h4.mod-notification-pane-title-text{
		font-size: 1.25em;
		line-height: 1.5;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title{
		width: 60%;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
	.mod-notification-pane-topup-data {
		width: 40%;
	}
}

@media (min-width: 80em) {
	span.h4.mod-notification-pane-title-text{
		font-size: 1.25em;
		line-height: 1.5;
	}

	.mod-notification-pane--topup .panel.mod-notification-pane__title{
		width: 60%;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
	.mod-notification-pane-topup-data {
		width: 40%;
	}
}

@media (min-width: 83.75em) {
	span.h4.mod-notification-pane-title-text{
		font-size: 1.25em;
		line-height: 1.5;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title span.mod-notification-pane__subtitle  {
		padding-left: 0;
	}
	.mod-notification-pane--topup .panel.mod-notification-pane__title{
		width: 50%;
	}

	.mod-notification-pane-topup-data {
		width: 50%;
	}
}

.mod-notification-pane__title {
    white-space: nowrap;
}
.mod-notification-pane__title * {
	white-space: normal;
}

.notification-pane-small {
	background-color: transparent;
	border: 1px solid transparent;
	color: #3C3D41;
	font-size: 16px;
	line-height: 30px;
	padding: 5px 10px;
	margin-bottom: .5em;
	border-radius: 4px;
}
.notification-pane-small--warning {
	background-color: #F8F1C0;
	border: 1px solid #FFE600;
}
.notification-pane-small__icon {
	float: left;
	font-size: 30px;
}
.notification-pane-small__text {
	margin-left: 40px;
}

.notification-pane-small__text p {
	display:inline-block;
	margin: 0;
}