/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #747474;
}

body {
    font-size: 14px;
    line-height: 1.4;
    
    font-family: Arial, Helvetica, sans-serif;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

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

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


	
/* ==========================================================================
   Author's custom styles
   ========================================================================== */

a {
    color: #c62222;
    text-decoration: none;
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    -ms-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    transition: all .25s ease-out;
}
a:hover {
	color: #8a2929;
}

/* ------------------- Titre -------------------- */

h1 {
    color: #000;
    font-weight: bold;
    font-size: 1.000em;
    padding-bottom: .2em;
	text-transform:uppercase;
}
h2 {
    color: #000;
	text-transform:uppercase;
    font-weight: 300;
    font-size: 1em;
}
h3 {
    color: #000;
    font-weight: normal;
    font-size: 1em;
    margin-bottom: 0;
    padding-top: .8em;
}

ol, ul {
    padding: 0 0 0 25px;
    }
    li {
        padding: 2px 5px
    }


dt {
    float: left;
    width: 50%;
    padding: 0.1em 0;
}
dd {
    border-bottom: 1px solid #c4c4c4;
    margin: 0;
    padding: 0.1em 0 0.1em 50%;
    }
    dd::before, 
    dd::after {
        content: " ";
        display: table;
    }
    dd::after {
        clear: both;
    }
    .zend_form dd {
        border: 0
    }
    
/* ------------------- Lightbox -------------------- */

.lightboxWrapper {
	background-image: url(../images/menu-background.png);
	background-repeat: repeat;
	position: fixed; 
	top: 0; 
	left: 0;
	z-index: 5000;
	display: none;
    width:100%; 
    min-height: 100%;
    }
    .lightbox {
        box-sizing: border-box;
        width: 90%;
        max-width: 600px;
        margin: 15% auto 0;
        padding: 30px 40px;
    	background: none repeat scroll 0 0 #fff;
    	border: 1px solid #747474;
        }
    	.lightbox .btn-red {
    		float: right;
    	}
    	.lightbox .btn-white {
    		float: left;
    	}
    	.lightbox .close {
    		float: right;
    		margin-right: -10px;
    		margin-top: -10px;
    	}
 
/* ------------------- BTN -------------------- */

.btn-blue {
	background-color: #004884;
	padding: 15px 15px 12px;
	color: #fff;
	}
.btn-blue:hover {
	color:#ffff;
	background-color:#00457e;
}
	
.btn-red {
	background-color: #c62222;
	padding: 15px 15px 12px;
	color: #fff;
	}
	.btn-red:hover {
		color:#fff;
		background-color:#8a2929;
	}
	footer .btn-red {
		display:block;
		width: 25%;
		text-align:center;
		padding:15px 0 12px;
	}
    .green .btn-red {
        background-color: #297f3a;
        }
        .green .btn-red:hover {
            background-color: #206e2f;
        }

.btn-green {
	background-color: #3fa152;
	padding: 11px 35px 9px;
	color: #fff;
	}
	.btn-green:hover {
		color:#fff;
		background-color: #248136;
	}
	footer .btn-green {
		display: block;
		width: 25%;
		text-align: center;
		padding: 15px 0 12px;
	}
	
.btn-grey {
	background: url("../images/bottom_arrow.png") no-repeat scroll right 15px top 16px #828282;
    color: #fff;
    padding: 11px 35px 9px;
    text-align: center;
	}
	.btn-grey:hover {
		color: #fff;
		background-color: #aaa9a9;
	}
	footer .btn-grey {
		display: block;
		width: 25%;
		text-align: center;
		padding: 15px 0 12px;
	}  

.btn-white {
	background-color:#fff;
	padding: 15px 15px 12px;
	border: 1px solid #747474;
	color: #747474;
	}
	.btn-white:hover{
		background-color: #e5e5e5;
		color: #747474;
	}
	footer .btn-white {
		display: block;
		width: 25%;
		text-align: center;
		padding: 15px 0 12px;
	}
 
/* ------------------- Text colors -------------------- */  

.text-green {
    color: #8ec095;
} 
.text-orange {
    color: #e1a76a;
} 
.text-red {
    color: #c71f22;
} 
.text-grey {
    color: #666;
} 

/* ------------------- Alert Box -------------------- */  

.green-box, .orange-box, .red-box, .grey-box {
	background: url("../images/picto_v.png") no-repeat right center #8ec095;
    background-position: right 10px center;
    margin: 20px 0;
    padding: 10px 2%;
    width: 96%;
	}
    .orange-box {
        background-image: url("../images/picto_alert.png");
        background-color: #e1a76a;
    }
    .red-box {
        background-image: url("../images/picto_x.png");
        background-color: #c71f22;
    }
    .grey-box {
        background-image: url("../images/picto_x.png");
        background-color: rgb(192, 192, 192);
    }
	.green-box h1,
    .green-box p,
    .orange-box h1,
    .orange-box p,
    .red-box h1,
    .red-box p,
    .grey-box h1,
    .grey-box p
     {
		color: #fff;
		margin: 0;
    	padding: 0;
		}

/* ------------------- Tooltip -------------------- */

.tooltip {
    position: relative;
    }
    span.tooltip {
        display: inline-block;
    }
    .tooltip:hover {
        z-index: 1;
    }
    .tooltip:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        left: 1em;
        margin-top: 2em;
        background-color: #fff;
        border: 1px solid;
        color: #747474;
        font-weight: normal;
        font-size: 0.875em;
        padding: 0.25em 0.5em;
        pointer-events: none;
        min-width: 12em;
    }

