@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');

:root {
    /* Default Font Styles */
    --FontFamily: 'Lato', sans-serif;
    --linkcolor: #373737;
    --defaultFontColor: #373737;
    --lightgrey: #ebecec;
    --grey: #7e7e7e;
    --darkgrey: #373737;
    --blue: #3675b5;
    --lightblue: #e2ecf7;
    --green: #5baf57;
    --dirtywhite: #f8f7f7;
}
html {
    position: relative !important;
    min-height: 100% !important;
}

* {
    font-family: var(--FontFamily);
}
h1, h2, h3{
    padding-left: 30px;
    padding-right: 30px;
}
footer {
    /*background-color: #ff7fe04f;*/
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 60px;
    width: 100%;
    border-bottom: 10px solid var(--green);
    overflow: hidden;
}

#brLayout {
    display: none;
}

#LogoLogin {
    max-width: 180px;
    height: auto;
}

#logoFooter {
    max-width: 180px;
    height: auto;
}

div.footer-logo {
    text-align:right;
    padding-right:30px;
    max-width:100%;
    min-height:100vh;
}

div.footer-logoLogin {
    text-align: right;
    padding-right: 30px;
}

body.bodyLogin {
    width: 100%;
    margin: 0 0 100px;
    background: #3e75b3 url('/Content/images/Backgrounds/rackingit-login-background.png') center right;
    background-size: cover;
}

body.bodycls {
    /*background-color: tomato;*/
    width: 100% !important;
    margin: 0 0 100px !important;
    background: var(--lightgrey) url('/Content/images/Backgrounds/rackingit-mainpage-background.png') no-repeat center right;
    background-size: cover;
}
div.k-window {
    position: absolute !important;
    top: 50px !important;
}

form {
    margin-bottom: 50px;
}

form#forma,
div#Inventory {
    margin-bottom: 50px;
}

div.page {
    margin-bottom:50px;
}
div#BaseGridDetail {
    margin-bottom: 50px;
}

div#filters {
    min-height: 55vh;
}
div#grd2 {
    margin-bottom: 50px;
}

div#employees {
    margin-bottom:30px;
    display:inline-block;
}

div#divPanel {
    min-height: 55vh;
}

div#gridDiv {
    margin-bottom:20px;
}

div#frmReports {
    min-height: 60vh;
    padding:30px;
}

ul#SearchInvGrid{
    padding:30px;
}
#gridDiv.span12 {
    float: none !important;
}

.login-header {
    padding: 20px 30px;
}

.login-wrap {
    width: 320px;
    max-width: 100%;
    background-color: var(--dirtywhite);
    border-radius: 10px;
    padding: 10px 0 20px;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
}

.form-logo {
    padding: 0 40px;
    box-sizing: border-box;
    border-bottom: 1px solid #acacac;
    margin-bottom: 20px;
}

#loginHeader {
    max-width: 100%;
    height: auto;
}

#btnRetrievePassword {
    padding-bottom: 1px !important;
    padding-top: 15px !important;
    border-bottom: 1px solid var(--blue) !important;
    color: var(--blue) !important;
    text-decoration: none !important;
    display: inline-block !important;
    clear: both !important;
    cursor: pointer !important;
}

#btnLogin {
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    border-radius: 4px;
    background: var(--green);
    text-transform: uppercase;
    color: #fff;
    padding: 10px 60px;
    font-family: var(--FontFamily);
    border: none;
    text-align: center;
    cursor: pointer;
}

.btn:hover {
        background: var(--blue);
}

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

#hrLogin {
    border: none;
}

#logOutTr {
    display: none;
}

#headerlay {
    background-color: #fff;
}

#tdToplayout {
    width: 20% !important;
    background-color: var(--lightblue);
}

#nav-one li:hover ul a, #nav-one li.sfHover ul a {
    font-family: var(--FontFamily) !important;
    font-size: 14px !important;
    background: #fff !important;
    color: var(--defaultFontColor) !important;
    padding: 10px !important;
    cursor: pointer !important;
    z-index: 50 !important;
    top: 1px !important;
}

