* {
  box-sizing: border-box;
  font-family: "Roboto";
}

/* basic stylings ------------------------------------------ */
body {
  background: #eee;
  min-width: 320px;
  font-size: 1.4em;
  line-height: 1.5;
  margin: 0px;
}

/* knacss ------------------------------------------ */
html {
  font-size: calc(1em * 0.625);
}

p,
.p-like,
ul,
ol,
dl,
blockquote,
pre,
td,
th,
label,
textarea,
caption,
details,
figure {
  margin-top: 0.75em;
  margin-bottom: 0px;
  line-height: 1.5;
  font: inherit;
}

i {
  font-size: 1.8em;
}

/* ---------------------------------- */
/* ==Grids                            */
/* ---------------------------------- */
/* grid container */
[class*="grid-"] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -1em;
  /* inline-block fallback for IE9 generation */
  letter-spacing: -0.31em;
  text-rendering: optimizespeed;
}

/* grid childs */
[class*="grid-"]>* {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: calc(100% * 1 / 4 - 1em - 0.01px);
  margin-left: 1em;
  /* inline-block fallback for IE9 generation */
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal;
  text-rendering: auto;
}

[class*="grid-2"]>* {
  width: calc(100% * 1 / 2 - 1em - 0.01px);
}

[class*="grid-2"]>.flex-item-double {
  width: calc(100% * 2 / 2 - 1em - 0.01px);
}

[class*="grid-3"]>* {
  width: calc(100% * 1 / 3 - 1em - 0.01px);
}

[class*="grid-3"]>.flex-item-double {
  width: calc(100% * 2 / 3 - 1em - 0.01px);
}

[class*="grid-4"]>* {
  width: calc(100% * 1 / 4 - 1em - 0.01px);
}

[class*="grid-4"]>.flex-item-double {
  width: calc(100% * 2 / 4 - 1em - 0.01px);
}

[class*="grid-5"]>* {
  width: calc(100% * 1 / 5 - 1em - 0.01px);
}

[class*="grid-5"]>.flex-item-double {
  width: calc(100% * 2 / 5 - 1em - 0.01px);
}

[class*="grid-6"]>* {
  width: calc(100% * 1 / 6 - 1em - 0.01px);
}

[class*="grid-6"]>.flex-item-double {
  width: calc(100% * 2 / 6 - 1em - 0.01px);
}

[class*="grid-7"]>* {
  width: calc(100% * 1 / 7 - 1em - 0.01px);
}

[class*="grid-7"]>.flex-item-double {
  width: calc(100% * 2 / 7 - 1em - 0.01px);
}

[class*="grid-8"]>* {
  width: calc(100% * 1 / 8 - 1em - 0.01px);
}

[class*="grid-8"]>.flex-item-double {
  width: calc(100% * 2 / 8 - 1em - 0.01px);
}

[class*="grid-10"]>* {
  width: calc(100% * 1 / 10 - 1em - 0.01px);
}

[class*="grid-10"]>.flex-item-double {
  width: calc(100% * 2 / 10 - 1em - 0.01px);
}

[class*="grid-12"]>* {
  width: calc(100% * 1 / 12 - 1em - 0.01px);
}

[class*="grid-12"]>.flex-item-double {
  width: calc(100% * 2 / 12 - 1em - 0.01px);
}

input,
button,
select,
label,
.btn {
  vertical-align: middle;
}

img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
video,
svg {
  max-width: 100%;
}

input {
  line-height: normal;
}

button,
input,
optgroup,
select,
textarea {
  margin: 0px;
  font-family: inherit;
  font-size: inherit;
}

table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  vertical-align: top;
  border-spacing: 0px;
  margin-bottom: 2rem;
}

/* map ------------------------------------------ */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 100%;
}

/* index ------------------------------------------ */
.cf {
  clear: both;
}

.bgOrange {
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.23), 0px 3px 10px rgba(0, 0, 0, 0.16);
  background: Orange none repeat scroll 0% 0%;
  color: White;
}

