/**************************************************
    Chil 2.0 
    Style for People pages
**************************************************/
#content-people {
    border: 1px solid #B4B4B4;
    background: #fff;
    border-radius: 4px;
}

/*********************************************************
    Style for 1st and 2nd boxes
**********************************************************/
.people-menu-box {
    border-bottom: 1px solid #E5E5E5;
}

.people-menu-box ul {
    list-style: none;
    font-size: 14px;
    color: #999;  
}

.people-menu-box li {
    font-family: 'Segoe UI',Arial;
    padding-left: 15px;
    cursor: pointer;
}
.people-menu-box li:last-child {    
    cursor: auto; 
    padding-top: 12px;
    padding-bottom: 12px; 
}
.people-menu-box li:last-child:hover {    
    background: transparent;
    color: inherit;
}

.people-options {
    height: 30px;
    padding: 0 15px 20px 15px;
    border-bottom: 1px solid #E5E5E5;
}

.people-options li {
    margin-right: 5px;
    float: left;
    list-style: none; 
    font-size: 14px;
    cursor: pointer;          
}

.people-options li:first-child {
    margin-right: 15px;
}

/*.people-options ul li i.img-add {
    background-position:-28px -50px;
    margin-right:5px;
}*/

.add-role:before {
    background: 0px -18px;
}

.people-options li i.img-drop {
    background-position: -551px -4px;
}

.people-options li:hover i.img-drop {
    background-position: -569px -4px;
}

.people-options li i.img-move {
    background-position: -587px -4px;
}

.people-options li:hover i.img-move {
    background-position: -605px -4px;
}

.people-menu-box li.selected{
    text-decoration: none;
    background-color:#21AEEC;
    color:#fff;
    text-shadow:none;     
}

.people-menu-box li a,
.people-menu-box li a:visited {
    text-decoration: none;        
    /*color: #B2B2B2;
    padding: 5px 14px 0px 10px;
    height: 25px;
    line-height: 21px;
    */
    display: block;
    color: inherit; 
    padding: 12px 0px;              
}

.people-menu-box li:hover,
.people-menu-box li a:hover
{    
    text-decoration: none;
    color:#21AEEC;
    text-shadow:none;       
}

.people-menu-box ul li.selected a,
.people-menu-box ul li.selected a:visited {
    color: #fff;    
}

.people-menu-box ul li i,
.people-options ul li i {
    width: 20px; 
    height: 20px; 
    vertical-align: middle;
    display: inline-block;
    background-image: url("../images/icons2.png");
    background-repeat: no-repeat;
    background-size: auto;        
    padding-top:3px; 
}

.people-menu-box ul li i.img-list {
    background-position:-2px -3px;
    margin-right:5px;
}

.people-menu-box ul li.selected i {
    background-position:-22px -3px;    
}

.people-menu-box ul li:hover i.img-list {
    background-position:-22px -3px;    
}

.people-menu-box ul li i.img-people {
    background-position:-82px -3px;
    margin-right:5px;
}

.people-menu-box ul li:hover i.img-people {
    background-position:-103px -3px;
}

.people-menu-box ul li.selected i.img-people {
    background-position:-103px -3px;
}


.people-menu-box ul li i.img-search {
    background-position:-46px -48px;
    margin-right:5px;
}

.people-menu-box ul li i.img-drop {
    background-position:-552px -3px;
    margin-right:5px;
}

.people-menu-box ul li:hover i.img-search {
    background-position:-66px -48px;
}

/*********************************************************
    Style for 3th box
**********************************************************/
.people-search-box {   
    height: 30px;
    margin: 20px 15px;
    /*margin-top: 20px;
    margin-bottom: 20px;*/
    display: block;
    background-color: #FFF;    
}

.button-advanced {
    width:165px;
    height:29px;
    background-color:#F3F3F3;
    border:1px solid #E6E6E6;
    font-family:officina1,Arial;
    font: 14px;
    text-shadow: 0 1px 0 #fff;
    color: #B2B2B2; /*#CCC;*/
    float:left;
    display:none;
}

