/*------------------------------------------------------------------

Main form Styles

------------------------------------------------------------------- */
.stepbox-header-2 .stepbox-step {
  /*width: 33%;*/
}
/*------------------------------------------------------------------

Pannel Styles

------------------------------------------------------------------- */
.form-group .btn-group .btn {
  font-size: 1em;
}

label.btn.btn-success{
  padding: 10px 16px;
}

.stepbox_submit_loader {
  z-index:1000;
  display:none;
  filter: alpha(opacity=97); /* internet explorer */
  -khtml-opacity: 0.97;      /* khtml, old safari */
  -moz-opacity: 0.97;       /* mozilla, netscape */
  opacity: 0.97;           /* fx, safari, opera */
  position:absolute;top:0;left:0;width:100%;height:100%;background: #fff url(/img/loader.gif) center no-repeat;
}

.genboxes, .selectForMerge, .flowchart-operator.selectForMerge .flowchart-operator-title {
  cursor: pointer;
  height: 50px;
  margin-bottom: 8px;
}

.workflowScheduler {
  min-height: 390px;
}


.outputsToDelete {
  width: 95%;
  margin: 0 auto;
  padding: 15px 0px;
  text-align: center;
}

.chosenOutput {
  border-radius: 4px;
  cursor: pointer;
  margin-top: 8px;
}
.chosenOutput > div {
  border-radius: 4px;
  height: 160px;
  padding: 10px 5px;
}
.chosenOutput > div:hover {
  border-radius: 4px;
  background: #FAFAFA;
}

.chosenOutput .spm_box_disabled {
  cursor: pointer;
}

.errorNbBoxesToDelete {
  color: #ff0000;
}

.textOutputsToDelete {
  font-size: 1.1em;
}

.textOutputsToDelete ul {
  padding: 10px;
}

/* Choix du nombre de sortie d'une box filtres */
.nbrOfOutputFilter {
  border-radius: 4px;
  cursor: pointer;
}
.nbrOfOutputFilter > div {
  border-radius: 4px;
  padding: 10px 5px;
}
.nbrOfOutputFilter > div:hover {
  border-radius: 4px;
  background: #FAFAFA;
}
.nbrOfOutputFilter .active .filtre {
  background-color: rgba(147, 200, 61, 0.51) !important;
}

.nbrOfOutputFilter .flowchart-operator .flowchart-operator-title {
  cursor: pointer;
}

.tmpDisabled .addplus, .tmpDisabled .addplusN, .tmpDisabled .addplusfiltre,
.highlightBranch .addplus, .highlightBranch .addplusN, .highlightBranch .addplusfiltre,
.canBeMerged .addplus, .canBeMerged .addplusN, .canBeMerged .addplusfiltre,
.canBeSelected .addplus, .canBeSelected .addplusN, .canBeSelected .addplusfiltre,
.isLinkedBox .addplus, .isLinkedBox .addplusN, .isLinkedBox .addplusfiltre,
.tmpDisabled .exchange, .canBeMerged .exchange, .canBeSelected .exchange, highlightBranch .exchange,
.tmpDisabled .warningIncompatible, .canBeMerged .warningIncompatible, .canBeSelected .warningIncompatible, .isLinkedBox .warningIncompatible, .highlightBranch .warningIncompatible,
.tmpDisabled .persistant, .canBeMerged .persistant, .canBeSelected .persistant, .highlightBranch .persistant, .isLinkedBox .persistant {
  display: none !important;
}

.spm_box_disabled:not(.declencheur),
.tmpDisabled:not(.declencheur),
.highlightBranch:not(.declencheur),
.canBeMerged:not(.declencheur),
.spm_box_disabled.declencheur .declencheurlogoContainer,
.tmpDisabled.declencheur .declencheurlogoContainer,
.highlightBranch.declencheur .declencheurlogoContainer,
.canBeMerged.declencheur .declencheurlogoContainer,
.spm_box_disabled.action .actionlogoContainer,
.tmpDisabled.action .actionlogoContainer,
.highlightBranch.action .actionlogoContainer,
.canBeMerged.action .actionlogoContainer,
.spm_box_disabled.filtre .filtrelogoContainer,
.tmpDisabled.filtre .filtrelogoContainer,
.highlightBranch.filtre .filtrelogoContainer,
.canBeMerged.filtre .filtrelogoContainer {
  background: #E9E9E9 !important;
  border: none !important;
  cursor: default !important;
}

.flowchart-operator.spm_box_disabled.declencheur,
.flowchart-operator.tmpDisabled.declencheur,
.flowchart-operator.highlightBranch.declencheur,
.flowchart-operator.canBeMerged.declencheur {
  background: none !important;
}

.flowchart-operator.spm_box_disabled .flowchart-operator-title,
.flowchart-operator.tmpDisabled .flowchart-operator-title,
.flowchart-operator.highlightBranch .flowchart-operator-title,
.flowchart-operator.canBeMerged .flowchart-operator-title {
  color: #E9E9E9 !important;
  border-color: #E9E9E9 !important;
}

.flowchart-operator.canBeSelected {
  border-color: #999999 !important;
  color: #999999 !important;
}

.flowchart-operator.isLinkedBox {
  border-color: #009CFF !important;
  color: #009cff !important;
  -webkit-box-shadow: 0 7px 10px -5px rgba(0,0,0,.5);
  -moz-box-shadow: 0 7px 10px -5px rgba(0,0,0,.5);
  box-shadow: 0 7px 10px -5px rgba(0,0,0,.5);
}

.nbrOfOutputFilter .active .filtre .flowchart-operator-title {
  border-color: rgba(147, 200, 61, 0.51) !important;
}

