/* 
   Flex references:
   - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
   - https://www.w3docs.com/snippets/html/how-to-make-a-div-fill-the-height-of-the-remaining-space.html
*/

* body {
  background-color: #eaf6ff;
  margin: 0;
  height: 100%;
  padding: 0;
}

.ssa-flex {
  /*
    Example for vertical flex container taking full height:
      <div class="ssa-flex ssa-flex-column ssa-full-height">
        <div class="ssa-flex-item-container">
         <div row1..
         <div row2..
         etc..
  */
  display: flex;
}

.ssa-flex-row {
  flex-direction: row;
}

.ssa-flex-column {
  flex-direction: column;
}

.ssa-flex-item-container {
  display: contents;
}

.ssa-flexcolitem-fillheight {
  /* - grow 0 means auto-height for content. if all other items 0, this item 
       takes remaining height
     - use this to just make a flexcolitem use remaining space - for one that 
       has borders/scrolls/etc, see ssa-stretch-box
  */
  flex-grow: 1;
}

.ssa-full-height {
  height: 100%
}

.ssa-height-50px {
  height: 50px;
}

.ssa-full-width {
  height: 100%
}

.ssa-with-border {
  border: 1px solid black;
}

.ssa-light-border {
  border: 1px solid rgba(0,0,0,.125);
  border-radius: .25rem;
}

.ssa-stretch-box {
  /*
    Example - flex column item taking remaining height, with vertical scroll:
        <div class="ssa-stretch-box ssa-full-height">
          <div class="ssa-stretch-panel ssa-light-border">
            <div class="ssa-stretch-content ssa-vertical-scroll">
  */
  flex-grow: 1; /* flex-grow - relative size compared to other boxes */
  position: relative;
}

.ssa-stretch-content {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
}

.ssa-vertical-scroll {
  overflow-y: scroll;
}

.ssa-stretch-panel {
  position: absolute;
  left: 10px;
  top: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px) !important;
  resize: none;
  margin-bottom: 0px;
}

.ssa-flexcolitem-centered {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.ssa-flex-column-center {
  align-items: center;
}

.ssa-background-white {
  background-color: whitesmoke;
}

.ssa-shown {
  display: block;
}

.ssa-hidden {
  display: none;
}

.ssa-loader-modal.modal-body {
  height: 150px;
}

/* START - Loader modal animation */
.ssa-loader,
.ssa-loader:before,
.ssa-loader:after {
  background: #000000;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.ssa-loader {
  color: #000000;
  text-indent: -9999em;
  margin: 40px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.ssa-loader:before,
.ssa-loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.ssa-loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.ssa-loader:after {
  left: 1.5em
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
/* END - Loader modal animation */