:root {
    --primary-color-light: #04050c;
    --primary-color-medium: #1c1e35;
    --primary-color-darker: #111221;
    --primary-color-dark: #04050c;
    --button-darker: #242849;
    --contrast-color-light: #15a44d;
    --contrast-color-dark: #0d7b38;
}
.alert-danger {
    background-color: #791c2c !important;
    color: #ffb5c1 !important;
}
html {
    background-image: linear-gradient(#13141f, rgb(4 5 12 / 1));
    background-position: top;
    background-repeat: no-repeat;
    background-color:rgb(4 5 12 / 1);
    min-height: 500px;
    background-position-y: 59px;
}
body {
    background-color:initial;
}
.text-primary{
    color:white !important;
}
.btn-darker{
    background-color: var(--button-darker) !important;
}
.dashboard hr{
    border-top: 2px solid;
    opacity: 1;
    color: rgb(114 125 161 / 0.15); 
}
hr{
    border-top: 2px solid;
    opacity: 1;
    color: var(--contrast-color-light);
}
header nav.bg-white{
    background-color: rgb(22 24 40) !important;
    -moz-box-shadow: 0px -2px 20px 1px #000;
    -webkit-box-shadow: 0px -2px 20px 1px #000;
    box-shadow: 0px -2px 20px 1px #000;
}
ul.dropdown-menu {
    background-color: #3566b6 !important;
    border: none;
}
div.dropdown-menu {
    background-color: var(--contrast-color-dark) !important;
}
div.dropdown-menu .employeeChip input.form-check-input:checked:focus,
div.dropdown-menu .employeeChip input.form-check-input:focus,
#EmployeeModalSelector .employeeChip input.form-check-input:checked:focus,
#EmployeeModalSelector .employeeChip input.form-check-input:focus {
    border-color: var(--contrast-color-dark) !important;
}
#EmployeeFilterDropdownMenu{
    height: 250px !important;
    overflow: scroll;
}
ul.dropdown-menu a, div.dropdown-menu a{
    color: white !important;
}
.employeeChip{
    background-color: var(--contrast-color-light);
    color: white;
}
.chip:hover:not(.chip-outline) {
    background-color: #28b55f !important;
}
.dropdown-item.active, .dropdown-item:active, .dropdown-item:focus, .dropdown-item:hover {
    background-color: var(--contrast-color-light);
}
.card{
    background-color: rgb(22 24 40) !important;
    border-color: rgb(114 125 161) !important;
    border: 1px solid !important;
    border-radius: 10px;
    color: rgb(114 125 161 / 0.15) !important;
}
.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.card p,
.card label,
table.datatable, 
.datatable table,
.datatable table p,
.datatable-pagination-nav,
.table-editor table,
.select-wrapper input,
.form-outline input,
.form-outline label.form-label,
.table>:not(caption)>*>* {
    color: white !important;
} 
.card h6.text-black{
    color: #000 !important;
}
INPUT:-webkit-autofill, 
SELECT:-webkit-autofill, 
TEXTAREA:-webkit-autofill {
    animation-name: onautofillstart;
    -webkit-background-clip: text;
    box-shadow: inset 0 0 20px 20px rgb(0 0 0 / 0) !important;
    -webkit-box-shadow: 0 0 20px 20px rgb(0 0 0 / 0) inset !important;
}
input.no-autofill-bkg:-webkit-autofill {
    -webkit-background-clip: text;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
INPUT:-webkit-autofill
SELECT:-webkit-autofill, 
TEXTAREA:-webkit-autofill,
INPUT:-webkit-autofill:hover, 
INPUT:-webkit-autofill:focus, 
INPUT:-webkit-autofill:active, 
SELECT:-webkit-autofill:hover, 
SELECT:-webkit-autofill:focus, 
SELECT:-webkit-autofill:active, 
TEXTAREA:-webkit-autofill:hover, 
TEXTAREA:-webkit-autofill:focus, 
TEXTAREA:-webkit-autofill:active,
input:-internal-autofill-selected  {
    -webkit-text-fill-color: rgb(255, 255, 255) !important;
    -webkit-background-clip: text;
    animation-name: none !important;
    color: white;
    box-shadow: inset 0 0 20px 20px rgb(0 0 0 / 0) !important;
    -webkit-box-shadow: 0 0 20px 20px rgb(0 0 0 / 0) inset !important;
    transition: all 0s 50000s;
}
.datatable table tr.subRow{
    background-color: #0e0f19 !important;
}
.card .card-header, 
.card .card-footer,
tbody, td, tfoot, th, thead, tr {
    border-color: rgb(114 125 161 / 0.15);
}
.datatable, .table, .table-editor{
    background-color: initial;
}
.datatable, .table {
    --mdb-datatable-border-color:rgb(114 125 161 / 0.15) !important;
}
.select-wrapper{
    color: white;
    background: var(--primary-color-medium);
    border: var(--primary-color-light);
    outline: var(--primary-color-light);
}
.form-outline .form-control~.form-notch div,
.btn-outline-theme{
    border: 1px solid var(--contrast-color-dark);
}
.btn-outline-primary{
    border-color: #505776 !important;
}
#RelationEditorSortModal .btn-outline-theme{
    cursor: move;
}
.btn-outline-success:hover{
    background-color: var(--contrast-color-light);
}
.btn-outline-theme:hover{
    border: 1px solid var(--contrast-color-dark) !important;
}
.datatable.datatable-hover tbody tr:hover, .table.table-hover tbody tr:hover {
    background-color: var(--primary-color-medium) !important;
}
.form-outline .form-control.disabled, .form-outline .form-control:disabled, .form-outline .form-control[readonly] {
    background-color: var(--primary-color-medium);
}
nav.sidenav{
    background-color: #1c1f35 !important;
}
.sidenav-primary .sidenav-item .sidenav-link:hover, 
.sidenav-primary .sidenav-link:active, 
.sidenav-primary .sidenav-link:focus, 
nav.sidenav a, 
textarea, 
div.tab-content, 
.accordion-item,
.fa-calendar:before, 
i.fas,
.datatable.datatable-striped tbody tr:nth-of-type(odd),
.table tbody tr:nth-of-type(odd),
.table-editor i.far{
    color: white !important;
}
.accordion{
    background: #222739 !important;
    border-color: #11111c !important;
    border-radius: 10px !important;
}
.accordion-button {
    color: gray;
}
.accordion-borderless .accordion-item .accordion-button:not(.collapsed) {
    color: #222739;
}
.sidenav-primary .sidenav-link.active {
    color: var(--contrast-color-light);
}
.form-check-input[type=radio]:checked:after {
    border-color: #4CAF50 !important;
    background-color: #4CAF50 !important;
}
.form-check-input:checked:focus {
    border-color: #4CAF50 !important;
}
.datepicker-footer-btn{
    color: var(--contrast-color-light);
}
.datepicker-cell.selected .datepicker-cell-content,
.datepicker-header {
    background-color: var(--contrast-color-light);
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background-color: initial;
    border-color: var(--contrast-color-light) !important;
    color: var(--contrast-color-light) !important;
}
.nav-tabs .nav-link.active i.fas{
    color: var(--contrast-color-light) !important;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link {
    background-color: initial;
    border-color: var(--contrast-color-light) !important;
    color: #FFF !important;
}
.nav-tabs .nav-link:hover {
    background-color: var(--contrast-color-dark);
}
#CircumferenceBox {
    border-color: var(--contrast-color-light) !important;
}
.form-check-input[type=checkbox]:checked {
    background-color: var(--contrast-color-light) !important;
    border-color: var(--contrast-color-dark) !important;
}
.form-switch .form-check-input:checked[type=checkbox]:after {
    background-color: var(--contrast-color-light) !important;
}
.toast-success {
    background-color: #29642c !important;
    color: white !important;
    border-color: #2b6f2e !important;
}
.toast-danger {
    background-color: #af233a;
    color: white;
    border-color: #951a2e;
}
.btn-outline-primary:hover, 
.shapeBtn:hover, 
.shapeBtn.selected,
.btn-outline-light:hover,
.btn-outline-light:focus {  
    background-color: var(--contrast-color-light) !important;
    border-color: var(--contrast-color-dark) !important;
    color: white;
}
.btn-outline-light:hover,
.btn-outline-light:focus{
    color: #FFF !important;
}
#detailedCalculationSheet thead {
    color: var(--contrast-color-light);
}
#detailedCalculationSheet td{
    color: white;
}
#detailedCalculationSheet .dropstart .dropdown-toggle:before {
    content: initial;
}
#ForgotPassword {
    display: flex;
    align-items: start;
    margin-bottom: 0px !important;
    margin-top: 5px;
}
#ForgotPassword a{
    color: var(--contrast-color-dark) !important;
}
.modal-content{
    background-color: rgb(22 24 40) !important;
}
.modal-header, .modal-footer{
    border-color: rgb(114 125 161 / 0.15);
}
.form-check-input:checked:focus {
    border-color: #482685 !important;
}
#loading, #EmployeeFilter, #EmployeeFilterDropdownButton{
    height: 29px !important;
    border: 1px solid !important
}
#EmployeeFilterDropdownButton{
    border: 1px solid var(--contrast-color-dark) !important;
    color: var(--contrast-color-dark) !important;
}
#EmployeeFilterDropdownButton:hover,
#EmployeeFilterDropdownButton:focus{
    border: 0.1rem solid var(--contrast-color-dark) !important;
    background-color: var(--contrast-color-dark) !important;
    color: #FFF !important;
}
.form-check-input.is-valid, 
.was-validated .form-check-input:valid {
    border-color: #4CAF50;
}
.btn-outline-light{
    border: 1px solid #4CAF50 !important;
    color: #9E9E9E !important;
}
.datatable-pagination-button, .modal-title, .modal-content{
    color: white !important;
}
.btn-close{
    background: transparent url("../images/icons/delete_dark.svg") 50%/1em auto no-repeat;
}
.vr{
    background-color: var(--primary-color-medium) !important;
}
.datatable-pagination-button:hover{
    background-color: #138d43;
}
.loading-backdrop{
    background-color: rgb(13 7 24) !important;
}
#WarningModalDescription a{
    color: #4CAF50 !important;
    text-decoration: underline;
}
.form-switch .form-check-input {
    background-color: #9E9E9E !important;
}
#SaveInOneLine{
    cursor: pointer;
}
.form-check-input:checked:focus:before {
    box-shadow: none !important;
}
#datatable-custom .form-check-input:checked:focus {
    border-color: var(--contrast-color-dark) !important;
}
.form-outline .form-control.circumferenceBoxInput:disabled {
    background-color: #161828 !important;
    color: #161828 !important;
}
.iconPickerIcon:hover{
    background-color: var(--contrast-color-light) !important;
    color: var(--contrast-color-dark);
}
.iconPickerIcon.selected{
    background-color: var(--contrast-color-light) !important;
    color: var(--contrast-color-dark);
}
.statusItem:hover, .statusItem.selected{
    border: 1px solid #FFF !important;
}
.popconfirm{
    background-color: var(--primary-color-medium) !important;
    color: white !important;
}
.pricefactoreditor{
    background-color: var(--primary-color-darker) !important;
}