/* custom css style goes here*/

body {
    font-family: 'Poppins', sans-serif !important;
    background-image:url('../images/login-page-background-img.jpg') !important;
}

/* Login page */

nav.navbar.navbar-expand-md.navbar-light.bg-white.shadow-sm {
    display:none;
}

.justify-content-center {
    transform:translateY(50%) !important;
}

.card {
    border-style:none !important;
    border-radius:0 !important;
}

.card-header {
    background-color:#141414 !important;
    text-align:center;
}

.card-header:first-child {
    border-radius:0 !important;
}

.card-header img {
    width:100px;
    height:auto;
}

.card-body {
    background-color:#2c2b29;
    color:#ffffff !important;
}

.card-body .btn-link {
    color: #ececec;
}

.card-body .btn-link:hover {
    color: #ffffff;
}

.form-control {
    border-style:none !important;
    border-radius:0 !important;
}

input#email:focus, input#password:focus {
    border-color:#c80027 !important;
    box-shadow:0 0 0 0.2rem #ffffff;
}

input#email, input#password {
    text-indent:40px;
}

.form-group {
    margin-bottom:0 !important;
}

.form-group label img {
    width:30px;
    height:auto;
}

button[type="submit"] {
    width:100%;
    display:inline-block;
    background-color:#c80027;
    border-style:none;
    border-radius:0;
}

button[type="submit"]:hover, button[type="submit"]:focus, button[type="submit"]:active {
    background-color:#bb0126 !important;
    border-color:#ffffff !important;
    box-shadow:1px 0 0 0.2rem #ffffff !important;
}

.forgotten-pass {
    text-align:center !important;
    display:block !important;
    margin:15px 0;
}

i.login-icon {
    position:relative;
    top:31px;
    background-color:#141414;
    padding:12px;
    right:0px;
    display:inline;
}

.remember-me {
    margin-top:10px !important;
    margin-bottom:10px !important;
}

/* App */

.top-bar {
    background-color:#141414;
    width:100%;
    height:60px;
    display:flex;
    vertical-align:middle;
}

.top-bar .fixed-right {
    position:absolute;
    right:0;
}

.top-bar .fixed-right .navbar-nav {
    display:block;
    font-size:17px;
}

.top-bar .fixed-right .navbar-nav .lang-switcher {
    font-size:13px;
    line-height:24px;
}

.top-bar .fixed-right .navbar-nav .nav-item {
    float:left;
    width:auto;
    height:40px;
    margin-right:5px;
    text-align:center;
    background-color:#333333;
    padding:0 10px;
}

.top-bar .fixed-right .navbar-nav .nav-item:hover {
    background-color:#484646;
}

.top-bar .fixed-right .navbar-nav .nav-item span.inbox {
    background-image:url('../images/envelope-icon.svg');
    display:inline-block;
    width:25px;
    height:25px;
    background-repeat:no-repeat;
    background-position:center;
}

.app-view .col-md-5, .app-view .col-md-7 {
    border:20px solid transparent;
    background-clip:padding-box;
}

.app-view .col-md-5.float-left, .app-view .col-md-7.float-left {
    border-right-width:0px;
}

.app-view .col-md-5.upper-row, .app-view .col-md-7.upper-row {
    border-bottom-width:0px;
}

.app-view .col-md-7 .col-md-6.float-left {
    border-right:20px solid transparent;
    background-clip:padding-box;
}

img.logo-img {
    width:100px;
    height:auto;
    position:relative;
    left:30px;
}

.sidebar {
    background-color:#1a1a1a;
    color:#c4c3c8;
    height:calc(100vh - 60px);
}

ul.main-menu li a,
.top-bar .fixed-right a {
    color:#c4c3c8;
}

ul.main-menu li a:hover,
ul.main-menu li.nav-item.active a,
.top-bar .fixed-right a {
    color:#ffffff;
}

ul.main-menu .icon {
    height:35px;
    width:100%;
    display:block;
    text-align:center;
    background-position:center;
    background-repeat:no-repeat;
}

ul.main-menu .icon.home {
    background-image:url('../images/home-icon.svg');
}

ul.main-menu .icon.plants {
    background-image:url('../images/plant-icon.svg');
}

ul.main-menu .icon.users {
    background-image:url('../images/users-icon.svg');
}

ul.main-menu .icon.accounts {
    background-image:url('../images/account-icon.svg');
}

ul.main-menu .nav-item {
    border-top:1px solid #333333;
}

ul.main-menu .nav-item:hover,
ul.main-menu .nav-item.active {
    background-color:#c80027;
}

ul.main-menu .nav-item.before-last {
    border-bottom:1px solid #333333;
}

ul.main-menu .nav-item.last {
    position:absolute;
    bottom:0;
    width:100%;
    left:0;
    text-align:center;
}