@use '@angular/material' as mat;

mat.$theme-ignore-duplication-warnings: true;

@font-face {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/ProximaNova-Regular.otf');
  src: local('Proxima Nova'), url('assets/fonts/ProximaNova-Regular.otf') format('opentype');
}

@font-face {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 500;
  src: url('assets/fonts/ProximaNova-Semibold.otf');
  src: local('Proxima Nova'), url('assets/fonts/ProximaNova-Semibold.otf') format('opentype');
}

@font-face {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/ProximaNova-Bold.otf');
  src: local('Proxima Nova'), url('assets/fonts/ProximaNova-Bold.otf') format('opentype');
}

@font-face {
  font-family: 'Fleio-Icons';
  font-display: block;
  src: url('assets/fonts/Fleio-Icons.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

$material-symbols-font-path: '~material-symbols/';

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url($material-symbols-font-path + 'material-symbols-outlined.woff2') format('woff2');
}

.material-icons {
  font-family: 'Material Icons', monospace;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'FILL' 1;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

@import "assets/styles/component-overrides";
@import "assets/styles/layout";
@import "assets/styles/fleio-tooltips";
@import "assets/themes/spring.theme";
@import "assets/themes/navy.theme";
@import "assets/themes/dusk.theme";
@import "assets/themes/dark.theme";

$general-typography: mat.define-typography-config(
  $font-family: '"Proxima Nova", "Helvetica", "Arial", sans-serif',
  $body-2: mat.define-typography-level(15px, 20px, 400)
);

@include mat.all-component-typographies($general-typography);
@include mat.core();

* {
  font-family: "Proxima Nova", "Helvetica", "Arial", monospace;
}

body {
  font-size: 15px;
  background-color: #F1F1F1;
  margin: 0;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a.disabled {
  pointer-events: none;
  cursor: pointer;
}

.overflow-hidden {
  overflow: hidden !important;
}

.app-loading {
  border: 16px solid #fff;
  border-top: 16px solid #4caf50;
  border-right: 16px solid #4caf50;
  border-radius: 50%;
  width: 120px;
  margin: 0 auto;
  margin-top: 40vh;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.fl-icons {
  font-family: 'Fleio-Icons', monospace !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'flig';
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.display-inline-block {
  display: inline-block;
}

.vertical-align-middle {
  vertical-align: middle;
}

.fl-margin-top {
  margin-top: 15px !important;
}

.fl-margin-top-large {
  margin-top: 30px !important;
}

.fl-margin-left {
  margin-left: 24px !important;
}

html[dir=rtl] .fl-margin-left {
  margin-left: unset !important;
  margin-right: 24px;
}

.fl-margin-left-medium {
  margin-left: 15px !important;
}

html[dir=rtl] .fl-margin-left-medium {
  margin-left: unset !important;
  margin-right: 15px;
}


.fl-margin-left-small {
  margin-left: 8px !important;
}

html[dir=rtl] .fl-margin-left-small {
  margin-left: unset !important;
  margin-right: 8px;
}

.fl-margin-right {
  margin-right: 24px !important;
}

html[dir=rtl] .fl-margin-right {
  margin-right: unset !important;
  margin-left: 24px;
}

.fl-margin-right-medium {
  margin-right: 15px !important;
}

html[dir=rtl] .fl-margin-right-medium {
  margin-right: unset !important;
  margin-left: 15px;
}

.fl-padding-left {
  padding-left: 24px !important;
}

html[dir=rtl] .fl-padding-left {
  padding-left: unset !important;
  padding-right: 24px;
}

.fl-padding-left-small {
  padding-left: 12px !important;
}

html[dir=rtl] .fl-padding-left-small {
  padding-left: unset !important;
  padding-right: 12px;
}

.fl-padding-right {
  padding-right: 24px !important;
}

html[dir=rtl] .fl-padding-right {
  padding-right: unset !important;
  padding-left: 24px;
}

.fl-margin-right-small {
  margin-right: 8px !important;
}

html[dir=rtl] .fl-margin-right-small {
  margin-right: unset !important;
  margin-left: 8px;
}

html[dir=rtl] .object-card-content {
  margin-left: unset !important;
  margin-right: 15px !important;
}

.fl-margin-top-medium {
  margin-top: 10px !important;
}

.fl-margin-top-small {
  margin-top: 5px !important;
}

.fl-heading {
  font-size: 25px;
  letter-spacing: .01em;
  line-height: 24px;
}

.fl-heading-md {
  font-size: 19px;
  letter-spacing: 0.01em;
  line-height: 21px;
  font-weight: normal;
}

.fl-heading-sm {
  font-size: 15px;
  letter-spacing: 0.01em;
  line-height: 21px;
}

.fl-tinymce-placeholder {
  min-height: 390px;
}

.fl-content {
  padding: 15px;
  position: relative;
}

.fl-detail {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.01em;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.54);
}

.fl-card-fixed,
.fl-card-fixed-md,
.fl-card-fixed-sm,
.fl-card-styling {
  width: 95%;
  position: relative;
  margin: 0 auto 50px;
  padding: 0 !important;
}

.fl-card-fixed .mat-mdc-card-header-text,
.fl-card-fixed-md .mat-mdc-card-header-text,
.fl-card-fixed-sm .mat-mdc-card-header-text,
.fl-card-styling .mat-mdc-card-header-text {
  width: 100%;
  background: #f8f8f8;
  margin: 0;
  padding-top: 30px;
  padding-bottom: 20px;
  padding-left: 16px;
  overflow: hidden;
}

html[dir=rtl] .fl-card-fixed .mat-mdc-card-header-text,
html[dir=rtl] .fl-card-fixed-md .mat-mdc-card-header-text,
html[dir=rtl] .fl-card-fixed-sm .mat-mdc-card-header-text,
html[dir=rtl] .fl-card-styling .mat-mdc-card-header-text {
  padding-left: unset !important;
  padding-right: 16px;
}

.fl-card-fixed .mat-mdc-card-content, .fl-card-fixed .mat-mdc-card-actions,
.fl-card-fixed-md .mat-mdc-card-content, .fl-card-fixed-md .mat-mdc-card-actions,
.fl-card-fixed-sm .mat-mdc-card-content, .fl-card-fixed-sm .mat-mdc-card-actions,
.fl-card-styling .mat-mdc-card-content, .fl-card-styling .mat-mdc-card-actions {
  padding: 16px !important;
  margin-bottom: 10px !important;
}

.fl-card-styling .object-actions {
  top: 20px;
}

.fl-card-empty-bg {
  background: transparent !important;
  box-shadow: none !important;
}

.fl-card-fixed {
  max-width: 1320px;
}

.fl-card-fixed-md {
  max-width: 920px;
}

.fl-card-fixed-sm {
  max-width: 460px;
}

.full-width {
  width: 100%;
}

.half-width {
  width: 50%;
}

.actions-container app-icon mat-icon {
  vertical-align: middle;
}

.fl-ellipsis-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
  //noinspection CssInvalidPropertyValue
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding-right: 1em;
}

html[dir=rtl] .fl-ellipsis-text {
  padding-right: unset !important;
  padding-left: 1em;
}

.filtering-input-width {
  width: 90%;
  margin-top: 15px;
}

.fl-help-text {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  text-overflow: ellipsis;
  overflow: hidden;
  padding-left: 50px;
}

html[dir=rtl] .fl-help-text {
  padding-left: unset !important;
  padding-right: 50px;
}

.fl-help-text h3 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.010em;
  line-height: 1.2em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0;
}

.fl-help-text h3:not(:first-child) {
  margin: 8px 0 0;
}

.fl-help-text p {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.010em;
  margin: 0;
  line-height: 1.6em;
}

.fl-margin-bottom {
  margin-bottom: 22px;
}

.fl-margin-bottom-medium {
  margin-bottom: 15px !important;
}

.fl-margin-bottom-small {
  margin-bottom: 5px;
}


.fl-radio-group {
  margin-top: 5px;
  margin-bottom: 10px;
}

.fl-radio-group mat-label {
}

.fl-radio-group mat-radio-button {
  margin-top: 10px;
}

.fl-important-text {
  color: red;
}

.fl-bordered-box {
  padding: 20px 10px;
  margin-bottom: 24px;
  border: 1px solid #e7e7e7;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  background: #fff;
  overflow: auto;
}

.fl-bold {
  font-weight: 500;
}

.fl-struck {
  text-decoration: line-through;
}

td .actions-container {
  float: right;
}

.fl-icon-off {
  color: yellow;
  background: linear-gradient(to right bottom, transparent 47.75%, yellow, currentColor 50.5%, transparent 40.25%),
  linear-gradient(to left bottom, transparent 47.75%, yellow, currentColor 50.5%, transparent 40.25%);
}

.fl-icon-yellow {
  color: #FFEB3B !important;
}

.small-info-icon {
  font-size: 19px;
  vertical-align: middle;
  width: 20px !important;
  height: 20px !important;
}

.fl-float-right {
  float: right;
}

.fl-content-min-height {
  min-height: 250px;
}

.add-item-button {
  background: #fff !important;
  color: #000 !important;
}

.wrap-text-content {
  word-break: break-all;
}

.wrap-pre-text pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

.fl-indent {
  margin-left: 10px;
}

html[dir=rtl] .fl-indent {
  margin-left: unset !important;
  margin-right: 10px;
}

.fl-double-indent {
  margin-left: 20px;
}

html[dir=rtl] .fl-double-indent {
  margin-left: unset !important;
  margin-right: 20px;
}

.position-relative {
  position: relative !important;
}

.no-overflow-hidden {
  overflow: visible !important;
}

.right-align {
  text-align: right !important;
}

html[dir=rtl] .right-align {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.justify-content-center {
  justify-content: center !important;
}

.text-left {
  text-align: left !important;
}

html[dir=rtl] .text-left {
  text-align: right !important;
}

.invisible {
  visibility: hidden;
}

.uppercase {
  text-transform: uppercase;
}

@media screen and (max-width: 960px) {
  /* sm and lower */
  .fl-help-text {
    padding-left: unset;
    margin-bottom: 35px;
  }
  html[dir=rtl] .fl-help-text {
    padding-right: unset !important;
  }
  .fl-card-mobile-less-space .mat-mdc-card-header-text {
    padding-top: 20px;
    padding-bottom: 0;
    padding-left: 8px;
  }
  .fl-card-mobile-less-space .object-actions {
    right: 16px !important;
    top: 15px;
  }
}

.fl-padding-lr {
  padding-left: 10%;
  padding-right: 10%;
}

.fl-table-wrapper {
  margin: 20px;
  position: relative;
}

.fl-table {
  width: 100%;
  max-width: 100%;
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left;
  background-color: white;
  table-layout: fixed;
}

html[dir=rtl] .fl-table {
  text-align: right;
}

.fl-grid > tbody > tr > td {
  color: #000;
  opacity: 0.87;
}

.fl-grid > tbody > tr:hover {
  background-color: #EEEEEE;
}

.fl-grid > thead > tr > th {
  height: 48px;
  font-weight: 500;
  color: #000000;
  opacity: 0.54;
}

table tbody tr.v-middle td {
  vertical-align: middle;
}

.fl-cursor-pointer {
  cursor: pointer;
}

.fl-table tr {
  border-bottom: 1px solid #ececec;
  margin: 0;
  padding-left: 24px;
}

html[dir=rtl] .fl-table tr {
  padding-left: unset !important;
  padding-right: 24px;
}

.fl-table.fl-smaller-rows-table td {
  height: 35px;
}

.fl-red-color {
  color: red !important;
}

.fl-orange-color {
  color: orange !important;
}

.fl-green-color {
  color: green !important;
}

.fl-white-color {
  color: #fff !important;
}

.fl-yellow-color {
  color: #FFEB3B !important;
}

.fl-gray-color {
  color: gray !important;
}

.fl-dialog {
  max-width: 550px;
  width: 550px;
  min-height: 100px;
  position: relative;
  max-height: 500px;
  letter-spacing: normal;
}

.fl-dialog::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.fl-dialog::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .26);
}

.fl-dialog form {
  min-height: 100px;
  position: relative;
  padding-top: 5px;
}

.vertical-scroll {
  overflow-y: auto !important;
}

.unset-overflow {
  overflow: unset !important;
}

.topbar-invisible .object-details-card, .topbar-invisible .objects-container {
  margin-top: 60px;
}

@media screen and (max-width: 720px) {
  .fl-table-wrapper {
    margin: 0;
  }

  .fl-dialog {
    max-width: 100% !important;
    width: 100% !important;
  }

  .topbar-invisible .object-details-card, .topbar-invisible .objects-container {
    margin-top: 5px;
  }
}

@media screen and (min-width: 960px) {
  .fl-card-fixed-expanded {
    max-width: 95%;
  }
}

html[dir=rtl] .cdk-overlay-pane {
  direction: rtl;
}

.transparent-background {
  background: transparent !important;
}

.fl-block {
  display: block !important;
}

.fl-inline-block {
  display: inline-block !important;
}

.on-dialog-card {
  width: 100% !important;
}

.fl-light-green-bg {
  background-color: #42bd41 !important;
}

.fl-red-bg {
  background-color: #e03e2d !important;
}

/* sfa */
.sfa-option {
  background-color: #fafafa;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  transition: 0.3s;
  -webkit-transition: 0.3s;
}

.sfa-option-google_authenticator {
  background: #fafafa url('assets/img/common/sfa/for-google.png') 95% center / 21% no-repeat !important;
  /* color used for image: #ddd */
}

.sfa-option-sms_authenticator {
  background: #fafafa url('assets/img/common/sfa/for-sms.png') 95% center / 21% no-repeat !important;
  /* color used for image: #ddd */
}

.sfa-option:hover {
  background-color: #eee !important;
  transition: 0.3s;
  -webkit-transition: 0.3s;
}

.sfa-option a {
  display: inline-block;
  width: 100%;
  padding-top: 25px;
  padding-left: 20px;
  padding-bottom: 25px;
}

html[dir=rtl] .sfa-option a {
  padding-left: unset !important;
  padding-right: 20px;
}

.sfa-option a span:first-child {
  font-size: 20px;
  font-weight: 500;
}

.sfa-option a span:last-child {
  max-width: 200px !important;
  margin-top: 3px;
}

.sfa-option a span:last-child.sfa-help-text {
  display: block !important;
}

.sfa-option .fl-tag {
  display: inline-block;
  margin-top: 5px;
  margin-left: 3px;
}

html[dir=rtl] .sfa-option .fl-tag {
  margin-left: unset !important;
  margin-right: 3px;
}

.chart-legend-wrap {
  max-height: 65px !important;
  min-height: 65px !important;
  overflow: auto;
  margin-top: 10px;
}

.chart-legend-wrap::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.chart-legend-wrap::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .26);
}

