/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

* {
    padding: 0;
    margin: 0;
}

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}


html {
    font-size: 16px;
    position: relative;
    min-height: 100%;
}


body {
    background-color: var(--body-back-color);
    font-family: Roboto,Arial,Verdana,sans-serif;
}





.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}





input.error {
    border: 1px solid red;
}

label.error {
    color: red;
}

.input-validation-error {
    border: 1px solid red
}


.progress-line, .progress-line:before {
    height: 3px;
    width: 100%;
    margin: 0;
}

.progress-line {
    background-color: #ffa9a3;
    display: -webkit-flex;
    display: flex;
}

    .progress-line:before {
        background-color: #e11304;
        content: '';
        -webkit-animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

@-webkit-keyframes running-progress {
    0% {
        margin-left: 0px;
        margin-right: 100%;
    }

    50% {
        margin-left: 25%;
        margin-right: 0%;
    }

    100% {
        margin-left: 100%;
        margin-right: 0;
    }
}

@keyframes running-progress {
    0% {
        margin-left: 0px;
        margin-right: 100%;
    }

    50% {
        margin-left: 25%;
        margin-right: 0%;
    }

    100% {
        margin-left: 100%;
        margin-right: 0;
    }
}

ul, ol {
    list-style-type: none;
}

.ppTree ul li {
    padding-left: 20px;
}

:focus {
    outline: none;
}





/*.select2-container .select2-selection--single {
    height: 31px;
}*/

.form-control {
    padding: 0 5px 0 5px;
}

.pp-control-container .form-control {
    font-size: inherit;
}




.pp-control-container .radioButtonContainer.horizontal {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.pp-control-container .radioButtonContainer.vertical {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ignoreMouseEvent {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#controlsContainer input[type="checkbox"],
#controlsContainer input[type="radio"] {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
}

.controlsContainer input[type="checkbox"],
.controlsContainer input[type="radio"] {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
}

/* Form scale. Dynamic controls are absolutely positioned in the pixel coordinate space the form designer
   authored, so the only way to make them bigger or smaller without the layout falling apart is to scale
   the whole surface - which is why this sits on the container and nothing else.

   --pp-form-scale is published per page by _FormScale.cshtml (the user's own setting from Edit profile,
   otherwise the site default from Manage - Settings), and the live preview in the profile drawer just
   rewrites it. The class is only present when the value is not 1: transform: scale(1) is still a
   transform, and it would make every form container a containing block for fixed-position descendants
   and a new stacking context for users who never touched this setting.

   The matching width / margin-bottom that keep the scaled box from overflowing its parent are set inline
   by _FormControlsPreview.cshtml, which is where the container's authored height is known. */
html.pp-form-scaled .controlsContainer.user-forms {
    transform: scale(var(--pp-form-scale, 1));
    transform-origin: top left;
}

#designContainer input[type="checkbox"],
#designContainer input[type="radio"] {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
}


.radioButtonContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .radioButtonContainer.textLeft {
        justify-content: space-between;
    }

        .radioButtonContainer.textLeft input {
            margin-left: 5px;
        }

    .radioButtonContainer.textRight input {
        margin-right: 5px;
    }

    .radioButtonContainer.textRight {
        justify-content: flex-start;
    }
/*
.radioItemContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.textLeft .radioItemContainer {
    justify-content: space-between;
}

.textRight .radioItemContainer {
    justify-content: flex-start;
}

    .textRight .radioItemContainer input {
        margin-right: 10px;
    }

.textLeft .radioItemContainer input {
    margin-left: 10px;
}*/

.pp-control-container table th {
    color: #636262;
    text-align: center;
    vertical-align: middle;
}


/*.pp-control-container table td {
    text-align: center;
    vertical-align: middle;
}*/

.width100 {
    width: 100%
}

.gridDesignRow {
    background-color: #eeeeee;
    margin: 5px 0px;
    border-radius: 8px;
}

.drawer-nav {
    overflow: auto
}

.pointerCursor {
    cursor: pointer;
}

.formCaption {
    text-align: center;
    border: 3px solid #55558d;
    padding: 10px;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 20px;
    color: #75bd10;
}

.ui-widget.ui-widget-content {
    z-index: 3000;
}

.drawer-nav {
    z-index: 49;
}

.drawer-overlay.drawer-toggle {
    z-index: 48;
}


.pp-control-container {
    position: absolute;
}

#toast-container > div {
    opacity: 0.95;
}

/*.ui-sortable-placeholder{
    width:100px;
}*/

.ui-sortable-placeholder {
}





kbd {
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    color: #fff;
    background-color: #212529;
    border-radius: 0.2rem;
    margin-left: 30px;
}



.validation-summary-errors {
    border: 1px solid red;
    padding: 10px;
    background-color: mistyrose;
}

.validationSummary ul {
    margin-bottom: 0;
}

.validationSummary li {
    color: red;
    font-size: 16px;
}

input[type='checkbox'].input-validation-error, input[type='radio'].input-validation-error {
    outline: 1px solid red;
}



.hasPlan .headerBtn {
    line-height: 1
}

.headerBtn {
    /*  max-width: 200px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;*/
}

.ui-widget-overlay {
    opacity: 0.7;
    background: black;
}

.ui-dialog .ui-dialog-titlebar {
    padding: 0.1em 1em;
}

.ui-widget {
    font-family: inherit;
    font-size: inherit;
}

    .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
        font-family: inherit;
    }


.ui-widget-header {
    color: #61491d;
    display: flex;
}

.no-close .ui-dialog-titlebar-close {
    display: none;
}


