/* --------- SUMMARY ---------
#NORMALIZE
#SOFT RESET
#TYPOGRAPHY
#HIDING
#BROWSER CONSISTENCY
#LAYOUT & POSITIONING
#GRID
#TABLES
#FORMS
#HELPERS
#CUSTOM STYLES
#MEDIA QUERIES
------------------------------- */


/* ==========================================================================
== NORMALIZE ==
========================================================================== */

html {
   font-family: sans-serif;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
}

body { margin: 0; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
   display: block;
}

audio,
canvas,
progress,
video {
   display: inline-block;
   vertical-align: baseline;
}

audio:not([controls]) {
   display: none;
   height: 0;
}

[hidden],
template {
   display: none;
}

a { background-color: transparent; }

a:active,
a:hover {
   outline: 0;
}

abbr[title] { border-bottom: 1px dotted; }

b,
.bold,
strong {
   font-weight: 700;
}

.nobold { font-weight: 400; }

dfn { font-style: italic; }

h1 {
   font-size: 2em;
   margin: 0.67em 0;
}

mark {
   background: #ff0;
   color: #333;
}

small { font-size: 80%; }

sub,
sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
}

sup { top: -0.5em; }

sub { bottom: -0.25em; }

img { border: 0; }

svg:not(:root) { overflow: hidden; }

figure { margin: 1em 40px; }

hr {
   box-sizing: content-box;
   height: 0;
}

pre { overflow: auto; }

code,
kbd,
pre,
samp {
   font-family: monospace, monospace;
   font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
   color: inherit;
   font: inherit;
   margin: 0;
}

button { overflow: visible; }

button,
select {
   text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
   -webkit-appearance: button;
   border: 0;
   cursor: pointer;
}

button[disabled],
html input[disabled] {
   cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
   border: 0;
   padding: 0;
}

input { line-height: normal; }

input[type="checkbox"],
input[type="radio"] {
   box-sizing: border-box;
   padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
   height: auto;
}

input[type="search"] {
   -webkit-appearance: textfield;
   box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
}

fieldset {
   border: 0;
   margin: 0;
   padding: 0;
}

legend {
   border: 0;
   padding: 0;
}

textarea { overflow: auto; }

optgroup { font-weight: bold; }

table {
   border-collapse: collapse;
   border-spacing: 0;
}

td,
th {
   padding: 0;
}


/* ==========================================================================
== SOFT RESET ==
========================================================================== */

html { box-sizing: border-box; }

* { box-sizing: inherit; }

ul,
ol {
   padding-left: 2em;
}

ul.unstyled {
   list-style: none;
   padding-left: 0;
   margin-top: 0;
}

img { vertical-align: middle; }

img:not([src$=".svg"]) { height: auto; }

blockquote,
figure {
   margin-left: 0;
   margin-right: 0;
}



/* ==========================================================================
== TYPOGRAPHY ==
========================================================================== */

html {
   font-size: 62.5%;
   font-size: calc(1em * .625);
}

body {
   font-size: 1.4em;
   background-color: #e5e9ec;
   color: #333;
   font-family: "Open Sans", Arial, sans-serif;
   line-height: 1.5;
}

a {
   color: #333;
   text-decoration: none;
}

.user-fiche-fille a:hover,
.user-fiche-fille a:focus,
.user-fiche-fille a:active,
a:hover,
a:focus,
a:active {
   color: #e96261;
}

.user-fiche-garcon a:hover,
.user-fiche-garcon a:focus,
.user-fiche-garcon a:active {
   color: #14aab5;
}

p,
.p-like,
ul,
ol,
dl,
blockquote,
pre,
td,
th,
textarea,
caption,
details,
figure {
   margin-top: 0.75em;
   margin-bottom: 0;
   line-height: 1.5;
}

h1, .h1-like { font-size: 3.2rem; }
h2, .h2-like { font-size: 2.8rem; }
h3, .h3-like { font-size: 2.4rem; }
h4, .h4-like { font-size: 2rem; }
h5, .h5-like { font-size: 1.8rem; }
h6, .h6-like { font-size: 1.6rem; }

.smaller { font-size: 0.6em; }
.small { font-size: 0.8em; }
.normal { font-size: 1em; }
.big { font-size: 1.1em; }
.bigger { font-size: 1.4em; }
.biggest { font-size: 2em; }
.xbiggest { font-size: 2.4em; }

code,
pre,
samp,
kbd {
   white-space: pre-line;
   white-space: pre-wrap;
   font-family: Consolas, "DejaVu Sans Mono", Courier, monospace;
   line-height: normal;
}

em,
.italic,
address,
cite,
i,
var {
   font-style: italic;
}

.uppercase { text-transform: uppercase; }
.nocase { text-transform: none; }

.strike { text-decoration: line-through; }



/* ==========================================================================
== HIDING ==
========================================================================== */

.hidden { display: none; }

body > script { display: none !important; }

@media (max-width: 1023px) {
   .hidden-small {
      display: none!important;
   }
}

@media (max-width: 1139px) {
   .hidden-med {
      display: none;
   }
}

@media (min-width: 1024px) {
   .hidden-large {
      display: none!important;
   }
}


/* ==========================================================================
== BROWSER CONSISTENCY ==
========================================================================== */

p:first-child,
.p-like:first-child,
ul:first-child,
ol:first-child,
dl:first-child,
blockquote:first-child,
pre:first-child,
h1:first-child,
.h1-like:first-child,
h2:first-child,
.h2-like:first-child,
h3:first-child,
.h3-like:first-child,
h4:first-child,
.h4-like:first-child,
h5:first-child,
.h5-like:first-child,
h6:first-child,
.h6-like:first-child {
   margin-top: 0;
}

li p,
li .p-like,
li ul,
li ol {
   margin-top: 0;
   margin-bottom: 0;
}

img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
video,
svg {
   max-width: 100%;
}

table { margin-bottom: 2rem; }


/* ==========================================================================
== LAYOUT & POSITIONING ==
========================================================================== */

.display-block{
   display: block;
}

.mod,
.bfc {
   overflow: hidden;
}

.clear,
.line,
.row {
   clear: both;
}

.clearfix::after,
.line::after {
   content: "";
   display: table;
   clear: both;
   border-collapse: collapse;
}

.txt-left { text-align: left; }
.txt-right { text-align: right; }
.txt-center { text-align: center; }

.align-left { margin-right: auto; }
.align-right { margin-left: auto; }
.align-center {
   margin-left: auto;
   margin-right: auto;
}

