:root {
    --primary-color: #4576F5;
    --secondary-color: #1151D3;
}


html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}


body {
    background-color: white;
    margin-bottom: 0;
    font-size: 1rem;
}

.navbar-default {
    background-color: white;
}


.nav > li > a {
    color: var(--primary-color);
}

.nav > li.active {
    background-color: var(--secondary-color);
    border-left: unset;
}

    .nav > li.active > a {
        color: white;
    }

.navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus {
    background-color: var(--secondary-color);
    color: white;
}


ul.nav-second-level {
    background: var(--primary-color);
}

.nav-second-level li a {
    color: white;
}


.nav-header {
    background-color: unset;
    background-image: unset;
}

@media (min-width: 768px) {
    #page-wrapper {
        margin: 0 0 0 250px;
    }
}

@media (min-width: 768px) {
    .navbar-static-side {
        width: 250px;
    }
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary.focus {
        background-color: var(--secondary-color);
        border-color: var(--secondary-color);
        color: #FFFFFF;
    }

.btn-sm {
    font-size: inherit;
}

.navbar-fixed-top, .navbar-static-top {
    background: white;
}

body.mini-navbar .nav-header {
    background-color: var(--primary-color)
}

.mini-navbar .nav .nav-second-level {
    background-color: var(--primary-color);
}

.nav-header a {
    color: var(--primary-color)
}

.nav.navbar-right > li > a {
    color: var(--primary-color)
}

.nav.navbar-right > li > a {
    font-size: inherit;
}

.pagination .footable-page.active a {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.form-control, .single-line {
    padding: 6px 12px;
}

    .form-control:focus, .single-line:focus {
        border-color: var(--primary-color)
    }

.table .thead-light th {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.la-pen:before {
    content: "\f304";
    margin-right: 8px;
}

.la-trash:before {
    content: "\f1f8";
    margin-right: 8px;
}


img {
    object-fit: contain;
}

.las.la-trash {
    color: #ff5353 !important;
}

.fas.fa-trash {
    color: #ff5353 !important;
}

    .fas.fa-trash:hover {
        color: red !important;
    }

a.las.la-trash:hover {
    color: red !important;
}

input[value="Delete"] {
    background-color: red;
    border-color: red;
}

    input[value="Delete"]:hover {
        background-color: #ff5353;
        border-color: #ff5353;
    }

.ibox-tools a {
    color: var(--primary-color) !important;
}

.las.la-eye {
    color: var(--primary-color) !important;
}

.loginscreen {
    background-color: white !important;
}

    .loginscreen h2 {
        color: var(--primary-color);
    }

    .loginscreen button {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

    .loginscreen button:hover {
        background-color: var(--secondary-color);
        border-color: var(--secondary-color);
    }

    .loginscreen a {
        color: var(--primary-color);
    }

    .loginscreen p {
        color:var(--primary-color);
        font-size:24px;
    }