/* Inspired by: https://www.bootply.com/5l9bZ7ZOt6 */

body, html {
  margin: 0;
}

/* A spinning loading indicator, as on https://www.w3schools.com/howto/howto_css_loader.asp */
#loader {
  position: absolute;
  top: 50px;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60; /* for true centering */
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  -moz-animation: spin 2s linear infinite;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#content {
  opacity: 0; /* opacity: 0 hides the panel in the beginning, yet it is already rendered.
                 This prevents problems where the table pre-selection is not accepted. */
  margin: 10px;
}

#top {
  position: absolute;
  left: 0;
  right: 0; /* so that box shadow is visible, do not set width: 100% and class col-sm-12 */
  /* background-color: #eee; */
}

#top-content {
  padding-top: 10px;
  margin-bottom: 0;
}

#bottom {
  position: absolute;
  left: 0;
  right: 0; /* so that box shadow is visible, do not set width: 100% and class col-sm-12 */
  bottom: 0;
}

.scrollbox {
  overflow: auto;
  padding-right: 5px;
}

.transition {
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}

.transition-slow {
  -webkit-transition: 2s;
  -moz-transition: 2s;
  -ms-transition: 2s;
  -o-transition: 2s;
  transition: 2s;
}

.shadowbox {
  -webkit-box-shadow: 0 0 10px rgb(100,100,100);
  -moz-box-shadow: 0 0 10px rgb(100,100,100);
  box-shadow: 0 0 10px rgb(100,100,100);
  margin: 10px;
}

.shadowbox-bottom-right {
  -webkit-box-shadow: 5px 5px 5px rgb(100,100,100);
  -moz-box-shadow: 5px 5px 5px rgb(100,100,100);
  box-shadow: 5px 5px 5px rgb(100,100,100);
  margin-bottom: 10px;
}

.tilebtn {
  font-size: 20px;
  width: 150px;
  height: 150px;
  padding: 20px;
  margin: 20px;
}

.icon-lg {
  font-size: 30px;
}

.updownbtn {
  position: relative;
  top: -22px;
  font-size: 17px;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0 5px;
  background: none;
}

/*
.togglebtn {
  vertical-align: top;
  height: 100px;
}
*/

.dataTable {
  width: inherit !important;
  float: left;
}


.box {
  padding: 10px;
  margin-bottom: 10px;
  background: #eee;
  border: 1px solid #DDD;
  background: -moz-linear-gradient(top, #EEE, #FFF);    
  background: -webkit-linear-gradient(top, #eee, #fff);
  background: -ms-linear-gradient(top, #eee, #fff);
  background: -o-linear-gradient(top, #eee, #fff);
  -webkit-box-shadow: 1px 2px 4px rgba(0,0,0, .2);
  -moz-box-shadow: 1px 2px 4px rgba(0,0,0, .2);
  box-shadow: 1px 2px 4px rgba(0,0,0, .2);
}

.box-title {
  margin-top: 0;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ccc;
}

/* override stupid htmlwdgtgrid.css: */
[class*="col-"] {
  padding-right: 15px;
}

.pot-detail-table-div {
  background-color: #ccc;
  border-radius: 10px;
  padding: 2px;
}
.pot-detail-table {
  font-size: 12px;
  /* font-weight: 700; */
  width: 100%;
}
.pot-detail-table td {
  padding: 2px;
}
.pot-detail-table .right {
  text-align: right;
}


/* smaller morph field tables: */
table.dataTable {
  line-height: 1.55em;
}
table.dataTable tbody th, table.dataTable tbody td {
  padding: 3px 10px !important;
}
table.dataTable thead th, table.dataTable thead td {
  padding: 3px 10px !important;
}
.popover {
  font-family:    'Ubuntu', sans-serif;
  font-size:      14px;
  letter-spacing: 0.02em;
  line-height:    1.55em;
  font-weight:    400;
  color:          #222;
}
.popover-content {
  width: 400px;
}

.toggle-app-state-btn {
  height: 27px;
  padding: 3px 10px;
  position: absolute;
  left: -5px;
  z-index: 10;
}

/*
https://css-tricks.com/dont-overthink-flexbox-grids/
https://stackoverflow.com/questions/27292942/2x2-grid-in-flexbox-with-fixed-width-column
https://www.w3docs.com/snippets/css/how-to-vertically-center-text-with-css.html
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://aerolab.co/blog/flexbox-grids/
*/
.flex-grid {
  display: flex;
  flex-wrap: wrap;
}
.grid-item {
  flex: 1;
  /* flex: 1 1 50%; */
  text-align: center; /* center horizontally */
  /* margin: auto; /* center vertically (not a good idea because one button, the upload button, is higher than others), alt.: */
  padding: 7px;
}
/* 
.grid-item:nth-child(odd) {
  flex: 0 0 50%;
}
*/