﻿:root {
    --hidden: hidden;
    --clickswidth: 110%;
    --prctribbon: -10000px;
    --prctribbon4: -10000px;
    --prctribbon6: -10000px;
    --prctribbon12: -10000px;
}

/* Layout */
html, body, .form {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-family: OpenSans, 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif !important;
}

body {
    min-height: 100%;
    padding-top: 1px;
    margin-top: -1px;
    background-color: #F4F5F9;
}

@font-face {
    font-family: "OpenSans";
    src: url(/Content/fonts/OpenSans-Regular.ttf) format("truetype"), url(/Content/fonts/OpenSans-Bold.ttf) format("truetype"), url(/Content/fonts/OpenSans-BoldItalic.ttf) format("truetype"), url(/Content/fonts/OpenSans-ExtraBold.ttf) format("truetype"), url(/Content/fonts/OpenSans-ExtraBoldItalic.ttf) format("truetype"), url(/Content/fonts/OpenSans-Italic.ttf) format("truetype"), url(/Content/fonts/OpenSans-Light.ttf) format("truetype"), url(/Content/fonts/OpenSans-LightItalic.ttf) format("truetype"), url(/Content/fonts/OpenSans-Semibold.ttf) format("truetype"), url(/Content/fonts/OpenSans-SemiboldItalic.ttf) format("truetype");
}

@font-face {
    font-family: "raleway";
    src: url(/Content/fonts/raleway.regular.ttf) format("truetype"), url(/Content/fonts/raleway.bold.ttf) format("truetype"), url(/Content/fonts/raleway.extrabold.ttf) format("truetype"), url(/Content/fonts/raleway.extralight.ttf) format("truetype"), url(/Content/fonts/raleway.heavy.ttf) format("truetype"), url(/Content/fonts/raleway.light.ttf) format("truetype"), url(/Content/fonts/raleway.medium.ttf) format("truetype"), url(/Content/fonts/raleway.semibold.ttf) format("truetype"), url(/Content/fonts/raleway.thin.ttf) format("truetype");
}

.content-wrapper
{
    position: relative;
    min-height: calc(100vh - 3.13rem - 10px); /* 3.13rem is the Header size */
}
html
{
    height: 100%;
}

/* Content */
.content
{
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    min-height: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

/* Footer */
.footer-wrapper
{
    position: absolute;
    bottom: 0;
    width: 100%
}

.footer
{
    font-size: 10.5px;
    color: #999999;
}

.footer-link {
    color: #999999;
    white-space: nowrap;
}

.footer-link:last-child
{
    border: none;
    margin: 0;
    padding: 0;
}

.footer-link:hover {
    color: #999999;
}

.footer-left
{
    float: left;
}

.footer-right
{
    float: right;
}

.footer-left,
.footer-right
{
    padding: 16px 24px;
}

@media (max-width: 599px)
{
    .footer-left,
    .footer-right
    {
        padding: 16px 4px;
    }
}

/* Header */
.app-header
{
    padding: 0 !important;
    box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.2);
    border-bottom-width: 0 !important;
}

.app-header .left-block
{
    float: left;
}

.app-header .right-block
{
    float: right;
}

.app-header .menu-container
{
    overflow: hidden;
}

.app-header .menu-container > div
{
    float: right;
}

.header-logo {
    background: url('Images/ADNETIS_500.png') no-repeat center;
    background-size: 150px 26px;
    background-position: center;
    height: 26px;
    width: 150px;
}

@media (max-width: 359px)
{
    .header-logo {
        background: url('Images/ADNETIS_500.png') no-repeat center;
        background-size: 26px;
        width: 26px;
    }
}

.left-panel .left-menu {
    padding:0;
    background-color:#ffffff;
    border:none;
}

    .left-panel .left-menu .dxm-item,
    .left-panel .left-menu .dxnb-headerCollapsed,
    .left-panel .header-left-menu .dxnb-headerCollapsed.menu-tableau-de-bord {
        border-left: 4px solid #ffffff !important;
        font-weight: bold;
    }

    /*Enlevé le 2025-01-31 JB parce que ça fait jumper le menu*/