/* ------------------- wrapper -------------------- */

.wrapper {
    width: 95%;
    margin: 0 auto;
    max-width: 1018px;
    }
    .col-small {
        padding-top: 2em;
        max-width: 660px;
    }

.col_2 {
    float: left;
    width: 45%;
    }
    .col_2 + .col_2 {
        margin-left: 10%;
    }
.col_3 {
    float: left;
    width: 33.3%;
}
.col_4 {
    float: left;
    width: 25%;
    }
	.col_4 p {
		margin-left:7em;
		}
    	.col_4 p.first {
    		margin-left:0;
    		border-right:solid 1px #FFFFFF;
    	}

article {
    margin-bottom: 3em;
}
img.responsive {
    max-width: 100%;
    height: auto;
}

/* ------------------- Header -------------------- */

body > header {
    position: relative;
    border-bottom: .25em solid #363939;
    background: #363939;
    }
	.img-top {
		padding: 0 10%;
		min-height: 150px;
		margin-bottom: -70px;
		}
		.home-img {
			background: url(../images/header_1.jpg) no-repeat;
			background-position: center;
		}
        .agenda-img {
            background: url(../images/header_2.jpg) no-repeat;
            background-position: center;
        }
		.error404-img {
			background: url(../images/404.png) no-repeat;
			background-position: center bottom;
		}
	.top {
		background-color: #c62222;
	}
    .green .top {
        background-color: #3fa152;
    }
    
    .blue .top {
        background-color: #004884!important;
    }
	
	.blue .second-nav ul a.login{
        background-color: #004884!important;
    }
	
	.blue .second-nav #form-login {
	  background-color: #004884!important;
	}
	
	.light-blue-background{
	   background-color: #c7e7ff!important;
	   padding: 5px;
	}
	.white-background{
	   background-color: #fff;
	}

	/* ------------------- Second Nav -------------------- */

    .second-nav ul.menu {
        float: right;
        margin: 0;
        padding: 0;
        list-style: none;
        }
        .lt-ie8 .second-nav ul.menu {
            position: relative;
            z-index: 1;
        }
        .second-nav > ul.menu > li {
            float: left;
            list-style: none;
            position: relative;
            padding: 0;
            }
            .second-nav a {
                display: block;
                color: #fff;
                padding: 1em 1em 0.5em;
                }
                .second-nav > a:hover {
                    text-decoration: underline;
                }

        /* Sous-menu */
        .second-nav li ul {
            position: absolute;
            display: none;
            background-color: #1b1b1b;
            margin: 0;
            padding: 0;
            list-style: none;
            z-index: 1;
            }
            .second-nav li:hover ul {
                display: block;
            }
            .second-nav li li {
                list-style: none;
                margin: 0;
                padding: 0;
                }
                .second-nav ul a {
                    display: block;
                    padding: 20px 10px;
					margin:0;
                    position: relative;
                    }
					.second-nav ul li a:after {
                        content: "|";
                        position: absolute;
                        right: -1px;
                        }
						.second-nav ul li.last a:after {
							content:normal;
						}

                    .second-nav ul a:hover {
                        text-decoration:underline;
                    }
                    .second-nav ul a.active {
                        text-decoration:underline;
                    }
					.second-nav ul a.login {
						 background: url("../images/login.png") no-repeat scroll 20px 20px rgba(0, 0, 0, 0);
    					 padding-left: 40px;
                         background-color: #8a2929;
						}
    					.second-nav ul a.login:hover {
                            text-decoration: none;
    						background-color: #740E0E;
                        }
                        .green .second-nav ul a.login {
                             background-color: #297f3a;
                            }
                            .green .second-nav ul a.login:hover {
                                background-color: #206e2f;
                            }

        /* Form login */
        .second-nav #form-login {
            display: none;
            background-color: #c62222;
            padding: 1em 5%;
            position: absolute;
            width: 90%;
            z-index: 1;
            }
            .green .second-nav #form-login {
                background-color: #3fa152;
            }
            .second-nav li #form-login.open {
                display: block;
            }
            #form-login label {
                color: #fff;
                font-weight: normal;
            }
            #form-login input[type="text"],
            #form-login input[type="password"] {
                background-color: transparent;
                color: #fff;
                border-color: #e4a9a9;
                }
                .green #form-login input[type="text"],
                .green #form-login input[type="password"] {
                    border-color: #a6dcb0;
                }
                #form-login input[type="text"]:focus,
                #form-login input[type="password"]:focus {
                    border-color: #fff;
                }
            #form-login input[type="submit"] {
                background-color: #8a2929;
                width: 100%;
                }
                #form-login input[type="submit"]:hover {
                    background-color: #740E0E;
                }
                .green #form-login input[type="submit"] {
                    background-color: #297f3a;
                    }
                    .green #form-login input[type="submit"]:hover {
                        background-color: #206e2f;
                    }


	/* ------------------- Header Logo -------------------- */

    header .logo-frec {
        float: left;
        clear: both;
        width: 285px; height: 52px;
        background: url(../images/frec_logo.png) no-repeat;
		margin:4px 15px;
        }
        .lt-ie8 header .logo {
            margin-top: 3em;
        }
        .green header .logo-frec {
            background-image: url(../images/logo-l2.png);
            width: 275px; height: 60px;
            margin: 0;
        }
        .green header .logo-ldrive {
            float: left;
            clear: both;
            background-image: url(../images/frec_logo.png);
            width: 285px; height: 52px;
            margin: 0;
            margin:4px 15px;
        }
        
		
	/* ------------------- Menu -------------------- */

    #navCollapser {
        display: none;
    }
    .sf-menu {
        margin: 0;
        padding: 0;
        list-style: none;
		background:url(../images/menu-background.png);
        }
        .lt-ie8 .sf-menu {
            clear: right;
            width: 80%;
        }
        .sf-menu > li {
            float: left;
            list-style: none;
            position: relative;
            padding: 0;
            }
            .sf-menu > li:hover {
                background-position: 1.5em 3.25em;
            }
            .sf-menu > li > a {
                color: #fff;
				display: block;
				font-size: 1em;
				padding: 0.5em 1.25em;
                white-space: nowrap;
                }
                 .sf-menu > li > a:hover {
                    background-color: #363939;
                 }

            /* Sous-menu */
            .sf-menu li ul {
                position: absolute;
                display: none;
                background-color: #363939;
                margin: 0;
                padding: 0;
                list-style: none;
                min-width: 12em;
                z-index: 1;
                }
                .sf-menu li:hover ul {
                    display: block;
                }
                .sf-menu li:last-child ul {
                    right: 0;
                }
                .sf-menu li ul li {
                    margin: 0;
                    padding: 0;
                    }
                    .sf-menu ul a {
                        display: block;
                        color: #fff;
                        padding: .75em 1.5em;
                        white-space: nowrap;
                        }
                        .sf-menu ul a:hover {
                            background-color: #363636;
                        }
                        .sf-menu ul a.active {
                            color: #00a1b2;
                        }


