/*  
    "description": "Style header application Manao",
    Author : Loroque Brillant
*/

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,500;0,600;1,100;1,700&display=swap");

:root {
    /*===== font =====*/
    /*===== typographie =====*/
    /*===== z-index =====*/
    --z-index-int: initial !important;
    --z-index--1: -1 !important;
    --z-index-0: 0 !important;
    --z-index-1: 1 !important;
    --z-index-pop: 1050 !important;
    /*===== color =====*/
    /*===== system color =====*/
    /*===== font size =====*/
    /*===== color box-shadow  =====*/
}

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

html {
    font-size: 100% !important;
    height: 100% !important;
    width: 100% !important;
}

body {
    position: relative;
}

html,
body {
    height: 100% !important;
    width: 100% !important;
}

aside,
footer,
header,
main,
nav,
section {
    display: block;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/***** template header *****/

/**** button ****/

.btnHeader {
    width: 100%;
    height: 30px;
    cursor: pointer;
    margin: 0 2px;
    display: block;
    text-align: center;
    vertical-align: middle;
    border: none;
    border-radius: 4px;
    background-color: #fff;
    font-weight: 500;
    font-family: Montserrat;
    font-size: 0.8rem;
    text-transform: none;
    -webkit-appearance: button;
}

.btnHeader.btnDefault {
    background-color: rgb(0, 0, 0, 0.1);
    color: #222230;
}
.btnHeader.btnDefault:hover {
    background-color: rgb(0, 0, 0, 0.2);
}

.btnHeader.btnConfirm {
    background-color: rgb(71, 198, 154);
    color: #fff;
}
.btnHeader.btnConfirm:hover {
    background-color: rgb(20, 147, 116);
}

.btnHeader.btnDelete {
    background-color: #f44a44;
    color: #fff;
}
.btnHeader.btnDelete:hover {
    background-color: #be312c;
}

.btnHeader.btnCancel {
    background-color: #b5b5b5;
    color: #222230;
}

/* btnSelectionner */
.btnHeader.btnDefault.outline {
    background-color: #f8f8f8;
    border: 1px solid #d9d9d9;
    color: #222230;
}

.btnHeader.btnDefault.outline:hover,
.btnHeader.btnCancel:hover {
    background-color: #d9d9d9;
}

.btnHeader.btnPrimary.outline-hover {
    background-color: #fff;
    color: #1a73e8 !important;
}
.btnHeader.btnPrimary.outline-hover:hover {
    border: 1px solid #1a73e8 !important;
}

.btnHeader.btnSave {
    background-color: #3682e6;
    color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btnHeader.btnSave:hover {
    background-color: #1a73e8;
}
.btnHeader.btnSave:disabled,
.btnHeader.btnSave[disabled] {
    background-color: #8ebbf6;
}

/*modal-tile*/
.modal-title{
    margin: 0;
    line-height: 1.42857143;
    font-family: Verdana, sans-serif !important;
}
.text-left{
    text-align: left !important;
}


/**** botton fermer ****/
button.fermer {
    border-radius: 50%;
    font-size: 18px;
    padding: 0px;
    margin: 0px;
    margin-top: -3px;
    height: 25px;
    width: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(0, 0, 0, 0.6);
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-appearance: button;
    text-decoration: none;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    border: none;
    background-color: transparent;
}

button.fermer:hover {
    background: rgb(0, 0, 0, 0.2);
}

button.fermer svg {
    width: 16px;
    height: 16px;
    fill: rgb(0, 0, 0, 0.5);
}

/**** transition ****/
.transition {
    transition: all 400ms ease-in-out;
}

.notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

/***** logo header *****/

.sm-logo-img {
    display: flex;
    align-items: center;
    justify-content: center;
    /*
        height: 2.825rem;
        width: 3.75rem;
    */
    height: 100%;
    max-width: 3.75rem;
    min-width: 2.825rem;
}

.sm-logo-img img {
    height: 100%;
}

.header-h1 {
    font-size: 18px;
    margin: 0px;
}

.uppercase {
    text-transform: uppercase;
}

.d-none {
    display: none !important;
}

/***** icon menu header ****/
.icon-circleImg-header {
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    width: 43.6px;
    height: 43.6px;
    padding: 4px;
    vertical-align: middle;
    background-color: rgba(255, 255, 255);
    border: 1px solid rgba(255, 255, 255,.8);
    position: relative;
}

.icon-circleImg-header > a {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.125rem;
}

.icon-circleImg-header > a > img {
    /*border-radius: 50%;*/
    height: 100%;
    width: 100%;
}

/* card */

.card-app-header {
    width: 78px;
    height: 78px;
    display: inline-block;
    list-style-type: none;
    position: relative;
    transition: transform 0.2s cubic-bezier(0.333, 0, 0, 1);
    vertical-align: top;
    margin-right: 6px;
    margin-bottom: 6px;
    cursor: pointer;
}
.card-app-header a {
    border-radius: 4px;
    margin: 0;
    outline: none;
    position: absolute;
    text-align: center;
    text-decoration: none;
    width: 78px;
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 0.5rem;
    background-color: rgb(242, 242, 242, 0.5);
}

.card-app-header a:hover {
    background-color: #e3edfe;
    box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 30%),
        0px 2px 6px 2px rgb(60 64 67 / 15%);
}

.card-app-header a > .logo-app {
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-app-header a > .logo-app .img-app {
    width: 50px;
    height: 46px;
}

.card-app-header a > .logo-app .img-app img {
    display: inline-block;
    width: 100%;
    height: 100%;
    transform: scale(calc(5 / 6));
}

.card-app-header a > .libelle-app {
    width: 100%;
    font-size: 12px;
    font-weight: 500;
    color: #202124;
    width: 68.666px;

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
}

.card-app-header a:hover .libelle-app {
    white-space: normal !important;
    text-overflow: initial !important;
}

.card-app-header > .new_window {
    position: absolute !important;
    top: 2px;
    right: 2px;
    height: 16px;
    width: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    background: #fff;
    padding: 1px;
    visibility: hidden;
}

.card-app-header:hover > .new_window {
    z-index: 1 !important;
    visibility: visible !important;
    background: #fff;
}

.card-app-header > .new_window:hover svg {
    fill: #0bbacf;
}

.card-app-header > .card-app-header .new_window svg {
    height: 15px;
    width: 15px;
    fill: #646464;
}

/**** ****/

.card-app-header > .beta-version {
    position: absolute !important;
    top: -4px;
    left: -4px;
    height: 14px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    background: #00B5AD;
    padding: 1px;
}

.beta-version > span{
    font-size: 10px;
}

/***  ***/

.scrollbar-header::-webkit-scrollbar {
    width: 10px;
    background: #3a90a3;
    border-radius: 100px;
    cursor: pointer !important;
}

.scrollbar-header::-webkit-scrollbar-track {
    background-color: #ddd;
}

.scrollbar-header::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #3a90a3;
    border-radius: 100px;
    border: 2px solid transparent;
    cursor: pointer !important;
}

/********/

/*====== Header ======*/

.app-header *{
    /* font-family: "Montserrat"; */
    font-family: Verdana, sans-serif !important;
}

.app-header {
    /*height: 3.625rem;*/
    height: 3.5rem;
    padding: 0rem 0.6rem;
    background-position: center;
    transition: box-shadow 250ms;
    -webkit-transition: box-shadow 250ms;
    box-sizing: border-box;
    /* position: relative; */
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    /* justify-content: space-between; */
    box-shadow: inset 0 -1px 0 rgb(100 121 143 / 12%);
    position: fixed;
    top: 0;
    /*
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2),inset 0 0 0 0 rgb(100 121 143 / 12%);
        box-shadow: none ! important; 
    */
    z-index: 16777271;
}
.app-header .spacing {
    height: 2rem !important;
    width: 2px;
    margin-left: 10px;
    margin-right: 10px;
    background: rgb(255, 255, 255, 0.7);
    position: relative;
}

/**** *****/
.app-header {
    background-color: #004c6c;
    color: #fff;
}
.app-header .left-zoneHeader h1{
    color : #fff !important;
}
.app-header .right-zoneHeader .raccourcis .icon-raccourcis .sigle-logRaccourci > div{
    color: #fff !important;
    background-color: #004c6c !important;
    text-shadow: 1px 1px 1px #212020;
    /*box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 30%), 0px 2px 6px 2px rgb(60 64 67 / 15%);*/
}

.app-header.trans {
    background-color: rgb(232, 232, 232)!important;
    /*color: #626262;*/
    color: #2e2d2d !important;
}
.app-header.etc{
    background-color: rgb(207, 205, 131)!important;
}
.app-header.etc .log-header img{
    height: 40px;
}
.app-header.trans .left-zoneHeader h1{
    color: #626262 !important;
}
.app-header.trans .right-zoneHeader .raccourcis .icon-raccourcis .app-logRaccourci{
    box-shadow: none!important;
}
.app-header.trans .right-zoneHeader .raccourcis .icon-raccourcis .app-logRaccourci > .icon-circleImg-header{
    border: 1px solid rgba(0, 0, 0, 0.2);
}
.app-header.trans .right-zoneHeader .raccourcis .icon-raccourcis .sigle-logRaccourci > div{
    color: #2e2d2d !important;
    background-color: rgb(232, 232, 232) !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
.app-header.trans .right-zoneHeader .lanceur .icon-circleImg-header{
    box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 30%), 0px 2px 6px 2px rgb(60 64 67 / 15%); 
}
.app-header.trans .right-zoneHeader .lanceur .icon-circleImg-header.active{
    border: 2px solid #23527c !important;
}
.app-header.trans .spacing {
    background: #626262 !important;
}

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

.app-header > div {
    height: 100%;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

/**** div input hidden ****/
.app-header .hidden-header {
    display: none !important;
}

/**** left zone header ****/
.app-header div.left-zoneHeader {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.app-header div.left-zoneHeader > div {
    height: 100%;
}

/**** test ****/

/*.app-header div.left-zoneHeader > div{
    background: rgb(255,255,255, .5);
    padding: 0px .5rem;
    border-radius: 4px;
}

.app-header div.left-zoneHeader > div:first-child{
    padding-left: 0px;
}*/

/**** ****/

/*** client information ***/
.left-zoneHeader .cli-header {
    display: flex;
    flex-direction: row;
}
.cli-header .logo-client {
    /* background: #fff; */
}
.cli-header .logo-client img {
    height: 100%;
}

.cli-header .libelle-client {
    display: flex;
    align-items: center;
    vertical-align: middle;
}
.cli-header .libelle-client h1 {
    padding-left: 0.6rem;
    vertical-align: middle;
}

@media screen and (min-width: 1440px) { .left-zoneHeader .cli-header {
        min-width: 16.5rem;
    }
}

/*** entreprise information ***/
.left-zoneHeader .ent-header {
    display: flex;
    align-items: center;
}
.left-zoneHeader .ent-header .libelle-ent,
.left-zoneHeader .ent-header .libelle-desktop {
    display: flex;
    align-items: center;
}

.left-zoneHeader .ent-header .libelle-ent h1,
.left-zoneHeader .ent-header .libelle-desktop h1 {
    vertical-align: middle;
}

/*** application information ***/
.left-zoneHeader .log-header {
    display: flex;
    flex-direction: row;
}
.log-header .logo-app {
    /* background: #fff; */
    padding: 0.2rem;
}
.log-header .logo-app img {
    height: 100%;
}

.log-header .libelle-app {
    display: flex;
    align-items: center;
    vertical-align: middle;
}

.log-header .libelle-app h1 {
    padding-left: 0.6rem;
    vertical-align: middle;
}

/***** responsive ****/

.app-header .left-zoneHeader .app-left-responsive{
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
}

.app-header .left-zoneHeader .app-left-responsive .logo-appData{
    display: flex;
    flex-direction: row;
    height: 100%;
}

.app-header .left-zoneHeader .app-left-responsive .logo-appData .logo-client{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    max-width: 3.75rem;
    min-width: 2.825rem;
    margin-right: 5px;
}
.app-header .left-zoneHeader .app-left-responsive .logo-appData .logo-client img{
    height: 100%;
}

.app-header .left-zoneHeader .app-left-responsive .logo-appData .logo-app{
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    width: 46.4px;
    height: 46.4px;
    padding: 4px;
    vertical-align: middle;
    background-color: rgba(255, 255, 255);
    border: 1px solid rgba(255, 255, 255,.8);
    position: relative;
    margin-right: 5px;
}
.app-header .left-zoneHeader .app-left-responsive .logo-appData .logo-app > a {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.125rem;
}
.app-header .left-zoneHeader .app-left-responsive .logo-appData .logo-app{
    padding: 0.2rem;
    border-radius: 50%;
    background-color: #fff;
}
.app-header .left-zoneHeader .app-left-responsive .logo-appData .logo-app > a img{
    height: 100%;
    width: 100%;
}
.app-header .left-zoneHeader .app-left-responsive .info-appData{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    line-height: 1.2;
}
.app-header .left-zoneHeader .app-left-responsive .info-appData .info-client{
    letter-spacing: normal;
    font-size: 0.8rem;
    font-weight: 600;
    text-shadow: 1px 1px 1px #212020;
    white-space: nowrap;
    line-height: inherit;
    text-overflow: ellipsis;
}
.app-header .left-zoneHeader .app-left-responsive .info-appData .info-entreprise{
    font-weight: 600;
    font-size: 12px;
    text-shadow: 1px 1px 1px #212020;
    white-space: nowrap;
    line-height: inherit;
    text-overflow: ellipsis;
}
.app-header .left-zoneHeader .app-left-responsive .info-appData .info-app{
    font-size: 12px;
    font-weight: 500;
    text-shadow: 1px 1px 1px #212020;
    white-space: nowrap;
    line-height: inherit;
    text-overflow: ellipsis;
}

.app-header.trans .left-zoneHeader .app-left-responsive .info-appData .info-client,
.app-header.trans .left-zoneHeader .app-left-responsive .info-appData .info-entreprise,
.app-header.trans .left-zoneHeader .app-left-responsive .info-appData .info-app{
    text-shadow: none !important;
    white-space: nowrap;
    line-height: inherit;
    text-overflow: ellipsis;
}

@media screen and (min-width: 984px){
    .app-header .left-zoneHeader .app-left-responsive{
        display: none !important;
    }
}
@media screen and (max-width: 984px){
    .app-header .left-zoneHeader .cli-header{
        display: none !important;
    }
    .app-header .left-zoneHeader > .spacing{
        display: none !important;
    }
    .app-header .left-zoneHeader .ent-header{
        display: none !important;
    }
    .app-header .left-zoneHeader .log-header{
        display: none !important;
    }
}

/**** center zone header ****/
.app-header div.center-zoneHeader {
    width: 100%;
    display: flex;
    flex: 1;
}

/*** notification ***/

.app-header div.center-zoneHeader .notification-principale {
    position: fixed;
    top: 3.5rem;
    right: 0;
    left: 0;
    bottom: 0;
    margin: 0;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
    display: flex;
    height: 0rem;
    width: 0rem;
    justify-content: center;
    z-index: 1050;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgb(31 38 135 / 37%);
    visibility: hidden;
    overflow-y: auto !important;
    align-items: start !important;
}

.app-header div.center-zoneHeader .notification-principale.show-notification {
    visibility: visible !important;
    height: 100%;
    width: 100%;
    right: 0;
    left: 0;
    bottom: 0;
}

.app-header
    div.center-zoneHeader .notification-principale .contenair-notification-princilale {
    width: 60%;
    min-height: 300px;
    height: auto;
    max-height: calc(100% - 20px);
    background: #fff;
    box-shadow: 0 0 0 1px rgb(20 20 31 / 5%), 0 1px 3px 0 rgb(20 20 31 / 15%);
    border-radius: 4px;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    position: relative;
    white-space: normal !important;
}

.app-header
    div.center-zoneHeader .notification-principale .contenair-notification-princilale .header-notification-princilale {
    padding: 10px;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #ddd;
}

.app-header
    div.center-zoneHeader .notification-principale .contenair-notification-princilale .header-notification-princilale
    h3 {
    color: rgb(0, 0, 0);
    font-family: Montserrat;
    font-size: 18px;
    font-weight: 600;
    justify-content: center;
    margin: 0px;
    flex: 1;
}

.app-header
    div.center-zoneHeader .notification-principale .contenair-notification-princilale .header-notification-princilale .btn-fermer-notification-princilale .btn
    svg {
    width: 16px;
    height: 16px;
    fill: rgb(0, 0, 0, 0.5) !important;
}

.app-header
    div.center-zoneHeader .notification-principale .contenair-notification-princilale .content-notification-princilale {
    margin-bottom: 1rem;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex: 1;
}

.app-header
    div.center-zoneHeader .notification-principale .contenair-notification-princilale .footer-notification-princilale {
    padding: 10px;
    width: 100%;
    text-align: center;
    border-top: 1px solid #ddd;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.app-header
    div.center-zoneHeader .notification-principale .contenair-notification-princilale .footer-notification-princilale .control-input-notification {
    padding-left: 10px;
}

.footer-notification-princilale .control {
    display: flex;
    align-items: center;
}

.footer-notification-princilale button {
    width: 100px !important;
}

.footer-notification-princilale .control input {
    margin: 0px;
}

.footer-notification-princilale .control label {
    color: rgb(0, 0, 0, 0.8);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 13px;
    padding-top: 2px;
    margin: 0px;
}

.app-header
    div.center-zoneHeader .notification-principale .contenair-notification-princilale .row-notification {
    width: 100%;
    padding: 15px;
}

.row-notification > div {
    width: 100%;
}

.row-notification .title-row-notification {
    padding: 10px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    background: #eee;
    text-align: left;
}

.row-notification .title-row-notification h3 {
    color: rgb(0, 0, 0, 0.5);
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 600;
    margin: 0px;
}

.row-notification .contenu-notification {
    padding: 10px;
    border: 1px solid #eee;
    text-align: left;
    word-wrap: break-word !important;
    position: relative;
}

.row-notification .contenu-notification {
    line-height: 1.5;
}

.row-notification .contenu-notification * {
    word-wrap: break-word !important;
    white-space: normal !important;
    width: 100%;
    height: auto !important;
    position: initial !important;
}

.row-notification .contenu-notification ul li {
    word-wrap: break-word !important;
    white-space: normal !important;
    width: 100%;
    padding-right: 15px !important;
}

.row-notification .contenu-notification ul {
    margin: 15px !important;
    padding-right: 15px !important;
    width: 100%;
}

.row-notification .control-row-notification {
    padding: 10px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    background: #eee;
    text-align: left;
}

.row-notification .control-row-notification label {
    color: rgb(0, 0, 0, 0.8);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 12px;
}

/**** right zone header ****/
.app-header div.right-zoneHeader {
    display: flex;
}

/**** raccourcis *****/
.app-header div.right-zoneHeader .raccourcis {
    position: relative;
    display: flex;
    align-items: center;
    transition: all 100ms ease-in-out;
}

.raccourcis .list-raccourcis{
    position: relative;
    display: flex;
    align-items: center;
    transition: all 100ms ease-in-out;
}


.app-header div.right-zoneHeader .raccourcis .list-raccourcis > div {
    margin-right: 0.3rem;
}

.app-header div.right-zoneHeader .raccourcis .list-raccourcis{
    padding-left: 0.3rem;
}

/***** mobile  *****/ 

.list-raccourcis.div-mobile-racourci{
    width: 100% !important;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 10px;
    flex-wrap: wrap;
    background-color: #fff;
    left:  0;
    position: fixed;
    top: 3.5rem;
    z-index: 1050;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
    visibility: hidden;
    justify-content: flex-end;
}

.list-raccourcis.div-mobile-racourci.show{
    visibility: visible !important;
    display: flex !important;
}

.list-raccourcis.div-mobile-racourci.mobile-show {
    visibility: visible !important;
    display: flex !important;
}

.list-raccourcis.div-mobile-racourci .icon-raccourcis{
    margin-bottom: 5px;
    margin-top: 5px;
    margin-left: 7px;
    margin-right: 7px;
}

.list-raccourcis.div-mobile-racourci .app-logRaccourci .icon-circleImg-header{
    box-shadow: none !important;
}

.form-saveRangeRaccourci.mobile{
    right: -160px!important;
    bottom: -100px!important;
}

@media screen and (max-width: 670px){
    .app-header{
        padding: 0rem 0.3rem !important;
    }
    .app-left-responsive > .spacing {
       /* display: none !important; */
        margin-left: 0px !important;
        margin-right: 5px !important;
    }

    .info-appData > .info-entreprise > span > span{
        display: none !important; 
    }

    .info-appData > div{
       /* display: none !important; */
    }

    .raccourcis{
        /*display: none !important;*/
    }

    .lanceur > div {
        margin-right: 0.3rem !important;
    }
    .app-header div.right-zoneHeader .lanceur {
        margin-left: 5px !important;
    }

    .app-header .left-zoneHeader .app-left-responsive .info-appData .info-client {
        font-size: 11px !important;
    }

    .app-header .left-zoneHeader .app-left-responsive .info-appData .info-entreprise {
        font-size: 11px !important;
    }

    .lanceur div:nth-child(1),
    .lanceur div:nth-child(2) {
        /*display: none !important;*/
    }
}


/*
@media screen and (min-width: 1440px){
    .window-opening_app .contenaire-app-opening > div{
        width: 1375px;
    }
}
@media (min-width: 1024px) and (max-width: 1439px){
    .window-opening_app .contenaire-app-opening > div{
        width: 810px;
    }
}
@media (min-width: 665px) and (max-width: 1023px){
    .window-opening_app .contenaire-app-opening > div{
        width: 628px;
    }
}   
@media (min-width: 460px) and (max-width: 664px){
    .window-opening_app .contenaire-app-opening > div{
        width: 430px;
    }
}
@media screen and (max-width: 459px){
    .window-opening_app .contenaire-app-opening > div{
        width: 242px;
    }
}
*/


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

.app-logRaccourci-mobile.active > div{
    background: rgba(244, 244, 244, 0.6) !important;
    border: 2px solid rgba(255, 255, 255, 1) !important;
}


.icon-raccourcis {
    display: flex;
    width: 48.6px;
    height: 48.6px;
    flex-direction: column;
    justify-content: center;
    position: relative;
    transition: transform 0.2s cubic-bezier(0.333, 0, 0, 1);
    cursor: pointer;
}

.icon-raccourcis .app-logRaccourci {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: 0px;
    position: relative;
    background-color: transparent;
    border-radius: 43.5px;
    box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 30%), 0px 2px 6px 2px rgb(60 64 67 / 15%);
}

.icon-raccourcis .app-logRaccourci .icon-circleImg-header{
    box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 30%), 0px 2px 6px 2px rgb(60 64 67 / 15%);
}

.icon-raccourcis .app-logRaccourci > div:last-child {
    margin-right: 0px;
}
.icon-raccourcis .app-logRaccourci > div:hover {
    background-color: rgb(0 76 108 / 77%);
}

.icon-raccourcis .sigle-logRaccourci {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: -4px;
    cursor: pointer;
}
.icon-raccourcis .sigle-logRaccourci > div {
    text-align: center;
    padding: 0px;
    margin: 0px;
    position: relative;
    height: 14px;
    font-weight: 400;
    letter-spacing: normal;
    font-size: 0.7rem;
    font-family: Verdana, sans-serif;
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-raccourcis .sigle-logRaccourci > div {
    background-color: #004c6c;
    color: #fff;
    font-weight: 600;
    text-shadow: 1px 1px 1px #212020;
    /*box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 30%), 0px 2px 6px 2px rgb(60 64 67 / 15%);*/
    white-space: nowrap;
}

.icon-raccourcis .popup-raccourcis{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    position: absolute;
    z-index: 1050;
    top: 3.5rem;
    visibility: hidden;
}

.icon-raccourcis .popup-raccourcis > div{
    background-color: #fff;
    font-family: sans-serif;
    font-size: .75rem;
    letter-spacing: .3px;
    padding: 4px 6px;
    border-radius: 4px;
    color : rgba(0, 0, 0, .9);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 12px;
    box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 30%), 0px 2px 4px 2px rgb(60 64 67 / 15%);
    white-space: nowrap;
}

.icon-raccourcis .popup-raccourcis div > span{
    height: 16px;
    width: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
}

.icon-raccourcis .popup-raccourcis div > span svg{

}

.icon-raccourcis .popup-raccourcis > div::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    margin-top: 0px;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}

.icon-raccourcis:hover .popup-raccourcis {
    visibility: visible !important;
}


/**** raccourci range ****/

.app-header .right-zoneHeader .raccourcis .list-raccourcis.ranger_action{
    background-image: repeating-linear-gradient(-1deg, #ffffff, #ffffff 7px, transparent 7px, transparent 17px, #ffffff 17px), repeating-linear-gradient(89deg, #ffffff, #ffffff 7px, transparent 7px, transparent 17px, #ffffff 17px), repeating-linear-gradient(179deg, #ffffff, #ffffff 7px, transparent 7px, transparent 17px, #ffffff 17px), repeating-linear-gradient(269deg, #ffffff, #ffffff 7px, transparent 7px, transparent 17px, #ffffff 17px);
    background-size: 1px calc(100% + 17px), calc(100% + 17px) 1px, 1px calc(100% + 17px) , calc(100% + 17px) 1px;
    background-position: 0 0, 0 0, 100% 0, 0 100%;
    background-repeat: no-repeat;
    animation: borderAnimation 1s infinite linear;
    margin-top:-2px;
    padding-top: 2px;
    margin-bottom:-2px;
    padding-bottom: 2px;
}

.app-header .right-zoneHeader .raccourcis .list-raccourcis.ranger_action.div-mobile-racourci{
    background-image: repeating-linear-gradient(-1deg, #333333, #333333 7px, transparent 7px, transparent 17px, #333333 17px), repeating-linear-gradient(89deg, #333333, #333333 7px, transparent 7px, transparent 17px, #333333 17px), repeating-linear-gradient(179deg, #333333, #333333 7px, transparent 7px, transparent 17px, #333333 17px), repeating-linear-gradient(269deg, #333333, #333333 7px, transparent 7px, transparent 17px, #333333 17px) !important;
    
}


.app-header .right-zoneHeader .raccourcis .list-raccourcis.ranger_action > .icon-raccourcis,
.app-header .right-zoneHeader .raccourcis .list-raccourcis.ranger_action > .icon-raccourcis .icon-circleImg-header{
    cursor: move !important;
}

@keyframes borderAnimation {
    from { background-position: 0 0, -17px 0, 100% -17px, 0 100%; }
    to { background-position: 0 -17px, 0 0, 100% 0, -17px 100%; }
}

.app-header .right-zoneHeader .raccourcis .form-saveRangeRaccourci{
    display: flex;
    margin-right: 0rem;
    position: absolute;
    background-color: #fff;
    padding: 2px;
    right: 22px;
    bottom: -28px;
    border-radius: 4px;
    box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 30%), 0px 2px 6px 2px rgb(60 64 67 / 15%);
    z-index: 1050;
}

.form-saveRangeRaccourci button{
    height: 20px;
    width: 20px;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 1px !important;
}

.icon-raccourcis.dragging{
    opacity: 0.4;
}


/***** application d'ouverture ******/
/******* ***********/

.div-window-opening_app {
    position: fixed;
    height: calc(100% - 3.5rem);
    top: 3.5rem;
    right: 0;
    bottom: 0;
    padding: 0;
    width: 0rem;
    margin: 0;
    z-index: 1050;
    visibility: hidden;
}

.div-lanceur.show-window-opening_app .div-window-opening_app{
    width: 100% !important;
    visibility: visible !important;
    background: #fff;
}

.div-window-opening_app .window-opening_app {
    width: 100% !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.window-opening_app * {
    z-index: initial;
}
.window-opening_app .contenaire-app-opening {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    height: calc(100% - 40px);
    padding: 10px;
}
.window-opening_app .contenaire-app-opening > div{
    margin-left: auto !important;
    margin-right: auto !important;
    /*width: 1375px;*/
    padding: 5px 20px;
}

@media screen and (min-width: 1440px){
    .window-opening_app .contenaire-app-opening > div{
        width: 1375px;
    }
}
@media (min-width: 1024px) and (max-width: 1439px){
    .window-opening_app .contenaire-app-opening > div{
        width: 810px;
    }
}
@media (min-width: 665px) and (max-width: 1023px){
    .window-opening_app .contenaire-app-opening > div{
        width: 628px;
    }
}   
@media (min-width: 460px) and (max-width: 664px){
    .window-opening_app .contenaire-app-opening > div{
        width: 430px;
    }
}
@media screen and (max-width: 459px){
    .window-opening_app .contenaire-app-opening > div{
        width: 242px;
    }
}

.window-opening_app .contenaire-app-opening .div-class-app {
    display: flex;
    flex-wrap: wrap;
    padding: 0.35rem;
    background: #ebf2f2;
}

.window-opening_app .contenaire-app-opening .div-titre-categorie h3{
    color: rgb(0, 0, 0, 0.5);
    flex: 1;
    margin: 0px!important;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    line-height: inherit;
    text-overflow: ellipsis;
    overflow: hidden;

    padding-bottom: 5px;
    border-bottom: 2px solid rgb(0,0,0,.1);
}
.window-opening_app .footer-div-opening {
    background-color: #f2f2f2;
    box-shadow: inset 0 1px 0 rgb(100 121 143 / 12%);
    padding: 8px 20px 8px 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    min-height: 40px;
}
.window-opening_app .footer-div-opening button{
    width: auto !important;
    padding-right: 10px;
    padding-left: 10px;
}

/**** card opion app ****/
.card-option-app{
    height: 50px;
    display: inline-block;
    list-style-type: none;
    position: relative;
    transition: transform 0.2s cubic-bezier(0.333, 0, 0, 1);
    vertical-align: top;
    cursor: pointer;
    margin:5px;
}
.card-option-app > [type="radio"] {
    z-index: -1;
    position: absolute;
    opacity: 0;
}
.card-option-app > [type="radio"]:checked ~ label {
    border-color: rgb(0, 162, 138);
    background-color: rgb(0, 162, 138, 0.16);
}
.card-option-app > [type="radio"]:checked ~ label > .radio-view span {
    will-change: transform;
    border: 0;
    background-image: linear-gradient(to top right,rgb(0, 162, 138),rgb(0, 162, 138, 0.6)
    );
    -webkit-animation: radio 400ms cubic-bezier(0.17, 0.89, 0.32, 1.49);
    animation: radio 400ms cubic-bezier(0.17, 0.89, 0.32, 1.49);
}
.card-option-app > [type="radio"]:checked ~ label > .radio-view span:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 10px;
    background-color: #fff;
}
.card-option-app > [type="radio"]:checked ~ label .card {
    will-change: box-shadow;
    -webkit-animation: card 500ms ease-in-out forwards;
    animation: card 500ms ease-in-out forwards;
}
.card-option-app label {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 50px;
    border-radius: 6px;
    border: 2px solid transparent;
    background-color: #fff;
    transition: all 300ms ease-in;
    cursor: pointer;
}
.card-option-app label:hover{
    box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 30%), 0px 2px 6px 2px rgb(60 64 67 / 15%);
}
.card-option-app label:before,
.card-option-app label:after {
    position: absolute;
    left: 29px;
    border-radius: 50%;
    content: "";
}
.card-option-app label:before {
    margin: -2rem;
    border: solid 2rem #545461;
    width: 4rem;
    height: 4rem;
    transform: scale(0);
}
.card-option-app label:after {
    margin: -0.1875rem;
    width: 0.375rem;
    height: 0.375rem;
    box-shadow: 0.32476rem -2.6875rem 0 -0.1875rem #ff8080,
        -0.32476rem -2.3125rem 0 -0.1875rem #ffed80,
        2.30366rem -1.42172rem 0 -0.1875rem #ffed80,
        1.6055rem -1.69573rem 0 -0.1875rem #a4ff80,
        2.54785rem 0.91464rem 0 -0.1875rem #a4ff80,
        2.32679rem 0.19796rem 0 -0.1875rem #80ffc8,
        0.87346rem 2.56226rem 0 -0.1875rem #80ffc8,
        1.29595rem 1.94258rem 0 -0.1875rem #80c8ff,
        -1.45866rem 2.28045rem 0 -0.1875rem #80c8ff,
        -0.71076rem 2.2244rem 0 -0.1875rem #a480ff,
        -2.69238rem 0.28141rem 0 -0.1875rem #a480ff,
        -2.18226rem 0.8312rem 0 -0.1875rem #ff80ed,
        -1.89869rem -1.92954rem 0 -0.1875rem #ff80ed,
        -2.01047rem -1.18791rem 0 -0.1875rem #ff8080;
}
.card-option-app label > .content-app {
    width: 75px;
    padding-left:2px;
    padding-right: 2px;
    font-size: 12px;
    font-weight: 500;
    color: #202124;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.card-option-app label:hover > .content-app{
    white-space: normal !important;
    text-overflow: initial !important;
    line-height: 1;
}

.card-option-app label > .radio-view {
    height: 100%;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-option-app label > .radio-view span {
    position: relative;
    display: inline-flex;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    border: 2px solid #454861;
    background-image: linear-gradient(to bottom, #3b4059, #1c1e2d);
}

.card-option-app .card-img {
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.25);
    border-top-left-radius: 1px;
    border-bottom-left-radius: 1px;
    height: 100%;
    width: 50px;
    flex-shrink: 0;
    text-align: center;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    padding: 5px;
}

.card-option-app .card-img:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    transform: translateX(-70px);
    background-image: linear-gradient(
        to right,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0)
    );
}
.card-option-app .card-img
    img {
    height: 100%;
    width: 100%;
}
@-webkit-keyframes radio {
    0%,
    17.5% {
        transform: scale(0);
    }
}

