kaui 3.0.9 → 4.0.0

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

@@ -1,514 +1,691 @@
 /*
  * Basic & Common
  */
-@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300);
 body {
   background: #f9f9f9;
   animation: all 0.5s;
-  font-family: "Lato", sans-serif;
+  font-family: "Inter", sans-serif !important;
   color: #777777;
-  padding-bottom: 50px; }
+  min-height: 100%;
+  padding-bottom: 0 !important;
+  width: 100%;
+  -webkit-font-smoothing: antialiased;
+}
 
-h1, h2, h3 {
-  margin: 0 0 20px;
-  font-family: "Lato", sans-serif; }
+h1,
+h2,
+h3 {
+  margin: 0 0 1.25rem;
+  font-family: "Inter", sans-serif !important;
+}
 
 h1 {
-  font-size: 18px;
+  font-size: 1.125rem;
   color: #e44c3a;
   text-transform: capitalize;
   line-height: 1.333;
-  padding: 0 30px 10px;
-  border-bottom: 1px solid #ccc;
-  font-weight: 700; }
+  padding: 0 1.875rem 0.625rem;
+  border-bottom: 0.0625rem solid #ccc;
+  font-weight: 700;
+}
 
 h2 {
-  font-size: 20px;
+  font-size: 1.25rem;
   color: #313131;
   line-height: 1.5;
-  text-align: center; }
+  text-align: center;
+}
 
 h3 {
-  font-size: 16px;
+  font-size: 1rem;
   color: #313131;
   line-height: 1.5;
-  text-align: center; }
+  text-align: center;
+}
 
 p {
-  font-size: 14px;
+  font-size: 0.875rem;
   color: #999;
-  line-height: 20px;
+  line-height: 1.25rem;
   text-align: left;
-  margin: 0 0 20px;
-  font-weight: 700; }
-  p span {
-    font-size: 14px;
-    margin: 0 10px; }
-  p.title-align {
-    padding-left: 30px; }
+  margin: 0 0 1.25rem;
+  font-weight: 700;
+}
+p span {
+  font-size: 0.875rem;
+  margin: 0 0.625rem;
+}
+p.title-align {
+  padding-left: 1.875rem;
+}
 
 a {
   color: #00919d;
-  transition: all 0.3s; }
-  a:hover {
-    text-decoration: none;
-    color: #00626a; }
-  a .fa-times {
-    color: #e44c3a; }
-    a .fa-times:hover {
-      color: #cf2f1c; }
-
-span.success, span.fail {
+  transition: all 0.3s;
+}
+a:hover {
+  text-decoration: none;
+  color: #00626a;
+}
+a .fa-times {
+  color: #e44c3a;
+}
+a .fa-times:hover {
+  color: #cf2f1c;
+}
+
+span.success,
+span.fail {
   display: inline-block;
-  font-size: 14px;
+  font-size: 0.875rem;
   color: #fff;
   font-weight: 400;
-  padding: 0px 10px;
-  background-color: #df4232; }
+  padding: 0 0.625rem;
+  background-color: #df4232;
+}
 span.success {
-  background-color: #5eca8f; }
+  background-color: #5eca8f;
+}
 span.label {
-  font-size: 14px;
-  line-height: 20px;
-  padding: 0 5px;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  padding: 0 0.3125rem;
   display: inline-block;
   font-weight: normal;
-  color: #777777; }
-  span.label.label-default, span.label.label-success, span.label.label-warning, span.label.label-danger {
-    color: #fff; }
+  color: #777777;
+}
+span.label.label-default,
+span.label.label-success,
+span.label.label-warning,
+span.label.label-danger {
+  color: #fff;
+}
 
-input, textarea, select {
-  border: 1px solid #cccccc;
+input,
+textarea,
+select {
+  border: 0.0625rem solid #cccccc;
   border-radius: 0;
   background: #fff;
-  line-height: 28px;
-  height: 30px;
-  font-size: 14px;
-  padding: 0 5px;
-  outline-color: #7dc7cd; }
-  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder, select::-webkit-input-placeholder {
-    color: #aaaaaa;
-    font-weight: strong;
-    font-style: italic; }
-  input:-moz-placeholder, textarea:-moz-placeholder, select:-moz-placeholder {
-    /* Firefox 18- */
-    color: #aaaaaa;
-    font-weight: strong;
-    font-style: italic; }
-  input::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder {
-    /* Firefox 19+ */
-    color: #aaaaaa;
-    font-weight: strong;
-    font-style: italic; }
-  input:-ms-input-placeholder, textarea:-ms-input-placeholder, select:-ms-input-placeholder {
-    color: #aaaaaa;
-    font-weight: strong;
-    font-style: italic; }
-
-input[type=radio], input[type=checkbox] {
-  height: 15px;
-  line-height: 30px; }
+  line-height: 1.75rem;
+  height: 1.875rem;
+  font-size: 0.875rem;
+  padding: 0 0.3125rem;
+  outline-color: #7dc7cd;
+}
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder,
+select::-webkit-input-placeholder {
+  color: #aaaaaa;
+  font-weight: strong;
+  font-style: italic;
+}
+input:-moz-placeholder,
+textarea:-moz-placeholder,
+select:-moz-placeholder {
+  /* Firefox 18- */
+  color: #aaaaaa;
+  font-weight: strong;
+  font-style: italic;
+}
+input::-moz-placeholder,
+textarea::-moz-placeholder,
+select::-moz-placeholder {
+  /* Firefox 19+ */
+  color: #aaaaaa;
+  font-weight: strong;
+  font-style: italic;
+}
+input:-ms-input-placeholder,
+textarea:-ms-input-placeholder,
+select:-ms-input-placeholder {
+  color: #aaaaaa;
+  font-weight: strong;
+  font-style: italic;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+  height: 0.9375rem;
+  line-height: 1.875rem;
+}
 
 textarea {
-  line-height: 16px; }
+  line-height: 1rem;
+}
 
-button, input[type="submit"] {
+button,
+input[type="submit"] {
   background: #00919d;
   color: #fff;
   text-transform: uppercase;
-  font-size: 12px;
-  padding: 10px 30px;
-  border-radius: 14px;
-  line-height: 12px;
+  font-size: 0.75rem;
+  padding: 0.625rem 1.875rem;
+  border-radius: 0.875rem;
+  line-height: 0.75rem;
   border: 0;
-  transition: all 0.5s; }
-  button:hover, input[type="submit"]:hover {
-    background: #00626a;
-    color: #fff; }
+  transition: all 0.5s;
+}
+button:hover,
+input[type="submit"]:hover {
+  background: #00626a;
+  color: #fff;
+}
 
 label {
   cursor: pointer;
   font-size: 100%;
   color: #585858;
   text-transform: none;
-  font-weight: normal; }
+  font-weight: normal;
+}
 
 hr {
-  border-color: #ccc; }
+  border-color: #ccc;
+}
 
 table {
   width: 100%;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 300;
-  border: 1px solid #f3f3f3;
-  padding: 0 60px; }
-  @media (max-width: 768px) {
-    table {
-      padding: 0 5px; } }
+  border: 0.0625rem solid #f3f3f3;
+  padding: 0 3.75rem;
+}
+@media (max-width: 48rem) {
+  table {
+    padding: 0 0.3125rem;
+  }
+}
+table th {
+  background: #f3f3f3;
+  color: #989898;
+  font-size: 0.875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  padding: 0.625rem 1.25rem;
+}
+@media (max-width: 48rem) {
   table th {
-    background: #f3f3f3;
-    color: #989898;
-    font-size: 14px;
-    font-weight: 700;
-    text-transform: uppercase;
-    padding: 10px 20px; }
-    @media (max-width: 768px) {
-      table th {
-        padding: 5px;
-        word-break: break-word; } }
-  table tr {
-    border-bottom: 1px solid #f3f3f3; }
-    table tr:last-of-type {
-      border: 0; }
+    padding: 0.3125rem;
+    word-break: break-word;
+  }
+}
+table tr {
+  border-bottom: 0.0625rem solid #f3f3f3;
+}
+table tr:last-of-type {
+  border: 0;
+}
+table td {
+  padding: 1.25rem;
+}
+@media (max-width: 48rem) {
   table td {
-    padding: 20px; }
-    @media (max-width: 768px) {
-      table td {
-        padding: 5px;
-        word-break: break-word; } }
+    padding: 0.3125rem;
+    word-break: break-word;
+  }
+}
+table.mobile-data > span {
+  display: none;
+}
+@media (max-width: 48rem) {
+  table.mobile-data {
+    padding: 0;
+    display: block;
+    line-height: 0;
+    position: relative;
+    font-size: 0;
+    margin-bottom: 1.25rem;
+  }
   table.mobile-data > span {
-    display: none; }
-  @media (max-width: 768px) {
-    table.mobile-data {
-      padding: 0;
-      display: block;
-      line-height: 0;
-      position: relative;
-      font-size: 0;
-      margin-bottom: 20px; }
-      table.mobile-data > span {
-        display: block;
-        font-size: 40px;
-        position: absolute;
-        right: 0;
-        bottom: -40px;
-        cursor: pointer;
-        color: #ccc;
-        z-index: 10; }
-        table.mobile-data > span.left {
-          right: auto;
-          left: 0; }
-        table.mobile-data > span.center {
-          font-size: 20px;
-          text-align: center;
-          width: 100%;
-          bottom: -20px;
-          z-index: 5; }
-      table.mobile-data tbody {
-        display: inline-block;
-        font-size: 0;
-        width: 50%; }
-      table.mobile-data thead {
-        display: inline-block;
-        width: 50%; }
-      table.mobile-data tr {
-        display: none;
-        line-height: initial;
-        width: 100%; }
-      table.mobile-data tr:first-of-type {
-        display: inline-block; }
-        table.mobile-data tr:first-of-type th, table.mobile-data tr:first-of-type td {
-          width: 100% !important;
-          box-sizing: border-box; }
-      table.mobile-data td, table.mobile-data th {
-        padding: 5px;
-        display: block;
-        width: 100%;
-        word-break: break-word; } }
-  table.transparent {
-    border: 0;
-    background-color: transparent; }
-    table.transparent th, table.transparent td, table.transparent tr {
-      border: 0;
-      background-color: transparent; }
-    table.transparent th {
-      font-weight: 700;
-      text-transform: none;
-      color: #585858; }
-    table.transparent th, table.transparent td {
-      padding: 5px; }
-      @media (max-width: 768px) {
-        table.transparent th, table.transparent td {
-          padding: 2px;
-          font-size: 10px; } }
-    table.transparent td {
-      font-weight: normal;
-      color: #777777; }
+    display: block;
+    font-size: 2.5rem;
+    position: absolute;
+    right: 0;
+    bottom: -2.5rem;
+    cursor: pointer;
+    color: #ccc;
+    z-index: 10;
+  }
+  table.mobile-data > span.left {
+    right: auto;
+    left: 0;
+  }
+  table.mobile-data > span.center {
+    font-size: 1.25rem;
+    text-align: center;
+    width: 100%;
+    bottom: -1.25rem;
+    z-index: 5;
+  }
+  table.mobile-data tbody {
+    display: inline-block;
+    font-size: 0;
+    width: 50%;
+  }
+  table.mobile-data thead {
+    display: inline-block;
+    width: 50%;
+  }
+  table.mobile-data tr {
+    display: none;
+    line-height: initial;
+    width: 100%;
+  }
+  table.mobile-data tr:first-of-type {
+    display: inline-block;
+  }
+  table.mobile-data tr:first-of-type th,
+  table.mobile-data tr:first-of-type td {
+    width: 100% !important;
+    box-sizing: border-box;
+  }
+  table.mobile-data td,
+  table.mobile-data th {
+    padding: 0.3125rem;
+    display: block;
+    width: 100%;
+    word-break: break-word;
+  }
+}
+table.transparent {
+  border: 0;
+  background-color: transparent;
+}
+table.transparent th,
+table.transparent td,
+table.transparent tr {
+  border: 0;
+  background-color: transparent;
+}
+table.transparent th {
+  font-weight: 700;
+  text-transform: none;
+  color: #585858;
+}
+table.transparent th,
+table.transparent td {
+  padding: 0.3125rem;
+}
+@media (max-width: 48rem) {
+  table.transparent th,
+  table.transparent td {
+    padding: 0.125rem;
+    font-size: 0.625rem;
+  }
+}
+table.transparent td {
+  font-weight: normal;
+  color: #777777;
+}
 
 table.transparent {
-  margin-bottom: 30px; }
-  @media (max-width: 768px) {
-    table.transparent th {
-      width: 40%;
-      word-break: break-all; }
-    table.transparent td {
-      width: 60%;
-      word-break: break-all; } }
+  margin-bottom: 1.875rem;
+}
+@media (max-width: 48rem) {
+  table.transparent th {
+    width: 40%;
+    word-break: break-all;
+  }
+  table.transparent td {
+    width: 60%;
+    word-break: break-all;
+  }
+}
 
 table.subtitle {
-  margin-bottom: 10px; }
-  table.subtitle th, table.subtitle td {
-    padding-left: 0 !important; }
+  margin-bottom: 0.625rem;
+}
+table.subtitle th,
+table.subtitle td {
+  padding-left: 0 !important;
+}
 
 .container {
-  max-width: 1200px;
+  max-width: 75rem;
   width: 100%;
-  margin: 0 auto; }
+  margin: 0 auto;
+}
 
 .text-uppercase {
-  text-transform: uppercase; }
+  text-transform: uppercase;
+}
 
 .text-capitalize {
-  text-transform: capitalize; }
+  text-transform: capitalize;
+}
+
+.dataTables_empty {
+  text-align: left;
+}
+
+.max-text-container {
+  max-width: 80rem;
+  text-align: center;
+  margin: 0;
+  color: #1570ef; 
+}
 
 .column-block {
-  padding: 30px 15px;
-  border-radius: 20px;
-  border: 1px solid #ccc;
+  padding: 1.875rem 0.9375rem;
+  border-radius: 1.25rem;
+  border: 0.0625rem solid #ccc;
   background: #fff;
   width: 100%;
-  margin-bottom: 50px; }
-  .column-block.square {
-    border-radius: 0;
-    box-shadow: 1px 3px 1px rgba(0, 0, 0, 0.11);
-    border: 0; }
+  margin-bottom: 3.125rem;
+}
+.column-block.square {
+  border-radius: 0;
+  box-shadow: 0.0625rem 0.188rem 0.0625rem rgba(0, 0, 0, 0.11);
+  border: 0;
+}
 
 .info-wrapper {
-  border: 1px solid #ccc; }
+  border: 0.0625rem solid #ccc;
+}
 
 .fix-position {
-  padding-left: 20px; }
-  @media (max-width: 768px) {
-    .fix-position {
-      padding-left: 15px; } }
+  padding-left: 1.25rem;
+}
+@media (max-width: 48rem) {
+  .fix-position {
+    padding-left: 0.9375rem;
+  }
+}
 
