[v-cloak] > * { display:none }
body{
  font-family: "Raleway", sans-serif;
}
.button{
    background: #017070;
    box-shadow: 0 2px 2px rgba(0,0,0,.20);
    color: #fff;
    flex-direction: column;
    border-radius: inherit;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #017070;
  min-height: 100vh;
}
h1{
    font-size: 30px;
    font-size: 1.875em;
    font-weight: bold;
    font-family: "Raleway", sans-serif;
    display: block;
    background: #017070;
    padding: 10px 10px 10px 15px;
    color: #ffffff;
    margin-bottom: 30px;
    margin-top: 0;
    width: 100%;
    text-align: initial;
}
h3{
  color:#000000;
  position: relative;
  display: block;
}
h3::before{
  position: relative;
  width: 100%;
  height: 3px;
  background: #000000;
  bottom: 0;
  left: 0;
  content: '';

}
/* h1:after{
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  width: 100%;
  height: 6px;
  background: #017070;
  box-shadow: 0 2px 2px rgba(0,0,0,.20);
} */
.routervieu{
  padding-top:40px;
}


/*Menu*/
.toogle{
            position: fixed;
            top: 10px;
            right:  20px;
            z-index: 2;
            width: 70px;
            height: 70PX;
            position: absolute;
            background: transparent;
            cursor: pointer;
        }
        .toogle span{
            display: block;
            width: 50px;
            height: 6px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #017070;
            transition: 0.5s;
            box-shadow: 0 2px 2px rgba(0,0,0,.20);
        }
        .toogle.activespan span{
            background: #fff;
        }
        .toogle span:nth-child(1){
            transform: translate(-50%, -50%) translateY(-15px);  
            transition: 0.2s;
        }
        .toogle span:nth-child(4){
            transform: translate(-50%, -50%) translateY(15px);
            transition: 0.2s;
        }
        .toogle.activespan span:nth-child(1){
            transform: translate(-50%, -50%) translateY(-35px);  
            opacity: 0;  
        }
        .toogle.activespan span:nth-child(4){
            transform: translate(-50%, -50%) translateY(35px);
            opacity: 0; 
        }
        .toogle.activespan span:nth-child(2){
            transform: translate(-50%, -50%) rotate(45deg);  
            transition-delay: .2s;
        }
        .toogle.activespan span:nth-child(3){
            transform: translate(-50%, -50%) rotate(-45deg);
            transition-delay: .2s;
        }

        .menu{
            margin: 0;
            padding: 0;
            position: fixed;
            top:0;
            right:  -100%;
            width: 33%;
            height: 100%;
            background: #017070;
            z-index: 1;
            transition: .5s;
        }
        .menu h2{
                color: #fff;
                margin: 0;
                padding: 0;
                position: absolute;
                top: -34px;
                /* left: 60%; */
                /* transform: translate(-80%,-70%); */
                text-align: start;
                font-size: 180px;
                left: -50px;
                text-shadow: 0 2px 2px rgba(0,0,0,.20);
                letter-spacing: -18px;
        }
        .menu ul{
            margin: 0;
            padding: 0;
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translate(-40%,-30%);
            text-align: start;
            width: 80%;
        }
        .menu ul li{
            list-style: none;
        }
        .menu ul li a{
            padding: 10px;
            display: inline-block;
            text-decoration: none;
            text-transform: uppercase;
            color:#fff;
            font-size: 1.5rem;
            position: relative;
            text-shadow: 0 2px 2px rgba(0,0,0,.20);
        }
       .menu ul li a:after{
          position: absolute;
          content: '';
          width: 0;
          height: 6px;
          bottom:  0;
          left: 0;
          background: #fff;
          transition: 0.4s;
          z-index: -1;
        }
        .menu ul li a:hover{
          color: #fff;
          text-decoration: none;
        }
        .menu ul li a:hover:after{
          width: 100%;
        }
        .active{
            right: 0;
            overflow: auto;
        }
/* fin menu */

/* button */

.button{
    background: #017070;
    box-shadow: 0 2px 2px rgba(0,0,0,.20);
    color: #fff;
    flex-direction: column;
    border-radius: inherit;
}
.button-alert{
  background: #E53935;
}
.button-update{
  background: #27b8c0;  
}
.button:hover{
  color:#fff;

}
.button span,.text-secondary i{
  color: #fff;
}
.badge-success{

  background: #017070;
    padding: 1em 1em;
    font-size: 16px;
    white-space: normal;
    line-height: 1.2em;
}
.btn-outline-success {
    color: #017070;
    border-color: #017070;
}
.btn-outline-success:hover,.btn-outline-success:active{
  background:#017070 !important;
  color: #fff !important;
}


/* form */

.form-control{
  border:none;
  border-radius: initial;
  border-bottom: 3px solid  #017070;
}
.select-selected {
  background-color:   #017070;
}

.form-control:focus {
    color: #017070;
    background-color: #fff;
    border-color: #017070;
    outline: 0;
    box-shadow: 0 2px 2px rgba(0,0,0,.20);
}

.custom-selectt select {
  position: relative;
  padding: .375rem .75rem;
  width: 100%;
  border:none;
  border-bottom: 3px solid  #017070;
  -webkit-appearance: button;
  appearance: button;
  outline: none;
  color: #017070;
}

/* jumbotron */
.jumbotron {
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    background-color: #e9ecef;
    border-radius: none;
}

.btn-outline-success.focus, .btn-outline-success:focus {
    box-shadow: none !important;
}

.boxCarte{
  background-color: rgba(220, 220, 220, 0.5) !important;
  color:#000000;
  position: sticky;
  top: 0;
}

.boxCarte::before{
  content: "";
    width: 15px;
    height: 15px;
    display: block;
    position: absolute;
    top: -2px;
    left: -2px;
    border-left: 2px solid #000000;
    border-top: 2px solid #000000;
}
.boxCarte:after{
  content: "";
    width: 15px;
    height: 15px;
    display: block;
    position: absolute;
    top: -2px;
    right: -2px;
    border-right: 2px solid #000000;
    border-top: 2px solid #000000;
}

.got_corners_bot {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
}
.got_corners_bot::before {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  position: absolute;
  bottom: -2px;
  left: -2px;
  border-left: 2px solid #000000;
  border-bottom: 2px solid #000000;
}
.got_corners_bot::after {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  position: absolute;
  bottom: -2px;
  right: -2px;
  border-right: 2px solid #000000;
  border-bottom: 2px solid #000000;
}
@media screen and (max-width: 1330px) {

  .menu h2{
    font-size: 150px !important;
    left:-40px;
  }
}

@media screen and (max-width: 1151px) {
  .menu {
    width: 50% !important;
  }
  .menu h2{
    font-size: 190px !important;
    left:-50px;
  }
}

@media screen and (max-width: 910px) {

  .menu h2{
    font-size: 150px !important;
    left:-40px;
  }
}

@media screen and (max-width: 768px) {
  .menu {
    width: 75% !important;
  }
   .menu h2{
    font-size: 190px !important;
    left:-50px;
  }

}
@media screen and (max-width: 610px) {

  .toogle{
    top: 0px;
    right: 5px;
  }
  .menu h2{
    font-size: 150px !important;
    left:-40px;
  }

  h1{
        padding-top: 15px !important;
  }
  .login{
        width: 100% !important;
  }
  
}