/* Default Form */
.body--form{
    width: 100%;
    font-size: .9rem;
    line-height: 1.1;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
}

.body--form .body--columns{display: grid;}
.body--form .body--columns.one-column{
	grid-template-columns: 1fr;
}
.body--form .body--columns.two-columns{
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 4rem;
}
.body--form .body--columns.three-columns{
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 3rem;
}

.body--form .form--row{
    width: calc(100% - 4rem);
    display: flex;
    margin-bottom: 1.2rem;
	position: relative;
}
.body--form .form--row:last-child{margin-bottom: 0;}
.body--form .body--columns .form--row:last-child{margin-bottom: .9rem;}

.body--form .form--row.title{
    color: #888;
    font-weight: 500;
    font-size: .9rem;
    margin: 2rem 0 1rem;
}

.body--form .form--row label{
    width: 20%;
    min-width: 20%;
    color: var(--color-lightblue-darkest);
    padding-top: .3rem;
}

.body--form .form--row input[type="text"], .body--form .form--row input[type="password"]{
    width: 80%;
	min-width: 20%;
	height: 1.5rem;
	font-weight: 300;
	padding: .3rem .4rem .1rem;
    border: none;
	border-bottom: .15rem solid transparent;
	background-color: var(--color-lightblue-lighter);
}
.body--form .form--row input[type="text"]::placeholder, .body--form .form--row input[type="password"]::placeholder{
    font-style: italic;
    opacity: .4;
}
.body--form .form--row input[type="text"]:disabled, .body--form .form--row input[type="password"]:disabled{
	color: #000;
	-webkit-text-fill-color: #000;
	opacity: 1;
	background-color: transparent;
	border-color: var(--color-lightblue-lightest);
	cursor: text;
}

.body--form .form--row select{
    width: 80%;
	height: 1.5rem;
	font-weight: 300;
    border: none;
	border-bottom: .15rem solid transparent;
	padding: .3rem 1.7rem .1rem .4rem;
	background: var(--color-lightblue-lighter) url('data:image/svg+xml, <svg fill="%234851E6" viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg"><path d="M 0 0 L 50 50 L 100 0 z"/></svg>') no-repeat calc(100% - .5rem) center;
	background-size: .7rem;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
.body--form .form--row select::-ms-expand{display: none;}

.body--form .form--row select:disabled{
	opacity: 1;
	color: #000;
	background: transparent url('data:image/svg+xml, <svg fill="%23ccc" viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg"><path d="M 0 0 L 50 50 L 100 0 z"/></svg>') no-repeat calc(100% - .5rem) center;
	background-size: .7rem;
	border-color: var(--color-lightblue-lightest);
	cursor: text;
}

.body--form .form--row .select--multiple-option .header{
	height: 1.5rem;
}

.body--form input[type="datetime-local"]{
	width: 80%;
	font-weight: 300;
	border: none;
	border-bottom: .15rem solid transparent;
	background-color: var(--color-lightblue-lighter);
	padding: .3rem .4rem .1rem;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	cursor: pointer;	
}

.body--form input[type="datetime-local"]:disabled{
	font-weight: 300;
	opacity: 1;
	color: #000;
	background: transparent;
	border-color: var(--color-lightblue-lightest);
	cursor: text;
}

.body--form .form--row textarea{
    width: 80%;
	border: none;
	border-bottom: .15rem solid transparent;
	color: #000;
	background-color: var(--color-lightblue-lighter);
	padding: .3rem .4rem .1rem;
	line-height: 1.3;
	overflow-y: hidden;
	opacity: 1;
}

.body--form .form--row textarea:disabled{
	background: transparent;
	border-color: var(--color-lightblue-lightest);
	cursor: text;
}

.body--form textarea.extended{
	width: 100%;
	min-height: 7rem;
	padding: .3rem;
	font-size: .8rem;
	line-height: 1.3;
	background-color: var(--color-lightblue-lighter);
	border: none;
    resize: none;
}

.body--form .form--row .add{
	width: 2rem;
	min-width: 2rem;
	height: 1.6rem;
	min-height: 1.6rem;
	background: url('../../images/icon--plus.svg') no-repeat center;
	background-size: 2rem;
	position: absolute;
	right: -2rem;
	top: 0;
}

.body--form .form--row .delete{
	width: 2rem;
	min-width: 2rem;
	height: 1.6rem;
	min-height: 1.6rem;
	background: url('../../images/icon--cross.svg') no-repeat center;
	background-size: 2rem;
	position: absolute;
	right: -4rem;
	top: 0;
}

/* Sub section */
.body--form .form--row.sub-section{
	margin-bottom: 1.2rem;
}

.body--form .form--row.sub-section .subtitle{
    color: var(--color-lightblue-darkest);
    font-weight: 500;
    width: 20%;
	margin-top: .3rem;
}

.body--form .form--row.sub-section .content{
    display: flex;
    flex-direction: column;
    width: 80%;
}

.body--form .form--row.sub-section .content--row{
    width: 100%;
    margin-top: .9rem;
	display: flex;
	align-items: flex-start;
	position: relative;
	padding-left: .4rem;
}
.body--form .form--row.sub-section .content--row:first-child{margin-top: 0;}

.body--form .form--row.sub-section .content--row input[type="text"] + label{
	margin-left: 1rem;
}

.body--form .form--row.sub-section .content--row label{width: auto;}
.body--form .form--row.sub-section .content--row input{width: 100%;}

.body--form .form--row.sub-section .content--row.warning{
    margin: 0;
	padding-left: calc(20% + .4rem);
	opacity: .5;
	margin-top: .2rem;
	font-size: .7rem;
}

/* Form estilo card */
.body--form .form--card{
	display: flex;
	justify-content: space-between;
	border: .1rem solid var(--color-lightblue-light);
	padding: 1rem 0;
	margin-bottom: 1rem;
	position: relative;
}
.body--form .form--card:last-child{margin-bottom: 0;}

.body--form .form--card .card--content{
	width: 100%;
}

.body--form .form--card .form--row label{
	width: calc(20% - 1rem);
	min-width: calc(20% - 1rem);
	margin-left: 1rem;
}

.body--form .form--card .card--delete{
	position: absolute;
	top: 0;
	right: 0;
	height: 2rem;
	width: 2rem;
	background: url(../../images/icon--cross.svg) no-repeat center;
	background-size: 2rem;
	opacity: .4;
	transition: opacity .1s ease-in-out;
}
.body--form .form--card .card--delete:hover{opacity: 1;}

/* Form card modo disabled */
.body--form .form--card.disabled .card--delete{
	display: none;
}