.grid-facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(18px, auto) minmax(42px, auto) minmax(42px, auto) minmax(42px, auto) minmax(42px, auto);
	grid-gap: 15px;
}

.grid-facts > div:nth-child(1), .grid-facts > div:nth-child(2) {
	text-align: center;
	letter-spacing: 0.1em;
}

.flatpickr-input {
    border: none;
    outline: none;
}

/* =========================== */
/* ========== MODAL ========== */
/* =========================== */

/* insert what ok modal form */
.grid-what-ok-insert {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(4, minmax(24px, auto));
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	grid-template-areas:
		"wo-fiel wo-fiel"
		"wo-lab1 wo-lab1"
		"wo-devi wo-func"
		"wo-clar wo-clar"
}
.what-ok-field {
	grid-area: wo-fiel;
}
.what-ok-label1 {
	grid-area: wo-lab1;
}
.what-ok-deviation {
	grid-area: wo-devi;
}
.what-ok-function {
	grid-area: wo-func;
}
.what-ok-label2 {
	grid-area: wo-lab2;
}
.what-ok-clarify {
	grid-area: wo-clar;
	border: 1px solid #ced4da;
    border-radius: .25rem;
	line-height: 1.5;
}

.delete-fact, .add-fact {
	margin-left: 10px;
	color: var(--main-button-color) !important;
}

/* Edit symptom modal form */
.grid-facts-modal {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(24px, auto) minmax(42px, auto);
	grid-column-gap: 40px;
	grid-row-gap: 5px;
	grid-template-areas:
		"fact1-explain fact2-explain"
		"fact1-content fact2-content"
}
.fact1-explain {
	grid-area: fact1-explain;
	font-weight: 300;
}
.fact2-explain {
	grid-area: fact2-explain;
	font-weight: 300;
}
.fact1-content {
	grid-area: fact1-content;
	margin-top: 20px;
}
.fact2-content {
	grid-area: fact2-content;
	margin-top: 20px;
}

/* Edit fact where */
.grid-facts-where-modal {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: minmax(24px, auto);
	grid-gap: .5em;
}
.grid-facts-where-modal > div {
	border-radius: .25rem;
	text-align: center;
	cursor: pointer;
	padding-top: 2px;
}
.add-fact-where {
	border: 1px solid var(--main-button-color);
	color: var(--main-button-color);
}
.remove-fact-where {
	border: 1px solid var(--main-button-color);
	background: var(--main-button-color);
	color: #fff;
}
.no-comparable-system {
	margin-top: 0.5em;
    border-radius: 0.25rem;
    text-align: center;
    cursor: pointer;
    padding: 2px 5px 0 5px;
	height: 24px;
}

/* Edit fact when */
.input-date-field {
	border: 0px solid #fff !important;
	cursor: pointer;
}
.input-date-field::placeholder {
  color: var(--main-button-color) !important;
  opacity: 1; /* Firefox */
}