/* 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 ')'
 */

/* 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;
    }
}