@keyframes radio {
    0%,
    17.5% {
        transform: scale(0);
    }
}
@-webkit-keyframes card {
    0% {
        box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.25);
        transform: scale(0.24);
    }
    45% {
        box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.5);
        transform: scale(0.25);
    }
    100% {
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.4);
        transform: scale(0.24);
    }
}
@keyframes card {
    0% {
        box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.25);
        transform: scale(0.24);
    }
    45% {
        box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.5);
        transform: scale(0.25);
    }
    100% {
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.4);
        transform: scale(0.24);
    }
}

/*===============================*/
/**** lanceur ****/
.app-header div.right-zoneHeader .lanceur {
    position: relative;
    white-space: nowrap;
    align-items: center;
    display: flex;
    -webkit-user-select: none;
    transition: all 400ms ease-in-out;
    margin-left: 10px;
}

.lanceur > div {
    margin-right: 0.5rem;
}

.lanceur > div.active {
    border: 2px solid rgba(255, 255, 255, 1) !important;
    background: rgba(244, 244, 244, 0.6) !important;
}

.lanceur div:last-child {
    margin-right: 0rem;
}

.lanceur > .icon-profil{
    padding: 1px !important;
}
.lanceur > .icon-profil a{
    padding: 0px !important;
}
.lanceur > .icon-profil img{
    border-radius: 50%;
    height: 100%;
    width: 100%;
}

