/*
    Created on : 28 janv. 2015, 16:02:15
    Author     : lx
*/
:root{
    --title-bg-color: #292F36;
    --title-bg-color2: #5f6469;
    --title-border-color: #D0CFEC;
    --title-text-color: #F1F7EE;
    --title-border-radius: 20px;
    --shadow-color: #738290;

    --scrollbar-size: .475rem;
    --scrollbar-minlength: 1.5rem; /* Minimum length of scrollbar thumb (width of horizontal, height of vertical) */
    --scrollbar-ff-width: thin; /* FF-only accepts auto, thin, none */
    --scrollbar-track-color: transparent;
    --scrollbar-color: rgba(0,0,0,.2);
    --scrollbar-color-hover: rgba(0,0,0,.3);
    --scrollbar-color-active: rgb(0,0,0);

    --diameter: 24px;
    --border-width: 2px;

    --shadow-color: 0deg 0% 63%;
    --shadow-elevation-low:
        0.2px 0.7px 0.8px hsl(var(--shadow-color) / 0.34),
        0.3px 1.1px 1.3px -1.2px hsl(var(--shadow-color) / 0.34),
        0.7px 2.8px 3.2px -2.5px hsl(var(--shadow-color) / 0.34);
    --shadow-elevation-medium:
        0.2px 0.7px 0.8px hsl(var(--shadow-color) / 0.36),
        0.6px 2.3px 2.7px -0.8px hsl(var(--shadow-color) / 0.36),
        1.5px 5.7px 6.6px -1.7px hsl(var(--shadow-color) / 0.36),
        3.6px 13.9px 16.2px -2.5px hsl(var(--shadow-color) / 0.36);
    --shadow-elevation-high:
        0.2px 0.7px 0.8px hsl(var(--shadow-color) / 0.34),
        1.1px 4px 4.7px -0.4px hsl(var(--shadow-color) / 0.34),
        2px 7.6px 8.8px -0.7px hsl(var(--shadow-color) / 0.34),
        3.3px 12.4px 14.4px -1.1px hsl(var(--shadow-color) / 0.34),
        5.2px 19.8px 23px -1.4px hsl(var(--shadow-color) / 0.34),
        8.1px 31px 36px -1.8px hsl(var(--shadow-color) / 0.34),
        12.4px 47.1px 54.8px -2.1px hsl(var(--shadow-color) / 0.34),
        18.2px 69.4px 80.7px -2.5px hsl(var(--shadow-color) / 0.34);

    --yellowgreen: hsl(79deg 74% 45%);
    --mango: hsl(43deg 84% 50%);
    --persimmon: hsl(20deg 87% 50%);
    --frenchviolet: hsl(270deg 87% 45%);
    --byzantine: hsl(316deg 87% 45%);
    --etonblue: hsl(123deg 27% 69%);
    --transition-duration: 1s;
}

body {
    overflow-x: hidden;
}
.wrap {
    height: 100%;
    background-color: #444;
}

.custom-counter {
    -webkit-transform: scale(.6);
    right: -6px;
    top: -6px;
}

.wrap nav {
    color: #eee;
}
.wrap > .container {
    position: absolute;
    top: 58px;
    padding: 0;
    height:  calc(100% - 58px);
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 800px) and (max-width: 1300px) {
    .card-columns {
        column-count: 2;
    }
}
@media (max-width: 800px) {
    .card-columns {
        column-count: 1;
    }
}

.hidden-at-start {
    opacity: 0;
    transition: 1s opacity ease-in-out;
}
.hide-after-load {
    opacity: 1;
    transition: 1s opacity ease-in-out;
}
.introjs-tooltipReferenceLayer .fas,
.introjs-tooltipReferenceLayer .far,
.introjs-tooltipReferenceLayer .fal {
    font-family: "Font Awesome 5 Pro" !important;
}
.introjs-tooltipReferenceLayer .fad {
    font-family: "Font Awesome 5 Duotone" !important;
}
.bloc-title {
    position: relative;
    z-index: 2;
    font-weight: bolder;
    font-size: 1.7em;
}
.bloc-list {
    height: calc(100% - 60px);
    overflow: auto;
}

.fixed-top {
    z-index: 1030;
}

.collapse.navbar-collapse {
    justify-content: space-between !important;
}

.cookie-consent {
    position: fixed;
    bottom: -50px;
    width: 100%;
    padding: 5px;
    color: #fff;
    font-weight: bolder;
    font-size: 14pt;
    background-color: #222;
    z-index: 15000;

    transition: bottom 500ms;
}

.full-overlay {
    display: none;
    z-index:11000;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.75;
}
.inactivity-block {
    display: none;
    z-index: 11001;
    position: absolute;
    top: 30%;
    width: 60%;

    padding: 10px;
    font-size: 1.5em;
    background-color: #efefef;
    color: #333;
    text-align: center;
    border: 2px solid #333;
    border-radius: 8px;
    box-shadow: 0 0 30px 10px #333;
}

.site-index {
    height: 100%;
}

.site-login,
.site-error,
.choose-client {
    background-color:  #eee;
    border: 1px solid #000;
    border-radius: 4px;

    box-shadow: 0 4px 10px #000;
}

#clock {
    color: #eee;
}

.navbar {
    margin-bottom: 0;
}

nav.nvt ul {
    margin: 0 !important;
}