-@media (max-width: 768px) {
+@media (max-width: 48rem) {
   > .row > .col-md-5 {
-    padding: 0 15px 0 25px; } }
+    padding: 0 0.9375rem 0 1.5625rem;
+  }
+}
 
 .toggler {
-  border-bottom: 1px solid #ddd;
-  padding: 0 25px;
-  font-size: 14px;
-  line-height: 50px;
-  max-height: 50px;
+  border-bottom: 0.0625rem solid #ddd;
+  padding: 0 1.5625rem;
+  font-size: 0.875rem;
+  line-height: 3.125rem;
+  max-height: 3.625rem;
   overflow: hidden;
-  transition: all 0.5s; }
-  @media (max-width: 768px) {
-    .toggler {
-      padding: 0 10px; } }
-  .toggler:last-of-type {
-    border: 0; }
-  .toggler:hover {
-    background-color: #f9f9f9; }
-  .toggler.toggled {
-    background-color: #f9f9f9;
-    max-height: 1500px; }
-    .toggler.toggled .first-line {
-      font-weight: 900; }
-      .toggler.toggled .first-line > .fa-caret-down {
-        display: none; }
-      .toggler.toggled .first-line > .fa-caret-up {
-        display: inline-block; }
-  .toggler .fa-star {
-    color: #00919d; }
+  transition: all 0.5s;
+}
+@media (max-width: 48rem) {
+  .toggler {
+    padding: 0 0.625rem;
+  }
+}
+.toggler:last-of-type {
+  border: 0;
+}
+.toggler:hover {
+  background-color: #f9f9f9;
+}
+.toggler.toggled {
+  background-color: #f9f9f9;
+  max-height: 93.75rem;
+}
+.toggler.toggled .first-line {
+  font-weight: 900;
+}
+.toggler.toggled .first-line > .fa-caret-down {
+  display: none;
+}
+.toggler.toggled .first-line > .fa-caret-up {
+  display: inline-block;
+}
+.toggler .fa-star {
+  color: #00919d;
+}
+.toggler .first-line {
+  cursor: pointer;
+}
+@media (max-width: 48rem) {
   .toggler .first-line {
-    cursor: pointer; }
-    @media (max-width: 768px) {
-      .toggler .first-line {
-        font-size: 12px; } }
-    .toggler .first-line > .fa-caret-down {
-      float: right;
-      margin-left: 30px;
-      display: inline-block;
-      line-height: 50px;
-      color: #999; }
-    .toggler .first-line > .fa-caret-up {
-      float: right;
-      margin-left: 30px;
-      display: none;
-      line-height: 50px;
-      color: #999; }
-    .toggler .first-line a {
-      float: right;
-      margin-left: 30px; }
-      .toggler .first-line a.default-payment-method, .toggler .first-line a.non-default-payment-method {
-        float: left;
-        margin-left: 0;
-        margin-right: 10px; }
+    font-size: 0.75rem;
+  }
+}
+.toggler .first-line > .fa-caret-down {
+  float: right;
+  margin-left: 1.875rem;
+  display: inline-block;
+  line-height: 3.125rem;
+  color: #999;
+}
+.toggler .first-line > .fa-caret-up {
+  float: right;
+  margin-left: 1.875rem;
+  display: none;
+  line-height: 3.125rem;
+  color: #999;
+}
+.toggler .first-line a {
+  float: right;
+  margin-left: 1.875rem;
+}
+.toggler .first-line a.default-payment-method,
+.toggler .first-line a.non-default-payment-method {
+  float: left;
+  margin-left: 0;
+  margin-right: 0.625rem;
+}
+.toggler .expires {
+  float: right;
+}
+@media (max-width: 48rem) {
   .toggler .expires {
-    float: right; }
-    @media (max-width: 768px) {
-      .toggler .expires {
-        display: none; } }
+    display: none;
+  }
+}
+.toggler .toggle .actions {
+  margin: 0 -1.5625rem;
+  padding: 0 1.5625rem;
+  text-align: center;
+  border-bottom: 0.0625rem solid #ccc;
+  margin-bottom: 1.875rem;
+}
+@media (max-width: 48rem) {
   .toggler .toggle .actions {
-    margin: 0 -25px;
-    padding: 0 25px;
+    margin: 0 -0.625rem;
+    padding: 0 0.625rem;
+  }
+}
+.toggler .toggle .actions a {
+  margin: 0 0.3125rem;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+}
+.toggler .toggle .actions a i {
+  margin: 0 0.3125rem 0 0;
+}
+@media (max-width: 48rem) {
+  .toggler .toggle .actions a {
+    width: 32%;
+    display: inline-block;
     text-align: center;
-    border-bottom: 1px solid #ccc;
-    margin-bottom: 30px; }
-    @media (max-width: 768px) {
-      .toggler .toggle .actions {
-        margin: 0 -10px;
-        padding: 0 10px; } }
-    .toggler .toggle .actions a {
-      margin: 0 5px;
-      text-transform: uppercase;
-      font-size: 12px; }
-      .toggler .toggle .actions a i {
-        margin: 0 5px 0 0; }
-      @media (max-width: 768px) {
-        .toggler .toggle .actions a {
-          width: 32%;
-          display: inline-block;
-          text-align: center;
-          margin: 0;
-          font-size: 10px; } }
-  .toggler .toggle table {
-    line-height: initial;
-    margin: 0 0 30px; }
+    margin: 0;
+    font-size: 0.625rem;
+  }
+}
+.toggler .toggle table {
+  line-height: initial;
+  margin: 0 0 1.875rem;
+}
 
 .filter-select {
-  margin: 10px 20px 30px 0; }
+  margin: 0.625rem 1.25rem 1.875rem 0;
+}
 
 hr.breathe {
-  margin-top: 45px;
-  margin-bottom: 45px; }
+  margin-top: 2.8125rem;
+  margin-bottom: 2.8125rem;
+}
 
 form[id^="new_tag_definition"] div:first-of-type {
-  margin-bottom: 0; }
+  margin-bottom: 0;
+}
 form[id^="new_tag_definition"] #object_types div {
