/* Services copy to */
.vue-manager-popup{
    background-color: var(--aui-main-background);
    position:fixed;
    z-index:999;
    top: 50%;
    left: 50%;
    margin-top: -185px;
    margin-left: -250px;
    width:500px;
    height:370px;
    box-sizing: border-box;
    border-radius: 10px;
    -webkit-box-shadow: 2px 2px 10px -1px rgba(0,0,0,0.52); 
    box-shadow: 2px 2px 10px -1px rgb(0 0 0 / 52%);

    /* Flex */
    display: flex;
    flex-flow: column;
    flex-wrap: nowrap;
}

body[interface="MOBILE"] .vue-manager-popup{
    top: 0;
    left: 0;
    margin-top: 0;
    margin-left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.vue-manager-popup-modal{
    position:fixed;
    z-index: 998;
    width:100%;
    height:100%;
    left:0px;
    top:0px;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
}

.vue-manager-popup-close{
	width: 24px;
	height: 24px;
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 1;
	cursor: pointer;
	transform: rotate(45deg);
	pointer-events:all;
	background-color: var(--aui-pale-background);
	border: 1px solid var(--aui-pale-border);
	border-radius: 100%;
    box-sizing: content-box;
}

.vue-manager-popup-close:before{
	content: "";
	position: absolute;
	left: 11px;
    top: 5px;
    width: 2px;
    height: 14px;
	background-color: var(--aui-main-colour);
	transform: rotate(90deg);
}

.vue-manager-popup-close:after{
	content: "";
	position: absolute;
	left: 11px;
    top: 5px;
    width: 2px;
    height: 14px;
	background-color: var(--aui-main-colour);
}

.vue-manager-popup-close:focus:before, .vue-manager-popup-close:focus:after, .vue-manager-popup-close:hover:before, .vue-manager-popup-close:hover:after{
	background-color: var(--theme-colour);
}

.vue-manager-popup-label{
	font-size: var(--font-size-14);
	font-weight: bold;
	text-overflow: ellipsis;
	white-space: nowrap;
	box-sizing: border-box;
	padding: 13px 6px 6px 10px;
	height: 54px;
	overflow: hidden;
	color: var(--aui-main-colour);
}

.vue-manager-popup-search{
	padding: 4px 8px 0 10px;
	box-sizing: border-box;
	max-width: 600px;
	margin: 0 auto;
  width: 100%;
  margin-bottom: 6px;
}

.vue-lister-toolbar{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	box-sizing: border-box;
	width: 100%;
	align-items: center;
	border-radius:6px;
	padding:6px 6px 6px 6px;
    flex: 1 1 auto;
}

.vue-lister-toolbar .vue-list-checkbox{
	margin-left:-6px;
}

.vue-manager-popup-body{
	overflow-x:hidden;
	overflow-y:auto;
	scrollbar-width: thin;
	height:240px;
	box-sizing: border-box;
	padding: 0 10px 0 10px;
	/* border-bottom:1px solid var(--aui-pale-border); */
    flex: 1 1 100%;
    display: block;
}

.vue-manager-popup-body::-webkit-scrollbar {
	height: 5px;
	width: 5px;
}
.vue-manager-popup-body::-webkit-scrollbar-track {
	background: #F1F1F1;
	border-radius: 10px;
}
.vue-manager-popup-body::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 10px;
	background-clip: padding-box;
}
.vue-manager-popup-body::-webkit-scrollbar-thumb:hover {
	background: #555;
}

.vue-manager-popup-label + .vue-manager-popup-search > .vue-list-search{
	padding: 4px 0;
}

.vue-manager-popup-footer{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 8px 8px 0 8px;
    box-sizing: border-box;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex: 0 0 48px;
    position: relative;
}

.vue-select-list-search{
	width:100%;
	height: 24px;
	flex: 0 0 calc(100% - 30px);
}

.vue-list-search{
	box-sizing: border-box;
	position:relative;
	padding:4px 30px 4px 0;
}

.vue-list-search input{
	font-family: sans-serif;
	border: 1px solid var(--aui-pale-border);
	height: 30px;
	font-size: var(--font-size-14);
	border-radius: 30px;
	box-sizing: border-box;
	background-color: var(--aui-pale-background);
	margin: 0;
	width: 100%;
	color: var(--aui-main-colour);
	padding-left: 34px;
}

.vue-list-search i svg{
	display:block;
	margin-top:2px;
	width:14px;
	height:14px;
}

.vue-list-search i path[stroke]{
	stroke: var(--aui-main-colour);
}

.vue-list-search i{
	position:absolute;
	top:10px;
	left:10px;
}

.vue-list-search:focus-within input{
	border-color: var(--theme-colour);
}

.vue-list-search:focus-within i path[stroke]{
	stroke: var(--theme-colour);
}

.vue-list-item{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 4px 8px 4px 0;
    box-sizing: border-box;
    width: 100%;
    align-items: baseline;
    border-radius:6px;
    user-select:none;
}

.vue-list-item:hover .vue-list-label, .vue-grid-item:hover .vue-list-label{
    color: var(--aui-main-colour);
}

.vue-grid-item{
    display: grid;
    padding: 4px 8px 4px 0;
    box-sizing: border-box;
    width: 100%;
    align-items: baseline;
    border-radius:6px;
    user-select:none;
}

.vue-grid-header-item{
    display: grid;
    box-sizing: border-box;
    width: 100%;
    align-items: baseline;
    user-select:none;
    position: sticky;
    z-index: 1;
    top: 0px;
    left: 0px;
    background-color: var(--aui-main-background);
}

.vue-list-checkbox{
    flex: 0 0 30px;
    align-self:flex-start;
}

.vue-list-label{
    flex: 1 1 auto;
    font-size: var(--font-size-12);
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    overflow: hidden;
    color: var(--aui-main-colour);
}

/* Checkbox */
.vue-checkbox{
    position:relative;
    top: 1px;
}

.vue-checkbox input[type="checkbox"]{
	position:absolute;
	clip: rect(0 0 0 0);
}

