@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
h3 {
  font-weight:700;
}
.password-tool-container {
    max-width: 520px;
    margin: 20px auto;
    padding: 40px;
    /* border: 1px solid #ddd !important; */
    border-radius: 10px;
    background-color:#ffffff;
    box-shadow: 0px 10px 20px 0px #0000001A;
}

.password-tool-container input[type="text"],
.password-tool-container input[type="range"] {
    width: 100%;
    margin-bottom: 10px;
}

.progress-bar {
    height: 3px;
    background-color: #6DC24F;
    margin-bottom: 33px;
    border-radius: 3px;
}

.password-tool-container button {
    background-color: #FF1053;
    color: white;
    padding: 12px 15px;

    border: none;
    border-radius: 3px !important;
    cursor: pointer;
    margin-top: 30px;
    font-family: "Jost";
    font-size: 14px;
    font-weight: 700;
    line-height: 26px;
    width: 100%;
}

.password-tool-container button:hover {
    box-shadow: 0 20px 38px rgba(0, 0, 0, 0.16) !important;
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
}
body .password-tool-container label h5{
    color: #343C55;
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 30.35px !important;
    text-align: left;
    text-decoration-skip-ink: none;
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 16C2 13.1716 2 11.7574 2.87868 10.8787C3.75736 10 5.17157 10 8 10H16C18.8284 10 20.2426 10 21.1213 10.8787C22 11.7574 22 13.1716 22 16C22 18.8284 22 20.2426 21.1213 21.1213C20.2426 22 18.8284 22 16 22H8C5.17157 22 3.75736 22 2.87868 21.1213C2 20.2426 2 18.8284 2 16Z" stroke="%23FF1053" stroke-width="2"/><path d="M6 10V8C6 4.68629 8.68629 2 12 2C15.3137 2 18 4.68629 18 8V10" stroke="%23FF1053" stroke-width="2" stroke-linecap="round"/></svg>');
        background-repeat:no-repeat;
        background-position:center left;
        padding-left:37px;
        margin-bottom: 30px;
        margin-top: 0 !important;
    
    }
body .password-tool-container input[type=text]{
    background-color: #F5F5F5;
    font-family: "Open Sans";
font-size: 16px;
border-radius: 3px;
font-weight: 400;
line-height: 26px;
text-align: left;
text-decoration-skip-ink: none;
color: #343C55A8;
padding: 17px 20px;

}
body .password-tool-container input[type=text]::placeholder{
    font-style: italic;    font-family: "Open Sans"; font-weight: 400;
}

.password-tool-container .checklist > div {
    position: relative;
}
body .password-tool-container input[type=checkbox] {
    display:none;
  }
  .password-tool-container .checklist label{
    padding-left: 60px;
    z-index: 2;
    position: relative;
    cursor: pointer;
    font-family: "Jost";
    font-size: 14px;
    font-weight: 500;
    line-height: 26px;
    text-decoration-skip-ink: none;
    color: #343C55;
    margin-bottom: 10px;
    display: block;
  }
  .slidercheck {
    background-color: #F5F5F5;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
    width: 46px;
    z-index: 1;
  }
  .slidercheck:before {
    background-color: #fff;
    bottom: 2.5px;
    content: "";
    height: 21px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 21px;
    box-shadow: 0px 2px 4px 0px #0F17270D;
  }
  input:checked + .slidercheck {
    background-color: #FF1053;
  }
  input:checked + .slidercheck:before {
    transform: translateX(18px);
  }
  .slidercheck.round {
    border-radius: 34px;
  }
  .slidercheck.round:before {
    border-radius: 50%;
  }
  .password-tool-container .progress-bar + p{
    font-family: "Open Sans";
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    text-decoration-skip-ink: none;
    color: #343C55;
  }
p.security-level {
  padding-bottom: 5px;

}
  .password-tool-container .progress-bar + p strong{
    font-weight: 700;
  }
  .password-length{
    font-family: "Open Sans";
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: #343C55;
text-decoration-skip-ink: none;
  }
  .password-length strong{
    font-weight: 700;
  }
  .password-tool-container .checklist {
    margin-top: 25px;
}

  /* Range */
  .password-tool-container input[type="range"] {
    /* removing default appearance */
    -webkit-appearance: none;
    appearance: none; 
    /* creating a custom design */
    width: 100%;
    cursor: pointer;
    outline: none;
    border-radius: 15px;
    /*  overflow: hidden;  remove this line*/
    
    /* New additions */
    border-radius: 3px;
    height: 2px;
    background: #F5F5F5;
    position: relative;
    z-index: 3;
    
  }
  
  /* Thumb: webkit */
  .password-tool-container input[type="range"]{

  }
  .password-tool-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 14px;
    width: 14px;
    background-color: #FFFFFF;
    border-radius: 50%;
    border: none;
    transition: .2s ease-in-out;
    border: 2px solid #FF1053;
    box-shadow: 0px 2px 4px 0px #0F17270D;
    z-index: 3;
    position: relative;
  }
  
  /* Thumb: Firefox */
  .password-tool-container input[type="range"]::-moz-range-thumb {
    height: 14px;
    width: 14px;
    background-color: #FFFFFF;
    border-radius: 50%;
    border: none;
    border: 2px solid #FF1053;
    box-shadow: 0px 2px 4px 0px #0F17270D;
    z-index: 3;
    position: relative;
    
    /* box-shadow: -407px 0 0 400px #f50; emove this line */
    transition: .2s ease-in-out;
  }
  
  /* Hover, active & focus Thumb: Webkit */
  
  .password-tool-container input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 10px rgba(255,16,83, .1)
  }
  .password-tool-container input[type="range"]:active::-webkit-slider-thumb {
    box-shadow: 0 0 0 13px rgba(255,16,83 .2)
  }
  .password-tool-container input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 13px rgba(255,16,83 .2)
  }
  
  /* Hover, active & focus Thumb: Firfox */
  
  .password-tool-container input[type="range"]::-moz-range-thumb:hover {
    box-shadow: 0 0 0 10px rgba(255,16,83 .1)
  }
  .password-tool-container input[type="range"]:active::-moz-range-thumb {
    box-shadow: 0 0 0 13px rgba(255,16,83 .2)
  }
  .password-tool-container input[type="range"]:focus::-moz-range-thumb {
    box-shadow: 0 0 0 13px rgba(255,16,83 .2)    
  } 
  .password-tool-container input[type="range"]::after {
    content: "";
    border: 1px solid #F5F5F5;
    width: calc(100% + 4px);
    height: 4px;
    position: absolute;
    /* top: 9px; */
    /* left: -62px; */
    border-radius: 3px;
    z-index: 0;
    /* background: #f2f4fa; */
    left: -3px;
    top: -2px;
}
p.security-level strong{
  font-weight: 700;
}
.progress-box span {
  width: 47px;
  height: 3px;
  border-radius: 3px;
  background-color: #F5F5F5;
  display: block;
}
.progress-box {
  display: flex;
  gap: 2px;
  margin-bottom: 35px;
}
.progress-box span.weak{
  background-color: #FFBC10;
}
.progress-box span.strong{
  background-color: #6DC24F;
}
.progress-box span.moderate{
 background-color: orange;   
}
  @media(max-width:55px){
    .password-tool-container{
      padding: 25px;
    }
  }
  @media(min-width:1100px){
    .password-tool-container .checklist {
        column-count: 2;
    }
  }