/**
 * CONTENU
 *
 * ACCUEIL...................Page d'accueil.
 *
 * HEADER....................En-tête (logo + compte).
 *
 * FOOTER....................Pied de page (version + logo JVS).
 *
 * MODAL.....................Style des modales Boostrap.
 *
 * FRONT OFFICE..............Style du front office (partie citoyen).
 *
 * MENU FRONT OFFICE.........Style du menu front office (partie citoyen).
 *
 * TABLE.....................Style des tables.
 *
 * MAP.......................Style de la carte Google Maps.
 *
 * INPUT.....................Style des champs de saisie.
 *
 * TOOLS & FIX...............Outils et fix.
 *
 * MEDIA QUERIES.............Media queries et responsive.
 *
 */

/*------------------------------------*\
  #ACCUEIL
\*------------------------------------*/

#logoSite
{
    top: 7px;
    background-image: url("../Images/logo.svg");
    background-size: cover;
    height: 62px;
}

#principalAccueil {
    background-size: 100%;
    background: url('../Images/mesalertes.jpg') no-repeat center top;
}

#principalAccueil .container {
    padding: 6%;
}

.col-centered {
    float: none;
    margin: 0 auto;
}

/*------------------------------------*\
  #HEADER
\*------------------------------------*/

header {
    padding-bottom: 12px;
    height: 86px;
}

#imgLogo
{
    width: 280px;
    margin-top: 7px;
}

#detailCompte {
    cursor: pointer;
    color: #808080 !important;
    text-decoration: none !important;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    font-weight: bold;

    top: 0;
    position: relative;
    width: 100%;
    text-align: right;
    margin-right: 50px;
    padding-right: 50px;
}

#divPiedTitre {
    background-image: url('../Images/barreCouleur.png');
}

.fondPresentation {
    position: absolute;
    height: 50px;
    width: 100%;
    background-color: #F1F1F1;
    z-index: -1;
}

.containerAlerte {
    background-color: #fdf5eb;
    color: #f19d38;
    padding: 10px;
    display: flex;
}

.containerAlerteText {
    padding-left: 10px;
}

.endContainerAlerte {
    margin-top: 20px;
}

.inside
{
    width: 30%;
}

.lienIdentificationAgentCitoyen
{
    width: 100%;
    text-align: center;

    border-radius: 3px;
    border: solid 1px #989898;
    box-shadow: 5px 5px 5px #989898;
    height: 35px;
    line-height: 35px;
    background-color: white;
    display: inline-block;
}

.lienIdentificationAgentCitoyen:hover
{
    color:white !important;
    background: #e32d32 linear-gradient(rgb(238, 129, 132) 0%, rgb(238, 129, 132) 24%, rgb(227, 45, 50) 41%, rgb(230, 67, 71) 100%);
}

.loginExterne
{
    width:280px;
}


#linkConnexionAgent:link, #linkConnexionAgent:visited{
    color: red;
    text-decoration: none;
    display: inline-block;
    font-size: large;
}

#linkConnexionCitoyen:link, #linkConnexionCitoyen:visited{
    color: red;
    text-decoration: none;
    display: inline-block;
    font-size: large;
}

#expliqueFichierImport {
    font-size: 25px;
}

#countrySelector
{
    float: left;
    width : 100%;
    display: table-cell;
    height: 34px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background: #fff none;
    border: 1px solid #ccc;
    border-right: 0;
}

.input-telephone
{
    float: right !important;
    width : 70% !important;
}

.country-select
{
    position: inherit !important;
    display: inline-flex !important;
    z-index: 10;
}

.country-select-input {
    width: 100%;
}

#ui-datepicker-div
{
    z-index : 9999 !important;
}

#WhoIsFranceConnect, #loginFacebook, #loginGoogle
{
    text-align: center;
    margin-top: 5px;
}

#formIdentification
{
    display: inline-block !important;
    width: 100%;
}