.flowchart-operator .selectForMerge,
.flowchart-operator.selectForBind{
  border-color: #93c840 !important;
  color: #93c840 !important;
}

.flowchart-operator .flowchart-operator-outputs .flowchart-operator-connector.canBeMerged:not(.tmpDisabled):not(.highlightBranch) .flowchart-operator-connector-arrow,
.flowchart-operator .flowchart-operator-inputs .flowchart-operator-connector.canBeMerged:not(.tmpDisabled):not(.highlightBranch) .flowchart-operator-connector-arrow {
  background: #FFC56E !important;
  border: solid 1px #FFC56E !important;
}

.flowchart-operator .flowchart-operator-outputs .flowchart-operator-connector.canBeMerged.selectForMerge:not(.tmpDisabled):not(.highlightBranch) .flowchart-operator-connector-arrow,
.flowchart-operator .flowchart-operator-inputs .flowchart-operator-connector.canBeMerged.selectForMerge:not(.tmpDisabled):not(.highlightBranch) .flowchart-operator-connector-arrow,
.flowchart-operator.selectForMerge .flowchart-operator-outputs .flowchart-operator-connector.canBeMerged:not(.tmpDisabled):not(.highlightBranch) .flowchart-operator-connector-arrow {
  background: #93c840 !important;
  border: solid 1px #93c840 !important;
}

.flowchart-operator.canBeMerged .flowchart-operator-title {
  color: #E9E9E9 !important;
  cursor: default !important;
}

.flowchart-operator.canBeSelected .flowchart-operator-title {
  color: #999999 !important;
  cursor: pointer;
}

.flowchart-operator.isLinkedBox .flowchart-operator-title {
  color: #009CFF !important;
  cursor: pointer;
}

.flowchart-operator.selectForMerge .flowchart-operator-title,
.flowchart-operator.selectForBind .flowchart-operator-title{
  color: #93c840 !important;
}

.spm_box_disabled:not(.genboxes), .tmpDisabled:not(.genboxes), .highlightBranch:not(.genboxes) {
  background: #E9E9E9 !important;
}

.flowchart-operator.canBeMerged {
  background: #E9E9E9 !important;
}

.flowchart-operator.canBeSelected {
  background: #999999 !important;
}

.flowchart-operator.isLinkedBox {
  background: #009CFF !important;
}

.flowchart-operator.selectForMerge,
.flowchart-operator.selectForBind{
  background: #93c840 !important;
}

.flowchart-operator.tmpDisabled .flowchart-operator-connector-small-arrow,
.flowchart-operator.highlightBranch .flowchart-operator-connector-small-arrow {
  display: none !important;
}

.spm_box_disabled .box-logo {
  color: #FCFCFC !important;
}


.demarrer
{
  top: 50%;
  position: absolute;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}

.ChargerArbre
{
  position:relative;
  left:55%;
  color:white;
  background-color:#c9302c;
  font-size: 20px;
  border:2px solid #c9302c;
  border-top-left-radius: 0.5em;
  border-bottom-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
}

.template-scollable-container
{
}

.row.boxes
{
  margin-top: 1em !important;
}



.fields, .multiple_output
{
  display: none;
}


.boxneutre
{
  position:relative;
  width: 90%;
  height: 55px;
  background-color:white !important;
  border-top-left-radius: 0.4em;
  border-bottom-left-radius: 0.4em;
  border-top-right-radius: 0.4em;
  border-bottom-right-radius: 0.4em;
  margin-bottom: 5px;
}

.xneutre
{
  position:relative;
  width: 28%;
  height: 53px;
  border-top-left-radius: 0.5em;
  border-bottom-left-radius: 0.5em;
}

.boxneutrep {
  left: 11%;
  display: inline-grid;
  width: 96%;
  top: 52%;
  transform: translateY(-50%);
  position: absolute;
  height: 52px;
}

.action .boxneutrep, .filtre .boxneutrep {
  top: 50%;
  height: 50px;
}

.genboxes.declencheur .boxneutrep {
  border: solid 1px #ffa31a;
  border-top-right-radius: 0.4em;
  border-bottom-right-radius: 0.4em;
  border-left: none;
}

.genboxes.action .boxneutrep {
  border: solid 1px #90d51c;
  border-top-right-radius: 0.4em;
  border-bottom-right-radius: 0.4em;
  border-left: none;
}

.genboxes.filtre .boxneutrep {
  border: solid 1px #91c4f2;
  border-top-right-radius: 0.4em;
  border-bottom-right-radius: 0.4em;
  border-left: none;
}

.genboxes.spm_box_disabled .boxneutrep {
  border-color: #E9E9E9;
}

.boxneutprepText {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: left;
  padding: 3px 20px 3px 40px;
  width: 100%;
  color: #1e1e1e !important;
}

.spm_box_disabled .boxneutprepText {
  color : #E9E9E9 !important;
}

.conditionSi p
{
.boxneutrep;
  color                   :   purple;
}
.conditionSi
{
  background-color        :   purple              ;
  border                  :   2px solid purple    !important;
  color: purple;
}



.declencheur, .xdeclencheur {
  border: none;
  background: none;
}

.xdeclencheur, .xaction, .xfiltre {
  height: 50px;
  position: relative;
}

.filtre {
  background: none;
  width: 100%;
  height: 50px;
  border-radius: 0.4em;
}

.declencheurlogoContainer {

}

.xdeclencheur .declencheurlogoContainer .box-logo {
  transform: translateY(-50%) rotate(-45deg);
}

.declencheur:hover {
  border:none;
}



.genboxes.action, .genboxes.filtre {
  border: none !important;
  background: none !important;
  width: 100%;
  position: relative;
}

.action .flowchart-operator-title {
  color: #90d51c;
}

