select {
  width: 100%;
}

textarea, input {
  resize: none;
  outline: 0;
}

.input-group.login .input-group-text {
  border: 1px solid #a5a1a1;
  border-right: rgba(255, 255, 255, 0);
}
.input-group.login .form-input {
  border-left: rgba(255, 255, 255, 0);
}

.form-input {
  outline: 0;
  padding: 10px;
  background-color: #f4f4f4;
  border: 1px solid #a5a1a1;
  border-radius: 0;
}

.btn {
  border-radius: 0;
  color: #fff;
  outline: 0;
  padding: 8px;
}
.btn:focus, .btn.focus {
  outline: 0;
  box-shadow: none;
}

.btn-continued {
  background-color: #4393d0;
}

.btn-cancel {
  background-color: #4393d0;
}

.btn-edit {
  border-color: #24283e;
  background-color: #fff;
  color: #24283e;
}

.btn-right {
  float: right;
}

.btn-center {
  text-align: center;
}

label {
  font-weight: 400;
  font-size: 0.875em;
  display: inline;
  color: black;
  padding-bottom: 5px;
}

.icon-category {
  position: absolute;
  left: -19px;
  top: 17px;
  width: 34px;
}

.checkbox-nice {
  position: relative;
  padding-left: 15px;
}
.checkbox-nice label {
  position: relative;
  left: 13px;
}
.checkbox-nice label:before {
  cursor: pointer;
  position: absolute;
  width: 22px;
  height: 22px;
  left: -28px;
  top: 1px;
  background: #fff;
  content: "";
  border: 1px solid #a5a1a1;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.checkbox-nice label:after {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  content: "";
  position: absolute;
  width: 12px;
  height: 7px;
  background: transparent;
  top: 7px;
  left: -22px;
  border: 3px solid #4393d0;
  border-top: none;
  border-right: none;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.checkbox-nice label:hover::after {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  filter: alpha(opacity=30);
  opacity: 0.3;
}
.checkbox-nice input[type=checkbox]:checked + label:after {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
}
.checkbox-nice input[type=checkbox] {
  visibility: hidden;
  position: absolute;
}

.checkbox-nice input.errorinput[type=checkbox]:not(:checked) + label:before {
  border-color: #df4444;
}

li {
  list-style: none;
}

.col-sm-7 {
  margin-right: auto;
  margin-left: auto;
}

.clear {
  clear: both;
  margin-bottom: 15px;
}

.fixed-option {
  left: 206px;
  position: relative;
  width: 355px;
}

.arrow-select {
  position: absolute;
  height: 27px;
  width: 23px;
  right: 19px;
  top: 12px;
}
.arrow-select:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: auto;
  position: relative;
  right: -7px;
  transform: translate3d(0, -50%, 0) rotate(45deg);
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  padding: 3px;
  top: 12px;
}

.arrow {
  width: auto;
  position: relative;
  left: 8px;
  border-color: transparent;
  transform: translate3d(0, -50%, 0) rotate(45deg);
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  display: inline-block;
  padding: 3px;
  top: 2px;
}
.arrow.active-arrow {
  transform: translate3d(0, -50%, 0) rotate(135deg);
}

.arrow-down:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: auto;
  position: relative;
  right: -5px;
  transform: translate3d(0, -50%, 0) rotate(313deg);
  top: 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
}

.arrow-simple {
  width: auto;
  float: right;
  position: relative;
  right: -10px;
  bottom: 10px;
  border-color: transparent;
  border-style: solid;
  border-width: 0 0.4em 0.3em;
  border-bottom-color: #fff;
  transform: translate3d(0, -50%, 0) rotate(181deg);
  top: 14px;
}
.arrow-simple.active-arrow-simple {
  transform: translate3d(0, -50%, 0) rotate(270deg);
}

.customSelect {
  position: relative;
  left: 190px;
  top: 12px;
  display: block;
  color: #fff;
  background: #4393d0;
  border-radius: 8px;
  cursor: pointer;
  width: 146px;
  height: 27px;
  border: none;
  padding-left: 7px;
}
.customSelect::after {
  position: absolute;
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  top: 50%;
  right: 11px;
  margin-top: -3px;
  border-bottom: 1.5px solid #fff;
  border-right: 1.5px solid #fff;
  transform: rotate(45deg) translateY(-50%);
  transition: all 0.4s ease-in-out;
  transform-origin: 50% 0;
}
.customSelect option {
  background: #fff;
  color: #525252;
}
.customSelect option:hover, .customSelect option:focus {
  background: #282d44;
  color: #fff;
}
.customSelect span,
.customSelect select {
  width: 100%;
  height: 100%;
}
.customSelect span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  text-indent: 30px;
}
.customSelect::after {
  position: absolute;
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  top: 50%;
  right: 11px;
  margin-top: -3px;
  border-bottom: 1.5px solid #fff;
  border-right: 1.5px solid #fff;
  transform: rotate(45deg) translateY(-50%);
  transition: all 0.4s ease-in-out;
  transform-origin: 50% 0;
}

.valid-date {
  border-radius: 8px;
  padding: 0px 8px 0 8px;
  top: -2px;
  position: relative;
  margin-left: 10px;
}

.fixed-option {
  left: 206px;
  position: relative;
  width: 355px;
}

.line {
  border: 1px solid #fff;
  width: 2px;
  height: 26px;
  position: absolute;
  left: 214px;
  top: 0;
  bottom: 0;
  margin: auto;
}

.credit {
  color: #7ed321;
}

.debit {
  color: #ff0000;
}

.error {
  color: #ff0000;
}

.icon-service {
  width: 72px;
  height: 43px;
}

.m-color {
  color: #4393d0;
}

.bold {
  font-weight: bold;
}

.select {
  position: relative;
}

.dropdown-select {
  border-radius: 5px;
  background: #f3f3f3;
  outline: transparent;
  border: 1px solid #f3f3f3;
  padding: 5px;
  padding-left: 10px;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  color: #000;
}

.dropdown-select:active,
.dropdown-select.active {
  background-color: #4a4a4a;
  color: #fff;
}

.dropdown-select.active:before,
.dropdown-select.active:after {
  border-color: #fff transparent;
}

.dropdown-select:before,
.dropdown-select:after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 25px;
  width: 0;
  height: 0;
  border: 4px dashed;
  border-color: #000 transparent;
  pointer-events: none;
}

.dropdown-select:before {
  border-bottom-style: solid;
  border-top: none;
}

.dropdown-select:after {
  margin-top: 7px;
  border-top-style: solid;
  border-bottom: none;
}

.select-hidden {
  display: none;
  visibility: hidden;
  padding-right: 10px;
}

