:root {
    --primaryColor: #4b49ac;
    --secondaryColor: #ff4747;
    --tertiaryColor: #ffffff;
    --otherColor: #98bdff;
    --black: #000000;
    --white: #ffffff;
    /*button color setting*/
    --primaryButtonTextColor: #ffffff;
    --primaryButtonBackgroundColor: #57b657;
    --primaryButtonBorderColor: #57b657;
    --secondaryButtonTextColor: #ffffff;
    --secondaryButtonBackgroundColor: #ff4747;
    --secondaryButtonBorderColor: #ff4747;
    /*avatar color setting*/
    --avatarBackgroundColor: #ffb822;
    --avatarTextColor: #ffffff;
    /*logo color setting*/
    --logoBackgroundColor: #ffffff;
}


.logo-background {
    background-color: var(--logoBackgroundColor) !important;
    width: 100px !important;
}

.update-msg .img-box, body.dark-topbar .navbar-custom, body.dark-sidenav .left-sidenav-menu li.mm-active .mm-active > a {
    background: var(--primaryColor) !important;
}

body.dark-topbar .topbar body.dark-sidenav .left-sidenav, .account-body .auth-header-box {
    background-color: var(--primaryColor) !important;
}

.topbar .navigation-menu > li > a, .navigation-menu > li a i, body.dark-topbar .navbar-custom .nav-link, .card .card-header:first-child span, .card grammarly-extension + .card-header span, .card-header .card-title, .modal-content .modal-header .modal-title {
    color: var(--tertiaryColor) !important;
}

body.dark-topbar .navbar-custom-menu .has-submenu:hover a span {
    color: var(--black) !important;
    background-color: var(--primaryColor) !important;
}

.page-wrapper .page-content a .card-body i, .topbar .navigation-menu > li .submenu li a i, .boxed-footer a, .card.sidebar-card .files-nav .nav .nav-link i {
    color: var(--primaryColor) !important;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, .topbar .navigation-menu > li .submenu li a, .page-link, .card.sidebar-card .files-nav .nav .nav-link, .card.sidebar-card .files-nav .nav .nav-link h5 {
    color: var(--secondaryColor) !important;
}

.page-content .card .card-header .btn-soft-primary {
    background-color: var(--secondaryColor) !important;
    color: var(--tertiaryColor) !important;
    border-color: var(--secondaryColor) !important;
}

.form-control:focus {
    color: var(--secondaryColor) !important;
    background-color: var(--white) !important;
    border-color: var(--primaryColor) !important;
}

.form-check-input:checked {
    background-color: var(--primaryColor) !important;
    border-color: var(--primaryColor) !important;
}

.page-wrapper .page-content .card .card-header:first-child, .card grammarly-extension + .card-header {
    background-image: linear-gradient(to left, var(--otherColor), var(--primaryColor)) !important;
}

.card .card-header:first-child, .card grammarly-extension + .card-header {
    background-image: linear-gradient(to left, var(--otherColor), var(--primaryColor)) !important;
}

.modal-content .modal-header {
    background-image: linear-gradient(to left, var(--otherColor), var(--primaryColor)) !important;
}

#LogIn_Tab button {
    color: var(--primaryButtonTextColor);
    background-color: var(--primaryButtonBackgroundColor) !important;
    border-color: var(--primaryButtonBorderColor) !important;
}

.auth-logo {
    height: 70px;
}

[data-layout="horizontal"] .topbar .brand .logo .logo-sm {
    height: 90% !important;
}

.btn-success, .btn-success:hover {
    color: var(--primaryButtonTextColor) !important;
    background-color: var(--primaryButtonBackgroundColor) !important;
    border-color: var(--primaryButtonBorderColor) !important;
}

.btn-soft-secondary {
    color: var(--secondaryButtonTextColor) !important;
    background-color: var(--secondaryButtonBackgroundColor) !important;
    border-color: var(--secondaryButtonBorderColor) !important;
}

.navbar-custom-menu ul.navigation-menu li.has-submenu.active ul li.active a {
    background: var(--secondaryColor) !important;
    color: var(--white) !important;
}

.avatar-color {
    background-color: var(--avatarBackgroundColor) !important;
    color: var(--avatarTextColor) !important;
}


@media (min-width: 992px) {
    body.dark-topbar .topbar .navbar-custom-menu .has-submenu.active a span {
        background-color: var(--primaryColor) !important;
        color: var(--tertiaryColor) !important;
    }
}


@media (max-width: 992px) {
    .topbar .navigation-menu > li > a, .navigation-menu > li a i {
        color: var(--black) !important;
    }
    .topbar .navigation-menu > li > a {
        border-bottom: 1px solid #d9d9d9;
    }
    .topbar .navigation-menu > li .submenu.open {
        padding-left: 0;
    }
    body.dark-topbar .navbar-custom-menu .has-submenu:hover.active a span, body.dark-topbar .navbar-custom-menu .has-submenu:hover a span {
        background-color: transparent !important;
    }
}