:root {
    --mdb-red: #f44336;
    --mdb-pink: #e91e63;
    --mdb-purple: purple-500;
    --mdb-indigo: #3f51b5;
    --mdb-blue: #2196f3;
    --mdb-cyan: #00bcd4;
    --mdb-teal: #009688;
    --mdb-green: #4caf50;
    --mdb-yellow: #ffeb3b;
    --mdb-orange: #ff9800;
    --mdb-white: #fff;
    --mdb-black: #000;
    --mdb-gray: #757575;
    --mdb-gray-dark: #4f4f4f;
    --mdb-gray-50: #fbfbfb;
    --mdb-gray-100: #f5f5f5;
    --mdb-gray-200: #eee;
    --mdb-gray-300: #e0e0e0;
    --mdb-gray-400: #bdbdbd;
    --mdb-gray-500: #9e9e9e;
    --mdb-gray-600: #757575;
    --mdb-gray-700: #616161;
    --mdb-gray-800: #4f4f4f;
    --mdb-gray-900: #262626;
    --mdb-primary: #004772;
    --mdb-secondary: #8940AD;
    --mdb-success: #14a44d;
    --mdb-danger: #dc4c64;
    --mdb-warning: #e4a11b;
    --mdb-info: #54b4d3;
    --mdb-light: #fbfbfb;
    --mdb-dark: #0A324E;
    --mdb-primary-rgb: 59, 113, 202;
    --mdb-secondary-rgb: 159, 166, 178;
    --mdb-success-rgb: 20, 164, 77;
    --mdb-danger-rgb: 220, 76, 100;
    --mdb-warning-rgb: 228, 161, 27;
    --mdb-info-rgb: 84, 180, 211;
    --mdb-light-rgb: 251, 251, 251;
    --mdb-dark-rgb: 10, 50, 78;
    --mdb-white-rgb: 255, 255, 255;
    --mdb-black-rgb: 0, 0, 0;
    --mdb-body-color-rgb: 79, 79, 79;
    --mdb-body-bg-rgb: 255, 255, 255;
    --mdb-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --mdb-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --mdb-gradient: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15), hsla(0, 0%, 100%, 0));
    --mdb-body-font-family: Montserrat;
    --mdb-body-font-size: 1rem;
    --mdb-body-font-weight: 400;
    --mdb-body-line-height: 1.6;
    --mdb-body-color: #004772;
    --mdb-body-bg: #fff;
    --mdb-border-width: 1px;
    --mdb-border-style: solid;
    --mdb-border-color: #e0e0e0;
    --mdb-border-color-translucent: rgba(0, 0, 0, 0.175);
    --mdb-border-radius: 0.25rem;
    --mdb-border-radius-sm: 0.25rem;
    --mdb-border-radius-lg: 0.5rem;
    --mdb-border-radius-xl: 1rem;
    --mdb-border-radius-2xl: 2rem;
    --mdb-border-radius-pill: 50rem;
    --mdb-link-color: #3b71ca;
    --mdb-link-hover-color: #386bc0;
    --mdb-code-color: #e91e63;
    --mdb-highlight-bg: #fff9c4;
}

/* Utilities start*/
.vh-50 {
    height: 50vh !important;
}

.max-vh-50 {
    max-height: 50vh !important;
}

.w-fitcontent {
    width: fit-content !important;
}

.fs-7 {
    font-size: 0.75rem !important;
}

.white-space-pre-wrap {
    white-space: pre-wrap !important;
}

/* Utilities end*/

/* Spinner */
.spinner {
    position: fixed;
    z-index: 1099;
    margin: auto;
    text-align: center;
    vertical-align: middle;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 150px;
    height: 150px;
}

/* Transparent Overlay */
.spinner:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
}

/* Dynamic height */
html,
body {
    height: 100vh;
}

body {
    display: flex;
    flex-flow: column;
}

label {
    font-weight: 500;
}

main,
section,
.pageview {
    display: flex;
    flex-flow: column;
    flex-grow: 1;
}

.main {
    display: flex;
    flex-flow: column;
    height: 100%;
}

