@import "../../../variables.less"; 
@import "../../../mixins.less";

td.left-column-containerTDContainer {
		width: 215px;
}


td.right-column-containerTDContainer {
	width: 238px;
    #MiniConnectionsPortlet {
    	padding-right: 20px;
    }
}

@media all and (max-width: 1023px) {
	td.right-column-containerTDContainer {
		width: 191px;
	}
}

#socialTopLayout {
	padding: 10px 20px 0;
}
.left-border-row {
	position: absolute;
	right: 0px;
	top: 10px;
	bottom: 0px;
	border-left: solid 1px @borderColor;
}
#socialMainLayout {
  padding: 20px 10px 10px;
  .uiSocApplication {
    padding: 10px;
    .uiSocApplication {
      padding: 0px;
    }

  }
  .UIGadgetPortlet {
    padding: 10px;
  }
}
.uiSocApplication {
	&.uiEditUserProfilePortlet {
		padding: 0;
		.uiEditUserProfileForm {
			padding: 0 0 0 10px;
			.form-horizontal .control-group .controls{
				white-space: nowrap;
			}
			
		}
	}
	h4.head-container {
		margin: 0 0 15px;
	}
	.simpleBox {
		background: @white;
		border: 1px solid @borderColor;
		border-radius: 5px;
		padding: 5px 10px;
        max-width: 100%;
        #socialMainLayout .ellipsis ;// calll ellipsis
        display: block;
	}
	[class^="uiIconUser"], [class^="uiIconStatus"],
	[class^="uiIconUser"]:hover, [class^="uiIconStatus"]:hover, .btn:hover .uiIconStatusDisconnect {
        .font-icon();
	}
    .uiIconUserAvailable:before, .uiIconUserOnline:before ,
    .uiIconUserInvisible:before, .uiIconUserOffline:before ,.uiIconUserAway:before,.uiIconUserDonotdisturb:before{
        content: "\e76e";
        font-size: 11px;
    }
	.uiIconUserAvailable, .uiIconUserOnline {
        color: #2ec24d;
	}
	.uiIconUserInvisible, .uiIconUserOffline { 
       color:#e3e3e3;
	}
	.uiIconUserAway {
        color:#fd8c40;
	}
	.uiIconUserDonotdisturb {
        color:#c72222;
	}
	.uiIconStatusConnect {
		display: none;
	}
	.uiIconStatusSent {
		display: none;
	}
	.uiIconStatusCancel {
		//background-position:-80px -0px;
	}
	.uiIconStatusReceived {
		//background-position:-80px -0px;
	}
	.uiIconStatusDeny {
		display: none;
	}
	.uiIconStatusAccept {
		display: none;
	}
	.uiIconStatusConnected {
        color: @successColor;
        &:before {
            content: "\e76f";
        }

	}
  	.btn, .btn:hover { // so the icon stays red, even when hover on the button
		.uiIconStatusDisconnect {
			color: @errorColor;
			font-size: 9px;
			top: -1px;
			&:before {
			  	content: "\e75e";
			}
		}
	}
	.actionIcon{
		.uiIconClose{
			top: -1px;
		}
	}
	.hide-default, .user-actions:hover .show-default {
		display: none;
	}
	.user-actions:hover .hide-default, .show-default{
		display: inline-block;
		font-style: italic;
	}
	.avatarXSmall {
		display: inline-block;
		padding: 0px 5px 
	}
}
.uiBasicProfilePortlet {
	.uiBasicInfoSection {
		.group-user-info {
			margin: 0 0 15px;
			.value-user-info {
				> div {
					&.uiEmail, &.uiUrls {
 						display: block;
 						word-wrap: break-word;
 						.tooltip-inner {
 							white-space: normal;
 						}
					}
                    &.ellipsis {
                        max-width: 100%;
                    }
				}
				.listContent {
                    display: flex;
                    padding-bottom: 5px;
					> div:first-child {
						flex-shrink: 0;
                        [class^="uiIcon"] {
                          vertical-align: text-bottom;
                        }
					}
				}
			}
			.label-user-info {
				color: @textColor;
				font-weight:bold;
                margin-bottom: 5px;
			}
		}
	}
}

#socialMainLayout {
  .ellipsis {
    display:inline-block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:normal;
    word-break: normal;
  }
  .uiUrls {
    .ellipsis {
      white-space: nowrap;
      display: inline-block;
      max-width: 100%;
    }

  }
}

.left-column-containerTDContainer .uiBasicProfilePortlet,
.right-column-containerTDContainer .uiBasicProfilePortlet {
	.uiBasicInfoSection {
		.group-user-info {
			.value-user-info {
				> div {
					&.uiEmail, &.uiUrls {
 						width: 190px;
 						max-width: 100%;
					}
				}
				.listContent {
					.ellipsis {
						width: 110px;
						max-width: 100%;
					}
				}
			}
		}
	}
}

