:root {
	/* ---------------------------------------------------------------------
	 * Root color pack 
	*/
	--color-primary : #0000CD;
	--color-secondary : #1E90FF;
	--color-info : #008B8B;
	--color-success : #008000;
	--color-warning : #E8CB28;
	--color-danger : #D31919;
	--color-dark : #323434;
	--color-light : #F5F5F5;

	/*--------------------------------------------------------------------*/
	--color-font : #505050;

	/* ---------------------------------------------------------------------
	 * Root column model 
	*/
	--col-1 : 8.333333333333334%;
	--col-2 : 16.666666666666668%;
	--col-3 : 25%;
	--col-4 : 33.333333333333336%;
	--col-5 : 41.66666666666667%;
	--col-6 : 50%;
	--col-7 : 58.333333333333336%;
	--col-8 : 66.66666666666667%;
	--col-9 : 75%;
	--col-10 : 83.33333333333334%;
	--col-11 : 91.66666666666667%;
	--col-12 : 100%;

	/* ---------------------------------------------------------------------
	 * Root border radius 
	*/
	--box-radius : 4px;
	--box-shadow : 0 0 5px rgba(150,150,150,.5);

}

:not(font) {
	color: var(--color-font);
}

*, ::after, ::before {
	box-sizing: border-box;
}

a {
	text-decoration: none;
}

/* ---------------------------------------------------------------------
 * Use Attribute color
*/
*[color="red"] {
    color: red !important;
}
*[color="darkred"] {
    color: darkred !important;
}
*[color="green"] {
    color: green !important;
}
*[color="lightgreen"] {
    color: lightgreen !important;
}
*[color="green"] {
    color: green !important;
}
*[color="blue"] {
    color: blue !important;
}
*[color="lightblue"] {
    color: lightblue !important;
}
*[color="darkblue"] {
    color: darkblue !important;
}
*[color="yellow"] {
    color: yellow !important;
}
*[color="orange"] {
    color: orange !important;
}
*[color="cyan"] {
    color: cyan !important;
}
*[color="magenta"] {
    color: magenta !important;
}
*[color="purple"] {
    color: purple !important;
}
*[color="salmon"] {
    color: salmon !important;
}
*[color="white"] {
    color: white !important;
}
*[color="black"] {
    color: black !important;
}
*[color="gray"] {
	color: gray !important;
}

/* --Attribute color using pack-- */
*[color="primary"] {
	color: var(--color-primary) !important;
}
*[color="secondary"] {
	color: var(--color-secondary) !important;
}
*[color="info"] {
	color: var(--color-info) !important;
}
*[color="success"] {
	color: var(--color-success) !important;
}
*[color="danger"] {
	color: var(--color-danger) !important;
}
*[color="warning"] {
	color: var(--color-warning) !important;
}
*[color="dark"] {
	color: var(--color-dark) !important;
}
*[color="light"] {
	color: var(--color-light) !important;
}

/* padding implements */

.p-0 {
	padding: 0px !important;
}
.p-5 {
	padding: 5px;
}
.p-10 {
	padding: 10px;
}
.p-15 {
	padding: 15px;
}
.p-20 {
	padding: 20px;
}
.p-25 {
	padding: 25px;
}
.p-30 {
	padding: 30px;
}
.p-35 {
	padding: 35px;
}
.p-40 {
	padding: 40px;
}
.p-45 {
	padding: 45px;
}
.p-50 {
	padding: 50px;
}
.p-55 {
	padding: 55px;
}
.p-60 {
	padding: 60px;
}
.p-65 {
	padding: 65px;
}
.p-70 {
	padding: 70px;
}
.p-75 {
	padding: 75px;
}
.p-80 {
	padding: 80px;
}
.p-85 {
	padding: 85px;
}
.p-90 {
	padding: 90px;
}
.p-95 {
	padding: 95px;
}
.p-100 {
	padding: 100px;
}

/* padding left-right */
.p-lr-0 {
	padding-left: 0px !important;
	padding-right: 0px !important;
}
.p-lr-5 {
	padding-left: 5px;
	padding-right: 5px;
}
.p-lr-10 {
	padding-left: 10px;
	padding-right: 10px;
}
.p-lr-15 {
	padding-left: 15px;
	padding-right: 15px;
}
.p-lr-20 {
	padding-left: 20px;
	padding-right: 20px;
}
.p-lr-25 {
	padding-left: 25px;
	padding-right: 25px;
}
.p-lr-30 {
	padding-left: 30px;
	padding-right: 30px;
}
.p-lr-35 {
	padding-left: 35px;
	padding-right: 35px;
}
.p-lr-40 {
	padding-left: 40px;
	padding-right: 40px;
}
.p-lr-45 {
	padding-left: 45px;
	padding-right: 45px;
}
.p-lr-50 {
	padding-left: 50px;
	padding-right: 50px;
}
.p-lr-55 {
	padding-left: 55px;
	padding-right: 55px;
}
.p-lr-60 {
	padding-left: 60px;
	padding-right: 60px;
}
.p-lr-65 {
	padding-left: 65px;
	padding-right: 65px;
}
.p-lr-70 {
	padding-left: 70px;
	padding-right: 70px;
}
.p-lr-75 {
	padding-left: 75px;
	padding-right: 75px;
}
.p-lr-80 {
	padding-left: 80px;
	padding-right: 80px;
}
.p-lr-85 {
	padding-left: 85px;
	padding-right: 85px;
}
.p-lr-90 {
	padding-left: 90px;
	padding-right: 90px;
}
.p-lr-95 {
	padding-left: 95px;
	padding-right: 95px;
}
.p-lr-100 {
	padding-left: 100px;
	padding-right: 100px;
}

/* padding top-bottom */
.p-tb-0 {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}
.p-tb-5 {
	padding-top: 5px;
	padding-bottom: 5px;
}
.p-tb-10 {
	padding-top: 10px;
	padding-bottom: 10px;
}
.p-tb-15 {
	padding-top: 15px;
	padding-bottom: 15px;
}
.p-tb-20 {
	padding-top: 20px;
	padding-bottom: 20px;
}
.p-tb-25 {
	padding-top: 25px;
	padding-bottom: 25px;
}
.p-tb-30 {
	padding-top: 30px;
	padding-bottom: 30px;
}
.p-tb-35 {
	padding-top: 35px;
	padding-bottom: 35px;
}
.p-tb-40 {
	padding-top: 40px;
	padding-bottom: 40px;
}
.p-tb-45 {
	padding-top: 45px;
	padding-bottom: 45px;
}
.p-tb-50 {
	padding-top: 50px;
	padding-bottom: 50px;
}
.p-tb-55 {
	padding-top: 55px;
	padding-bottom: 55px;
}
.p-tb-60 {
	padding-top: 60px;
	padding-bottom: 60px;
}
.p-tb-65 {
	padding-top: 65px;
	padding-bottom: 65px;
}
.p-tb-70 {
	padding-top: 70px;
	padding-bottom: 70px;
}
.p-tb-75 {
	padding-top: 75px;
	padding-bottom: 75px;
}
.p-tb-80 {
	padding-top: 80px;
	padding-bottom: 80px;
}
.p-tb-85 {
	padding-top: 85px;
	padding-bottom: 85px;
}
.p-tb-90 {
	padding-top: 90px;
	padding-bottom: 90px;
}
.p-tb-95 {
	padding-top: 95px;
	padding-bottom: 95px;
}
.p-tb-100 {
	padding-top: 100px;
	padding-bottom: 100px;
}