/*.select2-container table {
    width: 100%;
    border-collapse: collapse;
}*/


/*.select2-dropdown {
    width: auto !important;
    min-width: 300px;
}

.select2-container--open .select2-dropdown--below {
    border-top: 1px solid #aaa;
}

.select2-container tr.select2-results__option:nth-child(2n+1) {
    background-color: #eeeeee;
}
*/

/*
.select2-container td {
    padding: 6px;
    border: 1px solid #dddddd;
    width: 200px;
    color: black;
    white-space: nowrap;
    word-break: keep-all;
}*/

.SearchableComboItem {
    width: 150px;
    padding: 5px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.formField li.select2-results__option {
    display: flex;
    flex-direction: row;
}

.select2-dropdown {
    min-width: 300px;
}

.select2-container--open .select2-dropdown--below {
    border-top: 1px solid #aaa;
}
/*.SearchableComboItem.header {
    background-color: lightblue;
    text-align: center;
}*/
/*.select2-results {
    max-height: 300px;
    overflow-y: auto;
}*/
/*.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #5897fb !important;
    color: white !important;
}*/
.drawer-nav {
    width: 700px;
}

.drawer--left .drawer-nav {
    left: -700px;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #bab9b9 !important;
}

::-moz-placeholder { /* Firefox 19+ */
    color: #bab9b9 !important;
}

:-ms-input-placeholder { /* IE 10+ */
    color: #bab9b9 !important;
}

:-moz-placeholder { /* Firefox 18- */
    color: #bab9b9 !important;
}

.inProgressQuestionnierIcon {
    color: darkorange;
}

.completedQuestionnierIcon {
    color: lawngreen;
}



.hasActionInTopContainer {
    position: relative;
    top: 53px;
    z-index: 9;
}




/*#rightSideContainer {
    z-index: 5;
    position: absolute;
    top: 70px;
    left: 300px;
    right: 0;
    bottom: 0;
    overflow: auto;
}*/



.messagesContainer {
    padding: 10px;
    text-align: center;
    position: fixed;
    bottom: 13px;
    right: -300px;
    width: 252px;
    height: 102px;
    background-color: #fff492;
    border: 1px solid red;
    visibility: hidden;
    z-index: 30;
    transition: right 0.5s;
}

    .messagesContainer.open {
        right: 25px;
        visibility: visible;
    }

.pp-group-child {
    position: absolute;
}

    .pp-control-container[data-pptype="Label"] div.cnt, .pp-group-child[data-pptype="Label"] div.cnt,
    .pp-control-container[data-pptype="FormField"] div.cnt, .pp-group-child[data-pptype="FormField"] div.cnt {
        padding: 5px;
        width: 100%;
        height: 100%;
    }

.pp-control-container[data-pptype="Button"] input {
    font-weight: inherit;
    font-style: inherit;
    color: inherit;
}

.simulateTextBox {
    border: 1px solid gray !important;
    background-color: white !important;
    padding-left: 5px !important;
    border-radius: 3px !important;
}


#notfound {
    position: relative;
    height: 100vh;
}

    #notfound .notfound {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

.notfound {
    max-width: 560px;
    width: 100%;
    padding-left: 160px;
    line-height: 1.1;
}

    .notfound .notfound-404 {
        position: absolute;
        left: 0;
        top: 0;
        display: inline-block;
        width: 140px;
        height: 140px;
        background-image: url('../images/emoji.png');
        background-size: cover;
    }

        .notfound .notfound-404:before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-transform: scale(2.4);
            -ms-transform: scale(2.4);
            transform: scale(2.4);
            border-radius: 50%;
            background-color: #f2f5f8;
            z-index: -1;
        }

    .notfound h1 {
        font-family: 'Nunito', sans-serif;
        font-size: 65px;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 10px;
        color: #151723;
        text-transform: uppercase;
    }

    .notfound h2 {
        font-family: 'Nunito', sans-serif;
        font-size: 21px;
        font-weight: 400;
        margin: 0;
        text-transform: uppercase;
        color: #151723;
    }

    .notfound p {
        font-family: 'Nunito', sans-serif;
        color: gray;
        font-size: 21px;
    }

    .notfound a {
        font-family: 'Nunito', sans-serif;
        display: inline-block;
        font-weight: 700;
        border-radius: 40px;
        text-decoration: none;
        color: #388dbc;
    }


.pp-card-container {
    border: 1px solid #cccccc
}

.pp-card-header {
    background-color: #eeeeee;
    border-bottom: 1px solid #cccccc;
    text-align: center;
    padding: 5px
}

.pp-card-body {
    padding: 15px;
}


.ui-widget-shadow {
    -webkit-box-shadow: 0px 0px 5px #000000;
    box-shadow: 0px 0px 5px #000000;
}

/*.ui-widget-content {
    border: 1px solid #dddddd;
    background-color:#cccccc!important;
    color: #333333;
}*/

.grid_add_btn_container {
    white-space: nowrap
}

    .grid_add_btn_container button {
        margin-left: 5px;
    }

.ui-menu .ui-menu-item {
    white-space: nowrap;
}

#rightMobileMenuContainer {
    background-color: #313a46;
    padding: 10px;
    border-left: 1px solid #cccccc;
    width: 80%;
    position: fixed;
    top: 70px;
    right: 0;
    overflow: auto;
    z-index: 5;
    bottom: 0;
    display: none;
    font-size: 14px;
    color: #cecece;
}


.summary-row td {
    background-color: lightgray !important;
}

.completed-workflow-step {
    background-color: lightgreen;
}

input[type='radio']:focus, input[type='checkbox']:focus {
    outline: 1px solid #007bff
}

