html, body {
    font-family: "Segoe UI","Helvetica Neue","Lucida Grande","Roboto","Ebrima","Nirmala UI","Gadugi","Segoe Xbox Symbol","Segoe UI Symbol","Meiryo UI","Khmer UI","Tunga","Lao UI","Raavi","Iskoola Pota","Latha","Leelawadee","Microsoft YaHei UI","Microsoft JhengHei UI","Malgun Gothic","Estrangelo Edessa","Microsoft Himalaya","Microsoft New Tai Lue","Microsoft PhagsPa","Microsoft Tai Le","Microsoft Yi Baiti","Mongolian Baiti","MV Boli","Myanmar Text","Cambria Math";
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
}

.btn-link {
    color: #006bb7;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.btn-secondary {
    color: white;
    background-color: slategray;
    border-color: #00378A;
    height: 40px;
    min-width: 130px;
    border-radius: 50px;
    font-family: Lato;
    font-weight: 700;
    font-size: 15px;
}

.btn-primary {
    color: white;
    background-color: #00A6AC;
    border-color: #00378A;

    height: 40px;
    min-width: 130px;
    border-radius: 50px;

    font-family: Lato;
    font-weight: 700;
    font-size: 15px;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}


.full-centered-box {
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
    z-index: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.full-centered-box::before {
    content: "";
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    background: linear-gradient( 132.65deg, #01555f 0%, #001823 51.72%, #001823 100% );
    opacity: 0.65;
    z-index: -1; /* send it behind your content */
}

.centered-dialog {
    width: 550px;
    padding: 50px;
    background-color: #162939;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px;
    border-radius: 20px;
    font-weight: 500;
    color: white;
}

/* AgeVerify hosts the Yoti Face Capture widget, which needs more horizontal room than
   the standard sign-in form. :has() lets us widen the dialog only when this page is
   rendered, leaving every other auth page at 550px. */
.centered-dialog:has(.age-verify-wide) {
    width: min(720px, calc(100vw - 40px));
}

input.text-box {
    padding: 4px 8px;
    border-style: solid;
    border-width: 1px;
    border-color: #00A6AC;
    background-color: transparent;
    height: 32px;
    height: 2rem;
    padding: 6px 10px;
    height: 36px;
    outline: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    background-color: transparent;
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0;
    padding-left: 0;
    width: 100%;

    font-family: Lato;
    font-weight: 400;
    font-size: 19px;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
}

a {
    color: #01CCD3;
}

input.text-box::placeholder {
    color: white;
    opacity: 0.75;
}

input.text-box:-webkit-autofill,
input.text-box:-webkit-autofill:hover,
input.text-box:-webkit-autofill:focus,
input.text-box:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #162939 inset !important;
    -webkit-text-fill-color: white;

}

input.text-box-error {
    border-style: solid;
    border-width: 1px;
    border-color: red !important;
    border-radius: 5px;
    padding: 0px 0px 0px 10px !important;
}

input.text-box:focus {
    background-color: #fff;
    border-color: #0067b8;
    background-color: transparent
}

input.text-box:hover {
    border-color: #323232;
    border-color: rgba(0,0,0,0.8)
}

.flex-dialog {
    display: flex;
    flex-direction: column;
}

.flex-dialog-gap-small {
    display: flex;
    flex-direction: column;
    gap: 2.5px;
}

.flex-dialog-gap {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-wrap: anywhere;

}

.flex-dialog-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.flex-option-centered {
    justify-content: center;
}

img.surgease-logo {
    width: 156px;
    height: 43px;
}

.spinner {
    width: 75px;
    height: 75px;
    margin: 1em auto; /* center horizontally and add some vertical spacing */
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top-color: #0052cc; /* primary brand color */
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Keyframes */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.hyperlink-button {
    margin: 0px;
    padding: 0px;
    color: #0d6efd;
    border: none;
    background-color: transparent;
    text-decoration: underline;
}

a {
    text-decoration: underline;
}

/*Account Cards*/
.page-wrapper {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    padding: 2rem;
}


.account-card label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #444;
}

.account-card input {
    width: 100%;
    height: 3rem;
    padding: 0 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.account-card input:focus {
    border-color: #1a73e8;
    box-shadow: 0 0 0 3px rgba(26,115,232,0.2);
    outline: none;
}

.profile-picture {
    cursor: pointer;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 60px;
    height: 60px;
    border-radius: 50px;
}

.profile-card {
    background: white;
    display: flex;
    position: fixed;
    border: 1px groove #01B4BA;
    right: 5px;
    top: 15px;
    border-radius: 5px;
    padding: 10px;
    gap: 10px;
    align-items: center;
    justify-content: space-around;
}


.profile-card-picture {
    cursor: pointer;
    width: 88px;
    height: 88px;
    border-radius: 50px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 2px solid #01ccd3;
}


.text-header {
    font-family: Lato;
    font-weight: 500;
    font-size: 25px;
    line-height: 100%;
    letter-spacing: 0%;
}

.text-header-mini {
    font-family: Lato;
    font-weight: 400;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0%;
}

.button-bk-white {
    min-width: 121px;
    height: 42px;
    top: 288px;
    left: 682px;
    opacity: 1;
    border-radius: 50px;
    color: #00378A;
    background: white;
    border: 2px solid #00378A;
    text-align: center;
    align-content: center;
    font-weight: bolder;
}


.button-bk {
    min-width: 121px;
    height: 42px;
    top: 288px;
    left: 682px;
    opacity: 1;
    border-radius: 50px;
    border-width: 2px;
    color: white;
    border-color: #00378A;
    background: #00378A;
    font-weight: bolder;
}

.input-transparent {
    border: 0px solid black !important;
    background-color: transparent !important;
    width: 100%;
    height: 55px;
    font-family: Lato;
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    padding: 0px 10px;
}


.input-normal {
    border: 2px solid #CBCBCB !important;
    opacity: 1 !important;
    border-radius: 10px !important;
    border-width: 1px !important;
    padding: 10px !important;
    color: #000000c9;
}