.sigUp {}

.logIn {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.box {
  margin: 30px auto;
  max-width: 420px;
  min-width: 320px;
}

.barLog {
  background: DarkOrange none repeat scroll 0% 0%;
  height: 50px;
  color: White;
}

.boxUnder {
  display: none;
  z-index: -1;
  position: relative;
  color: DarkSlateGray;
  background-color: White;
  max-width: 400px;
  height: 500px;
  padding: 30px 10px 10px 10px;
  margin: -500px auto 50px auto;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.23), 0px 3px 10px rgba(0, 0, 0, 0.16);
}

.el_boxUnder {
  display: none;
  color: DarkSlateGray;
  margin: 50px auto 0px auto;
  max-width: 320px;
  min-width: 320px;
}

.userPhoto {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid DarkOrange;
  background: url(../img/user.jpg) no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
  margin: -30px auto -10px auto;
  color: DarkOrange;
  text-align: center;
  font-size: 6em;
  transition: all 500ms ease 0s;
}

.userPhoto:hover {
  transform: scale(1.25);
  transition: all 500ms ease 0s;
}

.mask,
.overlay {
  position: fixed;
  display: none;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.3);
}

/* checkbox ------------------------------------------ */
.label_checkbox {
  margin: -5px 0px 0px 25px;
  font-weight: 100;
}

.el_checkbox,
.el_checkbox_Checked {
  position: absolute;
  border: 1px solid DarkOrange;
  border-radius: 3px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  text-align: center;
  margin: 0px 0px 0px -25px;
  font-size: 2em;
  line-height: 21px;
}

.el_checkbox {
  content: "";
}

.el_checkbox_Checked:before {
  color: Lime;
  content: "√";
  font-weight: 900;
}

.el_checkbox_Checked:hover~.label_checkbox,
.el_checkbox:hover~.label_checkbox,
.label_checkbox:hover,
.el_checkbox_Checked:active~.label_checkbox,
.el_checkbox:active~.label_checkbox,
.label_checkbox:active {
  color: Blue;
  cursor: pointer;
  font-weight: 100;
}

.el_checkbox_Checked:hover,
.el_checkbox:hover,
.label_checkbox:hover .el_checkbox,
.label_checkbox:hover .el_checkbox_Checked,
.el_checkbox_Checked:active,
.el_checkbox:active,
.label_checkbox:active .el_checkbox,
.label_checkbox:active .el_checkbox_Checked {
  transform: rotate(360deg);
  transition: all 500ms ease 0s;
}

/* radio ------------------------------------------ */
.label_radio {
  margin: -5px 0px 0px 70px;
  font-weight: 100;
}

.el_radio,
.el_radio_Checked {
  position: absolute;
  border: 1px solid DarkOrange;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  cursor: pointer;
  text-align: center;
  margin: 0px 0px 0px -25px;
  font-size: 2.6em;
  line-height: 0px;
}

.el_radio {
  content: "";
}

.el_radio_Checked:before {
  color: Lime;
  content: ".";
  font-weight: 900;
}

.el_radio_Checked:hover~.label_radio,
.el_radio:hover~.label_radio,
.label_radio:hover,
.el_radio_Checked:active~.label_radio,
.el_radio:active~.label_radio,
.label_radio:active {
  color: Blue;
  cursor: pointer;
  font-weight: 100;
}

.el_radio_Checked:hover,
.label_radio:hover .el_radio_Checked,
.el_radio_Checked:active,
.label_radio:active .el_radio_Checked {
  transform: skewX(30deg);
  transition: all 500ms ease 0s;
}

.el_radio:hover,
.label_radio:hover .el_radio,
.el_radio:active,
.label_radio:active .el_radio {
  transform: skewX(-30deg);
  transition: all 500ms ease 0s;
}

