/* Minification failed. Returning unminified contents.
(1133,21): run-time error CSS1039: Token not allowed after unary operator: '-fc-small-font-size'
(1176,19): run-time error CSS1039: Token not allowed after unary operator: '-spacing-3'
(1376,19): run-time error CSS1039: Token not allowed after unary operator: '-spacing-3'
(1431,15): run-time error CSS1039: Token not allowed after unary operator: '-scroll-y'
(1433,35): run-time error CSS1039: Token not allowed after unary operator: '-scroll-offset'
(1439,33): run-time error CSS1030: Expected identifier, found '*'
(1439,34): run-time error CSS1031: Expected selector, found ')'
(1439,34): run-time error CSS1025: Expected comma or open brace, found ')'
(1503,31): run-time error CSS1030: Expected identifier, found '.'
(1503,42): run-time error CSS1031: Expected selector, found ')'
(1503,42): run-time error CSS1025: Expected comma or open brace, found ')'
(1779,32): run-time error CSS1030: Expected identifier, found '.'
(1779,43): run-time error CSS1031: Expected selector, found ')'
(1779,43): run-time error CSS1025: Expected comma or open brace, found ')'
(1848,26): run-time error CSS1030: Expected identifier, found '.'
(1848,37): run-time error CSS1031: Expected selector, found ')'
(1848,37): run-time error CSS1025: Expected comma or open brace, found ')'
(1859,30): run-time error CSS1030: Expected identifier, found '.'
(1859,41): run-time error CSS1031: Expected selector, found ')'
(1859,41): run-time error CSS1025: Expected comma or open brace, found ')'
(1912,22): run-time error CSS1030: Expected identifier, found '.'
(1912,33): run-time error CSS1031: Expected selector, found ')'
(1912,33): run-time error CSS1025: Expected comma or open brace, found ')'
(2395,36): run-time error CSS1030: Expected identifier, found '.'
(2395,46): run-time error CSS1031: Expected selector, found ')'
(2395,46): run-time error CSS1025: Expected comma or open brace, found ')'
(2396,77): run-time error CSS1030: Expected identifier, found '.'
(2396,78): run-time error CSS1030: Expected identifier, found 'has-error'
(2396,87): run-time error CSS1031: Expected selector, found ')'
(2396,87): run-time error CSS1025: Expected comma or open brace, found ')'
(2433,61): run-time error CSS1030: Expected identifier, found ':'
(2433,69): run-time error CSS1031: Expected selector, found ')'
(2433,69): run-time error CSS1025: Expected comma or open brace, found ')'
(2435,61): run-time error CSS1030: Expected identifier, found ':'
(2435,75): run-time error CSS1031: Expected selector, found ')'
(2435,75): run-time error CSS1025: Expected comma or open brace, found ')'
(2441,78): run-time error CSS1030: Expected identifier, found ':'
(2441,86): run-time error CSS1031: Expected selector, found ')'
(2441,86): run-time error CSS1025: Expected comma or open brace, found ')'
(2522,35): run-time error CSS1030: Expected identifier, found '>'
(2522,48): run-time error CSS1031: Expected selector, found ')'
(2522,48): run-time error CSS1025: Expected comma or open brace, found ')'
(2524,35): run-time error CSS1030: Expected identifier, found '>'
(2524,60): run-time error CSS1031: Expected selector, found ')'
(2524,60): run-time error CSS1025: Expected comma or open brace, found ')'
(2540,68): run-time error CSS1030: Expected identifier, found ':'
(2540,69): run-time error CSS1030: Expected identifier, found 'not('
(2540,79): run-time error CSS1031: Expected selector, found ')'
(2540,79): run-time error CSS1025: Expected comma or open brace, found ')'
(2588,50): run-time error CSS1030: Expected identifier, found '>'
(2588,72): run-time error CSS1031: Expected selector, found ')'
(2588,72): run-time error CSS1025: Expected comma or open brace, found ')'
(2607,40): run-time error CSS1030: Expected identifier, found '>'
(2607,74): run-time error CSS1031: Expected selector, found ')'
(2607,74): run-time error CSS1025: Expected comma or open brace, found ')'
(2610,40): run-time error CSS1030: Expected identifier, found '>'
(2610,74): run-time error CSS1031: Expected selector, found ')'
(2610,74): run-time error CSS1025: Expected comma or open brace, found ')'
(2612,40): run-time error CSS1030: Expected identifier, found '>'
(2612,74): run-time error CSS1031: Expected selector, found ')'
(2612,74): run-time error CSS1025: Expected comma or open brace, found ')'
(2613,40): run-time error CSS1030: Expected identifier, found '>'
(2613,74): run-time error CSS1031: Expected selector, found ')'
(2613,74): run-time error CSS1025: Expected comma or open brace, found ')'
(2614,40): run-time error CSS1030: Expected identifier, found '>'
(2614,74): run-time error CSS1031: Expected selector, found ')'
(2614,74): run-time error CSS1025: Expected comma or open brace, found ')'
(2615,46): run-time error CSS1030: Expected identifier, found '>'
(2615,74): run-time error CSS1031: Expected selector, found ')'
(2615,74): run-time error CSS1025: Expected comma or open brace, found ')'
(2618,46): run-time error CSS1030: Expected identifier, found '>'
(2618,74): run-time error CSS1031: Expected selector, found ')'
(2618,74): run-time error CSS1025: Expected comma or open brace, found ')'
(2621,39): run-time error CSS1030: Expected identifier, found '>'
(2621,73): run-time error CSS1031: Expected selector, found ')'
(2621,73): run-time error CSS1025: Expected comma or open brace, found ')'
(2669,40): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2670,42): run-time error CSS1030: Expected identifier, found '.'
(2670,53): run-time error CSS1031: Expected selector, found ')'
(2670,53): run-time error CSS1025: Expected comma or open brace, found ')'
(2671,42): run-time error CSS1030: Expected identifier, found '.'
(2671,50): run-time error CSS1031: Expected selector, found ')'
(2671,50): run-time error CSS1025: Expected comma or open brace, found ')'
(2672,42): run-time error CSS1030: Expected identifier, found '.'
(2672,53): run-time error CSS1031: Expected selector, found ')'
(2672,53): run-time error CSS1025: Expected comma or open brace, found ')'
(2673,81): run-time error CSS1039: Token not allowed after unary operator: '-q-head-extra'
(2674,113): run-time error CSS1039: Token not allowed after unary operator: '-q-head-extra'
(2675,112): run-time error CSS1039: Token not allowed after unary operator: '-q-head-extra'
 */

/* making the switch divs in the _layout.cshtml behave in a maner that allows the footer to be snaped to the bottom as it should */
.switch-div {
    height: 100%;
}

.datepicker ul {
    width: 317px !important;
}

.datepicker table {
    width: 315px !important;
}

.datepicker button {
    height: 35px !important;
}

.timepicker-wrapper ul {
    min-width: 120px !important;
}

    .timepicker-wrapper ul li table {
        margin-left: auto;
        margin-right: auto;
    }

.my-upload {
    margin-top: 10px;
}

.fs16px {
    font-size: 16px;
    font-weight: 300;
}

.btn-small {
    width: 30px;
    padding-right: 5px;
    padding-left: 5px;
}

.table-responsive td {
    white-space: normal;
}

.ellipsis {
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.no-wrap {
    white-space: nowrap;
}

/* Style when highlighting a search. */
.highlight-yellow {
    font-weight: bold;
    background-color: yellow;
    vertical-align: inherit;
}

.editable-sm-col {
    width: 70px;
}
.editable-sm-col .editable-wrap .editable-controls .editable-input {
    width: 50px;
    padding-right: 5px;
    padding-left: 5px;
}
.editable-select-col {
    width: 190px;
    position:relative;
}
    .editable-select-col .editable-wrap {
        width: 185px;
    }
.editable-wrap,
.editable-wrap .editable-input {
    width: 100%;
}
.editable-wrap .editable-controls .editable-input .ui-select-match {
    min-width: 185px;
}

.editable-note span {
    width:100% !important;
}
    .editable-note span span input[type="text"] {
        width: 100% !important;
        overflow-x: hidden;
    }
/* fixing overflow issue when using with xeditable inside table*/
td .ui-select-inside-table-xeditable.open {
    position: absolute;
    margin-top: -2.4rem;
    width:185px !important;
    left:4px;    
}

td .has-error .ui-select-inside-table-xeditable.open {
    margin-top:-3.8rem;
}
.editable-select-col .editable-error {
    position: absolute;
    margin-top:0.1rem;
}
td .ui-select-inside-table-xeditable a {
    margin-right:0 !important;
}
.ui-select-match-text {
    width:80%;
}
    .ui-select-match-text span {
        display: block;
        text-overflow:ellipsis;
        overflow-x:hidden;
    }

.ui-select-placeholder {
    display: block;
    text-overflow:ellipsis;
    overflow-x:hidden;
}
.dashboard-filter-form .ui-select-bootstrap .ui-select-choices {
    width: auto;
}
.dashboard-filter-form .form-control {
    padding-right: 10px;
    padding-left: 10px;
}
.word-break {
    -ms-word-wrap: break-word !important;
    word-wrap: break-word !important;
    white-space: normal !important;
}

@font-face {
  font-family: 'open-sans-v13-latin-regular';
  src: url('/content/fonts/open-sans-v13-latin-regular.eot');
  src: url('/content/fonts/open-sans-v13-latin-regular.eot?#iefix') format('embedded-opentype'), url('/content/fonts/open-sans-v13-latin-regular.woff2') format('woff2'), url('/content/fonts/open-sans-v13-latin-regular.woff') format('woff'), url('/content/fonts/open-sans-v13-latin-regular.ttf') format('truetype'), url('/content/fonts/open-sans-v13-latin-regular.svg#open-sans-v13-latin-regular') format('svg');
  font-display: swap;
}
.public-wrapper {
    overflow:hidden;
    font-size: 16px;
}
    .public-wrapper .table-responsive {
        padding-bottom: 20px;
    }
.rectangle {
    padding: 6px; 
    background-color: white; 
    border: #cbc6c6 1px solid;
}
.rectangle-transparent {
    padding: 6px; 
    background-color: transparent; 
    border: #cbc6c6 1px solid;
    margin-bottom: 6px;
}
.addon-text {
    background-color:transparent;
    border:none;
}

.gp {
    margin-top:0;
    margin-bottom:0;
}

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    width:100%;
}