.select-options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 4;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  outline: transparent;
  border: 1px solid #f3f3f3;
  border-radius: 5px;
  color: #4a4a4a;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
}
.select-options li {
  margin: 0;
  padding: 12px 0;
  text-indent: 15px;
  border-bottom: 1px solid #f3f3f3;
  -moz-transition: all 0.15s ease-in;
  -o-transition: all 0.15s ease-in;
  -webkit-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
}
.select-options li:hover {
  background: #4a4a4a;
  color: #fff;
}
.select-options li[value=null] {
  display: none;
}

.highcharts-container {
  margin-top: 14px;
}

::placeholder {
  color: #bdbdbd;
  font-size: 15px;
  font-family: "Maven Pro", sans-serif;
}

button.loadind {
  background: transparent;
  border: none;
  outline: none;
}

.loadind {
  display: inline-block;
  width: 80px;
  height: 80px;
}

.loadind:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 3px solid #282d44;
  border-color: #282d44 transparent #282d44 transparent;
  animation: loadind 1.2s linear infinite;
}

@keyframes loadind {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.icon-password {
  height: 79px;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
  font-family: "Maven Pro";
}

.btn:focus, .btn.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem transparent;
}

.ui-rangeSlider {
  margin: 0 auto;
  width: 80%;
  padding: 20px 0;
}

.content-wrapper .ui-rangeSlider-bar {
  background: rgba(104, 161, 214, 0.46);
}

.content-step-bar {
  height: 0;
  position: absolute;
  right: 0;
  left: 0;
  top: 0%;
  bottom: 0;
  margin: auto;
}
.content-step-bar .progressbar {
  counter-reset: step;
  text-align: center;
  padding: 0;
}
.content-step-bar .progressbar li {
  list-style-type: none;
  color: #fff;
  float: left;
  position: relative;
}
.content-step-bar .progressbar li:before {
  content: " ";
  width: 20px;
  height: 20px;
  border: 1px solid #fff;
  border-radius: 50%;
  line-height: 17px;
  display: block;
  font-size: 10px;
  color: #333;
  background: #fff;
  margin: 0 auto 5px auto;
  transition: all 0.3s ease-out 0.5s;
  -webkit-transition: all 0.3s ease-out 0.5s;
  z-index: 4;
}
.content-step-bar .progressbar li:after {
  content: "";
  width: 100%;
  height: 2px;
  background: #fff;
  position: absolute;
  left: -50%;
  top: 9px;
  z-index: -1;
  transition: all 0.3s ease-out 0.5s;
  -webkit-transition: all 0.3s ease-out 0.5s;
}
.content-step-bar .progressbar li:first-child:after {
  content: none;
}
.content-step-bar .progressbar li.active:before {
  content: " ";
  content: url();
  background: #00c1f9;
  border: transparent;
}
.content-step-bar .progressbar li.active:after {
  background: #00c1f9;
  color: #fff;
}
.content-step-bar .progressbar li.active + .content-step-bar .progressbar li:after {
  background: #00c1f9;
}
.content-step-bar .steps {
  display: inline-block;
  list-style-type: none;
  font-size: 0.75rem;
  width: 24%;
  margin: 0 auto;
}
.content-step-bar .steps.step-slider-item {
  opacity: 0.34;
}
.content-step-bar .steps.step-slider-item:first-child, .content-step-bar .steps.step-slider-item.active {
  opacity: 1;
}

.progressbar li.active + li:after {
  background: #4393d0;
}

.VertProgress {
  position: absolute;
  top: 30%;
  margin: auto;
  /* regular step */
}
.VertProgress *, .VertProgress *:before, .VertProgress *:after {
  box-sizing: content-box;
}
.VertProgress .VPstep {
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  background-color: cream;
}
.VertProgress .VPstepper {
  position: relative;
  /*   visibility: visible; */
}
.VertProgress .VPstep .VPcircle {
  background-color: white;
  border: 3px solid gray;
  border-radius: 100%;
  width: 20px;
  /* +6 for border */
  height: 20px;
  display: inline-block;
}
.VertProgress .VPstep .VPline {
  top: 23px;
  left: 12px;
  /*   height: 120px; */
  height: 100%;
  position: absolute;
  border-left: 3px solid gray;
}
.VertProgress .VPstep.completed .VPcircle {
  visibility: visible;
  background-color: #00c1f9;
  border-color: #00c1f9;
}
.VertProgress .VPstep.completed .VPline {
  border-left: 3px solid #00c1f9;
}
.VertProgress .VPstep.active .VPcircle {
  visibility: visible;
  border-color: #00c1f9;
}
.VertProgress .VPstep.empty .VPcircle {
  visibility: hidden;
}
.VertProgress .VPstep.empty .VPline {
  /*     visibility: hidden; */
  /*   height: 150%; */
  top: 0;
  height: 150%;
}
.VertProgress .VPstep:last-child .VPline {
  border-left: 3px solid white;
  z-index: -1;
  /* behind the circle to completely hide */
}
.VertProgress .VPcontent {
  margin-left: 20px;
  display: inline-block;
  list-style-type: none;
  color: #fff;
  opacity: 0.34;
  font-size: 0.75rem;
}
.VertProgress .VPstep.active .VPcontent {
  opacity: 1;
}

.container-level-password {
  position: absolute;
  left: auto;
  right: 10px;
  top: 36px;
}

.progress-bar_item {
  height: 5px;
  width: 5px;
  border-radius: 50%;
  margin-bottom: 2px;
  transition: background-color 0.2s, visisility 0.1s;
}

.progress-bar_item.active {
  background: #f4f4f4;
}

.progress-bar_item-1.active {
  background-color: #FF4B47;
}

.progress-bar_item-2.active {
  background-color: #ec9b0b;
}

.progress-bar_item-3.active {
  background-color: #ec9b0b;
}

.progress-bar_item-4.active {
  background-color: #2DAF7D;
}

.msg-level {
  background: #f4f4f4;
  position: absolute;
  top: 27px;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 5px;
  right: -119px;
  font-size: 10px;
  min-height: 36px;
  max-width: 110px;
  display: none;
}
.msg-level:after {
  content: "";
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  z-index: 10;
  border: 8px;
  margin-left: -11px;
  left: 0%;
  top: 15px;
  border-top: 7px solid #f4f4f4;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.error_msg {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 125px;
  margin: 0px auto 45px;
}
.error_msg p {
  margin: 0;
}

.error.msg {
  color: #ff0000;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-color: #ff0000;
  border-image: initial;
}

.valid.msg {
  color: #7ed321;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-color: #7ed321;
  border-image: initial;
}

.validinput {
  border-width: 1px;
  border-style: solid;
  border-color: #7ed321;
  border-image: initial;
  background: 0px 0px;
}

.errorinput {
  border: 1px solid #ff0000;
  color: #ff0000;
}

.btn-relative {
  position: relative;
}

