@base-margin:  4px;
@base-padding: @base-margin;


/* Margin */
.m-n  	  {margin: 0px   		   !important;}
.m-xs 	  {margin: @base-margin    !important; &.n{margin: (-@base-margin ) !important} }
.m-sm 	  {margin: @base-margin*2  !important; &.n{margin: (-@base-margin*2 ) !important} }
.m    	  {margin: @base-margin*3  !important; &.n{margin: (-@base-margin*3 ) !important} }
.m-md 	  {margin: @base-margin*4  !important; &.n{margin: (-@base-margin*4 ) !important} }
.m-lg 	  {margin: @base-margin*6  !important; &.n{margin: (-@base-margin*6 ) !important} }
.m-xl 	  {margin: @base-margin*8  !important; &.n{margin: (-@base-margin*8 ) !important} }
.m-xxl	  {margin: @base-margin*10 !important; &.n{margin: (-@base-margin*10) !important} }

.mb-n   {margin-bottom: 0px   		    !important;}
.mb-xs  {margin-bottom: @base-margin    !important; &.n{margin-bottom: (-@base-margin   ) !important} }
.mb-sm  {margin-bottom: @base-margin*2  !important; &.n{margin-bottom: (-@base-margin*2 ) !important} }
.mb     {margin-bottom: @base-margin*3  !important; &.n{margin-bottom: (-@base-margin*3 ) !important} }
.mb-md  {margin-bottom: @base-margin*4  !important; &.n{margin-bottom: (-@base-margin*4 ) !important} }
.mb-lg  {margin-bottom: @base-margin*6  !important; &.n{margin-bottom: (-@base-margin*6 ) !important} }
.mb-xl  {margin-bottom: @base-margin*8  !important; &.n{margin-bottom: (-@base-margin*8 ) !important} }
.mb-xxl {margin-bottom: @base-margin*10 !important; &.n{margin-bottom: (-@base-margin*10) !important} }

.ml-n   {margin-left:  0px 			  !important;}
.ml-xs  {margin-left: @base-margin    !important; &.n{margin-left: (-@base-margin   ) !important} }
.ml-sm  {margin-left: @base-margin*2  !important; &.n{margin-left: (-@base-margin*2 ) !important} }
.ml     {margin-left: @base-margin*3  !important; &.n{margin-left: (-@base-margin*3 ) !important} }
.ml-md  {margin-left: @base-margin*4  !important; &.n{margin-left: (-@base-margin*4 ) !important} }
.ml-lg  {margin-left: @base-margin*6  !important; &.n{margin-left: (-@base-margin*6 ) !important} }
.ml-xl  {margin-left: @base-margin*8  !important; &.n{margin-left: (-@base-margin*8 ) !important} }
.ml-xxl {margin-left: @base-margin*10 !important; &.n{margin-left: (-@base-margin*10) !important} }

.mr-n   {margin-right: 0px 			  !important;}
.mr-xs  {margin-right: @base-margin    !important; &.n{margin-right: (-@base-margin   ) !important} }
.mr-sm  {margin-right: @base-margin*2  !important; &.n{margin-right: (-@base-margin*2 ) !important} }
.mr     {margin-right: @base-margin*3  !important; &.n{margin-right: (-@base-margin*3 ) !important} }
.mr-md  {margin-right: @base-margin*4  !important; &.n{margin-right: (-@base-margin*4 ) !important} }
.mr-lg  {margin-right: @base-margin*6  !important; &.n{margin-right: (-@base-margin*6 ) !important} }
.mr-xl  {margin-right: @base-margin*8  !important; &.n{margin-right: (-@base-margin*8 ) !important} }
.mr-xxl {margin-right: @base-margin*10 !important; &.n{margin-right: (-@base-margin*10) !important} }

.mt-n   {margin-top: 0px			 !important;}
.mt-xs  {margin-top: @base-margin    !important; &.n{margin-top: (-@base-margin   ) !important} }
.mt-sm  {margin-top: @base-margin*2  !important; &.n{margin-top: (-@base-margin*2 ) !important} }
.mt     {margin-top: @base-margin*3  !important; &.n{margin-top: (-@base-margin*3 ) !important} }
.mt-md  {margin-top: @base-margin*4  !important; &.n{margin-top: (-@base-margin*4 ) !important} }
.mt-lg  {margin-top: @base-margin*6  !important; &.n{margin-top: (-@base-margin*6 ) !important} }
.mt-xl  {margin-top: @base-margin*8  !important; &.n{margin-top: (-@base-margin*8 ) !important} }
.mt-xxl {margin-top: @base-margin*10 !important; &.n{margin-top: (-@base-margin*10) !important} }


/* Paddiing */

.p-n  	  {padding: 0px   		 	 !important;}
.p-xs 	  {padding: @base-padding    !important; &.n{padding: (-@base-padding ) !important} }
.p-sm 	  {padding: @base-padding*2  !important; &.n{padding: (-@base-padding*2 ) !important} }
.p    	  {padding: @base-padding*3  !important; &.n{padding: (-@base-padding*3 ) !important} }
.p-md 	  {padding: @base-padding*4  !important; &.n{padding: (-@base-padding*4 ) !important} }
.p-lg 	  {padding: @base-padding*6  !important; &.n{padding: (-@base-padding*6 ) !important} }
.p-xl 	  {padding: @base-padding*8  !important; &.n{padding: (-@base-padding*8 ) !important} }
.p-xxl	  {padding: @base-padding*10 !important; &.n{padding: (-@base-padding*10) !important} }

