/*
Colors 
 0066CC : bleu des liens
------------------------------ */
/* GLOBAL RESET */
html, body, header, footer, nav, section, form, fieldset, h1, h2, h3, h4, div, p {
    margin: 0;
    padding: 0;
    font-size: 1em;
}

ol, ul {
    margin: 0;
}

img {
    border: none;
}

a:link, a:visited, a:active, #navigation a, #navigation a:hover, #navigation a.selected {
    text-decoration: none;
}

a:hover {
    text-decoration:underline;
}

/* BODY */
body {
    font: normal 80% Arial, "Trebuchet MS", Verdana, Tahoma, Helvetica, Sans-Serif;
    color: #000;
    background: #fff;
}


/* COMMON */
header h1, #breadcrumb li, #navigation, #content, #member-menu {
    display:inline-block;
    vertical-align: top;
}
#breadcrumb, #navigation ul {
    padding:0;
}
.label, footer, header {
    border-radius:5px;
}
#breadcrumb li:after {
    content:" > ";
}
#breadcrumb li:last-child:after, #breadcrumb li:first-child:after {
    content:"";
}

/* LAYOUT */
#container {
    width:1200px;
    margin:0 auto;
}
#main {
    text-align:left;
    clear: both;
}
header {
    background:#fff;
    margin:.5em 0 1em 0;
}
#breadcrumb {
    margin: 1em 0 1.5em 0;
    font-size:.9em;
    padding: 0 .5em;
} 
#navigation, #content {
    display:inline-block;
    vertical-align: top;
}
#content {    
    width: 1030px;
    text-align: left;
    background:#fff;
    border-radius:5px;
    padding:0 0 5px 0;
}
#navigation {
    width:140px;
    background:#f1f1f1;
    border-radius:5px;
    padding:5px 0 5px 5px;
    margin-right:20px;
}
footer {
    margin-top:2em;
    background:#f1f1f1;
    text-align:center;
    color:#999;
    border-radius:5px;
    padding:.2em;
    clear:both;
}
#dialog {
    display:none;
}

/* Title */
#content h1 {
    font-size: 1.3em;
    font-family: Verdana, Arial, Tahoma;
    color: #000;
    background:#f1f1f1;
    border-radius:5px;
    padding: .2em .5em;
    margin-bottom: 1em;
}
#content h2 {
    font-size:1.1em;
    margin:1.5em 0 .5em 0;
}

#content h3 {
    font-size: 0.9em;
    color: #000;
    background:#f1f1f1;
}
/* Link */
a {
    color:#06C; 
}
a:hover {
    color:#333; 
}

/* Menu */
#navigation ul {
    list-style:none;
}

#navigation li {
    margin: 0;
    padding: 0;
}

#navigation a {
    padding:.5em .4em;
    margin:.4em 0;
    display:block;
    font: normal 1em Verdana, Arial, Tahoma;
    color:#333;
    border-radius:5px 0 0 5px;
}

#navigation a.on, #navigation a.selected {
    background-color:#fff;
    font-weight:bold;
    color:#000;
}
#navigation a:hover {
    background-color:#ddd;
}

.home, .folder, .calendar, .report, .user, .config, .simulation, .preferences, .protocols, .centers, .notifications, .alerts {
    background-repeat: no-repeat;
    background-position: .3em .4em;
    padding-left:28px !important;
}
.home {
    background-image:url('../images/gohome.png');
}
.folder {
    background-image:url('../images/folder.png');
}
.user {
    background-image:url('../images/agt_family.png');
}
.config {
    background-image:url('../images/configure.png');
}

.simulation {
    background-image:url('../images/simulation.png');
}

.preferences {
    background-image:url('../images/interface_preferences.png');
}
.protocols {
	background-image:url('../images/checklist.png');
}
.centers {
    background-image:url('../images/hospital.png');
}
.notifications {
    background-image:url('../images/mail_replay.png');
}
.alerts {
    background-image:url('../images/flag.png');
}

/* logout "form" to make logout appear as a link but use a post request */
#logout-form {
  display: inline;
}
#logout-form button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* .logout {
    background:url('../images/exit.png') no-repeat top right;
    padding-right:22px;
    padding-bottom: 4px;
} */
.login {
    background:url('../images/login.png') no-repeat top right;
    padding-right:22px;
    padding-bottom: 4px;
}

/* MEMBER MENU */
#member-menu {
    list-style: none;
    text-align: right;
    width:845px;
}
#member-menu, #member-menu > li {
    padding: 0;
    margin: 0;
    position: relative;
}
#member-menu > li {
    display: inline-block;
    padding: .2em .4em;
    margin-left: .4em;
    height: 1em;
}

.parameters, .profil, .help, .alert-icon, .clock {
    background-repeat: no-repeat;
    background-position: top left;
    width: 20px;
    height: 16px;
    display: block;
}
.parameters { background-image: url(../images/configure.png); }
.profil { background-image: url(../images/kuser.png); }
.help { background-image: url(../images/khelpcenter.png); }
.alert-icon { background-image: url(../images/ktip.png); }
.clock { background-image: url(../images/clock.png); }