.info-customers {
  min-height: 130px;
  width: 100%;
  background: right top 16%/cover url("../img/bkg-endBlanc.svg") no-repeat, #4393d0;
  -webkit-background: right top 16%/cover url("../img/bkg-endBlanc.svg") no-repeat, #4393d0;
}
.info-customers .user-box {
  position: relative;
  color: #fff;
  padding: 25px;
}
.info-customers .user-box span {
  font-size: 16px;
}
.info-customers .close {
  font-size: 40px;
  color: #fff;
  opacity: inherit;
  right: 20px;
  position: absolute;
  font-weight: 100;
  top: 0px;
}
.info-customers .close:not(:disabled):not(.disabled):hover, .info-customers .close:not(:disabled):not(.disabled):focus {
  color: #fff;
}

.info-customers-cards .table {
  margin-bottom: 0;
}

.box-transaction {
  margin: 20px;
  background-color: #fff;
  box-shadow: 0px 0px 5px 1px #a5a1a1;
  width: auto;
}
.box-transaction.col {
  padding: 0;
}
.box-transaction p {
  color: #fff;
  margin: 0;
  position: absolute;
  left: 60px;
  top: 11px;
}
.box-transaction .bkg-top-table p {
  font-size: 18px;
}
.box-transaction .table th {
  text-transform: none;
  font-size: 18px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #a5a1a1;
  text-align: center;
  border-bottom: none;
  border-top: none;
}
.box-transaction .table td {
  border-top: none;
  text-align: center;
  font-size: 0.875em;
  vertical-align: middle;
  border-top: 1px solid #f4f4f4;
  padding: 12px 8px;
}

.bkg-top-table {
  height: 50px;
  background-color: #282d44;
  position: relative;
}
.bkg-top-table .icon-size {
  position: absolute;
  top: 17px;
  left: 20px;
}
.bkg-top-table .icon-size.icon-card {
  width: 30px;
}

.bkg-tr {
  border-left: 2px solid #4393d0;
  background-color: rgba(194, 194, 194, 0.09);
}

.img-report {
  min-height: 333px;
  position: relative;
  background-image: url("../img/background-rapport.svg");
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
}

.text-report {
  text-align: center;
  position: relative;
  bottom: 117px;
}

.cardstatus-td {
  position: relative;
}
.cardstatus-td .cardstatus {
  top: 19px;
  left: 5px;
}

.link-row {
  cursor: pointer;
  border-bottom: 1px solid #f4f4f4;
}
.link-row.hover {
  background-color: rgba(194, 194, 194, 0.09);
}

select#curr {
  width: auto;
  position: absolute;
  top: 67px;
  z-index: 1;
  left: 11px;
}

.cardstatus {
  width: 9px;
  height: 9px;
  border-radius: 50px;
  position: absolute;
  top: 5px;
}

.act {
  background-color: #7ed321;
}

.blo {
  background-color: #dc3545;
}

.dam, .dpr {
  background-color: #f2843c;
}

.los {
  background-color: #8b572a;
}

.sto {
  background-color: #fe6f6e;
}

.cbl {
  background-color: #dc3545;
}

.card-status-repair {
  background-color: #fe6f6e;
}

.thumbnails {
  margin: 20px 0px 0px 20px;
  color: #fff;
}

.thumbnails-add-cards {
  margin: 20px 0px 0px 20px;
}

.container-card {
  display: inline-block;
  width: 367px;
  height: 112px;
}
.container-card.active {
  border-radius: 6px;
  background-color: #e0e0e0;
}
.container-card .container-state-card {
  position: relative;
  margin-left: 10px;
  top: 6px;
}
.container-card .container-state-card .icon-size {
  position: absolute;
  margin-left: 10px;
  bottom: 4px;
  right: 14px;
}

.img-option {
  float: right;
  cursor: pointer;
}

.label-cards {
  color: #000;
  font-weight: 400;
  font-size: 0.875em;
  margin: 15px;
  position: relative;
  bottom: 4px;
}

.cards-title {
  color: #000;
  font-weight: 400;
  font-size: 0.875em;
  position: relative;
  bottom: 4px;
}

.cards-balance {
  font-size: 13px;
}

.cards-small {
  width: 346px;
  height: 70px;
  border-radius: 6px;
  background-color: #e0e0e0;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  position: relative;
  font-size: 12px;
  padding: 10px 0px 10px 0px;
  margin-left: 10px;
  top: 7px;
  cursor: pointer;
}
.cards-small p {
  font-size: 8px;
  width: 87px;
}

.cards-phy {
  background-color: #282d44;
}

