/*colour pallet*/
@import url(/styles/palette.min.css);



/* Default ILAR button */
.tb-btn-outline,
.tb-btn-filled {

	text-decoration: none;
	text-align: center;
	font-size: 16px;
	letter-spacing: 0;
	user-select: none;
	justify-content: center;
	border-radius: 6px;
	padding: 4px 8px;
	user-select: none;
	cursor: pointer;
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	align-items: center;
	vertical-align: middle;
	border: 1px solid;
	transition: 60ms ease-in-out;

	background-color: var(--ilar-btn-background);
	color: var(--ilar-btn-primary-text);
	border-color: var(--ilar-btn-border);
}

/* Default button when not "selected" and :hover */
.tb-btn-outline:hover {
	background-color: var(--ilar-btn-hover-background);
	color: var(--ilar-btn-hover-text);
	border-color: var(--ilar-btn-hover-border);
}

/* Default button when not "selected" and :active */
.tb-btn-outline:active,
.tb-btn-outline.active {
	background-color: var(--ilar-btn-active-background);
	color: var(--ilar-btn-active-text);
	border-color: var(--ilar-btn-active-border);
}

/* Default button when "selected" and :hover */
.tb-btn-outline.active:hover {
	background-color: var(--ilar-btn-selected-hover-background);
	color: var(--ilar-btn-selected-hover-text);
	border-color: var(--ilar-btn-selected-hover-border);
}

/* Default button when "selected" and :hover:active */
.tb-btn-outline.active:hover:active {
	background-color: var(--ilar-btn-hover-active-background);
	color: var(--ilar-btn-hover-active-text);
	border-color: var(--ilar-btn-hover-active-border);
}



/* Default ILAR button - filled*/
.tb-btn-filled {
	background-color: var(--ilar-primary);
	color: var(---ilar-btn-primary-text);
	border-color: var(--ilar-btn-primary-border);
}

/* Default button when not "selected" and :hover */
.tb-btn-filled:hover {
	background-color: var(--ilar-dark-primary);
	color: var(--ilar-btn-primary-hover-text);
	border-color: var(--ilar-btn-primary-hover-border);
}

/* Default button when not "selected" and :active */
.tb-btn-filled:active,
.tb-btn-filled.active {
	background-color: var(--ilar-dark-primary);
	color: var(--ilar-swatch-grey-7);
	border-color: var(--ilar-btn-primary-active-border);
}

/* Default button when "selected" and :hover */
.tb-btn-filled.active:hover {
	background-color: var(--ilar-darker-primary);
	color: var(--ilar-swatch-grey-7);
	border-color: var(--ilar-btn-primary-selected-hover-border);
}

/* Default button when "selected" and :hover:active */
.tb-btn-filled.active:hover:active,
.tb-btn-filled:hover:active {
	background-color: var(--ilar-darker-primary);
	color: var(--ilar-btn-primary-hover-active-text);
	border-color: var(--ilar-btn-primary-hover-active-border);
}



/*ILAR Styled Checkbox*/
.ilar-checkbox {
	user-select: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	width: 24px;
	vertical-align: middle;
	height: 24px;
	z-index: 10;
	display: inline-block;
	cursor: pointer;
	margin: 0 10px;
}

.ilar-checkbox.ilar-checkbox-unchecked {
	background-image: url(/editor-popups/sys/img/tickbox-unticked.svg);
}

.ilar-checkbox.ilar-checkbox-checked {
	background-image: url(/editor-popups/sys/img/tickbox-ticked.svg);
}



/*ILAR Styled radiobutton*/
.ilar-radiobutton {
	user-select: none;
	/*adjust this if it gets funky on standard dpim screens*/
	width: 21px;
	aspect-ratio: 1;
	display: inline-block;
	cursor: pointer;
	border: 1px solid var(--ilar-swatch-grey-6);
	border-radius: 100%;
	align-content: center;
	position: relative;
	margin: 0 10px;
}

.ilar-radiobutton .ilar-radiobutton-dot {
	background-color: transparent;
	border-radius: 100%;
	aspect-ratio: 1;
	width: calc(100% - 6px);
	position: absolute;
	top: 0px;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	transition: background-color 120ms ease-in-out;
}

.ilar-radiobutton.ilar-radiobutton-selected .ilar-radiobutton-dot {
	background-color: var(--ilar-swatch-green);
}




/*ILAR style number input*/
.inc-dec-buttons {
	width: 12px;
	height: 22px;
	border: 1px solid var(--ilar-swatch-grey-4);
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	/* display: flex; */
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	display: inline-block;
	margin-left: -4.1px;
	vertical-align: middle;
	position: relative;
	user-select: none;
}

.inc-button img,
.dec-button img {
	width: 5px;
}

.inc-button {
	text-align: center;
	display: flex;
	border-bottom: 1px solid var(--ilar-swatch-grey-4);
	height: 50%;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	position: absolute;
	top: 0;
	bottom: 50%;
	left: 0;
	right: 0;
}

.dec-button {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	position: absolute;
	top: 50%;
	bottom: 0;
	left: 0;
	right: 0;
}

ilar-number-input input[type="number"] {
	-webkit-appearance: textfield;
	-moz-appearance: textfield;
	appearance: textfield;
	vertical-align: middle;
	display: inline-block;
	width: 23px;
	height: 20px;
	border-radius: 4px;
	border: 1px solid var(--ilar-swatch-grey-4);
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right: 0;
	text-align: center;
	outline: none !important;
	margin-left: 5px;
	margin-right: 4px;
}

ilar-number-input input[type=number]::-webkit-inner-spin-button,
ilar-number-input input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
}