/* body{background-color: #017ffe} */
.pn-content-body{/*padding: 85px 0;*/background-repeat: no-repeat;background-position: center bottom;min-height: 100vh;background-size: cover}
.pn-wrapper-form{padding: 30px;background-color: #fff;border-radius: 10px}
.pn-wrapper-form > ul{list-style: none;padding-left: 0;display: flex;justify-content: center;align-items: center}
.pn-wrapper-form > ul li{background-color: #f2f5fa;padding: 1px 0;width: 210px}
.pn-wrapper-form > ul li:first-child{border-radius: 100px 0 0 100px}
.pn-wrapper-form > ul li:last-child{border-radius: 0 100px 100px 0}
.pn-wrapper-form > ul li a{cursor: pointer;text-align: center;width: 100%;font-size: 16px;line-height: 21px;padding: 13px 15px 12px 15px;border-radius: 100px;display: inline-block}
.pn-wrapper-form > ul li.active > a{background-color: #017ffe;font-weight: bold;color: #fff;font-weight: bold}
.pn-wrapper-form .pn-wrapper-input{height: 40px;border: 1px solid #aeaeae;border-radius: 5px;background-color: #fff;overflow: hidden;padding: 0 15px 0 35px;position: relative}
.pn-wrapper-form .pn-wrapper-input:before{font-family: "FontAwesome";position: absolute;color: #7f7f7f;width: 35px;text-align: center;left: 0;display: flex;align-items: center;justify-content: center;height: 100%}
.pn-wrapper-form .pn-wrapper-email:before{content: "\f0e0"}
.pn-wrapper-form .pn-wrapper-password:before{content: "\f023";font-size: 20px}
.pn-wrapper-form .pn-wrapper-phone:before{content: "\f095";font-size: 20px}
.pn-wrapper-form .pn-wrapper-name:before{content: "\f007";font-size: 20px}
.pn-wrapper-form .pn-wrapper-password{padding-right: 35px}
.pn-wrapper-form .pn-wrapper-password .fa{position: absolute; right: 0; width: 35px; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 1; top: 0; cursor: pointer}
.pn-wrapper-form .pn-wrapper-password.active .fa:before{content: "\f06e"}
.pn-wrapper-form .pn-wrapper-input input{width: 100%;border: none;box-shadow: none;outline: none;background-color: transparent;height: 100%}
.pn-wrapper-form .pn-tabs .form-group{padding: 0 50px}
.pn-wrapper-form .pn-tab:not(.active){display: none}
.pn-wrapper-form .pn-button{width: 100%;background-color: #ff705f;margin-top: 15px}
.pn-wrapper-form .text-center{margin-top: 25px;font-size: 16px;line-height: 21px}
.pn-wrapper-form h2{color: #3a6cd1;font-size: 26px;line-height: 31px;font-weight: bold;margin: 0 0 15px 0;text-align: center}
.pn-wrapper-form .pn-checkbox{margin-bottom: 0;float: left}
.pn-wrapper-form .pn-checkbox + a{float: right; font-size: 16px; line-height: 16px; color: #3a6cd1; border-bottom: 1px solid #3a6cd1; margin-top: 6.5px}
.pn-wrapper-form .pn-checkbox input[type="checkbox"]{display: none}
.pn-wrapper-form .pn-checkbox span{display: flex; align-items: center; font-weight: normal; cursor: pointer; font-size: 16px;position: relative}
.pn-wrapper-form .pn-checkbox span:before{content: "";float: left;margin-right: 8px;width: 20px;height: 20px;border-radius: 3px;border: 1px solid #adadad}
.pn-wrapper-form .pn-checkbox span:after{content: ""; width: 13px; height: 7px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; left: 4px; position: absolute; top: 7px; z-index: 10; transform: rotate(-45deg)}
.pn-wrapper-form .pn-checkbox input[type="checkbox"]:checked + span:before{background-color: #017ffe;border-color: #017ffe}
.pn-wrapper-form .pn-login-different{list-style: none;padding-left: 0}
.pn-wrapper-form .pn-login-different li{width: 100%;margin-top: 20px}
.pn-wrapper-form .pn-login-different li a{display: block;border: 1px solid #aeaeae;border-radius: 5px;font-size: 14px;line-height: 19px;text-align: center;padding: 5px}
.pn-wrapper-form .pn-login-different li a:hover{border-color: #017ffe}
.pn-wrapper-form .pn-login-different li a span{display: flex;align-items: center;justify-content: center}
.pn-wrapper-form .pn-login-different li a span:before{content: "";float: left;width: 30px;height: 30px;background-image: url('../images/icon.png');background-repeat: no-repeat;margin-right: 10px}
.pn-wrapper-form .pn-login-different li a span.pn-login-google:before{background-position: -95px 0}
.pn-wrapper-form .pn-login-different li a span.pn-login-facebook:before{background-position: -101px -31px}
.pn-wrapper-form .pn-wrapper{text-align: center;margin-top: 25px;margin-bottom: 0}
.pn-wrapper-form .pn-wrapper a{display: inline-block;color: #ff0000}
.pn-wrapper-form .pn-wrapper-radio{padding: 18.5px 30px;border: 1px dashed #b2b2b2;border-radius: 5px;display: flex}
.pn-wrapper-form .pn-wrapper-radio label{font-weight: normal;cursor: pointer;width: 50%;padding-right: 10px}
.pn-wrapper-form .pn-wrapper-radio label input{margin: 4px 7px 0 0;float: left}
/**/
.pn-forgot-password{padding-left: 80px;padding-right: 80px;}
.pn-forgot-password .pn-button + div a{display: inline-block;vertical-align: top;border-bottom: 1px solid #24303d;}
.pn-forgot-password .pn-button + div a:hover{border-color: #017ffe;}
/**/
.pn-edit-profile .pn-content{display: flex;flex-wrap: wrap;color: #24303d}
.pn-edit-profile .pn-content .pn-left{width: 215px}
.pn-edit-profile .pn-content .pn-left > div,.pn-edit-profile .pn-content .pn-right > div{height: 100%;background: linear-gradient(to bottom, rgba(228,242,253,1) 0%,rgba(236,242,255,1) 100%);border-radius: 10px;overflow: hidden;padding: 20px}
.pn-edit-profile .pn-content .pn-left > div{text-align: center}
.pn-edit-profile .pn-content .pn-left strong{display: block;font-size: 17px;line-height: 22px}
.pn-edit-profile .pn-content .pn-left p{display: block}
.pn-edit-profile .pn-content .pn-left p span { display: flex; align-items: center;justify-content: center; margin: 0 auto;width: 145px; min-width: 145px;height: 145px; border-radius: 100px; overflow: hidden; background-color: #fff}
.pn-edit-profile .pn-content .pn-left p span img{width: 100%;height: 100%;object-fit: cover}
.pn-edit-profile .pn-content .pn-left > div label{margin-bottom: 20px;font-weight: normal}
.pn-edit-profile .pn-content .pn-left > div label input{display: none}
.pn-edit-profile .pn-content .pn-left > div label span{cursor: pointer; display: inline-block; vertical-align: top; border-bottom: 1px dashed #ddd}
.pn-edit-profile .pn-content .pn-left > div label span:after{font-family: "FontAwesome"; content: "\f044"; float: right; font-size: 14px; line-height: normal; margin: 4px 0 0 5px}
.pn-edit-profile .pn-content .pn-right{width: calc(100% - 215px);padding-left: 30px}
.pn-edit-profile .pn-content .pn-right .form-control{border: none}
.pn-edit-profile .pn-content .pn-right .pn-button{padding: 10px 50px}
@media only screen and (max-width: 1199px){
    .pn-content-body{background-size: contain}
}
@media only screen and (max-width: 991px){
    .pn-content-body{padding: 30px 0;background-size: cover}
    .pn-wrapper-form{width: 60%}
    .pn-wrapper-form > ul li{width: 50%}
}
@media only screen and (max-width: 767px){
    .pn-content-body{background-image: none !important}
    .pn-wrapper-form{width: 100%;margin-bottom: 60px}
    /**/
    .pn-edit-profile .pn-content{display: block}
    .pn-edit-profile .pn-content .pn-left{width: 100%;margin-bottom: 10px}
    .pn-edit-profile .pn-content .pn-left > div{padding: 20px}
    .pn-edit-profile .pn-content .pn-left p span{width: 100px;height: 100px;min-width: 100px}
    .pn-edit-profile .pn-content .pn-right{padding-left: 0;width: 100%}
    .pn-edit-profile .pn-content .pn-right .pn-button{width: 100%}
}
@media only screen and (max-width: 570px){
    .pn-wrapper-form .pn-tabs .form-group{padding: 0}
}
@media only screen and (max-width: 480px){
    .pn-wrapper-form{padding: 30px 15px}
    .pn-wrapper-form h2{font-size: 20px;line-height: 25px}
    .pn-wrapper-form > ul li a{font-size: 14px}
    .pn-wrapper-form .pn-checkbox span:after{left: 5px;top: 7px}
    .pn-wrapper-form .pn-wrapper-radio{padding: 15px}
}