/* PAGE ------------------------------------------ */
.page {
  display: none;
  min-width: 320px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.23), 0px 3px 10px rgba(0, 0, 0, 0.16);
  background-color: White;
}

.bUser {
  float: left;
  margin: 8px 0px 0px 45px;
  font-size: 1.5em;
  font-weight: 300;
}

.bAnonymous {
  position: relative;
  margin: -10px auto;
  width: 77px;
  font-size: 0.6em;
  font-weight: 300;
}

.bMenu {
  float: left;
  margin: 0px;
  font-size: 2.3em;
  font-weight: 300;
}

.CNX {
  float: right;
  font-size: 2em;
  margin: 11px 10px 0px 0px;
  cursor: pointer;
}

.help {
  float: right;
  font-size: 2em;
  margin: 11px 10px 0px 0px;
  cursor: pointer;
  transform: rotate(360deg) scale(1);
  transition: all 500ms ease 0s;
}

.help:hover,
.help:active {
  transform: rotate(-360deg) scale(1.25);
  transition: all 500ms ease 0s;
}

/* basic ------------------------------------------ */
.url:hover,
.url:active,
a:hover,
a:active {
  color: Blue;
  cursor: pointer;
}

.url,
a:link,
a:visited {
  color: white;
}

.Hover {
  cursor: pointer;
}

.mpo {
  margin: -25px 0px 10px 0px;
  font-weight: 300;
}

.nCpt {
  margin: -12px 0px 10px 0px;
  font-weight: 300;
}

.barre {
  position: absolute;
  top: 0;
  width: 100%;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.23), 0px 3px 10px rgba(0, 0, 0, 0.16);
  background-color: White;
  background: DarkOrange none repeat scroll 0% 0%;
  height: 50px;
  color: White;
  max-width: 1920px;
}

.pied {
  position: fixed;
  bottom: 0;
  width: 100%;
  box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.23), 3px 0px 10px rgba(0, 0, 0, 0.16);
  background-color: White;
  background: DarkOrange none repeat scroll 0% 0%;
  height: 23px;
  color: White;
  font-weight: 300;
  text-align: center;
  z-index: 100000000;
}

.load:before {
  content: "";
  display: block;
  position: relative;
  height: 30px;
  background-color: OrangeRed;
  width: 0%;
  margin: auto;
  -webkit-animation: myBar 3s infinite;
  animation: myBar 3s infinite;
}

@-webkit-keyframes myBar {
  50% {
    width: 100%;
  }
}

@keyframes myBar {
  50% {
    width: 100%;
  }
}

.titre {
  position: relative;
  padding: 10px 50px 10px 50px;
}