.nav ul {
    border-bottom: 5px solid var(--green) !important;
    width: 100% !important;
    background: #fff !important;
    color: var(--defaultFontColor) !important;
    cursor: pointer !important;
}

.nav li:hover ul, .nav li.sfHover ul {
    top: 2px;
    z-index: 100;
}

.btn:hover {
    background: var(--blue);
}

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

#menuTest {
    padding-left: 30px;
    background-color: var(--blue);
    color: var(--dirtywhite);
    font-family: var(--FontFamily);
    font-size: 14px;
}

.k-menu .k-item,
.k-menu-scroll-wrapper .k-item,
.k-menu-scroll-wrapper.horizontal > .k-item,
.k-popups-wrapper .k-item,
.k-popups-wrapper.horizontal > .k-item,
.k-widget.k-menu-horizontal > .k-item {
    border-width: 0 0 0 0;
}

.k-widget,
.k-block,
.k-inline-block,
.k-draghandle {
    border-width: 0 0 0 0;
}

#menuTest.k-menu .k-item > .k-link {
    height: 30px;
}

#menuTest.k-menu .k-item > .k-link:hover {
    background-color: var(--green);
    color: var(--dirtywhite);
}

.k-group.k-menu-group.k-popup.k-reset.k-state-border-up {
    border-bottom: solid 5px var(--green);
}

.k-item.k-state-default.k-first.k-state-border-down{
    background-color: var(--green);
    color: var(--dirtywhite);
}

#dvChat {
    position: absolute !important;
    bottom: 50px !important;
    right: 2px !important;
}

/*#btnOpenChat {
    position: absolute !important;
    bottom: 80px !important;
    right: 50px !important;
}*/

.k-menu .k-image, 
.k-menu .k-item > .k-link > .k-icon, 
.k-menu .k-sprite, 
.k-menu-scroll-wrapper .k-image, 
.k-menu-scroll-wrapper .k-item > .k-link > .k-icon, 
.k-menu-scroll-wrapper .k-sprite, 
.k-popups-wrapper .k-image, 
.k-popups-wrapper .k-item > .k-link > .k-icon, 
.k-popups-wrapper .k-sprite {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.k-link:link, .k-link:visited,
.k-nav-current.k-state-hover .k-link {
    color: var(--dirtywhite);
}

.k-context-menu.k-menu-vertical > .k-item > .k-link,
.k-menu .k-menu-group .k-item > .k-link,
.k-menu-scroll-wrapper .k-menu-group .k-item > .k-link,
.k-popups-wrapper.vertical > .k-item > .k-link {
    color: var(--defaultFontColor);
}

.k-calendar .k-content .k-link{
    color:black;
}

div.row-fluid.login-wrap {
    max-width: 350px;
}

#body, html {
    height:inherit !important;
}
#grdgrademaster { 
    height: inherit !important;
}
#grademaster {
    float: inherit !important;
}
div#grdProductCategories {
    height: inherit !important;
}
div#grdPackageMaster {
    height: inherit !important;
}
div#ProductCategories .k-grid-content {
    height: inherit !important;
}
div#PackageMaster .k-grid-content {
    height: inherit !important;
}
#divButtons {
    width: 90% !important;
}
#exportAWB {
    display:inline-flex;
    padding: 0 !important;
    margin: 0 !important;
    float: left !important;
    width: 500px !important;
    height: max-content;
    padding: 5px;
}
.label-footer-grid {
    padding: 0 !important;
    margin: 2px !important;
    font-size: 0.6rem !important;
}
.input-footer-grid {
    padding:2px !important;
    margin:2px !important;
    width: 85px !important;
    height: 12px !important;
    font-size: 0.6rem !important;
}

.input-footer-grid:focus {
    color: black !important;
    border: none !important;
}

#gridDetail > div.k-pager-wrap.k-grid-pager.k-widget.k-floatwrap {
    height: 30px !important;
}

#divButtons {
    width: 1000% !important;
}