/*
    CSS Uses Mobile First Media Queries
    Styles are overwritten in global-responsive.css for tablet and mobile
*/

@import url("./color.css");
@import url("./font.css");

/* ==========================================================================

	               Typography Styles (typography.component)

============================================================================= */

* {
    border-collapse: collapse;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    color: var(--slate)
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

.dx-widget,
.dx-field,
.dx-field input,
.dx-field textarea,
.dx-list-item-content,
.dx-menu-base,
.dx-overlay-wrapper,
.dx-widget input,
.icon-subscript,
.dx-overlay-wrapper input {
    font-family: Arial, Helvetica, sans-serif;
}

.navbar,
.navbar-search-options-wrapper,
.navbar .dx-widget input,
.breadcrumb-wrapper,
.dx-accordion-item-title,
.navbar .dx-widget,
.navbar-search-options-wrapper .dx-widget {
    font-family: 'SemplicitaPro';
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.group-heading,
.page-header-ko,
.dx-popup-title,
.dx-fieldset-header,
.fieldset-header,
.dx-form-group-caption {
    font-family: 'SemplicitaPro';
    line-height: normal;
    font-weight: bold;
}

.minimum-text, .footnote {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}

h1 {
    font-size: 30px;
}

h2 {
    font-size: 24px;
}

h3,
.text-xl {
    font-size: 20px;
}

h4,
.text-lg,
.group-heading,
.page-header-ko {
    font-size: 16px;
}

.dx-widget,
.dx-field,
.dx-field input,
.dx-field textarea,
.dx-list-item-content,
.dx-overlay-wrapper,
.dx-toast-content,
.dx-widget input,
.dx-widget textarea,
.field-disabled.dx-state-disabled.dx-widget .dx-texteditor-input,
.field-disabled.dx-state-disabled .dx-widget .dx-texteditor-input,
.dx-treelist-headers .dropdown-menu,
.datagrid-condensed .dx-datagrid,
.datagrid-condensed .dx-widget,
.datagrid-condensed .dx-field input,
.datagrid-condensed input {
    font-size: 12px;
}

.dx-treelist {
  font-size: 16px;
}

.dx-fieldset-header, .dx-accordion-item-title h1 {
    font-size: 18px;
}

img {
    border: none;
}

a {
    text-decoration: none;
}

    a:hover, a:focus {
        text-decoration: underline;
    }

.text-no-transform {
    text-transform: none;
}

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

.color-cogency-blue, .icon-color-cogency-blue {
    color: var(--cogency-blue);
}

.color-error, .icon-color-error {
    color: var(--danger);
}

.color-slate, .icon-color-slate {
    color: var(--slate);
}

.color-crisp-white, .icon-color-crisp-white {
    color: white;
}

.background-cool-grey {
    background-color: var(--cool-grey)
}

.background-cogency-blue {
    background-color: var(--cogency-blue);
}

.background-skylight, .background-compliance {
    background-color: var(--skylight);
}

.background-lime, .background-transaction {
    background-color: var(--lime);
}

.background-tangerine {
  background-color: var(--tangerine);
}

.background-grape {
    background-color: var(--grape);
}

.background-sunburst {
    background-color: var(--sunburst);
}

.background-slate {
    background-color: var(--slate);
}

.background-bright-blue {
  background-color: var(--bright-blue);
}

.background-mist {
  background-color: var(--mist);
}

.background-white-smoke {
  background-color: var(--white-smoke)
}

.background-success,
.dx-toast-success,
.alert-success {
  background-color: var(--bg-success);
  color: var(--slate);
}

.background-error,
.dx-toast-error,
.alert-danger {
  background-color: var(--bg-danger);
  color: var(--slate);
}

.background-warning,
.background-additional,
.dx-toast-warning,
.alert-tangerine,
.alert-warning {
  background-color: var(--warning);
  color: var(--slate);
}

.background-info,
.dx-toast-info,
.alert-primary,
.alert-info {
  background-color: var(--mist);
  color: var(--slate);
}

.page-header {
    padding: 8px 0;
    margin: 10px 0 20px;
    border-bottom: 1px solid #eee;
}

.page-header-ko {
    padding: 10px;
    margin: 18px 0;
    background-color: var(--cogency-blue);
    color: white;
}

    .page-header h1,
    .page-header h2,
    .page-header h3,
    .page-header h4,
    .page-header-ko h1,
    .page-header-ko h2,
    .page-header-ko h3,
    .page-header-ko h4 {
        margin: 0;
        padding: 0;
    }

.page-subheader h1,
.page-subheader h2,
.page-subheader h3,
.page-subheader h4,
.group-heading h1,
.group-heading h2,
.group-heading h3,
.group-heading h4 {
    margin-bottom: 0;
    padding-bottom: 0;
}

.page-subheader,
.group-heading {
  padding: 8px 0;
  margin-bottom: 16px;
  font-weight: 700;
  border-bottom: 2px solid var(--slate);
  width: 100%;
}

.page-subheader-skylight,
.group-heading-skylight,
.group-heading-compliance {
    border-bottom-color: var(--skylight);
}

.page-subheader-cogency-blue,
.group-heading-cogency-blue {
    border-bottom-color: var(--cogency-blue);
}

.group {
    padding: 2px 8px;
}

.link {
    cursor: pointer;
}

.animated-loading-wrapper {
    padding: 20px 0;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.no-padding {
    padding: 0;
}

.text-bold {
    font-weight: 700;
}

.footnote {
    margin-top: 10px;
    padding-top: 10px;
}

ul.list-item {
    list-style: none;
}

    ul.list-item > li:before {
        content: '\25CF';
        display: inline-block;
        width: 1em;
        margin-left: -1em;
    }

ul.list-item-skylight > li:before, ul.list-item-compliance > li:before {
    color: var(--skylight);
}

ul.list-item-lime > li:before, ul.list-item-transaction > li:before {
    color: var(--lime);
}

ul.list-item-tangerine > li:before, ul.list-item-additional > li:before {
    color: var(--tangerine);
}

.font-large {
    font-size: large;
}

.font-x-large {
    font-size: x-large;
}

.margin-top {
    margin-top: 18px;
}

.margin-bottom {
    margin-bottom: 18px;
}

/* ==========================================================================

	                 Main Container Styles (app.component)

============================================================================= */

.container,
.container-fluid {
    padding: 20px;
}

.container-drawer-open {
    margin-left: 20%;
    width: 80%;
}

.container-breadcrumbs-visible {
    margin-top: 30px;
}

.container-sidebar-visible {
    padding-right: 20%;
}

.panel-container {
    position: absolute;
    width: 100%;
    display: flex;
    height: calc(100% - 82px);
    /* Calculates the height at 100% minus height of the main header */
    flex-direction: row;
}

.panel-left {
    background: white;
    box-shadow: 0 0 8px var(--slate);
    flex: 0 0 auto;
    width: 20%;
    min-width: 20%;
    white-space: nowrap;
    overflow: hidden;
    z-index: 1;
}

.panel-right {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    flex: 1 1 auto;
}

.panel-right-drawer .container-fluid {
    padding-top: 48px;
}

.is-hidden {
    display: none;
}

.container-drawer-open {
    margin-left: 20%;
    width: 80%;
}

.container-breadcrumbs-visible {
    margin-top: 30px;
}

.container-sidebar-visible {
    padding-right: 20%;
}

.boxed-container {
    margin: 10px;
    padding: 10px 15px;
    text-align: center;
    background-color: transparent;
    border: 1px solid var(--cool-grey);
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
}

.highlight-wrapper {
  padding: 9.5px;
  margin: 10px 0;
  line-height: 1.428571429;
  color: var(--slate);
  background-color: var(--white-smoke);
  border: 1px solid var(--cool-grey);
  border-radius: 4px;
}

    .highlight-wrapper p:last-child {
        margin: 0;
    }

.highlight-wrapper-flex {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
}

.highlight-wrapper-sunburst {
    background-color: rgba(var(--sunburst-rgb), .1);
    border-color: var(--sunburst);
}

.highlight-wrapper-lime {
    background-color: rgba(var(--lime-rgb), .1);
    border-color: var(--lime);
}

.highlight-wrapper-grape {
    background-color: rgba(var(--grape-rgb), .05);
    border-color: var(--grape);
}

.highlight-wrapper-tangerine {
    background-color: rgba(var(--tangerine-rgb), .1);
    border-color: var(--tangerine);
}

.highlight-wrapper-cogency-blue {
    background-color: rgba(var(--cool-grey-rgb), .2);
    border-color: var(--cogency-blue);
}

.highlight-wrapper-skylight {
    background-color: rgba(var(--skylight-rgb), .1);
    border-color: var(--skylight);
}

.highlight-wrapper-bright-blue {
  background-color: rgba(var(--bright-blue-rgb), .1);
  border-color: var(--bright-blue);
}

/* ==========================================================================

	           Icon Styles (icon.component)

============================================================================= */
.fa-file-word-o, .fa-file-word {
  color: #185ABD;
}

.fa-file-pdf-o, .fa-file-pdf {
  color: #C00909;
}

.fa-file-excel-o, .fa-file-excel, .dx-datagrid-export-button .dx-icon-export-excel-button:before, .dx-datagrid-export-button .dx-icon-export-to:before, .dx-icon-xlsxfile:before {
  color: #107C41;
}

.icon-color-skylight, .icon-color-compliance {
    color: var(--skylight);
}

.icon-color-success {
    color: var(--success);
}

.icon-color-lime, .icon-color-transaction {
    color: var(--lime);
}

.icon-color-tangerine, .icon-color-additional, .icon-color-warning {
    color: var(--tangerine);
}

.icon-color-grape {
    color: var(--grape);
}

.icon-color-sunburst {
    color: var(--sunburst);
}

.icon-color-bright-blue {
  color: var(--bright-blue);
}

/* ==========================================================================

	                    Button Styles (button.component)

============================================================================= */

.btn {
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    -moz-user-select: none !important;
    -webkit-user-select: none !important;
    user-select: none;
    display: inline-block;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    transition: all .4s ease !important;
    text-shadow: none;
    line-height: 1.5em;
    border-color: var(--cool-grey);
    font-size: 12px;
}

.btn, .dx-button:not(.dx-toolbar .dx-button, .card-body .dx-button, .dx-dropdownbutton .dx-button) {
    margin: 10px 6px;
}

.btn-pill-lg {
  min-width: 150px;
  border-radius: 20px;
}

.btn-pill-md {
  min-width: 125px;
  border-radius: 18px;
}

.btn-pill-sm {
  min-width: 100px;
  border-radius: 15px;
}

.btn-pill-lg, .btn-square-lg {
  padding: 10px 20px 10px 20px;
  font-size: 14px;
}

.btn-pill-md, .btn-square-md {
  padding: 8px 15px 8px 15px;
}

.btn-pill-sm, .btn-square-sm {
  padding: 5px 10px 5px 10px;
}

.btn.dx-button .dx-button-content {
  padding: 0;
  padding-block: unset;
}

.btn-icon-lg {
  padding: 7px 12px;
}

.btn-icon-lg,
.btn-icon-lg.dx-button-has-icon .dx-icon {
  font-size: 16px;
}

.btn-icon-md {
  padding: 6px 10px;
}

.btn-icon-md,
.btn-icon-md.dx-button-has-icon .dx-icon {
  font-size: 15px;
}

.btn-icon-sm {
  padding: 4px 8px;
}

.btn-icon-sm,
.btn-icon-sm.dx-button-has-icon .dx-icon {
  font-size: 14px;
}

.btn.dx-button-has-icon .dx-icon {
  vertical-align: text-top;
}

.btn:not(.btn-icon-sm, .btn-icon-md, .btn-icon-lg) i {
  margin-inline-end: 7px;
}

.button-wrapper {
  padding: 20px;
}

.btn-icon {
  box-shadow: 0 1px 2px transparent;
  border: 1px solid var(--cool-grey);
}

.btn-icon:hover {
  background-color: var(--cool-grey);
}

.btn-shadow {
    box-shadow: 0px 1px 30px var(--cool-grey);
}

button,
.btn-default {
  border-color: var(--cool-grey) !important;
  background: white;
}

/* Bootstrap .btn-warning has been overridden by btn-cogency-blue. Bootstrap warning color is not approved for buttons. */

.btn-cogency-blue,
.btn-dropdown-cogency-blue .dx-button,
.btn-dropdown-cogency-blue .dx-buttongroup-item.dx-button.dx-button-mode-outlined.dx-state-hover,
.btn-dropdown-cogency-blue .dx-buttongroup-item.dx-button.dx-button-mode-outlined.dx-state-focused,
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:hover,
.btn-primary:active:focus,
.btn-dropdown-primary .dx-button,
.btn-dropdown-primary .dx-buttongroup-item.dx-button.dx-button-mode-outlined.dx-state-hover,
.btn-dropdown-primary .dx-buttongroup-item.dx-button.dx-button-mode-outlined.dx-state-focused,
.btn-cogency-blue.dx-state-hover,
.btn-cogency-blue.dx-state-active,
.btn-cogency-blue.dx-state-focused,
.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning:active:hover,
.btn-warning:active:focus,
.btn-warning.dx-state-hover,
.btn-warning.dx-state-active,
.btn-warning.dx-state-focused {
  background: var(--cogency-blue);
  color: white;
  border-color: var(--cool-grey);
}

.btn-cogency-blue:hover,
.btn-cogency-blue:focus,
.btn-cogency-blue:active,
.btn-cogency-blue.dx-state-hover,
.btn-cogency-blue.dx-state-active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.dx-state-hover,
.btn-primary.dx-state-active,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.dx-state-hover,
.btn-warning.dx-state-active {
  background: rgba(var(--cogency-blue-rgb), .8);
  filter: none !important;
}

.btn-cogency-blue-outline,
.btn-dropdown-cogency-blue-outline .dx-button,
.btn-primary-outline,
.btn-dropdown-primary-outline .dx-button {
  background-color: white;
  color: var(--cogency-blue);
  border: 1px solid var(--cogency-blue);
  border-color: var(--cogency-blue) !important;
}

.btn-cogency-blue-outline .dx-icon,
.btn-primary-outline .dx-icon,
.btn-warning .dx-icon {
  color: var(--cogency-blue);
}

.dx-dropdownbutton .dx-button {
    margin: 0;
}

.btn-skylight,
.btn-compliance,
.btn-skylight .dx-button,
.btn-skylight.dx-state-hover,
.btn-skylight.dx-state-active,
.btn-skylight.dx-state-focused {
    color: white;
    background: var(--skylight);
    border-color: var(--skylight);
}

.btn-skylight-outline,
.btn-skylight-outline .dx-button {
  color: var(--slate);
  background: white;
  border: 1px solid var(--skylight);
  border-color: var(--skylight) !important;
}

.btn-skylight-outline .dx-icon {
  color: var(--skylight);
}

.btn-danger,
.btn-danger.dx-state-hover,
.btn-danger.dx-state-active,
.btn-danger.dx-state-focused {
    background-color: var(--danger);
    color: white;
    border-color: var(--danger);
}

.btn-danger-outline {
  background-color: white;
  color: var(--danger);
  border: 1px solid var(--danger);
  border-color: var(--danger) !important;
}

    .btn-danger-outline .dx-icon {
        color: var(--danger);
    }

.btn-success,
.btn-success.dx-state-hover,
.btn-success.dx-state-active,
.btn-success.dx-state-focused {
    color: #fff;
    background-color: var(--success);
    border: 1px solid var(--success);
}

.btn-success-outline {
  background-color: white;
  color: var(--slate);
  border: 1px solid var(--success);
  border-color: var(--success) !important;
}

    .btn-success-outline .dx-icon {
        color: var(--success);
    }

.btn-bright-blue {
  background-color: var(--bright-blue);
  color: white;
  border-color: var(--bright-blue);
}

.btn-bright-blue:hover,
.btn-bright-blue:focus,
.btn-bright-blue:active,
.btn-bright-blue.dx-state-hover,
.btn-bright-blue.dx-state-active,
.btn-bright-blue.dx-state-focused {
  background: rgba(var(--bright-blue-rgb), .8);
  filter: none !important;
}

.btn-bright-blue-outline {
  background-color: white;
  color: var(--bright-blue);
  border: 1px solid var(--bright-blue);
  border-color: var(--bright-blue) !important;
}

.btn-bright-blue-outline .dx-icon {
  color: var(--bright-blue);
}

.btn-cogency-blue .dx-icon,
.btn-skylight .dx-icon,
.btn-warning .dx-icon,
.brn-bright-blue .dx-icon,
.btn-dropdown-cogency-blue .dx-button .dx-icon,
.btn-dropdown-primary .dx-button .dx-icon {
  color: white;
}

.btn-cogency-blue:hover, .btn-cogency-blue:focus,
.btn-skylight:hover, .btn-skylight:focus,
.btn-primary:hover, .btn-primary:focus,
.btn-bright-blue:hover, .btn-bright-blue:focus,
.btn-warning:hover, .btn-warning:focus {
  color: white;
}

.btn:hover,
.btn:focus,
.dx-button:hover,
.dx-button.dx-state-hover {
    filter: brightness(90%);
}

.btn:active,
.btn:active:hover,
.btn:active:focus,
.dx-button:active,
.dx-button:active:hover,
.dx-button:active:focus {
    filter: brightness(70%);
}

.btn.disabled, .btn[disabled], .btn.dx-state- disabled.dx-widget, .btn[disabled]:hover, .btn[disabled]:focus,
.dx-button.disabled, .dx-button[disabled], .dx-button.dx-state-disabled.dx-widget, .dx-button[disabled]:hover, .dx-button[disabled]:focus {
    color: white;
    background: var(--slate);
    border-color: var(--slate);
    opacity: .3;
}

.dx-button.disabled, .dx-button[disabled], .dx-dropdownbutton.dx-state-disabled.dx-widget {
    cursor: not-allowed;
    box-shadow: none;
}

.btn:focus, .dx-button:focus {
    outline: 0 !important;
    box-shadow: 0 0 0 1.5px var(--slate);
}

.btn-success .dx-icon,
.btn-cogency-blue .dx-icon,
.btn-primary .dx-icon,
.btn-danger .dx-icon,
.btn-warning .dx-icon,
.btn-bright-blue .dx-icon,
.btn-success:disabled .dx-icon,
.btn-cogency-blue:disabled .dx-icon,
.btn-primary:disabled .dx-icon,
.btn-danger:disabled .dx-icon,
.btn-warning:disabled .dx-icon,
.btn-default:disabled .dx-icon,
.btn-bright-blue:disabled .dx-icon,
.btn-success-outline:disabled .dx-icon,
.btn-cogency-blue-outline:disabled .dx-icon,
.btn-primary-outline:disabled .dx-icon,
.btn-danger-outline:disabled .dx-icon,
.btn:disabled .fa,
.dx-button:disabled .fa-solid {
  color: white !important;
}

/* ==========================================================================

	            Button Square and Toolbar Styles (button.component)

============================================================================= */

.dx-button .dx-button-content {
    padding: 6px;
}

.btn-toolbar {
  display: block;
}

.btn-toolbar-margin {
    margin: 0 15px;
    display: inline-block;
}

.btn-toolbar-pipe {
    height: 20px;
    border-left: 1px solid var(--cool-grey);
    top: 6px;
    position: relative;
}

.btn-circle-green {
  background: var(--lime);
  border-radius: 75px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  min-height: 1.6em;
}

/* ==========================================================================

	                    Form Styles (form.component)

============================================================================= */

.fileuploader-container {
    border: 1px solid #d3d3d3;
    padding: 15px 0;
    display: block;
    position: relative;
}

.field-label {
    font-weight: 700;
    overflow: visible;
    white-space: normal;
    padding: 8px 15px 9px 0;
    cursor: default;
}

.button-set {
    margin-top: 20px;
    text-align: right;
}

.summary-header {
    padding: 10px 0 0 10px;
    font-weight: 700;
    color: var(--danger);
}

#summary {
    padding: 10px;
    font-weight: 700;
    margin: 0 auto;
    border: 1px solid var(--danger);
    border-radius: 5px;
}

    #summary p {
        color: var(--danger);
    }

.file-uploader-block {
    padding: 9.5px;
    margin: 10px 0;
    color: var(--slate);
    background-color: white;
    border: 1px solid var(--cool-grey);
    border-radius: 4px;
}

.field-container {
  display: flex;
  align-items: center;
}

.field-is-required.dx-field-label>span::after {
  content: '*';
  color: var(--danger);
}

.character-counter-text {
  width: 100%;
  text-align: right;
  padding-right: 10px;
  font-family: 'Arial';
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  color: var(--cool-grey);
}

.field-container.align-items-unset {
  align-items: unset;
}

/* ==========================================================================

	                Breadcrumb Styles (breadcrumb.component)

============================================================================= */

.breadcrumb-wrapper {
    position: fixed;
    width: 100%;
    overflow: visible;
    top: 82px;
}

.breadcrumb {
  padding: 8px 20px;
  margin-bottom: 20px;
  list-style: none;
  background-color: var(--white-smoke);
}

.breadcrumb>li+li:before {
  font-family: 'Font Awesome 6 Free';
  content: '\f105';
  padding: 0 10px;
}

/* ==========================================================================

	                    Drawer Styles (drawer.component)

============================================================================= */

div#Drawer {
    height: 100%;
    transition: transform .5s;
    overflow: hidden;
}

    div#Drawer.is-hidden {
        display: none;
    }