#loginFacebook, #loginGoogle
{
    margin-top: 15px;
}

#loginFacebook > a, #loginGoogle > a, #loginEmail > a
{
    text-align: center;
}

.imgsupp
{
    cursor:pointer;
}

#fconnect-profile > a {
    color: #808080 !important;
}

.contactGrise {
    font-style : italic;
    font-weight: normal !important;
}

.contact, .citoyen {
    font-weight: bolder;
}

#radioMessageVocal {
    margin-bottom: 10px;
}

.record {
    font-size: 20px;
}

.recording {
    color: red;
}

.choixFichierDetailAlerte {
    margin: 5px;
}

.choixFichierDetailAlerte span {
    padding: 5px;
}

.inLineAlerte {
    display: inline-flex;
}

.map {
    width: 100%;
}

/*------------------------------------*\
  #FOOTER
\*------------------------------------*/

html,
body {
    height: 100%;
    /* pour le footer */
}

.paddingForFooter {
    padding-bottom: 75px;
    /* height: calc(100vh - 134px - 40px); */
    height: calc(100vh - 130px);
}

.btn-google, .btn-google:hover {
    color: #000;
    background-color: #fff;
    border-color: rgba(0,0,0,0.2);
}

.imgGoogle {
    width: 16px;
    height: 16px;
    margin-top: -7px;
}

#wrapper {
    min-height: 100%;
    position: relative;
    padding-right: 0;
}

footer {
    width: 100%;
    height: 40px;
    position: fixed;
    bottom: 0;
    left: 0;
}

footer hr {
    margin-bottom: 0;
    margin-top: 0;
}

footer p {
    margin: 6px 0 0 0;
}


/*------------------------------------*\
  #MODAL
\*------------------------------------*/

.modal-content hr {
    margin-top: 5px;
    margin-bottom: 5px;
}

.modal-content h1,
.modal-content h2,
.modal-content h3,
/* .modal-content h4, */
.modal-content h5 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.jumbotron p {
    font-size: 14px;
}

#alerte,
#alerteAddCitoyen {
    margin-top: 15px;
    clear: both;
}

a {
    color: #e32d32;
}

a:hover {
    color: #e32d32;
}

.piecejointe
{
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
    color: #e32d32;
}

#menu-toggle
{
    margin: 5px;
}

footer {
    background-color: #f1f1f1;
}

/** dans les petits résoltions : problème de scroll-y */
#page-content-wrapper {
    position: inherit !important;
}

/*------------------------------------*\
  #FRONT OFFICE
\*------------------------------------*/

.affichePieceJointe
{
    margin : 2px 25px;
}

.panel-heading, .deletePj {
    cursor: pointer;
}

.panel-heading-Stats {
    height : 60px;
}

.panel-headingPref {
    height: 40px;
}

.panel-violet {
    border-color: #9c27b0;
    color: white;
    background-color: #9c27b0;
}

.panel-gris {
    border-color: #9E9E9E;
    color: white;
    background-color: #9E9E9E;
}

.alerteTitreStats
{
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

.mesAlertesDropDown {
    margin: 5px;
    cursor: pointer;
}

.faAlerte {
    font-size: 35px;
}

.faPictoAlerte {
    font-size: 22px;
}

.marge {
    padding-left: 40px;
    font-style: italic;
}

.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
    background-color: #e32d32;
    border-color: #b51d21;
}

.titreDiv {
    background-color: #CACB00;
    color: white;
    font-size: 1.8em;
    padding: 20px;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 25px;
}

.titreDiv span {
    font-size: 10px;
    text-align: right;
    float: right;
    margin-top: 10px;
}


.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings', serif;
    /* essential for enabling glyphicon */
    content: "\e114";
    /* adjust as needed, taken from bootstrap.css */
    float: right;
    /* adjust as needed */
    color: grey;
    /* adjust as needed */
}

