@import url('https://fonts.googleapis.com/css?family=Roboto:300i,400&display=swap');

:root {
    --bg-menu: #F9F9F9; /*#437fc7*/ /*#0366d6*/ /*#5c821a*/
    /*--------------------------------*/
    --bg-body: #FFFFFF /*#eDf6ff /*#e2e6ea*/;
    /*-------------------*/
    --bg-color1: #9ac3fc;
    --bg-color2: #D9E9FF;
    --bg--card: #fefefe;
    /*--------------------------------*/
    --font-color1: #212121;
    --font-color2: #737373;
    /*-----------------------------------*/
    --card-font-color1: #212121;
    --card-font-color2: #4A4A4A;
    --card-font-color3: #212121;
    --card-font-remarque-color1: #DE6F2F;
}
header {
    background-color: var( --bg-menu);
}
.text-bold { 
    font-weight:bolder;
}
.menuUser {
    display: none;
}

.menuUserTop {
    display: block;
}



#btnCreerVisiteUnique:hover, #btnCreerVisiteMultiple:hover {
    cursor: pointer;
}
#btnCreerVisiteMultiple, #btnCreerVisiteUnique {
    cursor: pointer;
}


.colorDiv {
    background-color: var(--bg--card);
}

#btnReload {
    display: none;
}
.header {
    padding-top: 10px;
    transition: top 0.2s ease-in-out;
    z-index: 999;
}

.nav-up {
    top: -200px;
    position: fixed;
}

.nav-down {
    top: 60px;
    position: fixed;
    background-color: var(--bg-body);
    

    /*
    -webkit-box-shadow: 0px 10px 12px -9px rgba(0,0,0,0.9);
    box-shadow: 0px 10px 12px -9px rgba(0,0,0,0.9);
    */
    /*  -webkit-box-shadow: -1px 3px 19px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: -1px 3px 19px 1px rgba(0,0,0,0.75);
    box-shadow: -1px 3px 19px 1px rgba(0,0,0,0.75);
    */
}




.uppercaseSimples {
    text-transform: uppercase;
    font-size: small;
  
}
.uppercase {
    text-transform: uppercase;
    font-size: small;
    font-weight: bold;
}

body {
    background-color: var(--bg-body);
}

.CardVisiteInside, .cardVisiteCheptelInside, .cardUserInside, .cardRoleInside, .cardAppareilInside {
    background-color: var(--bg--card);
}



.divFormUtilisateur {
    background-color: var(--bg--card);
    padding:10px;
}




.colorRemarque {
    color: var(--card-font-remarque-color1);
}

.cardRaisonSociale {
    font-family: Roboto;
    font-size: 16px;
    font-weight: bolder;
    color: var(--card-font-color1);
    display: inline-block;
}

.cardNumeroCheptel {
    font-family: Roboto;
    font-size: 14px;
    font-weight: normal;
    color: var(--card-font-color2);
    display: inline-block;
    width: 36ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cardContent {
    font-size: 12px;
    font-weight: normal;
    padding-top: 10px;
    min-width: 340px;
}

.cardImage {
    height: 40px;
    width: 40px;
    margin-right: 16px;
    cursor: pointer;
}










ui-autocomplete li.itemRecherche:focus, ui-autocomplete li.itemRecherche:hover, ui-autocomplete li.itemRecherche::selection, .itemRecherche:focus, .itemRecherche:active, .itemRecherche:hover, .itemRecherche::selection {
    background-color: var(--bg-color2);
}

.selectItem {
    background-color: var(--bg-color2);
}

* {
    font-family: 'Roboto', sans-serif;
}

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}

.btn-primary {
  color: #fff;
  background-color: #037bff;
  border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
  
}

.nav-link {
    font-family: Roboto;
    color: #212121;      

}
.dropdown-item {
    font-family: Roboto;
    color: #212121;
}
#MenuPrincipal {
    background-color: var(--bg-menu);
    opacity: 1;
    /*#ECEEEF //#5c821a;*/
}


.hJ {
    font-family: Roboto;
    color: #737373;
    text-transform: uppercase;
    font-size:10px;
}

.max-250{

    max-width:250px;
}

.cursor {
    cursor: pointer;
}

#project-label {
    display: block;
    font-weight: bold;
    margin-bottom: 1em;
}

