/* General */

html, body {
  width: 100%;
  height: 100%
}

body {
  background-color: #F1F3F8 !important;
}

main {
  padding-top: 15px;
  padding-bottom: 15px;
}

input {
  width: initial !important;
}

.icon-grid {
  display: initial !important;
}

.htmlcalendar_month {
  -webkit-box-sizing: initial !important;
  box-sizing: initial !important;
}

.imghref {
  max-width: initial !important;
}

.section {
  margin-bottom: 15px;
}

/* Navbar */

#navbar {
  background-color: #fff;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.12),
    0 1px 2px rgba(0,0,0,0.24);
  border-radius: 0;
}

#lang-chooser {
  background-color: transparent;
  box-shadow: none;
}

#lang-chooser:after {
  color: black;
}

.dropdown-menu {
  min-width: initial !important;
}

/* Sidebar */

.list-sidebar, .list-sidebar ul {
  padding: 0;
}

.list-sidebar li {
  list-style-type: none; 
}

#content-wrapper {
  background-color: #F1F3F8;
}

#sidebar-wrapper {
  background-color: #34425A;
  box-shadow:
    0 2px 5px 0 rgba(0,0,0,0.16),
    0 2px 10px 0 rgba(0,0,0,0.12);
}

.fa.pull-right {
  line-height: inherit;
}

.sub-menu {
  border-left: 5px solid #F44336;
}

.sidebar li a.active {
  background-color: #34425A;
  border-left: 5px solid #2196F3;
}

.sidebar li a:hover {
  background-color: #465C82 !important;
}

.sidebar li a i {
  /* padding-right: 5px; */
  width: 22px;
}

.sidebar li a.active.collapsed span.fa {
  -ms-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  -webkit-transform:rotate(0deg);
  transform:rotate(0deg);

  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.sidebar li a.active span.fa {
  -ms-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  transform:rotate(180deg);

  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.sidebar li a .nav-label, .sidebar li a .nav-label+span {
  transition: all 0.5s ease-in-out;
}

.sidebar ul li .sub-menu li a {
  position: relative;
}

.sidebar ul li .sub-menu li a:hover{
  color: #00E5FF;
  padding-left: 20px;
  transition: all 0.5s ease-in-out;
}

.sidebar ul li .sub-menu li a.selected{
  background-color: #465C82 !important;
  color: #00E5FF;
}

.sidebar li a, .sidebar li a.collapsed.active {
  display: block;
  padding: 8px 10px;
  color: #fff ;
  border-left: 0px solid #2196F3;
  text-decoration: none;
}

.sidebar li a.sidebar-menu-item, .sidebar li a.sidebar-menu-item.collaped.active {
  display: block;
  padding: 8px 10px;
  border-left: 0px solid #2196F3;
  text-decoration: none;
}

.sidebar ul li .sub-menu li a:hover:after {
  content: "";
  position: absolute;
  left: -5px;
  top: 0;
  width: 5px;
  background-color: #B71C1C;
  height: 100%;
}

.sidebar li a.sidebar-menu-item.selected {
  background-color: #2196F3 !important;
}

@media screen and (min-width: 768px) {
  .sidebar {
        position: fixed;
    overflow-y: auto;

    width: 220px;
    background-color: #34425A;
    transition: all 0.5s ease-in-out;
  }

  #wrapper {
    padding-left: 42px;
    transition: all 0.7s ease 0s;
  }

  #wrapper.active {
    padding-left: 220px;
    transition: all 0.7s ease 0s;
  }

  #sidebar-wrapper.active {
    margin-left: -220px;
    width: 220px;
    z-index: 10000;
    transition: all 0.7s ease 0s;
  }

  #sidebar-wrapper {
    position: absolute;
    margin-left: -42px;
    width: 42px;
    z-index: 10000;
    transition: all 0.7s ease 0s;
  }

  .sidebar ul li .sub-menu li a:before{
    font-family: FontAwesome;
    content: "\f105";
    z-index: 10000;
    transition: all 0.7s ease 0s;
  }

  .sidebar ul li .sub-menu li a:before{
    font-family: FontAwesome;
    content: "\f105";
    display: inline-block;
    padding-left: 0px;
    padding-right: 10px;
    vertical-align: middle;
  }

  .sidebar.fliph li a .nav-label, .sidebar.fliph li a .nav-label+span {
    display: none;
    transition: all 0.5s ease-in-out;
  }

  .sidebar.fliph {
    overflow: inherit;
    width: 42px;
    transition: all 0.5s ease-in-out; 
  }
    
  .sidebar.fliph li {
    position: relative
  }

  .sidebar.fliph .sub-menu {
    position: absolute;
    left: 42px;
    top: 0;
    background-color: #222;
    width: 150px;
    z-index: 100;
  }
}

@media screen and (max-width: 767px) {
  #wrapper {
    padding-left: 42px;
    transition: all 0.7s ease 0s;
  }

  #sidebar-wrapper {
    position: absolute;
    margin-left: -42px;
    width: 42px;
    z-index: 10000;
    transition: all 0.7s ease 0s;
  }

  .sidebar li a .nav-label, .sidebar li a .nav-label+span {
    display: none;
    transition: all 0.5s ease-in-out;
  }

  .sidebar .sub-menu {
    position: absolute;
    left: 42px;
    top: 0;
    background-color: #222;
    width: 150px;
    z-index: 100;
  }

  .sidebar ul li {
    position: relative;
  }

}

.graph img {
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
  border-radius: .3rem;  
}

/* Footer */
footer {
  height: 44px;
}