/* HRI 16/09/2022 Formatage Image de Fond - Responsive Design*/

/** 
**Page D'Accueil
**/
#Body{
    display: flex;
    background-image:url(/Portals/13/Personnalisation/Apparence/Fond.jpg);
    justify-content: center;
}
#Form{
    width: fit-content;
}
#accueil {
    background-image:url(/Portals/13/Personnalisation/Apparence/Fond.jpg);
    /* background-image:url(/Portals/34/Personnalisation/Apparence/Fond.jpg); */
    background-color:rgba(0,0,0,0.3);
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    background-position-y: 82%;
    background-position-x: 96%;
    background-attachment: fixed;
}
#Form {
    height: 100%;
   // background-image:url(/Portals/13/Personnalisation/Apparence/Fond.jpg);
    /* background-image:url(/Portals/34/Personnalisation/Apparence/Fond.jpg); */
    background-color:rgba(0,0,0,0.3);
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    background-position-y: 82%;
    background-position-x: 96%;
    background-attachment: fixed;
}


/*  HRI 04/05/2022  Masquage du bouton "Acceptation Newsletter sur page de signature de la charte*/
.inscription .authentification .contenu div:nth-child(6) {
    display: none;
}

/*  HRI 04/05/2022  Masquage du bouton "Acceptation Newsletter sur page page d’inscription en ligne par le patient*/ 
div.charte-acceptation div {
    display: none;
}
#contentAccueil > #dnn_ContentPane {
    display: flex;
    flex: 1 1 50%;
    gap: 0;
    /*gap: 20px; *//* Espace égal entre les éléments */
    justify-content: center;
    flex-wrap: wrap;
}
#title_menu{
    line-height: normal;
    text-align: justify;
    font-weight: 700;
    font-size: 16px;
}
#dnn_ContentPane {
    display: flex;
    flex: 1 1 50%;
    gap: 25px; /* Espace égal entre les éléments */
    justify-content: center;
    flex-wrap: wrap;
}
#dnn_ContentPane > div {
    width: 45%; /* Ajustez la largeur selon vos besoins */
    flex:1 1 45%;
    
}
.login-content-wrapper{
    display: flex;
    flex-direction: column-reverse;
    gap: 20px;
    height: 518px;
}
.login-bandeau-vignettes{
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
   margin: 0 2em;
   padding: 30px;
   border-radius: 0;
   margin: 84px auto;
   height: 514px;
   /* opacity: 0.6; */
   border-radius: 20px;
   color: white;
   backdrop-filter: blur(5px);
   background-color: #00ade9ab;
}
.login-bandeau-vignettes > .content> h2{
    font-size: 22px;
    color: white;
    font-family: calibri;
    line-height: 22px;
    margin-bottom: 20px;
}
.login-bandeau-vignettes > .content > .vignette{
    display: flex;
    flex-wrap: wrap;
    /* backdrop-filter: invert(80%); */
    filter: invert(1);
    color: white;
}
.login-bandeau-vignettes .content > * {
    padding: 5px;
}
.login-bandeau-vignettes > .content > .vignette > a{
    /* flex: 1 1 32%; a décommenter quand la dernière icone sera présente*/ 
    flex: 1 1 48%; /* a commenter quand on repassera à 5 icones */ 
    box-sizing: border-box; /* Pour inclure le padding et la bordure dans la largeur */
    padding: 15px;
    text-align: center;
    /* color: white; */
    font-weight: bolder;
    color: black;
    border-radius: 10px;
    transition: box-shadow 0.3s ease;
}
.login-bandeau-vignettes > .content > .vignette > a:hover{
   box-shadow: 10px 5px 5px 2px white;
}
/* Formulaire de connexion*/

/* Retirer ce bloc pour rafficher la zone de test preprod mdp*/
.login-mdp-manual{
    display: none !important;
}

#accueil .content .login-content-wrapper > * {
    background-color: #4ded2d8a;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
    margin: 0;
    width: 364px;
    padding: 30px;
    border-radius: 0;
    backdrop-filter: blur(5px);
    border-radius: 20px;
    color: white !important;   
}

