html,
body {
  margin: 0;
  padding: 0;
  border: 1;
  outline: 0;
  font: normal 100% Helvetica, Arial, sans-serif;
  font-size: 14px;
  vertical-align: baseline;
  background: transparent;
}

p {
  padding: 0 0;
}

.lblOtpClass{
  padding: 0 0;
  text-align: justify;
  line-height: 1.125em;
  font-size: 0.9em;
  font-weight: bold;
  margin: 0 0 0 10%;
}

.helpClass{
	width: 78%;
    margin: 0px 11%;
    max-height: 1.2em;
/*     margin-bottom: 5% */
}

.aboutClass{
	width: 78%;
    margin: 0px 11%;
    max-height: 1.2em;
}

/*
input[type=button] {
	text-transform: uppercase;
}
*/

input[type=text],
input[type=password],
select,
textarea {
  width: 80%;
  margin: 0 10% 0 10%;
}


input[type=text]:hover {
}

.btn-primary {
    border-color: #ffffff;
}

.pwdClassText{
	text-transform: uppercase;
	text-align: center;
}

#divWarningSessionTimeout{
	text-align: center;
}

#submitButton {
}

#sendBackButton{
  background-color: grey;
  border-color: grey;
  margin: 2% 10% 1em 10%;
  width: 80%;
  font-size: 1em;
}

#selectDeviceListDIV{
	margin: 0 auto;
}
#selectedDeviceValue{
	margin: 0 auto;
}

#device{
	margin: 0 auto;
}

#devicesList {
	text-align: justify;
	margin: 0 10%;
}

#devicesList label {
    padding-left: 1em;
}

#selectDeviceButton,
#nextOObButton {
  width: 80%;
  background-color: #ac0633;
  border-color: #ac0633;
  margin: 2% 10% 1em 10%;
}

#nextErrOObButton{
 width: 80%;
  background-color: #ac0633;
  border-color: #ac0633;
  margin: 2% 10% 1em 10%;
}

#shoppingButton {
  width: 80%;
  background-color: #ac0633;
  border-color: #ac0633;
  margin: 0 10% 1em 10%;
}

#nextButton, #nextStepButton {
  width: 80%;
  background-color: #ac0633;
  border-color: #ac0633;
  margin: 0 10% 1em 10%;
  font-size: 1em;
}

#cancelButton {
  width: 25%;
  color: black;
  border: none;
  cursor: pointer;
  float: right;
  background: none;
  border-radius: 3% 3% 0 0;
  font-size: 1em;
}

/* Style the container */
.container {
  overflow: auto;
  width: 100%;
  max-width: 57em;
  /*max-width: 390px;
  height: 400px;*/
  margin: 0 auto;
  border: 0.0625em solid black;
  border-radius: 2%;
}

.issuerImageLoader {
  background-image: url("../acsimages/12928_sia_logo.png");
  width: 25%;
  height: 3.5em;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 2% 37.5% 25% 37.5%;
}

/*******************************/

.cardHolderLoader_mastercard {
  background-image: url(../acsimages/mcidc.png);
  width: 25%;
  height: 3.5em;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 2% auto 25% auto;
}

.cardHolderLoader_maestro {
  background-image: url(../acsimages/maestro.svg);
  width: 25%;
  height: 6em;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 2% auto 25% auto;
}

.cardHolderLoader_visa {
  background-image: url(../acsimages/visa-secure.png);
  background-repeat: no-repeat;
  width: 25%;
  height: 3.5em;
  background-size: contain;
  margin: 2% 37.5% 25% 35.9%;
}

/*************************************/

/* Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 0.375em;
}

/* Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 50%;
	margin: 10% 0 0 25%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

#secCheckout {
  width: 85%;
  margin: 0 0 1em 10%;
  height: 3.125em;
  background: #004B7F;
  border-radius: 3% 3% 0 0;
}

#secCancelButton {
  width: 85%;
  margin: 0 0 1em 10%;
  height: 1.5625em;
  background: white;
  border-radius: 3% 3% 0 0;
}

#secFooter {
  width: 85%;
  margin: 0 auto 0.5em auto;
}

#divBrandingZone {
  margin-bottom: 4%;
  width: 100%;
  height: 3.125em;
}

.issuerImage {
  background-image: url("../acsimages/12928_sia_logo.png");
  width: 40%;
  height: 3em;
  background-repeat: no-repeat;
  background-size: contain;
  float: left;
  margin-left: 10%;
}

.cardInfoImage_mastercard {
  float: right;
  width: 30%;
  height: 3.5em;
  background-image: url(../acsimages/mcidc.png);
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 10%;
}

.cardInfoImage_maestro {
  float: right;
  width: 24%;
  height: 3.9em;
  background-image: url(../acsimages/maestro.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.cardInfoImage_visa {
  float: right;
  width: 20%;
  height: 3.5em;
  background-image: url(../acsimages/visa-secure.png);
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 10%;
}

/***********inizio secure payment *****************/


