* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

body {
    overflow-x: hidden;
}

@font-face {
    font-family: 'Novatica';
    src: local('Novatica'), local('Novatica'), url('https://lib.vqnderklein.nl/fonts/NovaticaLight.woff2') format('woff2'), url('https://lib.vqnderklein.nl/fonts/NovaticaLight.woff') format('woff'), url('https://lib.vqnderklein.nl/fonts/Novatica.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.error {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    width: 320px;
    display: none;
    z-index: 110;
    padding: 12px;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    background: #EF665B;
    border-radius: 8px;
    box-shadow: 0px 0px 5px -3px #111;
}

.navbar,
.navbarLeft {
    position: absolute;
    right: 0;
    color: white;
    margin: 2em;
    margin-top: 1em;
    display: grid;
}

.logo img {
    max-width: 100%;
}

.logo {
    max-width: 5%;
    left: -8%;
    position: absolute;
}

.topNavbar {
    position: absolute;
    color: white;
    margin: 1.5em;
    width: 90%;
    display: flex;
    gap: 1.3em;
    align-items: center;
    left: 250px;
}

canvas {
    width: calc(100% - 250px);
    position: relative;
}

.topNavbar div {
    align-items: center;
    gap: 5px;
}

.cameraAngle div {
    display: flex;
}

.toolsSelection {
    display: flex;
    gap: 1em !important;
    position: relative;
    padding-right: 1em;
    border-right: 2px solid;
}

.toolsSelection::after,
.cameraAngle::after {
    content: 'Selector Tools';
    position: absolute;
    top: -23px;
    font-size: 12px;
    color: grey;
    width: 100%;
    font-weight: bold;
    text-align: center;
    font-family: monospace !important;
}

.cameraAngle {
    position: relative;
    display: flex;
    gap: 1em !important;
    padding-right: 1em;
    border-right: 2px solid;
}

.cameraAngle::after {
    content: 'Camera Hoek';
}

.ActiveHover,
.ActiveCamera {
    padding: 7px;
    border: 1px solid;
    border-radius: 5px;
    width: max-content;
    display: flex;
    align-items: center;
}

.ActiveCamera {
    color: #bdbdbd;
}

#geldRemaining {
    font-family: monospace;
    margin-top: 5px;
    color: #adadad;
    font-size: 15px;
    text-align: center;
}

.toolsSelection div {
    cursor: pointer;
}

.materialImageSector3,
.materialImageSector2,
.materialImageSector1,
.materialImageSector4 canvas {
    position: relative;
}

.topNavbar .text {
    margin-top: 0;
}

#SecondFloor12 {
    color: #ffd700
}

.navbarLeft {
    left: 0 !important;
    width: 3%;
}

.ActiveFloor {
    color: rgb(231, 231, 231) !important
}

.navbar span {
    margin-top: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #8f9092;
}

.active {
    color: #ffffff !important;
    padding: 5px;
    position: relative;
}

.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    width: 80%;
    left: 10%;
    height: 2px;
    background-color: #bdbdbd;
}

.main {
    width: fit-content;
    position: absolute;
    z-index: 100;
    right: 0;
    padding-top: 1em;
}

#ClearFloor {
    color: #f57f17;
    cursor: pointer;
}

.text {
    margin-top: -18px;
    font-family: monospace;
    color: grey;
    font-size: 12px;
}

.buildObjects span {
    cursor: pointer !important;
}

.floorIndication,
.tools,
.buildObjects {
    position: relative;
}

.floorIndication span svg {
    cursor: pointer;
}

.ActiveCamera .text {
    color: #78909c;
}

.floorIndication::after {
    content: 'Etage';
    position: absolute;
    display: flex;
    align-items: center;
    top: 0;
    rotate: 90deg;
    top: 40%;
    right: -100%;
    font-family: monospace;
    color: grey;
    font-weight: bold;
}

.tools::after {
    content: 'Tools' !important;
}

.activeObject {
    padding: 5px;
    background-color: #43486b;
    border-radius: 10px;
}

#Walls.activeObject+.textForObject {
    color: white;
}