.bootstrap-tagsinput .tag {
    color: black;
    background-color: lightblue;
    padding: 1px 7px;
    margin: 5px;
    display: inline-block;
    font-size: 13px;
}

    .bootstrap-tagsinput .tag [data-role="remove"] {
        margin-left: 8px;
        cursor: pointer;
        background-color: #cccccc;
    }

#AddEditAction_inputContainer .bootstrap-tagsinput {
    width: 100%
}


.formDesignerHelpButton {
    position: fixed;
    bottom: -300px;
    right: 15px;
    visibility: hidden;
    z-index: 100;
    transition: bottom 0.5s;
    font-size: 55px;
}

    .formDesignerHelpButton.open {
        bottom: 15px;
        visibility: visible;
    }


.toolboxItemsSection .fa-angle-right {
    display: none;
}

.toolboxItemsSection.collapsed .fa-angle-right {
    display: inline-block;
}

.toolboxItemsSection.collapsed .fa-angle-down {
    display: none;
}

.toolboxItemsSection.collapsed .toolboxItem {
    display: none;
}

.toolboxItemSectionHeader {
    cursor: pointer
}

.toolboxContainer.collapsed .toolboxItem {
    padding: 5px;
}

.toolboxContainer.collapsed .toolboxItemSectionHeader span {
    display: none;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.availableStatusContainer li {
    padding: 3px;
    cursor: pointer;
}

    .availableStatusContainer li:hover {
        background-color: #dddddd;
    }

.pp-load-shader {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: black;
    opacity: .5;
    filter: alpha(opacity=50);
    display: none;
}

/* The spinner keyframes used to come from jsgrid-theme.css, which this app loaded globally.
   jsGrid is gone, so keep the definition here next to the rule that animates against it. */
@-webkit-keyframes indicator {
    from { -webkit-transform: rotate(0deg); }
    50%  { -webkit-transform: rotate(180deg); }
    to   { -webkit-transform: rotate(360deg); }
}

@keyframes indicator {
    from { transform: rotate(0deg); }
    50%  { transform: rotate(180deg); }
    to   { transform: rotate(360deg); }
}

.pp-load-panel:before {
    content: ' ';
    position: absolute;
    top: .5em;
    left: 50%;
    margin-left: -1em;
    width: 2em;
    height: 2em;
    border: 2px solid #009a67;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: indicator 1s linear infinite;
    animation: indicator 1s linear infinite;
}

.pp-load-panel {
    width: 15em;
    height: 5em;
    background: #fff;
    border: 1px solid #e9e9e9;
    padding-top: 3em;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -40px;
    margin-left: -120px;
    display: none;
}



.pp-load-shader.show {
    display: block;
    z-index: 3001;
}

.pp-load-panel.show {
    display: block;
    z-index: 3002;
}

.btnLoading.disabled i {
    display: none;
}

.btnLoading span {
    display: none;
}

.btnLoading.disabled span {
    display: inline-block;
}

.select2-results__option[aria-selected=true] {
    background-color: #98f6cd !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    color: black;
}




g.workflow-step.hovered .createLineHelper {
    display: inline-block !important;
}

.selectDisable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.selectEnable {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}




div[data-ppType='List'], div[data-ppType='Grid'] {
    overflow: auto;
}

div[data-pptype='AmountField'] input[type='text'].form-control,
div[data-pptype='NumberField'] input[type='text'].form-control,
div[data-pptype='CalculationField'] input[type='text'].form-control {
    text-align: right;
}

#Reportview_table_container th {
    white-space: nowrap;
}

#drawer-main-body {
    height: calc(100vh - 34px);
    overflow: auto;
    padding: 10px;
}

.global-search {
    outline: none;
    border: none;
    padding-left: 10px;
}

.global-search-result {
    position: absolute;
    top: calc(100% + 1px);
    background-color: white;
    left: 0;
    border: 1px solid gray;
    border-radius: 5px;
    display: none;
    max-height: 600px;
    overflow: auto;
    max-width: 800px;
}


    .global-search-result .message {
        width: 300px;
        padding: 10px;
        text-align: center;
    }


    .global-search-result td, .global-search-result th {
        padding: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .global-search-result th {
        top: 0;
        position: sticky;
        background-color: lightblue;
    }

    .global-search-result tbody tr:nth-child(2n+2) {
        background-color: #eeeeee;
    }

    .global-search-result tbody tr:hover {
        background-color: lightgreen;
    }

    .global-search-result table {
        width: 100%;
    }


.action-button-container {
    display: flex;
    gap: 3px;
    white-space: nowrap;
}

.maintenance-mode {
    position: fixed;
    top: 2px;
    z-index: 10;
    background-color: gold;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px;
    font-weight: bold;
    border-radius: 5px;
}

.info-container {
    background-color: lightyellow;
    padding: 10px;
    text-align: center;
    border: 1px solid #cccccc;
    margin-bottom: 10px;
}






.navbar {
    display: flex;
    height: 90px;
}

.navbar__left {
    display: flex;
    position: relative;
    z-index: 2;
}

.navbar__right {
    z-index: 1;
    position: relative;
    display: flex;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;
}


.btn-success {
    color: #fff !important;
}

.btn-sm {
    font-size: 0.875rem !important;
}

.btn-primary {
    color: #fff !important;
}

.btn {
    white-space: nowrap;
}

.wfTemplatesLegend {
    height: calc(100vh - 250px);
    overflow: auto;
}

.taskRow:hover {
    background-color: #dddddd;
}


.my-drawer-overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.3);
    z-index: 1050;
}

