/* Overwriting the rule for a specific class */


#stoolCheckerWidget  img {
    max-width: none; /* Set it to none or your desired value */
}

#stoolCheckerWidget #scanner_container img{ max-width: 760px; margin: auto;}

#scanner_container {
    text-align: center;
}

#scanner_banner img{ width: 100%; max-width: 760px;}

#btn_AIStoolChecker_upload {
    text-align: center;
}

#btn_AIStoolChecker_upload { cursor: pointer;}

.dragdealer {
  position: relative;
  height: 30px;
}
.dragdealer .handle {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}
.dragdealer .red-bar {
  width: 100px;
  height: 30px;
  color: #FFF;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
}
.dragdealer .disabled {
  background: #898989;
}

#scanner_container_photoHolder img { width: 100%; max-width: 760px;}

#stoolCheckerWidget {  margin-bottom: 60px;  }

#poopchecker-container{ margin: auto;   background: #e9f8ff; border-radius: 9px !important; overflow: hidden; box-shadow: 0 3px 6px rgb(0 0 0 / 25%);}

#poopchecker-tip{ display: none;}

#poopchecker {
  display: flex;
  align-items: center;
  justify-content: center;
  width:100%;
  height: 450px;
  background: url(https://stoolai.nutricia.flaskcloud.com/poopchecker_v4/images/interactive_slider_bg.jpg) center center no-repeat;

  position: relative;
  margin: 0;
}

#poopchecker .dragger{ height:110px; margin-left: -30px; margin-top: -25px; }


#poopchecker .dragger-label{
  position: absolute; z-index: 50;
  top:15px;
  width:80px;
  left:-20px;
  line-height: 15px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  height: 30px;
}






#poopchecker .dragger_pointer{ position: absolute; z-index: 80; left: -9px; top:-35px; width: 60px; text-align: center; font-weight: normal;}
#poopchecker .dragger_pointer_bottom { top:5px;}

#poopchecker-visual {margin: auto; text-align: center; height: 250px;}

#poopchecker-info{
  position: relative;
  margin: 0 auto ;
  padding-bottom: 60px;

  text-align: center;
}

#poopchecker-info .body-text-title{color:#5ebeec;}


#poopchecker-info h3{ margin-bottom: 10px;}
#poopchecker-info p { padding: 0; margin: 0 0 30px;}

#poopchecker-info ul{ list-style: none; margin: 15px auto 40px; padding: 0;  width: 90%;}
#poopchecker-info li{ margin: 0; margin-bottom: 15px;   padding: 0;}

#poopchecker-info ul li li { color:#5ebeec; text-transform: capitalize; }

#poopchecker-info .btn {
	border-radius: 30px;
	background-color: #95b8cc;
	height: 60px;
	display: inline-block;
	cursor: pointer;
	line-height: 60px;
	padding: 0 30px;
	color: #fff;
	font-weight: normal;
	font-size: 20px;
	padding-left: 80px;
	position: relative;
	text-decoration: none;
  margin-top: 30px;
}


#poopchecker-info .btn_icon {
    position: absolute;
    left: 7px;
    top: 7px;
}


#poop-checker-info-content{
  width: 80%; margin: 30px auto;
}

.content-scroller-color {
  position: absolute;
  right: 100px;
  top: 45px;
}


.dragdealer-top, .dragdealer-bot {
width: 40px;
display: block;

}

.content-scroller-color .dragdealer {
  width: 40px;
  height: 350px;
  border-radius: 3px;
}

.content-scroller-color .dragdealer .handle {
  width: 40px;
  height: 60px;
  text-align: center;
  border-radius: 3px;
}


/*----------------------------------------------*/


.content-scroller-type {
  position: absolute;
  left: 100px;
  top: 45px;
}

.content-scroller-type .dragdealer {
  width: 40px;
  height: 350px;
  border-radius: 3px;
}

.content-scroller-type .dragdealer .handle {
  width: 40px;
  height: 60px;
  text-align: center;
  border-radius: 3px;
}






@media only screen and (max-width: 767px) {



  #poopchecker-container{ width: 100%; margin: auto;}

  #poop-checker-info-content{ width: 90%; margin: auto;}

  #poopchecker-info .btn {
  	border-radius: 30px;
    box-sizing: border-box;
  	background-color: #95b8cc;
  	height: 49px;
  	display: inline-block;
  	cursor: pointer;
  	line-height: 49px;
  	padding: 0 30px;
    padding-left: 55px;
  	color: #fff;
  	font-weight: normal;
	  font-size: 15px;
  	position: relative;
  	text-decoration: none;
  }

  #poopchecker-info .btn_icon {
      position: absolute;
      width: 35px;
      left: 7px;
      top: 7px;
  }

  .content-scroller-color {
    position: absolute;
    right: 45px;
    top: 40px;
  }

  .content-scroller-type {
    position: absolute;
    left: 45px;
    top: 40px;
  }
}

@media only screen and (max-width: 640px) {

  #poopchecker-tip{ display: block; height: 50px;}

  #poopchecker { background: url(https://stoolai.nutricia.flaskcloud.com/poopchecker_v4/images/interactive_slider_bg_mobile.jpg) center center no-repeat; height: 350px;}



  #poopchecker-visual{ width: 70%; height: auto;}



    #poopchecker-info .btn {
    	font-size: 3.5vw;
    }

    #poopchecker .dragger{ height:80px; margin-left: -22px; margin-top: -10px; }
    #poopchecker .dragger-label{ position: absolute; z-index: 50; left: -21px; top:15px; width: 70px; text-align: center; font-weight: normal; font-size: 10px;}
    #poopchecker .dragger_pointer{ position: absolute; z-index: 80; left: -9px; top:-25px; width: 50px; text-align: center; font-weight: normal;}
    #poopchecker .dragger_pointer_bottom { top:5px;}



    .content-scroller-color {
      position: absolute;
      right: 40px;
      top: 10px;
    }

    .dragdealer-top, .dragdealer-bot {
    width: 30px;
    display: block;

    }

    .content-scroller-color .dragdealer {
      width: 30px;
      height: 300px;
      border-radius: 3px;
    }

    .content-scroller-color .dragdealer .handle {
      width: 30px;
      height: 60px;
      text-align: center;
      border-radius: 3px;
    }


    /*----------------------------------------------*/


    .content-scroller-type {
      position: absolute;
      left: 40px;
      top: 10px;
    }

    .content-scroller-type .dragdealer {
      width: 30px;
      height: 300px;
      border-radius: 3px;
    }

    .content-scroller-type .dragdealer .handle {
      width: 30px;
      height: 60px;
      text-align: center;
      border-radius: 3px;
    }

    .content-scroller-type .dragdealer .handle i {
      line-height: 60px;
    }



    #poopchecker .dragger-label{
      position: absolute; z-index: 50;
      top:15px;
      width:60px;
      left:-15px;
      line-height: 10px;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;
      height: 30px;
    }



}

@media only screen and (max-width: 400px) {


  #poopchecker-info .btn {
    font-size: 3vw;
  }

  .content-scroller-color {
    position: absolute;
    right: 22px;
    top: 10px;
  }

  .content-scroller-type {
    position: absolute;
    left: 22px;
    top: 10px;
  }
}

@media only screen and (min-width: 768px) {
  .container {
      max-width: 720px;
  }
}

@media only screen and (min-width: 1080px) {
  .container {
      max-width: 980px;
  }
}