.fileUploadPath {
    border: 1px dashed #dddddd;
    background-color:#edf1f2;
}


.my-container {
    position: relative;
    padding-bottom: 90%;
    height: 0;
    overflow: hidden;
}
@media(max-width:768px) {
    .my-container {
        padding-bottom: 210%;
    }
}

.my-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

.my-container-1 {
    position: relative;
    height: 0;
    overflow: hidden;
}

.logo-no-circle {
    max-width: 80%;
}
/*
.my-messages {
}
.my-messages.ng-active {
  // messages are visible 
}
.my-messages.ng-inactive {
  // messages are hidden
}
*/
.some-message {
    white-space:normal;
}
/*
.some-message.ng-enter {}
.some-message.ng-enter.ng-enter-active {}

.some-message.ng-leave {}
.some-message.ng-leave.ng-leave-active {}

[ng-message].ng-enter,[ng-message].ng-leave{
}

[ng-message].ng-enter, [ng-message].ng-leave-active{
}

[ng-message].ng-enter-active, [ng-message].ng-leave{
}
*/
.editable-error {
    white-space:normal;
}

.wrap-me{
    white-space: normal;
}

.upload-file-in-table{
    max-height: 400px;
    overflow-y: auto;
}


.disabledbutton {
    pointer-events: none;
    opacity: 0.4;
}

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -35px;
  margin-left: -35px;
}
.centered-view {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -35px;
  margin-left: -35px;
}

.c-checkbox span {
    display: inline-block;
}

.c-checkbox div {
    display: inline;
}

#section-login {
    height:100%;
}

.sp-replacer {
    border-color: #d6d6d6 !important;
    background: #ffffff !important;
    color: #333333 !important;
    padding: 6px !important;
    line-height: 1.52857143;
    border-radius: 4px;
}
.sp-replacer:hover, .sp-replacer.sp-active {
    border-color: #d6d6d6 !important;
    background: #f5f5f5 !important;
    color: #333333 !important;
}

.my-table-responsive {
    border: 1px solid #ddd;
    margin-bottom: 15px;
}

.borderless {
    border: none !important;
    border-style:hidden !important;
}

    .borderless > thead > tr > th,
    .borderless > tbody > tr > th,
    .borderless > tfoot > tr > th,
    .borderless > thead > tr > td,
    .borderless > tbody > tr > td,
    .borderless > tfoot > tr > td {
        border: none !important;
        border-style:hidden !important;
    }

    .borderless > thead > tr > th,
    .borderless > thead > tr > td {
        border-width: 0 !important;
        border-style:hidden !important;
    }

.fa-3g {
    font-size: 3em !important;
}
@media (min-width: 992px) {
    .fa-3g {
        font-size: 2vw !important;
    }
}
/*fadeIn-show-hide for ng-show/hide*/
.fadeIn-show-hide.ng-hide {
  opacity: 0;
}

.fadeIn-show-hide.ng-hide-add,
.fadeIn-show-hide.ng-hide-remove {
  transition: all linear 0.5s;
}

.fadeIn-show-hide.ng-hide {
  opacity: 0;
}

/*fadeIn-show-hide for ng-repeat*/
.fadeIn-show-hide.ng-enter {
    -webkit-transition: all linear 0.5s;
    transition: all linear 0.5s;
    opacity: 0;
}

.fadeIn-show-hide.ng-enter-active {
    opacity: 1;
}

.fadeIn-show-hide.ng-leave {
    -webkit-transition: all linear 0.5s;
    transition: all linear 0.5s;
    opacity: 1;
}

.fadeIn-show-hide.ng-leave-active {
    opacity: 0;
}

/*fadeIn-show-hide-fast for ng-show/hide*/
.fadeIn-show-hide-fast.ng-hide {
    opacity: 0;
}

.fadeIn-show-hide-fast.ng-hide-add,
.fadeIn-show-hide-fast.ng-hide-remove {
    transition: all linear 0.5s;
}

.fadeIn-show-hide-fast.ng-hide {
    opacity: 0;
}

/*fadeIn-show-hide-fast for ng-repeat*/
.fadeIn-show-hide-fast.ng-enter {
    -webkit-transition: all linear 0.1s;
    transition: all linear 0.1s;
    opacity: 0;
}

.fadeIn-show-hide-fast.ng-enter-active {
    opacity: 1;
}

.fadeIn-show-hide-fast.ng-leave {
    -webkit-transition: all linear 0.5s;
    transition: all linear 0.5s;
    opacity: 1;
}

.fadeIn-show-hide-fast.ng-leave-active {
    opacity: 0;
}

.auto-grow {
    height:auto;
    max-width:600px;
    width:100%;
    -webkit-transition: height 1s ease;
    -moz-transition: height 1s ease;
    -o-transition: height 1s ease;
    transition: height 1s ease;
}
.input-group .auto-grow {
    max-width: 100%;
}

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

.inline-block-width-100 {
    display: inline-block;
    width: 100% !important;
}

/* cg-busy overrides*/
.cg-busy-backdrop {
	opacity:.4 !important;
}
.fixed-head .cg-busy { /*making the busy bar ontop of the fixed header*/
    z-index:1071;
}
.fixed-head .cg-busy-default-sign {
    z-index:1072;
}

.widget-tools h5{
    color:inherit;
}

.widget-menu {
    margin-right:-5px;
    margin-left:-5px;
    margin-top:4px;
}

.help-indicator {
    cursor:help;
}

#video-player, #canvas-capture-image {
    display:block;
    margin: auto;
}

.btn-circle {
    border-radius: 50%;
}

.fa, .fas {
    font-weight: 900 !important;
}

/**/

.horizontal-list {
    text-align:center;
}

.horizontal-list ul {
    padding-left:0;
    padding-right:0;
}
.horizontal-list li {
    padding: 0 1em;
    list-style:none;
    display:inline-block;
}

.no-clear-sign::-ms-clear {
    display: none;
}

.table-bordered > tbody > tr:nth-of-type(odd) {
    background-color: #fafbfc;
}

.fixed-col {
    background-color: white;
    background-clip: padding-box;
    z-index: 1067;
}
.fixed-head th, .fixed-head thead {
    background-color:white;
    background-clip: padding-box;
    z-index: 1068;
    position:relative; /*important for checkboc columns to be under the thead in chrome*/
}

.fixed-head th.fixed-col,
.fixed-head thead.fixed-col {
    z-index: 1069;
}

/* wide ngDialog for questionnaires */
.ngdialog.ngdialog-theme-default.wide .ngdialog-content {
    max-width: 99%;
    width: 1400px;
    background:#f5f7fa;
}

.ngdialog.ngdialog-theme-default.wide {
  padding-top: 60px;
}

.ngdialog.ngdialog-theme-plain.wide .ngdialog-content {
    max-width: 99%;
    width: 700px;    
}

.ngdialog.ngdialog-theme-plain.wide {
  padding-top: 5px;
}

.caps-lock-warning {
    display:none;
}

.hebrew-warning {
    display:none;
}

.table-billboard {
    border-spacing:5px;
    border-collapse:separate;
}

.table-billboard > tbody > tr > td {
    vertical-align:top;
    border-radius:20px;
    border:2px solid !important;
    background-color:white;
}

.table-billboard > tbody > tr > td:hover,
.table-billboard > tbody > tr > th:hover,
.table-billboard > tbody > tr:hover > td,
.table-billboard > tbody > tr > .active,
.table-billboard > tbody > tr:hover > th {
    background-color: #c4e3f3;
}

/* Fix safari icon rendering issue */
.fa,.far,.fab,.fas {
    text-rendering:optimizeLegibility !important;
}

.career-english > * {
    text-align:left !important;
    direction:ltr !important;
}

.ngdialog-content .questionnaire {
    max-height: 740px;
    overflow-y: hidden;
    overflow-x: hidden;
}

.dashboard-badge-circle {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    border: 1px solid; 
    text-align: center;
    vertical-align: middle;
    line-height: 50px;
}

.dashboard-grid-row-menu-inline {
    width: 1% !important;
}

.dashboard-grid-row-menu a {
    text-decoration:none;
    width:15px;
    display:inline-block;
}
.dashboard-grid-row-menu i {
    display:none;
    margin:0;
    padding:0;
    width:100%;
}
.dashboard-grid tr:hover .dashboard-grid-row-menu i,
.dashboard-grid .dashboard-grid-row-menu .open i {
    display:inline !important;
}
/*on small screens like mobile we want the menu to be visible at all times*/
@media (max-width: 768px) {
    .dashboard-grid-row-menu i {
        display: inline !important;
    }
}
.api-grid-row-menu .save-btn i {
    display: inline;
    margin: 0;
    padding: 0;
    width: 100%;
}

.dashboard-grid tr:hover .dashboard-grid-row-menu i,
.dashboard-grid .dashboard-grid-row-menu .open i,
.api-grid tr:hover .dashboard-grid-row-menu i,
.api-grid .dashboard-grid-row-menu .open i {
    display: inline !important;
}
.api-grid thead input:focus {
    transition: all 0.5s;
}

.api-grid th i {
    color: white !important;
}

.api-grid th:hover i {
    color: inherit !important;
}
.api-grid-filter-type {
    z-index: 10;
}
.save-btn {
    text-decoration: none !important;
    padding: 0;
    color: #008b00 !important;
}

.updated {
    background-color: #d7f9c7;
}

.api-grid-filter-row-remove {
    border-right-style: hidden !important;
    border-left-style: hidden !important;
    width: 30px !important;
    padding: 15px 10px !important;
}

.api-grid .pagination {
    margin: 0 !important;
}

.dashboard-grid {
    border: none;
    margin-bottom: 0 !important;
}