.xaction {
  background: none;
  width: 100%;
  height: 50px;
  border-radius: 0.4em;
}

.actionlogoContainer {
  background: #90d51c;
  width: 50px;
  height: 50px;
  border-radius: 0.4em;
}

.filtrelogoContainer {
  background: #91c4f2;
  width: 50px;
  height: 50px;
  border-radius: 25px;
}


.declencheur p,
.action p,
.filtre p {
  left: 25%;
  display: inline-grid;
  width: 75%;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  line-height: 1.4em;
}

.declencheur p {
  left: 35%;
  width: 65%;
  top: 37%;
}

.declencheur p {
  color: #1e1e1e;
}

.action p {
  color: #1e1e1e;
}

.filtre p {
  color: #1e1e1e;
}

#content{
  position:relative;
}



.load_container
{
  position    : absolute;
  top         : 50px;
  left        : -900px;
  width       : 25%;
  z-index     : 10000;
}

.box-logo {
  position: relative;
  top: 50%;
  color: white;
  transform: translateY(-50%);
}

#divBox
{
  width: 100%;
  background-color: white;
}


#chart_container
{
  width: 100%;
  height: 100%;
  overflow: hidden;
  /*background: repeating-linear-gradient( 45deg, #eee, #eee 10px, #e5e5e5 10px, #e5e5e5 20px );*/
  background-color: white;
  position: relative;
}
/*------------------------------------------------------------------

Custom Filtre Pannel Styles

------------------------------------------------------------------- */

div.segment
{
  background:#fff;padding:10px;
}

.custom-filtre-rm-segment, .custom-filtre-edit-segment, .custom-filtre-submit
{
  float               : right;
}

.slider_text_div, .range_slider_text_div
{
  background-color    : white !important;
  height              : 40px  !important;
  text-align          : center!important;
  margin-bottom       : 5px   !important;
  font-size           : 20px  !important;
}

h1, h2, h3, h4, h5
{
  text-transform      : none!important;
}

.custom-filtre-small
{
  font-size           : 12px;
}
/*------------------------------------------------------------------

Custom Box Pannel Styles

------------------------------------------------------------------- */

.error_label
{
  color               : red;
  font-style          : italic;
}

.custom-form-submit
{
  float               : right;
}

/*------------------------------------------------------------------

Flowchart Lib Overriding Styles

------------------------------------------------------------------- */
.flowchart-link rect
{
  display             : none;
}

.flowchart-operator {
  width: 50px;
  position: absolute;
  left: 50%;
  border-radius: 0.4em;
  margin-bottom: 5px;
  height: 50px;
}

.flowchart-operator .flowchart-operator-title {
  position: absolute;
  top: 50%;
  background: none;
  display: block;
  transform: translateY(-50%);
  width: 200px !important;
  white-space: normal;
  text-overflow: unset;
  color: #1e1e1e !important;
  font-weight: normal;
  border-top-right-radius: 0.4em;
  border-bottom-right-radius: 0.4em;
  height: 100%;
  border: none;
}

.flowchart-operator.declencheur .flowchart-operator-title {

}

.flowchart-operator.action .flowchart-operator-title {

}

.flowchart-operator.filtre  .flowchart-operator-title{

}

.operator-title-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px 10px 10px 31px;
}



.filtre .flowchart-operator-title {
  color: #91c4f2;
}

.flowchart-operator .flowchart-operator-inputs, .flowchart-default-operator .flowchart-operator-outputs
{
  display             : inline;
}

.flowchart-operator .flowchart-operator-inputs-outputs
{
  display             : inline;
  width               : 0%;
}

.flowchart-operator-inputs .flowchart-operator-connector
{
  position: absolute;
  transform: translate(-50%, -50%);
}

.flowchart-operator-inputs .flowchart-operator-connector-set {
  opacity: 0;
}

.flowchart-operator-outputs .flowchart-operator-connector-set {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 100%;
  left: 50%;
  z-index: 1;
  opacity: 0;
}

.flowchart-operator-connector-set.exchangeConnector {
  top: 100% !important;
  transform: translate(-50%, 35%) !important;
}

.flowchart-operator-outputs .exchangeConnector .flowchart-operator-connector-arrow, .flowchart-operator-outputs .exchangeConnector .flowchart-operator-connector-arrow:hover {
  border: none !important;
}

.exchangeConnector .exchange {
  color: #B1B1B1 !important;
}

.exchangeConnector .exchange:hover {
  color: #333333 !important;
}


.flowchart-operator-outputs .flowchart-operator-connector-set:only-child
{
  position            : absolute;
  top                 : 100%;
  transform           : translate(-50%, -50%);
}

.declencheur .flowchart-operator-outputs .flowchart-operator-connector-set:only-child {
  bottom: -20px;
  top: auto;
}

.flowchart-operator-outputs .flowchart-operator-connector-set .flowchart-operator-connector-label
{
  position            : absolute;
  top                 : 12px;
  display             : none;
}

.flowchart-operator-outputs .flowchart-operator-connector-set:only-child .flowchart-operator-connector-label, .flowchart-operator-inputs .flowchart-operator-connector-set .flowchart-operator-connector-label
{
  display             : none;
}

.flowchart-operator-inputs .flowchart-operator-connector-set .flowchart-operator-connector {
  position            : absolute;
  top                 : 0;
  left                : 50%;
  transform           : translate(-50%,-50%);
  z-index             : 1;
}

.flowchart-operator-inputs .flowchart-operator-connector-set .flowchart-operator-connector .flowchart-operator-connector-label {
  display             : none;
}

.flowchart-operator-connector {
  width               : 14px;
  height              : 14px;
  padding             : 0;
  cursor: pointer;
}