/**** div lanceur ****/
.div-lanceur {
    width: auto;
    height: 100%;
    top: 0px;
    right: 0px;
    opacity: 1;
    position: relative;
    background-color: rgb(255, 255, 255);
}

.div-lanceur > div .header-divFloat {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f2f2f2;
    padding: 0px 10px;

    white-space: nowrap;
    line-height: inherit;
    text-overflow: ellipsis;
    overflow: hidden;
}

.div-lanceur > div .header-divFloat h3 {
    color: rgb(0, 0, 0, 0.5);
    flex: 1;
    margin: 0px !important;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    line-height: inherit;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
}

.div-lanceur > div .header-divFloat svg {
    height: 20px;
    width: 20px;
    fill: rgb(0, 0, 0, 0.7);
}

/**** application transveraux ****/

.div-lanceur .app-transversaux {
    box-shadow: 1px 0 1px 1px rgba(9, 30, 66, 0.1),
        0 0 1px 1px rgba(9, 30, 66, 0.13);
    box-sizing: border-box;
    height: calc(100% - 3.5rem);
    opacity: 1;
    position: fixed;
    right: 0px;
    top: 3.5rem;
    width: 0rem;
    transition: all 400ms ease-in-out;
    background-color: rgb(255, 255, 255);
    cursor: initial;
    z-index: 1050;
    padding: 0px;
    visibility: hidden;
}

