/*
    IP/FORMAION
    CSS V.3.11.0
  */

  html {
    font-family: 'Open Sans', sans-serif;
  }

  main {
    background: url('/app/img/fond_gris_pale.png');
    background-size: cover;
    background-attachment: fixed;
  }
  
  /* 3.0 */
  /** BOUTONS **/
    .btn-text-caps {
      text-transform: capitalize !important;
    } 

    .btn-ip-bleu {
      background-color: #004078 !important;
      color: white;
    }
    .btn-ip-bleu:hover, .btn-ip-bleu.active:hover {
      background-color: #02569F !important;
      color: white;
    }
    .btn-ip-bleu:active, .btn-ip-bleu.active {
      background-color: #002453 !important;
      color: white !important;
    }

    .btn-ip-bleu-pale {
      background-color: #3192F3 !important;
      color: white;
    }
    .btn-ip-bleu-pale:hover {
      background-color: #61B0FF !important;
      color: white;
    }
    .btn-ip-bleu-pale:active {
      background-color: #0661BB !important;
      color: white !important;
    }

    .btn-ip-bleu-foncer {
      background-color: #002453 !important;
      color: white;
    }
    .btn-ip-bleu-foncer:hover {
      background-color: #2f5485 !important;
      color: white;
    }
    .btn-ip-bleu-foncer:active {
      background-color: #001735 !important;
      color: white !important;
    }

    .btn-ip-vert {
      background-color: #009B34 !important;
      color: white;
    }
    .btn-ip-vert:hover {
      background-color: #3CC457 !important;
      color: white;
    }
    .btn-ip-vert:active {
      background-color: #00652F !important;
      color: white !important;
    }

    .btn-ip-orange {
      background-color: #f37331 !important;
      color: white;
    }
    .btn-ip-orange:hover {
      background-color: #fca460 !important;
      color: white;
    }
    .btn-ip-orange:active, .btn-ip-orange.active {
      background-color: #BF4100 !important;
      color: white !important;
    }

    .btn-ip-rouge {
      background-color: #D42929 !important;
      color: white;
    }
    .btn-ip-rouge:hover {
      background-color: #F14450 !important;
      color: white;
    }
    .btn-ip-rouge:active {
      background-color: #961d1d !important;
      color: white !important;
    }

    .btn-ip-rouge-fonce {
      background-color: darkred !important;
      color: white;
    }
    .btn-ip-rouge-fonce:hover {
      background-color: #9e0505 !important;
      color: white;
    }
    .btn-ip-rouge-fonce:active {
      background-color: #880707 !important;
      color: white !important;
    }

    .btn-danger  {
      background-color: #db1118 !important;
      color: white !important;
    }
    .btn-danger:hover  {
      background-color: #f03e42 !important;
      color: white !important;
    }
    .btn-danger:active  {
      background-color: #b70f13 !important;
      color: white !important;
    }

    .btn-ip-gris {
      background-color: #9c9c9c !important;
      color: white;
    }
    .btn-ip-gris:hover {
      background-color: #b0b0b0 !important;
      color: white;
    }

    .btn-ip-out-bleu {
      background-color: transparent !important;
      color: #004078 !important;
      border: #004078 solid 2px;
      padding-top: 0.5rem;
      padding-bottom: 0.375rem;
    }

    .btn-ip-out-bleu:hover {
      background-color: #D6EFFF !important;
      color: #004078 !important;
      border: #004078 solid 2px;
      padding-top: 0.5rem;
      padding-bottom: 0.375rem;
    }

    .btn-ip-out-orange {
      background-color: #f37331 !important;
      color: white !important;
      border: white solid 2px;
      padding-top: 0.5rem;
      padding-bottom: 0.375rem;
    }

    .btn-ip-out-orange:hover {
      background-color: #fca460 !important;
      color: white !important;
      border: white solid 2px;
      padding-top: 0.5rem;
      padding-bottom: 0.375rem;
    }

    .btn-xl {
      --size: 72px;
      height: var(--size);
      width: var(--size);
      --font-size: 1.25em;
      font-size: var(--font-size);
    }

    /* RETIRER LES BOX-SHADOW */
    .btn {
      box-shadow: none !important;
    }

    /* PLUS PETIT QUE LG */
    @media only screen and (max-width: 992px) {
      .btn-xl {
        height: calc(var(--size) * .75);
        width: calc(var(--size) * .75);
        font-size: calc(var(--font-size) * 0.75);
      }

      .temps-coin {
        border-bottom-right-radius:0px !important;
      }
      .texte-coin {
        border-bottom-right-radius:0px !important;
      }
    }

    /* SI PLUS GRAND QUE XXL */
    @media (min-width: 1400px) {
      section > .container:first-of-type {
        max-width: 1680px;
      }
    }

  /* LIENS A */
    a {
      color: #3CA0EC;
    }
    a:hover {
      color: #6bbcfa;
    }

    a.lien-orange {
      color: #f37331;
    }
    a.lien-orange:hover {
      color: #fc9968;
    }

  /* BARRE */
    ::-webkit-scrollbar
    {
      width: 10px;
    }

    ::-webkit-scrollbar-track
    {
      box-shadow: inset 0 0 3px black;
      background: #2f3135;
    }

    ::-webkit-scrollbar-thumb
    {
      background: #6d7277;
      border-radius: 8px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #a1a6af;
    }

  /* LANGUETTE FORMATIONS */
    .languette {
      transform: translate(-8px,0px);
      width: calc(100% + 19px);
    }

    .languette-gauche {
      width:50%;
      background-color:#f37331;
      height:50px;
      font-size:x-large;
      padding: 20px 15px;
      border-top-left-radius: 0.5rem;
      border-bottom-left-radius: 0.5rem;
    }

    .languette-centre {
      width:5%;
      height:50px;
      margin:0px;
      padding:0px;
      border-bottom: 50px solid #3CA0EC;
      border-left: 10px solid #f37331;
    }

    .languette-droite {
      width:45%;
      background-color:#3CA0EC;
      height:50px;
      font-size:x-large;
      padding: 20px 15px;
      border-top-right-radius: 0.5rem;
      border-bottom-right-radius: 0.5rem;
    }
  
  /* BARRE TITRE + FIL ARRIANE */
    .barre-titre {
      font-size:xx-large;
      min-height:80px;
      height:fit-content;
      color:white;
      padding-top:10px;
      background-image:url('/app/img/headertest.jpg');
      background-size: cover;
      text-align: center;
      box-shadow: inset 0px 0px 30px 5px rgba(0,18,37,0.8);
    }

    .fil-arriane {
      font-size: 12px;
      min-height: 20px;
      color: white;
      padding: 5px;
      background-color: rgba(16, 26, 39, 1);
      padding:2px 8px;
      margin:0px calc(var(--mdb-gutter-x)*-0.5);
    }
  /* HEADERS */
    .header-ip-bleu {
      background-color: #1B2637 !important;
      color: white;
      font-size: 24px;
      border-bottom: none;
    }

    .header-ip-rouge-fonce {
      background-color: darkred !important;
      color: white;
      font-size: 24px;
      border-bottom: none;
    }

    .header-ip-mauve {
      background-color: #43152F !important;
      color: white;
      font-size: 24px;
      border-bottom: none;
    }

    .header-ip-bleu-foncer {
      background-color: #101A27;
      color: white;
      font-size: 20px;
      border-bottom: none;
    }

  /* AUTRES */
    .text-titre {
      text-transform: uppercase;
    }

    .badge-curl {
      border-top-left-radius: 0.8rem;
      border-bottom-right-radius: 0.8rem;
      border-bottom-left-radius: 0.8rem;
      background-color: #54A6E3;
      color: white;
      width: fit-content;
      font-size: 22px;
      padding: 2px 15px;
    }

    .badge-curl-danger {
      border-top-left-radius: 0.8rem;
      border-bottom-right-radius: 0.8rem;
      border-bottom-left-radius: 0.8rem;
      background-color: #f27474;
      color: white;
      width: fit-content;
      font-size: 22px;
      padding: 2px 15px;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .temps-coin {
      background-color:#54A6E3;
      font-size:24px;
      border-bottom-right-radius:0.8rem;
    }

    .temps-coin-texte {
      background-color:#54A6E3;
      font-size:24px;
    }

    .prix-coin {
      background-color:#f37331;
      font-size:24px;
    }

    .texte-coin {
      font-size:24px;
      border-bottom-right-radius:0.8rem;
    }

    .card-footer {
      border-top: none !important;
    }

    .card-header {
      border-bottom: none !important;
    }
  
  /* TOASTS */
    .colored-toast.swal2-icon-success {
      background-color: #f37331 !important;
      box-shadow: none !important;
    }
    
    .colored-toast.swal2-icon-error {
      background-color: #f27474 !important;
      box-shadow: none !important;
    }
    
    .colored-toast.swal2-icon-warning {
      background-color: #f8bb86 !important;
      box-shadow: none !important;
    }
    
    .colored-toast.swal2-icon-info {
      background-color: #3fc3ee !important;
      box-shadow: none !important;
    }
    
    .colored-toast.swal2-icon-question {
      background-color: #87adbd !important;
      box-shadow: none !important;
    }
    
    .colored-toast .swal2-title {
      color: white;
    }

  /* ADMIN */
    .onglet-desactiver {
      background-color: #525252;
      color: #a2a2a2;
    }

    .ligne-hover {
      background-color: #ecedf0;
    }
    .ligne-hover:hover {
      background-color: #bababa !important;
    }

  /* ALERTE */
    .alert-large, .alert-mobile {
      z-index: 1029;
      padding: 12px 24px;
      border-bottom-right-radius:12px;
      border-bottom-left-radius:12px;
    }
    .alert-mobile {
      position: fixed;
      top: 60px;
      left: 50%;
      transform: translate(-50%,0);
      width: calc(100% - 24px);
      margin: auto;
    }
    .alert-large {
      position: fixed;
      top: 60px;
      right: 10px;
      max-width: 40vw;
    }

  /* BG IP */
    .bg-danger {
      background-color: #db1118 !important;
      color: white !important;
    }

    .bg-ip-orange {
      background-color: #f37331;
    }

    .bg-ip-bleu {
      background-color: #1B2637;
    }
/* POPOVER */
  .popover-header {
    background-color: #1B2637;
    color: whitesmoke;
  }
  .popover {
    border-color: #246657 !important;
  }
/* PULSE */
  .btn-pulse-bleu {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
    animation: pulse-bleu 3s infinite 1s;
  }

  .btn-pulse-orange {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
    animation: pulse-orange 3s infinite 1s;
  }

  .btn-pulse-vert {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
    animation: pulse-vert 3s infinite 1s;
  }

  .btn-pulse-rouge {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
    animation: pulse-rouge 3s infinite 1s;
  }

  .invalid-feedback {
    margin-top: -1rem !important;
  }

  .form-control.is-valid {
    margin-bottom: 0 !important;
  }

  @keyframes pulse-bleu {
    0% {
      
      box-shadow: 0 0 0 0 rgba(0, 121, 226, 0.75);
    }

    50% {
      box-shadow: 0 0 6px 8px rgba(0, 121, 226, 0);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(0, 121, 226, 0);
    }
  }

  @keyframes pulse-orange {
    0% {
      
      box-shadow: 0 0 0 0 rgba(206, 82, 0, 0.75);
    }

    50% {
      box-shadow: 0 0 6px 8px rgba(206, 82, 0, 0);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(206, 82, 0, 0);
    }
  }

  @keyframes pulse-vert {
    0% {
      
      box-shadow: 0 0 0 0 rgba(0, 206, 10, 0.66);
    }

    50% {
      box-shadow: 0 0 6px 8px rgba(0, 206, 10, 0);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(0, 206, 10, 0);
    }
  }

  @keyframes pulse-rouge {
    0% {
      box-shadow: 0 0 0 0 rgba(206, 10, 10, 0.75);
    }

    50% {
      box-shadow: 0 0 6px 8px rgba(206, 10, 10, 0);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(206, 10, 10, 0);
    }
  }

/* LIGNES FACTURES */
  .ligne-facture {
    border-top-left-radius:0.5rem;
    border-bottom-left-radius:0.5rem;
    border-top-right-radius:0.5rem;
    border-bottom-right-radius:0.5rem;
  }
  .ligne-facture:hover, .carte-hover:hover {
    background-color: #f1f1f1;
  }
  .ligne-facture-debut {
    font-size: medium !important;
    border-top-left-radius:0.5rem;
    border-bottom-left-radius:0.5rem;
  }
  .ligne-facture:hover .ligne-facture-debut, .carte-hover:hover .header-ip-bleu {
    background-color: #3d557a !important;
  }
  .ligne-facture-fin {
    border-top-right-radius:0.5rem;
    border-bottom-right-radius:0.5rem;
  }
  a.ligne-facture-fin, button.ligne-facture-fin {
    border-top-left-radius:0;
    border-bottom-left-radius:0;
  }

  @media only screen and (max-width: 992px) {
    .ligne-facture-debut {
        border-top-left-radius:0.5rem;
        border-top-right-radius:0.5rem;
        border-bottom-left-radius:0;
    }
    .ligne-facture-fin {
        border-bottom-left-radius:0.5rem;
        border-bottom-right-radius:0.5rem;
    }
    a.ligne-facture-fin, button.ligne-facture-fin {
        border-top-left-radius:0;
        border-top-right-radius:0;
        border-bottom-left-radius:0.5rem;
    }
  }