.main-description {
    font-size: 22;
    line-height: 1;
    text-align: center;

}
#description_sub{
    text-align: center;
}
/*
* Page Rendez-vous
*/
.button_rdv{

}
div#infos_rdv{
    font-style: italic;
    border-top: 1px lightgray solid;
    margin-top: 50px;
}
div#infos_rdv > p > a {
    color: cornflowerblue;
    text-decoration: underline;
}
div#infos_rdv > p > a:hover {
    color: blueviolet;
    text-decoration: underline;
}
#bouton_choix_rdv >a {
    flex: 0 1 auto;
    width: 30%;
    /* background: cadetblue; */
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
div#bouton_choix_rdv {
    display: flex;
    gap: 20px;
    justify-content: center;
}
.button_prdv{
    background-color: #00ade9ab;
    transition: box-shadow 0.3s ease;
}
.button_login{
    background-color: #4ded2d8a;
    transition: box-shadow 0.3s ease;
}
div#bouton_choix_rdv > a:hover{
    text-decoration: none;
   box-shadow: 10px 5px 5px 2px black;
}

/*
* Page creation de compte
*/
.formulaire .formulaire-champ .formulaire-champ-definition {
    width: 45%;
}

/*
* Page Menu backoffice
*/
#dnn_ContentPane:has(.DnnModule-DDRMenu){
    display: unset;
}
.DnnModule-DDRMenu{
    width: 100% !important;
}
/*
* Page formulaires
*/
html body .settingsClass .riSingle .riTextBox[type="text"] {
    width: 350px !important;
}
/* HRI 09072020 Pied de page - Masquage lien Crédits*/
#terms_style > a:nth-child(5){
   display : none;
}

div#info_creation_compte  a {
    color: cornflowerblue;
    text-decoration: underline;
}
div#info_creation_compte a:hover {
    color: blueviolet;
    text-decoration: underline;
}
div#info_creation_compte p {
    text-align: justify;
}
/*style burger menu*/
.header .menu-container .menu-toggle {
	background-color:#0081ad ;
}

#accueil .header .menu-container .menu-toggle { 
	background-color:#0081ad ; 
}

.header .menu-container .menu label { 
	background-color:#eaf5fb; 
}

#accueil .header .menu-container .menu label { 
	background-color:#eaf5fb; 
}

/*style boutons*/
.changeMDP-btns .common-btn { 
	background-color:#0081ad  !important;
}

.common-btn, .ButtonStyle { 
	background-color:#0081ad  !important;
}

#s_wrap_main .common-btn.back, .CancelButtonStyle { 
	border-color:#0081ad  !important; 
	background-color:White !important; 
}

#accueil .common-btn.login-btns-connecter  {
	background-color: #503022 !important;
}

#s_wrap_main .common-btn { 
	background-color:#0081ad  !important;
}

#s_wrap_main .common-btn.secondary {
    border: 1px solid #d5d5d5 !important;
    background-color: #f3f3f3 !important;
}

#s_wrap_main .common-btn.plus {
    background-image: url(/Portals/13/Personnalisation/Apparence/ajouter.png);
    color: #0081ad  !important;
  	background-color: #fff !important;
}

#s_wrap_main .profil-identite-patient-photo-btns-suppression { 
	border-color:#0081ad  !important; 
	background-color:White !important; 
}

.archive-recherche .archive-recherche-champ-button { 
	background-color:#0081ad ; 
}

/*Style du text*/
#accueil .blue { 
	color:#0081ad ;
}
#accueil .common-link  {
	color: #ffffff;
}
a, a:visited, .homePageTitleEvent {
	color: #000000;
}

/*Bouton page feedback*/
#dnn_ctr4397_Feedback_cmdSend { 
  border-color:none;
  background:none;
  background-color:#0081ad ;
}

/*Onglets*/
.ContentPane .MyHOPTabs .rtsLI .rtsSelected .rtsTxt { 
	background-color:#FF6C00;
}

.ContentPane .ui-state-default a, .ContentPane .ui-widget-content .ui-state-default a, .ContentPane .MyHOPTabs .rtsLI .rtsLink .rtsTxt, .ContentPane .MyHOPTabs .rtsLI a, .ContentPane .MyHOPTabsWithLastTabRight .rtsLast .rtsTxt { 
	color:#FF6C00;
}

.ContentPane .RadTabStrip .rtsUL, .ContentPane .RadTabStripVertical .rtsUL, .ContentPane .ui-tabs .ui-tabs-nav, .ContentPane .ui-widget-header { 
	border-bottom: 8px solid #FF6C00; 
}

.common-warning-box { 
  background-color: #FF6C00; 
  border-color: #FF6C00;
}

/*Formulaires*/
.formulaires .formulaires-rappel { 
	background-color:#0081ad ;
}

span.marqueur { 
	background-color:#0081ad ; 
}

/*Page d'accueil conecté*/
.HomepageCard a.CardBackingPage {  
	background-color:#0081ad ;
}