.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";
    /* adjust as needed, taken from bootstrap.css */
}

.txtCompte {
    width: initial;
    position: initial;
    text-align: initial;
    top: initial;
    padding: 0;
    margin-top: 50px;
}


/*------------------------------------*\
  #MENU FRONT OFFICE  
\*------------------------------------*/

#tabUl li {
    width: 33.33%;
    text-align: center;
    border: none !important;
}

#tabUl li a {
    color: white !important;
    border: none !important;
    background: none !important;
}

#tabUl li a.active {
    font-weight: bold;
    text-decoration: underline;
}

#tabUl li:first-child {
    background-color: #CA267B !important;
}

#tabUl li:nth-child(2) {
    background-color: #E9661E !important;
}

#tabUl li:nth-child(3) {
    background-color: #CACB00 !important;
}

#liseret {
    height: 8px;
    background-color: #CA267B;
}


/*------------------------------------*\
  #TABLE
\*------------------------------------*/

.table>tbody>tr.active>td,
.selected {
    background-color: #bdbdbd !important;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    background-color: #E32D32 !important;
    border-color: #E32D32 !important;
}

.btLoupe {
    cursor: pointer;
    visibility: hidden;
}

.dataTable tr:hover .btLoupe {
    visibility: visible;
}

#citoyensTable .btn {
    padding: 6px 7px;
    line-height: 0;
}

.dataTable tr {
    cursor: pointer;
}

table.dataTable.display tbody>tr.odd.selected>.sorting_1,
table.dataTable.order-column.stripe tbody>tr.odd.selected>.sorting_1 {
    background-color: #a6b4cd;
}

table.dataTable.order-column tbody>tr.selected>.sorting_1,
table.dataTable.order-column tbody>tr.selected>.sorting_2,
table.dataTable.order-column tbody>tr.selected>.sorting_3,
table.dataTable.order-column tbody>tr>.selected,
table.dataTable.display tbody>tr.selected>.sorting_1,
table.dataTable.display tbody>tr.selected>.sorting_2,
table.dataTable.display tbody>tr.selected>.sorting_3,
table.dataTable.display tbody>tr>.selected {
    background-color: #e32d32;
}

table.dataTable.display tbody>tr.even.selected>.sorting_1,
table.dataTable.order-column.stripe tbody>tr.even.selected>.sorting_1 {
    background-color: #a6b4cd;
}

table.dataTable.order-column tbody>tr.selected>.sorting_1,
table.dataTable.order-column tbody>tr.selected>.sorting_2,
table.dataTable.order-column tbody>tr.selected>.sorting_3,
table.dataTable.order-column tbody>tr>.selected,
table.dataTable.display tbody>tr.selected>.sorting_1,
table.dataTable.display tbody>tr.selected>.sorting_2,
table.dataTable.display tbody>tr.selected>.sorting_3,
table.dataTable.display tbody>tr>.selected {
    background-color: #e32d32;
}


/*------------------------------------*\
  #MAP
\*------------------------------------*/

#divMap {
    height: 420px;
}

.divCarte {
    margin-top: 15px;
    margin-bottom: 15px;
}


/*------------------------------------*\
  #INPUT
\*------------------------------------*/

.input-group-field {
    display: table-cell;
    vertical-align: middle;
    /* border-radius: 4px; */
}

.input-group-field .form-control,
.input-group-field .form-control {
    border-radius: inherit !important;
}

.input-group-field:not (:first-child):not (:last-child) {
    border-radius: 0;
}

.input-group-field:not (:first-child):not (:last-child) .form-control {
    border-left-width: 0;
    border-right-width: 0;
}

