body{
    font-family:"Rubik",sans-serif !important;
}

button, input, optgroup, select, textarea{
    font-family:"Rubik",sans-serif !important;
}

/*sobreescrito para que no haga el hover el grid (efecto)*/
.jsgrid-selected-row>.jsgrid-cell {
  background:none !important ;
  border-color: #f3f3f3 !important;
}

.jsgrid-alt-row > .jsgrid-cell {
  background:#fff !important ;
}

#seccioHorari{
    display:none;
}

#modalReserves{
    z-index: 9999999999 !important;
}

#selectIdioma{
    font-size: medium;
    color:#6a7a8c;
}

.col-md-3 {
    min-width:300px;
}

.col-md-9 {
    max-width: 65% !important;
}

.card{
    padding: 30px;
}

.btn-anular{
    width: 95px;
    font-size: 1em !important;
}

@media (max-width: 500px) {
    .col-md-9 {
        max-width: 100% !important;
    }
    .col-md-3 {
        max-width: 100% !important;
    }
    
    .datepicker-inline{
        width:auto !important;
    }
    
    #datepicker-inline{
        display: flex;
        justify-content: center;
    }
    
    .leyenda{
        margin: 0 auto !important ;
    }
}

.espaiBtn{
    width:85px;
    margin-top: 25px;
}

.marcatBtn{
    width:85px;
    opacity:0.6 !important;
}

.container-fluid{
    width:75% !important;
}

.btn-info{
    float: right;
}

/*dies que es poden triar*/
.datepicker td, .datepicker th{
    color:#000;    
}

/*dies que es poden triar del més no actual però dies que es veuen*/
.datepicker table tr td.new{
    color:#7e7e7e !important;    
}

/*dies no seleccionables*/
.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover{
    color:#ccc !important;    
}

.leyenda {
    border: 1px solid #ccc;
    margin: 0px 0px 20px 0px;
    font-size: 12px;
    padding: 5px;
    width: 80%;
}

.leyenda .leyend_actual_day{
    background-color: #fde19a;
    background-image: -moz-linear-gradient(to bottom,#fdd49a,#fdf59a);
    background-image: -ms-linear-gradient(to bottom,#fdd49a,#fdf59a);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fdd49a),to(#fdf59a));
    background-image: -webkit-linear-gradient(to bottom,#fdd49a,#fdf59a);
    background-image: -o-linear-gradient(to bottom,#fdd49a,#fdf59a);
    background-image: linear-gradient(to bottom,#fdd49a,#fdf59a);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
    border-color: #fdf59a #fdf59a #fbed50;
    border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    color: #000;
    height: 14px;
    width: 14px;
    display: inline-block;
    margin: 0px 5px;    
}

.leyenda .leyend_selec_day{
    background-color: #04c;
    background-image: -moz-linear-gradient(to bottom,#08c,#04c);
    background-image: -ms-linear-gradient(to bottom,#08c,#04c);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));
    background-image: -webkit-linear-gradient(to bottom,#08c,#04c);
    background-image: -o-linear-gradient(to bottom,#08c,#04c);
    background-image: linear-gradient(to bottom,#08c,#04c);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);
    border-color: #04c #04c #002a80;
    border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
    height: 14px;
    width: 14px;
    display: inline-block;
    margin: 0px 5px;
}

.leyenda .leyend_reservation_day{
    background-color: #83cc74 !important;
    background-image: -moz-linear-gradient(to bottom,#83cc74,#ccffc1) !important;
    background-image: -ms-linear-gradient(to bottom,#83cc74,#ccffc1) !important;
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#83cc74),to(#ccffc1)) !important;
    background-image: -webkit-linear-gradient(to bottom,#83cc74,#ccffc1) !important;
    background-image: -o-linear-gradient(to bottom,#83cc74,#ccffc1) !important;
    background-image: linear-gradient(to bottom,#83cc74,#ccffc1) !important;
    background-repeat: repeat-x !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#83cc74', endColorstr='#ccffc1', GradientType=0);
    border-color: #ccffc1 #ccffc1 #fbed50;
    border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    color: #000;
    height: 14px;
    width: 14px;
    display: inline-block;
    margin: 0px 5px;
}


@media (max-width: 999px) {
    .container-fluid{
        width:99% !important;
    }
}

.datepicker table tr td.select,
.datepicker table tr td.select:hover{
     background-color:#83cc74 !important;
     background-image:-moz-linear-gradient(to bottom,#83cc74,#ccffc1) !important;
     background-image:-ms-linear-gradient(to bottom,#83cc74,#ccffc1) !important;
     background-image:-webkit-gradient(linear,0 0,0 100%,from(#83cc74),to(#ccffc1)) !important;
     background-image:-webkit-linear-gradient(to bottom,#83cc74,#ccffc1) !important;
     background-image:-o-linear-gradient(to bottom,#83cc74,#ccffc1) !important;
     background-image:linear-gradient(to bottom,#83cc74,#ccffc1) !important;
     background-repeat:repeat-x !important;
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#83cc74', endColorstr='#ccffc1', GradientType=0);
     border-color:#ccffc1 #ccffc1 #fbed50;
     border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
     filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);
     color:#000
}

@media only screen and (max-width: 650px) {

    /*Css específic taula en dispositius petits*/
    .jsgrid-grid-header{
        display:none;    
    }
    
    .jsgrid-grid-body{
        border-top: 1px solid #f3f3f3;
        background-color: #f3f3f3;
    }
    
    #basicgrid .jsgrid-row, #basicgrid .jsgrid-alt-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr; /* 4 columnes iguals */
        grid-template-rows: auto auto; /* 2 linies */
        padding-top: 5px;
    }

    /* Cell 3: Extes tota la width*/
    #basicgrid .jsgrid-cell:nth-child(3) {
        grid-column: 1 / -1; /*fer un combinar celas*/
        grid-row: 1; /*reordena a la primera fila*/
    }

    /* Reordenar posicions de les celes */
    #basicgrid .jsgrid-cell:nth-child(1) { grid-column: 1; grid-row: 2; }
    #basicgrid .jsgrid-cell:nth-child(2) { grid-column: 2; grid-row: 2; }
    #basicgrid .jsgrid-cell:nth-child(4) { grid-column: 3; grid-row: 2; }
    #basicgrid .jsgrid-cell:nth-child(5) { grid-column: 4; grid-row: 2; }
    
    .fecha {
        font-size: 0.85em !important;
        width:100% !important;
    }
    
    .activ {
        width:100% !important;
    }
    
    
    .tarifa {
        font-size: 0.85em !important;
        width:100% !important;
        min-width: 90px;
    }
    
    .horaI {
        font-size: 0.85em !important;
        width:100% !important;
    }

    .reserPers {
        font-size: 0.85em !important;
        width:100% !important;
    }
    
    
    .reserPers::before {
        content: "x";
    }
    
    .card-body {
        padding: 1.25rem 0rem !important;
    }
    
    .btn-anular{
        width: 85px;
    }
    
}