#divInfoText {
  margin: 4% 10% 4% 10%;
  width: 80%;
  /*text-align: justify;*/
}

#divSuccessText {
  margin: 2% 10% 2% 10%;
  width: 80%;
  text-align: center;
}

#divInfoTextWarning {
	display: inline-flex;
    width: 80%;
}

#divInfoTextWarning span {
	margin: auto 0;
}

.divInfoTextFalback{

  margin: 5% 10% 5% 10%;
  width: 80%;
  text-align: justify;
}

.divInfoSuccessfully {
  margin: 1% 2% 5% 12%;
  width: 80%;
  text-align: justify;
}

#divDataEntry {
  margin: 0em 0em 1em 0em;
  width: 100%;
}


/***********fine secure payment *****************/


/********** OOB Help *******************/

.aboutCollapsButton {
  width: 80%;
  color: black;
  border: none;
  cursor: pointer;
  background: none;
  text-align: left;
  outline: none;
  margin: 2em 10% 0 10%;
}

.active,
 .aboutCollapsButton:hover {
}

.aboutCollapsButton:after {
  content: '\2193';
  color: black;
  font-weight: bold;
  float: right;
  margin-left: 0.3125em;
}

.active:after {
   content: '\2191';
}

.aboutContent {
  padding: 0 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
.helpContent {
  padding: 0 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
/*   margin-bottom: 1em; */
  text-align: justify;
}

/***********End OOB About ******************/


/********** Help Section *******************/

.helpCollapsButton {
  width: 80%;
  color: black;
  border: none;
  cursor: pointer;
  background: none;
  text-align: left;
  outline: none;
  margin: 0 10% 0 10%;
}

.active,
 .helpCollapsButton:hover {
}

.helpCollapsButton:after {
  content: '\2193';
  color: black;
  font-weight: bold;
  float: right;
  margin-left: 0.3125em;
}

.active:after {
  content: '\2191';
}

.content {
  padding: 0 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  margin-bottom: 5%;
}

/***********End Help ******************/


/********************per authentication****************/

#divWarningSessionTimeout2{
	text-align: center;
	margin-left: 1%;
}

.warningSessionExpired {
   /* margin: 2% 10% 2% 32%;*/
    margin-left: 32%;
    text-align: justify;
}

.warning {
  margin: 2% 10% 2% 10%;
  text-align: justify;
}

.info {
  margin: 2% 10% 2% 10%;
  /*text-align: justify;*/
}


#divPurchaseAuthenticationTitle {
	font-weight: bold;
	text-align: center;
    margin: 5% auto 5% auto;
}
/******* FINE SECURE PAYMENT */

/* Spinner */

.center {
  margin: 25% 45% 0 45%;
  width: 100%;
}

.centerSessionTimeOut {
  margin: 25% 45% 0 45%;
  height: 0px;
}

#loading {
  display: inline-block;
  width: 3.125em;
  height: 3.125em;
  border: 0.1875em solid lightgrey;
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

#sessionExp {
  display: inline-block;
  width: 3.125em;
  height: 3.125em;
  border-radius: 50%;
}


.glyphRedClass {
    position: relative;
    border-radius: 50%;
    color: white;
    z-index:2;
    text-shadow: -2px 0 red, 0 2px red, 2px 0 red, 0 -2px red;
    font-size: x-large;
    float: left;
    margin-right: 2%;
}

.innerGlyph {
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border-radius: 50%;
    background-color: red;
    z-index: -1;
}

.buttonContainer {
    width: 80%;
    text-align: center;
    margin: 1em auto;
}

.warningLogo {
    height: 1.75em;
    margin: 0 1% 0 0;
    width: auto;
}

/* -------------------- RESPONSIVE -------------------- */