.dashboard-grid-row-menu {
    border-right-style: hidden !important;
    border-left-style: hidden !important;
    width: 15px !important;
    padding: 0 !important;
}

.api-grid-row-menu {
    border-right-style: hidden !important;
    border-left-style: hidden !important;
    width: 30px !important;
    padding: 0 !important;
}
.dashboard-grid td,
.dashboard-grid th {
    border:none !important;
}
    .dashboard-grid th {
        border-bottom:1px solid #cfdbe2 !important;
    }
.question-title .show-on-hover {
    display:none;
}
.question-title:hover .show-on-hover {
    display:inline !important;
}

.panel-dashboard {
    border-top-width: 1px !important;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(20,20,30,0.04), 0 6px 18px rgba(20,20,30,0.05);
}

.g-widget-badge {
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(20,20,30,0.04), 0 6px 18px rgba(20,20,30,0.05);
}

.kpi-card.g-widget-badge {
    margin-bottom: 11px;
}

.g-widget-badge .badget-icon-wrapper {
    border-radius: 0 16px 16px 0;
}

    .panel-dashboard .panel-heading {
        /*border-bottom: 1px solid #cfdbe2;*/
        padding-right: 10px;
        padding-left: 10px;
        border-radius: 16px 16px 0 0;
    }
    .panel-dashboard .panel-footer {
        border-radius: 0 0 16px 16px;
    }
    .panel-dashboard .grid-widget {
        border-bottom: none;
        padding-bottom: 0;
    }
.panel-dashboard h4 {
    color:dimgray;
    margin-top: 5px;
    margin-bottom: 5px;
}

.grid-widget .breadcrumb {
    padding-bottom: 0;
    padding-top: 0;
}

.Customer {
    background-color: #3a3f51 !important;
    color: #ffffff !important;
    min-height: 65px; /* to allow for the marker to be displayed correctly*/
}

.Secritary {
    background-color: #5d9cec !important;
    color: #ffffff !important;
}

.marker {
    color: lightgray;
}

.marker-read {
    color: #5d9cec;
}

.panel-rounded {
    border-radius:10px;
}
.panel-rounded .panel-body {
    border-radius:inherit;
}

.paper-stamp {
    margin-bottom: 5px;
    padding: 20px;
    padding-bottom: 5px;
    border: 2px dashed #dddddd;
    background-color: #edebe0;
    color: #444444;
    padding-top: 0 !important;
}
.has-error .btn-theme.disabled,
.has-error .btn-theme[disabled],
.has-error fieldset[disabled] .btn-theme,
.has-error .btn-theme.disabled:hover,
.has-error .btn-theme[disabled]:hover,
.has-error fieldset[disabled] .btn-theme:hover,
.has-error .btn-theme.disabled:focus,
.has-error .btn-theme[disabled]:focus,
.has-error fieldset[disabled] .btn-theme:focus,
.has-error .btn-theme.disabled.focus,
.has-error .btn-theme[disabled].focus,
.has-error fieldset[disabled] .btn-theme.focus,
.has-error .btn-theme.disabled:active,
.has-error .btn-theme[disabled]:active,
.has-error fieldset[disabled] .btn-theme:active,
.has-error .btn-theme.disabled.active,
.has-error .btn-theme[disabled].active,
.has-error fieldset[disabled] .btn-theme.active {
    background-color: #f2dede;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    color: #e82020;
}

.fc-view-container {
    background-color:white;
}

.fc-day-grid,
.fc-h-event .fc-event-title-container {
    text-align: center;
}
/*making the month dot align to middle of text*/
.fc-daygrid-event-dot {
    margin-top: -4px !important;
}

.dashboard-settings {
    position: fixed;
    top: 144px;
    width: 215px;
    background-color: #fff;
    backface-visibility: hidden;
    border: 1px solid #1797be;
    z-index: 9999;
    transition: margin .3s cubic-bezier(1,0,0,1);
}

.dashboard-inline-action {
    padding-right: 3px;
    padding-left: 3px;
}

.settings-inner {
    position: relative;
}

.settings-inner .settings-ctrl {
    position: absolute;
    top: -2px;
    width: 20px;
    height: 44px;
    color:#f5f7fa;
    background:#1797be;
    border: 1px solid #f5f7fa;
    text-align: center;
    cursor: pointer;
    padding-top:10px;
}

.settings-content {
    padding: 10px;
}

.external-app-color-0 {
    background: #F7464A;
}
.external-app-color-1 {
    background: #46BFBD;
}
.external-app-color-2 {
    background: #FDB45C;
}
.external-app-color-3 {
    background: #AB7DF6;
}
.external-app-color-4 {
    background: #949FB1;
}
.external-app-color-5 {
    background: #4D5360;
}

.color-0 {
    color: #F7464A;
}
.color-1 {
    color: #46BFBD;
}
.color-2 {
    color: #FDB45C;
}
.color-3 {
    color: #AB7DF6;
}
.color-4 {
    color: #949FB1;
}
.color-5 {
    color: #4D5360;
}

.border-0 {
    border-color: #F7464A;
}

.border-1 {
    border-color: #46BFBD;
}

.border-2 {
    border-color: #FDB45C;
}

.border-3 {
    border-color: #AB7DF6;
}

.border-4 {
    border-color: #949FB1;
}

.border-5 {
    border-color: #4D5360;
}

.face-lift-tabs > ul {
    margin-bottom: -20px !important;
    display: flex;
    overflow-x: auto;
    overflow-y:hidden;
    /*scrollbar-width: none;
    -ms-overflow-style: none;*/
}
/* make scrollbar in virtualstore and dashboard tabs not visible*/
@media (max-width: 768px) {
    .face-lift-tabs > ul::-webkit-scrollbar {
        display: none;
        height: 0;
    }
}
.face-lift-tabs > .nav-tabs > a,
.face-lift-tabs > .nav-tabs > li,
.face-lift-tabs > .nav-tabs > li > a {
    font-size:small;
    border:none !important;
    background-color:transparent !important;
    border-radius: 0 !important;
    padding-right: 5px;
    padding-left: 5px;
}
.face-lift-tabs > .nav-tabs > li.active > a,
.face-lift-tabs > .nav-tabs > li.active > a:hover {
    border: none;
    background-color: transparent; 
}
.face-lift-tabs > .nav-tabs > li.active {
    border-bottom: 3px solid !important;
}
.face-lift-tabs > .nav-tabs {
    border-bottom:none !important;
}

.virtualstore-scrollable-tabs .face-lift-tabs > .nav-tabs {
    border-bottom:1px solid lightgray !important
}
.virtualstore-scrollable-tabs .face-lift-tabs > .nav-tabs > li > a {
    font-size: 18px;
    padding-right: 10px;
    padding-left: 10px;
}

.face-lift-tabs > .nav-tabs > li:focus > a {
    border: none !important;
}

@media (max-width: 768px) {
    .face-lift-tabs .nav-tabs > li {
        float: right !important; 
        border-left:1px solid red;
    }
    .face-lift-tabs ul {
        margin-bottom: -16px !important;
    }
}

.face-lift-tabs .tab-content{
    border:none !important;
}

.face-lift-tabs .tab-definitions-a {
    width:10px;
    padding-right:0;
    padding-left:0;
    color:darkgray !important;
}

.tabs-tool-wrapper {
    position: absolute;
    font-size: small;
    padding: 15px 0;
}

.questionnaire-picture {
    box-shadow:0 0 4px 4px;
    width:100%;
    margin-bottom:15px;
}
.questionnaire-picture img {
    width:100%;
}

/* font-awesome addins*/
.fa-one:before{content:"1"}
.fa-two:before{content:"2"}
.fa-three:before{content:"3"}
.fa-four:before{content:"4"}
.fa-five:before{content:"5"}
.fa-six:before{content:"6"}
.fa-seven:before{content:"7"}
.fa-eight:before{content:"8"}
.fa-nine:before{content:"9"}
.fa-ten:before{content:"10"}


.pdf-wrapper {margin: 0 ; width: 100%; }
.pdf-canvas {
    border:1px solid black;
    height:550px;
    width: 100%;
    overflow-y:hidden;
    overflow-x:hidden;
}

.input-no-arrows::-webkit-outer-spin-button,
.input-no-arrows::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.input-no-arrows {
    -moz-appearance: textfield;
}

.auto-suggest .caret {
    display:none;
}

.legend-item {
    padding-top: 5px;
}
.legend-item div {
    width: 20px;
    height: 20px;
    border: 1px solid black;
    border-radius: 5px;
    display: inline-block;
    vertical-align: middle;
}
.upper-text-label {
    position: absolute !important;
    top: -5px !important;
    left: 8px;
    padding: 2px 5px;
}

.shiny {
    border-radius: 30px;
    padding-top: 4px;
}

.questionnaire-extra-info {
    color: #007a9b;
}
.questionnaire-entity-description {
    text-align: center;
}

.fc-rtl .fc-center,
.fc-rtl .fc-event-container {
    direction:rtl;
}

.fc-event-extended-props {
    flex-grow: 1;
    flex-shrink: 1;
    min-height: 0;
    overflow: hidden;
}

.informative-question {
    display: inline-table;
    margin: 0 10px 0 10px;
}

/*  
    fix to allow calendar to be exported to pdf
    html2canvas does not support box-shadow and when present it prints as white rectangle
    hiding the content of the appointments
*/
.fc-timegrid-event-harness-inset .fc-timegrid-event, 
.fc-timegrid-event.fc-event-mirror, 
.fc-timegrid-more-link {
    box-shadow:none;
    border-color: #fff !important;
    padding:3px;
}

.fc-v-event .fc-event-title-container {
    flex-grow: 0 !important;
}

.grade-column {
    width: 90px;
}

.display-on-hover-wrapper:hover .display-hover {
    display: inline;
}
.display-on-hover-wrapper:not(:hover) .display-hover {
    display: none;
}
.display-on-hover-no-value .display-hover {
    display: none !important;
}

.cart-sum {
    border-top: 2px solid gray;
}