#Floors.activeObject+.textForFloor {
    color: white;
}

#Foundations.activeObject+.textForFoundation {
    color: white;
}

#Location.activeObject+.textForLocation {
    color: white;
}

#Build.activeObject+.textForBuild {
    color: white;
}

#Layout.activeObject+.textForLayout {
    color: white;
}

.materialSelector {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 1000;
    display: none;
    grid-template-columns: 60% 40%;
}

.materialInformationSection {
    background-color: rgba(16, 17, 17, 0.9);
    width: 100%;
    position: relative;
    padding: 0.5em;
    z-index: 200;
    font-size: 32px;
    overflow-y: scroll;
    font-weight: bold;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.materialInformationSection p {
    font-weight: normal;
    font-size: 16px;
    max-width: 80%;
}

.materialImageSector canvas {
    max-height: 60% !important;
}

.materialImageSection {
    background-color: rgb(54, 70, 78, 0.6);
    width: 100%;
    position: relative !important;
}

.materialImageSection .titel {
    position: absolute;
    padding: 5px;
    z-index: 100;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: bold;
    font-size: 18px;
    right: 5px;
    color: rgb(122, 122, 122);
}

.materialSelector::after {
    content: " ";
    height: 0;
    position: absolute;
    top: 15px;
    width: 0;
    z-index: 1;
    right: -10px;
    border: medium solid #263238;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #263238;
}

.material {
    position: relative;
}

.soortenGrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 10px;
    row-gap: 5px;
}

.tools span,
.cameraAngle span {
    cursor: pointer;
}

.ActiveHover .text,
.ActiveHover .text {
    color: white;
}

.ActiveSideNav {
    display: grid !important;
}

.button_below {
    bottom: 1.2em;
    right: 1em;
    width: 200px;
    text-align: right;
    float: right;
    position: absolute;
}

.button_below p {
    text-align: right !important;
    max-width: 100% !important;
}

.button_below a {
    font-size: 18px;
    color: #bbdefb !important;
    text-decoration: none;
    margin-left: 15px;
    border-bottom: 2px solid;
    padding-bottom: 4px;
}

.button_below .button {
    border: 1px solid;
    border-radius: 5px;
    padding: 4px 7px;
}

.itemGrid {
    margin-top: 1em;
    grid-template-columns: 1fr 1fr 1fr;
    display: grid;
    gap: 1em;
    padding-bottom: 1em;
}

.materialInformationSection::-webkit-scrollbar {
    width: 0;
}

.itemCard {
    background-color: #263238;
    padding: 8px 12px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border: 1px solid black;
    border-radius: 5px;
    height: min-content;
}

.itemCard:hover {
    scale: 1.05;
    transition: 100ms;
}

.itemTitle {
    font-size: 20px;
}

p.itemID {
    color: #78909c;
    font-size: 12px;
    padding-top: 3px;
    font-family: monospace;
    margin-bottom: 1em;
}

p.itemBeschrijving {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-style: italic;
    max-width: 100%;
    color: #ccdce9;
    line-height: 1.5;
    margin-bottom: 1em;
}

.itemKosten svg {
    color: #80cbc4;
}

.itemKosten {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 15px !important;
    margin-bottom: 10px;
}

.itemPoints,
.ItemBewegelijkheid {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.itemPoints svg {
    color: #d1c4e9;
}

.ItemBewegelijkheid svg {
    color: #d7ccc8;
}

.selectButton {
    margin-top: 20px;
    color: #90caf9;
    border: 1px solid;
    cursor: pointer;
    border-radius: 5px;
    float: right;
    width: max-content;
    padding: 6px 12px;
}

#customers {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    border-radius: 5px;
    color: #cfcccc;
}

.moneyMessage {
    font-family: novatica;
    position: fixed;
    top: 1em;
    padding: 12px;
    display: flex;
    color: white;
    align-items: center;
    gap: 10px;
    transition: 500ms;
    right: 6em;
    border: 1px solid #78909c;
    border-left: 4px solid #78909c;
}

#customers td,
#customers th {
    border: 1px solid #ddd;
    padding: 8px;
}