.button-advanced:active {
    background-color:#E6E6E6;    
    border-color: #F3F3F3;
    box-shadow: inset 0 1px 2px #CCCCCC; 
}


.search-holder {
    position: absolute;
    left: 0px;
    right:105px;
}
.search-product,
.search-contact {
    width: 100%;
    height:28px;
    border: 1px solid #E6E6E6;
    border-radius: 3px;
    box-shadow: 0px 1px 2px #ECECEC inset;
    padding-left:5px;
    padding-right:3px;
    font-family:'Segoe UI',Arial;
    font-size:12px;
}

.people-title-menu {
    padding:5px 0px;
    width:auto;
    height:20px;
    display:block;
    border-bottom: 1px solid #E6E6E6;    
}

.people-menu {
    width:165px;
    float:left;
    min-height: 250px;    
}

.people-content-header {
    width:536px;
    height:20px;    
    margin-left:167px;            
    padding:5px 0px 5px 15px;
    border-bottom: 1px solid #E6E6E6;    
}

.title-file-col {
     float:left;
}

.people-content {
    clear: both;   
}

.people-content .loading-txt {
    margin: 10px 0 0 10px;
}


/*********************************************************
    Style for Lists Menu
**********************************************************/
.roles-menu {  
    list-style: none;
    /*border-radius: 2px;*/
    min-height:100px;
    color: #333;    
}

.roles-menu li {
    padding-left: 15px;
    padding-right: 30px;
    height:25px;
    border: currentColor;    
    width:auto;
    position: relative;
}

.roles-menu a {    
    height:19px;
    padding: 3px 0px 3px 10px;
    font-family: 'Segoe UI',Arial;        
    font-size: 14px;
    text-decoration: none;
    color:rgb(128, 128, 128);    
    display:inline-block;
}

.roles-menu li:hover,
.roles-menu li:hover > a,
.roles-menu a:hover,
/*.roles-menu a:focus,*/
/*.roles-menu li [class~="selected"],*/
.roles-menu li.selected,
.roles-menu li > a.selected
{
    color: #000;        
    background-color: #D3EFFB;
}

.roles-menu .icon-option-list {
    position: absolute;
    top: 2px;
    right: 5px;
}

.roles-menu li:hover .icon-option-list {        
    display:block;
}

/*********************************************************
    Style for page People -> Lists -> List view contacts
**********************************************************/
.contact-list-view {
    width:inherit;       
    display:none;        
}

.contact-list-view > ul {
    list-style:none;
    list-style-image:none;
    list-style-position:outside;   
}

.contact-list-view > ul > li {
    margin: 0px;               
    float:left;
    display:inline-block;
    width:540px;   
    height:64px;
    padding:15px 0px 10px 15px;
    border-bottom: 1px solid #E6E6E6;
}

.contact-list-view ul > li:hover {
    cursor:default;
    background-color: #D3EFFB;
}

.contact-list-view  ul > li div.option-file {
    width:16px;
    float:left;      
}

.contact-list-view ul > li div.profile-photo {
    width:60px;
    margin-left:5px;
    float:left;
}

.contact-list-view ul > li div.profile-info {
    width:440px;
    height:55px;
    float:left;
    margin-left:15px;
    padding-bottom:15px;    
    
}




/*********************************************************
    Style for page People -> People -> List view contacts
**********************************************************/
.people-bio {
    width:264px;
    height:55px;
    float:left;
    margin-left:15px;
    padding-bottom:15px;   
}

.profile-select {
    width: 150px; /*160px*/
    height:30px;
    float:left;    
    margin-top:0px;  /*20px;*/
    margin-left:15px;
}

.option-profile {
    width:150px;
    height:30px;
    padding:5px 5px 5px 10px;
    background:#F3F3F3;
    border:1px solid #E6E6E6;
    font:normal 12px 'Segoe UI', arial;
    color:rgb(145, 145, 145);
}



