@charset "UTF-8";
/**
 * Clay 3.142.2
 *
 * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
 * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
 *
 * SPDX-License-Identifier: BSD-3-Clause
 */
/**
 * Bootstrap v4.4.1
 *
 * SPDX-FileCopyrightText: © 2019 Twitter, Inc. <https://twitter.com>
 * SPDX-FileCopyrightText: © 2019 The Bootstrap Authors <https://getbootstrap.com/>
 *
 * SPDX-License-Identifier: LicenseRef-MIT-Bootstrap
 */
/**
 * Clay 3.142.2
 *
 * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
 * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
 *
 * SPDX-License-Identifier: BSD-3-Clause
 */
/**
 * Bootstrap v4.4.1
 *
 * SPDX-FileCopyrightText: © 2019 Twitter, Inc. <https://twitter.com>
 * SPDX-FileCopyrightText: © 2019 The Bootstrap Authors <https://getbootstrap.com/>
 *
 * SPDX-License-Identifier: LicenseRef-MIT-Bootstrap
 */
.quick-access-nav {
  position: fixed;
  z-index: 999;
}

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.sr-only-focusable:active, .sr-only-focusable:focus {
  clip: auto;
  height: auto;
  overflow: visible;
  position: static;
  white-space: normal;
  width: auto;
}

.lfr-asset-column-details .lfr-asset-categories {
  color: #7d7d7d;
}
.lfr-asset-column-details .lfr-asset-categories .lfr-asset-category {
  color: #555;
}
.lfr-asset-column-details .lfr-asset-description {
  color: #444;
  font-style: italic;
  margin: 0.5em auto 2em;
  -ms-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
}
.lfr-asset-column-details .lfr-asset-icon {
  border-right: 1px solid transparent;
  color: #999;
  float: left;
  line-height: 1em;
  margin-right: 10px;
  padding-right: 10px;
}
.lfr-asset-column-details .lfr-asset-icon.last {
  border-width: 0;
}
.lfr-asset-column-details .lfr-asset-tags {
  color: #7d7d7d;
}
.lfr-asset-column-details .lfr-asset-tags .tag {
  color: #555;
}
.lfr-asset-column-details .lfr-asset-metadata {
  clear: both;
  margin-bottom: 1.5em;
  padding-bottom: 1.5em;
}
.lfr-asset-column-details .lfr-panel {
  clear: both;
  margin-bottom: 0.2em;
}
.lfr-asset-column-details .lfr-panel.lfr-extended {
  border: 1px solid #ccc;
  margin-bottom: 0;
}
.lfr-asset-column-details .taglib-custom-attributes-list label,
.lfr-asset-column-details .lfr-asset-field label {
  display: block;
}
.lfr-asset-column-details .taglib-custom-attributes-list {
  margin-bottom: 1em;
}

.overlay {
  position: absolute;
}

.overlay-hidden,
.overlaymask-hidden {
  display: none;
}

.lfr-form-row {
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 1px 5px 25px;
  position: relative;
}
.lfr-form-row:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
}
.lfr-form-row:hover {
  border: solid #ccc;
  border-width: 1px 0;
  padding-top: 0;
}
.lfr-form-row.lfr-form-row-inline .form-group {
  margin-right: 5px;
}
.lfr-form-row legend .field-label {
  float: left;
  margin-right: 10px;
}
.lfr-form-row .handle-sort-vertical {
  background: url(../images/application/handle_sort_vertical.png) no-repeat 0 50%;
  cursor: move;
  padding-left: 20px;
}
.lfr-form-row fieldset {
  border-width: 0;
  margin: 0;
  padding: 0;
}

.lfr-autorow-controls {
  bottom: 5px;
  position: absolute;
  right: 5px;
}

.datepicker-popover-content .popover-content {
  padding: 0.75rem 1rem;
}

.dropdown.open > .dropdown-menu, .overlay-content .open > .dropdown-menu {
  display: block;
}

.user-avatar-link {
  display: block;
  position: relative;
}
.user-avatar-link .panel-notifications-count {
  display: block;
  margin: 0;
  max-width: none;
  position: absolute;
  right: calc(100% - 0.7rem);
  top: -0.4rem;
}
.user-avatar-link .text-default {
  align-items: center;
  display: flex;
}
.user-avatar-link .text-default .user-full-name {
  margin-left: 0.5rem;
}
@media (max-width: 575.98px) {
  .user-avatar-link .text-default .user-full-name {
    display: none;
  }
}

.user-personal-bar .fieldset {
  position: relative;
}
.user-personal-bar .user-avatar-link .panel-notifications-count {
  right: calc(100% - 1rem);
  top: -0.6rem;
}

.form-control-inline {
  background-color: transparent;
  font-size: 1.125rem;
  font-weight: 700;
}
.form-control-inline:not(:hover) {
  border-color: transparent;
}
.form-control-inline::placeholder {
  color: #a9afb5;
  font-style: italic;
}

.form-search .input-group {
  position: relative;
}
.form-search .input-group.advanced-search .search-query {
  padding-left: 40px;
  z-index: 0;
}
.form-search .input-group.advanced-search .toggle-advanced {
  cursor: pointer;
  left: 0;
  line-height: 1;
  padding: 8px 10px;
  position: absolute;
  top: 0;
}
.form-search .input-group.advanced-search .toggle-advanced .caret {
  margin-top: 7px;
}
.form-search .input-group.advanced-search .toggle-advanced .icon-search {
  font-size: 14px;
}
@media (max-width: 991.98px) {
  .form-search .input-group {
    width: 100%;
  }
  .form-search .input-group .btn {
    clip: rect(0, 0, 0, 0);
    left: -9999px;
    position: absolute;
  }
  .form-search .input-group input.search-query {
    width: 100%;
  }
}

.lfr-table {
  border-collapse: collapse;
  clear: both;
}
.lfr-table > tbody > tr > td,
.lfr-table > tbody > tr > th,
.lfr-table > thead > tr > td,
.lfr-table > thead > tr > th,
.lfr-table > tfoot > tr > td,
.lfr-table > tfoot > tr > th {
  padding: 0 5px;
  overflow-wrap: break-all;
  word-wrap: break-all;
}
.lfr-table > tbody > tr > td:first-child, .lfr-table > tbody > tr > td.first-child,
.lfr-table > tbody > tr > th:first-child,
.lfr-table > tbody > tr > th.first-child,
.lfr-table > thead > tr > td:first-child,
.lfr-table > thead > tr > td.first-child,
.lfr-table > thead > tr > th:first-child,
.lfr-table > thead > tr > th.first-child,
.lfr-table > tfoot > tr > td:first-child,
.lfr-table > tfoot > tr > td.first-child,
.lfr-table > tfoot > tr > th:first-child,
.lfr-table > tfoot > tr > th.first-child {
  padding-left: 0;
}
.lfr-table > tbody > tr > td:last-child, .lfr-table > tbody > tr > td.last-child,
.lfr-table > tbody > tr > th:last-child,
.lfr-table > tbody > tr > th.last-child,
.lfr-table > thead > tr > td:last-child,
.lfr-table > thead > tr > td.last-child,
.lfr-table > thead > tr > th:last-child,
.lfr-table > thead > tr > th.last-child,
.lfr-table > tfoot > tr > td:last-child,
.lfr-table > tfoot > tr > td.last-child,
.lfr-table > tfoot > tr > th:last-child,
.lfr-table > tfoot > tr > th.last-child {
  padding-right: 0;
}
.lfr-table > tbody > tr > th,
.lfr-table > thead > tr > th,
.lfr-table > tfoot > tr > th {
  font-weight: bold;
}

.lfr-pagination:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
}
.lfr-pagination .dropdown-menu {
  display: none;
}
.lfr-pagination .dropdown-toggle .icon-caret-down {
  margin-left: 5px;
}
.lfr-pagination .lfr-pagination-controls {
  float: left;
}
.lfr-pagination .lfr-pagination-controls .search-results {
  display: inline-block;
  margin-left: 10px;
  margin-top: 5px;
  top: 10px;
}
.lfr-pagination .lfr-pagination-controls li .lfr-pagination-link {
  border-width: 0;
  clear: both;
  color: #333;
  display: block;
  font-weight: normal;
  line-height: 20px;
  padding: 3px 20px;
  text-align: left;
  white-space: nowrap;
  width: 100%;
}
.lfr-pagination .lfr-pagination-delta-selector {
  float: left;
}
@media (max-width: 991.98px) {
  .lfr-pagination .lfr-pagination-delta-selector .lfr-icon-menu-text {
    display: none;
  }
}
.lfr-pagination .pagination-content {
  float: right;
}

.lfr-panel.lfr-extended {
  border: 1px solid transparent;
  border-color: #dedede #bfbfbf #bfbfbf #dedede;
}
.lfr-panel.lfr-extended.lfr-collapsible .lfr-panel-button {
  display: block;
}
.lfr-panel.lfr-extended.lfr-collapsed .lfr-panel-titlebar {
  border-bottom-width: 0;
}
.lfr-panel.panel-default .panel-heading {
  border-bottom-width: 0;
}
.lfr-panel .toggler-header {
  cursor: pointer;
}

.sidebar-sm .sheet-subtitle {
  font-size: 0.75rem;
  margin-bottom: 1rem;
}
.sidebar-sm .form-control[type=file] {
  padding: 0;
}
.sidebar-sm .article-content-description .input-localized.input-localized-editor .input-group-item .wrapper .form-control {
  min-height: auto;
  padding: 0.285rem 0.75rem;
}
.sidebar-sm .list-group-item-flex {
  padding: 0.5rem 0.25rem;
}
.sidebar-sm .list-group-item-flex .autofit-col {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.lfr-translation-manager {
  border-radius: 4px;
  display: inline-block;
  margin-top: 0.5em;
  min-height: 1.8em;
}
.lfr-translation-manager .lfr-translation-manager-content .lfr-translation-manager-default-locale {
  display: inline-block;
  width: auto;
}
.lfr-translation-manager .lfr-translation-manager-content .lfr-translation-manager-icon-menu {
  float: none;
  padding: 0.4em 0;
}
.lfr-translation-manager .lfr-translation-manager-content .lfr-translation-manager-icon-menu li,
.lfr-translation-manager .lfr-translation-manager-content .lfr-translation-manager-icon-menu li strong {
  display: inline;
}
.lfr-translation-manager .lfr-translation-manager-content .lfr-translation-manager-translations-message {
  margin: 10px 0;
}
.lfr-translation-manager .lfr-translation-manager-available-translations {
  white-space: normal;
}
.lfr-translation-manager .lfr-translation-manager-available-translations .lfr-translation-manager-available-translations-links {
  line-height: 1;
}
.lfr-translation-manager .lfr-translation-manager-translation {
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  margin: 0.2em;
  padding: 0.4em 0.3em 0.4em 0.5em;
  text-decoration: none;
}
.lfr-translation-manager .lfr-translation-manager-translation * {
  vertical-align: middle;
}
.lfr-translation-manager .lfr-translation-manager-translation img {
  margin-right: 0.3em;
}
.lfr-translation-manager .lfr-translation-manager-translation:hover {
  background-color: #d1e5ef;
}
.lfr-translation-manager .lfr-translation-manager-translation.lfr-translation-manager-translation-editing {
  background-color: #598bec;
  border-color: #224fa8;
  color: #fff;
}
.lfr-translation-manager .lfr-translation-manager-change-default-locale {
  margin: 0 0.4em;
}
.lfr-translation-manager .lfr-translation-manager-delete-translation {
  display: inline-block;
  padding: 0 2px;
}
.lfr-translation-manager .lfr-translation-manager-delete-translation svg {
  pointer-events: none;
}

.lfr-tree a {
  text-decoration: none;
}
.lfr-tree li {
  margin-bottom: 2px;
  padding-left: 0;
}
.lfr-tree li ul li, .lfr-tree li.tree-item {
  padding-left: 0;
}
.lfr-tree li.tree-item {
  padding-left: 5px;
}
.lfr-tree li.tree-item li {
  padding-left: 20px;
}
.lfr-tree li.tree-item ul {
  margin-left: 0;
  margin-top: 5px;
}

.lfr-upload-container {
  margin-bottom: 1rem;
}
.lfr-upload-container .upload-target {
  border: 3px dashed #e5e7e9;
  margin-bottom: 1rem;
  min-height: 2rem;
  padding: 2rem 0;
  position: relative;
  text-align: center;
}
.upload-drop-intent .lfr-upload-container .upload-target {
  z-index: 100;
}
.upload-drop-active .lfr-upload-container .upload-target {
  background-color: #92e5a5;
  border-color: #69db83;
}
.lfr-upload-container .upload-target .drop-file-text {
  font-weight: normal;
}
.mobile .lfr-upload-container .upload-target .drop-file-text {
  display: none;
}
.lfr-upload-container .upload-target .small {
  display: block;
  margin: 5px 0;
  text-transform: lowercase;
}
.lfr-upload-container .manage-upload-target {
  padding-top: 5px;
  position: relative;
}
.lfr-upload-container .manage-upload-target .select-files {
  float: left;
  line-height: 0;
  margin: 0 1.125rem 1.125rem;
  padding: 0 0 0 5px;
}
.lfr-upload-container .cancel-uploads,
.lfr-upload-container .clear-uploads {
  background-repeat: no-repeat;
  float: right;
}
.lfr-upload-container .cancel-uploads {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAnFBMVEX////4YWP/dXjyS07/dXj9bXD6a234YWP4XWD2WVv2VFfsOTzoLzHmKSvkISP2VFf0TE/vREftPT/iHB72WVvvREf0TE//hon/gYX/fYD/e33/dXj/cXP9bXD/a236a23/Zmb4YWP4XWD/Wl32WVv/VVj2VFf3VFb0TE/yS072SUvvREfuQELtPT/sOTzrMzXoLzHnLC/mKSvkISPh2jkWAAAAF3RSTlMAESIiMzMzMzMzMzMzMzNERERERHd3qtw8lzkAAACOSURBVHjaZcjZDsIgEIXhcd+tu5YBKUixttS6vP+7OQKJTfxvTr4D7Tpxu/2w410SjDjwVvLQ805TPiRryfQeKM6OTI68K/BJPHGlJZJjSqSMofEOGXbJecsTgzkds58V5+J8refBU7Jx9yIrmkW0sA6gqbLyuaRjZZWtgXq58rEFan0jf3uTfRuIkf/7AO8DDcVPSSG3AAAAAElFTkSuQmCC);
  margin-right: 0;
}
.lfr-upload-container .clear-uploads {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAdVBMVEX///+6QwTEVx65RQPEVx3EWB64RQPDVxq5RAO5RAO5RQPATQ65RQO5RQO5RQPRczjJZCW9TQTLay28QgTdZAHhaAPmdyHqeQXrikDudgDvfxj0nWP1qHL2tY33tY34dgD+za7+1rj/dxH/fxj/hiH/kk3///9TM3sUAAAAFHRSTlMAbXd4eHh6gN3e3+Hi4+T5+/z8/mIsq5IAAABHSURBVBjTY2CgGWDlFuZhRuIz8cspyggxIgQ4ZFWVVCQ4EQLCCmpqalLCCAFeaWV5SVE+hAC7gJi4iCAbkqksXMK8bNRzNADCOQN++eLhCQAAAABJRU5ErkJggg==);
  padding-left: 16px;
}
.lfr-upload-container .upload-file.upload-complete.file-saved {
  padding-left: 25px;
}
.lfr-upload-container .upload-file .file-title {
  display: inline-block;
  max-width: 95%;
  overflow: hidden;
  padding-right: 16px;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}
.lfr-upload-container .upload-file .icon-file {
  font-size: 40px;
}
.lfr-upload-container .upload-list-info {
  margin: 1em 0 0.5em;
}
.lfr-upload-container .upload-list-info .h4,
.lfr-upload-container .upload-list-info h4 {
  font-size: 1.3em;
}
.lfr-upload-container .cancel-button {
  color: #6c757d;
  margin-top: 1px;
  position: absolute;
  right: 5px;
  top: 50%;
  white-space: nowrap;
}
.lfr-upload-container .cancel-button .cancel-button-text {
  display: none;
  margin-left: 5px;
}
.lfr-upload-container .cancel-button:hover .cancel-button-text {
  display: inline;
}
.lfr-upload-container .cancel-button .lexicon-icon {
  height: 12px;
}
.lfr-upload-container .delete-button {
  color: #6c757d;
}
.lfr-upload-container .delete-button-col {
  padding-right: 10px;
}
.lfr-upload-container .file-added .success-message {
  float: right;
  font-weight: normal;
}
.lfr-upload-container .upload-error {
  opacity: 1;
  padding-left: 25px;
}
.lfr-upload-container .upload-complete .cancel-button,
.lfr-upload-container .delete-button,
.lfr-upload-container .upload-complete.file-saved .delete-button,
.lfr-upload-container .upload-complete.upload-error .delete-button {
  display: none;
}
.lfr-upload-container .multiple-files .upload-error {
  background: #f5c4c9 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJPSURBVDjLpZPLS5RhFMYfv9QJlelTQZwRb2OKlKuINuHGLlBEBEOLxAu46oL0F0QQFdWizUCrWnjBaDHgThCMoiKkhUONTqmjmDp2GZ0UnWbmfc/ztrC+GbM2dXbv4ZzfeQ7vefKMMfifyP89IbevNNCYdkN2kawkCZKfSPZTOGTf6Y/m1uflKlC3LvsNTWArr9BT2LAf+W73dn5jHclIBFZyfYWU3or7T4K7AJmbl/yG7EtX1BQXNTVCYgtgbAEAYHlqYHlrsTEVQWr63RZFuqsfDAcdQPrGRR/JF5nKGm9xUxMyr0YBAEXXHgIANq/3ADQobD2J9fAkNiMTMSFb9z8ambMAQER3JC1XttkYGGZXoyZEGyTHRuBuPgBTUu7VSnUAgAUAWutOV2MjZGkehgYUA6O5A0AlkAyRnotiX3MLlFKduYCqAtuGXpyH0XQmOj+TIURt51OzURTYZdBKV2UBSsOIcRp/TVTT4ewK6idECAihtUKOArWcjq/B8tQ6UkUR31+OYXP4sTOdisivrkMyHodWejlXwcC38Fvs8dY5xaIId89VlJy7ACpCNCFCuOp8+BJ6A631gANQSg1mVmOxxGQYRW2nHMha4B5WA3chsv22T5/B13AIicWZmNZ6cMchTXUe81Okzz54pLi0uQWp+TmkZqMwxsBV74Or3od4OISPr0e3SHa3PX0f3HXKofNH/UIG9pZ5PeUth+CyS2EMkEqs4fPEOBJLsyske48/+xD8oxcAYPzs4QaS7RR2kbLTTOTQieczfzfTv8QPldGvTGoF6/8AAAAASUVORK5CYII=) no-repeat 5px 5px;
  border-color: #bd2130;
  color: #bd2130;
  font-weight: normal;
  margin-bottom: 16px;
  padding: 8px 8px 8px 24px;
}
.lfr-upload-container .multiple-files .upload-error .error-message {
  display: block;
}
.lfr-upload-container .multiple-files .upload-complete.file-saved .form-check-middle-left .card-body,
.lfr-upload-container .multiple-files .upload-complete.upload-error .form-check-middle-left .card-body {
  padding-left: 1rem;
}
.lfr-upload-container .multiple-files .upload-complete.file-saved .form-check-middle-left .custom-control-label,
.lfr-upload-container .multiple-files .upload-complete.upload-error .form-check-middle-left .custom-control-label {
  display: none;
}
.lfr-upload-container .single-file .upload-error {
  list-style: none;
  margin-top: 1em;
}
.lfr-upload-container .single-file .upload-error .upload-error-message {
  margin-bottom: 0.5em;
}
.lfr-upload-container .upload-complete {
  padding-left: 5px;
}
.lfr-upload-container .upload-complete .error-message,
.lfr-upload-container .upload-complete .success-message {
  font-weight: bold;
  margin-left: 1em;
}
.lfr-upload-container .upload-complete .delete-button {
  display: inline-block;
}
.lfr-upload-container .upload-complete .select-file:disabled + .custom-control-label {
  display: none;
}
.lfr-upload-container .progress {
  display: none;
  margin-top: 0.5rem;
}
.lfr-upload-container .file-uploading .progress {
  display: flex;
}

.lfr-alert-container {
  left: 0;
  position: absolute;
  right: auto;
  top: auto;
  width: 100%;
  z-index: 430;
}
.lfr-alert-container.inline-alert-container {
  position: relative;
}
.lfr-alert-container.inline-alert-container .lfr-alert-wrapper {
  padding: 0;
}
.lfr-alert-container .lfr-alert-wrapper {
  margin-bottom: 5px;
  overflow: hidden;
}

.lfr-search-container td .overlay.entry-action {
  position: static;
}
.lfr-search-container td .overlay.entry-action .btn a {
  display: block;
  padding: 4px 12px;
}

.contextual-sidebar {
  height: calc(
		100vh - var(--control-menu-container-height) - 49px
	);
  pointer-events: none;
  position: fixed;
  right: 0;
  top: calc(var(--control-menu-container-height) + 49px);
  transform: translateX(100%);
  transition: transform ease 0.5s;
  visibility: hidden;
  width: 320px;
  will-change: transform;
}
.contextual-sidebar.contextual-sidebar-visible {
  pointer-events: auto;
  transform: translateX(0);
  visibility: visible;
}

@media (min-width: 768px) {
  .contextual-sidebar {
    height: calc(
			100vh - var(--control-menu-container-height) - 64px
		);
    top: calc(
			var(--control-menu-container-height) + 64px
		);
  }
  .contextual-sidebar-content {
    transition: padding ease 0.5s;
    will-change: padding;
  }
  .contextual-sidebar-visible .contextual-sidebar-content,
  .contextual-sidebar-visible + .contextual-sidebar-content {
    padding-right: 320px;
  }
}
.taglib-diff-html div.diff-removed-image {
  background: #fdc6c6 url(../images/diff/minus.png);
}
.taglib-diff-html div.diff-added-image {
  background: #cfc url(../images/diff/plus.png) no-repeat;
}
.taglib-diff-html div.diff-removed-image, .taglib-diff-html div.diff-added-image {
  height: 300px;
  margin: 2px;
  opacity: 0.55;
  position: absolute;
  width: 200px;
}
.taglib-diff-html span.diff-html-added {
  background-color: #cfc;
  font-size: 1em;
}
.taglib-diff-html span.diff-html-added img {
  border: 2px solid #cfc;
}
.taglib-diff-html span.diff-html-changed {
  background: url(../images/diff/underline.png) bottom repeat-x;
}
.taglib-diff-html span.diff-html-changed img {
  border: 2px dotted #009;
}
.taglib-diff-html span.diff-html-removed {
  background-color: #fdc6c6;
  font-size: 1em;
  text-decoration: line-through;
}
.taglib-diff-html span.diff-html-removed img {
  border: 2px solid #fdc6c6;
}

.taglib-discussion {
  font-size: 0.875rem;
  margin-top: 1rem;
}
.taglib-discussion .actions-menu .component-action {
  display: inline-flex;
}
.taglib-discussion .button-holder {
  margin: 1rem 0;
}
.taglib-discussion .comment-container {
  margin-bottom: 1.5rem;
}
.taglib-discussion .lfr-discussion .lfr-discussion-form-edit .alloy-editor-placeholder {
  border-left-color: #dbdde1;
}
.taglib-discussion .lfr-discussion-body {
  font-size: 1rem;
}
@media (min-width: 576px) {
  .taglib-discussion .lfr-discussion-body {
    padding-left: 3.5rem;
  }
}
@media (min-width: 576px) {
  .taglib-discussion .lfr-discussion-details .taglib-user-display {
    word-wrap: break-word;
  }
}
.taglib-discussion .lfr-discussion-details .taglib-user-display .user-details .user-name {
  font-weight: bold;
  text-decoration: none;
}
.taglib-discussion .lfr-discussion-details .taglib-user-display .user-details .user-name:hover {
  text-decoration: underline;
}
.taglib-discussion .lfr-discussion-details .taglib-user-display .user-profile-image .avatar {
  background-size: 50px;
}
.taglib-discussion .lfr-discussion-container {
  border-bottom: 1px solid #e7e7ed;
  margin-bottom: 1.5rem;
}
.taglib-discussion .lfr-discussion-container:first-of-type {
  border-top: 1px solid #e7e7ed;
  padding-top: 1.5rem;
}
.taglib-discussion .lfr-discussion-container:last-of-type {
  border-bottom: 0;
}
.taglib-discussion .lfr-discussion-container .lfr-discussion {
  padding-left: 1rem;
}
.taglib-discussion .lfr-discussion-container .lfr-discussion .lfr-discussion .lfr-discussion .lfr-discussion {
  padding-left: 0;
}
@media (min-width: 576px) {
  .taglib-discussion .lfr-discussion-container .lfr-discussion {
    padding-left: 3.5rem;
  }
}
.taglib-discussion .lfr-discussion-parent-link {
  color: #67678c;
  font-weight: 600;
  margin-left: 1em;
}
@media (max-width: 767.98px) {
  .taglib-discussion .lfr-discussion-parent-link {
    display: block;
    margin-left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.taglib-discussion .lfr-discussion-controls .autofit-col:first-of-type > .btn-outline-borderless {
  margin-left: -0.75rem;
}
.taglib-discussion .lfr-discussion-more-comments {
  border-top: 1px solid #e7e7ed;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  text-align: center;
}
.taglib-discussion .username {
  color: #272833;
  font-weight: 600;
}
.taglib-discussion .taglib-workflow-status {
  margin-left: 0.5rem;
}
.taglib-discussion .workflow-value {
  text-transform: uppercase;
}
@media (min-width: 576px) {
  .taglib-discussion .actions-menu {
    display: none;
  }
  .taglib-discussion .comment-container:hover .actions-menu,
  .taglib-discussion .actions-menu:focus,
  .taglib-discussion .actions-menu.open {
    display: inline-block;
  }
}

.drop-zone {
  min-height: 80px;
  padding: 20px;
  text-align: center;
}
.drop-zone.drop-enabled {
  outline: 2px dashed transparent;
}
.drop-zone.drop-enabled:not(.no-border) {
  outline-color: rgba(176, 180, 187, 0.5);
}
.drop-zone p {
  margin: 10px auto 0;
  max-width: 75%;
}

.drop-here-info {
  font-size: 25px;
  height: 100%;
  left: 0;
  min-height: 100px;
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 0;
  visibility: hidden;
  width: 100%;
  transition: all 0.2s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .drop-here-info {
    transition: none;
  }
}
.drop-here-info {
  transition: none;
}

.drop-here-info .drop-here-indicator {
  height: 115px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
}
.drop-here-info .drop-icons {
  display: inline-block;
  position: relative;
  width: 160px;
  transition: all 0.2s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .drop-here-info .drop-icons {
    transition: none;
  }
}
.drop-here-info .drop-icons {
  transition: none;
}

.drop-here-info .drop-icons span {
  border-radius: 3px;
  position: absolute;
  text-align: center;
  transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .drop-here-info .drop-icons span {
    transition: none;
  }
}
.drop-here-info .drop-icons span {
  transition: none;
}

.drop-here-info .drop-icons span:nth-of-type(1) {
  box-shadow: 5px 4px 0 0 rgba(0, 0, 0, 0.08);
  height: 60px;
  left: 0;
  line-height: 60px;
  opacity: 0;
  top: 10px;
  transform: rotate(25deg);
  width: 60px;
}
.drop-here-info .drop-icons span:nth-of-type(2) {
  background: #00c2ff;
  color: #fff;
  height: 80px;
  left: 40px;
  line-height: 80px;
  width: 80px;
  z-index: 2;
}
.drop-here-info .drop-icons span:nth-of-type(3) {
  box-shadow: -5px 4px 0 0 rgba(0, 0, 0, 0.08);
  display: block;
  font-size: 45px;
  height: 70px;
  left: 90px;
  line-height: 70px;
  opacity: 0;
  position: relative;
  top: 8px;
  transform: rotate(-25deg);
  width: 70px;
  z-index: 1;
}
.drop-here-info .drop-icons span:nth-of-type(1), .drop-here-info .drop-icons span:nth-of-type(3) {
  background: #e8e6e8;
  color: #a5a6ac;
}
.drop-here-info .drop-text {
  color: #fff;
  display: block;
  font-size: 20px;
  margin-left: 0;
  margin-top: 20px;
}
.drop-active .drop-here-info {
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 1;
  visibility: visible;
  z-index: 100;
}
.drop-active .drop-here-info .drop-icons span:nth-of-type(1), .drop-active .drop-here-info .drop-icons span:nth-of-type(3) {
  opacity: 1;
}
.drop-active .drop-here-info span:nth-of-type(1) {
  transform: rotate(-20deg);
}
.drop-active .drop-here-info span:nth-of-type(2) {
  transform: scale(1);
}
.drop-active .drop-here-info span:nth-of-type(3) {
  transform: rotate(15deg);
}

.taglib-empty-result-message.sheet {
  margin-bottom: 24px;
}
.taglib-empty-result-message .taglib-empty-result-message-description {
  color: #6c757d;
  margin-top: 8px;
}
.taglib-empty-result-message .taglib-empty-result-message-header,
.taglib-empty-result-message .taglib-empty-result-message-header-has-plus-btn,
.taglib-empty-result-message .taglib-empty-search-result-message-header {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  margin-left: auto;
  margin-right: auto;
}
.taglib-empty-result-message .taglib-empty-result-message-header,
.taglib-empty-result-message .taglib-empty-result-message-header-has-plus-btn {
  max-width: 200px;
  padding-top: 250px;
}
.taglib-empty-result-message .taglib-empty-result-message-header,
.taglib-empty-result-message .taglib-empty-result-message-header-has-plus-btn {
  background-image: url(../images/states/empty_state.svg);
}
@media (prefers-reduced-motion: reduce) {
  .taglib-empty-result-message .taglib-empty-result-message-header,
  .taglib-empty-result-message .taglib-empty-result-message-header-has-plus-btn {
    background-image: url(../images/states/empty_state_reduced_motion.svg);
  }
}
.c-prefers-reduced-motion .taglib-empty-result-message .taglib-empty-result-message-header,
.c-prefers-reduced-motion .taglib-empty-result-message .taglib-empty-result-message-header-has-plus-btn {
  background-image: url(../images/states/empty_state_reduced_motion.svg);
}
.taglib-empty-result-message .taglib-empty-search-result-message-header {
  background-image: url(../images/states/search_state.svg);
  max-width: 210px;
  padding-top: 232px;
}
@media (prefers-reduced-motion: reduce) {
  .taglib-empty-result-message .taglib-empty-search-result-message-header {
    background-image: url(../images/states/search_state_reduced_motion.svg);
  }
}
.c-prefers-reduced-motion .taglib-empty-result-message .taglib-empty-search-result-message-header {
  background-image: url(../images/states/search_state_reduced_motion.svg);
}
.taglib-empty-result-message .taglib-empty-state {
  background-image: url(../images/states/empty_state.svg);
  margin: auto;
  max-width: 250px;
  padding-top: 250px;
}
@media (prefers-reduced-motion: reduce) {
  .taglib-empty-result-message .taglib-empty-state {
    background-image: url(../images/states/empty_state_reduced_motion.svg);
  }
}
.c-prefers-reduced-motion .taglib-empty-result-message .taglib-empty-state {
  background-image: url(../images/states/empty_state_reduced_motion.svg);
}
.taglib-empty-result-message .taglib-success-state {
  background-image: url(../images/states/success_state.svg);
  margin: auto;
  max-width: 250px;
  padding-top: 250px;
}
@media (prefers-reduced-motion: reduce) {
  .taglib-empty-result-message .taglib-success-state {
    background-image: url(../images/states/success_state_reduced_motion.svg);
  }
}
.c-prefers-reduced-motion .taglib-empty-result-message .taglib-success-state {
  background-image: url(../images/states/success_state_reduced_motion.svg);
}
.taglib-empty-result-message .taglib-search-state {
  background-image: url(../images/states/search_state.svg);
  margin: auto;
  max-width: 250px;
  padding-top: 250px;
}
@media (prefers-reduced-motion: reduce) {
  .taglib-empty-result-message .taglib-search-state {
    background-image: url(../images/states/search_state_reduced_motion.svg);
  }
}
.c-prefers-reduced-motion .taglib-empty-result-message .taglib-search-state {
  background-image: url(../images/states/search_state_reduced_motion.svg);
}
.taglib-empty-result-message .taglib-empty-result-message-title {
  font-size: 1rem;
  margin-top: 48px;
}
.taglib-empty-result-message .taglib-empty-result-message-description {
  font-size: 0.875rem;
}
.taglib-empty-result-message .taglib-empty-result-message-header + .taglib-empty-result-message-title,
.taglib-empty-result-message .taglib-empty-search-result-message-header + .taglib-empty-result-message-title,
.taglib-empty-result-message .taglib-empty-state + .taglib-empty-result-message-title,
.taglib-empty-result-message .taglib-success-state + .taglib-empty-result-message-title,
.taglib-empty-result-message .taglib-search-state + .taglib-empty-result-message-title {
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;
}
.taglib-empty-result-message .taglib-empty-result-message-header ~ .taglib-empty-result-message-description, .taglib-empty-result-message .taglib-empty-result-message-header ~ .taglib-empty-result-message-actions,
.taglib-empty-result-message .taglib-empty-search-result-message-header ~ .taglib-empty-result-message-description,
.taglib-empty-result-message .taglib-empty-search-result-message-header ~ .taglib-empty-result-message-actions,
.taglib-empty-result-message .taglib-empty-state ~ .taglib-empty-result-message-description,
.taglib-empty-result-message .taglib-empty-state ~ .taglib-empty-result-message-actions,
.taglib-empty-result-message .taglib-success-state ~ .taglib-empty-result-message-description,
.taglib-empty-result-message .taglib-success-state ~ .taglib-empty-result-message-actions,
.taglib-empty-result-message .taglib-search-state ~ .taglib-empty-result-message-description,
.taglib-empty-result-message .taglib-search-state ~ .taglib-empty-result-message-actions {
  font-size: 1rem;
  text-align: center;
}

.field-wrapper.form-inline .control-label {
  display: inline-block;
}

.field-wrapper-html .input-localized .input-group-item {
  flex-wrap: nowrap;
}

.taglib-header {
  border-bottom: 1px solid #c8c9ca;
  color: #555;
  margin-bottom: 1em;
  padding-bottom: 10px;
}
.taglib-header .header-title {
  display: inline-block;
  margin: 0.1em;
  max-width: 100%;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: normal;
}
.taglib-header .header-back-to {
  display: inline-block;
  vertical-align: middle;
}
.taglib-header .header-back-to a {
  display: block;
  font-weight: bold;
  padding: 0 0.3em 0 0;
  text-decoration: none;
}

.taglib-icon {
  text-decoration: none;
}
.taglib-icon:not(.btn):hover .taglib-text, .taglib-icon:not(.btn):focus .taglib-text {
  text-decoration: underline;
}
.taglib-icon[lang] > img {
  vertical-align: baseline;
  width: 16px;
}

.taglib-icon-help {
  color: #6c757d !important;
}
.taglib-icon-help:hover, .taglib-icon-help:active {
  color: #343a40 !important;
}

.icon-monospaced {
  color: inherit;
  display: inline-block;
  height: 2rem;
  line-height: 34px;
  text-align: center;
  width: 2rem;
}
.icon-monospaced.lexicon-icon {
  padding: 8px;
}

.taglib-icon-list li {
  float: left;
  margin-right: 1em;
}
.taglib-icon-list:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
}

.lfr-icon-menu .lfr-icon-menu-icon {
  max-width: none;
}
@media (max-width: 767.98px) {
  .table-cell.last .lfr-icon-menu .dropdown-toggle {
    text-align: center;
  }
  .table-cell.last .lfr-icon-menu .dropdown-toggle > img,
  .table-cell.last .lfr-icon-menu .dropdown-toggle .lfr-icon-menu-text {
    display: none;
  }
}

.lfr-menu-list {
  float: none;
  overflow-y: auto;
  position: relative;
}
.lfr-menu-list.direction-right {
  margin: 0 2px;
}
.lfr-menu-list.dropdown-menu {
  float: none;
  position: relative;
}
@media (max-width: 991.98px) {
  .lfr-menu-list.dropdown-menu > li > a {
    font-size: 22px;
    line-height: 40px;
    white-space: normal;
  }
  .lfr-menu-list.dropdown-menu > li > a img {
    margin-bottom: 3px;
  }
}
.lfr-menu-list.dropdown-menu .search-panel {
  margin-bottom: 0;
}
.lfr-menu-list.dropdown-menu .search-panel .form-group {
  margin: 0 16px;
}
.lfr-menu-list.dropdown-menu .search-panel .menu-item-filter {
  width: auto;
}
body > .lfr-menu-list ul {
  border-radius: 4px;
}

.lfr-icon-menu-open:after {
  clear: both;
  content: "";
  display: table;
}
.lfr-icon-menu-open .dropdown-menu {
  position: static;
}

.input-localized.input-localized-editor .form-control {
  border-width: 0;
  height: 100%;
  padding: 0;
}
.input-localized .input-group-item {
  flex-direction: column;
}
.input-localized .input-localized-content {
  margin-left: 6px;
}
.input-group .input-localized .input-localized-content {
  margin-top: 3px;
}
.input-localized .lfr-input-localized .lfr-input-localized-state {
  background-color: #ddd;
}
.input-localized .lfr-input-localized .lfr-input-localized-state.lfr-input-localized-state-error {
  background-color: #ff0047;
}
.input-localized .lfr-input-localized-default a {
  margin-right: 14px;
}
.input-localized .lfr-input-localized-state {
  height: 4px;
  margin: 3px 5px;
  width: 4px;
}
.input-localized .palette-item-inner .lfr-input-localized-flag {
  font-size: 16px;
  opacity: 0.5;
}
.input-localized .palette-item,
.input-localized .palette-item-hover,
.input-localized .palette-item-hover .palette-item-inner {
  border-color: transparent;
}
.input-localized .palette-item-inner {
  border-color: #666;
  display: block;
  height: 16px;
  width: 16px;
}
.input-localized .palette-item-selected .lfr-input-localized-state {
  background: #27c1f2;
}

.input-localized-palette-container .palette-items-container {
  font-size: 0;
  margin: 0;
  white-space: normal;
}
.input-localized-palette-container .palette-item {
  border-width: 0;
  padding: 0.5rem 1.25rem;
}
.input-localized-palette-container .palette-item-inner {
  border: 1px solid;
  margin-right: 4px;
  width: 16px;
}
.input-localized-palette-container .palette-item-inner img {
  display: block;
}

.taglib-move-boxes {
  margin-bottom: 1em;
}
.taglib-move-boxes label {
  border-bottom: 1px solid transparent;
  display: block;
  margin-bottom: 5px;
  padding: 5px;
}
.taglib-move-boxes .toolbar {
  text-align: center;
}
.taglib-move-boxes .arrow-button img {
  border-width: 0;
  height: 16px;
  width: 16px;
}
.taglib-move-boxes .choice-selector {
  width: 100%;
}
.taglib-move-boxes .choice-selector label {
  background: #ebf1f9;
  border-bottom-color: #8db2f3;
}
.taglib-move-boxes .field-content {
  margin-bottom: 0;
}
.taglib-move-boxes .move-arrow-buttons {
  margin-top: 5em;
}
.taglib-move-boxes .move-arrow-buttons .arrow-button {
  display: block;
}
.taglib-move-boxes .sortable-container {
  margin-top: 10px;
}
.taglib-move-boxes .sortable-container .btn.edit-selection {
  margin-bottom: 10px;
}
.taglib-move-boxes .sortable-container .move-option {
  background-color: transparent;
  border-top: 1px solid #ddd;
  display: none;
  margin: 2px 0;
  padding: 2px;
  position: relative;
}
.taglib-move-boxes .sortable-container .move-option.selected {
  display: block;
}
.taglib-move-boxes .sortable-container .move-option.move-option-dragging {
  background-color: #fafafa;
}
.taglib-move-boxes .sortable-container .move-option .checkbox,
.taglib-move-boxes .sortable-container .move-option .handle {
  position: absolute;
}
.taglib-move-boxes .sortable-container .move-option .checkbox {
  display: none;
  margin: 7px 0 0 5px;
}
.taglib-move-boxes .sortable-container .move-option .handle {
  color: #999;
  cursor: pointer;
  font-size: 1.5em;
  padding: 6px;
}
.taglib-move-boxes .sortable-container .move-option .title {
  font-size: 1.2em;
  margin: 1px 0 1px 30px;
}
.taglib-move-boxes .sortable-container.edit-list-active .move-option {
  display: block;
}
.taglib-move-boxes .sortable-container.edit-list-active .move-option .checkbox {
  display: inline-block;
}
.taglib-move-boxes .sortable-container.edit-list-active .move-option .handle {
  display: none;
}
.mobile .taglib-move-boxes .selector-container {
  display: none;
}

.item-selector .card-row > .autofit-col-expand {
  padding-top: 4px;
}
.item-selector .drop-zone {
  background-color: #f1f2f5;
  margin-top: 1rem;
}
.item-selector .input-file {
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 0.1px;
  z-index: -1;
}
.item-selector .input-file + label {
  position: relative;
}
.item-selector .input-file + label::before {
  border-radius: 4px;
  bottom: -2px;
  content: "";
  display: block;
  left: -2px;
  position: absolute;
  right: -2px;
  top: -2px;
  transition: box-shadow 0.15s ease-in-out;
}
.item-selector .input-file:focus + label::before {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #75b8ff;
}
.item-selector .item-selector-list-row:hover {
  background-color: #e5f2ff;
  cursor: pointer;
}

.lfr-map {
  border: 1px solid #ccc;
  min-height: 400px;
  width: 100%;
}
.lfr-map .home-button {
  margin: 5px;
}
@media (max-width: 575.98px) {
  .lfr-map .home-button {
    height: 35px;
    width: 45px;
  }
}
.lfr-map .search-controls {
  font-size: 15px;
  margin-top: 5px;
  width: 100%;
}
@media (min-width: 576px) {
  .lfr-map .search-controls {
    width: 50%;
  }
}
.lfr-map .search-controls .search-input {
  width: 100%;
}

.navbar .navbar-collapse {
  max-height: none;
}
.navbar .navbar-collapse:after, .navbar .navbar-collapse:before {
  display: inline;
}
@media (max-width: 767.98px) {
  .navbar .navbar-search {
    background-color: #f3f3f3;
    border-top-width: 0;
    width: 100%;
  }
}
.navbar .navbar-search .form-search {
  margin: 8px 0;
}
@media (min-width: 768px) {
  .navbar .navbar-search .form-search {
    float: right;
    max-width: 275px;
  }
}
@media (max-width: 767.98px) {
  .navbar .navbar-search .form-search .input-group {
    width: 100%;
  }
}
@media (max-width: 991.98px) {
  .navbar .container .navbar-btn,
  .navbar .container-fluid .navbar-btn {
    margin-bottom: 5px;
    width: 45px;
  }
  .navbar .container .navbar-collapse.open,
  .navbar .container-fluid .navbar-collapse.open {
    border-width: 0;
    display: block;
    height: auto;
    overflow: visible;
  }
}

.taglib-portlet-preview.show-borders {
  border: 1px solid #828f95;
  margin-bottom: 1em;
  padding: 3px 3px 1em;
}
.taglib-portlet-preview.show-borders .title {
  background-color: #d3dadd;
  font-size: 1.4em;
  font-weight: bold;
  padding: 0.5em;
}
.taglib-portlet-preview .preview {
  margin: 1em;
  min-height: 90px;
}

.lfr-search-container .entry-action {
  width: 1px;
}
.lfr-search-container .entry-action .taglib-icon {
  white-space: nowrap;
}

.lfr-search-container-wrapper.lfr-search-container-fixed-first-column {
  position: relative;
}
@media (min-width: 576px) {
  .lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive {
    margin-left: 375px;
    width: auto;
  }
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table {
  position: static;
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header {
  left: 12px;
  position: fixed;
  right: 12px;
  top: -1px;
  z-index: 1020;
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header > th {
  display: block;
  padding: 0;
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header > th .lfr-search-iterator-fixed-header-inner-wrapper {
  overflow-x: hidden;
}
@media (min-width: 576px) {
  .lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header > th .lfr-search-iterator-fixed-header-inner-wrapper {
    margin-left: 375px;
  }
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header > th .lfr-search-iterator-fixed-header-inner-wrapper table {
  border-collapse: collapse;
  width: 100%;
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header > th .lfr-search-iterator-fixed-header-inner-wrapper table th {
  border-radius: 0;
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table td,
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table th {
  width: auto;
}
@media (min-width: 576px) {
  .lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table td:first-child,
  .lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table th:first-child {
    background-color: #fff;
    left: 0;
    position: absolute;
    right: 15px;
  }
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table th {
  height: auto;
}
.lfr-search-container-wrapper a:not(.btn):not(.component-action):not(.page-link) {
  color: #495057;
  font-weight: 500;
  text-decoration: underline;
}
.lfr-search-container-wrapper a:not(.btn):not(.component-action):not(.page-link):focus, .lfr-search-container-wrapper a:not(.btn):not(.component-action):not(.page-link):hover {
  color: #000;
}
.lfr-search-container-wrapper .dropdown-action .dropdown-toggle {
  color: #6c757d;
}
.lfr-search-container-wrapper .dropdown-action .dropdown-toggle:hover {
  color: #343a40;
}
.lfr-search-container-wrapper .lfr-icon-menu > .dropdown-toggle {
  color: #6c757d;
}
.lfr-search-container-wrapper .lfr-icon-menu > .dropdown-toggle:active, .lfr-search-container-wrapper .lfr-icon-menu > .dropdown-toggle:focus, .lfr-search-container-wrapper .lfr-icon-menu > .dropdown-toggle:hover {
  background-color: #f7f8f9;
  border-radius: 4px;
  color: #343a40;
}
.lfr-search-container-wrapper .lfr-search-container-list .list-group:last-child .list-group-item:nth-last-child(2) {
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
.lfr-search-container-wrapper .lfr-search-container-list + .taglib-search-iterator-page-iterator-bottom {
  margin-top: 20px;
}
.lfr-search-container-wrapper .list-group {
  margin-bottom: 0;
}
.lfr-search-container-wrapper .list-group + .list-group .list-group-header:first-child,
.lfr-search-container-wrapper .list-group + .list-group .list-group-item:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.lfr-search-container-wrapper .list-group .list-group-item .h4,
.lfr-search-container-wrapper .list-group .list-group-item h4 {
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 0;
}
.lfr-search-container-wrapper .list-group .list-group-item .h5,
.lfr-search-container-wrapper .list-group .list-group-item .h6,
.lfr-search-container-wrapper .list-group .list-group-item h5,
.lfr-search-container-wrapper .list-group .list-group-item h6 {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 0;
}
.lfr-search-container-wrapper .list-group .list-group-item span + h2.h5 {
  font-weight: 600;
}
.lfr-search-container-wrapper .list-group .list-group-item .h6 + .h5,
.lfr-search-container-wrapper .list-group .list-group-item h6 + h5 {
  font-weight: 600;
}
.lfr-search-container-wrapper .table-list tbody tr:nth-last-child(2) td:first-child,
.lfr-search-container-wrapper .table-list tbody tr:nth-last-child(2) th:first-child {
  border-bottom-left-radius: 0.25rem;
}
.lfr-search-container-wrapper .table-list tbody tr:nth-last-child(2) td:last-child,
.lfr-search-container-wrapper .table-list tbody tr:nth-last-child(2) th:last-child {
  border-bottom-right-radius: 0.25rem;
}

.user-info {
  display: flex;
}
.user-info .sticker {
  align-self: center;
}
.user-info .user-details {
  margin-left: 1rem;
}
.user-info .user-name {
  color: #343a40;
  font-weight: 600;
}
.user-info .date-info {
  color: #6c757d;
}

.user-status-tooltip .user-status-avatar {
  float: left;
  margin-right: 5px;
}
.user-status-tooltip .user-status-avatar .user-status-avatar-image {
  width: 27px;
}
.user-status-tooltip .user-status-info {
  display: inline-block;
  overflow: hidden;
}
.user-status-tooltip .user-status-info .user-status-date {
  font-size: 11px;
}

.lfr-search-container {
  margin-top: 1.5em;
  overflow: auto;
}
@media (max-width: 767.98px) {
  .lfr-search-container .selector-button {
    width: auto;
  }
}
.touch .lfr-search-container {
  -webkit-overflow-scrolling: touch;
}
.touch .lfr-search-container .searchcontainer-content .table {
  max-width: none;
}

.taglib-page-iterator {
  clear: both;
  height: auto;
  width: auto;
}
.taglib-page-iterator .lfr-pagination-buttons {
  float: right;
  margin: 0;
}
@media (max-width: 991.98px) {
  .taglib-page-iterator .lfr-pagination-buttons {
    width: 100%;
  }
}
@media (max-width: 991.98px) and (max-width: 767.98px) {
  .taglib-page-iterator .lfr-pagination-buttons {
    float: none;
    margin-top: 20px;
  }
}
@media (max-width: 991.98px) {
  .taglib-page-iterator .lfr-pagination-buttons > li {
    display: inline-block;
    width: 50%;
  }
  .taglib-page-iterator .lfr-pagination-buttons > li.first, .taglib-page-iterator .lfr-pagination-buttons > li.last {
    display: none;
  }
  .taglib-page-iterator .lfr-pagination-buttons > li > a {
    line-height: 20px;
    padding: 11px 19px;
  }
}
.taglib-page-iterator .lfr-pagination-config {
  float: left;
  line-height: 46px;
}
@media (max-width: 767.98px) {
  .taglib-page-iterator .lfr-pagination-config {
    float: none;
  }
  .taglib-page-iterator .lfr-pagination-config .current-page-menu {
    display: block;
  }
  .taglib-page-iterator .lfr-pagination-config .current-page-menu .btn {
    display: block;
  }
}
.taglib-page-iterator .lfr-pagination-config .lfr-pagination-delta-selector,
.taglib-page-iterator .lfr-pagination-config .lfr-pagination-page-selector {
  display: inline;
}
.taglib-page-iterator .lfr-pagination-config .lfr-pagination-delta-selector {
  float: none;
}
@media (max-width: 991.98px) {
  .taglib-page-iterator .lfr-pagination-config .lfr-pagination-delta-selector {
    display: none;
  }
}
.taglib-page-iterator .search-results {
  float: left;
  line-height: 46px;
  margin-left: 10px;
}
@media (max-width: 991.98px) {
  .taglib-page-iterator .search-results {
    display: none;
  }
}

@media (max-width: 991.98px) {
  ul.pagination ul.inline-scroller {
    max-height: inherit;
  }
}
.taglib-search-toggle .form-search {
  position: relative;
}
.taglib-search-toggle .form-search .input-group-btn {
  position: absolute;
}
@media (min-width: 992px) {
  .taglib-search-toggle .form-search .input-group-btn {
    position: static;
  }
}
.taglib-search-toggle .toggle-advanced {
  color: inherit;
  margin-left: 10px;
  position: absolute;
  top: 8px;
}
.taglib-search-toggle .toggle-advanced, .taglib-search-toggle .toggle-advanced:hover, .taglib-search-toggle .toggle-advanced:focus {
  text-decoration: none;
}

.taglib-search-toggle-advanced-wrapper .taglib-search-toggle-advanced {
  background-color: #fcfcfc;
  border: solid #ddd;
  border-width: 0 1px 1px;
  margin-top: 0;
  padding: 15px 15px 0;
}
.navbar-search .taglib-search-toggle-advanced-wrapper .taglib-search-toggle-advanced {
  border-width: 1px 0 0;
}
.taglib-search-toggle-advanced-wrapper .taglib-search-toggle-advanced .taglib-search-toggle-advanced-content {
  position: relative;
}
.taglib-search-toggle-advanced-wrapper .taglib-search-toggle-advanced .taglib-search-toggle-advanced-content .match-fields {
  margin-bottom: 0;
}
.taglib-search-toggle-advanced-wrapper .taglib-search-toggle-advanced .taglib-search-toggle-advanced-content .match-fields-legend {
  color: #999;
  font-size: 13px;
}
.taglib-search-toggle-advanced-wrapper .btn.close {
  margin-right: 5px;
  position: relative;
  z-index: 1;
}

.taglib-user-display {
  padding: 0.5em;
}
.taglib-user-display .avatar {
  background: no-repeat center;
  background-size: 60px;
  display: block;
  height: 60px;
  margin: 0 auto;
  width: 60px;
}
.taglib-user-display .avatar.author:after {
  background: rgba(50, 168, 230, 0.5);
  border-radius: 50%;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
}
.taglib-user-display .user-details {
  margin-top: 1em;
}
.taglib-user-display .user-name {
  font-size: 1.1em;
  font-weight: bold;
}
.taglib-user-display a .user-name {
  text-decoration: underline;
}
.taglib-user-display.display-style-1 .user-profile-image {
  float: left;
  margin-right: 24px;
}
.taglib-user-display.display-style-1 .user-name {
  display: inline-block;
  margin-top: 10px;
}
.taglib-user-display.display-style-1 .user-details {
  margin-top: 0;
}
.taglib-user-display.display-style-2 .user-profile-image,
.taglib-user-display.display-style-2 .user-name {
  clear: both;
  display: block;
  min-height: 20px;
  text-align: center;
}
.taglib-user-display.display-style-3 {
  padding: 0;
}
.taglib-user-display.display-style-3 .user-profile-image {
  display: inline-block;
  vertical-align: middle;
}

.taglib-workflow-status .workflow-id,
.taglib-workflow-status .workflow-version,
.taglib-workflow-status .workflow-status {
  color: #999;
}
.table-cell .taglib-workflow-status {
  margin: 0;
}
.table-cell .taglib-workflow-status .workflow-status {
  padding-left: 0;
}

.lfr-autocomplete-input-list .yui3-aclist-list {
  margin: 0;
}

.portal-popup .sheet > .lfr-nav {
  margin-top: -24px;
}
.portal-popup .contacts-portlet .portlet-configuration-container .form {
  position: static;
}
.portal-popup .lfr-form-content {
  padding: 24px 12px;
}
.portal-popup .portlet-body,
.portal-popup .portlet-boundary,
.portal-popup .portlet-column,
.portal-popup .portlet-layout {
  height: 100%;
}
.portal-popup .portlet-column {
  position: static;
}
.portal-popup .dialog-body > .container-fluid-max-xl,
.portal-popup .dialog-body .container-view,
.portal-popup .export-dialog-tree > .container-fluid-max-xl,
.portal-popup .export-dialog-tree .container-view,
.portal-popup .lfr-dynamic-uploader > .container-fluid-max-xl,
.portal-popup .lfr-dynamic-uploader .container-view,
.portal-popup .lfr-form-content > .container-fluid-max-xl,
.portal-popup .lfr-form-content .container-view,
.portal-popup .portlet-configuration-body-content > .container-fluid-max-xl,
.portal-popup .portlet-configuration-body-content .container-view,
.portal-popup .process-list > .container-fluid-max-xl,
.portal-popup .process-list .container-view,
.portal-popup .roles-selector-body > .container-fluid-max-xl,
.portal-popup .roles-selector-body .container-view {
  padding-top: 20px;
}
.portal-popup .dialog-body > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .dialog-body .container-view .nav-tabs-underline,
.portal-popup .export-dialog-tree > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .export-dialog-tree .container-view .nav-tabs-underline,
.portal-popup .lfr-dynamic-uploader > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .lfr-dynamic-uploader .container-view .nav-tabs-underline,
.portal-popup .lfr-form-content > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .lfr-form-content .container-view .nav-tabs-underline,
.portal-popup .portlet-configuration-body-content > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .portlet-configuration-body-content .container-view .nav-tabs-underline,
.portal-popup .process-list > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .process-list .container-view .nav-tabs-underline,
.portal-popup .roles-selector-body > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .roles-selector-body .container-view .nav-tabs-underline {
  margin-left: -15px;
  margin-right: -15px;
  margin-top: -20px;
}
.portal-popup .dialog-body > .lfr-nav + .container-fluid-max-xl,
.portal-popup .export-dialog-tree > .lfr-nav + .container-fluid-max-xl,
.portal-popup .lfr-dynamic-uploader > .lfr-nav + .container-fluid-max-xl,
.portal-popup .lfr-form-content > .lfr-nav + .container-fluid-max-xl,
.portal-popup .portlet-configuration-body-content > .lfr-nav + .container-fluid-max-xl,
.portal-popup .process-list > .lfr-nav + .container-fluid-max-xl,
.portal-popup .roles-selector-body > .lfr-nav + .container-fluid-max-xl {
  padding-top: 0;
}
.portal-popup .login-container {
  padding: 1rem;
}
.portal-popup .navbar ~ .portlet-configuration-setup,
.portal-popup .portlet-export-import-container {
  height: calc(100% - 48px);
  position: relative;
}
@media (min-width: 576px) {
  .portal-popup .navbar ~ .portlet-configuration-setup,
  .portal-popup .portlet-export-import-container {
    height: calc(100% - 48px);
  }
}
.portal-popup .panel-group .panel {
  border-left-width: 0;
  border-radius: 0;
  border-right-width: 0;
}
.portal-popup .panel-group .panel + .panel {
  border-top-width: 0;
  margin-top: 0;
}
.portal-popup .panel-heading {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.portal-popup .portlet-configuration-setup .lfr-nav {
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px;
  padding-left: 3px;
  padding-right: 3px;
}
@media (min-width: 576px) {
  .portal-popup .portlet-configuration-setup .lfr-nav {
    padding-left: 8px;
    padding-right: 8px;
  }
}
.portal-popup .lfr-dynamic-uploader,
.portal-popup .process-list {
  bottom: 0;
  display: block;
  left: 0;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 48px;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 576px) {
  .portal-popup .lfr-dynamic-uploader,
  .portal-popup .process-list {
    top: 48px;
  }
}
.portal-popup .portlet-export-import-publish-processes {
  top: 0;
}
.portal-popup .dialog-footer {
  background-color: #fff;
  border-top: 1px solid #dee2e6;
  bottom: 0;
  display: flex;
  flex-direction: row-reverse;
  left: 0;
  margin: 0;
  padding: 10px 24px;
  width: 100%;
  z-index: 1020;
}
@media (min-width: 768px) {
  .portal-popup .dialog-footer {
    position: fixed;
  }
}
.portal-popup .dialog-footer .btn {
  margin-left: 1rem;
  margin-right: 0;
}
.portal-popup .dialog-footer.dialog-footer-not-reverse {
  flex-direction: initial;
  justify-content: flex-end;
}
@media (min-width: 768px) {
  .portal-popup .dialog-body:not(:last-child),
  .portal-popup .lfr-dynamic-uploader:not(:last-child),
  .portal-popup .lfr-form-content:not(:last-child),
  .portal-popup .portlet-configuration-body-content:not(:last-child),
  .portal-popup .roles-selector-body:not(:last-child) {
    padding-bottom: 60px;
  }
}
.portal-popup .lfr-dynamic-uploader {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.portal-popup .lfr-dynamic-uploader.hide-dialog-footer {
  bottom: 0;
}
.portal-popup .lfr-dynamic-uploader.hide-dialog-footer + .dialog-footer {
  display: none;
}
.portal-popup .portlet-configuration-edit-permissions .portlet-configuration-body-content {
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.portal-popup .portlet-configuration-edit-permissions .portlet-configuration-body-content > form {
  flex-grow: 1;
  max-width: none;
  overflow: auto;
}
.portal-popup .portlet-configuration-edit-templates .portlet-configuration-body-content {
  bottom: 0;
}
.portal-popup:not(.article-preview) #main-content,
.portal-popup:not(.article-preview) #wrapper {
  bottom: 0;
  left: 0;
  overflow: auto;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-overflow-scrolling: touch;
}
@media print {
  .portal-popup:not(.article-preview) #main-content,
  .portal-popup:not(.article-preview) #wrapper {
    position: initial;
  }
}
.portal-popup .columns-max > .portlet-layout.row {
  margin-left: 0;
  margin-right: 0;
}
.portal-popup .columns-max > .portlet-layout.row > .portlet-column {
  padding-left: 0;
  padding-right: 0;
}

html:not(#__):not(#___) .portlet-layout.dragging {
  border-collapse: separate;
}
html:not(#__):not(#___) .drop-area {
  background-color: #d3dadd;
}
html:not(#__):not(#___) .active-area {
  background: #ffc;
}
html:not(#__):not(#___) .portlet-boundary.yui3-dd-dragging {
  opacity: 0.6;
}
html:not(#__):not(#___) .portlet-boundary.yui3-dd-dragging .portlet {
  border: 2px dashed #ccc;
}
html:not(#__):not(#___) .sortable-layout-proxy {
  opacity: 1;
}
html:not(#__):not(#___) .sortable-layout-proxy .portlet-topper {
  background-image: none;
}
html:not(#__):not(#___) .proxy {
  cursor: move;
  opacity: 0.65;
  position: absolute;
}
html:not(#__):not(#___) .proxy.generic-portlet {
  height: 200px;
  width: 300px;
}
html:not(#__):not(#___) .proxy.generic-portlet .portlet-title {
  padding: 10px;
}
html:not(#__):not(#___) .proxy.not-intersecting .forbidden-action {
  background: url(../images/application/forbidden_action.png) no-repeat;
  display: block;
  height: 32px;
  position: absolute;
  right: -15px;
  top: -15px;
  width: 32px;
}
html:not(#__):not(#___) .resizable-proxy {
  border: 1px dashed #828f95;
  position: absolute;
  visibility: hidden;
}
html:not(#__):not(#___) .sortable-proxy {
  background: #727c81;
  margin-top: 1px;
}
html:not(#__):not(#___) .sortable-layout-drag-target-indicator {
  margin: 2px 0;
}
html:not(#__):not(#___) .yui3-dd-proxy {
  z-index: 1110 !important;
}

.portlet-layout.dragging {
  border-collapse: separate;
}

.drop-area {
  background-color: #d3dadd;
}

.active-area {
  background: #ffc;
}

.portlet-boundary.yui3-dd-dragging {
  opacity: 0.6;
  transform: scale(0.8);
  transition: transform 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .portlet-boundary.yui3-dd-dragging {
    transition: none;
  }
}
.c-prefers-reduced-motion .portlet-boundary.yui3-dd-dragging {
  transition: none;
}
.portlet-boundary.yui3-dd-dragging .portlet {
  border: 2px dashed #ccc;
}

.sortable-layout-proxy {
  opacity: 1;
}
.sortable-layout-proxy .portlet-topper {
  background-image: none;
}

.proxy {
  cursor: move;
  opacity: 0.65;
  position: absolute;
}
.proxy.generic-portlet {
  height: 200px;
  width: 300px;
}
.proxy.generic-portlet .portlet-title {
  padding: 10px;
}
.proxy.not-intersecting .forbidden-action {
  background: url(../images/application/forbidden_action.png) no-repeat;
  display: block;
  height: 32px;
  position: absolute;
  right: -15px;
  top: -15px;
  width: 32px;
}

.resizable-proxy {
  border: 1px dashed #828f95;
  position: absolute;
  visibility: hidden;
}

.sortable-proxy {
  background: #727c81;
  margin-top: 1px;
}

.sortable-layout-drag-target-indicator {
  margin: 2px 0;
}

.yui3-dd-proxy {
  z-index: 1110 !important;
}

.portlet-column-content.empty {
  padding: 50px;
}

.lfr-portlet-title-editable {
  margin-top: 0;
  z-index: 9999;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content {
  padding: 0;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content .field-input {
  margin-bottom: 0;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content .textfield-label {
  display: none;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content .btn-toolbar-content {
  display: inline-block;
  vertical-align: bottom;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content .btn-group {
  margin-top: 0;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content .btn {
  display: inline-block;
  float: none;
  margin-top: 0;
  width: auto;
}

.lfr-source-editor {
  border: solid 0 #ccc;
  border-bottom-width: 2px;
  position: relative;
}
.lfr-source-editor .ace_editor {
  height: 100%;
}
.lfr-source-editor .lfr-source-editor-toolbar li > .btn {
  background-color: #fff;
  border: transparent;
  color: #717383;
  outline: 0;
}
.lfr-source-editor .lfr-source-editor-code {
  background-color: #fff;
  color: #2b4259;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter {
  background-color: #ededef;
  color: #868896;
  overflow: hidden;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_fold-widget {
  font-family: fontawesome-alloy;
  text-align: center;
  vertical-align: middle;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_fold-widget.ace_open, .lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_fold-widget.ace_closed {
  background-image: none;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_fold-widget.ace_open:before {
  content: "▾";
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_fold-widget.ace_closed:before {
  content: "▸";
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_gutter-active-cell {
  color: #fff;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_gutter-active-line {
  background-color: #717383;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_gutter-layer {
  border-right: solid 1px #ccc;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_info {
  background-image: none;
}
.lfr-source-editor .lfr-source-editor-code .ace_content .ace_active-line {
  background-color: #ededef;
}
.lfr-source-editor .lfr-source-editor-code .ace_content .ace_constant {
  color: #34adab;
}
.lfr-source-editor .lfr-source-editor-code .ace_content .ace_tag {
  color: #1d5ec7;
}
.lfr-source-editor .lfr-source-editor-code .ace_content .ace_string {
  color: #ff6c58;
}
.lfr-source-editor .lfr-source-editor-code .ace_content .ace_string.ace_regex {
  color: #f00;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code {
  background-color: #47474f;
  color: #fff;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code .ace_gutter {
  background: #54555e;
  color: #fff;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code .ace_gutter .ace_gutter-active-line {
  background-color: #009aed;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code .ace_content .ace_active-line {
  background-color: #11394e;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code .ace_content .ace_cursor {
  color: #fff;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code .ace_content .ace_tag {
  color: #4d91ff;
}

.lfr-fullscreen-source-editor {
  height: 100%;
  overflow: hidden;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-header {
  height: 40px;
  margin-right: 4px;
  margin-top: 4px;
  min-height: 40px;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content {
  height: 95%;
  position: relative;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content .panel-splitter {
  border: 1px solid #ccc;
  position: absolute;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content .preview-panel {
  display: inline-block;
  overflow-y: auto;
  padding-left: 20px;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content .source-panel {
  display: inline-block;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.vertical .source-panel,
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.vertical .preview-panel {
  height: 100%;
  width: 50%;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.vertical .panel-splitter {
  height: 100%;
  left: 50%;
  top: 0;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.horizontal .source-panel,
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.horizontal .preview-panel {
  height: 50%;
  width: 100%;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.horizontal .panel-splitter {
  top: 50%;
  width: 100%;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.simple .panel-splitter,
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.simple .preview-panel {
  display: none;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.simple .source-panel {
  height: 100%;
  width: 100%;
}

.lfr-fulscreen-source-editor-dialog .modal-footer {
  text-align: left;
}

.file-icon-color-0 {
  background-color: #fff;
  color: #6c757d;
}

.file-icon-color-1 {
  background-color: #fff;
  color: #6c757d;
}

.file-icon-color-2 {
  background-color: #fff;
  color: #24a892;
}

.file-icon-color-3 {
  background-color: #fff;
  color: #ff4d4d;
}

.file-icon-color-4 {
  background-color: #fff;
  color: #ff6200;
}

.file-icon-color-5 {
  background-color: #fff;
  color: #bf66ff;
}

.file-icon-color-6 {
  background-color: #fff;
  color: #0099e6;
}

.file-icon-color-7 {
  background-color: #fff;
  color: #ff4db2;
}

.lfr-item-viewer.uploading > div:not(.progress-container) {
  opacity: 0.3;
}
.lfr-item-viewer.uploading > .progress-container {
  visibility: visible;
}
.lfr-item-viewer .aspect-ratio a.item-preview {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  position: absolute;
  width: 100%;
}
.lfr-item-viewer .image-viewer-base-image-list {
  padding-top: 35px;
}
.lfr-item-viewer .item-preview:hover {
  cursor: pointer;
}
.lfr-item-viewer .progress-container {
  background-color: #fff;
  left: 0;
  margin: 0 auto;
  padding: 20px 30px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  visibility: hidden;
  width: 80%;
  z-index: 1000;
}
.lfr-item-viewer .progress-container a {
  position: absolute;
  right: 30px;
}
.lfr-item-viewer .progress-container .progress {
  margin-top: 10px;
}
.lfr-item-viewer .search-info {
  background-color: #d3e8f1;
}
.lfr-item-viewer .search-info .keywords {
  font-size: 1.4em;
  font-weight: bold;
}
.lfr-item-viewer .search-info .change-search-folder {
  font-size: 0.8em;
  font-weight: normal;
}
.lfr-item-viewer .upload-view {
  display: table;
  height: 400px;
  margin-top: 20px;
  width: 100%;
}
.lfr-item-viewer .upload-view > div {
  display: table-cell;
  vertical-align: middle;
}
.lfr-item-viewer .yui3-widget-bd {
  position: relative;
}

.lfr-menu-expanded li a:focus {
  background-color: #5b677d;
  color: #fff;
  text-shadow: -1px -1px #2c2f34;
}

.lfr-url-error {
  display: inline-block;
  white-space: normal;
  overflow-wrap: break-all;
  word-wrap: break-all;
}

.lfr-page-layouts {
  padding: 0;
}
.lfr-page-layouts input[type=radio] {
  opacity: 0;
  position: absolute;
}
.lfr-page-layouts input[type=radio]:checked + .card-horizontal {
  cursor: default;
}
.lfr-page-layouts input[type=radio]:checked + .card-horizontal::after {
  bottom: -0.0625rem;
  content: "";
  left: -0.0625rem;
  position: absolute;
  right: -0.0625rem;
  transition: height 0.15s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .lfr-page-layouts input[type=radio]:checked + .card-horizontal::after {
    transition: none;
  }
}
.lfr-page-layouts input[type=radio]:checked + .card-horizontal::after {
  transition: none;
}

.lfr-page-layouts .card-horizontal {
  cursor: pointer;
  outline: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .lfr-page-layouts .card-horizontal {
    transition: none;
  }
}
.lfr-page-layouts .card-horizontal {
  transition: none;
}

.lfr-page-layouts .card-horizontal::after {
  border-radius: 0 0 0.25rem 0.25rem;
  bottom: -0.0625rem;
  content: "";
  height: 0;
  left: -0.0625rem;
  position: absolute;
  right: -0.0625rem;
  transition: height 0.15s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .lfr-page-layouts .card-horizontal::after {
    transition: none;
  }
}
.lfr-page-layouts .card-horizontal::after {
  transition: none;
}

.modal-body.dialog-iframe-bd {
  overflow: hidden;
  padding: 0;
}

.modal-dialog:not(.dialog-iframe-modal):not(.modal-full-screen) {
  position: relative;
}
.modal-dialog.dialog-iframe-modal {
  max-width: none;
}
.modal-dialog.modal-dialog-sm {
  max-width: 500px;
}
.modal-dialog .yui3-resize-handles-wrapper {
  pointer-events: all;
}
.modal-dialog .yui3-resize-handles-wrapper .yui3-resize-handle-inner-br {
  bottom: 0;
  right: 0;
}

.modal-open .modal {
  display: block;
}

.sheet > .panel-group .sheet-footer {
  margin-bottom: 0;
}

.sheet-footer .btn {
  margin-right: 0.5rem;
}
.sheet-footer .btn:last-child {
  margin-right: 0;
}

.tag-items {
  list-style: none;
  margin: 0 1em 0 0;
  padding: 0 1em 0.5em;
  white-space: normal;
}
.tag-items li {
  display: inline-block;
  margin: 0 1em 0 0;
  max-width: 100%;
}

.tag-selected {
  color: #000;
  font-weight: bold;
  text-decoration: none;
}

.tag-cloud .tag-popularity-1 {
  font-size: 1em;
}
.tag-cloud .tag-popularity-2 {
  font-size: 1.3em;
}
.tag-cloud .tag-popularity-3 {
  font-size: 1.6em;
}
.tag-cloud .tag-popularity-4 {
  font-size: 1.9em;
}
.tag-cloud .tag-popularity-5 {
  font-size: 2.2em;
}
.tag-cloud .tag-popularity-6 {
  font-size: 2.5em;
}

.lfr-portal-tooltip {
  display: inline-flex;
}
.lfr-portal-tooltip,
.lfr-portal-tooltip a {
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.tree-node .icon-check {
  padding-right: 2px;
}
.tree-node .tree-node-checked .icon-check {
  padding-right: 0;
}
.tree-node [class^=icon-] {
  margin-right: 5px;
}
.tree-node .tree-node-checkbox-container {
  margin-right: 0;
}
.tree-node .tree-node-selected .tree-label {
  background: none;
}

.tree-node-content .tree-hitarea {
  color: #999;
  font-size: 10px;
  padding-right: 6px;
}
.tree-node-content .tree-label {
  margin-left: 3px;
}
.tree-node-content .tree-node-hidden-hitarea {
  visibility: hidden;
}

.tree-node-selected .tree-label {
  background-color: transparent;
}

.tree-view li.tree-node .tree-node-content svg.lexicon-icon {
  pointer-events: none;
}

.user-icon-color-0 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #6c757d;
}

.user-icon-color-1 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #66abff;
}

.user-icon-color-2 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #ff6200;
}

.user-icon-color-3 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #ff4d4d;
}

.user-icon-color-4 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #24a892;
}

.user-icon-color-5 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #ff4db2;
}

.user-icon-color-6 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #53a117;
}

.user-icon-color-7 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #bf66ff;
}

.user-icon-color-8 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #b38900;
}

.user-icon-color-9 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #0099e6;
}

.collapse.open {
  display: block;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox='0%200%2016%2016'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20class='lexicon-icon-outline'%20d='M15%203H1a1%201%200%200%201%200-2h14a1%201%200%200%201%200%202Zm0%206H1a1%201%200%200%201%200-2h14a1%201%200%200%201%200%202ZM1%2015h14a1%201%200%200%200%200-2H1a1%201%200%200%200%200%202Z'%20fill='%23212529'/%3E%3C/svg%3E");
  height: 1em;
  width: 1em;
}

.navbar-nav .nav-item.hover:after {
  bottom: -0.125rem;
  content: "";
  height: 0.125rem;
  left: 0;
  position: absolute;
  width: 100%;
}

.navbar .navbar-toggler .c-inner {
  max-width: none;
}

html:not(#__):not(#___) .cadmin.portlet-topper {
  position: relative;
}
html:not(#__):not(#___) .cadmin.portlet-topper .portlet-topper-toolbar .portlet-icon-back {
  background: url(../images/arrows/12_left.png) no-repeat 0 50%;
  padding: 5px 5px 5px 18px;
}
html:not(#__):not(#___) .cadmin.portlet-topper .portlet-topper-toolbar .portlet-options .lfr-icon-menu-text {
  display: none;
}
html:not(#__):not(#___) .cadmin .component-action.portlet-options {
  color: white;
}

body.portlet {
  border-width: 0;
}

.portlet-icon-back {
  margin-top: -2px;
}
.portlet-topper .portlet-topper-toolbar .portlet-icon-back {
  background: url(../images/arrows/12_left.png) no-repeat 0 50%;
  padding: 5px 5px 5px 18px;
}

.portlet-options-dropdown {
  z-index: 1035;
}

.portlet-topper {
  position: relative;
}
.portlet-topper .portlet-topper-toolbar .portlet-options .lfr-icon-menu-text {
  display: none;
}
.portlet-draggable .portlet-topper {
  cursor: move;
}

.portlet-title-editable {
  cursor: pointer;
}

.portlet-title-text {
  display: inline-block;
  margin-top: 0;
  max-width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
}
.panel-page-body .portlet-title-text, .panel-page-content .portlet-title-text {
  cursor: auto;
}

.portlet-minimized .portlet-content {
  padding: 0;
}

.portlet-nested-portlets .portlet-boundary {
  left: 0 !important;
  position: relative !important;
  top: 0 !important;
}

.portlet-layout .portlet-header {
  margin-bottom: 1rem;
}

@media (min-width: 576px) {
  .portlet .visible-interaction {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .controls-hidden .portlet .visible-interaction {
    display: none;
  }
}
.portlet:hover .visible-interaction, .portlet.open .visible-interaction, .portlet.focus .visible-interaction {
  display: block;
}

.controls-hidden .lfr-meta-actions,
.controls-hidden .lfr-configurator-visibility {
  display: none;
}
.controls-hidden .portlet-title-editable {
  pointer-events: none;
}
.controls-hidden .portlet-topper {
  display: none !important;
}
.controls-hidden .portlet-topper-toolbar {
  display: none !important;
}

html:not(#__):not(#___) .cadmin.portlet-topper {
  background-color: #f7f7f7;
  border-color: transparent;
  border-radius: 0 0;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  color: rgba(0, 0, 0, 0.5);
  display: box;
  display: flex;
  height: 28px;
  padding: 3px 12px 3px 24px;
  position: relative;
}
html:not(#__):not(#___) .cadmin.portlet-topper .lexicon-icon {
  height: 12px;
  width: 12px;
}
html:not(#__):not(#___) .cadmin.portlet-topper .lexicon-icon.lexicon-icon-drag {
  height: 16px;
  width: 16px;
}
html:not(#__):not(#___) .portlet > .cadmin.portlet-topper {
  display: none;
}
@media (min-width: 768px) {
  html:not(#__):not(#___) .portlet > .cadmin.portlet-topper {
    display: flex;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    transform: translateY(-97%);
    transition: opacity 0.15s;
    top: 0;
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  html:not(#__):not(#___) .portlet > .cadmin.portlet-topper {
    transition: none;
  }
}
@media (min-width: 768px) {
  html:not(#__):not(#___) .portlet > .c-prefers-reduced-motion .cadmin.portlet-topper {
    transition: none;
  }
}
html:not(#__):not(#___) .cadmin .portlet-actions {
  float: right;
}
html:not(#__):not(#___) .cadmin .portlet-options {
  display: inline-block;
}
html:not(#__):not(#___) .cadmin .portlet-title-menu {
  flex: 0 1 auto;
}
html:not(#__):not(#___) .cadmin .portlet-title-menu > span > a {
  display: inline-block;
  text-decoration: none;
}
html:not(#__):not(#___) .cadmin .portlet-topper-toolbar {
  margin: 0;
  padding-left: 0;
}
html:not(#__):not(#___) .cadmin .portlet-topper-toolbar > a,
html:not(#__):not(#___) .cadmin .portlet-topper-toolbar > span > a,
html:not(#__):not(#___) .cadmin .portlet-topper-toolbar .lfr-icon-menu > a {
  color: rgba(0, 0, 0, 0.5);
}
html:not(#__):not(#___) .cadmin .portlet-topper-toolbar > a:focus, html:not(#__):not(#___) .cadmin .portlet-topper-toolbar > a:hover {
  text-decoration: none;
}
html:not(#__):not(#___) .cadmin .portlet-name-text {
  font-size: 12px;
  font-weight: 600;
  margin-left: 4px;
}
html:not(#__):not(#___) .cadmin .portlet-title-default {
  flex: 1 1 auto;
  line-height: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 576px) {
  html:not(#__):not(#___) .lfr-configurator-visibility .portlet:hover .portlet-topper, html:not(#__):not(#___) .lfr-configurator-visibility .portlet.focus .portlet-topper, html:not(#__):not(#___) .lfr-configurator-visibility .portlet.open .portlet-topper {
    opacity: 0.5;
  }
}
@media (min-width: 768px) {
  html:not(#__):not(#___) .controls-visible .portlet:hover > .portlet-content-editable, html:not(#__):not(#___) .controls-visible .portlet.open > .portlet-content-editable, html:not(#__):not(#___) .controls-visible .portlet.focus > .portlet-content-editable {
    border-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}
@media (min-width: 768px) {
  html:not(#__):not(#___) .controls-visible .portlet:hover > .cadmin.portlet-topper, html:not(#__):not(#___) .controls-visible .portlet.open > .cadmin.portlet-topper, html:not(#__):not(#___) .controls-visible .portlet.focus > .cadmin.portlet-topper {
    opacity: 1;
  }
}
@media (min-width: 768px) {
  html:not(#__):not(#___) .controls-visible .portlet.open > .cadmin.portlet-topper {
    transition-duration: 0ms;
  }
}
@media (max-width: 767.98px) {
  html:not(#__):not(#___) .controls-visible .cadmin.portlet-topper {
    align-items: center;
    display: box;
    display: flex;
  }
}
html:not(#__):not(#___) .controls-visible .cadmin .portlet-topper-toolbar {
  display: block;
}

.portlet {
  margin-bottom: 10px;
  position: relative;
}
@media (min-width: 768px) {
  .controls-visible .portlet:hover > .portlet-content-editable, .controls-visible .portlet.open > .portlet-content-editable, .controls-visible .portlet.focus > .portlet-content-editable {
    border-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}
@media (min-width: 768px) {
  .controls-visible .portlet:hover > .portlet-topper, .controls-visible .portlet.open > .portlet-topper, .controls-visible .portlet.focus > .portlet-topper {
    opacity: 1;
  }
}
@media (min-width: 576px) {
  .lfr-configurator-visibility .portlet:hover .portlet-topper, .lfr-configurator-visibility .portlet.focus .portlet-topper, .lfr-configurator-visibility .portlet.open .portlet-topper {
    opacity: 0.5;
  }
}

.portlet-content-editable {
  border-color: transparent;
  border-radius: 0 0;
  border-style: solid;
  border-width: 2px 2px 2px 2px;
  transition: border-color 0.15s ease;
}
.portlet > .portlet-content-editable {
  border-color: transparent;
}
@media (max-width: 767.98px) {
  .controls-visible .portlet-content-editable {
    border-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

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

.portlet-title-default {
  flex: 1 1 auto;
  line-height: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portlet-title-menu {
  flex: 0 1 auto;
}
.portlet-title-menu > span > a {
  display: inline-block;
  text-decoration: none;
}

.portlet-topper {
  background-color: #f7f7f7;
  border-color: transparent;
  border-radius: 0 0;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  color: rgba(0, 0, 0, 0.5);
  display: box;
  display: flex;
  padding: 3px 12px 3px 24px;
  position: relative;
}
.portlet > .portlet-topper {
  display: none;
}
@media (min-width: 768px) {
  .portlet > .portlet-topper {
    display: flex;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    transition: opacity 0.15s;
    top: 0;
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .portlet > .portlet-topper {
    transition: none;
  }
}
@media (min-width: 768px) {
  .portlet > .portlet-topper {
    transition: none;
  }
}
@media (max-width: 767.98px) {
  .controls-visible .portlet-topper {
    display: box;
    display: flex;
  }
}

.portlet-topper-toolbar {
  margin: 0;
  padding-left: 0;
}
.portlet-topper-toolbar > a,
.portlet-topper-toolbar > span > a,
.portlet-topper-toolbar .lfr-icon-menu > a {
  color: rgba(0, 0, 0, 0.5);
}
.portlet-topper-toolbar > a:focus, .portlet-topper-toolbar > a:hover {
  text-decoration: none;
}
.controls-visible .portlet-topper-toolbar {
  display: block;
}

.lfr-panel-page .portlet-title {
  font-size: 13px;
}

.portlet-borderless .portlet-content {
  padding: 1rem;
}
.portlet-decorate .portlet-content {
  background: #fff;
  border-color: transparent;
  border-style: solid;
  border-width: 2px 2px 2px 2px;
  padding: 1rem;
  word-wrap: break-word;
}
.portlet-barebone .portlet-content {
  padding: 0;
}

.portlet-dynamic-data-lists-display .lfr-ddm-field-group,
.portlet-dynamic-data-lists .lfr-ddm-field-group {
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 28px 24px;
}

.breadcrumb.breadcrumb-vertical {
  display: inline-block;
  text-align: center;
}
.breadcrumb.breadcrumb-vertical li {
  display: block;
}
.breadcrumb.breadcrumb-vertical li.last, .breadcrumb.breadcrumb-vertical li.only {
  background: none;
}
.breadcrumb.breadcrumb-vertical .divider {
  background: url(../images/arrows/07_down.png) no-repeat 50% 100%;
  display: block;
  height: 10px;
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
}

.navbar form {
  margin: 0;
}

:not(.inline-item) > .loading-animation {
  margin-bottom: 20px;
  margin-top: 20px;
}
.product-menu .loading-animation {
  margin-top: 160px;
}

@keyframes lfr-drop-active {
  0% {
    background-color: #ebebeb;
    border-color: #ddd;
  }
  50% {
    background-color: #ddedde;
    border-color: #7d7;
    transform: scale(1.1);
  }
  75% {
    background-color: #ddedde;
    border-color: #7d7;
  }
  100% {
    background-color: #ebebeb;
    border-color: #ddd;
  }
}
.lfr-upload-container .progress-bar,
.lfr-upload-container .progress {
  border-radius: 10px;
}
.lfr-upload-container .upload-file,
.lfr-upload-container .upload-target {
  border-radius: 5px;
}
.upload-drop-active .lfr-upload-container .upload-target {
  animation: none;
}
.upload-drop-intent .lfr-upload-container .upload-target {
  animation: lfr-drop-active 1s ease 0.2s infinite;
}

.select-files {
  border-radius: 5px;
}

.taglib-form-navigator > .form-steps > ul.form-navigator.list-group {
  box-shadow: none;
}
.taglib-form-navigator > .form-steps > ul.form-navigator.list-group .tab .tab-label:hover .number, .taglib-form-navigator > .form-steps > ul.form-navigator.list-group .tab .tab-label:focus .number {
  box-shadow: 0 0 5px 0 #333;
  transition-duration: 0.25s;
  transition-property: box-shadow;
  transition-timing-function: ease-out;
}
.taglib-form-navigator > .form-steps > ul.form-navigator.list-group .tab .tab-label .number {
  border-radius: 50%;
}

@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
.lfr-progress-active .progress-bar-status,
.lfr-upload-container .file-uploading .progress-bar .progress {
  animation: progress-bar-stripes 0.5s linear infinite;
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0));
  background-size: 40px 40px;
  transition: width, 0.5s, ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .lfr-progress-active .progress-bar-status,
  .lfr-upload-container .file-uploading .progress-bar .progress {
    transition: none;
  }
}
.c-prefers-reduced-motion .lfr-progress-active .progress-bar-status,
.c-prefers-reduced-motion .lfr-upload-container .file-uploading .progress-bar .progress {
  transition: none;
}

@keyframes highlight-animation {
  from {
    background-color: #ffc;
  }
  to {
    background-color: transparent;
  }
}
.highlight-animation {
  animation: highlight-animation 0.7s;
}

.portlet-options.btn-group .dropdown-toggle, .portlet-options.btn-group.open .dropdown-toggle {
  box-shadow: none;
}

.form-group.form-inline.input-boolean-wrapper label, .form-group.form-inline.input-checkbox-wrapper label {
  gap: 0.3125rem;
}

:root {
  --scaleWidth: calc(100vw / 1600);
}

body {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  line-height: 140%;
  color: #000;
  overflow-x: hidden;
}

:root {
  --color-primary-mode: var(--color-primary);
  --color-secondary-mode: var(--color-secondary);
  --color-danger-mode: var(--color-danger);
  --body-background-color-mode: var(--body-background-color);
}

.dark-mode {
  --color-primary-mode: var(--color-primary-dark);
  --color-secondary-mode: var(--color-secondary-dark);
  --color-danger-mode: var(--color-danger-dark);
  --body-background-color-mode: var(--body-background-color-dark);
}

@media (min-width: 1199px) and (max-width: 1400px) {
  .material-symbols-outlined {
    font-size: calc(24 * var(--scaleWidth));
  }
}

h1 {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--font-size-heading-1);
  line-height: 140%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  h1 {
    font-size: calc(32 * var(--scaleWidth));
  }
}

h2 {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--font-size-heading-2);
  line-height: 140%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  h2 {
    font-size: calc(26 * var(--scaleWidth));
  }
}

h3 {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--font-size-heading-3);
  line-height: 140%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  h3 {
    font-size: calc(18 * var(--scaleWidth));
  }
}

.font-large {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--font-size-large);
  line-height: 140%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .font-large {
    font-size: calc(18 * var(--scaleWidth));
  }
}

.font-normal {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--font-size-normal);
  line-height: 140%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .font-normal {
    font-size: calc(16 * var(--scaleWidth));
  }
}

.font-small {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--font-size-small);
  line-height: 140%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .font-small {
    font-size: calc(14 * var(--scaleWidth));
  }
}

.font-bold {
  font-weight: 700 !important;
}

.font-semibold {
  font-weight: 600 !important;
}

.font-medium {
  font-weight: 500 !important;
}

.alert-box {
  display: flex;
  background: var(--announcement-background);
  border-radius: var(--announcement-borderRadius);
  overflow: hidden;
  position: relative;
  padding-left: var(--announcement-padding-left);
  padding-right: var(--announcement-padding-right);
  margin-bottom: var(--announcement-margine-bottom);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .alert-box {
    border-radius: calc(5 * var(--scaleWidth));
    padding-left: calc(56 * var(--scaleWidth));
    padding-right: calc(56 * var(--scaleWidth));
  }
}
.alert-box .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 57px;
  background-color: var(--announcement-icon-background-color);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  z-index: 1;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .alert-box .icon {
    width: calc(57 * var(--scaleWidth));
  }
}
.alert-box .icon .material-symbols-outlined,
.alert-box .icon .constl-icon {
  font-size: var(--announcement-icon-fontSize, 24px);
  color: var(--announcement-icon-color, #fff);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .alert-box .icon .material-symbols-outlined,
  .alert-box .icon .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.alert-box .message-box {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.alert-box .message-box .message {
  padding: var(--announcement-messageBox-padding);
  padding-right: 0;
  min-height: var(--announcement-messageBox-height);
  width: 100%;
  font-size: var(--announcement-messageBox-fontSize);
  color: var(--announcement-messageBox-color);
  line-height: 137.5%;
  display: flex;
  align-items: center;
}
.alert-box .message-box .message marquee {
  cursor: pointer;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .alert-box .message-box .message {
    padding-top: calc(12 * var(--scaleWidth));
    padding-bottom: calc(12 * var(--scaleWidth));
    padding-left: calc(20 * var(--scaleWidth));
    padding-right: calc(20 * var(--scaleWidth));
    min-height: calc(50 * var(--scaleWidth));
  }
}
.alert-box .message-box .message-pagination {
  display: flex;
  align-items: center;
  gap: 24px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .alert-box .message-box .message-pagination {
    gap: calc(24 * var(--scaleWidth));
  }
}
.alert-box .message-box .message-pagination .prev-icon,
.alert-box .message-box .message-pagination .next-icon {
  cursor: pointer;
  display: inline-block;
  width: auto;
  vertical-align: top;
}
.alert-box .message-box .message-pagination .pages {
  display: inline-flex;
  align-items: center;
}
.alert-box .close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--announcement-closeButton-width);
  cursor: pointer;
  position: absolute;
  right: var(--announcement-closeButton-spacing-right);
  top: 0;
  height: 100%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .alert-box .close-button {
    width: calc(40 * var(--scaleWidth));
    right: calc(10 * var(--scaleWidth));
  }
}
.alert-box .close-button .material-symbols-outlined,
.alert-box .close-button .constl-icon {
  font-size: var(--announcement-closeButton-icon-fontSize, 24px);
  color: var(--announcement-closeButton-icon-color, #ffffff);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .alert-box .close-button .material-symbols-outlined,
  .alert-box .close-button .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
@media (max-width: 1024px) {
  .alert-box {
    flex-direction: column;
    padding: 16px;
    text-align: center;
    padding-top: 60px;
    border-radius: 5px;
  }
  .alert-box .icon {
    position: absolute;
    height: 50px;
    margin-bottom: 10px;
    left: 0;
    width: 100%;
    justify-content: flex-start;
    padding: 5px 10px;
  }
  .alert-box .message-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .alert-box .message-box .message {
    padding: 10px;
    min-height: auto;
  }
  .alert-box .message-box .message-pagination {
    gap: 10px;
  }
  .alert-box .close-button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 40px;
    height: 40px;
    z-index: 1010;
  }
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-normal);
  padding: var(--spacing-small) var(--spacing-large);
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .button {
    font-size: calc(16 * var(--scaleWidth));
    padding-top: calc(8 * var(--scaleWidth));
    padding-bottom: calc(8 * var(--scaleWidth));
    padding-left: calc(24 * var(--scaleWidth));
    padding-right: calc(24 * var(--scaleWidth));
    border-radius: calc(4 * var(--scaleWidth));
  }
}
.button-edit {
  background-color: var(--btn-edit-background-color);
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .button-edit {
    gap: calc(10 * var(--scaleWidth));
  }
}
.button-edit:hover {
  background-color: color-mix(in srgb, var(--btn-edit-background-color), black 10%);
}
.button-edit.active, .button-edit:active {
  background-color: color-mix(in srgb, var(--btn-edit-background-color), black 20%);
}
.button-edit.disabled, .button-edit:disabled {
  background-color: color-mix(in srgb, var(--btn-edit-background-color), white 10%);
  cursor: not-allowed;
}
.button-edit.disabled img, .button-edit:disabled img {
  opacity: 0.2;
}
.button-tab {
  background-color: var(--color-white-background);
  font-size: var(--font-size-normal);
  gap: 12px;
  border-radius: 25px;
  height: 48px;
  padding: 10px 24px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .button-tab {
    font-size: calc(16 * var(--scaleWidth));
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(24 * var(--scaleWidth));
    padding-right: calc(24 * var(--scaleWidth));
    gap: calc(12 * var(--scaleWidth));
    height: calc(48 * var(--scaleWidth));
    border-radius: calc(25 * var(--scaleWidth));
  }
}
.button-tab:hover {
  background-color: var(--color-primary-mode);
  color: var(--color-white);
}
.button-tab:hover img {
  filter: invert(1) grayscale(100%) brightness(2);
}
.button-tab.active, .button-tab:active {
  background-color: var(--color-primary-mode);
  color: var(--color-white);
}
.button-tab.active img, .button-tab:active img {
  filter: invert(1) grayscale(100%) brightness(2);
}
.button-tab.disabled, .button-tab:disabled {
  background-color: color-mix(in srgb, var(--color-primary), white 40%);
  color: color-mix(in srgb, var(--color-gray-3), white 10%);
  cursor: not-allowed;
}
.button-primary {
  background-color: var(--color-primary-mode);
  color: var(--color-white);
}
.button-primary:hover {
  background-color: color-mix(in srgb, var(--color-primary), black 10%);
}
.button-primary.active, .button-primary:active {
  background-color: color-mix(in srgb, var(--color-primary), black 15%);
}
.button-primary.disabled, .button-primary:disabled {
  background-color: color-mix(in srgb, var(--color-primary), white 40%);
  cursor: not-allowed;
}
.button-danger {
  background-color: var(--color-danger-mode);
  color: var(--color-white);
}
.button-danger:hover {
  background-color: color-mix(in srgb, var(--color-danger), black 20%);
}
.button-danger.active, .button-danger:active {
  background-color: color-mix(in srgb, var(--color-danger), black 20%);
}
.button-danger.disabled, .button-danger:disabled {
  background-color: color-mix(in srgb, var(--color-danger), white 30%);
  cursor: not-allowed;
}
.button-secondary {
  background-color: transparent;
  border: 1px solid var(--color-gray-5);
  color: var(--color-gray-3);
}
.button-secondary:hover {
  background-color: color-mix(in srgb, var(--color-secondary), black 10%);
}
.button-secondary.active, .button-secondary:active {
  background-color: color-mix(in srgb, var(--color-secondary), black 15%);
}
.button-secondary.disabled, .button-secondary:disabled {
  background-color: var(--background-color-12);
  cursor: not-allowed;
}
.button-outline {
  background-color: transparent;
  border: 1px solid var(--color-primary-mode);
  color: var(--color-primary-mode);
}
.button-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.button-outline.active, .button-outline:active {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.button-outline.disabled, .button-outline:disabled {
  background-color: transparent;
  cursor: not-allowed;
}
.button-icon-text {
  gap: 8px;
  background-color: var(--color-primary-mode);
  color: var(--color-white);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .button-icon-text {
    gap: calc(8 * var(--scaleWidth));
  }
}
.button-icon-text:hover {
  background-color: color-mix(in srgb, var(--color-primary), black 10%);
}
.button-icon-text.active, .button-icon-text:active {
  background-color: color-mix(in srgb, var(--color-primary), black 15%);
}
.button-icon-text.disabled, .button-icon-text:disabled {
  background-color: color-mix(in srgb, var(--color-primary), white 40%);
  cursor: not-allowed;
}
.button-icon-text-danger {
  gap: 8px;
  background-color: var(--color-danger-mode);
  color: var(--color-white);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .button-icon-text-danger {
    gap: calc(8 * var(--scaleWidth));
  }
}
.button-icon-text-danger:hover {
  background-color: color-mix(in srgb, var(--color-danger), black 20%);
}
.button-icon-text-danger.active, .button-icon-text-danger:active {
  background-color: color-mix(in srgb, var(--color-danger), black 20%);
}
.button-icon-text-danger.disabled, .button-icon-text-danger:disabled {
  background-color: color-mix(in srgb, var(--color-danger), white 15%);
  cursor: not-allowed;
}
.button-outline-icon-text {
  gap: 8px;
  background-color: transparent;
  border: 1px solid var(--color-primary-mode);
  color: var(--color-primary-mode);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .button-outline-icon-text {
    gap: calc(8 * var(--scaleWidth));
  }
}
.button-outline-icon-text:hover {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}
.button-outline-icon-text:hover img {
  filter: invert(1) grayscale(100%) brightness(2);
}
.button-outline-icon-text.active, .button-outline-icon-text:active {
  background-color: var(--color-primary);
  color: var(--color-gray-1);
}
.button-outline-icon-text.disabled, .button-outline-icon-text:disabled {
  cursor: not-allowed;
}
.button-small {
  padding: var(--spacing-small) var(--spacing-large);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .button-small {
    padding-top: calc(8 * var(--scaleWidth));
    padding-bottom: calc(8 * var(--scaleWidth));
    padding-left: calc(24 * var(--scaleWidth));
    padding-right: calc(24 * var(--scaleWidth));
  }
}
.button-normal {
  padding: var(--spacing-normal) var(--spacing-large);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .button-normal {
    padding-top: calc(8 * var(--scaleWidth));
    padding-bottom: calc(8 * var(--scaleWidth));
    padding-left: calc(24 * var(--scaleWidth));
    padding-right: calc(24 * var(--scaleWidth));
  }
}
.button-medium {
  padding: var(--spacing-medium) var(--spacing-large);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .button-medium {
    padding-top: calc(8 * var(--scaleWidth));
    padding-bottom: calc(8 * var(--scaleWidth));
    padding-left: calc(24 * var(--scaleWidth));
    padding-right: calc(24 * var(--scaleWidth));
  }
}
.button-large {
  padding: var(--spacing-large);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .button-large {
    padding-top: calc(8 * var(--scaleWidth));
    padding-bottom: calc(8 * var(--scaleWidth));
    padding-left: calc(24 * var(--scaleWidth));
    padding-right: calc(24 * var(--scaleWidth));
  }
}

.button-icon {
  background-color: var(--color-primary-mode);
  color: var(--color-white);
  border: none;
  padding: 10px;
  font-size: var(--font-size-normal);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .button-icon {
    font-size: calc(16 * var(--scaleWidth));
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
    width: calc(40 * var(--scaleWidth));
    height: calc(40 * var(--scaleWidth));
  }
}
.button-icon:hover {
  background-color: color-mix(in srgb, var(--color-primary), black 20%);
}
.button-icon.active, .button-icon:active {
  background-color: color-mix(in srgb, var(--color-primary), black 20%);
}
.button-icon.disabled, .button-icon:disabled {
  background-color: color-mix(in srgb, var(--color-primary), white 30%);
  cursor: not-allowed;
}

.button-link {
  background-color: transparent;
  color: var(--color-primary-mode);
  border: none;
  padding: 0;
  font-size: var(--font-size-normal);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .button-link {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.button-link:hover {
  color: color-mix(in srgb, var(--color-primary), black 10%);
}
.button-link.active, .button-link:active {
  color: color-mix(in srgb, var(--color-primary), black 20%);
}
.button-link.disabled, .button-link:disabled {
  color: color-mix(in srgb, var(--color-primary), white 30%);
  cursor: not-allowed;
}

.button-link-dismiss {
  background-color: transparent;
  color: var(--color-gray-1);
  border: none;
  padding: 0;
  font-size: var(--font-size-normal);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .button-link-dismiss {
    font-size: calc(16 * var(--scaleWidth));
  }
}

.button-link-view {
  background-color: transparent;
  color: var(--color-primary-mode);
  border: none;
  padding: 0;
  font-size: var(--font-size-normal);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .button-link-view {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.button-link-view:hover {
  color: color-mix(in srgb, var(--color-primary), black 10%);
}
.button-link-view.active, .button-link-view:active {
  color: color-mix(in srgb, var(--color-primary), black 20%);
}
.button-link-view.disabled, .button-link-view:disabled {
  color: color-mix(in srgb, var(--color-primary), white 30%);
  cursor: not-allowed;
}

.action-btns .download-btn,
.action-btns .view-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 44px !important;
  width: 44px !important;
  background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-radius: 44px;
  text-decoration: none !important;
  color: var(--color-primary-mode);
  font-size: 24px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .action-btns .download-btn,
  .action-btns .view-btn {
    font-size: calc(24 * var(--scaleWidth));
    padding-top: calc(16 * var(--scaleWidth));
    width: calc(44 * var(--scaleWidth));
    height: calc(44 * var(--scaleWidth));
    border-radius: calc(44 * var(--scaleWidth));
  }
}

.wishlist-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--wishlist-btn-dimension, 35px);
  height: var(--wishlist-btn-dimension, 35px);
  font-size: 15px;
  line-height: 100%;
  background-color: var(--wishlist-btn-background-color, #c1c1c1);
  box-shadow: var(--wishlist-btn-boxShadow, 0px 0px 10px 0px rgba(0, 0, 0, 0.1490196078));
  color: var(--wishlist-btn-color, #ffffff);
  border: 0;
  outline: none;
  box-shadow: none;
  border-radius: var(--wishlist-btn-borderRadius, 24px);
  z-index: 9;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .wishlist-btn {
    font-size: calc(15 * var(--scaleWidth));
    width: calc(35 * var(--scaleWidth));
    height: calc(35 * var(--scaleWidth));
  }
  .wishlist-btn .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.wishlist-btn.selected, .wishlist-btn:hover {
  background-color: var(--wishlist-btn-selected-background-color, #FFB900);
}
.wishlist-btn.selected i::before, .wishlist-btn:hover i::before {
  content: "\f005";
  /* solid star */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  /* solid */
}

.delete-button {
  width: 45px;
  height: 40px;
  background-color: var(--delete-button-background-color, #372194);
  color: var(--delete-button-color, #FFFFFF);
  font-size: var(--delete-button-fontSize, 16px);
  line-height: 100%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .delete-button {
    font-size: calc(16 * var(--scaleWidth));
    width: calc(45 * var(--scaleWidth));
    height: calc(40 * var(--scaleWidth));
  }
}
.delete-button:hover {
  background-color: var(--delete-button-hover-background-color, #F04438);
}
.delete-button:disabled, .delete-button.disabled {
  background-color: var(--delete-button-disabled-background-color, #b7b7b7);
  cursor: not-allowed;
}

.form-group {
  margin-bottom: 0;
  text-align: left;
}
.form-group .PhoneInput {
  position: relative;
}
.form-group .PhoneInput .PhoneInputCountry {
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .form-group .PhoneInput .PhoneInputCountry {
    left: calc(15 * var(--scaleWidth));
  }
}
.form-group .PhoneInput .PhoneInputInput {
  padding-left: 60px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .form-group .PhoneInput .PhoneInputInput {
    padding-left: calc(60 * var(--scaleWidth)) !important;
  }
}

.form-group-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .form-group-inline {
    gap: calc(10 * var(--scaleWidth));
  }
}
@media (max-width: 479px) {
  .form-group-inline {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
}
.form-group-inline label {
  white-space: nowrap;
  margin: 0 !important;
  display: inline;
}

@media (min-width: 1199px) and (max-width: 1400px) {
  .form-control:not([type=checkbox]):not([type=radio]):not(textarea),
  .PhoneInputInput {
    min-height: calc(44 * var(--scaleWidth));
    height: calc(44 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
    height: calc(44 * var(--scaleWidth));
  }
}

.form-control,
.PhoneInputInput {
  font-size: var(--font-size-normal);
  color: var(--input-text-color) !important;
  border: var(--form-control-border);
  border-radius: var(--form-control-borderRadius);
  padding: var(--form-control-padding);
  line-height: 140%;
  min-height: var(--form-control-height);
  background-color: var(--form-control-background-color) !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .form-control,
  .PhoneInputInput {
    font-size: calc(16 * var(--scaleWidth));
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
    min-height: calc(44 * var(--scaleWidth));
  }
}
.form-control::placeholder,
.PhoneInputInput::placeholder {
  color: var(--input-placeholder-color);
  font-size: var(--font-size-normal);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .form-control::placeholder,
  .PhoneInputInput::placeholder {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.form-control::-webkit-input-placeholder,
.PhoneInputInput::-webkit-input-placeholder {
  /* Chrome and Safari */
  color: var(--input-placeholder-color);
  font-size: var(--font-size-normal);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .form-control::-webkit-input-placeholder,
  .PhoneInputInput::-webkit-input-placeholder {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.form-control::-moz-placeholder,
.PhoneInputInput::-moz-placeholder {
  /* Firefox 19+ */
  color: var(--input-placeholder-color);
  font-size: var(--font-size-normal);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .form-control::-moz-placeholder,
  .PhoneInputInput::-moz-placeholder {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.form-control:-ms-input-placeholder,
.PhoneInputInput:-ms-input-placeholder {
  /* IE 10+ */
  color: var(--input-placeholder-color);
  text-transform: capitalize;
}
.form-control :-moz-placeholder,
.PhoneInputInput :-moz-placeholder {
  /* Firefox 18- */
  color: var(--input-placeholder-color);
  text-transform: capitalize;
}
.form-control:focus,
.PhoneInputInput:focus {
  border-color: var(--form-control-focus-color);
  box-shadow: 0 0 4px color-mix(in srgb, var(--form-control-focus-color) 40%, transparent);
}
.form-control.is-valid,
.PhoneInputInput.is-valid {
  border-color: var(--form-control-isvalid-color);
  box-shadow: 0 0 4px color-mix(in srgb, var(--form-control-isvalid-color) 40%, transparent);
  background-image: none;
}
.form-control.is-invalid,
.PhoneInputInput.is-invalid {
  border-color: var(--form-control-isinvalid-color);
  box-shadow: 0 0 4px color-mix(in srgb, var(--form-control-isinvalid-color) 40%, transparent);
  background-image: none;
}

.form-group .form__control {
  font-size: var(--form-control-fontSize);
  color: var(--form-control-color) !important;
  border: var(--form-control-border);
  border-radius: var(--form-control-borderRadius);
  min-height: var(--form-control-height);
  background-position: calc(100% - 15px);
  outline: none !important;
  box-shadow: none !important;
  padding: var(--form-control-select2-padding);
  position: relative;
  background-color: var(--form-control-background-color) !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .form-group .form__control {
    font-size: calc(16 * var(--scaleWidth));
    padding-top: calc(3 * var(--scaleWidth));
    padding-bottom: calc(3 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
    min-height: calc(44 * var(--scaleWidth));
    height: calc(44 * var(--scaleWidth));
    background-position: calc(100% - 0.9375vw);
    background-size: calc(20 * var(--scaleWidth));
  }
}
.form-group .form__control .form__single-value {
  color: var(--form-control-color) !important;
}
.form-group .form__control .form__placeholder {
  color: var(--input-placeholder-color);
  font-size: var(--font-size-normal);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .form-group .form__control .form__placeholder {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.form-group .form__control:focus {
  border-color: var(--input-checkbox-border-color);
  box-shadow: none !important;
}
.form-group .form__control .select2-selection__arrow {
  display: none !important;
}
.form-group .form__control .select2-search .select2-search__field {
  height: 42px;
  margin-top: 0;
  line-height: 42px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .form-group .form__control .select2-search .select2-search__field {
    height: calc(42 * var(--scaleWidth));
    line-height: calc(42 * var(--scaleWidth));
  }
}

.text-counter {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  text-align: right;
  font-size: var(--form-control-textArea-counter-fontSize);
  color: var(--form-control-textArea-counter-color);
  margin-top: 6px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .text-counter {
    font-size: calc(14 * var(--scaleWidth));
    margin-top: calc(6 * var(--scaleWidth));
  }
}

label:not(.uploadBox) {
  font-size: var(--font-size-normal);
  font-weight: 500;
  color: var(--form-control-label-color);
  line-height: 140%;
  margin-bottom: var(--form-control-label-margine-bottom);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  label:not(.uploadBox) {
    font-size: calc(14 * var(--scaleWidth));
    margin-bottom: calc(6 * var(--scaleWidth));
  }
}
label:not(.uploadBox) span {
  color: var(--color-danger-mode);
}

.form-text {
  font-size: var(--font-size-extra-small);
  color: var(--form-control-hint-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .form-text {
    font-size: calc(12 * var(--scaleWidth));
  }
}

::placeholder {
  color: var(--color-gray-3);
  opacity: 1;
  text-transform: capitalize;
}

.form-control:disabled,
.form-control[readonly],
.custom-select:disabled,
.custom-select[readonly] {
  background-color: var(--form-control-disabled-background-color) !important;
  color: var(--form-control-disabled-color) !important;
  border-color: var(--form-control-disabled-border-color) !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 1;
}
.form-control:disabled::placeholder, .form-control:disabled::-webkit-input-placeholder, .form-control:disabled::-moz-placeholder, .form-control:disabled:-ms-input-placeholder, .form-control:disabled:-moz-placeholder,
.form-control[readonly]::placeholder,
.form-control[readonly]::-webkit-input-placeholder,
.form-control[readonly]::-moz-placeholder,
.form-control[readonly]:-ms-input-placeholder,
.form-control[readonly]:-moz-placeholder,
.custom-select:disabled::placeholder,
.custom-select:disabled::-webkit-input-placeholder,
.custom-select:disabled::-moz-placeholder,
.custom-select:disabled:-ms-input-placeholder,
.custom-select:disabled:-moz-placeholder,
.custom-select[readonly]::placeholder,
.custom-select[readonly]::-webkit-input-placeholder,
.custom-select[readonly]::-moz-placeholder,
.custom-select[readonly]:-ms-input-placeholder,
.custom-select[readonly]:-moz-placeholder {
  color: var(--form-control-disabled-color) !important;
}

input[readonly]::placeholder,
input[disabled]::placeholder {
  color: var(--form-control-disabled-color) !important;
  opacity: 1;
}

.input-with-icon {
  position: relative;
}
.input-with-icon .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-gray-3);
  cursor: pointer;
}
.input-with-icon .form-control {
  padding-left: 36px;
}
.input-with-icon-left .icon {
  left: 12px;
}
.input-with-icon-right .form-control {
  padding-left: 15px;
  padding-right: 36px;
}
.input-with-icon-right .icon {
  right: 12px;
}

.tooltip-inner {
  background-color: var(--color-error);
  color: var(--color-white);
  font-size: var(--font-size-extra-small);
  padding: 5px 10px;
  border-radius: 4px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .tooltip-inner {
    font-size: calc(12 * var(--scaleWidth));
    padding-top: calc(5 * var(--scaleWidth));
    padding-bottom: calc(5 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
    border-radius: calc(4 * var(--scaleWidth));
  }
}

.tooltip.bs-tooltip-top .arrow::before {
  border-top-color: var(--color-error);
  left: 0;
}

.custom-checkbox .custom-control-label,
.custom-checkbox-primary .custom-control-label {
  padding-left: var(--form-control-checkbox-padding-left);
  min-height: var(--form-control-checkbox-height);
  font-size: var(--form-control-checkbox-fontSize);
  font-weight: 400;
  color: var(--form-control-checkbox-color);
  line-height: var(--form-control-checkbox-height);
  margin: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .custom-checkbox .custom-control-label,
  .custom-checkbox-primary .custom-control-label {
    padding-left: calc(40 * var(--scaleWidth));
    min-height: calc(24 * var(--scaleWidth));
    line-height: calc(24 * var(--scaleWidth));
    font-size: calc(16 * var(--scaleWidth));
  }
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-color: var(--form-control-checkbox-background-color);
  left: 2px;
  background-image: url("../../krypton-theme-css/assets/icons/checked_icon.png");
  background-size: initial;
  border-radius: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    left: calc(2 * var(--scaleWidth));
    border-radius: calc(5 * var(--scaleWidth));
  }
}

.custom-checkbox .custom-control-label::before {
  border: 2px solid var(--form-control-checkbox-border-color);
  border-radius: 2px;
  left: 2px;
  width: var(--form-control-checkbox-dimension);
  height: var(--form-control-checkbox-dimension);
  top: 2px;
  border-radius: 3px;
  box-shadow: none !important;
  outline: none !important;
  background-color: transparent !important;
  border-color: var(--form-control-checkbox-border-color) !important;
  position: absolute;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .custom-checkbox .custom-control-label::before {
    left: calc(2 * var(--scaleWidth));
    top: calc(2 * var(--scaleWidth));
    width: calc(20 * var(--scaleWidth));
    height: calc(20 * var(--scaleWidth));
    border-radius: calc(3 * var(--scaleWidth));
  }
}

.custom-checkbox .custom-control-label::after {
  border-radius: 2px;
  left: 2px;
  width: var(--form-control-checkbox-dimension);
  height: var(--form-control-checkbox-dimension);
  top: 2px;
  border-radius: 3px;
  box-shadow: none !important;
  outline: none !important;
  position: absolute;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .custom-checkbox .custom-control-label::after {
    left: calc(2 * var(--scaleWidth));
    top: calc(2 * var(--scaleWidth));
    width: calc(20 * var(--scaleWidth));
    height: calc(20 * var(--scaleWidth));
    border-radius: calc(3 * var(--scaleWidth));
  }
}

.custom-checkbox-primary .custom-control-input:checked ~ .custom-control-label::after {
  background-color: var(--form-control-checkbox-background-color);
  left: 2px;
  background-image: url("../../krypton-theme-css/assets/icons/checked_icon.png");
  background-size: initial;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .custom-checkbox-primary .custom-control-input:checked ~ .custom-control-label::after {
    left: calc(2 * var(--scaleWidth));
  }
}

.custom-checkbox-primary .custom-control-label::before {
  border: 1px solid var(--form-control-checkbox-border-color);
  border-radius: 2px;
  left: 2px;
  width: var(--form-control-checkbox-dimension);
  height: var(--form-control-checkbox-dimension);
  top: 2px;
  border-radius: 6px;
  box-shadow: none !important;
  outline: none !important;
  background-color: transparent !important;
  border-color: var(--form-control-checkbox-border-color) !important;
  position: absolute;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .custom-checkbox-primary .custom-control-label::before {
    left: calc(2 * var(--scaleWidth));
    top: calc(2 * var(--scaleWidth));
    width: calc(20 * var(--scaleWidth));
    height: calc(20 * var(--scaleWidth));
    border-radius: calc(6 * var(--scaleWidth));
  }
}

.custom-checkbox-primary .custom-control-label::after {
  border-radius: 2px;
  left: 2px;
  width: var(--form-control-checkbox-dimension);
  height: var(--form-control-checkbox-dimension);
  top: 2px;
  border-radius: 6px;
  box-shadow: none !important;
  outline: none !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .custom-checkbox-primary .custom-control-label::after {
    left: calc(2 * var(--scaleWidth));
    top: calc(2 * var(--scaleWidth));
    width: calc(20 * var(--scaleWidth));
    height: calc(20 * var(--scaleWidth));
    border-radius: calc(6 * var(--scaleWidth));
  }
}

.custom-radio .custom-control-label {
  padding-left: var(--form-control-radio-padding-left);
  min-height: var(--form-control-radio-height);
  font-size: var(--form-control-radio-fontSize);
  font-weight: 400;
  color: var(--form-control-radio-color);
  line-height: var(--form-control-radio-height);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .custom-radio .custom-control-label {
    font-size: calc(16 * var(--scaleWidth));
    padding-left: calc(40 * var(--scaleWidth));
    line-height: calc(16 * var(--scaleWidth));
  }
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
  background-color: transparent;
  left: 0;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  left: 0;
  background-color: var(--form-control-radio-background-color);
  border-color: var(--form-control-radio-background-color);
  width: var(--form-control-radio-checked-dimension);
  height: var(--form-control-radio-checked-dimension);
  top: 0;
  background-image: none !important;
  left: 6px;
  top: 6px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    width: calc(12 * var(--scaleWidth));
    height: calc(12 * var(--scaleWidth));
    left: calc(6 * var(--scaleWidth));
    top: calc(6 * var(--scaleWidth));
  }
}

.custom-radio .custom-control-label::before {
  border: 2px solid var(--color-primary-mode);
  border-radius: 50%;
  left: 0;
  width: var(--form-control-radio-dimension);
  height: var(--form-control-radio-dimension);
  top: 0;
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--color-primary-mode);
  position: absolute;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .custom-radio .custom-control-label::before {
    width: calc(24 * var(--scaleWidth));
    height: calc(24 * var(--scaleWidth));
  }
}

.custom-radio .custom-control-label::after {
  border-radius: 50%;
  left: 0;
  width: var(--form-control-radio-dimension);
  height: var(--form-control-radio-dimension);
  top: 0;
  outline: none !important;
  box-shadow: none !important;
  position: absolute;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .custom-radio .custom-control-label::after {
    width: calc(24 * var(--scaleWidth));
    height: calc(24 * var(--scaleWidth));
  }
}

.custom-select {
  font-size: var(--form-control-fontSize);
  color: var(--form-control-color);
  border: var(--form-control-border);
  border-radius: var(--form-control-borderRadius);
  padding: var(--form-control-padding);
  min-height: var(--form-control-height);
  background: url("../../krypton-theme-css/assets/icons/chevron-down.png");
  background-color: var(--form-control-background-color);
  background-repeat: no-repeat;
  background-position: calc(100% - 15px);
  outline: none !important;
  box-shadow: none !important;
  padding-right: 50px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .custom-select {
    font-size: calc(16 * var(--scaleWidth));
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(50 * var(--scaleWidth));
    gap: calc(16 * var(--scaleWidth));
    min-height: calc(44 * var(--scaleWidth));
    height: calc(44 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
    background-position: calc(100% - 0.9375vw);
    background-size: calc(20 * var(--scaleWidth));
  }
}
.custom-select:focus {
  border-color: var(--form-control-focus-color);
  box-shadow: none !important;
}

.form-group .select2-selection {
  font-size: var(--form-control-fontSize);
  color: var(--form-control-color);
  border: var(--form-control-border);
  border-radius: var(--form-control-borderRadius);
  padding: var(--form-control-padding);
  min-height: var(--form-control-height);
  background: url("../../krypton-theme-css/assets/icons/chevron-down.png");
  background-repeat: no-repeat;
  background-position: calc(100% - 15px);
  outline: none !important;
  box-shadow: none !important;
  padding-right: 50px;
  position: relative;
  background-color: var(--form-control-background-color) !important;
  display: flex;
  align-items: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .form-group .select2-selection {
    font-size: calc(16 * var(--scaleWidth));
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(50 * var(--scaleWidth));
    gap: calc(16 * var(--scaleWidth));
    min-height: calc(44 * var(--scaleWidth));
    background-position: calc(100% - 0.9375vw);
    background-size: calc(20 * var(--scaleWidth));
  }
}
.form-group .select2-selection:focus {
  border-color: var(--form-control-focus-color);
  box-shadow: none !important;
}
.form-group .select2-selection .select2-selection__arrow {
  display: none !important;
}
.form-group .select2-selection .select2-search .select2-search__field {
  height: var(--form-control-height);
  margin-top: 0;
  line-height: var(--form-control-height);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .form-group .select2-selection .select2-search .select2-search__field {
    height: calc(44 * var(--scaleWidth));
    line-height: calc(44 * var(--scaleWidth));
  }
}

.select2-container {
  width: 100% !important;
}
.select2-container .select2-selection {
  background-color: var(--form-control-background-color) !important;
  width: 100%;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  color: var(--form-control-color);
}

.select2-dropdown {
  background-color: var(--form-control-background-color) !important;
  border: var(--form-control-border);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-primary-mode);
  color: var(--form-control-color);
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--color-primary-mode);
  color: #ffffff;
}

.select2-results__option--highlighted {
  color: #ffffff !important;
}

.select2-results__option[aria-selected] {
  font-size: var(--form-control-fontSize);
  color: var(--form-control-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .select2-results__option[aria-selected] {
    font-size: calc(16 * var(--scaleWidth));
  }
}

body[data-select2-id] {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.switch {
  position: relative;
  display: inline-block;
  width: 35px;
  height: 18px;
  float: right;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .switch {
    width: calc(35 * var(--scaleWidth));
    height: calc(18 * var(--scaleWidth));
  }
}
.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--slider-background-color);
  transition: 0.4s;
}
.slider:before {
  position: absolute;
  content: "";
  width: 16.88px;
  height: 15.83px;
  left: 1.5px;
  bottom: 1.5px;
  background-color: var(--color-white-background);
  transition: 0.4s;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .slider:before {
    width: calc(16.88 * var(--scaleWidth));
    height: calc(15.83 * var(--scaleWidth));
    left: calc(1.5 * var(--scaleWidth));
    bottom: calc(1.5 * var(--scaleWidth));
  }
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .slider.round {
    border-radius: calc(34 * var(--scaleWidth));
  }
}
.slider.round:before {
  border-radius: 50%;
}

.form-group-view {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .form-group-view {
    gap: calc(2 * var(--scaleWidth));
  }
}
.form-group-view .title,
.form-group-view .label {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  margin-bottom: 0;
  font-size: var(--form-group-view-title-fontSize);
  line-height: 120.625%;
  color: var(--form-group-view-title-color);
  font-weight: 400 !important;
  text-transform: capitalize;
  border: 0 !important;
  padding: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .form-group-view .title,
  .form-group-view .label {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.form-group-view .value {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  margin-bottom: 0;
  font-size: var(--form-group-view-value-fontSize);
  line-height: 137.3%;
  color: var(--form-group-view-value-color);
  font-weight: 600 !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .form-group-view .value {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.form-group-view .value span {
  font-weight: 600;
}

.disable-event {
  pointer-events: none !important;
  cursor: not-allowed;
}

.my-3.taglib-captcha {
  margin: 0 !important;
}

.signed-out {
  overflow: hidden !important;
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */
}
.signed-out .portlet {
  margin-bottom: 0 !important;
}
.signed-out .main-login-form::-webkit-scrollbar {
  width: 6px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .signed-out .main-login-form::-webkit-scrollbar {
    width: calc(6 * var(--scaleWidth));
  }
}
.signed-out .main-login-form::-webkit-scrollbar-track {
  background: var(--scrollbar-track-background-color);
}
.signed-out .main-login-form::-webkit-scrollbar-thumb {
  background: var(--color-primary-mode);
}
.signed-out .main-login-form::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-mode);
}

.uploadBox {
  display: flex;
  border: var(--form-fileUploader-border);
  border-radius: var(--form-fileUploader-borderRadius);
  padding: var(--form-fileUploader-padding);
  background-color: var(--form-fileUploader-background-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .uploadBox {
    padding-top: calc(15 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
    padding-left: calc(30 * var(--scaleWidth));
    padding-right: calc(30 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.uploadBox .main-pitch {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  text-align: center;
  border: var(--form-fileUploader-mainPitch-border);
  padding: var(--form-fileUploader-mainPitch-padding);
  gap: 0;
  height: 100%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .uploadBox .main-pitch {
    padding-top: calc(15 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
    padding-left: calc(30 * var(--scaleWidth));
    padding-right: calc(30 * var(--scaleWidth));
  }
}
.uploadBox .main-pitch img {
  max-width: max-content;
}
.uploadBox .main-pitch input[type=file] {
  display: none;
}
.uploadBox .main-pitch .upload_text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--form-fileUploader-uploaded-text-fontSize);
  color: var(--form-fileUploader-uploaded-text-color);
  font-weight: 400;
  gap: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .uploadBox .main-pitch .upload_text {
    gap: calc(5 * var(--scaleWidth));
    font-size: calc(14 * var(--scaleWidth));
  }
}
.uploadBox .main-pitch .upload_text span {
  color: var(--form-fileUploader-uploaded-text-innerText-color);
}
.uploadBox .main-pitch .upload_icon .constl-icon {
  font-size: 48px;
  line-height: 48px;
  color: var(--form-fileUploader-uploaded-text-innerText-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .uploadBox .main-pitch .upload_icon .constl-icon {
    font-size: calc(48 * var(--scaleWidth));
    line-height: calc(48 * var(--scaleWidth));
  }
}

.uploadBox.dragover {
  border-color: var(--form-fileUploader-dragover-border-color);
  background-color: var(--form-fileUploader-dragover-background-color);
}

.file-preview {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--form-fileUploader-uploaded-preview-background);
  padding: var(--form-fileUploader-uploaded-preview-padding);
  border-radius: var(--form-fileUploader-uploaded-preview-borderRadius);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .file-preview {
    padding-top: calc(8 * var(--scaleWidth));
    padding-bottom: calc(8 * var(--scaleWidth));
    padding-left: calc(12 * var(--scaleWidth));
    padding-right: calc(12 * var(--scaleWidth));
    gap: calc(16 * var(--scaleWidth));
    border-radius: calc(5 * var(--scaleWidth));
  }
}
.file-preview span {
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.file-preview .close-btn {
  cursor: pointer;
  color: var(--color-danger-mode);
  font-weight: bold;
  margin-left: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .file-preview .close-btn {
    margin-left: calc(10 * var(--scaleWidth));
  }
}

.file-preview-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .file-preview-container {
    gap: calc(5 * var(--scaleWidth));
  }
}

@media (min-width: 576px) {
  .form-inline .form-group.textarea, .form-inline .form-group.attachments {
    align-items: flex-start;
  }
  .form-inline .form-group > label {
    width: 180px;
    text-align: left;
    justify-content: flex-start;
    margin-bottom: 0;
    display: inline;
  }
  .form-inline .form-group .custom-select,
  .form-inline .form-group .form-control:not([type=radio], [type=checkbox]),
  .form-inline .form-group .form-group-radio,
  .form-inline .form-group .form-group-checkbox,
  .form-inline .form-group .form-control-uploader,
  .form-inline .form-group .react-datepicker-wrapper {
    width: calc(100% - 180px);
  }
  .form-inline .form-group .react-datepicker-wrapper input[type=text] {
    width: 100%;
  }
  .form-inline .form-group .text-danger {
    width: 100%;
    margin-left: 180px;
  }
  .form-inline .form-group .text-counter + .text-danger {
    position: relative;
    margin-top: -21px;
    padding-right: 70px;
  }
  .form-inline .form-group .text-danger-announcement {
    margin-left: 0;
  }
}
.form-group {
  /* Hide the default calendar icon in some browsers */
}
.form-group input[type=date],
.form-group input[type=datetime-local] {
  appearance: none;
  /* Removes default styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("../../krypton-theme-css/assets/icons/calendar_icon.png");
  background-repeat: no-repeat;
  background-position: calc(100% - 12px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .form-group input[type=date],
  .form-group input[type=datetime-local] {
    background-position: calc(100% - 0.75vw);
    background-size: calc(24 * var(--scaleWidth));
  }
}
.form-group input[type=date]::-webkit-calendar-picker-indicator,
.form-group input[type=datetime-local]::-webkit-calendar-picker-indicator {
  z-index: 99999;
  position: relative;
  opacity: 0;
}

.react-datepicker-wrapper,
.react-datepicker-wrapper {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  margin: 0;
  padding: 0;
}
.react-datepicker-wrapper .react-datepicker__input-container,
.react-datepicker-wrapper .react-datepicker__input-container,
.react-datepicker-wrapper .react-datepicker__input-container,
.react-datepicker-wrapper .react-datepicker__input-container {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  margin: 0;
  padding: 0;
}
.react-datepicker-wrapper .react-datepicker__input-container .custom-datepicker,
.react-datepicker-wrapper .react-datepicker__input-container .form-control,
.react-datepicker-wrapper .react-datepicker__input-container input[type=date],
.react-datepicker-wrapper .react-datepicker__input-container input[type=text],
.react-datepicker-wrapper .react-datepicker__input-container .custom-datepicker,
.react-datepicker-wrapper .react-datepicker__input-container .form-control,
.react-datepicker-wrapper .react-datepicker__input-container input[type=date],
.react-datepicker-wrapper .react-datepicker__input-container input[type=text],
.react-datepicker-wrapper .react-datepicker__input-container .custom-datepicker,
.react-datepicker-wrapper .react-datepicker__input-container .form-control,
.react-datepicker-wrapper .react-datepicker__input-container input[type=date],
.react-datepicker-wrapper .react-datepicker__input-container input[type=text],
.react-datepicker-wrapper .react-datepicker__input-container .custom-datepicker,
.react-datepicker-wrapper .react-datepicker__input-container .form-control,
.react-datepicker-wrapper .react-datepicker__input-container input[type=date],
.react-datepicker-wrapper .react-datepicker__input-container input[type=text] {
  background-color: var(--form-control-background-color);
  font-size: var(--form-control-fontSize);
  color: var(--form-control-color);
  border: var(--form-control-border);
  border-radius: var(--form-control-borderRadius);
  padding: var(--form-control-padding);
  line-height: 140%;
  min-height: var(--form-control-height);
  appearance: none;
  /* Removes default styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("../../krypton-theme-css/assets/icons/calendar_icon.png");
  background-repeat: no-repeat;
  background-position: calc(100% - 12px);
  width: 100%;
  padding-right: 30px;
  outline: none !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .react-datepicker-wrapper .react-datepicker__input-container .custom-datepicker,
  .react-datepicker-wrapper .react-datepicker__input-container .form-control,
  .react-datepicker-wrapper .react-datepicker__input-container input[type=date],
  .react-datepicker-wrapper .react-datepicker__input-container input[type=text],
  .react-datepicker-wrapper .react-datepicker__input-container .custom-datepicker,
  .react-datepicker-wrapper .react-datepicker__input-container .form-control,
  .react-datepicker-wrapper .react-datepicker__input-container input[type=date],
  .react-datepicker-wrapper .react-datepicker__input-container input[type=text],
  .react-datepicker-wrapper .react-datepicker__input-container .custom-datepicker,
  .react-datepicker-wrapper .react-datepicker__input-container .form-control,
  .react-datepicker-wrapper .react-datepicker__input-container input[type=date],
  .react-datepicker-wrapper .react-datepicker__input-container input[type=text],
  .react-datepicker-wrapper .react-datepicker__input-container .custom-datepicker,
  .react-datepicker-wrapper .react-datepicker__input-container .form-control,
  .react-datepicker-wrapper .react-datepicker__input-container input[type=date],
  .react-datepicker-wrapper .react-datepicker__input-container input[type=text] {
    font-size: calc(16 * var(--scaleWidth));
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(30 * var(--scaleWidth));
    min-height: calc(44 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
    background-position: calc(100% - 0.75vw);
    background-size: calc(24 * var(--scaleWidth));
  }
}

/*=== Start MultiSelection  ===*/
.multiselect-native-select .btn-group {
  width: 100%;
}
.multiselect-native-select .multiselect-container,
.multiselect-native-select .multiselect-container.dropdown-menu.show {
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  top: 100% !important;
  background-color: var(--form-control-background-color);
  color: var(--form-control-color);
  border: var(--form-control-border);
}

.form-group .btn-group .multiselect.dropdown-toggle {
  width: 100%;
}
.form-group .multiselect-container li a {
  text-decoration: none !important;
}

.multiselect.dropdown-toggle {
  font-size: var(--form-control-fontSize);
  color: var(--form-control-color);
  border: var(--form-control-border);
  border-radius: var(--form-control-borderRadius);
  padding: var(--form-control-padding);
  line-height: 140%;
  min-height: var(--form-control-height);
  background: url("../../krypton-theme-css/assets/icons/chevron-down.png");
  background-repeat: no-repeat;
  background-position: calc(100% - 15px);
  outline: none !important;
  box-shadow: none !important;
  padding-right: 50px;
  background-color: var(--form-control-background-color);
  text-align: left;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .multiselect.dropdown-toggle {
    font-size: calc(16 * var(--scaleWidth));
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(50 * var(--scaleWidth));
    min-height: calc(44 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
    background-position: calc(100% - 0.9375vw);
    background-size: calc(20 * var(--scaleWidth));
  }
}
.multiselect.dropdown-toggle .caret {
  display: none !important;
}
.multiselect.dropdown-toggle::after {
  display: none;
}

.multiselect-container .multiselect-item.multiselect-filter {
  padding: 10px;
}
.multiselect-container .multiselect-item.multiselect-filter .input-group {
  width: 100%;
  display: inline-block;
  vertical-align: top;
  margin: 0;
  position: relative;
}
.multiselect-container .multiselect-item.multiselect-filter .input-group .form-control {
  border: var(--form-control-border);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.0509803922);
  border-radius: var(--form-control-borderRadius);
  position: relative;
  padding-right: 38px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .multiselect-container .multiselect-item.multiselect-filter .input-group .form-control {
    padding-right: calc(38 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.multiselect-container .multiselect-item.multiselect-filter .input-group::after {
  position: absolute;
  content: "";
  background-image: url("../../krypton-theme-css/assets/icons/search_icon.png");
  background-repeat: no-repeat;
  width: 18px;
  height: 18px;
  right: 12px;
  top: 13px;
  z-index: 9;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .multiselect-container .multiselect-item.multiselect-filter .input-group::after {
    width: calc(18 * var(--scaleWidth));
    height: calc(18 * var(--scaleWidth));
    right: calc(12 * var(--scaleWidth));
    top: calc(13 * var(--scaleWidth));
    background-size: calc(18 * var(--scaleWidth));
  }
}
.multiselect-container .multiselect-item.multiselect-filter .input-group .input-group-btn {
  display: none;
}
.multiselect-container .multiselect-item.multiselect-filter .input-group .multiselect-search {
  width: 100%;
}
.multiselect-container .multiselect-item.multiselect-filter .input-group .multiselect-clear-filter {
  background: none;
  border: none;
  color: #999;
}
.multiselect-container li a label.checkbox {
  margin: 0 !important;
  color: var(--form-control-color) !important;
  display: block;
  width: 100%;
  padding: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .multiselect-container li a label.checkbox {
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
  }
}
.multiselect-container li:hover, .multiselect-container li:focus, .multiselect-container li.active {
  background: transparent !important;
}

.multiselect-container li {
  position: relative;
  padding: 0px 10px 10px 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .multiselect-container li {
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
  }
}
.multiselect-container li label.checkbox {
  padding-left: 30px !important;
  position: relative;
  display: inline-block;
  cursor: pointer;
  color: var(--body-text-color);
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 400;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .multiselect-container li label.checkbox {
    font-size: calc(14 * var(--scaleWidth));
    padding-right: calc(30 * var(--scaleWidth));
  }
}
.multiselect-container li label.checkbox input[type=checkbox] {
  display: none;
}
.multiselect-container li label.checkbox::before, .multiselect-container li label.checkbox::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  box-shadow: none;
  outline: none;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .multiselect-container li label.checkbox::before, .multiselect-container li label.checkbox::after {
    width: calc(20 * var(--scaleWidth));
    height: calc(20 * var(--scaleWidth));
    border-radius: calc(3 * var(--scaleWidth));
    top: calc(2 * var(--scaleWidth));
  }
}
.multiselect-container li label.checkbox::before {
  border: 2px solid var(--input-checkbox-border-color);
  background-color: #fff;
}
.multiselect-container li label.checkbox::after {
  background-repeat: no-repeat;
  background-position: center;
}
.multiselect-container li.active label.checkbox::after {
  background-color: var(--color-primary-mode);
  background-image: url("../../krypton-theme-css/assets/icons/checked_icon.png");
}
.multiselect-container li.active label.checkbox::before {
  border-color: var(--color-primary-mode);
}
.multiselect-container li.multiselect-all a.multiselect-all {
  text-decoration: none !important;
}
.multiselect-container li.multiselect-all .checkbox {
  font-weight: 400;
  text-decoration: none !important;
  padding: 5px 20px 3px 30px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .multiselect-container li.multiselect-all .checkbox {
    padding-top: calc(5 * var(--scaleWidth)) !important;
    padding-bottom: calc(3 * var(--scaleWidth)) !important;
    padding-left: calc(30 * var(--scaleWidth)) !important;
    padding-right: calc(20 * var(--scaleWidth)) !important;
  }
}

.multiselect-container li a label.checkbox {
  padding-top: 2px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .multiselect-container li a label.checkbox {
    padding-top: calc(2 * var(--scaleWidth)) !important;
  }
}

/*===// End MultiSelection  ===*/
@media (min-width: 1199px) and (max-width: 1400px) {
  .form-inline .form-group .custom-select,
  .form-inline .form-group .form-control:not([type=radio], [type=checkbox]),
  .form-inline .form-group .form-group-radio,
  .form-inline .form-group .form-group-checkbox,
  .form-inline .form-group .form-control-uploader,
  .form-inline .form-group .react-datepicker-wrapper {
    width: calc(100% - 11.25vw);
  }
}

.open-sidebar .select2-container {
  z-index: 9999;
}

.card {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  background-color: var(--card-background-color);
  box-shadow: var(--card-boxShadow);
  padding: var(--card-padding);
  height: 100%;
  border-radius: var(--card-borderRadius);
  border: 0;
  margin-bottom: 0;
  overflow: hidden;
  overflow-y: auto;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .card {
    padding-top: calc(20 * var(--scaleWidth));
    padding-bottom: calc(20 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .card {
    padding: 15px;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: transparent;
  padding: 0;
  border: 0;
  margin-bottom: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .card-header {
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
.card-header .right-controls .react-datepicker-wrapper {
  max-width: 180px;
}
@media (max-width: 768px) {
  .card-header {
    flex-direction: column;
  }
}
.card-header .title {
  font-size: var(--card-header-title-fontSize);
  color: var(--card-header-title-color);
  line-height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .card-header .title {
    font-size: calc(24 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
  }
}
.card-header .title .constl-icon {
  font-size: var(--card-header-icon-fontSize, 28px);
  color: var(--card-header-icon-color, #372194);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .card-header .title .constl-icon {
    font-size: calc(28 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .card-header .title {
    width: 100%;
    margin-bottom: 10px;
  }
}
@media (max-width: 479px) {
  .card-header .title {
    font-size: var(--font-size-normal);
  }
}
.card-header.full-border-bottom {
  padding-bottom: var(--card-headerBorder-padding-bottom);
  position: relative;
  margin-bottom: var(--card-headerBorder-margin-bottom);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .card-header.full-border-bottom {
    margin-bottom: calc(15 * var(--scaleWidth));
    padding-bottom: calc(18 * var(--scaleWidth));
  }
}
.card-header.full-border-bottom::after {
  position: absolute;
  left: -1000px;
  width: 4000px;
  content: "";
  bottom: 0;
  height: 1px;
  background-color: var(--card-headerBorder-border-color);
  display: inline-block;
  vertical-align: top;
}
.card-header.border-bottom {
  padding-bottom: var(--card-headerBorder-padding-bottom);
  position: relative;
  margin-bottom: var(--card-headerBorder-margin-bottom);
  border-bottom: 1px solid var(--card-headerBorder-border-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .card-header.border-bottom {
    margin-bottom: calc(15 * var(--scaleWidth));
    padding-bottom: calc(18 * var(--scaleWidth));
  }
}

.card-body {
  padding: 0;
}

.card-title-header,
.card-form-header {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: var(--card-headerForm-fontSize);
  color: var(--card-headerForm-color);
  font-weight: 500;
  gap: 10px;
  text-transform: capitalize;
  padding-bottom: var(--card-headerForm-padding-bottom);
  border-bottom: var(--card-headerForm-border);
  margin-bottom: var(--card-headerForm-margin-bottom);
  justify-content: space-between;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .card-title-header,
  .card-form-header {
    font-size: calc(20 * var(--scaleWidth));
    padding-bottom: calc(7 * var(--scaleWidth));
    margin-bottom: calc(15 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
  }
}
.card-title-header .card-form-heading,
.card-form-header .card-form-heading {
  display: flex;
  align-items: center;
  gap: 6px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .card-title-header .card-form-heading,
  .card-form-header .card-form-heading {
    gap: calc(6 * var(--scaleWidth));
  }
}

.card-form-body {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}

.card-form-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 20px 0 0 0;
  width: 100%;
  border-top: var(--card-footerForm-border);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .card-form-footer {
    gap: calc(10 * var(--scaleWidth));
    padding-top: calc(20 * var(--scaleWidth));
  }
}
.card-form-footer .button {
  height: 40px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .card-form-footer .button {
    height: calc(40 * var(--scaleWidth));
  }
}
.card-form-footer .button-icon-text.disabled,
.card-form-footer .button-icon-text:disabled {
  color: var(--color-white);
}

.status-widget {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-widget {
    gap: calc(20 * var(--scaleWidth));
  }
}
@media (max-width: 1024px) {
  .status-widget {
    gap: 12px;
    justify-content: space-between;
  }
}
@media (max-width: 768px) {
  .status-widget {
    justify-content: space-between;
  }
}
.status-widget .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--customerMaster-status-widget-icon-dimension);
  height: var(--customerMaster-status-widget-icon-dimension);
  min-width: var(--customerMaster-status-widget-icon-dimension);
  border-radius: var(--customerMaster-status-widget-icon-borderRadius);
  background-color: var(--customerMaster-status-widget-icon-background-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-widget .icon {
    width: calc(80 * var(--scaleWidth));
    min-width: calc(80 * var(--scaleWidth));
    height: calc(80 * var(--scaleWidth));
    border-radius: calc(20 * var(--scaleWidth));
  }
}
.status-widget .status-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  text-align: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-widget .status-details {
    gap: calc(4 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .status-widget .status-details {
    text-align: right;
  }
}
@media (max-width: 1024px) {
  .status-widget .status-details {
    text-align: right;
  }
}
.status-widget .status-details .title {
  display: inline-block;
  width: auto;
  vertical-align: top;
  color: var(--customerMaster-status-widget-details-title-color);
  font-size: var(--customerMaster-status-widget-details-title-fontSize);
  font-weight: 500;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-widget .status-details .title {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.status-widget .status-details .value {
  font-size: var(--customerMaster-status-widget-details-value-fontSize);
  color: var(--customerMaster-status-widget-details-value-color);
  font-weight: 700;
  line-height: 50.83px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-widget .status-details .value {
    font-size: calc(42 * var(--scaleWidth));
    line-height: calc(50.83 * var(--scaleWidth));
  }
}
.status-widget.total .icon {
  background: color-mix(in srgb, white 76%, var(--customerMaster-status-widget-total-color));
}
.status-widget.total .icon .constl-icon {
  font-size: 48px;
  color: var(--customerMaster-status-widget-total-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-widget.total .icon .constl-icon {
    font-size: calc(48 * var(--scaleWidth));
  }
}
.status-widget.total .status-details .value {
  color: var(--customerMaster-status-widget-total-color);
}
.status-widget.active .icon {
  background: color-mix(in srgb, white 76%, var(--customerMaster-status-widget-active-color));
}
.status-widget.active .icon .constl-icon {
  font-size: 48px;
  color: var(--customerMaster-status-widget-active-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-widget.active .icon .constl-icon {
    font-size: calc(48 * var(--scaleWidth));
  }
}
.status-widget.active .status-details .value {
  color: var(--customerMaster-status-widget-active-color);
}
.status-widget.in-active .icon {
  background: color-mix(in srgb, white 76%, var(--customerMaster-status-widget-inactive-color));
}
.status-widget.in-active .icon .constl-icon {
  font-size: 48px;
  color: var(--customerMaster-status-widget-inactive-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-widget.in-active .icon .constl-icon {
    font-size: calc(48 * var(--scaleWidth));
  }
}
.status-widget.in-active .status-details .value {
  color: var(--customerMaster-status-widget-inactive-color);
}
.status-widget.pending .icon {
  background: color-mix(in srgb, white 76%, var(--customerMaster-status-widget-pending-color));
}
.status-widget.pending .icon .constl-icon {
  font-size: 48px;
  color: var(--customerMaster-status-widget-pending-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-widget.pending .icon .constl-icon {
    font-size: calc(48 * var(--scaleWidth));
  }
}
.status-widget.pending .status-details .value {
  color: var(--customerMaster-status-widget-pending-color);
}

.assigned-roles-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background-color: color-mix(in srgb, var(--assignedRoles-background-color), white 90%);
  border-radius: var(--assignedRoles-borderRadius);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .assigned-roles-card {
    gap: calc(3 * var(--scaleWidth));
    border-radius: calc(10 * var(--scaleWidth));
  }
}
.assigned-roles-card h6 {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--assignedRoles-title-fontSize);
  color: var(--assignedRoles-title-color);
  font-weight: 600;
  text-transform: capitalize;
  margin: 0;
  padding: var(--assignedRoles-padding);
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .assigned-roles-card h6 {
    font-size: calc(16 * var(--scaleWidth));
    padding-top: calc(15 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
  }
}
.assigned-roles-card h6::after {
  content: "\e313";
  font-family: "Material Symbols Outlined";
  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: "liga";
  -webkit-font-smoothing: antialiased;
  position: absolute;
  right: 10px;
  color: var(--assignedRoles-title-color);
  top: 12px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .assigned-roles-card h6::after {
    font-size: calc(24 * var(--scaleWidth));
    top: calc(10 * var(--scaleWidth));
    right: calc(10 * var(--scaleWidth));
  }
}
.assigned-roles-card h6.open::after {
  content: "\e316";
}
.assigned-roles-card p {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  color: var(--assignedRoles-description-color);
  font-weight: 400;
  margin: 0;
  font-size: var(--assignedRoles-description-fontSize);
  padding: var(--assignedRoles-padding);
  padding-top: 0 !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .assigned-roles-card p {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(22 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
  }
}

.inline-status-widget {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-right: 60px;
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .inline-status-widget {
    gap: calc(15 * var(--scaleWidth));
    padding-right: calc(60 * var(--scaleWidth));
  }
}
.inline-status-widget .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dashboard-horizontal-status-widget-icon-dimension);
  height: var(--dashboard-horizontal-status-widget-icon-dimension);
  min-width: var(--dashboard-horizontal-status-widget-icon-dimension);
  border-radius: var(--dashboard-horizontal-status-widget-icon-borderRadius);
  background-color: var(--dashboard-horizontal-status-widget-icon-background-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .inline-status-widget .icon {
    width: calc(80 * var(--scaleWidth));
    min-width: calc(80 * var(--scaleWidth));
    height: calc(80 * var(--scaleWidth));
    border-radius: calc(20 * var(--scaleWidth));
  }
}
.inline-status-widget .status-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: flex-start;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .inline-status-widget .status-details {
    gap: calc(4 * var(--scaleWidth));
  }
}
.inline-status-widget .status-details .title {
  display: inline-block;
  width: auto;
  vertical-align: top;
  color: var(--dashboard-horizontal-status-widget-details-title-color);
  font-size: var(--dashboard-horizontal-status-widget-details-title-fontSize);
  font-weight: 500;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .inline-status-widget .status-details .title {
    font-size: calc(22 * var(--scaleWidth));
  }
}
.inline-status-widget .status-details .description {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--dashboard-horizontal-status-widget-details-description-fontSize);
  color: var(--dashboard-horizontal-status-widget-details-description-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .inline-status-widget .status-details .description {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.inline-status-widget .status-details .value {
  display: flex;
  align-items: center;
  width: auto;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  font-size: var(--dashboard-horizontal-status-widget-details-value-fontSize);
  color: var(--dashboard-horizontal-status-widget-details-value-color);
  font-weight: 700;
  line-height: 32px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .inline-status-widget .status-details .value {
    font-size: calc(50 * var(--scaleWidth));
    line-height: calc(32 * var(--scaleWidth));
  }
}
.inline-status-widget .status-details .value span {
  font-size: var(--dashboard-horizontal-status-widget-details-value-span-fontSize);
  line-height: normal;
  font-weight: 400;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .inline-status-widget .status-details .value span {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.inline-status-widget.total .icon {
  background: color-mix(in srgb, white 76%, var(--customerMaster-status-widget-total-color));
}
.inline-status-widget.total .status-details .value {
  color: var(--customerMaster-status-widget-total-color);
}
.inline-status-widget.active .icon {
  background: color-mix(in srgb, white 76%, var(--customerMaster-status-widget-active-color));
}
.inline-status-widget.active .status-details .value {
  color: var(--customerMaster-status-widget-active-color);
}
.inline-status-widget.in-active .icon {
  background: color-mix(in srgb, white 76%, var(--customerMaster-status-widget-inactive-color));
}
.inline-status-widget.in-active .status-details .value {
  color: var(--customerMaster-status-widget-inactive-color);
}
.inline-status-widget.pending .icon {
  background: color-mix(in srgb, white 76%, var(--customerMaster-status-widget-pending-color));
}
.inline-status-widget.pending .status-details .value {
  color: var(--customerMaster-status-widget-pending-color);
}

.card:has(.inline-status-widget-dashboard) {
  background: var(--dashboard-status-widget-backrgound-color);
  box-shadow: var(--dashboard-status-widget-boxShadow);
  padding: var(--dashboard-status-widget-padding);
  border-radius: var(--dashboard-status-widget-borderRadius);
  border: var(--dashboard-status-widget-border);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .card:has(.inline-status-widget-dashboard) {
    padding-top: calc(20 * var(--scaleWidth));
    padding-bottom: calc(20 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
    border-radius: calc(12 * var(--scaleWidth));
  }
}
.card:has(.inline-status-widget-dashboard):has(.loader_wrap) {
  min-height: 104px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .card:has(.inline-status-widget-dashboard):has(.loader_wrap) {
    min-height: calc(104 * var(--scaleWidth));
  }
}

.inline-status-widget-dashboard {
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .inline-status-widget-dashboard {
    gap: calc(15 * var(--scaleWidth));
  }
}
.inline-status-widget-dashboard .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dashboard-status-widget-icon-dimension);
  height: var(--dashboard-status-widget-icon-dimension);
  min-width: var(--dashboard-status-widget-icon-dimension);
  border-radius: var(--dashboard-status-widget-icon-borderRadius);
  background-color: var(--dashboard-status-widget-icon-background-color);
  border: 1px solid #2E51DD;
  position: absolute;
  left: 0;
  top: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .inline-status-widget-dashboard .icon {
    width: calc(35 * var(--scaleWidth));
    min-width: calc(35 * var(--scaleWidth));
    height: calc(35 * var(--scaleWidth));
    border-radius: calc(20 * var(--scaleWidth));
  }
}
.inline-status-widget-dashboard .icon img {
  width: calc(100% - 7px);
}
.inline-status-widget-dashboard .icon .constl-icon {
  font-size: var(--dashboard-status-widget-icon-fontSize, 28px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .inline-status-widget-dashboard .icon .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.inline-status-widget-dashboard .status-details {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  width: 100%;
  position: relative;
  margin-top: 0;
  text-align: right;
}
.inline-status-widget-dashboard .status-details .title {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  color: var(--dashboard-status-widget-details-title-color);
  font-size: var(--dashboard-status-widget-details-title-fontSize);
  font-weight: 500;
  margin-top: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .inline-status-widget-dashboard .status-details .title {
    font-size: calc(16 * var(--scaleWidth));
    margin-top: calc(15 * var(--scaleWidth));
  }
}
.inline-status-widget-dashboard .status-details .title a {
  color: var(--dashboard-status-widget-details-title-color);
  text-decoration: none !important;
  cursor: pointer;
}
.inline-status-widget-dashboard .status-details .description {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--dashboard-status-widget-details-description-fontSize);
  color: var(--dashboard-status-widget-details-value-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .inline-status-widget-dashboard .status-details .description {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.inline-status-widget-dashboard .status-details .value {
  display: flex;
  align-items: end;
  width: 100%;
  flex-direction: column;
  font-size: var(--dashboard-status-widget-details-value-fontSize) !important;
  color: var(--dashboard-status-widget-details-value-color);
  font-weight: 700;
  line-height: 32px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .inline-status-widget-dashboard .status-details .value {
    font-size: calc(32 * var(--scaleWidth));
    line-height: calc(32 * var(--scaleWidth));
  }
}
.inline-status-widget-dashboard .status-details .value span {
  font-size: var(--dashboard-status-widget-details-value-span-fontSize);
  line-height: normal;
  font-weight: 400;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .inline-status-widget-dashboard .status-details .value span {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.inline-status-widget-dashboard.total .icon {
  background: color-mix(in srgb, white 76%, var(--dashboard-status-widget-total-color));
}
.inline-status-widget-dashboard.total .icon .constl-icon {
  color: var(--dashboard-status-widget-total-color);
}
.inline-status-widget-dashboard.total .status-details .value {
  color: var(--dashboard-status-widget-total-color);
}
.inline-status-widget-dashboard.active .icon {
  background: color-mix(in srgb, white 76%, var(--dashboard-status-widget-active-color));
}
.inline-status-widget-dashboard.active .icon .constl-icon {
  color: var(--dashboard-status-widget-active-color);
}
.inline-status-widget-dashboard.active .status-details .value {
  color: var(--dashboard-status-widget-active-color);
}
.inline-status-widget-dashboard.in-active .icon {
  background: color-mix(in srgb, white 76%, var(--dashboard-status-widget-inactive-color));
}
.inline-status-widget-dashboard.in-active .icon .constl-icon {
  color: var(--dashboard-status-widget-inactive-color);
}
.inline-status-widget-dashboard.in-active .status-details .value {
  color: var(--dashboard-status-widget-inactive-color);
}
.inline-status-widget-dashboard.pending .icon {
  background: color-mix(in srgb, white 76%, var(--dashboard-status-widget-pending-color));
}
.inline-status-widget-dashboard.pending .icon .constl-icon {
  color: var(--dashboard-status-widget-pending-color);
}
.inline-status-widget-dashboard.pending .status-details .value {
  color: var(--dashboard-status-widget-pending-color);
}
.inline-status-widget-dashboard.active-services .icon {
  background: color-mix(in srgb, white 76%, var(--dashboard-status-widget-activeServices-color));
  border-color: var(--dashboard-status-widget-activeServices-color);
}
.inline-status-widget-dashboard.active-services .icon .constl-icon {
  color: var(--dashboard-status-widget-activeServices-color);
}
.inline-status-widget-dashboard.active-services .status-details .value {
  color: var(--dashboard-status-widget-activeServices-color);
}
.inline-status-widget-dashboard.trouble-tickets .icon {
  background: color-mix(in srgb, white 76%, var(--dashboard-status-widget-troubleTickets-color));
  border-color: var(--dashboard-status-widget-troubleTickets-color);
}
.inline-status-widget-dashboard.trouble-tickets .icon .constl-icon {
  color: var(--dashboard-status-widget-troubleTickets-color);
}
.inline-status-widget-dashboard.trouble-tickets .status-details .value {
  color: var(--dashboard-status-widget-troubleTickets-color);
}
.inline-status-widget-dashboard.total-orders .icon {
  background: color-mix(in srgb, white 76%, var(--dashboard-status-widget-totalOrders-color));
  border-color: var(--dashboard-status-widget-totalOrders-color);
}
.inline-status-widget-dashboard.total-orders .icon .constl-icon {
  color: var(--dashboard-status-widget-totalOrders-color);
}
.inline-status-widget-dashboard.total-orders .status-details .value {
  color: var(--dashboard-status-widget-totalOrders-color);
}
.inline-status-widget-dashboard.total-invoices .icon {
  background: color-mix(in srgb, white 76%, var(--dashboard-status-widget-totalInvoices-color));
  border-color: var(--dashboard-status-widget-totalInvoices-color);
}
.inline-status-widget-dashboard.total-invoices .icon .constl-icon {
  color: var(--dashboard-status-widget-totalInvoices-color);
}
.inline-status-widget-dashboard.total-invoices .status-details .value {
  color: var(--dashboard-status-widget-totalInvoices-color);
}

.pie-chart-card {
  overflow: hidden !important;
}
.pie-chart-card .card-title {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--dashboard-pieChart-card-fontSize);
  line-height: 137.5%;
  margin-bottom: var(--dashboard-pieChart-card-margin-bottom);
  color: var(--dashboard-pieChart-card-color);
  font-weight: 500;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .pie-chart-card .card-title {
    font-size: calc(16 * var(--scaleWidth));
    margin-bottom: calc(10 * var(--scaleWidth));
  }
}
.pie-chart-card .chart-container {
  max-width: 300px;
  display: block;
  margin: 0 auto;
}

.widget-chart-card {
  overflow: inherit;
}

.table-card {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  border-radius: 8px;
  box-shadow: var(--table-card-boxShadow);
  background: var(--table-card-background-color);
  padding-bottom: 20px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-card {
    padding-bottom: calc(20 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.table-card .table-main-body {
  padding: var(--table-card-main-body-padding) !important;
  display: inline-block;
  vertical-align: top;
  margin: -10px 0 0 0 !important;
  width: 100%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-card .table-main-body {
    padding-left: calc(10 * var(--scaleWidth)) !important;
    padding-right: calc(10 * var(--scaleWidth)) !important;
    margin-top: calc(-10 * var(--scaleWidth)) !important;
  }
}

.card-table {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  background-color: var(--table-card-background-color);
  box-shadow: var(--table-card-boxShadow);
  height: 100%;
  border-radius: 8px;
  border: 0;
  overflow: hidden;
  margin-bottom: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .card-table {
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.card-table .card-header {
  padding: var(--card-table-header-padding);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .card-table .card-header {
    padding-top: calc(18 * var(--scaleWidth));
    padding-bottom: calc(18 * var(--scaleWidth));
    padding-left: calc(25 * var(--scaleWidth));
    padding-right: calc(25 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .card-table .card-header {
    gap: 10px;
    align-items: flex-start;
  }
}
.card-table .card-header .table-name {
  display: inline-block;
  width: auto;
  vertical-align: top;
  font-size: var(--card-table-header-heading-fontSize);
  color: var(--card-table-header-heading-color);
  font-weight: 600;
  line-height: 140%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .card-table .card-header .table-name {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.card-table .table-footer {
  padding: var(--card-table-footer-padding);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .card-table .table-footer {
    padding-top: calc(18 * var(--scaleWidth));
    padding-bottom: calc(18 * var(--scaleWidth));
    padding-left: calc(25 * var(--scaleWidth));
    padding-right: calc(25 * var(--scaleWidth));
  }
}
@media (max-width: 1199px) {
  .card-table .table-footer {
    padding: 15px 15px 0 15px;
  }
}
.card-table.invoice_table .table-main-body {
  margin: -10px 0 0 0 !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .card-table.invoice_table .table-main-body {
    margin-top: calc(-10 * var(--scaleWidth)) !important;
  }
}

.table-header {
  display: flex;
  align-items: center;
  padding: var(--card-table-header-padding);
  padding-bottom: 20px;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-header {
    padding-top: calc(18 * var(--scaleWidth));
    padding-bottom: calc(20 * var(--scaleWidth));
    padding-left: calc(25 * var(--scaleWidth));
    padding-right: calc(25 * var(--scaleWidth));
  }
}
@media (max-width: 1199px) {
  .table-header {
    padding-bottom: 15px;
    align-items: flex-start !important;
    gap: 15px;
  }
}
@media (max-width: 1199px) and (min-width: 1199px) and (max-width: 1400px) {
  .table-header {
    padding-bottom: calc(15 * var(--scaleWidth));
    gap: calc(15 * var(--scaleWidth));
  }
}
.table-header .leftside {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-header .leftside {
    gap: calc(15 * var(--scaleWidth));
  }
}
.table-header .leftside .listShowingSwitch input[type=checkbox] {
  display: none;
}
.table-header .leftside .listShowingSwitch label {
  display: flex;
  align-items: center;
  background-color: var(--color-primary-mode);
  padding: 10px 15px;
  margin: 0;
  box-sizing: border-box;
  border-radius: 45px;
  gap: 5px;
  cursor: pointer;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-header .leftside .listShowingSwitch label {
    gap: calc(15 * var(--scaleWidth));
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
    border-radius: calc(45 * var(--scaleWidth));
  }
}
.table-header .leftside .listShowingSwitch label span {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  background-color: var(--color-white-background);
  font-size: var(--font-size-small);
  line-height: var(--font-size-small);
  color: var(--color-primary-mode);
  font-weight: 600;
  border-radius: 25px;
  color: var(--color-white);
  user-select: none;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-header .leftside .listShowingSwitch label span {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(14 * var(--scaleWidth));
    padding-top: calc(5 * var(--scaleWidth));
    padding-bottom: calc(5 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
    border-radius: calc(45 * var(--scaleWidth));
    border-radius: calc(25 * var(--scaleWidth));
  }
}
.table-header .leftside .listShowingSwitch label span.all {
  background-color: transparent;
  color: var(--color-white);
}
.table-header .leftside .listShowingSwitch label span.number {
  background-color: var(--color-white-background);
  color: var(--color-primary-mode);
}
.table-header .leftside .listShowingSwitch input[type=checkbox]:checked + label .all {
  background-color: var(--color-white-background);
  color: var(--color-primary-mode);
}
.table-header .leftside .listShowingSwitch input[type=checkbox]:checked + label .number {
  background-color: transparent;
  color: var(--color-white);
}
.table-header .leftside .status {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  gap: 20px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-header .leftside .status {
    gap: calc(20 * var(--scaleWidth));
  }
}
.table-header .leftside .status > li {
  list-style: none;
}
.table-header .leftside .status > li .status-block {
  display: flex;
  align-items: center;
  font-size: var(--card-table-header-status-fontSize);
  color: var(--card-table-header-status-color);
  font-weight: 400;
  letter-spacing: -0.2px;
  gap: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-header .leftside .status > li .status-block {
    font-size: calc(16 * var(--scaleWidth));
    gap: calc(15 * var(--scaleWidth));
  }
}
.table-header .leftside .status > li .status-block span {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  color: var(--card-table-header-status-inside-color);
  background-color: var(--color-primary-mode);
  padding: var(--card-table-header-status-inside-padding);
  border-radius: var(--card-table-header-status-inside-borderRadius);
  font-size: var(--card-table-header-status-inside-fontSize);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-header .leftside .status > li .status-block span {
    font-size: calc(14 * var(--scaleWidth));
    padding-left: calc(7 * var(--scaleWidth));
    padding-right: calc(7 * var(--scaleWidth));
    border-radius: calc(25 * var(--scaleWidth));
  }
}
.table-header .leftside .table-name {
  display: inline-block;
  width: auto;
  vertical-align: top;
  font-size: var(--card-table-header-heading-fontSize);
  color: var(--card-table-header-heading-color);
  font-weight: 600;
  line-height: 140%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-header .leftside .table-name {
    font-size: calc(22 * var(--scaleWidth));
  }
}
.table-header .rightside {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-header .rightside {
    gap: calc(10 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .table-header .rightside {
    width: 100%;
    gap: 10px;
  }
}
@media (max-width: 768px) and (min-width: 1199px) and (max-width: 1400px) {
  .table-header .rightside {
    gap: calc(10 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .table-header .rightside .searchbar {
    width: 100%;
  }
}
.table-header .rightside .searchbar input[type=text] {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  max-width: var(--card-table-header-searchbar-maxWidth);
  min-width: var(--card-table-header-searchbar-maxWidth);
  background-color: var(--card-table-header-searchbar-backrgound-color);
  padding: var(--card-table-header-searchbar-padding);
  padding-left: var(--card-table-header-searchbar-padding-left);
  font-size: var(--card-table-header-searchbar-fontSize);
  font-weight: var(--card-table-header-searchbar-fontWeight);
  outline: none;
  border: var(--card-table-header-searchbar-border);
  border-radius: var(--card-table-header-searchbar-borderRadius);
  background-image: url("../../krypton-theme-css/assets/icons/table_search_icon.png");
  background-repeat: no-repeat;
  background-position: 12px;
  color: var(--body-text-color);
  height: var(--card-table-header-searchbar-height);
  color: var(--card-table-header-searchbar-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-header .rightside .searchbar input[type=text] {
    font-size: calc(16 * var(--scaleWidth));
    padding-top: calc(12 * var(--scaleWidth));
    padding-bottom: calc(12 * var(--scaleWidth));
    padding-left: calc(42 * var(--scaleWidth));
    padding-right: calc(12 * var(--scaleWidth));
    gap: calc(16 * var(--scaleWidth));
    max-width: calc(250 * var(--scaleWidth));
    min-width: calc(250 * var(--scaleWidth));
    height: calc(44 * var(--scaleWidth));
    border-radius: calc(10 * var(--scaleWidth));
    background-size: calc(18 * var(--scaleWidth));
    background-position: calc(12 * var(--scaleWidth));
  }
}
.table-header .rightside .searchbar input[type=text]::placeholder {
  color: var(--card-table-header-searchbar-placeholder-color);
}
@media (max-width: 768px) {
  .table-header .rightside .searchbar input[type=text] {
    max-width: 100%;
    min-width: 100%;
  }
}
.table-header .rightside .form-group {
  margin: 0;
}
.table-header .rightside .form-group .custom-select {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  max-width: var(--card-table-header-selectDropdown-maxWidth);
  background-color: var(--card-table-header-selectDropdown-background-color);
  padding: var(--card-table-header-selectDropdown-padding);
  font-size: var(--card-table-header-selectDropdown-fontSize);
  font-weight: var(--card-table-header-selectDropdown-fontWeight);
  outline: none;
  border: var(--card-table-header-selectDropdown-border);
  border-radius: var(--card-table-header-selectDropdown-borderRadius);
  background-repeat: no-repeat;
  color: var(--card-table-header-selectDropdown-color);
  padding-right: var(--card-table-header-selectDropdown-padding-right);
  background-position: calc(100% - 12px);
  min-width: var(--card-table-header-selectDropdown-maxWidth);
  line-height: 2;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-header .rightside .form-group .custom-select {
    font-size: calc(16 * var(--scaleWidth));
    padding-top: calc(5 * var(--scaleWidth));
    padding-bottom: calc(5 * var(--scaleWidth));
    padding-left: calc(12 * var(--scaleWidth));
    padding-right: calc(40 * var(--scaleWidth));
    max-width: calc(250 * var(--scaleWidth));
    min-width: calc(250 * var(--scaleWidth));
    height: calc(44 * var(--scaleWidth));
    border-radius: calc(10 * var(--scaleWidth));
    background-position: calc(100% - 12 * var(--scaleWidth));
    background-size: calc(20 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .table-header .rightside .form-group .custom-select {
    max-width: 100%;
    min-width: 100%;
  }
}
.table-header .rightside .form-group .select2-container .select2-selection {
  max-width: var(--card-table-header-selectDropdown-maxWidth);
  min-width: var(--card-table-header-selectDropdown-maxWidth);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-header .rightside .form-group .select2-container .select2-selection {
    max-width: calc(250 * var(--scaleWidth));
    min-width: calc(250 * var(--scaleWidth));
  }
}
.table-header .rightside .button.button-outline-icon-text {
  box-shadow: var(--card-table-header-resetButton-boxShadow);
  width: var(--card-table-header-resetButton-width);
  font-weight: var(--card-table-header-resetButton-fontWeight);
  border-radius: var(--card-table-header-resetButton-borderRadius);
  border: var(--card-table-header-resetButton-border);
  background-color: var(--card-table-header-resetButton-background-color);
  min-height: 44px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-header .rightside .button.button-outline-icon-text {
    width: calc(96 * var(--scaleWidth));
    min-height: calc(44 * var(--scaleWidth));
    height: calc(44 * var(--scaleWidth));
    border-width: calc(2 * var(--scaleWidth));
    border-radius: calc(10 * var(--scaleWidth));
  }
  .table-header .rightside .button.button-outline-icon-text .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.table-header .rightside .button.button-outline-icon-text:hover, .table-header .rightside .button.button-outline-icon-text:active {
  background-color: var(--card-table-header-resetButton-hover-background-color) !important;
  color: var(--card-table-header-resetButton-hover-color);
}
.table-header .rightside .button.button-icon-text-danger {
  height: 44px;
  border-radius: 8px;
  font-weight: 600;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-header .rightside .button.button-icon-text-danger {
    height: calc(44 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.table-header .rightside .button.button-icon-text {
  height: 44px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-header .rightside .button.button-icon-text {
    height: calc(44 * var(--scaleWidth));
  }
}
.table-header .rightside .group-buttons {
  display: flex;
  align-items: center;
  gap: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-header .rightside .group-buttons {
    gap: calc(5 * var(--scaleWidth));
  }
}
.table-header .rightside .group-buttons button {
  display: inline-block;
  width: auto;
  vertical-align: top;
  border: none;
  padding: 0;
  outline: none;
  background-color: transparent;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-header .rightside .group-buttons button img {
    height: calc(44 * var(--scaleWidth));
  }
}

.table-main-body {
  padding: 0;
  display: block;
  margin: 0 -10px;
  width: auto;
  margin-top: -10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-main-body {
    margin-left: calc(-10 * var(--scaleWidth));
    margin-right: calc(-10 * var(--scaleWidth));
    margin-top: calc(-10 * var(--scaleWidth));
  }
}
@media (max-width: 1199px) {
  .table-main-body {
    padding: 0 !important;
  }
}
.table-main-body .table-container {
  overflow: auto;
  padding: 0 10px;
  padding-top: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-main-body .table-container {
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
    padding-top: calc(10 * var(--scaleWidth));
  }
}
@media (max-width: 1199px) {
  .table-main-body .table-container {
    padding: 15px;
    overflow: auto;
  }
}

.dataTable {
  border-spacing: 0 5px;
  border-collapse: separate;
  margin-bottom: 0;
  margin-top: -5px;
  width: 100%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable {
    border-spacing: 0 calc(5 * var(--scaleWidth));
    margin-top: calc(-5 * var(--scaleWidth));
  }
}
@media (max-width: 1199px) {
  .dataTable {
    width: 1200px !important;
  }
}
.dataTable thead tr {
  box-shadow: var(--table-boxShadow);
  border-radius: var(--table-thead-borderRadius);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable thead tr {
    border-radius: calc(6 * var(--scaleWidth));
  }
}
.dataTable thead tr th {
  color: var(--table-thead-th-color);
  font-size: var(--table-thead-th-fontSize);
  font-weight: 700;
  vertical-align: middle;
  border: 0;
  border-top: var(--table-thead-th-border);
  border-bottom: var(--table-thead-th-border);
  background: var(--table-thead-th-background);
  padding: var(--table-thead-th-padding);
  text-align: left;
  height: 56px;
  text-transform: uppercase;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable thead tr th {
    font-size: calc(14 * var(--scaleWidth));
    padding-top: calc(5 * var(--scaleWidth));
    padding-bottom: calc(5 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
    height: calc(56 * var(--scaleWidth));
  }
}
.dataTable thead tr th:first-child {
  border-left: var(--table-thead-th-border);
  border-top-left-radius: var(--table-thead-borderRadius);
  border-bottom-left-radius: var(--table-thead-borderRadius);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable thead tr th:first-child {
    border-top-left-radius: calc(6 * var(--scaleWidth));
    border-bottom-left-radius: calc(6 * var(--scaleWidth));
  }
}
.dataTable thead tr th:last-child {
  border-right: var(--table-thead-th-border);
  border-top-right-radius: var(--table-thead-borderRadius);
  border-bottom-right-radius: var(--table-thead-borderRadius);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable thead tr th:last-child {
    border-top-right-radius: calc(6 * var(--scaleWidth));
    border-bottom-right-radius: calc(6 * var(--scaleWidth));
  }
}
.dataTable thead tr th input[type=checkbox] {
  width: 16px;
  height: 16px;
  display: flex;
  align-self: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable thead tr th input[type=checkbox] {
    width: calc(16 * var(--scaleWidth));
    height: calc(16 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .dataTable thead tr th {
    white-space: nowrap;
  }
}
.dataTable tbody tr {
  border-radius: var(--table-thead-borderRadius);
  box-shadow: var(--table-boxShadow);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable tbody tr {
    border-radius: calc(10 * var(--scaleWidth));
  }
}
.dataTable tbody tr:nth-child(even) td {
  background-color: var(--table-tbody-tr-td-background-color-even);
}
.dataTable tbody tr:nth-child(odd) td {
  background-color: var(--table-tbody-tr-td-background-color-odd);
}
.dataTable tbody tr td {
  font-size: var(--table-tbody-tr-td-fontSize);
  color: var(--table-tbody-tr-td-color);
  font-weight: 400;
  vertical-align: middle;
  margin-bottom: 15px;
  border: 0;
  padding: var(--table-tbody-tr-td-padding);
  text-align: left;
  height: 56px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable tbody tr td {
    font-size: calc(14 * var(--scaleWidth));
    padding-top: calc(10 * var(--scaleWidth)) !important;
    padding-bottom: calc(10 * var(--scaleWidth)) !important;
    padding-left: calc(10 * var(--scaleWidth)) !important;
    padding-right: calc(10 * var(--scaleWidth)) !important;
    margin-bottom: calc(15 * var(--scaleWidth));
    height: calc(56 * var(--scaleWidth));
  }
}
.dataTable tbody tr td:first-child {
  border-top-left-radius: var(--table-tbody-borderRadius);
  border-bottom-left-radius: var(--table-tbody-borderRadius);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable tbody tr td:first-child {
    border-top-left-radius: calc(6 * var(--scaleWidth));
    border-bottom-left-radius: calc(6 * var(--scaleWidth));
  }
}
.dataTable tbody tr td:last-child {
  border-top-right-radius: var(--table-tbody-borderRadius);
  border-bottom-right-radius: var(--table-tbody-borderRadius);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable tbody tr td:last-child {
    border-top-right-radius: calc(6 * var(--scaleWidth));
    border-bottom-right-radius: calc(6 * var(--scaleWidth));
  }
}
.dataTable tbody tr td input[type=checkbox] {
  width: 16px;
  height: 16px;
  display: flex;
  align-self: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable tbody tr td input[type=checkbox] {
    width: calc(16 * var(--scaleWidth));
    height: calc(16 * var(--scaleWidth));
  }
}
.dataTable tbody tr td .number {
  font-weight: 600;
  color: var(--color-primary-mode);
}
.dataTable tbody tr td .dropdown {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.dataTable tbody tr td .dropdown .dropdown-toggle {
  min-width: var(--table-tbody-tr-td-actionDropdown-width);
  border: var(--table-tbody-tr-td-actionDropdown-border);
  background: var(--table-tbody-tr-td-actionDropdown-background-color);
  padding: var(--table-tbody-tr-td-actionDropdown-padding);
  color: var(--table-tbody-tr-td-actionDropdown-color);
  font-size: var(--table-tbody-tr-td-actionDropdown-fontSize);
  font-weight: var(--table-tbody-tr-td-actionDropdown-fontWeight);
  font-weight: var(--table-tbody-tr-td-actionDropdown-width);
  filter: var(--table-tbody-tr-td-actionDropdown-filter);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--table-tbody-tr-td-actionDropdown-borderRadius, 4px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable tbody tr td .dropdown .dropdown-toggle {
    padding-top: calc(6 * var(--scaleWidth));
    padding-bottom: calc(6 * var(--scaleWidth));
    padding-left: calc(12 * var(--scaleWidth));
    padding-right: calc(12 * var(--scaleWidth));
    min-width: calc(16 * var(--scaleWidth));
    border-radius: calc(4 * var(--scaleWidth));
  }
}
.dataTable tbody tr td .dropdown .dropdown-toggle .constl-icon {
  font-size: var(--table-tbody-tr-td-actionDropdown-icon-fontSize, 24px);
  color: var(--table-tbody-tr-td-actionDropdown-icon-color, #000000);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable tbody tr td .dropdown .dropdown-toggle .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.dataTable tbody tr td .dropdown .dropdown-toggle::after {
  display: none;
}
.dataTable tbody tr td .dropdown .dropdown-menu {
  background-color: var(--table-tbody-tr-td-dropdownMenu-background-color);
  padding: var(--table-tbody-tr-td-dropdownMenu-padding);
  border-radius: var(--table-tbody-tr-td-dropdownMenu-borderRadius);
  margin: 0;
  right: 0;
  left: 0 !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable tbody tr td .dropdown .dropdown-menu {
    padding-top: calc(15 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.dataTable tbody tr td .dropdown .dropdown-menu li {
  margin-bottom: 15px;
  padding: 0;
  padding: 0;
  background-color: transparent;
  color: inherit;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable tbody tr td .dropdown .dropdown-menu li {
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
.dataTable tbody tr td .dropdown .dropdown-menu li:last-child {
  margin-bottom: 0;
}
.dataTable tbody tr td .dropdown .dropdown-menu li a {
  display: flex;
  align-items: center;
  font-size: var(--table-tbody-tr-td-dropdownMenu-button-fontSize);
  color: var(--table-tbody-tr-td-dropdownMenu-button-color);
  gap: 8px;
  text-decoration: none;
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable tbody tr td .dropdown .dropdown-menu li a {
    font-size: calc(14 * var(--scaleWidth));
    gap: calc(8 * var(--scaleWidth));
  }
  .dataTable tbody tr td .dropdown .dropdown-menu li a .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.dataTable tbody tr td .dropdown .dropdown-menu li a:has(img) {
  padding-left: 30px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable tbody tr td .dropdown .dropdown-menu li a:has(img) {
    padding-left: calc(30 * var(--scaleWidth));
  }
}
.dataTable tbody tr td .dropdown .dropdown-menu li a img {
  position: absolute;
  left: 0;
  top: -1px;
}
.dataTable tbody tr td .dropdown .dropdown-menu li a:hover {
  color: var(--table-tbody-tr-td-dropdownMenu-button-color);
}
.dataTable tbody tr td .docs_type {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 2px;
  width: max-content;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable tbody tr td .docs_type {
    gap: calc(2 * var(--scaleWidth));
  }
}
.dataTable tbody tr td .docs_type .name {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
.dataTable tbody tr td .docs_type .name img {
  max-width: 24px;
}
.dataTable tbody tr td .docs_type .size {
  font-size: var(--table-tbody-tr-td-docsType-fontSize);
  line-height: normal;
  color: #475467;
  font-weight: 300;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable tbody tr td .docs_type .size {
    font-size: calc(12 * var(--scaleWidth));
  }
}
.dataTable tbody tr td .action-btns a {
  font-size: var(--table-tbody-tr-td-action-button-icon-fontSize, 24px);
  color: var(--table-tbody-tr-td-action-button-icon-color, #000000);
  text-decoration: none;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable tbody tr td .action-btns a {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.dataTable tbody tr td .action-btns a .constl-icon {
  font-size: var(--table-tbody-tr-td-actionDropdown-icon-fontSize, 24px);
  color: var(--table-tbody-tr-td-actionDropdown-icon-color, #000000);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable tbody tr td .action-btns a .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.dataTable .card {
  padding: var(--table-tbody-tr-td-card-padding);
  border-radius: var(--table-tbody-tr-td-card-borderRadius);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable .card {
    padding-top: calc(15 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
    padding-left: calc(20 * var(--scaleWidth));
    padding-right: calc(20 * var(--scaleWidth));
    border-radius: calc(15 * var(--scaleWidth));
  }
}
.dataTable .buttons-group-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  line-height: 1;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable .buttons-group-inline {
    gap: calc(10 * var(--scaleWidth));
  }
}
.dataTable .buttons-group-inline a {
  display: inline-block;
  width: auto;
  vertical-align: top;
  color: var(--table-tbody-tr-td-action-button-icon-color, #000000);
}
.dataTable .buttons-group-inline a .view-btn,
.dataTable .buttons-group-inline a .download-btn {
  border: 0;
  outline: o;
  box-shadow: 0;
  text-decoration: none;
  color: var(--table-tbody-tr-td-action-button-icon-color, #000000);
}
.dataTable .buttons-group-inline a .constl-icon {
  font-size: var(--table-tbody-tr-td-action-button-icon-fontSize, 24px);
  color: var(--table-tbody-tr-td-action-button-icon-color, #000000);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable .buttons-group-inline a .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.dataTable .card .card-header.border-bottom {
  padding: var(--table-tbody-tr-td-card-borderBottom-padding);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable .card .card-header.border-bottom {
    padding-top: calc(15 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
    padding-left: calc(20 * var(--scaleWidth));
    padding-right: calc(20 * var(--scaleWidth));
  }
}
.dataTable .accordion-header .accordion-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dataTable .accordion-header .accordion-button .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}

.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--table-footer-padding);
  flex-wrap: wrap;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-footer {
    padding-top: calc(15 * var(--scaleWidth));
    padding-left: calc(20 * var(--scaleWidth));
    padding-right: calc(20 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .table-footer {
    justify-content: center;
  }
}
.table-footer .page-record {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--table-footer-pageRecord-fontSize);
  color: var(--table-footer-pageRecord-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-footer .page-record {
    font-size: calc(14 * var(--scaleWidth));
    gap: calc(12 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .table-footer .page-record {
    width: 100%;
    justify-content: center;
    padding-bottom: 10px;
    border-bottom: var(--table-footer-pageRecord-border-bottom);
    margin-bottom: 10px;
  }
}
.table-footer .page-record .form-group {
  margin-bottom: 0;
}
.table-footer .page-record .form-group .custom-select {
  border-radius: var(--table-footer-pageRecord-select-borderRadius);
  background-position: calc(100% - 6px);
  padding: var(--table-footer-pageRecord-select-padding);
  padding-right: 30px;
  background-color: var(--table-footer-pageRecord-select-background-color);
  min-height: var(--table-footer-pageRecord-select-height);
  border-color: var(--table-footer-pageRecord-select-border-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-footer .page-record .form-group .custom-select {
    font-size: calc(16 * var(--scaleWidth));
    padding-top: calc(8 * var(--scaleWidth));
    padding-bottom: calc(8 * var(--scaleWidth));
    padding-left: calc(12 * var(--scaleWidth));
    padding-right: calc(30 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
    min-height: calc(42 * var(--scaleWidth));
    height: calc(42 * var(--scaleWidth));
    background-size: calc(20 * var(--scaleWidth));
  }
}
.table-footer .pagination {
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-footer .pagination {
    gap: calc(5 * var(--scaleWidth));
  }
}
.table-footer .pagination .page-link {
  color: var(--table-footer-pagination-pageLink-color);
  border: var(--table-footer-pagination-border);
  background-color: var(--table-footer-pagination-background-color);
  font-size: var(--table-footer-pagination-fontSize);
  display: flex;
  align-items: center;
  border-radius: var(--table-footer-pagination-borderRadius);
}
.table-footer .pagination .page-link.active {
  background-color: var(--color-primary-mode);
  color: var(--color-white);
}
.table-footer .pagination .page-link:hover {
  background-color: var(--color-primary-mode);
  color: var(--color-white);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-footer .pagination .page-link {
    font-size: calc(14 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
    height: calc(38 * var(--scaleWidth));
  }
  .table-footer .pagination .page-link .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}

table.dataTable thead > tr > th.dt-orderable-asc, table.dataTable thead > tr > th.dt-orderable-desc {
  position: relative;
  cursor: pointer;
}
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order {
  position: relative;
  right: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  margin-left: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order {
    width: calc(12 * var(--scaleWidth));
    margin-left: calc(10 * var(--scaleWidth));
  }
}
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:before {
  left: 0;
  opacity: 0.5;
  line-height: 9px;
  font-size: 0.8em;
  content: "▲";
  position: absolute;
  display: block;
  bottom: 50%;
}
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:after, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after {
  left: 0;
  opacity: 0.5;
  line-height: 9px;
  font-size: 0.8em;
  content: "▼";
  position: absolute;
  display: block;
  top: 50%;
}
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before {
  opacity: 1;
}
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after {
  opacity: 1;
}

.priority-status {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 16px;
  text-transform: capitalize;
  font-weight: 500;
  font-size: var(--font-size-small);
  border: 1px solid color-mix(in srgb, white 70%, var(--priority-text-minor));
  background-color: color-mix(in srgb, white 90%, var(--priority-text-minor));
  color: var(--priority-text-minor);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .priority-status {
    font-size: calc(14 * var(--scaleWidth));
    padding-top: calc(4 * var(--scaleWidth));
    padding-bottom: calc(4 * var(--scaleWidth));
    padding-left: calc(12 * var(--scaleWidth));
    padding-right: calc(12 * var(--scaleWidth));
    border-radius: calc(16 * var(--scaleWidth));
  }
}
.priority-status.high, .priority-status.p1 {
  border: 1px solid color-mix(in srgb, white 70%, var(--priority-text-high));
  background-color: color-mix(in srgb, white 90%, var(--priority-text-high));
  color: var(--priority-text-high);
}
.priority-status.medium, .priority-status.p2 {
  border: 1px solid color-mix(in srgb, white 70%, var(--priority-text-medium));
  background-color: color-mix(in srgb, white 90%, var(--priority-text-medium));
  color: var(--priority-text-medium);
}
.priority-status.minor, .priority-status.low, .priority-status.p3 {
  border: 1px solid color-mix(in srgb, white 70%, var(--priority-text-minor));
  background-color: color-mix(in srgb, white 90%, var(--priority-text-minor));
  color: var(--priority-text-minor);
}

.status-p1 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 16px;
  text-transform: capitalize;
  font-weight: 500;
  font-size: var(--font-size-small);
  border: 1px solid color-mix(in srgb, white 70%, var(--priority-text-high));
  background-color: color-mix(in srgb, white 90%, var(--priority-text-high));
  color: var(--priority-text-high);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-p1 {
    font-size: calc(14 * var(--scaleWidth));
    padding-top: calc(4 * var(--scaleWidth));
    padding-bottom: calc(4 * var(--scaleWidth));
    padding-left: calc(12 * var(--scaleWidth));
    padding-right: calc(12 * var(--scaleWidth));
    border-radius: calc(16 * var(--scaleWidth));
  }
}

.status-p2 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 16px;
  text-transform: capitalize;
  font-weight: 500;
  font-size: var(--font-size-small);
  border: 1px solid color-mix(in srgb, white 70%, var(--priority-text-medium));
  background-color: color-mix(in srgb, white 90%, var(--priority-text-medium));
  color: var(--priority-text-medium);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-p2 {
    font-size: calc(14 * var(--scaleWidth));
    padding-top: calc(4 * var(--scaleWidth));
    padding-bottom: calc(4 * var(--scaleWidth));
    padding-left: calc(12 * var(--scaleWidth));
    padding-right: calc(12 * var(--scaleWidth));
    border-radius: calc(16 * var(--scaleWidth));
  }
}

.status-low,
.status-p3 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 16px;
  text-transform: capitalize;
  font-weight: 500;
  font-size: var(--font-size-small);
  border: 1px solid color-mix(in srgb, white 70%, var(--priority-text-minor));
  background-color: color-mix(in srgb, white 90%, var(--priority-text-minor));
  color: var(--priority-text-minor);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-low,
  .status-p3 {
    font-size: calc(14 * var(--scaleWidth));
    padding-top: calc(4 * var(--scaleWidth));
    padding-bottom: calc(4 * var(--scaleWidth));
    padding-left: calc(12 * var(--scaleWidth));
    padding-right: calc(12 * var(--scaleWidth));
    border-radius: calc(16 * var(--scaleWidth));
  }
}

.user-profile-details {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .user-profile-details {
    gap: calc(8 * var(--scaleWidth));
  }
}
.user-profile-details .profile-picture {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--table-tbody-tr-td-userProfile-pictureDimension);
  height: var(--table-tbody-tr-td-userProfile-pictureDimension);
  border: var(--table-tbody-tr-td-userProfile-border);
  box-shadow: var(--table-tbody-tr-td-userProfile-boxShadow);
  overflow: hidden;
  border-radius: var(--table-tbody-tr-td-userProfile-borderRadius);
  background-color: var(--avtar-background-color, #f1f2f5);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .user-profile-details .profile-picture {
    width: calc(35 * var(--scaleWidth));
    height: calc(35 * var(--scaleWidth));
  }
}
.user-profile-details .profile-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.user-profile-details .profile-picture .constl-icon {
  color: var(--avtar-color, #6b6c7e);
  font-size: var(--avtar-fontSize, 35px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .user-profile-details .profile-picture .constl-icon {
    font-size: calc(35 * var(--scaleWidth));
  }
}
.user-profile-details .profile-details {
  display: flex;
  flex-direction: column;
}
.user-profile-details .profile-details .name,
.user-profile-details .profile-details .email {
  font-size: var(--table-tbody-tr-td-userProfile-detailsName-fontSize);
  color: var(--table-tbody-tr-td-color);
  font-weight: 400;
  line-height: 100%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .user-profile-details .profile-details .name,
  .user-profile-details .profile-details .email {
    font-size: calc(14 * var(--scaleWidth));
  }
}

.role-status {
  display: inline-flex;
  vertical-align: top;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-small);
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  padding: 5px;
  color: var(--color-primary-mode);
  border-radius: 50px;
  gap: 5px;
  min-width: 95px;
  text-align: left;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .role-status {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
    padding-top: calc(16 * var(--scaleWidth));
    padding-bottom: calc(5 * var(--scaleWidth));
    padding-left: calc(5 * var(--scaleWidth));
    padding-right: calc(5 * var(--scaleWidth));
    border-radius: calc(50 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
    min-width: calc(95 * var(--scaleWidth));
  }
}

.card .card-body .table-main-body {
  padding: 0;
  display: block;
  margin: 0 -10px;
  width: auto;
  margin-top: -10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .card .card-body .table-main-body {
    margin: 0 calc(-10 * var(--scaleWidth));
    margin-top: calc(-10 * var(--scaleWidth));
  }
}
.card .card-body .table-footer {
  padding: 15px 0 0 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .card .card-body .table-footer {
    padding-top: calc(15 * var(--scaleWidth));
  }
}

.table-container {
  overflow: auto;
}

.status-active, .status-success, .status-completed {
  display: inline-flex;
  vertical-align: top;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-small);
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  padding: 5px;
  border: 1px solid var(--color-success);
  color: var(--color-success);
  border-radius: 50px;
  gap: 5px;
  min-width: 95px;
  background: color-mix(in srgb, var(--color-success), white 85%);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-active, .status-success, .status-completed {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
    padding-top: calc(5 * var(--scaleWidth));
    padding-bottom: calc(5 * var(--scaleWidth));
    padding-left: calc(5 * var(--scaleWidth));
    padding-right: calc(5 * var(--scaleWidth));
    border-radius: calc(50 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
    min-width: calc(95 * var(--scaleWidth));
  }
}
.status-suspended, .status-scheduled, .status-inactive {
  display: inline-flex;
  vertical-align: top;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-small);
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  padding: 5px;
  border: 1px solid var(--color-suspended);
  color: var(--color-suspended);
  border-radius: 50px;
  gap: 5px;
  min-width: 95px;
  background: color-mix(in srgb, var(--color-suspended), white 85%);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-suspended, .status-scheduled, .status-inactive {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
    padding-top: calc(5 * var(--scaleWidth));
    padding-bottom: calc(5 * var(--scaleWidth));
    padding-left: calc(5 * var(--scaleWidth));
    padding-right: calc(5 * var(--scaleWidth));
    border-radius: calc(50 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
    min-width: calc(95 * var(--scaleWidth));
  }
}
.status-terminated, .status-expired, .status-deleted {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-small);
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  padding: 5px;
  border: 1px solid var(--color-terminated);
  color: var(--color-terminated);
  border-radius: 50px;
  gap: 5px;
  min-width: 95px;
  background: color-mix(in srgb, var(--color-terminated), white 85%);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-terminated, .status-expired, .status-deleted {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
    padding-top: calc(5 * var(--scaleWidth));
    padding-bottom: calc(5 * var(--scaleWidth));
    padding-left: calc(5 * var(--scaleWidth));
    padding-right: calc(5 * var(--scaleWidth));
    border-radius: calc(50 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
    min-width: calc(95 * var(--scaleWidth));
  }
}
.status-pendingApproved, .status-pendingapproved, .status-inprogress {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-small);
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  padding: 5px;
  border: 1px solid var(--color-pendingApproved);
  color: var(--color-pendingApproved);
  border-radius: 50px;
  gap: 5px;
  min-width: 95px;
  background: color-mix(in srgb, var(--color-pendingApproved), white 85%);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-pendingApproved, .status-pendingapproved, .status-inprogress {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
    padding-top: calc(5 * var(--scaleWidth));
    padding-bottom: calc(5 * var(--scaleWidth));
    padding-left: calc(5 * var(--scaleWidth));
    padding-right: calc(5 * var(--scaleWidth));
    border-radius: calc(50 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
    min-width: calc(95 * var(--scaleWidth));
  }
}
.status-planned {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-small);
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  padding: 5px;
  border: 1px solid var(--color-planned);
  color: var(--color-planned);
  border-radius: 50px;
  gap: 5px;
  min-width: 95px;
  background: color-mix(in srgb, var(--color-planned), white 85%);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-planned {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
    padding-top: calc(5 * var(--scaleWidth));
    padding-bottom: calc(5 * var(--scaleWidth));
    padding-left: calc(5 * var(--scaleWidth));
    padding-right: calc(5 * var(--scaleWidth));
    border-radius: calc(50 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
    min-width: calc(95 * var(--scaleWidth));
  }
}
.status-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-small);
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  padding: 5px;
  border: 1px solid var(--color-open);
  color: var(--color-open);
  border-radius: 50px;
  gap: 5px;
  min-width: 95px;
  background: color-mix(in srgb, var(--color-open), white 85%);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-open {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
    padding-top: calc(5 * var(--scaleWidth));
    padding-bottom: calc(5 * var(--scaleWidth));
    padding-left: calc(5 * var(--scaleWidth));
    padding-right: calc(5 * var(--scaleWidth));
    border-radius: calc(50 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
    min-width: calc(95 * var(--scaleWidth));
  }
}
.status-closed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-small);
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  padding: 5px;
  border: 1px solid var(--color-closed);
  color: var(--color-closed);
  border-radius: 50px;
  gap: 5px;
  min-width: 95px;
  background: color-mix(in srgb, var(--color-closed), white 85%);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-closed {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
    padding-top: calc(5 * var(--scaleWidth));
    padding-bottom: calc(5 * var(--scaleWidth));
    padding-left: calc(5 * var(--scaleWidth));
    padding-right: calc(5 * var(--scaleWidth));
    border-radius: calc(50 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
    min-width: calc(95 * var(--scaleWidth));
  }
}
.status-inprogress {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-small);
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  padding: 5px;
  border: 1px solid var(--color-inprogress);
  color: var(--color-inprogress);
  border-radius: 50px;
  gap: 5px;
  min-width: 95px;
  background: color-mix(in srgb, var(--color-inprogress), white 85%);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-inprogress {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
    padding-top: calc(5 * var(--scaleWidth));
    padding-bottom: calc(5 * var(--scaleWidth));
    padding-left: calc(5 * var(--scaleWidth));
    padding-right: calc(5 * var(--scaleWidth));
    border-radius: calc(50 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
    min-width: calc(95 * var(--scaleWidth));
  }
}
.status-resolved {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-small);
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  padding: 5px;
  border: 1px solid var(--color-resolved);
  color: var(--color-resolved);
  border-radius: 50px;
  gap: 5px;
  min-width: 95px;
  background: color-mix(in srgb, var(--color-resolved), white 85%);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-resolved {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
    padding-top: calc(5 * var(--scaleWidth));
    padding-bottom: calc(5 * var(--scaleWidth));
    padding-left: calc(5 * var(--scaleWidth));
    padding-right: calc(5 * var(--scaleWidth));
    border-radius: calc(50 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
    min-width: calc(95 * var(--scaleWidth));
  }
}
.status-due {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-small);
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  padding: 5px;
  border: 1px solid var(--table-row-status-due-color, #FC670A);
  color: var(--table-row-status-due-color, #FC670A);
  border-radius: 50px;
  gap: 5px;
  min-width: 95px;
  background: color-mix(in srgb, var(--table-row-status-due-color), white 85%);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-due {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
    padding-top: calc(5 * var(--scaleWidth));
    padding-bottom: calc(5 * var(--scaleWidth));
    padding-left: calc(5 * var(--scaleWidth));
    padding-right: calc(5 * var(--scaleWidth));
    border-radius: calc(50 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
    min-width: calc(95 * var(--scaleWidth));
  }
}
.status-partiallypaid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-small);
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  padding: 5px;
  border: 1px solid var(--table-row-status-partiallypaid-color, #4873B5);
  color: var(--table-row-status-partiallypaid-color, #4873B5);
  border-radius: 50px;
  gap: 5px;
  min-width: 95px;
  background: color-mix(in srgb, var(--table-row-status-partiallypaid-color), white 85%);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-partiallypaid {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
    padding-top: calc(5 * var(--scaleWidth));
    padding-bottom: calc(5 * var(--scaleWidth));
    padding-left: calc(5 * var(--scaleWidth));
    padding-right: calc(5 * var(--scaleWidth));
    border-radius: calc(50 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
    min-width: calc(95 * var(--scaleWidth));
  }
}
.status-paid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-small);
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  padding: 5px;
  border: 1px solid var(--table-row-status-paid-color, #40BF80);
  color: var(--table-row-status-paid-color, #40BF80);
  border-radius: 50px;
  gap: 5px;
  min-width: 95px;
  background: color-mix(in srgb, var(--table-row-status-paid-color), white 85%);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-paid {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
    padding-top: calc(5 * var(--scaleWidth));
    padding-bottom: calc(5 * var(--scaleWidth));
    padding-left: calc(5 * var(--scaleWidth));
    padding-right: calc(5 * var(--scaleWidth));
    border-radius: calc(50 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
    min-width: calc(95 * var(--scaleWidth));
  }
}
.status-overdue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-small);
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  padding: 5px;
  border: 1px solid var(--table-row-status-overdue-color, #FC670A);
  color: var(--table-row-status-overdue-color, #FC670A);
  border-radius: 50px;
  gap: 5px;
  min-width: 95px;
  background: color-mix(in srgb, var(--table-row-status-overdue-color), white 85%);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-overdue {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
    padding-top: calc(5 * var(--scaleWidth));
    padding-bottom: calc(5 * var(--scaleWidth));
    padding-left: calc(5 * var(--scaleWidth));
    padding-right: calc(5 * var(--scaleWidth));
    border-radius: calc(50 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
    min-width: calc(95 * var(--scaleWidth));
  }
}
.status-overdueandpartiallypaid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-small);
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  padding: 5px;
  border: 1px solid var(--table-row-status-overdueandpartiallypaid-color, #4873B5);
  color: var(--table-row-status-overdueandpartiallypaid-color, #4873B5);
  border-radius: 50px;
  gap: 5px;
  min-width: 95px;
  background: color-mix(in srgb, var(--table-row-status-overdueandpartiallypaid-color), white 85%);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-overdueandpartiallypaid {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
    padding-top: calc(5 * var(--scaleWidth));
    padding-bottom: calc(5 * var(--scaleWidth));
    padding-left: calc(5 * var(--scaleWidth));
    padding-right: calc(5 * var(--scaleWidth));
    border-radius: calc(50 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
    min-width: calc(95 * var(--scaleWidth));
  }
}
.status-pending {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-small);
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  padding: 5px;
  border: 1px solid var(--table-row-status-pending-color, #768392);
  color: var(--table-row-status-pending-color, #768392);
  border-radius: 50px;
  gap: 5px;
  min-width: 95px;
  background: color-mix(in srgb, var(--table-row-status-pending-color), white 85%);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-pending {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
    padding-top: calc(5 * var(--scaleWidth));
    padding-bottom: calc(5 * var(--scaleWidth));
    padding-left: calc(5 * var(--scaleWidth));
    padding-right: calc(5 * var(--scaleWidth));
    border-radius: calc(50 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
    min-width: calc(95 * var(--scaleWidth));
  }
}
.status-cancelled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-small);
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  padding: 5px;
  border: 1px solid #e74c3c;
  color: #e74c3c;
  border-radius: 50px;
  gap: 5px;
  min-width: 95px;
  background: color-mix(in srgb, #e74c3c, white 85%);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-cancelled {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
    padding-top: calc(5 * var(--scaleWidth));
    padding-bottom: calc(5 * var(--scaleWidth));
    padding-left: calc(5 * var(--scaleWidth));
    padding-right: calc(5 * var(--scaleWidth));
    border-radius: calc(50 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
    min-width: calc(95 * var(--scaleWidth));
  }
}

.accordion-content .table-card,
.accordion-content .card {
  padding: 0;
  background: inherit;
  box-shadow: none;
}
.accordion-content .table-card .nav-tabs,
.accordion-content .card .nav-tabs {
  margin-bottom: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .accordion-content .table-card .nav-tabs,
  .accordion-content .card .nav-tabs {
    margin-bottom: calc(5 * var(--scaleWidth));
  }
}
.accordion-content .table-card .table-header,
.accordion-content .card .table-header {
  padding: 0 0 10px 0 !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .accordion-content .table-card .table-header,
  .accordion-content .card .table-header {
    padding-bottom: calc(10 * var(--scaleWidth)) !important;
  }
}
.accordion-content .table-card .table-header .leftside .table-name,
.accordion-content .card .table-header .leftside .table-name {
  font-size: 18px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .accordion-content .table-card .table-header .leftside .table-name,
  .accordion-content .card .table-header .leftside .table-name {
    font-size: calc(18 * var(--scaleWidth));
  }
}
.accordion-content .table-card .table-main-body,
.accordion-content .card .table-main-body {
  padding: 10px 0 0 0 !important;
  margin: 0 -10px !important;
  display: block;
  width: auto;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .accordion-content .table-card .table-main-body,
  .accordion-content .card .table-main-body {
    padding: calc(10 * var(--scaleWidth)) 0 0 0 !important;
    margin: 0 calc(-10 * var(--scaleWidth)) !important;
  }
}
.accordion-content .table-card .table-main-body .table-container,
.accordion-content .card .table-main-body .table-container {
  padding: 0 15px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .accordion-content .table-card .table-main-body .table-container,
  .accordion-content .card .table-main-body .table-container {
    padding: 0 calc(15 * var(--scaleWidth)) !important;
  }
}
.accordion-content .table-card .table-footer,
.accordion-content .card .table-footer {
  padding-bottom: 15px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .accordion-content .table-card .table-footer,
  .accordion-content .card .table-footer {
    padding-bottom: calc(15 * var(--scaleWidth)) !important;
  }
}

@media (max-width: 768px) {
  .table-card .table-header .right-controls {
    width: 100%;
    gap: 10px;
  }
}
@media (max-width: 768px) {
  .table-card .table-header .right-controls .searchbar {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .table-card .table-header .right-controls .searchbar input[type=text] {
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  .table-card .table-header .right-controls .form-group .custom-select {
    max-width: 100%;
  }
}

.user-management.customer-dashboard .row .mb-25 {
  margin-bottom: 0 !important;
}

.table-tabs {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
.table-tabs .nav-tabs .nav-item .nav-link {
  padding: var(--table-accordion-navLink-padding, 12px 20px);
  font-size: var(--table-accordion-navLink-fontSize, 16px);
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0;
  border: 0;
  color: var(--table-accordion-navLink-color, #545F71);
  text-transform: capitalize;
  background-color: transparent;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-tabs .nav-tabs .nav-item .nav-link {
    font-size: calc(16 * var(--scaleWidth));
    line-height: calc(22 * var(--scaleWidth));
    padding-top: calc(12 * var(--scaleWidth));
    padding-bottom: calc(12 * var(--scaleWidth));
    padding-left: calc(20 * var(--scaleWidth));
    padding-right: calc(20 * var(--scaleWidth));
  }
}
.table-tabs .nav-tabs .nav-item .nav-link.active {
  color: var(--color-primary-mode);
  font-weight: 600;
  position: relative;
}
.table-tabs .nav-tabs .nav-item .nav-link.active::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  content: "";
  display: inline-block;
  vertical-align: top;
  bottom: 0;
  background-color: var(--table-accordion-navLink-border-color, #372194);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-tabs .nav-tabs .nav-item .nav-link.active::after {
    height: calc(2 * var(--scaleWidth));
  }
}
.table-tabs .tab-content .container {
  max-width: 100%;
  width: 100%;
}
.table-tabs .tab-content .tab-pane {
  padding: 4px 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-tabs .tab-content .tab-pane {
    padding-top: calc(4 * var(--scaleWidth));
    padding-bottom: calc(4 * var(--scaleWidth));
  }
}
.table-tabs .tab-content .tab-pane .table-card {
  background-color: transparent;
  padding-top: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-tabs .tab-content .tab-pane .table-card {
    padding-top: calc(5 * var(--scaleWidth));
  }
}
.table-tabs .tab-content .tab-pane .table-card .table-header {
  padding: 11px 0 0 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-tabs .tab-content .tab-pane .table-card .table-header {
    padding-top: calc(11 * var(--scaleWidth));
  }
}
.table-tabs .tab-content .tab-pane .table-card .table-main-body {
  padding: 0 0 20px 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-tabs .tab-content .tab-pane .table-card .table-main-body {
    padding-bottom: calc(20 * var(--scaleWidth));
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}
.table-tabs .tab-content .tab-pane .dataTable {
  margin-top: 0;
}
.table-tabs .tab-content .team-card {
  padding: 15px 20px;
  border-radius: 15px;
  margin-top: 11px;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .table-tabs .tab-content .team-card {
    padding-top: calc(15 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
    padding-left: calc(20 * var(--scaleWidth));
    padding-right: calc(20 * var(--scaleWidth));
    border-radius: calc(15 * var(--scaleWidth));
    margin-top: calc(11 * var(--scaleWidth));
  }
}

.team-block {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  text-align: left;
}
.team-block .designation {
  display: inline-block;
  width: auto;
  vertical-align: top;
  padding-left: 30px;
  position: relative;
  font-size: var(--font-size-large);
  font-weight: 600;
  line-height: 20px;
  text-align: left;
  color: var(--body-text-color);
  text-transform: capitalize;
  margin-bottom: 25px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .team-block .designation {
    font-size: calc(18 * var(--scaleWidth));
    padding-left: calc(16 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
    margin-bottom: calc(25 * var(--scaleWidth));
  }
}
.team-block .designation::after {
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("../../krypton-theme-css/assets/icons/designation-icon.png");
  background-repeat: no-repeat;
  content: "";
  width: 22px;
  height: 22px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .team-block .designation::after {
    width: calc(22 * var(--scaleWidth));
    height: calc(22 * var(--scaleWidth));
    background-size: calc(22 * var(--scaleWidth));
  }
}
.team-block .team-block-details {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .team-block .team-block-details {
    gap: calc(20 * var(--scaleWidth));
  }
}
.team-block .team-block-details .imgbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 100px;
  border: 1px solid var(--gray, var(--color-11));
  overflow: hidden;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .team-block .team-block-details .imgbox {
    width: calc(80 * var(--scaleWidth));
    height: calc(80 * var(--scaleWidth));
    border-radius: calc(100 * var(--scaleWidth));
  }
}
.team-block .team-block-details .imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-block .team-block-details .team-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .team-block .team-block-details .team-details {
    gap: calc(10 * var(--scaleWidth));
  }
}
.team-block .team-block-details .team-details .name {
  font-size: var(--font-size-normal);
  font-weight: 600;
  line-height: 19.36px;
  color: var(--body-text-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .team-block .team-block-details .team-details .name {
    font-size: calc(16 * var(--scaleWidth));
    line-height: calc(19.36 * var(--scaleWidth));
  }
}
.team-block .team-block-details .team-details .designation-dtls {
  font-size: var(--font-size-normal);
  font-weight: 400;
  line-height: 19.36px;
  color: var(--body-text-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .team-block .team-block-details .team-details .designation-dtls {
    font-size: calc(16 * var(--scaleWidth));
    line-height: calc(19.36 * var(--scaleWidth));
  }
}
.team-block .team-block-details .team-details .email {
  font-size: var(--font-size-normal);
  font-weight: 400;
  line-height: 19.36px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .team-block .team-block-details .team-details .email {
    font-size: calc(16 * var(--scaleWidth));
    line-height: calc(19.36 * var(--scaleWidth));
  }
}
.team-block .team-block-details .team-details .email a {
  color: var(--color-primary-mode);
  text-decoration: none;
}
.team-block .team-block-details .team-details .phone {
  font-size: var(--font-size-normal);
  font-weight: 400;
  line-height: 19.36px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .team-block .team-block-details .team-details .phone {
    font-size: calc(16 * var(--scaleWidth));
    line-height: calc(19.36 * var(--scaleWidth));
  }
}
.team-block .team-block-details .team-details .phone a {
  color: var(--body-text-color);
  text-decoration: none;
}

.theme-dark .header .container .leftbar .logo a {
  background-image: url("../../krypton-theme-css/assets/logo/white_Constl_logo.svg");
  background-position: center;
  background-size: cover;
}
.theme-dark .header .container .leftbar .logo a img {
  filter: invert(1) grayscale(100%) brightness(2);
  visibility: hidden;
  opacity: 0;
}

.header {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  padding: var(--header-padding);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1085;
}
.header::after {
  position: absolute;
  content: "";
  width: 100%;
  display: inline-block;
  vertical-align: top;
  top: 0;
  left: 0;
  height: calc(100% - 10px);
  background: var(--body-background-color-mode);
  z-index: -1;
}
@media (max-width: 1024px) {
  .header {
    padding: 0;
  }
}
.header .container {
  padding: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--header-container-background);
  border: var(--header-container-border);
  border-radius: var(--header-container-radius);
  padding: var(--header-container-padding);
  box-shadow: var(--header-container-shadow);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .header .container {
    padding-top: calc(15 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
    padding-left: calc(30 * var(--scaleWidth));
    padding-right: calc(30 * var(--scaleWidth));
    border-radius: calc(0 * var(--scaleWidth));
  }
}
@media (max-width: 1024px) {
  .header .container {
    border-radius: 0;
    padding: 10px 15px;
    border: 0;
  }
}
.header .container .leftbar {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .header .container .leftbar {
    gap: calc(20 * var(--scaleWidth));
  }
}
.header .container .leftbar .logo {
  display: inline-block;
  width: auto;
  vertical-align: top;
}
.header .container .leftbar .logo a {
  display: inline-block;
  width: auto;
  vertical-align: top;
}
.header .container .leftbar .logo a img {
  max-width: 130px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .header .container .leftbar .logo a img {
    max-width: calc(130 * var(--scaleWidth));
  }
}
.header .container .leftbar .page-title {
  display: inline-block;
  width: auto;
  vertical-align: top;
  padding-left: 30px;
  margin-left: 30px;
  font-size: var(--header-page-title-fontSize);
  font-weight: 500;
  color: var(--header-page-title-color);
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .header .container .leftbar .page-title {
    font-size: calc(26 * var(--scaleWidth));
    padding-left: calc(30 * var(--scaleWidth));
    margin-left: calc(30 * var(--scaleWidth));
  }
}
.header .container .leftbar .page-title::before {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  width: 1px;
  height: 30px;
  background-color: var(--color-05);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .header .container .leftbar .page-title::before {
    height: calc(30 * var(--scaleWidth));
  }
}
@media (max-width: 1024px) {
  .header .container .leftbar .page-title {
    display: none;
  }
}
.header .container .rightbar {
  display: inline-block;
  width: auto;
  vertical-align: top;
}
.header .container .rightbar ul {
  display: flex;
  align-items: center;
  padding: 0;
  gap: 10px;
  margin: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .header .container .rightbar ul {
    gap: calc(10 * var(--scaleWidth));
  }
}
.header .container .rightbar ul li {
  list-style: none;
  position: relative;
}
@media (max-width: 479px) {
  .header .container .rightbar ul li {
    position: static;
  }
}
.header .container .rightbar ul .ai-btn {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
@media (max-width: 1024px) {
  .header .container .rightbar ul .ai-btn {
    display: none;
  }
}
.header .container .rightbar ul .header-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: var(--header-control-border);
  border-radius: 45px;
  background: var(--header-control-background-color);
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .header .container .rightbar ul .header-nav-btn {
    width: calc(50 * var(--scaleWidth));
    height: calc(50 * var(--scaleWidth));
    border-radius: calc(45 * var(--scaleWidth));
  }
}
.header .container .rightbar ul .header-nav-btn.mode-switch-header {
  margin: 0;
  cursor: pointer;
}
.header .container .rightbar ul .header-nav-btn.mode-switch-header:after {
  content: "dark_mode";
  font-family: "Material Symbols Outlined";
  font-size: var(--header-control-mode-switch-icon-fontSize, 24px);
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  color: var(--header-control-mode-switch-icon-color, #464646);
  vertical-align: middle;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .header .container .rightbar ul .header-nav-btn.mode-switch-header:after {
    font-size: calc(24 * var(--scaleWidth));
  }
}
@media (max-width: 1024px) {
  .header .container .rightbar ul .header-nav-btn {
    width: 40px;
    height: 40px;
  }
}
.header .container .rightbar ul .header-nav-btn.profile-btn {
  width: 250px;
  height: 50px;
  text-decoration: none;
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .header .container .rightbar ul .header-nav-btn.profile-btn {
    width: calc(250 * var(--scaleWidth));
    height: calc(50 * var(--scaleWidth));
  }
}
@media (max-width: 1024px) {
  .header .container .rightbar ul .header-nav-btn.profile-btn {
    width: 50px;
  }
}
.header .container .rightbar ul .header-nav-btn.profile-btn::after {
  position: absolute;
  right: 12px;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  background-image: url("../../krypton-theme-css/assets/icons/profile-arrow.png");
  background-repeat: no-repeat;
  width: 12px;
  height: 8px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .header .container .rightbar ul .header-nav-btn.profile-btn::after {
    width: calc(12 * var(--scaleWidth));
    right: calc(12 * var(--scaleWidth));
    height: calc(8 * var(--scaleWidth));
    background-size: calc(12 * var(--scaleWidth));
  }
}
@media (max-width: 1024px) {
  .header .container .rightbar ul .header-nav-btn.profile-btn::after {
    display: none;
  }
}
.header .container .rightbar ul .header-nav-btn.profile-btn.show::after {
  transform: rotate(180deg);
}
.header .container .rightbar ul .header-nav-btn.profile-btn .profile-btn-block {
  display: flex;
  align-items: center;
  padding-right: 30px;
  padding-left: 4px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .header .container .rightbar ul .header-nav-btn.profile-btn .profile-btn-block {
    padding-right: calc(30 * var(--scaleWidth));
    padding-left: calc(4 * var(--scaleWidth));
  }
}
@media (max-width: 1024px) {
  .header .container .rightbar ul .header-nav-btn.profile-btn .profile-btn-block {
    width: auto;
    padding: 0;
  }
}
.header .container .rightbar ul .header-nav-btn.profile-btn .profile-btn-block .profile-pic {
  display: inline-block;
  vertical-align: top;
  width: 40px;
  height: 40px;
  min-width: 40px;
  position: relative;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1490196078);
  border: 1px solid var(--color-07);
  border-radius: 30px;
  overflow: hidden;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .header .container .rightbar ul .header-nav-btn.profile-btn .profile-btn-block .profile-pic {
    width: calc(40 * var(--scaleWidth));
    height: calc(40 * var(--scaleWidth));
    min-width: calc(40 * var(--scaleWidth));
    border-radius: calc(30 * var(--scaleWidth));
  }
}
.header .container .rightbar ul .header-nav-btn.profile-btn .profile-btn-block .profile-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}
.header .container .rightbar ul .header-nav-btn.profile-btn .profile-btn-block .profile-btn-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 12px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .header .container .rightbar ul .header-nav-btn.profile-btn .profile-btn-block .profile-btn-details {
    gap: calc(2 * var(--scaleWidth));
    margin-left: calc(12 * var(--scaleWidth));
  }
}
@media (max-width: 1024px) {
  .header .container .rightbar ul .header-nav-btn.profile-btn .profile-btn-block .profile-btn-details {
    display: none;
  }
}
.header .container .rightbar ul .header-nav-btn.profile-btn .profile-btn-block .profile-btn-details .profile-user-name {
  display: inline-block;
  vertical-align: top;
  font-size: var(--header-control-profile-userName-fontSize);
  color: var(--header-control-profile-userName-color);
  font-weight: 500;
  line-height: 19.36px;
  text-overflow: ellipsis;
  width: 17ch;
  overflow: hidden;
  white-space: nowrap;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .header .container .rightbar ul .header-nav-btn.profile-btn .profile-btn-block .profile-btn-details .profile-user-name {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.header .container .rightbar ul .header-nav-btn.profile-btn .profile-btn-block .profile-btn-details .profile-user-designation {
  font-size: var(--header-control-profile-designation-fontSize);
  font-weight: 300;
  color: var(--header-control-profile-designation-color);
  display: inline-block;
  width: auto;
  vertical-align: top;
  line-height: 16.94px;
  text-overflow: ellipsis;
  width: 110px;
  overflow: hidden;
  white-space: nowrap;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .header .container .rightbar ul .header-nav-btn.profile-btn .profile-btn-block .profile-btn-details .profile-user-designation {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(16.94 * var(--scaleWidth));
    width: calc(110 * var(--scaleWidth));
  }
}
.header .container .rightbar ul .header-nav-btn.notification-btn {
  position: relative;
  text-decoration: none;
}
.header .container .rightbar ul .header-nav-btn.notification-btn::after {
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: var(--header-control-notification-counter-fontSize);
  line-height: 12px;
  background-color: var(--color-primary-mode);
  color: var(--header-control-notification-counter-color);
  font-weight: 600;
  content: attr(data-count);
  padding: 5px;
  border-radius: 100px;
  min-width: 10px;
  min-height: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .header .container .rightbar ul .header-nav-btn.notification-btn::after {
    padding: calc(5 * var(--scaleWidth));
    min-width: calc(10 * var(--scaleWidth));
    min-height: calc(10 * var(--scaleWidth));
    font-size: calc(12 * var(--scaleWidth));
    line-height: calc(12 * var(--scaleWidth));
  }
}
.header .container .rightbar ul .header-nav-btn.notification-btn.count-zero::after {
  display: none;
}
.header .container .rightbar ul .header-nav-btn.notification-btn .constl-icon {
  font-size: var(--header-control-notification-counter-icon-fontSize, 24px);
  color: var(--header-control-notification-counter-icon-color, #464646);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .header .container .rightbar ul .header-nav-btn.notification-btn .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.header .container .rightbar ul #mode-switch-header:checked + .mode-switch-header:after {
  content: "light_mode";
}
.header .container .rightbar .portlet {
  margin-bottom: 0 !important;
}
@media (max-width: 479px) {
  .header .container .rightbar .portlet {
    position: static;
  }
}

.profile-dropdown {
  display: none;
  vertical-align: top;
  width: 350px;
  overflow: hidden;
  border-radius: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  background-color: var(--header-userProfile-background-color);
  z-index: 11111;
  box-shadow: var(--header-userProfile-shadow);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown {
    width: calc(350 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
  }
}
@media (max-width: 479px) {
  .profile-dropdown {
    width: calc(100% - 24px);
    left: 0;
    margin: auto;
  }
}
@media screen and (max-height: 375px) {
  .profile-dropdown {
    height: 250px;
    overflow: auto;
  }
}
.profile-dropdown .profile-header {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
.profile-dropdown .profile-header .top-header {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: var(--header-userProfile-header-padding);
  background-color: var(--header-userProfile-header-background-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-header .top-header {
    gap: calc(15 * var(--scaleWidth));
    padding-top: calc(15 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
    padding-left: calc(20 * var(--scaleWidth));
    padding-right: calc(20 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-header .top-header .title {
  color: var(--header-userProfile-header-title-color);
  font-size: var(--header-userProfile-header-title-fontSize);
  line-height: 121%;
  font-weight: 500;
  margin: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-header .top-header .title {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-header .top-header .user-details {
  display: flex;
  align-items: center;
  width: 100%;
  padding-left: 70px;
  position: relative;
  min-height: 60px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-header .top-header .user-details {
    padding-left: calc(70 * var(--scaleWidth));
    min-height: calc(60 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-header .top-header .user-details .picture {
  width: 60px;
  height: 60px;
  display: inline-block;
  vertical-align: top;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 100px;
  overflow: hidden;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-header .top-header .user-details .picture {
    width: calc(60 * var(--scaleWidth));
    height: calc(60 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-header .top-header .user-details .picture img {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.profile-dropdown .profile-header .top-header .user-details .details {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.profile-dropdown .profile-header .top-header .user-details .details .user-name {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--header-userProfile-userDetails-userName-fontSize);
  font-weight: 600;
  line-height: 16.94px;
  color: var(--header-userProfile-userDetails-userName-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-header .top-header .user-details .details .user-name {
    font-size: calc(16 * var(--scaleWidth));
    line-height: calc(16.94 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-header .top-header .user-details .details .user-email {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  padding-left: 17px;
  position: relative;
  font-size: var(--header-userProfile-userDetails-userEmail-fontSize);
  line-height: 14.53px;
  color: var(--header-userProfile-userDetails-userEmail-color);
  word-break: break-word;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-header .top-header .user-details .details .user-email {
    font-size: calc(12 * var(--scaleWidth));
    line-height: calc(14.53 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-header .top-header .user-details .details .user-email::before {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "mail";
  font-family: "Material Symbols Outlined";
  font-size: var(--header-userProfile-userDetails-userEmail-icon-fontSize, 14px);
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  color: var(--header-userProfile-userDetails-userEmail-icon-color, #ffffff);
  vertical-align: middle;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-header .top-header .user-details .details .user-email::before {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-header .top-header-logo {
  display: flex;
  justify-content: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-10);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-header .top-header-logo {
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-header .top-header-logo img {
  max-width: 130px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-header .top-header-logo img {
    max-width: calc(130 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-header .company-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--header-userProfile-userDetails-companyLogo-padding);
  border-bottom: var(--header-userProfile-userDetails-companyLogo-border);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-header .company-logo {
    padding-top: calc(17 * var(--scaleWidth));
    padding-bottom: calc(17 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-header .company-logo img {
  max-width: 207px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-header .company-logo img {
    max-width: calc(207 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-header .switch-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 15px;
  border-bottom: 1px solid #E4E4E4;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-header .switch-account {
    padding-top: calc(17 * var(--scaleWidth));
    padding-bottom: calc(17 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-header .switch-account .form-group {
  width: 100%;
}
.profile-dropdown .profile-header .switch-account .form-group label {
  font-size: var(--font-size-small);
  margin-bottom: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-header .switch-account .form-group label {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-header .switch-account .form-group .custom-select-wrap {
  display: inline-block;
  width: 100%;
  position: relative;
}
.profile-dropdown .profile-header .switch-account .form-group .custom-select-wrap::before {
  font-family: "Material Symbols Outlined";
  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: "liga";
  -webkit-font-smoothing: antialiased;
  position: absolute;
  top: 10px;
  color: var(--form-control-color);
  content: "\e9ed";
  left: 8px;
  z-index: 9;
  pointer-events: none;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-header .switch-account .form-group .custom-select-wrap::before {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-header .switch-account .form-group .custom-select-wrap::after {
  font-family: "Material Symbols Outlined";
  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: "liga";
  -webkit-font-smoothing: antialiased;
  position: absolute;
  top: 10px;
  color: var(--form-control-color);
  content: "\e313";
  right: 5px;
  z-index: 9;
  pointer-events: none;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-header .switch-account .form-group .custom-select-wrap::after {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-header .switch-account .form-group .custom-select {
  width: 100%;
  padding-left: 10px;
  background-repeat: no-repeat;
  background-position: left center;
  border-radius: 8px;
  padding-right: 35px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-indent: 30px;
  position: relative;
  background-image: none !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-header .switch-account .form-group .custom-select {
    padding-left: calc(10 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
    padding-right: calc(35 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-header .notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--header-userProfile-userDetails-notification-padding);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-header .notification-header {
    padding-top: calc(17 * var(--scaleWidth));
    padding-bottom: calc(17 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-header .notification-header .leftbar {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-header .notification-header .leftbar {
    gap: calc(10 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-header .notification-header .leftbar .title {
  font-size: var(--header-userProfile-userDetails-notification-fontSize);
  line-height: 140%;
  color: var(--header-userProfile-userDetails-notification-color);
  font-weight: 400;
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-header .notification-header .leftbar .title {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-header .notification-header .switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 18px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-header .notification-header .switch {
    width: calc(38 * var(--scaleWidth));
    height: calc(18 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-header .notification-header .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.profile-dropdown .profile-header .notification-header .switch input:checked + .slider {
  background-color: var(--color-primary-mode);
}
.profile-dropdown .profile-header .notification-header .switch input:checked + .slider::before {
  transform: translateX(20px);
}
.profile-dropdown .profile-header .notification-header .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--slider-background-color);
  transition: 0.4s;
  border-radius: 34px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-header .notification-header .switch .slider {
    border-radius: calc(34 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-header .notification-header .switch .slider::before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 3px;
  bottom: 3px;
  background-color: var(--color-white-background);
  transition: 0.4s;
  border-radius: 50%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-header .notification-header .switch .slider::before {
    width: calc(12 * var(--scaleWidth));
    height: calc(12 * var(--scaleWidth));
    left: calc(3 * var(--scaleWidth));
    bottom: calc(3 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-body {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  padding: var(--header-userProfile-body-padding);
  border-top: var(--header-userProfile-body-border-top);
  border-bottom: var(--header-userProfile-body-border-bottom);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-body {
    padding-top: calc(20 * var(--scaleWidth));
    padding-bottom: calc(20 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-body ul {
  flex-direction: column;
  display: flex;
}
.profile-dropdown .profile-body ul li {
  width: 100%;
}
.profile-dropdown .profile-body ul li a {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  font-size: var(--header-userProfile-userDetails-list-fontSize);
  line-height: 140%;
  color: var(--header-userProfile-userDetails-list-color);
  font-weight: var(--header-userProfile-userDetails-list-fontWeight);
  text-transform: capitalize;
  text-decoration: none;
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-body ul li a {
    font-size: calc(16 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-body ul li a::after {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "\e315";
  background-repeat: no-repeat;
  font-family: "Material Symbols Outlined";
  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: "liga";
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-body ul li a::after {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-body ul li a:hover {
  color: var(--header-userProfile-header-background-color);
}
.profile-dropdown .profile-footer {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  padding: var(--header-userProfile-footer-padding);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-footer {
    padding-top: calc(20 * var(--scaleWidth));
    padding-bottom: calc(20 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-footer .button-icon-text {
  width: 100%;
  height: var(--header-userProfile-footer-button-height);
  font-size: var(--header-userProfile-footer-button-fontSize);
  padding: var(--header-userProfile-footer-button-padding);
  border-radius: var(--header-userProfile-footer-button-borderRadius);
  background-color: var(--header-userProfile-footer-button-background-color);
  text-decoration: none;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-footer .button-icon-text {
    height: calc(44 * var(--scaleWidth));
    font-size: calc(16 * var(--scaleWidth));
    padding-top: calc(8 * var(--scaleWidth));
    padding-bottom: calc(8 * var(--scaleWidth));
    padding-left: calc(24 * var(--scaleWidth));
    padding-right: calc(24 * var(--scaleWidth));
    border-radius: calc(4 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-footer .button-icon-text:hover {
  background-color: color-mix(in srgb, var(--header-notifications-footer-button-background-color), black 10%);
  color: #fff !important;
}
.profile-dropdown .profile-footer .button-icon-text.active, .profile-dropdown .profile-footer .button-icon-text:active {
  background-color: color-mix(in srgb, var(--header-notifications-footer-button-background-color), black 15%);
  color: #fff !important;
}
.profile-dropdown .profile-footer .button-icon-text.disabled, .profile-dropdown .profile-footer .button-icon-text:disabled {
  background-color: color-mix(in srgb, var(--header-notifications-footer-button-background-color), white 40%);
  cursor: not-allowed;
  color: #fff !important;
}
.profile-dropdown .profile-list-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--header-userProfile-userDetails-listIcon-dimension);
  height: var(--header-userProfile-userDetails-listIcon-dimension);
  background-color: var(--header-userProfile-header-background-color);
  overflow: hidden;
  border-radius: var(--header-userProfile-userDetails-listIcon-borderRadius);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-list-icon {
    width: calc(30 * var(--scaleWidth));
    height: calc(30 * var(--scaleWidth));
  }
}
.profile-dropdown .profile-list-icon .material-symbols-outlined {
  font-size: var(--header-userProfile-userDetails-listIcon-icon-fontSize, 20px);
  color: var(--header-userProfile-userDetails-listIcon-icon-color, #ffffff);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-dropdown .profile-list-icon .material-symbols-outlined {
    font-size: calc(20 * var(--scaleWidth));
  }
}

.notification_dropdown {
  display: none;
  vertical-align: top;
  width: 380px;
  overflow: hidden;
  border-radius: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  background-color: var(--header-notifications-background-color);
  z-index: 11111;
  box-shadow: var(--header-notifications-background-shadow);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .notification_dropdown {
    width: calc(380 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
  }
}
@media (max-width: 479px) {
  .notification_dropdown {
    width: calc(100% - 24px);
    left: 0;
    margin: auto;
  }
}
@media screen and (max-height: 375px) {
  .notification_dropdown {
    height: 250px;
    overflow: auto;
  }
}
.notification_dropdown .notification-header {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
.notification_dropdown .notification-header .top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: var(--header-notifications-header-padding);
  background-color: var(--header-notifications-header-background-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .notification_dropdown .notification-header .top-header {
    padding-top: calc(17 * var(--scaleWidth));
    padding-bottom: calc(17 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
    gap: calc(15 * var(--scaleWidth));
  }
}
.notification_dropdown .notification-header .top-header .title {
  color: var(--header-notifications-header-title-color);
  font-size: var(--header-notifications-header-title-fontSize);
  line-height: 121%;
  font-weight: 500;
  margin: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .notification_dropdown .notification-header .top-header .title {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.notification_dropdown .notification-header .top-header button {
  background-color: var(--header-notifications-header-closeBtn-background-color);
  color: var(--header-notifications-header-closeBtn-color);
  font-size: var(--header-notifications-header-closeBtn-fontSize);
  padding: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .notification_dropdown .notification-header .top-header button {
    font-size: calc(20 * var(--scaleWidth));
  }
}
.notification_dropdown .notification-header .top-header button img {
  filter: invert(1);
}
.notification_dropdown .notification-header .notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--header-notifications-onoffBox-padding);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .notification_dropdown .notification-header .notification-header {
    padding-top: calc(17 * var(--scaleWidth));
    padding-bottom: calc(17 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
  }
}
.notification_dropdown .notification-header .notification-header .leftbar {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .notification_dropdown .notification-header .notification-header .leftbar {
    gap: calc(10 * var(--scaleWidth));
  }
}
.notification_dropdown .notification-header .notification-header .leftbar .title {
  font-size: var(--header-notifications-onoffBox-title-fontSize);
  line-height: 140%;
  color: var(--color-09);
  font-weight: 400;
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .notification_dropdown .notification-header .notification-header .leftbar .title {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.notification_dropdown .notification-header .notification-header .switch {
  margin: 0;
}
.notification_dropdown .notification-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.notification_dropdown .notification-box .notification-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .notification_dropdown .notification-box .notification-details {
    gap: calc(5 * var(--scaleWidth));
  }
}
.notification_dropdown .notification-box .notification-details .title {
  font-size: var(--header-notifications-details-card-title-fontSize);
  line-height: 120%;
  color: var(--header-notifications-details-card-title-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .notification_dropdown .notification-box .notification-details .title {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.notification_dropdown .notification-box .notification-details .posted_date {
  font-size: var(--header-notifications-details-card-postedDate-fontSize);
  line-height: 120%;
  color: var(--header-notifications-details-card-postedDate-color);
  font-weight: 600;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .notification_dropdown .notification-box .notification-details .posted_date {
    font-size: calc(12 * var(--scaleWidth));
  }
}
.notification_dropdown .notification-box .actions {
  display: flex;
  align-items: center;
  gap: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .notification_dropdown .notification-box .actions {
    gap: calc(5 * var(--scaleWidth));
  }
}
.notification_dropdown .notification-box .actions button {
  cursor: pointer;
  background-color: transparent !important;
  text-decoration: none;
  outline: none;
  box-shadow: none;
}
.notification_dropdown .notification-box .actions button .constl-icon {
  font-size: var(--header-notifications-details-card-readUnread-icon-fontSize, 24px);
  color: var(--header-notifications-details-card-readUnread-icon-color, #475467);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .notification_dropdown .notification-box .actions button .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.notification_dropdown .notification-body {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  padding: 20px 15px;
  border-top: var(--header-notifications-body-border-top);
  border-bottom: var(--header-notifications-body-border-bottom);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .notification_dropdown .notification-body {
    padding-top: calc(20 * var(--scaleWidth));
    padding-bottom: calc(20 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
  }
}
.notification_dropdown .notification-body ul {
  flex-direction: column;
  display: flex;
}
.notification_dropdown .notification-body ul li {
  width: 100%;
  background: var(--header-notifications-details-card-readBackground-color);
}
.notification_dropdown .notification-body ul li.unread {
  background: var(--header-notifications-details-card-unreadBackground-color);
}
.notification_dropdown .notification-body ul li a {
  display: inline-block;
  vertical-align: top;
  align-items: center;
  width: auto;
  gap: 10px;
  font-size: var(--header-notifications-details-card-title-fontSize);
  line-height: 140%;
  color: var(--header-notifications-details-card-postedDate-color);
  font-weight: 400;
  text-transform: capitalize;
  text-decoration: none;
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .notification_dropdown .notification-body ul li a {
    font-size: calc(14 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
  }
}
.notification_dropdown .notification-body ul li a::after {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  background-image: url("../../krypton-theme-css/assets/icons/right_arrow.png");
  background-repeat: no-repeat;
  width: 7px;
  height: 13px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .notification_dropdown .notification-body ul li a::after {
    background-size: calc(7 * var(--scaleWidth));
  }
}
.notification_dropdown .notification-body ul li a:hover {
  color: var(--header-notifications-details-card-postedDate-color);
}
.notification_dropdown .notification-body {
  padding: 0;
  max-height: 300px;
  overflow: auto;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .notification_dropdown .notification-body {
    max-height: calc(300 * var(--scaleWidth));
  }
}
.notification_dropdown .notification-body:not(:has(li)) {
  padding: 20px 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .notification_dropdown .notification-body:not(:has(li)) {
    padding-top: calc(20 * var(--scaleWidth));
    padding-bottom: calc(20 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
  }
}
.notification_dropdown .notification-body li {
  width: 100%;
  padding: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .notification_dropdown .notification-body li {
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
  }
}
.notification_dropdown .notification-footer {
  padding: 10px;
  display: flex;
  justify-content: flex-start;
  background-color: var(--header-notifications-footer-background-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .notification_dropdown .notification-footer {
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
  }
}
.notification_dropdown .notification-footer .button-icon-text {
  background-color: var(--header-notifications-footer-button-background-color);
  color: var(--header-notifications-footer-button-color);
  padding: var(--header-notifications-footer-button-padding);
  border-radius: var(--header-notifications-footer-button-borderRadius);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .notification_dropdown .notification-footer .button-icon-text {
    padding-top: calc(8 * var(--scaleWidth));
    padding-bottom: calc(8 * var(--scaleWidth));
    padding-left: calc(8 * var(--scaleWidth));
    padding-right: calc(8 * var(--scaleWidth));
    border-radius: calc(4 * var(--scaleWidth));
  }
}
.notification_dropdown .notification-footer .button-icon-text:hover {
  background-color: color-mix(in srgb, var(--header-notifications-footer-button-background-color), black 10%);
}
.notification_dropdown .notification-footer .button-icon-text.active, .notification_dropdown .notification-footer .button-icon-text:active {
  background-color: color-mix(in srgb, var(--header-notifications-footer-button-background-color), black 15%);
}
.notification_dropdown .notification-footer .button-icon-text.disabled, .notification_dropdown .notification-footer .button-icon-text:disabled {
  background-color: color-mix(in srgb, var(--header-notifications-footer-button-background-color), white 40%);
  cursor: not-allowed;
}

#portlet_com_liferay_notifications_web_portlet_NotificationsPortlet .cadmin.portlet-topper {
  opacity: 0 !important;
}
#portlet_com_liferay_notifications_web_portlet_NotificationsPortlet .navigation-bar .navbar-nav .nav-item .nav-link:not(.active) {
  display: none;
}
#portlet_com_liferay_notifications_web_portlet_NotificationsPortlet .container-fluid.container-fluid-max-xl {
  max-width: 100%;
  padding: 0;
}
#portlet_com_liferay_notifications_web_portlet_NotificationsPortlet .lfr-tooltip-scope .navbar {
  padding: 0 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #portlet_com_liferay_notifications_web_portlet_NotificationsPortlet .lfr-tooltip-scope .navbar {
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
  }
}
#portlet_com_liferay_notifications_web_portlet_NotificationsPortlet .list-group-item {
  box-shadow: inset -0.0625rem 0 rgba(0, 0, 0, 0.125), inset 0 0.0625rem rgba(0, 0, 0, 0.125), inset 0 -0.0625rem rgba(0, 0, 0, 0.125);
}
#portlet_com_liferay_notifications_web_portlet_NotificationsPortlet .list-group-item.active {
  background-color: rgba(0, 123, 255, 0.1803921569);
  color: #495057;
  box-shadow: none;
}
#portlet_com_liferay_notifications_web_portlet_NotificationsPortlet .list-group-item.list-group-item-primary {
  box-shadow: inset 0.5rem 0 #b8daff, inset -0.0625rem 0 rgba(0, 0, 0, 0.125), inset 0 0.0625rem rgba(0, 0, 0, 0.125), inset 0 -0.0625rem rgba(0, 0, 0, 0.125);
}

.company-header-name {
  display: flex;
  align-items: center;
  height: 50px;
  width: fit-content;
  position: relative;
  padding: 5px 10px;
  padding-left: 60px;
  background: radial-gradient(109.88% 194.03% at -4.07% 50%, #3B2C74 0%, #261A58 100%);
  border-radius: 5px;
  border: 1px solid #9280DC;
  text-align: left;
  max-width: 210px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .company-header-name {
    height: calc(50 * var(--scaleWidth));
    padding: calc(5 * var(--scaleWidth)) calc(10 * var(--scaleWidth));
    padding-left: calc(60 * var(--scaleWidth));
    border-radius: calc(5 * var(--scaleWidth));
  }
}
.company-header-name .brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 700;
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  color: #fff;
  background: #7066B7;
  border: 1px solid #8C93D7;
  border-radius: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .company-header-name .brand-logo {
    width: calc(40 * var(--scaleWidth));
    height: calc(40 * var(--scaleWidth));
    left: calc(10 * var(--scaleWidth));
    font-size: calc(20 * var(--scaleWidth));
    border-radius: calc(10 * var(--scaleWidth));
  }
}
.company-header-name .brand-label {
  font-size: 16px;
  display: inline-block;
  width: 100%;
  vertical-align: top;
  line-height: 110%;
  color: var(--header-control-profile-userName-color);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .company-header-name .brand-label {
    font-size: calc(16 * var(--scaleWidth));
  }
}

.theme-dark .company-header-name {
  background: transparent !important;
}
.theme-dark .company-header-name .brand-label {
  color: #fff !important;
}

.theme-light .header .container .rightbar ul .header-nav-btn.profile-btn::after {
  filter: grayscale(1) brightness(10) contrast(1);
}

.left-sidebar {
  display: inline-block;
  vertical-align: top;
  width: 70px; /* Default width */
  transition: width 0.3s ease-in-out;
  position: fixed;
  left: 10px;
  z-index: 1050;
}
@media (max-width: 1024px) {
  .left-sidebar {
    left: 10px;
    width: 60px;
  }
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .left-sidebar {
    width: 60px;
    left: 10px;
  }
}
.left-sidebar.active {
  width: 270px; /* Expanded width */
}
.left-sidebar.active + .overlay {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .left-sidebar.active nav {
    padding-bottom: 0 !important;
  }
  .left-sidebar.active nav::after {
    display: none !important;
  }
  .left-sidebar.active nav .navabar {
    max-height: 492px;
    overflow-y: auto;
  }
}
@media (min-width: 1401px) {
  .left-sidebar.active nav {
    padding-bottom: 0 !important;
  }
  .left-sidebar.active nav::after {
    display: none !important;
  }
  .left-sidebar.active nav .navabar {
    max-height: 582px;
    overflow-y: auto;
  }
}
.left-sidebar nav {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--sidebar-nav-background-color);
  border: var(--sidebar-nav-border);
  border-radius: var(--sidebar-nav-borderRadius);
  box-shadow: var(--sidebar-nav-boxShadow);
  overflow: hidden;
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .left-sidebar nav.exceedHeight {
    padding-bottom: 50px;
  }
  .left-sidebar nav.exceedHeight::after {
    position: absolute;
    width: 50px;
    height: 50px;
    background-image: url("../../krypton-theme-css/assets/expend_menu_icon.png");
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: center;
    border-radius: 36px;
    left: 5px;
    bottom: 5px;
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (min-width: 1401px) {
  .left-sidebar nav.exceedHeight {
    padding-bottom: 60px;
  }
  .left-sidebar nav.exceedHeight::after {
    position: absolute;
    width: 60px;
    height: 60px;
    background-image: url("../../krypton-theme-css/assets/expend_menu_icon.png");
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: center;
    border-radius: 36px;
    left: 5px;
    bottom: 5px;
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (max-width: 1024px) {
  .left-sidebar nav {
    box-shadow: none;
  }
}
.left-sidebar nav.mode-switch-nav {
  width: 70px;
}
@media (max-width: 1024px) {
  .left-sidebar nav.mode-switch-nav {
    width: 60px;
  }
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .left-sidebar nav.mode-switch-nav {
    width: 60px;
  }
}
.left-sidebar .navabar {
  padding: var(--sidebar-navbar-padding);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .left-sidebar .navabar {
    max-height: 442px;
    overflow: hidden;
    gap: 4px;
  }
}
@media (min-width: 1401px) {
  .left-sidebar .navabar {
    max-height: 522px;
    overflow: hidden;
  }
}
.left-sidebar .nav-item {
  list-style: none;
}
.left-sidebar .nav-link {
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  padding: 0 15px;
  padding-left: 0;
  font-size: var(--sidebar-navbar-navItem-link-fontSize);
  color: var(--color-primary-mode);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition: padding 0.3s ease-in-out;
  border-radius: 30px;
}
@media (max-width: 1024px) {
  .left-sidebar .nav-link {
    height: 50px;
  }
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .left-sidebar .nav-link {
    height: 50px;
  }
}
.left-sidebar .nav-link .nav-link-icon {
  display: flex;
  width: 60px;
  min-width: 60px; /* Ensures icon stays in place */
  height: 60px;
  justify-content: center;
  align-items: center;
}
@media (max-width: 1024px) {
  .left-sidebar .nav-link .nav-link-icon {
    height: 50px;
    min-width: 50px;
    width: 50px;
  }
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .left-sidebar .nav-link .nav-link-icon {
    height: 50px;
    min-width: 50px;
    width: 50px;
  }
}
.left-sidebar:hover .nav-link span {
  opacity: 1;
  visibility: visible;
}

.theme-dark .top-sidebar .nav-item .nav-link .nav-link-icon .constl-icon {
  color: var(--color-white);
  font-size: 24px;
}
.theme-dark .top-sidebar .nav-item.selected .nav-link {
  background: var(--color-white);
}
.theme-dark .top-sidebar .nav-item.selected .nav-link .nav-link-icon .constl-icon {
  color: var(--color-primary-mode);
  font-size: 24px;
}
.theme-dark .top-sidebar .nav-item:hover .nav-link, .theme-dark .top-sidebar .nav-item:active .nav-link {
  background: var(--color-white);
}
.theme-dark .top-sidebar .nav-item:hover .nav-link .nav-link-icon .constl-icon, .theme-dark .top-sidebar .nav-item:active .nav-link .nav-link-icon .constl-icon {
  color: var(--color-primary-mode);
  font-size: 24px;
}

.theme-light .top-sidebar .nav-item .nav-link .nav-link-icon .constl-icon {
  color: var(--color-primary-mode);
  font-size: 24px;
}
.theme-light .top-sidebar .nav-item.selected .nav-link {
  background: var(--sidebar-navbar-navItem-link-selected-background-color);
  color: var(--sidebar-navbar-navItem-link-selected-color);
}
.theme-light .top-sidebar .nav-item.selected .nav-link .nav-link-icon .constl-icon {
  color: var(--color-white);
  font-size: 24px;
}
.theme-light .top-sidebar .nav-item:hover .nav-link, .theme-light .top-sidebar .nav-item:active .nav-link {
  background: var(--sidebar-navbar-navItem-link-selected-background-color);
  color: var(--sidebar-navbar-navItem-link-selected-color);
}
.theme-light .top-sidebar .nav-item:hover .nav-link .nav-link-icon .constl-icon, .theme-light .top-sidebar .nav-item:active .nav-link .nav-link-icon .constl-icon {
  color: var(--color-white);
  font-size: 24px;
}

.top-sidebar {
  display: inline-block;
  vertical-align: top;
  width: auto;
  transition: width 0.3s ease-in-out;
  left: 10px;
}
@media (max-width: 1024px) {
  .top-sidebar {
    left: 10px;
    width: 450px;
  }
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .top-sidebar {
    width: 450px;
    left: 10px;
  }
}
.top-sidebar.active {
  width: 270px; /* Expanded width */
}
.top-sidebar.active + .overlay {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .top-sidebar.active nav {
    padding-bottom: 0 !important;
  }
  .top-sidebar.active nav::after {
    display: none !important;
  }
  .top-sidebar.active nav .navabar {
    max-height: 492px;
    overflow-y: auto;
  }
}
@media (min-width: 1401px) {
  .top-sidebar.active nav {
    padding-bottom: 0 !important;
  }
  .top-sidebar.active nav::after {
    display: none !important;
  }
  .top-sidebar.active nav .navabar {
    max-height: 582px;
    overflow-y: auto;
  }
}
.top-sidebar nav {
  display: flex;
  flex-direction: column;
  width: 100%;
  /*background: $sidebar-nav-background-color;
  border: $sidebar-nav-border;
  border-radius: $sidebar-nav-borderRadius;
  box-shadow: $sidebar-nav-boxShadow;*/
  overflow: hidden;
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .top-sidebar nav.exceedHeight {
    padding-bottom: 50px;
  }
  .top-sidebar nav.exceedHeight::after {
    position: absolute;
    width: 50px;
    height: 50px;
    background-image: url("../../krypton-theme-css/assets/expend_menu_icon.png");
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: center;
    border-radius: 36px;
    left: 5px;
    bottom: 5px;
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (min-width: 1401px) {
  .top-sidebar nav.exceedHeight {
    padding-bottom: 60px;
  }
  .top-sidebar nav.exceedHeight::after {
    position: absolute;
    width: 60px;
    height: 60px;
    background-image: url("../../krypton-theme-css/assets/expend_menu_icon.png");
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: center;
    border-radius: 36px;
    left: 5px;
    bottom: 5px;
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (max-width: 1024px) {
  .top-sidebar nav {
    box-shadow: none;
  }
}
.top-sidebar nav.mode-switch-nav {
  width: 70px;
}
@media (max-width: 1024px) {
  .top-sidebar nav.mode-switch-nav {
    width: 60px;
  }
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .top-sidebar nav.mode-switch-nav {
    width: 60px;
  }
}
.top-sidebar .navabar {
  padding: var(--sidebar-navbar-padding);
  margin: 0;
  display: flex;
  flex-direction: row;
  gap: 0 10px;
  padding: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .top-sidebar .navabar {
    max-height: 442px;
    overflow: hidden;
    gap: 4px;
  }
}
@media (min-width: 1401px) {
  .top-sidebar .navabar {
    max-height: 522px;
    overflow: hidden;
  }
}
.top-sidebar .nav-item {
  list-style: none;
}
.top-sidebar .nav-item.selected .nav-link {
  background: var(--sidebar-navbar-navItem-link-selected-background-color);
  color: var(--sidebar-navbar-navItem-link-selected-color);
}
.top-sidebar .nav-item:hover .nav-link, .top-sidebar .nav-item.active .nav-link {
  background: var(--sidebar-navbar-navItem-link-selected-background-color);
  color: var(--sidebar-navbar-navItem-link-selected-color);
}
.top-sidebar .nav-item::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%; /* position above the element */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  font-size: 12px;
  z-index: 100;
}
.top-sidebar .nav-item:hover::after {
  opacity: 1;
}
.top-sidebar .nav-link {
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  padding: 0;
  padding-left: 0;
  font-size: var(--sidebar-navbar-navItem-link-fontSize);
  color: var(--color-primary-mode);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition: padding 0.3s ease-in-out;
  border-radius: 30px;
}
@media (max-width: 1024px) {
  .top-sidebar .nav-link {
    height: 50px;
  }
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .top-sidebar .nav-link {
    height: 50px;
  }
}
.top-sidebar .nav-link .nav-link-icon {
  display: flex;
  width: 60px;
  min-width: 60px; /* Ensures icon stays in place */
  height: 60px;
  justify-content: center;
  align-items: center;
}
@media (max-width: 1024px) {
  .top-sidebar .nav-link .nav-link-icon {
    height: 50px;
    min-width: 50px;
    width: 50px;
  }
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .top-sidebar .nav-link .nav-link-icon {
    height: 50px;
    min-width: 50px;
    width: 50px;
  }
}
.top-sidebar .nav-link:hover, .top-sidebar .nav-link.active {
  background: linear-gradient(to right, color-mix(in srgb, var(--color-primary), black 20%) 0%, var(--color-primary-mode) 100%);
  color: var(--color-white);
}
.top-sidebar:hover .nav-link span {
  opacity: 1;
  visibility: visible;
}

.mode-switch {
  margin-top: 70px;
  margin-bottom: 30px;
  position: relative;
  display: none;
}
.mode-switch nav {
  border-radius: 45px;
}
.mode-switch nav .nav-link.active {
  background: linear-gradient(to right, color-mix(in srgb, var(--color-primary), black 20%) 0%, var(--color-primary-mode) 100%);
  color: var(--color-white);
}
.mode-switch nav .nav-link.active .nav-link-icon {
  filter: invert(1) grayscale(100%) brightness(2);
}

.constl-top-navigation {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
@media (max-width: 1024px) {
  .constl-top-navigation {
    position: fixed;
    left: 0;
    top: 70px;
    background: var(--constl-top-navigation-mobile-background, #ffffff);
    padding: 0 15px;
    max-width: var(--constl-top-navigation-mobile-width, 400px);
    z-index: 9999;
    padding-top: 20px;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    height: 100%;
  }
  .constl-top-navigation.active {
    transform: translateX(0);
  }
}
.constl-top-navigation .constl-navbnar {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0 -4px;
}
@media (max-width: 1024px) {
  .constl-top-navigation .constl-navbnar {
    flex-direction: column;
    overflow: hidden;
    overflow-y: auto;
    max-height: 80vh;
  }
}
.constl-top-navigation .constl-navbnar .constl-item {
  display: inline-block;
  width: auto;
  vertical-align: top;
  padding: 0 4px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-top-navigation .constl-navbnar .constl-item {
    padding-left: calc(4 * var(--scaleWidth));
    padding-right: calc(4 * var(--scaleWidth));
  }
}
@media (max-width: 1024px) {
  .constl-top-navigation .constl-navbnar .constl-item {
    width: 100% !important;
  }
}
.constl-top-navigation .constl-navbnar .constl-item .constl-link {
  display: inline-flex;
  text-decoration: none;
  font-size: var(--constl-top-navigation-link-fontSize, 16px);
  line-height: var(--constl-top-navigation-link-lineHeight, 100%);
  color: var(--constl-top-navigation-link-color, #372194);
  align-items: center;
  height: var(--constl-top-navigation-link-dimension, 60px);
  width: var(--constl-top-navigation-link-dimension, 60px);
  overflow: hidden;
  border-radius: var(--constl-top-navigation-link-borderRadius, 50px);
  padding-right: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-top-navigation .constl-navbnar .constl-item .constl-link {
    font-size: calc(16 * var(--scaleWidth));
    width: calc(60 * var(--scaleWidth));
    height: calc(60 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
  }
}
@media (max-width: 1024px) {
  .constl-top-navigation .constl-navbnar .constl-item .constl-link {
    width: 100% !important;
  }
}
.constl-top-navigation .constl-navbnar .constl-item .constl-link .icon {
  display: flex;
  width: var(--constl-top-navigation-link-dimension, 60px);
  min-width: var(--constl-top-navigation-link-dimension, 60px);
  height: var(--constl-top-navigation-link-dimension, 60px);
  justify-content: center;
  align-items: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-top-navigation .constl-navbnar .constl-item .constl-link .icon {
    height: calc(60 * var(--scaleWidth));
    width: calc(60 * var(--scaleWidth));
    min-width: calc(60 * var(--scaleWidth));
  }
}
.constl-top-navigation .constl-navbnar .constl-item .constl-link .icon .constl-icon {
  font-size: var(--constl-top-navigation-link-icon-fontSize, 28px);
  color: var(--constl-top-navigation-link-icon-color, #372194);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-top-navigation .constl-navbnar .constl-item .constl-link .icon .constl-icon {
    font-size: calc(28 * var(--scaleWidth));
  }
}
.constl-top-navigation .constl-navbnar .constl-item .constl-link .text {
  white-space: nowrap;
  opacity: 0;
  max-width: 0;
}
@media (max-width: 1024px) {
  .constl-top-navigation .constl-navbnar .constl-item .constl-link .text {
    opacity: 1;
    max-width: max-content;
  }
}
.constl-top-navigation .constl-navbnar .constl-item .constl-link.active {
  width: auto;
  background: var(--constl-top-navigation-link-color, #372194);
  color: var(--constl-top-navigation-link-hover-color, #ffffff);
}
.constl-top-navigation .constl-navbnar .constl-item .constl-link.active .constl-icon {
  color: var(--constl-top-navigation-link-hover-color, #ffffff);
}
.constl-top-navigation .constl-navbnar .constl-item .constl-link.active .text {
  opacity: 1;
  max-width: max-content;
}
.constl-top-navigation .constl-navbnar .constl-item:hover .constl-link {
  width: auto;
  background: var(--constl-top-navigation-link-color, #372194);
  color: var(--constl-top-navigation-link-hover-color, #ffffff);
}
@media (max-width: 1024px) {
  .constl-top-navigation .constl-navbnar .constl-item:hover .constl-link {
    width: 100% !important;
  }
}
.constl-top-navigation .constl-navbnar .constl-item:hover .constl-link .constl-icon {
  color: var(--constl-top-navigation-link-hover-color, #ffffff);
}
.constl-top-navigation .constl-navbnar .constl-item:hover .constl-link .text {
  opacity: 1;
  max-width: max-content;
}
.constl-top-navigation .constl-navbnar .constl-item.selected .constl-link {
  background: var(--constl-top-navigation-link-color, #372194);
  color: var(--constl-top-navigation-link-hover-color, #ffffff);
  width: auto;
}
.constl-top-navigation .constl-navbnar .constl-item.selected .constl-link .constl-icon {
  color: var(--constl-top-navigation-link-hover-color, #ffffff);
}
.constl-top-navigation .constl-navbnar .constl-item.selected .constl-link .text {
  opacity: 1;
  max-width: max-content;
}

.header .container .leftbar .page-title {
  display: none !important;
}

@media (max-width: 1024px) {
  .has-control-menu .constl-top-navigation {
    top: 126px;
  }
}

.theme-light .constl-top-navigation .constl-navbnar .constl-item.selected .constl-link {
  border: 1px solid #9280DC;
}

.accordion .accordion-card {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  padding: var(--accordion-card-padding);
  border-radius: var(--accordion-card-borderRadius);
  overflow: hidden;
  box-shadow: var(--accordion-card-boxShadow);
  margin-bottom: var(--accordion-card-margin-bottom);
  border: var(--accordion-card-border);
  background: var(--accordion-card-background-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .accordion .accordion-card {
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
    margin-bottom: calc(10 * var(--scaleWidth));
    border-radius: calc(10 * var(--scaleWidth));
  }
}
.accordion .accordion-card:last-child {
  margin-bottom: 0;
}
.accordion .accordion-card .accordion-header {
  display: flex;
  align-items: center;
}
.accordion .accordion-card .accordion-header .accordion-button {
  cursor: pointer;
}
.accordion .accordion-card .accordion-header .accordion-item {
  font-size: var(--accordion-card-header-fontSize);
  line-height: normal;
  color: var(--accordion-card-header-color);
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-weight: var(--accordion-card-header-fontWeight);
  align-items: center;
  padding-left: 35px;
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .accordion .accordion-card .accordion-header .accordion-item {
    font-size: calc(18 * var(--scaleWidth));
    padding-left: calc(35 * var(--scaleWidth));
  }
}
.accordion .accordion-card .accordion-header .accordion-item::before {
  position: absolute;
  left: 0;
  top: 7px;
  background-image: url("../../krypton-theme-css/assets/icons/accordion-arrow.png");
  background-repeat: no-repeat;
  content: "";
  width: 24px;
  height: 24px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .accordion .accordion-card .accordion-header .accordion-item::before {
    top: calc(7 * var(--scaleWidth));
    background-size: calc(24 * var(--scaleWidth));
  }
}
.accordion .accordion-card .accordion-header .accordion-item[aria-expanded=true]::before {
  transform: rotate(90deg);
}
.accordion .accordion-card .accordion-header .accordion-item .heading {
  display: flex;
  align-items: center;
  gap: var(--accordion-gap);
}
.accordion .accordion-card .accordion-header .accordion-item .heading .company-tag {
  width: var(--accordion-companyTag-size);
  height: var(--accordion-companyTag-size);
  background-color: var(--accordion-companyTag-background-color);
  border-radius: var(--accordion-companyTag-borderRadius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--accordion-companyTag-fontSize);
  text-align: center;
  text-transform: uppercase;
  font-weight: var(--accordion-companyTag-fontWeight);
  color: var(--accordion-companyTag-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .accordion .accordion-card .accordion-header .accordion-item .heading .company-tag {
    width: calc(32 * var(--scaleWidth));
    height: calc(32 * var(--scaleWidth));
    border-radius: calc(40 * var(--scaleWidth));
    font-size: calc(20 * var(--scaleWidth));
  }
}
.accordion .accordion-card .accordion-header:has(+ .expanded):first-child {
  background: var(--accordion-content-expanded-background-color);
}
.accordion .accordion-card .accordion-body {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  padding-top: var(--accordion-body-padding-top);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .accordion .accordion-card .accordion-body {
    padding-top: calc(15 * var(--scaleWidth));
  }
}
.accordion .form-group {
  margin-bottom: 0 !important;
}

.status-tag {
  display: flex;
  min-width: var(--accordion-status-width);
  padding: var(--accordion-status-padding);
  align-items: center;
  justify-content: center;
  border-radius: var(--accordion-status-borderRadius);
  text-align: center;
  border: var(--accordion-status-border);
  color: var(--accordion-status-color);
  font-size: 16px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-tag {
    min-width: calc(96 * var(--scaleWidth));
    padding-top: calc(5 * var(--scaleWidth));
    padding-bottom: calc(5 * var(--scaleWidth));
    padding-left: calc(5 * var(--scaleWidth));
    padding-right: calc(5 * var(--scaleWidth));
    border-radius: calc(20 * var(--scaleWidth));
    font-size: calc(16 * var(--scaleWidth));
  }
}
.status-tag.verified {
  border-color: var(--accordion-status-verified);
  color: var(--accordion-status-verified);
}
.status-tag.rejected {
  border-color: var(--accordion-status-rejected);
  color: var(--accordion-status-rejected);
}
.status-tag.pending {
  border-color: var(--accordion-status-pending);
  color: var(--accordion-status-pending);
}

.accordion-content.expanded > td {
  height: 100%;
  background-color: var(--accordion-content-expanded-background-color) !important;
}

.dataTable tbody tr:has(+ .expanded) td:first-child {
  background: var(--accordion-content-expanded-background-color) !important;
}

.theme-dark .accordion .accordion-card .accordion-header .accordion-item::before {
  filter: brightness(0) invert(1);
}

.theme-modal .modal-dialog .modal-content {
  background-color: var(--theme-modal-content-background-color, #F5F5F5);
  border-radius: var(--theme-modal-content-borderRadius, 12px);
  border: none;
}
.theme-modal .modal-dialog .modal-content .modal-header {
  padding: 20px 30px 25px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .theme-modal .modal-dialog .modal-content .modal-header {
    padding-top: calc(20 * var(--scaleWidth));
    padding-bottom: calc(30 * var(--scaleWidth));
    padding-left: calc(25 * var(--scaleWidth));
    padding-right: calc(25 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .theme-modal .modal-dialog .modal-content .modal-header {
    padding: 15px;
  }
}
.theme-modal .modal-dialog .modal-content .modal-header .modal-title {
  display: inline-block;
  width: auto;
  vertical-align: top;
  font-size: var(--theme-modal-header-title-fontSize, 16px);
  line-height: var(--theme-modal-header-title-lineHeight, 19px);
  color: var(--theme-modal-header-title-color, #000000);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .theme-modal .modal-dialog .modal-content .modal-header .modal-title {
    font-size: calc(16 * var(--scaleWidth));
    line-height: calc(19 * var(--scaleWidth));
  }
}
.theme-modal .modal-dialog .modal-content .modal-header .close {
  position: absolute !important;
  right: 10px !important;
  top: 10px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .theme-modal .modal-dialog .modal-content .modal-header .close {
    right: calc(10 * var(--scaleWidth)) !important;
    top: calc(10 * var(--scaleWidth)) !important;
  }
}
.theme-modal .modal-dialog .modal-content .modal-header .close .material-symbols-outlined,
.theme-modal .modal-dialog .modal-content .modal-header .close .constl-icon {
  font-size: 26px;
  color: var(--theme-modal-header-closeButton-color, #000000);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .theme-modal .modal-dialog .modal-content .modal-header .close .material-symbols-outlined,
  .theme-modal .modal-dialog .modal-content .modal-header .close .constl-icon {
    font-size: calc(26 * var(--scaleWidth));
  }
}
.theme-modal .modal-dialog .modal-content .modal-body {
  padding: var(--theme-modal-body-padding, 0 30px);
  border: 0;
}
@media (max-width: 768px) {
  .theme-modal .modal-dialog .modal-content .modal-body {
    padding: 0 15px !important;
  }
}
.theme-modal .modal-dialog .modal-content .modal-footer {
  padding: var(--theme-modal-footer-padding, 25px 30px 20px 25px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  border: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .theme-modal .modal-dialog .modal-content .modal-footer {
    gap: calc(15 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .theme-modal .modal-dialog .modal-content .modal-footer {
    padding: 0 15px !important;
  }
}
.theme-modal .modal-dialog .modal-content .modal-footer .button {
  margin: 0;
  height: var(--theme-modal-footer-buttonHeight, 40px);
  border-radius: var(--theme-modal-footer-button-borderRadius, 5px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .theme-modal .modal-dialog .modal-content .modal-footer .button {
    height: calc(40 * var(--scaleWidth));
    border-radius: calc(5 * var(--scaleWidth));
  }
}

/*  Larger Screen Styling */
.daterangepicker {
  position: absolute;
  color: inherit;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
  width: 278px;
  max-width: none;
  padding: 0;
  margin-top: 7px;
  top: 100px;
  left: 20px;
  z-index: 3001;
  display: none;
  font-family: arial;
  font-size: 15px;
  line-height: 1em;
}
.daterangepicker:before {
  position: absolute;
  display: inline-block;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: "";
  top: -7px;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #ccc;
}
.daterangepicker:after {
  position: absolute;
  display: inline-block;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: "";
  top: -6px;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent;
}
.daterangepicker .drp-calendar {
  display: none;
  max-width: 328px;
}
.daterangepicker .drp-calendar.left {
  padding: 8px 0 8px 8px;
}
.daterangepicker .drp-calendar.right {
  padding: 8px;
}
.daterangepicker .drp-calendar.single .calendar-table {
  border: none;
}
.daterangepicker .calendar-table {
  border: 1px solid #fff;
  border-radius: 4px;
  background-color: #fff;
}
.daterangepicker .calendar-table .next span {
  color: #fff;
  border: solid black;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.daterangepicker .calendar-table .prev span {
  color: #fff;
  border: solid black;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.daterangepicker .calendar-table th {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  min-width: 40px;
  width: 40px;
  height: 40px;
  line-height: 24px;
  font-size: 14px;
  border-radius: 20px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}
.daterangepicker .calendar-table td {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  min-width: 40px;
  width: 40px;
  height: 40px;
  line-height: 24px;
  font-size: 14px;
  border-radius: 20px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}
.daterangepicker .calendar-table table {
  width: 100%;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
}
.daterangepicker td.available:hover {
  background-color: #eee;
  border-color: transparent;
  color: inherit;
}
.daterangepicker th.available:hover {
  background-color: #eee;
  border-color: transparent;
  color: inherit;
}
.daterangepicker td.week {
  font-size: 80%;
  color: #ccc;
}
.daterangepicker th.week {
  font-size: 80%;
  color: #ccc;
}
.daterangepicker td.off {
  background-color: #fff;
  border-color: transparent;
  color: #999;
}
.daterangepicker td.off.in-range {
  background-color: #fff;
  border-color: transparent;
  color: #999;
}
.daterangepicker td.off.start-date {
  background-color: #fff;
  border-color: transparent;
  color: #999;
}
.daterangepicker td.off.end-date {
  background-color: #fff;
  border-color: transparent;
  color: #999;
}
.daterangepicker td.in-range {
  background-color: #ebf4f8;
  border-color: transparent;
  color: #000;
  border-radius: 0;
}
.daterangepicker td.start-date {
  border-radius: 4px 0 0 4px;
}
.daterangepicker td.end-date {
  border-radius: 0 4px 4px 0;
}
.daterangepicker td.start-date.end-date {
  border-radius: 20px;
}
.daterangepicker td.active {
  background-color: #372194;
  border-color: transparent;
  color: #fff;
}
.daterangepicker td.active:hover {
  background-color: #372194;
  border-color: transparent;
  color: #fff;
}
.daterangepicker th.month {
  width: auto;
}
.daterangepicker td.disabled {
  color: #999;
  cursor: not-allowed;
  text-decoration: line-through;
}
.daterangepicker option.disabled {
  color: #999;
  cursor: not-allowed;
  text-decoration: line-through;
}
.daterangepicker select.monthselect {
  height: auto;
  margin: 0;
  cursor: default;
  font-size: 16px;
  font-weight: 600;
  color: #344054;
  border: none;
  border-radius: 8px;
  padding: 0;
  min-height: 35px;
  appearance: none;
  text-align: center;
  margin-right: 2%;
  width: 48%;
}
.daterangepicker select.monthselect:focus-visible {
  outline: none;
}
.daterangepicker select.yearselect {
  height: auto;
  margin: 0;
  cursor: default;
  font-size: 16px;
  font-weight: 600;
  color: #344054;
  border: none;
  border-radius: 8px;
  padding: 0;
  min-height: 35px;
  appearance: none;
  text-align: center;
  width: 50%;
}
.daterangepicker select.yearselect:focus-visible {
  outline: none;
}
.daterangepicker select.hourselect {
  width: 50px;
  margin: 0 auto;
  background: #eee;
  border: 1px solid #eee;
  padding: 2px;
  outline: 0;
  font-size: 12px;
}
.daterangepicker select.minuteselect {
  width: 50px;
  margin: 0 auto;
  background: #eee;
  border: 1px solid #eee;
  padding: 2px;
  outline: 0;
  font-size: 12px;
}
.daterangepicker select.secondselect {
  width: 50px;
  margin: 0 auto;
  background: #eee;
  border: 1px solid #eee;
  padding: 2px;
  outline: 0;
  font-size: 12px;
}
.daterangepicker select.ampmselect {
  width: 50px;
  margin: 0 auto;
  background: #eee;
  border: 1px solid #eee;
  padding: 2px;
  outline: 0;
  font-size: 12px;
}
.daterangepicker .calendar-time {
  text-align: center;
  margin: 4px auto 0 auto;
  line-height: 30px;
  position: relative;
}
.daterangepicker .calendar-time select.disabled {
  color: #ccc;
  cursor: not-allowed;
}
.daterangepicker .drp-buttons {
  clear: both;
  text-align: right;
  padding: 8px;
  border-top: 1px solid #ddd;
  display: none;
  line-height: 12px;
  vertical-align: middle;
}
.daterangepicker .drp-buttons .btn {
  margin-left: 8px;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
}
.daterangepicker .drp-buttons .btn.btn-default {
  border: 1px solid #ddd;
}
.daterangepicker .drp-selected {
  display: inline-block;
  font-size: 12px;
  padding-right: 8px;
}
.daterangepicker .ranges {
  float: none;
  text-align: left;
  margin: 0;
}
.daterangepicker .ranges ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
.daterangepicker .ranges li {
  font-size: 12px;
  padding: 8px 12px;
  cursor: pointer;
}
.daterangepicker .ranges li:hover {
  background-color: #eee;
}
.daterangepicker .ranges li.active {
  background-color: #08c;
  color: #fff;
}

.daterangepicker.opensleft:before {
  right: 9px;
}
.daterangepicker.opensleft:after {
  right: 10px;
}

.daterangepicker.openscenter:before {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}
.daterangepicker.openscenter:after {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.opensright:before {
  left: 9px;
}
.daterangepicker.opensright:after {
  left: 10px;
}

.daterangepicker.drop-up {
  margin-top: -7px;
}
.daterangepicker.drop-up:before {
  top: initial;
  bottom: -7px;
  border-bottom: initial;
  border-top: 7px solid #ccc;
}
.daterangepicker.drop-up:after {
  top: initial;
  bottom: -6px;
  border-bottom: initial;
  border-top: 6px solid #fff;
}

.daterangepicker.single .daterangepicker .ranges {
  float: none;
}
.daterangepicker.single .drp-calendar {
  float: none;
}
.daterangepicker.single .drp-selected {
  display: none;
}

.daterangepicker.show-calendar .drp-calendar {
  display: block;
}
.daterangepicker.show-calendar .drp-buttons {
  display: block;
}
.daterangepicker.show-calendar .ranges {
  margin-top: 8px;
}

.daterangepicker.auto-apply .drp-buttons {
  display: none;
}

.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
  border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}

.daterangepicker.show-ranges.rtl .drp-calendar.right {
  border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}

@media (min-width: 564px) {
  .daterangepicker {
    width: auto;
    direction: ltr;
    text-align: left;
  }
  .daterangepicker .ranges {
    float: left;
  }
  .daterangepicker .ranges ul {
    width: 140px;
  }
  .daterangepicker .drp-calendar.left {
    clear: left;
    margin-right: 0;
  }
  .daterangepicker .drp-calendar.left .calendar-table {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-right: 8px;
  }
  .daterangepicker .drp-calendar.right {
    margin-left: 0;
  }
  .daterangepicker .drp-calendar.right .calendar-table {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .daterangepicker .drp-calendar {
    float: left;
  }
  .daterangepicker.single .ranges {
    float: left;
  }
  .daterangepicker.single .ranges ul {
    width: 100%;
  }
  .daterangepicker.single .drp-calendar.left {
    clear: none;
  }
  .daterangepicker.single .drp-calendar {
    float: left;
  }
}
@media (min-width: 730px) {
  .daterangepicker .ranges {
    width: auto;
    float: left;
  }
  .daterangepicker .drp-calendar.left {
    clear: none !important;
  }
  .daterangepicker.rtl .ranges {
    float: right;
  }
}
.capsule-tab {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  margin-bottom: 30px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .capsule-tab {
    margin-bottom: calc(30 * var(--scaleWidth));
  }
}
.capsule-tab .capsule-tab-nav {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0 10px;
  box-shadow: var(--capsule-tabbing-nav-boxShadow);
  border-radius: var(--capsule-tabbing-nav-borderRadius);
  padding: var(--capsule-tabbing-nav-padding);
  background: var(--capsule-tabbing-background-color);
  flex-wrap: wrap;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .capsule-tab .capsule-tab-nav {
    border-radius: calc(45 * var(--scaleWidth));
    padding-top: calc(3 * var(--scaleWidth));
    padding-bottom: calc(3 * var(--scaleWidth));
    padding-left: calc(3 * var(--scaleWidth));
    padding-right: calc(3 * var(--scaleWidth));
    gap: 0 calc(16 * var(--scaleWidth));
  }
}
@media (max-width: 1024px) {
  .capsule-tab .capsule-tab-nav {
    border-radius: 15px;
    padding: 15px;
  }
}
@media (max-width: 768px) {
  .capsule-tab .capsule-tab-nav {
    border-radius: 15px;
    padding: 15px;
    gap: 10px;
  }
}
.capsule-tab .capsule-tab-nav .capsule-item {
  list-style: none;
  flex: 1;
}
.capsule-tab .capsule-tab-nav .capsule-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--capsule-tabbing-nav-item-fontSize);
  line-height: 137.5%;
  text-transform: capitalize;
  font-weight: 500;
  min-width: 139px;
  height: 44px;
  color: var(--capsule-tabbing-nav-item-color);
  text-decoration: none;
  border-radius: var(--capsule-tabbing-nav-item-borderRadius);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .capsule-tab .capsule-tab-nav .capsule-item a {
    font-size: calc(16 * var(--scaleWidth));
    min-width: calc(139 * var(--scaleWidth));
    height: calc(44 * var(--scaleWidth));
    border-radius: calc(45 * var(--scaleWidth));
  }
}
.capsule-tab .capsule-tab-nav .capsule-item a.active {
  background-color: var(--capsule-tabbing-nav-item-active-backrgound-color);
  color: var(--capsule-tabbing-nav-item-active-color);
  font-weight: 600;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .capsule-tab .capsule-tab-nav .capsule-item a {
    min-width: 125px;
  }
}

.tabular-tab {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
.tabular-tab .tabular-tab-nav {
  display: flex;
  align-items: center;
  padding: 0;
  width: 100%;
  border-bottom: var(--tabuler-tabbing-nav-border-bottom);
  align-items: flex-end;
}
@media (max-width: 1024px) {
  .tabular-tab .tabular-tab-nav {
    border-radius: 15px;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
}
@media (max-width: 479px) {
  .tabular-tab .tabular-tab-nav {
    border-radius: 0;
    padding: 0 15px 0 15px;
    border-bottom: none;
  }
}
.tabular-tab .tabular-tab-nav .tabular-item {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 479px) {
  .tabular-tab .tabular-tab-nav .tabular-item {
    width: 100%;
  }
}
.tabular-tab .tabular-tab-nav .tabular-item > a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tabuler-tabbing-nav-item-padding);
  font-size: var(--tabuler-tabbing-nav-item-fontSize);
  color: var(--tabuler-tabbing-nav-item-color);
  text-decoration: none;
  text-transform: capitalize;
  position: relative;
  gap: 6px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .tabular-tab .tabular-tab-nav .tabular-item > a {
    padding-top: calc(12 * var(--scaleWidth));
    padding-bottom: calc(12 * var(--scaleWidth));
    padding-left: calc(20 * var(--scaleWidth));
    padding-right: calc(20 * var(--scaleWidth));
    font-size: calc(16 * var(--scaleWidth));
    gap: calc(6 * var(--scaleWidth));
  }
}
@media (max-width: 479px) {
  .tabular-tab .tabular-tab-nav .tabular-item > a::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    content: "";
    display: inline-block;
    vertical-align: top;
    bottom: -1px;
    background-color: var(--tabuler-tabbing-nav-item-border-color);
  }
}
.tabular-tab .tabular-tab-nav .tabular-item > a.active {
  color: var(--color-primary-mode);
  font-weight: 600;
}
.tabular-tab .tabular-tab-nav .tabular-item > a.active::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  content: "";
  display: inline-block;
  vertical-align: top;
  bottom: -1px;
  background-color: var(--tabuler-tabbing-nav-item-active-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .tabular-tab .tabular-tab-nav .tabular-item > a.active::after {
    height: calc(2 * var(--scaleWidth));
  }
}
.tabular-tab .tabular-tab-nav .tabular-item > a.disabled {
  opacity: 0.5;
  pointer-events: none !important;
}

.mapbox-wrap {
  position: relative;
}

.mapbox-wrap #map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

.city-label {
  background: #FFFFFF;
  color: #000000;
  font-size: 12px;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 25px;
  font-weight: 500;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  text-align: center;
  white-space: nowrap;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .city-label {
    font-size: calc(12 * var(--scaleWidth));
    padding-top: calc(3 * var(--scaleWidth));
    padding-bottom: calc(3 * var(--scaleWidth));
    padding-left: calc(12 * var(--scaleWidth));
    padding-right: calc(12 * var(--scaleWidth));
    border-radius: calc(25 * var(--scaleWidth));
  }
}

.left-pos::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent #FFFFFF;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .left-pos::after {
    border-width: calc(6 * var(--scaleWidth));
    left: calc(-10 * var(--scaleWidth));
  }
}

.right-pos::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translateY(-50%) rotate(180deg);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent #FFFFFF;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .right-pos::after {
    border-width: calc(6 * var(--scaleWidth));
    left: calc(-10 * var(--scaleWidth));
  }
}

.source-label,
.destination-label {
  background: #000000;
  color: #ffffff;
  font-size: 12px;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 25px;
  font-weight: 500;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  text-align: center;
  white-space: nowrap;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .source-label,
  .destination-label {
    font-size: calc(12 * var(--scaleWidth));
    padding-top: calc(3 * var(--scaleWidth));
    padding-bottom: calc(3 * var(--scaleWidth));
    padding-left: calc(12 * var(--scaleWidth));
    padding-right: calc(12 * var(--scaleWidth));
    border-radius: calc(25 * var(--scaleWidth));
  }
}

.top-pos::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #000000 transparent transparent transparent;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .top-pos::after {
    bottom: calc(-12 * var(--scaleWidth));
    border-width: calc(6 * var(--scaleWidth));
  }
}

.bottom-pos::after {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #000000 transparent;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .bottom-pos::after {
    bottom: calc(-12 * var(--scaleWidth));
    border-width: calc(6 * var(--scaleWidth));
  }
}

.map-container .sidebarMap {
  height: 100%;
  width: 340px;
  position: absolute;
  top: 0;
  left: -355px;
  z-index: 2;
  transition: 0.5s ease-in-out;
  padding: 10px;
  font-size: 14px;
  padding-right: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .sidebarMap {
    font-size: calc(14 * var(--scaleWidth));
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(5 * var(--scaleWidth));
    left: calc(-355 * var(--scaleWidth));
    width: calc(340 * var(--scaleWidth));
  }
}
.map-container .sidebarMap.openMap {
  left: 0;
  background: color-mix(in srgb, var(--map-sidebarMap-background-color, #ffffff) 5%, transparent);
  border-radius: var(--map-sidebarMap-borderRadius, 5px) 0 0 var(--map-sidebarMap-borderRadius, 5px);
  box-shadow: var(--map-sidebarMap-boxShadow, rgba(0, 0, 0, 0.4) 0px 0px 10px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .sidebarMap.openMap {
    border-radius: calc(5 * var(--scaleWidth)) 0 0 calc(5 * var(--scaleWidth));
  }
}
.map-container .scrollBarSideBar {
  overflow-y: scroll;
  height: 100%;
  padding: 0;
  padding-right: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .scrollBarSideBar {
    padding-right: calc(10 * var(--scaleWidth));
  }
}
.map-container .toggleBtnMap {
  position: absolute;
  right: -38px;
  background: var(--map-sidebarMap-toggleBtnMap-background, #372194);
  color: var(--map-sidebarMap-toggleBtnMap-color, #fff);
  border: var(--map-sidebarMap-toggleBtnMap-border, 1px solid #d1d1d1);
  font-size: var(--map-sidebarMap-toggleBtnMap-font-size, 24px);
  padding: var(--map-sidebarMap-toggleBtnMap-padding, 20px 10px);
  border-left: 0;
  top: 50%;
  cursor: pointer;
  transition: 0.5s ease-in-out;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  width: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .toggleBtnMap {
    font-size: calc(24 * var(--scaleWidth));
    padding-top: calc(15 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
  }
}
.map-container .sidebarMap.openMap .toggleBtnMap {
  right: -25px;
}
.map-container .layer-group p {
  margin: 5px 0;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .layer-group p {
    gap: calc(6 * var(--scaleWidth));
    margin-top: calc(5 * var(--scaleWidth));
    margin-bottom: calc(5 * var(--scaleWidth));
  }
}
.map-container .layer-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 20px;
  margin-bottom: 5px;
  flex-flow: wrap;
  color: var(--map-sidebarMap-layerGroupParent-label-color, #000000);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .layer-checkbox {
    gap: calc(6 * var(--scaleWidth));
    margin-left: calc(20 * var(--scaleWidth));
    margin-bottom: calc(5 * var(--scaleWidth));
  }
}
.map-container .layer-checkbox .layer-group .sub-layer-group {
  margin-bottom: 0 !important;
}
.map-container .layer-checkbox .layer-group .sub-layer-group > div {
  margin-bottom: 0 !important;
}
.map-container .layer-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: var(--map-sidebarMap-layerGroupParent-label-color, #000000);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .layer-label {
    gap: calc(5 * var(--scaleWidth));
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
  }
}
.map-container .layer-dot {
  width: 20px;
  height: 20px;
  min-width: 20px;
  display: inline-block;
  border-radius: 4px;
  margin: 0 4px;
  vertical-align: bottom;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .layer-dot {
    margin-left: calc(4 * var(--scaleWidth));
    margin-right: calc(4 * var(--scaleWidth));
    gap: calc(16 * var(--scaleWidth));
    width: calc(20 * var(--scaleWidth));
    min-width: calc(20 * var(--scaleWidth));
    height: calc(20 * var(--scaleWidth));
    border-radius: calc(4 * var(--scaleWidth));
  }
}
.map-container .mapboxgl-canvas {
  border-radius: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .mapboxgl-canvas {
    border-radius: calc(10 * var(--scaleWidth));
  }
}
.map-container #dashboard-map {
  display: block !important;
}
.map-container #dashboard-map #map {
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container #dashboard-map #map {
    border-radius: calc(10 * var(--scaleWidth));
  }
}
.map-container .sidebarMap h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--map-sidebarMap-heading-color, #000000);
  margin-bottom: 0 !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .sidebarMap h3 {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.map-container .layer-group-parent {
  background: var(--map-sidebarMap-layerGroupParent-background, #fff);
  border: var(--map-sidebarMap-layerGroupParent-border, 1px solid #d0d5dd);
  padding: var(--map-sidebarMap-layerGroupParent-padding, 10px);
  border-radius: var(--map-sidebarMap-layerGroupParent-border-radius, 8px);
  margin-bottom: var(--map-sidebarMap-layerGroupParent-margin-bottom, 10px);
  box-shadow: var(--map-sidebarMap-layerGroupParent-boxShadow, 0 1px 2px rgba(16, 24, 40, 0.5));
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .layer-group-parent {
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
    margin-bottom: calc(10 * var(--scaleWidth));
  }
}
.map-container .layer-group-parent .layer-group .layer-label {
  color: var(--map-sidebarMap-layerGroupParent-label-color, #000000);
}
.map-container .layer-group-parent .sub-layer-group .layer-label {
  color: var(--map-sidebarMap-layerGroupParent-label-color, #000000);
}
.map-container .map-overbox {
  overflow: hidden;
}
.map-container span.arrow-network {
  border-top: var(--map-sidebarMap-arrow-network-border, 2px solid #555);
  border-right: var(--map-sidebarMap-arrow-network-border, 2px solid #555);
  transform: rotate(45deg);
  width: var(--map-sidebarMap-arrow-network-dimension, 10px);
  height: var(--map-sidebarMap-arrow-network-dimension, 10px);
  margin-right: var(--map-sidebarMap-arrow-network-margin-right, 8px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container span.arrow-network {
    padding-right: calc(8 * var(--scaleWidth));
    width: calc(10 * var(--scaleWidth));
    height: calc(10 * var(--scaleWidth));
  }
}
.map-container span.arrow-network.expanded {
  transform: rotate(135deg);
}
.map-container .colorPicker-box {
  position: absolute;
  width: var(--map-sidebarMap-width, 265px);
  padding: var(--map-sidebarMap-padding, 30px 15px 15px);
  box-shadow: var(--map-sidebarMap-boxShadow, rgba(0, 0, 0, 0.4) 0px 0px 10px);
  left: 100%;
  background: var(--map-sidebarMap-background, #fff);
  border-radius: var(--map-sidebarMap-borderRadius, 5px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .colorPicker-box {
    width: calc(265 * var(--scaleWidth));
    border-radius: calc(5 * var(--scaleWidth));
    padding-top: calc(30 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
    padding-left: calc(30 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
  }
}
.map-container .colorPicker-close-btn {
  position: absolute;
  top: 2px;
  left: 88%;
  background: var(--map-sidebarMap-colorPicker-closeBtn-background, #fff);
  border: 0;
  border-radius: var(--map-sidebarMap-colorPicker-closeBtn-borderRadius, 50%);
  width: var(--map-sidebarMap-colorPicker-closeBtn-dimension, 24px);
  height: var(--map-sidebarMap-colorPicker-closeBtn-dimension, 24px);
  cursor: pointer;
  font-size: var(--map-sidebarMap-colorPicker-closeBtn-fontSize, 14px);
  line-height: var(--map-sidebarMap-colorPicker-closeBtn-lineHeight, 20px);
  text-align: center;
  padding: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .colorPicker-close-btn {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
    width: calc(24 * var(--scaleWidth));
    height: calc(24 * var(--scaleWidth));
  }
}
.map-container .sub-layer-group {
  padding-left: var(--map-sidebarMap-layerGroupParent-layerGroupChild-padding-left, 10px);
  margin-bottom: var(--map-sidebarMap-layerGroupParent-layerGroupChild-margin-bottom, 10px);
  color: var(--map-sidebarMap-layerGroupParent-label-color, #000000);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .sub-layer-group {
    padding-left: calc(10 * var(--scaleWidth));
    margin-bottom: calc(10 * var(--scaleWidth));
  }
}
.map-container .services-wrapper.hidden {
  display: none;
}
.map-container .services-wrapper.visible {
  display: block;
}
.map-container .search-wrapper-parent {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .search-wrapper-parent {
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
.map-container .button-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .button-group {
    gap: calc(4 * var(--scaleWidth));
  }
}
.map-container .option-button {
  padding: var(--map-sidebarMap-optionButton-padding, 8px 16px);
  border: var(--map-sidebarMap-optionButton-order, 1px solid #aaa);
  border-radius: var(--map-sidebarMap-optionButton-borderRadius, 20px);
  background-color: var(--map-sidebarMap-optionButton-background, #ffffff);
  color: var(--map-sidebarMap-optionButton-color, #333);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-size: var(--map-sidebarMap-optionButton-font-size, 14px);
}
.map-container .option-button img {
  width: 24px !important;
  height: 24px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .option-button img {
    width: calc(24 * var(--scaleWidth)) !important;
    height: calc(24 * var(--scaleWidth)) !important;
  }
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .option-button {
    font-size: calc(14 * var(--scaleWidth)) !important;
    border-radius: calc(20 * var(--scaleWidth)) !important;
    padding: calc(8 * var(--scaleWidth)) calc(16 * var(--scaleWidth)) !important;
  }
}
.map-container .option-button:hover {
  background-color: var(--map-sidebarMap-optionButton-hover-background, #f0f0f0);
}
.map-container .option-button.selected {
  background-color: var(--map-sidebarMap-optionButton-selected-background-color, #372194);
  color: var(--map-sidebarMap-optionButton-selected-color, white);
  border-color: var(--map-sidebarMap-optionButton-selected-border-color, #372194);
}
.map-container .dropdown-toggle-custom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border: var(--map-sidebarMap-dropdown-toggle-border, 1px solid #ccc);
  border-radius: var(--map-sidebarMap-dropdown-toggle-borderRadius, 4px);
  background-color: var(--map-sidebarMap-dropdown-toggle-background-color, white);
  color: var(--map-sidebarMap-dropdown-toggle-color, #333);
  padding: var(--map-sidebarMap-dropdown-toggle-padding, 0.375rem 0.75rem);
  font-size: var(--map-sidebarMap-dropdown-toggle-font-size, 14px);
  cursor: pointer;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .dropdown-toggle-custom {
    font-size: calc(14 * var(--scaleWidth));
    padding-top: calc(6 * var(--scaleWidth));
    padding-bottom: calc(6 * var(--scaleWidth));
    padding-left: calc(12 * var(--scaleWidth));
    padding-right: calc(12 * var(--scaleWidth));
    border-radius: calc(4 * var(--scaleWidth));
  }
}
.map-container .dropdown-toggle-custom::after {
  content: "";
  display: inline-block;
  margin-left: 0.5rem;
  vertical-align: middle;
  border-top: 0.4em solid;
  border-right: 0.4em solid transparent;
  border-left: 0.4em solid transparent;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .dropdown-toggle-custom::after {
    margin-left: calc(16 * var(--scaleWidth));
  }
}
.map-container .custom-dropdown-menu {
  width: 100%;
  max-height: var(--map-sidebarMap-dropdownMenu-max-height, 200px);
  overflow-y: auto;
  border: var(--map-sidebarMap-dropdownMenu-border, 1px solid #ccc);
  border-radius: var(--map-sidebarMap-dropdownMenu-borderRadius, 4px);
  background-color: var(--map-sidebarMap-dropdownMenu-background-color, white);
  box-shadow: var(--map-sidebarMap-dropdownMenu-boxShadow, 0 4px 6px rgba(0, 0, 0, 0.1));
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .custom-dropdown-menu {
    border-radius: calc(4 * var(--scaleWidth));
    max-height: calc(200 * var(--scaleWidth));
  }
}
.map-container .custom-dropdown-item {
  display: flex;
  align-items: center;
  padding: var(--map-sidebarMap-dropdownMenu-item-fontSize, 14px);
  font-size: var(--map-sidebarMap-dropdownMenu-item-padding, 0.5rem);
  cursor: pointer;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .custom-dropdown-item {
    padding-top: calc(14 * var(--scaleWidth));
    padding-bottom: calc(14 * var(--scaleWidth));
    padding-left: calc(14 * var(--scaleWidth));
    padding-right: calc(14 * var(--scaleWidth));
    font-size: calc(8 * var(--scaleWidth));
  }
}
.map-container .custom-dropdown-item:hover {
  background-color: var(--map-sidebarMap-dropdownMenu-item-hover-background-color, #f8f9fa);
}
.map-container .custom-select__control {
  min-height: var(--map-sidebarMap-custom-select-control-height, 40px);
  border-radius: var(--map-sidebarMap-custom-select-control-borderRadius, 6px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .custom-select__control {
    border-radius: calc(40 * var(--scaleWidth));
    max-height: calc(6 * var(--scaleWidth));
  }
}
.map-container .custom-select__menu {
  max-height: var(--map-sidebarMap-custom-select-select-menu-maxHeight, 200px);
  overflow-y: auto;
}
.map-container .custom-select .css-t3ipsp-control,
.map-container .custom-select .css-13cymwt-control {
  width: 100%;
  padding: 0;
  box-shadow: 0 0 0;
  border: none;
}
.map-container .custom-select .css-t3ipsp-control .css-1dyz3mf,
.map-container .custom-select .css-13cymwt-control .css-1dyz3mf {
  padding: 0;
}
.map-container .custom-select .css-t3ipsp-control .css-1wy0on6 .css-1u9des2-indicatorSeparator,
.map-container .custom-select .css-t3ipsp-control .css-1wy0on6 .css-1xc3v61-indicatorContainer,
.map-container .custom-select .css-13cymwt-control .css-1wy0on6 .css-1u9des2-indicatorSeparator,
.map-container .custom-select .css-13cymwt-control .css-1wy0on6 .css-1xc3v61-indicatorContainer,
.map-container .custom-select .css-13cymwt-control .css-1wy0on6 .css-15lsz6c-indicatorContainer,
.map-container .custom-select .css-t3ipsp-control .css-1wy0on6 .css-19bb58m::after {
  display: none;
}
.map-container .custom-select .css-t3ipsp-control .css-1wy0on6,
.map-container .custom-select .css-13cymwt-control .css-1wy0on6 {
  align-items: self-start;
}
.map-container .custom-select .css-13cymwt-control .css-hlgwow,
.map-container .custom-select .css-t3ipsp-control .css-hlgwow {
  display: inline-block;
  padding: 0;
}
.map-container .react-colorful {
  width: 100% !important;
}
.map-container .css-1nmdiq5-menu {
  min-width: 277px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .css-1nmdiq5-menu {
    min-width: calc(277 * var(--scaleWidth));
  }
}
.map-container .drop-zone {
  border: var(--drop-zone-border, 2px dashed #bbb);
  border-radius: var(--drop-zone-borderRadius, 10px);
  padding: var(--drop-zone-padding, 30px);
  text-align: center;
  cursor: pointer;
  background-color: var(--drop-zone-background-color, #f8f9fa);
  transition: background-color 0.2s ease-in-out;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .drop-zone {
    padding-top: calc(30 * var(--scaleWidth));
    padding-bottom: calc(30 * var(--scaleWidth));
    padding-left: calc(30 * var(--scaleWidth));
    padding-right: calc(30 * var(--scaleWidth));
    border-radius: calc(10 * var(--scaleWidth));
  }
}
.map-container .drop-zone p {
  color: var(--drop-zone-text-color, #000000);
}
.map-container .drop-zone:hover {
  background-color: var(--drop-zone-hover-background-color, #e9ecef);
}
.map-container .legend-section {
  background: var(--legend-section-background, #d3e4ff);
  color: var(--legend-section-color, #475467);
  font-weight: bold;
  font-size: var(--legend-section-fontSize, 14px);
  padding: var(--legend-section-padding, 10px 15px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .legend-section {
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
    font-size: calc(16 * var(--scaleWidth));
  }
}
.map-container .legend-dropdown-click {
  background: var(--legend-dropdown-click-background, #ffffff) !important;
}
.map-container .legend-dropdown-click .legend-label {
  color: var(--legend-section-label-color, #000000);
}
.map-container .legend-dropdown-click .legend-label img {
  filter: var(--legend-section-icon-color, inherit);
}
.map-container .legend-dropdown-click .legend-box.border.rounded {
  border: none !important;
}
.map-container .legend-line {
  width: var(--legend-line-width, 30px);
  height: var(--legend-line-height, 2px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .legend-line {
    width: calc(30 * var(--scaleWidth));
    height: calc(2 * var(--scaleWidth));
  }
}
.map-container .solid-line {
  background-color: var(--legend-line-solid-color, #000000);
}
.map-container .dashed-line {
  border-top: 2px dashed var(--legend-line-dashed-color, #000000);
  width: var(--legend-line-width, 30px);
  height: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .dashed-line {
    width: calc(30 * var(--scaleWidth));
  }
}
.map-container .dotted-line {
  border-top: 2px dotted var(--legend-line-dotted-color, #000000);
  width: var(--legend-line-width, 30px);
  height: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .dotted-line {
    width: calc(30 * var(--scaleWidth));
  }
}
.map-container .legend-icon {
  width: var(--legend-line-icon-width, 20px);
  height: var(--legend-line-icon-height, 20px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .legend-icon {
    width: calc(20 * var(--scaleWidth));
    height: calc(20 * var(--scaleWidth));
  }
}
.map-container .kmz-dropdown .dropdown-menu {
  width: var(--kmz-dropdown-width, 360px);
  max-width: inherit;
  top: 50px !important;
  overflow: inherit;
  transform: none !important;
  left: auto !important;
  right: 0 !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .kmz-dropdown .dropdown-menu {
    width: calc(360 * var(--scaleWidth));
    top: calc(50 * var(--scaleWidth));
  }
}
.map-container .dropdown-menu .dropdown-inner {
  overflow: auto;
  max-height: var(--kmz-dropdown-height, 420px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .dropdown-menu .dropdown-inner {
    max-height: calc(420 * var(--scaleWidth));
  }
}
.map-container .kmz-dropdown h4 {
  font-size: var(--kmz-dropdown-heading-fontSize, 14px);
  font-weight: var(--kmz-dropdown-heading-fontWeight, 600);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .kmz-dropdown h4 {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.map-container .kmz-dropdown .colorPicker-box {
  left: 45px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .kmz-dropdown .colorPicker-box {
    left: calc(45 * var(--scaleWidth));
  }
}
.map-container .dropdown-menu {
  box-shadow: var(--dropdown-menu-boxShadow, 0 0 10px rgba(0, 0, 0, 0.2));
  border-radius: var(--dropdown-menu-bordeRadius, 8px);
  background: var(--dropdownGIS-menu-background-color, #fff);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .dropdown-menu {
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.map-container .dropdown-menu .legend-label {
  color: var(--dropdown-menu-legend-labe-color, #000000);
}
.map-container .dropdown-menu:before {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  transform: rotate(-45deg);
  position: absolute;
  right: 20px;
  top: -8px;
  background: var(--dropdownGIS-menu-background-color, #fff);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .dropdown-menu:before {
    width: calc(15 * var(--scaleWidth));
    height: calc(15 * var(--scaleWidth));
    right: calc(20 * var(--scaleWidth));
    top: calc(-8 * var(--scaleWidth));
  }
}
.map-container .legend-dropdown {
  position: absolute;
  bottom: 78px;
  right: 9px;
  z-index: 1;
}
.map-container .legend-dropdown .dropdown-menu:before {
  background: var(--legend-section-background, #d3e4ff);
  display: none;
}
.map-container .kmz-dropdown {
  border-color: var(--kmz-dropdown-border-color, #545f71);
  position: relative;
}
.map-container .legend-dropdown .dropdown-menu.show {
  padding: 0;
  border-radius: var(--legend-dropdown-borderRadius, 8px);
  width: var(--legend-dropdown-width, 310px);
  max-width: inherit;
  top: inherit;
  transform: none;
  left: auto;
  right: 36px;
  bottom: 0px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .legend-dropdown .dropdown-menu.show {
    width: calc(310 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.map-container .legend-dropdown .dropdown-menu {
  overflow: inherit;
}
.map-container .share-btn {
  border: 0;
  color: var(--share-button-color, #fff);
  padding: 0;
  vertical-align: top;
  border-radius: var(--share-button-borderRadius, 4px);
  font-size: var(--share-button-fontSize, 14px);
  line-height: var(--share-button-fontSize, 14px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .share-btn {
    border-radius: calc(4 * var(--scaleWidth));
    line-height: calc(21 * var(--scaleWidth));
    border-radius: calc(4 * var(--scaleWidth));
  }
  .map-container .share-btn svg {
    width: calc(18 * var(--scaleWidth));
    height: calc(18 * var(--scaleWidth));
  }
}
.map-container .custom-modal {
  background: var(--custom-modal-background, rgba(0, 0, 0, 0.4));
}
.map-container #kmzModal .modal-dialog {
  max-width: var(--kmzModa-width, 650px);
}
.map-container .search-wrapper {
  display: inline-block;
  position: relative;
  margin-bottom: 0 !important;
  vertical-align: top;
}
.map-container .search-container {
  display: flex;
  align-items: center;
  background: var(--search-container-background, #fff);
  border: var(--search-container-border, 1px solid #ccc);
  padding: var(--search-container-padding, 4px);
  border-radius: var(--search-container-borderRadius, 4px);
  transition: width 0.3s ease;
  width: var(--search-container-width, 36px);
  overflow: hidden;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .search-container {
    width: calc(36 * var(--scaleWidth));
    padding-top: calc(4 * var(--scaleWidth));
    padding-bottom: calc(4 * var(--scaleWidth));
    padding-left: calc(4 * var(--scaleWidth));
    padding-right: calc(4 * var(--scaleWidth));
  }
}
.map-container .search-input {
  border: none;
  outline: none;
  width: 0;
  opacity: 0;
  transition: width 0.3s ease, opacity 0.3s ease;
  background: var(--search-container-background, #fff);
  color: var(--search-container-color, #000000);
}
.map-container .search-input::placeholder {
  color: var(--search-container-color, #000000);
  font-size: 1.2em;
  font-style: italic;
  opacity: 0.5;
}
.map-container .search-icon {
  font-size: var(--search-container-search-icon-fontSize, 16px);
  cursor: pointer;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .search-icon {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.map-container .search-wrapper.hover .search-container {
  width: var(--search-container-search-maxWidth, 200px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .search-wrapper.hover .search-container {
    width: calc(200 * var(--scaleWidth));
  }
}
.map-container .search-wrapper.hover .search-input {
  width: 100%;
  opacity: 1;
}
.map-container div#employeeType.p-multiselect {
  position: relative;
}
.map-container #employeeType .p-multiselect-hidden-select,
.map-container #employeeType .p-multiselect-hidden-select + .p-hidden-accessible {
  display: none;
}
.map-container .p-multiselect-trigger {
  position: absolute;
  top: 10px;
  right: 20px;
  width: 20px;
  height: 20px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .p-multiselect-trigger {
    top: calc(10 * var(--scaleWidth));
    right: calc(20 * var(--scaleWidth));
    width: calc(20 * var(--scaleWidth));
    height: calc(20 * var(--scaleWidth));
  }
}
.map-container .p-multiselect-trigger span.p-multiselect-trigger-icon {
  border-top: 2px solid var(--multiselect-trigger-icon-border-color, #333333);
  border-right: 2px solid var(--multiselect-trigger-icon-border-color, #333333);
  width: var(--multiselect-trigger-icon-dimension, 12px);
  height: var(--multiselect-trigger-icon-dimension, 12px);
  display: inline-block;
  transform: rotate(135deg);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .p-multiselect-trigger span.p-multiselect-trigger-icon {
    width: calc(12 * var(--scaleWidth));
    height: calc(12 * var(--scaleWidth));
  }
}
.map-container .p-multiselect-panel {
  border: var(--multiselect-panel-border, 1px solid #c8c8c8);
  position: absolute;
  box-shadow: var(--multiselect-panel-boxShadow, 0 3px 6px 0 rgba(0, 0, 0, 0.16));
  background: var(--multiselect-panel-background, #fff);
  padding: var(--multiselect-panel-padding, 10px);
  border-radius: var(--multiselect-panel-borderRadius, 8px);
  z-index: 1;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .p-multiselect-panel {
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.map-container .p-multiselect-panel button.p-multiselect-close {
  background: none;
  border: 0;
}
.map-container .p-multiselect-panel .p-multiselect-filter-container {
  flex: 1 1 auto !important;
}
.map-container .p-multiselect-panel .p-multiselect-filter-container input {
  width: 100%;
  border: var(--multiselect-panel-input-border, 1px solid #d0d5dd);
  padding: var(--multiselect-panel-input-padding, 8px);
  border-radius: var(--multiselect-panel-input-borderRadius, 6px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .p-multiselect-panel .p-multiselect-filter-container input {
    padding-top: calc(8 * var(--scaleWidth));
    padding-bottom: calc(8 * var(--scaleWidth));
    padding-left: calc(8 * var(--scaleWidth));
    padding-right: calc(8 * var(--scaleWidth));
    border-radius: calc(6 * var(--scaleWidth));
  }
}
.map-container .shareKmzModal.theme-modal .modal-dialog .modal-content,
.map-container .shareKmzModal.theme-modal .modal-dialog .modal-content .modal-body {
  overflow: inherit !important;
}
.map-container .p-multiselect-panel button.p-multiselect-close span.p-multiselect-close-icon {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABwSURBVHgBnZLRDYAgDEQvTsAIjOCGdAPdQDdzBEfA8mEkpKUXX3IkEB6BC8BHBkfqJ4fmIuSiuTXruyCaGsjF2zOTC4KDLTmULHljpVF2pcURK37Qv2kHeVWrCInkWXuuzFRuyie4ygXDl2skcOQ2PGlSMxGS5ZfrAAAAAElFTkSuQmCC) 0 0 no-repeat;
  width: var(--multiselect-panel-close-dimension, 14px);
  height: var(--multiselect-panel-close-dimension, 14px);
  display: inline-block;
  background-size: contain;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .p-multiselect-panel button.p-multiselect-close span.p-multiselect-close-icon {
    width: calc(14 * var(--scaleWidth));
    height: calc(14 * var(--scaleWidth));
    background-size: calc(14 * var(--scaleWidth));
  }
}
.map-container #employeeType .p-multiselect-panel .p-multiselect-header {
  display: flex;
  align-items: center;
}
.map-container .multiselect-open {
  z-index: 1051 !important;
  background: var(--multiselect-open-background, #fff);
  padding: var(--multiselect-open-padding, 15px);
  border: var(--multiselect-open-border, 1px solid #d1d1d1);
  border-radius: var(--multiselect-open-borderRadius, 8px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .multiselect-open {
    padding-top: calc(15 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.map-container .p-multiselect-header,
.map-container .p-multiselect-item {
  gap: 10px;
  padding: 6px 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .p-multiselect-header,
  .map-container .p-multiselect-item {
    gap: calc(10 * var(--scaleWidth));
    padding-top: calc(6 * var(--scaleWidth));
    padding-bottom: calc(6 * var(--scaleWidth));
  }
}
.map-container .p-multiselect-filter-container svg.p-icon {
  margin-left: -25px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .p-multiselect-filter-container svg.p-icon {
    margin-left: calc(-25 * var(--scaleWidth));
  }
}
.map-container .p-multiselect-header input.p-multiselect-filter {
  font-size: var(--font-size-normal);
  color: var(--input-text-color);
  border: 1px solid var(--input-checkbox-border-color);
  border-radius: 8px;
  padding: 10px 15px;
  line-height: 140%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .p-multiselect-header input.p-multiselect-filter {
    font-size: calc(16 * var(--scaleWidth));
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.map-container span.p-checkbox-icon {
  border: 1px solid var(--multiselect-checkbox-icon-border-color, #949496);
  width: var(--multiselect-checkbox-icon-dimension, 20px);
  height: var(--multiselect-checkbox-icon-dimension, 20px);
  display: inline-block;
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container span.p-checkbox-icon {
    width: calc(20 * var(--scaleWidth));
    height: calc(20 * var(--scaleWidth));
  }
}
.map-container span.p-checkbox-icon.pi-check:after {
  content: "";
  border-right: 2px solid var(--multiselect-checkbox-icon-border-color, #949496);
  border-bottom: 2px solid var(--multiselect-checkbox-icon-border-color, #949496);
  width: 8px;
  height: 13px;
  display: block;
  transform: rotate(45deg);
  left: 5px;
  top: 1px;
  position: absolute;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container span.p-checkbox-icon.pi-check:after {
    width: calc(8 * var(--scaleWidth));
    height: calc(13 * var(--scaleWidth));
    left: calc(5 * var(--scaleWidth));
    top: calc(1 * var(--scaleWidth));
  }
}
.map-container .p-checkbox .p-hidden-accessible {
  width: 1px;
  height: 1px;
  overflow: hidden;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .p-checkbox .p-hidden-accessible {
    width: calc(1 * var(--scaleWidth));
    height: calc(1 * var(--scaleWidth));
  }
}
.map-container .p-multiselect-items-wrapper li.p-multiselect-item {
  display: flex;
  align-items: center;
}
.map-container .p-multiselect-panel .p-multiselect-items-wrapper {
  overflow: auto;
}
.map-container .data-centre-dropdown {
  width: var(--data-centre-dropdown-width, 330px);
  max-width: var(--data-centre-dropdown-width, 330px);
  background: var(--data-centre-dropdown-background, #d3e4ff);
  overflow: inherit;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .data-centre-dropdown {
    width: calc(330 * var(--scaleWidth));
    max-width: calc(330 * var(--scaleWidth));
  }
}
.map-container .data-centre-dropdown .legend-label {
  color: var(--data-centre-dropdown-legend-label-color, #000000);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .data-centre-dropdown .legend-label {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.map-container .datacenter-label {
  width: 60px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .datacenter-label {
    width: calc(60 * var(--scaleWidth));
  }
}
.map-container .data-centre-dropdown:before {
  background: var(--data-centre-dropdown-background, #d3e4ff);
  border-color: var(--data-centre-dropdown-border-color, rgba(0, 0, 0, 0.15));
  right: 80%;
}
.map-container .gis-label {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .gis-label {
    gap: calc(10 * var(--scaleWidth));
  }
}
.map-container .element-gis {
  position: relative;
}
.map-container .element-gis .button-group {
  position: absolute;
  background: var(--gis-button-group-background, #fff);
  top: 100%;
  padding: var(--gis-button-group-padding, 15px);
  border-radius: var(--gis-button-group-borderRadius, 8px);
  z-index: 100;
  width: var(--gis-button-group-width, 350px);
  box-shadow: var(--gis-button-group-boxShadow, 0 0 10px rgba(0, 0, 0, 0.2));
  right: 73%;
  margin: 5px 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .element-gis .button-group {
    width: calc(350 * var(--scaleWidth));
    padding-top: calc(15 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
    margin-top: calc(5 * var(--scaleWidth));
    margin-bottom: calc(5 * var(--scaleWidth));
  }
}
.map-container .element-gis .element-options-gis button {
  min-width: 47%;
  text-align: left;
}
.map-container .element-gis .label-btn {
  background: var(--gis-button-group-button-label-background, #372194);
  color: var(--gis-button-group-button-label-color, #fff);
  padding: var(--gis-button-group-button-label-padding, 8px 12px);
  border-radius: var(--gis-button-group-button-label-borderRadius, 4px);
  cursor: pointer;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .element-gis .label-btn {
    padding-top: calc(8 * var(--scaleWidth));
    padding-bottom: calc(8 * var(--scaleWidth));
    padding-left: calc(12 * var(--scaleWidth));
    padding-right: calc(12 * var(--scaleWidth));
    border-radius: calc(4 * var(--scaleWidth));
    font-size: calc(16 * var(--scaleWidth));
  }
}
.map-container .gis-label .label-btn span {
  color: var(--gis-button-group-button-label-span-color, #555);
}
.map-container .element-gis .label-btn span {
  display: none;
}
.map-container .fullscreen-btn {
  position: absolute;
  bottom: 42px;
  right: 9px;
  z-index: 10;
  background: var(--fullscreen-button-background, white);
  border: none;
  padding: var(--fullscreen-button-padding, 6px 10px);
  font-size: var(--fullscreen-button-fontSize, 18px);
  cursor: pointer;
  width: var(--fullscreen-button-width, 30px);
}
.map-container :fullscreen .map-container {
  height: 100vh;
}
.map-container .map-home-btn {
  position: absolute;
  bottom: 6px;
  right: 9px;
  z-index: 10;
  background: var(--map-home-button-background, #ffffff);
  border: none;
  padding: var(--map-home-button-padding, 6px 10px);
  font-size: var(--map-home-button-fontSize, 18px);
  cursor: pointer;
  width: var(--map-home-button-width, 30px);
}
.map-container .marker-hide {
  display: none;
}
.map-container .route-icon-display {
  width: var(--route-icon-dimension, 10px);
  height: var(--route-icon-dimension, 10px);
  border-radius: var(--route-icon-borderRadius, 10px);
  margin-right: 2px;
  margin-top: 4px;
  display: inline-block;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .route-icon-display {
    width: calc(10 * var(--scaleWidth));
    height: calc(10 * var(--scaleWidth));
    border-radius: calc(10 * var(--scaleWidth));
    margin-right: calc(2 * var(--scaleWidth));
    margin-top: calc(4 * var(--scaleWidth));
  }
}
.map-container .mapbox-dialog .mapbox-dialog-body .routes-details li .route-box:before {
  display: none !important;
}
.map-container .route-details {
  justify-content: space-between;
}
.map-container .route-details:after {
  display: none;
}
.map-container .route-popup {
  min-width: 520px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .route-popup {
    min-width: calc(520 * var(--scaleWidth));
  }
}
.map-container .route-popup .mapbox-dialog-body {
  max-width: 520px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .route-popup .mapbox-dialog-body {
    max-width: calc(520 * var(--scaleWidth)) !important;
  }
}
.map-container .map-container-standard {
  height: calc(100vh - 135px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .map-container-standard {
    height: calc(100vh - 8.4375vw);
  }
}
.map-container .loader-present:before {
  content: "";
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 15;
}
.map-container .picker-wrapper {
  background: var(--picker-wrapper-background, white);
  border-radius: var(--picker-wrapper-borderRadius, 10px);
  width: var(--picker-wrapper-width, 238px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container .picker-wrapper {
    width: calc(238 * var(--scaleWidth));
    border-radius: calc(10 * var(--scaleWidth));
  }
}
.map-container span.arrow-service {
  border-top: 2px solid var(--service-arrow-color, #555555);
  border-right: 2px solid var(--service-arrow-color, #555555);
  transform: rotate(45deg);
  width: var(--service-arrow-dimension, 10px);
  height: var(--service-arrow-dimension, 10px);
  margin-right: 8px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container span.arrow-service {
    width: calc(10 * var(--scaleWidth));
    height: calc(10 * var(--scaleWidth));
    margin-right: calc(8 * var(--scaleWidth));
    border-top: calc(2 * var(--scaleWidth)) solid var(--service-arrow-color, #555555);
    border-right: calc(2 * var(--scaleWidth)) solid var(--service-arrow-color, #555555);
  }
}
.map-container span.arrow-service.expanded {
  transform: rotate(135deg);
}
.map-container .mapboxgl-ctrl-attrib {
  display: none !important;
}
.map-container .servicemapcard-header {
  position: relative !important;
}

.map-container-standard .card-header .right-controls {
  margin-left: auto;
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container-standard .card-header .right-controls {
    gap: calc(10 * var(--scaleWidth));
  }
}
.map-container-standard .card-header .right-controls .btn-primary {
  background-color: var(--map-primary-button-color, #372194);
  border-color: var(--map-primary-button-color, #372194);
  color: var(--map-primary-button-text-color, #ffffff);
  display: flex;
  align-items: center;
  gap: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container-standard .card-header .right-controls .btn-primary {
    padding: calc(6 * var(--scaleWidth)) calc(12 * var(--scaleWidth));
    font-size: calc(16 * var(--scaleWidth));
    border-radius: calc(4 * var(--scaleWidth));
  }
  .map-container-standard .card-header .right-controls .btn-primary svg {
    width: calc(24 * var(--scaleWidth));
    height: calc(24 * var(--scaleWidth));
  }
}

.mapbox-dashboard-card .map-container {
  height: 100%;
}
.mapbox-dashboard-card .map-container .col-md-12 {
  height: 100%;
}
.mapbox-dashboard-card .map-container .col-md-12 .map-container-standard {
  height: 100% !important;
}

.service-map-card-col .map-container {
  height: 100%;
}
.service-map-card-col .map-container #dashboard-map {
  height: calc(100% - 43px);
  min-height: 475px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-map-card-col .map-container #dashboard-map {
    height: calc(100% - 2.6875vw);
    min-height: calc(475 * var(--scaleWidth));
  }
}
@media (max-width: 1199px) {
  .service-map-card-col .map-container #dashboard-map {
    min-height: 100%;
  }
}
.service-map-card-col .map-container .map-container-standard {
  min-height: 100%;
  height: 100%;
  padding: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-map-card-col .map-container .map-container-standard {
    padding-top: calc(15 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
  }
}
.service-map-card-col .map-container .map-container-standard .card-header {
  margin-bottom: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-map-card-col .map-container .map-container-standard .card-header {
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
@media (max-width: 1199px) {
  .service-map-card-col .map-container .map-container-standard {
    min-height: 500px;
  }
}
.service-map-card-col .card .card-body .mapboxgl-map {
  position: absolute;
  height: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
.service-map-card-col .card .card-body .mapboxgl-map .mapboxgl-canvas-container {
  height: 100%;
  position: relative;
}
.service-map-card-col .card .card-body .mapboxgl-map .mapboxgl-canvas-container .mapboxgl-canvas {
  width: 100% !important;
}

.theme-dark .mapboxgl-popup-close-button,
.theme-dark .map-container .colorPicker-close-btn {
  color: #FFFFFF;
}

.map-container-standard input[type=checkbox] {
  accent-color: var(--map-primary-checkbox-color, #372194);
}

svg.download-icon-rotate {
  transform: rotate(180deg);
}

.map-container .layer-label {
  color: var(--map-sidebarMap-layerGroupParent-label-color, #000000);
}

.map-container .layer-label + .ml-auto {
  display: inline-flex;
  align-items: center;
}

.mapbox-dialog,
.mapbox-dialog * {
  font-family: "Open Sans", sans-serif !important;
}

.mapboxgl-popup {
  z-index: 3 !important;
}

.mapboxgl-popup .mapboxgl-popup-content {
  box-shadow: 0px 0px 10px #707070;
}

.p-multiselect-panel:not(.multiselect-open) {
  display: none;
}

.legend-btn {
  width: 32px;
  background-color: #fff;
  padding: 5px;
  border: none;
}

.mapboxgl-style-switcher {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTQuODQ5cHgiIGhlaWdodD0iNTQuODQ5cHgiIHZpZXdCb3g9IjAgMCA1NC44NDkgNTQuODQ5IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NC44NDkgNTQuODQ5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PGc+PGc+PHBhdGggZD0iTTU0LjQ5NywzOS42MTRsLTEwLjM2My00LjQ5bC0xNC45MTcsNS45NjhjLTAuNTM3LDAuMjE0LTEuMTY1LDAuMzE5LTEuNzkzLDAuMzE5Yy0wLjYyNywwLTEuMjU0LTAuMTA0LTEuNzktMC4zMThsLTE0LjkyMS01Ljk2OEwwLjM1MSwzOS42MTRjLTAuNDcyLDAuMjAzLTAuNDY3LDAuNTI0LDAuMDEsMC43MTZMMjYuNTYsNTAuODFjMC40NzcsMC4xOTEsMS4yNTEsMC4xOTEsMS43MjksMEw1NC40ODgsNDAuMzNDNTQuOTY0LDQwLjEzOSw1NC45NjksMzkuODE3LDU0LjQ5NywzOS42MTR6Ii8+PHBhdGggZD0iTTU0LjQ5NywyNy41MTJsLTEwLjM2NC00LjQ5MWwtMTQuOTE2LDUuOTY2Yy0wLjUzNiwwLjIxNS0xLjE2NSwwLjMyMS0xLjc5MiwwLjMyMWMtMC42MjgsMC0xLjI1Ni0wLjEwNi0xLjc5My0wLjMyMWwtMTQuOTE4LTUuOTY2TDAuMzUxLDI3LjUxMmMtMC40NzIsMC4yMDMtMC40NjcsMC41MjMsMC4wMSwwLjcxNkwyNi41NiwzOC43MDZjMC40NzcsMC4xOSwxLjI1MSwwLjE5LDEuNzI5LDBsMjYuMTk5LTEwLjQ3OUM1NC45NjQsMjguMDM2LDU0Ljk2OSwyNy43MTYsNTQuNDk3LDI3LjUxMnoiLz48cGF0aCBkPSJNMC4zNjEsMTYuMTI1bDEzLjY2Miw1LjQ2NWwxMi41MzcsNS4wMTVjMC40NzcsMC4xOTEsMS4yNTEsMC4xOTEsMS43MjksMGwxMi41NDEtNS4wMTZsMTMuNjU4LTUuNDYzYzAuNDc3LTAuMTkxLDAuNDgtMC41MTEsMC4wMS0wLjcxNkwyOC4yNzcsNC4wNDhjLTAuNDcxLTAuMjA0LTEuMjM2LTAuMjA0LTEuNzA4LDBMMC4zNTEsMTUuNDFDLTAuMTIxLDE1LjYxNC0wLjExNiwxNS45MzUsMC4zNjEsMTYuMTI1eiIvPjwvZz48L2c+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjwvc3ZnPg==);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70%;
}

.mapboxgl-ctrl-group .mapboxgl-style-list button.active {
  font-weight: bold;
  background: #ccc;
}

.mapboxgl-ctrl-group .mapboxgl-style-list button {
  min-width: 75px;
}

.mapboxgl-style-switcher {
  display: block;
}

.mapboxgl-style-list {
  display: none;
}

.route-points .noRecordFound {
  background: #fff;
  position: relative;
  z-index: 1;
}

@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container-standard .card-header .right-controls .form-group-inline .px-3.pt-2.pb-1 {
    padding: calc(8 * var(--scaleWidth)) calc(16 * var(--scaleWidth)) calc(4 * var(--scaleWidth)) calc(16 * var(--scaleWidth)) !important;
  }
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container-standard .card-header .right-controls .form-group-inline .px-3.pt-2.pb-1 .legend-label .solid-line {
    height: calc(5 * var(--scaleWidth));
  }
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container-standard .card-header .right-controls .form-group-inline .px-3.pt-2.pb-1 .legend-label {
    font-size: calc(16 * var(--scaleWidth));
  }
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container-standard .card-header .right-controls .form-group-inline .px-3.pt-2.pb-1 .legend-label .mb-2 {
    margin-bottom: calc(8 * var(--scaleWidth)) !important;
  }
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container-standard .card-header .right-controls .form-group-inline .px-3.pt-2.pb-1 .legend-label .mt-2 {
    margin-top: calc(8 * var(--scaleWidth)) !important;
  }
}

.map-container-standard .dropdown-menu {
  padding: 0 !important;
  background: var(--legend-dropdown-click-background, #ffffff) !important;
}
.map-container-standard .dropdown-menu::before {
  background: var(--legend-section-background, #d3e4ff) !important;
}
.map-container-standard .dropdown-menu .dropdown-inner {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  padding: 0 !important;
  border-radius: 4px;
  max-height: var(--kmz-dropdown-height, 420px);
  overflow: auto !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container-standard .dropdown-menu .dropdown-inner {
    max-height: calc(420 * var(--scaleWidth));
    padding: 0 calc(10 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
  }
}
.map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
.map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap .alert {
  margin: 0 !important;
}
.map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap .form-group {
  margin-bottom: 6px;
}
.map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap .form-group:first-child {
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap .form-group {
    margin-bottom: calc(6 * var(--scaleWidth));
  }
}
.map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap .form-group:last-child {
  margin-bottom: 0;
}
.map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap .form-group .custom-select {
  margin: 0 !important;
}
.map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap:first-child .legend-section {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap .legend-section {
  background: var(--legend-section-background, #d3e4ff) !important;
  padding: 10px !important;
  font-size: 16px;
  text-transform: capitalize;
  margin-bottom: 10px;
  line-height: 110%;
  font-weight: 600;
  border-bottom: 1px solid #c1c1c1;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap .legend-section {
    padding: calc(10 * var(--scaleWidth));
    font-size: calc(16 * var(--scaleWidth));
  }
}
.map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap .legend-section-content {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  padding: 0 10px;
  padding-bottom: 15px;
}
.map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap .legend-section-content ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap .legend-section-content ul li {
  padding: 0;
  margin: 0;
  list-style: none;
  float: left;
  width: 100%;
}
.map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap .legend-section-content ul li.header-title {
  font-size: 14px;
  line-height: 100%;
  text-transform: capitalize;
  color: var(--dropdown-menu-legend-labe-color, #000000);
  margin-bottom: 15px;
  font-weight: 600;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap .legend-section-content ul li.header-title {
    font-size: calc(16 * var(--scaleWidth));
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
.map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap .legend-section-content ul li.header-title:last-child {
  margin-bottom: 0;
}
.map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap .legend-section-content ul li.header-title .sub-listing-item {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  list-style: none;
  padding-top: 10px;
  border-top: 1px solid #c1c1c1;
  margin-top: 10px;
  font-weight: 600;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap .legend-section-content ul li.header-title .sub-listing-item {
    padding-top: calc(10 * var(--scaleWidth));
    margin-top: calc(10 * var(--scaleWidth));
  }
}
.map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap .legend-section-content ul li.header-title .sub-listing-item li {
  display: flex;
  align-items: center;
  gap: 0px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 400;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap .legend-section-content ul li.header-title .sub-listing-item li {
    margin-bottom: calc(10 * var(--scaleWidth));
    font-size: calc(13 * var(--scaleWidth));
  }
}
.map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap .legend-section-content ul li.header-title .sub-listing-item li:last-child {
  margin-bottom: 0;
}
.map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap .legend-section-content ul li.elements-item {
  font-size: 14px;
  line-height: 100%;
  text-transform: capitalize;
  color: var(--dropdown-menu-legend-labe-color, #000000);
  margin-bottom: 15px;
  font-weight: 600;
}
.map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap .legend-section-content ul li.elements-item:last-child {
  margin-bottom: 0 !important;
}
.map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap .legend-section-content ul li.elements-item img {
  width: 24px !important;
  height: 24px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap .legend-section-content ul li.elements-item img {
    width: calc(24 * var(--scaleWidth)) !important;
    height: calc(24 * var(--scaleWidth)) !important;
  }
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .map-container-standard .dropdown-menu .dropdown-inner .legend-section-wrap .legend-section-content ul li.elements-item {
    margin-bottom: calc(14 * var(--scaleWidth));
    font-size: calc(13 * var(--scaleWidth));
  }
}

.data-centre-dropdown .form-group:first-child {
  margin-top: -8px;
}

.kmz-button {
  border: 0 !important;
  line-height: 0 !important;
  outline: 0 !important;
  padding: 0 !important;
  background: no-repeat !important;
}
.kmz-button img {
  height: 37.33px;
  width: auto !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .kmz-button img {
    height: calc(37.33 * var(--scaleWidth));
  }
}

.clear-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 37.33px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .clear-all-btn {
    height: calc(37.33 * var(--scaleWidth));
  }
}

.map-container-standard input[type=checkbox] {
  width: 16px !important;
  min-width: 16px;
  height: 16px !important;
}

.theme-dark .kmz-button img {
  filter: brightness(0) invert(1);
}

.hamburger {
  cursor: pointer;
}

.bar {
  display: block;
  background-color: var(--color-black-background);
  width: 24px;
  /* The following 2 properties are essential in creating the "X" when the hamburger is clicked. If you change just 1 of the 2, then you need to find the proper combination for the other one */
  height: 2px;
  margin: 6px auto;
  /*    -webkit-transition: all 300ms ease;  */
  transition: all 300ms ease-in-out;
}

.hamburger.active .bar:nth-child(2) {
  opacity: 0;
}

.hamburger.active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (min-width: 1025px) {
  .header > .container > .rightbar > ul > li:last-child {
    display: none;
  }
}
@media (max-width: 1024px) {
  .left-sidebar {
    width: 270px;
    left: -100%;
    transition: 750ms;
    background: var(--color-white);
    overflow: auto;
    position: fixed;
    height: calc(100% - 70px);
  }
  .left-sidebar.active {
    left: 0;
  }
  .left-sidebar .nav-link span {
    opacity: 1;
    visibility: visible;
  }
  #main-wrapper {
    padding-left: 0 !important;
    padding-top: 70px !important;
  }
  .page-wrapper {
    padding-top: 20px !important;
  }
  .mode-switch {
    margin: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: -1;
  }
  .user-profile-header .card .inner-card {
    flex-wrap: wrap;
    padding: 30px 20px 200px 20px;
  }
  .user-profile-header .card .profile-details {
    width: auto;
  }
}
body {
  background-color: var(--body-background-color-mode);
}

.mb-15 {
  margin-bottom: 10px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mb-15 {
    margin-bottom: calc(10 * var(--scaleWidth)) !important;
  }
}
@media (max-width: 1024px) {
  .mb-15 {
    margin-bottom: 10px !important;
  }
}

.mb-25 {
  margin-bottom: 15px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mb-25 {
    margin-bottom: calc(15 * var(--scaleWidth)) !important;
  }
}
@media (max-width: 1024px) {
  .mb-25 {
    margin-bottom: 15px !important;
  }
}

.mb-30 {
  margin-bottom: 15px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mb-30 {
    margin-bottom: calc(15 * var(--scaleWidth)) !important;
  }
}
@media (max-width: 1199px) {
  .mb-30 {
    margin-bottom: 15px !important;
  }
}

.gap-25 {
  gap: 15px 0 !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .gap-25 {
    gap: calc(15 * var(--scaleWidth)) 0 !important;
  }
}
@media (max-width: 1024px) {
  .gap-25 {
    gap: 15px 0 !important;
  }
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--overlay-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  z-index: 1040;
}
.overlay.active {
  visibility: visible;
  opacity: 1;
}
.overlay.sidebar-show {
  visibility: visible;
  opacity: 1;
  z-index: 1090;
}

.mountDailog .header,
.mountDailog .left-sidebar {
  z-index: 1010 !important;
}

#main-wrapper {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  padding: 0;
  margin: 0;
  min-height: 100vh;
  position: relative;
  padding: 30px 0 0 0;
  padding-top: 110px;
}
@media (max-width: 1024px) {
  #main-wrapper {
    padding-left: 0;
    padding-top: 20px;
  }
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #main-wrapper {
    padding-left: 0;
    padding-top: calc(110 * var(--scaleWidth));
  }
}
#main-wrapper .header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}

.page-wrapper {
  padding: 0 10px;
}
@media (max-width: 1024px) {
  .page-wrapper {
    padding: 0 15px;
  }
}
.page-wrapper .container {
  padding: 0;
  max-width: 100%;
}
.page-wrapper .col,
.page-wrapper .col-1,
.page-wrapper .col-10,
.page-wrapper .col-11,
.page-wrapper .col-12,
.page-wrapper .col-2,
.page-wrapper .col-3,
.page-wrapper .col-4,
.page-wrapper .col-5,
.page-wrapper .col-6,
.page-wrapper .col-7,
.page-wrapper .col-8,
.page-wrapper .col-9,
.page-wrapper .col-auto,
.page-wrapper .col-lg,
.page-wrapper .col-lg-1,
.page-wrapper .col-lg-10,
.page-wrapper .col-lg-11,
.page-wrapper .col-lg-12,
.page-wrapper .col-lg-2,
.page-wrapper .col-lg-3,
.page-wrapper .col-lg-4,
.page-wrapper .col-lg-5,
.page-wrapper .col-lg-6,
.page-wrapper .col-lg-7,
.page-wrapper .col-lg-8,
.page-wrapper .col-lg-9,
.page-wrapper .col-lg-auto,
.page-wrapper .col-md,
.page-wrapper .col-md-1,
.page-wrapper .col-md-10,
.page-wrapper .col-md-11,
.page-wrapper .col-md-12,
.page-wrapper .col-md-2,
.page-wrapper .col-md-3,
.page-wrapper .col-md-4,
.page-wrapper .col-md-5,
.page-wrapper .col-md-6,
.page-wrapper .col-md-7,
.page-wrapper .col-md-8,
.page-wrapper .col-md-9,
.page-wrapper .col-md-auto,
.page-wrapper .col-sm,
.page-wrapper .col-sm-1,
.page-wrapper .col-sm-10,
.page-wrapper .col-sm-11,
.page-wrapper .col-sm-12,
.page-wrapper .col-sm-2,
.page-wrapper .col-sm-3,
.page-wrapper .col-sm-4,
.page-wrapper .col-sm-5,
.page-wrapper .col-sm-6,
.page-wrapper .col-sm-7,
.page-wrapper .col-sm-8,
.page-wrapper .col-sm-9,
.page-wrapper .col-sm-auto,
.page-wrapper .col-xl,
.page-wrapper .col-xl-1,
.page-wrapper .col-xl-10,
.page-wrapper .col-xl-11,
.page-wrapper .col-xl-12,
.page-wrapper .col-xl-2,
.page-wrapper .col-xl-3,
.page-wrapper .col-xl-4,
.page-wrapper .col-xl-5,
.page-wrapper .col-xl-6,
.page-wrapper .col-xl-7,
.page-wrapper .col-xl-8,
.page-wrapper .col-xl-9,
.page-wrapper .col-xl-auto {
  padding: 0 5px;
}
.page-wrapper .row {
  margin: 0 -5px;
}

.loader_wrap {
  position: relative;
}
.loader_wrap:has(.loader) {
  min-height: 100px;
}

.loader {
  width: 48px;
  height: 48px;
  border: 5px solid var(--color-primary-mode);
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 1080;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .loader {
    width: calc(48 * var(--scaleWidth));
    height: calc(48 * var(--scaleWidth));
    border-width: calc(5 * var(--scaleWidth));
  }
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.status-fail {
  color: var(--color-failed) !important;
}

.has-control-menu .header {
  position: absolute !important;
  z-index: 9 !important;
}
.has-control-menu .left-sidebar {
  position: absolute !important;
}

.has-control-menu:not(:has(.product-menu-open)) .sidebar {
  top: 56px !important;
  height: calc(100% - 56px) !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .has-control-menu:not(:has(.product-menu-open)) .sidebar {
    top: calc(56 * var(--scaleWidth)) !important;
    height: calc(100% - 56 * var(--scaleWidth)) !important;
  }
}

.react-datepicker .react-datepicker__aria-live {
  display: none !important;
}

.react-datepicker-popper {
  z-index: 9999 !important;
}

.sidebar-wrapper .col,
.sidebar-wrapper .col-1,
.sidebar-wrapper .col-10,
.sidebar-wrapper .col-11,
.sidebar-wrapper .col-12,
.sidebar-wrapper .col-2,
.sidebar-wrapper .col-3,
.sidebar-wrapper .col-4,
.sidebar-wrapper .col-5,
.sidebar-wrapper .col-6,
.sidebar-wrapper .col-7,
.sidebar-wrapper .col-8,
.sidebar-wrapper .col-9,
.sidebar-wrapper .col-auto,
.sidebar-wrapper .col-lg,
.sidebar-wrapper .col-lg-1,
.sidebar-wrapper .col-lg-10,
.sidebar-wrapper .col-lg-11,
.sidebar-wrapper .col-lg-12,
.sidebar-wrapper .col-lg-2,
.sidebar-wrapper .col-lg-3,
.sidebar-wrapper .col-lg-4,
.sidebar-wrapper .col-lg-5,
.sidebar-wrapper .col-lg-6,
.sidebar-wrapper .col-lg-7,
.sidebar-wrapper .col-lg-8,
.sidebar-wrapper .col-lg-9,
.sidebar-wrapper .col-lg-auto,
.sidebar-wrapper .col-md,
.sidebar-wrapper .col-md-1,
.sidebar-wrapper .col-md-10,
.sidebar-wrapper .col-md-11,
.sidebar-wrapper .col-md-12,
.sidebar-wrapper .col-md-2,
.sidebar-wrapper .col-md-3,
.sidebar-wrapper .col-md-4,
.sidebar-wrapper .col-md-5,
.sidebar-wrapper .col-md-6,
.sidebar-wrapper .col-md-7,
.sidebar-wrapper .col-md-8,
.sidebar-wrapper .col-md-9,
.sidebar-wrapper .col-md-auto,
.sidebar-wrapper .col-sm,
.sidebar-wrapper .col-sm-1,
.sidebar-wrapper .col-sm-10,
.sidebar-wrapper .col-sm-11,
.sidebar-wrapper .col-sm-12,
.sidebar-wrapper .col-sm-2,
.sidebar-wrapper .col-sm-3,
.sidebar-wrapper .col-sm-4,
.sidebar-wrapper .col-sm-5,
.sidebar-wrapper .col-sm-6,
.sidebar-wrapper .col-sm-7,
.sidebar-wrapper .col-sm-8,
.sidebar-wrapper .col-sm-9,
.sidebar-wrapper .col-sm-auto,
.sidebar-wrapper .col-xl,
.sidebar-wrapper .col-xl-1,
.sidebar-wrapper .col-xl-10,
.sidebar-wrapper .col-xl-11,
.sidebar-wrapper .col-xl-12,
.sidebar-wrapper .col-xl-2,
.sidebar-wrapper .col-xl-3,
.sidebar-wrapper .col-xl-4,
.sidebar-wrapper .col-xl-5,
.sidebar-wrapper .col-xl-6,
.sidebar-wrapper .col-xl-7,
.sidebar-wrapper .col-xl-8,
.sidebar-wrapper .col-xl-9,
.sidebar-wrapper .col-xl-auto {
  padding: 0 7.5px;
}
.sidebar-wrapper .col,
.sidebar-wrapper .col-1,
.sidebar-wrapper .col-10,
.sidebar-wrapper .col-11,
.sidebar-wrapper .col-12,
.sidebar-wrapper .col-2,
.sidebar-wrapper .col-3,
.sidebar-wrapper .col-4,
.sidebar-wrapper .col-5,
.sidebar-wrapper .col-6,
.sidebar-wrapper .col-7,
.sidebar-wrapper .col-8,
.sidebar-wrapper .col-9,
.sidebar-wrapper .col-auto,
.sidebar-wrapper .col-lg,
.sidebar-wrapper .col-lg-1,
.sidebar-wrapper .col-lg-10,
.sidebar-wrapper .col-lg-11,
.sidebar-wrapper .col-lg-12,
.sidebar-wrapper .col-lg-2,
.sidebar-wrapper .col-lg-3,
.sidebar-wrapper .col-lg-4,
.sidebar-wrapper .col-lg-5,
.sidebar-wrapper .col-lg-6,
.sidebar-wrapper .col-lg-7,
.sidebar-wrapper .col-lg-8,
.sidebar-wrapper .col-lg-9,
.sidebar-wrapper .col-lg-auto,
.sidebar-wrapper .col-md,
.sidebar-wrapper .col-md-1,
.sidebar-wrapper .col-md-10,
.sidebar-wrapper .col-md-11,
.sidebar-wrapper .col-md-12,
.sidebar-wrapper .col-md-2,
.sidebar-wrapper .col-md-3,
.sidebar-wrapper .col-md-4,
.sidebar-wrapper .col-md-5,
.sidebar-wrapper .col-md-6,
.sidebar-wrapper .col-md-7,
.sidebar-wrapper .col-md-8,
.sidebar-wrapper .col-md-9,
.sidebar-wrapper .col-md-auto,
.sidebar-wrapper .col-sm,
.sidebar-wrapper .col-sm-1,
.sidebar-wrapper .col-sm-10,
.sidebar-wrapper .col-sm-11,
.sidebar-wrapper .col-sm-12,
.sidebar-wrapper .col-sm-2,
.sidebar-wrapper .col-sm-3,
.sidebar-wrapper .col-sm-4,
.sidebar-wrapper .col-sm-5,
.sidebar-wrapper .col-sm-6,
.sidebar-wrapper .col-sm-7,
.sidebar-wrapper .col-sm-8,
.sidebar-wrapper .col-sm-9,
.sidebar-wrapper .col-sm-auto,
.sidebar-wrapper .col-xl,
.sidebar-wrapper .col-xl-1,
.sidebar-wrapper .col-xl-10,
.sidebar-wrapper .col-xl-11,
.sidebar-wrapper .col-xl-12,
.sidebar-wrapper .col-xl-2,
.sidebar-wrapper .col-xl-3,
.sidebar-wrapper .col-xl-4,
.sidebar-wrapper .col-xl-5,
.sidebar-wrapper .col-xl-6,
.sidebar-wrapper .col-xl-7,
.sidebar-wrapper .col-xl-8,
.sidebar-wrapper .col-xl-9,
.sidebar-wrapper .col-xl-auto {
  padding: 0 7.5px;
}
.sidebar-wrapper .row {
  margin: 0 -7.5px;
}

.modal-header .close {
  position: absolute !important;
  right: 10px !important;
  top: 10px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .modal-header .close {
    right: calc(10 * var(--scaleWidth)) !important;
    top: calc(10 * var(--scaleWidth)) !important;
  }
}
.modal-header .close .material-symbols-outlined,
.modal-header .close .constl-icon {
  font-size: 26px;
  color: var(--theme-modal-header-closeButton-color, #000000);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .modal-header .close .material-symbols-outlined,
  .modal-header .close .constl-icon {
    font-size: calc(10 * var(--scaleWidth));
  }
}

.inline-status-list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  height: 100%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .inline-status-list {
    gap: calc(20 * var(--scaleWidth));
  }
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .inline-status-list {
    gap: 20px;
  }
}
@media (max-width: 1400px) {
  .inline-status-list {
    justify-content: flex-start;
    gap: 0 20px;
  }
}
@media (max-width: 1199px) {
  .inline-status-list {
    gap: 0;
  }
}
@media (max-width: 768px) {
  .inline-status-list {
    margin: 0 -5px;
    gap: 10px 0;
  }
}
.inline-status-list li {
  list-style: none;
  padding: 1rem;
  margin: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .inline-status-list li {
    padding: calc(16 * var(--scaleWidth));
  }
}
@media (max-width: 1199px) {
  .inline-status-list li {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .inline-status-list li {
    width: 50%;
    padding: 0 5px;
  }
}

@media only screen and (min-width: 1600px) {
  .customer-master-row .col-lg-4 {
    -ms-flex: 0 0 415px;
    flex: 0 0 415px;
    max-width: 415px;
  }
  .customer-master-row .col-lg-8 {
    -ms-flex: 0 0 calc(100% - 415px);
    flex: 0 0 calc(100% - 415px);
    max-width: calc(100% - 415px);
  }
  .inline-status-list {
    gap: 50px;
  }
}
.customer-dashboard {
  margin-bottom: 10px !important;
}
.customer-dashboard .row {
  gap: 10px 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .customer-dashboard .row {
    gap: calc(10 * var(--scaleWidth)) 0;
  }
}
.customer-dashboard .row .mb-25 {
  margin-bottom: 0 !important;
}
@media (max-width: 768px) {
  .customer-dashboard .row .mb-25 {
    margin-bottom: 0 !important;
  }
}
.customer-dashboard .widget-service-list {
  border-radius: 8px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .customer-dashboard .widget-service-list {
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.customer-dashboard .widget-service-list .widget-title {
  display: none !important;
}
.customer-dashboard .status-widget {
  align-items: flex-start;
  gap: 8px;
  justify-content: space-between;
  padding: 20px;
  min-height: 150px;
  border-radius: 8px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .customer-dashboard .status-widget {
    gap: calc(8 * var(--scaleWidth));
    padding: calc(20 * var(--scaleWidth));
    min-height: calc(150 * var(--scaleWidth));
    height: calc(150 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.customer-dashboard .status-widget .icon {
  width: 70px;
  min-width: 70px;
  height: 70px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .customer-dashboard .status-widget .icon {
    width: calc(70 * var(--scaleWidth));
    min-width: calc(70 * var(--scaleWidth));
    height: calc(70 * var(--scaleWidth));
  }
}
.customer-dashboard .status-widget .icon .constl-icon {
  font-size: 36px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .customer-dashboard .status-widget .icon .constl-icon {
    font-size: calc(36 * var(--scaleWidth)) !important;
  }
}
.customer-dashboard .status-widget .status-details {
  justify-content: flex-end;
  text-align: end;
}
.customer-dashboard .status-widget .status-details .value {
  font-size: 70px;
  line-height: 70px;
  min-height: 70px;
  display: flex;
  align-items: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .customer-dashboard .status-widget .status-details .value {
    font-size: calc(70 * var(--scaleWidth));
    line-height: calc(70 * var(--scaleWidth));
    min-height: calc(70 * var(--scaleWidth));
  }
}
.customer-dashboard .status-widget .status-details .title {
  font-weight: 600;
  position: absolute;
  right: 20px;
  bottom: 20px;
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .customer-dashboard .status-widget .status-details .title {
    right: calc(20 * var(--scaleWidth));
    bottom: calc(20 * var(--scaleWidth));
  }
}
.customer-dashboard .h-100 {
  height: 100% !important;
}
@media (max-width: 1024px) {
  .customer-dashboard .h-100 {
    height: auto !important;
  }
}
@media (max-width: 1199px) {
  .customer-dashboard .leftbar {
    flex: 50%;
    max-width: 50%;
    margin-bottom: 0 !important;
  }
}
@media (max-width: 1024px) {
  .customer-dashboard .leftbar {
    flex: 100%;
    max-width: 100%;
  }
}
@media (max-width: 1199px) {
  .customer-dashboard .rightbar {
    flex: 50%;
    max-width: 50%;
  }
  .customer-dashboard .rightbar .col-sm-12 {
    flex: 50%;
    max-width: 50%;
    height: 48% !important;
    margin-bottom: 0 !important;
  }
}
@media (max-width: 1024px) {
  .customer-dashboard .rightbar {
    flex: 100%;
    max-width: 100%;
  }
}
@media (max-width: 479px) {
  .customer-dashboard .rightbar .col-sm-12 {
    flex: 100%;
    max-width: 100%;
  }
}

.login-page {
  display: flex;
  height: 100vh;
  padding: 0;
  margin: 0;
  background-color: #ffffff;
  overflow: hidden;
}
.login-page .modal-body {
  padding-top: 10px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .login-page .modal-body {
    padding-top: calc(10 * var(--scaleWidth));
  }
}
.login-page .left-img {
  width: 52.71%;
  height: 100%;
  position: relative;
  float: left;
}
.login-page .left-img img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
}
@media (max-width: 1199px) {
  .login-page .left-img {
    display: none;
  }
}
.login-page .login-form {
  width: 47.29%;
  position: relative;
  float: left;
}
@media (max-width: 1199px) {
  .login-page .login-form {
    width: 100%;
  }
}
.login-page .login-form .login-pattern {
  position: absolute;
  left: 0;
  right: 0;
  height: 71.11%;
  width: auto;
  margin: 0 auto;
}
.login-page .login-form .container {
  overflow: auto;
  text-align: center;
  position: relative;
  padding-bottom: 96px;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .login-page .login-form .container {
    padding-bottom: calc(96 * var(--scaleWidth));
  }
}
@media (max-width: 1400px) {
  .login-page .login-form .container {
    padding-bottom: 80px !important;
  }
}
.login-page .login-form .container .copyright-text {
  position: fixed;
  margin-bottom: 0;
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
  bottom: 0;
  background-color: #ffffff;
  padding: 25px 30px;
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: 47.29%;
  text-align: right;
  right: 0;
  justify-content: end;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .login-page .login-form .container .copyright-text {
    font-size: calc(14 * var(--scaleWidth));
    padding-top: calc(25 * var(--scaleWidth));
    padding-bottom: calc(25 * var(--scaleWidth));
    padding-left: calc(30 * var(--scaleWidth));
    padding-right: calc(30 * var(--scaleWidth));
  }
}
@media (max-width: 1199px) {
  .login-page .login-form .container .copyright-text {
    max-width: 100%;
  }
}
.login-page .button-outline {
  background-color: #ffffff;
}

.main-login-form {
  max-width: 500px;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  text-align: left;
  height: auto;
  overflow: auto;
  overflow-x: hidden;
  padding: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .main-login-form {
    padding: calc(15 * var(--scaleWidth));
  }
}
.main-login-form .header-login-form {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  text-align: center;
  margin-bottom: 0 !important;
}
.main-login-form .body-login-form h3 {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-weight: 400;
  color: #FFFFFF;
  text-align: center;
  margin-bottom: 50px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .main-login-form .body-login-form h3 {
    margin-bottom: calc(50 * var(--scaleWidth));
  }
}
.main-login-form .body-login-form .login-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .main-login-form .body-login-form .login-nav {
    gap: calc(12 * var(--scaleWidth));
  }
}
.main-login-form .body-login-form .login-nav label {
  font-size: 14px;
  color: #ffffff;
  margin: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .main-login-form .body-login-form .login-nav label {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.main-login-form .body-login-form .login-nav .buttons-group {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 30px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .main-login-form .body-login-form .login-nav .buttons-group {
    gap: calc(15 * var(--scaleWidth));
    margin-bottom: calc(30 * var(--scaleWidth));
  }
}
.main-login-form .body-login-form .login-nav .buttons-group .button-outline-icon-text {
  border-color: #584898 !important;
  color: #ffffff !important;
  border-radius: 8px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .main-login-form .body-login-form .login-nav .buttons-group .button-outline-icon-text {
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.main-login-form .body-login-form .login-nav .buttons-group .button-outline-icon-text img {
  filter: invert(1) grayscale(100%) brightness(2);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .main-login-form .body-login-form .login-nav .buttons-group .button-outline-icon-text {
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.main-login-form .body-login-form .login-nav .buttons-group .button-outline-icon-text:hover, .main-login-form .body-login-form .login-nav .buttons-group .button-outline-icon-text.active {
  color: #ffffff !important;
  background-color: #2A1B6E !important;
  border-color: #584898 !important;
}
.main-login-form .body-login-form .login-nav .buttons-group .button-outline-icon-text:hover img, .main-login-form .body-login-form .login-nav .buttons-group .button-outline-icon-text.active img {
  filter: invert(1) grayscale(100%) brightness(2);
}
.main-login-form .body-login-form .form-group {
  margin-bottom: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .main-login-form .body-login-form .form-group {
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
.main-login-form .body-login-form .button-primary {
  width: 100%;
  height: 44px;
  background-color: #757EB3;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .main-login-form .body-login-form .button-primary {
    height: calc(44 * var(--scaleWidth));
  }
}

.login-content {
  display: none;
}
.login-content.active {
  display: block;
}

.authentication .main-login-form {
  max-width: 530px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .authentication .main-login-form {
    max-width: calc(530 * var(--scaleWidth));
  }
}
.authentication h6 {
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 140%;
  color: #ffffff;
  padding-left: 35px;
  position: relative;
  margin: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .authentication h6 {
    font-size: calc(16 * var(--scaleWidth));
    padding-left: calc(35 * var(--scaleWidth));
  }
}
.authentication h6 img {
  position: absolute;
  left: 0;
  top: 3px;
  filter: invert(1) grayscale(100%) brightness(2);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .authentication h6 img {
    top: calc(3 * var(--scaleWidth));
  }
}
.authentication .button-link {
  text-decoration: none;
}
.authentication .card-link {
  color: #fff !important;
}

.main-login-form .body-login-form .form-group label {
  color: #ffffff !important;
}

@media only screen and (max-width: 1800px) {
  .main-login-form .header-login-form img {
    width: 350px;
  }
  .main-login-form .body-login-form h3 {
    margin-bottom: 20px;
  }
  .main-login-form .body-login-form .form-group {
    margin-bottom: 15px;
  }
  .main-login-form .body-login-form .form-group label {
    color: #ffffff;
  }
  .main-login-form .body-login-form .login-nav .buttons-group {
    margin-bottom: 20px;
  }
  .main-login-form .form-group {
    margin-bottom: 15px;
  }
  .login-page .login-form .container {
    padding-bottom: 40px;
  }
  .login-page .login-form .container .copyright-text {
    padding: 10px 30px;
  }
}
@media only screen and (max-width: 1400px) {
  .main-login-form .header-login-form {
    margin-bottom: 10px;
  }
  .main-login-form .header-login-form img {
    width: 250px;
  }
  .main-login-form .body-login-form h3 {
    margin-bottom: 20px;
    font-size: 16px;
  }
  .main-login-form .body-login-form .form-group {
    margin-bottom: 15px;
  }
  .main-login-form .body-login-form .login-nav .buttons-group {
    margin-bottom: 20px;
  }
  .main-login-form .form-group {
    margin-bottom: 20px;
  }
  .login-page .login-form .container .copyright-text {
    font-size: 12px;
  }
}
@media (max-height: 721px) {
  .login-form .main-login-form {
    height: 100%;
  }
}
.input-link {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  font-style: italic;
  color: #2A1B6E;
  text-align: right;
  font-weight: 500;
  text-decoration: underline;
  line-height: 20px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .input-link {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
    margin-top: calc(4 * var(--scaleWidth));
  }
}

.password-step-card {
  background: rgb(233, 242, 255);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2509803922);
  border-radius: 10px;
  padding: 15px;
  height: 100%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .password-step-card {
    border-radius: calc(10 * var(--scaleWidth));
    padding: calc(15 * var(--scaleWidth));
  }
}
.password-step-card .title {
  font-weight: 600;
  font-size: 16px;
  line-height: 19.36px;
  letter-spacing: 0%;
  color: #FFFFFF;
  margin-bottom: 8px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .password-step-card .title {
    font-size: calc(16 * var(--scaleWidth));
    line-height: calc(19.36 * var(--scaleWidth));
  }
}
.password-step-card .subtitle {
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0%;
  color: #FFFFFF;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .password-step-card .subtitle {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(22 * var(--scaleWidth));
  }
}
.password-step-card ol {
  padding-left: 20px;
  margin-bottom: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .password-step-card ol {
    padding-left: calc(20 * var(--scaleWidth));
  }
}
.password-step-card ol li {
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0%;
  color: #FFFFFF;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .password-step-card ol li {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(22 * var(--scaleWidth));
  }
}

.login-animated {
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-animated .login-animated-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  vertical-align: top;
  object-fit: cover;
  top: 0;
  left: 0;
}
.login-animated .login-form {
  width: 100%;
  max-width: 450px;
  overflow: hidden;
  background: rgba(80, 63, 144, 0.6);
  border-radius: 8px;
  box-shadow: 0px 0px 15px 0px #36247D;
  border: 3px solid #584898;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .login-animated .login-form {
    max-width: calc(450 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
    border-width: 1px;
  }
}
.login-animated .login-form .container {
  height: auto;
  padding: 25px 30px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .login-animated .login-form .container {
    padding: calc(25 * var(--scaleWidth)) calc(30 * var(--scaleWidth)) !important;
  }
}
.login-animated .login-form .container .header-login-form {
  position: relative;
  margin-top: -10px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .login-animated .login-form .container .header-login-form {
    margin-top: calc(-10 * var(--scaleWidth)) !important;
  }
}
.login-animated .login-form .container .header-login-form img {
  width: 220px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .login-animated .login-form .container .header-login-form img {
    width: calc(220 * var(--scaleWidth)) !important;
  }
}
.login-animated .login-form .container .main-login-form {
  padding: 0;
}
.login-animated .form-control,
.login-animated .PhoneInputInput {
  font-size: 16px;
  color: #ffffff !important;
  border: 1px solid #584898;
  border-radius: 8px;
  padding: 10px 15px;
  line-height: 140%;
  min-height: 44px;
  background-color: transparent !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .login-animated .form-control,
  .login-animated .PhoneInputInput {
    font-size: calc(16 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
    padding: calc(10 * var(--scaleWidth)) calc(15 * var(--scaleWidth));
    min-height: calc(44 * var(--scaleWidth));
  }
}
.login-animated .form-control::placeholder,
.login-animated .PhoneInputInput::placeholder {
  color: #A498C3;
  font-size: 16px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .login-animated .form-control::placeholder,
  .login-animated .PhoneInputInput::placeholder {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.login-animated .form-control::-webkit-input-placeholder,
.login-animated .PhoneInputInput::-webkit-input-placeholder {
  /* Chrome and Safari */
  color: #A498C3;
  font-size: 16px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .login-animated .form-control::-webkit-input-placeholder,
  .login-animated .PhoneInputInput::-webkit-input-placeholder {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.login-animated .form-control::-moz-placeholder,
.login-animated .PhoneInputInput::-moz-placeholder {
  /* Firefox 19+ */
  color: #A498C3;
  font-size: 16px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .login-animated .form-control::-moz-placeholder,
  .login-animated .PhoneInputInput::-moz-placeholder {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.login-animated .form-control:-ms-input-placeholder,
.login-animated .PhoneInputInput:-ms-input-placeholder {
  /* IE 10+ */
  color: #A498C3;
}
.login-animated .form-control :-moz-placeholder,
.login-animated .PhoneInputInput :-moz-placeholder {
  /* Firefox 18- */
  color: #A498C3;
}
.login-animated .form-control:focus,
.login-animated .PhoneInputInput:focus {
  border-color: #2A1B6E;
  box-shadow: 0 0 4px color-mix(in srgb, #2A1B6E 40%, transparent);
}
.login-animated .form-control.is-valid,
.login-animated .PhoneInputInput.is-valid {
  border-color: #2A1B6E;
  box-shadow: 0 0 4px color-mix(in srgb, #2A1B6E 40%, transparent);
  background-image: none;
}
.login-animated .form-control.is-invalid,
.login-animated .PhoneInputInput.is-invalid {
  border-color: #EB5757;
  box-shadow: 0 0 4px color-mix(in srgb, #EB5757 40%, transparent);
  background-image: none;
}
.login-animated .custom-checkbox .custom-control-label,
.login-animated .custom-checkbox-primary .custom-control-label {
  color: #4F4F4F;
}
.login-animated .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #2A1B6E;
}
.login-animated .custom-checkbox .custom-control-label::before {
  border: 2px solid #584898;
  border-color: #584898 !important;
}
.login-animated .custom-checkbox-primary .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #2A1B6E;
}
.login-animated .custom-checkbox-primary .custom-control-label::before {
  border: 1px solid #584898;
  border-color: #584898 !important;
}
.login-animated .button-link {
  color: #FFFFFF;
}
.login-animated .button-link:hover {
  color: color-mix(in srgb, #FFFFFF, black 10%);
}
.login-animated .button-link.active, .login-animated .button-link:active {
  color: color-mix(in srgb, #FFFFFF, black 20%);
}
.login-animated .button-link.disabled, .login-animated .button-link:disabled {
  color: color-mix(in srgb, #FFFFFF, white 30%);
  cursor: not-allowed;
}

@media (max-width: 479px) {
  .login-animated .login-form {
    max-width: calc(100% - 20px);
  }
  .login-animated .login-form .container {
    padding: 20px;
  }
}
@media (max-height: 500px) {
  .login-animated {
    padding: 20px;
  }
  .login-animated .login-form {
    height: 100%;
    overflow: auto;
    max-height: 90vh;
  }
}
.login-animated {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
.login-animated .button-outline {
  background-color: #ffffff;
}
.login-animated .login-animated-wrapper {
  display: flex;
  align-items: flex-end;
  width: 100%;
  position: relative;
  z-index: 999;
  top: 50%;
  transform: translateY(-50%);
}
.login-animated .login-animated-wrapper .leftbar {
  max-width: 50%;
  flex: 0 0 50%;
  -webkit-flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1199px) {
  .login-animated .login-animated-wrapper .leftbar {
    display: none;
  }
}
.login-animated .login-animated-wrapper .leftbar .login-information {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .login-animated .login-animated-wrapper .leftbar .login-information {
    gap: calc(10px * var(--scaleWidth));
  }
}
.login-animated .login-animated-wrapper .leftbar .login-information .logo {
  display: flex;
  justify-content: flex-start;
  border-radius: 10px;
  padding: 10px;
  height: 90px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .login-animated .login-animated-wrapper .leftbar .login-information .logo {
    padding: calc(10 * var(--scaleWidth));
    height: calc(90 * var(--scaleWidth));
    border-radius: calc(10 * var(--scaleWidth));
  }
}
.login-animated .login-animated-wrapper .leftbar .login-information .logo img,
.login-animated .login-animated-wrapper .leftbar .login-information .logo svg {
  width: auto;
  height: 100%;
  filter: brightness(0) invert(1);
}
.login-animated .login-animated-wrapper .leftbar .login-information .description {
  display: inline-block;
  width: 100%;
  max-width: 350px;
  vertical-align: top;
  font-size: 28px;
  line-height: 130%;
  color: #fff;
  font-weight: 600;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .login-animated .login-animated-wrapper .leftbar .login-information .description {
    max-width: calc(350 * var(--scaleWidth));
    font-size: calc(28 * var(--scaleWidth));
  }
}
.login-animated .login-animated-wrapper .rightbar {
  max-width: 50%;
  flex: 0 0 50%;
  -webkit-flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1199px) {
  .login-animated .login-animated-wrapper .rightbar {
    max-width: 100%;
    flex: 0 0 100%;
    -webkit-flex: 0 0 100%;
  }
}
.login-animated .login-animated-wrapper .rightbar .login-form {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}
.login-animated .login-animated-wrapper .rightbar .login-form.show {
  transform: translateX(0);
  opacity: 1;
}
.login-animated .login-animated-wrapper .rightbar .login-form .header-login-form {
  margin: 0 0 20px 0 !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .login-animated .login-animated-wrapper .rightbar .login-form .header-login-form {
    margin: 0 0 calc(20 * var(--scaleWidth)) 0 !important;
  }
}
.login-animated .login-animated-wrapper .rightbar .login-form .header-login-form h1 {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: 28px;
  line-height: 110%;
  text-align: left;
  color: #ffffff;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .login-animated .login-animated-wrapper .rightbar .login-form .header-login-form h1 {
    font-size: calc(28 * var(--scaleWidth));
  }
}
.login-animated .login-animated-wrapper .rightbar .login-form .header-login-form h1 sup {
  font-size: 16px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .login-animated .login-animated-wrapper .rightbar .login-form .header-login-form h1 sup {
    font-size: calc(16 * var(--scaleWidth));
  }
}

.login-animated-wrapper .input-link {
  color: #fff !important;
}
.login-animated-wrapper .button-link img {
  filter: invert(1) grayscale(100%) brightness(2);
}
.login-animated-wrapper #confirmUserDetailsModal .modal-body {
  margin: 0 !important;
  padding-top: 5px !important;
}

.copyright-text {
  display: none !important;
}

.login-nav > label {
  display: none !important;
}

#confirmUserDetailsModal .password-step-card .title {
  color: #212529 !important;
}
#confirmUserDetailsModal .password-step-card .subtitle {
  color: #212529 !important;
}
#confirmUserDetailsModal .password-step-card ol li {
  color: #212529 !important;
}
#confirmUserDetailsModal .modal-body {
  margin-top: 0 !important;
  padding-top: 5px !important;
}

input[placeholder*="@"]::-webkit-input-placeholder {
  text-transform: inherit !important;
}

input[placeholder*="@"]::-moz-placeholder {
  text-transform: inherit !important;
}

input[placeholder*="@"]:-moz-placeholder {
  text-transform: inherit !important;
}

input[placeholder*="@"]:-ms-input-placeholder {
  text-transform: inherit !important;
}

.login-form-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1199px) {
  .login-form-wrap {
    min-height: auto !important;
  }
}

.user-profile-header .card {
  padding: 0;
  background-color: var(--color-black-background);
  border-radius: var(--user-profile-banner-borderRadius);
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 -10px;
  display: block;
  width: auto;
  overflow: hidden;
  border-radius: 0 !important;
  margin-top: -17px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .user-profile-header .card {
    border-radius: calc(25 * var(--scaleWidth));
  }
}
@media (max-width: 1199px) {
  .user-profile-header .card {
    margin: 0 -15px;
    margin-top: -21px;
    height: auto !important;
  }
}
.user-profile-header .card .inner-card {
  display: flex;
  justify-content: flex-start;
  padding: var(--user-profile-banner-padding);
  align-items: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .user-profile-header .card .inner-card {
    padding: calc(70 * var(--scaleWidth)) calc(30 * var(--scaleWidth)) calc(200 * var(--scaleWidth)) calc(30 * var(--scaleWidth));
  }
}
@media (max-width: 1199px) {
  .user-profile-header .card .inner-card {
    padding: 30px;
    align-items: center;
    justify-content: flex-start;
    padding: 20px 15px;
    min-height: 200px;
  }
}
.user-profile-header .card .profile-picture {
  display: inline-block;
  width: auto;
  vertical-align: top;
  width: var(--user-profile-banner-profilePicture-dimension);
  min-width: var(--user-profile-banner-profilePicture-dimension);
  height: var(--user-profile-banner-profilePicture-dimension);
  position: relative;
  overflow: hidden;
  border-radius: var(--user-profile-banner-profilePicture-borderRadius);
  margin-left: var(--user-profile-banner-profilePicture-margine-left);
  opacity: 1;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .user-profile-header .card .profile-picture {
    width: calc(140 * var(--scaleWidth));
    min-width: calc(140 * var(--scaleWidth));
    height: calc(140 * var(--scaleWidth));
    margin-left: calc(20 * var(--scaleWidth));
  }
}
@media (max-width: 1199px) {
  .user-profile-header .card .profile-picture {
    margin-left: 0px;
    width: 100px;
    min-width: 100px;
    height: 100px;
  }
}
.user-profile-header .card .profile-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
}
@media (max-width: 479px) {
  .user-profile-header .card .profile-picture {
    width: 80px;
    min-width: 80px;
    height: 80px;
  }
}
.user-profile-header .card .profile-details {
  width: calc(100% - 160px);
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .user-profile-header .card .profile-details {
    width: calc(100% - 160 * var(--scaleWidth));
    padding-left: calc(30 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
  }
}
@media (max-width: 479px) {
  .user-profile-header .card .profile-details {
    width: calc(100% - 100px);
    padding-left: 0;
  }
}
@media (max-width: 1199px) {
  .user-profile-header .card .profile-details {
    gap: 8px;
    padding-left: 20px;
  }
}
.user-profile-header .card .profile-details .name {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--user-profile-banner-profileDetails-name-fontSize);
  line-height: 44px;
  color: var(--user-profile-banner-profileDetails-name-color);
  font-weight: var(--user-profile-banner-profileDetails-name-fontWeight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .user-profile-header .card .profile-details .name {
    font-size: calc(36 * var(--scaleWidth));
    line-height: calc(44 * var(--scaleWidth));
  }
}
@media (max-width: 1199px) {
  .user-profile-header .card .profile-details .name {
    font-size: var(--font-size-heading-2);
    line-height: 100%;
  }
}
.user-profile-header .card .profile-details .designation {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--user-profile-banner-profileDetails-designation-fontSize);
  line-height: 29px;
  color: var(--user-profile-banner-profileDetails-designation-color);
  font-weight: var(--user-profile-banner-profileDetails-designation-fontWeight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .user-profile-header .card .profile-details .designation {
    font-size: calc(24 * var(--scaleWidth));
    line-height: calc(29 * var(--scaleWidth));
  }
}
@media (max-width: 1199px) {
  .user-profile-header .card .profile-details .designation {
    font-size: var(--font-size-large);
    line-height: 100%;
  }
}
.user-profile-header .card .profile-details .email {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--user-profile-banner-profileDetails-email-fontSize);
  line-height: 29px;
  color: var(--user-profile-banner-profileDetails-email-color);
  font-weight: 300;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .user-profile-header .card .profile-details .email {
    font-size: calc(24 * var(--scaleWidth));
    line-height: calc(29 * var(--scaleWidth));
  }
}
@media (max-width: 1199px) {
  .user-profile-header .card .profile-details .email {
    font-size: var(--user-profile-banner-profileDetails-email-fontWeight);
    line-height: 100%;
  }
}

.profile-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-card-header {
    margin-bottom: calc(20 * var(--scaleWidth));
  }
}
@media (max-width: 479px) {
  .profile-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
}
.profile-card-header .profile-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: var(--myaccount-card-header-title-fontSize, 18px);
  color: var(--myaccount-card-header-title-color, #101828);
  line-height: 133.33%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-card-header .profile-card-title {
    gap: calc(10 * var(--scaleWidth));
    font-size: calc(18 * var(--scaleWidth));
  }
}
.profile-card-header .profile-card-title .constl-icon {
  color: var(--myaccount-card-header-title-icon-color, #372194);
  font-size: var(--myaccount-card-header-title-icon-fontSize, 24px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-card-header .profile-card-title .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.profile-card-header .button-edit {
  font-size: var(--myaccount-card-header-tab-userProfile-editButton-fontSize);
  padding: var(--myaccount-card-header-tab-userProfile-editButton-padding);
  border-radius: var(--myaccount-card-header-tab-userProfile-editButton-borderRadius);
  background-color: var(--myaccount-card-header-tab-userProfile-editButton-background-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-card-header .button-edit {
    font-size: calc(16 * var(--scaleWidth));
    padding: calc(8 * var(--scaleWidth)) calc(24 * var(--scaleWidth));
    border-radius: calc(4 * var(--scaleWidth));
  }
}
.profile-card-header .button-edit:hover {
  background-color: color-mix(in srgb, var(--myaccount-card-header-tab-userProfile-editButton-background-color), black 10%);
}
.profile-card-header .button-edit.active, .profile-card-header .button-edit:active {
  background-color: color-mix(in srgb, var(--myaccount-card-header-tab-userProfile-editButton-background-color), black 20%);
}
.profile-card-header .button-edit.disabled, .profile-card-header .button-edit:disabled {
  background-color: color-mix(in srgb, var(--myaccount-card-header-tab-userProfile-editButton-background-color), white 10%) !important;
  cursor: not-allowed !important;
}
.profile-card-header .button-edit.disabled img, .profile-card-header .button-edit:disabled img {
  opacity: 0.2;
}

.user-profile-body {
  position: relative;
  margin-top: -150px !important;
  z-index: 99;
  padding: 0 30px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .user-profile-body {
    margin-top: calc(-150 * var(--scaleWidth)) !important;
    padding: 0 calc(30 * var(--scaleWidth));
  }
}
@media (max-width: 1199px) {
  .user-profile-body {
    margin-top: 0 !important;
    padding: 0;
    padding-top: 20px;
  }
}
.user-profile-body .dataTable {
  position: relative;
  background-color: transparent !important;
}
@media (max-width: 768px) {
  .user-profile-body .button-tab-content .row .col-sm-12 {
    margin-bottom: 15px;
  }
  .user-profile-body .button-tab-content .row .col-sm-12:last-child {
    margin-bottom: 0;
  }
}
.user-profile-body .button-tab-nav {
  padding-bottom: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .user-profile-body .button-tab-nav {
    padding-bottom: calc(5 * var(--scaleWidth));
  }
}
.user-profile-body .button-tab-nav .button-tab {
  font-size: var(--myaccount-tabbing-nav-item-fontSize, 18px);
  background-color: var(--myaccount-tabbing-nav-item-background-color, #FFFFFF);
  font-size: var(--myaccount-tabbing-nav-item-fontSize, 18px);
  gap: 12px;
  border-radius: var(--myaccount-tabbing-nav-item-borderRadius, 25px);
  height: var(--myaccount-tabbing-nav-item-height, 48px);
  padding: var(--myaccount-tabbing-nav-item-padding, 10px 24px);
  color: var(--myaccount-tabbing-nav-item-color, #FFFFFF);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .user-profile-body .button-tab-nav .button-tab {
    font-size: calc(18 * var(--scaleWidth));
    gap: calc(12 * var(--scaleWidth));
    border-radius: calc(25 * var(--scaleWidth));
    height: calc(48 * var(--scaleWidth));
    padding: calc(10 * var(--scaleWidth)) calc(24 * var(--scaleWidth));
  }
}
.user-profile-body .button-tab-nav .button-tab:hover {
  background-color: var(--myaccount-tabbing-nav-item-active-background-color, #372194);
  color: var(--myaccount-tabbing-nav-item-active-color, #ffffff);
}
.user-profile-body .button-tab-nav .button-tab:hover img {
  filter: invert(1) grayscale(100%) brightness(2);
}
.user-profile-body .button-tab-nav .button-tab.active, .user-profile-body .button-tab-nav .button-tab:active {
  background-color: var(--myaccount-tabbing-nav-item-active-background-color, #372194);
  color: var(--myaccount-tabbing-nav-item-active-color, #ffffff);
}
.user-profile-body .button-tab-nav .button-tab.active img, .user-profile-body .button-tab-nav .button-tab:active img {
  filter: invert(1) grayscale(100%) brightness(2);
}

.assigned-roles-list {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .assigned-roles-list {
    gap: calc(3 * var(--scaleWidth));
  }
}
.assigned-roles-list li {
  list-style: none;
}

.button-tab-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
  margin: 0;
  gap: 12px;
  padding-bottom: 25px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .button-tab-nav {
    gap: calc(12 * var(--scaleWidth));
    padding-bottom: calc(25 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .button-tab-nav {
    gap: 12px 12px;
    padding-bottom: 5px;
  }
}
.button-tab-nav li {
  list-style: none;
}
@media (max-width: 768px) {
  .button-tab-nav li {
    width: calc(50% - 6px);
  }
  .button-tab-nav li .button-tab {
    width: 100%;
  }
}
@media (max-width: 479px) {
  .button-tab-nav li {
    width: 100%;
  }
}
@media (max-width: 1199px) {
  .button-tab-nav {
    justify-content: center;
    padding-bottom: 5px;
  }
}

.user-profile-elements .form-group {
  margin-bottom: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .user-profile-elements .form-group {
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .user-profile-elements .form-group {
    margin-bottom: 15px;
  }
}
.user-profile-elements .buttons-group {
  display: flex;
  align-items: center;
  gap: 15px;
  justify-content: right;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .user-profile-elements .buttons-group {
    gap: calc(15 * var(--scaleWidth));
  }
}
.user-profile-elements .buttons-group .button {
  height: 40px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .user-profile-elements .buttons-group .button {
    height: calc(40 * var(--scaleWidth));
  }
}

@media (max-width: 1400px) {
  #edit-User-information .row .col-xs-12 {
    -ms-flex: 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 1400px) and (max-width: 768px) {
  #edit-User-information .row .col-xs-12 {
    -ms-flex: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (max-width: 1400px) {
  #edit-User-information .row .col-xs-12.col-md-8 {
    -ms-flex: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}
#company-profile .logo-section {
  display: flex;
}
@media (max-width: 768px) {
  #company-profile .logo-section {
    flex-wrap: wrap;
    gap: 15px;
  }
}
#company-profile .logo-section .company-logo {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  padding-right: var(--myaccount-card-header-tab-companyInformation-companylogo-margine-right);
  max-width: var(--myaccount-card-header-tab-companyInformation-companylogo-width);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #company-profile .logo-section .company-logo {
    padding-right: calc(30 * var(--scaleWidth));
  }
}
#company-profile .logo-section .company-logo .imgbox {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--myaccount-card-header-tab-companyInformation-companylogo-padding);
  background-color: var(--myaccount-card-header-tab-companyInformation-companylogo-background-color);
  border: var(--myaccount-card-header-tab-companyInformation-companylogo-border);
  border-radius: var(--myaccount-card-header-tab-companyInformation-companylogo-borderRadius);
  box-shadow: var(--myaccount-card-header-tab-companyInformation-companylogo-boxShadow);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #company-profile .logo-section .company-logo .imgbox {
    padding: calc(20 * var(--scaleWidth)) calc(20 * var(--scaleWidth));
    border-radius: calc(15 * var(--scaleWidth));
  }
}
#company-profile .logo-section .company-logo .imgbox img {
  width: auto;
  max-width: 100%;
  object-fit: cover;
}
#company-profile .logo-section .company-information-details {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  width: calc(100% - var(--myaccount-card-header-tab-companyInformation-companylogo-width));
  padding-bottom: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #company-profile .logo-section .company-information-details {
    padding-bottom: calc(15 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  #company-profile .logo-section .company-information-details {
    width: 100%;
  }
}
#company-profile .logo-section .company-information-details .col-md-6:last-child .form-group {
  margin-bottom: 0;
}

.primary-contact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .primary-contact-row {
    gap: calc(15 * var(--scaleWidth)) 0;
  }
}
.primary-contact-row .contact-picture {
  display: inline-block;
  width: var(--myaccount-card-header-tab-companyInformation-primaryContact-card-profilePicture-dimension);
  vertical-align: top;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .primary-contact-row .contact-picture {
    width: calc(105 * var(--scaleWidth));
  }
}
.primary-contact-row .contact-picture .imgbox {
  display: inline-block;
  width: var(--myaccount-card-header-tab-companyInformation-primaryContact-card-profilePicture-dimension);
  height: var(--myaccount-card-header-tab-companyInformation-primaryContact-card-profilePicture-dimension);
  vertical-align: top;
  position: relative;
  overflow: hidden;
  border-radius: var(--myaccount-card-header-tab-companyInformation-primaryContact-card-profilePicture-borderRadius);
  background-color: var(--avtar-background-color, #f1f2f5);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .primary-contact-row .contact-picture .imgbox {
    width: calc(105 * var(--scaleWidth));
    height: calc(105 * var(--scaleWidth));
  }
}
.primary-contact-row .contact-picture .imgbox img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.primary-contact-row .contact-picture .imgbox .constl-icon {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--avtar-color, #6b6c7e);
  font-size: 70px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .primary-contact-row .contact-picture .imgbox .constl-icon {
    font-size: calc(70 * var(--scaleWidth));
  }
}
.primary-contact-row .contact-details {
  display: inline-block;
  width: calc(100% - 105px);
  vertical-align: top;
  padding-left: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .primary-contact-row .contact-details {
    width: calc(100% - 105 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
  }
}
@media (max-width: 479px) {
  .primary-contact-row .contact-details {
    width: 100%;
    padding: 0;
  }
}
.primary-contact-row .contact-details .row {
  gap: 0 !important;
}
.primary-contact-row .contact-details .row .contact-text-icon {
  display: flex;
  align-items: flex-start;
  font-size: var(--myaccount-card-header-tab-companyInformation-primaryContact-card-contactDetails-text-fontSize);
  color: var(--myaccount-card-header-tab-companyInformation-primaryContact-card-contactDetails-text-color);
  min-height: 24px;
  gap: 5px;
  font-weight: var(--myaccount-card-header-tab-companyInformation-primaryContact-card-contactDetails-text-fontWeight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .primary-contact-row .contact-details .row .contact-text-icon {
    font-size: calc(16 * var(--scaleWidth));
    gap: calc(5 * var(--scaleWidth));
    min-height: calc(24 * var(--scaleWidth));
  }
}
@media (max-width: 1199px) {
  .primary-contact-row .contact-details .row .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
.primary-contact-row .contact-details .row .col-sm-12 {
  margin-bottom: 10px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .primary-contact-row .contact-details .row .col-sm-12 {
    margin-bottom: calc(10 * var(--scaleWidth)) !important;
  }
}
.primary-contact-row .contact-details .row .col-sm-12:last-child {
  margin-bottom: 0 !important;
}

.primary-contact-card {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  padding: var(--myaccount-card-header-tab-companyInformation-primaryContact-card-padding);
  background-color: var(--myaccount-card-header-tab-companyInformation-primaryContact-card-background-color);
  border-radius: var(--myaccount-card-header-tab-companyInformation-primaryContact-card-borderRadius);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .primary-contact-card {
    padding: calc(15 * var(--scaleWidth)) calc(15 * var(--scaleWidth));
    border-radius: calc(15 * var(--scaleWidth));
  }
}
.primary-contact-card .profile-card-header {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--myaccount-card-header-tab-companyInformation-primaryContact-card-contactDetails-text-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .primary-contact-card .profile-card-header {
    padding-bottom: calc(10 * var(--scaleWidth));
  }
}
.primary-contact-card .profile-card-header .profile-card-title {
  color: var(--myaccount-card-header-tab-companyInformation-primaryContact-card-contactDetails-text-color);
}

@media (max-width: 1400px) {
  .primary-contact-row {
    align-items: flex-start;
  }
  .primary-contact-row .contact-details .row {
    flex-direction: column;
  }
  .primary-contact-row .contact-details .row .col-md-6 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}
.activity-tabular-tab .activity-tabular-header {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: var(--activity-tabular-header-font-size);
  line-height: var(--activity-tabular-header-line-height);
  color: var(--activity-tabular-header-text-color);
  font-weight: var(--activity-tabular-header-font-weight);
  padding: var(--activity-tabular-header-padding-desktop);
  justify-content: space-between;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .activity-tabular-tab .activity-tabular-header {
    font-size: calc(16 * var(--scaleWidth));
    padding: calc(10 * var(--scaleWidth)) 0 calc(15 * var(--scaleWidth)) 0;
  }
}
@media (max-width: 768px) {
  .activity-tabular-tab .activity-tabular-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--activity-tabular-header-gap-mobile);
    padding: var(--activity-tabular-header-padding-mobile);
  }
}
.activity-tabular-tab .activity-tabular-body {
  display: var(--activity-tabular-body-display);
  width: var(--activity-tabular-body-width);
  vertical-align: var(--activity-tabular-body-vertical-align);
}
@media (max-width: 768px) {
  .activity-tabular-tab .activity-tabular-body .table-main-body .table-container {
    padding: var(--activity-tabular-table-container-padding-mobile) !important;
  }
}

.activity-tab-card {
  display: flex;
  flex-direction: column;
  gap: var(--activity-tab-card-gap);
  margin-bottom: 0 !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .activity-tab-card {
    gap: calc(8 * var(--scaleWidth));
  }
}
.activity-tab-card .activity-tab-card-header {
  display: flex;
  align-items: center;
  padding: var(--activity-tab-card-header-padding);
  font-size: var(--activity-tab-card-header-font-size);
  line-height: var(--activity-tab-card-header-line-height);
  color: var(--activity-tab-card-header-text-color);
  font-weight: var(--activity-tab-card-header-font-weight);
  position: relative;
  padding-left: 0;
  padding-right: 40px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .activity-tab-card .activity-tab-card-header {
    font-size: calc(16 * var(--scaleWidth));
    padding: calc(10 * var(--scaleWidth)) calc(20 * var(--scaleWidth));
    padding-right: calc(40 * var(--scaleWidth));
  }
}
.activity-tab-card .activity-tab-card-header::after {
  content: "\e313";
  font-family: "Material Symbols Outlined";
  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: "liga";
  -webkit-font-smoothing: antialiased;
  position: absolute;
  right: 10px;
  color: var(--activity-tab-card-header-text-color);
  top: 7px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .activity-tab-card .activity-tab-card-header::after {
    font-size: calc(24 * var(--scaleWidth));
    right: calc(10 * var(--scaleWidth));
    top: calc(7 * var(--scaleWidth));
  }
}
.activity-tab-card .activity-tab-card-header.open::after {
  content: "\e316";
}
.activity-tab-card .activity-tab-card-body {
  display: var(--activity-tab-card-body-display);
  width: var(--activity-tab-card-body-width);
  vertical-align: var(--activity-tab-card-body-vertical-align);
}
.activity-tab-card .activity-tab-card-body ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  gap: var(--activity-tab-card-list-gap);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .activity-tab-card .activity-tab-card-body ul {
    gap: calc(10 * var(--scaleWidth));
  }
}
.activity-tab-card .activity-tab-card-body ul li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  gap: var(--activity-tab-card-list-gap);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .activity-tab-card .activity-tab-card-body ul li {
    gap: calc(10 * var(--scaleWidth));
  }
}

.activity-profile {
  display: flex;
  align-items: center;
  gap: var(--activity-profile-gap);
  background-color: var(--activity-profile-background-color);
  padding: var(--activity-profile-padding);
  border-radius: var(--activity-profile-border-radius);
  border: var(--activity-tab-card-header-border);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .activity-profile {
    gap: calc(15 * var(--scaleWidth));
    padding: calc(15 * var(--scaleWidth)) calc(15 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.activity-profile .profile-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--activity-profile-img-size);
  height: var(--activity-profile-img-size);
  border-radius: var(--activity-profile-img-border-radius);
  overflow: hidden;
  min-width: var(--activity-profile-img-size);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .activity-profile .profile-img {
    width: calc(60 * var(--scaleWidth));
    min-width: calc(60 * var(--scaleWidth));
    height: calc(60 * var(--scaleWidth));
  }
}
.activity-profile .profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.activity-profile .profile-details {
  display: flex;
  flex-direction: column;
  gap: var(--activity-profile-details-gap);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .activity-profile .profile-details {
    gap: calc(10 * var(--scaleWidth));
  }
}
.activity-profile .profile-details .name-details {
  display: inline-flex;
  align-items: center;
  gap: var(--activity-profile-name-details-gap);
  flex-wrap: wrap;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .activity-profile .profile-details .name-details {
    gap: calc(8 * var(--scaleWidth));
  }
}
.activity-profile .profile-details .name-details .name {
  font-size: var(--activity-profile-name-font-size);
  color: var(--activity-profile-name-color);
  font-weight: var(--activity-profile-name-font-weight);
  text-transform: capitalize;
  line-height: var(--activity-profile-name-line-height);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .activity-profile .profile-details .name-details .name {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.activity-profile .profile-details .name-details .date,
.activity-profile .profile-details .name-details .time {
  font-size: var(--activity-profile-date-time-font-size);
  color: var(--activity-profile-date-time-color);
  font-weight: var(--activity-profile-date-time-font-weight);
  line-height: var(--activity-profile-date-time-line-height);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .activity-profile .profile-details .name-details .date,
  .activity-profile .profile-details .name-details .time {
    font-size: calc(12 * var(--scaleWidth));
  }
}
.activity-profile .profile-details .email {
  font-weight: var(--activity-profile-email-font-weight);
  color: var(--activity-profile-email-color);
  font-size: var(--activity-profile-email-font-size);
  line-height: var(--activity-profile-email-line-height);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .activity-profile .profile-details .email {
    font-size: calc(12 * var(--scaleWidth));
  }
}
.activity-profile .profile-details .login-status {
  font-weight: var(--activity-profile-login-font-weight);
  color: var(--activity-profile-login-color);
  font-size: var(--activity-profile-login-font-size);
  line-height: var(--activity-profile-login-line-height);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .activity-profile .profile-details .login-status {
    font-size: calc(12 * var(--scaleWidth));
  }
}

#aduitLogDetails {
  max-width: 811px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #aduitLogDetails {
    max-width: calc(811 * var(--scaleWidth)) !important;
  }
}

#user-profile .profile-card-body {
  max-height: 300px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-right: 5px;
  margin-right: -5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #user-profile .profile-card-body {
    max-height: calc(300 * var(--scaleWidth));
    padding-right: calc(5 * var(--scaleWidth));
    margin-right: calc(-5 * var(--scaleWidth));
  }
}

.logs-card .tabular-tab {
  width: auto;
}
.logs-card .tabular-tab .tabular-tab-nav {
  margin-bottom: 0;
  padding: 0;
  align-items: flex-end;
}
.logs-card .tabular-tab {
  width: auto;
  position: relative;
  z-index: 999;
}
.logs-card #Audit-Log {
  position: relative;
  margin-top: -75px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .logs-card #Audit-Log {
    margin-top: calc(-75 * var(--scaleWidth));
  }
}
@media screen and (max-width: 767px) {
  .logs-card #Audit-Log {
    margin-top: 0;
  }
}
.logs-card .capsule-tab {
  width: auto;
  margin: 0;
  position: relative;
  z-index: 999999;
}
@media screen and (max-width: 767px) {
  .logs-card .capsule-tab {
    width: 100%;
  }
}
.logs-card .capsule-tab .capsule-tab-nav {
  padding: 0;
}
.logs-card .capsule-tab .capsule-tab-nav .capsule-item a {
  gap: 8px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .logs-card .capsule-tab .capsule-tab-nav .capsule-item a {
    gap: calc(8 * var(--scaleWidth));
  }
}

.profile-card-body .accordion {
  overflow: hidden;
}
.profile-card-body .accordion-card {
  box-shadow: none !important;
  border-bottom-width: 2px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .profile-card-body .accordion-card {
    border-bottom-width: calc(2 * var(--scaleWidth));
  }
}

#Activity > div {
  padding-right: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #Activity > div {
    padding-right: calc(5 * var(--scaleWidth));
  }
}
#Activity .activity-tabular-body {
  padding: var(--accordion-card-padding);
  border-radius: var(--accordion-card-borderRadius);
  overflow: hidden;
  margin-bottom: var(--accordion-card-margin-bottom);
  border: var(--accordion-card-border);
  background: var(--accordion-card-background-color);
  border-bottom-width: 2px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #Activity .activity-tabular-body {
    padding: calc(10 * var(--scaleWidth)) calc(10 * var(--scaleWidth));
    margin-bottom: calc(10 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
    border-bottom-width: calc(2 * var(--scaleWidth));
  }
}

.page-heading {
  font-size: var(--font-size-mid-heading-2);
  line-height: 29px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--body-text-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .page-heading {
    font-size: calc(24 * var(--scaleWidth));
    line-height: calc(29 * var(--scaleWidth));
  }
}

.create-steps-widget {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px 35px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .create-steps-widget {
    padding: 0 calc(10 * var(--scaleWidth)) calc(35 * var(--scaleWidth));
  }
}
@media (max-width: 479px) {
  .create-steps-widget {
    margin-bottom: 20px;
    padding-top: 15px;
  }
}
.create-steps-widget ul {
  padding: 0;
  display: flex;
  position: relative;
  margin: 0 -90px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .create-steps-widget ul {
    margin: 0 calc(-90 * var(--scaleWidth));
  }
}
.create-steps-widget ul li {
  list-style-type: none;
  position: relative;
  padding: 0 90px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .create-steps-widget ul li {
    padding: 0 calc(90 * var(--scaleWidth));
  }
}
.create-steps-widget ul li .step-widget {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .create-steps-widget ul li .step-widget {
    gap: calc(10 * var(--scaleWidth));
  }
}
.create-steps-widget ul li .step-widget .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--create-steps-widget-icon-dimension, 50px);
  height: var(--create-steps-widget-icon-dimension, 50px);
  background-color: var(--create-steps-widget-icon-background-color, #ffffff);
  border-radius: var(--create-steps-widget-icon-borderRadius, 100px);
  margin: 0 auto;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .create-steps-widget ul li .step-widget .icon {
    width: calc(50 * var(--scaleWidth));
    height: calc(50 * var(--scaleWidth));
    border-radius: calc(100 * var(--scaleWidth));
  }
}
.create-steps-widget ul li .step-widget .icon .constl-icon {
  font-size: 24px;
  color: #ffffff;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .create-steps-widget ul li .step-widget .icon .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.create-steps-widget ul li .step-widget .icon img {
  max-width: 100%;
}
.create-steps-widget ul li .step-widget .icon::after {
  position: absolute;
  content: "";
  display: inline-block;
  vertical-align: top;
  height: var(--create-steps-widget-line-height, 4px);
  background-color: var(--create-steps-widget-icon-background-color, #ffffff);
  left: 0;
  top: 0;
  width: 100%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .create-steps-widget ul li .step-widget .icon::after {
    height: calc(4 * var(--scaleWidth));
  }
}
.create-steps-widget ul li .step-widget .description {
  display: inline-block;
  width: auto;
  vertical-align: top;
  font-size: var(--create-steps-widget-description-fontSize, 14px);
  text-transform: capitalize;
  font-weight: var(--create-steps-widget-description-fontWeight, 400);
  color: var(--create-steps-widget-description-color, #475467);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .create-steps-widget ul li .step-widget .description {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.create-steps-widget ul li.active .icon {
  background-color: var(--create-steps-widget-active-icon-background-color, #372194);
}

.create-steps-content-widget {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  padding: 0 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .create-steps-content-widget {
    padding: 0 calc(10 * var(--scaleWidth));
  }
}
.create-steps-content-widget .title {
  display: flex;
  align-items: center;
  gap: 0 10px;
  width: 100%;
  font-size: var(--create-steps-content-widget-title-fontSize, 20px);
  color: var(--create-steps-content-widget-title-fontColor, #372194);
  line-height: 24px;
  padding-bottom: var(--create-steps-content-widget-title-padding-bottom, 5px);
  margin-bottom: var(--create-steps-content-widget-title-margine-bottom, 18px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .create-steps-content-widget .title {
    font-size: calc(16 * var(--scaleWidth));
    line-height: calc(24 * var(--scaleWidth));
    padding-bottom: calc(5 * var(--scaleWidth));
    margin-bottom: calc(18 * var(--scaleWidth));
  }
}
.create-steps-content-widget .title span {
  color: var(--create-steps-content-widget-title-span-fontColor, #707070);
}
.create-steps-content-widget .title-content {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  margin-bottom: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .create-steps-content-widget .title-content {
    margin-bottom: calc(5 * var(--scaleWidth));
  }
}
.create-steps-content-widget .title-content .form-group {
  margin-bottom: 25px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .create-steps-content-widget .title-content .form-group {
    margin-bottom: calc(25 * var(--scaleWidth));
  }
}
.create-steps-content-widget .title-content .form-group .custom-select {
  border-radius: 8px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .create-steps-content-widget .title-content .form-group .custom-select {
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.create-steps-content-widget .buttons-groups {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0 10px;
  padding: 20px 0 0;
  border-top: 1px solid #E0E0E0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .create-steps-content-widget .buttons-groups {
    gap: 0 calc(10 * var(--scaleWidth));
    padding: calc(20 * var(--scaleWidth)) 0 0;
  }
}
.create-steps-content-widget .buttons-groups .button {
  height: 40px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .create-steps-content-widget .buttons-groups .button {
    height: calc(40 * var(--scaleWidth));
  }
}

#role-assignment .custom-checkbox.card,
#role-assignment .custom-checkbox-primary.card {
  margin-bottom: 0;
  padding: 0;
  display: flex;
  align-items: center;
  border: 1px solid var(--color-16);
  box-shadow: 0px 0px 4px 0px rgba(104, 104, 104, 0.25);
}
#role-assignment .custom-checkbox.card .custom-control-label,
#role-assignment .custom-checkbox-primary.card .custom-control-label {
  padding: 15px 15px 15px 50px;
  margin: 0;
  margin: auto;
  font-size: var(--font-size-normal);
  line-height: 20px;
  color: var(--color-15);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #role-assignment .custom-checkbox.card .custom-control-label,
  #role-assignment .custom-checkbox-primary.card .custom-control-label {
    padding-top: calc(15 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
    padding-left: calc(50 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
    font-size: calc(16 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
  }
}
#role-assignment .custom-checkbox.card .custom-control-label::after, #role-assignment .custom-checkbox.card .custom-control-label::before,
#role-assignment .custom-checkbox-primary.card .custom-control-label::after,
#role-assignment .custom-checkbox-primary.card .custom-control-label::before {
  top: 50%;
  transform: translateY(-50%);
  left: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #role-assignment .custom-checkbox.card .custom-control-label::after, #role-assignment .custom-checkbox.card .custom-control-label::before,
  #role-assignment .custom-checkbox-primary.card .custom-control-label::after,
  #role-assignment .custom-checkbox-primary.card .custom-control-label::before {
    left: calc(15 * var(--scaleWidth));
  }
}
#role-assignment .custom-checkbox.card .custom-control-label strong,
#role-assignment .custom-checkbox-primary.card .custom-control-label strong {
  font-weight: 500;
}
#role-assignment .col-md-4 {
  margin-bottom: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #role-assignment .col-md-4 {
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}

.role-title {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  margin-bottom: 0;
  font-size: var(--font-size-small);
  line-height: 19.6px;
  color: var(--body-text-color);
  font-weight: 600;
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .role-title {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(19.6 * var(--scaleWidth));
  }
}

.modal-card-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .modal-card-title {
    gap: calc(10 * var(--scaleWidth));
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
.modal-card-title .card-title {
  color: var(--color-01);
  font-size: var(--font-size-small);
  line-height: 17px;
  font-weight: 500;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .modal-card-title .card-title {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(17 * var(--scaleWidth));
  }
}

.form-group-view-horizontal {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .form-group-view-horizontal {
    gap: calc(8 * var(--scaleWidth));
  }
}
.form-group-view-horizontal .view-role-title {
  font-size: var(--font-size-small);
  line-height: 17px;
  color: var(--color-07);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .form-group-view-horizontal .view-role-title {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(17 * var(--scaleWidth));
  }
}

.create-steps-widget ul {
  padding: 0;
  display: flex;
  position: relative;
  margin: 0 -90px;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .create-steps-widget ul {
    margin: 0 calc(-90 * var(--scaleWidth));
  }
}
.create-steps-widget ul li {
  list-style-type: none;
  position: relative;
  padding: 0;
}
.create-steps-widget ul li .step-widget .description {
  display: inline-block;
  width: auto;
  vertical-align: top;
  font-size: var(--font-size-small);
  text-transform: capitalize;
  font-weight: 400;
  position: absolute;
  top: 100%;
  width: 10rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .create-steps-widget ul li .step-widget .description {
    font-size: calc(14 * var(--scaleWidth));
    width: calc(160 * var(--scaleWidth));
  }
}
.create-steps-widget ul li .step-widget .icon::after {
  display: none;
}
.create-steps-widget ul .steps__connector {
  margin-inline-start: 0;
  width: 190px;
  height: 4px;
  transform: translateY(-50%);
  background-color: var(--color-neutral);
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .create-steps-widget ul .steps__connector {
    height: calc(4 * var(--scaleWidth));
    width: calc(190 * var(--scaleWidth));
  }
}
@media (max-width: 479px) {
  .create-steps-widget ul .steps__connector {
    width: 120px;
  }
}
.create-steps-widget ul .steps__connector::before {
  background-color: var(--color-primary-mode);
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(1, 0);
  transform-origin: 50% 0;
}
.create-steps-widget ul .steps__connector li.step-done + .steps__connector:before {
  transform: scale(1, 1);
}

.switches-container {
  width: 106px;
  position: relative;
  display: flex;
  padding: 0;
  position: relative;
  background: var(--color-primary-mode);
  line-height: 2.7rem;
  border-radius: 3rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .switches-container {
    width: calc(106 * var(--scaleWidth));
    line-height: calc(44 * var(--scaleWidth));
    border-radius: calc(48 * var(--scaleWidth));
  }
}
@media (max-width: 479px) {
  .switches-container {
    margin-right: inherit;
    margin-bottom: 10px;
  }
}
.switches-container input {
  visibility: hidden;
  position: absolute;
  top: 0;
}
.switches-container input:nth-of-type(1):checked ~ .switch-wrapper {
  transform: translateX(20%);
}
.switches-container input:nth-of-type(1):checked ~ .switch-wrapper .switchnew div:nth-of-type(1) {
  opacity: 1;
}
.switches-container input:nth-of-type(2):checked ~ .switch-wrapper {
  transform: translateX(100%);
}
.switches-container input:nth-of-type(2):checked ~ .switch-wrapper .switchnew div:nth-of-type(2) {
  opacity: 1;
}
.switches-container .switch-label {
  width: 50%;
  padding: 0;
  margin: 0;
  text-align: center;
  cursor: pointer;
  color: var(--color-white);
  line-height: unset;
  font-size: var(--font-size-normal);
  font-weight: 700;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .switches-container .switch-label {
    font-size: calc(16 * var(--scaleWidth));
  }
}

.switch-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  padding: 9px 5px;
  margin: 0 -5%;
  z-index: 3;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .switch-wrapper {
    padding: calc(9 * var(--scaleWidth)) calc(5 * var(--scaleWidth));
  }
}

.switchnew {
  border-radius: 3rem;
  background: var(--color-white);
  height: 100%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .switchnew {
    border-radius: calc(48 * var(--scaleWidth));
  }
}
.switchnew div {
  width: 100%;
  text-align: center;
  opacity: 0;
  display: block;
  color: var(--color-primary-mode);
  transition: opacity 0.2s cubic-bezier(0.77, 0, 0.175, 1) 0.125s;
  will-change: opacity;
  position: absolute;
  top: 0;
  left: 0;
  font-size: var(--font-size-small);
  font-weight: 600;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .switchnew div {
    font-size: calc(14 * var(--scaleWidth));
  }
}

.service-list-table-hedaer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 768px) {
  .service-list-table-hedaer {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
}

.left-controls {
  display: flex;
  align-items: center;
}
@media (max-width: 479px) {
  .left-controls {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
}

.service-status-wrapper {
  padding: 11px 10px 11px 15px;
  display: flex;
  align-items: center;
  gap: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-status-wrapper {
    padding: calc(11 * var(--scaleWidth)) calc(10 * var(--scaleWidth)) calc(11 * var(--scaleWidth)) calc(15 * var(--scaleWidth));
    gap: calc(15 * var(--scaleWidth));
  }
}
@media (max-width: 479px) {
  .service-status-wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin-bottom: 10px;
  }
}

.service-title {
  font-weight: 500;
  font-size: var(--font-size-normal);
  line-height: 22px;
  letter-spacing: -0.02px;
  color: var(--color-gray-6);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-title {
    font-size: calc(16 * var(--scaleWidth));
    line-height: calc(22 * var(--scaleWidth));
  }
}

.service-value {
  width: 24px;
  height: 24px;
  background: var(--color-primary-mode);
  border-radius: 50%;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-small);
  font-weight: 600;
  line-height: 22px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-value {
    width: calc(24 * var(--scaleWidth));
    height: calc(24 * var(--scaleWidth));
    font-size: calc(16 * var(--scaleWidth));
    line-height: calc(22 * var(--scaleWidth));
  }
}
.service-value.Paid {
  background-color: var(--status-paid-color);
}
.service-value.Due {
  background-color: var(--color-suspended);
}
.service-value.OverdueandPartiallyPaid {
  background-color: var(--status-overdueandpartiallypaid-color);
}
.service-value.Overdue {
  background-color: var(--color-danger-mode);
}

.right-controls {
  display: flex;
  align-items: center;
  gap: 22px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .right-controls {
    gap: calc(22 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .right-controls {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .right-controls {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
}
.right-controls .searchbar input[type=text] {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  max-width: 170px;
  background-color: transparent;
  padding: 12px;
  padding-left: 42px;
  font-size: var(--font-size-small);
  font-weight: 500;
  outline: none;
  border: none;
  background-image: url("../../krypton-theme-css/assets/icons/search.png");
  background-repeat: no-repeat;
  background-position: 12px;
  color: var(--color-12);
  height: 44px;
  border: 1px solid var(--color-13);
  max-width: 100%;
  border-radius: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .right-controls .searchbar input[type=text] {
    padding: calc(12 * var(--scaleWidth));
    padding-left: calc(42 * var(--scaleWidth));
    font-size: calc(16 * var(--scaleWidth));
    line-height: calc(16 * var(--scaleWidth));
    height: calc(44 * var(--scaleWidth));
    border-radius: calc(10 * var(--scaleWidth));
    min-width: calc(170 * var(--scaleWidth));
    background-size: calc(24 * var(--scaleWidth));
    background-position: calc(12 * var(--scaleWidth));
  }
}
.right-controls .searchbar input[type=text]::placeholder {
  color: var(--color-12);
}
@media (max-width: 1199px) {
  .right-controls .searchbar input[type=text] {
    width: 100%;
    border: 1px solid var(--color-13);
    max-width: 100%;
    border-radius: 10px;
  }
}
@media (max-width: 768px) {
  .right-controls .searchbar input[type=text] {
    max-width: 100%;
  }
}

.action-controls {
  display: inline-flex;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1490196078);
  border-radius: 35px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .action-controls {
    border-radius: calc(35 * var(--scaleWidth));
  }
}
.action-controls div {
  padding: 12px 15px;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  align-items: center;
  height: 44px;
  font-size: 0;
  line-height: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .action-controls div {
    height: calc(44 * var(--scaleWidth));
    padding: calc(12 * var(--scaleWidth)) calc(15 * var(--scaleWidth));
  }
}
.action-controls div + div {
  border-left: 1px solid var(--color-10);
}
.action-controls div + div .constl-icon,
.action-controls div + div img {
  width: 24px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .action-controls div + div .constl-icon,
  .action-controls div + div img {
    width: calc(24 * var(--scaleWidth)) !important;
    font-size: calc(24 * var(--scaleWidth)) !important;
  }
}
.action-controls .dropdown-toggle {
  border: 0;
  background: 0;
  padding: 0;
}
.action-controls .dropdown-toggle::after {
  display: none;
}
.action-controls ul.dropdown-menu.show {
  background-color: var(--color-white-background);
  padding: 14px 16px;
  border-radius: 4px;
  border: 0;
  margin: 0;
  right: 0;
  top: 100% !important;
  left: auto !important;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1490196078);
  min-width: 97px;
  transform: none !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .action-controls ul.dropdown-menu.show {
    padding: calc(14 * var(--scaleWidth)) calc(16 * var(--scaleWidth));
    border-radius: calc(4 * var(--scaleWidth));
    min-width: calc(97 * var(--scaleWidth));
  }
}
.action-controls ul.dropdown-menu.show li a {
  display: flex;
  align-items: center;
  gap: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .action-controls ul.dropdown-menu.show li a {
    gap: calc(5 * var(--scaleWidth));
  }
}
.action-controls ul.dropdown-menu.show li a .constl-icon {
  font-size: var(--action-controls-icon-fontSize, 24px);
  color: var(--action-controls-dropdown-icon-pdf-color, #FF0000);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .action-controls ul.dropdown-menu.show li a .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.action-controls ul.dropdown-menu.show li a:hover {
  text-decoration: none;
}
.action-controls ul.dropdown-menu.show li + li {
  margin-top: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .action-controls ul.dropdown-menu.show li + li {
    margin-top: calc(10 * var(--scaleWidth));
  }
}
.action-controls ul.dropdown-menu.show li + li a .constl-icon {
  color: var(--action-controls-dropdown-icon-xls-color, #40bf80);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .action-controls ul.dropdown-menu.show li + li a .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.action-controls .constl-icon {
  font-size: var(--action-controls-icon-fontSize, 24px);
  color: var(--action-controls-icon-color, #372194);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .action-controls .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}

.action-controls:not(:has(.dropdown)) {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .action-controls:not(:has(.dropdown)) {
    width: calc(44 * var(--scaleWidth));
    height: calc(44 * var(--scaleWidth));
  }
}

.action-controls:not(:has(.filterIcon)) {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .action-controls:not(:has(.filterIcon)) {
    width: calc(44 * var(--scaleWidth));
    height: calc(44 * var(--scaleWidth));
  }
}

body:not(:has(.product-menu-open)) .sidebar {
  height: 100%;
  width: 394px;
  position: fixed;
  top: 0;
  right: 0;
  overflow-x: hidden;
  transition: 0.5s;
  z-index: 1095;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  padding-left: 44px;
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */
}
@media (min-width: 1199px) and (max-width: 1400px) {
  body:not(:has(.product-menu-open)) .sidebar {
    width: calc(394 * var(--scaleWidth));
    padding-left: calc(44 * var(--scaleWidth));
  }
}
@media (max-width: 479px) {
  body:not(:has(.product-menu-open)) .sidebar {
    padding-left: 0;
    width: 100%;
  }
}
body:not(:has(.product-menu-open)) .sidebar.show {
  transform: translateX(0);
}
body:not(:has(.product-menu-open)) .sidebar ::-webkit-scrollbar {
  width: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  body:not(:has(.product-menu-open)) .sidebar ::-webkit-scrollbar {
    width: calc(10 * var(--scaleWidth));
  }
}
body:not(:has(.product-menu-open)) .sidebar ::-webkit-scrollbar-track {
  background: var(--color-19);
}
body:not(:has(.product-menu-open)) .sidebar ::-webkit-scrollbar-thumb {
  background: var(--color-20);
  border-radius: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  body:not(:has(.product-menu-open)) .sidebar ::-webkit-scrollbar-thumb {
    border-radius: calc(10 * var(--scaleWidth));
  }
}
body:not(:has(.product-menu-open)) .sidebar ::-webkit-scrollbar-thumb:hover {
  background: var(--color-21);
}
body:not(:has(.product-menu-open)) .sidebar .sidebar-wrapper {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  box-shadow: var(--filterSidebar-border-boxShadow, 0px 3.13px 35.16px 0px rgba(0, 0, 0, 0.14));
  background-color: var(--filterSidebar-background-color, #ffffff);
  height: 100%;
  border-top-left-radius: var(--filterSidebar-border-radius, 20px);
  border-bottom-left-radius: var(--filterSidebar-border-radius, 20px);
  overflow-x: hidden;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  body:not(:has(.product-menu-open)) .sidebar .sidebar-wrapper {
    border-top-left-radius: calc(20 * var(--scaleWidth));
    border-bottom-left-radius: calc(20 * var(--scaleWidth));
  }
}
@media (max-width: 479px) {
  body:not(:has(.product-menu-open)) .sidebar .sidebar-wrapper {
    border-radius: 0;
  }
}
body:not(:has(.product-menu-open)) .sidebar .closebtn {
  position: absolute;
  top: 40px;
  left: 1px;
  font-size: var(--font-size-larger-heading-1);
  padding: 0;
  width: var(--filterSidebar-close-button-dimension, 44px);
  height: var(--filterSidebar-close-button-dimension, 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--filterSidebar-background-color, #ffffff);
  box-shadow: var(--filterSidebar-close-button-boxShadow, -2px 2px 4px -2px rgba(10, 13, 18, 0.1), -2px 4px 6px -1px rgba(10, 13, 18, 0.1));
  border: 1px solid var(--color-10);
  border-right: 0;
  z-index: -1px;
  border-top-left-radius: var(--filterSidebar-close-button-borderRadius, 50px);
  border-bottom-left-radius: var(--filterSidebar-close-button-borderRadius, 50px);
  text-decoration: none !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  body:not(:has(.product-menu-open)) .sidebar .closebtn {
    top: calc(40 * var(--scaleWidth));
    left: calc(1 * var(--scaleWidth));
    font-size: calc(36 * var(--scaleWidth));
    width: calc(44 * var(--scaleWidth));
    height: calc(44 * var(--scaleWidth));
    border-top-left-radius: calc(50 * var(--scaleWidth));
    border-bottom-left-radius: calc(50 * var(--scaleWidth));
  }
}
body:not(:has(.product-menu-open)) .sidebar .closebtn .constl-icon {
  background: var(--filterSidebar-close-icon-background, #FF0000);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--filterSidebar-close-icon-color, #fff);
  border-radius: var(--filterSidebar-close-icon-borderRadius, 50px);
  padding: var(--filterSidebar-close-icon-padding, 4px);
  font-size: var(--filterSidebar-close-icon-font-size, 24px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  body:not(:has(.product-menu-open)) .sidebar .closebtn .constl-icon {
    padding: calc(4 * var(--scaleWidth)) calc(4 * var(--scaleWidth));
    font-size: calc(24 * var(--scaleWidth));
    border-radius: calc(50 * var(--scaleWidth));
  }
}
@media (max-width: 479px) {
  body:not(:has(.product-menu-open)) .sidebar .closebtn {
    right: 15px;
    top: 0;
    left: auto;
    box-shadow: none;
    border: 0;
  }
}

.openbtn {
  cursor: pointer;
}

#main {
  transition: margin-left 0.5s;
  padding: 20px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #main {
    padding: calc(20 * var(--scaleWidth));
  }
}

.sidebar-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: var(--filterSidebar-header-padding, 25px 20px);
  color: var(--filterSidebar-header-color, #414141);
  font-weight: var(--filterSidebar-header-fontWeight, 600);
  font-size: var(--filterSidebar-header-fontSize, 18px);
  line-height: 21.95px;
  background-color: var(--filterSidebar-background-color, #ffffff);
}
.sidebar-header h5 {
  font-size: calc(20 * var(--scaleWidth));
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .sidebar-header {
    padding: calc(25 * var(--scaleWidth)) calc(20 * var(--scaleWidth));
    font-size: calc(18 * var(--scaleWidth));
    line-height: calc(21.95 * var(--scaleWidth));
  }
}

.sidebar-footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  padding: var(--filterSidebar-footer-padding, 25px 20px);
  border-bottom-left-radius: var(--filterSidebar-border-radius, 20px);
  background-color: var(--filterSidebar-background-color, #ffffff);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .sidebar-footer {
    padding: calc(25 * var(--scaleWidth)) calc(20 * var(--scaleWidth));
    border-bottom-left-radius: calc(20 * var(--scaleWidth));
  }
}

.sidebar-content {
  padding: 0 20px;
  background-color: var(--filterSidebar-background-color, #ffffff);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .sidebar-content {
    padding: 0 calc(20 * var(--scaleWidth));
  }
}
.sidebar-content .col-12:last-child {
  margin-bottom: 0 !important;
}

.sidebar-filter-reset {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .sidebar-filter-reset {
    margin-bottom: calc(8 * var(--scaleWidth));
  }
}
.sidebar-filter-reset .title {
  font-weight: var(--filterSidebar-filter-title-fontWeight, 500);
  font-size: var(--filterSidebar-filter-title-fontSize, 16px);
  line-height: 21.95px;
  color: var(--filterSidebar-filter-title-color, #414141);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .sidebar-filter-reset .title {
    font-size: calc(16 * var(--scaleWidth));
    line-height: calc(21.95 * var(--scaleWidth));
  }
}
.sidebar-filter-reset a {
  font-weight: 400;
  font-size: var(--filterSidebar-filter-title-clearAll-fontSize, 14px);
  line-height: 21.95px;
  color: var(--filterSidebar-filter-title-clearAll-color, #372194);
  padding: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .sidebar-filter-reset a {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(21.95 * var(--scaleWidth));
  }
}

.input-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 15px;
  margin-bottom: 15px;
  border-top: var(--filterSidebar-input-group-border-top, 1px solid #000000);
  border-image-source: linear-gradient(0deg, var(--color-black), var(--color-black)), linear-gradient(0deg, var(--Shade-75, rgba(255, 255, 255, 0.75)), var(--Shade-75, rgba(255, 255, 255, 0.75)));
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .input-group-header {
    padding-top: calc(15 * var(--scaleWidth));
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
.input-group-header:not(:has(.title)) {
  font-weight: var(--filterSidebar-input-group-fontWeight, 600);
  font-size: var(--filterSidebar-input-group-title, 16px);
  line-height: 21.95px;
  color: var(--filterSidebar-input-group-title-color, #000000);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .input-group-header:not(:has(.title)) {
    font-size: calc(16 * var(--scaleWidth));
    line-height: calc(21.95 * var(--scaleWidth));
  }
}
.input-group-header .title {
  font-weight: var(--filterSidebar-input-group-fontWeight, 600);
  font-size: var(--filterSidebar-input-group-title, 16px);
  line-height: 21.95px;
  color: var(--filterSidebar-input-group-title-color, #000000);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .input-group-header .title {
    font-size: calc(16 * var(--scaleWidth));
    line-height: calc(21.95 * var(--scaleWidth));
  }
}

.custom-calender input[type=text] {
  background-image: url("..../../krypton-theme-css/assets/icons/calendar.png");
  display: inline-block;
  width: 100%;
  vertical-align: top;
  background-color: var(--filterSidebar-input-form-control-backrgound-color, #ffffff);
  color: var(--filterSidebar-input-form-control-color, #9BA5B7);
  padding: 12px;
  padding-left: 45px;
  font-size: var(--filterSidebar-input-form-control-fontSize, 14px);
  font-weight: var(--filterSidebar-input-form-control-fontWeight, 500);
  background-repeat: no-repeat;
  background-position: 12px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .custom-calender input[type=text] {
    padding: calc(12 * var(--scaleWidth));
    padding-left: calc(45 * var(--scaleWidth));
    font-size: calc(14 * var(--scaleWidth));
    background-position: calc(12 * var(--scaleWidth));
  }
}

.tabs-lines-fiber {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
.tabs-lines-fiber .tab-wrapper {
  display: inline-block;
  width: auto;
  vertical-align: top;
  background-color: var(--capsule-tabbing-background-color);
  padding: var(--capsule-tabbing-nav-padding);
  border-radius: 25px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .tabs-lines-fiber .tab-wrapper {
    padding: calc(3 * var(--scaleWidth)) calc(3 * var(--scaleWidth));
    border-radius: calc(25 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .tabs-lines-fiber .tab-wrapper {
    width: 100%;
    padding: 15px;
    border-radius: 15px;
  }
}
.tabs-lines-fiber .tab-wrapper ul.tab-nav {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0 10px;
  flex-wrap: wrap;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .tabs-lines-fiber .tab-wrapper ul.tab-nav {
    gap: 0 calc(10 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .tabs-lines-fiber .tab-wrapper ul.tab-nav {
    gap: 10px;
  }
}
.tabs-lines-fiber .tab-wrapper ul.tab-nav li {
  list-style: none;
}
@media (max-width: 768px) {
  .tabs-lines-fiber .tab-wrapper ul.tab-nav li {
    width: calc(50% - 5px);
  }
}
@media (max-width: 479px) {
  .tabs-lines-fiber .tab-wrapper ul.tab-nav li {
    width: 100%;
  }
}
.tabs-lines-fiber .tab-wrapper ul.tab-nav li a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--capsule-tabbing-nav-item-fontSize);
  line-height: 137.5%;
  text-transform: capitalize;
  font-weight: 500;
  min-width: 139px;
  height: 44px;
  color: var(--capsule-tabbing-nav-item-color);
  text-decoration: none;
  border-radius: var(--capsule-tabbing-nav-item-borderRadius);
  padding: 0 12px;
  text-align: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .tabs-lines-fiber .tab-wrapper ul.tab-nav li a {
    font-size: calc(16 * var(--scaleWidth));
    min-width: calc(139 * var(--scaleWidth));
    height: calc(44 * var(--scaleWidth));
    border-radius: calc(45 * var(--scaleWidth));
    padding: 0 calc(12 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .tabs-lines-fiber .tab-wrapper ul.tab-nav li a {
    border: 1px solid var(--capsule-tabbing-nav-item-active-backrgound-color);
    color: var(--capsule-tabbing-nav-item-active-backrgound-color);
  }
}
.tabs-lines-fiber .tab-wrapper ul.tab-nav li a.active {
  background-color: var(--capsule-tabbing-nav-item-active-backrgound-color);
  color: var(--capsule-tabbing-nav-item-active-color);
  font-weight: 600;
}

.widget-service-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--widget-service-list-padding, 15px);
  box-shadow: var(--widget-service-list-boxShadow, 0px 1px 20px 0px rgba(0, 0, 0, 0.1));
  border-radius: var(--widget-service-list-borderRadius, 12px);
  background-color: var(--widget-service-list-background-color, #FFFFFF);
  overflow: inherit;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .widget-service-list {
    padding: calc(15 * var(--scaleWidth)) calc(15 * var(--scaleWidth));
    border-radius: calc(12 * var(--scaleWidth));
  }
}
.widget-service-list.active-service {
  justify-content: space-between;
}
.widget-service-list.active-service .status-row {
  justify-content: flex-end !important;
}
.widget-service-list.active-service .status-row .value {
  font-size: var(--widget-service-list-widget-active-status-value-fontSize, 100px) !important;
  line-height: 100%;
}
.widget-service-list .widget-title {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: var(--widget-service-list-heading-margin-bottom, 20px);
  font-size: var(--widget-service-list-heading-fontSize, 22px);
  color: var(--widget-service-list-heading-color, #475467);
  line-height: 19.1px;
  font-weight: var(--widget-service-list-heading-fontWeight, 500);
  width: 100%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .widget-service-list .widget-title {
    gap: calc(10 * var(--scaleWidth));
    margin-bottom: calc(20 * var(--scaleWidth));
    font-size: calc(22 * var(--scaleWidth));
    line-height: calc(19.1 * var(--scaleWidth));
  }
}
.widget-service-list .widget-title .constl-icon {
  font-size: var(--widget-service-list-heading-icon-fontSize, 35px);
  color: var(--widget-service-list-heading-icon-color, #372194);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .widget-service-list .widget-title .constl-icon {
    font-size: calc(35 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .widget-service-list .widget-title .constl-icon {
    font-size: 28px;
  }
}
.widget-service-list .widget-body {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.widget-service-list .widget-body .status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.widget-service-list .widget-body .status-row .value {
  font-size: var(--widget-service-list-widget-status-value-fontSize, 32px);
  color: var(--widget-service-list-widget-status-value-color, #40BF80);
  font-weight: var(--widget-service-list-widget-status-value-fontWeight, 700);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .widget-service-list .widget-body .status-row .value {
    font-size: calc(32 * var(--scaleWidth));
  }
}
.widget-service-list .widget-body .status-row .title {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(-- var(--color-accent)), 0.2);
  padding: var(--widget-service-list-widget-status-title-padding, 8px 15px);
  gap: 0 5px;
  border-radius: var(--widget-service-list-widget-status-title-borderRadius, 20px);
  color: var(--widget-service-list-widget-status-title-color, #40BF80);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .widget-service-list .widget-body .status-row .title {
    padding: calc(8 * var(--scaleWidth)) calc(15 * var(--scaleWidth));
    gap: 0 calc(5 * var(--scaleWidth));
    border-radius: calc(20 * var(--scaleWidth));
  }
}

#entityByStatusChartContainer {
  display: flex;
  align-items: center;
  justify-content: center;
}
#entityByStatusChartContainer .chart-container {
  width: 300px;
}

.progress-bar-wrap {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 8px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .progress-bar-wrap {
    gap: calc(8 * var(--scaleWidth));
  }
}
.progress-bar-wrap .progress-bar {
  background-color: var(--widget-service-list-progressbar-background-color, #EDEBEB);
  font-size: var(--widget-service-list-progressbar-font-size, 11px);
  line-height: 22px;
  color: var(--widget-service-list-progressbar-color, #000000);
  font-weight: var(--widget-service-list-progressbar-font-weight, 400);
  text-align: right;
  border-radius: var(--widget-service-list-progressbar-borderRadius, 15px);
  padding: var(--widget-service-list-progressbar-padding, 5px);
  height: var(--widget-service-list-progressbar-height, 24px);
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .progress-bar-wrap .progress-bar {
    font-size: calc(11 * var(--scaleWidth));
    line-height: calc(22 * var(--scaleWidth));
    height: calc(24 * var(--scaleWidth));
    padding: calc(5 * var(--scaleWidth)) calc(5 * var(--scaleWidth));
    border-radius: calc(15 * var(--scaleWidth));
  }
}
.progress-bar-wrap .progress-bar .body-title {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .progress-bar-wrap .progress-bar .body-title {
    gap: calc(5 * var(--scaleWidth));
  }
}
.progress-bar-wrap .progress-bar .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--widget-service-list-progressbar-icon-dimension, 14px);
  height: var(--widget-service-list-progressbar-icon-dimension, 14px);
  background-color: var(--widget-service-list-progressbar-icon-backrgound-color, rgba(255, 255, 255, 0.8));
  border-radius: var(--widget-service-list-progressbar-icon-borderRadius, 20px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .progress-bar-wrap .progress-bar .icon {
    width: calc(14 * var(--scaleWidth));
    height: calc(14 * var(--scaleWidth));
    border-radius: calc(20 * var(--scaleWidth));
  }
}
.progress-bar-wrap .progress-bar .icon .constl-icon {
  font-size: 16px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .progress-bar-wrap .progress-bar .icon .constl-icon {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.progress-bar-wrap .progress-bar .progress-completed-wrap {
  height: calc(100% - 0px);
  width: calc(100% - 0px);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.progress-bar-wrap .progress-bar .progress-completed {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  left: 0;
  background-color: var(--widget-service-list-progressbar-progressCompleted-background-color, #000000);
  border-radius: var(--widget-service-list-progressbar-progressCompleted-borderRadius, 15px);
  padding-right: var(--widget-service-list-progressbar-progressCompleted-padding-right, 20px);
  color: var(--widget-service-list-progressbar-progressCompleted-color, #000000);
  font-size: var(--widget-service-list-progressbar-progressCompleted-fontSize, 12px);
  line-height: 116.67%;
  font-weight: var(--widget-service-list-progressbar-progressCompleted-fontWeight, 400);
  text-align: left;
  padding-left: var(--widget-service-list-progressbar-progressCompleted-padding-left, 8px);
  display: flex;
  align-items: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .progress-bar-wrap .progress-bar .progress-completed {
    padding-right: calc(20 * var(--scaleWidth));
    padding-left: calc(8 * var(--scaleWidth));
    font-size: calc(16 * var(--scaleWidth));
    border-radius: calc(15 * var(--scaleWidth));
  }
}
.progress-bar-wrap .progress-bar .progress-completed .icon {
  position: absolute;
  right: 4px;
  top: 2.5px;
  background-color: var(--widget-service-list-progressbar-progressCompleted-icon-backrgound-color, rgba(255, 255, 255, 0.41));
  display: none;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .progress-bar-wrap .progress-bar .progress-completed .icon {
    right: calc(4 * var(--scaleWidth));
    top: calc(2.5 * var(--scaleWidth));
  }
}
.progress-bar-wrap .progress-titlebar {
  display: flex;
  justify-content: space-between;
  gap: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .progress-bar-wrap .progress-titlebar {
    gap: calc(5 * var(--scaleWidth));
  }
}
.progress-bar-wrap .progress-titlebar .progress-bar {
  width: calc(100% - 80px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .progress-bar-wrap .progress-titlebar .progress-bar {
    width: calc(100% - 80 * var(--scaleWidth));
  }
}
.progress-bar-wrap .progress-titlebar .progress-title {
  font-size: var(--widget-service-list-progressbar-value-fontSize, 12px);
  line-height: 22px;
  color: var(--widget-service-list-progressbar-value-color, #000000);
  letter-spacing: -0.2px;
  text-align: right;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .progress-bar-wrap .progress-titlebar .progress-title {
    font-size: calc(12 * var(--scaleWidth));
    line-height: calc(22 * var(--scaleWidth));
  }
}

.open-sidebar .sidebar {
  z-index: 9999;
}
.open-sidebar .left-sidebar {
  z-index: -1;
}

.service-status-wrapper.active {
  background: var(--color-primary-mode);
  border-radius: 3rem;
  padding: 11px 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-status-wrapper.active {
    padding: calc(11 * var(--scaleWidth)) calc(15 * var(--scaleWidth));
    border-radius: calc(48 * var(--scaleWidth));
  }
}
.service-status-wrapper.active .service-title {
  color: var(--color-white);
}
.service-status-wrapper.active .service-value {
  color: var(--color-primary-mode);
  background-color: var(--color-white-background);
  min-width: 40px;
  border-radius: 20px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-status-wrapper.active .service-value {
    min-width: calc(40 * var(--scaleWidth));
    border-radius: calc(20 * var(--scaleWidth));
  }
}

#relatedTicketsTable.dataTable thead tr th:last-child {
  width: 160px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #relatedTicketsTable.dataTable thead tr th:last-child {
    width: calc(160 * var(--scaleWidth));
  }
}

@media (max-width: 768px) {
  .select-segmemt,
  .select-status {
    width: 100% !important;
  }
  .select-segmemt .form-group .custom-select,
  .select-status .form-group .custom-select {
    max-width: 100% !important;
    width: 100% !important;
  }
}
.service-detail-card .card-header {
  display: flex;
  align-items: center;
  background-color: var(--service-detail-header-bg-color);
  border: var(--service-detail-header-border);
  padding: var(--service-detail-header-padding);
  justify-content: space-between;
  margin-bottom: var(--service-detail-header-margin-bottom);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-detail-card .card-header {
    margin-bottom: calc(25 * var(--scaleWidth));
  }
}
@media (max-width: 1024px) {
  .service-detail-card .card-header {
    flex-direction: row;
  }
}
@media (max-width: 768px) {
  .service-detail-card .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
}
.service-detail-card .card-header .orderNumber {
  display: flex;
  align-items: center;
  font-size: var(--service-detail-order-number-font-size);
  line-height: var(--service-detail-order-number-line-height);
  color: var(--service-detail-order-number-color);
  font-weight: var(--service-detail-order-number-font-weight);
  gap: var(--service-detail-order-number-gap);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-detail-card .card-header .orderNumber {
    font-size: calc(20 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
  }
}
.service-detail-card .card-header .orderNumber span {
  color: var(--service-detail-order-number-highlight-color);
}
@media (max-width: 479px) {
  .service-detail-card .card-header .orderNumber {
    font-size: var(--service-detail-order-number-font-size-mobile);
  }
}
.service-detail-card .card-header .button-icon-text {
  width: var(--service-detail-button-width);
  height: var(--service-detail-button-height);
  font-size: var(--service-detail-button-font-size);
  padding: var(--service-detail-button-padding);
  font-weight: var(--service-detail-button-font-weight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-detail-card .card-header .button-icon-text {
    width: calc(142 * var(--scaleWidth));
    height: calc(40 * var(--scaleWidth));
    font-size: calc(14 * var(--scaleWidth));
  }
}
.service-detail-card .tabular-content-container {
  max-height: var(--service-detail-tabular-max-height);
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  padding-right: var(--service-detail-tabular-padding-right);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-detail-card .tabular-content-container {
    max-height: calc(400 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
  }
}
.service-detail-card .capsule-content {
  max-height: var(--service-detail-capsule-max-height);
  min-height: var(--service-detail-capsule-min-height);
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-detail-card .capsule-content {
    max-height: calc(400 * var(--scaleWidth));
    min-height: calc(400 * var(--scaleWidth));
  }
}
.service-detail-card .service-detail-escalation .tabular-content-title {
  min-height: var(--service-detail-escalation-title-min-height);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-detail-card .service-detail-escalation .tabular-content-title {
    min-height: calc(42 * var(--scaleWidth));
  }
}
.service-detail-card .service-detail-escalation .escalation-card-details {
  min-height: var(--service-detail-escalation-card-min-height);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-detail-card .service-detail-escalation .escalation-card-details {
    min-height: calc(207 * var(--scaleWidth));
  }
}

.service-up {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--service-detail-service-growth-status-padding, 3px 10px);
  font-size: var(--service-detail-service-growth-status-fontSize, 12px);
  line-height: var(--service-detail-service-growth-status-lineHeight, 18px);
  color: var(--service-detail-service-growth-status-up-color, #40BF80) !important;
  border-radius: var(--service-detail-service-growth-status-borderRadius, 50px);
  border: var(--service-detail-service-growth-status-up-border, 1px solid #40BF80) !important;
  background: var(--service-detail-service-growth-status-up-background, #ECFDF3) !important;
  min-width: var(--service-detail-service-growth-status-width, 65px);
  gap: 6px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-up {
    padding: calc(3 * var(--scaleWidth)) calc(10 * var(--scaleWidth));
    min-width: calc(65 * var(--scaleWidth));
    font-size: calc(12 * var(--scaleWidth));
    gap: calc(6 * var(--scaleWidth));
    border-radius: calc(50 * var(--scaleWidth));
  }
}
.service-up .constl-icon {
  color: var(--service-detail-service-growth-status-up-color, #40BF80) !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-up .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}

.service-down {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--service-detail-service-growth-status-padding, 3px 10px);
  font-size: var(--service-detail-service-growth-status-fontSize, 12px);
  line-height: var(--service-detail-service-growth-status-lineHeight, 18px);
  color: var(--service-detail-service-growth-status-down-color, #F04438) !important;
  border-radius: var(--service-detail-service-growth-status-borderRadius, 50px);
  border: var(--service-detail-service-growth-status-down-border, 1px solid #F04438) !important;
  background: var(--service-detail-service-growth-status-down-background, rgba(240, 68, 56, 0.2)) !important;
  min-width: var(--service-detail-service-growth-status-width, 65px);
  gap: 6px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-down {
    padding: calc(3 * var(--scaleWidth)) calc(10 * var(--scaleWidth));
    min-width: calc(65 * var(--scaleWidth));
    font-size: calc(12 * var(--scaleWidth));
    gap: calc(6 * var(--scaleWidth));
    border-radius: calc(50 * var(--scaleWidth));
  }
}
.service-down .constl-icon {
  color: var(--service-detail-service-growth-status-down-color, #F04438) !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-down .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}

.rout-detail {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  margin-bottom: var(--rout-detail-margin-bottom);
  position: relative;
  overflow: hidden;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .rout-detail {
    margin-bottom: calc(30 * var(--scaleWidth));
  }
}
.rout-detail::after {
  position: absolute;
  left: 0;
  top: var(--rout-detail-line-top);
  content: "";
  display: inline-block;
  width: var(--rout-detail-line-width-desktop);
  height: var(--rout-detail-line-height);
  border-top: var(--rout-detail-line-height) dashed var(--rout-detail-line-color);
  right: 0;
  margin: 0 auto;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .rout-detail::after {
    top: calc(28 * var(--scaleWidth));
    width: calc(100% - 200 * var(--scaleWidth));
    height: calc(2 * var(--scaleWidth));
    border-top: calc(2 * var(--scaleWidth)) dashed var(--rout-detail-line-color);
  }
}
@media (max-width: 768px) {
  .rout-detail::after {
    width: var(--rout-detail-line-width-mobile);
    height: var(--rout-detail-line-height-mobile);
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    border-top: none;
    border-left: var(--rout-detail-line-height) dashed var(--rout-detail-line-color);
  }
}
.rout-detail > ul {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}
@media (max-width: 768px) {
  .rout-detail > ul {
    gap: var(--rout-detail-list-gap-mobile);
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
.rout-detail > ul > li {
  list-style: none;
  padding: 0;
}
.rout-detail > ul > li .rout-info {
  display: flex;
  flex-direction: column;
  width: var(--rout-detail-info-width);
  gap: var(--rout-detail-info-gap);
  z-index: 1;
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .rout-detail > ul > li .rout-info {
    width: calc(280 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .rout-detail > ul > li .rout-info {
    align-items: center;
    background-color: var(--rout-detail-info-bg-mobile);
  }
}
.rout-detail > ul > li .rout-info .destination-title {
  display: flex;
  align-items: center;
  height: var(--rout-detail-title-height);
  border: var(--rout-detail-title-border);
  width: auto;
  max-width: max-content;
  padding: var(--rout-detail-title-padding);
  border-radius: var(--rout-detail-title-radius);
  font-size: var(--rout-detail-title-font-size);
  line-height: var(--rout-detail-title-line-height);
  color: var(--rout-detail-title-color);
  font-weight: var(--rout-detail-title-font-weight);
  text-transform: capitalize;
  gap: var(--rout-detail-title-gap);
  background-color: var(--rout-detail-title-bg);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .rout-detail > ul > li .rout-info .destination-title {
    padding: calc(8 * var(--scaleWidth));
    border-radius: calc(30 * var(--scaleWidth));
    font-size: calc(16 * var(--scaleWidth));
    gap: calc(8 * var(--scaleWidth));
    height: calc(60 * var(--scaleWidth));
  }
}
.rout-detail > ul > li .rout-info .destination-title .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--rout-detail-icon-width);
  height: var(--rout-detail-icon-height);
  background-color: color-mix(in srgb, var(--rout-detail-icon-bg) 30%, transparent);
  border-radius: var(--rout-detail-icon-radius);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .rout-detail > ul > li .rout-info .destination-title .icon {
    width: calc(44 * var(--scaleWidth));
    height: calc(44 * var(--scaleWidth));
    border-radius: calc(29 * var(--scaleWidth));
  }
}
.rout-detail > ul > li .rout-info .destination-title .icon .constl-icon {
  font-size: var(--rout-detail-icon-fontSize, 28px);
  color: var(--rout-detail-icon-color, #372194);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .rout-detail > ul > li .rout-info .destination-title .icon .constl-icon {
    font-size: calc(28 * var(--scaleWidth));
  }
}
.rout-detail > ul > li .rout-info .destination-address {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--rout-detail-address-font-size);
  line-height: var(--rout-detail-address-line-height);
  color: var(--rout-detail-address-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .rout-detail > ul > li .rout-info .destination-address {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .rout-detail > ul > li.rout-from .rout-info {
    flex-direction: column-reverse;
    justify-content: center;
    text-align: center;
  }
}
.rout-detail > ul > li.rout-from .rout-info .destination-title {
  align-self: center;
  min-width: var(--rout-detail-title-min-width);
  justify-content: flex-end;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .rout-detail > ul > li.rout-from .rout-info .destination-title {
    min-width: calc(140 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .rout-detail > ul > li.rout-from .rout-info .destination-title {
    align-self: inherit;
  }
}
.rout-detail > ul > li.rout-from .destination-address {
  text-align: center;
}
@media (max-width: 768px) {
  .rout-detail > ul > li.rout-from .destination-address {
    text-align: inherit;
  }
}
.rout-detail > ul > li.rout-to .rout-info {
  text-align: right;
}
@media (max-width: 768px) {
  .rout-detail > ul > li.rout-to .rout-info {
    align-items: center;
  }
}
.rout-detail > ul > li.rout-to .rout-info .destination-title {
  flex-direction: row-reverse;
  min-width: var(--rout-detail-title-min-width);
  justify-content: flex-end;
  text-align: left;
  align-self: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .rout-detail > ul > li.rout-to .rout-info .destination-title {
    min-width: calc(140 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .rout-detail > ul > li.rout-to .rout-info .destination-title {
    align-self: center;
  }
}
.rout-detail > ul > li.rout-to .rout-info .destination-address {
  text-align: center;
}
@media (max-width: 768px) {
  .rout-detail > ul > li.rout-to .rout-info .destination-address {
    text-align: inherit;
  }
}

.status-rout-time {
  display: flex;
  border: 1px solid var(--service-detail-status-rout-time-border-color);
  border-radius: var(--service-detail-status-rout-time-border-radius);
  margin-bottom: var(--service-detail-status-rout-time-margin-bottom-desktop);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-rout-time {
    border-radius: calc(10 * var(--scaleWidth));
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .status-rout-time {
    flex-direction: column;
    margin-bottom: var(--service-detail-status-rout-time-margin-bottom-mobile);
  }
}
.status-rout-time .row-cols {
  flex: 1;
  padding: var(--service-detail-status-rout-time-col-padding);
  border-right: var(--service-detail-status-rout-time-col-border-right);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-rout-time .row-cols {
    padding: calc(15 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .status-rout-time .row-cols {
    border-right: 0;
    border-bottom: var(--service-detail-status-rout-time-col-border-bottom-mobile);
  }
}
.status-rout-time .row-cols:last-child {
  border: 0;
}
.status-rout-time .row-cols .status-time-row {
  display: flex;
  flex-direction: column;
  gap: var(--service-detail-status-rout-time-gap);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-rout-time .row-cols .status-time-row {
    gap: calc(2 * var(--scaleWidth));
  }
}
.status-rout-time .row-cols .status-time-row .title {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--service-detail-status-rout-time-title-font-size);
  line-height: var(--service-detail-status-rout-time-title-line-height);
  color: var(--service-detail-status-rout-time-title-color);
  text-transform: var(--service-detail-status-rout-time-title-transform);
  font-weight: var(--service-detail-status-rout-time-title-font-weight);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--service-detail-status-rout-time-title-color);
  margin-bottom: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-rout-time .row-cols .status-time-row .title {
    font-size: calc(16 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
    gap: calc(4 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    margin-bottom: calc(10 * var(--scaleWidth));
  }
}
@media (max-width: 1199px) {
  .status-rout-time .row-cols .status-time-row .title {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
  }
}
.status-rout-time .row-cols .status-time-row .title .constl-icon {
  color: var(--service-detail-status-rout-time-title-color);
}
.status-rout-time .row-cols .status-time-row .value {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--service-detail-status-rout-time-value-font-size);
  line-height: var(--service-detail-status-rout-time-value-line-height);
  color: var(--service-detail-status-rout-time-value-color);
  font-weight: var(--service-detail-status-rout-time-value-font-weight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-rout-time .row-cols .status-time-row .value {
    font-size: calc(16 * var(--scaleWidth));
    line-height: calc(22.4 * var(--scaleWidth));
  }
}

.constl-team-card {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  padding: var(--constl-team-card-padding);
  border: var(--constl-team-card-border);
  border-radius: var(--constl-team-card-borderRadius);
  box-shadow: var(--constl-team-card-boxShadow);
  background: var(--constl-team-card-background-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-team-card {
    padding: calc(15 * var(--scaleWidth)) calc(20 * var(--scaleWidth));
    border-radius: calc(15 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .constl-team-card {
    padding: 15px;
  }
}
.constl-team-card > .row {
  gap: 10px 0;
}
.constl-team-card .title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: var(--constl-team-card-title-fontSize);
  line-height: normal;
  color: var(--constl-team-card-title-color);
  font-weight: var(--constl-team-card-fontWeight);
  margin-bottom: var(--constl-team-card-margine-bottom);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-team-card .title {
    gap: calc(10 * var(--scaleWidth));
    font-size: calc(18 * var(--scaleWidth));
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
.constl-team-card .title + .row {
  gap: 15px 0;
}
@media (max-width: 768px) {
  .constl-team-card .title {
    font-size: var(--font-size-normal);
  }
}
.constl-team-card .team-card {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  padding: 15px;
  border: 1px solid var(--color-14);
  border-radius: var(--team-details-card-borderRadius);
  box-shadow: var(--team-details-card-boxShadow);
  background: var(--team-details-card-background-color);
  height: 100%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-team-card .team-card {
    padding: calc(15 * var(--scaleWidth));
    border-radius: calc(15 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .constl-team-card .team-card {
    padding: 15px;
  }
}
.constl-team-card .team-card .team-detail-header .team-profile {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: var(--constl-team-card-detail-profile-dimension, 60px);
  height: var(--constl-team-card-detail-profile-dimension, 60px);
  border-radius: var(--constl-team-card-detail-profile-borderRadius, 100px);
  overflow: hidden;
  background-color: var(--constl-team-card-detail-profile-background-color, #f1f2f5);
  color: var(--constl-team-card-detail-profile-color, #6b6c7e);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-team-card .team-card .team-detail-header .team-profile {
    width: calc(60 * var(--scaleWidth));
    height: calc(60 * var(--scaleWidth));
  }
}
.constl-team-card .team-card .team-detail-header .team-profile .constl-icon {
  color: var(--constl-team-card-detail-profile-color, #6b6c7e);
  font-size: var(--constl-team-card-detail-profile-fontSize, 35px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-team-card .team-card .team-detail-header .team-profile .constl-icon {
    font-size: calc(35 * var(--scaleWidth));
  }
}
.constl-team-card .team-card .team-department {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: var(--team-details-card-department-fontSize);
  line-height: 120%;
  color: var(--team-details-card-department-color);
  font-weight: var(--team-details-card-department-fontWeight);
  margin-bottom: var(--team-details-card-department-margine-bottom);
  padding-bottom: 10px;
  border-bottom: 1px solid #475467;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-team-card .team-card .team-department {
    gap: calc(10 * var(--scaleWidth));
    font-size: calc(16 * var(--scaleWidth));
    margin-bottom: calc(25 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
  }
}
.constl-team-card .team-card .team-department .constl-icon {
  font-size: var(--team-details-card-department-icon-fontSize, 24px);
  color: var(--team-details-card-department-icon-color, #372194);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-team-card .team-card .team-department .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .constl-team-card .team-card .team-department {
    font-size: var(--font-size-normal);
    margin-bottom: 15px;
  }
}
.constl-team-card .team-card .team-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-team-card .team-card .team-detail {
    gap: calc(20 * var(--scaleWidth));
  }
}
@media (max-width: 479px) {
  .constl-team-card .team-card .team-detail {
    flex-direction: column;
    width: 100%;
  }
}
.constl-team-card .team-card .team-detail .team-profile {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: var(--avtar-dimension, 80px);
  height: var(--avtar-dimension, 80px);
  border-radius: 100px;
  overflow: hidden;
  background-color: var(--avtar-background-color, #f1f2f5);
  color: var(--avtar-color, #6b6c7e);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-team-card .team-card .team-detail .team-profile {
    width: calc(80 * var(--scaleWidth));
    height: calc(80 * var(--scaleWidth));
  }
}
.constl-team-card .team-card .team-detail .team-profile img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.constl-team-card .team-card .team-detail .team-profile .constl-icon {
  color: var(--avtar-color, #6b6c7e);
  font-size: var(--avtar-fontSize, 35px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-team-card .team-card .team-detail .team-profile .constl-icon {
    font-size: calc(35 * var(--scaleWidth));
  }
}
.constl-team-card .team-card .team-detail .team-profile-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-team-card .team-card .team-detail .team-profile-detail {
    gap: calc(10 * var(--scaleWidth));
  }
}
@media (max-width: 479px) {
  .constl-team-card .team-card .team-detail .team-profile-detail {
    width: 100%;
  }
}
.constl-team-card .team-card .team-detail .team-profile-detail > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-team-card .team-card .team-detail .team-profile-detail > div {
    gap: calc(8 * var(--scaleWidth));
  }
}
.constl-team-card .team-card .team-detail .team-profile-detail > div .constl-icon {
  font-size: 24px;
  line-height: 1;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-team-card .team-card .team-detail .team-profile-detail > div .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.constl-team-card .team-card .team-detail .team-profile-detail .name {
  font-size: var(--team-details-card-profile-details-name-fontSize);
  line-height: normal;
  color: var(--team-details-card-profile-details-name-color);
  font-weight: var(--team-details-card-profile-details-name-fontWeight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-team-card .team-card .team-detail .team-profile-detail .name {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.constl-team-card .team-card .team-detail .team-profile-detail .name .constl-icon {
  color: var(--team-details-card-profile-details-name-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-team-card .team-card .team-detail .team-profile-detail .name .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.constl-team-card .team-card .team-detail .team-profile-detail .designation {
  font-size: var(--team-details-card-profile-details-designation-fontSize);
  line-height: normal;
  color: var(--team-details-card-profile-details-designation-color);
  font-weight: var(--team-details-card-profile-details-designation-fontWeight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-team-card .team-card .team-detail .team-profile-detail .designation {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.constl-team-card .team-card .team-detail .team-profile-detail .designation .constl-icon {
  color: var(--team-details-card-profile-details-designation-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-team-card .team-card .team-detail .team-profile-detail .designation .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.constl-team-card .team-card .team-detail .team-profile-detail .email {
  font-size: var(--team-details-card-profile-details-email-fontSize);
  line-height: normal;
  color: var(--team-details-card-profile-details-email-color);
  font-weight: var(--team-details-card-profile-details-email-fontWeight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-team-card .team-card .team-detail .team-profile-detail .email {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.constl-team-card .team-card .team-detail .team-profile-detail .email .constl-icon {
  color: var(--team-details-card-profile-details-email-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-team-card .team-card .team-detail .team-profile-detail .email .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.constl-team-card .team-card .team-detail .team-profile-detail .email a {
  color: var(--team-details-card-profile-details-email-color);
}
.constl-team-card .team-card .team-detail .team-profile-detail .contact {
  font-size: var(--team-details-card-profile-details-contact-fontSize);
  line-height: normal;
  color: var(--team-details-card-profile-details-contact-color);
  font-weight: var(--team-details-card-profile-details-contact-fontWeight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-team-card .team-card .team-detail .team-profile-detail .contact {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.constl-team-card .team-card .team-detail .team-profile-detail .contact .constl-icon {
  color: var(--team-details-card-profile-details-contact-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-team-card .team-card .team-detail .team-profile-detail .contact .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.constl-team-card .team-card .team-detail .team-profile-detail .contact a {
  color: var(--team-details-card-profile-details-contact-color);
}

.service-map-card {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  height: 100%;
  position: relative;
}
@media (max-width: 768px) {
  .service-map-card {
    margin-top: var(--service-detail-map-card-margin-top-mobile);
  }
}
.service-map-card .title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--service-detail-map-card-title-gap);
  font-size: var(--service-detail-map-card-title-font-size);
  line-height: var(--service-detail-map-card-title-line-height);
  color: var(--service-detail-map-card-title-color, #372194);
  font-weight: var(--service-detail-map-card-title-font-weight);
  margin-bottom: var(--service-detail-map-card-title-margin-bottom);
  position: absolute;
  left: 0;
  top: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-map-card .title {
    gap: calc(10 * var(--scaleWidth));
    font-size: calc(24 * var(--scaleWidth));
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
.service-map-card .title .constl-icon {
  font-size: var(--service-detail-map-card-title-icon-fontSize, 28px);
  color: var(--service-detail-map-card-title-icon-color, #372194);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-map-card .title .constl-icon {
    font-size: calc(28 * var(--scaleWidth));
  }
}
.service-map-card .mapbox-wrap {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  height: 100%;
  border-radius: var(--service-detail-map-card-border-radius);
  border: 1px solid var(--service-detail-map-card-border-color);
  box-shadow: var(--service-detail-map-card-box-shadow);
  position: relative;
  overflow: hidden;
  min-height: var(--service-detail-map-card-min-height);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-map-card .mapbox-wrap {
    border-radius: calc(15 * var(--scaleWidth));
    min-height: calc(500 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .service-map-card .mapbox-wrap {
    min-height: var(--service-detail-map-card-min-height-mobile);
  }
}
.service-map-card .mapbox-wrap img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-detail-card .card-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--service-detail-card-title-gap);
  font-size: var(--service-detail-card-title-font-size);
  line-height: var(--service-detail-card-title-line-height);
  color: var(--service-detail-card-title-color);
  font-weight: var(--service-detail-card-title-font-weight);
  margin-bottom: var(--service-detail-card-title-margin-bottom);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-detail-card .card-title {
    gap: calc(10 * var(--scaleWidth));
    font-size: calc(18 * var(--scaleWidth));
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
.service-detail-card .card-title .constl-icon {
  font-size: var(--service-detail-card-title-icon-fontSize, 24px);
  color: var(--service-detail-card-title-icon-color, #372194);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-detail-card .card-title .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.service-detail-card .card-body {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  padding: var(--service-detail-card-body-padding);
}
.service-detail-card .card-body .capsule-tab {
  margin-top: var(--service-detail-card-capsule-tab-margin-top);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-detail-card .card-body .capsule-tab {
    margin-top: calc(5 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .service-detail-card .card-body .capsule-tab {
    margin-top: var(--service-detail-card-capsule-tab-margin-top-mobile);
  }
}
@media (min-width: 1200px) {
  .service-detail-card .card-body > .row:has(.service-map-card) {
    margin: var(--service-detail-card-map-row-margin);
  }
  .service-detail-card .card-body > .row:has(.service-map-card) .col-md-8,
  .service-detail-card .card-body > .row:has(.service-map-card) .col-md-4 {
    padding: var(--service-detail-card-map-col-padding);
  }
}
.service-detail-card .tabular-content-title {
  display: flex;
  align-items: center;
  gap: var(--service-detail-card-tabular-title-gap);
  font-size: var(--service-detail-card-tabular-title-font-size);
  line-height: var(--service-detail-card-tabular-title-line-height);
  color: var(--service-detail-card-tabular-title-color, #372194);
  font-weight: var(--service-detail-card-tabular-title-font-weight);
  margin-bottom: var(--service-detail-card-tabular-title-margin-bottom);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-detail-card .tabular-content-title {
    gap: calc(10 * var(--scaleWidth));
    font-size: calc(18 * var(--scaleWidth));
    margin-bottom: calc(20 * var(--scaleWidth));
  }
}
.service-detail-card .tabular-content-title .constl-icon {
  font-size: var(--service-detail-card-tabular-title-icon-fontSize, 24px);
  color: var(--service-detail-card-tabular-title-icon-color, #372194);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-detail-card .tabular-content-title .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.service-detail-card .tabular-content-title + .tabular-content-container .table-main-body {
  margin-top: var(--service-detail-card-table-body-margin-top);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-detail-card .tabular-content-title + .tabular-content-container .table-main-body {
    margin-top: calc(-10 * var(--scaleWidth));
  }
}
.service-detail-card .capsule-item-content .right-controls {
  gap: var(--service-detail-card-right-controls-gap);
  justify-content: flex-end;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-detail-card .capsule-item-content .right-controls {
    gap: calc(5 * var(--scaleWidth));
  }
}
.service-detail-card .capsule-item-content .right-controls-total {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--service-detail-card-total-margin-top);
  gap: var(--service-detail-card-total-gap);
  color: var(--service-detail-card-total-gap-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-detail-card .capsule-item-content .right-controls-total {
    gap: calc(5 * var(--scaleWidth));
    margin-top: calc(15 * var(--scaleWidth));
  }
}
.service-detail-card .capsule-item-content .right-controls-total span {
  font-weight: var(--service-detail-card-total-font-weight);
  color: var(--service-detail-card-total-color);
}

.documents_list {
  display: flex;
  flex-direction: column;
  gap: var(--documents-list-gap);
  padding: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .documents_list {
    gap: calc(10 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .documents_list {
    overflow: auto;
    padding-bottom: var(--documents-list-mobile-padding-bottom);
  }
}
.documents_list li {
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 768px) {
  .documents_list li {
    min-width: var(--documents-list-li-min-width-mobile);
  }
}
.documents_list li .docs_informations {
  display: flex;
  background-color: var(--documents-list-bg-color);
  padding: var(--documents-list-padding);
  gap: var(--documents-list-gap-inner);
  position: relative;
  border-radius: var(--documents-list-border-radius);
  align-items: var(--documents-list-align-items);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .documents_list li .docs_informations {
    padding: calc(10 * var(--scaleWidth)) calc(10 * var(--scaleWidth));
    gap: calc(15 * var(--scaleWidth));
    border-radius: calc(12 * var(--scaleWidth));
  }
}
.documents_list li .docs_informations .docs_type {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: var(--documents-list-type-gap);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .documents_list li .docs_informations .docs_type {
    gap: calc(4 * var(--scaleWidth));
  }
}
.documents_list li .docs_informations .docs_type .name {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  line-height: 0;
}
.documents_list li .docs_informations .docs_type .name img {
  max-width: var(--documents-list-type-img-max-width);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .documents_list li .docs_informations .docs_type .name img {
    max-width: calc(24 * var(--scaleWidth));
  }
}
.documents_list li .docs_informations .docs_type .name .constl-icon {
  font-size: 24px;
  color: var(--documents-list-name-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .documents_list li .docs_informations .docs_type .name .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.documents_list li .docs_informations .docs_type .size {
  font-size: var(--documents-list-size-font-size);
  line-height: var(--documents-list-size-line-height);
  color: var(--documents-list-size-color);
  font-weight: var(--documents-list-size-font-weight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .documents_list li .docs_informations .docs_type .size {
    font-size: calc(12 * var(--scaleWidth));
  }
}
.documents_list li .docs_informations .docs_details {
  display: flex;
  flex-direction: column;
}
.documents_list li .docs_informations .docs_details .docs_name {
  font-size: var(--documents-list-name-font-size);
  color: var(--documents-list-name-color);
  font-weight: var(--documents-list-name-font-weight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .documents_list li .docs_informations .docs_details .docs_name {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.documents_list li .docs_informations .docs_details .docs_name .constl-icon {
  font-size: 24px;
  color: var(--documents-list-name-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .documents_list li .docs_informations .docs_details .docs_name .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.documents_list li .docs_informations .docs_details .docs_dscrp {
  font-size: var(--documents-list-description-font-size);
  line-height: var(--documents-list-description-line-height);
  color: var(--documents-list-description-color);
  font-weight: var(--documents-list-description-font-weight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .documents_list li .docs_informations .docs_details .docs_dscrp {
    font-size: calc(12 * var(--scaleWidth));
  }
}
.documents_list li .docs_informations .docs_details .docs_updated {
  font-size: var(--documents-list-updated-font-size);
  line-height: var(--documents-list-updated-line-height);
  color: var(--documents-list-updated-color);
  font-weight: var(--documents-list-updated-font-weight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .documents_list li .docs_informations .docs_details .docs_updated {
    font-size: calc(12 * var(--scaleWidth));
  }
}
.documents_list li .docs_informations .docs_details .docs_updated span {
  font-weight: var(--documents-list-updated-span-font-weight);
}
.documents_list li .docs_informations .download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: static !important;
}
.documents_list li .docs_informations .buttons-group-inline {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-content: flex-start;
  line-height: 1;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .documents_list li .docs_informations .buttons-group-inline {
    gap: calc(5 * var(--scaleWidth));
  }
}
.documents_list li .docs_informations .buttons-group-inline .action-btn {
  display: inline-block;
  width: auto;
  vertical-align: top;
  border: 0;
  text-decoration: none;
  outline: none;
}
.documents_list .buttons-group-inline {
  display: flex;
  align-items: center;
  width: min-content;
  gap: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .documents_list .buttons-group-inline {
    gap: calc(5 * var(--scaleWidth));
  }
}
.documents_list .buttons-group-inline a {
  display: flex;
  width: auto;
  vertical-align: text-bottom;
  width: min-content;
  font-size: 40px;
  text-decoration: none;
  position: static !important;
  cursor: pointer;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .documents_list .buttons-group-inline a {
    font-size: calc(40 * var(--scaleWidth));
  }
}

#Topology .tabular-content-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 0;
  min-height: 413px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #Topology .tabular-content-container {
    min-height: calc(413 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  #Topology .tabular-content-container {
    min-height: unset;
  }
}
#Topology .tabular-content-container .topology-exit-btn {
  border-radius: 5px;
  background-color: white;
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #Topology .tabular-content-container .topology-exit-btn {
    border-radius: calc(5 * var(--scaleWidth));
    top: calc(10 * var(--scaleWidth));
    left: calc(10 * var(--scaleWidth));
  }
}
#Topology .header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #Topology .header-content {
    gap: calc(10 * var(--scaleWidth));
  }
}
#Topology .header-content .title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: var(--topology-heading-fontSize, 18px);
  line-height: normal;
  color: var(--topology-heading-color, #101828);
  font-weight: var(--topology-heading-fontWeight, 500);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #Topology .header-content .title {
    gap: calc(10 * var(--scaleWidth));
    font-size: calc(18 * var(--scaleWidth));
  }
}
#Topology .header-content .guidance-point {
  display: flex;
  align-items: center;
  gap: 30px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #Topology .header-content .guidance-point {
    gap: calc(30 * var(--scaleWidth));
  }
}
#Topology .header-content .guidance-point .lable,
#Topology .header-content .guidance-point .label {
  font-size: var(--topology-label-fontSize, 14px);
  line-height: normal;
  color: var(--topology-label-color, #475467);
  text-transform: capitalize;
  font-weight: var(--topology-label-fontWeight, 500);
  display: flex;
  align-items: center;
  border: 0;
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #Topology .header-content .guidance-point .lable,
  #Topology .header-content .guidance-point .label {
    gap: calc(10 * var(--scaleWidth));
    font-size: calc(14 * var(--scaleWidth));
  }
}
#Topology .header-content .guidance-point .lable::before,
#Topology .header-content .guidance-point .label::before {
  display: inline-block;
  width: 20px;
  border-top: 2px solid var(--topology-color-primary-pink, #D81E87);
  content: "";
  vertical-align: top;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #Topology .header-content .guidance-point .lable::before,
  #Topology .header-content .guidance-point .label::before {
    width: calc(20 * var(--scaleWidth));
    border-width: calc(2 * var(--scaleWidth));
  }
}
#Topology .header-content .guidance-point .lable.secondary::before,
#Topology .header-content .guidance-point .label.secondary::before {
  border-top: 2px solid var(--topology-color-primary-blue, #084EB9);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #Topology .header-content .guidance-point .lable.secondary::before,
  #Topology .header-content .guidance-point .label.secondary::before {
    border-width: calc(2 * var(--scaleWidth));
  }
}
#Topology .header-content .guidance-point .lable.recovery::before,
#Topology .header-content .guidance-point .label.recovery::before {
  border-top: 2px dashed var(--topology-color-dashed-grey, #7680A8);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #Topology .header-content .guidance-point .lable.recovery::before,
  #Topology .header-content .guidance-point .label.recovery::before {
    border-width: calc(2 * var(--scaleWidth));
  }
}
#Topology .body-content {
  margin: auto;
  width: 100%;
  overflow: auto;
}

.service-topology-graph {
  display: flex;
  align-items: center;
  margin-top: 100px;
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-topology-graph {
    margin-top: calc(100 * var(--scaleWidth));
  }
}
.service-topology-graph .start-pointing,
.service-topology-graph .end-pointing {
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
  border-radius: 100px;
  background-color: var(--color-white-background);
  border: 6px solid var(--color-primary-mode);
  box-shadow: 0px 0px 0px 4px rgba(26, 107, 232, 0.24);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-topology-graph .start-pointing,
  .service-topology-graph .end-pointing {
    border-width: calc(6 * var(--scaleWidth));
    width: calc(20 * var(--scaleWidth));
    height: calc(20 * var(--scaleWidth));
  }
}
.service-topology-graph .start-pointing {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -10px;
  z-index: 1;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-topology-graph .start-pointing {
    left: calc(-10 * var(--scaleWidth));
  }
}
.service-topology-graph .end-pointing {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -10px;
  z-index: 1;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-topology-graph .end-pointing {
    left: calc(-10 * var(--scaleWidth));
  }
}
.service-topology-graph .from-lable,
.service-topology-graph .from-label,
.service-topology-graph .top-lable,
.service-topology-graph .top-label {
  display: inline-block;
  width: auto;
  vertical-align: top;
  font-size: var(--font-size-11);
  color: var(--body-text-color);
  white-space: nowrap;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-topology-graph .from-lable,
  .service-topology-graph .from-label,
  .service-topology-graph .top-lable,
  .service-topology-graph .top-label {
    font-size: calc(11 * var(--scaleWidth));
  }
}
.service-topology-graph .from-lable,
.service-topology-graph .from-label {
  padding-right: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-topology-graph .from-lable,
  .service-topology-graph .from-label {
    padding-right: calc(15 * var(--scaleWidth));
  }
}
.service-topology-graph .top-lable,
.service-topology-graph .top-label {
  padding-left: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-topology-graph .top-lable,
  .service-topology-graph .top-label {
    padding-left: calc(15 * var(--scaleWidth));
  }
}
.service-topology-graph .main-graph {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 2px solid var(--color-primary-mode);
  border-bottom: 2px dashed var(--color-primary-mode);
  border-left: 2px solid var(--color-primary-mode);
  border-right: 2px solid var(--color-primary-mode);
  border-radius: 50px;
  padding: 0 15px;
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-topology-graph .main-graph {
    padding: 0 calc(15 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
    border-width: calc(2 * var(--scaleWidth));
  }
}
.service-topology-graph .main-graph::after {
  position: absolute;
  content: "";
  left: 0;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  border-top: 2px dotted var(--color-primary-mode);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-topology-graph .main-graph::after {
    height: calc(2 * var(--scaleWidth));
  }
}
.service-topology-graph .main-graph .primary-row {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: -22px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-topology-graph .main-graph .primary-row {
    margin-top: calc(-22 * var(--scaleWidth));
  }
}
.service-topology-graph .main-graph .primary-row .map-point {
  flex: 1;
  padding: 10px 0;
  font-size: var(--font-size-extra-small);
  color: var(--body-text-color);
  text-align: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-topology-graph .main-graph .primary-row .map-point {
    font-size: calc(12 * var(--scaleWidth));
    padding: calc(10 * var(--scaleWidth)) 0;
  }
}
.service-topology-graph .main-graph .primary-row .map-point span {
  display: inline-block;
  width: auto;
  vertical-align: top;
  background-color: var(--color-white-background);
  position: relative;
  padding-left: 20px;
  padding-right: 2px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-topology-graph .main-graph .primary-row .map-point span {
    padding-left: calc(20 * var(--scaleWidth));
    padding-right: calc(2 * var(--scaleWidth));
  }
}
.service-topology-graph .main-graph .primary-row .map-point span::before {
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 12px;
  background-color: var(--color-primary-mode);
  content: "";
  display: inline-block;
  vertical-align: top;
  border-radius: 100px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-topology-graph .main-graph .primary-row .map-point span::before {
    width: calc(12 * var(--scaleWidth));
    height: calc(12 * var(--scaleWidth));
    top: calc(6 * var(--scaleWidth));
  }
}
.service-topology-graph .main-graph .secondary-row {
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-topology-graph .main-graph .secondary-row .map-point {
  flex: 1;
  padding: 10px 0;
  font-size: var(--font-size-extra-small);
  color: var(--body-text-color);
  text-align: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-topology-graph .main-graph .secondary-row .map-point {
    padding: calc(10 * var(--scaleWidth)) 0;
    font-size: calc(12 * var(--scaleWidth));
  }
}
.service-topology-graph .main-graph .secondary-row .map-point span {
  display: inline-block;
  width: auto;
  vertical-align: top;
  background-color: var(--color-white-background);
  position: relative;
  padding-left: 20px;
  padding-right: 2px;
  z-index: 1;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-topology-graph .main-graph .secondary-row .map-point span {
    padding-left: calc(20 * var(--scaleWidth));
    padding-right: calc(2 * var(--scaleWidth));
  }
}
.service-topology-graph .main-graph .secondary-row .map-point span::before {
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  background-color: var(--color-primary-mode);
  content: "";
  display: inline-block;
  vertical-align: top;
  border-radius: 100px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-topology-graph .main-graph .secondary-row .map-point span::before {
    top: calc(4 * var(--scaleWidth));
    width: calc(12 * var(--scaleWidth));
    height: calc(12 * var(--scaleWidth));
  }
}
.service-topology-graph .main-graph .secondary-row .map-point:first-child span {
  padding-left: 0;
}
.service-topology-graph .main-graph .secondary-row .map-point:first-child span::before {
  display: none;
}
.service-topology-graph .main-graph .recovery-row {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: -22px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-topology-graph .main-graph .recovery-row {
    margin-bottom: calc(-22 * var(--scaleWidth));
  }
}
.service-topology-graph .main-graph .recovery-row .map-point {
  flex: 1;
  padding: 10px 0;
  font-size: var(--font-size-extra-small);
  color: var(--body-text-color);
  text-align: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-topology-graph .main-graph .recovery-row .map-point {
    font-size: calc(12 * var(--scaleWidth));
  }
}
.service-topology-graph .main-graph .recovery-row .map-point span {
  display: inline-block;
  width: auto;
  vertical-align: top;
  background-color: var(--color-white-background);
  position: relative;
  padding-left: 20px;
  padding-right: 2px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-topology-graph .main-graph .recovery-row .map-point span {
    padding-left: calc(20 * var(--scaleWidth));
    padding-right: calc(2 * var(--scaleWidth));
  }
}
.service-topology-graph .main-graph .recovery-row .map-point span::before {
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  background-color: var(--color-primary-mode);
  content: "";
  display: inline-block;
  vertical-align: top;
  border-radius: 100px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-topology-graph .main-graph .recovery-row .map-point span::before {
    top: calc(4 * var(--scaleWidth));
    width: calc(12 * var(--scaleWidth));
    height: calc(12 * var(--scaleWidth));
  }
}

.mapbox-wrap {
  position: relative;
}
.mapbox-wrap #map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
.mapbox-wrap .mapboxgl-ctrl-bottom-left {
  display: none;
}

.city-label {
  background: #000000;
  /* Blue Background */
  color: 0;
  /* White Text */
  font-size: var(--font-size-extra-small);
  text-transform: uppercase;
  padding: 3px 12px;
  /* Padding */
  border-radius: 25px;
  /* Rounded Corners */
  font-size: var(--font-size-extra-small);
  font-weight: 500;
  -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  /* Shadow Effect */
  text-align: center;
  white-space: nowrap;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .city-label {
    font-size: calc(12 * var(--scaleWidth));
    padding: calc(3 * var(--scaleWidth)) calc(12 * var(--scaleWidth));
  }
}

.left-pos::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  /* Slightly outside the right edge */
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent #FFFFFF;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .left-pos::after {
    border-width: calc(6 * var(--scaleWidth));
    right: calc(-10 * var(--scaleWidth));
  }
}

.right-pos::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translateY(-50%) rotate(180deg);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent #FFFFFF;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .right-pos::after {
    border-width: calc(6 * var(--scaleWidth));
    left: calc(-10 * var(--scaleWidth));
  }
}

.source-label,
.destination-label {
  background: #000000;
  color: #ffffff;
  font-size: var(--font-size-extra-small);
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 25px;
  font-weight: 500;
  -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  text-align: center;
  white-space: nowrap;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .source-label,
  .destination-label {
    font-size: calc(12 * var(--scaleWidth));
    padding: calc(3 * var(--scaleWidth)) calc(12 * var(--scaleWidth));
  }
}

.top-pos::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #000000 transparent transparent transparent;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .top-pos::after {
    bottom: calc(-12 * var(--scaleWidth));
    border-width: calc(6 * var(--scaleWidth));
  }
}

.bottom-pos::after {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #000000 transparent;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .bottom-pos::after {
    top: calc(-12 * var(--scaleWidth));
    border-width: calc(6 * var(--scaleWidth));
  }
}

.mermaid {
  margin-top: 80px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mermaid {
    margin-top: calc(80 * var(--scaleWidth));
  }
}
.mermaid .node circle {
  stroke-width: 1px;
  filter: drop-shadow(0px 0px 8px rgba(26, 107, 232, 0.24));
}
.mermaid .node circle + g.label .nodeLabel {
  color: var(--color-white) !important;
}
.mermaid .edge-pattern-solid {
  stroke-width: 3px !important;
}
.mermaid .edge-pattern-dotted {
  stroke-width: 2px !important;
  stroke-dasharray: 5, 5 !important;
}
.mermaid .edgeLabel {
  display: none !important;
}
.mermaid .node rect {
  fill: none !important;
  padding: 0 !important;
}
.mermaid .node rect + span.nodeLabel {
  font-size: var(--font-size-extra-small) !important;
  color: var(--body-text-color) !important;
  fill: var(--body-text-color) !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mermaid .node rect + span.nodeLabel {
    font-size: calc(12 * var(--scaleWidth));
  }
}
.mermaid span {
  color: var(--mermaid-text-color, #475467) !important;
  text-transform: capitalize !important;
}

.service-detail-card {
  padding: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-detail-card {
    padding: calc(15 * var(--scaleWidth));
  }
}
.service-detail-card .card-title {
  font-size: 20px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-detail-card .card-title {
    font-size: calc(20 * var(--scaleWidth));
  }
}
.service-detail-card .capsule-item-content .right-controls .custom-select {
  min-height: 38px;
  padding: 0 10px;
  padding-right: 30px;
  background-position: calc(100% - 10px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-detail-card .capsule-item-content .right-controls .custom-select {
    min-height: calc(38 * var(--scaleWidth));
    padding: 0 calc(10 * var(--scaleWidth));
    padding-right: calc(30 * var(--scaleWidth));
    background-position: calc(100% - 0.5858230814vw);
  }
}

.servicemapcard-header {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .servicemapcard-header {
    margin-bottom: calc(10 * var(--scaleWidth));
  }
}
.servicemapcard-header .title {
  position: static;
  margin-bottom: 0;
}
.servicemapcard-header .toggle-map-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .servicemapcard-header .toggle-map-btn {
    height: calc(40 * var(--scaleWidth));
    gap: calc(8 * var(--scaleWidth));
  }
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  flex-direction: row-reverse;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .chart-header {
    gap: calc(10 * var(--scaleWidth));
  }
}
.chart-header .right-controls-total {
  margin-top: 0 !important;
}

@media (max-width: 1199px) {
  .service-detail-page .tab-view-100 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 15px !important;
  }
}

.mapFullScreen {
  background: var(--card-background-color) !important;
}

.ticket-form.form-inline {
  align-items: flex-start;
}
.ticket-form textarea.form-control {
  min-height: 155px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticket-form textarea.form-control {
    min-height: calc(155 * var(--scaleWidth));
  }
}
.ticket-form .uploadBox {
  min-height: 155px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticket-form .uploadBox {
    min-height: calc(155 * var(--scaleWidth));
  }
}

#confirtmationModel .ticket-details,
.confirtmationModel .ticket-details {
  font-size: var(--service-ticket-confirmation-details-fontSize, 14px);
  color: var(--service-ticket-confirmation-details-color, #414141);
  line-height: var(--service-ticket-confirmation-details-lineHeight, 22px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #confirtmationModel .ticket-details,
  .confirtmationModel .ticket-details {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(22 * var(--scaleWidth));
  }
}
#confirtmationModel .modal-footer,
.confirtmationModel .modal-footer {
  justify-content: center;
}
#confirtmationModel .modal-footer .button-outline-icon-text,
.confirtmationModel .modal-footer .button-outline-icon-text {
  background-color: var(--service-ticket-confirmation-footer-button-background-color, #ffffff);
}
#confirtmationModel .modal-dialog,
.confirtmationModel .modal-dialog {
  max-width: 480px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #confirtmationModel .modal-dialog,
  .confirtmationModel .modal-dialog {
    max-width: calc(480 * var(--scaleWidth));
  }
}
#confirtmationModel .modal-dialog .modal-content,
.confirtmationModel .modal-dialog .modal-content {
  background-color: var(--service-ticket-confirmation-content-background-color, #E1E1E1);
}

#confirtmationSuccessModel .modal-dialog,
.successModel .modal-dialog {
  max-width: 350px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #confirtmationSuccessModel .modal-dialog,
  .successModel .modal-dialog {
    max-width: calc(350 * var(--scaleWidth));
  }
}
#confirtmationSuccessModel .modal-header,
.successModel .modal-header {
  padding-bottom: 0;
}
#confirtmationSuccessModel .ticket-details-success,
.successModel .ticket-details-success {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  text-align: center;
  margin-bottom: 30px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #confirtmationSuccessModel .ticket-details-success,
  .successModel .ticket-details-success {
    margin-bottom: calc(30 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
  }
}
#confirtmationSuccessModel .ticket-details-success .status-message,
.successModel .ticket-details-success .status-message {
  font-size: var(--success-model-statusMessage-fontSize, 16px);
  line-height: normal;
  color: var(--success-model-statusMessage-color, #000000);
  font-weight: var(--success-model-statusMessage-fontWeight, 600);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #confirtmationSuccessModel .ticket-details-success .status-message,
  .successModel .ticket-details-success .status-message {
    font-size: calc(16 * var(--scaleWidth));
  }
}
#confirtmationSuccessModel .ticket-details-success .details,
.successModel .ticket-details-success .details {
  font-size: var(--success-model-details-fontSize, 14px);
  line-height: 20px;
  color: var(--success-model-details-color, #414141);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #confirtmationSuccessModel .ticket-details-success .details,
  .successModel .ticket-details-success .details {
    font-size: calc(16 * var(--scaleWidth));
  }
}

#confirtmationSuccessModel .modal-dialog {
  max-width: 500px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #confirtmationSuccessModel .modal-dialog {
    max-width: calc(500 * var(--scaleWidth));
  }
}

@media (min-width: 576px) {
  .ticket-form {
    margin: 0 -12.5px;
  }
  .ticket-form [class^=col-] {
    padding: 0 12.5px;
  }
  .createannouncement_form_wrap .ticket-form {
    margin: 0 -pxpx;
  }
  .createannouncement_form_wrap .ticket-form [class^=col-] {
    padding: 0 5px;
  }
}
@media (max-width: 991px) {
  .ticket-form [class^=col-] {
    max-width: 100%;
    flex: 0 0 100%;
  }
}
.support-listing-widget {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: var(--supportListingWidget-border-radius);
  box-shadow: var(--supportListingWidget-box-shadow);
  overflow: hidden;
  padding-bottom: var(--supportListingWidget-padding-bottom);
  position: relative;
  background: var(--supportListingWidget-background-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-widget {
    border-radius: calc(25 * var(--scaleWidth));
    padding-bottom: calc(75 * var(--scaleWidth));
  }
}
.support-listing-widget .body-description {
  display: flex;
  align-items: center;
  padding: var(--supportListingWidget-bodyDescription-padding);
  min-height: var(--supportListingWidget-bodyDescription-min-height);
  gap: var(--supportListingWidget-bodyDescription-gap);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-widget .body-description {
    gap: calc(8 * var(--scaleWidth));
    min-height: calc(55 * var(--scaleWidth));
    padding: calc(25 * var(--scaleWidth)) calc(25 * var(--scaleWidth));
  }
}
.support-listing-widget .body-description .number {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--supportListingWidget-number-font-size);
  color: var(--supportListingWidget-number-color);
  font-weight: var(--supportListingWidget-number-font-weight);
  line-height: 100%;
  min-width: var(--supportListingWidget-number-min-width);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-widget .body-description .number {
    font-size: calc(47 * var(--scaleWidth));
    min-width: calc(55 * var(--scaleWidth));
  }
}
.support-listing-widget .body-description .details {
  display: flex;
  flex-direction: column;
  gap: var(--supportListingWidget-details-gap);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-widget .body-description .details {
    gap: calc(5 * var(--scaleWidth));
  }
}
.support-listing-widget .body-description .details .title {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-weight: var(--supportListingWidget-details-title-font-weight);
  color: var(--supportListingWidget-text-color);
  font-size: var(--supportListingWidget-details-title-font-size);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-widget .body-description .details .title {
    font-size: calc(18 * var(--scaleWidth));
  }
}
.support-listing-widget .body-description .details .dtls {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--supportListingWidget-details-text-font-size);
  color: var(--supportListingWidget-description-color);
  font-weight: var(--supportListingWidget-details-text-font-weight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-widget .body-description .details .dtls {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.support-listing-widget .status {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--supportListingWidget-status-padding);
  background: var(--supportListingWidget-status-background);
  position: absolute;
  left: 0;
  bottom: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-widget .status {
    padding: calc(15 * var(--scaleWidth)) calc(15 * var(--scaleWidth));
  }
}
.support-listing-widget .status .status-box {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.support-listing-widget .status .status-box .status-number {
  color: var(--supportListingWidget-status-text-color);
  font-size: var(--supportListingWidget-status-number-font-size);
  font-weight: var(--supportListingWidget-status-number-font-weight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-widget .status .status-box .status-number {
    font-size: calc(18 * var(--scaleWidth));
  }
}
.support-listing-widget .status .status-box .status-label {
  color: var(--supportListingWidget-status-text-color);
  font-size: var(--supportListingWidget-status-label-font-size);
  font-weight: var(--supportListingWidget-status-label-font-weight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-widget .status .status-box .status-label {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.support-listing-widget .time-widget {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
.support-listing-widget .time-widget .title {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  padding: var(--supportListingWidget-timeTitle-padding);
  font-size: var(--supportListingWidget-timeTitle-font-size);
  font-weight: var(--supportListingWidget-timeTitle-font-weight);
  color: var(--supportListingWidget-text-color);
  text-align: var(--supportListingWidget-timeTitle-text-align);
  line-height: normal;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-widget .time-widget .title {
    font-size: calc(18 * var(--scaleWidth));
    padding: calc(25 * var(--scaleWidth)) calc(25 * var(--scaleWidth));
  }
}
.support-listing-widget .time-widget .timer-clock {
  display: flex;
  justify-content: center;
  gap: var(--supportListingWidget-timerClock-gap);
  padding: var(--supportListingWidget-timerClock-padding);
  width: 100%;
  text-align: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-widget .time-widget .timer-clock {
    gap: calc(24 * var(--scaleWidth));
    padding: calc(11 * var(--scaleWidth)) calc(15 * var(--scaleWidth));
  }
}
.support-listing-widget .time-widget .timer-clock .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--supportListingWidget-icon-dimension-size);
  height: var(--supportListingWidget-icon-dimension-size);
  background: var(--supportListingWidget-icon-background);
  border-radius: var(--supportListingWidget-icon-border-radius);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-widget .time-widget .timer-clock .icon {
    width: calc(60 * var(--scaleWidth));
    height: calc(60 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.support-listing-widget .time-widget .timer-clock .icon .constl-icon {
  font-size: var(--supportListingWidget-icon-fontSize, 28px);
  color: var(--supportListingWidget-icon-color, #ffffff);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-widget .time-widget .timer-clock .icon .constl-icon {
    font-size: calc(28 * var(--scaleWidth));
  }
}
.support-listing-widget .time-widget .timer-clock .timer {
  text-align: center;
  display: flex;
  align-items: center;
  max-width: inherit;
  width: auto;
}
.support-listing-widget .time-widget .timer-clock .timer > span {
  font-size: var(--supportListingWidget-timer-font-size);
  line-height: var(--supportListingWidget-timer-font-size);
  font-weight: var(--supportListingWidget-timer-font-weight);
  color: var(--supportListingWidget-text-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-widget .time-widget .timer-clock .timer > span {
    font-size: calc(60 * var(--scaleWidth));
    line-height: calc(60 * var(--scaleWidth));
  }
}
.support-listing-widget .time-widget .timer-clock .timer > span sub {
  font-size: var(--supportListingWidget-timer-sub-font-size);
  bottom: 0;
  opacity: var(--supportListingWidget-timer-sub-opacity);
}

.support-listing-wrap {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
.support-listing-wrap .support-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--support-listing-header-heading-fontSize);
  line-height: normal;
  font-weight: var(--support-listing-header-heading-fontWeight);
  color: var(--support-listing-header-heading-color);
  flex-wrap: wrap;
  gap: 15px;
  padding-left: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-header {
    font-size: calc(22 * var(--scaleWidth));
    gap: calc(15 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .support-listing-wrap .support-header {
    padding-left: 0;
  }
}
.support-listing-wrap .support-header .right-controls {
  gap: 15px;
  flex-wrap: wrap;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-header .right-controls {
    gap: calc(15 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .support-listing-wrap .support-header .right-controls .searchbar {
    width: 100%;
  }
}
.support-listing-wrap .support-header .right-controls .searchbar input[type=text] {
  background-color: var(--support-listing-header-searchbar-background-color);
  border-radius: var(--support-listing-header-searchbar-borderRadius);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-header .right-controls .searchbar input[type=text] {
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-header .right-controls .action-controls {
  background-color: var(--support-listing-header-actionControl-background-color);
  border-radius: var(--support-listing-header-actionControl-borderRadius);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-header .right-controls .action-controls {
    border-radius: calc(24 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-header .right-controls .button-icon-text {
  padding: var(--support-listing-header-createTicketButton-padding);
  border-radius: var(--support-listing-header-createTicketButton-borderRadius);
  height: var(--support-listing-header-createTicketButton-height);
  border: 2px solid;
  border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  border-image-slice: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-header .right-controls .button-icon-text {
    padding: calc(8 * var(--scaleWidth)) calc(12 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
    height: calc(40 * var(--scaleWidth));
    border-width: calc(2 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-body {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
@media (max-width: 1199px) {
  .support-listing-wrap .support-body > .row > .col-md-6.col-lg-3.mb-25 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 1024px) {
  .support-listing-wrap .support-body > .row > .col-md-6.col-lg-3.mb-25 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 479px) {
  .support-listing-wrap .support-body > .row > .col-md-6.col-lg-3.mb-25 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
.support-listing-wrap .support-body .tickets-list-card {
  display: flex;
  flex-direction: column;
  border: var(--support-listing-body-tickets-card-border);
  box-shadow: var(--support-listing-body-tickets-boxShadow);
  border-radius: var(--support-listing-body-tickets-borderRadius);
  background-color: var(--support-listing-body-tickets-background-color);
  padding: 10px;
  height: 100%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card {
    border-radius: calc(20 * var(--scaleWidth));
    padding: calc(10 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-body .tickets-list-card.new-tickets .ticket-card:hover {
  border-color: var(--support-listing-body-tickets-newTicket-color);
  background-color: color-mix(in srgb, var(--support-listing-body-tickets-newTicket-color) 1%, transparent);
}
.support-listing-wrap .support-body .tickets-list-card.open-tickets .ticket-card:hover {
  border-color: var(--support-listing-body-tickets-openTicket-color);
  background-color: color-mix(in srgb, var(--support-listing-body-tickets-openTicket-color) 1%, transparent);
}
.support-listing-wrap .support-body .tickets-list-card.inprogress-tickets .ticket-card:hover {
  border-color: var(--support-listing-body-tickets-inprogressTicket-color);
  background-color: color-mix(in srgb, var(--support-listing-body-tickets-inprogressTicket-color) 1%, transparent);
}
.support-listing-wrap .support-body .tickets-list-card.pending-tickets .ticket-card:hover {
  border-color: var(--support-listing-body-tickets-pendingTicket-color);
  background-color: color-mix(in srgb, var(--support-listing-body-tickets-pendingTicket-color) 1%, transparent);
}
.support-listing-wrap .support-body .tickets-list-card.closed-tickets .ticket-card:hover, .support-listing-wrap .support-body .tickets-list-card.close-tickets .ticket-card:hover {
  border-color: var(--support-listing-body-tickets-closedTicket-color);
  background-color: color-mix(in srgb, var(--support-listing-body-tickets-closedTicket-color) 1%, transparent);
}
.support-listing-wrap .support-body .tickets-list-card.assigned-tickets .ticket-card:hover {
  border-color: var(--support-listing-body-tickets-assignedTicket-color);
  background-color: color-mix(in srgb, var(--support-listing-body-tickets-assignedTicket-color) 1%, transparent);
}
.support-listing-wrap .support-body .tickets-list-card.clearinprogress-tickets .ticket-card:hover {
  border-color: var(--support-listing-body-tickets-clearinprogressTicket-color);
  background-color: color-mix(in srgb, var(--support-listing-body-tickets-clearinprogressTicket-color) 1%, transparent);
}
.support-listing-wrap .support-body .tickets-list-card.resolved-tickets .ticket-card:hover {
  border-color: var(--support-listing-body-tickets-resolvedTicket-color);
  background-color: color-mix(in srgb, var(--support-listing-body-tickets-resolvedTicket-color) 1%, transparent);
}
.support-listing-wrap .support-body .tickets-list-card .tickets-list-header {
  display: flex;
  padding-top: var(--support-listing-body-tickets-card-header-padding-top);
  padding-bottom: var(--support-listing-body-tickets-card-header-padding-bottom);
  gap: 6px;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card .tickets-list-header {
    padding-bottom: calc(20 * var(--scaleWidth));
    gap: calc(6 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-body .tickets-list-card .tickets-list-header .title {
  font-size: var(--support-listing-body-tickets-card-header-title-fontSize);
  font-weight: var(--support-listing-body-tickets-card-header-title-fontWeight);
  display: flex;
  align-items: center;
  gap: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card .tickets-list-header .title {
    font-size: calc(18 * var(--scaleWidth));
    gap: calc(5 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-body .tickets-list-card .tickets-list-header .total-tickets {
  padding: var(--support-listing-body-tickets-card-header-totalTicket-padding);
  min-width: var(--support-listing-body-tickets-card-header-totalTicket-width);
  min-height: var(--support-listing-body-tickets-card-header-totalTicket-width);
  background-color: color-mix(in srgb, white 90%, var(--support-listing-body-tickets-openTicket-color));
  border: 1px solid color-mix(in srgb, white 70%, var(--support-listing-body-tickets-openTicket-color));
  border-radius: var(--support-listing-body-tickets-card-header-totalTicket-borderRadius);
  font-size: var(--support-listing-body-tickets-card-header-totalTicket-fontSize);
  font-weight: var(--support-listing-body-tickets-card-header-totalTicket-fontWeight);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card .tickets-list-header .total-tickets {
    padding: calc(2 * var(--scaleWidth)) calc(6 * var(--scaleWidth));
    min-width: calc(40 * var(--scaleWidth));
    min-height: calc(40 * var(--scaleWidth));
    font-size: calc(16 * var(--scaleWidth));
    border-radius: calc(6 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-body .tickets-list-card .tickets-list-body {
  max-height: var(--support-listing-body-tickets-card-header-body-maxHeight);
  overflow: hidden;
  overflow-y: auto;
  padding-right: 2px;
  height: 100%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card .tickets-list-body {
    max-width: calc(700 * var(--scaleWidth));
    padding-right: calc(2 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-body .tickets-list-card .tickets-list-body > ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
  margin: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card .tickets-list-body > ul {
    gap: calc(20 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-body .tickets-list-card .tickets-list-body > ul > li {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card {
  display: flex;
  flex-direction: column;
  border: var(--support-listing-ticketCard-border, 1px solid #E9EAEB);
  background: var(--support-listing-ticketCard-background, #FFFFFF);
  box-shadow: var(--support-listing-ticketCard-boxShadow, 0px 1px 2px 0px rgba(16, 24, 40, 0.05));
  border-radius: var(--support-listing-ticketCard-borderRadius, 10px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card .ticket-card {
    border-radius: calc(10 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--support-listing-ticketCard-header-padding, 20px 10px 0 10px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-header {
    padding: calc(20 * var(--scaleWidth)) calc(10 * var(--scaleWidth)) 0 calc(10 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-header .posted-details {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-right: auto;
  padding-left: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-header .posted-details {
    gap: calc(5 * var(--scaleWidth));
    padding-left: calc(5 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-header .posted-details .date-time-dtls {
  font-size: var(--support-listing-ticketCard-timeStamp-fontSize, 14px);
  font-weight: var(--support-listing-ticketCard-timeStamp-fontWeight, 400);
  color: var(--support-listing-ticketCard-timeStamp-color, #000000);
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin-bottom: -2px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-header .posted-details .date-time-dtls {
    font-size: calc(14 * var(--scaleWidth));
    margin-bottom: calc(-2 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-header .posted-details .constl-icon {
  font-size: 24px;
  color: var(--support-listing-ticketCard-timeStamp-color, #000000);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-header .posted-details .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-header .ticket-priority {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-header .ticket-priority {
    gap: calc(10 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-header .ticket-priority .level {
  background-color: var(--support-listing-ticketCard-ticketPriority-level-background-color, #000000);
  border: var(--support-listing-ticketCard-ticketPriority-level-border, 1px solid #000000);
  padding: var(--support-listing-ticketCard-ticketPriority-level-padding, 4px 12px);
  border-radius: var(--support-listing-ticketCard-ticketPriority-level-borderRadius, 6px);
  font-size: var(--support-listing-ticketCard-ticketPriority-level-fontSize, 12px);
  line-height: var(--support-listing-ticketCard-ticketPriority-level-fontLineHeight, 20px);
  font-weight: var(--support-listing-ticketCard-ticketPriority-level-fontWeight, 500);
  color: var(--support-listing-ticketCard-ticketPriority-level-color, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-header .ticket-priority .level {
    padding: calc(4 * var(--scaleWidth)) calc(12 * var(--scaleWidth));
    font-size: calc(12 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
    padding: calc(4 * var(--scaleWidth)) calc(12 * var(--scaleWidth));
    border-radius: calc(6 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-header .ticket-priority .level.l3 {
  background-color: var(--support-listing-ticketCard-ticketPriority-L3-color, #CB190C);
  border-color: var(--support-listing-ticketCard-ticketPriority-L3-color, #CB190C);
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-header .ticket-priority .level.l2 {
  background-color: var(--support-listing-ticketCard-ticketPriority-L2-color, #EC5F08);
  border-color: var(--support-listing-ticketCard-ticketPriority-L2-color, #EC5F08);
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-header .ticket-priority .level.l1 {
  background-color: var(--support-listing-ticketCard-ticketPriority-L1-color, #079452);
  border-color: var(--support-listing-ticketCard-ticketPriority-L1-color, #079452);
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-body {
  display: flex;
  flex-direction: column;
  padding: var(--support-listing-ticketCard-ticketBody-padding, 5px 20px 20px);
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-body {
    gap: calc(10 * var(--scaleWidth));
    padding: calc(5 * var(--scaleWidth)) calc(20 * var(--scaleWidth)) calc(20 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-body .ticket-id {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--support-listing-ticketCard-ticketBody-ticketId-fontSize, 14px);
  line-height: normal;
  color: var(--support-listing-ticketCard-ticketBody-ticketId-color, #372194);
  text-transform: uppercase;
  font-weight: var(--support-listing-ticketCard-ticketBody-ticketId-fontWeight, 500);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-body .ticket-id {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-body .ticket-id a {
  color: var(--support-listing-ticketCard-ticketBody-ticketId-color, #372194);
  text-transform: uppercase;
  text-decoration: underline;
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-body .private-line {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--support-listing-ticketCard-ticketBody-privateLine-fontSize, 14px);
  color: var(--support-listing-ticketCard-ticketBody-privateLine-color, #475467);
  font-weight: var(--support-listing-ticketCard-ticketBody-privateLine-fontWeight, 400);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-body .private-line {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-body .private-line a {
  color: var(--support-listing-ticketCard-ticketBody-privateLine-clickable-color, #372194);
  text-transform: uppercase;
  text-decoration: underline;
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-body .ticket-detail-row {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--support-listing-ticketCard-ticketBody-ticketDetail-fontSize, 14px);
  line-height: var(--support-listing-ticketCard-ticketBody-ticketDetail-fontLineHeight, 20px);
  font-weight: var(--support-listing-ticketCard-ticketBody-ticketDetail-fontWeight, 400);
  color: var(--support-listing-ticketCard-ticketBody-ticketDetail-color, #475467);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-body .ticket-detail-row {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-body .ticket-detail-row .heading,
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-body .ticket-detail-row span {
  font-weight: var(--support-listing-ticketCard-ticketBody-ticketDetail-heading-fontWeight, 600);
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer {
  display: flex;
  padding: var(--support-listing-ticketCard-footer-padding, 10px);
  gap: var(--support-listing-ticketCard-footer-gap, 8px);
  border-top: var(--support-listing-ticketCard-footer-border, 1px solid #E9EAEB);
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer {
    padding: calc(10 * var(--scaleWidth)) calc(10 * var(--scaleWidth));
    gap: calc(8 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .leftbar,
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .rightbar {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .leftbar,
  .support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .rightbar {
    gap: calc(10 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .leftbar .commentBox,
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .rightbar .commentBox {
  font-size: var(--support-listing-ticketCard-footer-commentBox-fontSize, 25px);
  color: var(--support-listing-ticketCard-footer-commentBox-color, #707070);
  cursor: pointer;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .leftbar .commentBox,
  .support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .rightbar .commentBox {
    font-size: calc(25 * var(--scaleWidth));
  }
  .support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .leftbar .commentBox .material-symbols-outlined,
  .support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .rightbar .commentBox .material-symbols-outlined {
    font-size: calc(35 * var(--scaleWidth)) !important;
  }
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .leftbar .commentBox a,
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .rightbar .commentBox a {
  color: #707070;
  text-decoration: none;
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .button-primary {
  margin-right: auto;
  padding: var(--support-listing-ticketCard-footer-cloneButton-padding, 4px 8px);
  font-size: var(--support-listing-ticketCard-footer-cloneButton-fontSize, 12px);
  color: var(--support-listing-ticketCard-footer-cloneButton-color, #ffffff) !important;
  font-weight: var(--support-listing-ticketCard-footer-cloneButton-fontWeight, 500);
  border-radius: var(--support-listing-ticketCard-footer-cloneButton-borderRadius, 8px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .button-primary {
    font-size: calc(12 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
    padding: calc(4 * var(--scaleWidth)) calc(8 * var(--scaleWidth)) !important;
  }
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .button-primary.disabled {
  background-color: var(--support-listing-ticketCard-footer-cloneButton-disabled-background-color, #D1D1D1) !important !important;
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .critical-tag {
  display: flex;
  justify-content: center;
  align-items: center;
  border: var(--support-listing-ticketCard-footer-statusTag-border, 1px solid #000000);
  background-color: var(--support-listing-ticketCard-footer-statusTag-critical-color, #B92A1F);
  border-color: var(--support-listing-ticketCard-footer-statusTag-critical-color, #B92A1F);
  padding: var(--support-listing-ticketCard-footer-statusTag-padding, 4px 12px);
  color: var(--support-listing-ticketCard-footer-statusTag-color, #ffffff);
  font-size: var(--font-size-small, 12px);
  border-radius: var(--support-listing-ticketCard-footer-statusTag-borderRadius, 16px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .critical-tag {
    padding: calc(4 * var(--scaleWidth)) calc(12 * var(--scaleWidth));
    font-size: calc(14 * var(--scaleWidth));
    border-radius: calc(16 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .major-tag {
  display: flex;
  justify-content: center;
  align-items: center;
  border: var(--support-listing-ticketCard-footer-statusTag-border, 1px solid #000000);
  background-color: var(--support-listing-ticketCard-footer-statusTag-major-color, #0F766E);
  border-color: var(--support-listing-ticketCard-footer-statusTag-major-color, #0F766E);
  padding: var(--support-listing-ticketCard-footer-statusTag-padding, 4px 12px);
  color: var(--support-listing-ticketCard-footer-statusTag-color, #ffffff);
  font-size: var(--font-size-small, 12px);
  border-radius: var(--support-listing-ticketCard-footer-statusTag-borderRadius, 16px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .major-tag {
    padding: calc(4 * var(--scaleWidth)) calc(12 * var(--scaleWidth));
    font-size: calc(14 * var(--scaleWidth));
    border-radius: calc(16 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .minor-tag {
  display: flex;
  justify-content: center;
  align-items: center;
  border: var(--support-listing-ticketCard-footer-statusTag-border, 1px solid #000000);
  background-color: var(--support-listing-ticketCard-footer-statusTag-minor-color, #D97706);
  border-color: var(--support-listing-ticketCard-footer-statusTag-minor-color, #D97706);
  padding: var(--support-listing-ticketCard-footer-statusTag-padding, 4px 12px);
  color: var(--support-listing-ticketCard-footer-statusTag-color, #ffffff);
  font-size: var(--font-size-small, 12px);
  border-radius: var(--support-listing-ticketCard-footer-statusTag-borderRadius, 16px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .minor-tag {
    padding: calc(4 * var(--scaleWidth)) calc(12 * var(--scaleWidth));
    font-size: calc(14 * var(--scaleWidth));
    border-radius: calc(16 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .etr-time {
  padding: var(--support-listing-ticketCard-footer-ETRTIME-padding, 4px 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--support-listing-ticketCard-footer-ETRTIME-background-color, #ffffff);
  border: 1px solid color-mix(in srgb, white 70%, var(--support-listing-ticketCard-footer-ETRTIME-color));
  gap: 5px;
  font-size: var(--support-listing-ticketCard-footer-ETRTIME-fontSize, 14px);
  border-radius: var(--support-listing-ticketCard-footer-ETRTIME-borderRadius, 8px);
  color: var(--support-listing-ticketCard-footer-ETRTIME-color, #372194);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .etr-time {
    padding: calc(4 * var(--scaleWidth)) calc(8 * var(--scaleWidth));
    font-size: calc(14 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
    gap: calc(5 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .etr-time .constl-icon {
  font-size: var(--support-listing-ticketCard-footer-ETRTIME-icon-fontSize, 24px);
  color: var(--support-listing-ticketCard-footer-ETRTIME-color, #372194);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .etr-time .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.support-listing-wrap .support-body .tickets-list-card .ticket-card .ticket-card-footer .etr-time .etr-time-value.overdue {
  color: var(--support-listing-ticketCard-footer-ETRTIME-overdue-color, #F04438);
}
.support-listing-wrap .support-body .tickets-list-card.open-tickets .tickets-list-header .title {
  color: var(--support-listing-body-tickets-openTicket-color);
}
.support-listing-wrap .support-body .tickets-list-card.open-tickets .tickets-list-header .total-tickets {
  background-color: color-mix(in srgb, white 90%, var(--support-listing-body-tickets-openTicket-color));
  border: 1px solid color-mix(in srgb, white 70%, var(--support-listing-body-tickets-openTicket-color));
  color: var(--support-listing-body-tickets-openTicket-color);
}
.support-listing-wrap .support-body .tickets-list-card.inprogress-tickets .tickets-list-header .title {
  color: var(--support-listing-body-tickets-inprogressTicket-color);
}
.support-listing-wrap .support-body .tickets-list-card.inprogress-tickets .tickets-list-header .total-tickets {
  background-color: color-mix(in srgb, white 90%, var(--support-listing-body-tickets-inprogressTicket-color));
  border: 1px solid color-mix(in srgb, white 70%, var(--support-listing-body-tickets-inprogressTicket-color));
  color: var(--support-listing-body-tickets-inprogressTicket-color);
}
.support-listing-wrap .support-body .tickets-list-card.resolved-tickets .tickets-list-header .title {
  color: var(--support-listing-body-tickets-resolvedTicket-color);
}
.support-listing-wrap .support-body .tickets-list-card.resolved-tickets .tickets-list-header .total-tickets {
  background-color: color-mix(in srgb, white 90%, var(--support-listing-body-tickets-resolvedTicket-color));
  border: 1px solid color-mix(in srgb, white 70%, var(--support-listing-body-tickets-resolvedTicket-color));
  color: var(--support-listing-body-tickets-resolvedTicket-color);
}
.support-listing-wrap .support-body .tickets-list-card.closed-tickets .tickets-list-header .title, .support-listing-wrap .support-body .tickets-list-card.close-tickets .tickets-list-header .title {
  color: var(--support-listing-body-tickets-closedTicket-color);
}
.support-listing-wrap .support-body .tickets-list-card.closed-tickets .tickets-list-header .total-tickets, .support-listing-wrap .support-body .tickets-list-card.close-tickets .tickets-list-header .total-tickets {
  background-color: color-mix(in srgb, white 90%, var(--support-listing-body-tickets-closedTicket-color));
  border: 1px solid color-mix(in srgb, white 70%, var(--support-listing-body-tickets-closedTicket-color));
  color: var(--support-listing-body-tickets-closedTicket-color);
}
.support-listing-wrap .support-body .tickets-list-card.pending-tickets .tickets-list-header .title {
  color: var(--support-listing-body-tickets-pendingTicket-color);
}
.support-listing-wrap .support-body .tickets-list-card.pending-tickets .tickets-list-header .total-tickets {
  background-color: color-mix(in srgb, white 90%, var(--support-listing-body-tickets-pendingTicket-color));
  border: 1px solid color-mix(in srgb, white 70%, var(--support-listing-body-tickets-pendingTicket-color));
  color: var(--support-listing-body-tickets-pendingTicket-color);
}
.support-listing-wrap .support-body .tickets-list-card.reopened-tickets .tickets-list-header .title {
  color: var(--support-listing-body-tickets-reopenedTicket-color);
}
.support-listing-wrap .support-body .tickets-list-card.reopened-tickets .tickets-list-header .total-tickets {
  background-color: color-mix(in srgb, white 90%, var(--support-listing-body-tickets-reopenedTicket-color));
  border: 1px solid color-mix(in srgb, white 70%, var(--support-listing-body-tickets-reopenedTicket-color));
  color: var(--support-listing-body-tickets-reopenedTicket-color);
}
.support-listing-wrap .support-body .tickets-list-card.new-tickets .tickets-list-header .title {
  color: var(--support-listing-body-tickets-newTicket-color);
}
.support-listing-wrap .support-body .tickets-list-card.new-tickets .tickets-list-header .total-tickets {
  background-color: color-mix(in srgb, white 90%, var(--support-listing-body-tickets-newTicket-color));
  border: 1px solid color-mix(in srgb, white 70%, var(--support-listing-body-tickets-newTicket-color));
  color: var(--support-listing-body-tickets-newTicket-color);
}
.support-listing-wrap .support-body .tickets-list-card.assign-tickets .tickets-list-header .title {
  color: var(--support-listing-body-tickets-assignedTicket-color);
}
.support-listing-wrap .support-body .tickets-list-card.assign-tickets .tickets-list-header .total-tickets {
  background-color: color-mix(in srgb, white 90%, var(--support-listing-body-tickets-assignedTicket-color));
  border: 1px solid color-mix(in srgb, white 70%, var(--support-listing-body-tickets-assignedTicket-color));
  color: var(--support-listing-body-tickets-assignedTicket-color);
}

.ticket-status-open {
  display: flex;
  align-items: center;
  height: 26px;
  width: 90px;
  border: 1px solid var(--support-listing-body-tickets-openTicket-color);
  justify-content: center;
  font-size: var(--font-size-extra-small);
  font-weight: 500;
  border-radius: 20px;
  color: var(--support-listing-body-tickets-openTicket-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticket-status-open {
    width: calc(90 * var(--scaleWidth));
    height: calc(26 * var(--scaleWidth));
    font-size: calc(12 * var(--scaleWidth));
    border-radius: calc(20 * var(--scaleWidth));
  }
}
.ticket-status-closed, .ticket-status-close {
  display: flex;
  align-items: center;
  height: 26px;
  width: 90px;
  border: 1px solid var(--support-listing-body-tickets-closedTicket-color);
  justify-content: center;
  font-size: var(--font-size-extra-small);
  font-weight: 500;
  border-radius: 20px;
  color: var(--support-listing-body-tickets-closedTicket-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticket-status-closed, .ticket-status-close {
    width: calc(90 * var(--scaleWidth));
    height: calc(26 * var(--scaleWidth));
    font-size: calc(12 * var(--scaleWidth));
    border-radius: calc(20 * var(--scaleWidth));
  }
}
.ticket-status-resolved {
  display: flex;
  align-items: center;
  height: 26px;
  width: 90px;
  border: 1px solid var(--support-listing-body-tickets-resolvedTicket-color);
  justify-content: center;
  font-size: var(--font-size-extra-small);
  font-weight: 500;
  border-radius: 20px;
  color: var(--support-listing-body-tickets-resolvedTicket-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticket-status-resolved {
    width: calc(90 * var(--scaleWidth));
    height: calc(26 * var(--scaleWidth));
    font-size: calc(12 * var(--scaleWidth));
    border-radius: calc(20 * var(--scaleWidth));
  }
}
.ticket-status-inprogress {
  display: flex;
  align-items: center;
  height: 26px;
  width: 90px;
  border: 1px solid var(--support-listing-body-tickets-inprogressTicket-color);
  justify-content: center;
  font-size: var(--font-size-extra-small);
  font-weight: 500;
  border-radius: 20px;
  color: var(--support-listing-body-tickets-inprogressTicket-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticket-status-inprogress {
    width: calc(90 * var(--scaleWidth));
    height: calc(26 * var(--scaleWidth));
    font-size: calc(12 * var(--scaleWidth));
    border-radius: calc(20 * var(--scaleWidth));
  }
}
.ticket-status-pending {
  display: flex;
  align-items: center;
  height: 26px;
  width: 90px;
  border: 1px solid var(--support-listing-body-tickets-pendingTicket-color);
  justify-content: center;
  font-size: var(--font-size-extra-small);
  font-weight: 500;
  border-radius: 20px;
  color: var(--support-listing-body-tickets-pendingTicket-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticket-status-pending {
    width: calc(90 * var(--scaleWidth));
    height: calc(26 * var(--scaleWidth));
    font-size: calc(12 * var(--scaleWidth));
    border-radius: calc(20 * var(--scaleWidth));
  }
}
.ticket-status-reopened {
  display: flex;
  align-items: center;
  height: 26px;
  width: 90px;
  border: 1px solid var(--support-listing-body-tickets-reopenedTicket-color);
  justify-content: center;
  font-size: var(--font-size-extra-small);
  font-weight: 500;
  border-radius: 20px;
  color: var(--support-listing-body-tickets-reopenedTicket-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticket-status-reopened {
    width: calc(90 * var(--scaleWidth));
    height: calc(26 * var(--scaleWidth));
    font-size: calc(12 * var(--scaleWidth));
    border-radius: calc(20 * var(--scaleWidth));
  }
}
.ticket-status-new {
  display: flex;
  align-items: center;
  height: 26px;
  width: 90px;
  border: 1px solid var(--support-listing-body-tickets-newTicket-color);
  justify-content: center;
  font-size: var(--font-size-extra-small);
  font-weight: 500;
  border-radius: 20px;
  color: var(--support-listing-body-tickets-newTicket-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticket-status-new {
    width: calc(90 * var(--scaleWidth));
    height: calc(26 * var(--scaleWidth));
    font-size: calc(12 * var(--scaleWidth));
    border-radius: calc(20 * var(--scaleWidth));
  }
}

.ticketDetails {
  max-width: var(--ticket-details-sidebar-width);
  width: 100% !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticketDetails {
    max-width: calc(1278 * var(--scaleWidth));
  }
}
.ticketDetails .sidebar-header {
  padding-bottom: var(--ticket-details-sidebar-header-padding-bottom);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticketDetails .sidebar-header {
    padding-bottom: calc(20 * var(--scaleWidth));
  }
}
.ticketDetails .sidebar-header .ticket-breadcums {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  margin-bottom: var(--ticket-details-sidebar-ticket-breadcums-margin-bottom);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticketDetails .sidebar-header .ticket-breadcums {
    margin-bottom: calc(20 * var(--scaleWidth));
  }
}
.ticketDetails .sidebar-header .ticket-breadcums > ul {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}
.ticketDetails .sidebar-header .ticket-breadcums > ul > li {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--ticket-details-sidebar-ticket-breadcums-fontSize);
  color: var(--ticket-details-sidebar-ticket-breadcums-color);
  font-weight: var(--ticket-details-sidebar-ticket-breadcums-fontWeight);
  padding-left: 10px;
  margin-left: 5px;
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticketDetails .sidebar-header .ticket-breadcums > ul > li {
    font-size: calc(14 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
    margin-left: calc(5 * var(--scaleWidth));
  }
}
.ticketDetails .sidebar-header .ticket-breadcums > ul > li::before {
  position: absolute;
  left: 0;
  content: "/";
  top: 0;
}
.ticketDetails .sidebar-header .ticket-breadcums > ul > li a {
  padding: 0;
  font-size: var(--ticket-details-sidebar-ticket-breadcums-clickable-fontSize);
  color: var(--ticket-details-sidebar-ticket-breadcums-clickable-color);
  font-weight: var(--ticket-details-sidebar-ticket-breadcums-clickable-fontWeight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticketDetails .sidebar-header .ticket-breadcums > ul > li a {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.ticketDetails .sidebar-header .ticket-breadcums > ul > li:first-child {
  margin: 0;
  padding: 0;
}
.ticketDetails .sidebar-header .ticket-breadcums > ul > li:first-child::before {
  display: none;
}
.ticketDetails .sidebar-header h2 {
  font-size: var(--ticket-details-sidebar-header-heading-fontSize);
  color: var(--ticket-details-sidebar-header-heading-color);
  text-transform: capitalize;
  margin-bottom: var(--ticket-details-sidebar-header-heading-margin-bottom);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticketDetails .sidebar-header h2 {
    font-size: calc(18 * var(--scaleWidth));
    margin-bottom: calc(5 * var(--scaleWidth));
  }
}
.ticketDetails .sidebar-header p {
  font-size: var(--ticket-details-sidebar-header-description-fontSize);
  line-height: normal;
  font-weight: var(--ticket-details-sidebar-header-description-fontWeight);
  color: var(--ticket-details-sidebar-header-description-color);
  margin-bottom: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticketDetails .sidebar-header p {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.ticketDetails .card {
  border: 1px solid var(--color-14);
}
.ticketDetails .card.ticket-detail-card {
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  height: 100%;
}
.ticketDetails .card.ticket-detail-card .card-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticketDetails .card.ticket-detail-card .card-title {
    margin-bottom: calc(20 * var(--scaleWidth));
  }
}
.ticketDetails .card.ticket-detail-card .card-title h4 {
  font-size: var(--ticket-details-card-header-title-fontSize);
  font-weight: var(--ticket-details-card-header-title-fontWeight);
  margin-bottom: 0;
  color: var(--ticket-details-card-header-title-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticketDetails .card.ticket-detail-card .card-title h4 {
    font-size: calc(18 * var(--scaleWidth));
  }
}
.ticketDetails .card.ticket-detail-card .card-title .posted-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticketDetails .card.ticket-detail-card .card-title .posted-details {
    gap: calc(10 * var(--scaleWidth));
  }
}
.ticketDetails .card.ticket-detail-card .card-title .posted-details .date-time-dtls {
  font-size: var(--ticket-details-card-header-postedDetails-fontSize);
  color: var(--ticket-details-card-header-postedDetails-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticketDetails .card.ticket-detail-card .card-title .posted-details .date-time-dtls {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.ticketDetails .card.ticket-detail-card .card-body {
  padding: 0;
}
.ticketDetails .card.ticket-detail-card.EST .card-body h2 {
  font-size: var(--ticket-details-card-EST-heading-fontSize);
  color: var(--ticket-details-card-EST-heading-color);
  text-align: center;
  margin-bottom: var(--ticket-details-card-EST-heading-margin-bottom);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticketDetails .card.ticket-detail-card.EST .card-body h2 {
    font-size: calc(18 * var(--scaleWidth));
    margin-bottom: calc(20 * var(--scaleWidth));
  }
}
.ticketDetails .card.ticket-detail-card.EST .card-body .EST-timer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ticketDetails .card.ticket-detail-card.EST .card-body .EST-timer svg {
  position: relative;
  margin-top: -90px;
  margin-left: 20px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticketDetails .card.ticket-detail-card.EST .card-body .EST-timer svg {
    margin-top: calc(-90 * var(--scaleWidth));
    margin-left: calc(20 * var(--scaleWidth));
  }
}
.ticketDetails .card.ticket-detail-card.EST .card-body .EST-timer-details {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  background-color: var(--ticket-details-card-EST-details-background-color);
  padding: var(--ticket-details-card-EST-details-padding);
  border-radius: var(--ticket-details-card-EST-details-borderRadius);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticketDetails .card.ticket-detail-card.EST .card-body .EST-timer-details {
    padding: calc(15 * var(--scaleWidth)) calc(11 * var(--scaleWidth));
    border-radius: calc(10 * var(--scaleWidth));
  }
}
.ticketDetails .service-detail-card {
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}
.ticketDetails .service-detail-card .documents_list li .docs_informations {
  padding-right: 15px;
  overflow: hidden;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticketDetails .service-detail-card .documents_list li .docs_informations {
    padding-right: calc(15 * var(--scaleWidth));
  }
}
.ticketDetails .service-detail-card .documents_list li .docs_informations .docs_details {
  margin-right: auto;
}
.ticketDetails .service-detail-card .documents_list li .docs_informations .action-btns {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-left: 18px;
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticketDetails .service-detail-card .documents_list li .docs_informations .action-btns {
    gap: calc(15 * var(--scaleWidth));
    padding-left: calc(18 * var(--scaleWidth));
  }
}
.ticketDetails .service-detail-card .documents_list li .docs_informations .action-btns::before {
  position: absolute;
  left: 0;
  top: -200px;
  content: "";
  display: inline-block;
  width: 1px;
  vertical-align: top;
  background-color: var(--background-color-10);
  height: 1000px;
}
.ticketDetails .service-detail-card .documents_list li .docs_informations .action-btns .download-btn {
  position: static;
  transform: none;
}
.ticketDetails .service-detail-card .documents_list li .docs_informations .buttons-group-inline {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-content: flex-start;
  line-height: 1;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticketDetails .service-detail-card .documents_list li .docs_informations .buttons-group-inline {
    gap: calc(5 * var(--scaleWidth));
  }
}
.ticketDetails .service-detail-card .documents_list li .docs_informations .buttons-group-inline .action-btn {
  display: inline-block;
  width: auto;
  vertical-align: top;
  border: 0;
  text-decoration: none;
  outline: none;
}

.escalation-card {
  display: flex;
  gap: var(--escalation-gap-card);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .escalation-card {
    gap: calc(5 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .escalation-card {
    flex-direction: column;
    gap: var(--escalation-gap-card);
  }
}
@media (max-width: 768px) and (min-width: 1199px) and (max-width: 1400px) {
  .escalation-card {
    gap: calc(8 * var(--scaleWidth));
  }
}
.escalation-card .level-status {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  background-color: var(--escalation-background-level-status);
  border-radius: var(--escalation-border-radius-small);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .escalation-card .level-status {
    width: calc(40 * var(--scaleWidth));
    border-radius: calc(5 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .escalation-card .level-status {
    width: 100%;
  }
}
.escalation-card .escalation-card-details {
  display: flex;
  flex-direction: column;
  padding: var(--escalation-padding-card-details);
  background-color: var(--escalation-background-white);
  box-shadow: var(--escalation-box-shadow-card-details);
  border: 1px solid var(--escalation-border-light-gray);
  border-radius: var(--escalation-border-radius-medium);
  width: 100%;
  min-height: 184px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .escalation-card .escalation-card-details {
    padding: calc(10 * var(--scaleWidth)) calc(15 * var(--scaleWidth));
    border-radius: calc(12 * var(--scaleWidth));
    min-height: calc(184 * var(--scaleWidth));
  }
}
.escalation-card .escalation-card-details .designation-title {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--escalation-font-size-regular);
  letter-spacing: -0.2px;
  color: var(--escalation-text-primary);
  font-weight: 600;
  margin-bottom: var(--escalation-margin-designation-title-bottom);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .escalation-card .escalation-card-details .designation-title {
    font-size: calc(16 * var(--scaleWidth));
    margin-bottom: calc(20 * var(--scaleWidth));
  }
}
.escalation-card .escalation-card-details .designation-title span {
  font-weight: 400;
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
.escalation-card .escalation-card-details .designation-profile {
  display: flex;
  flex-direction: column;
  gap: var(--escalation-gap-profile);
  font-size: var(--escalation-font-size-regular);
  color: var(--escalation-text-secondary);
  font-weight: 600;
  word-break: break-all;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .escalation-card .escalation-card-details .designation-profile {
    gap: calc(10 * var(--scaleWidth));
    font-size: calc(16 * var(--scaleWidth));
  }
}
.escalation-card .escalation-card-details .designation-profile span {
  font-weight: 400;
}
.escalation-card .escalation-card-details .designation-profile a {
  color: var(--escalation-text-secondary) !important;
}

.escalation-matrix-wrap .col-12 {
  margin-bottom: var(--escalation-margin-col12-bottom);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .escalation-matrix-wrap .col-12 {
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
.escalation-matrix-wrap .tabular-content-title {
  margin-bottom: var(--escalation-margin-tabular-title-bottom);
  margin-top: var(--escalation-margin-tabular-title-top);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .escalation-matrix-wrap .tabular-content-title {
    margin-bottom: calc(10 * var(--scaleWidth));
    margin-top: calc(5 * var(--scaleWidth));
  }
}

.escalation-matrixcard {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  padding: var(--escalation-padding-matrixcard);
  border: 1px solid var(--escalation-border-light-gray);
  border-radius: var(--escalation-border-radius-large);
  box-shadow: var(--escalation-box-shadow-standard);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .escalation-matrixcard {
    padding: calc(15 * var(--scaleWidth)) calc(20 * var(--scaleWidth));
    border-radius: calc(15 * var(--scaleWidth));
  }
}
.escalation-matrixcard > .row {
  margin: 0 -10px !important;
}
.escalation-matrixcard > .row .col-md-6 {
  padding: 0 10px !important;
}

.EST-timer-main-circle {
  stroke: var(--etrTimer-main-circle-color, #ffffff);
}

.timer-circle {
  fill: var(--etrTimer-color-white, #ffffff);
  filter: drop-shadow(var(--etrTimer-box-shadow, 0 2px 4px rgba(0, 0, 0, 0.1)));
}

.progress-bar {
  stroke: var(--etrTimer-color-progress, #4caf50);
  stroke-width: 4;
  stroke-linecap: round;
}
.progress-bar.overdue {
  stroke: var(--etrTimer-color-danger, #f44336);
}

.timer-text {
  text-anchor: middle;
  font-size: var(--etrTimer-font-size-timer, 25px);
  fill: var(--etrTimer-color-progress, #4caf50);
  line-height: 100%;
  filter: drop-shadow(var(--etrTimer-box-shadow, 0 2px 4px rgba(0, 0, 0, 0.1)));
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .timer-text {
    font-size: calc(25 * var(--scaleWidth));
  }
}
.timer-text.overdue {
  fill: var(--etrTimer-color-danger, #f44336);
}
.timer-text.no-etr {
  fill: var(--etrTimer-color-label-no-etr, #9ca3af);
}

.label-text {
  text-anchor: middle;
  font-size: var(--etrTimer-font-size-label, 13px);
  fill: var(--etrTimer-color-label-default, #6b7280);
  font-weight: 300;
  filter: drop-shadow(var(--etrTimer-box-shadow, 0 2px 4px rgba(0, 0, 0, 0.1)));
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .label-text {
    font-size: calc(13 * var(--scaleWidth));
  }
}
.label-text.overdue {
  fill: var(--etrTimer-color-danger, #f44336);
}

.remaining-text {
  text-anchor: middle;
  font-size: var(--etrTimer-font-size-label, 13px);
  fill: var(--etrTimer-color-primary, #3b82f6);
  font-weight: 300;
  filter: drop-shadow(var(--etrTimer-box-shadow, 0 2px 4px rgba(0, 0, 0, 0.1)));
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .remaining-text {
    font-size: calc(13 * var(--scaleWidth));
  }
}

.RFO-details .RFO-title {
  font-size: var(--RFO-heading-fontSize, 18px);
  line-height: var(--RFO-heading-fontLineHeight, 20px);
  font-weight: var(--RFO-heading-fontWeight, 600);
  color: var(--RFO-text-color, #6b7280);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .RFO-details .RFO-title {
    font-size: calc(18 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
  }
}
.RFO-details .RFO-form-group-view {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .RFO-details .RFO-form-group-view {
    gap: calc(2 * var(--scaleWidth));
  }
}
.RFO-details .RFO-form-group-view .RFO-label {
  color: var(--RFO-text-color, #6b7280);
  font-size: var(--RFO-font-size-label, 14px);
  font-weight: var(--RFO-font-weight-bold, 600);
  border: 0;
  padding: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .RFO-details .RFO-form-group-view .RFO-label {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.RFO-details .RFO-form-group-view .RFO-value {
  font-weight: var(--RFO-form-group-view-value-fontWeight, 600);
  font-size: var(--RFO-form-group-view-value-fontSize, 14px);
  color: var(--RFO-form-group-view-value-color, #475467);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .RFO-details .RFO-form-group-view .RFO-value {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.RFO-details .RFO-form-group-view .RFO-value > *,
.RFO-details .RFO-form-group-view .RFO-value table {
  width: 100% !important;
}

.ticketDetail-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .ticketDetail-title {
    gap: calc(10 * var(--scaleWidth));
  }
}

.invoices-due-list .highcharts-legend {
  flex-wrap: wrap !important;
  justify-content: center;
  display: flex !important;
  max-width: 100% !important;
}

.invoice_table .card-header,
.invoice_table .table-footer {
  padding: 15px 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice_table .card-header,
  .invoice_table .table-footer {
    padding: calc(15 * var(--scaleWidth)) calc(10 * var(--scaleWidth));
  }
}

.status-critical {
  display: flex;
  justify-content: center;
  align-items: center;
  border: var(--support-listing-ticketCard-footer-statusTag-border, 1px solid #000000);
  background-color: var(--support-listing-ticketCard-footer-statusTag-critical-color, #B92A1F);
  border-color: var(--support-listing-ticketCard-footer-statusTag-critical-color, #B92A1F);
  padding: var(--support-listing-ticketCard-footer-statusTag-padding, 4px 12px);
  color: var(--support-listing-ticketCard-footer-statusTag-color, #ffffff);
  font-size: var(--font-size-small, 12px);
  border-radius: var(--support-listing-ticketCard-footer-statusTag-borderRadius, 16px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-critical {
    font-size: calc(14 * var(--scaleWidth));
    border-radius: calc(16 * var(--scaleWidth));
    padding: calc(4 * var(--scaleWidth)) calc(12 * var(--scaleWidth));
  }
}

.status-major {
  display: flex;
  justify-content: center;
  align-items: center;
  border: var(--support-listing-ticketCard-footer-statusTag-border, 1px solid #000000);
  background-color: var(--support-listing-ticketCard-footer-statusTag-major-color, #0F766E);
  border-color: var(--support-listing-ticketCard-footer-statusTag-major-color, #0F766E);
  padding: var(--support-listing-ticketCard-footer-statusTag-padding, 4px 12px);
  color: var(--support-listing-ticketCard-footer-statusTag-color, #ffffff);
  font-size: var(--font-size-small, 12px);
  border-radius: var(--support-listing-ticketCard-footer-statusTag-borderRadius, 16px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-major {
    font-size: calc(14 * var(--scaleWidth));
    border-radius: calc(16 * var(--scaleWidth));
    padding: calc(4 * var(--scaleWidth)) calc(12 * var(--scaleWidth));
  }
}

.status-minor {
  display: flex;
  justify-content: center;
  align-items: center;
  border: var(--support-listing-ticketCard-footer-statusTag-border, 1px solid #000000);
  background-color: var(--support-listing-ticketCard-footer-statusTag-minor-color, #D97706);
  border-color: var(--support-listing-ticketCard-footer-statusTag-minor-color, #D97706);
  padding: var(--support-listing-ticketCard-footer-statusTag-padding, 4px 12px);
  color: var(--support-listing-ticketCard-footer-statusTag-color, #ffffff);
  font-size: var(--font-size-small, 12px);
  border-radius: var(--support-listing-ticketCard-footer-statusTag-borderRadius, 16px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .status-minor {
    font-size: calc(14 * var(--scaleWidth));
    border-radius: calc(16 * var(--scaleWidth));
    padding: calc(4 * var(--scaleWidth)) calc(12 * var(--scaleWidth));
  }
}

.tooltip-inner {
  background-color: var(--tooltip-inner-background-color, #000000);
  color: var(--tooltip-inner-color, #fff);
  padding: var(--tooltip-inner-padding, 5px 12px);
  font-size: var(--tooltip-inner-font-size, 14px);
  border-radius: var(--tooltip-inner-border-radius, 8px);
  max-width: var(--tooltip-inner-max-width, 200px);
  text-align: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .tooltip-inner {
    padding: calc(5 * var(--scaleWidth)) calc(12 * var(--scaleWidth));
    font-size: calc(14 * var(--scaleWidth));
    max-width: calc(200 * var(--scaleWidth));
  }
}

.tooltip .arrow::before {
  border-top-color: var(--tooltip-inner-background-color, #000000) !important;
}

#shareFeedback .modal-dialog {
  max-width: 588px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #shareFeedback .modal-dialog {
    max-width: calc(588 * var(--scaleWidth));
  }
}
#shareFeedback .modal-footer {
  padding-top: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #shareFeedback .modal-footer {
    padding-top: calc(15 * var(--scaleWidth));
  }
}

.shareFeedback-form textarea {
  min-height: 129px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .shareFeedback-form textarea {
    min-height: calc(129 * var(--scaleWidth));
  }
}
.shareFeedback-form .rating-control {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 25px;
  width: 100%;
  margin-top: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .shareFeedback-form .rating-control {
    gap: calc(10 * var(--scaleWidth));
    font-size: calc(25 * var(--scaleWidth));
    margin-top: calc(5 * var(--scaleWidth));
  }
}
.shareFeedback-form .rating-control .fa-star {
  cursor: pointer;
  color: var(--rating-control-star-color, #D1D1D1);
}
.shareFeedback-form .rating-control .fa-star.checked::before {
  content: "\f005";
  /* Unicode for solid star */
  font-family: "Font Awesome 6 Free";
  /* Make sure you're using the correct font */
  font-weight: 900;
  /* Solid version */
}
.shareFeedback-form .rating-control .fa-star.fa-solid {
  color: var(--rating-control-selected-star-color, #FFD029);
}

.shareFeedback-card {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  background: var(--shareFeedback-card-background, #ffffff);
  border: var(--shareFeedback-card-border, 1px solid #E4E7EC);
  box-shadow: var(--shareFeedback-card-box-shadow, 0px 1px 2px 0px, 0px 1px 3px 0px);
  padding: var(--shareFeedback-card-padding, 15px 20px);
  border-radius: var(--shareFeedback-card-border-radius, 15px);
}
.shareFeedback-card .material-symbols-outlined {
  font-size: calc(40 * var(--scaleWidth)) !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .shareFeedback-card {
    padding: calc(15 * var(--scaleWidth)) calc(20 * var(--scaleWidth));
    border-radius: calc(15 * var(--scaleWidth));
  }
}
.shareFeedback-card .shareFeedback-card-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .shareFeedback-card .shareFeedback-card-footer {
    gap: calc(10 * var(--scaleWidth));
  }
}
.shareFeedback-card .shareFeedback-card-footer .button {
  height: 40px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .shareFeedback-card .shareFeedback-card-footer .button {
    height: calc(40 * var(--scaleWidth));
  }
}
.shareFeedback-card label[FOR=ServiceID] + Div {
  display: flex;
  align-items: center;
  color: var(--form-control-label-color);
}

.service-detail-card .tabular-tab .tabular-tab-nav {
  align-items: flex-end;
}
@media (max-width: 479px) {
  .service-detail-card .tabular-tab .tabular-tab-nav .tabular-item {
    width: 100%;
  }
}
.service-detail-card .tabular-tab .tabular-tab-nav .tabular-item > a {
  gap: 6px;
  padding: 12px 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-detail-card .tabular-tab .tabular-tab-nav .tabular-item > a {
    gap: calc(6 * var(--scaleWidth));
    padding: calc(12 * var(--scaleWidth)) calc(10 * var(--scaleWidth));
  }
}
.service-detail-card .tabular-tab .tabular-tab-nav .tabular-item > a .constl-icon {
  font-size: 22px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .service-detail-card .tabular-tab .tabular-tab-nav .tabular-item > a .constl-icon {
    font-size: calc(22 * var(--scaleWidth));
  }
}
.service-detail-card .tabular-tab .tabular-tab-nav .tabular-item:first-child a {
  padding-left: 0;
}
.service-detail-card .tabular-tab .tabular-tab-nav .tabular-item:last-child a {
  padding-right: 0;
}
.service-detail-card .shareFeedback-card {
  box-shadow: none !important;
}

.mapbox-dashboard-card {
  background: var(--dashboard-mapboxCard-background-color);
  border-radius: var(--dashboard-mapboxCard-borderRadius);
  padding: var(--dashboard-mapboxCard-padding);
  box-shadow: var(--dashboard-mapboxCard-boxShadow);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mapbox-dashboard-card {
    border-radius: calc(12 * var(--scaleWidth));
    padding-top: calc(20 * var(--scaleWidth));
    padding-bottom: calc(20 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
  }
}
.mapbox-dashboard-card .card-header .title {
  font-size: var(--dashboard-mapboxCard-header-heading-fontSize);
  font-weight: var(--dashboard-mapboxCard-header-heading-fontWeight);
  color: var(--dashboard-mapboxCard-header-heading-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mapbox-dashboard-card .card-header .title {
    font-size: calc(22 * var(--scaleWidth));
  }
}
.mapbox-dashboard-card .form-group-inline label {
  font-size: var(--dashboard-mapboxCard-header-selectDropdown-label-fontSize);
  font-weight: var(--dashboard-mapboxCard-header-selectDropdown-label-fontWeight);
  color: var(--dashboard-mapboxCard-header-selectDropdown-label-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mapbox-dashboard-card .form-group-inline label {
    font-size: calc(17 * var(--scaleWidth));
  }
}
.mapbox-dashboard-card .form-group-inline .custom-select {
  min-width: var(--dashboard-mapboxCard-header-selectDropdown-width);
  border-radius: var(--dashboard-mapboxCard-header-selectDropdown-borderRadius);
  font-size: var(--dashboard-mapboxCard-header-selectDropdown-fontSize);
  font-weight: var(--dashboard-mapboxCard-header-selectDropdown-fontWeight);
  color: var(--dashboard-mapboxCard-header-selectDropdown-color);
  border: var(--dashboard-mapboxCard-header-selectDropdown-border);
  padding: var(--dashboard-mapboxCard-header-selectDropdown-padding);
  min-height: var(--dashboard-mapboxCard-header-selectDropdown-height);
  background-color: var(--dashboard-mapboxCard-header-selectDropdown-background-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mapbox-dashboard-card .form-group-inline .custom-select {
    font-size: calc(16 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(12 * var(--scaleWidth));
    padding-right: calc(12 * var(--scaleWidth));
    min-height: calc(44 * var(--scaleWidth));
  }
}
.mapbox-dashboard-card #map {
  height: var(--dashboard-mapboxCard-height);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mapbox-dashboard-card #map {
    height: calc(570 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .mapbox-dashboard-card #map {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
}

@media (max-width: 1199px) {
  .dashboard-widgets {
    margin-bottom: 0 !important;
  }
  .dashboard-widgets > .col-sm-12 {
    width: 100%;
    max-width: 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
  }
}
.dashboard-widgets .inline-status-widget .icon,
.dashboard-widgets .inline-status-widget-dashboard .icon {
  border-radius: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dashboard-widgets .inline-status-widget .icon,
  .dashboard-widgets .inline-status-widget-dashboard .icon {
    border-radius: calc(5 * var(--scaleWidth));
  }
}
.dashboard-widgets .inline-status-widget .status-details .title,
.dashboard-widgets .inline-status-widget-dashboard .status-details .title {
  font-size: var(--font-size-normal);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dashboard-widgets .inline-status-widget .status-details .title,
  .dashboard-widgets .inline-status-widget-dashboard .status-details .title {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.dashboard-widgets .inline-status-widget .status-details .value,
.dashboard-widgets .inline-status-widget-dashboard .status-details .value {
  font-size: var(--font-size-extra-larger-60);
  line-height: 100%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dashboard-widgets .inline-status-widget .status-details .value,
  .dashboard-widgets .inline-status-widget-dashboard .status-details .value {
    font-size: calc(60 * var(--scaleWidth));
  }
}
@media (max-width: 1199px) {
  .dashboard-widgets .inline-status-widget .status-details .value,
  .dashboard-widgets .inline-status-widget-dashboard .status-details .value {
    font-size: var(--font-size-extra-larger-42);
  }
}
.dashboard-widgets .mapbox-dashboard-card-wrap .map-container,
.dashboard-widgets .mapbox-dashboard-card-wrap .row {
  height: 100%;
}
.dashboard-widgets .mapbox-dashboard-card-wrap .card {
  min-height: 670px;
  height: 100%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dashboard-widgets .mapbox-dashboard-card-wrap .card {
    min-height: calc(670 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .dashboard-widgets .mapbox-dashboard-card-wrap .card {
    min-height: 550px;
  }
}

.constl-team-card {
  padding: 15px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-team-card {
    padding: calc(15 * var(--scaleWidth));
  }
}
.constl-team-card .loader_wrap > div:last-child {
  margin-bottom: 0 !important;
}
.constl-team-card .team-card .team-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-team-card .team-card .team-detail-header {
    gap: calc(10 * var(--scaleWidth));
    margin-bottom: calc(10 * var(--scaleWidth));
  }
}
.constl-team-card .team-card .team-detail-header .team-profile {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: 60px;
  height: 60px;
  border-radius: 100px;
  overflow: hidden;
  background-color: var(--avtar-background-color, #f1f2f5);
  color: #6b6c7e;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-team-card .team-card .team-detail-header .team-profile {
    width: calc(60 * var(--scaleWidth));
    height: calc(60 * var(--scaleWidth));
  }
}
.constl-team-card .team-card .team-detail-header .team-profile img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.constl-team-card .team-card .team-detail-header .team-profile .constl-icon {
  color: var(--avtar-color, #6b6c7e);
  font-size: var(--avtar-fontSize, 35px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .constl-team-card .team-card .team-detail-header .team-profile .constl-icon {
    font-size: calc(35 * var(--scaleWidth));
  }
}
.constl-team-card .team-card .team-detail-header .team-department {
  margin-bottom: 0;
  padding-bottom: 0;
  border: 0;
}
.constl-team-card .team-card .team-detail-header .team-department img,
.constl-team-card .team-card .team-detail-header .team-department .constl-icon {
  display: none;
}
.constl-team-card .team-card .team-detail .team-profile-detail {
  text-align: left;
}
.constl-team-card .col-lg-5 .team-card {
  margin-top: 0 !important;
}
@media (max-width: 768px) {
  .constl-team-card .col-lg-5 {
    margin-bottom: 15px;
  }
  .constl-team-card .col-lg-5:last-child {
    margin-bottom: 0;
  }
}

.mapboxgl-popup {
  max-width: max-content !important;
}
@media (max-width: 768px) {
  .mapboxgl-popup {
    transform: none !important;
    top: auto;
    bottom: 0;
    padding: 10px;
    left: 0;
    width: 100%;
  }
}
.mapboxgl-popup .mapboxgl-popup-content {
  padding: 0 !important;
  background-color: var(--mapbox-dialog-background);
}

.mapbox-dialog {
  display: inline-block;
  width: 100%;
  max-width: var(--mapbox-dialog-maxWidth);
  vertical-align: top;
  background-color: var(--mapbox-dialog-background);
  border-radius: var(--mapbox-dialog-borderRadius);
  box-shadow: var(--mapbox-dialog-boxShadow);
  padding: var(--mapbox-dialog-padding);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mapbox-dialog {
    padding-top: calc(15 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.mapbox-dialog .mapbox-dailog-header,
.mapbox-dialog .mapbox-dialog-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--mapbox-dialog-header-padding-bottom);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mapbox-dialog .mapbox-dailog-header,
  .mapbox-dialog .mapbox-dialog-header {
    gap: calc(6 * var(--scaleWidth));
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
.mapbox-dialog .mapbox-dailog-header .route-details,
.mapbox-dialog .mapbox-dialog-header .route-details {
  font-size: var(--mapbox-dialog-header-routeDetails-fontSize);
  color: var(--mapbox-dialog-header-routeDetails-color);
  font-weight: var(--mapbox-dialog-header-routeDetails-fontWeight);
  line-height: 128.57%;
  display: flex;
  align-items: center;
  gap: 6px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mapbox-dialog .mapbox-dailog-header .route-details,
  .mapbox-dialog .mapbox-dialog-header .route-details {
    font-size: calc(14 * var(--scaleWidth));
    gap: calc(6 * var(--scaleWidth));
  }
}
.mapbox-dialog .mapbox-dailog-header .route-details::after,
.mapbox-dialog .mapbox-dialog-header .route-details::after {
  content: "";
  background-image: url("../../krypton-theme-css/assets/icons/copy_icon.png");
  background-repeat: no-repeat;
  width: 12px;
  height: 12px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mapbox-dialog .mapbox-dailog-header .route-details::after,
  .mapbox-dialog .mapbox-dialog-header .route-details::after {
    width: calc(12 * var(--scaleWidth));
    height: calc(12 * var(--scaleWidth));
    background-size: calc(12 * var(--scaleWidth));
  }
}
.mapbox-dialog .mapbox-dailog-header .route-details span,
.mapbox-dialog .mapbox-dialog-header .route-details span {
  color: var(--mapbox-dialog-header-routeDetails-span-color);
  font-weight: var(--mapbox-dialog-header-routeDetails-span-fontWeight);
}
.mapbox-dialog .mapbox-dailog-header .line-details,
.mapbox-dialog .mapbox-dialog-header .line-details {
  font-size: var(--mapbox-dialog-header-routeDetails-line-details-fontSize);
  color: var(--mapbox-dialog-header-routeDetails-line-details-color);
  font-weight: var(--mapbox-dialog-header-routeDetails-line-details-fontWeight);
  line-height: 128.57%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mapbox-dialog .mapbox-dailog-header .line-details,
  .mapbox-dialog .mapbox-dialog-header .line-details {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.mapbox-dialog .mapbox-dialog-body {
  display: inline-block;
  width: 100%;
  max-width: var(--mapbox-dialog-body-maxWidth);
  overflow: auto;
  vertical-align: top;
  margin-bottom: var(--mapbox-dialog-body-margine-bottom);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mapbox-dialog .mapbox-dialog-body {
    max-width: calc(400 * var(--scaleWidth));
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
.mapbox-dialog .mapbox-dialog-body .routes-details {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: var(--mapbox-dialog-body-routeDetails-gap);
  padding: 0;
  margin: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mapbox-dialog .mapbox-dialog-body .routes-details {
    gap: calc(15 * var(--scaleWidth));
  }
}
.mapbox-dialog .mapbox-dialog-body .routes-details li {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.mapbox-dialog .mapbox-dialog-body .routes-details li .route-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--mapbox-dialog-body-routeDetails-routeBox-gap);
  padding-left: var(--mapbox-dialog-body-routeDetails-padding-left);
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mapbox-dialog .mapbox-dialog-body .routes-details li .route-box {
    gap: calc(8 * var(--scaleWidth));
    padding-left: calc(18 * var(--scaleWidth));
  }
}
.mapbox-dialog .mapbox-dialog-body .routes-details li .route-box::before {
  position: absolute;
  left: 0;
  top: 5px;
  width: 10px;
  height: 10px;
  content: "";
  display: inline-block;
  vertical-align: top;
  box-shadow: 0px 0px 10px 0px rgba(var(--mapbox-primary-route-color), 0.9);
  background: var(--mapbox-primary-route-color);
  border: 1.5px solid color-mix(in srgb, black 90%, var(--mapbox-primary-route-color));
  border-radius: 100%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mapbox-dialog .mapbox-dialog-body .routes-details li .route-box::before {
    width: calc(10 * var(--scaleWidth));
    height: calc(10 * var(--scaleWidth));
    border: calc(1.5 * var(--scaleWidth)) solid color-mix(in srgb, black 90%, var(--mapbox-primary-route-color));
  }
}
.mapbox-dialog .mapbox-dialog-body .routes-details li .route-box.primary-route::before {
  box-shadow: 0px 0px 10px 0px rgba(var(--mapbox-primary-route-color), 0.9);
  background: var(--mapbox-primary-route-color);
  border: 1.5px solid color-mix(in srgb, black 90%, var(--mapbox-primary-route-color));
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mapbox-dialog .mapbox-dialog-body .routes-details li .route-box.primary-route::before {
    border-width: calc(1.5 * var(--scaleWidth));
  }
}
.mapbox-dialog .mapbox-dialog-body .routes-details li .route-box.secondary-route::before {
  box-shadow: 0px 0px 10px 0px rgba(var(--mapbox-secondary-route-color), 0.9);
  background: var(--mapbox-secondary-route-color);
  border: 1.5px solid color-mix(in srgb, black 90%, var(--mapbox-secondary-route-color));
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mapbox-dialog .mapbox-dialog-body .routes-details li .route-box.secondary-route::before {
    border-width: calc(1.5 * var(--scaleWidth));
  }
}
.mapbox-dialog .mapbox-dialog-body .routes-details li .route-box.recovery-route::before {
  box-shadow: 0px 0px 10px 0px rgba(var(--mapbox-secondary-route-color), 0.9);
  background: var(--mapbox-secondary-route-color);
  border: 1.5px solid color-mix(in srgb, black 90%, var(--mapbox-secondary-route-color));
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mapbox-dialog .mapbox-dialog-body .routes-details li .route-box.recovery-route::before {
    border-width: calc(1.5 * var(--scaleWidth));
  }
}
.mapbox-dialog .mapbox-dialog-body .routes-details li .route-box .route-title {
  display: inline-block;
  width: auto;
  vertical-align: top;
  font-size: var(--mapbox-secondary-route-title-fontSize, 12px);
  color: var(--mapbox-secondary-route-title-color, #000000);
  font-weight: 600;
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mapbox-dialog .mapbox-dialog-body .routes-details li .route-box .route-title {
    font-size: calc(12 * var(--scaleWidth));
  }
}
.mapbox-dialog .mapbox-dialog-body .routes-details li .route-box .route-points {
  display: flex;
  align-items: center;
  position: relative;
  min-width: min-content;
}
.mapbox-dialog .mapbox-dialog-body .routes-details li .route-box .route-points::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  background-color: var(--color-primary-mode);
  display: inline-block;
  vertical-align: top;
  height: 1px;
  width: 100%;
}
.mapbox-dialog .mapbox-dialog-body .routes-details li .route-box .route-points .route-point {
  flex: 1;
}
.mapbox-dialog .mapbox-dialog-body .routes-details li .route-box .route-points .route-point:last-child {
  text-align: right;
}
.mapbox-dialog .mapbox-dialog-body .routes-details li .route-box .route-points .route-point span {
  font-size: var(--mapbox-secondary-route-point-fontSize, 11px);
  color: var(--mapbox-secondary-route-point-color, #475467);
  font-weight: 400;
  text-transform: capitalize;
  display: inline-block;
  vertical-align: top;
  padding-left: 15px;
  padding-right: 5px;
  position: relative;
  background-color: var(--mapbox-secondary-route-point-background-color, #ffffff);
  z-index: 9;
  white-space: nowrap;
  margin-right: 20px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mapbox-dialog .mapbox-dialog-body .routes-details li .route-box .route-points .route-point span {
    font-size: calc(12 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(5 * var(--scaleWidth));
    margin-right: calc(20 * var(--scaleWidth));
  }
}
.mapbox-dialog .mapbox-dialog-body .routes-details li .route-box .route-points .route-point span::before {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  background-color: var(--mapbox-secondary-route-point-location-background-color, #861FFF);
  content: "";
  display: inline-block;
  vertical-align: top;
  border-radius: 100px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mapbox-dialog .mapbox-dialog-body .routes-details li .route-box .route-points .route-point span::before {
    width: calc(8 * var(--scaleWidth));
    height: calc(8 * var(--scaleWidth));
  }
}
.mapbox-dialog .mapbox-dialog-body .routes-details li .route-box .route-points .route-point:first-child span {
  padding-left: 0;
  padding-right: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mapbox-dialog .mapbox-dialog-body .routes-details li .route-box .route-points .route-point:first-child span {
    padding-right: calc(5 * var(--scaleWidth));
  }
}
.mapbox-dialog .mapbox-dialog-body .routes-details li .route-box .route-points .route-point:first-child span::before {
  display: none;
}
.mapbox-dialog .mapbox-dialog-body .routes-details li .route-box .route-points .route-point:last-child span {
  margin-right: 0;
}
.mapbox-dialog .mapbox-dialog-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.mapbox-dialog .mapbox-dialog-footer .button {
  width: var(--mapbox-dialog-footer-button-width);
  height: var(--mapbox-dialog-footer-button-height);
  padding: var(--mapbox-dialog-footer-button-padding);
  font-size: var(--mapbox-dialog-footer-button-fontSize);
  gap: var(--mapbox-dialog-footer-button-gap);
  outline: none !important;
  box-shadow: none !important;
  background-color: var(--mapbox-dialog-footer-button-background-color);
  color: var(--mapbox-dialog-footer-button-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .mapbox-dialog .mapbox-dialog-footer .button {
    font-size: calc(14 * var(--scaleWidth));
    width: calc(127 * var(--scaleWidth));
    height: calc(44 * var(--scaleWidth));
  }
}

#dashboard-map {
  height: calc(100% - 59px);
  display: inline-block;
  width: 100%;
  vertical-align: top;
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #dashboard-map {
    height: calc(100% - 3.6875vw);
  }
}
@media (max-width: 768px) {
  #dashboard-map {
    height: calc(100% - 126px);
  }
}
#dashboard-map .mapbox-wrap {
  position: static;
}
#dashboard-map .mapbox-wrap .mapboxgl-ctrl-bottom-left {
  display: none;
}
#dashboard-map #map {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.request-edit-error {
  color: red;
  font-size: 0.875rem;
  margin-block: 2px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .request-edit-error {
    font-size: calc(14 * var(--scaleWidth));
    margin-block: calc(2 * var(--scaleWidth));
  }
}

.dashboard-layout .react-grid-item.react-grid-placeholder {
  background: var(--dashboard-status-widget-totalOrders-color);
  opacity: 0.2;
}

.serviceperfomance_details_card {
  background: var(--serviceperfomance-details-card-background-color);
  box-shadow: var(--serviceperfomance-details-card-boxShadow);
  padding: var(--serviceperfomance-details-card-padding);
  border-radius: var(--serviceperfomance-details-card-borderRadius);
  padding-right: 40px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .serviceperfomance_details_card {
    padding-top: calc(15 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
    padding-left: calc(20 * var(--scaleWidth));
    padding-right: calc(40 * var(--scaleWidth));
    border-radius: calc(12 * var(--scaleWidth));
  }
}
.serviceperfomance_details_card ul {
  display: flex;
  padding: 0;
  margin: 0 -15px 0 -14px;
  list-style: none;
  flex-wrap: wrap;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .serviceperfomance_details_card ul {
    margin: 0 calc(-15 * var(--scaleWidth)) 0 calc(-14 * var(--scaleWidth));
  }
}
@media (max-width: 1024px) {
  .serviceperfomance_details_card ul {
    gap: 15px 0;
  }
}
.serviceperfomance_details_card ul li {
  padding: 0 15px 0 14px;
  border-right: var(--serviceperfomance-details-card-column-border-right);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .serviceperfomance_details_card ul li {
    padding: 0 calc(15 * var(--scaleWidth)) 0 calc(14 * var(--scaleWidth));
  }
}
@media (max-width: 1024px) {
  .serviceperfomance_details_card ul li {
    border: 0;
  }
}
.serviceperfomance_details_card ul li:first-child, .serviceperfomance_details_card ul li:last-child {
  flex: 0 0 300px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .serviceperfomance_details_card ul li:first-child, .serviceperfomance_details_card ul li:last-child {
    flex: 0 0 calc(300 * var(--scaleWidth));
  }
}
@media (max-width: 1024px) {
  .serviceperfomance_details_card ul li:first-child, .serviceperfomance_details_card ul li:last-child {
    flex: 0 0 100%;
  }
}
.serviceperfomance_details_card ul li:not(:first-child):not(:last-child) {
  flex: 1;
}
@media (max-width: 1024px) {
  .serviceperfomance_details_card ul li:not(:first-child):not(:last-child) {
    flex: 0 0 33.33%;
  }
}
@media (max-width: 479px) {
  .serviceperfomance_details_card ul li:not(:first-child):not(:last-child) {
    flex: 0 0 50%;
  }
}
.serviceperfomance_details_card ul li:last-child {
  border: 0;
}
.serviceperfomance_details_card ul li .form-group-view {
  display: flex;
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .serviceperfomance_details_card ul li .form-group-view {
    gap: calc(10 * var(--scaleWidth));
  }
}
.serviceperfomance_details_card ul li .form-group-view .title {
  font-size: var(--serviceperfomance-details-card-viewDetails-title-fontSize);
  font-weight: var(--serviceperfomance-details-card-viewDetails-title-fontWeight);
  color: var(--serviceperfomance-details-card-viewDetails-title-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .serviceperfomance_details_card ul li .form-group-view .title {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.serviceperfomance_details_card ul li .form-group-view .value {
  font-size: var(--serviceperfomance-details-card-viewDetails-value-fontSize);
  font-weight: var(--serviceperfomance-details-card-viewDetails-value-fontWeight);
  color: var(--serviceperfomance-details-card-viewDetails-value-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .serviceperfomance_details_card ul li .form-group-view .value {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.serviceperfomance_details_card ul li .form-group {
  display: flex;
  gap: 10px;
  flex-direction: column;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .serviceperfomance_details_card ul li .form-group {
    gap: calc(10 * var(--scaleWidth));
  }
}
.serviceperfomance_details_card ul li .form-group label {
  font-size: var(--serviceperfomance-details-card-selectDropdown-label-fontSize);
  font-weight: var(--serviceperfomance-details-card-selectDropdown-label-fontWeight);
  line-height: 140%;
  color: var(--serviceperfomance-details-card-selectDropdown-label-color);
  margin-bottom: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .serviceperfomance_details_card ul li .form-group label {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.serviceperfomance_details_card ul li .form-group .custom-select {
  font-size: var(--serviceperfomance-details-card-selectDropdown-fontSize);
  color: var(--serviceperfomance-details-card-selectDropdown-color);
  border: var(--serviceperfomance-details-card-selectDropdown-border);
  border-radius: var(--serviceperfomance-details-card-selectDropdown-borderRadius);
  padding: var(--serviceperfomance-details-card-selectDropdown-padding);
  min-height: var(--serviceperfomance-details-card-selectDropdown-height);
  background-color: var(--serviceperfomance-details-card-selectDropdown-background-color);
  padding-right: 40px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .serviceperfomance_details_card ul li .form-group .custom-select {
    font-size: calc(16 * var(--scaleWidth));
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(12 * var(--scaleWidth));
    padding-right: calc(40 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
    min-height: calc(44 * var(--scaleWidth));
    height: calc(44 * var(--scaleWidth));
  }
}

.dashboard_serviceperformance_card {
  background-color: var(-dashboard-service-performance-card-Background);
  padding: 0;
}
.dashboard_serviceperformance_card > .card-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: var(--dashboard-servicePerformance-card-header-padding);
  border-bottom: var(--dashboard-servicePerformance-card-header-border-bottom);
  flex-direction: column;
  gap: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dashboard_serviceperformance_card > .card-header {
    padding-top: calc(15 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
    padding-left: calc(20 * var(--scaleWidth));
    padding-right: calc(20 * var(--scaleWidth));
    gap: calc(5 * var(--scaleWidth));
  }
}
.dashboard_serviceperformance_card > .card-header .card-header-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.dashboard_serviceperformance_card > .card-header .card-header-row .title {
  display: flex;
  align-items: center;
  font-size: var(--dashboard-servicePerformance-card-header-title);
  color: var(--dashboard-servicePerformance-card-header-color);
  width: auto;
  margin-bottom: 0 !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dashboard_serviceperformance_card > .card-header .card-header-row .title {
    font-size: calc(12 * var(--scaleWidth));
  }
}
.dashboard_serviceperformance_card > .card-header .card-header-row .title .constl-icon {
  font-size: var(--dashboard-servicePerformance-card-header-icon-fontSize, 24px);
  color: var(--dashboard-servicePerformance-card-header-icon-color, #475467);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dashboard_serviceperformance_card > .card-header .card-header-row .title .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.dashboard_serviceperformance_card > .card-header .card-header-row .rightbar ul {
  list-style: none;
  align-items: center;
  display: flex;
  gap: 10px;
  padding: 0;
  margin: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dashboard_serviceperformance_card > .card-header .card-header-row .rightbar ul {
    gap: calc(10 * var(--scaleWidth));
  }
}
.dashboard_serviceperformance_card > .card-header .card-header-row .rightbar ul li {
  list-style: none;
}
.dashboard_serviceperformance_card > .card-header .card-header-row .rightbar ul li .view_switch {
  display: flex;
  align-items: center;
  border: var(--dashboard-servicePerformance-card-header-viewSwitch-border);
  background-color: var(--dashboard-servicePerformance-card-header-viewSwitch-background-color);
  box-shadow: var(--dashboard-servicePerformance-card-header-viewSwitch-boxShadow);
  padding: var(--dashboard-servicePerformance-card-header-viewSwitch-padding);
  gap: 5px;
  border-radius: var(--dashboard-servicePerformance-card-header-viewSwitch-borderRadius);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dashboard_serviceperformance_card > .card-header .card-header-row .rightbar ul li .view_switch {
    font-size: calc(20 * var(--scaleWidth));
    padding-top: calc(3 * var(--scaleWidth));
    padding-bottom: calc(3 * var(--scaleWidth));
    padding-left: calc(3 * var(--scaleWidth));
    padding-right: calc(3 * var(--scaleWidth));
    gap: calc(5 * var(--scaleWidth));
    border-radius: calc(4 * var(--scaleWidth));
  }
}
.dashboard_serviceperformance_card > .card-header .card-header-row .rightbar ul li .view_switch .btn {
  width: var(--dashboard-servicePerformance-card-header-viewSwitch-dimension);
  height: var(--dashboard-servicePerformance-card-header-viewSwitch-dimension);
  outline: none;
  border: 0;
  border-radius: var(--dashboard-servicePerformance-card-header-viewSwitch-borderRadius);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  box-shadow: none;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dashboard_serviceperformance_card > .card-header .card-header-row .rightbar ul li .view_switch .btn {
    width: calc(35 * var(--scaleWidth));
    height: calc(35 * var(--scaleWidth));
    border-radius: calc(4 * var(--scaleWidth));
  }
}
.dashboard_serviceperformance_card > .card-header .card-header-row .rightbar ul li .view_switch .btn.active {
  background-color: var(--color-primary-mode);
}
.dashboard_serviceperformance_card > .card-header .card-header-row .rightbar ul li .view_switch .btn.active img {
  filter: brightness(0) invert(1);
}
.dashboard_serviceperformance_card > .card-header .card-header-row .rightbar ul li .xls-btn {
  display: inline-block;
  width: auto;
  vertical-align: top;
}
.dashboard_serviceperformance_card > .card-header .card-header-row .rightbar ul li .btn-group .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dashboard-servicePerformance-card-header-groupButton-padding);
  height: var(--dashboard-servicePerformance-card-header-groupButton-dimension);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dashboard_serviceperformance_card > .card-header .card-header-row .rightbar ul li .btn-group .btn {
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
    height: calc(35 * var(--scaleWidth));
  }
  .dashboard_serviceperformance_card > .card-header .card-header-row .rightbar ul li .btn-group .btn .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.dashboard_serviceperformance_card > .card-header .card-header-row .rightbar ul li .btn-group .btn.btn-primary {
  background-color: var(--dashboard-servicePerformance-card-header-groupButton-background-color);
  border-color: var(--dashboard-servicePerformance-card-header-groupButton-border-color);
  color: var(--dashboard-servicePerformance-card-header-groupButton-color);
}
.dashboard_serviceperformance_card > .card-header .card-header-row .rightbar ul li .btn-group .btn.btn-primary.active, .dashboard_serviceperformance_card > .card-header .card-header-row .rightbar ul li .btn-group .btn.btn-primary:hover {
  background-color: color-mix(in srgb, black 20%, var(--color-primary));
  border-color: color-mix(in srgb, black 20%, var(--color-primary));
  color: var(--color-white);
}
.dashboard_serviceperformance_card > .card-header .card-header-row .rightbar ul li .btn-group .btn img {
  filter: brightness(0) invert(1);
}
.dashboard_serviceperformance_card > .card-header .card-header-row .form-group-view {
  display: inline-flex;
  flex-direction: row;
  gap: 10px;
  padding-left: 34px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dashboard_serviceperformance_card > .card-header .card-header-row .form-group-view {
    gap: calc(10 * var(--scaleWidth));
    padding-left: calc(34 * var(--scaleWidth));
  }
}
.dashboard_serviceperformance_card > .card-header .card-header-row .form-group-view .title {
  white-space: nowrap;
  font-size: var(--dashboard-servicePerformance-card-header-details-title-fontSize);
  line-height: 100%;
  font-weight: var(--dashboard-servicePerformance-card-header-details-title-fontWeight);
  width: auto;
  color: var(--dashboard-servicePerformance-card-header-details-title-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dashboard_serviceperformance_card > .card-header .card-header-row .form-group-view .title {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.dashboard_serviceperformance_card > .card-header .card-header-row .form-group-view .value {
  font-size: var(--dashboard-servicePerformance-card-header-details-value-fontSize);
  color: var(--dashboard-servicePerformance-card-header-details-value-color);
  font-weight: var(--dashboard-servicePerformance-card-header-details-value-fontWeight);
  width: auto;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dashboard_serviceperformance_card > .card-header .card-header-row .form-group-view .value {
    font-size: calc(18 * var(--scaleWidth));
  }
}
.dashboard_serviceperformance_card > .card-body {
  padding: 0 25px 10px 25px;
  min-height: 310px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dashboard_serviceperformance_card > .card-body {
    padding: 0 calc(25 * var(--scaleWidth)) calc(10 * var(--scaleWidth)) calc(25 * var(--scaleWidth));
    min-height: calc(310 * var(--scaleWidth));
  }
}
.dashboard_serviceperformance_card > .card-body .card .card-header {
  margin-bottom: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dashboard_serviceperformance_card > .card-body .card .card-header {
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
.dashboard_serviceperformance_card > .card-body .card .card-header .title {
  font-size: var(--font-size-normal);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dashboard_serviceperformance_card > .card-body .card .card-header .title {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.dashboard_serviceperformance_card > .card-body .card .table-main-body .table-container {
  padding-right: 10px;
  max-height: 283px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dashboard_serviceperformance_card > .card-body .card .table-main-body .table-container {
    padding-right: calc(10 * var(--scaleWidth));
    max-height: calc(283 * var(--scaleWidth));
  }
}

.dashboard-page {
  margin-bottom: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dashboard-page {
    margin-bottom: calc(10 * var(--scaleWidth));
  }
}
.dashboard-page > .row {
  flex-direction: row-reverse;
  gap: 10px 0;
  align-items: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dashboard-page > .row {
    gap: calc(10 * var(--scaleWidth)) 0;
  }
}
.dashboard-page > .row > div .tabs-lines-fiber {
  margin-bottom: 0 !important;
}
.dashboard-page > .row > div .tab-wrapper .tab-nav {
  flex-wrap: nowrap;
}
.dashboard-page > .row > div .tab-wrapper .tab-nav li:last-child {
  width: 100%;
}
@media (max-width: 1199px) {
  .dashboard-page > .row {
    flex-direction: column;
  }
  .dashboard-page > .row > div {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .dashboard-page > .row > div .tab-wrapper .tab-nav {
    flex-wrap: wrap;
  }
  .dashboard-page > .row > div .tab-wrapper .tab-nav li {
    flex: 1;
  }
}
.dashboard-page .tab-wrapper {
  width: 100%;
}
.dashboard-page .alert-box {
  margin-bottom: 0;
  width: 100%;
}
@media (max-width: 768px) {
  .dashboard-page .tabs-lines-fiber .tab-wrapper ul.tab-nav li a {
    line-height: 18px;
  }
}
.dashboard-page .alertbox-wrap {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dashboard-page .alertbox-wrap {
    gap: calc(10 * var(--scaleWidth)) 0;
  }
}
.dashboard-page .alertbox-wrap .toggle-map-btn {
  width: 200px;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: gap;
  justify-content: center;
  min-height: 50px;
  margin-left: auto;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .dashboard-page .alertbox-wrap .toggle-map-btn {
    width: calc(200 * var(--scaleWidth));
    min-width: calc(200 * var(--scaleWidth));
    min-height: calc(50 * var(--scaleWidth));
  }
}

@media (max-width: 1199px) {
  .dashboard_serviceperformance_card_row .col-md-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 768px) {
  .dashboard_serviceperformance_card_row .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.performance-form {
  display: flex;
  align-items: flex-end;
  gap: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .performance-form {
    gap: calc(15 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .performance-form {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
}
.performance-form .button {
  height: 44px;
  border-radius: 8px;
  font-weight: 600;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .performance-form .button {
    height: calc(44 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
  }
}

.performance-tabular .tabular-content-title {
  color: var(--body-text-color);
  font-weight: 500;
  font-size: var(--font-size-normal);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .performance-tabular .tabular-content-title {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.performance-tabular .status-widget-card {
  max-width: 495px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .performance-tabular .status-widget-card {
    max-width: calc(495 * var(--scaleWidth));
  }
}
.performance-tabular .status-widget-card .icon {
  border-radius: 8px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .performance-tabular .status-widget-card .icon {
    gap: calc(8 * var(--scaleWidth));
  }
}
.performance-tabular .status-widget-card .status-details {
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .performance-tabular .status-widget-card .status-details {
    gap: calc(10 * var(--scaleWidth));
  }
}
.performance-tabular .status-widget-card .status-details .title {
  font-size: var(--font-size-large);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .performance-tabular .status-widget-card .status-details .title {
    font-size: calc(18 * var(--scaleWidth));
  }
}
.performance-tabular .status-widget-card .status-details .value {
  font-size: var(--font-size-30);
  line-height: 100%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .performance-tabular .status-widget-card .status-details .value {
    font-size: calc(30 * var(--scaleWidth));
  }
}
.performance-tabular .right-controls {
  justify-content: flex-end;
  gap: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .performance-tabular .right-controls {
    gap: calc(5 * var(--scaleWidth));
  }
}
.performance-tabular .right-controls .custom-select {
  padding-right: 40px;
  background-position: calc(100% - 16px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .performance-tabular .right-controls .custom-select {
    padding-right: calc(40 * var(--scaleWidth));
    background-position: calc(100% - 16 * var(--scaleWidth));
  }
}
.performance-tabular .tabular-item-content .row .col-12:last-child {
  margin-bottom: 0 !important;
}
.performance-tabular .tabular-item-content .table-main-body {
  margin: 0 !important;
}

.tabular-item-content .table-main-body {
  margin: -10px 0 0 0 !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .tabular-item-content .table-main-body {
    margin: calc(-10 * var(--scaleWidth)) 0 0 0 !important;
  }
}

.document-btn-wrap {
  display: inline-block;
  width: auto;
  vertical-align: top;
}
.document-btn-wrap .document-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  outline: none;
  box-shadow: none;
  text-decoration: none;
  background-color: transparent;
  background: transparent;
}
.document-btn-wrap .document-btn .constl-icon {
  color: var(--document-btn-icon-color, #372194);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .document-btn-wrap .document-btn .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}

.invoice-details-card {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  background-color: var(--invoice-details-card-background-color, #ffffff);
  border-radius: var(--invoice-details-card-borderRadius, 11px);
  border: var(--invoice-details-card-border, 1px solid #D9D9D9);
  box-shadow: var(--invoice-details-card-boxShadow, 0px 4px 15px 0px rgba(0, 0, 0, 0.1411764706));
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card {
    border-radius: calc(11 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-header {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  position: relative;
  border-top-left-radius: var(--invoice-details-card-borderRadius, 11px);
  border-top-right-radius: var(--invoice-details-card-borderRadius, 11px);
  border-bottom: var(--invoice-details-card-header-border-bottom, 1px solid #D9D9D9);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-header {
    border-top-left-radius: calc(11 * var(--scaleWidth));
    border-top-right-radius: calc(11 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-header .invoice-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: var(--invoice-details-card-header-row-background, #eff6ff);
  padding: var(--invoice-details-card-header-row-padding, 15px 20px);
  border-top-left-radius: var(--invoice-details-card-borderRadius, 11px);
  border-top-right-radius: var(--invoice-details-card-borderRadius, 11px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-header .invoice-row {
    border-top-left-radius: calc(11 * var(--scaleWidth));
    border-top-right-radius: calc(11 * var(--scaleWidth));
  }
}
@media (max-width: 479px) {
  .invoice-details-card .invoice-details-card-header .invoice-row {
    padding-top: 70px;
  }
}
.invoice-details-card .invoice-details-card-header .invoice-row .leftbar {
  display: flex;
  align-items: center;
  gap: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-header .invoice-row .leftbar {
    gap: calc(5 * var(--scaleWidth));
  }
}
@media (max-width: 479px) {
  .invoice-details-card .invoice-details-card-header .invoice-row .leftbar .add-favorate {
    position: absolute;
    top: 15px;
  }
}
.invoice-details-card .invoice-details-card-header .invoice-row .leftbar .invoice-details > ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
  gap: 10px 0;
  margin: 0 -20px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-header .invoice-row .leftbar .invoice-details > ul {
    gap: calc(10 * var(--scaleWidth)) 0;
    margin: 0 calc(-20 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-header .invoice-row .leftbar .invoice-details > ul > li {
  padding: 0 20px;
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-header .invoice-row .leftbar .invoice-details > ul > li {
    padding: 0 calc(20 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-header .invoice-row .leftbar .invoice-details > ul > li::after {
  position: absolute;
  right: 0;
  content: "";
  width: 1px;
  height: 19px;
  background-color: var(--invoice-details-card-header-row-invoiceDetails-divider-background-color, #414141);
  display: inline-block;
  vertical-align: top;
  top: 0;
  bottom: 0;
  margin: auto;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-header .invoice-row .leftbar .invoice-details > ul > li::after {
    height: calc(19 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-header .invoice-row .leftbar .invoice-details > ul > li:last-child::after {
  display: none;
}
.invoice-details-card .invoice-details-card-header .invoice-row .leftbar .invoice-details > ul > li .form-group-view {
  gap: 0;
  text-align: left;
}
.invoice-details-card .invoice-details-card-header .invoice-row .leftbar .invoice-details > ul > li .form-group-view .label {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  margin-bottom: 0;
  font-size: var(--invoice-details-card-header-row-invoiceDetails-label-fontSize, 14px);
  line-height: var(--invoice-details-card-header-row-invoiceDetails-label-fontLineHeight, 20px);
  color: var(--invoice-details-card-header-row-invoiceDetails-label-color, #414141);
  font-weight: var(--invoice-details-card-header-row-invoiceDetails-label-fontWeight, 400);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-header .invoice-row .leftbar .invoice-details > ul > li .form-group-view .label {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-header .invoice-row .leftbar .invoice-details > ul > li .form-group-view .value {
  font-size: var(--invoice-details-card-header-row-invoiceDetails-value-fontSize, 14px);
  line-height: var(--invoice-details-card-header-row-invoiceDetails-value-fontLineHeight, 20px);
  color: var(--invoice-details-card-header-row-invoiceDetails-value-color, #414141);
  font-weight: var(--invoice-details-card-header-row-invoiceDetails-value-fontWeight, 600);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-header .invoice-row .leftbar .invoice-details > ul > li .form-group-view .value {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-header .invoice-row .rightbar {
  display: inline-flex;
  align-items: center;
  right: 10px;
  top: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-header .invoice-row .rightbar {
    right: calc(10 * var(--scaleWidth));
    top: calc(15 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .invoice-details-card .invoice-details-card-header .invoice-row .rightbar {
    position: absolute;
  }
}
.invoice-details-card .invoice-details-card-header .invoice-row .rightbar .status-wrap {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.invoice-details-card .invoice-details-card-header .invoice-row .rightbar .status-wrap .status-due {
  font-size: var(--invoice-details-card-header-row-invoiceDetails-status-fontSize, 12px);
  color: var(--invoice-details-card-header-row-invoiceDetails-status-color, #ffffff);
  font-weight: var(--invoice-details-card-header-row-invoiceDetails-status-font-weight, 500);
  padding: var(--invoice-details-card-header-row-invoiceDetails-status-padding, 4px 27px);
  border: 1px solid var(--invoice-details-card-header-row-invoiceDetails-status-due-color, #FC670A);
  border-radius: var(--invoice-details-card-header-row-invoiceDetails-status-border-radius, 20px);
  background: var(--invoice-details-card-header-row-invoiceDetails-status-due-color, #FC670A);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-header .invoice-row .rightbar .status-wrap .status-due {
    font-size: calc(12 * var(--scaleWidth));
    padding-top: calc(4 * var(--scaleWidth));
    padding-bottom: calc(4 * var(--scaleWidth));
    padding-left: calc(27 * var(--scaleWidth));
    padding-right: calc(27 * var(--scaleWidth));
    border-radius: calc(20 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-header .invoice-row .rightbar .status-wrap .status-partiallypaid {
  font-size: var(--invoice-details-card-header-row-invoiceDetails-status-fontSize, 12px);
  color: var(--invoice-details-card-header-row-invoiceDetails-status-color, #ffffff);
  font-weight: var(--invoice-details-card-header-row-invoiceDetails-status-font-weight, 500);
  padding: var(--invoice-details-card-header-row-invoiceDetails-status-padding, 4px 27px);
  border: 1px solid var(--invoice-details-card-header-row-invoiceDetails-status-partiallypaid-color, #4873B5);
  border-radius: var(--invoice-details-card-header-row-invoiceDetails-status-border-radius, 20px);
  background: var(--invoice-details-card-header-row-invoiceDetails-status-partiallypaid-color, #4873B5);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-header .invoice-row .rightbar .status-wrap .status-partiallypaid {
    font-size: calc(12 * var(--scaleWidth));
    padding-top: calc(4 * var(--scaleWidth));
    padding-bottom: calc(4 * var(--scaleWidth));
    padding-left: calc(27 * var(--scaleWidth));
    padding-right: calc(27 * var(--scaleWidth));
    border-radius: calc(20 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-header .invoice-row .rightbar .status-wrap .status-paid {
  font-size: var(--invoice-details-card-header-row-invoiceDetails-status-fontSize, 12px);
  color: var(--invoice-details-card-header-row-invoiceDetails-status-color, #ffffff);
  font-weight: var(--invoice-details-card-header-row-invoiceDetails-status-font-weight, 500);
  padding: var(--invoice-details-card-header-row-invoiceDetails-status-padding, 4px 27px);
  border: 1px solid var(--invoice-details-card-header-row-invoiceDetails-status-paid-color, #40BF80);
  border-radius: var(--invoice-details-card-header-row-invoiceDetails-status-border-radius, 20px);
  background: var(--invoice-details-card-header-row-invoiceDetails-status-paid-color, #40BF80);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-header .invoice-row .rightbar .status-wrap .status-paid {
    font-size: calc(12 * var(--scaleWidth));
    padding-top: calc(4 * var(--scaleWidth));
    padding-bottom: calc(4 * var(--scaleWidth));
    padding-left: calc(27 * var(--scaleWidth));
    padding-right: calc(27 * var(--scaleWidth));
    border-radius: calc(20 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-header .invoice-row .rightbar .status-wrap .status-overdue {
  font-size: var(--invoice-details-card-header-row-invoiceDetails-status-fontSize, 12px);
  color: var(--invoice-details-card-header-row-invoiceDetails-status-color, #ffffff);
  font-weight: var(--invoice-details-card-header-row-invoiceDetails-status-font-weight, 500);
  padding: var(--invoice-details-card-header-row-invoiceDetails-status-padding, 4px 27px);
  border: 1px solid var(--invoice-details-card-header-row-invoiceDetails-status-overdue-color, #FC670A);
  border-radius: var(--invoice-details-card-header-row-invoiceDetails-status-border-radius, 20px);
  background: var(--invoice-details-card-header-row-invoiceDetails-status-overdue-color, #FC670A);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-header .invoice-row .rightbar .status-wrap .status-overdue {
    font-size: calc(12 * var(--scaleWidth));
    padding-top: calc(4 * var(--scaleWidth));
    padding-bottom: calc(4 * var(--scaleWidth));
    padding-left: calc(27 * var(--scaleWidth));
    padding-right: calc(27 * var(--scaleWidth));
    border-radius: calc(20 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-header .invoice-row .rightbar .status-wrap .status-overdueandpartiallypaid {
  font-size: var(--invoice-details-card-header-row-invoiceDetails-status-fontSize, 12px);
  color: var(--invoice-details-card-header-row-invoiceDetails-status-color, #ffffff);
  font-weight: var(--invoice-details-card-header-row-invoiceDetails-status-font-weight, 500);
  padding: var(--invoice-details-card-header-row-invoiceDetails-status-padding, 4px 27px);
  border: 1px solid var(--invoice-details-card-header-row-invoiceDetails-status-overdueandpartiallypaid-color, #4873B5);
  border-radius: var(--invoice-details-card-header-row-invoiceDetails-status-border-radius, 20px);
  background: var(--invoice-details-card-header-row-invoiceDetails-status-overdueandpartiallypaid-color, #4873B5);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-header .invoice-row .rightbar .status-wrap .status-overdueandpartiallypaid {
    font-size: calc(12 * var(--scaleWidth));
    padding-top: calc(4 * var(--scaleWidth));
    padding-bottom: calc(4 * var(--scaleWidth));
    padding-left: calc(27 * var(--scaleWidth));
    padding-right: calc(27 * var(--scaleWidth));
    border-radius: calc(20 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-header .invoice-row .rightbar .status-wrap .status-pending {
  font-size: var(--invoice-details-card-header-row-invoiceDetails-status-fontSize, 12px);
  color: var(--invoice-details-card-header-row-invoiceDetails-status-color, #ffffff);
  font-weight: var(--invoice-details-card-header-row-invoiceDetails-status-font-weight, 500);
  padding: var(--invoice-details-card-header-row-invoiceDetails-status-padding, 4px 27px);
  border: 1px solid var(--invoice-details-card-header-row-invoiceDetails-status-pending-color, #768392);
  border-radius: var(--invoice-details-card-header-row-invoiceDetails-status-border-radius, 20px);
  background: var(--invoice-details-card-header-row-invoiceDetails-status-pending-color, #768392);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-header .invoice-row .rightbar .status-wrap .status-pending {
    font-size: calc(12 * var(--scaleWidth));
    padding-top: calc(4 * var(--scaleWidth));
    padding-bottom: calc(4 * var(--scaleWidth));
    padding-left: calc(27 * var(--scaleWidth));
    padding-right: calc(27 * var(--scaleWidth));
    border-radius: calc(20 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-header .invoice-row .rightbar .buttons-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-header .invoice-row .rightbar .buttons-group {
    gap: calc(5 * var(--scaleWidth));
    margin-left: calc(5 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-header .invoice-row .rightbar .buttons-group .pdf {
  background: #ffffff;
  padding: 5px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  text-decoration: none;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-header .invoice-row .rightbar .buttons-group .pdf {
    width: calc(40 * var(--scaleWidth));
    height: calc(40 * var(--scaleWidth));
    padding: calc(5 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-header .invoice-row .rightbar .buttons-group .pdf .constl-icon {
  color: red;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-header .invoice-row .rightbar .buttons-group .pdf .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-header .toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--invoice-details-card-toggle-background, linear-gradient(90deg, #084EB9 0%, #372194 100%));
  outline: none;
  border: var(--invoice-details-card-toggle-border, 1px solid #ffffff);
  border-radius: var(--invoice-details-card-toggle-borderRadius, 100px);
  color: var(--invoice-details-card-toggle-color, #ffffff);
  width: var(--invoice-details-card-toggle-dimension, 30px);
  height: var(--invoice-details-card-toggle-dimension, 30px);
  content: "";
  position: absolute;
  bottom: -15px;
  right: -7px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-header .toggle-icon {
    width: calc(30 * var(--scaleWidth));
    height: calc(30 * var(--scaleWidth));
    bottom: calc(-15 * var(--scaleWidth));
    right: calc(-7 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-body {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  background: var(--invoice-details-card-body-background, #ffffff);
  padding: var(--invoice-details-card-body-padding, 20px);
  border-bottom-left-radius: var(--invoice-details-card-body-borderRadius, 11px);
  border-bottom-right-radius: var(--invoice-details-card-body-borderRadius, 11px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-body {
    padding-top: calc(20 * var(--scaleWidth));
    padding-bottom: calc(20 * var(--scaleWidth));
    padding-left: calc(20 * var(--scaleWidth));
    padding-right: calc(20 * var(--scaleWidth));
    border-bottom-left-radius: calc(11 * var(--scaleWidth));
    border-bottom-right-radius: calc(11 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-body .invoice-billing-row {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  position: relative;
  padding-right: 160px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-body .invoice-billing-row {
    padding-right: calc(160 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-body .invoice-billing-row .rightbar-status {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-body .invoice-billing-row .rightbar-status {
    gap: calc(5 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-body .invoice-billing-row .rightbar-status .buttons-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-body .invoice-billing-row .rightbar-status .buttons-group {
    gap: calc(5 * var(--scaleWidth));
    margin-left: calc(5 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-body .invoice-billing-row .rightbar-status .buttons-group .pdf {
  background: #ffffff;
  padding: 5px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  text-decoration: none;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-body .invoice-billing-row .rightbar-status .buttons-group .pdf {
    width: calc(40 * var(--scaleWidth));
    height: calc(40 * var(--scaleWidth));
    padding: calc(5 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-body .invoice-billing-row .rightbar-status .buttons-group .pdf .constl-icon {
  color: red;
}
.invoice-details-card .invoice-details-card-body .invoice-billing-row > ul {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 0 5px;
  margin: 0;
  list-style: none;
  gap: 5px 50px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-body .invoice-billing-row > ul {
    padding: 0 calc(5 * var(--scaleWidth));
    gap: calc(5 * var(--scaleWidth)) calc(50 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-body .invoice-billing-row > ul > li .form-group-view {
  gap: 0;
  text-align: left;
}
.invoice-details-card .invoice-details-card-body .invoice-billing-row > ul > li .form-group-view .label {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  margin-bottom: 0;
  font-size: var(--invoice-details-card-body-billingDetails-label-fontSize, 14px);
  line-height: var(--invoice-details-card-body-billingDetails-label-fontLineHeight, 20px);
  color: var(--invoice-details-card-body-billingDetails-label-color, #414141);
  font-weight: var(--invoice-details-card-body-billingDetails-label-fontWeight, 600);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-body .invoice-billing-row > ul > li .form-group-view .label {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-body .invoice-billing-row > ul > li .form-group-view .value {
  font-size: var(--invoice-details-card-body-billingDetails-value-fontSize, 13px);
  line-height: var(--invoice-details-card-body-billingDetails-value-fontLineHeight, 20px);
  color: var(--invoice-details-card-body-billingDetails-value-color, #414141);
  max-width: 30ch;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-body .invoice-billing-row > ul > li .form-group-view .value {
    font-size: calc(13 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-body .invoice-billing-row > ul > li .rightbar {
  display: flex;
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-body .invoice-billing-row > ul > li .rightbar {
    gap: calc(10 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-body .invoice-summary-row {
  padding-top: 15px;
  display: none;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-body .invoice-summary-row {
    padding-top: calc(15 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-body .invoice-summary-card {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  background: var(--invoice-details-card-body-billingDetails-summaryCard-background, #FFFFFF);
  border: var(--invoice-details-card-body-billingDetails-summaryCard-border, 1px solid #D9D9D9);
  padding: var(--invoice-details-card-body-billingDetails-summaryCard-padding, 10px 20px);
  border-radius: var(--invoice-details-card-body-billingDetails-summaryCard-borderRadius, 12px);
  height: 100%;
  text-align: left;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-body .invoice-summary-card {
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(20 * var(--scaleWidth));
    padding-right: calc(20 * var(--scaleWidth));
    border-radius: calc(12 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-body .invoice-summary-card .heading {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--invoice-details-card-body-billingDetails-summaryCard-heading-fontSize, 14px);
  line-height: var(--invoice-details-card-body-billingDetails-summaryCard-heading-fontLineHeight, 100%);
  color: var(--invoice-details-card-body-billingDetails-summaryCard-heading-color, #414141);
  text-transform: capitalize;
  font-weight: var(--invoice-details-card-body-billingDetails-summaryCard-heading-fontWeight, 600);
  margin-bottom: var(--invoice-details-card-body-billingDetails-summaryCard-heading-margin-bottom, 10px);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--invoice-details-card-body-billingDetails-summaryCard-heading-color, #414141);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-body .invoice-summary-card .heading {
    font-size: calc(13 * var(--scaleWidth));
    margin-bottom: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-body .invoice-summary-card .price-summary ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.invoice-details-card .invoice-details-card-body .invoice-summary-card .price-summary ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.invoice-details-card .invoice-details-card-body .invoice-summary-card .price-summary ul li .title {
  font-size: var(--invoice-details-card-priceSummary-title-fontSize, 13px);
  line-height: var(--invoice-details-card-priceSummary-title-fontSizeLineHeight, 19px);
  color: var(--invoice-details-card-priceSummary-title-color, #667085);
  font-weight: var(--invoice-details-card-priceSummary-title-fontWeight, 400);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-body .invoice-summary-card .price-summary ul li .title {
    font-size: calc(13 * var(--scaleWidth));
    line-height: calc(19 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-body .invoice-summary-card .price-summary ul li .value {
  font-size: var(--invoice-details-card-priceSummary-value-fontSize, 13px);
  line-height: var(--invoice-details-card-priceSummary-value-fontSizeLineHeight, 19px);
  color: var(--invoice-details-card-priceSummary-value-color, #667085);
  font-weight: var(--invoice-details-card-priceSummary-value-fontWeight, 600);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-body .invoice-summary-card .price-summary ul li .value {
    font-size: calc(13 * var(--scaleWidth));
    line-height: calc(19 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-body .invoice-summary-card .price-summary ul li.total .value {
  font-weight: 700;
}
.invoice-details-card .invoice-details-card-body .invoice-summary-card .price-summary ul li.total .title {
  font-weight: 700;
}
.invoice-details-card .invoice-details-card-body .invoice-summary-card .form-group-view {
  text-align: left;
  gap: 0;
}
.invoice-details-card .invoice-details-card-body .invoice-summary-card .form-group-view .label {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  margin-bottom: 0;
  font-size: var(--invoice-details-card-body-billingDetails-summaryCard-label-fontSize, 13px);
  line-height: var(--invoice-details-card-body-billingDetails-summaryCard-label-fontLineHeight, 20px);
  color: var(--invoice-details-card-body-billingDetails-summaryCard-label-color, #667085);
  font-weight: var(--invoice-details-card-body-billingDetails-summaryCard-label-fontWeight, 400);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-body .invoice-summary-card .form-group-view .label {
    font-size: calc(13 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-body .invoice-summary-card .form-group-view .value {
  font-size: var(--invoice-details-card-body-billingDetails-summaryCard-value-fontSize, 13px);
  line-height: var(--invoice-details-card-body-billingDetails-summaryCard-value-fontLineHeight, 20px);
  color: var(--invoice-details-card-body-billingDetails-summaryCard-value-color, #667085);
  font-weight: var(--invoice-details-card-body-billingDetails-summaryCard-value-fontWeight, 300);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-body .invoice-summary-card .form-group-view .value {
    font-size: calc(13 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-body .invoice-summary-card .row .col-12 {
  margin-bottom: 8px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card .invoice-details-card-body .invoice-summary-card .row .col-12 {
    margin-bottom: calc(8 * var(--scaleWidth));
  }
}
.invoice-details-card .invoice-details-card-body .invoice-summary-card .row .col-12:last-child {
  margin-bottom: 0 !important;
}
.invoice-details-card.open .invoice-details-card-body {
  background: var(--invoice-details-card-body-open-background, #ffffff);
}
.invoice-details-card.open .invoice-details-card-body .invoice-summary-row {
  display: flex;
  gap: 10px 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice-details-card.open .invoice-details-card-body .invoice-summary-row {
    gap: calc(10 * var(--scaleWidth)) 0;
  }
}

.theme-dark .invoice-details-card.open .invoice-details-card-body {
  background: color-mix(in srgb, var(--invoice-details-card-body-open-background, #ffffff) 90%, transparent);
}

.credit-note-card {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--credit-note-card-background-color, #ffffff);
  border-radius: var(--credit-note-card-borderRadius, 11px);
  border: var(--credit-note-card-border, 1px solid #D9D9D9);
  overflow: hidden;
  position: relative;
  box-shadow: var(--credit-note-card-boxShadow, 0px 4px 15px 0px rgba(0, 0, 0, 0.1411764706));
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .credit-note-card {
    border-radius: calc(11 * var(--scaleWidth));
  }
}
.credit-note-card .download-pdf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  background: var(--credit-note-card-pdfButton-background, #D8E5FF);
  border: var(--credit-note-card-pdfButton-border, 1px solid rgba(35, 122, 255, 0.2705882353));
  padding: var(--credit-note-card-pdfButton-padding, 10px);
  text-decoration: none;
  gap: 10px;
  font-size: var(--credit-note-card-pdfButton-fontSize, 14px);
  color: var(--credit-note-card-pdfButton-color, #475467);
  font-weight: var(--credit-note-card-pdfButton-fontWeight, 400);
  width: 42px;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  right: 0;
  top: 0;
  border-bottom-left-radius: var(--credit-note-card-pdfButton-borderRadius, 12px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .credit-note-card .download-pdf-btn {
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
    font-size: calc(14 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
    width: calc(42 * var(--scaleWidth));
    border-bottom-left-radius: calc(12 * var(--scaleWidth));
  }
}
.credit-note-card .download-pdf-btn:hover {
  width: 116px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .credit-note-card .download-pdf-btn:hover {
    width: calc(116 * var(--scaleWidth));
  }
}
.credit-note-card .download-pdf-btn .constl-icon {
  font-size: var(--credit-note-card-pdfButton-icon-fontSize, 24px);
  color: var(--credit-note-card-pdfButton-icon-color, #FF0000);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .credit-note-card .download-pdf-btn .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .credit-note-card .download-pdf-btn {
    width: auto;
  }
}
.credit-note-card .credit-note-card-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.credit-note-card .credit-note-card-row .leftbar {
  flex: 0 0 calc(100% - 280px);
  max-width: calc(100% - 280px);
  padding: 10px 20px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .credit-note-card .credit-note-card-row .leftbar {
    flex: 0 0 calc(100% - 280 * var(--scaleWidth));
    max-width: calc(100% - 280 * var(--scaleWidth));
    padding: calc(10 * var(--scaleWidth)) calc(20 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .credit-note-card .credit-note-card-row .leftbar {
    flex: 0 0 100%;
    max-width: 100%;
    padding-bottom: 20px;
  }
}
.credit-note-card .credit-note-card-row .leftbar .credit-note-details-row {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  padding-bottom: var(--credit-note-card-details-row-padding-bottom, 10px);
  border-bottom: var(--credit-note-card-details-row-border-bottom, 1px solid #D9D9D9);
  margin-bottom: var(--credit-note-card-details-row-margin-bottom, 10px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .credit-note-card .credit-note-card-row .leftbar .credit-note-details-row {
    padding-bottom: calc(10 * var(--scaleWidth));
    margin-bottom: calc(10 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .credit-note-card .credit-note-card-row .leftbar .credit-note-details-row {
    padding-right: 0;
    padding-top: 50px;
  }
}
.credit-note-card .credit-note-card-row .leftbar .credit-note-details-row > ul {
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
  align-items: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .credit-note-card .credit-note-card-row .leftbar .credit-note-details-row > ul {
    margin: 0 calc(-15 * var(--scaleWidth));
  }
}
.credit-note-card .credit-note-card-row .leftbar .credit-note-details-row > ul li {
  padding: 0 15px;
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .credit-note-card .credit-note-card-row .leftbar .credit-note-details-row > ul li {
    padding: 0 calc(15 * var(--scaleWidth));
  }
}
.credit-note-card .credit-note-card-row .leftbar .credit-note-details-row > ul li::after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  display: inline-block;
  vertical-align: top;
  width: 1px;
  height: 19px;
  background: #707070;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .credit-note-card .credit-note-card-row .leftbar .credit-note-details-row > ul li::after {
    height: calc(19 * var(--scaleWidth));
  }
}
.credit-note-card .credit-note-card-row .leftbar .credit-note-details-row > ul li:last-child::after {
  display: none;
}
.credit-note-card .credit-note-card-row .leftbar .credit-note-details-row .number {
  font-size: var(--credit-note-card-details-row-id-label-fontSize, 14px);
  line-height: var(--credit-note-card-details-row-id-label-fontLineHeight, 24px);
  color: var(--credit-note-card-details-row-id-label-color, #372194);
  font-weight: var(--credit-note-card-details-row-id-label-fontWeight, 600);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .credit-note-card .credit-note-card-row .leftbar .credit-note-details-row .number {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(24 * var(--scaleWidth));
  }
}
.credit-note-card .credit-note-card-row .leftbar .credit-note-details-row .form-group-inline {
  display: inline-flex;
  align-items: center;
  gap: 0 5px;
  flex-wrap: wrap;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .credit-note-card .credit-note-card-row .leftbar .credit-note-details-row .form-group-inline {
    gap: 0 calc(5 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .credit-note-card .credit-note-card-row .leftbar .credit-note-details-row .form-group-inline {
    align-items: flex-start;
  }
}
.credit-note-card .credit-note-card-row .leftbar .credit-note-details-row .form-group-inline .title {
  font-size: var(--credit-note-card-details-label-fontSize, 14px);
  line-height: var(--credit-note-card-details-label-fontLineHeight, 20px);
  color: var(--credit-note-card-details-label-color, #475467);
  font-weight: var(--credit-note-card-details-label-fontWeight, 500);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .credit-note-card .credit-note-card-row .leftbar .credit-note-details-row .form-group-inline .title {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
  }
}
.credit-note-card .credit-note-card-row .leftbar .credit-note-details-row .form-group-inline .value {
  font-size: var(--credit-note-card-details-value-fontSize, 14px);
  line-height: var(--credit-note-card-details-value-fontLineHeight, 20px);
  color: var(--credit-note-card-details-value-color, #475467);
  font-weight: var(--credit-note-card-details-value-fontWeight, 400);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .credit-note-card .credit-note-card-row .leftbar .credit-note-details-row .form-group-inline .value {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
  }
}
.credit-note-card .credit-note-card-row .leftbar .credit-note-remark-row {
  font-size: var(--credit-note-card-details-remark-fontSize, 14px);
  line-height: var(--credit-note-card-details-remark-fontLineHeight, 19px);
  color: var(--credit-note-card-details-remark-color, #475467);
  font-weight: var(--credit-note-card-details-remark-fontWeight, 400);
  text-align: left;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .credit-note-card .credit-note-card-row .leftbar .credit-note-remark-row {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(19 * var(--scaleWidth));
  }
}
.credit-note-card .credit-note-card-row .leftbar .credit-note-remark-row strong {
  font-weight: 600;
}
.credit-note-card .credit-note-card-row .rightbar {
  flex: 0 0 280px;
  max-width: 280px;
  background: var(--credit-note-card-rightbar-background, #F8FAFE);
  border-left: var(--credit-note-card-rightbar-border-left, 1px solid #D9D9D9);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .credit-note-card .credit-note-card-row .rightbar {
    flex: 0 0 calc(280 * var(--scaleWidth));
    max-width: calc(280 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .credit-note-card .credit-note-card-row .rightbar {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 15px;
  }
}
.credit-note-card .credit-note-card-row .rightbar .creditamount-details {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.credit-note-card .credit-note-card-row .rightbar .creditamount-details .label {
  display: inline-flex;
  align-items: center;
  font-size: var(--credit-note-card-rightbar-label-fontSize, 14px);
  line-height: var(--credit-note-card-rightbar-label-fontLineHeight, 19px);
  color: var(--credit-note-card-rightbar-label-color, #475467);
  font-weight: var(--credit-note-card-rightbar-label-fontWeight, 500);
  gap: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .credit-note-card .credit-note-card-row .rightbar .creditamount-details .label {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(19 * var(--scaleWidth));
    gap: calc(5 * var(--scaleWidth));
  }
}
.credit-note-card .credit-note-card-row .rightbar .creditamount-details .label .constl-icon {
  font-size: var(--credit-note-card-rightbar-label-icon-fontSize, 24px);
  color: var(--credit-note-card-rightbar-label-icon-color, #372194);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .credit-note-card .credit-note-card-row .rightbar .creditamount-details .label .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.credit-note-card .credit-note-card-row .rightbar .creditamount-details .value {
  display: inline-flex;
  align-items: center;
  font-size: var(--credit-note-card-rightbar-value-fontSize, 14px);
  line-height: var(--credit-note-card-rightbar-value-fontLineHeight, 19px);
  color: var(--credit-note-card-rightbar-value-color, #475467);
  font-weight: var(--credit-note-card-rightbar-value-fontWeight, 700);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .credit-note-card .credit-note-card-row .rightbar .creditamount-details .value {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(19 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .credit-note-card .credit-note-card-row .rightbar .creditamount-details {
    align-items: flex-end;
  }
}

.payment-note-card {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--payment-note-card-background-color, #ffffff);
  border-radius: var(--payment-note-card-borderRadius, 11px);
  border: var(--payment-note-card-border, 1px solid #D9D9D9);
  overflow: hidden;
  position: relative;
  box-shadow: var(--payment-note-card-boxShadow, 0px 4px 15px 0px rgba(0, 0, 0, 0.1411764706));
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .payment-note-card {
    border-radius: calc(11 * var(--scaleWidth));
  }
}
.payment-note-card .payment-note-card-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.payment-note-card .payment-note-card-row .leftbar {
  flex: 0 0 calc(100% - 280px);
  max-width: calc(100% - 280px);
  padding: 10px 20px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .payment-note-card .payment-note-card-row .leftbar {
    flex: 0 0 calc(100% - 280 * var(--scaleWidth));
    max-width: calc(100% - 280 * var(--scaleWidth));
    padding: calc(10 * var(--scaleWidth)) calc(20 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .payment-note-card .payment-note-card-row .leftbar {
    flex: 0 0 100%;
    max-width: 100%;
    padding-bottom: 20px;
  }
}
.payment-note-card .payment-note-card-row .leftbar .payment-note-details-row {
  display: flex;
  align-items: center;
  width: 100%;
  padding-bottom: var(--payment-note-card-details-row-padding-bottom, 10px);
  border-bottom: var(--payment-note-card-details-row-border-bottom, 1px solid #D9D9D9);
  margin-bottom: var(--payment-note-card-details-row-margin-bottom, 10px);
  min-height: var(--payment-note-card-details-row-minHeight, 60px);
  flex-wrap: wrap;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .payment-note-card .payment-note-card-row .leftbar .payment-note-details-row {
    padding-bottom: calc(10 * var(--scaleWidth));
    margin-bottom: calc(10 * var(--scaleWidth));
    min-height: calc(60 * var(--scaleWidth));
  }
}
.payment-note-card .payment-note-card-row .leftbar .payment-note-details-row > ul {
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
  align-items: center;
  width: 100%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .payment-note-card .payment-note-card-row .leftbar .payment-note-details-row > ul {
    margin: 0 calc(-15 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .payment-note-card .payment-note-card-row .leftbar .payment-note-details-row > ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}
.payment-note-card .payment-note-card-row .leftbar .payment-note-details-row > ul li {
  padding: 0 15px;
  position: relative;
  flex: 1;
  text-align: left;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .payment-note-card .payment-note-card-row .leftbar .payment-note-details-row > ul li {
    padding: 0 calc(15 * var(--scaleWidth));
  }
}
.payment-note-card .payment-note-card-row .leftbar .payment-note-details-row > ul li::after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  display: inline-block;
  vertical-align: top;
  width: 1px;
  height: 19px;
  background: var(--payment-note-card-details-row-column-divider-background-color, #707070);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .payment-note-card .payment-note-card-row .leftbar .payment-note-details-row > ul li::after {
    height: calc(19 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .payment-note-card .payment-note-card-row .leftbar .payment-note-details-row > ul li::after {
    display: none;
  }
}
.payment-note-card .payment-note-card-row .leftbar .payment-note-details-row > ul li:last-child::after {
  display: none;
}
.payment-note-card .payment-note-card-row .leftbar .payment-note-details-row .number {
  font-size: 14px;
  line-height: 20px;
  color: #372194;
  font-weight: 600;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .payment-note-card .payment-note-card-row .leftbar .payment-note-details-row .number {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
  }
}
.payment-note-card .payment-note-card-row .leftbar .payment-note-details-row .form-group-inline {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .payment-note-card .payment-note-card-row .leftbar .payment-note-details-row .form-group-inline {
    gap: 0 calc(5 * var(--scaleWidth));
  }
}
.payment-note-card .payment-note-card-row .leftbar .payment-note-details-row .form-group-inline .title {
  font-size: var(--payment-note-card-details-label-fontSize, 14px);
  line-height: var(--payment-note-card-details-label-fontLineHeight, 20px);
  color: var(--payment-note-card-details-label-color, #475467);
  font-weight: var(--payment-note-card-details-label-fontWeight, 600);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .payment-note-card .payment-note-card-row .leftbar .payment-note-details-row .form-group-inline .title {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
  }
}
.payment-note-card .payment-note-card-row .leftbar .payment-note-details-row .form-group-inline .value {
  font-size: var(--payment-note-card-details-value-fontSize, 14px);
  line-height: var(--payment-note-card-details-value-fontLineHeight, 20px);
  color: var(--payment-note-card-details-value-color, #475467);
  font-weight: var(--payment-note-card-details-value-fontWeight, 400);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .payment-note-card .payment-note-card-row .leftbar .payment-note-details-row .form-group-inline .value {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .payment-note-card .payment-note-card-row .leftbar .payment-note-details-row .form-group-inline {
    align-items: flex-start;
  }
}
.payment-note-card .payment-note-card-row .leftbar .payment-note-remark-row {
  font-size: var(--payment-note-card-details-remark-fontSize, 14px);
  line-height: var(--payment-note-card-details-remark-fontLineHeight, 19px);
  color: var(--payment-note-card-details-remark-color, #475467);
  font-weight: var(--payment-note-card-details-remark-fontWeight, 400);
  text-align: left;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .payment-note-card .payment-note-card-row .leftbar .payment-note-remark-row {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(19 * var(--scaleWidth));
  }
}
.payment-note-card .payment-note-card-row .leftbar .payment-note-remark-row strong {
  font-weight: 600;
}
.payment-note-card .payment-note-card-row .rightbar {
  flex: 0 0 280px;
  max-width: 280px;
  background: var(--payment-note-card-rightbar-background, #F8FAFE);
  border-left: var(--payment-note-card-rightbar-border-left, 1px solid #D9D9D9);
  display: flex;
  flex-direction: column;
  padding: var(--payment-note-card-rightbar-padding, 10px 15px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .payment-note-card .payment-note-card-row .rightbar {
    flex: 0 0 calc(280 * var(--scaleWidth));
    max-width: calc(280 * var(--scaleWidth));
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .payment-note-card .payment-note-card-row .rightbar {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
.payment-note-card .payment-note-card-row .rightbar .payment-date {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  gap: 5px;
  padding-bottom: var(--payment-note-card-rightbar-paymentDate-padding-bottom, 10px);
  border-bottom: var(--payment-note-card-rightbar-paymentDate-border-bottom, 1px solid #D9D9D9);
  margin-bottom: var(--payment-note-card-rightbar-paymentDate-margin-bottom, 10px);
  min-height: var(--payment-note-card-details-row-minHeight, 60px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .payment-note-card .payment-note-card-row .rightbar .payment-date {
    gap: calc(5 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    margin-bottom: calc(10 * var(--scaleWidth));
    min-height: calc(60 * var(--scaleWidth));
  }
}
.payment-note-card .payment-note-card-row .rightbar .payment-date .label {
  display: inline-flex;
  align-items: center;
  font-size: var(--payment-note-card-rightbar-paymentDate-label-fontSize, 14px);
  line-height: var(--payment-note-card-rightbar-paymentDate-label-fontLineHeight, 19px);
  color: var(--payment-note-card-rightbar-paymentDate-label-color, #475467);
  font-weight: var(--payment-note-card-rightbar-paymentDate-label-fontWeight, 700);
  gap: 5px;
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .payment-note-card .payment-note-card-row .rightbar .payment-date .label {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(19 * var(--scaleWidth));
    gap: calc(5 * var(--scaleWidth));
  }
}
.payment-note-card .payment-note-card-row .rightbar .payment-date .label .constl-icon {
  font-size: var(--payment-note-card-rightbar-paymentDate-label-icon-fontSize, 24px);
  color: var(--payment-note-card-rightbar-paymentDate-label-icon-color, #372194);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .payment-note-card .payment-note-card-row .rightbar .payment-date .label .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.payment-note-card .payment-note-card-row .rightbar .payment-date .value {
  display: inline-flex;
  align-items: center;
  font-size: var(--payment-note-card-rightbar-paymentDate-value-fontSize, 14px);
  line-height: var(--payment-note-card-rightbar-paymentDate-value-fontLineHeight, 19px);
  color: var(--payment-note-card-rightbar-paymentDate-value-color, #475467);
  font-weight: var(--payment-note-card-rightbar-paymentDate-value-fontWeight, 600);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .payment-note-card .payment-note-card-row .rightbar .payment-date .value {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(19 * var(--scaleWidth));
  }
}
.payment-note-card .payment-note-card-row .rightbar .paymentamount-details {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .payment-note-card .payment-note-card-row .rightbar .paymentamount-details {
    gap: calc(5 * var(--scaleWidth));
  }
}
.payment-note-card .payment-note-card-row .rightbar .paymentamount-details .label {
  display: inline-flex;
  align-items: center;
  font-size: var(--payment-note-card-rightbar-paymentAmount-label-fontSize, 16px);
  line-height: var(--payment-note-card-rightbar-paymentAmount-label-fontLineHeight, 19px);
  color: var(--payment-note-card-rightbar-paymentAmount-label-color, #475467);
  font-weight: var(--payment-note-card-rightbar-paymentAmount-label-fontWeight, 500);
  gap: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .payment-note-card .payment-note-card-row .rightbar .paymentamount-details .label {
    font-size: calc(16 * var(--scaleWidth));
    line-height: calc(19 * var(--scaleWidth));
    gap: calc(5 * var(--scaleWidth));
  }
}
.payment-note-card .payment-note-card-row .rightbar .paymentamount-details .label .constl-icon {
  font-size: var(--payment-note-card-rightbar-paymentAmount-label-icon-fontSize, 24px);
  color: var(--payment-note-card-rightbar-paymentAmount-label-icon-color, #372194);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .payment-note-card .payment-note-card-row .rightbar .paymentamount-details .label .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.payment-note-card .payment-note-card-row .rightbar .paymentamount-details .value {
  display: inline-flex;
  align-items: center;
  font-size: var(--payment-note-card-rightbar-paymentAmount-value-fontSize, 16px);
  line-height: var(--payment-note-card-rightbar-paymentAmount-value-fontLineHeight, 19px);
  color: var(--payment-note-card-rightbar-paymentAmount-value-color, #475467);
  font-weight: var(--payment-note-card-rightbar-paymentAmount-value-fontWeight, 600);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .payment-note-card .payment-note-card-row .rightbar .paymentamount-details .value {
    font-size: calc(16 * var(--scaleWidth));
    line-height: calc(19 * var(--scaleWidth));
  }
}

.invoices-due-list .widget-title {
  line-height: 100%;
  margin-bottom: 30px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoices-due-list .widget-title {
    margin-bottom: calc(30 * var(--scaleWidth));
  }
}
@media (max-width: 1024px) {
  .invoices-due-list .widget-title {
    line-height: 100%;
    gap: 10px;
  }
  .invoices-due-list .widget-title img {
    max-height: 30px;
  }
}
@media (max-width: 768px) {
  .invoices-due-list .widget-title {
    line-height: 100%;
  }
}
.invoices-due-list .progress-bar-wrap {
  gap: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoices-due-list .progress-bar-wrap {
    gap: calc(15 * var(--scaleWidth));
  }
}
.invoices-due-list .progress-bar-wrap .progress-bar {
  height: 25px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoices-due-list .progress-bar-wrap .progress-bar {
    height: calc(25 * var(--scaleWidth));
  }
}

.invoice_table {
  padding: 0 !important;
}
@media (max-width: 768px) {
  .invoice_table .right-controls {
    flex-direction: row;
    align-items: center;
  }
  .invoice_table .action-controls {
    margin-left: auto;
  }
}
.invoice_table .dataTable {
  border-spacing: 0 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice_table .dataTable {
    border-spacing: 0 calc(10 * var(--scaleWidth));
  }
}
@media (max-width: 1199px) {
  .invoice_table .dataTable {
    width: 100% !important;
  }
}
@media (max-width: 768px) {
  .invoice_table .dataTable .invoice-details-body > .row {
    flex-wrap: wrap;
    gap: 10px 0;
  }
  .invoice_table .dataTable .invoice-details-body > .row .col-md-3 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .invoice_table .dataTable .invoice-details-body > .row .form-group-view {
    gap: 4px;
  }
  .invoice_table .dataTable .invoice-details-body > .row .text-right {
    text-align: left !important;
  }
}
@media (max-width: 479px) {
  .invoice_table .dataTable .invoice-details-body > .row {
    flex-direction: column;
    gap: 10px;
  }
}
.invoice_table .dataTable tbody tr td:last-child, .invoice_table .dataTable tbody tr td:first-child {
  padding-left: 0 !important;
}
.invoice_table .table-main-body {
  height: calc(100% - 185px);
  max-height: 540px;
  min-height: 540px;
  overflow: auto;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .invoice_table .table-main-body {
    height: calc(100% - 185 * var(--scaleWidth));
    max-height: calc(540 * var(--scaleWidth));
    min-height: calc(540 * var(--scaleWidth));
  }
}
@media (min-width: 1401px) {
  .invoice_table .table-main-body {
    max-height: 640px;
    min-height: 640px;
  }
}
@media (max-width: 1024px) {
  .invoice_table .table-main-body {
    max-height: inherit;
    height: auto;
  }
}
.invoice_table tbody tr {
  box-shadow: none;
}
.invoice_table tbody tr td {
  padding: 0 !important;
}

@media (min-width: 1200px) {
  .invoice_row .col-lg-4 {
    max-width: 29%;
    flex: 0 0 29%;
  }
  .invoice_row .col-lg-4 .row {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .invoice_row .col-lg-4 .row .col-lg-12 {
    flex: 1;
  }
}
@media (min-width: 1200px) {
  .invoice_row .col-lg-8 {
    max-width: 71%;
    flex: 0 0 71%;
  }
}
.invoice_row .widget-service-list {
  overflow: hidden;
}
.invoice_row .widget-service-list.active-service {
  justify-content: flex-start !important;
}
.invoice_row .widget-service-list.active-service .widget-body {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: flex-start;
  height: 100%;
}
.invoice_row .widget-service-list.active-service .widget-body .progress-bar-wrap {
  width: 100%;
}
.invoice_row .widget-service-list .widget-body {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: flex-start;
  height: 100%;
}
.invoice_row .widget-service-list .widget-body .progress-bar-wrap {
  width: 100%;
}

.pie-chart-invoice-card .widget-body {
  width: auto !important;
  display: block !important;
  margin: 0 -15px;
}
.pie-chart-invoice-card #invoiceStatus {
  padding: 0;
  display: inline-block;
  width: 100%;
  vertical-align: top;
}

.invoices-due-list .chart-container {
  width: 100% !important;
  height: 100%;
}
@media (max-width: 768px) {
  .invoices-due-list .chart-container {
    min-height: 250px;
  }
}

@media (min-width: 1199px) and (max-width: 1400px) {
  .form-inline .form-group > label {
    width: calc(180 * var(--scaleWidth));
  }
}

.createannouncement_form_wrap {
  max-width: 1265px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .createannouncement_form_wrap {
    max-width: calc(1265 * var(--scaleWidth));
  }
}
.createannouncement_form_wrap .custom-radio-inline-wrap {
  width: calc(100% - 180px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .createannouncement_form_wrap .custom-radio-inline-wrap {
    width: calc(100% - 11.25vw);
  }
}
@media (max-width: 768px) {
  .createannouncement_form_wrap .custom-radio-inline-wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .createannouncement_form_wrap .custom-radio-inline-wrap .d-inline-flex {
    display: flex;
    flex-wrap: wrap;
  }
}
.createannouncement_form_wrap .custom-radio-inline-wrap .form-group > * {
  width: 100%;
}
.createannouncement_form_wrap .custom-radio-inline-wrap .form-group label {
  margin-bottom: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .createannouncement_form_wrap .custom-radio-inline-wrap .form-group label {
    margin-bottom: calc(10 * var(--scaleWidth));
  }
}
.createannouncement_form_wrap .custom-radio-inline-wrap .form-group select {
  background-color: var(--color-white);
}
.createannouncement_form_wrap .react-datepicker-wrapper {
  width: calc(100% - 180px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .createannouncement_form_wrap .react-datepicker-wrapper {
    width: calc(100% - 11.25vw);
  }
}
@media (max-width: 479px) {
  .createannouncement_form_wrap .react-datepicker-wrapper {
    width: 100%;
  }
}
.createannouncement_form_wrap .react-datepicker-wrapper .react-datepicker__input-container {
  width: 100%;
}

span.react-datepicker__aria-live {
  display: none;
}

.custom-radio-inline-wrap {
  background-color: var(--custom-radio-inline-wrap-background-color, #F6F6F6);
  width: 100%;
  padding: var(--custom-radio-inline-wrap-padding, 15px);
  border-radius: var(--custom-radio-inline-wrap-borderRadius, 8px);
  border: var(--custom-radio-inline-wrap-border, 1px solid #CCCCCC);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .custom-radio-inline-wrap {
    border-radius: calc(8 * var(--scaleWidth));
    padding: calc(15 * var(--scaleWidth));
  }
}
.custom-radio-inline-wrap .d-inline-flex {
  gap: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .custom-radio-inline-wrap .d-inline-flex {
    gap: calc(15 * var(--scaleWidth));
  }
}
.custom-radio-inline-wrap .d-inline-flex + div {
  margin-top: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .custom-radio-inline-wrap .d-inline-flex + div {
    margin-top: calc(15 * var(--scaleWidth));
  }
}
.custom-radio-inline-wrap #employee_group,
.custom-radio-inline-wrap #customer_group {
  margin-top: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .custom-radio-inline-wrap #employee_group,
  .custom-radio-inline-wrap #customer_group {
    margin-top: calc(15 * var(--scaleWidth));
  }
}
.custom-radio-inline-wrap #employee_group.mt-0,
.custom-radio-inline-wrap #customer_group.mt-0 {
  margin-top: 0 !important;
}
.custom-radio-inline-wrap .custom-radio label {
  width: auto;
  padding: var(--custom-radio-inline-wrap-custom-radio-padding, 12px 12px 12px 45px);
  background-color: var(--custom-radio-inline-wrap-custom-radio-background-color, #ffffff);
  border: var(--custom-radio-inline-wrap-custom-radio-border, 1px solid #CCCCCC);
  border-radius: var(--custom-radio-inline-wrap-custom-radio-borderRadius, 8px);
  box-shadow: 0px 0px 4px 0px rgba(104, 104, 104, 0.2509803922);
  margin: 0 !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .custom-radio-inline-wrap .custom-radio label {
    border-radius: calc(8 * var(--scaleWidth));
    padding: calc(12 * var(--scaleWidth)) calc(45 * var(--scaleWidth));
  }
}
.custom-radio-inline-wrap .custom-radio label::after, .custom-radio-inline-wrap .custom-radio label::before {
  left: 12px !important;
  top: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .custom-radio-inline-wrap .custom-radio label::after, .custom-radio-inline-wrap .custom-radio label::before {
    left: calc(12 * var(--scaleWidth)) !important;
  }
}
.custom-radio-inline-wrap .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  left: 18px !important;
  top: 0;
  bottom: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .custom-radio-inline-wrap .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    left: calc(18 * var(--scaleWidth)) !important;
  }
}

.multiselect.dropdown-toggle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
}

.multiselect-container li.other-options {
  margin-left: 27px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .multiselect-container li.other-options {
    margin-left: calc(27 * var(--scaleWidth)) !important;
  }
}

.custom-radio-group-inline {
  display: inline-flex;
  gap: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .custom-radio-group-inline {
    gap: calc(15 * var(--scaleWidth));
  }
}
.custom-radio-group-inline .form-group > label {
  width: auto;
}

.gray-card {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  background: var(--gray-card-background, #E9E9E9);
  border-radius: var(--gray-card-border-radius, 8px);
  padding: var(--gray-card-padding, 15px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .gray-card {
    padding-top: calc(15 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.gray-card .heading {
  font-weight: var(--gray-card-heading-font-weight, 700);
  font-size: var(--gray-card-heading-font-size, 14px);
  line-height: var(--gray-card-heading-line-height, 20px);
  letter-spacing: 0%;
  color: var(--gray-card-heading-color, #475467);
  display: inline-block;
  width: 100%;
  vertical-align: top;
  margin-bottom: var(--gray-card-heading-margin-bottom, 25px);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gray-card-heading-color, #475467);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .gray-card .heading {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(14 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}

#download-block .form-control-wrap {
  display: inline-flex;
  width: calc(100% - 180px);
  gap: 8px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #download-block .form-control-wrap {
    width: calc(100% - 180 * var(--scaleWidth));
    gap: calc(8 * var(--scaleWidth));
  }
}
#download-block .form-control-wrap .custom-select {
  max-width: 321px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #download-block .form-control-wrap .custom-select {
    max-width: calc(321 * var(--scaleWidth));
  }
}
#download-block .form-control-wrap .button-icon-text {
  height: 44px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #download-block .form-control-wrap .button-icon-text {
    height: calc(44 * var(--scaleWidth));
  }
}

.period-wrap {
  display: inline-flex;
  gap: 6px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .period-wrap {
    gap: calc(6 * var(--scaleWidth));
  }
}
.period-wrap .custom-select {
  width: 200px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .period-wrap .custom-select {
    width: calc(200 * var(--scaleWidth)) !important;
  }
}

.permissions-card {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  border: var(--permissions-card-border, 1px solid #D0D5DD);
  box-shadow: var(--permissions-card-boxShadow, 0px 1px 2px 0px rgba(16, 24, 40, 0.0509803922));
  border-radius: var(--permissions-card-borderRadius, 8px);
  min-height: var(--permissions-card-height, 400px);
  height: 100%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-card {
    border-radius: calc(8 * var(--scaleWidth));
    min-height: calc(400 * var(--scaleWidth));
  }
}
.permissions-card .no-data-available {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  padding: var(--permissions-card-noAvailableRecord-padding, 10px);
  font-size: var(--permissions-card-noAvailableRecord-fontSize, 16px);
  line-height: var(--permissions-card-noAvailableRecord-lineHeight, 150%);
  font-weight: var(--permissions-card-noAvailableRecord-fontWeight, 500);
  color: var(--permissions-card-noAvailableRecord-color, #707070);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-card .no-data-available {
    padding: calc(10 * var(--scaleWidth));
    font-size: calc(16 * var(--scaleWidth));
  }
}
.permissions-card .permissions-card-header {
  display: flex;
  align-items: center;
  padding: var(--permissions-card-header-padding, 10px);
  border-bottom: var(--permissions-card-header-border-bottom, 1px solid #D0D5DD);
  font-size: var(--permissions-card-header-font-size, 18px);
  color: var(--permissions-card-header-color, #101828);
  font-weight: var(--permissions-card-header-font-weight, 600);
  line-height: var(--permissions-card-header-line-height, 100%);
  gap: 8px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-card .permissions-card-header {
    padding: calc(10 * var(--scaleWidth));
    font-size: calc(18 * var(--scaleWidth));
    gap: calc(8 * var(--scaleWidth));
  }
}
.permissions-card .permissions-card-body {
  padding: var(--permissions-card-body-padding, 10px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-card .permissions-card-body {
    padding: calc(10 * var(--scaleWidth));
  }
}
.permissions-card .permissions-card-body .searchbar {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  position: relative;
  margin-bottom: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-card .permissions-card-body .searchbar {
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
.permissions-card .permissions-card-body .searchbar input[type=text] {
  border: var(--permissions-card-body-searchbar-border, 1px solid #D0D5DD);
  height: var(--permissions-card-body-searchbar-height, 44px);
  padding: var(--permissions-card-body-searchbar-padding, 10px 12px);
  box-shadow: var(--permissions-card-body-searchbar-box-shadow, 0px 1px 2px 0px rgba(16, 24, 40, 0.0509803922));
  border-radius: var(--permissions-card-body-searchbar-border-radius, 8px);
  width: var(--permissions-card-body-searchbar-width, 100%);
  color: var(--permissions-card-body-searchbar-colo, #ffffff);
  background-color: var(--permissions-card-body-searchbar-background-color, #ffffff);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-card .permissions-card-body .searchbar input[type=text] {
    height: calc(44 * var(--scaleWidth));
    padding: calc(10 * var(--scaleWidth)) calc(12 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.permissions-card .permissions-card-body .searchbar .searchBtn {
  border: 0;
  width: var(--permissions-card-body-searchbar-button-dimension, 42px);
  height: var(--permissions-card-body-searchbar-button-dimension, 42px);
  outline: none;
  background-color: transparent;
  background: transparent;
  position: absolute;
  right: 0;
  top: 1px;
  display: flex;
  align-items: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-card .permissions-card-body .searchbar .searchBtn {
    height: calc(42 * var(--scaleWidth));
    width: calc(42 * var(--scaleWidth)) calc(12 * var(--scaleWidth));
    top: calc(1 * var(--scaleWidth));
  }
}
.permissions-card .permissions-card-body .searchbar .searchBtn .constl-icon {
  color: var(--permissions-card-body-searchbar-button-icon-color, #101828);
}
.permissions-card .permissions-card-body .content-body {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  max-height: 400px;
  overflow: auto;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-card .permissions-card-body .content-body {
    max-height: calc(400 * var(--scaleWidth));
  }
}

.permissions-accordion-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.permissions-accordion-list > li {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-bottom: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-accordion-list > li {
    margin-bottom: calc(10 * var(--scaleWidth));
  }
}
.permissions-accordion-list > li:last-child {
  margin-bottom: 0;
}
.permissions-accordion-list > li .permissions-accordion-card {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  border: var(--permissions-accordion-card-border, 1px solid #CCCCCC);
  box-shadow: var(--permissions-accordion-card-box-shadow, 0px 0px 4px 0px rgba(104, 104, 104, 0.2509803922));
  background-color: var(--permissions-accordion-card-background-color, #fff);
  border-radius: var(--permissions-accordion-card-borderRadius, 8px);
  overflow: hidden;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-accordion-list > li .permissions-accordion-card {
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--permissions-accordion-header-padding, 4px 12px);
  padding-left: 35px;
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-header {
    padding-left: calc(35 * var(--scaleWidth));
  }
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-header .collapsed-arrow {
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  background-image: url("../../krypton-theme-css/assets/icons/accordion-arrow.png");
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-header .collapsed-arrow {
    left: calc(10 * var(--scaleWidth));
    width: calc(24 * var(--scaleWidth));
    height: calc(24 * var(--scaleWidth));
    background-size: calc(24 * var(--scaleWidth));
  }
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-header.collapsed .collapsed-arrow {
  transform: rotate(90deg);
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-header .heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-header .heading {
    gap: calc(15 * var(--scaleWidth));
  }
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-header .heading .titleText {
  font-size: var(--permissions-accordion-header-title-fontSize, 14px);
  line-height: var(--permissions-accordion-header-title-lineHeight, 150%);
  color: var(--permissions-accordion-header-title-color, #475467);
  text-transform: capitalize;
  font-weight: var(--permissions-accordion-header-title-fontWeight, 400);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-header .heading .titleText {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-header .heading .roleText {
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--permissions-accordion-header-border, 1px solid #D1D1D1);
  padding: var(--permissions-accordion-header-padding, 4px 12px);
  font-size: var(--permissions-accordion-header-fontSize, 12px);
  color: var(--permissions-accordion-header-color, #707070);
  font-weight: var(--permissions-accordion-header-fontWeight, 600);
  border-radius: var(--permissions-accordion-header-borderRadius, 20px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-header .heading .roleText {
    padding: calc(4 * var(--scaleWidth)) calc(12 * var(--scaleWidth));
    font-size: calc(12 * var(--scaleWidth));
    border-radius: calc(20 * var(--scaleWidth));
  }
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-header .button-icon-text {
  height: var(--permissions-accordion-header-SelectGroup-height, 28px);
  padding: var(--permissions-accordion-header-SelectGroup-Height-padding, 2px 12px);
  font-size: var(--permissions-accordion-header-SelectGroup-Height-fontSize, 12px);
  gap: var(--permissions-accordion-header-SelectGroup-Height-gap, 7px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-header .button-icon-text {
    height: calc(28 * var(--scaleWidth));
    padding: calc(2 * var(--scaleWidth)) calc(12 * var(--scaleWidth));
    font-size: calc(12 * var(--scaleWidth));
    gap: calc(7 * var(--scaleWidth));
  }
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-header .rightbar {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-header .rightbar {
    gap: calc(10 * var(--scaleWidth));
  }
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-header .rightbar .roleText {
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--permissions-accordion-header-border, 1px solid #D1D1D1);
  padding: var(--permissions-accordion-header-padding, 4px 12px);
  font-size: var(--permissions-accordion-header-fontSize, 12px);
  color: var(--permissions-accordion-header-color, #707070);
  font-weight: var(--permissions-accordion-header-fontWeight, 600);
  border-radius: var(--permissions-accordion-header-borderRadius, 20px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-header .rightbar .roleText {
    border-radius: calc(20 * var(--scaleWidth));
    padding: calc(4 * var(--scaleWidth)) calc(12 * var(--scaleWidth));
    font-size: calc(12 * var(--scaleWidth));
  }
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-header .rightbar .button-close {
  background-color: transparent;
  color: var(--permissions-accordion-header-closeButton-color, #707070);
  font-size: var(--permissions-accordion-header-closeButton-fontSize, 20px);
  line-height: var(--permissions-accordion-header-closeButton-lineHeight, 100%);
  padding: var(--permissions-accordion-header-closeButton-padding, 0);
  width: var(--permissions-accordion-header-closeButton-dimension, 20px);
  height: var(--permissions-accordion-header-closeButton-dimension, 20px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-header .rightbar .button-close {
    font-size: calc(20 * var(--scaleWidth));
    width: calc(20 * var(--scaleWidth));
    height: calc(20 * var(--scaleWidth));
  }
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  background-color: var(--permissions-accordion-body-background-color, #F8F8F8);
  padding: var(--permissions-accordion-body-padding, 10px 30px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body {
    padding: calc(10 * var(--scaleWidth)) calc(30 * var(--scaleWidth));
  }
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolesHeading {
  font-size: var(--permissions-accordion-body-rolesHeading-fontSize, 14px);
  color: var(--permissions-accordion-body-rolesHeading-color, #475467);
  font-weight: var(--permissions-accordion-body-rolesHeading-fontWeight, 400);
  text-transform: capitalize;
  line-height: var(--permissions-accordion-body-rolesHeading-lineHeight, 150%);
  margin-bottom: var(--permissions-accordion-body-rolesHeading-margin-bottom, 10px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolesHeading {
    font-size: calc(14 * var(--scaleWidth));
    margin-bottom: calc(10 * var(--scaleWidth));
  }
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolePermissions-accordion {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolePermissions-accordion > ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolePermissions-accordion > ul li {
  float: left;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: var(--permissions-accordion-body-rolePermissions-accordion-listing-margin-bottom, 10px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolePermissions-accordion > ul li {
    margin-bottom: calc(10 * var(--scaleWidth));
  }
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolePermissions-accordion > ul li:last-child {
  margin-bottom: 0;
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolePermissions-accordion > ul li .rolePermissions-accordion-card {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  box-shadow: var(--permissions-accordion-body-rolePermissions-card-box-shadow, 0px 0px 4px 0px rgba(104, 104, 104, 0.2509803922));
  border: var(--permissions-accordion-body-rolePermissions-card-border, 1px solid #CCCCCC);
  border-radius: var(--permissions-accordion-body-rolePermissions-card-borderRadius, 5px);
  overflow: hidden;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolePermissions-accordion > ul li .rolePermissions-accordion-card {
    border-radius: calc(5 * var(--scaleWidth));
  }
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolePermissions-accordion > ul li .rolePermissions-accordion-card .rolePermissions-accordion-card-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: var(--permissions-accordion-body-rolePermissions-card-title-padding, 6px 12px);
  background-color: var(--permissions-accordion-body-rolePermissions-card-title-background-color, #ffffff);
  padding-left: 35px;
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolePermissions-accordion > ul li .rolePermissions-accordion-card .rolePermissions-accordion-card-title {
    padding: calc(6 * var(--scaleWidth)) calc(12 * var(--scaleWidth));
    padding-left: calc(35 * var(--scaleWidth));
  }
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolePermissions-accordion > ul li .rolePermissions-accordion-card .rolePermissions-accordion-card-title .collapsed-arrow {
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  background-image: url("../../krypton-theme-css/assets/icons/accordion-arrow.png");
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolePermissions-accordion > ul li .rolePermissions-accordion-card .rolePermissions-accordion-card-title .collapsed-arrow {
    left: calc(10 * var(--scaleWidth));
    width: calc(24 * var(--scaleWidth));
    width: calc(24 * var(--scaleWidth));
    background-size: calc(24 * var(--scaleWidth));
  }
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolePermissions-accordion > ul li .rolePermissions-accordion-card .rolePermissions-accordion-card-title.collapsed .collapsed-arrow {
  transform: rotate(90deg);
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolePermissions-accordion > ul li .rolePermissions-accordion-card .rolePermissions-accordion-card-title .rolePermissionsHeading {
  font-size: var(--permissions-accordion-body-rolePermissions-card-rolePermissionsHeading-fontSize, 14px);
  line-height: var(--permissions-accordion-body-rolePermissions-card-rolePermissionsHeading-lineHeight, 150%);
  color: var(--permissions-accordion-body-rolePermissions-card-rolePermissionsHeading-color, #475467);
  text-transform: capitalize;
  font-weight: var(--permissions-accordion-body-rolePermissions-card-rolePermissionsHeading-fontWeight, 400);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolePermissions-accordion > ul li .rolePermissions-accordion-card .rolePermissions-accordion-card-title .rolePermissionsHeading {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolePermissions-accordion > ul li .rolePermissions-accordion-card .rolePermissions-accordion-card-title .rolePermissionsHeading .custom-checkbox .custom-control-label {
  font-size: var(--permissions-accordion-body-rolePermissions-card-rolePermissionsHeading-custom-checkbox-title-fontSize, 14px);
  line-height: var(--permissions-accordion-body-rolePermissions-card-rolePermissionsHeading-custom-checkbox-title-lineHeight, 150%);
  color: var(--permissions-accordion-body-rolePermissions-card-rolePermissionsHeading-custom-checkbox-title-color, #475467);
  padding-left: 37px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolePermissions-accordion > ul li .rolePermissions-accordion-card .rolePermissions-accordion-card-title .rolePermissionsHeading .custom-checkbox .custom-control-label {
    font-size: calc(14 * var(--scaleWidth));
    padding-left: calc(37 * var(--scaleWidth));
  }
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolePermissions-accordion > ul li .rolePermissions-accordion-card .rolePermissions-accordion-card-title .number-permission {
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--permissions-accordion-body-rolePermissions-card-numberPermission-border, 1px solid #D1D1D1);
  padding: var(--permissions-accordion-body-rolePermissions-card-numberPermission-padding, 4px 12px);
  font-size: var(--permissions-accordion-body-rolePermissions-card-numberPermission-fontSize, 12px);
  color: var(--permissions-accordion-body-rolePermissions-card-numberPermission-color, #707070);
  font-weight: var(--permissions-accordion-body-rolePermissions-card-numberPermission-fontWeight, 600);
  border-radius: var(--permissions-accordion-body-rolePermissions-card-numberPermission-borderRadius, 20px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolePermissions-accordion > ul li .rolePermissions-accordion-card .rolePermissions-accordion-card-title .number-permission {
    font-size: calc(12 * var(--scaleWidth));
    padding: calc(4 * var(--scaleWidth)) calc(12 * var(--scaleWidth));
    border-radius: calc(20 * var(--scaleWidth));
  }
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolePermissions-accordion > ul li .rolePermissions-accordion-card .permissions-accordion-body {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  padding: var(--permissions-accordion-body-rolePermissions-card-permissions-accordion-body-padding, 10px 45px);
  color: var(--permissions-accordion-body-rolePermissions-card-permissions-accordion-body-color, #475467);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolePermissions-accordion > ul li .rolePermissions-accordion-card .permissions-accordion-body {
    padding: calc(10 * var(--scaleWidth)) calc(45 * var(--scaleWidth));
  }
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolePermissions-accordion > ul li .rolePermissions-accordion-card .permissions-accordion-body .rolePermissionsText {
  font-size: var(--permissions-accordion-body-rolePermissions-card-permissions-accordion-body-fontSize, 14px);
  line-height: var(--permissions-accordion-body-rolePermissions-card-permissions-accordion-body-lineHeight, 150%);
  color: var(--permissions-accordion-body-rolePermissions-card-permissions-accordion-body-color, #475467);
  margin-bottom: var(--permissions-accordion-body-rolePermissions-card-permissions-accordion-body-margin-bottom, 10px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolePermissions-accordion > ul li .rolePermissions-accordion-card .permissions-accordion-body .rolePermissionsText {
    font-size: calc(14 * var(--scaleWidth));
    margin-bottom: calc(10 * var(--scaleWidth));
  }
}
.permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolePermissions-accordion > ul li .rolePermissions-accordion-card .permissions-accordion-body .rolePermissionsText:last-child {
  margin-bottom: 0;
}

.termandcondition {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  margin: var(--permissions-accordion-termCondition-margin, 30px 0);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .termandcondition {
    margin: calc(30 * var(--scaleWidth)) 0;
  }
}
.termandcondition p {
  font-size: var(--permissions-accordion-termCondition-fontSize, 12px);
  line-height: var(--permissions-accordion-termCondition-lineHeight, 18px);
  font-weight: var(--permissions-accordion-termCondition-fontWeight, 400);
  margin-bottom: var(--permissions-accordion-termCondition-margin-bottom, 10px);
  color: var(--permissions-accordion-termCondition-color, #707070);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .termandcondition p {
    font-size: calc(12 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
    margin-bottom: calc(10 * var(--scaleWidth));
  }
}
.termandcondition .form-group .custom-control-label {
  font-size: var(--permissions-accordion-form-group-label-fontSize, 14px);
  color: var(--permissions-accordion-form-group-label-color, #475467);
  padding-left: 30px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .termandcondition .form-group .custom-control-label {
    font-size: calc(14 * var(--scaleWidth));
    padding-left: calc(30 * var(--scaleWidth));
  }
}

.UserAccessTermsandConditions .mainHeading {
  font-size: var(--confirm-user-details-popup-mainHeading-fontSize, 14px);
  line-height: var(--confirm-user-details-popup-mainHeading-lineHeight, 18px);
  margin-bottom: var(--confirm-user-details-popup-mainHeading-margin-bottom, 10px);
  color: var(--confirm-user-details-popup-mainHeading-color, #414141);
  font-weight: var(--confirm-user-details-popup-mainHeading-fontWeight, 700);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .UserAccessTermsandConditions .mainHeading {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
    margin-bottom: calc(10 * var(--scaleWidth));
  }
}
.UserAccessTermsandConditions p {
  font-size: var(--confirm-user-details-popup-description-fontSize, 14px);
  line-height: var(--confirm-user-details-popup-description-lineHeight, 18px);
  margin-bottom: var(--confirm-user-details-popup-description-margin-bottom, 18px);
  color: var(--confirm-user-details-popup-description-color, #414141);
  font-weight: var(--confirm-user-details-popup-description-fontWeight, 400);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .UserAccessTermsandConditions p {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
    margin-bottom: calc(18 * var(--scaleWidth));
  }
}
.UserAccessTermsandConditions .orderlisting {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  padding-left: var(--confirm-user-details-popup-orderlisting-padding-left, 20px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .UserAccessTermsandConditions .orderlisting {
    padding-left: calc(14 * var(--scaleWidth));
  }
}
.UserAccessTermsandConditions .orderlisting li {
  margin-bottom: var(--confirm-user-details-popup-orderlisting-listing-margin-bottom, 18px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .UserAccessTermsandConditions .orderlisting li {
    margin-bottom: calc(18 * var(--scaleWidth));
  }
}
.UserAccessTermsandConditions .orderlisting li::marker {
  color: var(--confirm-user-details-popup-orderlisting-card-heading-color, #414141);
}
.UserAccessTermsandConditions .orderlisting li:last-child {
  margin-bottom: 0;
}
.UserAccessTermsandConditions .orderlisting li .heading {
  font-size: var(--confirm-user-details-popup-orderlisting-card-heading-fontSize, 14px);
  line-height: var(--confirm-user-details-popup-orderlisting-card-heading-lineHeight, 18px);
  color: var(--confirm-user-details-popup-orderlisting-card-heading-color, #414141);
  font-weight: var(--confirm-user-details-popup-orderlisting-card-heading-fontWeight, 600);
  margin-bottom: var(--confirm-user-details-popup-orderlisting-card-heading-margin-bottom, 5px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .UserAccessTermsandConditions .orderlisting li .heading {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
    margin-bottom: calc(5 * var(--scaleWidth));
  }
}
.UserAccessTermsandConditions .orderlisting-card {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  position: relative;
  margin-top: 2px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .UserAccessTermsandConditions .orderlisting-card {
    margin-top: calc(2 * var(--scaleWidth));
  }
}
.UserAccessTermsandConditions .orderlisting-card .heading {
  font-size: var(--confirm-user-details-popup-orderlisting-card-heading-fontSize, 14px);
  line-height: var(--confirm-user-details-popup-orderlisting-card-heading-lineHeight, 18px);
  color: var(--confirm-user-details-popup-orderlisting-card-heading-color, #414141);
  font-weight: var(--confirm-user-details-popup-orderlisting-card-heading-fontWeight, 600);
  margin-bottom: var(--confirm-user-details-popup-orderlisting-card-heading-margin-bottom, 5px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .UserAccessTermsandConditions .orderlisting-card .heading {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
    margin-bottom: calc(5 * var(--scaleWidth));
  }
}
.UserAccessTermsandConditions .orderlisting-card .description p {
  margin-bottom: 3px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .UserAccessTermsandConditions .orderlisting-card .description p {
    margin-bottom: calc(3 * var(--scaleWidth));
  }
}

.confirmationUserRole .card {
  height: auto;
}
.confirmationUserRole .card-header {
  margin-bottom: var(--confirm-user-role-card-margin-bottom, 15px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .confirmationUserRole .card-header {
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
.confirmationUserRole .card-header .heading {
  font-size: var(--confirm-user-role-card-heading-fontSize, var(--font-size-normal));
  line-height: var(--confirm-user-role-card-heading-lineHeight, 100%);
  font-weight: var(--confirm-user-role-card-heading-fontWeight, 500);
  color: var(--confirm-user-role-card-heading-color, #101828);
  margin-bottom: var(--confirm-user-role-card-heading-margin-bottom, 0);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .confirmationUserRole .card-header .heading {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.confirmationUserRole .card-body .description {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
.confirmationUserRole .card-body .description .form-group-view-inline {
  display: inline-flex;
  flex-wrap: wrap;
  color: var(--confirm-user-role-card-body-form-group-view-inline-color, #4A5C80);
  font-weight: var(--confirm-user-role-card-body-form-group-view-inline-fontWeight, 400);
  gap: 4px;
  margin-bottom: var(--confirm-user-role-card-body-form-group-view-inline-margin-bottom, 10px);
  width: var(--confirm-user-role-card-body-form-group-view-inline-width, 100%);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .confirmationUserRole .card-body .description .form-group-view-inline {
    gap: calc(4 * var(--scaleWidth));
    margin-bottom: calc(10 * var(--scaleWidth));
  }
}
.confirmationUserRole .card-body .description .form-group-view-inline:last-child {
  margin-bottom: 0;
}
.confirmationUserRole .card-body .description .form-group-view-inline .label,
.confirmationUserRole .card-body .description .form-group-view-inline .field-name {
  font-weight: 600;
}
.confirmationUserRole .card-body .description .form-group-view-inline .label,
.confirmationUserRole .card-body .description .form-group-view-inline .value {
  font-size: var(--confirm-user-role-card-body-form-group-view-inline-fontSize, 14px) !important;
  line-height: var(--confirm-user-role-card-body-form-group-view-inline-lineHeight, 22px) !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .confirmationUserRole .card-body .description .form-group-view-inline .label,
  .confirmationUserRole .card-body .description .form-group-view-inline .value {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(22 * var(--scaleWidth));
  }
}
.confirmationUserRole .permissions-accordion-list-wrapper {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  max-height: 400px;
  overflow: auto;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .confirmationUserRole .permissions-accordion-list-wrapper {
    max-height: calc(400 * var(--scaleWidth));
  }
}

.theme-dark .permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-header .collapsed-arrow {
  filter: brightness(0) invert(1);
}
.theme-dark .permissions-accordion-list > li .permissions-accordion-card .permissions-accordion-body .rolePermissions-accordion > ul li .rolePermissions-accordion-card .rolePermissions-accordion-card-title .collapsed-arrow {
  filter: brightness(0) invert(1);
}

.order-widget {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  position: relative;
  padding: var(--order-widget-padding);
  background: var(--order-widget-background);
  border-radius: var(--order-widget-borderRadius);
  box-shadow: var(--order-widget-boxShadow);
  min-height: 130px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .order-widget {
    padding: calc(15 * var(--scaleWidth)) calc(20 * var(--scaleWidth));
    border-radius: calc(12 * var(--scaleWidth));
    min-height: calc(130 * var(--scaleWidth));
  }
}
.order-widget .icon {
  display: flex;
  width: var(--order-widget-icon-dimension);
  height: var(--order-widget-icon-dimension);
  justify-content: center;
  align-items: center;
  background-color: var(--order-widget-icon-background-color);
  position: absolute;
  right: 20px;
  top: 15px;
  border-radius: var(--order-widget-icon-borderRadius);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .order-widget .icon {
    width: calc(40 * var(--scaleWidth));
    height: calc(40 * var(--scaleWidth));
    right: calc(20 * var(--scaleWidth));
    top: calc(15 * var(--scaleWidth));
    border-radius: calc(50 * var(--scaleWidth));
  }
}
.order-widget .icon .constl-icon {
  font-size: var(--order-widget-icon-fontSize, 24px);
  color: var(--order-widget-icon-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .order-widget .icon .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.order-widget .dscr {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  padding-right: 60px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .order-widget .dscr {
    padding-right: calc(60 * var(--scaleWidth));
  }
}
.order-widget .dscr .heading {
  font-size: var(--order-widget-description-heading-fontSize);
  color: var(--order-widget-description-heading-color);
  margin-bottom: 20px;
  font-weight: var(--order-widget-description-heading-fontWeight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .order-widget .dscr .heading {
    font-size: calc(16 * var(--scaleWidth));
    margin-bottom: calc(20 * var(--scaleWidth));
  }
}
.order-widget .dscr .value {
  font-weight: var(--order-widget-description-value-fontWeight);
  font-size: var(--order-widget-description-value-fontSize);
  line-height: var(--order-widget-description-value-fontLineHeight);
  color: var(--order-widget-description-value-color);
  position: absolute;
  left: 15px;
  bottom: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .order-widget .dscr .value {
    font-size: calc(45 * var(--scaleWidth));
    line-height: calc(32 * var(--scaleWidth));
    left: calc(15 * var(--scaleWidth));
    bottom: calc(15 * var(--scaleWidth));
  }
}
.order-widget .dscr .value sub {
  font-size: var(--order-widget-description-value-sub-fontSize);
  line-height: var(--order-widget-description-value-sub-fontLineHeight);
  bottom: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .order-widget .dscr .value sub {
    font-size: calc(20 * var(--scaleWidth));
  }
}
.order-widget.total .icon {
  background-color: color-mix(in srgb, var(--order-widget-total-icon-color) 30%, transparent);
}
.order-widget.total .icon .constl-icon {
  color: var(--order-widget-total-icon-color);
}
.order-widget.average .icon {
  background-color: color-mix(in srgb, var(--order-widget-average-icon-color) 30%, transparent);
}
.order-widget.average .icon .constl-icon {
  color: var(--order-widget-average-icon-color);
}

.orderListing-Table .card-header {
  padding: 15px 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderListing-Table .card-header {
    padding-top: calc(15 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
  }
}
.orderListing-Table .card-header .left-controls .title {
  font-size: var(--orderListing-TableCard-header-title-fontSize);
  line-height: var(--orderListing-TableCard-header-title-fontLineHeight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderListing-Table .card-header .left-controls .title {
    font-size: calc(22 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .orderListing-Table .card-header .right-controls {
    width: 100% !important;
  }
}
@media (max-width: 768px) {
  .orderListing-Table .card-header .right-controls .searchbar {
    width: 100% !important;
  }
}
.orderListing-Table .card-header .right-controls .searchbar input[type=text] {
  max-width: var(--orderListing-TableCard-header-searchbar-maxWidth);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderListing-Table .card-header .right-controls .searchbar input[type=text] {
    max-width: calc(170 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .orderListing-Table .card-header .right-controls .searchbar input[type=text] {
    max-width: 100% !important;
  }
}
.orderListing-Table .dataTable tbody tr {
  box-shadow: none;
  border: none;
  background-color: transparent;
}
.orderListing-Table .dataTable tbody tr td {
  padding: 0 0 10px 0 !important;
  background-color: transparent;
  border-radius: 0 !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderListing-Table .dataTable tbody tr td {
    padding: 0 0 calc(10 * var(--scaleWidth)) 0 !important;
  }
}
.orderListing-Table .table-container {
  max-height: calc(100vh - 360px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderListing-Table .table-container {
    max-height: calc(100vh - 360 * var(--scaleWidth));
  }
}
@media (max-width: 1199px) {
  .orderListing-Table .table-container {
    max-height: inherit;
  }
}
.orderListing-Table .table-container .dataTable {
  width: 100% !important;
}
.orderListing-Table .table-main-body {
  margin: -10px 0 0 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderListing-Table .table-main-body {
    margin: calc(-10 * var(--scaleWidth)) 0 0 0;
  }
}
@media (max-width: 1199px) {
  .orderListing-Table .table-main-body {
    max-height: inherit !important;
  }
}

.orderListing-card {
  padding: var(--orderListing-card-padding);
  background-color: var(--orderListing-card-background-color);
  border: var(--orderListing-card-border);
  box-shadow: var(--orderListing-card-boxShadow);
  border-radius: var(--orderListing-card-borderRadius);
  overflow: hidden;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderListing-card {
    padding: calc(10 * var(--scaleWidth));
    border-radius: calc(10 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .orderListing-card {
    padding-top: 55px;
    position: relative;
  }
}
.orderListing-card.active {
  background: var(--orderListing-card-active-background-color) !important;
  border: var(--orderListing-card-active-border);
  box-shadow: var(--orderListing-card-active-boxShadow);
  cursor: pointer;
}
.orderListing-card.active .orderListing-card-header .leftbar .orderNumber {
  color: var(--orderListing-card-active-text-color);
}
.orderListing-card.active .orderListing-card-header .leftbar .orderNumber span {
  color: var(--orderListing-card-active-text-color);
}
.orderListing-card.active .orderListing-card-body .form-group-view .title {
  color: var(--orderListing-card-active-text-color);
  font-weight: 400 !important;
}
.orderListing-card.active .orderListing-card-body .form-group-view .value {
  color: var(--orderListing-card-active-text-color);
  font-weight: 600 !important;
}
.orderListing-card.active .orderListing-card-footer .form-group-inline .constl-icon {
  color: var(--orderListing-card-active-text-color);
}
.orderListing-card.active .orderListing-card-footer .form-group-inline .title {
  color: var(--orderListing-card-active-text-color);
  font-weight: 400 !important;
}
.orderListing-card.active .orderListing-card-footer .form-group-inline .title strong {
  font-weight: 400 !important;
}
.orderListing-card.active .orderListing-card-footer .form-group-inline .value {
  color: var(--orderListing-card-active-text-color);
  font-weight: 600 !important;
}
.orderListing-card .orderListing-card-header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--orderListing-card-header-headermargin-bottom);
  gap: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderListing-card .orderListing-card-header {
    gap: calc(5 * var(--scaleWidth));
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .orderListing-card .orderListing-card-header {
    flex-wrap: wrap;
  }
  .orderListing-card .orderListing-card-header .add-favorate {
    position: absolute;
    top: 10px;
  }
  .orderListing-card .orderListing-card-header .order-status {
    position: absolute;
    right: 10px;
    top: 10px;
  }
}
.orderListing-card .orderListing-card-header .leftbar {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderListing-card .orderListing-card-header .leftbar {
    gap: calc(10 * var(--scaleWidth));
  }
}
.orderListing-card .orderListing-card-header .leftbar .orderNumber {
  font-size: var(--orderListing-card-header-orderNumber-fontSize);
  line-height: var(--orderListing-card-header-orderNumber-fontLineHeight);
  color: var(--orderListing-card-header-orderNumber-color);
  font-weight: var(--orderListing-card-header-orderNumber-fontWeight);
  text-align: left;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderListing-card .orderListing-card-header .leftbar .orderNumber {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.orderListing-card .orderListing-card-header .leftbar .orderNumber span {
  color: var(--orderListing-card-header-orderNumber-span-color);
}
.orderListing-card .orderListing-card-body .form-group-view {
  text-align: left;
  gap: 2px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderListing-card .orderListing-card-body .form-group-view {
    gap: calc(2 * var(--scaleWidth));
  }
}
.orderListing-card .orderListing-card-body .form-group-view .title {
  font-size: var(--orderListing-card-body-formGroupView-title-fontSize);
  line-height: var(--orderListing-card-body-formGroupView-title-fontLineHeight);
  font-weight: 400 !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderListing-card .orderListing-card-body .form-group-view .title {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
  }
}
.orderListing-card .orderListing-card-body .form-group-view .value {
  font-size: var(--orderListing-card-body-formGroupView-title-fontSize);
  font-weight: var(--orderListing-card-body-formGroupView-title-fontWeight);
  font-weight: 600 !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderListing-card .orderListing-card-body .form-group-view .value {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .orderListing-card .orderListing-card-body .col-md-4.col-sm-6.mb-15 {
    flex: 33.33%;
    max-width: 33.33%;
  }
}
@media (max-width: 479px) {
  .orderListing-card .orderListing-card-body .col-md-4.col-sm-6.mb-15 {
    flex: 50%;
    max-width: 50%;
  }
}
.orderListing-card .orderListing-card-footer {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-top: var(--orderListing-card-footer-padding-top);
  border-top: var(--orderListing-card-footer-border);
  align-items: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderListing-card .orderListing-card-footer {
    padding-top: calc(15 * var(--scaleWidth));
  }
}
.orderListing-card .orderListing-card-footer .form-group-inline {
  flex-wrap: wrap;
}
.orderListing-card .orderListing-card-footer .form-group-inline .constl-icon {
  font-size: var(--orderListing-card-formGroupViewInline-icon-fontSize, 24px);
  color: var(--orderListing-card-formGroupViewInline-icon-color, #475467);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderListing-card .orderListing-card-footer .form-group-inline .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.orderListing-card .orderListing-card-footer .form-group-inline .title {
  font-size: var(--orderListing-card-formGroupViewInline-title-fontSize);
  color: var(--orderListing-card-formGroupViewInline-title-color);
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 400 !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderListing-card .orderListing-card-footer .form-group-inline .title {
    font-size: calc(14 * var(--scaleWidth));
    gap: calc(5 * var(--scaleWidth));
  }
}
.orderListing-card .orderListing-card-footer .form-group-inline .title strong {
  font-weight: 400 !important;
}
.orderListing-card .orderListing-card-footer .form-group-inline .value {
  font-size: var(--orderListing-card-formGroupViewInline-value-fontSize);
  font-weight: var(--orderListing-card-formGroupViewInline-value-fontWeight);
  color: var(--orderListing-card-formGroupViewInline-value-color);
  font-weight: 600 !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderListing-card .orderListing-card-footer .form-group-inline .value {
    font-size: calc(14 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .orderListing-card .orderListing-card-footer .rightbar .form-group-inline {
    align-items: flex-end;
  }
  .orderListing-card .orderListing-card-footer .leftbar .form-group-inline {
    align-items: flex-start;
  }
}

@media (max-width: 1199px) {
  .orderListing-row .left-col,
  .orderListing-row .right-col {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.order-status {
  font-size: var(--orderListing-card-orderStatus-fontSize);
  padding: var(--orderListing-card-orderStatus-padding);
  border: 1 var(--orderListing-card-orderStatus-border);
  color: var(--orderListing-card-orderStatus-color);
  background-color: var(--orderListing-card-orderStatus-color);
  display: inline-block;
  border-radius: var(--orderListing-card-orderStatus-border-radius);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1490196078);
  font-weight: 600;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .order-status {
    font-size: calc(12 * var(--scaleWidth));
    padding-top: calc(5 * var(--scaleWidth));
    padding-bottom: calc(5 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
    border-radius: calc(20 * var(--scaleWidth));
  }
}
.order-status.completed, .order-status.billingcompleted {
  color: var(--orderListing-card-orderStatus-completed-color);
  border-color: var(--orderListing-card-orderStatus-completed-color);
  background-color: color-mix(in srgb, var(--orderListing-card-orderStatus-completed-color) 10%, white) !important;
}
.order-status.new {
  color: var(--orderListing-card-orderStatus-new-color);
  border-color: var(--orderListing-card-orderStatus-new-color);
  background-color: color-mix(in srgb, var(--orderListing-card-orderStatus-new-color) 10%, white) !important;
}
.order-status.open {
  color: var(--orderListing-card-orderStatus-open-color);
  border-color: var(--orderListing-card-orderStatus-open-color);
  background-color: color-mix(in srgb, var(--orderListing-card-orderStatus-open-color) 10%, white) !important;
}
.order-status.inprogress {
  color: var(--orderListing-card-orderStatus-inprogress-color);
  border-color: var(--orderListing-card-orderStatus-inprogress-color);
  background-color: color-mix(in srgb, var(--orderListing-card-orderStatus-inprogress-color) 10%, white) !important;
}
.order-status.pending, .order-status.provisioning-hold, .order-status.held {
  color: var(--orderListing-card-orderStatus-pending-color);
  border-color: var(--orderListing-card-orderStatus-pending-color);
  background-color: color-mix(in srgb, var(--orderListing-card-orderStatus-pending-color) 10%, white) !important;
}
.order-status.closed, .order-status.close, .order-status.ordervalidation-failed, .order-status.cancelled {
  color: var(--orderListing-card-orderStatus-closed-color);
  border-color: var(--orderListing-card-orderStatus-closed-color);
  background-color: color-mix(in srgb, var(--orderListing-card-orderStatus-closed-color) 10%, white) !important;
}
.order-status.assigned, .order-status.clearinprogress {
  color: var(--orderListing-card-orderStatus-assigned-color);
  border-color: var(--orderListing-card-orderStatus-assigned-color);
  background-color: color-mix(in srgb, var(--orderListing-card-orderStatus-assigned-color) 10%, white) !important;
}
.order-status.resolved {
  color: var(--orderListing-card-orderStatus-resolved-color);
  border-color: var(--orderListing-card-orderStatus-resolved-color);
  background-color: color-mix(in srgb, var(--orderListing-card-orderStatus-resolved-color) 10%, white) !important;
}
.order-status.failed {
  color: #e74c3c;
  border-color: #e74c3c;
  background-color: color-mix(in srgb, #e74c3c 10%, white) !important;
}

.orderDetails {
  max-height: calc(100vh - 130px);
  background: var(--orderDetails-card-background-color);
  box-shadow: var(--orderDetails-card-boxShadow);
  padding: var(--orderDetails-card-padding);
  height: 100%;
  border-radius: var(--orderDetails-card-borderRadius);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderDetails {
    max-height: calc(100vh - 130 * var(--scaleWidth));
    padding-top: calc(20 * var(--scaleWidth));
    padding-bottom: calc(20 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
    border-radius: calc(12 * var(--scaleWidth));
  }
}
@media (max-width: 1199px) {
  .orderDetails {
    max-height: inherit;
  }
}
.orderDetails .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--orderDetails-card-header-margine-bottom);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderDetails .card-header {
    margin-bottom: calc(20 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .orderDetails .card-header {
    align-items: flex-start;
    gap: 10px;
  }
}
.orderDetails .card-header .orderNumber {
  font-size: var(--orderDetails-card-header-orderNumber-fontSize);
  line-height: var(--orderDetails-card-header-orderNumber-fontLineHeight);
  font-weight: var(--orderDetails-card-header-orderNumber-fontWeight);
  color: var(--orderDetails-card-header-orderNumber-color);
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderDetails .card-header .orderNumber {
    font-size: calc(18 * var(--scaleWidth));
    gap: calc(5 * var(--scaleWidth));
  }
}
.orderDetails .card-header .orderNumber span {
  color: var(--orderDetails-card-header-orderNumber-span-color);
}
.orderDetails .card-header .orderNumber .tag {
  display: flex;
  justify-self: center;
  align-items: center;
  padding: var(--orderDetails-card-header-tag-padding);
  background-color: var(--orderDetails-card-header-tag-background-color);
  border: var(--orderDetails-card-header-tag-border);
  color: var(--orderDetails-card-header-tag-color);
  border-radius: var(--orderDetails-card-header-tag-borderRadius);
  font-size: var(--orderDetails-card-header-tag-fontSize);
  line-height: var(--orderDetails-card-header-tag-fontSizeLineHeight);
  font-weight: var(--orderDetails-card-header-tag-fontWeight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderDetails .card-header .orderNumber .tag {
    font-size: calc(12 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
    padding-top: calc(2 * var(--scaleWidth));
    padding-bottom: calc(2 * var(--scaleWidth));
    padding-left: calc(6 * var(--scaleWidth));
    padding-right: calc(6 * var(--scaleWidth));
  }
}
.orderDetails .card-header .order-status-date {
  display: inline-flex;
  align-items: center;
  font-size: var(--orderDetails-card-header-order-statusDate-fontSize);
  line-height: var(--orderDetails-card-header-order-statusDate-fontSizeLineHeight);
  color: var(--orderDetails-card-header-order-statusDate-color);
  font-weight: var(--orderDetails-card-header-order-statusDate-fontWeight);
  gap: 8px;
  flex-wrap: wrap;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderDetails .card-header .order-status-date {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(14 * var(--scaleWidth));
    gap: calc(8 * var(--scaleWidth));
  }
}
.orderDetails .card-header .order-status-date .constl-icon {
  font-size: var(--orderDetails-card-header-order-statusDate-icon-fontSize, 24px);
  color: var(--orderDetails-card-header-order-statusDate-icon-color, #6C737F);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderDetails .card-header .order-status-date .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.orderDetails .card-body .order-tracking-card {
  box-shadow: var(--order-tracking-card-boxShadow);
  border: var(--order-tracking-card-border);
  border-radius: var(--order-tracking-card-borderRadius);
  padding: var(--order-tracking-card-padding);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderDetails .card-body .order-tracking-card {
    padding-top: calc(20 * var(--scaleWidth));
    padding-bottom: calc(20 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
    border-radius: calc(10 * var(--scaleWidth));
  }
}
.orderDetails .col-12.mb-25 {
  margin-bottom: 10px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderDetails .col-12.mb-25 {
    margin-bottom: calc(10 * var(--scaleWidth)) !important;
  }
}

.order-tracking-card .title {
  font-size: var(--font-size-normal);
  color: var(--body-text-color);
  line-height: 100%;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-weight: 500;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .order-tracking-card .title {
    font-size: calc(16 * var(--scaleWidth));
    font-size: calc(10 * var(--scaleWidth));
  }
}
.order-tracking-card .order-tracking-path {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  position: relative;
}
.order-tracking-card .order-tracking-path .expected-date-details {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  gap: 5px;
  width: 145px;
  padding-bottom: 5px;
  right: 70px;
  bottom: 100%;
  position: absolute;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .order-tracking-card .order-tracking-path .expected-date-details {
    gap: calc(16 * var(--scaleWidth));
    width: calc(145 * var(--scaleWidth));
    padding-bottom: calc(5 * var(--scaleWidth));
    right: calc(70 * var(--scaleWidth));
  }
}
.order-tracking-card .order-tracking-path .expected-date-details .dotted-line {
  right: 0;
  bottom: -13px;
  position: absolute;
  content: "";
  height: 3px;
  background-color: var(--color-white);
  display: inline-block;
  vertical-align: top;
  width: 70px;
  border-bottom: 3px dashed var(--color-accent);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .order-tracking-card .order-tracking-path .expected-date-details .dotted-line {
    bottom: calc(-13 * var(--scaleWidth));
    height: calc(3 * var(--scaleWidth));
    width: calc(70 * var(--scaleWidth));
    border-width: calc(3 * var(--scaleWidth));
  }
}
@media (min-width: 1664px) {
  .order-tracking-card .order-tracking-path .expected-date-details {
    right: 100px;
  }
}
.order-tracking-card .order-tracking-path .expected-date-details::after {
  position: absolute;
  height: 25px;
  width: 2px;
  display: inline-block;
  vertical-align: top;
  content: "";
  background-color: var(--color-white);
  top: 100%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 111;
  border-left: 2px dashed #CE1414;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .order-tracking-card .order-tracking-path .expected-date-details::after {
    width: calc(2 * var(--scaleWidth));
    height: calc(25 * var(--scaleWidth));
    border-left: calc(2 * var(--scaleWidth)) dashed #CE1414;
  }
}
.order-tracking-card .order-tracking-path .expected-date-details .label {
  display: inline-block;
  width: auto;
  vertical-align: top;
  font-size: 10px;
  line-height: 100%;
  color: var(--body-text-color);
  font-weight: 600;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .order-tracking-card .order-tracking-path .expected-date-details .label {
    font-size: calc(10 * var(--scaleWidth));
  }
}
.order-tracking-card .order-tracking-path .expected-date-details .value {
  display: inline-block;
  width: auto;
  vertical-align: top;
  font-size: 10px;
  line-height: 100%;
  color: var(--body-text-color);
  font-weight: 400;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .order-tracking-card .order-tracking-path .expected-date-details .value {
    font-size: calc(10 * var(--scaleWidth));
  }
}
.order-tracking-card .order-tracking-path > ul {
  padding: 0;
  list-style: none;
  display: flex;
  margin: 0 -5px;
  padding-bottom: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .order-tracking-card .order-tracking-path > ul {
    margin: 0 calc(-5 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
  }
}
.order-tracking-card .order-tracking-path > ul li {
  flex: 1;
  padding: 0 5px;
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .order-tracking-card .order-tracking-path > ul li {
    padding: 0 calc(5 * var(--scaleWidth));
  }
}
.order-tracking-card .order-tracking-path > ul li::after {
  position: absolute;
  content: "";
  height: 3px;
  background-color: var(--order-tracking-card-tracking-details-tracking-point-centerPoint-background-color);
  display: inline-block;
  vertical-align: top;
  left: 0;
  top: 10px;
  width: 100%;
  transform: translateX(50%);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .order-tracking-card .order-tracking-path > ul li::after {
    height: calc(3 * var(--scaleWidth));
    top: calc(10 * var(--scaleWidth));
  }
}
.order-tracking-card .order-tracking-path > ul li:last-child::after {
  display: none;
}
.order-tracking-card .order-tracking-path > ul li.active::after {
  background-color: var(--color-accent);
}
.order-tracking-card .order-tracking-path > ul li.active .tracking-details .tracking-point {
  border-color: var(--color-accent);
}
.order-tracking-card .order-tracking-path > ul li.active .tracking-details .tracking-point::after {
  background-color: var(--color-accent);
}
.order-tracking-card .order-tracking-path > ul li .tracking-details {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  gap: 5px;
  padding-top: 30px;
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .order-tracking-card .order-tracking-path > ul li .tracking-details {
    gap: calc(5 * var(--scaleWidth));
    padding-top: calc(30 * var(--scaleWidth));
  }
}
.order-tracking-card .order-tracking-path > ul li .tracking-details .tracking-point {
  width: var(--order-tracking-card-tracking-details-tracking-point-dimension);
  height: var(--order-tracking-card-tracking-details-tracking-point-dimension);
  border: var(--order-tracking-card-tracking-details-tracking-point-border);
  border-radius: var(--order-tracking-card-tracking-details-tracking-point-borderRadius);
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  background-color: var(--order-tracking-card-tracking-details-tracking-point-background-color);
  z-index: 11;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .order-tracking-card .order-tracking-path > ul li .tracking-details .tracking-point {
    width: calc(24 * var(--scaleWidth));
    height: calc(24 * var(--scaleWidth));
  }
}
.order-tracking-card .order-tracking-path > ul li .tracking-details .tracking-point::after {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 100px;
  background-color: var(--order-tracking-card-tracking-details-tracking-point-centerPoint-background-color);
  margin: auto;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .order-tracking-card .order-tracking-path > ul li .tracking-details .tracking-point::after {
    width: calc(12 * var(--scaleWidth));
    height: calc(12 * var(--scaleWidth));
  }
}
.order-tracking-card .order-tracking-path > ul li .tracking-details .tracking-title {
  font-size: var(--order-tracking-card-tracking-details-tracking-title-fontSize);
  color: var(--order-tracking-card-tracking-details-tracking-title-color);
  line-height: var(--order-tracking-card-tracking-details-tracking-title-fontSizeLineHeight);
  font-weight: var(--order-tracking-card-tracking-details-tracking-title-fontWeight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .order-tracking-card .order-tracking-path > ul li .tracking-details .tracking-title {
    font-size: calc(12 * var(--scaleWidth));
  }
}
.order-tracking-card .order-tracking-path > ul li .tracking-details .tracking-dateTime {
  font-size: var(--order-tracking-card-tracking-details-tracking-dateTime-fontSize);
  color: var(--order-tracking-card-tracking-details-tracking-dateTime-color);
  line-height: var(--order-tracking-card-tracking-details-tracking-dateTime-fontSizeLineHeight);
  font-weight: var(--order-tracking-card-tracking-details-tracking-dateTime-fontWeight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .order-tracking-card .order-tracking-path > ul li .tracking-details .tracking-dateTime {
    font-size: calc(10 * var(--scaleWidth));
  }
}
.order-tracking-card .order-tracking-path.order-tracking-stages {
  overflow: hidden;
  overflow-x: auto;
}
.order-tracking-card .order-tracking-path.order-tracking-stages > ul {
  min-width: 1080px;
}

.price-summary-card {
  -webkit-box-shadow: var(--price-summary-card-boxShadow);
  box-shadow: var(--price-summary-card-boxShadow);
  border: var(--price-summary-card-border);
  border-radius: var(--price-summary-card-borderRadius);
  padding: var(--price-summary-card-padding);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .price-summary-card {
    border-radius: calc(10 * var(--scaleWidth));
    padding: calc(20 * var(--scaleWidth)) calc(15 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .price-summary-card > .row {
    gap: 50px 0;
    flex-direction: column-reverse;
  }
}
.price-summary-card .leftbar {
  padding-right: 15px;
  border-right: 1px solid var(--price-summary-card-center-border-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .price-summary-card .leftbar {
    padding-right: calc(15 * var(--scaleWidth));
  }
}
@media (max-width: 1024px) {
  .price-summary-card .leftbar {
    padding-right: 5px;
    border: none;
  }
}
.price-summary-card .price-summary-card-wrap {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
.price-summary-card .price-summary-card-wrap .price-summary-card-wrap-heading {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--price-summary-card-leftbar-heading-fontSize);
  line-height: var(--price-summary-card-leftbar-heading-fontSizeLineHeight);
  color: var(--price-summary-card-leftbar-heading-color);
  margin-bottom: var(--price-summary-card-leftbar-heading-marginBottom);
  font-weight: var(--price-summary-card-leftbar-heading-fontWeight);
  display: inline-flex;
  align-items: center;
  line-height: 24px;
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .price-summary-card .price-summary-card-wrap .price-summary-card-wrap-heading {
    font-size: calc(18 * var(--scaleWidth));
    line-height: calc(24 * var(--scaleWidth));
    margin-bottom: calc(15 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
  }
}
.price-summary-card .price-summary-card-wrap .price-summary-card-wrap-heading .constl-icon {
  position: relative;
  margin-top: -1px;
  font-size: var(--more-information-card-heading-icon-fontSize, 24px);
  color: var(--more-information-card-heading-icon-color, #372194);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .price-summary-card .price-summary-card-wrap .price-summary-card-wrap-heading .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.price-summary-card .price-summary-card-wrap .price-summary-card-wrap-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .price-summary-card .price-summary-card-wrap .price-summary-card-wrap-body {
    gap: calc(15 * var(--scaleWidth));
  }
}
.price-summary-card .price-summary-card-wrap .price-summary-card-wrap-body .inner-card {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  background: var(--price-summary-card-leftbar-innercard-background);
  border: var(--price-summary-card-leftbar-innercard-border);
  padding: var(--price-summary-card-leftbar-innercard-padding);
  border-radius: var(--price-summary-card-leftbar-innercard-borderRadius);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .price-summary-card .price-summary-card-wrap .price-summary-card-wrap-body .inner-card {
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.price-summary-card .price-summary-card-wrap .price-summary-card-wrap-body .inner-card .details-wrap .form-group-view {
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .price-summary-card .price-summary-card-wrap .price-summary-card-wrap-body .inner-card .details-wrap .form-group-view {
    gap: calc(10 * var(--scaleWidth));
  }
}
.price-summary-card .price-summary-card-wrap .price-summary-card-wrap-body .inner-card .details-wrap .form-group-view .title {
  font-size: var(--price-summary-card-leftbar-innercard-viewDetails-title-fontSize);
  color: var(--price-summary-card-leftbar-innercard-viewDetails-title-color);
  line-height: var(--price-summary-card-leftbar-innercard-viewDetails-title-fontSizeLineHeight);
  font-weight: var(--price-summary-card-leftbar-innercard-viewDetails-title-fontWeight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .price-summary-card .price-summary-card-wrap .price-summary-card-wrap-body .inner-card .details-wrap .form-group-view .title {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.price-summary-card .price-summary-card-wrap .price-summary-card-wrap-body .inner-card .details-wrap .form-group-view .value {
  font-size: var(--price-summary-card-leftbar-innercard-viewDetails-value-fontSize);
  line-height: var(--price-summary-card-leftbar-innercard-viewDetails-value-fontSizeLineHeight);
  color: var(--price-summary-card-leftbar-innercard-viewDetails-value-color);
  font-weight: var(--price-summary-card-leftbar-innercard-viewDetails-value-fontWeight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .price-summary-card .price-summary-card-wrap .price-summary-card-wrap-body .inner-card .details-wrap .form-group-view .value {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.price-summary-card .price-summary-card-wrap .price-summary-card-wrap-body .inner-card .price-summary ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .price-summary-card .price-summary-card-wrap .price-summary-card-wrap-body .inner-card .price-summary ul {
    gap: calc(10 * var(--scaleWidth));
  }
}
.price-summary-card .price-summary-card-wrap .price-summary-card-wrap-body .inner-card .price-summary ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.price-summary-card .price-summary-card-wrap .price-summary-card-wrap-body .inner-card .price-summary ul li .title {
  font-size: var(--price-summary-card-leftbar-innercard-priceSummary-title-fontSize);
  line-height: var(--price-summary-card-leftbar-innercard-priceSummary-title-fontSizeLineHeight);
  color: var(--price-summary-card-leftbar-innercard-priceSummary-title-color);
  font-weight: var(--price-summary-card-leftbar-innercard-priceSummary-title-fontWeight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .price-summary-card .price-summary-card-wrap .price-summary-card-wrap-body .inner-card .price-summary ul li .title {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(19 * var(--scaleWidth));
  }
}
.price-summary-card .price-summary-card-wrap .price-summary-card-wrap-body .inner-card .price-summary ul li .value {
  font-size: var(--price-summary-card-leftbar-innercard-priceSummary-value-fontSize);
  line-height: var(--price-summary-card-leftbar-innercard-priceSummary-value-fontSizeLineHeight);
  color: var(--price-summary-card-leftbar-innercard-priceSummary-value-color);
  font-weight: var(--price-summary-card-leftbar-innercard-priceSummary-value-fontWeight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .price-summary-card .price-summary-card-wrap .price-summary-card-wrap-body .inner-card .price-summary ul li .value {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(19 * var(--scaleWidth));
  }
}
.price-summary-card .price-summary-card-wrap .price-summary-card-wrap-body .inner-card .price-summary ul li.total .value {
  font-weight: 700;
}
.price-summary-card .price-summary-card-wrap .price-summary-card-wrap-body .inner-card .price-summary ul li.total .title {
  font-weight: 700;
}
.price-summary-card .rightbar .rout-details {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  padding-left: var(--price-summary-card-rightbar-padding-left);
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .price-summary-card .rightbar .rout-details {
    padding-left: calc(20 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .price-summary-card .rightbar .rout-details {
    padding-left: 0;
  }
}
.price-summary-card .rightbar .rout-details > ul {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 304px;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .price-summary-card .rightbar .rout-details > ul {
    min-height: calc(304 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .price-summary-card .rightbar .rout-details > ul {
    min-height: 400px;
  }
}
.price-summary-card .rightbar .rout-details > ul::after {
  position: absolute;
  left: 20px;
  top: 0;
  content: "";
  display: inline-block;
  width: 2px;
  height: calc(100% - 89px);
  bottom: 0;
  margin: auto;
  border-left: 2px dashed var(--color-primary-mode);
  z-index: 1;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .price-summary-card .rightbar .rout-details > ul::after {
    left: calc(20 * var(--scaleWidth));
    width: calc(2 * var(--scaleWidth));
    height: calc(100% - 89 * var(--scaleWidth));
    border-width: calc(2 * var(--scaleWidth));
  }
}
.price-summary-card .rightbar .rout-details > ul > li .rout-info {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .price-summary-card .rightbar .rout-details > ul > li .rout-info {
    gap: calc(8 * var(--scaleWidth));
  }
}
.price-summary-card .rightbar .rout-details > ul > li .rout-info.rout-to {
  align-items: flex-end;
}
.price-summary-card .rightbar .rout-details > ul > li .rout-info .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--price-summary-card-rightbar-routInfo-icon-dimension);
  height: var(--price-summary-card-rightbar-routInfo-icon-dimension);
  min-width: var(--price-summary-card-rightbar-routInfo-icon-dimension);
  background-color: color-mix(in srgb, var(--price-summary-card-rightbar-routInfo-routFrom-icon-color) 30%, transparent);
  border-radius: var(--price-summary-card-rightbar-routInfo-icon-borderRadius);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .price-summary-card .rightbar .rout-details > ul > li .rout-info .icon {
    width: calc(44 * var(--scaleWidth));
    height: calc(44 * var(--scaleWidth));
    min-width: calc(44 * var(--scaleWidth));
  }
}
.price-summary-card .rightbar .rout-details > ul > li .rout-info .icon .constl-icon,
.price-summary-card .rightbar .rout-details > ul > li .rout-info .icon .material-symbols-outlined {
  font-size: var(--price-summary-card-rightbar-routInfo-routFrom-icon-fontSize, 28px);
  color: var(--price-summary-card-rightbar-routInfo-routFrom-icon-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .price-summary-card .rightbar .rout-details > ul > li .rout-info .icon .constl-icon,
  .price-summary-card .rightbar .rout-details > ul > li .rout-info .icon .material-symbols-outlined {
    font-size: calc(28 * var(--scaleWidth));
  }
}
.price-summary-card .rightbar .rout-details > ul > li .rout-info .destination-address {
  display: flex;
  flex-direction: column;
  width: calc(100% - var(--price-summary-card-rightbar-routInfo-icon-dimension));
  gap: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .price-summary-card .rightbar .rout-details > ul > li .rout-info .destination-address {
    gap: calc(5 * var(--scaleWidth));
    width: calc(100% - 44 * var(--scaleWidth));
  }
}
.price-summary-card .rightbar .rout-details > ul > li .rout-info .destination-address .heading {
  font-size: var(--price-summary-card-rightbar-heading-fontSize);
  line-height: var(--price-summary-card-rightbar-heading-fontSizeLineHeight);
  color: var(--price-summary-card-rightbar-heading-color);
  font-weight: var(--price-summary-card-rightbar-heading-fontWeight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .price-summary-card .rightbar .rout-details > ul > li .rout-info .destination-address .heading {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.price-summary-card .rightbar .rout-details > ul > li .rout-info .destination-address .addressText {
  font-size: var(--price-summary-card-rightbar-addressText-fontSize);
  line-height: var(--price-summary-card-rightbar-addressText-fontSizeLineHeight);
  color: var(--price-summary-card-rightbar-addressText-color);
  font-weight: var(--price-summary-card-rightbar-addressText-fontWeight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .price-summary-card .rightbar .rout-details > ul > li .rout-info .destination-address .addressText {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.price-summary-card .rightbar .rout-details > ul > li.rout-to .rout-info .icon {
  background-color: color-mix(in srgb, var(--price-summary-card-rightbar-routInfo-routTo-icon-color) 30%, transparent);
}
.price-summary-card .rightbar .rout-details > ul > li.rout-to .rout-info .icon .constl-icon,
.price-summary-card .rightbar .rout-details > ul > li.rout-to .rout-info .icon .material-symbols-outlined {
  font-size: var(--price-summary-card-rightbar-routInfo-routFrom-icon-fontSize, 28px);
  color: var(--price-summary-card-rightbar-routInfo-routTo-icon-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .price-summary-card .rightbar .rout-details > ul > li.rout-to .rout-info .icon .constl-icon,
  .price-summary-card .rightbar .rout-details > ul > li.rout-to .rout-info .icon .material-symbols-outlined {
    font-size: calc(28 * var(--scaleWidth));
  }
}
.price-summary-card .rightbar .rout-details .routLine-details {
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 50px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .price-summary-card .rightbar .rout-details .routLine-details {
    gap: calc(15 * var(--scaleWidth));
    left: calc(50 * var(--scaleWidth));
  }
}
.price-summary-card .rightbar .rout-details .routLine-details .routLine-details-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--price-summary-card-rightbar-routLine-details-tag-padding);
  border: var(--price-summary-card-rightbar-routLine-details-tag-border);
  border-radius: var(--price-summary-card-rightbar-routLine-details-tag-borderRadius);
  background-color: color-mix(in srgb, var(--price-summary-card-rightbar-routLine-details-tag-background-color) 30%, transparent);
  gap: 3px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .price-summary-card .rightbar .rout-details .routLine-details .routLine-details-tag {
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
    border-radius: calc(50 * var(--scaleWidth));
    gap: calc(3 * var(--scaleWidth));
  }
}
.price-summary-card .rightbar .rout-details .routLine-details .routLine-details-tag .label,
.price-summary-card .rightbar .rout-details .routLine-details .routLine-details-tag .value {
  font-size: var(--price-summary-card-rightbar-routLine-details-tag-fontSize);
  line-height: var(--price-summary-card-rightbar-routLine-details-tag-fontSizeLineHeight);
  color: var(--price-summary-card-rightbar-routLine-details-tag-color);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .price-summary-card .rightbar .rout-details .routLine-details .routLine-details-tag .label,
  .price-summary-card .rightbar .rout-details .routLine-details .routLine-details-tag .value {
    font-size: calc(12 * var(--scaleWidth));
  }
}
.price-summary-card .rightbar .rout-details .routLine-details .routLine-details-tag .value {
  font-weight: 700;
}

.user_details_card > ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: 10px;
  flex-direction: column;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .user_details_card > ul {
    gap: calc(10 * var(--scaleWidth));
  }
}
.user_details_card > ul > li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.user_details_card > ul > li .user_details_row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--more-information-card-contactsCard-userDetails-fontSize);
  line-height: 100%;
  font-weight: var(--more-information-card-contactsCard-userDetails-fontWeight);
  color: var(--more-information-card-contactsCard-userDetails-color);
  word-break: break-all;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .user_details_card > ul > li .user_details_row {
    gap: calc(10 * var(--scaleWidth));
    font-size: calc(16 * var(--scaleWidth));
  }
}

.contacts-team-card .team-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .contacts-team-card .team-detail {
    gap: calc(20 * var(--scaleWidth));
  }
}
@media (max-width: 479px) {
  .contacts-team-card .team-detail {
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
  }
}
.contacts-team-card .team-detail .team-profile {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: var(--more-information-card-contacts-team-card-details-profilePicture-dimension);
  height: var(--more-information-card-contacts-team-card-details-profilePicture-dimension);
  border-radius: var(--more-information-card-contacts-team-card-details-profilePicture-borderRadius);
  overflow: hidden;
  box-shadow: var(--more-information-card-contacts-team-card-details-profilePicture-boxSshadow);
  background-color: var(--avtar-background-color, #f1f2f5);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .contacts-team-card .team-detail .team-profile {
    width: calc(80 * var(--scaleWidth));
    height: calc(80 * var(--scaleWidth));
  }
}
.contacts-team-card .team-detail .team-profile img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.contacts-team-card .team-detail .team-profile .constl-icon {
  color: var(--avtar-color, #6b6c7e);
  font-size: var(--avtar-fontSize, 35px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .contacts-team-card .team-detail .team-profile .constl-icon {
    font-size: calc(35 * var(--scaleWidth));
  }
}
.contacts-team-card .team-detail .team-profile-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .contacts-team-card .team-detail .team-profile-detail {
    gap: calc(10 * var(--scaleWidth));
  }
}
@media (max-width: 479px) {
  .contacts-team-card .team-detail .team-profile-detail {
    width: 100%;
  }
}
.contacts-team-card .team-detail .team-profile-detail > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .contacts-team-card .team-detail .team-profile-detail > div {
    gap: calc(8 * var(--scaleWidth));
  }
}
.contacts-team-card .team-detail .team-profile-detail > div .constl-icon {
  font-size: 24px;
  line-height: 1;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .contacts-team-card .team-detail .team-profile-detail > div .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.contacts-team-card .team-detail .team-profile-detail .name {
  font-size: var(--more-information-card-contacts-team-card-details-name-fontSize);
  line-height: var(--more-information-card-contacts-team-card-details-name-fontSizeLineHeight);
  color: var(--more-information-card-contacts-team-card-details-name-color);
  font-weight: var(--more-information-card-contacts-team-card-details-name-fontWeight);
  word-break: break-all;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .contacts-team-card .team-detail .team-profile-detail .name {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.contacts-team-card .team-detail .team-profile-detail .name .constl-icon {
  color: var(--more-information-card-contacts-team-card-details-name-color);
}
.contacts-team-card .team-detail .team-profile-detail .email {
  font-size: var(--more-information-card-contacts-team-card-details-email-fontSize);
  line-height: var(--more-information-card-contacts-team-card-details-email-fontSizeLineHeight);
  color: var(--more-information-card-contacts-team-card-details-email-color);
  font-weight: var(--more-information-card-contacts-team-card-details-email-fontWeight);
  word-break: break-all;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .contacts-team-card .team-detail .team-profile-detail .email {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.contacts-team-card .team-detail .team-profile-detail .email .constl-icon {
  color: var(--more-information-card-contacts-team-card-details-email-color);
}
.contacts-team-card .team-detail .team-profile-detail .email a {
  color: var(--more-information-card-contacts-team-card-details-clickable-color);
}
.contacts-team-card .team-detail .team-profile-detail .contact {
  font-size: var(--more-information-card-contacts-team-card-details-contact-fontSize);
  line-height: var(--more-information-card-contacts-team-card-details-contact-fontSizeLineHeight);
  color: var(--more-information-card-contacts-team-card-details-contact-color);
  font-weight: var(--more-information-card-contacts-team-card-details-contact-fontWeight);
  word-break: break-all;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .contacts-team-card .team-detail .team-profile-detail .contact {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.contacts-team-card .team-detail .team-profile-detail .contact .constl-icon {
  color: var(--more-information-card-contacts-team-card-details-contact-color);
}

.more-information-card {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  box-shadow: 0 var(--more-information-card-boxShadow);
  border: var(--more-information-card-border);
  border-radius: var(--more-information-card-borderRadius);
  padding: var(--more-information-card-padding);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .more-information-card {
    border-radius: calc(10 * var(--scaleWidth));
    padding-top: calc(20 * var(--scaleWidth));
    padding-bottom: calc(20 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
  }
}
.more-information-card .card-title {
  display: flex;
  align-items: center;
  font-size: var(--more-information-card-heading-fontSize);
  line-height: var(--more-information-card-heading-fontSizeLineHeight);
  color: var(--more-information-card-heading-color);
  font-weight: var(--more-information-card-heading-fontWeight);
  text-transform: capitalize;
  gap: 10px;
  margin-bottom: 6px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .more-information-card .card-title {
    font-size: calc(18 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
    margin-bottom: calc(6 * var(--scaleWidth));
  }
}
.more-information-card .card-title .constl-icon {
  font-size: var(--more-information-card-heading-icon-fontSize, 24px);
  color: var(--more-information-card-heading-icon-color, #372194);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .more-information-card .card-title .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.more-information-card .card-body {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
.more-information-card .tabular-content-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--more-information-card-reports-card-heading-fontSize);
  line-height: normal;
  color: var(--more-information-card-reports-card-heading-color);
  font-weight: var(--more-information-card-reports-card-heading-fontWeight);
  margin-bottom: var(--more-information-card-reports-card-heading-margin-bottom);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .more-information-card .tabular-content-title {
    gap: calc(10 * var(--scaleWidth));
    font-size: calc(18 * var(--scaleWidth));
    margin-bottom: calc(12 * var(--scaleWidth));
  }
}
.more-information-card .tabular-content-title + .tabular-content-container .table-main-body {
  margin-top: -10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .more-information-card .tabular-content-title + .tabular-content-container .table-main-body {
    margin-top: calc(-10 * var(--scaleWidth));
  }
}
.more-information-card .documents_list_reports {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .more-information-card .documents_list_reports {
    gap: calc(10 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .more-information-card .documents_list_reports {
    overflow: auto;
    padding-bottom: 0;
    margin-bottom: 10px;
  }
}
.more-information-card .documents_list_reports li {
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 768px) {
  .more-information-card .documents_list_reports li {
    min-width: 400px;
  }
}
.more-information-card .documents_list_reports li .docs_informations {
  display: flex;
  background-color: var(--more-information-card-reports-card-docsInformations-background-color);
  padding: var(--more-information-card-reports-card-docsInformations-padding);
  gap: 15px;
  position: relative;
  border-radius: var(--more-information-card-reports-card-docsInformations-borderRadius);
  align-items: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .more-information-card .documents_list_reports li .docs_informations {
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
    gap: calc(15 * var(--scaleWidth));
    border-radius: calc(12 * var(--scaleWidth));
  }
}
.more-information-card .documents_list_reports li .docs_informations .docs_type {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 12px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .more-information-card .documents_list_reports li .docs_informations .docs_type {
    gap: calc(12 * var(--scaleWidth));
  }
}
.more-information-card .documents_list_reports li .docs_informations .docs_type .name {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  line-height: 0;
}
.more-information-card .documents_list_reports li .docs_informations .docs_type .name img {
  max-width: 24px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .more-information-card .documents_list_reports li .docs_informations .docs_type .name img {
    max-width: calc(24 * var(--scaleWidth));
  }
}
.more-information-card .documents_list_reports li .docs_informations .docs_type .name .constl-icon {
  font-size: var(--more-information-card-reports-card-docsInformations-docsType-icon-fontSize, 24px);
  color: var(--more-information-card-reports-card-docsInformations-docsType-icon-color, #475467);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .more-information-card .documents_list_reports li .docs_informations .docs_type .name .constl-icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.more-information-card .documents_list_reports li .docs_informations .docs_type .size {
  font-size: var(--more-information-card-reports-card-docsInformations-docsType-fontSize);
  line-height: normal;
  color: var(--more-information-card-reports-card-docsInformations-docsType-color);
  font-weight: var(--more-information-card-reports-card-docsInformations-docsType-fontWeight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .more-information-card .documents_list_reports li .docs_informations .docs_type .size {
    font-size: calc(12 * var(--scaleWidth));
  }
}
.more-information-card .documents_list_reports li .docs_informations .docs_details {
  display: flex;
  flex-direction: column;
}
.more-information-card .documents_list_reports li .docs_informations .docs_details .docs_name {
  font-size: var(--more-information-card-reports-card-docsInformations-docsDetails-name-fontSize);
  color: var(--more-information-card-reports-card-docsInformations-docsDetails-name-color);
  font-weight: var(--more-information-card-reports-card-docsInformations-docsDetails-name-fontWeight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .more-information-card .documents_list_reports li .docs_informations .docs_details .docs_name {
    font-size: calc(12 * var(--scaleWidth));
  }
}
.more-information-card .documents_list_reports li .docs_informations .docs_details .docs_dscrp {
  font-size: var(--more-information-card-reports-card-docsInformations-docsDetails-description-fontSize);
  line-height: 18px;
  color: var(--more-information-card-reports-card-docsInformations-docsDetails-description-color);
  font-weight: var(--more-information-card-reports-card-docsInformations-docsDetails-description-fontWeight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .more-information-card .documents_list_reports li .docs_informations .docs_details .docs_dscrp {
    font-size: calc(12 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
  }
}
.more-information-card .documents_list_reports li .docs_informations .docs_details .docs_updated {
  font-size: var(--more-information-card-reports-card-docsInformations-docsDetails-updated-fontSize);
  line-height: 18px;
  color: var(--more-information-card-reports-card-docsInformations-docsDetails-updated-color);
  font-weight: var(--more-information-card-reports-card-docsInformations-docsDetails-updated-fontWeight);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .more-information-card .documents_list_reports li .docs_informations .docs_details .docs_updated {
    font-size: calc(12 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
  }
}
.more-information-card .documents_list_reports li .docs_informations .docs_details .docs_updated span {
  font-weight: 500;
}
.more-information-card .documents_list_reports li .docs_informations .buttons-group-inline {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-content: flex-start;
  line-height: 1;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .more-information-card .documents_list_reports li .docs_informations .buttons-group-inline {
    gap: calc(5 * var(--scaleWidth));
  }
}
.more-information-card .documents_list_reports li .docs_informations .buttons-group-inline .action-btn {
  display: inline-block;
  width: auto;
  vertical-align: top;
  border: 0;
  text-decoration: none;
  outline: none;
}

#Contacts .tabular-content-container > .row {
  gap: 10px 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  #Contacts .tabular-content-container > .row {
    gap: calc(10 * var(--scaleWidth)) 0;
  }
}

.tabular-content-container .dataTable {
  margin-top: 0 !important;
}

.orderListing-row .customer-dashboard {
  margin-bottom: 0 !important;
}
.orderListing-row .customer-dashboard .status-widget {
  min-height: 140px;
  height: 140px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderListing-row .customer-dashboard .status-widget {
    min-height: calc(140 * var(--scaleWidth));
    height: calc(140 * var(--scaleWidth));
  }
}
.orderListing-row .customer-dashboard .status-widget .status-details .title {
  bottom: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .orderListing-row .customer-dashboard .status-widget .status-details .title {
    bottom: calc(10 * var(--scaleWidth));
  }
}
.orderListing-row .customer-dashboard .status-widget.average .icon {
  background: color-mix(in srgb, white 76%, var(--order-widget-average-icon-color));
}
.orderListing-row .customer-dashboard .status-widget.average .icon .constl-icon {
  color: var(--order-widget-average-icon-color);
}
.orderListing-row .customer-dashboard .status-widget.average .status-details .value {
  color: var(--order-widget-average-icon-color);
}

.detailedEscalationMatrix-card {
  background-color: var(--detailedEscalationMatrix-card-background-color, #FFFFFF);
  box-shadow: var(--detailedEscalationMatrix-card-boxShadow, 0px 1px 20px 0px rgba(0, 0, 0, 0.1));
  padding: var(--detailedEscalationMatrix-card-padding, 20px 15px);
  height: var(--detailedEscalationMatrix-card-height, 100%);
  border-radius: var(--detailedEscalationMatrix-card-borderRadius, 12px);
  margin-bottom: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .detailedEscalationMatrix-card {
    padding-top: calc(15 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
    padding-left: calc(20 * var(--scaleWidth));
    padding-right: calc(20 * var(--scaleWidth));
    border-radius: calc(12 * var(--scaleWidth));
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
.detailedEscalationMatrix-card .heading {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--detailedEscalationMatrix-card-header-fontSize, 16px);
  line-height: var(--detailedEscalationMatrix-card-header-LineHeight, 24px);
  color: var(--detailedEscalationMatrix-card-header-color, #372194);
  border-bottom: var(--detailedEscalationMatrix-card-header-border-bottom, 1px solid #E4E7EC);
  padding-bottom: var(--detailedEscalationMatrix-card-header-padding-bottom, 10px);
  margin-bottom: var(--detailedEscalationMatrix-card-header-margin-bottom, 15px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .detailedEscalationMatrix-card .heading {
    font-size: calc(16 * var(--scaleWidth));
    line-height: calc(24 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
.detailedEscalationMatrix-card .form-group-view .label {
  font-size: var(--detailedEscalationMatrix-card-formGroupView-title-fontSize, 14px);
  line-height: var(--detailedEscalationMatrix-card-formGroupView-title-LineHeight, 20px);
  color: var(--detailedEscalationMatrix-card-formGroupView-title-color, #475467);
  font-weight: var(--detailedEscalationMatrix-card-formGroupView-title-fontWeight, 600);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .detailedEscalationMatrix-card .form-group-view .label {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
  }
}
.detailedEscalationMatrix-card .form-group-view .value {
  font-size: var(--detailedEscalationMatrix-card-formGroupView-value-fontSize, 14px);
  line-height: var(--detailedEscalationMatrix-card-formGroupView-value-LineHeight, 20px);
  color: var(--detailedEscalationMatrix-card-formGroupView-value-color, #475467);
  font-weight: var(--detailedEscalationMatrix-card-formGroupView-value-fontWeight, 400);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .detailedEscalationMatrix-card .form-group-view .value {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
  }
}
.detailedEscalationMatrix-card .form-group-view .customer-value {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  background-color: var(--detailedEscalationMatrix-card-formGroupView-customerValue-background-color, #F6F6F6);
  border: var(--detailedEscalationMatrix-card-formGroupView-customerValue-border, 1px solid #EAEAEA);
  height: 116px;
  overflow: hidden;
  overflow-y: auto;
  padding: var(--detailedEscalationMatrix-card-formGroupView-customerValue-padding, 10px);
  border-radius: var(--detailedEscalationMatrix-card-formGroupView-customerValue-borderRadius, 10px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .detailedEscalationMatrix-card .form-group-view .customer-value {
    height: calc(116 * var(--scaleWidth));
    padding: calc(10 * var(--scaleWidth));
    border-radius: calc(10 * var(--scaleWidth));
  }
}
.detailedEscalationMatrix-card .form-group-view .customer-value .tag {
  display: inline-block;
  width: auto;
  vertical-align: top;
  font-size: var(--detailedEscalationMatrix-card-formGroupView-customerValue-tag-fontSize, 14px);
  line-height: var(--detailedEscalationMatrix-card-formGroupView-customerValue-tag-lineHeight, 22px);
  color: var(--detailedEscalationMatrix-card-formGroupView-customerValue-tag-color, #475467);
  font-weight: var(--detailedEscalationMatrix-card-formGroupView-customerValue-tag-fontWeight, 400);
  background-color: var(--detailedEscalationMatrix-card-formGroupView-customerValue-tag-background-color, #DEDEDE);
  border-radius: var(--detailedEscalationMatrix-card-formGroupView-customerValue-tag-borderRadius, 4px);
  padding: var(--detailedEscalationMatrix-card-formGroupView-customerValue-tag-padding, 2px 15px);
  margin-bottom: var(--detailedEscalationMatrix-card-formGroupView-customerValue-tag-margin-bottom, 5px);
  margin: 0;
  margin-right: var(--detailedEscalationMatrix-card-formGroupView-customerValue-tag-margin-right, 5px);
  margin-bottom: var(--detailedEscalationMatrix-card-formGroupView-servicesValue-tag-margin-bottom, 5px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .detailedEscalationMatrix-card .form-group-view .customer-value .tag {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(22 * var(--scaleWidth));
    padding-top: calc(2 * var(--scaleWidth));
    padding-bottom: calc(2 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
    border-radius: calc(40 * var(--scaleWidth));
    margin-bottom: calc(5 * var(--scaleWidth));
    margin-right: calc(5 * var(--scaleWidth));
  }
}
.detailedEscalationMatrix-card .form-group-view .services-value {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  gap: 10px;
  background-color: var(--detailedEscalationMatrix-card-formGroupView-servicesValue-background-color, #F6F6F6);
  border: var(--detailedEscalationMatrix-card-formGroupView-servicesValue-border, 1px solid #EAEAEA);
  height: 116px;
  overflow: hidden;
  overflow-y: auto;
  padding: var(--detailedEscalationMatrix-card-formGroupView-servicesValue-padding, 10px);
  border-radius: var(--detailedEscalationMatrix-card-formGroupView-servicesValue-borderRadius, 10px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .detailedEscalationMatrix-card .form-group-view .services-value {
    gap: calc(10 * var(--scaleWidth));
    height: calc(116 * var(--scaleWidth));
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
    border-radius: calc(10 * var(--scaleWidth));
  }
}
.detailedEscalationMatrix-card .form-group-view .services-value .tag {
  display: inline-block;
  width: auto;
  vertical-align: top;
  font-size: var(--detailedEscalationMatrix-card-formGroupView-servicesValue-tag-fontSize, 14px);
  line-height: var(--detailedEscalationMatrix-card-formGroupView-servicesValue-tag-lineHeight, 22px);
  color: var(--detailedEscalationMatrix-card-formGroupView-servicesValue-tag-color, #475467);
  font-weight: var(--detailedEscalationMatrix-card-formGroupView-servicesValue-tag-fontWeight, 400);
  background-color: var(--detailedEscalationMatrix-card-formGroupView-servicesValue-tag-background-color, #ffffff);
  border-radius: var(--detailedEscalationMatrix-card-formGroupView-servicesValue-tag-borderRadius, 4px);
  padding: var(--detailedEscalationMatrix-card-formGroupView-servicesValue-tag-padding, 2px 15px);
  margin-bottom: var(--detailedEscalationMatrix-card-formGroupView-servicesValue-tag-margin-bottom, 5px);
  margin-right: var(--detailedEscalationMatrix-card-formGroupView-servicesValue-tag-margin-right, 5px);
  border: var(--detailedEscalationMatrix-card-formGroupView-servicesValue-tag-border, 1px solid #D1D1D1);
  font-weight: var(--detailedEscalationMatrix-card-formGroupView-servicesValue-tag-fontWeight, 400);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .detailedEscalationMatrix-card .form-group-view .services-value .tag {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(22 * var(--scaleWidth));
    border-radius: calc(4 * var(--scaleWidth));
    padding-top: calc(2 * var(--scaleWidth));
    padding-bottom: calc(2 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
    margin-bottom: calc(5 * var(--scaleWidth));
    margin-right: calc(5 * var(--scaleWidth));
  }
}

.segments-levels-card {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
.segments-levels-card .segments-levels-card-heading {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--segments-levels-card-heading-fontSize, 16px);
  line-height: 100%;
  color: var(--segments-levels-card-heading-color, #475467);
  font-weight: var(--segments-levels-card-heading-fontWeight, 600);
  text-transform: capitalize;
  margin-bottom: var(--segments-levels-card-heading-margin-bottom, 15px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .segments-levels-card .segments-levels-card-heading {
    font-size: calc(16 * var(--scaleWidth));
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}

.segments-card {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  border: var(--segments-card-border, 1px solid #A7CAFF);
  background-color: var(--segments-card-background-color, color-mix(in srgb, #372194, white 90%));
  padding: var(--segments-card-padding, 10px);
  border-radius: var(--segments-card-border-radius, 8px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .segments-card {
    padding: calc(10 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.segments-card .segments-card-heading {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--segments-card-heading-fontSize, 14px);
  line-height: var(--segments-card-heading-lineHeight, 20px);
  color: var(--segments-card-heading-color, #475467);
  font-weight: var(--segments-card-heading-fontWeight, 500);
  margin-bottom: var(--segments-card-heading-margin-bottom, 15px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .segments-card .segments-card-heading {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
.segments-card .status-level-card {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  background-color: var(--status-level-card-background-color, #ffffff);
  padding: var(--status-level-card-padding, 15px);
  border: var(--status-level-card-border, 1px solid #EAEAEA);
  border-radius: var(--status-level-card-border-radius, 8px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .segments-card .status-level-card {
    padding: calc(15 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.segments-card .status-level-card .status-level-header {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: var(--status-level-card-header-margin-bottom, 15px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .segments-card .status-level-card .status-level-header {
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
.segments-card .status-level-card .status-level-header .right-side-status {
  font-weight: 700;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: 0%;
  color: var(--segments-levels-card-heading-color, #475467);
  display: inline-block;
  width: auto;
  vertical-align: top;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .segments-card .status-level-card .status-level-header .right-side-status {
    font-size: calc(16 * var(--scaleWidth));
    line-height: calc(18 * var(--scaleWidth));
  }
}
.segments-card .status-level-card .status-level-header .level-status {
  display: inline-block;
  width: auto;
  vertical-align: top;
  padding: var(--status-level-card-header-level-status-padding, 4px 15px);
  background-color: var(--status-level-card-header-level-status-background-color, #000);
  color: var(--status-level-card-header-level-status-color, #ffffff);
  border-radius: var(--status-level-card-header-level-status-borderRadius, 6px);
  font-weight: var(--status-level-card-header-level-status-fontWeight, 500);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .segments-card .status-level-card .status-level-header .level-status {
    padding-top: calc(4 * var(--scaleWidth));
    padding-bottom: calc(4 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
    border-radius: calc(6 * var(--scaleWidth));
  }
}
.segments-card .status-level-card .status-level-header .level-status.l1 {
  background-color: var(--status-level-card-header-level-status-level1-color, #079452);
}
.segments-card .status-level-card .status-level-header .level-status.l2 {
  background-color: var(--status-level-card-header-level-status-level2-color, #eaee0b);
}
.segments-card .status-level-card .status-level-header .level-status.l3 {
  background-color: var(--status-level-card-header-level-status-level3-color, #EC5F08);
}
.segments-card .status-level-card .status-level-header .level-status.l4 {
  background-color: var(--status-level-card-header-level-status-level4-color, #CB190C);
}
.segments-card .status-level-card .status-level-body {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  background-color: var(--status-level-card-body-background-color, #FFFFFF);
  padding: var(--status-level-card-body-padding, 15px);
  box-shadow: var(--status-level-card-body-box-shadow, 0px 0px 8px 0px rgba(0, 0, 0, 0.1019607843));
  border: var(--status-level-card-body-border, 1px solid #E4E6E8);
  border-radius: var(--status-level-card-body-borderRadius, 8px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .segments-card .status-level-card .status-level-body {
    padding-top: calc(15 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.segments-card .status-level-card .status-level-body .group-header {
  font-size: var(--status-level-card-body-groupHeader-fontSize, 16px);
  line-height: var(--status-level-card-body-groupHeader-lineHeight, 100%);
  color: var(--status-level-card-body-groupHeader-color, #475467);
  font-weight: var(--status-level-card-body-groupHeader-fontWeight, 600);
  display: inline-block;
  width: 100%;
  vertical-align: top;
  margin-bottom: var(--status-level-card-body-groupHeader-margin-bottom, 15px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .segments-card .status-level-card .status-level-body .group-header {
    font-size: calc(16 * var(--scaleWidth));
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
.segments-card .status-level-card .status-level-body .group-content {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
.segments-card .status-level-card .status-level-body .group-content .form-group-view {
  gap: var(--status-level-card-body-groupContent-formGroupView-gap, 4px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .segments-card .status-level-card .status-level-body .group-content .form-group-view {
    gap: calc(4 * var(--scaleWidth));
  }
}
.segments-card .status-level-card .status-level-body .group-content .form-group-view .label {
  font-size: var(--status-level-card-body-groupContent-formGroupView-label-fontSize, 14px);
  line-height: var(--status-level-card-body-groupContent-formGroupView-label-lineHeight, 19px);
  color: var(--status-level-card-body-groupContent-formGroupView-label-color, #475467);
  font-weight: var(--status-level-card-body-groupContent-formGroupView-label-fontWeight, 600);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .segments-card .status-level-card .status-level-body .group-content .form-group-view .label {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(19 * var(--scaleWidth));
  }
}
.segments-card .status-level-card .status-level-body .group-content .form-group-view .value {
  font-size: var(--status-level-card-body-groupContent-formGroupView-value-fontSize, 14px);
  line-height: var(--status-level-card-body-groupContent-formGroupView-value-lineHeight, 19px);
  color: var(--status-level-card-body-groupContent-formGroupView-value-color, #475467);
  font-weight: var(--status-level-card-body-groupContent-formGroupView-value-fontWeight, 400);
}
.segments-card .status-level-card .status-level-body .group-content .form-group-view .value a {
  color: var(--status-level-card-body-groupContent-formGroupView-value-color, #475467) !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .segments-card .status-level-card .status-level-body .group-content .form-group-view .value {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(19 * var(--scaleWidth));
  }
}
.segments-card .buttons-group {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .segments-card .buttons-group {
    gap: calc(8 * var(--scaleWidth));
  }
}

@media (min-width: 1401px) {
  .addNew-row .col-md-3 {
    flex: 1;
  }
}

.segments-levels-card .segments-levels-card-heading {
  min-height: 38px;
  display: flex;
  align-items: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .segments-levels-card .segments-levels-card-heading {
    min-height: calc(38 * var(--scaleWidth));
  }
}
@media (max-width: 768px) {
  .segments-levels-card .segments-levels-card-heading {
    min-height: auto;
  }
}

.confirmation-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.confirmation-detail .title {
  font-size: var(--confirmation-detail-title-fontSize, 16px);
  line-height: var(--confirmation-detail-title-lineHeight, 20px);
  font-weight: var(--confirmation-detail-title-fontWeight, 600);
  color: var(--confirmation-detail-title-color, #000000);
}
.confirmation-detail .description {
  font-size: var(--confirmation-detail-description-fontSize, 14px);
  line-height: var(--confirmation-detail-description-lineHeight, 20px);
  color: var(--confirmation-detail-description-color, #414141);
}
.confirmation-detail .buttons-groups {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 10px;
}

.request-edit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--request-edit-button-padding, 12px 16px);
  background-color: var(--request-edit-button-background-color, #F58220);
  border: var(--request-edit-button-border, 1px solid #ffffff);
  box-shadow: var(--request-edit-button-boxShadow, 0px 0px 15px 0px rgba(0, 0, 0, 0.1490196078));
  font-size: var(--request-edit-button-fontSize, 16px);
  line-height: var(--request-edit-button-lineHeight, 100%);
  color: var(--request-edit-button-color, #FFFFFF);
  text-transform: capitalize;
  gap: 10px;
  width: 50px;
  height: 50px;
  border-radius: 100px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .request-edit-button {
    padding-top: calc(12 * var(--scaleWidth));
    padding-bottom: calc(12 * var(--scaleWidth));
    padding-left: calc(16 * var(--scaleWidth));
    padding-right: calc(16 * var(--scaleWidth));
    font-size: calc(16 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
    width: calc(50 * var(--scaleWidth));
    height: calc(50 * var(--scaleWidth));
  }
}
.request-edit-button .icon {
  font-size: var(--request-edit-button-icon-fontSize, 24px);
  line-height: 100%;
  color: var(--request-edit-button-icon-color, #ffffff);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .request-edit-button .icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.request-edit-button .icon + span {
  display: none;
}
@media (max-width: 768px) {
  .request-edit-button .icon + span {
    display: none;
  }
}

.request-edit-access-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--request-edit-access-button-padding, 12px 16px);
  background-color: var(--request-edit-access-button-background-color, #14B268);
  border: var(--request-edit-access-button-border, 1px solid #ffffff);
  box-shadow: var(--request-edit-access-button-boxShadow, 0px 0px 15px 0px rgba(0, 0, 0, 0.1490196078));
  font-size: var(--request-edit-access-button-fontSize, 16px);
  line-height: var(--request-edit-access-button-lineHeight, 100%);
  color: var(--request-edit-access-button-color, #FFFFFF);
  text-transform: capitalize;
  gap: 10px;
  width: 50px;
  height: 50px;
  border-radius: 100px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .request-edit-access-button {
    padding-top: calc(12 * var(--scaleWidth));
    padding-bottom: calc(12 * var(--scaleWidth));
    padding-left: calc(16 * var(--scaleWidth));
    padding-right: calc(16 * var(--scaleWidth));
    font-size: calc(16 * var(--scaleWidth));
    gap: calc(10 * var(--scaleWidth));
    width: calc(50 * var(--scaleWidth));
    height: calc(50 * var(--scaleWidth));
  }
}
.request-edit-access-button .icon {
  font-size: var(--request-edit-access-button-icon-fontSize, 24px);
  line-height: 100%;
  color: var(--request-edit-access-button-icon-color, #ffffff);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .request-edit-access-button .icon {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.request-edit-access-button .icon + span {
  display: none;
}
@media (max-width: 768px) {
  .request-edit-access-button .icon + span {
    display: none;
  }
}

.request-edit-access-dailog .modal-header {
  padding: var(--request-edit-access-dailog-header-padding, 15px 20px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .request-edit-access-dailog .modal-header {
    padding-top: calc(15 * var(--scaleWidth));
    padding-bottom: calc(15 * var(--scaleWidth));
    padding-left: calc(20 * var(--scaleWidth));
    padding-right: calc(20 * var(--scaleWidth));
  }
}
.request-edit-access-dailog .modal-body {
  padding: var(--request-edit-access-dailog-body-padding, 0 20px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .request-edit-access-dailog .modal-body {
    padding-left: calc(20 * var(--scaleWidth));
    padding-right: calc(20 * var(--scaleWidth));
  }
}
.request-edit-access-dailog .modal-body .Request-edit-access {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
.request-edit-access-dailog .modal-body .Request-edit-access .description {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--request-edit-access-dailog-description-fontSize, 14px);
  line-height: var(--request-edit-access-dailog-description-lineHeight, 20px);
  color: var(--request-edit-access-dailog-description-color, #475467);
  margin-bottom: var(--request-edit-access-dailog-description-margin-bottom, 10px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .request-edit-access-dailog .modal-body .Request-edit-access .description {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
    margin-bottom: calc(10 * var(--scaleWidth));
  }
}
.request-edit-access-dailog .modal-body .Request-edit-access .information {
  display: flex;
  align-items: center;
  gap: 4px;
  background: color-mix(in srgb, white 85%, var(--request-edit-access-dailog-color, #372194));
  border: 1px solid var(--request-edit-access-dailog-color, #372194);
  font-size: var(--request-edit-access-dailog-fontSize, 16px);
  line-height: var(--request-edit-access-dailog-lineHeight, 100%);
  color: var(--request-edit-access-dailog-color, #372194);
  padding: var(--request-edit-access-dailog-padding, 8px 10px);
  border-radius: var(--request-edit-access-dailog-borderRadius, 4px);
  margin-bottom: var(--request-edit-access-dailog-margin-bottom, 15px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .request-edit-access-dailog .modal-body .Request-edit-access .information {
    gap: calc(4 * var(--scaleWidth));
    font-size: calc(16 * var(--scaleWidth));
    padding-top: calc(8 * var(--scaleWidth));
    padding-bottom: calc(8 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
    border-radius: calc(4 * var(--scaleWidth));
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
.request-edit-access-dailog .modal-body .Request-edit-access .information .icon {
  font-size: var(--request-edit-access-dailog-fontSize, 16px);
  color: var(--request-edit-access-dailog-color, #372194);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .request-edit-access-dailog .modal-body .Request-edit-access .information .icon {
    font-size: calc(16 * var(--scaleWidth));
  }
}
.request-edit-access-dailog .row {
  margin: 0 -5px;
}
.request-edit-access-dailog .row > * {
  padding: 0 5px;
}
.request-edit-access-dailog .duration-cst-radio-row {
  display: flex;
  align-items: center;
  gap: 6;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .request-edit-access-dailog .duration-cst-radio-row {
    gap: calc(6 * var(--scaleWidth));
  }
}
.request-edit-access-dailog .duration-cst-radio-row .radio-btn {
  flex: 1;
  margin: 0 2px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .request-edit-access-dailog .duration-cst-radio-row .radio-btn {
    margin: 0 calc(2 * var(--scaleWidth));
  }
}
.request-edit-access-dailog .duration-cst-radio-row .radio-btn .custom-control-label {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  margin-bottom: 0;
  background: var(--request-edit-access-dailog-duration-background, #707070);
  color: var(--request-edit-access-dailog-duration-color, #ffffff);
  font-size: var(--request-edit-access-dailog-duration-fontSize, 14px);
  font-weight: var(--request-edit-access-dailog-duration-fontWeight, 500);
  line-height: var(--request-edit-access-dailog-duration-lineHeight, 20px);
  border: var(--request-edit-access-dailog-duration-border, 1px solid #707070);
  border-radius: var(--request-edit-access-dailog-duration-borderRadius, 8px);
  text-align: center;
  padding: var(--request-edit-access-dailog-duration-padding, 4px 10px);
  cursor: pointer;
}
.request-edit-access-dailog .duration-cst-radio-row .radio-btn .custom-control-label::after, .request-edit-access-dailog .duration-cst-radio-row .radio-btn .custom-control-label::before {
  display: none;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .request-edit-access-dailog .duration-cst-radio-row .radio-btn .custom-control-label {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
    padding-top: calc(4 * var(--scaleWidth));
    padding-bottom: calc(4 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
  }
}
.request-edit-access-dailog .duration-cst-radio-row .radio-btn .custom-control-input:checked + .custom-control-label {
  background: var(--request-edit-access-dailog-duration-selected-background, #372194);
  color: var(--request-edit-access-dailog-duration-selected-color, #ffffff);
  border-color: var(--request-edit-access-dailog-duration-selected-borderColor, #372194);
}
.request-edit-access-dailog textarea {
  min-height: 93px;
  cursor: inherit;
}
.request-edit-access-dailog .close-btn {
  gap: 8px;
  background: var(--request-edit-access-dailog-closeButton-background-color, transparent);
  border: var(--request-edit-access-dailog-closeButton-border, 1px solid #372194);
  color: var(--request-edit-access-dailog-closeButton-color, #372194);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .request-edit-access-dailog .close-btn {
    gap: calc(8 * var(--scaleWidth));
  }
}
.request-edit-access-dailog .close-btn:hover {
  background: var(--request-edit-access-dailog-closeButton-hover-background-color, #372194);
  color: var(--request-edit-access-dailog-closeButton-hover-color, #ffffff);
}
.request-edit-access-dailog .submit-btn {
  gap: 8px;
  background: var(--request-edit-access-dailog-submitButton-background-color, #372194);
  color: var(--request-edit-access-dailog-submitButton-color, #FFFFFF);
  border: 1px solid var(--request-edit-access-dailog-submitButton-border-color, #372194);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .request-edit-access-dailog .submit-btn {
    gap: calc(8 * var(--scaleWidth));
  }
}
.request-edit-access-dailog .submit-btn:hover {
  background-color: var(--request-edit-access-dailog-submitButton-hover-background-color, #372194);
}

.confirmation-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  text-align: center;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .confirmation-box {
    gap: calc(5 * var(--scaleWidth));
  }
}
.confirmation-box .icon > * {
  color: var(--confirmation-dailog-icon-color, #40BF80);
  font-size: var(--confirmation-dailog-icon-fontSize, 50px);
  line-height: 100%;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .confirmation-box .icon > * {
    font-size: calc(50 * var(--scaleWidth));
  }
}
.confirmation-box .text {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  text-transform: capitalize;
  font-size: var(--confirmation-dailog-text-fontSize, 16px);
  font-weight: var(--confirmation-dailog-text-fontWeight, 500);
  color: var(--confirmation-dailog-text-color, #475467);
  margin-bottom: var(--confirmation-dailog-text-margin-bottom, 0);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .confirmation-box .text {
    font-size: calc(16 * var(--scaleWidth));
  }
}

.request-access-confirmation .modal-body {
  padding-bottom: 50px !important;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .request-access-confirmation .modal-body {
    padding-bottom: calc(50 * var(--scaleWidth)) !important;
  }
}

.verification-access-dailog .verification-access-block {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  text-align: center;
}
.verification-access-dailog .verification-access-block .description {
  font-size: var(--verification-access-dailog-description-fontSize, 14px);
  line-height: var(--verification-access-dailog-description-lineHeight, 100%);
  color: var(--verification-access-dailog-description-color, #475467);
  font-weight: var(--verification-access-dailog-description-fontWeight, 400);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .verification-access-dailog .verification-access-block .description {
    font-size: calc(14 * var(--scaleWidth));
  }
}
.verification-access-dailog .verification-access-block .verification-code-wrap Ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  gap: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .verification-access-dailog .verification-access-block .verification-code-wrap Ul {
    gap: calc(15 * var(--scaleWidth));
  }
}
.verification-access-dailog .verification-access-block .verification-code-wrap Ul Li .verification-input {
  width: var(--verification-access-dailog-input-dimension, 35px);
  height: var(--verification-access-dailog-input-dimension, 35px);
  background-color: var(--verification-access-dailog-input-background-color, #fff);
  border: var(--verification-access-dailog-input-border, 1px solid #707070);
  outline: none;
  box-shadow: none;
  font-size: var(--verification-access-dailog-input-font-size, 16px);
  color: var(--verification-access-dailog-input-color, #000000);
  text-align: center;
  border-radius: var(--verification-access-dailog-input-border-radius, 4px);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .verification-access-dailog .verification-access-block .verification-code-wrap Ul Li .verification-input {
    width: calc(35 * var(--scaleWidth));
    height: calc(35 * var(--scaleWidth));
    font-size: calc(16 * var(--scaleWidth));
    border-radius: calc(4 * var(--scaleWidth));
  }
}
.verification-access-dailog .verification-access-block .email-verification-details {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: var(--verification-access-dailog-fontSize, 12px);
  line-height: var(--verification-access-dailog-lineHeight, 100%);
  font-weight: var(--verification-access-dailog-fontWeight, 400);
  color: var(--verification-access-dailog-color, #475467);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .verification-access-dailog .verification-access-block .email-verification-details {
    font-size: calc(12 * var(--scaleWidth));
  }
}

.revoke-activate {
  display: inline-block;
  width: auto;
  vertical-align: top;
  color: var(--request-access-listing-actionLink-active-color, #F04438);
  font-weight: var(--request-access-listing-actionLink-fontWeight, 500);
  font-size: var(--request-access-listing-actionLink-fontSize, 14px);
  line-height: var(--request-access-listing-actionLink-lineHeight, 22px);
  letter-spacing: 0%;
  text-decoration: none;
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .revoke-activate {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(22 * var(--scaleWidth));
  }
}

.revoke-deactivate {
  display: inline-block;
  width: auto;
  vertical-align: top;
  color: var(--request-access-listing-actionLink-deactivate-color, #707070);
  font-weight: var(--request-access-listing-actionLink-fontWeight, 500);
  font-size: var(--request-access-listing-actionLink-fontSize, 14px);
  line-height: var(--request-access-listing-actionLink-lineHeight, 22px);
  letter-spacing: 0%;
  text-decoration: none;
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .revoke-deactivate {
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(22 * var(--scaleWidth));
  }
}

.revoked-status-active {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  text-decoration: none;
  color: var(--request-access-listing-revoked-status-active-color, #F04438) !important;
  font-size: var(--request-access-listing-revoked-status-fontSize, 14px);
  font-weight: var(--request-access-listing-revoked-status-fontWeight, 500);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .revoked-status-active {
    font-size: calc(14 * var(--scaleWidth));
  }
}

.revoked-status-deactivate {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  text-decoration: none;
  color: var(--request-access-listing-revoked-status-deactivate-color, #707070) !important;
  font-size: var(--request-access-listing-revoked-status-fontSize, 14px);
  font-weight: var(--request-access-listing-revoked-status-fontWeight, 500);
  text-transform: capitalize;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .revoked-status-deactivate {
    font-size: calc(14 * var(--scaleWidth));
  }
}

.widget-sidebar {
  width: 320px;
  height: calc(100% - 82px);
  box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.1019607843);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), linear-gradient(0deg, var(--Shade-75, rgba(255, 255, 255, 0.75)), var(--Shade-75, rgba(255, 255, 255, 0.75)));
  padding: 15px 15px 32px 15px;
  overflow-y: auto;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .widget-sidebar {
    padding-top: calc(15 * var(--scaleWidth));
    padding-bottom: calc(32 * var(--scaleWidth));
    padding-left: calc(15 * var(--scaleWidth));
    padding-right: calc(15 * var(--scaleWidth));
    width: calc(320 * var(--scaleWidth));
    height: calc(100% - 82 * var(--scaleWidth));
  }
}
.widget-sidebar .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .widget-sidebar .title {
    margin-bottom: calc(10 * var(--scaleWidth));
    font-size: calc(16 * var(--scaleWidth));
  }
}
.widget-sidebar .widget-card {
  background: #ffffff;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
  padding: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .widget-sidebar .widget-card {
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
  }
}
.widget-sidebar .widget-card + .widget-card {
  margin-top: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .widget-sidebar .widget-card + .widget-card {
    margin-top: calc(10 * var(--scaleWidth));
  }
}
.widget-sidebar .widget-card .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .widget-sidebar .widget-card .icon {
    width: calc(40 * var(--scaleWidth));
    height: calc(40 * var(--scaleWidth));
    min-width: calc(40 * var(--scaleWidth));
    border-radius: calc(5 * var(--scaleWidth));
  }
}
.widget-sidebar .widget-card.active {
  background: rgba(112, 112, 112, 0.4117647059);
}
.widget-sidebar .widget-card.active-services .icon {
  background: #eaeefc;
  border: 1px solid #2E51DD;
  color: #2E51DD;
}
.widget-sidebar .widget-card.open-tickets .icon {
  background: #fff0e7;
  border: 1px solid #FC670A;
  color: #FC670A;
}
.widget-sidebar .widget-card.total-orders .icon {
  background: #e8f7f0;
  border: 1px solid #14B268;
  color: #14B268;
}
.widget-sidebar .widget-card.invoices-kpi .icon {
  background: #f3e9ff;
  border: 1px solid #861FFF;
  color: #861FFF;
}
.widget-sidebar .widget-card.service-map .icon {
  background: #ebe9f4;
  border: 1px solid #372194;
  color: #372194;
}
.widget-sidebar .widget-card.team-members .icon {
  background: #e6f7eb;
  border: 1px solid #08B233;
  color: #08B233;
}
.widget-sidebar .widget-card.scheduled-maintenance .icon {
  background: #f7e6e6;
  border: 1px solid #AE0909;
  color: #AE0909;
}
.widget-sidebar .widget-card.watch-list .icon {
  background: #e6f8fb;
  border: 1px solid #06B6D4;
  color: #06B6D4;
}
.widget-sidebar .widget-card .widget-header {
  display: flex;
  align-items: center;
  gap: 5px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .widget-sidebar .widget-card .widget-header {
    gap: calc(5 * var(--scaleWidth));
  }
}
.widget-sidebar .widget-card .widget-content {
  margin-top: 5px;
  margin-left: 45px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .widget-sidebar .widget-card .widget-content {
    margin-top: calc(5 * var(--scaleWidth));
    margin-left: calc(45 * var(--scaleWidth));
  }
}
.widget-sidebar .widget-card .widget-content .custom-checkbox .custom-control-label {
  padding-left: 22px;
  font-size: 14px;
  line-height: 20px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .widget-sidebar .widget-card .widget-content .custom-checkbox .custom-control-label {
    padding-left: calc(22 * var(--scaleWidth));
    font-size: calc(14 * var(--scaleWidth));
    line-height: calc(20 * var(--scaleWidth));
  }
}
.widget-sidebar .widget-card .widget-content .custom-checkbox .custom-control-label::before, .widget-sidebar .widget-card .widget-content .custom-checkbox .custom-control-label::after {
  width: 16px;
  height: 16px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .widget-sidebar .widget-card .widget-content .custom-checkbox .custom-control-label::before, .widget-sidebar .widget-card .widget-content .custom-checkbox .custom-control-label::after {
    width: calc(16 * var(--scaleWidth));
    height: calc(16 * var(--scaleWidth));
  }
}
.widget-sidebar .customization-info {
  background: #EFF6FF;
  border: 1px solid #B5D5FF;
  border-radius: 8px;
  padding: 10px;
  margin-top: 50px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .widget-sidebar .customization-info {
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
    border-radius: calc(8 * var(--scaleWidth));
    margin-top: calc(50 * var(--scaleWidth));
  }
}
.widget-sidebar .customization-info .heading {
  font-size: 14px;
  color: #000;
  font-weight: 500;
  line-height: 100%;
  margin-bottom: 10px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .widget-sidebar .customization-info .heading {
    font-size: calc(14 * var(--scaleWidth));
    margin-bottom: calc(10 * var(--scaleWidth));
  }
}
.widget-sidebar .customization-info ul {
  padding-left: 20px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .widget-sidebar .customization-info ul {
    padding-left: calc(20 * var(--scaleWidth));
  }
}
.widget-sidebar .customization-info ul li {
  font-size: 12px;
  color: #475467;
  line-height: 100%;
  margin-bottom: 15px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .widget-sidebar .customization-info ul li {
    font-size: calc(12 * var(--scaleWidth));
    margin-bottom: calc(15 * var(--scaleWidth));
  }
}
.widget-sidebar .buttons-groups {
  display: flex;
  justify-content: right;
  gap: 15px;
  margin-top: 52px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .widget-sidebar .buttons-groups {
    gap: calc(15 * var(--scaleWidth));
    margin-top: calc(52 * var(--scaleWidth));
  }
}

.power-bi-dashboard .report-container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
}
.power-bi-dashboard .report-container .report-body {
  height: 100%;
  width: 100%;
  border: 1px solid #9a9a9a;
}
.power-bi-dashboard .report-container .report-body iframe {
  border: 0;
}

.page-title-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: var(--page-title-wrap-margin, 10px 0 20px 0);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .page-title-wrap {
    margin: calc(10 * var(--scaleWidth)) 0 calc(20 * var(--scaleWidth)) 0;
  }
}
@media (max-width: 1024px) {
  .page-title-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--font-size-normal);
    margin-top: 0 !important;
  }
}
.page-title-wrap .page-title {
  margin: 0;
  font-size: var(--page-title-fontSize, 24px);
  line-height: normal;
  color: var(--page-title-color, #475467);
  font-weight: var(--page-title-fontWeight, 600);
  width: auto;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .page-title-wrap .page-title {
    font-size: calc(24 * var(--scaleWidth));
  }
}
.page-title-wrap .breadcrumb {
  display: inline-block;
  width: auto;
  vertical-align: top;
  padding: 0;
  margin: 0;
  background: none;
}
.page-title-wrap .breadcrumb > ul {
  display: flex;
  align-items: center;
  margin: 0 -10px 0 -8px;
  padding: 0;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .page-title-wrap .breadcrumb > ul {
    margin: 0 calc(-10 * var(--scaleWidth)) 0 calc(-8 * var(--scaleWidth));
  }
}
.page-title-wrap .breadcrumb > ul > li {
  list-style: none;
  color: var(--page-title-wrap-breadcrumb-color, #707070);
  font-size: var(--page-title-wrap-breadcrumb-fontSize, 14px);
  font-weight: var(--page-title-wrap-breadcrumb-fontWeight, 400);
  padding-right: 10px;
  padding-left: 8px;
  position: relative;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .page-title-wrap .breadcrumb > ul > li {
    font-size: calc(14 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
    padding-left: calc(8 * var(--scaleWidth));
  }
}
.page-title-wrap .breadcrumb > ul > li > a {
  display: inline-block;
  width: auto;
  vertical-align: top;
  color: var(--page-title-wrap-breadcrumb-clickable-color, #707070);
  font-weight: var(--page-title-wrap-breadcrumb-clickable-fontWeight, 600);
  text-decoration: none;
  margin-right: 18px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .page-title-wrap .breadcrumb > ul > li > a {
    margin-right: calc(18 * var(--scaleWidth));
  }
}
.page-title-wrap .breadcrumb > ul > li:after {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  background-image: url("../../krypton-theme-css/assets/icons/breadcum_arrow_icon.png");
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .page-title-wrap .breadcrumb > ul > li:after {
    width: calc(20 * var(--scaleWidth));
    height: calc(20 * var(--scaleWidth));
    background-size: calc(20 * var(--scaleWidth));
  }
}
.page-title-wrap .breadcrumb > ul > li:last-child::after {
  display: none;
}

.disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
  cursor: not-allowed;
}

button.disabled, button[disabled], button[aria-disabled=true],
a.disabled,
a[disabled],
a[aria-disabled=true] {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
}

.modal-open .header {
  z-index: 1020;
}
.modal-open .left-sidebar {
  z-index: 1020;
}

#confirtmationModel .modal-body {
  max-height: 300px;
}

body.open-sidebar {
  overflow: hidden;
}

a {
  color: var(--color-primary-mode);
}

.label {
  border: 0;
  padding: 0;
  margin: 0;
}

/* WebKit Scrollbar */
::-webkit-scrollbar {
  width: var(--custom-scrollbar-width);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  ::-webkit-scrollbar {
    width: calc(10 * var(--scaleWidth));
  }
}

::-webkit-scrollbar-track {
  background: var(--custom-scrollbar-track-background-color);
}

::-webkit-scrollbar-thumb {
  background: var(--custom-scrollbar-thumb-background-color);
  border-radius: 10px;
  width: var(--custom-scrollbar-thumb-width);
  border: 2px solid transparent;
  background-clip: content-box;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  ::-webkit-scrollbar-thumb {
    border-radius: calc(10 * var(--scaleWidth));
    width: calc(10 * var(--scaleWidth));
    border-width: calc(2 * var(--scaleWidth));
  }
}

::-webkit-scrollbar-thumb:hover {
  background: var(--custom-scrollbar-thumb-background-color);
  border-radius: 10px;
  width: var(--custom-scrollbar-thumb-width);
  border: 2px solid transparent;
  background-clip: content-box;
}
@media (min-width: 1199px) and (max-width: 1400px) {
  ::-webkit-scrollbar-thumb:hover {
    border-radius: calc(10 * var(--scaleWidth));
    width: calc(10 * var(--scaleWidth));
    border-width: calc(2 * var(--scaleWidth));
  }
}

.noRecordFound {
  font-size: var(--noRecordFound-fontSize, 16px);
  line-height: 110%;
  color: var(--noRecordFound-color, #475467);
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: var(--noRecordFound-padding, 10px);
  background: var(--noRecordFound-background-color, transparent);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .noRecordFound {
    font-size: calc(18 * var(--scaleWidth));
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
  }
}

.loading-text {
  font-size: var(--noRecordFound-fontSize, 16px);
  line-height: 110%;
  color: var(--noRecordFound-color, #475467);
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: var(--noRecordFound-padding, 10px);
  background: var(--noRecordFound-background-color, transparent);
}
@media (min-width: 1199px) and (max-width: 1400px) {
  .loading-text {
    font-size: calc(18 * var(--scaleWidth));
    padding-top: calc(10 * var(--scaleWidth));
    padding-bottom: calc(10 * var(--scaleWidth));
    padding-left: calc(10 * var(--scaleWidth));
    padding-right: calc(10 * var(--scaleWidth));
  }
}

.highcharts-pie-series > span > div {
  justify-content: flex-start !important;
}

.hidden {
  display: none !important;
}

@media (min-width: 1199px) and (max-width: 1400px) {
  .alert-info,
  .portlet-msg-help,
  .portlet-msg-info,
  .portlet-msg-progress {
    padding: calc(12 * var(--scaleWidth)) calc(20 * var(--scaleWidth));
    font-size: calc(16 * var(--scaleWidth));
  }
}

#wrapper .portlet {
  margin-bottom: 0 !important;
}

.theme-dark .hamburger .bar {
  color: #fff !important;
}

a[href^="tel:"]:hover, a[href^="mailto:"]:hover {
  text-decoration: underline !important;
}

html:not(#__):not(#___) .cadmin.affix,
html:not(#__):not(#___) .cadmin.control-menu-container {
  z-index: 99999 !important;
}

html:not(#__):not(#___) .cadmin .modal, html:not(#__):not(#___) .cadmin.modal {
  z-index: 9999989 !important;
}

/*# sourceMappingURL=main.css.map */
/*# sourceMappingURL=main.css.map */