:root {
   --main-blue: #16498A;
   --main-grey: #262626; /* rgb(38,38,38) */
}

/******************************/
/* Définitions des animations */
/******************************/
@keyframes rankUp {
   from { 
      opacity: 0;
      transform: translateY(100vh) 
   }
   to { 
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes slideInFromLeft {
   from { 
      opacity: 0;
      transform: translateX(-100vw);
   }
   to { 
      opacity: 1;
      transform: translateX(0);
   }
}

@keyframes slideInFromRight {
   from { 
      opacity: 0;
      transform: translateX(100vw);
   }
   to { 
      opacity: 1;
      transform: translateX(0);
   }
}

/**************/
/* Animations */
/**************/
.rank-up {
   animation: rankUp 2s ease-in forwards;
}

.slide-in-from-left {
   animation: slideInFromLeft 1.5s ease-out forwards;
}

.slide-in-from-right {
   animation: slideInFromRight 1.5s ease-out forwards;
}
/***************/

body {
   font-family: 'lato', Arial, serif;
   background-color: var(--main-blue);
   color: white;
}

h1 {
   font-family: 'dosis', Arial, serif;
}

.custom-list, 
.modal-title, 
.modal-body {
   color: var(--main-blue) !important;
}

.link-to-modal:hover {
   text-decoration: underline;
}

.form-text {
   color: orange;
}

.minified-50
{
   width: 50px;
}

.custom-btn {
   width: 260px !important;
}

.custom-btn-md {
   width: 175px !important;
}

header {
   position: relative;
   width: 198px;
   height: 66px;
   margin-top: 0;
   margin-left: auto;
   margin-right: auto;
   background-color: white;
   border-radius: 0 0 66px 66px;
   box-shadow: 3px 3px 5px black;
}
#logo-in-header {
   position: absolute;
   width: 125px;
   top: -5px;
   left: calc(50% - 75px);
}

#capo-rank-in-navbar {
   width: 75px;
}

a.link-on-blue-bg {
   text-decoration: none;
   color: white;
}
a.link-on-blue-bg:hover {
   text-decoration: underline;
}

/* Surcharge de bootstrap .bg-dark */
.bg-dark {
   background-color: var(--main-blue) !important;
}

/* Surcharge de bootstrap de .btn-outline-primary */
.btn-outline-primary {
   padding: .5rem 1rem;
   border-color: var(--main-blue) !important;
   background-color: white !important;
   color: var(--main-blue) !important;
}
.btn-outline-primary:hover {
   background-color: var(--main-blue) !important;
   color: white !important;
   border: 1px solid white !important;
}

.hidden-elt {
   display: none;
}

.unshown-elt {
   visibility: hidden;
}

ul.contextual_help_list {
   margin: 0;
   padding-left: .25rem;
   list-style-type: none;
   border-radius: 0 0 5px 5px;
   background-color: white;
   color: var(--main-blue);
}

ul.contextual_help_list li:hover {
   cursor: pointer;
   background-color: var(--main-blue);
   color: white;
}

.boldered {
   font-weight: bold;
}

.underline {
   text-decoration: underline;
}

.orangered {
   color: orange;
}