.accueil {
    background: #F1F2F8 url(../img/d.png) no-repeat;
    background-size: auto 100%;
    background-position: top right;
}

.accueil header {
    height: auto !important;
}

.accueil header .logo {
    width: 300px !important;
    height: 150px !important;
    margin-left: 32px;
    background: url(../img/logo.svg) no-repeat;
    background-size: contain;
    background-position: center;
}

.accueil .main {
    min-height: calc(100vh - 150px);
}

.icone {
    height: 20px;
}

.p-64 {
    padding: 64px;
}

.br-r-64 {
    border-bottom-right-radius: 64px;
    border-top-right-radius: 64px;
}

.btn-full {
    line-height: 16px;
    color: #F1F2F8 !important;
    padding: 16px 24px !important;
    background: rgb(132,50,255);
    background: linear-gradient(108deg, rgba(132,50,255,1) 0%, rgba(0,213,255,1) 100%);
}

.desc h3 {
    font-size: 28px;
    line-height: 40px;
    margin-bottom: 32px;
    color: #040E18 !important;
}
.desc p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 32px;
    color: #7A8693 !important;
}

.mq-add {
    display: none;
}

@media (max-width: 1024px) {

    .accueil header .logo {
        width: 250px !important;
    }

    .accueil .main {
        min-height: calc(100vh - 100px);
    }

    .p-64 {
        padding: 32px;
    }

    .accueil header .logo {
        height: 100px !important;
    }
    
}