.alert-counter {
    border-radius: .5em;
    background-color: #eee;
    color:#ccc;
    display: inline-block;
    font-size: 80%;
    padding: .1em .2em;
    position: absolute;
    top: 13px;
    right: 2px;    
}
.alert-counter-on {
    background-color: #C00;
    color: #fff;
}

#member-menu .menubox {
    background-color:#fff;
    display:none;
    position:absolute;
    top:30px;
    right:0px;
    min-width:180px;
    max-height:300px;
    border:2px solid #ccc;
    border-radius: .4em;
    box-shadow: 0 3px 8px 0 #bbb;
    z-index:100;
    text-align: right;
}
#member-menu .menubox:before {
    border: solid transparent;
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    border-width: 6px;
    border-bottom-color: #ccc;
    top: -14px;
    right: 10px;    
}
#member-menu #clock ul{
    text-align: left;
    margin: 10px;
    padding: 0;
    list-style:none;
}
#member-menu #clock ul li{
    padding-bottom: 6px;
}

#member-menu .menubox p {
    padding: .8em;
}

#member-menu #alert-shortlist {
    min-width:300px;
    min-height:400px;
}
#alert-shortlist ul, #alert-shortlist p {
    padding: .8em;
}
#alert-shortlist ul.alert-list {
    height:300px;
    overflow: scroll;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.alert-list, .notif-list {
    padding:0;
    margin: 0;
    list-style: none;    
}
.alert-list li a, .notif-list li a {
    border-radius: .4em;
    margin-bottom: .4em;
    display: block;
}
.alert-list li a:hover, .notif-list li a:hover {
    text-decoration: none;
    background-color: #eee;
}
.alert-list a.notified, .alert-list a.acknowledged, .alert-list a.resolved {
    background-color: #f2f2f2 !important;
    color:#999 !important;
}
.alert-list a.notified .alert-patient, .alert-list a.acknowledged .alert-patient, .alert-list a.resolved .alert-patient {
    background-color: #999 !important;  
}

.notif-list li a {
    background-color: #f2f2f2;
    color:#666;
    padding: .5em;
}
.notif-list p {
    margin-bottom: .4em;
}
.notif-patient {
    background-color: #666;
}
.notif-status-ok, .notif-status-ko {
    padding-left: 22px;
    background-repeat: no-repeat;
    background-position: top left;
}
.notif-status-ok {
    background-image: url(../images/button_ok.png);
}
.notif-status-ko {
    background-image: url(../images/msn_busy.png);
}

.alert-patient, .notif-patient {
    color:#fff;
    border-radius: .4em;
    font-size: 90%;
    padding: .1em .4em;
}

.alert-datetime, .notif-datetime {
    font-style: italic;
    font-size: 90%;
}

.alert-message, .notif-message {
    font-weight: bold;
}


.graph, .export, .dias, .data, .details, .add, .reload, .edit, .delete, .monitor, .overview, .preview, .settings, .schedule, .back, .send-by-email, .send-by-sms, .investigate, .forward, .archive {
    background-repeat: no-repeat;
    background-position: top left;
    padding-left:22px;
    padding-bottom: 5px;
}
.graph {
    background-image:url('../images/spreadsheet.png');
}
.export {
    background-image:url('../images/spreadsheet_document.png');
}
.dias {
    background-image:url('../images/dias-icon.png');
    padding-left: 48px;
}
.data {
    background-image:url('../images/journal.png');
}
.details {
    background-image:url('../images/playlist.png');
}
.add {
    background-image:url('../images/edit_add.png');
}
.edit {
    background-image:url('../images/edit.png');
}
.delete {
    background-image:url('../images/delete.png');
}
.monitor {
    background-image:url('../images/oscilloscope.png');
}
.overview {
    background-image:url('../images/agt_family.png');
}
.preview {
    background-image:url('../images/kdvi.png');
}
.settings {
    background-image:url('../images/configure.png');
}
.reload {
    background-image:url('../images/reload.png');
}
.schedule {
    background-image:url('../images/appointment.png');
}
.back { 
    background-image: url('../images/back.png');
}
.send-by-email { 
    background-image: url('../images/msn_newmsg.png');
}
.send-by-sms { 
    background-image: url('../images/sms_protocol.png');
}
.investigate { 
    background-image: url('../images/search.png');
}
.forward { 
    background-image: url('../images/mail_replay.png');
}
.archive {
    background-image: url('../images/archive.png');
}
.loading {
    background: url('../images/ajax-loader.gif');
    height:16px;
    width:16px;
    display:inline-block;
    background-repeat: no-repeat;
}
.inprogress {
    background: url('../images/in-progress.gif') no-repeat 0 2px;
    display:inline-block;
    padding-left:50px;
    min-height:13px;
    min-width:43px;
}
.arrow {
    position: absolute; 
    cursor: pointer; 
    width:19px;
    height:19px;
}

.notification-close {
    background: url('../images/remove.png') top right no-repeat; 
    padding-right:22px;
    float:right;
    top: .5em;
    right: .5em;
    cursor: pointer;
}