.input-group-field:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.has-error .jqte {
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

input[type="button"],
input[type="submit"] {
    box-shadow: 1px 1px 1px 0 #8e8e8e !important;
    -webkit-transition: box-shadow 0.7s;
    transition: box-shadow 0.7s;
}

input[type="button"]:hover,
input[type="submit"]:hover {
    box-shadow: 1px 1px 10px 0 #8e8e8e !important;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
select,
textarea {
    width: 100%;
}

input[type="button"] {
    z-index: 0 !important;
}

.form-control-feedback-fixed .form-control-feedback {
    top: 25px !important;
    right: 0;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus,
.jqte_focused {
    /* border-color: #E32D32 !important;
    box-shadow:  0 0 8px rgba(227, 45, 50, 0.6) !important;
    outline: 0 none !important; */
}

.btn-size {
    min-height: 36px;
    min-width: 150px;
}


/* input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    backgroud-color: white !important;
} */


/*------------------------------------*\
  #TOOLS & FIX
\*------------------------------------*/

.clearfix {
    clear: both;
    padding-top: 15px;
    padding-bottom: 15px;
    display: block;
    overflow: hidden;
}

.voffset {
    margin-top: 2px;
}

.voffset1 {
    margin-top: 5px;
}

.voffset2 {
    margin-top: 10px;
}

.voffset3 {
    margin-top: 15px;
}

.voffset4 {
    margin-top: 30px;
}

.voffset5 {
    margin-top: 40px;
}

.voffset6 {
    margin-top: 60px;
}

.voffset7 {
    margin-top: 80px;
}

.voffset8 {
    margin-top: 100px;
}

.voffset9 {
    margin-top: 150px;
}

.flexCategories
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.flexCategories:first-child
{
    padding-left: 30px;
}

.majuscule
{
    text-transform: uppercase;
}

.sms , .vocal
{
    height : 150px;
}

.descriptionLibelle
{
    padding-bottom: 25px;
    display: block;
    width: 100%;
    text-align: center;
}

.descInscripton
{
    display: block;
    margin-bottom: 15px;

}

.precision, .precisionAlerte
{
    font-style: italic;
    width: 100%;
    text-align: center;
}

.precision
{
    font-size: 14px;
}

.precisionImportante
{
    font-style: italic;
    width: 100%;
    text-align: center;
    color: red;
}

.inscriptionAccueil
{
    border: 1px solid #a9A9A9;
    background: linear-gradient(rgba(255,255,255, 0.65), rgba(240,240,240,0.95)) !important;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
}

#divLienInscription
{
    margin-top: 15px;
    text-align: right;
}

#panelRGPD {
    margin-top: 75px !important;
}

.btCenter
{
    margin : 5px auto !important;
}

#divConnexion
{
    border: 1px solid #cb277c;
    padding: 20px;
    border-radius: 5px;
}

#divOu
{
    margin-bottom: 15px;
}

.glyphicon-trash, .glyphicon-map-marker
{
    line-height: 1.5 !important;
}

.lien{
    color: #e32d32;
    cursor: pointer;
}

#labelConnexion
{
    position: absolute;
    top: 2px;
    background-color: #eee;
    padding-right: 10px;
    padding-left: 10px;
}

#mdpOublie
{
    width : 100%;
}

#contentTreeView
{
    overflow: auto;
    height: 373px;
}

#contentTreeView .node-disabled {
    display: none;
}

#spanOu
{
    font-weight: normal !important;
    color: #767676 !important;
    font-family: Circular,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif !important;
    margin: 0 !important;
    word-wrap: break-word !important;
    font-size: 15px !important;
    line-height: 18px !important;
    letter-spacing: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline !important;
}

.classSpanOu
{
    position: relative !important;
    padding: 16px !important;
}

.classDivOu
{
    overflow: hidden !important;
    text-align: center !important;
}

#divCompteExterne
{
    width: 95%;
    margin : 0 auto;
    display: block;
    min-height: 280px;
}

#divCompteExternePartLeft {
    text-align: center;
    float: left;
    width: 50%;
    padding-right: 20px;
    border-right: 1px solid #767676;
}