-  margin-bottom: 15px; }
-  form[id^="new_tag_definition"] #object_types div .tag-definition-add-link {
-    padding-right: 0; }
-  form[id^="new_tag_definition"] #object_types div .tag-definition-select {
-    display: inline-block;
-    width: calc(unquote("100% - 25px")); }
+  margin-bottom: 0.9375rem;
+}
+form[id^="new_tag_definition"] #object_types div .tag-definition-add-link {
+  padding-right: 0;
+}
+form[id^="new_tag_definition"] #object_types div .tag-definition-select {
+  display: inline-block;
+  width: calc(unquote("100% - 1.5625rem"));
+}
 
 /* The switch - the box around the slider */
 .switch-half-container {
-  padding-top: 9px !important; }
+  padding-top: 0.5625rem !important;
+}
 
 .switch-half {
   position: relative;
   display: inline-block;
   margin-bottom: 0;
-  width: 20px;
-  height: 12px;
+  width: 1.25rem;
+  height: 0.75rem;
   /* Hide default HTML checkbox */
-  /* The slider */ }
-  .switch-half input {
-    display: none; }
-  .switch-half .slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    -webkit-transition: .4s;
-    transition: .4s; }
-  .switch-half .slider:before {
-    position: absolute;
-    content: "";
-    height: 10px;
-    width: 10px;
-    left: 1px;
-    bottom: 1px;
-    background-color: white;
-    -webkit-transition: .4s;
-    transition: .4s; }
-  .switch-half input:checked + .slider {
-    background-color: #00919d; }
-  .switch-half input:focus + .slider {
-    box-shadow: 0 0 1px #2196F3; }
-  .switch-half input:checked + .slider:before {
-    -webkit-transform: translateX(8px);
-    -ms-transform: translateX(8px);
-    transform: translateX(8px); }
+  /* The slider */
+}
+.switch-half input {
+  display: none;
+}
+.switch-half .slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+.switch-half .slider:before {
+  position: absolute;
+  content: "";
+  height: 0.625rem;
+  width: 0.625rem;
+  left: 0.0625rem;
+  bottom: 0.0625rem;
+  background-color: white;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+.switch-half input:checked + .slider {
+  background-color: #00919d;
+}
+.switch-half input:focus + .slider {
+  box-shadow: 0 0 0.0625rem #2196f3;
+}
+.switch-half input:checked + .slider:before {
+  -webkit-transform: translateX(0.5rem);
+  -ms-transform: translateX(0.5rem);
+  transform: translateX(0.5rem);
+}
 
 .switch {
   position: relative;
   display: inline-block;
-  width: 36px;
-  height: 20px;
+  width: 2.25rem;
+  height: 1.25rem;
   /* Hide default HTML checkbox */
-  /* The slider */ }
-  .switch input {
-    display: none; }
-  .switch .slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    -webkit-transition: .4s;
-    transition: .4s; }
-  .switch .slider:before {
-    position: absolute;
-    content: "";
-    height: 16px;
-    width: 16px;
-    left: 2px;
-    bottom: 2px;
-    background-color: white;
-    -webkit-transition: .4s;
-    transition: .4s; }
-  .switch input:checked + .slider {
-    background-color: #00919d; }
-  .switch input:focus + .slider {
-    box-shadow: 0 0 1px #2196F3; }
-  .switch input:checked + .slider:before {
-    -webkit-transform: translateX(16px);
-    -ms-transform: translateX(16px);
-    transform: translateX(16px); }
+  /* The slider */
+}
+.switch input {
+  display: none;
+}
+.switch .slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+.switch .slider:before {
+  position: absolute;
+  content: "";
+  height: 1rem;
+  width: 1rem;
+  left: 0.125rem;
+  bottom: 0.125rem;
+  background-color: white;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+.switch input:checked + .slider {
+  background-color: #00919d;
+}
+.switch input:focus + .slider {
+  box-shadow: 0 0 0.0625rem #2196f3;
+}
+.switch input:checked + .slider:before {
+  -webkit-transform: translateX(1rem);
+  -ms-transform: translateX(1rem);
+  transform: translateX(1rem);
+}
 
 /* Rounded sliders */
 .slider.round {
-  border-radius: 26px; }
+  border-radius: 1.625rem;
+}
 
 .slider.round:before {
-  border-radius: 50%; }
+  border-radius: 50%;
+}
 
 .ui-helper-hidden-accessible {
-  display: none; }
+  display: none;
+}
 
