/* XSmall */
@media screen and (max-width: 480px){
	
	body {
		font-family: "Gilroy-Light";
		background-color: #d7d7dd;
	}
	h2 {
		font-weight: bold;
		margin: 0;
		font-size: inherit;
	}
	h1 {
		margin-bottom: 0;
		font-weight: bold;
		/* font-size: 500%; */
	}
	h3 {
		margin: 0;
		font-size: inherit;
	}
	h1, h2, h3 {
		font-family: "Gilroy-Light";
		color: #222d5d;
	}
	.pay-select-child-om  span {
		color: #757575;
	}
	
	div span {
		/* to test for v2  */
		/* font-size: x-small; */

	}

	md-select span {
		/* color: #757575; */

		/* v2 */
		color : #272b5c
		/* v2  */

	}
	.toolbar-wrapper {
		height: 22%;
		/* background-color: #d7d7dd; */
	}
	.toolbar-wrapper md-toolbar {
		height: 100%;
	}

	.ordercode-wrapper {
		width: inherit;
		text-align: left;
		/* font-size: small; */
	}
	
	.page-container {
		height: 73%;
		overflow-y: hidden;
	}
	md-content.md-customTheme-theme {
		background-color: #d7d7dd;
		height: 69%;
	}
	.page {
		height: 100%;
		margin: 0;
		padding: 0 1rem;
		overflow-y: overlay;
	}
	.page-component.ng-scope {
		/*  height: inherit; */
		height: 100%;
	}
	h2.md-toolbar-tools {
		display: inline-grid;
		padding: 0;
	}
	.infos-pay.md-toolbar-tools {
		padding: 0px 5px !important;
		font-size: initial !important;
	}
	
	.md-accent-bg {
		/* v2 delete it  */
		/* background-image: url("../img/bg/banniere.png");
		background-repeat: no-repeat;
		background-size: cover; */

	}
	.toolbar-child{
		height: inherit;
	}
	.img-circle {
		width: fit-content;
	    height: 120px;
	    /* margin-left: 42%;
	    margin-top: 4%; */
	    border-radius:0px ; 

	}
	/* v2 design   */
	.img-touchpoint{
	width: 20% ; 
	height:90%; 	
	}
	/* v2 design   */

	.img-moyen-pay{
		width: 100%;
	}
	.infos-pay{
		padding-right: 0;
		min-height: 150px;
	}
	.infos-pay .md-toolbar-tools{
		font-size: initial !important;
		min-height: initial !important;
	}
	
	md-divider.vertical-divider.md-customTheme-theme {
		/* margin-top: 15px; by v2 */
		border-right-width: 1px;
		border-right-style: solid;
		/* height: 120px; deleted by v2  */
	}

	md-toolbar.md-customTheme-theme:not(.md-menu-toolbar){
	/* background-color: rgba(0,0,0,0.12); */
	}
	
	md-card.card.card-logo._md.md-customTheme-theme {
		border-radius: 50%;
	}
	
	img.logo-partner {
		max-height: 100px;
		max-width: 100px;
		border-radius: 50%;
	}
	
	.pay-subtitle {
		display: inline-flex;
		height: 7rem;
		width: 100%;
	}
	
	.pay-subtitle-child {
		width: 100%;
		padding: 0% 9%;
	}
	
	.column.div-welcom {
		padding: 0
	}
	
	img.sbwl-logo {
		/* width: 15%;
	    height: 15%;
	   margin-top: 30px;
	    margin-left: 20px */
		
	}
	
	md-divider.subheader-divider.md-customTheme-theme {
		/* border-top-width: 5px; */

		/* v2 design */
		 /* no border added  */
		/* v2 design */

	}
	
	.formulaire {
		height: 83%;
	}
	
	.payment-wrapper {
		height: 100%;
	}
	.payment-wrapper-accueil{
		height: 66%;
	}
	md-input-container.md-block.md-icon-left.md-icon-float.md-customTheme-theme{
		width: 48% !important;
	}
	
	.pay-select {
		padding: 0 ;
		/* height: 40rem !important; */
	}
	.pay-select-accueil{
		padding: 0;
		display: -webkit-box;
	}
	.pay-select-card {
		height: 70%;
	    padding: 0% 9%;
	    display: block;
	}
	
	.pay-select-2 {
		width: 100%
	}
	
	.map-img-div {
		width: 100%;
	}
	
	.pay-select-child {
		padding: 1% 0%;
		color: #757575;
		font-size: inherit;
	}
	.pay-select-child-om {
		padding: 1% 0%;
		color: #757575;
		font-size: inherit;
		display: none;
	}
	
	.pay-select-item {
		max-width: max-content;
	}
	
	.div-field-1 {
		display: block;
		/* width: 50%; */
	}
	
	.div-field-om {
		/* display: grid; */
	    width: 100%;
	    /* height: 60%; */
	}
	.div-field-om md-input-container.md-block.md-icon-left.md-icon-float.md-customTheme-theme{
		width: 80% !important;
	}
	.input-email{
		    margin: 15% 0;
	}
	
	md-input-container.md-block.md-icon-left.md-icon-float.md-customTheme-theme
		{
		margin-bottom: 0;
	}
	
	md-input-container.md-input-invalid svg {
		fill: #dd2c00;
	}
	
	md-input-container:not(.md-input-invalid ) svg {
		color: green;
	}
	
	.bravo-logo {
		height: 80px;
	}
	
	md-divider.footer-divider.md-customTheme-theme {
		border-top-width: 40px;
		border-top-color: rgb(215, 215, 221);
	}
	
	md-radio-group {
		/*min-width: 100%;
		height: inherit;
		display: inline-grid; */
	}
	
	span {
		color: #757575;
	}
	
	.span-size-1 {
		font-size: large;
		font-weight: bold;
		color: #757575;
	}
	
	.span-size-2 {
		font-size: medium;
		font-weight: bold;
		color: #757575;
	}
	
	.span-size-3 {
		font-size: medium;
		color: #757575;
	}
	
	.touchcode-div {
		/* padding: 0.1% 14.2%; */
		
	}
	
	.zone-div {
		padding: 0% 7.3%;
		display: block;
	}
	
	.map-img-wrapper {
		height: 100px;
		width: 350px;
	}
	
	.map-wrapper-valid {
		widows: inherit;
	}
	
	.pay-logo {
		margin-left: 0;
		width: 90px;
	}
	
	.pay-libelle {
		font-size: inherit;
	    padding: 0 0 0 2%;
	}
	
	.pay-button {
	    /* display: block; */
		width: 100%;
		text-align: center; 
	}
	.pay-button button{
		width: 65% !important;;
   		 height: 50% !important;;
	}
	.button-wrapper-home{
		display: flex !important;
	}
	.pay-button-om {
		/* height: 100%; */
		/* display: contents; */
	}
	
	.pay-button-om button.md-button.md-customTheme-theme.md-ink-ripple {
		color: #222d5d;
		/* width: 215px;
	    height: 45px; */
	}
	
	.ng-binding.layout-align-start-center.layout-row {
		color: #757575;
	}
	
	button.md-primary.md-button.md-customTheme-theme.md-ink-ripple {
		color: rgba(255, 255, 255, 0.87);
		background-color: #222D5D;
	}
	
	button.md-button.md-customTheme-theme.md-ink-ripple {
		font-size: smaller;
    	text-transform: inherit;
	}
	
	.md-button.md-customTheme-theme.md-primary.md-raised:not([disabled] ):hover
		{
		background-color: #51C3CD;
	}
	
	button.md-customTheme-theme:not([disabled] ):hover {
		background-color: rgba(255, 255, 255, .15);
	}
	
	.buttons-div.layout-align-center-center.layout-row.flex {
		height: 23%;
	}
	
	.btn-retour {
		min-width: 250px;
	}
	
	.md-button.md-default-theme.md-primary.md-fab, .md-button.md-primary.md-fab,
		.md-button.md-default-theme.md-primary.md-raised, .md-button.md-primary.md-raised
		{
		background-color: rgb(34, 45, 93) !important;
	}
	
	md-input-container.md-block.md-icon-left.md-input-has-placeholder.md-customTheme-theme
		{
		margin: 0;
	}
	
	svg {
		fill: #51C3CD;
	}
	
	md-input-container.md-icon-float:not(.md-input-invalid ) >md-icon.field
		{
		color: green;
	}
	
	.footer-wrapper {
		margin: 0px ;
		padding: 1rem 1rem;
	}
	
	.sbwl-footer {
		/* width: 48px; */
	}
	.byintouch-logo{
		width: 48px;
	}
	.loader {
		position: fixed;
		z-index: 9999;
		background-color: #000000 !important;
		background: url("../img/touchpay2.png") 50% 50% no-repeat;
		top: 0px;
		left: 0px;
		height: 100%;
		width: 100%;
		cursor: wait;
	}
	
	.loader md-progress-circular.md-customTheme-theme path {
		stroke: rgb(81, 204, 205);
		stroke-width: 10;
	}
	
	md-dialog md-dialog-content .md-dialog-content-body {
		padding-top: 5% !important;
	}
	
	md-toast.md-default-theme .md-toast-content, md-toast .md-toast-content
		{
		background-color: #ac2925 !important;
	}
	
	.error-popup-text {
		color: #d43f3a
	}
	
	.error-popup {
		display: none;
	}
	
}

