::-webkit-scrollbar {
  display: none;
}

body {
  background-color: rgb(205, 202, 218);
}

.phone {
  margin-left: 10px;
}

/* styling bar */
.styling{
  margin-top: 0.15rem;
  margin-bottom: 1.25rem;
  margin-left: 5px;
  margin-right: 5px;
  display: flex;
  justify-content: flex-start;
  gap: 0.2rem;
  color: white;
  overflow-x: auto;
  overflow-y: none;
  scrollbar-color: rgb(100, 100, 100, 0) rgb(59, 59, 59, 0);
  scrollbar-width: thin;
  outline: none;
  border: none;
  transition: scrollbar-color 0.15s;
}

.styling:hover {
  scrollbar-color: rgb(100, 100, 100, 1) rgb(59, 59, 59, 1);
  scrollbar-width: thin;
  transition: scrollbar-color 0.2s;
}

@media screen and (min-width: var(--width)) {
  .styling {
      justify-content: flex-start;
  }
}

.styling span.style{
  background-color: rgb(102, 107, 110);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  border-radius: 5px;
}

.styling span.style .style-desc{
  text-align:center;
  font-weight:bold;
  margin-bottom:0.07rem;
  margin-top:0;
  white-space: nowrap;
}

.styling span.style input, .picture-prompt input{
  margin-left:0;
  margin-right:0;
  accent-color: #06c;
  outline: none;
  color-scheme: dark;
}

.styling span.style input:not([type="radio"]):not([type="checkbox"]):not([type="time"]) {
  max-width: 40px;
}

.styling span.style input:where([type="time"]) {
  width: fit-content;
}

.styling span.style-type {
  white-space: nowrap;
}

/* picture prompt */

.picture-prompt {
  background-color: rgb(102, 107, 110);
  /*position*/
  position: absolute;
  top: 15%;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
  z-index: 999;
  /*size*/
  width: 250px;
  border-radius: 8px;
  /*display*/
  display: flex;
  flex-direction: column;
  align-items: center;
  /*style*/
  padding: 10px;
  color: white;
  /* shadow */
  box-shadow: 0 0 20px 5px black;
}

.picture-prompt[data-open = "true"] {
  top: 15%;
  transition: top 0.5s;
}

.picture-prompt[data-open = "false"] {
  top: -150%;
  transition: top 0.5s;
}

.picture-prompt h2, .picture-prompt p {
  text-align: center;
}

.picture-prompt span {
  text-align: center;
  max-width: 100%;
}

.picture-prompt span#picture-prompt-disclaimer {
  font-size: 12px;
}

.picture-prompt span[class="material-icons-outlined"] {
  font-size: 15px;
}

.picture-prompt a {
  color: white;
}

.picture-prompt button {
  margin: 10px 5px;
  margin-top: 15px;
  border: none;
  outline: none;
  color: white;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.5s;
}

.picture-prompt button#picture-prompt-confirm {
  background-color: rgb(0, 128, 255);
}

.picture-prompt button#picture-prompt-cancel {
  background-color: rgb(232, 52, 52);
}

.picture-prompt button#picture-prompt-confirm:hover {
  background-color: rgb(2, 108, 213);
  transition: background 0.3s;
}

.picture-prompt button#picture-prompt-cancel:hover {
  background-color: rgb(189, 44, 44);
  transition: background 0.3s;
}

/*text area adder and external links*/
.text-area-adder, .external-links, #safari-warning {
  font-family: "League Spartan";
  margin-left: 10px;
}

#safari-warning {
  margin-top: 25px;
  color:red;
  -webkit-text-stroke: 0.3px black;
  font-weight: bold;
}

.text-area-adder {
  margin-top: 1rem;
}

.external-links {
  margin-top: 0.5rem;
}

.text-area-adder button, .external-links a{
  border-radius:3.2px;
  padding: 4px 8px;
  background-color: transparent/*rgb(205, 214, 221)*/;
  border: 2px solid #251605;
  color: black;
  font-size: 2ch;
  font-weight: 500;
  transition: background 0.2s, border-radius 0.2s, scale 0.2s;
  text-decoration: none;
  cursor: pointer;
  box-sizing: content-box;
  font-family: "League Spartan";

}

.text-area-adder button:hover, .external-links a:hover{
  border-radius: 0.35rem;
  background-color: rgb(164, 171, 176);
  transition: border-radius 0.2s, background 0.2s, scale 0.2s;
}

.text-area-adder button:active, .external-links a:active{
  transition: scale 0.2s;
  scale: 0.9;
}

.text-area-adder p, .external-links p {
  margin: 0;
  margin-bottom: 5px;
  font-weight: bold;
  font-family: "League Spartan";
  font-size: 2.3ch;
}