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

@font-face {
  font-display: block;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm45xW5rygbi49cX.woff2') format('woff2');
}

/* montserrat-500 */
@font-face {
  font-display: block;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm45xW5rygbi49cX.woff2') format('woff2');
}

/* montserrat-600 */
@font-face {
  font-display: block;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm45xW5rygbi49cX.woff2') format('woff2');
}

/* montserrat-700 */
@font-face {
  font-display: block;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm45xW5rygbi49cX.woff2') format('woff2');
}

/* quicksand-700 */
@font-face {
  font-display: block;
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  src: url('https://fonts.gstatic.com/s/quicksand/v30/6xKhdSpJJ92I9MWACUoHBTfypb6CRXeZf62Y.woff2') format('woff2');
}

/* =============== DEFAULT =============== */

* {
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  box-sizing: border-box;
  scroll-behavior: smooth;
  caret-color: #0a101e;
  margin: 0;
  padding: 0;
}

body
{
	display: flex;
	flex-direction: column;
	background: #fff;
	font-size: 1rem;
}

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

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

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

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

::-moz-selection 
{
	color: white;
	background: #0a101e;
}

::selection 
{
	color: white;
	background: #0a101e;
}


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

h1 
{
	font-size: 2em;
	line-height: 120%;
	font-weight: 600;
	-webkit-text-stroke: 0.25px;
	letter-spacing: .5px;
}

h2 
{
	font-size: 130%;
	line-height: 140%;
	font-weight: 600;
	 -webkit-text-stroke: 0.25px;
	letter-spacing: .5px;
}

h3 
{
	font-size: 130%;
	font-weight: 600;
	 -webkit-text-stroke: 0.25px;
	letter-spacing: .5px;
}

h4 
{
	font-size: 110%;
	font-weight: 600;
	 -webkit-text-stroke: 0.25px;
	letter-spacing: .5px;
}

h5 
{
	font-size: 100%;
	font-weight: 600;
}

h6 
{
	font-size: 90%;
    font-weight: 600;
    width: max-content;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 14px;
    padding-right: 14px;  
    margin-bottom: 6px;
}

hr
{
	opacity: 0.4;
}

p
{
	font-size: 1rem;
	line-height: 150%;
}

b 
{
	font-weight: 600;
}

em
{
	font-style: italic;
}

.Logo {
    color: #F5F5F5;
}

.Logo > span
{
  	font-family: "Quicksand", sans-serif;
    font-size: 2.8em;
    font-weight: 700;
    margin-left: 8px;
}

small 
{
	font-size: 0.75rem;
}

strong
{
	font-weight: 600;
}

a 
{
	color: #0a101e;
	text-decoration: none;
	font-weight: 600;
	transition: ease-in-out 0.1s;
}

a:hover
{
	opacity: 0.8;
}

a:hover *
{
	cursor: pointer;
}

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

li
{
	font-size: 1rem;
	margin-right: 0;
}

i
{
	font-size: 18px;
	margin: 6px;
}

/* ============== IMAGES ================ */

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

img 
{
	object-fit: contain;
	width: 100%;
	height: 100%;
}

iframe
{
	min-height: 400px;
}

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

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

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

tr[data-selectable] > td:first-of-type
{
	background: #11182B;
	color: #f9f9f9;
}

th,
td
{
	background-color: #edf1f5;
	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: #303030;
	color: #f5f5f5;
	font-weight: 600;
}

tr.Selected > td
{
	background: #11182B90;
	color: #f5f5f5;
}

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

.TextUnderline
{
	text-decoration: underline;
}

.GreyText 
{
	display: inline-block;
	color: #888;
}

.BlackText 
{
	color: #000;
}

tr.Red > td
{
	background: red;
}

tr.Green > td
{
	background: red;
}

/* =============== FORM & INPUTS =============== */

form 
{
	width: 100%;
	
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
}

