.cpn-hide,
.cpn-hidden,
.hide {
  display: none !important;
}

.cpn-pd-5 {
  padding: 5px;
}

.cpn-pd-10 {
  padding: 10px;
}

.cpn-mb-5 {
  margin-bottom: 5px;
}

.cpn-mb-10 {
  margin-bottom: 10px;
}

/*
-----------------------
* cpn-btn
-----------------------
*/
.cpn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1rem;
  transition: all .25s linear;
  cursor: pointer;
}

.cpn-btn:disabled {
  background-color: #b3bdf5 !important;
  border-color: #c2c2c2 !important;
  color: #e1e1e1 !important;
  cursor: not-allowed !important;
}

.cpn-btn--login {
  width: 148px;
  height: 40px;
  border-radius: 4px;
  background-color: #07f;
  color: #fff;
  margin: 0 6px 12px;
}

.cpn-btn--login:hover {
  background-color: #1c67d1;
}

.cpn-btn--login-big {
  width: 100%;
  min-height: 100%;
}

.cpn-btn--primary {
  text-decoration: none;
  color: #fff;
  background-color: #07f;
  padding: 5px 10px;
}

.cpn-btn--danger,
.cpn-btn--danger.cpn-btn ,
.cpn-form .cpn-btn.cpn-btn--danger {
  color: #fff;
  background-color: #ff3a3a;
  border-color: #ff3a3a;
}

.cpn-btn--danger:hover,
.cpn-btn--danger.cpn-btn :hover,
.cpn-form .cpn-btn.cpn-btn--danger:hover {
  color: #fff;
  background-color: #a82727;
  border-color: #a82727;
}


/*
-----------------------
* cpn-Form
-----------------------
*/
.cpn-form {
  width: 100%;
}

.cpn-form__row {
  margin-bottom: 12px;
}
.cpn-form__row.cpn-form__row--vertical-align {
  display: flex;
  align-items: center;
}

.cpn-form__wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  z-index: 10;
}

.cpn-form__footer {
  display: flex;
  flex-wrap: wrap;
}

.cpn-form__label {
  font-size: 0.8rem;
  line-height: 0.9rem;
  font-family: "Inter-Medium", sans-serif;
  font-weight: 500;
  color: #4d5e72;
  margin-bottom: 4px;
  /* display: block; */
  display: flex;
  align-items: center;
  width: 100%;
}

.cpn-form__label--center {
  justify-content: center;
}

.cpn-form__label-required {
  font-size: 1rem;
  color: #ff3a3a;
}

.cpn-form__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cpn-form .cpn-btn {
  margin: 6px 5px;
  border: solid 1px #ddd;
  color: #928d8d;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  min-width: 140px;
}

.cpn-form .cpn-btn:hover {
  background-color:  #ddd;
  color: #454545;
}

.cpn-form .cpn-btn[name*="send"],
.cpn-form .cpn-btn[name*="save"],
.cpn-form .cpn-btn[name*="update"],
.cpn-form .cpn-btn[name*="edit"],
.cpn-form .cpn-btn[name*="submit"],
.cpn-form .cpn-btn[data-action*="next"],
.cpn-form .cpn-btn[data-action*="prev"],
.cpn-form .cpn-btn[data-action*="send"],
.cpn-form .cpn-btn[data-action*="save"],
.cpn-form .cpn-btn[data-action*="update"],
.cpn-form .cpn-btn[data-action*="edit"],
.cpn-form .cpn-btn[data-action*="submit"],
.cpn-form .cpn-btn.cpn-btn--submit {
  background-color: #008000;
  border-color: #008000;
  color: #fff;
}


