

/* Message Boxes */
.mk-message-box {

		display: block;
		margin-bottom: 40px;
		background-position: 15px 20px;
		background-repeat: no-repeat;
		border-style: solid;
		border-width: 1px;
		position: relative;
		line-height: 24px;
		.border-radius(4px);
		span{
			display: block;
			padding: 15px 15px 15px 65px; 
		}

		.box-close-btn {
			position: absolute;
			right:6px;
			top:0;

		}

		&.mk-simple-message-box {
			background-color: #f3f2f2;
			border-color: #e7e7e7;
			span {
				padding-left: 15px;
				text-align: center;
			}
		}


		&.mk-comment-message-box {
			background-image: url(../../images/box-comment-icon.png);
			background-color: #eeeeee;
			border-color: #dddddd;

			i {
				color: #aaaaaa;
			}
		}

		&.mk-info-message-box {
			background-image: url(../../images/box-info-icon.png);
			background-color: #d1eff8;
			border-color: #afe0ee;

			i {
				color: #3ea3bc;
			}
		}

		&.mk-error-message-box {
			background-image: url(../../images/box-error-icon.png);
			background-color: #fac6bf;
			border-color: #fd8585;

			i {
				color: #de303a;
			}
		}

		&.mk-confirm-message-box {
			background-image: url(../../images/box-confirm-icon.png);
			background-color: #b8f4d0;
			border-color: #72dd9d;

			i {
				color: #20b66e;
			}
		}

		&.mk-warning-message-box {
			background-image: url(../../images/box-warning-icon.png);
			background-color: #fbf1c8;
			border-color:#e0c069;

			i {
				color: #be9a34;
			}
		}
}




/* Buttons */

.mk-button {
    position: relative;
    display: inline-block;
    margin:0 10px 20px 0;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    zoom: 1;
    font-weight: bold;
    text-shadow: 0 1px rgba(0,0,0,0.4);
    color: #fff;
    background-color: #a1c32c;
    .border-radius(2px);
    box-shadow: inset 0px 1px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 2px 0px 0px #7e9822;
    i {
    	margin: -4px 8px 0 0;
    	line-height: 4px !important;

    }
    &:hover {
    	color: #fff;
    	background-color: #98b82a;
    }
    &:active {
	    	top:1px;
	    	box-shadow: 0px 1px 0px 0px #7e9822;
	}

	&.large {
	    padding: 14px 26px;
	    font-size: 14px;
	    line-height: 100%;
	    i {
	    	font-size: 16px;
	    }
	}

	&.medium {
	    padding: 11px 22px;
	    font-size: 12px;
	    line-height:100%;
	    i {
	    	font-size: 14px;
	    }
	}

	&.small {
	    padding: 9px 14px;
	    font-size: 10px;
	    line-height:100%;
	    i {
	    	font-size: 12px;
	    	margin-top: -3px;
	    }
	}
}


.mk-button-align {
		display: inline-block;
		&.right {
			float: right;
		}

		&.center {
			text-align: center;
			display: block !important;

		}

		&.left {
			text-align: left;	
		}
}







/* Tabs
-------------------------------------------------------------------- */
.mk-tabs {
    margin-bottom: 20px;
    .mk-tabs-tabs {
			margin: 0;
    		float: left;
    		width: 19%;
    		border: 1px solid #e5e5e5;
    		position: relative;
    		z-index: 10;

    		li {
    			margin: 0;
        		position: relative;
        		padding: 0;
        		display: block;
        		border-bottom: 1px solid #e5e5e5;
	        	cursor: pointer;

	        	&:last-child {
	        		border: none;
	        	}
	        	a:before{
	        		content: "\f105"; 
					font-size: 12px;
					margin-right: 7px;
	        	}

        		&:hover {
					background-color: rgba(0,0,0,0.03);
        		}
    			
  
    			a {
    				display: block;
    				margin: 0;
    				font-size: 12px;
	        		padding: 6px 10px;
					color: #666666;
    			}
    			&.current{
    				 cursor: default;
    				 color: #a1c32c;
					background-color: rgba(0,0,0,0.04);
    			}
    		}
    }

    .mk-tabs-panes {
    	position: relative;
	    z-index: 1;
	    margin: 0;
	    width: 80%;
	   float: left;
    	.mk-tabs-pane {
    		padding-left: 30px;
    		 position: relative;
    		 z-index: 8;
    	}
    }
    }



/* List Styles
-------------------------------------------------------------------- */

.custom-list {
			margin: 0 0 30px;
			padding: 0;
			list-style: none;

			li {
				margin: 0;
				padding: 0;
				line-height: 26px;
				&:before {
					padding-right: 10px;
					font-size: 14px;
					line-height: 26px;
					display: inline-block;
					content: "\f00c";
					color: #a1c32c;
				}

			}
}





.mk-toggle {
	margin:0;

		border:1px solid #ececec;
		margin-bottom: 3px;
		.mk-toggle-title {
			display: block;	 
			position: relative;
			font-size: 13px;
			padding: 9px 30px 9px 15px;
			line-height: 22px;
			position: relative;
			color:#222;
			cursor: pointer;
			.gradient(#ffffff, #f9f9f9);

			i {
				font-size: 24px;
				margin-right: 15px;
				color: #b9b9b9;
			}

			&:hover {
        			.gradient(#fafafa, #f4f4f4);
        		}
		&:before {
			padding:3px 6px 2px;
			line-height: 16px;
			display: block;
			position: absolute;
			right:10px;
			top: 10px;
			content: "\f054";
			font-size: 12px !important;
		}

		&.active-toggle {
			border-bottom:1px solid #ececec;
			&:before {
				.rotate(90deg);
			}
		}
		}

 
	.mk-toggle-pane {
		position: relative;
		display: none;
		padding: 20px;
		background-color: #fff;
	}

}