ui-beyable 1.0.7 → 1.0.9

package/lib/cjs/index.css

@@ -1,2 +1,1448 @@
-.modal-module_outer__OgWPN{align-items:center;animation:modal-module_outer__OgWPN .1s ease-out;background:rgba(0,0,0,.4);bottom:0;display:flex;justify-content:center;left:0;outline:none;padding:10px;position:fixed;right:0;top:0;z-index:10200}.modal-module_outer_fullscreen__7Vzr-{padding:20px}.modal-module_inner__xBtSe{background:#fff;border-radius:6px;box-shadow:0 0 20px rgba(0,0,0,.1);display:flex;flex-direction:column;max-height:100%;max-width:100%;position:relative;transition:all .2s;width:500px}.modal-module_toto__tDx6M{color:pink}.modal-module_outer_animation_slide_down__reDF3{color:red}.modal-module_outer_animation_slide_down__reDF3 .modal-module_inner__xBtSe{animation:modal-module_inner_slide_down__Fbh31 .2s ease-out}.collapse-module_header__3XouW{align-items:center;display:flex}.collapse-module_header_btn__WqgSX{border-radius:5px;cursor:pointer;flex:0 0 auto;font-size:16px;font-weight:500;padding:6px 10px 6px 24px;position:relative;transition:all .2s}.collapse-module_header_btn__WqgSX:focus,.collapse-module_header_btn__WqgSX:hover{background-color:var(--main-border-color)}.collapse-module_header__3XouW:after{border-top:1px solid var(--main-border-color);content:"";flex:1 1 auto;margin-left:4px}.collapse-module_arrow__m09w4{height:14px;left:0;margin-top:-7px;position:absolute;top:50%;transition:all .1s;width:20px}.collapse-module_arrow__m09w4 .collapse-module_fas__KttZB{display:block}.collapse-module_wrapper_open__-Pauk .collapse-module_arrow__m09w4{transform:rotate(180deg)}.collapse-module_body__n-AEV{margin-bottom:16px;margin-top:8px;transition:all .2s}.collapse-module_wrapper_close__pPihr .collapse-module_body__n-AEV{height:0;margin-top:0;overflow:hidden}
-/*# sourceMappingURL=index.css.map */
+/* Header */
+.header {
+  padding: 0 22px;
+  height: 54px;
+  border-bottom: solid 1px var(--main-border-color);
+  background: var(--white);
+  display: flex;
+  align-items: center;
+}
+
+.header_col_logo {
+  flex: 0 0 auto;
+  margin-right: 30px;
+}
+
+.header_col_left {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+}
+
+.header_col_right {
+  flex: 0 0 auto;
+  margin-left: 30px;
+  display: flex;
+  align-items: center;
+}
+
+/* Link */
+.link_common {
+  flex: 0 0 auto;
+  font-size: 15px;
+  font-family: "Roboto", Arial, sans-serif;
+  font-weight: 500;
+}
+
+.link_common a {
+  position: relative;
+  display: block;
+  padding: 0 12px;
+  height: 54px;
+  line-height: 54px;
+  text-decoration: none;
+  transition: color 200ms;
+}
+
+.link_common a::after {
+  content: "";
+  position: absolute;
+  bottom: -1px;
+  left: 10px;
+  right: 10px;
+  height: 3px;
+  border-radius: 3px 3px 0 0;
+  transition: background 200ms;
+}
+
+.link,
+.link_active {
+  composes: link_common;
+}
+
+.link a {
+  color: var(--grey-1);
+}
+
+.link a:hover,
+.link a:focus {
+  color: var(--grey-0);
+}
+
+.link a:hover::after,
+.link a:focus::after {
+  background-color: var(--grey-7);
+}
+
+.link_active a,
+.link_active a:hover,
+.link_active a:focus {
+  color: var(--turquoise);
+}
+
+.link_active a::after {
+  background-color: currentColor;
+}
+
+/* Logo */
+.logo {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 42px;
+}
+
+.logo_img {
+  flex: 0 0 auto;
+  margin-right: 12px;
+}
+
+.logo_img_svg {
+  display: block;
+}
+
+.logo_name {
+  color: var(--turquoise);
+  font-family: "IBM Plex Sans", sans-serif;
+  font-size: 21px;
+  font-weight: 700;
+  text-transform: uppercase;
+  user-select: none;
+}
+
+.logo_overlay_link,
+.logo_overlay_link a {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.logo_overlay_link a {
+  font-size: 1px;
+  text-indent: -1000px;
+  color: transparent;
+}
+
+.outer {
+  position: fixed;
+  z-index: 10200;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 10px;
+  outline: none;
+  background: rgba(0, 0, 0, 0.4);
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: -webkit-box;
+  display: -moz-box;
+  display: flex;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  align-items: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  -webkit-box-pack: center;
+  -moz-box-pack: center;
+  justify-content: center;
+  animation: outer 100ms ease-out;
+}
+
+.outer_fullscreen {
+  padding: 20px;
+}
+
+/* @keyframes outer {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+} */
+.inner {
+  position: relative;
+  background: #fff;
+  width: 500px;
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 6px;
+  box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: -webkit-box;
+  display: -moz-box;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -moz-box-orient: vertical;
+  -moz-box-direction: normal;
+  flex-direction: column;
+  transition: all 200ms;
+}
+
+.toto {
+  color: pink;
+}
+
+.outer_animation_slide_down {
+  color: red;
+}
+
+.outer_animation_slide_down .inner {
+  animation: inner_slide_down 200ms ease-out;
+}
+
+/* @keyframes inner_slide_down {
+	0% {
+		transform: translateY(-80px);
+	}
+	100% {
+		transform: translateY(0);
+	}
+} */
+:root {
+  --btn-color-primary: var(--turquoise);
+  --btn-color-secondary: var(--grey-1);
+  --btn-color-alert: #F04F5B;
+  --btn-color-warning: #F7A100;
+  --btn-color-success: #43B55E;
+  --btn-color-primary-hover: #0068EF;
+  --btn-color-secondary-hover: #575A68;
+  --btn-color-alert-hover: #E14A55;
+  --btn-color-warning-hover: #E89700;
+  --btn-color-success-hover: #3FAA58;
+  --btn-color-primary-light: var(--turquoise-light);
+  --btn-color-secondary-light: #E9EAF0;
+  --btn-color-alert-light: #FDE2E4;
+  --btn-color-warning-light: #FEEDCF;
+  --btn-color-success-light: #E6F5E9;
+}
+
+.btnUi {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  line-height: 20px;
+  min-height: 20px;
+  max-width: 100%;
+  padding: 8px 10px;
+  border: solid 1px transparent;
+  font-family: "Roboto", sans-serif;
+  font-size: 15px;
+  font-weight: 500;
+  text-align: center;
+  border-radius: 6px;
+  cursor: pointer;
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-transition: all 100ms ease-in-out;
+  -moz-transition: all 100ms ease-in-out;
+  -ms-transition: all 100ms ease-in-out;
+  transition: all 100ms ease-in-out;
+}
+
+.btnUi.w_full {
+  display: flex;
+  width: 100%;
+}
+
+.btnUi.h_full {
+  height: 100%;
+}
+
+.btnUi.btn_strong {
+  font-weight: 600;
+}
+
+.btnUi.btn_light {
+  font-weight: 400;
+}
+
+.btnUi.btn_disabled,
+.btnUi.btn_disabled:hover {
+  cursor: not-allowed;
+}
+
+.btn_group,
+.btn_group_l,
+.btn_group_xl,
+.btn_wrapper {
+  display: inline-block;
+}
+
+.btnUi + .btnUi,
+.btn_switch + .btnUi {
+  margin-left: 8px;
+}
+
+.btn_group .btnUi:not(:first-child),
+.btn_group .btn_switch:not(:first-child),
+.btn_group .btn_wrapper:not(:first-child),
+.btn_group button:not(:first-child) {
+  margin-left: 8px;
+}
+
+.btn_group_l .btnUi:not(:first-child),
+.btn_group_l .btn_switch:not(:first-child),
+.btn_group_l .btn_wrapper:not(:first-child),
+.btn_group_l button:not(:first-child) {
+  margin-left: 12px;
+}
+
+.btn_group_xl .btnUi:not(:first-child),
+.btn_group_xl .btn_switch:not(:first-child),
+.btn_group_xl .btn_wrapper:not(:first-child),
+.btn_group_xl button:not(:first-child) {
+  margin-left: 16px;
+}
+
+.btn_switch {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.btn_switch .btnUi {
+  margin-left: 0 !important;
+}
+
+.btn_switch > .btnUi:not(:first-child),
+.btn_switch > *:not(:first-child) .btnUi {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.btn_switch > *:not(:first-child) {
+  margin-left: -1px !important;
+}
+
+.btn_switch > .btnUi:not(:last-child),
+.btn_switch > *:not(:last-child) .btnUi {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.btn_switch .btnUi.active {
+  position: relative;
+  z-index: 1;
+}
+
+.btn_switch .btnUi .btn_txt {
+  min-width: unset !important;
+}
+
+.btn_switch.w_full {
+  width: 100%;
+}
+
+.btn_switch.w_full .btnUi {
+  width: 100%;
+  flex: 1 1 auto;
+  white-space: nowrap;
+}
+
+.btnUi.do_input_hug {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  margin-left: -1px;
+  position: relative;
+}
+
+.btn_txt {
+  margin: 0 4px;
+  flex: 0 1 auto;
+}
+
+.btnUi:not(.has_icon) .btn_txt {
+  min-width: 44px;
+}
+
+.btnUi.btn_no_min_width .btn_txt {
+  min-width: unset;
+}
+
+.btn_desc {
+  display: block;
+  font-size: calc(100% - 1px);
+  font-weight: 400;
+}
+
+/* Icon */
+.btnUi .fas,
+.btnUi .fa {
+  margin: 0 4px;
+  flex: 0 0 auto;
+  font-size: 16px;
+  line-height: 20px;
+}
+
+.btnUi.btn_s .fas,
+.btnUi.btn_s .fa {
+  font-size: 14px;
+  margin: 0 2px;
+}
+
+.btnUi .fa-sm {
+  font-size: 14px;
+  margin: 0 2px;
+}
+
+/* Rounded */
+.btn_rounded {
+  border-radius: 100px;
+}
+
+/* Size */
+.btn_xxs {
+  padding: 3px 8px;
+  font-size: 13px;
+}
+
+.btn_xs {
+  padding: 5px 8px;
+  font-size: 13px;
+}
+
+.btn_s {
+  padding: 6px 10px;
+  font-size: 14px;
+}
+
+.btn_m {
+  padding: 8px 10px;
+}
+
+.btn_l {
+  padding: 12px 14px;
+}
+
+.btn_xl {
+  padding: 16px 20px;
+  font-size: 16px;
+}
+
+.btn_xxl {
+  padding: 18px 28px;
+  font-size: 18px;
+}
+
+.btn_w_l {
+  padding-left: 14px;
+  padding-right: 14px;
+}
+
+.btn_w_xs {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.btn_w_xxs {
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
+/* Sub btn */
+.btn_sub {
+  padding-left: 2px;
+  padding-right: 2px;
+}
+
+.btn_sub .fas,
+.btn_sub .fa {
+  font-size: 12px;
+  margin: 0 2px;
+}
+
+/* Font size */
+.btn_fs_l {
+  font-size: 16px;
+}
+
+/* Text align */
+.btn_align_left {
+  text-align: left;
+}
+
+/*****************/
+/* Default style */
+/*****************/
+.btn_primary {
+  color: #fff;
+  background: var(--btn-color-primary);
+}
+
+.btn_primary:hover,
+.btn_primary:focus {
+  background: var(--btn-color-primary-hover);
+}
+
+.btn_secondary {
+  color: #fff;
+  background: var(--btn-color-secondary);
+}
+
+.btn_secondary:hover,
+.btn_secondary:focus {
+  background: var(--btn-color-secondary-hover);
+}
+
+.btn_alert {
+  color: #fff;
+  background: var(--btn-color-alert);
+}
+
+.btn_alert:hover,
+.btn_alert:focus {
+  background: var(--btn-color-alert-hover);
+}
+
+.btn_warning {
+  color: #fff;
+  background: var(--btn-color-warning);
+}
+
+.btn_warning:hover,
+.btn_warning:focus {
+  background: var(--btn-color-warning-hover);
+}
+
+.btn_success {
+  color: #fff;
+  background: var(--btn-color-success);
+}
+
+.btn_success:hover,
+.btn_success:focus {
+  background: var(--btn-color-success-hover);
+}
+
+.btn_primary.btn_disabled,
+.btn_secondary.btn_disabled,
+.btn_alert.btn_disabled,
+.btn_warning.btn_disabled,
+.btn_success.btn_disabled,
+.btn_primary.btn_disabled:hover,
+.btn_alert.btn_disabled:hover,
+.btn_warning.btn_disabled:hover,
+.btn_success.btn_disabled:hover {
+  background: #E2E3EA;
+}
+
+/*****************/
+/* Reverse style */
+/*****************/
+.btn_reverse_primary {
+  color: var(--turquoise);
+  background: var(--turquoise-light);
+}
+
+.btn_reverse_primary:hover,
+.btn_reverse_primary:focus {
+  border-color: currentColor;
+}
+
+.btn_reverse_secondary {
+  color: var(--btn-color-secondary);
+  background: var(--btn-color-secondary-light);
+}
+
+.btn_reverse_secondary:hover,
+.btn_reverse_secondary:focus {
+  border-color: currentColor;
+}
+
+.btn_reverse_alert {
+  color: var(--btn-color-alert);
+  background: var(--btn-color-alert-light);
+}
+
+.btn_reverse_alert:hover,
+.btn_reverse_alert:focus {
+  border-color: currentColor;
+}
+
+.btn_reverse_warning {
+  color: var(--btn-color-warning);
+  background: var(--btn-color-warning-light);
+}
+
+.btn_reverse_warning:hover,
+.btn_reverse_warning:focus {
+  border-color: currentColor;
+}
+
+.btn_reverse_success {
+  color: var(--btn-color-success);
+  background: var(--btn-color-success-light);
+}
+
+.btn_reverse_success:hover,
+.btn_reverse_success:focus {
+  border-color: currentColor;
+}
+
+.btn_reverse_primary.btn_disabled,
+.btn_reverse_secondary.btn_disabled,
+.btn_reverse_alert.btn_disabled,
+.btn_reverse_warning.btn_disabled,
+.btn_reverse_success.btn_disabled,
+.btn_reverse_primary.btn_disabled:hover,
+.btn_reverse_secondary.btn_disabled:hover,
+.btn_reverse_alert.btn_disabled:hover,
+.btn_reverse_warning.btn_disabled:hover,
+.btn_reverse_success.btn_disabled:hover {
+  background: #F7F8FA;
+  color: #CAD0DB;
+  border-color: transparent;
+}
+
+/*****************/
+/* Outline style */
+/*****************/
+.btn_outline_primary {
+  color: var(--btn-color-primary);
+  border-color: currentColor;
+  background: none;
+}
+
+.btn_outline_primary:hover,
+.btn_outline_primary:focus {
+  background-color: var(--btn-color-primary-light);
+}
+
+.btn_outline_secondary {
+  color: var(--btn-color-secondary);
+  border-color: #CAD0DB;
+  background: none;
+}
+
+.btn_outline_secondary:hover,
+.btn_outline_secondary:focus {
+  background: #F7F7FA;
+}
+
+.btn_outline_secondary.active,
+.btn_outline_secondary.active:hover {
+  color: var(--btn-color-primary);
+  border-color: currentColor;
+  background-color: var(--btn-color-primary-light);
+}
+
+.btn_outline_alert {
+  color: var(--btn-color-alert);
+  border-color: currentColor;
+  background: none;
+}
+
+.btn_outline_alert:hover,
+.btn_outline_alert:focus {
+  background-color: var(--btn-color-alert-light);
+}
+
+.btn_outline_warning {
+  color: var(--btn-color-warning);
+  border-color: currentColor;
+  background: none;
+}
+
+.btn_outline_warning:hover,
+.btn_outline_warning:focus {
+  background-color: var(--btn-color-warning-light);
+}
+
+.btn_outline_success {
+  color: var(--btn-color-success);
+  border-color: currentColor;
+  background: none;
+}
+
+.btn_outline_success:hover,
+.btn_outline_success:focus {
+  background-color: var(--btn-color-success-light);
+}
+
+.btn_outline_primary.btn_disabled,
+.btn_outline_secondary.btn_disabled,
+.btn_outline_alert.btn_disabled,
+.btn_outline_warning.btn_disabled,
+.btn_outline_success.btn_disabled,
+.btn_outline_primary.btn_disabled:hover,
+.btn_outline_secondary.btn_disabled:hover,
+.btn_outline_alert.btn_disabled:hover,
+.btn_outline_warning.btn_disabled:hover,
+.btn_outline_success.btn_disabled:hover {
+  background: none;
+  color: #DFE3EA;
+  border-color: currentColor;
+}
+
+/*****************/
+/* Ghost style */
+/*****************/
+.btn_ghost_primary {
+  color: var(--btn-color-primary);
+  background: none;
+}
+
+.btn_ghost_primary:hover {
+  background-color: var(--btn-color-primary-light);
+}
+
+.btn_ghost_secondary {
+  color: var(--btn-color-secondary);
+  background: none;
+}
+
+.btn_ghost_secondary:hover,
+.btn_ghost_secondary:focus {
+  background: #F7F7FA;
+}
+
+.btn_ghost_grey {
+  color: var(--grey-3);
+  background: none;
+}
+
+.btn_ghost_grey:hover,
+.btn_ghost_grey:focus {
+  background: #F7F7FA;
+}
+
+.btn_ghost_alert {
+  color: var(--btn-color-alert);
+  background: none;
+}
+
+.btn_ghost_alert:hover,
+.btn_ghost_alert:focus {
+  background-color: var(--btn-color-alert-light);
+}
+
+.btn_ghost_warning {
+  color: var(--btn-color-warning);
+  background: none;
+}
+
+.btn_ghost_warning:hover,
+.btn_ghost_warning:focus {
+  background-color: var(--btn-color-warning-light);
+}
+
+.btn_ghost_success {
+  color: var(--btn-color-success);
+  background: none;
+}
+
+.btn_ghost_success:hover,
+.btn_ghost_success:focus {
+  background-color: var(--btn-color-success-light);
+}
+
+.btn_ghost_primary.btn_disabled,
+.btn_ghost_secondary.btn_disabled,
+.btn_ghost_grey.btn_disabled,
+.btn_ghost_alert.btn_disabled,
+.btn_ghost_warning.btn_disabled,
+.btn_ghost_success.btn_disabled,
+.btn_ghost_primary.btn_disabled:hover,
+.btn_ghost_secondary.btn_disabled:hover,
+.btn_ghost_alert.btn_disabled:hover,
+.btn_ghost_warning.btn_disabled:hover,
+.btn_ghost_success.btn_disabled:hover {
+  background: none;
+  color: #CAD0DB;
+}
+
+.btn_ghost_black {
+  color: var(--grey-0);
+  background: none;
+  border-color: transparent;
+}
+
+.btn_ghost_black:hover {
+  background-color: rgba(202, 208, 219, 0.0666666667);
+}
+
+.btn_ghost_black:active {
+  background-color: rgba(202, 208, 219, 0.1333333333);
+}
+
+.btn_ghost_black.btn_disabled {
+  color: rgba(93, 99, 126, 0.2666666667);
+}
+
+.btn_ghost_black.btn_reset_margin {
+  left: -10px;
+}
+
+/**********************/
+/* Ghost+outline style */
+/**********************/
+.btn_ghost_outline_primary {
+  color: var(--btn-color-primary);
+  background: none;
+}
+
+.btn_ghost_outline_primary:hover,
+.btn_ghost_outline_primary:focus {
+  background-color: var(--btn-color-primary-light);
+  border-color: currentColor;
+}
+
+.btn_ghost_outline_secondary {
+  color: var(--btn-color-secondary);
+  background: none;
+}
+
+.btn_ghost_outline_secondary:hover,
+.btn_ghost_outline_secondary:focus {
+  background: #F7F7FA;
+  border-color: currentColor;
+  border-color: #CAD0DB;
+}
+
+.btn_ghost_outline_alert {
+  color: var(--btn-color-alert);
+  background: none;
+}
+
+.btn_ghost_outline_alert:hover,
+.btn_ghost_outline_alert:focus {
+  background-color: var(--btn-color-alert-light);
+  border-color: currentColor;
+}
+
+.btn_ghost_outline_warning {
+  color: var(--btn-color-warning);
+  background: none;
+}
+
+.btn_ghost_outline_warning:hover,
+.btn_ghost_outline_warning:focus {
+  background-color: var(--btn-color-warning-light);
+  border-color: currentColor;
+}
+
+.btn_ghost_outline_success {
+  color: var(--btn-color-success);
+  background: none;
+}
+
+.btn_ghost_outline_success:hover,
+.btn_ghost_outline_success:focus {
+  background-color: var(--btn-color-success-light);
+  border-color: currentColor;
+}
+
+.btn_ghost_outline_primary.btn_disabled,
+.btn_ghost_outline_secondary.btn_disabled,
+.btn_ghost_outline_alert.btn_disabled,
+.btn_ghost_outline_warning.btn_disabled,
+.btn_ghost_outline_success.btn_disabled,
+.btn_ghost_outline_primary.btn_disabled:hover,
+.btn_ghost_outline_secondary.btn_disabled:hover,
+.btn_ghost_outline_alert.btn_disabled:hover,
+.btn_ghost_outline_warning.btn_disabled:hover,
+.btn_ghost_outline_success.btn_disabled:hover {
+  background: none;
+  color: #CAD0DB;
+  border-color: transparent;
+}
+
+/*****************/
+/* Link style */
+/*****************/
+.btn_link_primary,
+.btn_link_secondary,
+.btn_link_grey,
+.btn_link_alert,
+.btn_link_warning,
+.btn_link_success {
+  padding: 0;
+  background: none;
+}
+
+.btn_link_primary .btn_txt,
+.btn_link_secondary .btn_txt,
+.btn_link_grey .btn_txt,
+.btn_link_alert .btn_txt,
+.btn_link_warning .btn_txt,
+.btn_link_success .btn_txt {
+  min-width: 0 !important;
+  margin: 0 !important;
+}
+
+.btn_link_primary:hover .btn_txt,
+.btn_link_secondary:hover .btn_txt,
+.btn_link_grey:hover .btn_txt,
+.btn_link_alert:hover .btn_txt,
+.btn_link_warning:hover .btn_txt,
+.btn_link_success:hover .btn_txt,
+.btn_link_primary:focus .btn_txt,
+.btn_link_secondary:focus .btn_txt,
+.btn_link_grey:focus .btn_txt,
+.btn_link_alert:focus .btn_txt,
+.btn_link_warning:focus .btn_txt,
+.btn_link_success:focus .btn_txt {
+  text-decoration: underline;
+}
+
+.btn_link_primary .fas,
+.btn_link_secondary .fas,
+.btn_link_grey .fas,
+.btn_link_alert .fas,
+.btn_link_warning .fas,
+.btn_link_success .fas,
+.btn_link_primary .fa,
+.btn_link_secondary .fa,
+.btn_link_grey .fa,
+.btn_link_alert .fa,
+.btn_link_warning .fa,
+.btn_link_success .fa {
+  font-size: inherit !important;
+  margin: 0 !important;
+}
+
+.btn_link_primary .btn_first_icon,
+.btn_link_secondary .btn_first_icon,
+.btn_link_grey .btn_first_icon,
+.btn_link_alert .btn_first_icon,
+.btn_link_warning .btn_first_icon,
+.btn_link_success .btn_first_icon {
+  margin-right: 4px !important;
+}
+
+.btn_link_primary .btn_last_icon,
+.btn_link_secondary .btn_last_icon,
+.btn_link_grey .btn_last_icon,
+.btn_link_alert .btn_last_icon,
+.btn_link_warning .btn_last_icon,
+.btn_link_success .btn_last_icon {
+  margin-left: 4px !important;
+}
+
+.btn_link_primary {
+  color: var(--btn-color-primary);
+}
+
+.btn_link_secondary {
+  color: var(--btn-color-secondary);
+}
+
+.btn_link_grey {
+  color: var(--grey-3);
+}
+
+.btn_link_alert {
+  color: var(--btn-color-alert);
+}
+
+.btn_link_warning {
+  color: var(--btn-color-warning);
+}
+
+.btn_link_success {
+  color: var(--btn-color-success);
+}
+
+.btn_link_primary.btn_disabled,
+.btn_link_secondary.btn_disabled,
+.btn_link_grey.btn_disabled,
+.btn_link_alert.btn_disabled,
+.btn_link_warning.btn_disabled,
+.btn_link_success.btn_disabled,
+.btn_link_primary.btn_disabled:hover,
+.btn_link_secondary.btn_disabled:hover,
+.btn_link_grey.btn_disabled:hover,
+.btn_link_alert.btn_disabled:hover,
+.btn_link_warning.btn_disabled:hover,
+.btn_link_success.btn_disabled:hover {
+  background: none;
+  color: #CAD0DB;
+}
+
+/*****************/
+/*     EXTRA     */
+/*****************/
+/* ARROW */
+.btnUi.has_arrow {
+  text-align: left;
+}
+
+/* TAB BTN */
+.btnUi.tab_btn {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border-radius: 22px;
+  margin-left: 10px;
+}
+
+.btnUi.tab_btn .fa,
+.btnUi.tab_btn .fas {
+  font-size: 11px;
+}
+
+/* ICON BUTTON */
+.icon_btn {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: normal;
+  padding: 4px;
+  font-size: 20px;
+  color: var(--grey-3);
+  cursor: pointer;
+  margin: 0 4px;
+  transition: all 200ms;
+  border-radius: 40px;
+}
+
+.icon_btn:focus,
+.icon_btn:hover {
+  color: var(--turquoise);
+}
+
+a:hover .icon_btn,
+a:focus .icon_btn {
+  color: inherit;
+}
+
+.icon_btn_color {
+  color: var(--turquoise);
+}
+
+.icon_btn_light {
+  color: var(--grey-4);
+}
+
+.icon_btn_white {
+  color: #fff;
+}
+
+.icon_btn_black {
+  color: #000;
+  opacity: 0.65;
+}
+
+.icon_btn_black:hover,
+.icon_btn_black:focus {
+  color: #000;
+  opacity: 1;
+}
+
+.icon_btn.m {
+  font-size: 17px;
+}
+
+.icon_btn.s {
+  font-size: 16px;
+  margin: 0 2px;
+}
+
+.icon_btn.xs {
+  font-size: 14px;
+  margin: 0 2px;
+}
+
+.icon_btn.xs {
+  font-size: 14px;
+  margin: 0 2px;
+}
+
+.icon_btn.xxs {
+  font-size: 12px;
+  margin: 0 1px;
+}
+
+/* SVG */
+.btnUi svg.btn_svg_stroke g {
+  stroke: currentColor;
+}
+
+.panel_inner {
+  /* Padding horizontal des sections */
+  --section-padding-left: 30px;
+}
+
+.panel_inner.is_invisible {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.panel_overlay {
+  position: fixed;
+  z-index: 10000;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.panel_inner {
+  position: fixed;
+  z-index: 10000;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 500px;
+  max-width: calc(100% - 20px);
+  background: #fff;
+  box-shadow: rgba(0, 0, 0, 0.2) 0 0 20px;
+  outline: none;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: -webkit-box;
+  display: -moz-box;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -moz-box-orient: vertical;
+  -moz-box-direction: normal;
+  flex-direction: column;
+  transition: padding 300ms, width 300ms;
+}
+
+.panel_inner.left {
+  left: 0;
+  right: auto;
+}
+
+.panel_overlay.anim_show {
+  animation: panel_overlay_show 300ms ease-out;
+}
+
+.panel_overlay.anim_hide {
+  animation: panel_overlay_hide 300ms ease-out;
+}
+
+.panel_inner.anim_show {
+  animation: panel_right_show 300ms ease-out;
+}
+
+.panel_inner.anim_hide {
+  animation: panel_right_hide 300ms ease-out;
+}
+
+.panel_inner.anim_show.left {
+  animation: panel_left_show 300ms ease-out;
+}
+
+.panel_inner.anim_hide.left {
+  animation: panel_left_hide 300ms ease-out;
+}
+
+@keyframes panel_overlay_show {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes panel_overlay_hide {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes panel_right_show {
+  0% {
+    opacity: 0;
+    transform: translateX(50%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes panel_right_hide {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(50%);
+  }
+}
+@keyframes panel_left_show {
+  0% {
+    opacity: 0;
+    transform: translateX(-50%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes panel_left_hide {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(-50%);
+  }
+}
+/* Panel close */
+.panel_close {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  overflow: hidden;
+  background: none;
+  box-shadow: none;
+  outline: none;
+  border: none;
+  padding: 0;
+}
+
+.panel_close_left {
+  composes: panel_close;
+  margin-left: -12px;
+  margin-right: 10px;
+}
+
+.panel_close_absolute {
+  composes: panel_close;
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  top: 5px;
+  right: 3px;
+}
+
+.panel_close_inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 32px;
+  height: 32px;
+  border-radius: 32px;
+  transition: background 200ms;
+}
+
+.panel_close:hover .panel_close_inner,
+.panel_close:focus .panel_close_inner {
+  background-color: var(--main-bg-color);
+}
+
+.panel_close_img {
+  flex: 0 1 auto;
+}
+
+/* Panel side */
+.panel_side {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  background: #F5F6F8;
+  animation: panel_side_left_show 300ms ease-out;
+}
+
+.panel_inner.left .panel_side {
+  right: 0;
+}
+
+@keyframes panel_side_left_show {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+/* HEADER */
+.panel_header {
+  -ms-flex: 0 0 auto;
+  -webkit-flex: 0 0 auto;
+  -webkit-box-flex: 0;
+  -moz-box-flex: 0;
+  flex: 0 0 auto;
+  padding: 20px 30px;
+  line-height: 1;
+}
+
+.panel_header.has_border {
+  border-bottom: solid 1px #eee;
+}
+
+.panel_header.has_no_bottom_padding {
+  padding-bottom: 0;
+}
+
+.panel_title {
+  font-size: 20px;
+  font-weight: 400;
+}
+
+.panel_desc {
+  margin-top: 6px;
+  font-size: 14px;
+  color: #757b96;
+  line-height: 1.3;
+}
+
+.panel_intro {
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--grey-2);
+}
+
+/* BODY */
+.panel_body_outer {
+  -ms-flex: 1 1 auto;
+  -webkit-flex: 1 1 auto;
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.panel_body_outer_grey {
+  background: var(--main-bg-color);
+}
+
+.panel_body_outer_rel {
+  position: relative;
+}
+
+.panel_body_inner {
+  flex: 1 1 auto;
+  padding: 0 30px;
+  overflow-y: auto;
+}
+
+.panel_body_inner::before,
+.panel_body_inner::after {
+  content: "";
+  display: block;
+  margin-bottom: 24px;
+}
+
+.panel_body_inner_no_margin::before,
+.panel_body_inner_no_margin::after {
+  display: none;
+}
+
+.red {
+  color: red;
+}
+
+.blue {
+  color: blue;
+}
+
+.green {
+  color: green;
+}
+
+.h1,
+.h2,
+.h3 {
+  color: var(--black);
+  font-weight: 500;
+  line-height: 1.3;
+  margin: 0;
+}
+
+.h1 {
+  font-size: 25px;
+}
+
+.h2 {
+  font-size: 20px;
+}
+
+.h3 {
+  font-size: 17px;
+} /* Wrapper */
+/* Header */
+.header {
+  display: flex;
+  align-items: center;
+}
+
+.header_btn {
+  position: relative;
+  flex: 0 0 auto;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 500;
+  padding: 6px 10px;
+  padding-left: 24px;
+  border-radius: 5px;
+  transition: all 200ms;
+}
+
+.header_btn:hover,
+.header_btn:focus {
+  background-color: var(--main-border-color);
+}
+
+.header::after {
+  content: "";
+  flex: 1 1 auto;
+  border-top: solid 1px var(--main-border-color);
+  margin-left: 4px;
+}
+
+/* Arrow */
+.arrow {
+  position: absolute;
+  left: 0px;
+  top: 50%;
+  margin-top: -7px;
+  width: 20px;
+  height: 14px;
+  transition: all 100ms;
+}
+
+.arrow .fas {
+  display: block;
+}
+
+.wrapper_open .arrow {
+  transform: rotate(180deg);
+}
+
+/* Body */
+.body {
+  transition: all 200ms;
+  margin-top: 8px;
+  margin-bottom: 16px;
+}
+
+.wrapper_close .body {
+  height: 0;
+  margin-top: 0;
+  overflow: hidden;
+}