html {
  font-family: Arial, sans-serif;
}

body {
  margin: 8px;
}

.main-body {
  max-width: 50vw;
  margin: 0 auto;
}

html[dir=rtl] select:not([multiple]) {
  background-position: .7em 50%, 0 0;
}

select {
  color: #444;
  line-height: 1.3;
  padding-inline-start: .8em;
  padding-inline-end: 1.4em;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: 0;
  border-bottom: 1px solid #d2d2d2;
}

select:not([multiple]):not(.flatpickr-monthDropdown-months) {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  background-image: url('/static/images/chevron-down-gray.svg');
  background-repeat: no-repeat, repeat;
  background-position: right .7em top 50%, 0 0;
  background-size: .65em auto, 100%;
}

select:not([multiple]):not(.flatpickr-monthDropdown-months):focus {
  background-image: url('/static/images/chevron-down.svg?v=2');
  border-bottom: 1px solid #569ff7;
}

select:invalid {
  color: gray;
}

option:not([disabled]) {
  color: #444;
}

.table-filter {
  width: 0;
  border: none;
  box-shadow: none;
  outline: none;
}

input.table-filter {
  padding: 0;
}

input.date-range.form-control {
  direction: ltr;
  background: transparent;
  border: none;
  color: white;
}

.date-range-control div.date-range-img {
  width: 0.65em;
  height: 0.65em;
}

.date-range-control a[data-toggle] .date-range-img {
  background-image: url('/static/images/chevron-down-gray.svg');
  margin-top: 2px;
}

.date-range-control a[data-clear] .date-range-img {
  background-image: url('/static/images/x-icon-grey.svg');
  margin-inline-start: 2px;
}

img.table-sort {
  width: 2ch;
  height: 2ch;
}

forms * {
  font-size: 20px;
}

.menu-parent {
  position: relative;
  height: 100%;
}

.menu-button {
  cursor: pointer;
  display: flex;
}

.profile {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin-inline-end: 10px;
  border-radius: 50%;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-image: url('/static/images/profile.jpg');
}

.username {
  color: #444;
}

.image-menu {
  padding: 10px;
  width: 24px;
  height: 24px;
  filter: grayscale(100%);
  opacity: 0.4;
}

.image-menu:hover {
  filter: none;
  opacity: 1;
}

.extra-top-icon {
  position: absolute;
}

.extra-top-icon .image-menu {
  margin-top: -15px;
}

.x-icon-with-border {
  width: 16px;
  height: 16px;
  padding: 5px;
  border: 3px solid black;
  position: absolute;
  background-image: url('/static/images/x-icon.svg');
  background-repeat: no-repeat;
  background-origin: content-box;
}

#username:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.menu {
  position: absolute;
  width: max-content;
  min-width: 100%;
  top: 100%;
  background: #eee;
  z-index: 999;
}

.menu div {
  margin: 5px 0;
}

.view-header-buttons {
  display: flex;
  position: absolute;
  height: 3ex;
}

.view-header-buttons img {
  display: block;
  height: 100%;
  margin-inline-end: 1ch;
  opacity: 0.3;
}

.view-cycles {
  position: absolute;
  top: 0;
}

.view-cycles select:not([multiple]) {
  font-size: 125%;
  padding-inline-start: 0.2em;
  padding-inline-end: 0.8em;
  background-position: right 0em top 50%, 0 0;
  margin-top: 5px;
}

html[dir=rtl] .view-cycles select:not([multiple]) {
  background-position-x: 0, 0;
}

div.field-extra-buttons {
  position: absolute;
  top: 2px;
  margin-inline-start: -4ex;
  opacity: 0.3;
}

div.field-extra-buttons img {
  height: 3ex;
}

.settings-container {
  margin-top: 10px;
}

dialog {
  text-align: center;
}

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 1%;
  border: solid black 1px;
  z-index: 200;
}