/**** LOADER *****/
.loading-circle {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:transparent;
  border:3px solid #3c3c3c;
  border-radius:50%;
  text-align:center;
  font-family:sans-serif;
  font-weight: bold;
  color:#f29200;
  letter-spacing: .25em;
  text-transform:uppercase;
  box-shadow: 0 2px 1px rgba(0,0,0,0.09),
            0 4px 2px rgba(0,0,0,0.09),
            0 8px 4px rgba(0,0,0,0.09),
            0 16px 8px rgba(0,0,0,0.09),
            0 32px 16px rgba(0,0,0,0.09),
            inset 0 2px 1px rgba(0,0,0,0.09),
            inset 0 4px 2px rgba(0,0,0,0.09),
            inset 0 8px 4px rgba(0,0,0,0.09),
            inset 0 16px 8px rgba(0,0,0,0.09),
            inset 0 32px 16px rgba(0,0,0,0.09);
}
.loading-circle:before {
  content:'';
  position:absolute;
  top:-3px;
  left:-3px;
  width:calc(100% + 6px);
  height:calc(100% + 6px);
  border:3px solid transparent;
  border-top:3px solid #f29200;
  border-right:3px solid #f29200;
  border-radius:50%;
  animation:animateC 2s linear infinite;
}
.spanLoader {
  display:block;
  position:absolute;
  top:calc(50% - 2px);
  left:50%;
  width:50%;
  height:4px;
  background:transparent;
  transform-origin:left;
  animation:animate 2s linear infinite;
}
.spanLoader:before {
  content:'';
  position:absolute;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#f29200;
  top:-6px;
  right:-8px;
  box-shadow:0 0 25px #f29200;
}
@keyframes animateC {
  0% {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}
@keyframes animate {
  0% {transform:rotate(45deg);}
  100% {transform:rotate(405deg);}
}
.loading-circle.small:before {
  animation:animateC 1s linear infinite;
}
.loading-circle.small .spanLoader{
  animation:animate 1s linear infinite;
}


/***** SIDE BAR *****/
.sidebar {
    z-index: 1001;
}
.sidebar-content {
    background-color: rgba(248, 249, 250, .3) !important;
    backdrop-filter: blur(3px);
}
.sidebar-pane {
    height: 100%;
}
.sidebar-header {
	margin-bottom: 15px;
}
.sidebar-tabs>ul>li.active,
.sidebar-header {
    background-color: rgb(52, 58, 64);
}



/***** Coloris *****/
.clr-picker {
    z-index: 1100;
}
.clr-field button {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    margin-right: 5px;
}
.circle-color-picker,
.circle-color-picker .clr-field {
    width: 20px;
    height: 20px;
}
.circle-color-picker .clr-field input,
.circle-color-picker .clr-field button {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    margin: 0;
}
.circle-color-picker .clr-field input {
    opacity: 0;
}
.circle-color-picker .clr-field button {
    cursor: pointer;
    --shadow-elevation-medium:
        0px 0.5px 0.6px hsl(var(--shadow-color) / 0.29),
        0px 1.3px 1.5px -0.6px hsl(var(--shadow-color) / 0.29),
        0px 2.5px 2.8px -1.2px hsl(var(--shadow-color) / 0.29),
        0px 5px 5.6px -1.9px hsl(var(--shadow-color) / 0.29),
        0.1px 9.7px 10.9px -2.5px hsl(var(--shadow-color) / 0.29);
    box-shadow: var(--shadow-elevation-medium);
}



/***** Fonts *****/
@font-face {
    font-family: arialblack;
    src: url(../fonts/arial-black.ttf);
}
.font-arialblack {
    font-family: arialblack;
}

/***** Utils *****/
.mh-0 {
    min-height: 0;
}
.mt5 {
    margin-top: 5px;
}
.mr5 {
    margin-right: 5px;
}
.mt10 {
    margin-top: 10px;
}
.mr10 {
    margin-right: 10px;
}
.pl20 {
    padding-left: 20px;
}
.one-line {
    white-space: nowrap;
    overflow: auto;
}
.text-light {
    font-weight: lighter;
}
.text-strong {
    font-weight: bolder;
}
.text-small {
    font-size: 0.8rem;
}
.text-red {
    color: #f00;
}
.text-shadow-large {
    text-shadow: 1px 1px 4px #555;
}
.text-shadow-thin {
    text-shadow: 1px 1px 2px #555;
}
.pointer {
    cursor: pointer;
}
.simple-circle {
    width: var(--diameter);
    height: var(--diameter);
    border-width: var(--border-width) !important;
}
.transition-position {
    transition: left var(--transition-duration), right var(--transition-duration), top var(--transition-duration), bottom var(--transition-duration);
}

.summary-text {
    font-family: arialblack;
    font-size: 2rem;
    font-weight: bold;
}

.text-shadow-on-hover:hover {
    text-shadow: 1px 2px 3px #9
}

.border-info-purple {
    border-color: #6346cf !important;
}

.gradient-info {
    background: rgb(23,162,184);
    background: linear-gradient(180deg, rgba(23,162,184,1) 0%, rgba(23,162,184,1) 6%, rgba(255,255,255,1) 58%);
}
.gradient-success {
    background: rgb(40,167,69);
    background: linear-gradient(180deg, rgba(40,167,69,1) 0%, rgba(40,167,69,1) 6%, rgba(255,255,255,1) 58%);
}
.gradient-warning {
    background: rgb(255,193,7);
    background: linear-gradient(180deg, rgba(255,193,7,1) 0%, rgba(255,193,7,1) 6%, rgba(255,255,255,1) 58%);
}
.gradient-danger {
    background: rgb(220,53,69);
    background: linear-gradient(180deg, rgba(220,53,69,1) 0%, rgba(220,53,69,1) 6%, rgba(255,255,255,1) 58%);
}


.text-frenchviolet {
    color: var(--frenchviolet) !important;
}
.border-frenchviolet {
    border-color: var(--frenchviolet) !important;
}
.text-byzantine {
    color: var(--byzantine) !important;
}
.border-byzantine {
    border-color: var(--byzantine) !important;
}
.text-etonblue {
    color: var(--etonblue) !important;
}
.border-etonblue {
    border-color: var(--etonblue) !important;
}


.text-mango {
    color: var(--mango) !important;
}
.border-mango {
    border-color: var(--mango) !important;
}
.gradient-mango {
    background: var(--mango);
    background: linear-gradient(180deg, var(--mango) 0%, var(--mango) 6%, rgba(255,255,255,1) 58%);
}
.me-shadow-mango {
    --shadow-elevation-medium:
        0px 0.5px 0.6px hsl(var(--mango) / 0.29),
        0px 1.3px 1.5px -0.6px hsl(var(--mango) / 0.29),
        0px 2.5px 2.8px -1.2px hsl(var(--mango) / 0.29),
        0px 5px 5.6px -1.9px hsl(var(--mango) / 0.29),
        0.1px 9.7px 10.9px -2.5px hsl(var(--mango) / 0.29);
    box-shadow: var(--shadow-elevation-medium);
}
.text-yellowgreen {
    color: var(--yellowgreen) !important;
}
.border-yellowgreen {
    border-color: var(--yellowgreen) !important;
}
.gradient-yellowgreen {
    background: var(--yellowgreen);
    background: linear-gradient(180deg, var(--yellowgreen) 0%, var(--yellowgreen) 6%, rgba(255,255,255,1) 58%);
}
.me-shadow-yellowgreen {
    --shadow-elevation-medium:
        0px 0.5px 0.6px hsl(var(--yellowgreen) / 0.29),
        0px 1.3px 1.5px -0.6px hsl(var(--yellowgreen) / 0.29),
        0px 2.5px 2.8px -1.2px hsl(var(--yellowgreen) / 0.29),
        0px 5px 5.6px -1.9px hsl(var(--yellowgreen) / 0.29),
        0.1px 9.7px 10.9px -2.5px hsl(var(--yellowgreen) / 0.29);
    box-shadow: var(--shadow-elevation-medium);
}
.text-persimmon {
    color: var(--persimmon) !important;
}
.border-persimmon {
    border-color: var(--persimmon) !important;
}
.gradient-persimmon {
    background: var(--persimmon);
    background: linear-gradient(180deg, var(--persimmon) 0%, var(--persimmon) 6%, rgba(255,255,255,1) 58%);
}
.me-shadow-persimmon {
    --shadow-elevation-medium:
        0px 0.5px 0.6px hsl(var(--persimmon) / 0.29),
        0px 1.3px 1.5px -0.6px hsl(var(--persimmon) / 0.29),
        0px 2.5px 2.8px -1.2px hsl(var(--persimmon) / 0.29),
        0px 5px 5.6px -1.9px hsl(var(--persimmon) / 0.29),
        0.1px 9.7px 10.9px -2.5px hsl(var(--persimmon) / 0.29);
    box-shadow: var(--shadow-elevation-medium);
}
.border-lightgrey {
    border-color: hsl(0, 0%, 60%) !important;
}
.gradient-lightgrey {
    background: hsl(0, 0%, 60%);
    background: linear-gradient(180deg, hsl(0, 0%, 60%) 0%, hsl(0, 0%, 60%) 6%, rgba(255,255,255,1) 58%);
}

.gradient-lightgrey2 {
    background: hsl(0, 0%, 440%);
    background: linear-gradient(180deg, hsl(0, 0%, 60%) 0%, rgba(255,255,255,1) 15%);
}
.me-shadow-lightgrey {
    --shadow-color: 0deg 0% 47%;
    --shadow-elevation-medium:
        0px 0.5px 0.6px hsl(var(--shadow-color) / 0.29),
        0px 1.3px 1.5px -0.6px hsl(var(--shadow-color) / 0.29),
        0px 2.5px 2.8px -1.2px hsl(var(--shadow-color) / 0.29),
        0px 5px 5.6px -1.9px hsl(var(--shadow-color) / 0.29),
        0.1px 9.7px 10.9px -2.5px hsl(var(--shadow-color) / 0.29);
    box-shadow: var(--shadow-elevation-medium);
}

.border-bottom-6 {
    border-bottom-width: 6px !important;
}

.hover-opacity {
    opacity: .5;
}
.hover-opacity:hover {
    opacity: 1;
}

@media (min-width: 1400px) {
    .d-xxl-none {
        display: none !important;
    }
    .d-xxl-block {
        display: block !important;
    }
    .d-xxl-inline {
        display: inline !important;
    }
    .col-xxl-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }
    .col-xxl-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
}
@media (min-width: 1600px) {
    .d-xxxl-none {
        display: none !important;
    }
    .d-xxxl-block {
        display: block !important;
    }
    .d-xxxl-inline {
        display: inline !important;
    }
    .col-xxxl-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }
    .col-xxxl-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
}
@media (min-width: 1800px) {
    .d-xxxxl-none {
        display: none !important;
    }
    .d-xxxxl-block {
        display: block !important;
    }
    .d-xxxxl-inline {
        display: inline !important;
    }
    .col-xxxxl-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }
    .col-xxxxl-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
}

.show-text-on-hover span {
    display: none;
}
.show-text-on-hover:hover span {
    display: inline;
}




