/* ----------------------------------------------- GENERAL CSS--------------------------------------------------------*/


/* SPY SCHEMA  :

*************************************************
SIDE BAR 	* TOPBAR HEIGHT : 70 px
WIDTH 239px *************************************
			* STANDARD PANEL HEADER HEIGHT : 100 px
			*************************************
			* GRID HEIGHT : calc(100vh - 170px)
			*
			* INCLUDING PAGER AND FOOTER
			***************************************

            100 vh means ' the actual screen height'
*/


/* Hiding main body scrolling bar */

body {
    /* overflow: hidden; */
    scrollbar-width: thin;
}


/* Default FONT settings */

body,
div,
body p strong,
.alert,
.sidebar .sidebar-inner .nav-sidebar>li>a,
.widget-progress-bar .title,
input,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h1.light,
h2.light,
h3.light,
h4.light,
h5.light,
.h1,
.topbar .header-left .topnav .mmenu .title,
.topbar .header-left .topnav .mmenu .title strong,
.topbar .header-right .header-menu .dropdown-menu .dropdown-header,
.topbar .header-right .header-menu .dropdown-menu .dropdown-header p,
.topbar .header-right .header-menu .dropdown-menu .dropdown-footer,
.sidebar .logopanel h1,
.sidebar .sidebar-inner .nav-sidebar .children>li>a,
.sidebar .sidebar-inner .nav-sidebar>li>a,
.sidebar .sidebar-inner .sidebar-widgets a,
.sidebar .sidebar-inner .sidebar-widgets .charts-sidebar.progress-chart .sidebar-chart-title,
.progress-chart .sidebar-chart-number,
.sidebar-hover .topnav .logopanel2 h1,
#quickview-sidebar .quickview .tab-content #settings .settings-chart .chart-title,
#quickview-sidebar .quickview .tab-content #settings .progress-chart .settings-chart .chart-.number,
.main-content .page-content h3,
.main-content .page-content .panel .panel-header h3,
.main-content .page-content .panel .panel-title,
.main-content .page-content .panel-content h3,
.main-content .page-content>.footer .copyright span.copyright,
.main-content .page-content>div>.footer .copyright span.copyright,
.main-content .footer .copyright span.copyright,
.todo-list li .todo-tags,
.widget-progress-bar .title,
.widget-infobox .right .pull-left,
.widget-infobox .right .pull-right,
.widget-info .right .number,
.animation_title,
.error-page h1,
.account-copyright,
#account-builder h3,
.account2 .account-info h3,
.layouts .toggle-layout>div,
.layouts .toggle-layout>div strong,
.page-profil .profil-content .item .user .location,
.item .user .date,
.coming-soon #coming-builder h3 {
    font-family: Lato, "Helvetica Neue", sans-serif !important;
    font-weight: normal;
}

button,
select,
html,
textarea,
input {
    font-family: Lato, "Helvetica Neue", sans-serif !important;
}

body,
.sidebar .sidebar-inner .nav-sidebar>li>a {
    letter-spacing: 0px;
}

fieldset {
    border: 1px solid #c6c2c2;
    margin-top: 20px;
    padding: 20px;
    border-radius: 5px;
}

.table>thead>tr>th {
    vertical-align: bottom;
    border-bottom: 2px solid #E7E8F2;
}

.table>tbody>tr>td {
    vertical-align: middle;
    border-bottom: none;
}

.table>tbody+tbody {
    border-top: none;
}

.display-inline-block {
  display: inline-block;
}

.display-inline {
  display: inline;
}

.display-block {
  display: block;
}

/* PAGE CONTENT EST LA CLASSE PLACEE SUR UI VIEW DANS INDEX.HTML . CES 2 CSS SURCLASSENT TOUT LES CSS DE TOUTE LES VUES POUR ENLEVER LE PADDING EXCESSIF*/

.bg-clean, .bg-clean>section,
.bg-clean .main-content,
.bg-clean .main-content .page-content,
.bg-clean .sidebar-mailbox.sidebar .sidebar-inner .nav-sidebar>li.active>a,
.bg-clean .sidebar-mailbox.sidebar .nav-sidebar>li.active>a:hover,
.bg-clean .sidebar-mailbox.sidebar .nav-sidebar>li.active>a:focus {
    background: white;
}

.main-content .page-content {
    background: white;
    margin-top: 70px;
    /* overflow: hidden; */
    padding: 0px 0px 0px 0px;
    position: relative;
    height: 100%;
}

.main-content .page-content .panel-content {
    padding: 20px 30px 0px 30px;
}

.main-content .page-content  .content-header {
    display: block;
    height: auto;
    z-index: 2;
    /* min-height: 110px;
    max-height: 110px; */
    padding: 15px 30px 15px 30px !important;
    border-bottom: 1px solid lightgray;
}

.main-content .page-content  .content-container {
  padding: 20px 30px 0px 30px;
  min-height: 900px !important;
}


.main-content .page-content .page-grid {
    background: #ffffff;
    color: #5b5b5b;
    margin-bottom: 20px;
    min-height: 30px;
    position: relative;
}


.main-content .page-content .page-grid .page-grid-content {
    padding: 20px 30px 0px 30px;
    min-height: 900px !important;
}

.main-content .page-content .page-grid .page-grid-content .grid {
  height: 910px !important;
}

/* ------------------------------------------------------------------------ VIEWS CLASSES ------------------------------------------- */


/*
Français :

Suite à différentes essais, je suis parvenu à la conception de classes CSS que l'on doit appliquer sur une vue, en fonction de la taille du panel header.
Le but est de conserver le pager toujours visible  en bas de l'écran, de manière à ce que ce soit facile sur une tablette 10 " et que l'agrément utilisateur soies plus grand .
IL existe cependant une classe spy-xxl-panel-view  qui s'inspire de la première version desktop de spyCommerce, et qui permet d'avoir un scroller, et donc d'ajouter autant de
divs que l'on veut dans la vue.
*** Peut être existe-t-il une meilleure solution, plus simple ... ****

English :
Following different tests, I have arrived at the design of classes that must be applied to a view, depending on the size of the header panel.
The goal is to keep the pager always visible at the bottom of the screen, so that it is easy on a 10 "tablet.
There is however a spy-xxl-panel-view class which is inspired by the first desktop version of spyCommerce, and which allows you to have a scroller, and therefore to add as many
divs you want in the view.

TUTORIAL POUR CREER UNE NOUVELLE VUE AVEC CE SYSTEME :

1. Choisir la taille du panel header : xs , md, xl, ou xxl , ou alors pas de panel header si cest un dahsboard , affecter la class à la div initiale dans la vue ..
2. Si on a choisi spy-xs-panel-view, alors, ui grid s'adaptera en fonction de la taille de l'écran , par contre, on ne peut rien mettre en dessous de ui grid . l'avantage est qu'on ne voit aucun ascenceur qui gène l'agrément utilisateur.
3. Si on a choisi spy-xxl-panel-view , alors, ui grid s'adaptera aussi , mais on a de la place pour ajouter d'autres div en dessous et il y a 2 ascenceurs.
4. Si on a choisi spy-dashboard-view , (une vue de type dashboard) , alors, on place autant de 'col-md-x' que l'on veut dans la vue, c'est un infinite scroll.

*/


/* XS SIZE PANEL HEADER VIEWS  */

.spy-xs-panel-view {
    /* margin-top: 70px !important; */
    padding: 0px;
    overflow: hidden;
    /* height: 100vh; */
    /* overflow-x: hidden;
    overflow-y: auto; */

}

.spy-xs-panel-view .panel-header {
    min-height: 110px;
    max-height: 110px;
    padding: 14px 30px 0px 30px !important;
    border-bottom: 1px solid lightgray;
}

.spy-xs-panel-view .panel-content {
    min-height: 900px !important;
}

.spy-xs-panel-view .grid {
    /* height: calc(100vh - 225px); */
    /* height: auto; */
    /* padding: 20px 0 0 0; */
    /* height: 900px; */
}



/* MD SIZE PANEL HEADER VIEWS  */

.spy-md-panel-view {
    margin-top: 70px !important;
    padding: 0px;
}

.spy-md-panel-view .panel-header {
    min-height: 170px;
    max-height: 170px;
    padding: 5px 30px 0px 30px !important;
    /* overflow: auto !important; */
}

.spy-md-panel-view .grid {
    height: calc(100vh - 240px);
    padding: 0px 30px 0px 30px;
}


/* XL SIZE PANEL HEADER VIEWS  */

.spy-xl-panel-view {
    margin-top: 70px !important;
    padding: 0px;
}

.spy-xl-panel-view .panel-header {
    min-height: 180px;
    max-height: 240px;
    padding: 5px 20px 0px 30px !important;
    overflow: auto !important;
}

.spy-xl-panel-view .grid {
    height: calc(100vh - 310px);
    padding: 0px 30px 0px 30px;
}


/* XXL INFINITE SIZE PANEL HEADER VIEWS  */

.spy-xxl-panel-view {
    margin-top: 70px !important;
    padding: 0px !important;
    overflow: auto;
    /*  Needed !*/
    height: 100vh;
}

.spy-xxl-panel-view .panel-header {
    min-height: 100px;
    max-height: 100%;
    padding: 6px 30px 6px 30px !important;
}

.spy-xxl-panel-view .panel-content {
    min-height: 900px !important;
    padding: 0px 15px 60px 15px !important;
}

.spy-xxl-panel-view .grid {
    height: calc(100vh - 275px);
    padding: 0px 25px 0px 25px;
}


/*  DASHBOARD VIEWS */

.spy-dashboard-view {
    padding: 30px 30px 30px 30px !important;
    overflow: auto;
    /*  Needed !*/
    height: 100vh;
}
.tp-name {
    height: 16px;
    width: 150px;
    color: #282250;
    font-family: Lato;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: -0.2px;
    line-height: 19px;
}

.tp-count {
    height: 16px;
    width: 150px;
    color: #8A8CAA;
    font-family: Lato;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: -0.13px;
    line-height: 12px;
}

.logo-tp {
    font-size: 12px;
    text-align: center;
}
/* .logo-svg-chart {
    vertical-align: unset;
} */

.bar-tp {
    /* height: 1px;
    float:left;
    border-radius: 10px; */
}
.tp-bar-div {
    position: relative;

}
.spy-mar-le-3 {
    margin-left: 3px;
}

.container-tp-chart {
  height: 3px;
  border-radius: 100%;
  width: 100%;
  display: inline-flex;
}

/* .bar-div {
    height: 15px;
    border-radius: 5px;
    display: inline-block;
} */

.samePriceColor {
    border: 2px solid #5A8DEE;
    background-color: #5A8DEE;
}

.expensivePriceColor {
    border: 2px solid #FA6B6B;
    background-color: #FA6B6B;
}

.cheapPriceColor {
    border: 2px solid #20BBA6;
    background-color: #20BBA6;
}


ul.tp-pop-over-ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.tp-pop-over-ul>p {
  margin-bottom: -4px;
}

ul.tp-pop-over-ul>li {
  text-indent: -.7em;
  padding-left: 1em;
  margin-bottom: 0px;
  line-height: 14px;
}

ul.tp-pop-over-ul>li>span {
  margin-left: 3px;
  font-size: 11px;
}
.pop-up-tp{
  border: 1px solid #5A8DEE;
  padding: 3px;
}

.pop-up-tp>.popover-inner>.popover-content {
  padding: 0px;
}

li.cheapPriceColorTp::before {
  content: "•";
  color: #20BBA6;
  font-size: 13px;
}
li.samePriceColorTp::before {
  content: "•";
  color: #5A8DEE;
  font-size: 13px;
}
li.expensivePriceColorTp::before {
  content: "•";
  color: #FA6B6B;
  font-size: 13px;
}


/*  AUTO OVERFLOW  + NO PADDING VIEWS */

.spy-auto-overflow-no-padding-view {
    margin-top: 70px !important;
    padding: 0px 0px 0px 0px !important;
    overflow: auto;
    /*  Needed !*/
    height: 100vh;
}


/* OTHERS */


/* header is old and wont be there no more when the customizing is finished, Uses panel-header instead inside views. */

.header {
    margin-top: 70px !important;
}


/* ----------------------------------------------- LOGIN LOADER  ----------------------------------------------------------*/

.spy-loader {
    width: 24px;
    padding-bottom: 2px;
    mix-blend-mode: multiply;
    /* float: right; */
    position: absolute;
    margin-left: 30px;
}


/* ----------------------------------------------- NG-GRID SCROLLBARS ----------------------------------------------------------*/


/* THINNER NG GRID SCROLLBARS */

/* FOR ui-grid scrollbar */

.ui-grid-viewport::-webkit-scrollbar-track {
    -webkit-box-shadow: unset;
    border-radius: 3.5px;
    background-color: white;
}

.ui-grid-viewport::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: #F5F5F5;

}

.ui-grid-viewport::-webkit-scrollbar-thumb {
    border-radius: 3.5px;
    -webkit-box-shadow: unset;
    background-color: #E7E8F2;
}

.ui-grid-viewport::-webkit-scrollbar-corner {
    background: none;

}

/* FOR CHROME */

/* ::-webkit-scrollbar {
    height: 12px;
    width: 12px;
    background: #e7e8f2;
}

::-webkit-scrollbar-thumb {
    background: #e7e8f2;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
    background: #e7e8f2;
} */