.align-mid { vertical-align: middle; }

.fleft { float: left; }
.fright { float: right; }
img.fleft { margin-right: 0.75em; }
img.fright { margin-left: 0.75em; }
img.fleft,
img.fright {
   margin-bottom: 0.75em;
}

.row {
   display: table;
   table-layout: fixed;
   width: 100%;
}

.row > *,
.col {
   display: table-cell;
   vertical-align: top;
}

.inbl {
   display: inline-block;
   vertical-align: top;
}

[class*="flex-container"],
.flex-container {
   display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
   -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
   -webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;
}

.flex-container-h {
   -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row;
}

.flex-container-v {
   -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
}

.flex-item-fluid {
   -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1;
}

.flex-item-first {
   -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1;
}

.flex-item-medium {
   -webkit-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0;
}

.flex-item-last {
   -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1;
}

.flex-item-center { margin: auto; }

.flex-item-nostretch { -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; }

.justify-around {
   -webkit-justify-content: space-around;
   -ms-flex-pack: distribute;
   justify-content: space-around;
}

.justify-between {
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
}

.flex-nowrap {
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
}


/* ==========================================================================
== GRID ==
========================================================================== */

.wrap {
   max-width: 960px;
   margin-left: auto;
   margin-right: auto;
}

[class*="grid-"] {
   display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
   -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row;
   -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -2rem;
}

[class*="grid-"] > * {
   -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
   width: calc(100% * 1 / 4 - 2rem - .01px);
   margin-left: 2rem;
   vertical-align: top;
}

[class*="grid-2"] > * { width: calc(100% * 1 / 2 - 2rem - .01px); }
[class*="grid-2"] > .flex-item-double { width: calc(100% * 2 / 2 - 2rem - .01px); }

[class*="grid-3"] > * { width: calc(100% * 1 / 3 - 2rem - .01px); }
[class*="grid-3"] > .flex-item-double { width: calc(100% * 2 / 3 - 2rem - .01px); }

[class*="grid-4"] > * { width: calc(100% * 1 / 4 - 2rem - .01px); }
[class*="grid-4"] > .flex-item-double { width: calc(100% * 2 / 4 - 2rem - .01px); }

[class*="grid-5"] > * { width: calc(100% * 1 / 5 - 2rem - .01px); }
[class*="grid-5"] > .flex-item-double { width: calc(100% * 2 / 5 - 2rem - .01px); }

[class*="grid-6"] > * { width: calc(100% * 1 / 6 - 2rem - .01px); }
[class*="grid-6"] > .flex-item-double { width: calc(100% * 2 / 6 - 2rem - .01px); }

[class*="grid-7"] > * { width: calc(100% * 1 / 7 - 2rem - .01px); }
[class*="grid-7"] > .flex-item-double { width: calc(100% * 2 / 7 - 2rem - .01px); }

[class*="grid-8"] > * { width: calc(100% * 1 / 8 - 2rem - .01px); }
[class*="grid-8"] > .flex-item-double { width: calc(100% * 2 / 8 - 2rem - .01px); }

[class*="grid-10"] > * { width: calc(100% * 1 / 10 - 2rem - .01px); }
[class*="grid-10"] > .flex-item-double { width: calc(100% * 2 / 10 - 2rem - .01px); }

[class*="grid-12"] > * { width: calc(100% * 1 / 12 - 2rem - .01px); }
[class*="grid-12"] > .flex-item-double { width: calc(100% * 2 / 12 - 2rem - .01px); }

@media (max-width: 1650px) {
   [class*="grid-4"] > * { width: calc(100% * 1 / 3 - 2rem - 0.01px); }
}

@media (max-width: 1350px) {
   [class*="grid-3"] > * { width: calc(100% * 1 / 2 - 2rem - 0.01px); }
   [class*="grid-4"] > * { width: calc(100% * 1 / 2 - 2rem - 0.01px); }
}

@media (max-width: 767px) {
   [class*="-small-1"] > * { width: calc(100% - 2rem - .01px); }
   [class*="-small-1"] > .flexitem-double { width: calc(100% - 2rem - .01px); }
}

@media (max-width: 640px) {
   [class*="-small-4"] > * { width: calc(100% * 1 / 4 - 2rem - .01px); }
   [class*="-small-4"] > .flexitem-double { width: calc(100% * 1 / 2 - 2rem - .01px); }

   [class*="-small-3"] > * { width: calc(100% * 1 / 3 - 2rem - .01px); }
   [class*="-small-3"] > .flexitem-double { width: calc(100% * 2 / 3 - 2rem - .01px); }

   [class*="-small-2"] > * { width: calc(100% * 1 / 2 - 2rem - .01px); }
   [class*="-small-2"] > .flexitem-double { width: calc(100% - 2rem - .01px); }
}

@media (max-width: 320px) {
   [class*="-tiny-2"] > * { width: calc(100% * 1 / 2 - 2rem - .01px); }
   [class*="-tiny-2"] > .flexitem-double { width: calc(100% - 2rem - .01px); }

   [class*="-tiny-1"] > * { width: calc(100% - 2rem - .01px); }
   [class*="-tiny-1"] > .flexitem-double { width: calc(100% - 2rem - .01px); }
}

.grid-2-1 > *:nth-child(odd) { width: calc(66.66666666666666% - 2rem - .01px); }
.grid-2-1 > *:nth-child(even) { width: calc(33.33333333333333% - 2rem - .01px); }
@media (max-width: 1350px) {
   .grid-2-1 > *:nth-child(n) { width: calc(100% - 2rem - .01px); }
}

.grid-1-2 > *:nth-child(odd) { width: calc(33.33333333333333% - 2rem - .01px); }
.grid-1-2 > *:nth-child(even) { width: calc(66.66666666666666% - 2rem - .01px); }
@media (max-width: 768px) {
   .grid-1-2 > *:nth-child(n) { width: calc(100% - 2rem - .01px); }
}

.grid-3-1 > *:nth-child(odd) { width: calc(75% - 2rem - .01px); }
.grid-3-1 > *:nth-child(even) { width: calc(25% - 2rem - .01px); }
@media (max-width: 768px) {
   .grid-3-1 > *:nth-child(n) { width: calc(100% - 2rem - .01px); }
}

.grid-1-3 > *:nth-child(odd) { width: calc(25% - 2rem - .01px); }
.grid-1-3 > *:nth-child(even) { width: calc(75% - 2rem - .01px); }
@media (max-width: 768px) {
   .grid-1-3 > *:nth-child(n) { width: calc(100% - 2rem - .01px); }
}

