body {
    background-color: #F3F3F3;
    overflow: hidden;
}

@media (prefers-color-scheme: dark) { body {
    background-color: #202020;
} }

.hidden {
    display: none;
}

.systemText {
    font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
    user-select: none;
}

@media (prefers-color-scheme: dark) { .systemText {
    color: white;
} }

.toolbarText {
    /* margin-left: 1%; */
    margin-bottom: 0;
    margin-top: 0;

    flex-grow: 1;
    flex-shrink: 2;
    align-self: center;
    order: 0;
    flex: 1;
}

.bodyWrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    align-content: center;

    height: 97dvh;
    box-sizing: border-box;
}

.toolbar {
    /* height: 8vh; */
    width: 100%;
}

#topToolbar {
    display: flex;
    flex-direction: row;
    justify-content: center;

    height: 8dvh;
}

#bottomToolbar {
    display: flex;
    flex-direction: row;
    justify-content:end;
    align-items: flex-start;
    align-content: flex-start;
    margin: 1% 0 0 0;

    flex-wrap: wrap;
    
    position: sticky;
    bottom: 0;
    height: fit-content;
    row-gap: 0px;
    gap: 0;
    background-color: #F3F3F3;
}

@media (prefers-color-scheme: dark) { #bottomToolbar {
    background-color: #202020;
} }


#toolbarTextWrapper {
    width: fit-content;
    height: 8dvh;

    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    align-content: center;

    flex-grow: 1;
}

#flexButtonsRow {
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: end;
    align-content: center;
    height: 8dvh;
    width: fit-content;
    margin-top: 0;

    flex-wrap: nowrap;
}

#video {
    max-width: 100%;
    max-height: 65%;
    border-radius: 1dvh;
    margin-bottom: 1%;
}

.code-outline-highlight {
    /* border: 8pt dashed #40C4FF; */
    /* background-color: rgb(255, 255, 255, 0.5); */
    width:100%;
    height:100%;
    fill:none;
    stroke:#FF80AB;
    stroke-width:10;
    stroke-dasharray:25;
    stroke-linecap:round;
    stroke-linejoin:round
}

.scan-region-highlight-svg {
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    fill:none;
    stroke:#40C4FF;
    stroke-width:5;
    stroke-linecap:round;
    stroke-linejoin:round
}

@media (prefers-color-scheme: dark) { 
    .code-outline-highlight {
        /* border: 8pt dashed #40C4FF; */
        /* background-color: rgb(255, 255, 255, 0.5); */
        width:100%;
        height:100%;
        fill:none;
        stroke:#FF80AB;
        stroke-width:10;
        stroke-dasharray:25;
        stroke-linecap:round;
        stroke-linejoin:round
    }
}

@media (prefers-color-scheme: dark) { 
    .scan-region-highlight-svg {
        position:absolute;
        width:100%;
        height:100%;
        left:0;
        top:0;
        fill:none;
        stroke: white;
        stroke-width:5;
        stroke-linecap:round;
        stroke-linejoin:round
    }
}

#qrCode {
    display: inline-block;
    max-height: 65%;
    width: 100%;

    display: flex;
    justify-content: center;
}

#textAreaWrapper {
    margin: 0 0 0 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;

    width: 100%;
    flex-grow: 1;
    flex-shrink: 2;

    display:inline-block;
}

#urlField {
    margin: 0%;
    padding: 0;

    text-align: center;
    font-size: x-large;
    font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
    word-wrap: break-word;
    resize: none;
    
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    border-radius: 2.5pt;
    border: 0.5pt solid #bebebe;
    background-color: #FBFBFB;

    display:block;
}

#urlField:hover {
    background-color: #F6F6F6;
    /* border: 1pt solid #878787; */
    border: 2pt solid #40C4FF;
}

#urlField:focus {
    outline: none;
    border: 2pt solid #40C4FF;
}

#urlField::placeholder {
    color: #5F5F5F;
}