.uiRecentActivitiesPortlet {
	.noActivity {
		padding: 20px 20px 100px;
		background: url("/eXoSkin/skin/images/system/userProfile/noActivityIconBg.png") no-repeat center 50px @baseBackground;
		color: @textLightColor;
	}
	.activityStream {
		padding-bottom: 15px;
		.content {
			background: @baseBackground;
			border: 1px solid @borderColor;
			border-radius: 5px;
			margin: 0;
			padding: 15px 20px;
			position: relative;				
			&:before {
				border-bottom: 6px solid transparent;
				border-right: 6px solid @borderColor;
				border-top: 6px solid transparent;
				content: "";
				height: 0;
				left: -6px;
				position: absolute;
				top: 18px;
				width: 0;
			}
			&:after {
				border-bottom: 8px solid transparent;
				border-right: 8px solid @baseBackground;
				border-top: 8px solid transparent;
				content: "";
				height: 0;
				left: -5px;
				position: absolute;
				top: 16px;
				width: 0;
			}
			.link {
			border-top: 1px solid @borderColor;
				margin: 15px -20px 0;
				padding: 15px 20px 0;
			}
		}
	}
}

.uiExperienceProfilePortlet {
	.no-content {
		margin-bottom: 10px;
	}
	.experience-container {
		border-top: 1px solid @borderColor;
			margin: 0 -10px;
			padding: 10px 20px 0;
			&:first-child {
				border-top: none;
			}
		> div {
			margin-bottom: 10px;
		}
		.labelName {
			font-weight: bold;
			width: 90px;
		}
		.ellipsis {
			max-width: 99.8%;
		}
	}
	.aboutMe {
		background: transparent;
		margin-bottom: 15px;
	}
}

.uiMiniConnectionsPortlet {
	h4 {
		margin: 0 0 20px;
	}
	.borderContainer {
		border: 1px solid @borderColor;
		border-radius: 5px;
		/* padding: 15px 0px 15px 5.5px; */
		padding: 10px 0 10px 8px;
	}
	.noConnection {
		background: url("/eXoSkin/skin/images/system/userProfile/findFriendIconBg.png") no-repeat center 65px;
		padding: 20px 20px 20px 20px;
		color: @textLightColor;
		.findConnection {
			padding-top: 40px;			
		}
	}
	a.avatarXSmall {
		/* margin: 0 3.5px 10px 3.5px; */
		margin: 0 3px 10px;
		padding: 0px;
	}
	.viewAllConnection {
		margin: 0px 3px; 
	}
}

.uiEditUserProfileForm {
    .form-horizontal {
      padding-top: 5px;
    }
	h4 {
		margin-top: 25px;
        margin-bottom: 15px;
	}
	#AboutSection {
		textarea {
			width: 460px;
		}
		h4 {
			margin-top:0;
		}
	}
	
	#BaseSection .control-group {
		.control-label {
			font-weight: bold;
		}
		.controls {
			input {
				width: 280px;		 
			}
			.uiSelectbox {
				float: left;			
				select {
					width: 100px;
				}
			}
			.uiMulti-select {
				.controls-row {
					margin-bottom: 8px;
					&:last-child {
						margin-bottom: 0; 
					}
					input {
						width: 175px;
						margin-left: 5px;
					}
					.uiAction {
						margin: left: 7px;				
					}
				  	.actionIcon { // Align "x" and "add" icons
					  	.uiIconClose {
							top: 0;
						}
					  	&:hover .uiIconClose {
						  	opacity: 1;
						}
					}
				}
			}
			.uiRelationshipAction .changeAvatar {
				font-size: 11px;
				margin-left: 2px;
				margin-top: 10px;
			}
		}
		.multiValueContainer li input {
			margin-right: 0;
		}
	}
	.uiExperien {
		.control-group {
			.control-label {
				font-weight: bold;
			}
		}
		input, textarea {
			width: 280px;
		}
		.input-controls {
			line-height: 28px;
			.uiInputInfo {
				float: left;
				padding-right: 5px;
			}
		}
	}
	
}

#socialMainLayout{
	table.UITableColumn{
		width: auto;
		.CenterColumnContainerTDContainer{
			width: 100%;
		}
	}
	.uiMiniConnectionsPortlet,
	.uiBasicProfilePortlet {
		max-width: 280px;
		min-width: 200px;
	}
}

@media(min-width: 1500px) {
    #socialMainLayout .uiMiniConnectionsPortlet,
    #socialMainLayout .uiBasicProfilePortlet {
        min-width: 250px!important;
    }
}
@media(min-width: 1700px) {
    #socialMainLayout .uiMiniConnectionsPortlet,
    #socialMainLayout .uiBasicProfilePortlet {
        min-width: 260px!important;
    }
}
@media(min-width: 1700px) {
    #socialMainLayout .uiMiniConnectionsPortlet,
    #socialMainLayout .uiBasicProfilePortlet {
        min-width: 270px!important;
    }
}
@media(max-width: 1024px){
	.uiExperienceProfilePortlet {
		.experience-container{
			.labelName, .ellipsis{
				width: 100%;
			}
		}
	}
}
@media(max-width: 600px){
	.uiEditUserProfileForm {
		#AboutSection {
			textarea {
				width: 100%;
			}
		}
	}
}
@media(max-width: 480px){
	#socialTopLayout {
		.TRContainer{
			display: block;
		}
	}
}
@media(max-width: 768px){
	 body #socialMainLayout {
        padding: 0  15px;
        table.UITableColumn {
            tr.TRContainer,tr.TRContainer > td {
                display: block;
                width: 100%;
            }
        }
    }
}