/* ============================================================================
   Design tokens, portal side. (Roadmap 4.0-UX-06, 4.0-UX-08)

   The same names as the admin stylesheet, so a component that exists in both
   desks asks for the same thing in both. The two greys are the accessible
   values: the ones they replace measured 3.1:1 and 4.5:1 against these
   surfaces, which fails WCAG AA for the small print they are used for - and on
   the portal that small print is read by customers, not only by staff.
   ========================================================================= */
:root {
    --jsst-ink: #23282d;
    --jsst-muted: #6b747c;
    --jsst-faint: #6f7474;
    --jsst-label: #606262;
    --jsst-canvas: #ffffff;
    --jsst-surface: #f8fafc;
    --jsst-tint: #fbfbfb;
    --jsst-line: #e2e4e6;
    --jsst-hair: #f4f5f6;
    --jsst-accent: #4f46e5;
    --jsst-radius: 2px;
    --jsst-radius-card: 0;
    --jsst-control-touch: 44px;
}

/* bootstrap css */
*[id^="js"],*[class^="js"],*[id^="js"],*[class^="js"]
,*[id^="js"] *,*[class^="js"] *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
*[id^="js"]:before,*[class^="js"]:before,*[id^="js"]:after,*[class^="js"]:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
div.jsst-main-up-wrapper input, div.jsst-main-up-wrapper button,div.jsst-main-up-wrapper select,div.jsst-main-up-wrapper textarea{font-size:inherit;line-height:inherit;font-family:inherit;}
div.jsst-main-up-wrapper a{text-decoration:none; transition: all 0.3s ease;}
div.jsst-main-up-wrapper a.js-ticket-dash-menu{text-decoration:none}
div.jsst-main-up-wrapper a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
div.jsst-main-up-wrapper figure{margin:0}img{vertical-align:middle}.js-img-responsive,.js-thumbnail>img,.js-thumbnail a>img{display:block;width:100% \9;max-width:100%;height:auto}
.js-container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}
.js-container-fluid{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}
.js-row{margin-left:-15px;margin-right:-15px}
.js-col-xs-1, .js-col-sm-1, .js-col-md-1, .js-col-lg-1, .js-col-xs-2, .js-col-sm-2, .js-col-md-2, .js-col-lg-2, .js-col-xs-3, .js-col-sm-3, .js-col-md-3, .js-col-lg-3, .js-col-xs-4, .js-col-sm-4, .js-col-md-4, .js-col-lg-4, .js-col-xs-5, .js-col-sm-5, .js-col-md-5, .js-col-lg-5, .js-col-xs-6, .js-col-sm-6, .js-col-md-6, .js-col-lg-6, .js-col-xs-7, .js-col-sm-7, .js-col-md-7, .js-col-lg-7, .js-col-xs-8, .js-col-sm-8, .js-col-md-8, .js-col-lg-8, .js-col-xs-9, .js-col-sm-9, .js-col-md-9, .js-col-lg-9, .js-col-xs-10, .js-col-sm-10, .js-col-md-10, .js-col-lg-10, .js-col-xs-11, .js-col-sm-11, .js-col-md-11, .js-col-lg-11, .js-col-xs-12, .js-col-sm-12, .js-col-md-12, .js-col-lg-12{position:relative;min-height:1px;padding-left:15px;padding-right:15px}.js-col-xs-1, .js-col-xs-2, .js-col-xs-3, .js-col-xs-4, .js-col-xs-5, .js-col-xs-6, .js-col-xs-7, .js-col-xs-8, .js-col-xs-9, .js-col-xs-10, .js-col-xs-11, .js-col-xs-12{float:left}.js-col-xs-12{width:100%}.js-col-xs-11{width:91.66666667%}.js-col-xs-10{width:83.33333333%}.js-col-xs-9{width:75%}.js-col-xs-8{width:66.66666667%}.js-col-xs-7{width:58.33333333%}.js-col-xs-6{width:50%}.js-col-xs-5{width:41.66666667%}.js-col-xs-4{width:33.33333333%}.js-col-xs-3{width:25%}.js-col-xs-2{width:16.66666667%}.js-col-xs-1{width:8.33333333%}.js-col-xs-pull-12{right:100%}.js-col-xs-pull-11{right:91.66666667%}.js-col-xs-pull-10{right:83.33333333%}.js-col-xs-pull-9{right:75%}.js-col-xs-pull-8{right:66.66666667%}.js-col-xs-pull-7{right:58.33333333%}.js-col-xs-pull-6{right:50%}.js-col-xs-pull-5{right:41.66666667%}.js-col-xs-pull-4{right:33.33333333%}.js-col-xs-pull-3{right:25%}.js-col-xs-pull-2{right:16.66666667%}.js-col-xs-pull-1{right:8.33333333%}.js-col-xs-pull-0{right:auto}.js-col-xs-push-12{left:100%}.js-col-xs-push-11{left:91.66666667%}.js-col-xs-push-10{left:83.33333333%}.js-col-xs-push-9{left:75%}.js-col-xs-push-8{left:66.66666667%}.js-col-xs-push-7{left:58.33333333%}.js-col-xs-push-6{left:50%}.js-col-xs-push-5{left:41.66666667%}.js-col-xs-push-4{left:33.33333333%}.js-col-xs-push-3{left:25%}.js-col-xs-push-2{left:16.66666667%}.js-col-xs-push-1{left:8.33333333%}.js-col-xs-push-0{left:auto}.js-col-xs-offset-12{margin-left:100%}.js-col-xs-offset-11{margin-left:91.66666667%}.js-col-xs-offset-10{margin-left:83.33333333%}.js-col-xs-offset-9{margin-left:75%}.js-col-xs-offset-8{margin-left:66.66666667%}.js-col-xs-offset-7{margin-left:58.33333333%}.js-col-xs-offset-6{margin-left:50%}.js-col-xs-offset-5{margin-left:41.66666667%}.js-col-xs-offset-4{margin-left:33.33333333%}.js-col-xs-offset-3{margin-left:25%}.js-col-xs-offset-2{margin-left:16.66666667%}.js-col-xs-offset-1{margin-left:8.33333333%}.js-col-xs-offset-0{margin-left:0}
.js-clearfix:after,.js-container:after,.js-container-fluid:after,.js-row:after,.js-form-horizontal .js-form-group:after{clear:both}
@media (min-width:768px){.js-container{width:750px}.js-col-sm-1, .js-col-sm-2, .js-col-sm-3, .js-col-sm-4, .js-col-sm-5, .js-col-sm-6, .js-col-sm-7, .js-col-sm-8, .js-col-sm-9, 	.js-col-sm-10, .js-col-sm-11, .js-col-sm-12{float:left}	.js-col-sm-12{width:100%}	.js-col-sm-11{width:91.66666667%}	.js-col-sm-10{width:83.33333333%}	.js-col-sm-9{width:75%}	.js-col-sm-8{width:66.66666667%}	.js-col-sm-7{width:58.33333333%}	.js-col-sm-6{width:50%}	.js-col-sm-5{width:41.66666667%}	.js-col-sm-4{width:33.33333333%}	.js-col-sm-3{width:25%}	.js-col-sm-2{width:16.66666667%}	.js-col-sm-1{width:8.33333333%}	.js-col-sm-pull-12{right:100%}	.js-col-sm-pull-11{right:91.66666667%}	.js-col-sm-pull-10{right:83.33333333%}	.js-col-sm-pull-9{right:75%}	.js-col-sm-pull-8{right:66.66666667%}	.js-col-sm-pull-7{right:58.33333333%}	.js-col-sm-pull-6{right:50%}	.js-col-sm-pull-5{right:41.66666667%}	.js-col-sm-pull-4{right:33.33333333%}	.js-col-sm-pull-3{right:25%}	.js-col-sm-pull-2{right:16.66666667%}	.js-col-sm-pull-1{right:8.33333333%}	.js-col-sm-pull-0{right:auto}	.js-col-sm-push-12{left:100%}	.js-col-sm-push-11{left:91.66666667%}	.js-col-sm-push-10{left:83.33333333%}	.js-col-sm-push-9{left:75%}	.js-col-sm-push-8{left:66.66666667%}	.js-col-sm-push-7{left:58.33333333%}	.js-col-sm-push-6{left:50%}	.js-col-sm-push-5{left:41.66666667%}	.js-col-sm-push-4{left:33.33333333%}	.js-col-sm-push-3{left:25%}	.js-col-sm-push-2{left:16.66666667%}	.js-col-sm-push-1{left:8.33333333%}	.js-col-sm-push-0{left:auto}	.js-col-sm-offset-12{margin-left:100%}	.js-col-sm-offset-11{margin-left:91.66666667%}	.js-col-sm-offset-10{margin-left:83.33333333%}	.js-col-sm-offset-9{margin-left:75%}	.js-col-sm-offset-8{margin-left:66.66666667%}	.js-col-sm-offset-7{margin-left:58.33333333%}	.js-col-sm-offset-6{margin-left:50%}	.js-col-sm-offset-5{margin-left:41.66666667%}	.js-col-sm-offset-4{margin-left:33.33333333%}	.js-col-sm-offset-3{margin-left:25%}	.js-col-sm-offset-2{margin-left:16.66666667%}	.js-col-sm-offset-1{margin-left:8.33333333%}.js-col-sm-offset-0{margin-left:0}button.js-ticket-segmented-control-option{padding: 10px 5px !important;}}
@media (min-width:992px){.js-container{width:970px}.js-col-md-1, .js-col-md-2, .js-col-md-3, .js-col-md-4, .js-col-md-5, .js-col-md-6, .js-col-md-7, .js-col-md-8, .js-col-md-9, 	.js-col-md-10, .js-col-md-11, .js-col-md-12{float:left}	.js-col-md-12{width:100%}	.js-col-md-11{width:91.66666667%}	.js-col-md-10{width:83.33333333%}	.js-col-md-9{width:75%}	.js-col-md-8{width:66.66666667%}	.js-col-md-7{width:58.33333333%}	.js-col-md-6{width:50%}	.js-col-md-5{width:41.66666667%}	.js-col-md-4{width:33.33333333%}	.js-col-md-3{width:25%}	.js-col-md-2{width:16.66666667%}	.js-col-md-1{width:8.33333333%}	.js-col-md-pull-12{right:100%}	.js-col-md-pull-11{right:91.66666667%}	.js-col-md-pull-10{right:83.33333333%}	.js-col-md-pull-9{right:75%}	.js-col-md-pull-8{right:66.66666667%}	.js-col-md-pull-7{right:58.33333333%}	.js-col-md-pull-6{right:50%}	.js-col-md-pull-5{right:41.66666667%}	.js-col-md-pull-4{right:33.33333333%}	.js-col-md-pull-3{right:25%}	.js-col-md-pull-2{right:16.66666667%}	.js-col-md-pull-1{right:8.33333333%}	.js-col-md-pull-0{right:auto}	.js-col-md-push-12{left:100%}	.js-col-md-push-11{left:91.66666667%}	.js-col-md-push-10{left:83.33333333%}	.js-col-md-push-9{left:75%}	.js-col-md-push-8{left:66.66666667%}	.js-col-md-push-7{left:58.33333333%}	.js-col-md-push-6{left:50%}	.js-col-md-push-5{left:41.66666667%}	.js-col-md-push-4{left:33.33333333%}	.js-col-md-push-3{left:25%}	.js-col-md-push-2{left:16.66666667%}	.js-col-md-push-1{left:8.33333333%}	.js-col-md-push-0{left:auto}	.js-col-md-offset-12{margin-left:100%}	.js-col-md-offset-11{margin-left:91.66666667%}	.js-col-md-offset-10{margin-left:83.33333333%}	.js-col-md-offset-9{margin-left:75%}	.js-col-md-offset-8{margin-left:66.66666667%}	.js-col-md-offset-7{margin-left:58.33333333%}	.js-col-md-offset-6{margin-left:50%}	.js-col-md-offset-5{margin-left:41.66666667%}	.js-col-md-offset-4{margin-left:33.33333333%}	.js-col-md-offset-3{margin-left:25%}	.js-col-md-offset-2{margin-left:16.66666667%}	.js-col-md-offset-1{margin-left:8.33333333%}.js-col-md-offset-0{margin-left:0}}
@media (min-width:1200px){.js-container{width:1170px}.js-col-lg-1, .js-col-lg-2, .js-col-lg-3, .js-col-lg-4, .js-col-lg-5, .js-col-lg-6, .js-col-lg-7, .js-col-lg-8, 	.js-col-lg-9, .js-col-lg-10, .js-col-lg-11, .js-col-lg-12{float:left}	.js-col-lg-12{width:100%}	.js-col-lg-11{width:91.66666667%}	.js-col-lg-10{width:83.33333333%}	.js-col-lg-9{width:75%}	.js-col-lg-8{width:66.66666667%}	.js-col-lg-7{width:58.33333333%}	.js-col-lg-6{width:50%}	.js-col-lg-5{width:41.66666667%}	.js-col-lg-4{width:33.33333333%}	.js-col-lg-3{width:25%}	.js-col-lg-2{width:16.66666667%}	.js-col-lg-1{width:8.33333333%}	.js-col-lg-pull-12{right:100%}	.js-col-lg-pull-11{right:91.66666667%}	.js-col-lg-pull-10{right:83.33333333%}	.js-col-lg-pull-9{right:75%}	.js-col-lg-pull-8{right:66.66666667%}	.js-col-lg-pull-7{right:58.33333333%}	.js-col-lg-pull-6{right:50%}	.js-col-lg-pull-5{right:41.66666667%}	.js-col-lg-pull-4{right:33.33333333%}	.js-col-lg-pull-3{right:25%}	.js-col-lg-pull-2{right:16.66666667%}	.js-col-lg-pull-1{right:8.33333333%}	.js-col-lg-pull-0{right:auto}	.js-col-lg-push-12{left:100%}	.js-col-lg-push-11{left:91.66666667%}	.js-col-lg-push-10{left:83.33333333%}	.js-col-lg-push-9{left:75%}	.js-col-lg-push-8{left:66.66666667%}	.js-col-lg-push-7{left:58.33333333%}	.js-col-lg-push-6{left:50%}	.js-col-lg-push-5{left:41.66666667%}	.js-col-lg-push-4{left:33.33333333%}	.js-col-lg-push-3{left:25%}	.js-col-lg-push-2{left:16.66666667%}	.js-col-lg-push-1{left:8.33333333%}	.js-col-lg-push-0{left:auto}	.js-col-lg-offset-12{margin-left:100%}	.js-col-lg-offset-11{margin-left:91.66666667%}	.js-col-lg-offset-10{margin-left:83.33333333%}	.js-col-lg-offset-9{margin-left:75%}	.js-col-lg-offset-8{margin-left:66.66666667%}	.js-col-lg-offset-7{margin-left:58.33333333%}	.js-col-lg-offset-6{margin-left:50%}	.js-col-lg-offset-5{margin-left:41.66666667%}	.js-col-lg-offset-4{margin-left:33.33333333%}	.js-col-lg-offset-3{margin-left:25%}	.js-col-lg-offset-2{margin-left:16.66666667%}	.js-col-lg-offset-1{margin-left:8.33333333%}.js-col-lg-offset-0{margin-left:0}}
@media (min-width:768px){.js-container{width:750px}.js-col-sm-1, .js-col-sm-2, .js-col-sm-3, .js-col-sm-4, .js-col-sm-5, .js-col-sm-6, .js-col-sm-7, .js-col-sm-8, .js-col-sm-9, 	.js-col-sm-10, .js-col-sm-11, .js-col-sm-12{float:left}	.js-col-sm-12{width:100%}	.js-col-sm-11{width:91.66666667%}	.js-col-sm-10{width:83.33333333%}	.js-col-sm-9{width:75%}	.js-col-sm-8{width:66.66666667%}	.js-col-sm-7{width:58.33333333%}	.js-col-sm-6{width:50%}	.js-col-sm-5{width:41.66666667%}	.js-col-sm-4{width:33.33333333%}	.js-col-sm-3{width:25%}	.js-col-sm-2{width:16.66666667%}	.js-col-sm-1{width:8.33333333%}	.js-col-sm-pull-12{right:100%}	.js-col-sm-pull-11{right:91.66666667%}	.js-col-sm-pull-10{right:83.33333333%}	.js-col-sm-pull-9{right:75%}	.js-col-sm-pull-8{right:66.66666667%}	.js-col-sm-pull-7{right:58.33333333%}	.js-col-sm-pull-6{right:50%}	.js-col-sm-pull-5{right:41.66666667%}	.js-col-sm-pull-4{right:33.33333333%}	.js-col-sm-pull-3{right:25%}	.js-col-sm-pull-2{right:16.66666667%}	.js-col-sm-pull-1{right:8.33333333%}	.js-col-sm-pull-0{right:auto}	.js-col-sm-push-12{left:100%}	.js-col-sm-push-11{left:91.66666667%}	.js-col-sm-push-10{left:83.33333333%}	.js-col-sm-push-9{left:75%}	.js-col-sm-push-8{left:66.66666667%}	.js-col-sm-push-7{left:58.33333333%}	.js-col-sm-push-6{left:50%}	.js-col-sm-push-5{left:41.66666667%}	.js-col-sm-push-4{left:33.33333333%}	.js-col-sm-push-3{left:25%}	.js-col-sm-push-2{left:16.66666667%}	.js-col-sm-push-1{left:8.33333333%}	.js-col-sm-push-0{left:auto}	.js-col-sm-offset-12{margin-left:100%}	.js-col-sm-offset-11{margin-left:91.66666667%}	.js-col-sm-offset-10{margin-left:83.33333333%}	.js-col-sm-offset-9{margin-left:75%}	.js-col-sm-offset-8{margin-left:66.66666667%}	.js-col-sm-offset-7{margin-left:58.33333333%}	.js-col-sm-offset-6{margin-left:50%}	.js-col-sm-offset-5{margin-left:41.66666667%}	.js-col-sm-offset-4{margin-left:33.33333333%}	.js-col-sm-offset-3{margin-left:25%}	.js-col-sm-offset-2{margin-left:16.66666667%}	.js-col-sm-offset-1{margin-left:8.33333333%}.js-col-sm-offset-0{margin-left:0}}
@media (min-width:992px){.js-container{width:970px}.js-col-md-1, .js-col-md-2, .js-col-md-3, .js-col-md-4, .js-col-md-5, .js-col-md-6, .js-col-md-7, .js-col-md-8, .js-col-md-9, 	.js-col-md-10, .js-col-md-11, .js-col-md-12{float:left}	.js-col-md-12{width:100%}	.js-col-md-11{width:91.66666667%}	.js-col-md-10{width:83.33333333%}	.js-col-md-9{width:75%}	.js-col-md-8{width:66.66666667%}	.js-col-md-7{width:58.33333333%}	.js-col-md-6{width:50%}	.js-col-md-5{width:41.66666667%}	.js-col-md-4{width:33.33333333%}	.js-col-md-3{width:25%}	.js-col-md-2{width:16.66666667%}	.js-col-md-1{width:8.33333333%}	.js-col-md-pull-12{right:100%}	.js-col-md-pull-11{right:91.66666667%}	.js-col-md-pull-10{right:83.33333333%}	.js-col-md-pull-9{right:75%}	.js-col-md-pull-8{right:66.66666667%}	.js-col-md-pull-7{right:58.33333333%}	.js-col-md-pull-6{right:50%}	.js-col-md-pull-5{right:41.66666667%}	.js-col-md-pull-4{right:33.33333333%}	.js-col-md-pull-3{right:25%}	.js-col-md-pull-2{right:16.66666667%}	.js-col-md-pull-1{right:8.33333333%}	.js-col-md-pull-0{right:auto}	.js-col-md-push-12{left:100%}	.js-col-md-push-11{left:91.66666667%}	.js-col-md-push-10{left:83.33333333%}	.js-col-md-push-9{left:75%}	.js-col-md-push-8{left:66.66666667%}	.js-col-md-push-7{left:58.33333333%}	.js-col-md-push-6{left:50%}	.js-col-md-push-5{left:41.66666667%}	.js-col-md-push-4{left:33.33333333%}	.js-col-md-push-3{left:25%}	.js-col-md-push-2{left:16.66666667%}	.js-col-md-push-1{left:8.33333333%}	.js-col-md-push-0{left:auto}	.js-col-md-offset-12{margin-left:100%}	.js-col-md-offset-11{margin-left:91.66666667%}	.js-col-md-offset-10{margin-left:83.33333333%}	.js-col-md-offset-9{margin-left:75%}	.js-col-md-offset-8{margin-left:66.66666667%}	.js-col-md-offset-7{margin-left:58.33333333%}	.js-col-md-offset-6{margin-left:50%}	.js-col-md-offset-5{margin-left:41.66666667%}	.js-col-md-offset-4{margin-left:33.33333333%}	.js-col-md-offset-3{margin-left:25%}	.js-col-md-offset-2{margin-left:16.66666667%}	.js-col-md-offset-1{margin-left:8.33333333%}.js-col-md-offset-0{margin-left:0}}
@media (min-width:1200px){.js-container{width:1170px}.js-col-lg-1, .js-col-lg-2, .js-col-lg-3, .js-col-lg-4, .js-col-lg-5, .js-col-lg-6, .js-col-lg-7, .js-col-lg-8, 	.js-col-lg-9, .js-col-lg-10, .js-col-lg-11, .js-col-lg-12{float:left}	.js-col-lg-12{width:100%}	.js-col-lg-11{width:91.66666667%}	.js-col-lg-10{width:83.33333333%}	.js-col-lg-9{width:75%}	.js-col-lg-8{width:66.66666667%}	.js-col-lg-7{width:58.33333333%}	.js-col-lg-6{width:50%}	.js-col-lg-5{width:41.66666667%}	.js-col-lg-4{width:33.33333333%}	.js-col-lg-3{width:25%}	.js-col-lg-2{width:16.66666667%}	.js-col-lg-1{width:8.33333333%}	.js-col-lg-pull-12{right:100%}	.js-col-lg-pull-11{right:91.66666667%}	.js-col-lg-pull-10{right:83.33333333%}	.js-col-lg-pull-9{right:75%}	.js-col-lg-pull-8{right:66.66666667%}	.js-col-lg-pull-7{right:58.33333333%}	.js-col-lg-pull-6{right:50%}	.js-col-lg-pull-5{right:41.66666667%}	.js-col-lg-pull-4{right:33.33333333%}	.js-col-lg-pull-3{right:25%}	.js-col-lg-pull-2{right:16.66666667%}	.js-col-lg-pull-1{right:8.33333333%}	.js-col-lg-pull-0{right:auto}	.js-col-lg-push-12{left:100%}	.js-col-lg-push-11{left:91.66666667%}	.js-col-lg-push-10{left:83.33333333%}	.js-col-lg-push-9{left:75%}	.js-col-lg-push-8{left:66.66666667%}	.js-col-lg-push-7{left:58.33333333%}	.js-col-lg-push-6{left:50%}	.js-col-lg-push-5{left:41.66666667%}	.js-col-lg-push-4{left:33.33333333%}	.js-col-lg-push-3{left:25%}	.js-col-lg-push-2{left:16.66666667%}	.js-col-lg-push-1{left:8.33333333%}	.js-col-lg-push-0{left:auto}	.js-col-lg-offset-12{margin-left:100%}	.js-col-lg-offset-11{margin-left:91.66666667%}	.js-col-lg-offset-10{margin-left:83.33333333%}	.js-col-lg-offset-9{margin-left:75%}	.js-col-lg-offset-8{margin-left:66.66666667%}	.js-col-lg-offset-7{margin-left:58.33333333%}	.js-col-lg-offset-6{margin-left:50%}	.js-col-lg-offset-5{margin-left:41.66666667%}	.js-col-lg-offset-4{margin-left:33.33333333%}	.js-col-lg-offset-3{margin-left:25%}	.js-col-lg-offset-2{margin-left:16.66666667%}	.js-col-lg-offset-1{margin-left:8.33333333%}.js-col-lg-offset-0{margin-left:0}button.js-ticket-segmented-control-option{padding: 10px 18px !important;}}