.cards-vir {
  border-radius: 6px;
  background-image: linear-gradient(to top, #3e83b7, #3b78ab 38%, #1c6399);
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
}

.card-code {
  bottom: 8px;
  position: relative;
}

.alert-option {
  padding: 8px 30px;
  border-bottom: 1px solid #e6e1e1;
  font-weight: 700;
  text-align: left;
}

.alert-options {
  position: absolute;
  text-align: left;
  color: #000;
  top: 32px;
  z-index: 1;
  min-width: 100px;
  box-shadow: 0 2px 10px 0 rgba(96, 96, 96, 0.5);
  background-color: #fff;
  right: 13px;
  display: none;
}

.select-option {
  padding: 5px;
  font-size: 14px;
  margin: 0;
  padding-left: 15px;
  padding-right: 10px;
  cursor: default;
}
.select-option:hover {
  background-color: #4393d0;
  color: #fff;
}

.alert-options::after {
  content: "";
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  z-index: 10;
  border: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  margin-left: -10px;
  right: 0px;
  border-bottom: 10px solid #fff;
  top: -10px;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  vertical-align: 0.16em;
}

.container-add-card img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.size-picto {
  width: 46px;
  height: 31px;
}

.card-code {
  bottom: 8px;
  position: relative;
}

.amout-alert {
  width: 100px;
  height: 26px;
  background-color: #fff;
  border-radius: 7px;
  border: 1px solid rgba(84, 83, 83, 0.45);
  outline: 0;
  padding: 0px 7px;
}

.btn-service {
  background-color: #fff;
  height: 155px;
  border-bottom: 1px solid #a5a1a1;
  border-left: 1px solid #a5a1a1;
  text-align: center;
}
.btn-service span {
  font-size: 15px;
  text-align: center;
  color: #282d44;
  position: absolute;
  right: 0;
  left: 0;
  top: 90px;
}
.btn-service.hover {
  background-color: rgba(194, 194, 194, 0.09);
}

.fixed-icon {
  position: absolute;
  right: 0;
  left: 0;
  top: 35px;
}

.show-action {
  position: absolute;
  right: 25px;
  top: 12px;
  bottom: 0;
  margin: auto;
}
.show-action label {
  color: #fff;
  top: 4px;
  position: relative;
}

button.show-action {
  background: none;
  border: 0;
  color: #fff;
  top: -3px;
  outline: 0;
}

.filtersbuttons {
  position: relative;
  height: 50px;
}
.filtersbuttons span {
  font-weight: bold;
}

.fixed-filtersbuttons {
  position: absolute;
  right: 35px;
}
.fixed-filtersbuttons p {
  font-size: 15px;
  color: #4a4a4a;
  position: relative;
  left: -35px;
  float: left;
  top: 13px;
  font-weight: bold;
}

.fixed-filtersbuttons-all {
  float: right;
  position: relative;
  top: 14px;
}
.fixed-filtersbuttons-all span {
  color: #4a4a4a;
  font-size: 12px;
}
.fixed-filtersbuttons-all span:first-child {
  margin-right: 15px;
}
.fixed-filtersbuttons-all .line {
  border: 1px solid #4a4a4a;
  left: 0;
  right: 44px;
}
.fixed-filtersbuttons-all .line-noright {
  border: 1px solid #4a4a4a;
}
.fixed-filtersbuttons-all a:hover {
  color: #4a4a4a;
  text-decoration: none;
}

.alerts-submenu .bkg-top-table {
  background-color: #282d44;
  position: relative;
  padding: 5px;
  height: auto;
}

.wrap-datepicker {
  position: absolute;
  right: 44px;
  top: 12px;
}
.wrap-datepicker input {
  width: 130px;
  height: 27px;
  border-radius: 8px;
  background-color: #fff;
  border: solid 1px #fff;
  text-align: center;
}
.wrap-datepicker label {
  color: #fff;
}

.ui-datepicker {
  padding: 0;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
  background-color: white;
  font-family: "Maven Pro";
}
.ui-datepicker .ui-datepicker-title {
  font-family: "Maven Pro";
  font-weight: normal;
}
.ui-datepicker .ui-datepicker-title:before {
  position: absolute;
  display: block;
  content: "";
  bottom: 100%;
  left: 2px;
  width: 10px;
  height: 10px;
  margin-bottom: -5px;
  border-top: 0px solid #fff;
  border-left: 0px solid #fff;
  background: #fff;
  transform: rotate(45deg);
  transition: all 0.4s ease-in-out;
}
.ui-datepicker table {
  font-size: 14px;
  background-color: white;
}
.ui-datepicker th {
  font-family: "Maven Pro";
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: center;
  color: #7f8fa4;
  font-weight: 200;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: block;
  position: relative;
  left: -45%;
  margin-left: -8px;
  top: 18px;
  margin-top: -4px;
}
.ui-datepicker .ui-datepicker-prev span {
  transform: translate3d(0, -50%, 0) rotate(270deg);
}
.ui-datepicker .ui-datepicker-next span {
  transform: translate3d(0, -50%, 0) rotate(88deg);
}
.ui-datepicker a {
  color: #24283e;
  font-size: 14px;
}
.ui-datepicker td span,
.ui-datepicker td a {
  padding: 10px;
  text-align: center;
}

.ui-datepicker-calendar thead {
  font-size: 13px;
  color: #7f8fa4;
}

.ui-widget.ui-widget-content {
  border: 0;
  box-shadow: 5px 5px 25px rgba(8, 8, 8, 0.23);
  padding: 0;
}

.ui-datepicker-header {
  font-family: "Maven Pro";
  font-size: 14px;
  background-color: #fff;
  color: #24283e;
}
.ui-datepicker-header .ui-icon {
  width: auto;
  float: right;
  right: -10px;
  bottom: 10px;
  border-color: transparent;
  border-style: solid;
  border-width: 0 0.4em 0.3em;
  border-bottom-color: #a8aab7;
  background-image: none;
}

.ui-state-default {
  font-family: "Maven Pro";
  border: none;
  background: none;
  font-size: 13px;
}

.ui-widget-content .ui-state-default {
  font-family: "Maven Pro";
  border: none;
  background: none;
}

.ui-widget-header .ui-state-default {
  font-family: "Maven Pro";
  border: none;
  background: none;
}

.ui-button {
  font-family: "Maven Pro";
  border: none;
  background: none;
}

html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
  font-family: "Maven Pro";
  border: none;
  background: none;
}

.ui-state-hover {
  border: none;
  background: none;
}

.ui-widget-content .ui-state-hover {
  border: none;
  background: none;
}

.ui-widget-header .ui-state-hover {
  border: none;
  background: none;
}

.ui-state-focus {
  border: none;
  background: none;
}

.ui-widget-content .ui-state-focus {
  border: none;
  background: none;
}

.ui-state-focus {
  border: none;
  background: none;
}

.ui-widget-header .ui-state-focus {
  border: none;
  background: none;
}

.ui-button:hover,
.ui-button:focus {
  border: none;
  background: none;
}

.ui-state-active {
  border: none;
  background: #4393d0;
  border-radius: 50%;
  font-weight: normal;
  color: #fff;
  padding: 10px;
}

.ui-widget-content .ui-state-active {
  border: none;
  background: #4393d0;
  border-radius: 50%;
  font-weight: normal;
  color: #fff;
}

.ui-widget-header .ui-state-active {
  border: none;
  background: #4393d0;
  border-radius: 50%;
  font-weight: normal;
  color: #fff;
  padding: 10px;
}

a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  border: none;
  background: #4393d0;
  border-radius: 50%;
  font-weight: normal;
  color: #fff;
  padding: 10px;
}

select.ui-datepicker-month {
  background: transparent;
  border: 1px solid #c5bfbf;
  font-family: "Maven Pro";
}

.transaction-details .table thead {
  background-color: #282d44;
}
.transaction-details .table th {
  padding: 4px;
  color: #fff;
  font-size: 14px;
  text-align: left;
  padding-left: 17px;
}
.transaction-details .table tr {
  border-bottom: 0.5px solid #f4f4f4;
}
.transaction-details .table td {
  text-align: left;
  padding: 8px 20px 8px 20px;
  position: relative;
}
.transaction-details .line-date {
  height: 23px;
  background-color: #f4f4f4;
}
.transaction-details .line-date .arrow-simple {
  right: 20px;
  opacity: 0.58;
  border-bottom-color: #525252;
  bottom: 0;
  top: -3px;
}

.receipt {
  display: none;
  padding: 0;
  background-color: #f4f4f4;
}

.important {
  cursor: pointer;
}

.mobile_operationsdetails .btn {
  padding: 2px 21px;
  border-radius: 8px;
}

span.amount {
  position: relative;
  left: 25px;
}

.openDetails {
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}

.pagination-transaction {
  padding-bottom: 0.7rem;
}

.pagination-info {
  padding: 0.65rem 0.75rem;
}

.page-item .page-link {
  color: #525252;
}

