/*Цвета из tailwindcss*/
:root {

    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;

    --stone-200: #e7e5e4;
    --stone-300: #d6d3d1;

    --neutral-50: #fafafa;

    --indigo-50: #eef2ff;

    --blue-100: #dbeafe;
    --blue-400: #60a5fa;

    --sky-50: #f0f9ff;
    --sky-100: #e0f2fe;
    --sky-200: #bae6fd;
    --sky-300: #7dd3fc;
    --sky-400: #38bdf8;
    --sky-500: #0ea5e9;
    --sky-600: #0284c7;
    --sky-700: #1d4ed8;
    --sky-900: #0c4a6e;

    --cyan-300: #67e8f9;
    --cyan-500: #06b6d4;

    --yellow-200: #fef08a;
    --yellow-50: #fefce8;
    --yellow-100: #fef9c3;
    --yellow-300: #fde047;
    --yellow-400: #facc15;
    --yellow-500: #eab308;
    --yellow-600: #ca8a04;

    --red-50: #fef2f2;
    --red-100: #fee2e2;
    --red-200: #fecaca;
    --red-400: #f87171;
    --red-500: #ef4444;
    --red-600: #dc2626;

    --emerald-50: #ecfdf5;
    --emerald-100: #d1fae5;
    --emerald-200: #a7f3d0;
    --emerald-400: #34d399;
    --emerald-500: #10b981;
    --emerald-600: #059669;
    --emerald-800: #065f46;
}

.transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.row-warning {
    background-color: color-mix(in srgb, var(--yellow-50), transparent 5%) !important;
    border-color: color-mix(in srgb, var(--yellow-400), transparent 50%) !important;
    color: var(--yellow-600) !important;
}

.row-success {
    background-color: var(--emerald-50) !important;
    border-color: var(--emerald-200) !important;
    color: var(--emerald-600);
}

.row-danger {
    background-color: color-mix(in srgb, var(--red-50), transparent 5%) !important;
    border-color: var(--red-200) !important;
    color: var(--red-600) !important;
}


.b-outline {
    background: transparent;
}

.b-warning {
    background-color: var(--yellow-500);
}

.b-blue-600 {
    background: #2563eb;
}

.b-sky-50 {
    background: var(--sky-50);
}

.b-sky-100 {
    background: var(--sky-100);
}

.b-sky-200 {
    background: var(--sky-200);
}

.b-sky-400 {
    background: #38bdf8;
}

.b-sky-500 {
    background: #0ea5e9;
}

.b-sky-500:hover {
    background-color: #0b96d6;
}

.bd-b-light {
    border-bottom: 1px solid var(--gray-200);
}

.bd-sky-500 {
    border-color: #0ea5e9;
}

.b-sky-600 {
    background: #0284c7;
}

.b-emerald-400 {
    background: var(--emerald-400);
}

/*.b-emerald-500 {*/
/*    background: var(--emerald-500);*/
/*}*/

.b-success {
    background: var(--emerald-500);
}

.b-cyan-300 {
    background: #67e8f9;
}

.b-cyan-400 {
    background: #22d3ee;
}

.b-cyan-500 {
    background-color: var(--cyan-500);
}

.b-gray-200 {
    background: #e5e7eb;
}

.b-danger {
    background: var(--red-500);
}

.t-gray-100 {
    color: var(--gray-100)
}

.t-gray-200 {
    color: var(--gray-200)
}

.t-gray-400 {
    color: var(--gray-400)
}

.t-gray-500 {
    color: var(--gray-500);
}

.t-gray-600 {
    color: var(--gray-600);
}

.t-stone-200 {
    color: var(--stone-200);
}

.t-stone-300 {
    color: var(--stone-300);
}

.t-sky-400 {
    color: var(--sky-400);
}

.t-sky-600 {
    color: var(--sky-600);
}

.t-danger {
    color: var(--red-500);
}

.t-success {
    color: var(--emerald-500);
}

.t-emerald-800 {
    color: var(--emerald-800);
}

.btn-outline-primary-b {
    background: transparent;
    border-color: var(--sky-400);
    color: var(--sky-400);
}

.btn-outline-primary-b:hover {
    background: var(--sky-500);
    color: white;
}

.btn-success-e {
    background: var(--emerald-500);
    color: white;
}
.btn-success-e:hover {
    background: var(--emerald-600);
    color: white;
}

.btn-success-g {
    background: #4ade80;
    color: white;
}

.btn-secondary-gr {
    background: var(--gray-100);
    color: #6b7280;
}

.btn-gray-200 {
    background: var(--gray-200);
    color: var(--gray-600);
}