.chart-legend .chart-legend-item {
  width: auto !important;
  padding: 8px !important;
  float: left;
}

html[dir=rtl] .chart-legend .chart-legend-item {
  float: right;
}

.chart-legend .chart-legend-item span {
  position: relative;
  padding: 4px 6px;
  border-radius: 13px;
  color: white;
  z-index: 2;
  font-size: 13px;
  font-weight: bold;
}

.break-spaces {
  white-space: break-spaces;
}

.fl-list-header {
  line-height: 24px;
  vertical-align: middle;
  padding: 5px 0 5px 24px;
  font-size: 16px;
  font-weight: 400;
}

.fl-slightly-gray {
  background-color: #F8F8F8;
}

.text-capitalize {
  text-transform: capitalize;
}

.unset-text-capitalize {
  text-transform: unset !important;
}

button.mat-mdc-fab[disabled] .mat-icon, a.mdc-fab[disabled] .mat-icon {
  color: white;
}

.fl-no-margin-bottom {
  margin-bottom: 0;
}

.fl-no-padding-bottom {
  padding-bottom: 0;
}

.fl-no-margin-top {
  margin-top: 0;
}

.fl-medium-opacity {
  opacity: 0.5;
}

.mat-column--actions-, .mat-column-actions {
  overflow: visible !important;
}

.mat-datepicker-dialog .mat-mdc-dialog-container {
  box-shadow: none;
  background: none;
}

.center-object {
  margin: 0 auto;
}

.not-found-container {
  margin: 0 70px;
}

.estimated-price-text {
  text-align: right;
  color: #909090;
}

.separate-list-table-row {
  border-top: 6px solid #F1F1F1 !important;
}

span.fl-activity-log {
  font-family: monospace !important;
  color: green !important;
}

span.fl-error-log {
  font-family: monospace !important;
  color: red !important;
}

span.fl-warning-log {
  font-family: monospace !important;
  color: orange !important;
}

.upload-progress {
  z-index: 5;
}

.icon-in-raised-button {
  margin-right: 0 !important;
  font-size: 22px !important;
  vertical-align: middle !important;
  height: unset !important;
}

.lowercase-text {
  text-transform: lowercase;
}