/* ------------------- Section -------------------- */

section {
	padding-top:75px;
}
		
		
/* ------------------- Form -------------------- */

label {
    display: block;
    font-size: 0.933em;
    font-weight: bold;
    margin-bottom: 0.25em;
    }
	label.error, p.error{ 
		color: #c62222;
	}
		
.form-radios label {
    display: inline-block;
    font-weight: normal;
    line-height: 2.65;
    margin: 0 1em 1em 0.25em;
    }
    .lt-ie8 .form-radios label {
        display: inline;
    }

.form-radios {
    float: left;
}
.form-required {
    color: #cc4944;
}

input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="date"], 
input[type="number"], 
input[type="datetime"],
input[type="datetime-local"], 
input[type="url"],
input[type="time"],
.input-file-wrapper,
textarea, 
select,
.styled-select {
    border: 1px solid #ccc;
    box-sizing: border-box;
    margin-bottom: 1em;
    padding: 0.5em;
    height: 2.25em;
    width: 100%;
    }
	input[type="text"]:focus, 
    input[type="email"]:focus, 
    input[type="password"]:focus, 
    input[type="date"]:focus, 
    input[type="number"]:focus,
    input[type="datetime"]:focus,
    input[type="datetime-local"]:focus, 
    input[type="url"]:focus,
    input[type="time"]:focus {
		background-color:#f5f5f5;
	}	
	input[type="text"].error, 
    input[type="email"].error, 
    input[type="password"].error, 
    input[type="date"].error, 
    input[type="number"].error, 
    input[type="datetime"].error,
    input[type="datetime-local"].error, 
    input[type="url"].error,
    input[type="time"].error,
    textarea.error {
        background:#faebeb;
		border: 1px solid #c62222;
	    box-shadow: none;
        outline: none;
    }
    textarea {
        resize: vertical;
        height: auto;
    }
    .input-file-wrapper {
        padding: 0.25em 0.5em;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    input[type=number] {
        -moz-appearance: textfield;
    }
    input[type=time] {
        -moz-appearance: textfield;
    }

    input.inline {
        float: left;
        height: 2.7em;
        margin-right: 5px;
        width: 480px;
        width: calc(100% - 155px);
    }

    .styled-select {
        overflow: hidden;
        position: relative;
        padding: 0;
        }
        .styled-select:after {
            content: url("../images/select_arrow.png");
            position: absolute;
            top: 0; right: 0;
            pointer-events: none;
        }
        .lt-ie8 .styled-select {
            overflow: visible;
            border: 0;
            height: auto;
        }
        .styled-select select {
            background: transparent;
            padding: 5px;
            line-height: 1;
            border: 0;
            border-radius: 0;
            height: 34px;
            -webkit-appearance: none;
           }
           .lt-ie8 .styled-select select {
                height: auto;
            }

        .styled-select.inline {
            float: left;
            width: 45%;
            }
            .styled-select.inline + .styled-select.inline {
                margin-left: 10%;
            }
            .lt-ie8 .styled-select.inline {
                width: 43%;
            }

input[type="submit"], 
button[type="submit"] {
    display: block;
    color: #FFF;
	background-color: #c62222;
    min-width: 150px;
    padding: 12px 15px 10px;
	border: none;
    }
	input[type="submit"]:hover,
    button[type="submit"]:hover {
		background-color: #8a2929;
	}
    .green input[type="submit"], 
    .green button[type="submit"] {
        background-color: #297f3a;
        }
        .green input[type="submit"]:hover,
        .green button[type="submit"]:hover {
            background-color: #206e2f;
        }

input[type="text"].form-npa {
	width: 18%;
	margin-right: 2%;
	float: left;
}
input[type="text"].form-city {
	width: 80%;
}

/* ------------------- Formulaire permis ------------------- */

#form-permis #recto {
    background-color: #f4b4b7;
    font-size: 14px;
    }
    #recto > img,
    #recto > a:first-child img {
        width: 100%;
    }
    #photo-wrapper {
        float: left;
        margin: 1em 0 0 4.5%;
        width: 25%;
        position: relative;
        }
        #photo-wrapper > img {
            width: 100%;
        }
        #btn-femme,
        #btn-homme {
            position: absolute;
            left: .5em; top: .5em;
            }
            #btn-homme {
                left: auto; right: .5em;
            }
    .fields-wrapper {
        margin: 1em 1% 1em 32%;
        color: #000;
        }
        #form-permis ol {
            list-style: none;
            padding: 0;
            }
            .fields-wrapper li {
                padding: 1px 5px;
                }
                .fields-wrapper .num {
                    display: inline-block;
                    width: 1.5em;
                    zoom: 1;
                }
                #recto input,
                #recto select {
                    margin: 0;
                    padding: 0.2em;
                    width: 85%;
                }
                #recto input.small,
                #recto select.small {
                    width: 40%;
                }
                #form-permis .form-required {
                    float: right;
                }
                .fields-wrapper li.last {
                    margin: 3em 0 -5em;
                    position: relative;
                }
            