.key-value {
  margin-top: 3vh;
  margin-inline-start: 0.5vw;
  margin-inline-end: 8ch;
  color: #444;
  white-space: nowrap;
  line-height: 2;
  padding-bottom: 2ex;
}

.key-only {
  font-size: 100%;
  color: #888;
  line-height: 1;
  padding-bottom: 0.7ex;
  padding-top: 1ex
}

.value-only {
  font-size: 150%;
  line-height: 1;
}

ul.inner-list {
  list-style: none;
}

div.inner-list {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

div.inner-list div {
  margin-inline-end: 1ch;
  max-width: calc(100% - 1ch);
  width: calc(100% - 1ch);
}

div.inner-list div:last-child {
  margin-inline-end: 0;
  max-width: 100%;
  width: max-content;
}

div.inner-list.expand-last div:last-child {
  flex-grow: 1;
}

.boolean-tree-item, .boolean-tree-shortcut {
  margin-top: 1ex;
}

.tree-expand-h {
  width: 16px;
  height: 16px;
  background-image: url('/static/images/h_line.svg');
  z-index: 0;
}

.tree-expand-v {
  position: absolute;
  width: 16px;
  height: 16px;
  background-image: url('/static/images/v_line.svg');
  transition: transform 0.2s;
  z-index: 1;
}

.no-expand {
  width: 16px;
  height: 16px;
}

.sub-object-li {
  display: inline-block;
  margin: 10px 15px;
}

.sub-object-li div.main-icon {
  padding-bottom: calc(100% - 1.5vw);
  text-align: center;
  position: relative;
}

span.name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #787878;
}

.orm-object {
  position: relative;
  background: #FDD;
}

.orm-object span.missing {
  color: red;
}

.orm-object-edit {
  width: 32px;
  height: 32px;
  position: absolute;
  background-image: url('/static/images/edit-icon');
  background-repeat: no-repeat;
  background-position-x: right;
}

.orm-object-del {
  margin-inline-start: calc(25vh - 32px);
}

.orm-new {
  position: relative;
  background: #FDD8;
  border-style: dashed;
  cursor: pointer;
}

.chart-container {
  width: 80%;
  max-width: 80%;
  margin: 0 auto;
}

.selects-row {
    min-width: 100%;
}

.selects-row select {
    margin: 0 0 10px 10px;
}

table, th, td {
    border: 1px solid #ddd;
    border-collapse: collapse;
    padding: 8px;
}

table.mobile-fields-table {
    display: none;
}

table.fields-table {
    box-shadow: 1vw 1.5vw 1.25vw 0px rgba(0,0,0,0.2);
    width: calc(100% - 1.5vw);
}

table.fields-table td {
    border: none;
    padding-inline-start: 3ch;
    padding-inline-end: 3ch;
}

table.objects-table {
  width: 100%;
  table-layout: fixed;
  color: #666;
}

table.objects-table tr:nth-child(even) {
  background-color: #f2f2f2;
}

table.objects-table tr:hover {
  background-color: #ddd;
}

table.objects-table tr.summary {
  border-top: 2px solid black;
}

table.objects-table th {
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #006064;
  color: white;
  height: 1px;
}

table.objects-table th.in-group {
  background-color: #008084;
}

table.objects-table th div.objects-table-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  height: 100%;
  position: relative;
}