.grid-3-2 > *:nth-child(odd) { width: calc(60% - 2rem - .01px); }
.grid-3-2 > *:nth-child(even) { width: calc(40% - 2rem - .01px); }
@media (max-width: 768px) {
   .grid-3-2 > *:nth-child(n) { width: calc(100% - 2rem - .01px); }
}

.grid-2-3 > *:nth-child(odd) { width: calc(40% - 2rem - .01px); }
.grid-2-3 > *:nth-child(even) { width: calc(60% - 2rem - .01px); }
@media (max-width: 768px) {
   .grid-2-3 > *:nth-child(n) { width: calc(100% - 2rem - .01px); }
}

.grid-4-1 > *:nth-child(odd) { width: calc(80% - 2rem - .01px); }
.grid-4-1 > *:nth-child(even) { width: calc(20% - 2rem - .01px); }
@media (max-width: 768px) {
   .grid-4-1 > *:nth-child(n) { width: calc(100% - 2rem - .01px); }
}

.grid-1-4 > *:nth-child(odd) { width: calc(20% - 2rem - .01px); }
.grid-1-4 > *:nth-child(even) { width: calc(80% - 2rem - .01px); }
@media (max-width: 768px) {
   .grid-1-4 > *:nth-child(n) { width: calc(100% - 2rem - .01px); }
}

.pull { margin-right: auto; }
.push { margin-left: auto; }


/* ==========================================================================
== TABLES ==
========================================================================== */

table,
.table {
   width: 100%;
   max-width: 100%;
   table-layout: fixed;
   border-collapse: collapse;
   vertical-align: top;
}
.table-nofull {
   width: auto;
}

.table {
   display: table;
}

table.table-auto {
   table-layout: auto;
}

td,
th {
   vertical-align: top;
   min-width: 2rem;
   cursor: default;
}


.table-normal td,
.table-normal th {
   border: solid 1px #ccc;
   padding: 10px;
   font-size: 18px;
}
.table-normal th{
   text-align: center;
   background-color: #f4f4f4;
}
.table-normal td {
   vertical-align: middle;
   text-align: center;
}

.table-small td,
.table-small th {
   border: solid 1px #ccc;
   padding: 5px;
   font-size: 14px;
}
.table-small th{
   background-color: #f4f4f4;
   font-size: 14px;
}
.table-small th.bg-primary{
   background-color: #e96261;
   color: #fff;
}
.table-small th.bg-secondary{
   background-color: #14aab5;
   color: #fff;
}
.table-small td {
   vertical-align: middle;
}

.table-mini td,
.table-mini th {
   border: solid 1px #ccc;
   padding: 5px;
   font-size: 10px;
}
.table-mini th{
   text-align: center;
   background-color: #f4f4f4;
}
.table-mini td {
   vertical-align: middle;
   text-align: center;
}


.table-contrat td,
.table-contrat th {
   border: solid 1px #ccc;
}
.table-contrat th{
   text-align: center;
   background-color: #f4f4f4;
   padding: 10px;
}
.table-contrat td {
   vertical-align: middle;
   text-align: center;
}

/* ==========================================================================
== FORMS  ==
========================================================================== */

form,
fieldset {
   border: none;
}

input,
button,
select,
label,
.btn {
   vertical-align: middle;
   font-family: inherit;
   font-size: inherit;
}

input[type="radio"],
input[type="checkbox"] {
   line-height: 0;
}

button,
input,
optgroup,
select,
textarea {
   color: #333;
}

label {
   display: inline-block;
   vertical-align: middle;
   cursor: pointer;
}

legend {
   border: 0;
   white-space: normal;
}

textarea {
   min-height: 5em;
   vertical-align: top;
   font-family: inherit;
   font-size: inherit;
   resize: vertical;
}

input,
select,
textarea {
   border: 1px solid #ccc;
   padding: .5rem;
   font-size: 1.3rem;
   color: #777;
}

select {
   -webkit-appearance: menulist-button;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
   display: none;
}

::-webkit-input-placeholder {
   color: #777;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
   color: #777;
}

.btn:focus,
input[type="button"]:focus,
button:focus {
   -webkit-tap-highlight-color: transparent;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

button.unstyled,
input[type="button"].unstyled,
input[type="submit"].unstyled,
input[type="reset"].unstyled {
   padding: 0;
   border: none;
   line-height: 1;
   text-align: left;
   background: none;
   border-radius: 0;
   box-shadow: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

button.unstyled:focus,
input[type="button"].unstyled:focus,
input[type="submit"].unstyled:focus,
input[type="reset"].unstyled:focus {
   box-shadow: none;
   outline: none;
}

input:focus,
select:focus,
textarea:focus,
input.error,
select.error,
textarea.error {
   border-color: #e96261;
}

.field-full { width: 100%; }


/* ==========================================================================
== HELPERS ==
========================================================================== */

.m0 { margin: 0; }
.m10 { margin: 10px; }
.mtop0 { margin-top: 0; }
.mtop5 { margin-top: 5px; }
.mtop10 { margin-top: 10px; }
.mtop20 { margin-top: 20px; }
.mtop40 { margin-top: 40px; }
.mbot5 { margin-bottom: 5px; }
.mr10 { margin-right: 10px; }

.p0 { padding: 0; }
.p5 { padding: 5px; }
.p10 { padding: 10px; }
.ptop0 { padding-top: 0; }
.ptop10 { padding-top: 10px; }

.btn {
   display: inline-block;
   padding: 7px 10px;
   -webkit-transition: all .5s;
   transition: all .5s;
   text-decoration: none;
   font-size: 1.1rem;
   text-transform: uppercase;
}

.btn > .material-icons { font-size: 23px; }

.btn-small {
   padding: 3px 6px;
   font-size: 1rem;
}

.btn-big {
   padding: 8px 20px;
   font-size: 1.4rem;
}

.btn-block {
   width: 100%;
}

.btn-full {
   padding: 15px 20px;
   text-align: center;
   width: 100%;
   font-size: 1.4rem;
}
.btn-full,
.btn-full:hover,
.btn-full:focus,
.btn-full:active{
   color: #fff;
}

.user-fiche-fille .btn,
.user-fiche-fille .fiche-situation-parent,
.btn-primary {
   background-color: #e96261;
   color: #fff;
}
.user-fiche-fille .btn:hover,
.user-fiche-fille .btn:focus,
.user-fiche-fille .btn:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
   background-color: #cb4544;
   color: #fff;
}

.user-fiche-garcon .btn,
.user-fiche-garcon .fiche-situation-parent,
.btn-secondary {
   background-color: #14aab5;
   color: #fff;
}
.user-fiche-garcon .btn:hover,
.user-fiche-garcon .btn:focus,
.user-fiche-garcon .btn:active,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
   background-color: #0d858e;
   color: #fff;
}