/*        .left-panel .left-menu .dxnb-header,
        .left-panel .left-menu .dxnb-headerCollapsed
        .left-panel .header-left-menu .dxnb-header, 
        .left-panel .header-left-menu .dxnb-headerCollapsed {
            line-height: 32px !important;
        }*/

    .left-panel .left-menu .dxnb-header img,
    .left-panel .left-menu .dxnb-headerCollapsed img {
        float: none !important;
    }

    .left-panel .header-left-menu .dxnb-headerCollapsed.adaptive-logo.hovered,
    .left-panel .header-left-menu .dxnb-headerCollapsed.adaptive-logo2.hovered {
        border-left: 4px solid #F1F1F1;
    }

.left-panel .left-menu .dxnb-itemSelected a {
    background-color: #F1F1F1 !important;
    color: #0393C1 !important;
}

.left-panel .left-menu .dxm-item.hovered,
.left-panel .left-menu .dxnb-headerCollapsed.hovered,
.left-panel .left-menu .dxnb-header,
.left-panel .left-menu .dxm-item.dxm-selected.selected,
.left-panel .left-menu .dxm-item.dxm-selected.dxm-hovered,
.left-panel .header-left-menu .dxnb-headerCollapsed.hovered.menu-tableau-de-bord {
    border-left: 4px solid #0393C1 !important;
    background-color: #F1F1F1;
    color: #0393C1 !important;
    font-weight: bold;
}

.left-panel .left-menu .dxnb-left {
    background-color: #F1F1F1;
}
        
    .left-panel .header-left-menu .dxnb-headerCollapsed.menu-tableau-de-bord.hovered img.dxnb-img {
            content: url("images/tableaudebord_on@2.png");
        }

.left-panel .left-menu .dxnb-headerCollapsed.menu-destinataires.hovered img.dxnb-btnLeft {
    content: url("images/destinataires_on@2.png");
}

        .left-panel .left-menu .dxnb-headerCollapsed.menu-campagnes.hovered img.dxnb-btnLeft {
            content: url("images/campagne_on@2.png");
        }

        .left-panel .left-menu .dxnb-headerCollapsed.menu-infolettres.hovered img.dxnb-btnLeft {
            content: url("images/infolettre_on@2.png");
        }

        .left-panel .left-menu .dxnb-headerCollapsed.menu-statistiques.hovered img.dxnb-img {
            content: url("images/statistique_on@2.png");
        }

.left-panel .left-menu .dxnb-headerCollapsed.menu-destinataires img.dxnb-img {
    position: relative;
    left: 130px;
    margin-right: 17px !important;
}

.left-panel .left-menu .dxnb-headerCollapsed.menu-destinataires.hovered img.dxnb-img {
    position: relative;
    left: 130px;
    margin-right: 17px !important;
}

.left-panel .left-menu .dxnb-header.menu-destinataires img.dxnb-img {
    position: relative;
    left: 130px;
    margin-right: 10px !important;
}

.dxnb-bullet:hover {
    cursor: pointer !important;
    color: #0393C1;
}

.app-header .left-block .header-menu .image-item > .dxm-content {
    padding: 0 8px 0 8px;
}

.dxnb-last {
    margin-bottom: 0px !important;
}

.app-header .right-block .header-menu .image-item > .dxm-content
{
    padding: 0 7px 0 7px;
}

.app-header .left-block .header-menu .item.toggle-item > .dxm-content
{
    padding: 0 14px 0 14px;
}

.app-header .right-block .header-menu .item.toggle-item > .dxm-content
{
    padding: 0 14px 0 14px;
}

.app-header .header-menu .item.selected
{
    color: inherit;
    box-sizing: border-box;
    /* DXCOMMENT: Duplicates color from the web.config (devexpress->themes->baseColor) */
    border-bottom: solid 2px #F87C1D;
}
.app-header .header-menu .item.selected,
.app-header .header-menu .item.hovered
{
    background-color: rgba(0, 0, 0, 0.05);
}

    .app-header .header-menu .item.selected .dxm-content
    {
        margin-bottom: -2px;
    }
    .app-header .header-menu .item.selected .dxm-content,
    .app-header .header-menu .item.hovered .dxm-content
    {
        color: inherit;
    }

/* Main Menu */
.header-menu
{
    background-color: white !important;
    border-style: none !important;
    height: 3.13rem;
}

