:root {
    --accountImageBackgroundColor: 45, 48, 54;
    --borderColor: 61, 68, 77;
    --dialogBoxContainerBackgroundColor: 33, 40, 48;
    --errorAlertColor: 248, 81, 73;
    --focusColor: 56, 139, 253;
    --greenBtnColor: 35, 134, 54;
    --greenBtnHoverColor: 41, 144, 59;
    --greenLevelColor1: 14, 68, 41;
    --greenLevelColor2: 0, 109, 50;
    --greenLevelColor3: 38, 166, 65;
    --greenLevelColor4: 57, 211, 8;
    --greyBtnColor: 33, 40, 48;
    --greyBtnHoverColor: 38, 44, 54;
    --headerBackgroundColor: 1, 4, 9;
    --headerBtnHover: 101, 108, 118;
    --infoAlertColor: 56, 139, 253;
    --levelColor0: 22, 27, 34;
    --mainBackgroundColor: 13, 17, 23;
    --menuBackgroundColor: 22, 27, 34;
    --redBtnColor: 248, 81, 73;
    --textColor1: 240, 246, 252;
    --textColor2: 145, 152, 161;
    --tooltipBackgroundColor: 61, 68, 77;
    --transitionDuration: 0.15s;
    --warningAlertColor: 187, 128, 9;
}

* {
    border: none;
    box-sizing: border-box;
    list-style-type: none;
    margin: 0px 0px 0px 0px;
    outline: none;
    padding: 0px 0px 0px 0px;
    scroll-behavior: smooth;
    text-decoration: none;
}

@font-face {
    font-family: NotoSans-Regular;
    font-style: normal;
    font-weight: normal;
    src: url(../assets/fonts/NotoSans-Regular.ttf) format("truetype");
}

@font-face {
    font-family: NotoSans-SemiBold;
    font-style: normal;
    font-weight: normal;
    src: url(../assets/fonts/NotoSans-SemiBold.ttf) format("truetype");
}

body {
    background-color: rgba(var(--mainBackgroundColor), 1);
    font-family: NotoSans-Regular;
    height: auto;
    width: auto;
}

body[data-current-theme="light"] {
    --accountImageBackgroundColor: 209, 212, 215;
    --borderColor: 209, 217, 224;
    --dialogBoxContainerBackgroundColor: 200, 209, 218;
    --errorAlertColor: 255, 129, 130;
    --focusColor: 9, 105, 218;
    --greenBtnColor: 31, 136, 61;
    --greenBtnHoverColor: 28, 129, 57;
    --greenLevelColor1: 155, 233, 168;
    --greenLevelColor2: 64, 196, 99;
    --greenLevelColor3: 48, 161, 78;
    --greenLevelColor4: 33, 110, 57;
    --greyBtnColor: 246, 248, 250;
    --greyBtnHoverColor: 239, 242, 245;
    --headerBackgroundColor: 234, 237, 240;
    --headerBtnHover: 129, 139, 152;
    --infoAlertColor: 84, 174, 255;
    --levelColor0: 235, 237, 240;
    --mainBackgroundColor: 255, 255, 255;
    --menuBackgroundColor: 255, 255, 255;
    --redBtnColor: 164, 14, 38;
    --textColor1: 31, 35, 40;
    --textColor2: 89, 99, 110;
    --tooltipBackgroundColor: 37, 41, 46;
    --warningAlertColor: 212, 167, 44;
}

body:has(#dialogBoxContainer.visibleEl) {
    overflow: hidden;
}

error-alert {
    background-color: rgba(var(--errorAlertColor), 0.1);
    border: solid 1px rgba(var(--errorAlertColor), 1);
}

error-alert > svg {
    fill: rgba(var(--errorAlertColor), 1);
}

warning-alert {
    background-color: rgba(var(--warningAlertColor), 0.1);
    border: solid 1px rgba(var(--warningAlertColor), 1);
}

warning-alert > svg {
    fill: rgba(var(--warningAlertColor), 1);
}

info-alert {
    background-color: rgba(var(--infoAlertColor), 0.1);
    border: solid 1px rgba(var(--infoAlertColor), 1);
}

info-alert > svg {
    fill: rgba(var(--infoAlertColor), 1);
}

