:root {
    --dark-blue:#262535;
    --dark-blue-trans:#26253599;
    --red:#e43750;
    --hover-red:#e4375080;
    --dark-red:#a5283a;
    --pale-middle-blue:#a6c9e730;
    --middle-blue:#3c5163;
    --middle-blue-hover:#283540;
    --pale-blue:#98a8b8;
    --pale-egg:#fafaf430;
    --egg:#f5f4eb;
    --yellow:#bbb;
    --egg-hover:#e8e7d8;
    --white:#fff;
    --middle-black:#141414;
    --black:#000;

    --turquoise:#26B5BA;
    --hover-turquoise:#24A6AB;

    --orange:#FCCA6A;
    --hover-orange:#ecbe64;

    --height-navbar:65px;

    --animation-quick: 100ms;

    --blur-value: 3px;
    --darken-value: 0.3;

    /* For panel in cards.css */
    --color-background-translucent: #f9f8f790;
    --background-blur: blur(10px);
    --border-radius-large: 10px;
}

tbody > tr > td {
    vertical-align: middle !important;
}

tbody > tr > td > div {
    vertical-align: middle !important;
    margin-bottom:0.5rem !important;
    margin-top:0.5rem !important;
}

thead > tr > th {
    vertical-align: middle !important;
}

/* To translate button browse in bootstrap file input */
.custom-file-label::after { content: "Parcourir";}

.section_70 {
    width:70%;
}

/* To display forbidden/not_found in modal */
.warning-modal {
    padding:3em;
}

.form_small {
    margin:auto;
    align-items: center;
    width: 40%;
}

.form_flex {
    display: flex;
    flex-direction:column;
    align-items:center;
}

.signup-link{
    padding:1 0 0 0;
    text-align:center;
}

.signup-link a {
    color: var(--red);
}

/* HYPERLINKS */
a {
  color: var(--turquoise);
}

a:hover {
  color: var(--hover-turquoise);
}

/* Pagination */

.page-item.active .page-link {
    color: #fff !important;
    border-color: var(--turquoise) !important;
    background-color: var(--turquoise) !important;
}

.page-item .page-link {
  color: var(--turquoise) !important;
  background-color: var(--white) !important;
}

.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.content-container {
    padding-top: 60px; /* padding to compensate change of height of navbar with animation */
}

/* To take a larger portion of the website page */
.container {
    min-width:75%; /* Removed since container is not centered anymore when width is low (mobile) */
}

.container.navbar-container {
    min-width:90%;  /* Removed since container is not centered anymore when width is low (mobile) */
}

body {
    position:relative;
}

body {
    min-height: 100%;
    height: auto;/* if height is set (by default) to 100% instead of auto, the background image disappears in the admin section when we scroll */
}

html {
    height: 100%;
}

/* To blur background when dropdown menu is there */
.overlay {
    -webkit-filter: blur(var(--blur-value));
    -moz-filter: blur(var(--blur-value));
    -o-filter: blur(var(--blur-value));
    -ms-filter: blur(var(--blur-value));
    filter: blur(var(--blur-value));
    pointer-events:none; /* nothing is clickable in overlay element */
}

.text_container {
    padding: 1em;
    background-color: var(--egg);
    border: 2mm ridge var(--dark-blue);
    border-radius: 1em;
}

/* FONTS */
.customwarning {
  color: var(--red);
}

/* BUTTONS */

/* success */
.btn-success {
  background-color: var(--turquoise) !important;
  border-color: var(--turquoise) !important;
}

.btn-success:hover, .btn-success.focus, .btn-success:focus {
  background-color: var(--hover-turquoise) !important;
  border-color: var(--hover-turquoise) !important;
}

.btn-success:disabled, .btn-success.disabled, .btn-success:active, .btn-success:active:focus, .btn-success.active, .open>.dropdown-toggle.btn-success {
  background-color: var(--turquoise) !important;
  border-color: var(--turquoise) !important;
}

/* info */
.btn-info {
  background-color: var(--middle-blue) !important;
  border-color: var(--middle-blue) !important;
}

.btn-info:hover, .btn-info.focus, .btn-info:focus {
  background-color: var(--pale-blue) !important;
  border-color: var(--pale-blue) !important;
}

.btn-info:disabled, .btn-info.disabled, .btn-info:active, .btn-info:active:focus, .btn-info.active, .open>.dropdown-toggle.btn-info {
  background-color: var(--middle-blue) !important;
  border-color: var(--middle-blue) !important;
}