-.autocomplete-allowed-user, .autocomplete-override {
+.autocomplete-allowed-user,
+.autocomplete-override {
   list-style: none;
-  padding-left: 10px; }
+  padding-left: 0.625rem;
+}
 
 .plugin-suggestion {
-  white-space: nowrap; }
+  white-space: nowrap;
+}
 
 .toggle-container {
   padding-right: 0;
-  width: 55px; }
+  width: 3.4375rem;
+}
 
 .toggle-label {
-  text-align: left !important; }
+  text-align: left !important;
+}
 
 .spinner {
-  padding-top: 3.5px;
-  width: 40px;
+  padding-top: 0.21875rem;
+  width: 2.5rem;
   color: #00919d;
-  display: none; }
+  display: none;
+}
 
 .footer-notice .modal-footer {
   text-align: left;
-  padding-bottom: 0; }
-  .footer-notice .modal-footer .alert {
-    margin-bottom: 0; }
-    .footer-notice .modal-footer .alert .label-default {
-      color: white; }
+  padding-bottom: 0;
+}
+.footer-notice .modal-footer .alert {
+  margin-bottom: 0;
+}
+.footer-notice .modal-footer .alert .label-default {
+  color: white;
+}
 
 .copy-icon {
-  cursor: pointer; }
+  cursor: pointer;
+}
 
 .switch-tenant-active {
-  color: #00919d; }
+  color: #00919d;
+}
 
 /* Required for https://github.com/killbill/killbill-admin-ui/issues/262 */
 .ui-autocomplete {
@@ -516,35 +693,1201 @@ form[id^="new_tag_definition"] #object_types div {
   z-index: 1000;
   float: left;
   display: none;
-  min-width: 160px;
-  padding: 4px 0;
-  margin: 2px 0 0 0;
+  min-width: 10rem;
+  padding: 0.25rem 0;
+  margin: 0.125rem 0 0 0;
   list-style: none;
   background-color: #ffffff;
   border-color: rgba(0, 0, 0, 0.2);
   border-style: solid;
-  border-width: 1px;
-  border-radius: 5px;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  background-clip: padding-box; }
-  .ui-autocomplete .ui-menu-item {
-    display: block;
-    padding: 3px 15px;
-    clear: both;
-    font-weight: normal;
-    line-height: 18px;
-    color: #555555;
-    white-space: nowrap; }
-    .ui-autocomplete .ui-menu-item .ui-state-active, .ui-autocomplete .ui-menu-item .ui-state-hover {
-      color: #ffffff;
-      text-decoration: none;
-      background-color: #0088cc;
-      border-radius: 0px;
-      -webkit-border-radius: 0px;
-      -moz-border-radius: 0px;
-      background-image: none; }
+  border-width: 0.0625rem;
+  border-radius: 0.3125rem;
+  box-shadow: 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.2);
+  background-clip: padding-box;
+}
+.ui-autocomplete .ui-menu-item {
+  display: block;
+  padding: 0.1875rem 0.9375rem;
+  clear: both;
+  font-weight: normal;
+  line-height: 1.125rem;
+  color: #555555;
+  white-space: nowrap;
+}
+.ui-autocomplete .ui-menu-item .ui-state-active,
+.ui-autocomplete .ui-menu-item .ui-state-hover {
+  color: #ffffff;
+  text-decoration: none;
+  background-color: #0088cc;
+  border-radius: 0;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  background-image: none;
+}
 
 .ui-helper-hidden-accessible {
-  display: none; }
+  display: none;
+}
+
+.line-break-anywhere {
+  line-break: anywhere;
+}
+
+/* Updated */
+.kaui-container {
+  width: 100%;
+  margin: 0 auto;
+  padding-bottom: 0.625rem !important;
+  max-width: 80rem;
+}
+
+header {
+  border-bottom: 0 !important;
+}
+
+/* datepicker */
+
+.datepicker {
+  padding: 0 !important;
+  border-radius: 1rem !important;
+  overflow: hidden !important;
+  border: 0 !important;
+  padding: 1rem !important;
+}
+
+.datepicker .datepicker-days table {
+  border: none !important;
+}
+
+.datepicker .datepicker-days .table-condensed thead th {
+  background-color: transparent !important;
+}
+
+.datepicker-dropdown {
+  border-radius: 0.75rem;
+  box-shadow: 0rem 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
+  border: none;
+  padding: 0.75rem;
+  background: #fff;
+  font-family: 'Roboto', Arial, sans-serif;
+}
+
+.datepicker-days .datepicker-switch,
+.datepicker-months .datepicker-switch,
+.datepicker-years .datepicker-switch {
+  font-weight: 600;
+  font-size: 1rem;
+  color: #333;
+  text-align: center;
+  cursor: pointer;
+}
+
+.datepicker-days th.prev,
+.datepicker-days th.next {
+  color: #555;
+  font-size: 1.125rem;
+  cursor: pointer;
+  padding: 0 0.625rem;
+}
+
+.datepicker-days thead th.dow {
+  color: #6c6f75;
+  font-weight: 500;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  padding-bottom: 0.375rem;
+}
+
+.datepicker-days td.day {
+  padding: 1.25rem !important;
+  text-align: center;
+  line-height: 2.5rem;
+  border-radius: 50%;
+  transition: background 0.2s, color 0.2s;
+  cursor: pointer;
+  color: #717680 !important;
+  font-weight: 400 !important;
+  font-size: 1.125rem !important;
+  line-height: 1.25rem !important;
+  text-align: center;
+}
+
+.datepicker-days table tr {
+  border: none !important;
+}
+
+.datepicker-days td.day:hover {
+  background-color: #e8f0fe;
+  color: #1967d2;
+}
+
+.datepicker-days td.day.active,
+.datepicker-days td.day.active:hover {
+  background-color: #1a73e8 !important;
+  color: white !important;
+  font-weight: 500;
+}
+
+.datepicker-days td.old,
+.datepicker-days td.new {
+  color: #c0c0c0;
+}
+
+.datepicker-months span.month,
+.datepicker-years span.year {
+  display: inline-block;
+  width: 4.375rem;
+  height: 2.5rem;
+  line-height: 2.5rem;
+  text-align: center;
+  border-radius: 0.5rem;
+  margin: 0.25rem;
+  cursor: pointer;
+}
+
+.datepicker-months span.month:hover,
+.datepicker-years span.year:hover {
+  background-color: #e8f0fe;
+  color: #1967d2;
+}
+
+.datepicker-months span.focused,
+.datepicker-years span.focused {
+  background-color: #1a73e8;
+  color: #fff;
+}
+
+.datepicker table tr td,
+.datepicker table tr th {
+  border: none;
+  box-shadow: none;
+}
+
+table thead th:first-child {
+  border-top-left-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+}
+
+table thead th:last-child {
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+}
+
+.form-group select.form-control {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  background-image: url('data:image/svg+xml;utf8,<svg width="1rem" height="1rem" ... />');
+  background-repeat: no-repeat;
+  background-position: right 0.625rem center;
+  background-size: 1rem 1rem;
+  height: 2.5rem;
+  padding-right: 1.875rem;
+}
+
+#downloadCsvModal .center-input {
+  border: 0.0625rem solid #ccc;
+  border-left: none;
+  border-right: none;
+  border-radius: 0;
+  padding-right: 0;
+  padding-left: 0;
+  text-align: right;
+  height: 2.5rem;
+}
+
+#downloadCsvModal .right-input {
+  border: 0.0625rem solid #ccc;
+  border-left: none;
+  border-radius: 0 0.25rem 0.25rem 0;
+  padding-left: 0;
+  text-align: left;
+  height: 2.5rem;
+}
+
+#downloadCsvModal .dash {
+  height: 2.5rem;
+  text-align: center;
+  line-height: 2.25rem;
+  padding: 0 0.5rem;
+  border-top: 0.0625rem solid #ccc;
+  border-bottom: 0.0625rem solid #ccc;
+}
+
+#downloadCsvModal .center-input:disabled,
+#downloadCsvModal .right-input:disabled {
+  background-color: #fff;
+}
+
+#downloadCsvModal .fake-select-wrapper {
+  position: relative;
+  font-family: sans-serif;
+}
+
+#downloadCsvModal .fake-select-display {
+  display: block;
+  border: 0.0625rem solid #ccc;
+  border-right: none;
+  border-radius: 0.375rem 0 0 0.375rem;
+  padding: 0.5rem 0.75rem;
+  background: #fff;
+  cursor: pointer;
+  height: 2.5rem;
+}
+
+#downloadCsvModal .selected-single label.single-option {
+  display: none;
+  background: #e6f4ff;
+  padding: 0.1875rem 0.4375rem;
+  border-radius: 1rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+}
+
+#downloadCsvModal input[type="radio"]:checked + label.single-option {
+  display: inline-block;
+}
+
+#downloadCsvModal .fake-select-dropdown {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 0.25rem;
+  width: 100%;
+  background: #fff;
+  border-radius: 0.375rem;
+  padding: 0.25rem;
+  box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.05);
+  z-index: 10;
+}
+
+#downloadCsvModal .fake-select-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  position: relative;
+  margin-bottom: 0.125rem;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  color: #181D27;
+}
+
+#downloadCsvModal .fake-select-option:has(input[type="radio"]:checked) {
+  background: #FAFAFA;
+}
+
+#downloadCsvModal .fake-select-option:hover {
+  background-color: #f0f0f0;
+}
+
+#downloadCsvModal .fake-select-option input[type="radio"] {
+  display: none;
+}
+
+#downloadCsvModal .fake-select-option input[type="radio"]:checked + span::after {
+  content: '';
+  position: absolute;
+  right: 1rem;
+  top: 0.625rem;
+  width: 1rem;
+  height: 1rem;
+  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2716%27%20height%3D%2716%27%20viewBox%3D%270%200%2016%2016%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M13.3333%204L5.99996%2011.3333L2.66663%208%27%20stroke%3D%27%231570EF%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+#single-toggle:checked ~ .fake-select-dropdown {
+  display: block;
+}
+
+#downloadCsvModal .fake-select-option .check-icon {
+  display: none;
+  width: 1rem;
+  height: 1rem;
+  margin-left: 1rem;
+  flex-shrink: 0;
+}
+
+/* Checkmark visibility logic stays same */
+#customDate:checked ~ label[for="customDate"] ~ .fake-select-dropdown label[for="customDate"] .check-icon,
+#allData:checked ~ label[for="allData"] ~ .fake-select-dropdown label[for="allData"] .check-icon,
+#thisWeek:checked ~ label[for="thisWeek"] ~ .fake-select-dropdown label[for="thisWeek"] .check-icon,
+#thisMonth:checked ~ label[for="thisMonth"] ~ .fake-select-dropdown label[for="thisMonth"] .check-icon,
+#thisYear:checked ~ label[for="thisYear"] ~ .fake-select-dropdown label[for="thisYear"] .check-icon {
+  display: inline-block;
+}
+
+#downloadCsvModal .chip-select {
+  position: relative;
+  font-family: sans-serif;
+  margin-top: 1.25rem;
+  margin-bottom: 1.125rem;
+}
+
+#downloadCsvModal .chip-input-box {
+  display: block;
+  border: 0.0625rem solid #ccc;
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  background: #fff;
+  cursor: pointer;
+  height: 2.5rem;
+}
+
+#downloadCsvModal .chip-list {
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden;
+  gap: 0.5rem;
+}
+
+#downloadCsvModal .chip {
+  background: #FAFAFA;
+  padding: 0.125rem 0.375rem;
+  border: 0.0625rem solid #F5F5F5;
+  border-radius: 0.25rem;
+  color: #414651;
+  font-weight: 500;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  margin-top: 0.0625rem;
+  letter-spacing: 0;
+  text-align: center;
+}
+
+#downloadCsvModal input[type="checkbox"]:checked + .chip {
+  display: inline-block;
+}
+
+#downloadCsvModal .chip-dropdown {
+  display: none;
+  position: absolute;
+  padding: 0.25rem;
+  top: 100%;
+  left: 0;
+  margin-top: 0.25rem;
+  width: 100%;
+  background: #fff;
+  border-radius: 0.375rem;
+  box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.05);
+  z-index: 10;
+}
+
+#dropdown-toggle:checked ~ .chip-dropdown {
+  display: block;
+}
+
+#downloadCsvModal .chip-option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.625rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  margin-bottom: 0.125rem;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: #717680;
+}
+
+#downloadCsvModal small {
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #535862;
+}
+
+
+#downloadCsvModal .chip-option:hover {
+  background-color: #f0f0f0;
+}
+
+#downloadCsvModal .chip-option:has(input[type="checkbox"]:checked) {
+  background: #FAFAFA;
+  color: #252B37;
+}
+
+#search-labels-container:has(.label) {
+  margin-bottom: 1.5rem;
+}
+
+#search-labels-container span.label {
+  padding: 0.125rem 0.25rem !important;
+  border-radius: 0.25rem !important;
+  color: #535862 !important;
+  font-weight: 600 !important;
+  font-size: 0.75rem !important; 
+  line-height: 1.125rem !important;
+  text-align: center;
+  margin-right: 0.2rem; 
+  border: 0.0625rem solid #D5D7DA !important;
+}
+
+.upload-box {
+  position: relative;
+  border: 0.0625rem solid #E9EAEB;
+  border-radius: 0.75rem;
+  background-color: #fff;
+  text-align: center;
+  padding: 1rem 1.5rem;
+  margin: 1.5rem 0 1rem 0;
+  cursor: pointer;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.upload-box:hover {
+  border-color: #175CD3;
+  background-color: #f8fafc;
+}
+
+.upload-content {
+  position: relative;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.upload-content img {
+  width: 2.5rem;
+  opacity: 0.75;
+  margin-bottom: 0.625rem;
+}
+
+.upload-content p {
+  color: #535862;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  margin: 0;
+  text-align: center;
+}
+
+.upload-content span.highlight {
+  color: #175CD3;
+  font-weight: 500;
+  margin: 0;
+}
+
+.upload-box input[type="file"] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 2;
+}
+
+.file-name {
+  margin-top: 0.5rem;
+  font-size: 0.8125rem;
+  color: #64748B;
+  font-weight: 400;
+  pointer-events: none;
+}
+
+.upload-box::after {
+  content: attr(data-file);
+  display: block;
+  margin-top: 0.5rem;
+  font-size: 0.8125rem;
+  color: #64748B;
+  font-weight: 400;
+}
+.error-title {
+  font-size: 1rem;
+  line-height: 1.5;
+  color: #252B37;
+  margin-bottom: 0;
+  text-align: left;
+}
+
+.custom-alert {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.875rem 1.125rem;
+  margin: 0.625rem 0;
+  border-radius: 0.375rem;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  line-height: 1.5;
+  box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.1);
+  animation: fadeInUp 0.4s ease;
+}
+
+.max-width-148 {
+  max-width: 9.25rem;
+}
+
+.custom-alert i {
+  font-size: 1.125rem;
+}
+
+.custom-alert ul {
+  margin: 0;
+  padding-left: 1.25rem;
+}
+
+.custom-alert-danger {
+  background: #ffe5e5;
+  color: #b02a37;
+  border-left: 0.3125rem solid #dc3545;
+}
+
+.custom-alert-warning {
+  background: #fff4e5;
+  color: #b76e00;
+  border-left: 0.3125rem solid #ffc107;
+}
+
+.custom-alert-info {
+  background: #e5f4ff;
+  color: #055160;
+  border-left: 0.3125rem solid #0dcaf0;
+}
+
+.custom-alert-success {
+  background: #e5ffe9;
+  color: #0f5132;
+  border-left: 0.3125rem solid #198754;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 1.75rem;
+  color: inherit;
+  cursor: pointer;
+  padding: 0;
+  padding-top: 0.3125rem;
+  transition: transform 0.2s;
+}
+
+.close-btn:hover {
+  background-color: transparent;
+  color: inherit;
+  transform: scale(1.2);
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(0.625rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Custom Tooltip Styles */
+.custom-tooltip {
+  position: absolute;
+  background: #ffffff;
+  color: #333333;
+  padding: 0.625rem;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  z-index: 9999;
+  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
+  border: 0.0625rem solid #e5e7eb;
+  display: none;
+  max-width: 21.875rem;
+  word-wrap: break-word;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.custom-tooltip .tooltip-header {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 1rem;
+  text-align: center;
+  position: relative;
+}
+
+.custom-tooltip .tooltip-header::after {
+  content: '';
+  position: absolute;
+  bottom: -0.5rem;
+  left: 0;
+  right: 0;
+  height: 0.0625rem;
+  background-color: #e5e7eb;
+}
+
+.custom-tooltip .tooltip-timer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 0.125rem;
+  background-color: #4f46e5;
+  border-radius: 0 0 0.5rem 0.5rem;
+}
+
+.custom-tooltip .tooltip-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.custom-tooltip .tooltip-id {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: #1f2937;
+  flex: 1;
+  word-break: break-all;
+  line-height: 1.4;
+}
+
+.custom-tooltip .copy-icon-wrapper {
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 0.375rem;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.custom-tooltip .copy-icon-wrapper:hover {
+  background-color: #f3f4f6;
+  transform: scale(1.05);
+}
+
+.custom-tooltip .copy-icon-wrapper svg {
+  width: 1rem;
+  height: 1rem;
+  transition: all 0.2s ease;
+}
+
+.object-id-popover {
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+
+.object-id-popover:hover {
+  opacity: 0.8;
+}
+
+.centered-absolute {
+  position: absolute;
+  top: 100px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1050;
+  width: 100%;
+}
+
+/* Navbar color changes - Higher specificity to override existing rules */
+header .header-icon {
+  color: #374151 !important;
+  transition: color 0.3s ease;
+}
+
+header .header-icon:hover {
+  color: #1f2937 !important;
+}
+
+header .header-icon img {
+  filter: brightness(0) saturate(100%) invert(25%) sepia(8%) saturate(1234%) hue-rotate(201deg) brightness(95%) contrast(88%);
+  transition: 0.3s ease-in-out;
+}
+
+header .header-icon:hover img {
+  opacity: 0.5;
+}
+
+.text-ellipsis {
+  display: inline-block !important;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.admin-info img {
+  filter: brightness(0) saturate(100%) invert(25%) sepia(8%) saturate(1234%) hue-rotate(201deg) brightness(95%) contrast(88%);
+  transition: 0.3s ease-in-out;
+}
+
+.admin-info {
+  padding: 6px 10px;
+  border-radius: 0.375rem;
+  color: #374151 !important;
+}
+
+.admin-info:hover {
+  opacity: 0.7;
+}
+
+/* Aviate Configuration */
+
+.aviate-configuration .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: 1rem;
+  border-bottom: 1px solid #d5d7da;
+}
+
+.aviate-configuration .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;
+}
+
+.aviate-configuration .control-label {
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+  line-height: 1.25rem !important;
+  color: #414651 !important;
+}
+
+.aviate-configuration .question-circle {
+  color: #a4a7ae;
+  font-size: 1rem;
+  width: 1rem;
+  height: 1rem;
+  display: inline-block;
+  line-height: 1rem;
+  text-align: center;
+}
+
+.aviate-configuration .form-control {
+  height: 2.5rem;
+  border-radius: 0.375rem;
+}
+
+.aviate-configuration .form-control:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.aviate-configuration .checkbox label {
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #414651;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+/* configuration index */
+
+.configuration-index .configuration {
+  max-width: '80rem';
+  width: 100%;
+}
+
+.configuration-index .configuration .configuration-header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  padding: 0;
+  border-bottom: 0.0625rem solid #E9EAEB;
+}
+
+.configuration-index .configuration-table th,
+.configuration-index .configuration-table td {
+  white-space: nowrap;
+  text-align: left;
+}
+
+.configuration-index .configuration .configuration-header h2 {
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  color: #414651;
+  margin-bottom: 1.25rem;
+}
+
+.configuration-index .configuration-table {
+  overflow-x: auto;
+  min-width: 100%;
+}
+
+
+.configuration-index .configuration-table th {
+  padding: 0.375rem 1.625rem 0.375rem 0.75rem;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+  letter-spacing: 0;
+  color: #717680;
+  text-transform: capitalize;
+}
+
+.configuration-index .configuration-table tr td a {
+  color: #535862 !important;
+  text-decoration: none !important;
+}
+
+.configuration-index .configuration-table td:last-child a {
+  color: red !important;
+}
+
+.configuration-index .configuration-table th:last-child,
+.configuration-index .configuration-table td:last-child {
+  width: 100px;
+}
+
+.configuration-index .configuration-table td:last-child a {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+/* configure plugin configuration form */
+
+.configure-plugin-configuration-form .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: 1rem;
+  border-bottom: 1px solid #d5d7da;
+}
+
+.configure-plugin-configuration-form .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;
+}
+
+.configure-plugin-configuration-form .control-label {
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+  line-height: 1.25rem !important;
+  color: #414651 !important;
+}
+
+.configure-plugin-configuration-form .question-circle {
+  color: #a4a7ae;
+  font-size: 1rem;
+  width: 1rem;
+  height: 1rem;
+  display: inline-block;
+  line-height: 1rem;
+  text-align: center;
+}
+
+.configure-plugin-configuration-form .form-control {
+  height: 2.5rem;
+  border-radius: 0.375rem;
+}
+
+.configure-plugin-configuration-form .form-control:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.configure-plugin-configuration-form .checkbox label {
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #414651;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+/* configure exemption form */
+.configure-exemption-form .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: 1rem;
+  border-bottom: 1px solid #d5d7da;
+}
+
+.configure-exemption-form .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;
+}
+
+.configure-exemption-form .control-label {
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+  line-height: 1.25rem !important;
+  color: #414651 !important;
+}
+
+.configure-exemption-form .question-circle {
+  color: #a4a7ae;
+  font-size: 1rem;
+  width: 1rem;
+  height: 1rem;
+  display: inline-block;
+  line-height: 1rem;
+  text-align: center;
+}
+
+.configure-exemption-form .form-control {
+  height: 2.5rem;
+  border-radius: 0.375rem;
+}
+
+.configure-exemption-form .form-control:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.configure-exemption-form .checkbox label {
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #414651;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+
+/* configure product form */
+
+.configure-product-form .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: 1rem;
+  border-bottom: 1px solid #d5d7da;
+}
+
+.configure-product-form .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;
+}
+
+.configure-product-form .control-label {
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+  line-height: 1.25rem !important;
+  color: #414651 !important;
+}
+
+.configure-product-form .question-circle {
+  color: #a4a7ae;
+  font-size: 1rem;
+  width: 1rem;
+  height: 1rem;
+  display: inline-block;
+  line-height: 1rem;
+  text-align: center;
+}
+
+.configure-product-form .form-control {
+  height: 2.5rem;
+  border-radius: 0.375rem;
+}
+
+.configure-product-form .form-control:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.configure-product-form .checkbox label {
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #414651;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+/* Custom sorting styles - Common styles for all tables */
+
+.sortable-header {
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.2s ease;
+  position: relative;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.sort-icons {
+  display: flex;
+  flex-direction: column;
+  margin-left: 0.5rem;
+}
+
+.sort-icon {
+  opacity: 0.4;
+  transition: opacity 0.2s ease;
+}
+
+.sort-icon.active {
+  opacity: 1;
+}
+
+.sort-desc {
+  margin-top: -0.25rem;
+}
+
+.sort-asc {
+  margin-bottom: -0.25rem;
+}
+
+.sortable-header.sort-asc-active .sort-asc,
+.sortable-header.sort-desc-active .sort-desc {
+  opacity: 1;
+}
+
+.sortable-header.sort-asc-active .sort-desc,
+.sortable-header.sort-desc-active .sort-asc {
+  opacity: 0.2;
+}
+
+th.sorting::after,
+th.sorting_asc::after,
+th.sorting_desc::after,
+th.sorting::before,
+th.sorting_asc::before,
+th.sorting_desc::before {
+  display: none !important;
+}
+
+/* table length */
+
+#custom_fields-table_length,
+#audit-logs-table_length {
+  position: absolute;
+  left: 14rem;
+  bottom: 0.5rem;
+}
+
+#custom_fields-table_length select,
+#audit-logs-table_length select {
+  width: 5rem;
+  height: 2.2rem;
+  padding: 0.3rem;
+  padding-right: 1.875rem;
+  border: 0.0625rem solid #e5e7eb;
+  border-radius: 0.375rem;
+}
+
+#custom_fields-table_length select:focus,
+#audit-logs-table_length select:focus {
+  outline: none;
+  box-shadow: none;
+  border: 0.0625rem solid #e5e7eb;
+}
+
+#custom_fields-table_length select,
+#audit-logs-table_length select {
+  color: #495057;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 0.0625rem solid #ced4da;
+  border-radius: 0.375rem;
+  -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.3125rem center;
+  background-size: 1rem 1rem;
+  padding: 0 1.25rem 0 0.5rem;
+}
+
+#tags-table_length,
+#accounts-table_length {
+  position: absolute;
+  left: 22rem;
+  bottom: 0;
+}
+
+#tags-table_length select,
+#accounts-table_length select {
+  width: 5rem;
+  height: 2.2rem;
+  padding: 0.3rem;
+  padding-right: 1.875rem;
+  border: 0.0625rem solid #e5e7eb;
+  border-radius: 0.375rem;
+}
+
+#tags-table_length select:focus,
+#accounts-table_length select:focus {
+  outline: none;
+  box-shadow: none;
+  border: 0.0625rem solid #e5e7eb;
+}
 
-/*# sourceMappingURL=common.css.map */
+#tags-table_length select,
+#accounts-table_length select {
+  color: #495057;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 0.0625rem solid #ced4da;
+  border-radius: 0.375rem;
+  -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.3125rem center;
+  background-size: 1rem 1rem;
+  padding: 0 1.25rem 0 0.5rem;
+}