#appHeader {
    background-color: rgba(var(--headerBackgroundColor), 1);
    border-bottom: solid 1px rgba(var(--borderColor), 1);
    column-gap: 8px;
    display: flex;
    height: 4rem;
    padding: 16px 16px 8px 16px;
    width: 100%;
}

svg.appIcon {
    fill: rgba(var(--textColor1), 1);
    height: 32px;
    user-select: none;
    width: 32px;
}

p.appName {
    color: rgba(var(--textColor1), 1);
    font-family: NotoSans-SemiBold;
    font-size: 24px;
    line-height: 32px;
    margin: 0px auto 0px 0px;
    user-select: none;
}

p.appName > span {
    font-size: 10px;
}

button.settingsBtn {
    align-items: center;
    background-color: transparent;
    border: solid 1px rgba(var(--borderColor), 1);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    height: 32px;
    justify-content: center;
    transition: ease var(--transitionDuration);
    width: 32px;
}

button.settingsBtn:hover {
    background-color: rgba(var(--headerBtnHover), 0.150);
}

button.settingsBtn > svg {
    fill: rgba(var(--textColor2), 1);
    height: 16px;
    width: 16px;
}

button.signInBtn {
    align-items: center;
    background-color: transparent;
    border: solid 1px rgba(var(--borderColor), 1);
    border-radius: 6px;
    color: rgba(var(--textColor1), 1);
    cursor: pointer;
    display: none;
    font-size: 14px;
    height: 32px;
    justify-content: center;
    padding: 4px 12px 4px 12px;
    transition: ease var(--transitionDuration);
    width: fit-content;
}

button.signInBtn:hover {
    background-color: rgba(var(--headerBtnHover), 0.150);
}

button.accountBtn {
    align-items: center;
    background-color: rgba(var(--accountImageBackgroundColor), 1);
    border-radius: 50%;
    cursor: pointer;
    display: none;
    height: 32px;
    justify-content: center;
    width: 32px;
}

button.accountBtn > img {
    height: 100%;
    user-select: none;
    width: 100%;
}

#appMain {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: fit-content;
    justify-content: center;
    min-height: calc(100vh - 4rem);
    padding: 2rem 1rem 1rem 1rem;
    width: 100%;
}

#appMain > error-alert {
    align-items: center;
    border-radius: 6px 6px 6px 6px;
    display: flex;
    height: fit-content;
    justify-content: start;
    margin: 0px 0px 1rem 0px;
    padding: 16px 16px 16px 16px;
    width: 100%;
}

#appMain > error-alert > svg {
    flex-shrink: 0;
    margin: 0px 8px 0px 0px;
}

#appMain > error-alert > p {
    color: rgba(var(--textColor1), 1);
    font-size: 14px;
}

#appMain > h1 {
    color: rgba(var(--textColor1), 1);
    font-family: NotoSans-SemiBold;
    font-size: 24px;
    padding: 16px 0px 16px 0px;
    text-align: center;
}

#appMain h2 {
    color: rgba(var(--textColor2), 1);
    font-size: 20px;
    padding: 16px 16px 16px 16px;
    text-align: center;
}

div.contributionGraphContainer {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: fit-content;
    justify-content: space-evenly;
    width: 100%;
}

div.contributionGraph {
    border: 1px solid rgba(var(--borderColor), 1);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    overflow-x: auto;
    padding: 16px 16px 12px 16px;
    width: fit-content;
}

table.contributionCalendar {
    border-collapse: collapse;
}

table.contributionCalendar > thead > tr.monthsTableRow {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0px 0px 8px 6px;
    padding: 0px 32.5px 0px 32.5px;
}

table.contributionCalendar > thead > tr.monthsTableRow > th {
    color: rgba(var(--textColor1), 1);
    font-size: 12px;
    margin: 0px 0px 0px 0px;
}

table.contributionCalendar > tbody {
    display: flex;
    flex-direction: column;
}

table.contributionCalendar > tbody > tr.dayTableRow {
    display: flex;
}

table.contributionCalendar > tbody > tr.dayTableRow > th {
    color: rgba(var(--textColor1), 1);
    font-size: 12px;
    line-height: 16px;
    min-width: 36px;
    text-align: left;
}

