.container{
    margin-top: 3vh;
    display: block;
    margin-bottom: 3vh;
}

#day_form, #time_form{
    display: grid;
    align-items: center;
    justify-content: center;
}

.sub-container{
    display: grid;
    grid-template-columns: 3;
    margin-bottom: 1vh;
    align-items: center;
    justify-items: center;
    height: 5vh;
    margin-bottom: 2vh;
    column-gap: 3%;
}

    .sub-container button{
        font-size: 2.5rem;
        background-color: white;
        color: #2F70FF;
        /* width: 5vw; */
        background: none;
        border: none;
        font-weight: bold;
        cursor: pointer;
        height: 100%;
        border-radius: 20%;
    }

    #date_range{
        grid-column: 2;
        align-self: center;
        justify-self: center;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.custom-button {
  padding: 10px 20px;
  margin: 5px;
  background-color: #2196F3;
  border: 1px solid none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}

input[type="radio"]:checked + .custom-button {
  background-color: #023299;
  color: white;
  border-color: #023299;
}

input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

@media (min-width: 1250px){
    .sub-container button{
        aspect-ratio: 1 / 1;
        padding: 0.5em;
        display: grid;
        margin-left: 22%;
        margin-right: 22%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@media (max-width: 590px){
    .sub-container button{
        font-size: 1rem;
    }
}

@media (max-width: 400px){
    .sub-container button{
        font-size: 0.7rem;
    }
}

@media (max-width: 350px){
    .sub-container{
        column-gap: 5%;
    }

    .sub-container button{
        font-size: 0.3rem;
    }
}


@media screen and (orientation: landscape) and (max-width: 1024px){
    .sub-container{
        margin-bottom: 10vh;
    }
}