/* Medium */

	@media screen and (max-width: 980px) {
	
	}

/* XLarge */

	/* Small */

	/* @media screen and (max-width: 600px) {
	
	body {
		font-family: "Gilroy-Light";
		background-color: #d7d7dd;
	}
	h2 {
		font-weight: bold;
		margin: 0;
		font-size: inherit;
	}
	h1 {
		margin-bottom: 0;
		font-weight: bold;
		font-size: 500%;
	}
	h3 {
		margin: 0;
		font-size: inherit;
	}
	h1, h2, h3 {
		font-family: "Gilroy-Light";
		color: #222d5d;
	}
	.pay-select-child-om  span {
		color: #757575;
	}
	
	div span {
		font-size: inherit;
	}

	md-select span {
		color: #757575;
	}
	.toolbar-wrapper {
		height: 22%;
		background-color: #d7d7dd;
	}
	.toolbar-wrapper md-toolbar {
		height: 100%;
	}
	.ordercode-wrapper {
		width: inherit;
		text-align: left;
		font-size: small;
	}
	.page-container {
		height: 73%;
		overflow-y: hidden;
	}
	md-content.md-customTheme-theme {
		background-color: #d7d7dd;
		height: 70%;
	}
	.page {
		height: 100%;
		margin: 0;
		padding: 0 20px;
		overflow-y: overlay;
	}
	.page-component.ng-scope {
		 height: inherit;
		height: 100%;
	}
	h2.md-toolbar-tools {
		display: inline-grid;
		padding: 0;
	}
	.infos-pay.md-toolbar-tools {
		padding: 0px 5px !important;
		font-size: initial !important;
	}
	
	.md-accent-bg {
		background-image: url("../img/bg/banniere.png");
		background-repeat: no-repeat;
		background-size: cover;
	}
	.toolbar-child{
	
	}
	.img-circle {
		width: 150px;
	    height: 150px;
	    margin-left: 42%;
	    margin-top: 4%;
	}
	.img-moyen-pay{
		width: 100%;
	}
	.infos-pay{
		padding-right: 0;
		min-height: 150px;
	}
	md-divider.vertical-divider.md-customTheme-theme {
	margin-top: 15px;
		border-right-width: 1px;
		border-right-style: solid;
		height: 120px;
	}

	md-toolbar.md-customTheme-theme:not(.md-menu-toolbar){
	background-color: rgba(0,0,0,0.12);
	}
	
	md-card.card.card-logo._md.md-customTheme-theme {
		border-radius: 50%;
	}
	
	img.logo-partner {
		max-height: 100px;
		max-width: 100px;
		border-radius: 50%;
	}
	
	.pay-subtitle {
		display: inline-flex;
		height: 20%;
		width: 100%;
	}
	
	.pay-subtitle-child {
		width: 100%;
		padding: 0% 9%;
	}
	
	.column.div-welcom {
		padding: 0
	}
	
	img.sbwl-logo {
		width: 15%;
	    height: 15%;
	   margin-top: 30px;
	    margin-left: 20px
		
	}
	
	md-divider.subheader-divider.md-customTheme-theme {
		border-top-width: 5px;
	}
	
	.formulaire {
		height: 83%;
	}
	
	.payment-wrapper {
		height: 90%;
	}
	md-input-container.md-block.md-icon-left.md-icon-float.md-customTheme-theme{
		width: 48% !important;
	}
	
	.pay-select {
		padding: 0 ;
	}
	.pay-select-accueil{
		padding: 0;
		display: -webkit-box;
	}
	.pay-select-card {
		height: 70%;
	    padding: 0% 9%;
	    display: block;
	}
	
	.pay-select-2 {
		width: 100%
	}
	
	.map-img-div {
		width: 100%;
	}
	
	.pay-select-child {
		padding: 1% 0%;
		color: #757575;
		font-size: inherit;
	}
	.pay-select-child-om {
		padding: 1% 0%;
		color: #757575;
		font-size: inherit;
		display: none;
	}
	
	.pay-select-item {
		max-width: max-content;
	}
	
	.div-field-1 {
		display: block;
		width: 50%;
	}
	
	.div-field-om {
		display: grid;
	    width: 100%;
	    height: 60%;
	}
	.div-field-om md-input-container.md-block.md-icon-left.md-icon-float.md-customTheme-theme{
		width: 80% !important;
	}
	.input-email{
		    margin: 15% 0;
	}
	
	md-input-container.md-block.md-icon-left.md-icon-float.md-customTheme-theme
		{
		margin-bottom: 0;
	}
	
	md-input-container.md-input-invalid svg {
		fill: #dd2c00;
	}
	
	md-input-container:not(.md-input-invalid ) svg {
		color: green;
	}
	
	.bravo-logo {
		height: 80px;
	}
	
	md-divider.footer-divider.md-customTheme-theme {
		border-top-width: 40px;
		border-top-color: rgb(215, 215, 221);
	}
	
	md-radio-group {
		    min-width: 100%;
		height: inherit;
		display: inline-grid;
	}
	
	span {
		color: #757575;
	}
	
	.span-size-1 {
		font-size: large;
		font-weight: bold;
		color: #757575;
	}
	
	.span-size-2 {
		font-size: medium;
		font-weight: bold;
		color: #757575;
	}
	
	.span-size-3 {
		font-size: medium;
		color: #757575;
	}
	
	.touchcode-div {
		padding: 0.1% 14.2%;
		
	}
	
	.zone-div {
		padding: 0% 7.3%;
		display: block;
	}
	
	.map-img-wrapper {
		height: 100px;
		width: 350px;
	}
	
	.map-wrapper-valid {
		widows: inherit;
	}
	
	.pay-logo {
		margin-left: 0;
		width: 60px;
	}
	
	.pay-libelle {
		font-size: inherit;
	    padding: 0 0 0 3%;
	}
	
	.pay-button {
	    display: block;
		width: 100%;
		text-align: center; 
	}
	.pay-button button{
		width: 65% !important;;
   		 height: 50% !important;;
	}
	.button-wrapper-home{
		display: flex !important;
	}
	.pay-button-om {
		height: 100%;
		display: contents;
	}
	
	.pay-button-om button.md-button.md-customTheme-theme.md-ink-ripple {
		color: #222d5d;
		width: 215px;
	    height: 45px;
	}
	
	.ng-binding.layout-align-start-center.layout-row {
		color: #757575;
	}
	
	button.md-primary.md-button.md-customTheme-theme.md-ink-ripple {
		color: rgba(255, 255, 255, 0.87);
		background-color: #222D5D;
	}
	
	button.md-button.md-customTheme-theme.md-ink-ripple {
		color: #222d5d;
		width: 30%;
		height: 50%;
	}
	
	.md-button.md-customTheme-theme.md-primary.md-raised:not([disabled] ):hover
		{
		background-color: #51C3CD;
	}
	
	button.md-customTheme-theme:not([disabled] ):hover {
		background-color: rgba(255, 255, 255, .15);
	}
	
	.buttons-div.layout-align-center-center.layout-row.flex {
		height: 23%;
	}
	
	.btn-retour {
		min-width: 250px;
	}
	
	.md-button.md-default-theme.md-primary.md-fab, .md-button.md-primary.md-fab,
		.md-button.md-default-theme.md-primary.md-raised, .md-button.md-primary.md-raised
		{
		background-color: rgb(34, 45, 93) !important;
	}
	
	md-input-container.md-block.md-icon-left.md-input-has-placeholder.md-customTheme-theme
		{
		margin: 0;
	}
	
	svg {
		fill: #51C3CD;
	}
	
	md-input-container.md-icon-float:not(.md-input-invalid ) >md-icon.field
		{
		color: green;
	}
	
	.footer-wrapper {
		margin: 0px ;
		height: 8%;
	}
	
	.sbwl-footer {
		height: 30px;
	}
	
	.loader {
		position: fixed;
		z-index: 9999;
		background-color: #000000 !important;
		background: url("../img/touchpay2.png") 50% 50% no-repeat;
		top: 0px;
		left: 0px;
		height: 100%;
		width: 100%;
		cursor: wait;
	}
	
	.loader md-progress-circular.md-customTheme-theme path {
		stroke: rgb(81, 204, 205);
		stroke-width: 10;
	}
	
	md-dialog md-dialog-content .md-dialog-content-body {
		padding-top: 5% !important;
	}
	
	md-toast.md-default-theme .md-toast-content, md-toast .md-toast-content
		{
		background-color: #ac2925 !important;
	}
	
	.error-popup-text {
		color: #d43f3a
	}
	
	.error-popup {
		display: none;
	}
	
	
} */
/* mobile-small-landscape */
@media all and (min-width: 0) and (max-width: 480px) and (orientation:
	landscape) {
}
/* mobile-large-landscape */
@media all and (min-width: 481px) and (orientation: landscape) {
}
/* tablet-small-landscape */
@media all and (min-width: 600px) and (max-width: 960px) and
	(orientation: landscape) {
}
/* tablet-large-landscape */
@media all and (min-width: 961px) and (orientation: landscape) {
}
/* tablet-small */
@media all and (min-width: 600px) and (orientation: portrait) {
}
/* tablet-large */
@media all and (min-width: 601px) and (max-width: 840px) and
	(orientation : portrait) {
}
/* desktop-x-small-landscape */
@media all and (min-width: 0) and (max-width: 480px) and (orientation:
	landscape) {
}
/* desktop-x-small */
@media all and (min-width: 0) and (max-width: 480px) and
	(max-aspect-ratio: 4/3) {
}
/* desktop-small-landscape */
@media all and (min-width: 481px) and (max-width: 840px) and
	(orientation: landscape) {
}
/* desktop-small */
@media all and (min-width: 481px) and (max-width: 840px) and
	(max-aspect-ratio: 4/3) {
}
/* desktop-medium-landscape */
@media all and (min-width: 841px) and (max-width: 1280px) and
	(orientation: landscape) {
}
/* desktop-medium */
@media all and (min-width: 841px) and (max-width: 1280px) and
	(max-aspect-ratio: 4/3) {
}
/* desktop-large */
@media all and (min-width: 1281px)and (max-width: 1600px ) { /*  */
}
/* desktop-xlarge */
@media all and (min-width: 1601px) and (max-width: 1920px) {
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
     .img-circle img{
       width: 100% !important;
     }
     md-radio-button .md-label{
     	display: flex;
     }
}