$font-size:20px;
$text-align:right;

// widget 1
$widget1-icon-color: darken(#C9F0EE, 10%);

.mt-widget-1 {
	border: 1px solid $general-panel-border-color;
	text-align: center;	
	position: relative;

	.mt-icon {
		position: absolute;
		right: 10px;
		top: 10px;
		margin: 7px;
		font-size: 20px;

		> a {
			> i {
				color: $widget1-icon-color;
			}

			&:hover {
				> i {
					color: darken($widget1-icon-color, 10%);
				}
			}
		}
	}
	
	.mt-img {
		display: inline-block;
		border-radius: 50% !important;
		border:4px solid $general-panel-border-color;
		margin: 40px 0 30px 0;

		> img {
			border:1px solid trnsparent;
			border-radius: 50% !important;
		}
	}

	.mt-body {

		.mt-username {
			text-align: center;
			margin: 5px 10px;
			font-weight: 600;
			font-size: 16px;
		}

		.mt-user-title {
			text-align: center;
			margin: 10px 10px 10px 10px;
			color: lighten(#000000, 40%);
			font-size: 13px;
		}

		.mt-stats {
			margin: 30px 0px 0px 0px;
			
			.btn-group {
				border-top: 1px solid $general-panel-border-color;
				
				
				.btn {					
					padding: 10px 10px;
					font-size: 14px;
					border-right:1px solid $general-panel-border-color;
					
					&:hover {
						background-color:$general-panel-border-color;
					}

					&:last-child {
						border: 0;
					}

					> i {
						position: relative;
						top: 3px;
						right: 2px;
						font-size: 16px;
					}

					&:first-child {
						border-bottom-left-radius: $general-border-radius !important;
					
					}

					&:last-child {
						border-bottom-right-radius:  $general-border-radius !important;
						
					}
				}
			}
		}
	}
}

.mt-widget-2 {	
	border: 1px solid $general-panel-border-color;	 
	position:relative;
    
	.mt-head {
	    position:absolute;		
		width: 100%;         
 		background-size:100% 100%;
 		 	 	  		 	  
		.mt-head-label {
		    position:absolute;			
			top: 8px;
			right:8px;						 
			cursor: pointer;
			
			> button {
				font-size: 13px;
				border-radius: 2px !important;
			}
		}

		.mt-head-user {						
			
			.mt-head-user-img {
				position:relative;
				float: left;				
				margin:165px 32px 18px 35px;
				 
				&::after {
					content: "";
					position: absolute;
					top: 90%;
					left: 50%;
					margin-left: -15px;
					border-width: 13px;
					border-style: solid;
					border-color: transparent transparent white  transparent;
				}				 
				 	
				> img {	
					width: 65px;
					border-radius:50% !important;

    			}
			} 
			
			.mt-head-user-info {		
				margin: 175px 0 0 -9px;								
				color: white;				 				
				display: inline-block; 

				.mt-user-name {					
					display: block;	
					font-size: 15px;
				}

				.mt-user-time {	
					font-size: 13px;

					>  i {
						position: relative;
						top: 1px;
						font-size: 13px;
					}

					display: block;					
				}				
			}
		}	
	}

	.mt-body {		
		padding-top:160px;
		text-align:center;

		.mt-body-title {						
			margin-top:130px;
			font-weight: 600;
			font-size: 16px;
		}  

		.mt-body-description {
			margin-top: 10px;
			display: inline-block;		
			color: lighten(#000000, 40%);	
			font-size: 13px;	
			padding: 0 10px;		
		}

		.mt-body-stats {			
			@include clearfix();			 			  
			padding: 0; 

			> li {				
				margin: 15px;
				list-style: none;
				display: inline-block;					
			}
		}

		.mt-body-actions {				
			border-top: 1px solid $general-panel-border-color;
				
			> i {
				font-size: 18px;
			}

			.btn {
				font-size: 14px;					
				border-right: 1px solid $general-panel-border-color;
				padding:12px 0 12px 0;
				text-align: center;

				&:last-child {
					border:0;
				}
			}					
		}
	}	 
}

.mt-widget-3 {
	border: 1px solid $general-panel-border-color;	 
	.mt-head {
   		background-color:#5DC9E6;
   		margin-bottom: 20px;
   		color: white;
   		padding: 15px 0;

		.mt-head-icon { 
			font-size: 35px;			 
			text-align: center; 
			padding-top: 20px;		
			margin-bottom: 10px;		 
		}

		.mt-head-desc {
			margin-left: 10px;
			margin-right: 10px;
			text-align: center;
			color: #fff;
			@include opacity(0.8);
		}

		.mt-head-date {
			text-align: center;
			margin-top: 20px;
			display: block;
			color: darken(#fff, 5%);
		}

		.mt-head-button {
			margin: 10px 0;
			text-align: center;
			padding:20px;


			> button {
				width: 90px;
			}
		}
	}

	.mt-body-actions-icons {
	 
		.btn-group {
			margin-bottom: 20px;

			.mt-icon {
				display: block;
				position:relative;
				padding:5px;
				font-size: 15px;				 
			}
		} 
		.btn {
			border-right: 1px solid $general-panel-border-color;
			font-size: 11px;
			text-align: center;
			padding: 0;
				 

			&:last-child {
				border-right:0;
				
			}
		}
	}
} 

.mt-widget-4 {	
	min-height: 250px;	 
	color:white;
	background-color:#26C0B8;

	.mt-img-container {		 	 
		position:relative;

		> img {
			height: 250px; 
			width: 100%;				
		}
	}

	.mt-container {
		width:150px;
		background-color:#26C0B8;
		min-height: 250px;
		position:absolute;		 
		right:15px;
		top:0;		

		.mt-head-title {
			text-align: center;			
			margin-top: 20px;		
			padding: 10px;
		}

		.mt-body-icons {	
			margin-top: 30px;		 
			text-align: center; 		
			
			> a {
				color: darken(#fff, 10%);
				display: inline-block;
				padding:10px;
				font-size: 17px;		

				&:hover {
					color: #fff;
				}	
			}
		}

		.mt-footer-button {			
			margin-top: 30px;
			position:absolute;
			right:0;	

			> .btn {				 
				width: 90px;
				border-top-right-radius:0 !important;
				border-bottom-right-radius:0 !important;
				border:none !important; 

			}
		}
	}
}