.small-button {
    font-size:.8em;
    border-radius:.3em;
    background:#ddd;
    color:#000;
    padding:.1em .5em;
}
.small-button:hover {
    background:#bbb;
}

/* PREFERENCES */
.preferences_item {
    font-weight: bold;
    color: #444;
}


/* PAGINATION */
.pagination {
    text-align:center;
    padding:1em;
}

.pagination span.current, .pagination a {
    display:inline-block; 
    padding:.3em .5em;
    border-radius:5px;
    color:#333;
    margin:0 .1em;
}

.pagination span.current {
    background:#333;
    color:#fff;
}
.pagination a {
    background:#eee;
}

.pagination a:hover {
    background:#ccc;
    text-decoration:none;
}


/* list */
.options {
    border-radius: .4em;
    background: #F1F1F1;
    padding: .5em 1em;
    margin-top: 1em;
}
.sort-option ul {
    margin: 20px 0;
    padding:0;
    list-style:none;
}
.options h3, .search-option, .options form, .sort-option, .sort-option ul, .list-option , .list-option li {
    display:inline;
    padding:0;
}
.list-option {
    display:inline-block;
}
.options div {
    margin-right:1em;
}
.list-option a {
    padding:.2em .5em;
    background-color:#ccc;
    color:#fff;
    border-radius:.4em;
    text-decoration:none;
}
.list-option a.on, .list-option a:hover {
    background-color:#333;
}

/* ACTIVE */
.active-True, .active-False {
    background-repeat: no-repeat;
    background-position: top left;
    width: 15px;
    height: 15px;
    display: block; 
    background-image: url(../images/status-yes.png)
}
.active-False {
    background-image: url(../images/status-no.png)
}

/* Show*/
#subjectdetails {
    padding: 0 .5em;
}

/* Graph */
#graphs {
    display:inline-block;
    width:640px;
    vertical-align:top;
    margin:0 20px;
}
#graph {
    width:620px;
    height:400px;
}


.arrow-left {
    background: url('../images/1leftarrow.png') no-repeat top left;
}
.arrow-left-double {
    background: url('../images/2leftarrow.png') no-repeat top left;
}
.arrow-right {
    background: url('../images/1rightarrow.png') no-repeat top left;
}
.arrow-right-double {
    background: url('../images/2rightarrow.png') no-repeat top left;
}

#graphs .currenttime {
    color:#fff;
    font-size: 1em;
    border-radius:3px;
    background:#06c;
    padding:1px 2px;
}


/* Lights */
#lights {
    display:inline-block;
    vertical-align:top;
    width:80px;
}
.light {
    display:block;
    width:60px;
    height:180px;
    background-image: url('../images/traffic-lights.png');
    background-repeat: no-repeat;
    background-position: -180px 15px;
    margin:15px 10px 0 10px;
    text-align: center;
    text-transform: uppercase;
    font-size: .8em;
    font-weight: bold;
}
.lightred {
    background-position: 0 15px;
}
.lightgreen {
    background-position: -60px 15px;
}
.lightyellow {
    background-position: -120px 15px;
}
.lightnone {
    background-position: -180px 15px;
}
.lighttext {
    text-align: center;
    font-size: .8em;
    font-weight: bold;

}
.hypoAlerts {
    box-shadow: 0px 0px 15px 7px #fe001a;
    background-color: #fe001a;
}

/* LastData */
.loop {
    font:bold 1.1em Verdana;
}
.stopped {
    color:#333;
}
.open, .pump {
    color:#06c;
}
.closed {
    color:#090;
}
.safety_only {
    color:#90f;
}
.sensor_only {
    color:#f90;
}

#last {
    display: inline-block;
    width:200px;
}

.lastdata {
    display:block;
    width:200px;
    vertical-align:top;
    text-align: center;
    border:1px solid #ccc;
    border-radius:5px;
    padding:.5em;
    margin:20px 0 0 0;
    font-size: 1.2em;
    color: #333;    
}

.lastalerts {
    max-height: 200px;
    overflow:auto;
}

.lastdata  p {
    margin-bottom: 10px;
}
.lastdata .cgmvalue {
    font:bold 2em Verdana;
}
.lastdata .cgmmessage {
    font:bold 1.1em Verdana;
}

.lastdata  hr {
    border:1px solid #ccc;
}
.normal {
    color:#090;
}
.undercontrol {
    color:#F90;
}
.outofcontrol {
    color:#F00;
}
.lastdata .cgmtime {
    font-size: .8em;
}
.jclock {   
    font-size: 1.2em; color:#06C;
}

/* PREVIEW */
#preview {
    width:620px;
}
#preview #graphs {
    width:465px;
    margin:0 0 0 10px;
}
#preview-graph {
    width:465px;
    height:300px;
}

#preview .actions {
    text-align: center;
}

/* ALERTS */
.alert {
    font-size: 0.9em;
    padding:5px;
    margin-bottom:5px;  
    border-width: 1px;
    border-style: solid;
    border-radius:5px;
    text-align:left;
    color: #666;
    background-color: #eee;
    border-color: #ddd;
    padding:.5em;
}