@media (prefers-color-scheme: dark) { #urlField {
    background-color: #292929;
    caret-color: white;
    color: white;
    border: 0pt solid #9B9B9B;
}}

@media (prefers-color-scheme: dark) { #urlField:hover {
    background-color: #323232;
    /* border: 0pt solid #929292; */
    border: 2pt solid #40C4FF;
}}

@media (prefers-color-scheme: dark) { #urlField::placeholder {
    color: #CFCFCF;
}}

.toolbarButtons {
    height: 8dvh;
    width: auto;
    border: none;
    /* cursor: pointer; */
    border-radius: 2pt;

    margin-top: 0%;
    margin-bottom: 0%;
    padding-block: 0px;
}

/* #downloadCanvas {
    height: 0%;
    width: 0%;
    overflow: hidden;
} */

.navBackButton {
    background: #F3F3F3 url('../iconfiles/SVGs/navigationarrowsicon_back_fluent_black.svg') no-repeat center center;
    background-size: 75% 75%;
}
.navBackButton:hover {
    background-color: #EAEAEA;
}
.navBackButton:active {
    background-color: #EDEDED;
}
@media (prefers-color-scheme: dark) {
    .navBackButton {
        background: #202020 url('../iconfiles/SVGs/navigationarrowsicon_back_fluent_white.svg') no-repeat center center;
        background-size: 75% 75%;
    }
    .navBackButton:hover {
        background-color: #2D2D2D;
    }
    .navBackButton:active {
        background-color: #292929;
    }
}

/* THIS SPECIFIC ONE SITS IN THE TEXTBOX */
#copyTextButton {
    background: #FBFBFB url('../iconfiles/SVGs/clipboardicon_copy_fluent_outline_black.svg') no-repeat center center;
    background-size: 75% 75%;

    width: 9dvh;
    position:absolute;
    bottom: 2pt;
    right: 2pt;
}
#copyTextButton:hover {
    background-color: #F6F6F6;
}
#copyTextButton:active {
    background-color: #FBFBFB;
}
@media (prefers-color-scheme: dark) {
    #copyTextButton {
        background: #292929 url('../iconfiles/SVGs/clipboardicon_copy_fluent_outline_white.svg') no-repeat center center;
        background-size: 75% 75%;
    }
    #copyTextButton:hover {
        background-color: #323232;
    }
    #copyTextButton:active {
        background-color: #292929;
    }
}/* THIS SPECIFIC ONE SITS IN THE TEXTBOX */


#openLinksManuallyButton {
    background: #F3F3F3 url('../iconfiles/SVGs/openicon_link_fluent_black.svg') no-repeat center center;
    background-size: 75% 75%;
}
#openLinksManuallyButton:hover {
    background-color: #EAEAEA;
}
#openLinksManuallyButton:active {
    background-color: #EDEDED;
}
@media (prefers-color-scheme: dark) {
    #openLinksManuallyButton {
        background: #202020 url('../iconfiles/SVGs/openicon_link_fluent_white.svg') no-repeat center center;
        background-size: 75% 75%;
    }
    #openLinksManuallyButton:hover {
        background-color: #2D2D2D;
    }
    #openLinksManuallyButton:active {
        background-color: #292929;
    }
}

#switchCameraButton {
    background: #F3F3F3 url('../iconfiles/SVGs/camicon_switch_fluent_black.svg') no-repeat center center;
    background-size: 75% 75%;
}
#switchCameraButton:hover {
    background-color: #EAEAEA;
}
#switchCameraButton:active {
    background-color: #EDEDED;
}
@media (prefers-color-scheme: dark) {
    #switchCameraButton {
        background: #202020 url('../iconfiles/SVGs/camicon_switch_fluent_white.svg') no-repeat center center;
        background-size: 75% 75%;
    }
    #switchCameraButton:hover {
        background-color: #2D2D2D;
    }
    #switchCameraButton:active {
        background-color: #292929;
    }
}