#customers tr:nth-child(even) {
    background-color: #37474f;
}

#customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #0c0d0e;
    color: white;
}

.specs {
    padding: 10px;
    height: 210px;
}

b.P {
    color: #1de9b6;
    font-size: 20px;
    margin-right: 4px;
}

b.M {
    color: #ef9a9a;
    font-size: 20px;
    margin-right: 4px;
}

.submitButton {
    width: 120px;
    height: 40px;
    border-radius: 5px;
    border: 2px solid #babfc4;
    background-color: var(--bg-color);
    box-shadow: 4px 4px #babfc4;
    font-size: 17px;
    font-weight: 600;
    color: var(--font-color);
    cursor: pointer;
    z-index: 100;
}

.submitButton:active {
    box-shadow: 0px 0px var(--main-color);
    transform: translate(3px, 3px);
}

b.N {
    color: #ff1744;
    font-size: 20px;
    margin-right: 4px;
}

.error__icon {
    width: 20px;
    height: 20px;
    transform: translateY(-2px);
    margin-right: 8px;
}

.error__icon path {
    fill: #fff;
}

.error__title {
    font-weight: 500;
    font-size: 14px;
    color: #fff;
}

.error__close {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-left: auto;
}

.error__close path {
    fill: #fff;
}

.sideNav {
    position: absolute;
    color: white;
    background-color: #080808;
    width: 250px;
    z-index: 100;
    height: 100%;
    padding: 1em;
    border-right: 2px solid #151616;
}

.navLogoContainer img {
    color: white !important;
}

.navLogoContainer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 3em;
}

.titleNav {
    font-weight: bold;
    font-size: 22px;
}

.textForLogo>div {
    font-family: novatica;
}

.subTitle {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif !important;
    font-size: 14px;
    color: #bdbdbd;
}

.statusButton {
    font-family: novatica;
    margin-bottom: 3em;
}

.statusButton b {
    padding-left: 8px;
    border-left: 3px solid #455a64;
    color: #90999c;
}

.SelectButton {
    margin-top: 1em;
    display: flex;
    gap: 15px;
}

.cameraOption {
    display: flex;
    cursor: pointer;
    gap: 5px;
    align-items: center;
    font-family: monospace !important;
}

.cameraLogo {
    display: flex;
    align-items: center;
}

.cameraDescr {
    font-family: monospace !important;
}

.FloorOption {
    cursor: pointer;
    color: #818181;
}

.titleSettings {
    position: sticky;
    padding-bottom: 10px;
    top: 0;
    background-color: #080808;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-family: monospace !important;
}

.titleSettingsSmall p {
    color: #bdbdbd;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: monospace !important;
}

.titleContainer {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #bdbdbd;
}

.streep {
    width: 100%;
    display: flex;
    left: 2px;
    position: relative;
    align-items: center;
    background-color: #bdbdbd;
    height: 1px;
}

.iconImage {
    display: flex;
    color: #bdbdbd;
    align-items: center;
}

.contentInsideHideButton {
    margin-left: 1em;
    margin-top: 1em;
}

.navbarHideButton.Open .contentInsideHideButton {
    display: block;
}

.navbarHideButton.Closed .contentInsideHideButton {
    display: none;
}

.navbarHideButton {
    margin-bottom: 5px;
    overflow-y: scroll;
}

.navbarHideButton::-webkit-scrollbar {
    width: 0;
}

.Open {
    height: 75%;
}

.SupportText {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    max-width: 90%;
    text-align: left;
    color: #8d8e92;
}

.SupportText a {
    color: #1de9b6;
}

.SupportText u {
    color: #ff1744;
}

.deleteButton {
    position: relative;
    width: 150px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border: 1px solid #78909c;
    background-color: #494b52;
    overflow: hidden;
}

.deleteButton,
.button__icon,
.button__text {
    transition: all 0.3s;
}

.deleteButton .button__text {
    transform: translateX(35px);
    color: #bdbdbd;
    font-weight: 600;
}

.deleteButton .button__icon {
    position: absolute;
    transform: translateX(109px);
    height: 100%;
    width: 39px;
    background-color: #37474f;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deleteButton .svg {
    width: 20px;
}