table.objects-table th div.column-group {
  position: absolute;
  margin-top: -13px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

table.objects-table th div.column-group.column-group-h {
  background-image: url('/static/images/h_line_white.svg');
}

table.objects-table th div.column-group.column-group-v {
  background-image: url('/static/images/v_line_white.svg');
  transition: transform 0.2s;
  z-index: 1;
}

table.objects-table th select {
  color: white;
}

table.objects-table th a.table-new {
  color: white;
  margin-bottom: 1ex;
}

table.objects-table td {
  width: 1px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

table.objects-table.transposed td:first-of-type {
  white-space: normal;
}

table.objects-table td img {
  width: 2ex;
  vertical-align: middle;
}

table.objects-table td a {
  margin-inline-start: 1ch;
}

table.objects-table td div.price {
  margin: -4px;
  max-width: calc(100% + 8px);
}

div.price input {
  max-width: calc(100% - 4ch);
  margin-inline-end: 0.5ch;
}

table.auto-width div.price input {
  max-width: 8ch;
}

.broiler-toggle {
    width: 7ch;
    padding: 1% 0;
    margin-inline-start: 1ch;
    text-align: center;
    border: none;
    text-decoration: none;
    color: white;
    font-size: 150%;
    cursor: pointer;
    background-color: darkgreen;
}

.broiler-toggle.farms {
    background-color: #006064;
}

.broiler-report-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.broiler-brief {
    display: inline-block;
    width: 16vw;
    height: 16vw;
    color: white;
    background-repeat: no-repeat;
    background-position-y: center;
    padding-top: 7.1%;
    box-sizing: border-box;
}

.broiler-brief.house {
    background-image: url('/static/images/simple-house-icon.svg');
}

.broiler-brief.farm {
    background-image: url('/static/images/simple-farm-icon.svg');
}

.broiler-house-title {
    width: 38%;
    height: 25.5%;
    font-size: 2.2vh;
    text-align: center;
    margin: auto;
    overflow-y: hidden;
}

.broiler-house-text {
    width: 54%;
    padding: 0% 25%;
    font-size: 1.8vh;
}

.broiler-house-cell {
    display: table-cell;
    height: 7.7vw;
    vertical-align: middle;
}

.house-details {
    display: inline-flex;
    cursor: pointer;
}

.house-details:before {
    content: '';
    position: relative;
    height: 0;
    margin-right: 4px;
    border: 6px solid transparent;
}

.house-details:not(.open):before {
    top: 5px;
    left: 5px;
    border-color: transparent transparent transparent black;
}

.house-details.open:before {
    top: 9px;
    border-color: black transparent transparent transparent;
}

h2 {
  text-align: center;
  font-size: 150%;
}

form .form-row {
  display: flex;
  padding-top: 3ex;
  padding-bottom: 2ex;
}

form .form-cell {
  padding: 0 1ch;
  flex-grow: 1;
  min-width: 0;
}

form .form-cell > h3 {
  margin: 0;
}

form .form-cell.title-cell {
  margin-bottom: -6ex;
}

form .form-field {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 100%;
}

form .form-field-label {
  position: absolute;
  font-size: 85%;
  top: -3.5ex;
  margin-inline-start: 0.25ch;
  color: #9f9f9f;
  z-index: -1;
}

form .empty > .form-field-label {
  top: -0.5ex;
  font-size: 85%;
}

form .form-field .form-field-label.checkbox {
  position: unset;
  font-size: 85%;
  top: 1px;
}

form .form-field .flex-grow {
  min-width: 0;
}

form .form-field input {
  font-size: 100%;
  outline: none;
  border: 0;
  border-bottom: 1px solid #d2d2d2;
  background: transparent;
}

form .form-field input:focus {
  border-bottom: 1px solid #569ff7;
}

form .form-field input[type=checkbox] {
  font-size: 100%;
  height: 2ex;
  width: 2ex;
  margin: 0;
}

form .form-field select {
  font-size: 100%;
  outline: none;
}

form .form-field input[type=checkbox]:is(.boolean-tree-box, .boolean-tree-shortcut-box) {
  margin-inline-start: 1ch;
}

.inner-form form input[type=submit] {
  background-color: #569ff7;
  color: white;
  border: none;
  font-size: 100%;
  padding: 1ch 2ch;
  border-radius: 2ch;
  margin-bottom: 2ex;
  cursor: pointer;
}

form .form-cell .form-field :is(input, select) {
  max-width: 100%;
  min-width: 100%;
}

form .form-cell:last-child .form-field input[list] {
  min-width: 0;
}

.sub-form-selector {
  max-width: 100%;
}

.sub-form-selector > div {
  border: 0;
}

.traffic-light-select {
  display: flex;
  justify-content: center;
}

div.traffic-light-select div.traffic-light-option {
  width: 10vw;
  height: 10vw;
  margin: 0 1px;
  display: none;
}

.traffic-light-select .selected {
  box-sizing: border-box;
  border: 3px solid black;
}

.type-select {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  opacity: 0;
  z-index: 100;
  cursor: pointer;
}

.past-event ul {
  margin-block-start: 0;
  margin-block-end: 0;
}

.sf-report {
  margin-top: 10vh;
  text-align: center;
}

li.icon-container {
  width: 20%;
  display: inline-block;
}

li.icon-container.sub-object-li {
  margin: 0;
}

.icon-container .icon-field {
  position: relative;
}

.icon-container .icon-field-title {
  position: absolute;
  top: 1vw;
  width: calc(100% - 1.5vw);
  text-align: center;
  z-index: 1;
  font-size: 12vw;
  color: #222;
  opacity: 0.75;
  cursor: pointer;
  user-select: none;
}

.icon-container .icon-field-title.gender {
  top: 0vw;
  text-align: end;
  font-size: 6vw;
  opacity: 1;
  font-weight: 1000;
}

.icon-container .icon-field-title.gender.female {
  color: pink;
}

.icon-container .icon-field-title.gender.male {
  color: lightblue;
}

.icon-container .event-icon {
  width: 30vw;
}

.icon-container .modal .icon-field-title {
  font-size: 24vw;
  top: 4vw;
  line-height: 0.9;
  max-width: 70%;
  margin-inline-start: 15%;
  cursor: unset;
}

.icon-container .modal .icon-field-title.gender {
  font-size: 8vw;
  top: 0vw;
}

.icon-container .main-icon {
  width: calc(100% - 1.5vw);
  margin-top: 0.8vw;
  margin-inline-end: 0.8vw;
  border: 1px solid #c8c8c8;
  -webkit-box-shadow: 1vw 1.5vw 1.25vw 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 1vw 1.5vw 1.25vw 0px rgba(0,0,0,0.2);
  box-shadow: 1vw 1.5vw 1.25vw 0px rgba(0,0,0,0.2);
  background-color: white;
  cursor: pointer;
}

html[dir=rtl] .icon-container img.main-icon:not(.flippable) {
  -webkit-box-shadow: -1vw 1.5vw 1.25vw 0px rgba(0,0,0,0.2);
  -moz-box-shadow: -1vw 1.5vw 1.25vw 0px rgba(0,0,0,0.2);
  box-shadow: -1vw 1.5vw 1.25vw 0px rgba(0,0,0,0.2);
}

html[dir=rtl] img.flippable {
  transform: scale(-1, 1);
}

.icon-container div.missing {
  position: relative;
}

.icon-container div.missing:before {
  content: '';
  position: absolute;
  top: calc(0.8vw + 1px + 2.5%);
  margin-inline-start: 2.5%;
  height: 10%;
  width: 10%;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
  z-index: 1;
}

.icon-new img.main-icon {
  opacity: 0.38;
}

.icon-title {
  position: absolute;
  top: 29%;
  width: calc(100% - 1.5vw);
  height: 10.5%;
  font-size: 1.1vw;
  color: white;
  text-align: center;
  overflow-y: hidden;
}

.icon-title div {
  width: 38%;
  max-height: 100%;
  margin: auto;
}

.top-text .icon-title {
  top: 10%;
  height: max-content;
  color: black;
}

.top-text .icon-title div {
  width: 100%;
  margin: 0;
  margin-top: 2ch;
}

.icon-text {
  position: absolute;
  /* top: 42%; */ /* <-- to support 8 lines of text inside the house. Needed only in Carmia? */
  top: 45%;
  width: calc(50% - 0.75vw);
  padding-inline-start: calc(25% - 0.375vw);
  padding-inline-end: calc(25% - 0.375vw);
  font-size: 0.69vw;
  color: white;
}

.icon-container.fridge .icon-title {
  display: none;
}

.icon-container.fridge .icon-text {
  color: #777;
}

.icon-new .icon-text {
  top: 0.8vw;
  height: calc(100% - 0.8vw);
  font-size: 200%;
  color: black;
  opacity: 0.38;
}

.modal {
  position: fixed;
  top: 0;
  left: min(27.5vw, calc(50vw - 350px));
  width: max(45vw, 700px);
  max-height: 100vh;
  overflow-y: auto;
  border: 1px solid #c8c8c8;
  background: white;
  -webkit-box-shadow: 4px 6px 5px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 4px 6px 5px 0px rgba(0,0,0,0.2);
  box-shadow: 4px 6px 5px 0px rgba(0,0,0,0.2);
  z-index: 5;
}

.modal-icon {
  width: calc(2.4em + 3ch);
  max-width: 30%;
  padding: 1.2em;
  box-sizing: border-box;
  max-height: 100%;
  position: absolute;
  top: 0;
  cursor: pointer;
}

.modal-icon img {
  max-width: 100%;
}

.history {
  opacity: 0.3;
}

.modal-close {
  margin-inline-start: calc(100% - 2.4em - 3ch);
  opacity: 0.55;
}

.modal-content {
  padding: 0 10ch;
}

.modal-content form input {
  max-width: 35vw;
}

form input:read-only:not(.flatpickr-input):not([type=submit]):not(.daterange-picker) {
  background-color: #ebebe4;
}

.modal-history {
  padding: 0 8ch 2ex 8ch;
}

div.unit {
  margin-bottom: 0;
}

input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.report-input div.inner-list {
  display: block;
  position: relative;
}

.report-input div.inner-list div:not(:is(.traffic-light-select, .traffic-light-option, .unit)) {
  margin: 5px 0;
  width: 100%;
  max-width: 100%;
}

.report-input div.previous-entry div.inner-list {
  display: flex;
  margin: 0;
}

.report-input div.previous-entry div.inner-list div:not(:is(.traffic-light-select, .traffic-light-option, .unit)) {
  width: unset;
  margin: 0;
  text-align: center;
}

.report-input .icon img {
  width: 100%;
}

.report-input ul {
  position: relative;
  padding-inline-start: 0;
  width: 100%;
  text-align: center;
}

.report-input ul ul li {
  width: max-content;
}

.report-input label {
  color: #999;
}

.report-input .new-event-input a, #events-events a {
  display: none;
}

.report-input .new-event-input li {
  width: 100%;
  text-align: center;
  margin: 5px 0;
}

.report-input .previous-entry li {
  width: unset;
  text-align: unset;
  margin: 0;
}

.report-input .new-event-input ul ul input {
  margin: 0 calc(50% - 2ch - 7.5px);
}

.report-input ul.previous-entry ul input {
  margin: 0;
}

.report-input .new-event-input input:not(.datetime-picker) {
  font-size: min(10vw, 300%);
  width: 4ch;
  text-align: center;
  max-width: 95%;
  border: transparent;
  border-bottom: 1px solid #eee;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
  outline: none;
  padding: 0;
}

.report-input .previous-entry input:not(.datetime-picker) {
  font-size: 100%;
  width: 8ch !important;
  margin: 0 !important;
  text-align: center;
  max-width: unset;
  border: transparent;
  border-bottom: 1px solid #eee;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
  outline: none;
}

.report-input .new-event-input #temperature input,
.report-input .new-event-input #humidity input,
.report-input .new-event-input #co2 input {
  width: 5ch;
  margin: 0 calc(50% - 2.5ch);
}

