@import url("styleVariables.css");

/* ================================== Register & Login page ================================== */
.accountForm {
    min-height: 94dvh;
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    align-content: space-evenly;
    gap: 5%;
}

.accountForm img {
    width: 100%;
    padding-bottom: 2dvh;
}

.accountForm form {
    background-color: var(--white);
    padding: 3dvh;
    max-height: 60dvh;
    width: 18dvw;
    box-shadow: var(--boxShadow);
    border-radius: 1dvh;
}

.accountForm div {
    padding: 1dvh;
    font-size: var(--fontNormal);
}

.accountForm .rememberLogin {
    display: grid;
    grid-template-columns: 6% auto;
}

.accountForm .rememberLogin p {
    text-align: left;
    margin-left: 1dvh;
    font-size: var(--fontNormal);
}

.accountForm div input {
    width: 98.62%;
    height: 2dvh;
    font-size: var(--fontSmall);
}

.accountForm div p {
    font-size: var(--fontSmall);
    text-align: center;
}

/* --------------- Small screen styles --------------- */
@media screen and (max-width: 600px) {
    .accountForm form {
        width: 75dvw;
    }

    .right-align {
        text-align: right;
        padding-top: 0.5dvh;
        padding-right: 1dvh;
    }
}
/* --------------- Small screen styles --------------- */
/* ================================== Register & Login page ================================== */

/* ================================== Reset password page ================================== */
.accountForm .requestForm input,
.accountForm .resetForm input {
    height: 3dvh;
    font-size: var(--fontNormal);
}

.accountForm .requestForm h1,
.accountForm .resetForm h1,
.accountForm .succesForm h1 {
    font-size: var(--fontNormal);
    font-weight: var(--fontBold);
    text-align: center;
    padding: 1dvh;
}

.accountForm .succesForm {
    background-color: var(--white);
    padding: 3dvh;
    max-height: 60dvh;
    width: 18dvw;
    box-shadow: var(--boxShadow);
    border-radius: 1dvh;
}

.accountForm .succesForm p {
    padding: 2dvh;
}
/* ================================== Reset password page ================================== */

/* ================================== Index page ================================== */
/* Map */
#map {
    height: calc(var(--pageHeight) - var(--bottomTabHeight));
    width: calc(100dvw - var(--sideTabWidth) - var(--sideMenuWidth));
    z-index: 0;
    position: relative;
    transition: 0.2s;
    background-color: var(--mediumGray);
    cursor: pointer;
}

.secondaryTool {
    clear: none !important;
}

.infoPopup {
    height: 10dvh;
    font-size: var(--fontTiny);
}

.infoPopup h1 {
    font-size: var(--fontSmall);
    font-weight: var(--fontBold);
}

/* Quick data view */
/* Quick view btn */
#quickView,
.primaryTool {
    height: 32px;
    width: 32px;
    border: var(--darkBorder);
    background-clip: padding-box;
    background-color: var(--invertWhite) !important;
    border-radius: 4px;
    text-align: center;
    color: var(--invertBlack) !important;
}

.primaryTool,
.primaryTool button {
    height: 30px !important;
    width: 30px !important;
}

#quickView:hover,
.primaryTool:hover {
    background-color: var(--lightGray);
    color: var(--black);
}

#dataDiv {
    position: fixed;
    background-color: transparent;
    z-index: 999;
    margin-top: 10px;
    margin-left: 55px;
    border: var(--darkBorder);
}

#dataDiv .scrollArea {
    max-height: 35dvh;
    max-width: 20dvw;
}

#dataDiv .scrollArea tr {
    background-color: var(--transOdd);
}

#dataDiv .scrollArea tr:nth-child(even) {
    background-color: var(--transEven);
}
#dataDiv .scrollArea tr th,
#dataDiv .scrollArea tr td {
    padding: clamp(0px, 0.5dvh, 10px);
    font-size: var(--fontNormal);
    font-weight: var(--fontBold);
}

#dataDiv p {
    background-color: var(--fadedWhite);
    font-size: var(--fontLarge);
    font-weight: var(--fontBig);
    padding: clamp(0px, 0.5dvh, 10px);
}

/* Map selector */
.map-style-toggle {
    position: relative;
    background: var(--white);
    border-radius: 0.5dvh;
    box-shadow: var(--boxShadow);
    margin: 10px;
    padding: 0;
    width: auto;
}

.map-style-toggle-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(35px, 3dvw, 45px);
    height: clamp(35px, 3dvw, 45px);
    cursor: pointer;
    background: var(--white);
    border-radius: 0.4dvh;
}

.map-style-toggle-button svg {
    font-size: var(--fontNormal);
    color: var(--invertBlack);
}

.map-style-toggle-panel {
    display: none;
    flex-direction: column;
    padding: 0.5dvh;
    position: absolute;
    right: 0;
    bottom: 0;
    margin-bottom: 0;
    z-index: 999;
    background: var(--white);
    border-radius: 0.5dvh;
    box-shadow: var(--boxShadow);
    min-width: max-content;
    min-height: max-content;
    background-color: var(--invertWhite);
    color: var(--invertBlack);
}

.map-style-toggle-panel.open {
    display: flex;
}

.check-option {
    margin: 0.3dvh 0;
    font-size: var(--fontTiny);
    display: flex;
    gap: 0.5dvh;
    align-items: center;
}

/* Map search & fullscreen button */
.mapSearchButton button,
.maplibregl-ctrl-group button,
.maplibregl-ctrl-fullscreen {
    height: 30px;
    width: 30px;
    border-radius: 0.4dvh;
    border: var(--darkBorder);
    background-color: var(--invertWhite);
    color: var(--invertBlack);
}

.mapSearchButton button:hover,
.maplibregl-ctrl-fullscreen:hover {
    background-color: var(--lightGray) !important;
}

/* Ship symbol */
.customMarker {
    background-color: transparent;
    width: 15px;
    height: 35px;
    transform-origin: center bottom;
}

.compTooltip {
    background-color: var(--fadedGray) !important;
    font-size: var(--fontXTiny) !important;
    font-weight: var(--fontBold) !important;
    padding: 0.1dvh !important;
}

.maplibregl-popup-content-wrapper,
.maplibregl-popup-content {
    width: 100%;
    margin: 0;
    padding: 0;
}

.machinePopup {
    width: 100%;
    left: 1dvw;
    right: 1dvw;
    padding: 0;
}

.machinePopup h3 {
    font-size: var(--fontNormal);
    font-weight: var(--fontBold);
    width: 100%;
}

.machinePopup li {
    font-size: var(--fontSmall);
    margin-bottom: 0.5dvh;
    width: 100%;
}

.machinePopup span {
    font-size: var(--fontTiny);
}

.machinePopup ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.trackPopup {
    width: 100%;
    left: 1dvw;
    right: 1dvw;
    padding: 0;
    font-size: var(--fontTiny);
    font-weight: var(--fontBold);
}

.trackPopup h3 {
    font-size: var(--fontNormal);
    font-weight: var(--fontBold);
    width: 100%;
}

.trackPopup li {
    font-size: var(--fontSmall);
    margin-bottom: 0.5dvh;
    width: 100%;
}

.trackPopup span {
    font-size: var(--fontTiny);
}

.trackPopup ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tooltip-enlarged {
    font-size: clamp(0px, 1.3dvh, 15px);
    font-weight: var(--fontBold);
}

/* Side tabs */
.sideTabMenu {
    background-color: var(--invertGray);
    border: var(--darkBorder);
    box-shadow: var(--boxShadow);
    right: var(--sideTabWidth);
    z-index: 2;
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--sideMenuWidth);
    padding-top: clamp(0px, 5.723dvh, 75px);
    transition: 0.2s;
}

.sideTabMenu li {
    border-bottom: 0.1dvh solid var(--black);
    padding: clamp(0px, 2dvh, 25px) 0px;
    font-size: var(--fontNormal);
    color: var(--invertBlack);
    cursor: pointer;

    text-align: center;
}

.sideTabMenu li:hover {
    background-color: var(--fadedBlack);
    color: var(--white);
}

.sideTabMenu .activeView {
    background-color: var(--fadedBlack);
    color: var(--white);
}

.sideTabMenu #sideMenuClose {
    position: absolute;
    display: none;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 0.1dvh solid var(--black);
    border-bottom: none;
}

/* .sideTab .scrollArea #machineList, */
.sideTab {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: var(--white);
    box-shadow: var(--boxShadow);
    overflow-x: hidden;
    padding-top: clamp(0px, 5.723dvh, 75px);
    transition: 0.2s;
    display: grid;
    grid-template-columns: 15% 85%;
}

.sideTab .scrollArea {
    background-color: var(--invertWhite);
    height: var(--pageHeight);
    box-shadow: inset -1dvh 0 2dvh 0dvh var(--fadedBlack);
    width: var(--sideTabWidth);
}

.sideTab .scrollArea #deviceList,
.sideTab .scrollArea #offlineList,
.sideTab .scrollArea #companyList,
.sideTab .scrollArea #iconList,
.sideTab .scrollArea #polygonList,
.sideTab .scrollArea #settingList {
    display: none;
}

.sideTab .scrollArea h1 {
    background-color: var(--invertGray);
    border-bottom: var(--lightBorder);
    box-shadow: var(--bottomShadow);
    color: var(--invertBlack);
    font-size: var(--fontBig);
    font-weight: var(--fontBold);
    text-align: center;
    padding: 2dvh;
    z-index: 1;
    position: sticky;
}

.sideTab .scrollArea p {
    background-color: var(--invertGray);
    border-bottom: var(--darkBorder);
    font-weight: var(--fontBold);
    font-size: var(--fontLarge);
    text-align: center;
    padding: 1dvh 0;
}

.sideTab .scrollArea li {
    background-color: var(--invertFadedGray);
    border-bottom: var(--darkBorder);
    padding: clamp(0px, 2dvh, 30px);
    text-decoration: none;
    font-size: var(--fontNormal);
    color: var(--invertBlack);
    display: block;
    cursor: pointer;
}

.sideTab .scrollArea li:hover {
    background-color: var(--fadedLightGray);
    color: var(--white);
}

.sideTab .scrollArea #listFiller {
    display: none;
}

.sideTab .scrollArea li.clicked {
    background-color: var(--mediumGray);
    z-index: 10;
}

.sideTab .scrollArea .secondLiElement {
    padding: 1dvh;
    background-color: var(--evenRow);
}

.sideTab .scrollArea .secondLiElement:hover {
    background-color: var(--fadedLightGray);
    color: var(--white);
}

.sideTab .scrollArea .secondLiElement.clicked {
    background-color: var(--lightGray);
}

.sideTab.sideOpen {
    width: var(--sideTabWidth);
}

