/*/////////////////////////////////////////////////////////*/
/*////////////////////   S  V  G  s  //////////////////////*/
/*/////////////////////////////////////////////////////////*/
svg.global {
    background-color: transparent;
    display: block;
}


/*///////////////////////  C O L O U R S  ////////////*/
/*////////////////////////////////////////////////////*/
svg.darkGray path {
    fill: #30363d;
}
svg.lightGray path {
    fill: #c8c8c8;
}
svg.blue path {
    fill: #58a6ff;
}
svg.red path {
    fill: #f85149;
}
svg.white path {
    fill: #f8f8f8;
}
svg.black path {
    fill: #0d1117;
}
svg.green path {
    fill: #3fb950;
}
svg.yellow path {
    fill: #f9e71e;
}
svg.orange path {
    fill: #ff8c00;
}
svg.purple path {
    fill: #8b5cf6;
}
svg.pink path {
    fill: #ff69b4;
}
svg.cyan path {
    fill: #00bcd4;
}
svg.teal path {
    fill: #20b2aa;
}
svg.lime path {
    fill: #32cd32;
}
svg.indigo path {
    fill: #4b0082;
}
svg.violet path {
    fill: #8a2be2;
}
svg.magenta path {
    fill: #ff00ff;
}
svg.emerald path {
    fill: #50c878;
}
svg.amber path {
    fill: #ffbf00;
}
svg.rose path {
    fill: #ff007f;
}
svg.slate path {
    fill: #708090;
}
svg.zinc path {
    fill: #71717a;
}
svg.stone path {
    fill: #78716c;
}
svg.neutral path {
    fill: #737373;
}
svg.sky path {
    fill: #0ea5e9;
}
svg.azure path {
    fill: #007fff;
}
svg.mint path {
    fill: #00ff7f;
}
svg.coral path {
    fill: #ff7f50;
}
svg.salmon path {
    fill: #fa8072;
}
svg.gold path {
    fill: #ffd700;
}
svg.silver path {
    fill: #c0c0c0;
}
svg.bronze path {
    fill: #cd7f32;
}
svg.crimson path {
    fill: #dc143c;
}
svg.navy path {
    fill: #000080;
}
svg.maroon path {
    fill: #800000;
}
svg.olive path {
    fill: #808000;
}
svg.aqua path {
    fill: #00ffff;
}
svg.fuchsia path {
    fill: #ff00ff;
}
/*////////////////////////////////////////////////////*/



/*////////////////////  S H A D E S  ///////////////////*/
/*///////////////////////////  H U E S  ////////////////*/
svg.darkBlue path {
    fill: #1f2937;
}
svg.lightBlue path {
    fill: #bfdbfe;
}
svg.darkGreen path {
    fill: #065f46;
}
svg.lightGreen path {
    fill: #bbf7d0;
}
svg.darkRed path {
    fill: #7f1d1d;
}
svg.lightRed path {
    fill: #fecaca;
}
svg.darkPurple path {
    fill: #581c87;
}
svg.lightPurple path {
    fill: #ddd6fe;
}
svg.darkOrange path {
    fill: #9a3412;
}
svg.lightOrange path {
    fill: #fed7aa;
}
svg.darkYellow path {
    fill: #a16207;
}
svg.lightYellow path {
    fill: #fef3c7;
}
/*////////////////////////////////////////////////////*/



/*//////////////////////////  F I L T E R E D  ///////*/
/*////////////////////////////////////////////////////*/
svg.shadow {
    filter: drop-shadow(0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1));
}
svg.blur {
    filter: blur(0.0312rem);
}
svg.brightness {
    filter: brightness(1.2);
}
svg.contrast {
    filter: contrast(1.2);
}
svg.grayscale {
    filter: grayscale(100%);
}
svg.sepia {
    filter: sepia(100%);
}
svg.invert {
    filter: invert(100%);
}
svg.hueRotate path {
    filter: hue-rotate(90deg);
}
svg.saturate path {
    filter: saturate(150%);
}
/*////////////////////////////////////////////////////*/



/*//////////////////////////  S I Z I N G ////////////*/
/*////////////////////////////////////////////////////*/
svg.tiny {
    width: 0.75rem;
    height: 0.75rem;
}
svg.small {
    width: 0.975rem;
    height: 0.975rem;
}
svg.medium {
    width: 1.5625rem;
    height: 1.5625rem;
}
svg.large {
    width: 2.25rem;
    height: 2.25rem;
}
svg.xlarge {
    width: 3.5rem;
    height: 3.5rem;
}
svg.xxlarge {
    width: 4.5rem;
    height: 4.5rem;
}
svg.huge {
    width: 6rem;
    height: 6rem;
}
svg.massive {
    width: 8rem;
    height: 8rem;
}

