html, body {
  /*
  success color light #92c83e dark #4c9e45 
  fail color light #DD1D21 dark #892433
  logo and branding color #DD1D21
  grey color #f8f8f8
  font color #383e45
  hyperlink color #0076ff
  */
  font-family: Arial,Helvetica,sans-serif !important;
  font-weight:400;
  color: #585858;
}

p:not([class='mb-0']) {
  font-size: 17px;
}

[data-notify='message'] {
  font-size: 20px;
}

.trade-mark {
  display: flex;
  align-items: center;
  position:relative;
  line-height:125px;
  margin-left:-7%;
  color:black;
  font-weight: bold;
  letter-spacing: 0.2ex;
  font-size: 18px;
}

.authenticate-form {
  margin-left: -1px !important;
  margin-right: -1px !important;
}
  .auth-form-container,
  .auth-confirmation-container,
  .register-form-container,
  .title,
  .registration-confirmation-container,
  .shipment-information-container {
	color: #ffffff !important;
  }
.footer-container .footer-logo .img-fluid{
    margin: 25%;
    max-height: 50% !important;
    max-width: 50% !important;
}

.footer-container .copyright-text{
  display: flex;
  align-items: left;
  position:relative;
  margin-left:-7%;
  color:black;
  text-align: left;
  letter-spacing: 0.2ex;
  font-size: 16px;
}

.invalid-feedback {
  margin-bottom: -1.2em !important;
  }

.try-again-container {
    max-height: 4em;
    position: relative;
    margin: -1px;
    bottom: -3em;
    border-radius: 0 !important;
    border: 1px solid #ddd !important;
    background-color: #f8f8f8 !important;
}
.breadcrumb.authenticate-button.mb-0 {
    /*border-radius: 0 !important; */
    /*border: 1px solid #ddd; */
    background-color: #ffffff;
    /*margin: -1px;*/
}

.authenticate-form .form-row input {
  text-transform: uppercase;
}

.authenticate-form,
.register-form {
  font-size: 16px;
}

.ringers-header-logo {
  padding: 1.5rem 2rem;
  margin-left: 0%;
}
.container-fluid .header-container .ringers-header-logo .img-fluid{
    margin: 25%;
    max-height: 50% !important;
    max-width: 50% !important;
}

.header-title {
  color: #242424;
  font-size: 30px !important;
  min-height: 0.3em;
}

.title {
  color: #242424;
  font-size: 30px !important;
  min-height: 0.3em;
}

.product-uid {
  color: #242424;
  font-size: 10px !important;
  font-weight: bold;
}

.auth-button,
.register-button {
    background-color: #20568B;
    -webkit-box-shadow: 0 2px 0 0 black; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow: 0 2px 0 0 black; /* Firefox 3.5 - 3.6 */
    box-shadow: 0 2px 0 0 black; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
    color: #FFFFFF;
    font-size: 16px;
}

.auth-container {
  margin-bottom: 0px !important;
}

.auth-form-description,
.register-form-description {
  color: #242424;
  font-size: 18px;
}

.hyphen-separator {
  color: #979797;
  font-size: 16px;
  font-weight: bold;
}

.form-wrapper {
  padding: 2rem 0;
}

.auth-placeholder-bg {
  background-image: url("https://customerce-demo.s3.amazonaws.com/shell-bg.png"); /* The image used */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: contain; /* Resize the background image to cover the entire container */
  background-color: #ffffff;
}

.authentication-message,
.registration-message {
    color: #FFFFFF;
    font-size: 20px !important;
    letter-spacing: 1px;
}

.auth-color-genuine,
.registration-color-success {
  background-color: #008443;
  background-image: none !important;
}

.auth-color-already-registered {
  background-color: #066CB4;
}

.auth-color-invalid,
.registration-color-error {
    background-color: #DD1D21;
	background-image: none !important;
}

.authConfirmationTop {
    height: 2.5em;
    overflow: hidden;
}

.authConfirmationIcon.auth-color-invalid {
    background-color: #DD1D21;
    float: left;
    max-width: 8%;
}

.authConfirmationIcon.auth-color-genuine {
    background-color: #92c83e;
    float: left;
   /* margin-right: 0em !important; */
    max-width: 8%;
}

.authConfirmationText {
    float: left;
    margin-top: 0.2em;
    margin-left: 0.5em;
}

.auth-icon {
    margin-bottom: 1em;
    margin-top: 0.2em;
    margin-left: 0.4em;
    margin-right: 1em;
    max-width: 2em !important;
}

.authentication-icon-container,
.registration-icon-container {
    /*background-color: #FFFFFF;*/
    /*border: 2px solid #000000;*/
    /*border-radius: 12px;*/
    padding: 2rem 2rem 3rem 2rem;
}

.authentication-icon > img,
.registration-icon > img {
  max-height: 80px;
}

.try-again-button,
.try-again-button:hover,
.register-try-again-button,
.register-try-again-button:hover {
    letter-spacing: 1px;
    color: #FFFFFF;
    font-size: 18px;
    background-color: #DD1D21;
    margin: 0 auto;
    padding: 0 3em 0 3em;
    max-height: 2em;
}

.activity-indicator {
  font-size: 24px;
}

.img-fluid {
  max-height: 80% !important;
  max-width: 80% !important;
}

/** Support for changing placeholder color.
  * This syntax is not standard, thus all the
  * declaration for each browser support
  */
input:not([type='submit'])::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #A4A4A4;
  opacity: .77;
}

input:not([type='submit'])::-moz-placeholder { /* Firefox 19+ */
  color: #A4A4A4;
  opacity: .77;
}

input:not([type='submit']):-ms-input-placeholder { /* IE 10+ */
  color: #A4A4A4;
  opacity: .77;
}

input:not([type='submit']):-moz-placeholder { /* Firefox 18- */
  color: #A4A4A4;
  opacity: .77;
}

@media screen and (max-width: 768px) {
  .authentication-icon-container,
  .registration-icon-container {
    padding: 4rem 2rem;
  }
  .ringers-header-logo {
    margin-left: 0%;
  }
  .trade-mark {
    display:none;
  }
  .footer-container footer-logo{
	clear:both;
  }
  .footer-container .copyright-text{
    font-size: 16px;
    text-align: center;
  }
}

@media screen and (min-width: 992px) {
  .header-title {
    background-color: #20568B;
    color: #FFFFFF;
    font-size: 30px;
  }
  .form-wrapper {
    margin-top: 3rem;
  }
  .auth-confirmation-container .title {
    color: #ffffff;
  }
  .auth-form-container,
  .auth-confirmation-container,
  .register-form-container,
  .registration-confirmation-container,
  .shipment-information-container {
    border: 1px solid #ddd;
    height: 400px;
    padding: 1rem;
	color: #ffffff;
  }
 .footer-container {
    position: fixed !important;
    bottom: 0 !important;
	width: 100% !important
  }
  .row {
    height: 100%;
  }

  .ringers-header-logo {
    padding-left: 5rem;
  }
  .authentication-icon-container,
  .registration-icon-container {
    padding: 3rem 2rem;
  }
  .trade-mark {
    margin-left:-2%;
  }
}

#detail-list {
  list-style-type: none;
  padding-left: 0;
}