.report-input .new-event-input {
  text-align: center;
  margin-bottom: 10px;
}

.report-input .new-event-input .traffic-light-select select {
  display: none;
}

.report-input .new-event-input .traffic-light-option {
  display: block;
}

.report-input .flatpickr-input {
  border: 0;
  color: #bbb;
  background-color: transparent;
  width: 10ch;
  font-size: min(3vw, 100%);
}

.report-input select.unit {
  position: absolute;
  font-size: min(3vw, 100%);
  top: 2ch;
  left: 0;
  right: 0;
  margin-inline-start: calc(50% + 6ch + 15px);
}

.report-input div.unit {
  position: absolute;
  width: max-content;
  font-size: min(10vw, 300%);
  line-height: 1;
  top: 0;
  left: 0;
  right: 0;
  margin-inline-start: calc(50% + 2ch + 15px);
  margin-bottom: 0;
}

.report-input div.unit.symbol {
  margin-inline-start: 0;
  left: calc(50% + 2ch + 15px);
  right: auto;
}

.report-input .previous-entry .unit {
  position: unset;
  font-size: 100%;
  margin: 0 1ch calc(2ex + 2px) 1ch !important;
}

.report-input .new-event-input .form-field-label label {
  font-size: min(3vw, 100%);
}

.full-screen {
  width: 98vw;
  margin-inline-start: -24vw;
}

