/*========== LOGIN PAGE ==========*/

 https://codepen.io/ismailvtl/pen/bGRpoNN

*/

/*----- inputs pictograms -----*/
/* 

 https://codepen.io/10tribu/pen/DbGOwg

*/

#inputs input { 
    background: #f1f1f1 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAABkCAYAAACPQLC2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAhtJREFUeNrsV1FuwjAMbRECBAIqxD+7ARyhOwE9QvfDd28wbrB+8wNHaG9QblBuAP9IzeADAYLOntwqZQlk6z6mKZEMkRO/2o7T+plpmhplRsUoOTSABtAA/wagij+z2ayg7Pf7XfgLQGxSRSDOdrt95/dNJhOxB9frNQCxQQwSnAdSD24HvOZsgdpWzgG+J0ViWdZAFSASAESMsY0qgIMGWQ4I0FHOwW63w2w/t9vtwX6/3yjVQbPZ7IK8tVqtFCSBeW6Mc9ThGu6RheCDeBSvBfMptzZFHX2EPACZFwAajcYYYnW5c0dxQT9EkayN8xwAsisJMb4TPtqEGYDzg2vg5B6gW6UuU5kvdOVO5T2SiAfAyluAMAVDRns/c2DqBkMDaAANoAE0gAbQAH+PsdyyFQFz8amls0jNSOcjg6nKjHu93gDav5gzzEbWBjuwx5aGQI2UxTdYMBZoCPMYZATiCT0AZjIU0Z4kSV5o3SBS5slIly1q8TqdzpDWnayrl5EuS9L+xUBCGL8uA4junByfVCYDcBXLIPiSA2QjCEAxxg9a3mnBA2Ahc2QjHN21JU9em6bpHA6HTQ5Qr9fnnOuZ8ZrOHgtqlCXyeDyGBb5Qq9VExp+s5HQ6rWgeCu8CjFeB2wxc9M/n8+rhZeIqLn8yxgfGS6XbSAWx5t2+XC5L5fcBHckTHYsH4YTfeR9oxqIBNIAG+DWADwEGAAgZ5RSSVu1LAAAAAElFTkSuQmCC) no-repeat;
    padding: 15px 15px 15px 30px;
    margin: 0 0 10px 5px;
    width: 85%;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 1px 1px #525252 inset, 0 1px 0 #6A6A6A;
}

#login {
    background-position: 5px -2px !important;
}

#pwd {
    background-position: 5px -52px !important;
}

#inputs input:focus {
    background-color: #fff;
    border-color: #e8c291;
    outline: none;
    box-shadow: 0 0 0 1px #e8c291 inset;
}

/*

<input id="login" type="text" onblur="if(this.value=='')this.value='Pseudo ID';" onfocus="if(this.value=='Pseudo ID')this.value='';" value="Pseudo ID" />
<input id="pwd" type="text" onblur="if(this.value=='')this.value='Mot de passe';" onfocus="if(this.value=='Mot de passe')this.value='';" value="Mot de passe" />

*/
/*--------------------*/

/*========== MAIN LOGIN PAGE ==========*/

:root {
  --bodybg: #dcdefe;
  --primary-color: #B91515;
  --grey: #d6d6d6;
  --placeholder: #969696;
  --white: #fff;
  --text: #222;
  --slider-bg: #ffc69c;
  --login-cta-hover: #1f0098;
}

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  display: flex;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
  font-family: 'Raleway', Open Sans, Arial, Helvetica, sans-serif;
  font-weight: 200;
  font-style: normal;
  background-image: url('../img/bg_1.jpg');
}

.login-container {
  display: flex;
  max-width: 1200px;
  background: var(--white);
  margin: auto;
  width: 100%;
  min-width: 320px;
  border-radius: 50px;
}

.login-container .logo svg {
  height: 40px;
  width: 40px;
  fill: var(--primary-color);
}

.login-container .login-form {
  width: 50%;
  box-sizing: border-box;
  padding: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  border-radius: 50px 0 0 50px;
}

.login-container .login-form .login-form-inner {
  max-width: 380px;
  width: 95%;
}

.login-container .login-form .sign-in-seperator {
  text-align: center;
  color: var(--placeholder);
  position: relative;
  margin: 30px 0 20px;
}

.login-container .login-form .sign-in-seperator span {
  background: var(--white);
  z-index: 1;
  position: relative;
  padding: 0 10px;
  font-size: 1.25em;
}