.flowchart-operator-outputs .flowchart-operator-connector-arrow, .flowchart-operator-inputs .flowchart-operator-connector-arrow {
  border: solid 1px #cecece !important;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
}

.declencheur .flowchart-operator-outputs .flowchart-operator-connector-arrow {
  right: -10px;
  top: 0 !important;
}

.flowchart-operator-outputs .flowchart-operator-connector-small-arrow, .flowchart-operator-inputs .flowchart-operator-connector-small-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto !important;
  border: none !important;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: #93c840;
  transform: translate(-50%, -50%);
}

.declencheur .flowchart-operator-outputs .flowchart-operator-connector-small-arrow {
  top: 0;
}

.flowchart-operator-outputs .connector-cross
{
  top: 0% !important;
  left: 40% !important;
}

.flowchart-operator-outputs .connector-check
{
  top: 10% !important;
  left: 30% !important;
}


.cross { color: #f32b2b;}
.check { color: #3dc92b;}


.flowchart-operator-outputs .flowchart-operator-connector-arrow:hover, .flowchart-operator-inputs .flowchart-operator-connector-arrow:hover {
  border: solid 1px #cecece !important;
}

.campaign .logo
{
  height: 100% !important;
  width: 100% !important;
  color: white !important;
  display: block !important;
  text-align: center;
}

.campaign .logo::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.declencheurlogo {
  position: relative;
  color: #ffa31a !important;
  transform: rotate(-45deg);
}


/* MODAL */
#modalOfBoxes {
  width: 100%;
  height: 100%;
  overflow: auto;
}

#configBoxModal {
  width: 100%;
  height: 100%;
  overflow: auto;
}

#configBoxModal .panel-heading{
  background-color: white;
  padding-bottom: 0px;
}

#configBoxModal .modal-footer{
  border:none;
}

.modal:not(#modalOfBoxes) .modal-body {
  max-height: calc(100vh - 245px)!important;
  overflow-y: auto!important;
}

.modal-lg {
  width: 940px;
}
.modal-body > .stepwizard + .panel-group {
  height: calc(100% - 120px);
  margin-bottom: 0;
}

#popin_base_template_categories li a {
  outline: none;
}

#configBoxModal .modal-header {
  border-bottom: none;
  padding-bottom: 0;
}

/*
STEP WIZARD POUR LA CONFIGURATION DES BOXS
 */
.stepwizard-step p {
  margin-top: 0px;
  color:#666;
}
.stepwizard-row {
  display: table-row;
}
.stepwizard {
  display: table;
  width: 100%;
  position: relative;
}
.stepwizard-step button[disabled] {
  /*opacity: 1 !important;
  filter: alpha(opacity=100) !important;*/
}
.stepwizard .btn.disabled, .stepwizard .btn[disabled], .stepwizard fieldset[disabled] .btn {
  opacity:1 !important;
  color:#bbb;
}
.stepwizard-row:before {
  top: 14px;
  bottom: 0;
  position: absolute;
  content:" ";
  width: 100%;
  height: 1px;
  background-color: #ccc;
  z-index: 0;
}
.stepwizard-step {
  display: table-cell;
  text-align: center;
  position: relative;
}
.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}


.msg {
  background: #f5f5f5;
  color: #666666;
  font-weight: lighter;
  font-size: small;
  padding: 12px;
  padding-left: 16px;
  border-top: solid 3px #CCCCCC;
  border-radius: 5px;
  margin-bottom: 10px;

}
.msg-clear {
  border-color: #fefefe;
  -webkit-box-shadow: 0 7px 10px -5px rgba(0,0,0,.15);
  -moz-box-shadow: 0 7px 10px -5px rgba(0,0,0,.15);
  box-shadow: 0 7px 10px -5px rgba(0,0,0,.15);
}
.msg-info {
  border-color: #b8dbf2;
}
.msg-success {
  border-color: #8ed867;
}
.msg-warning {
  border-color: rgba(255,165,0,.5);
}
.msg-danger {
  border-color: #ec8282;
}
.msg-primary {
  border-color: #9ca6f1;
}
.msg-magick {
  border-color: #e0b8f2;
}
.msg-info-text {
  color: #39b3d7;
}
.msg-success-text {
  color: #54b61f;
}
.msg-warning-text {
  color: #db9e34;
}
.msg-danger-text {
  color: #c9302c;
}
.msg-primary-text {
  color: rgba(47,106,215,.9);
}
.msg-magick-text {
  color: #bb39d7;
}

.easy-autocomplete{
  width:100% !important
}

.easy-autocomplete input{
  width: 100%;
}

.easy-autocomplete-container li {
  background-color:white !important;
  color : rgb(51, 51, 51) !important;
  text-align: left;
}
.copyButton{
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.notifCopyButton {
  border: 0px;
  color: #93c83d;
}

.modalProduct {
  z-index: 4000;
}

.add-filtre {
  position: relative;
}

.btn-add-filtre {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  padding: 5px;
  outline: none !important;
}

.add-navigation {
  position: relative;
}

.btn-add-navigation,
.btn-remove-navigation{
  position: absolute;
  bottom: -10px;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  padding: 5px;
  outline: none !important;
}

#add-navigation-products,
#add-navigation-categories,
#add-navigation-manufacturers,
#add-navigation-urls{
  left: 47%;
}

#remove-navigation-products,
#remove-navigation-categories,
#remove-navigation-manufacturers,
#remove-navigation-urls{
  left: 53%;
}

.selectFilter {
  margin: 10px 0;
}

.timeline .timeline-item {
  margin-bottom: 35px !important;
}

.timeline .timeline-item .timeline-content {
  width: 89% !important;
}

.timeline .timeline-item .timeline-content.right::before {
  right: 89% !important;
}