#project-description {
    margin: 0;
    padding: 0;
}



.cardVisiteCheptel_Hover:hover div{

    background-color: var(--bg-color1);
}

.ItemSelected_true div, .ItemSelected_True div {
    background-color: var(--bg-color2);
}
.cardVisiteCheptel_Click {
}

.adjustText25 {
    max-width: 28ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adjustText28 {
    max-width: 28ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adjustText49 {
    max-width: 49ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.adjustText40 {
    max-width: 40ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adjustText35 {
    max-width: 35ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.adjustTextCard {
    max-width: 25ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */
}







img.ML04{
    -webkit-animation: ani004 .5s ease-in;
    -moz-animation: ani004 .5s ease-in;
    -ms-animation: ani004 .5s ease-in;
    animation: ani004 .5s ease-in;
    cursor: pointer
}



@-webkit-keyframes ani004 {
    0% {
        transform: rotateY(0)
    }

    100% {
        transform: rotateY(-90deg)
    }
}

@-moz-keyframes ani004 {
    0% {
        transform: rotateY(0)
    }

    100% {
        transform: rotateY(-90deg)
    }
}

@-ms-keyframes ani004 {
    0% {
        transform: rotateY(0)
    }

    100% {
        transform: rotateY(-90deg)
    }
}

@keyframes ani004 {
    0% {
        transform: rotateY(0)
    }

    100% {
        transform: rotateY(-90deg)
    }
}







/*ENTETES*/


.titrePage {
    
    padding:10px;
    font-family:Roboto;  
    color:#212121;
    font-weight: bold;
    
}

.organismeSel {
    border-bottom: 2px #000 solid;
}

a:link, a:visited, a:hover, a:active {
    text-decoration: none;
    color: #000;
}




/*CARD APPAREILS*/
#CardAppareils {
    margin-top: 20px;
    padding: 30px;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border: 0px solid #000000;
    background-color: transparent;
}

/*CARD UTILISATEURS*/
#CardUtilisateurs {
    margin-top: 20px;
    padding: 15px;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border: 0px solid #000000;
    background-color: transparent;
    ;
}

/*CARD ROLE*/
#ContainerCardRoles {
    padding: 30px;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border: 0px solid #000000;
    background-color: transparent;
    
}



.correction{padding-left:30px;}





@media screen and (max-width: 450px) {
    /*CARD ROLE*/
    #ContainerCardRoles, #CardUtilisateurs, #CardAppareils {
        padding: 0px;
        border: 0px;
    }

    .cardRole, .cardUser, .cardAppareil {
        padding: 0px;
        margin: auto;
    }

    .correction {
        padding: 0;
    }
}


@media screen and (max-width: 800px) {

    .btnHead{margin-top:10px;}

}
    @media screen and (max-width: 1000px) {
        body {
            /*touch-action: auto;
        touch-action: none;
         touch-action: pan-right;*/
            touch-action: pan-up;
            touch-action: pan-down;
            touch-action: pan-y;
            /* touch-action: pinch-zoom;
        touch-action: manipulation;*/
        }
    }

    #divContainerExterieurVisite {
    background-color: #212121;
    border: solid 3px #000;
}









@media screen and (max-width: 1200px) {
    .cardRole,.cardUser {
        margin: auto;
        padding:0px;
        margin: auto;
    }

    #ResultOrganisme {
        margin: auto;
    }
    .cardVisiteSelCheptel {
        margin: auto;
    }

    .adjustTextCard {
        max-width: 18ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


@media screen and (max-width: 985px) {

    .adjustTextCard {
        max-width: 12ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media screen and (max-width: 1020px) {
    .cardVisitePrincipal,
    .cardVisiteSelCheptel,
    #demandeOrganisme,
    .cardAppareil,
    .cardRole {
        margin: auto;
    }    
}

.divContainerAJouterVisite{margin-left:10px;}
.divContainerAJouterVisite2 {
    margin-left: 0px;
}

.hJ {
    margin-left: 0px;
    padding-left: 7px;
}

@media screen and (max-width: 575px) {
    #divContainerExterieurVisite {
        margin: 0px;
        padding: 0px;
    }
    #iconUserResponsive, #iconSignOutResponsive {
        display: block;
    }
    #iconUserStart, #iconSignOutStart {
        display: none;
    }
    .responsiveContainer,.divContainerAJouterVisite2, .divContainerAJouterVisite {
        margin: 0;
        padding: 0;
    }
    .divContainerAJouterVisite2 {
    margin-left:-10px;
    }
        .modal-content, .modal-body, modal-footer, modal-dialog, modal-header {
            margin: 0px;
            padding: 0px;
        }
    .hJ {
        padding-left: 15px; margin-left:20px;
    }
    .btnHe {
        padding-top: 10px;
    }
    }


