/*************************************
 **************************************
 ** BACKGROUND COLORS
 **************************************
 *************************************/
.bg-gray-50 {
    background-color: var(--gray-50) !important;
}
.bg-gray-100 {
    background-color: var(--gray-100) !important;
}
.bg-gray-200 {
    background-color: var(--gray-200) !important;
}
.bg-gray-300 {
    background-color: var(--gray-300) !important;
}
.bg-gray-400 {
    background-color: var(--gray-400) !important;
}
.bg-gray-500 {
    background-color: var(--gray-500) !important;
}
.bg-gray-600 {
    background-color: var(--gray-600) !important;
}
.bg-gray-700 {
    background-color: var(--gray-700) !important;
}
.bg-gray-800 {
    background-color: var(--gray-800) !important;
}
.bg-gray-900 {
    background-color: var(--gray-900) !important;
}
.bg-blue-50 {
    background-color: var(--blue-50) !important;
}
.bg-blue-100 {
    background-color: var(--blue-100) !important;
}
.bg-blue-200 {
    background-color: var(--blue-200) !important;
}
.bg-blue-300 {
    background-color: var(--blue-300) !important;
}
.bg-blue-400 {
    background-color: var(--blue-400) !important;
}
.bg-blue-500 {
    background-color: var(--blue-500) !important;
}
.bg-blue-600 {
    background-color: var(--blue-600) !important;
}
.bg-blue-700 {
    background-color: var(--blue-700) !important;
}
.bg-blue-800 {
    background-color: var(--blue-800) !important;
}
.bg-blue-900 {
    background-color: var(--blue-900) !important;
}
.bg-purple-50 {
    background-color: var(--purple-50) !important;
}
.bg-purple-100 {
    background-color: var(--purple-100) !important;
}
.bg-purple-200 {
    background-color: var(--purple-200) !important;
}
.bg-purple-300 {
    background-color: var(--purple-300) !important;
}
.bg-purple-400 {
    background-color: var(--purple-400) !important;
}
.bg-purple-500 {
    background-color: var(--purple-500) !important;
}
.bg-purple-600 {
    background-color: var(--purple-600) !important;
}
.bg-purple-700 {
    background-color: var(--purple-700) !important;
}
.bg-purple-800 {
    background-color: var(--purple-800) !important;
}
.bg-purple-900 {
    background-color: var(--purple-900) !important;
}
.bg-orange-50 {
    background-color: var(--orange-50) !important;
}
.bg-orange-100 {
    background-color: var(--orange-100) !important;
}
.bg-orange-200 {
    background-color: var(--orange-200) !important;
}
.bg-orange-300 {
    background-color: var(--orange-300) !important;
}
.bg-orange-400 {
    background-color: var(--orange-400) !important;
}
.bg-orange-500 {
    background-color: var(--orange-500) !important;
}
.bg-orange-600 {
    background-color: var(--orange-600) !important;
}
.bg-orange-700 {
    background-color: var(--orange-700) !important;
}
.bg-orange-800 {
    background-color: var(--orange-800) !important;
}
.bg-orange-900 {
    background-color: var(--orange-900) !important;
}
.bg-red-50 {
    background-color: var(--red-50) !important;
}
.bg-red-100 {
    background-color: var(--red-100) !important;
}
.bg-red-200 {
    background-color: var(--red-200) !important;
}
.bg-red-300 {
    background-color: var(--red-300) !important;
}
.bg-red-400 {
    background-color: var(--red-400) !important;
}
.bg-red-500 {
    background-color: var(--red-500) !important;
}
.bg-red-600 {
    background-color: var(--red-600) !important;
}
.bg-red-700 {
    background-color: var(--red-700) !important;
}
.bg-red-800 {
    background-color: var(--red-800) !important;
}
.bg-red-900 {
    background-color: var(--red-900) !important;
}
.bg-yellow-50 {
    background-color: var(--yellow-50) !important;
}
.bg-yellow-100 {
    background-color: var(--yellow-100) !important;
}
.bg-yellow-200 {
    background-color: var(--yellow-200) !important;
}
.bg-yellow-300 {
    background-color: var(--yellow-300) !important;
}
.bg-yellow-400 {
    background-color: var(--yellow-400) !important;
}
.bg-yellow-500 {
    background-color: var(--yellow-500) !important;
}
.bg-yellow-600 {
    background-color: var(--yellow-600) !important;
}
.bg-yellow-700 {
    background-color: var(--yellow-700) !important;
}
.bg-yellow-800 {
    background-color: var(--yellow-800) !important;
}
.bg-yellow-900 {
    background-color: var(--yellow-900) !important;
}
.bg-green-50 {
    background-color: var(--green-50) !important;
}
.bg-green-100 {
    background-color: var(--green-100) !important;
}
.bg-green-200 {
    background-color: var(--green-200) !important;
}
.bg-green-300 {
    background-color: var(--green-300) !important;
}
.bg-green-400 {
    background-color: var(--green-400) !important;
}
.bg-green-500 {
    background-color: var(--green-500) !important;
}
.bg-green-600 {
    background-color: var(--green-600) !important;
}
.bg-green-700 {
    background-color: var(--green-700) !important;
}
.bg-green-800 {
    background-color: var(--green-800) !important;
}
.bg-green-900 {
    background-color: var(--green-900) !important;
}