/*********************************************************
    Style for page People -> Lists -> Icon view contacts
**********************************************************/
.contact-icon-view {
    position: relative;
    padding: 5px;
    margin-left: 165px;
    min-height:259px;    
    list-style:none;
    list-style-image:none;
    list-style-position:outside;
    border-left: 1px solid #e5e5e5;
    background: #f3f3f3;
}

.contact-icon-view ul {
    background: #fff;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    box-shadow: 1px 2px 2px #e5e5e5;
    min-height: 237px;
}

.contact-icon-view li {
    position: relative;
    margin-top: 1.3%;
    margin-left: 1.3%;             
    display:inline-block;
    text-align: left;
    width: 44%;
    padding: 10px;
    border-bottom: 1px solid #E6E6E6;
    list-style:none;
    border: 1px solid #e5e5e5;
}

.contact-icon-view li:hover {
    border: 1px solid #20aeec;
}
.contact-icon-view li.selected { 
    background-color: rgb(211, 239, 251);
    border: 1px solid #20aeec;
}

.contact-icon-view li[class~="selectboxit-option"]:nth-child(even) {
    margin-left:0px;
}

input[type="checkbox"] {
    float: left;
}
.contact-checkbox {
    float: left;
    width: 0px;
    opacity: 0;
    height: 0px;
}

.contact-icon-view li div.option-file {
    position: absolute;
    z-index: 90;
    top: 2px;
    left: 2px;
    width:16px;      
}

.contact-checkbox + label{
    height: 20px;
    width: 20px;
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 10;
    border-radius: 50%;
    background: #fff url(../images/icons2.png) -376px -25px;
    cursor: pointer;
}

.contact-checkbox:checked + label {
    background:url(../images/icons2.png) -400px -25px;
}

.contact-icon-view li.selected .contact-checkbox + label {
    background:url(../images/icons2.png) -400px -25px;
}
.contact-icon-view li .contact-checkbox:hover + label {
    background:url(../images/icons2.png) -400px -25px;
}

.contact-icon-view .thumb {
    width: 60px;
    height: 60px;
    /*margin-left: 10px;*/
    float: left;
    display: block;
}

.contact-icon-view .profile-info {
    
    /*width:150px;
    height:15px;
    padding-bottom:15px;*/
    width: 60%;
    float:left;
    margin-left:10px;    
     
}

.select-people-icon-view {
    margin-top:0px;
    margin-left:10px;
    /**********
        If the select sets to margin-top:0px on icon view, the view is ok.
        But on list view the value must be 15px
    ***********/
}

.select-people-list-view {
    margin-top:15px;
    margin-left:10px;
}

.button-list {
    width:150px;
    height:30px;
}


/*********************************************************
  Style for People Menu Option, when it is selected
**********************************************************/
.bubble {    
    position: relative;    
    height: 30px;
    padding: 0px;   
    background-color:#21AEEC;
    border: #21AEEC solid 0px;
}

.bubble:after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 42%;
    border-style: solid;
    border-width: 7px 7px 0;
    border-color: #21AEEC transparent;
    display: block;
    width: 0;
    z-index: 1;
}

/* Style for Responsive Design
---------------------------------------------------------------------------*/
@media only screen and (max-width: 960px) {
    .people-content-header,
    .people-content {
        width:auto;
    }
    .contact-icon-view li {
        width: 43.4%;
    }

    /*.contact-icon-view li {
        padding:5px;
        width:230px;
    }

    .contact-icon-view .thumb {
        margin-left:5px;
    }

    .contact-icon-view .profile-info {
        margin-left:5px;
        width:140px;
    }

    .contact-icon-view li:nth-child(even) {
        margin-left:0;
    }*/
}

@media only screen and (max-width: 768px) {                
    .contact-icon-view li {
        width: 92%;
    }
    
    /*div#content-people {
        padding:0 30px 0 20px;
    }

    .people-content-header,
    .people-content {
        width:75%;
    }

    .contact-icon-view {
        width:100%;
        
    }

    .contact-icon-view li {
        width:auto;
    }

    .contact-icon-view li:nth-child(2n) {
        margin-left:0;
    }*/
}