.login-container .login-form .sign-in-seperator:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: var(--grey);
  left: 0;
  top: 50%;
  z-index: 0;
}

.login-container .login-form .login-form-group {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.login-container .login-form .login-form-group label {
  font-size: 1.25em;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 10px;
}

.login-container .login-form .login-form-group input {
  padding: 10px 20px;
  box-sizing: border-box;
  border: 1px solid var(--grey);
  border-radius: 50px;
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  font-size: 1em;
  color: var(--text);
  transition: linear 0.2s;
}

.login-container .login-form .login-form-group input:focus {
  outline: none;
  border: 1px solid var(--primary-color);
}

.login-container
  .login-form
  .login-form-group
  input::-webkit-input-placeholder {
  color: var(--placeholder);
  font-weight: 300;
  font-size: 1em;
}

.login-container .login-form .login-form-group.single-row {
  flex-direction: row;
  justify-content: space-between;
  padding-top: 5px;
}

.login-container .login-form .link {
  color: var(--primary-color);
  font-weight: 6700;
  text-decoration: none;
  font-size: 1em;
}

.login-container .login-form .link:hover {
  text-decoration: underline;
}

.login-container .login-form .login-cta {
  color: var(--white);
  text-decoration: none;
  border: 1px solid var(--primary-color);
  margin: 25px 0 35px;
  background: var(--primary-color);
}

.login-container .login-form .login-cta:hover {
  background: var(--login-cta-hover);
}

.login-container .onboarding {
  flex: 1;
  background: var(--slider-bg);
  display: none;
  width: 50%;
  border-radius: 0 50px 50px 0;
}

.login-container .login-form .login-form-group label .required-star {
  color: var(--primary-color);
  font-size: 20px;
  line-height: 10px;
}

/*---------- LOGIN BUTTON ----------*/

.login-container .rounded-button {
  display: flex;
  width: 100%;
  text-decoration: none;
  border-radius: 50px;
  padding: 10px 20px;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  transition: linear 0.2s;
  background: linear-gradient(#ff995b, #ee6116) !important;
  border: 1px solid #555 !important;
  color: #fff;
  cursor: pointer;
  font-family: 'Righteous', sans-serif;
  font-size: 1.5em;
}

.login-container .rounded-button:hover {
  background: linear-gradient(#ee6116, #ee6666) !important;
}

/*------------------------*/

.login-container .body-text {
  font-size: 1.5em;
  font-weight: 400;
  color: var(--text);
}

.login-container .onboarding .swiper-container {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

.login-container .onboarding .swiper-slide {
  text-align: center;
  color: var(--text);
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 0;
}

.login-container .onboarding .swiper-pagination-bullet-active {
  background-color: var(--primary-color);
}

.login-container .onboarding .swiper-slide {
  flex-direction: column;
  display: flex;
}

.login-container .onboarding .swiper-slide .slide-image img {
  width: 100%;
  height: 80%;
}

.login-container .onboarding .slide-content {
  width: 75%;
}

.login-container .onboarding .slide-content h2 {
  font-size: 1.5em;
  font-weight: 600;
  margin-bottom: 15px;
}

.login-container .onboarding .slide-content p {
  font-size: 1em;
  line-height: 2em;
  font-weight: 400;
}

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 30px;
}

.login-container .login-form .login-form-inner h1 {
  margin-bottom: 20px;
  margin-top: 10px;
  font-family: 'Fascinate Inline';
  font-weight: 400;
  font-style: normal;
  font-size: 8vmin;
  color: #555;
  letter-spacing: 0.05em;
  color: crimson;
}

@media screen and (min-width: 768px) {
  .login-container .onboarding {
    display: flex;
  }
}

@media screen and (max-width: 767px) {
  .login-container {
    height: 100vh;
  }
}

@media screen and (width: 768px) {
  .login-container .onboarding {
    order: 0;
  }
  .login-container .login-form {
    order: 1;
  }
  .login-container {
    height: 100vh;
  }
}

@media screen and (max-width: 420px) {
  .login-container .login-form {
    padding: 20px;
  }
  .login-container .login-form-group {
    margin-bottom: 16px;
  }
  .login-container {
    margin: 0;
  }
}

svg path {
  fill: crimson; 
}

.crimson {
color: crimson;
}

/*=========== MODAL ALERT OVERLAY ==========*/

#overlay-modal-alert {
  background: rgba(0, 0, 0, 0.7);
  max-width: 100vw;
  height: 100vh;
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  text-align: center;
  z-index: 1000;
  visibility: hidden;
}

.show-alert-box {
  visibility: visible !important;
}

.hide-alert-box {
  visibility: hidden !important;
}

/*==========  ALERT "NEED TO TALK" ==========*/

/* https://codepen.io/iamsgokul/pen/axawKr */

/*=======================================*/

        #messenger {
            background-color: #fff;
            width: 320px;
            height: 320px;
            border-radius: 56px;
            margin: 10% auto;
        }

        .mesgcircle {
            margin: 60px;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: #07f;
            float: left;
            position: relative;
        }

        .mesgcircle:after {
            left: -6px;
            content: '';
            border-top: 46px solid #07f;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            display: block;
            width: 0px;
            height: 0;
            transform: rotate(40deg);
            position: absolute;
            top: 164px;
            border-radius: 5px;
        }

        .mesgload {
            width: 100%;
            height: 40px;
            text-align: center;
            margin: 80px 0;
            float: left;
        }

        .mesgload span {
            width: 22px;
            height: 22px;
            background-color: #fff;
            border-radius: 50%;
            display: inline-block;
            margin: 10px 6px 0;
            animation-name: dotone;
            animation-duration: 1.8s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        .mesgload span:nth-child(2) {
            animation-delay: .30s;
        }

        .mesgload span:nth-child(3) {
            animation-delay: .61s;
        }

        @keyframes dotone {
            25% {
                transform: translateY(-25px)
            }

            65% {
                transform: translateY(8px)
            }

            80% {
                transform: translateY(0px)
            }
        }

        .msgscrol {
            background-color: #ff2a00;
            width: 250px;
            height: 45px;
            border-radius: 25px;
            overflow: hidden;
            position: absolute;
            top: -75px;
            right: -75px;
        }

        .msgscrol span {
            font-size: 1.5em;
            color: #fff;
            display: block;
            white-space: nowrap;
            margin: 1px 0;
            animation: 15s txtscrl linear infinite;
        }

        @keyframes txtscrl {
            0% {
                transform: translateX(130px)
            }

            100% {
                transform: translateX(-1200px)
            }
        }

/*========== MODAL SUCCESS ==========*/

#success_tic .page-body {
  max-width: 400px;
  background-color: #fff;
  margin: 10% auto !important;
  font-family: 'Raleway', sans-serif;
  font-size: 2.5vmin;
  font-weight: normal;
  color: #333;
}

#success_tic .page-body .head {
  text-align: center;
}