/*
.border-purple {
    border-color: #6346cf !important;
}
.gradient-purple {
    background: rgb(99, 70, 207);
    background: linear-gradient(180deg, rgba(99, 70, 207,1) 0%, rgba(99, 70, 207,1) 6%, rgba(255,255,255,1) 58%);
}
.border-sky {
    border-color: #33d1ea !important;
}
.gradient-sky {
    background: rgb(99, 70, 207);
    background: linear-gradient(180deg, rgba(51, 209, 234,1) 0%, rgba(51, 209, 234,1) 6%, rgba(255,255,255,1) 58%);
}
.border-red {
    border-color: #f6004e !important;
}
.gradient-red {
    background: rgb(99, 70, 207);
    background: linear-gradient(180deg, rgba(246, 0, 78,1) 0%, rgba(246, 0, 78,1) 6%, rgba(255,255,255,1) 58%);
}
.border-green {
    border-color: #73b54d !important;
}
.gradient-green {
    background: rgb(99, 70, 207);
    background: linear-gradient(180deg, rgba(115, 181, 77,1) 0%, rgba(115, 181, 77,1) 6%, rgba(255,255,255,1) 58%);
}

.border-pewterblue {
    border-color: #91ADC2 !important;
}
.gradient-pewterblue {
    background: rgb(145, 173, 194);
    background: linear-gradient(180deg, rgba(145, 173, 194,1) 0%, rgba(145, 173, 194,1) 6%, rgba(255,255,255,1) 58%);
}
.border-wildblueyonder {
    border-color: #9BA0BC !important;
}
.gradient-wildblueyonder {
    background: rgb(155, 160, 188);
    background: linear-gradient(180deg, rgba(155, 160, 188,1) 0%, rgba(155, 160, 188,1) 6%, rgba(255,255,255,1) 58%);
}
.border-lavendergray {
    border-color: #C1B8C8 !important;
}
.gradient-lavendergray {
    background: rgb(193, 184, 200);
    background: linear-gradient(180deg, rgba(193, 184, 200,1) 0%, rgba(193, 184, 200,1) 6%, rgba(255,255,255,1) 58%);
}

.border-darkjunglegreen {
    border-color: #002626 !important;
}
.gradient-darkjunglegreen {
    background: rgb(0, 38, 38);
    background: linear-gradient(180deg, rgba(0, 38, 38,1) 0%, rgba(0, 38, 38,1) 6%, rgba(255,255,255,1) 58%);
}
.border-warmblack {
    border-color: #0E4749 !important;
}
.gradient-warmblack {
    background: rgb(14, 71, 73);
    background: linear-gradient(180deg, rgba(14, 71, 73,1) 0%, rgba(14, 71, 73,1) 6%, rgba(255,255,255,1) 58%);
}
.border-alabaster {
    border-color: #EFE7DA !important;
}
.gradient-alabaster {
    background: rgb(239, 231, 218);
    background: linear-gradient(180deg, rgba(239, 231, 218, 1) 0%, rgba(239, 231, 218,1) 6%, rgba(255,255,255,1) 58%);
}
.border-bluencs {
    border-color: #118AB2 !important;
}
.gradient-bluencs {
    background: rgb(17, 138, 178);
    background: linear-gradient(180deg, rgba(17, 138, 178, 1) 0%, rgba(17, 138, 178,1) 6%, rgba(255,255,255,1) 58%);
}
.border-eaglegreen {
    border-color: #073B4C !important;
}
.gradient-eaglegreen {
    background: rgb(7, 59, 76);
    background: linear-gradient(180deg, rgba(7, 59, 76, 1) 0%, rgba(7, 59, 76,1) 6%, rgba(255,255,255,1) 58%);
}
*/


.circle {
    width: 24px;
    height: 24px;
    padding-top: 2px;
    margin-right: 8px;

    font-size: 7.5pt;
    line-height: 12pt;
    font-weight: bold;
    text-align: center;

    color: #000;
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 50%;

    box-shadow: 0 0 4px #444, 0 0 1px #f00;
}
.circle.d35 {
    width: 35px;
    height: 35px;
    font-size: 1.2em;
    line-height: 1.2em;
}
.circle.ms {
    padding-top: 5px;
    line-height: 0.6em;
    color: #fff;
    background-color: #600071;
    border-color: #d800ff;
}
.circle.os {
    color: #000;
    background-color: #ff0;
    border-color: #808000;
}
.circle.stop {
    color: #000;
    background-color: #ff8a00;
    border-color: #804500;
}
.circle.good {
    margin: auto;
    background-color: #b3f442;
    color: #1B8031;
    border-color: #1B8031;
    text-shadow: none;
}
.circle.medium {
    margin: auto;
    background-color: #f4f441;
    color: #75750C;
    border-color: #75750C;
    text-shadow: none;
}
.circle.poor {
    margin: auto;
    background-color: #f4d442;
    color: #755A0C;
    border-color: #755A0C;
    text-shadow: none;
}
.circle.bad,
.circle.danger {
    margin: auto;
    background-color: #f44141;
    color: #FEE6D9;
    border-color: #750C30;
    text-shadow: none;
}
.circle.danger {
    background-color: #FF0000;
    color: #FFDDCC;
    border-color: #FFDDCC;
}
.circle.default {
    margin: auto;
    background-color: #efefef;
    color: #444;
    border-color: #444;
    text-shadow: none;
}
.clickable:hover .circle.good,
.clickable:hover .circle.medium,
.clickable:hover .circle.poor,
.clickable:hover .circle.bad {
    box-shadow: 0 1px 1px rgba(0,0,0,0.11),
                0 2px 2px rgba(0,0,0,0.11),
                0 4px 4px rgba(0,0,0,0.11),
                0 6px 8px rgba(0,0,0,0.11),
                0 8px 16px rgba(0,0,0,0.11);
}
.tag-image-round {
    border-radius: 50%;
    height: 40px;
}
.tag-image-rounded {
    border-radius: 15px;
    width: 100%;
    height: auto;
    border: 1px solid #000;
    box-shadow: 0 1px 1px rgba(0,0,0,0.08),
                0 2px 2px rgba(0,0,0,0.12),
                0 4px 4px rgba(0,0,0,0.16),
                0 8px 8px rgba(0,0,0,0.20);
    margin-top: 5px;
    margin-bottom: 5px;
}
.short-shadow {
    box-shadow: 0 1px 1px rgba(0,0,0,0.11),
                0 2px 2px rgba(0,0,0,0.11),
                0 4px 4px rgba(0,0,0,0.11),
                0 6px 8px rgba(0,0,0,0.11),
                0 8px 16px rgba(0,0,0,0.11);
}
.long-shadow {
    box-shadow: 0 2px 1px rgba(0,0,0,0.09),
                0 4px 2px rgba(0,0,0,0.09),
                0 8px 4px rgba(0,0,0,0.09),
                0 16px 8px rgba(0,0,0,0.09),
                0 32px 16px rgba(0,0,0,0.09);
}
.dreamy-shadow {
    box-shadow: 0 1px 2px rgba(0,0,0,0.07),
                0 2px 4px rgba(0,0,0,0.07),
                0 4px 8px rgba(0,0,0,0.07),
                0 8px 16px rgba(0,0,0,0.07),
                0 16px 32px rgba(0,0,0,0.07),
                0 32px 64px rgba(0,0,0,0.07);
}
.le-shadow {
    box-shadow: var(--shadow-elevation-low);
}
.me-shadow {
    box-shadow: var(--shadow-elevation-medium);
}
.he-shadow {
    box-shadow: var(--shadow-elevation-high);
}

.me-shadow-dark {
    --shadow-color:  0deg 0% 50%;
    --shadow-elevation-medium:
        0.2px 0.7px 0.8px hsl(var(--shadow-color) / 0.36),
        0.6px 2.3px 2.7px -0.8px hsl(var(--shadow-color) / 0.36),
        1.5px 5.7px 6.6px -1.7px hsl(var(--shadow-color) / 0.36),
        3.6px 13.9px 16.2px -2.5px hsl(var(--shadow-color) / 0.36);
    box-shadow: var(--shadow-elevation-medium);
}
.he-shadow-dark {
    --shadow-color:  0deg 0% 30%;
    --shadow-elevation-high:
        0.2px 0.7px 0.8px hsl(var(--shadow-color) / 0.34),
        1.1px 4px 4.7px -0.4px hsl(var(--shadow-color) / 0.34),
        2px 7.6px 8.8px -0.7px hsl(var(--shadow-color) / 0.34),
        3.3px 12.4px 14.4px -1.1px hsl(var(--shadow-color) / 0.34),
        5.2px 19.8px 23px -1.4px hsl(var(--shadow-color) / 0.34),
        8.1px 31px 36px -1.8px hsl(var(--shadow-color) / 0.34),
        12.4px 47.1px 54.8px -2.1px hsl(var(--shadow-color) / 0.34),
        18.2px 69.4px 80.7px -2.5px hsl(var(--shadow-color) / 0.34);
    box-shadow: var(--shadow-elevation-high);
}


