/* ~~ Calendrier ~~ */

.mfp-hide {
  display: none !important; }

.calender { padding-right: 15px; padding-left: 15px; /*background-color: #EDEFF6; margin: 5px;*/ }
.calender .year{ float: left; width: 33.32%; font-size: 28px; font-weight: bold;}
.inactive{ color:#333; }
.calender .active{ color:#56AA22; }
.calender .relative{ position:relative;}
.calender .months{clear: both;}
.calender .month{ margin-top:24px;}
.calender .months ul{ list-style:none; margin:0px; padding:0px;}
.calender .months ul li {width: 8.33%; float: left;}
.calender .months ul li a{ float:left; margin:-1px; padding:0px 15px 0px 0px; color:#333; text-decoration:none; font-size: 18px; font-weight: bold;}
.calender .months ul li a:hover, .months ul li a.active{ color:#56AA22;}
.calender table{ border-collapse:collapse; width: 100%;}
.calender table th{ font-weight:normal; color:#A8A8A8; text-align: center; height: 34px;}
.calender table th.court { display:none !important; }
.calender table th.long { display: !important; }
.calender table td{ border:1px solid #EEEEEE; background-color:#FFF; height: 53px; line-height: 1.6; width: 14.25%; vertical-align: top;}
.calender table td.today{ border:2px solid #56aa22; height:80px;}
.calender table td.padding{ border:none;background: none;}
.calender table td.padding:hover{ border:none; background: none; cursor:default}
.calender table td:hover{ background:#DFDFDF; cursor:pointer;}
.calender table td .day{ position:absolute; color:#000; top: -10px; left:5px;  font-weight:normal; font-size:24.3pt;}
.calender table td .weekday{ position:absolute; color:#BBBBBB; top: -10px; left:5px; font-weight:normal; font-size:24.3pt;}
.calender table td .events{ position:relative; height:0px; padding:30px 0px 0px;}
.calender table td .events li{ float: left; overflow: hidden; border-width: 0px 0px 0px 5px; border-style: none none none solid; height: 10px; margin-left: 1px; font-size: 10px; margin-top: 1px; line-height: 10px; padding: 0px 0px 0px 2px; color: #555;}
.calender table td .events li.typeP,
.calender table td .events li.typeI,
.calender table td .events li.typeT,
.calender table td .events li.type4,
.calender table td .events li.typeE,
.calender table td .events li.type6,
.calender table td .events li.type7{ background: none; }
.typeP{ border-color:#56aa22; background-color:#56aa22; }
.typeI{ border-color:#ff7a00; background-color:#ff7a00; }
.typeT{ border-color:#4395e8; background-color:#4395e8; }
.type4{ border-color:#ffcd1c; background-color:#ffcd1c; }
.typeE{ border-color:#F90505; background-color:#F90505; }
.type6{ border-color:#555555; background-color:#555555; }
.type7{ border-color:#EEEEEE; background-color:#EEEEEE; }
.legend{ padding:10px; position: relative; height: 80px; }
.evenements{ float:left; width:50%; padding:2px; }
/*
.calender table td:hover .events{ display: none; position:absolute; right:20px; top:66px; width:30%; width-max:442px; list-style:none; margin:0px;}
.calender table td:hover .events li{ height:70px; font-weight:normal; border-bottom:0px solid #D6D6D6; text-indent:0; margin-right:20px; background:none; width:90%; max-width:442px; padding:5px;}

.calender table td:hover .events li.typeP{ border-left:5px solid #56aa22; background:#FFF }
.calender table td:hover .events li.typeI{ border-left:5px solid #ff7a00; background:#FFF }
.calender table td:hover .events li.typeT{ border-left:5px solid #4395e8; background:#FFF }
.calender table td:hover .events li.type4{ border-left:5px solid #ffcd1c; background:#FFF }
.calender table td:hover .events li.typeE{ border-left:5px solid #F90505; background:#FFF }
.calender table td:hover .events li.type6{ border-left:5px solid #555555; background:#FFF }
.calender table td:hover .events li.type7{ border-left:5px solid #EEEEEE; background:#FFF }

.calender table td:hover .events li:first-child{ border-top:0px solid #D6D6D6;}
*/
.calender table td .daytitle{ display:none;}
.calender table td .dayFormat{ display:none;}
/*.calender table td:hover .daytitle{ position:absolute; right:20px; top:21px; width:30%; width-max:442px; list-style:none; margin:0px; padding:0px; color:#56aa22; font-size:20px; display:block; font-weight:normal;}*/
.white-popup {
  position: relative;
  background: #FFF;
  padding: 10px;
  width: 100%;
  margin: 15px auto;
  border: 1px #000 solid;
}
#popup_calendrier .relative{ display:none;}
#popup_calendrier .dayFormat{ display:none;}
#popup_calendrier .daytitle{ right:20px; top:21px; max-width:442px; list-style:none; margin:0px; margin-bottom:10px; padding:0px; color:#56aa22; font-size:20px; display:block; font-weight:normal;}
#popup_calendrier .events{ list-style:none; margin:0px; padding: 0px !important;}
#popup_calendrier .events li{ font-weight:normal;  text-indent:0; background:none;padding:5px; margin-bottom: 1px;}
#popup_calendrier .events li.typeP{ border-left:5px solid #56aa22; background:#FFF }
#popup_calendrier .events li.typeI{ border-left:5px solid #ff7a00; background:#FFF }
#popup_calendrier .events li.typeT{ border-left:5px solid #4395e8; background:#FFF }
#popup_calendrier .events li.type4{ border-left:5px solid #ffcd1c; background:#FFF }
#popup_calendrier .events li.typeE{ border-left:5px solid #F90505; background:#FFF }
#popup_calendrier .events li.type6{ border-left:5px solid #555555; background:#FFF }
#popup_calendrier .events li.type7{ border-left:5px solid #EEEEEE; background:#FFF }
#popup_calendrier .events li:first-child{ border-top:0px solid #D6D6D6;}
#popup_calendrier .events li div.code{ float: left; color: #FFF !important; font-size: smaller !important; padding: 0px 5px; margin-right: 5px; background-color: #555; margin-top: 2px; }
#popup_calendrier .events li div.name{ font-weight:bold; }
#popup_calendrier .events li div.titre{ clear: both; padding-left: 15px; color: #333; }
#classeName { font-weight: normal !important; padding: 0; margin: 0; color: #56AA22; font-size: 18px; }

@media screen and (min-width: 200px) and (max-width: 640px) {
  .calender table th.court { display:table-cell !important; }
  .calender table th.long { display:none !important; }
  .legend{ font-size: 12px }
  .calender .months ul li a{ font-size: 14px; }
  .calender table td .day{ top: -6px; font-size:18pt;}
  .calender table td .weekday{ top: -6px; font-size:18pt;}
}

@media screen and (min-width: 640px) {
  .calender table th.court { display:none !important; }
  .calender table th.long { display:table-cell !important; }
  .legend{ font-size: 14px }
  .calender .months ul li a{ font-size: 18px; }
  .calender table td .day{ top: -10px; font-size:24.3pt;}
  .calender table td .weekday{ top: -10px; font-size:24.3pt;}
}