h2,
h3 {
  text-align: center;
  margin-bottom: 40px;
  font-family: "Roboto" !important;
  font-style: normal;
  font-weight: 100;
  font-size: 3em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

h2 small {
  font-weight: 100;
  display: block;
}

h3 {
  margin: 0px;
}

.content {
  margin: 70px 20px 50px 20px;
  padding-bottom: 20px;
}

/* INPUT ------------------------------- */
.epic,
.key {
  display: none;
}

.group {
  position: relative;
}

.group.grand {
  margin-top: 15px;
  margin-bottom: 45px;
}

.group.normal {
  margin-top: 25px;
  margin-bottom: 25px;
}

.group.normal.compte {
  margin-bottom: 3px;
}

input,
select {
  display: block;
  width: 100%;
  border: none;
  box-shadow: none;
  outline: none;
  font-weight: 300;
  color: DarkSlateGray;
}

.bold {
  font-weight: 500;
}

input:focus,
select:focus {
  outline: none;
}

input~label,
select~label {
  font-weight: 100;
  position: absolute;
  pointer-events: none;
  transition: 0.2s ease all;
  color: DarkGray;
}

input:hover,
input:focus,
input:valid {
  background-color: White;
}

input:focus~.bar:before {
  width: 50%;
}

input:focus~.bar:after {
  width: 50%;
}

input:focus~.highlight,
input:valid~.hightlight {
  animation: validHighlighter 0.3s ease;
}

.grand input,
.grand input~label {
  font-size: 18px;
  left: 5px;
  top: -5px;
}

.normal input,
.normal select,
.normal div {
  border-bottom: 1px solid Orange;
  background-color: White;
}

.normal input~label {
  left: 0px;
  top: -12px;
}

.f300 {
  font-weight: 300;
  height: 19px;
}

.normal [readonly]~label,
.normal [disabled]~label,
.normal input:focus~label,
.normal input:valid~label,
.readOnly input~label,
.placeholder input~label {
  top: -30px;
  font-size: 12px;
  font-weight: 100;
  color: DarkSlateGray;
  opacity: 1;
}


input[readonly],
input[disabled] {
  opacity: 1;
}

.reverse input {
  padding: 10px 5px 10px 5px;
  background-color: rgb(250, 250, 250);
  font-weight: 300;
}

.reverse input:focus~label,
.reverse input:valid~label {
  top: -35px;
  font-size: 14px;
  font-weight: 300;
  color: White;
}

.reverse input:hover {
  background-color: white;
}

.Num {
  text-align: right;
  font-weight: 300;
}

/* BOTTOM BARS ================================= */
.bar {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 1px;
}

.bar:before,
.bar:after {
  content: "";
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: OrangeRed;
  transition: 0.2s ease all;
}

.bar:before {
  left: 50%;
}

.bar:after {
  right: 50%;
}

.group.normal.qte {
  margin: 10px 0px 0px;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  transition: 0.2s ease all;
  opacity: 0.5;
}

/* BUTTON ================ */
.hamburger {
  position: absolute;
  cursor: pointer;
  outline: 0px none !important;
  color: White;
  height: 26px;
  width: 26px;
  font-size: 26px;
  line-height: 26px;
  text-align: center;
  transform: rotate(360deg);
  transition: all 500ms ease 0s;
  top: 11px;
  left: 10px;
}

.hamburger:hover,
.hamburger:active {
  transform: rotate(-360deg);
  transition: all 500ms ease 0s;
}

.menu {
  position: absolute;
  top: 50px;
  z-index: 1;
}

.hUL {
  background: Orange none repeat scroll 0% 0%;
  margin: 0px 0px 0px 0px;
  display: none;
  width: 300px;
}

.hLI {
  padding: 10px 20px 10px 20px;
  border-bottom: Orange 1px solid;
  list-style-type: none;
  background-color: #fafafa;
  color: Black;
  cursor: pointer;
  font-size: 18px;
  width: 298px;
  font-weight: 100;
  display: block;
  margin-left: -39px;
}

.hLI:after {
  content: "";
  position: absolute;
  bottom: 0px;
  height: 5px;
  background-color: OrangeRed;
  width: 0%;
  transition: width 0.3s;
  right: 0px;
}

.hLI:hover:after {
  width: 0%;
  left: 0px;
}

.hLI:hover {
  background-color: White;
  width: 290px;
  padding-left: 5px;
}

.hLI:active {
  transform: rotate(360deg);
  transition: all 500ms ease 0s;
}

.point {
  cursor: pointer;
}

/*_________ btn*/
.btnSelect {
  font-family: "Roboto";
  font-weight: 900;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-overflow: "";
  color: white;
  margin: -3px 0 0 -3px;
  background-color: transparent;
  width: 30px;
  text-align: center;
  text-align-last: center;
}

.btnSelect option {
  text-align: center;
  text-align-last: center;
  color: Orange;
}

.btn {
  position: absolute;
  cursor: pointer;
  background-color: OrangeRed;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.23), 0px 3px 10px rgba(0, 0, 0, 0.16);
  outline: 0px none !important;
  color: White;
  border-radius: 100%;
  font-size: 30px;
  line-height: 0px;
  text-align: center;
  padding: 10px;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transition: all 1s;
  height: 50px;
  width: 50px;
  z-index: 1;
}