::-webkit-scrollbar-track {
    -webkit-box-shadow: unset;
    border-radius: 3.5px;
    background-color: white;
}

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: #F5F5F5;

}

::-webkit-scrollbar-thumb {
    border-radius: 3.5px;
    -webkit-box-shadow: unset;
    background-color: #E7E8F2;
}

::-webkit-scrollbar-corner {
    background: none;

}



/* ----------------------------------------------- TOPBAR  -----------------------------------------------*/

/* .user-image-missing {
    margin-top: 15px !important;
    display: none !important;
} */

.topbar {
    height: 70px;
}

.topbar,
.fixed-topbar .topbar {
    -moz-box-shadow: none;
    box-shadow: none;
    border-bottom: 1px solid lightgrey;
}

.topbar .header-right .header-menu li.dropdown:hover {
    background-color: #eeeff7;
}

.topbar .header-left .topnav .menutoggle {
    background: none;
    color: #2b2e33;
    cursor: pointer;
    float: left;
    font-size: 22px;
    height: 50px;
    position: relative;
    text-decoration: none !important;
    width: 50px;
    padding-top: 28px;
    margin-top: 11px;
}

.topbar .header-right .header-menu .dropdown-menu {
    top: 73px;
}

.topbar .header-right .header-menu .dropdown-menu:after {
    border-bottom: 6px solid #727273;
    border-left: 6px solid rgba(0, 0, 0, 0);
    border-right: 6px solid rgba(0, 0, 0, 0);
}

.topbar .header-right .header-menu.navbar-nav>li>a {
    height: 70px !important;
    /* background-color: white !important; */
}

.topbar .header-right .header-menu>li>a>span:not(.badge) {
    line-height: 68px !important;
}

.topbar .header-right .header-menu #user-header img {
  width: 56px;
  height: 56px;
  box-shadow: 0 2px 12px 0 #E7E8F2;
  float: left;
  margin-right: 6px;
  margin-top: 6px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  object-fit: contain;
}

img.avatar {
  width: 56px;
  height: 56px;
  box-shadow: 0 2px 12px 0 #E7E8F2;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  object-fit: contain;
}

.topbar .header-right .header-menu #user-header .dropdown-menu li a {
    background: #fff;
    color: #282250;
    display: block;
    font-size: 13px;
    padding: 10px 12px;
}

.topbar .header-right .header-menu #user-header .dropdown-menu li a:hover {
    color: #282250;
}

.topbar .header-right .header-menu>li>a>i {
    margin-top: 24px;
}

.topbar .header-right .header-menu #language-header {
    margin-right: 0;
}

.topbar .header-right .header-menu #language-header .dropdown-menu {
    max-width: 140px !important;
    min-width: 70px !important;
    width: 75px !important;
}

/* .topbar .header-right .header-menu.navbar-nav>li>a {
    height: 69px !important;
    background-color: white !important;
}

.topbar .nav>li>a {
    position: relative;
    display: block;
    padding: 4px 10px;
    padding-top: 17px;
    padding-bottom: 17px;
}

.topbar .header-right .header-menu>li>a>i {
    display: block;
    float: left;
    margin-top: 20px;
}

.topbar .header-right .header-menu>li>a>span:not(.badge) {
    margin-top: 25px;
}

.topbar .header-right .header-menu #user-header img {
    float: left;
    margin-right: 20px;
    margin-top: 18px;
    width: auto;
    height: auto;
    max-height: 50%;
    max-width: 100%;
    background-size: cover;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 92%;
} */

.topbar .header-right .header-menu #questions {
    border-left: 2px solid #eeeff7;
    border-right: 2px solid #eeeff7;
}

.breadcrumb {
    padding: 22px 0px !important;
    margin-bottom: 0px !important;
    list-style: none;
    background-color: white !important;
    border-radius: 4px;
    width: 550px;
    height: 69px;
}

a,
a:hover,
a:focus {
    color: #282250;
}


/* ----------------------------------------------- FOOTER  -----------------------------------------------*/

.main-content .footer .copyright a {
    color: #282250;
    height: 10px !important;
}

.main-content .footer .copyright {
    border-top: 1px solid rgba(12, 12, 12, 0.07);
    padding: 0px 0 !important;
    z-index: 15;
}


/* This is a hack, so the footer appears inside of the ng-grid pager div . */

.footer p {
    margin: -50px 0 10px;
    margin-bottom: 10px;
}

/* -----------------------------------------------  SPY MARGIN BOTTOM-----------------------------------------------*/
/* USEFULL ON TABS INFINITE SCROLL VIEWS WITH SCROLLBARS */

.spy-margin-bottom-xs{
    height: calc(10%)  ;
}

.spy-margin-bottom-md{
    height: calc(15%)  ;
}
.spy-margin-bottom-l{
    height: calc(20%) ;
}


/* Box shadow*/
.box-shadow-top {
    box-shadow: 0 0 0 1px rgba(63,63,68,0.05), 0 1px 3px 0 rgba(63,63,68,0.15);
}



/* ********************************************** SPYCOMMERCE COLORS ************************************************************* */

.spyWhite {
    color: white !important;
}

.spyGrey {
    /* color: #757576 !important; */
    color: #727273 !important;
    fill: #727273 !important;
}

.spyGreyDark {
  color: #A7A9C0 !important;
}

.spyGray {
  color: #8A8CAA;
}

.spyViolet {
    color: #282250 !important;
    fill: #282250 !important;
}

.spyOrange {
    color: #f38613 !important;
}

.spyGreen {
    color: #20bba6 !important;
}

.spyBlue {
    color: #5a8dee !important;
}

.spyRed {
    color: #fa6b6b !important;
}

.spyBlack {
    color: black !important;
}

.spyBackgroundSelected {
  background-color: #f7f7fb;
}

.spyBackgroundGrey {
    background-color: #727273 !important;
}

.spyBackgroundLightGrey {
    background-color: #e7e8f2 !important;
}
.spyBackgroundGreyDark {
  background-color: #EEEFF7 !important;
}

.spyBackgroundViolet {
    background-color: #282250 !important;
}

.spyBackgroundGreen {
    background-color: #20bba6 !important;
    padding: 5px;
    border-radius: 10px;
}

.spyBackgroundLightGreen {
    background-color: #bdebe4 !important;
}

.spyBackgroundBlue {
    background-color: #5a8dee !important;
}

.spyBackgroundLightBlue {
    background-color: #e2ecff !important;
}

.spyBackgroundRed {
    background-color: #fa6b6b !important;
}

.spyBackgroundOrange {
    background-color: #f38613 !important;
}

.spyBackgroundLightRed {
    background-color: #fdd3d3 !important;
}

.spyBackgroundWhite {
    background-color: white !important;
}


/* *********************************************** SPYCOMMERCE FONTS ************************************************************* */


/* REGULAR  */

.spy-regularFont-xxl {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -0.4px;
}

.spy-regularFont-xl {
    font-size: 26px;
}

.spy-regularFont-l {
    font-size: 18px;
    line-height: 22px !important;
    font-weight: normal !important;
}

.spy-regularFont-md {
    font-size: 16px;
    line-height: 22px !important;
    font-weight: normal !important;
}

.spy-regularFont-xs {
    font-size: 14px;
    font-weight: normal !important;
}

.spy-regularFont-xxs {
    font-size: 12px;
    font-weight: normal !important;
}

.spy-regularFont-xxs-small {
    font-size: 10px;
    font-weight: normal !important;
}


/* UPPERCASE */

.spy-uppercaseFont-xl {
    font-size: 26px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: none !important;
}

.spy-uppercaseFont-md {
    font-size: 16px  !important;
    font-weight: bold  !important;
    text-transform: uppercase  !important;
    letter-spacing: none !important;
}

.spy-uppercaseFont-xs {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: none !important;
}

.spy-uppercaseFont-12, .spy-uppercaseFont-xxs {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: none !important;
}

.spy-uppercaseFont-xxs-small {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: none !important;
}


/* NUMBERS  */

.spy-numberFont-xl {
    color: #282250;
    font-size: 32px;
    font-weight: 900;
    /* line-height: 0px; */
}

.spy-numberFont-md {
    font-family: Lato;
    font-size: 16px;
    font-weight: 900;
    /* line-height: 0px; */
}

.spy-numberFont-countUp-xl {
    font-family: Lato;
    font-size: 28px;
    font-weight: 900;
    line-height: 34px;
}

.form-input-text {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    font-family: Lato;
    font-size: 14px;
    font-weight: normal;
}


/* *********************************************** SPYCOMMERCE BUTTONS ************************************************************* */


/* BOOTSTRAP SURCLASSING BTN COLORS */

.btn-blue {
    background-color: #5a8dee !important;
}

.btn-blue:hover {
    background-color: #5a8dee !important;
}

.btn-success {
    background-color: #20bba6!important;
}

.btn-success:hover {
    background-color: #20bba6!important;
}


/* BOOTSTRAP SURCLASSING BTN-GROUP */

.btn-group,
.btn-group-vertical {
    position: relative;
    border-radius: none !important;
    margin: none !important;
    box-shadow: none !important;
    transition: none !important;
}


/* ----------------------------------------------- SPY BUTTON XL -----------------------------------------------*/

.spy-button-xl {
    box-sizing: border-box;
    height: 46px;
    width: 280px;
    border: 1px solid #282250;
    border-radius: 25px;
    color: #282250;
    background: white;
    transition: 0.5s;
    padding: 0px 15px 0px 15px;
}

.spy-button-xl:hover, .spy-button-xl.ng-selected {
    background-color: #282250;
    color: white;
    fill: white !important;
}

.spy-button-xl.ng-selected:hover {
  color: #282250;
  background: white;
}


/* ----------------------------------------------- SPY BUTTON MD  -----------------------------------------------*/

.spy-button-md, .spy-button-md-dark {
    box-sizing: border-box;
    border: 1px solid #282250;
    background-color: #fff;
    border-bottom-left-radius: 100px;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    -webkit-border-radius: 100px;
    height: 35px;
    /* width: 14vw; */
    width: auto;
    border-radius: 18px;
    background-color: white;
    color: #282250;
    font-family: Lato;
    font-size: 14px;
    font-weight: bold;
    line-height: 17px;
    text-align: center;
    /* text-transform: uppercase; */
    transition: 0.5s;
    padding: 0px 10px 0px 10px;
}

.spy-button-md-dark {
    background-color: #282250;
    color: white !important;
}

.spy-button-md:hover, .spy-button-md.ng-selected {
    background-color: #282250;
    color: white !important;
    border-color: white;
}
.spy-button-md.ng-selected:hover {
  color: #282250 !important;
  background: white !important;
  border-color: #282250 !important;
}

.spy-button-md.spyRed:hover,.spy-button-md.spyRed.ng-selected {
    background-color: #fa6b6b;
    color: white !important;
}


/* ----------------------------------------------- SPY BUTTON XS -----------------------------------------------*/

.spy-button-xs {
    box-sizing: border-box;
    border: 1px solid grey;
    border-bottom-left-radius: 100px;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    -webkit-border-radius: 100px;
    height: 26px;
    width: 51px;
    border-radius: 18px;
    background-color: transparent;
    text-align: center;
    transition: 0.5s;
}

.spy-button-xs:hover, .spy-button-xs.ng-selected {
    /* box-shadow: 3px 3px 3px lightgrey;
	transition: box-shadow 0.3s ease-in-out; */
    background-color: #282250;
    color: white !important;
}

.spy-button-xs.seeMore {
  border: 1px solid #A7A9C0;
  color: #8A8CAA;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  right: 0;
  bottom: 8px;
}


/* MAIN SPY COMMERCE FILTER BIG  BUTTON */

.spy-main-filter-button {
    margin-top: 10px;
    padding: 9px;
    width: 241px;
    height: 51px;
}


/* .spy-main-filter-button-chosen {
    background-color: red !important;
}
 */

 /* button .fa-trash-alt, .trash-link {
     font-size: 20px;
     display: inline-block;
     color: #fa6b6b !important;
 } */


/* -----------------------------------------------  SPY BORDERS-----------------------------------------------*/

.spy-border-red {
    border: 1px solid #fa6b6b;
}

.spy-border-top-grey {
  border-top: 1px solid #E7E8F2;
}

.spy-border-bottom-grey  {
  border-bottom: 1px solid #E7E8F2;
}

.spy-border-left-grey {
  border-left: 1px solid #E7E8F2;
}

.spy-border-right-grey  {
  border-right: 1px solid #E7E8F2;
}

/* -----------------------------------------------  SPY INPUTS -----------------------------------------------*/

.spy-input, .spy-input-xl,.spy-input-l,
.spy-input-md, .spy-input-xs {
  color: #282250;
  font-family: Lato;
  letter-spacing: -0.26px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 5px !important;
  text-align: left;
  padding: 0 0 0 5px;
  height: 35px;
  border: 1px solid #282250;
}

.spy-input-xl {
    width: 100%;
}

.spy-input-l {
    width: 100px !important;
}

.spy-input-md {
    width: 65px !important;
}

.spy-input-xs {
    width: 35px !important;
}


