/* Align Self Classes */
.align-self-auto {
    align-self: auto;
}

.align-self-start {
    align-self: flex-start;
}

.align-self-end {
    align-self: flex-end;
}

.align-self-center {
    align-self: center;
}

.align-self-baseline {
    align-self: baseline;
}

.align-self-stretch {
    align-self: stretch;
}
/* Justify Content Classes */
.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-left {
    justify-content: left;
}

.justify-right {
    justify-content: right;
    display: none;
}

.justify-center {
    justify-content: center;
}

.justify-space-between {
    justify-content: space-between;
}

.justify-space-around {
    justify-content: space-around;
}

.justify-space-evenly {
    justify-content: space-evenly;
}

/* Align Items Classes */
.align-items-start {
    align-items: flex-start;
}

.align-items-end {
    align-items: flex-end;
}

.align-items-center {
    align-items: center;
}

.align-items-baseline {
    align-items: baseline;
}

.align-items-stretch {
    align-items: stretch;
}
/* Align Content Classes */
.align-content-start {
    align-content: flex-start;
}

.align-content-end {
    align-content: flex-end;
}

.align-content-center {
    align-content: center;
}

.align-content-space-between {
    align-content: space-between;
}

.align-content-space-around {
    align-content: space-around;
}

.align-content-stretch {
    align-content: stretch;
}

/* CSS classes with margins increasing by 5px */
.m-5 {
    margin: 5px;
}

.m-10 {
    margin: 10px;
}

.m-15 {
    margin: 15px;
}

.m-20 {
    margin: 20px;
}

.m-25 {
    margin: 25px;
}

.m-30 {
    margin: 30px;
}

.m-35 {
    margin: 35px;
}

.m-40 {
    margin: 40px;
}

.m-45 {
    margin: 45px;
}

.m-50 {
    margin: 50px;
}

.m-55 {
    margin: 55px;
}

.m-60 {
    margin: 60px;
}

.m-65 {
    margin: 65px;
}

.m-70 {
    margin: 70px;
}

.m-75 {
    margin: 75px;
}

.m-80 {
    margin: 80px;
}

.m-85 {
    margin: 85px;
}

.m-90 {
    margin: 90px;
}

.m-95 {
    margin: 95px;
}

.m-100 {
    margin: 100px;
}
/*margin*/

/* CSS classes with margin-top increasing by 5px */
.m-t-5 {
    margin-top: 5px;
}

.m-t-10 {
    margin-top: 10px;
}

.m-t-15 {
    margin-top: 15px;
}

.m-t-20 {
    margin-top: 20px;
}

.m-t-25 {
    margin-top: 25px;
}

.m-t-30 {
    margin-top: 30px;
}

.m-t-35 {
    margin-top: 35px;
}

.m-t-40 {
    margin-top: 40px;
}

.m-t-45 {
    margin-top: 45px;
}

.m-t-50 {
    margin-top: 50px;
}

.m-t-55 {
    margin-top: 55px;
}

.m-t-60 {
    margin-top: 60px;
}

.m-t-65 {
    margin-top: 65px;
}

.m-t-70 {
    margin-top: 70px;
}

.m-t-75 {
    margin-top: 75px;
}

.m-t-80 {
    margin-top: 80px;
}

.m-t-85 {
    margin-top: 85px;
}

.m-t-90 {
    margin-top: 90px;
}

.m-t-95 {
    margin-top: 95px;
}

.m-t-100 {
    margin-top: 100px;
}

/* CSS classes with margin-right increasing by 5px */
.m-r-5 {
    margin-right: 5px;
}

.m-r-10 {
    margin-right: 10px;
}

.m-r-15 {
    margin-right: 15px;
}

.m-r-20 {
    margin-right: 20px;
}

.m-r-25 {
    margin-right: 25px;
}

.m-r-30 {
    margin-right: 30px;
}

.m-r-35 {
    margin-right: 35px;
}

.m-r-40 {
    margin-right: 40px;
}

.m-r-45 {
    margin-right: 45px;
}

.m-r-50 {
    margin-right: 50px;
}