.page-link.select {
  background-image: linear-gradient(to top, #485173, #282d44, #24283e);
  color: #00c1f9;
}

.transaction-number select {
  padding: 0.5rem 0.5rem;
  border-radius: 4px;
  background-image: linear-gradient(to top, #485173, #282d44, #24283e);
  border: solid 0.5px #a5a1a1;
  color: #fff;
  width: 70px;
  height: 39px;
}
.transaction-number option {
  color: #282d44;
}
.transaction-number option:hover, .transaction-number option:focus {
  background: #282d44;
}

.table td {
  font-size: 0.875em;
  vertical-align: middle;
  border-top: 1px solid #e7ebee;
  padding: 12px 8px;
}

.custom-textarea {
  width: 80%;
  height: 120px;
  resize: none;
}

.info-profil,
.profile-logs,
.login-password-edit {
  position: relative;
}
.info-profil .box-transaction,
.profile-logs .box-transaction,
.login-password-edit .box-transaction {
  box-shadow: 0px 0px 0px 0px #cccccc;
  margin-bottom: 0;
}
.info-profil .box-transaction:nth-child(1),
.profile-logs .box-transaction:nth-child(1),
.login-password-edit .box-transaction:nth-child(1) {
  margin-top: 0;
  padding-top: 50px;
}
.info-profil #error_msg,
.profile-logs #error_msg,
.login-password-edit #error_msg {
  position: absolute;
  right: 0px;
  left: 0;
  margin: 0 auto;
  top: 115px;
  width: 50%;
  z-index: 1;
}
.info-profil #error_msg p,
.profile-logs #error_msg p,
.login-password-edit #error_msg p {
  margin: 0;
}
.info-profil .form-group.col-sm-4,
.profile-logs .form-group.col-sm-4,
.login-password-edit .form-group.col-sm-4 {
  margin: auto;
  margin-bottom: 1rem;
}

#error_msg {
  position: absolute;
  right: 0px;
  left: 0;
  margin: 0 auto;
  top: 123px;
  width: 50%;
  z-index: 1;
}
#error_msg p {
  margin: 0;
}

.menu-profil {
  -webkit-padding-start: 0px;
  margin-bottom: 0;
}
.menu-profil li {
  padding: 10px 70px 10px 15px;
  display: inline-block;
  cursor: pointer;
  color: #4a4a4a;
}
.menu-profil li.active-bkg {
  border-left: 3px solid #00c1f9;
  background: linear-gradient(to right, rgba(126, 142, 218, 0.2), rgba(126, 142, 218, 0));
}

.profile-logs .box-transaction:nth-child(1) {
  padding-top: 0;
}
.profile-logs .box-transaction .table th {
  font-size: 13px;
}

.login-password-edit .box-transaction {
  min-height: 78vh;
}

.avatar-center {
  text-align: center;
}

.avatar {
  border: 1px solid rgba(189, 189, 189, 0.2196078431);
  background: #fff;
  border-radius: 50%;
  display: inline-block;
  overflow: hidden;
  line-height: 100px;
  background-size: cover;
  -o-object-fit: cover;
  object-fit: cover;
}
.avatar .avatar-customers {
  border: solid 10px #fff;
  width: 150.7px;
  height: 150.5px;
}

.file-avatar-label {
  position: relative;
  left: 56px;
  bottom: 50px;
}

.file-icon-size {
  height: 50px;
  width: 50px;
}

.avatar-center .avatar-customers {
  margin: 0;
  height: auto;
}

.info-profil form {
  padding-bottom: 40px;
}

.input-file {
  display: none;
}

.nav-profil {
  border-bottom: solid 1px #e0e0e0;
}

#login_password_info,
#login_email_info {
  display: none;
}

.faq-box {
  width: 100%;
  min-height: 89vh;
}
.faq-box .col p {
  position: relative;
  left: auto;
  top: auto;
  color: #4a4a4a;
  font-size: 13px;
}

.accordion .panel-title {
  font-size: 16px;
  margin: 0;
}
.accordion .panel-title a {
  display: block;
  position: relative;
  outline: none;
  text-decoration: none;
  color: #4a4a4a;
  padding: 15px;
}
.accordion .panel-title a.accordion-toggle {
  color: #fff;
  background-color: #4393d0;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.24);
}
.accordion .panel-title a.accordion-toggle.collapsed {
  background: #fff;
  color: #4a4a4a;
  box-shadow: 0 0px 1px 0 rgba(0, 0, 0, 0.24);
}
.accordion .panel-title a.accordion-toggle.collapsed:after {
  content: "+";
}
.accordion .panel-title a:after {
  content: "-";
  margin-top: -16px;
  font-size: 2.75em;
  position: absolute;
  right: 10px;
  bottom: 0;
}

.panel-body {
  padding: 15px;
  background-color: rgba(242, 242, 242, 0.45);
}

.box-support {
  margin: 0;
  padding: 25px;
}

.avatar-center-support {
  text-align: center;
  border: 1px solid silver;
  border-radius: 50%;
  padding: 10px;
  display: inline-block;
}
.avatar-center-support .avatar {
  background: #282d44;
  padding: 35px;
  overflow: visible;
  line-height: normal;
}

.avatar-support {
  width: 70px;
  height: 70px;
}

.content-service {
  position: relative;
}
.content-service div:nth-child(1) {
  margin-bottom: 35px;
  margin-top: 35px;
}
.content-service p {
  font-size: 16px;
  margin: auto;
}
.content-service p strong {
  color: #4393d0;
}
.content-service .col-sm-10 {
  margin: auto;
}
.content-service .col-sm-10.sup-contact {
  margin-bottom: 20px;
}

.sup-contact p {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.41;
  text-align: left;
  color: #4a4a4a;
  position: relative;
  top: 0;
  left: 0;
  margin-bottom: 3px;
}
.sup-contact p:nth-child(1) {
  margin-bottom: 12px;
}

.bkg-select {
  background-color: #f4f4f4;
  margin-bottom: 30px;
  padding: 1px;
}
.bkg-select p {
  top: 4px;
}

.pop-up-verification {
  width: 412px;
  background-color: #fff;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.5);
}

.popup-header {
  background-color: #282d44;
  color: #fff;
  padding-bottom: 15px;
}

.dialog, .popupblock, .radius {
  font-family: "Maven Pro", sans-serif;
}
.dialog .act, .popupblock .act, .radius .act {
  background-color: transparent;
  color: #7ed321;
}
.dialog .blo, .popupblock .blo, .radius .blo {
  background-color: transparent;
  color: #dc3545;
}
.dialog .dam, .popupblock .dam, .radius .dam {
  background-color: transparent;
  color: #f2843c;
}
.dialog .los, .popupblock .los, .radius .los {
  background-color: transparent;
  color: #8b572a;
}
.dialog .sto, .popupblock .sto, .radius .sto {
  background-color: transparent;
  color: #fe6f6e;
}
.dialog .cbl, .popupblock .cbl, .radius .cbl {
  background-color: transparent;
  color: #dc3545;
}
.dialog .card-status-repair, .popupblock .card-status-repair, .radius .card-status-repair {
  background-color: transparent;
  color: #fe6f6e;
}