.vue-checkbox label{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.vue-checkbox[tiny] label{
    left:2px;
}

.vue-checkbox label:before{
	position:absolute;
    top: 0px;
	left:0px;
	content:"";
	height:20px;
	width:20px;
	background-color: var(--aui-main-background);
	border: 1px solid var(--aui-main-colour);
	border-radius:4px;
}

.vue-checkbox[tiny] label:before{
    height: 14px;
    width: 14px;
    border-radius: 2px;
}

.vue-checkbox input[type="checkbox"]:checked + label:before{
	border-color: var(--theme-colour)!important;
}

.vue-checkbox input[type="checkbox"]:focus + label:before{
	box-shadow: 0 0 0 1px var(--theme-colour)!important;
}

.vue-checkbox input[type="checkbox"]:checked + label:after{
	position:absolute;
	top:4px;
	left:4px;
	content:"";
	height:12px;
	width:12px;
	background-color: var(--theme-colour)!important;
	border: 1px solid var(--theme-colour)!important;
	border-radius:2px;
}

.vue-checkbox[tiny] input[type="checkbox"]:checked + label:after{
    top: 3px;
    left: 3px;
    height: 8px;
    width: 8px;
    border-radius:1px;
}

.vue-checkbox input[type="checkbox"]:focus + label span{
	color: var(--theme-colour);
}

.vue-checkbox span{
	padding: 4px 0 4px 30px;
    display: inline-block;
    width:300%;
    font-size: var(--font-size-12);
}

.vue-checkbox[tiny] span{
    padding: 2px 0 2px 30px;
}

/* Radio */
.vue-radio{
    position:relative;
    top: 1px;
}

.vue-radio input[type="radio"]{
	position:absolute;
	clip: rect(0 0 0 0);
}

.vue-radio label{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.vue-radio[tiny] label{
    left:2px;
}

.vue-radio label:before{
	position:absolute;
    top: 0px;
	left:0px;
	content:"";
	height:20px;
	width:20px;
	background-color: var(--aui-main-background);
	border: 1px solid var(--aui-main-colour);
	border-radius:20px;
}

.vue-radio[tiny] label:before{
    height: 14px;
    width: 14px;
    border-radius: 14px;
}

.vue-radio input[type="radio"]:checked + label:before{
	border-color: var(--theme-colour)!important;
}

.vue-radio input[type="radio"]:focus + label:before{
	box-shadow: 0 0 0 1px var(--theme-colour)!important;
}

.vue-radio input[type="radio"]:checked + label:after{
	position:absolute;
	top:4px;
	left:4px;
	content:"";
	height:12px;
	width:12px;
	background-color: var(--theme-colour)!important;
	border: 1px solid var(--theme-colour)!important;
	border-radius:12px;
}

.vue-radio[tiny] input[type="radio"]:checked + label:after{
    top: 3px;
    left: 3px;
    height: 8px;
    width: 8px;
    border-radius:8px;
}

.vue-radio input[type="radio"]:focus + label span{
	color: var(--theme-colour);
}

.vue-radio span{
	padding: 4px 0 4px 30px;
    display: inline-block;
    font-size: var(--font-size-12);
}

.vue-radio[tiny] span{
    padding: 2px 0 2px 28px;
}

/* Tick checkbox */
.vue-tick{
    position:relative;
    top: 1px;
}


.vue-tick input[disabled] + label{
	opacity: 0.4;
  cursor: default;
}

/* servicehub overdrive */
.th-groupitem-checkbox .vue-list-checkbox {
    flex: 0 0 20px;
}

.vue-tick input[type="checkbox"]{
	position:absolute;
	clip: rect(0 0 0 0);
}

.vue-tick label{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
    cursor:pointer;
}

.vue-tick label:before{
	position:absolute;
  top: 0px;
	left:0px;
	content:"";
	height:20px;
	width:20px;
  opacity: 1;
	background-image: var(--svg-active-tick);
  background-repeat: no-repeat;
  background-size: 10px;
  border-radius: 100%;
  border: 1px solid var(--aui-pale-border);
  background-position: 50%;
  box-sizing: border-box;
  background-color:var(--aui-pale-background);
  transition: all .3s ease-in-out;
  box-shadow: 0px 0px 3px 0px inset #4b4b4b30;
}

#th-ui-job-column .vue-tick label:before,
.th-manager-popup .vue-tick label:before {
    background-color:var(--aui-main-background);
}

.vue-tick label:hover:before,
.vue-tick label:focus:before {
    border-color: var(--theme-color);
    background-image: var(--svg-active-tick-hover);
}

.vue-tick input[type="checkbox"]:focus + label:before{
	opacity: 1;
}

.vue-tick input[type="checkbox"]:checked + label:before{
	background-image: var(--svg-active-tick-font);
    border-color: var(--theme-color);
    background-color: var(--theme-color)!important;
    opacity: 1;
}

.vue-button{
    color:var(--theme-colour);
    background-color:var(--aui-main-background);
    border: 2px solid var(--theme-colour);
    border-radius: 15px;
    box-sizing: border-box;
    height:30px;
    padding:0 12px 0 12px;
    cursor:pointer;
    user-select:none;
    font-size: var(--font-size-14);
    transition: background 0.2s, filter 0.2s;
    white-space: nowrap;
}

.vue-button-primary{
    color:#ffffff;
    background-color: var(--theme-colour);
    border:2px solid var(--theme-colour);
}

.vue-button-green{
    color:#ffffff;
    background-color: var(--aui-success-colour);
    border:2px solid var(--aui-success-colour);
}

.vue-button-large{
    height:36px!important;
    padding:0 16px 0 16px!important;
    border-radius: 36px;
}

.vue-button:hover, .vue-button:focus{
    color:var(--aui-main-background);
    background-color: var(--theme-colour);
    border-color: var(--theme-colour);
}

.vue-button-primary:hover, .vue-button-primary:focus{
    color:var(--theme-colour);
    background-color:var(--aui-main-background);
    border-color: var(--theme-colour);
}

.vue-button-green:hover, .vue-button-green:focus{
    color:var(--theme-colour);
    background-color:var(--aui-main-background);
    border-color: var(--theme-colour);
}

.vue-button-spacer{
    margin-right:6px;
}

.vue-button-vertical-spacer{
    margin-bottom:6px;
}

.vue-option-item-flex{
    display:flex;
    flex-direction: row;
    flex-wrap:nowrap;
    justify-content: space-between;
}

.vue-option-item{
    box-sizing: border-box;
}

.vue-option-item-background{
    border-radius:6px;
    background-color: var(--aui-pale-background);
    border: 1px solid var(--aui-pale-border);
    padding:6px;
    margin-bottom: 12px;
}

.vue-option-dragger{
    flex: 0 0 auto;
    align-self:center;
    width:15px;
    height:16px;
    padding: 2px;
}

.vue-option-dragger path[fill], .vue-grid-option-dragger path[fill]{
    fill: var(--aui-main-colour);
}

.vue-option-dragger svg,  .vue-grid-option-dragger svg{
    display: block;
}

.vue-option-label{
    flex: 0 0 auto;
    width:45%;
    padding: 2px;
    font-size: var(--font-size-14);
    font-weight:bold;
}

#divAddUpdateService .vue-option-label,
#divAddUpdateService .vue-option-dragger {
    flex: 1 1 auto;
}

.vue-option-value{
    flex: 0 0 auto;
    width:45%;
    padding: 2px;
    font-size: var(--font-size-14);
    font-weight:bold;
}

.vue-option-column{
    flex: 1 1 auto;
    width:auto;
    padding: 2px;
}

.vue-option-button-column{
    flex: 0 0 auto;
    width:30px;
    padding: 2px;
}

.vue-option-delete{
    position:relative;
    vertical-align:middle;
    border-radius: 50%;
    width:20px;
    height:20px;
    background-color: var(--aui-pale-background);
    border: 1px solid var(--aui-pale-border);
    box-sizing: border-box;
    cursor:pointer;
    transition: all 0.2s ease;
    margin-top: 2px;
    transform: rotate(45deg);
    margin-top:10px;
}

.vue-option-item .vue-option-delete {
    background-color: var(--aui-main-background);
}

.vue-option-delete:before{
    position:absolute;
    content:"";
    width:2px;
    height:10px;
    left:8px;
    top:4px;
    background-color: var(--aui-main-colour);
    transition: all 0.2s ease;
}

.vue-option-delete:after{
    position:absolute;
    content:"";
    width:10px;
    height:2px;
    left:4px;
    top:8px;
    background-color: var(--aui-main-colour);
    transition: all 0.2s ease;
}

.vue-option-delete-large{
    width:30px;
    height:30px;
    margin-top:5px;
}

.vue-option-delete-large:before{
    width: 2px;
    height: 18px;
    left: 13px;
    top: 5px;
}

.vue-option-delete-large:after{
    width: 18px;
    height: 2px;
    left: 5px;
    top: 13px;
}

.vue-option-delete:focus, .vue-option-delete:hover{
    background-color: var(--theme-color);
    color: var(--aui-main-background);
    border-color: var(--theme-colour);
}

.vue-option-delete:focus:after , .vue-option-delete:hover:after, .vue-option-delete:focus:before , .vue-option-delete:hover:before{
    background-color: var(--aui-main-background);
}

.vue-option-add-outer{
    margin-top:10px;
    text-align:center;
}

.vue-option-add{
    position:relative;
    display:inline-block;
    vertical-align:top;
    border-radius: 50%;
    width:20px;
    height:20px;
    background-color: var(--theme-colour);
    border: 2px solid transparent;
    box-sizing: border-box;
    cursor:pointer;
    transition: all 0.2s ease;
}

.vue-option-add:before{
    position: absolute;
    content: "";
    width: 2px;
    height: 10px;
    left: calc(50% - 1px);
    top: calc(50% - 5px);
    background-color: var(--aui-font-selection);
}

.vue-option-add:after{
    position: absolute;
    content: "";
    width: 10px;
    height: 2px;
    left: calc(50% - 5px);
    top: calc(50% - 1px);
    background-color: var(--aui-font-selection);
}

.vue-option-add-large{
    width:30px;
    height:30px;
}

.vue-option-add-large:before{
    width: 2px;
    height: 12px;
    left: calc(50% - 1px);
    top: calc(50% - 6px);
}

.vue-option-add-large:after{
    width: 12px;
    height: 2px;
    left: calc(50% - 6px);
    top: calc(50% - 1px);
}

.vue-option-add:focus, .vue-option-add:hover{
    background-color: var(--aui-main-background);
    color: var(--theme-colour);
    border-color: var(--theme-colour);
}

.vue-option-add:focus:after , .vue-option-add:hover:after, .vue-option-add:focus:before , .vue-option-add:hover:before{
    background-color: var(--theme-colour);
}

.vue-input-control-prop-input{
    font-family: sans-serif;
    border: 1px solid var(--aui-pale-border);
    height:40px;
    border-radius: 20px;
    box-sizing: border-box;
    background-color: var(--aui-main-background);
    margin:0;
    width:100%;
    padding:0 10px 0 10px;
    color: var(--aui-main-colour);
    font-size: var(--font-size-12);
}

.vue-input-control-prop-input-footnote{
    color: var(--aui-pale-background);
    font-size: var(--font-size-12);
}

select.vue-input-control-prop-input{
    background-image:var(--svg-select-arrow);
	background-repeat: no-repeat;
	background-position: calc(100% - 12px) 50%;
	padding-right:30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
	appearance: none;
}

/* IE remove select arrow */ 
select.vue-input-control-prop-input::-ms-expand{
    display:none;
}

.vue-input-control-prop-input[type="date"]::-webkit-inner-spin-button,
.vue-input-control-prop-input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

textarea.vue-input-control-prop-input{
    height:100px;
    resize: vertical;
    border-radius: 6px;
    padding-top:10px;
    padding-bottom:10px;
}

.vue-input-control-prop-input:focus, .vue-input-control-search:focus{
    border-color: var(--theme-colour);
}

.vue-input-control-prop-input[type="number"]{
    width: 50%;
}

/* Tags */

.vue-tag{
    display: inline-block;
    padding: 0px 6px 0px 6px;
    height: 20px;
    border-radius: 2px;
    line-height: 20px;
    vertical-align: middle;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor:pointer;
    position:relative;
}

.vue-tag span{
    margin-left:18px;
    font-size: var(--font-size-12);
}

.vue-tag[dotcolor]:before{
    position:absolute;
    content:"";
    top: 1px;
    left: 1px;
    border-radius: 50%;
    width:16px;
    height:16px;
    background-color: var(--dotcolor);
}

.vue-tag-editor-footer{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 0px 3px 0 8px;
    border-radius: 6px;
    border: 1px solid var(--aui-pale-border);
    background-color: var(--aui-pale-background);
    box-sizing: border-box;
    width:100%;
    height:32px;
}

/* Color swatch */
.vue-swatch{
	border:none;
	width:100%;
	box-sizing:border-box;
	height:24px;
	width:24px!important;
	max-width:24px;
	border-radius: 100%;
	appearance: none;
	padding: 0;
	margin:0;
	position:relative;
	background: none;
}
.vue-swatch::-webkit-color-swatch-wrapper {
	padding: 0;
}
.vue-swatch::-moz-color-swatch-wrapper {
	padding: 0;
}
.vue-swatch::-moz-color-swatch {
	border-radius: 100%;
	width: 29px!important;
	height: 29px;
	box-sizing: border-box;
	background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(0,0,0,0.2));
	border: 1px solid rgba(0, 0, 0, 0.2);
}

.vue-swatch::-webkit-color-swatch {
	border-radius: 100%;
	width: 29px!important;
	height: 29px;
	box-sizing: border-box;
	background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(0,0,0,0.2));
	border: 1px solid rgba(0, 0, 0, 0.2);
}
.vue-swatch:after{
	position:absolute;
	content:"";
	height:28px;
	max-width:28px;
	border-radius:20px;
	background-color:rgba(0,0,0.0.3);
}

.vue-tag-editor-swatch{
    width:14px;
    margin-top:8px;
}
.vue-tag-editor-swatch .vue-swatch{
    width:14px!important;
    height:14px!important;
    border-radius: 100%!important;
    border:none!important;
}

.vue-tag-editor-swatch .vue-swatch::-moz-color-swatch{
    width:14px!important;
    height:14px!important;
}

.vue-tag-editor-swatch .vue-swatch::-webkit-color-swatch{
    width:14px!important;
    height:14px!important;
}