.sideTab.sideClosed {
    width: 0px;
}

.sideTab #trackLoading {
    position: relative;
}

.sideTab #trackLoading::before {
    content: "";
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--fadedLightGray);
    filter: grayscale(100%);
    pointer-events: none;
    padding-top: 6dvh;
    z-index: 999;
    display: none;
}

.sideTab #trackLoading.loading::before {
    display: block;
    pointer-events: none;
}

.sideTab .spinner {
    z-index: 9999;
}

/* Li machine expandable */
.expandMachine {
    display: none;
    border: none;
    box-shadow: none;
}

.expandMachine.expanded {
    display: block;
    z-index: 10;
}

.expandMachine .mdImages {
    height: clamp(0px, 30dvh, 350px);
    width: 100%;
    border-top: var(--darkBorder);
    border-bottom: var(--darkBorder);
    object-fit: cover;
}

.expandMachine .machineLi {
    margin-top: -0.4dvh;
    font-size: var(--fontNormal);
}

.expandMachine .machineLi th,
.expandMachine .machineLi td {
    width: 50%;
    font-size: var(--fontNormal);
    color: var(--invertBlack);
    text-align: left;
    padding: 0.5dvh;
    max-width: 0;
}

.expandMachine .machineLi td .invisBtn {
    color: var(--invertBlack);
}

.expandMachine .machineLi .num {
    height: 2dvh;
    width: 50%;
    margin: 0.5dvh 0dvh;
    float: right;
    box-shadow: none;
    font-size: var(--fontNormal);
}

.expandMachine .machineLi div {
    height: 100%;
}

.expandMachine .machineLi .scrollArea {
    border: var(--darkBorder);
}

.expandMachine .machineLi button {
    width: 100%;
    height: 100%;
    font-size: var(--fontSmall);
    background-color: transparent;
    color: var(--invertBlack);
    border: none;
    cursor: pointer;
}

.expandMachine .machineLi button:hover {
    background-color: var(--fadedLightGray);
}

.expandMachine .compareCheckbox,
.expandMachine .trackingCheckbox,
.expandMachine .compOnlyCheckbox,
.expandMachine .tracksCheckbox {
    width: 2.3dvh;
    height: 2.3dvh;
    border: none;
    box-shadow: none;
    vertical-align: middle;
    margin: 0.5dvh 0;
}

.expandMachine .iconInputs,
.expandMachine .polygonInputs {
    color: var(--invertBlack);
    height: 100%;
    width: 100%;
}

#settingList .expandMachine th button {
    font-size: var(--fontNormal);
    color: var(--invertBlack);
}

#settingList .expandMachine td #editCustomIconType {
    color: var(--invertBlack);
}

.sideTab .scrollArea .popup-content h1 {
    font-size: var(--fontPopup);
    font-weight: var(--fontBold);
    padding: 2dvh; 
    background-color: inherit;
    border-bottom: inherit;
    box-shadow: inherit;
}

.sideTab .scrollArea .mdSafeArea {
    background-color: var(--white);
    padding: 1dvh;
    font-size: var(--fontSmall);
}

.sideTab .scrollArea .mdSafeArea:hover {
    background-color: var(--fadedWhite) !important;
    color: var(--white);
}

/* --------------- Small screen styles (Side tab) --------------- */
@media screen and (max-width: 500px) {
    .sideTab #trackLoading::before {
        width: 100dvw;
    }

    .expandMachine .mdImages {
        width: clamp(0px, 100dvw, 500px);
    }

    .sideTab {
        margin-top: 0;
    }

    .sideTab.sideOpen {
        width: calc(100dvw - var(--sideMenuWidth));
    }

    .machinePopup {
        width: 50dvw;
    }

    .sideTab #listFiller {
        display: block;
        border: none;
        height: 4dvh;
    }

    .sideTab #listFiller:hover {
        background-color: rgba(0, 0, 0, 0);
    }

    .map-style-toggle-panel {
        top: 0;
    }
}

@media screen and (max-height: 500px) {
    #map {
        height: 88dvh;
    }

    .machinePopup {
        width: 25dvw;
    }

    .sideTab,
    .sideTabMenu {
        padding-top: 12dvh;
    }

    .sideTab .scrollArea {
        height: 88dvh;
    }

    .sideTab #listFiller {
        display: block;
        border: none;
        height: 4dvh;
    }

    .sideTab #listFiller:hover {
        background-color: var(--black);
    }

    .sideTab #trackLoading::before {
        width: 26dvw;
    }

    .expandMachine .mdImages {
        width: clamp(0px, 25dvw, 500px);
    }
}
/* --------------- Small screen styles --------------- */

/* Graph bottom tabs */
.bottomTabMain {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
}

.bottomTabMain #bottomTabBtn {
    position: fixed;
    visibility: hidden;
    left: 125px;
    bottom: var(--bottomTabHeight);
    transform: translateY(50%);
    font-size: var(--fontNormal);
    padding: clamp(10px, 2dvh, 25px) 1.5dvh clamp(50px, 10dvh, 75px);
    border-radius: 4dvh;
    background-color: var(--invertDarkFadedGray);
    transition: 0.2s;
    z-index: 10;
    pointer-events: auto;
}

.bottomTab {
    position: absolute;
    height: 0;
    bottom: 0;
    left: 0;
    width: -webkit-fill-available;
    background-color: var(--invertGray);
    box-shadow: var(--boxShadow);
    overflow: hidden;
    transition: 0.2s;
    z-index: 10;
    pointer-events: auto;
}

.bottomTab.bottomOpen {
    height: var(--bottomTabHeight);
    width: calc(100% - var(--sideTabWidth) - var(--sideMenuWidth));
}

.bottomTab.bottomClosed {
    height: 0;
}

.bottomTabMain .bottomTab .graphControll {
    background-color: var(--invertWhite);
    border: var(--darkBorder);
    border-radius: 1dvh;
    display: inline-flex;
    padding: clamp(0px, 1dvh, 12px);
    column-gap: 2%;
    font-size: var(--fontNormal);
    overflow-x: auto;
    overflow-y: hidden;
}

.bottomTabMain .bottomTab .graphControll #showChartControlBtn {
    background-color: var(--invertWhite);
    color: var(--invertBlack);
    font-size: var(--fontSmall);
    font-weight: var(--fontBold);
    border-radius: 0.5dvh;
    border: var(--darkBorder);
    box-shadow: var(--boxShadow);
    padding: 0.1dvh 2dvh;
    display: none;
}

.bottomTabMain .bottomTab .graphControll #showChartControlBtn:hover {
    background-color: var(--fadedGray);
    color: var(--white);
}

.bottomTabMain .bottomTab .graphControll #chartActionButtons,
.bottomTabMain .bottomTab .graphControll #timeRangeButtons {
    display: inline-flex;
    gap: 1%;
}

.bottomTabMain .bottomTab .graphControll #chartActionButtons button {
    background-color: var(--invertWhite);
    color: var(--invertBlack);
    font-size: var(--fontSmall);
    font-weight: var(--fontBold);
    border-radius: 0.5dvh;
    border: var(--darkBorder);
    box-shadow: var(--boxShadow);
    padding: 0.1dvh 2dvh;
}

.bottomTabMain .bottomTab .graphControll #chartActionButtons button:hover {
    background-color: var(--fadedGray);
    color: var(--white);
}

.bottomTabMain .bottomTab .graphControll #showTimeControlBtn {
    background-color: var(--invertWhite);
    color: var(--invertBlack);
    font-size: var(--fontSmall);
    font-weight: var(--fontBold);
    border-radius: 0.5dvh;
    border: var(--darkBorder);
    box-shadow: var(--boxShadow);
    padding: 0.1dvh 2dvh;
    display: none;
}

.bottomTabMain .bottomTab .graphControll #showTimeControlBtn:hover {
    background-color: var(--fadedGray);
    color: var(--white);
}

.bottomTabMain .bottomTab .graphControll #loadPrevPeriod,
.bottomTabMain .bottomTab .graphControll #loadLivePeriod,
.bottomTabMain .bottomTab .graphControll #loadNextPeriod {
    background-color: var(--invertWhite);
    color: var(--invertBlack);
    font-size: var(--fontSmall);
    font-weight: var(--fontBold);
    border-radius: 0.5dvh;
    border: var(--darkBorder);
    box-shadow: var(--boxShadow);
    padding: 0.1dvh 2dvh;
}

.bottomTabMain .bottomTab .graphControll #loadPrevPeriod:hover,
.bottomTabMain .bottomTab .graphControll #loadLivePeriod:hover,
.bottomTabMain .bottomTab .graphControll #loadNextPeriod:hover {
    background-color: var(--fadedGray);
    color: var(--white);
}

.bottomTabMain .bottomTab .graphControll select {
    font-size: var(--fontSmall);
    border-radius: 0.7dvh;
    box-shadow: var(--boxShadow);
    padding: 0dvh 1dvh;
}

.bottomTabMain .bottomTab .graphControll input {
    background-color: var(--invertWhite);
    color: var(--invertBlack);
    text-align: center;
    font-size: var(--fontSmall);
    font-weight: var(--fontBold);
}

.bottomTabMain .bottomTab .graph {
    background-color: var(--invertWhite);
    border: var(--darkBorder);
    border-radius: 1dvh;
    padding: 1dvh;
}

.bottomTabMain .bottomTab .margin {
    padding: 2dvh;
    transition: 0.2s;
    display: grid;
    grid-template-rows: clamp(50px, 10%, 100px) 90%;
    height: 92%;
}

#bottomGraph.paused::before {
    left: 50%;
}

/* Loading icon */
.canvas-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    align-items: baseline;
}

.spinner-container {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    justify-items: center;
}

.bottomTabMain #myBottomTab::before {
    content: "";
    position: fixed;
    width: 100dvw;
    height: 100%;
    background: var(--fadedLightGray);
    filter: grayscale(100%);
    pointer-events: none;
    padding-top: 6dvh;
    z-index: 999;
    display: none;
}

.bottomTabMain #myBottomTab.loading::before {
    display: block;
    pointer-events: none;
}