@media (max-width: 576px)
{
    .menu-container .dxm-ltr > div:not(.header-menu)
    {
        width: 100% !important;
    }
    .header-sub-menu
    {
        width: 100% !important;
    }
}

.left-panel.left-panel-collapse .adaptive-logo {
    display: none;
}

.left-panel.left-panel-collapse .adaptive-logo2 {
    display: inline-block !important;
}

.left-panel.left-panel-collapse .dxm-contentText {
    display: none!important;
}

.adaptive-logo2 {
    display: none;
}


.header-sub-menu .item
{
    padding: 12px 7px !important;
}

/* Ellipsis -> Apps Icon */
.header-menu .adaptive-image
{
    background: url('Images/adaptive-menu.svg') no-repeat center;
    width: 16px;
    height: 16px;
    padding: 0 8px;
}
/* Hide item images */
.header-menu.application-menu .item .dxm-content > img
{
    display: none !important;
}

@media (max-width: 720px) /* Change Ellipsis image Apps Icon */
{
    .app-header .menu-container > div
    {
        width: 47px;
    }

    .header-menu .adaptive-image
    {
        background: url('Images/application.svg') no-repeat center;
    }

    /* Show item images */
    .header-menu.application-menu .item .dxm-content > img
    {
        display: inline-block;
    }
}

/* Right area menu */
.header-menu .toggle-item .image
{
    background: url('Images/double.svg') no-repeat center;
}

.header-menu .toggle-item.checked .image
{
    background: url('Images/double-close.svg') no-repeat center;
}

.header-menu .image-item
{
    vertical-align: middle !important;
}

.header-menu .vertically-aligned
{
    font-size: 0;
}

/* Account */
.header-menu .account-background
{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1);
}

.header-menu .account-background div
{
    border-radius: 50%;
}

.header-menu .account-background .empty-image
{
    width: 16px;
    height: 16px;
    margin: 8px;
    display: inline-block;
    background: url('Images/user.svg');
}

.header-menu .account-background .account-image
{
    width: 32px;
    height: 32px;
    font-size: 0.8em;
    font-weight: 600;
    line-height: 32px;
    text-align: center;
    margin: 0 auto;
    display: table;
    background-size: 100%;
}

.user-info .avatar img
{
    float: left;
    height: 43px;
    border-radius: 50%;
}

.user-info .text-container
{
    height: 3.13rem;
    margin-left: 60px;
}

.user-info .text-container .user-name
{
    color: #444444;
    font-size: 1.14em;
}

.user-info .text-container .email
{
    display: block;
    color: #666666;
    font-size: 0.86em;
}

.myaccount-item
{
    background-color: #e4e4e4;
}

/* Left Panel */
.left-panel
{
    border: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    -webkit-overflow-scrolling: touch;
}

    .left-panel > div {
        width:100%!important;
        overflow: hidden!important;
    }

    .leftpanel-section {
        border: none !important;
        background-color: rgba(0, 0, 0, 0.1);
    }

.left-panel-collapse * {
    min-width:auto!important;
}

.section-caption {
    height: 2.69rem;
    line-height: 2.69rem;
    vertical-align: middle;
    margin: 0;
}

.section-caption
{
    border-top: solid 1px #f0f0f0;
    border-bottom: solid 1px #f0f0f0;
}

.left-panel.expand-bar,
.right-panel.expand-bar
{
    border: 0;
}

a.tree-view-node
{
    color: #666666;
    padding-top: 7px !important;
    padding-bottom: 8px !important;
    padding-right: 8px !important;
    border: none !important;
}

a.tree-view-node.hovered
{
    text-decoration: none;
}

.tree-view-elbow
{
    padding-top: 3px;
}

/* Right Panel */
.right-panel
{
    border-left: 1px solid #f0f0f0;
}

.settings-content
{
    padding: 24px 20px;
}

.settings-content h2
{
    color: #494949;
    font-size: 1.3em;
    font-weight: 600;
}

.settings-content p
{
    color: #999999;
}

/* Toolbar */
.page-toolbar-wrapper
{
    position: fixed;
    background-color: white;
    left: 272px;
    right: 0;
    z-index: 1;
}

@media(max-width: 959px) {
    .page-toolbar-wrapper {
        left: 0;
    }
}

.page-toolbar
{
    background-color: rgba(0, 0, 0, 0.1) !important;
    border: none !important;
    font-size: 0.93em !important;
    height: 2.69rem;
}