.almost-full-screen {
  width: 80vw;
  margin-inline-start: -15vw;
}

.margin-bottom {
  margin-bottom: 12ex;
}

.spacer {
  flex-grow: 1;
}

table.dual-list {
  border: none;
  width: 100%;
  display: table;
  table-layout: fixed;
}

.dual-list th, .dual-list td {
  border: none;
}

.dual-list ul {
  list-style: none;
  width: 100%;
  max-width: 100%;
  border: 1px solid black;
  min-height: 100px;
  margin: 0;
  padding: 5%;
  box-sizing: border-box;
}

.dual-list ul ul {
  border: none;
  min-height: 1ch;
  padding-top: 0;
  padding-bottom: 0.5ex;
}

.dual-list ui li {
  user-select: none;
  max-width: 100%;
}

.dual-list ul li.dual-list-focused {
  background: #0CF;
}

.dual-list button {
  display: block;
  margin: auto;
}

.chevron {
  background-image: url('/static/images/chevron-up.svg');
  width: 14px;
  height: 14px;
}

.chevron-right {
  background-image: url('/static/images/chevron-up.svg');
  width: 14px;
  height: 14px;
  transform: rotate(90deg);
}

.chevron-left {
  background-image: url('/static/images/chevron-up.svg');
  width: 14px;
  height: 14px;
  transform: rotate(-90deg);
}