/* Tooltip text */
.tooltiptext {
    min-width: 120px;
    min-height: 30px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 6px;
    /* Position the tooltip text */
    position: absolute;
    transition: opacity 0.3s;
    display: inline-table;
    font-size: var(--fc-small-font-size);
    bottom: calc(100% + 4px);
}
/* Tooltip arrow */
.tooltiptext::after {
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    top: 100%;
    border-color: #555 transparent transparent transparent;
}

.translate-cloak {
    display: none !important;
}

/* making request tracking correspondance fade in when loaded and added */
.correspondance-item.ng-enter {
    opacity: 0;
    transition: all .8s ease-in-out;
}

.correspondance-item.ng-enter-active {
    opacity: 1;
}

.alternative-auth-method {
}

    .alternative-auth-method button {
        color: inherit;
    }

.alternative-auth-method-title {
    width: 100%;
    display: flex;
    flex-direction: row;
    border: none;
    margin: 0;
    padding: 24px 0 0;
    padding: var(--spacing-3) 0 0 0;
}

    .alternative-auth-method-title span {
        text-align: center;
        flex: 0.2 0 auto;
        margin: 0;
    }

    .alternative-auth-method-title:after, .alternative-auth-method-title:before {
        content: "";
        border-bottom: 1px solid #c2c8d0;
        flex: 1 0 auto;
        height: .7em;
        margin: 0;
    }
.product-extra-details-link {
    font-size: 85%;
    padding-right: 0;
    padding-left: 0;
}

.dxcustom-color-picker {
    width: 120px;
    padding: 10px;
    border: 1px solid gray;
    border-radius: 5px;
}

.has-error .dx-viewport {
    border: 2px solid red;
}

.has-error .dx-invalid-message-content {
    display: none !important;
}

.allsize-center {
    height: 50%;
    overflow: hidden;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#unauthorized-wrapper {
    height: 100%;
    display: grid;
    align-content: space-between;
}

#company-footer {
    z-index: 1;
}

.flatpickr-calendar.hasTime.noCalendar {
    width: 200px;
}
.constraint-day-header {
    text-align: center;
    width: 15%;
}
.constraint-cell {
    text-align: center;
    width: 15%;
}
.constraint-hours-header {
    max-width: 10%;
    text-align: center;
}
.constraint-hours {
    max-width: 10%;
    text-align: center;
}
.constraint-hours span {
    text-align: center;
}
.constraint-active {
    color: palevioletred;
    opacity: 70%;
}
.constraint-inactive {
    color: gray;
    opacity: 70%;
}
.constraint-on {
    background-color: #f05050;
    color: #ffffff !important;
}

.questionnaire-properties-wrapper {
    font-weight: bold;
}

.deposit-redemption-pending-payments {
    color: #008b00;
    margin: 0;
    font-weight: bold;
}

.bank-transfer-pending-payments {
    color: #007a9b;
    margin: 0;
    font-weight: bold;
}

.partial-pending-payments {
    color: #ff902b;
    margin: 0;
    font-weight: bold;
}

.choosing-num-of-payments {
    border: 1px solid lightgray;
    border-radius: 10px;
    padding: 10px;
}

/*  -------- text --------  */
.text-hr-seperator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 5px 0 0 0;
}

    .text-hr-seperator span {
        margin: 0 16px;
        font-weight: bold;
        /*color: #555;*/
    }

    .text-hr-seperator::before,
    .text-hr-seperator::after {
        content: "";
        flex: 1;
        border-bottom: 1px solid #ccc;
    }

    .text-hr-seperator::before {
        margin-right: 16px;
    }

    .text-hr-seperator::after {
        margin-left: 16px;
    }

.custom-display-wrapper {
    display: flex;
    flex-wrap: nowrap;
}

.questionnaire-display-item {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    word-break: break-word;
    padding: 10px;
}

.custom-display-label {
    font-weight: bold;
}

.custom-display-data{

}

.circle-bordered {
    border: 1px dotted gray !important;
}
.circle-white {
    background-color: white !important;
}

.circle-middle {
    text-align: center !important;
    margin: 0 !important;
}

    .circle-middle i {
        text-align: center !important;
    }

.circle-md {
    width: 25px !important;
    height: 25px !important;
}

.correspondence-item-title {
    width: 100%;
    display: flex;
    flex-direction: row;
    border: none;
    margin: 0;
    padding: 24px 0 0;
    padding: var(--spacing-3) 0 0 0;
}

    .correspondence-item-title span {
        text-align: center;
        flex: 0.2 0 auto;
        margin: 0;
    }

    .correspondence-item-title:after, .correspondence-item-title:before {
        content: "";
        border-bottom: 1px solid #c2c8d0;
        flex: 1 0 auto;
        height: .7em;
        margin: 0;
    }

.correspondence-item-title-text {
    font-weight: bold;
}

.correspondence-wrapper {
    max-height: 450px;
    overflow-y: auto;
    overflow-x: hidden;
}

.correspondence-dialog {
    padding-top: 60px !important;
}
    .correspondence-dialog hr {
        margin-top: 13px !important;
        margin-bottom: 13px !important;
    }

textarea.no-resize {
    resize: none !important;
}

.ai-btn-glow {
    animation: ai-pulse 2s infinite ease-in-out;
}

.ngdialog.ngdialog-theme-default .ngdialog-content {
    font-family: inherit !important;
}

/* Fix: prevent ngDialog overflow:hidden from resetting page scroll position */
html.ngdialog-open {
    overflow: hidden;
}

body.ngdialog-open {
    position: fixed;
    width: 100%;
    top: var(--scroll-y);
    overflow: hidden;
    min-height: calc(100vh + var(--scroll-offset, 0px));
}

.fc-button {
    margin-top: 5px !important;
}
.fc-button:not(.fc-button-group *) {
    margin-left: 5px !important;
    margin-right: 0 !important;
}
.fc-button-group {
    margin-left: 5px !important;
}

.question-description {
    width: 50%;
}

@media (max-width: 768px) {
    /* Switch everything to block layout */
    .resp-table,
    .resp-table thead,
    .resp-table tbody,
    .resp-table th,
    .resp-table td,
    .resp-table tr {
        display: block;
    }

        /* Hide the column headers */
        .resp-table thead {
            display: none;
        }

        /* Style each row as a card */
        .resp-table tbody tr {
            margin-bottom: 1rem;
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
        }

        /* Each cell becomes a label–value row */
        .resp-table td {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 14px !important;
            border-bottom: none !important;
            border-top: none !important;
            border-radius: 0;
        }

        .resp-table tbody tr td:last-child {
            border-bottom: none;
        }

        /* Inject the label from the data attribute */
        .resp-table td:not([data-label=""])::before {
            content: attr(data-label);
            font-size: 14px;
            font-weight: 600;
            margin-right: 12px;
            flex-shrink: 0;
        }
        /*If inner table is white we dont want it to be like that in mobile because the cards (rows) are already white*/
        .resp-table .bg-white {
            background-color: transparent;
        }
        /*When in mobile view table should be borderless*/
        .table-responsive:has(.resp-table) {
            border: none;
        }
        /*Questionnaires special rules*/
        .resp-table .question-description {
            width:100% !important;
        }
        /*VirtualStore special rules*/
        .resp-table .list-product td {
            border-top: none !important;
            border-bottom: none !important;
            border-radius: 0 !important;
        }
        .resp-table .list-product .product-title {
            border-right: none !important;
            border-radius: 0 !important;
        }
        .resp-table .list-product .product-actions {
            border-left: none !important;
        }

        .resp-table .product-additional-text,
        .resp-table .product-small {
            display: flex !important;
        }
}


/*
    usage of badges:
    <span class="badge badge-red">Inactive</span>

    <!-- with icon -->
    <span class="badge badge-purple">
        <i class="ti ti-crown"></i> Admin
    </span>

    <!-- with dot -->
    <span class="badge badge-green badge-dot">Online</span>
*/

.badge-green {
    background: #EAF3DE;
    color: #27500A;
}

.badge-amber {
    background: #FAEEDA;
    color: #633806;
}

.badge-red {
    background: #FCEBEB;
    color: #791F1F;
}

.badge-blue {
    background: #E6F1FB;
    color: #0C447C;
}

.badge-purple {
    background: #EEEDFE;
    color: #3C3489;
}

.badge-teal {
    background: #E1F5EE;
    color: #085041;
}

.badge-pink {
    background: #FBEAF0;
    color: #72243E;
}

.badge-coral {
    background: #FAECE7;
    color: #712B13;
}

.badge-gray {
    background: #F1EFE8;
    color: #444441;
}

/* ── Dot indicator ── */
.badge-dot::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
    opacity: 0.7;
    margin-left: 3px;
    margin-right: 3px;
}

/* Virtual store home-phone field (mask="store-phone"):
   empty -> placeholder follows the page language start side (right in RTL Hebrew);
   filled -> the phone number reads LTR and hugs the left. */
input[input-mask-store-phone] {
    direction: ltr;
    text-align: left;
}
input[input-mask-store-phone]:placeholder-shown {
    direction: inherit;
    text-align: start;
}

.language-logo {
    aspect-ratio: 2.5 / 1
}
.symbol-logo {
    aspect-ratio: 1 / 1
}

#login-other-pop button {
    font-size: 14px;
    padding: 0;
}

#unauthorized-wrapper {
    opacity: 0;
}

    #unauthorized-wrapper.is-ready {
        opacity: 1;
        transition: opacity 0.15s ease-in;
    }