.my-drawer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 700px;
    background-color: white;
    transform: translateX(-100%);
    transition: transform 0.6s cubic-bezier(.19,1,.22,1), width 0.6s cubic-bezier(.19,1,.22,1), height 0.6s cubic-bezier(.19,1,.22,1), top 0.6s cubic-bezier(.19,1,.22,1), left 0.6s cubic-bezier(.19,1,.22,1);
    overflow: auto;
    z-index: 1050;
}

    .my-drawer.open {
        transform: translateX(0);
        z-index: 1050;
    }

    .my-drawer.minimized {
        left: calc(100vw - 320px);
        width: 300px !important;
        height: 45px;
        transform: translateX(0);
        border-radius: 8px 8px 0 0;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
        overflow: hidden;
        z-index: 1045 !important;
    }

    .my-drawer .drawer-footer {
        border-top: 1px solid #eee;
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        padding: 5px;
        display: flex;
        justify-content: center;
    }

    .my-drawer.minimized .drawer-footer,
    .my-drawer.minimized .drawer-body {
        display: none;
    }

.my-drawer-overlay.minimized-overlay {
    display: none;
}

/* Lifted while the form-scale slider in the Edit profile drawer is in use. The slider's whole purpose is
   watching the form beside the drawer resize, and a 30% black wash over it is the one thing in the way.
   Only the tint goes - the overlay still swallows clicks, so nothing behind it becomes reachable. */
.my-drawer-overlay {
    transition: background-color .15s linear;
}

.my-drawer-overlay.pp-preview-through {
    background-color: transparent;
}

/* Coloris appends its color picker to <body> at z-index:1000, which is below the
   drawer panel (z-index:1050). Inside a drawer that made the picker open behind
   the panel and steal focus, so the field looked like it "lost focus" and the
   picker never appeared. Raise it above the drawer. */
body .clr-picker {
    z-index: 1060;
}


.camera-container {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 50%;
    height: 300px;
    z-index: 20;
    background-color: white;
    border-radius: 10px;
    border: 1px solid #aaaaaa;
    box-shadow: 0px 0px 11px 4px #cccccc;
    text-align: center;
}

    .camera-container video {
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .camera-container .close2 {
        position: absolute;
        bottom: 10px;
        z-index: 2;
        left: 10px;
    }

    .camera-container .take {
        position: absolute;
        bottom: 10px;
        z-index: 2;
        right: 10px;
    }


.img-container {
    max-width: 100%;
    max-height: 100%;
    position: relative;
}

.pp-control-img-container {
    position: relative;
    border: 1px solid #cccccc;
}

    .pp-control-img-container button {
        position: absolute;
        top: 5px;
        left: 5px;
    }

    .pp-control-img-container img {
        max-width: 100%;
        max-height: 100%;
    }

.SearchableComboItem.header {
    background-color: #bab9b9;
}
/*
.formField li.select2-results__option:nth-child(2n) {
    background-color: #eee;
    color: black;
} */


.drop-zone {
    border: 1px dashed #cccccc;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    text-align: center;
    flex-direction: column;
    cursor: pointer;
}

    .drop-zone.hover,
    .drop-zone:hover {
        background-color: #eeeeee;
    }

.drop-zone__icon {
    width: 50px;
}

.drop-zone * {
    pointer-events: none;
}

.drop-zone__file-input {
    display: none;
}

.ps__rail-x {
    opacity: 1;
}


/*@media print {
    .pagebreak {
        page-break-before: always;
    }
}*/
.pagebreak {
    page-break-before: always;
}

/*div[data-pptype] {
    page-break-inside: avoid;
}
*/
/*.pp-control-container {
    page-break-inside: avoid;
}*/

[data-pptype="Label"] ul {
    padding-left: 40px;
    list-style-type: disc;
}

[data-pptype="Label"] ol {
    padding-left: 40px;
    list-style-type: decimal;
}

.pp-control-container .card {
    background-color: transparent;
}

.new-message-badge-icon {
    position: absolute;
    left: 22px;
    top: -13px;
    background-color: #8cffba;
    border-radius: 100%;
    display: inline-block;
    width: 22px;
    text-align: center;
    height: 22px;
    color: black;
    font-weight: bold;
    line-height: 1.7;
    font-size: 14px;
}

.new-message-animation {
    animation-name: ring-bell;
    animation-duration: 200ms;
    animation-timing-function: linear;
    animation-delay: 3s;
    animation-iteration-count: 10;
    transform-origin: center top;
}

@keyframes ring-bell {
    0% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(25deg);
    }

    50% {
        transform: rotate(0);
    }

    75% {
        transform: rotate(-25deg);
    }

    100% {
        transform: rotate(0);
    }
}

.message-body-divider {
    height: 1px;
    background-color: #cccccc;
}

.message-body {
    background-color: #f1f1f1;
    padding: 10px;
    border: 1px solid #cccccc;
    border-radius: 7px;
}

.form-row > .pp-control-container {
    position: static;
}

    .form-row > .pp-control-container[data-pptype="List"] {
        width: auto;
        height: auto;
    }


.w-50px {
    width: 50px
}

.w-50px {
    width: 50px;
}

.w-200px {
    width: 200px;
}


#MainContainerWithoutTree {
    z-index: 5;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}








#actionButtonsContainer {
    padding: 10px;
    background-color: #d5ecf1;
    border: 1px solid deepskyblue;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 10;
    height: 53px;
}



#rightSideContainer,
#actionButtonsContainer,
#MainContainerWithoutTree,
.formDesignerTreeViewContainer,
.toolboxContainer {
    top: 70px;
}

#rightSideContainer {
    z-index: 4;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}






