@charset "UTF-8";
/*----------------------------------------------------
    THEME COLORS -STARTS-
------------------------------------------------------*/
/*@Header_Background: #f8f8f8;*/
/*@Header_Text: #2c2c2c;*/
/*@Cart_Background: #777;*/
/*@Cart_Background_Hover: #000;*/
/*@View_Link_Background: #f8f8f8;*/
/*@View_Link_Color: #2c2c2c;*/
/*@View_Link_Hover_Background: #2c2c2c;

@View_Link_Hover_Color: #fff;*/
/*@Button_Black_Background: #fff;*/
/* New Palette */
/*@Theme_Color_22: #51c96d;*/
/*@Theme_Color_10: #e83b4f;*/
/*----------------------------------------------------
    THEME COLORS -ENDS-
------------------------------------------------------*/
body {
  transition: background-color 0.5s;
}
/*.navigation {
    width: 250px;
}*/
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left 0.5s;
}
.menu-icon .container {
  display: inline-block;
  cursor: pointer;
  padding: 5px 0;
  width: 100%;
}
.menu-icon .bar1,
.menu-icon .bar2,
.menu-icon .bar3 {
  width: 15px;
  height: 1px;
  background-color: #fff;
  margin: 3px 0;
  margin-left: 10px;
  transition: .4s;
}
/* The side navigation menu */
.sidenav {
  height: 100%;
  /* 100% Full-height */
  width: 0;
  /* 0 width - change this with JavaScript */
  position: fixed;
  /* Stay in place */
  z-index: 999;
  /* Stay on top */
  top: 10px;
  left: 0;
  /*background-color: rgba(0, 0, 0, 0.9);*/
  background-color: #35468b;
  border-right: solid 1px #ddd;
  overflow-x: hidden;
  padding-top: 60px;
  /* Place content 60px from the top */
  padding-bottom: 20px;
  transition: 0.5s;
  /* 0.5 second transition effect to slide in the sidenav */
  margin-top: 50px;
  /* The navigation menu links */
  /* When you mouse over the navigation links, change their color */
  /* Position and style the close button (top right corner) */
}
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 13px;
  display: block;
  transition: .3s;
}
.sidenav a:hover,
.sidenav .offcanvas a:focus {
  color: #f1f1f1;
}
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 36px;
  margin-left: 50px;
  color: #fff;
}
.sidenav #frmSearch {
  /*margin-bottom: 60px;*/
  position: relative;
}
.sidenav #frmSearch .SearchContainer {
  margin-top: 0;
  padding: 10px 10px;
}
@media only screen and (max-width: 399px) {
  .sidenav #frmSearch .SearchContainer {
    display: block !important;
  }
}
.sidenav #frmSearch .SearchContainer .form-group {
  margin-top: 0;
}
.sidenav #frmSearch .SearchContainer .form-group .editor-field input[type=search] {
  background-color: #fff;
}
.sidenav #frmSearch .SearchContainer .header-quick-access-user {
  margin-top: -45px;
}
.sidenav input[type=text],
.sidenav input[type=email],
.sidenav input[type=password],
.sidenav input[type=number],
.sidenav input[type=search],
.sidenav textarea {
  border: none;
}
@media only screen and (max-width: 767px) {
  .sidenav {
    /*.fa {
            position: absolute;
            top: 71px;
            left: 211px;
            color: white;
            pointer-events: none;
        }*/
  }
  .sidenav form {
    width: 250px;
    min-width: 250px;
  }
  .sidenav .search-header4 {
    display: inline-block;
    padding: 8px 23px;
    background-color: #408fde;
    color: white;
    vertical-align: middle;
    -moz-transition-delay: 1s;
    -o-transition-delay: 1s;
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
  }
  .sidenav .search-header4:hover,
  .sidenav .search-header4:active {
    background-color: #35468b;
  }
}
.sidenav.menuOpened {
  width: 400px !important;
}
@media only screen and (max-width: 417px) {
  .sidenav.menuOpened {
    width: 100% !important;
  }
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
/* ------------------ Submenu Navigation ------------------ */
/* reset our lists to remove bullet points and padding */
.mainmenu,
.submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu {
  /* when hovering over a .mainmenu item,
  display the submenu inside it.
  we're changing the submenu's max-height from 0 to 200px;
*/
}
.mainmenu ul li a {
  display: block;
  text-decoration: none;
  padding: 10px;
  pointer-events: all;
  cursor: pointer;
  /* add hover behaviour */
}
.mainmenu ul li a:hover {
  background-color: #f8f8f8;
}
.mainmenu li:hover .submenu {
  display: block;
  max-height: 190px;
}
.mainmenu .has-sub .submenu-button {
  float: right;
}
.mainmenu .has-sub .submenu-button i {
  color: #fff;
  padding: 20px;
  padding-top: 12px;
  padding-left: 0px;
  font-size: 20px;
}
/*
  we now overwrite the background-color for .submenu links only.
  CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
/* this is the initial state of all submenus.
  we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.submenu a {
  background-color: #e8e8e8;
  padding-left: 20px;
  /* hover behaviour for links inside .submenu */
}
.submenu a:hover {
  background-color: #d8d8d8;
}
/* ------------------ Submenu Navigation Ends ------------------ */
/* ------------------ Responsive Changes ------------------ */
@media only screen and (max-width: 809px) {
  .header-small .gkPage .sidenav {
    padding-top: 60px;
  }
}
@media only screen and (max-width: 660px) {
  .sidenav #frmSearch .SearchContainer .form-group {
    float: none;
  }
}
/* ------------------ Responsive Changes Ends ------------------ */