.filtreBoxPanel .timeline .timeline-item .timeline-icon,
.previewBoxFilters .timeline .timeline-item .timeline-icon {
  left: 20px;
  margin-left: 0;
  border: solid 1px #cecece !important;
  width: 40px;
  height: 40px;
  background: #ffffff !important;
}

.previewBoxNavigation .timeline .timeline-item .timeline-icon {
  left: 20px;
  margin-left: 0;
  border: solid 1px #cecece !important;
  width: 40px;
  height: 40px;
}

.previewBoxFilters .timeline .timeline-item .timeline-icon,
.previewBoxNavigation .timeline .timeline-item .timeline-icon {
  left: 0px;
}

.previewBoxFilters .timeline .timeline-item:last-child,
.previewBoxNavigation .timeline .timeline-item:last-child{
  margin-bottom: 0 !important;
}

.timeline .timeline-item .timeline-icon .timeline-letter {
  font: 2.1em Ubuntu, sans-serif;
  position: absolute;
  left: 50%;
  top: 50%;
  color: #93c840;
  transform: translate(-50%, -50%);
  font-weight: bold;
  line-height: 1em !important;
}

.timeline .timeline-item .timeline-icon.timeline-yes .timeline-letter {
  color: #93C83D;
}

.timeline .timeline-item .timeline-icon.timeline-no .timeline-letter {
  color: #D8000C;
}

.previewBoxFilters .timeline::before,
.previewBoxNavigation .timeline::before {
  left: 20px;
  transform: none;
}

.editRemoveButtons {
  width: 16px;
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
}

.editOpe {
  width: 16px;
  height: 16px;
  color: #ffffff;
  background: #B1B1B1;
  text-align: center;
  border-radius: 3px;
  cursor: pointer !important;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  margin-bottom: 5px;
}

.editOpe:hover {
  background: #333333;
}

.removeOpe {
  width: 16px;
  height: 16px;
  color: #ffffff;
  background: #EF909C;
  text-align: center;
  border-radius: 3px;
  cursor: pointer !important;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.removeOpe:hover {
  background: #D8000C;
}

.flowchart-operator:not(.canBeMerged):not(.tmpDisabled):not(.highlightBranch):hover .editOpe,
.flowchart-operator:not(.canBeMerged):not(.tmpDisabled):not(.highlightBranch):hover .removeOpe {
  opacity: 1;
}

.editOpe .fa,
.removeOpe .fa {
  vertical-align: 1px !important;
}

.editOpe .fa {
  margin-left: 1px !important;
}

#zoomBar {
  position: absolute;
  bottom: 10px;
  right: 10px;
  list-style: none;
  margin: 0;
  background: #fff;
  padding: 5px;
  border-radius: 10px;
  border:1px solid #ccc;
}

#zoomBar li, #historyBar li , #moveBar li {
  color: #CACACA;
  cursor: pointer;
  float: left;
}

#zoomBar li:hover, #historyBar li:hover, #moveBar li:hover{
  color: #999999;
}

#zoomBar li.disabled, #historyBar li.disabled, #moveBar li.disabled {
  color: #EFEFEF !important;
  opacity: 1;
}

#zoomPercentage {
  height: 31px;
  line-height: 31px;
  font-size: 1.2em;
  padding: 0 5px;
}

.incompatibleBox {
  color: #D8000C;
  border: solid 2px #D8000C !important;
}

.incompatibleBox .logo {
  background: #D8000C !important;
}

.warningIncompatible {
  position: absolute;
  left: -25px;
  top: 15%;
  color: #FFD736;
  cursor: default;
}

.confirmBoxesDeletion,
.confirmBoxesSelection,
.previewBox,
.hoverBox {
  line-height: 1.4em;
  z-index: 999999;
  padding: 5px 10px;
  position: absolute;
  transform: translateY(-50%);
  width: 285px;
  background: #ffffff;
  border: solid 1px #dedede;
  border-radius: 5px;
  -moz-box-shadow: 5px 5px 8px #dedede;
  -webkit-box-shadow: 5px 5px 8px #dedede;
  box-shadow: 5px 5px 8px #dedede;
}

.confirmBoxesDeletion,
.confirmBoxesSelection {
  color: #D8000C;
}

.previewBox {
  min-height: 150px;
  width: 450px;
  z-index: 100000;
}

.previewBox.previewBoxFilters {
  min-height: auto;
}

.previewBoxFilters .filterContent .row {
  margin-top: 0 !important;
}

.confirmBoxesSelection{
  color: #333333;
}