/*************************************
 **************************************
 ** BORDER COLORS
 **************************************
 *************************************/
.border-gray-50 {
    border-color: var(--gray-50) !important;
}
.border-gray-100 {
    border-color: var(--gray-100) !important;
}
.border-gray-200 {
    border-color: var(--gray-200) !important;
}
.border-gray-300 {
    border-color: var(--gray-300) !important;
}
.border-gray-400 {
    border-color: var(--gray-400) !important;
}
.border-gray-500 {
    border-color: var(--gray-500) !important;
}
.border-gray-600 {
    border-color: var(--gray-600) !important;
}
.border-gray-700 {
    border-color: var(--gray-700) !important;
}
.border-gray-800 {
    border-color: var(--gray-800) !important;
}
.border-gray-900 {
    border-color: var(--gray-900) !important;
}
.border-blue-50 {
    border-color: var(--blue-50) !important;
}
.border-blue-100 {
    border-color: var(--blue-100) !important;
}
.border-blue-200 {
    border-color: var(--blue-200) !important;
}
.border-blue-300 {
    border-color: var(--blue-300) !important;
}
.border-blue-400 {
    border-color: var(--blue-400) !important;
}
.border-blue-500 {
    border-color: var(--blue-500) !important;
}
.border-blue-600 {
    border-color: var(--blue-600) !important;
}
.border-blue-700 {
    border-color: var(--blue-700) !important;
}
.border-blue-800 {
    border-color: var(--blue-800) !important;
}
.border-blue-900 {
    border-color: var(--blue-900) !important;
}
.border-purple-50 {
    border-color: var(--purple-50) !important;
}
.border-purple-100 {
    border-color: var(--purple-100) !important;
}
.border-purple-200 {
    border-color: var(--purple-200) !important;
}
.border-purple-300 {
    border-color: var(--purple-300) !important;
}
.border-purple-400 {
    border-color: var(--purple-400) !important;
}
.border-purple-500 {
    border-color: var(--purple-500) !important;
}
.border-purple-600 {
    border-color: var(--purple-600) !important;
}
.border-purple-700 {
    border-color: var(--purple-700) !important;
}
.border-purple-800 {
    border-color: var(--purple-800) !important;
}
.border-purple-900 {
    border-color: var(--purple-900) !important;
}
.border-orange-50 {
    border-color: var(--orange-50) !important;
}
.border-orange-100 {
    border-color: var(--orange-100) !important;
}
.border-orange-200 {
    border-color: var(--orange-200) !important;
}
.border-orange-300 {
    border-color: var(--orange-300) !important;
}
.border-orange-400 {
    border-color: var(--orange-400) !important;
}
.border-orange-500 {
    border-color: var(--orange-500) !important;
}
.border-orange-600 {
    border-color: var(--orange-600) !important;
}
.border-orange-700 {
    border-color: var(--orange-700) !important;
}
.border-orange-800 {
    border-color: var(--orange-800) !important;
}
.border-orange-900 {
    border-color: var(--orange-900) !important;
}
.border-red-50 {
    border-color: var(--red-50) !important;
}
.border-red-100 {
    border-color: var(--red-100) !important;
}
.border-red-200 {
    border-color: var(--red-200) !important;
}
.border-red-300 {
    border-color: var(--red-300) !important;
}
.border-red-400 {
    border-color: var(--red-400) !important;
}
.border-red-500 {
    border-color: var(--red-500) !important;
}
.border-red-600 {
    border-color: var(--red-600) !important;
}
.border-red-700 {
    border-color: var(--red-700) !important;
}
.border-red-800 {
    border-color: var(--red-800) !important;
}
.border-red-900 {
    border-color: var(--red-900) !important;
}
.border-yellow-50 {
    border-color: var(--yellow-50) !important;
}
.border-yellow-100 {
    border-color: var(--yellow-100) !important;
}
.border-yellow-200 {
    border-color: var(--yellow-200) !important;
}
.border-yellow-300 {
    border-color: var(--yellow-300) !important;
}
.border-yellow-400 {
    border-color: var(--yellow-400) !important;
}
.border-yellow-500 {
    border-color: var(--yellow-500) !important;
}
.border-yellow-600 {
    border-color: var(--yellow-600) !important;
}
.border-yellow-700 {
    border-color: var(--yellow-700) !important;
}
.border-yellow-800 {
    border-color: var(--yellow-800) !important;
}
.border-yellow-900 {
    border-color: var(--yellow-900) !important;
}
.border-green-50 {
    border-color: var(--green-50) !important;
}
.border-green-100 {
    border-color: var(--green-100) !important;
}
.border-green-200 {
    border-color: var(--green-200) !important;
}
.border-green-300 {
    border-color: var(--green-300) !important;
}
.border-green-400 {
    border-color: var(--green-400) !important;
}
.border-green-500 {
    border-color: var(--green-500) !important;
}
.border-green-600 {
    border-color: var(--green-600) !important;
}
.border-green-700 {
    border-color: var(--green-700) !important;
}
.border-green-800 {
    border-color: var(--green-800) !important;
}
.border-green-900 {
    border-color: var(--green-900) !important;
}

