/* Cadres pour calendriers  - encadré de course */



.pf-regatesbox-date-logo{
    position : relative;
    left:0px;
    top:0px;
    width:80px;
    height:80px;
    background-image: url('../imgs/circle80.png');
}
.pf-regatesbox-date-jrs{
    position : relative;
    left:0px;
    top:0px;
    width:80px;
    height:80px;
    padding-top:14px;
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 24px; color: #000000; text-decoration: none ; line-height: 26px ;font-weight: bold;
    border:0px black solid;
}
.pf-regatesbox-date-mois{
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #000000; text-decoration: none ; line-height: 18px ;font-weight: normal;
}
.pf-regatesbox-date-jrs{
    position : absolute;
    left:0px;
    top:0px;
    width:80px;
    height:80px;
    padding-top:14px;
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 22px; color: #000000; text-decoration: none ; line-height: 24px ;font-weight: bold;
}


/*permet de diminuer la taille de jour dans l'affichage de la date d'une régate*/
.pf-small-txt{
    font-size: 16px; 
    line-height: 18px;
}

.pf-sailboat-mid{
        width:48px; /*300x300*/
        overflow:auto;
        margin:auto;
        position:relative;
        top:0;  left:0; bottom:20px; right:0;
        
}


/*.pf_login_menu{height:32px;} 
.pf_login_menu:before{
	content: '';
	background:url('../imgs/logo_wing64_wh.png');
	background-size:cover;
		position:absolute;
	width:24px;
	height:24px;
	margin-left:-16px;
}*/