/*Page d'identité*/
.common-fileSelect ul > li > span > input.ruButton {
	background-color: #0081ad  !important;
}

/*Images de controle personnalisée*/
tr.rcbReadOnly td:last-child, .RadComboBox.common-input table tbody tr td:last-child {
    background-image: url(/portals/13/Personnalisation/Apparence/dropdown.png);
}
.rgMasterTable input.rgAdd {
    background-image: url(/portals/13/Personnalisation/Apparence/ajouter.png);
}

#accueil .loginPanel input[id="RadTxbLogin"], 
#accueil .loginPanel input[placeholder="Adresse email"] {
    background-image: url(/portals/13/Personnalisation/Apparence/@.png) !important;
}
#accueil .loginPanel input[type="password"] {
    background-image: url(/portals/13/Personnalisation/Apparence/iconLock.png) !important;
}

.imgCollapse { 
	background-image: url(/portals/13/Personnalisation/Apparence/collapse-blue.png)
}

.imgExpand { 
	background-image: url(/portals/13/Personnalisation/Apparence/expand-blue.png)
}

.imgArrow {
	content: url(/portals/13/Personnalisation/Apparence/appointment_plus.png) ;
}
.imgArrow.ExpandButton_myHOP_Collapsed {
	content: url(/portals/13/Personnalisation/Apparence/appointment_collapse.png) ;
}

.imgNodeCell {
    background-image: url(/portals/13/Personnalisation/Apparence/Node.png);
}


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


PAGE D'ACCUEIL 


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

.header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background: #FFF;
    height: 120px;
}

#accueil .menu.container {
    position: absolute;
    top: 40px;
    left: 20px;
}

#accueil .content, .page .content {

    display: block;
    margin: -10px auto 200px;
    text-align: center;
    padding-top: 0px;
}

#dnn_BottomPane .content{
 	margin-bottom :0px; 
}

#logoMyHCL{
  	width: 80%;
  	max-width: 450px;
    margin: -90px auto 0px;
}

#accueil h1 {
  	font-weight: 100;
    margin-top: 80px;
}

/* Partie concernant les mobiles et tablettes */

@media screen and (max-width: 869px) {
   
#dnn_ContentPane {
        display: flex;
        flex-direction: column;
        gap: 20px; /* Espace égal entre les éléments */
        justify-content: center;
}
#bouton_choix_rdv >a {
    flex: 0 1 auto;
    width: 40%;
    /* background: cadetblue; */
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
div#infos_rdv {
    padding: 5px;
}
#dnn_ContentPane > div {
        width: 100%; /* Ajustez la largeur selon vos besoins */
        flex:1;
    }

#accueil .content .login-content-wrapper{
    display: inline-flex;
    flex-direction: column-reverse !important;
    gap: 20px;
    height: 518px;
    justify-content: space-around;
}
.login-content-wrapper{
           margin: 80px auto !important;
    }
    .login-bandeau-vignettes{
       
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
        margin: 0 2em;
        
        padding: 30px;
        border-radius: 0;
        margin: 80px auto;
    }
}

@media (max-width: 639px) {
/* .header-menu{
        display: none !important;
    } */
    #logoMyHCL{
        margin-top: 20px;
    }
    #fdbody{
            right: 0px;
    object-fit: cover;
    }
.header-logo{
    width: 50% !important;
}
.header-menu{
    z-index: 999;
}
#accueil {
    background-image: none !important;
}
/*#Body > form > *{
   padding: 10px;
}*/
#accueil{
    padding: 10px;
}

#dnn_ContentPane {
        display: flex;
        flex-direction: column;
        gap: 20px; /* Espace égal entre les éléments */
        justify-content: center;
}
    
#dnn_ContentPane > div {
       
        width: 100%; /* Ajustez la largeur selon vos besoins */
        flex:1;
    }
#accueil .content, .page .content {

    margin: -10px auto;
}
#accueil .content .login-content-wrapper{
 
    display: inline-flex;
    flex-direction: column-reverse !important;
    gap: 20px;
    height: 518px;
    justify-content: center;
}
    .login-bandeau-vignettes{
        flex-direction: unset;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
        margin: 0 2em;
        height: unset ! important;
        padding: 30px;
        border-radius: 0;
        margin: 80px auto;
    }
    .login-content-wrapper{
           margin-top: 80px auto !important;
    }
.login-bandeau-vignettes .vignettes{
        flex-direction: unset !important;
    }
    .DnnModule > div {
    display: flex;
    position: relative;
    justify-content: center;
}
}