#form-permis #verso {
    margin-top: 2em;
    background-color: #d4abba;
    border-radius: 1.5em 1.5em 0 0;
    }
    #legend-wrapper {
        float: left;
        width: 30%;
        background-color: #c4c2c3;
        border-right: 2px solid #000;
        color: #000;
        font-size: 11px;
    }
    #verso label {
        display: inline;
        font-size: 14px;
        font-weight: normal;
        margin-left: 1em;
        }
        #verso label img {
            margin-left: 35%;
        }

/* ------------------- Pager -------------------- */

.pager {
    list-style: none;
    padding: 0;
    cursor: default;
    }
    .pager li {
        display: inline;
        padding: 0;
        }
        .pager li:before {
            content: "- ";
            }
            .pager li:first-child:before {
                content: normal;
            }

        .pager a {
            color: #353535;
            font-weight: bold;
            text-transform: uppercase;
            padding: .1em;
            }
            .pager li a:hover,
            .pager li.active a {
                background-color: #353535;
                color: #fff;
            }

/* ------------------- Breadcrumb -------------------- */

.breadcrumb {
    padding: 0;
    font-weight: bold;
    color: #000;
    text-transform: uppercase;
    margin: 2em 0;
    font-size: 0.8em;
    list-style-position: inside;
    }
    .breadcrumb li {
        float: left;
        background-color: #fff;
        border: 1px solid #e3e3e3;
        width: 9.5%; height: 4.25em;
        margin-left: .6%;
        box-sizing: border-box;
        padding: .75em 0;
        text-align: center;
        }
        .breadcrumb li:first-child {
            margin-left: 0;
        }
        .breadcrumb li::before {
            background-color: #ccc;
            content: "";
            display: block;
            height: 1px;
            margin: -0.75em 0 0 -0.5%;
            position: absolute;
            width: 0.5%;
            }
            .breadcrumb li:first-child::before {
                content: normal;
            }
        .breadcrumb span {
            color: #a6a6a6;
            font-weight: normal;
        }
        .breadcrumb li.active,
        .breadcrumb li.complete {
            background-color: #e9e9e9;
            }
            .breadcrumb li.active span,
            .breadcrumb li.complete span {
                color: #000;
                font-weight: bold;
            }