#qrShareButton {
    background: #F3F3F3 url('../iconfiles/SVGs/shareicon_win11_fluent_black.svg') no-repeat center center;
    background-size: 75% 75%;
}
#qrShareButton:hover {
    background-color: #EAEAEA;
}
#qrShareButton:active {
    background-color: #EDEDED;
}
@media (prefers-color-scheme: dark) {
    #qrShareButton {
        background: #202020 url('../iconfiles/SVGs/shareicon_win11_fluent_white.svg') no-repeat center center;
        background-size: 75% 75%;
    }
    #qrShareButton:hover {
        background-color: #2D2D2D;
    }
    #qrShareButton:active {
        background-color: #292929;
    }
}

#qrDownloadButton {
    background: #F3F3F3 url('../iconfiles/SVGs/saveicon_fluent_black.svg') no-repeat center center;
    background-size: 75% 75%;
}
#qrDownloadButton:hover {
    background-color: #EAEAEA;
}
#qrDownloadButton:active {
    background-color: #EDEDED;
}
@media (prefers-color-scheme: dark) {
    #qrDownloadButton {
        background: #202020 url('../iconfiles/SVGs/saveicon_fluent_white.svg') no-repeat center center;
        background-size: 75% 75%;
    }
    #qrDownloadButton:hover {
        background-color: #2D2D2D;
    }
    #qrDownloadButton:active {
        background-color: #292929;
    }
}

#switchForegroundButton {
    background: #F3F3F3 url('../iconfiles/SVGs/arrangeicon_foreground_fluent_black.svg') no-repeat center center;
    background-size: 75% 75%;
}
#switchForegroundButton:hover {
    background-color: #EAEAEA;
}
#switchForegroundButton:active {
    background-color: #EDEDED;
}
@media (prefers-color-scheme: dark) {
    #switchForegroundButton {
        background: #202020 url('../iconfiles/SVGs/arrangeicon_foreground_fluent_white.svg') no-repeat center center;
        background-size: 75% 75%;
    }
    #switchForegroundButton:hover {
        background-color: #2D2D2D;
    }
    #switchForegroundButton:active {
        background-color: #292929;
    }
}

#switchJustScanButton {
    background: #F3F3F3 url('../iconfiles/SVGs/arrangeicon_none_fluent_black.svg') no-repeat center center;
    background-size: 75% 75%;
}
#switchJustScanButton:hover {
    background-color: #EAEAEA;
}
#switchJustScanButton:active {
    background-color: #EDEDED;
}
@media (prefers-color-scheme: dark) {
    #switchJustScanButton {
        background: #202020 url('../iconfiles/SVGs/arrangeicon_none_fluent_white.svg') no-repeat center center;
        background-size: 75% 75%;
    }
    #switchJustScanButton:hover {
        background-color: #2D2D2D;
    }
    #switchJustScanButton:active {
        background-color: #292929;
    }
}

#installPwaLearnMoreButton {
    background: #202020 url('../iconfiles/SVGs/downloadicon_fluent_white.svg') no-repeat center center;
    background-size: 75% 75%;
    margin-left: 1dvw;
    /* margin-right: 5%; */
    border-radius: 5pt;
    /* height: 8vh; */
}
#installPwaLearnMoreButton:hover {
    background-color: #2D2D2D;
}
#installPwaLearnMoreButton:active {
    background-color: #292929;
}
@media (prefers-color-scheme: dark) {
    #installPwaLearnMoreButton {
        background: #F3F3F3 url('../iconfiles/SVGs/downloadicon_fluent_black.svg') no-repeat center center;
        background-size: 75% 75%;
    }
    #installPwaLearnMoreButton:hover {
        background-color: #EAEAEA;
    }
    #installPwaLearnMoreButton:active {
        background-color: #EDEDED;
    }
}

