/* BOX MODEL */
*, *:before, *:after {
    box-sizing:border-box;
    -webkit-user-select: none;
}

/* RESET */
html {font-size:62.5%;}
/*
html {-moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; -o-user-select: none; user-select: none;}
::selection, ::-moz-selection {background: transparent; color:inherit;}
*/
html, body, textarea, figure, label {margin: 0; padding: 0;}
body {background-color:#f5f8f9; color:#333; font-family:"Open Sans", Arial, sans-serif;font-size:14px; font-size:1.4rem; font-weight:300;}
p, ul, ol, dl, blockquote, pre, td, th, label, textarea, caption, details, figure {margin-top:1em; margin-bottom:0; line-height:1.4;}
ul, ol {padding-left: 2em;}
ul.unstyled {list-style: none; padding-left:0;}
em, .italic {font-style: italic;}
strong {font-weight: bold;}
hr {margin:2em 0; border:0; height:1px; background-color:#ccc;}
i, b, h1, .h1-like, h2, .h2-like, h3, .h3-like, h4, .h4-like, h5, .h5-like, h6, .h6-like {font-style: normal; font-weight: normal;}
h1, .h1-like, h2, .h2-like, h3, .h3-like, h4, .h4-like, h5, .h5-like, h6, .h6-like {margin-bottom:1rem;}
p:first-child, ul:first-child, ol:first-child, blockquote:first-child, h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {margin-top:0;}
li p, li ul, li ol {margin-top:0; margin-bottom:0;}
img, table, td, blockquote, code, pre, textarea, input {max-width:100%;}
img {height: auto; vertical-align: middle;}
body > script {display: none !important;}
input[type="submit"] { -webkit-appearance: none; }

/* FONT SIZING */
h1, .h1-like {font-size:30px; font-size:3rem;}
h2, .h2-like {font-size:28px; font-size:2.8rem;}
h3, .h3-like {font-size:24px; font-size:2.4rem;}
h4, .h4-like {font-size:20px; font-size:2rem;}
h5, .h5-like {font-size:18px; font-size:1.8rem;}
h6, .h6-like {font-size:16px; font-size:1.6rem;}
.smaller {font-size:10px; font-size:1rem;}
.small {font-size:13px; font-size:1.3rem;}
.normal {font-size:14px; font-size:1.4rem;}
.big {font-size:16px; font-size:1.6rem;}
.bigger {font-size:18px; font-size:1.8rem;}
.biggest {font-size:20px; font-size:2rem;}

/* LINKS */
a:link, a:visited {text-decoration:none;}
a:hover, a:active, a:focus {}
a:link img, a:visited img {border-style:none;}
a img {border: 0;}
a, .pointage-heure  { -webkit-tap-highlight-color: rgba(0, 0, 0, 0)!important;}

/* LAYOUT */
.inline {display:inline;}
.block {display:block;}
.inbl {display:inline-block;}
.fleft {float:left;}
.fright {float:right;}
img.fleft {margin-right:1em;}
img.fright {margin-left:1em;}
img.fleft, img.fright {margin-bottom:0.5em; margin-top:1em;}
.absolute {position:absolute;}
.relative {position:relative;}
.overflow {overflow:hidden;}

/* ALIGNMENTS */
.center {margin-left:auto; margin-right:auto;}
.align-left {text-align:left;}
.align-right {text-align:right;}
.align-center {text-align:center;}
.align-justify {text-align:justify;}
.align-top {vertical-align:top;}
.align-mid {vertical-align:middle;}
.align-bottom {vertical-align:bottom;}

/* HIDE ELEMENTS */
.hidden {display:none;}

/* WIDTH */
.wrap {max-width:990px; margin-left:auto; margin-right:auto; padding-left:15px; padding-right:15px;}

/* MARGIN & PADDING */
.m0 {margin:0;}
.mtop0 {margin-top:0;}
.mtop5 {margin-top:5px;}
.mtop10 {margin-top:10px;}
.mtop15 {margin-top:15px;}
.mtop20 {margin-top:20px;}
.mtop30 {margin-top:30px;}
.mbottom10 {margin-bottom:10px;}
.p0 {padding:0;}
.p10 {padding:10px;}
.p20 {padding:20px;}
.ptop10 {padding-top:10px;}
.ptop20 {padding-top:20px;}
.pleft10 {padding-left:10px;}
.pleft20 {padding-left:20px;}
.pright10 {padding-right:10px;}
.pright20 {padding-right:20px;}
.pbottom10 {padding-bottom:10px;}
.pbottom20 {padding-bottom:20px;}

/* GRID */
.row {margin-left:-15px; margin-right:-15px;}
.row:after {content:""; display:table; clear:both;}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {padding-left:15px; padding-right:15px; float:left;}
.col-1 {width:8.33333%;}
.col-2 {width:16.6667%;}
.col-3 {width:25%;}
.col-4 {width:33.3333%;}
.col-5 {width:41.6667%;}
.col-6 {width:50%;}
.col-7 {width:58.3333%;}
.col-8 {width:66.6667%;}
.col-9 {width:75%;}
.col-10 {width:83.3333%;}
.col-11 {width:91.6667%;}
.col-12 {width:100%;}

/* BTNs */
.btn {display:inline-block; border: none; outline: none; border-radius:5px; padding:8px 0px; color:#fff; text-align:center; font-size:14px; font-size:1.4rem; width:100%;cursor: pointer;}
.btn-small { font-size: 12px; font-size: 1.2rem; }
.btn-presence {background-color:#D8D6D6;}
.btn-presence-neutral {background-color:#000;}
.btn-presence-yes, .btn-time, .btn-ajout {background-color:#8cc300;}
.btn-time-neutral {background-color:#b2b2b2;}
.btn-presence-no, .btn-back {background-color:#cc0000;}
.btn-time-edit {background-color:#8cc300; position:relative;}
.btn.btn-time-plus, .btn.btn-time-moins {width:30px; background-color:#76a500; font-weight:bold; position:absolute; top:0;}
.btn.btn-time-plus {right:0; border-radius:0 5px 5px 0;}
.btn.btn-time-moins {left:0; border-radius:5px 0 0 5px;}

/* COLORS */
.typo-primary {color:#64c1c9;}
.typo-secondary {color:#e96261;}
.typo-light {color:#999;}

/* LOGIN */
.login {background-color:#64c1c9;}
.box-login {background-color:#fff; box-shadow:0 0 5px #5eb6bd; width:300px; margin:120px auto 0 auto; padding:20px 20px 0 20px; text-align:center;}
.box-login form > * {display:block; width:100%; margin:10px auto; font-family:"Open Sans",Arial,sans-serif; font-weight:300; font-size:14px; font-size:1.4rem;}
input[type="text"], input[type="password"] {border:1px solid #dde0e4; border-radius:5px; padding:9px; color:#848484; -webkit-appearance: none;}
.box-login label {text-align:left; color:#e96261;}
.box-login input[type="submit"] {border:0; border-radius:5px; background-color:#e96261; color:#fff; margin:0; padding:9px; cursor:pointer; -webkit-appearance: none;}
.box-login input[type="submit"]:hover {background-color:#64c1c9;}
a.mdp-oubli {display:inline-block; color:#fff; font-size:12px; font-size:1.2rem; position:relative; bottom:-20px; right:-88px;}
a.mdp-oubli:hover {text-decoration:underline;}

/* POINTAGE */
header {background-color:#fff; border-bottom:1px solid #eceff2; padding:10px 0;}
.head-date, .head-lieu, .head-activite {line-height:1.1;}
.select-wrap { display: inline-block; }
.select-wrap select { border:1px solid #dde0e4; border-radius:5px; padding:10px 20px 10px 5px; color:#333; font-size: 13px; font-size: 1.3rem;}
.head-lieu {color:#b2b2b2;}
.head-login {text-align:right;}
.pointage-tab {background-color:#fff; border:1px solid #eceff2; padding:5px 30px 15px 30px; margin-top:15px; margin-bottom:30px;}
.pointage-child {border:1px solid #eceff2; margin-top:10px;}
.pointage-child:nth-child(odd) .pointage-line,
.pointage-child:nth-child(odd) .pointage-heures
 {background-color:#f5f8f9;}
.pointage-line {padding:9px 0; -webkit-user-select: none;}
.pointage-img {display:inline-block; margin:-9px 0 -9px -15px;}
.pointage-name {margin-top:5px;line-height: 13px;}
.pointage-name > a {color:#333;}
.pointage-detail {padding:15px 0; border-top:1px solid #eceff2}
.pointage-detail li + li {margin-top:20px;}
.pointage-detail li > p {display:inline-block; vertical-align:middle; margin-left:10px;}

.pointage-heures {padding-bottom: 10px;}
.pointage-heures input,
.pointage-heures select {
   font-size: 12px;
   width: 50px;
   padding: 2px 4px;
   border-radius: 0;
   border: solid 1px #adadad;
}

.stats {
   background-color: #fff;
   border: 1px solid #eceff2;
   padding: 15px;
   margin-top: 15px;
}


/* MQs */
@media screen and (min-width: 600px) and (max-width: 767px) {
    .wrap {padding-left:5px; padding-right:5px;}
    .row {margin-left:-5px; margin-right:-5px;}
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {padding-left:5px; padding-right:5px;}
    .pointage-child {margin-top:5px;}
    .pointage-tab {padding:0 10px 15px 10px;}
    .pointage-img {display:block; margin:-5px 0 -5px -5px;}
    .pointage-line {padding:5px 0;}
    .btn {padding:6px; font-size:14px; font-size:1.4rem;}
    .bigger {font-size:14px; font-size:1.4rem;}
    .biggest {font-size:16px; font-size:1.6rem;}
    .h2-like {font-size:20px; font-size:2rem;}
}

@media screen and (max-width:599px) {
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {width:auto; float:none;}
    [class^="col-"] + [class^="col-"] {margin-top:10px;}
    .box-login {margin:20px auto 30px auto; width:290px;}
    .box-login input[type="text"], .box-login input[type="password"], .box-login input[type="submit"] {-webkit-appearance:none;}
    .head-date, .head-lieu, .head-activite, .head-login, .pointage-line > div {text-align:center;}
    .pointage-img {margin-top:5px;}
    .pointage-detail .col-6 + .col-6 {margin-top:30px;}
}

@media screen and (max-width:480px) {
    .pointage-detail img {display:none;}
    .pointage-detail li > p {margin-left:0;}
}

@media screen and (max-width:1024px) {
  .select-wrap { position: relative; }
    .select-wrap select {
        -webkit-appearance: none;
        -moz-appearance: none;

    }


    .select-wrap:after {
        content: "";
        position: absolute;
        right: 10px;
        top: 18px;
        width: 11px;
        height: 7px;
        background: url("../img/select-arrow.png") center center no-repeat;
    }


}

/**
* Featherlight � ultra slim jQuery lightbox
* Version 1.3.4 - http://noelboss.github.io/featherlight/
*
* Copyright 2015, No�l Raoul Bossart (http://www.noelboss.com)
* MIT Licensed.
**/
@media all {
   .featherlight {
      display: none;

      /* dimensions: spanning the background from edge to edge */
      position:fixed;
      top: 0; right: 0; bottom: 0; left: 0;
      z-index: 2147483647; /* z-index needs to be >= elements on the site. */

      /* position: centering content */
      text-align: center;

      /* insures that the ::before pseudo element doesn't force wrap with fixed width content; */
      white-space: nowrap;

      /* styling */
      cursor: pointer;
      background: #333;
      /* IE8 "hack" for nested featherlights */
      background: rgba(0, 0, 0, 0);
   }

   /* support for nested featherlights. Does not work in IE8 (use JS to fix) */
   .featherlight:last-of-type {
      background: rgba(0, 0, 0, 0.8);
   }

   .featherlight:before {
      /* position: trick to center content vertically */
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      margin-right: -0.25em;
   }

   .featherlight .featherlight-content {
      /* make content container for positioned elements (close button) */
      position: relative;

      /* position: centering vertical and horizontal */
      text-align: left;
      vertical-align: middle;
      display: inline-block;

      /* dimensions: cut off images */
      overflow: auto;
      padding: 25px 25px 0;
      border-bottom: 25px solid transparent;

      /* dimensions: handling small or empty content */
      min-width:  30%;

      /* dimensions: handling large content */
      margin-left: 5%;
      margin-right: 5%;
      max-height: 95%;

      /* styling */
      background: #fff;
      cursor: auto;

      /* reset white-space wrapping */
      white-space: normal;
   }

   /* contains the content */
   .featherlight .featherlight-inner {
      /* make sure its visible */
      display: block;
   }

   .featherlight .featherlight-close-icon {
      /* position: centering vertical and horizontal */
      position: absolute;
      z-index: 9999;
      top: 0;
      right: 0;

      /* dimensions: 25px x 25px */
      line-height: 25px;
      width: 25px;

      /* styling */
      cursor: pointer;
      text-align: center;
      font-family: Arial, sans-serif;
      background: #fff; /* Set the background in case it overlaps the content */
      background: rgba(255, 255, 255, 0.3);
      color: #000;
   }


   .featherlight .featherlight-image {
      /* styling */
      width: 100%;
   }


   .featherlight-iframe .featherlight-content {
      /* removed the border for image croping since iframe is edge to edge */
      border-bottom: 0;
      padding: 0;
   }

   .featherlight iframe {
      /* styling */
      border: none;
   }
}

/* handling phones and small screens */
@media only screen and (max-width: 1024px) {
   .featherlight .featherlight-content {
      /* dimensions: maximize lightbox with for small screens */
      margin-left: 10px;
      margin-right: 10px;
      max-height: 98%;

      padding: 10px 10px 0;
      border-bottom: 10px solid transparent;
   }
}