@import url(https://use.fontawesome.com/releases/v5.0.10/css/all.css);

/* cpm filter - jqui overrides */
#age_slider .ui-slider-handle,
#income_slider .ui-slider-handle  {
  top: -0.5em !important;
  margin-left: -.6em !important;
  font-size: 2.5em !important;
}

#age_slider .ui-slider-range,
#income_slider .ui-slider-range {
  background: #333 !important;
}

#age_slider .ui-corner-all,
#income_slider .ui-corner-all  {
  border-radius: 20px !important;
}

#age_slider.ui-widget,
#income_slider.ui-widget  {
  font-size: .5em !important;
}

.demo-wrap {
  margin: 20px 5px;
  padding: 10px 25px 15px 25px;
  border: 1px solid rgb(0 0 0 / 13%);
}

.demo-wrap .legend p {
  font-size: 18px;
  margin-bottom: .4rem;
}

.demo-wrap .form-check label {
  font-size: 18px;
}

.demo-wrap h6 {
  font-weight: 500;
  font-size: 1.125rem;
  margin: 5px 0 10px 0;
}


/* password reset styling validation */
.invalid {
  color: red;
}
.valid {
  color: green;
}

@media screen {
  .export-only {
    display: none;
    visibility: hidden;
  }
}

.bg-2min-warning { 
  background-color:red !important; 
}

/* coupon styling */
.discount { 
  color:green !important; 
}

.coupon-wrapper {
  border: 1px solid #ddd;
  margin: 10px auto;
  padding: 10px;
  background: #f0f0f0;
  color: #008000;
}

/* 
** cpm leads detail & textarea max char count
*/

.cpm-leads-detail-text span{
  font-size: .875rem;
  margin-bottom: .115rem;
  text-align: right;
}
.export-notes-wrapper {
  width: 100%;
  height: 200px;
}
textarea {
  width: 100%;
  min-height: 100px;
  resize: none;
  border-radius: 5px;
  border: 1px solid #ddd;
  padding: 0.5rem;
  color: #666;
  box-shadow: inset 0 0 0.25rem #ddd;
}
textarea:focus {
  outline: none;
  border: 1px solid #d0d0d0;
  box-shadow: inset 0 0 0.5rem #d0d0d0;
}
textarea[placeholder] {
  font-style: italic;
  font-size: 0.875rem;
}
#char_count{
  padding: 0.1rem 0 0 0;
  font-size: 0.875rem;
}
.export-print-break {
  page-break-after: always;
}

/* terms and conditions */
/* looks like the t&cs need their special kind of header style and within THAT needs to be even more custom with the case ... can't have nice things */
.terms h3, 
.terms h4 {
  margin: 30px 0 20px 0;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;  
}
.terms .transform-none,
.terms h4 {
  text-transform: none;
}
.terms .subtitle {
  display: block;
  font-style: italic;
  font-size: small;
  margin: 0 0 20px 0;
}


#termsImg {
  width: 100%;
  height: 100%;
}


@media only screen and (max-width: 2000px) {
  #termsImg {
    width: auto;
    height: 400px;
  }
}

@media only screen and (max-width: 991px) {
  #termsImg {
    width: 100%;
    height: 400px;
  }
}


@media only screen and (max-width: 600px) {
  #termsImg {
    width: 100%;
    height: 100%;
  }
}
/* footer-content - wrapper div for the footer (kind of after the fact design) */
.footer-content {
  width: 315px;
}
/* for Authorize.net Merchant Seal dimension override - orginally 90x72px */
.AuthorizeNetSeal img {
  height: auto;
  max-width: 65px;
}

@media print {
  header, footer{
    display: none;
  }
  article {
    width:100%!important;
    padding:0!important;
    margin:0!important;
  }
}

#notifications-container {
  position: fixed; 
  top: 75px; 
  right: 5px; 
  width: 300px; 
  z-index: 9998;  
}

@media only screen and (max-width: 450px) {
  #notifications-container {
    bottom:45px;
    top: unset;
  }
}


/* Leads filter spacing  */
.filter-control {
  padding: 5px;
}

/* contact from honeypot */
.honeydew{
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  z-index: -1;
}

/* printer icon */
.printer-icon {
  height: 30px;
}

/* mailer modal button disable styling  */
#termsapproved{
  opacity: 0.5;
}
/*  */


/* fixing footer  */
body {
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.footer {
  background-color: #CCCCFF;
  margin-top: auto;
}

.status-column-leads {
  min-width: 313px !important;
  max-width: 313px !important;
}


.error-container {
  position: relative;
  height: 100vh;
}

.error-container::before {
  content: "";
  background-image: url("https://a.cdnlead.com/portal-assets/errorbkg.png");
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.error-container h1 {
  color: black;
  opacity: 1;
  display: flex;
  text-align: center;
  font-size: 32px;
}

.error-container .container {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  z-index: 1; /* Add this line */
}


.error-img {
  height: 90px;
  width: auto;
}

.lostguy {
  height: 183px;
}


@media only screen and (max-width: 600px) {
  .error-container h1 {
    font-size: 19px;
  }
  .error-container::before {
    background-size: contain;
  }
  .error-container p{
    font-size: 12px;
  }
}

/* SPINNER STYLING  */
.d-none {
  display: none !important;
}

#loading-spinner {
  position: fixed !important;
  top: 0 !important;
  right: 0;
  bottom: 0;
  left: 0 !important;
  z-index: 9999999 !important;
}

.spinner-container {
  width: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.spinner-border {
  display: inline-block;
  width: 4rem;
  height: 4rem;
  vertical-align: -0.125em;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: 0.75s linear infinite spinner-border;
}



#income-optimum, #age-optimum{
  display: none;
}

#order-detail-coupon-section,#order-detail-coupon-section,#cancellation-statement,#order-detail-cancel-button,#recurring-history-section{
  display: none;
}

.alternative-link{
  color: white;
}

.alternative-link:hover{
  color: gold;
}