.page-toolbar .item > h1,
.section-caption
{
    color: #494949;
    font-weight: 600;
    font-style: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 24px;
}

.page-toolbar .item > h1
{
    font-size: 1.46em;
}

.page-toolbar .item > h1
{
    margin: 0;
    padding: 0 17px;
}

.page-toolbar .item .dxm-disabled .dxm-image
{
    opacity: 0.3;
}

@media (max-width: 599px)
{
    .page-toolbar .item > h1
    {
        max-width: 150px;
    }
}

#left-panel-expand-collapse {
    display: inline-block;
    background-size: 9px !important;
    height: 26px;
    width: 15px;
    border: none;
}
    #left-panel-expand-collapse.left-panel-collapse {
        background: url('Images/menu-collapsed_off@2.png') no-repeat right;
    }

#left-panel-expand-collapse.left-panel-collapse:hover {
    background: url('Images/menu-collapsed_on@2.png') no-repeat right;
}

#left-panel-expand-collapse.left-panel-expand {
    background: url('Images/menu-expanded_off@2.png') no-repeat right;
}

    #left-panel-expand-collapse.left-panel-expand:hover {
        background: url('Images/menu-expanded_on@2.png') no-repeat right;
    }

.menu-tableau-de-bord {
    margin-top:20px;
}

/*.menu-tableau-de-bord span {
    margin-left: 0px !important;
}*/

.adaptive-logo img {
    margin-right: 0px !important;
}

.btnBleu {
    border-radius: 15px;
    background-color: #0393C1 !important;
    color: white;
    border: 1px solid #0393C1;
    font-weight: bold;
    transition: 0s !important;
}

.btnBleuLight {
    border-radius: 15px;
    background-color: #0393C1 !important;
    color: white;
    border: 1px solid #0393C1;
    font-family: Raleway;
    font-weight: 300 !important;
    transition: 0s !important;
}

.btnGrisPale {
    border-radius: 5px;
    background-color: #F4F5F9;
    color: #424244;
    font-family: Raleway;
    font-weight: bold;
    font-size: 12px;
}

.btnGris {
    border-radius: 15px;
    background-color: #626262;
    color: white;
    font-family: Raleway;
    font-weight: 300;
    transition: 0s !important;
}

.btnBlanc {
    border-radius: 15px;
    color: #424244 !important;
    background-color: transparent !important;
    border: 1px solid #424244 !important;
    font-weight: bold;
    transition: 0s !important;
}

.btnArrow {
    transition: 0s !important;
}

.btnBlancLight {
    border-radius: 15px;
    color: #424244 !important;
    background-color: transparent !important;
    border: 1px solid #424244 !important;
    font-family: Raleway;
    font-weight: 300 !important;
    transition: 0s !important;
}

.btnRadius {
    border-radius: 15px;
    transition: 0s !important;
}

.title {
    font-family: OpenSans, 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: #424244;
    padding-bottom: 10px;
}

.blueTitle {
    font-family: OpenSans, 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #0393C1;
    padding-bottom: 10px;
}

.blueTitle15 {
    font-family: OpenSans, 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    font-weight: bold;
    font-size: 15px;
    color: #0393C1;
    padding-bottom: 10px;
}

.blackTitle {
    font-family: OpenSans, 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #424244;
    padding-bottom: 10px;
}

.purpleTitle {
    font-family: raleway;
    font-weight: bold;
    font-size: 13px;
    color: #01104d;
    padding-bottom: 10px;
}

.blueSubTitle {
    font-family: raleway;
    color: #0393C1;
    padding-bottom: 30px;
    font-size: 11px;
}

.subTitle {
    font-family: raleway;
    font-weight: 500;
    color: #424244;
    padding-bottom: 20px;
    font-size: 10pt;
}

.regularText {
    font-family: raleway;
    color: #424244;
    padding-bottom: 20px;
    font-size: 13px;
}

.linkGaugeText {
    font-family: raleway;
    color: #424244;
    padding-top: 15px;
    font-size: 13px;
}

.regularText12 {
    font-family: OpenSans, 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    color: #797979;
    padding-bottom: 20px;
    font-size: 12px;
}

.regularTextOpenSans {
    font-family: OpenSans, 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    color: #424244;
    font-size: 13px;
}