.m-r-55 {
    margin-right: 55px;
}

.m-r-60 {
    margin-right: 60px;
}

.m-r-65 {
    margin-right: 65px;
}

.m-r-70 {
    margin-right: 70px;
}

.m-r-75 {
    margin-right: 75px;
}

.m-r-80 {
    margin-right: 80px;
}

.m-r-85 {
    margin-right: 85px;
}

.m-r-90 {
    margin-right: 90px;
}

.m-r-95 {
    margin-right: 95px;
}

.m-r-100 {
    margin-right: 100px;
}
/* CSS classes with margin-bottom increasing by 5px */
.m-b-5 {
    margin-bottom: 5px;
}

.m-b-10 {
    margin-bottom: 10px;
}

.m-b-15 {
    margin-bottom: 15px;
}

.m-b-20 {
    margin-bottom: 20px;
}

.m-b-25 {
    margin-bottom: 25px;
}

.m-b-30 {
    margin-bottom: 30px;
}

.m-b-35 {
    margin-bottom: 35px;
}

.m-b-40 {
    margin-bottom: 40px;
}

.m-b-45 {
    margin-bottom: 45px;
}

.m-b-50 {
    margin-bottom: 50px;
}

.m-b-55 {
    margin-bottom: 55px;
}

.m-b-60 {
    margin-bottom: 60px;
}

.m-b-65 {
    margin-bottom: 65px;
}

.m-b-70 {
    margin-bottom: 70px;
}

.m-b-75 {
    margin-bottom: 75px;
}

.m-b-80 {
    margin-bottom: 80px;
}

.m-b-85 {
    margin-bottom: 85px;
}

.m-b-90 {
    margin-bottom: 90px;
}

.m-b-95 {
    margin-bottom: 95px;
}

.m-b-100 {
    margin-bottom: 100px;
}
/* CSS classes with margin-left increasing by 5px */
.m-l-5 {
    margin-left: 5px;
}

.m-l-10 {
    margin-left: 10px;
}

.m-l-15 {
    margin-left: 15px;
}

.m-l-20 {
    margin-left: 20px;
}

.m-l-25 {
    margin-left: 25px;
}

.m-l-30 {
    margin-left: 30px;
}

.m-l-35 {
    margin-left: 35px;
}

.m-l-40 {
    margin-left: 40px;
}

.m-l-45 {
    margin-left: 45px;
}

.m-l-50 {
    margin-left: 50px;
}

.m-l-55 {
    margin-left: 55px;
}

.m-l-60 {
    margin-left: 60px;
}

.m-l-65 {
    margin-left: 65px;
}

.m-l-70 {
    margin-left: 70px;
}

.m-l-75 {
    margin-left: 75px;
}

.m-l-80 {
    margin-left: 80px;
}

.m-l-85 {
    margin-left: 85px;
}

.m-l-90 {
    margin-left: 90px;
}

.m-l-95 {
    margin-left: 95px;
}

.m-l-100 {
    margin-left: 100px;
}
/* CSS classes with padding increasing by 5px */
.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;
}
/* CSS classes with padding-top increasing by 5px */
.p-t-5 {
    padding-top: 5px;
}

.p-t-10 {
    padding-top: 10px;
}

.p-t-15 {
    padding-top: 15px;
}

.p-t-20 {
    padding-top: 20px;
}

.p-t-25 {
    padding-top: 25px;
}

.p-t-30 {
    padding-top: 30px;
}

.p-t-35 {
    padding-top: 35px;
}

.p-t-40 {
    padding-top: 40px;
}

.p-t-45 {
    padding-top: 45px;
}

.p-t-50 {
    padding-top: 50px;
}

.p-t-55 {
    padding-top: 55px;
}

.p-t-60 {
    padding-top: 60px;
}

.p-t-65 {
    padding-top: 65px;
}

.p-t-70 {
    padding-top: 70px;
}

.p-t-75 {
    padding-top: 75px;
}

.p-t-80 {
    padding-top: 80px;
}

.p-t-85 {
    padding-top: 85px;
}

.p-t-90 {
    padding-top: 90px;
}

