/* ------------------------------------------------- */
/* Variables */
/* ------------------------------------------------- */
:root{
	--dashboard-master-ui-background-faded: rgb(1 1 1 / 50%);
	--dashboard-master-ui-background-color: var(--main-ui-color-background, white);
	--dashboard-master-ui-background-color-highlight: var(--main-ui-color-background-highlight, #e9eff4);
	--dashboard-master-ui-buttons-size: 40px;
	--dashboard-master-ui-buttons-color-normal: var(--main-ui-color-selected, var(--main-ui-color-accent, var(--main-ui-color-default, white)));
	--dashboard-master-ui-buttons-color-hover: var(--main-ui-color-border, var(--main-ui-color-button-hover, lightgray));
	--dashboard-master-ui-buttons-color-clicked: var(--main-ui-color-highlighted, var(--main-ui-color-accent, var(--main-ui-color-default, white)));
}

/* ------------------------------------------------- */
/* Elements */
/* ------------------------------------------------- */
img{
	width: 100%;
	height: auto;
}

/* ------------------------------------------------- */
/* Popups */
/* ------------------------------------------------- */
.popup{
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: rgb(1 1 1 / 50%);
}
	
.popupCloseButton{
	width: var(--dashboard-master-ui-buttons-size);
	height: var(--dashboard-master-ui-buttons-size);
	display: block;
	top: 0;
	right: 0;
	margin: 0px;
	background-color: var(--dashboard-master-ui-buttons-color);
	border: 7px solid transparent;
	box-sizing: border-box;
	overflow: hidden;
	cursor: pointer;
}

.popupCloseButton:hover{
	background-color: var(--dashboard-master-ui-buttons-color-hover);
}

.uiImageColor {
	transform: translate(0%, 0%);
}

/* ------------------------------------------------- */
/* Utility Classes */
/* ------------------------------------------------- */
.hidden
{
	display: none !important;
}

.flexboxColumn{
	display: flex;
	flex-direction: column;
	margin: 0px;
}

.flexboxRow{
	display: flex;
	flex-direction: row;
	margin: 0px;
}

.flexboxButtonsGap{
	gap: 10px;
}

.roundedCorners{
	border-radius: var(--dashboard-master-ui-buttons-size, 40px);
}

.roundedCornersSmall{
	/* border-radius: calc(40px / 2); */
	border-radius: calc(var(--dashboard-master-ui-buttons-size, 40px) / 2);
}

.position-top
{
	top: 0px;
}

.position-bottom
{
	/* margin: auto; */
	bottom: 0px;
}

.position-right
{
	right: 0px;
}

.position-left
{
	left: 0px;
}

.position-centre
{
	/* display:block; */
	margin: 0px auto;
}

/* ------------------------------------------------- */
/* Logos */
/* ------------------------------------------------- */
#logo3dw{
    display: flex;
    flex-direction: column;
    width: 60px;
    z-index: 999994;
    opacity: 0.5;
	margin: 0px 10px 20px 0px;
    position: absolute;
}

.mobile #logo3dw{
    display: none;
}

#logo3dw:hover{
	opacity: 1;
}

#logo3dwImage{
	width: 100%;
    height: auto;
}

#logo3dwCookies{
	font-size: 70%;
    text-align: center;
    background-color: lightgray;
    padding: 2px 0px;
	color: black;
	text-decoration: auto;
}