.dialog form {
  width: 85%;
  margin: auto;
  margin-top: 25px;
}
.dialog .bloc-right form {
  width: auto;
}
.dialog .bloc-right .col-sm-7 {
  flex: auto;
  max-width: 100%;
}
.dialog .bloc-right .bkg-title h2 {
  text-align: left;
}
.dialog .bloc-right .error_msg {
  position: relative;
  top: 19px;
}
.dialog .center {
  width: 85%;
  margin: auto;
}
.dialog[type=radio]:checked, .dialog[type=radio]:not(:checked) {
  position: initial;
  left: auto;
}
.dialog .msg-kyc {
  width: 90%;
  margin-bottom: 0;
}
.dialog .msg-kyc p {
  margin: 0;
}

.info-perso {
  text-align: left;
  margin-top: 25px;
}
.info-perso .popupblock {
  text-align: center;
}

.dialog.popupblock {
  text-align: center;
  padding: 0;
  background: #fff;
  padding-bottom: 20px;
}
.dialog.popupblock.radius {
  text-align: center;
  padding: 0;
  padding-bottom: 20px;
  width: 400px;
  background: #fff;
}
.dialog.popupblock .msg-level {
  background: #f4f4f4;
  position: relative;
  top: 6px;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 5px;
  right: auto;
  max-width: auto;
}
.dialog.popupblock .msg-level:after {
  left: 51%;
  top: -7px;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}
.dialog.popupblock .bkg-title span {
  bottom: 4px;
}

.popupblock img {
  margin: 20px 0px 20px;
}
.popupblock .dialog-header {
  padding: 33px 30px 25px;
}
.popupblock .alerts-submenu .bkg-title p {
  text-align: left;
}
.popupblock .alerts-submenu img {
  margin: 0;
}

#form-cardsalerts .alert-option:nth-child(8) {
  border: none;
}

.popupblock.radius {
  background-color: #fff;
  padding: 0px;
  padding-bottom: 20px;
}
.popupblock.radius h2 {
  text-align: center;
}
.popupblock.radius table.transactable th, .popupblock.radius table.transactable td {
  padding: 12px 25px;
}
.popupblock.radius .info-perso h2 {
  text-align: left;
}

.dialog-header {
  background-color: #282d44;
  padding: 15px 30px;
}
.dialog-header h2, .dialog-header p {
  color: #fff;
  font-size: 18px;
}
.dialog-header h3 {
  color: #fff;
  font-size: 12px;
}

.btn-close:after {
  content: "x";
  display: inline-block;
  position: absolute;
  right: 16.5px;
  color: #fff;
  font-size: 30px;
  top: 0;
}

.ui-dialog .ui-dialog-titlebar {
  display: none;
}
.ui-dialog .ui-dialog-content {
  padding: 0;
}

.ui-widget-content {
  border: none;
  background: transparent;
}

.type {
  font-size: 11px;
}

.transacdetails {
  text-align: center;
}

.ui-widget-overlay {
  background: #000;
  opacity: 0.4;
}

.round {
  background: #4393d0;
  color: #fff;
  padding: 7px;
  border-radius: 5px;
  font-weight: bold;
  margin-right: 12px;
  font-size: 22px;
}

.outline {
  border: 1px solid #4393d0;
  border-radius: 7px;
  padding: 0 32px;
  margin-bottom: 20px;
  position: relative;
}
.outline p, .outline span {
  margin: 0;
  font-size: 12px;
}
.outline .icon-size {
  left: 6px;
  bottom: 35px;
}

.noline {
  border: none;
  padding: 0 32px;
  margin-bottom: 20px;
  position: relative;
}
.noline .icon-size {
  left: 8px;
}

.content-info-card {
  padding: 0 36px;
  position: relative;
}
.content-info-card span {
  margin: 0;
  font-size: 12px;
}
.content-info-card .icon-size {
  position: absolute;
  margin: 0;
}

.card-load {
  padding: 20px;
  text-align: left;
}
.card-load p {
  font-size: 12px;
}

.print_text {
  margin-top: 20px;
}

.export-print strong {
  font-size: 14px;
  position: relative;
  top: -2px;
}
.export-print select {
  width: 95px;
  height: 27px;
  border-radius: 8px;
  background-color: #ffffff;
  border: solid 1px rgba(84, 83, 83, 0.3);
}

.export_trx_date {
  display: none;
}
.export_trx_date input {
  width: 120px;
  height: 27px;
  border-radius: 8px;
  background-color: #ffffff;
  border: solid 1px rgba(84, 83, 83, 0.3);
  padding: 5px;
}

.no-border td {
  font-size: 0.875em;
  vertical-align: middle;
  border-top: transparent;
  padding: 5px 0;
}

#form-cancel p span {
  margin-left: 3px;
}
#form-cancel .form-group {
  text-align: left;
}

#form_acards_cardholder {
  text-align: left;
}

#form-logininformationeditpassword, #form-logininformationeditemail {
  width: 71%;
  text-align: left;
}

.export-print label {
  position: relative;
}
.export-print img {
  margin: auto;
  width: auto;
}

input.csv[type=radio] {
  position: absolute;
  opacity: 0;
  left: 5px;
  height: 54px;
  width: 54px;
}

input.xml[type=radio] {
  position: absolute;
  opacity: 0;
  left: 5px;
  height: 54px;
  width: 54px;
}

input.csv, input.xml + img {
  cursor: pointer;
  width: auto;
  margin: auto;
}

input[class=csv]:hover + img,
input[class=csv]:checked + img,
input[class=csv]:focus + img {
  background: #E7E7E7;
  border-radius: 5px;
  width: auto;
}

input[class=xml]:hover + img,
input[class=xml]:checked + img,
input[class=xml]:focus + img {
  background: #E7E7E7;
  border-radius: 5px;
  width: auto;
}

#loading {
  display: none;
}

#formMsg {
  background: #f4f4f4;
  position: relative;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 5px;
  right: auto;
}

#popup_error_msg p {
  margin: 0;
}

/* PAGE CURRENCY CALCULATOR - DEBUT */
.dcc-box {
  width: 100%;
  /*    min-height: 89vh;*/
  position: relative;
}
.dcc-box .col p {
  position: relative;
  left: auto;
  top: auto;
  color: #4a4a4a;
  font-size: 13px;
}

.dcc-content {
  padding: 0px 12px;
  padding-top: 60px;
}

.dcc-trx {
  border: 2px solid #cccccc;
  border-radius: 6px;
}

.dcc-header {
  bottom: -10px;
  padding: 16px;
  text-align: center;
  background-color: #24283e;
  margin-bottom: 25px;
}
.dcc-header h6 {
  font-size: 25px;
  color: white;
  margin-bottom: 5px;
  padding: 0 15px;
}
.dcc-header span {
  font-size: 12px;
  color: white;
  position: relative;
}