@media all and (min-width: 501px) and (max-width: 600px) {

  #main:before {
    content: 'mQuery: max-width: 600px';
  }

	html,
	body {
	  font-size: 13px;
	}

  .container {
	  width: 100%;
	  margin: 0 auto;
	  border: 0.0625em solid black;
	  border-radius: 2%;
	  height: 100%;
	}


	.divInfoTextWarning {
	    height: 3.0em;
	}

	#divDataEntry {
	    margin: 0em 0em 2% 0em;
	    width: 100%;
	}

	.divInfoTextWarning {
	    margin: 0 10% 0.50em 10%;
	    width: 80%;
	    height: 1.5em;
	}

	.divInfoText {
	    margin: 0.25em 10% 0.25em 10%;
	    width: 80%;
	}

	.lblOtpClass {
    	font-size: 0.9em;
    }

	.issuerImage {
	    width: 40%;
	    height: 3em;
	}

   .cardInfoImage_mastercard {
	  width: 24%;
	  height: 3.5em;
	}

   .cardInfoImage_maestro {
	  width: 24%;
	  height: 3.9em;
	}

	#divPurchaseAuthenticationTitle {
		margin: 2% auto 2% auto;
	}

	#nextButton, #nextStepButton {
	    margin: 0 10% 0.4em 10%;
	}

	#sendBackButton {
	    margin: 1% 10% 0.5em 10%;
	}


}

@media all and (min-width: 500px) and (max-width: 500px) {

  #main:before {
    content: 'mQuery: max-width: 500px';
  }

	html,
	body {
	  font-size: 14px;
	}

  .container {
	  width: 100%;
	  margin: 0 auto;
	  border: 0.0625em solid black;
	  border-radius: 2%;
	  height: 100%;
	}

	.divInfoTextWarning {
	    height: 3.0em;
	}

	/*
	input[type=text], select, textarea{
	    width: 80%;
	    padding: 0.60em 1.25%;
	    border: 0.0625em solid #ccc;
	    border-radius: 3%;
	    box-sizing: border-box;
	    resize: vertical;
	    margin: 0 10% 2em 10%;
	}*/

	#divDataEntry {
	    margin: 0em 0em 5% 0em;
	    width: 100%;
	}

	.divInfoTextWarning {
	    margin: 0 10% 0.50em 10%;
	    width: 80%;
	    height: 1.5em;
	}

	.divInfoText {
	    margin: 0.25em 10% 0.25em 10%;
	    width: 80%;
	}

	.lblOtpClass {
    	font-size: 0.9em;
    }

	.issuerImage {
	    width: 40%;
	    height: 3em;
	}

   .cardInfoImage_mastercard {
	  width: 28%;
	  height: 3.5em;
	}

   .cardInfoImage_maestro {
	  width: 28%;
	  height: 3.5em;
	}

	.center {
	  margin: 30% 37.5% 0 37.5%;
	}

	.centerSessionTimeOut{
		margin: 30% 37.5% 0 37.5%;
		height:600px;
	}

	.cardHolderLoader_mastercard {
	    width: 30%;
	    height: 3.5em;
	    margin: 2% auto 45% auto;
	}

	.cardHolderLoader_maestro {
	    width: 30%;
	    height: 3.5em;
	    margin: 2% auto 45% auto;
	}
}

@media all and (min-width: 391px) and (max-width: 499px) {

  #main:before {
    content: 'mQuery: max-width: 500px';
  }

	html,
	body {
	  font-size: 12px;
	}

  	.container {
	  width: 100%;
	  margin: 0 auto;
	  border: 0.0625em solid black;
	  border-radius: 2%;
	  height: 100%;
	}

	#cancelButton {
		width: 30%;
	}

	#submitButton {
    padding: 0.55em 1.25%;
    width: 84%;
    margin: 0 8% 0.75em 8%;
	}

	#nextOObButton {
    padding: 0.55em 1.25%;
    width: 84%;
    margin: 0 8% 0.75em 8%;
	}

	#shoppingButton {
    width: 84%;
    margin: 0 8% 0.75em 8%;
    font-size: 0.625em;
	}

	#divDataEntry {
	    margin: 0em 0em 5% 0em;
	    width: 100%;
	}

	.issuerImage {
	    width: 40%;
	    height: 2em;
	}
	.cardInfoImage_mastercard {
	    height: 3em;
	    width: 25%;
	}
	.cardInfoImage_maestro {
	    height: 3.5em;
	    width: 25%;
	}
	.cardInfoImage_visa {
	  height: 2em;
	}
	#divBrandingZone {
	  height: 2.3em;
	}

	.divInfoTextWarning {
	    margin: 0 10% 0.50em 10%;
	    width: 80%;
	    height: 1.5em;
	}

	.divInfoText {
	    margin: 0.25em 10% 0.25em 10%;
	    width: 80%;
	    /*text-align: justify;*/
	}

	.issuerImageLoader {
	  width: 45%;
	  margin: 2% 27.5% 25% 27.5%;
	}

	.center {
	  margin: 25% 37.5% 0 37.5%;
	}

	.cardHolderLoader_mastercard {
	    width: 30%;
	    height: 3.5em;
	    margin: 2% auto 45% auto;
	}

	.cardHolderLoader_maestro {
	    width: 30%;
	    height: 3.5em;
	    margin: 2% auto 45% auto;
	}

	.collapsible {
	    margin: 0.1em 10% 0 10%;
	    padding: 0.4em 4.25%;
	    font-size: 0.625em;
	}

}