.spinner {
    border: var(--lightBorder);
    border-radius: 50%;
    border-top: var(--darkBorder);
    width: 2dvw;
    height: 2dvw;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* --------------- Small screen styles (Bottom tab) --------------- */
@media screen and (max-width: 500px) {
    .bottomTabMain .btn {
        font-size: 2dvh;
        bottom: -5dvh;
        padding-bottom: 6dvh;
    }

    .bottomTabMain .bottomTab .margin {
        margin: 0.5dvh;
        margin-top: 2dvh;
        height: 97.5%;
        transition: 0.2s;
    }

    .bottomTabMain .bottomTab .graphControll {
        grid-template-columns: 25% 1fr 15% 15%;
    }

    .bottomTabMain .bottomTab .graphControll #showChartControlBtn {
        display: block;
    }

    .bottomTabMain .bottomTab .graphControll #chartActionButtons,
    .bottomTabMain .bottomTab .graphControll #timeRangeButtons {
        display: none;
        position: absolute;
        top: 8dvh;
        right: 3dvw;
        flex-direction: row;
        background-color: var(--invertWhite);
        border: var(--darkBorder);
        border-radius: 0.5dvh;
        box-shadow: var(--boxShadow);
        padding: 0.5dvh;
        z-index: 9999;
        gap: 1dvw;
    }

    .bottomTabMain .bottomTab .graphControll #chartActionButtons button {
        width: 100%;
        margin: 0.3dvh 0;
    }

    .bottomTabMain .bottomTab .graphControll #chartActionButtons.show {
        display: flex;
    }

    .bottomTabMain .bottomTab .graphControll #showTimeControlBtn {
        display: block;
    }

    .bottomTabMain .bottomTab .graphControll #timeRangeButtons button {
        width: 100%;
        margin: 0.3dvh 0;
    }

    .bottomTabMain .bottomTab .graphControll #timeRangeButtons.show {
        display: flex;
    }

    .bottomTabMain .bottomTab .margin .graphControll #customTimeRange {
        display: none;
    }

    .bottomTabMain .bottomTab .graphControll input {
        height: 100%;
    }
}

@media screen and (max-height: 500px) {
    .bottomTabMain .bottomTab .margin {
        margin: 1dvh;
        margin-top: 2dvh;
        height: 85%;
    }

    .bottomTabMain .bottomTab .graphControll {
        grid-template-columns: 15% 1fr 5% 5%;
        font-size: var(--fontSmall);
    }

    .bottomTabMain .bottomTab .graphControll select {
        height: 6dvh;
        font-size: 100%;
    }

    .bottomTabMain .bottomTab .graphControll input {
        height: 100%;
    }

    .bottomTabMain .bottomTab .graphControll #showChartControlBtn {
        display: block;
    }

    .bottomTabMain .bottomTab .margin .graphControll #customTimeRange {
        display: none;
    }

    .bottomTabMain .bottomTab .graphControll #chartActionButtons,
    .bottomTabMain .bottomTab .graphControll #timeRangeButtons {
        display: none;
        position: absolute;
        top: 9dvh;
        right: 1dvw;
        flex-direction: row;
        background-color: var(--invertWhite);
        border: var(--darkBorder);
        border-radius: 0.5dvh;
        box-shadow: var(--boxShadow);
        padding: 0.5dvh;
        z-index: 9999;
        gap: 1dvh;
    }

    .bottomTabMain .bottomTab .graphControll #chartActionButtons button {
        width: 100%;
        margin: 0.3dvh 0;
    }

    .bottomTabMain .bottomTab .graphControll #chartActionButtons.show {
        display: flex;
    }

    .bottomTabMain .bottomTab .graphControll #showTimeControlBtn {
        display: block;
    }

    .bottomTabMain .bottomTab .graphControll #timeRangeButtons button {
        width: 100%;
        margin: 0.3dvh 0;
    }

    .bottomTabMain .bottomTab .graphControll #timeRangeButtons.show {
        display: flex;
    }
}
/* --------------- Small screen styles --------------- */
/* ================================== Index page ================================== */

/* ================================== List pages ================================== */
.lists .wrapper button .addSign {
    font-size: clamp(0px, 2dvh, 40px);
    margin-top: 0.1dvh;
}

.lists .wrapper #searchBar {
    height: clamp(0px, 2dvh, 25px);
    vertical-align: top;
    padding-top: 0.2dvh;
    width: 40%;
    font-size: var(--fontNormal);
}

.lists .wrapper #searchBar:focus {
    outline: none;
}

.lists .wrapper button {
    background-color: transparent;
    border: none;
    box-shadow: none;
    vertical-align: top;
    color: var(--white);
    font-weight: var(--fontBold);
    font-size: clamp(0px, 2dvh, 30px);
}

.lists .wrapper button:hover {
    color: var(--white);
    cursor: pointer;
}

.lists .wrapper {
    background-color: var(--invertGray);
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    align-content: space-evenly;
    align-items: center;
    justify-items: stretch;
    height: clamp(25px, 5dvh, 80px);
}

.lists .wrapper div,
.lists .wrapper a {
    text-align: center;
    color: var(--white);
    padding: 1dvh;
    font-weight: var(--fontBold);
    font-size: var(--fontBig);
}

.lists table {
    width: 100%;
    border: var(--darkBorder);
}

.compMachines th,
.compDevices th,
.compUsers th,
.compSettings th,
.lists th {
    background-color: var(--invertGray);
    border: var(--darkBorder);
    position: sticky;
    top: clamp(0px, 5.6dvh, 73px);
    width: 18dvw;
    z-index: 10;
}

.lists th:hover {
    background-color: var(--mediumGray);
    color: var(--white);
}

.lists th a {
    display: grid;
    text-decoration: none;
    padding: clamp(5px, 1dvh, 25px);
    color: var(--white);
    font-weight: var(--fontBold);
    font-size: var(--fontNormal);
}

.lists td {
    padding: 1dvh;
    border-right: var(--darkBorder);
    font-size: var(--fontNormal);
    height: clamp(0px, 4dvh, 50px);
}

.lists td button,
.lists td .btn,
.lists ul .btn {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    box-shadow: none;
    font-size: var(--fontNormal);
}

.lists td button:hover,
td .btn:hover,
ul .btn:hover {
    background-color: var(--fadedGray);
    color: var(--white);
}

.lists .machineName {
    cursor: pointer;
}

.lists .machineName:hover {
    background-color: var(--fadedWhite);
}

.lists .teamViewerID {
    cursor: pointer;
}

.lists .teamViewerID:hover {
    background-color: var(--fadedWhite);
}

.lists .uuidCopy:hover {
    background-color: var(--fadedWhite);
    cursor: copy;
}

.lists .deviceName {
    cursor: pointer;
}

.lists .deviceName:hover {
    background-color: var(--fadedWhite);
}

.lists .companyName {
    cursor: pointer;
}

.lists .companyName:hover {
    background-color: var(--fadedWhite);
}

.lists .fullName {
    cursor: pointer;
}

.lists .fullName:hover {
    background-color: var(--fadedWhite);
}

.lists th {
    position: sticky;
    z-index: 1;
}

/* --------------- Small screen styles --------------- */
@media screen and (max-height: 600px) {
    .lists th {
        top: 11.6dvh;
    }

    .lists .demoBackground {
        height: 100%;
    }
}

@media screen and (max-width: 500px) {
    .lists .demoBackground {
        overflow-y: auto;
    }

    .lists th {
        top: -0.5dvh;
    }

    .lists #machineForm,
    .lists #deviceForm,
    .lists #companyForm,
    .lists #userForm {
        position: absolute;
        width: 100dvw;
    }

    .lists table {
        margin-top: 5dvh;
    }
}
/* --------------- Small screen styles --------------- */
/* ================================== List pages ================================== */

/* ================================== Edit page ================================== */
/* Edit navbar */
/* View page nav */
.companyNav {
    background-color: var(--invertFadedGray);
    box-shadow: var(--boxShadow);
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    align-content: space-evenly;
    justify-content: center;
    position: relative;
    width: 100%;
    height: clamp(0px, 5dvh, 80px);
    text-align: center;
    z-index: 1;
}

.companyNav #reportBtn {
    position: absolute;
    z-index: 5;
}

.companyNav #reportBtn,
.companyNav button {
    background-color: transparent;
    color: var(--ctGreen);
    border: none;
    height: clamp(0px, 5dvh, 80px);
    width: 7dvw;
    text-align: center;
    font-size: var(--fontSmall);
    font-weight: var(--fontBold);
    text-shadow: 0.1dvh 0.1dvh 0.1dvh var(--fadedBlack);
}

.companyNav .reportButton:hover,
.companyNav #reportBtn:hover,
.companyNav button:hover {
    background-color: var(--fadedBlack);
    border-bottom: 0.2dvh solid var(--ctGreen);
    cursor: pointer;
}

/* Company general */
.compMachines .scrollArea th,
.compDevices .scrollArea th,
.compUsers .scrollArea th {
    position: sticky;
    top: 0px;
    height: 3dvh;
    color: var(--white);
    font-weight: var(--fontBold);
    font-size: var(--fontNormal);
}

.compMachines .scrollArea td,
.compDevices .scrollArea td,
.compUsers .scrollArea td {
    height: 3dvh;
    padding: 0.3dvh 0.5dvh;
    font-size: var(--fontNormal);
}

.compMachines .scrollArea .moreEditRemoveBtn,
.compDevices .scrollArea .moreEditRemoveBtn,
.compUsers .scrollArea .moreEditRemoveBtn {
    width: 0%;
}

.compMachines .scrollArea .centerBtn,
.compDevices .scrollArea .centerBtn,
.compUsers .scrollArea .centerBtn {
    display: grid;
    grid-template-columns: 28% 28% 39%;
    align-content: center;
    justify-content: space-between;
    text-align: center;
    font-size: var(--fontNormal);
    width: 14dvw;
    height: 4dvh;
    align-items: center;
}

.compMachines .scrollArea .compMachineName,
.compDevices .scrollArea .compDeviceName,
.compUsers .scrollArea .compUserName {
    cursor: pointer;
}

.compMachines .scrollArea .compMachineName:hover,
.compDevices .scrollArea .compDeviceName:hover,
.compUsers .scrollArea .compUserName:hover {
    background-color: var(--fadedWhite);
}

/* Company info */
.compInfo {
    display: grid;
}

/* Company machines */
.compMachines {
    display: none;
    height: var(--mdPageHeight);
}

/* Company devices */
.compDevices {
    display: none;
    height: var(--mdPageHeight);
}

/* Company users */
.compUsers {
    display: none;
    height: var(--mdPageHeight);
}

/* Company settings */
.compSettings {
    display: none;
    grid-template-columns: 45% 45%;
    grid-template-rows: 60% 30%;
    justify-content: space-evenly;
    align-content: space-evenly;
    height: 85dvh;
    margin-top: 2dvh;
    row-gap: 1dvh;
}

.compSettings #compAddMachine {
    height: 80dvh;
    grid-row: span 2;
}

.compSettings .scrollArea,
.compSettings #compTrial {
    height: 100%;
    background-color: var(--fadedLightGray);
    border: var(--darkBorder);
    box-shadow: var(--boxShadow);
}

