/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  /* Margin bottom by footer height */
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  /* Set the fixed height of the footer here */
  line-height: 60px;
  /* Vertically center the text there */
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.container {
  width: auto;
  max-width: 100%;
  padding: 0 15px;
  margin-left: 0;
}

.ftable {
  display: table;

}

.frow {
  display: table-row;
}

.fcell {
  display: table-cell;
  padding: 2px;
}

.ruler {
  padding-left: 41px;
  padding-top: 41px;
  background-image: url('lineal_3840x41.png'), url('lineal_41x3840.png');
  background-repeat: no-repeat;
  background-position-x: 41px, 0;
  background-position-y: 0px, 41px;
  width: fit-content;
}

td.in {
  text-align: center;
  font-weight: bold;
  vertical-align: middle;
  padding: 5px;
  color: blue;
}

td.out {
  text-align: center;
  font-weight: bold;
  vertical-align: middle;
  color: red;
  padding: 5px;
}

#myModal {
  position: relative;
}

.modal-dialog {
  position: fixed;
  width: 920px !important;
  margin: 0;
  padding: 10px;
}

.bckg0 {
  background-color: wheat;
}

.bckg1 {
  background-color: yellowgreen;
}

.bckg2 {
  background-color: yellow;
}

.cards {
  display: flex;
  flex-direction: row;
}

.card {
  display: flex;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

.card {
  box-sizing: content-box;
  margin: 10px;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.589);
}


.icolor {
  width: 46px;
  padding: 4px;
}

.btni {
  display: block;
}

.relative-col-center-relative {
  max-width: 100%;
  height: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  border-style: dashed;
  border-width: thin;
}

@media (min-width : 576px) {
  .relative-col-center-relative {
    max-width: 100%;
    height: auto;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    border-style: dashed;
    border-width: thin;
  }
}