/* Couleurs du thème principal
-------------------------------------------------- */
:root {
    /*Navbar*/
    --toggler-icon: url("data:image/svg+xml,%3csvg stroke='rgba(255, 255, 255, 0.5)' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --navbar-text-disabled-color: rgba(255, 255, 255, 0.25);
    --navbar-text-default-color: rgba(255, 255, 255, 0.5);
    --navbar-text-hover-color: rgba(255, 255, 255, 0.75);
    --navbar-text-active-color: #FFF;
    /*Text*/
    --text-color: #FFF;
    --text-color-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(70deg) brightness(103%) contrast(102%);
    /*Main*/
    --main-light-light-light-color: #1E74FF;
    --main-light-light-color: #154FB2;
    --main-light-color: #0E377F;
    --main-color: #092453;
    --main-dark-color: #051633;
    --main-dark-dark-color: #020B19;
    --main-dark-dark-dark-color: #000000;
}


/* Général
-------------------------------------------------- */
html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.container {
  max-width: 960px;
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 75px;
}

.no-padding {
    padding: 0 !important;
}

.no-wrap {
    white-space: nowrap;
}

.text-wrap {
    white-space: break-spaces;
    overflow-wrap: anywhere;
}

.horizontal-align-center {
    text-align: center !important;
}

.horizontal-align-right {
    text-align: right !important;
}

.vertical-align-middle {
    vertical-align: middle !important;
}

.vertical-return {
    transform: rotate(180deg);
}


/* Separator with text
-------------------------------------------------- */

.hr-text {
    border: none;
    position: relative;
    text-align: center;
    height: auto !important;
    background-color: transparent;
    opacity: 1;
    margin: 0;
}

.hr-text::before {
    background: black;
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    left: 0;
    top: 50%;
    opacity: .5;
}

.hr-text::after {
    content: attr(data-content);
    position: relative;
    background: white;
    padding: 0 5px;
}


/* Font Awesome
-------------------------------------------------- */
i.fa-solid,
i.fa-regular,
i.fa-brands {
    padding-right: 8px;
}
.nav-link > i.fa-solid,
.nav-link > i.fa-regular,
.nav-link > i.fa-brands {
    padding-right: 4px;
}
.btn-img > i.fa-solid,
.btn-img > i.fa-regular,
.btn-img > i.fa-brands {
    padding-right: 0px;
}
.btn-img.btn-warning:not(.btn-outline) {
    color: white;
}



/* Multi-select
-------------------------------------------------- */
.multiselect-native-select > .btn-group {
    display: block;
}
.multiselect-native-select > .btn-group > button.multiselect {
    text-align: left !important;
}



/* Cards
-------------------------------------------------- */
.card > .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0;
    padding-right: calc(1rem - 10px);
}
.card > .card-header > h1,
.card > .card-header > h2,
.card > .card-header > h3,
.card > .card-header > h4,
.card > .card-header > h5,
.card > .card-header > h6,
.card > .card-header > h7,
.card > .card-header > h8,
.card > .card-header > h9,
.card > .card-header > .h1,
.card > .card-header > .h2,
.card > .card-header > .h3,
.card > .card-header > .h4,
.card > .card-header > .h5,
.card > .card-header > .h6,
.card > .card-header > .h7,
.card > .card-header > .h8,
.card > .card-header > .h9 {
    display: inline-block;
    margin: initial;
    vertical-align: middle;
    white-space: nowrap;
    padding-top: .5rem;
    padding-right: 5rem;
}
.card > .card-header > .actions {
    display: inline-block;
    text-align: end;
}
.card > .card-header > .actions > a {
    margin-right: 10px;
    margin-top: .5rem;
}
.card > .card-header > .actions > div {
    margin-right: 10px;
    padding-top: .5rem;
}
.card > .card-header > .actions > div,
.card > .card-header > .actions > div > label > input,
.card > .card-header > .actions > div > label > select,
.card > .card-header > .actions > div > label > .multiselect-native-select > .btn-group,
.card > .card-header > .actions > div > .dataTables_filter > label > input,
.card > .card-header > .actions > div > .dataTables_length > label > select {
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}
.card > .card-header > .actions > div > label > input,
.card > .card-header > .actions > div > label > select,
.card > .card-header > .actions > div > label > .multiselect-native-select > .btn-group > button,
.card > .card-header > .actions > div > .dataTables_filter > label > input,
.card > .card-header > .actions > div > .dataTables_length > label > select {
    padding-top: 0.187rem;
    padding-bottom: 0.187rem;
    width: auto;
}
.card > .card-header > .actions > div > label,
.card > .card-header > .actions > div > .dataTables_filter > label,
.card > .card-header > .actions > div > .dataTables_length > label {
    margin-bottom: 0px;
}



/* Modal
-------------------------------------------------- */
.modal-header > h1,
.modal-header > h2,
.modal-header > h3,
.modal-header > h4,
.modal-header > h5,
.modal-header > h6,
.modal-header > h7,
.modal-header > h8,
.modal-header > h9,
.modal-header > .h1,
.modal-header > .h2,
.modal-header > .h3,
.modal-header > .h4,
.modal-header > .h5,
.modal-header > .h6,
.modal-header > .h7,
.modal-header > .h8,
.modal-header > .h9 {
    margin-top: 0px;
    margin-bottom: 0px;
}