.compSettings th {
    height: 5dvh;
    font-size: var(--fontNormal);
    font-weight: var(--fontBold);
    position: sticky;
    top: -1px;
    color: var(--invertBlack);
}

.compSettings th button {
    color: var(--invertBlack);
}

.compSettings td {
    height: 3dvh;
    font-size: var(--fontNormal);
    padding: 1dvh;
    color: var(--invertBlack);
}

.compSettings td button {
    color: var(--invertBlack);
    height: 100%;
    width: 100%;
}

.compSettings td input {
    color: var(--invertBlack);
}

.compSettings td button:hover {
    background-color: var(--fadedGray);
    color: var(--white);
    cursor: pointer;
}

/* --------------- Small screen styles --------------- */
@media screen and (max-width: 500px) {
    .companyNav #reportBtn,
    .companyNav button {
        width: 17dvw;
    }

    .compInfo {
        height: 100%;
    }

    .compMachines .scrollArea,
    .compDevices .scrollArea,
    .compUsers .scrollArea {
        overflow-x: auto;
    }

    .compMachines .scrollArea .centerBtn,
    .compDevices .scrollArea .centerBtn,
    .compUsers .scrollArea .centerBtn {
        width: 47dvw;
    }

    .compSettings {
        grid-template-columns: 90%;
        grid-template-rows: auto;
        height: 100%;
        padding-bottom: 2dvh;
        row-gap: 3dvh;
    }

    .compSettings #compAddMachine,
    .compSettings #compAddDevice {
        height: 50dvh;
    }

    .compSettings .scrollArea,
    .compSettings #compTrial {
        height: 99%;
    }
}
/* --------------- Small screen styles --------------- */

/***************************************************/

/* Edit page content */
.edit {
    display: grid;
    grid-template-columns: 60% 38%;
    justify-content: space-between;
    align-items: stretch;
    justify-items: stretch;
    row-gap: 3dvh;
    padding: 7dvh;
    height: 13.8dvh;
}

.edit table,
.edit ul {
    box-shadow: var(--boxShadow);
}

.edit .companyTable {
    height: 11dvh;
}

.edit th {
    color: var(--invertBlack);
    text-align: left;
    padding: 1dvh;
    font-size: var(--fontLarge);
    font-weight: var(--fontBold);
    top: -1px;
}

.edit td input,
.edit td input:focus,
.edit td select,
.edit td select:focus {
    background: transparent;
    color: var(--invertBlack);
    box-shadow: none;
    border: none;
    outline-width: 0;
    font-size: var(--fontLarge);
    width: 100%;
    height: 100%;
}

.edit .input-container {
    display: flex;
    align-items: center;
}

.edit .input-container input {
    margin-right: 1dvh;
}

.edit .input-container span {
    color: var(--invertBlack);
}

.edit ul {
    background-color: var(--fadedLightGray);
    border: var(--darkBorder);
}

.edit .companyUl {
    display: grid;
    grid-template-columns: 45% 45%;
    align-content: space-evenly;
    justify-content: center;
    gap: 3%;
    height: 10.75dvh;
}

.edit ul:first-of-type li:nth-child(3) {
    grid-column: 1 / span 2;
}

.edit .companyUl li .btn {
    width: 100%;
    cursor: pointer;
    height: clamp(0px, 3dvh, 60px);
}

.edit .addMD {
    display: grid;
    grid-template-columns: 93%;
    align-content: center;
    justify-content: center;
}

.edit .addMD li .btn {
    width: 100%;
    height: clamp(0px, 3dvh, 60px);
}

.edit2 {
    margin-top: -6dvh;
    display: grid;
    grid-template-columns: 60% 38%;
    padding: 4dvh 7dvh;
    justify-content: space-between;
}

.edit2 .scrollArea {
    background-color: var(--fadedLightGray);
    box-shadow: var(--boxShadow);
    min-height: 50dvh;
    max-height: 50dvh;
}

.edit2 th {
    font-size: var(--fontLarge);
    font-weight: var(--fontBold);
    padding: 1dvh;
    top: -3px;
}

.edit2 td {
    font-size: var(--fontLarge);
    height: clamp(0px, 3dvh, 100px);
    padding: clamp(0px, 1dvh, 10px);
}

.edit2 table .btn {
    background-color: transparent;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border: none;
    box-shadow: none;
    font-size: var(--fontLarge);
}

.edit2 table .btn:hover {
    background-color: var(--fadedGray);
}

/* --------------- Small screen styles --------------- */
@media screen and (max-width: 500px) {
    .edit {
        grid-template-columns: 100%;
        padding: 4dvh 1dvh;
    }

    .edit ul {
        display: flex;
        grid-template-columns: none;
    }

    .edit .addMD li .btn {
        margin: 2dvh 0dvh;
    }

    .edit2 {
        grid-template-columns: 100%;
        row-gap: 3dvh;
        padding: 5dvh 1dvh;
    }

    .edit2 .scrollArea {
        overflow: auto;
    }
}

@media screen and (max-height: 500px) {
    .edit2 .scrollArea {
        min-height: 38dvh;
        max-height: 38dvh;
    }
}
/* --------------- Small screen styles --------------- */
/* ================================== Edit page ================================== */

/* ================================== Add page ================================== */
.add {
    display: grid;
    grid-template-columns: 60% 38%;
    justify-content: space-between;
    align-items: stretch;
    justify-items: stretch;
    align-content: center;
    row-gap: 3dvh;
    padding: 7dvh;
}

.add table,
.add ul {
    box-shadow: var(--boxShadow);
}

.add th {
    text-align: left;
    padding: 1dvh;
    font-size: var(--fontLarge);
    font-weight: var(--fontBold);
}

.add td input,
.add td input:focus,
.add td select,
.add td select:focus {
    background: transparent;
    box-shadow: none;
    border: none;
    outline-width: 0;
    font-size: var(--fontLarge);
    width: 100%;
    height: 100%;
}

.add .input-container {
    display: flex;
    align-items: center;
}

.add .input-container input {
    margin-right: 1dvh;
}

.add ul {
    display: grid;
    grid-auto-flow: column;
    grid-auto-flow: row;
    align-content: space-evenly;
    justify-content: center;
    background-color: var(--fadedLightGray);
    border: var(--darkBorder);
}

.add .companyUl {
    display: grid;
    grid-template-columns: 45% 45%;
    justify-content: space-around;
    height: 7.2dvh;
    padding: 1dvh;
}

.add .companyUl li .btn {
    width: 100%;
    height: clamp(0px, 3dvh, 60px);
    cursor: pointer;
}

.add .companyUl .userAddMessage {
    grid-column: span 2;
    padding: 2dvh;
    text-align: center;
    font-weight: var(--fontBold);
    font-size: var(--fontSmall);
    color: var(--errorRed);
    text-shadow: 0.1dvh 0.1dvh 0.1dvh var(--fadedBlack);
}

.add .error-row {
    display: none;
    color: red;
}

.add .error {
    padding: 0.5dvh;
    display: grid;
    grid-template-columns: 100%;
    align-content: center;
    justify-items: center;
}

/* --------------- Small screen styles --------------- */
@media screen and (max-width: 500px) {
    .add {
        grid-template-columns: 100%;
        row-gap: 2dvh;
        padding: 2dvh;
    }
}

/* --------------- Small screen styles --------------- */
/* ================================== Add page ================================== */

/* ================================== View page ================================== */
/* View page nav */
.view .machineNav,
.view .deviceNav {
    background-color: var(--invertFadedGray);
    box-shadow: var(--boxShadow);
    display: grid;
    grid-template-columns: auto auto auto auto;
    align-content: space-evenly;
    justify-content: center;
    position: relative;
    width: 100%;
    height: clamp(0px, 5dvh, 80px);
    text-align: center;
    z-index: 1;
}

.view .reportButton,
.view #reportBtn {
    position: absolute;
    z-index: 5;
}

.view .reportButton,
.view #reportBtn,
.view .machineNav button,
.view .deviceNav button {
    background-color: transparent;
    color: var(--ctGreen);
    border: none;
    height: clamp(0px, 5dvh, 80px);
    width: 7dvw;
    text-align: center;
    font-size: var(--fontSmall);
    font-weight: var(--fontBold);
    text-shadow: 0.1dvh 0.1dvh 0.1dvh var(--fadedBlack);
}

.view .reportButton:hover,
.view #reportBtn:hover,
.view .machineNav button:hover,
.view .deviceNav button:hover {
    background-color: var(--fadedBlack);
    border-bottom: 0.2dvh solid var(--ctGreen);
    cursor: pointer;
}

.showWeekend {
    display: grid;
    grid-template-columns: 26% 3%;
    justify-content: space-between;
    font-size: var(--fontNormal);
}

/* View page content */
.viewInfo {
    height: var(--mdPageHeight);
    display: grid;
    align-content: center;
}

.viewInfo .viewInfoContent {
    display: grid;
    grid-template-columns: 45% 45%;
    column-gap: 4.5dvw;
    justify-content: center;
    align-items: center;
    justify-items: center;
    height: 82dvh;
}

.viewInfo #map {
    height: 60dvh;
    width: 100%;
    border: var(--darkBorder);
    border-bottom: none;
}

.viewInfo #map .error-message {
    display: none;
    text-align: center;
    background-color: var(--fadedGray);
    color: var(--white);
    font-weight: var(--fontBold);
    font-size: var(--fontNormal);
    padding: 2dvh;
    border-radius: 1dvh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.viewInfo #map .menuButton {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 999;
}

.viewInfo #map .menuButton span {
    display: grid;
    align-content: center;
    justify-items: center;
    background-color: var(--fadedWhite);
    background-clip: padding-box;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    font-size: var(--fontSmall);
    font-weight: var(--fontBold);
    color: var(--black);
    height: clamp(35px, 3dvw, 44px);
    width: clamp(35px, 3dvw, 44px);
}

.viewInfo #map .menu {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 0.5dvh;
    background-color: var(--fadedWhite);
    border: var(--darkBorder);
    padding: 5dvh;
    font-size: var(--fontSmall);
    font-weight: var(--fontBold);
    z-index: 999;
}

.viewInfo #map .menu label {
    display: block;
    margin-bottom: 1dvh;
}

.viewInfo .dataViewerBtn button {
    background-color: var(--fadedGray);
    border: var(--darkBorder);
    font-size: var(--fontNormal);
    height: 4.6dvh;
    width: 100%;
    cursor: pointer;
    z-index: 100;
}

.viewInfo .dataViewerBtn button .dataViewBtn {
    font-weight: var(--fontBold);
    margin: 0.4dvh;
    padding: 0.2dvh;
}

.viewInfo .dataViewerBtn button .dataViewBtn:hover {
    background-color: var(--fadedGray);
    color: var(--white);
}

