@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Yuji+Mai&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Yuji+Mai&display=swap');

body {
    border-radius: 8px;
    border: 1px solid #FFF;
    padding:8px;

    /* Personaliza a barra de rolagem */
    ::-webkit-scrollbar {
        width: 8px; /* Largura da barra */
        height: 8px; /* Altura da barra horizontal */
    }

    /* Personaliza o fundo da barra de rolagem */
    ::-webkit-scrollbar-track {
        background: #f1f1f1; /* Cor do fundo */
        border-radius: 8px; /* Bordas arredondadas */
    }

    /* Personaliza o "polegar" da barra de rolagem */
    ::-webkit-scrollbar-thumb {
        background: #888; /* Cor do polegar */
        border-radius: 8px; /* Bordas arredondadas */
    }

    table {
        font-family: 'Montserrat';
        font-size: .875rem;
        font-style: normal;
        font-weight: 500;
        line-height: 150%;
        margin-bottom: 0px !important;
    }

    td.day.active {
        background: rgba(201, 170, 87, 1) !important;
        background-color: rgba(201, 170, 87, 1) !important;
        color: rgba(0, 0, 0, 0.77);

        &:hover{
            background: rgba(201, 170, 87, .8) !important;
            color: rgba(0, 0, 0, 0.77);
        }
    }
}

.container {
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(203, 203, 203, 0.20);
    backdrop-filter: blur(24px);
    padding:2.5rem;

    h1{
        color: #FFF !important;
        font-family: 'Cormorant Garamond', sans-serif;
        font-size: 3rem !important;
        font-style: normal;
        font-weight: 500;
        line-height: 120%; /* 57.6px */
    }

    p{
        color: rgba(255, 255, 255, 0.70);
        font-family: Montserrat;
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 400;
        line-height: 150%; /* 27px */
        margin: 0px !important;
    }

    label{
        color: #FFF !important;
        font-family: 'Montserrat';
        font-size: .875rem;
        font-style: normal;
        font-weight: 600;
        line-height: 150%; /* 21px */

    }

    a {
        color:rgba(201, 170, 87, 1) !important;
    }

    .btn-toolbar {
        margin-top: 12px !important;
        margin-bottom: 0px !important;
        padding:4px;
        background: rgba(201, 170, 87, 1);
        display: flex;
        gap: 20px;
    }

    button.btn.btn-large, input[type="submit"].btn.btn-large{
        background: rgba(201, 170, 87, 1);
        color: rgba(0, 0, 0, 0.77);
        font-family: 'Montserrat';
        font-size: .875rem;
        font-style: normal;
        font-weight: 500;
        line-height: 150%;
        border: 1px solid rgba(0, 0, 0, 0.77);
        width:100% !important;
        border-radius: 0 !important;
        
        &:hover{
            background: rgba(201, 170, 87, .8);
        }
    }

    .btn-primary{
        background: rgba(201, 170, 87, 1);
        color: rgba(0, 0, 0, 0.77);
        font-family: 'Montserrat';
        font-size: .875rem;
        font-style: normal;
        font-weight: 500;
        line-height: 150%;
        border: 1px solid rgba(0, 0, 0, 0.77);
        width:100% !important;
        border-radius: 0 !important;
        
        &:hover{
            background: rgba(201, 170, 87, .8);
        }
    }

    .btn {
        background: rgba(201, 170, 87, 1);
        color: rgba(0, 0, 0, 0.77);
        font-family: 'Montserrat';
        font-size: .875rem;
        font-style: normal;
        font-weight: 500;
        line-height: 150%;
        border: 1px solid rgba(0, 0, 0, 0.77);
        width:100% !important;
        border-radius: 0 !important;
        text-align:center;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    input, select, textarea {
        background: transparent !important;
        color: rgba(255, 255, 255, 0.60);
        font-family: 'Montserrat';
        font-size: .875rem;
        font-style: normal;
        font-weight: 500;
        line-height: 150%; /* 27px */
    }

    select option {
        color: rgba(0, 0, 0, 0.77) !important
    }

    .progress{
        background: rgba(255, 255, 255,0.1) !important;

        .bar {
            background: rgba(255, 255, 255,1) !important;
        }
    }

    .dropdown-menu {
        li>a{
            color: rgba(44, 37, 19,1);
        }

        li>a:hover{
            background: rgba(201, 170, 87, .7);
        }
    }

    #customMessage {
        color: rgba(255, 255, 255, 0.70);
        font-family: 'Montserrat';
        font-size: .875rem;
        font-style: normal;
        font-weight: 400;
        line-height: 150%; /* 27px */
        margin-bottom: 1.5rem !important;
    }

   .table-striped th{
        color: rgba(255, 255, 255, 1) !important;
    }

    .roomNotAvailable{
        color: rgba(255, 255, 255, 0.70);
        font-family: 'Montserrat';
        font-size: .875rem;
        font-style: normal;
        font-weight: 400;
        line-height: 150%; /* 27px */
    }
    
    input:focus:required:invalid:focus, textarea:focus, input[type="text"]:focus {
        border-color:  rgba(255, 255, 255, 0.70);
        box-shadow: 0 0 6px rgba(255, 255, 255, 0.70);
        color:  rgba(255, 255, 255, 0.70);
    }

    .table th, .table td {
        border-top:0 !important;
        background: transparent !important;
        color: rgba(255, 255, 255, 1) !important;
    }

    .muted, .roomCount {
        color: rgba(255, 255, 255, 0.70);
    }

    .control-group {
        display: flex;
        flex-direction: column;

        label{
            text-align:left !important;
        }

        .controls{
            margin-left: 0px !important;
        }
    }
}

html{
    ::-webkit-scrollbar {
        width: 8px; /* Largura da barra */
        height: 8px; /* Altura da barra horizontal */
    }

    /* Personaliza o fundo da barra de rolagem */
    ::-webkit-scrollbar-track {
        background: #f1f1f1; /* Cor do fundo */
        border-radius: 8px; /* Bordas arredondadas */
    }

    /* Personaliza o "polegar" da barra de rolagem */
    ::-webkit-scrollbar-thumb {
        background: #888; /* Cor do polegar */
        border-radius: 8px; /* Bordas arredondadas */
    }

}