:root {
    --bg-color-1: rgb(250, 250, 250);
    --bg-color-2: rgb(238, 238, 238);
    --border-color: rgb(0, 0, 255);
    --filter-1: drop-shadow(0px 0px 3px black);
    --bg-color-3: rgba(0, 0, 255, 0.250);
    --border-color-2: none;
    --stroke-color-1: #000000;
    --fill-color: #2ca9bc;
    --text-color: #000000;
}

body.dark-mode {
    --bg-color-1: rgb(5, 5, 5);
    --bg-color-2: rgb(17, 17, 17);
    --border-color: rgb(0, 255, 255);
    --filter-1: drop-shadow(0px 0px 3px rgb(0, 255, 255));
    --bg-color-3: rgb(0, 0, 0);
    --border-color-2: rgb(0, 255, 255);
    --stroke-color-1: #00ffff;
    --fill-color: #000000;
    --text-color: #00ffff;
}

* {
    padding: 0;
    margin: 0;
}

@font-face {
  font-family: 'DMSans';
  src: url('../font/DMSans-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-color-1);
    font-family: 'DMSans', sans-serif;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-weight: normal;
}

.navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-color-2);
    width: 100%;
    height: 48px;
    border-bottom: 2px solid var(--border-color);   
    color: var(--text-color);
}

.bottomScreen {
    display: flex;
}

.leftSideBar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-color-2);
    min-width: 80px;
    height: 90vh;
    border-right: 2px solid var(--border-color);
    font-weight: 600;
    padding-top: 16px;
}

.boxes1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 12px;
    color: var(--text-color);
}

.boxes2 {
    display: flex;
    align-items: center;
    color: var(--text-color);
    padding-bottom: 16px;
}

.box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-color-1);
    width: 56px;
    height: 56px;
    border-radius: 16px;
    cursor: pointer;
    filter: var(--filter-1);
}

.box img, .box p {
    filter: none;
}

.box:hover {
    background-color: var(--bg-color-3);
    filter: none;
    border: 2px solid var(--border-color-2);
}

.activeBox {
    border: 2px solid var(--border-color);
    background-color: var(--bg-color-3);
    filter: none;
}

.svgTitle {
    display: block;
    font-size: 10px;
}

.ici1 {
    fill: var(--fill-color);
}

.ici2 {
    stroke: var(--stroke-color-1);
}

.si1 {
    stroke: var(--stroke-color-1);
}

.si2 {
    fill: var(--stroke-color-1);
}

.pI1 {
    fill: var(--fill-color);
}

.pI2 {
    stroke: var(--stroke-color-1);
}

.bi1 {
    fill: var(--fill-color);
}

.bi2 {
    stroke: var(--stroke-color-1);
}

.pageBlock {
    display: flex;
    flex-direction: column;
    width: 92vw;
    height: 88vh;
    margin: 16px 0px 0px 16px;
    row-gap: 8px;
}

.TitlePage {
    display: flex;
    width: 90vw;
    min-height: 32px;
    border-bottom: 2px solid var(--border-color-1);
    color: var(--text-color-1);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-color-1) inset;
    -webkit-text-fill-color: var(--text-color);
    transition: background-color 9999s ease-in-out 0s;
}