html, body {
    font-family: "Poppins";
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.h7 {
    font-weight: 400;
    font-size: 16px;
}

.h7-medium {
    font-weight: 500;
    font-size: 16px;
}

.subhead-1 {
    font-weight: 600;
    font-size: 14px;
}

.subhead-2 {
    font-weight: 500;
    font-size: 14px;
}

.tag-regular {
    font-weight: 400;
    font-size: 12px;
}

.tag-semibold {
    font-weight: 600;
    font-size: 12px;
}

.content {
    padding-top: 1.1rem;
}

.dialog-blurry-background {
    backdrop-filter: blur(10px);
}

.terms-icon-desktop {
    width: 75px;
    height: 54px;
}

.terms-icon-mobile {
    width: 45px;
    height: 32px;
}

.term-dialog-close-fab,
.term-dialog-close-fab:hover,
.term-dialog-close-fab :focus-visible {
    background-color: white;
}

@media screen and (max-width: 1279px) {
    .half-length {
        width: 100%;
    }

    .mud-paper.half-length {
        width: 100%;
    }
}

@media(min-width: 600px) {
    .invisible-sm {
        display: none !important;
    }
}

@media(max-width: 600px) {
    .visible-sm {
        display: none !important;
    }
}

.apphub-border {
    border-bottom: 1px solid #BFBFBF;
}

.main-content {
    position: relative;
    height: calc(100vh - 84px);
}

button.logout-btn {
    padding-left: 16px;
    width: fit-content;
}

    button.logout-btn:hover {
        background-color: #fff;
    }

.body-grey-2 {
    color: #82888E;
}

.subhead-grey {
    color: #777A7F;
}

.full-width {
    width: 100%;
}

.dialog-app-title {
    font-weight: 700;
    font-size: 20px;
    color: #101A24;
    margin: 20px 139px 8px 139px;
}

.dialog-message, .dialog-subtitle {
    color: #626263;
}

.dialog-app-tablet {
    width: 552px;
    min-height: 178px;
    border-radius: 8px;
}

.dialog-app-mobile {
    width: min(90vw, 552px);
    min-height: 184px;
    border-radius: 8px;
}

.dialog-app-tablet .mud-dialog-title .mud-button-close {
    width: 30px;
    height: 30px;
    background: #7F7F7F33;
}

.dialog-app-mobile .mud-dialog-title .mud-button-close {
    width: 26px;
    height: 26px;
    background: #7F7F7F33;
}

.dialog-app-tablet .mud-icon-root.mud-svg-icon, .dialog-app-mobile .mud-icon-root.mud-svg-icon {
    width: 18px;
    color: #3d3d3d80;
}

.loading-blur {
    display: flex;
    position: fixed;
    z-index: 100;
    width: 100%;
    height: max(100%, 100vh);
    background: rgba(238, 238, 238, 0.6);
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
}

/* loading spinner in index.html begin */
.lds-spinner {
    display: inline-block;
    position: relative;
    top: -8px;
    width: 35px;
    height: 35px;
    transform: scale(0.3, 0.3);
}

    .lds-spinner div {
        transform-origin: 40px 40px;
        animation: lds-spinner 1.2s linear infinite;
    }

        .lds-spinner div:after {
            content: " ";
            display: block;
            position: absolute;
            top: 3px;
            left: 37px;
            width: 6px;
            height: 18px;
            border-radius: 20%;
            background: black;
        }

        .lds-spinner div:nth-child(1) {
            transform: rotate(0deg);
            animation-delay: -1.1s;
        }

        .lds-spinner div:nth-child(2) {
            transform: rotate(30deg);
            animation-delay: -1s;
        }

        .lds-spinner div:nth-child(3) {
            transform: rotate(60deg);
            animation-delay: -0.9s;
        }

        .lds-spinner div:nth-child(4) {
            transform: rotate(90deg);
            animation-delay: -0.8s;
        }

        .lds-spinner div:nth-child(5) {
            transform: rotate(120deg);
            animation-delay: -0.7s;
        }

        .lds-spinner div:nth-child(6) {
            transform: rotate(150deg);
            animation-delay: -0.6s;
        }

        .lds-spinner div:nth-child(7) {
            transform: rotate(180deg);
            animation-delay: -0.5s;
        }

        .lds-spinner div:nth-child(8) {
            transform: rotate(210deg);
            animation-delay: -0.4s;
        }

        .lds-spinner div:nth-child(9) {
            transform: rotate(240deg);
            animation-delay: -0.3s;
        }

        .lds-spinner div:nth-child(10) {
            transform: rotate(270deg);
            animation-delay: -0.2s;
        }

        .lds-spinner div:nth-child(11) {
            transform: rotate(300deg);
            animation-delay: -0.1s;
        }

        .lds-spinner div:nth-child(12) {
            transform: rotate(330deg);
            animation-delay: 0s;
        }

@keyframes lds-spinner {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* loading spinner in index.html end */

.dialog-content {
    text-align: center;
    min-height: 120px;
}

.dialog-app-image {
    margin-top: 20px;
    height: 76px !important;
    width: 84px !important;
}

.dialog-app-update-title, dialog-app-install-title {
    font-weight: 700;
    font-size: 20px;
    color: #101A24;
}

.dialog-title-text {
    font-size: 26px;
    font-weight: 700;
    line-height: 39px;
    letter-spacing: 0px;
    text-align: center;
}

.dialog-subtitle1-text {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: #737685;
    width: 75%;
    margin: auto;
}

.dialog-app-subtitle {
    margin-top: 20px;
    margin-bottom: 50px;
}

.dialog-app {
    width: 800px;
    height: 420px;
}

button.dialog-app-confirm > .mud-button-label, button.dialog-app-cancel > .mud-button-label, button.dialog-app-confirm-mobile > .mud-button-label, button.dialog-app-cancel-mobile > .mud-button-label {
    color: #F5F5F5;
    font-size: 14px;
    font-weight: 500;
}

.dialog-app-confirm, .dialog-app-cancel {
    width: 180px;
    height: 44px;
    border-radius: 4px;
    padding: 14px 20px 14px 20px;
    background: #0E69A4;
    gap: 10px;
}

.dialog-app-confirm-mobile, .dialog-app-cancel-mobile {
    width: 100%;
    height: 44px;
    border-radius: 4px;
    padding: 14px 20px 14px 20px;
    background: #0E69A4;
    gap: 10px;
}

    .dialog-app-confirm:hover, .dialog-app-confirm-mobile:hover {
        background-color: var(--mud-palette-primary-darken)
    }