/* ===== שורת #fullrow בגריד הדשבורד - תא הנפרש על כל רוחב השורה (מקביל ב-PDF) ===== */
.dashboard-grid td.dashboard-fullrow-cell {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: right;
    background: #f7f7f9;
    border-right: 3px solid #d0d0d5;
    padding: 6px 14px;
    color: #555;
}
    /* flex goes on an INNER wrapper, never on the <td>: display:flex on a
       table cell drops display:table-cell and colspan stops spanning -> the
       band collapses into the first column and pushes the others aside. */
    .dashboard-grid td.dashboard-fullrow-cell .dashboard-fullrow-inner {
        display: flex;
        align-items: baseline;
        gap: 10px;
    }
    /* label = same text look as a column header (bold, no chip bg/border), on the
       right (RTL) aligned with the first column; content flows to its left */
    .dashboard-grid td.dashboard-fullrow-cell .dashboard-fullrow-label {
        flex: 0 0 auto;
        font-weight: bold;
        font-style: normal;
        color: #888;
        white-space: nowrap;
    }
    .dashboard-grid td.dashboard-fullrow-cell .dashboard-fullrow-content {
        flex: 1 1 auto;
        font-style: italic;
    }
    /* several #fullrow columns stack one under the other, in query column order */
    .dashboard-grid td.dashboard-fullrow-cell .dashboard-fullrow-inner + .dashboard-fullrow-inner {
        margin-top: 6px;
    }
/* unified hover: the data row and its #fullrow band highlight together */
.dashboard-grid tr.dashboard-row-hover > td {
    background-color: #eef2f8 !important;
}