.divFormBackground {
    padding: 10px;
}


@media screen and (max-width: 600px) {
    
    #divPrincipal {
        padding: 0px;
    }

    .H5titleResponsive{font-size:14px;}
    .h5{font-size:16px; font-family:roboto;}
   
}



@media screen and (max-width: 999px) {
    
    #FormFile {
        display: none;
    }
    .btn-header {
        margin: auto;

    }
}

@media screen and (max-width: 429px) {
    .btn-header {
        margin-left:0px;
        margin: auto;  
        
    }

   

    .txtResponsiveHide_418 {
        display: none;
    }

    .contentButtonHeader {
        margin: 0px;
        padding: 0px;
    }

    a.disabled{display:none;}

    header { width:100%;
    }
 
}

@media screen and (max-width: 769px) {

    .nav-down {
        padding-bottom:10px;
    }
}


    @media screen and (max-width: 1200px) {
        #containerVisiteDuJour {
            display: none;
        }

        #containerFormVisite {
            margin: auto;
            margin-top: 0px;
        }
    }


    #menuContentVisiteHide {
        display: none;
    }
#MenuVisite {
    display: block;
}

    @media screen and (max-width: 767px) {


        #MenuVisite {
            display: none;
        }

        #menuContentVisiteHide {
            display: block;
        }

        .menuUser {
            display: block;
        }
        .menuUserTop {
            display: none;
        }

    }







    @media screen and (max-width: 650px) {
        #imgLogo {
            width: 135px;
        }
    }


    .hidden {
        display: none;
    }






























.disabled{
    cursor:not-allowed;
       }


/* SHORCUT */
.margin-top-0 {
    margin-top: 0px;
}

    .margin-top-10 {
        margin-top: 10px;
    }

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

    .margin-top-30 {
        margin-top: 30px;
    }

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

    .margin-top-25 {
        margin-top: 25px;
    }

    .margin-top-40 {
        margin-top: 40px;
    }

    .margin-top-50 {
        margin-top: 50px;
    }

    .margin-top-60 {
        margin-top: 60px;
    }

    .margin-top-70 {
        margin-top: 70px;
    }

    .margin-top-80 {
        margin-top: 80px;
    }

    .margin-top-90 {
        margin-top: 90px;
    }

    .margin-top-100 {
        margin-top: 100px;
    }

    .margin-top-110 {
        margin-top: 110px;
    }

    .margin-top-120 {
        margin-top: 120px;
    }

    .margin-top-130 {
        margin-top: 130px;
    }

    .margin-top-140 {
        margin-top: 140px;
    }

    .margin-top-150 {
        margin-top: 150px;
    }

    .margin-left-0 {
        margin-left: 0px;
    }

    .margin-left-5 {
        margin-left: 5px;
    }

    .margin-left-10 {
        margin-left: 10px;
    }

    .margin-left-20 {
        margin-left: 20px;
    }

    .margin-left-30 {
        margin-left: 30px;
    }

    .margin-left-15 {
        margin-left: 15px;
    }
.margin-left-17 {
    margin-left: 17px;
}
    .margin-left-25 {
        margin-left: 25px;
    }

    .margin-left-40 {
        margin-left: 40px;
    }

    .margin-left-50 {
        margin-left: 50px;
    }



    .margin-0 {
        margin: 0px;
    }