table.contributionCalendar > tbody > tr.dayTableRow > td {
    background-color: rgba(var(--levelColor0), 1);
    border: solid 1px rgba(27, 31, 35, 0.05);
    border-radius: 2px;
    height: 16px;
    margin: 0px 4px 4px 0px;
    position: relative;
    width: 16px;
}

table.contributionCalendar > tbody > tr.dayTableRow > td[data-status="0"] {
    visibility: hidden;
}

table.contributionCalendar > tbody > tr.dayTableRow > td[data-level="0"] {
    background-color: rgba(var(--levelColor0), 1);
}

table.contributionCalendar > tbody > tr.dayTableRow > td[data-level="1"] {
    background-color: rgba(var(--greenLevelColor1), 1);
}

table.contributionCalendar > tbody > tr.dayTableRow > td[data-level="2"] {
    background-color: rgba(var(--greenLevelColor2), 1);
}

table.contributionCalendar > tbody > tr.dayTableRow > td[data-level="3"] {
    background-color: rgba(var(--greenLevelColor3), 1);
}

table.contributionCalendar > tbody > tr.dayTableRow > td[data-level="4"] {
    background-color: rgba(var(--greenLevelColor4), 1);
}

tool-tip {
    background-color: rgba(var(--tooltipBackgroundColor), 1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 1);
    display: none;
    font-size: 12px;
    padding: 4px 8px 4px 8px;
    position: absolute;
    text-align: center;
    text-wrap: nowrap;
    transform: translate(calc(-50% + 16px / 2), calc(-100% - 4px));
    user-select: none;
    z-index: 999;
}

div.contributionGraphLegend {
    align-items: center;
    display: flex;
    gap: 4px;
    justify-content: right;
    padding: 4px 46px 4px 32px;
}

div.contributionGraphLegend > p {
    color: rgba(var(--textColor2), 1);
    font-size: 12px;
    line-height: 18px;
}

div.contributionGraphLegend > div {
    border-radius: 3px;
    height: 10px;
    width: 10px;
}

div.contributionGraphLegend > div.contributionGraphLegendLevel0 {
    background-color: rgba(var(--levelColor0), 1);
}

div.contributionGraphLegend > div.contributionGraphLegendLevel1 {
    background-color: rgba(var(--greenLevelColor1), 1);
}

div.contributionGraphLegend > div.contributionGraphLegendLevel2 {
    background-color: rgba(var(--greenLevelColor2), 1);
}

div.contributionGraphLegend > div.contributionGraphLegendLevel3 {
    background-color: rgba(var(--greenLevelColor3), 1);
}

div.contributionGraphLegend > div.contributionGraphLegendLevel4 {
    background-color: rgba(var(--greenLevelColor4), 1);
}

div.contributionGraphBtnWrapper {
    align-items: center;
    column-gap: 16px;
    display: flex;
    justify-content: center;
}

div.selectYearBtn {
    align-items: center;
    background-color: rgba(var(--greyBtnColor), 1);
    border: solid 1px rgba(var(--borderColor), 1);
    border-radius: 6px;
    color: rgba(var(--textColor1), 1);
    display: flex;
    font-family: NotoSans-SemiBold;
    font-size: 14px;
    height: 37px;
    justify-content: space-between;
}

div.selectYearBtn > button {
    align-items: center;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    height: 100%;
    justify-content: center;
    transition: ease var(--transitionDuration);
    width: 32px;
}

div.selectYearBtn > button:hover {
    background-color: rgba(var(--greyBtnHoverColor), 1);
}

div.selectYearBtn > button > svg {
    fill: rgba(var(--textColor1), 1);
}

div.selectYearBtn > button:nth-of-type(1) {
    border-radius: 6px 0px 0px 6px;
    border-right: solid 1px rgba(var(--borderColor), 1);
}

div.selectYearBtn > button:nth-of-type(2) {
    border-left: solid 1px rgba(var(--borderColor), 1);
    border-radius: 0px 6px 6px 0px;
}

div.selectYearBtn > span {
    color: rgba(var(--textColor1), 1);
    font-size: 14px;
    padding: 0px 16px 0px 16px;
}

button.pushArtBtn {
    background-color: rgba(var(--greyBtnColor), 1);
    border: solid 1px rgba(var(--borderColor), 1);
    border-radius: 6px;
    color: rgba(var(--textColor1), 1);
    cursor: pointer;
    font-family: NotoSans-SemiBold;
    font-size: 14px;
    padding: 8px 16px 8px 16px;
    transition: ease var(--transitionDuration);
}

