body {
    background: #eee;
    font-family:Calibri;
    overflow-x: hidden;
}

#regForm {
    background-color: #ffffff;
    margin: 0px auto;
    padding: 40px;
    border-radius: 10px
}

#register {
    color: #E3203E
}

h1 {
    text-align: center
}

input[type=text], select, textarea {
    padding: 10px;
    width: 100%;
    font-size: 17px;
    border: 1px solid #aaaaaa;
    border-radius: 10px;
    -webkit-appearance: none
}

.tab input:focus, select:focus, textarea:focus {
    border: 1px solid #E3203E !important;
    outline: none
}

input.invalid {
    border: 1px solid #e03a0666
}

.tab {
    display: none
}

#prevBtn, #nextBtn, #sendBtn {
    background-color: #E3203E;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    padding: 10px 20px;
    font-size: 17px;
    cursor: pointer
}

#prevBtn:hover, #nextBtn:hover, #sendBtn:hover {
    opacity: 0.8
}

#prevBtn:hover, #nextBtn:hover, #sendBtn:hover {
    outline: none !important
}

#prevBtn {
    background-color: #bbbbbb
}

#saveBtn {
    background-color: #36b9cc
}

#sendBtn {
    background-color: #1cc88a
}

.all-steps {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
    width: 100%;
    display: inline-flex;
    justify-content: center
}

.step {
    height: 40px;
    width: 40px;
    margin: 0 2px;
    background-color: #bbbbbb;
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    color: #E3203E;
    opacity: 0.5
}

.step.active {
    opacity: 1
}

.step.finish {
    color: #fff;
    background: #E3203E;
    opacity: 1
}

.all-steps {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px
}

.thanks-message {
    display: none
}



.ribbon {
  position: relative;   /* pour servir de référent */
  margin: 1em -10px;    /* pour décaler les bords */
  background: #CC0000;  /* pour visualiser */
}
.ribbon::before,
.ribbon::after {
  content: "";
  position: absolute;
  border-style: solid;
}
.left-bottom::before {
  left: 0;
  top: 100%;
  border-color: transparent #800000;
  border-width: 0 10px 10px 0;
}

.right-bottom::after {
  right: 0;
  top: 100%;
  border-color: #800000 transparent;
  border-width: 10px 10px 0 0;
}

.left-top::before {
  left: 0;
  bottom: 100%;
  border-color: transparent #800000;
  border-width: 10px 10px 0 0;
}

.right-top::after {
  right: 0;
  bottom: 100%;
  border-color: #800000 transparent;
  border-width: 0 10px 10px 0;
}