.drawer-wrapper {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

.is-hidden {
    visibility: hidden;
    width: 0;
}

.drawer-label {
    display: block;
    font-weight: 700;
    background: var(--slate);
    height: 48px;
    line-height: 42px;
    color: white;
    text-align: center;
    font-size: 1.8em;
    line-height: 1.5em;
    position: absolute;
    padding-top: 2px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 42px;
}

/* ==========================================================================

	               Header Menu Styles (header-menu.component)
                          Responsive mobile-first

============================================================================= */
.navbar {
    background-color: var(--cogency-blue);
    padding-top: 0;
    padding-bottom: 0;
}

.navbar,
.dropdown-menu {
    font-size: 16px;
}

    .navbar .container-fluid {
        padding: 0;
    }

.navbar-logo.desktop-only {
    display: none;
}

.navbar-logo.mobile-only {
    display: flex;
    padding: 15px;
}

.navbar-brand {
    font-size: 16px;
    font-weight: 700;
    display: flex;
    flex: 1;
    white-space: normal;
    margin: 0;
    text-align: center;
    justify-content: center;
    position: relative;
}

    .navbar-brand::before {
        content: '';
        position: absolute;
        top: -17px;
        right: 0;
        left: 0;
        bottom: 0;
        background: white;
        clip-path: polygon(0 0, 80% 0, 100% 100%, 20% 100%);
        height: 78px;
    }

    .navbar-brand > .content {
        padding: 5px 30px;
        margin: 0 auto;
        position: relative;
        color: var(--cogency-blue);
    }

        .navbar-brand > .content > a,
        .navbar-brand > .content > a:active,
        .navbar-brand > .content > a:hover,
        .navbar-brand > .content > a:focus {
            color: var(--cogency-blue);
            text-decoration: none;
            font-weight: 500;
        }

/* Use for application names that are on two lines */
.navbar-brand-2-line::before {
  top: -5px;
}

.navbar-toggler,
.navbar-toggler:active {
    width: 110px;
    display: flex;
    border: none;
    justify-content: center;
}

    .navbar-toggler:focus {
        box-shadow: none;
    }

.navbar-toggler-icon {
    height: 24px;
    width: 40px;
    top: 17px;
    left: 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .navbar-toggler-icon > .line {
        display: block;
        height: 2px;
        width: 100%;
        border-radius: 0;
        background: white;
    }

.navbar-collapse {
    background-color: var(--slate);
}

.navbar-nav .nav-link {
    padding: 10px 20px;
}

.navbar a:hover,
.navbar a:active {
    text-decoration: none;
}

.dropdown-menu {
  border-radius: 0;
  padding: 0;
  background-color: var(--white-smoke);
}

    .dropdown-menu > li {
        border-top: 1px solid rgba(var(--slate-rgb), .08);
    }

        .dropdown-menu > li > a {
            padding: 5px 20px;
        }

        .dropdown-menu > li:first-of-type:not(.dropdown-submenu .dropdown-menu>li:first-of-type) {
            border-top: none;
        }

.dropdown-item.active,
.dropdown-item:active {
    background-color: rgba(var(--skylight-rgb), 0.3);
    color: var(--slate);
}

.nav-link,
.navbar-nav > .nav-item > a.nav-link:hover {
    color: white;
}

li.dropdown-divider {
    display: none;
}

.dropdown-toggle::after {
    color: white;
    font-size: 24px;
    display: inline-block;
    margin-left: auto;
    border: none;
    position: absolute;
    right: 30px;
    top: 0;
}

.dropdown-toggle::after,
.dropdown-submenu-toggle.toggle-collapsed::after {
    content: "+";
}

.dropdown-toggle.show::after,
.dropdown-submenu-toggle.toggle-expanded::after {
    content: "\2013";
}

.dropdown-submenu {
    display: flex;
    flex-wrap: wrap;
}

    .dropdown-submenu .dropdown-menu {
        width: 100%;
        border: none;
    }

        .dropdown-submenu .dropdown-menu a {
            margin-left: 20px;
        }

    .dropdown-submenu > a.dropdown-submenu-toggler {
        width: 80%;
    }

.dropdown-submenu-toggle {
    font-size: 24px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 20%;
    padding: 0;
    padding-right: 30px;
}

    .dropdown-submenu-toggle.toggle-expanded::after,
    .dropdown-submenu-toggle.toggle-collapsed::after {
        color: var(--slate);
    }

button.dropdown-submenu-toggler.mobile-only {
  padding: 5px 20px;
}

.navbar-nav .nav-link.show {
  color: white;
}

/* ICON MENU */
.icon-menubar {
    padding-top: 10px;
}

    .icon-menubar .dropdown-toggle {
        display: inline-block;
    }

    .icon-menubar .icon-link {
        display: inline-block;
        width: 25px;
        height: 25px;
        background: transparent;
        border: none;
        border-radius: 10em;
        color: white;
        margin: 0 3px;
    }

    .icon-menubar .nav-link:hover {
        color: white;
    }

/* SEARCH MENU */
.search-container .navbar-collapse {
    margin-top: 60px;
}

.search-input-wrapper {
    position: absolute;
    background-color: white;
    width: 100%;
    height: 50px;
    left: 0;
    top: 100px;
}

    .search-input-wrapper .form-control {
        padding: 0;
    }

    .search-input-wrapper .dx-placeholder {
        font-size: 11px;
    }

.search-options-wrapper .dx-button.btn-popup {
    /* does not appear on mobile */
    display: none;
    border-radius: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    height: 26px;
}

.search-input-wrapper .dx-button.btn-search,
.search-options-wrapper .dx-button.btn-popup {
    border: none;
    margin: 0;
}

.btn-search>.dx-button-content:after {
  font-family: 'Font Awesome 6 Free';
  font-size: 14px;
  content: '\f002';
  color: rgba(var(--slate-rgb), .6);
}

.search-options-row {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--skylight);
}

.search-options-container .search-input-wrapper .select-box {
  border-radius: 4px;
  padding: 0 5px;
  font-size: 12px;
  width: 110px;
  color: var(--slate);
  height: 26px;
  position: absolute;
  top: calc(50% - 13px);
  right: 15px;
  border-color: var(--cool-grey) !important;
}

.search-options-container .search-input-wrapper select.select-box option:checked {
    background-color: rgba(var(--skylight-rgb), 0.3);
    color: var(--slate);
}

.search-input-wrapper .form-control.select-box:focus {
    box-shadow: none;
}

.search-input-wrapper .search-input {
  border-color: var(--cool-grey) !important;
  font-size: 14px;
  width: 220px;
  height: 26px;
  position: absolute;
  top: calc(50% - 13px);
  left: calc(50% - 110px)
}

.search-options-container .search-input-wrapper .search-input {
    left: 15px;
}

.navbar-search-options-wrapper .dx-widget {
    font-size: 12px;
}

.select-box-item-container .dx-list-item-content {
    font-family: 'SemplicitaPro'
}


/* ==========================================================================

				   Sidebar Menu Styles (sidebar-menu.component)

============================================================================= */

.sidebar-menu-wrapper {
    position: fixed;
    right: 0;
    padding-right: 20px;
    top: 135px;
    font-size: 13px;
    width: 20%;
    padding-left: 20px;
    color: var(--slate);
}

.sidebar-menu-container {
    padding: 5px 0 10px 12px;
    width: 100%;
    border-left: 4px solid var(--skylight);
}

    .sidebar-menu-container .sidebar-menu-link.sidebar-menu-active, .sidebar-menu-container .sidebar-menu-link:hover {
        color: var(--cogency-blue);
    }

    .sidebar-menu-container .sidebar-menu-sub-link {
        text-indent: 15px;
    }

.sidebar-menu-heading {
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
}

.sidebar-menu-wrapper a {
    line-height: 16px;
    margin: 8px 0 0;
    position: relative;
    text-decoration: none;
    display: block;
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
}

.sidebar-menu-close {
    cursor: pointer;
    color: #bcbcbc;
    position: absolute;
    top: -3px;
    left: 0;
}

.sidebar-menu-link {
    cursor: pointer;
}

    .sidebar-menu-link.active {
        font-weight: 700;
        color: var(--cogency-blue);
    }

.scrolltop {
    display: block;
    width: 100%;
    margin: 0 auto;
    position: fixed;
    bottom: 20px;
    right: 10px;
    z-index: 2000;
}

.scroll {
    position: absolute;
    right: 20px;
    bottom: 20px;
    background: #b2b2b2;
    background: rgba(178, 178, 178, 0.7);
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: 0.5s;
}

    .scroll:hover {
        background: rgb(178, 178, 178);
        transition: 0.5s;
    }

.scroll:hover .fa-solid {
  padding-top: -10px;
}

.scroll .fa-solid {
  font-size: 30px;
  margin-top: -5px;
  margin-left: 1px;
  transition: 0.5s;
}

/* ==========================================================================

	                 Tree-List Styles (tree-list.component)

============================================================================= */

#TreeList {
    font-size: 12px;
}

