*{
	margin: 0;
	padding: 0;
    margin: 0px;
    padding: 0px;
	font-family: Figtree, Helvetica;
    -webkit-font-smoothing: antialiased;
}

html {
	scroll-behavior: smooth;
  }

body {
    margin: 0px;
	overflow: hidden;
}


:root {
    --darker-blue: #28265b;
    --darker-blue-light: #3f3c8d;
    --dark-blue: #3871c1;
    --light-blue: #55acee; 
	--scrollbarBG: #CFD8DC;
	--thumbBG: #90A4AE;
}

.McButton{    
    position: fixed;
    z-index: 999;
    right: 1.5em;
    top: 1.2em;
    width: 3em;
    height: 1.5em;
    cursor: pointer;
    opacity: 1;
    transition: 900ms;
}

.McButton b{
	position:absolute;
	left:0;
	width: 3em;
	height: 0.3em;
	background-color: var(--dark-blue);
	border-radius: 5em;
	/* box-shadow: 0 0 1px 1px rgba(0,0,0,1); */
}

.McButton b:first-child{top:0}
.McButton b:nth-child(2){top:50%}
.McButton b:nth-child(3){top:100%}

.Mc-clicked-animation-1{
	animation: bar-a-animation 1s forwards cubic-bezier(.42,2.11,.28,.65);
}

.Mc-clicked-animation-1-reverse{
	animation: bar-a-animation-reverse 1s forwards cubic-bezier(.42,2.11,.28,.65);
}

@keyframes bar-a-animation{
	0% {

	}

	30% {
		top:50%;
		transform: rotateZ(0deg);
	}

	100% {
		top:50%;
		transform: rotateZ(135deg);
	}
}

@keyframes bar-a-animation-reverse{
	0% {
		top:50%;
		transform: rotateZ(135deg);
	}

	70% {
		top:50%;
		transform: rotateZ(0deg);
	}
	
	100% {

	}
}

.Mc-clicked-animation-1-bottom{
	animation: bar-a-animation-bottom 1s forwards cubic-bezier(.42,2.11,.28,.65);
}

.Mc-clicked-animation-1-bottom-reverse{
	animation: bar-a-animation-bottom-reverse 1s forwards cubic-bezier(.42,2.11,.28,.65);
}

@keyframes bar-a-animation-bottom{
	0% {

	}

	30% {
		top:50%;
		transform: rotateZ(0deg);
	}

	100% {
		top:50%;
		transform: rotateZ(225deg);
	}
}

@keyframes bar-a-animation-bottom-reverse{
	0% {
		top:50%;
		transform: rotateZ(225deg);
	}

	70% {
		top:50%;
		transform: rotateZ(0deg);
	}
	
	100% {

	}
}

.med-scroll::-webkit-scrollbar {
	scrollbar-width: thin;
	width: 6px;
  }

.med-scroll::-webkit-scrollbar-track {
background: var(--scrollbarBG);
border-radius: 6px;
}

.med-scroll::-webkit-scrollbar-thumb {
background-color: var(--thumbBG) ;
border-radius: 6px;
border: 2px solid var(--scrollbarBG);
}

.no-show-scroll::-webkit-scrollbar {
	display: none;
  }


.bullet-point{
	padding-left: 1em;
	position: relative;
	list-style-type: none;
}

.bullet-point:before{
	position: absolute;
    top: .5rem;
    right: 0;
    bottom: 0;
    left: 0;
    width: .625rem;
    height: .625rem;
    background-color: #3871c1;
    content: "";
    border-radius: 50%;
}

.image-shadow:before{
	content: "";
	position: absolute;
	inset: -5px; /* control the spread */
	transform: translate(10px, 8px); /* control the offsets */
	z-index: -1; /* place the element behind */
	background-color: #CFD8DC;
	filter: blur(10px); /* control the blur */
}

  /* The slider itself */