.deleteButton:hover {
    background: #37474f;
}

.button:hover .button__text {
    color: transparent;
}

.deleteButton:hover .button__icon {
    width: 148px;
    transform: translateX(0);
}

.deleteButton:active .button__icon {
    background-color: #455a64;
}

.deleteButton:active {
    border: 1px solid #37474f;
}

.badges {
    flex-wrap: wrap;
    justify-content: center;
    text-align: left !important;
    margin-bottom: 1em;
    padding-top: 1em;
}

.badges b {
    padding-right: 5px;
}

.badges>button {
    font-size: 12px;
    line-height: 1.25rem;
    padding: 2px .5rem;
    cursor: pointer;
    border: none;
    border-radius: 0.375rem;
    text-align: left;
    outline: none;
}

.badges .blue {
    background-color: rgba(59, 130, 246, 0.10);
    color: rgb(59 130 246);
    border: 1px rgb(59 130 246) solid;
}

.statusMessage p {
    font-family: novatica;
    font-size: 15px;
    text-align: center;
}

.TextHolder {
    margin-top: 6px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.statusMessage {
    padding-bottom: 1em;
    border-bottom: 2px solid #373a3b;
}

.addButton {
    position: relative;
    width: 100%;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-bottom: 2em;
    margin-top: 1em;
    border: transparent;
    background-color: transparent !important;
}

.addButton,
.button__icon,
.button__text {
    transition: all 0.3s;
}

.button__text {
    display: flex;
    align-items: center;
    gap: 10px;
}

.addButton .button__text {
    transform: translateX(30px);
    color: #8799a1;
    font-weight: 600;
    position: relative;
    left: -32px;
}

.addButton .button__icon {
    position: absolute;
    transform: translateX(109px);
    height: 100%;
    width: 39px;
    left: 26%;
    background-color: #475963;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.addButton .svg {
    width: 30px;
    stroke: #fff;
}

.addButton:hover {
    background: #34974d;
}

.addButton:hover .button__text {
    color: #dbdff0;
    font-weight: bold;
}

.button__icon:hover {
    background-color: #8d978d;
    color: black !important;
}

input[type="range"] {
    width: 100%;
}

.PB-range-slider {
    width: 100%;
    height: 4px;
    border-radius: 5px;
    background: #D5DBE1;
    outline: none;
    opacity: 0.9;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.PB-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: white;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.PB-range-slider::-webkit-slider-thumb:hover {
    box-shadow: 0px 0px 0px 8px rgba(255, 243, 243, 0.16);
    transition: 0.3s ease-in-out;
}

.PB-range-slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #000000;
    cursor: pointer;
}

.PB-range-slider-div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-left: 0px !important;
    padding: 8px 12px;
    padding-top: 13px;
    border-radius: 6px;
}

.PB-range-slidervalue {
    font-weight: 600;
    font-size: 14px;
}

.rangeSelector {
    display: flex;
    justify-content: space-between;
    font-family: monospace;
}

.rangeSelector p {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 12px;
    color: #8799a1;
}

.SelectorDesc {
    width: 100%;
}

.radio-inputs {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    border-radius: 0.5rem;
    background-color: #3a3737;
    box-sizing: border-box;
    box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);
    padding: 0.25rem;
    width: 100%;
    color: #ccdce9;
    font-size: 14px;
}

.radio-inputs .radio {
    flex: 1 1 auto;
    text-align: center;
}

.radio-inputs .radio input {
    display: none;
}

.radio-inputs .radio .name {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border: none;
    padding: .5rem 0;
    color: rgb(153, 159, 168);
    transition: all .15s ease-in-out;
}

.radio-inputs .radio input:checked+.name {
    background-color: #dbdada;
    color: black;
    font-weight: 600;
}

#Diff {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 14px;
    color: #d6dfd6;
}

#DiffEff {
    color: #8d8e92;
    font-family: monospace;
    padding-top: 2px;
}

.Footer {
    position: relative;
    margin-top: 3em;
}