.dcc-rate {
  display: inline-block;
  vertical-align: middle;
  float: none;
}

.dcc-btn {
  padding-top: 50px;
  vertical-align: bottom;
}

.dcc-disclaimer {
  background-color: none;
  color: #333333;
  padding: 20px;
}

.dcc-disclaimer-text {
  padding: 20px;
  position: relative;
  text-align: center;
  font-size: 12px;
}
.dcc-disclaimer-text p {
  position: relative;
  left: auto;
  top: auto;
  color: #4a4a4a;
  font-size: 13px;
}

/* PAGE CURRENCY CALCULATOR - FIN */
.l-header {
  height: 50px;
  background-color: #24283e;
  width: 100%;
}
.l-header .title-gestion {
  color: #fff;
  text-align: left;
  margin: 0;
  padding-top: 15px;
  font-size: 0.855rem;
}
.l-header .navbar {
  padding: 0;
}
.l-header .navbar-language {
  position: absolute;
  right: 32px;
  top: -30px;
}
.l-header .navbar-expand .navbar-nav {
  margin-right: 0;
}
.l-header a:hover {
  color: #fff;
}
.l-header .dropdown-item:hover,
.l-header .dropdown-item:focus {
  color: #16181b;
  text-decoration: none;
  background-color: #f8f9fa;
}
.l-header li.hidden-xxs {
  margin-left: 26px;
}
.l-header li.hidden-xxs a {
  font-size: 12px;
}

.dropdown-menu {
  left: 8px;
  min-width: 116px;
}

.top-logo {
  margin: 45px 0;
}

.l-logo {
  width: 25%;
}

.input-group-text {
  border: none;
  background-color: #f4f4f4;
  border-radius: 0;
}

.a-white {
  color: #fff;
  font-size: 12px;
}

.dropdown-toggle::after {
  border-top: 0.4em solid;
  border-right: 0.4em solid transparent;
  border-left: 0.4em solid transparent;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  vertical-align: 0.16em;
}

.dropdown-item {
  padding: 0.25rem 0.5rem;
}

.icon-size {
  width: 20px;
  height: 20px;
}

.dropdown-menu::after {
  content: "";
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  z-index: 10;
  border: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  margin-left: -10px;
  left: 50%;
  border-bottom: 10px solid #fff;
  top: -10px;
}

.flag-icon-size {
  height: 26px;
  width: 30px;
}

#navbarNavDropdown {
  padding-top: 1px;
}

.fixed-langue .navbar-language {
  top: 0px;
}

.a-white {
  color: #fff;
  font-size: 12px;
}

.navbar-collapse.justify-content-end .navbar-language {
  position: relative;
  right: auto;
  top: auto;
}

.fixed-nav {
  position: absolute;
  left: 225px;
  top: 8px;
}

