/*
********* COLORS *********
#d13a4f
#edd08a
#4492b3
#909eaf
#8fc0a9
*/

/* ******* GENERAL STYLES **************** */

/**
 * Body, Main, (Sticky) Footer, ..
 */

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 0;
  /* padding-bottom: 6rem; */
  background-color: rgba(192, 223, 223, .25);
}

.main {
  /*, .main > .row */
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.main>.row {
  flex: 1 0 auto;
}

html, body, .main, .main>.row {
  /* min-height: 100%;
  height: 100%; */
  box-sizing: border-box;
}

footer {
  margin-top: 0px;
  padding: 16px 0;
  flex-shrink: 0;
}

main {
  padding: 25px;
}

a, a:link, a:visited {
  color: rgba(0, 50, 96, 1);
}

a:hover, a:active {
  color: rgba(0, 50, 96, .75);
}

pre {
  white-space: pre-wrap;
  font-size: .8em;
  border: 1px solid #dedede;
}

button {
  cursor: pointer;
}

.info {
  color: #4492b3;
  font-weight: 700;
  background-color: rgba(255, 255, 255, .40);
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, .10);
  margin: 22px 0;
  padding: 8px;
}

.info::before {
  padding-right: 16px;
  font-family: "Font Awesome 5 Free";
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.info.icon::before {
  content: "\f05a";
}

.success {
  color: #8fc0a9;
}

.success::before {
  content: "\f00c";
}

.error {
  color: #d13a4f;
}

.error::before {
  content: "\f071";
}

/* ******************* ALL NAVS ******************** */

nav ul {
  list-style-type: none;
}

/* *********************** NAVBAR TOP *************** */

nav.top {
  background-color: rgb(192, 223, 223);
  min-height: 35px;
}

nav.top ul {
  text-align: right;
}

nav.top ul li {
  margin-left: 30px;
}

.brand span {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  vertical-align: super;
  margin-left: 10px;
}

/* **************** SIDE NAV ********************** */

#sidebar {
  padding-left: 0;
  background-color: rgb(237, 234, 229);
  min-height: 100%;
}

#sidebar nav {
  background-color: rgb(237, 234, 229);
}

#sidebar nav ul {
  flex-shrink: 0;
  flex-grow: 1;
}

#sidebar nav ul li>span, #sidebar nav ul li>a {
  margin-left: 4px;
  vertical-align: sub;
}

#sidebar nav ul li>span.fas {
  display: inline-block;
  padding-left: 0px;
  padding-top: 15px;
}

#sidebar nav {
  font-family: 'Roboto Slab', Geneva, serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  color: rgb(0, 50, 96);
}

#sidebar nav ul .sub-menu li, #sidebar nav li .sub-menu li {
  /* background-color: rgba(0, 0, 0, 0.15); */
  border: none;
  line-height: 36px;
  border-bottom: 1px solid rgb(250, 246, 236);
  margin-left: 0px;
}

#sidebar nav li.nav-item.collapsed {
  border-left: 3px solid rgba(0, 0, 0, .2);
}

#sidebar nav li.nav-item, #sidebar nav li.nav-item:hover {
  border-left: 3px solid rgb(0, 50, 96);
  border-bottom: 1px solid rgba(250, 246, 236, 1);
  cursor: pointer;
  padding-left: 4px;
}

/* SUB MENU */

#sidebar nav ul.sub-menu {
  font-size: 12px;
  letter-spacing: 0.01em;
  color: rgb(0, 50, 96);
  margin-left: 20px;
  font-family: 'Yantramanav', Tahoma, sans-serif;
}

/* ************************ FORMS ******************************************* */

select option {
  font-size: 1.2em;
}

/* *********************** BOOTSTRAP SELECT ********************************** */

.dropdown-toggle.btn-default {
  color: #292b2c;
  background-color: #fff;
  border-color: #ccc;
}

.bootstrap-select.show>.dropdown-menu>.dropdown-menu {
  display: block;
}

.bootstrap-select>.dropdown-menu>.dropdown-menu li.hidden {
  display: none;
}

.bootstrap-select>.dropdown-menu>.dropdown-menu li a {
  display: block;
  width: 100%;
  padding: 3px 1.5rem;
  clear: both;
  font-weight: 400;
  color: #292b2c;
  text-align: inherit;
  white-space: nowrap;
  background: 0 0;
  border: 0;
}