.viewInfo table {
    box-shadow: var(--boxShadow);
    width: 100%;
    height: 100%;
    cursor: default;
}

.viewInfo .map2 {
    display: grid;
    row-gap: 5%;
    width: 100%;
    cursor: default;
    height: 100%;
    align-content: space-between;
    align-items: center;
}

.viewInfo th {
    color: var(--invertBlack);
    text-align: left;
    padding: 1dvh;
    font-size: var(--fontNormal);
    font-weight: var(--fontBold);
    width: 13dvw;
}

.viewInfo th .aBtn {
    color: var(--invertBlack);
}

.viewInfo td,
.viewInfo td input {
    font-size: var(--fontNormal);
    color: var(--invertBlack);
}

.viewInfo td input,
.viewInfo td input:focus,
.viewInfo td select,
.viewInfo td select:focus,
.viewInfo th button {
    background: transparent;
    box-shadow: none;
    border: none;
    outline-width: 0;
    font-size: var(--fontNormal);
    width: 100%;
    height: 100%;
    cursor: default;
}

.viewInfo th button:hover {
    background-color: var(--fadedLightGray);
    color: var(--white);
    border-radius: 0.5dvh;
}

.viewInfo .teamViewerID:hover {
    background-color: var(--fadedLightGray);
    color: var(--white);
}

.viewInfo table .btn {
    width: 100%;
}

.viewInfo table td {
    height: 2.35dvh;
}

.viewInfo .noteContainer {
    height: 15dvh;
    background-color: rgba(150, 150, 150);
    padding: 1dvh;
    box-shadow: var(--boxShadow);
    border: var(--darkBorder);
    width: calc(100% - 2dvh);
}

.viewInfo .noteContainer textarea {
    resize: none;
    width: 99.4%;
    height: 97%;
    background-color: var(--invertGray);
    font-size: var(--fontNormal);
}

/* Machine/Device graph */
.view .graph {
    background-color: var(--invertGray);
    box-shadow: var(--boxShadow);
    border: var(--darkBorder);
    border-radius: 1dvh;
    width: 95dvw;
    padding: 2dvh;
    display: none;
    justify-content: center;
    align-items: center;
    margin: 3dvh auto;
}

.view .graph .graphControll {
    background-color: var(--invertWhite);
    border: var(--darkBorder);
    border-radius: 1dvh;
    display: inline-flex;
    padding: clamp(0px, 1dvh, 12px);
    column-gap: 2%;
    font-size: var(--fontNormal);
    overflow-x: auto;
    overflow-y: hidden;
}

.view .graph .chartContainer {
    background-color: var(--fadedWhite);
    height: 70dvh;
    width: 94dvw;
}

.view .graphControll #customTimeRange {
    display: grid;
    grid-template-columns: 48% 48%;
    gap: 3%;
}

.view .graphControll #customTimeRange input,
.view .graphControll select {
    background-color: var(--invertWhite);
    color: var(--invertBlack);
    font-size: var(--fontSmall);
    border-radius: 0.7dvh;
    box-shadow: var(--boxShadow);
    padding: 0 0.5dvw;
}

.view .graphControll input {
    font-weight: var(--fontBold);
}

.view .graphControll #smallLoadChartBtn {
    display: none;
}

.view .graphControll #showChartControlBtn,
.view .graphControll #showTimeControlBtn,
.view .graphControll #showCustomTimeBtn {
    background-color: var(--invertWhite);
    color: var(--invertBlack);
    font-size: var(--fontSmall);
    font-weight: var(--fontBold);
    border-radius: 0.5dvh;
    border: var(--darkBorder);
    box-shadow: var(--boxShadow);
    padding: 0.1dvh 2dvh;
    display: none;
}

.view .graphControll #showTimeControlBtn:hover,
.view .graphControll #showChartControlBtn:hover {
    background-color: var(--fadedGray);
    color: var(--white);
}

.view .graphControll #chartActionButtons,
.view .graphControll #timeRangeButtons {
    display: inline-flex;
    gap: 1%;
}

.view .graphControll #chartActionButtons button {
    background-color: var(--invertWhite);
    color: var(--invertBlack);
    font-size: var(--fontSmall);
    font-weight: var(--fontBold);
    border-radius: 0.5dvh;
    border: var(--darkBorder);
    box-shadow: var(--boxShadow);
    padding: 0.1dvh 2dvh;
}

.view .graphControll #chartActionButtons button:hover {
    background-color: var(--fadedGray);
    color: var(--white);
}

.view .graphControll #loadPrevPeriod,
.view .graphControll #loadLivePeriod,
.view .graphControll #loadNextPeriod {
    background-color: var(--invertWhite);
    color: var(--invertBlack);
    font-size: var(--fontSmall);
    font-weight: var(--fontBold);
    border-radius: 0.5dvh;
    border: var(--darkBorder);
    box-shadow: var(--boxShadow);
    padding: 0.3dvh 2dvh;
}

.view .graphControll #loadPrevPeriod:hover,
.view .graphControll #loadLivePeriod:hover,
.view .graphControll #loadNextPeriod:hover {
    background-color: var(--fadedGray);
    color: var(--white);
}

.view .graphControll input {
    text-align: center;
    font-size: var(--fontSmall);
}

#loadingBG {
    background-color: var(--fadedLightGray);
    display: none;
    position: absolute;
    width: 100dvw;
    height: 94.3dvh;
    z-index: 100;
}

#viewGraph {
    background-color: var(--invertWhite);
}

#viewGraph.paused::before {
    left: 50%;
}

/* --------------- Small screen styles --------------- */
@media screen and (max-width: 500px) {
    .viewInfo {
        grid-template-columns: 100%;
        row-gap: 2dvh;
        height: 100%;
        padding: 0px 7dvw;
    }

    .view .machineNav button,
    .view .deviceNav button {
        width: 25dvw;
    }

    .view .reportButton {
        width: 13dvw !important;
    }

    .viewInfo .viewInfoContent {
        grid-template-columns: 100%;
        row-gap: 5%;
    }

    .viewInfo .map2,
    .view .map2 {
        height: 80dvh;
        margin-top: 1.5dvh;
    }

    .view .graph {
        width: 78dvw;
    }

    .view .graph .chartContainer {
        width: 74dvw;
    }

    .view .graph .graphControll {
        position: relative;
    }

    .view .graphControll #smallLoadChartBtn {
        display: block;
    }

    .view .graph .graphControll #showChartControlBtn,
    .view .graph .graphControll #showTimeControlBtn {
        display: block;
    }

    .view .graph .graphControll #chartActionButtons,
    .view .graph .graphControll #timeRangeButtons,
    .view .graph .graphControll #customTimeRange {
        display: none;
        position: absolute;
        top: 6dvh;
        right: 2dvw;
        width: 60dvw;
        flex-direction: row;
        background-color: var(--invertWhite);
        border: var(--darkBorder);
        border-radius: 0.5dvh;
        box-shadow: var(--boxShadow);
        padding: 0.5dvh;
        z-index: 9999;
        gap: 1dvw;
    }

    .view .graph .graphControll #customTimeRange {
        flex-direction: column;
        height: auto;
        padding-right: 3dvw;
    }

    .view .graph .graphControll #chartActionButtons button,
    .view .graph .graphControll #timeRangeButtons button,
    .view .graph .graphControll #customTimeRange input {
        width: 100%;
        margin: 0.3dvh 0;
    }

    .view .graph .graphControll #chartActionButtons.show,
    .view .graph .graphControll #timeRangeButtons.show,
    .view .graph .graphControll #customTimeRange.show {
        display: inline-flex;
        position: fixed;
        top: 22dvh;
        right: 13dvw;
    }

    .view .graph .graphControll input {
        height: 100%;
    }
}

@media screen and (max-height: 500px) {
    .viewInfo {
        height: 100%;
        margin-top: 5dvh;
    }

    .viewInfo .viewInfoContent {
        height: auto;
        margin-bottom: 5dvh;
    }

    .viewInfo #map {
        height: 80dvh;
    }

    .viewInfo td {
        padding: 0.85dvh;
    }

    .view .graph {
        height: 73dvh;
    }

    .view .graph .chartContainer {
        height: 66dvh;
    }

    .view .graphControll select {
        font-size: var(--fontSmall);
    }

    .view .graph .graphControll {
        font-size: var(--fontSmall);
    }

    .view .graphControll #smallLoadChartBtn {
        display: block;
    }

    .view .graph .graphControll #showChartControlBtn,
    .view .graph .graphControll #showTimeControlBtn {
        display: block;
    }

    .view .graph .graphControll #chartActionButtons,
    .view .graph .graphControll #timeRangeButtons,
    .view .graph .graphControll #customTimeRange {
        display: none;
        position: absolute;
        top: 30dvh;
        right: 3dvw;
        width: 15dvw;
        flex-direction: row;
        background-color: var(--invertWhite);
        border: var(--darkBorder);
        border-radius: 0.5dvh;
        box-shadow: var(--boxShadow);
        padding: 0.5dvh;
        z-index: 9999;
        gap: 1dvh;
    }

    .view .graph .graphControll #customTimeRange {
        flex-direction: column;
        height: auto;
    }

    .view .graph .graphControll #chartActionButtons button,
    .view .graph .graphControll #timeRangeButtons button {
        width: 100%;
        margin: 0.3dvh 0;
    }

    .view .graph .graphControll #chartActionButtons.show,
    .view .graph .graphControll #timeRangeButtons.show,
    .view .graph .graphControll #customTimeRange.show {
        display: flex;
    }
}
/* --------------- Small screen styles --------------- */
/* ================================== View page ================================== */

/* ================================== Data viewer page ================================== */
.dataViewer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 0;
    transition: 0.2s;
    width: 100%;
    overflow: hidden;
    display: none;
}

.dataViewer .grid {
    display: grid;
    height: clamp(89.3dvh, calc(100dvh - 155px), calc(100dvh - 155px));
    position: relative;
    overflow: hidden;
}

.dataViewer .gridlines {
    display: none;
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: var(--fadedBlack);
}

.dataViewer #bottomTabBtn {
    position: fixed;
    bottom: var(--bottomTabHeight);
    left: 48.58%;
    transform: translateY(50%);
    font-size: var(--fontNormal);
    padding: clamp(10px, 2dvh, 25px) 1.5dvh clamp(50px, 10dvh, 75px);
    border-radius: 4dvh;
    background-color: var(--invertDarkFadedGray);
    transition: 0.2s;
    z-index: 100;
    pointer-events: auto;
}

