@c10t/nice-component-library 0.0.1-beta

package/src/styles/themes/default.theme.scss

@@ -0,0 +1,939 @@
+@import '~@angular/material/theming';
+
+////////////////////////////////////////////////////////////////////
+// DEFAULT THEME
+////////////////////////////////////////////////////////////////////
+
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
+
+$default-primary: mat-palette($mat-orange);
+$default-accent: mat-palette($mat-amber, A200, A100, A400);
+$default-warn: mat-palette($mat-deep-orange);
+$default-theme: mat-light-theme($default-primary, $default-accent, $default-warn);
+.default {
+  @include angular-material-theme($default-theme);
+  @import "button-default.style";
+
+  h1 {
+    font-size: 40px;
+  }
+
+  h2 {
+    font-size: 32px;
+  }
+
+  h3 {
+    font-size: 22px;
+  }
+
+  h4 {
+    font-size: 20px;
+  }
+
+  h5 {
+    font-size: 18px;
+  }
+
+  h6 {
+    font-size: 16px;
+  }
+
+  .text-primary {
+    color: $primary !important;
+  }
+
+  .text-warning {
+    color: #FFBE41 !important;
+  }
+
+  .text-danger {
+    color: $danger !important;
+  }
+
+  .text-info {
+    color: $info !important;
+  }
+
+  .mat-toolbar.mat-primary {
+    background-color: #fff;
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
+  }
+
+  .mat-drawer-container {
+    background-color: transparent;
+  }
+
+  .mat-drawer {
+    background-color: #00977D;
+  }
+
+  .topbar_content {
+    background-color: white;
+    border-radius: 5px;
+    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3) !important;
+  }
+
+  fieldset,
+  .searchFormGroup .form, .searchFormGroup .content {
+    background-color: white;
+    //box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3) !important;
+    box-shadow: none !important;
+    border-radius: 5px;
+  }
+
+  a {
+    color: #007DDD;
+    text-decoration: underline;
+
+    &:hover {
+      color: #FF9800;
+    }
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid #E9E9E9;
+    width: 100%;
+  }
+
+  // Mat tab
+  mat-tab-group {
+    .mat-tab-header {
+      .mat-tab-label-container {
+        .mat-tab-list {
+          .mat-tab-labels {
+            .mat-tab-label {
+              width: 100%;
+
+              .mat-tab-label-content {
+                width: 100%;
+                color: #222222;
+                font-weight: 400;
+                background-color: white;
+                border-bottom: 4px solid white;
+                border-top-left-radius: 6px;
+                border-top-right-radius: 6px;
+                padding: 10px;
+                margin-right: 0;
+                -webkit-transition: .0s;
+                -o-transition: .0s;
+                transition: .0s;
+
+                &:hover {
+                  color: #00977D;
+                  border-bottom: 4px solid #00977D;
+                }
+
+                &:before {
+                  display: none;
+                }
+              }
+
+              &.mat-tab-label-active .mat-tab-label-content {
+                color: #00977D;
+                font-weight: 600;
+                background-color: white;
+                box-shadow: none;
+                border-bottom: 4px solid #00977D;
+                padding: 10px;
+
+                &:before {
+                  display: none;
+                }
+              }
+
+              &.mat-tab-disabled .mat-tab-label-content {
+                color: #dadada;
+                background-color: #fafafa;
+                border-bottom: 4px solid transparent;
+                cursor: not-allowed;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .mat-tab-body-wrapper {
+      border-radius: 5px;
+
+      .mat-tab-body {
+        //background-color: white;
+
+        cva-multi-select-autocomplete .mat-form-field {
+          background-color: transparent !important;
+        }
+      }
+    }
+
+    .box-search {
+      background-color: transparent !important;
+    }
+  }
+
+  .username i,
+  .username span,
+  .theme_select i,
+  .theme_select span {
+    color: #795548 !important;
+  }
+
+  // MenuModel
+  app-menu-list-item {
+    border-radius: 6px;
+
+    &[aria-expanded="true"] {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+
+    .mat-list-item {
+      font-size: 16px;
+      height: auto;
+      border-bottom: 1px solid #39B59F;
+
+      &.expanded {
+        border-bottom: none;
+
+        .mat-list-item {
+          font-size: 14px;
+        }
+      }
+
+      .mat-list-item-content {
+        color: white;
+      }
+
+      .mat-icon {
+        color: white;
+      }
+
+      &:hover .mat-icon,
+      &:hover .mat-list-item-content,
+      &.active .mat-icon,
+      &.active .mat-list-item-content {
+        color: #FFD88D;
+      }
+    }
+
+    app-menu-list-item {
+      .mat-list-item {
+        padding: 0 !important;
+
+        .mat-list-item-content {
+          border: none;
+          font-size: 14px;
+        }
+
+        .mat-icon {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .theme_select:hover span {
+    color: #4ac375 !important;
+  }
+
+  .mat-flat-button.mat-primary[disabled], .mat-flat-button.mat-accent[disabled], .mat-flat-button.mat-warn[disabled], .mat-flat-button[disabled][disabled], .mat-raised-button.mat-primary[disabled], .mat-raised-button.mat-accent[disabled], .mat-raised-button.mat-warn[disabled], .mat-raised-button[disabled][disabled], .mat-fab.mat-primary[disabled], .mat-fab.mat-accent[disabled], .mat-fab.mat-warn[disabled], .mat-fab[disabled][disabled], .mat-mini-fab.mat-primary[disabled], .mat-mini-fab.mat-accent[disabled], .mat-mini-fab.mat-warn[disabled], .mat-mini-fab[disabled][disabled] {
+    color: #9E9E9E;
+    background-color: #dfdcba;
+  }
+
+  .mat-flat-button.mat-primary[disabled]:hover, .mat-flat-button.mat-accent[disabled]:hover, .mat-flat-button.mat-warn[disabled]:hover, .mat-flat-button[disabled]:hover[disabled]:hover, .mat-raised-button.mat-primary[disabled]:hover, .mat-raised-button.mat-accent[disabled]:hover, .mat-raised-button.mat-warn[disabled]:hover, .mat-raised-button[disabled]:hover[disabled]:hover, .mat-fab.mat-primary[disabled]:hover, .mat-fab.mat-accent[disabled]:hover, .mat-fab.mat-warn[disabled]:hover, .mat-fab[disabled]:hover[disabled]:hover, .mat-mini-fab.mat-primary[disabled]:hover, .mat-mini-fab.mat-accent[disabled]:hover, .mat-mini-fab.mat-warn[disabled]:hover, .mat-mini-fab[disabled]:hover[disabled]:hover {
+    background-color: #cbc8aa;
+  }
+
+  // Form field
+  mat-form-field {
+    &.mat-form-field-appearance-outline {
+      .mat-form-field-flex {
+        background-color: white;
+        border-radius: 12px;
+      }
+    }
+
+    .mat-form-field-wrapper {
+      .mat-form-field-flex {
+        &:focus .mat-form-field-outline,
+        &:hover .mat-form-field-outline {
+          border: 1px solid #00977D;
+        }
+
+        .mat-form-field-outline-thick,
+        .mat-form-field-outline {
+          border: 1px solid #8F9BB3;
+          border-radius: 12px;
+          top: 0;
+        }
+
+        .mat-form-field-outline {
+          .mat-form-field-outline-start,
+          .mat-form-field-outline-gap,
+          .mat-form-field-outline-end {
+            border: none;
+          }
+        }
+      }
+    }
+
+    &.mat-form-field-disabled {
+      .mat-form-field-flex {
+        &:hover .mat-form-field-outline,
+        .mat-form-field-outline {
+          background-color: #EFF2F2;
+          border-color: #ffffff;
+        }
+      }
+    }
+
+    .mat-form-field-infix {
+      border: none;
+      padding: 15px 0;
+
+      .mat-form-field-label-wrapper {
+        top: 0;
+        padding-top: 0;
+        display: flex;
+        align-items: center;
+        overflow: visible;
+
+        .mat-form-field-label {
+          top: initial;
+          margin-top: 0;
+          color: black;
+
+          .mat-placeholder-required {
+            color: red;
+          }
+        }
+      }
+    }
+
+    &.mat-form-field-should-float .mat-form-field-label {
+      transform: translateY(-30px) scale(0.8) !important;
+      width: 100% !important;
+    }
+  }
+
+  input::placeholder,
+  mat-form-field .mat-select-placeholder {
+    color: #A5A9B0 !important;
+  }
+
+  .mat-tab-label, .mat-tab-link {
+    color: #795548 !important;
+  }
+
+  .float_label mat-form-field.mat-form-field-should-float .mat-form-field-label {
+      transform: translateY(-40px) scale(1) !important;
+  }
+
+  .clickable mat-form-field {
+    &.mat-form-field-disabled {
+      .mat-form-field-flex {
+        &:hover .mat-form-field-outline,
+        .mat-form-field-outline {
+          background-color: white;
+          border-color: #8F9BB3;
+        }
+
+        .mat-input-element:disabled {
+          color: rgba(0, 0, 0, 0.87) !important;
+        }
+      }
+    }
+  }
+
+  cva-input.text_area .float_label mat-form-field.mat-form-field-should-float .mat-form-field-label {
+    transform: translateY(-60px) scale(1) !important;
+  }
+
+  // Table
+  .table-responsive {
+
+    table {
+      thead {
+
+      }
+
+      tbody {
+        tr {
+          &:nth-of-type(even) {
+            background-color: #F4F9FF;
+          }
+
+          &:hover {
+            background-color: #E9EFFD;
+          }
+        }
+      }
+
+      tfoot {
+
+      }
+    }
+
+    .mat-table {
+      background: transparent;
+      border: none;
+      border-radius: 5px;
+      box-shadow: none;
+
+      .mat-header-row {
+        background-color: transparent;
+
+        .mat-header-cell, .mat-header-cell .viewData, .mat-header-cell div {
+          color: black;
+          font-size: 16px;
+          font-weight: bold;
+        }
+      }
+
+      .mat-row {
+        background-color: white;
+
+        &:nth-of-type(even) {
+          background-color: #F4F9FF;
+        }
+
+        &:hover {
+          background-color: #E9EFFD;
+        }
+
+        &.parentRow0, &.childRow0 {
+          background-color: white;
+        }
+
+        &.parentRow1, &.childRow1 {
+          background-color: #F4F4F4;
+        }
+
+        .mat-cell {
+          &.mat-column-status {
+            width: 80px;
+            font-weight: bold;
+          }
+
+          .viewData {
+            color: black;
+            font-size: 16px;
+
+            &.pending {
+              color: $state-pending;
+            }
+
+            &.rejected {
+              color: $state-rejected;
+            }
+
+            &.approved {
+              color: $state-approved;
+            }
+
+            &.ongoing {
+              color: $state-ongoing;
+            }
+
+            &.closed {
+              color: $state-closed;
+            }
+
+            &.cancelled {
+              color: $state-cancelled;
+            }
+
+            &.delivering {
+              color: $state-delivering;
+            }
+
+            &.delivered {
+              color: $state-delivered;
+            }
+
+            &.confirmed {
+              color: $state-confirmed;
+            }
+
+            &.returned {
+              color: $state-returned;
+            }
+
+            &.waiting {
+              color: $state-waiting;
+            }
+
+            &.active {
+              color: $state-active;
+            }
+
+            &.inactive {
+              color: $state-inactive;
+            }
+
+            &.expired {
+              color: $state-expired;
+            }
+          }
+        }
+      }
+
+      .mat-footer-cell .viewData {
+        font-size: 16px;
+      }
+    }
+
+    &.fixed_header {
+      box-shadow: none;
+
+      thead {
+        .mat-header-cell {
+          background-color: white;
+          z-index: 1;
+        }
+      }
+
+      tbody {
+
+      }
+
+      tfoot {
+        &.mat-table-sticky {
+          background-color: white;
+
+          tr {
+            .mat-footer-cell {
+              background-color: white;
+              border-top: none;
+              border-bottom: none;
+            }
+
+            &:first-child {
+              .mat-footer-cell {
+                border-top: 1px solid #E9E9E9;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    tr .mat-cell,
+    .mat-header-cell,
+    &.fixed_header tfoot.mat-table-sticky tr:last-child .mat-footer-cell {
+      border-bottom: 1px solid #E9E9E9;
+    }
+  }
+
+  app-policy-common-info .mat-table {
+    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3) !important;
+  }
+
+  .label.item-focused {
+    color: #8BC34A !important;
+  }
+
+  .mat-button.mat-warn, .mat-icon-button.mat-warn, .mat-stroked-button.mat-warn {
+    color: #00977d;
+  }
+
+  .mat-tooltip {
+    background-color: #795548 !important;
+  }
+
+  .mat-input-element {
+    caret-color: black;
+  }
+
+  .uploadArea button {
+    background-color: #beffd8;
+  }
+
+  .resizer:before {
+    color: #8bc34a;
+  }
+
+  // Editor
+  quill-editor {
+    .ql-toolbar {
+      border: 1px solid rgba(0, 0, 0, 0.2);
+
+      .ql-picker.ql-expanded .ql-picker-label,
+      button:hover, button:focus, button:focus, button.ql-active, button.ql-active,
+      .ql-picker-label:hover, .ql-picker-label:hover, .ql-picker-label.ql-active, .ql-picker-label.ql-active,
+      .ql-picker-item:hover, .ql-picker-item:hover, .ql-picker-item.ql-selected, .ql-picker-item.ql-selected {
+        color: #ff9800;
+
+        .ql-stroke, .ql-stroke-miter {
+          stroke: #ff9800;
+        }
+      }
+
+      .ql-fill, .ql-stroke.ql-fill, .ql-stroke {
+        stroke: rgba(0, 0, 0, 0.87);
+      }
+
+      .ql-picker {
+        color: rgba(0, 0, 0, 0.87);
+      }
+    }
+
+    .ql-container {
+      height: auto;
+    }
+  }
+
+  .btn-sec {
+    .fixed_bottom {
+      &.left, &.right {
+        background-color: white;
+      }
+    }
+  }
+
+  .mat-expansion-panel {
+    background-color: white;
+    box-shadow: 0px 0px 2px #9E9E9E, 3px 2px 5px #9E9E9E !important
+  }
+
+  .mat-expansion-panel,
+  .mat-expansion-panel-header-description, .mat-expansion-indicator::after {
+    color: #795548;
+  }
+
+  .mat-expansion-panel-header {
+    background-color: #beffd8;
+  }
+
+  .mat-expansion-panel-header.mat-expanded:focus, .mat-expansion-panel-header.mat-expanded:hover,
+  .mat-expansion-panel:not(.mat-expanded):not([aria-disabled=true]) .mat-expansion-panel-header:hover {
+    background-color: #beffd8;
+  }
+
+  .mat-badge-content {
+    color: white;
+    background-color: #4ac375;
+  }
+
+  // TablePagingRequestModel
+  mat-paginator {
+    font-size: 16px;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+
+    .mat-paginator-page-size .mat-select-trigger {
+      font-size: 16px !important;
+    }
+
+    .mat-icon-button {
+      line-height: 30px !important;
+    }
+
+    .mat-custom-page {
+      color: #4E4E4E !important;
+      font-size: 16px;
+
+      &:hover {
+        color: #3366FF !important;
+      }
+
+      &[disabled="disabled"] {
+        color: #3366FF !important;
+      }
+    }
+
+    .mat-mini-fab.mat-custom-page {
+      line-height: 40px;
+    }
+
+    .mat-focus-indicator {
+      color: #4E4E4E !important;
+      background-color: transparent !important;
+
+      &.mat-icon-button.mat-button-disabled,
+      &.mat-button.mat-button-disabled {
+        color: #b0b0b0 !important;
+      }
+    }
+
+    .mat-form-field-appearance-legacy .mat-form-field-underline {
+      background-color: #8BC34A;
+      bottom: 10px !important;
+    }
+  }
+
+  .go-to-page {
+    .mat-button-base {
+      color: $primary;
+    }
+  }
+
+  // Step
+  mat-horizontal-stepper {
+    .mat-horizontal-stepper-header-container {
+      border-top: 1px solid #e9ecef;
+      overflow: hidden;
+      place-content: space-evenly;
+
+      mat-step-header {
+        background: #FBFBFB;
+        width: 100%;
+        height: 60px;
+        display: flex;
+        place-content: center;
+        color: #fff;
+        overflow: visible !important;
+
+        .mat-step-icon {
+          background-color: #fff !important;
+          color: #333 !important;
+          font-weight: bold;
+          width: 32px;
+          height: 32px;
+          line-height: 36px;
+          border: 1px #aaa solid;
+          border-radius: 50%;
+
+          span {
+            color: #7A7A7A;
+            font-size: 18px;
+            font-weight: bold;
+          }
+        }
+
+        &:before {
+          content: "";
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          width: 0;
+          height: 0;
+          border-left: 12px solid #FBFBFB;
+          border-top: 30px solid transparent !important;
+          border-bottom: 30px solid transparent;
+        }
+
+        &:after {
+          content: "";
+          position: absolute;
+          right: -11px;
+          bottom: 0;
+          width: 0;
+          height: 0;
+          border-left: 12px solid #FBFBFB;
+          border-top: 30px solid transparent !important;
+          border-bottom: 30px solid transparent;
+        }
+
+        &[aria-labelledby="completed"],
+        &[aria-selected="true"] {
+          background-color: #00977D !important;
+        }
+
+        &[aria-labelledby="completed"] .mat-step-label,
+        &[aria-selected="true"] .mat-step-label {
+          color: #fff !important;
+          font-size: 16px;
+        }
+
+        &[aria-labelledby="completed"]:after,
+        &[aria-selected="true"]:after {
+          border-left: 12px solid #00977D;
+          z-index: 1;
+        }
+
+        &[aria-labelledby="completed"]:hover,
+        &[aria-selected="true"]:hover {
+          background-color: #00977D;
+        }
+
+        &[aria-labelledby="completed"]:hover .mat-step-label,
+        &[aria-selected="true"]:hover .mat-step-label {
+          background-color: #00977D;
+        }
+
+        &:first-child:before {
+          display: none;
+        }
+
+        &:last-child:after {
+          display: none;
+        }
+
+        .-ripple:before {
+          content: "";
+          position: absolute;
+          width: 2px;
+          height: 60px;
+          background-color: #ccc;
+          transform: rotate(203deg);
+          top: 27px;
+          display: block;
+        }
+
+        .-ripple:after {
+          content: "";
+          position: absolute;
+          width: 2px;
+          height: 60px;
+          background-color: #ccc;
+          transform: rotate(158deg);
+          top: -28px;
+          display: block;
+        }
+
+        &:first-child .-ripple:before,
+        &:first-child .-ripple:after {
+          display: none;
+        }
+
+        .mat-stepper-horizontal-line {
+          display: none;
+        }
+
+        @media screen and (max-width: 767px) {
+          &[aria-selected="false"] {
+            .mat-step-label {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+
+    .mat-horizontal-content-container {
+      padding: 0;
+    }
+  }
+
+  .mat-menu-panel .mat-checkbox-background,
+  .mat-menu-panel .mat-checkbox-frame {
+    border-radius: 50%;
+  }
+
+  .mat-checkbox-frame,
+  mat-pseudo-checkbox {
+    background-color: white;
+    border: 1px solid #A7A7A7;
+    border-radius: 4px;
+  }
+
+  .mat-checkbox-background {
+    border-radius: 4px;
+  }
+
+  .choose-area .mat-checkbox-checked .mat-checkbox-background {
+    background-color: #00977D !important;
+  }
+
+  mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
+    background-color: #4CD964;
+    border: 1px solid #4CD964;
+  }
+
+  mat-pseudo-checkbox.mat-pseudo-checkbox-checked:after {
+    top: 3px;
+    left: 2px;
+  }
+
+  .breadcrumb {
+
+    a {
+      font-size: 24px;
+      color: #A7A7A7;
+    }
+
+    i.fa-angle-right {
+      color: #0D1C2E;
+      font-size: 25px;
+      font-weight: 400;
+    }
+
+    .separator {
+      font-size: 24px;
+    }
+
+    .currentAction {
+      font-size: 24px;
+      color: #222222;
+    }
+  }
+
+  // ACbox
+  .acbox {
+    background-color: white;
+  }
+
+  .group_title {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 20px;
+  }
+
+  .group_content {
+    color: #7C7C7C;
+    margin-bottom: 40px;
+  }
+
+  .field_name {
+    color: #222222;
+    font-size: 16px;
+    font-weight: 600;
+  }
+
+  .field_content {
+    color: #7C7C7C;
+    font-size: 16px;
+  }
+
+  cva-flat-tree .collapse-expand-all {
+    font-size: 18px;
+    font-weight: 500;
+    color: #00977D;
+  }
+
+  // checkbox
+  mat-checkbox {
+    &.mat-checkbox-disabled {
+      .mat-checkbox-background {
+        background-color: #eff2f2;
+      }
+    }
+  }
+}
+
+body.default {
+  background: #F4F9FF;
+  color: black;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.default .mat-tab-group.mat-primary .mat-ink-bar, .default .zeus .mat-tab-group.mat-toolbar .mat-ink-bar, .zeus .default .mat-tab-group.mat-toolbar .mat-ink-bar, .default .hera .mat-tab-group.mat-toolbar .mat-ink-bar, .hera .default .mat-tab-group.mat-toolbar .mat-ink-bar, .default .mat-tab-nav-bar.mat-primary .mat-ink-bar, .default .zeus .mat-tab-nav-bar.mat-toolbar .mat-ink-bar, .zeus .default .mat-tab-nav-bar.mat-toolbar .mat-ink-bar, .default .hera .mat-tab-nav-bar.mat-toolbar .mat-ink-bar, .hera .default .mat-tab-nav-bar.mat-toolbar .mat-ink-bar {
+  background-color: #beffd8;
+}
+.default .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .default .athena .mat-checkbox-indeterminate.mat-toolbar .mat-checkbox-background, .athena .default .mat-checkbox-indeterminate.mat-toolbar .mat-checkbox-background, .default .mat-checkbox-checked.mat-accent .mat-checkbox-background, .default .athena .mat-checkbox-checked.mat-toolbar .mat-checkbox-background, .athena .default .mat-checkbox-checked.mat-toolbar .mat-checkbox-background,
+.default .mat-primary .mat-pseudo-checkbox-checked, .default .zeus .mat-toolbar .mat-pseudo-checkbox-checked, .zeus .default .mat-toolbar .mat-pseudo-checkbox-checked, .default .hera .mat-toolbar .mat-pseudo-checkbox-checked, .hera .default .mat-toolbar .mat-pseudo-checkbox-checked, .default .mat-primary .mat-pseudo-checkbox-indeterminate, .default .zeus .mat-toolbar .mat-pseudo-checkbox-indeterminate, .zeus .default .mat-toolbar .mat-pseudo-checkbox-indeterminate, .default .hera .mat-toolbar .mat-pseudo-checkbox-indeterminate, .hera .default .mat-toolbar .mat-pseudo-checkbox-indeterminate,
+.default .hera .mat-checkbox-checked.mat-toolbar .mat-checkbox-background, .default .hera .mat-checkbox-indeterminate.mat-toolbar .mat-checkbox-background, .default .mat-checkbox-checked.mat-primary .mat-checkbox-background, .default .mat-checkbox-indeterminate.mat-primary .mat-checkbox-background, .default .zeus .mat-checkbox-checked.mat-toolbar .mat-checkbox-background, .default .zeus .mat-checkbox-indeterminate.mat-toolbar .mat-checkbox-background, .hera .default .mat-checkbox-checked.mat-toolbar .mat-checkbox-background, .hera .default .mat-checkbox-indeterminate.mat-toolbar .mat-checkbox-background, .zeus .default .mat-checkbox-checked.mat-toolbar .mat-checkbox-background, .zeus .default .mat-checkbox-indeterminate.mat-toolbar .mat-checkbox-background {
+  background-color: #4CD964;
+}
+
+.default .mat-radio-outer-circle {
+  border: 1px solid #D4D4D6;
+  background-color: #F5F5F5;
+}
+
+.default .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle, .default .athena .mat-radio-button.mat-radio-checked.mat-toolbar .mat-radio-outer-circle, .athena .default .mat-radio-button.mat-radio-checked.mat-toolbar .mat-radio-outer-circle {
+  border-color: #00977D;
+}
+
+.default .mat-radio-button.mat-accent .mat-radio-inner-circle, .default .athena .mat-radio-button.mat-toolbar .mat-radio-inner-circle, .athena .default .mat-radio-button.mat-toolbar .mat-radio-inner-circle, .default .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .default .athena .mat-radio-button.mat-toolbar .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .athena .default .mat-radio-button.mat-toolbar .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .default .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple, .default .athena .mat-radio-button.mat-radio-checked.mat-toolbar .mat-radio-persistent-ripple, .athena .default .mat-radio-button.mat-radio-checked.mat-toolbar .mat-radio-persistent-ripple, .default .mat-radio-button.mat-accent:active .mat-radio-persistent-ripple, .default .athena .mat-radio-button.mat-toolbar:active .mat-radio-persistent-ripple, .athena .default .mat-radio-button.mat-toolbar:active .mat-radio-persistent-ripple {
+  background-color: #00977D;
+}
+
+@media screen and (max-width: 767px) {
+  .default .topbar_content {
+    background-color: transparent;
+    box-shadow: none !important;
+  }
+}