@media only screen and (max-width: 568px) {
    /*div#content-people {
        padding:0 15px 0 10px;
    }*/
    .stored-box {
        padding: 0;
    }
    .people-options {
        padding: 0 5px 10px 5px;
    }
    .contact-icon-view li{
        width: 89%;
    }
    .people-menu-box ul {
        font-size: 11px;
    }
    .people-menu-box li a {
        padding: 6px 0;
    }
    .people-search-box {
        margin: 10px 5px;
    }

    /*.people-title-menu,
    .roles-menu {
        width:150px;
    }

    .people-menu-box li {
        font-size:12px;
    }

    .roles-menu a {
        width:77%;
    }

    .roles-menu .icon-option-list {
        margin:4px 3px;
    }

    .people-content-header, 
    .people-content {
        width:63%;
        margin-left:150px;        
    }

    .button-advanced {
        display:none;
    }*/

    /*.search-contact {
        width:75%;
    }
    
    .contact-icon-view li {
        padding:10px 0 10px 10px;
        width:95%;
        height:55px;
        display:block;
    }
        
    .contact-icon-view .thumb {
        width:30px;
        height:30px;
    }

    .contact-icon-view .profile-info {
        margin-left:5px;
        width:70%;
        padding-bottom:0;
    }*/

    a.name-profile,
    .bio-profile {
        font-size:12px;
    }

    .roles-menu a {
        font-size:11px;
    }

    /* For Edit List Popup */
    .namedesc-popup {
        width: 400px !important;
    }

}

@media only screen and (max-width: 380px) {
    #content-people {
        padding:0 15px 0 10px;
        border: none;
        border-top: 1px solid #E6E6E6;
    }

    #wrapper-2col > section > div {
        margin-top:20px;
    }

    .search-holder {
        right: 52px;
    }

    .button-find {
        margin:0;
    }

    #content-people {
        margin-top: 0px;
    }

    .people-menu {
        width:100%;
        min-height:auto;
        float:none;
    }

    .people-title-menu,
    .roles-menu {
        width:inherit;
    }

    .roles-menu {
        max-height:105px;        
        overflow-x:hidden;
        overflow-y:auto;
    }

    .roles-menu a {
        width: 85%;
    }

    .people-content-header, 
    .people-content {
         width:100%;
         margin-left:0;         
    }

    .people-content-header {
        padding:5px 0px 5px 0px;        
    }

    .people-content {
        border-left:none;      
    }
    .contact-icon-view {
        border: none;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .contact-icon-view ul{
        margin: 0;
        border: none;
    }
    .contact-icon-view ul li{
        border: none;
        border-top: 1px solid #E6E6E6;
        border-bottom: 1px solid #E6E6E6;
    }
    .contact-icon-view li:hover,
    .contact-icon-view li.selected { 
        border: none;
        border-top: 1px solid #20aeec;
        border-bottom: 1px solid #20aeec;
    }
    .contact-icon-view .thumb {
        width:50px;
        height:50px;
    }
    .contact-icon-view li {
        width: 98%;
        padding:5px 0 5px 5px;
    }
    input[type="checkbox"] + label {
        left: 0;
        top: 0;
    }
    /*
    .contact-icon-view {
        width:95%;          
    }
    
    .contact-icon-view .profile-info {
        margin-left:5px;
        width:165px;
    }

    a.name-profile,
    .bio-profile {
        width:inherit;
    }*/

    /* For Edit List Popup */
    .namedesc-popup {
        width: 250px !important;
        margin-left: -125px !important;
    }

    .namedesc-form .field-row {
        margin-left:10px !important;
    }

    .namedesc-form input[type="text"], .namedesc-form textarea {
        width:92% !important;
    }
    .roles-menu {
        min-height: 0px;
    }
    .people-menu {
        min-height: 0px;
    }

}