.newalert{
    text-decoration: none;
    display:block;
    width:inherit;
    height:inherit;
    position:relative;
    top:0;
    left:0;
}
.newalert:hover{
    text-decoration: none;
}

.oldalert {
    opacity:0.5;
    text-decoration:line-through;
    color: #666;
    border-color:#666;
}

.prio-info, .prio-warning, .prio-danger {
    color: #fff;
    padding:.5em .5em .5em 45px;
    background-repeat: no-repeat;
    background-position: .3em .3em;
    border-width:1px;
    border-style: solid;
}
.prio-info {
    color: #3A87AD;
    background-color: #D9EDF7;
    border-color: #BCE8F1;
    background-image: url('../images/info.png');
}
.prio-info.acknowledged, .prio-info.resolved {
    background-image: url('../images/info_greyed.png');
}
.prio-warning {
    color:#C09853;
    background-color: #FCF8E3;
    border-color: #FBEED5;
    background-image: url('../images/warning.png');
}
.prio-warning.acknowledged, .prio-warning.resolved {
    background-image: url('../images/warning_greyed.png');
}
.prio-danger {
    font-weight: bold;
    color: #B94A48;
    background-color: #F2DEDE;
    border-color: #EED3D7;
    background-image: url('../images/error.png');
}
.prio-danger.acknowledged, .prio-danger.resolved {
    background-image: url('../images/error_greyed.png');
}

.prio-info .alert-patient {
    background-color: #3A87AD;
}
.prio-warning .alert-patient {
    background-color: #C09853;
}
.prio-danger .alert-patient {
    background-color: #B94A48;
}

.alert .datetime {
    font-weight: normal;
    display: block;
    font-size:0.9em;
    font-style:italic;
}
.alert .small-button {
    background:#B94A48;
    color:#fff;
    font-size:1em;
    padding:.2em .5em;
}
.alert .small-button:hover {
    background:#333;    
}


/* LIST */
.action, .action-offline {
    border-radius:5px;
    background:whitesmoke;
    padding:.5em;
    margin:1em 0;
    position: relative;
}
.action-offline {
    background: #666;
    color: white;
}

.action .offline-header, .action #go-real-time, .action #offline-form-container {
    display: none;
}
.action-offline .realtime-header, .action-offline #quit-real-time, .action-offline .error-form  {
    display: none;
}

.realtime {
    display: inline-block;
    position: absolute;
    right:3px;
    top:3px;
}
.realtime button, #offline-form button {
    color: #fff;
    background: #666;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}
.realtime .realtime-button, #offline-form button {
    color: #333;
    background: whiteSmoke;
    font-weight: bold;
}

.pathway {
    list-style: none;
    margin:0;
    padding:0;
    overflow: hidden;
    width: 100%;
}
.pathway li {
  margin: 0 .5em 0 1em;
  background-color: #ddd;
  padding: .7em 1em;
  float: left;
  text-decoration: none;
  color: #444;
  position: relative;
}
.pathway li::before{
  content: "";
  position: absolute;
  top: 50%; 
  margin-top: -1.5em;   
  border-width: 1.5em 0 1.5em 1.1em;
  border-style: solid;
  border-color: #ddd #ddd #ddd transparent;
  left: -1em;
}
.pathway li::after{
  content: "";
  position: absolute;
  top: 50%; 
  margin-top: -1.5em;   
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1.1em solid #ddd;
  right: -1em;
}

.pathway li.done {
    background-color: #0c0;
    color: #fff;
}
.pathway li.done::before {
    border-color: #0c0 #0c0 #0c0 transparent;
}
.pathway li.done::after {
    border-left-color: #0c0;
}
.pathway li.current {
    background-color: #F90;
    color: #fff;
}
.pathway li.current::before {
    border-color: #F90 #F90 #F90 transparent;
}
.pathway li.current::after {
    border-left-color: #F90;
}
/*
.action li {
    display:inline-block;
}
.action li:after {
    content:" | ";
}
.action li:last-child:after {
    content:"";
}
*/

/* TABLE */ 
.nice-table {
    border-collapse: collapse;
    margin: 1em 0;
}
.full-size-table {
    width: 100%;
}
.nice-table th, .nice-table td {
    padding: .8em .5em;
}
.nice-table thead th {
    background: #eee;
    border-bottom: 1px solid #ccc;
}

.nice-table tfoot td {
    padding-top: 1em;
    text-align: right;
}
.nice-table tbody tr:nth-child(even) {
    background:#f2f2f2;
}
.nice-table tbody tr:nth-child(odd) {
    background:#fff;
}
.nice-table tbody tr:hover {
    background:#eee;
}

/* FORM */
.nice-form {
    padding:5px;
}
.nice-form  p > label {
    float:left;
    width:140px;
    margin-left:-150px;
    text-align:right;
}
.nice-form p > label.required {
    font-weight:bold;
}
.nice-form .required:after {
    content:" *";
}

.nice-form p {
    clear:left;
    margin:0;
    padding:5px 0 5px 150px;
    /*border-bottom:1px dotted #ccc;*/
}

