@for $i from 5 through 49 {
    .font-#{$i + 1} {
        font-size: #{$i + 1}px;
    }
}

.inlineblock {display: inline-block;}
.iblock {display: inline-block;}
.dblock {display: block;}
.displaynone {display: none; }
.overflowhidden{overflow: hidden;}
.b-none{ border: 0 !important;}
.bg-none{ 
    background: transparent !important;
    .card-header,
    .card-body{
        padding-left: 0;
        padding-right: 0;
    }
}

//Margin
@for $i from -25 through 25 {
    .ml-#{$i * 5} {
        margin-left: #{$i * 5}px;
    }

    .mt-#{$i * 5} {
        margin-top: #{$i * 5}px;
    }

    .mr-#{$i * 5} {
        margin-right: #{$i * 5}px;
    }

    .mb-#{$i * 5} {
        margin-bottom: #{$i * 5}px;
    }
}
.margin-0 {
    margin: 0 !important;
}

@for $i from 0 through 25 {
    .pl-#{$i * 5} {
        padding-left: #{$i * 5}px;
    }

    .pt-#{$i * 5} {
        padding-top: #{$i * 5}px;
    }

    .pr-#{$i * 5} {
        padding-right: #{$i * 5}px;
    }

    .pb-#{$i * 5} {
        padding-bottom: #{$i * 5}px;
    }
}
.padding-0 {
    padding: 0 !important;
}
.align-left {
    text-align: left;
}
.align-center {
    text-align: center;
}
.align-right {
    text-align: right;
}
.align-justify {
    text-align: justify;
}

.font300{ font-weight: $font-weight-300; }
.font600{ font-weight: $font-weight-600; }
.font700{ font-weight: $font-weight-700; }

.text_ellipsis{
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
}
.display-5{ font-size: 2.5rem;}
.p-10{padding: 10px !important; }
.p-15{padding: 15px !important; }
.p-20{padding: 20px !important; }


.width30{ width: 30px;}
.width35{ width: 35px;}
.width40{ width: 40px;}
.width45{ width: 45px;}
.width100{width: 100px;}
.width150{ width: 150px;}
.width250{ width: 250px;}
.width360{ width: 360px;}

.bg-blue    { background-color: $blue;}
.bg-azure   { background-color: $azure; }
.bg-indigo  { background-color: $indigo; }
.bg-purple  { background-color: $purple; }
.bg-pink    { background-color: $pink; }
.bg-red     { background-color: $red; }
.bg-orange  { background-color: $orange; }
.bg-yellow  { background-color: $yellow; }
.bg-lime    { background-color: $lime; }
.bg-green   { background-color: $green; }
.bg-teal    { background-color: $teal; }
.bg-cyan    { background-color: $cyan; }
.bg-gray    { background-color: $gray-500 !important; }
.bg-lightgray    { background-color: $gray-300 !important; }

.bg-light-blue    { background-color: rgba($blue, 0.1); color: $blue; }
.bg-light-azure   { background-color: rgba($azure, 0.1); color: $azure; }
.bg-light-indigo  { background-color: rgba($indigo, 0.1); color: $indigo; }
.bg-light-purple  { background-color: rgba($purple, 0.1); color: $purple; }
.bg-light-pink    { background-color: rgba($pink, 0.1); color: $pink; }
.bg-light-red     { background-color: rgba($red, 0.1); color: $red; }
.bg-light-orange  { background-color: rgba($orange, 0.1); color: $orange; }
.bg-light-yellow  { background-color: rgba($yellow, 0.1); color: $yellow; }
.bg-light-lime    { background-color: rgba($lime, 0.1); color: $lime; }
.bg-light-green   { background-color: rgba($green, 0.1); color: $green; }
.bg-light-teal    { background-color: rgba($teal, 0.1); color: $teal; }
.bg-light-cyan    { background-color: rgba($cyan, 0.1); color: $cyan; }
.bg-light-gray    { background-color: rgba($gray-500, 0.1); color: $gray-500; }

@include max-screen ($break-1024){
	.hidden-md{
		display: none;
	}
}
@include max-screen ($break-medium){
	.hidden-sm{
		display: none;
	}
}
@include max-screen ($break-small - 1px){
	.hidden-xs{
		display: none;
	}
}