.regularText15 {
    font-family: OpenSans, 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    color: #424244;
    padding-bottom: 20px;
    font-size: 15px;
}

.regularTextGrid {
    font-family: OpenSans, 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    color: #424244;
    width: 99%;
}

.boldraleway {
    font-family: raleway !important;
    color: #424244 !important;
    font-weight: bold !important;
}

.hint {
    background-color: #DE2A2B;
    font-size: 10px;
}

.hint > div:after {
    border-right-color: #DE2A2B !important;
}

.hintinfo {
    background-color: #424244;
    font-size: 10px;
    color: #FFFFFF;
    border: 1px solid #424244;
}

    .hintinfo > div:after {
        border-left-color: #424244 !important;
    }

.hintinforight {
    background-color: #424244;
    font-size: 10px;
    color: #FFFFFF;
    border: 1px solid #424244;
}

    .hintinforight > div:after {
        border-right-color: #424244 !important;
    }

.hintinfoblue {
    background-color: #0073C6;
    font-size: 10px;
    color: #FFFFFF;
    border: 1px solid #0073C6;
}

    .hintinfoblue > div:after {
        border-right-color: #0073C6 !important;
    }
    
.dxpc-content {
    display: table-cell !important;
}

.dxbf {
    border-width: 0px !important;
}

/*input:focus {
    background-color: yellow !important;
    color: black !important;
}*/

.cbadn input::selection {
    background-color: transparent;
}

/*2025-01-14 JB : enlevé parce que pas besoin dans les stats, à voir si besoin ailleurs*/
/*.dxeButtonEditSys {
    border-radius: 5px;
}*/

.dxeTextBoxSys {
    border-radius: 5px;
}

#AdvancedSearchPopup_PW-1 .dxeButtonEditSys {
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

#AdvancedSearchPopup_PW-1 .dxeTextBoxSys {
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}

#CurrentPage {
    border-radius: 0px;
}

.importationpadding {
    margin-top: 30px;
}

.blueonhover:hover {
    color: #0393C1 !important;
}

.purpleonhover:hover {
    color: #7673FE !important;
}

[aria-label]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
    height: auto;
}

/*Don't show hint before expand of leftpanelpartial sections. First line for no subsections, second for if the section has them.*/
.dxnb-gr[aria-label]:hover:after,
.dxnb-headerCollapsed[aria-label]:hover:after {
    transition: all 0.1s ease 1s;
}


[aria-label]:after {
    content: attr(aria-label);
    background-color: #424244;
    color: white;
    border-radius: 5px;
    font-size: 9pt;
    font-weight: 300;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 8px 3px 8px;
    top: 35px;
    white-space: nowrap;
    opacity: 0;
    z-index: 99999;
    visibility: hidden;
    height: 0;
}

.cursor[aria-label]:hover:after {
    opacity: 1;
    transition-property: visibility;
    transition-delay: 2s;
    visibility: var(--hidden);
    height: auto;
}

.cursor[aria-label]:after {
    content: attr(aria-label);
    background-color: #424244;
    color: white;
    border-radius: 5px;
    font-size: 9pt;
    font-weight: 300;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 8px 3px 8px;
    top: 35px;
    white-space: nowrap;
    opacity: 0;
    z-index: 99999;
    visibility: hidden;
    height: 0;
}

.left[aria-label]:after {
    left: 0;
    transform: none;
    max-width: var(--clickswidth);
    text-overflow: ellipsis;
    overflow: hidden;
}

.lefttable[aria-label]:after {
    left: 0;
    transform: none;
    max-width: 120%;
    text-overflow: ellipsis;
    overflow: hidden;
}

.max270[aria-label]:after {
    width: 270px;
    white-space: normal;
}

.leftside[aria-label]:after {
    left: -100%;
}

.leftsidemore[aria-label]:after {
    left: -175%;
}

.leftside300[aria-label]:after {
    left: -300%;
}

.leftside310[aria-label]:after {
    left: -310%;
}

.leftside50[aria-label]:after {
    left: -50%;
}

.leftside90[aria-label]:after {
    left: -90%;
}

.leftside200[aria-label]:after {
    left: -200%;
}

.leftside720[aria-label]:after {
    left: -720%;
}

.leftside850[aria-label]:after {
    left: -850%;
}