footer {
  text-align: center;
  color: #fff;
  width: 100%;
  max-height: 70px;
}
footer p {
  margin: 0;
  font-size: 10px;
}
footer .center-footer {
  width: 75%;
  margin: 0 auto;
  padding: 5px 15px;
}
footer .bkg-footer {
  background-image: linear-gradient(to top, #485173, #282d44, #24283e);
  width: 100%;
  position: fixed;
  bottom: 0;
  padding: 5px 15px;
  z-index: 1;
}

@font-face {
  font-family: "Maven Pro";
  src: url("../fonts/MavenPro-Regular.ttf"), url("../fonts/MavenPro-Bold.ttf"), url("../fonts/MavenPro-Medium.ttf"), url("../fonts/MavenPro-Black.ttf"), url("../fonts/MavenPro-Black.ttf");
}
html,
body {
  font-family: "Maven Pro", sans-serif;
  height: 100%;
}

body {
  background-color: #f4f4f4;
  font-family: "Maven Pro", sans-serif;
  height: 100%;
}

.container-global {
  background-image: linear-gradient(to top, #485173, #282d44, #24283e);
}
.container-global .container-fluid {
  height: 100vh;
}
.container-global .bloc-left {
  background-position: 100%;
  background: url("../img/cover-big-perso-light.jpg") no-repeat;
  background-size: cover;
  background-position-x: 100%;
  z-index: 1;
  position: relative;
}
.container-global .bloc-tpp {
  text-align: center;
  background: #a5a1a1;
  position: relative;
  height: 100vh;
  overflow: auto;
}
.container-global .bloc-right {
  text-align: center;
  background: #fff;
  position: relative;
  height: 100vh;
  overflow: auto;
}
.container-global .bloc-right .needs-validation {
  margin-bottom: 85px;
}
.container-global .ob-tpp-consent {
  margin-top: 25px;
}
.container-global .ob-tpp-consent table {
  margin: 0 auto;
  text-align: left;
}
.container-global .contentForm .needs-validation {
  margin-bottom: 0;
}
.container-global .info-perso {
  text-align: left;
  margin-top: 25px;
}
.container-global .box-info-perso-left {
  float: left;
}
.container-global .box-info-perso-right {
  float: right;
}
.container-global .row {
  height: 100%;
}
.container-global .js-menu.menu {
  display: none;
}
.container-global .icon-size {
  width: 20px;
  height: 20px;
}
.container-global .row-no-margin {
  margin: 0;
  height: auto;
}
.container-global .content-wrapper {
  background: #f4f4f4;
  padding-bottom: 50px;
  margin-left: 250px;
  min-height: 93vh;
}
.container-global .content-wrapper section {
  width: 100%;
  position: relative;
}

.bkg-title {
  border-left: 3px solid #4393d0;
  background: linear-gradient(to right, rgba(230, 229, 229, 0.17), rgba(230, 229, 229, 0.17));
  padding-left: 25px;
  position: relative;
  margin-bottom: 25px;
  color: #525252;
  height: 50px;
}
.bkg-title h2 {
  font-size: 20px;
}
.bkg-title span {
  font-size: 11px;
  position: relative;
  bottom: 9px;
}

.login-box-footer a,
.create-account a,
.center-footer a {
  color: white;
  font-weight: bold;
}

.contentForm {
  padding: 0 0 77px;
}

.msg-kyc {
  margin: 0 auto;
  width: 58%;
  text-align: center;
  line-height: 1.61;
  color: #4a4a4a;
  margin-bottom: 85px;
  white-space: pre-line;
}

#div_fund .bkg-title h2 {
  font-size: 16px;
}

.bloc-timeout {
  padding-top: 15%;
}

.timeout {
  padding-top: 45px;
}

.avatar-customers {
  border-radius: 50%;
  margin: -15px 15px 0px 45px;
  width: 61px;
  height: 59.9px;
  box-shadow: 0 2px 4px 0 rgba(31, 37, 40, 0.35);
  border: solid 2px #fff;
  float: left;
}

.user-box-left {
  top: 25px;
  position: relative;
  margin-bottom: 15px;
}

.l-side-bar {
  float: left;
  width: 250px;
}

.name-customers {
  color: #fff;
  font-size: 1.35rem;
}

.l-logo-sideBar {
  margin-left: 45px;
  width: 105px;
  margin-bottom: 30px;
}

.user-box-left {
  top: 25px;
  position: relative;
  margin-bottom: 15px;
}

.ul-sideBar {
  padding: 40px 0 0 45px;
  cursor: pointer;
  width: 100%;
  margin-bottom: 46px;
}
.ul-sideBar .item-menu {
  color: #00c1f9;
  text-transform: uppercase;
  width: 100%;
  margin-bottom: 7px;
}
.ul-sideBar .item-menu button {
  width: 40px;
  background: transparent;
  border: none;
  position: absolute;
  outline: none;
  height: 24px;
}
.ul-sideBar .item-menu button .arrow {
  left: -8px;
}
.ul-sideBar .item-menu a {
  color: #fff;
  text-decoration: none;
}
.ul-sideBar span {
  font-size: 14px;
  letter-spacing: 1.2px;
  color: #00c1f9;
  font-weight: bold;
}

.content-option.col {
  left: 14px;
  position: relative;
  top: 10px;
}

.sub-menu {
  text-transform: none;
  font-size: 0.75em;
  position: relative;
  padding: 0;
  margin-top: 10px;
}
.sub-menu li {
  padding-left: 30px;
  border-left: 3px solid rgba(255, 255, 255, 0);
  position: relative;
}
.sub-menu li a {
  padding: 7px;
  display: block;
  color: #fff;
}
.sub-menu li span {
  top: 12px;
  left: 23px;
}
.sub-menu li.active-bkg {
  border-left: 3px solid #00c1f9;
  background: linear-gradient(to right, rgba(126, 142, 218, 0.2), rgba(126, 142, 218, 0));
}

@media (min-width: 0px) and (max-width: 767px) {
  .l-header {
    background: no-repeat center 70%/30% auto url(../img/logo-menu.svg), center 80%/cover no-repeat url(../img/cover-big-perso-light.jpg);
    height: 25vh;
  }
  .l-header .title-gestion {
    background: #24283e;
    padding: 16px;
    font-weight: 700;
  }
  .l-header .navbar-language {
    top: -48px;
  }
  .l-header .container-fluid {
    padding-right: 0px;
    padding-left: 0px;
  }

  .container-global .content-wrapper {
    margin-left: auto;
  }

  .user-box-left {
    position: relative;
    margin-bottom: 15px;
    background: url(../img/samples/avatar.jpg) center/cover no-repeat;
    height: 100px;
    top: 0;
  }

  .avatar .avatar-customers {
    display: none;
  }

  .js-menu.menu {
    display: block;
    width: 44px;
    height: 44px;
    outline: 0;
    position: relative;
    top: 1px;
  }

  .menu {
    transition: 0.1s transform linear;
    position: absolute;
    background: 0;
    float: left;
    top: 22px;
    left: 15px;
    width: 44px;
    z-index: 2;
    outline: 0;
    padding: 0;
    border: 0;
  }

  .bar, .bar::before, .bar::after {
    transition: 0.2s background linear 0.1s, 0.2s top linear 0.2s, 0.2s transform linear;
    position: absolute;
    background: #fff;
    margin: auto;
    width: 100%;
    height: 3px;
    content: "";
    top: 50%;
    left: 0;
  }

  .bar {
    margin-top: -0.2rem;
  }

  .bar::before {
    top: -9px;
  }

  .bar::after {
    top: 9px;
  }

  .bar::before, .bar::after {
    transform: rotate(0deg);
  }

  .active .bar {
    background: 0;
    transition: 0.2s background linear 0.1s, 0.2s top linear, 0.2s transform linear 0.2s;
    left: 97px;
    width: 78%;
  }
  .active .bar::before {
    transform: rotate(45deg);
  }
  .active .bar::after {
    transform: rotate(-45deg);
  }
  .active .bar::before, .active .bar::after {
    top: 0;
    transition: 0.2s background linear 0.1s, 0.2s top linear, 0.2s transform linear 0.2s;
    left: 97px;
    width: 78%;
  }

  .nav-menu {
    width: 200px;
    height: 100%;
    background-image: linear-gradient(to top, #485173, #282d44, #24283e);
    position: fixed;
    transform: translateX(-550px);
    transition: transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
    z-index: 1;
    top: 0;
  }

  .menu-open nav.nav-menu {
    transform: translateX(0);
  }

  button:focus {
    outline: none;
  }

  .item-menu {
    width: 100%;
    margin-bottom: 7px;
    padding-right: 10px;
  }

  .ul-sideBar {
    padding-left: 19px;
    font-size: 2em;
  }

  .ul-sideBar a {
    color: #fff;
  }

  .sub-menu {
    font-size: 15px;
  }

  .ul-sideBar {
    padding: 24px 0 0 23px;
  }

  .top-logo {
    margin: 30px 0;
  }

  .container-global .bloc-left {
    display: none;
  }
  .container-global .bloc-tpp {
    width: 100%;
  }
  .container-global .bloc-tpp .needs-validation {
    margin-bottom: 137px;
  }
  .container-global .bloc-tpp #form-login {
    margin-bottom: 0px;
  }
  .container-global .bloc-right {
    width: 100%;
  }
  .container-global .bloc-right .needs-validation {
    margin-bottom: 137px;
  }
  .container-global .bloc-right #form-login {
    margin-bottom: 0px;
  }

  footer .bkg-footer {
    padding: 0;
  }
  footer .center-footer {
    width: auto;
    padding: 5px;
  }

  .contentForm {
    padding: 0px 0 139px;
  }

  .msg-level {
    position: relative;
    top: 8px;
    right: 0;
  }

  .msg-level:after {
    margin-left: 0px;
    top: -8px;
    transform: rotate(183deg);
    -webkit-transform: rotate(183deg);
  }

  .content-wrapper {
    margin-left: 0px;
  }

  #logo {
    display: none;
  }

  .fixed-nav {
    top: 2px;
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1300px) {
  #content-step-h {
    display: none;
  }

  .container-global .bloc-left {
    width: 30%;
  }

  .container-global .bloc-tpp {
    width: 30%;
  }

  .container-global .bloc-right {
    width: 70%;
  }
}
@media (min-width: 1300px) {
  #content-step-v {
    display: none;
  }

  #form-personalinformation {
    width: 1280px;
  }

  .container-global .bloc-tpp {
    width: 50%;
  }

  .container-global .bloc-left {
    width: 50%;
  }

  .container-global .bloc-right {
    width: 50%;
  }
}
.profile_content .info-profil .box-transaction {
  display: flex;
  min-height: 78vh;
}

@media (min-width: 1400px) {
  .icon-category {
    top: 6px;
  }

  .customSelect {
    width: 187px;
  }
}