.dataViewer .bottomTab {
    display: grid;
    grid-template-columns: 33dvw 33dvw 33dvw;
    height: var(--bottomTabHeight);
    width: 100%;
    position: fixed;
    z-index: 100;
    bottom: 0;
    left: 0;
    background-color: var(--invertGray);
    box-shadow: var(--boxShadow);
    transition: 0.2s;
    overflow: hidden;
}

.dataViewer .bottomTab .settingsMenu {
    width: 30dvw;
    height: clamp(0px, 30.5dvh, 450px);
    margin: clamp(0px, 1dvw, 20px) 1dvw;
    padding: clamp(0px, 1dvw, 20px) 1dvw;
    border: var(--darkBorder);
    background-color: var(--invertWhite);
    box-shadow: var(--boxShadow);
    border: var(--darkBorder);
}

.dataViewer .bottomTab .settingsMenu #mainSettings,
.dataViewer .bottomTab .settingsMenu #generalSettings,
.dataViewer .bottomTab .settingsMenu #meterSettings,
.dataViewer .bottomTab .settingsMenu #dashboardSettings {
    display: grid;
    grid-template-columns: 48% 48%;
    justify-items: stretch;
    justify-content: center;
    align-content: space-evenly;
    column-gap: 1dvw;
    width: 30dvw;
    height: clamp(0px, 30.5dvh, 450px);
}

.dataViewer .bottomTab .settingsMenu #generalSettings,
.dataViewer .bottomTab .settingsMenu #meterSettings,
.dataViewer .bottomTab .settingsMenu #dashboardSettings {
    display: none;
}

.dataViewer .bottomTab .settingsMenu input,
.dataViewer .bottomTab .settingsMenu select {
    width: 100%;
    box-sizing: border-box;
    border-radius: 0.5dvh;
    box-shadow: var(--boxShadow);
    font-size: var(--fontLarge);
    height: clamp(0px, 3dvh, 40px);
}

.dataViewer .bottomTab .settingsMenu input:hover {
    background-color: var(--fadedGray) !important;
    color: var(--white) !important;
}

.dataViewer .bottomTab .settingsMenu label {
    color: var(--invertBlack);
}

.no-hover:hover {
    background-color: inherit !important;
    color: rgba(16, 16, 16, 0.3) !important;
}

.dataViewer .bottomTab .meterPreview {
    width: 30dvw;
    height: clamp(0px, 30.5dvh, 450px);
    margin: clamp(0px, 1dvw, 20px) 1dvw;
    padding: clamp(0px, 1dvw, 20px) 1dvw;
    border: var(--darkBorder);
    background-color: var(--invertWhite);
    box-shadow: var(--boxShadow);
    border: var(--darkBorder);
    display: grid;
    justify-items: center;
    align-items: center;
}

.dataViewer .bottomTab #previewMeter {
    background-color: var(--fadedLightGray);
    box-shadow: inset 0 0 1dvh 0.5dvh var(--fadedBlack);
    width: 80%;
    height: 80%;
    padding: 2dvh;
    overflow: hidden;
    cursor: move;
}

.dataViewer .meterDiv {
    background-color: var(--inverFadedGray);
    height: 100%;
    width: 100%;
}

.dataViewer .valueSymbol {
    margin-top: -4dvh;
    display: grid;
    justify-content: center;
    font-size: var(--fontLarge);
    font-weight: var(--fontBold);
}

.dataViewer .numberContainer {
    text-align: center;
    width: 100%;
}

.dataViewer .symbolContainer {
    text-align: center;
    width: 100%;
}

.dataViewer .grid .meterContainer {
    background-color: var(--fadedGray);
    width: 278px;
    height: 158px;
}

.dataviewer .meterContainer .meterDiv svg {
    height: 115%;
    width: 100%;
}

.delete-button svg,
.settings-button svg {
    width: 1.1dvh;
}

#meterChangeDataList {
    margin-bottom: 3dvh;
}

.meterData .scrollArea {
    height: 30dvh;
    border: var(--darkBorder);
}

/* Set resize buttons with default system cursors. */
.ui-resizable-nw {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 20px;
    width: 20px;
    cursor: default;
}

.ui-resizable-ne {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 20px;
    width: 20px;
    cursor: default;
}

.ui-resizable-sw {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 20px;
    width: 20px;
    cursor: default;
}

.ui-resizable-se {
    position: absolute;
    bottom: 0px;
    right: 0px;
    height: 20px;
    width: 20px;
    cursor: default;
}

.ui-resizable-n {
    position: absolute;
    top: 0px;
    left: 25%;
    height: 10px;
    width: 50%;
    cursor: default;
}

.ui-resizable-w {
    position: absolute;
    top: 25%;
    left: 0px;
    height: 50%;
    width: 10px;
    cursor: default;
}

.ui-resizable-e {
    position: absolute;
    top: 25%;
    right: 0px;
    height: 50%;
    width: 10px;
    cursor: default;
}

.ui-resizable-s {
    position: absolute;
    bottom: 0px;
    left: 25%;
    height: 10px;
    width: 50%;
    cursor: default;
}

/* Meter bottom tab settings */
.dataViewer .bottomTab .meterData {
    width: 30dvw;
    height: clamp(0px, 30.5dvh, 450px);
    margin: clamp(0px, 1dvw, 20px) 1dvw;
    padding: clamp(0px, 1dvw, 20px) 1dvw;
    border: var(--darkBorder);
    background-color: var(--invertWhite);
    box-shadow: var(--boxShadow);
    border: var(--darkBorder);
}

.dataViewer .bottomTab .meterData .scrollArea {
    overflow: auto;
    height: clamp(0px, 30.5dvh, 450px);
    border: var(--darkBorder);
    position: relative;
}

#meterData::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--inverFadedGray);
    pointer-events: auto;
    z-index: 1;
    box-sizing: border-box;
}

#meterData.no-overlay::before {
    content: none;
}

.dataViewer .bottomTab .meterData tr:hover {
    background-color: var(--fadedGray);
    color: var(--white);
}

.dataViewer .bottomTab .meterData th,
.dataViewer .bottomTab .meterData td {
    height: clamp(0px, 2dvh, 35px);
    font-size: var(--fontLarge);
    color: var(--invertBlack);
    padding: 1dvh;
    width: 50%;
    text-align: left;
}

.label-disabled {
    color: gray;
    opacity: 0.6;
}

#dashboardFileInput {
    font-size: var(--fontNormal);
    text-align-last: center;
}

#changeMinMax {
    margin-top: 3dvh;
}

.meterData p {
    background-color: var(--fadedBlack);
    padding: 1dvh;
    font-size: var(--fontNormal);
    color: var(--white);
    font-weight: var(--fontBold);
}

#changeMin,
#changeMax {
    height: 100%;
    width: 100%;
    background-color: transparent;
    box-shadow: none;
    border: none;
    font-size: var(--fontNormal);
}
/* ================================== Data viewer page ================================== */

/* ================================== Report viewer page ================================== */
.reportView {
    display: none;
    justify-content: center;
    align-content: center;
    height: var(--mdPageHeight);
}

.reportView .customReport {
    background-color: var(--invertFadedGray);
    border: var(--darkBorder);
    box-shadow: var(--boxShadow);
    display: grid;
    grid-template-columns: 30% 30% 30%;
    height: 35dvh;
    width: 70dvw;
    justify-content: space-around;
    align-content: center;
    row-gap: 2dvh;
}

.reportView .customReportCSV {
    background-color: var(--invertFadedGray);
    border: var(--darkBorder);
    box-shadow: var(--boxShadow);
    display: grid;
    grid-template-columns: 45% 45%;
    height: 35dvh;
    width: 70dvw;
    justify-content: space-around;
    align-content: center;
}

.reportView .customReport input[type="checkbox"] {
    height: 1.5dvh;
    width: 1.5dvh;
}

/* General box styles */
.reportView .customReport .reportSettings,
.reportView .customReport .reportInputs,
.reportView .customReport .scrollArea {
    background-color: var(--invertGray);
    box-shadow: var(--boxShadow);
    font-size: var(--fontNormal);
    border: var(--darkBorder);
    color: var(--invertBlack);
    width: 100%;
}

/* Report settings */
.reportView .customReport .reportSettings {
    display: grid;
    grid-template-columns: 70%;
    align-content: space-evenly;
    justify-content: space-around;
    align-items: center;
    justify-items: start;
    height: 25dvh;
    padding: 1dvh;
}

.reportView .customReportCSV .reportSettings {
    display: grid;
    grid-template-columns: 45% 45%;
    justify-content: space-around;
    align-content: center;
    background-color: var(--invertGray);
    height: 25dvh;
    width: 100%;
    box-shadow: var(--boxShadow);
}

.reportView .customReportCSV .reportSettings input[type="date"] {
    height: 3dvh;
    font-size: var(--fontNormal);
}

.reportView .customReportCSV .reportSettings .periodMessage {
    grid-column: span 2;
    text-align: center;
    font-size: var(--fontSmall);
    color: var(--errorRed);
}

.reportView .customReportCSV .reportExample {
    background-color: var(--invertGray);
    box-shadow: var(--boxShadow);
}

.reportView .customReportCSV .reportExample .scrollArea {
    height: 25dvh;
}

.reportView .customReportCSV .reportExample th,
.reportView .customReportCSV .reportExample td {
    font-size: var(--fontNormal);
    height: 3dvh;
    padding: 0.3dvh;
}

.reportView .customReport .reportSettings .checkboxToggler {
    background-color: transparent;
    color: var(--invertBlack);
    border-radius: 1dvh;
    border: none;
    width: 100%;
    height: 5dvh;
}

/* Date inputs */
.reportView .customReport .reportInputs {
    display: grid;
    grid-template-columns: 50% 10%;
    align-content: space-between;
    justify-items: center;
    justify-content: center;
    height: 25dvh;
    padding: 1dvh;
}

.reportView .customReport .reportInputs input,
.reportView .customReport .reportInputs button {
    background-color: transparent;
    font-size: var(--fontNormal);
    color: var(--invertBlack);
    border-radius: 1dvh;
    box-shadow: none;
    border: none;
    outline: none;
    width: 100%;
    padding: 0.5dvh 0.1dvw;
}

.reportView .customReport .reportInputs input:hover,
.reportView .customReport .reportInputs button:hover {
    background-color: var(--fadedBlack);
    color: var(--white);
}

/* Datasets list */
.reportView .customReport .scrollArea {
    height: 27dvh;
}

.reportView .customReport .scrollArea th {
    font-size: var(--fontLarge);
    padding: 0.5dvh;
    position: sticky;
    top: -1px;
    z-index: 1;
}

.reportView .customReport .scrollArea td {
    font-size: var(--fontNormal);
    padding: 0.5dvh;
}