.div-lanceur.show-trans .app-transversaux {
    visibility: visible !important;
    /*width: 280px !important;*/
}

.div-lanceur .app-transversaux {
    display: flex;
    flex-direction: column;
}

.div-lanceur .app-transversaux .list-app-transversaux {
    /*width: 280px !important;*/
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: calc(100% - 40px);
}

@media screen and (min-width: 280px){
    .div-lanceur.show-trans .app-transversaux{
        width: 280px !important;
    }
    .div-lanceur .app-transversaux .list-app-transversaux{
        width: 280px !important;
    }
}
@media screen and (max-width: 279px){
    .div-lanceur.show-trans .app-transversaux{
        width: 100% !important;
    }
    .div-lanceur .app-transversaux .list-app-transversaux{
        width: 100% !important;
    }
}

.div-lanceur .app-transversaux .list-app-transversaux > div {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0.35rem;
}
.div-lanceur .app-transversaux .list-app-transversaux div .card-app-header {
    margin: 4px !important;
}

/**** mobile application *****/
.div-lanceur .app-mobile-log{
    box-shadow: 1px 0 1px 1px rgba(9, 30, 66, 0.1),
        0 0 1px 1px rgba(9, 30, 66, 0.13);
    box-sizing: border-box;
    height: calc(100% - 3.5rem);
    opacity: 1;
    position: fixed;
    right: 0px;
    top: 3.5rem;
    width: 0rem;
    transition: all 400ms ease-in-out;
    background-color: rgb(255, 255, 255);
    cursor: initial;
    z-index: 1050;
    padding: 0px;
    visibility: hidden;
}


.div-lanceur .app-mobile-log .list-app-bases{
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    overflow-y: auto;
    height: calc(100% - 40px);
}



/**** application bases ****/
.div-lanceur .app-bases {
    box-shadow: 1px 0 1px 1px rgba(9, 30, 66, 0.1),
        0 0 1px 1px rgba(9, 30, 66, 0.13);
    box-sizing: border-box;
    height: calc(100% - 3.5rem);
    opacity: 1;
    position: fixed;
    right: 0px;
    top: 3.5rem;
    width: 0rem;
    transition: all 400ms ease-in-out;
    background-color: rgb(255, 255, 255);
    cursor: initial;
    z-index: 1050;
    padding: 0px;
    visibility: hidden;
}

.div-lanceur.show-bases .app-bases,
.div-lanceur.show-mobile .app-mobile-log {
    visibility: visible !important;
    /*width: 468px !important;*/
}

.div-lanceur .app-bases,
.div-lanceur .app-mobile-log {
    display: flex;
    flex-direction: column;
}

.div-lanceur .app-mobile-log .list-app-bases,
.div-lanceur .app-bases .list-app-bases {
    /*width: 468px !important;*/
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    overflow-y: auto;
    height: calc(100% - 40px);
}
@media screen and (min-width: 468px){
    .div-lanceur.show-mobile .app-mobile-log,
    .div-lanceur.show-bases .app-bases{
        width: 468px !important;
    }

    .div-lanceur .app-mobile-log .list-app-bases,
    .div-lanceur .app-bases .list-app-bases {
        width: 468px !important;
    }
}
@media screen and (max-width: 465px){
    .div-lanceur.show-bases .app-bases,
    .div-lanceur .app-bases .list-app-bases,
    .div-lanceur.show-mobile .app-mobile-log{
        width: 100% !important;
    }
}

