/*--------------------------------------------------------------
This is the BuddyBoss Portfolio stylesheet.

----------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 -  ###
  1.1 - ###
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 - ###
--------------------------------------------------------------*/
.bpcp-pro-tab-title-filter ul {
    list-style: none;
    padding-left: 0;
}
#buddypress .portfolio-list,
.bb-display-projects {
    margin: 0 -15px;
}
#buddypress .portfolio-list,
.bb-display-projects .bb-project-items {
    display: block;     /* fallback */
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0;
    overflow: hidden;
    clear: both;
}
#buddypress .portfolio-list > li.bpcp-grid-item,
.bb-display-projects .bb-project-item {
    float: left;
    display: block;
    width: 25%;
    padding: 15px;
    box-sizing: border-box;
    margin: 0;
    max-width: 270px;
}
#buddypress .portfolio-list > li.bpcp-grid-item img,
.bb-display-projects .bb-project-item img {
    width: 100%;
}
@media screen and (max-width: 1000px){
    #buddypress .portfolio-list > li.bpcp-grid-item,
    .bb-display-projects .bb-project-item {
        width: 33.33333%;
    }
}
@media screen and (max-width: 540px){
    #buddypress .portfolio-list > li.bpcp-grid-item,
    .bb-display-projects .bb-project-item {
        width: 50%;
    }
}
@media screen and (max-width: 340px){
    #buddypress .portfolio-list > li.bpcp-grid-item,
    .bb-display-projects .bb-project-item {
        width: 100%;
    }

    #buddypress .portfolio-list > li.bpcp-grid-item,
    .bb-display-projects .bb-project-item {
        max-width: inherit;
    }
}
#buddypress .portfolio-list > li.bpcp-grid-item h4,
.bb-display-projects .bb-project-item h4 {
    margin: 0;
}
.add_project_top_nav{
    margin-bottom: 20px;
}

#buddypress .standard-form .bpcp-li-no-margin li:first-child{
    margin-left: 0px;
}
#buddypress .standard-form .bpcp-li-left li{
    float: left;
    list-style: none;
    margin-right: 25px;
}
#buddypress .standard-form.add-project-cover .bpcp-li-left li{
    margin-left: 0;
    margin-right: 0;
}
#buddypress .standard-form ul.bpcp-li-left{
    overflow: hidden;
    padding: 0;
}
#buddypress .standard-form .bpcp-buttons {
    margin-top: 30px;
}

#buddypress .standard-form .bpcp-distance-bottom{
    margin-bottom: 30px;
    overflow: hidden;
}

#buddypress .standard-form .bpcp-distance {
    margin-top: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}

.add-wip-details input[type="text"],
.add-project-details input[type="text"],
.add-wip-details textarea,
.add-project-details textarea {
    display: block;
}

body.page.bpcp_pro_add_wip article #buddypress .entry-title, 
body.page.bpcp_add_project article #buddypress .entry-title {
    display: none;
}

#buddypress .standard-form .error small,
#buddypress .standard-form small.error {
    background: none repeat scroll 0 0 #ed6f6f;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    margin-bottom: 12px;
    margin-top: -13px;
    padding: 6px 4px;
}

.bpcp-media-upload-title {
    margin-bottom: 10px;
}

.bpcp-pro-helper {
    margin-top: 10px;
}

.add-project-content.new .bpcp-buttons {
    margin-top: 0;
}

#project_visibility {
    margin-bottom: 30px;
}

.entry-content .project-single-right .project-single-tags h3,
.entry-content .project-single-right .project-single-author h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 20px;
}

.project-single-right .project-single-author img {
    width: 50px;
    height: 50px;
}

.bp-project-filters > form,
.bp-project-filters > div {
    display: block;
    margin-right: 4px;
    margin-bottom: 4px;
    float: left;
}

#buddypress .add-wip-details > div,
#buddypress .add-project-details > div {
    margin-bottom: 20px;
}

#buddypress .add-project-details.standard-form textarea, 
#buddypress .add-wip-details.standard-form input[type="text"],
#buddypress .add-project-details.standard-form input[type="text"] {
    margin-bottom: 0;
}

/*------------ Single page css ------------*/

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}
#content .project-single-left {
    float: left;
    width: 70%;
}

.project-single-left .project-meta,
.project-single-left .project-description {
    margin-bottom: 20px;
}

#buddypress .standard-form .bpcp-buttons input,
#buddypress .standard-form .bpcp-buttons .button,
input[type="button"]:not(.button-small).back-button {
    margin-bottom: 10px;
}

#content .project-single-left .entry-header a {
    margin-bottom: 10px;
}

.bpcp_project_photo img {
    width: auto;
    max-width: 100%;
    height: auto !important;
    cursor: -webkit-zoom-in; cursor: -moz-zoom-in;
}

.bpcp_project_photo a {
    display: inline-block;
    margin-bottom: 30px;
    max-width: 100%;
}

.bpcp_project_photo a:before,
.bpcp_project_photo a:after {
    content: " "; 
    display: table; 
}

.bpcp_project_photo a:after {
    clear: both;
}

.project-single-right .project-single-author .author-avatar-link,
.entry-content .bpcp_project_photo a {
    border: none;
}

#content .project-single-right {
    float: left;
    padding-left: 30px;
    width: 30%;
    box-sizing: border-box;
}

.project-single-right .project-single-author{
    margin-bottom: 50px;
    overflow: hidden;
}

.project-single-right .project-single-author > p a {
    padding-right: 10px;
}

