html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

* {
    font-family: "Noto Sans", "Noto Sans CJK JP", sans-serif;
    color: #333333;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: auto;
}


div.header-wrapper {
    background-color: #e3126e;
    color: white;
    width: 100%;
}

.header-wrapper header {
    text-align: right;
}

.header-wrapper header ul {
    display: inline-block;
    list-style-type: none;
    padding: 0;
    margin: 0.5em;
}

.header-wrapper header ul li {
    display: inline-block;
    text-align: right;
    padding: 0.5em 1em;
    cursor: pointer;
}

.main-line {
    /*height: 15em;*/
    background-color: whitesmoke;
    color: #333333;
}

.main-line .title {
    font-size: 37px;
    padding: 1.3333333333333333em 40px 0;
}

.main-line .subtitle {
    font-size: 28px;
    padding: 0em 40px;
}

.main-line .line3 {
    font-size: 0.75em;
    padding: 1em 40px 44px;
}

.section-login {
    background-color: white;
    color: #333333;
}

.group-center {
    display: inline-block;
    border: solid 1px green;
    margin: auto;
    text-align: center;
}

.group-center:after {
    content: "";
    display: block;
    clear: both;
}

.section-login .clogin-wrapper, .plogin-wrapper {
    padding-top: 2em;
    padding-bottom: 2em;
    border: solid 1px red;
    width: 40%;
    min-width: 200px;
    max-width: 400px;
    float: left;
}

.section-events {
    background-color: whitesmoke;
    padding: 40px;
}

.section-about {

}

div.error-404, div.error-500 {
    padding-top: 2em;
    margin: auto;
    width: 80%;
    max-width: 500px;
    min-width: 300px;
}

div.contact {
    width: 50%;
    max-width: 500px;
    min-width: 300px;
    margin: auto;
    padding-top: 3em;
}

.copy-label {
    color: rgb(34, 178, 233);
    cursor: pointer;
    display: inline-block;
}

span.copying {
    transform: translateY(-10px);
    opacity: 0;
    transition: all ease 1s;
}

.footer {
    font-size: small;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    position: fixed;
    bottom: 0;
}

div.copyright {
    display: flex;
    text-align: center;
    justify-content: center;
    line-height: 1.5em;
    padding-bottom: 0.3em;
    color: #666;
    max-width: 500px;
}


.mapleleaf-icon {
    display: inline-block;
    height: 18px;
    width: 18px;
    padding-bottom: 1em;
}

/* Section erreur */

.content-error {
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
}

.content-box {
    width: fit-content;
    height: 215px;
    background-color: #e3126e40;
    border-radius: 4px;
}

.contact-us {
    color: #e3126e;
    font-size: small;
    padding-bottom: 0.8em;
    padding-right: 1em;
}

.action__container {
    display: flex;
    margin: auto;
    padding-top: 1em;
    width: 400px;
    align-items: center;
    justify-content: space-between;
}

/* Arrow */

.widget {
    display: flex;
    justify-content: space-around;
    cursor: pointer;
    width: 60px;
    height: 60px;
}

.widget_click {
    display: flex;
    align-items: center;
}

.circle.pulse {
    box-sizing: border-box;
    border: solid 1px;
    border-radius: 50px 50px;
    width: 52px;
    height: 52px;
    position: absolute;
    opacity: 0.7;
}

.circle__white {
    border-color: white!important;
}

.arrow_box {
    box-sizing: border-box;
    border: solid 2px rgba(204, 204, 204, 0);
    border-radius: 50px/50px;
    width: 52px;
    height: 52px;
    padding: 4px;
    transition: border .6s cubic-bezier(.25, .8, .25, 1);
}

.arrow_box:hover {
    border: solid 2px rgb(255, 254, 250);
}

.arrow {
    margin-top: 8px;
    margin-left: 8px;
    width: 24px;
    height: 24px;
    opacity: 0.5;
    transition: visibility 0s 1s, opacity 1s linear;
}