/* Export selector */
.reportView .controlBar {
    background-color: var(--invertFadedGray);
    color: var(--invertBlack);
    border: var(--darkBorder);
    box-shadow: var(--boxShadow);
    display: grid;
    grid-template-columns: 45% 45%;
    column-gap: 2.7dvh;
    justify-items: start;
    align-items: end;
    padding: 1dvh;
    z-index: 1;
    margin: 10dvh 0px 0.5dvh 0px;
}

.reportView .controlBar .exportSelector select {
    background-color: var(--white);
    box-shadow: var(--boxShadow);
    font-size: var(--fontNormal);
    color: var(--black);
    border: none;
    outline: none;
    height: 3dvh;
    width: 100%;
    margin-top: 0.8dvh;
    border-radius: 0.5dvh;
}

.reportView .controlBar .exportSelector select:hover {
    background-color: var(--fadedBlack);
}

/* Export button */
.reportView .controlBar .reportButtons #exportReport {
    background-color: var(--white);
    box-shadow: var(--boxShadow);
    font-size: var(--fontNormal);
    color: var(--black);
    border: none;
    outline: none;
    height: 3dvh;
    width: 100%;
}

.reportView .controlBar .reportButtons #exportReport:hover {
    background-color: var(--fadedBlack);
    color: var(--white);
}

.reportView .spinner-container {
    top: 67% !important;
}

/* --------------- Small screen styles --------------- */
@media screen and (max-width: 500px) {
    .reportView .customReport {
        grid-template-columns: 100%;
        height: 85dvh;
        width: 99dvw;
    }

    .reportView .customReport .reportSettings,
    .reportView .customReport .reportInputs {
        width: 43.7dvh;
        grid-template-columns: 85%;
    }
}

@media screen and (max-height: 500px) {
    .reportView .controlBar {
        margin: 0.5dvh 0px 0.5dvh 0px;
    }
}
/* --------------- Small screen styles --------------- */
/* ================================== Report viewer page ================================== */

/* ================================== Settings page ================================== */
/* Settings page nav */
.settingsView .settingsNav {
    background-color: var(--invertFadedGray);
    box-shadow: var(--boxShadow);
    display: grid;
    grid-template-columns: auto auto auto auto;
    align-content: space-evenly;
    justify-content: center;
    position: relative;
    width: 100%;
    height: clamp(0px, 5dvh, 80px);
    text-align: center;
    z-index: 1;
}

.settingsView .settingsNav button {
    background-color: transparent;
    color: var(--ctGreen);
    border: none;
    height: clamp(0px, 5dvh, 80px);
    width: 7dvw;
    text-align: center;
    font-size: var(--fontSmall);
    font-weight: var(--fontBold);
    text-shadow: 0.1dvh 0.1dvh 0.1dvh var(--fadedBlack);
}

.settingsView .settingsNav button:hover {
    background-color: var(--fadedBlack);
    border-bottom: 0.2dvh solid var(--ctGreen);
    cursor: pointer;
}

/* Settings page content */
.settingsInfo {
    height: var(--pageHeight);
    font-size: var(--fontLarge);
}

.settingsInfo th {
    font-weight: var(--fontBold);
    color: var(--invertBlack);
    padding: 1dvh;
}

.settingsInfo .btnHolder {
    background-color: var(--fadedLightGray);
    box-shadow: var(--boxShadow);
    border: var(--darkBorder);
    display: grid;
    grid-template-columns: 50% 50%;
    justify-items: center;
    justify-content: space-between;
    padding: 1dvh;
}

.settingsInfo .btn {
    background-color: transparent;
    color: var(--invertBlack);
    border: none;
    border-radius: 0dvh;
    box-shadow: none;
    width: 100%;
    height: 5dvh;
    font-size: var(--fontLarge);
}

.settingsInfo .btn:hover {
    background-color: var(--fadedGray);
}

.settingsInfo .invalid-feedback {
    display: inline;
    text-shadow: 0.1dvh 0.1dvh 0.1dvh var(--fadedBlack);
    font-size: var(--fontSmall);
    font-style: italic;
    float: right;
}

.settingsInfo .invalid-feedback .toolTipText {
    visibility: hidden;
    width: clamp(0px, 8dvh, 120px);
    background-color: var(--black);
    color: var(--white);
    text-align: center;
    padding: 0.7dvh 0;
    border-radius: 0.5dvh;
    position: absolute;
    z-index: 10;
}

.settingsInfo .invalid-feedback:hover .toolTipText {
    visibility: visible;
}

.settingsInfo td select,
.settingsInfo td select:focus {
    background: transparent;
    box-shadow: none;
    border: none;
    outline-width: 0;
    font-size: var(--fontLarge);
    width: 100%;
    height: 100%;
}

/* Map settings tab */
.settingsInfo #mapSettings {
    display: none;
    align-content: stretch;
    justify-content: space-evenly;
    grid-template-columns: 45% 45%;
    height: 50dvh;
}

.settingsInfo #mapSettings .mapSettingsOptions,
.settingsInfo #mapSettings .mapSettingsInfo {
    display: grid;
    margin: 5% 0px;
    align-content: space-between;
}

.settingsInfo #mapSettings td,
.settingsInfo #mapSettings td select,
.settingsInfo #mapSettings td button,
.settingsInfo #mapSettings td input {
    font-size: var(--fontLarge);
    color: var(--invertBlack);
}

.settingsInfo #mapSettings .customColorPicker {
    background: transparent;
    border: none;
    outline-width: 0;
    box-shadow: none;
    font-size: var(--fontLarge);
    text-transform: uppercase;
    width: 37dvw;
    height: 3.5dvh;
}

.settingsInfo #mapSettings .colorPicker {
    float: right;
    width: 3dvw;
    height: 4dvh;
}

/* Data settings tab */
.settingsInfo #dataSettings {
    display: none;
    align-content: stretch;
    justify-content: space-evenly;
    grid-template-columns: 45% 45%;
    height: var(--mdPageHeight);
}

.settingsInfo #dataSettings .dataSettingsOptions,
.settingsInfo #dataSettings .dataSettingsInfo {
    display: grid;
    margin: 5% 0px;
    align-content: space-between;
}

.settingsInfo #dataSettings .scrollArea {
    height: 80dvh;
    background-color: var(--fadedLightGray);
}

.settingsInfo #dataSettings .graphDataTitle {
    color: var(--invertBlack);
    align-content: center;
    min-width: 97.6%;
}

.settingsInfo #dataSettings #quickViewSelect:hover,
.settingsInfo #dataSettings #graphDataSelect:hover {
    background-color: var(--fadedBlack);
    color: var(--white);
}

.settingsInfo #dataSettings th {
    font-size: var(--fontLarge);
    position: sticky;
    top: -1px;
}

.settingsInfo #dataSettings td {
    color: var(--invertBlack);
    font-size: var(--fontNormal);
    padding-left: 1.8dvh;
}

.settingsInfo #dataSettings td input {
    min-height: clamp(0px, 2dvh, 30px);
    min-width: clamp(0px, 2dvh, 30px);
    margin-left: 0dvh;
}

/* Notifications settings tab */
.settingsInfo #notificationSettings {
    display: none;
    align-content: stretch;
    justify-content: space-evenly;
    grid-template-columns: 45% 45%;
    height: var(--mdPageHeight);
}

.settingsInfo #notificationSettings .notificationSettingsOptions,
.settingsInfo #notificationSettings .notificationSettingsInfo {
    display: grid;
    margin: 5% 0px;
    align-content: space-between;
}

/* Global settings tab */
.settingsInfo #globalSettings {
    display: none;
    align-content: stretch;
    justify-content: space-evenly;
    grid-template-columns: 45% 45%;
    height: var(--mdPageHeight);
}

.settingsInfo #globalSettings .globalSettingsOptions,
.settingsInfo #globalSettings .globalSettingsInfo {
    display: grid;
    margin: 5% 0px;
    align-content: space-between;
}

.settingsInfo #globalSettings .fileInput {
    display: inline-flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    gap: 2%;
}

.settingsInfo #globalSettings .imageData button,
.settingsInfo #globalSettings .imageData .fileInput button {
    background-color: transparent;
    border: none;
    padding: 0.7dvh;
    font-size: var(--fontLarge);
    width: 100%;
}

.settingsInfo #globalSettings .imageData button:hover,
.settingsInfo #globalSettings .imageData .fileInput button:hover {
    background-color: var(--fadedGray);
    color: var(--white);
}

.settingsInfo #globalSettings .fileUpload {
    opacity: 0;
    width: 0.1px;
    height: 0.1px;
    position: absolute;
}

.settingsInfo #globalSettings .fileUploadBtn {
    font-size: var(--fontNormal);
}

/* --------------- Small screen styles --------------- */
@media screen and (max-width: 500px) {
    .settingsInfo {
        grid-template-columns: 100%;
    }

    .settingsInfo #dataSettings {
        height: 45dvh;
        margin-bottom: 3dvh;
    }

    .settingsInfo #dataSettings .graphDataTitle {
        grid-template-columns: 74% 15.3% 15.3%;
        min-width: 270.4%;
    }

    .settingsInfo #mapSettings .colorPicker {
        width: 10dvw;
    }

    .settingsInfo #mapSettings .mdSizeBox {
        display: grid;
        grid-template-columns: 5% 40% 5% 40%;
        justify-content: end;
        justify-items: center;
        align-items: center;
    }

    .settingsInfo #mapSettings .mdSizeBox .mdSizeCounter {
        width: 45%;
    }
}

@media screen and (max-height: 500px) {
    .settingsInfo {
        padding: 3.5dvh 2dvw;
    }
}

/* --------------- Small screen styles --------------- */
/* ================================== Settings page ================================== */

/* ================================== Account page ================================== */
/* Account info */
.account {
    display: grid;
    grid-template-columns: 60% 34%;
    align-content: space-evenly;
    justify-content: center;
    padding: 5dvh;
    column-gap: 3.5dvw;
    row-gap: 5dvh;
}

.account table,
.account .accountUl {
    box-shadow: var(--boxShadow);
    height: clamp(0px, 29dvh, 375px);
}

.account .accountInfo {
    text-align: left;
}

.account th {
    height: clamp(0px, 6dvh, 50px);
    padding: 0dvh clamp(0px, 2dvh, 25px);
    font-size: var(--fontLarge);
    font-weight: var(--fontBold);
    top: -1px;
    color: var(--white);
}

.account td {
    height: clamp(0px, 6dvh, 50px);
    padding: 0dvh clamp(0px, 2dvh, 25px);
}

.account td input,
.account td input:focus,
.account td select,
.account td select:focus {
    background: transparent;
    box-shadow: none;
    border: none;
    outline-width: 0;
    font-size: var(--fontLarge);
    width: 100%;
    height: 100%;
}

