* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

@font-face {
    font-family: "Roboto";
    src: url(resources/fonts/Roboto-Regular.ttf);
}

:root {
    --msys-button-bg-color: #f5f4f4;
    --msys-button-bg-hover-color: gainsboro;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--msys-scrollbar-track);
    padding-left: 2px;
    padding-right: 2px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #d3d3d3;
    border-radius: 4px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #b8b8b8;
    }


.bold {font-weight: bold;}
.italic {font-style: italic;}
.black {color:black;}
.gray {color: gray;}
.right {text-align: right;}

.fg1 {flex-grow: 1; }
.fg2 {flex-grow: 2;}

a {text-decoration:none;}


body {
    font-family: Roboto, Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
}

#layout {
    height: 100vh;
    background-image:url(resources/images/wellnessbg.jpg);
    background-position: center center;
    background-size:cover;
}

#imgSite {
    height: 40px;
}

#imgCompany {
    height: 40px;
}



#main {
    width: 60%;
    margin-left: auto;
    margin-right: auto;  
}

    #main .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        height: 60px;
        background-color: white;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        margin-bottom: 40px;
        box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
        /*box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;*/
        min-width: 880px;
    }


        #main .header .title {
            text-align:center;
        }

        #main .header h1 {
            font-size: 18px;
            color:black;
        }

        #main .header h2 {
            font-size: 16px;
            color: #fa4c11;
        }

    #main .content {
        background-color: white;
        padding: 20px;
        border-radius: 20px;
        height: calc(100vh - 180px);
        box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
        min-width:880px; 
    }

        #main .content h1 {
            font-size: 16px;
            margin-bottom:10px; 
        }

        #main .content h2 {
            font-size: 16px;
            margin-bottom: 10px;
        }

        #main .content p {
            margin-bottom:10px;
            line-height: 1.5em;
            text-align: justify;  
        }

        #main .content .top {
            display:flex;
            justify-content: space-between; 
            margin-bottom:20px; 
        }

        #main .content .area {
            height: calc(100vh - 310px); 
        }

        #main .content .top .title {
            font-size:16px;
        }

            #main .content .top .subtitle {
                font-size: 14px;
                color:gray;
            }

        #main .content .steps {
            display: flex;
            gap: 20px;
            position: relative;
            width: 600px;
        }

            #main .content .steps .line {
                position: absolute;
                background-color: gainsboro;
                height: 4px;
                top: 14px;
                width: 100%;
            }

        #main .content .steps .step {
            padding:6px;
            border-radius:10px;
            color:gray;
            width:140px; 
            display:flex;
            align-items: center;
            align-content: center;  
            background-color:gainsboro;  
            gap:6px;
            z-index:1; 
        }

            #main .content .steps .active {
                background-color: #459db0;
                color:white; 
            }

                #main .content .steps .active .number {
                    color: #459db0;
                }


        #main .content .step .number {
            font-size:16px;
            border-radius:14px;
            color: #989898;
            font-weight: bold;
            width:20px;
            text-align: center;  
            background-color: white;  
         }

        #main .content .cols {
            display:flex;
            gap:30px;
            align-items: stretch;  
        }

        #main .content .categories {
            color:gray;
            border-radius:10px; 
            display:flex;
            flex-direction: column;
            gap:20px;
        }

            #main .content .categories .category {
                background-color: var(--msys-button-bg-color);
                padding: 8px;
                border-radius: 10px;
                color: gray;
            }

                #main .content .categories .category:hover {
                    background-color: gainsboro;  
                }

            #main .content .categories .active {
                background-color: gainsboro;
                color:black;
            }


        #main .content .services {
            display: flex;
            flex-wrap: wrap;
            color: gray;
            gap: 20px;
            align-content: flex-start;
            overflow: auto;
            height: calc(100vh - 310px);
            opacity: 0;
            animation: fadeIn 0.4s ease-in forwards;
        }

            #main .content .services .service {
                padding: 10px;
                border-radius: 10px;
                border-style: solid;
                border-width: 1px;
                border-color: #459db0;
                /*width: 320px;*/
                box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
                cursor: pointer;  
                width: 340px; 
            }

                #main .content .services .service:hover {
                    background-color: #bce3eb;
                }

                    #main .content .services .active {
                        background-color: #bce3eb;
                        opacity: 0;
                        animation: fadeIn 0.2s ease-in forwards;
                    }

                #main .content .services .service .name {
                    margin-bottom: 4px;
                    color:black; 
                }

                #main .content .services .service .description {
                    font-size: 10px; 
                    margin-bottom: 4px; 
                }

                #main .content .services .service .price {
                    max-width: 300px;
                    text-align: right;  
                }

                    #main .content .services .service .price .number {
                        color: black; 
                    }

                #main .content .services .service .time {
                    float:right;  
                    width: fit-content;  
                    font-size:10px; 
                }

                    #main .content .services .service .time img {
                        height: 14px; 
                    }

                    #main .content .services .service .time .number {
                        color: black;
                        margin-right: 2px;

                    }

                    #main .content .services .service .time .unit {
                        color:gray;
                    }
       
        #main .content .selection .field {
            margin-bottom:30px; 
        }

            #main .content .selection .field .input input {
                padding:6px;
                border-style: solid;
                border-radius: 6px; 
                border-color: gainsboro;
                font-size:12px; 
                
            }

        #main .content .selection .label {
            margin-bottom:10px; 
        }

        #main .content .schedule {
            overflow: auto;
            height: calc(100vh - 310px);
            width: 100%; 
        }

        #main .content .week {
            display:flex;
            gap:6px;
            margin-bottom:20px; 
        }

            #main .content .week .name {
                padding: 0px 10px 4px 10px;
                font-size: 14px;
                border-bottom-style: solid;
                border-bottom-width: 4px;
                border-bottom-color: gainsboro;
                color: gainsboro;
            }

                #main .content .week .name:hover {
                    color: black;
                    cursor: pointer;
                }

                #main .content .week .active {
                    color:black;
                    border-bottom-color: #459db0;
                }

        #main .content .days .day {
            padding-left: 20px;
            display:none;
        }

        #main .content .days .active {
            display: block;
            opacity: 0;
            animation: fadeIn 0.4s ease-in forwards;
        }


            #main .content .day .name {
                margin-bottom:10px; 
            }
        
        #main .content .day .hours {
            display:flex;
            flex-wrap: wrap;
            gap:10px 30px;
            padding-left:20px; 
            width:640px; 
        }

            #main .content .day .hours .hourTrue {
                padding: 4px;
                border-radius: 4px;
                border-style: solid;
                border-width: 1px;
                border-color: #459db0;
                box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
                cursor: pointer;
                width: 120px; 
                text-align: center;  
            }

                #main .content .day .hours .hourTrue:hover {
                    background-color: #bce3eb;
                }

            #main .content .day .hours .active {
                background-color: #bce3eb;
                animation: fadeIn 0.2s ease-in forwards;
            }

            #main .content .day .hours .hourFalse {
                padding: 4px;
                border-radius: 4px;
                border-style: solid;
                border-width: 1px;
                border-color: gainsboro;
                background-color: var(--msys-button-bg-color);
                color: gray;
                cursor: not-allowed;
                width: 120px;
                text-align: center;
            }

            #main .content .empty {
                font-size: 14px;
                padding:60px;
            }


        #main .content .bottom {
            display:flex;
            justify-content: space-between;  
            padding:10px;
        }

            #main .content .bottom .message {
                color:red;
                padding-left: 10px;
                padding-right: 10px; 
                vertical-align: central;
                display:inline-block; 
                line-height:30px; 
            }

            #main .content .bottom .buttons {
                display:flex;
                gap:20px;
            }

                #main .content .bottom .buttons .button {
                    padding: 8px;
                    border-radius: 8px;
                    background-color: var(--msys-button-bg-color);
                    color:black; 
                    width:120px;
                    text-align:center;  
                }

                #main .content .bottom .buttons .button:hover {
                    background-color: gainsboro;  
                }

        #main .content .box {
            border-style: solid;
            border-width: 1px;
            border-radius: 10px;
            border-color: gainsboro;
            padding: 20px;
            background-color: white;
            width: 50%;
            opacity: 0;
            animation: fadeIn 0.4s ease-in forwards;
        }

        #main .content .form {
            
        }

        #main .content .form .space {
            height: 20px;
        }


        #main .content .form .legend {
            font-weight: bold;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        #main .content .form .section {
            margin-bottom: 20px;
        }

        #main .content .form .cols {
            display: flex;
            column-gap: 20px;
            flex-wrap: wrap;
        }

        #main .content .form .row {
            display: flex;
            column-gap: 20px;
            flex-wrap: wrap;
        }

        #main .content .form .field {
            margin-bottom: 12px;
        }

        #main .content .form .label {
            margin-bottom: 4px;
            color:#2d2d2d;
        }

        #main .content .form .pair {
            display: flex;
            justify-content: space-between;
        }

        #main .content .form .input {
            margin-bottom: 4px;
        }

            #main .content .form .input span {
                padding: 6px 0px 6px 0px;
                border-style: none;
                border-width: 1px;
                border-color: gainsboro;
                border-radius: 4px;
                font-family: roboto;
                width: 100%;
                /*display: block;*/
                min-height: 30px;
            }


            #main .content .form .input input[type=text],
            #main .content .form .input input[type=date],
            #main .content .form .input input[type=datetime-local],
            #main .content .form .input select {
                padding: 6px;
                border-radius: 4px;
                border-style: solid;
                border-width: 2px;
                border-color: gainsboro;
                resize: none;
                font-family: roboto;
                width: 100%;
                font-size: 12px;
            }

            #main .content .form .input textarea {
                padding: 6px;
                border-style: solid;
                border-width: 1px;
                border-color: gainsboro;
                border-radius: 4px;
                resize: none;
                line-height: 1.4em;
                font-family: roboto;
            }

            #main .content .form .input input:focus {
                border-color: #459db0;
                outline: none;
            }

            #main .content .form .input select:focus {
                border-color: #459db0;
                outline: none;
            }

        #main .content .bggray {
            background-color: var(--msys-button-bg-color);
        }

            #main .content .bggray .label {
                color:gray;
            }

        #main .content .finish {
            padding: 0px 10px 0px 10px;
            opacity: 0;
            animation: fadeIn 0.4s ease-in forwards;
        }

            #main .content .finish .section {
                display:flex;
                gap:20%;
                padding: 0px 20px 0px 20px; 
                margin-bottom:20px; 
                justify-content:center;  
            }

            #main .content .finish p {
                margin-bottom: 10px;
            }

            #main .content .finish .table {
                width: 100%; 
            }

            #main .content .finish .table td {
                padding: 4px;
            }

            #main .content .finish .label {
                color:gray;
            }

            #main .content .finish .whatsapp {
                border-style: solid;
                border-width: 1px;
                border-radius: 10px;
                border-color: gainsboro;
                padding: 20px;
                background-color: white;
                box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
                width: 240px;
            }

                #main .content .finish .whatsapp .number {
                    display:flex;
                    gap:10px;
                    font-size: 14px;
                    align-items: center;
                    justify-content: center;
                }

                #main .content .finish .whatsapp .icon {
                    height: 24px;
                }

            #main .content .finish .gratitude {
                font-size:14px; 
                text-align: center;
                margin-top:10px;
            }



    #main .footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        height: 40px;
        background-color: white;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        margin-top: 40px;
        box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
        color: gray;
        font-size: 12px;
        min-width: 880px;
    }

        #main .footer div {
            display:flex;
            justify-items: center;  
            gap:4px;
        }

        #main .footer img {
            height:14px; 
        }

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}