.p-t-95 {
    padding-top: 95px;
}

.p-t-100 {
    padding-top: 100px;
}
/* CSS classes with padding-right increasing by 5px */
.p-r-5 {
    padding-right: 5px;
}

.p-r-10 {
    padding-right: 10px;
}

.p-r-15 {
    padding-right: 15px;
}

.p-r-20 {
    padding-right: 20px;
}

.p-r-25 {
    padding-right: 25px;
}

.p-r-30 {
    padding-right: 30px;
}

.p-r-35 {
    padding-right: 35px;
}

.p-r-40 {
    padding-right: 40px;
}

.p-r-45 {
    padding-right: 45px;
}

.p-r-50 {
    padding-right: 50px;
}

.p-r-55 {
    padding-right: 55px;
}

.p-r-60 {
    padding-right: 60px;
}

.p-r-65 {
    padding-right: 65px;
}

.p-r-70 {
    padding-right: 70px;
}

.p-r-75 {
    padding-right: 75px;
}

.p-r-80 {
    padding-right: 80px;
}

.p-r-85 {
    padding-right: 85px;
}

.p-r-90 {
    padding-right: 90px;
}

.p-r-95 {
    padding-right: 95px;
}

.p-r-100 {
    padding-right: 100px;
}
/* CSS classes with padding-bottom increasing by 5px */
.p-b-5 {
    padding-bottom: 5px;
}

.p-b-10 {
    padding-bottom: 10px;
}

.p-b-15 {
    padding-bottom: 15px;
}

.p-b-20 {
    padding-bottom: 20px;
}

.p-b-25 {
    padding-bottom: 25px;
}

.p-b-30 {
    padding-bottom: 30px;
}

.p-b-35 {
    padding-bottom: 35px;
}

.p-b-40 {
    padding-bottom: 40px;
}

.p-b-45 {
    padding-bottom: 45px;
}

.p-b-50 {
    padding-bottom: 50px;
}

.p-b-55 {
    padding-bottom: 55px;
}

.p-b-60 {
    padding-bottom: 60px;
}

.p-b-65 {
    padding-bottom: 65px;
}

.p-b-70 {
    padding-bottom: 70px;
}

.p-b-75 {
    padding-bottom: 75px;
}

.p-b-80 {
    padding-bottom: 80px;
}

.p-b-85 {
    padding-bottom: 85px;
}

.p-b-90 {
    padding-bottom: 90px;
}

.p-b-95 {
    padding-bottom: 95px;
}

.p-b-100 {
    padding-bottom: 100px;
}

/* CSS classes with padding-left increasing by 5px */
.p-l-0 {
    padding-left: 0px;
}
.p-l-5 {
    padding-left: 5px;
}

.p-l-10 {
    padding-left: 10px;
}

.p-l-15 {
    padding-left: 15px;
}

.p-l-20 {
    padding-left: 20px;
}

.p-l-25 {
    padding-left: 25px;
}

.p-l-30 {
    padding-left: 30px;
}

.p-l-35 {
    padding-left: 35px;
}

.p-l-40 {
    padding-left: 40px;
}

.p-l-45 {
    padding-left: 45px;
}

.p-l-50 {
    padding-left: 50px;
}

.p-l-55 {
    padding-left: 55px;
}

.p-l-60 {
    padding-left: 60px;
}

.p-l-65 {
    padding-left: 65px;
}

.p-l-70 {
    padding-left: 70px;
}

.p-l-75 {
    padding-left: 75px;
}

.p-l-80 {
    padding-left: 80px;
}

.p-l-85 {
    padding-left: 85px;
}

.p-l-90 {
    padding-left: 90px;
}

.p-l-95 {
    padding-left: 95px;
}

.p-l-100 {
    padding-left: 100px;
}
/*font size */
/* CSS classes with font-size increasing by 10px */
.f-10 {
    font-size: 10px;
}

.f-20 {
    font-size: 20px;
}

.f-30 {
    font-size: 30px;
}

.f-40 {
    font-size: 40px;
}

.f-50 {
    font-size: 50px;
}