.leftside650[aria-label]:after {
    left: -650%;
}

.rightside[aria-label]:after {
    left: 350%;
}

.rightside5[aria-label]:after {
    left: 5%;
}

.rightside7[aria-label]:after {
    left: 7%;
}

.rightside85[aria-label]:after {
    left: 85%;
}

.rightside100[aria-label]:after {
    left: 100%;
}

.rightside120[aria-label]:after {
    left: 120%;
}

.rightside400[aria-label]:after {
    left: 400%;
}

.rightside500[aria-label]:after {
    left: 500%;
}

.rightside600[aria-label]:after {
    left: 600%;
}

.top45[aria-label]:after {
    top: 45px;
}

.top30[aria-label]:after {
    top: 30% !important;
}

.top95[aria-label]:after {
    top: 95% !important;
}

.top110[aria-label]:after {
    top: 110px;
}

.top170[aria-label]:after{
    top: 170px;
}

.dxtc-link[aria-label]:after {
    top: 55px;
}

/*Cacher le aria-label du grid. On dirait qu'il faut faire ça manuellement avec DevExtreme*/
.dx-datagrid[aria-label]:after {
    display: none;
}

[aria-label] {
    position: relative;
}

.dxMonthGrid {
    border-width: 0px !important;
}

.dxeCalendarHover_Office365 {
    border-radius: 20px;
}

.dxeCalendarSelected_Office365 {
    border-radius: 20px;
}

.dxeCalendar_Office365 td.dxMonthGridWithWeekNumbers > table > tbody > tr:last-child > td, .dxeCalendar_Office365 td.dxMonthGrid > table > tbody > tr:last-child > td {
    border: none;
}

.dxeCalendarOtherMonth_Office365 {
    visibility: hidden;
}

.dxEditors_edtCalendarPrevYear_Office365 {
    display: none;
}

.dxEditors_edtCalendarNextYear_Office365 {
    display: none;
}

/*.dxMonthGrid table tr:last-child td {
    display: none !important;
}*/

#SubscribersGroupList_CD {
    position: relative;
}

    #SubscribersGroupList_CD > ul > li {
        padding-bottom: 20px;
    }

#GroupsList_CD {
    position: relative;
}

    #GroupsList_CD > ul > li {
        padding-bottom: 20px;
    }

.dxeIRBFocused_Office365 {
    box-shadow: none !important;
}

.dxeCalendarHeader_Office365 span {
    text-transform: uppercase;
}

.dxeDropDownWindow_Office365 {
    background-color: #FFFFFF;
}

.disabledCBItem {
    pointer-events: none;
}

.dxeCalendarDayHeader_Office365 {
    font-weight: bold;
}

.dxtv-elbNoLn {
    display: none;
}

.listbox td {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

/* Pour Problème Google Chrome les listbox n'ouvrent pas.*/
.listboxheight {
    height: 100% !important;
}

    .listboxheight .dxlbd {
        height: 100% !important;
        overflow: visible !important;
        max-height: 300px;
    }

table#SharedLoadingPanel tr:first-child td:first-child {
    width: 35%;
    text-align: right;
}
table#SharedLoadingPanel tr:first-child td:nth-child(2) {
    width: 60%;
    text-align: left;
}

.graphPercentage {
    font-size: 25px;
    font-family: OpenSans, 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif !important;
    font-weight: bold;
    fill: #424244;
}

.dxeBase_Office365 {
    color: #424244;
}

.dxtcLite_Office365 > .dxtc-stripContainer .dxtc-tab a {
    color: #424244;
}

.dxeCalendar_Office365 {
    color: #424244;
}

.dxnbLite_Office365 .dxnb-header, .dxnbLite_Office365 .dxnb-headerCollapsed {
    color: #424244;
}

.dxnbLite_Office365 .dxnb-item a, .dxnbLite_Office365 .dxnb-large a, .dxnbLite_Office365 .dxnb-bullet a {
    color: #424244;
}

.dxnbLite_Office365 .dxnb-header a, .dxnbLite_Office365 .dxnb-headerCollapsed a {
    color: #424244;
}

.nospacegridheader {
    border-right: none !important;
}

#gvContacts .elementvisible {
    overflow: visible !important;
}

.elementvisible {
    overflow: visible !important;
}

/* regular toggle start*/