.confirmBoxesDeletion:after, .confirmBoxesDeletion:before,
.previewBox:after, .previewBox:before,
.hoverBox:after, .hoverBox:before,
.confirmBoxesSelection:after, .confirmBoxesSelection:before{
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.confirmBoxesDeletion:after,
.previewBox:after,
.hoverBox:after,
.confirmBoxesSelection:after{
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #ffffff;
  border-width: 10px;
  margin-top: -10px;
}
.confirmBoxesDeletion:before,
.previewBox:before,
.hoverBox:before,
.confirmBoxesSelection:before{
  border-color: rgba(222, 222, 222, 0);
  border-right-color: #dedede;
  border-width: 11px;
  margin-top: -11px;
}

.previewBox .preview_title h3,
.hoverBox .preview_title h3{
  margin: 5px 0 7px;
  color: #93C83D;
}

.hoverBox .preview_content {
  margin-top:5px;
}

.previewBox ul.additionalData {
  padding: 0;
  list-style: none;
  margin: 5px 0 8px;
}

.previewBox ul.additionalData li {
  color: #333;
  font-size: 1em;
  line-height: 1em;
  padding: 2px 0;
}

.previewBox .summary-content, .previewBox .preview_description {
  color: #333;
}

.chooseActionMultiOutputBranch,
.informativeMessageBox{
  color: #333333;
  line-height: 1.4em;
  padding: 5px 10px;
  position: absolute;
  transform: translateX(-50%);
  width: 270px;
  background: #ffffff;
  border: solid 1px #dedede;
  border-radius: 5px;
  -moz-box-shadow: 5px 5px 8px #dedede;
  -webkit-box-shadow: 5px 5px 8px #dedede;
  box-shadow: 5px 5px 8px #dedede;
  z-index: 100000;
}
.informativeMessageBox {
  color: #999999;
}

.chooseActionMultiOutputBranch:after, .chooseActionMultiOutputBranch:before,
.informativeMessageBox:after, .informativeMessageBox:before {
  left: 50%;
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.chooseActionMultiOutputBranch:after,
.informativeMessageBox:after{
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #ffffff;
  border-width: 9px;
  margin-left: -8px;
}
.chooseActionMultiOutputBranch:before,
.informativeMessageBox:before{
  border-color: rgba(222, 222, 222, 0);
  border-bottom-color: #dedede;
  border-width: 10px;
  margin-left: -9px;
}

.informativeMessageBox .error{
  color: #c9302c;
}
.confirmButtons {
  margin-top: 5px;
}

.chooseActionMultiOutputBranch .confirmButtons {
  margin-top: 0px;
}

.confirmButtons .cancelDeletion {
  margin-left: 5px;
}

.confirmButtons .btnCloseBranch {
  margin-top: 5px;
}

.dashedBorder {
  border-right-width: 2px;
  border-right-style: dashed;
  border-color: #D5D5D5;
}

.dashedContainer {
  position: relative;
}

.dashedContainer .dashedBorder::after {
  pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(255,255,255, 0), rgba(255,255,255, 1) 100%);
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 50%;
  width: 3px;
  height: 70px;
  transform: translateX(-50%);
}

.chosenOutput .active .dashedContainer .dashedBorder::after {
  background-image: none;
}

#configBoxModal .form-group {
  width : 75%;
  margin: 15px auto;
}

#configBoxModal .boxneutrep {
  line-height: 1.4em;
}

#historyBar {
  position: absolute;
  top: 10px;
  left: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  padding: 5px;
  border-radius: 10px;
  border:1px solid #ccc;
}

#historyBar li#showHistoryPanel {
  color: #91c53f;
  opacity: 0.65;
}

#historyBar li#showHistoryPanel:hover {
  opacity: 1;
}

#workflowHistoryPanel {
  position: absolute;
  top: 0;
  left: -450px;
  width: 450px;
  background: #ffffff;
  border-right: solid 1px #EFEFEF;
  height: 100%;
  z-index: 10;
  padding: 20px;
  -moz-box-shadow: 9px 0px 10px #EFEFEF;
  -webkit-box-shadow: 9px 0px 10px #EFEFEF;
  box-shadow: 9px 0px 10px #EFEFEF;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

#workflowHistoryPanel.active {
  left: 0px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

#workflowHistoryPanel .title {
  font-weight: normal !important;
}

#workflowHistoryPanel .savedList .list-group-item {
  padding: 5px 15px;
  height: 41px;
  vertical-align: middle;
}

#workflowHistoryPanel .savedList .list-group-item:not(.active):hover {
  background: #EFEFEF;
}

#workflowHistoryPanel .savedList .list-group-item .date {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1em;
}

#workflowHistoryPanel .savedList .list-group-item .restoreSavedHistory:hover {
  background: #91c53f;
  color: #ffffff;
}

#closeHistory {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #CACACA;
  outline: none !important;
}

#closeHistory:hover {
  color: #999999;
}

#workflowHistoryPanel .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
  background: #91c53f;
  border-color: #91c53f;
}

#workflowHistoryPanel .list-group-item.active .restoreSavedHistory {
  display: none;
}

#workflowHistoryPanel .savedList .list-group-item.active .date i {
  color: #ffffff !important;
}

#historyList {
  overflow: auto;
}

#backToOriginalButton {
  margin-bottom: 10px;
}

.persistant {
  position: absolute;
  top: 73%;
  left: -25px;
  z-index: 1000;
  transform: translateY(-50%);
  cursor: default;
}

.daterangepicker td.in-range {
  background-color: #c5e9a4;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #91c53f !important;
}

.tree, .tree ul {
  margin:0;
  padding:0;
  list-style:none
}
.tree ul {
  margin-left:1em;
  position:relative
}
.tree ul ul {
  margin-left:.5em
}
.tree ul:before {
  content:"";
  display:block;
  width:0;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  border-left:1px solid
}
.tree li {
  margin:0;
  padding:0 1em;
  line-height:2em;
  color: #1E1E1E;
  font-weight:700;
  position:relative
}
.tree ul li:before {
  content:"";
  display:block;
  width:10px;
  height:0;
  border-top:1px solid;
  margin-top:-1px;
  position:absolute;
  top:1em;
  left:0
}
.tree ul li:last-child:before {
  background:#fff;
  height:auto;
  top:1em;
  bottom:0
}
.indicator {
  margin-right:5px;
}
.tree li a {
  text-decoration: none;
  color:#1E1E1E;
}
.tree li i {
  color:#93C83D;
}
.tree li button, .tree li button:active, .tree li button:focus {
  text-decoration: none;
  color:#369;
  border:none;
  background:transparent;
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 0px;
  outline: 0;
}

#operatorElementNav {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #ffffff;
  border-radius: 50%;
  padding: 0;
  background-color: #93c83d;
  cursor: pointer;
  border: 1px solid #D5D5D5;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
}

