/* imports */
/* @import url('./cssanimation.css'); */
@import url('./animate.css');

/* root */
:root{
  /* ===== PRIMARY HSL (UPDATE THIS FIRST) ===== */
  --primary-hsl:144;
  
  /* ===== SECONDARY HSL (UPDATE THIS FIRST) ===== */
  --secondary-hsl:23;
  
  /* ===== RGB VALUES (UPDATE THESE FIRST) ===== */
  --rgt:255,255,255;
  --rgb:0, 0, 0;
  --primary-rgb:27, 126, 67;
  --primary-text-rgb:255, 255, 255;
  --secondary-rgb:244, 115, 33;
  --bg-light-rgb:17, 17, 17;

  
  /* ===== BACKGROUND COLORS ===== */
  --bg:rgb(var(--rgb));
  --bg-light:#111;
  --bg-lighter:#333;
  --bg-dim:rgb(231, 231, 231,0.5);
  
  /* ===== TEXT COLORS ===== */
  --text:rgb(var(--rgt));
  --primary-text:rgb(var(--primary-text-rgb));
  
  /* ===== BORDER RADIUS ===== */
  --br-primary:10px;
  
  /* ===== FONTS ===== */
  --font:'Vite Sans Display';
  
  /* ===== PRIMARY COLORS ===== */
  --primary:hsl(var(--primary-hsl),65%,30%);
  --primary-light:hsl(var(--primary-hsl),85%,30%);
  --primary-lighter:hsl(var(--primary-hsl),100%,30%);
  --primary-dark:hsl(var(--primary-hsl),100%,20%);
  --primary-darker:hsl(var(--primary-hsl),100%,10%);
  
  /* ===== SECONDARY COLORS (Using HSL with RGB fallback) ===== */
  --secondary:hsl(var(--secondary-hsl),91%,54%);
  --secondary-light:hsl(var(--secondary-hsl),50%,70%);
  --secondary-dark:hsl(var(--secondary-hsl),50%,30%);
  --secondary-darker:hsl(var(--secondary-hsl),50%,15%);
  --secondary-lighter:hsl(var(--secondary-hsl),50%,80%);
  --secondary-text:white;
  
  /* ===== SECONDARY TRANSPARENT VARIANTS (Using RGB) ===== */
  --secondary-001:rgba(var(--secondary-rgb),0.01);
  --secondary-002:rgba(var(--secondary-rgb),0.02);
  --secondary-003:rgba(var(--secondary-rgb),0.03);
  --secondary-004:rgba(var(--secondary-rgb),0.04);
  --secondary-005:rgba(var(--secondary-rgb),0.05);
  --secondary-006:rgba(var(--secondary-rgb),0.06);
  --secondary-007:rgba(var(--secondary-rgb),0.07);
  --secondary-008:rgba(var(--secondary-rgb),0.08);
  --secondary-009:rgba(var(--secondary-rgb),0.09);
  --secondary-01:rgba(var(--secondary-rgb),0.1);
  --secondary-02:rgba(var(--secondary-rgb),0.2);
  --secondary-03:rgba(var(--secondary-rgb),0.3);
  --secondary-04:rgba(var(--secondary-rgb),0.4);
  --secondary-05:rgba(var(--secondary-rgb),0.5);
  --secondary-06:rgba(var(--secondary-rgb),0.6);
  --secondary-07:rgba(var(--secondary-rgb),0.7);
  --secondary-08:rgba(var(--secondary-rgb),0.8);
  --secondary-09:rgba(var(--secondary-rgb),0.9);
  --secondary-10:rgb(var(--secondary-rgb));
  
  /* ===== SECONDARY TEXT TRANSPARENT VARIANTS ===== */
  --secondary-text-rgb:255,255,255;
  --secondary-text-001:rgba(var(--secondary-text-rgb),0.01);
  --secondary-text-002:rgba(var(--secondary-text-rgb),0.02);
  --secondary-text-003:rgba(var(--secondary-text-rgb),0.03);
  --secondary-text-004:rgba(var(--secondary-text-rgb),0.04);
  --secondary-text-005:rgba(var(--secondary-text-rgb),0.05);
  --secondary-text-006:rgba(var(--secondary-text-rgb),0.06);
  --secondary-text-007:rgba(var(--secondary-text-rgb),0.07);
  --secondary-text-008:rgba(var(--secondary-text-rgb),0.08);
  --secondary-text-009:rgba(var(--secondary-text-rgb),0.09);
  --secondary-text-01:rgba(var(--secondary-text-rgb),0.1);
  --secondary-text-02:rgba(var(--secondary-text-rgb),0.2);
  --secondary-text-03:rgba(var(--secondary-text-rgb),0.3);
  --secondary-text-04:rgba(var(--secondary-text-rgb),0.4);
  --secondary-text-05:rgba(var(--secondary-text-rgb),0.5);
  --secondary-text-06:rgba(var(--secondary-text-rgb),0.6);
  --secondary-text-07:rgba(var(--secondary-text-rgb),0.7);
  --secondary-text-08:rgba(var(--secondary-text-rgb),0.8);
  --secondary-text-09:rgba(var(--secondary-text-rgb),0.9);
  --secondary-text-10:rgb(var(--secondary-text-rgb));
  
  /* ===== PRIMARY TRANSPARENT VARIANTS ===== */
  --primary-001:rgba(var(--primary-rgb),0.01);
  --primary-002:rgba(var(--primary-rgb),0.02);
  --primary-003:rgba(var(--primary-rgb),0.03);
  --primary-004:rgba(var(--primary-rgb),0.04);
  --primary-005:rgba(var(--primary-rgb),0.05);
  --primary-006:rgba(var(--primary-rgb),0.06);
  --primary-007:rgba(var(--primary-rgb),0.07);
  --primary-008:rgba(var(--primary-rgb),0.08);
  --primary-009:rgba(var(--primary-rgb),0.09);
  --primary-01:rgba(var(--primary-rgb),0.1);
  --primary-02:rgba(var(--primary-rgb),0.2);
  --primary-03:rgba(var(--primary-rgb),0.3);
  --primary-04:rgba(var(--primary-rgb),0.4);
  --primary-05:rgba(var(--primary-rgb),0.5);
  --primary-06:rgba(var(--primary-rgb),0.6);
  --primary-07:rgba(var(--primary-rgb),0.7);
  --primary-08:rgba(var(--primary-rgb),0.8);
  --primary-09:rgba(var(--primary-rgb),0.9);
  --primary-10:rgb(var(--primary-rgb));
  
  /* ===== PRIMARY TEXT TRANSPARENT VARIANTS ===== */
  --primary-text-001:rgba(var(--primary-text-rgb),0.01);
  --primary-text-002:rgba(var(--primary-text-rgb),0.02);
  --primary-text-003:rgba(var(--primary-text-rgb),0.03);
  --primary-text-004:rgba(var(--primary-text-rgb),0.04);
  --primary-text-005:rgba(var(--primary-text-rgb),0.05);
  --primary-text-006:rgba(var(--primary-text-rgb),0.06);
  --primary-text-007:rgba(var(--primary-text-rgb),0.07);
  --primary-text-008:rgba(var(--primary-text-rgb),0.08);
  --primary-text-009:rgba(var(--primary-text-rgb),0.09);
  --primary-text-01:rgba(var(--primary-text-rgb),0.1);
  --primary-text-02:rgba(var(--primary-text-rgb),0.2);
  --primary-text-03:rgba(var(--primary-text-rgb),0.3);
  --primary-text-04:rgba(var(--primary-text-rgb),0.4);
  --primary-text-05:rgba(var(--primary-text-rgb),0.5);
  --primary-text-06:rgba(var(--primary-text-rgb),0.6);
  --primary-text-07:rgba(var(--primary-text-rgb),0.7);
  --primary-text-08:rgba(var(--primary-text-rgb),0.8);
  --primary-text-09:rgba(var(--primary-text-rgb),0.9);
  --primary-text-10:rgb(var(--primary-text-rgb));
  
  /* ===== RGB BACKGROUND TRANSPARENT VARIANTS ===== */
  --rgb-001:rgba(var(--rgb),0.01);
  --rgb-002:rgba(var(--rgb),0.02);
  --rgb-003:rgba(var(--rgb),0.03);
  --rgb-004:rgba(var(--rgb),0.04);
  --rgb-005:rgba(var(--rgb),0.05);
  --rgb-006:rgba(var(--rgb),0.06);
  --rgb-007:rgba(var(--rgb),0.07);
  --rgb-08:rgba(var(--rgb),0.08);
  --rgb-009:rgba(var(--rgb),0.09);
  --rgb-01:rgba(var(--rgb),0.1);
  --rgb-02:rgba(var(--rgb),0.2);
  --rgb-03:rgba(var(--rgb),0.3);
  --rgb-04:rgba(var(--rgb),0.4);
  --rgb-05:rgba(var(--rgb),0.5);
  --rgb-06:rgba(var(--rgb),0.6);
  --rgb-07:rgba(var(--rgb),0.7);
  --rgb-08:rgba(var(--rgb),0.8);
  --rgb-09:rgba(var(--rgb),0.9);
  --rgb-10:rgb(var(--rgb));
  
  /* ===== RGT TEXT TRANSPARENT VARIANTS ===== */
  --rgt-001:rgba(var(--rgt),0.01);
  --rgt-002:rgba(var(--rgt),0.02);
  --rgt-003:rgba(var(--rgt),0.03);
  --rgt-004:rgba(var(--rgt),0.04);
  --rgt-005:rgba(var(--rgt),0.05);
  --rgt-006:rgba(var(--rgt),0.06);
  --rgt-007:rgba(var(--rgt),0.07);
  --rgt-08:rgba(var(--rgt),0.08);
  --rgt-009:rgba(var(--rgt),0.09);
  --rgt-01:rgba(var(--rgt),0.1);
  --rgt-02:rgba(var(--rgt),0.2);
  --rgt-03:rgba(var(--rgt),0.3);
  --rgt-04:rgba(var(--rgt),0.4);
  --rgt-05:rgba(var(--rgt),0.5);
  --rgt-06:rgba(var(--rgt),0.6);
  --rgt-07:rgba(var(--rgt),0.7);
  --rgt-08:rgba(var(--rgt),0.8);
  --rgt-09:rgba(var(--rgt),0.9);
  --rgt-10:rgb(var(--rgt));
  
  /* ===== Z-INDEX VARIABLES ===== */
  --z-index-low:3000;
  --z-index-average:5000;
  --z-index-high:7000;
  --z-index-highest:10000;
  
  /* ===== GRADIENTS ===== */
  --gradient:linear-gradient(to right,var(--primary),var(--primary-dark));
  --text-gradient:linear-gradient(to right,rgb(108,92,230),aqua);
  --green-gradient:linear-gradient(to bottom left,greenyellow,var(--green),var(--green));
  
  /* ===== COLORS ===== */
  --green:#4caf50;
  --dark-gold:#554c19;
  --btn-text:white;
 
}


html,body, .html-body {
    margin:0;
    padding:0;
    font-size:17px;
   touch-action: pan-x pan-y !important;

}
body{
    display:flex;
    flex-direction:column;
    min-height:100vh;
    font-family:var(--font), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    overflow:auto;
    font-size:0.8rem;
    color:var(--text);
    background:var(--bg);
    word-break:break-word;
    width:100vw;
    max-width:100vw;
    overflow-x:hidden;
    letter-spacing:0.1px;
}
/* class card */
[vitecss-glass]{
    position:relative;
    background:var(--rgt-001);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

            &::before{
                content:'';
                position:absolute;
                inset:0;
                background:linear-gradient(rgba(255,255,255,0.5),transparent,rgba(255,255,255,0.5));
                padding:1px;
                mask:linear-gradient(to bottom right,white 0,white 0) content-box,linear-gradient(to bottom right,white 0,white 0);
                -webkit-mask:linear-gradient(to bottom right,white 0,white 0) content-box,linear-gradient(to bottom right,white 0,white 0);
                mask-composite: exclude;
                -webkit-mask-composite:xor;
            }

}
/* custom marquee */
/* Initial position - at right extreme end (100% translation) */
[vitecss-marquee] > div:not([vitecss-marquee-check] > div) {
    transform: translateX(100vw);
}
/* Just add this to your CSS file */
[vitecss-marquee] {
    position: relative;
    overflow: hidden;
}

[vitecss-marquee][vitecss-marquee-smoke]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(90deg, 
        rgba(var(--rgb), 0.95) 0%,
        rgba(var(--rgb), 0) 100%
    );
    z-index: 10;
    pointer-events: none;
}

[vitecss-marquee][vitecss-marquee-smoke]::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(270deg, 
        rgba(var(--rgb), 0.95) 0%,
        rgba(var(--rgb), 0) 100%
    );
    z-index: 10;
    pointer-events: none;
}
.cont, .container-input {
    width:100%;
    height:50px;
    border:1px solid var(--rgt-02);
    border-radius:5px;
    display:flex;
    flex-direction:row;
    align-items:center;
    overflow:hidden;
    background:transparent;
    padding:0;
}
.cont svg, .container-input svg {
    fill:#708090 !important;
}


.cont:has(textarea), .container-input:has(textarea) {
    min-height:200px !important;
}
.cont .inp, .container-input .input-field {
    width:100%;
    height:100%;
    border:none;
    background:transparent;
    border-radius:inherit;

}
.cont svg, .container-input svg {
    color:var(--primary);
}

.vite-loader {
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    background:rgba(0,122,255, 0);
    height:2px;
    z-index:6000;
    overflow:hidden;
   
}
.vite-loader .child {
    /* position:absolute; */
    /* left:0; */
    height:100%;
    width:0%;
    background:rgb(0,125,255);
    transition:all 0.3s ease;
    border-radius:0 1000px 1000px 0;
   
}

span, .span {
    word-break: keep-all;
}
.cont:has(input:focus), .container-input:has(input:focus) {
    border-color:var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-01);
}
svg, .svg-icon {
    flex-shrink: 0;
}
.no-shrink, .flex-shrink-none {
    flex-shrink:0;
}
main, .main-content {
    display:flex;
    flex-direction:column;
    flex:1 0 auto;
    padding:20px;
    height:fit-content;
    overflow-x:hidden;
  
}
.empty-record svg, .empty-state svg {
    height:50px;
    width:50px;
}
.action-loader svg, .loading-spinner svg {
    height:50px;
    width:50px;
}
.loading-state, .app-loader {
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background:var(--bg);
    color:var(--primary);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
    text-align:center;
    z-index:1000000;
}
.loading-state svg, .app-loader svg {
    height:100px;
    width:100px;
}
body:has(.loading-state), body:has(.app-loader) {
    overflow:hidden;
    user-select:none;
    overflow:hidden;
    touch-action:none;
    -webkit-user-select: none;
}
.opacity-transparent, .opacity-0, .opacity-none {
    opacity:0;
}
.opacity-01 { opacity:0.1; }
.opacity-02 { opacity:0.2; }
.opacity-03 { opacity:0.3; }
.opacity-04 { opacity:0.4; }
.opacity-05 { opacity:0.5; }
.opacity-06 { opacity:0.6; }
.opacity-07 { opacity:0.7; }
.opacity-08 { opacity:0.8; }
.opacity-09 { opacity:0.9; }
.opacity-1, .opacity-full { opacity:1; }
.placeholder-bold::placeholder, .placeholder-bold::placeholder {
            font-weight: bold;
        }
/* notify */
.notify, .notification {
    position:fixed;
    top:0;
    right:0;
    width:70%;
    z-index:var(--z-index-high);
   margin:10px 10px 10px 20%;
   background:#161616;
    display:flex;
    border-radius:5px;
    flex-direction:column;
    align-items:center;
    gap:5px;
    color:var(--text);
    /* clip-path:inset(0 round 10px); */
    animation:come-in 0.5s ease forwards;
    user-select: none;
    max-width:500px;
    /* border:0.5px solid; */
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    box-shadow:0 0px 10px rgba(0,0,0,0.1);
    /* padding:10px; */
    
    
}
@keyframes come-in{
    0%{
        transform:translateX(100%)
    }
    25%{
        transform:translateX(0%)
    }
    50%{
        transform:translateX(2%)
    }
    100%{
        transform:translateX(0%);
    }
}
@keyframes absolute-in-from-right{
    0%{
        right:-100%;
    }
    100%{
        right:0;
    }
}
@keyframes absolute-in-from-left{
    0%{
        left:-100%;
    }
    100%{
        left:0;
    }
}

.notify .notify-body .close, .notification .notification-body .close {
    min-height:20px;
    min-width:20px;
    max-height:20px;
    max-width:20px;
    background-position:center;
    background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22white%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M204.24%2C195.76a6%2C6%2C0%2C1%2C1-8.48%2C8.48L128%2C136.49%2C60.24%2C204.24a6%2C6%2C0%2C0%2C1-8.48-8.48L119.51%2C128%2C51.76%2C60.24a6%2C6%2C0%2C0%2C1%2C8.48-8.48L128%2C119.51l67.76-67.75a6%2C6%2C0%2C0%2C1%2C8.48%2C8.48L136.49%2C128Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
}
.notify .notify-status, .notification .notification-status {
    font-size:0.9rem;
    font-weight:600;
}

.notify.success, .notification.success {
    border-left:5px solid #4caf50;

            .notify-symbol, .notification-symbol {
                color:#4caf50;
            }
   
}
.notify.success .body .icon, .notification.success .body .icon {
   min-height:32px;
    max-height:32px;
    aspect-ratio:1;
    background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22%23ffffff%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M128%2C24A104%2C104%2C0%2C1%2C0%2C232%2C128%2C104.11%2C104.11%2C0%2C0%2C0%2C128%2C24Zm45.66%2C85.66-56%2C56a8%2C8%2C0%2C0%2C1-11.32%2C0l-24-24a8%2C8%2C0%2C0%2C1%2C11.32-11.32L112%2C148.69l50.34-50.35a8%2C8%2C0%2C0%2C1%2C11.32%2C11.32Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');


}
.notify.error, .notification.error {
     border-left:5px solid red;

            .notify-symbol, .notification-symbol {
                color:red;
            }
   
}
.notify.info, .notification.info {
     border-left:5px solid rgb(0, 140, 255);

            .notify-symbol, .notification-symbol {
                color:rgb(0, 174, 255);
            }
   
}
.notify.warning, .notification.warning {
     border-left:5px solid goldenrod;

            .notify-symbol, .notification-symbol {
                color:goldenrod;
            }
   
}
.notify.error .body .icon, .notification.error .body .icon {
   min-height:32px;
    max-height:32px;
    aspect-ratio:1;
    background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22%23ffffff%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M128%2C24A104%2C104%2C0%2C1%2C0%2C232%2C128%2C104.11%2C104.11%2C0%2C0%2C0%2C128%2C24Zm37.66%2C130.34a8%2C8%2C0%2C0%2C1-11.32%2C11.32L128%2C139.31l-26.34%2C26.35a8%2C8%2C0%2C0%2C1-11.32-11.32L116.69%2C128%2C90.34%2C101.66a8%2C8%2C0%2C0%2C1%2C11.32-11.32L128%2C116.69l26.34-26.35a8%2C8%2C0%2C0%2C1%2C11.32%2C11.32L139.31%2C128Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
    

}
/* IMG */
img, .image {
    object-fit:cover;
    object-position: center;
}
@keyframes absolute-trans-out{
    0%{
        left:0;

    }
    100%{
        left:-100%;
    }
}
.paginate, .pagination {
    width:100%;
    display:flex;
    flex-direction: row;
    align-items:center;
    justify-content:flex-end;
    grid-column: 1 / -1;
   

}
.paginate .action-btn, .pagination .action-btn {
    width:40px;
    aspect-ratio:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-shrink: 0;
    border:1px solid var(--rgt-01);
    background:var(--bg-light);
    color:var(--text);
    user-select:none;
    border-radius:10px;
    cursor:pointer;
    overflow:hidden;
    font-weight:600;

}
.action-btn.disabled, .action-btn.btn-disabled {
    pointer-events: none;
}
.paginate .action-btn.current, .pagination .action-btn.current {
    border:none;
    background:var(--primary);
    color:var(--primary-text);

}
/* duotone */
.duotone-primary, .duo-primary {
    background:var(--primary-transparent);
    color:var(--primary);
}
.duotone-red, .duo-red {
    background:rgba(255,0,0,0.2);
    color:red;
}
.duotone-gold, .duo-gold {
    background:rgba(255, 217, 0, 0.2);
    color:#ffd700;
}
.duotone-green, .duo-green {
    background:rgba(0,255,0,0.2);
    color:var(--green);
}
.bg-image, .background-image {
    background-size:cover;
    background-position: center;
   
}
.photo, .avatar {
    min-height:40px;
    max-height:40px;
    background-size:cover;
    background-position:center;
    min-width:40px;
    max-width:40px;
    border-radius:50%;
}
.bg-primary-gradient, .bg-gradient-primary {
    background:var(--gradient) !important;
}
hr, .divider {
    height:1px;
    width:100%;
    border:none;
    background:var(--rgt-01);
}
hr.gradient, .divider.gradient {
    background:linear-gradient(to right,transparent,var(--primary),transparent);
    height:1px;
}
.hr, .divider-custom {
    height:1px;
    width:100%;
    background:transparent;
    --hr-color:var(--rgt-01);
    --hr-height:1px;
}
            .hr[vitecss-type=dotted], .divider-custom[vitecss-type=dotted] {
             border-top:var(--hr-height) dotted var(--hr-color);

            }
             .hr[vitecss-type=solid], .divider-custom[vitecss-type=solid] {
             border-top:var(--hr-height) solid var(--hr-color);

            }
           .hr[vitecss-type=dashed], .divider-custom[vitecss-type=dashed] {
             border-top:var(--hr-height) dashed var(--hr-color);

            }
*{
    box-sizing:border-box;
    outline:none;
}
.break-word, .word-break-all {
    word-break:break-all;
}
.btn, input, select, textarea, button, .button {
    font-family:var(--font);
    

}
button, .btn-element {
    font-size:0.9rem;
}

input, select, textarea, .input, .select, .textarea {
    color:var(--text);
    font-size:0.8rem;
}

input::placeholder, .inp::placeholder, .input::placeholder {
    color:var(--rgt);
    font-weight:500 !important;
    opacity:0.5
}
input, .input-element {
    caret-color:var(--primary);
}
input.empty, select.empty, .cont.empty, .input.empty, .select.empty, .container-input.empty {
    border:1px solid red !important;
    box-shadow:var(--box-shadow-red) !important;
    animation:vibrate 0.2s linear !important;
    
}
.placeholder-c-white::placeholder, .placeholder-white::placeholder {
    color:white;
}


@keyframes vibrate{
    0%,50%,100%{
        transform:translateX(-5px);
    }
    25%,75%{
        transform:translateX(5px);
    }
}
.overflow-hidden, .overflow-hide {
    overflow:hidden !important;
}
.overflow-x-auto, .overflow-x-scroll {
    overflow-x:auto;
    
}
.overflow-y-auto, .overflow-y-scroll {
    overflow-y: auto;
}
.overflow-auto, .overflow-scroll-auto {
    overflow:auto;
}
.overflow-visible, .overflow-show {
    overflow:visible;
}
.overflow-scroll, .overflow-scroll-all {
    overflow:scroll;
}
.overflow-none, .overflow-no {
    overflow:none;
}
input, textarea, select, .input-field, .textarea-field, .select-field {
    padding:10px;
}
.spa-loader, .page-loader {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
    margin:auto auto;
    color:var(---text);
}
.spa-loader svg, .page-loader svg {
    height:100px;
    width:100px;
    fill:currentColor;
}

/* ===== ADDITIONAL UTILITIES ===== */

/* Flex Utilities */
.flex { display: flex; }
.flex-row { display: flex; flex-direction: row; }
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-around { display: flex; align-items: center; justify-content: space-around; }
.flex-evenly { display: flex; align-items: center; justify-content: space-evenly; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1 { flex: 1; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }
.flex-grow { flex-grow: 1; }
.flex-shrink { flex-shrink: 1; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.items-baseline { align-items: baseline; }
.justify-center { justify-content: center; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }

/* Position Utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.static { position: static; }

/* Display Utilities */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }
.d-inline-grid { display: inline-grid; }
.d-table { display: table; }
.d-table-cell { display: table-cell; }
.d-table-row { display: table-row; }

/* Text Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }
.text-underline { text-decoration: underline; }
.text-line-through { text-decoration: line-through; }
.text-no-underline { text-decoration: none; }
.text-bold, .fw-bold { font-weight: 700; }
.text-semibold, .fw-semibold { font-weight: 600; }
.text-medium, .fw-medium { font-weight: 500; }
.text-normal, .fw-normal { font-weight: 400; }
.text-light, .fw-light { font-weight: 300; }
.text-thin, .fw-thin { font-weight: 100; }
.text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.text-clip { white-space: nowrap; overflow: hidden; text-overflow: clip; }
.text-wrap { white-space: normal; }
.text-nowrap { white-space: nowrap; }
.text-pre { white-space: pre; }
.text-pre-line { white-space: pre-line; }
.text-pre-wrap { white-space: pre-wrap; }
.text-break { word-break: break-word; }
.text-muted { color: #6c757d; }

/* Font Size Utilities */
.fs-1 { font-size: 0.1rem; }
.fs-2 { font-size: 0.2rem; }
.fs-3 { font-size: 0.3rem; }
.fs-4 { font-size: 0.4rem; }
.fs-5 { font-size: 0.5rem; }
.fs-6 { font-size: 0.6rem; }
.fs-7 { font-size: 0.7rem; }
.fs-8 { font-size: 0.8rem; }
.fs-9 { font-size: 0.9rem; }
.fs-10 { font-size: 1rem; }
.fs-11 { font-size: 1.1rem; }
.fs-12 { font-size: 1.2rem; }
.fs-13 { font-size: 1.3rem; }
.fs-14 { font-size: 1.4rem; }
.fs-15 { font-size: 1.5rem; }
.fs-16 { font-size: 1.6rem; }
.fs-17 { font-size: 1.7rem; }
.fs-18 { font-size: 1.8rem; }
.fs-19 { font-size: 1.9rem; }
.fs-20 { font-size: 2rem; }
.fs-21 { font-size: 2.1rem; }
.fs-22 { font-size: 2.2rem; }
.fs-23 { font-size: 2.3rem; }
.fs-24 { font-size: 2.4rem; }
.fs-25 { font-size: 2.5rem; }

/* Width Utilities */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-50 { width: 50%; }
.w-33 { width: 33.333%; }
.w-25 { width: 25%; }
.w-75 { width: 75%; }
.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-30 { width: 30%; }
.w-40 { width: 40%; }
.w-60 { width: 60%; }
.w-70 { width: 70%; }
.w-80 { width: 80%; }
.w-90 { width: 90%; }

/* Height Utilities */
.h-full { height: 100%; }
.h-auto { height: auto; }
.h-50 { height: 50%; }
.h-33 { height: 33.333%; }
.h-25 { height: 25%; }
.h-75 { height: 75%; }
.h-screen { height: 100vh; }
.min-h-screen { min-height: 100vh; }
.max-h-screen { max-height: 100vh; }

/* Margin Utilities - shorthand */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 0.75rem; }
.m-4 { margin: 1rem; }
.m-5 { margin: 1.25rem; }
.m-6 { margin: 1.5rem; }
.m-8 { margin: 2rem; }
.m-10 { margin: 2.5rem; }
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }
.ml-4 { margin-left: 1rem; }
.ml-5 { margin-left: 1.25rem; }
.ml-6 { margin-left: 1.5rem; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mr-4 { margin-right: 1rem; }
.mr-5 { margin-right: 1.25rem; }
.mr-6 { margin-right: 1.5rem; }

/* Padding Utilities - shorthand */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pt-5 { padding-top: 1.25rem; }
.pt-6 { padding-top: 1.5rem; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-5 { padding-bottom: 1.25rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pl-1 { padding-left: 0.25rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-3 { padding-left: 0.75rem; }
.pl-4 { padding-left: 1rem; }
.pl-5 { padding-left: 1.25rem; }
.pl-6 { padding-left: 1.5rem; }
.pr-1 { padding-right: 0.25rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-3 { padding-right: 0.75rem; }
.pr-4 { padding-right: 1rem; }
.pr-5 { padding-right: 1.25rem; }
.pr-6 { padding-right: 1.5rem; }

/* Border Radius Utilities - shorthand */
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: 0.125rem; }
.rounded { border-radius: 0.25rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }

/* Shadow Utilities */
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.shadow-md { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,0.1); }
.shadow-xl { box-shadow: 0 20px 25px rgba(0,0,0,0.1); }
.shadow-2xl { box-shadow: 0 25px 50px rgba(0,0,0,0.25); }

/* Cursor Utilities */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-wait { cursor: wait; }
.cursor-text { cursor: text; }
.cursor-move { cursor: move; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }
.cursor-zoom-in { cursor: zoom-in; }
.cursor-zoom-out { cursor: zoom-out; }

/* Pointer Events */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* User Select */
.select-none { user-select: none; -webkit-user-select: none; }
.select-all { user-select: all; -webkit-user-select: all; }
.select-auto { user-select: auto; -webkit-user-select: auto; }
.select-text { user-select: text; -webkit-user-select: text; }

/* Z-Index Utilities */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-auto { z-index: auto; }
.z-999 { z-index: 999; }
.z-9999 { z-index: 9999; }

/* Visibility */
.visible { visibility: visible; }
.invisible { visibility: hidden; }
/* button */
button.active *:not(.svg-loader):not(.svg-loader *){
   
   display:none;

}
button.active .svg-loader{
    color:inherit;
}
button.active .svg-loader svg{
  
    height:var(--size);
    width:var(--size);
    fill:currentColor;

}

button.active, .btn-active {
    pointer-events:none;
}
button.disabled, .btn-disabled {
    filter:grayscale(50%);
    pointer-events:none;
}

.btn-primary{
    height:fit-content;
    width:fit-content;
    background:var(--primary);
    border:none;
    border-radius:10px;
    color:var(--primary-text);
    font-family:var(--font);
    user-select:none;
    clip-path: inset(0 round 10px);
    cursor:pointer;
    padding:10px;
    font-weight:600;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap:10px;
    font-family: var(--font);
    --background:var(--primary);
     --height:20px;
     --size:0.8rem;
    
}

.btn-primary-3d{
    height:fit-content;
    width:fit-content;
    background:var(--primary);
    --background:var(--primary);
    border:none;
    border-radius:5px;
    color:var(--primary-text);
    font-family:var(--font);
    user-select:none;
    clip-path: inset(0 round 5px);
    cursor:pointer;
    padding:10px;
    font-weight:600;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap:10px;
    font-family: var(--font);
    border-bottom:4px solid hsl(var(--primary-hsl),50%,30%);
    --height:20px;
    --size:0.8rem;
}
.btn-blue-3d{
    height:fit-content;
    width:fit-content;
    background:blue;
    border:none;
    border-radius:5px;
    color:white;
    font-family:var(--font);
    user-select:none;
    clip-path: inset(0 round 5px);
    cursor:pointer;
    padding:10px;
    font-weight:600;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap:10px;
    font-family: var(--font);
    border-bottom:4px solid navy;
     --height:20px;
     --size:0.8rem;
}
.btn-red{
    height:fit-content;
    width:fit-content;
    background:red;
     --background:red;
    border:none;
    border-radius:5px;
    color:white;
    font-family:var(--font);
    user-select:none;
    clip-path: inset(0 round 5px);
    cursor:pointer;
    padding:10px;
    font-weight:600;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap:10px;
    font-family: var(--font);
    --size:0.8rem;

}

.btn-green{
    height:fit-content;
    width:fit-content;
    background:var(--green);
    --background:var(--green);
    border:none;
    border-radius:5px;
    color:white;
    font-family:var(--font);
    user-select:none;
    clip-path: inset(0 round 5px);
    cursor:pointer;
    padding:10px;
    font-weight:600;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap:10px;
    font-family:var(--font);
     --height:20px;
     --size:0.8rem;
    
}
.btn-green-3d{
    height:fit-content;
    width:fit-content;
    background:#5cd861;
    border:none;
    border-radius:5px;
    color:white;
    font-family:var(--font);
    user-select:none;
    clip-path: inset(0 round 5px);
    cursor:pointer;
    padding:10px;
    font-weight:600;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap:10px;
    font-family:var(--font);
    border-bottom:4px solid green;
    color:white;
     --height:20px;
     --size:0.8rem;
    
}
.btn-red-3d{
    height:fit-content;
    width:fit-content;
    background:coral;
    border:none;
    border-radius:5px;
    color:white;
    font-family:var(--font);
    user-select:none;
    clip-path: inset(0 round 5px);
    cursor:pointer;
    padding:10px;
    font-weight:600;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap:10px;
    font-family:var(--font);
    border-bottom:4px solid red;
     --height:20px;
     --size:0.8rem;
   
    
}
.btn-gold-3d{
    height:fit-content;
    width:fit-content;
    background:gold;
    --background:gold;
    border:none;
    border-radius:5px;
    color:black;
    font-family:var(--font);
    user-select:none;
    clip-path: inset(0 round 5px);
    cursor:pointer;
    padding:10px;
    font-weight:600;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap:10px;
    font-family:var(--font);
    border-bottom:2px solid #4d4209;
     --height:20px;
     --size:0.8rem;
   
    
}
.btn-gold{
    height:fit-content;
    width:fit-content;
    background:#ffd700;
    border:none;
    border-radius:5px;
    color:black;
    font-family:var(--font);
    user-select:none;
    clip-path: inset(0 round 5px);
    cursor:pointer;
    padding:10px;
    font-weight:600;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap:10px;
    font-family:var(--font);
    --size:0.8rem;
    
}
.btn-blue{
    height:fit-content;
    width:fit-content;
    background:blue;
    border:none;
    border-radius:5px;
    color:white;
    font-family:var(--font);
    user-select:none;
    clip-path: inset(0 round 5px);
    cursor:pointer;
    padding:10px;
    font-weight:600;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap:10px;
    font-family:var(--font);
    --size:0.8rem;
    
}
.btn{
    width:100%;
    max-width:500px;
    background:var(--primary);
    color:var(--primary-text);
    height:50px;
    border-radius:10px;
    user-select:none;
    clip-path:inset(0 round 10px);
    cursor:pointer;
    font-weight:bold;
    border:none;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:5px;
    font-family:var(--font);


}
.btn.disabled, .btn.btn-disabled {
    pointer-events: none;
    filter:grayscale(100%);
}
.btn-border{
     width:100%;
    max-width:500px;
    background:var(--bg);
    color:var(--text);
    height:50px;
    border-radius:5px;
    user-select:none;
    clip-path:inset(0 round 5px);
    cursor:pointer;
    font-weight:bold;
    border:1px solid var(--primary);
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:5px;
    color:var(--primary);
    font-family:var(--font);
    --size:0.8rem;

}
.btn-red-border{
     width:100%;
    max-width:500px;
    background:var(--bg);
    color:var(--text);
    height:50px;
    border-radius:5px;
    user-select:none;
    clip-path:inset(0 round 5px);
    cursor:pointer;
    font-weight:bold;
    border:1px solid red;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:5px;
    color:red;
    font-family:var(--font);
    --size:0.8rem;

}
.btn-green-border{
     width:100%;
    max-width:500px;
    background:var(--bg);
    color:var(--text);
    height:50px;
    border-radius:5px;
    user-select:none;
    clip-path:inset(0 round 5px);
    cursor:pointer;
    font-weight:bold;
    border:1px solid var(--green);
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:5px;
    color:var(--green);
    font-family: var(--font);
    --size:0.8rem;

}
.btn-primary-border{
     width:100%;
    max-width:500px;
    background:var(--bg);
    color:var(--text);
    height:50px;
    border-radius:5px;
    user-select:none;
    clip-path:inset(0 round 5px);
    cursor:pointer;
    font-weight:bold;
    border:1px solid var(--primary);
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:5px;
    color:var(--primary);
    font-family: var(--font);
    --size:0.8rem;

}
.btn-gold-border{
     width:100%;
    max-width:500px;
    background:var(--bg);
    color:var(--text);
    height:50px;
    border-radius:5px;
    user-select:none;
    clip-path:inset(0 round 5px);
    cursor:pointer;
    font-weight:bold;
    border:1px solid #ffd700;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:5px;
    color:#ffd700;
    font-family:var(--font);
    --size:0.8rem;

}
.btn-blue-border{
     width:100%;
    max-width:500px;
    background:var(--bg);
    color:var(--text);
    height:50px;
    border-radius:5px;
    user-select:none;
    clip-path:inset(0 round 5px);
    cursor:pointer;
    font-weight:bold;
    border:1px solid blue;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:5px;
    color:blue;
    font-family:var(--font);
    --size:0.8rem;

}
button.post{
    width:100%;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    border:none;
    gap:5px !important;
    color:var(--primary-text);
    background:var(--primary);
    height:50px;
    border-radius:5px;
    font-family:var(--design-font) !important;
    margin:10px 0;
    margin-top:20px;
    cursor:pointer;
    clip-path:inset(0 round 5px) !important;
    --size:30px;
    font-weight:400;
    position:relative;
  background:var(--secondary);
  color:var(--secondary-text);
}

/* ===== ADDITIONAL BUTTON UTILITIES ===== */

/* Button Sizes */
.btn-sm, .btn-small { padding: 5px 10px; font-size: 0.75rem; height: 30px; }
.btn-md, .btn-medium { padding: 10px 20px; font-size: 0.875rem; height: 40px; }
.btn-lg, .btn-large { padding: 15px 30px; font-size: 1rem; height: 50px; }
.btn-xl, .btn-extra-large { padding: 20px 40px; font-size: 1.25rem; height: 60px; }

/* Button Shapes */
.btn-rounded { border-radius: 50px !important; clip-path: inset(0 round 50px) !important; }
.btn-square { border-radius: 0 !important; clip-path: inset(0) !important; }
.btn-pill { border-radius: 1000px !important; clip-path: inset(0 round 1000px) !important; }

/* Button Variants - Social Media */
.btn-facebook { background: #1877f2; color: white; border: none; }
.btn-facebook:hover { background: #166fe5; }
.btn-twitter { background: #000000; color: white; border: none; }
.btn-twitter:hover { background: #1a1a1a; }
.btn-instagram { background: #e4405f; color: white; border: none; }
.btn-instagram:hover { background: #d13a55; }
.btn-linkedin { background: #0a66c2; color: white; border: none; }
.btn-linkedin:hover { background: #0957a8; }
.btn-youtube { background: #ff0000; color: white; border: none; }
.btn-youtube:hover { background: #e60000; }
.btn-whatsapp { background: #25d366; color: white; border: none; }
.btn-whatsapp:hover { background: #20bd5c; }
.btn-telegram { background: #0088cc; color: white; border: none; }
.btn-telegram:hover { background: #0077b3; }
.btn-discord { background: #5865f2; color: white; border: none; }
.btn-discord:hover { background: #4752c4; }
.btn-spotify { background: #1db954; color: white; border: none; }
.btn-spotify:hover { background: #19a348; }
.btn-github { background: #333333; color: white; border: none; }
.btn-github:hover { background: #2a2a2a; }
.btn-pinterest { background: #e60023; color: white; border: none; }
.btn-pinterest:hover { background: #cc001f; }
.btn-reddit { background: #ff4500; color: white; border: none; }
.btn-reddit:hover { background: #e63e00; }
.btn-twitch { background: #9146ff; color: white; border: none; }
.btn-twitch:hover { background: #7d3ae6; }
.btn-snapchat { background: #fffc00; color: black; border: none; }
.btn-snapchat:hover { background: #e6e300; }
.btn-tiktok { background: #000000; color: white; border: none; }
.btn-tiktok:hover { background: #1a1a1a; }
.btn-stackoverflow { background: #f48024; color: white; border: none; }
.btn-stackoverflow:hover { background: #db7310; }
.btn-medium { background: #00ab6c; color: white; border: none; }
.btn-medium:hover { background: #00965d; }
.btn-slack { background: #4a154b; color: white; border: none; }
.btn-slack:hover { background: #3a113a; }

/* Button States */
.btn-hover-scale:hover { transform: scale(1.05); transition: transform 0.2s ease; }
.btn-hover-opacity:hover { opacity: 0.8; transition: opacity 0.2s ease; }
.btn-hover-shadow:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: box-shadow 0.2s ease; }
.btn-hover-lift:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); transition: all 0.2s ease; }
.btn-active-press:active { transform: scale(0.95); transition: transform 0.1s ease; }

/* Button Loading States */
.btn-loading { pointer-events: none; opacity: 0.7; position: relative; }
.btn-loading::after { 
    content: ''; 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    border: 2px solid currentColor; 
    border-top-color: transparent; 
    border-radius: 50%; 
    animation: btn-spin 0.8s linear infinite; 
    margin-left: 10px; 
}
@keyframes btn-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Button Widths */
.btn-full { width: 100%; max-width: 100%; }
.btn-auto { width: auto; max-width: none; }
.btn-half { width: 50%; max-width: 50%; }
.btn-33 { width: 33.333%; max-width: 33.333%; }
.btn-25 { width: 25%; max-width: 25%; }

/* Button with Icon */
.btn-icon { padding: 10px; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.btn-icon-sm { padding: 5px; width: 35px; height: 35px; }
.btn-icon-lg { padding: 15px; width: 65px; height: 65px; }

/* Ghost Buttons (No background, just border) */
.btn-ghost { background: transparent !important; border: 2px solid var(--primary); color: var(--primary); }
.btn-ghost:hover { background: var(--primary); color: var(--primary-text); }
.btn-ghost-red { background: transparent !important; border: 2px solid red; color: red; }
.btn-ghost-red:hover { background: red; color: white; }
.btn-ghost-green { background: transparent !important; border: 2px solid var(--green); color: var(--green); }
.btn-ghost-green:hover { background: var(--green); color: white; }
.btn-ghost-blue { background: transparent !important; border: 2px solid blue; color: blue; }
.btn-ghost-blue:hover { background: blue; color: white; }
.btn-ghost-gold { background: transparent !important; border: 2px solid #ffd700; color: #ffd700; }
.btn-ghost-gold:hover { background: #ffd700; color: black; }

/* Outline Buttons (Border with transparent background) */
.btn-outline-primary { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); color: var(--primary-text); }
.btn-outline-secondary { background: transparent; border: 2px solid var(--secondary); color: var(--secondary); }
.btn-outline-secondary:hover { background: var(--secondary); color: white; }
.btn-outline-success { background: transparent; border: 2px solid #28a745; color: #28a745; }
.btn-outline-success:hover { background: #28a745; color: white; }
.btn-outline-danger { background: transparent; border: 2px solid #dc3545; color: #dc3545; }
.btn-outline-danger:hover { background: #dc3545; color: white; }
.btn-outline-warning { background: transparent; border: 2px solid #ffc107; color: #ffc107; }
.btn-outline-warning:hover { background: #ffc107; color: black; }
.btn-outline-info { background: transparent; border: 2px solid #17a2b8; color: #17a2b8; }
.btn-outline-info:hover { background: #17a2b8; color: white; }

/* Floating Action Button */
.btn-fab { 
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    width: 60px; 
    height: 60px; 
    border-radius: 50%; 
    background: var(--primary); 
    color: white; 
    border: none; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    font-size: 24px; 
    transition: all 0.3s ease; 
    z-index: 1000; 
}
.btn-fab:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
.btn-fab:active { transform: scale(0.95); }

/* Button Groups */
.btn-group { display: flex; flex-direction: row; gap: 0; }
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-radius: 10px 0 0 10px; clip-path: inset(0 round 10px 0 0 10px); }
.btn-group .btn:last-child { border-radius: 0 10px 10px 0; clip-path: inset(0 round 0 10px 10px 0); }
.btn-group .btn:not(:first-child):not(:last-child) { border-radius: 0; clip-path: inset(0); }
.btn-group-vertical { display: flex; flex-direction: column; gap: 0; }
.btn-group-vertical .btn { border-radius: 0; }
.btn-group-vertical .btn:first-child { border-radius: 10px 10px 0 0; clip-path: inset(0 round 10px 10px 0 0); }
.btn-group-vertical .btn:last-child { border-radius: 0 0 10px 10px; clip-path: inset(0 round 0 0 10px 10px); }

/* Button with Gradient */
.btn-gradient-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; border: none; }
.btn-gradient-secondary { background: linear-gradient(135deg, var(--secondary), var(--secondary-dark)); color: white; border: none; }
.btn-gradient-success { background: linear-gradient(135deg, #28a745, #1e7e34); color: white; border: none; }
.btn-gradient-danger { background: linear-gradient(135deg, #dc3545, #bd2130); color: white; border: none; }
.btn-gradient-warning { background: linear-gradient(135deg, #ffc107, #d39e00); color: black; border: none; }
.btn-gradient-info { background: linear-gradient(135deg, #17a2b8, #117a8b); color: white; border: none; }
.btn-gradient-facebook { background: linear-gradient(135deg, #1877f2, #0d65d9); color: white; border: none; }
.btn-gradient-instagram { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: white; border: none; }
.btn-gradient-twitter { background: linear-gradient(135deg, #000000, #333333); color: white; border: none; }
.btn-gradient-youtube { background: linear-gradient(135deg, #ff0000, #cc0000); color: white; border: none; }


/* SEARCH  */
.search-result{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--bg);
    z-index:100;
    overflow:hidden;
    border-radius:0 0 10px 10px;
    display:none;
}
.search-result.active{
    display: flex;
    flex-direction:column;
}
.search-result a{
    padding:10px;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    color:var(--text);
    text-decoration:none;
    font-size:10px;
    width:100%;

}
/* border */
.border-none, .border-0 {
    border: none;
}
.border-width-01px, .border-01px { border-width: 0.1px; }
.border-width-02px, .border-02px { border-width: 0.2px; }
.border-width-03px, .border-03px { border-width: 0.3px; }
.border-width-04px, .border-04px { border-width: 0.4px; }
.border-width-05px, .border-05px { border-width: 0.5px; }
.border-width-06px, .border-06px { border-width: 0.6px; }
.border-width-07px, .border-07px { border-width: 0.7px; }
.border-width-08px, .border-08px { border-width: 0.8px; }
.border-width-09px, .border-09px { border-width: 0.9px; }
.border-width-1px, .border-1px { border-width: 1px; }
.border-width-2px, .border-2px { border-width: 2px; }
.border-width-3px, .border-3px { border-width: 3px; }
.border-width-4px, .border-4px { border-width: 4px; }
.border-width-5px, .border-5px { border-width: 5px; }
.border-width-6px, .border-6px { border-width: 6px; }
.border-width-7px, .border-7px { border-width: 7px; }
.border-width-8px, .border-8px { border-width: 8px; }
.border-width-9px, .border-9px { border-width: 9px; }
.border-width-10px, .border-10px { border-width: 10px; }

/* ===== ADDITIONAL BORDER WIDTH VALUES ===== */
.border-width-11px, .border-11px { border-width: 11px; }
.border-width-12px, .border-12px { border-width: 12px; }
.border-width-13px, .border-13px { border-width: 13px; }
.border-width-14px, .border-14px { border-width: 14px; }
.border-width-15px, .border-15px { border-width: 15px; }
.border-width-16px, .border-16px { border-width: 16px; }
.border-width-17px, .border-17px { border-width: 17px; }
.border-width-18px, .border-18px { border-width: 18px; }
.border-width-19px, .border-19px { border-width: 19px; }
.border-width-20px, .border-20px { border-width: 20px; }
.border-width-25px, .border-25px { border-width: 25px; }
.border-width-30px, .border-30px { border-width: 30px; }
.border-width-40px, .border-40px { border-width: 40px; }
.border-width-50px, .border-50px { border-width: 50px; }

/* Border Top */
.border-top-width-01px, .border-top-01px { border-top-width: 0.1px; }
.border-top-width-02px, .border-top-02px { border-top-width: 0.2px; }
.border-top-width-03px, .border-top-03px { border-top-width: 0.3px; }
.border-top-width-04px, .border-top-04px { border-top-width: 0.4px; }
.border-top-width-05px, .border-top-05px { border-top-width: 0.5px; }
.border-top-width-06px, .border-top-06px { border-top-width: 0.6px; }
.border-top-width-07px, .border-top-07px { border-top-width: 0.7px; }
.border-top-width-08px, .border-top-08px { border-top-width: 0.8px; }
.border-top-width-09px, .border-top-09px { border-top-width: 0.9px; }
.border-top-width-1px, .border-top-1px { border-top-width: 1px; }
.border-top-width-2px, .border-top-2px { border-top-width: 2px; }
.border-top-width-3px, .border-top-3px { border-top-width: 3px; }
.border-top-width-4px, .border-top-4px { border-top-width: 4px; }
.border-top-width-5px, .border-top-5px { border-top-width: 5px; }
.border-top-width-6px, .border-top-6px { border-top-width: 6px; }
.border-top-width-7px, .border-top-7px { border-top-width: 7px; }
.border-top-width-8px, .border-top-8px { border-top-width: 8px; }
.border-top-width-9px, .border-top-9px { border-top-width: 9px; }
.border-top-width-10px, .border-top-10px { border-top-width: 10px; }

/* ===== ADDITIONAL BORDER TOP VALUES ===== */
.border-top-width-11px, .border-top-11px { border-top-width: 11px; }
.border-top-width-12px, .border-top-12px { border-top-width: 12px; }
.border-top-width-13px, .border-top-13px { border-top-width: 13px; }
.border-top-width-14px, .border-top-14px { border-top-width: 14px; }
.border-top-width-15px, .border-top-15px { border-top-width: 15px; }
.border-top-width-16px, .border-top-16px { border-top-width: 16px; }
.border-top-width-17px, .border-top-17px { border-top-width: 17px; }
.border-top-width-18px, .border-top-18px { border-top-width: 18px; }
.border-top-width-19px, .border-top-19px { border-top-width: 19px; }
.border-top-width-20px, .border-top-20px { border-top-width: 20px; }
.border-top-width-25px, .border-top-25px { border-top-width: 25px; }
.border-top-width-30px, .border-top-30px { border-top-width: 30px; }
.border-top-width-40px, .border-top-40px { border-top-width: 40px; }
.border-top-width-50px, .border-top-50px { border-top-width: 50px; }

/* Border Right */
.border-right-width-01px, .border-right-01px { border-right-width: 0.1px; }
.border-right-width-02px, .border-right-02px { border-right-width: 0.2px; }
.border-right-width-03px, .border-right-03px { border-right-width: 0.3px; }
.border-right-width-04px, .border-right-04px { border-right-width: 0.4px; }
.border-right-width-05px, .border-right-05px { border-right-width: 0.5px; }
.border-right-width-06px, .border-right-06px { border-right-width: 0.6px; }
.border-right-width-07px, .border-right-07px { border-right-width: 0.7px; }
.border-right-width-08px, .border-right-08px { border-right-width: 0.8px; }
.border-right-width-09px, .border-right-09px { border-right-width: 0.9px; }
.border-right-width-1px, .border-right-1px { border-right-width: 1px; }
.border-right-width-2px, .border-right-2px { border-right-width: 2px; }
.border-right-width-3px, .border-right-3px { border-right-width: 3px; }
.border-right-width-4px, .border-right-4px { border-right-width: 4px; }
.border-right-width-5px, .border-right-5px { border-right-width: 5px; }
.border-right-width-6px, .border-right-6px { border-right-width: 6px; }
.border-right-width-7px, .border-right-7px { border-right-width: 7px; }
.border-right-width-8px, .border-right-8px { border-right-width: 8px; }
.border-right-width-9px, .border-right-9px { border-right-width: 9px; }
.border-right-width-10px, .border-right-10px { border-right-width: 10px; }

/* ===== ADDITIONAL BORDER RIGHT VALUES ===== */
.border-right-width-11px, .border-right-11px { border-right-width: 11px; }
.border-right-width-12px, .border-right-12px { border-right-width: 12px; }
.border-right-width-13px, .border-right-13px { border-right-width: 13px; }
.border-right-width-14px, .border-right-14px { border-right-width: 14px; }
.border-right-width-15px, .border-right-15px { border-right-width: 15px; }
.border-right-width-16px, .border-right-16px { border-right-width: 16px; }
.border-right-width-17px, .border-right-17px { border-right-width: 17px; }
.border-right-width-18px, .border-right-18px { border-right-width: 18px; }
.border-right-width-19px, .border-right-19px { border-right-width: 19px; }
.border-right-width-20px, .border-right-20px { border-right-width: 20px; }
.border-right-width-25px, .border-right-25px { border-right-width: 25px; }
.border-right-width-30px, .border-right-30px { border-right-width: 30px; }
.border-right-width-40px, .border-right-40px { border-right-width: 40px; }
.border-right-width-50px, .border-right-50px { border-right-width: 50px; }

/* Border Bottom */
.border-bottom-width-01px, .border-bottom-01px { border-bottom-width: 0.1px; }
.border-bottom-width-02px, .border-bottom-02px { border-bottom-width: 0.2px; }
.border-bottom-width-03px, .border-bottom-03px { border-bottom-width: 0.3px; }
.border-bottom-width-04px, .border-bottom-04px { border-bottom-width: 0.4px; }
.border-bottom-width-05px, .border-bottom-05px { border-bottom-width: 0.5px; }
.border-bottom-width-06px, .border-bottom-06px { border-bottom-width: 0.6px; }
.border-bottom-width-07px, .border-bottom-07px { border-bottom-width: 0.7px; }
.border-bottom-width-08px, .border-bottom-08px { border-bottom-width: 0.8px; }
.border-bottom-width-09px, .border-bottom-09px { border-bottom-width: 0.9px; }
.border-bottom-width-1px, .border-bottom-1px { border-bottom-width: 1px; }
.border-bottom-width-2px, .border-bottom-2px { border-bottom-width: 2px; }
.border-bottom-width-3px, .border-bottom-3px { border-bottom-width: 3px; }
.border-bottom-width-4px, .border-bottom-4px { border-bottom-width: 4px; }
.border-bottom-width-5px, .border-bottom-5px { border-bottom-width: 5px; }
.border-bottom-width-6px, .border-bottom-6px { border-bottom-width: 6px; }
.border-bottom-width-7px, .border-bottom-7px { border-bottom-width: 7px; }
.border-bottom-width-8px, .border-bottom-8px { border-bottom-width: 8px; }
.border-bottom-width-9px, .border-bottom-9px { border-bottom-width: 9px; }
.border-bottom-width-10px, .border-bottom-10px { border-bottom-width: 10px; }

/* ===== ADDITIONAL BORDER BOTTOM VALUES ===== */
.border-bottom-width-11px, .border-bottom-11px { border-bottom-width: 11px; }
.border-bottom-width-12px, .border-bottom-12px { border-bottom-width: 12px; }
.border-bottom-width-13px, .border-bottom-13px { border-bottom-width: 13px; }
.border-bottom-width-14px, .border-bottom-14px { border-bottom-width: 14px; }
.border-bottom-width-15px, .border-bottom-15px { border-bottom-width: 15px; }
.border-bottom-width-16px, .border-bottom-16px { border-bottom-width: 16px; }
.border-bottom-width-17px, .border-bottom-17px { border-bottom-width: 17px; }
.border-bottom-width-18px, .border-bottom-18px { border-bottom-width: 18px; }
.border-bottom-width-19px, .border-bottom-19px { border-bottom-width: 19px; }
.border-bottom-width-20px, .border-bottom-20px { border-bottom-width: 20px; }
.border-bottom-width-25px, .border-bottom-25px { border-bottom-width: 25px; }
.border-bottom-width-30px, .border-bottom-30px { border-bottom-width: 30px; }
.border-bottom-width-40px, .border-bottom-40px { border-bottom-width: 40px; }
.border-bottom-width-50px, .border-bottom-50px { border-bottom-width: 50px; }

/* Border Left */
.border-left-width-01px, .border-left-01px { border-left-width: 0.1px; }
.border-left-width-02px, .border-left-02px { border-left-width: 0.2px; }
.border-left-width-03px, .border-left-03px { border-left-width: 0.3px; }
.border-left-width-04px, .border-left-04px { border-left-width: 0.4px; }
.border-left-width-05px, .border-left-05px { border-left-width: 0.5px; }
.border-left-width-06px, .border-left-06px { border-left-width: 0.6px; }
.border-left-width-07px, .border-left-07px { border-left-width: 0.7px; }
.border-left-width-08px, .border-left-08px { border-left-width: 0.8px; }
.border-left-width-09px, .border-left-09px { border-left-width: 0.9px; }
.border-left-width-1px, .border-left-1px { border-left-width: 1px; }
.border-left-width-2px, .border-left-2px { border-left-width: 2px; }
.border-left-width-3px, .border-left-3px { border-left-width: 3px; }
.border-left-width-4px, .border-left-4px { border-left-width: 4px; }
.border-left-width-5px, .border-left-5px { border-left-width: 5px; }
.border-left-width-6px, .border-left-6px { border-left-width: 6px; }
.border-left-width-7px, .border-left-7px { border-left-width: 7px; }
.border-left-width-8px, .border-left-8px { border-left-width: 8px; }
.border-left-width-9px, .border-left-9px { border-left-width: 9px; }
.border-left-width-10px, .border-left-10px { border-left-width: 10px; }

/* ===== ADDITIONAL BORDER LEFT VALUES ===== */
.border-left-width-11px, .border-left-11px { border-left-width: 11px; }
.border-left-width-12px, .border-left-12px { border-left-width: 12px; }
.border-left-width-13px, .border-left-13px { border-left-width: 13px; }
.border-left-width-14px, .border-left-14px { border-left-width: 14px; }
.border-left-width-15px, .border-left-15px { border-left-width: 15px; }
.border-left-width-16px, .border-left-16px { border-left-width: 16px; }
.border-left-width-17px, .border-left-17px { border-left-width: 17px; }
.border-left-width-18px, .border-left-18px { border-left-width: 18px; }
.border-left-width-19px, .border-left-19px { border-left-width: 19px; }
.border-left-width-20px, .border-left-20px { border-left-width: 20px; }
.border-left-width-25px, .border-left-25px { border-left-width: 25px; }
.border-left-width-30px, .border-left-30px { border-left-width: 30px; }
.border-left-width-40px, .border-left-40px { border-left-width: 40px; }
.border-left-width-50px, .border-left-50px { border-left-width: 50px; }

/* Border Styles */
.border-style-solid, .border-solid { border-style: solid; }
.border-style-dashed, .border-dashed { border-style: dashed; }
.border-style-dotted, .border-dotted { border-style: dotted; }
.border-style-double, .border-double { border-style: double; }
.border-style-groove, .border-groove { border-style: groove; }
.border-style-inherit, .border-inherit { border-style: inherit; }
.border-style-none, .border-style-0 { border-style: none; }
.border-style-hidden, .border-hidden { border-style: hidden; }
.border-style-ridge, .border-ridge { border-style: ridge; }
.border-style-inset, .border-inset { border-style: inset; }
.border-style-outset, .border-outset { border-style: outset; }

/* ===== BORDER TOP STYLES ===== */
.border-top-style-solid { border-top-style: solid; }
.border-top-style-dashed { border-top-style: dashed; }
.border-top-style-dotted { border-top-style: dotted; }
.border-top-style-double { border-top-style: double; }
.border-top-style-groove { border-top-style: groove; }
.border-top-style-ridge { border-top-style: ridge; }
.border-top-style-inset { border-top-style: inset; }
.border-top-style-outset { border-top-style: outset; }
.border-top-style-none { border-top-style: none; }
.border-top-style-hidden { border-top-style: hidden; }
.border-top-style-inherit { border-top-style: inherit; }

/* ===== BORDER BOTTOM STYLES ===== */
.border-bottom-style-solid { border-bottom-style: solid; }
.border-bottom-style-dashed { border-bottom-style: dashed; }
.border-bottom-style-dotted { border-bottom-style: dotted; }
.border-bottom-style-double { border-bottom-style: double; }
.border-bottom-style-groove { border-bottom-style: groove; }
.border-bottom-style-ridge { border-bottom-style: ridge; }
.border-bottom-style-inset { border-bottom-style: inset; }
.border-bottom-style-outset { border-bottom-style: outset; }
.border-bottom-style-none { border-bottom-style: none; }
.border-bottom-style-hidden { border-bottom-style: hidden; }
.border-bottom-style-inherit { border-bottom-style: inherit; }

/* ===== BORDER LEFT STYLES ===== */
.border-left-style-solid { border-left-style: solid; }
.border-left-style-dashed { border-left-style: dashed; }
.border-left-style-dotted { border-left-style: dotted; }
.border-left-style-double { border-left-style: double; }
.border-left-style-groove { border-left-style: groove; }
.border-left-style-ridge { border-left-style: ridge; }
.border-left-style-inset { border-left-style: inset; }
.border-left-style-outset { border-left-style: outset; }
.border-left-style-none { border-left-style: none; }
.border-left-style-hidden { border-left-style: hidden; }
.border-left-style-inherit { border-left-style: inherit; }

/* ===== BORDER RIGHT STYLES ===== */
.border-right-style-solid { border-right-style: solid; }
.border-right-style-dashed { border-right-style: dashed; }
.border-right-style-dotted { border-right-style: dotted; }
.border-right-style-double { border-right-style: double; }
.border-right-style-groove { border-right-style: groove; }
.border-right-style-ridge { border-right-style: ridge; }
.border-right-style-inset { border-right-style: inset; }
.border-right-style-outset { border-right-style: outset; }
.border-right-style-none { border-right-style: none; }
.border-right-style-hidden { border-right-style: hidden; }
.border-right-style-inherit { border-right-style: inherit; }
/* Border Colors - keeping all your original classes and adding shorthand versions */
.border-color-primary, .border-primary { border-color: var(--primary); }
.border-color-primary-001, .border-primary-001 { border-color: var(--primary-001); }
.border-color-primary-002, .border-primary-002 { border-color: var(--primary-002); }
.border-color-primary-003, .border-primary-003 { border-color: var(--primary-003); }
.border-color-primary-004, .border-primary-004 { border-color: var(--primary-004); }
.border-color-primary-005, .border-primary-005 { border-color: var(--primary-005); }
.border-color-primary-006, .border-primary-006 { border-color: var(--primary-006); }
.border-color-primary-07, .border-primary-07 { border-color: var(--primary-007); }
.border-color-primary-008, .border-primary-008 { border-color: var(--primary-008); }
.border-color-primary-009, .border-primary-009 { border-color: var(--primary-009); }

.border-color-primary-01, .border-primary-01 { border-color: var(--primary-01); }
.border-color-primary-02, .border-primary-02 { border-color: var(--primary-02); }
.border-color-primary-03, .border-primary-03 { border-color: var(--primary-03); }
.border-color-primary-04, .border-primary-04 { border-color: var(--primary-04); }
.border-color-primary-05, .border-primary-05 { border-color: var(--primary-05); }
.border-color-primary-06, .border-primary-06 { border-color: var(--primary-06); }
.border-color-primary-07, .border-primary-07 { border-color: var(--primary-07); }
.border-color-primary-08, .border-primary-08 { border-color: var(--primary-08); }
.border-color-primary-09, .border-primary-09 { border-color: var(--primary-09); }
.border-color-primary-10, .border-primary-10 { border-color: var(--primary-10); }

.border-color-rgt-001, .border-rgt-001 { border-color: var(--rgt-001); }
.border-color-rgt-002, .border-rgt-002 { border-color: var(--rgt-002); }
.border-color-rgt-003, .border-rgt-003 { border-color: var(--rgt-003); }
.border-color-rgt-004, .border-rgt-004 { border-color: var(--rgt-004); }
.border-color-rgt-005, .border-rgt-005 { border-color: var(--rgt-005); }
.border-color-rgt-006, .border-rgt-006 { border-color: var(--rgt-006); }
.border-color-rgt-007, .border-rgt-007 { border-color: var(--rgt-007); }
.border-color-rgt-008, .border-rgt-008 { border-color: var(--rgt-008); }
.border-color-rgt-009, .border-rgt-009 { border-color: var(--rgt-009); }

.border-color-rgt-01, .border-rgt-01 { border-color: var(--rgt-01); }
.border-color-rgt-02, .border-rgt-02 { border-color: var(--rgt-02); }
.border-color-rgt-03, .border-rgt-03 { border-color: var(--rgt-03); }
.border-color-rgt-04, .border-rgt-04 { border-color: var(--rgt-04); }
.border-color-rgt-05, .border-rgt-05 { border-color: var(--rgt-05); }
.border-color-rgt-06, .border-rgt-06 { border-color: var(--rgt-06); }
.border-color-rgt-07, .border-rgt-07 { border-color: var(--rgt-07); }
.border-color-rgt-08, .border-rgt-08 { border-color: var(--rgt-08); }
.border-color-rgt-09, .border-rgt-09 { border-color: var(--rgt-09); }
.border-color-rgt-10, .border-rgt-10 { border-color: var(--rgt-10); }

.border-color-rgb-001, .border-rgb-001 { border-color: var(--rgb-001); }
.border-color-rgb-002, .border-rgb-002 { border-color: var(--rgb-002); }
.border-color-rgb-003, .border-rgb-003 { border-color: var(--rgb-003); }
.border-color-rgb-004, .border-rgb-004 { border-color: var(--rgb-004); }
.border-color-rgb-005, .border-rgb-005 { border-color: var(--rgb-005); }
.border-color-rgb-006, .border-rgb-006 { border-color: var(--rgb-006); }
.border-color-rgb-007, .border-rgb-007 { border-color: var(--rgb-007); }
.border-color-rgb-008, .border-rgb-008 { border-color: var(--rgb-08); }
.border-color-rgb-009, .border-rgb-009 { border-color: var(--rgb-009); }

.border-color-rgb-01, .border-rgb-01 { border-color: var(--rgb-01); }
.border-color-rgb-02, .border-rgb-02 { border-color: var(--rgb-02); }
.border-color-rgb-03, .border-rgb-03 { border-color: var(--rgb-03); }
.border-color-rgb-04, .border-rgb-04 { border-color: var(--rgb-04); }
.border-color-rgb-05, .border-rgb-05 { border-color: var(--rgb-05); }
.border-color-rgb-06, .border-rgb-06 { border-color: var(--rgb-06); }
.border-color-rgb-07, .border-rgb-07 { border-color: var(--rgb-07); }
.border-color-rgb-08, .border-rgb-08 { border-color: var(--rgb-08); }
.border-color-rgb-09, .border-rgb-09 { border-color: var(--rgb-09); }
.border-color-rgb-10, .border-rgb-10 { border-color: var(--rgb-10); }

.border-color-bg, .border-bg { border-color: var(--bg); }
.border-color-bg-light, .border-bg-light { border-color: var(--bg-light); }
.border-color-bg-dark, .border-bg-dark { border-color: var(--bg-dark); }
.border-color-silver, .border-silver { border-color: silver; }
.border-color-primary-light, .border-primary-light { border-color: var(--primary-light); }
.border-color-primary-dark, .border-primary-dark { border-color: var(--primary-dark); }
.border-color-secondary, .border-secondary { border-color: var(--secondary); }
.border-color-bg-secondary, .border-bg-secondary { border-color: var(--bg-secondary); }
.border-color-bg-secondary-light, .border-bg-secondary-light { border-color: var(--bg-secondary-light); }
.border-color-bg-secondary-dark, .border-bg-secondary-dark { border-color: var(--bg-secondary-dark); }
.border-color-red, .border-red { border-color: red; }
.border-color-green, .border-green { border-color: green; }
.border-color-gold, .border-gold { border-color: gold; }
.border-color-white, .border-white { border-color: white; }
.border-color-whitesmoke, .border-whitesmoke { border-color: whitesmoke; }
.border-color-black, .border-black { border-color: black; }

/* ===== SOCIAL MEDIA BORDER COLORS ===== */
.border-color-facebook, .border-facebook { border-color: #1877f2; }
.border-color-twitter, .border-twitter { border-color: #000000; }
.border-color-instagram, .border-instagram { border-color: #e4405f; }
.border-color-linkedin, .border-linkedin { border-color: #0a66c2; }
.border-color-youtube, .border-youtube { border-color: #ff0000; }
.border-color-whatsapp, .border-whatsapp { border-color: #25d366; }
.border-color-telegram, .border-telegram { border-color: #0088cc; }
.border-color-github, .border-github { border-color: #333333; }
.border-color-stackoverflow, .border-stackoverflow { border-color: #f48024; }
.border-color-tiktok, .border-tiktok { border-color: #000000; }
.border-color-snapchat, .border-snapchat { border-color: #fffc00; }
.border-color-pinterest, .border-pinterest { border-color: #e60023; }
.border-color-discord, .border-discord { border-color: #5865f2; }
.border-color-reddit, .border-reddit { border-color: #ff4500; }
.border-color-tumblr, .border-tumblr { border-color: #35465c; }
.border-color-flickr, .border-flickr { border-color: #ff0084; }
.border-color-vimeo, .border-vimeo { border-color: #1ab7ea; }
.border-color-dribbble, .border-dribbble { border-color: #ea4c89; }
.border-color-behance, .border-behance { border-color: #1769ff; }
.border-color-medium, .border-medium { border-color: #00ab6c; }
.border-color-quora, .border-quora { border-color: #aa2200; }
.border-color-slack, .border-slack { border-color: #4a154b; }
.border-color-spotify, .border-spotify { border-color: #1db954; }
.border-color-soundcloud, .border-soundcloud { border-color: #ff3300; }
.border-color-twitch, .border-twitch { border-color: #9146ff; }
.border-color-periscope, .border-periscope { border-color: #40a4c4; }
.border-color-messenger, .border-messenger { border-color: #00b2ff; }
.border-color-wechat, .border-wechat { border-color: #07c160; }
.border-color-line, .border-line { border-color: #00c300; }
.border-color-tiktok-dark, .border-tiktok-dark { border-color: #010101; }

/* ===== SOCIAL MEDIA TRANSPARENT BORDER COLORS (0.1 to 1.0) ===== */

/* Facebook */
.border-color-facebook-01, .border-facebook-01 { border-color: rgba(24, 119, 242, 0.1); }
.border-color-facebook-02, .border-facebook-02 { border-color: rgba(24, 119, 242, 0.2); }
.border-color-facebook-03, .border-facebook-03 { border-color: rgba(24, 119, 242, 0.3); }
.border-color-facebook-04, .border-facebook-04 { border-color: rgba(24, 119, 242, 0.4); }
.border-color-facebook-05, .border-facebook-05 { border-color: rgba(24, 119, 242, 0.5); }
.border-color-facebook-06, .border-facebook-06 { border-color: rgba(24, 119, 242, 0.6); }
.border-color-facebook-07, .border-facebook-07 { border-color: rgba(24, 119, 242, 0.7); }
.border-color-facebook-08, .border-facebook-08 { border-color: rgba(24, 119, 242, 0.8); }
.border-color-facebook-09, .border-facebook-09 { border-color: rgba(24, 119, 242, 0.9); }
.border-color-facebook-10, .border-facebook-10 { border-color: rgba(24, 119, 242, 1.0); }

/* Twitter */
.border-color-twitter-01, .border-twitter-01 { border-color: rgba(0, 0, 0, 0.1); }
.border-color-twitter-02, .border-twitter-02 { border-color: rgba(0, 0, 0, 0.2); }
.border-color-twitter-03, .border-twitter-03 { border-color: rgba(0, 0, 0, 0.3); }
.border-color-twitter-04, .border-twitter-04 { border-color: rgba(0, 0, 0, 0.4); }
.border-color-twitter-05, .border-twitter-05 { border-color: rgba(0, 0, 0, 0.5); }
.border-color-twitter-06, .border-twitter-06 { border-color: rgba(0, 0, 0, 0.6); }
.border-color-twitter-07, .border-twitter-07 { border-color: rgba(0, 0, 0, 0.7); }
.border-color-twitter-08, .border-twitter-08 { border-color: rgba(0, 0, 0, 0.8); }
.border-color-twitter-09, .border-twitter-09 { border-color: rgba(0, 0, 0, 0.9); }
.border-color-twitter-10, .border-twitter-10 { border-color: rgba(0, 0, 0, 1.0); }

/* Instagram */
.border-color-instagram-01, .border-instagram-01 { border-color: rgba(228, 64, 95, 0.1); }
.border-color-instagram-02, .border-instagram-02 { border-color: rgba(228, 64, 95, 0.2); }
.border-color-instagram-03, .border-instagram-03 { border-color: rgba(228, 64, 95, 0.3); }
.border-color-instagram-04, .border-instagram-04 { border-color: rgba(228, 64, 95, 0.4); }
.border-color-instagram-05, .border-instagram-05 { border-color: rgba(228, 64, 95, 0.5); }
.border-color-instagram-06, .border-instagram-06 { border-color: rgba(228, 64, 95, 0.6); }
.border-color-instagram-07, .border-instagram-07 { border-color: rgba(228, 64, 95, 0.7); }
.border-color-instagram-08, .border-instagram-08 { border-color: rgba(228, 64, 95, 0.8); }
.border-color-instagram-09, .border-instagram-09 { border-color: rgba(228, 64, 95, 0.9); }
.border-color-instagram-10, .border-instagram-10 { border-color: rgba(228, 64, 95, 1.0); }

/* LinkedIn */
.border-color-linkedin-01, .border-linkedin-01 { border-color: rgba(10, 102, 194, 0.1); }
.border-color-linkedin-02, .border-linkedin-02 { border-color: rgba(10, 102, 194, 0.2); }
.border-color-linkedin-03, .border-linkedin-03 { border-color: rgba(10, 102, 194, 0.3); }
.border-color-linkedin-04, .border-linkedin-04 { border-color: rgba(10, 102, 194, 0.4); }
.border-color-linkedin-05, .border-linkedin-05 { border-color: rgba(10, 102, 194, 0.5); }
.border-color-linkedin-06, .border-linkedin-06 { border-color: rgba(10, 102, 194, 0.6); }
.border-color-linkedin-07, .border-linkedin-07 { border-color: rgba(10, 102, 194, 0.7); }
.border-color-linkedin-08, .border-linkedin-08 { border-color: rgba(10, 102, 194, 0.8); }
.border-color-linkedin-09, .border-linkedin-09 { border-color: rgba(10, 102, 194, 0.9); }
.border-color-linkedin-10, .border-linkedin-10 { border-color: rgba(10, 102, 194, 1.0); }

/* YouTube */
.border-color-youtube-01, .border-youtube-01 { border-color: rgba(255, 0, 0, 0.1); }
.border-color-youtube-02, .border-youtube-02 { border-color: rgba(255, 0, 0, 0.2); }
.border-color-youtube-03, .border-youtube-03 { border-color: rgba(255, 0, 0, 0.3); }
.border-color-youtube-04, .border-youtube-04 { border-color: rgba(255, 0, 0, 0.4); }
.border-color-youtube-05, .border-youtube-05 { border-color: rgba(255, 0, 0, 0.5); }
.border-color-youtube-06, .border-youtube-06 { border-color: rgba(255, 0, 0, 0.6); }
.border-color-youtube-07, .border-youtube-07 { border-color: rgba(255, 0, 0, 0.7); }
.border-color-youtube-08, .border-youtube-08 { border-color: rgba(255, 0, 0, 0.8); }
.border-color-youtube-09, .border-youtube-09 { border-color: rgba(255, 0, 0, 0.9); }
.border-color-youtube-10, .border-youtube-10 { border-color: rgba(255, 0, 0, 1.0); }

/* WhatsApp */
.border-color-whatsapp-01, .border-whatsapp-01 { border-color: rgba(37, 211, 102, 0.1); }
.border-color-whatsapp-02, .border-whatsapp-02 { border-color: rgba(37, 211, 102, 0.2); }
.border-color-whatsapp-03, .border-whatsapp-03 { border-color: rgba(37, 211, 102, 0.3); }
.border-color-whatsapp-04, .border-whatsapp-04 { border-color: rgba(37, 211, 102, 0.4); }
.border-color-whatsapp-05, .border-whatsapp-05 { border-color: rgba(37, 211, 102, 0.5); }
.border-color-whatsapp-06, .border-whatsapp-06 { border-color: rgba(37, 211, 102, 0.6); }
.border-color-whatsapp-07, .border-whatsapp-07 { border-color: rgba(37, 211, 102, 0.7); }
.border-color-whatsapp-08, .border-whatsapp-08 { border-color: rgba(37, 211, 102, 0.8); }
.border-color-whatsapp-09, .border-whatsapp-09 { border-color: rgba(37, 211, 102, 0.9); }
.border-color-whatsapp-10, .border-whatsapp-10 { border-color: rgba(37, 211, 102, 1.0); }

/* Telegram */
.border-color-telegram-01, .border-telegram-01 { border-color: rgba(0, 136, 204, 0.1); }
.border-color-telegram-02, .border-telegram-02 { border-color: rgba(0, 136, 204, 0.2); }
.border-color-telegram-03, .border-telegram-03 { border-color: rgba(0, 136, 204, 0.3); }
.border-color-telegram-04, .border-telegram-04 { border-color: rgba(0, 136, 204, 0.4); }
.border-color-telegram-05, .border-telegram-05 { border-color: rgba(0, 136, 204, 0.5); }
.border-color-telegram-06, .border-telegram-06 { border-color: rgba(0, 136, 204, 0.6); }
.border-color-telegram-07, .border-telegram-07 { border-color: rgba(0, 136, 204, 0.7); }
.border-color-telegram-08, .border-telegram-08 { border-color: rgba(0, 136, 204, 0.8); }
.border-color-telegram-09, .border-telegram-09 { border-color: rgba(0, 136, 204, 0.9); }
.border-color-telegram-10, .border-telegram-10 { border-color: rgba(0, 136, 204, 1.0); }

/* Discord */
.border-color-discord-01, .border-discord-01 { border-color: rgba(88, 101, 242, 0.1); }
.border-color-discord-02, .border-discord-02 { border-color: rgba(88, 101, 242, 0.2); }
.border-color-discord-03, .border-discord-03 { border-color: rgba(88, 101, 242, 0.3); }
.border-color-discord-04, .border-discord-04 { border-color: rgba(88, 101, 242, 0.4); }
.border-color-discord-05, .border-discord-05 { border-color: rgba(88, 101, 242, 0.5); }
.border-color-discord-06, .border-discord-06 { border-color: rgba(88, 101, 242, 0.6); }
.border-color-discord-07, .border-discord-07 { border-color: rgba(88, 101, 242, 0.7); }
.border-color-discord-08, .border-discord-08 { border-color: rgba(88, 101, 242, 0.8); }
.border-color-discord-09, .border-discord-09 { border-color: rgba(88, 101, 242, 0.9); }
.border-color-discord-10, .border-discord-10 { border-color: rgba(88, 101, 242, 1.0); }

/* Spotify */
.border-color-spotify-01, .border-spotify-01 { border-color: rgba(29, 185, 84, 0.1); }
.border-color-spotify-02, .border-spotify-02 { border-color: rgba(29, 185, 84, 0.2); }
.border-color-spotify-03, .border-spotify-03 { border-color: rgba(29, 185, 84, 0.3); }
.border-color-spotify-04, .border-spotify-04 { border-color: rgba(29, 185, 84, 0.4); }
.border-color-spotify-05, .border-spotify-05 { border-color: rgba(29, 185, 84, 0.5); }
.border-color-spotify-06, .border-spotify-06 { border-color: rgba(29, 185, 84, 0.6); }
.border-color-spotify-07, .border-spotify-07 { border-color: rgba(29, 185, 84, 0.7); }
.border-color-spotify-08, .border-spotify-08 { border-color: rgba(29, 185, 84, 0.8); }
.border-color-spotify-09, .border-spotify-09 { border-color: rgba(29, 185, 84, 0.9); }
.border-color-spotify-10, .border-spotify-10 { border-color: rgba(29, 185, 84, 1.0); }

/* GitHub */
.border-color-github-01, .border-github-01 { border-color: rgba(51, 51, 51, 0.1); }
.border-color-github-02, .border-github-02 { border-color: rgba(51, 51, 51, 0.2); }
.border-color-github-03, .border-github-03 { border-color: rgba(51, 51, 51, 0.3); }
.border-color-github-04, .border-github-04 { border-color: rgba(51, 51, 51, 0.4); }
.border-color-github-05, .border-github-05 { border-color: rgba(51, 51, 51, 0.5); }
.border-color-github-06, .border-github-06 { border-color: rgba(51, 51, 51, 0.6); }
.border-color-github-07, .border-github-07 { border-color: rgba(51, 51, 51, 0.7); }
.border-color-github-08, .border-github-08 { border-color: rgba(51, 51, 51, 0.8); }
.border-color-github-09, .border-github-09 { border-color: rgba(51, 51, 51, 0.9); }
.border-color-github-10, .border-github-10 { border-color: rgba(51, 51, 51, 1.0); }

/* Pinterest */
.border-color-pinterest-01, .border-pinterest-01 { border-color: rgba(230, 0, 35, 0.1); }
.border-color-pinterest-02, .border-pinterest-02 { border-color: rgba(230, 0, 35, 0.2); }
.border-color-pinterest-03, .border-pinterest-03 { border-color: rgba(230, 0, 35, 0.3); }
.border-color-pinterest-04, .border-pinterest-04 { border-color: rgba(230, 0, 35, 0.4); }
.border-color-pinterest-05, .border-pinterest-05 { border-color: rgba(230, 0, 35, 0.5); }
.border-color-pinterest-06, .border-pinterest-06 { border-color: rgba(230, 0, 35, 0.6); }
.border-color-pinterest-07, .border-pinterest-07 { border-color: rgba(230, 0, 35, 0.7); }
.border-color-pinterest-08, .border-pinterest-08 { border-color: rgba(230, 0, 35, 0.8); }
.border-color-pinterest-09, .border-pinterest-09 { border-color: rgba(230, 0, 35, 0.9); }
.border-color-pinterest-10, .border-pinterest-10 { border-color: rgba(230, 0, 35, 1.0); }

/* Reddit */
.border-color-reddit-01, .border-reddit-01 { border-color: rgba(255, 69, 0, 0.1); }
.border-color-reddit-02, .border-reddit-02 { border-color: rgba(255, 69, 0, 0.2); }
.border-color-reddit-03, .border-reddit-03 { border-color: rgba(255, 69, 0, 0.3); }
.border-color-reddit-04, .border-reddit-04 { border-color: rgba(255, 69, 0, 0.4); }
.border-color-reddit-05, .border-reddit-05 { border-color: rgba(255, 69, 0, 0.5); }
.border-color-reddit-06, .border-reddit-06 { border-color: rgba(255, 69, 0, 0.6); }
.border-color-reddit-07, .border-reddit-07 { border-color: rgba(255, 69, 0, 0.7); }
.border-color-reddit-08, .border-reddit-08 { border-color: rgba(255, 69, 0, 0.8); }
.border-color-reddit-09, .border-reddit-09 { border-color: rgba(255, 69, 0, 0.9); }
.border-color-reddit-10, .border-reddit-10 { border-color: rgba(255, 69, 0, 1.0); }

/* Twitch */
.border-color-twitch-01, .border-twitch-01 { border-color: rgba(145, 70, 255, 0.1); }
.border-color-twitch-02, .border-twitch-02 { border-color: rgba(145, 70, 255, 0.2); }
.border-color-twitch-03, .border-twitch-03 { border-color: rgba(145, 70, 255, 0.3); }
.border-color-twitch-04, .border-twitch-04 { border-color: rgba(145, 70, 255, 0.4); }
.border-color-twitch-05, .border-twitch-05 { border-color: rgba(145, 70, 255, 0.5); }
.border-color-twitch-06, .border-twitch-06 { border-color: rgba(145, 70, 255, 0.6); }
.border-color-twitch-07, .border-twitch-07 { border-color: rgba(145, 70, 255, 0.7); }
.border-color-twitch-08, .border-twitch-08 { border-color: rgba(145, 70, 255, 0.8); }
.border-color-twitch-09, .border-twitch-09 { border-color: rgba(145, 70, 255, 0.9); }
.border-color-twitch-10, .border-twitch-10 { border-color: rgba(145, 70, 255, 1.0); }

/* Snapchat */
.border-color-snapchat-01, .border-snapchat-01 { border-color: rgba(255, 252, 0, 0.1); }
.border-color-snapchat-02, .border-snapchat-02 { border-color: rgba(255, 252, 0, 0.2); }
.border-color-snapchat-03, .border-snapchat-03 { border-color: rgba(255, 252, 0, 0.3); }
.border-color-snapchat-04, .border-snapchat-04 { border-color: rgba(255, 252, 0, 0.4); }
.border-color-snapchat-05, .border-snapchat-05 { border-color: rgba(255, 252, 0, 0.5); }
.border-color-snapchat-06, .border-snapchat-06 { border-color: rgba(255, 252, 0, 0.6); }
.border-color-snapchat-07, .border-snapchat-07 { border-color: rgba(255, 252, 0, 0.7); }
.border-color-snapchat-08, .border-snapchat-08 { border-color: rgba(255, 252, 0, 0.8); }
.border-color-snapchat-09, .border-snapchat-09 { border-color: rgba(255, 252, 0, 0.9); }
.border-color-snapchat-10, .border-snapchat-10 { border-color: rgba(255, 252, 0, 1.0); }

/* TikTok */
.border-color-tiktok-01, .border-tiktok-01 { border-color: rgba(0, 0, 0, 0.1); }
.border-color-tiktok-02, .border-tiktok-02 { border-color: rgba(0, 0, 0, 0.2); }
.border-color-tiktok-03, .border-tiktok-03 { border-color: rgba(0, 0, 0, 0.3); }
.border-color-tiktok-04, .border-tiktok-04 { border-color: rgba(0, 0, 0, 0.4); }
.border-color-tiktok-05, .border-tiktok-05 { border-color: rgba(0, 0, 0, 0.5); }
.border-color-tiktok-06, .border-tiktok-06 { border-color: rgba(0, 0, 0, 0.6); }
.border-color-tiktok-07, .border-tiktok-07 { border-color: rgba(0, 0, 0, 0.7); }
.border-color-tiktok-08, .border-tiktok-08 { border-color: rgba(0, 0, 0, 0.8); }
.border-color-tiktok-09, .border-tiktok-09 { border-color: rgba(0, 0, 0, 0.9); }
.border-color-tiktok-10, .border-tiktok-10 { border-color: rgba(0, 0, 0, 1.0); }


/* ===== BORDER TOP COLORS ===== */
/* Primary & Variants */
.border-top-color-primary { border-top-color: var(--primary); }
.border-top-color-primary-light { border-top-color: var(--primary-light); }
.border-top-color-primary-dark { border-top-color: var(--primary-dark); }
.border-top-color-primary-lighter { border-top-color: var(--primary-lighter); }
.border-top-color-primary-darker { border-top-color: var(--primary-darker); }
.border-top-color-primary-001 { border-top-color: var(--primary-001); }
.border-top-color-primary-002 { border-top-color: var(--primary-002); }
.border-top-color-primary-003 { border-top-color: var(--primary-003); }
.border-top-color-primary-004 { border-top-color: var(--primary-004); }
.border-top-color-primary-005 { border-top-color: var(--primary-005); }
.border-top-color-primary-006 { border-top-color: var(--primary-006); }
.border-top-color-primary-007 { border-top-color: var(--primary-007); }
.border-top-color-primary-008 { border-top-color: var(--primary-008); }
.border-top-color-primary-009 { border-top-color: var(--primary-009); }
.border-top-color-primary-01 { border-top-color: var(--primary-01); }
.border-top-color-primary-02 { border-top-color: var(--primary-02); }
.border-top-color-primary-03 { border-top-color: var(--primary-03); }
.border-top-color-primary-04 { border-top-color: var(--primary-04); }
.border-top-color-primary-05 { border-top-color: var(--primary-05); }
.border-top-color-primary-06 { border-top-color: var(--primary-06); }
.border-top-color-primary-07 { border-top-color: var(--primary-07); }
.border-top-color-primary-08 { border-top-color: var(--primary-08); }
.border-top-color-primary-09 { border-top-color: var(--primary-09); }
.border-top-color-primary-10 { border-top-color: var(--primary-10); }

/* Secondary & Variants */
.border-top-color-secondary { border-top-color: var(--secondary); }
.border-top-color-secondary-light { border-top-color: var(--secondary-light); }
.border-top-color-secondary-dark { border-top-color: var(--secondary-dark); }
.border-top-color-secondary-lighter { border-top-color: var(--secondary-lighter); }
.border-top-color-secondary-darker { border-top-color: var(--secondary-darker); }
.border-top-color-secondary-001 { border-top-color: var(--secondary-001); }
.border-top-color-secondary-002 { border-top-color: var(--secondary-002); }
.border-top-color-secondary-003 { border-top-color: var(--secondary-003); }
.border-top-color-secondary-004 { border-top-color: var(--secondary-004); }
.border-top-color-secondary-005 { border-top-color: var(--secondary-005); }
.border-top-color-secondary-006 { border-top-color: var(--secondary-006); }
.border-top-color-secondary-007 { border-top-color: var(--secondary-007); }
.border-top-color-secondary-008 { border-top-color: var(--secondary-008); }
.border-top-color-secondary-009 { border-top-color: var(--secondary-009); }
.border-top-color-secondary-01 { border-top-color: var(--secondary-01); }
.border-top-color-secondary-02 { border-top-color: var(--secondary-02); }
.border-top-color-secondary-03 { border-top-color: var(--secondary-03); }
.border-top-color-secondary-04 { border-top-color: var(--secondary-04); }
.border-top-color-secondary-05 { border-top-color: var(--secondary-05); }
.border-top-color-secondary-06 { border-top-color: var(--secondary-06); }
.border-top-color-secondary-07 { border-top-color: var(--secondary-07); }
.border-top-color-secondary-08 { border-top-color: var(--secondary-08); }
.border-top-color-secondary-09 { border-top-color: var(--secondary-09); }
.border-top-color-secondary-10 { border-top-color: var(--secondary-10); }

/* RGT & Variants */
.border-top-color-rgt { border-top-color: var(--rgt); }
.border-top-color-rgt-001 { border-top-color: var(--rgt-001); }
.border-top-color-rgt-002 { border-top-color: var(--rgt-002); }
.border-top-color-rgt-003 { border-top-color: var(--rgt-003); }
.border-top-color-rgt-004 { border-top-color: var(--rgt-004); }
.border-top-color-rgt-005 { border-top-color: var(--rgt-005); }
.border-top-color-rgt-006 { border-top-color: var(--rgt-006); }
.border-top-color-rgt-007 { border-top-color: var(--rgt-007); }
.border-top-color-rgt-008 { border-top-color: var(--rgt-008); }
.border-top-color-rgt-009 { border-top-color: var(--rgt-009); }
.border-top-color-rgt-01 { border-top-color: var(--rgt-01); }
.border-top-color-rgt-02 { border-top-color: var(--rgt-02); }
.border-top-color-rgt-03 { border-top-color: var(--rgt-03); }
.border-top-color-rgt-04 { border-top-color: var(--rgt-04); }
.border-top-color-rgt-05 { border-top-color: var(--rgt-05); }
.border-top-color-rgt-06 { border-top-color: var(--rgt-06); }
.border-top-color-rgt-07 { border-top-color: var(--rgt-07); }
.border-top-color-rgt-08 { border-top-color: var(--rgt-08); }
.border-top-color-rgt-09 { border-top-color: var(--rgt-09); }
.border-top-color-rgt-10 { border-top-color: var(--rgt-10); }

/* RGB & Variants */
.border-top-color-rgb { border-top-color: var(--rgb); }
.border-top-color-rgb-001 { border-top-color: var(--rgb-001); }
.border-top-color-rgb-002 { border-top-color: var(--rgb-002); }
.border-top-color-rgb-003 { border-top-color: var(--rgb-003); }
.border-top-color-rgb-004 { border-top-color: var(--rgb-004); }
.border-top-color-rgb-005 { border-top-color: var(--rgb-005); }
.border-top-color-rgb-006 { border-top-color: var(--rgb-006); }
.border-top-color-rgb-007 { border-top-color: var(--rgb-007); }
.border-top-color-rgb-008 { border-top-color: var(--rgb-008); }
.border-top-color-rgb-009 { border-top-color: var(--rgb-009); }
.border-top-color-rgb-01 { border-top-color: var(--rgb-01); }
.border-top-color-rgb-02 { border-top-color: var(--rgb-02); }
.border-top-color-rgb-03 { border-top-color: var(--rgb-03); }
.border-top-color-rgb-04 { border-top-color: var(--rgb-04); }
.border-top-color-rgb-05 { border-top-color: var(--rgb-05); }
.border-top-color-rgb-06 { border-top-color: var(--rgb-06); }
.border-top-color-rgb-07 { border-top-color: var(--rgb-07); }
.border-top-color-rgb-08 { border-top-color: var(--rgb-08); }
.border-top-color-rgb-09 { border-top-color: var(--rgb-09); }
.border-top-color-rgb-10 { border-top-color: var(--rgb-10); }

/* Social Media Colors */
.border-top-color-facebook { border-top-color: #1877f2; }
.border-top-color-twitter { border-top-color: #000000; }
.border-top-color-instagram { border-top-color: #e4405f; }
.border-top-color-linkedin { border-top-color: #0a66c2; }
.border-top-color-youtube { border-top-color: #ff0000; }
.border-top-color-whatsapp { border-top-color: #25d366; }
.border-top-color-telegram { border-top-color: #0088cc; }
.border-top-color-discord { border-top-color: #5865f2; }
.border-top-color-spotify { border-top-color: #1db954; }
.border-top-color-github { border-top-color: #333333; }
.border-top-color-pinterest { border-top-color: #e60023; }
.border-top-color-reddit { border-top-color: #ff4500; }
.border-top-color-twitch { border-top-color: #9146ff; }
.border-top-color-snapchat { border-top-color: #fffc00; }
.border-top-color-tiktok { border-top-color: #000000; }
.border-top-color-stackoverflow { border-top-color: #f48024; }
.border-top-color-medium { border-top-color: #00ab6c; }
.border-top-color-slack { border-top-color: #4a154b; }
.border-top-color-tumblr { border-top-color: #35465c; }
.border-top-color-flickr { border-top-color: #ff0084; }
.border-top-color-vimeo { border-top-color: #1ab7ea; }
.border-top-color-dribbble { border-top-color: #ea4c89; }
.border-top-color-behance { border-top-color: #1769ff; }
.border-top-color-quora { border-top-color: #aa2200; }
.border-top-color-soundcloud { border-top-color: #ff3300; }
.border-top-color-periscope { border-top-color: #40a4c4; }
.border-top-color-messenger { border-top-color: #00b2ff; }
.border-top-color-wechat { border-top-color: #07c160; }
.border-top-color-line { border-top-color: #00c300; }

/* Reds & Pinks */
.border-top-color-red { border-top-color: red; }
.border-top-color-crimson { border-top-color: crimson; }
.border-top-color-darkred { border-top-color: darkred; }
.border-top-color-firebrick { border-top-color: firebrick; }
.border-top-color-indianred { border-top-color: indianred; }
.border-top-color-lightcoral { border-top-color: lightcoral; }
.border-top-color-lightpink { border-top-color: lightpink; }
.border-top-color-pink { border-top-color: pink; }
.border-top-color-rose { border-top-color: #ff007f; }
.border-top-color-tomato { border-top-color: tomato; }
.border-top-color-salmon { border-top-color: salmon; }

/* Blues */
.border-top-color-blue { border-top-color: blue; }
.border-top-color-darkblue { border-top-color: darkblue; }
.border-top-color-dodgerblue { border-top-color: dodgerblue; }
.border-top-color-lightblue { border-top-color: lightblue; }
.border-top-color-lightskyblue { border-top-color: lightskyblue; }
.border-top-color-mediumblue { border-top-color: mediumblue; }
.border-top-color-midnightblue { border-top-color: midnightblue; }
.border-top-color-royalblue { border-top-color: royalblue; }
.border-top-color-skyblue { border-top-color: skyblue; }
.border-top-color-steelblue { border-top-color: steelblue; }
.border-top-color-turquoise { border-top-color: turquoise; }
.border-top-color-cyan { border-top-color: cyan; }
.border-top-color-lightcyan { border-top-color: lightcyan; }
.border-top-color-navy { border-top-color: navy; }

/* Greens */
.border-top-color-green { border-top-color: green; }
.border-top-color-darkgreen { border-top-color: darkgreen; }
.border-top-color-darkolivegreen { border-top-color: darkolivegreen; }
.border-top-color-forestgreen { border-top-color: forestgreen; }
.border-top-color-greenyellow { border-top-color: greenyellow; }
.border-top-color-lime { border-top-color: lime; }
.border-top-color-limegreen { border-top-color: limegreen; }
.border-top-color-lightgreen { border-top-color: lightgreen; }
.border-top-color-mediumseagreen { border-top-color: mediumseagreen; }
.border-top-color-olivedrab { border-top-color: olivedrab; }
.border-top-color-palegreen { border-top-color: palegreen; }
.border-top-color-seagreen { border-top-color: seagreen; }
.border-top-color-springgreen { border-top-color: springgreen; }
.border-top-color-yellowgreen { border-top-color: yellowgreen; }
.border-top-color-teal { border-top-color: teal; }
.border-top-color-darkcyan { border-top-color: darkcyan; }

/* Yellows & Oranges */
.border-top-color-gold { border-top-color: gold; }
.border-top-color-goldenrod { border-top-color: goldenrod; }
.border-top-color-darkgoldenrod { border-top-color: darkgoldenrod; }
.border-top-color-lightgoldenrodyellow { border-top-color: lightgoldenrodyellow; }
.border-top-color-lemonchiffon { border-top-color: lemonchiffon; }
.border-top-color-palegoldenrod { border-top-color: palegoldenrod; }
.border-top-color-yellow { border-top-color: yellow; }
.border-top-color-lightyellow { border-top-color: lightyellow; }
.border-top-color-orange { border-top-color: orange; }
.border-top-color-darkorange { border-top-color: darkorange; }
.border-top-color-coral { border-top-color: coral; }
.border-top-color-peachpuff { border-top-color: peachpuff; }

/* Purples & Violets */
.border-top-color-purple { border-top-color: rgb(108, 92, 230); }
.border-top-color-darkmagenta { border-top-color: darkmagenta; }
.border-top-color-darkorchid { border-top-color: darkorchid; }
.border-top-color-darkviolet { border-top-color: darkviolet; }
.border-top-color-fuchsia { border-top-color: fuchsia; }
.border-top-color-indigo { border-top-color: indigo; }
.border-top-color-lavender { border-top-color: lavender; }
.border-top-color-lavenderblush { border-top-color: lavenderblush; }
.border-top-color-mediumorchid { border-top-color: mediumorchid; }
.border-top-color-mediumpurple { border-top-color: mediumpurple; }
.border-top-color-magenta { border-top-color: magenta; }
.border-top-color-plum { border-top-color: plum; }
.border-top-color-thistle { border-top-color: thistle; }
.border-top-color-violet { border-top-color: violet; }
.border-top-color-blueviolet { border-top-color: blueviolet; }
.border-top-color-mediumslateblue { border-top-color: mediumslateblue; }
.border-top-color-slateblue { border-top-color: slateblue; }

/* Browns & Beiges */
.border-top-color-brown { border-top-color: brown; }
.border-top-color-beige { border-top-color: beige; }
.border-top-color-bisque { border-top-color: bisque; }
.border-top-color-blanchedalmond { border-top-color: blanchedalmond; }
.border-top-color-burlywood { border-top-color: burlywood; }
.border-top-color-chocolate { border-top-color: chocolate; }
.border-top-color-cornsilk { border-top-color: cornsilk; }
.border-top-color-darkkhaki { border-top-color: darkkhaki; }
.border-top-color-gainsboro { border-top-color: gainsboro; }
.border-top-color-honeydew { border-top-color: honeydew; }
.border-top-color-ivory { border-top-color: ivory; }
.border-top-color-khaki { border-top-color: khaki; }
.border-top-color-lightgray { border-top-color: lightgray; }
.border-top-color-moccasin { border-top-color: moccasin; }
.border-top-color-navajowhite { border-top-color: navajowhite; }
.border-top-color-oldlace { border-top-color: oldlace; }
.border-top-color-peru { border-top-color: peru; }
.border-top-color-sandybrown { border-top-color: sandybrown; }
.border-top-color-sienna { border-top-color: sienna; }
.border-top-color-tan { border-top-color: tan; }
.border-top-color-wheat { border-top-color: wheat; }

/* Grays */
.border-top-color-gray { border-top-color: gray; }
.border-top-color-darkgray { border-top-color: darkgray; }
.border-top-color-dimgray { border-top-color: dimgray; }
.border-top-color-lightslategray { border-top-color: lightslategray; }
.border-top-color-slategray { border-top-color: slategray; }

/* Basic */
.border-top-color-white { border-top-color: white; }
.border-top-color-black { border-top-color: black; }
.border-top-color-transparent { border-top-color: transparent; }
.border-top-color-silver { border-top-color: silver; }
.border-top-color-whitesmoke { border-top-color: whitesmoke; }

/* Background Colors */
.border-top-color-bg { border-top-color: var(--bg); }
.border-top-color-bg-light { border-top-color: var(--bg-light); }
.border-top-color-bg-dark { border-top-color: var(--bg-dark); }
.border-top-color-bg-lighter { border-top-color: var(--bg-lighter); }
.border-top-color-bg-dim { border-top-color: var(--bg-dim); }

/* Special */
.border-top-color-inherit { border-top-color: inherit; }
.border-top-color-current { border-top-color: currentColor; }
.border-top-color-green { border-top-color: var(--green); }
.border-top-color-dark-gold { border-top-color: var(--dark-gold); }
.border-top-color-primary-text { border-top-color: var(--primary-text); }
.border-top-color-secondary-text { border-top-color: var(--secondary-text); }

/* ===== BORDER BOTTOM COLORS ===== */
/* Primary & Variants */
.border-bottom-color-primary { border-bottom-color: var(--primary); }
.border-bottom-color-primary-light { border-bottom-color: var(--primary-light); }
.border-bottom-color-primary-dark { border-bottom-color: var(--primary-dark); }
.border-bottom-color-primary-lighter { border-bottom-color: var(--primary-lighter); }
.border-bottom-color-primary-darker { border-bottom-color: var(--primary-darker); }
.border-bottom-color-primary-001 { border-bottom-color: var(--primary-001); }
.border-bottom-color-primary-002 { border-bottom-color: var(--primary-002); }
.border-bottom-color-primary-003 { border-bottom-color: var(--primary-003); }
.border-bottom-color-primary-004 { border-bottom-color: var(--primary-004); }
.border-bottom-color-primary-005 { border-bottom-color: var(--primary-005); }
.border-bottom-color-primary-006 { border-bottom-color: var(--primary-006); }
.border-bottom-color-primary-007 { border-bottom-color: var(--primary-007); }
.border-bottom-color-primary-008 { border-bottom-color: var(--primary-008); }
.border-bottom-color-primary-009 { border-bottom-color: var(--primary-009); }
.border-bottom-color-primary-01 { border-bottom-color: var(--primary-01); }
.border-bottom-color-primary-02 { border-bottom-color: var(--primary-02); }
.border-bottom-color-primary-03 { border-bottom-color: var(--primary-03); }
.border-bottom-color-primary-04 { border-bottom-color: var(--primary-04); }
.border-bottom-color-primary-05 { border-bottom-color: var(--primary-05); }
.border-bottom-color-primary-06 { border-bottom-color: var(--primary-06); }
.border-bottom-color-primary-07 { border-bottom-color: var(--primary-07); }
.border-bottom-color-primary-08 { border-bottom-color: var(--primary-08); }
.border-bottom-color-primary-09 { border-bottom-color: var(--primary-09); }
.border-bottom-color-primary-10 { border-bottom-color: var(--primary-10); }

/* Secondary & Variants */
.border-bottom-color-secondary { border-bottom-color: var(--secondary); }
.border-bottom-color-secondary-light { border-bottom-color: var(--secondary-light); }
.border-bottom-color-secondary-dark { border-bottom-color: var(--secondary-dark); }
.border-bottom-color-secondary-lighter { border-bottom-color: var(--secondary-lighter); }
.border-bottom-color-secondary-darker { border-bottom-color: var(--secondary-darker); }
.border-bottom-color-secondary-001 { border-bottom-color: var(--secondary-001); }
.border-bottom-color-secondary-002 { border-bottom-color: var(--secondary-002); }
.border-bottom-color-secondary-003 { border-bottom-color: var(--secondary-003); }
.border-bottom-color-secondary-004 { border-bottom-color: var(--secondary-004); }
.border-bottom-color-secondary-005 { border-bottom-color: var(--secondary-005); }
.border-bottom-color-secondary-006 { border-bottom-color: var(--secondary-006); }
.border-bottom-color-secondary-007 { border-bottom-color: var(--secondary-007); }
.border-bottom-color-secondary-008 { border-bottom-color: var(--secondary-008); }
.border-bottom-color-secondary-009 { border-bottom-color: var(--secondary-009); }
.border-bottom-color-secondary-01 { border-bottom-color: var(--secondary-01); }
.border-bottom-color-secondary-02 { border-bottom-color: var(--secondary-02); }
.border-bottom-color-secondary-03 { border-bottom-color: var(--secondary-03); }
.border-bottom-color-secondary-04 { border-bottom-color: var(--secondary-04); }
.border-bottom-color-secondary-05 { border-bottom-color: var(--secondary-05); }
.border-bottom-color-secondary-06 { border-bottom-color: var(--secondary-06); }
.border-bottom-color-secondary-07 { border-bottom-color: var(--secondary-07); }
.border-bottom-color-secondary-08 { border-bottom-color: var(--secondary-08); }
.border-bottom-color-secondary-09 { border-bottom-color: var(--secondary-09); }
.border-bottom-color-secondary-10 { border-bottom-color: var(--secondary-10); }

/* RGT & Variants */
.border-bottom-color-rgt { border-bottom-color: var(--rgt); }
.border-bottom-color-rgt-001 { border-bottom-color: var(--rgt-001); }
.border-bottom-color-rgt-002 { border-bottom-color: var(--rgt-002); }
.border-bottom-color-rgt-003 { border-bottom-color: var(--rgt-003); }
.border-bottom-color-rgt-004 { border-bottom-color: var(--rgt-004); }
.border-bottom-color-rgt-005 { border-bottom-color: var(--rgt-005); }
.border-bottom-color-rgt-006 { border-bottom-color: var(--rgt-006); }
.border-bottom-color-rgt-007 { border-bottom-color: var(--rgt-007); }
.border-bottom-color-rgt-008 { border-bottom-color: var(--rgt-008); }
.border-bottom-color-rgt-009 { border-bottom-color: var(--rgt-009); }
.border-bottom-color-rgt-01 { border-bottom-color: var(--rgt-01); }
.border-bottom-color-rgt-02 { border-bottom-color: var(--rgt-02); }
.border-bottom-color-rgt-03 { border-bottom-color: var(--rgt-03); }
.border-bottom-color-rgt-04 { border-bottom-color: var(--rgt-04); }
.border-bottom-color-rgt-05 { border-bottom-color: var(--rgt-05); }
.border-bottom-color-rgt-06 { border-bottom-color: var(--rgt-06); }
.border-bottom-color-rgt-07 { border-bottom-color: var(--rgt-07); }
.border-bottom-color-rgt-08 { border-bottom-color: var(--rgt-08); }
.border-bottom-color-rgt-09 { border-bottom-color: var(--rgt-09); }
.border-bottom-color-rgt-10 { border-bottom-color: var(--rgt-10); }

/* RGB & Variants */
.border-bottom-color-rgb { border-bottom-color: var(--rgb); }
.border-bottom-color-rgb-001 { border-bottom-color: var(--rgb-001); }
.border-bottom-color-rgb-002 { border-bottom-color: var(--rgb-002); }
.border-bottom-color-rgb-003 { border-bottom-color: var(--rgb-003); }
.border-bottom-color-rgb-004 { border-bottom-color: var(--rgb-004); }
.border-bottom-color-rgb-005 { border-bottom-color: var(--rgb-005); }
.border-bottom-color-rgb-006 { border-bottom-color: var(--rgb-006); }
.border-bottom-color-rgb-007 { border-bottom-color: var(--rgb-007); }
.border-bottom-color-rgb-008 { border-bottom-color: var(--rgb-008); }
.border-bottom-color-rgb-009 { border-bottom-color: var(--rgb-009); }
.border-bottom-color-rgb-01 { border-bottom-color: var(--rgb-01); }
.border-bottom-color-rgb-02 { border-bottom-color: var(--rgb-02); }
.border-bottom-color-rgb-03 { border-bottom-color: var(--rgb-03); }
.border-bottom-color-rgb-04 { border-bottom-color: var(--rgb-04); }
.border-bottom-color-rgb-05 { border-bottom-color: var(--rgb-05); }
.border-bottom-color-rgb-06 { border-bottom-color: var(--rgb-06); }
.border-bottom-color-rgb-07 { border-bottom-color: var(--rgb-07); }
.border-bottom-color-rgb-08 { border-bottom-color: var(--rgb-08); }
.border-bottom-color-rgb-09 { border-bottom-color: var(--rgb-09); }
.border-bottom-color-rgb-10 { border-bottom-color: var(--rgb-10); }

/* Social Media Colors */
.border-bottom-color-facebook { border-bottom-color: #1877f2; }
.border-bottom-color-twitter { border-bottom-color: #000000; }
.border-bottom-color-instagram { border-bottom-color: #e4405f; }
.border-bottom-color-linkedin { border-bottom-color: #0a66c2; }
.border-bottom-color-youtube { border-bottom-color: #ff0000; }
.border-bottom-color-whatsapp { border-bottom-color: #25d366; }
.border-bottom-color-telegram { border-bottom-color: #0088cc; }
.border-bottom-color-discord { border-bottom-color: #5865f2; }
.border-bottom-color-spotify { border-bottom-color: #1db954; }
.border-bottom-color-github { border-bottom-color: #333333; }
.border-bottom-color-pinterest { border-bottom-color: #e60023; }
.border-bottom-color-reddit { border-bottom-color: #ff4500; }
.border-bottom-color-twitch { border-bottom-color: #9146ff; }
.border-bottom-color-snapchat { border-bottom-color: #fffc00; }
.border-bottom-color-tiktok { border-bottom-color: #000000; }
.border-bottom-color-stackoverflow { border-bottom-color: #f48024; }
.border-bottom-color-medium { border-bottom-color: #00ab6c; }
.border-bottom-color-slack { border-bottom-color: #4a154b; }
.border-bottom-color-tumblr { border-bottom-color: #35465c; }
.border-bottom-color-flickr { border-bottom-color: #ff0084; }
.border-bottom-color-vimeo { border-bottom-color: #1ab7ea; }
.border-bottom-color-dribbble { border-bottom-color: #ea4c89; }
.border-bottom-color-behance { border-bottom-color: #1769ff; }
.border-bottom-color-quora { border-bottom-color: #aa2200; }
.border-bottom-color-soundcloud { border-bottom-color: #ff3300; }
.border-bottom-color-periscope { border-bottom-color: #40a4c4; }
.border-bottom-color-messenger { border-bottom-color: #00b2ff; }
.border-bottom-color-wechat { border-bottom-color: #07c160; }
.border-bottom-color-line { border-bottom-color: #00c300; }

/* Reds & Pinks */
.border-bottom-color-red { border-bottom-color: red; }
.border-bottom-color-crimson { border-bottom-color: crimson; }
.border-bottom-color-darkred { border-bottom-color: darkred; }
.border-bottom-color-firebrick { border-bottom-color: firebrick; }
.border-bottom-color-indianred { border-bottom-color: indianred; }
.border-bottom-color-lightcoral { border-bottom-color: lightcoral; }
.border-bottom-color-lightpink { border-bottom-color: lightpink; }
.border-bottom-color-pink { border-bottom-color: pink; }
.border-bottom-color-rose { border-bottom-color: #ff007f; }
.border-bottom-color-tomato { border-bottom-color: tomato; }
.border-bottom-color-salmon { border-bottom-color: salmon; }

/* Blues */
.border-bottom-color-blue { border-bottom-color: blue; }
.border-bottom-color-darkblue { border-bottom-color: darkblue; }
.border-bottom-color-dodgerblue { border-bottom-color: dodgerblue; }
.border-bottom-color-lightblue { border-bottom-color: lightblue; }
.border-bottom-color-lightskyblue { border-bottom-color: lightskyblue; }
.border-bottom-color-mediumblue { border-bottom-color: mediumblue; }
.border-bottom-color-midnightblue { border-bottom-color: midnightblue; }
.border-bottom-color-royalblue { border-bottom-color: royalblue; }
.border-bottom-color-skyblue { border-bottom-color: skyblue; }
.border-bottom-color-steelblue { border-bottom-color: steelblue; }
.border-bottom-color-turquoise { border-bottom-color: turquoise; }
.border-bottom-color-cyan { border-bottom-color: cyan; }
.border-bottom-color-lightcyan { border-bottom-color: lightcyan; }
.border-bottom-color-navy { border-bottom-color: navy; }

/* Greens */
.border-bottom-color-green { border-bottom-color: green; }
.border-bottom-color-darkgreen { border-bottom-color: darkgreen; }
.border-bottom-color-darkolivegreen { border-bottom-color: darkolivegreen; }
.border-bottom-color-forestgreen { border-bottom-color: forestgreen; }
.border-bottom-color-greenyellow { border-bottom-color: greenyellow; }
.border-bottom-color-lime { border-bottom-color: lime; }
.border-bottom-color-limegreen { border-bottom-color: limegreen; }
.border-bottom-color-lightgreen { border-bottom-color: lightgreen; }
.border-bottom-color-mediumseagreen { border-bottom-color: mediumseagreen; }
.border-bottom-color-olivedrab { border-bottom-color: olivedrab; }
.border-bottom-color-palegreen { border-bottom-color: palegreen; }
.border-bottom-color-seagreen { border-bottom-color: seagreen; }
.border-bottom-color-springgreen { border-bottom-color: springgreen; }
.border-bottom-color-yellowgreen { border-bottom-color: yellowgreen; }
.border-bottom-color-teal { border-bottom-color: teal; }
.border-bottom-color-darkcyan { border-bottom-color: darkcyan; }

/* Yellows & Oranges */
.border-bottom-color-gold { border-bottom-color: gold; }
.border-bottom-color-goldenrod { border-bottom-color: goldenrod; }
.border-bottom-color-darkgoldenrod { border-bottom-color: darkgoldenrod; }
.border-bottom-color-lightgoldenrodyellow { border-bottom-color: lightgoldenrodyellow; }
.border-bottom-color-lemonchiffon { border-bottom-color: lemonchiffon; }
.border-bottom-color-palegoldenrod { border-bottom-color: palegoldenrod; }
.border-bottom-color-yellow { border-bottom-color: yellow; }
.border-bottom-color-lightyellow { border-bottom-color: lightyellow; }
.border-bottom-color-orange { border-bottom-color: orange; }
.border-bottom-color-darkorange { border-bottom-color: darkorange; }
.border-bottom-color-coral { border-bottom-color: coral; }
.border-bottom-color-peachpuff { border-bottom-color: peachpuff; }

/* Purples & Violets */
.border-bottom-color-purple { border-bottom-color: rgb(108, 92, 230); }
.border-bottom-color-darkmagenta { border-bottom-color: darkmagenta; }
.border-bottom-color-darkorchid { border-bottom-color: darkorchid; }
.border-bottom-color-darkviolet { border-bottom-color: darkviolet; }
.border-bottom-color-fuchsia { border-bottom-color: fuchsia; }
.border-bottom-color-indigo { border-bottom-color: indigo; }
.border-bottom-color-lavender { border-bottom-color: lavender; }
.border-bottom-color-lavenderblush { border-bottom-color: lavenderblush; }
.border-bottom-color-mediumorchid { border-bottom-color: mediumorchid; }
.border-bottom-color-mediumpurple { border-bottom-color: mediumpurple; }
.border-bottom-color-magenta { border-bottom-color: magenta; }
.border-bottom-color-plum { border-bottom-color: plum; }
.border-bottom-color-thistle { border-bottom-color: thistle; }
.border-bottom-color-violet { border-bottom-color: violet; }
.border-bottom-color-blueviolet { border-bottom-color: blueviolet; }
.border-bottom-color-mediumslateblue { border-bottom-color: mediumslateblue; }
.border-bottom-color-slateblue { border-bottom-color: slateblue; }

/* Browns & Beiges */
.border-bottom-color-brown { border-bottom-color: brown; }
.border-bottom-color-beige { border-bottom-color: beige; }
.border-bottom-color-bisque { border-bottom-color: bisque; }
.border-bottom-color-blanchedalmond { border-bottom-color: blanchedalmond; }
.border-bottom-color-burlywood { border-bottom-color: burlywood; }
.border-bottom-color-chocolate { border-bottom-color: chocolate; }
.border-bottom-color-cornsilk { border-bottom-color: cornsilk; }
.border-bottom-color-darkkhaki { border-bottom-color: darkkhaki; }
.border-bottom-color-gainsboro { border-bottom-color: gainsboro; }
.border-bottom-color-honeydew { border-bottom-color: honeydew; }
.border-bottom-color-ivory { border-bottom-color: ivory; }
.border-bottom-color-khaki { border-bottom-color: khaki; }
.border-bottom-color-lightgray { border-bottom-color: lightgray; }
.border-bottom-color-moccasin { border-bottom-color: moccasin; }
.border-bottom-color-navajowhite { border-bottom-color: navajowhite; }
.border-bottom-color-oldlace { border-bottom-color: oldlace; }
.border-bottom-color-peru { border-bottom-color: peru; }
.border-bottom-color-sandybrown { border-bottom-color: sandybrown; }
.border-bottom-color-sienna { border-bottom-color: sienna; }
.border-bottom-color-tan { border-bottom-color: tan; }
.border-bottom-color-wheat { border-bottom-color: wheat; }

/* Grays */
.border-bottom-color-gray { border-bottom-color: gray; }
.border-bottom-color-darkgray { border-bottom-color: darkgray; }
.border-bottom-color-dimgray { border-bottom-color: dimgray; }
.border-bottom-color-lightslategray { border-bottom-color: lightslategray; }
.border-bottom-color-slategray { border-bottom-color: slategray; }

/* Basic */
.border-bottom-color-white { border-bottom-color: white; }
.border-bottom-color-black { border-bottom-color: black; }
.border-bottom-color-transparent { border-bottom-color: transparent; }
.border-bottom-color-silver { border-bottom-color: silver; }
.border-bottom-color-whitesmoke { border-bottom-color: whitesmoke; }

/* Background Colors */
.border-bottom-color-bg { border-bottom-color: var(--bg); }
.border-bottom-color-bg-light { border-bottom-color: var(--bg-light); }
.border-bottom-color-bg-dark { border-bottom-color: var(--bg-dark); }
.border-bottom-color-bg-lighter { border-bottom-color: var(--bg-lighter); }
.border-bottom-color-bg-dim { border-bottom-color: var(--bg-dim); }

/* Special */
.border-bottom-color-inherit { border-bottom-color: inherit; }
.border-bottom-color-current { border-bottom-color: currentColor; }
.border-bottom-color-green { border-bottom-color: var(--green); }
.border-bottom-color-dark-gold { border-bottom-color: var(--dark-gold); }
.border-bottom-color-primary-text { border-bottom-color: var(--primary-text); }
.border-bottom-color-secondary-text { border-bottom-color: var(--secondary-text); }

/* ===== BORDER LEFT COLORS ===== */
/* Primary & Variants */
.border-left-color-primary { border-left-color: var(--primary); }
.border-left-color-primary-light { border-left-color: var(--primary-light); }
.border-left-color-primary-dark { border-left-color: var(--primary-dark); }
.border-left-color-primary-lighter { border-left-color: var(--primary-lighter); }
.border-left-color-primary-darker { border-left-color: var(--primary-darker); }
.border-left-color-primary-001 { border-left-color: var(--primary-001); }
.border-left-color-primary-002 { border-left-color: var(--primary-002); }
.border-left-color-primary-003 { border-left-color: var(--primary-003); }
.border-left-color-primary-004 { border-left-color: var(--primary-004); }
.border-left-color-primary-005 { border-left-color: var(--primary-005); }
.border-left-color-primary-006 { border-left-color: var(--primary-006); }
.border-left-color-primary-007 { border-left-color: var(--primary-007); }
.border-left-color-primary-008 { border-left-color: var(--primary-008); }
.border-left-color-primary-009 { border-left-color: var(--primary-009); }
.border-left-color-primary-01 { border-left-color: var(--primary-01); }
.border-left-color-primary-02 { border-left-color: var(--primary-02); }
.border-left-color-primary-03 { border-left-color: var(--primary-03); }
.border-left-color-primary-04 { border-left-color: var(--primary-04); }
.border-left-color-primary-05 { border-left-color: var(--primary-05); }
.border-left-color-primary-06 { border-left-color: var(--primary-06); }
.border-left-color-primary-07 { border-left-color: var(--primary-07); }
.border-left-color-primary-08 { border-left-color: var(--primary-08); }
.border-left-color-primary-09 { border-left-color: var(--primary-09); }
.border-left-color-primary-10 { border-left-color: var(--primary-10); }

/* Secondary & Variants */
.border-left-color-secondary { border-left-color: var(--secondary); }
.border-left-color-secondary-light { border-left-color: var(--secondary-light); }
.border-left-color-secondary-dark { border-left-color: var(--secondary-dark); }
.border-left-color-secondary-lighter { border-left-color: var(--secondary-lighter); }
.border-left-color-secondary-darker { border-left-color: var(--secondary-darker); }
.border-left-color-secondary-001 { border-left-color: var(--secondary-001); }
.border-left-color-secondary-002 { border-left-color: var(--secondary-002); }
.border-left-color-secondary-003 { border-left-color: var(--secondary-003); }
.border-left-color-secondary-004 { border-left-color: var(--secondary-004); }
.border-left-color-secondary-005 { border-left-color: var(--secondary-005); }
.border-left-color-secondary-006 { border-left-color: var(--secondary-006); }
.border-left-color-secondary-007 { border-left-color: var(--secondary-007); }
.border-left-color-secondary-008 { border-left-color: var(--secondary-008); }
.border-left-color-secondary-009 { border-left-color: var(--secondary-009); }
.border-left-color-secondary-01 { border-left-color: var(--secondary-01); }
.border-left-color-secondary-02 { border-left-color: var(--secondary-02); }
.border-left-color-secondary-03 { border-left-color: var(--secondary-03); }
.border-left-color-secondary-04 { border-left-color: var(--secondary-04); }
.border-left-color-secondary-05 { border-left-color: var(--secondary-05); }
.border-left-color-secondary-06 { border-left-color: var(--secondary-06); }
.border-left-color-secondary-07 { border-left-color: var(--secondary-07); }
.border-left-color-secondary-08 { border-left-color: var(--secondary-08); }
.border-left-color-secondary-09 { border-left-color: var(--secondary-09); }
.border-left-color-secondary-10 { border-left-color: var(--secondary-10); }

/* RGT & Variants */
.border-left-color-rgt { border-left-color: var(--rgt); }
.border-left-color-rgt-001 { border-left-color: var(--rgt-001); }
.border-left-color-rgt-002 { border-left-color: var(--rgt-002); }
.border-left-color-rgt-003 { border-left-color: var(--rgt-003); }
.border-left-color-rgt-004 { border-left-color: var(--rgt-004); }
.border-left-color-rgt-005 { border-left-color: var(--rgt-005); }
.border-left-color-rgt-006 { border-left-color: var(--rgt-006); }
.border-left-color-rgt-007 { border-left-color: var(--rgt-007); }
.border-left-color-rgt-008 { border-left-color: var(--rgt-008); }
.border-left-color-rgt-009 { border-left-color: var(--rgt-009); }
.border-left-color-rgt-01 { border-left-color: var(--rgt-01); }
.border-left-color-rgt-02 { border-left-color: var(--rgt-02); }
.border-left-color-rgt-03 { border-left-color: var(--rgt-03); }
.border-left-color-rgt-04 { border-left-color: var(--rgt-04); }
.border-left-color-rgt-05 { border-left-color: var(--rgt-05); }
.border-left-color-rgt-06 { border-left-color: var(--rgt-06); }
.border-left-color-rgt-07 { border-left-color: var(--rgt-07); }
.border-left-color-rgt-08 { border-left-color: var(--rgt-08); }
.border-left-color-rgt-09 { border-left-color: var(--rgt-09); }
.border-left-color-rgt-10 { border-left-color: var(--rgt-10); }

/* RGB & Variants */
.border-left-color-rgb { border-left-color: var(--rgb); }
.border-left-color-rgb-001 { border-left-color: var(--rgb-001); }
.border-left-color-rgb-002 { border-left-color: var(--rgb-002); }
.border-left-color-rgb-003 { border-left-color: var(--rgb-003); }
.border-left-color-rgb-004 { border-left-color: var(--rgb-004); }
.border-left-color-rgb-005 { border-left-color: var(--rgb-005); }
.border-left-color-rgb-006 { border-left-color: var(--rgb-006); }
.border-left-color-rgb-007 { border-left-color: var(--rgb-007); }
.border-left-color-rgb-008 { border-left-color: var(--rgb-008); }
.border-left-color-rgb-009 { border-left-color: var(--rgb-009); }
.border-left-color-rgb-01 { border-left-color: var(--rgb-01); }
.border-left-color-rgb-02 { border-left-color: var(--rgb-02); }
.border-left-color-rgb-03 { border-left-color: var(--rgb-03); }
.border-left-color-rgb-04 { border-left-color: var(--rgb-04); }
.border-left-color-rgb-05 { border-left-color: var(--rgb-05); }
.border-left-color-rgb-06 { border-left-color: var(--rgb-06); }
.border-left-color-rgb-07 { border-left-color: var(--rgb-07); }
.border-left-color-rgb-08 { border-left-color: var(--rgb-08); }
.border-left-color-rgb-09 { border-left-color: var(--rgb-09); }
.border-left-color-rgb-10 { border-left-color: var(--rgb-10); }

/* Social Media Colors */
.border-left-color-facebook { border-left-color: #1877f2; }
.border-left-color-twitter { border-left-color: #000000; }
.border-left-color-instagram { border-left-color: #e4405f; }
.border-left-color-linkedin { border-left-color: #0a66c2; }
.border-left-color-youtube { border-left-color: #ff0000; }
.border-left-color-whatsapp { border-left-color: #25d366; }
.border-left-color-telegram { border-left-color: #0088cc; }
.border-left-color-discord { border-left-color: #5865f2; }
.border-left-color-spotify { border-left-color: #1db954; }
.border-left-color-github { border-left-color: #333333; }
.border-left-color-pinterest { border-left-color: #e60023; }
.border-left-color-reddit { border-left-color: #ff4500; }
.border-left-color-twitch { border-left-color: #9146ff; }
.border-left-color-snapchat { border-left-color: #fffc00; }
.border-left-color-tiktok { border-left-color: #000000; }
.border-left-color-stackoverflow { border-left-color: #f48024; }
.border-left-color-medium { border-left-color: #00ab6c; }
.border-left-color-slack { border-left-color: #4a154b; }
.border-left-color-tumblr { border-left-color: #35465c; }
.border-left-color-flickr { border-left-color: #ff0084; }
.border-left-color-vimeo { border-left-color: #1ab7ea; }
.border-left-color-dribbble { border-left-color: #ea4c89; }
.border-left-color-behance { border-left-color: #1769ff; }
.border-left-color-quora { border-left-color: #aa2200; }
.border-left-color-soundcloud { border-left-color: #ff3300; }
.border-left-color-periscope { border-left-color: #40a4c4; }
.border-left-color-messenger { border-left-color: #00b2ff; }
.border-left-color-wechat { border-left-color: #07c160; }
.border-left-color-line { border-left-color: #00c300; }

/* Reds & Pinks */
.border-left-color-red { border-left-color: red; }
.border-left-color-crimson { border-left-color: crimson; }
.border-left-color-darkred { border-left-color: darkred; }
.border-left-color-firebrick { border-left-color: firebrick; }
.border-left-color-indianred { border-left-color: indianred; }
.border-left-color-lightcoral { border-left-color: lightcoral; }
.border-left-color-lightpink { border-left-color: lightpink; }
.border-left-color-pink { border-left-color: pink; }
.border-left-color-rose { border-left-color: #ff007f; }
.border-left-color-tomato { border-left-color: tomato; }
.border-left-color-salmon { border-left-color: salmon; }

/* Blues */
.border-left-color-blue { border-left-color: blue; }
.border-left-color-darkblue { border-left-color: darkblue; }
.border-left-color-dodgerblue { border-left-color: dodgerblue; }
.border-left-color-lightblue { border-left-color: lightblue; }
.border-left-color-lightskyblue { border-left-color: lightskyblue; }
.border-left-color-mediumblue { border-left-color: mediumblue; }
.border-left-color-midnightblue { border-left-color: midnightblue; }
.border-left-color-royalblue { border-left-color: royalblue; }
.border-left-color-skyblue { border-left-color: skyblue; }
.border-left-color-steelblue { border-left-color: steelblue; }
.border-left-color-turquoise { border-left-color: turquoise; }
.border-left-color-cyan { border-left-color: cyan; }
.border-left-color-lightcyan { border-left-color: lightcyan; }
.border-left-color-navy { border-left-color: navy; }

/* Greens */
.border-left-color-green { border-left-color: green; }
.border-left-color-darkgreen { border-left-color: darkgreen; }
.border-left-color-darkolivegreen { border-left-color: darkolivegreen; }
.border-left-color-forestgreen { border-left-color: forestgreen; }
.border-left-color-greenyellow { border-left-color: greenyellow; }
.border-left-color-lime { border-left-color: lime; }
.border-left-color-limegreen { border-left-color: limegreen; }
.border-left-color-lightgreen { border-left-color: lightgreen; }
.border-left-color-mediumseagreen { border-left-color: mediumseagreen; }
.border-left-color-olivedrab { border-left-color: olivedrab; }
.border-left-color-palegreen { border-left-color: palegreen; }
.border-left-color-seagreen { border-left-color: seagreen; }
.border-left-color-springgreen { border-left-color: springgreen; }
.border-left-color-yellowgreen { border-left-color: yellowgreen; }
.border-left-color-teal { border-left-color: teal; }
.border-left-color-darkcyan { border-left-color: darkcyan; }

/* Yellows & Oranges */
.border-left-color-gold { border-left-color: gold; }
.border-left-color-goldenrod { border-left-color: goldenrod; }
.border-left-color-darkgoldenrod { border-left-color: darkgoldenrod; }
.border-left-color-lightgoldenrodyellow { border-left-color: lightgoldenrodyellow; }
.border-left-color-lemonchiffon { border-left-color: lemonchiffon; }
.border-left-color-palegoldenrod { border-left-color: palegoldenrod; }
.border-left-color-yellow { border-left-color: yellow; }
.border-left-color-lightyellow { border-left-color: lightyellow; }
.border-left-color-orange { border-left-color: orange; }
.border-left-color-darkorange { border-left-color: darkorange; }
.border-left-color-coral { border-left-color: coral; }
.border-left-color-peachpuff { border-left-color: peachpuff; }

/* Purples & Violets */
.border-left-color-purple { border-left-color: rgb(108, 92, 230); }
.border-left-color-darkmagenta { border-left-color: darkmagenta; }
.border-left-color-darkorchid { border-left-color: darkorchid; }
.border-left-color-darkviolet { border-left-color: darkviolet; }
.border-left-color-fuchsia { border-left-color: fuchsia; }
.border-left-color-indigo { border-left-color: indigo; }
.border-left-color-lavender { border-left-color: lavender; }
.border-left-color-lavenderblush { border-left-color: lavenderblush; }
.border-left-color-mediumorchid { border-left-color: mediumorchid; }
.border-left-color-mediumpurple { border-left-color: mediumpurple; }
.border-left-color-magenta { border-left-color: magenta; }
.border-left-color-plum { border-left-color: plum; }
.border-left-color-thistle { border-left-color: thistle; }
.border-left-color-violet { border-left-color: violet; }
.border-left-color-blueviolet { border-left-color: blueviolet; }
.border-left-color-mediumslateblue { border-left-color: mediumslateblue; }
.border-left-color-slateblue { border-left-color: slateblue; }

/* Browns & Beiges */
.border-left-color-brown { border-left-color: brown; }
.border-left-color-beige { border-left-color: beige; }
.border-left-color-bisque { border-left-color: bisque; }
.border-left-color-blanchedalmond { border-left-color: blanchedalmond; }
.border-left-color-burlywood { border-left-color: burlywood; }
.border-left-color-chocolate { border-left-color: chocolate; }
.border-left-color-cornsilk { border-left-color: cornsilk; }
.border-left-color-darkkhaki { border-left-color: darkkhaki; }
.border-left-color-gainsboro { border-left-color: gainsboro; }
.border-left-color-honeydew { border-left-color: honeydew; }
.border-left-color-ivory { border-left-color: ivory; }
.border-left-color-khaki { border-left-color: khaki; }
.border-left-color-lightgray { border-left-color: lightgray; }
.border-left-color-moccasin { border-left-color: moccasin; }
.border-left-color-navajowhite { border-left-color: navajowhite; }
.border-left-color-oldlace { border-left-color: oldlace; }
.border-left-color-peru { border-left-color: peru; }
.border-left-color-sandybrown { border-left-color: sandybrown; }
.border-left-color-sienna { border-left-color: sienna; }
.border-left-color-tan { border-left-color: tan; }
.border-left-color-wheat { border-left-color: wheat; }

/* Grays */
.border-left-color-gray { border-left-color: gray; }
.border-left-color-darkgray { border-left-color: darkgray; }
.border-left-color-dimgray { border-left-color: dimgray; }
.border-left-color-lightslategray { border-left-color: lightslategray; }
.border-left-color-slategray { border-left-color: slategray; }

/* Basic */
.border-left-color-white { border-left-color: white; }
.border-left-color-black { border-left-color: black; }
.border-left-color-transparent { border-left-color: transparent; }
.border-left-color-silver { border-left-color: silver; }
.border-left-color-whitesmoke { border-left-color: whitesmoke; }

/* Background Colors */
.border-left-color-bg { border-left-color: var(--bg); }
.border-left-color-bg-light { border-left-color: var(--bg-light); }
.border-left-color-bg-dark { border-left-color: var(--bg-dark); }
.border-left-color-bg-lighter { border-left-color: var(--bg-lighter); }
.border-left-color-bg-dim { border-left-color: var(--bg-dim); }

/* Special */
.border-left-color-inherit { border-left-color: inherit; }
.border-left-color-current { border-left-color: currentColor; }
.border-left-color-green { border-left-color: var(--green); }
.border-left-color-dark-gold { border-left-color: var(--dark-gold); }
.border-left-color-primary-text { border-left-color: var(--primary-text); }
.border-left-color-secondary-text { border-left-color: var(--secondary-text); }

/* ===== BORDER RIGHT COLORS ===== */
/* Primary & Variants */
.border-right-color-primary { border-right-color: var(--primary); }
.border-right-color-primary-light { border-right-color: var(--primary-light); }
.border-right-color-primary-dark { border-right-color: var(--primary-dark); }
.border-right-color-primary-lighter { border-right-color: var(--primary-lighter); }
.border-right-color-primary-darker { border-right-color: var(--primary-darker); }
.border-right-color-primary-001 { border-right-color: var(--primary-001); }
.border-right-color-primary-002 { border-right-color: var(--primary-002); }
.border-right-color-primary-003 { border-right-color: var(--primary-003); }
.border-right-color-primary-004 { border-right-color: var(--primary-004); }
.border-right-color-primary-005 { border-right-color: var(--primary-005); }
.border-right-color-primary-006 { border-right-color: var(--primary-006); }
.border-right-color-primary-007 { border-right-color: var(--primary-007); }
.border-right-color-primary-008 { border-right-color: var(--primary-008); }
.border-right-color-primary-009 { border-right-color: var(--primary-009); }
.border-right-color-primary-01 { border-right-color: var(--primary-01); }
.border-right-color-primary-02 { border-right-color: var(--primary-02); }
.border-right-color-primary-03 { border-right-color: var(--primary-03); }
.border-right-color-primary-04 { border-right-color: var(--primary-04); }
.border-right-color-primary-05 { border-right-color: var(--primary-05); }
.border-right-color-primary-06 { border-right-color: var(--primary-06); }
.border-right-color-primary-07 { border-right-color: var(--primary-07); }
.border-right-color-primary-08 { border-right-color: var(--primary-08); }
.border-right-color-primary-09 { border-right-color: var(--primary-09); }
.border-right-color-primary-10 { border-right-color: var(--primary-10); }

/* Secondary & Variants */
.border-right-color-secondary { border-right-color: var(--secondary); }
.border-right-color-secondary-light { border-right-color: var(--secondary-light); }
.border-right-color-secondary-dark { border-right-color: var(--secondary-dark); }
.border-right-color-secondary-lighter { border-right-color: var(--secondary-lighter); }
.border-right-color-secondary-darker { border-right-color: var(--secondary-darker); }
.border-right-color-secondary-001 { border-right-color: var(--secondary-001); }
.border-right-color-secondary-002 { border-right-color: var(--secondary-002); }
.border-right-color-secondary-003 { border-right-color: var(--secondary-003); }
.border-right-color-secondary-004 { border-right-color: var(--secondary-004); }
.border-right-color-secondary-005 { border-right-color: var(--secondary-005); }
.border-right-color-secondary-006 { border-right-color: var(--secondary-006); }
.border-right-color-secondary-007 { border-right-color: var(--secondary-007); }
.border-right-color-secondary-008 { border-right-color: var(--secondary-008); }
.border-right-color-secondary-009 { border-right-color: var(--secondary-009); }
.border-right-color-secondary-01 { border-right-color: var(--secondary-01); }
.border-right-color-secondary-02 { border-right-color: var(--secondary-02); }
.border-right-color-secondary-03 { border-right-color: var(--secondary-03); }
.border-right-color-secondary-04 { border-right-color: var(--secondary-04); }
.border-right-color-secondary-05 { border-right-color: var(--secondary-05); }
.border-right-color-secondary-06 { border-right-color: var(--secondary-06); }
.border-right-color-secondary-07 { border-right-color: var(--secondary-07); }
.border-right-color-secondary-08 { border-right-color: var(--secondary-08); }
.border-right-color-secondary-09 { border-right-color: var(--secondary-09); }
.border-right-color-secondary-10 { border-right-color: var(--secondary-10); }

/* RGT & Variants */
.border-right-color-rgt { border-right-color: var(--rgt); }
.border-right-color-rgt-001 { border-right-color: var(--rgt-001); }
.border-right-color-rgt-002 { border-right-color: var(--rgt-002); }
.border-right-color-rgt-003 { border-right-color: var(--rgt-003); }
.border-right-color-rgt-004 { border-right-color: var(--rgt-004); }
.border-right-color-rgt-005 { border-right-color: var(--rgt-005); }
.border-right-color-rgt-006 { border-right-color: var(--rgt-006); }
.border-right-color-rgt-007 { border-right-color: var(--rgt-007); }
.border-right-color-rgt-008 { border-right-color: var(--rgt-008); }
.border-right-color-rgt-009 { border-right-color: var(--rgt-009); }
.border-right-color-rgt-01 { border-right-color: var(--rgt-01); }
.border-right-color-rgt-02 { border-right-color: var(--rgt-02); }
.border-right-color-rgt-03 { border-right-color: var(--rgt-03); }
.border-right-color-rgt-04 { border-right-color: var(--rgt-04); }
.border-right-color-rgt-05 { border-right-color: var(--rgt-05); }
.border-right-color-rgt-06 { border-right-color: var(--rgt-06); }
.border-right-color-rgt-07 { border-right-color: var(--rgt-07); }
.border-right-color-rgt-08 { border-right-color: var(--rgt-08); }
.border-right-color-rgt-09 { border-right-color: var(--rgt-09); }
.border-right-color-rgt-10 { border-right-color: var(--rgt-10); }

/* RGB & Variants */
.border-right-color-rgb { border-right-color: var(--rgb); }
.border-right-color-rgb-001 { border-right-color: var(--rgb-001); }
.border-right-color-rgb-002 { border-right-color: var(--rgb-002); }
.border-right-color-rgb-003 { border-right-color: var(--rgb-003); }
.border-right-color-rgb-004 { border-right-color: var(--rgb-004); }
.border-right-color-rgb-005 { border-right-color: var(--rgb-005); }
.border-right-color-rgb-006 { border-right-color: var(--rgb-006); }
.border-right-color-rgb-007 { border-right-color: var(--rgb-007); }
.border-right-color-rgb-008 { border-right-color: var(--rgb-008); }
.border-right-color-rgb-009 { border-right-color: var(--rgb-009); }
.border-right-color-rgb-01 { border-right-color: var(--rgb-01); }
.border-right-color-rgb-02 { border-right-color: var(--rgb-02); }
.border-right-color-rgb-03 { border-right-color: var(--rgb-03); }
.border-right-color-rgb-04 { border-right-color: var(--rgb-04); }
.border-right-color-rgb-05 { border-right-color: var(--rgb-05); }
.border-right-color-rgb-06 { border-right-color: var(--rgb-06); }
.border-right-color-rgb-07 { border-right-color: var(--rgb-07); }
.border-right-color-rgb-08 { border-right-color: var(--rgb-08); }
.border-right-color-rgb-09 { border-right-color: var(--rgb-09); }
.border-right-color-rgb-10 { border-right-color: var(--rgb-10); }

/* Social Media Colors */
.border-right-color-facebook { border-right-color: #1877f2; }
.border-right-color-twitter { border-right-color: #000000; }
.border-right-color-instagram { border-right-color: #e4405f; }
.border-right-color-linkedin { border-right-color: #0a66c2; }
.border-right-color-youtube { border-right-color: #ff0000; }
.border-right-color-whatsapp { border-right-color: #25d366; }
.border-right-color-telegram { border-right-color: #0088cc; }
.border-right-color-discord { border-right-color: #5865f2; }
.border-right-color-spotify { border-right-color: #1db954; }
.border-right-color-github { border-right-color: #333333; }
.border-right-color-pinterest { border-right-color: #e60023; }
.border-right-color-reddit { border-right-color: #ff4500; }
.border-right-color-twitch { border-right-color: #9146ff; }
.border-right-color-snapchat { border-right-color: #fffc00; }
.border-right-color-tiktok { border-right-color: #000000; }
.border-right-color-stackoverflow { border-right-color: #f48024; }
.border-right-color-medium { border-right-color: #00ab6c; }
.border-right-color-slack { border-right-color: #4a154b; }
.border-right-color-tumblr { border-right-color: #35465c; }
.border-right-color-flickr { border-right-color: #ff0084; }
.border-right-color-vimeo { border-right-color: #1ab7ea; }
.border-right-color-dribbble { border-right-color: #ea4c89; }
.border-right-color-behance { border-right-color: #1769ff; }
.border-right-color-quora { border-right-color: #aa2200; }
.border-right-color-soundcloud { border-right-color: #ff3300; }
.border-right-color-periscope { border-right-color: #40a4c4; }
.border-right-color-messenger { border-right-color: #00b2ff; }
.border-right-color-wechat { border-right-color: #07c160; }
.border-right-color-line { border-right-color: #00c300; }

/* Reds & Pinks */
.border-right-color-red { border-right-color: red; }
.border-right-color-crimson { border-right-color: crimson; }
.border-right-color-darkred { border-right-color: darkred; }
.border-right-color-firebrick { border-right-color: firebrick; }
.border-right-color-indianred { border-right-color: indianred; }
.border-right-color-lightcoral { border-right-color: lightcoral; }
.border-right-color-lightpink { border-right-color: lightpink; }
.border-right-color-pink { border-right-color: pink; }
.border-right-color-rose { border-right-color: #ff007f; }
.border-right-color-tomato { border-right-color: tomato; }
.border-right-color-salmon { border-right-color: salmon; }

/* Blues */
.border-right-color-blue { border-right-color: blue; }
.border-right-color-darkblue { border-right-color: darkblue; }
.border-right-color-dodgerblue { border-right-color: dodgerblue; }
.border-right-color-lightblue { border-right-color: lightblue; }
.border-right-color-lightskyblue { border-right-color: lightskyblue; }
.border-right-color-mediumblue { border-right-color: mediumblue; }
.border-right-color-midnightblue { border-right-color: midnightblue; }
.border-right-color-royalblue { border-right-color: royalblue; }
.border-right-color-skyblue { border-right-color: skyblue; }
.border-right-color-steelblue { border-right-color: steelblue; }
.border-right-color-turquoise { border-right-color: turquoise; }
.border-right-color-cyan { border-right-color: cyan; }
.border-right-color-lightcyan { border-right-color: lightcyan; }
.border-right-color-navy { border-right-color: navy; }

/* Greens */
.border-right-color-green { border-right-color: green; }
.border-right-color-darkgreen { border-right-color: darkgreen; }
.border-right-color-darkolivegreen { border-right-color: darkolivegreen; }
.border-right-color-forestgreen { border-right-color: forestgreen; }
.border-right-color-greenyellow { border-right-color: greenyellow; }
.border-right-color-lime { border-right-color: lime; }
.border-right-color-limegreen { border-right-color: limegreen; }
.border-right-color-lightgreen { border-right-color: lightgreen; }
.border-right-color-mediumseagreen { border-right-color: mediumseagreen; }
.border-right-color-olivedrab { border-right-color: olivedrab; }
.border-right-color-palegreen { border-right-color: palegreen; }
.border-right-color-seagreen { border-right-color: seagreen; }
.border-right-color-springgreen { border-right-color: springgreen; }
.border-right-color-yellowgreen { border-right-color: yellowgreen; }
.border-right-color-teal { border-right-color: teal; }
.border-right-color-darkcyan { border-right-color: darkcyan; }

/* Yellows & Oranges */
.border-right-color-gold { border-right-color: gold; }
.border-right-color-goldenrod { border-right-color: goldenrod; }
.border-right-color-darkgoldenrod { border-right-color: darkgoldenrod; }
.border-right-color-lightgoldenrodyellow { border-right-color: lightgoldenrodyellow; }
.border-right-color-lemonchiffon { border-right-color: lemonchiffon; }
.border-right-color-palegoldenrod { border-right-color: palegoldenrod; }
.border-right-color-yellow { border-right-color: yellow; }
.border-right-color-lightyellow { border-right-color: lightyellow; }
.border-right-color-orange { border-right-color: orange; }
.border-right-color-darkorange { border-right-color: darkorange; }
.border-right-color-coral { border-right-color: coral; }
.border-right-color-peachpuff { border-right-color: peachpuff; }

/* Purples & Violets */
.border-right-color-purple { border-right-color: rgb(108, 92, 230); }
.border-right-color-darkmagenta { border-right-color: darkmagenta; }
.border-right-color-darkorchid { border-right-color: darkorchid; }
.border-right-color-darkviolet { border-right-color: darkviolet; }
.border-right-color-fuchsia { border-right-color: fuchsia; }
.border-right-color-indigo { border-right-color: indigo; }
.border-right-color-lavender { border-right-color: lavender; }
.border-right-color-lavenderblush { border-right-color: lavenderblush; }
.border-right-color-mediumorchid { border-right-color: mediumorchid; }
.border-right-color-mediumpurple { border-right-color: mediumpurple; }
.border-right-color-magenta { border-right-color: magenta; }
.border-right-color-plum { border-right-color: plum; }
.border-right-color-thistle { border-right-color: thistle; }
.border-right-color-violet { border-right-color: violet; }
.border-right-color-blueviolet { border-right-color: blueviolet; }
.border-right-color-mediumslateblue { border-right-color: mediumslateblue; }
.border-right-color-slateblue { border-right-color: slateblue; }

/* Browns & Beiges */
.border-right-color-brown { border-right-color: brown; }
.border-right-color-beige { border-right-color: beige; }
.border-right-color-bisque { border-right-color: bisque; }
.border-right-color-blanchedalmond { border-right-color: blanchedalmond; }
.border-right-color-burlywood { border-right-color: burlywood; }
.border-right-color-chocolate { border-right-color: chocolate; }
.border-right-color-cornsilk { border-right-color: cornsilk; }
.border-right-color-darkkhaki { border-right-color: darkkhaki; }
.border-right-color-gainsboro { border-right-color: gainsboro; }
.border-right-color-honeydew { border-right-color: honeydew; }
.border-right-color-ivory { border-right-color: ivory; }
.border-right-color-khaki { border-right-color: khaki; }
.border-right-color-lightgray { border-right-color: lightgray; }
.border-right-color-moccasin { border-right-color: moccasin; }
.border-right-color-navajowhite { border-right-color: navajowhite; }
.border-right-color-oldlace { border-right-color: oldlace; }
.border-right-color-peru { border-right-color: peru; }
.border-right-color-sandybrown { border-right-color: sandybrown; }
.border-right-color-sienna { border-right-color: sienna; }
.border-right-color-tan { border-right-color: tan; }
.border-right-color-wheat { border-right-color: wheat; }

/* Grays */
.border-right-color-gray { border-right-color: gray; }
.border-right-color-darkgray { border-right-color: darkgray; }
.border-right-color-dimgray { border-right-color: dimgray; }
.border-right-color-lightslategray { border-right-color: lightslategray; }
.border-right-color-slategray { border-right-color: slategray; }

/* Basic */
.border-right-color-white { border-right-color: white; }
.border-right-color-black { border-right-color: black; }
.border-right-color-transparent { border-right-color: transparent; }
.border-right-color-silver { border-right-color: silver; }
.border-right-color-whitesmoke { border-right-color: whitesmoke; }

/* Background Colors */
.border-right-color-bg { border-right-color: var(--bg); }
.border-right-color-bg-light { border-right-color: var(--bg-light); }
.border-right-color-bg-dark { border-right-color: var(--bg-dark); }
.border-right-color-bg-lighter { border-right-color: var(--bg-lighter); }
.border-right-color-bg-dim { border-right-color: var(--bg-dim); }

/* Special */
.border-right-color-inherit { border-right-color: inherit; }
.border-right-color-current { border-right-color: currentColor; }
.border-right-color-green { border-right-color: var(--green); }
.border-right-color-dark-gold { border-right-color: var(--dark-gold); }
.border-right-color-primary-text { border-right-color: var(--primary-text); }
.border-right-color-secondary-text { border-right-color: var(--secondary-text); }
/* ===== ADDITIONAL BORDER COLORS ===== */
.border-color-transparent, .border-transparent { border-color: transparent; }
.border-color-current, .border-current { border-color: currentColor; }
.border-color-inherit, .border-inherit-color { border-color: inherit; }

/* ===== BORDER SHORTHAND UTILITIES ===== */
.border { border: 1px solid var(--rgt-02); }
.border-2 { border: 2px solid var(--rgt-02); }
.border-3 { border: 3px solid var(--rgt-02); }
.border-4 { border: 4px solid var(--rgt-02); }
.border-5 { border: 5px solid var(--rgt-02); }

.border-top { border-top: 1px solid var(--rgt-02); }
.border-right { border-right: 1px solid var(--rgt-02); }
.border-bottom { border-bottom: 1px solid var(--rgt-02); }
.border-left { border-left: 1px solid var(--rgt-02); }

.border-x { border-left: 1px solid var(--rgt-02); border-right: 1px solid var(--rgt-02); }
.border-y { border-top: 1px solid var(--rgt-02); border-bottom: 1px solid var(--rgt-02); }

/* ===== BOX SHADOW VARIANTS ===== */

/* 1. Basic Shadows */
.shadow-none { box-shadow: none; }
.shadow-xs { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.shadow-sm { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.shadow { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); }
.shadow-md { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); }
.shadow-lg { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18); }
.shadow-xl { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); }
.shadow-2xl { box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25); }
.shadow-3xl { box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3); }
.shadow-4xl { box-shadow: 0 32px 64px rgba(0, 0, 0, 0.35); }

/* 2. Colored Shadows */
.shadow-primary { box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.4); }
.shadow-primary-light { box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2); }
.shadow-primary-dark { box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.6); }
.shadow-secondary { box-shadow: 0 4px 12px rgba(var(--secondary-rgb), 0.4); }
.shadow-secondary-light { box-shadow: 0 4px 12px rgba(var(--secondary-rgb), 0.2); }
.shadow-secondary-dark { box-shadow: 0 4px 12px rgba(var(--secondary-rgb), 0.6); }

/* 3. Social Media Shadows */
.shadow-facebook { box-shadow: 0 4px 12px rgba(24, 119, 242, 0.4); }
.shadow-twitter { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
.shadow-instagram { box-shadow: 0 4px 12px rgba(228, 64, 95, 0.4); }
.shadow-linkedin { box-shadow: 0 4px 12px rgba(10, 102, 194, 0.4); }
.shadow-youtube { box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4); }
.shadow-whatsapp { box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4); }
.shadow-telegram { box-shadow: 0 4px 12px rgba(0, 136, 204, 0.4); }
.shadow-discord { box-shadow: 0 4px 12px rgba(88, 101, 242, 0.4); }
.shadow-spotify { box-shadow: 0 4px 12px rgba(29, 185, 84, 0.4); }
.shadow-github { box-shadow: 0 4px 12px rgba(51, 51, 51, 0.4); }
.shadow-pinterest { box-shadow: 0 4px 12px rgba(230, 0, 35, 0.4); }
.shadow-reddit { box-shadow: 0 4px 12px rgba(255, 69, 0, 0.4); }
.shadow-twitch { box-shadow: 0 4px 12px rgba(145, 70, 255, 0.4); }
.shadow-snapchat { box-shadow: 0 4px 12px rgba(255, 252, 0, 0.4); }
.shadow-tiktok { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }

/* 4. Inner Shadows */
.shadow-inner { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06); }
.shadow-inner-sm { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); }
.shadow-inner-md { box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.1); }
.shadow-inner-lg { box-shadow: inset 0 8px 16px rgba(0, 0, 0, 0.15); }
.shadow-inner-primary { box-shadow: inset 0 2px 8px rgba(var(--primary-rgb), 0.2); }
.shadow-inner-secondary { box-shadow: inset 0 2px 8px rgba(var(--secondary-rgb), 0.2); }

/* 5. Outline Shadows (Glow) */
.shadow-outline { box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.3); }
.shadow-outline-primary { box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.4); }
.shadow-outline-secondary { box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), 0.4); }
.shadow-outline-white { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); }
.shadow-outline-black { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3); }
.shadow-outline-red { box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.3); }
.shadow-outline-green { box-shadow: 0 0 0 3px rgba(0, 255, 0, 0.3); }
.shadow-outline-gold { box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3); }

/* 6. Glow Shadows */
.shadow-glow { box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.3); }
.shadow-glow-primary { box-shadow: 0 0 30px rgba(var(--primary-rgb), 0.4); }
.shadow-glow-secondary { box-shadow: 0 0 30px rgba(var(--secondary-rgb), 0.4); }
.shadow-glow-white { box-shadow: 0 0 30px rgba(255, 255, 255, 0.2); }
.shadow-glow-red { box-shadow: 0 0 30px rgba(255, 0, 0, 0.3); }
.shadow-glow-green { box-shadow: 0 0 30px rgba(0, 255, 0, 0.3); }
.shadow-glow-blue { box-shadow: 0 0 30px rgba(0, 0, 255, 0.3); }
.shadow-glow-gold { box-shadow: 0 0 30px rgba(255, 215, 0, 0.3); }
.shadow-glow-purple { box-shadow: 0 0 30px rgba(108, 92, 230, 0.3); }
.shadow-glow-pink { box-shadow: 0 0 30px rgba(255, 0, 127, 0.3); }

/* 7. Floating Shadows (Elevation) */
.shadow-elevate-1 { box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.05); }
.shadow-elevate-2 { box-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06); }
.shadow-elevate-3 { box-shadow: 0 8px 16px rgba(0,0,0,0.15), 0 12px 24px rgba(0,0,0,0.08); }
.shadow-elevate-4 { box-shadow: 0 12px 24px rgba(0,0,0,0.18), 0 16px 32px rgba(0,0,0,0.1); }
.shadow-elevate-5 { box-shadow: 0 16px 32px rgba(0,0,0,0.2), 0 20px 40px rgba(0,0,0,0.12); }

/* 8. Directional Shadows */
.shadow-top { box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1); }
.shadow-bottom { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.shadow-left { box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1); }
.shadow-right { box-shadow: 4px 0 12px rgba(0, 0, 0, 0.1); }
.shadow-top-lg { box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15); }
.shadow-bottom-lg { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); }
.shadow-left-lg { box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15); }
.shadow-right-lg { box-shadow: 8px 0 24px rgba(0, 0, 0, 0.15); }
.shadow-top-xl { box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.2); }
.shadow-bottom-xl { box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2); }
.shadow-left-xl { box-shadow: -12px 0 48px rgba(0, 0, 0, 0.2); }
.shadow-right-xl { box-shadow: 12px 0 48px rgba(0, 0, 0, 0.2); }

/* 9. Soft Shadows */
.shadow-soft { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); }
.shadow-soft-sm { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }
.shadow-soft-md { box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1); }
.shadow-soft-lg { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12); }
.shadow-soft-xl { box-shadow: 0 14px 60px rgba(0, 0, 0, 0.15); }

/* 10. Hard Shadows */
.shadow-hard { box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15); }
.shadow-hard-sm { box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1); }
.shadow-hard-md { box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.2); }
.shadow-hard-lg { box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.25); }
.shadow-hard-xl { box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.3); }
.shadow-hard-primary { box-shadow: 4px 4px 0 rgba(var(--primary-rgb), 0.4); }
.shadow-hard-secondary { box-shadow: 4px 4px 0 rgba(var(--secondary-rgb), 0.4); }

/* 11. Colored Hard Shadows */
.shadow-hard-red { box-shadow: 4px 4px 0 rgba(255, 0, 0, 0.3); }
.shadow-hard-green { box-shadow: 4px 4px 0 rgba(0, 255, 0, 0.3); }
.shadow-hard-blue { box-shadow: 4px 4px 0 rgba(0, 0, 255, 0.3); }
.shadow-hard-gold { box-shadow: 4px 4px 0 rgba(255, 215, 0, 0.3); }
.shadow-hard-purple { box-shadow: 4px 4px 0 rgba(108, 92, 230, 0.3); }

/* 12. Spread Shadows */
.shadow-spread-0 { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.shadow-spread-1 { box-shadow: 0 4px 12px -2px rgba(0,0,0,0.1); }
.shadow-spread-2 { box-shadow: 0 4px 12px 0px rgba(0,0,0,0.1); }
.shadow-spread-3 { box-shadow: 0 4px 12px 2px rgba(0,0,0,0.1); }
.shadow-spread-4 { box-shadow: 0 4px 12px 4px rgba(0,0,0,0.1); }
.shadow-spread-5 { box-shadow: 0 4px 12px 6px rgba(0,0,0,0.1); }

/* 13. Text Shadow */
.text-shadow { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.text-shadow-sm { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
.text-shadow-md { text-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); }
.text-shadow-lg { text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); }
.text-shadow-xl { text-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); }
.text-shadow-none { text-shadow: none; }
.text-shadow-primary { text-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.4); }
.text-shadow-secondary { text-shadow: 0 2px 8px rgba(var(--secondary-rgb), 0.4); }
.text-shadow-white { text-shadow: 0 2px 8px rgba(255, 255, 255, 0.3); }
.text-shadow-black { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }

/* 14. Drop Shadow (for images) */
.drop-shadow { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
.drop-shadow-sm { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1)); }
.drop-shadow-md { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); }
.drop-shadow-lg { filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4)); }
.drop-shadow-xl { filter: drop-shadow(0 12px 24px rgba(0,0,0,0.5)); }
.drop-shadow-2xl { filter: drop-shadow(0 16px 32px rgba(0,0,0,0.6)); }
.drop-shadow-primary { filter: drop-shadow(0 4px 12px rgba(var(--primary-rgb), 0.4)); }
.drop-shadow-secondary { filter: drop-shadow(0 4px 12px rgba(var(--secondary-rgb), 0.4)); }
.drop-shadow-none { filter: drop-shadow(none); }

/* 15. Card Shadows (Popular) */
.shadow-card { box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04); }
.shadow-card-hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.06); }
.shadow-card-active { box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.03); }

/* 16. Button Shadows */
.shadow-btn { box-shadow: 0 2px 4px rgba(0,0,0,0.15); }
.shadow-btn-primary { box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3); }
.shadow-btn-secondary { box-shadow: 0 2px 8px rgba(var(--secondary-rgb), 0.3); }
.shadow-btn-hover { box-shadow: 0 4px 12px rgba(0,0,0,0.25); }

/* 17. Modal Shadows */
.shadow-modal { box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.1); }
.shadow-modal-lg { box-shadow: 0 12px 48px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.15); }
.shadow-modal-xl { box-shadow: 0 16px 64px rgba(0,0,0,0.4), 0 12px 32px rgba(0,0,0,0.2); }

/* 18. Navbar Shadows */
.shadow-navbar { box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04); }
.shadow-navbar-lg { box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.05); }
.shadow-navbar-xl { box-shadow: 0 6px 16px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06); }

/* 19. Footer Shadows */
.shadow-footer { box-shadow: 0 -2px 8px rgba(0,0,0,0.06), 0 -1px 4px rgba(0,0,0,0.03); }
.shadow-footer-lg { box-shadow: 0 -4px 12px rgba(0,0,0,0.08), 0 -2px 6px rgba(0,0,0,0.04); }

/* 20. Floating Action Button Shadows */
.shadow-fab { box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.1); }
.shadow-fab-lg { box-shadow: 0 6px 16px rgba(0,0,0,0.25), 0 4px 8px rgba(0,0,0,0.12); }
.shadow-fab-xl { box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 6px 12px rgba(0,0,0,0.15); }

/* transition */
.transition-ease-half, .transition-ease-05s {
    transition: all 0.5s ease;
}
.transition-ease-full, .transition-ease-1s {
    transition: all 1s ease;
}
.transition-linear-half, .transition-linear-05s {
    transition: all 0.5s linear;
}
.transition-linear-full, .transition-linear-1s {
    transition: all 1s linear;
}

/* ===== ADDITIONAL TRANSITION UTILITIES ===== */

/* Ease transitions */
.transition-ease-01s, .transition-ease-0-1s { transition: all 0.1s ease; }
.transition-ease-02s, .transition-ease-0-2s { transition: all 0.2s ease; }
.transition-ease-03s, .transition-ease-0-3s { transition: all 0.3s ease; }
.transition-ease-04s, .transition-ease-0-4s { transition: all 0.4s ease; }
.transition-ease-05s, .transition-ease-0-5s { transition: all 0.5s ease; }
.transition-ease-06s, .transition-ease-0-6s { transition: all 0.6s ease; }
.transition-ease-07s, .transition-ease-0-7s { transition: all 0.7s ease; }
.transition-ease-08s, .transition-ease-0-8s { transition: all 0.8s ease; }
.transition-ease-09s, .transition-ease-0-9s { transition: all 0.9s ease; }
.transition-ease-1s { transition: all 1s ease; }
.transition-ease-2s { transition: all 2s ease; }
.transition-ease-3s { transition: all 3s ease; }
.transition-ease-4s { transition: all 4s ease; }
.transition-ease-5s { transition: all 5s ease; }

/* Linear transitions */
.transition-linear-01s, .transition-linear-0-1s { transition: all 0.1s linear; }
.transition-linear-02s, .transition-linear-0-2s { transition: all 0.2s linear; }
.transition-linear-03s, .transition-linear-0-3s { transition: all 0.3s linear; }
.transition-linear-04s, .transition-linear-0-4s { transition: all 0.4s linear; }
.transition-linear-05s, .transition-linear-0-5s { transition: all 0.5s linear; }
.transition-linear-06s, .transition-linear-0-6s { transition: all 0.6s linear; }
.transition-linear-07s, .transition-linear-0-7s { transition: all 0.7s linear; }
.transition-linear-08s, .transition-linear-0-8s { transition: all 0.8s linear; }
.transition-linear-09s, .transition-linear-0-9s { transition: all 0.9s linear; }
.transition-linear-1s { transition: all 1s linear; }
.transition-linear-2s { transition: all 2s linear; }
.transition-linear-3s { transition: all 3s linear; }
.transition-linear-4s { transition: all 4s linear; }
.transition-linear-5s { transition: all 5s linear; }

/* Ease-in transitions */
.transition-ease-in-01s, .transition-ease-in-0-1s { transition: all 0.1s ease-in; }
.transition-ease-in-02s, .transition-ease-in-0-2s { transition: all 0.2s ease-in; }
.transition-ease-in-03s, .transition-ease-in-0-3s { transition: all 0.3s ease-in; }
.transition-ease-in-04s, .transition-ease-in-0-4s { transition: all 0.4s ease-in; }
.transition-ease-in-05s, .transition-ease-in-0-5s { transition: all 0.5s ease-in; }
.transition-ease-in-06s, .transition-ease-in-0-6s { transition: all 0.6s ease-in; }
.transition-ease-in-07s, .transition-ease-in-0-7s { transition: all 0.7s ease-in; }
.transition-ease-in-08s, .transition-ease-in-0-8s { transition: all 0.8s ease-in; }
.transition-ease-in-09s, .transition-ease-in-0-9s { transition: all 0.9s ease-in; }
.transition-ease-in-1s { transition: all 1s ease-in; }
.transition-ease-in-2s { transition: all 2s ease-in; }
.transition-ease-in-3s { transition: all 3s ease-in; }
.transition-ease-in-4s { transition: all 4s ease-in; }
.transition-ease-in-5s { transition: all 5s ease-in; }

/* Ease-out transitions */
.transition-ease-out-01s, .transition-ease-out-0-1s { transition: all 0.1s ease-out; }
.transition-ease-out-02s, .transition-ease-out-0-2s { transition: all 0.2s ease-out; }
.transition-ease-out-03s, .transition-ease-out-0-3s { transition: all 0.3s ease-out; }
.transition-ease-out-04s, .transition-ease-out-0-4s { transition: all 0.4s ease-out; }
.transition-ease-out-05s, .transition-ease-out-0-5s { transition: all 0.5s ease-out; }
.transition-ease-out-06s, .transition-ease-out-0-6s { transition: all 0.6s ease-out; }
.transition-ease-out-07s, .transition-ease-out-0-7s { transition: all 0.7s ease-out; }
.transition-ease-out-08s, .transition-ease-out-0-8s { transition: all 0.8s ease-out; }
.transition-ease-out-09s, .transition-ease-out-0-9s { transition: all 0.9s ease-out; }
.transition-ease-out-1s { transition: all 1s ease-out; }
.transition-ease-out-2s { transition: all 2s ease-out; }
.transition-ease-out-3s { transition: all 3s ease-out; }
.transition-ease-out-4s { transition: all 4s ease-out; }
.transition-ease-out-5s { transition: all 5s ease-out; }

/* Ease-in-out transitions */
.transition-ease-in-out-01s, .transition-ease-in-out-0-1s { transition: all 0.1s ease-in-out; }
.transition-ease-in-out-02s, .transition-ease-in-out-0-2s { transition: all 0.2s ease-in-out; }
.transition-ease-in-out-03s, .transition-ease-in-out-0-3s { transition: all 0.3s ease-in-out; }
.transition-ease-in-out-04s, .transition-ease-in-out-0-4s { transition: all 0.4s ease-in-out; }
.transition-ease-in-out-05s, .transition-ease-in-out-0-5s { transition: all 0.5s ease-in-out; }
.transition-ease-in-out-06s, .transition-ease-in-out-0-6s { transition: all 0.6s ease-in-out; }
.transition-ease-in-out-07s, .transition-ease-in-out-0-7s { transition: all 0.7s ease-in-out; }
.transition-ease-in-out-08s, .transition-ease-in-out-0-8s { transition: all 0.8s ease-in-out; }
.transition-ease-in-out-09s, .transition-ease-in-out-0-9s { transition: all 0.9s ease-in-out; }
.transition-ease-in-out-1s { transition: all 1s ease-in-out; }
.transition-ease-in-out-2s { transition: all 2s ease-in-out; }
.transition-ease-in-out-3s { transition: all 3s ease-in-out; }
.transition-ease-in-out-4s { transition: all 4s ease-in-out; }
.transition-ease-in-out-5s { transition: all 5s ease-in-out; }

/* ===== SPECIFIC PROPERTY TRANSITIONS ===== */

/* Opacity transitions */
.transition-opacity-01s, .transition-opacity-0-1s { transition: opacity 0.1s ease; }
.transition-opacity-02s, .transition-opacity-0-2s { transition: opacity 0.2s ease; }
.transition-opacity-03s, .transition-opacity-0-3s { transition: opacity 0.3s ease; }
.transition-opacity-04s, .transition-opacity-0-4s { transition: opacity 0.4s ease; }
.transition-opacity-05s, .transition-opacity-0-5s { transition: opacity 0.5s ease; }
.transition-opacity-06s, .transition-opacity-0-6s { transition: opacity 0.6s ease; }
.transition-opacity-07s, .transition-opacity-0-7s { transition: opacity 0.7s ease; }
.transition-opacity-08s, .transition-opacity-0-8s { transition: opacity 0.8s ease; }
.transition-opacity-09s, .transition-opacity-0-9s { transition: opacity 0.9s ease; }
.transition-opacity-1s { transition: opacity 1s ease; }
.transition-opacity-2s { transition: opacity 2s ease; }
.transition-opacity-3s { transition: opacity 3s ease; }
.transition-opacity-4s { transition: opacity 4s ease; }
.transition-opacity-5s { transition: opacity 5s ease; }

/* Transform transitions */
.transition-transform-01s, .transition-transform-0-1s { transition: transform 0.1s ease; }
.transition-transform-02s, .transition-transform-0-2s { transition: transform 0.2s ease; }
.transition-transform-03s, .transition-transform-0-3s { transition: transform 0.3s ease; }
.transition-transform-04s, .transition-transform-0-4s { transition: transform 0.4s ease; }
.transition-transform-05s, .transition-transform-0-5s { transition: transform 0.5s ease; }
.transition-transform-06s, .transition-transform-0-6s { transition: transform 0.6s ease; }
.transition-transform-07s, .transition-transform-0-7s { transition: transform 0.7s ease; }
.transition-transform-08s, .transition-transform-0-8s { transition: transform 0.8s ease; }
.transition-transform-09s, .transition-transform-0-9s { transition: transform 0.9s ease; }
.transition-transform-1s { transition: transform 1s ease; }
.transition-transform-2s { transition: transform 2s ease; }
.transition-transform-3s { transition: transform 3s ease; }
.transition-transform-4s { transition: transform 4s ease; }
.transition-transform-5s { transition: transform 5s ease; }

/* All property transitions with cubic-bezier */
.transition-bezier-01s, .transition-bezier-0-1s { transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1); }
.transition-bezier-02s, .transition-bezier-0-2s { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.transition-bezier-03s, .transition-bezier-0-3s { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.transition-bezier-04s, .transition-bezier-0-4s { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.transition-bezier-05s, .transition-bezier-0-5s { transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.transition-bezier-06s, .transition-bezier-0-6s { transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.transition-bezier-07s, .transition-bezier-0-7s { transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.transition-bezier-08s, .transition-bezier-0-8s { transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.transition-bezier-09s, .transition-bezier-0-9s { transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1); }
.transition-bezier-1s { transition: all 1s cubic-bezier(0.4, 0, 0.2, 1); }
.transition-bezier-2s { transition: all 2s cubic-bezier(0.4, 0, 0.2, 1); }
.transition-bezier-3s { transition: all 3s cubic-bezier(0.4, 0, 0.2, 1); }
.transition-bezier-4s { transition: all 4s cubic-bezier(0.4, 0, 0.2, 1); }
.transition-bezier-5s { transition: all 5s cubic-bezier(0.4, 0, 0.2, 1); }

/* Transition delay utilities */
.transition-delay-01s, .transition-delay-0-1s { transition-delay: 0.1s; }
.transition-delay-02s, .transition-delay-0-2s { transition-delay: 0.2s; }
.transition-delay-03s, .transition-delay-0-3s { transition-delay: 0.3s; }
.transition-delay-04s, .transition-delay-0-4s { transition-delay: 0.4s; }
.transition-delay-05s, .transition-delay-0-5s { transition-delay: 0.5s; }
.transition-delay-06s, .transition-delay-0-6s { transition-delay: 0.6s; }
.transition-delay-07s, .transition-delay-0-7s { transition-delay: 0.7s; }
.transition-delay-08s, .transition-delay-0-8s { transition-delay: 0.8s; }
.transition-delay-09s, .transition-delay-0-9s { transition-delay: 0.9s; }
.transition-delay-1s { transition-delay: 1s; }
.transition-delay-2s { transition-delay: 2s; }
.transition-delay-3s { transition-delay: 3s; }
.transition-delay-4s { transition-delay: 4s; }
.transition-delay-5s { transition-delay: 5s; }

/* ============================================
   ALPINE.JS TRANSITION UTILITY CLASSES
   ============================================ */

/* ===== SHARED TRANSITIONS ===== */
.transition-none { transition: none; }
.transition-fast { transition: all 0.15s ease; }
.transition-normal { transition: all 0.3s ease; }
.transition-slow,.transition-all { transition: all 0.5s ease; }
.transition-slower { transition: all 1s ease; }
.transition-slowest { transition: all 1.2s ease; }


/* ===== EASING FUNCTIONS ===== */
.ease-linear { transition-timing-function: linear; }
.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.ease-bounce { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.ease-elastic { transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }

/* ===== 1. FADE ===== */
.fade-enter { opacity: 0; }
.fade-enter-end { opacity: 1; }
.fade-leave { opacity: 1; }
.fade-leave-end { opacity: 0; }

/* ===== 2. DIRECTIONS ===== */
/* TOP - Slide Down */
.top-enter { transform: translateY(-100%); opacity: 0; }
.top-enter-end { transform: translateY(0); opacity: 1; }
.top-leave { transform: translateY(0); opacity: 1; }
.top-leave-end { transform: translateY(-100%); opacity: 0; }

/* BOTTOM - Slide Up */
.bottom-enter { transform: translateY(100%); opacity: 0; }
.bottom-enter-end { transform: translateY(0); opacity: 1; }
.bottom-leave { transform: translateY(0); opacity: 1; }
.bottom-leave-end { transform: translateY(100%); opacity: 0; }

/* LEFT - Slide Right */
.left-enter { transform: translateX(-100%); opacity: 0; }
.left-enter-end { transform: translateX(0); opacity: 1; }
.left-leave { transform: translateX(0); opacity: 1; }
.left-leave-end { transform: translateX(-100%); opacity: 0; }

/* RIGHT - Slide Left */
.right-enter { transform: translateX(100%); opacity: 0; }
.right-enter-end { transform: translateX(0); opacity: 1; }
.right-leave { transform: translateX(0); opacity: 1; }
.right-leave-end { transform: translateX(100%); opacity: 0; }

/* ===== 3. FADE + DIRECTION ===== */
/* FADE TOP */
.fade-top-enter { transform: translateY(-50px); opacity: 0; }
.fade-top-enter-end { transform: translateY(0); opacity: 1; }
.fade-top-leave { transform: translateY(0); opacity: 1; }
.fade-top-leave-end { transform: translateY(-50px); opacity: 0; }

/* FADE BOTTOM */
.fade-bottom-enter { transform: translateY(50px); opacity: 0; }
.fade-bottom-enter-end { transform: translateY(0); opacity: 1; }
.fade-bottom-leave { transform: translateY(0); opacity: 1; }
.fade-bottom-leave-end { transform: translateY(50px); opacity: 0; }

/* FADE LEFT */
.fade-left-enter { transform: translateX(-50px); opacity: 0; }
.fade-left-enter-end { transform: translateX(0); opacity: 1; }
.fade-left-leave { transform: translateX(0); opacity: 1; }
.fade-left-leave-end { transform: translateX(-50px); opacity: 0; }

/* FADE RIGHT */
.fade-right-enter { transform: translateX(50px); opacity: 0; }
.fade-right-enter-end { transform: translateX(0); opacity: 1; }
.fade-right-leave { transform: translateX(0); opacity: 1; }
.fade-right-leave-end { transform: translateX(50px); opacity: 0; }

/* ===== 4. SCALE ===== */
/* SCALE DEFAULT */
.scale-enter { transform: scale(0.8); opacity: 0; }
.scale-enter-end { transform: scale(1); opacity: 1; }
.scale-leave { transform: scale(1); opacity: 1; }
.scale-leave-end { transform: scale(0.8); opacity: 0; }

/* SCALE LARGE */
.scale-large-enter { transform: scale(1.5); opacity: 0; }
.scale-large-enter-end { transform: scale(1); opacity: 1; }
.scale-large-leave { transform: scale(1); opacity: 1; }
.scale-large-leave-end { transform: scale(1.5); opacity: 0; }

/* SCALE SMALL */
.scale-small-enter { transform: scale(0.3); opacity: 0; }
.scale-small-enter-end { transform: scale(1); opacity: 1; }
.scale-small-leave { transform: scale(1); opacity: 1; }
.scale-small-leave-end { transform: scale(0.3); opacity: 0; }

/* SCALE + TOP */
.scale-top-enter { transform: scale(0.8) translateY(-50px); opacity: 0; }
.scale-top-enter-end { transform: scale(1) translateY(0); opacity: 1; }
.scale-top-leave { transform: scale(1) translateY(0); opacity: 1; }
.scale-top-leave-end { transform: scale(0.8) translateY(-50px); opacity: 0; }

/* SCALE + BOTTOM */
.scale-bottom-enter { transform: scale(0.8) translateY(50px); opacity: 0; }
.scale-bottom-enter-end { transform: scale(1) translateY(0); opacity: 1; }
.scale-bottom-leave { transform: scale(1) translateY(0); opacity: 1; }
.scale-bottom-leave-end { transform: scale(0.8) translateY(50px); opacity: 0; }

/* SCALE + LEFT */
.scale-left-enter { transform: scale(0.8) translateX(-50px); opacity: 0; }
.scale-left-enter-end { transform: scale(1) translateX(0); opacity: 1; }
.scale-left-leave { transform: scale(1) translateX(0); opacity: 1; }
.scale-left-leave-end { transform: scale(0.8) translateX(-50px); opacity: 0; }

/* SCALE + RIGHT */
.scale-right-enter { transform: scale(0.8) translateX(50px); opacity: 0; }
.scale-right-enter-end { transform: scale(1) translateX(0); opacity: 1; }
.scale-right-leave { transform: scale(1) translateX(0); opacity: 1; }
.scale-right-leave-end { transform: scale(0.8) translateX(50px); opacity: 0; }

/* ===== 5. ROTATION ===== */
/* ROTATE */
.rotate-enter { transform: rotate(-180deg); opacity: 0; }
.rotate-enter-end { transform: rotate(0); opacity: 1; }
.rotate-leave { transform: rotate(0); opacity: 1; }
.rotate-leave-end { transform: rotate(180deg); opacity: 0; }

/* ROTATE + SCALE */
.rotate-scale-enter { transform: rotate(-180deg) scale(0.5); opacity: 0; }
.rotate-scale-enter-end { transform: rotate(0) scale(1); opacity: 1; }
.rotate-scale-leave { transform: rotate(0) scale(1); opacity: 1; }
.rotate-scale-leave-end { transform: rotate(180deg) scale(0.5); opacity: 0; }

/* ===== 6. 3D TRANSITIONS ===== */
/* FLIP */
.flip-enter { transform: perspective(400px) rotateY(90deg); opacity: 0; }
.flip-enter-end { transform: perspective(400px) rotateY(0); opacity: 1; }
.flip-leave { transform: perspective(400px) rotateY(0); opacity: 1; }
.flip-leave-end { transform: perspective(400px) rotateY(-90deg); opacity: 0; }

/* TURN */
.turn-enter { transform: perspective(400px) rotateX(90deg); opacity: 0; }
.turn-enter-end { transform: perspective(400px) rotateX(0); opacity: 1; }
.turn-leave { transform: perspective(400px) rotateX(0); opacity: 1; }
.turn-leave-end { transform: perspective(400px) rotateX(-90deg); opacity: 0; }

/* ===== 7. BOUNCE ===== */
/* BOUNCE */
.bounce-enter { transform: scale(0.3); opacity: 0; }
.bounce-enter-end { transform: scale(1.05); opacity: 1; }
.bounce-enter-to { transform: scale(1); }

/* BOUNCE TOP */
.bounce-top-enter { transform: translateY(-200%); opacity: 0; }
.bounce-top-enter-end { transform: translateY(10%); opacity: 1; }
.bounce-top-enter-to { transform: translateY(0); }

/* BOUNCE BOTTOM */
.bounce-bottom-enter { transform: translateY(200%); opacity: 0; }
.bounce-bottom-enter-end { transform: translateY(-10%); opacity: 1; }
.bounce-bottom-enter-to { transform: translateY(0); }

/* BOUNCE LEFT */
.bounce-left-enter { transform: translateX(-200%); opacity: 0; }
.bounce-left-enter-end { transform: translateX(10%); opacity: 1; }
.bounce-left-enter-to { transform: translateX(0); }

/* BOUNCE RIGHT */
.bounce-right-enter { transform: translateX(200%); opacity: 0; }
.bounce-right-enter-end { transform: translateX(-10%); opacity: 1; }
.bounce-right-enter-to { transform: translateX(0); }

/* ===== 8. BLUR ===== */
/* BLUR */
.blur-enter { filter: blur(10px); opacity: 0; }
.blur-enter-end { filter: blur(0); opacity: 1; }
.blur-leave { filter: blur(0); opacity: 1; }
.blur-leave-end { filter: blur(10px); opacity: 0; }

/* BLUR + TOP */
.blur-top-enter { filter: blur(10px); transform: translateY(-50px); opacity: 0; }
.blur-top-enter-end { filter: blur(0); transform: translateY(0); opacity: 1; }
.blur-top-leave { filter: blur(0); transform: translateY(0); opacity: 1; }
.blur-top-leave-end { filter: blur(10px); transform: translateY(-50px); opacity: 0; }

/* BLUR + BOTTOM */
.blur-bottom-enter { filter: blur(10px); transform: translateY(50px); opacity: 0; }
.blur-bottom-enter-end { filter: blur(0); transform: translateY(0); opacity: 1; }
.blur-bottom-leave { filter: blur(0); transform: translateY(0); opacity: 1; }
.blur-bottom-leave-end { filter: blur(10px); transform: translateY(50px); opacity: 0; }

/* BLUR + SCALE */
.blur-scale-enter { filter: blur(10px); transform: scale(0.8); opacity: 0; }
.blur-scale-enter-end { filter: blur(0); transform: scale(1); opacity: 1; }
.blur-scale-leave { filter: blur(0); transform: scale(1); opacity: 1; }
.blur-scale-leave-end { filter: blur(10px); transform: scale(0.8); opacity: 0; }

/* ===== 9. SKEW ===== */
.skew-enter { transform: skewX(-20deg); opacity: 0; }
.skew-enter-end { transform: skewX(0); opacity: 1; }
.skew-leave { transform: skewX(0); opacity: 1; }
.skew-leave-end { transform: skewX(20deg); opacity: 0; }

.skew-top-enter { transform: skewX(-20deg) translateY(-50px); opacity: 0; }
.skew-top-enter-end { transform: skewX(0) translateY(0); opacity: 1; }
.skew-top-leave { transform: skewX(0) translateY(0); opacity: 1; }
.skew-top-leave-end { transform: skewX(20deg) translateY(-50px); opacity: 0; }

/* ===== 10. SPECIALTY ===== */
/* FLIP VERTICAL */
.flip-vertical-enter { transform: scaleY(0); opacity: 0; }
.flip-vertical-enter-end { transform: scaleY(1); opacity: 1; }
.flip-vertical-leave { transform: scaleY(1); opacity: 1; }
.flip-vertical-leave-end { transform: scaleY(0); opacity: 0; }

/* FLIP HORIZONTAL */
.flip-horizontal-enter { transform: scaleX(0); opacity: 0; }
.flip-horizontal-enter-end { transform: scaleX(1); opacity: 1; }
.flip-horizontal-leave { transform: scaleX(1); opacity: 1; }
.flip-horizontal-leave-end { transform: scaleX(0); opacity: 0; }

/* SLIDE + ROTATE */
.slide-rotate-enter { transform: translateX(-100%) rotate(-90deg); opacity: 0; }
.slide-rotate-enter-end { transform: translateX(0) rotate(0); opacity: 1; }
.slide-rotate-leave { transform: translateX(0) rotate(0); opacity: 1; }
.slide-rotate-leave-end { transform: translateX(100%) rotate(90deg); opacity: 0; }

/* ===== 11. CUSTOM EASING COMBINATIONS ===== */
.bounce-fast {
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.elastic {
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.smooth {
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.spring {
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* ==================== ALL PADDING ==================== */
.p-0, .p-0px { padding: 0; }
.p-1, .p-1px { padding: 1px; }
.p-2, .p-2px { padding: 2px; }
.p-3, .p-3px { padding: 3px; }
.p-4, .p-4px { padding: 4px; }
.p-5, .p-5px { padding: 5px; }
.p-6, .p-6px { padding: 6px; }
.p-7, .p-7px { padding: 7px; }
.p-8, .p-8px { padding: 8px; }
.p-9, .p-9px { padding: 9px; }
.p-10, .p-10px { padding: 10px; }
.p-11, .p-11px { padding: 11px; }
.p-12, .p-12px { padding: 12px; }
.p-13, .p-13px { padding: 13px; }
.p-14, .p-14px { padding: 14px; }
.p-15, .p-15px { padding: 15px; }
.p-16, .p-16px { padding: 16px; }
.p-17, .p-17px { padding: 17px; }
.p-18, .p-18px { padding: 18px; }
.p-19, .p-19px { padding: 19px; }
.p-20, .p-20px { padding: 20px; }
.p-21, .p-21px { padding: 21px; }
.p-22, .p-22px { padding: 22px; }
.p-23, .p-23px { padding: 23px; }
.p-24, .p-24px { padding: 24px; }
.p-25, .p-25px { padding: 25px; }
.p-26, .p-26px { padding: 26px; }
.p-27, .p-27px { padding: 27px; }
.p-28, .p-28px { padding: 28px; }
.p-29, .p-29px { padding: 29px; }
.p-30, .p-30px { padding: 30px; }
.p-31, .p-31px { padding: 31px; }
.p-32, .p-32px { padding: 32px; }
.p-33, .p-33px { padding: 33px; }
.p-34, .p-34px { padding: 34px; }
.p-35, .p-35px { padding: 35px; }
.p-36, .p-36px { padding: 36px; }
.p-37, .p-37px { padding: 37px; }
.p-38, .p-38px { padding: 38px; }
.p-39, .p-39px { padding: 39px; }
.p-40, .p-40px { padding: 40px; }
.p-41, .p-41px { padding: 41px; }
.p-42, .p-42px { padding: 42px; }
.p-43, .p-43px { padding: 43px; }
.p-44, .p-44px { padding: 44px; }
.p-45, .p-45px { padding: 45px; }
.p-46, .p-46px { padding: 46px; }
.p-47, .p-47px { padding: 47px; }
.p-48, .p-48px { padding: 48px; }
.p-49, .p-49px { padding: 49px; }
.p-50, .p-50px { padding: 50px; }

/* ==================== PADDING Y-AXIS (Top & Bottom) ==================== */
.p-y-0, .p-y-0px { padding-top: 0; padding-bottom: 0; }
.p-y-1, .p-y-1px { padding-top: 1px; padding-bottom: 1px; }
.p-y-2, .p-y-2px { padding-top: 2px; padding-bottom: 2px; }
.p-y-3, .p-y-3px { padding-top: 3px; padding-bottom: 3px; }
.p-y-4, .p-y-4px { padding-top: 4px; padding-bottom: 4px; }
.p-y-5, .p-y-5px { padding-top: 5px; padding-bottom: 5px; }
.p-y-6, .p-y-6px { padding-top: 6px; padding-bottom: 6px; }
.p-y-7, .p-y-7px { padding-top: 7px; padding-bottom: 7px; }
.p-y-8, .p-y-8px { padding-top: 8px; padding-bottom: 8px; }
.p-y-9, .p-y-9px { padding-top: 9px; padding-bottom: 9px; }
.p-y-10, .p-y-10px { padding-top: 10px; padding-bottom: 10px; }
.p-y-11, .p-y-11px { padding-top: 11px; padding-bottom: 11px; }
.p-y-12, .p-y-12px { padding-top: 12px; padding-bottom: 12px; }
.p-y-13, .p-y-13px { padding-top: 13px; padding-bottom: 13px; }
.p-y-14, .p-y-14px { padding-top: 14px; padding-bottom: 14px; }
.p-y-15, .p-y-15px { padding-top: 15px; padding-bottom: 15px; }
.p-y-16, .p-y-16px { padding-top: 16px; padding-bottom: 16px; }
.p-y-17, .p-y-17px { padding-top: 17px; padding-bottom: 17px; }
.p-y-18, .p-y-18px { padding-top: 18px; padding-bottom: 18px; }
.p-y-19, .p-y-19px { padding-top: 19px; padding-bottom: 19px; }
.p-y-20, .p-y-20px { padding-top: 20px; padding-bottom: 20px; }
.p-y-21, .p-y-21px { padding-top: 21px; padding-bottom: 21px; }
.p-y-22, .p-y-22px { padding-top: 22px; padding-bottom: 22px; }
.p-y-23, .p-y-23px { padding-top: 23px; padding-bottom: 23px; }
.p-y-24, .p-y-24px { padding-top: 24px; padding-bottom: 24px; }
.p-y-25, .p-y-25px { padding-top: 25px; padding-bottom: 25px; }
.p-y-26, .p-y-26px { padding-top: 26px; padding-bottom: 26px; }
.p-y-27, .p-y-27px { padding-top: 27px; padding-bottom: 27px; }
.p-y-28, .p-y-28px { padding-top: 28px; padding-bottom: 28px; }
.p-y-29, .p-y-29px { padding-top: 29px; padding-bottom: 29px; }
.p-y-30, .p-y-30px { padding-top: 30px; padding-bottom: 30px; }
.p-y-31, .p-y-31px { padding-top: 31px; padding-bottom: 31px; }
.p-y-32, .p-y-32px { padding-top: 32px; padding-bottom: 32px; }
.p-y-33, .p-y-33px { padding-top: 33px; padding-bottom: 33px; }
.p-y-34, .p-y-34px { padding-top: 34px; padding-bottom: 34px; }
.p-y-35, .p-y-35px { padding-top: 35px; padding-bottom: 35px; }
.p-y-36, .p-y-36px { padding-top: 36px; padding-bottom: 36px; }
.p-y-37, .p-y-37px { padding-top: 37px; padding-bottom: 37px; }
.p-y-38, .p-y-38px { padding-top: 38px; padding-bottom: 38px; }
.p-y-39, .p-y-39px { padding-top: 39px; padding-bottom: 39px; }
.p-y-40, .p-y-40px { padding-top: 40px; padding-bottom: 40px; }
.p-y-41, .p-y-41px { padding-top: 41px; padding-bottom: 41px; }
.p-y-42, .p-y-42px { padding-top: 42px; padding-bottom: 42px; }
.p-y-43, .p-y-43px { padding-top: 43px; padding-bottom: 43px; }
.p-y-44, .p-y-44px { padding-top: 44px; padding-bottom: 44px; }
.p-y-45, .p-y-45px { padding-top: 45px; padding-bottom: 45px; }
.p-y-46, .p-y-46px { padding-top: 46px; padding-bottom: 46px; }
.p-y-47, .p-y-47px { padding-top: 47px; padding-bottom: 47px; }
.p-y-48, .p-y-48px { padding-top: 48px; padding-bottom: 48px; }
.p-y-49, .p-y-49px { padding-top: 49px; padding-bottom: 49px; }
.p-y-50, .p-y-50px { padding-top: 50px; padding-bottom: 50px; }

/* ==================== PADDING X-AXIS (Left & Right) ==================== */
.p-x-0, .p-x-0px { padding-left: 0; padding-right: 0; }
.p-x-1, .p-x-1px { padding-left: 1px; padding-right: 1px; }
.p-x-2, .p-x-2px { padding-left: 2px; padding-right: 2px; }
.p-x-3, .p-x-3px { padding-left: 3px; padding-right: 3px; }
.p-x-4, .p-x-4px { padding-left: 4px; padding-right: 4px; }
.p-x-5, .p-x-5px { padding-left: 5px; padding-right: 5px; }
.p-x-6, .p-x-6px { padding-left: 6px; padding-right: 6px; }
.p-x-7, .p-x-7px { padding-left: 7px; padding-right: 7px; }
.p-x-8, .p-x-8px { padding-left: 8px; padding-right: 8px; }
.p-x-9, .p-x-9px { padding-left: 9px; padding-right: 9px; }
.p-x-10, .p-x-10px { padding-left: 10px; padding-right: 10px; }
.p-x-11, .p-x-11px { padding-left: 11px; padding-right: 11px; }
.p-x-12, .p-x-12px { padding-left: 12px; padding-right: 12px; }
.p-x-13, .p-x-13px { padding-left: 13px; padding-right: 13px; }
.p-x-14, .p-x-14px { padding-left: 14px; padding-right: 14px; }
.p-x-15, .p-x-15px { padding-left: 15px; padding-right: 15px; }
.p-x-16, .p-x-16px { padding-left: 16px; padding-right: 16px; }
.p-x-17, .p-x-17px { padding-left: 17px; padding-right: 17px; }
.p-x-18, .p-x-18px { padding-left: 18px; padding-right: 18px; }
.p-x-19, .p-x-19px { padding-left: 19px; padding-right: 19px; }
.p-x-20, .p-x-20px { padding-left: 20px; padding-right: 20px; }
.p-x-21, .p-x-21px { padding-left: 21px; padding-right: 21px; }
.p-x-22, .p-x-22px { padding-left: 22px; padding-right: 22px; }
.p-x-23, .p-x-23px { padding-left: 23px; padding-right: 23px; }
.p-x-24, .p-x-24px { padding-left: 24px; padding-right: 24px; }
.p-x-25, .p-x-25px { padding-left: 25px; padding-right: 25px; }
.p-x-26, .p-x-26px { padding-left: 26px; padding-right: 26px; }
.p-x-27, .p-x-27px { padding-left: 27px; padding-right: 27px; }
.p-x-28, .p-x-28px { padding-left: 28px; padding-right: 28px; }
.p-x-29, .p-x-29px { padding-left: 29px; padding-right: 29px; }
.p-x-30, .p-x-30px { padding-left: 30px; padding-right: 30px; }
.p-x-31, .p-x-31px { padding-left: 31px; padding-right: 31px; }
.p-x-32, .p-x-32px { padding-left: 32px; padding-right: 32px; }
.p-x-33, .p-x-33px { padding-left: 33px; padding-right: 33px; }
.p-x-34, .p-x-34px { padding-left: 34px; padding-right: 34px; }
.p-x-35, .p-x-35px { padding-left: 35px; padding-right: 35px; }
.p-x-36, .p-x-36px { padding-left: 36px; padding-right: 36px; }
.p-x-37, .p-x-37px { padding-left: 37px; padding-right: 37px; }
.p-x-38, .p-x-38px { padding-left: 38px; padding-right: 38px; }
.p-x-39, .p-x-39px { padding-left: 39px; padding-right: 39px; }
.p-x-40, .p-x-40px { padding-left: 40px; padding-right: 40px; }
.p-x-41, .p-x-41px { padding-left: 41px; padding-right: 41px; }
.p-x-42, .p-x-42px { padding-left: 42px; padding-right: 42px; }
.p-x-43, .p-x-43px { padding-left: 43px; padding-right: 43px; }
.p-x-44, .p-x-44px { padding-left: 44px; padding-right: 44px; }
.p-x-45, .p-x-45px { padding-left: 45px; padding-right: 45px; }
.p-x-46, .p-x-46px { padding-left: 46px; padding-right: 46px; }
.p-x-47, .p-x-47px { padding-left: 47px; padding-right: 47px; }
.p-x-48, .p-x-48px { padding-left: 48px; padding-right: 48px; }
.p-x-49, .p-x-49px { padding-left: 49px; padding-right: 49px; }
.p-x-50, .p-x-50px { padding-left: 50px; padding-right: 50px; }

/* ==================== PADDING TOP ==================== */
.p-top-0, .p-top-0px { padding-top: 0; }
.p-top-1, .p-top-1px { padding-top: 1px; }
.p-top-2, .p-top-2px { padding-top: 2px; }
.p-top-3, .p-top-3px { padding-top: 3px; }
.p-top-4, .p-top-4px { padding-top: 4px; }
.p-top-5, .p-top-5px { padding-top: 5px; }
.p-top-6, .p-top-6px { padding-top: 6px; }
.p-top-7, .p-top-7px { padding-top: 7px; }
.p-top-8, .p-top-8px { padding-top: 8px; }
.p-top-9, .p-top-9px { padding-top: 9px; }
.p-top-10, .p-top-10px { padding-top: 10px; }
.p-top-11, .p-top-11px { padding-top: 11px; }
.p-top-12, .p-top-12px { padding-top: 12px; }
.p-top-13, .p-top-13px { padding-top: 13px; }
.p-top-14, .p-top-14px { padding-top: 14px; }
.p-top-15, .p-top-15px { padding-top: 15px; }
.p-top-16, .p-top-16px { padding-top: 16px; }
.p-top-17, .p-top-17px { padding-top: 17px; }
.p-top-18, .p-top-18px { padding-top: 18px; }
.p-top-19, .p-top-19px { padding-top: 19px; }
.p-top-20, .p-top-20px { padding-top: 20px; }
.p-top-21, .p-top-21px { padding-top: 21px; }
.p-top-22, .p-top-22px { padding-top: 22px; }
.p-top-23, .p-top-23px { padding-top: 23px; }
.p-top-24, .p-top-24px { padding-top: 24px; }
.p-top-25, .p-top-25px { padding-top: 25px; }
.p-top-26, .p-top-26px { padding-top: 26px; }
.p-top-27, .p-top-27px { padding-top: 27px; }
.p-top-28, .p-top-28px { padding-top: 28px; }
.p-top-29, .p-top-29px { padding-top: 29px; }
.p-top-30, .p-top-30px { padding-top: 30px; }
.p-top-31, .p-top-31px { padding-top: 31px; }
.p-top-32, .p-top-32px { padding-top: 32px; }
.p-top-33, .p-top-33px { padding-top: 33px; }
.p-top-34, .p-top-34px { padding-top: 34px; }
.p-top-35, .p-top-35px { padding-top: 35px; }
.p-top-36, .p-top-36px { padding-top: 36px; }
.p-top-37, .p-top-37px { padding-top: 37px; }
.p-top-38, .p-top-38px { padding-top: 38px; }
.p-top-39, .p-top-39px { padding-top: 39px; }
.p-top-40, .p-top-40px { padding-top: 40px; }
.p-top-41, .p-top-41px { padding-top: 41px; }
.p-top-42, .p-top-42px { padding-top: 42px; }
.p-top-43, .p-top-43px { padding-top: 43px; }
.p-top-44, .p-top-44px { padding-top: 44px; }
.p-top-45, .p-top-45px { padding-top: 45px; }
.p-top-46, .p-top-46px { padding-top: 46px; }
.p-top-47, .p-top-47px { padding-top: 47px; }
.p-top-48, .p-top-48px { padding-top: 48px; }
.p-top-49, .p-top-49px { padding-top: 49px; }
.p-top-50, .p-top-50px { padding-top: 50px; }

/* ==================== PADDING BOTTOM ==================== */
.p-bottom-0, .p-bottom-0px { padding-bottom: 0; }
.p-bottom-1, .p-bottom-1px { padding-bottom: 1px; }
.p-bottom-2, .p-bottom-2px { padding-bottom: 2px; }
.p-bottom-3, .p-bottom-3px { padding-bottom: 3px; }
.p-bottom-4, .p-bottom-4px { padding-bottom: 4px; }
.p-bottom-5, .p-bottom-5px { padding-bottom: 5px; }
.p-bottom-6, .p-bottom-6px { padding-bottom: 6px; }
.p-bottom-7, .p-bottom-7px { padding-bottom: 7px; }
.p-bottom-8, .p-bottom-8px { padding-bottom: 8px; }
.p-bottom-9, .p-bottom-9px { padding-bottom: 9px; }
.p-bottom-10, .p-bottom-10px { padding-bottom: 10px; }
.p-bottom-11, .p-bottom-11px { padding-bottom: 11px; }
.p-bottom-12, .p-bottom-12px { padding-bottom: 12px; }
.p-bottom-13, .p-bottom-13px { padding-bottom: 13px; }
.p-bottom-14, .p-bottom-14px { padding-bottom: 14px; }
.p-bottom-15, .p-bottom-15px { padding-bottom: 15px; }
.p-bottom-16, .p-bottom-16px { padding-bottom: 16px; }
.p-bottom-17, .p-bottom-17px { padding-bottom: 17px; }
.p-bottom-18, .p-bottom-18px { padding-bottom: 18px; }
.p-bottom-19, .p-bottom-19px { padding-bottom: 19px; }
.p-bottom-20, .p-bottom-20px { padding-bottom: 20px; }
.p-bottom-21, .p-bottom-21px { padding-bottom: 21px; }
.p-bottom-22, .p-bottom-22px { padding-bottom: 22px; }
.p-bottom-23, .p-bottom-23px { padding-bottom: 23px; }
.p-bottom-24, .p-bottom-24px { padding-bottom: 24px; }
.p-bottom-25, .p-bottom-25px { padding-bottom: 25px; }
.p-bottom-26, .p-bottom-26px { padding-bottom: 26px; }
.p-bottom-27, .p-bottom-27px { padding-bottom: 27px; }
.p-bottom-28, .p-bottom-28px { padding-bottom: 28px; }
.p-bottom-29, .p-bottom-29px { padding-bottom: 29px; }
.p-bottom-30, .p-bottom-30px { padding-bottom: 30px; }
.p-bottom-31, .p-bottom-31px { padding-bottom: 31px; }
.p-bottom-32, .p-bottom-32px { padding-bottom: 32px; }
.p-bottom-33, .p-bottom-33px { padding-bottom: 33px; }
.p-bottom-34, .p-bottom-34px { padding-bottom: 34px; }
.p-bottom-35, .p-bottom-35px { padding-bottom: 35px; }
.p-bottom-36, .p-bottom-36px { padding-bottom: 36px; }
.p-bottom-37, .p-bottom-37px { padding-bottom: 37px; }
.p-bottom-38, .p-bottom-38px { padding-bottom: 38px; }
.p-bottom-39, .p-bottom-39px { padding-bottom: 39px; }
.p-bottom-40, .p-bottom-40px { padding-bottom: 40px; }
.p-bottom-41, .p-bottom-41px { padding-bottom: 41px; }
.p-bottom-42, .p-bottom-42px { padding-bottom: 42px; }
.p-bottom-43, .p-bottom-43px { padding-bottom: 43px; }
.p-bottom-44, .p-bottom-44px { padding-bottom: 44px; }
.p-bottom-45, .p-bottom-45px { padding-bottom: 45px; }
.p-bottom-46, .p-bottom-46px { padding-bottom: 46px; }
.p-bottom-47, .p-bottom-47px { padding-bottom: 47px; }
.p-bottom-48, .p-bottom-48px { padding-bottom: 48px; }
.p-bottom-49, .p-bottom-49px { padding-bottom: 49px; }
.p-bottom-50, .p-bottom-50px { padding-bottom: 50px; }

/* ==================== PADDING LEFT ==================== */
.p-left-0, .p-left-0px { padding-left: 0; }
.p-left-1, .p-left-1px { padding-left: 1px; }
.p-left-2, .p-left-2px { padding-left: 2px; }
.p-left-3, .p-left-3px { padding-left: 3px; }
.p-left-4, .p-left-4px { padding-left: 4px; }
.p-left-5, .p-left-5px { padding-left: 5px; }
.p-left-6, .p-left-6px { padding-left: 6px; }
.p-left-7, .p-left-7px { padding-left: 7px; }
.p-left-8, .p-left-8px { padding-left: 8px; }
.p-left-9, .p-left-9px { padding-left: 9px; }
.p-left-10, .p-left-10px { padding-left: 10px; }
.p-left-11, .p-left-11px { padding-left: 11px; }
.p-left-12, .p-left-12px { padding-left: 12px; }
.p-left-13, .p-left-13px { padding-left: 13px; }
.p-left-14, .p-left-14px { padding-left: 14px; }
.p-left-15, .p-left-15px { padding-left: 15px; }
.p-left-16, .p-left-16px { padding-left: 16px; }
.p-left-17, .p-left-17px { padding-left: 17px; }
.p-left-18, .p-left-18px { padding-left: 18px; }
.p-left-19, .p-left-19px { padding-left: 19px; }
.p-left-20, .p-left-20px { padding-left: 20px; }
.p-left-21, .p-left-21px { padding-left: 21px; }
.p-left-22, .p-left-22px { padding-left: 22px; }
.p-left-23, .p-left-23px { padding-left: 23px; }
.p-left-24, .p-left-24px { padding-left: 24px; }
.p-left-25, .p-left-25px { padding-left: 25px; }
.p-left-26, .p-left-26px { padding-left: 26px; }
.p-left-27, .p-left-27px { padding-left: 27px; }
.p-left-28, .p-left-28px { padding-left: 28px; }
.p-left-29, .p-left-29px { padding-left: 29px; }
.p-left-30, .p-left-30px { padding-left: 30px; }
.p-left-31, .p-left-31px { padding-left: 31px; }
.p-left-32, .p-left-32px { padding-left: 32px; }
.p-left-33, .p-left-33px { padding-left: 33px; }
.p-left-34, .p-left-34px { padding-left: 34px; }
.p-left-35, .p-left-35px { padding-left: 35px; }
.p-left-36, .p-left-36px { padding-left: 36px; }
.p-left-37, .p-left-37px { padding-left: 37px; }
.p-left-38, .p-left-38px { padding-left: 38px; }
.p-left-39, .p-left-39px { padding-left: 39px; }
.p-left-40, .p-left-40px { padding-left: 40px; }
.p-left-41, .p-left-41px { padding-left: 41px; }
.p-left-42, .p-left-42px { padding-left: 42px; }
.p-left-43, .p-left-43px { padding-left: 43px; }
.p-left-44, .p-left-44px { padding-left: 44px; }
.p-left-45, .p-left-45px { padding-left: 45px; }
.p-left-46, .p-left-46px { padding-left: 46px; }
.p-left-47, .p-left-47px { padding-left: 47px; }
.p-left-48, .p-left-48px { padding-left: 48px; }
.p-left-49, .p-left-49px { padding-left: 49px; }
.p-left-50, .p-left-50px { padding-left: 50px; }

/* ==================== PADDING RIGHT ==================== */
.p-right-0, .p-right-0px { padding-right: 0; }
.p-right-1, .p-right-1px { padding-right: 1px; }
.p-right-2, .p-right-2px { padding-right: 2px; }
.p-right-3, .p-right-3px { padding-right: 3px; }
.p-right-4, .p-right-4px { padding-right: 4px; }
.p-right-5, .p-right-5px { padding-right: 5px; }
.p-right-6, .p-right-6px { padding-right: 6px; }
.p-right-7, .p-right-7px { padding-right: 7px; }
.p-right-8, .p-right-8px { padding-right: 8px; }
.p-right-9, .p-right-9px { padding-right: 9px; }
.p-right-10, .p-right-10px { padding-right: 10px; }
.p-right-11, .p-right-11px { padding-right: 11px; }
.p-right-12, .p-right-12px { padding-right: 12px; }
.p-right-13, .p-right-13px { padding-right: 13px; }
.p-right-14, .p-right-14px { padding-right: 14px; }
.p-right-15, .p-right-15px { padding-right: 15px; }
.p-right-16, .p-right-16px { padding-right: 16px; }
.p-right-17, .p-right-17px { padding-right: 17px; }
.p-right-18, .p-right-18px { padding-right: 18px; }
.p-right-19, .p-right-19px { padding-right: 19px; }
.p-right-20, .p-right-20px { padding-right: 20px; }
.p-right-21, .p-right-21px { padding-right: 21px; }
.p-right-22, .p-right-22px { padding-right: 22px; }
.p-right-23, .p-right-23px { padding-right: 23px; }
.p-right-24, .p-right-24px { padding-right: 24px; }
.p-right-25, .p-right-25px { padding-right: 25px; }
.p-right-26, .p-right-26px { padding-right: 26px; }
.p-right-27, .p-right-27px { padding-right: 27px; }
.p-right-28, .p-right-28px { padding-right: 28px; }
.p-right-29, .p-right-29px { padding-right: 29px; }
.p-right-30, .p-right-30px { padding-right: 30px; }
.p-right-31, .p-right-31px { padding-right: 31px; }
.p-right-32, .p-right-32px { padding-right: 32px; }
.p-right-33, .p-right-33px { padding-right: 33px; }
.p-right-34, .p-right-34px { padding-right: 34px; }
.p-right-35, .p-right-35px { padding-right: 35px; }
.p-right-36, .p-right-36px { padding-right: 36px; }
.p-right-37, .p-right-37px { padding-right: 37px; }
.p-right-38, .p-right-38px { padding-right: 38px; }
.p-right-39, .p-right-39px { padding-right: 39px; }
.p-right-40, .p-right-40px { padding-right: 40px; }
.p-right-41, .p-right-41px { padding-right: 41px; }
.p-right-42, .p-right-42px { padding-right: 42px; }
.p-right-43, .p-right-43px { padding-right: 43px; }
.p-right-44, .p-right-44px { padding-right: 44px; }
.p-right-45, .p-right-45px { padding-right: 45px; }
.p-right-46, .p-right-46px { padding-right: 46px; }
.p-right-47, .p-right-47px { padding-right: 47px; }
.p-right-48, .p-right-48px { padding-right: 48px; }
.p-right-49, .p-right-49px { padding-right: 49px; }
.p-right-50, .p-right-50px { padding-right: 50px; }
/* margin */
.m-10, .m-10px { margin: 10px; }
.m-y-10, .m-y-10px { margin-top: 10px; margin-bottom: 10px; }
.m-x-10, .m-x-10px { margin-left: 10px; margin-right: 10px; }
.m-full-auto { margin: auto; }
.m-x-auto { margin-left: auto; margin-right: auto; }
.m-y-auto { margin-top: auto; margin-bottom: auto; }
.m-top-10, .m-top-10px { margin-top: 10px !important; }
.m-top-20, .m-top-20px { margin-top: 20px !important; }
.m-top-50, .m-top-50px { margin-top: 50px !important; }
.m-bottom-20, .m-bottom-20px { margin-bottom: 20px !important; }
.m-bottom-50, .m-bottom-50px { margin-bottom: 50px !important; }
.m-left-20, .m-left-20px { margin-left: 20px !important; }
.m-right-20, .m-right-20px { margin-right: 20px !important; }
.m-bottom-10, .m-bottom-10px { margin-bottom: 10px !important; }
.m-left-10, .m-left-10px { margin-left: 10px !important; }
.m-right-10, .m-right-10px { margin-right: 10px !important; }
.m-5, .m-5px { margin: 5px; }
.m-top-auto { margin-top: auto; }
.m-bottom-auto { margin-bottom: auto; }
.m-left-auto { margin-left: auto; }
.m-right-auto { margin-right: auto; }

/* ===== ADDITIONAL MARGIN VALUES 1-100 ===== */
.m-1, .m-1px { margin: 1px; }
.m-2, .m-2px { margin: 2px; }
.m-3, .m-3px { margin: 3px; }
.m-4, .m-4px { margin: 4px; }
.m-5, .m-5px { margin: 5px; }
.m-6, .m-6px { margin: 6px; }
.m-7, .m-7px { margin: 7px; }
.m-8, .m-8px { margin: 8px; }
.m-9, .m-9px { margin: 9px; }
.m-10, .m-10px { margin: 10px; }
.m-11, .m-11px { margin: 11px; }
.m-12, .m-12px { margin: 12px; }
.m-13, .m-13px { margin: 13px; }
.m-14, .m-14px { margin: 14px; }
.m-15, .m-15px { margin: 15px; }
.m-16, .m-16px { margin: 16px; }
.m-17, .m-17px { margin: 17px; }
.m-18, .m-18px { margin: 18px; }
.m-19, .m-19px { margin: 19px; }
.m-20, .m-20px { margin: 20px; }
.m-21, .m-21px { margin: 21px; }
.m-22, .m-22px { margin: 22px; }
.m-23, .m-23px { margin: 23px; }
.m-24, .m-24px { margin: 24px; }
.m-25, .m-25px { margin: 25px; }
.m-26, .m-26px { margin: 26px; }
.m-27, .m-27px { margin: 27px; }
.m-28, .m-28px { margin: 28px; }
.m-29, .m-29px { margin: 29px; }
.m-30, .m-30px { margin: 30px; }
.m-31, .m-31px { margin: 31px; }
.m-32, .m-32px { margin: 32px; }
.m-33, .m-33px { margin: 33px; }
.m-34, .m-34px { margin: 34px; }
.m-35, .m-35px { margin: 35px; }
.m-36, .m-36px { margin: 36px; }
.m-37, .m-37px { margin: 37px; }
.m-38, .m-38px { margin: 38px; }
.m-39, .m-39px { margin: 39px; }
.m-40, .m-40px { margin: 40px; }
.m-41, .m-41px { margin: 41px; }
.m-42, .m-42px { margin: 42px; }
.m-43, .m-43px { margin: 43px; }
.m-44, .m-44px { margin: 44px; }
.m-45, .m-45px { margin: 45px; }
.m-46, .m-46px { margin: 46px; }
.m-47, .m-47px { margin: 47px; }
.m-48, .m-48px { margin: 48px; }
.m-49, .m-49px { margin: 49px; }
.m-50, .m-50px { margin: 50px; }
.m-51, .m-51px { margin: 51px; }
.m-52, .m-52px { margin: 52px; }
.m-53, .m-53px { margin: 53px; }
.m-54, .m-54px { margin: 54px; }
.m-55, .m-55px { margin: 55px; }
.m-56, .m-56px { margin: 56px; }
.m-57, .m-57px { margin: 57px; }
.m-58, .m-58px { margin: 58px; }
.m-59, .m-59px { margin: 59px; }
.m-60, .m-60px { margin: 60px; }
.m-61, .m-61px { margin: 61px; }
.m-62, .m-62px { margin: 62px; }
.m-63, .m-63px { margin: 63px; }
.m-64, .m-64px { margin: 64px; }
.m-65, .m-65px { margin: 65px; }
.m-66, .m-66px { margin: 66px; }
.m-67, .m-67px { margin: 67px; }
.m-68, .m-68px { margin: 68px; }
.m-69, .m-69px { margin: 69px; }
.m-70, .m-70px { margin: 70px; }
.m-71, .m-71px { margin: 71px; }
.m-72, .m-72px { margin: 72px; }
.m-73, .m-73px { margin: 73px; }
.m-74, .m-74px { margin: 74px; }
.m-75, .m-75px { margin: 75px; }
.m-76, .m-76px { margin: 76px; }
.m-77, .m-77px { margin: 77px; }
.m-78, .m-78px { margin: 78px; }
.m-79, .m-79px { margin: 79px; }
.m-80, .m-80px { margin: 80px; }
.m-81, .m-81px { margin: 81px; }
.m-82, .m-82px { margin: 82px; }
.m-83, .m-83px { margin: 83px; }
.m-84, .m-84px { margin: 84px; }
.m-85, .m-85px { margin: 85px; }
.m-86, .m-86px { margin: 86px; }
.m-87, .m-87px { margin: 87px; }
.m-88, .m-88px { margin: 88px; }
.m-89, .m-89px { margin: 89px; }
.m-90, .m-90px { margin: 90px; }
.m-91, .m-91px { margin: 91px; }
.m-92, .m-92px { margin: 92px; }
.m-93, .m-93px { margin: 93px; }
.m-94, .m-94px { margin: 94px; }
.m-95, .m-95px { margin: 95px; }
.m-96, .m-96px { margin: 96px; }
.m-97, .m-97px { margin: 97px; }
.m-98, .m-98px { margin: 98px; }
.m-99, .m-99px { margin: 99px; }
.m-100, .m-100px { margin: 100px; }

/* M-Y (Top & Bottom) - all values 1-100 */
.m-y-1, .m-y-1px { margin-top: 1px; margin-bottom: 1px; }
.m-y-2, .m-y-2px { margin-top: 2px; margin-bottom: 2px; }
.m-y-3, .m-y-3px { margin-top: 3px; margin-bottom: 3px; }
.m-y-4, .m-y-4px { margin-top: 4px; margin-bottom: 4px; }
.m-y-5, .m-y-5px { margin-top: 5px; margin-bottom: 5px; }
.m-y-6, .m-y-6px { margin-top: 6px; margin-bottom: 6px; }
.m-y-7, .m-y-7px { margin-top: 7px; margin-bottom: 7px; }
.m-y-8, .m-y-8px { margin-top: 8px; margin-bottom: 8px; }
.m-y-9, .m-y-9px { margin-top: 9px; margin-bottom: 9px; }
.m-y-10, .m-y-10px { margin-top: 10px; margin-bottom: 10px; }
.m-y-11, .m-y-11px { margin-top: 11px; margin-bottom: 11px; }
.m-y-12, .m-y-12px { margin-top: 12px; margin-bottom: 12px; }
.m-y-13, .m-y-13px { margin-top: 13px; margin-bottom: 13px; }
.m-y-14, .m-y-14px { margin-top: 14px; margin-bottom: 14px; }
.m-y-15, .m-y-15px { margin-top: 15px; margin-bottom: 15px; }
.m-y-16, .m-y-16px { margin-top: 16px; margin-bottom: 16px; }
.m-y-17, .m-y-17px { margin-top: 17px; margin-bottom: 17px; }
.m-y-18, .m-y-18px { margin-top: 18px; margin-bottom: 18px; }
.m-y-19, .m-y-19px { margin-top: 19px; margin-bottom: 19px; }
.m-y-20, .m-y-20px { margin-top: 20px; margin-bottom: 20px; }
.m-y-21, .m-y-21px { margin-top: 21px; margin-bottom: 21px; }
.m-y-22, .m-y-22px { margin-top: 22px; margin-bottom: 22px; }
.m-y-23, .m-y-23px { margin-top: 23px; margin-bottom: 23px; }
.m-y-24, .m-y-24px { margin-top: 24px; margin-bottom: 24px; }
.m-y-25, .m-y-25px { margin-top: 25px; margin-bottom: 25px; }
.m-y-26, .m-y-26px { margin-top: 26px; margin-bottom: 26px; }
.m-y-27, .m-y-27px { margin-top: 27px; margin-bottom: 27px; }
.m-y-28, .m-y-28px { margin-top: 28px; margin-bottom: 28px; }
.m-y-29, .m-y-29px { margin-top: 29px; margin-bottom: 29px; }
.m-y-30, .m-y-30px { margin-top: 30px; margin-bottom: 30px; }
.m-y-31, .m-y-31px { margin-top: 31px; margin-bottom: 31px; }
.m-y-32, .m-y-32px { margin-top: 32px; margin-bottom: 32px; }
.m-y-33, .m-y-33px { margin-top: 33px; margin-bottom: 33px; }
.m-y-34, .m-y-34px { margin-top: 34px; margin-bottom: 34px; }
.m-y-35, .m-y-35px { margin-top: 35px; margin-bottom: 35px; }
.m-y-36, .m-y-36px { margin-top: 36px; margin-bottom: 36px; }
.m-y-37, .m-y-37px { margin-top: 37px; margin-bottom: 37px; }
.m-y-38, .m-y-38px { margin-top: 38px; margin-bottom: 38px; }
.m-y-39, .m-y-39px { margin-top: 39px; margin-bottom: 39px; }
.m-y-40, .m-y-40px { margin-top: 40px; margin-bottom: 40px; }
.m-y-41, .m-y-41px { margin-top: 41px; margin-bottom: 41px; }
.m-y-42, .m-y-42px { margin-top: 42px; margin-bottom: 42px; }
.m-y-43, .m-y-43px { margin-top: 43px; margin-bottom: 43px; }
.m-y-44, .m-y-44px { margin-top: 44px; margin-bottom: 44px; }
.m-y-45, .m-y-45px { margin-top: 45px; margin-bottom: 45px; }
.m-y-46, .m-y-46px { margin-top: 46px; margin-bottom: 46px; }
.m-y-47, .m-y-47px { margin-top: 47px; margin-bottom: 47px; }
.m-y-48, .m-y-48px { margin-top: 48px; margin-bottom: 48px; }
.m-y-49, .m-y-49px { margin-top: 49px; margin-bottom: 49px; }
.m-y-50, .m-y-50px { margin-top: 50px; margin-bottom: 50px; }
.m-y-51, .m-y-51px { margin-top: 51px; margin-bottom: 51px; }
.m-y-52, .m-y-52px { margin-top: 52px; margin-bottom: 52px; }
.m-y-53, .m-y-53px { margin-top: 53px; margin-bottom: 53px; }
.m-y-54, .m-y-54px { margin-top: 54px; margin-bottom: 54px; }
.m-y-55, .m-y-55px { margin-top: 55px; margin-bottom: 55px; }
.m-y-56, .m-y-56px { margin-top: 56px; margin-bottom: 56px; }
.m-y-57, .m-y-57px { margin-top: 57px; margin-bottom: 57px; }
.m-y-58, .m-y-58px { margin-top: 58px; margin-bottom: 58px; }
.m-y-59, .m-y-59px { margin-top: 59px; margin-bottom: 59px; }
.m-y-60, .m-y-60px { margin-top: 60px; margin-bottom: 60px; }
.m-y-61, .m-y-61px { margin-top: 61px; margin-bottom: 61px; }
.m-y-62, .m-y-62px { margin-top: 62px; margin-bottom: 62px; }
.m-y-63, .m-y-63px { margin-top: 63px; margin-bottom: 63px; }
.m-y-64, .m-y-64px { margin-top: 64px; margin-bottom: 64px; }
.m-y-65, .m-y-65px { margin-top: 65px; margin-bottom: 65px; }
.m-y-66, .m-y-66px { margin-top: 66px; margin-bottom: 66px; }
.m-y-67, .m-y-67px { margin-top: 67px; margin-bottom: 67px; }
.m-y-68, .m-y-68px { margin-top: 68px; margin-bottom: 68px; }
.m-y-69, .m-y-69px { margin-top: 69px; margin-bottom: 69px; }
.m-y-70, .m-y-70px { margin-top: 70px; margin-bottom: 70px; }
.m-y-71, .m-y-71px { margin-top: 71px; margin-bottom: 71px; }
.m-y-72, .m-y-72px { margin-top: 72px; margin-bottom: 72px; }
.m-y-73, .m-y-73px { margin-top: 73px; margin-bottom: 73px; }
.m-y-74, .m-y-74px { margin-top: 74px; margin-bottom: 74px; }
.m-y-75, .m-y-75px { margin-top: 75px; margin-bottom: 75px; }
.m-y-76, .m-y-76px { margin-top: 76px; margin-bottom: 76px; }
.m-y-77, .m-y-77px { margin-top: 77px; margin-bottom: 77px; }
.m-y-78, .m-y-78px { margin-top: 78px; margin-bottom: 78px; }
.m-y-79, .m-y-79px { margin-top: 79px; margin-bottom: 79px; }
.m-y-80, .m-y-80px { margin-top: 80px; margin-bottom: 80px; }
.m-y-81, .m-y-81px { margin-top: 81px; margin-bottom: 81px; }
.m-y-82, .m-y-82px { margin-top: 82px; margin-bottom: 82px; }
.m-y-83, .m-y-83px { margin-top: 83px; margin-bottom: 83px; }
.m-y-84, .m-y-84px { margin-top: 84px; margin-bottom: 84px; }
.m-y-85, .m-y-85px { margin-top: 85px; margin-bottom: 85px; }
.m-y-86, .m-y-86px { margin-top: 86px; margin-bottom: 86px; }
.m-y-87, .m-y-87px { margin-top: 87px; margin-bottom: 87px; }
.m-y-88, .m-y-88px { margin-top: 88px; margin-bottom: 88px; }
.m-y-89, .m-y-89px { margin-top: 89px; margin-bottom: 89px; }
.m-y-90, .m-y-90px { margin-top: 90px; margin-bottom: 90px; }
.m-y-91, .m-y-91px { margin-top: 91px; margin-bottom: 91px; }
.m-y-92, .m-y-92px { margin-top: 92px; margin-bottom: 92px; }
.m-y-93, .m-y-93px { margin-top: 93px; margin-bottom: 93px; }
.m-y-94, .m-y-94px { margin-top: 94px; margin-bottom: 94px; }
.m-y-95, .m-y-95px { margin-top: 95px; margin-bottom: 95px; }
.m-y-96, .m-y-96px { margin-top: 96px; margin-bottom: 96px; }
.m-y-97, .m-y-97px { margin-top: 97px; margin-bottom: 97px; }
.m-y-98, .m-y-98px { margin-top: 98px; margin-bottom: 98px; }
.m-y-99, .m-y-99px { margin-top: 99px; margin-bottom: 99px; }
.m-y-100, .m-y-100px { margin-top: 100px; margin-bottom: 100px; }

/* M-X (Left & Right) - all values 1-100 */
.m-x-1, .m-x-1px { margin-left: 1px; margin-right: 1px; }
.m-x-2, .m-x-2px { margin-left: 2px; margin-right: 2px; }
.m-x-3, .m-x-3px { margin-left: 3px; margin-right: 3px; }
.m-x-4, .m-x-4px { margin-left: 4px; margin-right: 4px; }
.m-x-5, .m-x-5px { margin-left: 5px; margin-right: 5px; }
.m-x-6, .m-x-6px { margin-left: 6px; margin-right: 6px; }
.m-x-7, .m-x-7px { margin-left: 7px; margin-right: 7px; }
.m-x-8, .m-x-8px { margin-left: 8px; margin-right: 8px; }
.m-x-9, .m-x-9px { margin-left: 9px; margin-right: 9px; }
.m-x-10, .m-x-10px { margin-left: 10px; margin-right: 10px; }
.m-x-11, .m-x-11px { margin-left: 11px; margin-right: 11px; }
.m-x-12, .m-x-12px { margin-left: 12px; margin-right: 12px; }
.m-x-13, .m-x-13px { margin-left: 13px; margin-right: 13px; }
.m-x-14, .m-x-14px { margin-left: 14px; margin-right: 14px; }
.m-x-15, .m-x-15px { margin-left: 15px; margin-right: 15px; }
.m-x-16, .m-x-16px { margin-left: 16px; margin-right: 16px; }
.m-x-17, .m-x-17px { margin-left: 17px; margin-right: 17px; }
.m-x-18, .m-x-18px { margin-left: 18px; margin-right: 18px; }
.m-x-19, .m-x-19px { margin-left: 19px; margin-right: 19px; }
.m-x-20, .m-x-20px { margin-left: 20px; margin-right: 20px; }
.m-x-21, .m-x-21px { margin-left: 21px; margin-right: 21px; }
.m-x-22, .m-x-22px { margin-left: 22px; margin-right: 22px; }
.m-x-23, .m-x-23px { margin-left: 23px; margin-right: 23px; }
.m-x-24, .m-x-24px { margin-left: 24px; margin-right: 24px; }
.m-x-25, .m-x-25px { margin-left: 25px; margin-right: 25px; }
.m-x-26, .m-x-26px { margin-left: 26px; margin-right: 26px; }
.m-x-27, .m-x-27px { margin-left: 27px; margin-right: 27px; }
.m-x-28, .m-x-28px { margin-left: 28px; margin-right: 28px; }
.m-x-29, .m-x-29px { margin-left: 29px; margin-right: 29px; }
.m-x-30, .m-x-30px { margin-left: 30px; margin-right: 30px; }
.m-x-31, .m-x-31px { margin-left: 31px; margin-right: 31px; }
.m-x-32, .m-x-32px { margin-left: 32px; margin-right: 32px; }
.m-x-33, .m-x-33px { margin-left: 33px; margin-right: 33px; }
.m-x-34, .m-x-34px { margin-left: 34px; margin-right: 34px; }
.m-x-35, .m-x-35px { margin-left: 35px; margin-right: 35px; }
.m-x-36, .m-x-36px { margin-left: 36px; margin-right: 36px; }
.m-x-37, .m-x-37px { margin-left: 37px; margin-right: 37px; }
.m-x-38, .m-x-38px { margin-left: 38px; margin-right: 38px; }
.m-x-39, .m-x-39px { margin-left: 39px; margin-right: 39px; }
.m-x-40, .m-x-40px { margin-left: 40px; margin-right: 40px; }
.m-x-41, .m-x-41px { margin-left: 41px; margin-right: 41px; }
.m-x-42, .m-x-42px { margin-left: 42px; margin-right: 42px; }
.m-x-43, .m-x-43px { margin-left: 43px; margin-right: 43px; }
.m-x-44, .m-x-44px { margin-left: 44px; margin-right: 44px; }
.m-x-45, .m-x-45px { margin-left: 45px; margin-right: 45px; }
.m-x-46, .m-x-46px { margin-left: 46px; margin-right: 46px; }
.m-x-47, .m-x-47px { margin-left: 47px; margin-right: 47px; }
.m-x-48, .m-x-48px { margin-left: 48px; margin-right: 48px; }
.m-x-49, .m-x-49px { margin-left: 49px; margin-right: 49px; }
.m-x-50, .m-x-50px { margin-left: 50px; margin-right: 50px; }
.m-x-51, .m-x-51px { margin-left: 51px; margin-right: 51px; }
.m-x-52, .m-x-52px { margin-left: 52px; margin-right: 52px; }
.m-x-53, .m-x-53px { margin-left: 53px; margin-right: 53px; }
.m-x-54, .m-x-54px { margin-left: 54px; margin-right: 54px; }
.m-x-55, .m-x-55px { margin-left: 55px; margin-right: 55px; }
.m-x-56, .m-x-56px { margin-left: 56px; margin-right: 56px; }
.m-x-57, .m-x-57px { margin-left: 57px; margin-right: 57px; }
.m-x-58, .m-x-58px { margin-left: 58px; margin-right: 58px; }
.m-x-59, .m-x-59px { margin-left: 59px; margin-right: 59px; }
.m-x-60, .m-x-60px { margin-left: 60px; margin-right: 60px; }
.m-x-61, .m-x-61px { margin-left: 61px; margin-right: 61px; }
.m-x-62, .m-x-62px { margin-left: 62px; margin-right: 62px; }
.m-x-63, .m-x-63px { margin-left: 63px; margin-right: 63px; }
.m-x-64, .m-x-64px { margin-left: 64px; margin-right: 64px; }
.m-x-65, .m-x-65px { margin-left: 65px; margin-right: 65px; }
.m-x-66, .m-x-66px { margin-left: 66px; margin-right: 66px; }
.m-x-67, .m-x-67px { margin-left: 67px; margin-right: 67px; }
.m-x-68, .m-x-68px { margin-left: 68px; margin-right: 68px; }
.m-x-69, .m-x-69px { margin-left: 69px; margin-right: 69px; }
.m-x-70, .m-x-70px { margin-left: 70px; margin-right: 70px; }
.m-x-71, .m-x-71px { margin-left: 71px; margin-right: 71px; }
.m-x-72, .m-x-72px { margin-left: 72px; margin-right: 72px; }
.m-x-73, .m-x-73px { margin-left: 73px; margin-right: 73px; }
.m-x-74, .m-x-74px { margin-left: 74px; margin-right: 74px; }
.m-x-75, .m-x-75px { margin-left: 75px; margin-right: 75px; }
.m-x-76, .m-x-76px { margin-left: 76px; margin-right: 76px; }
.m-x-77, .m-x-77px { margin-left: 77px; margin-right: 77px; }
.m-x-78, .m-x-78px { margin-left: 78px; margin-right: 78px; }
.m-x-79, .m-x-79px { margin-left: 79px; margin-right: 79px; }
.m-x-80, .m-x-80px { margin-left: 80px; margin-right: 80px; }
.m-x-81, .m-x-81px { margin-left: 81px; margin-right: 81px; }
.m-x-82, .m-x-82px { margin-left: 82px; margin-right: 82px; }
.m-x-83, .m-x-83px { margin-left: 83px; margin-right: 83px; }
.m-x-84, .m-x-84px { margin-left: 84px; margin-right: 84px; }
.m-x-85, .m-x-85px { margin-left: 85px; margin-right: 85px; }
.m-x-86, .m-x-86px { margin-left: 86px; margin-right: 86px; }
.m-x-87, .m-x-87px { margin-left: 87px; margin-right: 87px; }
.m-x-88, .m-x-88px { margin-left: 88px; margin-right: 88px; }
.m-x-89, .m-x-89px { margin-left: 89px; margin-right: 89px; }
.m-x-90, .m-x-90px { margin-left: 90px; margin-right: 90px; }
.m-x-91, .m-x-91px { margin-left: 91px; margin-right: 91px; }
.m-x-92, .m-x-92px { margin-left: 92px; margin-right: 92px; }
.m-x-93, .m-x-93px { margin-left: 93px; margin-right: 93px; }
.m-x-94, .m-x-94px { margin-left: 94px; margin-right: 94px; }
.m-x-95, .m-x-95px { margin-left: 95px; margin-right: 95px; }
.m-x-96, .m-x-96px { margin-left: 96px; margin-right: 96px; }
.m-x-97, .m-x-97px { margin-left: 97px; margin-right: 97px; }
.m-x-98, .m-x-98px { margin-left: 98px; margin-right: 98px; }
.m-x-99, .m-x-99px { margin-left: 99px; margin-right: 99px; }
.m-x-100, .m-x-100px { margin-left: 100px; margin-right: 100px; }

/* M-TOP - all values 1-100 */
.m-top-1, .m-top-1px { margin-top: 1px !important; }
.m-top-2, .m-top-2px { margin-top: 2px !important; }
.m-top-3, .m-top-3px { margin-top: 3px !important; }
.m-top-4, .m-top-4px { margin-top: 4px !important; }
.m-top-5, .m-top-5px { margin-top: 5px !important; }
.m-top-6, .m-top-6px { margin-top: 6px !important; }
.m-top-7, .m-top-7px { margin-top: 7px !important; }
.m-top-8, .m-top-8px { margin-top: 8px !important; }
.m-top-9, .m-top-9px { margin-top: 9px !important; }
.m-top-10, .m-top-10px { margin-top: 10px !important; }
.m-top-11, .m-top-11px { margin-top: 11px !important; }
.m-top-12, .m-top-12px { margin-top: 12px !important; }
.m-top-13, .m-top-13px { margin-top: 13px !important; }
.m-top-14, .m-top-14px { margin-top: 14px !important; }
.m-top-15, .m-top-15px { margin-top: 15px !important; }
.m-top-16, .m-top-16px { margin-top: 16px !important; }
.m-top-17, .m-top-17px { margin-top: 17px !important; }
.m-top-18, .m-top-18px { margin-top: 18px !important; }
.m-top-19, .m-top-19px { margin-top: 19px !important; }
.m-top-20, .m-top-20px { margin-top: 20px !important; }
.m-top-21, .m-top-21px { margin-top: 21px !important; }
.m-top-22, .m-top-22px { margin-top: 22px !important; }
.m-top-23, .m-top-23px { margin-top: 23px !important; }
.m-top-24, .m-top-24px { margin-top: 24px !important; }
.m-top-25, .m-top-25px { margin-top: 25px !important; }
.m-top-26, .m-top-26px { margin-top: 26px !important; }
.m-top-27, .m-top-27px { margin-top: 27px !important; }
.m-top-28, .m-top-28px { margin-top: 28px !important; }
.m-top-29, .m-top-29px { margin-top: 29px !important; }
.m-top-30, .m-top-30px { margin-top: 30px !important; }
.m-top-31, .m-top-31px { margin-top: 31px !important; }
.m-top-32, .m-top-32px { margin-top: 32px !important; }
.m-top-33, .m-top-33px { margin-top: 33px !important; }
.m-top-34, .m-top-34px { margin-top: 34px !important; }
.m-top-35, .m-top-35px { margin-top: 35px !important; }
.m-top-36, .m-top-36px { margin-top: 36px !important; }
.m-top-37, .m-top-37px { margin-top: 37px !important; }
.m-top-38, .m-top-38px { margin-top: 38px !important; }
.m-top-39, .m-top-39px { margin-top: 39px !important; }
.m-top-40, .m-top-40px { margin-top: 40px !important; }
.m-top-41, .m-top-41px { margin-top: 41px !important; }
.m-top-42, .m-top-42px { margin-top: 42px !important; }
.m-top-43, .m-top-43px { margin-top: 43px !important; }
.m-top-44, .m-top-44px { margin-top: 44px !important; }
.m-top-45, .m-top-45px { margin-top: 45px !important; }
.m-top-46, .m-top-46px { margin-top: 46px !important; }
.m-top-47, .m-top-47px { margin-top: 47px !important; }
.m-top-48, .m-top-48px { margin-top: 48px !important; }
.m-top-49, .m-top-49px { margin-top: 49px !important; }
.m-top-50, .m-top-50px { margin-top: 50px !important; }
.m-top-51, .m-top-51px { margin-top: 51px !important; }
.m-top-52, .m-top-52px { margin-top: 52px !important; }
.m-top-53, .m-top-53px { margin-top: 53px !important; }
.m-top-54, .m-top-54px { margin-top: 54px !important; }
.m-top-55, .m-top-55px { margin-top: 55px !important; }
.m-top-56, .m-top-56px { margin-top: 56px !important; }
.m-top-57, .m-top-57px { margin-top: 57px !important; }
.m-top-58, .m-top-58px { margin-top: 58px !important; }
.m-top-59, .m-top-59px { margin-top: 59px !important; }
.m-top-60, .m-top-60px { margin-top: 60px !important; }
.m-top-61, .m-top-61px { margin-top: 61px !important; }
.m-top-62, .m-top-62px { margin-top: 62px !important; }
.m-top-63, .m-top-63px { margin-top: 63px !important; }
.m-top-64, .m-top-64px { margin-top: 64px !important; }
.m-top-65, .m-top-65px { margin-top: 65px !important; }
.m-top-66, .m-top-66px { margin-top: 66px !important; }
.m-top-67, .m-top-67px { margin-top: 67px !important; }
.m-top-68, .m-top-68px { margin-top: 68px !important; }
.m-top-69, .m-top-69px { margin-top: 69px !important; }
.m-top-70, .m-top-70px { margin-top: 70px !important; }
.m-top-71, .m-top-71px { margin-top: 71px !important; }
.m-top-72, .m-top-72px { margin-top: 72px !important; }
.m-top-73, .m-top-73px { margin-top: 73px !important; }
.m-top-74, .m-top-74px { margin-top: 74px !important; }
.m-top-75, .m-top-75px { margin-top: 75px !important; }
.m-top-76, .m-top-76px { margin-top: 76px !important; }
.m-top-77, .m-top-77px { margin-top: 77px !important; }
.m-top-78, .m-top-78px { margin-top: 78px !important; }
.m-top-79, .m-top-79px { margin-top: 79px !important; }
.m-top-80, .m-top-80px { margin-top: 80px !important; }
.m-top-81, .m-top-81px { margin-top: 81px !important; }
.m-top-82, .m-top-82px { margin-top: 82px !important; }
.m-top-83, .m-top-83px { margin-top: 83px !important; }
.m-top-84, .m-top-84px { margin-top: 84px !important; }
.m-top-85, .m-top-85px { margin-top: 85px !important; }
.m-top-86, .m-top-86px { margin-top: 86px !important; }
.m-top-87, .m-top-87px { margin-top: 87px !important; }
.m-top-88, .m-top-88px { margin-top: 88px !important; }
.m-top-89, .m-top-89px { margin-top: 89px !important; }
.m-top-90, .m-top-90px { margin-top: 90px !important; }
.m-top-91, .m-top-91px { margin-top: 91px !important; }
.m-top-92, .m-top-92px { margin-top: 92px !important; }
.m-top-93, .m-top-93px { margin-top: 93px !important; }
.m-top-94, .m-top-94px { margin-top: 94px !important; }
.m-top-95, .m-top-95px { margin-top: 95px !important; }
.m-top-96, .m-top-96px { margin-top: 96px !important; }
.m-top-97, .m-top-97px { margin-top: 97px !important; }
.m-top-98, .m-top-98px { margin-top: 98px !important; }
.m-top-99, .m-top-99px { margin-top: 99px !important; }
.m-top-100, .m-top-100px { margin-top: 100px !important; }

/* M-BOTTOM - all values 1-100 */
.m-bottom-1, .m-bottom-1px { margin-bottom: 1px !important; }
.m-bottom-2, .m-bottom-2px { margin-bottom: 2px !important; }
.m-bottom-3, .m-bottom-3px { margin-bottom: 3px !important; }
.m-bottom-4, .m-bottom-4px { margin-bottom: 4px !important; }
.m-bottom-5, .m-bottom-5px { margin-bottom: 5px !important; }
.m-bottom-6, .m-bottom-6px { margin-bottom: 6px !important; }
.m-bottom-7, .m-bottom-7px { margin-bottom: 7px !important; }
.m-bottom-8, .m-bottom-8px { margin-bottom: 8px !important; }
.m-bottom-9, .m-bottom-9px { margin-bottom: 9px !important; }
.m-bottom-10, .m-bottom-10px { margin-bottom: 10px !important; }
.m-bottom-11, .m-bottom-11px { margin-bottom: 11px !important; }
.m-bottom-12, .m-bottom-12px { margin-bottom: 12px !important; }
.m-bottom-13, .m-bottom-13px { margin-bottom: 13px !important; }
.m-bottom-14, .m-bottom-14px { margin-bottom: 14px !important; }
.m-bottom-15, .m-bottom-15px { margin-bottom: 15px !important; }
.m-bottom-16, .m-bottom-16px { margin-bottom: 16px !important; }
.m-bottom-17, .m-bottom-17px { margin-bottom: 17px !important; }
.m-bottom-18, .m-bottom-18px { margin-bottom: 18px !important; }
.m-bottom-19, .m-bottom-19px { margin-bottom: 19px !important; }
.m-bottom-20, .m-bottom-20px { margin-bottom: 20px !important; }
.m-bottom-21, .m-bottom-21px { margin-bottom: 21px !important; }
.m-bottom-22, .m-bottom-22px { margin-bottom: 22px !important; }
.m-bottom-23, .m-bottom-23px { margin-bottom: 23px !important; }
.m-bottom-24, .m-bottom-24px { margin-bottom: 24px !important; }
.m-bottom-25, .m-bottom-25px { margin-bottom: 25px !important; }
.m-bottom-26, .m-bottom-26px { margin-bottom: 26px !important; }
.m-bottom-27, .m-bottom-27px { margin-bottom: 27px !important; }
.m-bottom-28, .m-bottom-28px { margin-bottom: 28px !important; }
.m-bottom-29, .m-bottom-29px { margin-bottom: 29px !important; }
.m-bottom-30, .m-bottom-30px { margin-bottom: 30px !important; }
.m-bottom-31, .m-bottom-31px { margin-bottom: 31px !important; }
.m-bottom-32, .m-bottom-32px { margin-bottom: 32px !important; }
.m-bottom-33, .m-bottom-33px { margin-bottom: 33px !important; }
.m-bottom-34, .m-bottom-34px { margin-bottom: 34px !important; }
.m-bottom-35, .m-bottom-35px { margin-bottom: 35px !important; }
.m-bottom-36, .m-bottom-36px { margin-bottom: 36px !important; }
.m-bottom-37, .m-bottom-37px { margin-bottom: 37px !important; }
.m-bottom-38, .m-bottom-38px { margin-bottom: 38px !important; }
.m-bottom-39, .m-bottom-39px { margin-bottom: 39px !important; }
.m-bottom-40, .m-bottom-40px { margin-bottom: 40px !important; }
.m-bottom-41, .m-bottom-41px { margin-bottom: 41px !important; }
.m-bottom-42, .m-bottom-42px { margin-bottom: 42px !important; }
.m-bottom-43, .m-bottom-43px { margin-bottom: 43px !important; }
.m-bottom-44, .m-bottom-44px { margin-bottom: 44px !important; }
.m-bottom-45, .m-bottom-45px { margin-bottom: 45px !important; }
.m-bottom-46, .m-bottom-46px { margin-bottom: 46px !important; }
.m-bottom-47, .m-bottom-47px { margin-bottom: 47px !important; }
.m-bottom-48, .m-bottom-48px { margin-bottom: 48px !important; }
.m-bottom-49, .m-bottom-49px { margin-bottom: 49px !important; }
.m-bottom-50, .m-bottom-50px { margin-bottom: 50px !important; }
.m-bottom-51, .m-bottom-51px { margin-bottom: 51px !important; }
.m-bottom-52, .m-bottom-52px { margin-bottom: 52px !important; }
.m-bottom-53, .m-bottom-53px { margin-bottom: 53px !important; }
.m-bottom-54, .m-bottom-54px { margin-bottom: 54px !important; }
.m-bottom-55, .m-bottom-55px { margin-bottom: 55px !important; }
.m-bottom-56, .m-bottom-56px { margin-bottom: 56px !important; }
.m-bottom-57, .m-bottom-57px { margin-bottom: 57px !important; }
.m-bottom-58, .m-bottom-58px { margin-bottom: 58px !important; }
.m-bottom-59, .m-bottom-59px { margin-bottom: 59px !important; }
.m-bottom-60, .m-bottom-60px { margin-bottom: 60px !important; }
.m-bottom-61, .m-bottom-61px { margin-bottom: 61px !important; }
.m-bottom-62, .m-bottom-62px { margin-bottom: 62px !important; }
.m-bottom-63, .m-bottom-63px { margin-bottom: 63px !important; }
.m-bottom-64, .m-bottom-64px { margin-bottom: 64px !important; }
.m-bottom-65, .m-bottom-65px { margin-bottom: 65px !important; }
.m-bottom-66, .m-bottom-66px { margin-bottom: 66px !important; }
.m-bottom-67, .m-bottom-67px { margin-bottom: 67px !important; }
.m-bottom-68, .m-bottom-68px { margin-bottom: 68px !important; }
.m-bottom-69, .m-bottom-69px { margin-bottom: 69px !important; }
.m-bottom-70, .m-bottom-70px { margin-bottom: 70px !important; }
.m-bottom-71, .m-bottom-71px { margin-bottom: 71px !important; }
.m-bottom-72, .m-bottom-72px { margin-bottom: 72px !important; }
.m-bottom-73, .m-bottom-73px { margin-bottom: 73px !important; }
.m-bottom-74, .m-bottom-74px { margin-bottom: 74px !important; }
.m-bottom-75, .m-bottom-75px { margin-bottom: 75px !important; }
.m-bottom-76, .m-bottom-76px { margin-bottom: 76px !important; }
.m-bottom-77, .m-bottom-77px { margin-bottom: 77px !important; }
.m-bottom-78, .m-bottom-78px { margin-bottom: 78px !important; }
.m-bottom-79, .m-bottom-79px { margin-bottom: 79px !important; }
.m-bottom-80, .m-bottom-80px { margin-bottom: 80px !important; }
.m-bottom-81, .m-bottom-81px { margin-bottom: 81px !important; }
.m-bottom-82, .m-bottom-82px { margin-bottom: 82px !important; }
.m-bottom-83, .m-bottom-83px { margin-bottom: 83px !important; }
.m-bottom-84, .m-bottom-84px { margin-bottom: 84px !important; }
.m-bottom-85, .m-bottom-85px { margin-bottom: 85px !important; }
.m-bottom-86, .m-bottom-86px { margin-bottom: 86px !important; }
.m-bottom-87, .m-bottom-87px { margin-bottom: 87px !important; }
.m-bottom-88, .m-bottom-88px { margin-bottom: 88px !important; }
.m-bottom-89, .m-bottom-89px { margin-bottom: 89px !important; }
.m-bottom-90, .m-bottom-90px { margin-bottom: 90px !important; }
.m-bottom-91, .m-bottom-91px { margin-bottom: 91px !important; }
.m-bottom-92, .m-bottom-92px { margin-bottom: 92px !important; }
.m-bottom-93, .m-bottom-93px { margin-bottom: 93px !important; }
.m-bottom-94, .m-bottom-94px { margin-bottom: 94px !important; }
.m-bottom-95, .m-bottom-95px { margin-bottom: 95px !important; }
.m-bottom-96, .m-bottom-96px { margin-bottom: 96px !important; }
.m-bottom-97, .m-bottom-97px { margin-bottom: 97px !important; }
.m-bottom-98, .m-bottom-98px { margin-bottom: 98px !important; }
.m-bottom-99, .m-bottom-99px { margin-bottom: 99px !important; }
.m-bottom-100, .m-bottom-100px { margin-bottom: 100px !important; }

/* M-LEFT - all values 1-100 */
.m-left-1, .m-left-1px { margin-left: 1px !important; }
.m-left-2, .m-left-2px { margin-left: 2px !important; }
.m-left-3, .m-left-3px { margin-left: 3px !important; }
.m-left-4, .m-left-4px { margin-left: 4px !important; }
.m-left-5, .m-left-5px { margin-left: 5px !important; }
.m-left-6, .m-left-6px { margin-left: 6px !important; }
.m-left-7, .m-left-7px { margin-left: 7px !important; }
.m-left-8, .m-left-8px { margin-left: 8px !important; }
.m-left-9, .m-left-9px { margin-left: 9px !important; }
.m-left-10, .m-left-10px { margin-left: 10px !important; }
.m-left-11, .m-left-11px { margin-left: 11px !important; }
.m-left-12, .m-left-12px { margin-left: 12px !important; }
.m-left-13, .m-left-13px { margin-left: 13px !important; }
.m-left-14, .m-left-14px { margin-left: 14px !important; }
.m-left-15, .m-left-15px { margin-left: 15px !important; }
.m-left-16, .m-left-16px { margin-left: 16px !important; }
.m-left-17, .m-left-17px { margin-left: 17px !important; }
.m-left-18, .m-left-18px { margin-left: 18px !important; }
.m-left-19, .m-left-19px { margin-left: 19px !important; }
.m-left-20, .m-left-20px { margin-left: 20px !important; }
.m-left-21, .m-left-21px { margin-left: 21px !important; }
.m-left-22, .m-left-22px { margin-left: 22px !important; }
.m-left-23, .m-left-23px { margin-left: 23px !important; }
.m-left-24, .m-left-24px { margin-left: 24px !important; }
.m-left-25, .m-left-25px { margin-left: 25px !important; }
.m-left-26, .m-left-26px { margin-left: 26px !important; }
.m-left-27, .m-left-27px { margin-left: 27px !important; }
.m-left-28, .m-left-28px { margin-left: 28px !important; }
.m-left-29, .m-left-29px { margin-left: 29px !important; }
.m-left-30, .m-left-30px { margin-left: 30px !important; }
.m-left-31, .m-left-31px { margin-left: 31px !important; }
.m-left-32, .m-left-32px { margin-left: 32px !important; }
.m-left-33, .m-left-33px { margin-left: 33px !important; }
.m-left-34, .m-left-34px { margin-left: 34px !important; }
.m-left-35, .m-left-35px { margin-left: 35px !important; }
.m-left-36, .m-left-36px { margin-left: 36px !important; }
.m-left-37, .m-left-37px { margin-left: 37px !important; }
.m-left-38, .m-left-38px { margin-left: 38px !important; }
.m-left-39, .m-left-39px { margin-left: 39px !important; }
.m-left-40, .m-left-40px { margin-left: 40px !important; }
.m-left-41, .m-left-41px { margin-left: 41px !important; }
.m-left-42, .m-left-42px { margin-left: 42px !important; }
.m-left-43, .m-left-43px { margin-left: 43px !important; }
.m-left-44, .m-left-44px { margin-left: 44px !important; }
.m-left-45, .m-left-45px { margin-left: 45px !important; }
.m-left-46, .m-left-46px { margin-left: 46px !important; }
.m-left-47, .m-left-47px { margin-left: 47px !important; }
.m-left-48, .m-left-48px { margin-left: 48px !important; }
.m-left-49, .m-left-49px { margin-left: 49px !important; }
.m-left-50, .m-left-50px { margin-left: 50px !important; }
.m-left-51, .m-left-51px { margin-left: 51px !important; }
.m-left-52, .m-left-52px { margin-left: 52px !important; }
.m-left-53, .m-left-53px { margin-left: 53px !important; }
.m-left-54, .m-left-54px { margin-left: 54px !important; }
.m-left-55, .m-left-55px { margin-left: 55px !important; }
.m-left-56, .m-left-56px { margin-left: 56px !important; }
.m-left-57, .m-left-57px { margin-left: 57px !important; }
.m-left-58, .m-left-58px { margin-left: 58px !important; }
.m-left-59, .m-left-59px { margin-left: 59px !important; }
.m-left-60, .m-left-60px { margin-left: 60px !important; }
.m-left-61, .m-left-61px { margin-left: 61px !important; }
.m-left-62, .m-left-62px { margin-left: 62px !important; }
.m-left-63, .m-left-63px { margin-left: 63px !important; }
.m-left-64, .m-left-64px { margin-left: 64px !important; }
.m-left-65, .m-left-65px { margin-left: 65px !important; }
.m-left-66, .m-left-66px { margin-left: 66px !important; }
.m-left-67, .m-left-67px { margin-left: 67px !important; }
.m-left-68, .m-left-68px { margin-left: 68px !important; }
.m-left-69, .m-left-69px { margin-left: 69px !important; }
.m-left-70, .m-left-70px { margin-left: 70px !important; }
.m-left-71, .m-left-71px { margin-left: 71px !important; }
.m-left-72, .m-left-72px { margin-left: 72px !important; }
.m-left-73, .m-left-73px { margin-left: 73px !important; }
.m-left-74, .m-left-74px { margin-left: 74px !important; }
.m-left-75, .m-left-75px { margin-left: 75px !important; }
.m-left-76, .m-left-76px { margin-left: 76px !important; }
.m-left-77, .m-left-77px { margin-left: 77px !important; }
.m-left-78, .m-left-78px { margin-left: 78px !important; }
.m-left-79, .m-left-79px { margin-left: 79px !important; }
.m-left-80, .m-left-80px { margin-left: 80px !important; }
.m-left-81, .m-left-81px { margin-left: 81px !important; }
.m-left-82, .m-left-82px { margin-left: 82px !important; }
.m-left-83, .m-left-83px { margin-left: 83px !important; }
.m-left-84, .m-left-84px { margin-left: 84px !important; }
.m-left-85, .m-left-85px { margin-left: 85px !important; }
.m-left-86, .m-left-86px { margin-left: 86px !important; }
.m-left-87, .m-left-87px { margin-left: 87px !important; }
.m-left-88, .m-left-88px { margin-left: 88px !important; }
.m-left-89, .m-left-89px { margin-left: 89px !important; }
.m-left-90, .m-left-90px { margin-left: 90px !important; }
.m-left-91, .m-left-91px { margin-left: 91px !important; }
.m-left-92, .m-left-92px { margin-left: 92px !important; }
.m-left-93, .m-left-93px { margin-left: 93px !important; }
.m-left-94, .m-left-94px { margin-left: 94px !important; }
.m-left-95, .m-left-95px { margin-left: 95px !important; }
.m-left-96, .m-left-96px { margin-left: 96px !important; }
.m-left-97, .m-left-97px { margin-left: 97px !important; }
.m-left-98, .m-left-98px { margin-left: 98px !important; }
.m-left-99, .m-left-99px { margin-left: 99px !important; }
.m-left-100, .m-left-100px { margin-left: 100px !important; }

/* M-RIGHT - all values 1-100 */
.m-right-1, .m-right-1px { margin-right: 1px !important; }
.m-right-2, .m-right-2px { margin-right: 2px !important; }
.m-right-3, .m-right-3px { margin-right: 3px !important; }
.m-right-4, .m-right-4px { margin-right: 4px !important; }
.m-right-5, .m-right-5px { margin-right: 5px !important; }
.m-right-6, .m-right-6px { margin-right: 6px !important; }
.m-right-7, .m-right-7px { margin-right: 7px !important; }
.m-right-8, .m-right-8px { margin-right: 8px !important; }
.m-right-9, .m-right-9px { margin-right: 9px !important; }
.m-right-10, .m-right-10px { margin-right: 10px !important; }
.m-right-11, .m-right-11px { margin-right: 11px !important; }
.m-right-12, .m-right-12px { margin-right: 12px !important; }
.m-right-13, .m-right-13px { margin-right: 13px !important; }
.m-right-14, .m-right-14px { margin-right: 14px !important; }
.m-right-15, .m-right-15px { margin-right: 15px !important; }
.m-right-16, .m-right-16px { margin-right: 16px !important; }
.m-right-17, .m-right-17px { margin-right: 17px !important; }
.m-right-18, .m-right-18px { margin-right: 18px !important; }
.m-right-19, .m-right-19px { margin-right: 19px !important; }
.m-right-20, .m-right-20px { margin-right: 20px !important; }
.m-right-21, .m-right-21px { margin-right: 21px !important; }
.m-right-22, .m-right-22px { margin-right: 22px !important; }
.m-right-23, .m-right-23px { margin-right: 23px !important; }
.m-right-24, .m-right-24px { margin-right: 24px !important; }
.m-right-25, .m-right-25px { margin-right: 25px !important; }
.m-right-26, .m-right-26px { margin-right: 26px !important; }
.m-right-27, .m-right-27px { margin-right: 27px !important; }
.m-right-28, .m-right-28px { margin-right: 28px !important; }
.m-right-29, .m-right-29px { margin-right: 29px !important; }
.m-right-30, .m-right-30px { margin-right: 30px !important; }
.m-right-31, .m-right-31px { margin-right: 31px !important; }
.m-right-32, .m-right-32px { margin-right: 32px !important; }
.m-right-33, .m-right-33px { margin-right: 33px !important; }
.m-right-34, .m-right-34px { margin-right: 34px !important; }
.m-right-35, .m-right-35px { margin-right: 35px !important; }
.m-right-36, .m-right-36px { margin-right: 36px !important; }
.m-right-37, .m-right-37px { margin-right: 37px !important; }
.m-right-38, .m-right-38px { margin-right: 38px !important; }
.m-right-39, .m-right-39px { margin-right: 39px !important; }
.m-right-40, .m-right-40px { margin-right: 40px !important; }
.m-right-41, .m-right-41px { margin-right: 41px !important; }
.m-right-42, .m-right-42px { margin-right: 42px !important; }
.m-right-43, .m-right-43px { margin-right: 43px !important; }
.m-right-44, .m-right-44px { margin-right: 44px !important; }
.m-right-45, .m-right-45px { margin-right: 45px !important; }
.m-right-46, .m-right-46px { margin-right: 46px !important; }
.m-right-47, .m-right-47px { margin-right: 47px !important; }
.m-right-48, .m-right-48px { margin-right: 48px !important; }
.m-right-49, .m-right-49px { margin-right: 49px !important; }
.m-right-50, .m-right-50px { margin-right: 50px !important; }
.m-right-51, .m-right-51px { margin-right: 51px !important; }
.m-right-52, .m-right-52px { margin-right: 52px !important; }
.m-right-53, .m-right-53px { margin-right: 53px !important; }
.m-right-54, .m-right-54px { margin-right: 54px !important; }
.m-right-55, .m-right-55px { margin-right: 55px !important; }
.m-right-56, .m-right-56px { margin-right: 56px !important; }
.m-right-57, .m-right-57px { margin-right: 57px !important; }
.m-right-58, .m-right-58px { margin-right: 58px !important; }
.m-right-59, .m-right-59px { margin-right: 59px !important; }
.m-right-60, .m-right-60px { margin-right: 60px !important; }
.m-right-61, .m-right-61px { margin-right: 61px !important; }
.m-right-62, .m-right-62px { margin-right: 62px !important; }
.m-right-63, .m-right-63px { margin-right: 63px !important; }
.m-right-64, .m-right-64px { margin-right: 64px !important; }
.m-right-65, .m-right-65px { margin-right: 65px !important; }
.m-right-66, .m-right-66px { margin-right: 66px !important; }
.m-right-67, .m-right-67px { margin-right: 67px !important; }
.m-right-68, .m-right-68px { margin-right: 68px !important; }
.m-right-69, .m-right-69px { margin-right: 69px !important; }
.m-right-70, .m-right-70px { margin-right: 70px !important; }
.m-right-71, .m-right-71px { margin-right: 71px !important; }
.m-right-72, .m-right-72px { margin-right: 72px !important; }
.m-right-73, .m-right-73px { margin-right: 73px !important; }
.m-right-74, .m-right-74px { margin-right: 74px !important; }
.m-right-75, .m-right-75px { margin-right: 75px !important; }
.m-right-76, .m-right-76px { margin-right: 76px !important; }
.m-right-77, .m-right-77px { margin-right: 77px !important; }
.m-right-78, .m-right-78px { margin-right: 78px !important; }
.m-right-79, .m-right-79px { margin-right: 79px !important; }
.m-right-80, .m-right-80px { margin-right: 80px !important; }
.m-right-81, .m-right-81px { margin-right: 81px !important; }
.m-right-82, .m-right-82px { margin-right: 82px !important; }
.m-right-83, .m-right-83px { margin-right: 83px !important; }
.m-right-84, .m-right-84px { margin-right: 84px !important; }
.m-right-85, .m-right-85px { margin-right: 85px !important; }
.m-right-86, .m-right-86px { margin-right: 86px !important; }
.m-right-87, .m-right-87px { margin-right: 87px !important; }
.m-right-88, .m-right-88px { margin-right: 88px !important; }
.m-right-89, .m-right-89px { margin-right: 89px !important; }
.m-right-90, .m-right-90px { margin-right: 90px !important; }
.m-right-91, .m-right-91px { margin-right: 91px !important; }
.m-right-92, .m-right-92px { margin-right: 92px !important; }
.m-right-93, .m-right-93px { margin-right: 93px !important; }
.m-right-94, .m-right-94px { margin-right: 94px !important; }
.m-right-95, .m-right-95px { margin-right: 95px !important; }
.m-right-96, .m-right-96px { margin-right: 96px !important; }
.m-right-97, .m-right-97px { margin-right: 97px !important; }
.m-right-98, .m-right-98px { margin-right: 98px !important; }
.m-right-99, .m-right-99px { margin-right: 99px !important; }
.m-right-100, .m-right-100px { margin-right: 100px !important; }

/* border radius */
.br-none{
    border-radius:none !important;
}
.br-primary{
    border-radius:var(--br-primary);
}
.br-inherit{
    border-radius:inherit;
}
.br-0, .br-0px {
    border-radius:0 !important;
}
.br-10, .br-10px {
    border-radius:10px !important;
}
.br-15, .br-15px {
    border-radius:15px !important;
}
.br-20, .br-20px {
    border-radius: 20px !important;
}
.br-5, .br-5px {
    border-radius:5px !important;
}
.br-50, .br-50px {
    border-radius:50px !important;
}
.br-100, .br-100px {
    border-radius:100px !important;
}
.br-1000, .br-1000px {
    border-radius:1000px !important;
}

/* ===== ADDITIONAL BORDER RADIUS VALUES ===== */
.br-1, .br-1px { border-radius: 1px !important; }
.br-2, .br-2px { border-radius: 2px !important; }
.br-3, .br-3px { border-radius: 3px !important; }
.br-4, .br-4px { border-radius: 4px !important; }
.br-6, .br-6px { border-radius: 6px !important; }
.br-7, .br-7px { border-radius: 7px !important; }
.br-8, .br-8px { border-radius: 8px !important; }
.br-9, .br-9px { border-radius: 9px !important; }
.br-12, .br-12px { border-radius: 12px !important; }
.br-14, .br-14px { border-radius: 14px !important; }
.br-16, .br-16px { border-radius: 16px !important; }
.br-18, .br-18px { border-radius: 18px !important; }
.br-25, .br-25px { border-radius: 25px !important; }
.br-30, .br-30px { border-radius: 30px !important; }
.br-35, .br-35px { border-radius: 35px !important; }
.br-40, .br-40px { border-radius: 40px !important; }
.br-45, .br-45px { border-radius: 45px !important; }
.br-60, .br-60px { border-radius: 60px !important; }
.br-70, .br-70px { border-radius: 70px !important; }
.br-75, .br-75px { border-radius: 75px !important; }
.br-80, .br-80px { border-radius: 80px !important; }
.br-85, .br-85px { border-radius: 85px !important; }
.br-90, .br-90px { border-radius: 90px !important; }
.br-95, .br-95px { border-radius: 95px !important; }
.br-150, .br-150px { border-radius: 150px !important; }
.br-200, .br-200px { border-radius: 200px !important; }

.br-top-left-0, .br-top-left-0px { border-top-left-radius: 0; }
.br-top-left-5, .br-top-left-5px { border-top-left-radius: 5px; }
.br-top-left-10, .br-top-left-10px { border-top-left-radius: 10px; }
.br-top-left-15, .br-top-left-15px { border-top-left-radius: 15px; }
.br-top-left-20, .br-top-left-20px { border-top-left-radius: 20px; }
.br-top-left-100, .br-top-left-100px { border-top-left-radius: 100px; }
.br-top-left-1000, .br-top-left-1000px { border-top-left-radius: 1000px; }

.br-top-right-0, .br-top-right-0px { border-top-right-radius: 0; }
.br-top-right-5, .br-top-right-5px { border-top-right-radius: 5px; }
.br-top-right-10, .br-top-right-10px { border-top-right-radius: 10px; }
.br-top-right-15, .br-top-right-15px { border-top-right-radius: 15px; }
.br-top-right-20, .br-top-right-20px { border-top-right-radius: 20px; }
.br-top-right-100, .br-top-right-100px { border-top-right-radius: 100px; }
.br-top-right-1000, .br-top-right-1000px { border-top-right-radius: 1000px; }

.br-bottom-right-0, .br-bottom-right-0px { border-bottom-right-radius: 0; }
.br-bottom-right-5, .br-bottom-right-5px { border-bottom-right-radius: 5px; }
.br-bottom-right-10, .br-bottom-right-10px { border-bottom-right-radius: 10px; }
.br-bottom-right-15, .br-bottom-right-15px { border-bottom-right-radius: 15px; }
.br-bottom-right-20, .br-bottom-right-20px { border-bottom-right-radius: 20px; }
.br-bottom-right-100, .br-bottom-right-100px { border-bottom-right-radius: 100px; }
.br-bottom-right-1000, .br-bottom-right-1000px { border-bottom-right-radius: 1000px; }

.br-bottom-left-0, .br-bottom-left-0px { border-bottom-left-radius: 0; }
.br-bottom-left-5, .br-bottom-left-5px { border-bottom-left-radius: 5px; }
.br-bottom-left-10, .br-bottom-left-10px { border-bottom-left-radius: 10px; }
.br-bottom-left-15, .br-bottom-left-15px { border-bottom-left-radius: 15px; }
.br-bottom-left-20, .br-bottom-left-20px { border-bottom-left-radius: 20px; }
.br-bottom-left-100, .br-bottom-left-100px { border-bottom-left-radius: 100px; }
.br-bottom-left-1000, .br-bottom-left-1000px { border-bottom-left-radius: 1000px; }

/* ===== ADDITIONAL CORNER VALUES ===== */
.br-top-left-1, .br-top-left-1px { border-top-left-radius: 1px; }
.br-top-left-2, .br-top-left-2px { border-top-left-radius: 2px; }
.br-top-left-3, .br-top-left-3px { border-top-left-radius: 3px; }
.br-top-left-4, .br-top-left-4px { border-top-left-radius: 4px; }
.br-top-left-6, .br-top-left-6px { border-top-left-radius: 6px; }
.br-top-left-7, .br-top-left-7px { border-top-left-radius: 7px; }
.br-top-left-8, .br-top-left-8px { border-top-left-radius: 8px; }
.br-top-left-9, .br-top-left-9px { border-top-left-radius: 9px; }
.br-top-left-12, .br-top-left-12px { border-top-left-radius: 12px; }
.br-top-left-14, .br-top-left-14px { border-top-left-radius: 14px; }
.br-top-left-16, .br-top-left-16px { border-top-left-radius: 16px; }
.br-top-left-18, .br-top-left-18px { border-top-left-radius: 18px; }
.br-top-left-25, .br-top-left-25px { border-top-left-radius: 25px; }
.br-top-left-30, .br-top-left-30px { border-top-left-radius: 30px; }
.br-top-left-35, .br-top-left-35px { border-top-left-radius: 35px; }
.br-top-left-40, .br-top-left-40px { border-top-left-radius: 40px; }
.br-top-left-45, .br-top-left-45px { border-top-left-radius: 45px; }
.br-top-left-50, .br-top-left-50px { border-top-left-radius: 50px; }
.br-top-left-60, .br-top-left-60px { border-top-left-radius: 60px; }
.br-top-left-70, .br-top-left-70px { border-top-left-radius: 70px; }
.br-top-left-75, .br-top-left-75px { border-top-left-radius: 75px; }
.br-top-left-80, .br-top-left-80px { border-top-left-radius: 80px; }
.br-top-left-85, .br-top-left-85px { border-top-left-radius: 85px; }
.br-top-left-90, .br-top-left-90px { border-top-left-radius: 90px; }
.br-top-left-95, .br-top-left-95px { border-top-left-radius: 95px; }
.br-top-left-150, .br-top-left-150px { border-top-left-radius: 150px; }
.br-top-left-200, .br-top-left-200px { border-top-left-radius: 200px; }

.br-top-right-1, .br-top-right-1px { border-top-right-radius: 1px; }
.br-top-right-2, .br-top-right-2px { border-top-right-radius: 2px; }
.br-top-right-3, .br-top-right-3px { border-top-right-radius: 3px; }
.br-top-right-4, .br-top-right-4px { border-top-right-radius: 4px; }
.br-top-right-6, .br-top-right-6px { border-top-right-radius: 6px; }
.br-top-right-7, .br-top-right-7px { border-top-right-radius: 7px; }
.br-top-right-8, .br-top-right-8px { border-top-right-radius: 8px; }
.br-top-right-9, .br-top-right-9px { border-top-right-radius: 9px; }
.br-top-right-12, .br-top-right-12px { border-top-right-radius: 12px; }
.br-top-right-14, .br-top-right-14px { border-top-right-radius: 14px; }
.br-top-right-16, .br-top-right-16px { border-top-right-radius: 16px; }
.br-top-right-18, .br-top-right-18px { border-top-right-radius: 18px; }
.br-top-right-25, .br-top-right-25px { border-top-right-radius: 25px; }
.br-top-right-30, .br-top-right-30px { border-top-right-radius: 30px; }
.br-top-right-35, .br-top-right-35px { border-top-right-radius: 35px; }
.br-top-right-40, .br-top-right-40px { border-top-right-radius: 40px; }
.br-top-right-45, .br-top-right-45px { border-top-right-radius: 45px; }
.br-top-right-50, .br-top-right-50px { border-top-right-radius: 50px; }
.br-top-right-60, .br-top-right-60px { border-top-right-radius: 60px; }
.br-top-right-70, .br-top-right-70px { border-top-right-radius: 70px; }
.br-top-right-75, .br-top-right-75px { border-top-right-radius: 75px; }
.br-top-right-80, .br-top-right-80px { border-top-right-radius: 80px; }
.br-top-right-85, .br-top-right-85px { border-top-right-radius: 85px; }
.br-top-right-90, .br-top-right-90px { border-top-right-radius: 90px; }
.br-top-right-95, .br-top-right-95px { border-top-right-radius: 95px; }
.br-top-right-150, .br-top-right-150px { border-top-right-radius: 150px; }
.br-top-right-200, .br-top-right-200px { border-top-right-radius: 200px; }

.br-bottom-right-1, .br-bottom-right-1px { border-bottom-right-radius: 1px; }
.br-bottom-right-2, .br-bottom-right-2px { border-bottom-right-radius: 2px; }
.br-bottom-right-3, .br-bottom-right-3px { border-bottom-right-radius: 3px; }
.br-bottom-right-4, .br-bottom-right-4px { border-bottom-right-radius: 4px; }
.br-bottom-right-6, .br-bottom-right-6px { border-bottom-right-radius: 6px; }
.br-bottom-right-7, .br-bottom-right-7px { border-bottom-right-radius: 7px; }
.br-bottom-right-8, .br-bottom-right-8px { border-bottom-right-radius: 8px; }
.br-bottom-right-9, .br-bottom-right-9px { border-bottom-right-radius: 9px; }
.br-bottom-right-12, .br-bottom-right-12px { border-bottom-right-radius: 12px; }
.br-bottom-right-14, .br-bottom-right-14px { border-bottom-right-radius: 14px; }
.br-bottom-right-16, .br-bottom-right-16px { border-bottom-right-radius: 16px; }
.br-bottom-right-18, .br-bottom-right-18px { border-bottom-right-radius: 18px; }
.br-bottom-right-25, .br-bottom-right-25px { border-bottom-right-radius: 25px; }
.br-bottom-right-30, .br-bottom-right-30px { border-bottom-right-radius: 30px; }
.br-bottom-right-35, .br-bottom-right-35px { border-bottom-right-radius: 35px; }
.br-bottom-right-40, .br-bottom-right-40px { border-bottom-right-radius: 40px; }
.br-bottom-right-45, .br-bottom-right-45px { border-bottom-right-radius: 45px; }
.br-bottom-right-50, .br-bottom-right-50px { border-bottom-right-radius: 50px; }
.br-bottom-right-60, .br-bottom-right-60px { border-bottom-right-radius: 60px; }
.br-bottom-right-70, .br-bottom-right-70px { border-bottom-right-radius: 70px; }
.br-bottom-right-75, .br-bottom-right-75px { border-bottom-right-radius: 75px; }
.br-bottom-right-80, .br-bottom-right-80px { border-bottom-right-radius: 80px; }
.br-bottom-right-85, .br-bottom-right-85px { border-bottom-right-radius: 85px; }
.br-bottom-right-90, .br-bottom-right-90px { border-bottom-right-radius: 90px; }
.br-bottom-right-95, .br-bottom-right-95px { border-bottom-right-radius: 95px; }
.br-bottom-right-150, .br-bottom-right-150px { border-bottom-right-radius: 150px; }
.br-bottom-right-200, .br-bottom-right-200px { border-bottom-right-radius: 200px; }

.br-bottom-left-1, .br-bottom-left-1px { border-bottom-left-radius: 1px; }
.br-bottom-left-2, .br-bottom-left-2px { border-bottom-left-radius: 2px; }
.br-bottom-left-3, .br-bottom-left-3px { border-bottom-left-radius: 3px; }
.br-bottom-left-4, .br-bottom-left-4px { border-bottom-left-radius: 4px; }
.br-bottom-left-6, .br-bottom-left-6px { border-bottom-left-radius: 6px; }
.br-bottom-left-7, .br-bottom-left-7px { border-bottom-left-radius: 7px; }
.br-bottom-left-8, .br-bottom-left-8px { border-bottom-left-radius: 8px; }
.br-bottom-left-9, .br-bottom-left-9px { border-bottom-left-radius: 9px; }
.br-bottom-left-12, .br-bottom-left-12px { border-bottom-left-radius: 12px; }
.br-bottom-left-14, .br-bottom-left-14px { border-bottom-left-radius: 14px; }
.br-bottom-left-16, .br-bottom-left-16px { border-bottom-left-radius: 16px; }
.br-bottom-left-18, .br-bottom-left-18px { border-bottom-left-radius: 18px; }
.br-bottom-left-25, .br-bottom-left-25px { border-bottom-left-radius: 25px; }
.br-bottom-left-30, .br-bottom-left-30px { border-bottom-left-radius: 30px; }
.br-bottom-left-35, .br-bottom-left-35px { border-bottom-left-radius: 35px; }
.br-bottom-left-40, .br-bottom-left-40px { border-bottom-left-radius: 40px; }
.br-bottom-left-45, .br-bottom-left-45px { border-bottom-left-radius: 45px; }
.br-bottom-left-50, .br-bottom-left-50px { border-bottom-left-radius: 50px; }
.br-bottom-left-60, .br-bottom-left-60px { border-bottom-left-radius: 60px; }
.br-bottom-left-70, .br-bottom-left-70px { border-bottom-left-radius: 70px; }
.br-bottom-left-75, .br-bottom-left-75px { border-bottom-left-radius: 75px; }
.br-bottom-left-80, .br-bottom-left-80px { border-bottom-left-radius: 80px; }
.br-bottom-left-85, .br-bottom-left-85px { border-bottom-left-radius: 85px; }
.br-bottom-left-90, .br-bottom-left-90px { border-bottom-left-radius: 90px; }
.br-bottom-left-95, .br-bottom-left-95px { border-bottom-left-radius: 95px; }
.br-bottom-left-150, .br-bottom-left-150px { border-bottom-left-radius: 150px; }
.br-bottom-left-200, .br-bottom-left-200px { border-bottom-left-radius: 200px; }

.circle{
    border-radius:50% !important;
}
/* width */
.w-1, .w-1px { width: 1px; }
.w-2, .w-2px { width: 2px; }
.w-3, .w-3px { width: 3px; }
.w-4, .w-4px { width: 4px; }
.w-5, .w-5px { width: 5px; }
.w-6, .w-6px { width: 6px; }
.w-7, .w-7px { width: 7px; }
.w-8, .w-8px { width: 8px; }
.w-9, .w-9px { width: 9px; }
.w-10, .w-10px { width: 10px; }
.w-11, .w-11px { width: 11px; }
.w-12, .w-12px { width: 12px; }
.w-13, .w-13px { width: 13px; }
.w-14, .w-14px { width: 14px; }
.w-15, .w-15px { width: 15px; }
.w-16, .w-16px { width: 16px; }
.w-17, .w-17px { width: 17px; }
.w-18, .w-18px { width: 18px; }
.w-19, .w-19px { width: 19px; }
.w-20, .w-20px { width: 20px; }
.w-21, .w-21px { width: 21px; }
.w-22, .w-22px { width: 22px; }
.w-23, .w-23px { width: 23px; }
.w-24, .w-24px { width: 24px; }
.w-25, .w-25px { width: 25px; }
.w-26, .w-26px { width: 26px; }
.w-27, .w-27px { width: 27px; }
.w-28, .w-28px { width: 28px; }
.w-29, .w-29px { width: 29px; }
.w-30, .w-30px { width: 30px !important; }
.w-31, .w-31px { width: 31px; }
.w-32, .w-32px { width: 32px; }
.w-33, .w-33px { width: 33px; }
.w-34, .w-34px { width: 34px; }
.w-35, .w-35px { width: 35px; }
.w-36, .w-36px { width: 36px; }
.w-37, .w-37px { width: 37px; }
.w-38, .w-38px { width: 38px; }
.w-39, .w-39px { width: 39px; }
.w-40, .w-40px { width: 40px; }
.w-41, .w-41px { width: 41px; }
.w-42, .w-42px { width: 42px; }
.w-43, .w-43px { width: 43px; }
.w-44, .w-44px { width: 44px; }
.w-45, .w-45px { width: 45px; }
.w-46, .w-46px { width: 46px; }
.w-47, .w-47px { width: 47px; }
.w-48, .w-48px { width: 48px; }
.w-49, .w-49px { width: 49px; }
.w-50, .w-50px { width: 50px !important; }
.w-51, .w-51px { width: 51px; }
.w-52, .w-52px { width: 52px; }
.w-53, .w-53px { width: 53px; }
.w-54, .w-54px { width: 54px; }
.w-55, .w-55px { width: 55px; }
.w-56, .w-56px { width: 56px; }
.w-57, .w-57px { width: 57px; }
.w-58, .w-58px { width: 58px; }
.w-59, .w-59px { width: 59px; }
.w-60, .w-60px { width: 60px; }
.w-61, .w-61px { width: 61px; }
.w-62, .w-62px { width: 62px; }
.w-63, .w-63px { width: 63px; }
.w-64, .w-64px { width: 64px; }
.w-65, .w-65px { width: 65px; }
.w-66, .w-66px { width: 66px; }
.w-67, .w-67px { width: 67px; }
.w-68, .w-68px { width: 68px; }
.w-69, .w-69px { width: 69px; }
.w-70, .w-70px { width: 70px; }
.w-71, .w-71px { width: 71px; }
.w-72, .w-72px { width: 72px; }
.w-73, .w-73px { width: 73px; }
.w-74, .w-74px { width: 74px; }
.w-75, .w-75px { width: 75px !important; }
.w-76, .w-76px { width: 76px; }
.w-77, .w-77px { width: 77px; }
.w-78, .w-78px { width: 78px; }
.w-79, .w-79px { width: 79px; }
.w-80, .w-80px { width: 80px; }
.w-81, .w-81px { width: 81px; }
.w-82, .w-82px { width: 82px; }
.w-83, .w-83px { width: 83px; }
.w-84, .w-84px { width: 84px; }
.w-85, .w-85px { width: 85px; }
.w-86, .w-86px { width: 86px; }
.w-87, .w-87px { width: 87px; }
.w-88, .w-88px { width: 88px; }
.w-89, .w-89px { width: 89px; }
.w-90, .w-90px { width: 90px; }
.w-91, .w-91px { width: 91px; }
.w-92, .w-92px { width: 92px; }
.w-93, .w-93px { width: 93px; }
.w-94, .w-94px { width: 94px; }
.w-95, .w-95px { width: 95px; }
.w-96, .w-96px { width: 96px; }
.w-97, .w-97px { width: 97px; }
.w-98, .w-98px { width: 98px; }
.w-99, .w-99px { width: 99px; }
.w-100, .w-100px { width: 100px; }
.w-150, .w-150px { width: 150px !important; }
.w-200, .w-200px { width: 200px !important; }
.w-250, .w-250px { width: 250px !important; }
.w-300, .w-300px { width: 300px !important; }

.w-half { width: 50%; }

.min-w-0, .min-w-0px { min-width: 0; }
.min-w-1, .min-w-1px { min-width: 1px; }
.min-w-2, .min-w-2px { min-width: 2px; }
.min-w-3, .min-w-3px { min-width: 3px; }
.min-w-4, .min-w-4px { min-width: 4px; }
.min-w-5, .min-w-5px { min-width: 5px; }
.min-w-6, .min-w-6px { min-width: 6px; }
.min-w-7, .min-w-7px { min-width: 7px; }
.min-w-8, .min-w-8px { min-width: 8px; }
.min-w-9, .min-w-9px { min-width: 9px; }
.min-w-10, .min-w-10px { min-width: 10px; }
.min-w-11, .min-w-11px { min-width: 11px; }
.min-w-12, .min-w-12px { min-width: 12px; }
.min-w-13, .min-w-13px { min-width: 13px; }
.min-w-14, .min-w-14px { min-width: 14px; }
.min-w-15, .min-w-15px { min-width: 15px; }
.min-w-16, .min-w-16px { min-width: 16px; }
.min-w-17, .min-w-17px { min-width: 17px; }
.min-w-18, .min-w-18px { min-width: 18px; }
.min-w-19, .min-w-19px { min-width: 19px; }
.min-w-20, .min-w-20px { min-width: 20px; }
.min-w-21, .min-w-21px { min-width: 21px; }
.min-w-22, .min-w-22px { min-width: 22px; }
.min-w-23, .min-w-23px { min-width: 23px; }
.min-w-24, .min-w-24px { min-width: 24px; }
.min-w-25, .min-w-25px { min-width: 25px; }
.min-w-26, .min-w-26px { min-width: 26px; }
.min-w-27, .min-w-27px { min-width: 27px; }
.min-w-28, .min-w-28px { min-width: 28px; }
.min-w-29, .min-w-29px { min-width: 29px; }
.min-w-30, .min-w-30px { min-width: 30px; }
.min-w-31, .min-w-31px { min-width: 31px; }
.min-w-32, .min-w-32px { min-width: 32px; }
.min-w-33, .min-w-33px { min-width: 33px; }
.min-w-34, .min-w-34px { min-width: 34px; }
.min-w-35, .min-w-35px { min-width: 35px; }
.min-w-36, .min-w-36px { min-width: 36px; }
.min-w-37, .min-w-37px { min-width: 37px; }
.min-w-38, .min-w-38px { min-width: 38px; }
.min-w-39, .min-w-39px { min-width: 39px; }
.min-w-40, .min-w-40px { min-width: 40px; }
.min-w-41, .min-w-41px { min-width: 41px; }
.min-w-42, .min-w-42px { min-width: 42px; }
.min-w-43, .min-w-43px { min-width: 43px; }
.min-w-44, .min-w-44px { min-width: 44px; }
.min-w-45, .min-w-45px { min-width: 45px; }
.min-w-46, .min-w-46px { min-width: 46px; }
.min-w-47, .min-w-47px { min-width: 47px; }
.min-w-48, .min-w-48px { min-width: 48px; }
.min-w-49, .min-w-49px { min-width: 49px; }
.min-w-50, .min-w-50px { min-width: 50px; }
.min-w-51, .min-w-51px { min-width: 51px; }
.min-w-52, .min-w-52px { min-width: 52px; }
.min-w-53, .min-w-53px { min-width: 53px; }
.min-w-54, .min-w-54px { min-width: 54px; }
.min-w-55, .min-w-55px { min-width: 55px; }
.min-w-56, .min-w-56px { min-width: 56px; }
.min-w-57, .min-w-57px { min-width: 57px; }
.min-w-58, .min-w-58px { min-width: 58px; }
.min-w-59, .min-w-59px { min-width: 59px; }
.min-w-60, .min-w-60px { min-width: 60px; }
.min-w-61, .min-w-61px { min-width: 61px; }
.min-w-62, .min-w-62px { min-width: 62px; }
.min-w-63, .min-w-63px { min-width: 63px; }
.min-w-64, .min-w-64px { min-width: 64px; }
.min-w-65, .min-w-65px { min-width: 65px; }
.min-w-66, .min-w-66px { min-width: 66px; }
.min-w-67, .min-w-67px { min-width: 67px; }
.min-w-68, .min-w-68px { min-width: 68px; }
.min-w-69, .min-w-69px { min-width: 69px; }
.min-w-70, .min-w-70px { min-width: 70px; }
.min-w-71, .min-w-71px { min-width: 71px; }
.min-w-72, .min-w-72px { min-width: 72px; }
.min-w-73, .min-w-73px { min-width: 73px; }
.min-w-74, .min-w-74px { min-width: 74px; }
.min-w-75, .min-w-75px { min-width: 75px; }
.min-w-76, .min-w-76px { min-width: 76px; }
.min-w-77, .min-w-77px { min-width: 77px; }
.min-w-78, .min-w-78px { min-width: 78px; }
.min-w-79, .min-w-79px { min-width: 79px; }
.min-w-80, .min-w-80px { min-width: 80px; }
.min-w-81, .min-w-81px { min-width: 81px; }
.min-w-82, .min-w-82px { min-width: 82px; }
.min-w-83, .min-w-83px { min-width: 83px; }
.min-w-84, .min-w-84px { min-width: 84px; }
.min-w-85, .min-w-85px { min-width: 85px; }
.min-w-86, .min-w-86px { min-width: 86px; }
.min-w-87, .min-w-87px { min-width: 87px; }
.min-w-88, .min-w-88px { min-width: 88px; }
.min-w-89, .min-w-89px { min-width: 89px; }
.min-w-90, .min-w-90px { min-width: 90px; }
.min-w-91, .min-w-91px { min-width: 91px; }
.min-w-92, .min-w-92px { min-width: 92px; }
.min-w-93, .min-w-93px { min-width: 93px; }
.min-w-94, .min-w-94px { min-width: 94px; }
.min-w-95, .min-w-95px { min-width: 95px; }
.min-w-96, .min-w-96px { min-width: 96px; }
.min-w-97, .min-w-97px { min-width: 97px; }
.min-w-98, .min-w-98px { min-width: 98px; }
.min-w-99, .min-w-99px { min-width: 99px; }
.min-w-100, .min-w-100px { min-width: 100px; }
.min-w-150, .min-w-150px { min-width: 150px; }
.min-w-200, .min-w-200px { min-width: 200px; }
.min-w-300, .min-w-300px { min-width: 300px; }
.min-w-500, .min-w-500px { min-width: 500px; }

.min-w-16 { min-height: 16px; } /* keeping your original with min-height */

.max-w-0, .max-w-0px { max-width: 0; }
.max-w-1, .max-w-1px { max-width: 1px; }
.max-w-2, .max-w-2px { max-width: 2px; }
.max-w-3, .max-w-3px { max-width: 3px; }
.max-w-4, .max-w-4px { max-width: 4px; }
.max-w-5, .max-w-5px { max-width: 5px; }
.max-w-6, .max-w-6px { max-width: 6px; }
.max-w-7, .max-w-7px { max-width: 7px; }
.max-w-8, .max-w-8px { max-width: 8px; }
.max-w-9, .max-w-9px { max-width: 9px; }
.max-w-10, .max-w-10px { max-width: 10px; }
.max-w-11, .max-w-11px { max-width: 11px; }
.max-w-12, .max-w-12px { max-width: 12px; }
.max-w-13, .max-w-13px { max-width: 13px; }
.max-w-14, .max-w-14px { max-width: 14px; }
.max-w-15, .max-w-15px { max-width: 15px; }
.max-w-16, .max-w-16px { max-width: 16px; }
.max-w-17, .max-w-17px { max-width: 17px; }
.max-w-18, .max-w-18px { max-width: 18px; }
.max-w-19, .max-w-19px { max-width: 19px; }
.max-w-20, .max-w-20px { max-width: 20px; }
.max-w-21, .max-w-21px { max-width: 21px; }
.max-w-22, .max-w-22px { max-width: 22px; }
.max-w-23, .max-w-23px { max-width: 23px; }
.max-w-24, .max-w-24px { max-width: 24px; }
.max-w-25, .max-w-25px { max-width: 25px; }
.max-w-26, .max-w-26px { max-width: 26px; }
.max-w-27, .max-w-27px { max-width: 27px; }
.max-w-28, .max-w-28px { max-width: 28px; }
.max-w-29, .max-w-29px { max-width: 29px; }
.max-w-30, .max-w-30px { max-width: 30px; }
.max-w-31, .max-w-31px { max-width: 31px; }
.max-w-32, .max-w-32px { max-width: 32px; }
.max-w-33, .max-w-33px { max-width: 33px; }
.max-w-34, .max-w-34px { max-width: 34px; }
.max-w-35, .max-w-35px { max-width: 35px; }
.max-w-36, .max-w-36px { max-width: 36px; }
.max-w-37, .max-w-37px { max-width: 37px; }
.max-w-38, .max-w-38px { max-width: 38px; }
.max-w-39, .max-w-39px { max-width: 39px; }
.max-w-40, .max-w-40px { max-width: 40px; }
.max-w-41, .max-w-41px { max-width: 41px; }
.max-w-42, .max-w-42px { max-width: 42px; }
.max-w-43, .max-w-43px { max-width: 43px; }
.max-w-44, .max-w-44px { max-width: 44px; }
.max-w-45, .max-w-45px { max-width: 45px; }
.max-w-46, .max-w-46px { max-width: 46px; }
.max-w-47, .max-w-47px { max-width: 47px; }
.max-w-48, .max-w-48px { max-width: 48px; }
.max-w-49, .max-w-49px { max-width: 49px; }
.max-w-50, .max-w-50px { max-width: 50px; }
.max-w-51, .max-w-51px { max-width: 51px; }
.max-w-52, .max-w-52px { max-width: 52px; }
.max-w-53, .max-w-53px { max-width: 53px; }
.max-w-54, .max-w-54px { max-width: 54px; }
.max-w-55, .max-w-55px { max-width: 55px; }
.max-w-56, .max-w-56px { max-width: 56px; }
.max-w-57, .max-w-57px { max-width: 57px; }
.max-w-58, .max-w-58px { max-width: 58px; }
.max-w-59, .max-w-59px { max-width: 59px; }
.max-w-60, .max-w-60px { max-width: 60px; }
.max-w-61, .max-w-61px { max-width: 61px; }
.max-w-62, .max-w-62px { max-width: 62px; }
.max-w-63, .max-w-63px { max-width: 63px; }
.max-w-64, .max-w-64px { max-width: 64px; }
.max-w-65, .max-w-65px { max-width: 65px; }
.max-w-66, .max-w-66px { max-width: 66px; }
.max-w-67, .max-w-67px { max-width: 67px; }
.max-w-68, .max-w-68px { max-width: 68px; }
.max-w-69, .max-w-69px { max-width: 69px; }
.max-w-70, .max-w-70px { max-width: 70px; }
.max-w-71, .max-w-71px { max-width: 71px; }
.max-w-72, .max-w-72px { max-width: 72px; }
.max-w-73, .max-w-73px { max-width: 73px; }
.max-w-74, .max-w-74px { max-width: 74px; }
.max-w-75, .max-w-75px { max-width: 75px; }
.max-w-76, .max-w-76px { max-width: 76px; }
.max-w-77, .max-w-77px { max-width: 77px; }
.max-w-78, .max-w-78px { max-width: 78px; }
.max-w-79, .max-w-79px { max-width: 79px; }
.max-w-80, .max-w-80px { max-width: 80px; }
.max-w-81, .max-w-81px { max-width: 81px; }
.max-w-82, .max-w-82px { max-width: 82px; }
.max-w-83, .max-w-83px { max-width: 83px; }
.max-w-84, .max-w-84px { max-width: 84px; }
.max-w-85, .max-w-85px { max-width: 85px; }
.max-w-86, .max-w-86px { max-width: 86px; }
.max-w-87, .max-w-87px { max-width: 87px; }
.max-w-88, .max-w-88px { max-width: 88px; }
.max-w-89, .max-w-89px { max-width: 89px; }
.max-w-90, .max-w-90px { max-width: 90px; }
.max-w-91, .max-w-91px { max-width: 91px; }
.max-w-92, .max-w-92px { max-width: 92px; }
.max-w-93, .max-w-93px { max-width: 93px; }
.max-w-94, .max-w-94px { max-width: 94px; }
.max-w-95, .max-w-95px { max-width: 95px; }
.max-w-96, .max-w-96px { max-width: 96px; }
.max-w-97, .max-w-97px { max-width: 97px; }
.max-w-98, .max-w-98px { max-width: 98px; }
.max-w-99, .max-w-99px { max-width: 99px; }
.max-w-100, .max-w-100px { max-width: 100px; }
.max-w-150, .max-w-150px { max-width: 150px; }
.max-w-200, .max-w-200px { max-width: 200px; }
.max-w-300, .max-w-300px { max-width: 300px; }
.max-w-500, .max-w-500px { max-width: 500px; }

.min-w-half { min-width: 50%; }
.min-w-semi-full { min-width: 70%; }
.min-w-semi-half { min-width: 50%; }
.max-w-full { max-width: 100%; }
.max-w-half { max-width: 50%; }
.w-full { width: 100%; }
.min-w-full { min-width: 100%; }
.w-fit { width: fit-content !important; }
.w-semi-full { width: 70%; }
.w-quarter { width: 30%; }
.max-vw { max-width: calc(100vw - 20px); }

/* height */
.h-1, .h-1px { height: 1px; }
.h-2, .h-2px { height: 2px; }
.h-3, .h-3px { height: 3px; }
.h-4, .h-4px { height: 4px; }
.h-5, .h-5px { height: 5px; }
.h-6, .h-6px { height: 6px; }
.h-7, .h-7px { height: 7px; }
.h-8, .h-8px { height: 8px; }
.h-9, .h-9px { height: 9px; }
.h-10, .h-10px { height: 10px !important; }
.h-11, .h-11px { height: 11px; }
.h-12, .h-12px { height: 12px; }
.h-13, .h-13px { height: 13px; }
.h-14, .h-14px { height: 14px; }
.h-15, .h-15px { height: 15px; }
.h-16, .h-16px { height: 16px; }
.h-17, .h-17px { height: 17px; }
.h-18, .h-18px { height: 18px; }
.h-19, .h-19px { height: 19px; }
.h-20, .h-20px { height: 20px !important; }
.h-21, .h-21px { height: 21px; }
.h-22, .h-22px { height: 22px; }
.h-23, .h-23px { height: 23px; }
.h-24, .h-24px { height: 24px; }
.h-25, .h-25px { height: 25px; }
.h-26, .h-26px { height: 26px; }
.h-27, .h-27px { height: 27px; }
.h-28, .h-28px { height: 28px; }
.h-29, .h-29px { height: 29px; }
.h-30, .h-30px { height: 30px !important; }
.h-31, .h-31px { height: 31px; }
.h-32, .h-32px { height: 32px; }
.h-33, .h-33px { height: 33px; }
.h-34, .h-34px { height: 34px; }
.h-35, .h-35px { height: 35px; }
.h-36, .h-36px { height: 36px; }
.h-37, .h-37px { height: 37px; }
.h-38, .h-38px { height: 38px; }
.h-39, .h-39px { height: 39px; }
.h-40, .h-40px { height: 40px; }
.h-41, .h-41px { height: 41px; }
.h-42, .h-42px { height: 42px; }
.h-43, .h-43px { height: 43px; }
.h-44, .h-44px { height: 44px; }
.h-45, .h-45px { height: 45px; }
.h-46, .h-46px { height: 46px; }
.h-47, .h-47px { height: 47px; }
.h-48, .h-48px { height: 48px; }
.h-49, .h-49px { height: 49px; }
.h-50, .h-50px { height: 50px !important; }
.h-51, .h-51px { height: 51px; }
.h-52, .h-52px { height: 52px; }
.h-53, .h-53px { height: 53px; }
.h-54, .h-54px { height: 54px; }
.h-55, .h-55px { height: 55px; }
.h-56, .h-56px { height: 56px; }
.h-57, .h-57px { height: 57px; }
.h-58, .h-58px { height: 58px; }
.h-59, .h-59px { height: 59px; }
.h-60, .h-60px { height: 60px; }
.h-61, .h-61px { height: 61px; }
.h-62, .h-62px { height: 62px; }
.h-63, .h-63px { height: 63px; }
.h-64, .h-64px { height: 64px; }
.h-65, .h-65px { height: 65px; }
.h-66, .h-66px { height: 66px; }
.h-67, .h-67px { height: 67px; }
.h-68, .h-68px { height: 68px; }
.h-69, .h-69px { height: 69px; }
.h-70, .h-70px { height: 70px; }
.h-71, .h-71px { height: 71px; }
.h-72, .h-72px { height: 72px; }
.h-73, .h-73px { height: 73px; }
.h-74, .h-74px { height: 74px; }
.h-75, .h-75px { height: 75px; }
.h-76, .h-76px { height: 76px; }
.h-77, .h-77px { height: 77px; }
.h-78, .h-78px { height: 78px; }
.h-79, .h-79px { height: 79px; }
.h-80, .h-80px { height: 80px; }
.h-81, .h-81px { height: 81px; }
.h-82, .h-82px { height: 82px; }
.h-83, .h-83px { height: 83px; }
.h-84, .h-84px { height: 84px; }
.h-85, .h-85px { height: 85px; }
.h-86, .h-86px { height: 86px; }
.h-87, .h-87px { height: 87px; }
.h-88, .h-88px { height: 88px; }
.h-89, .h-89px { height: 89px; }
.h-90, .h-90px { height: 90px; }
.h-91, .h-91px { height: 91px; }
.h-92, .h-92px { height: 92px; }
.h-93, .h-93px { height: 93px; }
.h-94, .h-94px { height: 94px; }
.h-95, .h-95px { height: 95px; }
.h-96, .h-96px { height: 96px; }
.h-97, .h-97px { height: 97px; }
.h-98, .h-98px { height: 98px; }
.h-99, .h-99px { height: 99px; }
.h-100, .h-100px { height: 100px; }
.h-150, .h-150px { height: 150px !important; }
.h-200, .h-200px { height: 200px !important; }
.h-250, .h-250px { height: 250px !important; }
.h-300, .h-300px { height: 300px !important; }

.h-half { height: 50%; }

.min-h-1, .min-h-1px { min-height: 1px; }
.min-h-2, .min-h-2px { min-height: 2px; }
.min-h-3, .min-h-3px { min-height: 3px; }
.min-h-4, .min-h-4px { min-height: 4px; }
.min-h-5, .min-h-5px { min-height: 5px; }
.min-h-6, .min-h-6px { min-height: 6px; }
.min-h-7, .min-h-7px { min-height: 7px; }
.min-h-8, .min-h-8px { min-height: 8px; }
.min-h-9, .min-h-9px { min-height: 9px; }
.min-h-10, .min-h-10px { min-height: 10px; }
.min-h-11, .min-h-11px { min-height: 11px; }
.min-h-12, .min-h-12px { min-height: 12px; }
.min-h-13, .min-h-13px { min-height: 13px; }
.min-h-14, .min-h-14px { min-height: 14px; }
.min-h-15, .min-h-15px { min-height: 15px; }
.min-h-16, .min-h-16px { min-height: 16px; }
.min-h-17, .min-h-17px { min-height: 17px; }
.min-h-18, .min-h-18px { min-height: 18px; }
.min-h-19, .min-h-19px { min-height: 19px; }
.min-h-20, .min-h-20px { min-height: 20px; }
.min-h-21, .min-h-21px { min-height: 21px; }
.min-h-22, .min-h-22px { min-height: 22px; }
.min-h-23, .min-h-23px { min-height: 23px; }
.min-h-24, .min-h-24px { min-height: 24px; }
.min-h-25, .min-h-25px { min-height: 25px; }
.min-h-26, .min-h-26px { min-height: 26px; }
.min-h-27, .min-h-27px { min-height: 27px; }
.min-h-28, .min-h-28px { min-height: 28px; }
.min-h-29, .min-h-29px { min-height: 29px; }
.min-h-30, .min-h-30px { min-height: 30px; }
.min-h-31, .min-h-31px { min-height: 31px; }
.min-h-32, .min-h-32px { min-height: 32px; }
.min-h-33, .min-h-33px { min-height: 33px; }
.min-h-34, .min-h-34px { min-height: 34px; }
.min-h-35, .min-h-35px { min-height: 35px; }
.min-h-36, .min-h-36px { min-height: 36px; }
.min-h-37, .min-h-37px { min-height: 37px; }
.min-h-38, .min-h-38px { min-height: 38px; }
.min-h-39, .min-h-39px { min-height: 39px; }
.min-h-40, .min-h-40px { min-height: 40px; }
.min-h-41, .min-h-41px { min-height: 41px; }
.min-h-42, .min-h-42px { min-height: 42px; }
.min-h-43, .min-h-43px { min-height: 43px; }
.min-h-44, .min-h-44px { min-height: 44px; }
.min-h-45, .min-h-45px { min-height: 45px; }
.min-h-46, .min-h-46px { min-height: 46px; }
.min-h-47, .min-h-47px { min-height: 47px; }
.min-h-48, .min-h-48px { min-height: 48px; }
.min-h-49, .min-h-49px { min-height: 49px; }
.min-h-50, .min-h-50px { min-height: 50px; }
.min-h-51, .min-h-51px { min-height: 51px; }
.min-h-52, .min-h-52px { min-height: 52px; }
.min-h-53, .min-h-53px { min-height: 53px; }
.min-h-54, .min-h-54px { min-height: 54px; }
.min-h-55, .min-h-55px { min-height: 55px; }
.min-h-56, .min-h-56px { min-height: 56px; }
.min-h-57, .min-h-57px { min-height: 57px; }
.min-h-58, .min-h-58px { min-height: 58px; }
.min-h-59, .min-h-59px { min-height: 59px; }
.min-h-60, .min-h-60px { min-height: 60px; }
.min-h-61, .min-h-61px { min-height: 61px; }
.min-h-62, .min-h-62px { min-height: 62px; }
.min-h-63, .min-h-63px { min-height: 63px; }
.min-h-64, .min-h-64px { min-height: 64px; }
.min-h-65, .min-h-65px { min-height: 65px; }
.min-h-66, .min-h-66px { min-height: 66px; }
.min-h-67, .min-h-67px { min-height: 67px; }
.min-h-68, .min-h-68px { min-height: 68px; }
.min-h-69, .min-h-69px { min-height: 69px; }
.min-h-70, .min-h-70px { min-height: 70px; }
.min-h-71, .min-h-71px { min-height: 71px; }
.min-h-72, .min-h-72px { min-height: 72px; }
.min-h-73, .min-h-73px { min-height: 73px; }
.min-h-74, .min-h-74px { min-height: 74px; }
.min-h-75, .min-h-75px { min-height: 75px; }
.min-h-76, .min-h-76px { min-height: 76px; }
.min-h-77, .min-h-77px { min-height: 77px; }
.min-h-78, .min-h-78px { min-height: 78px; }
.min-h-79, .min-h-79px { min-height: 79px; }
.min-h-80, .min-h-80px { min-height: 80px; }
.min-h-81, .min-h-81px { min-height: 81px; }
.min-h-82, .min-h-82px { min-height: 82px; }
.min-h-83, .min-h-83px { min-height: 83px; }
.min-h-84, .min-h-84px { min-height: 84px; }
.min-h-85, .min-h-85px { min-height: 85px; }
.min-h-86, .min-h-86px { min-height: 86px; }
.min-h-87, .min-h-87px { min-height: 87px; }
.min-h-88, .min-h-88px { min-height: 88px; }
.min-h-89, .min-h-89px { min-height: 89px; }
.min-h-90, .min-h-90px { min-height: 90px; }
.min-h-91, .min-h-91px { min-height: 91px; }
.min-h-92, .min-h-92px { min-height: 92px; }
.min-h-93, .min-h-93px { min-height: 93px; }
.min-h-94, .min-h-94px { min-height: 94px; }
.min-h-95, .min-h-95px { min-height: 95px; }
.min-h-96, .min-h-96px { min-height: 96px; }
.min-h-97, .min-h-97px { min-height: 97px; }
.min-h-98, .min-h-98px { min-height: 98px; }
.min-h-99, .min-h-99px { min-height: 99px; }
.min-h-100, .min-h-100px { min-height: 100px; }
.min-h-150, .min-h-150px { min-height: 150px; }
.min-h-200, .min-h-200px { min-height: 200px; }
.min-h-300, .min-h-300px { min-height: 300px; }
.min-h-500, .min-h-500px { min-height: 500px; }

.min-h-half { min-height: 50%; }
.min-h-semi-full { min-height: 70%; }
.min-h-full { min-height: 100%; }

.max-h-1, .max-h-1px { max-height: 1px; }
.max-h-2, .max-h-2px { max-height: 2px; }
.max-h-3, .max-h-3px { max-height: 3px; }
.max-h-4, .max-h-4px { max-height: 4px; }
.max-h-5, .max-h-5px { max-height: 5px; }
.max-h-6, .max-h-6px { max-height: 6px; }
.max-h-7, .max-h-7px { max-height: 7px; }
.max-h-8, .max-h-8px { max-height: 8px; }
.max-h-9, .max-h-9px { max-height: 9px; }
.max-h-10, .max-h-10px { max-height: 10px; }
.max-h-11, .max-h-11px { max-height: 11px; }
.max-h-12, .max-h-12px { max-height: 12px; }
.max-h-13, .max-h-13px { max-height: 13px; }
.max-h-14, .max-h-14px { max-height: 14px; }
.max-h-15, .max-h-15px { max-height: 15px; }
.max-h-16, .max-h-16px { max-height: 16px; }
.max-h-17, .max-h-17px { max-height: 17px; }
.max-h-18, .max-h-18px { max-height: 18px; }
.max-h-19, .max-h-19px { max-height: 19px; }
.max-h-20, .max-h-20px { max-height: 20px; }
.max-h-21, .max-h-21px { max-height: 21px; }
.max-h-22, .max-h-22px { max-height: 22px; }
.max-h-23, .max-h-23px { max-height: 23px; }
.max-h-24, .max-h-24px { max-height: 24px; }
.max-h-25, .max-h-25px { max-height: 25px; }
.max-h-26, .max-h-26px { max-height: 26px; }
.max-h-27, .max-h-27px { max-height: 27px; }
.max-h-28, .max-h-28px { max-height: 28px; }
.max-h-29, .max-h-29px { max-height: 29px; }
.max-h-30, .max-h-30px { max-height: 30px; }
.max-h-31, .max-h-31px { max-height: 31px; }
.max-h-32, .max-h-32px { max-height: 32px; }
.max-h-33, .max-h-33px { max-height: 33px; }
.max-h-34, .max-h-34px { max-height: 34px; }
.max-h-35, .max-h-35px { max-height: 35px; }
.max-h-36, .max-h-36px { max-height: 36px; }
.max-h-37, .max-h-37px { max-height: 37px; }
.max-h-38, .max-h-38px { max-height: 38px; }
.max-h-39, .max-h-39px { max-height: 39px; }
.max-h-40, .max-h-40px { max-height: 40px; }
.max-h-41, .max-h-41px { max-height: 41px; }
.max-h-42, .max-h-42px { max-height: 42px; }
.max-h-43, .max-h-43px { max-height: 43px; }
.max-h-44, .max-h-44px { max-height: 44px; }
.max-h-45, .max-h-45px { max-height: 45px; }
.max-h-46, .max-h-46px { max-height: 46px; }
.max-h-47, .max-h-47px { max-height: 47px; }
.max-h-48, .max-h-48px { max-height: 48px; }
.max-h-49, .max-h-49px { max-height: 49px; }
.max-h-50, .max-h-50px { max-height: 50px; }
.max-h-51, .max-h-51px { max-height: 51px; }
.max-h-52, .max-h-52px { max-height: 52px; }
.max-h-53, .max-h-53px { max-height: 53px; }
.max-h-54, .max-h-54px { max-height: 54px; }
.max-h-55, .max-h-55px { max-height: 55px; }
.max-h-56, .max-h-56px { max-height: 56px; }
.max-h-57, .max-h-57px { max-height: 57px; }
.max-h-58, .max-h-58px { max-height: 58px; }
.max-h-59, .max-h-59px { max-height: 59px; }
.max-h-60, .max-h-60px { max-height: 60px; }
.max-h-61, .max-h-61px { max-height: 61px; }
.max-h-62, .max-h-62px { max-height: 62px; }
.max-h-63, .max-h-63px { max-height: 63px; }
.max-h-64, .max-h-64px { max-height: 64px; }
.max-h-65, .max-h-65px { max-height: 65px; }
.max-h-66, .max-h-66px { max-height: 66px; }
.max-h-67, .max-h-67px { max-height: 67px; }
.max-h-68, .max-h-68px { max-height: 68px; }
.max-h-69, .max-h-69px { max-height: 69px; }
.max-h-70, .max-h-70px { max-height: 70px; }
.max-h-71, .max-h-71px { max-height: 71px; }
.max-h-72, .max-h-72px { max-height: 72px; }
.max-h-73, .max-h-73px { max-height: 73px; }
.max-h-74, .max-h-74px { max-height: 74px; }
.max-h-75, .max-h-75px { max-height: 75px; }
.max-h-76, .max-h-76px { max-height: 76px; }
.max-h-77, .max-h-77px { max-height: 77px; }
.max-h-78, .max-h-78px { max-height: 78px; }
.max-h-79, .max-h-79px { max-height: 79px; }
.max-h-80, .max-h-80px { max-height: 80px; }
.max-h-81, .max-h-81px { max-height: 81px; }
.max-h-82, .max-h-82px { max-height: 82px; }
.max-h-83, .max-h-83px { max-height: 83px; }
.max-h-84, .max-h-84px { max-height: 84px; }
.max-h-85, .max-h-85px { max-height: 85px; }
.max-h-86, .max-h-86px { max-height: 86px; }
.max-h-87, .max-h-87px { max-height: 87px; }
.max-h-88, .max-h-88px { max-height: 88px; }
.max-h-89, .max-h-89px { max-height: 89px; }
.max-h-90, .max-h-90px { max-height: 90px; }
.max-h-91, .max-h-91px { max-height: 91px; }
.max-h-92, .max-h-92px { max-height: 92px; }
.max-h-93, .max-h-93px { max-height: 93px; }
.max-h-94, .max-h-94px { max-height: 94px; }
.max-h-95, .max-h-95px { max-height: 95px; }
.max-h-96, .max-h-96px { max-height: 96px; }
.max-h-97, .max-h-97px { max-height: 97px; }
.max-h-98, .max-h-98px { max-height: 98px; }
.max-h-99, .max-h-99px { max-height: 99px; }
.max-h-100, .max-h-100px { max-height: 100px; }
.max-h-150, .max-h-150px { max-height: 150px; }
.max-h-200, .max-h-200px { max-height: 200px; }
.max-h-300, .max-h-300px { max-height: 300px; }
.max-h-500, .max-h-500px { max-height: 500px; }
.max-h-half { max-height: 50%; }
.max-h-semi-full { max-height: 70%; }
.max-h-full { max-height: 100%; }

.h-full { height: 100%; }
.h-fit { height: fit-content; }
.h-semi-full { height: 70%; }
.perfect-square { aspect-ratio: 1; }

.text-fill-color{
    background:var(--background-color);
    background-clip:text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* fonts */
.font-primary{
    font-family:var(--font);
}
.font-cinzel-decorative{
    font-family:'cinzel decorative' !important;
}
.font-tilt-prism{
    font-family:'tilt prism';
}
.font-ryal{
    font-family:ryal !important;
}
.font-plaster{
    font-family:plaster;
}
.font-poppins{
    font-family:poppins;
}
.font-libertinus-sans{
    font-family: 'libertinus sans';
}
.font-bowl{
    font-family:bowl;
}
/* description/heading */
.desc {
    font-size: 1.3rem;
}

/* font- pattern - all values 0.1 to 9.0 in 0.1 increments with rem versions */
.font-0-1, .font-0-1rem { font-size: 0.1rem; }
.font-0-2, .font-0-2rem { font-size: 0.2rem; }
.font-0-3, .font-0-3rem { font-size: 0.3rem; }
.font-0-4, .font-0-4rem { font-size: 0.4rem; }
.font-0-5, .font-0-5rem { font-size: 0.5rem; }
.font-0-6, .font-0-6rem { font-size: 0.6rem; }
.font-0-7, .font-0-7rem { font-size: 0.7rem; }
.font-0-8, .font-0-8rem { font-size: 0.8rem; }
.font-0-9, .font-0-9rem { font-size: 0.9rem; }
.font-1, .font-1rem { font-size: 1.1rem; }
.font-1-1, .font-1-1rem { font-size: 1.1rem; }
.font-1-2, .font-1-2rem { font-size: 1.2rem; }
.font-1-3, .font-1-3rem { font-size: 1.3rem; }
.font-1-4, .font-1-4rem { font-size: 1.4rem; }
.font-1-5, .font-1-5rem { font-size: 1.5rem; }
.font-1-6, .font-1-6rem { font-size: 1.6rem; }
.font-1-7, .font-1-7rem { font-size: 1.7rem; }
.font-1-8, .font-1-8rem { font-size: 1.8rem; }
.font-1-9, .font-1-9rem { font-size: 1.9rem; }
.font-2, .font-2rem { font-size: 2rem; }
.font-2-1, .font-2-1rem { font-size: 2.1rem; }
.font-2-2, .font-2-2rem { font-size: 2.2rem; }
.font-2-3, .font-2-3rem { font-size: 2.3rem; }
.font-2-4, .font-2-4rem { font-size: 2.4rem; }
.font-2-5, .font-2-5rem { font-size: 2.5rem; }
.font-2-6, .font-2-6rem { font-size: 2.6rem; }
.font-2-7, .font-2-7rem { font-size: 2.7rem; }
.font-2-8, .font-2-8rem { font-size: 2.8rem; }
.font-2-9, .font-2-9rem { font-size: 2.9rem; }
.font-3, .font-3rem { font-size: 3rem; }
.font-3-1, .font-3-1rem { font-size: 3.1rem; }
.font-3-2, .font-3-2rem { font-size: 3.2rem; }
.font-3-3, .font-3-3rem { font-size: 3.3rem; }
.font-3-4, .font-3-4rem { font-size: 3.4rem; }
.font-3-5, .font-3-5rem { font-size: 3.5rem; }
.font-3-6, .font-3-6rem { font-size: 3.6rem; }
.font-3-7, .font-3-7rem { font-size: 3.7rem; }
.font-3-8, .font-3-8rem { font-size: 3.8rem; }
.font-3-9, .font-3-9rem { font-size: 3.9rem; }
.font-4, .font-4rem { font-size: 4rem; }
.font-4-1, .font-4-1rem { font-size: 4.1rem; }
.font-4-2, .font-4-2rem { font-size: 4.2rem; }
.font-4-3, .font-4-3rem { font-size: 4.3rem; }
.font-4-4, .font-4-4rem { font-size: 4.4rem; }
.font-4-5, .font-4-5rem { font-size: 4.5rem; }
.font-4-6, .font-4-6rem { font-size: 4.6rem; }
.font-4-7, .font-4-7rem { font-size: 4.7rem; }
.font-4-8, .font-4-8rem { font-size: 4.8rem; }
.font-4-9, .font-4-9rem { font-size: 4.9rem; }
.font-5, .font-5rem { font-size: 5rem; }
.font-5-1, .font-5-1rem { font-size: 5.1rem; }
.font-5-2, .font-5-2rem { font-size: 5.2rem; }
.font-5-3, .font-5-3rem { font-size: 5.3rem; }
.font-5-4, .font-5-4rem { font-size: 5.4rem; }
.font-5-5, .font-5-5rem { font-size: 5.5rem; }
.font-5-6, .font-5-6rem { font-size: 5.6rem; }
.font-5-7, .font-5-7rem { font-size: 5.7rem; }
.font-5-8, .font-5-8rem { font-size: 5.8rem; }
.font-5-9, .font-5-9rem { font-size: 5.9rem; }
.font-6, .font-6rem { font-size: 6rem; }
.font-6-1, .font-6-1rem { font-size: 6.1rem; }
.font-6-2, .font-6-2rem { font-size: 6.2rem; }
.font-6-3, .font-6-3rem { font-size: 6.3rem; }
.font-6-4, .font-6-4rem { font-size: 6.4rem; }
.font-6-5, .font-6-5rem { font-size: 6.5rem; }
.font-6-6, .font-6-6rem { font-size: 6.6rem; }
.font-6-7, .font-6-7rem { font-size: 6.7rem; }
.font-6-8, .font-6-8rem { font-size: 6.8rem; }
.font-6-9, .font-6-9rem { font-size: 6.9rem; }
.font-7, .font-7rem { font-size: 7rem; }
.font-7-1, .font-7-1rem { font-size: 7.1rem; }
.font-7-2, .font-7-2rem { font-size: 7.2rem; }
.font-7-3, .font-7-3rem { font-size: 7.3rem; }
.font-7-4, .font-7-4rem { font-size: 7.4rem; }
.font-7-5, .font-7-5rem { font-size: 7.5rem; }
.font-7-6, .font-7-6rem { font-size: 7.6rem; }
.font-7-7, .font-7-7rem { font-size: 7.7rem; }
.font-7-8, .font-7-8rem { font-size: 7.8rem; }
.font-7-9, .font-7-9rem { font-size: 7.9rem; }
.font-8, .font-8rem { font-size: 8rem; }
.font-8-1, .font-8-1rem { font-size: 8.1rem; }
.font-8-2, .font-8-2rem { font-size: 8.2rem; }
.font-8-3, .font-8-3rem { font-size: 8.3rem; }
.font-8-4, .font-8-4rem { font-size: 8.4rem; }
.font-8-5, .font-8-5rem { font-size: 8.5rem; }
.font-8-6, .font-8-6rem { font-size: 8.6rem; }
.font-8-7, .font-8-7rem { font-size: 8.7rem; }
.font-8-8, .font-8-8rem { font-size: 8.8rem; }
.font-8-9, .font-8-9rem { font-size: 8.9rem; }
.font-9, .font-9rem { font-size: 9rem; }
.font-9-1, .font-9-1rem { font-size: 9.1rem; }
.font-9-2, .font-9-2rem { font-size: 9.2rem; }
.font-9-3, .font-9-3rem { font-size: 9.3rem; }
.font-9-4, .font-9-4rem { font-size: 9.4rem; }
.font-9-5, .font-9-5rem { font-size: 9.5rem; }
.font-9-6, .font-9-6rem { font-size: 9.6rem; }
.font-9-7, .font-9-7rem { font-size: 9.7rem; }
.font-9-8, .font-9-8rem { font-size: 9.8rem; }
.font-9-9, .font-9-9rem { font-size: 9.9rem; }

/* font-size- pattern - all values 0.1 to 9.0 in 0.1 increments with rem versions */
.font-size-01, .font-size-01rem { font-size: 0.1rem; }
.font-size-02, .font-size-02rem { font-size: 0.2rem; }
.font-size-03, .font-size-03rem { font-size: 0.3rem; }
.font-size-04, .font-size-04rem { font-size: 0.4rem; }
.font-size-05, .font-size-05rem { font-size: 0.5rem; }
.font-size-06, .font-size-06rem { font-size: 0.6rem; }
.font-size-07, .font-size-07rem { font-size: 0.7rem; }
.font-size-08, .font-size-08rem { font-size: 0.8rem; }
.font-size-09, .font-size-09rem { font-size: 0.9rem; }
.font-size-1, .font-size-1rem { font-size: 1rem; }
.font-size-1-1, .font-size-1-1rem { font-size: 1.1rem; }
.font-size-1-2, .font-size-1-2rem { font-size: 1.2rem; }
.font-size-1-3, .font-size-1-3rem { font-size: 1.3rem; }
.font-size-1-4, .font-size-1-4rem { font-size: 1.4rem; }
.font-size-1-5, .font-size-1-5rem { font-size: 1.5rem; }
.font-size-1-6, .font-size-1-6rem { font-size: 1.6rem; }
.font-size-1-7, .font-size-1-7rem { font-size: 1.7rem; }
.font-size-1-8, .font-size-1-8rem { font-size: 1.8rem; }
.font-size-1-9, .font-size-1-9rem { font-size: 1.9rem; }
.font-size-2, .font-size-2rem { font-size: 2rem; }
.font-size-2-1, .font-size-2-1rem { font-size: 2.1rem; }
.font-size-2-2, .font-size-2-2rem { font-size: 2.2rem; }
.font-size-2-3, .font-size-2-3rem { font-size: 2.3rem; }
.font-size-2-4, .font-size-2-4rem { font-size: 2.4rem; }
.font-size-2-5, .font-size-2-5rem { font-size: 2.5rem; }
.font-size-2-6, .font-size-2-6rem { font-size: 2.6rem; }
.font-size-2-7, .font-size-2-7rem { font-size: 2.7rem; }
.font-size-2-8, .font-size-2-8rem { font-size: 2.8rem; }
.font-size-2-9, .font-size-2-9rem { font-size: 2.9rem; }
.font-size-3, .font-size-3rem { font-size: 3rem; }
.font-size-3-1, .font-size-3-1rem { font-size: 3.1rem; }
.font-size-3-2, .font-size-3-2rem { font-size: 3.2rem; }
.font-size-3-3, .font-size-3-3rem { font-size: 3.3rem; }
.font-size-3-4, .font-size-3-4rem { font-size: 3.4rem; }
.font-size-3-5, .font-size-3-5rem { font-size: 3.5rem; }
.font-size-3-6, .font-size-3-6rem { font-size: 3.6rem; }
.font-size-3-7, .font-size-3-7rem { font-size: 3.7rem; }
.font-size-3-8, .font-size-3-8rem { font-size: 3.8rem; }
.font-size-3-9, .font-size-3-9rem { font-size: 3.9rem; }
.font-size-4, .font-size-4rem { font-size: 4rem; }
.font-size-4-1, .font-size-4-1rem { font-size: 4.1rem; }
.font-size-4-2, .font-size-4-2rem { font-size: 4.2rem; }
.font-size-4-3, .font-size-4-3rem { font-size: 4.3rem; }
.font-size-4-4, .font-size-4-4rem { font-size: 4.4rem; }
.font-size-4-5, .font-size-4-5rem { font-size: 4.5rem; }
.font-size-4-6, .font-size-4-6rem { font-size: 4.6rem; }
.font-size-4-7, .font-size-4-7rem { font-size: 4.7rem; }
.font-size-4-8, .font-size-4-8rem { font-size: 4.8rem; }
.font-size-4-9, .font-size-4-9rem { font-size: 4.9rem; }
.font-size-5, .font-size-5rem { font-size: 5rem; }
.font-size-5-1, .font-size-5-1rem { font-size: 5.1rem; }
.font-size-5-2, .font-size-5-2rem { font-size: 5.2rem; }
.font-size-5-3, .font-size-5-3rem { font-size: 5.3rem; }
.font-size-5-4, .font-size-5-4rem { font-size: 5.4rem; }
.font-size-5-5, .font-size-5-5rem { font-size: 5.5rem; }
.font-size-5-6, .font-size-5-6rem { font-size: 5.6rem; }
.font-size-5-7, .font-size-5-7rem { font-size: 5.7rem; }
.font-size-5-8, .font-size-5-8rem { font-size: 5.8rem; }
.font-size-5-9, .font-size-5-9rem { font-size: 5.9rem; }
.font-size-6, .font-size-6rem { font-size: 6rem; }
.font-size-6-1, .font-size-6-1rem { font-size: 6.1rem; }
.font-size-6-2, .font-size-6-2rem { font-size: 6.2rem; }
.font-size-6-3, .font-size-6-3rem { font-size: 6.3rem; }
.font-size-6-4, .font-size-6-4rem { font-size: 6.4rem; }
.font-size-6-5, .font-size-6-5rem { font-size: 6.5rem; }
.font-size-6-6, .font-size-6-6rem { font-size: 6.6rem; }
.font-size-6-7, .font-size-6-7rem { font-size: 6.7rem; }
.font-size-6-8, .font-size-6-8rem { font-size: 6.8rem; }
.font-size-6-9, .font-size-6-9rem { font-size: 6.9rem; }
.font-size-7, .font-size-7rem { font-size: 7rem; }
.font-size-7-1, .font-size-7-1rem { font-size: 7.1rem; }
.font-size-7-2, .font-size-7-2rem { font-size: 7.2rem; }
.font-size-7-3, .font-size-7-3rem { font-size: 7.3rem; }
.font-size-7-4, .font-size-7-4rem { font-size: 7.4rem; }
.font-size-7-5, .font-size-7-5rem { font-size: 7.5rem; }
.font-size-7-6, .font-size-7-6rem { font-size: 7.6rem; }
.font-size-7-7, .font-size-7-7rem { font-size: 7.7rem; }
.font-size-7-8, .font-size-7-8rem { font-size: 7.8rem; }
.font-size-7-9, .font-size-7-9rem { font-size: 7.9rem; }
.font-size-8, .font-size-8rem { font-size: 8rem; }
.font-size-8-1, .font-size-8-1rem { font-size: 8.1rem; }
.font-size-8-2, .font-size-8-2rem { font-size: 8.2rem; }
.font-size-8-3, .font-size-8-3rem { font-size: 8.3rem; }
.font-size-8-4, .font-size-8-4rem { font-size: 8.4rem; }
.font-size-8-5, .font-size-8-5rem { font-size: 8.5rem; }
.font-size-8-6, .font-size-8-6rem { font-size: 8.6rem; }
.font-size-8-7, .font-size-8-7rem { font-size: 8.7rem; }
.font-size-8-8, .font-size-8-8rem { font-size: 8.8rem; }
.font-size-8-9, .font-size-8-9rem { font-size: 8.9rem; }
.font-size-9, .font-size-9rem { font-size: 9rem; }
.font-size-9-1, .font-size-9-1rem { font-size: 9.1rem; }
.font-size-9-2, .font-size-9-2rem { font-size: 9.2rem; }
.font-size-9-3, .font-size-9-3rem { font-size: 9.3rem; }
.font-size-9-4, .font-size-9-4rem { font-size: 9.4rem; }
.font-size-9-5, .font-size-9-5rem { font-size: 9.5rem; }
.font-size-9-6, .font-size-9-6rem { font-size: 9.6rem; }
.font-size-9-7, .font-size-9-7rem { font-size: 9.7rem; }
.font-size-9-8, .font-size-9-8rem { font-size: 9.8rem; }
.font-size-9-9, .font-size-9-9rem { font-size: 9.9rem; }
.font-weight-100{
    font-weight:100;
}
.font-weight-200{
    font-weight:200;
}
.font-weight-300{
    font-weight:300;
}
.font-weight-400{
    font-weight:400;
}
.font-weight-500{
    font-weight:500;
}
.font-weight-600{
    font-weight:600;
}
.bold,.font-weight-700{
    font-weight:700;
}
.font-weight-800{
    font-weight:800;
}
.font-weight-900{
    font-weight:900;
}
.u{
    text-decoration:underline;
}
.no-u{
    text-decoration:none;

}
.no-outline{
    outline:none;
}
.no-border{
    border:none;
}
.box-shadow{
    box-shadow:0 4px 8px rgba(0,0,0,0.1);
}
.box-shadow-primary{
    box-shadow: var(--box-shadow-primary);
}
.box-shadow-silver{
    box-shadow:0 4px 8px silver;
}
.c-bg{
    color:var(--bg);

}
.c-bg-light{
    color:var(--bg-light);

}
.c-bg-secondary{
    color:var(--bg-secondary);
}
.c,.c-text,.text{
    color:var(--text);
}
/* text overflow */
.text-overflow-ellipsis{
    text-overflow: ellipsis;
    display:block;
    overflow:hidden;
    width:100%;
    max-width:100%;
    
}
.text-overflow-clip{
    text-overflow: clip;
}

/* text align */
.text-center,.text-align-center{
    text-align:center;
}
.text-start,.text-align-start{
    text-align:start;
}
.text-end,.text-align-end{
    text-align:end;
}
.capitalize{
    text-transform: capitalize;
}
.uppercase{
    text-transform: uppercase;
}
.ws-nowrap{
    white-space: nowrap;
}
.text-gradient{
    background:var(--text-gradient);
    background-clip:text;
    --webkit-background-clip:text;
    --webkit-text-fill-color:transparent;
     color:transparent;
}
/* pointer */
.pointer{
    cursor:pointer;
}
/* no pointer */
.no-pointer{
    pointer-events: none;
}
/* clip paths */
.clip-none{
    clip-path:none !important;
}
.clip-0{
    clip-path:inset(0 round 0) !important;
}
.clip-path{
    clip-path: inset(0) !important;
}
.clip-10{
    clip-path:inset(0 round 10px) !important;
}
.clip-5{
      clip-path:inset(0 round 5px) !important; 
}
.clip-20{
       clip-path:inset(0 round 20px) !important;
}
.clip-50{
    clip-path:inset(0 round 50px);
}
.clip-30{
    clip-path:inset(0 round 30px);
}
.clip-100{
    clip-path:inset(0 round 100px);
}
.clip-1000{
       clip-path:inset(0 round 1000px) !important;
}
.clip-circle{
       clip-path:inset(0 round 50%) !important;
}
.clip-none{
    clip-path:none;
}
/* background */
.bg, .bg-bg { background: var(--bg); }

.bg-white, .bg-white-color { background: white; }
.bg-white-transparent, .bg-white-transparent-bg { background: rgba(255, 255, 255, 0.5); }
.bg-white-light, .bg-white-light-bg { background: rgba(255, 255, 255, 0.1); }

.bg-black-transparent, .bg-black-transparent-bg { background: rgba(0, 0, 0, 0.5); }
.bg-black-light, .bg-black-light-bg { background: rgba(0, 0, 0, 0.1); }

.bg-dim-transparent, .bg-dim-transparent-bg { background: rgba(112, 128, 144, 0.5); }
.bg-708090, .bg-708090-color { background-color: #708090; }

.bg-black, .bg-black-color { background: black; }

.bg-primary, .bg-primary-color { background: var(--primary); }
.bg-primary-light, .bg-primary-light-color { background: var(--primary-light); }
.bg-primary-lighter, .bg-primary-lighter-color { background: var(--primary-lighter); }
.bg-primary-darker, .bg-primary-darker-color { background: var(--primary-darker); }
.bg-primary-transparent, .bg-primary-transparent-bg { background: var(--primary-transparent); }
.bg-primary-dark, .bg-primary-dark-color { background: var(--primary-dark); }

.bg-secondary, .bg-secondary-color { background: var(--secondary) !important; }
.bg-secondary-dark, .bg-secondary-dark-color { background: var(--secondary-dark) !important; }
.bg-secondary-light, .bg-secondary-light-color { background: var(--secondary-light) !important; }

.bg-inherit, .bg-inherit-bg { background: inherit; }

.bg-dim, .bg-dim-bg { background: var(--bg-dim); }
.bg-light, .bg-light-bg { background: var(--bg-light); }
.bg-lighter, .bg-lighter-bg { background: var(--bg-lighter); }

.bg-whitesmoke, .bg-whitesmoke-color { background: whitesmoke; }
.bg-transparent, .bg-transparent-bg { background: transparent; }

.bg-green, .bg-green-color { background: var(--green); }
.bg-green-transparent, .bg-green-transparent-bg { background: rgba(0, 255, 0, 0.1); }

.bg-red, .bg-red-color { background: red; }
.bg-red-transparent, .bg-red-transparent-bg { background: rgba(255, 0, 0, 0.1); }

.bg-gold, .bg-gold-color { background: #ffd700; }
.bg-gold-transparent, .bg-gold-transparent-bg { background: rgba(255, 215, 0, 0.1); }

.bg-silver, .bg-silver-color { background: silver; }
.bg-blue, .bg-blue-color { background: blue; }
.bg-navy, .bg-navy-color { background: navy; }
.bg-purple, .bg-purple-color { background: rgb(108, 92, 230); }

/* ===== ADDITIONAL BACKGROUND COLORS ===== */

/* Reds & Pinks */
.bg-crimson, .bg-crimson-color { background: crimson; }
.bg-darkred, .bg-darkred-color { background: darkred; }
.bg-firebrick, .bg-firebrick-color { background: firebrick; }
.bg-indianred, .bg-indianred-color { background: indianred; }
.bg-lightcoral, .bg-lightcoral-color { background: lightcoral; }
.bg-lightpink, .bg-lightpink-color { background: lightpink; }
.bg-pink, .bg-pink-color { background: pink; }
.bg-rose, .bg-rose-color { background: #ff007f; }
.bg-tomato, .bg-tomato-color { background: tomato; }
.bg-salmon, .bg-salmon-color { background: salmon; }

/* Blues */
.bg-darkblue, .bg-darkblue-color { background: darkblue; }
.bg-dodgerblue, .bg-dodgerblue-color { background: dodgerblue; }
.bg-lightblue, .bg-lightblue-color { background: lightblue; }
.bg-lightskyblue, .bg-lightskyblue-color { background: lightskyblue; }
.bg-mediumblue, .bg-mediumblue-color { background: mediumblue; }
.bg-midnightblue, .bg-midnightblue-color { background: midnightblue; }
.bg-royalblue, .bg-royalblue-color { background: royalblue; }
.bg-skyblue, .bg-skyblue-color { background: skyblue; }
.bg-steelblue, .bg-steelblue-color { background: steelblue; }
.bg-turquoise, .bg-turquoise-color { background: turquoise; }
.bg-cyan, .bg-cyan-color { background: cyan; }
.bg-lightcyan, .bg-lightcyan-color { background: lightcyan; }

/* Greens */
.bg-darkgreen, .bg-darkgreen-color { background: darkgreen; }
.bg-darkolivegreen, .bg-darkolivegreen-color { background: darkolivegreen; }
.bg-forestgreen, .bg-forestgreen-color { background: forestgreen; }
.bg-greenyellow, .bg-greenyellow-color { background: greenyellow; }
.bg-lime, .bg-lime-color { background: lime; }
.bg-limegreen, .bg-limegreen-color { background: limegreen; }
.bg-lightgreen, .bg-lightgreen-color { background: lightgreen; }
.bg-mediumseagreen, .bg-mediumseagreen-color { background: mediumseagreen; }
.bg-olivedrab, .bg-olivedrab-color { background: olivedrab; }
.bg-palegreen, .bg-palegreen-color { background: palegreen; }
.bg-seagreen, .bg-seagreen-color { background: seagreen; }
.bg-springgreen, .bg-springgreen-color { background: springgreen; }
.bg-yellowgreen, .bg-yellowgreen-color { background: yellowgreen; }
.bg-teal, .bg-teal-color { background: teal; }
.bg-darkcyan, .bg-darkcyan-color { background: darkcyan; }

/* Yellows & Oranges */
.bg-goldenrod, .bg-goldenrod-color { background: goldenrod; }
.bg-darkgoldenrod, .bg-darkgoldenrod-color { background: darkgoldenrod; }
.bg-lightgoldenrodyellow, .bg-lightgoldenrodyellow-color { background: lightgoldenrodyellow; }
.bg-lemonchiffon, .bg-lemonchiffon-color { background: lemonchiffon; }
.bg-palegoldenrod, .bg-palegoldenrod-color { background: palegoldenrod; }
.bg-yellow, .bg-yellow-color { background: yellow; }
.bg-lightyellow, .bg-lightyellow-color { background: lightyellow; }
.bg-orange, .bg-orange-color { background: orange; }
.bg-darkorange, .bg-darkorange-color { background: darkorange; }
.bg-forestgreen, .bg-forestgreen-color { background: forestgreen; }
.bg-coral, .bg-coral-color { background: coral; }
.bg-peachpuff, .bg-peachpuff-color { background: peachpuff; }

/* Purples & Violets */
.bg-darkmagenta, .bg-darkmagenta-color { background: darkmagenta; }
.bg-darkorchid, .bg-darkorchid-color { background: darkorchid; }
.bg-darkviolet, .bg-darkviolet-color { background: darkviolet; }
.bg-fuchsia, .bg-fuchsia-color { background: fuchsia; }
.bg-indigo, .bg-indigo-color { background: indigo; }
.bg-lavender, .bg-lavender-color { background: lavender; }
.bg-lavenderblush, .bg-lavenderblush-color { background: lavenderblush; }
.bg-mediumorchid, .bg-mediumorchid-color { background: mediumorchid; }
.bg-mediumpurple, .bg-mediumpurple-color { background: mediumpurple; }
.bg-magenta, .bg-magenta-color { background: magenta; }
.bg-plum, .bg-plum-color { background: plum; }
.bg-thistle, .bg-thistle-color { background: thistle; }
.bg-violet, .bg-violet-color { background: violet; }
.bg-blueviolet, .bg-blueviolet-color { background: blueviolet; }
.bg-mediumslateblue, .bg-mediumslateblue-color { background: mediumslateblue; }
.bg-slateblue, .bg-slateblue-color { background: slateblue; }

/* Browns & Beiges */
.bg-beige, .bg-beige-color { background: beige; }
.bg-bisque, .bg-bisque-color { background: bisque; }
.bg-blancealmond, .bg-blancealmond-color { background: blanchedalmond; }
.bg-brown, .bg-brown-color { background: brown; }
.bg-burlywood, .bg-burlywood-color { background: burlywood; }
.bg-chocolate, .bg-chocolate-color { background: chocolate; }
.bg-cornsilk, .bg-cornsilk-color { background: cornsilk; }
.bg-darkkhaki, .bg-darkkhaki-color { background: darkkhaki; }
.bg-gainsboro, .bg-gainsboro-color { background: gainsboro; }
.bg-honeydew, .bg-honeydew-color { background: honeydew; }
.bg-ivory, .bg-ivory-color { background: ivory; }
.bg-khaki, .bg-khaki-color { background: khaki; }
.bg-lightgray, .bg-lightgray-color { background: lightgray; }
.bg-moccasin, .bg-moccasin-color { background: moccasin; }
.bg-navajowhite, .bg-navajowhite-color { background: navajowhite; }
.bg-oldlace, .bg-oldlace-color { background: oldlace; }
.bg-peru, .bg-peru-color { background: peru; }
.bg-sandybrown, .bg-sandybrown-color { background: sandybrown; }
.bg-sienna, .bg-sienna-color { background: sienna; }
.bg-tan, .bg-tan-color { background: tan; }
.bg-wheat, .bg-wheat-color { background: wheat; }

/* Grays */
.bg-darkgray, .bg-darkgray-color { background: darkgray; }
.bg-dimgray, .bg-dimgray-color { background: dimgray; }
.bg-gray, .bg-gray-color { background: gray; }
.bg-lightgray, .bg-lightgray-color { background: lightgray; }
.bg-lightslategray, .bg-lightslategray-color { background: lightslategray; }
.bg-slategray, .bg-slategray-color { background: slategray; }

/* Transparent variants for common colors */
.bg-black-10, .bg-black-10-bg { background: rgba(0, 0, 0, 0.1); }
.bg-black-20, .bg-black-20-bg { background: rgba(0, 0, 0, 0.2); }
.bg-black-30, .bg-black-30-bg { background: rgba(0, 0, 0, 0.3); }
.bg-black-40, .bg-black-40-bg { background: rgba(0, 0, 0, 0.4); }
.bg-black-50, .bg-black-50-bg { background: rgba(0, 0, 0, 0.5); }
.bg-black-60, .bg-black-60-bg { background: rgba(0, 0, 0, 0.6); }
.bg-black-70, .bg-black-70-bg { background: rgba(0, 0, 0, 0.7); }
.bg-black-80, .bg-black-80-bg { background: rgba(0, 0, 0, 0.8); }
.bg-black-90, .bg-black-90-bg { background: rgba(0, 0, 0, 0.9); }

.bg-white-10, .bg-white-10-bg { background: rgba(255, 255, 255, 0.1); }
.bg-white-20, .bg-white-20-bg { background: rgba(255, 255, 255, 0.2); }
.bg-white-30, .bg-white-30-bg { background: rgba(255, 255, 255, 0.3); }
.bg-white-40, .bg-white-40-bg { background: rgba(255, 255, 255, 0.4); }
.bg-white-50, .bg-white-50-bg { background: rgba(255, 255, 255, 0.5); }
.bg-white-60, .bg-white-60-bg { background: rgba(255, 255, 255, 0.6); }
.bg-white-70, .bg-white-70-bg { background: rgba(255, 255, 255, 0.7); }
.bg-white-80, .bg-white-80-bg { background: rgba(255, 255, 255, 0.8); }
.bg-white-90, .bg-white-90-bg { background: rgba(255, 255, 255, 0.9); }

/* Social media & brand colors */
/* ===== SOCIAL MEDIA BACKGROUND COLORS ===== */

/* Facebook */
.bg-facebook { background: #1877f2; }
.bg-facebook-01 { background: rgba(24, 119, 242, 0.1); }
.bg-facebook-02 { background: rgba(24, 119, 242, 0.2); }
.bg-facebook-03 { background: rgba(24, 119, 242, 0.3); }
.bg-facebook-04 { background: rgba(24, 119, 242, 0.4); }
.bg-facebook-05 { background: rgba(24, 119, 242, 0.5); }
.bg-facebook-06 { background: rgba(24, 119, 242, 0.6); }
.bg-facebook-07 { background: rgba(24, 119, 242, 0.7); }
.bg-facebook-08 { background: rgba(24, 119, 242, 0.8); }
.bg-facebook-09 { background: rgba(24, 119, 242, 0.9); }
.bg-facebook-10 { background: rgba(24, 119, 242, 1.0); }

/* Twitter */
.bg-twitter { background: #000000; }
.bg-twitter-01 { background: rgba(0, 0, 0, 0.1); }
.bg-twitter-02 { background: rgba(0, 0, 0, 0.2); }
.bg-twitter-03 { background: rgba(0, 0, 0, 0.3); }
.bg-twitter-04 { background: rgba(0, 0, 0, 0.4); }
.bg-twitter-05 { background: rgba(0, 0, 0, 0.5); }
.bg-twitter-06 { background: rgba(0, 0, 0, 0.6); }
.bg-twitter-07 { background: rgba(0, 0, 0, 0.7); }
.bg-twitter-08 { background: rgba(0, 0, 0, 0.8); }
.bg-twitter-09 { background: rgba(0, 0, 0, 0.9); }
.bg-twitter-10 { background: rgba(0, 0, 0, 1.0); }

/* Instagram */
.bg-instagram { background: #e4405f; }
.bg-instagram-01 { background: rgba(228, 64, 95, 0.1); }
.bg-instagram-02 { background: rgba(228, 64, 95, 0.2); }
.bg-instagram-03 { background: rgba(228, 64, 95, 0.3); }
.bg-instagram-04 { background: rgba(228, 64, 95, 0.4); }
.bg-instagram-05 { background: rgba(228, 64, 95, 0.5); }
.bg-instagram-06 { background: rgba(228, 64, 95, 0.6); }
.bg-instagram-07 { background: rgba(228, 64, 95, 0.7); }
.bg-instagram-08 { background: rgba(228, 64, 95, 0.8); }
.bg-instagram-09 { background: rgba(228, 64, 95, 0.9); }
.bg-instagram-10 { background: rgba(228, 64, 95, 1.0); }

/* Instagram Gradient */
.bg-instagram-gradient { 
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

/* LinkedIn */
.bg-linkedin { background: #0a66c2; }
.bg-linkedin-01 { background: rgba(10, 102, 194, 0.1); }
.bg-linkedin-02 { background: rgba(10, 102, 194, 0.2); }
.bg-linkedin-03 { background: rgba(10, 102, 194, 0.3); }
.bg-linkedin-04 { background: rgba(10, 102, 194, 0.4); }
.bg-linkedin-05 { background: rgba(10, 102, 194, 0.5); }
.bg-linkedin-06 { background: rgba(10, 102, 194, 0.6); }
.bg-linkedin-07 { background: rgba(10, 102, 194, 0.7); }
.bg-linkedin-08 { background: rgba(10, 102, 194, 0.8); }
.bg-linkedin-09 { background: rgba(10, 102, 194, 0.9); }
.bg-linkedin-10 { background: rgba(10, 102, 194, 1.0); }

/* YouTube */
.bg-youtube { background: #ff0000; }
.bg-youtube-01 { background: rgba(255, 0, 0, 0.1); }
.bg-youtube-02 { background: rgba(255, 0, 0, 0.2); }
.bg-youtube-03 { background: rgba(255, 0, 0, 0.3); }
.bg-youtube-04 { background: rgba(255, 0, 0, 0.4); }
.bg-youtube-05 { background: rgba(255, 0, 0, 0.5); }
.bg-youtube-06 { background: rgba(255, 0, 0, 0.6); }
.bg-youtube-07 { background: rgba(255, 0, 0, 0.7); }
.bg-youtube-08 { background: rgba(255, 0, 0, 0.8); }
.bg-youtube-09 { background: rgba(255, 0, 0, 0.9); }
.bg-youtube-10 { background: rgba(255, 0, 0, 1.0); }

/* WhatsApp */
.bg-whatsapp { background: #25d366; }
.bg-whatsapp-01 { background: rgba(37, 211, 102, 0.1); }
.bg-whatsapp-02 { background: rgba(37, 211, 102, 0.2); }
.bg-whatsapp-03 { background: rgba(37, 211, 102, 0.3); }
.bg-whatsapp-04 { background: rgba(37, 211, 102, 0.4); }
.bg-whatsapp-05 { background: rgba(37, 211, 102, 0.5); }
.bg-whatsapp-06 { background: rgba(37, 211, 102, 0.6); }
.bg-whatsapp-07 { background: rgba(37, 211, 102, 0.7); }
.bg-whatsapp-08 { background: rgba(37, 211, 102, 0.8); }
.bg-whatsapp-09 { background: rgba(37, 211, 102, 0.9); }
.bg-whatsapp-10 { background: rgba(37, 211, 102, 1.0); }

/* Telegram */
.bg-telegram { background: #0088cc; }
.bg-telegram-01 { background: rgba(0, 136, 204, 0.1); }
.bg-telegram-02 { background: rgba(0, 136, 204, 0.2); }
.bg-telegram-03 { background: rgba(0, 136, 204, 0.3); }
.bg-telegram-04 { background: rgba(0, 136, 204, 0.4); }
.bg-telegram-05 { background: rgba(0, 136, 204, 0.5); }
.bg-telegram-06 { background: rgba(0, 136, 204, 0.6); }
.bg-telegram-07 { background: rgba(0, 136, 204, 0.7); }
.bg-telegram-08 { background: rgba(0, 136, 204, 0.8); }
.bg-telegram-09 { background: rgba(0, 136, 204, 0.9); }
.bg-telegram-10 { background: rgba(0, 136, 204, 1.0); }

/* Discord */
.bg-discord { background: #5865f2; }
.bg-discord-01 { background: rgba(88, 101, 242, 0.1); }
.bg-discord-02 { background: rgba(88, 101, 242, 0.2); }
.bg-discord-03 { background: rgba(88, 101, 242, 0.3); }
.bg-discord-04 { background: rgba(88, 101, 242, 0.4); }
.bg-discord-05 { background: rgba(88, 101, 242, 0.5); }
.bg-discord-06 { background: rgba(88, 101, 242, 0.6); }
.bg-discord-07 { background: rgba(88, 101, 242, 0.7); }
.bg-discord-08 { background: rgba(88, 101, 242, 0.8); }
.bg-discord-09 { background: rgba(88, 101, 242, 0.9); }
.bg-discord-10 { background: rgba(88, 101, 242, 1.0); }

/* Spotify */
.bg-spotify { background: #1db954; }
.bg-spotify-01 { background: rgba(29, 185, 84, 0.1); }
.bg-spotify-02 { background: rgba(29, 185, 84, 0.2); }
.bg-spotify-03 { background: rgba(29, 185, 84, 0.3); }
.bg-spotify-04 { background: rgba(29, 185, 84, 0.4); }
.bg-spotify-05 { background: rgba(29, 185, 84, 0.5); }
.bg-spotify-06 { background: rgba(29, 185, 84, 0.6); }
.bg-spotify-07 { background: rgba(29, 185, 84, 0.7); }
.bg-spotify-08 { background: rgba(29, 185, 84, 0.8); }
.bg-spotify-09 { background: rgba(29, 185, 84, 0.9); }
.bg-spotify-10 { background: rgba(29, 185, 84, 1.0); }

/* GitHub */
.bg-github { background: #333333; }
.bg-github-01 { background: rgba(51, 51, 51, 0.1); }
.bg-github-02 { background: rgba(51, 51, 51, 0.2); }
.bg-github-03 { background: rgba(51, 51, 51, 0.3); }
.bg-github-04 { background: rgba(51, 51, 51, 0.4); }
.bg-github-05 { background: rgba(51, 51, 51, 0.5); }
.bg-github-06 { background: rgba(51, 51, 51, 0.6); }
.bg-github-07 { background: rgba(51, 51, 51, 0.7); }
.bg-github-08 { background: rgba(51, 51, 51, 0.8); }
.bg-github-09 { background: rgba(51, 51, 51, 0.9); }
.bg-github-10 { background: rgba(51, 51, 51, 1.0); }

/* Pinterest */
.bg-pinterest { background: #e60023; }
.bg-pinterest-01 { background: rgba(230, 0, 35, 0.1); }
.bg-pinterest-02 { background: rgba(230, 0, 35, 0.2); }
.bg-pinterest-03 { background: rgba(230, 0, 35, 0.3); }
.bg-pinterest-04 { background: rgba(230, 0, 35, 0.4); }
.bg-pinterest-05 { background: rgba(230, 0, 35, 0.5); }
.bg-pinterest-06 { background: rgba(230, 0, 35, 0.6); }
.bg-pinterest-07 { background: rgba(230, 0, 35, 0.7); }
.bg-pinterest-08 { background: rgba(230, 0, 35, 0.8); }
.bg-pinterest-09 { background: rgba(230, 0, 35, 0.9); }
.bg-pinterest-10 { background: rgba(230, 0, 35, 1.0); }

/* Reddit */
.bg-reddit { background: #ff4500; }
.bg-reddit-01 { background: rgba(255, 69, 0, 0.1); }
.bg-reddit-02 { background: rgba(255, 69, 0, 0.2); }
.bg-reddit-03 { background: rgba(255, 69, 0, 0.3); }
.bg-reddit-04 { background: rgba(255, 69, 0, 0.4); }
.bg-reddit-05 { background: rgba(255, 69, 0, 0.5); }
.bg-reddit-06 { background: rgba(255, 69, 0, 0.6); }
.bg-reddit-07 { background: rgba(255, 69, 0, 0.7); }
.bg-reddit-08 { background: rgba(255, 69, 0, 0.8); }
.bg-reddit-09 { background: rgba(255, 69, 0, 0.9); }
.bg-reddit-10 { background: rgba(255, 69, 0, 1.0); }

/* Twitch */
.bg-twitch { background: #9146ff; }
.bg-twitch-01 { background: rgba(145, 70, 255, 0.1); }
.bg-twitch-02 { background: rgba(145, 70, 255, 0.2); }
.bg-twitch-03 { background: rgba(145, 70, 255, 0.3); }
.bg-twitch-04 { background: rgba(145, 70, 255, 0.4); }
.bg-twitch-05 { background: rgba(145, 70, 255, 0.5); }
.bg-twitch-06 { background: rgba(145, 70, 255, 0.6); }
.bg-twitch-07 { background: rgba(145, 70, 255, 0.7); }
.bg-twitch-08 { background: rgba(145, 70, 255, 0.8); }
.bg-twitch-09 { background: rgba(145, 70, 255, 0.9); }
.bg-twitch-10 { background: rgba(145, 70, 255, 1.0); }

/* Snapchat */
.bg-snapchat { background: #fffc00; }
.bg-snapchat-01 { background: rgba(255, 252, 0, 0.1); }
.bg-snapchat-02 { background: rgba(255, 252, 0, 0.2); }
.bg-snapchat-03 { background: rgba(255, 252, 0, 0.3); }
.bg-snapchat-04 { background: rgba(255, 252, 0, 0.4); }
.bg-snapchat-05 { background: rgba(255, 252, 0, 0.5); }
.bg-snapchat-06 { background: rgba(255, 252, 0, 0.6); }
.bg-snapchat-07 { background: rgba(255, 252, 0, 0.7); }
.bg-snapchat-08 { background: rgba(255, 252, 0, 0.8); }
.bg-snapchat-09 { background: rgba(255, 252, 0, 0.9); }
.bg-snapchat-10 { background: rgba(255, 252, 0, 1.0); }

/* TikTok */
.bg-tiktok { background: #000000; }
.bg-tiktok-01 { background: rgba(0, 0, 0, 0.1); }
.bg-tiktok-02 { background: rgba(0, 0, 0, 0.2); }
.bg-tiktok-03 { background: rgba(0, 0, 0, 0.3); }
.bg-tiktok-04 { background: rgba(0, 0, 0, 0.4); }
.bg-tiktok-05 { background: rgba(0, 0, 0, 0.5); }
.bg-tiktok-06 { background: rgba(0, 0, 0, 0.6); }
.bg-tiktok-07 { background: rgba(0, 0, 0, 0.7); }
.bg-tiktok-08 { background: rgba(0, 0, 0, 0.8); }
.bg-tiktok-09 { background: rgba(0, 0, 0, 0.9); }
.bg-tiktok-10 { background: rgba(0, 0, 0, 1.0); }

/* Stack Overflow */
.bg-stackoverflow { background: #f48024; }
.bg-stackoverflow-01 { background: rgba(244, 128, 36, 0.1); }
.bg-stackoverflow-02 { background: rgba(244, 128, 36, 0.2); }
.bg-stackoverflow-03 { background: rgba(244, 128, 36, 0.3); }
.bg-stackoverflow-04 { background: rgba(244, 128, 36, 0.4); }
.bg-stackoverflow-05 { background: rgba(244, 128, 36, 0.5); }
.bg-stackoverflow-06 { background: rgba(244, 128, 36, 0.6); }
.bg-stackoverflow-07 { background: rgba(244, 128, 36, 0.7); }
.bg-stackoverflow-08 { background: rgba(244, 128, 36, 0.8); }
.bg-stackoverflow-09 { background: rgba(244, 128, 36, 0.9); }
.bg-stackoverflow-10 { background: rgba(244, 128, 36, 1.0); }

/* Tumblr */
.bg-tumblr { background: #35465c; }
.bg-tumblr-01 { background: rgba(53, 70, 92, 0.1); }
.bg-tumblr-02 { background: rgba(53, 70, 92, 0.2); }
.bg-tumblr-03 { background: rgba(53, 70, 92, 0.3); }
.bg-tumblr-04 { background: rgba(53, 70, 92, 0.4); }
.bg-tumblr-05 { background: rgba(53, 70, 92, 0.5); }
.bg-tumblr-06 { background: rgba(53, 70, 92, 0.6); }
.bg-tumblr-07 { background: rgba(53, 70, 92, 0.7); }
.bg-tumblr-08 { background: rgba(53, 70, 92, 0.8); }
.bg-tumblr-09 { background: rgba(53, 70, 92, 0.9); }
.bg-tumblr-10 { background: rgba(53, 70, 92, 1.0); }

/* Flickr */
.bg-flickr { background: #ff0084; }
.bg-flickr-01 { background: rgba(255, 0, 132, 0.1); }
.bg-flickr-02 { background: rgba(255, 0, 132, 0.2); }
.bg-flickr-03 { background: rgba(255, 0, 132, 0.3); }
.bg-flickr-04 { background: rgba(255, 0, 132, 0.4); }
.bg-flickr-05 { background: rgba(255, 0, 132, 0.5); }
.bg-flickr-06 { background: rgba(255, 0, 132, 0.6); }
.bg-flickr-07 { background: rgba(255, 0, 132, 0.7); }
.bg-flickr-08 { background: rgba(255, 0, 132, 0.8); }
.bg-flickr-09 { background: rgba(255, 0, 132, 0.9); }
.bg-flickr-10 { background: rgba(255, 0, 132, 1.0); }

/* Vimeo */
.bg-vimeo { background: #1ab7ea; }
.bg-vimeo-01 { background: rgba(26, 183, 234, 0.1); }
.bg-vimeo-02 { background: rgba(26, 183, 234, 0.2); }
.bg-vimeo-03 { background: rgba(26, 183, 234, 0.3); }
.bg-vimeo-04 { background: rgba(26, 183, 234, 0.4); }
.bg-vimeo-05 { background: rgba(26, 183, 234, 0.5); }
.bg-vimeo-06 { background: rgba(26, 183, 234, 0.6); }
.bg-vimeo-07 { background: rgba(26, 183, 234, 0.7); }
.bg-vimeo-08 { background: rgba(26, 183, 234, 0.8); }
.bg-vimeo-09 { background: rgba(26, 183, 234, 0.9); }
.bg-vimeo-10 { background: rgba(26, 183, 234, 1.0); }

/* Dribbble */
.bg-dribbble { background: #ea4c89; }
.bg-dribbble-01 { background: rgba(234, 76, 137, 0.1); }
.bg-dribbble-02 { background: rgba(234, 76, 137, 0.2); }
.bg-dribbble-03 { background: rgba(234, 76, 137, 0.3); }
.bg-dribbble-04 { background: rgba(234, 76, 137, 0.4); }
.bg-dribbble-05 { background: rgba(234, 76, 137, 0.5); }
.bg-dribbble-06 { background: rgba(234, 76, 137, 0.6); }
.bg-dribbble-07 { background: rgba(234, 76, 137, 0.7); }
.bg-dribbble-08 { background: rgba(234, 76, 137, 0.8); }
.bg-dribbble-09 { background: rgba(234, 76, 137, 0.9); }
.bg-dribbble-10 { background: rgba(234, 76, 137, 1.0); }

/* Behance */
.bg-behance { background: #1769ff; }
.bg-behance-01 { background: rgba(23, 105, 255, 0.1); }
.bg-behance-02 { background: rgba(23, 105, 255, 0.2); }
.bg-behance-03 { background: rgba(23, 105, 255, 0.3); }
.bg-behance-04 { background: rgba(23, 105, 255, 0.4); }
.bg-behance-05 { background: rgba(23, 105, 255, 0.5); }
.bg-behance-06 { background: rgba(23, 105, 255, 0.6); }
.bg-behance-07 { background: rgba(23, 105, 255, 0.7); }
.bg-behance-08 { background: rgba(23, 105, 255, 0.8); }
.bg-behance-09 { background: rgba(23, 105, 255, 0.9); }
.bg-behance-10 { background: rgba(23, 105, 255, 1.0); }

/* Medium */
.bg-medium { background: #00ab6c; }
.bg-medium-01 { background: rgba(0, 171, 108, 0.1); }
.bg-medium-02 { background: rgba(0, 171, 108, 0.2); }
.bg-medium-03 { background: rgba(0, 171, 108, 0.3); }
.bg-medium-04 { background: rgba(0, 171, 108, 0.4); }
.bg-medium-05 { background: rgba(0, 171, 108, 0.5); }
.bg-medium-06 { background: rgba(0, 171, 108, 0.6); }
.bg-medium-07 { background: rgba(0, 171, 108, 0.7); }
.bg-medium-08 { background: rgba(0, 171, 108, 0.8); }
.bg-medium-09 { background: rgba(0, 171, 108, 0.9); }
.bg-medium-10 { background: rgba(0, 171, 108, 1.0); }

/* Quora */
.bg-quora { background: #aa2200; }
.bg-quora-01 { background: rgba(170, 34, 0, 0.1); }
.bg-quora-02 { background: rgba(170, 34, 0, 0.2); }
.bg-quora-03 { background: rgba(170, 34, 0, 0.3); }
.bg-quora-04 { background: rgba(170, 34, 0, 0.4); }
.bg-quora-05 { background: rgba(170, 34, 0, 0.5); }
.bg-quora-06 { background: rgba(170, 34, 0, 0.6); }
.bg-quora-07 { background: rgba(170, 34, 0, 0.7); }
.bg-quora-08 { background: rgba(170, 34, 0, 0.8); }
.bg-quora-09 { background: rgba(170, 34, 0, 0.9); }
.bg-quora-10 { background: rgba(170, 34, 0, 1.0); }

/* Slack */
.bg-slack { background: #4a154b; }
.bg-slack-01 { background: rgba(74, 21, 75, 0.1); }
.bg-slack-02 { background: rgba(74, 21, 75, 0.2); }
.bg-slack-03 { background: rgba(74, 21, 75, 0.3); }
.bg-slack-04 { background: rgba(74, 21, 75, 0.4); }
.bg-slack-05 { background: rgba(74, 21, 75, 0.5); }
.bg-slack-06 { background: rgba(74, 21, 75, 0.6); }
.bg-slack-07 { background: rgba(74, 21, 75, 0.7); }
.bg-slack-08 { background: rgba(74, 21, 75, 0.8); }
.bg-slack-09 { background: rgba(74, 21, 75, 0.9); }
.bg-slack-10 { background: rgba(74, 21, 75, 1.0); }

/* SoundCloud */
.bg-soundcloud { background: #ff3300; }
.bg-soundcloud-01 { background: rgba(255, 51, 0, 0.1); }
.bg-soundcloud-02 { background: rgba(255, 51, 0, 0.2); }
.bg-soundcloud-03 { background: rgba(255, 51, 0, 0.3); }
.bg-soundcloud-04 { background: rgba(255, 51, 0, 0.4); }
.bg-soundcloud-05 { background: rgba(255, 51, 0, 0.5); }
.bg-soundcloud-06 { background: rgba(255, 51, 0, 0.6); }
.bg-soundcloud-07 { background: rgba(255, 51, 0, 0.7); }
.bg-soundcloud-08 { background: rgba(255, 51, 0, 0.8); }
.bg-soundcloud-09 { background: rgba(255, 51, 0, 0.9); }
.bg-soundcloud-10 { background: rgba(255, 51, 0, 1.0); }

/* Periscope */
.bg-periscope { background: #40a4c4; }
.bg-periscope-01 { background: rgba(64, 164, 196, 0.1); }
.bg-periscope-02 { background: rgba(64, 164, 196, 0.2); }
.bg-periscope-03 { background: rgba(64, 164, 196, 0.3); }
.bg-periscope-04 { background: rgba(64, 164, 196, 0.4); }
.bg-periscope-05 { background: rgba(64, 164, 196, 0.5); }
.bg-periscope-06 { background: rgba(64, 164, 196, 0.6); }
.bg-periscope-07 { background: rgba(64, 164, 196, 0.7); }
.bg-periscope-08 { background: rgba(64, 164, 196, 0.8); }
.bg-periscope-09 { background: rgba(64, 164, 196, 0.9); }
.bg-periscope-10 { background: rgba(64, 164, 196, 1.0); }

/* Messenger */
.bg-messenger { background: #00b2ff; }
.bg-messenger-01 { background: rgba(0, 178, 255, 0.1); }
.bg-messenger-02 { background: rgba(0, 178, 255, 0.2); }
.bg-messenger-03 { background: rgba(0, 178, 255, 0.3); }
.bg-messenger-04 { background: rgba(0, 178, 255, 0.4); }
.bg-messenger-05 { background: rgba(0, 178, 255, 0.5); }
.bg-messenger-06 { background: rgba(0, 178, 255, 0.6); }
.bg-messenger-07 { background: rgba(0, 178, 255, 0.7); }
.bg-messenger-08 { background: rgba(0, 178, 255, 0.8); }
.bg-messenger-09 { background: rgba(0, 178, 255, 0.9); }
.bg-messenger-10 { background: rgba(0, 178, 255, 1.0); }

/* WeChat */
.bg-wechat { background: #07c160; }
.bg-wechat-01 { background: rgba(7, 193, 96, 0.1); }
.bg-wechat-02 { background: rgba(7, 193, 96, 0.2); }
.bg-wechat-03 { background: rgba(7, 193, 96, 0.3); }
.bg-wechat-04 { background: rgba(7, 193, 96, 0.4); }
.bg-wechat-05 { background: rgba(7, 193, 96, 0.5); }
.bg-wechat-06 { background: rgba(7, 193, 96, 0.6); }
.bg-wechat-07 { background: rgba(7, 193, 96, 0.7); }
.bg-wechat-08 { background: rgba(7, 193, 96, 0.8); }
.bg-wechat-09 { background: rgba(7, 193, 96, 0.9); }
.bg-wechat-10 { background: rgba(7, 193, 96, 1.0); }

/* Line */
.bg-line { background: #00c300; }
.bg-line-01 { background: rgba(0, 195, 0, 0.1); }
.bg-line-02 { background: rgba(0, 195, 0, 0.2); }
.bg-line-03 { background: rgba(0, 195, 0, 0.3); }
.bg-line-04 { background: rgba(0, 195, 0, 0.4); }
.bg-line-05 { background: rgba(0, 195, 0, 0.5); }
.bg-line-06 { background: rgba(0, 195, 0, 0.6); }
.bg-line-07 { background: rgba(0, 195, 0, 0.7); }
.bg-line-08 { background: rgba(0, 195, 0, 0.8); }
.bg-line-09 { background: rgba(0, 195, 0, 0.9); }
.bg-line-10 { background: rgba(0, 195, 0, 1.0); }
/* UI/UX colors */
.bg-success, .bg-success-color { background: #28a745; }
.bg-danger, .bg-danger-color { background: #dc3545; }
.bg-warning, .bg-warning-color { background: #ffc107; }
.bg-info, .bg-info-color { background: #17a2b8; }
.bg-dark, .bg-dark-color { background: #343a40; }
.bg-light-gray, .bg-light-gray-color { background: #f8f9fa; }

/* Modern colors */
.bg-amber, .bg-amber-color { background: #ffc107; }
.bg-cyan-light, .bg-cyan-light-color { background: #e0f7fa; }
.bg-indigo-light, .bg-indigo-light-color { background: #e8eaf6; }
.bg-deep-purple, .bg-deep-purple-color { background: #673ab7; }
.bg-pink-light, .bg-pink-light-color { background: #fce4ec; }
.bg-blue-grey, .bg-blue-grey-color { background: #607d8b; }

/* gradient backgrounds */
.bg-gradient-primary, .bg-gradient-primary-bg { 
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)); 
}
.bg-gradient-secondary, .bg-gradient-secondary-bg { 
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark)); 
}
.bg-gradient-dark, .bg-gradient-dark-bg { 
    background: linear-gradient(135deg, #2d2d2d, #1a1a1a); 
}
.bg-gradient-light, .bg-gradient-light-bg { 
    background: linear-gradient(135deg, #ffffff, #f0f0f0); 
}
.bg-gradient-sunset, .bg-gradient-sunset-bg { 
    background: linear-gradient(135deg, #f7971e, #ffd200); 
}
.bg-gradient-ocean, .bg-gradient-ocean-bg { 
    background: linear-gradient(135deg, #2b5876, #4e4376); 
}
.bg-gradient-forest, .bg-gradient-forest-bg { 
    background: linear-gradient(135deg, #134e5e, #71b280); 
}
.bg-gradient-rose, .bg-gradient-rose-bg { 
    background: linear-gradient(135deg, #f093fb, #f5576c); 
}
.bg-gradient-cool, .bg-gradient-cool-bg { 
    background: linear-gradient(135deg, #2193b0, #6dd5ed); 
}
.bg-gradient-warm, .bg-gradient-warm-bg { 
    background: linear-gradient(135deg, #f2994a, #f2c94c); 
}
.bg-rgt-001{
    background:var(--rgt-001);
}
.bg-rgt-002{
    background:var(--rgt-002);
}
.bg-rgt-003{
    background:var(--rgt-003);
}
.bg-rgt-004{
    background:var(--rgt-004);
}
.bg-rgt-005{
    background:var(--rgt-005);
}
.bg-rgt-006{
    background:var(--rgt-006);
}
.bg-rgt-007{
    background:var(--rgt-007);
}
.bg-rgt-08{
    background:var(--rgt-008);
}
.bg-rgt-009{
    background:var(--rgt-009);
}

.bg-rgt-01{
    background:var(--rgt-01);
}
.bg-rgt-02{
    background:var(--rgt-02);
}
.bg-rgt-03{
    background:var(--rgt-03);
}
.bg-rgt-04{
    background:var(--rgt-04);
}
.bg-rgt-05{
    background:var(--rgt-05);
}
.bg-rgt-06{
    background:var(--rgt-06);
}
.bg-rgt-07{
    background:var(--rgt-07);
}
.bg-rgt-08{
    background:var(--rgt-08);
}
.bg-rgt-09{
    background:var(--rgt-09);
}
.bg-rgt-10{
    background:var(--rgt-10);
}
.bg-rgb-001{
    background:var(--rgt-001);
}
.bg-rgb-002{
    background:var(--rgt-002);
}
.bg-rgb-003{
    background:var(--rgt-003);
}
.bg-rgb-004{
    background:var(--rgt-004);
}
.bg-rgb-005{
    background:var(--rgt-005);
}
.bg-rgb-006{
    background:var(--rgt-006);
}
.bg-rgb-007{
    background:var(--rgt-007);
}
.bg-rgb-08{
    background:var(--rgt-008);
}
.bg-rgb-009{
    background:var(--rgt-09);
}

.bg-rgb-01{
    background:var(--rgt-01);
}
.bg-rgb-02{
    background:var(--rgt-02);
}
.bg-rgb-03{
    background:var(--rgt-03);
}
.bg-rgb-04{
    background:var(--rgt-04);
}
.bg-rgb-05{
    background:var(--rgt-05);
}
.bg-rgb-06{
    background:var(--rgt-06);
}
.bg-rgb-07{
    background:var(--rgt-07);
}
.bg-rgb-08{
    background:var(--rgt-08);
}
.bg-rgb-09{
    background:var(--rgt-09);
}
.bg-rgb-10{
    background:var(--rgt-10);
}
.bg-primary-001{
    background:var(--primary-001);
}
.bg-primary-002{
    background:var(--primary-002);
}
.bg-primary-003{
    background:var(--primary-003);
}
.bg-primary-004{
    background:var(--primary-004);
}
.bg-primary-005{
    background:var(--primary-005);
}
.bg-primary-006{
    background:var(--primary-006);
}
.bg-primary-007{
    background:var(--primary-007);
}
.bg-primary-008{
    background:var(--primary-008);
}
.bg-primary-009{
    background:var(--primary-009);
}

.bg-primary-01{
    background:var(--primary-01);
}
.bg-primary-02{
    background:var(--primary-02);
}
.bg-primary-03{
    background:var(--primary-03);
}
.bg-primary-04{
    background:var(--primary-04);
}
.bg-primary-05{
    background:var(--primary-05);
}
.bg-primary-06{
    background:var(--primary-06);
}
.bg-primary-07{
    background:var(--primary-07);
}
.bg-primary-08{
    background:var(--primary-08);
}
.bg-primary-09{
    background:var(--primary-09);
}
.bg-primary-10{
    background:var(--primary-10);
}
/* text */
.text-white, .c-white, .text-white-color { color: white !important; }
.text-black, .c-black, .text-black-color { color: black !important; }

.select-none { user-select: none; }

.c-inherit, .text-inherit { color: inherit !important; }

.c-primary, .text-primary { color: var(--primary) !important; }
.c-primary-light, .text-primary-light { color: var(--primary-light); }
.c-primary-dark, .text-primary-dark { color: var(--primary-dark); }
.c-primary-lighter, .text-primary-lighter { color: var(--primary-lighter); }
.c-primary-darker, .text-primary-darker { color: var(--primary-darker); }

.c-secondary, .text-secondary { color: var(--secondary); }
.secondary-text, .text-secondary-text { color: var(--secondary-text) !important; }
.primary-text, .text-primary-text { color: var(--primary-text); }

.c-transparent, .text-transparent { color: transparent !important; }

.text-light { font-weight: 100 !important; }
.text-u { text-decoration: underline; }

.text-average, .text-avg { font-size: 0.6rem; }
.text-small, .text-sm { font-size: 0.5rem; }

.text-dim, .c-dim { color: #708090; }

/* ===== ADDITIONAL TEXT COLORS ===== */

/* Whites & Grays */
.text-gray, .c-gray { color: gray; }
.text-darkgray, .c-darkgray { color: darkgray; }
.text-dimgray, .c-dimgray { color: dimgray; }
.text-lightgray, .c-lightgray { color: lightgray; }
.text-slategray, .c-slategray { color: slategray; }
.text-lightslategray, .c-lightslategray { color: lightslategray; }
.text-gainsboro, .c-gainsboro { color: gainsboro; }
.text-whitesmoke, .c-whitesmoke { color: whitesmoke; }
.text-silver, .c-silver { color: silver; }

/* Reds & Pinks */
.text-red, .c-red { color: red; }
.text-crimson, .c-crimson { color: crimson; }
.text-darkred, .c-darkred { color: darkred; }
.text-firebrick, .c-firebrick { color: firebrick; }
.text-indianred, .c-indianred { color: indianred; }
.text-lightcoral, .c-lightcoral { color: lightcoral; }
.text-lightpink, .c-lightpink { color: lightpink; }
.text-pink, .c-pink { color: pink; }
.text-rose, .c-rose { color: #ff007f; }
.text-tomato, .c-tomato { color: tomato; }
.text-salmon, .c-salmon { color: salmon; }

/* Blues */
.text-blue, .c-blue { color: blue; }
.text-darkblue, .c-darkblue { color: darkblue; }
.text-dodgerblue, .c-dodgerblue { color: dodgerblue; }
.text-lightblue, .c-lightblue { color: lightblue; }
.text-lightskyblue, .c-lightskyblue { color: lightskyblue; }
.text-mediumblue, .c-mediumblue { color: mediumblue; }
.text-midnightblue, .c-midnightblue { color: midnightblue; }
.text-royalblue, .c-royalblue { color: royalblue; }
.text-skyblue, .c-skyblue { color: skyblue; }
.text-steelblue, .c-steelblue { color: steelblue; }
.text-turquoise, .c-turquoise { color: turquoise; }
.text-cyan, .c-cyan { color: cyan; }
.text-lightcyan, .c-lightcyan { color: lightcyan; }
.text-navy, .c-navy { color: navy; }

/* Greens */
.text-green, .c-green { color: green; }
.text-darkgreen, .c-darkgreen { color: darkgreen; }
.text-darkolivegreen, .c-darkolivegreen { color: darkolivegreen; }
.text-forestgreen, .c-forestgreen { color: forestgreen; }
.text-greenyellow, .c-greenyellow { color: greenyellow; }
.text-lime, .c-lime { color: lime; }
.text-limegreen, .c-limegreen { color: limegreen; }
.text-lightgreen, .c-lightgreen { color: lightgreen; }
.text-mediumseagreen, .c-mediumseagreen { color: mediumseagreen; }
.text-olivedrab, .c-olivedrab { color: olivedrab; }
.text-palegreen, .c-palegreen { color: palegreen; }
.text-seagreen, .c-seagreen { color: seagreen; }
.text-springgreen, .c-springgreen { color: springgreen; }
.text-yellowgreen, .c-yellowgreen { color: yellowgreen; }
.text-teal, .c-teal { color: teal; }
.text-darkcyan, .c-darkcyan { color: darkcyan; }

/* Yellows & Oranges */
.text-gold, .c-gold { color: #ffd700; }
.text-goldenrod, .c-goldenrod { color: goldenrod; }
.text-darkgoldenrod, .c-darkgoldenrod { color: darkgoldenrod; }
.text-lightgoldenrodyellow, .c-lightgoldenrodyellow { color: lightgoldenrodyellow; }
.text-lemonchiffon, .c-lemonchiffon { color: lemonchiffon; }
.text-palegoldenrod, .c-palegoldenrod { color: palegoldenrod; }
.text-yellow, .c-yellow { color: yellow; }
.text-lightyellow, .c-lightyellow { color: lightyellow; }
.text-orange, .c-orange { color: orange; }
.text-darkorange, .c-darkorange { color: darkorange; }
.text-coral, .c-coral { color: coral; }
.text-peachpuff, .c-peachpuff { color: peachpuff; }

/* Purples & Violets */
.text-purple, .c-purple { color: rgb(108, 92, 230); }
.text-darkmagenta, .c-darkmagenta { color: darkmagenta; }
.text-darkorchid, .c-darkorchid { color: darkorchid; }
.text-darkviolet, .c-darkviolet { color: darkviolet; }
.text-fuchsia, .c-fuchsia { color: fuchsia; }
.text-indigo, .c-indigo { color: indigo; }
.text-lavender, .c-lavender { color: lavender; }
.text-lavenderblush, .c-lavenderblush { color: lavenderblush; }
.text-mediumorchid, .c-mediumorchid { color: mediumorchid; }
.text-mediumpurple, .c-mediumpurple { color: mediumpurple; }
.text-magenta, .c-magenta { color: magenta; }
.text-plum, .c-plum { color: plum; }
.text-thistle, .c-thistle { color: thistle; }
.text-violet, .c-violet { color: violet; }
.text-blueviolet, .c-blueviolet { color: blueviolet; }
.text-mediumslateblue, .c-mediumslateblue { color: mediumslateblue; }
.text-slateblue, .c-slateblue { color: slateblue; }

/* Browns & Beiges */
.text-beige, .c-beige { color: beige; }
.text-bisque, .c-bisque { color: bisque; }
.text-blanchedalmond, .c-blanchedalmond { color: blanchedalmond; }
.text-brown, .c-brown { color: brown; }
.text-burlywood, .c-burlywood { color: burlywood; }
.text-chocolate, .c-chocolate { color: chocolate; }
.text-cornsilk, .c-cornsilk { color: cornsilk; }
.text-darkkhaki, .c-darkkhaki { color: darkkhaki; }
.text-honeydew, .c-honeydew { color: honeydew; }
.text-ivory, .c-ivory { color: ivory; }
.text-khaki, .c-khaki { color: khaki; }
.text-moccasin, .c-moccasin { color: moccasin; }
.text-navajowhite, .c-navajowhite { color: navajowhite; }
.text-oldlace, .c-oldlace { color: oldlace; }
.text-peru, .c-peru { color: peru; }
.text-sandybrown, .c-sandybrown { color: sandybrown; }
.text-sienna, .c-sienna { color: sienna; }
.text-tan, .c-tan { color: tan; }
.text-wheat, .c-wheat { color: wheat; }

/* UI/UX Colors */
.text-success, .c-success { color: #28a745; }
.text-danger, .c-danger { color: #dc3545; }
.text-warning, .c-warning { color: #ffc107; }
.text-info, .c-info { color: #17a2b8; }
.text-dark, .c-dark { color: #343a40; }

/* ===== SOCIAL MEDIA TEXT COLORS ===== */
.text-facebook, .c-facebook { color: #1877f2; }
.text-twitter, .c-twitter { color: #000000; }
.text-instagram, .c-instagram { color: #e4405f; }
.text-linkedin, .c-linkedin { color: #0a66c2; }
.text-youtube, .c-youtube { color: #ff0000; }
.text-whatsapp, .c-whatsapp { color: #25d366; }
.text-telegram, .c-telegram { color: #0088cc; }
.text-github, .c-github { color: #333333; }
.text-stackoverflow, .c-stackoverflow { color: #f48024; }
.text-tiktok, .c-tiktok { color: #000000; }
.text-snapchat, .c-snapchat { color: #fffc00; }
.text-pinterest, .c-pinterest { color: #e60023; }
.text-discord, .c-discord { color: #5865f2; }
.text-reddit, .c-reddit { color: #ff4500; }
.text-tumblr, .c-tumblr { color: #35465c; }
.text-flickr, .c-flickr { color: #ff0084; }
.text-vimeo, .c-vimeo { color: #1ab7ea; }
.text-dribbble, .c-dribbble { color: #ea4c89; }
.text-behance, .c-behance { color: #1769ff; }
.text-medium, .c-medium { color: #00ab6c; }
.text-quora, .c-quora { color: #aa2200; }
.text-slack, .c-slack { color: #4a154b; }
.text-spotify, .c-spotify { color: #1db954; }
.text-soundcloud, .c-soundcloud { color: #ff3300; }
.text-twitch, .c-twitch { color: #9146ff; }
.text-periscope, .c-periscope { color: #40a4c4; }
.text-messenger, .c-messenger { color: #00b2ff; }
.text-wechat, .c-wechat { color: #07c160; }
.text-line, .c-line { color: #00c300; }
.text-snapchat, .c-snapchat { color: #fffc00; }
.text-tiktok, .c-tiktok { color: #010101; }
.text-instagram-gradient { 
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* ===== TEXT COLORS (.c- & .text-) ===== */

/* Primary & Variants */
.c-primary, .text-primary { color: var(--primary); }
.c-primary-light, .text-primary-light { color: var(--primary-light); }
.c-primary-dark, .text-primary-dark { color: var(--primary-dark); }
.c-primary-lighter, .text-primary-lighter { color: var(--primary-lighter); }
.c-primary-darker, .text-primary-darker { color: var(--primary-darker); }
.c-primary-001, .text-primary-001 { color: var(--primary-001); }
.c-primary-002, .text-primary-002 { color: var(--primary-002); }
.c-primary-003, .text-primary-003 { color: var(--primary-003); }
.c-primary-004, .text-primary-004 { color: var(--primary-004); }
.c-primary-005, .text-primary-005 { color: var(--primary-005); }
.c-primary-006, .text-primary-006 { color: var(--primary-006); }
.c-primary-007, .text-primary-007 { color: var(--primary-007); }
.c-primary-008, .text-primary-008 { color: var(--primary-008); }
.c-primary-009, .text-primary-009 { color: var(--primary-009); }
.c-primary-01, .text-primary-01 { color: var(--primary-01); }
.c-primary-02, .text-primary-02 { color: var(--primary-02); }
.c-primary-03, .text-primary-03 { color: var(--primary-03); }
.c-primary-04, .text-primary-04 { color: var(--primary-04); }
.c-primary-05, .text-primary-05 { color: var(--primary-05); }
.c-primary-06, .text-primary-06 { color: var(--primary-06); }
.c-primary-07, .text-primary-07 { color: var(--primary-07); }
.c-primary-08, .text-primary-08 { color: var(--primary-08); }
.c-primary-09, .text-primary-09 { color: var(--primary-09); }
.c-primary-10, .text-primary-10 { color: var(--primary-10); }

/* Secondary & Variants */
.c-secondary, .text-secondary { color: var(--secondary); }
.c-secondary-light, .text-secondary-light { color: var(--secondary-light); }
.c-secondary-dark, .text-secondary-dark { color: var(--secondary-dark); }
.c-secondary-lighter, .text-secondary-lighter { color: var(--secondary-lighter); }
.c-secondary-darker, .text-secondary-darker { color: var(--secondary-darker); }
.c-secondary-001, .text-secondary-001 { color: var(--secondary-001); }
.c-secondary-002, .text-secondary-002 { color: var(--secondary-002); }
.c-secondary-003, .text-secondary-003 { color: var(--secondary-003); }
.c-secondary-004, .text-secondary-004 { color: var(--secondary-004); }
.c-secondary-005, .text-secondary-005 { color: var(--secondary-005); }
.c-secondary-006, .text-secondary-006 { color: var(--secondary-006); }
.c-secondary-007, .text-secondary-007 { color: var(--secondary-007); }
.c-secondary-008, .text-secondary-008 { color: var(--secondary-008); }
.c-secondary-009, .text-secondary-009 { color: var(--secondary-009); }
.c-secondary-01, .text-secondary-01 { color: var(--secondary-01); }
.c-secondary-02, .text-secondary-02 { color: var(--secondary-02); }
.c-secondary-03, .text-secondary-03 { color: var(--secondary-03); }
.c-secondary-04, .text-secondary-04 { color: var(--secondary-04); }
.c-secondary-05, .text-secondary-05 { color: var(--secondary-05); }
.c-secondary-06, .text-secondary-06 { color: var(--secondary-06); }
.c-secondary-07, .text-secondary-07 { color: var(--secondary-07); }
.c-secondary-08, .text-secondary-08 { color: var(--secondary-08); }
.c-secondary-09, .text-secondary-09 { color: var(--secondary-09); }
.c-secondary-10, .text-secondary-10 { color: var(--secondary-10); }

/* RGT & Variants */
.c-rgt, .text-rgt { color: rgb(var(--rgt)); }
.c-rgt-001, .text-rgt-001 { color: rgba(var(--rgt), 0.01); }
.c-rgt-002, .text-rgt-002 { color: rgba(var(--rgt), 0.02); }
.c-rgt-003, .text-rgt-003 { color: rgba(var(--rgt), 0.03); }
.c-rgt-004, .text-rgt-004 { color: rgba(var(--rgt), 0.04); }
.c-rgt-005, .text-rgt-005 { color: rgba(var(--rgt), 0.05); }
.c-rgt-006, .text-rgt-006 { color: rgba(var(--rgt), 0.06); }
.c-rgt-007, .text-rgt-007 { color: rgba(var(--rgt), 0.07); }
.c-rgt-008, .text-rgt-008 { color: rgba(var(--rgt), 0.08); }
.c-rgt-009, .text-rgt-009 { color: rgba(var(--rgt), 0.09); }
.c-rgt-01, .text-rgt-01 { color: rgba(var(--rgt), 0.1); }
.c-rgt-02, .text-rgt-02 { color: rgba(var(--rgt), 0.2); }
.c-rgt-03, .text-rgt-03 { color: rgba(var(--rgt), 0.3); }
.c-rgt-04, .text-rgt-04 { color: rgba(var(--rgt), 0.4); }
.c-rgt-05, .text-rgt-05 { color: rgba(var(--rgt), 0.5); }
.c-rgt-06, .text-rgt-06 { color: rgba(var(--rgt), 0.6); }
.c-rgt-07, .text-rgt-07 { color: rgba(var(--rgt), 0.7); }
.c-rgt-08, .text-rgt-08 { color: rgba(var(--rgt), 0.8); }
.c-rgt-09, .text-rgt-09 { color: rgba(var(--rgt), 0.9); }
.c-rgt-10, .text-rgt-10 { color: rgb(var(--rgt)); }

/* RGB & Variants */
.c-rgb, .text-rgb { color: rgb(var(--rgb)); }
.c-rgb-001, .text-rgb-001 { color: rgba(var(--rgb), 0.01); }
.c-rgb-002, .text-rgb-002 { color: rgba(var(--rgb), 0.02); }
.c-rgb-003, .text-rgb-003 { color: rgba(var(--rgb), 0.03); }
.c-rgb-004, .text-rgb-004 { color: rgba(var(--rgb), 0.04); }
.c-rgb-005, .text-rgb-005 { color: rgba(var(--rgb), 0.05); }
.c-rgb-006, .text-rgb-006 { color: rgba(var(--rgb), 0.06); }
.c-rgb-007, .text-rgb-007 { color: rgba(var(--rgb), 0.07); }
.c-rgb-008, .text-rgb-008 { color: rgba(var(--rgb), 0.08); }
.c-rgb-009, .text-rgb-009 { color: rgba(var(--rgb), 0.09); }
.c-rgb-01, .text-rgb-01 { color: rgba(var(--rgb), 0.1); }
.c-rgb-02, .text-rgb-02 { color: rgba(var(--rgb), 0.2); }
.c-rgb-03, .text-rgb-03 { color: rgba(var(--rgb), 0.3); }
.c-rgb-04, .text-rgb-04 { color: rgba(var(--rgb), 0.4); }
.c-rgb-05, .text-rgb-05 { color: rgba(var(--rgb), 0.5); }
.c-rgb-06, .text-rgb-06 { color: rgba(var(--rgb), 0.6); }
.c-rgb-07, .text-rgb-07 { color: rgba(var(--rgb), 0.7); }
.c-rgb-08, .text-rgb-08 { color: rgba(var(--rgb), 0.8); }
.c-rgb-09, .text-rgb-09 { color: rgba(var(--rgb), 0.9); }
.c-rgb-10, .text-rgb-10 { color: rgb(var(--rgb)); }

/* ===== SOCIAL MEDIA TEXT COLORS ===== */
/* Facebook */
.c-facebook, .text-facebook, .c-facebook-text, .text-facebook-text { color: #1877f2; }
.c-facebook-light, .text-facebook-light, .c-facebook-text-light, .text-facebook-text-light { color: #ffffff; }
.c-facebook-01, .text-facebook-01, .c-facebook-text-01, .text-facebook-text-01 { color: rgba(24, 119, 242, 0.1); }
.c-facebook-02, .text-facebook-02, .c-facebook-text-02, .text-facebook-text-02 { color: rgba(24, 119, 242, 0.2); }
.c-facebook-03, .text-facebook-03, .c-facebook-text-03, .text-facebook-text-03 { color: rgba(24, 119, 242, 0.3); }
.c-facebook-04, .text-facebook-04, .c-facebook-text-04, .text-facebook-text-04 { color: rgba(24, 119, 242, 0.4); }
.c-facebook-05, .text-facebook-05, .c-facebook-text-05, .text-facebook-text-05 { color: rgba(24, 119, 242, 0.5); }
.c-facebook-06, .text-facebook-06, .c-facebook-text-06, .text-facebook-text-06 { color: rgba(24, 119, 242, 0.6); }
.c-facebook-07, .text-facebook-07, .c-facebook-text-07, .text-facebook-text-07 { color: rgba(24, 119, 242, 0.7); }
.c-facebook-08, .text-facebook-08, .c-facebook-text-08, .text-facebook-text-08 { color: rgba(24, 119, 242, 0.8); }
.c-facebook-09, .text-facebook-09, .c-facebook-text-09, .text-facebook-text-09 { color: rgba(24, 119, 242, 0.9); }
.c-facebook-10, .text-facebook-10, .c-facebook-text-10, .text-facebook-text-10 { color: rgba(24, 119, 242, 1.0); }

/* Twitter */
.c-twitter, .text-twitter, .c-twitter-text, .text-twitter-text { color: #000000; }
.c-twitter-light, .text-twitter-light, .c-twitter-text-light, .text-twitter-text-light { color: #ffffff; }
.c-twitter-dark, .text-twitter-dark, .c-twitter-text-dark, .text-twitter-text-dark { color: #ffffff; }
.c-twitter-01, .text-twitter-01, .c-twitter-text-01, .text-twitter-text-01 { color: rgba(0, 0, 0, 0.1); }
.c-twitter-02, .text-twitter-02, .c-twitter-text-02, .text-twitter-text-02 { color: rgba(0, 0, 0, 0.2); }
.c-twitter-03, .text-twitter-03, .c-twitter-text-03, .text-twitter-text-03 { color: rgba(0, 0, 0, 0.3); }
.c-twitter-04, .text-twitter-04, .c-twitter-text-04, .text-twitter-text-04 { color: rgba(0, 0, 0, 0.4); }
.c-twitter-05, .text-twitter-05, .c-twitter-text-05, .text-twitter-text-05 { color: rgba(0, 0, 0, 0.5); }
.c-twitter-06, .text-twitter-06, .c-twitter-text-06, .text-twitter-text-06 { color: rgba(0, 0, 0, 0.6); }
.c-twitter-07, .text-twitter-07, .c-twitter-text-07, .text-twitter-text-07 { color: rgba(0, 0, 0, 0.7); }
.c-twitter-08, .text-twitter-08, .c-twitter-text-08, .text-twitter-text-08 { color: rgba(0, 0, 0, 0.8); }
.c-twitter-09, .text-twitter-09, .c-twitter-text-09, .text-twitter-text-09 { color: rgba(0, 0, 0, 0.9); }
.c-twitter-10, .text-twitter-10, .c-twitter-text-10, .text-twitter-text-10 { color: rgba(0, 0, 0, 1.0); }

/* Instagram */
.c-instagram, .text-instagram, .c-instagram-text, .text-instagram-text { color: #e4405f; }
.c-instagram-light, .text-instagram-light, .c-instagram-text-light, .text-instagram-text-light { color: #ffffff; }
.c-instagram-01, .text-instagram-01, .c-instagram-text-01, .text-instagram-text-01 { color: rgba(228, 64, 95, 0.1); }
.c-instagram-02, .text-instagram-02, .c-instagram-text-02, .text-instagram-text-02 { color: rgba(228, 64, 95, 0.2); }
.c-instagram-03, .text-instagram-03, .c-instagram-text-03, .text-instagram-text-03 { color: rgba(228, 64, 95, 0.3); }
.c-instagram-04, .text-instagram-04, .c-instagram-text-04, .text-instagram-text-04 { color: rgba(228, 64, 95, 0.4); }
.c-instagram-05, .text-instagram-05, .c-instagram-text-05, .text-instagram-text-05 { color: rgba(228, 64, 95, 0.5); }
.c-instagram-06, .text-instagram-06, .c-instagram-text-06, .text-instagram-text-06 { color: rgba(228, 64, 95, 0.6); }
.c-instagram-07, .text-instagram-07, .c-instagram-text-07, .text-instagram-text-07 { color: rgba(228, 64, 95, 0.7); }
.c-instagram-08, .text-instagram-08, .c-instagram-text-08, .text-instagram-text-08 { color: rgba(228, 64, 95, 0.8); }
.c-instagram-09, .text-instagram-09, .c-instagram-text-09, .text-instagram-text-09 { color: rgba(228, 64, 95, 0.9); }
.c-instagram-10, .text-instagram-10, .c-instagram-text-10, .text-instagram-text-10 { color: rgba(228, 64, 95, 1.0); }

/* LinkedIn */
.c-linkedin, .text-linkedin, .c-linkedin-text, .text-linkedin-text { color: #0a66c2; }
.c-linkedin-light, .text-linkedin-light, .c-linkedin-text-light, .text-linkedin-text-light { color: #ffffff; }
.c-linkedin-01, .text-linkedin-01, .c-linkedin-text-01, .text-linkedin-text-01 { color: rgba(10, 102, 194, 0.1); }
.c-linkedin-02, .text-linkedin-02, .c-linkedin-text-02, .text-linkedin-text-02 { color: rgba(10, 102, 194, 0.2); }
.c-linkedin-03, .text-linkedin-03, .c-linkedin-text-03, .text-linkedin-text-03 { color: rgba(10, 102, 194, 0.3); }
.c-linkedin-04, .text-linkedin-04, .c-linkedin-text-04, .text-linkedin-text-04 { color: rgba(10, 102, 194, 0.4); }
.c-linkedin-05, .text-linkedin-05, .c-linkedin-text-05, .text-linkedin-text-05 { color: rgba(10, 102, 194, 0.5); }
.c-linkedin-06, .text-linkedin-06, .c-linkedin-text-06, .text-linkedin-text-06 { color: rgba(10, 102, 194, 0.6); }
.c-linkedin-07, .text-linkedin-07, .c-linkedin-text-07, .text-linkedin-text-07 { color: rgba(10, 102, 194, 0.7); }
.c-linkedin-08, .text-linkedin-08, .c-linkedin-text-08, .text-linkedin-text-08 { color: rgba(10, 102, 194, 0.8); }
.c-linkedin-09, .text-linkedin-09, .c-linkedin-text-09, .text-linkedin-text-09 { color: rgba(10, 102, 194, 0.9); }
.c-linkedin-10, .text-linkedin-10, .c-linkedin-text-10, .text-linkedin-text-10 { color: rgba(10, 102, 194, 1.0); }

/* YouTube */
.c-youtube, .text-youtube, .c-youtube-text, .text-youtube-text { color: #ff0000; }
.c-youtube-light, .text-youtube-light, .c-youtube-text-light, .text-youtube-text-light { color: #ffffff; }
.c-youtube-01, .text-youtube-01, .c-youtube-text-01, .text-youtube-text-01 { color: rgba(255, 0, 0, 0.1); }
.c-youtube-02, .text-youtube-02, .c-youtube-text-02, .text-youtube-text-02 { color: rgba(255, 0, 0, 0.2); }
.c-youtube-03, .text-youtube-03, .c-youtube-text-03, .text-youtube-text-03 { color: rgba(255, 0, 0, 0.3); }
.c-youtube-04, .text-youtube-04, .c-youtube-text-04, .text-youtube-text-04 { color: rgba(255, 0, 0, 0.4); }
.c-youtube-05, .text-youtube-05, .c-youtube-text-05, .text-youtube-text-05 { color: rgba(255, 0, 0, 0.5); }
.c-youtube-06, .text-youtube-06, .c-youtube-text-06, .text-youtube-text-06 { color: rgba(255, 0, 0, 0.6); }
.c-youtube-07, .text-youtube-07, .c-youtube-text-07, .text-youtube-text-07 { color: rgba(255, 0, 0, 0.7); }
.c-youtube-08, .text-youtube-08, .c-youtube-text-08, .text-youtube-text-08 { color: rgba(255, 0, 0, 0.8); }
.c-youtube-09, .text-youtube-09, .c-youtube-text-09, .text-youtube-text-09 { color: rgba(255, 0, 0, 0.9); }
.c-youtube-10, .text-youtube-10, .c-youtube-text-10, .text-youtube-text-10 { color: rgba(255, 0, 0, 1.0); }

/* WhatsApp */
.c-whatsapp, .text-whatsapp, .c-whatsapp-text, .text-whatsapp-text { color: #25d366; }
.c-whatsapp-light, .text-whatsapp-light, .c-whatsapp-text-light, .text-whatsapp-text-light { color: #ffffff; }
.c-whatsapp-01, .text-whatsapp-01, .c-whatsapp-text-01, .text-whatsapp-text-01 { color: rgba(37, 211, 102, 0.1); }
.c-whatsapp-02, .text-whatsapp-02, .c-whatsapp-text-02, .text-whatsapp-text-02 { color: rgba(37, 211, 102, 0.2); }
.c-whatsapp-03, .text-whatsapp-03, .c-whatsapp-text-03, .text-whatsapp-text-03 { color: rgba(37, 211, 102, 0.3); }
.c-whatsapp-04, .text-whatsapp-04, .c-whatsapp-text-04, .text-whatsapp-text-04 { color: rgba(37, 211, 102, 0.4); }
.c-whatsapp-05, .text-whatsapp-05, .c-whatsapp-text-05, .text-whatsapp-text-05 { color: rgba(37, 211, 102, 0.5); }
.c-whatsapp-06, .text-whatsapp-06, .c-whatsapp-text-06, .text-whatsapp-text-06 { color: rgba(37, 211, 102, 0.6); }
.c-whatsapp-07, .text-whatsapp-07, .c-whatsapp-text-07, .text-whatsapp-text-07 { color: rgba(37, 211, 102, 0.7); }
.c-whatsapp-08, .text-whatsapp-08, .c-whatsapp-text-08, .text-whatsapp-text-08 { color: rgba(37, 211, 102, 0.8); }
.c-whatsapp-09, .text-whatsapp-09, .c-whatsapp-text-09, .text-whatsapp-text-09 { color: rgba(37, 211, 102, 0.9); }
.c-whatsapp-10, .text-whatsapp-10, .c-whatsapp-text-10, .text-whatsapp-text-10 { color: rgba(37, 211, 102, 1.0); }

/* Telegram */
.c-telegram, .text-telegram, .c-telegram-text, .text-telegram-text { color: #0088cc; }
.c-telegram-light, .text-telegram-light, .c-telegram-text-light, .text-telegram-text-light { color: #ffffff; }
.c-telegram-01, .text-telegram-01, .c-telegram-text-01, .text-telegram-text-01 { color: rgba(0, 136, 204, 0.1); }
.c-telegram-02, .text-telegram-02, .c-telegram-text-02, .text-telegram-text-02 { color: rgba(0, 136, 204, 0.2); }
.c-telegram-03, .text-telegram-03, .c-telegram-text-03, .text-telegram-text-03 { color: rgba(0, 136, 204, 0.3); }
.c-telegram-04, .text-telegram-04, .c-telegram-text-04, .text-telegram-text-04 { color: rgba(0, 136, 204, 0.4); }
.c-telegram-05, .text-telegram-05, .c-telegram-text-05, .text-telegram-text-05 { color: rgba(0, 136, 204, 0.5); }
.c-telegram-06, .text-telegram-06, .c-telegram-text-06, .text-telegram-text-06 { color: rgba(0, 136, 204, 0.6); }
.c-telegram-07, .text-telegram-07, .c-telegram-text-07, .text-telegram-text-07 { color: rgba(0, 136, 204, 0.7); }
.c-telegram-08, .text-telegram-08, .c-telegram-text-08, .text-telegram-text-08 { color: rgba(0, 136, 204, 0.8); }
.c-telegram-09, .text-telegram-09, .c-telegram-text-09, .text-telegram-text-09 { color: rgba(0, 136, 204, 0.9); }
.c-telegram-10, .text-telegram-10, .c-telegram-text-10, .text-telegram-text-10 { color: rgba(0, 136, 204, 1.0); }

/* Discord */
.c-discord, .text-discord, .c-discord-text, .text-discord-text { color: #5865f2; }
.c-discord-light, .text-discord-light, .c-discord-text-light, .text-discord-text-light { color: #ffffff; }
.c-discord-01, .text-discord-01, .c-discord-text-01, .text-discord-text-01 { color: rgba(88, 101, 242, 0.1); }
.c-discord-02, .text-discord-02, .c-discord-text-02, .text-discord-text-02 { color: rgba(88, 101, 242, 0.2); }
.c-discord-03, .text-discord-03, .c-discord-text-03, .text-discord-text-03 { color: rgba(88, 101, 242, 0.3); }
.c-discord-04, .text-discord-04, .c-discord-text-04, .text-discord-text-04 { color: rgba(88, 101, 242, 0.4); }
.c-discord-05, .text-discord-05, .c-discord-text-05, .text-discord-text-05 { color: rgba(88, 101, 242, 0.5); }
.c-discord-06, .text-discord-06, .c-discord-text-06, .text-discord-text-06 { color: rgba(88, 101, 242, 0.6); }
.c-discord-07, .text-discord-07, .c-discord-text-07, .text-discord-text-07 { color: rgba(88, 101, 242, 0.7); }
.c-discord-08, .text-discord-08, .c-discord-text-08, .text-discord-text-08 { color: rgba(88, 101, 242, 0.8); }
.c-discord-09, .text-discord-09, .c-discord-text-09, .text-discord-text-09 { color: rgba(88, 101, 242, 0.9); }
.c-discord-10, .text-discord-10, .c-discord-text-10, .text-discord-text-10 { color: rgba(88, 101, 242, 1.0); }

/* Spotify */
.c-spotify, .text-spotify, .c-spotify-text, .text-spotify-text { color: #1db954; }
.c-spotify-light, .text-spotify-light, .c-spotify-text-light, .text-spotify-text-light { color: #ffffff; }
.c-spotify-01, .text-spotify-01, .c-spotify-text-01, .text-spotify-text-01 { color: rgba(29, 185, 84, 0.1); }
.c-spotify-02, .text-spotify-02, .c-spotify-text-02, .text-spotify-text-02 { color: rgba(29, 185, 84, 0.2); }
.c-spotify-03, .text-spotify-03, .c-spotify-text-03, .text-spotify-text-03 { color: rgba(29, 185, 84, 0.3); }
.c-spotify-04, .text-spotify-04, .c-spotify-text-04, .text-spotify-text-04 { color: rgba(29, 185, 84, 0.4); }
.c-spotify-05, .text-spotify-05, .c-spotify-text-05, .text-spotify-text-05 { color: rgba(29, 185, 84, 0.5); }
.c-spotify-06, .text-spotify-06, .c-spotify-text-06, .text-spotify-text-06 { color: rgba(29, 185, 84, 0.6); }
.c-spotify-07, .text-spotify-07, .c-spotify-text-07, .text-spotify-text-07 { color: rgba(29, 185, 84, 0.7); }
.c-spotify-08, .text-spotify-08, .c-spotify-text-08, .text-spotify-text-08 { color: rgba(29, 185, 84, 0.8); }
.c-spotify-09, .text-spotify-09, .c-spotify-text-09, .text-spotify-text-09 { color: rgba(29, 185, 84, 0.9); }
.c-spotify-10, .text-spotify-10, .c-spotify-text-10, .text-spotify-text-10 { color: rgba(29, 185, 84, 1.0); }

/* GitHub */
.c-github, .text-github, .c-github-text, .text-github-text { color: #333333; }
.c-github-light, .text-github-light, .c-github-text-light, .text-github-text-light { color: #ffffff; }
.c-github-01, .text-github-01, .c-github-text-01, .text-github-text-01 { color: rgba(51, 51, 51, 0.1); }
.c-github-02, .text-github-02, .c-github-text-02, .text-github-text-02 { color: rgba(51, 51, 51, 0.2); }
.c-github-03, .text-github-03, .c-github-text-03, .text-github-text-03 { color: rgba(51, 51, 51, 0.3); }
.c-github-04, .text-github-04, .c-github-text-04, .text-github-text-04 { color: rgba(51, 51, 51, 0.4); }
.c-github-05, .text-github-05, .c-github-text-05, .text-github-text-05 { color: rgba(51, 51, 51, 0.5); }
.c-github-06, .text-github-06, .c-github-text-06, .text-github-text-06 { color: rgba(51, 51, 51, 0.6); }
.c-github-07, .text-github-07, .c-github-text-07, .text-github-text-07 { color: rgba(51, 51, 51, 0.7); }
.c-github-08, .text-github-08, .c-github-text-08, .text-github-text-08 { color: rgba(51, 51, 51, 0.8); }
.c-github-09, .text-github-09, .c-github-text-09, .text-github-text-09 { color: rgba(51, 51, 51, 0.9); }
.c-github-10, .text-github-10, .c-github-text-10, .text-github-text-10 { color: rgba(51, 51, 51, 1.0); }

/* Pinterest */
.c-pinterest, .text-pinterest, .c-pinterest-text, .text-pinterest-text { color: #e60023; }
.c-pinterest-light, .text-pinterest-light, .c-pinterest-text-light, .text-pinterest-text-light { color: #ffffff; }
.c-pinterest-01, .text-pinterest-01, .c-pinterest-text-01, .text-pinterest-text-01 { color: rgba(230, 0, 35, 0.1); }
.c-pinterest-02, .text-pinterest-02, .c-pinterest-text-02, .text-pinterest-text-02 { color: rgba(230, 0, 35, 0.2); }
.c-pinterest-03, .text-pinterest-03, .c-pinterest-text-03, .text-pinterest-text-03 { color: rgba(230, 0, 35, 0.3); }
.c-pinterest-04, .text-pinterest-04, .c-pinterest-text-04, .text-pinterest-text-04 { color: rgba(230, 0, 35, 0.4); }
.c-pinterest-05, .text-pinterest-05, .c-pinterest-text-05, .text-pinterest-text-05 { color: rgba(230, 0, 35, 0.5); }
.c-pinterest-06, .text-pinterest-06, .c-pinterest-text-06, .text-pinterest-text-06 { color: rgba(230, 0, 35, 0.6); }
.c-pinterest-07, .text-pinterest-07, .c-pinterest-text-07, .text-pinterest-text-07 { color: rgba(230, 0, 35, 0.7); }
.c-pinterest-08, .text-pinterest-08, .c-pinterest-text-08, .text-pinterest-text-08 { color: rgba(230, 0, 35, 0.8); }
.c-pinterest-09, .text-pinterest-09, .c-pinterest-text-09, .text-pinterest-text-09 { color: rgba(230, 0, 35, 0.9); }
.c-pinterest-10, .text-pinterest-10, .c-pinterest-text-10, .text-pinterest-text-10 { color: rgba(230, 0, 35, 1.0); }

/* Reddit */
.c-reddit, .text-reddit, .c-reddit-text, .text-reddit-text { color: #ff4500; }
.c-reddit-light, .text-reddit-light, .c-reddit-text-light, .text-reddit-text-light { color: #ffffff; }
.c-reddit-01, .text-reddit-01, .c-reddit-text-01, .text-reddit-text-01 { color: rgba(255, 69, 0, 0.1); }
.c-reddit-02, .text-reddit-02, .c-reddit-text-02, .text-reddit-text-02 { color: rgba(255, 69, 0, 0.2); }
.c-reddit-03, .text-reddit-03, .c-reddit-text-03, .text-reddit-text-03 { color: rgba(255, 69, 0, 0.3); }
.c-reddit-04, .text-reddit-04, .c-reddit-text-04, .text-reddit-text-04 { color: rgba(255, 69, 0, 0.4); }
.c-reddit-05, .text-reddit-05, .c-reddit-text-05, .text-reddit-text-05 { color: rgba(255, 69, 0, 0.5); }
.c-reddit-06, .text-reddit-06, .c-reddit-text-06, .text-reddit-text-06 { color: rgba(255, 69, 0, 0.6); }
.c-reddit-07, .text-reddit-07, .c-reddit-text-07, .text-reddit-text-07 { color: rgba(255, 69, 0, 0.7); }
.c-reddit-08, .text-reddit-08, .c-reddit-text-08, .text-reddit-text-08 { color: rgba(255, 69, 0, 0.8); }
.c-reddit-09, .text-reddit-09, .c-reddit-text-09, .text-reddit-text-09 { color: rgba(255, 69, 0, 0.9); }
.c-reddit-10, .text-reddit-10, .c-reddit-text-10, .text-reddit-text-10 { color: rgba(255, 69, 0, 1.0); }

/* Twitch */
.c-twitch, .text-twitch, .c-twitch-text, .text-twitch-text { color: #9146ff; }
.c-twitch-light, .text-twitch-light, .c-twitch-text-light, .text-twitch-text-light { color: #ffffff; }
.c-twitch-01, .text-twitch-01, .c-twitch-text-01, .text-twitch-text-01 { color: rgba(145, 70, 255, 0.1); }
.c-twitch-02, .text-twitch-02, .c-twitch-text-02, .text-twitch-text-02 { color: rgba(145, 70, 255, 0.2); }
.c-twitch-03, .text-twitch-03, .c-twitch-text-03, .text-twitch-text-03 { color: rgba(145, 70, 255, 0.3); }
.c-twitch-04, .text-twitch-04, .c-twitch-text-04, .text-twitch-text-04 { color: rgba(145, 70, 255, 0.4); }
.c-twitch-05, .text-twitch-05, .c-twitch-text-05, .text-twitch-text-05 { color: rgba(145, 70, 255, 0.5); }
.c-twitch-06, .text-twitch-06, .c-twitch-text-06, .text-twitch-text-06 { color: rgba(145, 70, 255, 0.6); }
.c-twitch-07, .text-twitch-07, .c-twitch-text-07, .text-twitch-text-07 { color: rgba(145, 70, 255, 0.7); }
.c-twitch-08, .text-twitch-08, .c-twitch-text-08, .text-twitch-text-08 { color: rgba(145, 70, 255, 0.8); }
.c-twitch-09, .text-twitch-09, .c-twitch-text-09, .text-twitch-text-09 { color: rgba(145, 70, 255, 0.9); }
.c-twitch-10, .text-twitch-10, .c-twitch-text-10, .text-twitch-text-10 { color: rgba(145, 70, 255, 1.0); }

/* Snapchat */
.c-snapchat, .text-snapchat, .c-snapchat-text, .text-snapchat-text { color: #fffc00; }
.c-snapchat-dark, .text-snapchat-dark, .c-snapchat-text-dark, .text-snapchat-text-dark { color: #000000; }
.c-snapchat-01, .text-snapchat-01, .c-snapchat-text-01, .text-snapchat-text-01 { color: rgba(255, 252, 0, 0.1); }
.c-snapchat-02, .text-snapchat-02, .c-snapchat-text-02, .text-snapchat-text-02 { color: rgba(255, 252, 0, 0.2); }
.c-snapchat-03, .text-snapchat-03, .c-snapchat-text-03, .text-snapchat-text-03 { color: rgba(255, 252, 0, 0.3); }
.c-snapchat-04, .text-snapchat-04, .c-snapchat-text-04, .text-snapchat-text-04 { color: rgba(255, 252, 0, 0.4); }
.c-snapchat-05, .text-snapchat-05, .c-snapchat-text-05, .text-snapchat-text-05 { color: rgba(255, 252, 0, 0.5); }
.c-snapchat-06, .text-snapchat-06, .c-snapchat-text-06, .text-snapchat-text-06 { color: rgba(255, 252, 0, 0.6); }
.c-snapchat-07, .text-snapchat-07, .c-snapchat-text-07, .text-snapchat-text-07 { color: rgba(255, 252, 0, 0.7); }
.c-snapchat-08, .text-snapchat-08, .c-snapchat-text-08, .text-snapchat-text-08 { color: rgba(255, 252, 0, 0.8); }
.c-snapchat-09, .text-snapchat-09, .c-snapchat-text-09, .text-snapchat-text-09 { color: rgba(255, 252, 0, 0.9); }
.c-snapchat-10, .text-snapchat-10, .c-snapchat-text-10, .text-snapchat-text-10 { color: rgba(255, 252, 0, 1.0); }

/* TikTok */
.c-tiktok, .text-tiktok, .c-tiktok-text, .text-tiktok-text { color: #000000; }
.c-tiktok-light, .text-tiktok-light, .c-tiktok-text-light, .text-tiktok-text-light { color: #ffffff; }
.c-tiktok-dark, .text-tiktok-dark, .c-tiktok-text-dark, .text-tiktok-text-dark { color: #ffffff; }
.c-tiktok-01, .text-tiktok-01, .c-tiktok-text-01, .text-tiktok-text-01 { color: rgba(0, 0, 0, 0.1); }
.c-tiktok-02, .text-tiktok-02, .c-tiktok-text-02, .text-tiktok-text-02 { color: rgba(0, 0, 0, 0.2); }
.c-tiktok-03, .text-tiktok-03, .c-tiktok-text-03, .text-tiktok-text-03 { color: rgba(0, 0, 0, 0.3); }
.c-tiktok-04, .text-tiktok-04, .c-tiktok-text-04, .text-tiktok-text-04 { color: rgba(0, 0, 0, 0.4); }
.c-tiktok-05, .text-tiktok-05, .c-tiktok-text-05, .text-tiktok-text-05 { color: rgba(0, 0, 0, 0.5); }
.c-tiktok-06, .text-tiktok-06, .c-tiktok-text-06, .text-tiktok-text-06 { color: rgba(0, 0, 0, 0.6); }
.c-tiktok-07, .text-tiktok-07, .c-tiktok-text-07, .text-tiktok-text-07 { color: rgba(0, 0, 0, 0.7); }
.c-tiktok-08, .text-tiktok-08, .c-tiktok-text-08, .text-tiktok-text-08 { color: rgba(0, 0, 0, 0.8); }
.c-tiktok-09, .text-tiktok-09, .c-tiktok-text-09, .text-tiktok-text-09 { color: rgba(0, 0, 0, 0.9); }
.c-tiktok-10, .text-tiktok-10, .c-tiktok-text-10, .text-tiktok-text-10 { color: rgba(0, 0, 0, 1.0); }

/* Stack Overflow */
.c-stackoverflow, .text-stackoverflow, .c-stackoverflow-text, .text-stackoverflow-text { color: #f48024; }
.c-stackoverflow-light, .text-stackoverflow-light, .c-stackoverflow-text-light, .text-stackoverflow-text-light { color: #ffffff; }
.c-stackoverflow-01, .text-stackoverflow-01, .c-stackoverflow-text-01, .text-stackoverflow-text-01 { color: rgba(244, 128, 36, 0.1); }
.c-stackoverflow-02, .text-stackoverflow-02, .c-stackoverflow-text-02, .text-stackoverflow-text-02 { color: rgba(244, 128, 36, 0.2); }
.c-stackoverflow-03, .text-stackoverflow-03, .c-stackoverflow-text-03, .text-stackoverflow-text-03 { color: rgba(244, 128, 36, 0.3); }
.c-stackoverflow-04, .text-stackoverflow-04, .c-stackoverflow-text-04, .text-stackoverflow-text-04 { color: rgba(244, 128, 36, 0.4); }
.c-stackoverflow-05, .text-stackoverflow-05, .c-stackoverflow-text-05, .text-stackoverflow-text-05 { color: rgba(244, 128, 36, 0.5); }
.c-stackoverflow-06, .text-stackoverflow-06, .c-stackoverflow-text-06, .text-stackoverflow-text-06 { color: rgba(244, 128, 36, 0.6); }
.c-stackoverflow-07, .text-stackoverflow-07, .c-stackoverflow-text-07, .text-stackoverflow-text-07 { color: rgba(244, 128, 36, 0.7); }
.c-stackoverflow-08, .text-stackoverflow-08, .c-stackoverflow-text-08, .text-stackoverflow-text-08 { color: rgba(244, 128, 36, 0.8); }
.c-stackoverflow-09, .text-stackoverflow-09, .c-stackoverflow-text-09, .text-stackoverflow-text-09 { color: rgba(244, 128, 36, 0.9); }
.c-stackoverflow-10, .text-stackoverflow-10, .c-stackoverflow-text-10, .text-stackoverflow-text-10 { color: rgba(244, 128, 36, 1.0); }

/* Medium */
.c-medium, .text-medium, .c-medium-text, .text-medium-text { color: #00ab6c; }
.c-medium-light, .text-medium-light, .c-medium-text-light, .text-medium-text-light { color: #ffffff; }
.c-medium-01, .text-medium-01, .c-medium-text-01, .text-medium-text-01 { color: rgba(0, 171, 108, 0.1); }
.c-medium-02, .text-medium-02, .c-medium-text-02, .text-medium-text-02 { color: rgba(0, 171, 108, 0.2); }
.c-medium-03, .text-medium-03, .c-medium-text-03, .text-medium-text-03 { color: rgba(0, 171, 108, 0.3); }
.c-medium-04, .text-medium-04, .c-medium-text-04, .text-medium-text-04 { color: rgba(0, 171, 108, 0.4); }
.c-medium-05, .text-medium-05, .c-medium-text-05, .text-medium-text-05 { color: rgba(0, 171, 108, 0.5); }
.c-medium-06, .text-medium-06, .c-medium-text-06, .text-medium-text-06 { color: rgba(0, 171, 108, 0.6); }
.c-medium-07, .text-medium-07, .c-medium-text-07, .text-medium-text-07 { color: rgba(0, 171, 108, 0.7); }
.c-medium-08, .text-medium-08, .c-medium-text-08, .text-medium-text-08 { color: rgba(0, 171, 108, 0.8); }
.c-medium-09, .text-medium-09, .c-medium-text-09, .text-medium-text-09 { color: rgba(0, 171, 108, 0.9); }
.c-medium-10, .text-medium-10, .c-medium-text-10, .text-medium-text-10 { color: rgba(0, 171, 108, 1.0); }

/* Slack */
.c-slack, .text-slack, .c-slack-text, .text-slack-text { color: #4a154b; }
.c-slack-light, .text-slack-light, .c-slack-text-light, .text-slack-text-light { color: #ffffff; }
.c-slack-01, .text-slack-01, .c-slack-text-01, .text-slack-text-01 { color: rgba(74, 21, 75, 0.1); }
.c-slack-02, .text-slack-02, .c-slack-text-02, .text-slack-text-02 { color: rgba(74, 21, 75, 0.2); }
.c-slack-03, .text-slack-03, .c-slack-text-03, .text-slack-text-03 { color: rgba(74, 21, 75, 0.3); }
.c-slack-04, .text-slack-04, .c-slack-text-04, .text-slack-text-04 { color: rgba(74, 21, 75, 0.4); }
.c-slack-05, .text-slack-05, .c-slack-text-05, .text-slack-text-05 { color: rgba(74, 21, 75, 0.5); }
.c-slack-06, .text-slack-06, .c-slack-text-06, .text-slack-text-06 { color: rgba(74, 21, 75, 0.6); }
.c-slack-07, .text-slack-07, .c-slack-text-07, .text-slack-text-07 { color: rgba(74, 21, 75, 0.7); }
.c-slack-08, .text-slack-08, .c-slack-text-08, .text-slack-text-08 { color: rgba(74, 21, 75, 0.8); }
.c-slack-09, .text-slack-09, .c-slack-text-09, .text-slack-text-09 { color: rgba(74, 21, 75, 0.9); }
.c-slack-10, .text-slack-10, .c-slack-text-10, .text-slack-text-10 { color: rgba(74, 21, 75, 1.0); }

/* Tumblr */
.c-tumblr, .text-tumblr, .c-tumblr-text, .text-tumblr-text { color: #35465c; }
.c-tumblr-light, .text-tumblr-light, .c-tumblr-text-light, .text-tumblr-text-light { color: #ffffff; }
.c-tumblr-01, .text-tumblr-01, .c-tumblr-text-01, .text-tumblr-text-01 { color: rgba(53, 70, 92, 0.1); }
.c-tumblr-02, .text-tumblr-02, .c-tumblr-text-02, .text-tumblr-text-02 { color: rgba(53, 70, 92, 0.2); }
.c-tumblr-03, .text-tumblr-03, .c-tumblr-text-03, .text-tumblr-text-03 { color: rgba(53, 70, 92, 0.3); }
.c-tumblr-04, .text-tumblr-04, .c-tumblr-text-04, .text-tumblr-text-04 { color: rgba(53, 70, 92, 0.4); }
.c-tumblr-05, .text-tumblr-05, .c-tumblr-text-05, .text-tumblr-text-05 { color: rgba(53, 70, 92, 0.5); }
.c-tumblr-06, .text-tumblr-06, .c-tumblr-text-06, .text-tumblr-text-06 { color: rgba(53, 70, 92, 0.6); }
.c-tumblr-07, .text-tumblr-07, .c-tumblr-text-07, .text-tumblr-text-07 { color: rgba(53, 70, 92, 0.7); }
.c-tumblr-08, .text-tumblr-08, .c-tumblr-text-08, .text-tumblr-text-08 { color: rgba(53, 70, 92, 0.8); }
.c-tumblr-09, .text-tumblr-09, .c-tumblr-text-09, .text-tumblr-text-09 { color: rgba(53, 70, 92, 0.9); }
.c-tumblr-10, .text-tumblr-10, .c-tumblr-text-10, .text-tumblr-text-10 { color: rgba(53, 70, 92, 1.0); }

/* Flickr */
.c-flickr, .text-flickr, .c-flickr-text, .text-flickr-text { color: #ff0084; }
.c-flickr-light, .text-flickr-light, .c-flickr-text-light, .text-flickr-text-light { color: #ffffff; }
.c-flickr-01, .text-flickr-01, .c-flickr-text-01, .text-flickr-text-01 { color: rgba(255, 0, 132, 0.1); }
.c-flickr-02, .text-flickr-02, .c-flickr-text-02, .text-flickr-text-02 { color: rgba(255, 0, 132, 0.2); }
.c-flickr-03, .text-flickr-03, .c-flickr-text-03, .text-flickr-text-03 { color: rgba(255, 0, 132, 0.3); }
.c-flickr-04, .text-flickr-04, .c-flickr-text-04, .text-flickr-text-04 { color: rgba(255, 0, 132, 0.4); }
.c-flickr-05, .text-flickr-05, .c-flickr-text-05, .text-flickr-text-05 { color: rgba(255, 0, 132, 0.5); }
.c-flickr-06, .text-flickr-06, .c-flickr-text-06, .text-flickr-text-06 { color: rgba(255, 0, 132, 0.6); }
.c-flickr-07, .text-flickr-07, .c-flickr-text-07, .text-flickr-text-07 { color: rgba(255, 0, 132, 0.7); }
.c-flickr-08, .text-flickr-08, .c-flickr-text-08, .text-flickr-text-08 { color: rgba(255, 0, 132, 0.8); }
.c-flickr-09, .text-flickr-09, .c-flickr-text-09, .text-flickr-text-09 { color: rgba(255, 0, 132, 0.9); }
.c-flickr-10, .text-flickr-10, .c-flickr-text-10, .text-flickr-text-10 { color: rgba(255, 0, 132, 1.0); }

/* Vimeo */
.c-vimeo, .text-vimeo, .c-vimeo-text, .text-vimeo-text { color: #1ab7ea; }
.c-vimeo-light, .text-vimeo-light, .c-vimeo-text-light, .text-vimeo-text-light { color: #ffffff; }
.c-vimeo-01, .text-vimeo-01, .c-vimeo-text-01, .text-vimeo-text-01 { color: rgba(26, 183, 234, 0.1); }
.c-vimeo-02, .text-vimeo-02, .c-vimeo-text-02, .text-vimeo-text-02 { color: rgba(26, 183, 234, 0.2); }
.c-vimeo-03, .text-vimeo-03, .c-vimeo-text-03, .text-vimeo-text-03 { color: rgba(26, 183, 234, 0.3); }
.c-vimeo-04, .text-vimeo-04, .c-vimeo-text-04, .text-vimeo-text-04 { color: rgba(26, 183, 234, 0.4); }
.c-vimeo-05, .text-vimeo-05, .c-vimeo-text-05, .text-vimeo-text-05 { color: rgba(26, 183, 234, 0.5); }
.c-vimeo-06, .text-vimeo-06, .c-vimeo-text-06, .text-vimeo-text-06 { color: rgba(26, 183, 234, 0.6); }
.c-vimeo-07, .text-vimeo-07, .c-vimeo-text-07, .text-vimeo-text-07 { color: rgba(26, 183, 234, 0.7); }
.c-vimeo-08, .text-vimeo-08, .c-vimeo-text-08, .text-vimeo-text-08 { color: rgba(26, 183, 234, 0.8); }
.c-vimeo-09, .text-vimeo-09, .c-vimeo-text-09, .text-vimeo-text-09 { color: rgba(26, 183, 234, 0.9); }
.c-vimeo-10, .text-vimeo-10, .c-vimeo-text-10, .text-vimeo-text-10 { color: rgba(26, 183, 234, 1.0); }

/* Dribbble */
.c-dribbble, .text-dribbble, .c-dribbble-text, .text-dribbble-text { color: #ea4c89; }
.c-dribbble-light, .text-dribbble-light, .c-dribbble-text-light, .text-dribbble-text-light { color: #ffffff; }
.c-dribbble-01, .text-dribbble-01, .c-dribbble-text-01, .text-dribbble-text-01 { color: rgba(234, 76, 137, 0.1); }
.c-dribbble-02, .text-dribbble-02, .c-dribbble-text-02, .text-dribbble-text-02 { color: rgba(234, 76, 137, 0.2); }
.c-dribbble-03, .text-dribbble-03, .c-dribbble-text-03, .text-dribbble-text-03 { color: rgba(234, 76, 137, 0.3); }
.c-dribbble-04, .text-dribbble-04, .c-dribbble-text-04, .text-dribbble-text-04 { color: rgba(234, 76, 137, 0.4); }
.c-dribbble-05, .text-dribbble-05, .c-dribbble-text-05, .text-dribbble-text-05 { color: rgba(234, 76, 137, 0.5); }
.c-dribbble-06, .text-dribbble-06, .c-dribbble-text-06, .text-dribbble-text-06 { color: rgba(234, 76, 137, 0.6); }
.c-dribbble-07, .text-dribbble-07, .c-dribbble-text-07, .text-dribbble-text-07 { color: rgba(234, 76, 137, 0.7); }
.c-dribbble-08, .text-dribbble-08, .c-dribbble-text-08, .text-dribbble-text-08 { color: rgba(234, 76, 137, 0.8); }
.c-dribbble-09, .text-dribbble-09, .c-dribbble-text-09, .text-dribbble-text-09 { color: rgba(234, 76, 137, 0.9); }
.c-dribbble-10, .text-dribbble-10, .c-dribbble-text-10, .text-dribbble-text-10 { color: rgba(234, 76, 137, 1.0); }

/* Behance */
.c-behance, .text-behance, .c-behance-text, .text-behance-text { color: #1769ff; }
.c-behance-light, .text-behance-light, .c-behance-text-light, .text-behance-text-light { color: #ffffff; }
.c-behance-01, .text-behance-01, .c-behance-text-01, .text-behance-text-01 { color: rgba(23, 105, 255, 0.1); }
.c-behance-02, .text-behance-02, .c-behance-text-02, .text-behance-text-02 { color: rgba(23, 105, 255, 0.2); }
.c-behance-03, .text-behance-03, .c-behance-text-03, .text-behance-text-03 { color: rgba(23, 105, 255, 0.3); }
.c-behance-04, .text-behance-04, .c-behance-text-04, .text-behance-text-04 { color: rgba(23, 105, 255, 0.4); }
.c-behance-05, .text-behance-05, .c-behance-text-05, .text-behance-text-05 { color: rgba(23, 105, 255, 0.5); }
.c-behance-06, .text-behance-06, .c-behance-text-06, .text-behance-text-06 { color: rgba(23, 105, 255, 0.6); }
.c-behance-07, .text-behance-07, .c-behance-text-07, .text-behance-text-07 { color: rgba(23, 105, 255, 0.7); }
.c-behance-08, .text-behance-08, .c-behance-text-08, .text-behance-text-08 { color: rgba(23, 105, 255, 0.8); }
.c-behance-09, .text-behance-09, .c-behance-text-09, .text-behance-text-09 { color: rgba(23, 105, 255, 0.9); }
.c-behance-10, .text-behance-10, .c-behance-text-10, .text-behance-text-10 { color: rgba(23, 105, 255, 1.0); }

/* Quora */
.c-quora, .text-quora, .c-quora-text, .text-quora-text { color: #aa2200; }
.c-quora-light, .text-quora-light, .c-quora-text-light, .text-quora-text-light { color: #ffffff; }
.c-quora-01, .text-quora-01, .c-quora-text-01, .text-quora-text-01 { color: rgba(170, 34, 0, 0.1); }
.c-quora-02, .text-quora-02, .c-quora-text-02, .text-quora-text-02 { color: rgba(170, 34, 0, 0.2); }
.c-quora-03, .text-quora-03, .c-quora-text-03, .text-quora-text-03 { color: rgba(170, 34, 0, 0.3); }
.c-quora-04, .text-quora-04, .c-quora-text-04, .text-quora-text-04 { color: rgba(170, 34, 0, 0.4); }
.c-quora-05, .text-quora-05, .c-quora-text-05, .text-quora-text-05 { color: rgba(170, 34, 0, 0.5); }
.c-quora-06, .text-quora-06, .c-quora-text-06, .text-quora-text-06 { color: rgba(170, 34, 0, 0.6); }
.c-quora-07, .text-quora-07, .c-quora-text-07, .text-quora-text-07 { color: rgba(170, 34, 0, 0.7); }
.c-quora-08, .text-quora-08, .c-quora-text-08, .text-quora-text-08 { color: rgba(170, 34, 0, 0.8); }
.c-quora-09, .text-quora-09, .c-quora-text-09, .text-quora-text-09 { color: rgba(170, 34, 0, 0.9); }
.c-quora-10, .text-quora-10, .c-quora-text-10, .text-quora-text-10 { color: rgba(170, 34, 0, 1.0); }

/* SoundCloud */
.c-soundcloud, .text-soundcloud, .c-soundcloud-text, .text-soundcloud-text { color: #ff3300; }
.c-soundcloud-light, .text-soundcloud-light, .c-soundcloud-text-light, .text-soundcloud-text-light { color: #ffffff; }
.c-soundcloud-01, .text-soundcloud-01, .c-soundcloud-text-01, .text-soundcloud-text-01 { color: rgba(255, 51, 0, 0.1); }
.c-soundcloud-02, .text-soundcloud-02, .c-soundcloud-text-02, .text-soundcloud-text-02 { color: rgba(255, 51, 0, 0.2); }
.c-soundcloud-03, .text-soundcloud-03, .c-soundcloud-text-03, .text-soundcloud-text-03 { color: rgba(255, 51, 0, 0.3); }
.c-soundcloud-04, .text-soundcloud-04, .c-soundcloud-text-04, .text-soundcloud-text-04 { color: rgba(255, 51, 0, 0.4); }
.c-soundcloud-05, .text-soundcloud-05, .c-soundcloud-text-05, .text-soundcloud-text-05 { color: rgba(255, 51, 0, 0.5); }
.c-soundcloud-06, .text-soundcloud-06, .c-soundcloud-text-06, .text-soundcloud-text-06 { color: rgba(255, 51, 0, 0.6); }
.c-soundcloud-07, .text-soundcloud-07, .c-soundcloud-text-07, .text-soundcloud-text-07 { color: rgba(255, 51, 0, 0.7); }
.c-soundcloud-08, .text-soundcloud-08, .c-soundcloud-text-08, .text-soundcloud-text-08 { color: rgba(255, 51, 0, 0.8); }
.c-soundcloud-09, .text-soundcloud-09, .c-soundcloud-text-09, .text-soundcloud-text-09 { color: rgba(255, 51, 0, 0.9); }
.c-soundcloud-10, .text-soundcloud-10, .c-soundcloud-text-10, .text-soundcloud-text-10 { color: rgba(255, 51, 0, 1.0); }

/* Periscope */
.c-periscope, .text-periscope, .c-periscope-text, .text-periscope-text { color: #40a4c4; }
.c-periscope-light, .text-periscope-light, .c-periscope-text-light, .text-periscope-text-light { color: #ffffff; }
.c-periscope-01, .text-periscope-01, .c-periscope-text-01, .text-periscope-text-01 { color: rgba(64, 164, 196, 0.1); }
.c-periscope-02, .text-periscope-02, .c-periscope-text-02, .text-periscope-text-02 { color: rgba(64, 164, 196, 0.2); }
.c-periscope-03, .text-periscope-03, .c-periscope-text-03, .text-periscope-text-03 { color: rgba(64, 164, 196, 0.3); }
.c-periscope-04, .text-periscope-04, .c-periscope-text-04, .text-periscope-text-04 { color: rgba(64, 164, 196, 0.4); }
.c-periscope-05, .text-periscope-05, .c-periscope-text-05, .text-periscope-text-05 { color: rgba(64, 164, 196, 0.5); }
.c-periscope-06, .text-periscope-06, .c-periscope-text-06, .text-periscope-text-06 { color: rgba(64, 164, 196, 0.6); }
.c-periscope-07, .text-periscope-07, .c-periscope-text-07, .text-periscope-text-07 { color: rgba(64, 164, 196, 0.7); }
.c-periscope-08, .text-periscope-08, .c-periscope-text-08, .text-periscope-text-08 { color: rgba(64, 164, 196, 0.8); }
.c-periscope-09, .text-periscope-09, .c-periscope-text-09, .text-periscope-text-09 { color: rgba(64, 164, 196, 0.9); }
.c-periscope-10, .text-periscope-10, .c-periscope-text-10, .text-periscope-text-10 { color: rgba(64, 164, 196, 1.0); }

/* Messenger */
.c-messenger, .text-messenger, .c-messenger-text, .text-messenger-text { color: #00b2ff; }
.c-messenger-light, .text-messenger-light, .c-messenger-text-light, .text-messenger-text-light { color: #ffffff; }
.c-messenger-01, .text-messenger-01, .c-messenger-text-01, .text-messenger-text-01 { color: rgba(0, 178, 255, 0.1); }
.c-messenger-02, .text-messenger-02, .c-messenger-text-02, .text-messenger-text-02 { color: rgba(0, 178, 255, 0.2); }
.c-messenger-03, .text-messenger-03, .c-messenger-text-03, .text-messenger-text-03 { color: rgba(0, 178, 255, 0.3); }
.c-messenger-04, .text-messenger-04, .c-messenger-text-04, .text-messenger-text-04 { color: rgba(0, 178, 255, 0.4); }
.c-messenger-05, .text-messenger-05, .c-messenger-text-05, .text-messenger-text-05 { color: rgba(0, 178, 255, 0.5); }
.c-messenger-06, .text-messenger-06, .c-messenger-text-06, .text-messenger-text-06 { color: rgba(0, 178, 255, 0.6); }
.c-messenger-07, .text-messenger-07, .c-messenger-text-07, .text-messenger-text-07 { color: rgba(0, 178, 255, 0.7); }
.c-messenger-08, .text-messenger-08, .c-messenger-text-08, .text-messenger-text-08 { color: rgba(0, 178, 255, 0.8); }
.c-messenger-09, .text-messenger-09, .c-messenger-text-09, .text-messenger-text-09 { color: rgba(0, 178, 255, 0.9); }
.c-messenger-10, .text-messenger-10, .c-messenger-text-10, .text-messenger-text-10 { color: rgba(0, 178, 255, 1.0); }

/* WeChat */
.c-wechat, .text-wechat, .c-wechat-text, .text-wechat-text { color: #07c160; }
.c-wechat-light, .text-wechat-light, .c-wechat-text-light, .text-wechat-text-light { color: #ffffff; }
.c-wechat-01, .text-wechat-01, .c-wechat-text-01, .text-wechat-text-01 { color: rgba(7, 193, 96, 0.1); }
.c-wechat-02, .text-wechat-02, .c-wechat-text-02, .text-wechat-text-02 { color: rgba(7, 193, 96, 0.2); }
.c-wechat-03, .text-wechat-03, .c-wechat-text-03, .text-wechat-text-03 { color: rgba(7, 193, 96, 0.3); }
.c-wechat-04, .text-wechat-04, .c-wechat-text-04, .text-wechat-text-04 { color: rgba(7, 193, 96, 0.4); }
.c-wechat-05, .text-wechat-05, .c-wechat-text-05, .text-wechat-text-05 { color: rgba(7, 193, 96, 0.5); }
.c-wechat-06, .text-wechat-06, .c-wechat-text-06, .text-wechat-text-06 { color: rgba(7, 193, 96, 0.6); }
.c-wechat-07, .text-wechat-07, .c-wechat-text-07, .text-wechat-text-07 { color: rgba(7, 193, 96, 0.7); }
.c-wechat-08, .text-wechat-08, .c-wechat-text-08, .text-wechat-text-08 { color: rgba(7, 193, 96, 0.8); }
.c-wechat-09, .text-wechat-09, .c-wechat-text-09, .text-wechat-text-09 { color: rgba(7, 193, 96, 0.9); }
.c-wechat-10, .text-wechat-10, .c-wechat-text-10, .text-wechat-text-10 { color: rgba(7, 193, 96, 1.0); }

/* Line */
.c-line, .text-line, .c-line-text, .text-line-text { color: #00c300; }
.c-line-light, .text-line-light, .c-line-text-light, .text-line-text-light { color: #ffffff; }
.c-line-01, .text-line-01, .c-line-text-01, .text-line-text-01 { color: rgba(0, 195, 0, 0.1); }
.c-line-02, .text-line-02, .c-line-text-02, .text-line-text-02 { color: rgba(0, 195, 0, 0.2); }
.c-line-03, .text-line-03, .c-line-text-03, .text-line-text-03 { color: rgba(0, 195, 0, 0.3); }
.c-line-04, .text-line-04, .c-line-text-04, .text-line-text-04 { color: rgba(0, 195, 0, 0.4); }
.c-line-05, .text-line-05, .c-line-text-05, .text-line-text-05 { color: rgba(0, 195, 0, 0.5); }
.c-line-06, .text-line-06, .c-line-text-06, .text-line-text-06 { color: rgba(0, 195, 0, 0.6); }
.c-line-07, .text-line-07, .c-line-text-07, .text-line-text-07 { color: rgba(0, 195, 0, 0.7); }
.c-line-08, .text-line-08, .c-line-text-08, .text-line-text-08 { color: rgba(0, 195, 0, 0.8); }
.c-line-09, .text-line-09, .c-line-text-09, .text-line-text-09 { color: rgba(0, 195, 0, 0.9); }
.c-line-10, .text-line-10, .c-line-text-10, .text-line-text-10 { color: rgba(0, 195, 0, 1.0); }

/* ===== BASIC COLORS (.c- & .text-) ===== */
.c-white, .text-white { color: white; }
.c-black, .text-black { color: black; }
.c-transparent, .text-transparent { color: transparent; }
.c-silver, .text-silver { color: silver; }
.c-whitesmoke, .text-whitesmoke { color: whitesmoke; }
.c-gray, .text-gray { color: gray; }
.c-darkgray, .text-darkgray { color: darkgray; }
.c-dimgray, .text-dimgray { color: dimgray; }
.c-lightgray, .text-lightgray { color: lightgray; }

/* ===== REDS & PINKS (.c- & .text-) ===== */
.c-red, .text-red { color: red; }
.c-crimson, .text-crimson { color: crimson; }
.c-darkred, .text-darkred { color: darkred; }
.c-firebrick, .text-firebrick { color: firebrick; }
.c-indianred, .text-indianred { color: indianred; }
.c-lightcoral, .text-lightcoral { color: lightcoral; }
.c-lightpink, .text-lightpink { color: lightpink; }
.c-pink, .text-pink { color: pink; }
.c-rose, .text-rose { color: #ff007f; }
.c-tomato, .text-tomato { color: tomato; }
.c-salmon, .text-salmon { color: salmon; }

/* ===== BLUES (.c- & .text-) ===== */
.c-blue, .text-blue { color: blue; }
.c-darkblue, .text-darkblue { color: darkblue; }
.c-dodgerblue, .text-dodgerblue { color: dodgerblue; }
.c-lightblue, .text-lightblue { color: lightblue; }
.c-lightskyblue, .text-lightskyblue { color: lightskyblue; }
.c-mediumblue, .text-mediumblue { color: mediumblue; }
.c-midnightblue, .text-midnightblue { color: midnightblue; }
.c-royalblue, .text-royalblue { color: royalblue; }
.c-skyblue, .text-skyblue { color: skyblue; }
.c-steelblue, .text-steelblue { color: steelblue; }
.c-turquoise, .text-turquoise { color: turquoise; }
.c-cyan, .text-cyan { color: cyan; }
.c-lightcyan, .text-lightcyan { color: lightcyan; }
.c-navy, .text-navy { color: navy; }

/* ===== GREENS (.c- & .text-) ===== */
.c-green, .text-green { color: green; }
.c-darkgreen, .text-darkgreen { color: darkgreen; }
.c-darkolivegreen, .text-darkolivegreen { color: darkolivegreen; }
.c-forestgreen, .text-forestgreen { color: forestgreen; }
.c-greenyellow, .text-greenyellow { color: greenyellow; }
.c-lime, .text-lime { color: lime; }
.c-limegreen, .text-limegreen { color: limegreen; }
.c-lightgreen, .text-lightgreen { color: lightgreen; }
.c-mediumseagreen, .text-mediumseagreen { color: mediumseagreen; }
.c-olivedrab, .text-olivedrab { color: olivedrab; }
.c-palegreen, .text-palegreen { color: palegreen; }
.c-seagreen, .text-seagreen { color: seagreen; }
.c-springgreen, .text-springgreen { color: springgreen; }
.c-yellowgreen, .text-yellowgreen { color: yellowgreen; }
.c-teal, .text-teal { color: teal; }
.c-darkcyan, .text-darkcyan { color: darkcyan; }

/* ===== YELLOWS & ORANGES (.c- & .text-) ===== */
.c-gold, .text-gold { color: #ffd700; }
.c-goldenrod, .text-goldenrod { color: goldenrod; }
.c-darkgoldenrod, .text-darkgoldenrod { color: darkgoldenrod; }
.c-lightgoldenrodyellow, .text-lightgoldenrodyellow { color: lightgoldenrodyellow; }
.c-lemonchiffon, .text-lemonchiffon { color: lemonchiffon; }
.c-palegoldenrod, .text-palegoldenrod { color: palegoldenrod; }
.c-yellow, .text-yellow { color: yellow; }
.c-lightyellow, .text-lightyellow { color: lightyellow; }
.c-orange, .text-orange { color: orange; }
.c-darkorange, .text-darkorange { color: darkorange; }
.c-coral, .text-coral { color: coral; }
.c-peachpuff, .text-peachpuff { color: peachpuff; }

/* ===== PURPLES & VIOLETS (.c- & .text-) ===== */
.c-purple, .text-purple { color: rgb(108, 92, 230); }
.c-darkmagenta, .text-darkmagenta { color: darkmagenta; }
.c-darkorchid, .text-darkorchid { color: darkorchid; }
.c-darkviolet, .text-darkviolet { color: darkviolet; }
.c-fuchsia, .text-fuchsia { color: fuchsia; }
.c-indigo, .text-indigo { color: indigo; }
.c-lavender, .text-lavender { color: lavender; }
.c-lavenderblush, .text-lavenderblush { color: lavenderblush; }
.c-mediumorchid, .text-mediumorchid { color: mediumorchid; }
.c-mediumpurple, .text-mediumpurple { color: mediumpurple; }
.c-magenta, .text-magenta { color: magenta; }
.c-plum, .text-plum { color: plum; }
.c-thistle, .text-thistle { color: thistle; }
.c-violet, .text-violet { color: violet; }
.c-blueviolet, .text-blueviolet { color: blueviolet; }
.c-mediumslateblue, .text-mediumslateblue { color: mediumslateblue; }
.c-slateblue, .text-slateblue { color: slateblue; }

/* ===== BROWNS & BEIGES (.c- & .text-) ===== */
.c-brown, .text-brown { color: brown; }
.c-beige, .text-beige { color: beige; }
.c-bisque, .text-bisque { color: bisque; }
.c-blanchedalmond, .text-blanchedalmond { color: blanchedalmond; }
.c-burlywood, .text-burlywood { color: burlywood; }
.c-chocolate, .text-chocolate { color: chocolate; }
.c-cornsilk, .text-cornsilk { color: cornsilk; }
.c-darkkhaki, .text-darkkhaki { color: darkkhaki; }
.c-gainsboro, .text-gainsboro { color: gainsboro; }
.c-honeydew, .text-honeydew { color: honeydew; }
.c-ivory, .text-ivory { color: ivory; }
.c-khaki, .text-khaki { color: khaki; }
.c-moccasin, .text-moccasin { color: moccasin; }
.c-navajowhite, .text-navajowhite { color: navajowhite; }
.c-oldlace, .text-oldlace { color: oldlace; }
.c-peru, .text-peru { color: peru; }
.c-sandybrown, .text-sandybrown { color: sandybrown; }
.c-sienna, .text-sienna { color: sienna; }
.c-tan, .text-tan { color: tan; }
.c-wheat, .text-wheat { color: wheat; }

/* ===== SPECIAL (.c- & .text-) ===== */
.c-inherit, .text-inherit { color: inherit; }
.c-current, .text-current { color: currentColor; }
.c-green, .text-green { color: var(--green); }
.c-dark-gold, .text-dark-gold { color: var(--dark-gold); }
.c-primary-text, .text-primary-text { color: var(--primary-text); }
.c-secondary-text, .text-secondary-text { color: var(--secondary-text); }
.c-dim, .text-dim { color: #708090; }
/* Text Decoration Utilities */
.text-underline { text-decoration: underline; }
.text-overline { text-decoration: overline; }
.text-line-through, .text-strike { text-decoration: line-through; }
.text-none { text-decoration: none; }

/* Text Transform Utilities */
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

/* Text Alignment */
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }

/* Font Weights */
.text-thin, .fw-100 { font-weight: 100; }
.text-light, .fw-300 { font-weight: 300; }
.text-normal, .fw-400 { font-weight: 400; }
.text-medium, .fw-500 { font-weight: 500; }
.text-semibold, .fw-600 { font-weight: 600; }
.text-bold, .fw-700 { font-weight: 700; }
.text-extrabold, .fw-800 { font-weight: 800; }
.text-black-weight, .fw-900 { font-weight: 900; }

/* Text Overflow */
.text-ellipsis { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
.text-clip { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: clip; 
}
.text-wrap { white-space: normal; }
.text-nowrap { white-space: nowrap; }
.text-pre { white-space: pre; }
.text-pre-line { white-space: pre-line; }
.text-pre-wrap { white-space: pre-wrap; }

/* Line Height */
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }

/* Letter Spacing */
.tracking-tight { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.no-select, .user-select-none {
    user-select: none;
    -webkit-user-select: none;
}
.no-resize, .resize-none {
    resize: none;
}
.text-bold, .text-b, .bold, .fw-bold {
    font-weight: bold;
}
.average-bold, .fw-600 {
    font-weight: 600;
}
.visibility-hidden, .hidden {
    visibility: hidden !important;
}
.visibility-visible, .visible {
    visibility: visible;
}

/* display */
.display-none, .d-none {
    display: none !important;
}
.block, .d-block {
    display: block;
}
.inline-block, .d-inline-block {
    display: inline-block;
}

.row, .flex-row {
    display: flex;
    flex-direction: row;
}
.flex-auto, .flex-1-0-auto {
    flex: 1 0 auto;
}
.flex-grow-0, .grow-0 {
    flex-grow: 0;
}
.flex-grow-1, .grow-1 {
    flex-grow: 1;
}
.flex-grow-auto, .grow-auto {
    flex-grow: auto;
}
.flex-grow-2, .grow-2 {
    flex-grow: 2;
}
.flex-shrink-0, .shrink-0 {
    flex-shrink: 0;
}
.flex-shrink-1, .shrink-1 {
    flex-shrink: 1;
}
.flex-shrink-2, .shrink-2 {
    flex-shrink: 2;
}
.flex-shrink-auto, .shrink-auto {
    flex-shrink: auto;
}
.flex-basis-0, .basis-0 {
    flex-basis: 0;
}
.flex-basis-1, .basis-1 {
    flex-basis: 1;
}
.flex-basis-2, .basis-2 {
    flex-basis: 2;
}
.flex-basis-auto, .basis-auto {
    flex-basis: auto;
}
.flex-wrap, .wrap {
    flex-wrap: wrap;
}
.column, .flex-column {
    display: flex;
    flex-direction: column;
    break-inside: avoid;
    page-break-inside: avoid;
}
.space-between, .justify-between {
    justify-content: space-between;
}

/* ===== ADDITIONAL DISPLAY/FLEX UTILITIES ===== */

/* Display */
.d-inline { display: inline; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }
.d-inline-grid { display: inline-grid; }
.d-table { display: table; }
.d-table-cell { display: table-cell; }
.d-table-row { display: table-row; }
.d-contents { display: contents; }
.d-flow-root { display: flow-root; }

/* Flex Direction */
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }

/* Flex Wrap */
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }

/* Justify Content */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* Align Items */
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

/* Align Self */
.self-auto { align-self: auto; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-stretch { align-self: stretch; }
.self-baseline { align-self: baseline; }

/* Align Content */
.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-center { align-content: center; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
.content-evenly { align-content: space-evenly; }
.content-stretch { align-content: stretch; }

/* Gap (Flex/Grid Gap) */
.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }

.gap-x-0 { column-gap: 0; }
.gap-x-1 { column-gap: 0.25rem; }
.gap-x-2 { column-gap: 0.5rem; }
.gap-x-3 { column-gap: 0.75rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-x-8 { column-gap: 2rem; }
.gap-x-10 { column-gap: 2.5rem; }
.gap-x-12 { column-gap: 3rem; }
.gap-x-16 { column-gap: 4rem; }

.gap-y-0 { row-gap: 0; }
.gap-y-1 { row-gap: 0.25rem; }
.gap-y-2 { row-gap: 0.5rem; }
.gap-y-3 { row-gap: 0.75rem; }
.gap-y-4 { row-gap: 1rem; }
.gap-y-5 { row-gap: 1.25rem; }
.gap-y-6 { row-gap: 1.5rem; }
.gap-y-8 { row-gap: 2rem; }
.gap-y-10 { row-gap: 2.5rem; }
.gap-y-12 { row-gap: 3rem; }
.gap-y-16 { row-gap: 4rem; }

/* Order */
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-first { order: -9999; }
.order-last { order: 9999; }
.order-none { order: 0; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.static { position: static; }

/* Top / Right / Bottom / Left */
.top-0 { top: 0; }
.top-auto { top: auto; }
.right-0 { right: 0; }
.right-auto { right: auto; }
.bottom-0 { bottom: 0; }
.bottom-auto { bottom: auto; }
.left-0 { left: 0; }
.left-auto { left: auto; }

.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.inset-auto { top: auto; right: auto; bottom: auto; left: auto; }

/* Z-Index */
.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-auto { z-index: auto; }
.z-999 { z-index: 999; }
.z-9999 { z-index: 9999; }

/* Overflow */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-x-visible { overflow-x: visible; }
.overflow-x-scroll { overflow-x: scroll; }
.overflow-y-auto { overflow-y: auto; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-y-visible { overflow-y: visible; }
.overflow-y-scroll { overflow-y: scroll; }

/* Object Fit */
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.object-fill { object-fit: fill; }
.object-none { object-fit: none; }
.object-scale-down { object-fit: scale-down; }

/* Object Position */
.object-top { object-position: top; }
.object-bottom { object-position: bottom; }
.object-left { object-position: left; }
.object-right { object-position: right; }
.object-center { object-position: center; }

/* Cursor */
.cursor-auto { cursor: auto; }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.cursor-wait { cursor: wait; }
.cursor-text { cursor: text; }
.cursor-move { cursor: move; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }
.cursor-zoom-in { cursor: zoom-in; }
.cursor-zoom-out { cursor: zoom-out; }

/* Pointer Events */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* Opacity */
.opacity-0 { opacity: 0; }
.opacity-5 { opacity: 0.05; }
.opacity-10 { opacity: 0.1; }
.opacity-20 { opacity: 0.2; }
.opacity-25 { opacity: 0.25; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-75 { opacity: 0.75; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.opacity-100 { opacity: 1; }
.g-1, .g-1px { gap: 1px; }
.g-2, .g-2px { gap: 2px; }
.g-3, .g-3px { gap: 3px; }
.g-4, .g-4px { gap: 4px; }
.g-5, .g-5px { gap: 5px; }
.g-6, .g-6px { gap: 6px; }
.g-7, .g-7px { gap: 7px; }
.g-8, .g-8px { gap: 8px; }
.g-9, .g-9px { gap: 9px; }
.g-10, .g-10px { gap: 10px; }
.g-11, .g-11px { gap: 11px; }
.g-12, .g-12px { gap: 12px; }
.g-13, .g-13px { gap: 13px; }
.g-14, .g-14px { gap: 14px; }
.g-15, .g-15px { gap: 15px; }
.g-16, .g-16px { gap: 16px; }
.g-17, .g-17px { gap: 17px; }
.g-18, .g-18px { gap: 18px; }
.g-19, .g-19px { gap: 19px; }
.g-20, .g-20px { gap: 20px; }
.g-21, .g-21px { gap: 21px; }
.g-22, .g-22px { gap: 22px; }
.g-23, .g-23px { gap: 23px; }
.g-24, .g-24px { gap: 24px; }
.g-25, .g-25px { gap: 25px; }
.g-26, .g-26px { gap: 26px; }
.g-27, .g-27px { gap: 27px; }
.g-28, .g-28px { gap: 28px; }
.g-29, .g-29px { gap: 29px; }
.g-30, .g-30px { gap: 30px; }
.g-31, .g-31px { gap: 31px; }
.g-32, .g-32px { gap: 32px; }
.g-33, .g-33px { gap: 33px; }
.g-34, .g-34px { gap: 34px; }
.g-35, .g-35px { gap: 35px; }
.g-36, .g-36px { gap: 36px; }
.g-37, .g-37px { gap: 37px; }
.g-38, .g-38px { gap: 38px; }
.g-39, .g-39px { gap: 39px; }
.g-40, .g-40px { gap: 40px; }
.g-41, .g-41px { gap: 41px; }
.g-42, .g-42px { gap: 42px; }
.g-43, .g-43px { gap: 43px; }
.g-44, .g-44px { gap: 44px; }
.g-45, .g-45px { gap: 45px; }
.g-46, .g-46px { gap: 46px; }
.g-47, .g-47px { gap: 47px; }
.g-48, .g-48px { gap: 48px; }
.g-49, .g-49px { gap: 49px; }
.g-50, .g-50px { gap: 50px; }
.g-51, .g-51px { gap: 51px; }
.g-52, .g-52px { gap: 52px; }
.g-53, .g-53px { gap: 53px; }
.g-54, .g-54px { gap: 54px; }
.g-55, .g-55px { gap: 55px; }
.g-56, .g-56px { gap: 56px; }
.g-57, .g-57px { gap: 57px; }
.g-58, .g-58px { gap: 58px; }
.g-59, .g-59px { gap: 59px; }
.g-60, .g-60px { gap: 60px; }
.g-61, .g-61px { gap: 61px; }
.g-62, .g-62px { gap: 62px; }
.g-63, .g-63px { gap: 63px; }
.g-64, .g-64px { gap: 64px; }
.g-65, .g-65px { gap: 65px; }
.g-66, .g-66px { gap: 66px; }
.g-67, .g-67px { gap: 67px; }
.g-68, .g-68px { gap: 68px; }
.g-69, .g-69px { gap: 69px; }
.g-70, .g-70px { gap: 70px; }
.g-71, .g-71px { gap: 71px; }
.g-72, .g-72px { gap: 72px; }
.g-73, .g-73px { gap: 73px; }
.g-74, .g-74px { gap: 74px; }
.g-75, .g-75px { gap: 75px; }
.g-76, .g-76px { gap: 76px; }
.g-77, .g-77px { gap: 77px; }
.g-78, .g-78px { gap: 78px; }
.g-79, .g-79px { gap: 79px; }
.g-80, .g-80px { gap: 80px; }
.g-81, .g-81px { gap: 81px; }
.g-82, .g-82px { gap: 82px; }
.g-83, .g-83px { gap: 83px; }
.g-84, .g-84px { gap: 84px; }
.g-85, .g-85px { gap: 85px; }
.g-86, .g-86px { gap: 86px; }
.g-87, .g-87px { gap: 87px; }
.g-88, .g-88px { gap: 88px; }
.g-89, .g-89px { gap: 89px; }
.g-90, .g-90px { gap: 90px; }
.g-91, .g-91px { gap: 91px; }
.g-92, .g-92px { gap: 92px; }
.g-93, .g-93px { gap: 93px; }
.g-94, .g-94px { gap: 94px; }
.g-95, .g-95px { gap: 95px; }
.g-96, .g-96px { gap: 96px; }
.g-97, .g-97px { gap: 97px; }
.g-98, .g-98px { gap: 98px; }
.g-99, .g-99px { gap: 99px; }
.g-100, .g-100px { gap: 100px; }
.grid {
    display: grid;
}

/* Responsive Grid - all values 1-50px */
.responsive-grid-1px { grid-template-columns: repeat(auto-fit, minmax(1px, 1fr)); }
.responsive-grid-2px { grid-template-columns: repeat(auto-fit, minmax(2px, 1fr)); }
.responsive-grid-3px { grid-template-columns: repeat(auto-fit, minmax(3px, 1fr)); }
.responsive-grid-4px { grid-template-columns: repeat(auto-fit, minmax(4px, 1fr)); }
.responsive-grid-5px { grid-template-columns: repeat(auto-fit, minmax(5px, 1fr)); }
.responsive-grid-6px { grid-template-columns: repeat(auto-fit, minmax(6px, 1fr)); }
.responsive-grid-7px { grid-template-columns: repeat(auto-fit, minmax(7px, 1fr)); }
.responsive-grid-8px { grid-template-columns: repeat(auto-fit, minmax(8px, 1fr)); }
.responsive-grid-9px { grid-template-columns: repeat(auto-fit, minmax(9px, 1fr)); }
.responsive-grid-10px { grid-template-columns: repeat(auto-fit, minmax(10px, 1fr)); }
.responsive-grid-11px { grid-template-columns: repeat(auto-fit, minmax(11px, 1fr)); }
.responsive-grid-12px { grid-template-columns: repeat(auto-fit, minmax(12px, 1fr)); }
.responsive-grid-13px { grid-template-columns: repeat(auto-fit, minmax(13px, 1fr)); }
.responsive-grid-14px { grid-template-columns: repeat(auto-fit, minmax(14px, 1fr)); }
.responsive-grid-15px { grid-template-columns: repeat(auto-fit, minmax(15px, 1fr)); }
.responsive-grid-16px { grid-template-columns: repeat(auto-fit, minmax(16px, 1fr)); }
.responsive-grid-17px { grid-template-columns: repeat(auto-fit, minmax(17px, 1fr)); }
.responsive-grid-18px { grid-template-columns: repeat(auto-fit, minmax(18px, 1fr)); }
.responsive-grid-19px { grid-template-columns: repeat(auto-fit, minmax(19px, 1fr)); }
.responsive-grid-20px { grid-template-columns: repeat(auto-fit, minmax(20px, 1fr)); }
.responsive-grid-21px { grid-template-columns: repeat(auto-fit, minmax(21px, 1fr)); }
.responsive-grid-22px { grid-template-columns: repeat(auto-fit, minmax(22px, 1fr)); }
.responsive-grid-23px { grid-template-columns: repeat(auto-fit, minmax(23px, 1fr)); }
.responsive-grid-24px { grid-template-columns: repeat(auto-fit, minmax(24px, 1fr)); }
.responsive-grid-25px { grid-template-columns: repeat(auto-fit, minmax(25px, 1fr)); }
.responsive-grid-26px { grid-template-columns: repeat(auto-fit, minmax(26px, 1fr)); }
.responsive-grid-27px { grid-template-columns: repeat(auto-fit, minmax(27px, 1fr)); }
.responsive-grid-28px { grid-template-columns: repeat(auto-fit, minmax(28px, 1fr)); }
.responsive-grid-29px { grid-template-columns: repeat(auto-fit, minmax(29px, 1fr)); }
.responsive-grid-30px { grid-template-columns: repeat(auto-fit, minmax(30px, 1fr)); }
.responsive-grid-31px { grid-template-columns: repeat(auto-fit, minmax(31px, 1fr)); }
.responsive-grid-32px { grid-template-columns: repeat(auto-fit, minmax(32px, 1fr)); }
.responsive-grid-33px { grid-template-columns: repeat(auto-fit, minmax(33px, 1fr)); }
.responsive-grid-34px { grid-template-columns: repeat(auto-fit, minmax(34px, 1fr)); }
.responsive-grid-35px { grid-template-columns: repeat(auto-fit, minmax(35px, 1fr)); }
.responsive-grid-36px { grid-template-columns: repeat(auto-fit, minmax(36px, 1fr)); }
.responsive-grid-37px { grid-template-columns: repeat(auto-fit, minmax(37px, 1fr)); }
.responsive-grid-38px { grid-template-columns: repeat(auto-fit, minmax(38px, 1fr)); }
.responsive-grid-39px { grid-template-columns: repeat(auto-fit, minmax(39px, 1fr)); }
.responsive-grid-40px { grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); }
.responsive-grid-41px { grid-template-columns: repeat(auto-fit, minmax(41px, 1fr)); }
.responsive-grid-42px { grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)); }
.responsive-grid-43px { grid-template-columns: repeat(auto-fit, minmax(43px, 1fr)); }
.responsive-grid-44px { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); }
.responsive-grid-45px { grid-template-columns: repeat(auto-fit, minmax(45px, 1fr)); }
.responsive-grid-46px { grid-template-columns: repeat(auto-fit, minmax(46px, 1fr)); }
.responsive-grid-47px { grid-template-columns: repeat(auto-fit, minmax(47px, 1fr)); }
.responsive-grid-48px { grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); }
.responsive-grid-49px { grid-template-columns: repeat(auto-fit, minmax(49px, 1fr)); }
.responsive-grid-50px { grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); }

/* Your existing responsive-grid classes */
.responsive-grid-100px { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
.responsive-grid-200px { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.responsive-grid-250px { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.responsive-grid-300px { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.responsive-grid-350px { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }
.responsive-grid-400px { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
.responsive-grid-450px { grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); }
.responsive-grid-500px { grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); }
.responsive-grid-1000px { grid-template-columns: repeat(auto-fit, minmax(1000px, 1fr)); }

/* Grid columns - all values 1-50 */
.grid-1 { grid-template-columns: repeat(1, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.grid-7 { grid-template-columns: repeat(7, 1fr); }
.grid-8 { grid-template-columns: repeat(8, 1fr); }
.grid-9 { grid-template-columns: repeat(9, 1fr); }
.grid-10 { grid-template-columns: repeat(10, 1fr); }
.grid-11 { grid-template-columns: repeat(11, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }
.grid-13 { grid-template-columns: repeat(13, 1fr); }
.grid-14 { grid-template-columns: repeat(14, 1fr); }
.grid-15 { grid-template-columns: repeat(15, 1fr); }
.grid-16 { grid-template-columns: repeat(16, 1fr); }
.grid-17 { grid-template-columns: repeat(17, 1fr); }
.grid-18 { grid-template-columns: repeat(18, 1fr); }
.grid-19 { grid-template-columns: repeat(19, 1fr); }
.grid-20 { grid-template-columns: repeat(20, 1fr); }
.grid-21 { grid-template-columns: repeat(21, 1fr); }
.grid-22 { grid-template-columns: repeat(22, 1fr); }
.grid-23 { grid-template-columns: repeat(23, 1fr); }
.grid-24 { grid-template-columns: repeat(24, 1fr); }
.grid-25 { grid-template-columns: repeat(25, 1fr); }
.grid-26 { grid-template-columns: repeat(26, 1fr); }
.grid-27 { grid-template-columns: repeat(27, 1fr); }
.grid-28 { grid-template-columns: repeat(28, 1fr); }
.grid-29 { grid-template-columns: repeat(29, 1fr); }
.grid-30 { grid-template-columns: repeat(30, 1fr); }
.grid-31 { grid-template-columns: repeat(31, 1fr); }
.grid-32 { grid-template-columns: repeat(32, 1fr); }
.grid-33 { grid-template-columns: repeat(33, 1fr); }
.grid-34 { grid-template-columns: repeat(34, 1fr); }
.grid-35 { grid-template-columns: repeat(35, 1fr); }
.grid-36 { grid-template-columns: repeat(36, 1fr); }
.grid-37 { grid-template-columns: repeat(37, 1fr); }
.grid-38 { grid-template-columns: repeat(38, 1fr); }
.grid-39 { grid-template-columns: repeat(39, 1fr); }
.grid-40 { grid-template-columns: repeat(40, 1fr); }
.grid-41 { grid-template-columns: repeat(41, 1fr); }
.grid-42 { grid-template-columns: repeat(42, 1fr); }
.grid-43 { grid-template-columns: repeat(43, 1fr); }
.grid-44 { grid-template-columns: repeat(44, 1fr); }
.grid-45 { grid-template-columns: repeat(45, 1fr); }
.grid-46 { grid-template-columns: repeat(46, 1fr); }
.grid-47 { grid-template-columns: repeat(47, 1fr); }
.grid-48 { grid-template-columns: repeat(48, 1fr); }
.grid-49 { grid-template-columns: repeat(49, 1fr); }
.grid-50 { grid-template-columns: repeat(50, 1fr); }

.grid-full { grid-column: 1/-1; }

.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.justify-center { align-items: center; justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-start { justify-content: flex-start; }
.place-center { place-items: center; }
/* rotate */
.rotate-90,.rotate-90deg,.rotate-positive-90,.rotate-positive-90deg{
    transform:rotate(90deg);
}

.rotate-negative-90,.rotate-negative-90deg{
    transform:rotate(-90deg);
}
/* status badge */
.status, .badge {
    width: fit-content;
    height: fit-content;
    padding: 0.3rem 0.9rem;
    user-select: none;
    -webkit-user-select: none;
    font-weight: 600;
    white-space: nowrap;
}

.status.green, .badge.green, .status-green, .badge-green {
    background: rgba(224, 244, 237, 0.1);
    color: #00ffb3;
    border-radius: 1000px;
}

.status.red, .badge.red, .status-red, .badge-red {
    background: rgba(255, 232, 236, 0.1);
    color: #ff0d00;
    border-radius: 1000px;
}

.status.gold, .badge.gold, .status-gold, .badge-gold {
    background: rgba(255, 240, 221, 0.1);
    color: #ffd700;
    border-radius: 1000px;
}

.status.primary, .badge.primary, .status-primary, .badge-primary {
    background: var(--primary-02);
    color: var(--primary);
    border-radius: 1000px;
}

.status.blue, .badge.blue, .status-blue, .badge-blue {
    background: rgba(0, 0, 255, 0.2);
    color: blue;
    border-radius: 1000px;
}

/* ===== ADDITIONAL STATUS VARIANTS ===== */

/* Status Colors */
.status-secondary, .badge-secondary {
    background: rgba(108, 117, 125, 0.2);
    color: #6c757d;
    border-radius: 1000px;
}

.status-success, .badge-success {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border-radius: 1000px;
}

.status-danger, .badge-danger {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
    border-radius: 1000px;
}

.status-warning, .badge-warning {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    border-radius: 1000px;
}

.status-info, .badge-info {
    background: rgba(23, 162, 184, 0.15);
    color: #17a2b8;
    border-radius: 1000px;
}

.status-dark, .badge-dark {
    background: rgba(52, 58, 64, 0.2);
    color: #343a40;
    border-radius: 1000px;
}

.status-light, .badge-light {
    background: rgba(248, 249, 250, 0.5);
    color: #6c757d;
    border-radius: 1000px;
}

.status-white, .badge-white {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-radius: 1000px;
}

.status-black, .badge-black {
    background: rgba(0, 0, 0, 0.2);
    color: #000000;
    border-radius: 1000px;
}

/* Status with specific colors */
.status-purple, .badge-purple {
    background: rgba(108, 92, 230, 0.15);
    color: #6c5ce6;
    border-radius: 1000px;
}

.status-pink, .badge-pink {
    background: rgba(255, 0, 127, 0.15);
    color: #ff007f;
    border-radius: 1000px;
}

.status-orange, .badge-orange {
    background: rgba(255, 165, 0, 0.15);
    color: #ffa500;
    border-radius: 1000px;
}

.status-teal, .badge-teal {
    background: rgba(0, 128, 128, 0.15);
    color: #008080;
    border-radius: 1000px;
}

.status-cyan, .badge-cyan {
    background: rgba(0, 255, 255, 0.15);
    color: #00ffff;
    border-radius: 1000px;
}

.status-indigo, .badge-indigo {
    background: rgba(75, 0, 130, 0.15);
    color: #4b0082;
    border-radius: 1000px;
}

.status-brown, .badge-brown {
    background: rgba(139, 69, 19, 0.15);
    color: #8b4513;
    border-radius: 1000px;
}

/* Status Sizes */
.status-sm, .badge-sm {
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
}

.status-md, .badge-md {
    padding: 0.3rem 0.9rem;
    font-size: 0.875rem;
}

.status-lg, .badge-lg {
    padding: 0.5rem 1.2rem;
    font-size: 1rem;
}

.status-xl, .badge-xl {
    padding: 0.7rem 1.5rem;
    font-size: 1.25rem;
}

/* Status with icons - dot indicators */
.status-dot, .badge-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.status-dot::before, .badge-dot::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

.status-dot.green::before, .badge-dot.green::before { background: #00ffb3; }
.status-dot.red::before, .badge-dot.red::before { background: #ff0d00; }
.status-dot.gold::before, .badge-dot.gold::before { background: #ffd700; }
.status-dot.primary::before, .badge-dot.primary::before { background: var(--primary); }
.status-dot.blue::before, .badge-dot.blue::before { background: blue; }
.status-dot.success::before, .badge-dot.success::before { background: #28a745; }
.status-dot.danger::before, .badge-dot.danger::before { background: #dc3545; }
.status-dot.warning::before, .badge-dot.warning::before { background: #ffc107; }
.status-dot.info::before, .badge-dot.info::before { background: #17a2b8; }
.status-dot.purple::before, .badge-dot.purple::before { background: #6c5ce6; }
.status-dot.pink::before, .badge-dot.pink::before { background: #ff007f; }
.status-dot.orange::before, .badge-dot.orange::before { background: #ffa500; }

/* Status with outline */
.status-outline, .badge-outline {
    background: transparent !important;
    border: 1px solid currentColor;
}

/* Status with pulse animation */
.status-pulse, .badge-pulse {
    animation: status-pulse 2s ease-in-out infinite;
}

@keyframes status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Status with glow */
.status-glow, .badge-glow {
    box-shadow: 0 0 10px rgba(0, 255, 179, 0.3);
}

.status-glow.green, .badge-glow.green {
    box-shadow: 0 0 10px rgba(0, 255, 179, 0.3);
}

.status-glow.red, .badge-glow.red {
    box-shadow: 0 0 10px rgba(255, 13, 0, 0.3);
}

.status-glow.gold, .badge-glow.gold {
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.status-glow.primary, .badge-glow.primary {
    box-shadow: 0 0 10px var(--primary-transparent);
}

.status-glow.blue, .badge-glow.blue {
    box-shadow: 0 0 10px rgba(0, 0, 255, 0.3);
}

.status-glow.success, .badge-glow.success {
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.3);
}

.status-glow.danger, .badge-glow.danger {
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.3);
}

.status-glow.warning, .badge-glow.warning {
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.3);
}

.status-glow.info, .badge-glow.info {
    box-shadow: 0 0 10px rgba(23, 162, 184, 0.3);
}

/* Status rounded variants */
.status-rounded, .badge-rounded {
    border-radius: 4px;
}

.status-pill, .badge-pill {
    border-radius: 1000px;
}

.status-square, .badge-square {
    border-radius: 0;
}
/* positioning */
.pos-fixed, .fixed {
    position: fixed !important;
}
.pos-stick, .pos-sticky, .sticky {
    position: sticky !important;
}

/* Z-Index - all values 1-10000 */
.z-index-1, .z-1 { z-index: 1; }
.z-index-2, .z-2 { z-index: 2; }
.z-index-3, .z-3 { z-index: 3; }
.z-index-4, .z-4 { z-index: 4; }
.z-index-5, .z-5 { z-index: 5; }
.z-index-6, .z-6 { z-index: 6; }
.z-index-7, .z-7 { z-index: 7; }
.z-index-8, .z-8 { z-index: 8; }
.z-index-9, .z-9 { z-index: 9; }
.z-index-10, .z-10 { z-index: 10; }
.z-index-20, .z-20 { z-index: 20; }
.z-index-30, .z-30 { z-index: 30; }
.z-index-40, .z-40 { z-index: 40; }
.z-index-50, .z-50 { z-index: 50; }
.z-index-60, .z-60 { z-index: 60; }
.z-index-70, .z-70 { z-index: 70; }
.z-index-80, .z-80 { z-index: 80; }
.z-index-90, .z-90 { z-index: 90; }
.z-index-100, .z-100 { z-index: 100; }
.z-index-200, .z-200 { z-index: 200; }
.z-index-300, .z-300 { z-index: 300; }
.z-index-400, .z-400 { z-index: 400; }
.z-index-500, .z-500 { z-index: 500; }
.z-index-600, .z-600 { z-index: 600; }
.z-index-700, .z-700 { z-index: 700; }
.z-index-800, .z-800 { z-index: 800; }
.z-index-900, .z-900 { z-index: 900; }
.z-index-1000, .z-1000 { z-index: 1000; }
.z-index-2000, .z-2000 { z-index: 2000; }
.z-index-3000, .z-3000 { z-index: 3000; }
.z-index-4000, .z-4000 { z-index: 4000; }
.z-index-5000, .z-5000 { z-index: 5000; }
.z-index-6000, .z-6000 { z-index: 6000; }
.z-index-7000, .z-7000 { z-index: 7000; }
.z-index-8000, .z-8000 { z-index: 8000; }
.z-index-9000, .z-9000 { z-index: 9000; }
.z-index-10000, .z-10000 { z-index: 10000; }
.z-index-auto, .z-auto { z-index: auto; }
.z-index-9999, .z-9999 { z-index: 9999; }

.stick-top, .sticky-top {
    top: 0;
    left: 0;
    right: 0;
}
.stick-bottom, .sticky-bottom {
    bottom: 0;
    left: 0;
    right: 0;
}
.stick-left, .sticky-left {
    left: 0;
}
.stick-right, .sticky-right {
    right: 0;
}

.pos-absolute, .absolute {
    position: absolute !important;
}
.pos-reletive, .pos-relative, .relative {
    position: relative !important;
}

/* Top positions - with px versions */
.top-0, .t-0, .top-0px, .t-0px { top: 0; }
.top-1, .t-1, .top-1px, .t-1px { top: 1px; }
.top-2, .t-2, .top-2px, .t-2px { top: 2px; }
.top-3, .t-3, .top-3px, .t-3px { top: 3px; }
.top-4, .t-4, .top-4px, .t-4px { top: 4px; }
.top-5, .t-5, .top-5px, .t-5px { top: 5px; }
.top-6, .t-6, .top-6px, .t-6px { top: 6px; }
.top-7, .t-7, .top-7px, .t-7px { top: 7px; }
.top-8, .t-8, .top-8px, .t-8px { top: 8px; }
.top-9, .t-9, .top-9px, .t-9px { top: 9px; }
.top-10, .t-10, .top-10px, .t-10px { top: 10px; }
.top-11, .t-11, .top-11px, .t-11px { top: 11px; }
.top-12, .t-12, .top-12px, .t-12px { top: 12px; }
.top-13, .t-13, .top-13px, .t-13px { top: 13px; }
.top-14, .t-14, .top-14px, .t-14px { top: 14px; }
.top-15, .t-15, .top-15px, .t-15px { top: 15px; }
.top-16, .t-16, .top-16px, .t-16px { top: 16px; }
.top-17, .t-17, .top-17px, .t-17px { top: 17px; }
.top-18, .t-18, .top-18px, .t-18px { top: 18px; }
.top-19, .t-19, .top-19px, .t-19px { top: 19px; }
.top-20, .t-20, .top-20px, .t-20px { top: 20px; }
.top-21, .t-21, .top-21px, .t-21px { top: 21px; }
.top-22, .t-22, .top-22px, .t-22px { top: 22px; }
.top-23, .t-23, .top-23px, .t-23px { top: 23px; }
.top-24, .t-24, .top-24px, .t-24px { top: 24px; }
.top-25, .t-25, .top-25px, .t-25px { top: 25px; }
.top-26, .t-26, .top-26px, .t-26px { top: 26px; }
.top-27, .t-27, .top-27px, .t-27px { top: 27px; }
.top-28, .t-28, .top-28px, .t-28px { top: 28px; }
.top-29, .t-29, .top-29px, .t-29px { top: 29px; }
.top-30, .t-30, .top-30px, .t-30px { top: 30px; }
.top-31, .t-31, .top-31px, .t-31px { top: 31px; }
.top-32, .t-32, .top-32px, .t-32px { top: 32px; }
.top-33, .t-33, .top-33px, .t-33px { top: 33px; }
.top-34, .t-34, .top-34px, .t-34px { top: 34px; }
.top-35, .t-35, .top-35px, .t-35px { top: 35px; }
.top-36, .t-36, .top-36px, .t-36px { top: 36px; }
.top-37, .t-37, .top-37px, .t-37px { top: 37px; }
.top-38, .t-38, .top-38px, .t-38px { top: 38px; }
.top-39, .t-39, .top-39px, .t-39px { top: 39px; }
.top-40, .t-40, .top-40px, .t-40px { top: 40px; }
.top-41, .t-41, .top-41px, .t-41px { top: 41px; }
.top-42, .t-42, .top-42px, .t-42px { top: 42px; }
.top-43, .t-43, .top-43px, .t-43px { top: 43px; }
.top-44, .t-44, .top-44px, .t-44px { top: 44px; }
.top-45, .t-45, .top-45px, .t-45px { top: 45px; }
.top-46, .t-46, .top-46px, .t-46px { top: 46px; }
.top-47, .t-47, .top-47px, .t-47px { top: 47px; }
.top-48, .t-48, .top-48px, .t-48px { top: 48px; }
.top-49, .t-49, .top-49px, .t-49px { top: 49px; }
.top-50, .t-50, .top-50px, .t-50px { top: 50px; }
.top-51, .t-51, .top-51px, .t-51px { top: 51px; }
.top-52, .t-52, .top-52px, .t-52px { top: 52px; }
.top-53, .t-53, .top-53px, .t-53px { top: 53px; }
.top-54, .t-54, .top-54px, .t-54px { top: 54px; }
.top-55, .t-55, .top-55px, .t-55px { top: 55px; }
.top-56, .t-56, .top-56px, .t-56px { top: 56px; }
.top-57, .t-57, .top-57px, .t-57px { top: 57px; }
.top-58, .t-58, .top-58px, .t-58px { top: 58px; }
.top-59, .t-59, .top-59px, .t-59px { top: 59px; }
.top-60, .t-60, .top-60px, .t-60px { top: 60px; }
.top-61, .t-61, .top-61px, .t-61px { top: 61px; }
.top-62, .t-62, .top-62px, .t-62px { top: 62px; }
.top-63, .t-63, .top-63px, .t-63px { top: 63px; }
.top-64, .t-64, .top-64px, .t-64px { top: 64px; }
.top-65, .t-65, .top-65px, .t-65px { top: 65px; }
.top-66, .t-66, .top-66px, .t-66px { top: 66px; }
.top-67, .t-67, .top-67px, .t-67px { top: 67px; }
.top-68, .t-68, .top-68px, .t-68px { top: 68px; }
.top-69, .t-69, .top-69px, .t-69px { top: 69px; }
.top-70, .t-70, .top-70px, .t-70px { top: 70px; }
.top-71, .t-71, .top-71px, .t-71px { top: 71px; }
.top-72, .t-72, .top-72px, .t-72px { top: 72px; }
.top-73, .t-73, .top-73px, .t-73px { top: 73px; }
.top-74, .t-74, .top-74px, .t-74px { top: 74px; }
.top-75, .t-75, .top-75px, .t-75px { top: 75px; }
.top-76, .t-76, .top-76px, .t-76px { top: 76px; }
.top-77, .t-77, .top-77px, .t-77px { top: 77px; }
.top-78, .t-78, .top-78px, .t-78px { top: 78px; }
.top-79, .t-79, .top-79px, .t-79px { top: 79px; }
.top-80, .t-80, .top-80px, .t-80px { top: 80px; }
.top-81, .t-81, .top-81px, .t-81px { top: 81px; }
.top-82, .t-82, .top-82px, .t-82px { top: 82px; }
.top-83, .t-83, .top-83px, .t-83px { top: 83px; }
.top-84, .t-84, .top-84px, .t-84px { top: 84px; }
.top-85, .t-85, .top-85px, .t-85px { top: 85px; }
.top-86, .t-86, .top-86px, .t-86px { top: 86px; }
.top-87, .t-87, .top-87px, .t-87px { top: 87px; }
.top-88, .t-88, .top-88px, .t-88px { top: 88px; }
.top-89, .t-89, .top-89px, .t-89px { top: 89px; }
.top-90, .t-90, .top-90px, .t-90px { top: 90px; }
.top-91, .t-91, .top-91px, .t-91px { top: 91px; }
.top-92, .t-92, .top-92px, .t-92px { top: 92px; }
.top-93, .t-93, .top-93px, .t-93px { top: 93px; }
.top-94, .t-94, .top-94px, .t-94px { top: 94px; }
.top-95, .t-95, .top-95px, .t-95px { top: 95px; }
.top-96, .t-96, .top-96px, .t-96px { top: 96px; }
.top-97, .t-97, .top-97px, .t-97px { top: 97px; }
.top-98, .t-98, .top-98px, .t-98px { top: 98px; }
.top-99, .t-99, .top-99px, .t-99px { top: 99px; }
.top-100, .t-100, .top-100px, .t-100px { top: 100px; }

.top-full, .t-full { top: 100%; }
.top-half, .t-half { top: 50%; }
.top-auto, .t-auto { top: auto; }

/* Bottom positions - with px versions */
.bottom-0, .b-0, .bottom-0px, .b-0px { bottom: 0; }
.bottom-1, .b-1, .bottom-1px, .b-1px { bottom: 1px; }
.bottom-2, .b-2, .bottom-2px, .b-2px { bottom: 2px; }
.bottom-3, .b-3, .bottom-3px, .b-3px { bottom: 3px; }
.bottom-4, .b-4, .bottom-4px, .b-4px { bottom: 4px; }
.bottom-5, .b-5, .bottom-5px, .b-5px { bottom: 5px; }
.bottom-6, .b-6, .bottom-6px, .b-6px { bottom: 6px; }
.bottom-7, .b-7, .bottom-7px, .b-7px { bottom: 7px; }
.bottom-8, .b-8, .bottom-8px, .b-8px { bottom: 8px; }
.bottom-9, .b-9, .bottom-9px, .b-9px { bottom: 9px; }
.bottom-10, .b-10, .bottom-10px, .b-10px { bottom: 10px; }
.bottom-11, .b-11, .bottom-11px, .b-11px { bottom: 11px; }
.bottom-12, .b-12, .bottom-12px, .b-12px { bottom: 12px; }
.bottom-13, .b-13, .bottom-13px, .b-13px { bottom: 13px; }
.bottom-14, .b-14, .bottom-14px, .b-14px { bottom: 14px; }
.bottom-15, .b-15, .bottom-15px, .b-15px { bottom: 15px; }
.bottom-16, .b-16, .bottom-16px, .b-16px { bottom: 16px; }
.bottom-17, .b-17, .bottom-17px, .b-17px { bottom: 17px; }
.bottom-18, .b-18, .bottom-18px, .b-18px { bottom: 18px; }
.bottom-19, .b-19, .bottom-19px, .b-19px { bottom: 19px; }
.bottom-20, .b-20, .bottom-20px, .b-20px { bottom: 20px; }
.bottom-21, .b-21, .bottom-21px, .b-21px { bottom: 21px; }
.bottom-22, .b-22, .bottom-22px, .b-22px { bottom: 22px; }
.bottom-23, .b-23, .bottom-23px, .b-23px { bottom: 23px; }
.bottom-24, .b-24, .bottom-24px, .b-24px { bottom: 24px; }
.bottom-25, .b-25, .bottom-25px, .b-25px { bottom: 25px; }
.bottom-26, .b-26, .bottom-26px, .b-26px { bottom: 26px; }
.bottom-27, .b-27, .bottom-27px, .b-27px { bottom: 27px; }
.bottom-28, .b-28, .bottom-28px, .b-28px { bottom: 28px; }
.bottom-29, .b-29, .bottom-29px, .b-29px { bottom: 29px; }
.bottom-30, .b-30, .bottom-30px, .b-30px { bottom: 30px; }
.bottom-31, .b-31, .bottom-31px, .b-31px { bottom: 31px; }
.bottom-32, .b-32, .bottom-32px, .b-32px { bottom: 32px; }
.bottom-33, .b-33, .bottom-33px, .b-33px { bottom: 33px; }
.bottom-34, .b-34, .bottom-34px, .b-34px { bottom: 34px; }
.bottom-35, .b-35, .bottom-35px, .b-35px { bottom: 35px; }
.bottom-36, .b-36, .bottom-36px, .b-36px { bottom: 36px; }
.bottom-37, .b-37, .bottom-37px, .b-37px { bottom: 37px; }
.bottom-38, .b-38, .bottom-38px, .b-38px { bottom: 38px; }
.bottom-39, .b-39, .bottom-39px, .b-39px { bottom: 39px; }
.bottom-40, .b-40, .bottom-40px, .b-40px { bottom: 40px; }
.bottom-41, .b-41, .bottom-41px, .b-41px { bottom: 41px; }
.bottom-42, .b-42, .bottom-42px, .b-42px { bottom: 42px; }
.bottom-43, .b-43, .bottom-43px, .b-43px { bottom: 43px; }
.bottom-44, .b-44, .bottom-44px, .b-44px { bottom: 44px; }
.bottom-45, .b-45, .bottom-45px, .b-45px { bottom: 45px; }
.bottom-46, .b-46, .bottom-46px, .b-46px { bottom: 46px; }
.bottom-47, .b-47, .bottom-47px, .b-47px { bottom: 47px; }
.bottom-48, .b-48, .bottom-48px, .b-48px { bottom: 48px; }
.bottom-49, .b-49, .bottom-49px, .b-49px { bottom: 49px; }
.bottom-50, .b-50, .bottom-50px, .b-50px { bottom: 50px; }
.bottom-51, .b-51, .bottom-51px, .b-51px { bottom: 51px; }
.bottom-52, .b-52, .bottom-52px, .b-52px { bottom: 52px; }
.bottom-53, .b-53, .bottom-53px, .b-53px { bottom: 53px; }
.bottom-54, .b-54, .bottom-54px, .b-54px { bottom: 54px; }
.bottom-55, .b-55, .bottom-55px, .b-55px { bottom: 55px; }
.bottom-56, .b-56, .bottom-56px, .b-56px { bottom: 56px; }
.bottom-57, .b-57, .bottom-57px, .b-57px { bottom: 57px; }
.bottom-58, .b-58, .bottom-58px, .b-58px { bottom: 58px; }
.bottom-59, .b-59, .bottom-59px, .b-59px { bottom: 59px; }
.bottom-60, .b-60, .bottom-60px, .b-60px { bottom: 60px; }
.bottom-61, .b-61, .bottom-61px, .b-61px { bottom: 61px; }
.bottom-62, .b-62, .bottom-62px, .b-62px { bottom: 62px; }
.bottom-63, .b-63, .bottom-63px, .b-63px { bottom: 63px; }
.bottom-64, .b-64, .bottom-64px, .b-64px { bottom: 64px; }
.bottom-65, .b-65, .bottom-65px, .b-65px { bottom: 65px; }
.bottom-66, .b-66, .bottom-66px, .b-66px { bottom: 66px; }
.bottom-67, .b-67, .bottom-67px, .b-67px { bottom: 67px; }
.bottom-68, .b-68, .bottom-68px, .b-68px { bottom: 68px; }
.bottom-69, .b-69, .bottom-69px, .b-69px { bottom: 69px; }
.bottom-70, .b-70, .bottom-70px, .b-70px { bottom: 70px; }
.bottom-71, .b-71, .bottom-71px, .b-71px { bottom: 71px; }
.bottom-72, .b-72, .bottom-72px, .b-72px { bottom: 72px; }
.bottom-73, .b-73, .bottom-73px, .b-73px { bottom: 73px; }
.bottom-74, .b-74, .bottom-74px, .b-74px { bottom: 74px; }
.bottom-75, .b-75, .bottom-75px, .b-75px { bottom: 75px; }
.bottom-76, .b-76, .bottom-76px, .b-76px { bottom: 76px; }
.bottom-77, .b-77, .bottom-77px, .b-77px { bottom: 77px; }
.bottom-78, .b-78, .bottom-78px, .b-78px { bottom: 78px; }
.bottom-79, .b-79, .bottom-79px, .b-79px { bottom: 79px; }
.bottom-80, .b-80, .bottom-80px, .b-80px { bottom: 80px; }
.bottom-81, .b-81, .bottom-81px, .b-81px { bottom: 81px; }
.bottom-82, .b-82, .bottom-82px, .b-82px { bottom: 82px; }
.bottom-83, .b-83, .bottom-83px, .b-83px { bottom: 83px; }
.bottom-84, .b-84, .bottom-84px, .b-84px { bottom: 84px; }
.bottom-85, .b-85, .bottom-85px, .b-85px { bottom: 85px; }
.bottom-86, .b-86, .bottom-86px, .b-86px { bottom: 86px; }
.bottom-87, .b-87, .bottom-87px, .b-87px { bottom: 87px; }
.bottom-88, .b-88, .bottom-88px, .b-88px { bottom: 88px; }
.bottom-89, .b-89, .bottom-89px, .b-89px { bottom: 89px; }
.bottom-90, .b-90, .bottom-90px, .b-90px { bottom: 90px; }
.bottom-91, .b-91, .bottom-91px, .b-91px { bottom: 91px; }
.bottom-92, .b-92, .bottom-92px, .b-92px { bottom: 92px; }
.bottom-93, .b-93, .bottom-93px, .b-93px { bottom: 93px; }
.bottom-94, .b-94, .bottom-94px, .b-94px { bottom: 94px; }
.bottom-95, .b-95, .bottom-95px, .b-95px { bottom: 95px; }
.bottom-96, .b-96, .bottom-96px, .b-96px { bottom: 96px; }
.bottom-97, .b-97, .bottom-97px, .b-97px { bottom: 97px; }
.bottom-98, .b-98, .bottom-98px, .b-98px { bottom: 98px; }
.bottom-99, .b-99, .bottom-99px, .b-99px { bottom: 99px; }
.bottom-100, .b-100, .bottom-100px, .b-100px { bottom: 100px; }

.bottom-full, .b-full { bottom: 100%; }
.bottom-half, .b-half { bottom: 50%; }
.bottom-auto, .b-auto { bottom: auto; }

/* Left positions - with px versions */
.left-0, .l-0, .left-0px, .l-0px { left: 0; }
.left-1, .l-1, .left-1px, .l-1px { left: 1px; }
.left-2, .l-2, .left-2px, .l-2px { left: 2px; }
.left-3, .l-3, .left-3px, .l-3px { left: 3px; }
.left-4, .l-4, .left-4px, .l-4px { left: 4px; }
.left-5, .l-5, .left-5px, .l-5px { left: 5px; }
.left-6, .l-6, .left-6px, .l-6px { left: 6px; }
.left-7, .l-7, .left-7px, .l-7px { left: 7px; }
.left-8, .l-8, .left-8px, .l-8px { left: 8px; }
.left-9, .l-9, .left-9px, .l-9px { left: 9px; }
.left-10, .l-10, .left-10px, .l-10px { left: 10px; }
.left-11, .l-11, .left-11px, .l-11px { left: 11px; }
.left-12, .l-12, .left-12px, .l-12px { left: 12px; }
.left-13, .l-13, .left-13px, .l-13px { left: 13px; }
.left-14, .l-14, .left-14px, .l-14px { left: 14px; }
.left-15, .l-15, .left-15px, .l-15px { left: 15px; }
.left-16, .l-16, .left-16px, .l-16px { left: 16px; }
.left-17, .l-17, .left-17px, .l-17px { left: 17px; }
.left-18, .l-18, .left-18px, .l-18px { left: 18px; }
.left-19, .l-19, .left-19px, .l-19px { left: 19px; }
.left-20, .l-20, .left-20px, .l-20px { left: 20px; }
.left-21, .l-21, .left-21px, .l-21px { left: 21px; }
.left-22, .l-22, .left-22px, .l-22px { left: 22px; }
.left-23, .l-23, .left-23px, .l-23px { left: 23px; }
.left-24, .l-24, .left-24px, .l-24px { left: 24px; }
.left-25, .l-25, .left-25px, .l-25px { left: 25px; }
.left-26, .l-26, .left-26px, .l-26px { left: 26px; }
.left-27, .l-27, .left-27px, .l-27px { left: 27px; }
.left-28, .l-28, .left-28px, .l-28px { left: 28px; }
.left-29, .l-29, .left-29px, .l-29px { left: 29px; }
.left-30, .l-30, .left-30px, .l-30px { left: 30px; }
.left-31, .l-31, .left-31px, .l-31px { left: 31px; }
.left-32, .l-32, .left-32px, .l-32px { left: 32px; }
.left-33, .l-33, .left-33px, .l-33px { left: 33px; }
.left-34, .l-34, .left-34px, .l-34px { left: 34px; }
.left-35, .l-35, .left-35px, .l-35px { left: 35px; }
.left-36, .l-36, .left-36px, .l-36px { left: 36px; }
.left-37, .l-37, .left-37px, .l-37px { left: 37px; }
.left-38, .l-38, .left-38px, .l-38px { left: 38px; }
.left-39, .l-39, .left-39px, .l-39px { left: 39px; }
.left-40, .l-40, .left-40px, .l-40px { left: 40px; }
.left-41, .l-41, .left-41px, .l-41px { left: 41px; }
.left-42, .l-42, .left-42px, .l-42px { left: 42px; }
.left-43, .l-43, .left-43px, .l-43px { left: 43px; }
.left-44, .l-44, .left-44px, .l-44px { left: 44px; }
.left-45, .l-45, .left-45px, .l-45px { left: 45px; }
.left-46, .l-46, .left-46px, .l-46px { left: 46px; }
.left-47, .l-47, .left-47px, .l-47px { left: 47px; }
.left-48, .l-48, .left-48px, .l-48px { left: 48px; }
.left-49, .l-49, .left-49px, .l-49px { left: 49px; }
.left-50, .l-50, .left-50px, .l-50px { left: 50px; }
.left-51, .l-51, .left-51px, .l-51px { left: 51px; }
.left-52, .l-52, .left-52px, .l-52px { left: 52px; }
.left-53, .l-53, .left-53px, .l-53px { left: 53px; }
.left-54, .l-54, .left-54px, .l-54px { left: 54px; }
.left-55, .l-55, .left-55px, .l-55px { left: 55px; }
.left-56, .l-56, .left-56px, .l-56px { left: 56px; }
.left-57, .l-57, .left-57px, .l-57px { left: 57px; }
.left-58, .l-58, .left-58px, .l-58px { left: 58px; }
.left-59, .l-59, .left-59px, .l-59px { left: 59px; }
.left-60, .l-60, .left-60px, .l-60px { left: 60px; }
.left-61, .l-61, .left-61px, .l-61px { left: 61px; }
.left-62, .l-62, .left-62px, .l-62px { left: 62px; }
.left-63, .l-63, .left-63px, .l-63px { left: 63px; }
.left-64, .l-64, .left-64px, .l-64px { left: 64px; }
.left-65, .l-65, .left-65px, .l-65px { left: 65px; }
.left-66, .l-66, .left-66px, .l-66px { left: 66px; }
.left-67, .l-67, .left-67px, .l-67px { left: 67px; }
.left-68, .l-68, .left-68px, .l-68px { left: 68px; }
.left-69, .l-69, .left-69px, .l-69px { left: 69px; }
.left-70, .l-70, .left-70px, .l-70px { left: 70px; }
.left-71, .l-71, .left-71px, .l-71px { left: 71px; }
.left-72, .l-72, .left-72px, .l-72px { left: 72px; }
.left-73, .l-73, .left-73px, .l-73px { left: 73px; }
.left-74, .l-74, .left-74px, .l-74px { left: 74px; }
.left-75, .l-75, .left-75px, .l-75px { left: 75px; }
.left-76, .l-76, .left-76px, .l-76px { left: 76px; }
.left-77, .l-77, .left-77px, .l-77px { left: 77px; }
.left-78, .l-78, .left-78px, .l-78px { left: 78px; }
.left-79, .l-79, .left-79px, .l-79px { left: 79px; }
.left-80, .l-80, .left-80px, .l-80px { left: 80px; }
.left-81, .l-81, .left-81px, .l-81px { left: 81px; }
.left-82, .l-82, .left-82px, .l-82px { left: 82px; }
.left-83, .l-83, .left-83px, .l-83px { left: 83px; }
.left-84, .l-84, .left-84px, .l-84px { left: 84px; }
.left-85, .l-85, .left-85px, .l-85px { left: 85px; }
.left-86, .l-86, .left-86px, .l-86px { left: 86px; }
.left-87, .l-87, .left-87px, .l-87px { left: 87px; }
.left-88, .l-88, .left-88px, .l-88px { left: 88px; }
.left-89, .l-89, .left-89px, .l-89px { left: 89px; }
.left-90, .l-90, .left-90px, .l-90px { left: 90px; }
.left-91, .l-91, .left-91px, .l-91px { left: 91px; }
.left-92, .l-92, .left-92px, .l-92px { left: 92px; }
.left-93, .l-93, .left-93px, .l-93px { left: 93px; }
.left-94, .l-94, .left-94px, .l-94px { left: 94px; }
.left-95, .l-95, .left-95px, .l-95px { left: 95px; }
.left-96, .l-96, .left-96px, .l-96px { left: 96px; }
.left-97, .l-97, .left-97px, .l-97px { left: 97px; }
.left-98, .l-98, .left-98px, .l-98px { left: 98px; }
.left-99, .l-99, .left-99px, .l-99px { left: 99px; }
.left-100, .l-100, .left-100px, .l-100px { left: 100px; }

.left-full, .l-full { left: 100%; }
.left-half, .l-half { left: 50%; }
.left-auto, .l-auto { left: auto; }

/* Right positions - with px versions */
.right-0, .r-0, .right-0px, .r-0px { right: 0; }
.right-1, .r-1, .right-1px, .r-1px { right: 1px; }
.right-2, .r-2, .right-2px, .r-2px { right: 2px; }
.right-3, .r-3, .right-3px, .r-3px { right: 3px; }
.right-4, .r-4, .right-4px, .r-4px { right: 4px; }
.right-5, .r-5, .right-5px, .r-5px { right: 5px; }
.right-6, .r-6, .right-6px, .r-6px { right: 6px; }
.right-7, .r-7, .right-7px, .r-7px { right: 7px; }
.right-8, .r-8, .right-8px, .r-8px { right: 8px; }
.right-9, .r-9, .right-9px, .r-9px { right: 9px; }
.right-10, .r-10, .right-10px, .r-10px { right: 10px; }
.right-11, .r-11, .right-11px, .r-11px { right: 11px; }
.right-12, .r-12, .right-12px, .r-12px { right: 12px; }
.right-13, .r-13, .right-13px, .r-13px { right: 13px; }
.right-14, .r-14, .right-14px, .r-14px { right: 14px; }
.right-15, .r-15, .right-15px, .r-15px { right: 15px; }
.right-16, .r-16, .right-16px, .r-16px { right: 16px; }
.right-17, .r-17, .right-17px, .r-17px { right: 17px; }
.right-18, .r-18, .right-18px, .r-18px { right: 18px; }
.right-19, .r-19, .right-19px, .r-19px { right: 19px; }
.right-20, .r-20, .right-20px, .r-20px { right: 20px; }
.right-21, .r-21, .right-21px, .r-21px { right: 21px; }
.right-22, .r-22, .right-22px, .r-22px { right: 22px; }
.right-23, .r-23, .right-23px, .r-23px { right: 23px; }
.right-24, .r-24, .right-24px, .r-24px { right: 24px; }
.right-25, .r-25, .right-25px, .r-25px { right: 25px; }
.right-26, .r-26, .right-26px, .r-26px { right: 26px; }
.right-27, .r-27, .right-27px, .r-27px { right: 27px; }
.right-28, .r-28, .right-28px, .r-28px { right: 28px; }
.right-29, .r-29, .right-29px, .r-29px { right: 29px; }
.right-30, .r-30, .right-30px, .r-30px { right: 30px; }
.right-31, .r-31, .right-31px, .r-31px { right: 31px; }
.right-32, .r-32, .right-32px, .r-32px { right: 32px; }
.right-33, .r-33, .right-33px, .r-33px { right: 33px; }
.right-34, .r-34, .right-34px, .r-34px { right: 34px; }
.right-35, .r-35, .right-35px, .r-35px { right: 35px; }
.right-36, .r-36, .right-36px, .r-36px { right: 36px; }
.right-37, .r-37, .right-37px, .r-37px { right: 37px; }
.right-38, .r-38, .right-38px, .r-38px { right: 38px; }
.right-39, .r-39, .right-39px, .r-39px { right: 39px; }
.right-40, .r-40, .right-40px, .r-40px { right: 40px; }
.right-41, .r-41, .right-41px, .r-41px { right: 41px; }
.right-42, .r-42, .right-42px, .r-42px { right: 42px; }
.right-43, .r-43, .right-43px, .r-43px { right: 43px; }
.right-44, .r-44, .right-44px, .r-44px { right: 44px; }
.right-45, .r-45, .right-45px, .r-45px { right: 45px; }
.right-46, .r-46, .right-46px, .r-46px { right: 46px; }
.right-47, .r-47, .right-47px, .r-47px { right: 47px; }
.right-48, .r-48, .right-48px, .r-48px { right: 48px; }
.right-49, .r-49, .right-49px, .r-49px { right: 49px; }
.right-50, .r-50, .right-50px, .r-50px { right: 50px; }
.right-51, .r-51, .right-51px, .r-51px { right: 51px; }
.right-52, .r-52, .right-52px, .r-52px { right: 52px; }
.right-53, .r-53, .right-53px, .r-53px { right: 53px; }
.right-54, .r-54, .right-54px, .r-54px { right: 54px; }
.right-55, .r-55, .right-55px, .r-55px { right: 55px; }
.right-56, .r-56, .right-56px, .r-56px { right: 56px; }
.right-57, .r-57, .right-57px, .r-57px { right: 57px; }
.right-58, .r-58, .right-58px, .r-58px { right: 58px; }
.right-59, .r-59, .right-59px, .r-59px { right: 59px; }
.right-60, .r-60, .right-60px, .r-60px { right: 60px; }
.right-61, .r-61, .right-61px, .r-61px { right: 61px; }
.right-62, .r-62, .right-62px, .r-62px { right: 62px; }
.right-63, .r-63, .right-63px, .r-63px { right: 63px; }
.right-64, .r-64, .right-64px, .r-64px { right: 64px; }
.right-65, .r-65, .right-65px, .r-65px { right: 65px; }
.right-66, .r-66, .right-66px, .r-66px { right: 66px; }
.right-67, .r-67, .right-67px, .r-67px { right: 67px; }
.right-68, .r-68, .right-68px, .r-68px { right: 68px; }
.right-69, .r-69, .right-69px, .r-69px { right: 69px; }
.right-70, .r-70, .right-70px, .r-70px { right: 70px; }
.right-71, .r-71, .right-71px, .r-71px { right: 71px; }
.right-72, .r-72, .right-72px, .r-72px { right: 72px; }
.right-73, .r-73, .right-73px, .r-73px { right: 73px; }
.right-74, .r-74, .right-74px, .r-74px { right: 74px; }
.right-75, .r-75, .right-75px, .r-75px { right: 75px; }
.right-76, .r-76, .right-76px, .r-76px { right: 76px; }
.right-77, .r-77, .right-77px, .r-77px { right: 77px; }
.right-78, .r-78, .right-78px, .r-78px { right: 78px; }
.right-79, .r-79, .right-79px, .r-79px { right: 79px; }
.right-80, .r-80, .right-80px, .r-80px { right: 80px; }
.right-81, .r-81, .right-81px, .r-81px { right: 81px; }
.right-82, .r-82, .right-82px, .r-82px { right: 82px; }
.right-83, .r-83, .right-83px, .r-83px { right: 83px; }
.right-84, .r-84, .right-84px, .r-84px { right: 84px; }
.right-85, .r-85, .right-85px, .r-85px { right: 85px; }
.right-86, .r-86, .right-86px, .r-86px { right: 86px; }
.right-87, .r-87, .right-87px, .r-87px { right: 87px; }
.right-88, .r-88, .right-88px, .r-88px { right: 88px; }
.right-89, .r-89, .right-89px, .r-89px { right: 89px; }
.right-90, .r-90, .right-90px, .r-90px { right: 90px; }
.right-91, .r-91, .right-91px, .r-91px { right: 91px; }
.right-92, .r-92, .right-92px, .r-92px { right: 92px; }
.right-93, .r-93, .right-93px, .r-93px { right: 93px; }
.right-94, .r-94, .right-94px, .r-94px { right: 94px; }
.right-95, .r-95, .right-95px, .r-95px { right: 95px; }
.right-96, .r-96, .right-96px, .r-96px { right: 96px; }
.right-97, .r-97, .right-97px, .r-97px { right: 97px; }
.right-98, .r-98, .right-98px, .r-98px { right: 98px; }
.right-99, .r-99, .right-99px, .r-99px { right: 99px; }
.right-100, .r-100, .right-100px, .r-100px { right: 100px; }

.right-full, .r-full { right: 100%; }
.right-half, .r-half { right: 50%; }
.right-auto, .r-auto { right: auto; }

/* Inset (all sides) - with px versions */
.inset-0, .inset-none, .inset-0px { inset: 0; }
.inset-1, .inset-1px { inset: 1px; }
.inset-2, .inset-2px { inset: 2px; }
.inset-3, .inset-3px { inset: 3px; }
.inset-4, .inset-4px { inset: 4px; }
.inset-5, .inset-5px { inset: 5px; }
.inset-6, .inset-6px { inset: 6px; }
.inset-7, .inset-7px { inset: 7px; }
.inset-8, .inset-8px { inset: 8px; }
.inset-9, .inset-9px { inset: 9px; }
.inset-10, .inset-10px { inset: 10px; }
.inset-11, .inset-11px { inset: 11px; }
.inset-12, .inset-12px { inset: 12px; }
.inset-13, .inset-13px { inset: 13px; }
.inset-14, .inset-14px { inset: 14px; }
.inset-15, .inset-15px { inset: 15px; }
.inset-16, .inset-16px { inset: 16px; }
.inset-17, .inset-17px { inset: 17px; }
.inset-18, .inset-18px { inset: 18px; }
.inset-19, .inset-19px { inset: 19px; }
.inset-20, .inset-20px { inset: 20px; }
.inset-21, .inset-21px { inset: 21px; }
.inset-22, .inset-22px { inset: 22px; }
.inset-23, .inset-23px { inset: 23px; }
.inset-24, .inset-24px { inset: 24px; }
.inset-25, .inset-25px { inset: 25px; }
.inset-26, .inset-26px { inset: 26px; }
.inset-27, .inset-27px { inset: 27px; }
.inset-28, .inset-28px { inset: 28px; }
.inset-29, .inset-29px { inset: 29px; }
.inset-30, .inset-30px { inset: 30px; }
.inset-31, .inset-31px { inset: 31px; }
.inset-32, .inset-32px { inset: 32px; }
.inset-33, .inset-33px { inset: 33px; }
.inset-34, .inset-34px { inset: 34px; }
.inset-35, .inset-35px { inset: 35px; }
.inset-36, .inset-36px { inset: 36px; }
.inset-37, .inset-37px { inset: 37px; }
.inset-38, .inset-38px { inset: 38px; }
.inset-39, .inset-39px { inset: 39px; }
.inset-40, .inset-40px { inset: 40px; }
.inset-41, .inset-41px { inset: 41px; }
.inset-42, .inset-42px { inset: 42px; }
.inset-43, .inset-43px { inset: 43px; }
.inset-44, .inset-44px { inset: 44px; }
.inset-45, .inset-45px { inset: 45px; }
.inset-46, .inset-46px { inset: 46px; }
.inset-47, .inset-47px { inset: 47px; }
.inset-48, .inset-48px { inset: 48px; }
.inset-49, .inset-49px { inset: 49px; }
.inset-50, .inset-50px { inset: 50px; }
.inset-51, .inset-51px { inset: 51px; }
.inset-52, .inset-52px { inset: 52px; }
.inset-53, .inset-53px { inset: 53px; }
.inset-54, .inset-54px { inset: 54px; }
.inset-55, .inset-55px { inset: 55px; }
.inset-56, .inset-56px { inset: 56px; }
.inset-57, .inset-57px { inset: 57px; }
.inset-58, .inset-58px { inset: 58px; }
.inset-59, .inset-59px { inset: 59px; }
.inset-60, .inset-60px { inset: 60px; }
.inset-61, .inset-61px { inset: 61px; }
.inset-62, .inset-62px { inset: 62px; }
.inset-63, .inset-63px { inset: 63px; }
.inset-64, .inset-64px { inset: 64px; }
.inset-65, .inset-65px { inset: 65px; }
.inset-66, .inset-66px { inset: 66px; }
.inset-67, .inset-67px { inset: 67px; }
.inset-68, .inset-68px { inset: 68px; }
.inset-69, .inset-69px { inset: 69px; }
.inset-70, .inset-70px { inset: 70px; }
.inset-71, .inset-71px { inset: 71px; }
.inset-72, .inset-72px { inset: 72px; }
.inset-73, .inset-73px { inset: 73px; }
.inset-74, .inset-74px { inset: 74px; }
.inset-75, .inset-75px { inset: 75px; }
.inset-76, .inset-76px { inset: 76px; }
.inset-77, .inset-77px { inset: 77px; }
.inset-78, .inset-78px { inset: 78px; }
.inset-79, .inset-79px { inset: 79px; }
.inset-80, .inset-80px { inset: 80px; }
.inset-81, .inset-81px { inset: 81px; }
.inset-82, .inset-82px { inset: 82px; }
.inset-83, .inset-83px { inset: 83px; }
.inset-84, .inset-84px { inset: 84px; }
.inset-85, .inset-85px { inset: 85px; }
.inset-86, .inset-86px { inset: 86px; }
.inset-87, .inset-87px { inset: 87px; }
.inset-88, .inset-88px { inset: 88px; }
.inset-89, .inset-89px { inset: 89px; }
.inset-90, .inset-90px { inset: 90px; }
.inset-91, .inset-91px { inset: 91px; }
.inset-92, .inset-92px { inset: 92px; }
.inset-93, .inset-93px { inset: 93px; }
.inset-94, .inset-94px { inset: 94px; }
.inset-95, .inset-95px { inset: 95px; }
.inset-96, .inset-96px { inset: 96px; }
.inset-97, .inset-97px { inset: 97px; }
.inset-98, .inset-98px { inset: 98px; }
.inset-99, .inset-99px { inset: 99px; }
.inset-100, .inset-100px { inset: 100px; }
.inset-auto, .inset-auto { inset: auto; }
.disabled, .pointer-events-none {
    pointer-events: none;
}
::-webkit-scrollbar{
    width:5px;
    
}
::-webkit-scrollbar-track{
    background:rgba(112, 128, 144, 0.2);
    border-radius:10px;
}
::-webkit-scrollbar-thumb{
    background:var(--primary);
    border-radius:10px;
}
html{
    scrollbar-width: thin;
    scrollbar-color: rgba(112, 128, 144, 0.2) var(--primary);
}
/* toggle */
/* toggle - Original */
.toggle{
    width:50px;
    flex-shrink:0;
    background:var(--rgt-02);
    border-radius:10000px;
    overflow:hidden;
    padding:2px;
    transition: all 0.5s linear;
    position:relative;
    height:fit-content;
 }
.toggle .child{
    height:20px;
    aspect-ratio:1;
    background:white;
    border-radius:50%;
     transition:all 0.5s ease;
    
}
.toggle.active{
    background:#4caf50;
}
.toggle.active .child{
     transform:translateX(26px)
 
   
}

/* ===== TOGGLE TYPES ===== */

/* 1. Toggle with Shadow */
.toggle-shadow {
    width:50px;
    flex-shrink:0;
    background:var(--rgt-02);
    border-radius:10000px;
    overflow:hidden;
    padding:2px;
    transition: all 0.5s linear;
    position:relative;
    height:fit-content;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.toggle-shadow .child {
    height:20px;
    aspect-ratio:1;
    background:white;
    border-radius:50%;
    transition:all 0.5s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.toggle-shadow.active {
    background:#4caf50;
}
.toggle-shadow.active .child {
    transform:translateX(26px);
}

/* 2. Toggle with Glow */
.toggle-glow {
    width:50px;
    flex-shrink:0;
    background:var(--rgt-02);
    border-radius:10000px;
    overflow:hidden;
    padding:2px;
    transition: all 0.5s linear;
    position:relative;
    height:fit-content;
}
.toggle-glow .child {
    height:20px;
    aspect-ratio:1;
    background:white;
    border-radius:50%;
    transition:all 0.5s ease;
}
.toggle-glow.active {
    background:#4caf50;
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.5);
}
.toggle-glow.active .child {
    transform:translateX(26px);
}

/* 3. Toggle with Icon */
.toggle-icon {
    width:50px;
    flex-shrink:0;
    background:var(--rgt-02);
    border-radius:10000px;
    overflow:hidden;
    padding:2px;
    transition: all 0.5s linear;
    position:relative;
    height:fit-content;
}
.toggle-icon .child {
    height:20px;
    aspect-ratio:1;
    background:white;
    border-radius:50%;
    transition:all 0.5s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    color:var(--rgt-02);
}
.toggle-icon.active {
    background:#4caf50;
}
.toggle-icon.active .child {
    transform:translateX(26px);
    color:#4caf50;
}

/* 4. Toggle with Label (ON/OFF) */
.toggle-label {
    width:60px;
    flex-shrink:0;
    background:var(--rgt-02);
    border-radius:10000px;
    overflow:hidden;
    padding:2px;
    transition: all 0.5s linear;
    position:relative;
    height:fit-content;
}
.toggle-label::before {
    content: 'OFF';
    position:absolute;
    left:8px;
    top:50%;
    transform:translateY(-50%);
    font-size:8px;
    font-weight:bold;
    color:white;
    opacity:0.5;
    transition:all 0.5s ease;
    z-index:1;
}
.toggle-label::after {
    content: 'ON';
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    font-size:8px;
    font-weight:bold;
    color:white;
    opacity:0;
    transition:all 0.5s ease;
    z-index:1;
}
.toggle-label .child {
    height:20px;
    aspect-ratio:1;
    background:white;
    border-radius:50%;
    transition:all 0.5s ease;
    position:relative;
    z-index:2;
}
.toggle-label.active {
    background:#4caf50;
}
.toggle-label.active .child {
    transform:translateX(36px);
}
.toggle-label.active::before {
    opacity:0;
}
.toggle-label.active::after {
    opacity:0.5;
}

/* 5. Toggle with Gradient */
.toggle-gradient {
    width:50px;
    flex-shrink:0;
    background:linear-gradient(135deg, #ff6b6b, #ee5a24);
    border-radius:10000px;
    overflow:hidden;
    padding:2px;
    transition: all 0.5s linear;
    position:relative;
    height:fit-content;
}
.toggle-gradient .child {
    height:20px;
    aspect-ratio:1;
    background:white;
    border-radius:50%;
    transition:all 0.5s ease;
}
.toggle-gradient.active {
    background:linear-gradient(135deg, #00b894, #00cec9);
}
.toggle-gradient.active .child {
    transform:translateX(26px);
}

/* 6. Toggle with Pulse Animation */
.toggle-pulse {
    width:50px;
    flex-shrink:0;
    background:var(--rgt-02);
    border-radius:10000px;
    overflow:hidden;
    padding:2px;
    transition: all 0.5s linear;
    position:relative;
    height:fit-content;
}
.toggle-pulse .child {
    height:20px;
    aspect-ratio:1;
    background:white;
    border-radius:50%;
    transition:all 0.5s ease;
}
.toggle-pulse.active {
    background:#4caf50;
    animation:pulse-toggle 1.5s ease-in-out infinite;
}
.toggle-pulse.active .child {
    transform:translateX(26px);
}
@keyframes pulse-toggle {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* 7. Toggle with Ripple Effect */
.toggle-ripple {
    width:50px;
    flex-shrink:0;
    background:var(--rgt-02);
    border-radius:10000px;
    overflow:hidden;
    padding:2px;
    transition: all 0.5s linear;
    position:relative;
    height:fit-content;
    cursor:pointer;
}
.toggle-ripple .child {
    height:20px;
    aspect-ratio:1;
    background:white;
    border-radius:50%;
    transition:all 0.5s ease;
    position:relative;
}
.toggle-ripple.active {
    background:#4caf50;
}
.toggle-ripple.active .child {
    transform:translateX(26px);
}
.toggle-ripple .ripple {
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,0.4);
    transform:scale(0);
    animation:ripple-effect 0.6s linear;
    pointer-events:none;
}
@keyframes ripple-effect {
    to {
        transform: scale(4);
        opacity:0;
    }
}

/* 8. Toggle Small */
.toggle-sm {
    width:30px;
    flex-shrink:0;
    background:var(--rgt-02);
    border-radius:10000px;
    overflow:hidden;
    padding:2px;
    transition: all 0.5s linear;
    position:relative;
    height:fit-content;
}
.toggle-sm .child {
    height:12px;
    aspect-ratio:1;
    background:white;
    border-radius:50%;
    transition:all 0.5s ease;
}
.toggle-sm.active {
    background:#4caf50;
}
.toggle-sm.active .child {
    transform:translateX(14px);
}

/* 9. Toggle Large */
.toggle-lg {
    width:70px;
    flex-shrink:0;
    background:var(--rgt-02);
    border-radius:10000px;
    overflow:hidden;
    padding:3px;
    transition: all 0.5s linear;
    position:relative;
    height:fit-content;
}
.toggle-lg .child {
    height:28px;
    aspect-ratio:1;
    background:white;
    border-radius:50%;
    transition:all 0.5s ease;
}
.toggle-lg.active {
    background:#4caf50;
}
.toggle-lg.active .child {
    transform:translateX(36px);
}

/* 10. Toggle with Color Options */
.toggle-red.active { background: #e74c3c; }
.toggle-blue.active { background: #3498db; }
.toggle-yellow.active { background: #f1c40f; }
.toggle-purple.active { background: #9b59b6; }
.toggle-pink.active { background: #e91e63; }
.toggle-orange.active { background: #ff6b35; }
.toggle-dark.active { background: #2d3436; }

/* 11. Toggle with Border */
.toggle-border {
    width:50px;
    flex-shrink:0;
    background:transparent;
    border:2px solid var(--rgt-02);
    border-radius:10000px;
    padding:2px;
    transition: all 0.5s linear;
    position:relative;
    height:fit-content;
}
.toggle-border .child {
    height:20px;
    aspect-ratio:1;
    background:var(--rgt-02);
    border-radius:50%;
    transition:all 0.5s ease;
}
.toggle-border.active {
    border-color:#4caf50;
}
.toggle-border.active .child {
    transform:translateX(26px);
    background:#4caf50;
}

/* 12. Toggle with Loading State */
.toggle-loading {
    width:50px;
    flex-shrink:0;
    background:var(--rgt-02);
    border-radius:10000px;
    overflow:hidden;
    padding:2px;
    transition: all 0.5s linear;
    position:relative;
    height:fit-content;
    pointer-events:auto;
}
.toggle-loading .child {
    height:20px;
    aspect-ratio:1;
    background:white;
    border-radius:50%;
    transition:all 0.5s ease;
}
.toggle-loading.loading {
    opacity:0.5;
    pointer-events:none;
}
.toggle-loading.loading .child {
    animation:spin-loading 1s linear infinite;
}
.toggle-loading.active {
    background:#4caf50;
}
.toggle-loading.active .child {
    transform:translateX(26px);
}
@keyframes spin-loading {
    0% { transform: rotate(0deg) scale(0.8); }
    100% { transform: rotate(360deg) scale(0.8); }
}

/* 13. Toggle with Checkmark */
.toggle-check {
    width:50px;
    flex-shrink:0;
    background:var(--rgt-02);
    border-radius:10000px;
    overflow:hidden;
    padding:2px;
    transition: all 0.5s linear;
    position:relative;
    height:fit-content;
}
.toggle-check .child {
    height:20px;
    aspect-ratio:1;
    background:white;
    border-radius:50%;
    transition:all 0.5s ease;
    display:flex;
    align-items:center;
    justify-content:center;
}
.toggle-check .child::after {
    content: '✕';
    font-size:10px;
    color:var(--rgt-02);
    transition:all 0.5s ease;
}
.toggle-check.active {
    background:#4caf50;
}
.toggle-check.active .child {
    transform:translateX(26px);
}
.toggle-check.active .child::after {
    content: '✓';
    color:#4caf50;
}

/* 14. Toggle with Text Inside */
.toggle-text {
    width:50px;
    flex-shrink:0;
    background:var(--rgt-02);
    border-radius:10000px;
    overflow:hidden;
    padding:2px;
    transition: all 0.5s linear;
    position:relative;
    height:fit-content;
}
.toggle-text .child {
    height:20px;
    aspect-ratio:1;
    background:white;
    border-radius:50%;
    transition:all 0.5s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:8px;
    font-weight:bold;
    color:var(--rgt-02);
}
.toggle-text.active {
    background:#4caf50;
}
.toggle-text.active .child {
    transform:translateX(26px);
    color:#4caf50;
}
/* overlay */
body:has(.overlay.active){
    overflow:hidden;
}
.overlay{
    position:fixed;
    inset:0;
    background:var(--bg);
    z-index:4000;
    transform:translateY(100vh);
    transition:all 0.2s linear;
    overflow:auto;
    pointer-events:none;

}
.overlay.active{
    transform:translateY(0);
    pointer-events:auto;
}
.overlay.left{
    transform:translateX(-100vw);
}
.overlay.left.active{
    transform:translateY(0);
}
.overlay.right{
    transform:translateX(100vw);
}
.overlay.right.active{
    transform:translateX(0);
}
.overlay.top{
    transform:translateY(-100vh);
}
.overlay.top.active{
    transform:translateY(0);
}
.overlay.bottom{
    transform:translateY(100vh);
}
.overlay.bottom.active{
    transform:translateY(0);
}
.overlay.display{
    transition:none;

}

.overlay.opacity{
    transform:translateY(100vh);
    transition:opacity 0.5s ease;
    opacity:0;
}
.overlay.opacity.active{
    opacity:1;
    transform:translateY(0);
}
.overlay.scale{
    transform:scale(0);
}
.overlay.scale.active{
    transform:scale(1);
}

/* modal */
.modal{
    position: fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background:rgba(0,0,0,0.4);
    z-index:4000;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:20px;
    display:none;


}
body:has(.modal.active){
    overflow:hidden !important;
    touch-action: none;
}
.modal.active{
    display:flex;
}
.modal.active > .child{
    animation:animate-up 0.5s linear forwards;
    touch-action:pan-x pan-y !important;
    overflow:auto;
}
@keyframes animate-up{
    0%{
        transform:translateY(30px);
        opacity:0;
    }
    100%{
        transform:translateY(0);
        opacity:1;
    }
}
.modal > .child{
    border-radius:10px;
    display:flex;
    flex-direction:column;
    gap:10px;
    background:var(--bg-light);
    padding:20px;
    width:80%;
    max-width:500px;
    border:1px solid rgba(255,255,255,0.5);
    box-shadow:0 0px 10px rgba(0,0,0,0.3);

}
/* drawer start */
body:has(.drawer.active){
    overflow:hidden;
    touch-action:none;
}
.drawer{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background:rgba(0,0,0,0.4);
    z-index:4000;
    display:none;
   
}
.drawer.active{
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;

}
.drawer > .child{
    padding:10px 20px 20px 20px;
    background:var(--bg);
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:auto;
    border-radius:20px 20px 0 0;
    transform:translateY(100%);
     animation:draw-in 0.5s ease forwards;
     width:100%;
     max-width:500px;


}
@keyframes draw-in{
    0%{
        transform:translateY(100%)
    }
    100%{
        transform:translateY(0)
    }
}

.drawer .child > .bar{
    height:5px;
     width:100px;
    background:var(--rgt-05);
    border-radius:1000px;
    margin:auto;
}
.drawer.active > .child{
      animation:draw-in 0.5s ease forwards;
      touch-action:pan-x pan-y !important;
      overflow:auto;

}

.popup{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index:var(--z-index-average);
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.popup.active{
    display:flex;
}
.popup .child{
    background:var(--bg);
    padding:10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
    border-radius:10px;
    max-width:500px;
    max-height:90%;
    overflow:auto;
    width:90%;
    transform:scale(0.9);
    opacity:0;
    overflow:auto;
    gap:10px;
   
}
.no-scrollbar{
    scrollbar-width: none !important;
    -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar{
    display:none;
}
.popup.active .child{
     animation:scale-in 0.5s linear forwards;
}
.slideup{
     position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    backdrop-filter: blur(4px);
    z-index:var(--z-index-average);
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    background:rgba(0,0,0,0.4)
}
.slideup .child{
    
    width:100%;
    max-width:500px;
    display:flex;
    flex-direction:column;
    background:var(--bg);
    margin-top:auto;
    border-radius:20px 20px 0 0;
    align-items:center;
    max-height:60%;
    overflow:auto;
    transform:translateY(100%);

}
.slideup.active{
    display:flex;
}
.slideup.active .child{
    animation:trans-in-from-bottom 0.5s linear forwards;
}

@keyframes trans-in-from-bottom{
    0%{
        transform:translateY(100%);
    }
    100%{
        transform:translateY(0);
    }
}
@keyframes trans-in-from-left{
    0%{
        transform:translateX(-100%);
    }
    100%{
        transform:translateX(0);
    }
}
@keyframes trans-in-from-right{
    0%{
        transform:translateX(100%);
    }
    100%{
        transform:translateX(0);
    }
}
.slideup .child .bar{
    min-height:10px;
    position:sticky;
    top:0;
    left:0;
    right:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    background:var(--bg);
    width:100%;
    padding:10px;
    margin-bottom:auto;
    justify-content:center;

}
.slideup .child .bar::before{
    content: '';
    width:30%;
    max-width:100px;
    height:7px;
    min-height: 7px;
    background:#708090;
    border-radius:1000px;
}
.slideup .child .body{
    width:100%;
    padding:10px;
    overflow-x:hidden;
    word-wrap: break-word;
}
.svg-green{
    padding:10px;
    height:50px;
    width:50px;
    background:rgba(100,255,100,0.2);
    color:var(--green);
    border-radius:50%;
}
.svg-red{
    padding:10px;
    height:50px;
    width:50px;
    background:rgba(255,100,100,0.2);
    color:red;
    border-radius:50%;
}
.svg-red svg,.svg-green svg{
    height:30px;
    width:30px;
    fill:currentColor;
}
@keyframes scale-in{
    0%{
        transform:scale(0.9);
        opacity:0;

    }
    100%{
        transform:scale(1);
        opacity:1;
    }
}

/* dropdown */
.dropdown{
    position:relative;
    overflow:visible !important;
}
.dropdown > .child{
    position:absolute;
    top:50%;
    background:rgba(0,0,0,0.7);
    color:white;
    z-index:100;
    display:flex;
    flex-direction:column;
    gap:10px;
    min-width:100%;
    max-width:100%;
    max-height: 60vh;
    padding-bottom:10px;
    padding-top:10px;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(15px);
    border-radius:15px;
    user-select:none;
    -webkit-user-select:none;
    visibility:hidden;
    opacity:0;
    transform: scale(0);
    transform-origin: top center;
    transition:visibility 0s, opacity 0.5s ease, transform 0.5s ease;
    
    


}
.dropdown > .child.active{
    visibility:visible;
    opacity:1;
    transform:scale(1);

}
.dropdown .option{
    padding:15px 20px;
    border-bottom:0.5px solid white;
  
}
.dropdown .option:last-of-type{
    border-bottom:none;
}
/* BLUR */
.backdrop-blur-1px{
    backdrop-filter:blur(1px);
    -webkit-backdrop-filter:blur(1px);
}
.backdrop-blur-2px{
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
}
.backdrop-blur-3px{
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
}
.backdrop-blur-4px{
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}
.backdrop-blur-5px{
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
}
.backdrop-blur-10px{
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
.backdrop-blur-20px{
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}
.backdrop-blur-25px{
    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);
}
.backdrop-blur-30px{
    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);
}
.backdrop-blur-40px{
    backdrop-filter:blur(40px);
    -webkit-backdrop-filter:blur(40px);
}
.backdrop-blur-50px{
    backdrop-filter:blur(50px);
    -webkit-backdrop-filter:blur(50px);
}
.backdrop-blur-60px{
    backdrop-filter:blur(60px);
    -webkit-backdrop-filter:blur(60px);
}
.backdrop-blur-70px{
    backdrop-filter:blur(70px);
    -webkit-backdrop-filter:blur(70px);
}
.backdrop-blur-80px{
    backdrop-filter:blur(80px);
    -webkit-backdrop-filter:blur(80px);
}
.backdrop-blur-90px{
    backdrop-filter:blur(90px);
    -webkit-backdrop-filter:blur(90px);
}
.backdrop-blur-100px{
    backdrop-filter:blur(100px);
    -webkit-backdrop-filter:blur(100px);
}
/* GLASS */
.glass{
   position:relative;
   background:var(--rgt-005);
   --glass:linear-gradient(to bottom right,white,transparent,white);
   --padding:1px;
   --blur:5px;
   backdrop-filter:blur(var(--blur));
   -webkit-backdrop-filter:blur(var(--blur));

 }
 
.glass::before{
    content:'';
    position:absolute;
    inset:0;
    padding:var(--padding);
    background:var(--glass);
    mask:linear-gradient(white 0,white) content-box,linear-gradient(white 0,white);
    -webkit-mask:linear-gradient(white 0,white) content-box,linear-gradient(white 0,white);
    mask-composite:exclude;
    -webkit-mask-composite:xor;
    border-radius:inherit;
}
.glass > * {
   z-index:20;
}
.glass::after{
    content:'';
    position:absolute;
    bottom:0;
    right:0;
    background:rgb(0, 68, 255);
    height:20%;
    width:20%;
    filter:blur(50px);
   z-index:10;
    background:#ffa500;
}
/* BLUR - with px versions added */
.backdrop-blur-1px, .backdrop-blur-1 { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
.backdrop-blur-2px, .backdrop-blur-2 { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.backdrop-blur-3px, .backdrop-blur-3 { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.backdrop-blur-4px, .backdrop-blur-4 { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.backdrop-blur-5px, .backdrop-blur-5 { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.backdrop-blur-10px, .backdrop-blur-10 { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.backdrop-blur-20px, .backdrop-blur-20 { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.backdrop-blur-25px, .backdrop-blur-25 { backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); }
.backdrop-blur-30px, .backdrop-blur-30 { backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }
.backdrop-blur-40px, .backdrop-blur-40 { backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); }
.backdrop-blur-50px, .backdrop-blur-50 { backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); }
.backdrop-blur-60px, .backdrop-blur-60 { backdrop-filter: blur(60px); -webkit-backdrop-filter: blur(60px); }
.backdrop-blur-70px, .backdrop-blur-70 { backdrop-filter: blur(70px); -webkit-backdrop-filter: blur(70px); }
.backdrop-blur-80px, .backdrop-blur-80 { backdrop-filter: blur(80px); -webkit-backdrop-filter: blur(80px); }
.backdrop-blur-90px, .backdrop-blur-90 { backdrop-filter: blur(90px); -webkit-backdrop-filter: blur(90px); }
.backdrop-blur-100px, .backdrop-blur-100 { backdrop-filter: blur(100px); -webkit-backdrop-filter: blur(100px); }

/* ===== ADDITIONAL BACKDROP FILTERS ===== */
.backdrop-blur-none { backdrop-filter: none; -webkit-backdrop-filter: none; }
.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.backdrop-blur-md { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.backdrop-blur-lg { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.backdrop-blur-xl { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.backdrop-blur-2xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.backdrop-blur-3xl { backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); }

/* ===== FILTER UTILITIES ===== */
.filter-none { filter: none; }
.filter-blur-1, .filter-blur-1px { filter: blur(1px); }
.filter-blur-2, .filter-blur-2px { filter: blur(2px); }
.filter-blur-3, .filter-blur-3px { filter: blur(3px); }
.filter-blur-4, .filter-blur-4px { filter: blur(4px); }
.filter-blur-5, .filter-blur-5px { filter: blur(5px); }
.filter-blur-10, .filter-blur-10px { filter: blur(10px); }
.filter-blur-20, .filter-blur-20px { filter: blur(20px); }
.filter-blur-30, .filter-blur-30px { filter: blur(30px); }
.filter-blur-40, .filter-blur-40px { filter: blur(40px); }
.filter-blur-50, .filter-blur-50px { filter: blur(50px); }
.filter-blur-sm { filter: blur(4px); }
.filter-blur-md { filter: blur(8px); }
.filter-blur-lg { filter: blur(12px); }
.filter-blur-xl { filter: blur(16px); }
.filter-blur-2xl { filter: blur(24px); }

.filter-brightness-0 { filter: brightness(0); }
.filter-brightness-25 { filter: brightness(0.25); }
.filter-brightness-50 { filter: brightness(0.5); }
.filter-brightness-75 { filter: brightness(0.75); }
.filter-brightness-90 { filter: brightness(0.9); }
.filter-brightness-100 { filter: brightness(1); }
.filter-brightness-125 { filter: brightness(1.25); }
.filter-brightness-150 { filter: brightness(1.5); }
.filter-brightness-200 { filter: brightness(2); }

.filter-contrast-0 { filter: contrast(0); }
.filter-contrast-25 { filter: contrast(0.25); }
.filter-contrast-50 { filter: contrast(0.5); }
.filter-contrast-75 { filter: contrast(0.75); }
.filter-contrast-100 { filter: contrast(1); }
.filter-contrast-125 { filter: contrast(1.25); }
.filter-contrast-150 { filter: contrast(1.5); }
.filter-contrast-200 { filter: contrast(2); }

.filter-grayscale-0 { filter: grayscale(0); }
.filter-grayscale-25 { filter: grayscale(0.25); }
.filter-grayscale-50 { filter: grayscale(0.5); }
.filter-grayscale-75 { filter: grayscale(0.75); }
.filter-grayscale-100 { filter: grayscale(1); }

.filter-hue-rotate-0 { filter: hue-rotate(0deg); }
.filter-hue-rotate-15 { filter: hue-rotate(15deg); }
.filter-hue-rotate-30 { filter: hue-rotate(30deg); }
.filter-hue-rotate-45 { filter: hue-rotate(45deg); }
.filter-hue-rotate-60 { filter: hue-rotate(60deg); }
.filter-hue-rotate-90 { filter: hue-rotate(90deg); }
.filter-hue-rotate-120 { filter: hue-rotate(120deg); }
.filter-hue-rotate-180 { filter: hue-rotate(180deg); }
.filter-hue-rotate-270 { filter: hue-rotate(270deg); }
.filter-hue-rotate-360 { filter: hue-rotate(360deg); }

.filter-invert-0 { filter: invert(0); }
.filter-invert-25 { filter: invert(0.25); }
.filter-invert-50 { filter: invert(0.5); }
.filter-invert-75 { filter: invert(0.75); }
.filter-invert-100 { filter: invert(1); }

.filter-saturate-0 { filter: saturate(0); }
.filter-saturate-25 { filter: saturate(0.25); }
.filter-saturate-50 { filter: saturate(0.5); }
.filter-saturate-75 { filter: saturate(0.75); }
.filter-saturate-100 { filter: saturate(1); }
.filter-saturate-150 { filter: saturate(1.5); }
.filter-saturate-200 { filter: saturate(2); }

.filter-sepia-0 { filter: sepia(0); }
.filter-sepia-25 { filter: sepia(0.25); }
.filter-sepia-50 { filter: sepia(0.5); }
.filter-sepia-75 { filter: sepia(0.75); }
.filter-sepia-100 { filter: sepia(1); }

.filter-drop-shadow-sm { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1)); }
.filter-drop-shadow { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
.filter-drop-shadow-md { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); }
.filter-drop-shadow-lg { filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4)); }
.filter-drop-shadow-xl { filter: drop-shadow(0 12px 24px rgba(0,0,0,0.5)); }
.filter-drop-shadow-2xl { filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6)); }
.filter-drop-shadow-none { filter: drop-shadow(none); }

/* ===== COMBINED FILTERS ===== */
.filter-grayscale { filter: grayscale(1); }
.filter-blur { filter: blur(8px); }
.filter-brightness { filter: brightness(1.5); }
.filter-contrast { filter: contrast(1.5); }
.filter-hue-rotate { filter: hue-rotate(90deg); }
.filter-invert { filter: invert(1); }
.filter-saturate { filter: saturate(2); }
.filter-sepia { filter: sepia(1); }
.filter-opacity-0 { filter: opacity(0); }
.filter-opacity-25 { filter: opacity(0.25); }
.filter-opacity-50 { filter: opacity(0.5); }
.filter-opacity-75 { filter: opacity(0.75); }
.filter-opacity-100 { filter: opacity(1); }

/* ===== ADDITIONAL POINTER EVENTS ===== */
.pointer-events-auto { pointer-events: auto; }
.pointer-events-all { pointer-events: all; }
.pointer-events-stroke { pointer-events: stroke; }
.pointer-events-filled { pointer-events: filled; }
.pointer-events-painted { pointer-events: painted; }
.pointer-events-visible { pointer-events: visible; }
.pointer-events-visible-stroke { pointer-events: visibleStroke; }
.pointer-events-visible-filled { pointer-events: visibleFilled; }
.pointer-events-visible-painted { pointer-events: visiblePainted; }
.pointer-events-bounding-box { pointer-events: bounding-box; }

/* ===== MORE OVERLAY VARIANTS ===== */
.overlay-center, .overlay-center.active {
    display:flex;
    align-items:center;
    justify-content:center;
}
.overlay-center .child {
    transform:scale(0.8);
    opacity:0;
    transition:all 0.3s ease;
}
.overlay-center.active .child {
    transform:scale(1);
    opacity:1;
}

/* ===== MORE POPUP VARIANTS ===== */
.popup-top {
    align-items:flex-start;
    padding-top:20px;
}
.popup-bottom {
    align-items:flex-end;
    padding-bottom:20px;
}
.popup-left {
    justify-content:flex-start;
    padding-left:20px;
}
.popup-right {
    justify-content:flex-end;
    padding-right:20px;
}
.popup-top-left {
    align-items:flex-start;
    justify-content:flex-start;
    padding:20px;
}
.popup-top-right {
    align-items:flex-start;
    justify-content:flex-end;
    padding:20px;
}
.popup-bottom-left {
    align-items:flex-end;
    justify-content:flex-start;
    padding:20px;
}
.popup-bottom-right {
    align-items:flex-end;
    justify-content:flex-end;
    padding:20px;
}

/* ===== MORE DRAWER VARIANTS ===== */
.drawer-left, .drawer-left.active {
    flex-direction:row;
    justify-content:flex-start;
}
.drawer-left > .child {
    margin-top:0;
    margin-right:auto;
    border-radius:0 20px 20px 0;
    transform:translateX(-100%);
    height:100%;
    max-width:300px;
    animation:draw-in-left 0.5s ease forwards;
}
@keyframes draw-in-left {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}

.drawer-right, .drawer-right.active {
    flex-direction:row;
    justify-content:flex-end;
}
.drawer-right > .child {
    margin-top:0;
    margin-left:auto;
    border-radius:20px 0 0 20px;
    transform:translateX(100%);
    height:100%;
    max-width:300px;
    animation:draw-in-right 0.5s ease forwards;
}
@keyframes draw-in-right {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0); }
}

.drawer-top, .drawer-top.active {
    flex-direction:column;
    justify-content:flex-start;
}
.drawer-top > .child {
    margin-top:0;
    margin-bottom:auto;
    border-radius:0 0 20px 20px;
    transform:translateY(-100%);
    max-height:300px;
    animation:draw-in-top 0.5s ease forwards;
}
@keyframes draw-in-top {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(0); }
}

/* ===== TOAST / NOTIFICATION ===== */
.toast {
    position:fixed;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    background:var(--bg);
    padding:12px 24px;
    border-radius:10px;
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
    z-index:9999;
    display:none;
    flex-direction:row;
    align-items:center;
    gap:12px;
    max-width:90%;
    animation:toast-in 0.3s ease forwards;
}
.toast.active {
    display:flex;
}
.toast.success {
    border-left:4px solid #28a745;
}
.toast.error {
    border-left:4px solid #dc3545;
}
.toast.warning {
    border-left:4px solid #ffc107;
}
.toast.info {
    border-left:4px solid #17a2b8;
}
@keyframes toast-in {
    0% { transform: translateX(-50%) translateY(20px); opacity:0; }
    100% { transform: translateX(-50%) translateY(0); opacity:1; }
}
@keyframes toast-out {
    0% { transform: translateX(-50%) translateY(0); opacity:1; }
    100% { transform: translateX(-50%) translateY(20px); opacity:0; }
}

/* ===== SHEET (Bottom Sheet) ===== */
.sheet {
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background:rgba(0,0,0,0.4);
    z-index:4000;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
}
.sheet.active {
    display:flex;
}
.sheet .child {
    width:100%;
    max-width:500px;
    background:var(--bg);
    border-radius:20px 20px 0 0;
    padding:20px;
    transform:translateY(100%);
    max-height:80%;
    overflow:auto;
    animation:sheet-in 0.4s ease forwards;
}
@keyframes sheet-in {
    0% { transform: translateY(100%); }
    100% { transform: translateY(0); }
}
.sheet .child .handle {
    width:40px;
    height:5px;
    background:var(--rgt-05);
    border-radius:1000px;
    margin:0 auto 15px auto;
}

/* ===== LOADING SPINNER ===== */
.spinner {
    display:inline-block;
    width:40px;
    height:40px;
    border:4px solid var(--rgt-02);
    border-top-color:var(--primary);
    border-radius:50%;
    animation:spin 0.8s linear infinite;
}
.spinner-sm {
    width:20px;
    height:20px;
    border-width:3px;
}
.spinner-lg {
    width:60px;
    height:60px;
    border-width:5px;
}
.spinner-xl {
    width:80px;
    height:80px;
    border-width:6px;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== SKELETON LOADING ===== */
.skeleton-text {
    height:1rem;
    background:var(--rgt-02);
    border-radius:4px;
    animation:pulse 1.5s ease-in-out infinite;
}
.skeleton-circle {
    width:50px;
    height:50px;
    border-radius:50%;
    background:var(--rgt-02);
    animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity:1; }
    50% { opacity:0.5; }
}

/* ===== TOOLTIP ===== */
.tooltip {
    position:relative;
    display:inline-block;
}
.tooltip .tip {
    position:absolute;
    bottom:100%;
    left:50%;
    transform:translateX(-50%) scale(0.8);
    background:rgba(0,0,0,0.8);
    color:white;
    padding:6px 12px;
    border-radius:6px;
    font-size:0.75rem;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    transition:all 0.2s ease;
    pointer-events:none;
    z-index:100;
}
.tooltip .tip::after {
    content:'';
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    border:6px solid transparent;
    border-top-color:rgba(0,0,0,0.8);
}
.tooltip:hover .tip {
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) scale(1);
}
.tooltip .tip-left {
    bottom:auto;
    top:50%;
    right:100%;
    left:auto;
    transform:translateY(-50%) scale(0.8);
}
.tooltip:hover .tip-left {
    transform:translateY(-50%) scale(1);
}
.tooltip .tip-right {
    bottom:auto;
    top:50%;
    left:100%;
    right:auto;
    transform:translateY(-50%) scale(0.8);
}
.tooltip:hover .tip-right {
    transform:translateY(-50%) scale(1);
}
.tooltip .tip-bottom {
    bottom:auto;
    top:100%;
    left:50%;
    transform:translateX(-50%) scale(0.8);
}
.tooltip:hover .tip-bottom {
    transform:translateX(-50%) scale(1);
}

/* ===== BADGE / PILL ===== */
.badge-pill {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 12px;
    border-radius:1000px;
    font-size:0.75rem;
    font-weight:600;
    background:var(--primary);
    color:white;
}
.badge-pill-sm {
    padding:2px 8px;
    font-size:0.65rem;
}
.badge-pill-lg {
    padding:8px 16px;
    font-size:0.875rem;
}
.badge-pill-success { background:#28a745; color:white; }
.badge-pill-danger { background:#dc3545; color:white; }
.badge-pill-warning { background:#ffc107; color:#333; }
.badge-pill-info { background:#17a2b8; color:white; }
.badge-pill-dark { background:#343a40; color:white; }
.badge-pill-light { background:#f8f9fa; color:#333; }

/* ===== DIVIDER ===== */
.divider {
    height:1px;
    background:var(--rgt-02);
    width:100%;
    margin:10px 0;
}
.divider-vertical {
    width:1px;
    height:100%;
    background:var(--rgt-02);
    margin:0 10px;
}
.divider-dashed {
    background:none;
    border-top:1px dashed var(--rgt-02);
}
.divider-dotted {
    background:none;
    border-top:1px dotted var(--rgt-02);
}
.divider-thick {
    height:2px;
}
.divider-thicker {
    height:3px;
}

/* ===== SCROLLBAR CUSTOM ===== */
.scrollbar-thin {
    scrollbar-width: thin;
}
.scrollbar-none {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.scrollbar-none::-webkit-scrollbar {
    display:none;
}
.scrollbar-auto {
    scrollbar-width: auto;
}
.scrollbar-track-primary::-webkit-scrollbar-track {
    background:var(--primary-transparent);
}
.scrollbar-thumb-primary::-webkit-scrollbar-thumb {
    background:var(--primary);
}
.scrollbar-rounded::-webkit-scrollbar {
    border-radius:10px;
}
.scrollbar-rounded::-webkit-scrollbar-track {
    border-radius:10px;
}
.scrollbar-rounded::-webkit-scrollbar-thumb {
    border-radius:10px;
}

/* ===== SELECTION ===== */
.selection-none { user-select:none; -webkit-user-select:none; }
.selection-all { user-select:all; -webkit-user-select:all; }
.selection-auto { user-select:auto; -webkit-user-select:auto; }
.selection-text { user-select:text; -webkit-user-select:text; }
.selection-contain { user-select:contain; -webkit-user-select:contain; }
@media(max-width:799px){
   
    .mobile-display-none{
        display:none;
    }
    
    /* ===== ADDITIONAL MOBILE UTILITIES ===== */
    .mobile-block, .mobile-d-block { display: block; }
    .mobile-flex, .mobile-d-flex { display: flex; }
    .mobile-grid, .mobile-d-grid { display: grid; }
    .mobile-inline-block, .mobile-d-inline-block { display: inline-block; }
    .mobile-inline-flex, .mobile-d-inline-flex { display: inline-flex; }
    .mobile-hidden, .mobile-visibility-hidden { visibility: hidden; }
    .mobile-visible, .mobile-visibility-visible { visibility: visible; }
    .mobile-opacity-0 { opacity: 0; }
    .mobile-opacity-50 { opacity: 0.5; }
    .mobile-opacity-100 { opacity: 1; }
    .mobile-relative { position: relative; }
    .mobile-absolute { position: absolute; }
    .mobile-fixed { position: fixed; }
    .mobile-sticky { position: sticky; }
    .mobile-top-0 { top: 0; }
    .mobile-bottom-0 { bottom: 0; }
    .mobile-left-0 { left: 0; }
    .mobile-right-0 { right: 0; }
    .mobile-inset-0 { inset: 0; }
    .mobile-z-index-10 { z-index: 10; }
    .mobile-z-index-20 { z-index: 20; }
    .mobile-z-index-50 { z-index: 50; }
    .mobile-z-index-100 { z-index: 100; }
    .mobile-z-index-1000 { z-index: 1000; }
    .mobile-column, .mobile-flex-column { display: flex; flex-direction: column; }
    .mobile-row, .mobile-flex-row { display: flex; flex-direction: row; }
    .mobile-wrap, .mobile-flex-wrap { flex-wrap: wrap; }
    .mobile-nowrap, .mobile-flex-nowrap { flex-wrap: nowrap; }
    .mobile-align-center, .mobile-items-center { align-items: center; }
    .mobile-align-start, .mobile-items-start { align-items: flex-start; }
    .mobile-align-end, .mobile-items-end { align-items: flex-end; }
    .mobile-align-stretch, .mobile-items-stretch { align-items: stretch; }
    .mobile-justify-center { justify-content: center; }
    .mobile-justify-start { justify-content: flex-start; }
    .mobile-justify-end { justify-content: flex-end; }
    .mobile-justify-between { justify-content: space-between; }
    .mobile-justify-around { justify-content: space-around; }
    .mobile-justify-evenly { justify-content: space-evenly; }
    .mobile-gap-1 { gap: 0.25rem; }
    .mobile-gap-2 { gap: 0.5rem; }
    .mobile-gap-3 { gap: 0.75rem; }
    .mobile-gap-4 { gap: 1rem; }
    .mobile-gap-5 { gap: 1.25rem; }
    .mobile-gap-6 { gap: 1.5rem; }
    .mobile-gap-8 { gap: 2rem; }
    .mobile-gap-10 { gap: 2.5rem; }
    .mobile-text-center { text-align: center; }
    .mobile-text-left { text-align: left; }
    .mobile-text-right { text-align: right; }
    .mobile-text-justify { text-align: justify; }
    .mobile-font-size-sm { font-size: 0.75rem; }
    .mobile-font-size-base { font-size: 0.875rem; }
    .mobile-font-size-lg { font-size: 1rem; }
    .mobile-font-size-xl { font-size: 1.25rem; }
    .mobile-font-size-2xl { font-size: 1.5rem; }
    .mobile-font-bold { font-weight: 700; }
    .mobile-font-semibold { font-weight: 600; }
    .mobile-font-medium { font-weight: 500; }
    .mobile-font-normal { font-weight: 400; }
    .mobile-font-light { font-weight: 300; }
    .mobile-width-full { width: 100%; }
    .mobile-width-auto { width: auto; }
    .mobile-width-50 { width: 50%; }
    .mobile-height-full { height: 100%; }
    .mobile-height-auto { height: auto; }
    .mobile-min-height-screen { min-height: 100vh; }
    .mobile-max-width-full { max-width: 100%; }
    .mobile-p-1 { padding: 0.25rem; }
    .mobile-p-2 { padding: 0.5rem; }
    .mobile-p-3 { padding: 0.75rem; }
    .mobile-p-4 { padding: 1rem; }
    .mobile-p-5 { padding: 1.25rem; }
    .mobile-p-6 { padding: 1.5rem; }
    .mobile-px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
    .mobile-px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
    .mobile-px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
    .mobile-px-4 { padding-left: 1rem; padding-right: 1rem; }
    .mobile-px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
    .mobile-px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .mobile-py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
    .mobile-py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .mobile-py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    .mobile-py-4 { padding-top: 1rem; padding-bottom: 1rem; }
    .mobile-py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
    .mobile-py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .mobile-p-top-1 { padding-top: 0.25rem; }
    .mobile-p-top-2 { padding-top: 0.5rem; }
    .mobile-p-top-3 { padding-top: 0.75rem; }
    .mobile-p-top-4 { padding-top: 1rem; }
    .mobile-p-top-5 { padding-top: 1.25rem; }
    .mobile-p-top-6 { padding-top: 1.5rem; }
    .mobile-p-bottom-1 { padding-bottom: 0.25rem; }
    .mobile-p-bottom-2 { padding-bottom: 0.5rem; }
    .mobile-p-bottom-3 { padding-bottom: 0.75rem; }
    .mobile-p-bottom-4 { padding-bottom: 1rem; }
    .mobile-p-bottom-5 { padding-bottom: 1.25rem; }
    .mobile-p-bottom-6 { padding-bottom: 1.5rem; }
    .mobile-p-left-1 { padding-left: 0.25rem; }
    .mobile-p-left-2 { padding-left: 0.5rem; }
    .mobile-p-left-3 { padding-left: 0.75rem; }
    .mobile-p-left-4 { padding-left: 1rem; }
    .mobile-p-left-5 { padding-left: 1.25rem; }
    .mobile-p-left-6 { padding-left: 1.5rem; }
    .mobile-p-right-1 { padding-right: 0.25rem; }
    .mobile-p-right-2 { padding-right: 0.5rem; }
    .mobile-p-right-3 { padding-right: 0.75rem; }
    .mobile-p-right-4 { padding-right: 1rem; }
    .mobile-p-right-5 { padding-right: 1.25rem; }
    .mobile-p-right-6 { padding-right: 1.5rem; }
    .mobile-m-1 { margin: 0.25rem; }
    .mobile-m-2 { margin: 0.5rem; }
    .mobile-m-3 { margin: 0.75rem; }
    .mobile-m-4 { margin: 1rem; }
    .mobile-m-5 { margin: 1.25rem; }
    .mobile-m-6 { margin: 1.5rem; }
    .mobile-m-x-auto { margin-left: auto; margin-right: auto; }
    .mobile-m-y-auto { margin-top: auto; margin-bottom: auto; }
    .mobile-m-top-1 { margin-top: 0.25rem; }
    .mobile-m-top-2 { margin-top: 0.5rem; }
    .mobile-m-top-3 { margin-top: 0.75rem; }
    .mobile-m-top-4 { margin-top: 1rem; }
    .mobile-m-top-5 { margin-top: 1.25rem; }
    .mobile-m-top-6 { margin-top: 1.5rem; }
    .mobile-m-bottom-1 { margin-bottom: 0.25rem; }
    .mobile-m-bottom-2 { margin-bottom: 0.5rem; }
    .mobile-m-bottom-3 { margin-bottom: 0.75rem; }
    .mobile-m-bottom-4 { margin-bottom: 1rem; }
    .mobile-m-bottom-5 { margin-bottom: 1.25rem; }
    .mobile-m-bottom-6 { margin-bottom: 1.5rem; }
    .mobile-m-left-1 { margin-left: 0.25rem; }
    .mobile-m-left-2 { margin-left: 0.5rem; }
    .mobile-m-left-3 { margin-left: 0.75rem; }
    .mobile-m-left-4 { margin-left: 1rem; }
    .mobile-m-left-5 { margin-left: 1.25rem; }
    .mobile-m-left-6 { margin-left: 1.5rem; }
    .mobile-m-right-1 { margin-right: 0.25rem; }
    .mobile-m-right-2 { margin-right: 0.5rem; }
    .mobile-m-right-3 { margin-right: 0.75rem; }
    .mobile-m-right-4 { margin-right: 1rem; }
    .mobile-m-right-5 { margin-right: 1.25rem; }
    .mobile-m-right-6 { margin-right: 1.5rem; }
    .mobile-overflow-hidden { overflow: hidden; }
    .mobile-overflow-auto { overflow: auto; }
    .mobile-overflow-scroll { overflow: scroll; }
    .mobile-rounded { border-radius: 0.25rem; }
    .mobile-rounded-lg { border-radius: 0.5rem; }
    .mobile-rounded-xl { border-radius: 0.75rem; }
    .mobile-rounded-2xl { border-radius: 1rem; }
    .mobile-rounded-full { border-radius: 9999px; }
    .mobile-shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
    .mobile-shadow-lg { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
    .mobile-shadow-xl { box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
    .mobile-border { border: 1px solid var(--rgt-02); }
    .mobile-border-top { border-top: 1px solid var(--rgt-02); }
    .mobile-border-bottom { border-bottom: 1px solid var(--rgt-02); }
    .mobile-border-left { border-left: 1px solid var(--rgt-02); }
    .mobile-border-right { border-right: 1px solid var(--rgt-02); }
    .mobile-cursor-pointer { cursor: pointer; }
    .mobile-cursor-default { cursor: default; }
    .mobile-cursor-not-allowed { cursor: not-allowed; }
    .mobile-pointer-events-none { pointer-events: none; }
    .mobile-pointer-events-auto { pointer-events: auto; }
    .mobile-order-first { order: -1; }
    .mobile-order-last { order: 999; }
    .mobile-order-1 { order: 1; }
    .mobile-order-2 { order: 2; }
    .mobile-order-3 { order: 3; }
    .mobile-flex-1 { flex: 1; }
    .mobile-flex-none { flex: none; }
    .mobile-flex-grow { flex-grow: 1; }
    .mobile-flex-shrink { flex-shrink: 1; }
    .mobile-flex-shrink-0 { flex-shrink: 0; }
}
@media(min-width:800px){
     body{
        font-size:0.9rem;
    }
    .pc-m-x-auto{
        margin-left:auto;
        margin-right:auto;
    }
    .pc-align-center{
        align-items:center;
    }
    .pc-place-center{
        place-items:center;
    }
    .pc-column{
        display:flex;
        flex-direction:column;
    }
    .pc-text-center{
        text-align: center;
    }
    .pc-justify-center{
        align-items:center;
        justify-content:center;
    }
    .pc-space-between{
        justify-content:space-between;
    }
    .pc-pointer{
        cursor:pointer;
    }
    .pc-grid{
        display:grid;
    }
    .pc-grid-4{
    grid-template-columns: repeat(4,1fr);
}
  .pc-grid-3{
    grid-template-columns: repeat(3,1fr);
}
    .pc-grid-8{
    grid-template-columns: repeat(8,1fr);
}

 .pc-grid-6{
    grid-template-columns: repeat(6,1fr);
}
.pc-grid-2{
    grid-template-columns: repeat(2,1fr);
}
.pc-x-padding{
    padding-left:10vw;
    padding-right:10vw;

}
.pc-display-none{
    display:none;
}
.pc-max-vw{
    max-width:calc(100vw - 20vw);
}

/* ===== ADDITIONAL PC UTILITIES ===== */
.pc-block, .pc-d-block { display: block; }
.pc-flex, .pc-d-flex { display: flex; }
.pc-inline-flex, .pc-d-inline-flex { display: inline-flex; }
.pc-inline-block, .pc-d-inline-block { display: inline-block; }
.pc-grid, .pc-d-grid { display: grid; }
.pc-hidden, .pc-visibility-hidden { visibility: hidden; }
.pc-visible, .pc-visibility-visible { visibility: visible; }
.pc-relative { position: relative; }
.pc-absolute { position: absolute; }
.pc-fixed { position: fixed; }
.pc-sticky { position: sticky; }
.pc-top-0 { top: 0; }
.pc-bottom-0 { bottom: 0; }
.pc-left-0 { left: 0; }
.pc-right-0 { right: 0; }
.pc-inset-0 { inset: 0; }
.pc-z-index-10 { z-index: 10; }
.pc-z-index-20 { z-index: 20; }
.pc-z-index-50 { z-index: 50; }
.pc-z-index-100 { z-index: 100; }
.pc-z-index-1000 { z-index: 1000; }
.pc-row, .pc-flex-row { display: flex; flex-direction: row; }
.pc-flex-row-reverse { flex-direction: row-reverse; }
.pc-flex-col-reverse { flex-direction: column-reverse; }
.pc-wrap, .pc-flex-wrap { flex-wrap: wrap; }
.pc-nowrap, .pc-flex-nowrap { flex-wrap: nowrap; }
.pc-align-center { align-items: center; }
.pc-align-start { align-items: flex-start; }
.pc-align-end { align-items: flex-end; }
.pc-align-stretch { align-items: stretch; }
.pc-align-baseline { align-items: baseline; }
.pc-justify-start { justify-content: flex-start; }
.pc-justify-end { justify-content: flex-end; }
.pc-justify-center { justify-content: center; }
.pc-justify-between { justify-content: space-between; }
.pc-justify-around { justify-content: space-around; }
.pc-justify-evenly { justify-content: space-evenly; }
.pc-gap-1 { gap: 0.25rem; }
.pc-gap-2 { gap: 0.5rem; }
.pc-gap-3 { gap: 0.75rem; }
.pc-gap-4 { gap: 1rem; }
.pc-gap-5 { gap: 1.25rem; }
.pc-gap-6 { gap: 1.5rem; }
.pc-gap-8 { gap: 2rem; }
.pc-gap-10 { gap: 2.5rem; }
.pc-gap-12 { gap: 3rem; }
.pc-gap-16 { gap: 4rem; }
.pc-text-left { text-align: left; }
.pc-text-right { text-align: right; }
.pc-text-justify { text-align: justify; }
.pc-font-size-sm { font-size: 0.75rem; }
.pc-font-size-base { font-size: 0.875rem; }
.pc-font-size-lg { font-size: 1rem; }
.pc-font-size-xl { font-size: 1.25rem; }
.pc-font-size-2xl { font-size: 1.5rem; }
.pc-font-size-3xl { font-size: 1.875rem; }
.pc-font-size-4xl { font-size: 2.25rem; }
.pc-font-bold { font-weight: 700; }
.pc-font-semibold { font-weight: 600; }
.pc-font-medium { font-weight: 500; }
.pc-font-normal { font-weight: 400; }
.pc-font-light { font-weight: 300; }
.pc-width-full { width: 100%; }
.pc-width-auto { width: auto; }
.pc-width-50 { width: 50%; }
.pc-width-33 { width: 33.333%; }
.pc-width-25 { width: 25%; }
.pc-width-75 { width: 75%; }
.pc-height-full { height: 100%; }
.pc-height-auto { height: auto; }
.pc-height-screen { height: 100vh; }
.pc-min-height-screen { min-height: 100vh; }
.pc-max-width-full { max-width: 100%; }
.pc-max-width-screen { max-width: 100vw; }
.pc-p-1 { padding: 0.25rem; }
.pc-p-2 { padding: 0.5rem; }
.pc-p-3 { padding: 0.75rem; }
.pc-p-4 { padding: 1rem; }
.pc-p-5 { padding: 1.25rem; }
.pc-p-6 { padding: 1.5rem; }
.pc-p-8 { padding: 2rem; }
.pc-p-10 { padding: 2.5rem; }
.pc-p-12 { padding: 3rem; }
.pc-p-16 { padding: 4rem; }
.pc-px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.pc-px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.pc-px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.pc-px-4 { padding-left: 1rem; padding-right: 1rem; }
.pc-px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.pc-px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.pc-px-8 { padding-left: 2rem; padding-right: 2rem; }
.pc-px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.pc-py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.pc-py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.pc-py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.pc-py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.pc-py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.pc-py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.pc-py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.pc-py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.pc-p-top-1 { padding-top: 0.25rem; }
.pc-p-top-2 { padding-top: 0.5rem; }
.pc-p-top-3 { padding-top: 0.75rem; }
.pc-p-top-4 { padding-top: 1rem; }
.pc-p-top-5 { padding-top: 1.25rem; }
.pc-p-top-6 { padding-top: 1.5rem; }
.pc-p-top-8 { padding-top: 2rem; }
.pc-p-top-10 { padding-top: 2.5rem; }
.pc-p-bottom-1 { padding-bottom: 0.25rem; }
.pc-p-bottom-2 { padding-bottom: 0.5rem; }
.pc-p-bottom-3 { padding-bottom: 0.75rem; }
.pc-p-bottom-4 { padding-bottom: 1rem; }
.pc-p-bottom-5 { padding-bottom: 1.25rem; }
.pc-p-bottom-6 { padding-bottom: 1.5rem; }
.pc-p-bottom-8 { padding-bottom: 2rem; }
.pc-p-bottom-10 { padding-bottom: 2.5rem; }
.pc-p-left-1 { padding-left: 0.25rem; }
.pc-p-left-2 { padding-left: 0.5rem; }
.pc-p-left-3 { padding-left: 0.75rem; }
.pc-p-left-4 { padding-left: 1rem; }
.pc-p-left-5 { padding-left: 1.25rem; }
.pc-p-left-6 { padding-left: 1.5rem; }
.pc-p-left-8 { padding-left: 2rem; }
.pc-p-left-10 { padding-left: 2.5rem; }
.pc-p-right-1 { padding-right: 0.25rem; }
.pc-p-right-2 { padding-right: 0.5rem; }
.pc-p-right-3 { padding-right: 0.75rem; }
.pc-p-right-4 { padding-right: 1rem; }
.pc-p-right-5 { padding-right: 1.25rem; }
.pc-p-right-6 { padding-right: 1.5rem; }
.pc-p-right-8 { padding-right: 2rem; }
.pc-p-right-10 { padding-right: 2.5rem; }
.pc-m-1 { margin: 0.25rem; }
.pc-m-2 { margin: 0.5rem; }
.pc-m-3 { margin: 0.75rem; }
.pc-m-4 { margin: 1rem; }
.pc-m-5 { margin: 1.25rem; }
.pc-m-6 { margin: 1.5rem; }
.pc-m-8 { margin: 2rem; }
.pc-m-10 { margin: 2.5rem; }
.pc-m-12 { margin: 3rem; }
.pc-m-x-auto { margin-left: auto; margin-right: auto; }
.pc-m-y-auto { margin-top: auto; margin-bottom: auto; }
.pc-m-top-1 { margin-top: 0.25rem; }
.pc-m-top-2 { margin-top: 0.5rem; }
.pc-m-top-3 { margin-top: 0.75rem; }
.pc-m-top-4 { margin-top: 1rem; }
.pc-m-top-5 { margin-top: 1.25rem; }
.pc-m-top-6 { margin-top: 1.5rem; }
.pc-m-top-8 { margin-top: 2rem; }
.pc-m-top-10 { margin-top: 2.5rem; }
.pc-m-bottom-1 { margin-bottom: 0.25rem; }
.pc-m-bottom-2 { margin-bottom: 0.5rem; }
.pc-m-bottom-3 { margin-bottom: 0.75rem; }
.pc-m-bottom-4 { margin-bottom: 1rem; }
.pc-m-bottom-5 { margin-bottom: 1.25rem; }
.pc-m-bottom-6 { margin-bottom: 1.5rem; }
.pc-m-bottom-8 { margin-bottom: 2rem; }
.pc-m-bottom-10 { margin-bottom: 2.5rem; }
.pc-m-left-1 { margin-left: 0.25rem; }
.pc-m-left-2 { margin-left: 0.5rem; }
.pc-m-left-3 { margin-left: 0.75rem; }
.pc-m-left-4 { margin-left: 1rem; }
.pc-m-left-5 { margin-left: 1.25rem; }
.pc-m-left-6 { margin-left: 1.5rem; }
.pc-m-left-8 { margin-left: 2rem; }
.pc-m-left-10 { margin-left: 2.5rem; }
.pc-m-right-1 { margin-right: 0.25rem; }
.pc-m-right-2 { margin-right: 0.5rem; }
.pc-m-right-3 { margin-right: 0.75rem; }
.pc-m-right-4 { margin-right: 1rem; }
.pc-m-right-5 { margin-right: 1.25rem; }
.pc-m-right-6 { margin-right: 1.5rem; }
.pc-m-right-8 { margin-right: 2rem; }
.pc-m-right-10 { margin-right: 2.5rem; }
.pc-overflow-hidden { overflow: hidden; }
.pc-overflow-auto { overflow: auto; }
.pc-overflow-scroll { overflow: scroll; }
.pc-overflow-y-auto { overflow-y: auto; }
.pc-overflow-x-auto { overflow-x: auto; }
.pc-rounded { border-radius: 0.25rem; }
.pc-rounded-md { border-radius: 0.375rem; }
.pc-rounded-lg { border-radius: 0.5rem; }
.pc-rounded-xl { border-radius: 0.75rem; }
.pc-rounded-2xl { border-radius: 1rem; }
.pc-rounded-3xl { border-radius: 1.5rem; }
.pc-rounded-full { border-radius: 9999px; }
.pc-shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.pc-shadow-md { box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.pc-shadow-lg { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.pc-shadow-xl { box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.pc-shadow-2xl { box-shadow: 0 16px 48px rgba(0,0,0,0.25); }
.pc-shadow-none { box-shadow: none; }
.pc-border { border: 1px solid var(--rgt-02); }
.pc-border-2 { border: 2px solid var(--rgt-02); }
.pc-border-top { border-top: 1px solid var(--rgt-02); }
.pc-border-bottom { border-bottom: 1px solid var(--rgt-02); }
.pc-border-left { border-left: 1px solid var(--rgt-02); }
.pc-border-right { border-right: 1px solid var(--rgt-02); }
.pc-border-primary { border-color: var(--primary); }
.pc-border-secondary { border-color: var(--secondary); }
.pc-border-transparent { border-color: transparent; }
.pc-cursor-pointer { cursor: pointer; }
.pc-cursor-default { cursor: default; }
.pc-cursor-not-allowed { cursor: not-allowed; }
.pc-cursor-grab { cursor: grab; }
.pc-cursor-grabbing { cursor: grabbing; }
.pc-pointer-events-none { pointer-events: none; }
.pc-pointer-events-auto { pointer-events: auto; }
.pc-order-first { order: -1; }
.pc-order-last { order: 999; }
.pc-order-1 { order: 1; }
.pc-order-2 { order: 2; }
.pc-order-3 { order: 3; }
.pc-flex-1 { flex: 1; }
.pc-flex-none { flex: none; }
.pc-flex-grow { flex-grow: 1; }
.pc-flex-grow-0 { flex-grow: 0; }
.pc-flex-shrink { flex-shrink: 1; }
.pc-flex-shrink-0 { flex-shrink: 0; }
.pc-transition { transition: all 0.3s ease; }
.pc-transition-fast { transition: all 0.15s ease; }
.pc-transition-slow { transition: all 0.6s ease; }
.pc-hover-scale:hover { transform: scale(1.05); }
.pc-hover-opacity:hover { opacity: 0.8; }
.pc-hover-shadow:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.pc-grid-1 { grid-template-columns: repeat(1, 1fr); }
.pc-grid-5 { grid-template-columns: repeat(5, 1fr); }
.pc-grid-7 { grid-template-columns: repeat(7, 1fr); }
.pc-grid-9 { grid-template-columns: repeat(9, 1fr); }
.pc-grid-10 { grid-template-columns: repeat(10, 1fr); }
.pc-grid-12 { grid-template-columns: repeat(12, 1fr); }
.pc-gap-x-1 { column-gap: 0.25rem; }
.pc-gap-x-2 { column-gap: 0.5rem; }
.pc-gap-x-3 { column-gap: 0.75rem; }
.pc-gap-x-4 { column-gap: 1rem; }
.pc-gap-x-5 { column-gap: 1.25rem; }
.pc-gap-x-6 { column-gap: 1.5rem; }
.pc-gap-y-1 { row-gap: 0.25rem; }
.pc-gap-y-2 { row-gap: 0.5rem; }
.pc-gap-y-3 { row-gap: 0.75rem; }
.pc-gap-y-4 { row-gap: 1rem; }
.pc-gap-y-5 { row-gap: 1.25rem; }
.pc-gap-y-6 { row-gap: 1.5rem; }
.pc-bg-primary { background: var(--primary); }
.pc-bg-secondary { background: var(--secondary); }
.pc-bg-transparent { background: transparent; }
.pc-text-primary { color: var(--primary); }
.pc-text-secondary { color: var(--secondary); }
.pc-text-white { color: white; }
.pc-text-black { color: black; }
.pc-uppercase { text-transform: uppercase; }
.pc-lowercase { text-transform: lowercase; }
.pc-capitalize { text-transform: capitalize; }
.pc-underline { text-decoration: underline; }
.pc-line-through { text-decoration: line-through; }
.pc-no-underline { text-decoration: none; }
}