/*************************************
 **************************************
 ** TEXT COLORS
 **************************************
 *************************************/
.text-gray-50 {
    color: var(--gray-50) !important;
}
.text-gray-100 {
    color: var(--gray-100) !important;
}
.text-gray-200 {
    color: var(--gray-200) !important;
}
.text-gray-300 {
    color: var(--gray-300) !important;
}
.text-gray-400 {
    color: var(--gray-400) !important;
}
.text-gray-500 {
    color: var(--gray-500) !important;
}
.text-gray-600 {
    color: var(--gray-600) !important;
}
.text-gray-700 {
    color: var(--gray-700) !important;
}
.text-gray-800 {
    color: var(--gray-800) !important;
}
.text-gray-900 {
    color: var(--gray-900) !important;
}
.text-blue-50 {
    color: var(--blue-50) !important;
}
.text-blue-100 {
    color: var(--blue-100) !important;
}
.text-blue-200 {
    color: var(--blue-200) !important;
}
.text-blue-300 {
    color: var(--blue-300) !important;
}
.text-blue-400 {
    color: var(--blue-400) !important;
}
.text-blue-500 {
    color: var(--blue-500) !important;
}
.text-blue-600 {
    color: var(--blue-600) !important;
}
.text-blue-700 {
    color: var(--blue-700) !important;
}
.text-blue-800 {
    color: var(--blue-800) !important;
}
.text-blue-900 {
    color: var(--blue-900) !important;
}
.text-purple-50 {
    color: var(--purple-50) !important;
}
.text-purple-100 {
    color: var(--purple-100) !important;
}
.text-purple-200 {
    color: var(--purple-200) !important;
}
.text-purple-300 {
    color: var(--purple-300) !important;
}
.text-purple-400 {
    color: var(--purple-400) !important;
}
.text-purple-500 {
    color: var(--purple-500) !important;
}
.text-purple-600 {
    color: var(--purple-600) !important;
}
.text-purple-700 {
    color: var(--purple-700) !important;
}
.text-purple-800 {
    color: var(--purple-800) !important;
}
.text-purple-900 {
    color: var(--purple-900) !important;
}
.text-orange-50 {
    color: var(--orange-50) !important;
}
.text-orange-100 {
    color: var(--orange-100) !important;
}
.text-orange-200 {
    color: var(--orange-200) !important;
}
.text-orange-300 {
    color: var(--orange-300) !important;
}
.text-orange-400 {
    color: var(--orange-400) !important;
}
.text-orange-500 {
    color: var(--orange-500) !important;
}
.text-orange-600 {
    color: var(--orange-600) !important;
}
.text-orange-700 {
    color: var(--orange-700) !important;
}
.text-orange-800 {
    color: var(--orange-800) !important;
}
.text-orange-900 {
    color: var(--orange-900) !important;
}
.text-red-50 {
    color: var(--red-50) !important;
}
.text-red-100 {
    color: var(--red-100) !important;
}
.text-red-200 {
    color: var(--red-200) !important;
}
.text-red-300 {
    color: var(--red-300) !important;
}
.text-red-400 {
    color: var(--red-400) !important;
}
.text-red-500 {
    color: var(--red-500) !important;
}
.text-red-600 {
    color: var(--red-600) !important;
}
.text-red-700 {
    color: var(--red-700) !important;
}
.text-red-800 {
    color: var(--red-800) !important;
}
.text-red-900 {
    color: var(--red-900) !important;
}
.text-yellow-50 {
    color: var(--yellow-50) !important;
}
.text-yellow-100 {
    color: var(--yellow-100) !important;
}
.text-yellow-200 {
    color: var(--yellow-200) !important;
}
.text-yellow-300 {
    color: var(--yellow-300) !important;
}
.text-yellow-400 {
    color: var(--yellow-400) !important;
}
.text-yellow-500 {
    color: var(--yellow-500) !important;
}
.text-yellow-600 {
    color: var(--yellow-600) !important;
}
.text-yellow-700 {
    color: var(--yellow-700) !important;
}
.text-yellow-800 {
    color: var(--yellow-800) !important;
}
.text-yellow-900 {
    color: var(--yellow-900) !important;
}
.text-green-50 {
    color: var(--green-50) !important;
}
.text-green-100 {
    color: var(--green-100) !important;
}
.text-green-200 {
    color: var(--green-200) !important;
}
.text-green-300 {
    color: var(--green-300) !important;
}
.text-green-400 {
    color: var(--green-400) !important;
}
.text-green-500 {
    color: var(--green-500) !important;
}
.text-green-600 {
    color: var(--green-600) !important;
}
.text-green-700 {
    color: var(--green-700) !important;
}
.text-green-800 {
    color: var(--green-800) !important;
}
.text-green-900 {
    color: var(--green-900) !important;
}