.slider {
	-webkit-appearance: none;  /* Override default CSS styles */
	appearance: none;
	width: 100%; /* Full-width */
	height: 0.5rem; /* Specified height */
	background: var(--bg-color-white-light); /* Grey background */
	outline: none; /* Remove outline */
	opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
	-webkit-transition: .2s; /* 0.2 seconds transition on hover */
	transition: opacity .2s;
}
  
  /* Mouse-over effects */
.slider:hover {
	opacity: 1; /* Fully shown on mouse-over */
}
  
  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
	-webkit-appearance: none; /* Override default look */
	appearance: none;
	width: 2em; /* Set a specific slider handle width */
	height: 2em; /* Slider handle height */
	border-radius: 3em;
	background: var(--blue-dark); /* Green background */
	cursor: pointer; /* Cursor on hover */
}

.slider::-webkit-slider-thumb:active {
	cursor: grabbing; /* Cursor on hover */
}
  
.slider::-moz-range-thumb {
	width: 12px; /* Set a specific slider handle width */
	height: 12px; /* Slider handle height */
	background: var(--blue-dark); /* Green background */
	cursor: pointer; /* Cursor on hover */
}

.data-box {
	min-width: 25%;
	width: 12em;
	padding: 0.5%;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	color: #001400;
	font-weight: 400;
}

.technical-row-entry-input-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
}


.technical-entry-input{
	display: flex;
	margin: 3px;
}

.technical-entry-input-field {
	width: 4em;
    /* height: 21px; */
    text-align: center;
    font-size: 18px;
    border-radius: 5em 5em 5em 5em;
    background-color: var(--bg-color-white-light);
    outline: none;
    border: none;
    transition: 300ms all;
}

.technical-entry-input-field-left{
	width: 4em;
    /* height: 21px; */
    text-align: center;
    font-size: 18px;
    border-radius: 5em 0em 0em 5em;
    background-color: var(--bg-color-white-light);
    outline: none;
    border: none;
    transition: 300ms all;
	border: 2px solid #eee;
}

.technical-entry-input-field:focus, .technical-entry-input-field-left:focus{
	box-shadow: 0 2px 0 0 blue;
}

.input-styled:focus, .input-styled:focus{
	box-shadow: 0 2px 0 0 blue;
}

.technical-entry-select{    
	font-size: 18px;
    border-width: 2px;
    border-radius: 0 5em 5em 0;
    background-color: var(--bg-color-white-light);
    outline: none;
    border: none;
    transition: 300ms all;
}

.slider {
	-webkit-appearance: none;  /* Override default CSS styles */
	appearance: none;
	width: 100%; /* Full-width */
	height: 1.5rem; /* Specified height */
	border-radius: 1rem;
	background: #eee; /* Grey background */
	outline: none; /* Remove outline */
	opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
	-webkit-transition: .2s; /* 0.2 seconds transition on hover */
	transition: opacity .2s;
}
  
  /* Mouse-over effects */
.slider:hover {
	opacity: 1; /* Fully shown on mouse-over */
}
  
  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
	-webkit-appearance: none; /* Override default look */
	appearance: none;
	width: 2em; /* Set a specific slider handle width */
	height: 2em; /* Slider handle height */
	border-radius: 3em;
	background: var(--dark-blue); /* Green background */
	cursor: pointer; /* Cursor on hover */
}

.slider::-webkit-slider-thumb:active {
	cursor: grabbing; /* Cursor on hover */
}
  
.slider::-moz-range-thumb {
	width: 12px; /* Set a specific slider handle width */
	height: 12px; /* Slider handle height */
	background: var(--dark-blue); /* Green background */
	cursor: pointer; /* Cursor on hover */
}


.info-input:focus{
	box-shadow: 0 2px 0 0 var(--dark-blue);
}

.info-input::-webkit-input-placeholder {
	color: var(--light-blue);
}

.grecaptcha-badge { transform: scale(1); z-index: 9; right: 0; transition: 300ms all !important;}

/* .z-index-low {z-index: -1;} */
.z-index-low {opacity: 0;}