.remaining-height {
    background-color: rgba(255, 255, 255, 0.5);
    display: flex;
    flex-flow: column;
    flex-grow: 1;
}
.pageview {
    width: 100%;
    height:99%;
    overflow-x: hidden;
}

/* Compact layout */
.tabulator-row .tabulator-cell {
    padding: 6px 12px;
}

.form-control.is-valid,
.was-validated .form-control:valid {
    margin-bottom: 0;
}

.tabulator-row.tabulator-selected {
    background-color: #d8c7e4;
}

.tabulator-row.tabulator-selectable:hover {
    background-color: #a37ac0;
}

.tabulator-frozen {
    z-index: 11;
}

.tabulator-data-tree-control,
.tabulator-data-tree-branch {
    flex-shrink: 0;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc4c64'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23dc4c64' stroke='none'/%3E%3C/svg%3E");
}

.cursor-pointer {
    cursor: pointer;
}

.non-interactive {
    pointer-events: none;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    width: 100%;
    cursor: default;
    font-size: 12px !important;
    line-height: 1;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: rgb(29, 104, 205) !important;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
}

.select2-results__option {
    color: #343a40 !important;
    font-weight: 400 !important;
}

.select2-results__option[aria-selected="true"] {
    background-color: #1d68cd !important;
    color: white !important;
}

.select2-selection__choice {    
    background-color: var(--mdb-body-color) !important;
    color: var(--mdb-white) !important;
    border: none !important;
    border-radius: 0.2rem !important;
    padding: 3px 5px !important;
    margin: 1px !important;
}

.select2-selection__choice__remove {
    display: contents !important;
}

.select2-results__option--highlighted {
    background-color: #1d68cd !important;
    color: white !important;
}

.select2-search__field {
    border: none !important;
    padding: 0px !important;
    font-size: 1rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.name-cell-icon {
    display: inline-flex;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.name-cell-icon--sm {
    width: 30px;
    height: 30px;
}

.name-cell-icon--empty {
    background-color: transparent;
    height: 33px;
}

.help-page-link-icon {
    color: var(--mdb-body-color);
}

.help-view-content {
    display: flex;
}

.help-view-toc-container {
    width: fit-content;
    min-width: 250px;
    height: fit-content;
    flex-shrink: 0;
    border: 1px solid;
    border-radius: 10px;
    margin-right: 15px;
    padding: 15px;
    padding-bottom: 0;
    position: sticky;
    top: 15px;
}

.help-page-section {
    margin-bottom: 1rem;
}

.help-view-img {
    margin: 15px auto;
    max-width: 100%;
    padding: 0 30px;
}

.employee-photo {
    display: inline-flex;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
}

.table-toolbar-container>* {
    margin-bottom: 0.25rem;
}

.select2-container .select2-selection {
    height: auto !important;
    max-height: 10vh !important;
    border: 1px solid #ced4da !important;
    overflow-y: auto;
}

.demand-detail-view__header {
    display: flex;
    align-items: center;
    margin: 0 -16px;
    margin-bottom: 16px;
    border-bottom: var(--mdb-modal-header-border-width) solid var(--mdb-modal-header-border-color);
    position: relative;
    padding: 0 16px 16px;
}

.suggestion-help-container {
    display: none;
}

.demand-detail-view__btn-close {
    position: absolute;
    right: 10px;
    top: 5px;
}

.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
}

.popover {
    max-width: 100%;
}

#suggested-table, #all-employees-table {
    flex: 50%;
}

.suggestions-popover {
    width: calc(400px + 20vw);
}

#suggestion-container {
    display: flex;
}

.suggestion-info {
    margin-bottom: 12px;
}

#skills-table .tabulator-cell {
    padding-right: 0;
}

.datepicker {
    border-radius: 4px;
    direction: ltr
}

.datepicker-inline {
    width: 220px
}

.datepicker-rtl {
    direction: rtl
}

.datepicker-rtl.dropdown-menu {
    left: auto
}

.datepicker-rtl table tr td span {
    float: right
}

.datepicker-dropdown {
    top: 0;
    left: 0;
    padding: 4px
}