.cpn-form .cpn-btn[name*="send"]:hover,
.cpn-form .cpn-btn[name*="save"]:hover,
.cpn-form .cpn-btn[name*="update"]:hover,
.cpn-form .cpn-btn[name*="edit"]:hover,
.cpn-form .cpn-btn[name*="submit"]:hover,
.cpn-form .cpn-btn[data-action*="send"]:hover,
.cpn-form .cpn-btn[data-action*="save"]:hover,
.cpn-form .cpn-btn[data-action*="update"]:hover,
.cpn-form .cpn-btn[data-action*="edit"]:hover,
.cpn-form .cpn-btn[data-action*="submit"]:hover,
.cpn-form .cpn-btn.cpn-btn--submit:hover {
  background-color: #075c07;
  border-color: #075c07;
  
}


.cpn-form-section {
  transform: translateX(-100%);
  transition: translateX .3s linear;
  height: 0;
  overflow: hidden;
}

.cpn-form-section.active {
  transform: translateX(0);
  height: fit-content;
}


/*
-------------------------
| cpn-field
-------------------------
*/
input,
select,
textarea,
.cpn-field {
  display: block;
  width: 100%;
  height: 36px;
  border: solid 1px #90adcf;
  border-radius: 5px;
  padding: 6px 12px;
  text-align: left;
  border-radius: 4px;
}

.cpn-field-wrap {
  position: relative;
}

.cpn-field-wrap>i[class^="icon-"] {
  position: absolute;
  left: 8px;
  top: calc(50% - 8px);
  z-index: 10;
}

.cpn-field-wrap>i[class^="icon-"] + .cpn-field {
  padding-left: 30px;
}

.cpn-field ::placeholder {
  /*display: inline-block !important;*/
  font-size: 0.75rem;
  color: #90adcf;
}

.cpn-field .cpn-field--error {
  border-color: #E6402E;
}

.cpn-field .cpn-field--warning {
  border-color: #FAB650;
}

.cpn-field .cpn-field--success {
  border-color: #14C773;
}

.cpn-field--disabled {
  pointer-events:none!important;
  background-color:#74727229!important;
  color: #d8d8d8!important;
  cursor: not-allowed;
}

textarea,
textarea.cpn-field {
  height: 78px;
  resize: none;
}


input[type="file"].cpn-field {
  width: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
  z-index: -5;
  visibility: hidden;
}

input[type="file"].cpn-field + label {
  display: block;
  border: solid 1px #90adcf;
  border-radius: 4px;
  min-height: 100px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

input[type="file"].cpn-field + label::before {
  content: "Clicker pour choisir une image";
  position: absolute;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 30px;
  left: 0;
  top: calc(50% - 15px);
  transition: all .3s linear;
}

input[type="file"].cpn-field + label:hover::before {
  transform: scale(0.8);
}

input[type="checkbox"],
input[type="radio"]  {
  width: 0;
  height: 0 !important;
  margin: 0;
  visibility: hidden;
  z-index: -5;
}
input[type="checkbox"] + label,
input[type="radio"] + label {
  padding-left: 25px;
  position: relative;
  cursor: pointer;
  min-height: 20px;
}

input[type="checkbox"][data-postion="top"] + label,
input[type="radio"][data-postion="top"] + label {
  padding-left: 0;
  min-height: 20px;
  text-align: center;
  display: block;
  padding-top: 30px;
}

input[type="checkbox"] + label::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 6px;
  border: solid 2px  #575757;
  left: 0;
  top: 0; /*-2px*/
}
input[type="checkbox"] + label.cpn-form__label--center::before {
  top: 5px;
}

input[type="checkbox"][data-postion="top"] + label::before,
input[type="radio"][data-postion="top"] + label::before  {
  left: calc(50% - 8px);
  top: 5px;
}


input[type="checkbox"] + label::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 8px;
  border: solid 2px  transparent;
  border-top: none;
  border-left: none;
  left: 7px;
  top: 3px;
  transition: all .2s linear;
}
input[type="checkbox"] + label.cpn-form__label--center::after {
  top: 8px;
}

input[type="checkbox"]:checked + label::before {
  background-color: #086afc;
  border-color: #086afc;
}

input[type="checkbox"]:checked + label::after {
  border-color: #fff;
  transform: rotate(45deg);
}