.spy-input-placeholder-greyDark::-webkit-input-placeholder {  /* Chrome/Opera/Safari */
    color: #A7A9C0 !important;
}

.spy-input-placeholder-greyDark::-moz-placeholder { /* Firefox 19+ */
    color: #A7A9C0 !important;
}

.spy-input-placeholder-greyDark:-moz-placeholder { /* Firefox 18- */
    color: #A7A9C0 !important;
}

.spy-input-placeholder-greyDark:-ms-input-placeholder { /* IE 10+ */
    color: #A7A9C0 !important;
}


/* -----------------------------------------------  SPY SELECTS -----------------------------------------------*/

.spy-select, .spy-select-xl,.spy-select-l,
.spy-select-md, .spy-select-xs {
  line-height: 17px;
  width: auto !important;
  font-family: Lato !important;
  letter-spacing: none !important;
  -webkit-border-radius: 5px !important;
  -moz-border-radius: 5px !important;
  border-radius: 5px !important;
  height: 35px;
  border: 1px solid #282250;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: white;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23282250' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 5px;
  cursor: pointer;
  padding: 0 30px 0 10px;
  width: auto !important;

}

.spy-select-purple {
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23282250' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
}

.spy-select-grey {
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23a7a9c0' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") !important;
}

/* https://stackoverflow.com/questions/14218307/select-arrow-style-change */

/* .spy-select-xl {
    width: auto !important;
}

.spy-select-xl:hover {
    background-color: white !important;
}

.spy-select-l {
    width: 180px !important;
}

.spy-select-md {
    width: 110px !important;
} */

.spy-select-xs {
    width: 35px !important;
}

select:hover,
select:focus {
    background-color: white;
    outline: 0px !important;
    -webkit-appearance: button-arrow-down !important;
}

option[selected=selected] {
    /* Styles pour tout élément OPTION ayant un attribut
		selected avec pour valeur "selected" */
    background-color: white !important;
}


/* ----------------------------------------------- SPY FLEX WIDGETS PARAMS -----------------------------------------------*/

.flex-item {
    flex-basis: 32%;
}

.flex-item-auto {
    flex-basis: auto;
}

.flex-products {
    display: flex;
    /* justify-content: unsafe !important; */
    align-items: inherit;
}

/* panel header components */
.spy-info-header td.border-r {
  border-right: 1px solid #282250 !important;
}

tr.tp-count-border {
  border-right: 1px solid #282250 !important;
}

tr.tp-count-border>td>span.tp-special-margin-r {
  margin-right: 2rem;
}

/* ----------------------------------------------- SPY RIGHT MENU -----------------------------------------------*/

.spy-right-menu {
  min-height: 66px;
  position: relative;
}


.spy-right-menu-content {
  position: absolute;
  bottom: 25%;
  left: 0;
}
.spy-right-menu-button.md-button.md-fab.md-default-theme:not([disabled]).md-focused,
.spy-right-menu-button.md-button.md-fab:not([disabled]).md-focused,
.spy-right-menu-button.md-button.md-fab.md-default-theme:not([disabled]):hover,
.spy-right-menu-button.md-button.md-fab:not([disabled]):hover,
.spy-right-menu-button.md-button.md-fab.md-default-theme:not([disabled]):focus,
.spy-right-menu-button.md-button.md-fab:not([disabled]):focus,
.spy-right-menu-button.md-button.md-fab.md-default-theme:not([disabled]):active,
.spy-right-menu-button.md-button.md-fab:not([disabled]):active,
#rightMenu.md-open .spy-right-menu-button.md-button.md-fab.md-default-theme:not([disabled]),
#rightMenu.md-open .spy-right-menu-button.md-button.md-fab:not([disabled])    {
  background-color: #282250;
  color: white;
}

.spy-right-menu-button.md-button.md-fab.md-default-theme:not([disabled]),
.spy-right-menu-button.md-button.md-fab:not([disabled]){
  box-shadow: none;
  background-color: white;
  width: 40px;
  height: 40px;
  padding: 0;
}

.spy-right-menu-button i {
  color: #282250;
  padding: 0 !important;
  display: block;
}
#rightMenu.md-open .spy-right-menu-button i,
.spy-right-menu-button i:hover,
.spy-right-menu-button i:focus,
.spy-right-menu-button i:active  {
  color: white;
}

.md-open-menu-container.md-active {
    z-index: 1051; /* Used to display menu-content over modal content */
}

md-menu-content {
    display: flex;
    flex-direction: column;
    padding: 0;
    max-height: 304px;
    overflow-y: auto;
    border: 1px solid #E7E8F2;
}
md-menu-content > md-menu-item:hover,
md-menu-item > .md-button.md-default-theme:not([disabled]).md-focused,
md-menu-item > .md-button:not([disabled]).md-focused,
md-menu-item > .md-button.md-default-theme:not([disabled]):hover,
md-menu-item > .md-button:not([disabled]):hover,
md-menu-item > .md-button.md-default-theme:not([disabled]):focus,
md-menu-item > .md-button:not([disabled]):focus {
    background-color: #e7e8f2;
}
md-menu-item > .md-button{
  margin: auto 16px;
  padding:0 !important;
}
md-menu-item > .md-button.not_last_item {
    border-bottom: 1px solid #E7E8F2;
    padding: 0;
    margin: 0 16px;
}


/* ----------------------------------------------- SPY BUTTON TAGS  -----------------------------------------------*/

.spy-button-tags {
    box-sizing: border-box;
    border: none;
    background-color: #e7e8f2;
    border-bottom-left-radius: 100px;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    -webkit-border-radius: 100px;
    height: 22px;
    width: auto;
    border-radius: 18px;
    color: #8A8CAA;
    text-align: center;
    margin-bottom: 6px;
    padding: 1px 10px;
    font-size: 10px;
}

.spy-button-tags-more {
    box-sizing: border-box;
    border: 1px solid white;
    background-color: white;
    border-bottom-left-radius: 100px;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    -webkit-border-radius: 100px;
    height: 25px;
    width: auto;
    border-radius: 18px;
    color: #282250!important;
    text-align: center;
    margin-top: 0px;
    font-weight: normal;
}

.spy-see-more {
  min-height: 66px;
  position: relative;
}

.spy-see-more-content {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 10px
}
.spy-see-more-content > span {
  font-weight: bold;
}

.spy-see-more-content .underline {
  text-decoration: underline;
}

/* ----------------------------------------------- SPY BUTTON LISTS  -----------------------------------------------*/

.spy-button-list {
    height: 25px;
    width: auto;
    background: white;
    border: none;
    float: left !important;
    flex: 0 0 auto;
    margin-right: 25px;
}

.spy-button-list-cliqued {
    background: white;
    border-bottom: 2px solid #282250;
    color: #282250 !important;
}

/* .spy-button-list-cliqued:hover {
    background: white;
    border-bottom: 2px solid #282250;
    color: #282250 !important;
} */

.spy-button-list-focus {}

.spy-button-list:hover {
  background: white;
  border-bottom: 2px solid #282250;
  color: #282250 !important;
}


/* ----------------------------------------------- SPY TABS CONTENT PARAMS  -----------------------------------------------*/

.spy-tab {
    /* padding: 5px 20px;
    min-height: 900px;
    overflow-y: auto;
    height: 100vh; */
}

.spy-tab-no-overflow {
    padding: 5px 20px;
    height: calc(100vh - 160px);
    overflow-y: hidden;
}


/*  Neutralizing border */

.tabs-linetriangle .nav.nav-tabs {
    border-bottom: none !important;
}


/* ----------------------------------------------- SPY MODAL DIALOG  -----------------------------------------------*/


/* AUTOMATIC MODAL SCREEN CENTERING  */


/* NEUTRALIZING OTHERS CSS LIBS */

.modal-dialog {
    /* min-width: 900px; */
    margin:0;
}

.modal.fade .modal-dialog {
    -webkit-transform: translate(0, 0) !important;
    -ms-transform: translate(0, 0) !important;
    -o-transform: translate(0, 0) !important;
    transform: translate(0, 0) !important;
    -webkit-transition: all 0.1s !important;
    -moz-transition: all 0.1s !important;
    transition: ease-in-out !important;
}


/* AUTOMATIC MODAL DIALOG CENTERING */

.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
}


/* MODAL BORDERS RADIUS*/

.modal-content {
    -webkit-border-radius: 10px !important;
    -moz-border-radius: 10px !important;
    border-radius: 10px !important;
}


/* MODAL BODY MAX HEIGHT AND OVERFLOW*/

.modal-body {
    overflow: auto !important;
    max-height: 90vh;
    min-height: 40vh;
}


/* ----------------------------------------------- SPY DIALOG CLOSE BUTTON AND TITLE -----------------------------------------------*/

.modal-header .close {
    text-shadow: none;
    font-size: 45px;
    line-height: 0.5;
    font-weight: 100;
    color: #282250 !important;
    opacity: 1;
}

.spy-modal-header-product .close {
    text-shadow: none;
    font-size: 45px;
    line-height: 0.5;
    font-weight: 100;
    color: #282250 !important;
    opacity: 1;
}

.modal-header .close:hover {
    text-shadow: 3px;
    color: grey;
    opacity: 0.5;
}

.spy-modal-header-product .close:hover {
    text-shadow: 3px;
    color: grey;
    opacity: 0.5;
}

.modal-title {
    height: 30px !important;
    color: #282250 !important;
    font-weight: bold !important;
    border-bottom: 1px solid grey !important;
}

/* Product view modal*/
.modal.modal-product-view {
  /* min-width: 1200px; */
  margin-top: 0 !important;
}

.modal.modal-product-view .modal-dialog {
  min-width: 1200px;
  margin:0;
  border: none;
  border-radius: 7px;
}

.product-see-more-container {
  max-height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
}



/* *********************************************** SPYCOMMERCE ICONS ************************************************************* */

.spy-icon-xl {
    height: 43px;
    width: 60px;
    border-radius: 100px;
    padding: 6px;
}

