/**
*
* CONTENTS
*
* SETTINGS
* Variables couleur CSS
*
* TOOLS
* box-sixing
* HTML, BODY config
* font-face
* Custom scrollbar pour FF, Edge, Chrome & Safari
* Icones et svg
* Skew transform
* form & erreur gestion
*
* PAGES
* COMPONENTS
* Sidebar fixe
* Navbar header fixe
* switch menu header
*
**/

/**--- font-face ---**/
@font-face {
    font-family: 'ClanOT-Medium', sans-serif;
    src: url("/assets/font/ClanOT-Medium.ttf") format("trueType"),
        url('/assets/font/ClanOT-Medium.woff') format('woff');
}
/* poppins-regular - latin */
@font-face {
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/font/poppins-v15-latin/poppins-v15-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Poppins'),
         url('/assets/font/poppins-v15-latin/poppins-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/assets/font/poppins-v15-latin/poppins-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('/assets/font/poppins-v15-latin/poppins-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('/assets/font/poppins-v15-latin/poppins-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/assets/font/poppins-v15-latin/poppins-v15-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
  }
  
@font-face {
    font-family: 'FF Clan';
    src: local('FF Clan Medium'),
        url('/assets/font/ClanOT-Medium/ClanOT-Medium.woff') format('woff'),
        url('/assets/font/ClanOT-Medium/ClanOT-Medium.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: ClanOT;
    font-style: normal;
    font-weight: 600;
    src: local("ClanOT-NarrowMedium"), url("/assets/font/ClanOT-NarrowMedium.woff") format("woff");
}

html {
    background: var(--white);
}
.font-poppins {
    font-family: 'Poppins', sans-serif;
}
.font-ff-clan {
    font-family: 'FF Clan'!important;
}

body {
    box-sizing: border-box;
    /* font-family: 'Poppins', sans-serif; */
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: none;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-font-smoothing: antialiased;
}
body > .bg {
/*    background: url("/assets/img/bg--indep.jpg") left center; pour correction audit SEO */
    background: url("/assets/img/bg-indep.webp") no-repeat left center;;
    background-size: cover;
    background-attachment: fixed;
    min-height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
body > .bg::after {
    content:"";
    background-color: rgba(255,255,255,.5);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 100%;
    width: 100%;
    z-index: 1;
}
/* 
body.notConnected > .bg,
body.inscription > .bg {
    background: url("/assets/img/bg--indep.jpg") left center;
    background-size: cover;
    background-attachment: fixed;
    min-height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}  */

body.notConnected > .bg::after,
body.inscription > .bg::after {
    content:"";
    background-color: transparent;
}

body.notConnected .mainnavheader {
    align-items: center;
}
/*body.notConnected.home .mainnavheader .navbar-brand {
    margin-right: 0;
    width: 250px;
    margin-left: calc(50% - 125px);
}*/

@media (max-width: 991px) {
    body.notConnected.home .mainnavheader .navbar-brand, .mainnavheader .navbar-brand.logoHTP {
        margin-right: 0;
        width: 146px!important;
        margin-left: 0;
    }
    body.connected.home .mainnavheader .navbar-brand {
        width: 146px!important;
    }
}

@media (max-width: 500px) {
    body.notConnected.home .dashboard {
        background-color: #fff;
        padding-bottom: .5rem;
    }
    body.notConnected.home .mainnavheader .navbar-brand {
        margin-left: 0;
    }
}

body.connected.home .mainnavheader .navbar-brand {
    margin-right: 0;
    width: 250px;
    margin-left: 0;
}

/*body.notConnected:not(.home) .mainnavheader .navbar-brand {
    margin-right: 0;
    width: 200px;
}*/
/* quand pas connecté */
.resetStyle {
    flex-grow: 0;
}
/* --- quand pas connecté */

body .mainfooter,
body .main {
    position: relative;
    /*z-index: 2;*/
}
.recherche {
    position: relative;
    z-index: 1;
}
/* .recherche + .mainfooter {
    display: none
} */

._md-nav-bar-list ._md-nav-button {
    font-family: ClanOT;
    text-transform: Capitalize;
    font-weight: 300;
}

/** Main **/
.main {
    /*padding-left: 291px;   276 + 15 de gutter bootstrap largeur du sidebar fixe uniquement pour les tailles au dessus de la tablette */
    /*transition: all .5s;
    padding-left: 276px;*/
    padding-top: 82px;
    /*padding-top: 70px;*/
    /*height: 100%;*/
    min-height: 100%;
    /*background-color: #ffffff;*/
}
/*@media (max-width: 991px) {
    .main {
        margin-top: 65px;  avant 86px 
    }
}*/
@media (max-width: 991.98px) {
    .main {
        padding-left: 15px;  /* reset le padding-left pour tablette portrait et moins */
    }
}

/**--- Skew transform ---**/
.skew-transform--top-to-bottom {
    transform: translateZ(0) skew(360deg, 6deg);
}
/* corrige l'effet skew pour les enfants */
.skew-transform--top-to-bottom > *,
.skew-transform--top-to-bottom > a {
    transform: translateZ(0) skew(360deg, -6deg);
}

.skew-transform--bottom-to-top {
    transform: translateZ(0) skew(360deg, -6deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.skew-transform--bottom-to-top--4deg {
    transform: translateZ(0) skew(360deg, -4deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
/* corrige l'effet skew pour les enfants */
.skew-transform--bottom-to-top > *,
.skew-transform--bottom-to-top > a,
.skew-transform--bottom-to-top > hr {
    transform: translateZ(0) skew(360deg, 6deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.skew-transform--bottom-to-top--4deg > *,
.skew-transform--bottom-to-top--4deg > a,
.skew-transform--bottom-to-top--4deg > hr {
    transform: translateZ(0) skew(360deg, 4deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@media (min-width: 991.01px) {
    .skew-transform--bottom-to-top__lg {
        transform: translateZ(0) skew(360deg, -6deg);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .skew-transform--bottom-to-top__lg > * {
        transform: translateZ(0) skew(360deg, 6deg);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}


/*------------------------------*\
    #PAGE INDEX
/*------------------------------*/
/*------------------------------*\
    #COMPONENTS
/*------------------------------*/

.hidden {
    height: 1px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: -10000px;
    width: 1px;
 }

.navbar .form-control {
    padding      : .75rem 1rem;
    border-width : 0;
    border-radius: 0;
}


/* pour pallier la position sticky du parent qui a un z-index supérieur, ce n'est pas normal car il n'y a pas de style en contre ordre :/ */
.md-standard-list-container.md-autocomplete-suggestions-container, .md-virtual-repeat-container.md-autocomplete-suggestions-container {
    z-index: 1000!important;
}





/* Visualisation d'une annonce ======================================================== */
.disabled {
    /* Make the disabled links grayish*/
    color: gray !important;
    /* And disable the pointer events */
    pointer-events: none;
}


/* Formulaire ajout/modification annonce ======================================================== */
.fieldset {
    position: relative;  
}


.p-dashboard md-autocomplete {
    background-color: transparent;
}
.p-dashboard md-autocomplete md-autocomplete-wrap input{
    border: var(--main-color_freelance) 1px solid;
    border-radius: 30px;
    height: 40px!important;
    background-color: #f9f9f9;
}

/* ********************************** */
.progress-circle {
    position: relative;             /* pour servir de référent */
    box-sizing: border-box;         /* prise en compte bordure dans la dimension */
    font-size: 6em;                 /* pour définir les dimensions */
    width: 1em;                     /* fixe la largeur */
    height: 1em;                    /* fixe la hauteur */
    border-radius: 50%;             /* rendu aspect circulaire */
    border: .15em solid #CDE;       /* couleur de fond de l'anneau */
    background-color: #FFF;         /* couleur de fond de la progress bar */
}
.progress-masque {
    position: absolute;
    width: 1em;                     /* 100% de la largeur */
    height: 1em;                    /* 100% de la hauteur */
    left: -.15em;                   /* décalage de la largeur bordure de la gauge */
    top: -.15em;                    /* décalage de la largeur bordure de la gauge */
    clip: rect(0, 1em, 1em, .5em);  /* par défaut seule la partie droite est visible */
}
.progress-circle[data-value^='5']:not([data-value='5']):not([data-value^='5.']) .progress-masque,
.progress-circle[data-value^='6']:not([data-value='6']):not([data-value^='6.']) .progress-masque,
.progress-circle[data-value^='7']:not([data-value='7']):not([data-value^='7.']) .progress-masque,
.progress-circle[data-value^='8']:not([data-value='8']):not([data-value^='8.']) .progress-masque,
.progress-circle[data-value^='9']:not([data-value='9']):not([data-value^='9.']) .progress-masque,
.progress-circle[data-value^='100'] .progress-masque {
    clip: rect(auto, auto, auto, auto);
}
.progress-barre,
.progress-sup50 {
    position: absolute;
    box-sizing: border-box;         /* prise en compte bordure dans la dimension */
    border-width: .15em;            /* largeur bordure de la gauge */
    border-style: solid;
    border-color: var(--main-color_freelance);
    border-radius: 50%;             /* rendu aspect circulaire */
    width: 1em;                     /* largeur à 100% */
    height: 1em;                    /* hauteur à 100% */
    clip: rect(0, .5em, 1em, 0);    /* on ne garde que la partie gauche */
}
.progress-sup50 {
    display: none;
    clip: rect(0, 1em, 1em, .5em);
}
.progress-circle[data-value^='5']:not([data-value='5']):not([data-value^='5.']) .progress-sup50,
.progress-circle[data-value^='6']:not([data-value='6']):not([data-value^='6.']) .progress-sup50,
.progress-circle[data-value^='7']:not([data-value='7']):not([data-value^='7.']) .progress-sup50,
.progress-circle[data-value^='8']:not([data-value='8']):not([data-value^='8.']) .progress-sup50,
.progress-circle[data-value^='9']:not([data-value='9']):not([data-value^='9.']) .progress-sup50,
.progress-circle[data-value^='100'] .progress-sup50 {
    display:block;
}
.progress-circle:after {
    content: attr(data-value) "%";  /* récup. valeur de progression */
    font-size: 0.15em;              /* taille de la font en % du parent */
    height: 100%;                   /* centrage dans le parent */
    display: flex;
    align-items: center;
    justify-content: center;
  
    /*-- pour effet shadow intérieur --*/
    border-radius: 50%;
    /*box-shadow: 0 0 .5em rgba(0, 0, 0, .5) inset;*/
}

.progress-circle.red {
    border-color: #F8E0E0;          /* couleur de fond de la barre */
}
.progress-circle.red .progress-masque {
    border-color: #B40000;          /* couleur de la barre d'avancement */
}

.modal-body .charte-hitechpros .sticky-top {
    top: 0!important;
}

.charte-hitechpros .sticky-top {
    top: 60px!important;
}