/** NOTES
Use:
  max-height: calc(100% - 40px);
  overflow: auto;
On app-container, if we want then entire page to scroll on overflow
use 
**/
.padding-none {
  padding: 0;
}

.background-flint-bio {
  background-image: url("/images/backgroundimg.png");
  background-color: black;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right bottom;
}

.text-white {
  color: white;
}

.nav.nav-pills.nav-stacked {
  float: left;
  width: 180px;
}

.nav-link.ng-binding {
  background-color: #ffd738;
}


.nav-link.ng-binding:focus {
  background-color: #ffd738;
}

.nav-link.ng-binding.active {
  background-color: #ffbb00;
}

.nav-link.ng-binding:hover {
  background-color: #ffbb00;
}

uib-tab-heading.tab-text {
  color: black;
}

.navbar {
  padding: unset;
}

.navbar-is-fixed {
  padding-top: 50px;
}

.app-container {
  margin: 20px;
  height: calc(100% - 40px);
  background-color: #0000006c;
}

.module-container {
  height: 100%;
  overflow: hidden;
}

.sub-module-container {
  height: 100%;
}

.configuration-container {
  height: calc(100% - 38px);
  overflow: auto;
}

div.tab-content {
  margin-left: 195px;
  height: 100%;
}

.tab-content>.tab-pane {
  height: 100%;
}

.menu-item>h4.full-name {
  font-weight: bold;
  margin-bottom: unset;
  font-size: 1.1rem;
}

.menu-item>div.role-name {
  font-style: italic;
  font-size: small;
  text-align: center;
}

.dropdown-divider {
  border-color: black;
  border-bottom-width: 0.1px;
  border-top-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-style: solid;
  margin-left: 20px;
  margin-right: 20px;  
  margin-top: 5px;
  margin-bottom: 5px;
}

.menu-item-header {
  font-family: system-ui;
  color: darkgray;
  font-size: 14px;
}

.btn.btn-menu {
  text-align: left;
  font-size: 15px;
}

.page-title {
  border-color: orange;
  border-style: solid;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-width: 10px;
  width: 100px;
  white-space: nowrap;
  margin-left: 80px;
}

.navigation-tabs {
  padding-top: 7px;
  padding-bottom: 7px;
  width: inherit;
}

.modal-backdrop.fade.show {
  opacity: 0.5;
}

.modal.fade.show {
  opacity: 1;
}

.modal-header {
  justify-content: center;
}

.btn-link {
  color: #777
}

.btn-link:hover, .btn-link:focus {
  color: #333
}

.dropdown-menu.user {
  left: -100px;
  margin-right: 10px;
  white-space: nowrap;
}

.dropdown-menu.user>li.menu-item {
  padding-left: 20px;
  padding-right: 50px;
}

.dropdown-menu.user>li>a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
}

.dropdown-menu.user>li>a:hover, .dropdown-menu.user>li>a:focus {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
}

.btn:active, .btn.active {
    background-image: none;
    outline: 0;
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

.modal-group-container {
  border-style: ridge;
  border-width: 2px;
  padding: 10px;
  margin: 0px 0px 10px 0px;
}

.pointer {
  cursor: pointer;
}

/*
.btn-primary {
  color: #fff;
  background-color: #ffd014;
  border-color: #357ebd;
}

.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
  color: #fff;
  background-color: #ffbb00;
  border-color: #285e8e;
}
*/


/* Scrolling table
  https://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody#:~:text=In%20order%20to%20make%20%3Ctbody,from%20breaking%20the%20table%20layout.

  
  https://css-tricks.com/forums/topic/stylized-html-table-with-vertical-scroll-inside-tbody/
*/
/*table {
  /*width: 100%;
  /*border-spacing: 0;
  /*height: calc(100% - 200px); /* just need to make sure that footer isn't going to get hidden by parent div */
  /*background-color: #000000c7;
/*}
/*
/*thead, tbody, tr, th, td {
  /*display: block;
/*}
/*
/*thead tr {
    /*/* fallback */
    /*width: 97%;
    /*/* minus scroll bar width */
    /*width: -webkit-calc(100% - 17px);
    /*width:    -moz-calc(100% - 17px);
    /*width:         calc(100% - 17px);
/*}
/*
/*tr:after {  /* clearing float */
    /*content: ' ';
    /*display: block;
    /*visibility: hidden;
    /*clear: both;
/*}
/*
/*tbody {
    /*height: calc(100% - 50px); /* just need to make sure footer doesn't get hidden underneath the table */
    /*overflow-y: auto;
    /*overflow-x: hidden;
/*}
/*
/*tbody td, thead th, tfoot td {
    /*width: 19%;  /* 19% is less than (100% / 5 cols) = 20% */
    /*float: left;
/*}*/

th.checkbox, td.checkbox {
  width: 20px;
}
.controls {
  margin-bottom: 20px;
}
.tbody-padding {
  padding-right: 17px;
}

tr.striped:nth-child(odd) {
  background-color: #383838c7;
}