p {
    margin-bottom: 0em;
}

.hr-theme-slash-2 {
    display: flex;
}

.hr-line {
    width: 100%;
    position: relative;
    margin: 15px;
    border-bottom: 1px solid #000;
}

.hr-icon {
    position: relative;
    top: 3px;
    color: #000;
}

/* === */
#navbarDefault {
    border-bottom: 1px solid rgb(36, 65, 117);
}

.navbar {
    padding: .25rem 1rem;
}

.navbar-shaded {
    border-bottom-color: #e7e7e7;
    border-radius: 4px;
    border: 2px solid transparent;
}
.nav-item {
    border: 1px solid transparent;
    margin-left: 0.4em;
    margin-right: 0.4em;
}
.nav-item:hover {
    border: 1px solid rgb(122, 122, 218);
    border-radius: 5px;
}

.navbar-brand-logo img {
    width: 4em;
    _margin-bottom: 1em;
}
#left-menu { margin-left:1rem; }
.right-menu { margin-left:auto; }

.title-zone {
    min-height: 6em;
}
.title-zone table.title {
    width:100%;
}
.title-zone table.title td.left, .title-zone table.title td.right   {
    width:22em;
}
.title-zone table.title td.center   {
    width:auto;
}



/* === ASYNC Messages */
#async-download-waitMessage {
    display: block;
    width: 100%;
    text-align: center;
    padding: 1em;
    background-color: yellow;
    font-weight: bold;
}