.nice-form p:last-child {
    border-bottom:none;
}

.nice-form ul {
    list-style: none;
    margin: 0;
    padding:5px 0 5px 150px;   
}

.nice-form button, .nice-button, .nice-form .cancel {
    background-color:#333;
    border:none;
    border-radius:5px;
    color:#fff;
    font-weight:bold;
    padding: .3em .5em;
}
.nice-form button, .nice-button {
    background-color:#06c;
}
.nice-form .cancel  {
    background-color:#666;
    text-decoration:none;
}

#lights .small-button{
    margin-left: 25px;
}
.nice-form button:hover,.nice-button:hover, .nice-form .cancel:hover, .survey-dense .cancel:hover, #lights .cancel:hover {
    background-color:#333;
    cursor:pointer;
}
.nice-form .inline div {
    display:inline-block;
}

.nice-form .hasDatepicker {
    padding-right: 20px;
    background: url(../images/datepicker.png) no-repeat top right;
}


.nice-form .helptext {
    color:#888;
}

.nice-form .errorlist, #login-form .errorlist, .error-form {
    color: #D8000C;
    background-color: #FFBABA;
    border-radius: .4em;
    list-style: none;
    padding: .5em;
    padding-left:150px;
}
.error-form {
    padding: .5em;
}


a.nice-button {
    background-color:#666;
    border:none;
    border-radius:5px;
    color:#fff;
    font-weight:bold;
    padding: .3em .5em;  
    text-decoration:none;
}
a.nice-button:hover {
    background-color:#333;
    cursor:pointer;
}

#search-patient {
    background-color: #fff;
    border-radius:5px;
    padding: .5em;
    margin: 1em 0;
}

/* DIVERS */
.right {
    float:right;
}
.left {
    float:left;
}
.clear {
    clear: both;
}
.bold { 
    font-weight: bold;
}
.info, .success, .warning, .error, .validation {
    border: none;
    border-radius: 5px;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
}
.success {
    color: #4F8A10;
    background-color: #DFF2BF;
    background-image: url('../images/success.png');
}
.info  {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('../images/info.png');
}
.warning {
    color:#C09853;
    background-color: #FCF8E3;
    background-image: url('../images/warning.png');
}
.error {
    color:#B94A48;
    background-color: #F2DEDE;
    background-image: url('../images/error.png');
}


/* TREND*/
.trend {
    font-weight:bold;
    background-repeat: no-repeat;
    background-position: top right;
    padding-right:40px;
    min-height:40px;
}


/* Old Trends */
/***
.trend-1 {
    color:#808080;
    background-image:url('../images/arrows/32x32/unknown.png');
}
.trend1 {
    color: #FF0000;
    background-image:url('../images/arrows/32x32/arrow_bottom.png');
}
.trend2 {
    color: #FF8C00;
    background-image:url('../images/arrows/32x32/arrow_bottom_right.png');
}
.trend3 {
    color: #000000;
    background-image:url('../images/arrows/32x32/arrow_right.png');
}
.trend4 {
    color: #FF8C00;
    background-image:url('../images/arrows/32x32/arrow_top_right.png');
}
.trend5 {
    color: #FF0000;
    background-image:url('../images/arrows/32x32/arrow_top.png');
}
***/
.trend5 {
    color:#808080;
    background-image:url('../images/arrows/32x32/unknown.png');
}
.trend-2 {
    color: #FF0000;
    background-image:url('../images/arrows/32x32/arrow_bottom.png');
}
.trend-1 {
    color: #FF8C00;
    background-image:url('../images/arrows/32x32/arrow_bottom_right.png');
}
.trend0 {
    color: #000000;
    background-image:url('../images/arrows/32x32/arrow_right.png');
}
.trend1 {
    color: #FF8C00;
    background-image:url('../images/arrows/32x32/arrow_top_right.png');
}
.trend2 {
    color: #FF0000;
    background-image:url('../images/arrows/32x32/arrow_top.png');
}



h1 .autorefresh {
    font-size: .7em;
    font-weight: normal;
    color:#666;
}

/* OVERVIEW */
.display-option{
    float:right;
}

.display-option ul {
    display: inline;
    padding: 0;
}
.display-option a {
    padding-left: 22px;
}

#overview a {
    text-decoration:none;
}

.overview-survey {
    float:left;
    margin:.8em;
    width: 180px;
    height: 210px;
    border:1px solid #ccc;
    border-radius:.4em;
    background:whiteSmoke;
}

.overview-survey-dense {
    width: 180px;
    height: 210px;
    font-size:1em;
}

.overview-survey-large {
    width: 300px;
    height: 300px;
    font-size:1.3em;
}
.overview-survey-charts {
    width: 490px;
    min-height: 380px;
    background: #fff;
}

.overview-survey-charts .main-chart {
    padding: 0 .5em ;
    height: 290px;
}
.overview-survey-charts .chart {
    width:480px;
    height:200px;
}

.overview-survey:hover {
    box-shadow: 3px 3px 5px #7e7e7e;
    position: relative;
    bottom: 3px;
    right: 3px;
}

