/* ******************** */
/* Gestion des tooltips */
/* ******************** */
label {
    display: inline-block;
    /*width: 5em;*/
  }

/* ********************* */
/* Affichage du planning */
/* ********************* */
.dateTitle{
    text-align: center;
    font-size: x-large;
    font-weight: bold;
    padding: 10px 20px;
    border-top: medium solid black;
    border-right: medium solid black;
    border-left: medium solid black;
}

.planning {
    width: 100%;
    table-layout: fixed;
    border-right: medium solid black;
    border-left: medium solid black;
    border-bottom: medium solid black;
}

.planning td {
    border-right: thin solid black;
    border-left: thin solid black;
}

.planning .hopperTitle{
    text-align: center;
    font-size: large;
    font-weight: bold;
    padding: 5px 10px;
    border: thin solid black;
}

.planning .timeTitle{
    position: relative;
    text-align: center;
    font-weight: bold;
    width: 75px;
    padding: 5px 5px;
    border: thin solid black;
}

.currentHourBar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: cornsilk;
    
    /* Ceci permet à la barre de ce fondre dans la table */
    box-sizing: border-box; /* ceci inclu la bordure dans le width */
    border-right: medium solid black; /* ceci reprend la bordure de la table */
}

.planning .sliceDefault {
    background-color: lightgrey !important;    /* PLANNING: fermé, normal -> gris clair */
}

.planning .sliceOpened{
    background-color: #00ad00 !important;      /* PLANNING: ouvert, normal -> vert foncé */
}

.planning .sliceOpenedWithHover, .planning .sliceOpenedWithoutHover { 
    background-color: #00ff33 !important;      /* PLANNING: ouvert, sélectionnable -> vert clair */
    cursor: pointer;
}

.planning .sliceOpenedWithHover:hover, .planning .sliceOpenedWithHover:focus{
    background-color: #9999ff !important;      /* PLANNING: ouvert, souris en survol -> bleu clair */
    cursor: pointer;
}

.planning .sliceSelected {
    background-color: #3333ff !important;      /* PLANNING: ouvert, tranche sélectionnée pour prise rdv -> bleu foncé */
}

.planning .sliceClosed {
    background-color: #5f5f5f !important;      /* PLANNING: fermé, spécial -> gris foncé*/
}

.planning .sliceBusy {
    background-color: firebrick !important;    /* PLANNING: ouvert, rdv existant -> rouge foncé*/
}

.planning .sliceBusyOwn {
    background-color: #3333ff !important;      /* PLANNING: ouvert, rdv existant de l'utilisateur connecté -> bleu foncé */
}

.planningNewLink,
.planningEditLink{
    display: block;
    height: 100%;
    width: 100%;
    cursor: pointer; 
}

.planning .sliceDefault, 
.planning .sliceOpened, 
.planning .sliceOpenedWithHover, 
.planning .sliceSelected, 
.planning .sliceBusy, 
.planning .sliceBusyOwn, 
.planning .sliceClosed,
.planningNewLink,
.planningEditLink {
    height: 10px;
}

.planning .sliceDefault, .planning .sliceOpened, .planning .sliceOpenedWithHover, .planning .sliceSelected, .planning .sliceClosed{
    border: thin dotted black;
}

.planning .rdvStart {
    border-top: thin solid black;
}

.planning .rdvSlice {
    border-right: thin solid black;
    border-left: thin solid black;
}

.planning .rdvEnd {
    border-bottom: thin solid black;
}

.planning .centerClosed{
    text-align: center;
    font-size: large;
    font-weight: bold;
    padding: 5px 5px;    
}


/* **************************** */
/* Gestion de la prise d'un RDV */
/* **************************** */

#userResult{
    width:100%;
    border-collapse:collapse;
    border: solid 1px black;
    margin-top: 20px;
}

#userResult div, #userResult a{
    border-left: solid 1px black;
    padding: 0 5px 0 5px;
}

#userSearchHeader, #userSearchHeader div{
    padding: 5px 5px 5px 2px;
    border-bottom: solid 1px black;
    background-color: #cc3333;
    color: white;
    font-weight: bold;
}

.userResults {
    cursor: pointer;
}

.userResults:nth-of-type(2n+1){
    background-color: lightgrey;
}

.userResults:hover div{
    background-color: #9999ff;
}


#varietyName, #superclassName, #newAppointmentForm #nickname, #comment{
    height: 25px;
    max-width: 300px;   /* Pour PC, pour ne pas être trop grand non-plus */
    width: 80%;         /* Pour mobile, histoire de laisser la place pour le vu à droite */
}

#comment {
    height: 100px;
}

#varietyResult, #superclassResult{
    width:100%;
    border-collapse:collapse;
    border: solid 1px black;
    margin-top: 20px;
}

#varietyResult div, #varietyResult a,
#superclassResult div, #superclassResult a{
    border-left: solid 1px black;
    padding: 0 5px 0 5px;
}