.operatorBoxNav {
  margin-right: 10px;
  padding: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-block;
  line-height: 24px;
  text-align: center;
  background-color: white;
  color: #93c83d;
  cursor: pointer;
}

.clockpicker-popover .text-primary {
  color: #93c83d;
}

.clockpicker-plate {
  margin: 0 auto;
}

.clockpicker-tick.active, .clockpicker-tick:hover {
  background-color: #93c83d !important;
  color: #ffffff;
}

.clockpicker-canvas line {
  stroke: #93c83d !important;
}

.clockpicker-canvas-bearing, .clockpicker-canvas-fg {
  fill: #93c83d !important;
}

.clockpicker-canvas-bg {
  fill: #93c83d !important;
}


.templateType {
  border: solid 1px #efefef;
  height: 105px;
  border-radius: 4px;
  padding: 5px 2px;
  position: relative;
}

.templateType:hover, .templateType.active {
  border: solid 1px #7ca632;
  background: #93c83d;
  cursor: pointer;
  color: #ffffff;
}

.templateType .icon {
  height: 50px;
  position: relative;
}

.templateType .icon > .fa {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.templateType .fa-stack .fa-stack-2x, .templateType .icon > .fa {
  color: #efefef;
}

.templateType .fa-stack-1x {
  width: auto;
  bottom: 0;
  vertical-align: -30%;
  color: #93c83d;
  top: auto;
  right: 0;
  left: auto;
  line-height: 1em;
}

.templateType:hover .fa-stack .fa-stack-2x, .templateType:hover .icon > .fa, .templateType.active .fa-stack .fa-stack-2x, .templateType.active .icon > .fa {
  color: #ffffff;
}

.templateType:hover .fa-stack-1x, .templateType.active .fa-stack-1x {
  color: #ffa31a;
}

.template_icon {
  position: absolute;
  top: 50%;
  /* left: 50%; */
  transform: translateY(-50%);
  width: 100%;
}

#chooseTemplateType .modal-body .row {
  margin-top: 15px;
}

#chooseTemplateType .modal-body .row:first-child {
  margin-top: 0px;
}


.preview_template_loader {
  z-index:100;
  display:none;
  filter: alpha(opacity=97); /* internet explorer */
  -khtml-opacity: 0.97;      /* khtml, old safari */
  -moz-opacity: 0.97;       /* mozilla, netscape */
  opacity: 0.97;           /* fx, safari, opera */
  position:absolute;top:0;left:0;width:100%;height:100%;background: #fff url(/img/loader.gif) center no-repeat;
}
.gMapsLocationMap {max-width:100%!important;}

.input-group-doubletext .input-group[class*="col-"] {float:left;}
.input-group .input-group-addon {
  border-radius: 0;
  border-right-width: 0;
  border-right-left: 0;
}
.input-group .bootstrap-touchspin-down, .input-group .bootstrap-touchspin-up, .input-group  .input-group-addon, .input-group input {
  border-radius: 0;
}

.input-group .bootstrap-touchspin-up,.input-group .bootstrap-touchspin-down {
  background: white;
  color: #666;
  border-color: #cccccc;
}
.input-group:not(.input-group-spinerextravalue) .bootstrap-touchspin-up {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
.input-group .bootstrap-touchspin-down {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
.input-group .input-group:first-child {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
.input-group .input-group-addon:last-child {
  border-right-width: 1px;
  border-right-left: 0;
}
.input-group .input-group-addon:first-child {
  border-right-width: 0;
  border-right-left: 1px;
}
.input-group-addon-noborder {border-radius: 0;border-width:0;}
.input-group .btn, .input-group .input-group-addon-noborder {
  height: 40px;
}
.emoji-picker-container div.form-control { min-width: 351px;max-width:351px;}

.requiredField {
  border: solid 2px #D8000C;
}

.template_preview_container {
  width: 100%;
  position: relative;
  height: 300px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  background: #fff url(/img/loader.gif) center center no-repeat;
}

.base-workflow-list .template_preview_container {
  border: none !important;
  height: auto !important;
  background: none;
}
.gallery-container > li {
  min-height: auto !important;
}
@-webkit-keyframes UPANDDOWN {
  0%   { background-position:top center; }
  50% { background-position:bottom center;}
  100%   { background-position:top center; }
}
@-moz-keyframes UPANDDOWN {
  0%   { background-position:top center; }
  50% { background-position:bottom center;}
  100%   { background-position:top center; }
}
@-o-keyframes UPANDDOWN {
  0%   { background-position:top center; }
  50% { background-position:bottom center;}
  100%   { background-position:top center; }
}
@keyframes UPANDDOWN {
  0%   { background-position:top center; }
  50% { background-position:bottom center;}
  100%   { background-position:top center; }
}
:not(.boxsendpushnotification) .template_preview_container[data-was-processed="true"] {
  webkit-animation: UPANDDOWN 10s infinite; /* Safari 4+ */
  -moz-animation:    UPANDDOWN 10s infinite; /* Fx 5+ */
  -o-animation:      UPANDDOWN 10s infinite; /* Opera 12+ */
  animation:         UPANDDOWN 10s infinite; /* IE 10+, Fx 29+ */
}

.boxsendpushnotification .template_preview_container[data-was-processed="true"] {
  background-position: center 24% !important;
}

:not(.boxsendpushnotification) .template_preview_container[data-was-processed="true"]:hover {
  background-position: bottom left;
}

/* Cacher l'autoscrool pour les push notif */
.boxsendpushnotification .template_preview_container[data-was-processed="true"]:hover {
  background-position: center 24% !important;
}

#marketing-pressure-list {
  margin-bottom: 5px;
}

#marketing-pressure-list .workflow {
  border: solid 1px #cccccc;
  padding: 10px;
  border-radius: 4px;
  margin-top: 10px;
  background: #ffffff;
  position: relative;
}

#marketing-pressure-list .workflow.hide {
  display: none;
}

