:root {
    --color-background-body: #F4F7FA;
    --color-background-card:white;
    --color-title-blue:#33778c;
    --color-title-pink: #D73898;
    --color-title-orange: #F25E72;
    --color-subtitle-blue:#33778c;
    --color-subtitle-black:black;
    --button-bg-gradient-pink:linear-gradient(236deg, #CC2DA9 0%, #EA4B7B 100%); 
    --button-bg-pink:#DA3B93;
    --button-bg-gradient-blue:linear-gradient(90deg, #5AB0C9 0%, #3A8FA7 100%);
    --linear-gradient-purple:linear-gradient(236deg, #822184 0%, #B6228C 66.05%);
    --linear-gradient-orange: linear-gradient(236deg, #FF7866 0%, #EA4B7B 100%);
    --border-color-light:#F4F7FA;
    --border-color-grey:#B5B5B5;
    --color-p-blue:#33778c;
    --color-p-black: black;
    --color-p-dark-grey: #4D4D4D;
    --color-p-light-grey: #656565;
    --color-link-hover-blue:#33778c;
    --color-title-purple:#822184;
    --color-error-pink:#e0418c;
    --gradient-purple: linear-gradient(236deg, #BD268A 26.04%, #7B117D 99.48%); 
    --gradient-pink : linear-gradient(236deg, #CC2D79 0%, #E25297 91.15%);
    --gradient-orange: linear-gradient(236deg, #FFC266 0%, #FE5775 100%); 
    --gradient-blue: linear-gradient(236deg, #0AC1A0 0%, #3C97BE 100%);
}


body,
input,
select, 
h2, 
table, 
label,
button{
    font-family: "poppins", sans-serif;
}

body{
    background:var(--color-background-body);
    padding:0 20px 50px;
}

a{
    text-decoration: none;
}
.nowrap{
    text-wrap:nowrap;
}

h1{
    color:var(--color-title-blue);
    font-size:35px;
    font-weight:400;
}


.button{
    color:white;
    background: var(--button-bg-gradient-pink);
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
    padding:7px 16px 9px;
    border-radius:30px;
    border:none;
    font-size:16px;
} 

.button:hover{
    background:var(--button-bg-pink);
    box-shadow: none;
}

hr{
    border-top: 0.5px solid var(--border-color-light);
    border-left: 0.5px solid var(--border-color-light);
}

select:hover, 
.button:hover,
.category:hover,
.reset-filter-btn{
    cursor:pointer;
}

.fa-square-check,
.fa-check{
  color:#2da52d;  
}

.unchecked{
    font-size:21px;
    color:#d6d6d6;
}

td,
th,
p input,
p select,
p,
li,
select,
textarea{
    color:var(--color-p-black);
}


/*********************************/
/*        INPUTS & SELECTOR      */
/*********************************/

/**  General  **/
p input,
p select{
    padding:7px;
    border:1px solid var(--border-color-grey);
    border-radius: 3px;
    width:200px;
}

p select{
    width:216px;
}

label{
    display:inline-block;
}

/** Autocomplete select **/
.select2-container {
    border-radius: 2px;
    min-width:200px!important;
    width:200px;
    border:none;
}

.select2-selection--single{
    padding: 4px 6px;
    height:36px!important;
    border:1px solid var(--border-color-grey);
}

.select2-selection__arrow{
    height:34px!important;
}

/*  Inputs in create and edit forms only */
.create-form p input,
.edit-form p input,
.create-form .select2-container,
.edit-form .select2-container{
    width:200px;
}

.create-form p select{
    width:213px;
}

.create-form p textarea{
    width:210px;
}

/**************************/
/*********  lOGIN  *********/
/**************************/
.login-form .errorlist{
    padding: 0;
}

.login-form .errorlist li{
    list-style : none;
    color:white;
    background:var(--color-error-pink);
    padding: 6px 11px;
    border-radius: 5px;
    font-size:13px;
    max-width:300px;
}


/**************************/
/*********  MENU  *********/
/**************************/

nav{
    display:flex;
    width: 100%;  
    margin-bottom :0 0 30px -20px;
} 

.nav-section a,
.nav-section i,
.category{
    color:var(--color-p-dark-grey);
}

.nav-section{
    position:relative;
}

.category{
    padding: 10px 15px;
    border-radius:30px;
    margin:0 0 5px 0;
}

.category:hover{
    background:var(--color-background-card);
}

.subnav{
    display: none;
    position:absolute;
    background:var(--color-background-card);
    border-radius:7px;
    z-index: 100;
    min-width:100%;
    box-shadow: 2px 2px 11px 0px rgba(0, 0, 0, 0.10);
}
.nav-section:hover .subnav{
    display:inline-block;
}

.subnav a{
    display: block;
    padding: 10px 12px;
    margin: 4px;
    border-radius:7px;
}

.subnav a:hover{
    background: var(--button-bg-gradient-pink);
    color:white;
}


/************************************/
/************  PAGINATION ***********/
/************************************/

.pagination {
    text-align: center;
    margin: 40px 0;
    color:var(--color-p-blue);
}

.pagination-btn{
    padding: 7px 10px;
    border-radius: 3px;
    margin: 0 5px;
    background:white;
    color:#33788c;
}

.pagination-btn:hover{
    color:white;
    background:#33788c;
}


/******************************/
/********  ADD BUTTON  ********/
/******************************/


.one-button-container{
    display: flex;
    flex-direction: column;
    align-items:flex-end;
    position:absolute;
    right: 30px;
    top:85px;
}
.two-buttons-container{
    display: flex;
    flex-direction: column;
    align-items:flex-end;
    position:absolute;
    margin: 4px 0 0 0;
    right: 30px;
    top:32px;
}
.two-buttons-container .add{
    margin-top: 6px;
}

/**************************/
/********  TABLE  ********/
/**************************/

table {
    background:var(--color-background-card);
    border-radius:10px;
    text-align: left;
    border-collapse: collapse;
    width:100%;   
}

table tr:nth-child(1){
    padding:20px;
    border-bottom: 2pt solid var(--border-color-light);  
}

table tr:nth-child(1) th{
    padding:14px 20px 12px;
    font-weight: 500;
    color:var(--color-subtitle-blue);
}


tr {
  border-bottom: 1pt solid  var(--border-color-light);
}

tr:not(:first-child):hover td{
    background:#F4F7FA;
    color:#33788c;
}

td{
    padding: 12px 20px ;
    color: var(--color-p-black);
}

table a{
    color: var(--color-p-black);
}
table a:hover{
    color:var(--color-link-hover-blue);
}

table input[type="checkbox"]{
    width:15px;
    height:15px;
}

/** Buttons in the table **/

table .edit,
table .delete{
    border-radius: 30px;
    padding: 6px 10px; 
}

table .match{
    border-radius: 30px;
    padding:8px 9px 6px 7px;
}

table .pdf{
    border-radius: 5px;
    padding: 6px 5px 6px 9px;
    
}

table .link {
    border-radius: 30px;
    padding: 5px 10px;
    color: #277391;
    background: #f4f7fa;
    border-radius: 30px;
    text-wrap:nowrap;
}

tr:not(:first-child):hover .link{
    background:white;
}


table .link:hover,
tr:not(:first-child):hover .link:hover
{
    color:white;
    background:var(--button-bg-gradient-pink);
    
}

table .delete:hover, 
table .edit:hover,
table .pdf:hover,
table .match:hover
{
    background: white;
    
}

/********** Somme debit credit *********/

.sum_debit_credit{
    padding: 7px 12px;
    background: var(--color-background-card);
    display: inline-block;
    border-radius: 5px;
    margin-bottom: 10px;
    color: var(--color-p-black);
}



/************************************/
/*************  Filters  ***********/
/************************************/
.filter-area{
    margin:0px 0 25px; 
    border-radius:10px;
    background:var(--color-background-card);   
}

.filter-list{
    display: flex;
    border-bottom: 2px solid var(--border-color-light);
    margin-bottom:20px;
}
.filter-title{
    display: block;
    border-bottom: 2pt solid var(--border-color-light);
    padding: 15px 25px 13px;
    margin:0;
    font-weight: 500;
    color:var(--color-subtitle-blue);
}

.filter-list p,
.input-filters p, 
.checkbox-filters p{
    display: flex;
    align-items: center;
    margin:5px 20px 5px 0;
}

.filter-list label,
.input-filters label,
.checkbox-filters label{
    margin: 0 15px 0 0;
    width: 140px;
    font-size:15px;
    color: var(--color-p-light-grey);
}
.filter-buttons{
    display: flex;
    padding:0px 20px 20px;
}
.filter-btn{
    background: linear-gradient(236deg, #33788c 0%, #3a92ab 100%);  
    box-shadow: none;
    margin-right: 7px;
}
.filter-btn:hover{
    background:#33788c;
}

.reset-btn{
    color:var(--color-title-blue);
    padding:7px 16px 9px;
    border-radius:30px;
    border: 1px solid var(--color-title-blue);
    font-size:16px;
}

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

.input-filters{
    display: flex;
    flex-wrap: wrap;
    padding: 15px 5px 15px 25px;
}

.checkbox-filters{
    width:200px;
    padding: 15px 25px 15px;
    border-left:2px solid var(--border-color-light);
}


/*-- Checkbox filters ---*/
p input[type="checkbox" i]{
    width: 18px;
    height: 18px;
    cursor:pointer;
    border:1px solid var(--border-color-grey);
    margin: 1px 10px 0 0;
}

.checkbox-filters p{
    height: 41px;
    margin: 5px 0;
}


/*-- Select view filters ---*/


/*#id_filter_by_view */
.select-view {
    font-size: 16px;
    color: white;
    background: var(--button-bg-gradient-blue);
    border: none;
    top: -1px;
    border-radius:3px;
    padding: 0  10px 0 15px;
    margin-right:7px;
}

#id_filter_by_view{
    background:none;
    border:none;
    height: 100%;
    color:white;
    font-size: 16px;
}
#id_filter_by_view:focus-visible{
    outline:none;
}

#id_filter_by_view option{
    color:black;
}


/***** Error messages in filters ******/
.filter-area .errorlist{
    max-width: 100px;
    padding:0;
    margin: 0 10px 0 0;
}
.filter-area .errorlist li{
    list-style : none;
    color:white;
    background:var(--color-error-pink);
    padding: 5px 10px;
    border-radius: 5px;
    font-size:12px;
}

.filter-area .errors .errorlist{
    max-width: 500px;
    display:flex;
    justify-content:flex-end;
    position: relative;
}
.filter-area .errors .errorlist li{
    width:195px;
    margin-right: 10px;
    border-radius: 3px;
}
.filter-area .errors .errorlist li::before{
    content:'';
    position: absolute;
    top:-4px;
    width: 0px;
    height: 0px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid var(--color-error-pink);
}

/************************************/
/*************  Inputs  ***********/
/************************************/

.input-area{
    margin:0px 0 25px; 
    border-radius:10px;
    background:var(--color-background-card);   
}

.input-title{
    display: block;
    border-bottom: 2pt solid var(--border-color-light);
    padding: 15px 25px 13px;
    margin:0;
    font-weight: 500;
    color:var(--color-subtitle-blue);
}

.input-list{
    margin-bottom:20px;
    padding: 15px 25px 13px;
}

.input-list label{
    width: 150px;
    color:var(--color-p-dark-grey)
}


/***************************************************/
/********  Forms : ADD NEW + EDIT + DELETE *********/
/***************************************************/

.create-form, 
.edit-form,
.delete-form,
.login-form{
    display:flex;
    align-items: center;
}
.create-form form,
.edit-form form,
.delete-form form,
.login-form form{
    background:var(--color-background-card);
    display:inline-block;
    margin: 50px auto;
    padding: 10px 40px 40px;
    border-radius:10px;
    box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.25);
}
.delete-form form{
    max-width:400px;
}

.create-form .button,
.edit-form .button,
.delete-form .button,
.login-form .button{
    display: block;
    margin: 30px auto 0;
}

.create-form label,
.edit-form label,
.login-form label{
    width:150px;
    color:var(--color-p-black);
}

/*--- Create ----*/
.create-form h1{
    color:#D73898;
    text-align:center;
}


/*--- Edit ----*/
.edit-form h1{
    color:var(--color-title-orange);
    text-align:center;
}
.edit-form .button{
    background: var(--linear-gradient-orange);
}

/*--- Delete ---*/
.delete-form h1{
    color:var(--color-title-purple);
    text-align:center;
}
.delete-form .button{
background: var(--linear-gradient-purple);
}

/*--- Login ---*/ 
.login-form form{
    padding: 20px 30px 40px;
}
.login-form h1{
    color:#D73898;
    text-align:center;
}
.login-form input{
    width: 150px;
}
.login-form .button{
    margin: 40px auto 10px;
}

/*---- Display PDF file preview----*/
.add-invoice-form form{
    display: flex;
    flex-direction: row;
    position: relative;
}

.add-invoice-form form::before{
    content:"Aucune facture sélectionnée";
    position:absolute;
    text-align: center;
    top:335px;
    left:151px;
    color:#bbbbbb;
    z-index: 1;
}
.add-invoice-form .preview-area{
    width: 450px;
    height: 650px;
    margin: 30px 30px 0 0; 
    position: relative;
    border: 1px dashed #bbbbbb;
    border-radius:5px;
}

.add-invoice-form #file_preview{
    display: block;
    width: 452px;
    height: 652px;
    border:none;
    z-index: 10;
    position: absolute;
    top:-1px;
    left:-1px;
}

.add-invoice-form .input-area{
    margin: auto 0;
}

/*---- Select & Update PDF and CSV files -----*/
.pdf-input-container,
.csv-input-container{
    display:flex;
}
.pdf-input,
.csv-input{
    max-width: 280px;
}

.pdf-input a,
.csv-input a{
    background:#F4F7FA;
    padding: 5px 7px;
    color:grey;
    font-size:13px;
    border-radius:5px;
    margin: 1px 0 10px 0;
    display: inline-block;
    vertical-align: middle;
    max-height: 39px;
    max-width:262px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.pdf-input a:hover,
.csv-input a:hover{
    background:var(--button-bg-gradient-pink);
    color:white;
}

.csv-input a{
    max-width: 200px;
   
}
.csv-input label{
    font-size:12px;
    width:40px;
    height: 12px;
    cursor: pointer;
   
}
.csv-input input[type="checkbox" i]{
    margin:0;
    width:12px;
    height: 12px;
}



/*************************/
/*     STATUS COLORS     */
/*************************/


.status-tag{
    padding: 3px 10px;
    margin: 9px 0 9px 20px ;
    border-radius:4px;
    display: inline-block;  
}

.customer-status[data-status=INACTIVE],
.promocode-status[data-status=INACTIVE],
.fake-status[data-status=True]{
   background:#F3F3F3;
    color:#B4B4B4;
}
.customer-status[data-status=CLIENT],
.promocode-status[data-status=ACTIVE],
.fake-status[data-status=False]
{
    color:#689C6B;
    background:#CFF5D1;
}
.customer-status[data-status=TESTER]{
    color:#5C9DA7;
    background:#CFF0F5;
}
.customer-status[data-status=OTHER],
.promocode-status[data-status=OTHER]{
    color:#7489B0;
    background:#CFDCF5;
}
.customer-status[data-status=SUSPENDED]{
    color:#D3A03E;
    background:#FFE296;
}


.vat-zone[data-status=France]{
    color:#689C6B;
    background:#CFF5D1;
}
.vat-zone[data-status=EU]{
    color:#5C9DA7;
    background:#CFF0F5;
}
.vat-zone[data-status='Hors EU']{
    color:#D3A03E;
    background:#FFE296;
}

.vat-zone[data-status=multiple]{
    color:#7489B0;
    background:#CFDCF5;
    flex-wrap: wrap;
}

.vat-zone[data-status=inconnu]{
    background:#F3F3F3;
    color:#B4B4B4;
}



/**************************/
/*********  HOME  ********/
/**************************/
.home{
    display:flex;
    justify-content:center;
    flex-wrap: wrap;
    margin:50px 0 0;
}

.section{
    display:flex;
    flex-direction: column;
    flex-grow:1;
    max-width: 320px;
    background: var(--color-background-card);
    margin: 15px;
    padding: 30px;
    border-radius:10px;
    box-shadow: 8px 8px 30px 0px rgba(0, 0, 0, 0.20);

}

.home h1{
    padding: 0px 0 10px 15px;
    margin: 0;
    line-height:1.2;
}

.home .administrative h1{
    background: var(--gradient-purple);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home .customer h1{
   background: var(--gradient-pink);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home .beneficiary h1{
    background: var(--gradient-orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home .device-management h1{
    background: var(--gradient-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home a{
    color:var(--color-p-black);
    padding: 10px 15px;
    border-radius:5px;
}

.home a:hover{
    color:white;
}

.home .administrative a:hover{
    background: var(--gradient-purple);

}
.home .customer a:hover{
    background: var(--gradient-pink);
}
.home .beneficiary a:hover{
    background:  var(--gradient-orange);
}
.home .device-management a:hover{
    background:var(--gradient-blue);
}

.home i{
    width:25px;
}


/*********************************************/
/*********  PAYOUT IMPORT GOCARDLESS  ********/
/*********************************************/

.payout_import label{
    width:220px;
}
.payout_import select{
    width: 350px;
}

.payout_import p input{
       width: 332px;
}


/********************************************************/
/*********  OPBANQUE MATCHING - RECONCILIATION  *********/
/*********             VAT REPORTING            *********/
/********************************************************/
.opbanque_matching h2,
.vat_reporting h2{
    font-size:18px;
    font-weight: 500;
}


.opbanque_details,
.vat_invoiced,
.vat_collected{
    width:auto;
}

.opbanque_details tr:nth-child(1) {
border-bottom: 1pt solid var(--border-color-light);
}

.opbanque_details tr td:nth-child(1){
    font-weight: 500;
    color: var(--color-subtitle-blue);
}


/*** VAT REPORTING ***/
.TVA_reporting_container{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.vat_invoiced{
    min-width: 245px;
}
.vat_collected{
    min-width: 450px;
}





/********************************************************/
/***********    CUSTOMER BALANCE DETAILS      **********/
/********************************************************/

.balance-content {  
    position: relative;
}

.balance-title{
    color:var(--color-subtitle-black);
}
.balance-content h2{
    color:#D93A95;
    font-weight: 500;
    margin:0;
    font-size:32px;
}
.balance-content h3{
  font-size:19px;
    margin: 5px 0 30px;
    font-weight: 500;
    
}
.balance-content .separator{
    border-bottom: 1px solid var(--color-p-black: black);
}

/* Tab */

.balance-content input[name="sections"] {
  left: -9999px;
  position: absolute;
  top: -9999px;
}

.balance-content section label {
    background: var(--color-background-card);
    cursor: pointer;
    display: block;
    position: relative;
    width: 220px;
    padding: 2px 5px;
    z-index:2;
}

.balance-content section:first-child label{
    border-radius: 5px 5px 0 0;
    padding: 5px 5px 2px;
}
.balance-content section:last-child label{
    border-radius: 0 0 5px 5px ;
    padding: 2px 5px 5px;
}

.balance-content label p{
    padding: 11px 16px;
    margin:0;
}

.balance-content label:hover p{
    background: linear-gradient(267deg, #CC2DA9 10.94%, #EA4B7B 90.08%);
    color: white;
    border-radius: 5px;
}
.balance-content input[name="sections"]:checked + label p { 
    background: linear-gradient(267deg, #CC2DA9 10.94%, #EA4B7B 90.08%);
    color: white;
    border-radius: 5px;

}

/* Content */

.balance-content section div {
    display: none;
    margin-left: 260px;
    min-width: 600px;
    position: absolute;  
    top: 0;
}
.balance-content input[name="sections"]:checked ~ div {
  display: block;
}


/***** table design ********/
.balance-content table{
    margin-bottom: 100px;
}

.balance-content table tr:nth-child(1) th {
    color:var(--color-subtitle-black);
}

.balance-content .amount{
    text-align: right;
}

/* Red Tag */
.balance-content .status-tag[data-status="NOK"],
.balance-content .status-tag[data-status="failed"],
.balance-content  .status-tag[data-status="customer_approval_denied"],
.balance-content  .status-tag[data-status="charged_back"]{
    background:#eb4f6b;
    color:#b31733;
}

/* Green Tag  */
.balance-content  .status-tag[data-status="OK"],
.balance-content  .status-tag[data-status="submitted"],
.balance-content  .status-tag[data-status="confirmed"],
.balance-content  .status-tag[data-status="paid_out"]{
    color:#689C6B;
    background:#CFF5D1;
}

/* Grey Tag  */
.balance-content  .status-tag[data-status="pending_submission"],
.balance-content  .status-tag[data-status="pending_customer_approval"]{
    color:#585858;
    background:#D6D6D6;
}

/* Orange Tag  */
.balance-content  .status-tag[data-status="cancelled"]{
    color:#DC6523;
    background:#FF9D66;
}


/************************************************/
/***********    CLONE DEVICE FORM      **********/
/************************************************/

.clone_device .old-device,
.clone_device .new-device{
    max-width: 500px;
    
}
.old-new-devices-container{
    display: flex;
    gap:30px;
}

.select-environment-area,
.elements-to-copy-area{
    max-width:863px;
}

.elements-to-copy-area .input-list{
    display:flex;
    gap : 30px;
}

@media(max-width:650px){
    .old-new-devices-container,
    .elements-to-copy-area .input-list{
    flex-direction:column;
    gap:0px;
    }
    
    .clone_device .old-device,
    .clone_device .new-device{
    max-width:100%;
    }
}

/************************************************/
/***********       SEND SMS FORM       **********/
/***********       & ATTRIBUTION       **********/
/************************************************/

.send-sms-container,
.attribution-container{
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    max-width: 1200px;
    gap : 50px;
    margin: auto;
}
.attribution-container{
    margin-top:30px;
}

.sms-history,
.attribution-history{
    width:1200px;
    margin-top: 50px;
}

.sms-history th {
    font-weight: normal;
    padding: 3px 20px;
}

.attribution-container .date{
    background:var(--color-background-body);
    color:var(--color-subtitle-blue);
    padding:25px 2px 5px;
}

#id_is_second_device {
    width:18px;
    margin:0;
}
p:has(#id_is_second_device){
    display:flex;
}


.send-sms-container .create-form,
.attribution-container .create-form{
    width: 355px;
}
.send-sms-container .create-form,
.attribution-container .create-form{
    label{
        width:100%;
    }
    p input{
        width:261px;
    }
    textarea{
        width:272px;
    }
    p select,
    .select2-selection{
        width:276px;
        max-width: 100%;
    }
}


@media (max-width:1040px){
@media (max-width:1040px)
    .send-sms-container,
    .attribution-container{  
        flex-direction: column-reverse;
        align-items: center;
    }
    .sms-history,
    .attribution-history{
        margin-top: 0px;
        width:100%;
    }
    
    .send-sms-container .create-form form{
        margin : 20px 0 0 0;
    }
}

@media (min-width:1041px){
    .send-sms-container .create-form label,
    .attribution-container .create-form label,
    {
        width: auto;
    }
    .attribution-history .input-filters{
        flex-wrap: nowrap;
    }
}

/*************************/
/*     HTML content      */
/*************************/
.html-content .html{
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 700px;
    white-space: nowrap;
}




/*************************/
/*       DARK MODE       */
/*************************/

.dark_mode-toggle{
    margin-left:auto;
}
#dark_mode-toggle{
   display: none;
}
.dark_mode-label{
    cursor:pointer;
    color:var(--color-p-dark-grey);
}   
.dark-mode{
    --color-background-body: black;
    --color-background-card:#1b2930;
    --border-color-light: black;
    --color-title-blue:#49abc7;
    --color-title-pink: #db3496;
    --color-title-purple:#b6228c;
    --gradient-purple: linear-gradient(236deg, #BD268A 26.04%, #be08c1 99.48%);
    --color-subtitle-black:white;
    --color-subtitle-blue:white;
    --color-p-black: #bfbfbf;
    --color-p-dark-grey:#bfbfbf;
    --color-p-light-grey:#bfbfbf;
    --color-link-hover-blue:white;
   
    table .link{
        color:#bfbfbf;
    }

    table .link,
    table .edit,
    table .delete,
    tr:not(:first-child):hover .link{
       background:#575656;
    }
    
 
    .select2-container--default .select2-selection .select2-selection__rendered {
        color:#bfbfbf!important;
    }
    
    /* Inputs backgrounds */
    p input,
    p select,
    select,
    textarea,
    .select2-container--default .select2-selection{
        background-color:#374045!important;
        border:none!important;
    }
    #id_filter_by_view{
         background:none!important;
    }
 
    tr:not(:first-child):hover td{
        background:#3e4a51;
        color:white;
    }
    
}


/***************************************/
/***********       MAIL      **********/
/***************************************/


.mail-detail-container{
    border:2px solid white;
    border-radius:5px;
    overflow:hidden;
    background:white;
    box-shadow:  8px 14px 30px -5px rgba(0, 0, 0, 0.30);
    max-width: 800px;
    margin:auto;
}

.mail-infos{
    padding: 10px 30px;
}
.mail-infos .infos{
  color: grey;
}
.mail-preview tr,
.mail-preview table tr:nth-child(1){
    border-bottom: none;
}