.overview-survey-red {
    box-shadow: 0px 0px 12px 6px #fe001a;
}

.overview-survey-red:hover {
    box-shadow: 0px 0px 12px 7px #fe001a;
}
.overview-survey .battery {
	margin-left: 80px;
	font-style:normal;
	font-size:.8em;
	width:55px;
}
.overview-survey .battery i[class^="icon-"]:before, .overview-survey .battery i[class*=" icon-"]:before {
  margin: 0;
}
.overview-survey h3 {
    display:block;
    position: relative;
    padding:0;
    background:#bbb;
    color:#fff;
    border-radius: .3em .3em 0 0;
}

.overview-survey .glucose-info {
    padding: .7em 0;
    background:#fff;
}
.overview-survey .glucose-info:hover {
    cursor:pointer;
}

.overview-survey .patient-comment, .patient-number, .hide  {
    padding: .3em .4em;
    display:inline-block;
}

.overview-survey .patient-number{
    background: #333;
    color: #fff;
    border-radius: .3em 0 0 0;
    font-weight:bold;
    font-size:1.2em;
}

.overview-survey .patient-comment {
    font-weight: normal;
    font-size:.9em;
}

.overview-survey .hide {
    position:absolute;
    right:0;
    background: #ccc;
    color: #fff;
    border-radius: 0 .3em 0 .3em;
}

.overview-survey .light {
    display: inline-block;
    vertical-align:top;
    margin:0 0 0 3px;
    text-align: center;
    text-transform: none;
    font-size: .7em;
    font-weight: bold;    
}

.overview-survey-dense .light, .more-data .light {
    width: 25px;
    height: 79px;
    background-image: url('../images/traffic-lights-mini2.png');
    background-repeat: no-repeat;
    background-position: -75px 12px;
}

.overview-survey-large .light {
    width: 45px;
    height: 140px;
    background-image: url('../images/traffic-lights-mini.png');
    background-repeat: no-repeat;
    background-position: -135px 15px;
}
.overview-survey-dense .battery {
	margin-left: 45px;
	font-style:normal;
	font-size:.8em;
	width:45px;
}

.overview-survey-dense .battery i[class^="icon-"]:before, .overview-survey-dense .battery i[class*=" icon-"]:before {
  margin: 0;
}

.overview-survey-dense .lightred, .more-data .lightred { background-position: 0 12px; }
.overview-survey-dense .lightgreen, .more-data .lightgreen { background-position: -25px 12px; }
.overview-survey-dense .lightyellow , .more-data .lightyellow { background-position: -50px 12px; }
.overview-survey-dense .lightnone, .more-data .lightnone { background-position: -75px 12px; }

.overview-survey-large .lightred { background-position: 0 15px; }
.overview-survey-large .lightgreen { background-position: -45px 15px; }
.overview-survey-large .lightyellow { background-position: -90px 15px; }
.overview-survey-large .lightnone { background-position: -135px 15px; }

.overview-survey .center {
    display:inline-block;
    text-align: center;
    width: 62%;
}

.overview-survey .loop {
    font-size: .8em;
    text-align:center;
}

.overview-survey .trend {
    display:inline-block;
    vertical-align:top;
    width:30px;
    height:30px;
    padding:0;
    margin-top:1em;
}

.overview-survey-dense .trend {
    width:30px;
    height:30px;
}
.overview-survey-large .trend {
    width:50px;
    height:50px;
}

.overview-survey .cgm {
    display:inline-block;
    vertical-align:top;
    margin-top: .5em;
    text-align:center;
}

.overview-survey-dense .cgm {
    width:72px;
}

.overview-survey-large .cgm {
    width:auto;
}

.overview-survey .cgmmessage {
    font:bold 1em Verdana;
}

.overview-survey .cgmvalue {
    font:bold 1.5em Verdana;
}
.overview-survey .cgmunit {
    font-size: .7em;
    color:#666;
}
.overview-survey .cgmtime {
    font-size: .7em;
    font-style: italic;
    color:#666;
}

.overview-survey .alert {
    font-size: 0.8em;
    border:none;
    border-top:1px solid #ddd;
    border-radius:0;
    margin:0;
    padding:.4em;
}
.overview-survey .prio-info, .overview-survey .prio-warning, .overview-survey .prio-danger {
    padding:.4em .1em .4em 35px;
}
.overview-survey-dense .prio-info, .overview-survey-dense .prio-warning, .overview-survey-dense .prio-danger {
    padding:.4em .1em .4em 22px;
}
.overview-survey-list .prio-info, .overview-survey-list .prio-warning, .overview-survey-list .prio-danger {
    padding:.4em .1em .4em 22px;
}
.overview-survey-dense .prio-info, .overview-survey-list .prio-info {
    background-image: url('../images/info_mini.png');
}
.overview-survey-dense .prio-warning, .overview-survey-list .prio-warning {
    background-image: url('../images/warning_mini.png');
}
.overview-survey-dense .prio-danger, .overview-survey-list .prio-danger {
    background-image: url('../images/error_mini.png');
}

