.pn-main-banner{display: none;}
.pn-account{position: relative;}
.pn-account:before{content: "";position: absolute;background-color: var(--primary-color);width: 50%;height: 100%;left: 0;top: 0;background-image: url('../images/background-login.png');background-size: cover;background-repeat: no-repeat;background-position: left top;}
.pn-account .row{display: flex;flex-wrap: wrap;}
.pn-account .row [class*='col-']:first-child{display: flex;align-items: center;}
.pn-account .row [class*='col-']:nth-child(2){background-color: #fff;border-radius: 40px 0 0 40px;}
.pn-wrapper-form{padding: 70px 70px 30px 70px;max-width: 760px;margin-left: auto;text-align: center;}
.pn-wrapper-form > ul{list-style: none; padding-left: 0; margin-bottom: 30px; display: inline-block; background-color: var(--primary-color); border-radius: 100px;}
.pn-wrapper-form > ul li{margin: 10px;float: left;}
.pn-wrapper-form > ul li a{position: relative;color: var(--text-color);font-weight: 600}
.pn-wrapper-form > ul li a:after{content: "";position: absolute;top: -1px;right: -1px;bottom: -1px;left: -1px;background-color: #fff;border-radius: 100px}
.pn-wrapper-form > ul li a span{position: relative;z-index: 1;min-width: 210px;display: block;text-align: center;line-height: 21px;padding: 10px;border-radius: 100px;background-color: #f08d91}
.pn-wrapper-form > ul li a{color: #fff;display: block;position: relative;}
.pn-wrapper-form > ul li.active a{color: var(--text-color);}
.pn-wrapper-form > ul li.active a span{background-color: #fff}
.pn-wrapper-form > ul li a:after{background: linear-gradient(45deg, rgba(224,27,34,1) 0%,rgba(255,255,255,1) 66%)}
.pn-wrapper-form > ul li.active a:after{background: #fff;}
.pn-wrapper-form .pn-button{width: 100%;font-weight: normal;height: 45px;border-radius: 25px;}
.pn-wrapper-form .pn-title{font-size: 32px;line-height: 42px;margin-bottom: 10px;text-transform: initial;color: var(--primary-color);}
.pn-wrapper-form .pn-title + p{text-align: center;}
.pn-wrapper-form .pn-tab:not(.active) { display: none; }
.pn-wrapper-form .pn-tab .pn-wrapper{margin: 260px 0 0 0;}
.pn-wrapper-form .pn-tab .pn-wrapper a{display: inline-block;color: #3063f2;}
.pn-wrapper-form .form-group label{margin: 0 0 10px 20px;text-align: left;display: block;}
.pn-wrapper-form .pn-wrapper-input { height: 45px; border: 1px solid #adadad; border-radius: 25px; background-color: #fff; overflow: hidden; padding: 0 45px; position: relative; }
.pn-wrapper-form .pn-wrapper-input:before { font-family: "FontAwesome"; position: absolute; color: #7f7f7f; width: 35px; text-align: center; left: 10px; display: flex; align-items: center; justify-content: center; height: 100%; }
.pn-wrapper-form .pn-wrapper-input input { width: 100%; border: none; box-shadow: none; outline: none; background-color: transparent; height: 100%;padding: 0;}
.pn-wrapper-form .pn-wrapper-name:before { content: "\f007"; font-size: 20px; }
.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-password .fa { position: absolute; right: 10px; width: 35px; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 1; top: 0; cursor: pointer; }
.pn-wrapper-form .pn-checkbox{margin-bottom: 0;float: left;}
.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;position: relative}
.pn-wrapper-form .pn-checkbox span:before {content: "";float: left;margin-right: 8px;width: 30px;height: 30px;border-radius: 3px;border: 1px solid #adadad}
.pn-wrapper-form .pn-checkbox span:after {content: ""; width: 15px; height: 8px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; left: 7px; position: absolute; top: 9px; z-index: 10; transform: rotate(-45deg);display: none;}
.pn-wrapper-form .pn-checkbox input[type="checkbox"]:checked + span:before {background-color: #3063f2;border-color: #3063f2;}
.pn-wrapper-form .pn-checkbox input[type="checkbox"]:checked + span:after{display: block;}
.pn-wrapper-form .pn-checkbox + a {float: right;line-height: 16px;color: #3063f2;border-bottom: 1px solid #3063f2;margin-top: 6.5px}
.pn-wrapper-form .pn-login-different{list-style: none;padding-left: 0;margin: 25px 0 0 0;display: flex;justify-content: center;align-items: center;}
.pn-wrapper-form .pn-login-different li{margin: 0 10px;}
.pn-wrapper-form .pn-login-different li a{width: 30px;height: 30px;background-image: url('../images/icon.png');background-repeat: no-repeat;text-indent: -9999px;display: block;}
.pn-wrapper-form .pn-login-different li.pn-login-facebook a{background-position: -22px -170px}
.pn-wrapper-form .pn-login-different li.pn-login-google a{background-position: -254px 0}

@media only screen and (max-width: 1199px){
    .pn-wrapper-form .pn-tab .pn-wrapper{margin-top: 100px;}
}
@media only screen and (min-width: 992px){
    .pn-account .row:before,.pn-account .row:after{display: none;}
}
@media only screen and (max-width: 991px){
    .pn-content-body{background-color: var(--primary-color);}
    .pn-account .row{display: block;}
    .pn-wrapper-form .pn-tab .pn-wrapper{margin-top: 30px;}
    .pn-account:before{width: 100%;}
    .pn-account .row [class*='col-']:nth-child(2){background-color: transparent;}
    .pn-wrapper-form{background-color: rgba(255,255,255,.9); padding: 30px; margin: 50px auto; border-radius: 40px; width: 70%; max-width: 100%;}
    .pn-wrapper-form > ul li a span{min-width: 150px}
}
@media only screen and (max-width: 767px){
    .pn-wrapper-form .pn-title{font-size: 25px;line-height: 35px;}
    .pn-wrapper-form{width: 100%;}
}
@media only screen and (max-width: 480px){
    .pn-wrapper-form > ul li a span{min-width: inherit;padding: 5px 20px;font-size: 14px;}
    .pn-wrapper-form .pn-wrapper-input{height: 40px;}
    .pn-wrapper-form .pn-wrapper-input:before{font-size: 16px !important}
}
@media only screen and (max-width: 370px){
    .pn-wrapper-form{padding: 30px 15px;border-radius: 20px;}
    .pn-wrapper-form > ul{display: block;background-color: transparent;border-radius: 0}
    .pn-wrapper-form > ul li{width: 100%;margin: 0 0 10px 0;}
    .pn-wrapper-form > ul li a span{border: 1px solid var(--primary-color);color: var(--primary-color);background-color: #fff;}
    .pn-wrapper-form > ul li a:after{display: none;}
    .pn-wrapper-form > ul li.active a span{background-color: var(--primary-color);color: #fff;}
    .pn-wrapper-form .pn-title{font-size: 22px;line-height: 32px;}
}