#divCompteExternePartRight {
    text-align: center;
    float: right;
    width: 45%;
}

.titreCompteExterne {
    margin-bottom: 20px;
}

.pac-container {
    z-index: 10000;
}

#etape4
{
    margin-bottom: 50px;
}

.btn-mesAlertes
{
    color: #fff !important;
    background-color: #cb277c;
    border-color: rgba(0,0,0,0.2);
}

.btn-mesAlertes:hover
{
    color: #fff !important ;
    background-color:#a22063;
}

#tableCommunes
{
    display: inline-block;
    width: 100%;

}

.marginStagiaire
{
    margin-top: 20px;
}

.groupButtons
{
    width:100% !important;
}

#divContent {
    overflow-y: scroll;
}

.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 50%;
}
.btn-circle.btn-lg {
    width: 50px;
    height: 50px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
}
.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    font-size: 24px;
    line-height: 1.33;
}

#jumbotronPerso {
    padding:10px !important;
}

.full {
    background-color: #2b2b2b;
    height: auto !important;
    font-size: 14px;
    line-height: 20px;
    white-space: pre-wrap;
    color: #bababa;
}

.libNbCaracteresMessageType {
    margin: -10px;
}

.d-inline-block {
    display: inline-block;
}

.treeview {
    overflow: auto;
    height: 350px;
}

.codeSaisieSms {
    width: 60px !important;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #000;
    text-align: center;
    font-size: 30px;
}

.saisieCodeSms {
    text-align: center;
}

.saisieCodeSms div {
    margin-top: 50px;
    margin-bottom: 50px;
}

.btnTrash {
    padding: 5px 12px;
}

.corpsTextArea {
    min-height: 350px;
}

#search:hover, #search:focus {
    border-color: #777;
}

#results {
    display: none;
    border: 1px solid #AAA;
    border-top-width: 0;
    background-color: #FFF;
}

#results div {
    padding: 2px 4px;
    text-align: left;
    border: 0;
    background-color: #FFF;
}

#results div:hover, .result_focus {
    background-color: #DDD !important;
}

.spacingBottom {
    margin-bottom: 5px;
}

.progress.active .progress-bar {
    -webkit-transition: none !important;
    transition: none !important;
}


/*------------------------------------*\
  #MEDIA QUERIES
\*------------------------------------*/

@media screen and (min-width: 768px) {
    input[type="button"],
    input[type="submit"] {
        min-width: 150px;
    }
}

@media screen and (min-width: 768px) and (max-width: 992px) {

}

@media screen and (min-width: 431px) and (max-width: 767px) {
    #logoSite
    {
        top: -2px;
        left: 50px;

        width: 150px;
        height: 32px;
    }

    .fondPresentation
    {
        height : 20px;
    }

    header {
        height: 40px;
    }

    .txtCompte {
        margin-top:20px;
         top: 0;
     }

    .h3, h3 {
        font-size: 15px;
    }

    .h4, h4 {
        font-size: 12px;
    }

    .faAlerte {
        font-size: 25px;
    }
}

@media screen and (max-width: 430px) {
    #logoSite {
        top: -2px;
        left: 50px;

        width: 150px;
        height: 32px;
    }

    .fondPresentation {
        height: 20px;
    }

    header {
        height: 40px;
    }

    .txtCompte {
        margin-top: 20px;
        top: 0;
    }

    body {
        font-size: 10px;
    }

    input[type='button'], input[type='submit'], input[type='button']:disabled, input[type='submit']:disabled {
        font-size: 13px;
        min-width: 80px;
    }

    .h3, h3, .jumbotron p {
        font-size: 12px;
    }

    .h4, h4, .precision, .presentationFC {
        font-size: 10px;
    }

    .faAlerte {
        font-size: 20px;
    }

    #divMap {
        height: 200px;
    }

    #imgFranceConnectCreate, #imgFranceConnectCreate:hover {
        height: 34px;
    }
}