.overview-survey .last-note {
    padding:.4em;
    font-size: 0.8em;
    background:whiteSmoke;
    overflow: auto;
    height: 30px;
    border-top:1px solid #ddd;
    transition: .4s;
	-moz-transition: .4s;
	-webkit-transition: .4s;
}
.overview-survey .last-note:hover {
    height:100px;
    padding-bottom:.5em;
}
.last-note .title {
    font-weight: bold;
}
.last-note .date {
    font-style: italic;
}
.last-note .type {
    font-size: .8em;
    border-radius: .4em;
    padding: .2em .4em;
    color: #fff;
}

.overview-survey-charts .light, .overview-survey-charts .center {
    display: none;
}
.overview-survey-charts .action {
    text-align: center;
}


/* SURVEY LIST */

.overview-survey-list {
    background-color: #eee;
    border:1px solid #333;
    border-radius: .3em;
    color:#666;
    margin: 8px 15px 0 0;
    width:48%;
    float:left;
    position:relative;
}

.overview-survey-list:hover{
    box-shadow: 3px 3px 5px #7e7e7e;
    position: relative;
    bottom: 3px;
    right: 3px;
    cursor:default;
}

.overview-survey-list-red{
    box-shadow: 0px 0px 10px 4px #fe001a;
}
.overview-survey-list-red:hover{
    box-shadow: 0px 0px 10px 7px #fe001a;
}

.overview-survey-list .list-data{

}
.overview-survey-list .list-item{
    color: #666;
}

.overview-survey-list .patient-number{
    background: #333;
    color: #fff;
    border-radius: .2em 0 0 .2em;
    font-weight:bold;
}
.overview-survey-list .patient-number:hover{
    background: #999;
}
.overview-survey-list .small-light{
    background-repeat: no-repeat;
    background-position: bottom right;
    height:16px;
    padding-right:16px;
    padding-bottom:0px;
}
.overview-survey-list .small-light-red{
    background-image:url('../images/light_red.png');
}
.overview-survey-list .small-light-yellow{
    background-image:url('../images/light_yellow.png');
}
.overview-survey-list .small-light-green{
    background-image:url('../images/light_green.png');
}
.overview-survey-list .small-light-none{
    background-image:url('../images/light_none.png');
}

.overview-survey-list .color-block {
    display: inline-block;
    width: 10px;
    height: 10px; /* Adjust height as needed */
    margin-right: 2px;
    border: 1px solid #000;
    background-color: transparent;
}

/* Define colors for color blocks */
.green { background-color: #00ff51; }
.red { background-color: red; }
.orange { background-color: orange; }
.grey { background-color: lightgrey; }



.overview-survey-list .cgmvalue{
    font: bold 1.2em Verdana;
    padding-left:6px;
    width: 35px;
    text-align: right;
    display: inline-block;
}

.overview-survey-list .cgmunit{
    font-size: .8em;
}

.overview-survey-list .cgmtime{
    font-size: .8em;
    padding-left:.4em;
}

.overview-survey-list .trend {
    font-weight:bold;
    background-repeat: no-repeat;
    background-position: bottom right;
    padding-right:16px;
    padding-bottom:1px;
}

.overview-survey-list .trend-mini5 {
    color:#808080;
    background-image:url('../images/arrows/16x16/unknown.png');
    background-color: #eee;
}
.overview-survey-list  .trend-mini-2 {
    color: #FF0000;
    background-image:url('../images/arrows/16x16/arrow_bottom.png');
}
.overview-survey-list  .trend-mini-1 {
    color: #FF8C00;
    background-image:url('../images/arrows/16x16/arrow_bottom_right.png');
}
.overview-survey-list  .trend-mini0 {
    color: #000000;
    background-image:url('../images/arrows/16x16/arrow_right.png');
}
.overview-survey-list .trend-mini1 {
    color: #FF8C00;
    background-image:url('../images/arrows/16x16/arrow_top_right.png');
}
.overview-survey-list .trend-mini2 {
    color: #FF0000;
    background-image:url('../images/arrows/16x16/arrow_top.png');
}

.overview-survey-list .loop{
    display: inline-block;
    padding-left: .4em;
    font-size: .8em;
}

.overview-survey-list .alert-mini {
    float:right;
    width:auto;
    min-height: 18px;
    display:block;
    border:none;
    margin:0;
    padding: 3px 22px 2px 20px;
}

.overview-survey-list .more{
    background-color: #333;
    color: #fff;
    border-radius: 0 .2em .2em 0;
    position: absolute;
    right:0;
    height:100%;
    display:inline-block;
    font-weight: bold;
    width:20px;
    text-align:center;
}
.overview-survey-list .more:hover{
    cursor: pointer;
    background-color: #999;
}

.list-data:hover .overview-survey-list .more-data{
    height:50px;
}

.overview-survey-list .more-data {
    background-color: whiteSmoke;
    border-top:1px solid #ccc;
    border-radius: 0 0 .3em .3em;
    color:#333;
    display: none;
    overflow:hidden;
    position:relative;
    padding:1em;
}

.overview-survey-list .last-note {
    font-size: 0.85em;
}

.overview-survey-list .alert {
    margin:.5em 0;
    font-size: 0.85em;
}

.more-data .two-column {
    position:relative;
    width:50%;
    float:left;
    min-height: 80px;
}
.more-data .light, .more-data .center, .more-data .aside {
    display:inline-block;
    margin:0;
    vertical-align:top;
}
.more-data .light {
    width:25px;
    font-size: .7em;
}
.more-data .center {
    width:150px;
    padding:.4em;
    font-size: 1em;
}
.more-data .cgm, .more-data .trend {
    float:left;
}
.more-data .cgm {
    font-size: 1.3em;
    width:70%;
}
.more-data .cgmvalue {
    width:auto;
}
.more-data .trend {
    padding-left:15px;
}
.more-data .aside {
    width:200px;
    padding:.4em;
}
.more-data .links{
    float:right;
    padding:.2em;
}

/* sprite */
.sprite {
    background-image: url('../images/sprite.png');
    background-repeat: no-repeat;
}
.sprite-arrow-right { background-position: 3px 3px; }
.sprite-arrow-down { background-position: 3px -20px; }
.sprite-display-list { background-position: 3px -38px; }
.sprite-display-dense { background-position: 3px -58px; }
.sprite-display-large { background-position: 3px -78px; }
.sprite-display-charts { background-position: 3px -98px; }


/* Notes */

.notes {
    display: block;
    width: 600px;
    vertical-align:top;
    font-size: 1.2em;
    color: #333;
}
#content .notes h2 {
    margin:.5em 0;
}