/* ------------------- Tableau -------------------- */

.table-simple {
    border: 1px solid;
}

th {
	text-transform: uppercase;
	background: #878787;
	font-weight: bold;
	color: #fff;
	padding: 8px 10px;
    text-align: left;
}

tr.inactive {
    color: #ccc;
}

/* tableau éditable (1ère col avec boutons) */	
.table-editable table tr:nth-child(2n) {
	background: #fff;
}	
.table-editable table tr:nth-child(2n+1) {
	background: #f7f7f7;
}

.table-simple td,
.table-editable td {
	padding: 5px 10px;
	vertical-align: top;
	}
    .table-simple.bordered td {
        border: 1px solid #878787;
    }
    .table-editable td {
        border-right: 1px solid #878787;
    }
	.table-editable td:first-child, .table-editable th:first-child {
		background: #fff;
		vertical-align: middle;
	}
	.table-editable tr:last-child td {
		border-bottom: 1px solid #878787;
		}
    	.table-editable tr:last-child td:first-child {
    		border-bottom: none;
		}

    /* Tri */
    .sort-wrapper {
        float: right;
        }
        .sort-wrapper a {
            display: block;
            padding: 2px 5px;
            }
            .sort-wrapper img {
                display: block;
            }
	
	/* BTN de Tableau */
	.btn-new {
		background: url(../images/new_off.png) no-repeat center;
		width:12px;
		height:12px;
		display:block;
		float:left;
		margin-right:5px;
	}
	.btn-edit {
		background: url(../images/edit_off.png) no-repeat center;
		width:11px;
		height:12px;
		display:block;
		float:left;
		margin-right:5px;
	}
    .btn-delete {
        background: url(../images/delete_off.png) no-repeat center;
        width:9px;
        height:12px;
        display:block;
        float:left;
        margin-right:5px;
    } 
    .btn-copy {
        background: url(../images/copy_off.png) no-repeat center;
        width:13px;
        height:16px;
        display:block;
        float:left;
        margin-right:5px;
    }  
    .btn-sms {
        background: url(../images/sms_off.png) no-repeat center;
        width:12px;
        height:14px;
        display:block;
        float:left;
        margin-right:5px;
    }   
    .btn-calendar {
        background: url(../images/calendrier.png) no-repeat center;
        width:17px;
        height:16px;
        display:block;
        float:left;
        margin-right:5px;
    }   
    .btn-pdf {
        background: url(../images/pdf.png) no-repeat center;
        width:13px;
        height:16px;
        display:block;
        float:left;
        margin-right:5px;
    }   
    .btn-list {
        background: url(../images/liste.png) no-repeat center;
        width:15px;
        height:16px;
        display:block;
        float:left;
        margin-right:5px;
    }   
    .btn-email {
        background: url(../images/email.png) no-repeat center;
        width:15px;
        height:16px;
        display:block;
        float:left;
        margin-right:5px;
    }     
    .btn-check {
        background: url(../images/check.png) no-repeat center;
        width:15px;
        height:16px;
        display:block;
        float:left;
        margin-right:5px;
    }       
    .btn-error {
        background: url(../images/error-grey.png) no-repeat center;
        width:15px;
        height:16px;
        display:block;
        float:left;
        margin-right:5px;
    }       
    .btn-warning {
        background: url(../images/warning-grey.png) no-repeat center;
        width:15px;
        height:16px;
        display:block;
        float:left;
        margin-right:5px;
    }   

	/* Ligne Hover */
	.table-editable tr:hover td:first-child {
		background:#c62222;
		}
		.table-editable tr:hover td:first-child .btn-new {
			background: url(../images/new.png) no-repeat center;
		}
		.table-editable tr:hover td:first-child .btn-edit {
			background: url(../images/edit.png) no-repeat center;
		}
        .table-editable tr:hover td:first-child .btn-delete {
            background: url(../images/delete.png) no-repeat center;
        }
        .table-editable tr:hover td:first-child .btn-sms {
            background: url(../images/sms.png) no-repeat center;
        }
        .table-editable tr:hover td:first-child .btn-copy {
            background: url(../images/copy.png) no-repeat center;
        }
		.table-editable .btn-new:hover, .btn-edit:hover, .btn-delete:hover, .btn-sms:hover {
			opacity: 0.8;
		}