/* warning */
.btn-warning {
  background-color: var(--orange) !important;
  border-color: var(--orange) !important;
}

.btn-warning:hover, .btn-warning.focus, .btn-warning:focus {
  background-color: var(--hover-orange) !important;
  border-color: var(--hover-orange) !important;
}

.btn-warning:disabled, .btn-warning.disabled, .btn-warning:active, .btn-warning:active:focus, .btn-warning.active, .open>.dropdown-toggle.btn-warning {
  background-color: var(--orange) !important;
  border-color: var(--orange) !important;
}

/* danger */
.btn-danger {
  background-color: var(--red) !important;
  border-color: var(--red) !important;
}

.btn-danger:hover, .btn-danger.focus, .btn-danger:focus {
  background-color: var(--hover-red) !important;
  border-color: var(--hover-red) !important;
}

.btn-danger:disabled, .btn-danger.disabled, .btn-danger:active, .btn-danger:active:focus, .btn-danger.active, .open>.dropdown-toggle.btn-danger {
  background-color: var(--red) !important;
  border-color: var(--red) !important;
}

/* For clementine websites */

.logo-container {
  margin-left: 0;
  margin-right: 12.5%;
}

#logos-band{
  display:flex;
  justify-content:space-around;
  align-items:center;
  flex-direction:column;
  width:12.5%;
  visibility:hidden;
  height:500px
}

#logos-band .img-logo {
  max-width:85%;
}


/* Mobile */

@media (max-width: 1199px){
  /* We don't put 0.9 on html, otherwise brand is affected and when dropdowning menu it moves brand and toggle button in an ugly way */
    body {
      font-size:0.9rem !important;
    }

    .dropdown-menu {
      font-size:0.9rem !important;
    }

    .form_small {
        width: 65%;
    }
    /* We need tables to overflow on mobile or small screens */
    .table-container{
        overflow-x:auto;
        white-space: normal;
        margin-bottom:20px;
    }
    .table{
        width:unset;
    }

    .logo-container {
      margin-left: auto;
      margin-right: auto;
    }

    #logos-band{
      display: none;
    }
}

@media screen and (max-width: 767px){
    .section_70 {
        width:100%;
    }
    .form_small {
        width: unset;
    }
    /* Do not display dropdown with action options (delete) when screen is too small */
    .table_action_dropdown {
        display:none;
    }
}

/* Print */
@media screen {
  #printSection {
      display: none;
  }
}

.hidden {
    display:none;
}

@media print {
  body * {
    visibility:hidden;
  }
  #printSection, #printSection * {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
  }
}

.accordion_title {
    text-align:justify;
}

.separation_title {
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-weight: bold;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.separation_title:before,
.separation_title:after {
    content: '';
    border-top: 2px solid;
    margin: 0 20px 0 0;
    flex: 1 0 20px;
}

.separation_title:after {
    margin: 0 0 0 20px;
}

h1 {
    margin-top:1em;
    margin-bottom:0.5em;
}

/*Begin cookieConsent*/
#cookieConsent {
    text-align:justify;
    background-color: rgba(20,20,20,0.8);
    min-height: 26px;
    font-size: 14px;
    color: var(--black);
    line-height: 26px;
    padding: 8px 15px 8px 30px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    z-index: 9999;

    transition: 400ms;
}

#text_cookie{
    color: var(--egg);
}

#cookieConsent a {
    color: #4B8EE7;
    text-decoration: none;
}

#cookieConsent a.cookieConsentOK {
  background-color: var(--red);
  color: var(--dark-blue);
    display: inline-block;
    border-radius: 5px;
    padding: 0px 20px;
    cursor: pointer;
    float: right;
    margin: 0px 0px 0px 10px;
}

#cookieConsent a.cookieConsentOK:hover {
    background-color: var(--dark-red);
}
/*End cookieConsent*/

/* Burger menu */
.dropdown-menu > li > a:focus {
  text-decoration: none;
  color: #ffffff;
  background-color: #f3969a;
}

.dropdown-menu {
   background-color: #343a40;
   border:0px;
   margin: 0em -1.5em -0.5em -1.5em;
   border-bottom-right-radius:10px;
   border-bottom-left-radius:10px;

}

.dropdown-menu > .dropdown-item {
   color: #FFFFFF80 !important;
}

.dropdown-menu > .dropdown-item:hover {
   background-color: #10243e;
}

.navbar-nav{
  background-color: #343a40 !important;
  padding:0.5em 1.5em 0.5em 1.5em;
  border-bottom-right-radius:10px;
  border-bottom-left-radius:10px;
}