/*
body {
  background: yellow;
}
*/

$colorBlue: #007bff;
$colorBlueHover: lightblue;
$colorWhite: #fff;
$colorBlack: #444;
$colorRed: red;

.displayFlex {
  display: flex;
}

.modal {
  display: block; /* Make bootstrap modal window visible */
}

.modal-lg {
  max-width: 75%; /* Large bootstrap modal window */
}

// Multiline text same font as input.
textarea {
  font-family: inherit;
  font-size: inherit;
}

app-root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

app-root > button,
app-root * button {
  /* Child and descendent */
  font-family: inherit;
  font-size: inherit;
  padding: 0px;
  border: 1px solid transparent;
  background-color: $colorBlue;
  color: $colorWhite;
}

app-root > input,
app-root * input {
  font-family: inherit;
  font-size: inherit;
  padding: 0px;
  border: none;
  background: transparent;
  width: 100%;
}

app-root * .textAlignCenter {
  text-align: center;
}

app-root * .textAlignRight {
  text-align: right;
}

app-root * .alignSelfCenter {
  align-self: center;
}

app-root * .alignSelfFlexEnd {
  align-self: flex-end;
}

app-root * .errorSave {
  background-color: $colorRed;
  color: $colorWhite;
}

app-root > .alertError {
  background-color: $colorRed;
  color: $colorWhite;
}

app-root > .alertInfo {
  background-color: lightblue;
}

app-root * .gridRowIsSelect {
  background-color: lightblue;
}

app-root * .gridRow {
  border-bottom: 1px solid lightgray;
}

app-root * .gridRowFilter {
  background-image: linear-gradient(gray, white);
  border-bottom: 1px solid black;
}

app-root * .girdCellIsModify {
  background-color: orange;
}

app-root * .colorWhite {
  color: $colorWhite;
}

app-root * .colorBlue {
  color: $colorBlue;
}

app-root * .colorBlueHover:hover {
  color: $colorBlueHover;
}

app-root * .colorBlack {
  color: $colorBlack;
}

/* Grid */
app-root * .grid-table {
  width: 100%;
  table-layout: fixed;
}

app-root * .grid-td {
  height: 1px; /* If cells in same row have different height. See also: https://stackoverflow.com/questions/3542090/how-to-make-div-fill-td-height */
}

@-moz-document url-prefix() { /* See also: https://stackoverflow.com/questions/36575846/how-to-make-div-fill-td-height-in-firefox/36576083#36576083 */
  app-root * .grid-td {
       height: 100%;
   }
}

app-root * .grid-div {
  /* First div in td (cell) */
  display: flex;
  flex-grow: 1;
  white-space: nowrap;
  height: 100%; /* If cells in same row have different height */
}

app-root .th {
  cursor: pointer;
  background-color: $colorBlue;
  color: $colorWhite;
  font-weight: bold;
}

app-root .cellOdd {
  background-color: rgb(225, 232, 235);
}

app-root .gridSplitter {
  border-right: 1px solid white;
  cursor: col-resize;
}

app-root * .gridLookup {
  position: absolute;
  background-color: $colorWhite;
  border: 1px solid rgba(0, 0, 0, 0.7);
  box-shadow: 10px 10px 5px #888888;
  z-index: 1;
}

app-root * .pointer {
  cursor: pointer;
}

app-root * .fas {
  padding-right: 2px;
}

input::-ms-clear {
  display: none; // IE remove X on input
}

.gridClick {
  margin-bottom: 2em;
}

app-root .dialpad .row {
  display: flex;
}

app-root .dialpad .row button {
  width: 100%;
  height: 8rem;
  margin: 0.5rem;

	box-shadow: 3px 4px 0px 0px #1564ad;
	background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
	background-color:#79bbff;
	border-radius:5px;
	border:1px solid #337bc4;
	cursor:pointer;
	color:white;
	font-size:2rem;
	font-weight:bold;
}

app-root .dialpad .row button sub {
  display: block;
	font-size:1rem;
  font-weight: normal;
  letter-spacing: 0.1rem;
}

app-root .dialpad .row button:hover {
	background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
	background-color:#378de5;  
}

app-root .dialpad .row button:active {
	position:relative;
	top:1px;
}