/* ================================ */
/* ========== ATTACHMENT ========== */
/* ================================ */

.grid-attachment-link {
	display: grid;
	grid-template-columns: 20px minmax(0, auto) 20px 1fr;
	grid-gap: 5px;
	grid-auto-rows: minmax(0, auto);
	margin: 20px 0;
}
.grid-attachment-link>div:nth-child(1) { color: var(--main-button-color); }

/* =========================== */
/* ========== FORMS ========== */
/* =========================== */

#add_symptom_btn, #add_action_btn { margin-top: 20px;}

.form-step-header {
	font-size: 1.1em;
	letter-spacing: 0.1em;
	color: #000;
	text-transform: uppercase;
	margin: 2em 0 1em 0;
}

.form-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-rows: minmax(0, auto);
}
.form-container > div {
	background: var(--main-background-box);
	border-radius: var(--main-border-radius-canvas-box);
}
.form-container:last-child { padding-bottom: 60px; }

/* Symptoms */
.grid-symptoms {
	width: 100%;
	display: grid;
	grid-template-columns: 8fr 2fr;
	grid-gap: 15px;
}
.grid-symptoms > div:nth-child(n+2) { padding-top: 18px; }
.symptom-priority-inner {
	text-align: center;
    min-height: 18px;
	margin-top: 8px;
}

/* Facts */
.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;
}

/* Causes */
/* List causes */
.grid-cause-list {
	display: grid;
	grid-template-columns: 20px 1fr 1fr 1fr;
	grid-template-rows: minmax(42px, auto);
	grid-column-gap: 20px;
	grid-template-areas:
		"ca-li-drag ca-li-text ca-li-liho ca-li-evid"
}
.cause-list-drag {
	grid-area: ca-li-drag;
	margin: auto;
	color: #aeaeae;
}
.cause-list-text {
	grid-area: ca-li-text;
}
.cause-list-likelihood {
	grid-area: ca-li-liho;
}
.cause-list-evidence {
	grid-area: ca-li-evid;
}
.create-likely-cause {
	color: var(--main-button-color) !important;
	padding-top: 10px;
}

.grid-causes {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
	grid-auto-rows: auto;		
}

.grid-cause-order {
	display: grid;
	grid-template-columns: minmax(400px, 1fr);
	grid-column-gap: 10px;
}

.grid-cause-add {
	display: grid;
	grid-column-gap: 20px;
	grid-template-columns: 1fr 1fr;
}
.grid-cause-add > div:nth-child(1) { padding-top: 7px; }

#add_cause_btn {
	margin-top: 20px;
}
#sortable {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
}
#sortable li {
	margin: 10px 10px 9px 0;
	float: left;
	width: 100%;
	background: #fff !important;
}

#sortable .ui-state-default { border: 0px solid #fff !important; }
.dragable { cursor: n-resize; }

.line-through { text-decoration: line-through; }
.true-cause { font-weight: 900; }


/* Actions */
.grid-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
	grid-auto-rows: auto;		
}

/* ================================= */
/* ========== FORM MODALS ========== */
/* ================================= */

/* Buttons grid modal form */
.grid-buttons-modal {
	display: grid;
	grid-template-columns: 1fr minmax(30px, auto) minmax(0, auto);
}
.grid-buttons-modal > div:nth-child(2) {
	display: grid;
	justify-items: center;
	align-items: center;	
}

/* Edit symptom modal form */
.grid-symptom-edit {
	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:
		"sy-lab1 sy-lab1"
		"sy-devi sy-func"
		"sy-clar sy-clar"
		"sy-expl sy-expl"
}
.symptom-label1 {
	grid-area: sy-lab1;
	text-transform: capitalize;
}
.symptom-deviation {
	grid-area: sy-devi;
}
.symptom-function {
	grid-area: sy-func;
}
.symptom-clarify {
	grid-area: sy-clar;
	border: 1px solid #ced4da;
    border-radius: .25rem;
	line-height: 1.5;
}
.symptom-explanation {
	grid-area: sy-expl;
	padding: 10px 20px;
}
.symptom-explanation::first-letter {
    text-transform: capitalize;
}
.deviation-term {
	font-weight: 500;
}
.deviation-definition {
	font-style: italic;
}

/* 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 */
}

/* Edit cause */
.grid-cause {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto);
	grid-gap: 20px;
	grid-template-areas:
		"ca-text ca-text"
		"ca-liho ca-liho"
		"ca-evid ca-evid"
		"ca-prov ca-disp"
}
.cause-text { grid-area: ca-text; }
.cause-liho { grid-area: ca-liho; }
.cause-evid { grid-area: ca-evid; }
.cause-proof {
	border-radius: 2px;
    border: 1px solid var(--main-button-color);
	color: #000;
	text-align: center;
	cursor: pointer;
	vertical-align: middle;
	line-height: 45px;
	width: 100%;
}
.cause-proven {
	grid-area: ca-prov;
	text-transform: uppercase;
}
.cause-disproven {
	grid-area: ca-disp;
	text-transform: uppercase;
}
.cause-selected {
	color: var(--main-button-color) !important;
	font-weight: 900;
}

/* Edit action modal form */
.grid-modal-action {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(24px, auto) minmax(24px, auto);
	grid-column-gap: 40px;
	grid-row-gap: 40px;
	grid-template-areas:
		"ma-cis ma-actions"
		"ma-effect ma-effect"
}
.ma-cis { grid-area: ma-cis; }
.ma-actions { grid-area: ma-actions; }
.ma-effect { grid-area: ma-effect; }