.modal-header > .close {
    margin: 0;
    padding: 0;
    float: unset;
    line-height: 2.1rem;
}


/* Boutons
-------------------------------------------------- */
/* Boutons d'actions dans les tableaux */
.btn-action {
    margin: 2.5px;
}

/* Bouton suivant */
span.text-next {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}
span.text-next:after {
    content: '\2192'; /* Unicode char */
    position: absolute;
    opacity: 0;
    top: 0;
    left: 20px;
    transition: 0.5s;
}
.btn:hover span.text-next {
    padding-left: 20px;
}
.btn:hover span.text-next:after {
    opacity: 1;
    left: 0;
}

/* Bouton valider */
span.text-validate {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}
span.text-validate:after {
    content: '\2713'; /* Unicode char */
    position: absolute;
    opacity: 0;
    top: 0;
    left: -20px;
    transition: 0.5s;
}
.btn:hover span.text-validate {
    padding-left: 15px;
}
.btn:hover span.text-validate:after {
    opacity: 1;
    left: 0;
}

/* Bouton retour */
span.text-back {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}
span.text-back:after {
    content: '\293F'; /* Unicode char */
    position: absolute;
    opacity: 0;
    top: 2px;
    left: -20px;
    transition: 0.5s;
    font-weight: bold;
    transform: rotate(120deg);
}
.btn:hover span.text-back {
    padding-left: 15px;
}
.btn:hover span.text-back:after {
    opacity: 1;
    left: 0;
}

/* Bouton plus */
span.text-plus {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}
span.text-plus:after {
    content: '\271A'; /* Unicode char */
    position: absolute;
    opacity: 0;
    top: 0;
    left: -20px;
    transition: 0.5s;
}
.btn:hover span.text-plus {
    padding-left: 18px;
}
.btn:hover span.text-plus:after {
    opacity: 1;
    left: 0;
}

/* Bouton supprimer */
span.text-delete {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}
span.text-delete:after {
    content: '\2715'; /* Unicode char */
    position: absolute;
    opacity: 0;
    top: 0;
    left: -20px;
    transition: 0.5s;
}
.btn:hover span.text-delete {
    padding-left: 18px;
}
.btn:hover span.text-delete:after {
    opacity: 1;
    left: 0;
}



/* Footer
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin: 0px;
  margin-bottom: 30px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    font-size: 10px;
    /* Set the fixed height of the footer here */
    height: 30px;
}



/* Thème principal
-------------------------------------------------- */

/* Navbar et footer */
.navbar-main-theme >.container-fluid > .navbar-brand {
    margin-left: 20px;
    margin-right: 20px;
    color: var(--navbar-text-active-color);
}
/*.navbar-main-theme .navbar-brand:hover,
.navbar-main-theme .navbar-brand:focus {
    color: var(--navbar-text-active-color);
}*/
.navbar-main-theme .navbar-nav .nav-link {
    color: var(--navbar-text-default-color);
}
.navbar-main-theme .navbar-nav .nav-link:hover,
.navbar-main-theme .navbar-nav .nav-link:focus {
    color: var(--navbar-text-hover-color);
}
.navbar-main-theme .navbar-nav .nav-link.disabled {
    color: var(--navbar-text-disabled-color);
}
.navbar-main-theme .navbar-nav .show > .nav-link,
.navbar-main-theme .navbar-nav .active > .nav-link,
.navbar-main-theme .navbar-nav .nav-link.show,
.navbar-main-theme .navbar-nav .nav-link.active {
    color: var(--navbar-text-active-color);
}
.navbar-main-theme .navbar-toggler {
    color: var(--navbar-text-default-color);
    border-color: var(--navbar-text-default-color);
}
.navbar-main-theme .navbar-toggler-icon {
    background-image: var(--toggler-icon);
}
.navbar-main-theme .navbar-text {
    color: var(--navbar-text-default-color);
}
.navbar-main-theme .navbar-text a {
    color: var(--navbar-text-active-color);
}
.navbar-main-theme .navbar-text a:hover,
.navbar-main-theme .navbar-text a:focus {
    color: var(--navbar-text-active-color);
}
.navbar-main-theme {
    background-color: #343a40 !important;
}