/* General Classes */
.jsst-main-up-wrapper *{box-sizing: border-box;}
div.js-ticket-fields-wrp div.js-ticket-form-field input.js-ticket-field-input, select.js-ticket-select-field{margin: 0;}
.jsst-main-up-wrapper input:focus{outline: none;}
.jsst-main-up-wrapper .visible{display: none;}
.jsst-main-up-wrapper .js-ticket-visible{display: none;}
.js-form-ticket-readonly {pointer-events: none !important; opacity: 0.7;}
select::-ms-expand { display: none; }
.jsst-main-up-wrapper .js-col-xs-12.js-ticket-wrapper{padding-left: 15px;padding-right: 15px;}
.js-ticket-thread .js-ticket-thread-image img{position: unset;}
/* General Classes */
/* BreadCrumbs */
div.jsst-main-up-wrapper {width: 100% !important;max-width: 1080px !important;margin: 0 auto; border-radius: 12px;overflow-y:auto;overflow-x:hidden;}
div.jsst-main-up-wrapper > *:not(.frontend.updated, .frontend.error, #js-ticket-main-black-background, #js-ticket-main-black-background, #black_wrapper_ai_reply, div#jstran_loading, div#js_ai_reply_loading, .internalnote-popup-background, .jsst-popup-background, #jsst-header-main-wrapper, .js-ticket-dashboard-main-content, div#userpopup, #popupforagenttransfer, #popupfordepartmenttransfer, #usercredentailspopup, #popupforinternalnote, #jsst-popup-wrapper, #multiformpopup, #multiformpopupblack, #jstran_loading, #userpopupblack){width:calc(100% - 40px) !important;margin-left:20px !important;margin-right: 20px !important;}
div.jsst-main-up-wrapper > *:last-child{margin-bottom: 30px;}
div.jsst-main-up-wrapper button, div.jsst-main-up-wrapper input[type="button"], div.jsst-main-up-wrapper input[type="submit"]{height: unset;}
div.jsst-main-up-wrapper::before,div.jsst-main-up-wrapper::after {content: '';display: block;clear: both;}
div.js-ticket-breadcrumb-wrp{float: left;width: 100%;margin-bottom: 20px !important; padding: 10px 0;}
img.homeicon{max-width: 90% !important; vertical-align: middle;}
div.js-ticket-breadcrumb-wrp .breadcrumb {list-style: none; overflow: hidden;margin:0; padding: 0; }
div.js-ticket-breadcrumb-wrp .breadcrumb li { float: left; }
div.js-ticket-breadcrumb-wrp .breadcrumb li a { color: #fff; text-decoration: none;  padding: 10px 15px 10px 55px; background: #007bff; position: relative;  display: block; float: left; transition: background-color 0.3s ease;}
div.js-ticket-breadcrumb-wrp .breadcrumb li a:hover { background: #0056b3; }
div.js-ticket-breadcrumb-wrp .breadcrumb li a::after {content: " "; display: block;  width: 0;  height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid #007bff; position: absolute; top: 50%; margin-top: -50px; left: 100%;z-index: 2; transition: border-left-color 0.3s ease;}
div.js-ticket-breadcrumb-wrp .breadcrumb li a:hover::after { border-left-color: #0056b3; }
div.js-ticket-breadcrumb-wrp .breadcrumb li a::before { content: " ";  display: block;  width: 0;  height: 0; border-top: 50px solid transparent;border-bottom: 50px solid transparent; border-left: 30px solid #f8f9fa; position: absolute; top: 50%; margin-top: -50px;  margin-left: 1px;left: 100%; z-index: 1; }
div.js-ticket-breadcrumb-wrp .breadcrumb li:first-child a {padding-left: 20px;text-align: center; border-radius: 8px 0 0 8px;}
div.js-ticket-breadcrumb-wrp .breadcrumb li:last-child a {background: transparent !important; color: #343a40; pointer-events: none; cursor: default;}
div.js-ticket-breadcrumb-wrp .breadcrumb li:last-child a::after { border: 0; }

/* Top Header */
div#jsst-header{display: flex;align-items: center;justify-content: space-between;padding: 16px 25px;border-radius: 12px;margin-bottom: 20px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);}
div#jsst-header-main-wrapper a{text-decoration: none !important; outline: 0 !important;}
a.js-ticket-header-links{display: inline-block;}
div#jsst-header-main-wrapper p{margin: 0px !important;}
div#jsst-header-main-wrapper{display: inline-block;width:100%;float: left;margin-bottom: 15px;}
div#jsst-header div#jsst-tabs-wrp{display: flex;gap: 15px;width: 100%;flex-wrap: wrap;}
div#jsst-header div#jsst-tabs-wrp .jsst-header-tab {display: flex;align-items: center;justify-content: center;text-align: center;min-width:fit-content;}
div#jsst-header span.jsst-header-tab.js-ticket-loginlogoutclass {margin-left: auto;}
div#jsst-header div#jsst-header-heading{float: left;width: 35%;font-size: 28px;padding: 10px 5px; font-weight: 600; color: #343a40;}
div#jsst-header.margin{margin-bottom: 40px;}
div#jsst-header span.jsst-header-tab a.js-cp-menu-link{padding: 6px 16px;text-decoration: none;font-weight: 500;border-radius: 8px;transition: all 0.2s ease;display: block;}
div#jsst-header span.jsst-header-tab a.js-cp-menu-link img.cp-menu-link-img{vertical-align: middle; margin-right: 8px;}


/* Js Ticket Error Pages */
div.js-ticket-error-message-wrapper{display: flex;flex-wrap: wrap;width: 100%;padding: 40px;background-color: #ffffff;border-radius: 20px;box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);animation: fadeIn 0.8s ease-out forwards;/*opacity: 0;*/margin-top: 25px;}
div.js-ticket-error-message-wrapper div.js-ticket-message-image-wrapper{float: left;width: 100%;text-align: center; margin-bottom: 20px;}
div.js-ticket-error-message-wrapper div.js-ticket-message-image-wrapper img{margin:0 auto; max-width: 150px;}
div.js-ticket-error-message-wrapper div.js-ticket-message-image-wrapper div.js-ticket-message-image{display: inline-block;max-width: 100%;}
div.js-ticket-messages-data-wrapper{float: left;width: 100%;text-align: center;}
div.js-ticket-messages-data-wrapper span.js-ticket-messages-main-text{display: inline-block; float: left;width: 100%;font-size: 24px;padding: 20px 0; color: #dc3545; font-weight: 600;}
div.js-ticket-messages-data-wrapper span.js-ticket-messages-block_text{display: inline-block; float: left;width: 100%;font-size: 18px; color: var(--jsst-muted, #6b747c);}
span.js-ticket-user-login-btn-wrp{float: left;width: 100%;text-align: center;padding: 30px;}
span.js-ticket-user-login-btn-wrp a.js-ticket-login-btn{display: inline-block;margin-right: 20px;padding: 16px 30px;min-width: 160px;border-radius: 10px;line-height: initial;font-weight: 700;cursor: pointer;transition: all 0.3s ease;text-decoration: none;display: inline-block;letter-spacing: 0.5px;}
span.js-ticket-user-login-btn-wrp a.js-ticket-login-btn:hover {transform: translateY(-3px);filter: brightness(1.1);}
span.js-ticket-user-login-btn-wrp a.js-ticket-register-btn{display: inline-block; min-width: 140px;text-align: center;padding: 16px 30px;min-width: 160px;border-radius: 10px;line-height: initial;font-weight: 700;cursor: pointer;transition: all 0.3s ease;text-decoration: none;display: inline-block;letter-spacing: 0.5px;}
span.js-ticket-user-login-btn-wrp a.js-ticket-register-btn:hover {transform: translateY(-3px);filter: brightness(1.1);}
div.frontend p{margin:0px;}
div.frontend.error{background:#f8d7da url(../images/notsaved.png) 15px center no-repeat; color:#721c24;border:1px solid #f5c6cb;box-sizing:border-box;padding: 15px 15px 15px 50px;margin-bottom: 15px; width: 100%; border-radius: 8px;}
div.frontend.updated{background:#d4edda url(../images/saved.png) 15px center no-repeat; color:#155724;border:1px solid #c3e6cb;box-sizing:border-box;display: inline-block;padding: 15px 15px 15px 50px;margin-bottom: 15px;width: 100%; border-radius: 8px;}

/* Email Notification */
div#jsst-widget-mailnotification-wrapper{display: block;width: 100%;float: left;margin-bottom: 10px;padding: 15px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: box-shadow 0.3s ease;}
div#jsst-widget-mailnotification-wrapper:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.1);}
div#jsst-widget-mailnotification-wrapper img{width:40px;max-height: 40px;float:left;margin-right: 15px; border-radius: 50%;}
div#jsst-widget-mailnotification-wrapper span.jsst-widget-mailnotification-upper{display: block;width: 100%; margin-bottom: 5px;}
div#jsst-widget-mailnotification-wrapper span.jsst-widget-mailnotification-upper span.jsst-widget-mailnotification-created{float: right;white-space: nowrap;text-overflow:ellipsis;overflow: hidden; color: var(--jsst-muted, #6b747c); font-size: 14px;}
div#jsst-widget-mailnotification-wrapper span.jsst-widget-mailnotification-upper span.jsst-widget-mailnotification-new{font-weight: bold; color: #007bff;}	
div#jsst-widget-mailnotification-wrapper span.jsst-widget-mailnotification-upper span.jsst-widget-mailnotification-replied{font-weight: bold; color: #28a745;}	

/* Admin Theme */
div#black_wrapper_jobapply{position: fixed;width:100%;height: 100%;top:0px;left:0px;background:#000000;background:rgba(0,0,0,0.6);z-index:9998;}
div#js_jobapply_main_wrapper{position:fixed;top:100px;left:20%;width:60%;z-index: 9999;border-radius:5px;padding:2%;}
div#js_jobapply_main_wrapper span.js_job_controlpanelheading{display: block;padding: 15px 10px;border-bottom: 4px solid #DC6161;font-size: 16px;color: #333A46;margin: 0px 0px;background: #ffffff;}
div#js_jobapply_main_wrapper span.js_job_applynow_heading{display:block;padding:10px 4%;font-weight: bold;margin-bottom:15px;width:100%;margin-top:-4%;margin-left: -4%;}
div#js_jobapply_main_wrapper div.js_job_form_field_wrapper div.js_job_form_feild_halfwidth{display:inline-block;width:48%;float:left;margin-right:2%;}
div#js_jobapply_main_wrapper div.js_job_form_field_wrapper div.js_job_form_feild_halfwidth div.js_job_form_field_title{display:inline-block;width:100%;font-weight: bold;margin-bottom:5px;}
div#js_jobapply_main_wrapper div.js_job_form_field_wrapper div.js_job_form_feild_halfwidth div.js_job_form_field_value{display:inline-block;width:100%;margin-bottom: 5px;}
div#js_jobapply_main_wrapper div.js_job_form_field_wrapper div.js_job_form_feild_halfwidth div.js_job_form_field_value select{width:100%;background: url(../images/selecticon.png) 96% / 4% no-repeat #eee;}
div#js_jobapply_main_wrapper div.js_job_form_field_wrapper div.js_job_form_button{display:inline-block;width:98%;text-align:right;margin-right:2%;margin-top:5px;}
div#js_jobapply_main_wrapper div.js_job_form_field_wrapper div.js_job_form_button input.js_job_form_button,
div#js_jobapply_main_wrapper div.js_job_form_field_wrapper div.js_job_form_button a.js_job_data_button{padding:5px 15px;}
div#js_jobapply_main_wrapper div.js_job_form_field_wrapper div.js_job_form_button a.js_job_data_button:hover{text-decoration: none;}
div#js_jobapply_main_wrapper{top:10% !important;left : 20% !important;width : 60%;}
div#js_job_wrapper div.js_theme_wrapper{background:#262626;padding:10px;margin-bottom: 10px;max-height: 400px;overflow-y: auto;}
div#js_job_wrapper div.js_theme_wrapper div.theme_platte{display:inline-block;width:100%;overflow: visible;}
div#js_job_wrapper div.js_theme_wrapper div.theme_platte div.color_wrapper{display:inline-block;width:100%;margin:10px 0px;position:relative;}
div#js_job_wrapper div.js_theme_wrapper div.theme_platte div.color_wrapper img.preview{display:none;position:absolute;right:30%;top:70px;box-shadow: 0px 0px 3px #ffffff;z-index: 9999;width: 277px;}
div#js_job_wrapper div.js_theme_wrapper div.theme_platte div.color_wrapper span.theme_name{display:inline-block;padding:10px 0px;width:70%;float:left;color:#ffffff;}
div#js_job_wrapper div.js_theme_wrapper div.theme_platte div.color_wrapper a.preview{display:inline-block;width:25px;height:25px;background:url(../images/themes/previewicon.png) no-repeat;margin-right: 20px;margin-top:10px;float: unset;}
div#js_job_wrapper div.js_theme_wrapper div.theme_platte div.color_wrapper a.set_theme{display:inline-block;width:25px;height:25px;background:url(../images/themes/themeicon.png) no-repeat;background-size: 100% 100%;margin-top:10px;}
div#js_job_wrapper div.js_theme_wrapper div.theme_platte div.color_wrapper div.color{display:inline-block;height:50px;width:calc(100% / 7);float:left;}

/* Admin Email Piping */
div#cp_wraper,div#cp_icon_main{display:inline-block;width:100%;}
div#cp_wraper div.cp_sub_heading_bar{display:inline-block;width:calc(25% - 15px);float:left;padding:20px;background:#007bff;color:#ffffff;margin-right:20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
div#cp_wraper div.cp_sub_heading_bar:last-child { margin-right: 0;}
div#cp_wraper div.cp_sub_heading_bar span.cp_sub_heading_bar_text a{display:inline-block;margin-top:15px;font-weight: bold;color:#ffffff;text-decoration: none;margin-left: 10px;}
div#cp_wraper div#cp_makereview{display:inline-block;width:calc(75% - 5px);float:left;background:#17a2b8;padding:20px;color:#ffffff; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);}

/* Widgets */
div#jsst-widget-myticket-wrapper{display: block;width: 100%;float:left;margin-bottom: 15px;padding:20px; background-color: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); transition: all 0.3s ease;}
div#jsst-widget-myticket-wrapper:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1);}
div#jsst-widget-myticket-wrapper div.jsst-widget-myticket-topbar{display: block;width: 100%;float:left;padding-bottom: 10px;margin-bottom: 10px;}
div#jsst-widget-myticket-wrapper div.jsst-widget-myticket-topbar span.jsst-widget-myticket-subject{display: block;max-width: 70%;float:left;white-space: nowrap;text-overflow:ellipsis;overflow: hidden; font-weight: 600; color: #343a40;}
div#jsst-widget-myticket-wrapper div.jsst-widget-myticket-topbar span.jsst-widget-myticket-status{display: inline-block;max-width: 30%;float:right;white-space: nowrap;text-overflow:ellipsis;padding: 12px 18px;border-radius: 20px;text-align: center;overflow: hidden; font-size: 12px; font-weight: 500;}
div#jsst-widget-myticket-wrapper.vertical div.jsst-widget-myticket-topbar span.jsst-widget-myticket-subject{max-width:100%;width: 100%; margin-bottom: 10px;}
div#jsst-widget-myticket-wrapper.vertical div.jsst-widget-myticket-topbar span.jsst-widget-myticket-status{max-width:100%;width: auto;float:left;}
div#jsst-widget-myticket-wrapper div.jsst-widget-myticket-bottombar{display: flex; justify-content: space-between; align-items: center; width: 100%;float:left;}
div#jsst-widget-myticket-wrapper div.jsst-widget-myticket-bottombar span.jsst-widget-myticket-priority{display: inline-block; padding:4px 15px;float:left;margin-right:20px;white-space: nowrap;text-overflow:ellipsis;text-align: center;overflow: hidden; border-radius: 20px; font-size: 12px;}
div#jsst-widget-myticket-wrapper.vertical div.jsst-widget-myticket-bottombar span.jsst-widget-myticket-priority{margin-right:10px;}
div#jsst-widget-myticket-wrapper div.jsst-widget-myticket-bottombar span.jsst-widget-myticket-from{display: block;min-width: 100px;float:left;white-space: nowrap;text-overflow:ellipsis;overflow: hidden; color: var(--jsst-muted, #6b747c); font-size: 14px;}
div#jsst-widget-myticket-wrapper div.jsst-widget-myticket-bottombar span.jsst-widget-myticket-from span.widget-from{}
div#jsst-widget-myticket-wrapper div.jsst-widget-myticket-bottombar span.jsst-widget-myticket-from span.widget-fromname{}

/* ticket status */
div.js-ticket-checkstatus-wrp p.js-support-tkentckt-centrmainwrp{font-size: 20px !important;position: relative;display: inline-block;text-align: center;margin:40px 10px 60px 10px;font-weight: 600;width: calc(100% - 20px); color: #495057;}
div.js-ticket-checkstatus-wrp p.js-support-tkentckt-centrmainwrp span.js-support-tkentckt-centrwrp{background-color: #f8f9fa;position: relative;display:inline-block;z-index: 2;padding: 0 25px;text-align: center;}
div.js-ticket-checkstatus-wrp p.js-support-tkentckt-centrmainwrp::after{display: block;content: '';z-index: 1;position: absolute;width: 100%;height: 2px;top: 50%; background-color: #dee2e6;}

/* Visitor Message */
div.jsst-visitor-message-wrapper{width: 100%;float: left;padding: 25px;margin:0 0 20px 0px;background: #e9ecef; border-radius: 12px; display: flex; align-items: center;gap: 20px;}
div.jsst-visitor-message-wrapper img{float: left;padding-right:25px; max-width: 15%;}
div.jsst-visitor-message-wrapper span{float: left;padding: 0;color: #343a40;font-size: 20px;width: 85%; font-weight: 500;}
div.jsst-visitor-token-message{float: left; width: 100%;background-color: #fff3cd;border: 1px solid #ffeeba;padding: 20px; border-radius: 8px;margin-bottom:30px;}
div.jsst-visitor-token-message p.jsst-visitor-token-message-heading{float: left;width: 100%;font-weight: bold;margin-bottom: 10px; color: #856404; font-size: 18px;}
div.jsst-visitor-token-message p.jsst-visitor-token-message-discription{float: left;width: 100%;margin-bottom: 15px; color: #856404;}
div.jsst-visitor-token-message p.jsst-visitor-token-message-token-number{display: flex;flex-wrap: wrap; justify-content: space-between;align-items: center; float: left;width: 100%;padding: 10px 15px;background-color: #fff;border: 1px solid #ffeeba;color: #343a40; border-radius: 8px; font-size: 16px; font-family: 'Courier New', Courier, monospace;}
div.jsst-visitor-token-message p.jsst-visitor-token-message-token-number a{float: right;cursor: pointer;padding: 8px 15px;min-width: 120px;text-align: center; background-color: #007bff; color: #fff; border-radius: 5px; text-decoration: none; transition: background-color 0.3s ease;}

/* Rating */
div.jsst-rating-div{display: inline-block;padding: 10px 0;}
div.jsst-rating-div img{float:left;padding: 4px; cursor: pointer; transition: transform 0.2s ease;}
div.jsst-rating-div img:hover { transform: scale(1.2);}

/* pagination */
.tablenav{float: left;width: 100%; margin-top: 20px;}
div.tablenav div.tablenav-pages{width: 100%;padding: 15px 10px;margin-bottom: 15px;text-align: center;}

/* Custom Fields */
.jsst-main-up-wrapper input.custom_date{background-image: url(../images/calender.png);background-repeat: no-repeat;background-position: calc(100% - 15px) center;padding: 12px 15px;height: 52px;background-size: 20px;border-radius: 8px; width: 100%;}
select.js-ticket-custom-select{width: 100%;border-radius: 8px;background: url(../images/selecticon.png) 97% / 12px no-repeat #fff;padding: 12px 15px; appearance: none;}
div.js-ticket-custom-radio-box{float: left;padding: 10px 18px;border-radius: 10px; min-height: 52px;line-height: initial; display: flex; align-items: center;margin: 0px !important;} 
input.radiobutton.js-ticket-append-radio-btn{vertical-align: middle;margin: 0 8px 0 0 !important; width: 18px; height: 18px; }
label{margin: 0px;display: inline-block; font-weight: 500;}
div.js-ticket-radio-box{float: left;padding: 10px 18px;border-radius: 10px;min-height: 52px;line-height: initial; display: flex; align-items: center;margin: 0 !important;}
div.js-ticket-radio-box input.js-ticket-radio-btn{margin-right: 8px;vertical-align: middle; width: 18px; height: 18px;}
.jsst-main-up-wrapper .wp-editor-wrap{width: 100%;}
div.js-ticket-radio-box label{display: inline-block;margin:0px;vertical-align: middle;}
span.js-attachment-file-box{float: left;width:100%; padding: 10px;position: relative;display:flex;align-items: center; min-height:52px;border-radius: 8px; background-color: #f8f9fa;}
div.js-ticket-add-form-wrapper div.js-ticket-from-field-wrp{position: relative; margin-bottom: 25px;}
span.jsst-help-block {font-size: 15px;position: relative;bottom: 7px;width: 100%;left: 0; color: var(--jsst-muted, #6b747c);}
select.js-ticket-select-field, select.js-ticket-premade-select{padding: 12px 15px; border-radius: 8px;}
div.js-ticket-premade-msg-wrp div.js-ticket-premade-field-wrp select#departmentid,
div.js-ticket-premade-msg-wrp div.js-ticket-premade-field-wrp select#staffid{padding: 12px 15px; border-radius: 8px;}
.js-filter-wrapper select{padding: 12px 15px;-webkit-appearance: none !important; border-radius: 8px;}
div.js-ticket-add-form-wrapper div.js-ticket-from-field-wrp div.js-ticket-from-field select{padding: 12px 18px;line-height: initial;min-height: 52px;-webkit-appearance: none !important; border-radius: 8px;width: 100%;}
div.js-ticket-add-form-wrapper div.js-ticket-from-field-wrp div.js-ticket-from-field .js-ticket-subscribe{padding:10px;background: #e9f7ef;border:1px solid #28a745; border-radius: 8px;}
.js-ticket-recaptcha{width: 100%;padding: 10px;height: auto;border-radius: 10px !important;min-height: 52px;}
.js-filter-wrapper input[type="text"]{padding: 12px 15px; border-radius: 8px;}
div.jsst-main-up-wrapper a.js-merge-btn{color: #fff;text-decoration: none; background-color: #007bff; padding: 10px 15px; border-radius: 5px;}
.jsst-missing-addon-message{margin-top: 25px;text-align: center;display: inline-block;width: 100%; padding: 15px; background-color: #fff3cd; color: #856404; border-radius: 8px;}
div#jsst-header div#jsst-header-heading a.js-ticket-header-links{color: #343a40;}
.js-ticket-usercredentails-credentails-wrp{display: inline-block;width: 100%;max-height: 480px;overflow-y: auto;}
div.js-ticket-mails-btn-wrp div.js-ticket-mail-btn a.js-add-link .js-message-white-image{display: none;}
div.js-ticket-mails-btn-wrp div.js-ticket-mail-btn a.js-add-link .js-message-black-image{display: inline-block; vertical-align: middle; margin-right: 8px;}
div.js-ticket-mails-btn-wrp div.js-ticket-mail-btn a.js-add-link:hover .js-message-white-image{display: inline-block; vertical-align: middle; margin-right: 8px;}
div.js-ticket-mails-btn-wrp div.js-ticket-mail-btn a.js-add-link.active .js-message-white-image{display: inline-block; vertical-align: middle; margin-right: 8px;}
div.js-ticket-mails-btn-wrp div.js-ticket-mail-btn a.js-add-link.active .js-message-black-image{display: none;}
div.js-ticket-mails-btn-wrp div.js-ticket-mail-btn a.js-add-link:hover .js-message-black-image{display: none;}
div.js-ticket-mails-btn-wrp div.js-ticket-mail-btn a.js-add-link{display: inline-block; min-width: 140px;text-align: center}
/* JS Support Ticket Woocommerce */
.js-ticket-wc-order-box{padding:25px; background-color: #f8f9fa; border-radius: 12px;}
.js-ticket-wc-order-box .js-ticket-wc-order-item{display: inline-block;width: 50%;float:left;margin-bottom: 12px; font-size: 16px;}
.js-ticket-wc-order-box .js-ticket-wc-order-item .js-ticket-wc-order-item-title{display: inline-block;margin-right: 8px; font-weight: 600; color: #495057;}
.js-ticket-wc-order-box .js-ticket-wc-order-item .js-ticket-wc-order-item-value{display: inline-block; color: var(--jsst-muted, #6b747c);}
.js-ticket-wc-order-box .js-ticket-wc-order-link{display: inline-block;padding: 10px 20px;cursor: pointer;margin-bottom: 8px;min-width: 140px;text-align: center; background-color: #007bff; color: #fff; border-radius: 8px; text-decoration: none; transition: background-color 0.3s ease;}
.js-ticket-wc-order-box .js-ticket-wc-order-link:hover { background-color: #0056b3;}

/* helpdesk share */
.js-hd-share-wrp {float: left;width: 100%; margin-top: 20px;}
.js-hd-share-wrp .js-hd-share {float: left;width: 100%;border: 2px solid #007bff; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); color: #fff;}
.js-hd-share-wrp .js-hd-share .js-hd-share-disc {padding: 20px;}
.js-hd-share-wrp .js-hd-share .js-hd-share-disc .js-hd-share-txt {margin: 8px 0;font-size: 24px;text-align: center;font-weight: bold;line-height: initial;}
.js-hd-share-wrp .js-hd-share .js-hd-share-disc .js-hd-share-disc {margin: 8px 0;font-size: 55px;text-align: center;font-weight: bold;line-height: initial;}
.js-hd-share-wrp .js-hd-share .js-hd-share-cnt {position: relative;padding: 30px;overflow: hidden; background-color: rgba(255,255,255,0.1);}
.js-hd-share-wrp .js-hd-share .js-hd-share-cnt .js-hd-disc-tit {margin: 0 0 10px; font-size: 20px; font-weight: 600;}
.js-hd-share-wrp .js-hd-share .js-hd-share-cnt .js-hd-disc-txt {margin-bottom: 20px; opacity: 0.9;}
.js-hd-share-wrp .js-hd-share .js-hd-share-cnt .js-hd-soc-share a {display: inline-block;margin-right: 8px; opacity: 0.9; transition: opacity 0.3s ease;}
.js-hd-share-wrp .js-hd-share .js-hd-share-cnt .js-hd-soc-share a:hover { opacity: 1;}
.js-hd-share-wrp .js-hd-share .js-hd-share-cnt .js-hd-disc-amnt {position: absolute;right: 5%;top: 15%;font-size: 70px;font-weight: bold;color: rgba(255,255,255,0.2);transform: scale(3) rotate(-15deg); opacity: 0.5;}
.js-hd-share-wrp .js-hd-share .js-hd-share-coupon-wrp {padding: 25px;text-align: center;border-top: 2px solid #007bff;background: rgba(255, 255, 255, 0.9); color: #333;}
.js-hd-share-wrp .js-hd-share .js-hd-share-coupon-wrp span {display: inline-block;font-weight: bold;}
.js-hd-share-wrp .js-hd-share .js-hd-share-coupon-wrp .js-hd-share-coupon-lbl {margin-right: 5px; color: #007bff;}
#js-hd-share-coupon{display: none; background-color: #e9ecef; padding: 5px 10px; border-radius: 5px;}
div.js-ticket-add-form-wrapper div.js-ticket-from-field-wrp div.js-ticket-from-field .js-ticket-custom-terms-and-condition-box{padding: 15px;width: 100%;line-height: initial;height: auto;border-radius: 8px; background-color: #f8f9fa;}
.termsandconditions_link_anchor{display: inline-block;padding: 0px;margin: 0px; text-decoration: underline; color: #007bff;}

/* social login */
.js-ticket-sociallogin {float: left;width: 100%;margin-top: 25px;padding: 20px; background-color: #f8f9fa; border-radius: 12px;}
.js-ticket-sociallogin .js-ticket-sociallogin-heading {margin-bottom: 15px;font-size: 18px;font-weight: 600; color: #343a40; text-align: center;}
.js-ticket-sociallogin .js-ticket-sociallogin-list {float: left;width: 100%; text-align: center;}
.js-ticket-sociallogin .js-ticket-sociallogin-list .js-ticket-sociallogin-item {display: inline-block;transition: 0.3s ease;transform: translateY(0px);}
.js-ticket-sociallogin .js-ticket-sociallogin-list .js-ticket-sociallogin-item:hover {transform: translateY(-5px); box-shadow: 0 4px 10px rgba(0,0,0,0.1);}
.js-ticket-sociallogin .js-ticket-sociallogin-list .js-ticket-sociallogin-item:not(:first-child) {margin-left: 10px;}
/* user popup */
div#multiformpopupblack, div#black_wrapper_ai_reply {background: rgba(0,0,0,0.6);position: fixed;width: 100%;height: 100%;top: 0px;left: 0px;z-index: 9989;}
div#multiformpopup * {box-sizing: border-box;}
div#multiformpopup{position: fixed;top:50%;left:50%;width:60%;z-index: 9999999999;transform: translate(-50%, -50%);background: #fff;box-sizing: border-box;max-height: 80%;overflow-x: hidden;overflow-y: auto; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);}
div#multiformpopup .multiformpopup-top {float: left;width: 100%;background: #007bff;padding: 15px 20px; border-radius: 15px 15px 0 0;}
div#multiformpopup .multiformpopup-top .multiformpopup-heading {float: left;color: #fff;font-weight: bold;font-size: 22px;line-height: initial;text-transform: capitalize;}
div#multiformpopup .multiformpopup-top .multiformpopup-close {float: right;cursor: pointer; filter: brightness(0) invert(1); opacity: 0.8;}
div#multiformpopup .multiformpopup-search {float: left;width: 100%; background-color: #f8f9fa; padding-bottom: 10px;}
div#multiformpopup .multiformpopup-search form .multiformpopup-fields-wrp {float: left;width: 100%;padding: 15px;}
div#multiformpopup .multiformpopup-search form .multiformpopup-fields-wrp .multiformpopup-fields {float: left;width: calc(100% / 3 - 10px);margin: 0 5px;}
div#multiformpopup .multiformpopup-search form .multiformpopup-fields-wrp .multiformpopup-fields input {display: inline-block;width: 100%;padding: 10px 15px;height: 45px;background: #fff;color: #495057;box-shadow: unset; border-radius: 8px;}
div#multiformpopup .multiformpopup-search form .multiformpopup-fields-wrp .multiformpopup-btn-wrp {float: left;width: 100%;}
div#multiformpopup .multiformpopup-search form .multiformpopup-fields-wrp .multiformpopup-btn-wrp input {float: left;padding: 10px 25px;border: 1px solid;margin: 10px 5px 0;cursor: pointer; border-radius: 8px; font-weight: 500;}
div#multiformpopup .multiformpopup-search form .multiformpopup-fields-wrp .multiformpopup-btn-wrp .multiformpopup-search-btn {background: #007bff;border-color: #007bff;color: #fff;}
div#multiformpopup .multiformpopup-search form .multiformpopup-fields-wrp .multiformpopup-btn-wrp .multiformpopup-search-btn:hover {background: #0056b3;border-color: #0056b3;color: #fff;}
div#multiformpopup .multiformpopup-search form .multiformpopup-fields-wrp .multiformpopup-btn-wrp .multiformpopup-reset-btn {background: var(--jsst-muted, #6b747c);color: #fff;}
div#multiformpopup .multiformpopup-search form .multiformpopup-fields-wrp .multiformpopup-btn-wrp .multiformpopup-reset-btn:hover {background: #5a6268;border-color: #545b62;color: #fff;}
div#multiformpopup #multiformpopup-records-wrp {float: left;width: 100%; padding: 20px;}
div#multiformpopup #multiformpopup-records-wrp #multiformpopup-records .multiformpopup-records-desc {text-align: center;padding: 50px 15px;color: var(--jsst-muted, #6b747c); font-size: 18px;}
div#multiformpopup div.jsst-multiformpopup-header {width:100%; font-size:21px;float:left;padding: 20px; font-weight: bold;line-height: initial;display: flex;margin-bottom: 15px;}
div#multiformpopup div.jsst-multiformpopup-header .multiformpopup-header-text{font-size:21px;}
div#multiformpopup div.multiformpopup-header-close-img {width: 28px;height: 28px;cursor: pointer;background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%234b5563" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"%3e%3cline x1="18" y1="6" x2="6" y2="18"%3e%3c/line%3e%3cline x1="6" y1="6" x2="18" y2="18"%3e%3c/line%3e%3c/svg%3e') !important;background-repeat: no-repeat !important;background-position: center center !important;background-size: contain !important;transition: transform 0.3s ease-in-out;margin-left: auto;}
div#multiformpopup div.multiformpopup-header-close-img:hover {transform: rotate(90deg);}
div#multiformpopup #records{float: left;width: 100%;padding: 0 20px 20px;}
div#multiformpopup div.js-ticket-table-wrp{float: left;width: 100%;padding: 0;}
div#multiformpopup div.js-ticket-table-body div.js-ticket-multiform-row:hover {box-shadow: 0px 4px 15px rgba(0,0,0,0.1); background-color: #f8f9fa; transform: translateY(-2px);}
div#multiformpopup div.js-ticket-table-body{float: left;width: 100%;margin: 0px}
div#multiformpopup div.js-ticket-table-body div.js-ticket-multiform-row{float: left;width: 100%;margin: 10px 0;padding: 0 15px;cursor: pointer; border-radius: 8px; transition: all 0.3s ease; background: #fff;}
div#multiformpopup div.js-ticket-table-body div.js-ticket-multiform-row.selected { border-color: #007bff; box-shadow: 0px 4px 15px rgba(0, 123, 255, 0.2);}
div#multiformpopup div.js-ticket-table-body div.js-ticket-multiform-row div.js-ticket-table-body-col{padding: 15px;text-align: left;float: left;width: 100%;line-height: initial;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
div#multiformpopup div.js-ticket-table-body div.js-ticket-multiform-row div.js-ticket-table-body-col:first-child{font-weight: 600;border:none; color: #343a40;}
div#multiformpopup div.js-ticket-table-body div.js-ticket-multiform-row.selected div.js-ticket-table-body-col:first-child{font-weight: 900; color: #007bff;}
div#multiformpopup div.js-ticket-table-body div.js-ticket-multiform-row div.js-ticket-table-body-col:last-child{border-bottom: unset;}
div#multiformpopup div.js-ticket-table-body div.js-multiformpopup-link-wrp{float: left;width: 100%;text-align: center;margin-top: 25px;display: none;}
div#multiformpopup div.js-ticket-table-body div.js-multiformpopup-link-wrp a.js-multiformpopup-link{padding: 15px 40px;min-width: 150px;border-radius: 8px;line-height: initial;background-color: #28a745;color: #ffffff;border: none;display: inline-block;margin-top: 25px;cursor: pointer; transition: background-color 0.3s ease;}
div#multiformpopup div.js-ticket-table-body div.js-multiformpopup-link-wrp a.js-multiformpopup-link:hover { background-color: #218838;}
/*new css*/
form.js-ticket-form div.js-form-wpuser-data-wrapper {float: left;width:100%;padding: 20px;border: 1px solid #b8daff;background-color: #e7f3ff;border-radius: 12px;margin: 0 0px 25px;}
form.js-ticket-form div.js-form-wpuser-data-wrapper input.js-ticket-form-field-input {border: 1px solid #99c6f0 !important;border-radius: 8px !important; padding: 10px 15px;}
#wp-jsticket_message-wrap button{background: #f8f9fa !important;color: #495057 !important; border-radius: 5px; padding: 5px 10px; cursor: pointer;}
#wp-jsticket_message-wrap button:hover { background-color: #e9ecef !important;}
div.js-ticket-search-form-btn-wrp input{flex: 1 1 auto;}
div.js-ticket-search-form-btn-wrp{flex-wrap: wrap;}
div.js-ticket-department-wrapper div.js-ticket-table-body div.js-ticket-data-row{flex-wrap: wrap;}
div.js-ticket-table-heading-wrp div.js-ticket-table-heading-right a.js-ticket-table-add-btn{flex-wrap: wrap;}
.js-ticket-from-field span.js-ticket-sub-fields{min-width: fit-content;}
div.js-ticket-form-btn-wrp a.js-ticket-cancel-button{text-align: center;}
div.js-ticket-form-btn-wrp{flex-wrap: wrap;}
div.js-ticket-table-wrp div.js-ticket-table-header, div.js-ticket-table-body div.js-ticket-data-row{flex-wrap: wrap;}
div.js-ticket-table-heading-wrp{flex-wrap: wrap;gap: 10px;}
div.js-ticket-fields-wrp div.js-ticket-form-field select.js-ticket-field-input{width: 100%;padding: 12px 18px;min-height:52px;height: auto;line-height: 1.5;transition: border-color 0.2s ease, box-shadow 0.2s ease;box-sizing: border-box;height: 100%;}
div.js-ticket-add-form-wrapper select[multiple="multiple"] {height: 52px !important;}
/*Loading css*/
div#jstran_loading, div#js_ai_reply_loading {display: none;z-index: 9999;position: fixed;top: 50%;left: 50%; transform: translate(-50%, -50%);}
div.tk_attachment_value_wrapperform span.tk_attachment_value_text{font-size: 15px;}
.js-ticket-attached-files-wrp{display: flex;align-items: center;gap: 20px;flex-wrap: wrap;margin-bottom: 10px;width: 100%;}
div.jsst-formfield-radio-button-wrap label{cursor: pointer;}
div.js-ticket-signature-radio-box label{cursor: pointer;}

/* widgets */
div.jsst-main-up-wrapper.jsst-widget-main-up-wrapper .js-ticket-head{width: 100%;padding: 15px 20px;display: flex;justify-content: space-between;align-items: center;margin-bottom: 1rem;float: none;font-weight: 700;border-radius: 8px;margin-top: 20px;}
div.jsst-main-up-wrapper.jsst-widget-main-up-wrapper .js-ticket-body-padding{display: flex;align-items: center;flex: 1 1 auto;gap: 1rem;font-weight: 600;}
div.jsst-main-up-wrapper.jsst-widget-main-up-wrapper .js-ticket-body-row-text a{font-weight: 600;}
div.jsst-main-up-wrapper.jsst-widget-main-up-wrapper .js-ticket-body-row{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;padding: 10px;border-radius: 8px;border: 1px solid #d1d1d1;border-top-color: rgb(209, 209, 209);border-right-color: rgb(209, 209, 209);border-bottom-color: rgb(209, 209, 209);border-left-color: rgb(209, 209, 209);transition: background-color 0.2s ease;min-height: 69px;}
div.jsst-main-up-wrapper.jsst-widget-main-up-wrapper .js-widget-download-right input{display: inline-block;padding: 12px 20px;border-radius: 8px;font-weight: 500;text-decoration: none;transition: background-color 0.2s ease, color 0.2s ease;border: 1px solid transparent;border-top-color: transparent;border-right-color: transparent;border-bottom-color: transparent;border-left-color: transparent;}
div.jsst-main-up-wrapper.jsst-widget-main-up-wrapper .js-widget-download-right .js-ticket-body-row-button{margin: 20px;}
div.jsst-main-up-wrapper.jsst-widget-main-up-wrapper .jsst-main-down-wrapper .js-ticket-body-padding .js-ticket-body-row-downloadicon{width: 47px;height: 47px;display: flex;align-items: center;}
div.jsst-main-up-wrapper.jsst-widget-main-up-wrapper .jsst-main-down-wrapper .js-ticket-body-padding .js-ticket-body-row-downloadicon img{max-width: 100%;max-height: 100%;width: 47px;}
div.jsst-main-up-wrapper.jsst-widget-main-up-wrapper .jsst-main-down-wrapper{display: flex;flex-direction: column;gap:1rem;}
/* ==== Auto Cleanup ==== */
div.jsst-main-up-wrapper .jsst-attachment-purged {display: flex;align-items: flex-start;background-color: #f8f9fa;color: var(--jsst-muted, #6b747c);border: 1px dashed #ced4da;padding: 8px 12px;border-radius: 4px;margin-top: 5px;margin-bottom: 5px;font-size: 13px;line-height: 1.4;transition: background-color 0.2s ease;}
div.jsst-main-up-wrapper .jsst-attachment-purged:hover {background-color: #f1f3f5;}
div.jsst-main-up-wrapper .jsst-attachment-purged .jsst-purged-icon {flex-shrink: 0;margin-right: 8px;margin-top: 2px;color: #dc3545;fill: currentColor;width: 16px;height: 16px;}
div.jsst-main-up-wrapper .jsst-attachment-purged span {flex-grow: 1;}
div.jsst-main-up-wrapper .jsst-purged-filename {font-weight: 600;color: #495057;word-break: break-word;}
div.jsst-main-up-wrapper .jsst-purged-reason {font-style: italic;color: #868e96;margin-left: 4px;}

/* Human verification. (Roadmap 4.0-SEC-01) */
.jsst-verification {display: block;}
.jsst-verification-hp {position: absolute !important;left: -9999px;top: auto;width: 1px;height: 1px;overflow: hidden;}
.jsst-verification-work {display: block;margin: 6px 0;}
.jsst-verification-status {display: inline-block;font-size: 13px;opacity: .8;}
.jsst-verification-notice {font-size: 12px;opacity: .75;margin-top: 4px;}
div.js-ticket-add-form-wrapper div.js-ticket-from-field-wrp.jsst-verification-quiet {margin-bottom: 0;}

/* Merging: duplicate suggestions, multi-select and preview.
   (Roadmap 4.0-CORE-04) */
.jsst-merge-likely-duplicate {box-shadow: inset 3px 0 0 #f0a132;}
.jsst-merge-duplicate-badge {display: inline-block;margin: 8px 0 0 10px;padding: 2px 8px;border-radius: 10px;background: #fdf1dd;color: #8a5a10;font-size: 12px;font-weight: 600;}
.jsst-merge-duplicate-badge .jsst-merge-duplicate-score {opacity: .75;font-weight: 400;}
.jsst-merge-pick {padding: 6px 10px 10px;}
.jsst-merge-pick label {display: inline-flex;align-items: center;gap: 6px;cursor: pointer;}
.jsst-merge-preview {padding: 12px;}
.jsst-merge-preview-sources {margin: 0 0 12px 18px;}
.jsst-merge-summary {float: left; width:100% ;margin: 12px;padding: 12px;border: 1px solid #ebecec;border-radius: 6px;background: #fbfbfb;}
.jsst-merge-summary-title {font-weight: 600;margin-bottom: 4px;}
.jsst-merge-summary-changes, .jsst-merge-summary-kept {margin: 0 0 10px 18px;}
.jsst-merge-empty {padding: 18px;}

/* Ticket tags on the portal, staff side only. (Roadmap 4.0-CORE-17) */
.jsst-tag-chip {display: inline-block;margin: 0 4px 4px 0;padding: 2px 9px;border-radius: 10px;background: #eef2ff;color: #3730a3;font-size: 12px;line-height: 18px;text-decoration: none;}
a.jsst-tag-chip:hover {background: #e0e7ff;color: #312e81;text-decoration: none;}
.jsst-tag-empty {color: #868e96;font-size: 12px;}
.jsst-tag-form {display: flex;flex-wrap: wrap;gap: 6px;align-items: center;margin-top: 6px;}
.jsst-tag-input {min-width: 180px;flex: 1 1 180px;}
.jsst-placeholders .jsst-placeholders-intro {margin: 0 0 12px;color: #6a6d6f;font-size: 13px;line-height: 1.6;text-align: start;}
.jsst-placeholders .jsst-placeholder-list {display: grid;grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));gap: 8px 20px;margin: 0;padding: 0;list-style: none;}
.jsst-placeholders .jsst-placeholder-list li {display: flex;align-items: baseline;gap: 8px;margin: 0;padding: 0;list-style: none;text-align: start;}
.jsst-placeholders .jsst-placeholder-token {flex: 0 0 auto;direction: ltr;unicode-bidi: isolate;margin: 0;padding: 3px 8px;background: #f6f7f7;border: 1px solid #dcdfe3;border-radius: 5px;color: #3730a3;font-family: Consolas, Monaco, "Courier New", monospace;font-size: 12px;line-height: 18px;cursor: pointer;box-shadow: none;transition: background .15s ease, border-color .15s ease;}
.jsst-placeholders .jsst-placeholder-token:hover {background: #eef2ff;border-color: #4f46e5;}
.jsst-placeholders .jsst-placeholder-token:active {background: #e0e5ff;}
.jsst-placeholders .jsst-placeholder-token:focus-visible {outline: 2px solid #4f46e5;outline-offset: 2px;}
.jsst-placeholders .jsst-placeholder-desc {color: #6a6d6f;font-size: 13px;line-height: 1.5;}
/* Reserves its line so the "Copied" confirmation cannot shift the list. */
.jsst-placeholders .jsst-placeholder-copied {display: block;min-height: 20px;margin-top: 10px;color: #0f7d4b;font-size: 13px;line-height: 20px;font-weight: 600;text-align: start;}
@media (max-width: 600px) {
    .jsst-placeholders .jsst-placeholder-list {grid-template-columns: 1fr;gap: 10px;}
    .jsst-placeholders .jsst-placeholder-list li {flex-wrap: wrap;gap: 4px 8px;}
}

/* --------------------------------------------------------------------------
   The queue engine on the front-end desk: inboxes and the column picker.
   (Roadmap 4.5-UX-01)

   The same rules as the admin side: a margin fallback under every flex gap,
   min-width: 0 on flex children holding text, borders rather than inset
   shadows, and a list's own indent never relied on.

   One difference from the admin side, and it is the reason these were reported
   as looking wrong: the portal's type size belongs to the theme, and this
   plugin already says so - div.jsst-main-up-wrapper input, button, select,
   textarea are all font-size: inherit. A theme setting a 22px body therefore
   gets 22px controls, and an 11px label written beside them reads as a
   misprint. Text that is meant to be quieter is sized as a fraction of the
   page here rather than in pixels, so it stays quieter without becoming
   unreadable on a large-typed theme or illegible on a small-typed one.
   -------------------------------------------------------------------------- */
.jsst-queue-scopes {width: 100%;box-sizing: border-box;display: flex;flex-wrap: wrap;align-items: center;margin: 0 0 12px;}
.jsst-queue-scopes-label {min-width: 0;margin: 0 10px 6px 0;font-size: 0.7em;font-weight: 600;text-transform: uppercase;letter-spacing: .06em;color: var(--jsst-faint, #6f7474);}
.jsst-queue-scope {min-width: 0;margin: 0 8px 6px 0;padding: 7px 16px;background: #fff;border: 1px solid #e2e4e6;border-radius: 14px;line-height: 1.35;color: #606262;cursor: pointer;}
.jsst-queue-scope:hover {border-color: #c9cbd6;color: #23282d;}
.jsst-queue-scope-on {background: #4f46e5;border-color: #4f46e5;color: #fff;}
.jsst-queue-scope-on:hover {color: #fff;}
@supports (gap: 1px) {
    .jsst-queue-scopes {gap: 8px;}
    .jsst-queue-scopes-label, .jsst-queue-scope {margin: 0;}
}

details.jsst-queue-columns {width: 100%;box-sizing: border-box;margin: 0 0 14px;}
details.jsst-queue-columns > summary {display: list-item;padding: 6px 0;font-size: 0.8em;font-weight: 600;color: #4f46e5;cursor: pointer;}
details.jsst-queue-columns > form {box-sizing: border-box;margin-top: 6px;padding: 12px 14px;background: #fbfbfb;border: 1px solid #e2e4e6;border-radius: 6px;}
.jsst-queue-columns-note {margin: 0 0 10px;font-size: 0.75em;line-height: 1.6;color: var(--jsst-faint, #6f7474);}
/* Two owners, two groups. The heading is a span rather than a heading element
   because it labels a set of ticks inside a form, not a section of the page.
   (Roadmap 4.5-UX-01) */
.jsst-queue-columns-group {margin: 0 0 12px;}
.jsst-queue-columns-group:last-of-type {margin-bottom: 0;}
.jsst-queue-columns-grouphead {display: block;margin: 0 0 8px;font-size: 0.7em;font-weight: 600;text-transform: uppercase;letter-spacing: .06em;color: var(--jsst-faint, #6f7474);}
.jsst-queue-columns-list {display: flex;flex-wrap: wrap;margin: 0 0 10px;}
.jsst-queue-column {flex: 0 1 auto;min-width: 0;display: flex;align-items: center;margin: 0 16px 8px 0;font-size: 0.8em;color: #23282d;}
.jsst-queue-column input {margin: 0 6px 0 0;}
.jsst-queue-column span {min-width: 0;overflow-wrap: break-word;}
@supports (gap: 1px) {
    .jsst-queue-columns-list {gap: 8px 16px;}
    .jsst-queue-column {margin: 0;}
}

/* The bulk bar on the front-end desk. (Roadmap 4.5-UX-01)
   Margins carry the spacing and gap only takes over where it is supported;
   every child holding text or an input gets min-width: 0, or one engine
   overflows the row and the other does not. */
.jsst-bulk-bar {width: 100%;box-sizing: border-box;margin: 0 0 14px;padding: 10px 12px;background: #fbfbfb;border: 1px solid #e2e4e6;border-radius: 6px;}
.jsst-bulk-bar.jsst-bulk-active {border-color: #4f46e5;}
.jsst-bulk-row {display: flex;flex-wrap: wrap;align-items: center;}
.jsst-bulk-row > * {min-width: 0;margin: 0 8px 6px 0;}
@supports (gap: 1px) {
    .jsst-bulk-row {gap: 8px;}
    .jsst-bulk-row > * {margin: 0;}
}
.jsst-bulk-selectall {display: flex;align-items: center;min-width: 0;font-size: 13px;color: #606262;}
.jsst-bulk-selectall input {margin: 0 6px 0 0;}
.jsst-bulk-reason {flex: 1 1 240px;min-width: 160px;}
.jsst-bulk-count {font-size: 12.5px;color: #4f46e5;}
.jsst-bulk-pick {float: left;width: 100%;margin: 0 8px 0 0;}

/* -----------------------------------------------------------------------------
   The desk in the portal: navigation strip, home panels, customers.
   (Roadmap 4.5-FE-02)

   The same class names as the wp-admin stylesheet, because the markup is
   printed once by JSSTnavigation and rendered in both workspaces; only the
   colours differ, and the front end keeps the indigo the rest of the portal
   uses. Margins carry the spacing with gap layered on top where it is
   supported, and every flex child holding text or an input carries
   min-width: 0 - the two rules this plugin's queue screens were rewritten for.
   -------------------------------------------------------------------------- */
/* Same reasoning as the admin strip: it brings its own background so a theme's
   page colour cannot make the labels unreadable. (Roadmap 4.5-FE-02)

   clear: both is load-bearing on the portal. Every portal layout that prints
   this strip - the control panel, the workspace home, Customers and the agent
   queue - opens with a floated header wrapper, and the strip's own list is a
   flex container, which establishes a formatting context and is therefore laid
   out beside a float rather than under it. Beside a float the width of the
   page that leaves it 0px wide: the panel drew, the border drew, and the six
   links stacked invisibly inside it. It read as an empty box at the top of
   every one of those screens. */
/* The hairline and the radius are the portal's own, measured off the queue
   screen's panels rather than inherited from the admin stylesheet: every other
   white box on these pages is 1px #d1d1d1 at 12px, and a strip sitting directly
   above them at 1px #e2e4e6 with square corners is what made the desk screens
   read as something bolted on. (Roadmap 4.5-FE-02) */
.jsst-nav {clear: both;flex: 0 0 100%;width: 100%;box-sizing: border-box;margin: 0 0 16px;padding: 0 4px;
    background: #fff;border: 1px solid #d1d1d1;
    border-radius: 12px;}
.jsst-nav-list {display: flex;flex-wrap: wrap;margin: 0;padding: 0;list-style: none;}
.jsst-nav-item {flex: 0 0 auto;min-width: 0;margin: 0 4px 0 0;list-style: none;}
.jsst-nav-item a {display: flex;align-items: center;min-width: 0;padding: 10px 15px;font-size: 14px;font-weight: 600;color: #606262;text-decoration: none;border-bottom: 3px solid transparent;box-shadow: none;}
.jsst-nav-item a:hover, .jsst-nav-item a:focus {color: #23282d;background: #fbfbfb;}
.jsst-nav-on a {color: #4f46e5;border-bottom-color: #4f46e5;}
.jsst-nav-label {min-width: 0;overflow-wrap: break-word;}
.jsst-nav-count {margin-left: 7px;padding: 1px 8px;font-size: 12px;font-weight: 600;color: #fff;background: #4f46e5;border-radius: 10px;}
@supports (gap: 1px) {
    .jsst-nav-list {gap: 0 4px;}
    .jsst-nav-item {margin: 0;}
}

.jsst-desk {width: 100%;box-sizing: border-box;}
.jsst-home {display: flex;flex-wrap: wrap;width: 100%;box-sizing: border-box;margin: 0 -8px;}
.jsst-home-panel {flex: 1 1 320px;min-width: 0;box-sizing: border-box;margin: 0 8px 16px;padding: 18px 20px;background: #fff;border: 1px solid #e2e4e6;border-radius: 8px;}
.jsst-home-head {margin: 0 0 12px;}
.jsst-home-title {display: flex;align-items: center;margin: 0;font-size: 14px;font-weight: 700;text-transform: uppercase;letter-spacing: .05em;color: #23282d;}
.jsst-home-count {margin-left: 8px;padding: 1px 9px;font-size: 12px;font-weight: 600;letter-spacing: 0;color: #606262;background: #f4f5f6;border-radius: 10px;}
.jsst-home-detail {margin: 6px 0 0;font-size: 13px;line-height: 1.6;color: var(--jsst-faint, #6f7474);}
.jsst-home-empty {margin: 0;font-size: 13.5px;line-height: 1.7;color: var(--jsst-faint, #6f7474);}
.jsst-home-rows {margin: 0;padding: 0;list-style: none;}
.jsst-home-row {margin: 0;padding: 10px 0 10px 11px;list-style: none;border-top: 1px solid #f4f5f6;border-left: 3px solid transparent;}
.jsst-home-rows > li:first-child {border-top: 0;}
.jsst-home-late {border-left-color: #b45309;}
.jsst-home-subject {display: block;font-size: 14px;font-weight: 600;color: #23282d;text-decoration: none;overflow-wrap: break-word;box-shadow: none;}
.jsst-home-subject:hover, .jsst-home-subject:focus {color: #4f46e5;}
.jsst-home-ref {margin-right: 7px;font-weight: 400;color: var(--jsst-faint, #6f7474);}
.jsst-home-meta {display: block;margin-top: 3px;font-size: 13px;line-height: 1.6;color: var(--jsst-faint, #6f7474);overflow-wrap: break-word;}
.jsst-home-more {display: inline-block;margin-top: 12px;font-size: 13px;font-weight: 600;color: #4f46e5;text-decoration: none;box-shadow: none;}
@supports (gap: 1px) {
    .jsst-home {gap: 16px;margin: 0;}
    .jsst-home-panel {margin: 0;}
}

.jsst-people {width: 100%;box-sizing: border-box;}
.jsst-people-lede {margin: 0 0 14px;font-size: 14px;line-height: 1.7;color: #23282d;max-width: 62em;}
.jsst-people-note {margin: 6px 0 12px;font-size: 13px;line-height: 1.65;color: var(--jsst-faint, #6f7474);max-width: 62em;}
.jsst-people-group {margin: 26px 0 10px;font-size: 14px;font-weight: 700;text-transform: uppercase;letter-spacing: .06em;color: var(--jsst-faint, #6f7474);}
.jsst-people-empty {margin: 0;font-size: 13.5px;color: var(--jsst-faint, #6f7474);}
.jsst-people-search {display: flex;flex-wrap: wrap;align-items: center;margin: 0 0 6px;}
.jsst-people-search > * {min-width: 0;margin: 0 8px 8px 0;}
.jsst-people-label {font-size: 13px;font-weight: 600;color: #606262;}
.jsst-people-search input[type="text"] {flex: 1 1 260px;min-width: 0;max-width: 380px;box-sizing: border-box;}
.jsst-people-clear {font-size: 13px;color: var(--jsst-faint, #6f7474);text-decoration: none;}
@supports (gap: 1px) {
    .jsst-people-search {gap: 8px;}
    .jsst-people-search > * {margin: 0;}
}

.jsst-people-companies {display: flex;flex-wrap: wrap;margin: 0;padding: 0;list-style: none;}
.jsst-people-company {flex: 0 1 auto;min-width: 0;margin: 0 8px 8px 0;list-style: none;}
.jsst-people-company a {display: block;min-width: 0;padding: 9px 13px;font-size: 13.5px;color: #23282d;text-decoration: none;background: #fbfbfb;border: 1px solid #e2e4e6;border-radius: 8px;box-shadow: none;}
.jsst-people-company a:hover, .jsst-people-company a:focus {border-color: #4f46e5;}
.jsst-people-company-on a {border-color: #4f46e5;background: #f5f4ff;}
.jsst-people-domain {display: block;font-weight: 600;overflow-wrap: break-word;}
.jsst-people-figures {display: block;margin-top: 2px;font-size: 12.5px;color: var(--jsst-faint, #6f7474);}
@supports (gap: 1px) {
    .jsst-people-companies {gap: 8px;}
    .jsst-people-company {margin: 0;}
}

.jsst-people-wrap {width: 100%;box-sizing: border-box;overflow-x: auto;background: #fff;border: 1px solid #e2e4e6;border-radius: 8px;}
.jsst-people-table {width: 100%;border-collapse: collapse;}
.jsst-people-table th, .jsst-people-table td {padding: 11px 14px;text-align: left;vertical-align: top;font-size: 13.5px;color: #23282d;border-bottom: 1px solid #f4f5f6;}
.jsst-people-table thead th {font-size: 12px;text-transform: uppercase;letter-spacing: .05em;color: var(--jsst-faint, #6f7474);background: #fafbfb;border-bottom: 1px solid #e2e4e6;white-space: nowrap;}
.jsst-people-table tbody tr:last-child td, .jsst-people-table tbody tr:last-child th {border-bottom: 0;}
.jsst-people-table tbody th {width: 40%;font-weight: 600;overflow-wrap: break-word;border-left: 3px solid transparent;}
.jsst-people-on th:first-child {border-left-color: #4f46e5;}
.jsst-people-email {display: block;margin-top: 2px;font-size: 12.5px;font-weight: 400;color: var(--jsst-faint, #6f7474);overflow-wrap: break-word;}
.jsst-people-guest {margin-left: 6px;font-size: 12px;font-weight: 400;color: var(--jsst-faint, #6f7474);}
.jsst-people-paging {display: flex;flex-wrap: wrap;align-items: center;margin: 10px 0 0;font-size: 13px;}
.jsst-people-paging > * {min-width: 0;margin: 0 12px 0 0;}
.jsst-people-of {color: var(--jsst-faint, #6f7474);}
@supports (gap: 1px) {
    .jsst-people-paging {gap: 12px;}
    .jsst-people-paging > * {margin: 0;}
}

.jsst-people-history {margin: 0;padding: 0;list-style: none;}
.jsst-people-history li {margin: 0;padding: 10px 0;list-style: none;border-top: 1px solid #f4f5f6;}
.jsst-people-history li:first-child {border-top: 0;}
.jsst-people-history a {font-size: 14px;font-weight: 600;color: #23282d;text-decoration: none;overflow-wrap: break-word;box-shadow: none;}
.jsst-people-history a:hover, .jsst-people-history a:focus {color: #4f46e5;}
.jsst-people-ref {margin-right: 7px;font-weight: 400;color: var(--jsst-faint, #6f7474);}
.jsst-people-when {display: block;margin-top: 2px;font-size: 13px;color: var(--jsst-faint, #6f7474);}

@media screen and (max-width: 782px) {
    .jsst-home-panel {flex: 1 1 100%;}
    .jsst-people-table th, .jsst-people-table td {padding: 9px 10px;}
    .jsst-people-table tbody th {width: auto;}
    .jsst-nav-item a {padding: 9px 11px;}
}

/* ============================================================================
   Branding. (Roadmap 4.5-FE-09)

   Two small things and one honest limit.

   The tokens are published by JSSTbrand into the page head as custom
   properties, so a site's colour is one value in one place rather than a
   search-and-replace through this file. The rules below consume them with a
   fallback, which means a browser that never receives them - or a site that
   has set no colour - renders exactly as it did before.

   The safe-layout scope fixes the handful of things a WordPress theme most
   often breaks in a plugin's markup: box sizing, images with no max width, and
   tables that push the page sideways. It is deliberately small and it is not
   a substitute for 4.0-UX-06, which is still owed: this plugin still carries a
   float-based layout and hundreds of !important declarations, and no scoped
   container can undo that.
   ========================================================================= */
.jsst-brand-logo {max-width: 100%;max-height: 60px;height: auto;margin: 0 0 12px;}
/* The same slot as the logo, for a desk that has a name but no logo file. The
   tab icon becomes the mark beside the name where there is one, so the two
   halves of an identity somebody has already given us are shown together
   rather than one of them being thrown away. Inline-flex, not block, so it
   inherits the container's centring exactly as the logo does - the two must
   sit in the same place, because they are the same statement. */
.jsst-brand-wordmark {display: inline-flex;align-items: center;gap: 10px;margin: 0 0 12px;
    font-size: 20px;font-weight: 700;line-height: 1.25;color: var(--jsst-ink, #23282d);}
.jsst-brand-mark {flex: 0 0 auto;width: 28px;height: 28px;object-fit: contain;}
/* The brand is the way back to the front of the desk. Colour is inherited so a
   linked wordmark is not suddenly the theme's link blue, and the underline is
   kept off for the same reason. */
.jsst-brand-link {display: inline-block;color: inherit;text-decoration: none;}
.jsst-brand-link:hover, .jsst-brand-link:focus {color: inherit;text-decoration: none;opacity: .85;}
.jsst-poweredby {margin: 18px 0 0;font-size: 12px;text-align: center;color: var(--jsst-faint, #6f7474);}
.jsst-poweredby a {color: var(--jsst-faint, #6f7474);text-decoration: none;}
.jsst-poweredby a:hover, .jsst-poweredby a:focus {text-decoration: underline;}

.jsst-safe {box-sizing: border-box;min-width: 0;}
.jsst-safe *, .jsst-safe *::before, .jsst-safe *::after {box-sizing: inherit;}
.jsst-safe img {max-width: 100%;height: auto;}
.jsst-safe table {max-width: 100%;}
/* Wide content scrolls inside its own box rather than widening the page: a
   theme with a narrow content column and a plugin with a twelve-column table
   is the single most common way this looks broken. */
.jsst-safe .jsst-scroll {width: 100%;overflow-x: auto;}

/* The brand colour, where anything asks for it. Every use carries the value
   the plugin used before as its fallback. */
.jsst-brand-accent {color: var(--jsst-brand-accent, #4f6df5);}
.jsst-brand-accent-bg {background: var(--jsst-brand-accent, #4f6df5);}
.jsst-brand-accent-border {border-color: var(--jsst-brand-accent, #4f6df5);}

/* The portal desk on a phone. (Roadmap 4.5-FE-10)

   The front-end agent desk is the half of this product an agent is most likely
   to open on a phone - it is the one that does not need wp-admin. The same
   three principles as the admin side: one column, thumb-sized targets, and
   nothing that widens the page. */
@media screen and (max-width: 600px) {
    .jsst-nav-list {flex-wrap: nowrap;overflow-x: auto;-webkit-overflow-scrolling: touch;}
    .jsst-nav-item {flex: 0 0 auto;}
    .jsst-nav-item a {min-height: 44px;padding: 11px 13px;}
    .jsst-home {display: block;margin: 0;}
    .jsst-home-panel {flex: 1 1 100%;margin: 0 0 12px;padding: 14px 15px;}
    .jsst-home-row {padding-left: 10px;}
    .jsst-people-search {display: block;}
    .jsst-people-search > * {display: block;width: 100%;margin: 0 0 8px;box-sizing: border-box;}
    .jsst-poweredby {margin-top: 14px;}
    /* Wide content scrolls in its own box; the safe-layout scope already gives
       tables a container to do it in. */
    .jsst-safe table, .jsst-safe .jsst-scroll {display: block;width: 100%;overflow-x: auto;}
}

/* Focus, portal side. (Roadmap 4.0-UX-08)

   The same ring as the admin desk. A customer filling in a ticket form with a
   keyboard has exactly the same right to know where they are as an agent does,
   and the portal is the half a public-sector buyer will be testing. */
.jsst-main-up-wrapper a:focus-visible,
.jsst-main-up-wrapper button:focus-visible,
.jsst-main-up-wrapper input:focus-visible,
.jsst-main-up-wrapper select:focus-visible,
.jsst-main-up-wrapper textarea:focus-visible,
.jsst-nav a:focus-visible,
.jsst-safe a:focus-visible,
.jsst-safe button:focus-visible,
.jsst-safe input:focus-visible,
.jsst-safe select:focus-visible,
.jsst-safe textarea:focus-visible {
    outline: 2px solid var(--jsst-accent, #4f46e5);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9);
}

/* A block on somebody's page. (Roadmap 4.0-UX-07)

   A block lands inside whatever layout the theme gives it, which is a narrower
   and less predictable box than the plugin's own pages. These rules do the one
   thing that matters there and nothing else: keep the plugin's markup inside
   the column it was given. Typography is deliberately left alone so the block
   inherits the theme's, which is what the roadmap asked for and what makes a
   support page look like the rest of the site. */
.jsst-block {box-sizing: border-box;max-width: 100%;min-width: 0;}
.jsst-block img {max-width: 100%;height: auto;}
.jsst-block table {max-width: 100%;}

/* The customers search, portal side. (Roadmap 4.5-FE-02)

   Same omission as the admin copy: the box had only a height and the button
   had no rule at all. The colours are this file's own, as with every other
   class shared between the two desks. */
.jsst-people-search input[type="text"] {height: 44px;padding: 10px 12px;box-sizing: border-box;
    background: var(--jsst-canvas, #fff);border: 1px solid var(--jsst-line, #e2e4e6);
    border-radius: var(--jsst-radius, 2px);color: var(--jsst-ink, #23282d);font-size: 14px;}
.jsst-people-search input[type="text"]:focus {border-color: var(--jsst-accent, #4f46e5);outline: none;}
/* The same pair on the portal, in this file's own colours. */
.jsst-people-go, .jsst-people-clear {flex: 0 0 auto;display: inline-flex;align-items: center;justify-content: center;
    box-sizing: border-box;height: 44px;padding: 0 20px;border: 1px solid var(--jsst-line, #e2e4e6);
    border-radius: var(--jsst-radius-card, 0);font-size: 14px;font-weight: 600;line-height: 1;
    text-decoration: none;cursor: pointer;}
.jsst-people-go {background: var(--jsst-accent, #4f46e5);border-color: var(--jsst-accent, #4f46e5);color: #fff;}
.jsst-people-go:hover, .jsst-people-go:focus {opacity: .92;color: #fff;}
.jsst-people-clear {background: var(--jsst-surface, #f8fafc);color: var(--jsst-ink, #23282d);}

/* The role presets, on the desk. (Roadmap 4.5-FE-03)
   The same block the wp-admin form draws, restyled for the front end: the
   markup is shared, the button class is not. Margins carry the spacing and
   `gap` is layered on inside @supports, because Chrome before 84 ignores gap in
   flex and would run the buttons together. */
.jsst-rolepreset {box-sizing: border-box;margin: 0 0 14px;padding: 14px 16px;background: var(--jsst-surface, #f8fafc);border: 1px solid var(--jsst-line, #ebecec);border-radius: 2px;}
.jsst-rolepreset-label {display: block;margin: 0 0 8px;font-size: 12px;font-weight: 600;text-transform: uppercase;letter-spacing: .05em;color: var(--jsst-faint, #6f7474);}
.jsst-rolepreset-buttons {display: flex;flex-wrap: wrap;margin: 0;}
.jsst-rolepreset-buttons .js-ticket-button {margin: 0 8px 8px 0;min-width: 0;}

/* `.js-ticket-button` itself, which the portal never actually had.
   (Roadmap 4.5-FE-03)

   The class was styled in three places and all three were somewhere else:
   admincss.css, and the two per-layout stylesheets for the control panel and
   the ticket detail. Neither of those two is enqueued on the role form, and
   this stylesheet only ever sized and spaced the class - so the preset links
   rendered as bare anchors, plain underlined text rather than anything that
   looks like it can be clicked.

   The hover was worse than the resting state and is the reason this got
   reported. `.js-ticket-button:hover {background-color: #2b2b2b}` lives in
   color.css and is themed in style.php, and it was the one rule that did reach
   this page - so pointing at a preset painted a near-black slab behind
   unpadded link-coloured text. Hence a base with the padding that colour needs
   to sit on, and a hover foreground that stays readable on it. */
.js-ticket-button {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid var(--jsst-line, #e2e4e6);
    border-radius: var(--jsst-radius, 4px);
    background: var(--jsst-canvas, #ffffff);
    color: var(--jsst-ink, #23282d);
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.js-ticket-button:hover,
.js-ticket-button:focus {
    /* The background is set by color.css / style.php, which is themed. Only the
       things that rule does not say belong here, so the desk's own colour still
       wins. */
    color: #ffffff;
    border-color: transparent;
    text-decoration: none;
}
/* The chosen starting point, which was marked only by a class that resolved to
   nothing on this page. */
.js-ticket-button.js-ticket-button-primary {
    background: var(--jsst-accent, #4f46e5);
    border-color: var(--jsst-accent, #4f46e5);
    color: #ffffff;
}
.jsst-rolepreset .jsst-hint {margin: 4px 0 0;font-size: 12px;line-height: 1.65;color: var(--jsst-faint, #6f7474);max-width: 68em;}
@supports (gap: 1px) {
    .jsst-rolepreset-buttons {gap: 8px;}
    .jsst-rolepreset-buttons .js-ticket-button {margin: 0;}
}

/* --------------------------------------------------------------------------
   The desk screens' shared furniture, in the portal. (Roadmap 4.5-FE-02)

   Notifications, Customers, Live Chat and the workspace Home were built from
   the vocabulary the wp-admin screens use - cards, fields, pills, tables - and
   that vocabulary lives in admincss.css, which the portal does not load. So on
   the front end every one of those classes matched no rule at all: cards drew
   with no frame, no padding and a transparent ground, and a card title, being
   an h2, inherited the theme's heading size - 32px on a block theme, beside
   13px body copy. The pages were not badly designed out here; they were
   unstyled.

   Three things about how this block is written.

   **Everything is scoped to `.jsst-main-up-wrapper`**, the plugin's own portal
   wrapper. Nothing here can reach a theme's markup or another plugin's, and the
   names are generic enough - .jsst-card, .jsst-field - that leaving them
   unscoped would be a promise this stylesheet cannot keep. It also settles a
   specificity fight: style.css sets `font-size: inherit` on every input, button,
   select and textarea inside that wrapper at 0,1,2, and what gets inherited is
   the theme body size. Two classes outrank one class and two elements, so the
   sizes below hold without an !important.

   **Sizes are stated, never inherited.** A block theme's body can be 22px and
   its h2 32px, so anything that would otherwise take the theme's word for it
   says its own.

   **Margins carry the spacing, with `gap` layered on inside @supports** - the
   rule this stylesheet follows throughout, because Chrome before 84 ignores gap
   in flex and would run the children together. Directional margins are mirrored
   in stylertl.css, which is the only thing that file holds.
   -------------------------------------------------------------------------- */

/* Lede and group heading ------------------------------------------------- */
.jsst-main-up-wrapper .jsst-lede {
	max-width: 62em;
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.7;
	color: #23282d;
}

.jsst-main-up-wrapper .jsst-hint {
	max-width: 62em;
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.65;
	color: #6f7474;
}

.jsst-main-up-wrapper .jsst-groupheading {
	margin: 26px 0 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #6f7474;
}

.jsst-main-up-wrapper .jsst-groupheading:first-child {
	margin-top: 0;
}

/* Cards ------------------------------------------------------------------ */
.jsst-main-up-wrapper .jsst-cards {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
}

.jsst-main-up-wrapper .jsst-card {
	flex: 1 1 100%;
	box-sizing: border-box;
	min-width: 0;
	margin: 0 0 16px;
	background: #fff;
	border: 1px solid #d1d1d1;
	border-radius: 12px;
}

.jsst-main-up-wrapper .jsst-card-half {
	flex: 1 1 320px;
	margin-right: 16px;
}

.jsst-main-up-wrapper .jsst-card-half:last-child {
	margin-right: 0;
}

.jsst-main-up-wrapper .jsst-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	box-sizing: border-box;
	padding: 14px 18px;
	border-bottom: 1px solid #f0f1f1;
}

/* An h2 by tag, so it would otherwise take the theme's heading size. */
.jsst-main-up-wrapper .jsst-card-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: #23282d;
	overflow-wrap: break-word;
}

.jsst-main-up-wrapper .jsst-card-sub {
	flex: 1 1 100%;
	min-width: 0;
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: #6f7474;
}

.jsst-main-up-wrapper .jsst-card-tools {
	flex: 0 0 auto;
	min-width: 0;
}

.jsst-main-up-wrapper .jsst-card-tools a,
.jsst-main-up-wrapper .jsst-card-tools .button-link {
	font-size: 13px;
	color: #4f46e5;
	text-decoration: none;
	box-shadow: none;
}

.jsst-main-up-wrapper .jsst-card-body {
	box-sizing: border-box;
	padding: 16px 18px;
}

.jsst-main-up-wrapper .jsst-card-body > :first-child {
	margin-top: 0;
}

.jsst-main-up-wrapper .jsst-card-flush {
	padding: 0;
}

/* Forms ------------------------------------------------------------------ */
.jsst-main-up-wrapper .jsst-form {
	margin: 0;
}

.jsst-main-up-wrapper .jsst-fieldset {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
}

.jsst-main-up-wrapper .jsst-fieldset:last-of-type {
	margin-bottom: 0;
}

.jsst-main-up-wrapper .jsst-fieldset-legend {
	display: block;
	width: 100%;
	margin: 0 0 4px;
	padding: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #6f7474;
}

.jsst-main-up-wrapper .jsst-fields {
	display: flex;
	flex-wrap: wrap;
	margin: 10px 0 0;
}

/* A field shares a row but is capped, so a last row holding one field does not
   stretch that field the whole width of the card. */
.jsst-main-up-wrapper .jsst-field {
	flex: 1 1 240px;
	box-sizing: border-box;
	max-width: 320px;
	min-width: 0;
	margin: 0 14px 14px 0;
}

.jsst-main-up-wrapper .jsst-field-wide {
	flex: 1 1 100%;
	max-width: 100%;
	margin-right: 0;
}

.jsst-main-up-wrapper .jsst-field > label {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 600;
	color: #606262;
}

.jsst-main-up-wrapper .jsst-field input[type="text"],
.jsst-main-up-wrapper .jsst-field input[type="email"],
.jsst-main-up-wrapper .jsst-field input[type="url"],
.jsst-main-up-wrapper .jsst-field input[type="number"],
.jsst-main-up-wrapper .jsst-field input[type="search"],
.jsst-main-up-wrapper .jsst-field select,
.jsst-main-up-wrapper .jsst-field textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	padding: 12px 15px;
	font-size: 14px;
	line-height: 1.5;
	color: #23282d;
	background: #f8fafc;
	border: 1px solid #d1d1d1;
	border-radius: 8px;
	box-shadow: none;
}

.jsst-main-up-wrapper .jsst-field input[type="text"],
.jsst-main-up-wrapper .jsst-field input[type="email"],
.jsst-main-up-wrapper .jsst-field input[type="url"],
.jsst-main-up-wrapper .jsst-field input[type="number"],
.jsst-main-up-wrapper .jsst-field input[type="search"],
.jsst-main-up-wrapper .jsst-field select {
	height: 48px;
}

.jsst-main-up-wrapper .jsst-field textarea {
	height: auto;
	min-height: 96px;
}

.jsst-main-up-wrapper .jsst-field input:focus,
.jsst-main-up-wrapper .jsst-field select:focus,
.jsst-main-up-wrapper .jsst-field textarea:focus {
	border-color: #4f46e5;
	outline: 0;
	box-shadow: none;
}

.jsst-main-up-wrapper .jsst-field-note {
	max-width: 62em;
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: #6f7474;
}

.jsst-main-up-wrapper .jsst-check {
	display: flex;
	align-items: flex-start;
	min-width: 0;
	margin: 0 0 8px;
	font-size: 14px;
	color: #6b747c;
}

.jsst-main-up-wrapper .jsst-check input {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 3px 8px 0 0;
}

.jsst-main-up-wrapper .jsst-check span {
	min-width: 0;
	overflow-wrap: break-word;
}

.jsst-main-up-wrapper .jsst-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 4px 0 0;
}

.jsst-main-up-wrapper .jsst-actions > * {
	margin: 0 8px 0 0;
}

.jsst-main-up-wrapper .jsst-actions-note {
	min-width: 0;
	font-size: 12px;
	color: #6f7474;
}

/* Pills, and the empty state --------------------------------------------- */
.jsst-main-up-wrapper .jsst-pill {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	color: #23282d;
	background: #f4f5f6;
	border: 1px solid #e9eaea;
	border-radius: 11px;
}

.jsst-main-up-wrapper .jsst-dot {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-right: 6px;
	background: currentColor;
	border-radius: 50%;
}

.jsst-main-up-wrapper .jsst-pill-ok {
	color: #0b6b46;
	background: #e7f5ef;
	border-color: #c3e3d5;
}

.jsst-main-up-wrapper .jsst-pill-warn {
	color: #8a5300;
	background: #fdf3e4;
	border-color: #f0dcbd;
}

.jsst-main-up-wrapper .jsst-pill-bad {
	color: #8a1f11;
	background: #fdeeec;
	border-color: #f3cfca;
}

.jsst-main-up-wrapper .jsst-pill-info {
	color: #4f46e5;
	background: #eef0fd;
	border-color: #d5d8f7;
}

.jsst-main-up-wrapper .jsst-pill-off {
	color: #6f7474;
	background: #f4f5f6;
	border-color: #e9eaea;
}

.jsst-main-up-wrapper .jsst-empty {
	box-sizing: border-box;
	padding: 26px 18px;
	text-align: center;
}

.jsst-main-up-wrapper .jsst-empty-title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: #23282d;
}

.jsst-main-up-wrapper .jsst-empty-text {
	max-width: 46em;
	margin: 6px auto 0;
	font-size: 13px;
	line-height: 1.7;
	color: #6f7474;
}

/* Tables ----------------------------------------------------------------- */
/* The wrap scrolls, never the page: a table with six columns on a phone is the
   commonest way a plugin breaks a theme's layout. */
.jsst-main-up-wrapper .jsst-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.jsst-main-up-wrapper .jsst-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 14px;
}

.jsst-main-up-wrapper .jsst-table th,
.jsst-main-up-wrapper .jsst-table td {
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid #f0f1f1;
	overflow-wrap: break-word;
}

.jsst-main-up-wrapper .jsst-table th {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #6f7474;
	white-space: nowrap;
}

.jsst-main-up-wrapper .jsst-table tr:last-child td {
	border-bottom: 0;
}

/* Notification preferences: the row labels are sentences, so they wrap and the
   channel columns stay in view. Kept on one line they pushed the table past a
   half-width card and hid E-mail and Browser behind a scrollbar. */
.jsst-main-up-wrapper .jsst-table-prefs tbody th {
	white-space: normal;
}

/* Notifications ---------------------------------------------------------- */
.jsst-main-up-wrapper .jsst-notifs {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jsst-main-up-wrapper .jsst-notif {
	display: flex;
	align-items: flex-start;
	margin: 0;
	padding: 12px 18px;
	list-style: none;
	border-top: 1px solid #f4f5f6;
}

.jsst-main-up-wrapper .jsst-notifs > li:first-child {
	border-top: 0;
}

/* Unread is a tint and a marker, not a colour on the text: the words have to
   stay as readable once they have been read. */
.jsst-main-up-wrapper .jsst-notif-new {
	background: #f7f8ff;
}

/* The unread dot was invisible: measured 0px wide.

   This rule was written for a dot that is a flex CHILD OF THE ROW - hence
   `flex: 0 0 auto` and a top margin to line it up with the first line of text.
   The markup puts it inside `p.jsst-notif-title` instead, which was a plain
   block, so the flex shorthand did nothing and an `inline` span ignored the
   width outright. `inline-block` is what makes a width mean something where
   this element actually lives; the title line below now supplies the gap, so
   the hand-set margin goes. */
.jsst-main-up-wrapper .jsst-notif-dot {
	display: inline-block;
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin: 0;
	background: #4f46e5;
	border-radius: 50%;
}

.jsst-main-up-wrapper .jsst-notif-main {
	flex: 1 1 auto;
	min-width: 0;
}

/* Title, and the category beside it - not running into it.

   The headline and the category pill sat in one block with a text space
   between them, so the line read as one sentence: "You were asked to work a
   ticket Tickets I follow". A pill is a label ABOUT the notification, not the
   end of its title, and the only thing that says so is space. A flex line with
   a real gap also gives the unread dot somewhere to sit, and wraps the pill
   under a long headline instead of squeezing it. */
.jsst-main-up-wrapper .jsst-notif-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: #23282d;
	overflow-wrap: break-word;
}

.jsst-main-up-wrapper .jsst-notif-title a {
	color: #23282d;
	text-decoration: none;
	box-shadow: none;
}

.jsst-main-up-wrapper .jsst-notif-title a:hover,
.jsst-main-up-wrapper .jsst-notif-title a:focus {
	color: #4f46e5;
}

.jsst-main-up-wrapper .jsst-notif-body {
	margin: 3px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: #6f7474;
	overflow-wrap: break-word;
}

.jsst-main-up-wrapper .jsst-notif-when {
	display: block;
	margin: 3px 0 0;
	font-size: 12px;
	color: #8a8f8f;
}

/* WordPress admin button classes, in the portal. -------------------------

   Third time this has bitten in one screen's work: the chat console, this
   row's actions, and the card's own "Mark all as read". Templates shared
   between wp-admin and the portal carry `class="button"` / `"button-link"`,
   wp-admin styles both, and the front end has never heard of either - so they
   fall back to the browser's own control. Measured, every time: background
   #efefef, border 2px outset #767676, radius 0.

   So it is fixed once here rather than a fourth time per component. Values are
   `.js-ticket-button`'s, so these ARE the portal's buttons. `button-primary`
   is excluded because something already gives it the filled accent treatment
   and this rule must not out-specify it.
   ----------------------------------------------------------------------- */
.jsst-main-up-wrapper .button:not(.button-primary) {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid #e2e4e6;
	border-radius: 8px;
	background: #ffffff;
	color: #23282d;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
}
.jsst-main-up-wrapper .button:not(.button-primary):hover,
.jsst-main-up-wrapper .button:not(.button-primary):focus {
	border-color: #4f46e5;
	color: #4f46e5;
}
/* `button-link` is a text action, not a box - that is the whole point of the
   class, and a native grey rectangle is the opposite of it. */
.jsst-main-up-wrapper .button-link {
	padding: 6px 4px;
	border: 0;
	background: none;
	color: #6f7474;
	font-size: 13px;
	line-height: 1.3;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
}
.jsst-main-up-wrapper .button-link:hover,
.jsst-main-up-wrapper .button-link:focus {
	color: #4f46e5;
	text-decoration: underline;
}

.jsst-main-up-wrapper .jsst-notif-actions {
	flex: 0 0 auto;
	margin-left: 12px;
}
/* The row's actions carry `.button` and `.button-link`, which are WORDPRESS
   ADMIN classes - the same fault the chat console had. wp-admin styles them;
   the portal has never heard of them, so `Open it` rendered as bare text and
   `Mark read` as the browser's own grey control. Measured before: the anchor
   had no background, no border and no padding; the button was a native one.

   `Open it` is the action the row exists for, so it is the filled one, and
   `Mark read` is the quiet text action `button-link` was always meant to be.
   Values from `.js-ticket-button`, so these are the portal's own controls. */
.jsst-main-up-wrapper .jsst-notif-actions form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.jsst-main-up-wrapper .jsst-notif-actions .button {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid #4f46e5;
	border-radius: 8px;
	background: #4f46e5;
	color: #ffffff;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
}
.jsst-main-up-wrapper .jsst-notif-actions .button:hover,
.jsst-main-up-wrapper .jsst-notif-actions .button:focus {
	filter: brightness(.94);
	color: #ffffff;
}
.jsst-main-up-wrapper .jsst-notif-actions .button-link {
	padding: 7px 4px;
	border: 0;
	background: none;
	color: var(--jsst-faint, #6f7474);
	font-size: 13px;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}
.jsst-main-up-wrapper .jsst-notif-actions .button-link:hover,
.jsst-main-up-wrapper .jsst-notif-actions .button-link:focus {
	color: #4f46e5;
	text-decoration: underline;
}

/* Browser push ----------------------------------------------------------- */
.jsst-main-up-wrapper .jsst-push {
	box-sizing: border-box;
	margin: 0;
}

.jsst-main-up-wrapper .jsst-push-state {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.6;
	color: #6f7474;
}

/* Live chat console ------------------------------------------------------ */
.jsst-main-up-wrapper .jsst-livechat-console,
.jsst-main-up-wrapper .jsst-chatconsole-list {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
}

/* The transcript is a STACK, and was being laid out as a row.

   This rule was written for a different markup - a wrapper holding
   `.jsst-chat-thread` and `.jsst-chat-context` side by side as two flex panes,
   which is what the `flex: 1 1 340px` / `flex: 1 1 240px` under it are for. But
   in the console that ships, `.jsst-chatconsole-thread` IS the transcript and
   its children are the messages, so `display: flex` with no direction laid six
   messages out left to right across the card - greeting, then the customer's
   line, then a system note, all on one line.

   `display: block` is what wp-admin gives it (console.css sets no display at
   all), and the two shells are meant to be the same console. */
.jsst-main-up-wrapper .jsst-chatconsole-thread {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
}

.jsst-main-up-wrapper .jsst-chat-thread {
	flex: 1 1 340px;
	box-sizing: border-box;
	min-width: 0;
	max-height: 460px;
	margin: 0 0 14px;
	padding: 14px 16px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #d1d1d1;
	border-radius: 12px;
}

.jsst-main-up-wrapper .jsst-chat-context,
.jsst-main-up-wrapper .jsst-chatconsole-context {
	flex: 1 1 240px;
	box-sizing: border-box;
	min-width: 0;
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.65;
	color: #6f7474;
}

/* Somebody else's line and your own, told apart by side and ground rather than
   by colour alone. */
.jsst-main-up-wrapper .jsst-chat-agent,
.jsst-main-up-wrapper .jsst-chat-mine {
	box-sizing: border-box;
	max-width: 82%;
	margin: 0 0 10px;
	padding: 9px 12px;
	font-size: 14px;
	line-height: 1.6;
	border-radius: 10px;
	overflow-wrap: break-word;
}

.jsst-main-up-wrapper .jsst-chat-agent {
	margin-right: auto;
	color: #23282d;
	background: #f4f5f6;
}

.jsst-main-up-wrapper .jsst-chat-mine {
	margin-left: auto;
	color: #fff;
	background: #4f46e5;
}

.jsst-main-up-wrapper .jsst-chat-open,
.jsst-main-up-wrapper .jsst-chat-waiting {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	box-sizing: border-box;
	margin: 0 0 8px;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid #d1d1d1;
	border-radius: 12px;
}

.jsst-main-up-wrapper .jsst-chat-waiting {
	border-left: 3px solid #b45309;
}

.jsst-main-up-wrapper .jsst-chat-open-who {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	color: #23282d;
	overflow-wrap: break-word;
}

.jsst-main-up-wrapper .jsst-chat-ticket,
.jsst-main-up-wrapper .jsst-chat-end {
	flex: 0 0 auto;
	margin-left: 10px;
	font-size: 13px;
}

.jsst-main-up-wrapper .jsst-chat-reply {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	box-sizing: border-box;
	width: 100%;
	margin: 10px 0 0;
}

.jsst-main-up-wrapper .jsst-chat-reply-body {
	flex: 1 1 220px;
	box-sizing: border-box;
	min-width: 0;
	margin: 0 8px 0 0;
}

@supports ( gap: 1px ) {
	.jsst-main-up-wrapper .jsst-cards {
		gap: 0 16px;
	}

	.jsst-main-up-wrapper .jsst-card-half {
		margin-right: 0;
	}

	.jsst-main-up-wrapper .jsst-fields {
		gap: 0 14px;
	}

	.jsst-main-up-wrapper .jsst-field {
		margin: 0 0 14px;
	}

	.jsst-main-up-wrapper .jsst-actions {
		gap: 8px;
	}

	.jsst-main-up-wrapper .jsst-actions > * {
		margin: 0;
	}


	.jsst-main-up-wrapper .jsst-chat-reply {
		gap: 8px;
	}

	.jsst-main-up-wrapper .jsst-chat-reply-body {
		margin: 0;
	}
}

/* One breakpoint, at the width a two-column card row stops fitting. Fields go
   full width because a 240px minimum beside a 16px form control is a line of
   text with nowhere to go, and the notification row's actions drop under the
   message rather than squeezing it to nothing. */
@media screen and ( max-width: 600px ) {
	.jsst-main-up-wrapper .jsst-card-half {
		flex: 1 1 100%;
		margin-right: 0;
	}

	.jsst-main-up-wrapper .jsst-card-head,
	.jsst-main-up-wrapper .jsst-card-body {
		padding: 12px 14px;
	}

	.jsst-main-up-wrapper .jsst-field,
	.jsst-main-up-wrapper .jsst-chat-reply-body {
		flex: 1 1 100%;
		max-width: 100%;
		margin-right: 0;
	}

	.jsst-main-up-wrapper .jsst-notif {
		flex-wrap: wrap;
		padding: 12px 14px;
	}

	.jsst-main-up-wrapper .jsst-notif-actions {
		flex: 1 1 100%;
		margin: 8px 0 0;
	}

	.jsst-main-up-wrapper .jsst-chat-agent,
	.jsst-main-up-wrapper .jsst-chat-mine {
		max-width: 100%;
	}

	.jsst-main-up-wrapper .jsst-chat-ticket,
	.jsst-main-up-wrapper .jsst-chat-end {
		margin: 6px 0 0;
	}
}

/* --------------------------------------------------------------------------
   Customers, given the portal's own panel treatment. (Roadmap 4.5-FE-02)

   This screen was drawn as bare sections on the page ground - a search row, a
   row of company chips and a table - while every other screen in the portal
   puts each section in a white panel: 1px #d1d1d1 at a 12px radius on the
   wrapper's #f8f8f8, which is what the queue screen's counts, search and
   sorting bars all are. Nothing here changes the markup; the sections it
   already has become those panels.
   -------------------------------------------------------------------------- */
.jsst-main-up-wrapper .jsst-people-search,
.jsst-main-up-wrapper .jsst-people-companies,
.jsst-main-up-wrapper .jsst-people-history {
	box-sizing: border-box;
	margin: 0 0 16px;
	padding: 15px;
	background: #fff;
	border: 1px solid #d1d1d1;
	border-radius: 12px;
}

.jsst-main-up-wrapper .jsst-people-wrap {
	border: 1px solid #d1d1d1;
	border-radius: 12px;
}

.jsst-main-up-wrapper .jsst-people-search > * {
	margin-bottom: 0;
}

.jsst-main-up-wrapper .jsst-people-search input[type="text"] {
	border-color: #d1d1d1;
	border-radius: 8px;
}

/* The search button and its Clear twin. (Roadmap 4.5-FE-02)
 *
 * Their rule further up this file already asks for a 44px box, 14px text and a
 * card radius, and on the portal it lost all three at once. `font-size` went to
 * this file's own `div.jsst-main-up-wrapper button { font-size: inherit }` at
 * 0,1,2 - a single class cannot outrank it - so the button took the theme body
 * size and rendered at 22px beside a 14px input. The height went with it: at
 * that size the line box is taller than the box asked for, and what drew was
 * 33px against the field's 44px, so the two never lined up. And the radius
 * resolved to its own fallback, because `--jsst-radius-card` is declared in
 * admincss.css and nothing declares it here, which is why a button sitting
 * beside an 8px input had square corners.
 *
 * Two classes settle the specificity, and every value is stated rather than
 * taken from a variable that may not exist on this side. 8px and #d1d1d1 are
 * the portal's own control shape, measured off the queue screen. */
.jsst-main-up-wrapper .jsst-people-go,
.jsst-main-up-wrapper .jsst-people-clear {
	box-sizing: border-box;
	height: 44px;
	padding: 0 20px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	border: 1px solid #d1d1d1;
	border-radius: 8px;
	text-decoration: none;
	cursor: pointer;
}

.jsst-main-up-wrapper .jsst-people-go {
	color: #fff;
	background: #4f46e5;
	border-color: #4f46e5;
}

.jsst-main-up-wrapper .jsst-people-go:hover,
.jsst-main-up-wrapper .jsst-people-go:focus {
	color: #fff;
	background: #4338ca;
	border-color: #4338ca;
	opacity: 1;
}

.jsst-main-up-wrapper .jsst-people-go:focus-visible,
.jsst-main-up-wrapper .jsst-people-clear:focus-visible {
	outline: 2px solid #4f46e5;
	outline-offset: 2px;
}

.jsst-main-up-wrapper .jsst-people-clear {
	color: #23282d;
	background: #fff;
}

.jsst-main-up-wrapper .jsst-people-clear:hover,
.jsst-main-up-wrapper .jsst-people-clear:focus {
	color: #23282d;
	background: #f8fafc;
	border-color: #b9bec4;
}

/* On a phone the field takes the row and the two buttons share the next one,
   rather than a 380px input and a 116px button trying to fit in 320px. */
@media screen and ( max-width: 600px ) {
	.jsst-main-up-wrapper .jsst-people-search input[type="text"] {
		flex: 1 1 100%;
		max-width: 100%;
	}

	.jsst-main-up-wrapper .jsst-people-go,
	.jsst-main-up-wrapper .jsst-people-clear {
		flex: 1 1 auto;
	}
}

/* The table's own head rule draws the hairline under the last header cell, so
   the panel's corners are clipped rather than fighting it. */
.jsst-main-up-wrapper .jsst-people-wrap {
	overflow: hidden;
	overflow-x: auto;
}

.jsst-main-up-wrapper .jsst-people-history li {
	padding: 10px 0;
}

.jsst-main-up-wrapper .jsst-people-history li:first-child {
	padding-top: 0;
}

.jsst-main-up-wrapper .jsst-people-history li:last-child {
	padding-bottom: 0;
}

@media screen and ( max-width: 600px ) {
	.jsst-main-up-wrapper .jsst-people-search,
	.jsst-main-up-wrapper .jsst-people-companies,
	.jsst-main-up-wrapper .jsst-people-history {
		padding: 12px;
	}
}