.btn span {
  transform: rotate(-360deg);
  transition: all 500ms ease 0s;
}

.btn:hover {
  /*background-color: LimeGreen;*/
}

.btn span:hover,
.btn span:active {
  transform: rotate(360deg);
  transition: all 500ms ease 0s;
}

.btn:active {
  background-color: Coral;
}

.btn.css {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -ms-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-dely: 1s;
}

.btn.animated {
  -webkit-animation: 1600ms pulsate infinite alternate ease-in-out;
  -moz-animation: 1600ms pulsate infinite alternate ease-in-out;
  -ms-animation: 1600ms pulsate infinite alternate ease-in-out;
  -o-animation: 1600ms pulsate infinite alternate ease-in-out;
  animation: 1600ms pulsate infinite alternate ease-in-out;
}

.btn.css:hover {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(2);
  -o-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-animation: "";
  -moz-animation: none;
  -ms-animation: "";
  -o-animation: "";
  animation: "";
}

.bGreen {
  background-color: LimeGreen;
}

.bRed {
  background-color: Red;
}

.bOrange {
  background-color: Gold;
}

.bYellow {
  background-color: Gold;
}

.bBlue {
  background-color: DeepSkyBlue;
}

.bWhite {
  background-color: transparent;
}

@keyframes pulsate {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.3);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

@-moz-keyframes pulsate {
  0% {
    -moz-transform: scale(1);
  }

  50% {
    -moz-transform: scale(1.3);
  }

  100% {
    -moz-transform: scale(1);
  }
}

@-ms-keyframes pulsate {
  0% {
    -ms-transform: scale(1);
  }

  50% {
    -ms-transform: scale(1.3);
  }

  100% {
    -ms-transform: scale(1);
  }
}

@-o-keyframes pulsate {
  0% {
    -o-transform: scale(1);
  }

  50% {
    -o-transform: scale(1.3);
  }

  100% {
    -o-transform: scale(1);
  }
}

/*_________ btn-round */
.btn-round {
  position: absolute;
  cursor: pointer;
  background-color: OrangeRed;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.23), 0px 3px 10px rgba(0, 0, 0, 0.16);
  outline: 0px none !important;
  color: White;
  border-radius: 100%;
  font-size: 26px;
  height: 56px;
  line-height: 26px;
  width: 56px;
  text-align: center;
  padding: 15px;
  bottom: -25px;
  right: 25px;
}

.btn-round span {
  transform: rotate(-360deg);
  transition: all 500ms ease 0s;
}

.btn-round:hover,
.btn-round:active {
  transform: scale(1.25);
}

.btn-round span:hover,
.btn-round span:active {
  transform: rotate(360deg);
  transition: all 500ms ease 0s;
}

.btn-round:active {
  background-color: Coral;
}

/*_________btn-round-add*/
.btn-round-add {
  display: none;
  position: absolute;
  cursor: pointer;
  background-color: #ff8c00;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.23), 0px 3px 10px rgba(0, 0, 0, 0.16);
  outline: 0px none !important;
  color: #fff;
  border-radius: 100%;
  font-size: 21px;
  height: 40px;
  line-height: 26px;
  width: 40px;
  text-align: center;
  padding: 8px 11px;
  bottom: -25px;
  right: 25px;
}

.btn-round-add span {
  transform: rotate(-360deg);
  transition: all 500ms ease 0s;
}

.btn-round-add:hover,
.btn-round-add:active {
  transform: scale(1.25);
}

.btn-round-add span:hover,
.btn-round-add span:active {
  transform: rotate(360deg);
  transition: all 500ms ease 0s;
}

.btn-round-add:active {
  background-color: Coral;
}