/*************************************
 **************************************
 ** FILL COLORS
 **************************************
 *************************************/
.fill-gray-50 {
    fill: var(--gray-50) !important;
}
.fill-gray-100 {
    fill: var(--gray-100) !important;
}
.fill-gray-200 {
    fill: var(--gray-200) !important;
}
.fill-gray-300 {
    fill: var(--gray-300) !important;
}
.fill-gray-400 {
    fill: var(--gray-400) !important;
}
.fill-gray-500 {
    fill: var(--gray-500) !important;
}
.fill-gray-600 {
    fill: var(--gray-600) !important;
}
.fill-gray-700 {
    fill: var(--gray-700) !important;
}
.fill-gray-800 {
    fill: var(--gray-800) !important;
}
.fill-gray-900 {
    fill: var(--gray-900) !important;
}
.fill-blue-50 {
    fill: var(--blue-50) !important;
}
.fill-blue-100 {
    fill: var(--blue-100) !important;
}
.fill-blue-200 {
    fill: var(--blue-200) !important;
}
.fill-blue-300 {
    fill: var(--blue-300) !important;
}
.fill-blue-400 {
    fill: var(--blue-400) !important;
}
.fill-blue-500 {
    fill: var(--blue-500) !important;
}
.fill-blue-600 {
    fill: var(--blue-600) !important;
}
.fill-blue-700 {
    fill: var(--blue-700) !important;
}
.fill-blue-800 {
    fill: var(--blue-800) !important;
}
.fill-blue-900 {
    fill: var(--blue-900) !important;
}
.fill-purple-50 {
    fill: var(--purple-50) !important;
}
.fill-purple-100 {
    fill: var(--purple-100) !important;
}
.fill-purple-200 {
    fill: var(--purple-200) !important;
}
.fill-purple-300 {
    fill: var(--purple-300) !important;
}
.fill-purple-400 {
    fill: var(--purple-400) !important;
}
.fill-purple-500 {
    fill: var(--purple-500) !important;
}
.fill-purple-600 {
    fill: var(--purple-600) !important;
}
.fill-purple-700 {
    fill: var(--purple-700) !important;
}
.fill-purple-800 {
    fill: var(--purple-800) !important;
}
.fill-purple-900 {
    fill: var(--purple-900) !important;
}
.fill-orange-50 {
    fill: var(--orange-50) !important;
}
.fill-orange-100 {
    fill: var(--orange-100) !important;
}
.fill-orange-200 {
    fill: var(--orange-200) !important;
}
.fill-orange-300 {
    fill: var(--orange-300) !important;
}
.fill-orange-400 {
    fill: var(--orange-400) !important;
}
.fill-orange-500 {
    fill: var(--orange-500) !important;
}
.fill-orange-600 {
    fill: var(--orange-600) !important;
}
.fill-orange-700 {
    fill: var(--orange-700) !important;
}
.fill-orange-800 {
    fill: var(--orange-800) !important;
}
.fill-orange-900 {
    fill: var(--orange-900) !important;
}
.fill-red-50 {
    fill: var(--red-50) !important;
}
.fill-red-100 {
    fill: var(--red-100) !important;
}
.fill-red-200 {
    fill: var(--red-200) !important;
}
.fill-red-300 {
    fill: var(--red-300) !important;
}
.fill-red-400 {
    fill: var(--red-400) !important;
}
.fill-red-500 {
    fill: var(--red-500) !important;
}
.fill-red-600 {
    fill: var(--red-600) !important;
}
.fill-red-700 {
    fill: var(--red-700) !important;
}
.fill-red-800 {
    fill: var(--red-800) !important;
}
.fill-red-900 {
    fill: var(--red-900) !important;
}
.fill-yellow-50 {
    fill: var(--yellow-50) !important;
}
.fill-yellow-100 {
    fill: var(--yellow-100) !important;
}
.fill-yellow-200 {
    fill: var(--yellow-200) !important;
}
.fill-yellow-300 {
    fill: var(--yellow-300) !important;
}
.fill-yellow-400 {
    fill: var(--yellow-400) !important;
}
.fill-yellow-500 {
    fill: var(--yellow-500) !important;
}
.fill-yellow-600 {
    fill: var(--yellow-600) !important;
}
.fill-yellow-700 {
    fill: var(--yellow-700) !important;
}
.fill-yellow-800 {
    fill: var(--yellow-800) !important;
}
.fill-yellow-900 {
    fill: var(--yellow-900) !important;
}
.fill-green-50 {
    fill: var(--green-50) !important;
}
.fill-green-100 {
    fill: var(--green-100) !important;
}
.fill-green-200 {
    fill: var(--green-200) !important;
}
.fill-green-300 {
    fill: var(--green-300) !important;
}
.fill-green-400 {
    fill: var(--green-400) !important;
}
.fill-green-500 {
    fill: var(--green-500) !important;
}
.fill-green-600 {
    fill: var(--green-600) !important;
}
.fill-green-700 {
    fill: var(--green-700) !important;
}
.fill-green-800 {
    fill: var(--green-800) !important;
}
.fill-green-900 {
    fill: var(--green-900) !important;
}

