/* ===============  ROOT  =============== */
*
{
	font-optical-sizing: auto;
	font-style: normal;
	scroll-behavior: smooth;
	caret-color: #e28011;
	box-sizing: content-box;
	background: none;
}

body
{
	font-family: "SUSE", sans-serif;
  	margin: 0;
  	padding: 0;
  	font-size: 1rem;
}

* ::after,
* ::before 
{
	box-sizing: border-box;
}

*::-webkit-scrollbar
{
  	width: 10px;
}

* ::-webkit-scrollbar-thumb
{
  	background: #e28011;
  	border-radius: 10px;
}

* ::-webkit-scrollbar-thumb:hover
{
  	background: #e28011;
}

::-moz-selection
{
  	color: white;
  	background: #e28011;
}

* ::selection
{
  	color: white;
  	background: #e28011;
}

/* ===============  FONT DEFAULTS  =============== */

h1
{
	font-size: 400%;
	font-weight: 600;
	margin: 1rem 0;
}

h2
{
	font-size: 200%;
	margin: 1rem 0;
}

h3
{
	font-size: 140%;
	margin: 1rem 0;
}

h4,
h5
{
	font-size: 140%;
	margin: 1rem 0;
}

h6
{
	font-size: 100%;
	margin: 1rem 0;
}

p
{
	font-size: 112%;
  	margin: 1rem 0;
}

p:last-of-type
{
  	margin: 0 0 1rem 0;
}

strong
{
	font-weight: 600;
}

small
{
  	font-size: 0.8rem;
}

b,
.Bold
{
  	font-weight: 700;
}

.Underlined
{
	text-decoration: underline;
}

.Icon
{
	font-size: 126%;
	padding: 0.16em;
}

/* ===============  DEFAULTS  =============== */