.project-single-right .project-single-author > p span,
.project-single-right .project-single-author > p a {
    vertical-align: middle;
    display: inline-block;
}

.project-single-right .project-single-author .author-avatar-link img {
    vertical-align: bottom;
}

.project-single-right .project-single-tags p{
    margin-top: 10px;
}

#buddypress .activity .bpcp-grid-wrapper {
    overflow: hidden;
    clear: both;
}

.bbcp-white-popup-block {
    background: #fff;
    border-radius: 4px;
    margin: 40px auto;
    max-width: 520px;
    padding: 40px;
    position: relative;
    text-align: center;
}

.bbpc-delete-title {
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 12px;
}

.delete_confirm {
    margin-bottom: 20px;
}

#delete_project .standard-form input {
    margin: 0 10px;
}

#display_cover_image {
    max-width: 100%;
}

/**
 * File Dialog ==============================================
 **/

.m-upload-dialog button, .m-upload-dialog input[type=button],.m-upload-dialog input[type=reset], input[type=submit]{
    background-color: #1db4da;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    padding: 6px 14px;
    -webkit-appearance: none;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
#photos_upload_dialog {
    background: #F5F5F5;
}
.m-upload-dialog #photo_form_dialog {
    width: 100%;
    padding:10px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
#photo_form_dialog label {
    display: block;
    padding-bottom: 10px;
    padding-top: 10px;
}
.m-upload-dialog .input {
    width: 100%;
    margin: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: solid 1px #D8D8D8;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    padding: 12px;
    font-size: 24px;
    padding-left: 16px;
    color: #888;
}
.m-upload-dialog .input.description {
    width: 100%;
    height: 104px;
    font-size:16px;
    width: 100%;
}
.m-upload-dialog .photofieldset {
    margin-bottom: 12px;
    overflow: hidden;
}
.m-upload-dialog #photo_submit_button {
    float: right;
    padding: 12px;
    font-size: 12px;
    text-transform: uppercase;
    width: 100%;
}

.m-upload-dialog #dragzone {
    position: relative;
    overflow: hidden;
    width: 23em;
    text-align: center;
    margin: 0 auto;
    width:100%;
    height:200px;
    background:white;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 2px dashed #D8D8D8;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

.m-upload-dialog #dragzone.over {
    border:2px dashed #1db4da;
}

.m-upload-dialog #dragzone .fd-file {
    opacity: 0;
    font-size: 118px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    padding: 0;
    margin: 0;
    cursor: pointer;
    filter: alpha(opacity=0);
    font-family: sans-serif;
}
.m-upload-dialog #dragzone .icon {
    height: 126px;
    width: 125px;
    overflow: hidden;
    background: url(../images/drag-upload.png) no-repeat;
    margin: auto;
    background-size: 100%;
}
.m-upload-dialog #dragzone .legend {
    font-size: 20px;
    -webkit-opacity: 0.4;
    -moz-opacity: 0.4;
    filter:alpha(opacity=40);
    padding-top: 10px;
}
.m-upload-dialog #dragzone.over .legend {
    font-size: 20px;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    filter:alpha(opacity=100);
}
.m-upload-dialog #dragzone .progress {
    width: 200px;
    height: 20px;
    position: absolute;
    top: 0px;
    left: 20px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    overflow: hidden;
    display: none;
}
.m-upload-dialog #dragzone .progress .bar {
    height:20px;
    background: url(../images/loading.gif ) no-repeat center left;
    display: block;
    width: 0%;
}
.m-upload-dialog a.remove_media {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: none;
    color: #1DB4DA;
}

@media only screen and (max-width: 720px) {
    .m-upload-dialog .input{
        font-size: 14px;
    }
    .photofieldset ::-webkit-input-placeholder { font-size: 14px; }
    .photofieldset ::-moz-placeholder { font-size: 14px; }
    .photofieldset :-ms-input-placeholder { font-size: 14px; }
    .photofieldset :-moz-placeholder { font-size: 14px; }
}

.photofieldset input {
    border-radius: 3px !important;
    padding: 18px!important;
    outline: none !important;
}

.photofieldset textarea {
    border-radius: 3px !important;
}

div#uploaded_media_details {
    margin: auto;
    text-align: center;
    font-family: sans-serif;
}

div#uploaded_media_details img {
    max-width: 100%;
}

.m-upload-dialog #photo_tags::-webkit-input-placeholder {
    font-size: 13px;
}
.alertmessage {
    text-align: center;
    font-family: sans-serif;
    font-size: 14px;
}
.alertmessage.error {
    color: red;
}

.white-popup {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 500px;
    margin: 20px auto;
}
.photo-dialog {
    height: 100%;
}

@media screen and (max-width: 720px){
    #content .project-single-left,
    #content .project-single-right {
        width: 100%;
    }

    #content .project-single-right {
        padding-left: 0;
    }
}

@media screen and (max-width: 320px){
    .m-upload-dialog #photo_form_dialog {
        padding: 0;
    }

    .photofieldset input {
        padding: 18px 9px!important;
    }

    .photofieldset textarea {
        padding: 9px;
    }
}

/* Multiselect */

.select2-container {
    min-width: 300px;
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid #ccc;
    background: #fafafa;
    border-radius: 0;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid #ccc;
}

#buddypress .standard-form  .select2-container--default .select2-search--inline .select2-search__field {
    border: none;
    padding: 1px;
    box-sizing: border-box;
}

/**
 * File Dialog ==============================================
 **/