// /**=====================
//      07. Color CSS Start
// ==========================**/
// .color-box{
//   margin-bottom: -10px;
//   button {
//     margin-bottom: 10px;
//     + button {
//       margin-left: 5px;
//     }
//   }
// }

// // primary Color
// $m-val:13;
// $or: $primary-color;
// @while $m-val >=1 {
//   .primary-color ul li {
//     &:nth-child(#{$m-val}) {
//       $or: lighten($or, 1.5%);
//       background-color: $or;
//       padding: 10px 15px;
//       margin-bottom: 10px;
//       span:before {
//         content: "#{$or}";
//         display: block;
//         color: $white;
//         text-align: center;
//       }
//       $m-val: $m-val - 1;
//     }
//     &:last-child {
//       margin-bottom: 0;
//     }
//   }
// }
// //primary Color

// // secondary Color
// $m-val:13;
// $or: $secondary-color;
// @while $m-val >=1 {
//   .secondary-color ul li {
//     &:nth-child(#{$m-val}) {
//       $or: lighten($or, 3%);
//       background-color: $or;
//       padding: 10px 15px;
//       margin-bottom: 10px;
//       span:before {
//         content: "#{$or}";
//         display: block;
//         color: $white;
//         text-align: center;
//       }
//       $m-val: $m-val - 1;
//     }
//     &:last-child {
//       margin-bottom: 0;
//     }
//   }
// }
// //secondary Color

// //Success Color
// $m-val:13;
// $or:$success-color;
// @while $m-val >=1 {
//   .success-color ul li {
//     &:nth-child(#{$m-val}) {
//       $or: lighten($or, .9%);
//       background-color: $or;
//       padding: 10px 15px;
//       margin-bottom: 10px;
//       span:before {
//         content: "#{$or}";
//         display: block;
//         color: $white;
//         text-align: center;
//       }
//       $m-val: $m-val - 1;
//     }
//     &:last-child {
//       margin-bottom: 0;
//     }
//   }
// }
// //Success Color

// // Info Color
// $m-val:13;
// $or: $light-font;
// @while $m-val >=1 {
//   .info-color ul li {
//     &:nth-child(#{$m-val}) {
//       $or: lighten($or, 2.5%);
//       background-color: $or;
//       padding: 10px 15px;
//       margin-bottom: 10px;
//       span:before {
//         content: "#{$or}";
//         display: block;
//         color: $white;
//         text-align: center;
//       }
//       $m-val: $m-val - 1;
//     }
//     &:last-child {
//       margin-bottom: 0;
//     }
//   }
// }
// //Info Color

// // warning Color
// $m-val:13;
// $or:  $warning-color;
// @while $m-val >=1 {
//   .yellow-color ul li {
//     &:nth-child(#{$m-val}) {
//       $or: lighten($or, 3%);
//       background-color: $or;
//       padding: 10px 15px;
//       margin-bottom: 10px;
//       span:before {
//         content: "#{$or}";
//         display: block;
//         color: $white;
//         text-align: center;
//       }
//       $m-val: $m-val - 1;
//     }
//     &:last-child {
//       margin-bottom: 0;
//     }
//   }
// }
// //warning Color

// //Danger Color
// $m-val:13;
// $or:$danger-color;
// @while $m-val >=1 {
//   .red-color ul li {
//     &:nth-child(#{$m-val}) {
//       $or: lighten($or, 2%);
//       background-color: $or;
//       padding: 10px 15px;
//       margin-bottom: 10px;
//       span:before {
//         content: "#{$or}";
//         display: block;
//         color: $white;
//         text-align: center;
//       }
//       $m-val: $m-val - 1;
//     }
//     &:last-child {
//       margin-bottom: 0;
//     }
//   }
// }
// //Danger Color

// //Pink Color
// $m-val:13;
// $or:#e6155e;
// @while $m-val >=1 {
//   .pink-color ul li {
//     &:nth-child(#{$m-val}) {
//       $or: lighten($or, 3%);
//       background-color: $or;
//       padding: 10px 15px;
//       margin-bottom: 10px;
//       span:before {
//         content: "#{$or}";
//         display: block;
//         color: $white;
//         text-align: center;
//       }
//       $m-val: $m-val - 1;
//     }
//     &:last-child {
//       margin-bottom: 0;
//     }
//   }
// }
// //Pink Color


// // Gray Color
// $m-val:13;
// $or: $dark-gray;
// @while $m-val >=1 {
//   .gray-color ul li {
//     &:nth-child(#{$m-val}) {
//       $or: lighten($or, 3%);
//       background-color: $or;
//       padding: 10px 15px;
//       margin-bottom: 10px;
//       span:before {
//         content: "#{$or}";
//         display: block;
//         color: $white;
//         text-align: center;
//       }
//       $m-val: $m-val - 1;
//     }
//     &:last-child {
//       margin-bottom: 0;
//     }
//   }
// }
// //gray Color


// .light-font {
//   color: $theme-body-sub-title-color;
// }

// /**=====================
//      07. Color CSS Ends
// ==========================**/
