/* ===============  ROOT  =============== */

*
{
  font-family: "Unbounded", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  scroll-behavior: smooth;
  caret-color: #BDF323;
  box-sizing: border-box;
}

body
{
  margin: 0;
  padding: 0;
  background-color: #0C0C0C;
  overflow-x: hidden;
}

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

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

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

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

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

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

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

h1,
h2,
h3,
h4,
h5,
h6
{
  font-weight: 500;
  margin: 1rem 0;
}

h1
{
  font-size: 2.5rem;
}

h2
{
  font-size: 2rem;
}

h3
{
  font-size: 1.75rem;
}

h4,
h5
{
  font-size: 1.15rem;
}

h6
{
  font-size: 1rem;
}

p
{
  margin: 0.5rem 0;
  line-height: 170%;
  font-size: 1rem;
  font-weight: 400;
  opacity: 0.5;
}

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

strong
{
	font-weight: 600;
}

small
{
  font-size: 0.8rem;
}

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

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

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

nav
{
  font-weight: 500;
}

nav a
{
  color: #FFFFFF;
}

nav a:hover
{
  color: #FFFFFF;
}

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 
{
	width: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
}

input,
select,
textarea
{
  font-family: "Unbounded", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid #FFFFFF !important;
  outline: none;
  padding: 0.5rem 0;
}

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

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

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

.Invalid *
{
	color: #fff;
}

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

[data-object="Search"]
{
	margin-top:20px;
}

.InputSVG
{
	width: 140%;
	margin-left: -20%;
}

.IconInput span
{
	display: flex;
}

.IconInput input
{
	border-radius: 0 0.5rem 0.5rem 0;
}

.IconInput label
{
	height: 50px;
	width: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	border-radius: 0.5rem 0 0 0.5rem;
	background: #f0f2f5;
	box-shadow: 0 0 0 2px #a2a4a0;
	color: #0C2D48;
}

.IconInput label i 
{
	font-size: 24px;
	color: #0C2D48;
}

.RedIcon label
{
	background: #c92e2e;
}

.BlueIcon label
{
	background: #0C2D48;
}

.DarkBlueIcon label
{
	background: #0C2D48;
}

.YellowInput Input
{
	background: #ffdd5d;
	color: #111111;
}

/* 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: #BDF323;
  transition: all 0.3s;
}

a:hover
{
  color: #BDF323;
  opacity: .75;
}

a i 
{
	color: #0C0C0C;
}

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

button,
a.Button
{
  font-family: "Unbounded", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: #0C0C0C;
  background-color: #BDF323;
  padding: 1rem 2rem;
  font-weight: 700;
  font-size: 1rem;
  outline: none;
  border: none;
  transition: ease-in-out 0.25s;
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer;
  border-radius: 999rem;
  display: inline-flex;
}

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

button span
{
	color: #0C0C0C;
}

.SecondaryButton
{
  background-color: transparent;
  outline: #FFFFFF 2px solid;
}

.CircleButton 
{
	height: 45px;
	width: 45px;
	padding: 0.5rem;
	border-radius: 999rem;
	outline: 1px solid #0C2D48;
	transition: ease 200ms;
	background: #0C2D48cc
}

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

i
{
  color: #BDF323;
  font-size: 1.25rem;
}

img
{
  border: 0;
  -o-object-fit: contain;
  object-fit: contain;
  max-width: 100%;
  height: auto;
  display: block;
}

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

svg
{
  shape-rendering: auto;
}

iframe
{
	min-height: 400px;
}

.Logo
{
  fill: #FFFFFF;
  width: 50px;
}

.PieLoader i
{
	color: #2f3749;
	font-size: 3rem;
}

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

table,
tr 
{
	margin-top: 10px;
	border-collapse: collapse;
	border-radius: 8px;
	overflow: hidden;
	font-size: 1rem;
	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;
}

/* ===============  FOOTER  =============== */

footer
{
  color: #878787;
}

footer .Logo
{
  width: 350px;
}

form input
{
  color: #ffffff;
}

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

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

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

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

.Flex
{
  display: flex;
}

.Row,
.Column
{
  flex-direction: column;
}

.Inline
{
  display: inline-flex;
}

.Relative
{
  position: relative;
}

.Absolute
{
  position: absolute;
}

.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;
}

.AlignEnd
{
  align-items: end;
}

.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;
}

.FlexGrow1
{
	flex-grow: 1;
}

.FlexGrow2
{
	flex-grow: 2;
}

.FlexGrow3
{
	flex-grow: 3;
}

.ZIndex1
{
  z-index: 1;
}

.SectionPadding
{
  padding: 4rem 1rem;
}

/* ===============  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  =============== */

.Padding1
{
  padding: 1rem;
}

.Padding2
{
  padding: 2rem;
}

.Padding3
{
  padding: 3rem;
}

.PaddingTop
{
  padding-top: 1rem;
}

.PaddingRight
{
  padding-right: 1rem;
}

.PaddingBottom
{
  padding-bottom: 1rem;
}

.PaddingLeft
{
  padding-left: 1rem;
}

.PaddingBigger
{
  padding: 3rem 2rem;
}