input[type="checkbox"][data-postion="top"] + label::after,
input[type="radio"][data-postion="top"] + label::after  {
  left: calc(50% - 4px);
  top: 9px;
} 

input[type="checkbox"] + label.field--right {
  padding-left: 0;
  padding-right: 35px;
}

input[type="checkbox"] + label.field--right::before {
  left: initial;
  right: 0;
}

input[type="checkbox"] + label.field--right::after  {
  left: initial;
  right: 6px;
}

input[type="radio"] + label::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: solid 2px  #086afc;
  left: 0;
  /* top: -2px; */
  top: calc(50% - 8px);
}

input[type="radio"] + label::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color:  transparent;
  left: 4px;
  /* top: 2px; */
  top: calc(50% - 4px);
}

input[type="radio"]:checked + label::after {
  background-color:  #086afc;
}

input[type="password"] {
  padding-right: 40px;
}

input[type="number"].cpn-field--without-change::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="checkbox"].cpn-field--disabled + label,
input[type="radio"].cpn-field--disabled + label {
  pointer-events:none!important;
  background-color:#74727229!important;
  color: #d8d8d8!important;
  cursor: not-allowed;
}

input[type="checkbox"].cpn-field--disabled + label::before,
input[type="radio"].cpn-field--disabled + label::before {
  background-color: #d8d8d8!important;
  border-color: #d8d8d8!important;
}

.cpn-check-group {
  width: 180px;
  padding: 10px;
  margin: 5px auto;
  box-shadow: 0 0 2px 2px #dddd;
  border-radius: 4px;
}
.cpn-x{display: flex;justify-content: space-between;flex-wrap:wrap;}
.cpn-x--center {align-items: center;}
.cpn-x__row {margin-bottom: 15px;}
.cpn-x.cpn-x--align-vert-center {align-items: center;}
.cpn-x__1{width: 100%;}
.cpn-x__2{width: calc(50% - 7.5px);}
.cpn-x__3-4{width: calc(67% - 7.5px);  }
.cpn-x__3{width: calc(33.333% - 7.5px);}
.cpn-x__4{width: calc(25% - 7.5px);  }
.cpn-x__--center{margin:auto;}
@media(max-width: 600px) {
  .cpn-x {flex-direction: column;}
  [class*="cpn-x__"] {width: 100%;}
}



/*
-------------------------
| cpn-user-menu
-------------------------
*/
.cpn-user-menu__head {
  padding: 8px 0;
  text-align: center;
  border-bottom: solid 1px #ddd;
}

.cpn-user-menu__footer {
  padding: 8px 0px 8px 0px;
  text-align: center;
  border-top: solid 1px #ddd;
}

.cpn-user-menu__logout {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f21a1a;
  color: #fff;
  border-radius: 5px;
  padding: 6px 0;
}

.cpn-user-menu__logout>i {
  background-color: #fff;
}

.cpn-user-menu__logout-text {
  padding-left: 10px;
}