.div-lanceur .app-mobile-log .div-entreprise ,
.div-lanceur .app-bases .list-app-bases .div-entreprise {
    border: 0;
    padding: 0rem;
    width: 100%;
    margin-bottom: 15px !important;
}

.div-lanceur .app-mobile-log .list-app-bases .div-entreprise legend,
.div-lanceur .app-bases .list-app-bases .div-entreprise legend {
    border-radius: 2px 2px 0px 0px;
    border: 1px solid #ebf2f2;
    height: 26px;
}

.div-lanceur .app-mobile-log .list-app-bases .div-entreprise legend,
.div-lanceur .app-bases .list-app-bases .div-entreprise legend {
    display: flex;
    max-width: 100% !important;
    width: auto !important;
    min-width: 60% !important;
    margin-bottom: 0px !important;
    white-space: normal;
    text-align: left;
    border-top-right-radius: 2px;
}

.div-lanceur .app-mobile-log .list-app-bases .div-entreprise legend .title,
.div-lanceur .app-bases .list-app-bases .div-entreprise legend .title {
    background: #ebf2f2;
    width: 100%;
    height: 100%;
    font-style: normal;
    font-size: 14px;
    text-transform: uppercase;
    color: #202124;
    display: flex;
    align-items: center;
    justify-content: center;
}

.div-lanceur .app-mobile-log .list-app-bases .div-entreprise legend .nb-apps,
.div-lanceur .app-bases .list-app-bases .div-entreprise legend .nb-apps {
    background-color: #fff;
    width: 140px;
    height: 100%;
    border-top-right-radius: 2px;
    font-size: 12px;
    color: #202124;
    display: flex;
    align-items: center;
    justify-content: center;
}

.div-lanceur .app-mobile-log .list-app-bases .div-entreprise .list-apps,
.div-lanceur .app-bases .list-app-bases .div-entreprise .list-apps {
    padding: 0.35rem;
    background: #ebf2f2;
    width: 100%;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    border-radius: 0px 0px 2px 2px;
    /*border-top: 2px solid #fff;*/
}

.div-lanceur .app-mobile-log .list-app-bases .div-entreprise .list-apps{
    justify-content: center;
}

.div-lanceur .app-mobile-log .list-app-bases .div-entreprise .list-apps .card-app-header,
.div-lanceur .app-bases .list-app-bases .div-entreprise .list-apps .card-app-header {
    margin: 4px !important;
}

.div-lanceur .app-mobile-log .list-app-bases .div-entreprise .list-apps .card-app-header > a,
.div-lanceur .app-bases .list-app-bases .div-entreprise .list-apps .card-app-header > a {
    background-color: #fff;
}

/**** menu left ****/
.div-lanceur .menu-right {
    box-shadow: 1px 0 1px 1px rgba(9, 30, 66, 0.1),
        0 0 1px 1px rgba(9, 30, 66, 0.13);
    /*box-shadow: 0 0 0 1px rgb(100 121 143 / 12%);*/
    box-sizing: border-box;
    height: 100%;
    opacity: 1;
    position: fixed;
    right: 0px;
    top: 0px;
    width: 0rem;
    transition: all 400ms ease-in-out;
    background-color: rgb(255, 255, 255);
    cursor: initial;
    z-index: 1050;
    visibility: hidden;
}

.div-lanceur.show-menu-right .menu-right {
    visibility: visible !important;
    width: 15.5rem !important;
}

.menu-right .contenair-div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 15px 15px;
    overflow-y: auto;
}

.menu-right .contenair-div > div {
    display: flex;
    align-items: center;
}

.menu-right .contenair-div .divider {
    background-color: #eee;
    height: 1px;
    width: 100%;
    display: inline-flex;
    margin: 10px 0px;
}

.contenair-div .contenair-btn-close {
    height: 40px;
    justify-content: right;
}

.contenair-div .contenair-profil {
    max-height: 3.75rem;
    /*flex-flow: row nowrap;*/
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
    margin: 5px 0px;
    position: relative;
}

.contenair-profil .div-profil-img {
    height: 2.813rem;
    width: 2.813rem;
    flex-shrink: 0;
    text-align: center;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    position: relative;
    border-radius: 50%;
    border: 1px solid #ddd;
    padding: 2px;
}

.contenair-profil .div-profil-img:before {
    border: 2px solid #fff;
    height: 0.75rem;
    width: 0.75rem;
    right: 0px;
    bottom: -0.188rem;
    background-color: #00d27a;
    content: "";
    border-radius: 100%;
    position: absolute;
}

.contenair-profil .div-profil-img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.contenair-profil .div-profil-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: calc(100% - 2.813rem);
    max-height: 3.75rem;
    min-height: 3.125rem;
    align-items: center;
    justify-content: center;
}

.contenair-profil .div-profil-info > div {
    width: 100%;
    vertical-align: middle;
    padding-left: 10px;
    text-align: left;
    word-wrap: break-word;
    position: relative;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #555e5d;
    font-style: normal;
    font-weight: 500;
}

.contenair-profil .div-profil-info .name {
    width: 100%;
    max-height: 25px;
    line-height: 12px;
}
.contenair-profil .div-profil-info .name span {
    color: #333;
    font-size: 11px;
    font-weight: 600;
    white-space: normal;
    line-height: inherit;
    text-overflow: ellipsis;
    overflow: hidden;
}

.contenair-profil .div-profil-info .mail {
    width: 100%;
    height: auto;
    font-size: 10px;
    line-height: 12px;
    overflow: hidden;
    padding-top: 5px;
}

.contenair-profil .div-profil-info .mail span {
    width: 100%;
    height: 100%;
    color: #363642;
    flex: 1;
    white-space: nowrap;
    line-height: inherit;
    text-overflow: ellipsis;
    overflow: hidden;
}

/*** menu menu-right ***/
.contenair-div .contenair-item-menu {
    align-items: center;
    box-sizing: border-box;
    color: rgb(0, 0, 0, 0.5);
    cursor: pointer;
    display: inline-flex;
    position: relative;
    width: 100%;
    border-radius: 4px;
    /*margin: 5px 0px;*/
    padding: 5px 10px;
}

.contenair-div .contenair-item-menu:hover {
    background-color: rgb(0, 0, 0, 0.1);
}

.contenair-div .contenair-item-menu svg {
    width: 1.563rem;
    height: 1.563rem;
    fill: rgb(0, 0, 0, 0.5);
}

.contenair-div .contenair-item-menu span {
    font-weight: bold;
    font-size: 16px;
    flex-grow: 1;
    padding: 4px 0;
    margin-left: 5px;
    /*margin-left: 14px;*/
    /*margin-right: 14px;*/
    text-align: left;
}