.datepicker-dropdown:before {
    content: "";
    display: inline-block;
    border-left: 7px solid rgba(0,0,0,0);
    border-right: 7px solid rgba(0,0,0,0);
    border-bottom: 7px solid #dee2e6;
    border-top: 0;
    border-bottom-color: rgba(0,0,0,.2);
    position: absolute
}

.datepicker-dropdown:after {
    content: "";
    display: inline-block;
    border-left: 6px solid rgba(0,0,0,0);
    border-right: 6px solid rgba(0,0,0,0);
    border-bottom: 6px solid #fff;
    border-top: 0;
    position: absolute
}

.datepicker-dropdown.datepicker-orient-left:before {
    left: 6px
}

.datepicker-dropdown.datepicker-orient-left:after {
    left: 7px
}

.datepicker-dropdown.datepicker-orient-right:before {
    right: 6px
}

.datepicker-dropdown.datepicker-orient-right:after {
    right: 7px
}

.datepicker-dropdown.datepicker-orient-bottom:before {
    top: -7px
}

.datepicker-dropdown.datepicker-orient-bottom:after {
    top: -6px
}

.datepicker-dropdown.datepicker-orient-top:before {
    bottom: -7px;
    border-bottom: 0;
    border-top: 7px solid #dee2e6
}

.datepicker-dropdown.datepicker-orient-top:after {
    bottom: -6px;
    border-bottom: 0;
    border-top: 6px solid #fff
}

