:root {
    --main-brand-color: #013366;
    --white-color: #fff;
    --extra-color: #FFE07D;
    --main-text-color: #7C7C7F;
    --text-secondary-color: #C1C5C8;
    --text-extra-color: #7562EE;
    --button-primary-hover: #001A42;
    --system-color: #001a42;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

body, html {
    color: var(--system-color);
    font-family: "Roboto", sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
input, button, select, optgroup, textarea, label, .alert, .badge,
.blockquote-footer, .btn, .falcon-data-table .paging_full_numbers .page-link,
.falcon-data-table .paging_first_last_numbers .page-link, .falcon-data-table .paging_full .page-link,
.falcon-data-table .paging_numbers .page-link, .falcon-data-table .paging_simple_numbers .page-link,
.navbar, .pagination, .valid-feedback, .invalid-feedback,
.fancy-tab .nav-bar .nav-bar-item {
    font-family: "Roboto", sans-serif !important;
}

a, .dropdown-item, .dropdown-menu, .dropdown-item-text,
.table, .table-hover tbody tr:hover,
.form-control-plaintext {
    color: var(--system-color);
}

body[data-layout="nomenu"] {
    background: url(/mc/themes/moco/images/background/landscape.jpg) no-repeat center center fixed;
    background-size: cover;
}

[data-css="login-wrapper"] [data-css="box"] .row.text-left,
[data-css="login-wrapper"] [data-css="box"] .text-right {
    justify-content: center !important;
    text-align: center !important;
}

[data-css="login-wrapper"] [data-css="logo-img"] {
    position: fixed;
    height: 150px;
    width: 295px;
    left: 50px;
    top: 50px;
}

[data-css="logo-container"] [data-css="sitename"],
[data-css="logo-container"] [data-css="site-name"] {
    display: none !important;
}

[data-css="logo-container"] img {
    width: 67px;
}

[data-css="login-box-container"] {
    right: 10%;
    position: fixed;
    max-width: 450px;
}

[data-css="login-box-container"] [data-css="box"] {
    box-shadow: 0 0 20px 4px rgba(231, 243, 253, 0.7);
}

[data-css="login-wrapper"] [data-css="box"] h5 {
    color: var(--main-text-color);
}

[data-css="login-wrapper"] .loginButton {
    padding: 8px 50px !important;
    color: var(--white-color);
    background-color: var(--main-brand-color);
    border-color: var(--main-brand-color);
    width: 100%;
}

[data-css="login-wrapper"] a {
    font-style: normal;
    color: var(--main-text-color);
    text-decoration: none;
    font-weight: bold;
}

[data-css="login-wrapper"] a:hover {
    text-decoration: underline;
}

[data-css="login-wrapper"] .loginButton:hover,
[data-css="login-wrapper"] .loginButton:focus {
    color: var(--white-color);
    background-color: var(--button-primary-hover);
    border-color: var(--button-primary-hover);
}

/* Internal styles */

body, .navbar-glass, .navbar-vertical .navbar-collapse {
    background-color: var(--main-brand-color);
}

.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link:focus {
    color: var(--text-secondary-color);
}

.navbar-vertical-content.scrollbar .nav-link:focus::after {
    border-right: 1px solid var(--text-secondary-color) !important;
    border-bottom: 1px solid var(--text-secondary-color) !important;
}

.navbar-light .navbar-nav .nav-link.active::after {
    content: " ";
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--extra-color);
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active:hover {
    background: var(--main-brand-color);
    color: var(--white-color) !important;
}

.navbar-vertical-content.scrollbar .nav-link:hover,
.navbar-vertical-content.scrollbar .nav-item.active .nav-link,
.navbar-vertical-content.scrollbar .nav-item.active .nav-link:hover {
    color: var(--extra-color) !important;
}

.navbar-vertical-content.scrollbar .nav-link:hover::after {
    border-right: 1px solid var(--extra-color) !important;
    border-bottom: 1px solid var(--extra-color) !important;
}

.breadcrumb-item a,
.breadcrumb-item .fa-house,
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--white-color);
}

.breadcrumb-item.active {
    color: var(--extra-color);
}

footer p.text-600 {
    color: var(--text-secondary-color) !important;
}

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

.btn-primary:hover,
.btn-primary:focus {
    color: var(--white-color);
    background-color: var(--button-primary-hover);
    border-color: var(--button-primary-hover);
}

@media screen and (max-width: 767px) {
    [data-css="login-box-container"] {
        right: 50%;
        transform: translateX(50%);
    }

    [data-css="login-wrapper"] [data-css="logo-img"] {
        position: relative;
        left: unset;
        top: unset;
    }
}