.spy-icon-md {
    height: 30px;
    width: 30px;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

.spy-icon-xs {
    width: 15px;
    height: 16px;
}


/* // COLORING SVG ICON WHEN HOVERING  */

.spy-button-xl:hover .pngIcon {
    filter: invert(1);
}

.spy-button-xl .pngIcon {
    transition: 0.5s;
    filter: none;
}


/* *********************************************** SPYCOMMERCE WIDTH ************************************************************* */

.spy-width-xxl {
    width: 250px !important;
}

.spy-width-xl {
    width: 150px !important;
}

.spy-width-md {
    width: 75px !important;
}

.spy-width-xs {
    width: 35px !important;
}


/* *********************************************** SPYCOMMERCE PADDING ************************************************************* */


.spy-padding-md{
    padding-left: 10px;

}

/* *********************************************** SPYCOMMERCE VARIOUS CUSTOM CSS ************************************************************* */

.spy-custom-css1{
    font-size: 16px;
    color: #282250 !important;
}
/* *********************************************** SPYCOMMERCE WIDGETS CONTAINERS ************************************************************* */

.spy-widget {
    padding: 20px!important;
    box-shadow: 0 0 0 1px rgba(63,63,68,0.05), 0 1px 3px 0 rgba(63,63,68,0.15);
}

.spy-widget-2 {
    padding: 15px !important;
}

.spy-special-css-1 {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: -4.5vh;
}

.spy-special-css-2 {
    margin-left: 0px;
}

.widget-content-1 {
    padding: 0px;
    max-height: 30px;
}

.widget-content-1 .md-button.md-fab {
  width: 60px;
  height: 60px;
}

.widget-content-2 {
    padding: 6px 0 0 0;
    max-height: 30px;
}


/* *********************************************** SPYCOMMERCE NOTIFICATIONS ************************************************************* */

.spy-notification {
    min-height: 82px !important;
    max-height: 82px !important;
    padding: 20px 20px 20px 20px !important;
    box-shadow: 0 0 0 1px rgba(63,63,68,0.05), 0 1px 3px 0 rgba(63,63,68,0.15);
    margin-bottom: 20px;
}


/* *********************************************** SPYCOMMERCE CIRCLED BADGE ************************************************************* */

.spy-badgecircle-md, .spy-badgecircle-md-white {
    min-width: 10px;
    padding: 4px 9px;
    font-size: 16px !important;
    font-weight: 700;
    color: #282250;
    text-align: center;
    white-space: nowrap;
    position: unset;
    border-radius: 100px;
    border: none;
    font-family: lato;
    background-color: #E7E8F2 !important;
}

.spy-badgecircle-xl, .spy-badgecircle-xl-white {
  min-width: 10px;
  padding: 10px 12px;
  font-size: 20px;
  font-weight: 700;
  color: #282250;
  text-align: center;
  white-space: nowrap;
  background-color: white;
  position: unset;
  border-radius: 100px;
  /* border: 1px solid #282250; */
  font-family: lato;
}
.spy-badgecircle-md-white, .spy-badgecircle-xl-white {
    color: #282250;
    background-color: white !important;
    border: 1px solid #282250 ;
}



/* REDEFINING STANDARD BADGE */

.badge {
    display: inline-block;
    min-width: 10px;
    padding: 5px 12px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: 3px;
    /* border: 1px solid lightgray; */
    margin-top: 0px !important;
}

.badge-primary {
    background-color: #5a8dee !important;
}

.badge-success {
    background-color: #20bba6 !important;
}


/* ----------------------------------------------- GENERAL RESPONSIVE MEDIA QUERIES --------------------------------------------------------*/


/* LESS THAN 22 " DESKTOP SCREENS */

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

  /* REGULAR  */

  .spy-regularFont-xxl {
      font-size: 26px;
      font-weight: 900;
      letter-spacing: -0.4px;
  }

  .spy-regularFont-xl {
      font-size: 20px;
  }

  .spy-regularFont-l {
      font-size: 16px;
      line-height: 22px !important;
      font-weight: normal !important;
  }

  .spy-regularFont-md {
      font-size: 14px;
      line-height: 22px !important;
      font-weight: normal !important;
  }

  .spy-regularFont-xs {
      font-size: 12px;
      font-weight: normal !important;
  }

  .spy-regularFont-xxs {
      font-size: 10px;
      font-weight: normal !important;
  }

  .spy-regularFont-xxs-small {
      font-size: 8px;
      font-weight: normal !important;
  }


  /* UPPERCASE */

  .spy-uppercaseFont-xl {
      font-size: 20px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: none !important;
  }

  .spy-uppercaseFont-md {
      font-size: 14px  !important;
      font-weight: bold  !important;
      text-transform: uppercase  !important;
      letter-spacing: none !important;
  }

  .spy-uppercaseFont-xs {
      font-size: 12px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: none !important;
  }

  .spy-uppercaseFont-12, .spy-uppercaseFont-xxs {
      font-size: 10px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: none !important;
  }

  .spy-uppercaseFont-xxs-small {
      font-size: 8px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: none !important;
  }


  /* NUMBERS  */

  .spy-numberFont-xl {
      color: #282250;
      font-size: 26px;
      font-weight: 900;
      /* line-height: 0px; */
  }

  .spy-numberFont-md {
      font-family: Lato;
      font-size: 14px;
      font-weight: 900;
      /* line-height: 0px; */
  }

  .spy-numberFont-countUp-xl {
      font-family: Lato;
      font-size: 20px;
      font-weight: 900;
      line-height: 34px;
  }


    .spy-margin-bottom-xs{
        height: calc(20%)  !important;
    }

    .spy-margin-bottom-md{
        height: calc(30%)  !important;
    }
    .spy-margin-bottom-l{
        height: calc(50%) !important;
    }
    .spy-button-xl {
        box-sizing: border-box;
        height: auto !important;
        min-height: 36px;
        width: 100%;
    }
    .spy-main-filter-button {
        width: 100%;
    }
    /* #manualMatchingView md-input-container {
        padding: 0px !important;
        margin: 20px 0px 0px !important;
    } */
    /* // END OF REDUCING SPY MODAL XS  */
    #trackingProductsView .md-button.md-fab {
        display: none;
    }
    #trackingProductsView .panel-header {
        min-height: 70px !important;
    }
    #myFilters label {
        margin: -20px 0px;
    }

    #trackingProductsList md-icon {
        min-height: 20px;
        min-width: 20px;
    }
    #trackingProductsList md-icon {
        min-height: 20px;
        min-width: 20px;
    }
    #trackingProductsList .md-button.md-fab {
        width: 30px;
        height: 20px;
    }
    .md-button.md-fab {
        width: 40px !important;
        height: 35px !important;
    }
    .spy-widget-2 {
        height: 17vh;
    }

    .spyScrollBar {
        max-height: 554px;
        overflow: scroll;
    }

}


/* TABLET LANDSCAPE / DESKTOP - Should be  (max-width: 1024px) */

@media (min-width: 960px) {
  md-menu-content[width="4"] {
    min-width: 300px;
  }
}

@media screen and (max-width: 1200px) {
    .topbar.topbar-condensed .header-left .topnav>ul {
        left: 50px;
    }
    .topbar.topbar-condensed .header-left .topnav>ul>li {
        left: -50px;
    }
    .topbar .large-dropdown-menu {
        min-width: 160px;
    }
    .topbar .header-left .nav-icons {
        display: none;
    }
    .spyScrollBar {
        max-height: 554px;
        overflow: scroll;
    }
}

@media screen and (max-width: 1200px) {
    body {
        position: relative;
    }
    body:not(.sidebar-hover) .sidebar {
        display: none;
    }
    body>section {
        height: auto;
    }
    .topbar {
        left: 0 !important;
    }
    .topbar .header-left .topnav .menutoggle i:before {
        content: "s" !important;
    }
    .fixed-topbar .topbar {
        left: 0 !important;
    }
    .main-content {
        margin-left: 0 !important;
        width: 100%;
    }
    .sidebar-collapsed .sidebar {
        display: none;
    }
    .sidebar-collapsed .main-content {
        margin-left: 0;
    }
    .sidebar-collapsed .topbar {
        margin-left: 0 !important;
    }
    .sidebar-show section {
        overflow-x: hidden;
    }
    .sidebar-show .main-content {
        margin-left: 240px !important;
        overflow: hidden;
    }
    .sidebar-show .topbar .header-left .topnav .menutoggle i:before {
        content: "r" !important;
    }
    body.sidebar-show:not(.sidebar-hover) .sidebar {
        display: block;
    }
    .sidebar-show.fixed-topbar .topbar {
        left: 240px !important;
        overflow: hidden;
    }
    .nav-horizontal {
        position: relative;
    }
    .nav-horizontal .caret {
        display: none;
    }
}

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

  /* REGULAR  */

  .spy-regularFont-xxl {
      font-size: 26px;
      font-weight: 900;
      letter-spacing: -0.4px;
  }

  .spy-regularFont-xl {
      font-size: 20px;
  }

  .spy-regularFont-l {
      font-size: 16px;
      line-height: 22px !important;
      font-weight: normal !important;
  }

  .spy-regularFont-md {
      font-size: 14px;
      line-height: 22px !important;
      font-weight: normal !important;
  }

  .spy-regularFont-xs {
      font-size: 12px;
      font-weight: normal !important;
  }

  .spy-regularFont-xxs {
      font-size: 10px;
      font-weight: normal !important;
  }

  .spy-regularFont-xxs-small {
      font-size: 8px;
      font-weight: normal !important;
  }


  /* UPPERCASE */

  .spy-uppercaseFont-xl {
      font-size: 20px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: none !important;
  }

  .spy-uppercaseFont-md {
      font-size: 14px  !important;
      font-weight: bold  !important;
      text-transform: uppercase  !important;
      letter-spacing: none !important;
  }

  .spy-uppercaseFont-xs {
      font-size: 12px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: none !important;
  }

  .spy-uppercaseFont-12, .spy-uppercaseFont-xxs {
      font-size: 10px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: none !important;
  }

  .spy-uppercaseFont-xxs-small {
      font-size: 8px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: none !important;
  }


  /* NUMBERS  */

  .spy-numberFont-xl {
      color: #282250;
      font-size: 26px;
      font-weight: 900;
      /* line-height: 0px; */
  }

  .spy-numberFont-md {
      font-family: Lato;
      font-size: 14px;
      font-weight: 900;
      /* line-height: 0px; */
  }

  .spy-numberFont-countUp-xl {
      font-family: Lato;
      font-size: 20px;
      font-weight: 900;
      line-height: 34px;
  }

}

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

  /* Content */
  body>section {
    height: auto;
  }
  /* .main-content {
    margin-left: 0 !important;
    width: 100%;
  } */

  .modal.modal-product-view .modal-dialog {
    min-width: 990px;
  }

    .spy-xxl-panel-view .grid {
        height: calc(100vh - 150px);
        padding: 0px 15px 0px 15px;
    }
    #widget-perfs {
        /* display: none; */
    }
    .tcspe {
        display: none;
    }

    .tabs-linetriangle .nav.nav-tabs>li>a {
        font-size: 14px !important;
    }
    .spy-button-tags {
        height: 20px;
    }

    .main-content .footer .copyright {
        font-size: 12px;
    }
    .ui-grid-pager-container {
        margin-left: 30%;
    }

    .button_appliquer_les_filtres_inline {
        font-size: 12px !important;
    }
    /* ----------------------------------------------- BREADCRUMB  -----------------------------------------------*/
    .breadcrumb {
        width: 450px !important;
    }
    .breadcrumb-wrapper a {
        color: #282250;
        font-family: Lato;
        font-size: 12px !important;
        font-weight: bold;
        line-height: 19px;
    }
    .breadcrumb-wrapper li {
        color: #282250;
        font-family: Lato;
        font-size: 12px !important;
        font-weight: bold;
        line-height: 19px;
    }
    /* ----------------------------------------------- TOPBAR  -----------------------------------------------*/
    /* .topbar .nav>li>a {
        position: relative;
        display: block;
        padding: 17px 5px !important;
        padding-top: 0px !important;
        padding-bottom: 10px !important;
    }
    .topbar .header-right .header-menu #user-header img {
        display: none;
    } */
    /* .fixed-topbar .topbar {
      left: 0 !important;
    } */
    .topbar .header-right .header-menu .username {
        /* max-width: 100px; */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        /* font-size: 11px; */
    }
    .spy-widget-2 {
        height: 17vh;
    }
  /*   #manualMatchingView #searchForm {
        min-height: 200px !important;
    }
    #manualMatchingView #tableForm {
        height: 100% !important;
        min-height: 200px !important;
    } */
    .spy-tab-no-overflow {
        overflow: auto;
    }
    /* Special number position */
    .spy-special-number-position-1 {
        margin-top: 5px !important;
        position: absolute;
    }

    /*****************************************************   SIDEBAR  ******************************************************************/

    /* body:not(.sidebar-hover) .sidebar {
      display: none;
    } */
    /* .sidebar-show .main-content {
      margin-left: 240px !important;
      overflow: hidden;
    }

    .sidebar-show.fixed-topbar .topbar {
      left: 240px !important;
      overflow: hidden;
    } */

    /* -----------------------------------------------  COMPETITOR VIEW   -----------------------------------------------*/

    .btn-group-list-container {
       display: flex;
        flex-wrap: nowrap;
        max-height: 65px;
        overflow-y: auto !important;
        height: 65px;
    }
    .tabs-linetriangle .nav.nav-tabs>li>a {
        font-size: 12px !important;
    }
}

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

  /* REGULAR  */

  .spy-regularFont-xxl {
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -0.4px;
  }

  .spy-regularFont-xl {
      font-size: 18px;
  }

  .spy-regularFont-l {
      font-size: 14px;
      line-height: 22px !important;
      font-weight: normal !important;
  }

  .spy-regularFont-md {
      font-size: 12px;
      line-height: 22px !important;
      font-weight: normal !important;
  }

  .spy-regularFont-xs {
      font-size: 10px;
      font-weight: normal !important;
  }

  .spy-regularFont-xxs {
      font-size: 8px;
      font-weight: normal !important;
  }

  .spy-regularFont-xxs-small {
      font-size: 6px;
      font-weight: normal !important;
  }


  /* UPPERCASE */

  .spy-uppercaseFont-xl {
      font-size: 18px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: none !important;
  }

  .spy-uppercaseFont-md {
      font-size: 12px  !important;
      font-weight: bold  !important;
      text-transform: uppercase  !important;
      letter-spacing: none !important;
  }

  .spy-uppercaseFont-xs {
      font-size: 10px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: none !important;
  }

  .spy-uppercaseFont-12, .spy-uppercaseFont-xxs {
      font-size: 8px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: none !important;
  }

  .spy-uppercaseFont-xxs-small {
      font-size: 6px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: none !important;
  }


  /* NUMBERS  */

  .spy-numberFont-xl {
      color: #282250;
      font-size: 22px;
      font-weight: 900;
      /* line-height: 0px; */
  }

  .spy-numberFont-md {
      font-family: Lato;
      font-size: 12px;
      font-weight: 900;
      /* line-height: 0px; */
  }

  .spy-numberFont-countUp-xl {
      font-family: Lato;
      font-size: 18px;
      font-weight: 900;
      line-height: 34px;
  }

}


/* TABLETS PORTRAIT (Should be max-width: 768px)*/

@media only screen and (max-width: 992px) {
  .modal.modal-product-view .modal-dialog {
    min-width: unset;
  }
    .form-input-text {
        /* Chrome, Firefox, Opera, Safari 10.1+ */
        font-size: 10px;
        font-weight: normal;
    }
    .tabs-linetriangle .nav.nav-tabs>li>a {
        font-size: 10px !important;
    }
    .spy-notification {
        min-height: 200px !important;
    }
    /* .breadcrumb {
        width: 300px !important;
    } */
    .breadcrumb-wrapper a {
        font-size: 12px !important;
    }
    .breadcrumb-wrapper li {
        font-size: 12px !important;
    }
    .spy-special-css-2 {
        margin-left: 400px !important;
        margin-top: 46px;
    }
    .md-button.md-fab {
        display: true;
    }
    .tabs-linetriangle {
        max-height: 80px;
        overflow: auto;
    }
    #editView .panel-body {
        height: 100% !important;
        overflow: hidden;
    }
    .ui-grid-pager-row-count-label {
        display: none !important;
    }
    #manualMatchingView .ui-grid-bottom-panel > span {
        padding-top: 5px;
    }
}

