    /*
     ======================================
    |           Common Classes             |
     ======================================
    */

    .pm-difl {display: inline-block; float: left}
    .pm-dbfl {display: block; float: left; width: 100%;}
    .pm-difr {display: inline-block; float: right;}
    .pm-bg {background-color: #fafafa;}
    .pm-bg-lt {background-color: #FFF}
    .pm-bg-dk {
        background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0));
        color: #fff;
    }
    .pm-bg-dk {}
    .pm-border {
        border-width: 1px;
        border-style: solid;
        border-color: #e1e1e1;
    }

    .pm-border-bt {
        border-width: 0 0 1px 0;
        border-style: solid;
        border-color: #e1e1e1;
    }

    .pm-radius5 {
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        overflow: hidden;
    }

    .pm-pad10 {padding: 10px;}
    .pm-clip {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
    .pm33 {width: 31%; margin: 10px 1%;}

    /*
     ======================================
    |           Common Elements            |
     ======================================
    */

    * {box-sizing: border-box;}

    .pmagic {
        display: block;
        float: left;
        width: 100%;
        font-size: 14px;
        text-rendering: optimizeLegibility;
        animation: pm-fadein 0.5s linear 1;
        -webkit-animation: pm-fadein 0.5s linear 1;
        -moz-animation: pm-fadein 0.5s linear 1;
        -o-animation: pm-fadein 0.5s linear 1;
        margin-bottom: 20px;
    }

    .pmagic a {
        text-decoration: none;
        border: 0px !important;
        cursor: pointer;
    }

    .pmagic img {box-shadow: none !important; padding: 0px !important; line-height: 1 !important;}
    .entry-content .pmagic img {margin: 0px; padding: 0px; box-shadow: none !important;}
    .pmagic div:active,
    .pmagic button:active,
    .pmagic input:active,
    .pmagic li:active,
    .pmagic a:focus {outline: 0px !important;}

    /*
     ======================================
    |               Animations             |
     ======================================
    */
    @keyframes pm-fadein {
        from {opacity: 0; transform: translateY(10px);}
        to {opacity: 100; transform: translateY(0px);}
    }

    @-webkit-keyframes pm-fadein {
        from {opacity: 0; transform: translateY(10px);}
        to {opacity: 100; transform: translateY(0px);}
    }

    @-moz-keyframes pm-fadein {
        from {opacity: 0; transform: translateY(10px);}
        to {opacity: 100; transform: translateY(0px);}
    }

    @-o-keyframes pm-fadein {
        from {opacity: 0; transform: translateY(10px);}
        to {opacity: 100; transform: translateY(0px);}
    }

    @keyframes pm-popup-in {
        0% {transform: scale(0,0); opacity: 0;}
        100% {transform: scale(1,1); opacity: 1;}
    }

    @-webkit-keyframes pm-popup-in {
        0% {transform: scale(0,0); opacity: 0;}
        100% {transform: scale(1,1); opacity: 1;}
    }

    @-moz-keyframes pm-popup-in {
        0% {transform: scale(0,0); opacity: 0;}
        100% {transform: scale(1,1); opacity: 1;}
    }

    @-o-keyframes pm-popup-in {
        0% {transform: scale(0,0); opacity: 0;}
        100% {transform: scale(1,1); opacity: 1;}
    }

    @keyframes pm-popup-out {
        0% {transform: scale(1.1, 1.1);}
        20% {transform: scale(1.1, 1.1);}
        100% {transform: scale(1, 1);}
    }

    @-webkit-keyframes pm-popup-out {
        0% {transform: scale(1.1, 1.1);}
        20% {transform: scale(1.1, 1.1);}
        100% {transform: scale(1, 1);}
    }

    @-moz-keyframes pm-popup-out {
        0% {transform: scale(1.1, 1.1);}
        20% {transform: scale(1.1, 1.1);}
        100% {transform: scale(1, 1);}
    }

    @-o-keyframes pm-popup-out {
        0% {transform: scale(1.1, 1.1);}
        20% {transform: scale(1.1, 1.1);}
        100% {transform: scale(1, 1);}
    }

    /*
     ======================================
    |           All Groups View            |
     ======================================
    */

    .pmagic .pm-group-container .pm-group .pm-group-info {color: #646464;}
    .pmagic .pm-group-container .pm-group .pm-group-logo {
        overflow: hidden; 
        position: relative; 
        height: 200px;
    }

    .pmagic .pm-group-container .pm-group .pm-group-logo,
    .pm-group-logo-img {
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        justify-content: center;
    }

    .pmagic .pm-group-container .pm-group .pm-group-desc {word-break: normal; line-height: 1.5em; height: 8em;}
    .pmagic .pm-group-container .pm-group .pm-group-button {margin-top: 10px;}
    .pmagic .pm-group-bg {
        position: absolute;
        display: block;
        width: 200%;
        height: auto;
        top: -50%;
        left: -50%;
        z-index: 1;
    }

    .no-cssfilters .pmagic .pm-group-bg { opacity: 0.2;}
    .cssfilters .pmagic .pm-group-bg {
        -webkit-filter: blur(10px);
        filter: blur(10px);
        opacity: 0.75;
    }

    .pmagic .pm-group-container .pm-top-heading {
        text-align: center;
        margin-bottom: 20px;
        border-width: 0 0 1px 0;
        padding-bottom: 10px;
    }


    .pmagic .pm-group-container .pm-group .pm-group-logo .pm-group-bg img {
        height: 100%;
        width: 100%;
        -webkit-animation: none;
        -moz-animation: none;
        animation: none;
    }

    .pmagic .pm-group-container .pm-group .pm-group-logo .pm-group-logo-img img {
        -webkit-animation: pm-fadein 1s linear 1;
        -moz-animation: pm-fadein 1s linear 1;
        -o-animation: pm-fadein 1s linear 1;
        animation: pm-fadein 1s linear 1;
        margin: auto !important; 
        padding: 0px !important;
        max-height: 180px;
        width: auto;
        transition: 1s;
        position: relative;
        z-index: 10;
    }

    .pmagic .pm-group-container .pm-group .pm-group-logo .pm-group-logo-img img:hover {
        -webkit-transform: scale(1.2,1.2);
        -moz-transform: scale(1.2,1.2);
        -o-transform: scale(1.2,1.2);
        -ms-transform: scale(1.2,1.2);
        transform: scale(1.2,1.2);
    }


    .pmagic .pm-group-container .pm-group.pm50 {width: 48%; margin: 10px 1% 0 1%;}
    .pmagic .pm-group-container .pm-group.pm100 {width: 80%; margin: 10px 10% 0 10%;}
    .pmagic .pm-group-container .pm-group {text-align: center;}
    .pmagic .pm-group-container .pm-group .pm-group-heading a {
        text-decoration: none; 
        box-shadow: none; 
        font-size: 120%;
    }

    .pmagic .pm-group-container .pm-group .pm_group_price {color: orange;}
    .pmagic .pm-group-container .pm-group .pm_free_group {color: orange; text-transform: uppercase;}
    .pmagic .pm-group-signup {float: left; width: 100%; text-align: center;}
    .pmagic .pm-group-signup .pm_button{ float:none;}

    /*
     ======================================
    |             Group View               |
     ======================================
    */

    /*
    Group Card
    */
    .pmagic .pm-group-card-box {padding: 0 1%;}
    .pmagic .pm-group-card {margin: 0% 0% 10px 0%; overflow: hidden}
    .pmagic .pm-group-title {text-align: center; font-size: 120%;}
    .pmagic .pm-group-image {width: 30%; border-width: 0 1px 0 0; max-width: 200px;}
    .pmagic .pm-group-image img {
        margin: auto; 
        display: block; 
        padding: 20px !important; 
        width: 100%; 
        height: auto;
    }

    .pmagic .pm-group-description {width: 70%; border-width: 0 0 0 1px; margin-left: -1px;}
    .pmagic .pm-group-description .pm-card-label {width: 20%;}
    .pmagic .pm-group-description .pm-card-value {width: 78%; margin-left: 2%; color: #969696;}
    .pmagic .pm-group-description .pm-group-leader-small {height: 1.5em;}
    .pmagic .pm-group-description .pm-group-leader-small img {
        max-width: 16px; 
        height: auto; 
        vertical-align: middle;
    }

    /*
    User Cards
    */
    .pmagic .pm-user-card {overflow: hidden; margin-top: 10px; position: relative;}
    .pmagic .pm-user-card .pm-user-card-cover {
        height: 150px; 
        overflow: hidden; 
        position: absolute;
    }

    .pmagic .pm-user-card .pm-user-card-cover img {
        -webkit-animation: pm-popup-out 4s ease-out 1;
        -moz-animation: pm-popup-out 4s ease-out 1;
        -o-animation: pm-popup-out 4s ease-out 1;
        animation: pm-popup-out 4s ease-out 1;
        width: 100%;
        height: auto;
    }

    .pmagic .pm-user-image {margin-top: 75px;}
    .rgba img.user-profile-image {background-color: rgba(255,255,255, 0.8);}
    .no-rgba img.user-profile-image {background-color: rgb(255,255,255);}
    .pmagic .pm-user-image img.user-profile-image {
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        display: block;
        position: relative;
        margin: auto !important;
        margin: auto calc(50% - 75px) !important;
        padding: 10px !important; 
            height: 150px;
        width: 150px;
    }

    .pmagic .pm-user-card .pm-user-description-row:last-child {margin-bottom: 10px;}
    .pmagic .pm-user-card .pm-card-label img,
    .pmagic .pm-user-card .pm-card-value img {
        display: inline-block !important;
        vertical-align: middle; 
        height: 1em; 
        width: auto;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pmagic .pm-user-card .pm-user-card-title {text-align: center;}

        /*
        For 1 Card per row
        */
    .pmagic .pm-user-card.pm100 {width: 80%; margin: 10px 10% 0 10%;}
    .pmagic .pm-user-card.pm100 .pm-card-label {width: 100%; text-transform: uppercase; font-size: 86%;}
    .pmagic .pm-user-card.pm100 .pm-card-value {width: 100%; color: #969696;}
    .pmagic .pm-user-card.pm100 .pm-user-description-row {
        border-width: 0;
        padding: 10px 20px 0 20px;
        text-align: center;
    }

    .pmagic .pm-user-card.pm100 .pm-user-description-row::after {content: "____"; color: #e1e1e1;}
    .pmagic .pm-user-card.pm100 .pm-card-label,
    .pmagic .pm-user-card.pm100 .pm-card-value {
        display: block;
        line-height: 1.5em;
        max-height: 7.5em;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        white-space: normal !important;
    }

        /*
        For 2 Cards per row
        */
    .pmagic .pm-user-card.pm50 {width: 48%; margin: 10px 1% 0 1%;}
    .pmagic .pm-user-card.pm50 .pm-card-label {width: 100%; text-transform: uppercase; font-size: 86%;}
    .pmagic .pm-user-card.pm50 .pm-card-value {width: 100%; color: #969696;}
    .pmagic .pm-user-card.pm50 .pm-user-description-row::after {content: "____"; color: #e1e1e1;}
    .pmagic .pm-user-card.pm50 .pm-user-description-row {
        border-width: 0;
        padding: 10px 20px 0 20px;
        text-align: center;
    }

        /*
        For 3 Cards per row
        */
    .pmagic .pm-user-card.pm33 .pm-card-label {width: 48%;}
    .pmagic .pm-user-card.pm33 .pm-card-value {margin-left: 2%; width: 50%; color: #969696;}
    .pmagic .pm-user-card.pm33 .pm-user-description-row { border-width: 0px; padding: 10px 10px 0 20px;}

    .pmagic .pm-user-card.pm33 .pm-card-value,
    .pmagic .pm-user-card.pm33 .pm-card-label {
        white-space: nowrap; 
        text-overflow: ellipsis; 
        overflow: hidden;
    }

    .pmagic .pm-user-card.pm100 .pm-card-value,
    .pmagic .pm-user-card.pm100 .pm-card-label,
    .pmagic .pm-user-card.pm50 .pm-card-value,
    .pmagic .pm-user-card.pm50 .pm-card-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #pm-leader-badge {background-color: black;}
    .pmagic .pm-user-description { height: 100%;}

    /*Works for both group page and individual profile page*/
    .pmagic .pm-field-multiple-value {margin: 0 5px 0 0;}
    .pmagic .pm-field-multiple-value::after {content: ",";}
    .pmagic .pm-field-multiple-value:last-child::after {content: ".";}

    /*
     ======================================
    |          Edit Group View             |
     ======================================
    */

    .pm-group-view .pm-edit-heading {margin-bottom: 20px;}
    .pm-group-view .pm-group-change-icon{ text-align: center; margin: 20px;}
    .pm-group-view .pm-group-change-icon input{ display:inline-block;}
    .pm-group-view .pm-group-icon-action {margin: 20px 0px 20px 0px;}
    .pm-group-edit-form {text-align: center;}
    .pmagic .pmagic-form .pm-group-edit-form .pmrow {text-align: left;}


    /*
     ======================================
    |             Login Box                |
     ======================================
    */

    .pm-login-box {width: 80%; max-width: 600px; margin: 20px 10%;}
    .pm-login-box-error {
        text-align: center; 
        background-color: lightcoral; 
        color: white; 
        word-break: normal;
        font-size: 86%;
    }

    .pmagic .pm-login-box input[type=text], 
    .pmagic .pm-login-box input[type=password] {
        margin: 20px 5% 0 5%; 
        width: 90% !important; 
        max-width: 90% !important;
        padding: 0.5em !important;
        min-height: 3em;
        font-size: 1em;
    }
    .pmagic .pm-login-box input[type=password]{ margin-bottom: 20px;}
    .pmagic .pm-login-box-bottom-container {
        border-width: 1px 0 0 0; 
        padding: 20px; 
        text-align: center;
    }

    .pmagic .pm-login-box input[type=submit] {
        text-align: center;
        float: none;
        width: auto;
        margin: auto;
        font-size: 1em;
    }

    .pmagic .pm-login-box .pm-login-header {text-align:center; padding: 10px;}
    .pm-center-button {width: 50%;text-align: center;}

    /*
     ======================================
    |             Profile View             |
     ======================================
    */

    .pm-group-view {max-width: 1200px;}
    .pm-group-view .pm-header-section {position: relative; height: 430px;}
    .pm-group-view .pm-cover-image {height: 300px; overflow: hidden;}
    .pm-group-view .pm-cover-image img {
        position: absolute; 
        clip: rect(0px,1200px,300px,0px) !important; 
        height: 300px;
        object-fit: cover;
        border-radius: 0px !important;
    }

    .pm-group-view .pm-profile-title-header{height:130px; top: 0px;}
    .pm-group-view .pm-profile-image {
        position: absolute; 
        width: auto; 
        left: 10px; 
        top: 240px; 
        line-height: 1 !important;
        border-radius: 100%;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        max-width: 180px;
    }

    .rgba .pm-group-view .pm-profile-image {background-color: rgba(255,255,255,0.5); overflow: hidden;}
    .no-rgba .pm-group-view .pm-profile-image {background-color: #FFF;}

    .pm-group-view .pm-profile-image img {
        margin: 0px !important;
        border-radius: 100%;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
    }

    .pmagic .pm-profile-title-header .pm-profile-image ul {bottom: 0px; line-height: 180px;}
    .pmagic .pm-cover-image ul {top: 0px; height: 300px;}
    .pmagic .pm-profile-title-header .pm-profile-image ul,
    .pmagic .pm-cover-image ul {
        position: absolute;
        right: 0px;
            display: none;
        width: 100%;
        font-size: 1.2em;
        margin: 0px !important;
        padding: 0px !important;
    }

    .pmagic .pm-profile-title-header .pm-profile-image ul li,
    .pmagic .pm-cover-image ul li {
        display: block;
        padding: 5px;
        text-align: center;
        margin: 0px;
        cursor: pointer;
    }

    .pm-group-view .pm-profile-title {margin: 1em 0px 0px 180px;}
    .csscalc .pm-group-view .pm-profile-title {width: calc(100% - 300px);}
    .no-csscalc .pm-group-view .pm-profile-title {width: 60%;}
    .pm-group-view .pm-user-name {font-size: 1.5em; height: 1.5em;}
    .pm-group-view .pm-user-group-name {font-size: 86%; color: #646464; text-transform: uppercase;}
    .pm-group-view .pm-group-icon {max-width: 100px; height: 100px;}
    .pm-group-view .pm-group-icon img {max-width: 100%; height: auto;}
    .pm-group-view .pm-section {margin: 20px 0px; min-height: 500px;}
    .pm-section .pm-edit-user {width: 50%;}
    .pmagic .pm_button {text-align: center;}
    .pm-group-view .pm-section .pm-section-nav-vertical {
        overflow: hidden;
        max-width: 200px;
        width: 30%;
    }

    .pm-group-view .pm-section .pm-section-nav-vertical ul {margin: 0px !important; padding: 0px !important;}
    .pm-group-view .pm-section .pm-section-nav-vertical ul li {
        list-style: none; 
        margin: 0px !important; 
        transition: 0.2s; 
        cursor: pointer;
        padding: 1em;
    }

    .pm-group-view .pm-section .pm-section-nav-vertical ul li a {text-decoration: none;}
    .pm-group-view .pm-section .pm-section-nav-vertical ul li:last-child {border-bottom: 0px;}
    .pm-group-view .pm-section .pm-section-nav-vertical ul li.ui-state-active, 
    .pm-group-view .pm-section .pm-section-nav-vertical ul li.ui-state-hover {
        background-color: #fff; 
        margin: 0px !important;
    }

    .pm-group-view .pm-section .pm-section-content {width: 66%; margin: 0px 0px 0px 4%;}
    .pm-group-view .pm-section .pm-section-content .pm-user-description-row {
        border-width: 0 0 1px 0;
        padding: 1em;
    }

    /*For Narrow Content Areas*/
    .pm-group-view .pm-section.pm100 .pm-section-content .pm-user-description-row .pm-card-label,
    .pm-group-view .pm-section.pm100 .pm-section-content .pm-user-description-row .pm-card-value {
        width: 100%;
        margin: 0;
    }

    .pm-group-view .pm-section.pm100 .pm-section-content .pm-user-description-row .pm-card-label {
        font-weight: bold;
        text-transform: none;
    }

    .pm-group-view .pm-section.pm100 .pm-section-content .pm-user-description-row .pm-card-value {
        padding-left: 0px;
    } 

    .pm-group-view .pm-section .pm-section-content .pm-user-description-row .pm-card-label {
        text-transform: uppercase; 
        font-size: 86%;
        width: 30%;
        padding-left: 10px;
        position: relative;
    }

    .pm-group-view .pm-section .pm-section-content .pm-user-description-row .pm-card-value {
        width: 68%;
        margin-left: 2%;
        color: #969696;
    }

    .pm-group-view .pm-user-description-row .pm-card-label img {
        vertical-align: middle;
        margin: 0px !important;
        width: 16px;
        height: auto;
        position: absolute;
        right: calc(100% - 2px);
    }
    .pm-edit-group {display: inline; float: right;}


    /*
     ======================================
    |          Registration Form           |
     ======================================
    */

    /*
    Single Page
    */
    .pmagic .pm-full-width-container {padding: 20px; text-align: center; font-size: 1.5em;}
    .pmagic .pm-full-width-container input {text-align: center; font-size: 1em;}
    .pmagic legend {
        text-align: center;  
        padding: 1em;
        font-size: 1.2em;
        font-weight: bold;
        width: auto !important;
        border: 0px !important;
    }

    .pmagic .pmagic-form .pmrow {margin-bottom: 20px;}
    .pmagic .pmagic-form .pmrow .errortext {
        color: tomato; 
        display:block; 
        width:100%; 
        float:left;
        font-size: 86%;
    }

    .pmagic .pmrow, .pmagic .pm-submit-container {
        display: block;
        width: 100%;
        float: left;
    }

    .pmagic .pm-form-field-icon, .pmagic .pm-field-lable, .pmagic .pm-field-input, .pmagic .pm-radio-option {
        display: inline-block;
        float: left;
        word-wrap: normal;
    }

    .pmagic .pm-form-field-icon {width: 5%; min-height: 1px;}
    .pmagic .pm-field-lable {width: 23%; margin-left: 1%; margin-right: 1%;}
    .pmagic .pm-field-input {width: 60%;}
    .pmagic .pm-form-field-icon img {width: 16px; height: auto; margin: 2px; display: inline-block; vertical-align: middle;}
    .pmagic .pmrow input, .pmagic .pmrow textarea, .pmagic .pmrow select {width: 100%; border: 2px solid #e1e1e1;}
    .pmagic textarea {resize: vertical;}
    .pmagic .pm-radio-option {margin-right: 10px;}
    .pmagic .pm-radio-option input[type=radio], .pmagic .pm-radio-option input[type=checkbox] {width:auto; margin-right: 5px;}
    .pmagic .pmrow .pm_repeat { margin-bottom: 10px;}
    .pmagic .pmrow .pm_repeat .add { margin-right: 10px;}
    /*
    Multi Page Form
    */

    .pmagic .multipage_nav {}
    .pmagic .multipage_nav a {display:block;}
    .pmagic .multipage_nav .multipage_next {display: inline-block; float:right;}
    .pmagic .multipage_nav .multipage_back {display:inline-block; float: left;}
    .pmagic .multipage_nav .submit {text-transform: uppercase;}
    .pmagic .multipage_nav .multipage_state { 
        display: block; 
        text-align:center; 
        width:100%; 
        margin-left:auto;
        margin-right:auto;
    }

    .pmagic fieldset { 
        border:2px solid #e1e1e1; 
        padding:20px; 
        margin: 20px 0px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
    }

    div.clearer{
        display: block;
        visibility: hidden;
        clear: both;
        height:0;
        border-width:0;
        margin:0;
        padding:0;
    }

    /*
    Adjustments for smaller screens
    */

    @media screen and (max-width: 700px) {
        .pmagic .pm-field-input {display: block; width: 100%;}
        .pmagic .pm-field-lable {width: 60%; margin-left: 5%;}
        .pmagic .pmrow {margin-bottom: 10px; font-size: 120%;}
        .pmagic .pm-radio-option {display: block; width: 100%; text-align: left;}
        .pmagic .pm-form-field-icon {width: 24px;}
        .pmagic .pm-full-width-container input {width: 80%;}
        }

    /*
     ======================================
    |             Paginations              |
     ======================================
    */

    .pmagic ul.page-numbers {
        display: inline-block;
        padding: 10px;
        margin: 0;
        float: right;
    }

    .pmagic ul.page-numbers li {
        display: inline;

    }

    .pmagic ul.page-numbers li a {
        float: left;
        padding: 8px 16px;
        text-decoration: none;
        margin-left: 5px;
        transition: 0.3s;
    }

    .pmagic ul.page-numbers li span.dots {
        color: black;
        float: left;
        padding: 8px 16px;
        text-decoration: none;
        background-color: white;
        margin-left: 5px;
        transition: 0.3s;
    }


    ul.page-numbers li span.current {
        float: left;
        padding: 8px 16px;
        text-decoration: none;
        margin-left: 5px;
        transition: 0.3s;

    }

    /* comman css added by vincent andrew */

    .pm_clear{width:100%; float:left;} 


    /*
     ======================================
    |           Edit Views                 |
     ======================================
    */

    /* 
    Edit profile page 
    */

    .pmagic .pm-accordian-title {cursor: pointer;}
    .pmagic .pm-accordian-content{height: auto !important; max-width: 750px;}
    .pmagic .pm-field-input .pm_repeat:first-child .removebutton{display:none;}

    /* upload image popup css */

    .pm-popup-mask {
        display: none;
        background-color: black;
        opacity: 0.25;
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 999999;
    }


    #pm-change-image-dialog,
    #pm-change-cover-image-dialog,
    #pm-change-password-dialog,
    #pm-show-profile-image-dialog,#pm-show-cover-image-dialog{
        display: none;
        z-index: 9999999;
    }

    .pm-popup-container{
        display: block;
            float:left; 
        width: 600px;
        background-color: #FFF;
        position: fixed;
        top: 10%;
        overflow: hidden;
        z-index: 9999999;
        box-shadow: 0 0 20px rgb(150,150,150);
        box-shadow: 0 0 20px rgba(0,0,0,0.2);
        left: 30%;
        left: calc(50% - 300px);
        overflow-y: auto;
        max-height: 90%;
    }
    #pm-show-profile-image-dialog .pm-popup-container,
    #pm-show-cover-image-dialog .pm-popup-container{
        width: auto;
        max-width: 800px;
    }

    .pm-popup-container .pm-popup-title {text-align: center; font-size: 1.2em;}
    .pm-popup-close {
        height: 24px; 
        width: 24px; 
        opacity: 0.5; 
        cursor: pointer;
        position: relative;
        top: 0px;
    }

    .pm-popup-close img {}
    .pm-popup-container a[type=button]:hover {cursor: pointer;}
    .pm-popup-container .pm-popup-image {text-align: center;}
    .pm-popup-container .pm-popup-info {font-size: 86%; color: tomato; text-align: center;}
    .pm-popup-container .pm-popup-error {
        float: left;
        width: 100%;
        color: tomato;
        padding: 1em;
        font-size: 1em; 
        display:none;
    }

    .pm-popup-container img#avatar-edit-img {margin: auto;}
    .pm-popup-container input[type=file] {text-align: center; margin: 10px auto;}

    .pm-popup-container .jcrop-tracker {
        background-color: rgba(255,255,255,0.2);
    }

    .pm-popup-container .modal-footer {
        display: none;
        text-align: center;
    }

    .pm-popup-container .pm-loader,
    #pm_result_pane .pm-loader{
        width: 40px;
        height: 40px;
        border: 5px solid #e1e1e1;
        border-radius: 100%;
        animation: pm_rotate 1s linear infinite;
        margin-left: 40%;
        margin-left: calc(50% - 20px);
    }
    #pm_result_pane .pm-loader { float: left;}
    @keyframes pm_rotate {
        from {transform: rotate(0);}
        to {transform: rotate(360deg);}
    }


    /*
    Edit Group Page
    */

    span#pm-change-cover-image {cursor: pointer;}
    .pm-popup-image input[type=submit] {margin: 10px 0 0 0;}

    /*
     ======================================
    |            Search Users              |
     ======================================
    */

    .pmagic .pm-users-search-page .pm-user {
        max-width: 100px;
        width: 100%;
        margin: 10px;
        overflow: hidden;
    }
    .pmagic .pm-search-box { position: relative;}
    .pmagic .pm-users-search-page .pm-search-box .pm-search-input {width: 50%;}
    .pmagic .pm-users-search-page .pm-search-box .pm-search-submit {margin-left: 10px;}
    .pm-search-box input[type=text].pm-search-input,
    .pm-search-box input[type=submit].pm-search-submit {
        font-size: 1em;
        margin-top: 0px !important;
    }

    .pmagic .pm-users-search-page .pm-user-name {text-align: center; padding: 5px; font-size: 86%;}

    /*------------Adjustments for smaller screens-----------------*/

    @media screen and (max-width: 700px) {
        .pmagic .pm-field-input {display: block; width: 100%;}
        .pmagic .pm-field-lable {width: 60%; margin-left: 5%;}
        .pmagic .pm-form-row {margin-bottom: 10px; font-size: 120%;}
        .pmagic .pm-radio-input {display: block; width: 100%; text-align: left;}
        .pmagic .pm-form-field-icon {width: 24px;}
        .pmagic .pm-full-width-container input {width: 80%;}

    }
    .pm-section .pm_full_width_profile{width: 95% !important;}
    .pm_morectnt span {
    display: none;
    }
    .pm_showmoretxt {
        text-decoration: none;
    }
    .pmagic .pm-field-multiple-value { float:none;}
    .jcrop-holder div div img{ visibility: hidden !important;}
    
    
/*Advance Search*/
.pmagic .pm-filters {  list-style: none; margin-left: 0; padding-left: 0px; float: left; margin-top: 10px;}
.pmagic .pm-filters .pm-filter-item {     display: inline-block;
    margin-right: 10px;
    padding: 5px 10px;
    margin-bottom: 10px;
    border-width: 1px;
    border-color: rgba(150,150,150,0.5);
    border-style: solid;
    border-radius: 5px;}
.pmagic .pm-filters input[type=checkbox] { margin-right: 5px;}
.pmagic .pm-advances-search-text { text-indent: 20px;}
.pmagic .pm-adv-search-button .pm-search-submit { margin-right: 10px;}
.pmagic .pm-adv-search-text{ text-indent: 20px;}
.pmagic .pm-search-box .fa-search { 
    position: absolute;
    top: 22px;
    left: 20px;
    font-size: 15px;
}
.pmagic .pm-user-search #pm_result_pane .pm-user .pm-user-profile {
    min-height: 98px;
    object-fit: cover;
}


/*Custom field spacer*/
.pmagic .pmagic-form .pmrow.pm-row-spacer, .pmagic .pmagic-form .pmrow.pm-row-divider {
    height: 0px;
    padding: 20px 0px;
}
