@tailwind base;
@tailwind components;
@tailwind utilities;

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}


/* For manual darkmode via classes */

.light {
    --white: 255, 255, 255;
    /* Slate */
    --slate-50: 248, 250, 252;
    --slate-100: 242, 247, 250;
    --slate-200: 226, 232, 240;
    --slate-300: 203, 213, 225;
    --slate-400: 148, 163, 184;
    --slate-500: 100, 116, 139;
    --slate-600: 71, 85, 105;
    --slate-700: 51, 65, 85;
    --slate-800: 30, 41, 59;
    --slate-900: 15, 23, 42;
    --slate-950: 2, 6, 23;
    /* Blue */
    --blue-50: 235, 241, 255;
    --blue-100: 219, 234, 254;
    --blue-200: 191, 214, 254;
    --blue-300: 147, 186, 253;
    --blue-400: 96, 145, 246;
    --blue-500: 59, 106, 246;
    --blue-600: 37, 77, 235;
    --blue-700: 28, 63, 205;
    --blue-800: 22, 7, 148;
    --blue-900: 14, 32, 104;
    --blue-950: 5, 16, 61;
    /* Green */
    --green-50: 240, 253, 244;
    --green-100: 220, 252, 231;
    --green-200: 187, 247, 208;
    --green-300: 134, 239, 172;
    --green-400: 74, 222, 128;
    --green-500: 34, 197, 94;
    --green-600: 22, 163, 74;
    --green-700: 21, 128, 61;
    --green-800: 22, 101, 52;
    --green-900: 20, 83, 45;
    --green-950: 5, 46, 22;
    /* Yellow */
    --yellow-50: 254, 252, 232;
    --yellow-100: 254, 249, 195;
    --yellow-200: 254, 240, 138;
    --yellow-300: 253, 224, 71;
    --yellow-400: 250, 204, 21;
    --yellow-500: 234, 179, 8;
    --yellow-600: 202, 138, 4;
    --yellow-700: 161, 98, 7;
    --yellow-800: 133, 77, 14;
    --yellow-900: 113, 63, 18;
    --yellow-950: 66, 32, 6;
    /* Orange */
    --orange-50: 255, 247, 237;
    --orange-100: 255, 237, 213;
    --orange-200: 254, 215, 170;
    --orange-300: 253, 186, 116;
    --orange-400: 251, 146, 60;
    --orange-500: 249, 115, 22;
    --orange-600: 234, 88, 12;
    --orange-700: 194, 65, 12;
    --orange-800: 154, 52, 18;
    --orange-900: 124, 45, 18;
    --orange-950: 67, 20, 7;
    /* Red */
    --red-50: 254, 242, 242;
    --red-100: 254, 226, 226;
    --red-200: 254, 202, 202;
    --red-300: 252, 165, 165;
    --red-400: 248, 113, 113;
    --red-500: 239, 68, 68;
    --red-600: 220, 38, 38;
    --red-700: 185, 28, 28;
    --red-800: 153, 27, 27;
    --red-900: 127, 29, 29;
    --red-950: 69, 10, 10;
}


/* ------------DARKMODE------------- */



.dark {
    --white: 33, 40, 59; /* cards, navigation, sidebars, header bars, active tabs */
    /* Slate */

    --slate-50: 1, 15, 25;
    --slate-100: 18, 25, 43; /* Main background, Row selected, tab slider bg, file upload on hover, dropdown item hover, accordion element bg */
    --slate-200: 56, 68, 100;
    --slate-300: 109, 120, 146;
    --slate-400: 146, 150, 165;
    --slate-500: 192, 198, 219;
    --slate-600: 219, 224, 241;
    --slate-700: 233, 237, 249;
    --slate-800: 247, 249, 255;
    --slate-900: 251, 252, 252;
    --slate-950: 251, 252, 252; /* Text */
    /* Blue */
    --blue-50: 5, 16, 61;
    --blue-100: 14, 32, 104;
    --blue-200: 22, 47, 148;
    --blue-300: 28, 63, 205;
    --blue-400: 37, 77, 235;
    --blue-500: 59, 106, 246; /* Main button color, text in info banners, active icons */
    --blue-600: 96, 145, 250;
    --blue-700: 147, 168, 253;
    --blue-800: 191, 214, 254;
    --blue-900: 219, 234, 254;
    --blue-950: 235, 241, 255;
    /* Green */
    --green-50: 5, 46, 22;
    --green-100: 20, 83, 45;
    --green-200: 22, 101, 52;
    --green-300: 21, 128, 61;
    --green-400: 22, 163, 74;
    --green-500: 22, 163, 74;
    --green-600: 74, 222, 128;
    --green-700: 134, 239, 172;
    --green-800: 187, 247, 208;
    --green-900: 220, 252, 231;
    --green-950: 240, 253, 244;
    /* Yellow */
    --yellow-50: 66, 32, 6;
    --yellow-100: 113, 63, 18;
    --yellow-200: 133, 77, 14;
    --yellow-300: 161, 98, 7;
    --yellow-400: 202, 138, 4;
    --yellow-500: 234, 179, 8;
    --yellow-600: 250, 204, 21;
    --yellow-700: 253, 224, 71;
    --yellow-800: 254, 240, 138;
    --yellow-900: 254, 249, 195;
    --yellow-950: 254, 252, 232;
    /* Orange */
    --orange-50: 67, 20, 7;
    --orange-100: 124, 45, 18;
    --orange-200: 154, 52, 18;
    --orange-300: 194, 65, 12;
    --orange-400: 234, 88, 12;
    --orange-500: 249, 115, 22;
    --orange-600: 251, 146, 60;
    --orange-700: 253, 186, 116;
    --orange-800: 254, 215, 170;
    --orange-900: 255, 237, 213;
    --orange-950: 255, 247, 237;
    /* Red */
    --red-50: 69, 10, 10;
    --red-100: 127, 29, 29;
    --red-200: 153, 27, 27;
    --red-300: 185, 28, 28;
    --red-400: 220, 38, 38;
    --red-500: 239, 68, 68;
    --red-600: 248, 113, 113;
    --red-700: 252, 165, 165;
    --red-800: 254, 202, 202;
    --red-900: 254, 226, 226;
    --red-950: 69, 10, 10;
}