/* Reset */
html, body, div, span, applet, object,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	-webkit-margin-after: 0px;
	-webkit-margin-before: 0px;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; text-align: left; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
strong, b { font-weight: bold; }
i { font-style: italic; }
* { -webkit-margin-before: 0; -webkit-margin-after: 0; }
.clear { clear: both; }
textarea, label, input, select { cursor: pointer; }
sup  { vertical-align: super; font-size: smaller; }
img { width: auto; height: auto; max-width: 100%; }

/* Custom fonts */
@font-face {
	font-family: 'thedigitalcube';
	src: url( '../fonts/thedigitalcube.ttf' ) format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* Icons */
.icon-menu:before { content: '\f008'; display: none; }
.icon-bell:before { content: '\e800'; }
.icon-logout:before { content: '\e801'; }
.icon-cogs:before { content: '\e802'; }
.icon-globe:before { content: '\e803'; }

/* General */
body { font-family: 'Source Sans Pro', 'Arial', sans-serif; background: #f0f0f0; }
h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: absolute; top: 0; left: 0; background: #ff9800; color: #FFF; padding: 10px 20px; box-sizing: border-box; height: 60px; text-align: left; width: 100%; font: 300 18pt/30pt "Source Sans Pro", "Arial", sans-serif; margin: 0; }
h2 { text-transform: uppercase; color: #000; padding-bottom: 4px; text-align: left; border-bottom: 1px solid #CCC; margin: 21px 0 5px 0; font-size: 12pt; }
a { transition: all 0.4s; text-decoration: none; color: #1bb8c1; }
a:hover:before, a:hover { color: #14c9d4; }
[class^="icon-"], [class*=" icon-"] { display: inline-block; vertical-align: middle; }
[class^="icon-"]:before, [class*=" icon-"]:before { font-family: 'thedigitalcube', sans-serif; color: #d0d0d0; speak: none; width: 1em; margin-right: .2em; text-align: center; transition: all 0.4s; }
[class^="icon-"]:hover:before, [class*=" icon-"]:hover:before { color: #14c9d4; }
#resultats { margin: 0 0 18px; }
.error, .success, .warning, .notification { border-left: 3px solid; padding: 10px; background: #f7f7f7; color: #3e3e3e; font-size: 10pt; text-align: left; }
.error { border-left-color: #FF1000; }
.success { border-left-color: #77D86F; }
.warning { border-left-color: #ffaa2d; }
.notification { border-left-color: #3ab9f3; }
#holder { margin-top: 15px; }

/* Menu */
#responsive-menu { background: #3d3c3c; width: 175px; position: fixed; bottom: 0; top: 0; z-index: 8889; min-width: 100px; text-align: left; font: 10pt 'Arial', sans-serif; }
#r_column { position: relative; width: calc( 100% - 240px ); box-sizing: border-box; margin: 95px 35px 25px 205px; padding: 82px 35px 25px; background: #FFF; border: 1px solid #d0d0d0; }
#rr-column-responsive { position: fixed; top: 15px; right: 3%; }
#logo { background: #FFF; padding: 15px 0; }
#logo > * { display: block; margin: auto; max-height: 47px; }
#menu_list { overflow-y: scroll; height: 100%; }
#menu_list a, #menu_list span { color: #999; display: block; padding: 10px 0 10px 10px; border-left: 2px solid transparent; }
#menu_list a:hover, #menu_list .active > a, #menu_list .active > span, #menu_list span:hover { color: #FFF; background: #232a2f; }
#menu_list span { cursor: pointer; padding: 10px; position: relative; }
#menu_list span:after { content: '\02039'; position: absolute; display: block; top: 4px; right: 9px; font-size: 21px; transition: all 0.4s; }
#menu_list .active > a, #menu_list .active > span { border-left: 2px solid #ff9800; }
#menu_list .active span:after, #menu_list li:hover span:after { transform: rotateZ( -90deg ); color: #ff9800; }
#menu_list li ul { overflow: hidden; max-height: 0; transition: all 1s; background: #5f5f5f; }
#menu_list li:hover ul, #menu_list li.active ul { max-height: 800px; }
#menu_list li.active a.active { color: #1bb8c1; }
#menu_list li ul a { padding: 6px 0 6px 20px; }

/* Top bar */
#top-bar { text-align: right; position: fixed; top: 0; left: 175px; z-index: 8888; background: #FFF; padding: 20px 35px; width: calc( 100% - 245px ); box-shadow: 0 0 4px rgba( 0, 0, 0, .2 ); }
#top-bar > [class^="icon-"]:last-of-type:before { margin: 0; }
#top-bar > .user-thumbnail { cursor: pointer; }
#top-bar [class^="icon-"]:before, #top-bar [class*=" icon-"]:before { cursor: pointer; transition: all 0.4s; }
#top-bar [class^="icon-"].active:before, #top-bar [class*=" icon-"].active:before { color: #14c9d4; }
.icon-bell.new:before { color: #e91e63; }
.top-arrow { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #e6e6e6; position: absolute; right: 12px; top: -8px; }
#notifications-menu { display: none; position: absolute; right: 125px; top: 53px; background: #FFF; border-top: 1px solid #e6e6e6; font-size: 10pt; }
#notifications-menu > a { display: block; padding: 20px; text-align: left; border-bottom: 1px solid #e6e6e6; min-width: 300px; color: #666; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
#notifications-menu > a:hover { background: #f9f9f9; }
#notifications-menu > a.unread { font-weight: bold; }
#notifications-menu > a:last-of-type { border: 0; background: #6bc4ca; color: #FFF; text-align: center; }
#notifications-menu > a:last-of-type:hover { background: #26cdd7; }

/* Forms */
.line { margin: 0 0 19px; text-align: left; }
.line > *, .line > [id^=cke_] { display: inline-block; vertical-align: top; max-width: calc( 100% - 164px ); }
.line > label { text-align: right; width: 149px; line-height: 1.3; margin: 4px 10px 0 0; font-size: 11pt; }
.line > span { line-height: 31px; width: calc( 100% - 149px ); }
.line small { display: block; line-height: 1; font-size: 9pt; color: #A7A7A7; }
[type="radio"]:checked + label:before { content: '\2022'; }
.line div label { display: inline-block; vertical-align: middle; margin: 0 10px 0 0; }
.line [type="radio"] { display: none; }
[type="text"], select, textarea, [type="file"] { height: 31px; width: 320px; padding: 0 10px; color: #000; font: 11pt "Source Sans Pro", "Arial", sans-serif; border: 0; border-bottom: 1px solid #e3e3e3; background: #f5f5f5; box-sizing: border-box; transition: all 0.4s; }
[type="text"]:focus, select:focus, textarea:focus, [type="file"]:focus { outline: 0; border-color: #1bb8c1; }
[type="text"].calendar { text-align: center; width: 87px; }
[type="file"] { vertical-align: middle; height: auto; padding: 6px; }
[type="checkbox"] { border: 0; padding: 5px; -webkit-appearance: none;   width: 50px; height: 30px; background: #efefef; border-radius: 18px; transition: all .4s; }
[type="checkbox"]:before { display: block; content: ' '; width: 20px; height: 20px; background: #FFF; border-radius: 12px; transition: all .4s; }
[type=checkbox]:checked { background: #1bb8c1; }
[type="checkbox"]:checked:before { margin: 0 0 0 20px; }
textarea { height: 120px; padding: 10px; }
#actions { display: inline-block; vertical-align: middle; }
#actions > div { float: left; padding-right: 10px; }
.buttons { text-align: center; font-size: 0; margin: 20px 0 0; }
.buttons *, [type="button"], button, #pagination li { cursor: pointer; font: 13.3333px 'Arial', sans-serif; display: inline-block; vertical-align: top; padding: 8px 10px; background: #FFF; border: 1px solid #d0d0d0; border-radius: 3px; color: #000; transition: all 0.4s; }
.buttons *, #pagination li { border-radius: 0; border-left: 0; }
.buttons *:first-child, #pagination li:first-of-type { border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-left: 1px solid #d0d0d0; }
.buttons *:last-child, #pagination li:last-of-type { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.buttons *:focus { outline: 0; }
.buttons *:hover, [type="button"]:hover, button:hover  { color: #FFF; background: #ff9800; }

/* Pagination */
#pagination { float: right; padding: 10px 0 0; font-size: 0; }
#pagination li { padding: 0; font-size: 10pt; color: #888; }
#pagination li.dots { padding: 7px 10px; }
#pagination li a { font-size: 10pt; padding: 7px 11px; color: inherit; display: block; transition: none; }
#pagination li:not( .dots ):hover, #pagination li.active { background: #00BCD4; color: #FFF; }

/* Table formatting */
#r_column table:not( .ui-datepicker-calendar ) { width: 100%; color: #000; border: 1px solid #dedede; background: #FFF; font-size: 10pt; }
#r_column table:not( .ui-datepicker-calendar ) thead { background: #27b0ab; color: #FFF; text-align: left; }
#r_column table:not( .ui-datepicker-calendar ) > tbody > tr { background: #FFF; transition: all 0.8s; border-bottom: 1px solid #dedede; }
#r_column table:not( .ui-datepicker-calendar ) > tbody > tr[data-href]:hover, #r_column table > tbody > tr[data-href]:hover > * { cursor: pointer; background: #00bcd4; color: #FFF; }
#r_column table:not( .ui-datepicker-calendar ) th, #r_column  table:not( .ui-datepicker-calendar ) td { padding: 8px; line-height: 1.3; max-width: 100px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; vertical-align: middle; }
#r_column table:not( .ui-datepicker-calendar ) td.overflow { overflow: visible; }
#r_column table:not( .ui-datepicker-calendar ) th { font-weight: 700; padding: 12px 8px; }
#r_column table:not( .ui-datepicker-calendar ) .actions { margin: auto; }
#r_column table:not( .ui-datepicker-calendar ) .actions a { padding: 8px 10px; }
.center { text-align: center; }

/* Actions */
.actions { font-size: 10pt; position: relative; display: table; border: 1px solid #d0d0d0; border-radius: 3px; background: #FFF; margin: 0 0 10px auto; }
.actions ul { display: none; position: absolute; background: #FFF; border: 1px solid #d0d0d0; border-radius: 3px; right: 0; z-index: 1; top: 40px; white-space: nowrap; }
.actions ul a { display: block; }
.actions > a { display: inline-block; vertical-align: middle; }
.actions > span:before { cursor: pointer; color: #363A41; content: '\25BF'; display: inline-block; vertical-align: middle; padding: 0 4px 0 0; }
.actions > span:hover:before { color: #ff9800; }
.actions a { color: #363A41; padding: 10px; }
.actions a:hover { color: #FFF; background: #ff9800; }

/* Users */
.user-thumbnail { background: #ff9800; font-weight: 700; display: inline-block; vertical-align: middle; color: #FFF; text-align: center; width: 30px; height: 30px; line-height: 30px; border-radius: 18px; margin: 0 6px; font-size: 13px; }
.user-thumbnail:first-child { margin-left: 0; }
.user-thumbnail:last-child { margin-right: 0; }

/* Special data blocks */
.one-third { background: #FFF; border: 1px solid #d0d0d0; width: calc( ( 100% - 40px ) / 3 ); padding: 25px; box-sizing: border-box; margin: 0 10px 10px; float: left; }
.one-third:nth-of-type( 3n - 2 ) { margin-left: 0; }
.one-third:nth-of-type( 3n ) { margin-right: 0; }
.one-third h2 { text-transform: none; padding: 0 0 7px; margin: 0 0 21px; font-size: 9pt; }

@media (max-width: 1011px) {
	#rr_column { width: 118px; }
}

@media (max-width: 870px) {
	
	#main { width: 100%; }
	#l_column, #rr_column { display: none; } 
	
	#responsive-menu { position: fixed; top: 0; left: -175px; z-index: 29; transition: all 0.4s; }
	#responsive-menu.visible { left: 0; }
	#menu_list { width: 100%; height: auto; }
	#menu_list li:last-child { padding: 0 0 100px; }

	#top-bar { margin: 0; width: 100%; box-sizing: border-box; padding: 15px; left: 0; }
	.icon-menu:before { display: block; }
	#notifications-menu { right: 106px; }
	
	#r_column { margin: 85px 0 25px; border-left: 0; border-right: 0; width: 100%; box-sizing: border-box; padding: 80px 20px 20px; }
	
	.title, .ref { padding-right: 0; }
	#rr-column-responsive { display: block; float: right; padding: 5px 10px 0 0; }
	input[type=submit].user { height: 20px; }
	
}

@media (max-width: 490px) {
	
	#notifications-menu { right: 8px; }
	.top-arrow { right: 110px; }
	#notifications-menu > a { width: 260px; }
	
}