/*
Profile
*/
#main{
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 1.846;
    color: #56575A;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    #main h2 {
        font-size: 18px;
        letter-spacing: 1px;
        line-height: 24px;
    }
}

.section-padding{
    padding: 30px 0;
}

#mypp24profile-logo-div{
    margin-top: 1%;
    padding-left:15px;
}

#mypp24logo-profile{
    width: 100%;
    max-width: 240px;
    height: auto;
    margin: 0;
    vertical-align: middle;
}

#mypp24user-image{
    width: 100%;
    max-width: 80px;
    min-width: 60px;
    height: auto;
    vertical-align: middle;
    z-index:1;
}

#change-profile-pic{
    position: absolute;
    z-index:10;
    top:50%;
    left:51%;
    height: 40px;
    width: 40px;
}

#mypp24-username{
    font-size:1.3em;
    color: #007DC5;
}

.btn-link{
    font-size: 14px;
    padding-left: 35px;
    padding-right: 35px;
    color: #0077c8;
}

.btn-profile{
    border-radius: 5px;
    font-size: 14px;
    padding-left: 35px;
    padding-right: 35px;
    border: 1px solid #0077c8;
    background-color: #0077c8;
    color: #FFFFFF;
}

.btn-profile:hover, .btn-profile:focus{
    outline: 0;
    background: #007DC5 !important;
    border: 1px solid #007DC5 !important;
    -webkit-transition: all 0.2s ease-in-out !important;
    -moz-transition: all 0.2s ease-in-out !important;
    -o-transition: all 0.2s ease-in-out !important;
    transition: all 0.2s ease-in-out !important;
    color: #fff;
}

.btn-dark-blue, .btn-darkblue, a.btn-darkblue, a.btn-darkblue:link, a.btn-darkblue:visited, a.btn-darkblue:hover, a.btn-darkblue:active{
    border-radius: 5px;
    font-size: 14px;
    padding-left: 35px;
    padding-right: 35px;
    border: 1px solid #007DC5;
    background-color: #007DC5;
    color: #FFFFFF;
}

.btn-dark-blue:hover, .btn-dark-blue:focus, .btn-darkblue:hover, .btn-darkblue:link, .btn-darkblue:active, .btn-darkblue:focus, .btn-darkblue.active {
    outline: 0;
    background: #00B4DA !important;
    border: 1px solid #00B4DA !important;
    -webkit-transition: all 0.2s ease-in-out !important;
    -moz-transition: all 0.2s ease-in-out !important;
    -o-transition: all 0.2s ease-in-out !important;
    transition: all 0.2s ease-in-out !important;
    color: #fff;
}

.btn-lightblue, a.btn-lightblue, a.btn-lightblue:link, a.btn-lightblue:visited, a.btn-lightblue:hover, a.btn-lightblue:active {
  border-radius: 5px;
  font-size: 14px;
  padding-left: 35px;
  padding-right: 35px;
  border: 1px solid #00B4DA;
  background-color: #00B4DA;
  color: #FFFFFF;
}

.btn-lightblue:hover, .btn-lightblue:link, .btn-lightblue:active, .btn-lightblue:focus, .btn-lightblue.active {
  border-radius: 5px;
  font-size: 14px;
  border: 1px solid #00B4DA;
  background-color: #00B4DA;
  -webkit-transition: all 0.2s ease-in-out !important;
  -moz-transition: all 0.2s ease-in-out !important;
  -o-transition: all 0.2s ease-in-out !important;
  transition: all 0.2s ease-in-out !important;
  color: #FFFFFF;
}

.btn-profile-set{
    padding-left: 25px;
    padding-right: 25px;
    margin-top:15px;
}

.btn-default{
    background-color: #FFFFFF;
    color: #007DC5;
    border: 1px solid #bbb !important;
}

.btn-default:hover, .btn-default:focus {
    outline: 0px;
    color: #007DC5;
    background: #F1F1F1 !important;
    border: 1px solid #007DC5 !important;
}

.mt-5{
    margin-top: 5px !important;
}

.mt-10{
    margin-top: 10px !important;
}

.mt-15{
    margin-top:15px;
}

.mt-20{
    margin-top:20px;
}

.mt-25{
    margin-top:25px;
}

.mt-30{
    margin-top:30px;
}