/*_________ btn-round-bal*/
.btn-round-bal {
  position: absolute;
  cursor: pointer;
  background-color: DarkOrange;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.23), 0px 3px 10px rgba(0, 0, 0, 0.16);
  outline: 0px none !important;
  color: White;
  border-radius: 100%;
  font-size: 26px;
  height: 56px;
  line-height: 26px;
  width: 56px;
  text-align: center;
  padding: 14px 11px;
  bottom: -25px;
  right: 25px;
}

.btn-round-bal span {
  transform: rotate(-360deg);
  transition: all 500ms ease 0s;
}

.btn-round-bal:hover,
.btn-round-bal:active {
  transform: scale(1.25);
}

.btn-round-bal span:hover,
.btn-round-bal span:active {
  transform: rotate(360deg);
  transition: all 500ms ease 0s;
}

.btn-round-bal:active {
  background-color: Coral;
}

/*_________ btn-round-sup*/
.btn-round-sup span:active {
  color: DimGray;
}

.btn-round-sup {
  position: absolute;
  cursor: pointer;
  background-color: OrangeRed;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.23), 0px 3px 10px rgba(0, 0, 0, 0.16);
  outline: 0px none !important;
  color: White;
  border-radius: 100%;
  font-size: 26px;
  height: 56px;
  line-height: 26px;
  width: 56px;
  text-align: center;
  padding: 15px;
  bottom: -30px;
  left: 30px;
}

.btn-round-sup span {
  transform: rotate(-360deg);
  transition: all 500ms ease 0s;
}

.btn-round-sup:hover,
.btn-round-sup:active {
  transform: scale(1.25);
}

.btn-round-sup span:hover,
.btn-round-sup span:active {
  transform: rotate(360deg);
  transition: all 500ms ease 0s;
}

.btn-round-sup:active {
  background-color: Coral;
}

.btn-round-sup span:active {
  color: DimGray;
}

/*_________ btn-round-ok*/
.btn-round-ok {
  position: absolute;
  cursor: pointer;
  background-color: LimeGreen;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.23), 0px 3px 10px rgba(0, 0, 0, 0.16);
  outline: 0px none !important;
  color: White;
  border-radius: 100%;
  font-size: 26px;
  height: 56px;
  line-height: 26px;
  width: 56px;
  text-align: center;
  padding: 15px;
  bottom: -30px;
  right: 30px;
}

.btn-round-ok span {
  transform: rotate(-360deg);
  transition: all 500ms ease 0s;
}

.btn-round-ok:hover,
.btn-round-ok:active {
  transform: scale(1.25);
}

.btn-round-ok span:hover,
.btn-round-ok span:active {
  transform: rotate(360deg);
  transition: all 500ms ease 0s;
}

.btn-round-ok:active {
  background-color: Coral;
}

.btn-round-ok span:active {
  color: DimGray;
}

/*_________ btn-round-imp*/
.btn-round-imp {
  position: absolute;
  cursor: pointer;
  background-color: LimeGreen;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.23), 0px 3px 10px rgba(0, 0, 0, 0.16);
  outline: 0px none !important;
  color: White;
  border-radius: 100%;
  font-size: 26px;
  height: 56px;
  line-height: 26px;
  width: 56px;
  text-align: center;
  padding: 15px;
  bottom: -30px;
  right: 30px;
}

.btn-round-imp span {
  transform: rotate(-360deg);
  transition: all 500ms ease 0s;
}

.btn-round-imp:hover,
.btn-round-ok:active {
  transform: scale(1.25);
}

.btn-round-imp span:hover,
.btn-round-ok span:active {
  transform: rotate(360deg);
  transition: all 500ms ease 0s;
}

.btn-round-imp:active {
  background-color: Coral;
}

.btn-round-imp span:active {
  color: DimGray;
}

.search {
  top: -10px;
  right: -20px;
}

/* modal ------------------------------------------ */
div[class^="modal"] {
  min-width: 300px;
}

.modal {
  display: none;
  position: absolute;
  z-index: 2;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
}