button.pushArtBtn:hover {
    background-color: rgba(var(--greyBtnHoverColor), 1);
}

#dialogBoxContainer {
    align-items: center;
    animation: dropFadeOut var(--transitionDuration) ease;
    background-color: rgba(var(--dialogBoxContainerBackgroundColor), 0.4);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    opacity: 0;
    pointer-events: all;
    position: fixed;
    top: 0;
    visibility: hidden;
    width: 100%;
}

p.creatorName {
    color: rgba(var(--textColor1), 1);
    font-size: 14px;
}

p.creatorName > a {
    color: rgba(var(--focusColor), 1);
    text-decoration: underline;
}

div.menuDialogBox {
    animation: dropFadeOut var(--transitionDuration) ease;
    background-color: rgba(var(--menuBackgroundColor), 1);
    border: solid 1px rgba(var(--borderColor), 1);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    height: fit-content;
    max-width: 480px;
    opacity: 0;
    position: absolute;
    visibility: hidden;
    width: 87.5%;
    z-index: 999;
}

div.menuDialogBox > div.header {
    align-items: center;
    border-bottom: solid 1px rgba(var(--borderColor), 1);
    display: flex;
    height: 50px;
    justify-content: start;
    padding: 8px 8px 8px 16px;
    width: 100%;
}

div.menuDialogBox > div.header > p {
    color: rgba(var(--textColor1), 1);
    font-family: NotoSans-SemiBold;
    font-size: 14px;
}

div.menuDialogBox > div.header > button.closeMenuBtn {
    align-items: center;
    background-color: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    height: 32px;
    justify-content: center;
    margin: 0px 0px 0px auto;
    transition: ease var(--transitionDuration);
    width: 32px;
}

div.menuDialogBox > div.header > button.closeMenuBtn:hover {
    background-color: rgba(101, 108, 118, 0.2);
}

div.menuDialogBox > div.header > button.closeMenuBtn > svg {
    fill: rgba(var(--textColor2), 1);
    height: 16px;
    pointer-events: none;
    width: 16px;
}

div.menuDialogBox > div.body {
    display: flex;
    flex-direction: column;
    height: fit-content;
    min-height: 8rem;
    padding: 16px 16px 16px 16px;
    width: 100%;
}

div.menuDialogBox > div.body > div {
    position: relative;
    row-gap: 4px;
}

div.menuDialogBox > div.body error-alert,
div.menuDialogBox > div.body warning-alert,
div.menuDialogBox > div.body info-alert {
    align-items: center;
    border-radius: 6px 6px 6px 6px;
    display: flex;
    height: fit-content;
    justify-content: start;
    margin: 0px 0px 16px 0px;
    padding: 8px 8px 8px 8px;
    width: 100%;
}

div.menuDialogBox > div.body error-alert > svg,
div.menuDialogBox > div.body warning-alert > svg,
div.menuDialogBox > div.body info-alert > svg {
    flex-shrink: 0;
    margin: 0px 8px 0px 0px;
}

div.menuDialogBox > div.body error-alert > p,
div.menuDialogBox > div.body warning-alert > p,
div.menuDialogBox > div.body info-alert > p {
    color: rgba(var(--textColor1), 1);
    font-size: 12px;
}

div.menuDialogBox > div.body > hr {
    background-color: rgba(var(--borderColor), 1);
    height: 1px;
    margin: 8px 0px 8px 0px;
    width: 100%;
}

div.menuDialogBox > div.body > div > p:nth-of-type(1) {
    color: rgba(var(--textColor1), 1);
    font-family: NotoSans-SemiBold;
    font-size: 14px;
}

div.menuDialogBox > div.body > div > p {
    color: rgba(var(--textColor2) ,1);
    font-size: 12px;
    line-height: 16px;
}

div.menuDialogBox > div.footer {
    align-items: center;
    border-top: solid 1px rgba(var(--borderColor), 1);
    display: flex;
    height: 64px;
    justify-content: end;
    padding: 16px 16px 16px 16px;
    width: 100%;
}

#settingsMenu > div.body {
    height: fit-content;
}