/* Override style */
@media only screen and (max-width: 812px) {
  .flex-products {
    display: flex;
    justify-content: space-between;
    align-items: inherit;
    flex-direction: row;
  }
}

@media only screen and (max-width: 768px){
  .flex-products {
      display: flex;
      justify-content: space-between;
      align-items: inherit;
      flex-direction: column;
  }
  .spy-widget {
    margin-bottom: 10px;
  }
  .modal.modal-product-view .modal-dialog {
    min-width: unset;
  }
}


/* SMARTPHONES LANDSCAPE */

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

    .spy-notification {
        min-height: 260px !important;
    }
    .breadcrumb {
        display: none;
    }
    .ui-grid-pager-row-count-picker {
        display: none !important;
    }
    .ui-grid-pager-container {
        margin-left: 10% !important;
    }
}


/* SMARTPHONES PORTRAIT */

@media only screen and (max-width: 300px) {}


/* ----------------------------------------------- UI GRID BOUTONS FILTRES -----------------------------------------------*/

.ui-grid-menu-button {
    box-sizing: border-box;
    border: 1px solid #8a8caa;
    background-color: #ffffff;
    border-bottom-left-radius: 100px;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    height: 41px;
    width: 41px;
    -webkit-border-radius: 100px;
    margin-top: -9px;
    margin-right: -10px;
}

.ui-grid-menu-button:hover {
    box-shadow: 1px 1px 1px lightgrey;
    transition: box-shadow 0.3s ease-in-out;
    background-color: #e7e8f2;
}

.ui-grid-icon-container {
    height: 41px;
    width: 41px;
}

.ui-grid-icon-menu:before {
    font-size: 1.33em;
    content: "\f141";
    font-family: "FontAwesome";
}

.ui-grid-icon-menu:hover {
    color: white;
    transition: box-shadow 0.3s ease-in-out;
}


/* Cross margin right; */

.ui-grid-filter-container .ui-grid-filter-button [class^="ui-grid-icon"] {
    right: 20px !important;
}


/* ----------------------------------------------- UI GRID SEARCH INPUTS  -----------------------------------------------*/

input[type="text"].ui-grid-filter-input {
    -webkit-border-radius: 4px;
    margin-left: -5px;
    padding-left: 20px;
    background-color: white;
}

input {
    font-family: "Lato" !important;
}

.ui-grid-top-panel {
    text-transform: Uppercase;
}

.spy-ui-grid-row .ui-grid-cell .ui-grid-cell-contents {
    padding: 25px 5px 35px 5px; /* vertical center */
}

.spy-ui-grid-row-compact .ui-grid-cell .ui-grid-cell-contents {
    padding: 12px 5px 15px 5px; /* vertical center */
}



/* DISPLAYING MAGNIFIER */

.ui-grid-filter-input {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACW0lEQVR4nO3ZS4hOYRzH8Y+7zSRKkkbExmUlyW1BSrMRYyG3ssNCWUgslJTCirGSkLUSG7dcIguxI0xZ2Ai5pJDbuIzFSc17zpEx53nfd4b/t57V2/Pt9/+f9zznPM8hCIIgCIIgCIIgCIIgLfOwDzfwHF/QhVe4hQ4sxZBmBawHg7AOD9Ddy/EEWzGsCXmTMgk39b7w/HiAWY0OnYqFeKPvxf8an7G6wdkrswAfFIv5ilNYhckYjqGYgGU49pt537GmoRVUoBWvFYs4Jyv6T4yVNSI//wtm1yFvcq4oht/VB8962ROip+cRRqSJWR/aFYvfXcG3tsS3vWLGunJHbdjLssdgFY7knC9ka0e/Y6biwjUtgXc03ubc7Qm8ydmpNuT5hO6OnPt4QncyzqoNuTGhe1HO/TChOxn5V92Ub3AtOXeX6mtLcp6pDTk+sf99zt+S2F+ZRjdgVGJ/Ze77z2+BM2pDbkroXpxzdyZ0J2OH2pAXEroP59wnErqTMUNtyB+YnsA7Bu9y7pUJvHXhttqgV1W/V4/mnM/101dhWK64edlTwbe+xLetYsa6c0n5jvBv/wkbFLfDnfrx1f/FBLxUbMJFTO3F/HE4WTK/G/vTx60Pc5UfbX3Dadk+fwpGyq7oRKyQre4fS+b1HFsaWEcl5is/GksxBkwTWnFd3wu9Kyv2c8lvA6YJZKfA9/S+8MfYLDsxhjb/QBNgDvbiGp7ik2xdeCn7NHYQSzC4ZO4/04QqRBNEExBNQHkTOpqaqAn0bMKhJmdpGm040OwQQRAEQRAEQRAEwUDmJ/BGXRSoAp63AAAAAElFTkSuQmCC') no-repeat scroll 2px 1px;
    background-size: 20px;
    padding-left: 20px;
}


/* Replacing the down arrow icon by the  ellipsis-h icon ( 3 dots) */

.ui-grid-icon-angle-down:before {
    font-family: "Font Awesome 5 Free";
    content: "\f141";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 800;
    margin-bottom: 7px;
}


/* ----------------------------------------------- UI GRID MENUS DE RECHERCHE -----------------------------------------------*/

.ui-grid-menu .ui-grid-menu-inner {
    background: white;
    border: 1px solid #d4d4d4;
    position: relative;
    white-space: nowrap;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), inset 0 12px 12px -14px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), inset 0 12px 12px -14px rgba(0, 0, 0, 0.2);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), inset 0 12px 12px -14px rgba(0, 0, 0, 0.2);
}

.ui-grid-menu .ui-grid-menu-inner ul li:not(:last-child)>button {
    /* border-bottom: 1px solid #282250; */
    font-weight: bold;
    color: #282250
}
.ui-grid-menu .ui-grid-menu-inner ul li:last-child>button {
    font-weight: bold;
    color: #282250;
}


/* ----------------------------------------------- UI GRID MANAGING COLUMNS MENU -----------------------------------------------*/


/* https://stackoverflow.com/questions/34585762/when-using-external-grid-filtering-how-do-i-hide-the-clear-all-filters-grid-m */


/* HIDING THE 'CLEAR ALL FILTERS MENU ' NETTOYER TOUS LES FILTRES */

#menuitem-1 {
    display: none;
}


/* All in one selector */


/* .ui-grid-icon-cancel {


	background: url('../images/icones/colone-PINRIGHT.png') ;

  } */


/* .ui-grid-icon-cancel::before {

    content: "\f057" !important;
} */


/* ----------------------------------------------- UI GRID SORT -----------------------------------------------*/

.ui-grid-icon-down-dir:before {
    content: "\25bc";
}

.ui-grid-icon-up-dir:before {
    content: "\25b2";
}

.ui-grid-header-cell {
    border-top: 1px solid #F0F0F0 !important;
    border-right: 1px solid #F0F0F0 !important;
    border-left: 1px solid #F0F0F0 !important;
    background-color: #f3f5f9;
    border-radius: 5px;
}

.ui-grid-header {
    border-bottom: 1px solid #F5F5F5 !important;
    box-sizing: border-box;
}

.ui-grid-header-cell:hover {
    background-color: #e7e8f2
}


/* ----------------------------------------------- UI GRID COLUMNS MENU -----------------------------------------------*/


/* HEIGHT */

.ui-grid-menu-mid {
    max-height: 50vh !important;
}

/* LABEL MARGIN LEFT + FONTS */
.ui-grid-header-cell-label{
    margin-left:10px;
    color:#7d7e9f;
    font-style:bold;
    font-family:lato;
    line-height: 15px;
    letter:-0.15px;
}


.ui-grid-icon-menu{
    padding: 0 0 0 6px !important;
}
.ui-grid-menu-button .ui-grid-icon-container {
    margin-top: 10px;
}
.ui-grid-column-menu-button {

    position: absolute;
    right: 1px;
    top: 10px;

}

.main-content .page-content .panel .panel-content i {

    padding-left: 0px;
    padding-right: 0px;

}

/* ------------------------------------------------ UI GRID LIGNES DES OBJETS - ROWS -----------------------------------------------*/

/* No rows element */
.no-rows {
  position: absolute;
  top: 40px;
  bottom: 0;
  width: 100%;
  height: 70px;
}

.no-rows .msg {
  opacity: 1;
  position: absolute;
  top: 0;
  width: 100%;
  height: 70px;
  border-radius: 4px;
  font-size: 16px;
  display: table;
}

.no-rows .msg span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

/* MAIN HEIGHT OF A ROW */

.ui-grid-row {
  padding-left: 0  ;
}

.ui-grid-canvas {
    position: relative;
    /* padding-top: 10px; */
    padding-left: 0;
}

.spy-ui-grid-row, .spy-ui-grid-row-compact {
    background-color: white;
    /* margin-bottom: 10px; */
    height: 70px;
    box-shadow: 0 0 0 1px rgba(63,63,68,0.05), 0 1px 3px 0 rgba(63,63,68,0.15);
    -webkit-box-shadow:  0 0 0 1px rgba(63,63,68,0.05), 0 1px 3px 0 rgba(63,63,68,0.15);
    -moz-box-shadow:  0 0 0 1px rgba(63,63,68,0.05), 0 1px 3px 0 rgba(63,63,68,0.15);
    /* padding: 0 1px; */
}

.spy-ui-grid-row-compact {
  height: 45px;
 }

 /* PREVENTING HIDING OF THE LAST ROW BY THE PAGER https://github.com/angular-ui/ui-grid/issues/2134*/

 .ui-grid-render-container {
     position: static;
 }

.page-grid-content .ui-grid-render-container-body .ui-grid-viewport,
.content-container .ui-grid-render-container-body .ui-grid-viewport,
.panel-content-competitor .ui-grid-render-container-body .ui-grid-viewport{
     overflow-x: auto !important;
     overflow-y: auto !important;
     scrollbar-width: thin;
     margin-top: 10px;
     padding-left: 1Px;
     height: 814px !important;
 }

 .panel-content-competitor .ui-grid-render-container-body .ui-grid-viewport {
     margin-bottom: 20px;
     height: 500px !important;
     /* overflow: scroll hidden !important; */
 }

 .content-container .ui-grid-render-container-body .ui-grid-viewport {
     height: 2751px !important;
 }

 #manualMatchingView #catalog-products.content-container .ui-grid-render-container-body .ui-grid-viewport {
      height: 320px !important;
  }

 #manualMatchingView #catalog-products.content-container .grid {
     height: 400px !important;
 }
.main-content .page-content #manualMatchingView #catalog-products.content-container {
  min-height: unset !important;
  box-shadow: 0 0 0 1px rgba(63,63,68,0.05), 0 1px 3px 0 rgba(63,63,68,0.15);
  padding-bottom: 20px;
}

.ui-grid-cell {
    /* height: 70px !important; */
    padding-top: 0px;
}

/* Adding a border on the ui grid row left first child */

.ui-grid-cell:first-child {
 /* border-left: 1px solid lightgrey; */
}


/*
.ui-grid-row:after {
    border-left:5px solid lightgrey !important;
    position: absolute;

} */
/* .ui-grid-row:nth-child(odd) .ui-grid-cell:first-child {
 border: 1px solid black;
  background-color: #ffff33;
}
.ui-grid-row:nth-child(even) .ui-grid-cell {
  background-color: #ff22ff;
}  */



.ui-grid-cell-focus {
  outline: 0;
  background-color: #b3c4c7;
}

/* .ui-grid-row:hover {
  background:red;
    border-left:1px solid lightgrey !important;
} */

/* THESES VIEWS HAVE THINNER ROWS AND NO PICTURES INSIDE FOR NOW */

#sellers-mkpView .ui-grid-row,
#myBrandProduct .ui-grid-row,
#matchingRuleList .ui-grid-row {
    /* height: 45px !important; */
}

#myBrandProduct .page-grid .content-container .grid,
#sellers-mkpView .page-grid .content-container .grid,
#matchingRuleList .page-grid .content-container .grid   {
    height: 2860px !important; /*size for display 50 rows by default */
}



/* MAIN SIZE OF ROW IMAGE */

.spy-uigrid-rowImage {
    display: block;
    margin: auto;
    /* WHEN IMAGE IS TOO BIG */
    height: 50px;
    width: 50px;
    margin-top: -15px;
}


/* MAIN FONT OF GRID TITLE */

.ui-grid-row .grid-title {
    font-weight: 600 !important;
    color: #282250;
    font-size: 14px;
}

/* GRID HEADER ROW HEIGHT */
.ui-grid-header-cell {
  /* height: 20px; */
}

.ui-grid-header-cell-row {
    display: table-row;
    position: relative;
}



/* ALIGN TEXT TO CENTER  https://stackoverflow.com/questions/17804968/angularjs-nggrid-text-alignment*/

.grid-align {
    text-align: center !important;
}


/* sellers-mkp and brand-product specific STYLE */

.text-c .ui-grid-cell-contents {
    text-align: center !important;
    white-space: normal !important;
    font-size: 16px;
    color: #282250;
}

.scrollFiller {
    float: left;
    border: 1px solid margin-bottom: 15px;
}

.ui-grid-row:nth-child(2n) .ui-grid-cell {
    background-color: transparent;
}