svg.xs {
    width: 1rem;
    height: 1rem;
}
svg.sm {
    width: 1.25rem;
    height: 1.25rem;
}
svg.md {
    width: 1.75rem;
    height: 1.75rem;
}
svg.lg {
    width: 2.5rem;
    height: 2.5rem;
}
svg.xl {
    width: 3rem;
    height: 3rem;
}
svg.xxl {
    width: 4rem;
    height: 4rem;
}

svg.rounded {
    border-radius: 0.375rem;
}
svg.circular {
    border-radius: 50%;
}
/*////////////////////////////////////////////////////*/



/*/////////////////  A N I M A T I O N S  ////////////*/
/*////////////////////////////////////////////////////*/
svg.spin {
    animation: spin 1s linear infinite;
}
svg.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
svg.bounce {
    animation: bounce 1s infinite;
}
svg.ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
svg.wiggle {
    animation: wiggle 1s ease-in-out infinite;
}
svg.fadeIn {
    animation: fadeIn 0.5s ease-in-out;
}
svg.slideIn {
    animation: slideIn 0.3s ease-out;
}
svg.zoomIn {
    animation: zoomIn 0.3s ease-out;
}
/*////////////////////////////////////////////////////*/



/*//////////////  I N T E R A C T I O N S   //////////*/
/*////////////////////////////////////////////////////*/
svg.hover:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}
svg.clickable {
    cursor: pointer;
    transition: all 0.2s ease;
}
svg.clickable:hover {
    opacity: 0.8;
}
svg.disabled {
    opacity: 0.5;
    pointer-events: none;
}
svg.active {
    transform: scale(0.95);
}
/*////////////////////////////////////////////////////*/




/*/////////////////  B A C K G R O U N D S  //////////*/
/*///////////////////////  B O R D E R S  ////////////*/
svg.bgWhite {
    background-color: #ffffff;
}
svg.bgBlack {
    background-color: #000000;
}
svg.bgGray {
    background-color: #f3f4f6;
}
svg.bgDark {
    background-color: #1f2937;
}
svg.bgBlue {
    background-color: #dbeafe;
}
svg.bgGreen {
    background-color: #d1fae5;
}
svg.bgRed {
    background-color: #fee2e2;
}
svg.bgYellow {
    background-color: #fef3c7;
}
svg.bgPurple {
    background-color: #ede9fe;
}
svg.bgPink {
    background-color: #fce7f3;
}

svg.border {
    border: 0.0625rem solid #e5e7eb;
}
svg.borderDark {
    border: 0.0625rem solid #374151;
}
svg.borderLight {
    border: 0.0625rem solid #f3f4f6;
}
svg.borderThick {
    border: 0.125rem solid #6b7280;
}
svg.borderDashed {
    border: 0.0625rem dashed #9ca3af;
}
svg.borderDotted {
    border: 0.0625rem dotted #9ca3af;
}
svg.icon-beat-fade {
    animation: beatFade var(--beat-fade-duration, 1.5s) ease-in-out infinite;
    transform-origin: center;
    display: inline-block;
}
/*////////////////////////////////////////////////////*/



/*//////////////////  K E Y F R A M E S  /////////////*/
/*////////////////////////////////////////////////////*/
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% { transform: translate3d(0, 0, 0); }
    40%, 43% { transform: translate3d(0, -1.875rem, 0); }
    70% { transform: translate3d(0, -0.9375rem, 0); }
    90% { transform: translate3d(0, -0.25rem, 0); }
}
@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}
@keyframes wiggle {
    0%, 7% { transform: rotateZ(0); }
    15% { transform: rotateZ(-15deg); }
    20% { transform: rotateZ(10deg); }
    25% { transform: rotateZ(-10deg); }
    30% { transform: rotateZ(6deg); }
    35% { transform: rotateZ(-4deg); }
    40%, 100% { transform: rotateZ(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideIn {
    from { transform: translateY(-0.625rem); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes zoomIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes beatFade {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(var(--beat-fade-scale, 1.075));
        opacity: var(--beat-fade-opacity, 0.67);
    }
}
/*////////////////////////////////////////////////////*/