/*
-------------------------
| cpn-scroll
-------------------------
*/
.cpn-scroll::-webkit-scrollbar {width: 4px;height: 4px;}
.cpn-scroll::-webkit-scrollbar-thumb {width: 30%;height: 4px;background-color: #A8AAB1 !important;outline: none;border-radius: 6px;}
.cpn-scroll::-webkit-scrollbar-track {background-color: transparent;}
.cpn-scroll::-webkit-scrollbar-track-piece {width: 4px;background-color: #c6cada !important;border-radius: 5px;box-shadow: none;border: none;}


/*
-------------------------
| cpn-tabs
-------------------------
*/
.ui-modal__body .cpn-tas {
  display: flex;
  min-height: 150px;
}

.ui-modal__body .cpn-tas__nav {
  min-width: 135px;
  min-height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #050505;
}

.cpn-tas__nav-item-btn {
  display: flex;
  align-items: center;
  width: 100%;
  height: 36px;
  padding: 8px 5px;
  border-bottom: solid 1px #707070;
  font-size: 0.8rem;
  color: #fff;
}

.cpn-tas__nav-item-btn.selected {
  background-color: #8e152f;
}

.ui-modal__body .cpn-tas__body {
  width: 100%;
  min-height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  border: solid 2px #050505;
  border-left: none;
  padding: 8px;
}

.cpn-tabs{
  padding: 10px;
  margin: 20px 0px 40px 0px;
}
.cpn-tabs__nav {
  display: flex;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid #71748030;
  gap: 10px;
}
.cpn-tabs__nav-item{
  width: 30%;
}
.cpn-tabs__nav-item-btn{
  background-color: #ccc8c862;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: solid 1px transparent;
  font-family: "Exo-Bold", sans-serif;
  color: #363740;
  border-radius: 8px 8px 0 0;
}

.cpn-tabs__nav-item-btn.selected{
  border-bottom-color: transparent;
  border-top-color: #71748030;
  border-left-color: #71748030;
  border-right-color: #71748030;
  background-color: #ffe4c4 !important;
}

.cpn-tabs__body{
  min-height: 100px;
  border: solid 1px #71748030;
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 8px;
}

/*
*----------------------------------
* => cpn-pg-actions
*----------------------------------
*/
.cpn-pg-actions {
  display: flex;
  width: 100%;
  padding: 0 15px !important;
}

.cpn-pg-actions__list {
  display: flex;
}

.cpn-pg-actions__list-item {
  margin-left: 6px;
}

.cpn-pg-actions__list-item:first-child {
  margin-left: 0;
}

.cpn-pg-actions__list-item-btn {
  display: flex;
  align-items: center;
  padding: 10px 18px;
  border: none;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  min-width: 105px;
  min-height: 44px;
  background-color: #fff;
  box-shadow: 0 2px 2px 0 #00000024, 0 3px 1px -2px rgb(0 0 0 / 0%), 0 1px 5px 0 #00000033;
  transition: all .3s linear;
}

.cpn-pg-actions__list-item-btn:hover {
  background-color: #50525d;
  color: #fff;
}

.cpn-pg-actions__list-item-btn:hover>[class*="icon-"] {
  background-color: #fff;
}

.cpn-tbl-item{
  overflow: hidden;
  padding: 5px;
}
.cpn-tbl-item__inner{
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  min-width: 260px;
}
.cpn-tbl-item__img {
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0px 0px 3px 0px #302c2c2b;
}
.cpn-tbl-item__img--round {
  border-radius: 50%;
}
.cpn-tbl-item--small .cpn-tbl-item__img{
  width: 40px;
  height: 40px;
  line-height: 40px;
  display: flex;
  align-items: center;
}
.cpn-tbl-item__infos {
  width: calc(100% - 80px);
  padding: 5px;
}
.cpn-tbl-item__infos-row {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}
.cpn-tbl-item__infos-row--name {
  font-family: "Exo-Semi-Bold", sans-serif;
  font-size: 0.83rem;
  color: #4b4343;
  margin-bottom: 2px;
}
.cpn-tbl-item--small .cpn-tbl-item__infos-row {
  width: calc(100% - 40px);
}
.cpn-tbl-item__infos-row>.label {
  font-size: 0.7rem;
  line-height: 10px;
  font-family: "Exo-Semi-Bold", sans-serif;
  color: #6e6e6e;
  border-bottom: solid 1px #6e6e6e;
  margin-right: 4px;
}
.cpn-tbl-item__infos-row>.text {
  font-size: 0.7rem;
  display: flex;
  align-items: center;
}
.cpn-btn-show-list{
  display: flex;
  justify-content: center;
  padding: 3px 6px;
  border-radius: 12px;
  border: solid 1px #ddd;
}
.cpn-btn-show-list:hover{
  border-color: #f1902c;
}
.cpn-btn-show-list-text{
  font-size: 12px;
  line-height: 12px;
  color: #a6a6a6;
  display: inline-block;
  margin-right: 6px;
}
.cpn-btn-show-list>i{
  min-width: 14px;
  min-height: 14px;
  background-color: #4127d4;
  -webkit-mask-size: 16px 16px;
}


.cpn-app-table {
  width: 100%;
}
.cpn-app-table thead {
  height: 35px;
  background: #c5c8cc4f;
  font-family: "Exo-Bold", sans-serif;
  font-size: 0.8rem;
  color: #055a5a;
}
.cpn-app-table td {
  padding: 8px;
}
.cpn-app-table tbody tr td {
  border: solid 1px #ddd;
}

.ui-modal--default .cpn-app-table {
  max-width: calc(100% - 1px);
}

.cpn-table__actions-btns{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.cpn-btn-switch {
  display: inline-block;
  width: 35px;
  position: relative;
  background: none;
  box-shadow: none;
  border: none;
}
.cpn-btn-switch::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 15px;
  background-color: #ff0000;
  border-radius: 20px;
  top: calc(50% - 7.5px);
  left: 0;
  transition: all .3s ease;
}
.cpn-btn-switch.active::before {
  background-color: #17b908;
}
.cpn-btn-switch::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  background-color: #ffffff;
  border-radius: 50%;
  top: calc(50% - 5.5px);
  left: 2px;
  transition: all .3s ease;
}
.cpn-btn-switch.active::after {
  left: calc(100% - 13px);
}

.cpn-pg-menu{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 25px;
  padding: 5px 15px;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0px 3px 1px -2px #6a60602e;
  width: 100%;
}
.cpn-pg-menu__item{
  margin-bottom: 5px;
}
.cpn-pg-menu__item-link {
  display: inline-block;
  padding: 5px 12px;
  color: #91959a;
  transition: all .5s linear;
}
.cpn-pg-menu__item-link:hover {
  color: #ffc107;
}
.cpn-pg-menu__item-link.active {
  color: #5bacb9;
}
.cpn-pg-menu__item-link.active::before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 3px;
  background-color: #000;
  left: 0;
  bottom: -10px;
}
.cpn-pg-menu__item-link.active::after {
  content: "";
  position: absolute;
  display: inline-block;
  border-bottom: solid 5px #000;
  border-left: solid 5px transparent;
  border-right: solid 5px transparent;
  left: calc(50% - 2.5px);
  bottom: -7px;
}