.ui-grid-row:nth-child(odd) .ui-grid-cell {
    background-color: transparent;
}


 /* -----------------------------------------------------MAGIC BLUE BUTTON ' VOIR EN DETAILS' See grid.js for the rest of the magic button code --------------------------------------- */

.button-magic-container {
    z-index: 10;
    /* margin-top: 20px; */
    position: absolute;
    /* margin-left: 40vw; */
    opacity: 80% !important;
    width: 100%;
    height: 70px;
}



.button-magic {
    height: 35px;
    width: 166px;
    border-radius: 18px;
    background-color: #282250;
    color: white;
    font-family: Lato;
    font-size: 14px;
    font-weight: bold;
    line-height: 17px;
    text-align: center;
    animation-name: fadeIn;
    animation-duration: 1s;
    padding-bottom: 0px;
    padding-right: 10px;
    border: none;
}

.button-magic:hover {
    /* background-color: #201d35; */
}

.passive>div:not(.button-magic-container) {
    opacity: 0.6;
    cursor: pointer;
}


 /* ----------------------------------------------------- END OF MAGIC BLUE BUTTON ' VOIR EN DETAILS' See grid.js for the rest of the magic button code --------------------------------------- */


.ui-grid-row .sidebar-widgets {
    min-width: 10px;
    padding: 3px 7px;
    font-size: 15px !important;
    font-weight: 700;
    line-height: 1;
    color: black;
    text-align: center;
    white-space: nowrap;
    background-color: lightgrey;
    position: relative;
    left: 30%;
    border-radius: 15px;
}

.ui-grid-row button a {
    height: 17px;
    width: 96px;
    color: #ffffff;
    font-family: Lato;
    font-size: 14px;
    font-weight: bold;
    line-height: 17px;
    text-align: center;
}

.ui-grid-row .btn-primary:not(.btn-link):not(.btn-flat) {
    height: 35px;
    width: 166px;
    border-radius: 18px;
    background-color: #282250;
}


/* .ui-grid-row a {
	color: grey;
} */

.ui-grid-row .myGrid-prix {
    font-size: 16px;
    text-align: center;
}

.ui-grid-row .myGrid-diff {
    font-size: 16px;
    font-weight: 500 !important;
    text-align: center;
}

.ui-grid-row .myGrid-diff-percent {
    font-size: 16px;
    font-weight: 500 !important;
    text-align: center;
}


/* .ui-grid-cell-contents .ui-grid-header-cell-primary-focus{

	margin-left:20%
} */


/* ----------------------------------------------- TAGS COMPONENTS -----------------------------------------------*/

.filters-tags-component {
    padding-left: 0px;
    max-height: 70px;
    overflow: hidden;
    margin-right: -15px;
    padding-top: 15px;
}

.filters-tags-close {
    cursor: pointer;
}


/* ----------------------------------------------- BREADCRUMB -----------------------------------------------*/

ol.breadcrumb>li:last-child {
    color: #282250;
}

a,
.main-content .page-content .breadcrumb li a,
.bg-dark .ammapObjectList a:hover,
.font-animation a i,
#timeline .timeline-block .timeline-content i.fa-quote-left,
#timeline .timeline-block .timeline-content i.fa-quote-right,
.page-pricing-table #modal-icons .modal-body .col-sm-2:hover,
#modal-icons .modal-body .col-sm-2 i.active,
.coming-soon a:hover,
.coming-soon .main-nav ul li a.active,
.email-sidebar ul li a.active {
    color: #727273;
}
/* a.a-chevron {
  color: #E7E8F2;
}

a.a-chevron: hover {
  color: #282250;
} */

.main-content .page-content .breadcrumb-wrapper {
    position: absolute;
    right: 40px;
}


/* ----------------------------------------------- PAGER -----------------------------------------------*/

.ui-grid-pager-count {
    /* display: none;
     */
}

.ui-grid-pager-container {
    margin-left: 35%;
    font-family: Lato;
    font-size: 14px;
    color: #8a8caa;
}

.ui-grid-pager-row-count-picker select {
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #A7A9C0;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    padding: 0px 10px;
    line-height: 1.5;
    border-radius: 3px;
    height: 25px;
    width: 67px;
    display: inline;
    font-family: Lato;
    font-size: 14px;
    /* CHANGING ARROW */
    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%;
    -moz-appearance: none;
    -webkit-appearance: none;
    color: #A7A9C0 !important;
}


/* FORCE DISPLAYING ARROW INSIDE PAGINATOR ONHOVER */


/* .ui-grid-pager-row-count-picker select:focus, select:hover {
	-webkit-appearance: menulist; */


/* CHANGING ARROW */


/* background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%;
	-moz-appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
} */
/*
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
 */
.ui-grid-pager-control input {
    color: #8A8CAA;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #8A8CAA;
    border-radius: 4px;
    padding: 5px 10px;
    line-height: 1.5;
    display: inline;
    height: 25px;
    width: 50px;
    vertical-align: top;
    font-family: Lato;
    font-size: 14px;
    text-align: center;
}


/* HIDING INPUT ARROWS */

.ui-grid-pager-control input[type="number"] {
    -moz-appearance: textfield;
}

.ui-grid-pager-control input::-webkit-outer-spin-button,
.ui-grid-pager-control input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}


/* STYLING BUTTONS */

.ui-grid-pager-control button {
    height: 25px;
    min-width: 30px;
    color: #A7A9C0;
    background-color: #e7e8f2;
    border: none;
    padding: 0 10px;
}

/* Counter position */
.ui-grid-pager-control .ui-grid-pager-max-pages-number {
    vertical-align: bottom;
}




/* STYLING TRIANGLES */

.ui-grid-pager-control .prev-triangle {
    margin-left: 0;
}

/* // Neutralizing ancient ui grid icon */
.ui-grid-pager-control .first-triangle {
    /* width: unset !important;
    height:unset !important;
    border-style: unset !important;
    border-width:unset !important;
    border-color: unset !important; */
    margin-left:0 !important;
    margin-top: 0 !important;
    border-style: solid;
    border-width: 5px 8.7px 5px 0;
    border-color: transparent #A7A9C0 transparent transparent;

}

/* // Personnalizing ui grid pager icons */
 /* .ui-grid-pager-control .first-triangle:before{
         font-family: "Font Awesome 5 Free" !important;
    content: "\f104"!important;
    display: inline-block !important;
    padding-right: 0px !important;
    font-weight: 800 !important;
    color: grey;

    font-size: 1.2em !important;
    } */

.ui-grid-pager-control .first-bar {
    border-left: 1.5px solid  #A7A9C0 !important;
    margin-top: -5px;
    margin-left: -3.75px;
    box-sizing: border-box;
    height: 11px;
    width: 1px;
}

/* // Neutralizing ancient ui grid icon */
.ui-grid-pager-control .last-triangle {
    margin-left:0 !important;
    margin-top: 0 !important;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #A7A9C0;
}

/* // Personnalizing ui grid pager icons */
/* .ui-grid-pager-control .last-triangle:before{
   font-family: "Font Awesome 5 Free" !important;
    content: "\f105"!important;
    display: inline-block !important;
    padding-right: 0px !important;
    font-weight: 800 !important;
    color: grey;

    font-size: 1.2em !important;
} */


.ui-grid-pager-control .last-bar {

    /* width: 10px !important;
    border-left: 2px solid grey !important;
    margin-top: -17px !important;
    height: 12px !important;
    margin-left: 10px !important; */

    border-left: 1.5px solid  #A7A9C0 !important;
    margin-top: -5px;
    margin-left: 2.75px;
    box-sizing: border-box;
    height: 11px;
    width: 1px;

}

.ui-grid-pager-count {
    display: none;
    visibility: hidden;
}


/* Label footer modification  */

/* .ui-grid-pager-row-count-label{
    font-size: 0 ;
} */

/* .ui-grid-pager-row-count-label:before{
 font-size: 14px;
  content: 'Produits par page' !important;
    margin-left:10px;
} */








/* ----------------------------------------------- FILTERS MODAL  -----------------------------------------------*/

.modal {
    /* z-index: 10000 !important; */
    color: #282250 !important;
}


/* This class purpose is to draw borders around angular material inputs */

.cadre {
    border: 1px solid #282250 !important;
    border-radius: 5px !important;
    height: 35px !important;
}

md-chips.cadre {
  height: auto !important;
}

.cadre:focus {
    border: 1px solid #5a8dee !important;
    box-shadow: 3px 3px 3px lightgrey;
}

.md-chips md-chip .cadre:focus {
    border: 1px solid #5a8dee !important;
    box-shadow: 3px 3px 3px lightgrey;
}

.md-chips md-chip .md-chip-content {
    font-weight: bold;
}

md-input-container .md-errors-spacer {
    float: right;
    min-height: 0;
    min-width: 1px;
}

#myFilters md-input-container {
    padding: 0px;
    margin: 0px 0px 0px;
}


/* date picker  */

#myFilters .dropdown-menu {
    left: 5px !important;
}

#myFilters .active {
    border: 1px solid #282250 !important;
    color: white !important;
    background-color: #282250 !important;
}

#myFilters input.form-control {
    background-image: none !important;
    padding-left: 20px;
}

#myFilters .row {
    margin-right: 0px;
    margin-left: 0px;
}

.md-input-has-value>md-select, .md-input-has-value>input, date-range-picker.hasFilter>input, .md-input-has-value>div>textarea {
  border: 2px solid #282250 !important;
  box-shadow: 3px 3px 3px lightgrey !important;
}

.selectedFilter {
  border: 2px solid #282250 !important;
  box-shadow: 3px 3px 3px lightgrey !important;
}

.md-select-value {
    padding: 0px 10px 1px;
}

#myFilters md-select {
    display: flex;
    margin: 0px 0 0px 0 !important;
    padding-left: 20px;
}

#myFilters md-datepicker {
    display: flex;
    margin: 0px 0px 0px 0px !important;
}

#myFilters label {
    margin: 0px 0px;
}

#myFilters placeholder {
    color: black !important;
    margin-left: 10px;
    font-size: 15px !important;
}

#myFilters input,
select,
textarea,
placeholder,
.form-control:focus {
    font-size: 14px !important;
    color: #6b615b !important;
    font-family: lato !important;
    padding-left: 20px;
}

._md-datepicker-floating-label .md-input {
    float: none;
}

#myFilters md-input-container .md-input {
    border-radius: 5px;
    padding-left: 20px;
}

#myFilters .md-select-value .md-select-icon:after {
    font-family: Material Icons;
    font-size: 24px;
    content: "keyboard_arrow_down";
    display: inline;
    top: 5px;
    transform: scale(1);
    font-feature-settings: "liga";
    /* Support for IE. From material-icons.css. */
}

#myFilters md-input-container.md-icon-right {
    margin: 0;
    right: 2px;
    left: auto;
}

#myFilters .md-chips {
    display: grid !important;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 15px !important;
    margin: 5px 0px 0px;
    vertical-align: middle;
    overflow: auto;
    max-height: 170px;
}

#myFilters .md-chips.md-focused {}

#myFilters md-autocomplete[md-floating-label] .md-show-clear-button button {
    display: flow-root;
    position: sticky;
    right: 0;
    top: 20px;
    width: 30px;
    height: 30px;
}

#myFilters .md-datepicker-input-container {
    position: static;
    border-bottom-width: 0px;
    border-bottom-style: solid;
    display: flex;
    width: auto;
}

#myFilters .md-datepicker-input {
    max-width: 100% !important;
    width: 100% !important;
}

.md-datepicker-calendar-pane {
    z-index: 1200000;
}

.md-calendar-date-selection-indicator {
    transition: background-color, color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 44%;
    display: inline-block;
    width: 40px;
    height: 39px;
    line-height: 40px;
    text-align: center !important;
}

.md-custom-theme .md-datepicker-expand-triangle {
    border: none;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -webkit-transform: none;
    transform: none;
    top: 4px;
    right: 0;
    left: 0%;
}

.md-custom-theme .md-datepicker-expand-triangle:before {
    content: "\f078";
}

.button_appliquer_les_filtres_inline {
    box-sizing: border-box;
    height: 42px;
    width: 32%;
    border: 1px solid #282250;
    border-radius: 25px;
    color: #282250;
    font-family: Lato;
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;
    background-color: white !important;
    text-transform: uppercase;
    font-weight: 600;
}

.button_appliquer_les_filtres_inline:hover {
    background-color: lightgrey !important;
    box-shadow: 3px 3px 3px lightgrey;
    transition: box-shadow 0.3s ease-in-out;
}


/* 3 filters inline buttons */

.inline-buttons {
    text-align: center !important;
    margin-bottom: 30px;
}


.urlFileLabel {
  margin-top: 8.7% !important;
  border: 1px solid black;
  padding: 6px;
  text-align: center;
  border-radius: 5px;
  width: 100%;

}
.urlFileLabel:hover {
  background-color: #282250;
  color: white !important;
  fill: white !important;
}