.account ul {
    display: grid;
    justify-content: center;
    align-content: space-evenly;
    justify-items: center;
    background-color: var(--invertFadedGray);
    border: var(--darkBorder);
}

.account .btn {
    width: 28dvw;
    height: clamp(0px, 5dvh, 46px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.03dvh 0;
}

/* Settings for user */
.userSettings {
    display: grid;
    grid-template-columns: 46.7% 46.7%;
    align-content: space-evenly;
    justify-content: center;
    padding: 0dvh 5dvh;
    column-gap: 4dvw;
    row-gap: 1.7dvh;
}

.userSettings .settingsBtn,
.userSettings .mapTheme .mapColor div,
.userSettings .mapTheme .darkPopup div,
.userSettings .chartTime,
.userSettings .yScaleSettings {
    box-shadow: var(--boxShadow);
}

.userSettings th {
    font-size: var(--fontLarge);
    font-weight: var(--fontBold);
    color: var(--white);
    background-color: var(--invertGray);
    top: -0.5px;
    height: clamp(0px, 2dvh, 25px);
    padding: clamp(0px, 2dvh, 30px);
}

.userSettings td {
    display: grid;
    align-content: center;
    align-items: center;
    font-size: var(--fontNormal);
    height: clamp(0px, 2dvh, 25px);
    padding: clamp(0px, 2dvh, 30px);
    border: none;
}

.userSettings td input,
.userSettings td input:focus,
.userSettings td select,
.userSettings td select:focus {
    background: transparent;
    color: var(--black);
    box-shadow: none;
    border: none;
    outline-width: 0;
    font-size: var(--fontNormal);
    width: 100%;
    height: clamp(0px, 3dvh, 60px);
    cursor: pointer;
}

.userSettings .settingsBtn .latLon {
    text-align: left;
    width: 30%;
}

.userSettings .mapTheme {
    display: grid;
    align-content: space-between;
}

.userSettings .mapTheme th {
    padding: clamp(0px, 2dvh, 25px);
}

.userSettings .mapTheme button {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    border-radius: 0.5dvh;
    font-weight: var(--fontBold);
    font-size: var(--fontLarge);
    color: var(--white);
}

.userSettings .mapTheme button:hover {
    background-color: var(--fadedLightGray);
    color: var(--black);
    cursor: pointer;
}

.userSettings .mapTheme .darkPopup,
.userSettings .mapTheme .mapColor {
    display: grid;
    grid-template-columns: 48% 48%;
    justify-items: stretch;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}

.userSettings .mapTheme .mapColor .backgroundContainer {
    display: grid;
    grid-template-columns: 48% 30% 22%;
    justify-items: end;
}

.userSettings .accountBtns {
    display: grid;
    grid-template-columns: 49% 49%;
    justify-items: center;
    justify-content: center;
}

.userSettings .chartSettings {
    display: grid;
    grid-template-columns: 48% 48%;
    justify-items: stretch;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}

.userSettings .chartSettings .invalid-feedback {
    position: absolute;
    right: 5%;
    top: 33%;
    font-size: var(--fontNormal);
}

.userSettings .chartSettings .invalid-feedback .toolTipText {
    visibility: hidden;
    width: 45dvh;
    background-color: var(--fadedBlack);
    color: var(--white);
    text-align: center;
    padding: 0.7dvh 0;
    border-radius: 0.5dvh;
    position: absolute;
    z-index: 10;
    font-size: var(--fontNormal);
}

.userSettings .chartSettings .invalid-feedback:hover .toolTipText {
    visibility: visible;
}

/* --------------- Small screen styles --------------- */
@media screen and (max-width: 500px) {
    .account,
    .userSettings {
        display: grid;
        grid-template-columns: 100%;
        padding: 0;
        padding-bottom: 5dvh;
    }

    .account .btn {
        width: 87dvw;
    }

    .userSettings .mapTheme .mapColor .backgroundContainer p {
        visibility: hidden;
    }

    .userSettings .chartSettings .invalid-feedback .toolTipText {
        width: auto;
        background-color: var(--black);
    }

    .userSettings .chartSettings .invalid-feedback {
        right: 0%;
        left: -80%;
    }
}
/* --------------- Small screen styles --------------- */
/* ================================== Account page ================================== */

/* ================================== Manual page ================================== */
/* Manuals page */
.manualContent {
    display: grid;
    justify-content: center;
}

.manualContent .popup-content {
    padding: 4dvh;
}

.manualContent .scrollArea {
    background-color: var(--fadedBlack);
    border: var(--darkBorder);
    border-top: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: var(--boxShadow);
    height: var(--pageHeight);
    width: 80dvw;
}

.manualContent .scrollArea .manualNav {
    background-color: var(--invertGray);
    grid-template-columns: 50% 50%;
    border: var(--darkBorder);
    border-top: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: var(--bottomShadow);
    position: sticky;
    display: grid;
    width: 100%;
    height: clamp(0px, 9dvh, 90px);
    top: 0;
    z-index: 2;
}

.manualContent .scrollArea .manualNav .addManual button,
.manualContent .scrollArea .manualNav .filterManual button {
    box-shadow: var(--lightBoxShadow);
    font-size: var(--fontNormal);
    font-weight: var(--fontBold);
    margin: clamp(0px, 1.1dvh, 23px);
    width: 5dvw;
    border-radius: 1dvh;
    border: none;
    background-color: var(--fadedWhite);
}

.manualContent .scrollArea .manualPost {
    background-color: var(--fadedLightGray);
    box-shadow: var(--lightBoxShadow);
    display: grid;
    margin: 2dvh 4dvh 2dvh 2dvh;
    height: clamp(0px, 30dvh, 400px);
}

.manualContent .scrollArea .manualPost .manualDesc {
    display: grid;
    grid-template-rows: 20% 65% 15%;
    height: 100%;
    width: 100%;
}

.manualContent .scrollArea .manualPost .manualDesc h1 {
    font-size: var(--fontBig);
    font-weight: var(--fontBold);
    margin: 1dvh;
}

.manualContent .scrollArea .manualPost .manualDesc p {
    font-size: var(--fontNormal);
    margin: 0 1dvh;
}

.manualContent .scrollArea .manualPost .manualDesc .postControls button {
    width: 9.5dvw;
    font-size: var(--fontNormal);
    font-weight: var(--fontBold);
    margin: 0.5dvh;
    border-radius: 1dvh;
    border: none;
    background-color: var(--fadedWhite);
    box-shadow: var(--lightBoxShadow);
}

.manualContent .scrollArea .manualPost .manualView {
    border-left: var(--darkBorder);
    height: 100%;
    width: 100%;
}

.manualContent .scrollArea .manualPost .manualView img,
.manualContent .scrollArea .manualPost .manualView iframe {
    width: 100%;
    height: clamp(0px, 30dvh, 400px);
    object-fit: fill;
    margin-bottom: -0.3dvh;
}

#addManualForm,
.editManual {
    display: grid;
    grid-template-columns: 30% 60%;
    row-gap: 2dvh;
}

.resetImagePDF {
    display: grid;
    grid-template-rows: 50% 50%;
    align-items: center;
    justify-items: center;
    row-gap: 1dvh;
}
.resetImagePDF #resetPDF,
.resetImagePDF #resetImage {
    font-size: var(--fontSmall);
    padding: 0;
    font-weight: normal;
    width: 16.4dvw;
    height: 3dvh;
    background-color: transparent;
    border: var(--darkBorder);
    border-radius: 0.5dvh;
    box-shadow: var(--lightBoxShadow);
}

/* --------------- Small screen styles --------------- */
@media screen and (max-width: 500px) {
    .manualContent .scrollArea {
        width: 100dvw;
    }

    .manualContent .scrollArea .manualNav .addManual button,
    .manualContent .scrollArea .manualNav .filterManual button {
        width: 40dvw;
    }

    .manualContent .scrollArea .manualPost {
        grid-template-columns: 100% !important;
        margin-bottom: 10dvh;
        height: 85dvh;
    }

    .manualContent .scrollArea .manualPost .manualDesc {
        grid-template-rows: 10% 80% 10%;
        text-align: center;
    }

    .manualContent .scrollArea .manualPost .manualDesc .postControls button {
        width: 25dvw;
    }

    .manualContent .scrollArea .manualPost .manualView {
        height: 25dvh;
    }
}

@media screen and (max-height: 500px) {
    .manualControls {
        top: 14dvh;
    }
}
/* --------------- Small screen styles --------------- */
/* ================================== Manual page ================================== */

/* ================================== Change password page ================================== */
.passChange {
    min-height: 94dvh;
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    align-content: space-evenly;
    gap: 5%;
}

.passChange h1 {
    color: var(--invertBlack);
    font-size: var(--fontBig);
    font-weight: var(--fontBold);
    text-align: center;
}

.passChange form {
    background-color: var(--invertFadedGray);
    color: var(--invertBlack);
    padding: 3dvh;
    max-height: 60dvh;
    width: 18dvw;
    box-shadow: var(--boxShadow);
    border-radius: 1dvh;
}

.passChange .changeGroup {
    padding: 1dvh;
    font-size: var(--fontNormal);
}

.passChange .changeGroup input {
    width: 97.4%;
    height: 2dvh;
    font-size: var(--fontSmall);
}

.passChange .actionButtons {
    display: grid;
    grid-auto-flow: column;
    padding: 2dvh;
    column-gap: 1.3dvw;
    align-content: space-evenly;
    justify-content: center;
}

.passChange .actionButtons .btn {
    display: flex;
    width: 7.5dvw;
    text-align: center;
    align-items: center;
    justify-content: space-evenly;
}

/* --------------- Small screen styles --------------- */
@media screen and (max-width: 500px) {
    .passChange form {
        width: 70dvw;
    }

    .passChange .actionButtons .btn {
        width: 30dvw;
    }
}
/* --------------- Small screen styles --------------- */
/* ================================== Change password page ================================== */

/* ================================== Error page ================================== */
.error {
    display: grid;
    grid-template-columns: 70%;
    align-content: space-evenly;
    justify-content: center;
    padding: 10dvh;
}

.error .errorMessage {
    background-color: var(--white);
    box-shadow: var(--boxShadow);
    padding: 5dvh;
}

.error .errorMessage h1 {
    font-size: var(--fontBig);
    text-align: center;
}

.error .errorMessage p {
    font-size: var(--fontNormal);
    padding-top: 2dvh;
}

.error .errorMessage .errorBtn {
    padding: 0.5dvh;
    width: 20dvw;
    font-size: var(--fontNormal);
    font-weight: var(--fontBold);
}
/* ================================== Error page ================================== */