:root {
    --font-primary: 'Red Hat Display', system-ui, sans-serif;
}

body {
    font-family: var(--font-primary);
    font-weight: 400;
    line-height: 1.6;
}

html, body {
    overflow-x: hidden;
}

main {
    min-height: 100vh;
    padding-bottom: 160px;
}

.btnPurpleLine {
    border-radius: 50px;
    border: 1px solid #7368A8;
    color: #7368A8;
    padding: 14px 40px;
}

    .btnPurpleLine:hover {
        border: 1px solid #7368A8;
        background-color: #7368A8;
        color: #FFFFFF;
    }

.profilephoto {
    width: 80%;
    border: 3px solid #EFECFF;
    border-radius: 50%;
}

.containertext {
    display: grid;
    place-items: center;
    height: 190px;
}

.containertext2 {
    display: grid;
    place-items: center;
    height: 190px;
    text-align: center;
}


.btnOrange {
    background-color: #FA7616;
    color: #FFFFFF;
    padding: 8px 40px;
    border-radius: 25px;
    font-weight:bold;
}

    .btnOrange:hover {
        color: #FFFFFF !important;
        background-color: #f69b4f !important;
        border: 1px solid #f69b4f !important;
    }

    .btnOrange:focus,
    .btnOrange:active,
    .btnOrange:focus-visible {
        color: #FFFFFF !important;
        background-color: #f69b4f !important;
        border: 1px solid #f69b4f !important;
    }

.btnOrangeReverse {
    background-color: #FFFFFF;
    color: #FA7616;
    border: 1px solid #FA7616;
    padding: 8px 40px;
    border-radius: 25px;
    font-weight: bold;
}

    .btnOrangeReverse:hover {
        color: #FFFFFF !important;
        background-color: #f69b4f !important;
        border: 1px solid #f69b4f !important;
    }

    .btnOrangeReverse:focus,
    .btnOrangeReverse:active,
    .btnOrangeReverse:focus-visible {
        color: #FFFFFF !important;
        background-color: #f69b4f !important;
        border: 1px solid #f69b4f !important;
    }

.cssErrorMsg {
    color: #ff0000;
    font-weight:bold;
    border: 1px solid #ff0000;
}

.cssSuccessMsg {
    color: #287d21;
    font-weight: bold;
    border: 1px solid #287d21;
}

/*mobile*/
@media (max-width: 575px) {
    .containertext {
        display: grid;
        place-items: center;
        height: none !important;
        height: 100px;
    }

    .containertext2 {
        text-align: center;
        margin-top: 120px;
    }

    .clsSignUpForm{
        margin-top: 20px !important;
        margin-left: 10px !important;
        width:90% !important;
    }
}

@media (max-width: 767px) {
    .profilephoto {
        width: 55% !important;
    }
}