.cursor-pointer {
    cursor: pointer;
}

.e-grid td.e-cellselectionbackground {
    background: lightgreen;
}

[data-ppType='DateField'] input.datepicker,
[data-ppType='DateAndTimeField'] input.datetimepicker {
    width: calc(100% - 23px);
    display: inline-block;
}

img.ui-datepicker-trigger {
    cursor: pointer;
}



.paste-cursor .e-spreadsheet .e-table {
    cursor: copy;
}



@media print {
    .no-print {
        display: none !important;
    }
}


.json-key {
    font-weight: bold;
}

.json-value {
    color: #3A33D1;
}


.global-search::placeholder {
    color: gray !important;
}

.show-all-plan-switch {
    white-space: nowrap;
}

.is-watermark {
    opacity: 0.10;
    pointer-events: none;
    user-select: none;
    z-index: 2147483647 !important;
    /* fixed -> stays pinned to the screen while the form scrolls, centered on the viewport */
    position: fixed !important;
    top: calc(50% + 50px) !important;
    left: calc(50% + 130px) !important;
    transform: translate(-50%, -50%) !important;
    width: 90% !important;
    height: auto !important;
    margin: 0 !important;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    /* responsive: scales with viewport so it stays visible on small desktop monitors, capped at 400px on large ones */
    font-size: clamp(60px, 18vw, 400px) !important;
    line-height: 1.05;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

    .is-watermark * {
        font-size: inherit !important;
    }

.pdf-container .pp-control-container,
.pdf-container .pp-group-child {
    position: static;
    width: 100% !important;
    height: auto !important;
    margin-top: 10px;
    page-break-inside: avoid;
}

.pdf-container .form-control,
.pdf-container .btn {
    width: auto !important;
}

.pdf-container input,
.pdf-container select,
.pdf-container textarea {
    min-height: 30px;
}


[data-pptype="CheckBox"] p, [data-pptype="Label"] p, [data-pptype="Link"] p, [data-pptype="RadioButton"] p, [data-pptype="RadioItem"] p {
    margin-bottom: 0;
}

.unselectable {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera, and Safari */
}

.vis-hidden {
    visibility: hidden;
}

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

.note-field-control-simulation {
    border: 1px solid #cccccc;
    background-color: white;
    padding: 5px;
    min-height: 100px;
    border-radius: 10px;
}

.e-richtexteditor .e-content ol {
    list-style-type: decimal;
}

[data-ppType='MaskedTextBox'] .e-control-wrapper.e-mask.e-input-group {
    height: 100%
}

.d-none {
    display: none
}

.free-drawing-pane {
    border: 1px solid black;
    width: 100%;
    height: 100%;
    touch-action: none;
}

fieldset {
    border: 2px solid #007BFF; /* Blue border */
    border-radius: 8px; /* Rounded corners */
    padding: 0 15px; /* Spacing inside the box */
    font-size: 15px;
}

legend {
    font-weight: bold;
    color: #007BFF;
    width: auto !important;
    margin-bottom: 0 !important;
    font-size: 16px !important;
}

.filters-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.header-status-color-container {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-top: 10px;
}

/*.e-popup.e-popup-open.e-dialog {
    width: auto !important;
    min-width:400px!important;
}*/

.e-dialog.e-popup {
    width: auto;
}

.e-popup.e-popup-open.e-dialog {
    max-height: 100% !important;
}


.select2-dropdown {
    z-index: 200000;
}
/*
.form-label {
    color: #212529;
    font-size: 14px;
    font-weight: normal;
    white-space: nowrap
}*/

.e-pagerexternalmsg {
    font-weight: bold;
    color: red;
    font-size: 14px;
}



.select2-selection__rendered::before {
    content: "\f002";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: gray;
    margin-right: 5px;
}

.select2-container .select2-selection--single {
    height: 32px;
}

[data-pptype="WorkflowItem"] .workflow-item-row {
    height: 100%;
    border: 1px solid #cccccc;
    overflow: hidden;
    padding: 5px;
}

.workflow-item-row.status-notstarted {
    background-color: #f1f3f5;
    color: #495057;
}

.workflow-item-row.status-inprogress {
    background-color: #e7f1ff;
    color: #084298;
}

.workflow-item-row.status-overdue {
    background-color: #fdecea;
    color: #b02a37;
}

.workflow-item-row.status-onhold {
    background-color: #fff3cd;
    color: #664d03;
}

.workflow-item-row.status-complete {
    background-color: #e6f4ea;
    color: #0f5132;
}


.workflow-item-row.empty {
    background-color: #eeeeee;
    color: #0f5132;
}

.workflow-item-row .completed-status-title {
    font-size: 12px;
    padding: 1px 6px;
    background-color: #28a745;
    border-color: #28a745;
    color: white;
    border-radius: 5px;
}


.workflow-project table {
    border-collapse: collapse !important;
}

    .workflow-project table td {
        border: 1px solid gray !important;
    }

    .workflow-project table tr:hover td {
        background-color: wheat !important;
    }

.toolbar_recordCount {
    font-size: 15px;
}

/* "Simple grid" checkbox: it sits in a strip of padding added to the top of the FormGrid control's box,
   so the grid keeps the height:100% that Syncfusion needs to stretch it over whatever room is left.
   Do NOT give .simpleGridHost a position - it is .pp-control-container (absolute) and already the
   positioned ancestor the strip below is placed against; a position here would win and break the form
   layout, since both are single-class selectors and this rule comes later in the file. */
.simpleGridHost {
    box-sizing: border-box;
    padding-top: 26px;
}

.simpleGridToggle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 26px;
    display: flex;
    align-items: center;
}

