.red { color: red !important }
.green { color: green !important }

.required {
    background-color: #ff4444;
}

.large {
    font-size: large;
    vertical-align: bottom;
}

/* see https://encycolorpedia.ru/html for colors */

.gt-status-1 {
    background-color: #ffc0cb;
}
.gt-status-3 {
    background-color: #9f9f9f;
}
.gt-status-4 {
    background-color: #ff0000;
}
.gt-status-5 {
    background-color: #ff6699;
}
.gt-status-6, .gt-status-8 {
    background-color: #ff9900;
}
.gt-status-9 {
    background-color: #ffff00;
}
.gt-status-11 {
    background-color: #a95e13;
}
.gt-status-12 {
    background-color: #8b55ff;
}
.gt-status-15 {
    background-color: #00ccff;
}
.gt-status-17 {
    background-color: #007fff;
}
.gt-status-19 {
    background-color: #a2a222;
}
.gt-status-20, .gt-osstatus-2 {
    background-color: #00ff00;
}

.gt-osstatus-1 {
    text-decoration: line-through;
}

.force-wrap {
    overflow-wrap: break-word;
}

.x-grid3-cell-inner, .x-grid3-hd-inner {
    white-space: normal;
}

/* separate magnifier from content. But this causes problems in row details view and more */
/* a.ra-icon-magnify-tiny { */
/*     float: right; */
/*     width: 4px; */
/* } */

/* a.ra-icon-magnify-tiny:hover { */
/*     width: auto; */
/* } */

.gt-no-magnifier a.ra-icon-magnify-tiny {
    display: none;
}

.ra-icon-cross-light-12x12, .ra-icon-checkmark-12x12, .icon-checkmark-large {
    color: transparent;
}

.with-icon.icon-checkmark-large {
    padding-left: 0px;
    background-image: none !important;
}

/* Increase font sizes */

/*
.x-grid3-row td {
    font: normal 12px/14px arial, tahoma, helvetica, sans-serif;
}
*/

/* Mobile */

/* This fixes disappearing bottom bar when zooming in on mobile.
   However probably not all of these are really needed. */
.x-panel-bbar, .x-panel-bbar .x-toolbar, .x-viewport, .x-viewport body {
    overflow: visible;
}

.gt-visible {
    color: initial !important;
}

/*
  @media screen and (max-width: 900px) {
    .x-grid3-row td {
        font: normal 13px/15px arial, tahoma, helvetica, sans-serif;
        font-size: medium;
    }
}
*/

@media print {
  .x-viewport body,
  .x-panel-bwrap { overflow: visible; }
  
  .x-panel-body.x-border-layout-ct,
  .x-panel-body.x-panel-body-noheader.x-panel-body-noborder,
  .x-panel-ml .x-panel-mr .x-panel-mc .x-panel-body {
      height: auto !important;
      overflow: visible;
  }

  .x-tab-panel-body.sbl-panel-body-noborder.x-tab-panel-body-top {
      height: auto !important;
  }
  
  .ra-icon-cross-light-12x12, .ra-icon-checkmark-12x12, .icon-checkmark-large {
      color: initial;
  }
}
/* Optional app-specific CSS goes here */


/*  ------------------------
    Temp styles                   */

div.creature-datasheet .img-cell {
  max-width:150px;
  padding-right:15px;
  padding-left:5px;
}

div.creature-datasheet.page .img-cell {
  max-width: 100%;
  padding-right:15px;
}

div.creature-datasheet.page .img-cell img {
  width:100%;
}

div.creature-datasheet {
  margin: 5px;
  background-color: #ffffff;
  color: #333333;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
  line-height: 20px;
}

div.creature-datasheet.page {
  margin: 0px;
}

.creature-datasheet table.top-table {
	border: 1px solid #DDDDDD;
}

.creature-datasheet.page table.top-table {
	border: 0px;
}

.creature-datasheet table.top-table > tbody > tr > td {
	padding: 2px 8px 2px 3px;
}

.creature-datasheet table.top-table > tbody > tr > th {
  padding: 2px 15px 2px 5px;
	font-weight: bold;
	width:220px;
}

.creature-datasheet table.top-table > tbody > tr {
	background: white;
}

.creature-datasheet table.top-table > tbody > tr:nth-child(2n+1){
	background: #F8F8F8;
}

.creature-datasheet table.top-table div.detail {
  padding:5px;
  max-width: 550px;
}


/*  ---------------------------------------------------- */


.creature-datasheet table.top-table.nest {
   width:100%;
   vertical-align: top;
}
.creature-datasheet table.top-table.nest > tbody > tr > th {
	white-space:nowrap;
	width:40%;
}

.creature-page-link {
  text-decoration:none;
  color:blue;
  font-size:12px;
}

.editing-record .creature-page-link {
  visibility: hidden;
}


div.weight-chart-wrap {
  max-width:100%;
  min-height:200px;
}


div.no-chart-data-wrap {  
  position: relative;
}

div.no-chart-data {
  position:absolute;
  top: 15px; right: 15px; bottom: 15px; left: 15px;
  border:1px solid #dddddd;
  text-align: center;
  color:grey;
}


.shadow {
  -webkit-box-shadow: 8px 6px 6px -6px #777;
     -moz-box-shadow: 8px 6px 6px -6px #777;
          box-shadow: 8px 6px 6px -6px #777;
}


div.diet_type_badge_wrap {
  text-indent: 25px;
}

div.diet_type_badge {
  width: 120px;
  height: 120px;
  background-position: center center;
  background-repeat: no-repeat;
}

/* FIXME: are these really needed? */

div.diet_type_badge.carnivore {
  background-image: url(../../../assets/local/misc/static/img/carnivore_120.png);
}

div.diet_type_badge.herbivore {
  background-image: url(../../../assets/local/misc/static/img/herbivore_120.png);
}

div.diet_type_badge.omnivore {
  background-image: url(../../../assets/local/misc/static/img/omnivore_120.png);
}

div.diet_type_badge > span.title {
  font-style: italic;
  font-size: 1.2em;
}