body {
    background: #e7e7e7 !important;
}

.navbar-brand img {
    width: 160px;
    margin-left: 25px;
}

.h-link {
    color: #87b6cc;
}

.text-grey {
    color: #5e5e5e;
}

p {
    font-size: 1rem !important;
}

.form-control {
    border-radius: 0px;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}

@media (max-width: 991px) {
    .container {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (min-width: 992px) {
    .container {
        width: 960px !important;
    }
}

.pubInfoIcon, .pubInfoIcon:hover, .pubInfoIcon:active {
    display: flex;
    position: relative;
    width: 32px;
    height: 32px;
    top: 0;
    right: 25px;
    border-radius: 50px;
    background-color: #a5a5a5;
    color: #fff;
    float: right;
}

.infoIcon {
    font-size: 10pt;
    margin: 9px auto;
}

.knowMoreBtn {
    color: #333 !important;
    background: #c9c9c9;
    border-radius: 25px;
    padding: 7px 0 !important;
    border: none;
    width: 100%;
}

.grant-popup-btn {
    color: #fff !important;
    background: #505050;
    border-radius: 25px;
    padding: 7px 35px !important;
    border: none;
}

.createAccBtn {
    color: #fff !important;
    background: #505050;
    border-radius: 25px;
    padding: 7px 0 !important;
    border: none;
    width: 100%;
}

.btnIM {
    color: #fff !important;
    background: #505050;
    border-radius: 25px;
    padding: 7px 35px !important;
    border: none;
}

@media (max-width: 575px) {
    .knowMoreBtn {
        margin-bottom: 1rem;
    }
}

@media (max-width: 1199px) {
    .knowMoreBtn {
        font-size: 10pt;
    }

    .createAccBtn {
        font-size: 10pt;
    }

    .btnIM {
        font-size: 10pt;
    }
}

#pubProfile {
    padding: 1.5rem 0;
}

.pub-Profile-align {
    align-items: center;
}

.publicProfile {
    background: #fff;
    border: 1px solid #dcdcdc;
    padding: 5rem;
}

.userImg {
    border: 4px solid #494949;
    border-radius: 50%;
    width: 175px;
}

.copyBtn {
    color: #fff !important;
    background: #505050;
    border-radius: 25px;
    padding: 5px 35px;
    border: none;
    display: flex;
    align-items: center;
    margin: 0 auto;
}

.codeImg {
    width: 200px;
    border: 1px solid #ddd;
    display: flex;
    margin: 0 auto;
}

.qrcodeImg {
    width: 150px;
    border: 1px solid #ddd;
    display: flex;
    margin: 0 auto;
}

@media (max-width: 575px) {
    .publicProfile {
        padding: 1.5rem;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .publicProfile {
        padding: 2rem;
    }
}

@media (max-width: 767px) {
    .pub-Profile-align {
        flex-direction: column-reverse;
        text-align: center;
    }

    .pubInfoIcon {
        margin-top: 1rem;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .publicProfile {
        padding: 3rem;
    }
}

@media (max-width: 991px) {
    .prof-user-res-contact {
        display: flex;
        justify-content: center;
    }

    .prof-user-contact {
        display: none;
    }

    .Prof-actionIcon {
        display: flex;
        width: 60px;
        height: 60px;
        border-radius: 50px;
        justify-content: center;
        align-items: center;
        background-color: #2c2c2c;
        color: #fff;
    }

    .Prof-actionIcon:active, .Prof-actionIcon:hover {
        background-color: #767676;
        color: #fff;
    }

    .qrcodeImg {
        width: 150px;
        margin-bottom: 1rem;
    }
}

@media (min-width: 992px) {
    .prof-user-res-contact {
        display: none;
    }
}

/*Resume Template Preview*/

.defaultTemp {
    padding: 5rem 7rem;
}

.tempResponsive {
    margin: 0;
    background: #fff !important;
}

.temp2 {
    padding: 5rem 4rem;
}

.temp3 {
    padding: 5rem 4rem;
}

.tempPreview p {
    font-size: 1rem;
}

.profInfoCol {
    background: #1e2d3c;
    color: #fff;
}

.profInfoCol {
    padding: 3rem 2rem;
}

.profTxtCol {
    padding: 3rem 2rem;
}

.tempProfPic {
    display: flex;
    margin: 0 auto;
    border-radius: 100%;
    border: 10px solid #486887;
    width: 200px;
}

.profInfoCol h4, .profInfoCol h5, .profInfoCol hr {
    color: #fff;
}

.contactList {
    list-style: none;
    padding-left: 0.5rem;
}

.tempUserImg {
    width: 150px;
    border: 1px solid #ddd;
}

.temp3UserImg {
    width: 150px;
    border: 1px solid #ddd;
}

.tempNameTag {
    text-transform: uppercase;
    color: #00366d;
    font-size: 24pt;
}

.tempSubTag {
    font-size: 18pt;
}

.resContentTitle {
    text-transform: uppercase;
    color: #00366d;
    font-size: 14pt;
}

.resContent {
    font-size: 12pt;
}

.resSubContent {
    font-size: 11pt;
}

.temp3NameTag {
    text-transform: uppercase;
    color: #00366d;
    font-size: 24pt;
    /*text-align: right;*/
}

.temp3SubTag {
    font-size: 18pt;
    /*text-align: right;*/
}

/*.temp3Contact {
    text-align: right;
}*/

.resTemp3Title {
    text-transform: uppercase;
    color: #00366d;
    font-size: 14pt;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

    .resTemp3Title:before,
    .resTemp3Title:after {
        content: '';
        border-top: 2px solid #333;
        margin: 0 20px 0 0;
        flex: 1 0 20px;
    }

    .resTemp3Title:after {
        margin: 0 0 0 20px;
    }

.resTemp3Content {
    font-size: 12pt;
}

.resTemp3SubContent {
    font-size: 11pt;
}

@media (max-width: 575px) {
    .tempUserImg {
        margin-bottom: 1rem;
    }
}

@media (min-width: 576px) {
    .expAlign {
        text-align: right;
    }
}

@media (max-width: 767px) {
    .tempResponsive {
        margin: 0 -1rem;
    }

    .defaultTemp {
        padding: 0;
    }

    .dResTempPreview {
        padding: 0;
    }

    .temp2 {
        padding: 0;
    }

    .temp3 {
        padding: 0;
    }

    .tempPreview {
        padding: 0;
    }

    .profInfoCol {
        padding: 1rem;
    }

    .profTxtCol {
        padding: 0 0.7rem;
    }

    .temp3UserImg {
        margin: 0 auto 2rem;
        display: flex;
    }

    .temp3NameTag {
        text-align: center;
    }

    .temp3SubTag {
        text-align: center;
    }

    .temp3Contact {
        text-align: center;
    }
}

@media (min-width: 992px) {
    .dResTempPreview {
        padding: 0 0 0 0.75rem;
    }

    .profPicRes {
        display: flex;
    }

    .mprofPicRes {
        display: none;
    }

    .t2ResQR {
        display: flex;
    }

    .t2MQR {
        display: none;
    }
}

@media (max-width: 991px) {
    .tempResponsive {
        flex-direction: column-reverse;
        border: 1px solid #1e2d3c;
    }

    .profPicRes {
        display: none;
    }

    .mprofPicRes {
        display: flex;
        position: relative;
        overflow: hidden;
        background-color: #1e2d3c;
    }

        .mprofPicRes:before {
            content: '';
            position: absolute;
            width: 100%;
            height: 50%;
            background-color: rgb(255, 255, 255); /* fallback */
            background-color: rgba(255, 255, 255);
            top: 95px;
            z-index: 0;
            margin: 3rem 0rem;
            border: 1px solid #1e2d3c;
        }

    .tempProfPic {
        z-index: 1;
        position: relative;
        margin-top: 3.5vh;
    }

    .t2ResQR {
        display: none;
    }

    .t2MQR {
        display: flex;
    }

    .resTitle {
        text-align: center;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .tempResponsive {
        margin: auto;
    }

    .profInfoCol {
        padding: 3rem 1rem;
    }

    .profTxtCol {
        padding: 0 0.7rem;
    }

    .profInfoCol p {
        font-size: 9pt !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .profInfoCol p {
        font-size: 10pt !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .defaultTemp {
        padding: 5rem 3rem;
    }

    .temp2 {
        padding: 5rem 3rem;
    }

    .temp3 {
        padding: 5rem 3rem;
    }
}

@media (max-width: 1199px) {
    .tempNameTag {
        font-size: 22pt;
    }
}