#settingsMenu > div.body > div:nth-of-type(1) {
    display: flex;
    flex-direction: column;
    height: fit-content;
    width: 100%;
}

#settingsMenu > div.body > div:nth-of-type(1) > div.themeSelectContainer {
    column-gap: 8px;
    display: flex;
    height: fit-content;
    width: 100%;
}

#settingsMenu > div.body > div:nth-of-type(1) > div.themeSelectContainer > div.themeSelectInput {
    border: solid 1px rgba(var(--borderColor), 1);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 8rem;
    transition: ease var(--transitionDuration);
    width: 50%;
}

#settingsMenu > div.body > div:nth-of-type(1) > div.themeSelectContainer > div.themeSelectInput[data-current-theme="true"] {
    border-color: rgba(var(--focusColor), 1);
}

#settingsMenu > div.body > div:nth-of-type(1) > div.themeSelectContainer > div.themeSelectInput > div.iconContainer {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}

#settingsMenu > div.body > div:nth-of-type(1) > div.themeSelectContainer > div.themeSelectInput > div.iconContainer > svg {
    fill: rgba(var(--textColor1), 1);
    height: 37.5%;
    width: fit-content;
}

#settingsMenu > div.body > div:nth-of-type(1) > div.themeSelectContainer > div.themeSelectInput > div.selectIndicator {
    align-items: center;
    border-top: solid 1px rgba(var(--borderColor), 1);
    column-gap: 8px;
    display: flex;
    height: 36px;
    justify-content: start;
    padding: 0px 8px 0px 8px;
    width: 100%;
}

#settingsMenu > div.body > div:nth-of-type(1) > div.themeSelectContainer > div.themeSelectInput > div.selectIndicator > div {
    background-color: rgba(var(--greyBtnColor), 1);
    border: solid 1px rgba(var(--borderColor), 1);
    border-radius: 50%;
    height: 13px;
    position: relative;
    transition: ease var(--transitionDuration);
    width: 13px;
}

#settingsMenu > div.body > div:nth-of-type(1) > div.themeSelectContainer > div.themeSelectInput:hover > div.selectIndicator > div,
#settingsMenu > div.body > div:nth-of-type(1) > div.themeSelectContainer > div.themeSelectInput[data-current-theme="true"] > div.selectIndicator > div {
    align-items: center;
    border: solid 1px rgba(var(--textColor1), 1);
    display: flex;
    justify-content: center;
}

#settingsMenu > div.body > div:nth-of-type(1) > div.themeSelectContainer > div.themeSelectInput[data-current-theme="true"] > div.selectIndicator > div::before {
    background-color: rgba(var(--textColor1), 1);
    border-radius: 50%;
    content: "";
    height: 7px;
    width: 7px;
}

#settingsMenu > div.body > div:nth-of-type(1) > div.themeSelectContainer > div.themeSelectInput > div.selectIndicator > p {
    color: rgba(var(--textColor1), 1);
    font-family: NotoSans-SemiBold;
    font-size: 12px;
    line-height: 13px;
}

#settingsMenu > div.body > div:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    height: fit-content;
    width: 100%;
}

#settingsMenu > div.body > div:nth-of-type(2) > button.selectLanguageInput {
    align-items: center;
    background-color: rgba(var(--mainBackgroundColor), 1);
    border: solid 1px rgba(var(--borderColor), 1);
    border-radius: 6px;
    color: rgba(var(--textColor1), 1);
    cursor: pointer;
    display: flex;
    font-size: 14px;
    height: 32px;
    justify-content: space-between;
    padding: 0px 12px 0px 12px;
    transition: ease var(--transitionDuration);
    width: 100%;
}

#settingsMenu > div.body > div:nth-of-type(2) > button.selectLanguageInput:focus {
    border-color: rgba(var(--focusColor), 1);
}

#settingsMenu > div.body > div:nth-of-type(2) > button.selectLanguageInput > svg {
    fill: rgba(var(--textColor1), 1);
    height: 16px;
    width: 16px;
}

#settingsMenu > div.body > div:nth-of-type(2) > ul.selectLanguageInputOptions {
    animation: dropFadeOut var(--transitionDuration) ease;
    background-color: rgba(var(--mainBackgroundColor), 1);
    border: solid 1px rgba(var(--borderColor), 1);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    opacity: 0;
    padding: 8px 8px 8px 8px;
    position: absolute;
    row-gap: 4px;
    visibility: hidden;
    width: 100%;
    z-index: 999;
}