input,
select,
textarea,
button,
.Button
{
	display: flex;
	
	width: 100%;
	max-height: 50px;

	border: none;
	font-size: 1rem;

	outline: none;

	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15), 0 -2px 5px rgba(0, 0, 0, 0.05);
	border-radius: 0.5rem;
	padding: 1rem;

	align-items: center;
	justify-content: center;
	
	text-decoration: none;
}

.Button.Thin
{
	padding: 0.5rem;
	font-size: 1rem;
	height: auto;
	margin: 0;
}

input,
select,
textarea
{
	background-color: #edf1f5;
	color: #202122;
}

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

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

button,
.Button
{
	font-size:1.2rem;
	background-color: #11182B;
	color: #ffffff;
	margin-bottom: 10px;
	font-weight: 700;
}


.Options
{
	width:100%;
	display: flex;
	justify-content: space-between;
	
	 margin-bottom:10px;
	 margin-top: 6px;
}

.Options input 
{
	display:none;
}

.Options.hidden > label,
.Options.hidden > input
{ 
	display:none;
}

.Options label 
{
	background: #e0e4e6;
	color: #4f5154;
	width: 50%;
	margin-left: 4px;
	padding: 6px;

	-webkit-box-shadow: 0 0 1px #00000080;
	-moz-box-shadow: 0 0 1px #00000080;
	box-shadow: 0 0 1px #00000080;

	border-radius: 10px;

	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.Options label:hover 
{
	cursor: pointer;
	transition: 0.2s;
	color: #f9f9f9;
}

.Options input:checked + label 
{
	background: #11182B;
	color: #f9f9f9;
}

.Options input:disabled + label,
input[type="file"]:disabled
{
	background: #666;
	color: #f9f9f9;
}


input:disabled::file-selector-button
{
	display:none;
}

.Options input:disabled:checked + label
{
	background: #1Db954;
}

.Options input + label:hover 
{
  	background: #0a101e;
    transition: 0.2s;
}

.Options input:disabled + label:hover,
input:disabled:hover
{
	cursor: default;
}

.Options input:disabled + label:hover
{
	background: #666;
	color: #f9f9f9;
}

.Options input:disabled:checked + label:hover
{
	background: #1Db954;
	color: #f9f9f9;
}

button:hover,
.Button:hover
{
	cursor: pointer;
	opacity: 0.8;
}

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

.RegPlate input
{
	font-family: 'Oswald', sans-serif;
	letter-spacing: 2px;
	font-weight: 700;
	font-size: 1.4em;
	text-transform: uppercase;
}

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

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

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

.IconInput span
{
	display: flex;
	align-items: center;
}

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

.IconInput label
{
	margin-top: -10px;
	height: 50px;
	width: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	border-radius: 0.5rem 0 0 0.5rem;
	background: #333;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 -2px 5px rgba(0, 0, 0, 0.1);
	border: solid 2px #92a9bf;
	color: #fff;
}

.IconInput label i 
{
	font-size: 24px;
}

.RedIcon label
{
	background: #c92e2e;
}

.BlueIcon label
{
	background: #4168a2;
}

.DarkBlueIcon label
{
	background: #11182B;
}

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

/* ANY BUTTON INSIDE AN INPUT */
[data-classificationvisual="InputText"] > span
{
    display: flex;
	align-items: center;
}	

.CTA
{
	background: #97c41d;
	color: #ffffff;
}

.Uppercase input 
{
	text-transform: uppercase;
}

/* =============== BASE & LAYOUT =============== */

header 
{
	width: 100%;
	padding: 0.8rem;
	justify-content: space-between;
}

header:before 
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 69vh;
    max-height: 700px;
    background: linear-gradient(144deg, #11182B 15%, #0a101e 100%);
    clip-path: ellipse(200% 100% at 50% 0);
    z-index: -1;
}


header nav a 
{
	padding: 1.25rem;
	width: 100%;
}

nav
{
	font-weight: 600;
}

nav button,
nav .Button
{
	margin: 20px;
	padding: 12px 10%;
}

.FilterAndSort
{
	width: 100%;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	border-radius:10px;
	margin-bottom: 10px;
}

.Menu > div
{
	position: absolute;
    margin-top: 75px;
    margin-left: -256px;
    width: 250px;
}

.Menu > div > div:before
{
	position: absolute;
    margin-top: -30px;
    margin-right: -220px;
	content: " "; 
	width: 0; 
  	height: 0; 
  	border-left: 12px solid transparent;
  	border-right: 12px solid transparent;
  	border-bottom: 12px solid #f9f9f9;
}

.Menu > button:hover + div,
.Menu > div:hover
{
	visibility: unset;
}

.Sidebar
{
	border-bottom: 1px solid #cdcdcd;
	padding: 0.4rem;
}

main 
{
	background: #f1f1f1;
	flex-grow: 1;
	overflow-x: hidden;
}

main .Container 
{
	width: 90%;
	margin: 10px auto;
}

.Bottom0
{
	bottom: 0;
}

@keyframes FadeOut 
{
   0%
   {
   		opacity: 1;
   }
   70%
   {
   		opacity: 1;
   }
   100%
   {
   		opacity: 0;
   	} 
}

.Shadow
{
	border: none;
	height: fit-content;
	width: fit-content;
	box-shadow: 0 1px 3px #0003, 0 0 1px 1px #0001;
}

.DropShadow
{
	filter:drop-shadow(4px 8px 14px #000a);
}

.DialogBackground,
.ProgressBar
{
	width: 100%;
	height: 100vh;
	position: fixed;
}

.DialogBackground
{
	z-index: 2;
	opacity: 0.2;
	cursor: pointer;
	background: #11182B;
	-webkit-filter: blur(3px);
	filter: blur(3px);
}

.ProgressBar
{
	z-index: 9;
	background: #11182B44;
	backdrop-filter: blur(3px);
}

.ProgressBar i
{
	font-size: 3rem;
}

.DialogBackground:not(.ProgressBar):hover
{
	background: #11182B;
	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
}

details:hover
{
	background: #fefefeaa;
}

details[open] 
{
	transition: ease-in-out 0.2s;
}

summary 
{
	position: relative;
	cursor: pointer;
	padding: 1rem;
	font-size: 1rem;
}

summary > span:first-of-type
{
	margin-left: 4px;
}

summary > span:nth-child(2)
{
	margin-top: 4px;
}

summary > span:not(:first-of-type)
{
	display: block;
	margin-left: 24px;
}

summary::marker 
{
	font-family: 'Font Awesome 5 Free';
	font-weight: bold;
	color: #0a101e;
	font-size: 1rem;
	content: '\2b';
}

details[open] summary:after
{
	content: "";
	width: 95%;
	height: 1px;
	background: #ddd;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

input[type="file"],
input::file-selector-button
{
	padding: 0.4rem;
}

input[type="file"]:not(disabled),
input::file-selector-button
{
	cursor: pointer;
}

input::file-selector-button
{
  border: none;
	box-shadow: 0 1px 3px #0003, 0 0 1px 1px #0001;
  border-radius: 6px;
	background: #11182B;
	color: #edf1f5;
}

input::file-selector-button:hover
{
	opacity: 0.6;
}


details[open] summary::marker 
{
	content: '\f068';
}

footer
{
	width: 100%;
	padding: 30px 0 40px 0;
	background: #222;
	color: #F5F5F5;
	text-align: center;
}

footer label 
{
	margin-bottom: 1rem;
}

.Flex 
{
	display: flex;
}

.FlexGrow1
{
	flex-grow: 1;
}

.FlexGrow2
{
	flex-grow: 2;
}

.FlexGrow3
{
	flex-grow: 3;
}

.FlexShrink1
{
	flex-shrink: 1;
}

.FlexShrink2
{
	flex-shrink: 2;
}

.Inline 
{
	display: inline-flex;
}

.Row,
.RowColumn
{
	flex-direction: row;
}

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

.RowReverse,
.ColumnReverse 
{
	flex-direction: column;
}

.ColumnReverseRow
{
	flex-direction: column-reverse;
}

.Wrap 
{
	flex-wrap: wrap;
}

.Padding 
{
	padding: 2vh;
}

.PaddingTop
{
	padding-top: 2vh;
}

.PaddingBottom
{
	padding-bottom: 2vh;
}

.PaddingLeft
{
	padding-left: 2vh;
}

.PaddingRight
{
	padding-right: 2vh;
}

.PaddingSection
{
	padding-top: 6vh;
	padding-bottom: 6vh;
}

.Relative 
{
	position: relative;
}

.Absolute 
{
	position: absolute;
}

.AlignCenter 
{
	align-items: center;
}

.AlignStart
{
	align-self: flex-start;
}

.AlignEnd
{
	align-self: flex-end;
}

.AlignSelfCenter
{
	align-self: center;
}

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

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

.JustifyCenter 
{
	justify-content: center;
}

.ScreenCenter 
{
	margin: auto;
}

.Center 
{
	margin: 0 auto;
}

.Gap05 
{
	gap: .5rem;
}

.Gap1 
{
	gap: 1rem;
}

.Gap2 
{
	gap: 2rem;
}

.OverflowAuto
{
	overflow: auto;
}

.Height100 
{
	height: 100vh;
}

.AutoHeight
{
	height: auto;
}

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

.WidthIcon
{
	margin: 0;
	width: 18px;
}

.WidthIconLarge
{
	margin: 0;
	width: 30px;
	height: 30px;
	font-size: 1.8rem;
}

.FontWeight500
{
	font-weight: 500;
}

.FontWeight700
{
	font-weight: 700;
}

.FontSize120
{
	font-size: 120%;
}

.FontSize150
{
	font-size: 150%;
}

.Width30
{
	width: 30%;
}

.Width40
{
	width: 40%;
}

.Width50
{
	width: 50%;
}

.Width60
{
	width: 60%;
}

.Width100 
{
	width: 100%;
}

.WidthFitContent
{
	width: fit-content;
}

.MaxHeight100
{
	max-height: 100px;
}

.MaxWidth150
{
	max-width: 150px;
}

.MaxWidth200
{
	max-width: 200px;
}

.MaxWidth300
{
	max-width: 300px;
}

.MaxWidth400
{
	max-width: 400px;
}

.MaxWidth500 
{
	max-width: 500px;
}

.MaxWidth600 
{
	max-width: 600px;
}

.MaxWidth750 
{
	max-width: 750px;
}

.MaxWidth1000 
{
	max-width: 1000px;
}

.MaxWidth1200 
{
	max-width: 1200px;
}

.MaxWidth1400 
{
	max-width: 1400px;
}

.BottomRadius 
{
	border-radius: 0 0 50px 50px;
}


/* =============== EXTRAS =============== */

.Hero
{
	height: 75vh;
	max-height: 600px;
}

.CenterSelf
{
	left: 50%;
	transform: translateX(-50%);
}

.LargeIcon 
{
	color: #0a101e;
}

.NavItems 
{
	max-height: 0;
	position: absolute;
	top: 100px;
	left: 0;
	right: 0;
	background-color: #0a101e;
	overflow: hidden;
	transition: max-height 1.5s ease-out;
}

.NavItems a 
{
	color: white;
}

.NavItems button 
{
	margin: 1rem 0;
}

.Hamburger 
{
	font-size: 2.4rem;
	transition: ease-in-out 0.2s;
}

.Hamburger:hover 
{
	color: #0a101e;
	transition: ease-in-out 0.2s;
}

.SideMenu:checked ~ .NavItems 
{
	max-height: 360px;
}

.Circle 
{
	width: 60px;
	height: 60px;
	min-width: 60px;
	min-height: 60px;
	padding: 0;
	margin: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 4px #fff;
	border: none;
}

.Icon
{
	width: 80px;
	height: 80px;
	border-radius: 100%;
	font-size: 1.65rem;
	background: #0a101e33;
}

.Icon i
{
	color: #0a101e;
}

.IconSmall
{
	width: 60px;
	height: 60px;
	min-width: 60px;
	min-height: 60px;
}

.PieLoader
{
	width: 185px;
	height: 185px;
	border-radius: 50%;
}

#ThreeSteps > section:nth-child(1) .PieLoader
{
	background: radial-gradient(closest-side, #edf1f5 82%, transparent 83% 100%), conic-gradient(#4168a2 33.3%, #D9DEE3 0);
}

#ThreeSteps > section:nth-child(2) .PieLoader
{
	background: radial-gradient(closest-side, #edf1f5 82%, transparent 83% 100%), conic-gradient(#4168a2 66.6%, #D9DEE3 0);
}

#ThreeSteps > section:nth-child(3) .PieLoader
{
	background: radial-gradient(closest-side, #edf1f5 82%, transparent 83% 100%), conic-gradient(#4168a2 100%, #D9DEE3 0);
}

.Arrow 
{
	display: none;
}

.CenterText 
{
	text-align: center;
}

.StartText
{
	text-align: start;
}

.EndText
{
	text-align: end;
}

.NoPadding
{
	padding: 0;
}

.Hidden 
{
	display: none;
}

.Underline 
{
	display: inline-flex;
	padding-bottom: 1.5rem;
	background-image: url("https://resource.scrapcarbuyers.com/Download/Svg/Vectors/underline.svg");
	background-position: bottom;
	background-size: 100%;
	background-repeat: repeat-x;
	width: -moz-fit-content;
	width: fit-content;
}

.UnderlineWhite 
{
	display: inline-flex;
	padding-bottom: 1.5rem;
	background-image: url("https://resource.scrapcarbuyers.com/Download/Svg/Vectors/underline-white.svg");
	background-position: bottom;
	background-size: 100%;
	background-repeat: repeat-x;
	width: -moz-fit-content;
	width: fit-content;
}

/* =============== ACCOUNT =============== */

.Navigation
{
	position: sticky;
	height: 10vh;
}


body:has(dialog) > .Navigation > span > span
{
	top: 14vh;
    left: 12%;
}

.Navigation button,
.Navigation .Button,
.SquareIcon > button,
.SquareIcon > .Button
{
  	margin: 14px;
    padding: 10px;
   	width: 44px;
    height: 44px;
}

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

.SoftwareContent > section
{
	margin: 0.6rem;
}

.Reload:before
{
	content: "This page will update every 30 seconds";
	position: fixed;
	right: 1rem;
	bottom: 20px;
	z-index: 4;
	font-weight: 600;
	
	background-color: #11182B;
	color: #f5f5f5;
	border-radius: 1rem;
	padding: 0.8rem 1rem;
	box-shadow: 0 1px 3px #0003, 0 0 1px 1px #0001;

}


.Tabs
{
	margin-top: 10px;
	margin-left: 6%;
	position:fixed;
	z-index: 6;
	height: 4vh;
}

.Tabs > span:hover
{
	opacity:0.8;
}

.Tabs a,
.Tabs button
{	
	font-size: 16px;
	color: #333;
	width: fit-content;
	margin: 0;
}

.Tabs a
{
	padding: 2px 1px 2px 8px;
}

.Tabs button
{
	box-shadow: none;
	padding: 4px;
}

.Tabs button:hover
{
	background: #8a1b07;
	color: #edf1f5
}

.Round
{
	border-radius: 0.5rem;
	overflow: hidden;
}

.Round2
{
	border-radius: 1rem;
	overflow: hidden;
}

.PaddingInner
{
	padding: 1.6vh 2vh;
}

.BackgroundPrimary
{
	background: #11182B;
	color: #edf1f5;
}

.BackgroundWhite
{
	background: #f9f9f9;
	color: #333333;
}

.BackgroundGrey
{
	background: #edf1f5;
	color: #333333;
}

.BackgroundBlack
{
	background: #303030;
	color: #edf1f5;
}

.BackgroundRed
{
	background: #c51717;
	color: #edf1f5;
}

.BackgroundOrange
{
	Background: #ff7d01;
	color: #edf1f5;
}

.BackgroundGreen
{
	background: #1DB954;
	color: #edf1f5;
}













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

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

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

.WhiteIcon
{
	color: white;
}

.GreenIcon
{
	color: #97c41d;
}

.RedBackground 
{
	background-color: #c92e2e;
}

.RedBackground label
{
	background-color: #c92e2e;
}

.GreyBackground 
{
	background: linear-gradient(27deg, #202122 0%, #303030 100%);
	color: #edf1f5;
}

.WhiteBackground 
{
	background-color: #edf1f5;
	color: #333;
}

.BlueBackground 
{
	background-color: #0a101e;
	color: #edf1f5;
}

.DarkBlueBackground 
{
	background-color: #11182B;
	color: #edf1f5;
}

.WhiteText
{
	color: #edf1f5;
}

.GreyText 
{
	color: #cdcdcd;
}

.BlueText 
{
	color: #0a101e;
}

.DarkBlueText 
{
	color: #11182B;
}

.SmallCard
{
	max-width: 420px;
}

.SmallCard img 
{
	width: 25px;
	height: 25px;
}

.TextBox 
{
	text-align: center;
	width: 100%;
	max-width: 550px;
}

.Content 
{
	margin: 2rem 0;
}

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

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

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

.Card
{
	overflow: auto;
}

.Notification
{
	pointer-events: none;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	padding: 20px 60px;
	position: fixed;
	z-index: 6;
	
	-webkit-animation-duration: 5s; animation-duration: 5s;
    -webkit-animation-fill-mode: both; animation-fill-mode: both;
            
	-webkit-animation-name: FadeOut;
    animation-name: FadeOut;
}

.Notification > span
{
	display:flex;
	flex-direction: row;
}

.Notification > span > span
{
	margin-right: 10px;
}

.Notification i:before
{
	background: #3335;
	height: 36px;
	width: 36px;
	font-size: 22px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	text-indent: 0;
}

.Navigation i
{
	color: #fff;
}


body.Software > section:not(.Hero)
{
	height: 100vh;
}





@media only screen and (max-width: 959px) 
{
	.HiddenMobile
	{
		display: none;
	}
	
	.CenterTextMobile
	{
		text-align: center;
	}
}

@media only screen and (min-width: 960px) 
{
	
	/* =============== BASE & GRID =============== */
	
	nav button,
	nav .Button
	{
		margin: 0 20px 0 0 ;
		padding: 20px;
	}
	
	footer
	{
		text-align: start;
	}

	.Row,
	.ColumnRow,
	.ColumnReverseRow
	{
		flex-direction: row;
	}

	.RowReverse
	{
		flex-direction: row-reverse;
	}
	
	.RowColumn
	{
		flex-direction: column;
	}
	
	.ColumnReverse
	{
		flex-direction: column-reverse;
	}

	.NavItems 
	{
		background-color: transparent;
		position: unset;
		max-height: unset;
	}

	.NavItems a 
	{
		width: unset;
	}

	.Hamburger
	{
		display: none;
	}

	.TextBox 
	{
		text-align: start;
	}

	.CardInputs span 
	{
		width: 48.35%;
	}

	.HiddenDesktop
	{
		display: none;
	}
	
	.DesktopFontSize120
	{
		font-size: 120%;
	}
	
	/* =============== ACCOUNT =============== */

	.Sidebar
	{
		width: 28%;
		top: 8vh;
		border-right: 1px solid #cdcdcd;
		overflow-y: overlay;
		height: 90vh;
		border-bottom: unset;
		max-width: 350px;
	}
	
	.SoftwareContent > section
	{
		margin: 1.8rem;
	}
	
}













.swiper-container
{
	width: 100%;
	max-width: 900px;
	overflow: hidden;
display: flex  !important;
gap: 3px;
}
.swiper-slide {
display: flex !important;
	padding: 20px;
height: 100% !important;
}
.swiper-button-next,
.swiper-button-prev {
	color: rgb(165, 14, 14); /* Change button color */
}