.calendar-container{
    margin-top: 20px;
}

.calendar{
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.calendar-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.calendar-header button{
    background: #2c5364;
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    width: 90px;
    height: 40px;
    cursor: pointer;
}

.calendar-days{
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 5px;
}

.day{
    padding: 10px;
    text-align: center;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
}

.day:hover{
    background: #38ef7d;
    color: white;
}

.day.selected{
    background: #11998e;
    color: white;
    transform: scale(1.1);
}

.day.today{
    border: 2px solid #11998e;
}

#picker_time{
    display: grid;
    grid-template-rows: 0.3fr 0.3fr 0.5fr;
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas: 
    "header header header header header"
    "p p p p p"
    "timecon1 timecon2 timecon3 timecon4 timecon5";
    gap: 5px;

    h3{
        grid-area: header;
    }

    p{
        grid-area: p;
    }

    .timecon1{
        grid-area: timecon1;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);

        select{
            margin-top: 10px;
            width: 100%;
            padding: 5px;
            border: 1px solid #ccc;

            &:hover{
                border-color: #11998e;
                cursor: pointer;
            }
        }
    }
    
    .timecon2{
        grid-area: timecon2;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);

            select{
                margin-top: 10px;
                width: 100%;
                padding: 5px;
                border: 1px solid #ccc;
    
                &:hover{
                    border-color: #11998e;
                    cursor: pointer;
                }
            }
    }
    
    .timecon3{
        grid-area: timecon3;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);

            select{
                margin-top: 10px;
                width: 100%;
                padding: 5px;
                border: 1px solid #ccc;
    
                &:hover{
                    border-color: #11998e;
                    cursor: pointer;
                }
            }
    }
    
    .timecon4{
        grid-area: timecon4;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);

            select{
                margin-top: 10px;
                width: 100%;
                padding: 5px;
                border: 1px solid #ccc;
    
                &:hover{
                    border-color: #11998e;
                    cursor: pointer;
                }
            }
    }
    
    .timecon5{
        grid-area: timecon5;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);

            select{
                margin-top: 10px;
                width: 100%;
                padding: 5px;
                border: 1px solid #ccc;
    
                &:hover{
                    border-color: #11998e;
                    cursor: pointer;
                }
            }
    }
}

/*mobile*/
@media(max-width: 768px){
    .calendar-header button{
        width: 40px;
    }

    .calendar-header{
        font-size: 13px;
    }

    .calendar{
        font-size: 12px;
    }

    .calendar-days{
        grid-template-columns: repeat(7,12%);
    }

    #picker_time {
        display: flex;
        flex-direction: column;
    }
}