/* General -----------------------------------------------------------------------------*/

* { font-family: 'Montserrat', sans-serif; line-height: 1; }
html { height: 100%; width: 100%; }

body { color: #808080; background: #e4eef2; background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23d4e1e7' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E"); }
a { color: #336E7B; }
p + p { margin-top: 10px; }

#mainCtr { margin: 40px auto; width: 90%; max-width: 900px; }
body.logout { display: flex; height: 100%; padding: 50px; }
body.logout #mainCtr { margin: auto; width: 400px; }

#contentCtr { background: #fff; box-shadow: 0 0 0 50px #fff; }

.logo { font-size: 2rem; line-height: 36px; color: #336E7B; font-weight: 700; text-decoration: none; }
body.logout .logo { font-size: 2.5rem; text-align: center; display: block; }

header { padding-bottom: 40px; margin-bottom: 40px; }

header nav ul { list-style: none; margin: 0; padding: 0; }
header nav ul li, header nav ul li a { margin: 0; text-decoration: none; font-size: 1.4rem; }

#breadcrumb { list-style: none; margin: 0; padding: 0; font-size: 1.2rem; margin: -60px 0 0 0; position: absolute; background: #fff; padding: 4px 10px; border-radius: 40px; }
#breadcrumb li { margin-right: 5px; }
#breadcrumb li, #breadcrumb li a { display: inline-block; text-decoration: none; font-weight: 300; color: #ccc; }
#breadcrumb li a:hover, #breadcrumb li a:focus { text-decoration: underline; }

#footerNav { padding-top: 20px; margin-top: 50px; }
#footerNav ul { text-align: center; list-style: none; margin: 0; padding: 0; font-size: 1.3rem; }
#footerNav ul li, #footerNav ul li a { display: inline-block; text-decoration: none; font-weight: 300; color: rgba(0,0,0,.3); }
#footerNav ul li a:hover, #footerNav ul li a:focus { text-decoration: underline; }

h1 { color: #336E7B; font-weight: 300; font-size: 2rem; font-family: 'Montserrat', sans-serif; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
h2 { color: #336E7B; font-weight: 300; font-size: 1.8rem; font-family: 'Montserrat', sans-serif; }

hr { height: 2px; margin: 40px 0; background: rgba(0,0,0,.05); }

.button-link { margin: 0 0 0 20px; font-size: 1.3rem; color: #999; text-decoration: none; }

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

.scrollTop { position: fixed; cursor: pointer; bottom: 50px; right: 20px; display: block; background: #fff; width: 40px; height: 40px; line-height: 40px; text-align: center; }

.row { display: flex; margin: 0 -10px; flex-wrap: wrap; } .row > * { width: calc(33.33% - 20px); margin: 10px; }

.bloc-ressource { text-align: center; text-decoration: none; color: #fff; background: linear-gradient(45deg, #336E7B 0%, #1b937b 100%); border-radius: 4px; transition: all .3s; }
.bloc-ressource:hover, .bloc-ressource:focus { transform: scale(1.05); color: #fff; box-shadow: 0 0 20px rgba(0,0,0,.3); z-index: 9; }
.bloc-ressource .fa { display: block; font-size: 40px; color: #fff; padding: 30px 30px 20px; background: rgba(255,255,255,.2); }
.bloc-ressource .fa-image-svg { padding: 30px 120px 20px; }
.bloc-ressource .title { padding: 20px; display: block; font-weight: bold; font-size: 1.8rem; }

.bloc-ressource-youtube { background: linear-gradient(45deg, #cd201f 0%, #FF2726 100%); }
.bloc-ressource-twitter { background: linear-gradient(45deg, #55acee 0%, #5CB9FF 100%); }
.bloc-ressource-linkedin { background: linear-gradient(45deg, #0077B5 0%, #0097E6 100%); }

.light { opacity: .6; }

.report-link { text-decoration: none; color: #336E7B; }

.data-number { font-family: monospace; }

.fa-type-list { text-align: center; margin-right: 5px; width: 30px; line-height: 30px; color: #fff; background: linear-gradient(45deg, #336E7B 0%, #1b937b 100%); }
h1 .fa-type-list { width: 40px; line-height: 40px; }
.fa-type-list.fa-youtube-play { background: linear-gradient(45deg, #cd201f 0%, #FF2726 100%); }
.fa-type-list.fa-twitter { background: linear-gradient(45deg, #55acee 0%, #5CB9FF 100%); }
.fa-type-list.fa-linkedin { background: linear-gradient(45deg, #0077B5 0%, #0097E6 100%); }

.link-ressource { margin: -15px 0 15px 50px; color: #336E7B; }
.link-ressource a { text-decoration: none; font-weight: bold; color: #336E7B; }

#overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,.8); }
#loader { position: fixed; width: 154px; height: 120px; top: 50%; left: 50%; margin: -60px 0 0 -78px; }
#loader .fa { font-size: 120px; }

.edit-report-link { line-height: 30px; width: 20px; text-align: center; opacity: 0; }
p:hover .edit-report-link { opacity: 1; }

#contentCtr ul li { line-height: 1.2; }
#contentCtr ul li + li { margin-top: 5px; }

h2 [data-target] { position: relative; margin-top: -9px; }

/* Table -----------------------------------------------------------------------------*/

.table, table { table-layout: auto; border: 0; }

td, th { border: 0; font-size: 1.4rem; vertical-align: middle; }
tr td:first-child, tr th:first-child { padding-left: 0; }

thead { border-bottom: 2px solid #336E7B; }
th { color: #336E7B; font-weight: normal; }
th a { color: #336E7B; text-decoration: none; font-weight: bold; }

tbody tr:not(:first-child) { border-top: 2px solid rgba(0,0,0,.05); }

.actions a { background: rgba(0,0,0,.1); position: relative; padding: 0 6px; text-decoration: none; display: inline-block; min-width: 26px; text-align: center; line-height: 24px; height: 24px; font-size: 1.2rem; border-radius: 2px; box-shadow: 0px 1px 0px 0px #ccc; }
.actions a i { font-size: 1.4rem; }
.actions a:hover, .actions a:focus { top: 1px; box-shadow: 0px 0px 0px 0px #ccc; }

td .light { text-decoration: none; font-size: 80%; opacity: .5; }

tbody tr:hover { background: rgba(0,0,0,.05); }

.box { background: rgba(0,0,0,.05); padding: 30px; } .box-border { border: 2px solid rgba(0,0,0,.1); padding: 30px; }
.box + * { margin-top: 30px; }

/* Form -----------------------------------------------------------------------------*/

form.center { max-width: 400px; }

form .input label, form .input input, form .input select, form .input textarea { display: block; }

form .input label { margin: 0; }

form .input input, form .input select, form .input textarea { border: 2px solid rgba(0,0,0,.1); line-height: 1.5; width: 100%; padding: 6px 10px; color: #666; font-weight: 300; }

form .input label + input, form .input label + select, form .input label + textarea { margin-top: 5px; }

form * + .input, form .input + .input { margin-top: 20px; }

button[type='submit'], .btn { border: 0; text-decoration: none; cursor: pointer; position: relative; margin: 0 auto; display: inline-block; background: #336E7B; color: #fff; border-radius: 3px; padding: 8px 12px; font-size: 1.4rem; box-shadow: 0px 3px 0px 0px #1D3F47; }
button[type='submit']:hover, .btn:hover { color: #fff; top: 1px; box-shadow: 0px 2px 0px 0px #1D3F47; } button[type='submit']:focus, .btn:focus { color: #fff; top: 2px; box-shadow: 0px 1px 0px 0px #1D3F47; }
button[type='submit'] { margin-top: 20px; }

.input.checkbox input { width: auto; display: inline-block; margin-right: 10px; }

form .error-message { color: #fff; background: #db4b4b; position: relative; padding: 10px; font-size: 1.2rem; margin-top: 5px; }
form .error-message:before { content: ''; top: -7px; border-width: 0 6px 7px 6px; border-color: transparent transparent #db4b4b transparent; position: absolute; display: block; width: 0; height: 0; border-style: solid;  }

.input.required label { font-weight: bold; } .input.required label:after { content: ' *'; }

form .row { display: flex; margin: 0 -10px; }
form .row .input { margin: 0 10px; width: 20%; }
form .row button[type='submit'] { margin: 2px 10px; height: 32px; }
form.inline .row .input.text { width: 30%; }

/* Pagination -----------------------------------------------------------------------------*/

.paginator { text-align: center; }
.paginator p {  font-size: 1.2rem; }

.pagination { padding: 0; list-style: none; }
.pagination li, .pagination li a { display: inline-block; text-decoration: none; }
.pagination li { border: 2px solid rgba(0,0,0,.1); margin: 0 2px; }
.pagination li a { padding: 0px 8px; line-height: 24px; font-size: 1.4rem; min-width: 22px; text-align: center; }

/* Notifications -----------------------------------------------------------------------------*/

.message { color: #fff; background: #248ac2; position: relative; padding: 20px 40px 20px 20px; margin-bottom: 20px; line-height: 1.2; }
.message.error { background: #db4b4b; }
.message.success { background: #86c224; }
.message:after { content: '×'; display: block; position: absolute; top: 0; right: 0; font-size: 2.4rem; width: 40px; height: 40px; line-height: 40px; text-align: center; cursor: pointer; }

/* Hamburger -----------------------------------------------------------------------------*/

#nav-icon { width: 25px; height: 25px; position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; }
#nav-icon span { display: block; position: absolute; height: 4px; width: 100%; background: #808080; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; }
#nav-icon span:nth-child(1) { top: 0px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; }
#nav-icon span:nth-child(2) { top: 8px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; }
#nav-icon span:nth-child(3) { top: 16px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; }
#nav-icon.open span:nth-child(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 0px; left: 2px; }
#nav-icon.open span:nth-child(2) { width: 0%; opacity: 0; }
#nav-icon.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 18px; left: 2px; }

/* Responsive -----------------------------------------------------------------------------*/

@media (min-width: 861px) {

	.left { float: left; }
	.right { float: right; }

	header nav ul li, header nav ul li a { display: inline-block; line-height: 26px; }
	header nav ul li a { padding: 5px 10px; }
	#mainNav { margin-left: 315px; padding-left: 10px; border-left: 1px solid rgba(0,0,0,.1); }

	#nav-icon { display: none !important; }
	header nav ul { display: block !important; }

	.sub-menu { padding-top: 10px; visibility: hidden; opacity: 0; position: absolute; top: 30px; overflow: hidden; left: 0; margin-left: 0; z-index: 99; min-width: 280px; transition: top .3s, opacity .3s; }
	.sub-menu:before { content: ""; position: absolute; top: 3px; left: 0px; margin-left: 30px; width: 0; height: 0; border-style: solid; border-width: 0 6px 7px 6px; border-color: transparent transparent #336E7B transparent; }
	.sub-menu li { overflow: hidden; display: block; width: 100%; line-height: 16px; }
	.sub-menu li + li { border-top: 1px solid #4C7B86; }
	.sub-menu a { background: #336E7B; width: 100%; line-height: 16px; padding: 11px 10px 10px 10px; border-bottom: 1px solid #336E7B; text-transform: none; color: #fff; }
	
	.has-sub-menu { position: relative; }
	.has-sub-menu > a { padding-right: 15px !important; }
	.has-sub-menu > a:before { content: ""; top: 16px; right: 0px; position: absolute; display: block; width: 0; height: 0; border-style: solid; border-width: 6px 4px 0 4px; border-color: #999 transparent transparent transparent; }
	.has-sub-menu:hover .sub-menu, .has-sub-menu:focus .sub-menu { visibility: visible; opacity: 1; }
	
}

@media (max-width:860px) {

	header nav { margin-top: 10px; }
	header nav ul li + li { margin-top: 5px; }
	header nav ul li a { border: 2px solid rgba(0,0,0,.1); border-radius: 3px; display: block; padding: 7px 12px; }

	#nav-icon { display: block !important; float: right; margin-top: 4px; }
	header nav ul { display: none; }

	.button-link { display: block; margin: 20px 0; }

}