@media (max-width: 768px) {
    
    .accueil {
        z-index: -1;
        background: #F1F2F8 url(../img/t2.png) no-repeat;
        background-size: auto 100%;
        background-position: top left;
    }
    
    .accueil:after {
        content: "";
        z-index: -1;
        position: absolute;
        height: 100vh;
        width: 100%;
        top: 0; left: 0;
        background: url(../img/t.png) no-repeat;
        background-size: auto 100%;
        background-position: top right;
    }

    .accueil header .logo {
        width: 200px !important;
        height: 75px !important;
    }

    .accueil .main {
        min-height: calc(100vh - 75px);
    }
    
    .desc h3 {
        font-size: 28px;
        line-height: 36px;
    }
    
    .desc p {
        font-size: 16px;
        line-height: 24px;
    }
    
    .block-btn {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    
    .mq-add {
        display: block;
    }
    
    .mq-remove {
        display: none;
    }
    
    .p-64 {
        padding: 24px;
    }
    
    .accueil {
        background: #F1F2F8 url(../img/t2.png) no-repeat;
        background-size: auto 100%;
        background-position: top left;
    }
    
    .accueil:after {
        content: "";
        z-index: -1;
        position: absolute;
        height: 100vh;
        width: 100%;
        top: 0; left: 0;
        background: url(../img/m.png) no-repeat;
        background-size: auto 100%;
        background-position: top right;
    }
    
    .desc h3 {
        font-size: 28px;
        line-height: 36px;
    }
    
    .desc p {
        font-size: 16px;
        line-height: 24px;
    }
}


@media (max-width: 425px) {
    
    .desc h3 {
        font-size: 24px;
        line-height: 32px;
    }
    
    .desc p {
        font-size: 16px;
        line-height: 24px;
    }
}

/***********************************************************************/
/***********************************************************************/
/***********************************************************************/
/***********************************************************************/
/***********************************************************************/

[onclick] {
    cursor: pointer;
}

input, label, a{
	
	cursor: pointer !important;
}

.wcu-line {
    height: 100%;
    width: 100%;
    z-index: -1;
    top:0;
    left: 0;
    margin-top: 4px;
    background-image: linear-gradient(90deg, #8432ff, #00d5ff);
}
.logo {
    display: block; 
    /*width: 201px !important;*/
    height: 120px;
}
.disable {
    display: none;
}
.formulaire {
    max-width: 768px;
    width: 100%;
}

.formulaire {
    /*max-width: 1024px;*/
    width: 100%;
}

fieldset {
    padding: 16px !important;
    border: solid 1px rgba(166, 170, 185, 0.5);
    border-radius: 16px;
}

.tl-pointer {
    cursor: pointer;
    border: solid 1px rgba(166, 170, 185, 0.5);
}

.pointer {
    cursor: pointer;
}

legend {
    margin-left: 24px;
}

.modal {
    z-index: 999999;
}

@media (min-width: 768px) {
    .tl-disable {
        display: none;
    }
    
    .tl-grid {
        display: grid;
    }

    .tl-pointer {
        border: none;
        cursor: pointer;
    }
}

progress:not(value) {
    /* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
}

/* Styling the determinate progress element */

progress[value] {
    /* Get rid of the default appearance */
    appearance: none;
    
    /* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
    border: none;
    
    /* Add dimensions */
    width: 100%; height: 20px;
    
    /* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
      background-color: #e0e2f0;
      border-radius: 3px;
    
    /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
    color: #8432ff;
    
    position: relative;
}

/*
Webkit browsers provide two pseudo classes that can be use to style HTML5 progress element.
-webkit-progress-bar -> To style the progress element container
-webkit-progress-value -> To style the progress element value.
*/

progress[value]::-webkit-progress-bar {
    background-color: #e0e2f0;
    border-radius: 3px;
}

progress[value]::-webkit-progress-value {
    position: relative;
    
    background-size: 35px 20px, 100% 100%, 100% 100%;
    border-radius:3px;
    
    /* Let's animate this */
    animation: animate-stripes 5s linear infinite;
}

@keyframes animate-stripes { 100% { background-position: -100px 0; } }

/* Let's spice up things little bit by using pseudo elements. */

progress[value]::-webkit-progress-value:after {
    /* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! */
    content: '';
    position: absolute;
    
    width:5px; height:5px;
    top:7px; right:7px;
    
    background-color: white;
    border-radius: 100%;
}

/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */

progress[value]::-moz-progress-bar {
    /* Gradient background with Stripes */
    
    background-image: linear-gradient(90deg, #8432ff, #00d5ff);
    
    background-size: 35px 20px, 100% 100%, 100% 100%;
    border-radius:3px;
    
    /* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */
}

/* Fallback technique styles */
.progress-bar {
    background-color: #e0e2f0;
    border-radius: 3px;

    /* Dimensions should be similar to the parent progress element. */
    width: 100%; height:20px;
}

.progress-bar span {
    background-image: linear-gradient(90deg, #8432ff, #00d5ff);
    border-radius: 3px;
    
    display: block;
    text-indent: -9999px;
}


p[data-value] { 
  
  position: relative; 
}

/* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */

p[data-value]:after {
    content: attr(data-value) '%';
    position: absolute; right:0;
}


.wcuprogress::-webkit-progress-value {
    background-color: #8432ff;
}


.wcuprogress::-moz-progress-bar {
    background-color: #8432ff;
}

/* Slider start */
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  background: #d3d3d3;
  border-radius:50px;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider-1 {
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  background: #d3d3d3;
  border-radius:50px;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.slider-2 {
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  background: #d3d3d3;
  border-radius:50px;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.slider-3 {
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  background: #d3d3d3;
  border-radius:50px;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.slider-4 {
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  background: #d3d3d3;
  border-radius:50px;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}


.slider_ie {
  height: 25px !important;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border-radius:50px;
  width: 25px;
  height: 25px;
  background: #4CAF50!important;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius:50px;
  background: #4CAF50!important;
  cursor: pointer;
}

.slider-1::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border-radius:50px;
  width: 25px;
  height: 25px;
  background: #4CAF50!important;
  cursor: pointer;
}

.slider-1::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius:50px;
  background: #4CAF50!important;
  cursor: pointer;
}

.slider-2::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border-radius:50px;
  width: 25px;
  height: 25px;
  background: rgba(54, 162, 235, 1)!important;
  cursor: pointer;
}

.slider-2::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius:50px;
  background: rgba(54, 162, 235, 1)!important;
  cursor: pointer;
}

.slider-3::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border-radius:50px;
  width: 25px;
  height: 25px;
  background: rgba(255, 206, 86, 1)!important;
  cursor: pointer;
}

.slider-3::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius:50px;
  background: rgba(255, 206, 86, 1)!important;
  cursor: pointer;
}

.slider-4::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border-radius:50px;
  width: 25px;
  height: 25px;
  background: rgba(255, 99, 132, 1)!important;
  cursor: pointer;
}

.slider-4::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius:50px;
  background: rgba(255, 99, 132, 1)!important;
  cursor: pointer;
}

/* Slider end */

.firebaseui-idp-button{
	
	max-width: 320px !important;
}

/********************************************/

.acceuil {
    min-height: 100vh;
    background: url(../img/bg.png);
    background-size: cover;
}

.acceuil header {
    height: auto !important;
}

.acceuil header .logo {
    width: 300px !important;
    height: 150px !important;
    margin-left: 32px;
    background: url(../img/logo-white.svg) no-repeat;
    background-size: contain;
    background-position: center;
}

.p-64 {
    padding: 64px;
}

.br-r-64 {
    border-bottom-right-radius: 64px;
    border-top-right-radius: 64px;
}

.btn-full {
    display: flex;
    justify-content: flex-end;
    padding-right: 64px !important;
}

@media (max-width: 1024px) {
    .acceuil {
        background: white;
    }
    
    .acceuil header {
        display: flex;
        flex-flow: column;
    }

    .acceuil header .logo {
        width: 200px !important;
        height: 100px !important;
        margin: 0;
        justify-content: center;
        background: url(../img/logo.svg) no-repeat;
        background-size: contain;
        background-position: center;
    }

    .desc {
        /* font-size: 24px; */
        color: black !important;
    }
    
    .btn-full {
        border-radius: 0;
        justify-content: center;
        color: whitesmoke!important;
        padding-right: 16px !important;
        background: rgb(132,50,255);
        background: linear-gradient(108deg, rgba(132,50,255,1) 0%, rgba(0,213,255,1) 100%);
    }
    
    .btn-full:hover {
        color: white !important;
    }
}
/***********************************************************************/
/***********************************************************************/
/***********************************************************************/
/***********************************************************************/
/***********************************************************************/

.firebaseui-idp-list>.firebaseui-list-item>button {
    margin-bottom: 15px;
    text-align: center;
    border-radius: 32px !important;
}

/*****************************************/

.choose_organization{
	cursor: pointer;
}
.choose_organization:hover{
	background-color: rgba(159, 123, 255, 0.1);
}
#trustwaveSealImage{
	width: 60px;
}