/*************************************
 **************************************
 ** BORDERS
 **************************************
 *************************************/
 .border-dashed {
    border-style: dashed !important;
}
.border-1 {
    border-width: 1px !important;
}
.border-2 {
    border-width: 2px !important;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn-modern {
    --btn-bg: var(--blue-600);
    --btn-bg-hover: var(--blue-600);
    --btn-bg-active: var(--blue-800);
    --btn-color: #fff;
    --btn-border: var(--blue-500);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    min-height: 42px;
    padding: 0.625rem 1.125rem;

    border: 1px solid var(--btn-border);
    border-radius: 10px;

    background-color: var(--btn-bg);
    color: var(--btn-color);

    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;

    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
    user-select: none;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 2px 6px rgba(0, 136, 240, 0.18);

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.btn-modern:hover {
    background-color: var(--btn-bg-hover);
    border-color: var(--btn-bg-hover);

    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.08),
        0 5px 14px rgba(0, 136, 240, 0.22);

    transform: translateY(-1px);
}

.btn-modern:active {
    background-color: var(--btn-bg-active);
    border-color: var(--btn-bg-active);

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.08),
        0 2px 5px rgba(0, 136, 240, 0.16);

    transform: translateY(0);
}

.btn-modern:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 3px var(--blue-100),
        0 2px 6px rgba(0, 136, 240, 0.2);
}