.log-in-logo {
  width: 60%;
  margin-inline-start: 20%;
  margin-top: 5%;
  margin-bottom: 0%;
}

.log-in-name {
  width: 60%;
  margin-inline-start: 20%;
  color: #bbb;
  font-size: 80%;
}

.log-in-input img {
  opacity: 0.25;
  position: absolute;
  height: 3ex;
  bottom: 1.25ex;
  margin-inline-start: 71.5%;
}

.log-in-input img.log-in-user {
  opacity: 0.18;
}

.log-in-input input {
  width: 60%;
  margin-inline-start: 20%;
  margin-bottom: 0vh;
  border: none;
  border-bottom: 1px solid #c8c8c8;
  font-size: 200%;
  outline: none;
}

.log-in-input #password:invalid {
  background-color: #f008;
}

.log-in-button input {
  margin-top: 7%;
  background-color: darkgreen;
  color: white;
  margin-inline-start: 27%;
  width: 46%;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 100%;
  padding: 4% 9%;
}

.report-input button {
  border: none;
  padding: 4% 9%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: min(3vw, 100%);
}

.report-input button:not([disabled]) {
  background-color: darkgreen;
  color: white;
  cursor: pointer;
}

li.field-list-item {
  position: relative;
  border: 1px solid #ddd;
  margin-top: 2ex;
}