md-option.fileList>div {
  min-width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

md-select.fileListSelect>md-select-value>span>div>div.flex2 {
  display: none;
}

.pop-up-order-file{
  border: 1px solid #282250;
  padding: 3px;
}

.pop-up-order-file>.popover-inner>.popover-content {
  padding: 2px;
}

/* ----------------------------------------------- SIDEBAR  -----------------------------------------------*/


/* LOGO CONTAINER */

.sidebar .logopanel {
    height: 70px;
    border-bottom: 1px solid lightgrey;
    border-right: 1px solid lightgrey;
    padding: 0px;
}


/* LOGO HEIGHT */

.sidebar .logopanel h1 a {
    display: block;
    height: 70px;
    margin-top: 10px;
    background-size: 94% 73% !important;
    margin-left: 10px !important;
}

.theme-sltl.color-default .sidebar .sidebar-inner {
  border: 1px solid lightgrey;
  border-left: none;
}

.sidebar .sidebar-inner .nav-sidebar.nav>li {
    margin-top: 0;
    margin-bottom: 25px;
}

.sidebar .sidebar-inner .nav-sidebar.nav>li+li {
    margin-top: 0;
    margin-bottom: 25px;
}

/* Sidebar icones */
.theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar>li>a>i {
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
}

.sidebar-collapsed>section>sidebar>.sidebar>.sidebar-inner>select-catalog {
  display: none;
}

.theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar>li>a>i.spy-icone-tdb {
  background-image: url('../images/icones/tdb.svg');
}

.theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar>li.active>a>i.spy-icone-tdb {
  background-image: url('../images/icones/tdb_active.svg');
}

.theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar>li>a>i.spy-icone-veille {
  background-image: url('../images/icones/veille.svg');
}

.theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar>li.active>a>i.spy-icone-veille {
  background-image: url('../images/icones/veille_active.svg');
}

.theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar>li>a>i.spy-icone-concurrents {
  background-image: url('../images/icones/concurrents.svg');
}

.theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar>li.active>a>i.spy-icone-concurrents {
  background-image: url('../images/icones/concurrents_active.svg');
}

.theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar>li>a>i.spy-icone-outils {
  background-image: url('../images/icones/outils.svg');
}

.theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar>li.active>a>i.spy-icone-outils {
  background-image: url('../images/icones/outils_active.svg');
}

.theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar>li>a>i.spy-icone-reglages {
  background-image: url('../images/icones/reglages.svg');
}

.theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar>li.active>a>i.spy-icone-reglages {
  background-image: url('../images/icones/reglages_active.svg');
}

.theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar .nav-parent .children {
    background: white;
}

/* Override states from theme.css */
.theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar>li.nav-parent.active>a,
.theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar>li.nav-parent.active>a:hover,
.theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar>li.nav-parent.active>a:focus,
.theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar>li.nav-parent.active>a:active
 {
    background-color: white !important;
    color: #282250 !important;
}

/* .theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar>li.active>a,
.theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar>li.active>a:hover,
.theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar>li.active>a:focus {
    background-color: white !important;
    color: black;
}

.sidebar .sidebar-inner .nav-sidebar>li>a span:not(.badge) {
    opacity: 1;
    padding: 0px 23px 16px 18px !important;
    line-height: 28px !important;
} */

.theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar>li.nav-parent.active.no-children {
    margin-right: 5px;
}



.theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar>li.nav-parent.no-children.active>a,
.theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar>li.nav-parent.no-children.active>a:hover,
.theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar>li.nav-parent.no-children.active>a:focus,
.theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar>li.nav-parent.no-children.active>a:active {
    background-color: #eeeff7 !important;
    color: #282250 !important;
    font-weight: bold !important;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    padding: 3px 10px;
}


/* .theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar>li.nav-parent.active>a:hover,
.theme-sltl.color-default .nav-sidebar>li.nav-parent.active>a:active {
    background-color: #eeeff7;
    color: #282250 !important;
    font-weight: bold !important;
} */
/* Changing font color on active */

.theme-sltl.color-default .sidebar .sidebar-inner .nav-sidebar .children>li.active>a {
    color: #282250 !important;
    /* font-weight: normal; */
}

/* default text color */
.theme-sltd .sidebar .sidebar-inner .nav-sidebar>li>a,
.theme-sltl .sidebar .sidebar-inner .nav-sidebar>li>a {
  color: #727273;
}
.theme-sltl.color-default .sidebar .sidebar-inner .sidebar-footer {
  width: 239px;
  zoom:1;
  background-color: white;
}

div.sidebar-inner>div{
  margin-top: 50px;
}

.sidebar .sidebar-inner .nav-sidebar {
    margin-bottom: 0;
    margin-top: 5px;
    border-bottom: 1px solid lightgray;
}

.sidebar .sidebar-inner .nav-sidebar>li>a {
    padding: 1px 10px 1px 15px;
    font-size: 14px;
    font-weight: normal;
    line-height: 30px;

}

.sidebar .sidebar-inner .nav-sidebar>li>a span:not(.badge) {
    opacity: 1;
    padding: 0px 23px 0 18px !important;
    line-height: 28px !important;
}

.sidebar .sidebar-inner .nav-sidebar .children>li>a>span.badge {
  margin-top: 5px !important;
  margin-right: 15px;
}

.sidebar .sidebar-inner .nav-sidebar .children>li>a {
    /* border: 1px solid #eeeff7; */
    border: 1px solid white;
    border-left: none;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    padding: 1px 0 0 62px !important;
    cursor: pointer;
    color: #727273 !important;
    margin: 10px 5px 10px 0;
    background: white;
    font-size: 14px;
    font-weight: normal;
    line-height: 30px;
}


.sidebar .sidebar-inner .nav-sidebar .children>li>a:focus,
.sidebar .sidebar-inner .nav-sidebar .children>li>a:active,
.sidebar .sidebar-inner .nav-sidebar .children>li.active>a {
    background: #eeeff7;
}


/* Dashboard link on active colors and style */

/* .sidebar .sidebar-inner .nav-sidebar>li>a:focus {
    background: #eeeff7;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    color: #282250 !important;
    font-weight: bold;
} */

.sidebar .sidebar-inner .nav-sidebar .children>li>a:hover {
    border: 1px solid lightgray;
    border-left: none;
}

.sidebar .sidebar-inner .menu-title.widget-title {
    padding: 8px 0px;
}

.sidebar .sidebar-inner .nav-sidebar .arrow {
    font-size: 20px !important;
    margin-right: 0 !important;
    margin-top: 5px;
    opacity: 0.8 !important;
    position: absolute;
    right: 10px;
}

.sidebar .sidebar-inner .sidebar-widgets {
    margin-bottom: 300px;
    padding: 0 5px 5px;
    background-color: white;
    margin-left: 5px;
}

.sidebar .sidebar-inner caption {
    width: 100% !important;
}

.sidebar .sidebar-inner .filter-red {
    filter: invert(60%) sepia(63%) saturate(1232%) hue-rotate(317deg) brightness(100%) contrast(94%);
}

.sidebar .sidebar-inner input {
    border: 1px solid #282250 !important;
    border-radius: 5px;
    /* display: -webkit-box !important; */
    min-height: 45px !important;
    width: 100%;
}

.sidebar .sidebar-inner div>md-autocomplete>md-autocomplete-wrap>input {
  border: 0px solid #282250 !important;
  min-height: 39px !important;
  font-size: 16px;
  line-height: 22px !important;
  font-weight: normal !important;
  text-transform: uppercase;
  text-align: center;
}
.sidebar .sidebar-inner div>md-autocomplete>md-autocomplete-wrap {
  /* border-top-right-radius: 25px;
  border-bottom-right-radius: 25px; */
  border-top: 1px solid rgb(238, 239, 247);
  border-right: 1px solid rgb(238, 239, 247);
  color: rgb(40, 34, 80) !important;
  font-weight: bold !important;
}

.sidebar .sidebar-inner .nav-sidebar li>a .fa.arrow {
    width: 15px;
}


/* ----------------------------------------------- COLLAPSED SIDEBAR  -----------------------------------------------*/

.sidebar-collapsed .sidebar {
    top: 70px;
    width: 54px;
}

.theme-sltl.color-default.sidebar-collapsed .sidebar .sidebar-inner{
    border-top: none;
}
.sidebar-collapsed .sidebar .sidebar-inner .nav-sidebar li a i {
  float: left;
}
.sidebar-collapsed .sidebar .sidebar-inner .nav-sidebar {
    margin: 0;
    padding-top: 35px;
}

@media screen and (min-width: 1024px){
  .sidebar-collapsed .sidebar .sidebar-inner .nav-sidebar>li.nav-hover:not(.nav-active)>a span:not(.badge),
  .sidebar-collapsed .sidebar .sidebar-inner .nav-sidebar>li.nav-hover.active>a span:not(.badge) {
      /* background: lightgrey !important;
      border: 1px solid lightgrey;
      border-radius: 5px; */

      /* opacity: 1; */
      /* padding: 0px 23px 16px 18px !important;
      line-height: 28px !important; */
      background-color: #eeeff7 !important;
      color: #282250 !important;
      font-weight: bold !important;
      border-top-right-radius: 25px;
      border-bottom-right-radius: 25px;
      padding: 3px 10px;
  }
  .sidebar-collapsed .sidebar .sidebar-inner .nav-sidebar>li.nav-hover>a span:not(.badge) {
      /* color: #121212; */
      opacity: 1;
  }

  .sidebar-collapsed .sidebar .sidebar-inner .nav-sidebar>li>a>span:not(.arrow) {
    top: 4px;
    left: 53px;
  }
  .sidebar-collapsed .sidebar .sidebar-inner .nav-sidebar li.nav-hover ul {
    left: 54px;
    top:34px;
  }
  .sidebar-collapsed .sidebar .sidebar-inner .nav-sidebar .children>li>a {
    padding-left: 18px !important;
  }
}



/* .sidebar-collapsed .sidebar .sidebar-inner .nav-sidebar {
    margin: 10px 5px 5px 5px;
} */

/* My catalog view*/
my-catalog {
  /* display: block; */
}


/* -----------------------------------------------  COMPETITOR VIEW   -----------------------------------------------*/

.btn-group-list-container {
    display: flex;
    flex-wrap: nowrap;
    /* max-height: 80px; */
    overflow-y: auto !important;
    margin: 28px 0 0 0;
}

.input-competitor {
      margin: 14px 0;
}

.input-competitor>.cadre-competitor>md-select-value>span>div   {
  min-height: 39px !important;
  font-size: 16px;
  line-height: 22px !important;
  font-weight: normal !important;
  text-transform: uppercase;
  text-align: center;
}

md-select.cadre-competitor:not([disabled]):focus .md-select-value {
    border-bottom-width: 0px;
    border-bottom-style: solid;
    padding-bottom: 0;
}

.option-competitor>div {
  min-height: 39px !important;
  font-size: 16px;
  line-height: 22px !important;
  font-weight: normal !important;
  text-transform: uppercase;
  text-align: center;
}

.cadre-competitor {
  border: 1px solid #282250 !important;
  border-radius: 5px !important;
  height: 48px !important;
}


/* ----------------------------------------------- SUIVI PRODUIT LISTE VIEW / TRACKING PRODUCTS LIST VIEW -----------------------------------------------*/
.tracking-products-widget-container {
  padding: 0 10px;
  margin-bottom: 20px;
}

.tracking-products-widget-container .table-bordered {
    border: 1px solid #F0F3F7;
}

.tracking-products-widget-container .table-bordered>tbody tr>td {
  border: none;
}

.tracking-products-widget-container .table > tbody tr > td
{
  padding: 8px 10px 8px 2px;
}

.tracking-products-widget-container .mCustomScrollBox {
    border: none;
}

#tracking-products-widget tbody {
    display: block;
    max-height: 150px;
    overflow: unset;
    padding: 0 30px;
}

#tracking-products-widget tr {
    cursor: context-menu;
}

#tracking-products-widget tr:hover {
  background-color: #EEEFF7;
}

.suiviProduitWidget .panel-header {
    color: #282250;
    font-family: Lato;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.35px;
    line-height: 34px;
    border-bottom: 1px solid grey;
    min-height: 15px !important;
    padding-bottom: 15px !important;
}

.suiviProduitWidget .panel-content {
    padding: 30px 10px 10px 20px !important;
    -webkit-border-radius: 0 0 2px 2px;
    -moz-border-radius: 0 0 2px 2px;
    border-radius: 0 0 2px 2px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.suiviProduitWidget .panel-footer {
    background-color: white !important;
    border-bottom-left-radius: none !important;
    border-bottom-right-radius: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-top: none !important;
    padding: none !important;
}

.server-action-menu {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
    background-repeat: repeat;
    border-radius: 10px;
    padding: 5px;
}

.suiviProduitWidget .tracking-widget-element {
    margin-bottom: 15px;
}

.suiviProduitWidget .special-panel-header {
    overflow-y: hidden;
    height: 48px !important;
    max-height: 48px: !important;
}


/* ----------------------------------------------- TRACKING-PRODUCT  VIEW -----------------------------------------------*/

.tabs-linetriangle .nav.nav-tabs>li>a {
    font-family: lato;
    font-size: 18px;
    color: #282250;
    font-weight: bold;
    font-style: normal !important;
    text-transform: none !important;
    padding: 11px 22px 4px !important;
}

.tabs-linetriangle .nav-tabs li:hover a {
    color: rgb(82, 57, 82) !important;
}


/* .tabs-linetriangle .nav-tabs li.active a {
    color: red !important;
} */

.nav-tabs>li.active>a {
    color: black !important;
    border-bottom: 3px solid black !important;
}


/* ----------------------------------------------- DASHBOARD  VIEW -----------------------------------------------*/

.panel-default>.panel-heading {
    background: #ffffff;
    padding-bottom: 20px;
    padding-top: 20px;
    border-bottom: 1px solid #f1f1f7 !important;
}

#dashboardView .panel {
    margin-bottom: 20px;
}