.tree-list-wrapper {
    margin: 0;
    padding: 10px 0;
    list-style: none;
    height: 100%;
}

    .tree-list-wrapper a {
        color: white;
        font-size: 1.5em;
        text-decoration: none;
        display: block;
        padding: 12px 15px;
        font-weight: 300;
        letter-spacing: 2px;
        border-bottom: 1px solid var(--slate);
    }

        .tree-list-wrapper a:hover {
            background: #111;
        }

.help-legend-wrapper {
    font-size: .85em;
}

.dx-treelist {
    font-size: 1em;
}

thead tr th {
    position: relative;
}

.icon {
    font-weight: 700;
    padding-left: 5px;
}

.icon-blue {
    color: var(--skylight);
}

.icon-red {
    color: var(--tangerine);
}

.icon-green {
    color: var(--lime);
}

div.icon-subscript-left, div.icon-subscript-right {
    position: absolute;
    color: var(--slate);
    font-family: Tahoma, Verdana, Geneva, sans-serif;
    font-size: 12px;
    top: 3px;
    font-weight: 700er;
}

div.icon-subscript-right {
    left: 18px;
}

.icon-letter {
    font-family: Tahoma;
}

.treelist-row {
    position: relative;
    padding: 1px 6px;
    display: flex;
    flex-direction: row;
}