#success_tic .close, #success_tic .close:active, #success_tic .close:visited, #success_tic .close:hover {
    opacity: 1;
    position: absolute;
    right: 0px;
    font-size: 40px;
    padding: 3px 15px;
    margin-bottom: 10px;
    text-decoration: none;
	color: var(--primary-color);
}

#success_tic .checkmark-circle {
  width: 150px;
  height: 150px;
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.checkmark-circle .background {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #1ab394;
  position: absolute;
}

#success_tic .checkmark-circle .checkmark {
  border-radius: 5px;
}

#success_tic .checkmark-circle .checkmark.draw:after {
  -webkit-animation-delay: 300ms;
  -moz-animation-delay: 300ms;
  animation-delay: 300ms;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-name: checkmark;
  -moz-animation-name: checkmark;
  animation-name: checkmark;
  -webkit-transform: scaleX(-1) rotate(135deg);
  -moz-transform: scaleX(-1) rotate(135deg);
  -ms-transform: scaleX(-1) rotate(135deg);
  -o-transform: scaleX(-1) rotate(135deg);
  transform: scaleX(-1) rotate(135deg);
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

#success_tic .checkmark-circle .checkmark:after {
  opacity: 1;
  height: 75px;
  width: 37.5px;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;
  border-right: 15px solid #fff;
  border-top: 15px solid #fff;
  border-radius: 2.5px !important;
  content: '';
  left: 35px;
  top: 80px;
  position: absolute;
}

@-webkit-keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 37.5px;
    opacity: 1;
  }
  40% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
  100% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
}
@-moz-keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 37.5px;
    opacity: 1;
  }
  40% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
  100% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
}
@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 37.5px;
    opacity: 1;
  }
  40% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
  100% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
}