header
{
  	padding: 1rem;
  	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

details
{
	cursor: pointer;
	border-radius: 8px;
	transition: ease-in-out 0.2s;
	padding: 0.5rem;
}

details:hover
{
	background: #f0f2f5; 
}

details[open] 
{
	background: #f0f2f5; 
}

summary 
{
	padding: 1rem;
	font-size: 1rem;
}

summary::marker
{
	content: "";
}

details[open] summary
{
	border-bottom: 1px solid #aaa;
	margin-bottom: 1rem;
}

/* ===============  INPUT DEFAULTS  =============== */

form 
{

}

input,
select,
textarea
{
	width: 100%;
	font-size: 100%;
	border: 1px solid #cdcdcd;
	padding: 16px 0;
	text-indent: 16px;
	background: #fefefe;
	border-radius: 8px;
	outline: none;
}

input:focus,
select:focus,
textarea:focus 
{
	outline-color: #e28011;
}

textarea 
{
	min-height: 100px;
	resize: none;
}

input:disabled
{
	cursor: not-allowed;
	background: #333;
	color: #fefefe;
}

label
{
	display:flex;
	margin-bottom: 10px;
}

output.Invalid 
{
	display: block;
	background: #c92e2e;
	width: 100%;
	padding: 6px;
	border-radius: 10px;
	margin-top: 2px;
	color: #fff;
}

[data-classificationvisual="InputText"],
[data-classificationvisual="InputTextArea"],
[data-classificationvisual="InputSelect"],
[data-classificationvisual="InputNumber"],
[data-classificationvisual="InputPassword"]
{
	display: block;
	margin-bottom: 10px;
}

/* ANY BUTTON INSIDE AN INPUT */
[data-classificationvisual="InputText"] > span > [data-classificationvisual="Button"]
{
	width: 30px;
	position: absolute;
	margin-top: -75px;
	right: 0;
	margin-right: 54px;
}

/* ===============  A LINKS  =============== */

a
{
  	text-decoration: none;
  	color: #e28011;
  	transition: all 0.3s;
}

a:hover
{
  	opacity: .75;
}

/* ===============  BUTTONS  =============== */

button,
.Button > a
{
	display: inline-flex;
    align-items: center;
    justify-content: space-between; 
    
    color: #333;
	font-size: 100%;
  	cursor: pointer;
  	border: none;
  	font-weight: 600;
  	padding:0;
  	
  	width: auto;
  	overflow: hidden;
}

button:hover,
.Button:hover
{
	transition: ease-in-out 0.1s;
	opacity: 0.8;
}

.TextButton
{
	padding: 0 10px;
}

button.PaddingButton,
.Button.PaddingButton
{
	padding: 0.6rem 1rem;
}


/* =============== IMAGES & ICONS =============== */

img
{
  	border: 0;
  	-o-object-fit: contain;
  	object-fit: contain;
}

figure 
{
	width: 100%;
	overflow: hidden;
}

svg
{
  	shape-rendering: auto;
}


/* =============== TABLE =============== */

table,
tr 
{
	margin-top: 10px;
	border-collapse: collapse;
	border-radius: 8px;
	overflow: hidden;
	font-size: 100%;
	width: 100%;
}

tr[data-selectable] > td
{
	background: #ac5825;
	color: #f5f5f5;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

th,
td
{
	background-color: #f0f2f5;
	color: #333;
	padding: 8px 8px;
	-moz-box-shadow: inset 0 0 0 0.4px #e1e1e1;
	-webkit-box-shadow: inset 0 0 0 0.4px #e1e1e1;
	box-shadow: inset 0 0 0 0.4px #e1e1e1;
}

th
{
	background: #0C2D48;
	color: #f5f5f5;
	font-weight: 600;
}

tr.Selected > td
{
	background: #2567A7;
	color: #f5f5f5;
}

tr.Red > td
{
	background: red;
}

tr.Green > td
{
	background: red;
}



/* ===============  BULLET POINTS  =============== */

ul,
ol
{
	list-style-type: none;
}

li
{
	font-size: 100%;
	line-height: 160%;
	margin-right: 0;
}



/* ===============  LAYOUTS  =============== */

.Flex
{
  	display: flex;
}

.Row
{
	flex-direction: row;
}

.Column
{
	flex-direction: column;
}

.ColumnRow
{
	flex-direction: column;
}

.Top
{
  	top: 0;
}

.Left
{
  	left: 0;
}

.Bottom
{
  	bottom: 0;
}

.Right
{
  	right: 0;
}

.Wrap
{
  	flex-wrap: wrap;
}

.Center
{
  	margin: 0 auto;
}

.CenterVertically
{
  	margin: auto;
}

.AlignCenter
{
  	align-items: center;
}

.CenterText
{
  	text-align: center;
}

.MobileJustifyCenter
{
  	justify-content: center;
}

.MobileCenterText
{
  	text-align: center;
}

.JustifyCenter
{
  	justify-content: center;
}

.JustifyBetween
{
  	justify-content: space-between;
}

.JustifyEvenly
{
  	justify-content: space-evenly;
}

.JustifyAround
{
  	justify-content: space-around;
}

.MoveRight
{
	justify-content: right;
}

.FlexGrow1
{
	flex-grow: 1;
}

.FlexGrow2
{
	flex-grow: 2;
}

.FlexGrow3
{
	flex-grow: 3;
}

.ZIndex1
{
  	z-index: 1;
}



/* ===============  GAPS  =============== */

.Gap05
{
  	gap: 0.5rem;
}

.Gap1
{
  	gap: 1rem;
}

.Gap15
{
  	gap: 1.5rem;
}

.Gap2
{
  	gap: 2rem;
}

.Gap3
{
  	gap: 3rem;
}

/* ===============  HIDDEN  =============== */

.Hidden
{
  	display: none;
}

.Desktop
{
  	display: none;
}

/* ===============  PADDINGS  =============== */

.PaddingTop
{
	padding-top: 1.6rem;
}

.Padding1
{
  	padding: 0.6rem;
}

.Padding2
{
  	padding: 1.6rem;
}

/* ===============  WIDTHS  =============== */

.Width100
{
  	width: 100%;
}

.WidthFill
{
  	width: -webkit-fill-available;
}

.WidthFitContent
{
  	width: -moz-fit-content;
  	width: fit-content;
}

.ImageFixing
{
	max-height: 360px;
    overflow: hidden;
}

.MaxWidth400
{
  	max-width: 400px;
  	width: -webkit-fill-available;
}

.MaxWidth640
{
    max-width: 640px;
    width: -webkit-fill-available;

}

.MaxWidth700
{
  	max-width: 700px;
 	width: -webkit-fill-available;
}

.MaxWidth1125
{
  	max-width: 1125px;
	width: -webkit-fill-available;
}

.MaxWidth1400
{
	max-width: 1400px;
	width: -webkit-fill-available;
}

/* ===============  HEIGHTS  =============== */

.MinHeight500
{
	min-height: 500px;
}

.Height100 
{
	height: 100vh;
}

.HeightAuto
{
	height: 100%;
	min-height:0;
}

/* ===============  GENERAL STYLINGS  =============== */

.MainColour
{
  	color: #e28011;
}

.LandingText 
{
	color: #868686;
	opacity: 1;
}

.BlackText
{
  	color: #0C0C0C;
}

.WhiteText
{
  	color: white;
}

.GreyText
{
  	color: #878787;
}

.Success
{
	background: #069c56;
	color: #f9f9f9;
}

.Warning
{
	background: #ff681e;
	color: #f9f9f9;
}

.Error
{
	background: #d3212c;
	color: #f9f9f9;
}

/* ===============  BACKGROUND COLOURS  =============== */
.BackgroundPrimary
{
  	background-color: #e28011;
	color: #fefefe;
}

.BackgroundSecondary
{
  	background-color: #00796b;
 	color: #e0f7fa;
}

.BackgroundPrimaryLight
{
	background-color: #fcb76a;
	color: #e28011;
}

.BackgroundSecondaryLight
{
	color: #00796b;
	background-color: #e0f7fa;
}

.BackgroundBlack
{
  	background-color: #222222;
  	color: #fefefe;
}

.BackgroundWhite
{
  	background-color: #FFFFFF;
}

.BackgroundGrey
{
  	background-color: #f6f4f0;
}

.Shadow
{
    box-shadow: 0px 2px 2px 0px rgba(27, 59, 119, 0.05), 0px 6px 10px 0px rgba(6, 47, 125, 0.05), 0px 1px 2px 0px rgba(7, 4, 146, 0.10);
}

.Border
{
	border: 1px solid #212121;
}

.BorderBottom
{
	border-bottom: 2px solid #333;
}

/* ===============  CUSTOM STYLES  =============== */
.Logo
{
	font-family: "SUSE", sans-serif;
	font-size: 300%;
    font-weight: 900;
}

.RoundCorner
{
	border-radius: 24px;
}

.Round
{
	aspect-ratio: 1 / 1;
	display: inline-flex;
  	justify-content: center;
  	align-items: center;
  	padding: 0.5em;
  	border-radius: 50%;
  	overflow: hidden;
}

.Flag
{
	position: relative;
    height: 20px;
    width: 20px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    box-shadow: 0 1px 3px #0003, 0 0 1px 1px #0001;
}

.English
{
    background-color: #fff;
}

.English::before,
.English::after 
{
    content: '';
    position: absolute;
    background-color: #c8102e; /* Red color */
}

.English::before 
{
    width: 100%;
    height: 6px; /* Horizontal cross */
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.English::after 
{
    width: 6px; /* Vertical cross */
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.Dutch
{
	background: linear-gradient(to bottom, #ae1c28 33.33%, #fff 33.33% 66.66%, #21468b 66.66%);
}

.Spanish
{
	background: linear-gradient(to bottom,
        #AD1519 25%, /* Red */
        #FABD00 25% 75%, /* Yellow */
        #AD1519 75% /* Red */
    );
}

.French
{
	 background: linear-gradient(to right,
        #002654 33.333%, /* Blue */
        #FFFFFF 33.333% 66.666%, /* White */
        #ED2939 66.666% /* Red */
    );
}

.German
{
	background: linear-gradient(to bottom,
        #000000 33.33%, /* Black */
        #D00D18 33.33% 66.66%, /* Red */
        #FFCE00 66.66% /* Yellow */
    );
}

.Hungarian 
{
    background: linear-gradient(to bottom,
        #CE2939 33.33%, /* Red */
        #FFFFFF 33.33% 66.66%, /* White */
        #477050 66.66% /* Green */
    );
}

.Tag
{
  	border-radius: 1rem 1rem 0 0;
  	background-color: #e28011;
  	color: #000;
  	padding: 0.5rem 1rem;
  	font-size: 0.8rem;
  	transform: translate(32px);
}

.Menu
{
	position: absolute;
	margin-top: 86px;
	max-width: 360px;
	margin-left: -260px;
	z-index: 10;
}

/*
dialog
{
	display: block;
	width: 90vw;
	margin: 6vh 5%;
	border: none;
	position: fixed;
	z-index: 5;
	height: 80vh;
	overflow: auto;
	padding: 0;
	left: 0;
    top: 0;
}

.DialogBackground
{
	width: 100%;
	height: 100vh;
	z-index: 2;
	position: fixed;
	opacity: 0.2;
	background: #333;
	-webkit-filter: blur(3px);
	filter: blur(3px);
	cursor: pointer;
	left: 0;
    top: 0;
}

.DialogBackground:hover
{
	background: #333;
	opacity: 0.6;
	
	-webkit-filter: blur(1px);
    filter: blur(1px);
}

button.CloseDialog
{
	position: fixed;
	top: 10vh;
	width: 52px;
	right: 3vw;
	z-index: 6;
}

button.CloseDialog > i
{
	font-size: 30px;
}

button.CloseDialog:hover
{
	background: #8a1b07;
	color: #edf1f5
}
*/

.SoftwareContent 
{
  	overflow-y: overlay;
  	height: 100vh;
}


/**********  DESKTOP RESPSONSIVE  **********/
@media only screen and (min-width: 960px)
{
 
   .ColumnRow
   {
	   flex-direction: row;
   }
  
}