@font-face {
    font-family: 'Circular';
    src: url('https://f.hubspotusercontent00.net/hubfs/6778953/fonts/CircularXXWeb-Black.woff') format('woff'),
        url('https://f.hubspotusercontent00.net/hubfs/6778953/fonts/CircularXXWeb-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Circular';
    src: url('https://f.hubspotusercontent00.net/hubfs/6778953/fonts/CircularXXWeb-Bold.woff') format('woff'),
        url('https://f.hubspotusercontent00.net/hubfs/6778953/fonts/CircularXXWeb-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Circular';
    src: url('https://f.hubspotusercontent00.net/hubfs/6778953/fonts/CircularXXWeb-Regular.woff') format('woff'),
        url('https://f.hubspotusercontent00.net/hubfs/6778953/fonts/CircularXXWeb-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

/* MOBILE */

@media all and (max-width: 499px) {

    .supportImage {
        width: auto;
        height: 40px;
    }

    .slds-button {

        height: 48px !important;
        color: #9F72FF !important;

        padding: 12.5px 16px !important;

        font-family: 'Circular' !important;
        font-style: normal !important;
        font-weight: 900 !important;
        font-size: 14px !important;
        line-height: 23px !important;
        /* identical to box height, or 164% */

        text-align: center !important;
        letter-spacing: 1.4px !important;
        text-transform: uppercase !important;

        /* Utility/White */

        background: #FFFFFF !important;
        border-radius: 5px !important;
        border-color: #8656EF !important;
    }

    .slds-button:hover {

        /* Jelly/Jelly 75 */

        color: #ffffff !important;
        background: #9F72FF !important;
        border-radius: 5px !important;
    }

    .slds-input {
        border-color: #c8c6d2;
        border-radius: 3em;
    }

    .loginWrapper {
        display:flex;
        height: 80% !important;
        width: 50% !important;
        padding: 30px;
        border: #e5dbfd 3px solid;
        border-top-width: 3px;
        border-right-width: 3px;
        border-bottom-width: 3px;
        border-left-width: 3px;
        border-top-style: solid;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        border-top-color: rgb(229, 219, 253);
        border-right-color: rgb(229, 219, 253);
        border-bottom-color: rgb(229, 219, 253);
        border-left-color: rgb(229, 219, 253);
        border-image-source: initial;
        border-image-slice: initial;
        border-image-width: initial;
        border-image-outset: initial;
        border-image-repeat: initial;
        border-radius: 8px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
        transition: all 0.2s linear;
        margin: auto;
        margin-top: 2rem;
    }
}

/* END MOBILE */

/* LARGE DEVICE */

@media all and (min-width: 499px) {

    .supportImage {
        width: auto;
        height: 67px;
    }

    .slds-button {

        color: #9F72FF !important;

        height: 40px !important;

        padding: 8.5px 16px !important;

        font-family: 'Circular' !important;
        font-style: normal !important;
        font-weight: 900 !important;
        font-size: 14px !important;
        line-height: 23px !important;
        /* identical to box height, or 164% */

        text-align: center !important;
        letter-spacing: 1.4px !important;
        text-transform: uppercase !important;

        /* Utility/White */

        background: #FFFFFF !important;
        border-radius: 5px !important;
        border-color: #8656EF !important;
    }

    .slds-button:hover {

        /* Jelly/Jelly 75 */
        color: #ffffff !important;
        background: #9F72FF !important;
        border-radius: 5px !important;
    }

    .slds-input {
        border-color: #c8c6d2;
        border-radius: 3em;
    }

    .loginWrapper {
        min-height: 60%;
        width: 75%;
        padding: 30px;
        /*border: #e5dbfd 3px solid;*/
        border: 1px solid #D8DDE6;
        border-top-width: 3px;
        border-right-width: 3px;
        border-bottom-width: 3px;
        border-left-width: 3px;
        border-top-style: solid;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        border-image-source: initial;
        border-image-slice: initial;
        border-image-width: initial;
        border-image-outset: initial;
        border-image-repeat: initial;
        border-radius: 8px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
        transition: all 0.2s linear;
        margin: auto;
    }
}

/* END LARGE DEVICE */

body {
    font-family: 'Circular', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: #3d3652;
    background-color: #fff;
    background-color: #fff;
    letter-spacing: -0.4px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    padding: 0px !important;
    margin: 0px !important;
}

h1,
.h1 {
    font-family: Circular;
    font-size: 53.75px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.9px !important;
    font-weight: 900;
    color: inherit;
}

h3,
.h3 {
    font-family: inherit;
    font-size: 31.1px;
    font-weight: 900;
    line-height: 1.2;
    color: inherit;
}

h4,
.h4 {
    font-family: Circular;
    font-size: 21.6px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.2px !important;
    font-weight: 900;
    color: inherit;
}

.messageText {
    font-family: Circular;
    font-size: 18px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.2px !important;
    font-weight: 900;
    color: inherit;
}

.divider {
    border-bottom: 1px solid #eaeaea !important;
    margin-bottom: 30px !important;
    padding-bottom: 25px !important;
}

.slds-scope .slds-form-element__label {
    font-size: 18px;
}