.btn-neutral {
   background-color: #8e8e8e;
   color: #fff;
}
.btn-neutral:hover,
.btn-neutral:focus,
.btn-neutral:active {
   background-color: #797878;
   color: #fff;
}

.btn-export {
   background-color: #52a075;
   color: #fff;
}
.btn-export:hover,
.btn-export:focus,
.btn-export:active {
   background-color: #3b835b;
   color: #fff;
}

.btn-error {
   background-color: #b93434;
   color: #fff;
}
.btn-error:hover,
.btn-error:focus,
.btn-error:active {
   background-color: #982727;
   color: #fff;
}

.btn-success {
   background-color: #4faf24;
   color: #fff;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
   background-color: #3c9016;
   color: #fff;
}

.color-primary { color: #e96261; }
.color-primary-dark { color: #9a2727; }
.color-secondary { color: #14aab5; }
.color-secondary-dark { color: #0d858e; }
.color-neutral { color: #ccc; }
.color-light { color: #8e8e8e; }
.color-white { color: #fff; }
.color-black { color: #333; }
.color-success { color: #4faf24; }
.color-warning { color: #ff9b07; }
.color-error { color: #b93434;}

.bg-primary { background-color: #e96261; }
.bg-success { background-color: #4faf24; }
.bg-error { background-color: #b93434; }
.bg-disabled { background-color: #ccc; }
.bg-selected { background-color: #f8afab; }
.bg-preselected { background-color: #b0c0b4; }

.input-disabled:focus{ border-color: #ccc; outline: none; cursor: not-allowed; }


.img-rounded {
   border-radius: 50%;
   border: 1px solid #ccc;
}

label.a_supprimer {
   text-decoration: line-through;
}



.badge {
   display: inline-block;
   padding: .25em .4em;
   font-size: 75%;
   font-weight: 700;
   line-height: 1;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
   border-radius: .25rem;
   transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.badge-success {
   color: #fff;
   background-color: #28a745;
}
.badge-danger {
   color: #fff;
   background-color: #dc3545;
}
.badge-warning {
   color: #212529;
   background-color: #ffc107;
}
.badge-info {
   color: #fff;
   background-color: #17a2b8;
}


/* ==========================================================================
== CUSTOM STYLES ==
========================================================================== */

.material-icons { vertical-align: middle; }

html,
body {
   height: 100%;
}

main,
.sidenav,
.content {
   min-height: 100vh;
}

main.flex-container {
   -webkit-box-align: stretch;-webkit-align-items: stretch;-ms-flex-align: stretch;align-items: stretch;
}


/*-------------------------------------------------------------------
-- LOGIN --
-------------------------------------------------------------------*/

.login-wrap {
   -webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;
   padding: 2rem 0;
}

.login-logo {
   margin-top: 3rem;
   margin-bottom: 3rem;
   text-align: center;
}


/*-------------------------------------------------------------------
-- HEADER --
-------------------------------------------------------------------*/

.header {
   background-color: #fff;
   margin: -2rem -2rem 2rem -2rem;
   padding: 0 2rem;
   border-left: 1px solid #e5e9ec;
}

.header-info {
   font-size: 1.2rem;
   text-transform: uppercase;
   font-weight: 700;
}

.header-icon {
   line-height: 0;
   padding: 1.8rem 1.5rem;
   border-right: 1px solid #e5e9ec;
}

.header-icon:hover,
.searchbox-icon:hover,
.searchbox-submit:hover {
   background-color: #e96261;
   color: #fff;
}

.toggle-nav {display: none;}

.toggle-nav.active {
   background-color: #22262e;
   color: #fff;
}

.searchbox{
   position:relative;
   min-width:55px;
   max-width: 250px;
   height: 60px;
   width:0%;
   overflow:hidden;
   border-left: 1px solid #e5e9ec;
   -webkit-transition: width 1s;
   transition: width 1s;
}

.searchbox-input{
   width:100%;
   line-height: 60px;
   height: 60px;
   overflow: hidden;
   border: 0;
   padding: 0 2rem;
   outline: 0;
}

.searchbox-icon,
.searchbox-submit{
   line-height: 0;
   padding: 1.8rem 1.5rem;
   border-right: 1px solid #e5e9ec;
   background-color: #fff;
   position: absolute;
   top: 0;
   right: 0;
   cursor: pointer;
}

.searchbox-open{
   width:100%;
}


/*-------------------------------------------------------------------
-- NAV PRINCIPALE / SIDEBAR --
-------------------------------------------------------------------*/

.sidenav {
   width: 250px;
   background-color: #22262e;
}

.sidenav .material-icons { margin-right: 1rem; }

.logo {
   display: block;
   text-align: center;
   background-color: #fff;
   padding: 2rem;
}

.sidenav-item {
   display: block;
   padding: 1.2rem;
   color: #fff;
   text-decoration: none;
   border-bottom: 1px solid #14161b;
}

.sidenav-item:focus {
   color: #fff;
}

.sidenav-item:hover,
.sidenav-item.active {
   background-color: #e96261;
   color: #fff;
}

.sidenav-sub {
   display: none;
   background-color: #14161b;
}
.sidenav-sub.active  {
   display: block;
}

.sidenav-sub .sidenav-item {
   padding: .8rem 1.2rem;
   border-top: 1px solid #22262e;
   font-size: 1.3rem;
}

.sidenav-sub .sidenav-item:hover,
.sidenav-sub .sidenav-item.active {
   background-color: #14161b;
   color: #e96261;
}

.sidenav-sub li:first-child .sidenav-item {
   border-top: 0;
}


/*-------------------------------------------------------------------
-- NAV SECONDAIRE DASHBOARD / EDIT  --
-------------------------------------------------------------------*/

/* DEFAULT HORIZONTAL */

.content-nav {
   background-color: #fff;
   margin-bottom: 1rem;
   border-bottom: 3px solid #dbd9d9;
}

.content-nav-item {
   position: relative;
   text-decoration: none;
   font-size: 1.4rem;
   text-transform: uppercase;
   font-weight: 700;
   color: #8e8e8e;
   padding: 1.3rem 3rem;
   border-left: 1px solid #e5e9ec;
}

.content-nav-small .content-nav-item {
   font-size: 1.2rem;
   padding: 1.3rem;
}

.content-nav-item:last-child { border-right: 1px solid #e5e9ec; }

.content-nav-item:hover,
.content-nav-item.active {
   color: #333;
}

.content-nav-item:hover:after,
.content-nav-item.active:after {
   position: absolute;
   width: 100%;
   left: 0;
   bottom: -3px;
   content: "";
   height: 3px;
   background-color: #e96261;
}


/* VERTICAL */

.content-nav.flex-container-v {
   border-bottom: 0;
   margin-top: 2rem;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
   align-self: flex-start;
}

.content-nav.flex-container-v .content-nav-item {
   width: 100%;
   border-right: 3px solid #dbd9d9;
   border-bottom: 1px solid #dbd9d9;
   border-left: 0;
}

.content-nav.flex-container-v .content-nav-item:hover:after,
.content-nav.flex-container-v .content-nav-item.active:after {
   content: none;
}

.content-nav.flex-container-v .content-nav-item:hover,
.content-nav.flex-container-v .content-nav-item.active {
   border-right-color: #e96261;
}



/*-------------------------------------------------------------------
-- GLOBAL / CONTENT --
-------------------------------------------------------------------*/

.content { padding: 2rem; }

.bloc {
   padding: 1.5rem;
   margin-top: 2rem;
   background-color: #fff;
   box-shadow: 1px 1px 3px #ccc;
}
.bloc.mtop0 {
   margin-top: 0;
}

.bloc-primary {
   background-color: #e96261;
   color: #fff;
}

.bloc-secondary {
   background-color: #14aab5;
   color: #fff;
}

[class*="bloc-border"] {
   border-left-style: solid;
   border-left-width:10px;
}
.bloc-border { border-left-color: #ccc; }
.bloc-border-primary { border-left-color: #e96261; }
.bloc-border-secondary { border-left-color: #14aab5; }

.bloc-scroll {
   max-height: 500px;
   overflow: auto;
}

.btn-bloc {
   display: block;
   margin: 1.5rem -1.5rem -1.5rem -1.5rem;
   text-align: right;
}

.bloc-ttl-neutral {
   text-transform: uppercase;
   font-size: 1.1rem;
   color: #8e8e8e;
   margin-bottom: 1.5rem;
}

.zone-txt {
   background-color: #f7f7f7;
   font-size: 1.2rem;
   padding: 1.5rem;
}


/*-------------------------------------------------------------------
-- TITRES --
-------------------------------------------------------------------*/

.content-ttl {
   background-color: #fff;
   margin-bottom: 1rem;
   border-bottom: 3px solid #e96261;
   padding: 1.2rem;
   font-size: 1.4rem;
   text-transform: uppercase;
   font-weight: 700;
   color: #333;
   -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;
}

.content-ttl-small {
   padding: .5rem 0;
   color: #e96261;
}

.user-fiche-sidebar .content-ttl,
.user-fiche-sidebar > :first-child { margin-top: 2rem; }

.content-ttl ~ .content-ttl { margin-top: 3rem; }

.user-fiche-fille .content-ttl { border-bottom-color: #e96261; }
.user-fiche-garcon .content-ttl { border-bottom-color: #14aab5;	}

.content-ttl .material-icons {
   vertical-align: bottom;
   color: #e96261;
   margin-right: .5rem;
}
.content-ttl-btn.ttl-btn-faded .material-icons { color: #e5e9ec; }
.user-fiche-fille .content-ttl .material-icons { color: #e96261; }
.user-fiche-garcon .content-ttl .material-icons { color: #14aab5; }

.user-fiche-detail .content-ttl { padding: .5rem 0; }

.content-ssttl {
   font-size: 1.4rem;
   font-weight: 700;
   text-transform: uppercase;
   margin-top: 2rem;
   margin-bottom: 1rem;
}
.user-fiche-fille .content-ssttl { color: #e96261; }
.user-fiche-garcon .content-ssttl { color: #14aab5;	}

.content-ttl-btn {
   border-left: 1px solid #e5e9ec;
   background-color: transparent;
   color: #e96261;
   font-size: 1.2rem;
   font-weight: normal;
   padding: 1.5rem;
   margin: -1.2rem 0;
}

.content-ttl-btn:last-child {
   margin-right: -1.2rem;
}

.content-ttl-btn:hover {
   background-color: #e96261;
   color: #fff;
}

.content-ttl-btn .material-icons {
   color: #e96261;
   margin: 0;
   line-height: 0;
   vertical-align: middle;
}

.content-ttl-btn:hover .material-icons { color: #fff; }


/*-------------------------------------------------------------------
-- BLOC AUJOURD'HUI --
-------------------------------------------------------------------*/

.bloc-today .flex-container { height: 100%; }

.bloc-today .flex-container > * {
   padding: 0 1.5rem;
   border-left: 1px solid #9a2727;
   line-height: 1.3;
}

.bloc-today .flex-container > .bloc-today-date {
   font-weight: 700;
   text-transform: uppercase;
   line-height: 1.1;
   padding-left: 0;
   border: 0;
}

.bloc-today-ttl {
   display: block;
   margin-bottom: 5px;
   text-transform: uppercase;
   color: #9a2727;
   font-size: 1.1rem;
}


/*-------------------------------------------------------------------
-- BLOC PERIODE EN COURS  --
-------------------------------------------------------------------*/

.bloc-current .flex-container { height: 100%; }

.bloc-current-ttl {
   text-transform: uppercase;
   font-size: 1.1rem;
   color: #075358;
}

.bloc-current-date {
   text-transform: uppercase;
   color: #fff;
   font-weight: 700;
   font-size: 1.8rem;
}

.bloc-current-bar {
   position: relative;
   margin-top: 5px;
   height: 5px;
   background-color: #075358;
}

.current-bar {
   height: 5px;
   background-color: #fff;
   position: absolute;
   top: 0;
   left: 0;
}


/*-------------------------------------------------------------------
-- BLOC ANNIVERSAIRE --
-------------------------------------------------------------------*/

.bloc-birthday {
   position: relative;
   z-index: 1;
}

.bloc-birthday .material-icons { vertical-align: bottom; }

.bloc-birthday .flex-container > * {
   padding: 0 1.5rem;
   border-left: 1px solid #ccc;
}

.bloc-birthday .flex-container > :first-child {
   padding-left: 0;
   border-left: 0;
}

.bloc-birthday-nbr {
   text-transform: uppercase;
   color: #333;
   font-weight: 700;
   line-height: 1.3;
}

.bloc-birthday-lieu { line-height: 1.6; }

.bloc-birthday-ttl {
   display: block;
   margin-bottom: 5px;
   text-transform: uppercase;
   color: #ccc;
   font-size: 1.1rem;
   font-weight: 400;
}

.bloc-birthday-detail {
   display: none;
   position: absolute;
   z-index: -1;
   width: 100%;
   left: 0;
   margin-top: 1.5rem;
   padding: 1.5rem;
   background-color: #fff;
}

.bloc-birthday-photo {
   border-radius: 50%;
   display: inline-block;
   height: 75px;
   overflow: hidden;
   width: 75px;
}
/*
.bloc-birthday img { max-width: 75px; }
*/

.bloc-birthday-detail li + li { margin-top: 1.5rem; }


/*-------------------------------------------------------------------
-- BLOC LISTINGS (REGLEMENTS/INSCRIPTIONS/ABSENCES) --
-------------------------------------------------------------------*/
.table-like {
   display: table;
   width: 100%;
}

.table-like,
ul.table-like { margin-top: 1rem; }

.table-like:first-child { margin-top: 0; }

.table-like li {
   display: table-row;
}

.table-like li.hidden {
   display: none;
}

.table-like li:nth-child(odd) {
   background-color: #f4f4f4;
}

.table-like li > * {
   display: table-cell;
   vertical-align: middle;
   padding: .5rem 1rem;
   margin: .3rem 0;
}

.table-like li input {
      max-width: 100%
}

.table-like-small li > * {
   padding: .4rem .8rem;
   font-size: 1.2rem;
}

.table-like-nobg li:nth-child(odd) {
   background-color: transparent;
}

.table-like li.table-like-head {
   background-color: #14aab5;
   color: #fff;
   font-weight: 700;
   text-transform: uppercase;
}

.table-like li > *:last-child {
   text-align: right;
}

.table-left li > *:last-child {
   text-align: left;
}

.table-like li > input,
.table-like li > input:last-child,
.table-like li > select,
.table-like li > select:last-child,
.table-like li > textarea,
.table-like li > textarea:last-child {
   width: 100%;
   text-align: left;
   padding: .5rem;
}

.li-sep-top {
   border-top: solid 4px #333;
}

.table-like .input-hours {
   padding-left: 0;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-flow: row wrap;
   flex-flow: row wrap;
}
.input-hours > input { width: 40%; }
.input-hours > span { margin: 0 5px; }

@media (max-width: 767px) {
   .table-like li {
      display: block;
      padding: 1rem;
      margin: .5rem 0;
   }
   .table-like li > * {
      display: block;
      width: 100%;
      padding: 0;
   }

   .table-like li > *:last-child {
      text-align: left;
   }
}


/*-------------------------------------------------------------------
-- BLOC EXPORTS --
-------------------------------------------------------------------*/

.bloc-export .row {
   margin: 1rem 0;
}

.bloc-export label {
   width: 120px;
   text-align: right;
   padding-right: 1rem;
   text-transform: uppercase;
   font-size: 1.1rem;
   vertical-align: middle;
}

.bloc-export select {
   padding: .5rem;
   min-width: 200px;
}


/*-------------------------------------------------------------------
-- USERS BLOCS --
-------------------------------------------------------------------*/

.bloc-user {
   background-color: #fff;
   margin-top: 2rem;
   display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
   -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
   -webkit-box-pack: justify;  -webkit-justify-content: space-between;  -ms-flex-pack: justify;  justify-content: space-between;
   box-shadow: 1px 1px 3px #ccc;
}

.bloc-user-header {
   position: relative;
   background-color: #22262e;
   padding: 1rem;
}
.bloc-user-header-bloque {
   background-color: #ae1624;
}
.user-enfant-garcon .bloc-user-header { background-color: #14aab5; }
.user-enfant-fille .bloc-user-header { background-color: #e96261; }

[class*="user-enfant-"] .bloc-user-header { text-align: center; }

.bloc-user-photo {
   display: inline-block;
   width: 75px;
   height: 75px;
   overflow: hidden;
   border-radius: 50%;
   margin-bottom: -5rem;
   margin-top: -.5rem;
   position: relative;
   z-index: 3;
}

.bloc-user-header img {

   max-width: 75px;

}

.bloc-user-infos {
   background-color: #f7f7f7;
   border-bottom: 1px solid #e5e9ec;
   padding: 1rem 1.5rem;
   text-align: right;
   font-size: 1.1rem;
}

.bloc-user-txt {
   padding: 1.5rem;
   font-size: 1.3rem;
   color: #333;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
}

[class*="user-enfant-"] .bloc-user-txt {
   padding-top: 5rem;
   padding-bottom: 1.5rem;
   text-align: center;
   font-size: inherit;
}

.bloc-user-txt .material-icons {
   vertical-align: top;
   font-size: 1.8rem;
   color: #ccc;
   margin-right: .1rem;
}

.bloc-user-txt li {
   margin: .5rem 0;
}

.bloc-user-nav { border-top: 1px solid #e5e9ec; }

.bloc-user-nav a {
   display: block;
   padding: 1rem;
   width: 25%;
   text-align: center;
   color: #777;
   background-color: #f7f7f7;
}

.bloc-user-nav a.error {
   background-color: #b93434;
   color: #fff;
}

.user-nav-3 a { width: 33.3333333%; }
.user-nav-2 a { width: 50%; }
.user-nav-1 a { width: 100%; }

.bloc-user-nav a:hover {
   background-color: #22262e;
   color: #fff;
}

.user-enfant-garcon .bloc-user-nav a:hover { background-color: #14aab5; }
.user-enfant-fille .bloc-user-nav a:hover { background-color: #e96261; }

.bloc-user-nav a + a { border-left: 1px solid #e5e9ec; }

.user-pai {
   position: absolute;
   top: 12px;
   right: 12px;
   color: #fff;
   font-size: 1.2rem;
   font-weight: bold;
}

.user-warning {
   position: absolute;
   top: 12px;
   left: 12px;
   color: #fff;
   font-size: 1.2rem;
   font-weight: bold;
}



/*-------------------------------------------------------------------
-- USERS FICHES  --
-------------------------------------------------------------------*/

.user-fiche-header.flex-container {
   -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;
   -webkit-box-align: start; -webkit-align-items: flex-start;	-ms-flex-align: start; align-items: flex-start;
}

.user-fiche-detail { -webkit-align-self: flex-start;	-ms-flex-item-align: start;	align-self: flex-start; }

.user-fiche-photo img {
   border: 1px solid #22262e;
   max-width: 110px;
}
.user-fiche-fille .user-fiche-photo img { border-color: #e96261; }
.user-fiche-garcon .user-fiche-photo img { border-color: #14aab5; }

.user-fiche-infos {
   -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1;
   padding-left: 1.5rem;
}

.user-fiche-nom {
   font-size: 2.5rem;
   background-color: #22262e;
   padding: .5rem 1.5rem;
   margin-left: -1.5rem;
   color: #fff;
}
.user-fiche-fille .user-fiche-nom { background-color: #e96261; }
.user-fiche-garcon .user-fiche-nom { background-color: #14aab5; }

.user-fiche-fille .user-fiche-age { color: #e96261; }
.user-fiche-garcon .user-fiche-age { color: #14aab5; }

.user-fiche-etat {
   display: inline-block;
   padding: .3rem .8rem;
   font-size: 1.2rem;
   color: #fff;
   text-transform: uppercase;
}

.user-etat-1 { background-color: #b93434; }
.user-etat-2 { background-color: #4faf24; }
.user-etat-8 { background-color: #b93434; }
.user-etat-0 { background-color: #ff0000; }

.user-fiche-coord,
.user-fiche-administratif,
.user-fiche-stat,
.user-btn-edit {
   margin-top: 3rem;
   padding: 2rem;
}

.user-fiche-coord a { color: #e96261; }
.user-fiche-coord a:hover { color: #333; }

.user-fiche-sidebar .bloc-user { margin-top: 1rem; }

.user-fiche-factures,
.user-fiche-reglements,
.user-fiche-annees,
.user-fiche-parents,
.user-fiche-pieces {
   margin-top: 0;
}

.user-fiche-validation {
   margin-top: 3rem;
}

.user-fiche-validation-bg {
   background-color: #f7f7f7;
   padding: 2rem;
}


/*-------------------------------------------------------------------
-- TOOLS  --
-------------------------------------------------------------------*/

.content-tools { margin-top: 2rem; }

.tools-btn {
   padding-right: 1.5rem;
   margin-right: 1.5rem;
   border-right: 1px solid #ccc;
}

.content-search-tags { margin-top: 1.5rem; }

.content-search-tag {
   margin-right: .2rem;
   margin-top: .2rem;
}


/*-------------------------------------------------------------------
-- PAGINATION --
-------------------------------------------------------------------*/

.pagination li {
   display: inline-block;
   vertical-align: middle;
}

.pagination a {
   display: block;
   padding: .5rem;
   background-color: #fff;
   box-shadow: 1px 1px 3px #ccc;
}

.pagination a:hover,
.pagination a:active,
.pagination a:focus,
.pagination a.active {
   background-color: #e96261;
   color: #fff;
}

.pagination .material-icons {
   line-height: 0;
}

.content-grid .pagination { margin-top: 2rem; }



/*-------------------------------------------------------------------
-- MOTEUR --
-------------------------------------------------------------------*/

.content-moteur {
   margin-bottom: 2rem;
}

.content-moteur input,
.content-moteur select {
   width: 100%;
   margin-top: 1.2rem;
}

.content-moteur input[type="checkbox"],
.content-moteur input[type="radio"] {
   width: auto;
   margin: 0 .5rem 0 0;
}

.content-moteur label + label { margin-left: 2rem;

}

.content-moteur button { margin-top: 1.2rem; }

.content-moteur input:focus,
.content-moteur select:focus,
.content-moteur textarea:focus,
.content-moteur input.error {
   border-color: #14aab5;
}

/*-------------------------------------------------------------------
-- POINTAGE --
-------------------------------------------------------------------
.cell{ cursor: pointer;}
.cell-present{ background: green; }
.cell-absent{ background: red; }
.cell-resa{ background: black; }
.cell-active{border: solid 3px #e96261 !important;}

.th-active{ background: #e96261;}

.cell-relative{ border-left: solid 1px #e96261;border-right: solid 1px #e96261;}
.table-resa .tr-active{ border-top: solid 1px #e96261;border-bottom: solid 1px #e96261;}
*/

/*-------------------------------------------------------------------
-- FORM EDITION FICHE --
-------------------------------------------------------------------*/

.edit-step { display: none; }
.edit-step.active { display: block; }


/*-------------------------------------------------------------------
-- DISPONIBILITES --
-------------------------------------------------------------------*/

.table-disponibilites {
   table-layout: fixed;
}

.table-disponibilites li > *:last-child {
   text-align: left;
}

.table-disponibilites-half {
   width: 48%;
   display: inline-block;
}

@media (max-width: 1139px) {
   .table-disponibilites .hidden-med {
      display: none;
   }
}



/*-------------------------------------------------------------------
-- ALERTES / AVERTISSEMENTS --
-------------------------------------------------------------------*/

.alert {
   padding: 1.5rem;
   margin: 2rem 0;
}

.alert-dismissable,
.alert-dismissible {
   padding-right: 1.5rem;
}
.alert-dismissable .close,
.alert-dismissible .close {
   color: inherit;
}


.alert-success {
   color: #fff;
   background-color: #4faf24;
}
.alert-success hr { border-top-color: #3c9016; }
.alert-success .alert-link { color: #fff; }


.alert-info {
   color: #333;
   background-color: #fff;
}
.alert-info hr { border-top-color: #e5e9ec; }
.alert-info .alert-link { color: #e96261; }


.alert-warning {
   color: #fff;
   background-color: #c6800f;
}
.alert-warning hr {	border-top-color: #a56a0b; }
.alert-warning .alert-link { color: #fff; }

.alert-error {
   color: #fff;
   background-color: #b93434;
}
.alert-error hr { border-top-color: #982727; }
.alert-error .alert-link { color: #fff; }

.close {
   float: right;
   font-size: 2rem;
   font-weight: 700;
   line-height: 1;
   color: #000;
   opacity: .5;
}

.close:focus,
.close:hover {
   color: #fff;
   text-decoration: none;
   cursor: pointer;
   opacity: 1;
}

button.close {
   -webkit-appearance: none;
   padding: 0;
   cursor: pointer;
   background: 0 0;
   border: 0;
}

.content .picker {
   width: 250px;
   padding: 0;
   margin: 0;
}

/* ==========================================================================
== CHECK LI ==
========================================================================== */

.check-bloc li.active{background: #B8CEF1;}


/* ==========================================================================
== GRILLE RESA ==
========================================================================== */
.grille{    border-color: #ccc; }
.grille td, .grille th{padding: 5px 0; vertical-align: middle;}
.cell-vide,
.cell-fermeture { background-color: #ccc; text-align: center; }

.cell-resa {
   cursor: pointer;
   font-size: 11px; font-size: 1.1rem;
   color: #999;
   text-align: center;
}


.cell-justification {
   cursor: not-allowed;
   font-size: 11px; font-size: 1.1rem;
   color: #999;
   text-align: center;
}


.cell-resa, .cell-justification.cell-resa-absent-justifie,
.cell-resa, .cell-justification.cell-resa-absent-nonjustifie {
   cursor: pointer;
}


.cell-resa:hover { opacity: 0.8;}
.deja-reserve .cell-resa{cursor: not-allowed; }
.deja-reserve .cell-resa span{display: none;}
.cell-resa i {
   margin-right: 5px;
   font-size: 20px; font-size: 2rem;
   vertical-align: bottom;
}

.cell-resa-ok {
   background-color: #8fc400;
   color: #fff;
}

.cell-resa-ok:hover { background-color: #A6D81E; }

.cell-resa-attente {
   background-color: #cd0000;
   color: #fff;
}

.cell-resa-attente:hover { background-color: #F91212; }


.cell-resa-ajoute { background-color: #00c4a0; color: #fff; }
.cell-resa-present { background-color: #8fc400; color: #fff; }
.cell-resa-absent { background-color: #f98712; color: #fff; }
.cell-resa-absent-justifie { background-color: #e8ff01; color: #6f9801; }
.cell-resa-absent-nonjustifie { background-color: #ff5c01; color: #fff; }
.cell-resa-nonconfirme { background-color: #EEE; color: #000; }
.cell-resa-reserve { background-color: #000; color: #fff; }
.cell-resa-todel { background-color: #666; color: #fff; }


.cell-penalite {
   font-size: 11px; font-size: 1.1rem;
   color: #999;
   text-align: center;
}
.cell-penalite-absent {
   background-color: #cd0000; color: #fff;
}

.cell-mini {width: 50px;}

.legende{display: inline-block; width: 15px; height: 15px; border: solid 1px #999; vertical-align: middle;}
.legende-content{display: none;}

#covid-msg {
border: solid 5px red;
background: #e2cccc;
padding: 20px;
color: #922626;
}
#covid-msg h4 {
   color: #b91a1a;
}

/* ==========================================================================
== MEDIA QUERIES ==
========================================================================== */

@media (max-width: 1350px) {
   .bloc-birthday {
      width: calc(100% * 2 / 2 - 2rem - 0.01px);
   }
}


@media (min-width: 1140px) {

   .sidenav { display: block!important;}

}

@media (max-width: 1139px) {

   .sidenav {
      padding-top: 60px;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 5;
   }

   .toggle-nav { display: block; }


   main.active {
      height: 100%;
      overflow: hidden;
   }

   .searchbox-input { line-height: normal;}

   .header {
      position: relative;
      z-index: 10;
   }

}

@media (max-width: 1024px) {


   input,
   select {
      border-radius: 0;
      background-color: #fff;
      outline: none;
   }

   select { -webkit-appearance: none; }


}

@media (max-width: 768px) {

   .login-wrap { padding: 1.5rem; }
   .login-wrap > div { width: 100%; }
   .login-logo {
      max-width: 100px;
      margin: 0 auto 1.5rem auto;
   }
   .login-wrap .table-like li { padding: .2rem; }

   .content-tools.flex-container {
      -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
      -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start;
   }

   .content-tools.flex-container > * + * { margin-top: 1rem; }

   .tools-btn,
   .tools-tri {
      margin-right: 0;
      padding-right: 0;
      border-right: 0;
      width: 100%;
      text-align: center;
   }

   .tools-btn .btn { display: block; }

   .content-tools .align-right {
      margin-left: inherit;
   }

   .tools-tri select {
      display: block;
      width: 100%;
      margin-top: .3rem;
   }

   .pagination {
      width: 100%;
      text-align: center;
   }

   .user-fiche-coord,
   .user-fiche-administratif,
   .user-fiche-stat,
   .user-btn-edit { padding: 0; }

   .user-fiche-infos {
      -webkit-box-flex: 0;
      -webkit-flex: none;
      -ms-flex: none;
      flex: none;
      width: 100%;
   }
   .user-fiche-nom { font-size: 1.6rem; }

}

@media (max-width: 568px) {

   .content { padding: 1rem; }

   .header {
      margin: -1rem -1rem 1rem;
      padding: 0 1rem;
   }

   .header-icon {
      padding: 1.8rem 1.3rem;
   }

   .searchbox {
      /*  position: absolute;
      top: 0;
      right: 60px;
      */
   }

   .bloc { margin-top: 1rem; }

   .content-nav.flex-container { -webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center; }
   .content-nav-item { padding: 1rem; }
   .content-nav-item:first-child { border-left: 1px solid #e5e9ec; }
   .content-nav-item:last-child { border-right: 1px solid #e5e9ec; }

   .bloc-export label {
      display: block;
      text-align: left;
   }

   .bloc-today .flex-container,
   .bloc-user-header.flex-container{
      -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
      -webkit-box-align: start;  -webkit-align-items: flex-start;  -ms-flex-align: start; align-items: flex-start;
   }

   .bloc-user-header > div {
      width: 100%;
      text-align: center;
   }

   .bloc-user-photo {
      margin-bottom: 0;
      margin-top: 0;
   }
   .bloc-user-infos { text-align: center; }
   [class*="user-enfant-"] .bloc-user-txt { padding-top: 1.5rem; }
   .bloc-today-matin { margin: 1.5rem 0;}

   .bloc-listing .btn {
      width: 100%;
      margin: .2rem 0;
   }

}














/**
* 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;
   }
}



.maintenance {
   text-align: center;
   background: #ce0000;
   color: white;
   font-weight: bold;
}

/* ----------------------------------------------------------------
               CODE CLEMENT A REVOIR
------------------------------------------------------------------- */

@media print {
 .content-nav, .header, .content-ttl-btn {
    display:none;
  }
  .bloc {
      box-shadow: none;
  }
  main, .sidenav, .content {
     min-height: auto;
  }
}