.firebaseui-error-wrapper2 {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    word-spacing : normal;
    z-index : auto;
    /* basic modern patch */
    all: initial;
    all: unset;
}

/* basic modern patch */

.error{
	color: red !important;	
}
.error_border{
	border: 1px solid red !important;
	border: inherit;
}

/* #floating-panel { */
	/* position: absolute; */
	/* top: 10px; */
	/* left: 25%; */
	/* z-index: 5; */
	/* background-color: #fff; */
	/* padding: 5px; */
	/* border: 1px solid #999; */
	/* text-align: center; */
	/* font-family: 'Roboto','sans-serif'; */
	/* line-height: 30px; */
	/* padding-left: 10px; */
/* } */
/* #floating-panel { */
	/* background-color: #fff; */
	/* border: 1px solid #999; */
	/* left: 25%; */
	/* padding: 5px; */
	/* position: absolute; */
	/* top: 10px; */
	/* z-index: 5; */
/* } */
#heatmap {
	min-height: 300px;
}

.bg-transparent{
	background: transparent !important;
}

.social-circle {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 25px;
	height: 25px;
	margin-top: 3px;
	background: #2a2d36;
    border-radius: 60px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s; 
}
.social-circle:hover {
    background: #62687d; }
	

.medias {
    height: 100px !important;
    width: auto !important;
}

.iti input[type="text"]{
	padding-left: 50px !important;
}

.lowerCase{
	text-transform: lowercase;
}

.upperCase{
	text-transform: uppercase;
}
.capitalize{
	text-transform: capitalize;
}