/*VirtualStore - extra text*/
.truncate {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines, not characters */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    .truncate.expanded {
        display: block;
        -webkit-line-clamp: unset;
    }

/* Welcome widgets*/
.welcome-img {
    display: grid;
    place-items: center;
    height: 80vh;
}

.kpi-row {
    margin-bottom: 15px;
}

.kpi-card {
    background: #FFFFFF;
    border: 1px solid #EAEBEE;
    border-radius: 16px;
    padding: 16px 18px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.gil-kpi-row {
    display: grid;
    flex-wrap: nowrap; /* guarantees one line — can never silently drop an item to a new row */
    align-items: stretch; /* equal height across the single line */
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.gil-kpi-col {
    flex: 1 1 0;
    min-width: 0; /* stops long labels from forcing overflow that triggers wrapping */
    display: flex;
}

.kpi-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}

.kpi-label {
    font-size: 15px;
    font-weight: 800;
    margin: 0;
}

.kpi-info {
    color: #C7CAD1;
    font-size: 15px;
    cursor: default;
}

.kpi-value {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 6px;
}

.kpi-sub {
    font-size: 12.5px;
    color: #8A8F98;
}

.panels-row {
    margin-bottom: 15px;
    gap: 1rem;
    display: flex;
    flex-wrap: wrap; /* keep responsive wrapping on smaller screens */
    margin-left: 0;
    margin-right: 0;
    justify-content: start; /* or just omit — 'start' is the grid default */
}

.dashboard-content .row .panel-card {
    margin-bottom: 15px;
}

.panels-row .panel-col {
    width: auto; /* neutralize Bootstrap's percentage width */
    padding-right: 0;
    padding-left: 0;
    float: none; /* cleanup, though harmless in grid */
    flex: 1 1 260px; /* grow/shrink, but never below 260px before wrapping */
    max-width: none;
}

    .panels-row .panel-col:has(.quick-link) {
        flex: 1 1 160px; /* grow/shrink, but never below 260px before wrapping */
    }

    .panels-row .panel-col:first-child {
        padding-right: 0;
    }

    .panels-row .panel-col:last-child {
        padding-left: 0;
    }
.panels-row .panel-card {
    max-height: 350px;
}

.panels-row .panel-card,
.row .panel-card {
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(20,20,30,0.04), 0 6px 18px rgba(20,20,30,0.05);
    padding: 18px 18px 14px;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto; /* panel grows to fill the column's stretched height */
    margin-bottom: 0;
    
}

    .panels-row .panel-head,
    .panel-card .panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 5px;
    }

    .panels-row .panel-head h3,
    .panel-card .panel-head h3 {
        font-size: 15px;
        font-weight: 800;
        margin: 0;
    }

    .panels-row .panel-head .icon,
    .panel-card .panel-head .icon {
        color: #8A8F98;
        font-size: 16px;
    }

.panels-row .panel-body,
.panel-card .panel-body {
    flex: 1 1 auto; /* body absorbs the extra space, header/footer stay fixed size */
    display: flex;
    overflow: auto; /* optional, in case content overflows */
    flex-direction: column;
    gap: 14px;
}

.panels-row .panel-footer,
.panel-card .panel-footer,
.quicklinks-card .panel-footer {
    margin-top: 0;
    padding-top: 10px;
    border-top: 1px solid #EAEBEE;
}

    .welcome-wrapper .panels-row .panel-footer a,
    .panel-card .panel-footer a,
    .quicklinks-card:has(.quick-link) .panel-footer a {
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

        .panels-row .panel-footer a:hover,
        .panel-card .panel-footer a:hover,
        .quicklinks-card:has(.quick-link) .panel-footer a:hover {
            text-decoration: underline;
        }

.req-item .req-title {
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 2px;
}

.req-item .req-meta {
    font-size: 11.5px;
    color: #8A8F98;
}

.req-item .req-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.badge-status {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2E9E5B;
    display: inline-block;
    margin-top: 6px;
    flex-shrink: 0;
}

.announce-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

    .announce-item .dot {
        margin-top: 7px;
    }

.quicklinks-card:has(.quick-link) {
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(20,20,30,0.04), 0 6px 18px rgba(20,20,30,0.05);
    padding: 22px 22px 16px;
}

.quicklinks-card a:hover {
    text-decoration: none;
}

.quick-link {
    border: 1px solid #EAEBEE;
    border-radius: 14px;
    padding: 18px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-decoration: none;
    color: #1F2430;
    transition: box-shadow .15s ease, transform .15s ease;
}

    .quick-link:hover {
        box-shadow: 0 1px 2px rgba(20,20,30,0.04), 0 6px 18px rgba(20,20,30,0.05);
        transform: translateY(-2px);
        color: #1F2430;
    }

    .quick-link .ql-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        background: #E6F6EC;
    }

    .quick-link .ql-name {
        font-size: 13px;
        font-weight: 700;
    }

/* ==========================================================================
   Signature question type (<g-signature>, DataTypes.Signature)
   --------------------------------------------------------------------------
   DIRECTION AGNOSTIC ON PURPOSE. A questionnaire carries its own direction
   (formData.currentForm.Direction), and when it differs from the session
   language QuestionnairesController injects a whole alternate stylesheet
   (bootstrap-rtl.css + app-rtl.css, or bootstrap.css + app.css) into
   #questionnaire-wrapper. These rules therefore live ONLY here, in extras.css,
   which is loaded once for both directions - so every inline offset is written
   with logical properties (inset, inset-inline, inset-inline-start,
   margin-inline, margin-inline-start, margin-inline-end, text-align: start)
   plus flexbox, which is direction aware on its own. One rule set is therefore
   correct in RTL and LTR alike, and there is not a single left/right/float in
   here. Do not duplicate any of this into app.css / app-rtl.css.
   ========================================================================== */

.g-signature {
    position: relative;
    text-align: start;
}

/* the form control the mandatory-question machinery validates. Visually gone,
   but still a real registered input - never display:none it, Angular keeps it
   in the form either way but assistive tech should not chase a 0x0 box. */
.g-signature .g-sig-value {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
    clip-path: inset(50%);
}

/* ---------- draw / upload mode tabs ---------- */
/* inline-flex neutralises the float bootstrap 3 puts on .btn-group > .btn,
   which is the one physical direction we would otherwise inherit */
.g-signature .g-sig-modes {
    display: inline-flex;
    margin-bottom: 10px;
    border-radius: 4px;
    overflow: hidden;
}

/* the selected tab wears .btn-theme so it picks up the active colour scheme
   from Content/app/theme-<scheme>.css instead of hard coding one here */
.g-signature .g-sig-modes .btn {
    float: none;
    border-radius: 0;
    font-size: 13px;
}

/* collapse the seam the way bootstrap's own .btn-group does, but on the logical
   side so it lands correctly whichever direction the questionnaire is in */
.g-signature .g-sig-modes .btn + .btn {
    margin-inline-start: -1px;
}

.g-signature .g-sig-modes .btn i {
    margin-inline-end: 5px;
}

/* ---------- the transient 'we discarded X' notice (spec D8) ---------- */
.g-signature .g-sig-notice {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 6px 10px;
    border: 1px solid #f0dca4;
    border-radius: 4px;
    background-color: #fdf8ec;
    font-size: 13px;
}

.g-signature .g-sig-notice i {
    margin-inline-end: 6px;
}

/* ---------- the pad ---------- */
/* Both lanes occupy the SAME grid cell, so the container is always as tall as the
   taller of the two and switching mode cannot shift the form. The inactive lane is
   hidden with visibility, not display, because it must keep sizing the cell -
   visibility:hidden also takes it out of the tab order and the a11y tree.
   This replaced a min-height guess, which could never be right: the tallest lane
   depends on the foot wrapping, the theme font and the breakpoint. */
.g-signature .g-sig-lanes {
    display: grid;
}

.g-signature .g-sig-lane {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.g-signature .g-sig-lane-off {
    visibility: hidden;
    pointer-events: none;
}

.g-signature .g-sig-pad {
    position: relative;
    border: 1px solid #cfd6de;
    border-radius: 4px;
    background-color: #ffffff;
    overflow: hidden;
}

.g-signature .g-sig-pad-error {
    box-shadow: 0 0 0 3px rgba(169, 68, 66, 0.09);
}

/* touch-action on the CANVAS ONLY: dragging to sign must never scroll the
   form, dragging anywhere else must still scroll normally */
.g-signature .g-sig-canvas {
    display: block;
    width: 100%;
    height: 190px;
    touch-action: none;
    cursor: crosshair;
    background-color: transparent;
}

/* baseline guide and hint sit behind / above the ink but never in the PNG */
.g-signature .g-sig-guide {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.g-signature .g-sig-baseline {
    position: absolute;
    inset-inline: 34px;
    bottom: 46px;
    height: 1px;
    background-color: #dbe1e8;
}

.g-signature .g-sig-mark {
    position: absolute;
    inset-inline-start: 34px;
    bottom: 50px;
    color: #b9c1cb;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
}

.g-signature .g-sig-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aeb7c2;
    font-size: 15px;
    pointer-events: none;
}

.g-signature .g-sig-hint i {
    margin-inline-end: 8px;
    opacity: 0.75;
}

/* ---------- controls under the pad / preview ---------- */
.g-signature .g-sig-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 8px;
}

.g-signature .g-sig-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.g-signature .g-sig-actions .btn i {
    margin-inline-end: 5px;
}

.g-signature .g-sig-meta {
    color: #98a1ae;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.g-signature .g-sig-sep {
    margin-inline: 4px;
}

.g-signature .g-sig-tip {
    margin: 6px 0 0;
    color: #8a92a3;
    font-size: 12.5px;
}

/* ---------- upload lane ---------- */
/* kept reachable by keyboard - visually hidden, not display:none */
.g-signature .g-sig-file {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip-path: inset(50%);
}

/* display:block is load-bearing. A <label> defaults to display:inline, and an
   inline box wrapping block children fragments into several line boxes, each
   painting its own slice of the dashed border. */
.g-signature .g-sig-drop {
    /* flex, not block: still a single box (so the inline-label border
       fragmentation bug stays fixed) but now fills the lane height */
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 24px 20px;
    border: 2px dashed #c8d0da;
    border-radius: 4px;
    background-color: #fbfcfd;
    color: #8a92a3;
    font-weight: normal;
    text-align: center;
    cursor: pointer;
}

.g-signature .g-sig-drop:hover,
.g-signature .g-sig-drop-over {
    border-color: #b9c3cf;
    background-color: #f4f7fa;
}

.g-signature .g-sig-drop strong {
    display: block;
    margin-bottom: 3px;
    color: #5a6373;
    font-size: 14.5px;
}

.g-signature .g-sig-drop-types,
.g-signature .g-sig-drop-note,
.g-signature .g-sig-or {
    display: block;
    font-size: 12px;
    color: #a8b0bb;
}

.g-signature .g-sig-or {
    margin: 9px 0;
    font-size: 12.5px;
}

.g-signature .g-sig-drop-note {
    margin-top: 10px;
}

.g-signature .g-sig-drop .btn i {
    margin-inline-end: 5px;
}

/* ---------- a captured / stored signature ---------- */
.g-signature .g-sig-stored {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.g-signature .g-sig-thumb {
    padding: 6px;
    min-width: 180px;
    border: 1px solid #e0e5eb;
    border-radius: 3px;
    background-color: #ffffff;
}

.g-signature .g-sig-thumb img {
    display: block;
    width: auto;
    max-width: 260px;
    max-height: 74px;
}

.g-signature .g-sig-thumb-empty {
    display: block;
    color: #c8d0da;
    font-size: 28px;
    text-align: center;
}

/* a signature is a transparent PNG - the checkerboard says so.
   Symmetric pattern, so the offsets carry no direction. */
.g-signature .g-sig-checker {
    background-image: linear-gradient(45deg, #eef1f4 25%, transparent 25%, transparent 75%, #eef1f4 75%), linear-gradient(45deg, #eef1f4 25%, transparent 25%, transparent 75%, #eef1f4 75%);
    background-size: 12px 12px;
    background-position: 0 0, 6px 6px;
}

.g-signature .g-sig-facts {
    display: flex;
    flex-direction: column;
    color: #8a92a3;
    font-size: 13px;
    line-height: 1.6;
}

.g-signature .g-sig-facts .g-sig-name {
    color: #5a6373;
    word-break: break-all;
}

.g-signature .g-sig-ok i,
.g-signature .g-sig-facts i {
    margin-inline-end: 4px;
}

/* ---------- validation messages ---------- */
/* The message row is always rendered; only its visibility changes. That way the
   reserved space IS a real message row, so error / captured / idle are identical
   in height whatever FontAwesome and the theme font do. A hard min-height was
   tried first and was wrong - it had been measured without FontAwesome loaded. */
.g-signature .g-sig-msgs {
    display: flex;
    flex-direction: column;
}

.g-signature .g-sig-msg-idle {
    visibility: hidden;
}

.g-signature .g-sig-msg {
    display: flex;
    align-items: center;
    margin-top: 8px;
    font-size: 13.5px;
}

.g-signature .g-sig-msg i {
    margin-inline-end: 6px;
}

/* ---------- narrow viewport: sign in a full screen box ---------- */
/* a ~300px wide pad produces a cramped, unrepresentative scrawl */
.g-signature.g-sig-full {
    position: fixed;
    inset: 0;
    z-index: 1055;
    padding: 14px;
    background-color: #ffffff;
    overflow: auto;
}

.g-signature.g-sig-full .g-sig-canvas {
    height: 60vh;
}

@media (max-width: 767px) {
    .g-signature .g-sig-canvas {
        height: 160px;
    }

    .g-signature .g-sig-foot {
        gap: 8px;
    }

    .g-signature .g-sig-thumb {
        min-width: 0;
    }
}

/* ---------- keyboard focus ---------- */
.g-signature .btn:focus,
.g-signature .g-sig-file:focus + .g-sig-drop {
    outline: 2px solid #337ab7;
    outline-offset: 1px;
}

.g-signature .btn:focus:not(:focus-visible) {
    outline: none;
}

.g-signature .btn:focus-visible,
.g-signature .g-sig-file:focus-visible + .g-sig-drop {
    outline: 2px solid #337ab7;
    outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
    .g-signature .btn,
    .g-signature .g-sig-drop,
    .g-signature .g-sig-hint {
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   Questionnaire cards (Templates/FormQuestions.html + its question.html)
   --------------------------------------------------------------------------
   Direction agnostic, same rule as the Signature block above: a questionnaire
   can be injected with the opposite-direction bootstrap/app css, so ONLY logical
   properties + flex here. No left/right/float.
   Theme colours are NOT hard coded: the progress fill wears .btn-theme and the
   selected-answer marker keeps using the theme's own `.c-radio input:checked + span`.
   Everything is scoped to #questionnaire-wrapper and reset inside table containers.
   ========================================================================== */

#questionnaire-wrapper { counter-reset: q-sec; }

/* ---------- progress (lives in the sticky heading) ---------- */
#questionnaire-wrapper .q-progress { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
#questionnaire-wrapper .q-progress-count { font-size: 13px; font-weight: 600; min-width: 44px; }
#questionnaire-wrapper .q-progress-track { flex: 1; height: 6px; border-radius: 6px; background: #e3e8ef; overflow: hidden; }
#questionnaire-wrapper .q-progress-track > i { display: block; height: 100%; padding: 0; border-radius: 6px; transition: width .3s; }

/* ---------- the card ---------- */
#questionnaire-wrapper .q-card {
    margin: 0 0 4px;                    /* beats .row's negative margins */
    padding: 10px 5px;                  /* the inner .col-* keep their own gutter */
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    transition: border-color .2s, box-shadow .2s;
}
#questionnaire-wrapper .q-card:focus-within { border-color: #b4c0ce; box-shadow: 0 0 0 4px rgba(31, 45, 61, .06); }
#questionnaire-wrapper .q-card:has(.has-error) { border-color: #d9363e; background: #fffafa; }
#questionnaire-wrapper .q-card.q-answered:not(.q-type-Informative):not(:has(.has-error)) { border-color: #2e9e6b; background: #ebf3ef33; }

/* titles / informative text are not cards */
#questionnaire-wrapper .q-type-Title,
#questionnaire-wrapper .q-type-Informative,
#questionnaire-wrapper .q-type-Picture { background: transparent; border-color: transparent; padding-inline: 0; }

/* inside tables (container type 1) keep today's compact look */
#questionnaire-wrapper td .q-card { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }


/* ---------- mandatory badge: after the question text (NOT .text-mandatory-mark, which app.css pins absolutely) ---------- */
#questionnaire-wrapper .q-req-badge {
    display: inline-block; margin-inline-start: 8px; padding: 1px 8px; border-radius: 10px;
    background: #fdecee; color: #d9363e; font-size: 11px; font-weight: 500; line-height: 18px; vertical-align: middle;
}

/* ---------- question text ---------- */
#questionnaire-wrapper .q-card .question-decription { font-size: 16px; font-weight: 500; }
#questionnaire-wrapper .q-card .question-explaination { color: #6b7a8c; font-size: 13px; }

/* ---------- text-like inputs ---------- */
#questionnaire-wrapper .q-card .form-control { height: 38px; border-radius: 10px; padding-inline: 14px; }
#questionnaire-wrapper .q-card textarea.form-control { height: auto; min-height: 60px; padding-block: 8px; }
#questionnaire-wrapper .q-card .ui-select-container .ui-select-match .btn { height: 38px; border-radius: 10px; }
#questionnaire-wrapper td .q-card .form-control { height: 34px; border-radius: 4px; }

/* ---------- answer options: tiles (vertical radio, vertical checkbox, Bool) ---------- */
#questionnaire-wrapper .q-card .q-tiles { display: grid; gap: 6px; margin-top: 6px; }
#questionnaire-wrapper .q-card .q-tiles > .c-radio,
#questionnaire-wrapper .q-card .multiple-answers-vertical > label,
#questionnaire-wrapper .q-card .checkbox-inline.c-checkbox:not(.multiple-answers-horizontal):not(.q-switch) > label {
    display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 7px 12px;
    border: 1px solid #e3e8ef; border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s;
}
#questionnaire-wrapper .q-card .q-tiles > .c-radio:hover,
#questionnaire-wrapper .q-card .multiple-answers-vertical > label:hover { border-color: #b4c0ce; background: #fafcfd; }
#questionnaire-wrapper .q-card .q-tiles > .c-radio:has(input:checked),
#questionnaire-wrapper .q-card .multiple-answers-vertical > label:has(input:checked) { border-color: #b4c0ce; background: #f2f8fa; }
#questionnaire-wrapper .q-card .q-tiles > .c-radio:has(input:focus-visible),
#questionnaire-wrapper .q-card .multiple-answers-vertical > label:has(input:focus-visible) { outline: 2px solid #8aa0b4; }

/* ---------- horizontal multi-select: chips ---------- */
#questionnaire-wrapper .q-card .multiple-answers-horizontal { margin: 8px 0 0; margin-inline-end: 8px; }
#questionnaire-wrapper .q-card .multiple-answers-horizontal > label { padding: 6px 14px; border: 1px solid #e3e8ef; border-radius: 20px; cursor: pointer; }
#questionnaire-wrapper .q-card .multiple-answers-horizontal > label:has(input:checked) { background: #f2f8fa; border-color: #b4c0ce; }

/* ---------- errors ---------- */
#questionnaire-wrapper .q-card .my-messages { margin-top: 8px; font-size: 13px; }

/* ---------- sticky submit bar (the scroller is .sticky-panel .panel-body, so sticky bottom:0 pins to it) ---------- */
#questionnaire-wrapper .q-actionbar { margin-top: 16px; }
#questionnaire-wrapper .q-actionbar .btn-theme { min-width: 140px; border-radius: 8px; }
#questionnaire-wrapper .q-actionbar p { margin: 6px 0 0; }

/* ---------- input-group (date / time pickers): outer corners round, joins flat, heights match ---------- */
#questionnaire-wrapper .q-card .input-group .form-control:not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }
#questionnaire-wrapper .q-card .input-group .form-control:not(:first-child) { border-start-start-radius: 0; border-end-start-radius: 0; }
#questionnaire-wrapper .q-card .input-group-btn > .btn { height: 38px !important; border-radius: 0; }  /* beats ".datepicker button { height: 35px !important }" */
#questionnaire-wrapper .q-card .input-group-btn:first-child > .btn:first-child { border-start-start-radius: 10px; border-end-start-radius: 10px; }
#questionnaire-wrapper .q-card .input-group-btn:last-child > .btn:last-child { border-start-end-radius: 10px; border-end-end-radius: 10px; }
#questionnaire-wrapper td .q-card .input-group-btn > .btn { height: 34px !important; }

/* ---------- Bool: toggle switch. The existing span.fas is the track, so the theme's own
   `.c-checkbox input:checked + span` rule still paints the ON colour ---------- */
#questionnaire-wrapper .q-card .q-switch > label { display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; }
#questionnaire-wrapper .q-card .q-switch input + span.fas {
    position: relative; flex: none; display: inline-block; width: 42px; height: 24px; margin: 0;
    border: 0; border-radius: 24px; transition: background-color .2s;
}
#questionnaire-wrapper .q-card .q-switch input:not(:checked) + span.fas { background-color: #c7d0db; }
#questionnaire-wrapper .q-card .q-switch input + span.fas::before { content: none !important; }
#questionnaire-wrapper .q-card .q-switch input + span.fas::after {
    content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: inset-inline-start .2s;
}
#questionnaire-wrapper .q-card .q-switch input:checked + span.fas::after { inset-inline-start: 21px; }
#questionnaire-wrapper .q-card .q-switch input:focus-visible + span.fas { outline: 2px solid #8aa0b4; outline-offset: 2px; }
#questionnaire-wrapper .q-card .q-switch input[disabled] + span.fas { opacity: .55; }
/* ---------- mandatory badge placement ---------- */
/* inside .c-checkbox the theme styles EVERY span as the 20x20 check box (width, height, border, physical
   margins) - which squeezed the badge into one letter per line. Undo those for the badge. */
