@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* Theme colors */
:root {
    --theme-primary: #009ca6ff;
    --theme-secondary: #e2a615ff;
    --theme-tertiary: #d50032ff;

    --theme-success: #28a745ff;
    --theme-danger: #dc3545ff;
    --theme-warning: #ffc107ff;
    --theme-info: #17a2b8ff;

    --theme-light: #f8f9faff;
    --theme-dark: #343a40ff;

    --theme-body: #212529ff;
    --theme-muted: #6c757dff;
    
    --theme-white: #ffffffff;
    --theme-gray: #6c757dff;
    --theme-gray-dark: #343a40ff;
    --theme-blue: #007bffff;
    --theme-blue-transparent: #007bff40; 
    --theme-blue-light: #80bdff;
    --theme-indigo: #6610f2ff;
    --theme-purple: #6f42c1ff;
    --theme-pink: #e83e8cff;
    --theme-red: #dc3545ff;
    --theme-orange: #fd7e14ff;
    --theme-yellow: #ffc107ff;
    --theme-green-light: #bcedc6;
    --theme-teal: #20c997ff;
    --theme-cyan: #17a2b8ff;

    --theme-black-50: #00000080;
    --theme-white-50: #ffffff80;
}

/* Blazor CSS */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--theme-success);
}

.invalid {
    outline: 1px solid var(--theme-danger);
}

.validation-message {
    color: var(--theme-danger);
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px var(--theme-black-50);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/************************************************
 * Custom stuff not part of the Blazor template *
 ************************************************/

.menu .nav {
    background-image: linear-gradient(180deg, var(--theme-dark), var(--theme-body));
}

.menu .nav .nav-item a {
	color: var(--theme-white);
}

.menu .nav .nav-item a.active {
	background-color: rgba(255, 255, 255, 0.5);
	color: var(--theme-light);
}

.menu .nav .nav-item a:hover {
	background-color: rgba(255, 255, 255, 0.75);
	color: var(--theme-light);
}

.svg-line-stroke {
    /* Using the defined colors in the styling */
    stroke: var(--theme-primary);
}

.dropzone {
    background-image: linear-gradient(180deg, var(--theme-white-50), var(--theme-blue-transparent), var(--theme-white-50));
}

.custom-border {
    color: var(--theme-gray-dark);
    background-color: var(--theme-white);
    border-color: var(--theme-blue-light);
    border: 1px solid var(--theme-blue-light);
    border-radius: .25rem;
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--theme-blue-transparent);
}

/* Using a media query to change styling */
@media (min-width: 1280px) {
    .svg-line-stroke {
        stroke: var(--theme-secondary);
    }
}

.svg-back-fill {
    fill: var(--theme-body);
}