.treelist-col-icon {
    flex: 0 0 40px;
}

.treelist-col-text {
    flex: 1 1 auto;
    width: 100%;
}

.dx-treelist-filter-panel {
    padding-bottom: 5px;
}

.treelist-sort-panel {
    border-top: none;
    font-size: 12px;
    padding: 0 13px 0 10px;
}

.icon-sort {
    color: var(--skylight);
    margin: auto;
    padding-right: 7px;
}

/* ==========================================================================

	                 Tree-View Styles (tree-view.component)

============================================================================= */
.tree-view-wrapper {
    margin: 0;
    list-style: none;
    display: flex;
    height: 100%;
}

/* ==========================================================================

	           Tables/Grids Styles (table.component)

============================================================================= */

.datagrid-condensed, .datagrid-condensed .dx-widget, .datagrid-condensed .dx-field input {
    font-size: 12px;
}

.datagrid-condensed-ultra, .datagrid-condensed-ultra .dx-editor-cell .dx-texteditor .dx-texteditor-input, .datagrid-condensed-ultra .datagrid-textarea, .datagrid-condensed-ultra .datagrid-textarea .dx-texteditor-input, .datagrid-condensed-ultra .datagrid-textarea .dx-datagrid-headers .dx-texteditor-input, .datagrid-condensed-ultra .datagrid-textarea .dx-datagrid-rowsview .dx-texteditor-input, .datagrid-condensed-ultra .datagrid-textarea.dx-texteditor.dx-editor-outlined {
    font-size: 11px;
}

    .datagrid-condensed-ultra .dx-datagrid-headers {
        font-size: 10px;
    }