.btn-modern:disabled,
.btn-modern.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}


/* =========================================================
   OUTLINE
   ========================================================= */

.btn-modern-outline {
    --btn-bg: transparent;
    --btn-bg-hover: var(--blue-50);
    --btn-bg-active: var(--blue-100);
    --btn-color: var(--blue-600);
    --btn-border: var(--blue-300);

    box-shadow: none;
}

.btn-modern-outline:hover {
    color: var(--blue-700);
    border-color: var(--blue-500);
    box-shadow: none;
}

.btn-modern-outline:active {
    color: var(--blue-800);
    border-color: var(--blue-600);
}


/* =========================================================
   SOFT
   ========================================================= */

.btn-modern-soft {
    --btn-bg: var(--blue-50);
    --btn-bg-hover: var(--blue-100);
    --btn-bg-active: var(--blue-200);
    --btn-color: var(--blue-700);
    --btn-border: transparent;

    box-shadow: none;
}

.btn-modern-soft:hover {
    color: var(--blue-800);
    border-color: transparent;
    box-shadow: none;
}


/* =========================================================
   SIZES
   ========================================================= */

.btn-modern-sm {
    min-height: 34px;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8125rem;
}

.btn-modern-lg {
    min-height: 48px;
    padding: 0.75rem 1.4rem;
    border-radius: 12px;
    font-size: 0.9375rem;
}


/* =========================================================
   ICON BUTTON
   ========================================================= */

.btn-modern-icon {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
}

.btn-modern-icon svg {
    width: 18px;
    height: 18px;
}


/* =========================================================
   BUTTON WITH ICON
   ========================================================= */

.btn-modern svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;

    flex-shrink: 0;
}