.gray-background {
  background-color: #F7F7F7;
}
.white-background {
  background-color: #FCFCFC;
}
.tss-background {
  background-color: #FF6A00;
  border-color: #FF6A00;
}
.white-text-link {
  color: #FFFFFF;
}
.white-text-link:hover {
  text-decoration: underline;
  color: #FFFFFF;
}
.social-button, .menu-button {
  border-radius: 5px;
  border-color: #FCFCFC;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 80%;
  background-color: #FCFCFC;
}

.social-button:hover, .menu-button:hover {
  border-color: #909090;
}
.timeInput {
  display: grid;
  grid-template-columns: repeat(7, auto);
  width: 8.5em;
}
.timeInput input::-webkit-outer-spin-button,
.timeInput input::-webkit-inner-spin-button {
  display: none;
  margin: 0;
}
.camera-preview {
  width: 100%;
  padding-bottom: 100%;
  background-size: 50% 50%, 100% 90%;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
/*  height: 0; */
}
/* на xs */
@media (min-width: 0px) {
  .social-button {
    width: 30px;
    height: 30px;
  }
  .menu-button {
    width: 65px;
    height: 65px;
  }
}
/* на sm */
@media (min-width: 576px) {
  .social-button {
    width: 40px;
    height: 40px;
  }
  .menu-button {
    width: 70px;
    height: 70px;
  }
}
/* на md */
@media (min-width: 768px) {
  .social-button {
    width: 45px;
    height: 45px;
  }
  .menu-button {
    width: 75px;
    height: 75px;
  }
}
/* на lg */
@media (min-width: 992px) {
  .social-button {
    width: 50px;
    height: 50px;
  }
  .menu-button {
    width: 85px;
    height: 85px;
  }
}
/* на lx */
@media (min-width: 1200px) {
  .social-button {
    width: 55px;
    height: 55px;
  }
  .menu-button {
    width: 100px;
    height: 100px;
  }
}