/* THEMEs */ 
.pf-theme-bleu { color:#000 !important;  background-color:#F2F8FE !important              }




/* Colors */
.pf-coolblue,.pf-hover-coolblue:hover{color:#fff!important;background-color:#0459BD!important}
.pf-border-coolblue,.pf-hover-border-coolblue:hover{border-color:#0459BD!important}
.pf-bottombar{border-bottom:4px solid; }

.pf-amber,.pf-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
.pf-aqua,.pf-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
.pf-blue,.pf-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
.pf-light-blue,.pf-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
.pf-brown,.pf-hover-brown:hover{color:#fff!important;background-color:#795548!important}
.pf-cyan,.pf-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
.pf-blue-grey,.pf-hover-blue-grey:hover,.pf-blue-gray,.pf-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
.pf-green,.pf-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
.pf-light-green,.pf-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
.pf-indigo,.pf-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
.pf-khaki,.pf-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
.pf-lime,.pf-hover-lime:hover{color:#000!important;background-color:#cddc39!important}
.pf-orange,.pf-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
.pf-deep-orange,.pf-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
.pf-pink,.pf-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
.pf-purple,.pf-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
.pf-deep-purple,.pf-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
.pf-red,.pf-hover-red:hover{color:#fff!important;background-color:#f44336!important}
.pf-sand,.pf-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
.pf-teal,.pf-hover-teal:hover{color:#fff!important;background-color:#009688!important}
.pf-yellow,.pf-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
.pf-white,.pf-hover-white:hover{color:#000!important;background-color:#fff!important}
.pf-black,.pf-hover-black:hover{color:#fff!important;background-color:#000!important}
.pf-grey,.pf-hover-grey:hover,.pf-gray,.pf-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
.pf-light-grey,.pf-hover-light-grey:hover,.pf-light-gray,.pf-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
.pf-dark-grey,.pf-hover-dark-grey:hover,.pf-dark-gray,.pf-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
.pf-pale-red,.pf-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
.pf-pale-green,.pf-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
.pf-pale-yellow,.pf-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
.pf-pale-blue,.pf-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
.pf-text-amber,.pf-hover-text-amber:hover{color:#ffc107!important}
.pf-text-aqua,.pf-hover-text-aqua:hover{color:#00ffff!important}
.pf-text-blue,.pf-hover-text-blue:hover{color:#2196F3!important}
.pf-text-light-blue,.pf-hover-text-light-blue:hover{color:#87CEEB!important}
.pf-text-brown,.pf-hover-text-brown:hover{color:#795548!important}
.pf-text-cyan,.pf-hover-text-cyan:hover{color:#00bcd4!important}
.pf-text-blue-grey,.pf-hover-text-blue-grey:hover,.pf-text-blue-gray,.pf-hover-text-blue-gray:hover{color:#607d8b!important}
.pf-text-green,.pf-hover-text-green:hover{color:#4CAF50!important}
.pf-text-light-green,.pf-hover-text-light-green:hover{color:#8bc34a!important}
.pf-text-indigo,.pf-hover-text-indigo:hover{color:#3f51b5!important}
.pf-text-khaki,.pf-hover-text-khaki:hover{color:#b4aa50!important}
.pf-text-lime,.pf-hover-text-lime:hover{color:#cddc39!important}
.pf-text-orange,.pf-hover-text-orange:hover{color:#ff9800!important}
.pf-text-deep-orange,.pf-hover-text-deep-orange:hover{color:#ff5722!important}
.pf-text-pink,.pf-hover-text-pink:hover{color:#e91e63!important}
.pf-text-purple,.pf-hover-text-purple:hover{color:#9c27b0!important}
.pf-text-deep-purple,.pf-hover-text-deep-purple:hover{color:#673ab7!important}
.pf-text-red,.pf-hover-text-red:hover{color:#f44336!important}
.pf-text-sand,.pf-hover-text-sand:hover{color:#fdf5e6!important}
.pf-text-teal,.pf-hover-text-teal:hover{color:#009688!important}
.pf-text-yellow,.pf-hover-text-yellow:hover{color:#d2be0e!important}
.pf-text-white,.pf-hover-text-white:hover{color:#fff!important}
.pf-text-black,.pf-hover-text-black:hover{color:#000!important}
.pf-text-grey,.pf-hover-text-grey:hover,.pf-text-gray,.pf-hover-text-gray:hover{color:#757575!important}
.pf-text-light-grey,.pf-hover-text-light-grey:hover,.pf-text-light-gray,.pf-hover-text-light-gray:hover{color:#f1f1f1!important}
.pf-text-dark-grey,.pf-hover-text-dark-grey:hover,.pf-text-dark-gray,.pf-hover-text-dark-gray:hover{color:#3a3a3a!important}
.pf-border-amber,.pf-hover-border-amber:hover{border-color:#ffc107!important}
.pf-border-aqua,.pf-hover-border-aqua:hover{border-color:#00ffff!important}
.pf-border-blue,.pf-hover-border-blue:hover{border-color:#2196F3!important}
.pf-border-light-blue,.pf-hover-border-light-blue:hover{border-color:#87CEEB!important}
.pf-border-brown,.pf-hover-border-brown:hover{border-color:#795548!important}
.pf-border-cyan,.pf-hover-border-cyan:hover{border-color:#00bcd4!important}
.pf-border-blue-grey,.pf-hover-border-blue-grey:hover,.pf-border-blue-gray,.pf-hover-border-blue-gray:hover{border-color:#607d8b!important}
.pf-border-green,.pf-hover-border-green:hover{border-color:#4CAF50!important}
.pf-border-light-green,.pf-hover-border-light-green:hover{border-color:#8bc34a!important}
.pf-border-indigo,.pf-hover-border-indigo:hover{border-color:#3f51b5!important}
.pf-border-khaki,.pf-hover-border-khaki:hover{border-color:#f0e68c!important}
.pf-border-lime,.pf-hover-border-lime:hover{border-color:#cddc39!important}
.pf-border-orange,.pf-hover-border-orange:hover{border-color:#ff9800!important}
.pf-border-deep-orange,.pf-hover-border-deep-orange:hover{border-color:#ff5722!important}
.pf-border-pink,.pf-hover-border-pink:hover{border-color:#e91e63!important}
.pf-border-purple,.pf-hover-border-purple:hover{border-color:#9c27b0!important}
.pf-border-deep-purple,.pf-hover-border-deep-purple:hover{border-color:#673ab7!important}
.pf-border-red,.pf-hover-border-red:hover{border-color:#f44336!important}
.pf-border-sand,.pf-hover-border-sand:hover{border-color:#fdf5e6!important}
.pf-border-teal,.pf-hover-border-teal:hover{border-color:#009688!important}
.pf-border-yellow,.pf-hover-border-yellow:hover{border-color:#ffeb3b!important}
.pf-border-white,.pf-hover-border-white:hover{border-color:#fff!important}
.pf-border-black,.pf-hover-border-black:hover{border-color:#000!important}
.pf-border-grey,.pf-hover-border-grey:hover,.pf-border-gray,.pf-hover-border-gray:hover{border-color:#9e9e9e!important}
.pf-border-light-grey,.pf-hover-border-light-grey:hover,.pf-border-light-gray,.pf-hover-border-light-gray:hover{border-color:#f1f1f1!important}
.pf-border-dark-grey,.pf-hover-border-dark-grey:hover,.pf-border-dark-gray,.pf-hover-border-dark-gray:hover{border-color:#616161!important}
.pf-border-pale-red,.pf-hover-border-pale-red:hover{border-color:#ffe7e7!important}.pf-border-pale-green,.pf-hover-border-pale-green:hover{border-color:#e7ffe7!important}
.pf-border-pale-yellow,.pf-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.pf-border-pale-blue,.pf-hover-border-pale-blue:hover{border-color:#e7ffff!important}






/* pc de bureau */
@media (min-width: 1024px) {
    ul{
        display: flex;       /* Aligns items in a row */
        list-style: none;    /* Removes bullet points */
        padding: 0;          /* Removes default indentation */
        gap: 20px;           /* Adds space between items */
        flex-wrap: wrap; /* Allows items to wrap to a new line */
    }
    li{
          /* To show 3 items per row: (100% / 3) = 33.33% */
        flex: 0 0 25%; 
        box-sizing: border-box;
    }
    /* Cadres pour calendriers  - encadré de course */
    .regatesmois{
        font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 28px; color: #616161; text-decoration: none ; line-height: 36px ;font-weight: bold;
        padding-left:60px;
        padding-right:60px;
        padding-top:10px;
        text-align: left;
        overflow-x: auto;
    }
    .pf-regatesbox{
        font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #000000; text-decoration: none ; line-height: 18px ;font-weight: normal;
        border:1px #607d8b solid;
        border-radius: 10px;
        height:180px;
        width:450px;
        box-shadow:0 2px 4px 0 rgba(0,0,0,0.16);
        background-color: #ffffff;
        padding: 10px;
    }

    .pf-regatesbox-container{
        position:relative;
        height:160px;
        width:450px;
        border:0px green solid;
    }
    .pf-regatesbox-titre{
        position : absolute;
        right:0px;
        top:0px;
        width:100%;
        height:100%;
        text-align: left;
        padding-left : 90px; padding-top:10px;
        font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 22px; color: #000000; text-decoration: none ; line-height: 24px ;font-weight: bold;
    }
    .pf-small-titre{ /* utilisé pour diminuer la taille quand long titre*/
        font-size: 16px!important;
    }
    .pf-regatesbox-lieu{
        position : absolute;
        right:0px;
        top:30px;
        width:100%;
        height:100%;
        text-align: left;
        padding-left : 90px; padding-top:10px;
        font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #000000; text-decoration: none ; line-height: 18px ;font-weight: normal;
    }
    .pf-regatesbox-details-btn{
        position : absolute;
        right:40px;
        bottom:10px;
        width:80%;
        height:45px;
        text-align: center;
        font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; color: #ffffff; text-decoration: none ; line-height: 45px ;font-weight: bold;
        background-color:#0459BD ;
        border-radius: 15px;
        border:1px #0459BD  solid;
        cursor: pointer;
    }
    /* filter pour le calendrier */
    .pf-regatesbox-filter-container{
        position:absolute;
        right:0px;
        top:0px;
        width:500px;
        height:45px;
        display: flex;       /* Aligns items in a row */
        gap: 20px;
    }
    .pf-regatesbox-filter-box{
        height:40px;padding-left:30px;padding-right:30px;border-radius: 10px;min-width: 100px;
        border:2px #0459BD  solid;
        font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #0459BD; text-decoration: none ; line-height: 40px ;font-weight: normal;
        background-color:#F2F8FE ;
        cursor: pointer;
    }
    .pf-regatesbox-filter-box-active{
        height:40px;padding-left:30px;padding-right:30px;border-radius: 10px;min-width: 100px;
        border:1px #044997  solid;
        font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #ffffff; text-decoration: none ; line-height: 40px ;font-weight: normal;
        background-color:#0459BD ;
    }

    .pf-paddingtxt{
        padding-left:60px;
        padding-right:60px;
    }

    /* icone de médails affiché lorsqu'il y a des resultas dispo*/
    .pf-result-ico{
        position:absolute;
        right:20px;
        top:0px;
        height:63px;/*w80 x h105*/
        width:48px;
        border:0px red solid;
        background-image: url('../imgs/result.png');
        background-size:cover;
        border-radius: 50px;
    }
    /*
     .wrapper{ display:flex;} .col1 {flex:1; margin-right:5%; } .col2 {flex:2; }
    .wrapper-news{ display:flex;} .newscol1 {flex:1; margin-right:5%;margin-top:-30px; z-index:1;} .newscol2 {flex:1;margin-right:5%; margin-top:-30px; z-index:1; }.newscol3 {flex:1;margin-top:-30px; z-index:1;}
    .wrapper-result{ display:flex; padding-bottom: 5px; } .rescol1 {flex:0;margin-right:2%; border:0px red solid;} .rescol2 {flex:2; border:0px blue solid;}
    .wrapper-archives{ display:flex; padding-bottom: 5px; } 
      .arccol1 {flex:1;margin-right:1%; border:0px red solid;} 
      .arccol2 {flex:1;margin-right:1%; border:0px blue solid;}
      
    */
}

/*tablette */
@media (max-width:1023px) and (min-width:769px){
      ul{
        display: flex;       /* Aligns items in a row */
        list-style: none;    /* Removes bullet points */
        padding: 0;          /* Removes default indentation */
        gap: 20px;           /* Adds space between items */
        overflow-x: auto;
        overflow-y: hidden;
    }

    /* Cadres pour calendriers  - encadré de course */
    .regatesmois{
        font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 28px; color: #616161; text-decoration: none ; line-height: 36px ;font-weight: bold;
        padding-left:10px;
        padding-right:10px;
        padding-top:10px;
        text-align: left;
        border:0px red solid;
        
    }
    .pf-regatesbox{
        font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #000000; text-decoration: none ; line-height: 18px ;font-weight: normal;
        border:1px #607d8b solid;
        border-radius: 10px;
        height:180px;
        width:350px;
        box-shadow:0 2px 4px 0 rgba(0,0,0,0.16);
        background-color: #ffffff;
        padding: 10px;
    }

    .pf-regatesbox-container{
        position:relative;
        height:160px;
        width:350px;
        border:0px green solid;
    }
    .pf-regatesbox-titre{
        position : absolute;
        right:0px;
        top:0px;
        width:100%;
        height:100%;
        text-align: left;
        padding-left : 90px; padding-top:10px;
        font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #000000; text-decoration: none ; line-height: 18px ;font-weight: bold;
    }
 
    .pf-regatesbox-lieu{
        position : absolute;
        right:0px;
        top:30px;
        width:100%;
        height:100%;
        text-align: left;
        padding-left : 90px; padding-top:10px;
        font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; text-decoration: none ; line-height: 16px ;font-weight: normal;
    }
    .pf-regatesbox-details-btn{
        position : absolute;
        right:40px;
        bottom:10px;
        width:80%;
        height:45px;
        text-align: center;
        font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #ffffff; text-decoration: none ; line-height: 45px ;font-weight: bold; 
        background-color:#0459BD ;
        border-radius: 15px;
        border:1px #0459BD  solid;
        cursor: pointer;
    }
    /* filter pour le calendrier */
    .pf-regatesbox-filter-container{
        position:absolute;
        right:0px;
        top:0px;
        width:500px;
        height:45px;
        display: flex;       /* Aligns items in a row */
        gap: 20px;
    }
    .pf-regatesbox-filter-box{
        height:30px;padding-left:30px;padding-right:30px;border-radius: 10px;min-width: 100px;
        border:2px #0459BD  solid;
        font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px; color: #0459BD; text-decoration: none ; line-height: 30px ;font-weight: normal;
        background-color:#F2F8FE ;
        cursor: pointer;
    }
    .pf-regatesbox-filter-box-active{
        height:30px;padding-left:30px;padding-right:30px;border-radius: 10px;min-width: 100px;
        border:1px #044997  solid;
        font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px; color: #ffffff; text-decoration: none ; line-height: 30px ;font-weight: normal;
        background-color:#0459BD ;
    }

    .pf-paddingtxt{
        padding-left:20px;
        padding-right:20px;
    }

     /* icone de médails affiché lorsqu'il y a des resultas dispo*/
    .pf-result-ico{
        position:absolute;
        right:20px;
        top:0px;
        height:42px;/*w80 x h105*/
        width:32px;
        border:0px red solid;
        background-image: url('../imgs/result.png');
        background-size:cover;
        border-radius: 50px;
    }
    /*.wrapper{ display:flex;} .col1 {flex:1; margin-right:5%; } .col2 {flex:2; }
  .wrapper-news{ display:flex;} .newscol1 {flex:1; margin-right:5%;margin-top:-30px; z-index:1;} .newscol2 {flex:1;margin-right:5%; margin-top:-30px; z-index:1; }.newscol3 {flex:1; margin-right:1%;margin-top:-30px; z-index:1;}
  .wrapper-result{ display:flex;  margin-bottom: 5px;} .rescol1 {flex:0;  min-width:80px;margin-right:2%; border:0px red solid;} .rescol2 {flex:1; border:0px blue solid;}
*/
}


/*mobile et petite device*/
@media /*screen and*/ (max-width: 768px) { /*768*/
    ul{
    display:block;       /* Aligns items in a row */
    list-style: none;    /* Removes bullet points */
    padding: 0;          /* Removes default indentation */
    gap: 20px;           /* Adds space between items */
    }
    li {
        margin-bottom: 15px; /* Adds 15px of space below each item */
    }
    /* Cadres pour calendriers  - encadré de course */
    .regatesmois{
        font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 28px; color: #616161; text-decoration: none ; line-height: 36px ;font-weight: bold;
        padding-left:10px;
        padding-right:10px;
        padding-top:10px;
        text-align: left;
    }
    .pf-regatesbox{
        font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #000000; text-decoration: none ; line-height: 18px ;font-weight: normal;
        border:1px #607d8b solid;
        border-radius: 10px;
        height:180px;
        width:100%;
        box-shadow:0 2px 4px 0 rgba(0,0,0,0.16);
        background-color: #ffffff;
        padding: 10px;
    }

    .pf-regatesbox-container{
        position:relative;
        height:160px;
        width:100%;
    }
    .pf-regatesbox-titre{
        position : absolute;
        right:0px;
        top:0px;
        width:100%;
        height:100%;
        text-align: left;
        padding-left : 90px; padding-top:10px;
        font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px; color: #000000; text-decoration: none ; line-height: 18px ;font-weight: bold;
    }
    .pf-regatesbox-lieu{
        position : absolute;
        right:0px;
        top:30px;
        width:100%;
        height:100%;
        text-align: left;
        padding-left : 90px; padding-top:10px;
        font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; text-decoration: none ; line-height: 16px ;font-weight: normal;
    }
    .pf-regatesbox-details-btn{
        position : absolute;
        right:30px;
        bottom:10px;
        width:80%;
        height:45px;
        text-align: center;
        font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #ffffff; text-decoration: none ; line-height: 45px ;font-weight: bold;
        background-color:#0459BD ;
        border-radius: 15px;
        border:1px #0459BD  solid;
        cursor: pointer;
    }   
    /* filter pour le calendrier */
    .pf-regatesbox-filter-container{
        position:absolute;
        right:0px;
        top:0px;
        width:300px;
        height:45px;
        display: flex;       /* Aligns items in a row */
        gap: 20px;
        
        
    }
    .pf-regatesbox-filter-box{
        height:30px;padding-left:10px;padding-right:10px;border-radius: 5px;min-width: 30px;
        border:2px #0459BD  solid;
        font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #0459BD; text-decoration: none ; line-height: 30px ;font-weight: normal;
        background-color:#F2F8FE ;
        cursor: pointer;
    }
    .pf-regatesbox-filter-box-active{
        height:30px;padding-left:10px;padding-right:10px;border-radius: 5px;min-width: 30px;
        border:1px #044997  solid;
        font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; text-decoration: none ; line-height: 30px ;font-weight: normal;
        background-color:#0459BD ;
    }

    .pf-regatesbox-spacer{ /* sert à espacer les boutons de filtre du haut des résultats*/
        position:relative;

    }

    /* icone de médails affiché lorsqu'il y a des resultas dispo*/
    .pf-result-ico{
        position:absolute;
        right:0px;
        top:0px;
        height:42px;/*w80 x h105*/
        width:32px;
        border:0px red solid;
        background-image: url('../imgs/result.png');
        background-size:cover;
        border-radius: 50px;
    }


}