/* tableau statistiques */
.table-stats th {
    padding: 8px 5px 3px;
}
.second-th th {
    text-transform: none;
    font-weight: normal;
    font-size: 12px;
    padding: 0 5px 5px;
}
.table-stats th.border-right {
    border-right: 1px solid #fff;
}

.table-stats td {
    padding: 5px;
    width: 5%;
}
.table-stats td:first-child {
    width: auto;
}
.table-stats tr:nth-child(2n) td {
    background-color: #ededed;
}
.table-stats.normal-width td {
    width: auto;
}

/* Tableau session selector */
#date-session-selector-header th, 
#date-session-selector td {
    padding: 8px 5px;
    font-size: 12px;
    }
    #date-session-selector-header th {
        font-size: 12px;
    }
    #date-session-selector select,
    #date-session-selector input {
        margin: 0;
    }
    #date-session-selector .ui-widget-content {
        background-color: transparent;
        border-radius: 0;
        }
        #date-session-selector .ui-spinner-input {
            width: 35px !important;
            color: #747474;
            font-family: Arial,Helvetica,sans-serif;
            font-size: 12px;
            margin: 0.5em 22px 0.4em 0.5em;
        }


/* ------------------- Factures ------------------- */

.facture-ouverte {
    color: #c62222;
}
.facture-annule {
    color: #e1a76a;
}
.facture-paye {
    color: #8fc095;
}

/* ------------------- Composant detail box -------------------- */

.detail-box-wrapper {
    display: inline-block;
    position: relative;
    }
    .detail-box {
        display: none;
        position: absolute;
        left: 50%; bottom: 2em;
        z-index: 2;
        margin-left: -14.5em;
        width: 25em;
        padding: 0 2em 1em;
        background-color: #fff;
        border: 1px solid #c4c4c4;
        font-size: 0.9em;
        text-align: left;
        -webkit-box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.15);
                box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.15);
        }
        .no-touch .detail-box-wrapper:hover .detail-box,
        .detail-box-wrapper.active .detail-box {
            display: block;
        }
        td.first .detail-box {
            margin-left: -2em;
        }
        td.last .detail-box {
            margin-left: -27em;
        }
        .detail-box:after {
            content: url('../images/box-detail-arrow.png');
            position: absolute;
            left: 50%;
            bottom: -15px;
            margin-left: -8px;
            }
            td.first .detail-box:after {
                left: 2em;
            }
            td.last .detail-box:after {
                left: 27em;
            }
        .detail-box .btn-close {
            position: absolute;
            right: 0.5em; top: 0.5em;
        }

/* ------------------- Composant ui-sortable -------------------- */

.ui-sortable {
    border: 1px solid #ccc;
    box-sizing: border-box;
    min-height: 50em;
    list-style-type: none;
    margin: 0 1em 0 0;
    padding: 5px 0 0 0;
    }
    .ui-sortable:first-child {
        margin-right: 2%;
    }
    .ui-sortable li {
        background-color: #828282;
        background-image: none;
        border: 0 none;
        color: #fff;
        cursor: move;
        font-weight: normal;
        margin: 0 5px 5px;
        padding: 8px 20px;
        }
        .ui-sortable li.ui-sortable-helper {
            background-color: #333;
        }


/* ------------------- Questionnaire  -------------------- */

.question-wrapper .buttons-left,
.question-wrapper .buttons-right {
    width: 26px;
    float: left;
    }
    .question-wrapper .buttons-right {
        float: right;
    }
    .question-wrapper .buttons-left a,
    .question-wrapper .buttons-right a {
        display: block;
        height: 25px; width: 25px;
        border: 1px solid #ccc;
        text-align: center;
        margin-bottom: -1px;
        }
        .question-wrapper .buttons-left a:hover,
        .question-wrapper .buttons-right a:hover {
            background-color: #ccc;
        }
        .question-wrapper .buttons-left a {
            border-right: 0
        }
        .question-wrapper .buttons-right a {
            border-left: 0
        }
    .buttons-right .btn-delete {
        float: none;
        margin: 0;
    }