.simpleGridToggle label {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 0;
    font-size: 14px;
    color: #495057;
    cursor: pointer;
}

.simpleGridToggle input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}


.one-line {
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.two-line {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.three-line {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-pptype="WorkflowItem"] .value {
    font-weight: 500;
    color: black;
}

[data-pptype="WorkflowItem"] {
    font-size: 14px
}

.btn-sm2 {
    font-size: 0.775rem !important;
    padding: 0.275rem 0.65rem;
}

.btn-sm3 {
    font-size: 12px !important;
    padding: 2px 7px !important;
}

.initial-rbk.pdf-form [data-pptype],
.initial-rbk.pdf-form [data-pptype] * {
    font-family: 'arial' !important;
}

.pp-control-label-like input {
    background-color: transparent !important;
    border: 0 !important;
}

.pp-control-left-align input {
    text-align: left !important;
}


.e-grid .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-search {
    opacity: 1 !important;
}

.workflow-item-row .actions-buttons {
    display: flex;
    gap: 5px;
    align-items: center;
}

.workflow-item-row .row-1 {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    border-bottom: 1px solid #cccccc;
    padding: 0 0 3px 0;
}

.workflow-item-row .row-2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 12px;
}

.e-control .fa, .e-control .fas {
    font-weight: 900 !important;
    font-family: "Font Awesome 5 Free" !important;
}


.custom-control-label {
    font-size: 14px;
    padding-top: 2px;
}




.bulletin-board {
    background-color: #dcb37b;
    background-image: radial-gradient(#c29352 15%, transparent 16%), radial-gradient(#c29352 15%, transparent 16%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
    border: 0.75rem solid #5c4033;
    border-radius: 8px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), 0 8px 15px rgba(0, 0, 0, 0.3);
    padding: 1.5rem;
    min-height: 140px;
}

    .bulletin-board .board-note {
        position: relative;
        padding: 10px;
        box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.25);
        border-radius: 2px 2px 10px 2px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        width: 100%;
        min-height: 90px;
    }

    .bulletin-board .note-yellow {
        background-color: #fdfd86;
    }

    .bulletin-board .board-note .pin {
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 1.5rem;
        text-shadow: 1px 3px 3px rgba(0,0,0,0.4);
        z-index: 2;
    }

    .bulletin-board .pin-red {
        color: #d9534f;
    }

    .bulletin-board .pin-blue {
        color: #0275d8;
    }

    .bulletin-board .board-note .note-text {
        font-size: 14px;
        line-height: 1.7;
        color: #333;
        text-align: center;
        margin-top: 26px;
    }

.filter-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    padding: 20px;
    margin-bottom: 20px;
}



.show-all-clients-wrapper {
    position: absolute;
    top: -18px;
    right: 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-weight: bold;
}


.filter-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 5px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


.mainTreeViewContainer {
    background-color: #313a46;
    padding: 10px;
    border-right: 1px solid #cccccc;
    width: 300px;
    position: fixed;
    left: 0;
    overflow: auto;
    border: 0;
    z-index: 5;
    bottom: 0;
    top: 0;
}

ul.fancytree-container {
    font-family: Roboto,Arial,Verdana,sans-serif;
    font-size: 14px;
    outline: none;
    border: none !important;
}

.fancytree-in-dark-bg ul.fancytree-container {
    background-color: #313a46 !important;
    color: #ced4da;
}

.fancytree-in-dark-bg span.fancytree-title {
    color: #cecece !important;
}

.fancytree-in-dark-bg .fancytree-node:hover span.fancytree-title {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

.fancytree-in-dark-bg .fancytree-treefocus .fancytree-node.fancytree-active span.fancytree-title,
.fancytree-in-dark-bg .fancytree-node.fancytree-active span.fancytree-title {
    background-color: #3b82f6 !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

.fancytree-in-dark-bg .fancytree-container .fancytree-node.fancytree-match span.fancytree-title,
.fancytree-in-dark-bg .fancytree-container .fancytree-node.fancytree-submatch span.fancytree-title {
    color: #cecece !important;
}

.fancytree-in-dark-bg span.fancytree-title mark {
    background-color: rgba(255, 209, 102, 0.2) !important;
    color: #ffd166 !important;
    border-radius: 3px;
    padding: 0;
    font-weight: bold;
}

.fancytree-in-dark-bg .fancytree-expander {
    filter: brightness(2) contrast(0.8);
}


.fancytree-ext-filter-hide tr.fancytree-submatch span.fancytree-title,
.fancytree-ext-filter-hide span.fancytree-node.fancytree-submatch span.fancytree-title {
    font-weight: 400;
}

.edit-report-record [data-is-syncfusion-grid] {
    height: auto !important;
}

.drag-handle {
    cursor: grab;
    font-size: 20px;
    color: #888;
}

    .drag-handle:active {
        cursor: grabbing;
    }

.table-criterias .select_andor {
    min-width: 100px;
}


.table-criterias .select_opr {
    min-width: 100px;
}

.table-criterias .td-value input,
.table-criterias .td-value select {
    min-width: 150px;
}



/********* Header ***********/
#clientsCount {
    font-size: 15px;
    font-weight: bold;
    white-space: nowrap;
}

.desktop-header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10;
}

    .desktop-header .header-bottom .globalSearchContainer {
        display: flex;
        align-items: center;
        background-color: white;
        padding: 1px 1px 1px 5px;
        border-radius: 4px;
    }

        .desktop-header .header-bottom .globalSearchContainer input {
            font-size: 14px;
        }

    .desktop-header .header-top .dropdowns-container {
        display: flex;
        align-items: center;
        padding-top: 10px;
        gap: 5px;
    }

    .desktop-header .header-top .buttons-container {
        display: flex;
        align-items: center;
        margin-left: auto;
    }

    .desktop-header .header-top .select-employer-wrapper {
        width: 300px;
    }

    /* Plan names are the longest values in the header, so this dropdown gets the extra room and only
       shrinks back to the employer dropdown's width when the window is too narrow to give it. */
    .desktop-header .header-top .select-plan-wrapper {
        width: clamp(300px, 32vw, 480px);
    }

    .desktop-header #headerNavigationMenu .e-menu-item {
        padding-left: 30px;
        font-family: Roboto, Arial, Verdana, sans-serif;
        font-size: 16px;
    }

        .desktop-header #headerNavigationMenu .e-menu-item .e-caret,
        .desktop-header #headerNavigationMenu .e-menu-item .e-caret {
            color: white;
            margin-left: 20px;
        }

        .desktop-header #headerNavigationMenu .e-menu-item.e-focused,
        .desktop-header #headerNavigationMenu .e-menu-url {
            color: white;
        }

        .desktop-header #headerNavigationMenu .e-menu-item.e-selected {
            background-color: transparent !important;
            color: white;
        }

            .desktop-header #headerNavigationMenu .e-menu-item.e-selected .e-caret {
                color: white !important;
            }

    .desktop-header #headerNavigationMenu.e-menu {
        background-color: transparent;
        color: white;
        padding-top: 5px;
    }