/* =============== RESETS  =============== */

.NoPadding
{
  padding: 0;
}

.NoMargin
{
  margin: 0 !important;
}

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

.Width100
{
  width: 100%;
}

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

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

.MaxWidth350
{
  max-width: 350px;
  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  =============== */

.Eyebrow
{
  padding: 0.5rem 1rem;
  font-weight: 400;
  font-size: 0.9rem;
  max-width: -moz-max-content;
  max-width: max-content;
  border-radius: 999rem;
  margin-bottom: 1rem;
  background: #BDF323;
  color: #0C0C0C;
  font-size: 0.85rem;
}

.TextBox button:last-of-type,
.TextBox .Button:last-of-type
{
  margin-top: 2rem;
}

.BorderRadius
{
  border-radius: 1rem;
}

.BottomRadius 
{
	border-radius: 0 0 1.25rem 1.25rem;
}


.RoundedSquare
{
  border-radius: 0.813rem;
}

.Circle
{
  border-radius: 999rem;
}

.MainColour
{
  color: #BDF323;
}

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

.BlackText
{
  color: #0C0C0C;
}

.WhiteText
{
  color: white;
}

.GreyText
{
  color: #878787;
}

.CardInputs
{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.TextShadow
{
  text-shadow: 0px 0px 14px rgba(0,0,0,1);
}

.Shadow 
{
    border: none;
    height: fit-content;
    width: fit-content;
    box-shadow: 0px 6px 12px 0px rgba(27, 59, 119, 0.05), 0px 12px 30px 0px rgba(6, 47, 125, 0.05), 0px 1px 2px 0px rgba(7, 4, 146, 0.10);
}

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

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

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

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

.BackgroundSecondary
{
  background-color: #FFFFFF;
}

.BackgroundBlack
{
  background-color: #0C0C0C;
  color: #FFFFFF;
}

.BackgroundWhite
{
  background-color: #FFFFFF;
}

.BackgroundBlack2
{
  background-color: #1F1F1F;
  color: #FFFFFF;
}

.BackgroundGrey
{
  background-color: #878787;
}

/* ===============  CUSTOM STYLES  =============== */
.Tile
{
  background-color: #1F1F1F;
  color: #FFFFFF;
  width: 326px;
  overflow: clip;
  box-sizing: border-box;
}

.Tile img
{
  -o-object-fit: fill;
  object-fit: fill;
}

.Tile p
{
  font-size: 0.875rem;
}

.Logo
{
  width: 195px;
}

.Cards
{
  color: #FFFFFF;
  overflow: clip;
}

.Cards hr
{
  border-color: #878787;
}

.Icon
{
  background-color: #313131;
  padding: 0.5rem;
  color: #BDF323;
  width: 45px;
  height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.SemiCircle
{
  height: 2.5rem;
  width: 5rem;
  border-radius: 0 0 2.5rem 2.5rem;
  margin-left: auto;
  margin-right: auto;
}

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

.BackgroundImage
{
  background-image: url("/images/grain-texture.png");
  background-blend-mode: multiply;
  background-repeat: no-repeat, repeat;
}

.HeroImage
{
  transform: translateY(64px);
}

.Backing
{
  position: fixed;
  inset: 0 0 0 0;
  z-index: 999;
  -webkit-backdrop-filter: blur(35px) brightness(0.5);
  backdrop-filter: blur(35px) brightness(0.5);
}

/**********  SOFTWARE STYLINGS  **********/

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

dialog,
.Card,
.Notification 
{
  color: #111111;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 1px 3px #0003, 0 0 1px 1px #0001;
  z-index: 3;
}

/**********  DESKTOP RESPSONSIVE  **********/
@media only screen and (min-width: 960px)
{
  h1
  {
    font-size: 3.815rem;
  }

  h2
  {
    font-size: 3.052rem;
  }

  h3
  {
    font-size: 2.441rem;
  }

  h4
  {
    font-size: 1.563rem;
  }

  h5
  {
    font-size: 1.125rem;
  }

  h6
  {
    font-size: 1.25rem;
  }

  .SectionPadding
  {
    padding: 8rem 2rem;
  }

  .Row
  {
    flex-direction: row;
  }

  .Desktop
  {
    display: flex;
  }

  .Mobile
  {
    display: none !important;
  }

  .Tile
  {
    width: 326px;
    height: 326px;
  }

  .Cards
  {
    width: 434px;
  }

  .Icon
  {
    width: 65px;
    height: 65px;
  }

  .Logo
  {
    width: unset;
  }

  .MobileCenterText
  {
    text-align: unset;
  }

  .MobileJustifyCenter
  {
    justify-content: unset;
  }
  
  .HeroImage 
  {
	transform: translateY(128px);
  }
  
  .RowReverse
  {
	flex-direction: row-reverse;
  }

  .ColumnReverse
  {
	flex-direction: column-reverse;
  }
  
  .Sidebar 
  {
	width: 28%;
	top: 8vh;
	padding: 1rem;
	border-right: 1px solid #CDCDCD;
	overflow-y: overlay;
	border-bottom: unset;
  }
}