header { background-color: #fff3f3; }

a { text-decoration: none; }
a:hover:not(.btn) {text-decoration: underline; }

#logo-cr { display: block; height: 70px; margin: 4px; }
#bandeau-cr { display: block; width: 100%; height: 15px; }
#menu_crne { font-size: 80%; }

/* This CSS allows the footer to be always at bottom */
div.top-container { display: flex; min-height: 100vh; flex-direction: column; }
.main-content { flex: 1; }

.hidden { display: none; }
.red { color: red; }
.green { color: green; }
.orange { color: orange; }
.footer {
    font-size: 80%;
    background-color: #f8f9fa;
    color: #9a1629;
    margin-top: 2rem;
}
.spaceabovetr > td { padding-top: 0.7em; }

#bg_home {
    background: url(../img/SRK_DL_Portal.jpg) no-repeat center fixed;
    background-size: cover;
}
#home-app-line { position:absolute; bottom:112px; left:5%; }

.small { font-size: 0.9rem; }
.nowrap { white-space: nowrap; }
.icon-ui { display: inline-block; width: 1rem; height: 1rem; }
img.ficon { height: 1.5em; width: 1.5em; vertical-align: bottom; }
input[readonly] { background-color: #eee; }
#search-button, #reset-button { height: 2rem; min-width: 2.7rem; }
#reset-button img { height: 18px; }

td.zero { color: #ccc; }
#user-bar { position:absolute; top:40px; right:5vw; font-size:80%; }
#user-bar a, #user-bar button { color: #9c1717; font-weight: bold; }
#user-bar button { font-size: inherit; text-decoration: none; }
#user-bar button:hover { text-decoration: underline; }
#user-tools * { vertical-align: middle; }

/* For usage inside bs modal */
.select2-dropdown { z-index: 1100 !important; }

ul.errorlist, ul.nobullets { list-style-type: none; padding-left: 0; }
ul.errorlist li {
    background-color: #f8d7da;
    color: #721c24;
    font-weight: bold;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid #ebcccc;
    border-radius: .25rem;
}
form.inline { display: inline-block; }
form label { font-weight: bold; }
.custom-file-label::after { content: 'Choisir'; }
form[name=LoginForm] input[type=text], form[name=LoginForm] input[type=password] { width: 20em; }
input[type=text], input[type=email] { width: 100%; }
#id_auth-username { width: auto; }
#id_mois, #id_annee { width: auto; display: inline-block; }
input:disabled + span.datetimeshortcuts { display: none; }
input:disabled + label { color: #999; font-style: italic }
input.card-text { width: 4em; }

textarea { min-height: 3em; }
textarea#id_note { width: 35em; height: 2em; }
textarea#id_scolarite, textarea#id_loisirs, textarea#id_activite{ width: 100%; height: 4em; }
textarea#id_referent_note, textarea#id_allergies, textarea#id_remarque, textarea#id_remarque_privee,
textarea#id_remarques {
  width: 100%; height: 2em;
}
textarea#id_projet, textarea#id_texte { width: 100%; height: 15em; }
select#id_motif_fin_suivi { width: 100%; }
#id_niveau_interv { width: 5em; }

#id_equipe.immediate-submit { width: auto; display: inline-block; }

form[name=DemandeForm] th { width: 25%; }
form[name=DemandeForm] input[type=text] { width: 100% }
form[name=DemandeForm] textarea#id_remarque { width: 100%; height: 2em; }
form[name=DemandeForm] textarea#id_autres_contacts { width: 100%; height:2em; }

form[name=PrestationForm] textarea#id_texte { width: 100%; }
form[name=PrestationForm] th { width: 12em; }

form[name=Suivi] input#id_service_annonceur { width: 80%; }
form[name=Suivi] textarea { width: 100%; height: 2em;}

form[name=JournalForm] textarea#id_texte { width: 100%; }
form[name=FamilleForm] textarea#id_motif_detail { width: 100%; height: 5em; }
input.vDateField { width: 7em; display: inline-block; }
input.TimeField { width: 4em; margin-left: 0.5em; }
input#id_duree { width: 6em; }
input#id_username { width: none; }
input#id_npa, input#id_npa_actuelle { width: 4em; }
input#id_sigle { width: 8em; }
#id_groups label, .choicearray label, .filter-form label, #id_lib_prestation label,
#id_membres label, #id_sig_interv label, #id_pres_interv label, #id_roles label { font-weight: normal; }
#id_roles { column-count: 2; }

tr.decedee td:first-child:before {
  content: '† ';
}
tr.decedee td {
  font-style: italic;
  opacity: 0.8;
}
span.date_theorique { color:#FF8000; font-style: italic; }
span.hoverimage { visibility: hidden; }
span.hoverimage img { cursor: pointer; }
div:hover > span.hoverimage, summary:hover > span.hoverimage { visibility: visible; }

#benef_table > tbody > tr > td { padding: 2px 0.3em; line-height: 1.2em; }

table.statut_suivi td {
    min-width: 35px;
    padding: 0;
    font-size: 10px;
    background-color: #eee;
    border: 1px solid #ccc;
    text-align: center;
}
table.statut_suivi { margin-top: 4px;}
table.statut_suivi td.filled { background-color: #AACDAA; }
table.statut_suivi td.current { background-color: #FFDB78; }

table.statut_suivi td div.filled { background-color: #AACDAA; }
table.statut_suivi td div.next { background-color: #F2F5A9; }
table.statut_suivi td div.urgent { background-color: #FF8000; }
table.statut_suivi td div.depasse { background-color: #FF0000; }

.stat_table th { padding-top: 1.5em; text-align: right; }
.stat_table th.month { text-align: right; width: 90px; }
.stat_table th.total { text-align: right; width: 90px; }
.stat_table th.left { text-align: left; }
.stat_table .app_line { background-color: #eee; }
.stat_table td.num { text-align: right; }
.stat_table tr.first td { border-top: 1px solid #999; }
.stat_table .subdiv2 td { background-color: beige; font-style: italic; }

p.app_line { background-color: #eee; padding: 0.2em 0 0.6em 0.2em; }

#id_mandat_ope, #id_motif_demande, #id_demarche {
  display: flex; flex-wrap: wrap;
}
#id_mandat_ope > div, #id_motif_demande > div, #id_demarche > div {
  padding-right: 1.5em;
}
#id_mandat_ope label, #id_motif_demande label, #id_demarche label {
  font-weight: normal; padding-right: 2em;
}
/* padding needed for bootstrap style */
#id_motif_demande { padding-left: 2rem; }

#id_demande_prioritaire label { padding-left: 2rem; }

table-condensed td{ padding:1px; }

.btn-mini {
    line-height:14px;
    font-weight:800;
}
.btn-xs {
  padding: .2rem .2rem;
  font-size: .750rem;
  line-height: 1;
  border-radius: .2rem;
}

.modal-lg input[type=text] { margin-bottom: 1em; }
.modal-lg input[name=theme] { width: 160%; }
.modal-lg textarea { width: 160%; }
th {
    vertical-align: top;
}

a[role=button] { margin-left: 0.4em; }

.topnav-right {font-size: 95%;}
.selection_form { display: flex; justify-content: flex-end; flex-wrap: wrap; }
.select-container { margin-left: 0.5em; }
select#id_interv { max-width: 12em; }
input#id_letter { width:10em; }

ul.nav-prestations .nav-link.active {
  font-weight: bold;
  font-size: 110%;
}

.left-label { width: 15em; }

.icon { width:20px; height:20px; }
.icon-xs {width:15px; height:15px; }

.table-absence {
    display: block;
    overflow-y: scroll;
    max-height:300px;
}

.table-fixed tbody {
    height: 300px;
    overflow-y: auto;
    width: 100%;
}


.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
    display: block;
    background-color: white;
}

.table-fixed tbody td,
.table-fixed tbody th,
.table-fixed thead > tr > th {
    float: left;
    position: relative;

    &::after {
        content: '';
        clear: both;
        display: block;
    }
}

.bg-success-2 { background-color: #d3ffd0;}
.bg-warning-2 { background-color: #FAF1B8; }
.bg-primary-2 { background-color: #B8C3FA; }
.bg-danger-2 { background-color: #F7E4E3 }

.bg-danger-3 { background-color: #fff5f5; }
.bg-success-3 { background-color: #edfced; }

.calendarbox { z-index:1100; background: white; }
/* Needed because of bootstrap reboot */
.calendar caption { caption-side: top; background: #fff3f3; }

.popup textarea#id_texte { width:100%; height:2em; }

.table-ext-bordered {
  border-width:1px;
  border-style:solid;
  border-color:lightgray;
  padding:2px;
}

.table-wrapper { display: block; position: relative; overflow: auto; }

.prestation_titre { background-color: #fcf0c6; font-weight: bold; }
table.prestations th { position: sticky; top: 0; }
table.prestations td.total { font-weight: 600; background-color: #eee; text-align: center; }
table.prestations th.mesprest, table.prestations td.mesprest { text-align: right; }
table.prestations th.action, table.prestations td.action { text-align: right; }

p.secret {
  background-color: #eee;
  border-radius: 0.5em;
  padding: 0.5rem;
  font-style: italic;
}

/* Image modal styles */
div.modal-image {
  display: none; position: fixed; z-index: 100; padding-top: 100px;
  left: 0; top: 0; width: 100%; height: 100%; overflow: auto;
  background-color: rgba(0,0,0,0.6);
}
img.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}
#modalClose {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

#modalClose:hover, #modalClose:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
/* End of Image modal styles */

#id_rythme { width: 100%; height:4em; }

.red {color: red;}

.table-sortable > thead > tr > th[data-col] {
    cursor: pointer;
    position: relative;
}

.table-sortable > thead > tr > th[data-col]:after,
.table-sortable > thead > tr > th[data-col]:after,
.table-sortable > thead > tr > th[data-col]:after {
    content: ' ';
    position: absolute;
    height: 0;
    width: 0;
    right: 10px;
    top: 16px;
}

.table-sortable > thead > tr > th[data-col]:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #ccc;
    border-bottom: 0px solid transparent;
}

.table-sortable > thead > tr > th[data-col]:hover:after {
    border-top: 5px solid #888;
}

.table-sortable > thead > tr > th.desc:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 0px solid transparent;
    border-bottom: 5px solid #333;
}
.table-sortable > thead > tr > th.desc:hover:after {
    border-bottom: 5px solid #888;
}

.table-sortable > thead > tr > th.asc:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #333;
    border-bottom: 5px solid transparent;
}

.vDateField-rounded {
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    border-radius: 0.375rem;
    border: 1px solid #ced4da;
}

.search-form-fields {
    width: 200px !important;
    margin-bottom: 5px;
}