.datepicker table tr td.day.highlight {
    background-color: #d3ecf5;
}
.datepicker table tr td.day.highlight:hover {
    background-color: #d6d6d6;
}
.datepicker table tr td.active.highlight {
    color: #ffffff;
    background-color: #3276b1;
    border-color: #285e8e;
}

.badge-floating {
    position: absolute !important;
    margin-left: -5px;
    margin-top: 5px;
    font-size: .6em;
}


.event-card.active {
    border-width:  2px;
    border-left-width: 8px;
}
.me-shadow-success,
.event-card.border-success.active,
.event-card.border-success:hover {
    --shadow-color: 134deg 70% 23%;
    --shadow-elevation-medium:
        0px 0.5px 0.6px hsl(var(--shadow-color) / 0.36),
        0px 1.7px 1.9px -0.8px hsl(var(--shadow-color) / 0.36),
        -0.1px 4.2px 4.7px -1.7px hsl(var(--shadow-color) / 0.36),
        -0.1px 10.3px 11.6px -2.5px hsl(var(--shadow-color) / 0.36);
    box-shadow: var(--shadow-elevation-medium);
}
.event-card.border-success.active,
.event-card.border-success:hover {
    z-index:  10;
}
.me-shadow-warning,
.event-card.border-warning.active,
.event-card.border-warning:hover {
    --shadow-color: 45deg 97% 30%;
    --shadow-elevation-medium:
        0px 0.5px 0.6px hsl(var(--shadow-color) / 0.36),
        0px 1.7px 1.9px -0.8px hsl(var(--shadow-color) / 0.36),
        -0.1px 4.2px 4.7px -1.7px hsl(var(--shadow-color) / 0.36),
        -0.1px 10.3px 11.6px -2.5px hsl(var(--shadow-color) / 0.36);
    box-shadow: var(--shadow-elevation-medium);
}
.event-card.border-warning.active,
.event-card.border-warning:hover {
    z-index:  10;
}
.me-shadow-danger,
.event-card.border-danger.active,
.event-card.border-danger:hover {
    --shadow-color: 355deg 67% 31%;
    --shadow-elevation-medium:
        0px 0.5px 0.6px hsl(var(--shadow-color) / 0.36),
        0px 1.7px 1.9px -0.8px hsl(var(--shadow-color) / 0.36),
        -0.1px 4.2px 4.7px -1.7px hsl(var(--shadow-color) / 0.36),
        -0.1px 10.3px 11.6px -2.5px hsl(var(--shadow-color) / 0.36);
    box-shadow: var(--shadow-elevation-medium);
}
.event-card.border-danger.active,
.event-card.border-danger:hover {
    z-index:  10;
}

.z-index-1 {
    z-index: 10;
}

.resizable {
    touch-action: none;
    box-sizing: border-box;
}

/***** Custom button and active style *****/
/*** datetimepicker detailed report and home light tag card ***/
.btn-nvt-dark {
    color: #eee;
    background-color: rgb(52, 58, 64);
    border-color: rgb(52, 58, 64);
}
.btn-nvt-dark:hover {
    color:  #fff;
    background-color: rgb(22, 28, 34);
}
.btn-nvt-dark:focus{
    box-shadow: 0 0 0 0.2rem rgb(82 88 93 / 50%);
}

.w-100 .Zebra_DatePicker_Icon_Wrapper {
    width: 100% !important;
}
.inline_datepicker .Zebra_DatePicker {
    position: initial;
}
.clock-timepicker {
    display: block !important;
}
.clock-timepicker input {
    min-width: 100% !important;
}
.Zebra_DatePicker .dp_body td.custom-day {
    background: #d3ecf5;
}.Zebra_DatePicker .dp_body td.custom-day.dp_disabled {
    background: none;
}