.pb-n   {padding-bottom: 0px   		  	  !important;}
.pb-xs  {padding-bottom: @base-padding    !important; &.n{padding-bottom: (-@base-padding   ) !important} }
.pb-sm  {padding-bottom: @base-padding*2  !important; &.n{padding-bottom: (-@base-padding*2 ) !important} }
.pb     {padding-bottom: @base-padding*3  !important; &.n{padding-bottom: (-@base-padding*3 ) !important} }
.pb-md  {padding-bottom: @base-padding*4  !important; &.n{padding-bottom: (-@base-padding*4 ) !important} }
.pb-lg  {padding-bottom: @base-padding*6  !important; &.n{padding-bottom: (-@base-padding*6 ) !important} }
.pb-xl  {padding-bottom: @base-padding*8  !important; &.n{padding-bottom: (-@base-padding*8 ) !important} }
.pb-xxl {padding-bottom: @base-padding*10 !important; &.n{padding-bottom: (-@base-padding*10) !important} }

.pl-n   {padding-left:  0px 			!important;}
.pl-xs  {padding-left: @base-padding    !important; &.n{padding-left: (-@base-padding   ) !important} }
.pl-sm  {padding-left: @base-padding*2  !important; &.n{padding-left: (-@base-padding*2 ) !important} }
.pl     {padding-left: @base-padding*3  !important; &.n{padding-left: (-@base-padding*3 ) !important} }
.pl-md  {padding-left: @base-padding*4  !important; &.n{padding-left: (-@base-padding*4 ) !important} }
.pl-lg  {padding-left: @base-padding*6  !important; &.n{padding-left: (-@base-padding*6 ) !important} }
.pl-xl  {padding-left: @base-padding*8  !important; &.n{padding-left: (-@base-padding*8 ) !important} }
.pl-xxl {padding-left: @base-padding*10 !important; &.n{padding-left: (-@base-padding*10) !important} }

.pr-n   {padding-right: 0px 			 !important;}
.pr-xs  {padding-right: @base-padding    !important; &.n{padding-right: (-@base-padding   ) !important} }
.pr-sm  {padding-right: @base-padding*2  !important; &.n{padding-right: (-@base-padding*2 ) !important} }
.pr     {padding-right: @base-padding*3  !important; &.n{padding-right: (-@base-padding*3 ) !important} }
.pr-md  {padding-right: @base-padding*4  !important; &.n{padding-right: (-@base-padding*4 ) !important} }
.pr-lg  {padding-right: @base-padding*6  !important; &.n{padding-right: (-@base-padding*6 ) !important} }
.pr-xl  {padding-right: @base-padding*8  !important; &.n{padding-right: (-@base-padding*8 ) !important} }
.pr-xxl {padding-right: @base-padding*10 !important; &.n{padding-right: (-@base-padding*10) !important} }

.pt-n   {padding-top: 0px			   !important;}
.pt-xs  {padding-top: @base-padding    !important; &.n{padding-top: (-@base-padding   ) !important} }
.pt-sm  {padding-top: @base-padding*2  !important; &.n{padding-top: (-@base-padding*2 ) !important} }
.pt     {padding-top: @base-padding*3  !important; &.n{padding-top: (-@base-padding*3 ) !important} }
.pt-md  {padding-top: @base-padding*4  !important; &.n{padding-top: (-@base-padding*4 ) !important} }
.pt-lg  {padding-top: @base-padding*6  !important; &.n{padding-top: (-@base-padding*6 ) !important} }
.pt-xl  {padding-top: @base-padding*8  !important; &.n{padding-top: (-@base-padding*8 ) !important} }
.pt-xxl {padding-top: @base-padding*10 !important; &.n{padding-top: (-@base-padding*10) !important} }


// Responsive Embed
.embed-container {
	position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; 
	iframe, object, embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
} 


//Veritcally Align
.vertical-align {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
}

//Vertical Align: Table

.vat {vertical-align: top    !important;}
.vam {vertical-align: middle !important;}
.vab {vertical-align: bottom !important;}

table {
	&.table-vam {
		> thead > tr > th,
		> tbody > tr > td,
		> tfoot > tr > th {
			&:extend(.vam);
		}
	}
	&.table-vat {
		> thead > tr > th,
		> tbody > tr > td,
		> tfoot > tr > th {
			&:extend(.vat);
		}
	}
	&.table-vab {
		> thead > tr > th,
		> tbody > tr > td,
		> tfoot > tr > th {
			&:extend(.vab);
		}
	}
}


// Tabular
.tabular {
	display: table; 
	width: 100%;
	.tabular-row {
		display: table-row;
		.tabular-cell {display: table-cell;vertical-align: middle;}
	}
    .clearfix {border-collapse: collapse;}
}


//Avatar
.avatar {width: 40px;height: 40px; border-radius: 50%}


//Custom Scrollbar Styilings

.scrollbar-custom {
	&::-webkit-scrollbar{width: 6px;}
	&::-webkit-scrollbar-thumb{background-color:rgb(196, 196, 196); border-radius: 0;}
	&::-webkit-scrollbar-thumb:hover{background-color:rgb(196, 196, 196);}
	&::-webkit-scrollbar-track{background-color:rgb(237, 237, 237);}
}