#questionnaire-wrapper .c-checkbox .q-req-badge,
#questionnaire-wrapper .c-radio .q-req-badge {
    position: static; flex: none; width: auto; height: auto; margin: 0; border: 0; white-space: nowrap; text-align: start;
}
#questionnaire-wrapper .q-legend .q-req-badge { margin-inline-start: 0; margin-inline-end: 6px; }
#questionnaire-wrapper .q-legend { color: #6b7a8c; font-size: 13px; }

/* ---------- Title questions: numbered section header with a rule running to the far edge ---------- */
#questionnaire-wrapper .q-type-Title { counter-increment: q-sec; padding-block: 12px 2px; }
#questionnaire-wrapper .q-title { display: block; }
#questionnaire-wrapper .q-title-row { display: flex; align-items: center; gap: 10px; }
#questionnaire-wrapper .q-title-row::after { content: ""; flex: 1; min-width: 24px; height: 1px; background: #dfe5ec; }
#questionnaire-wrapper .q-title-num {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border-radius: 50%; font-size: 13px; font-weight: 600; line-height: 1;
}
#questionnaire-wrapper .q-title-num::before { content: counter(q-sec); }
#questionnaire-wrapper .q-title .question-title { min-width: 0; margin: 0; font-size: 19px; line-height: 1.4; }
#questionnaire-wrapper .q-title-explain { display: block; margin-top: 4px; margin-inline-start: 38px; font-size: 13px; color: #6b7a8c; }
#questionnaire-wrapper td .q-type-Title { counter-increment: none; padding-block: 0; }
#questionnaire-wrapper td .q-title-num,
#questionnaire-wrapper td .q-title-row::after { display: none; }
#questionnaire-wrapper td .q-title-explain { margin-inline-start: 0; }

/* ---------- section steps (sticky heading). Active step wears .btn-theme for the theme colour ---------- */
#questionnaire-wrapper .q-steps { display: flex; gap: 6px; margin-top: 10px; padding-bottom: 2px; overflow-x: auto; }
#questionnaire-wrapper .q-step {
    flex: none; display: inline-flex; align-items: center; gap: 6px; max-width: 240px;
    padding-block: 4px; padding-inline: 4px 12px; border: 0; border-radius: 20px;
    background: #eef1f5; color: #6b7a8c; font: inherit; font-size: 12.5px; white-space: nowrap; cursor: pointer;
    transition: background-color .15s, color .15s;
}
#questionnaire-wrapper .q-step:hover { background: #e3e8ef; color: #1f2d3d; }
#questionnaire-wrapper .q-step:focus-visible { outline: 2px solid #8aa0b4; outline-offset: 1px; }
#questionnaire-wrapper .q-step-num {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; background: #fff; font-size: 11px; font-weight: 600;
}
#questionnaire-wrapper .q-step-text { overflow: hidden; text-overflow: ellipsis; }
#questionnaire-wrapper .q-step.q-step-done { background: #e5f5ed; color: #2e9e6b; }
#questionnaire-wrapper .q-step.q-step-done .q-step-num { background: #2e9e6b; color: #fff; }
#questionnaire-wrapper .q-step.btn-theme .q-step-num { background: rgba(255, 255, 255, .25); color: #fff; }
/* ---------- density: keep the form close to the old length ---------- */
/* the row wrapper around each question carries .mb-lg (20px); cards have their own border, so 8px is enough */
#questionnaire-wrapper .mb-lg:has(> * > .q-card) { margin-bottom: 8px !important; }   /* app.css: .mb-lg { margin-bottom: 15px !important } */
/* informative questions are label + value lines, keep them tight like a details list */
#questionnaire-wrapper .mb-lg:has(> * > .q-type-Informative) { margin-bottom: 0 !important; }
#questionnaire-wrapper .q-card.q-type-Informative { padding-block: 3px; }
#questionnaire-wrapper .q-type-Informative .question-decription,
#questionnaire-wrapper .q-type-Informative .informative-question { line-height: 1.5; }
#questionnaire-wrapper .q-card .question-explaination { display: inline-block; margin-top: 2px; }
#questionnaire-wrapper .q-card .q-seg > .c-radio { padding: 5px 16px; }
#questionnaire-wrapper .q-card .my-messages { margin-top: 4px; }
/* ---------- Bool: compact. The theme's ".c-checkbox div { display: inline }" plus a <br /> used to add
   empty lines under the switch, even when the explanation / link rendered nothing visible ---------- */
#questionnaire-wrapper .q-card .q-switch { display: block; padding: 0; }
#questionnaire-wrapper .q-card .q-switch > label.h4 { margin-block: 0; line-height: 1.4; }
#questionnaire-wrapper .q-card .q-switch .q-bool-explain,
#questionnaire-wrapper .q-card .q-switch .q-bool-explain div { display: block; }
#questionnaire-wrapper .q-card .q-switch .q-bool-explain { margin-top: 4px; margin-inline-start: 54px; }   /* under the text: 42px track + 12px gap */
#questionnaire-wrapper .q-card .q-switch .q-bool-explain a:empty,
#questionnaire-wrapper .q-card .q-switch .q-bool-explain div:empty { display: none; }
#questionnaire-wrapper .q-card .q-switch .q-bool-explain:not(:has(a:not(:empty), .question-explaination:not(:empty))) { display: none; }
/* ---------- auto-save status in the heading: a soft pill (green / grey while saving / red on failure) ---------- */
#questionnaire-wrapper .q-save-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px;
    background: #e5f5ed; color: #2e9e6b; font-size: 12.5px; line-height: 1.4; vertical-align: middle;
}
#questionnaire-wrapper .q-save-chip .fas { color: inherit !important; font-size: 11px; }
#questionnaire-wrapper .q-save-chip.q-save-chip-busy { background: #eef1f5; color: #6b7a8c; }
#questionnaire-wrapper .q-save-chip.q-save-chip-failed { background: #fdecee; color: #d9363e; }
/* ---------- answer options: the WHOLE tile / pill / chip is the hit area ----------
   The template nests <label class="answer-decription"> inside the option <label>. A label is interactive
   content, so a click on the answer text never reaches the outer label and the radio / checkbox did not
   toggle - only the small invisible 20x20 input (.c-radio input, opacity 0) did. Stretch that input over
   the whole option so every click lands on it directly. */