/* The switch - the box around the slider */
.switch {
    position: absolute;
    display: inline-block;
    width: 28px;
    height: 14px;
    vertical-align: top;
}

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #626262;
    -webkit-transition: .4s;
    transition: .4s;
}

.sliderred {
    background-color: #DE2A2A;
}

.slider:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    top: 2px;
    left: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

    input:checked + .slider:before {
        -webkit-transform: translateX(14px);
        -ms-transform: translateX(14px);
        transform: translateX(14px);
    }

/* Rounded sliders */
.slider.round {
    border-radius: 8px;
}

    .slider.round:before {
        border-radius: 50%;
    }

/* regular toggle end*/

/* relative toggle start*/

/* The switch - the box around the slider */
.switchrelative {
    position: relative;
    display: inline-block;
    top: 1px;
    width: 30px;
    height: 16px;
}

    /* Hide default HTML checkbox */
    .switchrelative input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* The slider */
.sliderrelative {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #626262;
    -webkit-transition: .4s;
    transition: .4s;
}

    .sliderrelative:before {
        position: absolute;
        content: "";
        height: 12px;
        width: 12px;
        top: 2px;
        left: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .sliderrelative {
    background-color: #2196F3;
}

    input:checked + .sliderrelative:before {
        -webkit-transform: translateX(14px);
        -ms-transform: translateX(14px);
        transform: translateX(14px);
    }

/* Rounded sliders */
.sliderrelative.roundrelative {
    border-radius: 8px;
}

.sliderrelative.roundrelative:before {
    border-radius: 50%;
}

/* relative toggle end*/

/* small toggle start*/

/* The switch - the box around the slider */
.switchsmall {
    position: relative;
    display: inline-block;
    top: 3px;
    width: 20px;
    height: 10px;
    margin-right: 5px;
}

    /* Hide default HTML checkbox */
    .switchsmall input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* The slider */
.slidersmall {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #626262;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slidersmall:before {
        position: absolute;
        content: "";
        height: 6px;
        width: 6px;
        top: 2px;
        left: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slidersmall {
    background-color: #2196F3;
}

    input:checked + .slidersmall:before {
        -webkit-transform: translateX(10px);
        -ms-transform: translateX(10px);
        transform: translateX(10px);
    }

/* Rounded sliders */
.slidersmall.roundsmall {
    border-radius: 8px;
}

    .slidersmall.roundsmall:before {
        border-radius: 50%;
    }

/* small toggle end*/

.bluetext{
    font-family: raleway;
    font-weight: 500;
}

.bluetext10 {
    font-size: 10pt;
    color: #0393C1;
    font-weight: normal;
}

.redcheckbox .dxICheckBox_Office365 {
    border: 1px solid #DC041E;
    background: white;
}

.backgroundClip {
    background-clip: content-box;
}

.dx-overlay-content {
    overflow: visible !important;
}

/*Pour enlever le padding-bottom des radiobuttonlist*/
.dxeRadioButtonList_Office365 .dxe {
    padding-bottom: 0px !important;
}

/*Pour les boutons prev de changement de page*/
#Prev {
    background-color: rgb(224, 224, 224) !important;
}

.liststats {
    border-radius: 10px;
    padding: 2px 15px;
    border: 1px solid #E0E0E0;
    margin-bottom: 20px;
}

.fixedpos[aria-label]:after {
    position: fixed !important;
}

/*Pour bouton profile (haut à droite)*/
.dxmLite_Office365 {
    display: inline-block;
}

/*Doit faire les bullet moi-même car combinaison de bullet et plusieurs groupes fait qu'un item ne peut pas être selected on load.*/
.custom-bullet {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: currentColor;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

/*Pour le alt*/
.dxnb-item {
    overflow: visible !important;
}

.full-slider {
    width: 100% !important;
    height: 100% !important;
}

.dx-isl, .dxis-nbBottom, .dxis-nbSlidePanelWrapper {
    width: 100% !important;
}

.dx-isl-content, .dx-isl-imageArea, .dx-isl-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain; /* optional, useful for chart or image scaling */
}

.dxis-nbItem {
    width: 25% !important;
}

.dxis-nbSelectedItem,
.dxis-nbSelectedItem:hover,
.dxis-nbSelectedItem:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

.ellipsis {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}