.close-option {
    position: absolute;
    right: -1px;
    top: -1px;
    z-index: 10;
    box-shadow: -3px 3px 6px #888;
    border-radius: 3px;
}
.isactive {
    z-index: 2;
}
.followme-green {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e9efb8+0,e9efb8+2,c3d825+5,dbf043+29&1+0,0+29 */
    background: -moz-linear-gradient(left,  rgba(233,239,184,1) 0%, rgba(233,239,184,0.93) 2%, rgba(195,216,37,0.83) 5%, rgba(219,240,67,0) 29%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(233,239,184,1) 0%,rgba(233,239,184,0.93) 2%,rgba(195,216,37,0.83) 5%,rgba(219,240,67,0) 29%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(233,239,184,1) 0%,rgba(233,239,184,0.93) 2%,rgba(195,216,37,0.83) 5%,rgba(219,240,67,0) 29%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9efb8', endColorstr='#00dbf043',GradientType=1 ); /* IE6-9 */
}
.followme-yellow {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ede8b6+0,ede8b6+2,d6c726+5,efe143+29&1+0,0+29 */
    background: -moz-linear-gradient(left,  rgba(237,232,182,1) 0%, rgba(237,232,182,0.93) 2%, rgba(214,199,38,0.83) 5%, rgba(239,225,67,0) 29%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(237,232,182,1) 0%,rgba(237,232,182,0.93) 2%,rgba(214,199,38,0.83) 5%,rgba(239,225,67,0) 29%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(237,232,182,1) 0%,rgba(237,232,182,0.93) 2%,rgba(214,199,38,0.83) 5%,rgba(239,225,67,0) 29%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ede8b6', endColorstr='#00efe143',GradientType=1 ); /* IE6-9 */
}
.followme-grey {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e5e5e5+0,e8e8e8+2,cccccc+5,eaeaea+29&1+0,0+29 */
    background: -moz-linear-gradient(left,  rgba(229,229,229,1) 0%, rgba(232,232,232,0.93) 2%, rgba(204,204,204,0.83) 5%, rgba(234,234,234,0) 29%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(229,229,229,1) 0%,rgba(232,232,232,0.93) 2%,rgba(204,204,204,0.83) 5%,rgba(234,234,234,0) 29%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(229,229,229,1) 0%,rgba(232,232,232,0.93) 2%,rgba(204,204,204,0.83) 5%,rgba(234,234,234,0) 29%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#00eaeaea',GradientType=1 ); /* IE6-9 */
}

.isactive.ismoving.follow-me,
.isactive.iswaiting.follow-me,
.isactive.isoff.follow-me,
.isactive.noGSM.follow-me {
    box-shadow: inset 0 0 7px;
}
.btn-moving-active {
    border-color: #3c763d;
    box-shadow: inset 0 0 5px #3c763d;
}

.tripmode {
    color: rgb(52, 58, 64) !important;
}
.tripmode:hover,
.isactive.tripmode {
    border-color: rgb(52, 58, 64);
    box-shadow: inset 0 0 5px rgb(52, 58, 64),
                0 2px 1px rgba(0,0,0,0.09),
                0 4px 2px rgba(0,0,0,0.09),
                0 8px 4px rgba(0,0,0,0.09),
                0 16px 8px rgba(0,0,0,0.09),
                0 32px 16px rgba(0,0,0,0.09);
    border-right-width:  8px;
    /*background-color: #dff0d8;*/
}
.ismoving {
    color: #3c763d !important;
}
.ismoving:hover,
.isactive.ismoving {
    border-color: #3c763d;
    border-right-width: 8px;
    --shadow-color: 122deg 40% 19%;
    --shadow-elevation-medium:
        0px 0.5px 0.6px hsl(var(--shadow-color) / 0.29),
        0px 1.3px 1.5px -0.6px hsl(var(--shadow-color) / 0.29),
        0px 2.5px 2.8px -1.2px hsl(var(--shadow-color) / 0.29),
        0px 5px 5.6px -1.9px hsl(var(--shadow-color) / 0.29),
        0.1px 9.7px 10.9px -2.5px hsl(var(--shadow-color) / 0.29);
    box-shadow: var(--shadow-elevation-medium);
}

.btn-waiting-active {
    border-color: #8a6d3b;
    box-shadow: inset 0 0 5px #8a6d3b,
                0 2px 1px rgba(0,0,0,0.09),
                0 4px 2px rgba(0,0,0,0.09),
                0 8px 4px rgba(0,0,0,0.09),
                0 16px 8px rgba(0,0,0,0.09),
                0 32px 16px rgba(0,0,0,0.09);
}
.iswaiting {
    color: #8a6d3b !important;
}
.iswaiting:hover,
.isactive.iswaiting {
    border-color: #8a6d3b;
    border-right-width: 8px;
    --shadow-color: 38deg 57% 38%;
    --shadow-elevation-medium:
        0px 0.5px 0.6px hsl(var(--shadow-color) / 0.29),
        0px 1.3px 1.5px -0.6px hsl(var(--shadow-color) / 0.29),
        0px 2.5px 2.8px -1.2px hsl(var(--shadow-color) / 0.29),
        0px 5px 5.6px -1.9px hsl(var(--shadow-color) / 0.29),
        0.1px 9.7px 10.9px -2.5px hsl(var(--shadow-color) / 0.29);
    box-shadow: var(--shadow-elevation-medium);
}
.noGSM {
    color: #d06e00 !important;
}
.noGSM:hover,
.isactive.noGSM {
    border-color: #d06e00;
    border-right-width: 8px;
    --shadow-color: 32deg 100% 38%;
    --shadow-elevation-medium:
        0px 0.5px 0.6px hsl(var(--shadow-color) / 0.29),
        0px 1.3px 1.5px -0.6px hsl(var(--shadow-color) / 0.29),
        0px 2.5px 2.8px -1.2px hsl(var(--shadow-color) / 0.29),
        0px 5px 5.6px -1.9px hsl(var(--shadow-color) / 0.29),
        0.1px 9.7px 10.9px -2.5px hsl(var(--shadow-color) / 0.29);
    box-shadow: var(--shadow-elevation-medium);
}

.btn-off-active {
    border-color: #777777;
    box-shadow: inset 0 0 5px #777777;
}
.isoff {
    color: #777777 !important;
}
.isoff:hover,
.isactive.isoff {
    border-color: #777777;
    border-right-width: 8px;
    --shadow-color: 0deg 0% 27%;
    --shadow-elevation-medium:
        0px 0.5px 0.6px hsl(var(--shadow-color) / 0.29),
        0px 1.3px 1.5px -0.6px hsl(var(--shadow-color) / 0.29),
        0px 2.5px 2.8px -1.2px hsl(var(--shadow-color) / 0.29),
        0px 5px 5.6px -1.9px hsl(var(--shadow-color) / 0.29),
        0.1px 9.7px 10.9px -2.5px hsl(var(--shadow-color) / 0.29);
    box-shadow: var(--shadow-elevation-medium);
}
.btn-anomaly-active {
    border-color: #a94442;
    box-shadow: inset 0 0 5px #a94442,
                0 2px 1px rgba(0,0,0,0.09),
                0 4px 2px rgba(0,0,0,0.09),
                0 8px 4px rgba(0,0,0,0.09),
                0 16px 8px rgba(0,0,0,0.09),
                0 32px 16px rgba(0,0,0,0.09);
    border-right-width: 8px;
}
.hasanomaly {
    color: #a94442 !important;
}
.hasanomaly:hover,
.isactive.hasanomaly {
    border-color: #a94442;
    border-right-width: 8px;
    --shadow-color: 2deg 46% 27%;
    --shadow-elevation-medium:
        0px 0.5px 0.6px hsl(var(--shadow-color) / 0.29),
        0px 1.3px 1.5px -0.6px hsl(var(--shadow-color) / 0.29),
        0px 2.5px 2.8px -1.2px hsl(var(--shadow-color) / 0.29),
        0px 5px 5.6px -1.9px hsl(var(--shadow-color) / 0.29),
        0.1px 9.7px 10.9px -2.5px hsl(var(--shadow-color) / 0.29);
    box-shadow: var(--shadow-elevation-medium);
}
.sos,
.sos-event {
    color: #a94442;
    border-color: #f00;
    box-shadow: inset 0 0 5px #f00;
}
.event-card.sos-event.active,
.event-card.sos-event:hover {
    z-index:  10;
    --shadow-color: 355deg 67% 60%;
    --shadow-elevation-medium:
        0px 0.5px 0.6px hsl(var(--shadow-color) / 0.36),
        0px 1.7px 1.9px -0.8px hsl(var(--shadow-color) / 0.36),
        -0.1px 4.2px 4.7px -1.7px hsl(var(--shadow-color) / 0.36),
        -0.1px 10.3px 11.6px -2.5px hsl(var(--shadow-color) / 0.36);
    box-shadow: var(--shadow-elevation-medium);
}
.sos:hover,
.isactive.sos {
    border-color: #f00;
    border-right-width: 8px;
    --shadow-color: 0deg 100% 29%;
    --shadow-elevation-medium:
        0px 0.5px 0.6px hsl(var(--shadow-color) / 0.29),
        0px 1.3px 1.5px -0.6px hsl(var(--shadow-color) / 0.29),
        0px 2.5px 2.8px -1.2px hsl(var(--shadow-color) / 0.29),
        0px 5px 5.6px -1.9px hsl(var(--shadow-color) / 0.29),
        0.1px 9.7px 10.9px -2.5px hsl(var(--shadow-color) / 0.29);
    box-shadow: var(--shadow-elevation-medium);
}
.outofsight,
.private {
    color: rgb(33, 37, 41) !important;
}
.outofsight:hover,
.isactive.outofsight,
.private:hover {
    border-color: rgb(33, 37, 41);
    border-right-width: 8px;
    --shadow-color: 210deg 17% 5%;
    --shadow-elevation-medium:
        0px 0.5px 0.6px hsl(var(--shadow-color) / 0.29),
        0px 1.3px 1.5px -0.6px hsl(var(--shadow-color) / 0.29),
        0px 2.5px 2.8px -1.2px hsl(var(--shadow-color) / 0.29),
        0px 5px 5.6px -1.9px hsl(var(--shadow-color) / 0.29),
        0.1px 9.7px 10.9px -2.5px hsl(var(--shadow-color) / 0.29);
    box-shadow: var(--shadow-elevation-medium);
}

.follow-me {
    box-shadow: inset 0 0 2px #000;
    margin-bottom: 3px;
}

/***** Home *****/
#homeMap {
    height: 100%;
    width: 100%;
}
#homeMap div.main-bloc {
    height: 100%;

    border-radius: 8px;
}
#homeMap div.main-bloc:-webkit-full-screen {
    width: 100%;
    padding: 0;
}
#mainMapMenu {
    position: relative;
    padding: 0;
    height: calc(100% - 40px);
    box-shadow: none;
    background: none;
}

/*
#mainMapMenu #mapMainOptions {
    height: 115px;
    z-index:1;
}
#mainMapMenu .relativeMenu {
    height: calc(100% - 115px);

    overflow-y: auto;
}
#mainMapMenu #mapSubOptions {
    margin-top: -14px;
}
*/
div.checkbox-options {
    padding-left: 10px;

    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #eee;
}
div.checkbox-options label {
    font-size: 11pt;
    line-height: 13pt;
    font-weight: normal;
}