.mb-10{
    margin-bottom:10px;
}

.mb-15{
    margin-bottom:15px;
}

.mb-20{
    margin-bottom:20px;
}

.mb-30{
    margin-bottom:30px;
}

#profile-settings-header{
    font-weight: 700;
    color: #007DC5;
}

.mngElecHead{
    font-family: 'Montserrat', sans-serif;
    color: #838383;
    font-weight: 100;
    text-align: left;
    text-transform: uppercase;
    text-shadow: 2px 2px 2px #FFF;
    text-decoration: none !important;
}

.mngElecHead:hover{
    text-decoration: none;
}

.profile-collapse-heading{
    color: #838383;
    font-weight: 100;
    text-align: left;
    text-transform: uppercase;
    text-shadow: 2px 2px 2px #FFF;
}

.highlightText {
    color: #1EB0CA;
}

.highlightText:hover {
    color: gray;
}

.anchor-blue{
    color: #007DC5;
}

.blue-text{
    color: #007DC5;
    font-family: 'Montserrat', sans-serif;
}

.text-white{
    color: #fff;
}

.profile-dropdown{
    color: #838383;
    background-color: #f5f5f5;
    border-color: #ddd;
    padding: 10px 15px;
}

.accordion-toggle.collapsed::after {
    margin-top: 5px;
    padding-right: 5px;
    content: "\f077";
    font-weight: 900;
    font-size: 15px;
}

.accordion-toggle::after {
    font-family: "Font Awesome 5 Free";
    content: "\f078";
    font-weight: 900;
    float: right;
    margin-left: 15px;
    margin-top: 5px;
    padding-right: 5px;
    font-size: 15px;
}

.profile-collapse-heading::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f078";
    float: right;
    margin-left: 15px;
}

.profile-collapse-heading.collapsed::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f078";
    float: right;
    margin-left: 15px;
}

.profile-card{
    margin-top:5px;
    border-bottom: 1px solid rgba(0,0,0,.125) !important;
}

p{
    font-size: 14px;
    color: #929292;
    padding: 0 10px;
}

.sign-up-banner{
    width: 100%;
    height: auto;
}

.blue-row{
    background-color: #007DC5;
    color: #FFF !important;;
}

.blue-background{
    background-color: #007DC5;
}

.blue-border{
    border-color: #007DC5;
}

.light-blue-row{
    background-color: #01AED9;
    color: #fff;
}

.welcome-page-banner{
    background: url("../img/banners/Welcome-Banner-pc.jpg") no-repeat center bottom;
    background-size: cover;
    position: relative;
    height: 400px;
    width: 100%;
}

.prod-btn {
    border-radius: 10px;
    margin-top: 5px;
    width: 127px;
    height: 127px;
    margin: 3px;
}

.prod-btn:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.trans-prod-btn{
    border-radius: 10px;
    margin-top: 5px;
    width: 100px;
    height: 100px;
    margin: 3px;
}

.trans-prod-btn:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.white-card-header{
    background-color: #fff;
}

.grey-card-body{
    background-color: #cecece;
}

.w-130px{
    width: 130px;;
}

.w-180px{
    width: 180px;;
}

.w-240px{
    width: 240px;;
}

.h-45{
    height: 45px;
}

.anchor-white-underline{
    color:white;
    text-decoration: underline !important;
}

.form-group>label{
    color: #6c757d !important;
}

label{
    color: #6c757d;
}

.darkblue-hr{
    border: 0.5px solid #007DC5;
    background-color: #007DC5;
    color: #007DC5;
}

/* Page Banners */
.pages_banner, .homepage_banner{
    display: block;
    width: 100%;
}

.pages_mobile_banner, .homepage_mobile_banner{
    display: none;
    width: 100%;
}

/*Mobile */
/* Page Banners */
@media only screen and (max-width: 450px) {
    .pages_banner,.homepage_banner{
        display: none;
    }
    .pages_mobile_banner,.homepage_mobile_banner{
        display: block;
        width: 100%;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .welcome-page-banner{
        background: url("../img/banners/Welcome-Banner-mobile.jpg") no-repeat center center;
        background-size: cover;
        position: relative;
        height: 120px;
        width: 100%;
    }

    #change-profile-pic{
        top:50%;
        left:53%;
    }
}