#popin_form_container h3, #popin_edit_form_container h3 {
    text-align: center;
}
.notes_list {
    max-height: 160px;
    overflow:auto;
}
.notes_list .note {
    border-bottom:1px solid #eee;
}
.notes_list .note:last-child {
    border-bottom:none;
}

.note {
    border-radius:.4em;
    background-color:whiteSmoke;
    padding: .5em 0;
    margin: .2em 0;
}
.note .text {
    padding-left:90px;
}
.note .date {
    color:#666;
}
.note .note-Medical {
    color: #06c;
}
.note .note-Technical {
    color: #F90;
}
.note .note-General {
    color: #666;
}
.note .type, .note .number, .note-in-graph {
    font-size: .8em;
    border-radius: .4em;
    background-color: #666;
    padding: .2em .4em;
    color: #fff;
    float: left;
}
.note .number, .note-in-graph, .note-in-graph a {
    background-color: #000;
    color:#fff !important;
}
.note-Medical .type, .last_note-Medical .type {
    background-color: #06c;
}
.note-Technical .type, .last_note-Technical .type {
    background-color: #F90;
}
.note-General .type, .last_note-General .type {
    background-color: #666;
}
.note .signed {
    font-size:0.8em;
    font-style: italic;
    text-align: right;
    color:#666;
}

.detailsonpatient {
    display: inline-block;
    vertical-align: top;
    max-width: 400px;
    
}

.details-block {
    display: block;
    border:1px solid #ccc;
    border-radius:5px;
    padding:.5em;
    margin:5px;
}
#content .details-block h2 {
    margin-top:0px;
}

/* Battery */
.device {
    border:1px solid #ccc;
    border-radius:5px;
    text-align: center;
    padding:.5em;
}
.battery {
    border:1px solid #ccc;
    border-radius:5px;
    text-align: center;
}

.battery-green {
    background-color:#00ff51;
}
.battery-yellow {
    background-color:#fefe56;
}
.battery-red {
    background-color:#ff001a;
}
.battery-unknown {
    background-color:#eee;
}

/* Forms */
.sound-ON {
    background:url('../images/sound.png') no-repeat top right;
    padding-right:16px;
    padding-top: 2px;
    color: #06C;
}
.sound-ON:hover {
    text-decoration: underline;
}

.sound-OFF {
    background:url('../images/mute.png') no-repeat top right;
    padding-right:19px;
    padding-top: 2px;
    color:#fe001a;
}
.sound-OFF:hover {
    text-decoration: underline;
}
.sound_big span {
    color:#06c;
}
.mute_big span {
    color:#fe001a;
}

/* correct jquery ui */
.ui-widget { font-family: Arial, sans-serif; font-size: 1.0em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget-content a { color:#06c; }
.ui-widget-content a.small-button { color:#000; text-decoration:none; }
.ui-widget-content a.nice-button { color:#fff; text-decoration:none; }

@media all and (max-width: 640px) { 
    /* �l�ments de largeur fixe � passer en largeur automatique */ 
    body, #container, #main, #content, #navigation, #member-menu { 
        width: auto !important; 
        margin: auto !important; 
        padding: 0 !important; 
        display: block;
        float:none;
    } 
    #content {
        padding-top:.5em;
    }
    #navigation ul {
        margin-bottom:.5em;
    }
    #navigation li {
        display:inline-block;
    }
    #navigation a {
        border-radius:5px;
    }
    
}

/* monitor tag (cgm, meal, etc) pop ups */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 220px;
  background-color: #222;
  color: #fff;
  text-align: left;
  padding: 6px 10px;
  border-radius: 4px;

  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);

  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 13px;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}