#settingsMenu > div.body > div:nth-of-type(2) > ul.selectLanguageInputOptions > li {
    align-items: center;
    border-radius: 6px;
    color: rgba(var(--textColor1), 1);
    cursor: pointer;
    display: flex;
    font-size: 14px;
    height: 32px;
    justify-content: start;
    line-height: 5px;
    padding: 6px 8px 6px 8px;
    transition: ease var(--transitionDuration);
    width: 100%;
}

#settingsMenu > div.body > div:nth-of-type(2) > ul.selectLanguageInputOptions > li[data-selected="true"],
#settingsMenu > div.body > div:nth-of-type(2) > ul.selectLanguageInputOptions > li:hover {
    background-color: rgba(101, 108, 118, 0.2);
}

#settingsMenu > div.body > div:nth-of-type(2) > ul.selectLanguageInputOptions > li > svg {
    fill: rgba(var(--textColor2), 1);
    height: 16px;
    margin: 0px 8px 0px 0px;
    visibility: hidden;
    width: 16px;
}

#settingsMenu > div.body > div:nth-of-type(2) > ul.selectLanguageInputOptions > li[data-selected="true"] > svg {
    visibility: visible;
}

#settingsMenu > div.footer > button.resetSettingsBtn {
    align-items: center;
    background-color: rgba(var(--greyBtnColor), 1);
    border: solid 1px rgba(var(--borderColor), 1);
    border-radius: 6px;
    color: rgba(var(--textColor1), 1);
    cursor: pointer;
    display: flex;
    font-family: NotoSans-SemiBold;
    font-size: 12px;
    height: 32px;
    justify-content: center;
    margin: 0px auto 0px 0px;
    padding: 0px 12px 0px 12px;
    text-wrap: nowrap;
    transition: ease var(--transitionDuration);
    width: fit-content;
}

#settingsMenu > div.footer > button.resetSettingsBtn:hover {
    background-color: rgba(var(--greyBtnHoverColor), 1);
}

#settingsMenu > div.footer > button.saveSettingsBtn {
    align-items: center;
    background-color: rgba(var(--greenBtnColor), 1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 1);
    cursor: pointer;
    display: flex;
    font-family: NotoSans-SemiBold;
    font-size: 12px;
    height: 32px;
    justify-content: center;
    padding: 0px 12px 0px 12px;
    text-wrap: nowrap;
    transition: ease var(--transitionDuration);
    width: fit-content;
}

#settingsMenu > div.footer > button.saveSettingsBtn:hover {
    background-color: rgba(var(--greenBtnHoverColor), 1);
}

#signInMenu > div.body > div:nth-of-type(1) {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
}

#signInMenu > div.body > div:nth-of-type(1) > input.signInTokenInput {
    background-color: rgba(var(--levelColor0), 1);
    border: solid 1px rgba(var(--borderColor), 1);
    border-radius: 6px;
    color: rgba(var(--textColor1), 1);
    font-size: 14px;
    padding: 5px 12px 5px 12px;
    transition: ease var(--transitionDuration);
}

#signInMenu > div.body > div:nth-of-type(1) > input.signInTokenInput:focus {
    background-color: rgba(var(--mainBackgroundColor), 1);
    border-color: rgba(var(--focusColor), 1);
}

#signInMenu > div.body > div:nth-of-type(1) > p > a {
    color: rgba(var(--focusColor), 1);
    text-decoration: underline;
}

#signInMenu > div.body > div:nth-of-type(1) > div.checkboxContainer {
    align-items: center;
    column-gap: 8px;
    display: flex;
    height: fit-content;
    margin: 12px 0px 0px 0px;
    width: 100%;
}

#signInMenu > div.body > div:nth-of-type(1) > div.checkboxContainer > button.tosCheckbox {
    align-items: center;
    background-color: rgba(var(--mainBackgroundColor), 1);
    border: solid 1px rgba(var(--borderColor), 1);
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    height: 16px;
    justify-content: center;
    transition: var(--transitionDuration) ease;
    width: 16px;
}