.contenair-div .contenair-dropdown-menu {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.contenair-div .contenair-dropdown-menu .contenair-item-menu {
    margin-bottom: 0rem;
}

.contenair-div .contenair-dropdown-menu .contenair-item-dropdown {
    position: relative;
    height: 0rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.1s ease-out;
    transform: scaleY(0);
    transform-origin: top;
}

.contenair-dropdown-menu.show .contenair-item-dropdown {
    transform: scaleY(1);
    transform-origin: top;
    height: auto !important;
}

.contenair-item-dropdown .dropdown-item {
    width: 100%;
    color: rgb(0, 0, 0, 0.5);
    /*padding: 5px 10px;*/
    padding: 5px 5px;
    font-size: 14px;
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    border-radius: 4px;
}

.contenair-item-dropdown .dropdown-item span {
    /*padding-left: 2.4rem !important;*/
    padding-left: 10px !important;
    flex-grow: 1;

    flex: 1;
    white-space: nowrap;
    line-height: inherit;
    text-overflow: ellipsis;
    overflow: hidden;
}

.contenair-item-dropdown .dropdown-item:hover {
    background-color: rgb(0, 0, 0, 0.1);
}

.contenair-item-dropdown .dropdown-item.active{
    background-color: rgb(0, 162, 138, 0.16);
}


/**** controle mobile sub menu ****/
@media screen and (max-width: 670px){
    .preference-submenu-reordonner, 
    .preference-submenu-raccourcis{
        display: none!important;
    }
}

/****  modal langue ****/

.overlay-modalLangue {
    position: fixed;
    top: 3.5rem;
    right: 0;
    left: 0;
    bottom: 0;
    margin: 0;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
    display: flex;
    height: 0rem;
    width: 0rem;
    justify-content: center;
    z-index: 1 !important;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgb(31 38 135 / 37%);
    opacity: 0;
    transition: opacity .15s linear;
    overflow-y: auto !important;
}

.overlay-modalLangue.show-modalLangue {
    opacity: 1;
    height: 100%;
    width: 100%;
    right: 0;
    left: 0;
    bottom: 0;
}

.overlay-modalLangue .modalLangue{
    transform: translate(0, -25%);
    transition: transform .3s ease-out;
}

.overlay-modalLangue.show-modalLangue .modalLangue{
    transform: translate(0, 0);
}

.overlay-modalLangue .modalLangue {
    width: 325px;
    max-height: 196px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgb(20 20 31 / 5%), 0 1px 3px 0 rgb(20 20 31 / 15%);
    border-radius: 4px;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: .5rem 1rem;
}

.overlay-modalLangue .modalLangue .header-modalLangue {
    padding: 10px 0px;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: space-between;
}

.overlay-modalLangue .modalLangue .header-modalLangue h4 {
    color: rgb(0, 0, 0, 0.7);
    font-size: 18px;
    font-weight: 500;
    justify-content: center;
    margin: 0px;
    flex: 1;
}

.overlay-modalLangue .modalLangue .content-div-langue {
    width: 100%;
    margin-top: 5px;
}

.content-div-langue .description-modalLangue{
    font-size: 12px;
    color: rgb(0, 0, 0, 0.4);
    line-height: 1.25rem;
}

.content-div-langue .langue-form-group{
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.langue-form-group label{
    font-size: 14px;
    color: rgb(0, 0, 0, 0.8);
    font-weight: 500;
}

.langue-form-group select:disabled{
    background: rgb(0, 0, 0, 0.1);
}

.langue-form-group select{
    width: 100%;
    background: transparent;
    border: 1px solid #D5D7DA;
    padding: .5rem 1rem;
    border-radius: 4px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path d="M6 9l6 6 6-6" stroke="%23333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 10px center;
    background-size: 16px;
    cursor: pointer;
    color: #000 !important;
}


/******** Profil ********/

.div-window-profil {
    position: fixed;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    width: 0rem;
    margin: 0;
    display: flex;
    justify-content: right;
    flex-direction: column;
    z-index: 1050;
    visibility: hidden;
}

.div-window-profil * {
    z-index: initial;
}

.div-window-profil.show-profil-div {
    width: 100% !important;
    visibility: visible !important;
    height: auto !important;
}

.div-window-profil .div-paddingTop {
    background-color: rgb(255, 255, 255, 0.2);
    height: 60px;
    width: 100%;
}

.div-window-profil .window-profil {
    width: 0rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.div-window-profil.show-profil-div .window-profil {
    width: 100% !important;
}

.div-window-profil .window-profil .btnPrimary.outline-hover,
.div-window-profil .window-profil .btnSave,
.div-window-profil .window-profil .btnCancel {
    min-width: 100px !important;
    width: auto !important;
}

.window-profil .title-profil {
    text-align: center;
}

@media screen and (min-width: 768px) { .window-profil .title-profil {
        text-align: center;
    }
}

.window-profil .title-profil {
    background-color: #f2f2f2;
    box-shadow: inset 0 1px 0 rgb(100 121 143 / 12%);
    padding: 10px 20px 0px 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    min-height: 40px;
}

.window-profil .title-profil h1 {
    flex: 1;
    color: rgb(0, 0, 0, 0.5);
    padding-left: 20px;
    font-family: Montserrat;
    font-size: 18px;
    display: flex;
    justify-content: center;
    margin: 0px;
    font-style: normal !important;
}

.window-profil .title-profil h1 span svg {
    height: 30px;
    width: 30px;
    fill: rgb(0, 0, 0, 0.5);
    margin-top: -5px;
}

.window-profil .title-profil h1 .text-title {
    padding-left: 10px;
    padding-right: 10px;
}

.div-profil-manao {
    margin-top: 20px;
    padding: 20px 20px;
    display: flex;
    align-content: center;
    justify-content: center;
    flex: 1;
    overflow-y: auto;
}

.div-profil-manao > div.profil-detail {
    display: block;
}

@media screen and (max-width: 1172px) { .div-profil-manao {
        padding-top: 0px;
        flex-direction: column;
        align-content: center;
        justify-content: center;
    } .div-profil-manao > div {
        margin-left: auto;
        margin-right: auto;
    }
}

.div-profil-manao .profil-recap {
    display: flex;
    flex-direction: column;
    padding: 0 10px 10px;
    border-radius: 8px;
}

.div-profil-manao .profil-recap .photo-user .div-img .btn-change-photo {
    bottom: 25px;
    right: 0px;
    height: 30px;
    width: 30px;
    margin-left: auto;
    position: relative;
    background-color: #fff;
    border-radius: 50%;
    padding: 1.5px;
    text-align: center;
    border: 2px solid rgba(0, 0, 0, 0.2);
}
.div-profil-manao .profil-recap .photo-user .div-img .btn-change-photo a {
    width: 100%;
    height: 100%;
}

.div-profil-manao .profil-recap .photo-user .div-img .btn-change-photo a svg {
    height: 20px;
    width: 20px;
    fill: rgb(0, 0, 0, 0.5);
    margin-top: 2px;
}

@media screen and (min-width: 1173px) { .div-profil-manao .profil-recap {
        width: 270px;
    }
 .div-profil-manao .recap-photo {
        width: 100%;
    }
}

@media screen and (max-width: 1172px) { .div-profil-manao .profil-recap {
        width: 100%;
        flex-direction: row;
    }
 .div-profil-manao .recap-photo {
        padding: 0 40px;
    }
 .div-profil-manao .profil-detail {
        width: 100% !important;
        border: none !important;
    }
}

@media screen and (max-width: 840px) { .div-profil-manao .profil-recap {
        flex-direction: column;
        align-content: center;
        justify-content: center;
    }
 .div-profil-manao .recap-menu {
        padding: 0 !important;
    }
 .div-profil-manao .recap-menu ul {
        margin-top: 0px !important;
    }
 .div-profil-manao .profil-detail {
        width: 100% !important;
        border: none !important;
    }
}

.div-profil-manao .recap-photo .photo-user {
    width: 100%;
    padding: 15px 0;
    display: flex;
    align-content: center;
    justify-content: center;
}

.div-profil-manao .recap-photo .photo-user .div-img {
    margin: 0 auto !important;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 0.4);
    padding: 2px;
}

.recap-photo .photo-user .div-img > img {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 50%;
}

.div-profil-manao .recap-menu ul li {
    align-items: center;
    box-sizing: border-box;
    color: rgb(0, 0, 0, 0.5) !important;
    cursor: pointer;
    display: inline-flex;
    border-radius: 4px;
    padding: 10px 10px;
    background-color: rgb(0, 0, 0, 0.1);
}

.div-profil-manao .recap-menu ul li.active {
    background-color: rgb(11, 160, 207);
    color: #fff !important;
}

.div-profil-manao .recap-menu ul li.active span {
    color: #fff !important;
}

.div-profil-manao .recap-menu ul li.active svg {
    fill: #fff !important;
}

.div-profil-manao .recap-menu ul li.active:hover {
    background-color: rgb(11, 160, 207);
}

@media screen and (min-width: 1173px) { .div-profil-manao .recap-menu {
        width: 100%;
    } .div-profil-manao .recap-menu ul {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        list-style: none;
    } .div-profil-manao .recap-menu ul li {
        width: 100%;
        margin: 3px 0px;
    }
}

@media screen and (max-width: 1172px) { .div-profil-manao .recap-menu {
        width: 100%;
        flex-shrink: 1;
        padding: 0 20px 0 0;
    } .div-profil-manao .recap-menu ul {
        margin-top: 50px;
        list-style-type: none;
        display: flex;
    } .div-profil-manao .recap-menu ul li {
        float: left;
        margin-left: 5px;
        margin-right: 5px;
        width: 100%;
    }
}

.div-profil-manao .recap-menu ul li svg {
    width: 25px;
    height: 25px;
    fill: rgb(0, 0, 0, 0.5) !important;
    margin-right: 5px;
}

.div-profil-manao .recap-menu ul li:hover {
    background-color: rgb(0, 0, 0, 0.2);
}

.div-profil-manao .recap-menu ul li span {
    font-family: Montserrat;
    font-style: normal;
    font-weight: bold;
    font-size: 12px;
    line-height: 22px;
    color: #555e5d;
}

.div-profil-manao .profil-detail {
    width: 850px;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    padding: 0 15px;
}

.div-profil-manao .profil-detail .detail-header {
    width: 100%;
    padding: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.profil-detail .detail-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.profil-detail .detail-header h3 {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 22px;
    color: #6b6d6d;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 0px;
}

.div-profil-manao .profil-detail .detail-content {
    display: flex;
    flex-direction: column;
    padding: 20px 10px;
}

.div-profil-manao .profil-detail .detail-content .detail-row {
    width: 100%;
    padding: 10px 15px;
    display: flex;
    align-content: center;
    background-color: #f2f2f2;
    margin-bottom: 5px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #6b6d6d;
    font-family: Montserrat;
}

.detail-content .detail-row input[type="checkbox"] {
    margin-right: 10px !important;
}

.detail-content .detail-row:last-child {
    border-bottom: 1px solid #fff !important;
}

.detail-row .profil-libelle {
    flex-basis: 200px;
    height: 100%;
    vertical-align: middle;
    display: flex;
    align-items: center;
}

.detail-row .profil-libelle h4 {
    height: 100%;
    vertical-align: middle;
    display: flex;
    align-items: center;
    font-family: Montserrat;
    color: #6b6d6d;
    font-weight: 500;
    font-size: 0.8rem;
    margin: 0px;
    padding-top: 10px;
}

.detail-row .profil-value {
    height: 100%;
    flex-grow: 8;
    flex-shrink: 1;
    padding: 0 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.detail-row .profil-value .vue {
    font-family: Montserrat;
    color: #6b6d6d;
    font-weight: 500;
    align-items: center;
    padding: 6px 0;
    font-size: 0.95rem;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.detail-row .profil-value .input-profil-value {
    width: 100%;
    height: 100%;
    min-height: 33.72px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.detail-row .profil-value input {
    display: block;
    width: 100%;
    height: 30px;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #363642;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #c6c9d5;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin-top: 1px;
}

.detail-row .profil-value .input-profil-value input:focus {
    border: 1px solid #abaeb7 !important;
}

.detail-row .profil-value .input-profil-value span {
    font-size: 0.8rem;
    color: #c34340;
    width: 100%;
    text-align: left;
    padding-left: 10px;
    padding-top: 3px;
}

.detail-row-action .profil-action {
    margin-top: 15px;
    height: 100%;
    padding: 2px 0;
    display: flex;
    flex-direction: row-reverse;
}

/***** avatar ****/
.div-overlay-avatar * {
}

.div-overlay-avatar {
    position: fixed;
    top: 3.5rem;
    right: 0;
    left: 0;
    bottom: 0;
    margin: 0;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
    display: flex;
    height: 0rem;
    width: 0rem;
    justify-content: center;
    z-index: 1 !important;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    visibility: hidden;
    overflow-y: auto !important;
}

.div-overlay-avatar.show-form-avatar {
    visibility: visible !important;
    height: 100%;
    width: 100%;
    right: 0;
    left: 0;
    bottom: 0;
}

.div-overlay-avatar .div-avatar {
    width: 420px;
    height: 420px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgb(20 20 31 / 5%), 0 1px 3px 0 rgb(20 20 31 / 15%);
    border-radius: 4px;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.div-overlay-avatar .div-avatar .header-div-avatar {
    padding: 15px;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #ddd;
}

.div-overlay-avatar .div-avatar .header-div-avatar h3 {
    color: rgb(0, 0, 0, 0.5);
    font-family: Montserrat;
    font-size: 18px;
    font-weight: 600;
    justify-content: center;
    margin: 0px;
    flex: 1;
}

.div-overlay-avatar .div-avatar .content-div-avatar {
    flex: 1;
    width: 100%;
    background: rgb(250, 250, 250);
    height: 316px;
    position: relative;
    padding: 10px;
    cursor: move;
}

.div-overlay-avatar .div-avatar .content-div-avatar #titre-crop-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.div-overlay-avatar .div-avatar .content-div-avatar #titre-crop-image h3 {
    font-size: 18px;
    color: rgb(0, 0, 0, 0.5);
    vertical-align: middle;
    text-align: center;
}

.div-overlay-avatar .div-avatar .content-div-avatar #div-crop-image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220px;
    height: 220px;
    margin-top: -110px;
    margin-left: -110px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid rgb(102, 102, 102);
    background: none repeat scroll 0% 0% transparent;
}

.div-overlay-avatar .div-avatar .content-div-avatar #div-crop-image:before {
    background: none repeat scroll 0% 0% transparent;
    border: 1px solid #fff;
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 50%;
    pointer-events: none;
}

.div-overlay-avatar .div-avatar .content-div-avatar #zoom-image-crop {
    position: absolute;
    width: auto;
    bottom: 5px;
    right: 5px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.div-overlay-avatar .div-avatar .content-div-avatar #zoom-image-crop button {
    height: 25px;
    cursor: pointer;
    margin: 0 2px;
    display: block;
    text-align: center;
    vertical-align: middle;
    border: none;
    border-radius: 4px;
    background-color: #fff;
    font-weight: 500;
    text-align: center;
    border: 1px solid rgb(102, 102, 102, 0.8);
    font-size: 10px !important;
    color: #222230 !important;
    padding-left: 5px;
    padding-right: 5px;
}

.div-overlay-avatar .div-avatar .footer-div-avatar {
    padding: 10px;
    display: flex;
    border-top: 1px solid #ddd;
    flex-direction: row-reverse;
}

.div-overlay-avatar .div-avatar .footer-div-avatar .btnConfirm,
.div-overlay-avatar .div-avatar .footer-div-avatar .btnCancel {
    width: auto !important;
    min-width: 100px !important;
}

/***** modale gestion raccourci *****/

.control-Raccourcis {
    box-shadow: 1px 0 1px 1px rgb(9 30 66 / 10%), 0 0 1px 1px rgb(9 30 66 / 13%);
    box-sizing: border-box;
    height: calc(100% - 3.5rem);
    opacity: 1;
    position: fixed;
    right: 0px;
    top: 3.5rem;
    width: 0rem;
    transition: all 400ms ease-in-out;
    background-color: rgb(255, 255, 255);
    cursor: initial;
    z-index: 1050;
    padding: 0px;
    visibility: hidden;
}

.div-lanceur .control-Raccourcis {
    display: flex;
    flex-direction: column;
}

.div-lanceur.show-raccourcis .control-Raccourcis {
    visibility: visible !important;
    /*width: 478px !important;*/
}

.control-Raccourcis .list-app-raccourcis {
    /*width: 478px !important;*/
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    overflow-y: auto;
    height: calc(100% - 40px);
}

@media screen and (min-width: 478px){
    .div-lanceur.show-raccourcis .control-Raccourcis {
        width: 478px !important;
    }
    .control-Raccourcis .list-app-raccourcis {
        width: 478px !important;
    }
}
@media screen and (max-width: 477px){
    .div-lanceur.show-raccourcis .control-Raccourcis {
        width: 100% !important;
    }
    .control-Raccourcis .list-app-raccourcis {
        width: 100% !important;
    }
}

.control-Raccourcis .list-app-raccourcis .div-entreprise {
    border: 0;
    padding: 0rem;
    width: 100%;
    margin-bottom: 15px !important;
}
.control-Raccourcis .list-app-raccourcis .div-entreprise legend {
    border-radius: 2px 2px 0px 0px;
    /*border: 1px solid #EBF2F2;*/
    height: 26px;
}
.control-Raccourcis .list-app-raccourcis .div-entreprise legend {
    display: flex;
    width: 100%;
    margin-bottom: 0px !important;
    white-space: normal;
    text-align: left;
    border-top-right-radius: 2px;
    border: none !important;
}
.control-Raccourcis .list-app-raccourcis .div-entreprise legend .title {
    background: #ebf2f2;
    width: calc(100% - 135px);
    height: 100%;
    font-size: 13px;
    color: #202124;
    display: flex;
    align-items: center;
    justify-content: left;
}
.control-Raccourcis .list-app-raccourcis .div-entreprise legend .title span {
    width: 100%;
    height: 100%;
    padding: 4px 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.control-Raccourcis .list-app-raccourcis .div-entreprise legend .sigle-form {
    background-color: #fff;
    width: 80px !important;
    height: 100%;
    font-size: 12px;
    color: #202124;
    padding: 4px 5px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.control-Raccourcis .list-app-raccourcis .div-entreprise legend .sigle-form span {
    white-space: nowrap;
}

.control-Raccourcis .list-app-raccourcis .div-entreprise legend .sigle-form .div-inputSigle {
    width: 80px;
    position: relative;
}

.control-Raccourcis .list-app-raccourcis .div-entreprise legend .sigle-form .div-inputSigle input {
    width: 100%;
    text-align: center;
    font-size: 12px;
    height: 24px !important;
}

.control-Raccourcis .list-app-raccourcis .div-entreprise legend .sigle-form .div-inputSigle .input-tooltip-error{
    position: absolute;
    left: -191px;
    background: #ff004d;
    padding: 3px 5px;
    border-radius: 4px;
    color: #fff;
    width: 185px;
}

.control-Raccourcis .list-app-raccourcis .div-entreprise legend .sigle-form .div-inputSigle .input-tooltip-error .tooltip-error-text{
    width: 100%;
    text-align: center;
}

.control-Raccourcis .list-app-raccourcis .div-entreprise legend .sigle-form .div-inputSigle .input-tooltip-error .tooltip-error-arrow{
    position: absolute;
    right: -8px;
    top: 2px;
}

.control-Raccourcis .list-app-raccourcis .div-entreprise legend .sigle-form .div-inputSigle .input-tooltip-error .tooltip-error-arrow svg{
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: #ff004d;
    overflow: hidden;
}


.control-Raccourcis .list-app-raccourcis .div-entreprise legend .div-button-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
}
.control-Raccourcis .list-app-raccourcis .div-entreprise legend .div-button-legend > button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 5px;
    color: #1a73e8;
    height: 25px;
    width: 65px;
    margin: 0;
}
.control-Raccourcis .list-app-raccourcis .div-entreprise legend .div-button-legend > button svg {
    height: 15px;
    width: 15px;
    fill: #1a73e8;
}
.control-Raccourcis .list-app-raccourcis .div-entreprise legend .div-button-legend > button:hover {
    background-color: #1a73e8 !important;
    color: #fff !important;
}
.control-Raccourcis .list-app-raccourcis .div-entreprise legend .div-button-legend > button:hover svg {
    fill: #fff !important;
}

.control-Raccourcis .list-app-raccourcis .div-entreprise legend .div-button-legend .div-buttonConfirmSigle {
    display: flex;
    align-items: center;
    justify-content: center;
}
.control-Raccourcis .list-app-raccourcis .div-entreprise legend .div-button-legend .div-buttonConfirmSigle > button {
    height: 25px;
    width: 25px;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.control-Raccourcis .list-app-raccourcis .div-entreprise legend .div-button-legend .div-buttonConfirmSigle > button svg {
    /*height: 20px;
    width: 20px;*/
    fill: #fff;
}

.control-Raccourcis .list-app-raccourcis .div-entreprise .list-apps {
    padding: 0.35rem;
    background: #ebf2f2;
    width: 100%;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    border-radius: 0px 0px 2px 2px;
    /*border-top: 2px solid #fff;*/
}

.card-raccourcis-header {
    width: 80px;
    height: 80px;
    display: inline-block;
    list-style-type: none;
    position: relative;
    transition: transform 0.2s cubic-bezier(0.333, 0, 0, 1);
    vertical-align: top;
    margin: 4px !important;
    cursor: pointer;
}
.card-raccourcis-header a {
    border-radius: 50%;
    margin: 0;
    outline: none;
    position: absolute;
    text-align: center;
    text-decoration: none;
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background-color: #fff;
}

.card-raccourcis-header a:hover {
    box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 30%),
        0px 2px 6px 2px rgb(60 64 67 / 15%);
}

.card-raccourcis-header a.active {
    border: 3px solid #00a28a;
    background-color: #fff;
}

.card-raccourcis-header a > .logo-app {
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-raccourcis-header a > .logo-app .img-app {
    width: 50px;
    height: 46px;
}

.card-raccourcis-header a > .logo-app .img-app img {
    display: inline-block;
    width: 100%;
    height: 100%;
    transform: scale(calc(5 / 6));
}

.card-raccourcis-header a > .sigle-app {
    width: 100%;
    font-size: 11px;
    font-weight: 500;
    color: #202124;
    width: 68.666px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
}

/***** notification flottant *******/

.notificaiton-flottant {
    text-align: center;
    cursor: pointer;
    color: #333;
    background-color: #fffdd0;
    font-size: 14px;
    font-family: Montserrat;
    box-shadow: 0 1rem 3rem rgba(20, 20, 31, 0.175);
    position: fixed;
    padding: 1rem 1rem;
    z-index: 1;
    top: 3.5rem;
    width: 100%;
    margin-left: 10px;
    margin-right: 10px;
    font-weight: bold;
}
.notificaiton-flottant div {
    flex: 1;
}

.notificaiton-flottant a {
    width: 16px;
    height: 16px;
}

.notificaiton-flottant a svg {
    width: 16px;
    height: 16px;
    fill: rgb(0, 0, 0, 0.5) !important;
}

@media (min-width: 768px) { .notificaiton-flottant {
        top: 4.25rem;
        width: auto;
        max-width: 40rem;
        border-radius: 4px;
        z-index: 2147483800;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.notificaiton-flottant a:not(.btn) {
    text-decoration: underline;
}

/*====== Application ======*/

.menu-application {
    /*margin-top: 3.625rem;*/
    margin-top: 3.5rem;
}

/**** *****/
.input-group .form-control {
  position: initial !important;
  z-index : 0 !important;
}

.modal-dialog {
  top : 4rem !important;
}
/***** ****/

.div-documentation,
.div-infoUpdate,
.div-assisance {
    position: fixed;
    height: calc(100% - 3.5rem);
    top: 3.5rem;
    right: 0;
    bottom: 0;
    padding: 0;
    width: 0rem;
    margin: 0;
    z-index: 1050;
    visibility: hidden;
}

.div-lanceur.show-assisance-div .div-assisance,
.div-lanceur.show-infoUpdate-div .div-infoUpdate,
.div-lanceur.show-documentation-div .div-documentation {
    width: 100% !important;
    visibility: visible !important;
    background: #fff;
}

.windowInfo-Lanceur {
    width: 100% !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.windowInfo-Lanceur .contenaire-window {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    height: calc(100% - 40px);
    padding: 10px;
}

@media screen and (min-width: 1440px) {
    .windowInfo-Lanceur .contenaire-window>div {
        width: 1024px;
        margin-left: auto;
        margin-right: auto;
    }
}

.windowInfo-Lanceur .contenaire-window>div {
    display: flex;
    flex-direction: column;
    color: #212529;
    font-size: 16px;
    line-height: 1.5;
}

.div-informationLanceur {
    padding: 1rem 1.5rem;
    position: relative;
    text-align: justify;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
}

.div-informationLanceur * {
    position: relative;
}

.div-cardInfoLanceur {
    background-color: #f2f2f2;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 8px;
}

.div-informationLanceur p {
    margin-bottom: 0rem;
    padding: .5rem;
}

.div-informationLanceur .span-title {
    font-weight: 600;
    padding-bottom: .1rem;
    border-bottom: 1px solid #212529;
}

.div-informationLanceur ul {
    padding-left: 2.5rem;
    padding-top: 1rem;
}

.div-informationLanceur ul li {
    list-style: none;
}

.div-informationLanceur ul p {
    padding: 0rem;
}

.div-informationLanceur .btn-Redirection {
    text-align: center;
    vertical-align: middle;
    border-radius: 4px;
    padding: .5rem 1rem;
    font-size: 16px;
    border: 1px solid #17a2b8;
    margin-top: .5rem;
    color: #17a2b8; /* Couleur du texte similaire à celle de Bootstrap */
    background-color: transparent;
}
.div-informationLanceur .btn-Redirection:hover {
    color: #fff; /* Changement de couleur du texte au survol */
    background-color: #17a2b8; /* Changement de couleur de fond au survol */
    border-color: #17a2b8;
}
.text-rigth {
    text-align: right;
}

.text-left {
    text-align: left;
}

/*** assistance ***/


/*** info update ***/


/**** ****/


/**** ****/

.div-documentation *,
.div-assisance *,
.div-infoUpdate * {
    z-index: initial;
}


/****  modal assistance ****/

.overlay-modalAssistance {
    position: fixed;
    top: 3.5rem;
    right: 0;
    left: 0;
    bottom: 0;
    margin: 0;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
    display: flex;
    height: 0rem;
    width: 0rem;
    justify-content: center;
    z-index: 1 !important;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgb(31 38 135 / 37%);
    visibility: hidden;
    overflow-y: auto !important;
}

.overlay-modalAssistance.show-modalAssistance {
    visibility: visible !important;
    height: 100%;
    width: 100%;
    right: 0;
    left: 0;
    bottom: 0;
}

.overlay-modalAssistance .modalAssistance {
    width: 350px;
    height: 200px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgb(20 20 31 / 5%), 0 1px 3px 0 rgb(20 20 31 / 15%);
    border-radius: 4px;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    
}

.overlay-modalAssistance .modalAssistance .header-modalAssistance {
    padding: 10px;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #ddd;
}

.overlay-modalAssistance .modalAssistance .header-modalAssistance h3 {
    color: rgb(0, 0, 0, 0.5);
    font-size: 16px;
    font-weight: 500;
    justify-content: center;
    margin: 0px;
    flex: 1;
}

.overlay-modalAssistance .modalAssistance .content-div-assistance {
    flex: 1;
    width: 100%;
    background: rgb(250, 250, 250);
    height: 316px;
    position: relative;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay-modalAssistance .modalAssistance .content-div-assistance h3 {
    font-size: 18px;
    color: rgb(0, 0, 0, 0.5);
    vertical-align: middle;
    text-align: center;
}
.div-FermerBtn {
    text-align: center;
    /* Centrer horizontalement */
    margin-top: .5rem;
}

.div-FermerBtn .btnFermer {
    vertical-align: middle;
    border-radius: 4px;
    padding: .375rem .75rem; /* Utilisation des valeurs Bootstrap pour le padding */
    font-size: 1rem; /* Taille de police par défaut de Bootstrap */
    border: 1px solid #6c757d; /* Couleur de bordure de la classe btn-outline-secondary */
    color: #6c757d; /* Couleur du texte de la classe btn-outline-secondary */
    background-color: transparent; /* Fond transparent de la classe btn-outline-secondary */
}

.div-FermerBtn .btnFermer:hover {
    color: #fff; /* Couleur du texte au survol de la classe btn-outline-secondary */
    background-color: #6c757d; /* Fond au survol de la classe btn-outline-secondary */
    border-color: #6c757d; /* Bordure au survol de la classe btn-outline-secondary */
}
.fermer-absolute {
    bottom: 10px; /* Ajustez la valeur en fonction de votre mise en page */
    margin-left: 63%; /* Ajustez la valeur en fonction de votre mise en page */
    vertical-align: middle;
    border-radius: 4px;
    padding: .200rem .75rem; /* Utilisation des valeurs Bootstrap pour le padding */
    font-size: 1rem; /* Taille de police par défaut de Bootstrap */
    border: 1px solid #6c757d; /* Couleur de bordure de la classe btn-outline-secondary */
    color: #6c757d; /* Couleur du texte de la classe btn-outline-secondary */
    background-color: transparent; /* Fond transparent de la classe btn-outline-secondary */
    width: 35%;
    margin-top: 5px;
    margin-bottom: 5px;
}

.fermer-absolute:hover {
    color: #fff; /* Couleur du texte au survol de la classe btn-outline-secondary */
    background-color: #6c757d; /* Fond au survol de la classe btn-outline-secondary */
    border-color: #6c757d; /* Bordure au survol de la classe btn-outline-secondary */
}

.btnChangemotdepasse {
    margin-top: 5px;
    margin-bottom: 5px;
    height: 100%;
    padding: 2px 0;
    display: flex;
    flex-direction: row-reverse;
}

.spin-loader-wrapper{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: rgba(255,255,255,0.25);
}

.spin-loader {
    box-sizing: border-box;
    display: inline;
    width: 20px;
    height: 20px;
    color: #ffffff;
    transition: all 200ms ease;
}
.spin-loader:after {
    box-sizing: border-box;
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    padding: 4px;
    border-radius: 50%;
    border: 6px solid currentColor;
    border-color: currentColor transparent currentColor transparent;
    animation: spin-loader 1.2s linear infinite;
}

@keyframes spin-loader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* Appareils de confiance */

#tabs_infoDevice,
#tabs_infoDevice p, 
#tabs_infoDevice span{
    color: rgb(46, 45, 45) !important;
}

.trusted-devices {
    margin-top: 2rem;
}

.trusted-devices__wrapper {
    overflow-x: auto;
}

.trusted-devices__table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.trusted-devices__table thead {
    background: #f8f9fa;
}

.trusted-devices__table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: #495057;
    font-size: 14px;
    border-bottom: 2px solid #dee2e6;
}

.trusted-devices__table td {
    padding: 12px !important;
    border-bottom: 1px solid #dee2e6;
    vertical-align: middle;
}

.trusted-devices__table tbody tr td:last-child {
  text-align: center;
}

.trusted-devices__table tbody tr:hover {
    background-color: #f8f9fa;
}

.device-ip {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #6c757d;
}

.device-system strong {
    color: #212529;
}

.device-type-badge {
    display: inline-block;
    padding: 4px 8px;
    background: #e9ecef;
    border-radius: 4px;
    font-size: 12px;
    color: #495057;
}

.device-status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.badge-trusted {
    background: #d4edda;
    color: #155724;
}

.badge-not-trusted {
    background: #fff3cd;
    color: #856404;
}

.usage-count {
    display: block;
    color: #6c757d;
    font-size: 11px;
    margin-top: 4px;
}

.device-date {
    color: #6c757d;
    font-size: 13px;
}

.trusted-devices__btn-delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #dc3545;
    color: #dc3545;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.trusted-devices__btn-delete:hover {
    background: #dc3545;
    color: white;
}

.trusted-devices__btn-delete svg {
    width: 16px;
    height: 16px;
}

.device-info-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
}

/* Loading */
.loading-wrapper {
    text-align: center;
    padding: 3rem;
}

/* Aucun appareil */
.no-devices {
    text-align: center;
    padding: 3rem;
    color: #6c757d;
}

.no-devices svg {
    margin-bottom: 1rem;
    opacity: 0.5;
}

.no-devices p {
    font-size: 18px;
    margin: 1rem 0 0.5rem;
    color: #495057;
}

.no-devices small {
    color: #6c757d;
}

/* Modal de confirmation */
.overlay-modalDevice {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.modalDevice {
    background: white;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.header-modalDevice {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

.header-modalDevice h4 {
    margin: 0;
    font-size: 18px;
}

.content-modalDevice {
    padding: 1.5rem;
}

.device-details-modal {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 4px;
    margin: 1rem 0;
}

.device-details-modal p {
    margin: 0.5rem 0;
    font-size: 14px;
}

.alert-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    margin-top: 1rem;
}

.alert-warning svg {
    flex-shrink: 0;
    stroke: #856404;
}

.alert-warning span {
    color: #856404;
    font-size: 13px;
}

.footer-modalDevice {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding: 1.5rem;
    border-top: 1px solid #dee2e6;
}