.margin-5 {
    margin: 5px;
}
.margin-2 {
    margin: 2px;
}
.margin-4 {
    margin: 4px;
}
.margin-6 {
    margin:6px;
}
.margin-8 {
    margin: 8px;
}

    .margin-10 {
        margin: 10px;
    }

    .margin-20 {
        margin: 20px;
    }

    .margin-30 {
        margin: 30px;
    }

    .margin-15 {
        margin: 15px;
    }

    .margin-25 {
        margin: 25px;
    }

    .margin-40 {
        margin: 40px;
    }

    .margin-50 {
        margin: 50px;
    }

    .margin-auto {
        margin: auto;
    }



    .padding-top-0 {
        padding-top: 0px;
    }

    .padding-top-10 {
        padding-top: 10px;
    }

    .padding-top-20 {
        padding-top: 20px;
    }

    .padding-top-30 {
        padding-top: 30px;
    }

    .padding-top-15 {
        padding-top: 15px;
    }

    .padding-top-25 {
        padding-top: 25px;
    }

    .padding-top-40 {
        padding-top: 40px;
    }

    .padding-top-50 {
        padding-top: 50px;
    }

    .padding-top-60 {
        padding-top: 60px;
    }

    .padding-top-70 {
        padding-top: 70px;
    }

    .padding-top-80 {
        padding-top: 80px;
    }

    .padding-top-90 {
        padding-top: 90px;
    }

    .padding-top-100 {
        padding-top: 100px;
    }

    .padding-top-110 {
        padding-top: 110px;
    }

    .padding-top-120 {
        padding-top: 120px;
    }

    .padding-top-130 {
        padding-top: 130px;
    }

    .padding-top-140 {
        padding-top: 140px;
    }

    .padding-top-150 {
        padding-top: 150px;
    }



    .padding-0 {
        padding: 0px;
    }


    .padding-10 {
        padding: 10px;
    }

    .padding-20 {
        padding: 20px;
    }

    .padding-30 {
        padding: 30px;
    }

    .padding-5 {
        padding: 5px;
    }

    .padding-15 {
        padding: 15px;
    }

    .padding-25 {
        padding: 25px;
    }

    .padding-40 {
        padding: 40px;
    }

    .padding-50 {
        padding: 50px;
    }

    /*ICON*/

    /*Icon Menu*/

    #iconUserResponsive, #iconSignOutResponsive {
        display: none;
    }







.padding-bottom-0 {
    padding-bottom: 0px;
}

.padding-bottom-10 {
    padding-bottom: 10px;
}

.padding-bottom-20 {
    padding-bottom: 20px;
}

.padding-bottom-30 {
    padding-bottom: 30px;
}

.padding-bottom-15 {
    padding-bottom: 15px;
}

.padding-bottom-5 {
    padding-bottom: 5px;
}


















a.disabled, buttona.disabled, *.disabled {
    cursor: no-drop;
}

/*COLOR MENU*/

.Activemenu_Administration, .menu_Administration:hover {
    color: #3D4E5C;
    background-color: #dfebf5;
    border-radius: 4px;
}

.titre_Administration {
    color: #3D4E5C;
}

.Activemenu_Valorise, .menu_Valorise:hover {
    background-color: #b9f0ed;
    border-radius: 4px;
}
    .Activemenu_Valorise,.titre_Valorise .menu_Valorise a:hover {
        color: #58afaa;
    }

.Activemenu_Login,.menu_Login:hover {
    background-color: #d5f5f2;
    border-radius: 4px !important;
}
    .Activemenu_Login, .titre_Login, .menu_Login a:hover {
        color: #88c9c3 !important;
    }


.Activemenu_MesVisites, .menu_MesVisites:hover {
    background-color: #dfebf5;
    border-radius: 4px;
}
.Activemenu_MesVisites, .titre_MesVisites, .menu_MesVisites a:hover {
    color: #3D4E5C !important;
}

/*#58afaa*/
.Activemenu_Visites, .menu_Visites:hover {
    background-color: #dfebf5;
    border-radius: 4px;
}
.Activemenu_Visites, .titre_Visites, .menu_Visites a:hover {
    color: #3D4E5C !important;
}


.Activemenu_MonProfil, .menu_MonProfil:hover {
    background-color: #f7edd2;
    border-radius: 4px;
}
.Activemenu_MonProfil, .titre_MonProfil, .menu_MonProfil a:hover {
    color: #f3d482 !important;
}


/*Fin COLOR MENU */



#btnMenuResponsive {
   color:#CCC;
   border: #CCC 1px solid;
}


.activeBtn {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5;
}