#questionnaire-wrapper .q-card .q-tiles > .c-radio,
#questionnaire-wrapper .q-card .q-seg > .c-radio,
#questionnaire-wrapper .q-card .multiple-answers-vertical > label,
#questionnaire-wrapper .q-card .multiple-answers-horizontal > label { position: relative; }
#questionnaire-wrapper .q-card .q-tiles > .c-radio > input,
#questionnaire-wrapper .q-card .q-seg > .c-radio > input,
#questionnaire-wrapper .q-card .multiple-answers-vertical > label > input,
#questionnaire-wrapper .q-card .multiple-answers-horizontal > label > input {
    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; cursor: pointer;
}
#questionnaire-wrapper .q-card .q-tiles > .c-radio > input[disabled],
#questionnaire-wrapper .q-card .q-seg > .c-radio > input[disabled],
#questionnaire-wrapper .q-card .multiple-answers-vertical > label > input[disabled],
#questionnaire-wrapper .q-card .multiple-answers-horizontal > label > input[disabled] { cursor: not-allowed; }
/* ---------- option marker inside tiles / chips ----------
   The theme positions the marker with PHYSICAL margins (.c-radio span { margin-right: -22px; margin-left: 5px }
   in app-rtl.css, mirrored in app.css) and relies on bootstrap's label padding to make room for it.
   The tiles replace that padding, so the marker was pushed outside the tile. Inside a flex tile the
   marker is just a flex item: zero its margins and centre it. Same for the answer text's label margin. */
#questionnaire-wrapper .q-card .q-tiles > .c-radio > span.fas,
#questionnaire-wrapper .q-card .multiple-answers-vertical > label > span.fas,
#questionnaire-wrapper .q-card .multiple-answers-horizontal > label > span.fas {
    flex: none; margin: 0; vertical-align: middle;
}
#questionnaire-wrapper .q-card .q-tiles .answer-decription,
#questionnaire-wrapper .q-card .q-seg .answer-decription,
#questionnaire-wrapper .q-card .multiple-answers-vertical .answer-decription,
#questionnaire-wrapper .q-card .multiple-answers-horizontal .answer-decription { margin: 0; line-height: 1.4; }
#questionnaire-wrapper .q-card .multiple-answers-horizontal > label { display: inline-flex; align-items: center; gap: 8px; }
/* ---------- horizontal multiple-choice chips: tidy ----------
   app-rtl.css forces `.c-checkbox label { padding-right: 0 !important }` and
   `.checkbox-inline { padding-right: 5px !important }`, which ate the chip's start padding (marker on the
   border) and made the gaps uneven. Re-assert both, and start the chips on their own line under the
   question text, like the radio options. */
#questionnaire-wrapper .q-type-Multiple span:has(> .question-decription) { display: block; margin-bottom: 6px; }
#questionnaire-wrapper .q-card .multiple-answers-horizontal {
    padding: 0 !important; margin: 0 0 6px !important; margin-inline-end: 6px !important; vertical-align: top;
}
#questionnaire-wrapper .q-card .multiple-answers-horizontal > label {
    padding-block: 5px !important; padding-inline: 10px 14px !important;
}
#questionnaire-wrapper .q-card .multiple-answers-vertical > label {
    padding-block: 7px !important; padding-inline: 12px !important;
}
/* ---------- question with a comment box: the comment spans the CONTROL height (not the title) ----------
   >= 992px (where bootstrap puts the comment beside the question, col-md-3) the card becomes a 2-column
   grid. The question column is display:contents, so its children become grid items in column 1:
   row 1 = .q-head (title, explanation, badge), rows 2+ = the control and its messages.
   The comment column sits in column 2 from row 2 down, so it starts where the control starts.
   flex-grow (not height) fills it, so the auto-grow directive can still make it taller.
   Below 992px bootstrap stacks the comment under the control, which is left as is. */
#questionnaire-wrapper .q-head { display: contents; }
@media (min-width: 992px) {
    #questionnaire-wrapper .q-card:has(> div > textarea[name$="_comment"]) {
        display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); column-gap: 16px; padding-inline: 20px;
    }
    #questionnaire-wrapper .q-card:has(> div > textarea[name$="_comment"])::before,
    #questionnaire-wrapper .q-card:has(> div > textarea[name$="_comment"])::after { content: none; }   /* bootstrap .row clearfix would become grid items */
    #questionnaire-wrapper .q-card:has(> div > textarea[name$="_comment"]) > div:first-child { display: contents; }
    #questionnaire-wrapper .q-card:has(> div > textarea[name$="_comment"]) > div:first-child > * { grid-column: 1; min-width: 0; }
    #questionnaire-wrapper .q-card:has(> div > textarea[name$="_comment"]) .q-head { display: block; grid-row: 1; }
    #questionnaire-wrapper .q-card > div:has(> textarea[name$="_comment"]) {
        grid-column: 2; grid-row: 2 / span 20; width: auto; padding: 0; display: flex; flex-direction: column;
    }
    #questionnaire-wrapper .q-card > div:has(> textarea[name$="_comment"]) > :not(textarea) { display: none; }   /* the old &nbsp; spacers */
    #questionnaire-wrapper .q-card > div > textarea[name$="_comment"] { flex: 1 1 auto; min-height: 60px; resize: vertical; }
}
#questionnaire-wrapper td .q-card:has(> div > textarea[name$="_comment"]) { display: block; }
/* ---------- table containers: no zebra striping inside questionnaires ----------
   the app-wide `.table-bordered > tbody > tr:nth-of-type(odd)` (above, ~line 500) stays for every other table */
#questionnaire-wrapper .table-bordered > tbody > tr:nth-of-type(odd) { background-color: transparent; }
/* ---------- notes (correspondence) speech-bubble button ----------
   Floats to the far end of the title row so the title starts clean. States by shape AND colour:
   none = faint outline bubble (full strength on card hover / focus, always on touch screens),
   has notes = filled bubbles + count, unread from others = amber + dot. */
#questionnaire-wrapper .q-card .q-note-btn {
    float: inline-end; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    height: 28px; min-width: 28px; margin-block: -3px 0; margin-inline-start: 8px; padding: 0 8px;
    border: 1px solid transparent; border-radius: 14px; background: transparent; color: #8a96a4;
    font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; opacity: .45;
    transition: opacity .15s, background-color .15s, color .15s, border-color .15s;
}
#questionnaire-wrapper .q-card:hover .q-note-btn,
#questionnaire-wrapper .q-card:focus-within .q-note-btn { opacity: 1; }
#questionnaire-wrapper .q-card .q-note-btn:hover { background: #eef1f5; border-color: #e3e8ef; color: #1f2d3d; }
#questionnaire-wrapper .q-card .q-note-btn:focus-visible { opacity: 1; outline: 2px solid #8aa0b4; outline-offset: 1px; }
#questionnaire-wrapper .q-card .q-note-btn i { font-size: 15px; }
#questionnaire-wrapper .q-card .q-note-btn.q-note-has { opacity: 1; background: #eef1f5; color: #5b6878; }
#questionnaire-wrapper .q-card .q-note-btn.q-note-new { opacity: 1; background: #fdf3dc; color: #9a6200; }
@media (hover: none) { #questionnaire-wrapper .q-card .q-note-btn { opacity: 1; } }
#questionnaire-wrapper .q-note-dot {
    position: absolute; top: 1px; inset-inline-end: 2px; width: 8px; height: 8px;
    border-radius: 50%; background: #e8a317; border: 1.5px solid #fff;
}
/* table cells: keep app.css's corner placement (td .correspondence-marker), compact, no count */
#questionnaire-wrapper td .q-card .q-note-btn {
    position: absolute; float: none; margin: 0; height: 24px; min-width: 24px; padding: 0 5px;
    opacity: 1; background: #fff; border-color: #e3e8ef;
}
#questionnaire-wrapper td .q-card .q-note-btn .q-note-count { display: none; }

/* header buttons (whole form / general notes): same icon, count chip, unread dot */
#questionnaire-wrapper .q-note-head { position: relative; display: inline-flex; align-items: center; gap: 6px; }
#questionnaire-wrapper .q-note-head .q-note-count {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #eef1f5;
    font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
}
#questionnaire-wrapper .q-note-head.q-note-new .q-note-count { background: #fdf3dc; color: #9a6200; }
#questionnaire-wrapper .q-note-head .q-note-dot { top: -3px; inset-inline-end: -3px; }
/* ---------- keep the scrolling body inside its budget when the heading grows ----------
   app.css sizes .sticky-panel .panel-body as "viewport minus a FIXED heading allowance"
   (67vh on a page, 78vh - 180px / 240px in a dialog). The progress bar and the section steps make the
   sticky heading taller than that allowance, so the panel overflowed, the outer container scrolled and
   the sticky heading slid over the top of the body (hiding its scrollbar). Subtract what we added.
   Allowances are slightly generous (steps row may show a thin horizontal scrollbar). */
#questionnaire-wrapper .sticky-panel { --q-head-extra: 0px; }
#questionnaire-wrapper .sticky-panel:has(.q-progress) { --q-head-extra: 30px; }
#questionnaire-wrapper .sticky-panel:has(.q-steps) { --q-head-extra: 48px; }
#questionnaire-wrapper .sticky-panel:has(.q-progress):has(.q-steps) { --q-head-extra: 78px; }
#questionnaire-wrapper .sticky-panel .panel-body { max-height: calc(67vh - var(--q-head-extra)); }
.ngdialog-content #questionnaire-wrapper .sticky-panel .panel-body-short { max-height: calc(78vh - 180px - var(--q-head-extra)); }
.ngdialog-content #questionnaire-wrapper .sticky-panel .panel-body-long { max-height: calc(78vh - 240px - var(--q-head-extra)); }
#questionnaire-wrapper .q-steps { scrollbar-width: thin; }
/* ---------- RadioBox (horizontal): the same tiles, laid out in a wrapping row ----------
   LongAnswer keeps the stacked layout (that is what .radio-inline-turns meant in the old look).
   app-rtl.css forces `.radio-inline { padding-right: 5px !important }`, so the tile padding is re-asserted. */
#questionnaire-wrapper .q-card .q-tiles.q-tiles-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#questionnaire-wrapper .q-card .q-tiles.q-tiles-row > .c-radio {
    flex: 0 1 auto; width: auto; max-width: 100%;
    padding-block: 7px !important; padding-inline: 12px 14px !important;
}
#questionnaire-wrapper .q-card .q-tiles.q-tiles-row > .display-hover { margin-inline-start: 6px; }