#marketing-pressure-list .workflow:first-child {
  margin-top: 0px;
}

#marketing-pressure-list .workflow_name {
  font-size: 1.4em;
  overflow: hidden;
  width: 100%;
  display: flex;
}

#marketing-pressure-list .workflow_move {
  position: absolute;
  color: #CFCFCF;
  cursor: pointer;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  line-height: 1em;
}

#marketing-pressure-list .workflow_move:hover {
  color: #93c83d;
}

#marketing-pressure-list .workflow_data {
  padding-left: 43px;
}

#marketing-pressure-list .workflow_move_placeholder {
  position: relative;
  margin: 0;
  padding: 0;
  border: none;
}

#marketing-pressure-list .workflow_move_placeholder:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  margin-top: -5px;
  left: -10px;
  top: 0px;
  border: 10px solid transparent;
  border-left-color: #93c83d;
  border-right: none;
}

#marketing-pressure-list .workflow_move_placeholder:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  margin-top: -5px;
  right: -10px;
  top: 0px;
  border: 10px solid transparent;
  border-right-color: #93c83d;
  border-left: none;
}

#marketing-pressure-list .workflow_priority {
  padding: 0 5px;
  color: #93c83d;
  font-weight: bold;
  width: 50px;
  text-align: center;
  background: #fff;
  position: absolute;
  right: 0;
}


#marketing-pressure-list .workflow_name::after {
  content: "";
  flex: 1 0 20px;
  margin: 0 0 10px 20px;
  border-bottom: dashed 1px #93c83d;
}

#marketing-pressure-list .workflow_name .name {
  background: #ffffff;
}

#marketing-pressure-form label {
  font-weight: normal;
}

#marketing-pressure-form .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
  width: 77px;
}

#marketing-pressure-form .bootstrap-select .btn.dropdown-toggle {
  width: 100%;
  font-size: 12px;
  padding-left: 5px !important;
  padding-right: 20px !important;
  border-color: #cccccc;
  border-left: none;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;

}

#marketing-pressure-form .bootstrap-select .btn.dropdown-toggle .caret {
  right: 6px;
}

#marketing-pressure-form .bootstrap-touchspin-down,
#marketing-pressure-form .bootstrap-touchspin-up {
  padding: 8px !important;
}
#marketing-pressure-form .bootstrap-touchspin-up:hover, #marketing-pressure-form .bootstrap-touchspin-up:focus, #marketing-pressure-form .bootstrap-touchspin-up:active,
#marketing-pressure-form .bootstrap-touchspin-down:hover, #marketing-pressure-form .bootstrap-touchspin-down:focus, #marketing-pressure-form .bootstrap-touchspin-down:active{
  background: none !important;
  border: 1px solid #cccccc !important;
}
#marketing-pressure-form .bootstrap-touchspin input {
  padding: 7px 2px !important;
  text-align: center;
  height: 100%;
}
#marketing-pressure-form .dropdown-menu  {
  padding: 5px;
}
#marketing-pressure-form .dropdown-menu li a {
  color: black;
}
#marketing-pressure-form .fa {
  color: #91c53f;
}

.btn-group[data-toggle="buttons"] .btn.btn-primary {
  padding: 5px 15px;
  font-size: 14px;
  background: #fff;
  border: solid 1px #EFEFEF;
  font-size: 1.1em;
  color: #444;
}

.btn-group[data-toggle="buttons"] .btn.btn-primary.active{
  background: #93c83d;
  color: #fff;
}

.form-group label {
  font-size: 14px;
  margin-bottom: 10px;
}

#navTriggerBoxModal.visitpage .hiddenVisitPage {
  display: none;
}

#navTriggerBoxModal:not(.visitpage) .hiddenHistoryNav {
  display: none;
}


#filtreBoxModal.box_openemail_clicklink .hiddenBoxOpenemailClickLink {
  display: none;
}

#filtreBoxModal.box_filtres .hiddenBoxFiltres {
  display: none;
}

.addplusfiltre {
  font-size: 10px;
}

.flowchart-operator-connector i.fa {
  font-size: 10px !important;
}

.flowchart-operator-connector i.fa.fa-exchange {
  font-size: 12px !important;
}

.chosenOutput .active .flowchart-operator {
  background: rgba(255, 200, 116, 0.7) !important;
}

.chosenOutput .active .flowchart-operator .flowchart-operator-title {
  border-bottom-color: rgba(255, 200, 116, 0.7) !important;
  border-top-color: rgba(255, 200, 116, 0.7) !important;
  border-right-color: rgba(255, 200, 116, 0.7) !important;
  color: rgba(255, 200, 116, 0.7) !important;
}

.flowchart-operator.declencheur .addplus {
  top: 0 !important;
}



#moveBar {
  position: absolute;
  bottom: 10px;
  left: 10px;
  list-style: none;
  margin: 0;
  background: #fff;
  padding: 0;
  border-radius: 40px;
  border: 1px solid #ccc;
  height: 80px;
  width: 80px;
}

#moveRight,
#moveLeft,
#moveUp,
#moveDown {
  position: absolute;
  font-family: Lato, sans-serif;
  font-size: 26px;
  color: #777;
}

#moveRight {
  bottom: 26px;
  left: 51px;
}

#moveLeft {
  bottom: 26px;
  left: 5px;
}

#moveDown {
  bottom: 3px;
  left: 27px;
}

#moveUp {
  bottom: 48px;
  left: 27px;
}

.workflow-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 50px;
  background: white;
}