.filter-applied .dx-texteditor-input {
  background: var(--warning) !important;
  border-radius: 0 !important;
}

/* ==========================================================================

	           Notification Bar Styles (notification-toast.component)

============================================================================= */
.pop-up-text {
    color: var(--slate);
}

.toast-close {
    position: absolute;
    right: 10px;
    top: 5px;
    cursor: pointer;
}

/* ==========================================================================

	           Card / Tile Specific Styles (card.component)

============================================================================= */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    grid-gap: 30px;
}

.card {
    background-color: white;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
}

.card-primary {
    border-color: var(--cogency-blue);
}

    .card-primary > .card-heading {
        padding: 10px 15px;
        border-bottom: 1px solid transparent;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        text-align: center;
        color: white;
    }

.card-title > .no-access {
    color: var(--tangerine);
    font-size: 1.1em;
    float: right;
}

.card-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
    font-weight: 600;
}

.card-body {
    padding: 15px;
    text-align: center;
}

.card-icon, .card-icon-margin-bottom {
    font-size: 65px;
    color: var(--cogency-blue);
    margin: 10px 0;
    clear: both;
    width: 100%;
}

.card-icon-margin-bottom {
    margin-bottom: 30px;
}

.card .icon-overlap {
    margin-left: -30px;
}

.card-form-container {
    padding: 15px;
}

.card-footer {
    padding: 0.75rem 1.25rem;
    background-color: rgba(0, 0, 0, .03);
    border-top: 1px solid rgba(0, 0, 0, .125);
    display: block;
}

.card-cogency-blue, .card-primary {
    border-color: var(--cogency-blue);
}

    .card-cogency-blue > .card-heading, .card-primary > .card-heading {
        border-color: var(--cogency-blue);
        background-color: var(--cogency-blue);
        border-color: var(--cogency-blue);
    }

    .card-cogency-blue.disabled > .card-heading, .card-primary.disabled > .card-heading {
        background-color: rgba(var(--cogency-blue-rgb), 0.5);
    }

.card-cogency-blue.disabled .card-icon, .card-primary.disabled .card-icon {
  color: rgba(var(--cogency-blue-rgb), 0.5);
}
.button-tooltip {
  display: inline-block;
}