#varietySearchHeader, #superclassSearchHeader{
    padding: 5px 5px 5px 2px;
    border-bottom: solid 1px black;
    background-color: #cc3333;
    color: white;
    font-weight: bold;
}

.colSuperclassNb{
    width: 150px;
}

.results:nth-of-type(2n+1){
    background-color: lightgrey;
}

#varietyResult a, #superclassResult a{
    color: black;
}

.results:hover div{
    background-color: #9999ff;
}

#productQuantity, #reservationQty {
    width: 65px;
}

#estimatedTime {
    display: block;
    padding-top: 20px;
    font-style: italic;
}

textarea#comment {
    max-width: unset;
    width: 400px;
    height: 100px;
}

input[name=reservation] {
    margin-top: 8px;
    margin-bottom: 8px;
}

/* Page 2*/

#newAppointmentBtnValidate {
    display: none;
}

#newAppointmentTextSliceSelected {
    display: none;
    padding: 5px 10px;
    background-color: #3333ff;
    color: white;
    vertical-align: middle;
    line-height: 40px;
    margin-bottom: 20px;
    border-radius: 10px;
}

#newAppointmentButtonSubmit {
    display: inline-block;
    line-height: 40px;
    vertical-align: middle;
    height: 40px;
    padding: 5px 10px;
    margin-bottom: 20px;    
}

.newAppointmentWarningInfo {
    display: none;
    background-color: lightgray;
    color: black;
    font-weight: bold;
    vertical-align: middle;
    margin-bottom: 20px;
    padding: 16px;
    border-radius: 10px;
}

#newRdvWarningInfo {
    display: inline-block;
    background-color: lightgray;
    color: black;
    font-weight: bold;
    vertical-align: middle;
    margin-bottom: 20px;
    padding: 16px;
    border-radius: 10px;
}


.newRdvMaxQuantityPerDayInfo {
    display: inline-block;
    background-color: lightgray;
    color: black;
    font-weight: bold;
    vertical-align: middle;
    margin-bottom: 20px;
    padding: 16px;
    border-radius: 10px;
}

.newRdvMaxQuantityPerDayInfo ul{
    margin: 0;
}

.newRdvMaxQuantityPerDayLimited {    
    background-color: firebrick;
    color: white;
}

@media only screen and (min-width: 768px) {
    #estimatedTime {
        display: inline-block;
        padding-top: 0;
        padding-left: 20px;
        padding-bottom: 20px;
    }  
}


/* *************************** */
/* Affichage des prochains RDV */
/* *************************** */
#nextAppointments {
    width: 100%;
    table-layout: fixed;
}

.hopperTitle {
    font-weight: bold;
}

#nextAppointments #emptyHeader,
.nextAppointmentsHeader{
    width: 75px;
}

#nextAppointments th{
    padding: 10px;
    text-align: center;
}

.nextAppointmentsList {
    vertical-align: text-top;
}

.nextAppointmentsRDV {
    margin-bottom: 10px;
}

/* Prochains RDV sur la page d'un USER */
#rdvs{
    width:100%;
    border-collapse:collapse;
    border: solid 1px black;
    margin-top: 20px;
}

#rdvs div, #rdvs a, #rdvs span{
    border-left: solid 1px black;
    padding: 0 5px 0 5px;
}

#rdvs a{
    color: black;
} 

#rdvsHeader, #rdvsHeader a, #rdvsHeader span{
    padding: 5px 5px 5px 2px;
    border-bottom: solid 1px black;
    background-color: #cc3333;
    color: white;
    font-weight: bold;
}

#rdvColumnID {
    min-width: 25px;
}

#rdvColumnDate {
    min-width: 165px;
}

#rdvColumnName {
    min-width: 160px;
}

#rdvColumnPreferedSite {
    min-width: 160px;
}

#rdvColumnSuperclass, #rdvColumnVariety, #rdvColumnClass {
    min-width: 180px;
}

#rdvColumnWeight {
    min-width: 75px;
}

#rdvColumnHopper {
    min-width: 150px;
}

#rdvColumnComment {
    max-width: 50%;
}

#period {
    font-size: 16px;
    text-align: left;
}

.rdvCell{
    display: table-cell;
    vertical-align: middle;
}

.rdvsResults:nth-of-type(2n+1){
    background-color: lightgrey;
}

.rdvsResults:hover div{
    background-color: #9999ff;
}


/* ****************************************************** */
/* Affichage du courant et prochain planning superclasses */
/* ****************************************************** */
#rdvSuperclassPlanning {
    width: 100%;
    table-layout: fixed;
}

#rdvSuperclassPlanning #emptyHeader{
    width: 75px;
}

#rdvSuperclassPlanning th{
    padding: 10px;
    text-align: center;
}

.superclassPlanningList {
    vertical-align: text-top;
    padding-right: 30px;
}

.warningNoProduct {
    font-weight: bold;
    background-color: yellow;
    padding: 10px;
    display: inline-block;
    border-radius: 10px;
}