.cpn-pg-menu__item a.cpn-pg-menu__item-link {
  display: flex;
  align-items: center;
}

.cpn-pg-menu__item .alert-box{
  height: 25px;
  width: 25px;
  background-color: red;
  color:#fff;
  display: block;
  border-radius: 50%;
  text-align: center;
  font-size: 10px;
  line-height: 25px;
  margin-left:5px;
  animation: alert-transfert 2.5s infinite;
}

@keyframes alert-transfert {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.cpn-empty-action {
  display: flex;
  width: 25px;
  height: 26px;
}

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

.z-index-50 {
  z-index: 50;
}

.z-index-100 {
  z-index: 100;
}

.z-index-200 {
  z-index: 200;
}


/*
*----------------------------------
* => cpn-profil-card
*----------------------------------
*/

.cpn-profil-card {
  display: flex;
  padding: 5px;
}

.cpn-profil-card__side {
  width: 200px;
}

.cpn-profil-card__side-inner {
  background-color: #f4f4f4;
  padding: 10px;
  margin-bottom: 10px;
}

.cpn-profil-card__img {
  width: 180px;
  max-width: 100%;
  height: 180px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
}
.cpn-profil-card__status {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cpn-profil-card__infos {
  width: calc(100% - 200px);
  max-width: 767px;
  padding-left: 10px;
}

.cpn-profil-card__infos-fullName {
  font-size: 1.2rem;
  font-family: "Exo-Semi-Bold", sans-serif;
  color: #1b235a;
  margin-bottom: 10px;
  padding: 5px 10px;
}

.cpn-profil-card__infos-row {
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 5px 10px;
}

.cpn-profil-card__infos-row:nth-child(even) {
  background-color: #f9f9f9;
}

.cpn-profil-card__infos-row-label {
  font-size: 0.8rem;
  font-family: "Exo-Regular", sans-serif;
  color: #898989;
  margin-right: 8px;
  white-space: nowrap;
  width: 30%;
}

.cpn-profil-card__infos-row-value {
  font-family: "Exo-Semi-Bold", sans-serif;
  font-size: 0.85rem;
  line-height: 0.75rem;
  color: #2d2d2d;
}

.w-100 {
  width: 100% !important;
}
.w-100px {
  width: 100px;
}

.w-50 {
  width: 50%;
}

.w-30 {
  width: 30%;
}

.w-25 {
  width: 25%;
}

.w-20 {
  width: 20%;
}

.w-10 {
  width: 10%;
}

@media(max-width:960px) {
  .w-50,
  .w-25,
  .w-30 {
    width: 50%;
  }

  .w-20,
  .w-10 {
    width: 30%;
  }
}

@media(max-width:640px) {
  .w-50,
  .w-25,
  .w-30 {
    width: 50%;
  }
}

@media(max-width:500px) {
  .w-50,
  .w-25,
  .w-30 {
    width: 100%;
  }

  .w-20,
  .w-10 {
    width: 50%;
  }
}

/*
*----------------------------------
* => cpn-card
*----------------------------------
*/
.cpn-card {
  scroll-margin-top: calc(var(--MuiDocs-header-height) + 32px);
  background-color: #fff;
  color: #000000de;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
  overflow: hidden;
  min-width: 100px;
  min-height: 100px;
}

.cpn-card__inner {
  padding: 8px;
}

.cpn-card__title {
  font-size: 1.2rem;
  line-height: 2rem;
  color: #8b8b8b;
  text-align: center;
}

/*
*----------------------------------
* => selected-section-dl
*----------------------------------
*/
.selected-section-dl dt {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  border: solid 1px #bcbcbc;
  padding: 8px 50px 8px 8px;
  cursor: pointer;
  font-family: "Exo-Bold", sans-serif;
  font-size: 0.7rem;
  color: #706f6f;
}

.selected-section-dl .cpn-accordion__item-label--active {
  background-color: #fff;
}

.selected-section-dl dt::before{
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: #bcbcbc;
  -webkit-mask-image: url(../../images/svg/icon-arrow-bottom.svg);
  -webkit-mask-size: 16px 16px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  right: 8px;
  top: calc(50% - 8px);
  transition: transform .3s linear;
}

[data-accordion] dd {
  padding: 0;
  background-color: #f8f8f8;
  max-height: 0;
  transition: max-height .3s linear;
  margin: 0;
  overflow: auto;
}

.selected-section-dl dt+dd {
  margin-bottom: 5px;
}

[data-accordion] dt[class*="--active"] + dd {
  max-height: 900px;
  padding: 8px;
  border: solid 1px #ff9800;
  margin-bottom: 20px;
}

.inner-list > li {
  display: flex;
  align-items: center;
  width: 100%;
  height: 30px;
  border-bottom: solid 1px #a2b5b7;
  flex: 1;

}

.cpn-checkbox-box {
  padding: 10px;
  border: solid 1px #ddd;
  border-radius: 6px;
  max-width: 300px;
  margin: 0 auto 15px;
}




.cpn-account-details__header {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}

.cpn-account-details__header-left {
  display: flex;
  flex-direction: column;
  height: 120px;
}

.cpn-account-details__ref {
  font-size: .8rem;
  color: #FF9800;
}

.cpn-account-details__number {
  color: #898989;
  font-family: "Exo-Semi-Bold", sans-serif;
}


.cpn-account-details__balance {
  font-size: 2rem;
  color: #847070;
  font-family: "Exo-Semi-Bold", sans-serif;
  margin-top: auto;
  margin-bottom: 20px;
}

.cpn-account-details__header-right {
  display: flex;
  flex-direction: column;
  height: 120px;
}

.cpn-account-details__header-status {
  font-size: .7rem;
  display: flex;
  align-items: center;
  gap: 5px;
}

.cpn-account-details__history{

}