kaui 3.0.9 → 4.0.0

data/app/assets/stylesheets/kaui/account.css

@@ -1,34 +1,2048 @@
 h1 span.account-child-label {
-  float: right; }
+  float: right;
+}
 
 .account-child-label {
-  color: white !important; }
+  color: white !important;
+}
 
 .naked {
   background-color: transparent;
   color: #00919d;
   padding: 0;
-  font-size: inherit; }
+  font-size: inherit;
+}
 
 .naked:hover {
   background-color: transparent;
-  color: #2a6496; }
+  color: #2a6496;
+}
 
 .title-nav-area .container p {
-  padding-left: 20px;
-  padding-right: 20px; }
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
 .title-nav-area .container a {
-  max-width: 125px;
-  min-width: 90px;
-  padding: 12px 12px;
-  text-align: center; }
+  max-width: 7.8125rem;
+  min-width: 5.625rem;
+  padding: 0.75rem 0.75rem;
+  text-align: center;
+}
+
 .title-nav-area .container span.label-danger {
-  margin: 8px; }
+  margin: 0.5rem;
+}
 
 .form-force-inline {
-  display: inline; }
+  display: inline;
+}
 
 .form-right {
-  float: right; }
+  float: right;
+}
+
+table.dataTable thead > tr > th {
+  border: 0;
+}
+
+#accounts-table {
+  margin-top: 1.25rem !important;
+}
+
+/* app/views/kaui/accounts/index.html.erb */
+
+.kaui-accounts-index #accounts-table td, #accounts-table tr {
+  white-space: nowrap;
+}
+.kaui-accounts-index .custom-checkbox {
+  pointer-events: none;
+}
+
+/* app/views/kaui/accounts/_account_filterbar.html.erb */
+
+.kaui-accounts-index .modal-content {
+  border-radius: 1rem;
+  min-width: 40.5rem;
+}
+
+.kaui-accounts-index .modal-body {
+  padding-bottom: 0.375rem !important;
+  padding-top: 1.25rem !important;
+}
+
+.kaui-accounts-index .modal-header {
+  padding: 1.5rem 1.5rem 1rem 1.5rem !important;
+}
+
+.kaui-accounts-index .modal-footer {
+  padding: 1rem 1.5rem 1.5rem 1.5rem !important;
+}
+
+.kaui-accounts-index .modal-title {
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  color: #181D27;
+}
+
+.kaui-accounts-index .close-button {
+  background: transparent;
+  padding: 0;
+  margin-top: -1.25rem;
+}
+
+.kaui-accounts-index .close-button:hover {
+  background: transparent;
+  padding: 0;
+}
+
+.kaui-accounts-index .border-button {
+  background: transparent;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: 0.0625rem solid #D5D7DA;
+  border-radius: 0.375rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.625rem;
+}
+
+.kaui-accounts-index .border-button:hover {
+  background: transparent;
+}
+
+.kaui-accounts-index .button {
+  background: transparent;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.625rem;
+}
+
+.kaui-accounts-index .button:hover {
+  background: transparent;
+}
+
+.kaui-accounts-index .field-label {
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #414651;
+  margin-top: -1.25rem;
+  min-width: 9.59375rem;
+}
+
+.kaui-accounts-index .search-field-label {
+  margin-top: -1.25rem;
+}
+
+.kaui-accounts-index .form-group.row.align-items-center {
+  display: flex;
+  align-items: center;
+}
+
+.kaui-accounts-index .form-group.row.align-items-center label {
+  margin-bottom: 0;
+}
+
+.kaui-accounts-index .form-group.row.align-items-center .form-control {
+  margin-right: 0.25rem;
+  height: 2.5rem;
+  border-radius: 0.375rem;
+}
+
+.kaui-accounts-index .form-group.row.align-items-center.search-field div {
+  padding: 0;
+  margin-right: 0.25rem;
+}
+
+.kaui-accounts-index .form-group.row.align-items-center .form-control:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.kaui-accounts-index .form-group.d-flex {
+  display: flex;
+  align-items: center;
+}
+
+.kaui-accounts-index .form-group.d-flex label {
+  margin-bottom: 0;
+}
+
+.kaui-accounts-index .form-group.d-flex .form-control {
+  margin-right: 0.25rem;
+  height: 2.5rem;
+  border-radius: 0.375rem;
+}
+
+.kaui-accounts-index .form-group.d-flex .form-control:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.kaui-accounts-index #search-labels-container .label {
+  margin-left: 0.3125rem;
+  margin-bottom: 0.3125rem;
+  color: white;
+}
+
+.kaui-accounts-index .col-form-label {
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #414651;
+  padding: 0;
+}
+
+.kaui-accounts-index #search-fields-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin: 1rem 0.75rem;
+}
+
+.kaui-accounts-index .filter-bar-container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.kaui-accounts-index .filter-bar {
+  display: flex;
+  align-items: center;
+}
+
+.kaui-accounts-index .filter-bar label {
+  margin: 0.625rem;
+}
+
+.kaui-accounts-index .modal-header .icon-container {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: 0.0625rem solid #D5D7DA;
+  border-radius: 0.375rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.25rem;
+}
+
+.kaui-accounts-index .modal-header .icon-container img {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.kaui-accounts-index .form-group select.form-control {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 6L8 10L12 6" stroke="%23A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+  background-repeat: no-repeat;
+  background-position: right 0.625rem center;
+  background-size: 1rem 1rem;
+  padding-right: 1.875rem;
+}
+
+.kaui-accounts-index select.form-control:focus {
+  box-shadow: none;
+  outline: none;
+}
+
+/* app/views/kaui/accounts/_functions_bar.html.erb */
+
+.kaui-accounts-index .title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.75rem;
+  color: #181D27;
+}
+
+.kaui-accounts-index .custom-border-bottom {
+  border-bottom: 0.0625rem solid #E9EAEB;
+}
+
+.kaui-accounts-index .dropdown-menu#column-visibility {
+  max-height: 18.75rem;
+  width: 12.5rem;
+  overflow-y: auto;
+}
+
+.kaui-accounts-index .dropdown-menu#column-visibility::before {
+  content: 'Drag to reorder columns';
+  display: block;
+  height: 1.875rem;
+  text-align: center;
+  color: darkgrey;
+  padding-top: 0.3125rem;
+}
+
+.kaui-accounts-index .dropdown-menu {
+  padding: 0.3125rem;
+}
+
+.kaui-accounts-index #column-visibility {
+  position: absolute;
+  top: 100%;
+  right: 9.375rem;
+  background: white;
+  border: 0.0625rem solid #ccc;
+  max-height: 18.75rem;
+  width: 13.75rem;
+  overflow-y: auto;
+  z-index: 1000;
+  padding: 0.625rem 0 0.625rem 0.625rem;
+}
+
+.kaui-accounts-index #column-visibility::before {
+  content: 'Drag to reorder columns';
+  display: block;
+  height: 1.875rem;
+  text-align: center;
+  color: darkgrey;
+  padding-top: 0.3125rem;
+  font-size: 0.75rem;
+}
+
+.kaui-accounts-index .icon-drag {
+  margin-left: auto;
+}
+
+.kaui-accounts-index .toggle-button-right {
+  background-color: white;
+  color: black;
+  border: 0.0625rem solid #ccc;
+  padding: 0.5rem 0.9375rem;
+  cursor: pointer;
+}
+
+.kaui-accounts-index .list-group-item-manual {
+  cursor: grab;
+  margin-bottom: 0.3125rem;
+}
+
+.kaui-accounts-index .list-group-item-manual:active {
+  cursor: grabbing;
+}
+
+.kaui-accounts-index .download-button-right {
+  float: right;
+  margin-bottom: 0.625rem;
+  margin-left: 0.625rem;
+  background-color: white;
+  color: black;
+  text-transform: none;
+  border: 0.0625rem solid #ccc;
+  padding: 0.5rem 0.9375rem;
+}
+
+.kaui-accounts-index .dropdown-container {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.kaui-accounts-index .label-group-item-manual {
+  padding: 0.5rem 0.625rem;
+  width: -webkit-fill-available;
+  cursor: grab;
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #252B37;
+}
+
+.kaui-accounts-index .label-group-item-manual:active {
+  background: #FAFAFA;
+}
+
+.kaui-accounts-index .label-group-item-manual span {
+  cursor: grab;
+}
+
+.kaui-accounts-index .label-group-item-manual:has(input[type="checkbox"]:checked) {
+  background-color: #FAFAFA;
+  border-radius: 0.25rem;
+  cursor: pointer !important;
+}
+
+.kaui-accounts-index .dropdown-menu.ui-sortable {
+  scrollbar-width: thin;
+  scrollbar-color: #ccc transparent;
+  border-radius: 0.375rem;
+  border: 0.0625rem solid #00000014 !important;
+  margin: 0.625rem 0 0;
+  min-width: 13.125rem;
+}
+
+.kaui-accounts-index .dropdown-menu.ui-sortable::-webkit-scrollbar {
+  width: 0.375rem;
+}
+
+.kaui-accounts-index .dropdown-menu.ui-sortable::-webkit-scrollbar-thumb {
+  background-color: #ccc;
+  border-radius: 0.1875rem;
+}
+
+.kaui-accounts-index .dropdown-menu.ui-sortable::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* app/views/kaui/accounts/new.html.erb */
+
+.kaui-new-account .add-account-title {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  letter-spacing: 0;
+  color: #1B1C1E;
+  padding: 1.5rem 0;
+  
+}
+
+.kaui-new-account .icon-container {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: 0.0625rem solid #D5D7DA;
+  border-radius: 0.375rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.25rem;
+}
+
+.kaui-new-account .icon-container img {
+  width: 1rem;
+  height: 1rem;
+}
+
+
+.kaui-new-account .control-label {
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+  line-height: 1.25rem !important;
+  color: #414651 !important;
+}
+
+.kaui-new-account .question-circle {
+  color: #A4A7AE;
+  font-size: 1rem;
+  width: 1rem;
+  height: 1rem;
+  display: inline-block;
+  line-height: 1rem;
+  text-align: center;
+}
+
+.kaui-new-account .col-sm-9.position-relative a {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+
+.kaui-new-account .form-group.d-flex.pb-3 .form-control {
+  height: 2.5rem;
+  border-radius: 0.375rem;
+}
+
+.kaui-new-account .form-group.d-flex .form-control:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.kaui-new-account .form-group select.form-control {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 6L8 10L12 6" stroke="%23A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+  background-repeat: no-repeat;
+  background-position: right 0.625rem center;
+  background-size: 1rem 1rem;
+
+  padding-right: 1.875rem;
+}
+
+.kaui-new-account select.form-control:focus {
+  box-shadow: none;
+  outline: none;
+}
+
+.kaui-new-account .checkbox label {
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #414651;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+
+/* app/views/kaui/accounts/_link_parent_to_modal.html.erb */
+
+.link-to-parent-account .modal-content {
+  border-radius: 1rem;
+  min-width: 37.5rem;
+  padding: 0;
+}
+
+.link-to-parent-account .modal-body {
+  padding-bottom: 0.375rem !important;
+  padding-top: 1.25rem !important;
+}
+
+.link-to-parent-account .modal-header { 
+  padding: 1.5rem 1.5rem 1rem 1.5rem !important;
+}
+
+.link-to-parent-account .modal-footer {
+  padding: 1rem 1.5rem 1.5rem 1.5rem !important;
+}
+
+.link-to-parent-account .modal-title {
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  color: #181D27;
+}
+
+.link-to-parent-account .close-button {
+  background: transparent;
+  padding: 0;
+  margin-top: -1.25rem;
+}
+
+.link-to-parent-account .close-button:hover {
+  background: transparent;
+  padding: 0;
+}
+
+.link-to-parent-account .form-group {
+  display: flex;
+  align-items: center;
+}
+
+.link-to-parent-account .form-group label {
+  margin-bottom: 0;
+}
+
+.link-to-parent-account .form-group .form-control {
+  margin-right: 0.25rem;
+  height: 2.5rem;
+  border-radius: 0.375rem;
+}
+
+.link-to-parent-account .form-group div {
+  padding: 0;
+  margin-right: 0.25rem;
+}
+
+.link-to-parent-account .form-group .form-control:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.link-to-parent-account .form-group.d-flex {
+  display: flex;
+  align-items: center;
+}
+
+.link-to-parent-account .form-group.d-flex label {
+  margin-bottom: 0;
+}
+
+.link-to-parent-account .form-group.d-flex .form-control {
+  margin-right: 0.25rem;
+  height: 2.5rem;
+  border-radius: 0.375rem;
+}
+
+.link-to-parent-account .form-group.d-flex .form-control:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+#search-labels-container .label {
+  margin-left: 0.3125rem;
+  margin-bottom: 0.3125rem;
+  color: white;
+}
+
+.link-to-parent-account .col-form-label {
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #414651;
+  padding: 0;
+  margin-top: -1.25rem;
+}
+
+.link-to-parent-account .modal-header .icon-container {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: 0.0625rem solid #D5D7DA;
+  border-radius: 0.375rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.25rem;
+}
+
+.link-to-parent-account .label-group-item-manual {
+  padding: 0.5rem 0;
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #252B37;
+}
+
+/* app/views/kaui/accounts/_close_account_modal.html.erb */
+
+.close_account_modal .modal-content {
+  border-radius: 1rem;
+  min-width: 37.5rem;
+  padding: 0;
+}
+
+.close_account_modal .modal-body {
+  padding-bottom: 1rem !important;
+  padding-top: 1.25rem !important;
+}
+
+.close_account_modal .modal-header { 
+  padding: 1.5rem 1.5rem 1rem 1.5rem !important;
+}
+
+.close_account_modal .modal-footer {
+  padding: 1rem 1.5rem 1.5rem 1.5rem !important;
+}
+
+.close_account_modal .modal-title {
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  color: #181D27;
+}
+
+.close_account_modal .control-label {
+  margin-top: -1.25rem;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #414651;
+}
+
+.close_account_modal .close-button {
+  background: transparent;
+  padding: 0;
+  margin-top: -1.25rem;
+}
+
+.close_account_modal .form-check label {
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #414651;
+}
+
+.close_account_modal .form-group.mb-3 input {
+  background-color: #fafafa !important;
+}
+
+.close_account_modal .close-button:hover {
+  background: transparent;
+  padding: 0;
+}
+
+.close_account_modal .form-group {
+  display: flex;
+  align-items: center;
+}
+
+.close_account_modal .form-group label {
+  margin-bottom: 0;
+}
+
+.close_account_modal .form-group .form-control {
+  margin-right: 0.25rem;
+  height: 2.5rem;
+  border-radius: 0.375rem;
+}
+
+.close_account_modal .form-group div {
+  padding: 0;
+  margin-right: 1.25rem;
+}
+
+.close_account_modal .form-group .form-control:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.close_account_modal .form-group.d-flex {
+  display: flex;
+  align-items: center;
+}
+
+.close_account_modal .form-group.d-flex label {
+  margin-bottom: 0;
+}
+
+.close_account_modal .form-group.d-flex .form-control {
+  margin-right: 0.25rem;
+  height: 2.5rem;
+  border-radius: 0.375rem;
+}
+
+.close_account_modal .form-group.d-flex .form-control:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+#search-labels-container .label {
+  margin-left: 0.3125rem;
+  margin-bottom: 0.3125rem;
+  color: white;
+}
+
+.close_account_modal .col-form-label {
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #414651;
+  padding: 0;
+}
+
+.close_account_modal .modal-header .icon-container {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: 0.0625rem solid #D5D7DA;
+  border-radius: 0.375rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.25rem;
+}
+
+.close_account_modal .label-group-item-manual {
+  padding: 0.5rem 0;
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #252B37;
+}
+
+/* app/views/kaui/accounts/_account_details.html.erb */
+
+.account-details .account-details-header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  padding: 0;
+  border-bottom: 0.0625rem solid #E9EAEB;
+}
+
+.account-details .account-details-header h2 {
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  color: #414651;
+  margin-bottom: 1.25rem;
+}
+
+.account-details .account-details-header .d-flex.align-items-center span {
+  margin: 0 0 1rem 0.625rem;
+  padding: 0.125rem 0.5rem;
+  border-radius: 1.25rem;
+  color: #067647 !important;
+  border: 0.0625rem solid #DCFAE6;
+  background: #ECFDF3;
+  font-weight: 500;
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+}
+
+.account-details .account-details-header a {
+  padding: 0;
+}
+
+.account-details .tag-bar button {
+  margin-top: -0.625rem;
+}
+
+.account-details .tag-bar {
+  border-bottom: 0;
+}
+
+.account-details .account-details-body {
+  margin-top: 1rem;
+}
+
+.account-details .account-details-body h2 {
+  color: #414651 !important;
+  font-weight: 600;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem;
+  text-align: left;
+  margin-bottom: 0 !important;
+}
+
+.account-details .account-details-body p {
+  color: #717680 !important;
+  font-weight: 500;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem;
+  text-align: left;
+}
+
+.account-details .link-view a {
+  text-decoration: none;
+}
+
+.account-details .dots-menu {
+  padding: 0 !important;
+  background-color: transparent !important;
+  border: none !important;
+  text-decoration: none !important;
+  color: #D92D20 !important;
+  font-weight: 500;
+  padding-right: 0.3125rem !important;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  margin-bottom: 0.625rem;
+}
+
+.account-details .account-details-body h2 a {
+  color: #D92D20 !important;
+  font-weight: 500 !important;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem;
+  letter-spacing: 0;
+}
+
+.account-details .form-group.d-flex.pb-3 .form-control {
+  height: 2.5rem;
+  border-radius: 0.375rem;
+}
+
+.account-details .form-group.d-flex .form-control:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.account-details .account-details-body button {
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #175CD3;
+  display: flex;
+  text-transform: capitalize;
+  align-items: center;
+  margin-top: 0.25rem;
+  gap: 0.25rem;
+}
+
+.account-details .add_parent a {
+  display: inline-block;
+  padding: 0.125rem 0.5rem;
+  font-family: system-ui, sans-serif;
+  font-size: 0.875rem;
+  color: #434854;
+  text-decoration: none;
+  border: 0.0625rem solid #f1f1f1;
+  background: #fafafa;
+}
+
+.account-details .add_parent a:first-of-type {
+  border-right: none;
+  border-top-left-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+
+.account-details .add_parent a:nth-of-type(2) {
+  border-top-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+  border-left: none;
+  margin-left: -0.3125rem;
+  color: #A4A7AE;
+  cursor: pointer;
+}
+
+.account-details .add_parent a:nth-of-type(2):hover {
+  color: #000;
+}
+
+.account-details .tag-select:hover .tag-as-select-box {
+  padding: 0.625rem !important;
+  border-radius: 0.375rem;
+  border: 0.0625rem solid #00000014 !important;
+}
+
+.account-details .tag-bar .tag-select .tag-select-box label {
+  width: 100%;
+  min-width: 12.5rem;
+}
+
+.account-details .tag-as-select-box .form-control {
+  width: 100%;
+  min-width: 14.5rem;
+}
+
+.account-details .label-group-item-manual {
+  padding: 0.5rem 0.625rem;
+  width: max-content;
+  display: flex;
+  gap: 0.25rem;
+  margin-bottom: 0.25rem;
+  align-items: center;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #252B37;
+}
+
+.account-details .label-group-item-manual:active {
+  background: #FAFAFA;
+}
+
+.account-details .label-group-item-manual:has(input[type="checkbox"]:checked) {
+  background-color: #FAFAFA;
+  border-radius: 0.25rem;
+  cursor: pointer !important;
+}
+
+.account-details .tag-as-select-box::-webkit-scrollbar {
+  width: 0.375rem;
+}
+
+.account-details .tag-as-select-box::-webkit-scrollbar-thumb {
+  background-color: #ccc;
+  border-radius: 0.1875rem;
+}
+
+.account-details .tag-as-select-box::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.account-details .tag-bar .tag-select .tag-select-box form {
+  width: 100%;
+}
+
+/* app/views/kaui/accounts/_billing_details.html.erb */
+.billing-details {
+  margin-top: 3rem;
+}
+
+.billing-details .billing-details-header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  padding: 0;
+  border-bottom: 0.0625rem solid #E9EAEB;
+}
+
+.billing-details .tag-bar.tag-bar-breathe,
+.billing-details .tag-bar.tag-bar-breathe .toggler,
+.billing-details .tag-bar.tag-bar-breathe .toggle,
+.billing-details .tag-bar.tag-bar-breathe .toggler:hover,
+.billing-details .tag-bar.tag-bar-breathe a,
+.billing-details .tag-bar.tag-bar-breathe .actions {
+  margin: 0 !important;
+  padding: 0 !important;
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.billing-details .tag-bar.tag-bar-breathe button {
+  margin-top: -1.25rem;
+}
+
+.billing-details .billing-details-header h2 {
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  color: #414651;
+  margin-bottom: 1.25rem;
+}
+
+.billing-details .billing-details-header a {
+  padding: 0;
+}
+
+.billing-details .tag-bar button {
+  margin-top: -0.3125rem;
+  margin-left: 0.1875rem;
+}
+
+.billing-details .tag-bar {
+  border-bottom: 0;
+}
+
+.billing-details .account-summary {
+  margin-top: 1rem;
+}
+
+.billing-details .info-item {
+  margin-bottom: 1.25rem;
+}
+
+.billing-details .info-item b {
+  display: block;
+  margin-bottom: 0.25rem;
+  color: #414651 !important;
+  font-weight: 600;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem;
+  text-align: left;
+}
+
+.billing-details .info-item p {
+  margin: 0;
+  color: #717680 !important;
+  font-weight: 500;
+  font-size: 0.875rem !important;
+  text-align: left;
+}
+
+.billing-details .badge {
+  display: inline-block;
+  padding: 0.25rem 0.625rem;
+  border-radius: 0.75rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+.billing-details .badge.success {
+  background-color: #ECFDF3;
+  color: #067647 !important;
+  font-weight: 500;
+  font-size: 0.875rem;
+  border: 0.0625rem solid #DCFAE6;
+}
+
+.billing-details .badge.danger {
+  background-color: #fbe4e6;
+  color: #842029 !important;
+  font-weight: 500;
+  font-size: 0.875rem;
+  border: 0.0625rem solid #fed0d4;
+}
+
+.billing-details .badge.neutral {
+  background-color: #e2e3e5;
+  color: #6c757d;
+}
+
+.billing-details .trigger-invoice-box b {
+  display: block;
+  margin-bottom: 0.25rem;
+  color: #414651 !important;
+  font-weight: 600;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem;
+  text-align: left;
+}
+
+.billing-details .trigger-invoice-box button {
+  margin-left: 0.3125rem;
+  padding: 0.625rem !important;
+}
+
+.billing-details .date-picker {
+  flex: 1;
+  max-width: 12.5rem;
+}
+
+.billing-details .form-check-input {
+  margin-top: 0.25rem;
+}
+
+.billing-details .custom-date-input-wrapper {
+  padding: 0 0.625rem !important;
+  border: 0.0625rem solid #D5D7DA !important;
+  border-radius: 0.375rem;
+  cursor: pointer;
+}
+
+.billing-details .custom-date-input-wrapper svg {
+  margin-right: 0.5rem;
+  flex-shrink: 0;
+}
+
+.billing-details .custom-date-input-wrapper input {
+  border: none;
+  outline: none;
+  box-shadow: none;
+  padding: 0 !important;
+  font-size: 1rem;
+  color: #6B7280;
+  height: 2.5rem;
+}
+
+.billing-details .custom-date-input-wrapper input::placeholder {
+  color: #717680;
+}
+
+.billing-details .custom-date-input-wrapper input.form-control {
+  border: none;
+  box-shadow: none;
+  background-color: transparent;
+}
+
+/* app/views/kaui/accounts/_personal_details.html.erb */
+
+.personal-details {
+  margin-top: 3rem;
+}
+
+.personal-details-header h2 {
+  font-weight: 600;
+  font-size: 1.125rem;
+  color: #414651;
+  text-align: left;
+  margin-bottom: 1.25rem;
+  border-bottom: 0.0625rem solid #E9EAEB;
+  padding-bottom: 0.5rem;
+}
+
+.personal-details .info-item {
+  margin-bottom: 1rem;
+}
+
+.personal-details .info-item b {
+  color: #414651 !important;
+  font-weight: 600;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem;
+  text-align: left;
+}
+
+.personal-details .info-item p {
+  color: #717680 !important;
+  font-weight: 500;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem;
+  text-align: left;
+  margin: 0;
+}
+
+.personal-details .email-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin-top: 0.25rem;
+}
+
+.personal-details .email-chip {
+  background-color: #f1f3f5;
+  border-radius: 1rem;
+  padding: 0.25rem 0.625rem;
+  font-size: 0.8125rem;
+  color: #333;
+  display: inline-flex;
+  align-items: center;
+}
+
+.personal-details .email-chip .remove {
+  margin-left: 0.5rem;
+  cursor: pointer;
+  color: #888;
+}
+
+.personal-details .add-link {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.875rem;
+  color: #175CD3;
+  text-decoration: none;
+}
+
+.personal-details .contact_email_tags div.email-tags {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.personal-details .contact_email_tags div.email-tags div {
+  display: flex;
+  gap: 0.25rem;
+  flex-wrap: wrap;
+}
+
+.personal-details .contact_email_tags div.email-tags div div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+  border-radius: 0.25rem;
+  gap: 0.25rem;
+  border: 0.0625rem solid #E9EAEB;
+  background-color: #FAFAFA;
+  padding: 0.125rem 0.5rem;
+  font-size: 0.875rem;
+  color: #414651;
+  line-height: 1.25rem;
+}
+
+/* app/views/kaui/accounts/_payment_gateways.html.erb */
+
+.payment-methods {
+  margin-top: 3rem;
+}
+
+.payment-methods .payment-methods-header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  padding: 0;
+  border-bottom: 0.0625rem solid #E9EAEB;
+}
+
+.payment-methods .payment-methods-header h2 {
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  color: #414651;
+  margin-bottom: 1.25rem;
+}
+
+.payment-methods .payment-methods-header a {
+  padding: 0;
+}
+
+.payment-methods .tag-bar button {
+  margin-top: -0.3125rem;
+}
+
+.payment-methods .info-wrapper {
+  border: none !important;
+  margin-top: 1.25rem;
+  border-bottom: 0.0625rem solid #E9EAEB !important;
+}
+
+.payment-methods .info-wrapper .toggler {
+  padding-left: 0;
+  padding-right: 0;
+  background: transparent;
+}
+
+.payment-methods .payment-method {
+  border-bottom: 0.0625rem solid #e0e0e0;
+  padding: 0.375rem 0;
+  font-family: sans-serif;
+  position: relative;
+}
+
+.payment-methods .payment-summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+  cursor: pointer;
+}
+
+.payment-methods .column {
+  min-width: 10rem;
+  flex: 1;
+}
+
+.payment-methods .column strong {
+  color: #414651 !important;
+  font-weight: 600;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem;
+  text-align: left;
+  margin-bottom: 0.25rem;
+}
+
+.payment-methods .column div {
+  color: #717680 !important;
+  font-weight: 500;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem;
+  text-align: left;
+}
+
+.payment-methods .payment-method-id {
+  display: inline-block;
+  max-width: 15rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.payment-methods .copy-icon {
+  margin-left: 0.5rem;
+  cursor: pointer;
+  color: #888;
+}
+
+.payment-methods .delete-link {
+  color: #D92D20;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  letter-spacing: 0;
+  cursor: pointer;
+  margin-right: 0.75rem;
+  text-decoration: none;
+}
+
+.payment-methods .actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.payment-methods .primary {
+  color: #A4A7AE;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  letter-spacing: 0;
+}
+
+.payment-methods .make-primary {
+  font-weight: 500;
+  color: #535862;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  letter-spacing: 0;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.payment-methods .payment-detail {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.4s ease, padding-top 0.4s ease;
+  padding-top: 0;
+}
+
+.payment-methods .toggle-checkbox:checked + .payment-summary + .payment-detail {
+  max-height: 62.5rem;
+  padding-top: 0.75rem;
+  border-top: 0.0625rem solid #E9EAEB;
+  margin-top: 0.75rem;
+}
+
+.payment-methods .action-menu-wrapper {
+  position: relative;
+  display: inline-block;
+  margin-left: 0.5rem;
+}
+
+.payment-methods .menu-trigger {
+  cursor: pointer;
+  padding: 0.25rem;
+  display: inline-block;
+}
+
+.payment-methods .menu-toggle:checked + .menu-trigger + .action-dropdown {
+  display: block;
+}
+
+.payment-methods .action-dropdown {
+  display: none;
+  position: absolute;
+  top: 1.75rem;
+  right: 0;
+  background: white;
+  border-radius: 0.75rem;
+  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.1);
+  min-width: 8.75rem;
+  z-index: 100;
+  padding: 0.5rem 0;
+}
+
+.payment-methods .action-dropdown ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.payment-methods .action-dropdown li {
+  padding: 0.625rem 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  cursor: pointer;
+}
+
+.payment-methods .action-dropdown li:hover {
+  background-color: #f5f5f5;
+}
+
+.payment-methods .action-dropdown a {
+  text-decoration: none;
+  color: #4a4a4a;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.payment-methods .action-dropdown i {
+  font-size: 1rem;
+}
+
+.payment-methods .menu-toggle:checked ~ .dropdown-overlay {
+  display: block;
+}
+
+.payment-methods .dropdown-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 99;
+  background: transparent;
+  cursor: default;
+}
+
+.payment-methods .menu-toggle:checked + .menu-trigger + .dropdown-overlay + .action-dropdown {
+  display: block;
+}
+
+.payment-methods .payment-method-details .detail-item {
+  margin-bottom: 1rem;
+}
+
+.payment-methods .payment-method-details .detail-item b {
+  display: block;
+  margin-bottom: 0.25rem;
+  color: #414651 !important;
+  font-weight: 600;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem;
+  text-align: left;
+}
+
+.payment-methods .payment-method-details .detail-item span {
+  display: block;
+  color: #717680 !important;
+  font-weight: 400;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem;
+  text-align: left;
+}
+
+.payment-methods .dots-menu {
+  padding: 0 !important;
+  background-color: transparent !important;
+  border: none !important;
+  margin-left: 0.75rem !important;
+}
+
+.payment-methods .dots-menu:hover {
+  background-color: transparent !important;
+}
+
+/* app/views/kaui/custom_fields/_list_bar.html.erb */
+
+.list-bar-custom-fields strong {
+  font-weight: 600;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  letter-spacing: 0;
+  color: #414651;
+}
+.list-bar-custom-fields .tag-select-box label {
+  margin: 0;
+  margin-bottom: 0.25rem;
+}
+
+.list-bar-custom-fields .tag-description {
+  border-radius: 0.25rem;
+  background-color: #FAFAFA;
+  padding: 0.125rem 0.5rem;
+  margin: 0 0.25rem;
+  font-weight: 500;
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  letter-spacing: 0;
+  text-align: center;
+  color: #717680;
+  border: 0.0625rem solid #F5F5F5;
+}
+
+/* app/views/kaui/charges/new.html.erb */
+
+.add-new-charge-modal .add-account-title {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  letter-spacing: 0;
+  color: #1B1C1E;
+  padding: 1rem 0;
+  margin-bottom: 1.5rem;
+}
+
+.add-new-charge-modal .icon-container {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: 0.0625rem solid #D5D7DA;
+  border-radius: 0.375rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.25rem;
+}
+
+.add-new-charge-modal .icon-container img {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* app/views/kaui/charges/_form.html.erb */
+
+.add-new-charge-modal .control-label {
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+  line-height: 1.25rem !important;
+  color: #414651 !important;
+}
+
+.add-new-charge-modal .question-circle {
+  color: #A4A7AE;
+  font-size: 1rem;
+  width: 1rem;
+  height: 1rem;
+  display: inline-block;
+  line-height: 1rem;
+  text-align: center;
+}
+
+.add-new-charge-modal .col-sm-9.position-relative a {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+
+.add-new-charge-modal .form-group.d-flex.pb-3 .form-control {
+  height: 2.5rem;
+  border-radius: 0.375rem;
+}
+
+.add-new-charge-modal .form-group.d-flex .form-control:focus {
+  outline: none;
+  box-shadow: none;
+  border: 0.0625rem solid #1A73E8;
+}
+
+.add-new-charge-modal .form-group select.form-control {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 6L8 10L12 6" stroke="%23A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+  background-repeat: no-repeat;
+  background-position: right 0.625rem center;
+  background-size: 1rem 1rem;
+  padding-right: 1.875rem;
+}
+
+.add-new-charge-modal select.form-control:focus {
+  box-shadow: none;
+  outline: none;
+}
+
+.add-new-charge-modal .checkbox label {
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #414651;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.add-new-charge-modal .form-group.d-flex .input-group input {
+  border-right: 0 !important;
+  border-radius: 0.375rem 0 0 0.375rem !important;
+}
+
+.add-new-charge-modal .form-group.d-flex .input-group select {
+  border-left: 0 !important;
+  border-radius: 0 0.375rem 0.375rem 0 !important;
+}
+
+/* app/views/kaui/credits/new.html.erb */
+
+.add-new-credit-modal .add-account-title {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  letter-spacing: 0;
+  color: #1B1C1E;
+  padding: 1rem 0;
+  margin-bottom: 1.5rem;
+}
+
+.add-new-credit-modal .icon-container {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: 0.0625rem solid #D5D7DA;
+  border-radius: 0.375rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.25rem;
+}
+
+.add-new-credit-modal .icon-container img {
+  width: 1rem;
+  height: 1rem;
+}
+
+.add-new-credit-modal .control-label {
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+  line-height: 1.25rem !important;
+  color: #414651 !important;
+}
+
+.add-new-credit-modal .question-circle {
+  color: #A4A7AE;
+  font-size: 1rem;
+  width: 1rem;
+  height: 1rem;
+  display: inline-block;
+  line-height: 1rem;
+  text-align: center;
+}
+
+.add-new-credit-modal .col-sm-9.position-relative a {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+
+.add-new-credit-modal .form-group.d-flex.pb-3 .form-control {
+  height: 2.5rem;
+  border-radius: 0.375rem;
+}
+
+.add-new-credit-modal .form-group.d-flex .form-control:focus {
+  outline: none;
+  box-shadow: none;
+  border: 0.0625rem solid #1A73E8;
+}
+
+.add-new-credit-modal .form-group select.form-control {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 6L8 10L12 6" stroke="%23A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+  background-repeat: no-repeat;
+  background-position: right 0.625rem center;
+  background-size: 1rem 1rem;
+
+  padding-right: 1.875rem;
+  /* To make space for the arrow */
+}
+
+.add-new-credit-modal select.form-control:focus {
+  box-shadow: none;
+  outline: none;
+}
+
+.add-new-credit-modal .checkbox label {
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #414651;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.add-new-credit-modal .form-group.d-flex .input-group input {
+  border-right: 0 !important;
+  border-radius: 0.375rem 0 0 0.375rem !important;
+}
+
+.add-new-credit-modal .form-group.d-flex .input-group select.currency-select {
+  border-left: 0;
+  border-radius: 0 0.375rem 0.375rem 0 !important;
+}
+
+/* app/views/kaui/account_emails/new.html.erb */
+
+.add-new-account-email-modal .add-account-title {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  letter-spacing: 0;
+  color: #1B1C1E;
+  padding: 1rem 0;
+  margin-bottom: 1.5rem;
+}
+
+.add-new-account-email-modal .icon-container {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: 0.0625rem solid #D5D7DA;
+  border-radius: 0.375rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.25rem;
+}
+
+.add-new-account-email-modal .icon-container img {
+  width: 1rem;
+  height: 1rem;
+}
+
+.add-new-account-email-modal .control-label {
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+  line-height: 1.25rem !important;
+  color: #414651 !important;
+}
+
+.add-new-account-email-modal .question-circle {
+  color: #A4A7AE;
+  font-size: 1rem;
+  width: 1rem;
+  height: 1rem;
+  display: inline-block;
+  line-height: 1rem;
+  text-align: center;
+}
+
+.add-new-account-email-modal .col-sm-9.position-relative a {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+
+.add-new-account-email-modal .form-group.d-flex.pb-3 .form-control {
+  height: 2.5rem;
+  border-radius: 0.375rem;
+}
+
+.add-new-account-email-modal .form-group.d-flex .form-control:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.add-new-account-email-modal .checkbox label {
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #414651;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+/* app/views/kaui/payment_methods/new.html.erb */
+
+.add-new-payment-method-modal .add-account-title {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  letter-spacing: 0;
+  color: #1B1C1E;
+  padding: 1.5rem 0;
+}
+
+.add-new-payment-method-modal .icon-container {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: 0.0625rem solid #D5D7DA;
+  border-radius: 0.375rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.25rem;
+}
+
+.add-new-payment-method-modal .icon-container img {
+  width: 1rem;
+  height: 1rem;
+}
+
+.add-new-payment-method-modal .control-label {
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+  line-height: 1.25rem !important;
+  color: #414651 !important;
+}
+
+.add-new-payment-method-modal .question-circle {
+  color: #A4A7AE;
+  font-size: 1rem;
+  width: 1rem;
+  height: 1rem;
+  display: inline-block;
+  line-height: 1rem;
+  text-align: center;
+}
+
+.add-new-payment-method-modal .col-sm-9.position-relative a {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+
+.add-new-payment-method-modal .form-group.d-flex.pb-3 .form-control {
+  height: 2.5rem;
+  border-radius: 0.375rem;
+}
+
+.add-new-payment-method-modal .form-group.d-flex .form-control:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.add-new-payment-method-modal .checkbox label {
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #414651;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.add-new-payment-method-modal .payment-method-form .dots-menu {
+  padding: 0 !important;
+  background-color: transparent !important;
+  border: none !important;
+  text-decoration: none !important;
+  color: #175CD3 !important;
+  margin-bottom: 1rem;
+}
+
+.add-new-payment-method-modal .payment-method-form table {
+  border: 0 !important;
+}
+
+.add-new-payment-method-modal .payment-method-form table thead th {
+  color: #717680;
+  font-weight: 500 !important;
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  background: #FAFAFA !important;
+}
+
+.add-new-payment-method-modal .payment-method-form table thead th:first-child {
+  border-top-left-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+}
+
+.add-new-payment-method-modal .payment-method-form table thead th:last-child {
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+}
+
+.add-new-payment-method-modal .payment-method-form table thead tr th {
+  padding: 0.3125rem 0.75rem;
+}
+
+.add-new-payment-method-modal .payment-method-form table tbody tr td {
+  padding: 0.3125rem 0.75rem;
+}
+
+.add-new-payment-method-modal .payment-method-form hr {
+  margin: 0;
+}
+
+/* app/views/kaui/transactions/new.html.erb */
+
+.process-transaction-modal .add-account-title {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  letter-spacing: 0;
+  color: #1B1C1E;
+  padding: 1.5rem 0;
+}
+
+.process-transaction-modal .icon-container {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: 0.0625rem solid #D5D7DA;
+  border-radius: 0.375rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.25rem;
+}
+
+.process-transaction-modal .icon-container img {
+  width: 1rem;
+  height: 1rem;
+}
+
+.process-transaction-modal .control-label {
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+  line-height: 1.25rem !important;
+  color: #414651 !important;
+}
+
+.process-transaction-modal .question-circle {
+  color: #A4A7AE;
+  font-size: 1rem;
+  width: 1rem;
+  height: 1rem;
+  display: inline-block;
+  line-height: 1rem;
+  text-align: center;
+}
+
+.process-transaction-modal .col-sm-9.position-relative a {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+
+.process-transaction-modal .form-group.d-flex.pb-3 .form-control {
+  height: 2.5rem;
+  border-radius: 0.375rem;
+}
+
+.process-transaction-modal .form-group.d-flex .form-control:focus {
+  outline: none;
+  box-shadow: none;
+  border: 0.0625rem solid #1A73E8;
+}
+
+.process-transaction-modal .form-group select.form-control {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 6L8 10L12 6" stroke="%23A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+  background-repeat: no-repeat;
+  background-position: right 0.625rem center;
+  background-size: 1rem 1rem;
+  padding-right: 1.875rem;
+}
+
+.process-transaction-modal select.form-control:focus {
+  box-shadow: none;
+  outline: none;
+}
+
+.process-transaction-modal .checkbox label {
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #414651;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.process-transaction-modal .form-group.d-flex .input-group input {
+  border-right: 0;
+}
+
+.process-transaction-modal .form-group.d-flex .input-group select.currency-select {
+  border-left: 0;
+  border-radius: 0 0.375rem 0.375rem 0 !important;
+}
+
+.process-transaction-modal .payment-method-form .dots-menu {
+  padding: 0 !important;
+  background-color: transparent !important;
+  border: none !important;
+  text-decoration: none !important;
+  color: #175CD3 !important;
+  margin-bottom: 1rem;
+}
+
+.process-transaction-modal .payment-method-form table {
+  border: 0 !important;
+  margin-bottom: 0;
+}
+
+.process-transaction-modal .payment-method-form table tr:last-of-type {
+  border-color: #ccc !important;
+}
+
+.process-transaction-modal .payment-method-form .table>:not(:last-child)>:last-child>* {
+  border-bottom-color: transparent !important;
+}
+
+.process-transaction-modal .payment-method-form table thead th {
+  color: #717680;
+  font-weight: 500 !important;
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  background: #FAFAFA !important;
+  text-transform: capitalize;
+}
+
+.process-transaction-modal .payment-method-form table thead th:first-child {
+  border-top-left-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+}
+
+.process-transaction-modal .payment-method-form table thead th:last-child {
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+}
+
+.process-transaction-modal .payment-method-form table thead tr th {
+  padding: 0.3125rem 0.75rem;
+}
+
+.process-transaction-modal .payment-method-form table tbody tr td {
+  padding: 0.3125rem 0.75rem;
+}
+
+.process-transaction-modal .payment-method-form hr {
+  margin: 0;
+}
+
+.process-transaction-modal .payment-method-form .close-icon {
+  padding: 0;
+  text-align: center;
+  align-items: center;
+}
+
+.process-transaction-modal .payment-method-form .close-icon a svg {
+  height: 3.125rem;
+}
+
+
+
 
-/*# sourceMappingURL=account.css.map */