.question-wrapper .question {
    margin: 0 26px;
}

/* ------------------- Map carte interactive -------------------- */

.map-wrapper {
    position: relative;
    }
    .map-point {
        position: absolute;
        background-color: #c62222;
        border: 2px solid #8a2929;
        width: 10px; height: 10px;
        border-radius: 10px;
        }
        .map-point.green {
            background-color: #3fa152;
            border-color: #248136;
        }
        .map-point::before {
            border-radius: 30px;
            content: "";
            display: block;
            height: 30px;
            left: -10px;
            position: absolute;
            top: -10px;
            width: 30px;
        }
        .map-point:hover {
            background-color: #8a2929;
            }
            .map-point.green:hover {
                background-color: #248136;
            }
        .map-point.ge {
            left: 2%;
            top: 78%;
        }
        .map-point.vd {
            left: 12%;
            top: 56%;
        }
        .map-point.fr {
            left: 24%;
            top: 53%;
        }
        .map-point.vs {
            left: 31%;
            top: 79%;
        }
        .map-point.ne {
            left: 18%;
            top: 38%;
        }
        .map-point.be_ne {
            left: 28%;
            top: 32%;
        }
        .map-point.be {
            left: 32%;
            top: 42%;
        }
        .map-point.ju {
            left: 26%;
            top: 22%;
        }
        .map-point.fre {
            left: 22%;
            top: 48%;
        }
        .map-point.ge2 {
            left: 2%;
            top: 78%;
        }
        .map-point.vd_ne {
            left: 12%;
            top: 50%;
        }

/* ------------------- Footer -------------------- */

body > footer {
    background: url(../images/footer.jpg);
	background-size: cover;
	background-position: center;
    color: #fff;
    padding: 2em 0 1em;
	text-transform: uppercase;
    font-size: 0.8em;
	}
    body > footer article {
        margin-bottom: 0;
        }
        body > footer a {
            color: #fff;
            }
            body > footer a:hover {
                color: #8c8c8d;
            }

        .copyright {
            color: #fff;
			text-transform: uppercase;
			font-size:11px;
			text-align: center;
            }
			.copyright a {
				text-decoration:underline;
			}
   
   /* ------------------- Footer LDRIVE -------------------- */

body > footerLDrive {
    color: #004884;
    background-color: #004884;
    padding: 2em 0 1em;
	text-transform: uppercase;
    font-size: 0.8em;
    
}
.wrapperLDrive {
    background-color: #004884;
}
body > footerLDrive article {
    margin-bottom: 0;
    background-color: #004884;
    min-height: 60px;
}
body > footerLDrive a {
   color: #fff;
}
body > footerLDrive a:hover {
   color: #8c8c8d;
}       

.topLDrive {
		background-color: #ffffff;
	}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 1300px) {
    .img-top {
		padding:0;
	}
}

@media only screen and (max-width: 1000px) {
    .sf-menu > li  {
        background-position: .6em 2.75em;
        }
        .sf-menu > li:hover {
            background-position: 0.6em 3.25em;
        }
        .sf-menu > li > a {
            font-size: 0.9em;
   			padding: 0.75em 0.5em;
        }
                
    .breadcrumb {
        font-size: 0.7em;
    }
}