.subSections {
    margin-left: 0.7em;
    padding: 8px 4px;
    display: flex;
    justify-content: space-between;
    border-left: 2px solid #919496;
    padding-left: 10px;
    margin-top: 10px;
}

.optionContainer {
    display: flex;
    align-items: center;
    gap: 5px;
}

.optionContainer>svg {
    cursor: pointer;
}

.overviewSubTitle {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 18px;
    color: #babfc4;
    margin-bottom: 2em;
}

.view,
.remove,
.edit {
    transition: color 0.4s;
    width: 22px;
}

.remove:hover {
    color: #ff1744;
}

.edit:hover {
    color: #1de9b6;
}

.view:hover {
    color: #40c4ff;
}

.NameTitle {
    font-size: 18px;
}

.NameSec {
    font-size: 14px;
    font-family: monospace;
}

.NothingToShow {
    padding: 6px;
    font-family: monospace;
    font-size: 12px;
    color: #e24766;
}

.activeView {
    background-color: #c0c1c2;
    color: black;
    border-radius: 50%;
}

.materialSelectorDash {
    position: fixed;
    height: 100%;
    width: 100%;
    display: none;
    background-color: #101111;
    z-index: 1000;
    top: 0;
}

.navbarMaterials {
    padding: 2em;
    color: white;
    max-width: 90%;
    left: 5%;
    position: relative;
    display: flex;
    justify-content: space-between;
}

.NavTitle {
    font-family: monospace;
    font-size: 28px;
    display: flex;
    align-items: center;
}

.NavTitle b {
    font-family: Arial, Helvetica, sans-serif;
}

.subSectionsBuildUI {
    display: flex;
    justify-content: space-between;
    width: 30%;
    color: white;
    align-items: center;
}

.subSectionsBuildUI a {
    color: white;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 16px;
    text-decoration: none;
    position: relative;
}

.activeSubSection::after {
    height: 3px;
    width: 100%;
    bottom: -2.5em;
    left: 0;
    position: absolute;
    background-color: #babfc4;
    content: '';
}

.searchBar {
    max-width: 90%;
}

.gridContainer {
    background-color: #232525;
    padding-top: 2em;
    padding-bottom: 2em;
}

.gridUI {
    display: grid;
    max-width: 90%;
    left: calc(5% + 2em);
    position: relative;
    overflow: show;
    grid-template-columns: 60% 40%;
}

.searchBar {
    min-width: 130%;
    border-radius: 10px;
    border: 1px solid #babfc4;
    margin-top: 2em;
    padding: 2em;
    background-color: #4d4d4d;
}

.materialImageSector3 canvas {
    border: 2px solid #babfc4;
    border-radius: 10px;
    margin-right: 1em;
    position: relative;
}

.previewContainer {
    position: relative;
}

.goBack {
    display: flex;
    color: red;
    justify-content: center;
    padding-bottom: 1em;
    border-bottom: 1px solid white;
    cursor: pointer;
}

.goBack a {
    color: red;
}