.vue-tag-editor-input{
    flex:1 1 auto;
    width:auto;
}

.vue-tag-editor-input input{
    font-family: sans-serif;
    border: none;
    height: 30px;
    border-radius: 30px;
    box-sizing: border-box;
    background-color: transparent;
    margin: 0;
    width: 172px;
    padding: 0 0 0 10px;
    color: var(--aui-main-colour);
    font-size: var(--font-size-12);
}
.vue-tag-editor-input:focus-within{
    border-color: var(--theme-colour);
}

.vue-icon{
    margin-left:4px;
    cursor:pointer;
}

.vue-tag-editor-buttons{
    display: flex;
    margin-top:2px;
}
.vue-tag-editor-buttons .vue-icon{
    margin-top:1px;
    width:23px;
    height:23px;
    border-radius:100%;
    background-color: var(--aui-main-background);
    border: 1px solid var(--aui-pale-border);
}
.vue-tag-editor-buttons .vue-icon:last-child{
    margin-right:0;
}
.vue-tag-editor-buttons .vue-icon svg{
    display: block;
    margin: 4px auto;
}
.vue-tag-editor-buttons .vue-icon path[stroke]{
    stroke: var(--aui-main-colour);
}
.vue-tag-editor-buttons .vue-icon:hover path[stroke], .vue-tag-editor-buttons .vue-icon:focus path[stroke]{
    stroke: var(--theme-colour);
}

.vue-icon-theme{
    background-color: var(--theme-colour)!important;
    border-color: var(--theme-colour)!important;
}
.vue-tag-editor-buttons .vue-icon-theme path[stroke]{
    stroke: var(--aui-main-background)!important;
}
.vue-tag-editor-buttons .vue-icon-theme:hover path[stroke], .vue-tag-editor-buttons .vue-icon-theme:focus path[stroke]{
    stroke: var(--aui-main-background)!important;
}

/* Tag Lozengers */

.vue-tag-lozenges{
	list-style: none;
    list-style-image: none;
    display: flex;
    justify-items: flex-start;
	margin: 0;
    padding: 0;
    border: none;
	margin-left: -2px;
    flex-wrap:nowrap;
}

.vue-tag-lozenges li{
    margin: 0;
    padding: 0;
    border: none;
    border: 1px solid var(--aui-pale-border);
    background-color: var(--aui-main-background);
    border-radius: 30px;
    padding: 0 12px 0 6px;
      padding-left: 6px;
    height: 26px;
    line-height: 26px;
    margin: 2px;
    font-size: var(--font-size-12);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    position: relative;
    box-sizing: border-box;
}

#servicesGrid_body .vue-tag-lozenges li{
    background-color: transparent!important;
}

#servicesGrid_body .vue-tag-lozenges li[dotcolor]:before{
    top: 4px;
    left: 6px;
}

#servicesGrid_body .vue-tag-lozenges li[dotcolor] {
    padding-left: 28px;
}

#servicesGrid_body .vue-option-add{
    position: relative;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    background-color: var(--theme-colour);
    border: 1px solid var(--aui-pale-border);
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s ease;
}

#servicesGrid_body .vue-option-add:before{
    position: absolute;
    content: "";
    width: 2px;
    height: 10px;
    left: 11px;
    top: 7px;
    background-color: var(--aui-font-selection);
    transition: all 0.2s ease;
}

#servicesGrid_body .vue-option-add:after{
    position: absolute;
    content: "";
    width: 10px;
    height: 2px;
    left: 7px;
    top: 11px;
    background-color: var(--aui-font-selection);
    transition: all 0.2s ease;
}

.vue-tag-opener{
    border: none !important;
    background-color: transparent !important;
    padding:0 !important;
    border-radius:0 !important;
}

.rowHighlight .col .vue-option-add {
    border-color: var(--aui-main-background);
}

.vue-remove-tag{
    cursor:pointer;
    margin-left:7px;
    margin-top:1px;
}

.vue-remove-tag path[stroke]{
    stroke: var(--aui-pale-border);
}

.vue-remove-tag:hover path[stroke]{
    stroke: var(--theme-colour);
}

.vue-tag-lozenges li[dotcolor][aria-selected="true"] > .vue-remove-tag:hover path[stroke]{
    stroke: var(--aui-font-selection)!important;
}

.vue-tag-lozenges li[dotcolor][aria-selected="true"] > .vue-remove-tag:hover path[stroke]{
    stroke: var(--aui-font-selection)!important;
}

.vue-tag-lozenges li:not([dotcolor]):hover{
    background-color: var(--theme-colour);
    color: var(--aui-font-selection);
}

.vue-tag-lozenges li:not([dotcolor]){
    padding: 0 20px 0 20px;
}

.vue-tag-lozenges li[dotcolor][aria-selected="true"] > .vue-remove-tag:hover path[stroke]{
    stroke: var(--aui-font-selection)!important;
}

.vue-tag-lozenges li:not([dotcolor]):hover{
    background-color: var(--theme-colour);
    color: var(--aui-font-selection);
}

.vue-tag-lozenges li[aria-selected="true"]{
	background-color: var(--theme-colour);
	color:var(--aui-font-selection);
    border-color: var(--theme-color);
}

.vue-tag-lozenges li[dotcolor]{
    padding-left: 36px;
}

.vue-tag-lozenges li[dotcolor]:before{
    position: absolute;
    content: "";
    top: 9px;
    left: 12px;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    background-color: var(--dotcolor);
}

.vue-tag-lozenges[tiny] li[dotcolor]{
    padding-left: 28px;
}

.vue-tag-lozenges[tiny] li[dotcolor]:before{
    top:6px;
    left:6px;
}

/* Tag selector */

.vue-tag-selector-outer{
    margin-bottom: 6px;
}

.vue-tag-selector{
	list-style: none;
    list-style-image: none;
    display: flex;
    justify-items: flex-start;
	margin: 0;
    padding: 0;
    border: none;
	margin-left: -2px;
    flex-wrap:wrap;
}

.vue-tag-selector li{
	margin: 0;
    padding: 0;
    border: none;
	border: 1px solid var(--aui-pale-border);
	background-color: var(--aui-main-background);
	border-radius: 30px;
	padding: 0 8px 0 6px;
	height: 30px;
	line-height: 27px;
	margin: 3px;
	font-size: var(--font-size-12);
	cursor:pointer;
	white-space:nowrap;
    user-select:none;
    position:relative;
    box-sizing: border-box;
    display:flex;
    flex-wrap:nowrap;
    align-items: center;
}

.vue-tag-label{
}

.vue-tag-selector li[dotcolor][aria-selected="true"] > .vue-remove-tag:hover path[stroke],
.vue-tag-selector li:hover > .vue-remove-tag:hover path[stroke]{
    stroke: var(--aui-font-selection)!important;
}

.vue-tag-selector li:not([dotcolor]):hover{
    background-color: var(--theme-colour);
    color: var(--aui-font-selection);
}

.vue-tag-selector li[aria-selected="true"],
.vue-tag-selector li:hover{
	background-color: var(--theme-colour);
	color:var(--aui-font-selection);
    border-color: var(--theme-colour);
}

.vue-tag-selector li[dotcolor]{
    padding-left: 28px;
}

.vue-tag-selector li[dotcolor]:before{
    position:absolute;
    content:"";
    top:6px;
    left:6px;
    border-radius: 50%;
    width:16px;
    height:16px;
    background-color: var(--dotcolor);
}

/* Help tip */
.vue-helptip{
    position:relative;
    padding-left:30px;
}

.vue-helptip i{
    position:absolute;
    top: 0px;
    left: 8px;
    width: 16px;
    height:16px;
    border-radius:20px;
    background-color: var(--theme-colour);
}

.vue-helptip i svg{
    display:block;
    margin: 2px auto;
    height: auto;
}

.vue-helptip span[vuetooltip]{
    width: max-content;
    max-width: 200px;
}

.vue-helptip[vuetooltiphover]{
    cursor:help;
}

.vue-helptip[vuetooltiphover] > [vuetooltip]{
    display:none;
    position: fixed;
    z-index: 2;
    background-color: var(--aui-pale-background);
    border: 1px solid var(--aui-pale-border);
    color: var(--text-color)!important;
    font-size: var(--font-size-12);
    font-weight: bold;
    padding: 5px 10px 5px 10px;
    box-sizing: border-box;
    border-radius: 6px;
    margin-left: 10px;
    margin-top: -7px;
    white-space: normal;
    box-shadow: 1px 2px 6px 2px rgb(0 0 0 / 9%);
    line-height: 20px;
    text-align: left;
}

/* Left arrow */
.vue-helptip[vuetooltiphover] > [vuetooltip][arrow="left"]:before, .vue-helptip[vuetooltiphover] > [vuetooltip][arrow="left"]:after{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid var(--aui-pale-background);
    left: -9px;
    top: 10px;
    z-index: 100;
}

.vue-helptip[vuetooltiphover] > [vuetooltip][arrow="left"]:before{
    border-right-color: var(--aui-pale-background);
    border-top-width: 9px;
    border-bottom-width: 9px;
    border-right-width: 9px;
}

.vue-helptip[vuetooltiphover] > [vuetooltip][arrow="left"]:after{
    left: -8px;
    top: 11px;
}

/* Right arrow */
.vue-helptip[vuetooltiphover] > [vuetooltip][arrow="right"]:before, .vue-helptip[vuetooltiphover] > [vuetooltip][arrow="right"]:after{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid var(--aui-pale-background);
    right: -9px;
    top: 10px;
    z-index: 100;
}

.vue-helptip[vuetooltiphover] > [vuetooltip][arrow="right"]:before{
    border-right-color: var(--aui-pale-background);
    border-top-width: 9px;
    border-bottom-width: 9px;
    border-left-width: 9px;
}

.vue-helptip[vuetooltiphover] > [vuetooltip][arrow="right"]:after{
    right: -8px;
    top: 11px;
}


*[vuetooltiphover]:hover > *[vuetooltip]{
    display:inline-block;
    -webkit-animation:fadeOut 1s;
    -webkit-animation-delay:60s;
    -webkit-animation-fill-mode:forwards;
    -moz-animation:fadeOut 1s;
    -moz-animation-delay:60s;
    -moz-animation-fill-mode:forwards;
    animation:fadeOut 1s;
    animation-delay:60s;
    animation-fill-mode:forwards;
}