.zone-row .item-color {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.carDetails {
    font-size: 0.9em;
    background-color: #fff;
}
.zone-row,
.carsList .carRow {
    max-height: 400px;
    overflow: auto;
    position: relative;
    padding: 0 2px 0 2px;
    margin-bottom: 2px;

    color: #666;
    border: 1px solid #ccc;
    border-radius: 2px;
    background-color: rgba( 220, 220, 220, 0.7);
}
.car-title {
    cursor: pointer;
}

.zone-row:hover {
    color: #000;
    background-color: rgba( 240, 240, 240, 1);
}
.zone-row.active,
.carsList .carRow.active {
    color: #000;
    border-color: #555;
    background-color: rgba( 240, 240, 240, 0.8);
    box-shadow: 0 0 6px 2px #888;
    z-index: 10;
}

.carsList .carRow .stops {
    color: #333;
    padding: 2px;
    font-size: 0.9em;
}
.section {
    position: relative;
    z-index: 50;
    padding-left: 5px;
    margin-bottom: 5px;

    text-shadow: 1px 1px 2px #fff;
    font-size: 10pt;
    font-weight: bold;
    line-height: 16pt;

    border-radius: 4px;
    box-shadow: 0 3px 6px #333;
}
.section.speed {
    border: 1px solid #fff600;
    background-color: #d9d8ca;
}
.section.speed .label-default {
    margin-top: -2px;
    color: #000;
    background-color: #fff600;
    box-shadow: 0 3px 3px #333;
}
.section.stop {
    border: 1px solid #ff8a00;
    background-color: #d9d5ca;
}
.section.stop .label-default {
    margin-top: -2px;
    color: #000;
    background-color: #ff8a00;
    box-shadow: 1px 2px 2px #333;
}
.section .label {
    text-shadow: none;
}
.carsList .carRow .stopRow {
    display: flex;
    padding: 2px;
    background-color: #eee;
    border-bottom: 1px solid #000;
}
.carsList .carRow .stopRow:hover,
.carsList .carRow .stopRow.active {
    position:relative;
    z-index: 10;
    background-color: #fff;
    box-shadow: 0 0 8px #333;
}

/***** Fiche détaillée véhicule *****/
.tag-card .nav-link {
    color:  #333;
}
.tag-card .nav-link:hover {
    color:  #eee;
    text-shadow: 1px 1px 2px #000;
}
.tag-card .nav-link.active {
    color: #fff;
    background-color: rgb(52, 58, 64);
}

/***** Fiche détaillée véhicule *****/
.missions {
    border: 2px solid;
    border-radius: 8px;
}
.missions .tasks-nav {
    position: relative;
    z-index: 1;
    margin-top: -20px;
    background: #efefef;
    border: 2px solid;
    border-radius: 8px;
    padding-left: 5px;
}
.missions .tasks-nav-options {
    position: absolute;
    top: 100%;
    left: 8px;
    width: calc(100% - 16px);
    background: #efefef;
    border: 2px solid;
    border-top: none;
    border-radius: 0 0 8px 8px;
}
.missions .m-list {
    height: calc(100% - 20px);
    margin-top: -8px;
    overflow: auto;
}

/***** Fiche détaillée véhicule *****/

.speed-limit-small {
    width: 19px;
    height: 19px;
    padding-top: 1px;
    margin-top: 1px;
    margin-right: 5px;

    font-size: 6.5pt;
    line-height: 10pt;
    font-weight: bold;
    text-align: center;

    color: #000;
    background-color: #fff;
    border: 2px solid #F00;
    border-radius: 50%;

    box-shadow: 0 0 4px #444, 0 0 1px #f00;
}
.speed-limit {
    width: 24px;
    height: 24px;
    padding-top: 2px;

    font-size: 7.5pt;
    line-height: 12pt;
    font-weight: bold;
    text-align: center;

    color: #000;
    background-color: #fff;
    border: 3px solid #F00;
    border-radius: 50%;

    box-shadow: 0 0 4px #444, 0 0 1px #f00;
}
.speed-limit-big {
    width: 40px;
    height: 40px;
    padding-top: 2px;
    margin-right: 8px;

    font-size: 9pt;
    line-height: 15px;
    font-weight: bold;
    text-align: center;

    color: #000;
    background-color: #fff;
    border: 3px solid #F00;
    border-radius: 50%;

    box-shadow: 0 0 4px #444, 0 0 1px #f00;
}
.car-detail .cd-title {
    padding-left: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 25px;
    margin-left: -20px;
    margin-top: -15px;
    margin-bottom: 3px;
    margin-right: -20px;
    border-top: 2px solid #334;
    border-bottom: 2px solid #334;
    color: #fff;
    background-color: #337;
}
.car-detail .cd-title .c-name {
    font-size: 16px;
    font-weight: bold;
}
.car-detail .car-detail-content {
    height: calc(100% - 64px - 64px - 20px);
    width: 100%;
    overflow: auto;

    padding-top: 10px;
}
.car-detail .d-section {
    margin-top: 5px;
    margin-bottom: 10px ;
}
.car-detail .d-section.collapsed {
    display: none;
}
.car-detail .d-section .list-group-item img {
    max-width: 100%;
}
.car-detail .d-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    height: 36px;
    width: 100%;
    margin-bottom: 3px;
    margin-left: -10px;
    padding-left: 10px;
    padding-right: 5px;

    color: #fff;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 36px;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#333377+0,0074d9+64,ffffff+100&1+0,1+45,0+87 */
    background: -moz-linear-gradient(left, rgba(51,51,119,1) 0%, rgba(15,97,188,1) 45%, rgba(0,116,217,0.55) 64%, rgba(163,205,241,0) 87%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(51,51,119,1) 0%,rgba(15,97,188,1) 45%,rgba(0,116,217,0.55) 64%,rgba(163,205,241,0) 87%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(51,51,119,1) 0%,rgba(15,97,188,1) 45%,rgba(0,116,217,0.55) 64%,rgba(163,205,241,0) 87%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333377', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}

.car-detail .chrono-timer {
    line-height: 30px;
    font-weight: bold;
}

.car-detail .detail-form {
    width: calc(100% - 20px);
    margin: 10px;
    background-color: #ddd;

    border: 1px solid #bbb;
    border-radius: 2px;
}

.car-detail .alert {
    margin-top:10px;
}
.car-detail .cd-table {
    font-size: 0.75em;
}
.car-detail .cd-edit-sub-head,
.car-detail .cd-edit-head {
    font-weight: bolder;
    text-align: right;
}
.car-detail .cd-edit-sub-head {
    font-size: 0.9em;
    font-style: italic;
}
.car-detail .input-sm {
    padding-top: 1px;
    padding-bottom: 1px;
}
.car-detail .help-block {
    margin-bottom: 0;
}
.car-detail .cd-overspeed {
    color: red;
}

.car-detail h4.cd-trip-detail {
    font-size: 0.9em;
    line-height: 14px;
}
.car-detail h4:first-child.cd-trip-detail {
    margin-bottom: 8px;
}
.car-detail h4:last-child.cd-trip-detail {
    margin-top: 8px;
}
.car-detail div.cd-trip-detail {
    font-size: 0.8em;
    line-height: 12px;
    margin-bottom: 2px;
}

.car-detail.collapsed .car-detail-options {
    display: none;
}
.car-detail.collapsed .car-detail-content {
    display: none;
}
.car-detail-options {
    height: 62px;
    margin-top: 8px;
    background-color: #0074d9;
}
.car-detail-options div {
    width: 25%;
    padding: 5px;

    color: #fff;
    text-align: center;
    cursor: pointer;
}
.car-detail-options div.active,
.car-detail-options div:hover {
    text-shadow: 0 0 3px #000;
    background-color: rgba(255, 255, 255, 0.4);
}
.car-detail-options div.active {
    box-shadow: inset 0 0 3px #000;
}

.list-group-item-off {
    color: #777;
    background-color: #e3e3e3;
}
.alert-violet,
.list-group-item-violet {
    color: #59238c;
    background-color: #e4d8f0;
}
.alert-dark-orange,
.list-group-item-dark-orange {
    color: #896722;
    background-color: #f0e8d8;
}

/***** Leaflet map *****/
#map {
    width: 100%;
    height: 100%;
    border: 3px solid #000;
    border-radius: 0;
}

.leaflet-control-layers-toggle {
    width: 30px !important;
    height: 30px !important;
    background-position: 0 -104px;
}

/*** Custom sidebar style ***/
.sidebar {
    width: calc(100% - 40px);
}
    .sidebar.collapsed {
        width: 40px;
    }
    @media (min-width: 768px) {
        .sidebar {
            top: 10px;
            bottom: 10px;
            transition: width 500ms; } }
    @media (min-width: 768px) and (max-width: 991px) {
        .sidebar {
            width: 305px; } }
    @media (min-width: 992px) and (max-width: 1199px) {
        .sidebar {
            width: 390px; } }
    @media (min-width: 1200px) {
        .sidebar {
            width: 460px; } }

@media (min-width: 450px) and (max-width: 700px) {
    #sidebarDetail { width: 55%; }
    #sidebarDetail.collapsed { width: 40px; }
}

#map .info-block .home-alert {
    position: absolute;
    z-index: 150;
    margin-top: 2px;

    box-shadow: 2px 4px 22px #888;
}
#map .followed-tags {
    position:  absolute;
    right: 10px;
    z-index: 1001;
    margin-top: 10px;
    width: 500px;
}

/***** Replay block *****/
.lr-advanced-control {
    z-index: 1001;
}



