:root {
    --blue: #00aeef;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #ef3f3e;
    --orange: #fd7e14;
    --yellow: #fff200;
    --yellow-dark: #e7d200;
    --green: #28a745;
    --green-light: #7ae791;
    --teal: #20c997;
    --teal-dark: #20a17b;
    --cyan: #1396c7;
    --cyan-dark: #197698;
    --white: #fff;
    --gray: #989898;
    --gray-dark: #525252;
    --primary: #d72f2e;
    --secondary: #bea70e;
    --success: #28a745;
    --info: #ce7917;
    --warning: #ff920e;
    --danger: #e11764;
    --magenta-light: #ffa1c3;
    --magenta: #e11764;
    --magenta-dark: #b91c58;
    --light: #f8f9fa;
    --dark: #6c6c6c;
    --placeholder: #e7cc3c;
    --placeholder-box: #dcdcdc;
    --placeholder-box-0: #eee;
    --green-orange: #849d37;
    --gray-blue: #2984af;
    --gray-green: #5b8664;
    --gray-yellow: #a89d5c;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: Vazirmatn, sans-serif, Tahoma;
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

#navbarApp.navbar-top {
    background: var(--red);
}

#navbarApp a.navbar-link:hover, a.navbar-link.active {
    /*background: var(--gray-dark);*/
    color: var(--gray-dark) !important;
}
#bottomSection .admin-links {border-top: 1px solid var(--gray-dark);}
a {color: var(--magenta);}
a:hover {color: var(--magenta-dark);}

.bg-primary {
    background-color: var(--primary) !important;
}
.bg-secondary {
    background-color: var(--secondary) !important;
}
.btn-danger, .bg-danger, .badge-danger {
    background-color: var(--danger);
    border-color: var(--danger);
}
.btn-danger:hover, .btn-danger:not(:disabled):not(.disabled):active {
    background-color: var(--magenta-dark);
    border-color: var(--magenta-dark);
}
.btn-warning, .bg-warning, .badge-warning {
    background-color: var(--yellow);
    border-color: var(--yellow);
}
.btn-warning:hover, .btn-warning:not(:disabled):not(.disabled):active {
    background-color: var(--yellow-dark);
    border-color: var(--yellow-dark);
}
.btn-info, .bg-info, .badge-info {
    background-color: var(--cyan);
}
.btn-info:hover, .btn-info:not(:disabled):not(.disabled):active{
    background-color: var(--cyan-dark);
}
.btn-success, .bg-success, .badge-success {
    background-color: var(--teal);
    border-color: var(--teal);
}
.btn-success:hover, .btn-success:not(:disabled):not(.disabled):active {
    background-color: var(--teal-dark);
    border-color: var(--teal-dark);
}
.text-danger {
    color: var(--danger);
}
.text-warning {
    color: var(--yellow);
}
.alert-danger {
    background-color: var(--magenta-light);
    border-color: var(--magenta);
}