div.field-list-remove {
  background-image: url('/static/images/trash.png');
  background-size: cover;
  width: 2ch;
  height: 2ch;
  position: absolute;
  top: 0;
  margin-inline-start: calc(100% + 1ch);
}

div.field-list-add {
  position: relative;
  width: 1.8ex;
  height: 1.8ex;
  margin-inline-start: calc(100% - 2ch - 2ex);
  background-color: #569ff7;
  border: calc(1ch + 0.1ex) solid #569ff7;
  border-radius: 2ex;
}

div.field-list-add:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  background-image: url('/static/images/plus.svg');
  filter: invert(100%);
}

.report-input .new-event-input .cost-info input[type=text]:not(.datetime-picker) {
  font-size: unset;
  width: 100%;
  margin-top: 2ex;
}

.long-price.report-input .new-event-input input:not(.datetime-picker) {
  width: 6ch;
}

button.discourage {
  color: rgba(16, 16, 16, 0.5);
}

.hidden {
    display: none !important;
}

.invisible {
    visibility: hidden;
}

.invalid {
    background-color: rgba(255, 0, 0, 0.25) !important;
}

.no-arrows {
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

.lang-select {
    border: none;
    box-shadow: none;
    appearance: auto;
    background: none;
    background-image: none;
    cursor: pointer;
}

.lang-select:focus {
    outline: none;
}

.clickable {
  cursor: pointer;
}

.opaque {
  opacity: 0.375;
}

a.not-a {
  text-decoration: none;
  color: unset;
}

.flex-break {
  flex-basis: 100%;
  height: 0;
}

.divider {
  width: 100%;
  height: 0;
  border: 1px solid #ddd;
  margin: 4vw 0;
}

#disabler {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: grey;
  opacity: 0.5;
  z-index: 99;
}

#loader {
  width: 48px;
  height: 48px;
  border: 5px solid #FFF;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  position: fixed;
  left: calc(50vw - 24px);
  top: calc(50vh - 24px);
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 1000px) {
    .main-body {
      max-width: 90vw;
    }

    .almost-full-screen, .full-screen {
      width: 90vw;
      margin-inline-start: 0;
    }

    .main-body > .margin-bottom {
      margin-bottom: 0;
    }

    forms * {
      font-size: 8vw;
    }

    div.field-extra-buttons {
      display: none;
    }

    .icon-title {
      font-size: 2.2vw;
    }

    .icon-text {
      font-size: 1vw;
    }

    .broiler-brief {
      width: 100%;
      height: 90vw;
      padding-top: 22%;
    }

    .broiler-house-cell {
      height: 43.5vw;
    }

    li.icon-container {
      width: 33.3%;
    }

    .icon-container .icon-field-title {
        font-size: 24vw;
        top: 2vw;
    }

    .modal {
      width: calc(100vw - 2px);
      left: 0;
      height: calc(var(--vh, 1vh) * 100 - 2px);
      max-height: calc(var(--vh, 1vh) * 100 - 2px);
      min-height: calc(var(--vh, 1vh) * 100 - 2px);
    }

    .modal-content {
      padding: 0 2ch;
    }

    form .form-row {
      flex-wrap: wrap;
      padding: 0;
    }

    form .sub-form .form-row {
      flex-wrap: nowrap;
    }

    form .form-cell {
      padding: 2.5ex 1ch;
    }

    form .form-cell.title-cell {
      margin-bottom: 0;
    }

    .view-header-buttons img {
      display: none;
    }

    .view-header-buttons img.mobile {
      display: block;
    }

    table.mobile-fields-table {
        display: table;
    }

    table.desktop-fields-table {
        display: none;
    }

    div.objects-table-container {
        overflow-x: auto;
    }

    table.objects-table {
        font-size: 75%;
        width: auto;
    }

    table.objects-table input, table.object-table select {
        font-size: 100%;
    }

    .key-only {
      font-size: 60%;
      color: #888;
    }

    .value-only {
      font-size: 80%;
    }
}