@media (min-width:768px) and (max-width:991px) {
    .sidebar-left~.sidebar-map .info-block {
        width: calc(100% - 375px);
        left: 375px;
    }
}
@media (min-width:992px) and (max-width:1199px) {
    .sidebar-left~.sidebar-map .info-block {
        width: calc(100% - 460px);
        left: 460px;
    }
}
@media (min-width:1200px) {
    .sidebar-left~.sidebar-map .info-block {
        width: calc(100% - 530px);
        left: 530px;
    }
}
@media (min-width:768px) {
    .sidebar-left.collapsed~.sidebar-map .info-block {
        width: calc(100% - 110px);
        left: 110px;
    }
}
@media (min-width:768px) {
    .sidebar-left~.sidebar-map .info-block {
        transition: width 500ms, left 500ms;
    }
}

.info-block #GlobalAlerts {
    left: 0;
}

#map .currentCar {
    position: absolute;
    z-index: 150;
    top: 10px;
    padding: 5px;

    width: 33%;
    margin-right: auto;

    color: #fff;
    font-size: 1.2em;
    font-weight: bolder;
    text-shadow: 1px 1px 2px #000, -1px -1px 2px #000;
    text-align: center;

    border-radius: 8px;
    border: 1px solid #000;

    background-color: rgba(130, 130, 130, 0.70);
    box-shadow: 4px 4px 16px #000;
}
#map .currentCar .label {
    text-shadow: none;
}
@media (min-width:768px) and (max-width:991px) {
    .sidebar-left~.sidebar-map .currentCar {
        left:400px
    }
}
@media (min-width:992px) and (max-width:1199px) {
    .sidebar-left~.sidebar-map .currentCar {
        left:485px
    }
}
@media (min-width:1200px) {
    .sidebar-left~.sidebar-map .currentCar {
        left:555px
    }
}
@media (min-width:768px) {
    .sidebar-left.collapsed~.sidebar-map .currentCar {
        left: 33%;
    }
}
@media (min-width:768px) {
    .sidebar-left~.sidebar-map .currentCar {
        transition: left 500ms;
    }
}

.hiddenAtStart {
    display: none;
}
h3.overspeed {
    text-shadow: 1px 1px 3px #000;
}

.leaflet-bottom, .leaflet-top {
    z-index: 999 !important;
}
.ui-slider .ui-slider-handle {
    cursor: ew-resize;
    background-color: #eee;
    border-radius: 2px;
    box-shadow: 0 0 3px #000;
}

/***** Leaflet report map *****/
#ReportMap {
    display: none;

    position: absolute;
    top: 15%;
    left: 49%;

    width: 50%;

    z-index: 1080;

    padding: 3px;
    padding-bottom: 15px;

    color: #fff;
    background-color: #555;

    border-radius: 4px;
    box-shadow: 0 0 23px #333;
}
#ReportMap .rm-title {
    margin-bottom: 6px;

    cursor: move;

    background-color: #333;
    border-radius: 4px;
    box-shadow: 0 1px 3px #000;
}
#ReportMap .options {
    position: absolute;
    top: 2px;
    right: 8px;
}
#ReportMap .options button {
    background: none !important;
    border: none !important;
}
#ReportMap .rm-left-bloc {
    height: 100px;
    overflow: auto;
}
#ReportMap .rm-left-item {
    color: #ddd;
    font-size: 9pt;
    font-weight: bold;
}
#ReportMap .rm-left-item:hover,
#ReportMap .rm-left-item.active {
    color: #000 !important;

    border: 1px solid #fff;
    border-radius: 3px;
    background-color: #ddd;
    box-shadow: 2px 2px 6px #333;
}
#ReportMap .rm-left-bloc div {
    cursor: pointer;
}
#ReportMap .rm-left-item div.active {
    color: #aaa;
}
#ReportMap .rm-left-item:hover div.active,
#ReportMap .modal-content {
    color: #000;
}

#mapDetail {
    height: 400px;
    border-radius: 4px;
    border: 1px solid #000;
}

/***** Graph tooltip *****/
.gr-tooltip {
    position: absolute;
    z-index: 2000;
    padding: 3px;
    border: 1px solid #777;
    border-radius: 2px;
    background-color: rgba(250, 250, 250, 0.9);
}
.activity-tooltip {
    position: absolute;
    z-index: 2000;
    padding: 3px;
    border: 1px solid steelblue;
    color: steelblue;
    font-size: 9pt;
    border-radius: 6px;
    background-color: rgba(250, 250, 250, 0.9);
    box-shadow: 0 0 20px steelblue;
}
.bar-graph-tooltip:before {
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    left: calc(50% - 10px);
    top: -20px;
    border: 10px solid transparent;
    border-bottom-color: var(--secondary);
}

/***** Leaflet heat map *****/
#heatmap {
    height: 100%;
    border-radius: 4px;
    border: 1px solid #000;
}

/***** Gestion des véhicules *****/
.edit-mode-list .edit-off {
    opacity:  .5;
}
.edit-mode-list .edit-off.selected {
    opacity:  .8;
}
.backdrop-effects .card {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.45);
}
.backdrop-effects .card .card-header {
    background-color: rgba(240, 240, 240, 0.7);
}

/***** Gestion des trajets *****/
.zone-path,
.path-zone {
    min-height: 100px;
    max-height: 200px;

    padding: 5px;

    overflow-y: auto;

    border: 2px solid #000;
    border-radius: 4px;
}
.zone-path div:hover,
.path-zone div:hover {
    background-color: #ddd;
    box-shadow: 0 0 2px #333;
}
.zone-path {
    border-right: 4px dotted #999;
}
.path-zone {
    border-left: 4px dotted #999;
}

/***** vis.js Timeline *****/
.vis-item.bg-success {
    color: #3c763d;
    border-color: #c1e2b3;
    background-color: #dff0d8;
}
.vis-item.bg-info {
    color: #31708f;
    border-color: #afd9ee;
    background-color: #d9edf7;
}
.vis-item.bg-warning {
    color: #8a6d3b;
    border-color: #f7ecb5;
    background-color: #fcf8e3;
}
.vis-item.bg-danger {
    color: #a94442;
    border-color: #e4b9b9;
    background-color: #f2dede;
}
.vis-item.bg-purple {
    color: #6e00b8;
    border-color: #d4c3de;
    background-color: #ebd9f7;
}
.vis-item.vis-selected {
    text-shadow: 1px 1px 1px #fff;
    border-style: dotted;
}
.vis-item.bg-success.vis-selected {
    border-color: #3c763d;
    box-shadow: inset 0 0 4px #3c763d;
}
.vis-item.bg-info.vis-selected {
    border-color: #31708f;
    box-shadow: inset 0 0 4px #31708f;
}
.vis-item.bg-warning.vis-selected {
    border-color: #8a6d3b;
    box-shadow: inset 0 0 4px #8a6d3b;
}
.vis-item.bg-danger.vis-selected {
    border-color: #a94442;
    box-shadow: inset 0 0 4px #a94442;
}
.vis-item.bg-purple.vis-selected {
    border-color: #6e00b8;
    box-shadow: inset 0 0 4px #6e00b8;
}
.timeline-menu {
    position: fixed;
    top: 190px;
    right: 26px;
    z-index: 1050;

    border-radius: 3px;
    box-shadow: 0 4px 8px #666;
}

/***** News *****/
.news {
   padding: 3px;
   margin-bottom: 5px;
   border-bottom: 3px solid #888;
}
.news-small-view {
    background-color: #fefefe;
    color: #888;
}
.news-small-view:hover,
.news-full-view {
    background-color: #fff;
    border-color: #000;
    color: #000;
    box-shadow: 0 0 4px #888;
}

/***** Charts *****/
.svg-drawing {
    text-align: center;
}

.svg-drawing svg {
    margin: 1px;
}

.svg-drawing svg:hover,
.svg-drawing svg.active {
    box-shadow: 0 0 8px #666;
}

.svg-drawing path,
#RemoteChart path {
    fill: none;
    stroke: steelblue;
    stroke-linejoin: round;
    stroke-width: 1.5px;
}

.graph-title {
    cursor: pointer;
    text-align: center;
}
.expand-btn {
    cursor: pointer;
}
#RemoteChartContainer {
    position: absolute;
    bottom: 20px;
    z-index: 10;
}