/* === Shaded Gradient button */
/* Acc-to:
    https://webdesignerwall.com/tutorials/css3-gradient-buttons 
    https://webdesignerwall.com/demo/css-buttons.html
*/
.grad_but {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.grad_but:hover {
	text-decoration: none;
}
.grad_but:active {
	position: relative;
	top: 1px;
}

/* === */
ul.horizontal-list {
    list-style-type: none;
    padding: 0;
}

ul.horizontal-list li {
    display: inline-block;
}

.flex-container {
    display: flex;
    /* align-items: center; */
}
/* === */
.title-zone table.title .grad_but   {
    width:21em;
    padding-left:0.5em;
    padding-right: 0.5em;
    margin-right: 2em;
}
.title-zone table.title .grad_but i, .title-zone table.title .grad_but svg  {
    margin-right: 0.4em;
}
div.PDF-PPT-ZIP {
    width: max-content;
}
.title-zone table.title div.PDF-PPT-ZIP {
    font-weight: bold;
}
.title-zone table.title div.PDF-PPT-ZIP a.grad_but {
    width: 6em;
    margin-right: 0.3em;
}
/* === */

.bold { font-weight: bold; }

/* blue */
.blue {
	color: #d9eef7;
	border: solid 1px #0076a3;
	background: #0095cd;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	background: -moz-linear-gradient(top,  #00adee,  #0078a5);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
    color: #d9eef7;
	background: #007ead;
	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
	background: -moz-linear-gradient(top,  #0095cc,  #00678e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
	color: #80bed6;
	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
	background: -moz-linear-gradient(top,  #0078a5,  #00adee);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}

/* grad_but aquamarine #7FFFD4 cf: https://cssgradient.io/ */
.aquamarine {
    color: #006666;
    border: solid 1px #5ebdb9;
    background: #7FFFD4;
    background: -webkit-gradient(linear, left top, left bottom, from(#7FFFD4), to(#66d6ae));
    background: -moz-linear-gradient(top,  #7FFFD4,  #66d6ae);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7FFFD4', endColorstr='#66d6ae');
}
.aquamarine:hover {
    color: #004d4d;
    background: #66d6ae;
    background: -webkit-gradient(linear, left top, left bottom, from(#66d6ae), to(#4dac8c));
    background: -moz-linear-gradient(top,  #66d6ae,  #4dac8c);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#66d6ae', endColorstr='#4dac8c');
}
.aquamarine:active {
    color: #004d4d;
    background: #4dac8c;
    background: -webkit-gradient(linear, left top, left bottom, from(#4dac8c), to(#66d6ae));
    background: -moz-linear-gradient(top,  #4dac8c,  #66d6ae);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4dac8c', endColorstr='#66d6ae');
}


/* === NAVBAR === */
.navbar-nav li a {
    font-weight: bold;
    color: rgb(64, 64, 64);
}
a.nav-link.active:hover {
    color:white;
    background-color: rgb(191, 226, 255);
    border-radius: 4px;
    /* font-weight: bold; */
}

a.dropdown-item:hover {
    /* color:white; */
    background-color: rgb(191, 226, 255);
    font-weight: bold;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

/* === */

body {
    padding: 0;
    margin: 0 0 0 32px;
    font-family: sans-serif;
    background: white;
      background-position-x: 0%;
      background-position-y: 0%;
      background-repeat: repeat;
      background-attachment: scroll;
      background-image: none;
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-attachment: scroll;
    background-image: none;
    background-position: top left;
    background-attachment: fixed;
    background-repeat: no-repeat;
  }
body.project.listView {
    --project-left-col: 13.6em;
    margin: 0;
}

div.alert {
    margin: 0.35em 1em 0.35em 1em;
    --bs-alert-margin-bottom: 0.35em;
    padding: 0.35em 1em 0.35em 1em;
    --bs-alert-pading-y: 0.35em;
}

#main_title { margin-top: 1em; }

#navbarDefault {
    margin-left: 32px;
}

footer img.logo {
    width:75px;
    margin: 0.4em 0 0.2em 0;
    height:40px;
}

.TLstatus {
    position: fixed;
    font-size: 0.9em;
    font-weight: 800;
    left: 0em;
    top: 0em;
    text-align: right;
    vertical-align: middle;
    width: 20em;
    height: 20em;
    z-index: -1;
    opacity: 0.8;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.TLstatus div {
    background: rgb(0, 90, 156);
    padding: 0.25em 2.25em 0.4em 0em;
    height: 2em;
    color: white;
}

div.container {
    max-width: calc(98% - 8em);
    margin-left: 0.2rem;
    margin-right: 0.2rem;
}

div.table-responsive.listView  {
    height: 50em;
}


#cke_id_content {
    width: 100%!important;
}

.django-ckeditor-widget {
    display: block!important;
}

#loader {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(255, 255, 255);
  z-index: 9999;
}

#loader .spinner-border {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Masquer l'input original */
input[type=checkbox].toggle {
  display: none;
}

/* Ajouter un span pour créer l'apparence du switch */
input[type=checkbox].toggle + span {
  display: inline-block;
  width: 32px;
  height: 16px;
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  background-color: #dddddd;
  border-radius: 16px;
  transition: background-color 0.3s ease-in-out;
}

/* Ajouter le cercle intérieur qui représente l'état de la case à cocher */
input[type=checkbox].toggle + span::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform 0.3s ease-in-out;
}

/* Appliquer une transformation lorsque la case est cochée */
input[type=checkbox].toggle:checked + span::before {
  transform: translateX(16px);
}

/* Appliquer une couleur de fond différente lorsque la case est cochée */
input[type=checkbox].toggle:checked + span {
  background-color: #007bff;
}

.datetimerinput {
    width: 100%;
    padding-bottom: 0.2em;
    padding-top: 0.2em;
}

#page-content div h1 {
    margin-bottom: 0;
}

/* === Projects :: FIXED-TABLE === */

div.fixed-table-container {
    margin-left: 0.5em;
}

/* === Projects :: CARDS === */

div.fld_download_docs a, div.fld_download_docs a:hover {
    text-decoration: none;
}
div.fld_download_docs a.download_but {
    border: solid 1px transparent;
    padding: 2px;
    margin-left: 0;
    margin-right: 0.2em;
}
div.fld_download_docs a.download_but:hover {
    border: solid 1px rgb(31, 5, 150);
    border-radius: 0.5em;
}

div.fld_download_docs a {
    font-weight: bold;
    margin: 0.15em 0.2em 0.15em 0;
}
div.fld_download_docs a:hover {
    font-weight: bold;
}
div.fld_download_docs a svg {
    margin-right: 0.2em;
}

div.fld_download_docs .pdf_but, div.fld_download_docs .ppt_but {
    border: solid 1px grey;
    border-radius: 0.4em;
    padding: 0.15em 0.5em 0.0em 0.5em;
    margin: 0 0.4em 0 0.0em;
    background-color:bisque;
}
/* div.fld_download_docs .ppt_but {
    border: solid 1px grey;
    border-radius: 0.4em;
    padding: 0.3em 0.5em 0.0em 0.5em;
    margin: 0 0.4em 0 0.4em;
    background-color:bisque;
} */

a.pdf_but:hover, a.ppt_but:hover {
    border: solid 1px rgb(31, 5, 150);
    background-color:rgb(64, 50, 185);
    color:rgb(255, 255, 255);
}


/* === */

p.baseline {
    color: rgb(147, 98, 24);
    font-weight: bold;
    font-style: italic;
    margin-bottom: 0.2em;
}

#ValidateSelection {
    width: 40em;
    margin: 1em 2em;
}
#ValidateSelection a {
    font-weight: bold;
}

#title_page_SelOnly h3 {
    margin: 0.4em;
}
td.NewContribs-empty {
    background-color:rgb(255, 253, 236);
    border: solid 1px grey;
}
td.new-project {
    background-color:rgb(255, 253, 236);
    border: solid 1px white;
}
td.projTitle.new-project {
    display: flex;
}
td.projTitle .remove-wishlist {
    padding: 0 0.4em 0 0;
}
td.projTitle .add-wishlist {
    padding: 0 0.4em 0 0;
}
div.float-left.pagination-detail {
    /* color: red; */
    margin-left: 1em;
    display: none;
}

.selMrk {
    width: 1.4em;
}

#menu-emails span {
    margin: 0.5em 0em 0 0.7em;
}

form.but-send-emails {
    margin-left: 2em;
}
a.create-user {
    font-weight: bold;
}
form.but-send-emails button {
    font-weight: bold;
}
span.green {
    color: green;
}
/* === Projects :: FILTER ZONE === */
.flex {
    display: flex;
}
#search_zone {
    margin-top: 7em;
}
#data_zone {
    width: 95%;
}
#AnnounceZone {
    width:100%;
    align-items: center;
}
#Announce {
    margin-top: 4em;
    margin-bottom: 4em;;
    _border: 1px solid rgb(47, 61, 124);
    _background: rgb(245, 237, 220, 0.85);
    padding: 2em 4em;
}

#FLTzone {
    border: 1px solid rgb(47, 61, 124);
    background: rgb(245, 237, 220, 0.85);
    padding: 0.45em 0.25em 0.25em 0.25em;
}
#FLTzone div.title {
    font-weight: bold;
}
#FLTzone div h3 {
    font-size: 120%;
    text-decoration: underline;
}
#FLTzone h3 button {
    border: 1px solid grey;
    _text-decoration: none;
}
#FLTzone div.form-switch.selectedProj {
    margin-top: 0.5em;
}
#FLTzone label.selectedProj {
    font-weight: bold;
}
#FLTzone div.title.ProjectStatus {
    margin-top: 0.5em;
}
#FLTzone label.ProjectStatus {
    font-size: 90%;
}
div.selectize-dropdown-content div.option {
    _background-color: #007bff;
    color: rgb(102, 102, 102);
    font-weight: bold;
}
div.selectize-dropdown-content div.option.active {
    _background-color: #007bff;
    background-color: rgb(191, 226, 255);
    font-weight: bold;
    color: black;
}