.arrow-left__white {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAH6QAAB+kBlHo8QAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAKLSURBVGiB7dlPiJR1GMDxZ9fd0t1FKYpdIpQQDSEioggKAiGCElEQ6VCCN0EEEUGICLrVIYLo0CGiUwRFJwVvWQRBHTykQoQYofSHxX/ojrup+/EwM7LsO+/vffXgM0JfGBiGOXyeeX+/d3jfN+L/BodRjGc77iqswFf4BiPZnjsKY/gWc73XR9mm1i3D97uKA9m2xvAAjqKjWgc7s421YSW+q8HDIi5iMttaCRP4cdmyWY6/ihezrZUwiZ8afvkreCHbWglT+LmAv9nDP59trYQ1+BXzBfwlPJ1trYSHcLIBfxFPZVsr4VH8XsDfwCw2ZFsrYRqnsVCDv45/sT7bWgkz+KOA/w//4IlsayWsxbkG/Fk8nm2thHX4u7c86vB/4rFsayVs6G3IOvwCzmAm21oJT+K87lllUPP4DY9kWythEy7ons8HdQ2n8HC2tRKe0f0HLeGPY3W2td/tyz08GxHfR8TU0s+XdD0izkXEBxExfy9wLbo2EhGB5yLiWERMxmD8sDY7ipcj4oe4//ARETEaEe9GxFjch/iI7gDbIuKXiOgkW+6q/h54MCIOR8RLETFR+H4nIm7eA1fbZm+/U76r0K+DVxLB5TCOI+ov0Pv/wluzrbXp3hb8umGIDrZnW2vrDfFliyF2ZFtrwwg+072nUxpiV7a1tt4Qn2re2LuzrbX1hvikYTnNY1+2tRjeb7En9mc7i+GdFkMczHYWw9sNe2IO72U7i+GQ7sVNaYgPs53FsLfhSHQM++Ml7GmxnD7OdhbDmy2W0+eG+Wkl3mpxJL4Y9iHeKByJBZzAqmxnMWwZcCRu4C9MZ/tahdeWDLGIy9iY7bqj8GpviDnD+IysTdiM17MdQ98t0n6+hRSkFyYAAAAASUVORK5CYII=) no-repeat 0 0;
    background-size: 100%;
    opacity: 1;
}


/* Contact Form */

.form-box {
    width: fit-content;
    height: fit-content;
    background-color: transparent;
    border-radius: 4px;
    border: 2px solid #80808029;
}

/* Style for phone or small screens */

@media (max-height: 300px), (max-width: 600px) and (orientation: portrait) {
    .form-box {
        border: 2px solid transparent;
    }
}

@media (max-height: 400px), (max-width: 300px) and (orientation: landscape) {
   .form-box {
        border: 2px solid transparent;
    }
}

.form-label {
    font-size: small;
}

input:focus {
    outline:none;
}

.form-box input:not([type=submit]):not([type=file]) {
    margin: 0.5em 0;
    padding: 0.4em;
    width: 100%;
    max-width: 100%;
    vertical-align: bottom;
    text-align: inherit;
    font-size: 14px;
    background-color: transparent;
    border: solid 1px #e73b8666;
    border-radius: 3px;
    color: #333333;
    outline: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

.submit__container{
    display: flex;
    justify-content: center;

}

.button__tosend {
    text-align: center;
    margin-top: 1em;
    border-radius: 3px;
    background-color: #e73b86;
    width: 40%;
}

.form-box input[type=submit] {
    color: whitesmoke;
    background-color: #e73b86;
    border: none;
    border-radius: 1px;
    font-size: 15px;
    margin: 0.5em 0 0.5em 0;
    display: inline-block;
    vertical-align: middle;
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    transition-duration: 0.3s;
    transition-property: transform;
    transform-origin: 0 100%;
    cursor: pointer;
}

.checkbox {
    display: flex;
    padding-bottom: 0.5em;
    align-items: center;
}

.form-box textarea {
    padding: 0.4em;
    width: 100%;
    max-width: 100%;
    vertical-align: bottom;
    text-align: inherit;
    font-size: 14px;
    background-color: transparent;
    border: solid 1px #e73b8666;
    border-radius: 3px;
    color: #333333;
    outline: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

.object-select {
    padding-top: 0.4em;
}

.force-logout {
    color: #e3126e;
    font-size: small;
    padding-bottom: 0.8em;
    padding-right: 1em;
}

fieldset {
    padding: 0;
    border: none;
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
input:-webkit-autofill:focus{
    font-size: 14px;
  -webkit-text-fill-color: #333;
  -webkit-box-shadow: 0 0 0 1000px #000 inset;
  background-color: transparent !important;
}