@media (min-width:768px) {
    #map #RemoteChartContainer {
        left: 60px;
        width: calc(100% - 120px);
    }
    .sidebar-left~.sidebar-map #RemoteChartContainer {
        transition: left 500ms;
    }
}
@media (min-width:768px) and (max-width:991px) {
    #map.sidebar-left-opened #RemoteChartContainer {
        left: 325px;
    }
    #map.sidebar-left-opened #RemoteChartContainer,
    #map.sidebar-right-opened #RemoteChartContainer {
        width: calc(100% - 385px);
    }
    #map.sidebar-left-opened.sidebar-right-opened #RemoteChartContainer {
        width: calc(100% - 650px);
    }
}
@media (min-width:992px) and (max-width:1199px) {
    #map.sidebar-left-opened #RemoteChartContainer {
        left: 410px;
    }
    #map.sidebar-left-opened #RemoteChartContainer,
    #map.sidebar-right-opened #RemoteChartContainer {
        width: calc(100% - 470px);
    }
    #map.sidebar-left-opened.sidebar-right-opened #RemoteChartContainer {
        width: calc(100% - 820px);
    }
}
@media (min-width:1200px) {
    #map.sidebar-left-opened #RemoteChartContainer {
        left: 480px;
    }
    #map.sidebar-left-opened #RemoteChartContainer,
    #map.sidebar-right-opened #RemoteChartContainer {
        width: calc(100% - 540px);
    }
    #map.sidebar-left-opened.sidebar-right-opened #RemoteChartContainer {
        width: calc(100% - 960px);
    }
}

.svg-drawing svg.active .graph-title,
#RemoteChart svg.active .graph-title {
    font-weight: bold;
    font-size: 14pt;
}
.graph-border {
    fill: #eee;
    stroke: #000;
}
#RemoteChart .graph-border {
    fill: rgba(255, 255, 255, 0.6);
}
.svg-drawing svg:hover .graph-border,
.svg-drawing svg.active  .graph-border {
    fill: #fff;
}
.graph-overlay {
    fill: none;
    pointer-events: all;
}

.focus {
    stroke: black;
    stroke-width: 1px;
    fill: rgba(5, 5, 5, 0.5);
}
.focus-tip {
    position: absolute;
    color: #fff;
    padding: 3px;
    padding-right: 6px;
    text-align: left;
    border: 1px solid #333;
    border-radius: 3px;
    background-color: rgba(5, 5, 5, 0.6);
}
.focus-tip-time {
    font-weight: bold;
}

.distance-dot {
    stroke: steelblue;
    fill: rgba(255, 255, 255, 0.5);
}
.distance-line {
    stroke-width: 1px;
    stroke-dasharray: '5, 10';
    stroke: rgba(5, 5, 5, 0.75);
}

/***** Divers *****/
.outdated {
    color: #888;
    text-decoration: line-through;
}
.clickable {
    cursor: pointer;
}
.clickable:hover {
    color: #fff !important;
    background-color: #999;
    text-shadow: -1px -1px 2px #000, 1px 1px 2px #000;
}
div.indicator {
    display: inline-block;
    width: 12px;
    height: 12px;

    margin-left: 5px;
    margin-right: 10px;

    border-radius: 50%;
    border: 2px solid #000;
}
div.indicator.off {
    border-color: #555;
    background: rgb(241,241,241);
    background: radial-gradient(circle, rgba(241,241,241,1) 0%, rgba(140,140,140,1) 33%, rgba(103,103,103,1) 100%);
}
div.indicator.danger {
    border-color: #7f0000;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffc7c1+0,ff1a00+100 */
    background: #ffc7c1; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #ffc7c1 0%, #ff1a00 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #ffc7c1 0%,#ff1a00 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #ffc7c1 0%,#ff1a00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc7c1', endColorstr='#ff1a00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
div.indicator.on,
div.indicator.indicator-success {
    border-color: #90af23;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f8ffe8+0,e3f5ab+33,b7df2d+100;Green+3D+%234 */
    background: rgb(248,255,232); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(248,255,232,1) 0%, rgba(227,245,171,1) 33%, rgba(183,223,45,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(248,255,232,1)), color-stop(33%,rgba(227,245,171,1)), color-stop(100%,rgba(183,223,45,1))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(248,255,232,1) 0%,rgba(227,245,171,1) 33%,rgba(183,223,45,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(248,255,232,1) 0%,rgba(227,245,171,1) 33%,rgba(183,223,45,1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(248,255,232,1) 0%,rgba(227,245,171,1) 33%,rgba(183,223,45,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(248,255,232,1) 0%,rgba(227,245,171,1) 33%,rgba(183,223,45,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#b7df2d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
div.indicator.indicator-warning {
    border-color: #80633c;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffc578+0,fb9d23+100;Orange+3D+%233 */
    background: rgb(255,197,120); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,197,120,1) 0%, rgba(251,157,35,1) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,197,120,1) 0%,rgba(251,157,35,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  rgba(255,197,120,1) 0%,rgba(251,157,35,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#fb9d23',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
div.indicator.indicator-danger {
    border-color: #800202;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff3019+0,cf0404+100;Red+3D */
    background: rgb(255,48,25); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,48,25,1) 0%, rgba(207,4,4,1) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}


/***** Various fixes *****/
/*     Select2 placeholder     */
.select2-search.select2-search--inline,
.select2-search input.select2-search__field {
    width: 100% !important;
}
/*     Hide selected options     */
.select2-container--bootstrap4 .select2-results__option[aria-selected="true"] {
    display: none;
}
/* select2 bootstrap4 adjustment */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    margin: .15rem;
    padding: 3px;
    background-color: #ededed;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear {
    margin-top: -5px;
}
/*.select2-container {
  z-index: 1010;
}*/
.select2-on-top {
    z-index: 50000;
}


/***** Model classe co2 *****/
.circle.classA {
    font-weight: bold;
    color: #fff;
    background-color: #0fa855;
    border-color: #0a753b;
}
.circle.classB {
    font-weight: bold;
    color: #fff;
    background-color: #78ac4f;
    border-color: #547837;
}
.circle.classC {
    font-weight: bold;
    color: #fff;
    background-color: #bed139;
    border-color: #909e2b;
}
.circle.classD {
    font-weight: bold;
    color: #fff;
    background-color: #f8e922;
    border-color: #c4b81b;
}
.circle.classE {
    font-weight: bold;
    color: #fff;
    background-color: #fab71d;
    border-color: #c79217;
}
.circle.classF {
    font-weight: bold;
    color: #fff;
    background-color: #ed6c26;
    border-color: #ba551e;
}
.circle.classG {
    font-weight: bold;
    color: #fff;
    background-color: #e52724;
    border-color: #b31e1c;
}


/***** CLIENTS DRIVER *****/
.clients-driver {
    height: 100%;
    width: 100%;
}
.clients-driver .page-title {
    font-size: 1.5em;
    color: #333232;
    background-color: #ddd;
    border: 1px solid #333232;
    border-radius: 8px;
    box-shadow: 0 4px 6px #333232;
    margin-bottom: 15px;
}
.clients-driver .big-button {
    height: 100%;
    width: 100%;
    border: 1px solid #aaa;
    border-radius: 8px;
    vertical-align: middle;
    text-align: center;
    padding: 10px;
    font-size: 1.4em;
}


.n-title {
    padding: 3px;
    padding-left: 15px;

    font-size: 1.3em;
    font-weight: bold;
    color: var(--title-text-color);

    background-color: var(--title-bg-color);
    border: 2px solid var(--title-border-color);
    border-radius: var(--title-border-radius);

    box-shadow: 0 3px 8px var(--shadow-color);
}
.n2-title {
    padding: 1px;
    padding-left: 15px;
    margin-bottom: 10px;

    font-size: 1em;
    font-weight: bold;
    color: var(--title-text-color);

    background-color: var(--title-bg-color2);
    border: 1px solid var(--title-border-color);
    border-radius: 10px;
}

/* This class controls what elements have the new fancy scrollbar CSS */
.layout-scrollbar {
  scrollbar-color: var(--scrollbar-color) var(--scrollbar-track-color);
}
.layout-scrollbar::-webkit-scrollbar {
  height: var(--scrollbar-size);
  width: var(--scrollbar-size);
}
.layout-scrollbar::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-color);
}
.layout-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color);
  border-radius: 3px;
}
.layout-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-color-hover);
}
.layout-scrollbar::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-color-active);
}
.layout-scrollbar::-webkit-scrollbar-thumb:vertical {
  min-height: var(--scrollbar-minlength);
}
.layout-scrollbar::-webkit-scrollbar-thumb:horizontal {
  min-width: var(--scrollbar-minlength);
}
/* .layout-scrollbar::-webkit-scrollbar-corner {
  display: none;
}
.layout-scrollbar::-webkit-scrollbar-button {
  display: none;
}
 */