.home-container {
  width: 100%;
  display: flex;
  overflow: auto;
  min-height: 100vh;
  align-items: center;
  flex-direction: column;
  background: linear-gradient(to right, #c9ffbf, #ffafbd); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.home-text {
  color: #222222;
  justify-content: center;
}

.header-container{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding: 10px;
}

.home-logo{
  width: 4.5vh;
  height: 4.5vh;
  margin-right: 10px;
  justify-content: center;
}

.home-container01 {
  flex: 0 0 auto;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: flex-start;
  padding-top: var(--dl-space-space-unit);
  justify-content: center;
}
.home-container02 {
  display: flex;
  z-index: 200;
  align-items: flex-start;
  border-width: 0px;
  width: 100%;
  justify-content: center;
}
.home-container03 {
  flex: 0 0 auto;
  padding-right: 10px;
  display: flex;
  margin-top: 25px;
  align-items: flex-start;
  flex-direction: column;
}

.home-text01 {
  color: #222222;
  line-height: 1.425;
  position: relative;
  top: 5;
  min-height: 20px;
  height: 20px;
}

.home-text01 span  {
  min-height: 20px !important; 
  height: 20px !important;
}
.home-container-columns {
  width: 80px;
  height: 490px;
  display: flex;
  align-items: flex-start;
  padding: 0;
  flex-direction: column;
}

.home-text-weekdays {
  align-self: center;
  -webkit-user-select: none; /* Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}
.home-code-embed {
  align-self: center;
}
.home-container11 {
  flex: 0 0 auto;
  width: 100%;
  height: 100px;
  display: inline-block;
  z-index: 0;
  position: absolute;
  margin-top: 25px;
  align-items: flex-start;
}
.home-container-12to22 {
  position: relative;
}
.home-container23 {
  text-align: center;
}
.home-button {
  color: #fafafa;
}
.key{
  display: flex;
  align-items: center;
  justify-content: center;
  margin:0;
  padding:0;
  width:50%;
  height:20px;
}
.selected-box{
  width: 15px;
  height: 15px;
  background-color: #700000;
}
.unselected-box{
  width: 15px;
  height: 15px;
  background-color: #dc3545;
}
.key-text{
  float: left;
  padding-left: 10px;
  vertical-align: top;
  margin: 10%;
  
}

@media screen and (max-width: 750px) {
  .home-container-columns {
    width: 70px;
  }
  .home-text-weekdays{
    font-size: 1.5vw;
  }
  .home-container02{
    justify-content: none;
  }
  
}

@media screen and (max-width: 650px) {
  .home-container-columns {
    width: 55px;
  }
  .home-container02{
    justify-content: none;
  }
  
}

@media screen and (max-width: 550px) {
  .home-container-columns {
    width: 45px;
  }
  .home-container02{
    justify-content: none;
  }
  
}

@media screen and (max-width: 500px) {
  .home-container-columns {
    width: 35px;
  }
  .home-container02{
    justify-content: none;
  }
  
}
@media screen and (max-width: 400px){
  .home-container-columns {
    width: 30px;
  }
  .home-container02{
    justify-content: none;
  }
  
}
@media screen and (max-width: 370px){
  .home-container-columns {
    width: 20px;
  }
  .home-text-weekdays{
    font-size: 1.0vw;
  }
  .home-container02{
    justify-content: none;
  }
  
}