/* 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; }

.footer {
    font-size: 80%;
    background-color: #f8f9fa;
    color: #9a1629;
    margin-top: 2rem;
}

a { text-decoration:none; }

#bg_home {
    background: url(../img/bg.jpg) no-repeat center fixed;
    background-size: cover;
}

.nowrap { white-space: nowrap; }

#user-bar-xs { display: none; }
#user-bar-xl { display: block; }
.user-bar { position:absolute; top:40px; right:5vw; color:black; font-size:80%; }
.user-bar a { color: black; font-weight: bold; }
#user-tools {
  background-color: white;
  opacity: 0.6;
  border-radius: 5px 5px 0 0;
}

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

ul.errorlist { 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; }
ul.form-check-input { position: relative; list-style-type: none; }
.datetime_widget { display: flex; }
.datetime_widget div + div { max-width: 8em !important; margin-left: 1em; }
.input-group.dbdp { max-width: 12em; }

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; }
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_remarque, textarea#id_remarque_privee { width: 100%; height: 2em; }
textarea#id_projet, textarea#id_texte { width: 100%; height: 15em; }
select#id_motif_fin_suivi { width: 100%; }

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=JournalForm] textarea#id_texte { width: 100%; }
form[name=BilanAsaefForm] textarea { width: 100%; height:2em; }
form[name=BilanAnalyseAsaefForm] textarea { width: 100%; height:2em; }
form[name=ProlongationAsaefForm] textarea { width: 100%; height:6em; }
input#id_duree { width: 6em; }

input#id_npa, input#id_npa_actuelle { width: 4em; }
input#id_sigle { width: 8em; }

span.date_theorique { color:#FF8000; font-style: italic; }
span.hoverimage { visibility: hidden; }
div:hover > span.hoverimage { visibility: visible; }

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; }

table#stat_table th.month { text-align: center; width: 70px; }
table#stat_table th.total { text-align: center; width: 90px; }

#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 td.app_line { background-color: #eee; }
#stat_table td.num { text-align: right; }
#stat_table tr.first td { border-top: 1px solid #999; }

ul[id=id_mandat_ope] li, ul[id=id_motif_demande] li, ul[id=id_demarche] li { margin-right: 3.5em; }

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;
}
.btn-round {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    line-height:0.5rem;
    padding: 0;
    margin: 0;
}

.current-letter { padding: 0 0.2rem; color: white; background-color: rgb(0, 123, 255); }
.current-letter:hover { color: white; background-color: #0062cc; }

.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%;}
.select-container { float: right; margin-left: 0.5em; }
select#id_interv { max-width: 12em; }
input#id_letter { width:10em; }

.left-label { width: 15em; }

.icon { width:20px; height:20px; }
.no-text { color: gray; font-style: italic; }

@media (min-width: 500px) {
    .document-container { column-count: 2; }
}

.document { line-height: 1; }

.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:30; background: white; }
/* Needed because of bootstrap reboot */
.calendar caption { caption-side: top; background: #fff3f3; }

.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; }

@media screen and (max-width: 700px) {
  .select-container { font-size: 8pt; }
  #user-bar-xs { display: block; }
  #user-bar-xl { display: none; }
}

/* ASAP */
#asap-form-sortie ul li {display: inline; margin-right:10px;}
.page-header { margin-bottom: 30px;}

@media screen and (max-width: 700px) {
  .page-header { font-size: 180%; }
}

#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: 2em;

}
#id_mandat_ope label, #id_motif_demande label, #id_demarche label {
  font-weight: normal;
}
#id_search_famille, #id_search_ref_aemo { width: 200px;}

#reset-button img, #search-button img { height: 18px; }

input[type=number] {width: 80px;}

.width_5 { width: 5%;}
.width_15 { width: 15%;}
.width_25 { width: 25%;}
.width_50 { width: 50%;}
.width_75 { width: 75%;}