.f-60 {
    font-size: 60px;
}

.f-70 {
    font-size: 70px;
}

.f-80 {
    font-size: 80px;
}

.f-90 {
    font-size: 90px;
}

.f-100 {
    font-size: 100px;
}
/* font size for rem */
/* CSS classes with font-size increasing by 0.1rem */
.f-r-1 {
    font-size: 1rem;
}

.f-r-1-1 {
    font-size: 1.1rem;
}

.f-r-1-2 {
    font-size: 1.2rem;
}

.f-r-1-3 {
    font-size: 1.3rem;
}

.f-r-1-4 {
    font-size: 1.4rem;
}

.f-r-1-5 {
    font-size: 1.5rem;
}
/* Basic Colors */
.c-white {
    color: white;
}

.c-black {
    color: black;
}

.c-grey {
    color: grey;
}

.c-red {
    color: red;
}

.c-blue {
    color: blue;
}

.c-green {
    color: green;
}

.c-yellow {
    color: yellow;
}

.c-orange {
    color: orange;
}

.c-purple {
    color: #800080;
}

.c-pink {
    color: pink;
}
/* Shades and Tints */
.c-light-grey {
    color: #d3d3d3;
}

.c-dark-grey {
    color: #a9a9a9;
}

.c-light-blue {
    color: #add8e6;
}

.c-dark-blue {
    color: #00008b;
}

.c-light-green {
    color: #90ee90;
}

.c-dark-green {
    color: #006400;
}

.c-light-red {
    color: #f08080;
}

.c-dark-red {
    color: #8b0000;
}

.c-light-yellow {
    color: #ffffe0;
}

.c-dark-yellow {
    color: #ffd700;
}

.c-light-orange {
    color: #ffb347;
}

.c-dark-orange {
    color: #ff4500;
}

.c-light-purple {
    color: #e6e6fa;
}

.c-dark-purple {
    color: #4b0082;
}

.c-light-pink {
    color: #ffb6c1;
}

.c-dark-pink {
    color: #ff1493;
}
/* UX Design Colors */
.c-primary {
    color: #007bff;
}

/* Blue (Primary) */
.c-secondary {
    color: #6c757d;
}

/* Grey (Secondary) */
.c-success {
    color: #28a745;
}

/* Green (Success) */
.c-danger {
    color: #dc3545;
}

/* Red (Danger) */
.c-warning {
    color: #ffc107;
}

/* Yellow (Warning) */
.c-info {
    color: #17a2b8;
}

/* Teal (Info) */
.c-light {
    color: #f8f9fa;
}

/* Light background */
.c-dark {
    color: #343a40;
}

/* Dark background */
.c-muted {
    color: #6c757d;
}

/* Muted text */
.c-white-smoke {
    color: #f5f5f5;
}

/* White smoke */
.c-gainsboro {
    color: #dcdcdc;
}

/* Gainsboro */
.c-silver {
    color: #c0c0c0;
}

/* Silver */
.c-charcoal {
    color: #36454f;
}

/* Charcoal */
.c-teal {
    color: #008080;
}

/* Teal */
.c-cyan {
    color: #00ffff;
}

/* Cyan */
.c-coral {
    color: #ff7f50;
}

/* Coral */
.c-turquoise {
    color: #40e0d0;
}

/* Turquoise */
.c-light-coral {
    color: #f08080;
}

/* Light Coral */
.c-deep-sky-blue {
    color: #00bfff;
}

/* Deep Sky Blue */
.c-light-sea-green {
    color: #20b2aa;
}

/* Light Sea Green */
.c-salmon {
    color: #fa8072;
}

/* Salmon */
/*backgrounds */
/* Basic Background Colors */
.b-white {
    background-color: white;
}

.b-black {
    background-color: black;
}

.b-grey {
    background-color: grey;
}

.b-red {
    background-color: red;
}

.b-blue {
    background-color: blue;
}

.b-green {
    background-color: green;
}

.b-yellow {
    background-color: yellow;
}

.b-orange {
    background-color: orange;
}

.b-purple {
    background-color: purple;
}