.header-bottom {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background-color: #343a40 !important;
    column-gap: 10px;
}

.header-bottom__left-container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.header-top {
    height: 57px;
    display: flex;
    padding: 0 10px;
}

#clientScrollsContainer {
    justify-content: flex-start;
    height: 100%;
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    max-width: calc(100vw - 300px);
    padding-bottom: 10px;
}


.main-header__profile-icon {
    left: initial !important;
    right: 0 !important;
    transform: translate3d(0, 31px, 0px) !important;
}

.mobile-custom-sidebar {
    position: fixed;
    top: 0;
    width: 350px;
    height: 100vh;
    z-index: 1050;
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
}

.mobile-header {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

    .mobile-header .client-name {
        font-size: 14px;
        font-weight: bold;
    }

.mobile-sidebar {
    left: 0;
    transform: translateX(-100%);
    background-color: #313a46;
}

    .mobile-sidebar .mainTreeViewContainer {
        width: 100%;
        position: static !important;
    }

    .mobile-sidebar.mobile-open {
        transform: translateX(0);
    }

.mobile-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

    .mobile-menu-backdrop.mobile-show {
        opacity: 1;
        visibility: visible;
    }

.mobile-sidebar__header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: darkslategray;
    height: 50px;
}

    .mobile-sidebar__header .close-sidebar {
        color: red;
        font-size: 25px;
        margin-right: 10px;
        margin-left: 20px;
    }

.mobile-sidebar .buttons-container {
    display: flex;
    justify-content: flex-end;
    background-color: darkslategray;
    padding: 10px;
}

.mobile-sidebar .dropdowns-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
}




.mobile-sidebar .select-plan-wrapper,
.mobile-sidebar .select-employer-wrapper,
.mobile-sidebar .select-status-wrapper {
    width: 100%;
}

    .mobile-sidebar .select-plan-wrapper .count,
    .mobile-sidebar .select-employer-wrapper .count,
    .mobile-sidebar .select-status-wrapper .count,
    .mobile-sidebar .show-all-clients-wrapper {
        color: white;
    }

    .mobile-sidebar .select-status-wrapper select {
        width: 100% !important;
    }

.select-plan-wrapper,
.select-employer-wrapper,
.select-status-wrapper {
    position: relative;
}

    .select-plan-wrapper .count,
    .select-employer-wrapper .count,
    .select-status-wrapper .count {
        position: absolute;
        left: 0;
        top: -18px;
        font-size: 14px;
        color: black;
        font-weight: bold;
    }


/********* Header ***********/



.quick-fact-tree-value,
.quick-fact-tree-value a {
    color: gold !important;
    font-weight: bold !important;
}


.btn-run {
    background-color: #28a745 !important;
    color: #ffffff !important;
}

.btn-edit {
    background-color: #ffc107 !important;
    color: #000000 !important;
}

.btn-edit-query {
    background-color: #6f42c1 !important;
    color: #ffffff !important;
}

.btn-view-data {
    background-color: #17a2b8 !important;
    color: #ffffff !important;
}