.datepicker table {
    margin: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.datepicker table tr th {
    font-weight: 600
}

.datepicker table tr td,.datepicker table tr th {
    text-align: center;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: none
}

.datepicker table tr td.datepicker-title,.datepicker table tr th.datepicker-title {
    font-weight: normal;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6
}

.datepicker table thead tr th {
    border-bottom: 1px solid #edeff1
}

.datepicker table thead tr th.dow,.datepicker table thead tr th.cw {
    border-radius: 0;
    background-color: #f8f9fa
}

.datepicker table tfoot tr th {
    border-top: 1px solid #edeff1
}

.table-striped .datepicker table tr td,.table-striped .datepicker table tr th {
    background-color: rgba(0,0,0,0)
}

.datepicker table tr td {
    box-shadow: none !important
}

.datepicker table tr td.old,.datepicker table tr td.new {
    color: #6c757d
}

.datepicker table tr td.day:hover,.datepicker table tr td.focused {
    background: #e9ecef;
    cursor: pointer
}

.datepicker table tr td.disabled,.datepicker table tr td.disabled:hover {
    background: none;
    color: #6c757d;
    cursor: default
}

.datepicker table tr td.highlighted {
    color: #fff;
    background-color: #45aaf2;
    border-color: #45aaf2;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
    border-radius: 0
}

.datepicker table tr td.highlighted:hover {
    color: #fff;
    background-color: #219af0;
    border-color: #1594ef
}

.datepicker table tr td.highlighted:focus,.datepicker table tr td.highlighted.focus {
    color: #fff;
    background-color: #219af0;
    border-color: #1594ef;
    box-shadow: 0 0 0 2px rgba(97,183,244,.5)
}

.datepicker table tr td.highlighted.disabled,.datepicker table tr td.highlighted:disabled {
    color: #fff;
    background-color: #45aaf2;
    border-color: #45aaf2
}

.datepicker table tr td.highlighted:not(:disabled):not(.disabled):active,.datepicker table tr td.highlighted:not(:disabled):not(.disabled).active,.show>.datepicker table tr td.highlighted.dropdown-toggle {
    color: #fff;
    background-color: #1594ef;
    border-color: #108ee7
}

.datepicker table tr td.highlighted:not(:disabled):not(.disabled):active:focus,.datepicker table tr td.highlighted:not(:disabled):not(.disabled).active:focus,.show>.datepicker table tr td.highlighted.dropdown-toggle:focus {
    box-shadow: 0 0 0 2px rgba(97,183,244,.5)
}

.datepicker table tr td.highlighted.focused {
    background: #1594ef
}

.datepicker table tr td.highlighted.disabled,.datepicker table tr td.highlighted.disabled:active {
    opacity: .65
}

.datepicker table tr td.today {
    color: #343a40;
    background-color: #f9e8a0;
    border-color: #f9e8a0;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075)
}

.datepicker table tr td.today:hover {
    color: #343a40;
    background-color: #f7df7b;
    border-color: #f7dc6f
}

.datepicker table tr td.today:focus,.datepicker table tr td.today.focus {
    color: #343a40;
    background-color: #f7df7b;
    border-color: #f7dc6f;
    box-shadow: 0 0 0 2px rgba(219,206,146,.5)
}

.datepicker table tr td.today.disabled,.datepicker table tr td.today:disabled {
    color: #343a40;
    background-color: #f9e8a0;
    border-color: #f9e8a0
}

.datepicker table tr td.today:not(:disabled):not(.disabled):active,.datepicker table tr td.today:not(:disabled):not(.disabled).active,.show>.datepicker table tr td.today.dropdown-toggle {
    color: #343a40;
    background-color: #f7dc6f;
    border-color: #f6d963
}

.datepicker table tr td.today:not(:disabled):not(.disabled):active:focus,.datepicker table tr td.today:not(:disabled):not(.disabled).active:focus,.show>.datepicker table tr td.today.dropdown-toggle:focus {
    box-shadow: 0 0 0 2px rgba(219,206,146,.5)
}

.datepicker table tr td.today.focused {
    background: #fff
}

.datepicker table tr td.today.disabled,.datepicker table tr td.today.disabled:active {
    background: #9fadba;
    color: #6c757d
}

.datepicker table tr td.range {
    color: #343a40;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
    border-radius: 0
}

.datepicker table tr td.range:hover {
    color: #343a40;
    background-color: #e2e6ea;
    border-color: #dae0e5
}

.datepicker table tr td.range:focus,.datepicker table tr td.range.focus {
    color: #343a40;
    background-color: #e2e6ea;
    border-color: #dae0e5;
    box-shadow: 0 0 0 2px rgba(219,220,222,.5)
}

.datepicker table tr td.range.disabled,.datepicker table tr td.range:disabled {
    color: #343a40;
    background-color: #f8f9fa;
    border-color: #f8f9fa
}

.datepicker table tr td.range:not(:disabled):not(.disabled):active,.datepicker table tr td.range:not(:disabled):not(.disabled).active,.show>.datepicker table tr td.range.dropdown-toggle {
    color: #343a40;
    background-color: #dae0e5;
    border-color: #d3d9df
}

.datepicker table tr td.range:not(:disabled):not(.disabled):active:focus,.datepicker table tr td.range:not(:disabled):not(.disabled).active:focus,.show>.datepicker table tr td.range.dropdown-toggle:focus {
    box-shadow: 0 0 0 2px rgba(219,220,222,.5)
}

.datepicker table tr td.range.focused {
    background: #dae0e5
}

.datepicker table tr td.range.disabled,.datepicker table tr td.range.disabled:active {
    opacity: .65
}

.datepicker table tr td.range.highlighted {
    color: #fff;
    background-color: #45aaf2;
    border-color: #45aaf2;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
    border-radius: 0
}

.datepicker table tr td.range.highlighted:hover {
    color: #fff;
    background-color: #219af0;
    border-color: #1594ef
}

.datepicker table tr td.range.highlighted:focus,.datepicker table tr td.range.highlighted.focus {
    color: #fff;
    background-color: #219af0;
    border-color: #1594ef;
    box-shadow: 0 0 0 2px rgba(97,183,244,.5)
}

.datepicker table tr td.range.highlighted.disabled,.datepicker table tr td.range.highlighted:disabled {
    color: #fff;
    background-color: #45aaf2;
    border-color: #45aaf2
}

.datepicker table tr td.range.highlighted:not(:disabled):not(.disabled):active,.datepicker table tr td.range.highlighted:not(:disabled):not(.disabled).active,.show>.datepicker table tr td.range.highlighted.dropdown-toggle {
    color: #fff;
    background-color: #1594ef;
    border-color: #108ee7
}

.datepicker table tr td.range.highlighted:not(:disabled):not(.disabled):active:focus,.datepicker table tr td.range.highlighted:not(:disabled):not(.disabled).active:focus,.show>.datepicker table tr td.range.highlighted.dropdown-toggle:focus {
    box-shadow: 0 0 0 2px rgba(97,183,244,.5)
}

.datepicker table tr td.range.highlighted.disabled,.datepicker table tr td.range.highlighted.disabled:active {
    opacity: .65
}

.datepicker table tr td.range.today {
    color: #343a40;
    background-color: #f9e8a0;
    border-color: #f9e8a0;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075)
}

.datepicker table tr td.range.today:hover {
    color: #343a40;
    background-color: #f7df7b;
    border-color: #f7dc6f
}

.datepicker table tr td.range.today:focus,.datepicker table tr td.range.today.focus {
    color: #343a40;
    background-color: #f7df7b;
    border-color: #f7dc6f;
    box-shadow: 0 0 0 2px rgba(219,206,146,.5)
}

.datepicker table tr td.range.today.disabled,.datepicker table tr td.range.today:disabled {
    color: #343a40;
    background-color: #f9e8a0;
    border-color: #f9e8a0
}

.datepicker table tr td.range.today:not(:disabled):not(.disabled):active,.datepicker table tr td.range.today:not(:disabled):not(.disabled).active,.show>.datepicker table tr td.range.today.dropdown-toggle {
    color: #343a40;
    background-color: #f7dc6f;
    border-color: #f6d963
}

.datepicker table tr td.range.today:not(:disabled):not(.disabled):active:focus,.datepicker table tr td.range.today:not(:disabled):not(.disabled).active:focus,.show>.datepicker table tr td.range.today.dropdown-toggle:focus {
    box-shadow: 0 0 0 2px rgba(219,206,146,.5)
}

.datepicker table tr td.range.today.disabled,.datepicker table tr td.range.today.disabled:active {
    background: #f4d03f;
    color: #6c757d
}

.datepicker table tr td.selected,.datepicker table tr td.selected.highlighted {
    color: #343a40;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075)
}

.datepicker table tr td.selected:hover,.datepicker table tr td.selected.highlighted:hover {
    color: #343a40;
    background-color: #e2e6ea;
    border-color: #dae0e5
}

.datepicker table tr td.selected:focus,.datepicker table tr td.selected.focus,.datepicker table tr td.selected.highlighted:focus,.datepicker table tr td.selected.highlighted.focus {
    color: #343a40;
    background-color: #e2e6ea;
    border-color: #dae0e5;
    box-shadow: 0 0 0 2px rgba(219,220,222,.5)
}

.datepicker table tr td.selected.disabled,.datepicker table tr td.selected:disabled,.datepicker table tr td.selected.highlighted.disabled,.datepicker table tr td.selected.highlighted:disabled {
    color: #343a40;
    background-color: #f8f9fa;
    border-color: #f8f9fa
}

.datepicker table tr td.selected:not(:disabled):not(.disabled):active,.datepicker table tr td.selected:not(:disabled):not(.disabled).active,.show>.datepicker table tr td.selected.dropdown-toggle,.datepicker table tr td.selected.highlighted:not(:disabled):not(.disabled):active,.datepicker table tr td.selected.highlighted:not(:disabled):not(.disabled).active,.show>.datepicker table tr td.selected.highlighted.dropdown-toggle {
    color: #343a40;
    background-color: #dae0e5;
    border-color: #d3d9df
}

.datepicker table tr td.selected:not(:disabled):not(.disabled):active:focus,.datepicker table tr td.selected:not(:disabled):not(.disabled).active:focus,.show>.datepicker table tr td.selected.dropdown-toggle:focus,.datepicker table tr td.selected.highlighted:not(:disabled):not(.disabled):active:focus,.datepicker table tr td.selected.highlighted:not(:disabled):not(.disabled).active:focus,.show>.datepicker table tr td.selected.highlighted.dropdown-toggle:focus {
    box-shadow: 0 0 0 2px rgba(219,220,222,.5)
}

.datepicker table tr td.active,.datepicker table tr td.active.highlighted {
    color: #fff;
    background-color: #adb5bd;
    border-color: #adb5bd;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075)
}

.datepicker table tr td.active:hover,.datepicker table tr td.active.highlighted:hover {
    color: #fff;
    background-color: #98a2ac;
    border-color: #919ca6
}

.datepicker table tr td.active:focus,.datepicker table tr td.active.focus,.datepicker table tr td.active.highlighted:focus,.datepicker table tr td.active.highlighted.focus {
    color: #fff;
    background-color: #98a2ac;
    border-color: #919ca6;
    box-shadow: 0 0 0 2px rgba(185,192,199,.5)
}

.datepicker table tr td.active.disabled,.datepicker table tr td.active:disabled,.datepicker table tr td.active.highlighted.disabled,.datepicker table tr td.active.highlighted:disabled {
    color: #fff;
    background-color: #adb5bd;
    border-color: #adb5bd
}

.datepicker table tr td.active:not(:disabled):not(.disabled):active,.datepicker table tr td.active:not(:disabled):not(.disabled).active,.show>.datepicker table tr td.active.dropdown-toggle,.datepicker table tr td.active.highlighted:not(:disabled):not(.disabled):active,.datepicker table tr td.active.highlighted:not(:disabled):not(.disabled).active,.show>.datepicker table tr td.active.highlighted.dropdown-toggle {
    color: #fff;
    background-color: #919ca6;
    border-color: #8a95a1
}

.datepicker table tr td.active:not(:disabled):not(.disabled):active:focus,.datepicker table tr td.active:not(:disabled):not(.disabled).active:focus,.show>.datepicker table tr td.active.dropdown-toggle:focus,.datepicker table tr td.active.highlighted:not(:disabled):not(.disabled):active:focus,.datepicker table tr td.active.highlighted:not(:disabled):not(.disabled).active:focus,.show>.datepicker table tr td.active.highlighted.dropdown-toggle:focus {
    box-shadow: 0 0 0 2px rgba(185,192,199,.5)
}

.datepicker table tr td span {
    display: block;
    width: 23%;
    height: 54px;
    line-height: 54px;
    float: left;
    margin: 1%;
    cursor: pointer;
    border-radius: 4px
}

.datepicker table tr td span:hover,.datepicker table tr td span.focused {
    background: #f8f9fa
}

.datepicker table tr td span.disabled,.datepicker table tr td span.disabled:hover {
    background: none;
    color: #6c757d;
    cursor: default
}

.datepicker table tr td span.active,.datepicker table tr td span.active:hover,.datepicker table tr td span.active.disabled,.datepicker table tr td span.active.disabled:hover {
    color: #fff;
    background-color: #adb5bd;
    border-color: #adb5bd;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075)
}

.datepicker table tr td span.active:hover,.datepicker table tr td span.active:hover:hover,.datepicker table tr td span.active.disabled:hover,.datepicker table tr td span.active.disabled:hover:hover {
    color: #fff;
    background-color: #98a2ac;
    border-color: #919ca6
}

.datepicker table tr td span.active:focus,.datepicker table tr td span.active.focus,.datepicker table tr td span.active:hover:focus,.datepicker table tr td span.active:hover.focus,.datepicker table tr td span.active.disabled:focus,.datepicker table tr td span.active.disabled.focus,.datepicker table tr td span.active.disabled:hover:focus,.datepicker table tr td span.active.disabled:hover.focus {
    color: #fff;
    background-color: #98a2ac;
    border-color: #919ca6;
    box-shadow: 0 0 0 2px rgba(185,192,199,.5)
}

.datepicker table tr td span.active.disabled,.datepicker table tr td span.active:disabled,.datepicker table tr td span.active:hover.disabled,.datepicker table tr td span.active:hover:disabled,.datepicker table tr td span.active.disabled.disabled,.datepicker table tr td span.active.disabled:disabled,.datepicker table tr td span.active.disabled:hover.disabled,.datepicker table tr td span.active.disabled:hover:disabled {
    color: #fff;
    background-color: #adb5bd;
    border-color: #adb5bd
}

.datepicker table tr td span.active:not(:disabled):not(.disabled):active,.datepicker table tr td span.active:not(:disabled):not(.disabled).active,.show>.datepicker table tr td span.active.dropdown-toggle,.datepicker table tr td span.active:hover:not(:disabled):not(.disabled):active,.datepicker table tr td span.active:hover:not(:disabled):not(.disabled).active,.show>.datepicker table tr td span.active:hover.dropdown-toggle,.datepicker table tr td span.active.disabled:not(:disabled):not(.disabled):active,.datepicker table tr td span.active.disabled:not(:disabled):not(.disabled).active,.show>.datepicker table tr td span.active.disabled.dropdown-toggle,.datepicker table tr td span.active.disabled:hover:not(:disabled):not(.disabled):active,.datepicker table tr td span.active.disabled:hover:not(:disabled):not(.disabled).active,.show>.datepicker table tr td span.active.disabled:hover.dropdown-toggle {
    color: #fff;
    background-color: #919ca6;
    border-color: #8a95a1
}

.datepicker table tr td span.active:not(:disabled):not(.disabled):active:focus,.datepicker table tr td span.active:not(:disabled):not(.disabled).active:focus,.show>.datepicker table tr td span.active.dropdown-toggle:focus,.datepicker table tr td span.active:hover:not(:disabled):not(.disabled):active:focus,.datepicker table tr td span.active:hover:not(:disabled):not(.disabled).active:focus,.show>.datepicker table tr td span.active:hover.dropdown-toggle:focus,.datepicker table tr td span.active.disabled:not(:disabled):not(.disabled):active:focus,.datepicker table tr td span.active.disabled:not(:disabled):not(.disabled).active:focus,.show>.datepicker table tr td span.active.disabled.dropdown-toggle:focus,.datepicker table tr td span.active.disabled:hover:not(:disabled):not(.disabled):active:focus,.datepicker table tr td span.active.disabled:hover:not(:disabled):not(.disabled).active:focus,.show>.datepicker table tr td span.active.disabled:hover.dropdown-toggle:focus {
    box-shadow: 0 0 0 2px rgba(185,192,199,.5)
}

.datepicker table tr td span.old,.datepicker table tr td span.new {
    color: #6c757d
}

.datepicker .datepicker-switch {
    width: 145px
}

.datepicker .datepicker-switch,.datepicker .prev,.datepicker .next,.datepicker tfoot tr th {
    cursor: pointer
}

.datepicker .datepicker-switch:hover,.datepicker .prev:hover,.datepicker .next:hover,.datepicker tfoot tr th:hover {
    background: #f8f9fa
}

.datepicker .prev.disabled,.datepicker .next.disabled {
    visibility: hidden
}

.datepicker .cw {
    font-size: 10px;
    width: 12px;
    padding: 0 2px 0 5px;
    vertical-align: middle
}

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Error text toggle */
.invalid-feedback-show {
    display: block;
    margin-top: 0.1px;
    position: relative;
    font-size: 0.8rem;
    margin-bottom: -0.5rem;
}

.invalid-feedback-show-m {
    display: block;
    position: relative;
    margin-top: 0.1rem;
    margin-bottom: -1rem;
}

.invalid-border-show {
    border-color: red;
}
.error-msg-close {
    float: right;
}

.suggested-assignment-row {
    background-color: #D3D3D3 !important;
}

/*Feedback button*/
.fixed-btn {
    position: fixed;
    bottom: 20px;
    right: 30px; 
    opacity: 0.5;
}

.fixed-btn:hover {
    opacity: 1;
}
.rounded-fixed-btn{
    height: 40px;
    width: 40px;  
    font-weight: bold;
    border-radius: 50%;
    background-color: var(--mdb-dark);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tabulator .tabulator-header .tabulator-col,
.tabulator .tabulator-row .tabulator-cell{
    border-right: 2px solid #dee2e6;
}


/*Media queries*/
@media screen and (max-width: 992px) {
    .help-view-content {
        flex-wrap: wrap;
    }

    .help-view-toc-container {
        position: initial;
        margin-bottom: 15px;
    }
    .user-preference-text {
        font-size: 10px;
    }
    .suggestions-popover {
        width: 95vw;
    }
}

@media screen and (min-width: 1024px) {
    .demand-detail-view__divider {
        border-right: 2px solid var(--mdb-border-color);
    }
}