.modalCnt {
  position: relative;
  max-width: 800px;
  margin: 3rem auto 10rem auto;
  position: relative;
  padding: 2rem 5rem;
  background: White none repeat scroll 0% 0% padding-box;
  box-shadow: 0px 12px 15px 0px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.dispNone {
  display: none;
}

.Close:hover,
.Close:active {
  background: rgba(0, 0, 0, 0.6) none repeat scroll 0% 0%;
  transition: all 500ms ease 0s;
  transform: rotate(-360deg);
  cursor: pointer;
}

.Close {
  font-size: 20px;
  color: #fff;
  text-align: center;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0px;
  right: 0px;
  margin: -1.5rem;
  padding: 0rem;
  background: rgba(0, 0, 0, 0.3) none repeat scroll 0% 0%;
  border-radius: 50%;
  transform: rotate(360deg);
  transition: all 500ms ease 0s;
}

.pop {
  width: 19px;
  height: 19px;
  font-size: 12px;
  top: 10px;
  right: 15px;
}

.pop:hover {
  background: OrangeRed;
}

/*______________________________ALERTE____________________________*/
.wait {
  background-color: OrangeRed;
  text-align: center;
  padding: 10px;
  margin: 0px 0 30px 0;
  color: white;
  box-shadow: 0px 12px 15px 0px rgba(0, 0, 0, 0.25);
}

.overlay {
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  display: none;
  cursor: pointer;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: OrangeRed;
  color: White;
  width: 300px;
  position: relative;
  transition: background 5s ease-in-out;
  font-size: 18px;
  font-weight: 100;
  border-radius: 1px;
  cursor: pointer;
}

.popup .popContent {
  overflow: auto;
}

/*__________________________TABLE___________________________________*/
.Table {
  width: 100%;
  position: relative;
  background: White none repeat scroll 0% 0% padding-box;
  box-shadow: 0px 12px 15px 0px rgba(0, 0, 0, 0.25);
}

.Table table,
.Table th,
.Table td {
  padding: 10px;
  border: 1px solid rgb(245, 245, 245);
}

.Table table {
  background-color: White;
}

.keyTable,
.epicTable {
  margin-bottom: 50px;
}

/*
  table tr th:nth-child(1){
  width: 50px;
}
table tr th:nth-child(2){
width: 80px;
}
table tr th:nth-child(4){
width: 150px;
}
*/
.Table th,
.Table td {
  font-family: "Roboto" !important;
  font-style: normal;
  font-weight: 300;
  font-size: 1em;
  color: White;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Table th {
  background-color: Orange;
}

.Table td {
  background-color: White;
  color: DarkSlateGray;
}

th:hover,
th:active,
td:hover,
td:active {
  word-wrap: break-word;
  white-space: normal;
}

.Table tr:nth-child(even) td {
  background: rgb(253, 253, 253);
}

.Table tr.Sel td {
  background-color: rgba(65, 105, 225, 0.1);
}

.Table tr:not(.Sel):hover td {
  background: rgb(250, 250, 250);
}

.sTableTot {
  display: none;
}

.TableTot th,
.TableTot th:hover {
  background-color: Orange;
  color: White;
  font-weight: 400;
}

th,
td {
  text-align: left;
}

.positionTable tr:hover td {
  cursor: pointer;
}

.positionTable tr:active td {
  background-color: Gold;
}

.positionTable th:nth-child(1),
.histoTable th:nth-child(1),
.transactionTable th:nth-child(1),
.transactionTable th:nth-child(2),
.transactionTable th:nth-child(4) {}

.transactionTable th:nth-child(3) {
  width: 60%;
}

.positionTable th:nth-child(4),
.positionTable th:nth-child(5),
.histoTable th:nth-child(4),
.histoTable th:nth-child(5) {
  width: 5%;
}

.positionTable td:nth-child(5),
.positionTable td:nth-child(6),
.positionTable td:nth-child(7),
.positionTable td:nth-child(8),
.positionTable td:nth-child(9),
.positionTable td:nth-child(10),
.positionTable td:nth-child(11),
.histoTable td:nth-child(5),
.histoTable td:nth-child(6),
.histoTable td:nth-child(7),
.histoTable td:nth-child(8),
.histoTable td:nth-child(9),
.histoTable td:nth-child(10),
.histoTable td:nth-child(11),
.transactionTable td:nth-child(4) {
  text-align: right;
}

.positionTable .TableTot th,
.positionTable .TableTot td,
.histoTable .TableTot th,
.histoTable .TableTot td,
.transactionTable .TableTot th,
.transactionTable .TableTot td {
  text-align: right;
}

.caissesTable .TableTot td,
.histoTable .TableTot td,
.transactionTable .TableTot td {
  font-weight: 400;
}

td.Red,
th.Red {
  color: OrangeRed;
}

.Red {
  color: OrangeRed;
}

.Royalblue {
  color: royalblue;
}

.Green {
  color: LimeGreen;
}

.I {
  font-style: italic;
}

.labelDiv {
  position: absolute;
  top: -20px;
  left: 0;
  width: 100px;
  height: 20px;
  cursor: pointer;
}

/* checkbox ------------------------------------------ */
input[type="checkbox"] {
  margin-bottom: 10px;
  margin-left: -3px;
}

.normal input[type="checkbox"]~label {
  left: 25px;
  top: -23px;
  color: darkslategray;
  font-size: 18px;
}

.Flag {
  float: left;
  color: Red;
  font-weight: bolder;
  display: none;
}

/* ---------------------------------- */
/* ==Responsive small

.positionTable td:nth-child(2),
.positionTable td:nth-child(3),
.positionTable td:nth-child(4),
.positionTable td:nth-child(5),
.positionTable td:nth-child(6),
.positionTable td:nth-child(7),
.positionTable td:nth-child(8),
.positionTable td:nth-child(9),
.positionTable td:nth-child(10),
.histoTable td:nth-child(2),
.histoTable td:nth-child(3),
.histoTable td:nth-child(4),
.histoTable td:nth-child(5),
.histoTable td:nth-child(6),
.histoTable td:nth-child(7),
.histoTable td:nth-child(8),
.histoTable td:nth-child(9),
.positionTable td:nth-child(10),
.histoTable td:nth-child(11){
display:none;
}

*/
/* ---------------------------------- */
@media (max-width: 620px) {

  .hamburger,
  .barre {
    position: fixed;
    z-index: 1;
  }

  td,
  th {
    margin: 0px;
    display: block;
  }

  th:before,
  td:before {
    content: attr(data-title);
    font-weight: bolder;
  }

  .Table th,
  .sTableTot {
    display: none;
  }

  .TableTot {
    display: block;
  }

  .TableTot th {
    background: Orange;
    color: White;
  }

  .Table .TableTot th {
    display: block;
    width: auto;
    text-align: right;
    font-weight: 400;
  }

  .ssTableTot {
    display: none;
  }
}

@media (max-width: 420px) {

  .label_radio,
  .label_checkbox,
  .el_checkbox_Checked:hover~.label_checkbox,
  .el_checkbox:hover~.label_checkbox,
  .label_checkbox:hover,
  .el_checkbox_Checked:active~.label_checkbox,
  .el_checkbox:active~.label_checkbox,
  .label_checkbox:active,
  input[type="text"]~label,
  input[type="password"]~label,
  input[list]~label,
  input[type="search"]~label,
  .mpo,
  .nCpt {
    font-weight: 300;
  }

  .page {
    margin: 0px auto;
  }

  .box {
    margin: 0px auto;
  }

  .boxUnder {
    margin: -500px auto 50px auto;
  }

  .el_boxUnder {
    padding: 0px 10px 0px 10px;
  }
}

@media (max-width: 360px) {
  .search {
    right: -5px;
  }
}

@media (max-width: 320px) {
  .search {
    right: 10px;
  }
}