/* ----------------------------------------------- Normal Tab Button */
#switchToCameraButton {
    background: #F3F3F3 url('../iconfiles/SVGs/camicon_fluent_black.svg') no-repeat center center;
    background-size: 75% 75%;
}
#switchToCameraButton:hover {
    background-color: #EAEAEA;
}
#switchToCameraButton:active {
    background-color: #EDEDED;
}
@media (prefers-color-scheme: dark) {
    #switchToCameraButton {
        background: #202020 url('../iconfiles/SVGs/camicon_fluent_white.svg') no-repeat center center;
        background-size: 75% 75%;
    }
    #switchToCameraButton:hover {
        background-color: #2D2D2D;
    }
    #switchToCameraButton:active {
        background-color: #292929;
    }
}

#switchToQrButton {
    background: #F3F3F3 url('../iconfiles/SVGs/qricon_fluent_black.svg') no-repeat center center;
    background-size: 75% 75%;
}
#switchToQrButton:hover {
    background-color: #EAEAEA;
}
#switchToQrButton:active {
    background-color: #EDEDED;
}
@media (prefers-color-scheme: dark) {
    #switchToQrButton {
        background: #202020 url('../iconfiles/SVGs/qricon_fluent_white.svg') no-repeat center center;
        background-size: 75% 75%;
    }
    #switchToQrButton:hover {
        background-color: #2D2D2D;
    }
    #switchToQrButton:active {
        background-color: #292929;
    }
}

/* ----------------------------------------------- Active Tab Button */
#switchToCameraButtonActive {
    background: #F3F3F3 url('../iconfiles/SVGs/camicon_fluent_black_active.svg') no-repeat center center;
    background-size: 75% 75%;
}
#switchToCameraButtonActive:hover {
    background-color: #EAEAEA;
}
#switchToCameraButtonActive:active {
    background-color: #EDEDED;
}
@media (prefers-color-scheme: dark) {
    #switchToCameraButtonActive {
        background: #202020 url('../iconfiles/SVGs/camicon_fluent_white_active.svg') no-repeat center center;
        background-size: 75% 75%;
    }
    #switchToCameraButtonActive:hover {
        background-color: #2D2D2D;
    }
    #switchToCameraButtonActive:active {
        background-color: #292929;
    }
}

#switchToQrButtonActive {
    background: #F3F3F3 url('../iconfiles/SVGs/qricon_fluent_black_active.svg') no-repeat center center;
    background-size: 75% 75%;
}
#switchToQrButtonActive:hover {
    background-color: #EAEAEA;
}
#switchToQrButtonActive:active {
    background-color: #EDEDED;
}
@media (prefers-color-scheme: dark) {
    #switchToQrButtonActive {
        background: #202020 url('../iconfiles/SVGs/qricon_fluent_white_active.svg') no-repeat center center;
        background-size: 75% 75%;
    }
    #switchToQrButtonActive:hover {
        background-color: #2D2D2D;
    }
    #switchToQrButtonActive:active {
        background-color: #292929;
    }
}

.normalColoredButton {
    border-radius: 4pt;
    border: none;
    font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
    background-color: #40C4FF;
}
.normalColoredButton:hover {
    background-color: #3db8f1;
}
.normalColoredButton:active {
    background-color: #3bace1;
}

#installPwaNowButton {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2pt;
    width: 98%;
    height: 8dvh;
    font-size: larger;
    font-weight: bolder;
}

@media (orientation: landscape) {
    .letterboxOnLandscape {
        width: 45dvw;
        margin-left: auto;
        margin-right: auto;
    }
}

#installPageHeader {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    justify-content: center;

    height: fit-content;
    width: 100%;
    margin-top: 1dvh;
    margin-bottom: 3dvh;
}

.appLogo {
    height: 20dvh;
    align-self: flex-start;
}

.appImageContainer {
    width: 98%;
    height: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.appImage {
    width: 100%;
    max-height: 100%;
    border-radius: 4pt;
    
    object-position: 0;
    object-fit: contain;
}

/* @media (prefers-color-scheme: dark) {
    .styledScrollbar {
        scrollbar-color: #9F9F9F #202020;
    }
} */

.descriptionText {
    font-size: larger;
}