/*
div.project div.fixed-table-toolbar button[name^="customView"] {
    _display:none;
}
*/

div.container {
    margin-left: calc(var(--project-left-col) - 2.5em);
}

#spinner {
    display: none;
}

#Announce1 {
    margin: 12em 0 6em 14em;
}
#Announce2, #Announce3 {
    margin-top: 25em;
    margin-left: 4em
}
/* ==== [ Project Card ] === === */

h3.selectable, h3.non-selectable {
    color:rgb(44 113 163);
    text-decoration: underline;
}
h3.non-selectable {
    margin-top: 2em;
}
h3.platformSeg {
    margin: 1em 0 0 0.4em;
    color:rgb(14, 49, 75);
    font-size: 110%;
    font-weight: bold;
    /* font-style: italic; */
}

span.container-fluid.tags {
    padding: 0.2em 0 0.2em 0;
    max-width: 100%;
}

div.card.proj_card div.card-body.top-area {
    min-height: 6.5em!important; /* 15%!important; */
}

div.card.proj_card {
    border: 1px solid #a0a0a0 !important;
}
div.proj_card_ext {
    /* width: 33%!important; */
    min-width: 20em!important; /* 15%!important; */
    flex: 0 0 auto;
    width: 20%;
    margin-top: 0.5rem!important;
    margin-bottom: 0.5rem!important;
}
h5.card-title { margin-top: 0.35rem; margin-bottom: 0.15rem; font-size: 1.1rem;}

a.badge.text-bg-secondary { text-decoration: none; padding: 0.5em;}
div span.tags a.badge.text-bg-secondary { padding: 0.3em 0.5rem; }

span.badge.optin-topic {
    background-color: rgb(110, 28, 121);
}
span.badge.optin-category {
    background-color: rgb(34, 114, 44);
}
span.badge.optin-region {
    background-color: rgb(40, 67, 141);
}