.b-pink {
    background-color: pink;
}

/* Shades and Tints Background Colors */
.b-light-grey {
    background-color: #d3d3d3;
}

.b-dark-grey {
    background-color: #a9a9a9;
}

.b-light-blue {
    background-color: #add8e6;
}

.b-dark-blue {
    background-color: #00008b;
}

.b-light-green {
    background-color: #90ee90;
}

.b-dark-green {
    background-color: #006400;
}

.b-light-red {
    background-color: #f08080;
}

.b-dark-red {
    background-color: #8b0000;
}

.b-light-yellow {
    background-color: #ffffe0;
}

.b-dark-yellow {
    background-color: #ffd700;
}

.b-light-orange {
    background-color: #ffb347;
}

.b-dark-orange {
    background-color: #ff4500;
}

.b-light-purple {
    background-color: #e6e6fa;
}

.b-dark-purple {
    background-color: #4b0082;
}
.b-darker-red{
    background-color: #820036;
}
.b-light-pink {
    background-color: #ffb6c1;
}

.b-dark-pink {
    background-color: #ff1493;
}

/* UX Design Background Colors */
.b-primary {
    background-color: #007bff;
}

/* Blue (Primary) */
.b-secondary {
    background-color: #6c757d;
}

/* Grey (Secondary) */
.b-success {
    background-color: #28a745;
}

/* Green (Success) */
.b-danger {
    background-color: #dc3545;
}

/* Red (Danger) */
.b-warning {
    background-color: #ffc107;
}

/* Yellow (Warning) */
.b-info {
    background-color: #17a2b8;
}

/* Teal (Info) */
.b-light {
    background-color: #f8f9fa;
}

/* Light background */
.b-dark {
    background-color: #343a40;
}

/* Dark background */
.b-muted {
    background-color: #6c757d;
}
.b-muted-2 {
    background-color: #7d746c;
}

/* Muted background */
.b-white-smoke {
    background-color: #f5f5f5;
}

/* White smoke */
.b-gainsboro {
    background-color: #dcdcdc;
}

/* Gainsboro */
.b-silver {
    background-color: #c0c0c0;
}

/* Silver */
.b-charcoal {
    background-color: #36454f;
}

/* Charcoal */
.b-teal {
    background-color: #008080;
}

/* Teal */
.b-cyan {
    background-color: #00ffff;
}

/* Cyan */
.b-coral {
    background-color: #ff7f50;
}

/* Coral */
.b-turquoise {
    background-color: #40e0d0;
}

/* Turquoise */
.b-light-coral {
    background-color: #f08080;
}

/* Light Coral */
.b-deep-sky-blue {
    background-color: #00bfff;
}

/* Deep Sky Blue */
.b-light-sea-green {
    background-color: #20b2aa;
}

/* Light Sea Green */
.b-salmon {
    background-color: #fa8072;
}

/* Salmon */
/* Border Radius Classes */
.b-radius-5 {
    border-radius: 5px;
}

.b-radius-10 {
    border-radius: 10px;
}

.b-radius-15 {
    border-radius: 15px;
}

.b-radius-20 {
    border-radius: 20px;
}

.b-radius-25 {
    border-radius: 25px;
}

.b-radius-30 {
    border-radius: 30px;
}

.b-radius-35 {
    border-radius: 35px;
}

.b-radius-40 {
    border-radius: 40px;
}

.b-radius-45 {
    border-radius: 45px;
}

.b-radius-50 {
    border-radius: 50px;
}

.b-radius-55 {
    border-radius: 55px;
}

.b-radius-60 {
    border-radius: 60px;
}

.b-radius-65 {
    border-radius: 65px;
}

.b-radius-70 {
    border-radius: 70px;
}

.b-radius-75 {
    border-radius: 75px;
}

.b-radius-80 {
    border-radius: 80px;
}

.b-radius-85 {
    border-radius: 85px;
}

.b-radius-90 {
    border-radius: 90px;
}

.b-radius-95 {
    border-radius: 95px;
}

.b-radius-100 {
    border-radius: 100px;
}