/****************************************/
	html,
	body {
	  font-size: 12px;
	}

  	.container {
	  max-width: 390px;
	  max-height: 400px;
	  min-height: 400px;
	  margin: 0 auto;
	  border: 0.0625em solid black;
	  border-radius: 2%;
	}

	input[type=text],
	input[type=password],
	select,
	textarea {
	  font-size: 12px;
	}

	#cancelButton {
		width: 30%;
	}

	#nextButton, #nextStepButton {
	  width: 80%;
	  background-color: #ac0633;
	  border-color: #ac0633;
	  margin: 0 10% 0.8em 10%;
	  font-size: 1em;
	}

	#sendBackButton{
	  background-color: grey;
	  border-color: grey;
	  margin: 2% 10% 0.8em 10%;
	  width: 80%;
	  font-size: 1em;
	}

    #selectDeviceButton,
	#nextOObButton {
    padding: 0.55em 1.25%;
    width: 84%;
    margin: 0 8% 0.75em 8%;
	}

	#shoppingButton {
		font-size: 1em;
	    width: 84%;
	    margin: 0 8% 0.75em 8%;
	}

	#divDataEntry {
	    margin: 0em 0em 5% 0em;
	    width: 100%;
	}

	.issuerImage {
	width: 40%;
    height: 3em;
	}
	.cardInfoImage_mastercard {
    height: 3.5em;
    width: 30%;
	}
	.cardInfoImage_maestro {
		height: 3em;
	    width: 25%;
	}

	.cardInfoImage_visa {
	  height: 2em;
	}

	#divBrandingZone {
	  height: 2.3em;
	}

	.divInfoTextWarning {
	    margin: 0 10% 0.50em 10%;
	    width: 80%;
	    height: 1.5em;
	}

	.warning {
	  margin: 2% 10% 2% 10%;
	  /*text-align: justify;*/
	}

	.info {
	  margin: 2% 10% 1% 10%;
	  /*text-align: justify;*/
	}

	.divInfoText {
	    margin: 0.25em 10% 0.25em 10%;
	    width: 80%;
	    /*text-align: justify;*/
	}

	.issuerImageLoader {
	  width: 45%;
	  margin: 2% 27.5% 25% 27.5%;
	}

	.center {
	  margin: 30% 37.5% 0 46.9%;
	}

	.cardHolderLoader_mastercard {
	    width: 30%;
	    height: 3.5em;
	    margin: 2% auto 45% auto;
	}

	.cardHolderLoader_maestro {
	    width: 30%;
	    height: 3.5em;
	    margin: 2% auto 45% auto;
	}

	.collapsible {
	    margin: 0.1em 10% 0 10%;
	    padding: 0.4em 4.25%;
	    font-size: 0.625em;
	}

	.lblOtpClass {
    	font-size: 0.9em;
    }

     .pwdClassText{
		font-size: 0.9em;
	}

	.helpCollapsButton {
	  margin: 0.5em 10% 0 10%;
	}

	#loading {
	  display: inline-block;
	  width: 3.125em;
	  height: 3.125em;
	  border: 0.1875em solid lightgrey;
	  border-radius: 50%;
	  border-top-color: #fff;
	  animation: spin 1s ease-in-out infinite;
	  -webkit-animation: spin 1s ease-in-out infinite;
	}

	@keyframes spin {
	  to {
	    -webkit-transform: rotate(360deg);
	  }
	}

	@-webkit-keyframes spin {
	  to {
	    -webkit-transform: rotate(360deg);
	  }
	}
/************************/

.glyphiconDivClass{
	color: red;
    margin: 0 0 0 15%;
    width: 80%;
}

.glyphiconGenericClass{
	color: red;
}