.card.proj_card, div.proj_card div.card-footer {
    --bs-card-spacer-x: 0.5rem;
    --bs-card-spacer-y: 0.2rem;
    line-height: 1.15;
    font-size: 14px;
    background-color: hsl(0 0% 96% / 1);
}
div.proj_card div.card-footer {
    padding: 0 0.5rem 0.1rem 0.5rem;
    font-size:80%;
}
div.proj_card div.card-footer div {
    padding-top:0.1rem;
}

span.n_years { font-size: 90%; font-weight: bold; }
span.fld_year { font-size: 80%; }

div.fld_amount .value { font-weight: bold; }
div.fld_amount span.per_year { font-size: 80%; }

div form button.text-danger { padding: 0.1rem; }


body.member_contribs {
    margin: 0;
}
table.contribs {
    min-width: 800px;
    margin: 1.5em 6em;
}
#pageTitle {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}
#pageTitle h3 {
    margin-top: 1em;
    margin-bottom: 1.5em;
}

table.contribs th {
    font-weight: bold;
    background-color: lightblue;
    border: solid 1px white;
}
table.contribs td.projTitle {
    font-weight: bold;
    padding-left: 1.0em;
    padding-right: 1.0em;
    text-align: left;
}
table.contribs td.projTitle a {
    text-decoration: none;
}
table.contribs span.projCode {
    font-weight: normal;
    font-size: 90%;
    margin-left: 1em;
}

table.contribs td.total {
    text-align: right;
    background-color: rgb(255, 250, 208);
    font-weight: bold;
}
table.contribs td.total.global {
    text-align: right;
    background-color: rgb(255, 240, 103);
    font-weight: bold;
    border: solid 1px white;
}
table.contribs td.total.global {
    padding-right: 1em;
    font-size: 120%;
    color:rgb(0, 90, 156);
}
table.contribs td.YearTotal {
    font-weight: bold;
    font-size: 120%;
    color:rgb(0, 90, 156);
    padding: 0.35em 0.5em 0.35em 0.5em;
    text-align: right;
    padding-right: 1.0em;
}

table.contribs td.amount {
    text-align: right;
    padding-right: 1.0em;
    min-width: 5em;
}
table.contribs td.projOfYear {
    font-weight: bold;
    font-size: 120%;
    color:rgb(0, 90, 156);
    border: solid 1px grey;
    padding: 0.4em 1.0em;
}

#cke_id_content, #id_title, #id_date_sent {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .375rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

#upload_infos {
    margin: 3em;
}
#upload_infos .examples {
    margin: 1em;
    text-align: left
}

/* User form */
form #div_id_phone div {
    display:flex!important;
    white-space: nowrap;
}
form #id_phone_0 { max-width: 20em; }
form #id_phone_1 { max-width: 8em; }
form #hint_id_phone { display:none; }
/* .phone-field-ext { display: none; } */

/* ContactUs */

div.contact_us_form {
    _font-weight: bold;
    margin-left: 8em;
}
div.contact_us_form label {
    _margin-top: 1.5em;
    font-weight: bold;
}

.help-block {
    font-style: italic;
}

/* ContactUs Form */
.form-group.has-error {
    color: red;
}
/* input[readonly=readonly] {
    background-color: lightgray;
} */

/* */
td.action_buts a {
    text-decoration: none;
    margin: 0.15em 0.4em;
}

.no-link {
    text-decoration: none;
}
.tag-link {
    text-decoration: none;
    font-weight:bold;
}
#page-content.Selections_Log div h1 {
    margin: 0 0 1em 0;
}
.ft-80pct { font-size: 80%; }
.mw-35em { max-width: 35em; }
.mw-20em { max-width: 20em; }
.wrap { word-wrap: break-word; white-space: normal; }
.center { text-align:center; }
table thead th.center {
    text-align:center;
}
table thead th.wrap div.th-inner {
    word-wrap: break-word;
    white-space: normal!important; 
}

#table-zone.user table td { max-width: 25em; }
#table-zone.user table td.organization a.badge { max-width: 35em; }
.reset-pswd-lnk { font-size: 75%; white-space: nowrap; }

#tableZone td .badge {
	white-space:normal; /* break-spaces; */
    word-wrap: break-word;
}

#tableZone .bootstrap-table .fixed-table-body td.field-val {
        max-width:20em;
        word-wrap: break-word;
        white-space:normal;
}

/* === */
input[type=checkbox].locked {
    opacity: 0.50;
    /* pointer-events: none; => would block the tooltips... */
}

table.contribs td.amount.included { font-weight: bold; }

span.download-project-report { margin-left: 2em; }
a.download-project-report { margin-left: 0.5em; }