#contact-cardview {

	height: 100%;
	width: 100%;

	/* Selected business card */
	div.zarafa-contact-cardview-card-selected {
		box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	}

	.zarafa-contact-cardview-card {

		border: 1px solid $grey;
		margin: 5px;
		width: 300px;
		height: 150px;
		float: left;
		overflow: hidden;

		.x-panel .x-panel-header, .x-panel-tc {
			background-color: $white;
		}

		.x-panel-header-text {
			font-size: $font-size-large;
			font-weight: bold;
			overflow: hidden;
			text-overflow: ellipsis;
			display: inline-block;
			max-width: 280px;
			white-space: nowrap;
			color: $dark-grey;
			height: 20px;
		}
		
		 /* Body of contact cardview */
		.zarafa-card-body, .x-panel .x-panel-header {
			border: none;
			padding-left: 10px;
		}

		.x-panel-header {
			padding-top: 10px;
		}

		.zarafa-card-body {
			max-width: 175px;
			float: left;

			table {
				border-spacing: 0;
			}

			p {
				overflow: hidden;	
				text-overflow: ellipsis;
				display: block;
				white-space: nowrap;
				max-width: 175px;
				color: $dark-grey;
			}
		}
		
		/* Initials */
		.k-contact-cardview-initials {
			width: 76px;
			height: 76px;
			float: right;
			border: 1px solid;
			color: $kopano-blue;
			border-radius: 50%;
			line-height: 73px;
			margin-right: 20px;
			text-align: center;
			font-size: 30px;
			user-select: none;
		}

    .k-contact_cardview_photo {
      width: 76px;
      height: 76px;
      float: right;
      margin-right: 20px;
      img {
        width: inherit;
        height: inherit;
        border-radius: 50%;
      }
    }
	}
	
	/* Buttons to switched between contacts */
	.contact-characterstrip {

		margin: $padding-small 0 0 (-$padding-small);

		button {
			min-width: 35px;
		}
	
		.x-btn .x-btn-small {
			box-shadow: none;
			background: none;
			border: 1px solid $grey;
		}

		.x-btn-over .x-btn-small {
			background-color: WhiteSmoke;
		}

		.x-btn-pressed .x-btn-small {
			background-color: $grid-active-color;
			border-color: $grid-active-color;
		}
	}
}
