/*
    personalitzacio del calendari
*/

    body.principal {
        margin-top: 40px;
        margin-bottom: auto;
        height: auto;  /* 2024px; 1400px; */
        text-align: center;
        font-size: 14px;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        color: #595959;
        background-color: #F5F5F5 !important;
    }


    #calenblok {
                 /* background-color: #F5F5F5; */
                 width: auto;
                 height: auto; /* < % =iHcalen+174 % >px; */
                 font-size: 0.8em;
                 display: flex;
                 flex-direction: column;
                 margin: auto 16px auto 16px;
                  /* #F5F5F5;  display: inline-block; margin-left: 2px; margin-right: 2px; */
    }


    #calendar {
        /* font-size: 11px;
        width: 80%;   < %=iWcalen %>px;
        max-width: 1100px;
        margin: 0 auto;
        */
        /*  font-size: 11px; max-width: 732px;  */
        /*  width: < %=iWcalen % >px; */  /* 820px 720px  display:inline-block; vertical-align: top; */
        /*  height: auto;  fit-content; auto; */
        /*  height: < %=iHcalen  px;  1392px; Es important fixar l'alçada perque funcioni l'scroll cap a baix quan dragging un element */
        /*  padding-left: 20px;   vertical-align: top;  */
    }



    #boxpalette {
       border: 1px solid #A3A3A3;
       background-color: #FFFFFF; /*  #F5F5F5; */

       padding-top: 6px;
       padding-bottom: 8px;
       /*  display: table; per centrar */
       margin: 20px 20px 16px 20px; /* per centrar */

       /* position: relative; */
       font-size: 11px;
    }


    #kolorlist {
        font-size: 12px;
        text-align: left;
        padding-left: 2em;
        list-style-type:none;
        line-height:2.5em;
    }

    .itemkol { display: -webkit-inline-flex; display:inline-flex; margin-right: 6px; }


    @media( max-width: 880px ){
        #boxpalette {
           max-width: 600px;
           font-size: 11px;
        }

        #kolorlist {
         font-size: 11px !important;
        }

        .fc-button {
           font-size: 11px !important;
           line-height: 1em !important;
        }
    }

    a.fc-daygrid-day-number {
        color: #272833 !important;
    }

    a.fc-col-header-cell-cushion {
       color: #272833 !important;
    }

    @media( max-width: 659px ){
        #boxpalette {
           max-width: 440px;
           font-size: 11px;
        }
        #kolorlist {
         font-size: 11px !important;
       }
       .fc-button {
           font-size: 10.5px !important;
           line-height: 0.8em !important;
       }
    }

    @media( max-width: 512px ){
        #boxpalette {
           max-width: 360px;
           font-size: 10px;
        }

        #kolorlist {
          font-size: 10px !important;
        }

        .fc-button {
           font-size: 10px !important;
           line-height: 0.8em !important;
        }
    }


    #palettetdia {
        /* display:inline-block;
        position: absolute; top: 1px; left: 23px;
        width:200px; height:300px;
        background-color:#E1EBEE;
        */
        padding-right: 1em;
        margin-top: 6px;
        vertical-align: bottom;

    }

    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
    /* PERSONALIZTACIÓ DE LES VISTES DE CALENDARI                                                */
    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


    /* 2022.03.17  Color de fons per a la casella de diumenge td.fc-daygrid-day.fc-day.fc-day-sun */
    td.fc-daygrid-day.fc-day.fc-day-sun {
        background-color: #EEEEEE;
        font-size: 11px;

    }

    /* No mostraré la informació horaria al llistat d'esdeveniments ListMonth o ListYear*/
    td.fc-list-event-time {
        display: none;
    }

    /* Veure el titol complet dels esdeveniments a la graella del mes*/
    /*
    td.fc-daygrid-day.fc-day a.fc-daygrid-event {
    	white-space: normal; -- nowrap --
    }
    */

