.ui h1 {
    margin-top: 3px;
    margin-bottom: 20px;
    margin-left: 3%;
    font-size: 32px;
}

.ui {
    text-align: left;
    font-family: 'Roboto';
    position: fixed; /* Ensures the div stays in place while scrolling */
    z-index: 2000; /* Makes sure it stays on top of other elements */
    max-width: 550px;
    width: 100%;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, .2); /* h-offset, v-offset, blur, color */
    user-select: none; /* Prevents text selection */
    top: 0px;
    left: 30%;
    border: 1px solid rgba(0, 0, 0, .2);
    overflow: hidden; /* Ensures content doesn't overflow rounded corners */
    visibility: hidden;
}


#uiMac {
    border-radius: 10px;
    /*visibility: visible;*/
}

#uiLin {
    /*visibility: visible;*/
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.uiHeader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap; /* Keeps the text on one line */
    padding: 0%;
}

#uiHeaderWin {
    /*background-color: #f0f0f0;*/
    /*background-color: white;*/
    background-color: #f3f3f3;
}

#uiHeaderMac, #uiHeaderLin {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: 1px solid lightgray;
}

#uiHeaderMac {
    justify-content: flex-start;
    padding: 2px 0; /* Vertical padding */
}

#uiHeaderLin {
    justify-content: flex-end;
    padding: 1px 0; /* Vertical padding */
}

#headerButtonsMac {
    margin-left: 1%;
    margin-right: 40%;
}

.uiTitle {
    font-size: 10px;
    margin: 1%;
}

.uiBody {
    padding: 1.5%;
    padding-top: 0%;
}

.logo {
    height: 10px;
    margin-right: 0.5%;
    margin-left: 0%;
}

.windowIcon {
    height: 20px;
    margin-right: 2%;
}

.websiteInfo {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    white-space: nowrap;
    padding: 0%;
    margin-top: 2%;
    margin-left: 3%;
}

.websiteInfo p {
    margin: 0%;
}

.idCard {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 20px;
    margin-left: 14px;
    margin-right: 14px;
    padding: 2%;
    border-radius: 3px;
    white-space: nowrap;
}

.idCardIcon {
    margin-left: 2%;
    height: 30px;
}

.pinDiv {
    text-align: center;
}

.pinDiv p {
    margin-left: 2%;
}

.pinInput {
    font-size: 28px;
    height: 48%;
    width: 37%;
    padding: 15px;
    padding-top: 7px;
    padding-bottom: 7px;
    margin: 3%;
    margin-top: 2%;
    border-radius: 3px;
}

.pinInput:focus {
    outline: none; /* Prevents the default black outline */
}