@media only screen and (max-width: 760px) {
    
    html, body {
        overflow-x: hidden;
    }
    section {
        background-image: none;
    }
    .wrapper {
        width: 90%;
    }
	
	.col_4 {
		width:33%;
		}
		.col_4 p {
    	margin-left: 2em;
		}
	
	footer .btn-red {    
		width: 33%;
	}

    input.inline {
        float: none;
        height: 2.25em;
        margin-right: 0;
        width: 100%;
    }
    dd .col_2 {
        width: 100%;   
        }
        dd .col_2 + .col_2 {
            margin-left: 0;
        }
        dd .col_2 input,
        dd .col_2 button {
            margin-bottom: .5em;
        }
    
    /* Header */
    body > header {
        border-bottom: 0
        }
        .img-top {
            min-height: 0;
            background-image: none;
            width: 100%;
            margin-bottom: 0;
            }
        	header .logo-frec {
                width: 56px; height: 52px;
                background: url(../images/frec_logo_small.png) no-repeat;
                }
                .green header .logo-frec {
                    width: 65px;
                }
            
            .sf-menu,
            .second-nav {
                background-color: #333;
                left: 100%;
                position: absolute;
                top: 7em;
                width: 90%;
                z-index: 1;
                -webkit-transition: all .5s ease-out;
                   -moz-transition: all .5s ease-out;
                    -ms-transition: all .5s ease-out;
                     -o-transition: all .5s ease-out;
                        transition: all .5s ease-out;
                }
                .menuOpen .sf-menu, 
                .menuOpen .second-nav {
                    left: 10%;
                }
                .second-nav {
                    top: 4.2em;
                    z-index: 2;
                    }
                    .second-nav ul a {
                        padding: 10px;
                        }
                        .second-nav ul a.login {
                            background-position: 20px 13px;
                        }

                .sf-menu > li {
                    float: none;
                    }
                    .sf-menu > li > a {
                        padding: 0.25em 1em;
                    }
                    .sf-menu li ul {
                        display: block;
                        position: static;
                        }
                        .sf-menu ul a {
                            padding: 0.5em 1.5em;
                            white-space: normal;
                        }

             #navCollapser {
                display: block;
                float: right;
                margin: 0.75em 5%;
             }

    /* Page */
    section {
        padding-top: 0;
    }

    /* Zone scroll horizonal */
    .horizontal-scroller {
        overflow: scroll;
        box-shadow: -3px 0 5px 0 #d4d4d4 inset;
        -webkit-box-shadow: -3px 0 5px 0 #d4d4d4 inset;
        padding: 0.5em;
    }

    #form-permis #recto, 
    #verso label {
        font-size: 2vw;
    }
    #legend-wrapper {
        font-size: 1.5vw;
    }

    .col_3 input[type="submit"], 
    .col_3 button[type="submit"] {
        min-width: 0;
        width: 90%;
    }

    /* breadcrumb */
    .breadcrumb li {
        padding: 0.25em 0;
        height: auto;
        }
        .breadcrumb span {
            display: none;
        }

    /* Footer */
    body > footer {
        font-size: 0.929em;
        padding: 1em 0 0.5em;
        }
        body > footer .col_3:last-child {
            white-space: nowrap;
        }
        body > footer ul.social-media, 
        body > footer ul.menu {
            margin: 1.5em 0;
        }

}
@media only screen and (max-width: 450px) {
    .detail-box {
        width: 90%;
        left: 5%;
        margin-left: 0 !important;
        box-sizing: border-box;
    }
    
    .col_4 {
        border-bottom: 1px solid #fff;
    }
    
    .col_4, footer .btn-red {
        width: 100%;
        }
        .col_4 p.first, .col_4 p {
            margin-left: 0;
            border-right: none;
        }
	
    .sf-menu, .second-nav {
        top: 6.7em;
    }
	.second-nav ul.menu {
		font-size: 0.8em;
	}
	
	.col_2, .col_3 {
		width: 100%;
		}
		.col_2 + .col_2 {
    		margin-left: 0;
		}

    .col_3 input[type="submit"], 
    .col_3 button[type="submit"] {
        width: 100%;
    }
		
	
	/* LIGHTBOX */
	.lightbox .btn-red, .lightbox .btn-white {
		display: block;
		float: none;
		margin-top: 20px;
	}

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* tableau ldrive */
.table-ldrive th {
    padding: 8px 5px 3px;
}
.second-th th {
    text-transform: none;
    font-weight: normal;
    font-size: 12px;
    padding: 0 5px 5px;
}
.table-ldrive th.border-right {
    border-right: 1px solid #fff;
}

.table-ldrive td {
    padding: 5px;
}

.table-ldrive tr:nth-child(2n) td {
    background-color: #ededed;
}
.table-ldrive.normal-width td {
    width: auto;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    /*a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }*/

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

    /* ---------- PRINT FREC --------------- */

    body {
        font-size: 12px;
        }
        body > header {
            border: 0;
            }
            header .logo-frec {
                margin: 0
                }
                header .logo-frec::after {
                    content: url(../images/frec_logo_pos.png);
                }
            header .menu,
            header .second-nav {
                display: none;
            }
            header .img-top {
                min-height: 0;
                padding: 0;
            }

        .col-small.col_2_print {
            width: auto;
            }
            .col_2_print article {
                margin: 0 2.5% 1em;
                float: left;
                width: 45%;
                }
                #form-permis {
                    }
                    #form-permis #recto {
                        font-size: 12px;
                        }
                        #recto input, #recto select,
                        #recto input.small, #recto select.small {
                            width: 75%;
                        }
                    #verso label {
                        font-size: 12px;
                    }
                    #legend-wrapper {
                        font-size: 7px;
                    }
                #cancelButton {
                    display: none;
                }
        
        .styled-select.inline {
            width: 80%;
        }

        footer .wrapper > .clearfix {
            display: none;
        }
}