#dashboardView .panel-body {
    height: 500px !important;
    max-height: 500px !important;
    overflow-y: auto;
    overflow-x: auto;
}

#dashboardView .panel-body::-webkit-scrollbar {
    display: none;
}

#dashboardView .main-content .page-content .panel .panel-content i{
    padding-left: 10px ;
    padding-right: 10px ;
    padding-top: 5px ;
}

#dashboardView .widget-info .right {s
    float: none;
    padding-left: 90px;
}

.md-button-dashboard-widget {
  min-height: 10px;
  height: auto;
  line-height: 14px;
  margin: 0;
  padding: 0;
  display: block;
  min-width: 20px;
}

/* .highcharts-container {
    min-width: 400px !important;
} */

.highcharts-background {
    /* min-width: 400px !important; */
}

/* .highcharts-root {
    min-width: 400px !important;
} */

.equal {
    display: -webkit-flex;
    display: flex;
}

.graphique {
    max-height: 60px !important;
    min-height: 60px !important;
}


/* MD CONTEXTUAL BUTTON  */

#dashboardView .md-button {

    margin: -25px -20px !important;
    min-width: none !important;
    color: lightgrey;

}

div[id^='myWidget'] {
    margin-bottom: 20px;
}

#dashboardView .md-button:hover,
.md-button:focus {
    text-decoration: none;
    background-color: transparent !important;
}

.show.ng-hide,
.hide.ng-hide {
    animation-name: fadeOut;
    animation-duration: 0.1s;
}

.showDiv {
    animation-name: fadeIn;
    animation-duration: 0.1s;
}

md-icon {
    margin: auto;
    background-repeat: no-repeat no-repeat;
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    height: 100%;
    width: 64%;
}

.range-picker .md-button.md-default-theme.md-primary.md-raised,
.md-button.md-primary.md-raised,
.md-button.md-default-theme.md-primary.md-fab,
.md-button.md-primary.md-fab {
    color: white;
    background-color: #282250 !important;
}

.md-button.md-fab {
    z-index: 20;
    line-height: 56px;
    min-width: 0;
    width: 65px;
    height: 65px;
    vertical-align: middle;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    border-radius: 50%;
    background-clip: padding-box;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
    transition-property: all;
    transition-property: all;
    transition-property: background-color, box-shadow, -webkit-transform;
    transition-property: background-color, box-shadow, transform;
    transition-property: background-color, box-shadow, transform, -webkit-transform;
}

md-icon svg {
    fill: inherit;
}

md-icon[style*="color:"] svg [fill] {
    fill: inherit;
}

.spy-widget-picture {
    height: 160px;
    width: 160px;
}


/* ----------------------------------------------- EDIT OBJECT  VIEW VIEW.HTML COMPETITOR-LIST.HTML CARD.HTML-----------------------------------------------*/

#editView .panel {
    border-radius: 10px;
}

#editView .panel-heading {
    border-radius: 10px;
}

#editView .row {
    margin-bottom: 40px;
}

#editView .panel-body {
    height: 75vh;
    overflow: hidden;
}

#editView .modal-dialog {
    margin-top: 1%;
    /* z-index: 10000; */
    width: 85%;
}

#editView .modal-body {
    height: 85vh;
    overflow-y: auto;
}

#editView .table>thead>tr>th {
    vertical-align: bottom;
    border-bottom: 2px solid #eee;
}


#editView  button .fa-trash, .trash-link {

    font-size: 15px ;

}

.panel-header-widgets {
    min-height: 50px !important;
    padding: 0px !important;
}

.modal-body-widget {
    padding: 10px !important;
    overflow: auto !important;
    max-height: 83vh;
}

md-tabs .md-tab.md-active,
md-tabs .md-tab.md-active,
md-tabs .md-tab.md-active md-icon,
md-tabs .md-tab.md-active md-icon,
md-tabs .md-tab.md-focused,
md-tabs .md-tab.md-focused,
md-tabs .md-tab.md-focused md-icon,
md-tabs .md-tab.md-focused md-icon {
    font-family: Lato;
    font-size: 16px;
    font-weight: 900;
    color: #282250 !important;
}

md-tabs.md-default-theme .md-tab,
md-tabs .md-tab {
    font-family: Lato !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #727273 !important;
}


/* // TABLE HEADER IS FIXED  and body is scrollable ! https://stackoverflow.com/questions/21168521/table-fixed-header-and-scrollable-body*/

#editView .tableFixHead {
    overflow-y: auto;
    height: 400px;
}

#editView .tableFixHead thead th {
    position: sticky;
    top: 0;
}


/* Just common table stuff. Really. */

#editView table {
    border-collapse: collapse;
    width: 99%;
}

#editView  th {
    background: white;
}

#editView .table>tbody>tr>td,
.table>tfoot>tr>td {
    height: 50px;
    padding: 1px;
    vertical-align: middle;
}

#editView .FirstCollapsingDiv {
    margin-left: 15px;
    margin-top: 30px;
    margin-bottom: 30px;
}

#editView .control-btn {
    display: inline-block !important;
    position: absolute;
    right: 25px !important;
    top: 25px !important;
    z-index: 2;
}


/* ----------------------------------------------- MANUAL MATCHING VIEW -----------------------------------------------*/

/* Grid footer*/
#manualMatchingView .button-es-search {
    text-align: left;
    height: 70px;
    background-color: white;
    box-shadow: 1px 0px 6px lightgrey;
    border-collapse: collapse;
    border-style: hidden;
    display: table;
}

#manualMatchingView .button-es-search  > span {
  display: table-cell;
  vertical-align: middle;
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer;
}

/* Grid footer*/
#manualMatchingView .ui-grid-bottom-panel {
    text-align: left;
    height: 70px;
    margin-top: -10px;
    background-color: white;
    box-shadow: 1px 0px 6px lightgrey;
    border-collapse: collapse;
    border-style: hidden;
    display: table;
}

#manualMatchingView .ui-grid-bottom-panel > span {
  display: table-cell;
  vertical-align: middle;
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer;
}

/* Grids size*/
#manualMatchingView.spy-xxl-panel-view .grid {
    height: 390px;
    padding: 0px 25px 0px 25px;
}

/* Panels size*/
#manualMatchingView.spy-xxl-panel-view .panel-content {
    min-height: 400px !important;
    padding: 0px 15px 20px 15px !important;
}


#manualMatchingView.spy-xs-panel-view .panel-content.panel-content-competitor {
    min-height: unset !important;
    padding: 0px 15px 60px 15px !important;
}

/* CREATING THE + CIRCLED BUTTON -> */
#manualMatchingView #plus-icon-container {
    padding: 10px 8px !important;
     border: 1px solid #282250;
    margin-right: 10px;
}

#manualMatchingView #plus-icon-container:hover {
    background-color:lightgrey;
}

#manualMatchingView #plus-icon {
    padding-left: 3px !important;
}

/* RIGHT MENU MUST NOT BE STICKY - SURCLASSING THE .spy-right-menu class on this view*/
 #manualMatchingView .spy-right-menu {
    position: relative;
    left: calc(100% - 75px);
    top: 0px;
}



/* ----------------------------------------------- LOGIN VIEW -----------------------------------------------*/

.login-box,
.register-box {
    width: 450px;
    margin: 20% 50%;
}

.login-page,
.register-page {
    background: #d2d6de;
}

.bg-img {
    background-image: url("../images/various/background-left.png");
    background-repeat: no-repeat;
    background-size: 30vw 100vh;
}

.spy-input-xl-login {
    width: 100%;
    color: #282250;
    font-family: Lato;
    letter-spacing: -0.26px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 20px;
    text-align: center;
    height: 45px;
    border: 2px solid #282250;
}

.append-icon i {
    color: #1b1e25;
    font-size: 18px;
    height: 34px;
    left: auto;
    line-height: 34px;
    position: absolute;
    right: 89%;
    top: 5px;
    width: 20px;
    transition: 0.5s;
}

.spy-input-xl-login:focus {
    box-shadow: 1px 1px 1px lightgrey;
    transition: box-shadow 0.3s ease-in-out;
}

.form-control:focus {
    background-color: white !important;
    border: 2px solid rgb(79, 41, 167);
    outline: none;
    outline: none !important;
}

#logoDisplayResponsive {
    display: none;
}

#advertizing {
    position: absolute;
    top: 75%;
    left: 6vw;
    color: black;
    z-index: 10000;
    background-color: transparent;
    width: 20vw;
    height: 20em;
}

@media only screen and (min-width: 1199px) and (max-width: 1280px) {
    #manualMatchingView .button-es-search > span {
        display: table-cell;
        vertical-align: bottom;
        padding-left: 20px;
        padding-right: 20px;
        cursor: pointer;
    }
}

@media only screen and (max-width: 900px) {
    .login-box,
    .register-box {
        width: 360px;
        margin: 13% auto;
    }
    .bg-img {
        background-image: none;
    }
    #advertizing {
        display: none;
    }
    #logoDisplayResponsive {
        display: block;
    }
}


/* ----------------------------------------------- UNIT-MAPPING VIEW -----------------------------------------------*/

#unitMappingView md-input-container,
#currencyMappingView md-input-container {
    padding: 0px;
    margin: 0px 0px 0px;
}

.mapping-dunites {
    height: 39px;
    width: 246px;
    color: #282250;
    font-family: Lato;
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -0.4px;
    line-height: 39px;
}
.spy-label-unit-mapping {
    height: 15px;
    width: 189px;
    color: #8A8CAA;
    font-family: Lato;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: -0.15px;
    line-height: 15px;
    text-transform: uppercase;
}
.spy-select-unit-mapping {
    box-sizing: border-box;
    height: 35px;

    border: 1px solid rgb(40, 34, 80);
    border-radius: 5px;
    background-color: rgb(255, 255, 255);
}
.spy-select-attributes-width {
    width: 400;
}
.spy-select-competitor-width {
    width: 143px;
}

md-select.spy-select-unit-mapping .md-select-value {
    padding-left: 8px;
    width: 84px;
    color: #A7A9C0;
    font-family: Lato;
    font-size: 14px;
    letter-spacing: 0.5px;
    line-height: 17px;
}

md-select.spy-select-unit-mapping .md-select-value span div  {
    width: 54px;
    color: #282250;
    font-family: Lato;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.5px;
    line-height: 17px;
}

.spy-div-operator-unit-mapping {
    background-color: #282250;
    margin-top: 23px;
    margin-left: 25%;
    margin-right: 25%;
    border-radius: 4px;
    padding: 5px;
    height: 192px;
    width: 50%;
}

.cadre_2 {
    border: 1px solid #282250 !important;
    border-radius: 5px;
    min-height: 45px !important;
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
    -webkit-appearance: none;
    background-position-x: 244px;
    width: 100%;
}

.cadre_2:focus {
    border: 1px solid #5a8dee !important;
    box-shadow: 3px 3px 3px lightgrey;
}

md-select-menu md-content {
    border: 1px solid #282250 !important;
    border-radius: 5px !important;
    min-width: 50px;
    min-height: 45px;
    max-height: 162px;
    overflow-y: auto;
}

.input-group-btn {
    width: 100% !important;
    white-space: nowrap;
    vertical-align: none;
}

.unitMappingIcon {
    height: 20px;
    width: 20px;
}




/* ----------------------------------------------- MARGIN-SIMULATOR VIEW -----------------------------------------------*/

.tabs-linetriangle .tab-content {
    padding: 0px 0 !important;
}


/* ----------------------------------------------- MARGE ADDITIONELLE FORM.HTML -----------------------------------------------*/


/* Special number position */

/* .spy-special-number-position-1 {
    margin-top: 32px;
    position: absolute;
} */


/* ----------------------------------------------- GRAPHIQUES CHARTS VIEW.HTML / HISTORY.HTML -----------------------------------------------*/

/* Border around the chosen month */
rect.highcharts-button-box{
  stroke: #282250;
  stroke-width: 1px;
  stroke-linejoin: round;
}
.MyChartTooltip {
    position: relative;
    z-index: 50;
    height:40px;
}

.highcharts-crosshair {
  stroke: '#282250';
}

.highcharts-label.highcharts-tooltip-header .highcharts-label-box {
  stroke: '#282250'
}

/* ICONS */

.icon-filter {
  background-image: url('../images/icones/filter.svg');
}

.tooltip-custom-general-container {
    position: relative;
    width: 146px;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 1px;
}

.container-name-historic {
    float:left;
    width: 90px;
}

.point-format-name {
    color: #FFFFFF;
    font-family: "Lato";
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0;
    text-align:center
}

.container-count-historic {
    width: 148px;
    background-color: white;
}

p.count {
    color: #282250;
    font-family: Lato;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: -0.18px;
    line-height: 17px;
    margin-top: 3px;
    margin-bottom: 1px;
    text-align: center;
}

.blockUI {
  margin-top: 0px !important;
}