/*
This style sheet contains the application wide classes, any futher classes must be added here if not component specific
*/

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.not-allowed {
  cursor: not-allowed;
}
.pointer {
  cursor: pointer;
}
.wait {
  cursor: wait;
}

.print {
  display: none;
}
/* flex classes */

.flex {
  display: flex;
}

.vertical-centered {
  display: flex;
  /* flex-direction: row; -- (Row: main axis=x, Column: main axis=y) */
  justify-content: center; /* main axis alignment */
  align-items: center; /* cross axis alignment */
}

.vertical-bottom {
  display: flex;
  /* flex-direction: row; -- (Row: main axis=x, Column: main axis=y) */
  justify-content: center; /* main axis alignment */
  align-items: flex-end; /* cross axis alignment */
}

.vertical-top {
  display: flex;
  /* flex-direction: row; -- (Row: main axis=x, Column: main axis=y) */
  justify-content: center; /* main axis alignment */
  align-items: flex-start; /* cross axis alignment */
}

/* .space-between {
  justify-content: space-between;
}

.space-around {
  justify-content: space-around;
} */

.align-center {
  align-items: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

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

.flex-item-even {
  flex-basis: 0;
  flex-grow: 1;
}

.side-spacer {
  margin-right: 13px;
  margin-left: 13px;
}

.flex-col3 {
  flex-grow: 1; 
  width: 33.333333%;
  min-height: 105px;
  padding-left: 13px;
  padding-right: 13px;
}

.container-blocks {
  display:flex; 
  flex-flow: row wrap;
  justify-content: space-around;
  width: 100%;
}

.fleft {
  float: left;
}

/*
.top-spacer
{
    padding: 0px 0px 10px 0px;
    margin-top: 10px;
    margin-left: 1px;
    margin-right: 1px;
}  */

/* .row.no-vert-space
{
    padding: 10px 0px 5px 0px;
} */

.white {
  color: white;
}
.black {
  color: black;
}
.grey {
  color: grey;
}

.red {
  color: red;
}

.darkred {
  color: darkred;
}

.orange {
  color: orange;
}

.darkorange {
  color: darkorange;
}

.green {
  color: green;
}

.darkgreen {
  color: darkgreen;
}

.blue {
  color: blue;
}

.lightblue {
  color: skyblue;
}

.darkblue {
  color: darkblue;
}

.aquamarine {
  color: aquamarine;
}

.bluetile {
  color: #2541df;
}

.pink {
  color: orchid;
}

.bold {
  font-weight: bold;
}
.tile-label {
  font-size: 1em !important;
  /* font-weight: bold !important; */
}

.tile-text {
  font-size: 1.12em !important;
  font-weight: bold;
  color: #606060;
}

/* width/height helpers */

.w-10 {
  width: 10%;
}

.w-25 {
  width: 25%;
}

.w-50 {
  width: 50%;
}

.w-75 {
  width: 75%;
}

.w-96 {
  width: 96%;
}

.w-100 {
  width: 100%;
}

/*! AUI Lozenge */
.lozenge {
  background: #ccc;
  border: 1px solid #ccc;
  border-radius: 3px;
  color: #333;
  display: inline-block;
  font-size: 15px;
  font-weight: bold;
  min-width: 50px;
  line-height: 99%;
  /* cross-browser compromise to make the line-height match the font-size */
  margin: 0;
  padding: 2px 5px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
.lozenge.lozenge-subtle {
  background-color: transparent; /* was #fff */
  border-color: #ccc;
  color: #333;
}
.lozenge-success {
  background-color: #14892c;
  border-color: #14892c;
  color: #fff;
}
.lozenge-success.lozenge-subtle {
  background-color: transparent; /* was #fff */
  border-color: #60b070;
  color: #14892c;
}
.lozenge-error {
  background-color: #d04437;
  border-color: #d04437;
  color: #fff;
}
.lozenge-error.lozenge-subtle {
  background-color: transparent; /* was #fff */
  border-color: #e8a29b;
  color: #d04437;
}
.lozenge-current {
  background-color: #f6c342;
  border-color: #f6c342;
  color: #594300;
}
.lozenge-current.lozenge-subtle {
  background-color: transparent; /* was #fff */
  border-color: #ffe9a8;
  color: #594300;
}
.lozenge-complete {
  background-color: #4a6785;
  border-color: #4a6785;
  color: #fff;
}
.lozenge-complete.lozenge-subtle {
  background-color: transparent; /* was #fff */
  border-color: #a5b3c2;
  color: #4a6785;
}
.lozenge-moved {
  background-color: #815b3a;
  border-color: #815b3a;
  color: #fff;
}
.lozenge-moved.lozenge-subtle {
  background-color: transparent; /* was #fff */
  border-color: #c0ad9d;
  color: #815b3a;
}

.dashed-box {
  border: 1px dashed darkgreen;
  border-radius: 15px;
  padding: 10px 20px 5px 20px;
}

.plus-box {
  width: 80%;
  height: 90%;
  border: 1px dashed grey;
  border-radius: 15px;
}

.light-background {
  background-color: #eff7fe;
}

.white-background {
  background-color: white;
  margin-top: 5px;
}

.tooltip-image {
    position: relative;
    display: inline-block;
    /* background-color: #5890ff; */
    /* width: 12px; */
    /* height: 12px; */
    /* border-radius: 100%; */
    color: #000;
    text-decoration: none;
  }
  .tooltip-image:after {
    content: attr(data-tooltip);
    position: absolute;
    top: -35px;
    left: -90px;
    width: 150px;
    background-color: #AAAAAA;
    color: #FFF;    
    font-size: 10px;
    padding: 5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease-in-out;
    will-change: opacity;
  }
  
  .tooltip-image:hover:after {
    opacity: 1;
    pointer-events: auto;
  }