.dropdown-menu>li.active>a {
  color: #fff !important;
  background-color: #337ab7 !important;
}

.bootstrap-select .check-mark::after {
  content: "✓";
}

.bootstrap-select button {
  overflow: hidden;
  text-overflow: ellipsis;
}

.bootstrap-select span.pull-left {
  float: left;
}

/* Make filled out selects be the same size as empty selects */

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
  display: inline !important;
}

/* *********************** BOOTSTRAP CUSTOm CHECKBOX ********************************** */

.custom-checkbox .custom-control-input:checked~.custom-control-label::before, .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #909eaf;
}

.custom-control {
  display: block;
  width: 100%;
  margin-bottom: 14px;
}

table .custom-control {
  display: inline;
  width: auto;
  margin-bottom: 0px;
}

/* *********************** DATA TABLES show more/less ********************************** */

td.details-control {
  cursor: pointer;
  text-align: center;
}

td.details-control::before {
  /* top: .25rem;
    left: 0;
    display: block;
    width: 1rem;
    height: 1rem; */
  content: "\f0fe";
  font-family: "Font Awesome 5 Free";
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

tr.shown td.details-control::before {
  content: "\f146";
}

/* *********************** BUTTONS ********************************** */

.btn-simple {
  margin-right: 0.333em;
  padding: 0.5em 1em;
  border: 1px solid #999;
  border-radius: 2px;
  cursor: pointer;
  font-size: 0.88em;
  color: black;
  white-space: nowrap;
  overflow: hidden;
  background-color: #e9e9e9;
  background-image: -webkit-linear-gradient(top, white 0%, #e9e9e9 100%);
  background-image: -moz-linear-gradient(top, white 0%, #e9e9e9 100%);
  background-image: -ms-linear-gradient(top, white 0%, #e9e9e9 100%);
  background-image: -o-linear-gradient(top, white 0%, #e9e9e9 100%);
  background-image: linear-gradient(to bottom, white 0%, #e9e9e9 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='white', EndColorStr='#e9e9e9');
  text-decoration: none;
  outline: none;
}

.btn-simple:hover {
  border: 1px solid #666;
  background-color: #e0e0e0;
  background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
  background-image: -moz-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
  background-image: -ms-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
  background-image: -o-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
  background-image: linear-gradient(to bottom, #f9f9f9 0%, #e0e0e0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#f9f9f9', EndColorStr='#e0e0e0');
}

/* ********** HELP TOOLTIPS  ************* */

/*
.help {
  cursor: pointer;
  color: rgb(51, 101, 138);
  margin-left: 10px;
}

h3.popover-title {
  color: rgba(62, 139, 138, 1);
  font-weight: normal;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.popover.bottom>.arrow {
  border-bottom-color: rgba(51, 101, 138, 1);
}

.popover {
  border-color: rgb(51, 101, 138);
  font-family: 'Arimo', Tahoma, Verdana, Geneva, sans-serif;
  z-index: 3501;
  font-size: 11px;
}

.popover.left>.arrow {
  top: 50%;
  right: -11px;
  margin-top: -11px;
  border-right-width: 0;
  border-left-color: rgba(51, 101, 138, 1);

} */


/* ********** MEDIA QUERIES ************* */

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (max-width: 768px) {
  body {font-size:1rem;} /*1rem = 16px*/
  h1 {font-size:1.5rem;}
  h2 {font-size:1.3rem;}
  h3 {font-size:1.2rem;}
  h4 {font-size:1.1rem;}
  h5 {font-size:1rem;}

  .lead {font-size:1.2rem;}

  .jumbotron img {
    width: 50%;
    max-width: 180px;
  }

  #sidebar {
    min-height: auto;
  }

  .brand > span {
    font-size: 12px;
  }

  nav.top ul li {
    margin-left: 12px;
  }

}

/* Small devices (landscape phones, 544px and up) */
@media (max-width: 544px) {
  body {font-size:0.8rem;} /*1rem = 16px*/
  h1 {font-size:1.2rem;}
  h2 {font-size:1.1rem;}
  h3 {font-size:1rem;}
  h4 {font-size:0.9rem;}
  h5 {font-size:0.8rem;}

  .lead {font-size:1rem;}


  nav.top {
    min-height: auto;
  }
}
