@modal-sm: 490px;
@modal-xs-max: (@modal-sm - 2px);

@modalContentPadding: 20px;

.hidden-xs-min{
	@media(max-width: @screen-xs-min){
		display: none;
	}
}

/* 
* Modal templates content
*/

.modal-dialog{
  margin: 0 auto;
}
@media(max-width: @modal-sm){
  .modal-content{
    .box-shadow(none);
  }
}
.modal-small{
  width: 100%;
  max-width: @modal-sm;
}

.iframe-content{
  border: 0;
  width: 100%;
	position: relative;
  z-index: 0;
}

/* 
* Modal content
*/
.modal {
  // When fading in the modal, animate it to slide down
  &.fade .modal-dialog {
    .translate(0, 0);
  }

  .modal-dialog{
    margin: 30px auto;
  }
  @media(max-width: @modal-sm){
    .modal-dialog{
      margin: 0 auto;
    }
  }
}


.container-modal{
  display: block;
  max-width: 340px;
  padding: 0 @modalContentPadding;
  margin: 0 auto;
  text-align: center;
}

.modal-body{
	padding: 30px 0;
	&.full-height-xs{
		@media(max-width: @screen-xs){
			min-height: 100vh;
			padding-bottom: 60px;
			position: relative;
		}
	}
}


.modal-content {
	border:0;
  position: relative;
  button.close{
  	display: block;
    border: 0;
    background-color: transparent;
    position: absolute;
    top: 0;
    right: -40px;
    color: @white;
    font-size: 22px;
    padding: 0;
    z-index: 20;
  }
  .modal-header{
    text-align: center;
    border-bottom: 0 none;
    .title{
    	text-transform: uppercase;
    	font-size: 24px;
    	margin: 30px 0;
    }
  }
  .modal-content-wrapper{
    padding: 0 @modalContentPadding 40px;
  }

	@media(max-width: @screen-xs-min){
		button.close{
			width: 40px;
			height: 40px;
			color: @black;
			top: 0;
			right: 0;
		}

		.fixed-bottom-xs{
			max-width: none;
			height: 60px;
			line-height: 60px;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: @grayf4;
			margin: 0;
		}
	}
}


.modal-header {
	padding:0;
	.nav-tabs {
		margin:0;
		background:@grayf1;
		padding-right: 42px;

		@media(min-width: @modal-xs-max){
			padding-right: 0;
		}
		
		li {
			padding:0;
			&.active {
				background: #fff;
				a {
					color:#000;	
				}
			}
			background: @black;
			a {
				display:block;
				color:@white;	
				padding:14px 0;
				font-size: 10px;
				text-align: center;
				.flama();
				.light();
				text-transform: uppercase;
				font-size: 22px;

				@media(min-width: @modal-xs-max){
					padding:12px 0;
				}
			}
		}
	}
}

.modal-body {
	padding:30px 0;
	@media(min-width: @modal-xs-max){
		padding: 46px 0;
	}
	
	h2.title {
    font-size: 38px;
    line-height:42px;
    color: @red;
		margin:7px 0 12px;
		@media(min-width: @modal-xs-max){
			font-size:38px;
			margin:12px 0;
			line-height:42px;
		}
	}
	h3, legend {
		border:0;
		font-size:9px;
		padding-top:12px;
		margin-bottom:20px;
		@media(min-width: @modal-xs-max){
			margin-bottom:32px;
		}
		&.mar-sm {
			margin-bottom:8px;
		}
		@media(min-width: @modal-xs-max){
			font-size:12px;
		}
	}
	
	.user {
		padding:32px 0 0 !important;
		text-align:center;
		.btn-border{
			width:100%;
		}
		.avatar {
			@size: 100px;
			overflow: hidden;
			width: @size;
			height: @size;
			.border-radius(50%);
			display: block;
			margin: 0 auto 20px;
		}
		.name{
			display: block;
			font-size:21px;
			.flama();
		}
		p {
			padding:0;
			font-size:12px;
			line-height: 18px;
			letter-spacing:0;
			margin:0 auto 31px;
			@media(min-width: @modal-xs-max){
				margin:0 auto 31px;
			}
			[class^="icon-"], [class*=" icon-"] {
					display:block;
					font-size:17px;
					padding-top:12px;
			}
		}
	}

	.user-merge{
		display: block;
		margin-left: -80px;
		margin-right: -80px;
		background: transparent url('../img/user-merge-arrows.png') no-repeat center 60px;
	}

	.spacer{
		display: block;
		height: 24px;
	}

	p{
		max-width:332px;
		margin:16px auto;

		font-size:20px;
		
		&.auto{
			max-width:none;
		}
		
		&.mess {
			max-width:none;
			font-size:20px;
			line-height:26px;
			@media(min-width: @modal-xs-max){
				font-size:24px;
				line-height:36px;
			}
			padding:42px 10px 18px;
		}
		
		&.lead-big{
			font-size:23px;
		}
	}	
}

.modal-actions{
    margin: 20px 0;
    text-align: center;
}