#signInMenu > div.body > div:nth-of-type(1) > div.checkboxContainer > button.tosCheckbox[data-checked="true"] {
    background-color: rgba(var(--focusColor), 1);
    border-color: rgba(var(--focusColor), 1);
}

#signInMenu > div.body > div:nth-of-type(1) > div.checkboxContainer > button.tosCheckbox > svg {
    fill: rgba(255, 255, 255, 1);
    height: 12px;
    transition: 0.075s ease;
    visibility: visible;
    width: 12px;
}

#signInMenu > div.body > div:nth-of-type(1) > div.checkboxContainer > button.tosCheckbox[data-checked="false"] > svg {
    visibility: hidden;
}

#signInMenu > div.body > div:nth-of-type(1) > div.checkboxContainer > p {
    color: rgba(var(--textColor1), 1);
    font-family: NotoSans-SemiBold;
    font-size: 12px;
    line-height: 16px;
}

#signInMenu > div.body > div:nth-of-type(1) > div.checkboxContainer > p > a {
    color: rgba(var(--focusColor), 1);
    text-decoration: underline;
}

#signInMenu > div.footer > button.signInTokenBtn {
    align-items: center;
    background-color: rgba(var(--greenBtnColor), 1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 1);
    cursor: pointer;
    display: flex;
    font-family: NotoSans-SemiBold;
    font-size: 12px;
    height: 32px;
    justify-content: center;
    padding: 0px 12px 0px 12px;
    text-wrap: nowrap;
    transition: ease var(--transitionDuration);
    width: fit-content;
}

#signInMenu > div.footer > button.signInTokenBtn:hover {
    background-color: rgba(var(--greenBtnHoverColor), 1);
}

#accountMenu > div.body > div:nth-of-type(1) {
    align-items: center;
    column-gap: 8px;
    display: flex;
}

#accountMenu > div.body > div:nth-of-type(1) > img {
    background-color: rgba(var(--accountImageBackgroundColor), 1);
    border-radius: 50%;
    height: 32px;
    user-select: none;
    width: 32px;
}

#accountMenu > div.body > div:nth-of-type(1) > span {
    color: rgba(var(--textColor1), 1);
    font-family: NotoSans-SemiBold;
    font-size: 14px;
}

#accountMenu > div.body > div:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    height: fit-content;
    width: 100%;
}

#accountMenu > div.body > div:nth-of-type(2) > div.accountTokenInputContainer {
    display: flex;
    height: 32px;
    width: 100%;
}

#accountMenu > div.body > div:nth-of-type(2) > div.accountTokenInputContainer > div.accountTokenInputIconContainer {
    align-items: center;
    background-color: rgba(var(--greyBtnColor), 1);
    border: solid 1px rgba(var(--borderColor), 1);
    border-radius: 6px 0px 0px 6px;
    border-right: none;
    display: flex;
    height: 32px;
    justify-content: center;
    transition: ease var(--transitionDuration);
    width: 32px;
}

#accountMenu > div.body > div:nth-of-type(2) > div.accountTokenInputContainer:has(input.accountTokenInput:focus) > div.accountTokenInputIconContainer {
    border-color: rgba(var(--focusColor), 1);
}

#accountMenu > div.body > div:nth-of-type(2) > div.accountTokenInputContainer > div.accountTokenInputIconContainer > svg {
    fill: rgba(var(--textColor2), 1);
    height: 16px;
    width: 16px;
}

#accountMenu > div.body > div:nth-of-type(2) > div.accountTokenInputContainer > input.accountTokenInput {
    background-color: transparent;
    border: solid 1px rgba(var(--borderColor), 1);
    border-radius: 0px 6px 6px 0px;
    color: rgba(var(--textColor2), 1);
    flex-grow: 1;
    font-size: 18px;
    height: 32px;
    padding: 10px 8px 0px 8px;
    transition: border ease var(--transitionDuration);
}

#accountMenu > div.body > div:nth-of-type(2) > div.accountTokenInputContainer > input.accountTokenInput:focus {
    background-color: rgba(var(--mainBackgroundColor), 1);
    border-color: rgba(var(--focusColor), 1);
    font-size: 14px;
    padding: 5px 8px 5px 8px;
}

