@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz@8..144&family=Roboto+Serif:ital,opsz,wght@0,8..144,500;1,8..144,500&family=Roboto+Slab&display=swap');

.author {
  color: #D9D9D9;
  font-size: 10px;
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-align: right;
  margin: 0 1rem 0.2rem 0;
}

#container-app {
  margin: 1rem auto;
  background: #EDEDED;
  border-radius: 20px;
  padding:24px 18px;
  max-width: 500px;
  min-width: 350px;
}

#container-password, #container-options {
  background: #FFFFFF;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center; 
}

#container-password {
  border-radius: 10px 10px 0 0;
  height: 40px;
  padding: 17px;
}

#container-options {
  border-radius:  0 0 10px 10px;
  border-top:1px solid #EDEDED;
  padding: 0 0 10px 0;
}

#generated-password {
  color: #181818;
  font-size: 28px;
  font-family: "Roboto Serif", serif;
  font-weight: 500;
  font-style: normal;
}

#buttons button {
  background: #F1F1F1;
  width: 38px;
  height: 34px;
  padding: 7px;
  overflow: hidden;
  margin: 0 0 0 5px;
  transition: width 0.5s, background 0.5s;
  -webkit-transition: width 0.5s, background 0.5s; /* Safari */
}

#buttons button:hover {
  background: #E5E5E5;
}

#buttons button:active {
  background: #B3B3B3;
}

#buttons button.copied {
  background: #F1F5E4;
  width: 92px;
}

.hide { display: none; }
.show { }

input:focus, input[type='range']:focus, button:focus{
  box-shadow: none; /* 去掉 water.css 默认边框 */
}

input:active, input[type='range']:active, button:active{
  transform: none; /* 去掉 water.css 默认点击位移 */
}

input[type="number"] {
  -webkit-appearance: none;
  -moz-appearance: textfiled;
  appearance: none;
}

#length {
  display: flex;
  min-width: 130px;
  margin: 10px;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

#length-number {
  width: 24px;
  height: 26px;
  border-radius: 7px;
  overflow: hidden;
  background: #F3F3F3;
  color: #3A3A3A;
  font-family: "Roboto Serif", serif;
  font-size: 14px;
  text-align: right;
  padding: 0 6px 0;
  margin: 0 7px 0 0;
}

#length-range {
  height: 26px;
  padding: 0;
  border: none;
  margin: 0;
}

input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width:18px;
  height:18px;
  border:1px solid #E4E4E4;
  background:#FFFFFF;
  border-radius:50%;
  box-shadow: none;
}

input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]:active::-webkit-slider-runnable-track,
input[type="range"]:focus::-webkit-slider-runnable-track {
  height: 3px;
  background: #C4C4C4;
  border-radius: 1.5px;
}

input:active,
input[type='range']:active,
input[type='checkbox']:active,
button:active {
  transform: none; /* 去掉 water.css 默认点击位移 */
}

input:focus, input[type='range']:focus, button:focus{
  box-shadow: none; /* 去掉 water.css 默认边框 */
}

#checkboxes {
  display: flex;
  color: #4A4A4A;
  font-size: 11px;
  font-family: "Roboto Flex", sans-serif;
  font-weight: 400;
  font-style: normal;
  align-items: center;
  line-height: 11px;
  min-width: 220px;
  margin: 10px 5px 0 10px;
}

#checkboxes input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  background: #F3F3F3;
}

#checkboxes input[type="checkbox"]:first-child {
  margin: 0 5px 0 0;
}

#checkboxes input[type="checkbox"]:checked {
  background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iI0YzRjNGMyIvPg0KPHBhdGggZD0iTTQgOC45OTk5OEw3LjUzNTUzIDEyLjUzNTVMMTQuNjA1OCA1LjQ2NDQyIiBzdHJva2U9IiMyQTJBMkEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQo8L3N2Zz4NCg==');
  background-repeat: no-repeat;
  background-size: 26px 26px;
}