.backgroundBlur {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgb(0, 0, 0, 80%);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.textObject {
    padding: 2em;
    max-width: 40%;
    position: relative;
    background-color: rgb(0, 0, 0, 50%);
    border-radius: 15px;
    padding: 5em 2em;
    border: 1px solid rgb(22, 20, 20);
}

.titleTextObject {
    font-family: novatica;
    display: flex;
    color: #c1c3c4;
    align-items: center;
    gap: 15px;
    font-size: 30px;
}

.paragraphTextObject p {
    line-height: 1.5;
    padding-top: 10px;
    font-family: novatica;
    color: #a6a8a8;
}

.actionButtons {
    margin-top: 2em;
    align-items: center;
}

.actionButtons .leave {
    color: #ff1744;
    border: 1px solid;
    border-radius: 5px;
    margin-right: 1em;
    padding: 6px 12px;
    transition: 500ms;
}

.actionButtons .leave:hover {
    color: #ee0030;
    border: 1px solid;
    border-radius: 5px;
    margin-right: 1em;
    padding: 6px 22px;
}

.actionButtons .stay {
    padding-bottom: 5px;
    border-bottom: 1px solid;
}

.actionButtons a {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-decoration: none;
    color: #78909c;
}

.ApiTitle {
    font-family: novatica;
    font-size: 32px;
    color: #afafaf;
    padding-bottom: 5px;
}

.waitingForResponse {
    font-family: monospace;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    margin-top: 1em;
    color: #ada7a7;
    margin-bottom: 2em;
}

.descriptionTItle {
    font-family: novatica;
    line-height: 1.5;
    color: #868686;
    margin-bottom: 4em;
}

.descriptionTItle a {
    color: #1de9b6;
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid;
}

.loader {
    display: block;
    --height-of-loader: 4px;
    --loader-color: #a19f9f;
    max-width: 80%;
    left: 10%;
    height: var(--height-of-loader);
    border-radius: 30px;
    background-color: rgba(190, 180, 180, 0.2);
    position: relative;
}

.loader::before {
    content: "";
    position: absolute;
    background: var(--loader-color);
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    border-radius: 30px;
    animation: moving 1500ms ease-in-out infinite;
}

@keyframes moving {
    50% {
        width: 100%;
    }
    100% {
        width: 0;
        right: 0;
        left: unset;
    }
}

.results {
    margin-top: 3em;
    display: flex;
    justify-content: space-evenly;
    text-align: center;
}

.results div {
    display: grid;
    justify-content: center;
}

.scoreWrapperSmall {
    display: flex;
    align-items: center;
}

.scoreWrapperSmall .Score {
    font-size: 18px;
}

.scoreWrapperSmall p {
    font-weight: normal;
}

.scoreWrapper {
    color: #b8b6b6;
}

.up {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif !important;
    font-weight: bold;
    color: #d6d6d6;
    animation: up forwards 500ms;
    animation-delay: 2000ms;
    scale: 0;
}

.ScoreMain:nth-child(1) {
    animation: up forwards 500ms;
    animation-delay: 2200ms;
    scale: 0;
}

@keyframes up {
    to {
        scale: 1;
    }
}

.down {
    margin-top: 1em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #d1cdcd;
    animation: up forwards 500ms;
    animation-delay: 2500ms;
    scale: 0;
}

.ScoreD,
.ScoreS,
.ScoreC {
    animation: up forwards 500ms;
    animation-delay: 2800ms;
    scale: 0;
}

.Score {
    padding: 15px;
    background-color: rgba(105, 103, 103, 0.4);
    width: max-content;
    border-radius: 15px;
    margin-top: 1em;
    font-size: 25px;
    justify-content: center;
    font-family: novatica;
}

.GoodGrade {
    background-color: #66bb6a !important;
    color: black;
}

.Badgrade {
    background-color: #e57373;
    color: black;
}

.MediumGrade {
    background-color: #f9a825;
    color: black;
}

.checkWrapper {
    display: flex;
    gap: 15px;
    align-items: center;
    animation: checkWrapper 500ms forwards;
    margin-top: 1em;
    opacity: 1;
    left: -100px;
    opacity: 0;
    position: relative;
}

.errorContainerWrapper {
    position: fixed;
    top: 1em;
    right: 1em;
}

.error {
    margin-bottom: 10px;
}

.errorContainerWrapper .error {
    animation: checkWrapper 500ms forwards;
    left: -100px;
    opacity: 0;
    position: relative;
}

.errorContainerWrapper .errorMessageAPI:nth-child(2) .error {
    animation-delay: 200ms;
}

.errorContainerWrapper .errorMessageAPI:nth-child(3) .error {
    animation-delay: 300ms;
}

.errorContainerWrapper .errorMessageAPI:nth-child(4) .error {
    animation-delay: 400ms;
}

.errorContainerWrapper .errorMessageAPI:nth-child(5) .error {
    animation-delay: 500ms;
}

.errorContainerWrapper .errorMessageAPI:nth-child(6) .error {
    animation-delay: 600ms;
}

.errorContainerWrapper .errorMessageAPI:nth-child(7) .error {
    animation-delay: 700ms;
}

.errorMessageAPI {
    display: flex !important;
    z-index: 1000;
}

div.r .checkWrapper:nth-child(1) {
    animation-delay: 1200ms;
}

div.r .checkWrapper:nth-child(2) {
    animation-delay: 1500ms;
}

div.l .checkWrapper:nth-child(2) {
    animation-delay: 300ms;
}

div.l .checkWrapper:nth-child(3) {
    animation-delay: 600ms;
}

div.l .checkWrapper:nth-child(4) {
    animation-delay: 900ms;
}

@keyframes checkWrapper {
    to {
        left: 0;
        opacity: 1;
    }
}

.Passed .checkStatus {
    color: #34974d !important;
    font-weight: bold;
}

.Failed .checkStatus {
    color: #ee0030;
    font-weight: bold;
}

.checkStatus {
    border-right: 1px solid #fff;
    padding-right: 1em;
}

.StatusCheckIcon {
    color: #8d978d
}

.checkName {
    color: #919090
}

.checksCompleted {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.textObject h2 {
    color: #a6a6a7;
}

.tempLoaderStoring,
.tempLoader {
    max-width: 40%;
    margin-top: 3em;
}

.inputInformation {
    margin-top: 5em;
}

.inputInformation p {
    display: flex;
    gap: 10px;
    color: #4a4a4d;
}

.inputInformation b {
    color: #37474f;
}

.edit {
    padding: 6px 12px;
    border: 1px solid;
    border-radius: 5px;
    transition: 500ms;
    color: #8394f1 !important;
}

a.edit:hover {
    padding: 6px 22px;
}

.RoomForImprovement {
    color: #e57373 !important;
}

.OnTheRightWay {
    color: #f9a825 !important;
}

.CloseToPerfection {
    color: #66bb6a !important;
}

.startTitle {
    font-family: novatica;
    font-size: 32px;
    color: #a6a6a7;
}

.tagPoppup {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: #868686;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 1em;
}

.startUpParagraph {
    line-height: 1.5;
    font-family: novatica;
    color: #bdbdbd;
}

.startUpParagraph a {
    color: #a1a1a8;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-decoration: none;
}

.startUpParagraph a:hover {
    text-decoration: underline;
}

.startUpNote .notifications-container {
    width: 60%;
    height: auto;
    font-size: 0.875rem;
    margin-top: 2em;
    line-height: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.startUpNote .flex {
    display: flex;
}

.startUpNote .flex-shrink-0 {
    flex-shrink: 0;
}

.startUpNote .alert {
    background-color: rgb(254 252 232);
    border-left-width: 4px;
    border-color: rgb(250 204 21);
    border-radius: 0.375rem;
    padding: 1rem;
}

.versionTag {
    position: absolute;
    top: 1em;
    padding: 6px 12px;
    border: 1px solid;
    border-radius: 5px;
    color: #78909c;
    font-size: 12px;
    font-family: monospace !important;
    left: 3em;
}

.startUpNote .alert-svg {
    height: 1.25rem;
    width: 1.25rem;
    color: rgb(255, 0, 0);
}

.startUpNote .alert-prompt-wrap {
    margin-left: 0.75rem;
    color: rgb(201, 48, 9);
}

.startUpNote .alert-prompt-link {
    font-weight: 500;
    color: rgb(255, 36, 7);
    text-decoration: underline;
}

.startUpNote .alert-prompt-link:hover {
    color: rgb(202 138 4);
}

.localStorageCheck .check {
    cursor: pointer;
    position: relative;
    margin: auto;
    width: 18px;
    height: 18px;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
}

.localStorageCheck {
    margin-top: 1em;
    display: flex;
    font-family: monospace;
    align-items: center;
    gap: 10px;
}

.textCheck {
    font-family: novatica;
    font-size: 14px;
    color: #c1c3c4;
}

.localStorageCheck .check:before {
    content: "";
    position: absolute;
    top: -15px;
    left: -15px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(34, 50, 84, 0.03);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.start {
    padding: 6px 12px;
    border: 1px solid #34974d;
    color: #1de9b6 !important;
    border-radius: 5px;
    margin-right: 1em;
}

.localStorageCheck .check svg {
    position: relative;
    z-index: 1;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: #c8ccd4;
    stroke-width: 1.5;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
}

.localStorageCheck .check svg path {
    stroke-dasharray: 60;
    stroke-dashoffset: 0;
}

.localStorageCheck .check svg polyline {
    stroke-dasharray: 22;
    stroke-dashoffset: 66;
}

.localStorageCheck .check:hover:before {
    opacity: 1;
}

.localStorageCheck .check:hover svg {
    stroke: #4285f4;
}

.localStorageCheck #cbx:checked+.check svg {
    stroke: #4285f4;
}

.localStorageCheck #cbx:checked+.check svg path {
    stroke-dashoffset: 60;
    transition: all 0.3s linear;
}

.localStorageCheck #cbx:checked+.check svg polyline {
    stroke-dashoffset: 42;
    transition: all 0.2s linear;
    transition-delay: 0.15s;
}

.materialTitle p {
    color: #b3b3b3;
    font-weight: bold;
    font-size: 18px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

#ResetLocalStorage {
    padding: 6px 12px;
    border-radius: 5px;
    border: 1px solid #ff4369;
    background-color: transparent !important;
    color: #ff4369;
    cursor: pointer;
}

.tag {
    padding: 6px 12px;
    background-color: #1de9b6;
    width: max-content;
    color: black;
    font-size: 15px;
    font-family: monospace;
    border-radius: 5px;
}

.materialTitle {
    color: #b3b3b3;
    font-weight: bold;
    font-size: 18px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.tagDetail {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding: 6px 16px;
    border: 2px solid #919496;
    font-size: 14px;
    color: #e0e0e0;
    border-radius: 10px;
    margin-top: 10px;
}

.descTitle {
    font-family: monospace;
    font-size: 13px;
    padding-top: 3px;
    color: #999797;
}

.tagFlexBox {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: space-between;
}

.closeButton {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #c5c4c4;
    cursor: pointer;
}

.kindMaterial:hover {
    scale: 1.02;
    padding-left: 15px;
    border-left: 5px solid white;
}

.kindMaterial {
    transition: 500ms;
    padding: 10px;
    margin-bottom: 1em;
    font-size: 20px;
    font-weight: normal;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.soortenOfMaterial {
    margin-top: 5em;
    width: 100%;
}

.kindMaterial {
    border: 1px solid black;
    padding: 15px;
    background-color: #252121;
    margin-left: -14px;
    border-radius: 0px 15px 15px 0px;
    border-left: 5px solid white;
    padding-left: 0.8em;
}

.nav {
    height: 95vh;
    display: flex;
    align-items: center;
}

.tagDetail.selectButton {
    color: #e0e9ff;
    border: 1px solid;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin-top: 0em !important;
}

.specs_container {
    border: 1px solid white;
    border-right: 4px solid white;
    margin-right: -17px;
    padding: 15px;
    font-size: 22px;
}

.grid {
    display: grid;
    grid-template-columns: 45% 50%;
    gap: 5%;
}

.selectButtonContainer {
    display: flex;
    justify-content: right;
    align-items: center;
}

.content {
    max-width: 90%;
    border: 1px solid;
    border-top: 0px;
    right: calc(-10% - 15px);
    position: relative;
    padding: 15px;
    font-size: 15px;
}

.content .specs {
    padding: 0px;
    margin: -15px;
    height: auto;
}

.subSectionTitle {
    color: #dbdada;
    font-weight: normal;
}

.specsBox {
    display: none;
    height: 100vh;
    align-items: center;
}

.controls {
    display: flex;
    gap: 15px;
    justify-content: right;
    margin-right: auto;
}

.controls a {
    color: #1de9b6 !important;
    text-decoration: none;
    border: 1px solid;
    border-radius: 15px;
    padding: 6px 12px;
}

.controls a:first-child {
    color: #ee0030 !important;
}

.content p {
    font-size: 14px;
    margin-top: 5px;
    line-height: 1.5;
    color: #adadad;
}

.pointsContainer {
    max-height: 400px;
    height: 400px;
    overflow-y: scroll;
}

.pointsContainer::-webkit-scrollbar {
    display: none;
}