/* Form select */
.vue-select-list{
    width:100%;
    min-height: 30px;
    font-size: var(--font-size-12);
    background-color: var(--aui-main-background);
    border: 1px solid var(--aui-main-colour);
    box-sizing: border-box;
    border-radius: 4px;
}

.vue-select-list-search-controls{
    width:100%;
    display:flex;
    flex-wrap:nowrap;
}

.vue-select-list-search{
    width: calc(100% - 30px);
    height: 30px;
    flex: 0 0 calc(100% - 30px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vue-select-list-search-arrow{
    width:30px;
    height:30px;
    flex: 0 0 30px;
    cursor:pointer;
    position: relative;
}

.vue-select-list-search-arrow i[opened="false"], .vue-select-list-search-arrow i[opened="true"][mobile="false"]{
    border: solid var(--aui-main-colour);
    border-width: 0 2px 2px 0;
    display: inline-block;
    margin-top: 1px;
    margin-left: 4px;
    padding:8px;
}

.vue-select-list-search-arrow:focus i[opened="false"], .vue-select-list-search-arrow:hover i[opened="false"]{
    border-color: var(--theme-colour);
}

.vue-select-list-search-arrow i[mobile="false"][opened="true"]{
    margin-top:10px!important;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.vue-select-list-search-arrow i[opened="false"]{
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.vue-select-list-input{
    box-sizing:border-box;
    font-size: var(--font-size-12);
    width:100%;
    border:none;
    margin:0;
    height:30px;
    line-height:30px;
    background-color: transparent!important;
    padding-left: 3px;
    border-radius: 4px;
}

.vue-select-list-selected{
    display: inline-block;
    padding: 0px 4px 0px 4px;
    font-size: var(--font-size-12);
    height: 27px;
    line-height:27px;
    border-radius: 4px;
    vertical-align: middle;
    margin-top: 2px;
    margin-left: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor:pointer;
    border:none;
}

.vue-select-list-items{
    max-height:300px;
    overflow-y:auto;
    overflow-x:hidden;
    border-top:1px solid var(--aui-pale-border);
    box-sizing:border-box;
}

.vue-select-list[mobile="true"][opened="true"] .vue-select-list-items{
    max-height: calc(100vh - 54px);
    border:none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.vue-select-list[mobile="false"][opened="true"] .vue-select-list-items{
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.vue-select-list-items[floating="true"]{
    position: fixed;
    z-index: 1000;
    border:1px solid var(--theme-colour);
    background-color: var(--aui-main-background);
    margin-left:-1px;
}

.vue-select-list[opened="true"][mobile="false"]{
    border-color: var(--theme-colour)!important;
    background-color: var(--aui-main-background)!important;
    border-bottom: none;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.vue-select-list[opened="true"][mobile="true"]{
    border: 1px solid var(--theme-colour)!important;
    background-color: var(--aui-main-background)!important;
    border-radius: 4px;
}

.vue-select-list-item{
    font-size: var(--font-size-13);
    box-sizing: border-box;
    padding: 6px;
    width: 100%;
    line-height: 20px;
    
    border-bottom: 1px solid var(--aui-pale-border);
    cursor: pointer;
    appearance: textfield;
    text-rendering: auto;

    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    user-select: none;
    min-height: 30px;
    color: var(--aui-main-colour);
}

.vue-select-list-item-label{
    font-size: var(--font-size-13);
}

.vue-option-dot-color{
	display:-moz-inline-box;
	display:inline-block;
	zoom:1;
	vertical-align:middle;
	width:10px;
	height:10px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	margin-right:10px;
	overflow: hidden;
	text-indent: 100%;
  	white-space: nowrap;
}

.vue-option-dot-color:empty{
	display: none;
}

.vue-select-list-item-sublabel{
    font-size: var(--font-size-12);
}

.vue-select-list-item:focus, .vue-select-list-item:hover, .vue-select-list-item-focus, .vue-select-list-item[aria-selected="true"]{
    color:var(--aui-font-selection);
    background-color:var(--theme-colour);
}

.vue-select-list-item:last-of-type{
    border-bottom:none;
}

/* Mobile select fixed position */
body[interface="MOBILE"] .vue-select-list[opened="true"]{
    position: fixed;
    top: 10px;
    left: 10px;
    max-height: calc(100% - 20px);
    width: calc(100% - 20px);
    z-index: 1000;
}

/* If mobile show close instead of arrow */

.vue-select-list-search-arrow{
    position: relative;
}

.vue-select-list-search-arrow i[opened="true"][mobile="true"]:before, .vue-select-list-search-arrow i[opened="true"][mobile="true"]:after {
    position: absolute;
    top: 5px;
    left: 15px;
    content: ' ';
    height: 20px;
    width: 2px;
    background-color: var(--aui-main-colour);
}

.vue-select-list-search-arrow i[opened="true"][mobile="true"]:before {
    transform: rotate(45deg);
}
.vue-select-list-search-arrow i[opened="true"][mobile="true"]:after {
    transform: rotate(-45deg);
}

.vue-select-list-search-arrow:focus i[opened="true"][mobile="true"]:before, .vue-select-list-search-arrow:hover i[opened="true"][mobile="true"]:before
,.vue-select-list-search-arrow:focus i[opened="true"][mobile="true"]:after, .vue-select-list-search-arrow:hover i[opened="true"][mobile="true"]:after{
    background-color: var(--theme-colour);
}

/* VUE Bottomsheet */

  .vue-bottomsheet-wrapper[data-open='1'] {
    position: fixed;
    top: 0;
    /* left: 0; */
  } 
  .vue-bottomsheet-wrapper[data-open='1'] .vue-bottomsheet-bg {
    display: block;
    transition: all 0.3s;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background-color: rgb(98 98 98 / 66%);
    /* background-color: rgba(0,0,0, .5); */
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    z-index:1;
  }
  .vue-bottomsheet-card {
    width: calc(100% - 32px);
    height: 100dvh;
    position: fixed;
    background: var(--aui-main-background);
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -3px 4px rgba(0, 0, 0, 0.1);
    /* left: 0; */
    z-index: 2;
  }
  .vue-bottomsheet-card[data-state='half'],
  .vue-bottomsheet-card[data-state='open'],
  .vue-bottomsheet-card[data-state='close'] {
    transition: top 0.3s ease-out;
  }
  .vue-bottomsheet-card[data-state='close'] {
    box-shadow: none;
  }
  .vue-bottomsheet-bar {
    width: 45px;
    height: 8px;
    border-radius: 14px;
    background-color: var(--aui-pale-border);
    margin: 0 auto;
    cursor: pointer;
  }
  .vue-bottomsheet-pan-area {
    top: -28px;
    right: 0;
    left: 0;
    /* position: absolute; */
    padding: 12px 0;
  }
  .vue-bottomsheet-pan-area .vue-bottomsheet-bar:hover {
    cursor: -webkit-grab;
    cursor: grab;
  }
  .vue-bottomsheet-pan-area .vue-bottomsheet-bar:active {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
  .vue-bottomsheet-contents {
    max-height: 100%;
    padding-bottom: calc(100dvh * 0.2);
    box-sizing: border-box;
  }
  
  .vue-bottomsheet-card[data-state=move] .vue-bottomsheet-pan-area {
    pointer-events: none;
  }

  /* DEFAULTS */

.sisoui-fullwidth {
    width: 100%;
  }
  
  .sisoui-halfwidth {
    width: 50%;
  }
  
  .bounce-in-enter-active {
    animation: bounce-in .5s;
  }
  
  @keyframes bounce-in {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
  }
  
  .flip-enter-active {
    transition: all 0.4s ease;
  }
  
  .flip-leave-active {
    display: none;
  }
  
  .flip-enter, .flip-leave {
    transform: rotateY(180deg);
    opacity: 0;
  }
  
  .slidefilter {
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
    transition: all 1s;
  }
  
  .slidefilter-enter-active {
      transform: translatey(-30px);
      opacity:0;
  }
  
  .slidefilter-leave-to{
      transform: translatey(30px);
      opacity:0;
  }
  
  .slidefilter-leave-active {
      position: absolute;
      z-index:-1;
  }
  
  .slidefilterx-move, /* apply transition to moving elements */
  .slidefilterx-enter-active,
  .slidefilterx-leave-active {
    transition: all 0.3s ease;
  }
  
  .slidefilterx-enter-from,
  .slidefilterx-leave-to {
    transform: translateX(30px);
  }
  
  .slidefilterx-leave-active {
    position: absolute;
    opacity: 0;
  }
  
  .slidedown-leave-active {
    transition: all 0.3s ease;
    max-height: 1000px;
  }
  
  .slidedown-enter-active {
    transition: all 0.3s ease;
    max-height: 0px;
  }
  
  .slidedown-enter-to {
    max-height: 1000px;
  }
  
  .slidedown-leave-to {
    max-height: 0px;
    overflow: hidden;
  }
  
  .slideup-leave-active {
    transition: all 0.3s ease;
    max-height: 92px;
  }
  
  .slideup-enter-active {
    transition: all 0.3s ease;
    max-height: 0px;
  }
  
  .slideup-enter-to {
    max-height: 92px;
  }
  
  .slideup-leave-to {
    max-height: 0px;
    overflow: hidden;
  }
  
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.2s ease;
  }
  
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
  
  .fadeup-enter-active,
  .fadeup-leave-active {
    transition: all 0.3s ease;
  }
  
  .fadeup-enter-from,
  .fadeup-leave-to {
    transform: translateX(30px);
    opacity: 0;
  }

  /* Enter and leave active are the same for both entering and leaving */
  .scale-top-right-enter-active, .scale-top-right-leave-active {
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
    transform-origin: top right;
  }

  /* Starting state for entering */
  .scale-top-right-enter-from, .scale-top-right-leave-to {
  transform: scale(0);
  opacity: 0;
  }

  /* Ending state for entering and starting state for leaving */
  .scale-top-right-enter-to, .scale-top-right-leave-from {
  transform: scale(1);
  opacity: 1;
  }
  
  /* TOGGLE SWITCH */
  
  .sisoui-switch {
      position: relative;
      display: inline-block;
      width: 46px;
      height: 24px;
  }
    
  .sisoui-switch input {
      display: none;
  }
  
  .sisoui-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    background-color: var(--aui-pale-border,#d6d6d6);
      -webkit-transition: 0.4s;
      transition: 0.4s;
  }
  
  .sisoui-slider:before {
      position: absolute;
      content: "";
      height: 19px;
      width: 19px;
      left: 4px;
      bottom: 3px;
      background-color: white;
      -webkit-transition: 0.4s;
      transition: 0.4s;
  }
  
  .sisoui-switch input:checked + .sisoui-slider {
      background-color: var(--theme-colour);
  }
  
  .sisoui-switch input:focus + .sisoui-slider {
      box-shadow: 0 0 1px var(--theme-colour);
  }
  
  .sisoui-switch input:checked + .sisoui-slider:before {
      -webkit-transform: translateX(20px);
      -ms-transform: translateX(20px);
      transform: translateX(20px);
  }
  
  .sisoui-slider.sisoui-round {
      border-radius: 34px;
  }
  
  .sisoui-slider.sisoui-round:before {
      border-radius: 50%;
  }
  
  .sisoui-toggleswitch-panel {
      display: flex;
      flex-direction: column;
      gap: 12px;
      /* padding: 10px; */
  }
  
  .sisoui-toggleswitch-panel-heading {
    display: flex;
    align-items: center;
  }
  
  .sisoui-toggleswitch-svg-icon {
    display: flex;
    align-items: center;
  }
  
  .sisoui-toggleswitch-panel-title {
    font-weight: 700;
  }
  
  .sisoui-toggleswitch-panel-body {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 103px;
    font-size: var(--font-size-14);
  }
  
  @media only screen and (max-device-width: 1000px) {
    .sisoui-switch {
      width: 51px;
      height: 29px;
    }
  
    .sisoui-slider:before {
      height: 23px;
      width: 23px;
    }
  }
  
  /* DEFAULT BUTTON */
  
  .sisoui-button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    background-color: var(--theme-colour,#2c46cc);
    border: 2px solid var(--theme-colour,#2c46cc);
    color: #fff;
    text-align: center;
    border-radius: 30px;
    text-overflow: ellipsis;
    line-height: 28px;
    padding: 0px 8px;
    white-space: nowrap;
    transition: 0.3s all ease-in-out;
    font-size: var(--font-size-14);
    cursor: pointer;
    overflow: hidden;
    transition: background 0.2s, filter 0.2s; /* Adding transition for filter */
  }
  
  .sisoui-default-button:hover {
    filter: brightness(90%);
  }
  
  .sisoui-default-button:hover {
    background-color: transparent;
    color: var(--theme-colour,#2c46cc);
  }
  
  .sisoui-default-button:active {
    background-color: transparent;
    color: var(--theme-colour,#2c46cc);
  }
  
  .sisoui-inverted-button {
    border: 2px solid var(--theme-colour,#2c46cc);
    color: var(--theme-colour,#2c46cc);
    background: none;
    transition: 0.2s all ease-in-out;
    cursor: pointer;
  }
  
  .sisoui-inverted-button:hover {
    background-color: var(--theme-colour,#2c46cc);
    color: #fff;
  }
  
  .sisoui-success-button {
    background-color: var(--success-colour);
    border: 2px solid var(--success-colour);
  }
  
  .sisoui-success-button:hover {
    filter: brightness(90%);
  }
  
  .sisoui-inverted-success-button {
    background-color: transparent;
    border: 2px solid var(--success-colour);
    color: var(--success-colour);
  }
  
  .sisoui-inverted-success-button:hover {
    background-color: var(--success-colour);
    color: #fff;
  }
  
  .sisoui-resolve-button {
    background-color: var(--error-colour);
    border: 2px solid var(--error-colour);
  }
  
  .sisoui-resolve-button:hover {
    filter: brightness(90%);
  }
  
  .sisoui-inverted-resolve-button {
    background-color: transparent;
    border: 2px solid var(--error-colour);
    color: var(--error-colour);
  }
  
  .sisoui-inverted-resolve-button:hover {
    background-color: var(--error-colour);
    color: #fff;
  }
  
  .sisoui-disabled-button {
    background: var(--aui-pale-background, #F0F0F0);
    border: 2px solid var(--aui-pale-border,#d6d6d6);
    pointer-events: none;
  }
  
  .sisoui-disabled-2-button {
    background: var(--aui-main-background);
    border: 2px solid var(--aui-pale-border,#d6d6d6);
    color: var(--aui-pale-border,#d6d6d6);
    pointer-events: none;
  }
  
  .sisoui-button-rack {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }
  
  .sisoui-closebtn {
    display: block;
    position: absolute;
    z-index: 100;
    width: 28px;
    height: 28px;
    right: 10px;
    top: 10px;
    z-index: 1;
    background-color: var(--main-background);
    background-image: var(--svg-close)!important;
    background-size: 14px !important;
    background-repeat: no-repeat;
    background-position: 50%!important;
    cursor: pointer;
    border-radius: 100%;
    /* transform: rotate(45deg); */
    border: 1px solid var(--aui-pale-border);
    transition: 0.2s all ease;
  }
  
  /* .sisoui-closebtn::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 3px;
    width: 2px;
    height: 16px;
    background-color: var(--aui-main-colour);
    transform: rotate(90deg);
  }
  
  .sisoui-closebtn::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 3px;
    width: 2px;
    height: 16px;
    background-color: var(--aui-main-colour);
  } */
  
  .sisoui-closebtn:hover {
    background-image: var(--svg-close-hover)!important;
  }
  
  .sisoui-closebtn:focus::before, .sisoui-closebtn:hover::after, .sisoui-closebtn:hover::before {
    background-color: var(--aui-main-background);
  }
  
  @media only screen and (min-device-width: 768px) {
    .close-overlay {
        margin: 0;
        outline: 0;
        position: absolute;
        right: 16px;
        top: 16px;
        display: block;
        float: right;
    }
  }
  
  /* INFO BUTTON */
  
  .sisoui-info-icon {
    margin-left: auto;
    min-width: 25px;
    width: 25px;
    height: 25px;
    margin: 0;
    background-image: var(--svg-info);
    background-size: contain;
    background-repeat: no-repeat;
    padding: 0;
    cursor: pointer;
  }
  
  .sisoui-info-icon:hover {
    background-image: var(--svg-info-hover);
  }
  
  /* INPUT BOX */
  
  .sisoui-input-inner {
    border: 1px solid var(--aui-pale-border);
    width: 100%;
    /* border: 1px solid var(--aui-pale-border); */
    border-radius: 6px;
      color: var(--main-colour);
    background-color: var(--aui-pale-background);
    margin-top: 12px;
    /* box-shadow: 0px 0px 1px 0px rgb(33 37 41 / 0%), 0px 1px 1px 0px rgba(33, 37, 41, 0.06); */
    transition: all 0.2s ease-in-out;
  }
  
  /* .form-input {
    border: 1px solid var(--aui-pale-border);
    width: 100%;
    border-radius: 6px;
      color: var(--main-colour);
    background-color: var(--aui-pale-background);
    transition: all 0.2s ease-in-out;
  }
  
  .form-select-input[data-opened] {
    outline: 2px solid var(--theme-colour) !important;
    border-color: transparent !important;
  }
  
  .form-select-input-item {
    background-color: transparent !important;
  } */
  
  .sisoui-input-focus {
    outline: 2px solid var(--theme-colour) !important;
  }
  
  .sisoui-input {
    border: none;
    background-color: transparent;
    color: var(--main-colour);
    padding: 10px 12px 10px 10px;
    width: 100%;
    height: 100%;
    font-size: var(--font-size-14);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 6px;
  }
  
  /* DATEPICKER */
  
  .sisoui-datepicker-container {
    position: relative;
  }
  
  .sisoui-datepicker-heading {
    display: flex;
    align-items: center;
  }
  
  .sisoui-datepicker-input-container {
    border: 1px solid var(--aui-pale-border);
    width: 100%;
    height: 30px;
    border-radius: 6px;
      color: var(--main-colour);
    background-color: var(--aui-pale-background);
    margin-top: 12px;
  }
  
  .sisoui-datepicker-input {
    border: none;
    background-color: transparent;
    color: var(--main-colour);
    padding: 10px 12px 10px 10px;
    width: 100%;
    height: 100%;
    font-size: var(--font-size-14);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .sisoui-calendar-container {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    z-index: 100;
    background-color: #000000a8;
  }
  
  .sisoui-calendar-popup {
    position: absolute;
    background-color: var(--main-background);
    border: 1px solid var(--aui-pale-border);
    border-radius: 8px;
    padding: 13px;
    box-shadow: 0 2px 8px 4px rgb(0 0 0 / 15%);
    width: 90%;
    box-sizing: border-box;
      z-index: 10;
  }
  
  .sisoui-calendar-title {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 10px;
    font-weight: bold;
    font-size: var(--font-size-18);
  }
  
  .sisoui-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .sisoui-calendar-header button {
    display: flex;
    justify-content: center;
    align-items: center;
      border-radius: 50%;
    border: 1px solid var(--aui-pale-border, #F2F2F2);
    background-color: var(--theme-colour);
    color: #fff;
    font-weight: bold;
    width: 35px;
    height: 35px;
    cursor: pointer;
    font-size: var(--font-size-18);
  }
  
  .sisoui-calendar-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }
  
  .sisoui-day-name, .sisoui-date-cell {
    text-align: center;
    font-weight: bold;
    font-size: var(--font-size-14); 
  }
  
  .sisoui-date-cell {
    display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .sisoui-date-cell-disabled {
    opacity: 0.4;
    pointer-events: none;
  }
  
  .sisoui-date-button {
    background: none;
    border: none;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
      width: 100%;
    font-size: var(--font-size-16);
      color: var(--main-colour);
  }
  
  .sisoui-date-button:hover {
    background-color: var(--theme-colour);
    color: #fff;
  }
  
  .sisoui-date-button.today {
    font-weight: bold;
  }
  
  .sisoui-date-button.sisoui-selected {
    background-color: var(--theme-colour);
    color: white;
    width: 35px;
    height: 35px;
  }
  
  .sisoui-time-selector {
    display: flex;
    justify-content: center;
    margin: 15px 0px 15px 0px;
  }
  
  .sisoui-time-selector select {
    border: 1px solid var(--aui-pale-border);
  }
  
  .sisoui-time-selector, .sisoui-confirm-btn {
    font-size: var(--font-size-16);
  }
  
  .sisoui-time-dropdown {
    padding: 5px;
    border: none;
    border-radius: 4px;
    color: var(--main-colour);
    background-color: var(--aui-pale-background);
    width: 65px;
    font-size: var(--font-size-16);
    text-align: center;
    height: 36px;
  
  }
  
  .sisoui-confirm-btn {
    background-color: var(--theme-colour);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 15px;
    cursor: pointer;
    margin-top: 10px;
    display: block;
    width: 50%;
      margin: 10px auto 5px auto;
  }
  
  .sisoui-confirm-btn:hover {
    background-color: var(--theme-colour);
  }
  
  .sisoui-month-year-selector {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }
  
  .sisoui-month-year-selector select {
    padding: 5px;
    border: 1px solid var(--aui-pale-border);
    border-radius: 4px;
    color: var(--main-colour);
    background-color: var(--aui-pale-background);
    width: 75px;
    font-size: var(--font-size-16);
    text-align: center;
    height: 36px;
  }
  
  .sisoui-time-colon {
    display: flex;
    font-size: var(--font-size-22);
    font-weight: bold;
    margin: 0px 5px 0px 5px;
    align-items: center;
  }
  
  /* General Styling for the Pickers */
  .picker-header {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid var(--aui-pale-border);
    background-color: var(--theme-colour);
    color: white;
  }
  
  .picker-header button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
  }
  
  .month-year-picker, .time-picker {
    background-color: var(--main-background);
    border-radius: 8px;
    box-shadow: 0 2px 8px 4px rgb(0 0 0 / 15%);
    padding: 10px;
    width: auto;
    position: absolute;
    z-index: 100;
  }
  
  /* Month/Year Picker Styling */
  .month-picker, .year-picker {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 10px;
  }
  
  .month, .year {
    padding: 5px 10px;
    margin: 5px;
    border-radius: 4px;
    cursor: pointer;
    background-color: var(--aui-pale-background);
    color: var(--main-colour);
    text-align: center;
  }
  
  .month:hover, .year:hover {
    background-color: var(--theme-colour);
    color: white;
  }
  
  /* Time Picker Styling */
  .hour-picker, .minute-picker {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 10px;
  }
  
  .hour, .minute {
    padding: 5px 10px;
    margin: 5px;
    border-radius: 4px;
    cursor: pointer;
    background-color: var(--aui-pale-background);
    color: var(--main-colour);
    text-align: center;
  }
  
  .hour:hover, .minute:hover {
    background-color: var(--theme-colour);
    color: white;
  }
  
  /* Additional Responsive Adjustments */
  @media (min-width: 601px) {
    .month-year-picker, .time-picker {
      width: 300px;
    }
  }
  
  @media (min-width: 601px) {
    .sisoui-calendar-popup {
      width: auto;
    }
  
    .sisoui-day-name, .sisoui-date-cell, .sisoui-date-button {
      font-size: initial;
    }
  
    .sisoui-time-selector, .sisoui-confirm-btn {
      font-size: initial;
    }
  }
  
  
  /* DROPDOWN SELECTOR */
  
  .sisoui-selectarrow {
    display: flex;
    height: 10px;
    right: 12px;
    position: absolute;
    transition: all 0.3s ease;
  }
  
  .sisoui-arrow-up {
    transform: rotate(180deg);
    transform-origin: 53% 50%;
  }
  
  .sisoui-select-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 12px;
  }
  
  .sisoui-select-heading {
    display: flex;
    align-items: center;
  }
  
  .sv-filter-container label {
    font-size: var(--font-size-13);
  }
  
  .sisoui-select-svg-icon {
    display: flex;
    align-items: center;
  }
  
  .sisoui-select-input-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    border: 1px solid var(--aui-pale-border);
    border-radius: 6px;
    background-color: var(--aui-pale-background);
    box-sizing: border-box;
    padding: 5px;
    padding-left: 6px;
    padding-right: 40px;
    min-height: 30px;
    /* margin-top: 10px; */
    cursor: pointer;
    font-size: var(--font-size-14);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .sisoui-tag-label {
    display: flex;
    align-items: center;
    position: relative;
    font-size: var(--font-size-13);
  }
  
  .sisoui-tag-hasicon {
    margin-left: 22px;
  }
  
  .sisoui-tag-label::before {
    height: 16px;
    width: 16px;
    filter: brightness(0) invert(1);
  }
  
  .sisoui-select-tag-pill {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 10px 8px;
    margin: 5px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    cursor:default;
    position: relative;
  }
  
  .sisoui-select-tag-pill-unselected:hover {
    background-color: var(--theme-colour) !important;
    color: #fff;
    cursor: pointer;
  }
  
  .sisoui-select-placeholder {
    background-color: transparent;
    color: var(--aui-main-colour);
    border: none;
    opacity: 0.8;
    font-size: var(--font-size-13);
    width: 100%;
  }
  
  .sisoui-select-remove-item {
    display: flex;
    right: 40px;
    position: absolute;
  }
  
  .sisoui-select-remove-tag {
    display: flex;
    background-color: transparent;
    border: none;
    color: white;
    margin-left: 5px;
    padding-left: 0;
    padding-right: 3px;
    cursor: pointer;
  }
  
  .sisoui-dropdown {
    background-color: var(--aui-pale-background);
    z-index: 200;
    position: absolute;
    width: 100%;
    padding: 10px 10px 10px 10px;
    border: 1px solid var(--aui-pale-border);
    top: 110%;
    border-radius: 6px;
    /* box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);*/
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2); 
    max-height: 190px;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  
  .sisoui-item-label {
    font-size: var(--font-size-13);
  }
  
  .sisoui-select-item {
    display: block;
    min-height: 30px;
    width: 100%;
    padding: 6px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    max-lines: 3;
    font-size: var(--font-size-13);
    cursor: pointer;
    text-align: left !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: var(--aui-main-colour, #333);
    border-bottom: 1px solid var(--aui-pale-border);
  }
  
  .sisoui-select-item:hover {
    background-color: var(--theme-colour);
    color: #fff;
  }
  
  .sisoui-selected-item {
    padding-left: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .sisoui-option-heading {
    font-weight: 500;
  }
  
  .sisoui-option-sub {
    font-weight: 400;
    font-style: italic;
    font-size: .9em;
  }
  
  /* Enter and leave active are the same for both entering and leaving */
  .scale-top-enter-active, .scale-top-leave-active {
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
    transform-origin: top left;
  }
  
  /* Starting state for entering */
  .scale-top-enter-from, .scale-top-leave-to {
    transform: scale(0);
    opacity: 0;
  }
  
  /* Ending state for entering and starting state for leaving */
  .scale-top-enter-to, .scale-top-leave-from {
    transform: scale(1);
    opacity: 1;
  }
  
  /* Enter and leave active are the same for both entering and leaving */
  .scale-bottom-enter-active, .scale-bottom-leave-active {
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
    transform-origin: bottom left;
  }
  
  /* Starting state for entering */
  .scale-bottom-enter-from, .scale-bottom-leave-to {
    transform: scale(0);
    opacity: 0;
  }
  
  /* Ending state for entering and starting state for leaving */
  .scale-bottom-enter-to, .scale-bottom-leave-from {
    transform: scale(1);
    opacity: 1;
  }
  
  /* MODAL */
  
  .sisoui-modalcontainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    padding: 18px;
    z-index: 30;
  }
  
  .sisoui-innermodal {
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 600px;
    /* height: 350px; */
    padding: 15px;
    border-radius: 12px;
        border: 1px solid var(--aui-pale-border);
    background-color: var(--main-background,#fff);
    color: var(--aui-main-colour,#333);
    border-color: var(--aui-pale-border, #D6D6D6);
    z-index: 20;
    box-shadow: 0 0 0 50vmax rgb(0 0 0 / 73%);
  }
  
  .sisoui-modalheader {
    margin-bottom: 12px;
  }
  
  .sisoui-modalheader h2 {
    font-size: var(--font-size-16);
  }
  
  .sisoui-modalbody {
    display: flex;
    flex-direction: column;
  }
  
  .sisoui-modalfooter {
    display: flex;
    gap: 8px;
    /* position: absolute; */
    margin-top: 12px;
    bottom: 20px;
    width: 100%;
    justify-content: center;
    align-items: center;
  }
  
  /* CARD */
  
  .sisoui-card {
    display: flex;
    flex-direction: column;
    color: var(--aui-main-colour,#333);
    width: 100%;
    min-width: 280px;
    max-width: var(--half-width); /* was initially to overwrite desktoptablet */
    min-height: 125px;
    padding: 12px;
    background-color: var(--main-background,#fff);
    position: relative;
    border-radius: 12px;
    margin: 0 auto 12px auto!important;
    border: 1px solid var(--aui-pale-border);
    /* box-shadow: 0px 0px 1px 0px rgba(33, 37, 41, 0.08), 0px 2px 2px 0px rgba(33, 37, 41, 0.06); */
    transition: all .2s ease-in-out;
  }
  
  .sisoui-cardheader {
    /* margin-bottom: 12px; */
  }
  
  .sisoui-cardheader h2 {
    font-size: var(--font-size-16);
  }
  
  .sisoui-cardbody {
    display: flex;
    flex-direction: column;
  }
  
  .sisoui-cardfooter {
    display: flex;
    gap: 8px;
    /* margin-top: 12px; */
    /* position: absolute; */
    bottom: 20px;
    width: 100%;
    justify-content: center;
    align-items: center;
    transition: all 1s ease-in-out;
  }
  
  .sisoui-cardfooter .tb-cell {
    padding:0;
  }
  
  .sisoui-cardfooter .tb-cell .sisoui-button {
    margin-left: 6px;
  }
  
  .sisoui-cardfooter .tb-cell:first-child .sisoui-button {
    margin: 0;
  }
  
  /* CHECKBOX */
  
  .sisoui-checkbox-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    /* padding: 8px; */
    height: 30px;
    cursor: pointer;
  }
  
  .sisoui-checkbox-main {
    display: flex;
  }
  
  .sisoui-checkbox-main label {
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 12px;
  }  
  
  .sisoui-checkbox-menu {
    display: flex;
    position: absolute;
    transform: translateY(65%);
    -webkit-transform: translateY(65%);
    z-index: 20;
    /* margin-top: 190px; */
    margin-left: 0px;
  }
  
  .sisoui-checkbox {
    border: 2px solid var(--main-colour);
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: border-color 0.2s ease;
  }
  
  .sisoui-checked {
    border-color: var(--theme-colour);
  }
  
  .sisoui-checked:focus {
    border-color: var(--theme-colour);
  }
  
  .sisoui-checkmark {
    color: white;
    font-size: var(--font-size-14);
    background-color: var(--theme-colour);
    height: 75%;
    width: 75%;
  }
  
  .sisoui-checkbox-placeholder {
    width: 20px;
    height: 25px;
    position: relative;
    /* right: -15px; */
    top: 0;
    cursor: pointer;
  }
  
  .sisoui-checkbox-placeholder:after {
    content: "";
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 10px solid var(--main-colour);
    position: absolute;
    right: 0;
    top: calc(50% - 5px);
  }
  
  .sisoui-options {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    border: 2px solid var(--aui-pale-border);
    background-color: var(--main-background);
    z-index: 10;
    overflow: hidden;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    /* padding: 10px; */
  }
  
  .sisoui-option-svg-icon {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .sisoui-optionitem {
    display: flex;
    align-items: center;
    background-color: var(--main-background);
    padding: 10px;
    position: relative;
    cursor: pointer;
    font-size: var(--font-size-14);
  }
  
  .sisoui-optionitem:hover {
    background-color: var(--theme-colour);
    color: #fff;
  }
  
  .sisoui-optionitem:hover .sisoui-option-svg-icon svg path {
    stroke: #fff !important;
  }
  
  .sisoui-optionitem:hover .sisoui-option-svg-icon svg circle {
    stroke: #fff !important;
  }
  
  .sisoui-optionitem:hover .sisoui-option-svg-icon svg rect {
    stroke: #fff !important;
  }
  
  .sisoui-optionitem::before {
    margin-left: 15px;
  }
  
  .sisoui-checkbox-hasicon {
    margin-left: 33px;
  }
  
  /* PROMPT */
  
  .sisoui-promptcontainer {
    display: flex;
    width: 100%;
    min-height: 100vh;
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    padding: 12px 16px 12px 16px;
    backdrop-filter: blur(2px);
    background-color:rgba(0,0,0, 0.5);
    box-sizing: border-box;
  }
  
  .sisoui-innerprompt {
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 400px;
    /* height: 350px; */
    padding: 18px;
    border-radius: 12px;
    border: 1px solid var(--aui-pale-border);
    background-color: var(--aui-main-background,#fff);
    color: var(--aui-main-colour,#333);
    border-color: var(--aui-pale-border, #D6D6D6);
    z-index: 20;
  }
  
  .sisoui-promptheader {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--font-size-16);
  }
  
  .sisoui-promptheader h2 {
    font-size: var(--font-size-16);
  }
  
  .sisoui-promptbody {
    display: flex;
    flex-direction: column;
  }
  
  .sisoui-promptfooter {
    display: flex;
    gap: 8px;
    /* position: absolute; */
    margin-top: 12px;
    bottom: 20px;
    width: 100%;
    justify-content: center;
    align-items: center;
  }
  
  /* BANNER */
  
  .sisoui-banner {
    display: flex;
    border: none;
    font-size: var(--font-size-12); 
    padding: 6px;
    color: var(--font-selection,#fff);
    text-align: center;
    border-radius: var(--border-radius-small);
    background-repeat: no-repeat;
    background-position: 8px 50%;
    background-size: 22px;
    min-height: 48px;
    margin: 12px auto 12px auto;
  }
  
  .sisoui-banner-innercard {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
  }
  
  .sisoui-banner-message-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-left: 20px;
    padding-right: 20px;
  }
  
  .sisoui-banner-message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .sisoui-banner-icon {
    display: flex;
    margin-left: 10px;
  }
  
  .sisoui-banner-icon::before {
    filter: brightness(0) invert(1);
  }
  
  /* POPUP */
  
  .sisoui-popup-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    /* min-width: 200px; */
    border: 1px solid var(--aui-pale-border);
    border-radius: 6px;
    background-color: var(--main-background,#fff);
    padding: 12px;
    bottom: 50px;
    z-index: 10;
    box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.25);
  }
  
  .sisoui-popup-header {
    display: flex;
    margin-bottom: 12px;
  }
  
  .sisoui-popup-body {
    display: flex;
  }

/* Context Menu */

.vue-contextmenu{
    position: absolute;
    z-index: 999;
    background-color: var(--aui-main-background);
    border: 1px solid var(--aui-pale-border);
    color: var(--aui-main-colour);
    font-size: var(--font-size-12);
    box-sizing: border-box;
    border-radius: 6px;
    min-width:190px;
    max-width:400px;
    min-height:20px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    padding: 2px;
    user-select: none;
}

.vue-contextmenu-fixed{
    right: 11px;
    top: 16px;
}

.vue-contextmenu-list-item{
    padding: 8px 6px;
    font-size: var(--font-size-14);
    color: var(--aui-main-colour);
    border-radius: 4px;
    cursor:pointer;
    display:flex;
    flex-wrap: nowrap;
    position:relative;
    align-items: center;
}

.vue-contextmenu-list-spacer{
    height: 1px;
    width: 100%;
    background-color: var(--aui-pale-border);
    margin: 2px 0;
}

.vue-contextmenu-list-item-label{
    flex: 1 1 100%;
}

.vue-contextmenu-list-item-icon{
    flex: 0 0 26px;
}

.vue-contextmenu-list-item[noclick]{
  cursor: default;
}

.vue-contextmenu-list-item:not([noclick]):focus, .vue-contextmenu-list-item:not([noclick]):hover{
    color: var(--aui-font-selection);
    background-color: var(--theme-colour);
}

*[contextmenuicon]{
  width:20px;
  height:14px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 4px 50%;
}

*[contextmenuicon="time"]{
  background-image: var(--svg-techhub-time); 
}

*[contextmenuicon="accept"]{
  background-image: var(--svg-techhub-accept); 
}

*[contextmenuicon="archive"]{
  background-image: var(--svg-techhub-archive); 
}

*[contextmenuicon="delete"]{
  background-image: var(--svg-techhub-delete); 
}

*[contextmenuicon="cancel"]{
  background-image: var(--svg-techhub-cancelled); 
}

*[contextmenuicon="assign"]{
  background-image: var(--svg-techhub-assign); 
}

*[contextmenuicon="contact"]{
  background-image: var(--svg-techhub-contact); 
}

*[contextmenuicon="date"]{
  background-image: var(--svg-techhub-date); 
}

*[contextmenuicon="edit"]{
  background-image: var(--svg-techhub-edit); 
}

*[contextmenuicon="pencil"]{
  background-image: var(--svg-techhub-pencil); 
}

*[contextmenuicon="pin"]{
  background-image: var(--svg-status-pin); 
}

*[contextmenuicon="add"]{
  background-image: var(--svg-techhub-add); 
}

*[contextmenuicon="addassets"]{
  background-image: var(--svg-techhub-add); 
}

*[contextmenuicon="info"]{
  background-image: var(--svg-techhub-info); 
}

*[contextmenuicon="duplicate"]{
  background-image: var(--svg-techhub-duplicate); 
}

*[contextmenuicon="search"]{
  background-image: var(--svg-techhub-search); 
}

*[contextmenuicon="table"]{
  background-image: var(--svg-techhub-table); 
}

*[contextmenuicon="download"]{
  background-image: var(--svg-techhub-download); 
}



/* Hovers */
.vue-contextmenu-list-item:focus [contextmenuicon="edit"], .vue-contextmenu-list-item:hover [contextmenuicon="edit"]{
  background-image: var(--svg-techhub-edit-font); 
}

.vue-contextmenu-list-item:focus [contextmenuicon="accept"], .vue-contextmenu-list-item:hover [contextmenuicon="accept"]{
  background-image: var(--svg-techhub-accept-font); 
}

.vue-contextmenu-list-item:focus [contextmenuicon="time"], .vue-contextmenu-list-item:hover [contextmenuicon="time"]{
  background-image: var(--svg-techhub-time-font); 
}

.vue-contextmenu-list-item:focus [contextmenuicon="archive"], .vue-contextmenu-list-item:hover [contextmenuicon="archive"]{
  background-image: var(--svg-techhub-archive-font); 
}

.vue-contextmenu-list-item:focus [contextmenuicon="cancel"], .vue-contextmenu-list-item:hover [contextmenuicon="cancel"]{
  background-image: var(--svg-techhub-cancelled-font); 
}

.vue-contextmenu-list-item:focus [contextmenuicon="delete"], .vue-contextmenu-list-item:hover [contextmenuicon="delete"]{
  background-image: var(--svg-contextual-menu-remove-font); 
}

.vue-contextmenu-list-item:focus [contextmenuicon="assign"], .vue-contextmenu-list-item:hover [contextmenuicon="assign"]{
  background-image: var(--svg-techhub-assign-font); 
}

.vue-contextmenu-list-item:focus [contextmenuicon="contact"], .vue-contextmenu-list-item:hover [contextmenuicon="contact"]{
  background-image: var(--svg-techhub-contact-font); 
}

.vue-contextmenu-list-item:focus [contextmenuicon="date"], .vue-contextmenu-list-item:hover [contextmenuicon="date"]{
  background-image: var(--svg-techhub-date-font); 
}

.vue-contextmenu-list-item:focus [contextmenuicon="pencil"], .vue-contextmenu-list-item:hover [contextmenuicon="pencil"]{
  background-image: var(--svg-techhub-pencil-font); 
}

.vue-contextmenu-list-item:focus [contextmenuicon="pin"], .vue-contextmenu-list-item:hover [contextmenuicon="pin"]{
  background-image: var(--svg-status-pin-font); 
}

.vue-contextmenu-list-item:focus [contextmenuicon="add"], .vue-contextmenu-list-item:hover [contextmenuicon="add"]{
  background-image: var(--svg-techhub-add-font); 
}

.vue-contextmenu-list-item:focus [contextmenuicon="addassets"], .vue-contextmenu-list-item:hover [contextmenuicon="addassets"]{
  background-image: var(--svg-techhub-add-font); 
}

.vue-contextmenu-list-item:focus [contextmenuicon="info"], .vue-contextmenu-list-item:hover [contextmenuicon="info"]{
  background-image: var(--svg-techhub-info-font); 
}

.vue-contextmenu-list-item:focus [contextmenuicon="duplicate"], .vue-contextmenu-list-item:hover [contextmenuicon="duplicate"]{
  background-image: var(--svg-techhub-duplicate-font); 
}

.vue-contextmenu-list-item:focus [contextmenuicon="search"], .vue-contextmenu-list-item:hover [contextmenuicon="search"]{
  background-image: var(--svg-techhub-search-font); 
}

.vue-contextmenu-list-item:focus [contextmenuicon="table"], .vue-contextmenu-list-item:hover [contextmenuicon="table"]{
  background-image: var(--svg-techhub-table-font); 
}

.vue-contextmenu-list-item:focus [contextmenuicon="download"], .vue-contextmenu-list-item:hover [contextmenuicon="download"]{
  background-image: var(--svg-techhub-download-font); 
}

/* DROPDOWN SELECTOR */

.vueselector-manager-popup {
  display: flex;
  flex-direction: column;
  background-color: var(--aui-main-background);
  position:absolute;
  z-index:999;
  /* top: 50%; */
  /* left: 50%; */
  margin-top: -270px;
  /* margin-left: 255px; */
  padding-bottom: 10px;
  width:300px;
  max-height:270px;
  box-sizing: border-box;
  border-radius: 10px;
  -webkit-box-shadow: 2px 2px 10px -1px rgba(68, 60, 60, 0.52); 
  box-shadow: 2px 2px 10px -1px rgb(0 0 0 / 52%);
  overflow: hidden;
}
.vueselector-manager-popup-close{
  width: 30px;
  height: 30px;
  position: absolute;
  top: 8px;
  right: 4px;
  z-index: 1;
  cursor: pointer;
  transform: rotate(45deg);
  pointer-events:all;
}
.vueselector-manager-popup-close:before{
  content: "";
  position: absolute;
  left: 14px;
  top: 7px;
  width:2px;
  height:16px;
  background-color: var(--aui-main-colour);
  transform: rotate(90deg);
}
.vueselector-manager-popup-close:after{
  content: "";
  position: absolute;
  left: 14px;
  top: 7px;
  width:2px;
  height:16px;
  background-color: var(--aui-main-colour);
}
.vueselector-popup-close:focus:before, .vueselector-popup-close:focus:after, .vueselector-popup-close:hover:before, .vueselector-popup-close:hover:after{
background-color: var(--aui-main-colour);
}
.vueselector-manager-popup-label{
  display: flex;
  font-size: var(--font-size-14);
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 13px 6px 6px 10px;
  min-height: 40px;
  overflow: hidden;
  color: var(--aui-main-colour);
}
.vueselector-popup-search{
  height:42px;
  padding: 4px 8px 0 10px;
  box-sizing: border-box;
}
.vueselector-manager-popup-body{
  display: flex;
  flex-direction: column;
  /* flex-wrap: wrap; */
  overflow-x:hidden;
  overflow-y:scroll;
  /* scrollbar-width: thin; */
  height:80%;
  box-sizing: border-box;
  padding: 0 10px 8px 10px;
  gap: 4px;
}
.vueselector-heading{
  padding:0;
  margin:0;
  font-size: var(--font-size-15);
  font-weight: bold;
  margin-bottom:10px;
}
.vueselector-section{
  /* min-width: 46%; */
  min-width: 46%;
  flex: 1;
  padding: 0px 10px 10px 0px;
}
.vueselector-list-checkbox{
  /* flex: 0 0 30px; */
  align-self:flex-start;
}
.vueselector-checkbox{
  position:relative;
  top: 1px;
}
.vueselector-checkbox input[type="checkbox"]{
position:absolute;
clip: rect(0 0 0 0);
}
.vueselector-checkbox label{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.vueselector-checkbox label:before{
position:absolute;
top:0px;
left:0px;
content:"";
height:20px;
width:20px;
background-color: var(--aui-main-background);
border: 1px solid var(--aui-main-colour);
border-radius:4px;
}
.vueselector-checkbox[tiny] label:before {
  height: 14px;
  width: 14px;
  border-radius: 2px;
}
.vueselector-checkbox input[type="checkbox"]:checked + label:before{
border-color: var(--theme-color)!important;
}
.vueselector-checkbox input[type="checkbox"]:focus + label:before{
box-shadow: 0 0 0 1px var(--theme-color)!important;
}
.vueselector-checkbox input[type="checkbox"]:checked + label:after{
position:absolute;
top:4px;
left:4px;
content:"";
height:12px;
width:12px;
background-color: var(--theme-color)!important;
border: 1px solid var(--theme-color)!important;
border-radius:2px;
}
.vueselector-checkbox[tiny] input[type="checkbox"]:checked + label:after {
  top: 3px;
  left: 3px;
  height: 8px;
  width: 8px;
  border-radius: 1px;
}
.vueselector-checkbox input[type="checkbox"]:focus + label span{
color: var(--theme-color);
}
.vueselector-checkbox span{
padding: 4px 0 4px 30px;
  display: block;
  width:300px;
}

.vueselector-checkbox[tiny] span{
  padding: 2px 0 2px 30px;
  font-size: var(--font-size-12);
}
.vueselector-search-bar {
  width: 90%;
  min-height: 28px;
  top: 2px;
  font-size: var(--font-size-12);
  position: relative;
  color: var(--aui-main-colour);
  background-color: var(--aui-pale-background);
  border: 1px solid var(--aui-pale-border);
  padding: 0px 10px;
  box-sizing: border-box;
  border-radius: 20px;
}
.vueselector-search-bar:focus {
  border-color: var(--theme-color) !important;
}
.vueselector-searchbar-container {
  display: flex;
  width: 100%;
  padding: 0px 0px 10px 10px;
}
/* .vueselector-withsearchbar {
  height: 180px;
} */
.vueselector-manager-popup ::-webkit-scrollbar {
width: 10px;
}

/* Track */
.vueselector-manager-popup ::-webkit-scrollbar-track {
background: #f1f1f1; 
}

/* Handle */
.vueselector-manager-popup ::-webkit-scrollbar-thumb {
background: #888; 
}

/* Handle on hover */
.vueselector-manager-popup ::-webkit-scrollbar-thumb:hover {
background: #555; 
}

.vueselector-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
  padding-top: 10px;
  border-top: 1px solid var(--aui-pale-border);
}

*[tooltiphover]{
  cursor:help;
}

*[tooltiphover] > *[tooltip], *[tooltiphover] > *[tooltipleft], *[tooltiphover] > *[tooltipbelow]{
  display:none;
  position: fixed;
  z-index: 2;
  background-color: var(--aui-pale-background);
  border: 1px solid var(--aui-pale-border);
  color: var(--text-color)!important;
  font-size: var(--font-size-12);
  padding: 10px;
  box-sizing: border-box;
  border-radius: 6px;
  margin-left: 15px;
  margin-top: -11px;
  width: max-content;
  max-width: 140px;
}

*[tooltiphover] > *[tooltipleft]{
  right: 15px;
}

*[tooltipabsolute] > *[tooltip], *[tooltipabsolute] > *[tooltipleft], *[tooltipabsolute] > *[tooltipbelow]{
  position: absolute;
}

/* Right side */
*[tooltiphover] > *[tooltip]:before, *[tooltiphover] > *[tooltip]:after{
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid var(--aui-pale-background);
  left: -9px;
  top: 8px;
}

*[tooltiphover] > *[tooltip]:before{
  border-right-color: var(--aui-pale-border);
  border-top-width: 9px;
  border-bottom-width: 9px;
  border-right-width: 9px;
}

*[tooltiphover] > *[tooltip]:after{
  left: -8px;
  top: 9px;
}

/* Left side */
*[tooltiphover] > *[tooltipleft]:before, *[tooltiphover] > *[tooltipleft]:after{
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid var(--aui-pale-background);
  right: -9px;
  top: 8px;
}

*[tooltiphover] > *[tooltipleft]:before{
  border-left-color: var(--aui-pale-border);
  border-top-width: 9px;
  border-bottom-width: 9px;
  border-left-width: 9px;
}

*[tooltiphover] > *[tooltipleft]:after{
  right: -8px;
  top: 9px;
}

/* Below */
*[tooltiphover] > *[tooltipbelow]:before, *[tooltiphover] > *[tooltipbelow]:after{
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-bottom: 8px solid var(--aui-pale-background);
  left: 2px;
    top: -9px;
}

*[tooltiphover] > *[tooltipbelow]:before{
  border-bottom-color: var(--aui-pale-border);
  border-right-width: 9px;
  border-left-width: 9px;
  border-bottom-width: 9px;
}

*[tooltiphover] > *[tooltipbelow]:after{
  left: 3px;
  top: -8px;
}

*[tooltiphover] > *[tooltipbelow]{
  right: 0;
  left: -12px;
  top: 44px;
}

*[tooltiphover]:hover > *[tooltip], *[tooltiphover]:hover > *[tooltipleft], *[tooltiphover]:hover > *[tooltipbelow]{
  display:inline-block;
  /*-webkit-animation:fadeOut 1s;
  -webkit-animation-delay:5s;
  -webkit-animation-fill-mode:forwards;
  -moz-animation:fadeOut 1s;
  -moz-animation-delay:5s;
  -moz-animation-fill-mode:forwards;
  animation:fadeOut 1s;
  animation-delay:5s;
  animation-fill-mode:forwards;*/
}

@-webkit-keyframes fadeOut {
  from {
      opacity:1;
  }
  to {
      opacity:0;
  }
}
@-moz-keyframes fadeOut {
  from {
      opacity:1;
  }
  to {
      opacity:0;
  }
}
@keyframes fadeOut {
  from {
      opacity:1;
  }
  to {
      opacity:0;
  }
}