#accountMenu > div.body > div:nth-of-type(2) > p > a {
    color: rgba(var(--focusColor), 1);
    text-decoration: underline;
}

#accountMenu > div.footer > button.revertAccountBtn {
    align-items: center;
    background-color: rgba(var(--redBtnColor), 0.1);
    border: solid 1px rgba(var(--redBtnColor), 1);
    border-radius: 6px;
    color: rgba(var(--redBtnColor), 1);
    cursor: pointer;
    display: flex;
    font-family: NotoSans-SemiBold;
    font-size: 12px;
    height: 32px;
    justify-content: center;
    margin: 0px auto 0px 0px;
    padding: 0px 12px 0px 12px;
    text-wrap: nowrap;
    transition: ease var(--transitionDuration);
    width: fit-content;
}

#accountMenu > div.footer > button.revertAccountBtn:hover {
    background-color: rgba(var(--redBtnColor), 1);
    color: rgba(255, 255, 255, 1);
    width: fit-content;
}

#accountMenu > div.footer > button.signOutBtn {
    align-items: center;
    background-color: rgba(var(--greyBtnColor), 1);
    border: solid 1px rgba(var(--borderColor), 1);
    border-radius: 6px;
    color: rgba(var(--textColor1), 1);
    column-gap: 8px;
    cursor: pointer;
    display: flex;
    font-family: NotoSans-SemiBold;
    font-size: 12px;
    height: 32px;
    justify-content: center;
    padding: 0px 12px 0px 12px;
    text-wrap: nowrap;
    transition: ease var(--transitionDuration);
    width: fit-content;
}

#accountMenu > div.footer > button.signOutBtn:hover {
    background-color: rgba(var(--greyBtnHoverColor), 1);
}

#accountMenu > div.footer > button.signOutBtn > svg {
    fill: rgba(var(--textColor1), 1);
}

#loadingMenu > div.body > div:nth-of-type(1) {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    row-gap: 16px;
    width: 100%;
}

#loadingMenu > div.body > div:nth-of-type(1) > svg {
    animation: loadingSpinner 1s cubic-bezier(0, 0, 1, 1) infinite;
    fill: transparent;
    height: 32px;
    width: 32px;
}

#loadingMenu > div.body > div:nth-of-type(1) > svg > circle {
    cx: 8px;
    cy: 8px;
    r: 7px;
    stroke: rgba(var(--textColor1), 1);
    stroke-opacity: 0.25;
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
}

#loadingMenu > div.body > div:nth-of-type(1) > svg > path {
    stroke: rgba(var(--textColor1), 1);
    stroke-linecap: round;
}

#loadingMenu > div.body > div:nth-of-type(1) > p {
    color: rgba(var(--textColor1), 1);
    font-size: 14px;
}

#loadingMenu> div.footer > button.closeLoadingMenuBtn {
    align-items: center;
    background-color: rgba(var(--greyBtnColor), 1);
    border: solid 1px rgba(var(--borderColor), 1);
    border-radius: 6px;
    color: rgba(var(--textColor1), 1);
    cursor: not-allowed;
    display: flex;
    font-family: NotoSans-SemiBold;
    font-size: 12px;
    height: 32px;
    justify-content: center;
    margin: 0px 0px 0px auto;
    padding: 0px 12px 0px 12px;
    text-wrap: nowrap;
    transition: ease var(--transitionDuration);
    width: fit-content;
}

#loadingMenu> div.footer > button.closeLoadingMenuBtn:hover {
    background-color: rgba(var(--greyBtnHoverColor), 1);
}

.visibleEl {
    animation: fadeIn var(--transitionDuration) ease forwards !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.visibleElAnimScale {
    animation: scaleFade 0.25s cubic-bezier(0.33, 1, 0.68, 1) running !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.visibleElAnimDrop {
    animation: dropFadeIn var(--transitionDuration) ease forwards !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@keyframes scaleFade {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes dropFadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes dropFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dropFadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-4px);
    }
}

@keyframes loadingSpinner {
    100% {
        transform: rotate(1turn);
    }
}

@media screen and (max-width: 600px) {
    div.contributionGraphLegend {
        padding: 4px 0px 4px 32px;
    }
}

@media screen and (max-width: 380px) {
    div.contributionGraphBtnWrapper {
        flex-direction: column;
        row-gap: 16px;
    }
}