/*
    td.fc-daygrid-day.fc-day.fc-day-sun::after {
        padding-left: 1em;
         content:'FESTIU';
    }
*/
    /* Variable per calcular l'alçada del contenidor de la vista de llista anual */
    :root {
        --iy: 0;
    }

    .expand-marge {
       margin-top: 0.5em !important;
    }

    @media( max-width: 712px ){

        td.fc-daygrid-day.fc-day.fc-day-sun {
            font-size: 9px !important;
        }

        /*
        .fc-listYear-view {
            height: calc(2em * var(--iy)) !important;  * 600px !important;  *
        }
        */
        .expand-marge {
           /* margin-top: 80% !important; */
           margin-top: calc(0.25em * var(--iy)) !important;
        }

    }

    @media( max-width: 512px ){

        td.fc-daygrid-day.fc-day.fc-day-sun {
            font-size: 9px !important;
        }
        /*
        .fc-listYear-view {
            height: calc(2em * var(--iy)) !important;  * 600px !important;  *
        }
        */
        .expand-marge {
           /* margin-top: 80% !important; */
           margin-top: calc(0.01em * var(--iy)) !important;
        }

    }

    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
    /* Quadret de color de tipus de dia pel quadre de llegenda       */
    .dv_box {
              display:inline;
              border: 1px solid black; width: 16px; height: 16px;
              margin-right: 4px;
              padding-left:15px;
              padding-right: 0px;
              padding-bottom: 0px;
              padding-top: 0px;
              background-color: red;
    }

    .dv_itemnom { display:inline; margin-right: 4px; margin-top: 3px; }

   /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
   /* POPUP FORM                                                      */

    /* The popup form - hidden by default */
    .form-popup {

      display: none;
      /* position: absolute;  top: 200px;  left: 250px; */
      /* Fem us de la posicio fixed  per preveure casos de de vistes amb scroll
         Posicionament fixat en les preferencies de portlet.
      */

      border: 3px solid #f1f1f1;
      z-index: 9;
    }

    /* Add styles to the form container */
    .form-container {
      max-width: 600px;
      min-width: 300px;
      padding: 10px;
      background-color: white;
      font-size: 12px !important;
    }

    @media( max-width: 962px ){
        .form-popup {
           /* top: 175px; Fem servir bottom dinamicament 23.10.27 */
           left: 190px;
           font-size: 11px;
        }

        div.form-container {
          font-size: 11px !important;
          max-width: 460px !important;
          min-width: 240px;
        }

		div.form-container td div {
          font-size: 11px !important; /* des de 23.06.20 */
        }

        div.form-container td div.esdvlbl {
           padding: 7px 6px 2px 0;
           margin: 5px 0 0 0 !important; /* abans 23.06.20: 5px 0 22px 0; */
        }

        div.form-container td div.esdvdata {
           padding: 7px;
           margin: 5px 0 10px 0 !important; /* abans 23.06.20: 5px 0 22px 0; */
        }
    }

    @media( max-width: 512px ){
        .form-popup {
           /* top: 150px;  Fem servir bottom dinamicament 2023.10.27  */
           left: 100px;
           font-size: 10px;
        }

        div.form-container {
          font-size: 10px;
          max-width: 360px !important;
          min-width: 200px;
        }


        div.form-container td div {
          font-size: 10px !important;
        }

        div.form-container td div.esdvlbl {
           padding: 5px 6px 2px 0;
           margin: 3px 0 0 0 !important; /* abans 23.06.20: 5px 0 22px 0; */
        }

        div.form-container td div.esdvdata {
           padding: 5px;
           margin: 3px 0 10px 0 !important; /* abans 23.06.20: 5px 0 22px 0; */
        }
    }

    /**
    * FORMULARI POPUP D'ESDEVENIMENT
    */

    /* Full-width camps de vista */
    .form-container td div.esdvlbl {
      display:inline;
	  width: auto;
      padding: 10px 6px 2px 0; /* abans 23.06.20: 15px 6px 5px 0; */
      margin: 5px 0 0 0 !important; /* abans 23.06.20: 5px 0 22px 0; */
      border: none;
    }


    /* Full-width camps de vista */
    .form-container td div.esdvdata {
      padding: 8px; /* abans 23.06.20: 15px */
      margin: 2px 0 10px 0 !important; /* abans 23.06.20: 5px 0 22px 0; */
      border: none;
      background: #f1f1f1;
    }


    /* Barra superior del popup */
    .form-container .topbar-clndix {
        display: flex;
        justify-content: flex-end;
    }

    /* Boto de la barra per tancar el popup d'esdeveniment */
    .btn-xsf {
        font-size: 12px;
        padding: 2px 3px 0px;
    }

    /* Prototipus per al botó  tancar finestra */
    .form-container .btnwin {
      background-color: #04AA6D;
      color: white;
      padding: 3px 6px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      width: 80%;
      margin-top:10px;
      margin-bottom:10px;
      opacity: 0.8;
    }


    /* Add some hover effects to buttons */
    .form-container .btnwin:hover, .open-button:hover {
      opacity: 1;
    }

    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
    /* Quadret de color de tipus de dia pel quadre de llegenda       */
    .form-container .dv_kol {
          display:inline-block;
          border: 1px solid black;
          border-radius: 50%;
          width: 12px;
          height: 12px;
          margin-bottom: -2px;
          margin-right: 4px;
          padding-left:0px;
          padding-right: 0px;
          padding-bottom: 0px;
          padding-top: 0px;
          background-color: #f1f1f1;
    }