/* ------------------------------------ */
/* Modal                                */
/* ------------------------------------ */

#modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.4);
	display: none;
	z-index: 99;
}
#modal .modal-inner {
	background-color: #fff;
	min-width: 800px;
	width: fit-content;
	margin:	108px auto 0 auto;
}
#modal #title {
	height: 32px;
	line-height: 32px;
	font-weight: 600;
	text-align: center;
	color: #fff;
	background-color: var(--primary);
}
#modal #content {
	padding: 20px;
}
#modal .scroll {
	max-height: calc(100vh - 108px - 67px - 32px - 20px);
	overflow: auto;
}
#modal[data-action=EI] .modal-inner  {
	margin:	32px auto 0 auto;
}
#modal[data-action=EI] .scroll {
	max-height: calc(100vh - 32px - 67px - 32px - 32px);
	overflow: auto;
}
#modal #mail {
    border-top: solid 1px var(--primary);
	padding: 20px 20px;
    display: flex;
	background: var(--darkened-bg);
}
#modal #mail > div > div {
	display: flex;
	gap: 20px;
}
#modal #mail > div > div > span {
	max-width: 660px;
	display: inline-block;
}
#modal #actions {
    border-top: solid 1px var(--primary);
	padding: 20px 20px;
    display: flex;
}
#modal #actions button:nth-child(2) {
    margin-left: auto;
}

#modal form > div {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#modal form > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#modal #content input,
#modal #content select,
#modal #content textarea {
    margin-bottom: 0;
}
#modal #content input[type=text],
#modal #content input[type=date],
#modal #content input[type=number],
#modal #content select {
	width: fit-content;
	min-width: 120px;
}
#modal #content textarea {
    width: calc(100% - 14px) !important;
}
#modal form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#modal form > div {
    position: relative;
}
body.change-form #modal form label {
	width: auto;
	color: var(--body-fg);
	font-size: 14px;
	margin-bottom: -9px;
	font-weight: bold;
}
#modal .helptext {
    position: absolute;
    right: 0;
    top: calc(32px + 9px);
}
body.change-form #modal .helptext {
    top: 32px;
}

#modal form > div.errors input,
#modal form > div.errors select,
#modal form > div.errors textarea {
    border: 1px solid var(--error-fg);
}

/* ------------------------------------ */
/* Modal EI                             */
/* ------------------------------------ */

#modal .row {
	display: grid;
    grid-template-columns: 1fr 1fr;
}
#modal .col {
	display: flex;
	flex-direction: column;
}
#modal h2 {
	font-size: 14px;
	line-height: 14px;
	color: var(--primary);
	font-weight: 600;
	margin: 8px 0 -4px 0;
}

#modal .witness h2 {
	margin-bottom: 0px;
}

/* ------------------------------------ */
/* Inputs                               */
/* ------------------------------------ */

#modal .form [name=paid_amount],
#modal .form [name=amount_fees],
#modal .form [name=amount_costs],
#modal .form [name=payment_amount_FE] {
	width: 120px !important;
	min-width: 120px !important;
}

/* ------------------------------------ */
/* Units                                */
/* ------------------------------------ */

#modal .form .unit {
	position: absolute;
    top: 36px;
    left: 140px;
}
.change-form #modal .form .unit {
    top: 32px;
}

/* ------------------------------------ */
/* Checkbox                             */
/* ------------------------------------ */

#modal form > div label + input[type="checkbox"]  {
	position: absolute;
	top: 6px;
}
#modal form > div:has(input[type="checkbox"]) label {
	position: relative;
	left: 20px;
}

/* ------------------------------------ */
/* MultiCheckbox                        */
/* ------------------------------------ */

#modal fieldset {
	border: none;
}
#modal fieldset legend {
	margin-bottom: 2px;
}
#modal fieldset input[type="checkbox"] {
	position: relative;
	top: -3px;
}

/* ------------------------------------ */
/* Before / After                       */
/* ------------------------------------ */

#modal #content div.before {
	
}
#modal #content div.after {
	
}

#modal #content .spacer {
	display: block;
	height: 10px;
}

/* ------------------------------------ */
/* Mail                                 */
/* ------------------------------------ */

#modal #mail {
	position: relative;
	display: flex;
	flex-direction: column;
}
#modal #mail label {
	display: inline-block;
	width: 90px;
	font-size: 14px;
	font-weight: 600;
}

#modal [name=preview-mail] {
	position: absolute;
	right: 20px;
	top: 20px;
}

/* ------------------------------------ */
/* Specific                             */
/* ------------------------------------ */

#modal #content .amount-row {
	display: flex;
}
#modal #content .amount-row span:nth-child(1) {
	min-width: 140px;
}
#modal #content .amount-row span:nth-child(2) {
	font-weight: 600;
	width: 100px;
	text-align: right;
}
#modal #content .amount-row.total span:nth-child(2) {
	font-weight: 600;
}

#modal #uploads,
#modal #id_documents_defendant {
	display: grid;
    grid-template-columns: 1fr 1fr;
}

/* ------------------------------------ */
/* Errors                               */
/* ------------------------------------ */

#modal ul.errorlist {
	margin-top: -8px;
}
#modal .modal-row ul.errorlist {
	margin-top: 0px;
}

#modal #uploads ul.errorlist,
#modal #id_documents_defendant ul.errorlist {
	margin-top: 0px;
	grid-column: 1 / span 2;
}