.btn-attachments {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

.btn-preview {
    background-color: #007bff !important;
    color: #ffffff !important;
}

.btn-save {
    background-color: #198754 !important;
    color: #ffffff !important;
}

.btn-back {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border: 1px solid #ced4da !important;
}

.btn-view-sql {
    background-color: #343a40 !important;
    color: #ffffff !important;
}


.btn-run:hover {
    background-color: #218838 !important;
    color: #ffffff !important;
}

.btn-edit:hover {
    background-color: #e0a800 !important;
    color: #212529 !important;
}

.btn-edit-query:hover {
    background-color: #5a32a3 !important;
    color: #ffffff !important;
}

.btn-view-data:hover {
    background-color: #138496 !important;
    color: #ffffff !important;
}

.btn-attachments:hover {
    background-color: #5a6268 !important;
    color: #ffffff !important;
}

.btn-preview:hover {
    background-color: #0069d9 !important;
    color: #ffffff !important;
}

.btn-save:hover {
    background-color: #157347 !important;
    color: #ffffff !important;
}

.btn-back:hover {
    background-color: #e2e6ea !important;
    color: #212529 !important;
}

.btn-view-sql:hover {
    background-color: #23272b !important;
    color: #ffffff !important;
}


.without-tree-container main {
    margin-top: 106px;
}



.itb-block {
    border: 1px solid #d8dce5;
    border-left: 3px solid #0d6efd;
    border-radius: 4px;
    padding: 8px;
    margin: 6px 0;
    background: #fff
}

.itb-branch-head {
    gap: 6px;
    margin-bottom: 4px
}

.itb-cond {
    background: #f5f7fa;
    border: 1px solid #e3e7ee;
    border-radius: 3px;
    padding: 2px 6px;
    overflow: auto
}

.itb-body {
    margin: 4px 0 4px 14px;
    padding-left: 8px;
    border-left: 2px dashed #e0e0e0
}

.itb-item {
    margin: 6px 0
}

.itb-block-bar, .itb-body-bar {
    margin-top: 6px
}

.itb-preview {
    white-space: pre-wrap;
    background: #1e1e1e;
    color: #d4d4d4;
    border-radius: 4px;
    padding: 10px;
    font-size: 12px;
    max-height: 220px;
    overflow: auto
}

.itb-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    line-height: 1;
    padding: 3px 8px;
    margin-right: 6px;
    border: 1px solid #cfd6e4;
    border-radius: 4px;
    background: #fff;
    color: #3b4a66;
    cursor: pointer
}

    .itb-add:hover {
        background: #f1f4f9;
        border-color: #9fb0cc
    }

    .itb-add svg {
        width: 12px;
        height: 12px
    }

.itb-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #8a93a6;
    cursor: pointer
}

    .itb-ic svg {
        width: 14px;
        height: 14px
    }

    .itb-ic:hover {
        background: #eef1f6;
        color: #3b4a66
    }

    .itb-ic.danger:hover {
        background: #fdecec;
        color: #d9534f
    }



.modal-controls .custom-ctrl-btn {
    background-color: transparent;
    border: none;
    color: #6c757d;
    padding: 8px 12px;
    margin-left: 13px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}


.modal-controls .minimize-btn:hover {
    background-color: #a6a6a6;
    color: #ffffff;
}


.modal-controls .close-btn:hover {
    background-color: #dc3545;
    color: #ffffff;
}

.input-group > .e-multiselect.email-ms {
    flex: 1 1 auto;
    width: 1% !important;
    margin-left: -1px;
}

    .input-group > .e-multiselect.email-ms,
    .input-group > .e-multiselect.email-ms .e-multi-select-wrapper {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

.email-ms-item {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.email-ms-name {
    font-size: 13px;
    font-weight: 500;
    color: #202124;
}

.email-ms-email {
    font-size: 12px;
    color: #5f6368;
}

body .clr-picker {
    z-index: 1060;
}



[data-pptype="FileUpload"], [data-pptype="LocalFiles"] {
    overflow: auto;
}


/* FeeSchedule form control (_FormControlPreview.cshtml -> createFeeScheduleFormControl). It is a dense
   table of items / unit costs / quantities / amounts, which reads better a couple of sizes below the 16px
   form text. Scoped to the control's own container, so the fee schedule designer trees are untouched. The
   font-awesome icons and the .form-control-sm heights are em-based, so they scale down with the text. */
.fee-schedule-control {
    font-size: 12px;
}

    .fee-schedule-control .table th,
    .fee-schedule-control .table td {
        padding: 0.2rem 0.35rem;
        vertical-align: middle;
    }

    .fee-schedule-control .form-control,
    .fee-schedule-control .form-control-sm {
        font-size: 12px;
    }

    /* site.css marks .btn-sm font-size !important, so the toolbar buttons need it back. */
    .fee-schedule-control .btn {
        font-size: 12px !important;
        padding: 0.15rem 0.5rem;
    }

    .fee-schedule-control .badge {
        font-size: 11px;
    }


/* LocalFiles form control (_FormControlPreview.cshtml): the pill above the file list showing which
   folder on the user's computer the browser may read those files from, plus the button that grants
   another one. Browsers never reveal a granted folder's absolute path, so the path shown is
   reconstructed from the listed files where possible (localFilesFolderDisplayPath) and truncated
   with an ellipsis — the control is only ~380px wide by default. */
.local-files-folder {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding: 2px 8px;
    border: 1px solid #e3e6ea;
    border-radius: 999px;
    background: #f8f9fa;
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
}

    .local-files-folder .lf-label {
        flex: 0 0 auto;
    }

    .local-files-folder .lf-path {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 600;
        color: #1f2937;
    }

    .local-files-folder .lf-status {
        flex: 0 0 auto;
        font-size: 11px;
        font-weight: 600;
        padding: 1px 8px;
        border-radius: 999px;
    }

        .local-files-folder .lf-status.ok {
            background: #e7f6ec;
            color: #137333;
        }

        .local-files-folder .lf-status.warn {
            background: #fef3e2;
            color: #b45309;
        }

        .local-files-folder .lf-status.none {
            background: #fdecec;
            color: #b42318;
        }

    .local-files-folder .lf-change {
        flex: 0 0 auto;
        font-size: 12px;
        padding: 1px 6px;
        border: none;
        background: transparent;
        color: #1a73e8;
        cursor: pointer;
    }

        .local-files-folder .lf-change:hover {
            text-decoration: underline;
        }


a#CybotCookiebotDialogPoweredbyCybot,
div#CybotCookiebotDialogPoweredByText {
    display: none;
}

#CookiebotWidget .CookiebotWidget-body .CookiebotWidget-main-logo {
    display: none;
}