/* Boutons */
.btn.main-theme:not(.btn-outline) {
    color: var(--text-color);
    background-color: var(--main-color);
    border-color: var(--main-color);
}
.btn.main-theme:not(.btn-outline).focus,
.btn.main-theme:not(.btn-outline):focus {
    color: var(--text-color);
    background-color: var(--main-light-light-color);
    border-color: var(--main-light-light-light-color);
}
.btn.main-theme:not(.btn-outline).active,
.btn.main-theme:not(.btn-outline):active,
.btn.main-theme:not(.btn-outline):hover,
.open > .btn.main-theme:not(.btn-outline).dropdown-toggle {
    color: var(--text-color);
    background-color: var(--main-light-light-color);
    border-color: var(--main-light-light-color);
}
.btn.main-theme:not(.btn-outline).active.focus,
.btn.main-theme:not(.btn-outline).active:focus,
.btn.main-theme:not(.btn-outline).active:hover,
.btn.main-theme:not(.btn-outline):active.focus,
.btn.main-theme:not(.btn-outline):active:focus,
.btn.main-theme:not(.btn-outline):active:hover,
.open>.btn.main-theme:not(.btn-outline).dropdown-toggle.focus,
.open>.btn.main-theme:not(.btn-outline).dropdown-toggle:focus,
.open>.btn.main-theme:not(.btn-outline).dropdown-toggle:hover {
    color: var(--text-color);
    background-color: var(--main-light-light-color);
    border-color: var(--main-light-light-color);
}
.btn.main-theme:not(.btn-outline).active,
.btn.main-theme:not(.btn-outline):active,
.open>.btn.main-theme:not(.btn-outline).dropdown-toggle {
    background-image: none;
}
.btn.main-theme:not(.btn-outline).disabled.focus,
.btn.main-theme:not(.btn-outline).disabled:focus,
.btn.main-theme:not(.btn-outline).disabled:hover,
.btn.main-theme:not(.btn-outline)[disabled].focus,
.btn.main-theme:not(.btn-outline)[disabled]:focus,
.btn.main-theme:not(.btn-outline)[disabled]:hover,
fieldset[disabled] .btn.main-theme:not(.btn-outline).focus,
fieldset[disabled] .btn.main-theme:not(.btn-outline):focus,
fieldset[disabled] .btn.main-theme:not(.btn-outline):hover {
    background-color: var(--main-color);
    border-color: var(--main-color);
}
.btn.main-theme:not(.btn-outline) .badge {
    color: var(--main-color);
    background-color: var(--text-color);
}
.btn.btn-outline.main-theme {
    border-color: var(--main-color);
    color: var(--main-color);
    background: 0 0;
}
.btn.btn-outline.main-theme.active,
.btn.btn-outline.main-theme:active,
.btn.btn-outline.main-theme:active:focus,
.btn.btn-outline.main-theme:active:hover,
.btn.btn-outline.main-theme:focus,
.btn.btn-outline.main-theme:hover {
    border-color: var(--main-color);
    color: var(--text-color);
    background-color: var(--main-color);
}
.btn.main-theme-stripe {
    border-left: 4px solid var(--main-color) !important
}
.btn.main-theme.btn-no-border:not(.active) {
    border-color: transparent;
}

/* Card */
.card.main-theme {
    border: 1px solid var(--main-color);
    border-top: 0;
}
.card.main-theme:nth-child(n+1) {
    margin-top: 15px;
}
.card.main-theme > .card-header {
    background-color: var(--main-color);
    color: var(--text-color);
}
.card.main-theme > .card-header > .actions .btn-default {
    background: 0 0 !important;
    border: 1px solid var(--main-light-color);
    color: var(--main-light-light-color);
}
.card.main-theme > .card-header > .actions .btn-default > i {
    color: var(--main-light-light-color);
}
.card.main-theme > .card-header > .actions .btn-default.active,
.card.main-theme > .card-header > .actions .btn-default:active,
.card.main-theme > .card-header > .actions .btn-default:focus,
.card.main-theme > .card-header > .actions .btn-default:hover {
    border: 1px solid var(--main-light-light-light-color);
    color: var(--main-light-light-light-color);
}

/* Modal */
.modal.main-theme > .modal-dialog > .modal-content {
    border: 1px solid var(--main-color);
    border-top: 0;
    background-color: transparent;
}
.modal.main-theme > .modal-dialog > .modal-content > .modal-header {
    background-color: var(--main-color);
    color: var(--text-color);
}
.modal.main-theme > .modal-dialog > .modal-content > .modal-header > .btn-close {
    filter: var(--text-color-filter);
}
.modal.main-theme > .modal-dialog > .modal-content > .modal-body,
.modal.main-theme > .modal-dialog > .modal-content > .modal-footer {
    background-color: white;
}

/* Contrôles de formulaire */
.form-control.main-theme {
    border-color: var(--main-color);
}
.form-control.main-theme:focus {
    border-color: var(--main-light-light-color);
}
.form-control.focus-main-theme:focus {
    border-color: var(--main-color);
}

/* Datatables */
.page-item.active .page-link,
.page-item.active .page-link:hover,
.page-item.active .page-link:focus {
    color: var(--text-color);
    background-color: var(--main-color);
    border-color: var(--main-color);
}
.page-item .page-link {
    color: var(--main-color);
    border-color: var(--main-color);
}
.page-item .page-link:focus {
    box-shadow: initial;
}
.page-item .page-link:hover {
    color: var(--text-color);
    background-color: var(--main-color);
    border-color: var(--main-color);
}
.page-item.disabled .page-link {
    border-color: var(--main-color);
}

/* Navbar */
#username-menu > i.fa-solid.fa-user {
    color: var(--main-light-light-color);
}