/* Main Page Blocker for pop ups */
.main-page--blocker{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #000;
	opacity: .4;
	z-index: 100;
}


/* Base Pop up */
.pop-up--position{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 150;
}

.pop-up{
	position: relative;
	background-color: #fff;
	padding: 3.5rem 5rem;
	border-radius: .8rem;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
	display: flex;
	flex-direction: column;
	align-items: center;
	max-height: 85vh;
	max-width: 85vw;
	overflow-x: auto;
}

.pop-up--close{
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2rem;
	height: 2rem;
	background: url(../images/icon--cross.svg) no-repeat center;
	background-size: 2rem;
}

.pop-up .pop-up--header{
	margin-bottom: 2.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: 'Roboto Mono', Roboto, sans-serif;
}

.pop-up .pop-up--header .header--icon{
	width: 4.2rem;
	height: 4.2rem;
	background-size: 5rem;
	background-repeat: no-repeat;
	background-position: center;
	margin-bottom: 1rem;
}
.pop-up.pop-up--warning .pop-up--header .header--icon{background-image: url(../images/icon--triangle-exclamation--red.svg);}

.pop-up .pop-up--header .header--title{
	font-size: 1.1rem;
	text-align: center;
	font-weight: 500;
}

.pop-up .pop-up--body{
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	max-height: 80vh;
	overflow-y: auto;
}

.pop-up .pop-up--body .body--row{
	line-height: 1.2rem;
	margin-bottom: 1.5rem;
}

.pop-up .pop-up--body .body--row.align-center{
	display: flex;
	align-items: center;
}

/* Estilo predeterminado Button */
.pop-up .pop-up--body button{
	font-family: Roboto, sans-serif;
	font-size: .8rem;
	background-color: var(--color-lightblue);
	padding: .4rem 1.4rem .3rem;
	border-radius: 1rem;
	transition: background .1s ease-in-out;
}
.pop-up .pop-up--body button:hover{background-color: var(--color-lightblue-dark);}

.pop-up .pop-up--body .file-name{
	text-align: center;
	margin-top: .3rem;
	font-size: .8rem;
	color: var(--color-lightblue);
}

/* Estilo predeterminado Select */
.pop-up .pop-up--body .body--row.select{
    border-bottom: .15rem solid var(--color-lightblue-lighter);
	min-width: 22rem;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-self: flex-start;
	align-items: center;
	font-size: .8rem;
}

.pop-up .pop-up--body .body--row.select label{
	font-size: .8rem;
	color: var(--color-lightblue-darkest);
	margin-right: 1rem;
}

.pop-up .pop-up--body .body--row select{
	font-weight: 300;
	text-align: right;
	padding-right: 1.3rem;
	min-width: 8rem;
    border: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background: 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% - .2rem) center;
	background-size: .6rem;
	cursor: pointer;
}
.pop-up .pop-up--body .body--row select::-ms-expand{display: none;}

/* Estilo base Tabla */
.pop-up .pop-up--body .body--table table{
	font-size: .8rem;
    table-layout: fixed;
    line-height: 1.2;
}

.pop-up .pop-up--body .body--table table th{
	border-bottom: 0.05rem solid var(--color-lightblue-darkest);
}

.pop-up .pop-up--body .body--table table tbody tr:hover{
    background-color: var(--color-lightblue-lighter);
    transition: background-color .1s ease-in;
    cursor: pointer;
}

.pop-up .pop-up--body .body--table table tr:last-child td{
	border-bottom: none;
}

.pop-up .pop-up--body .body--table table td{
    padding: .8rem 1rem;
    text-align: left;
    border-bottom: .05rem solid var(--color-lightblue-light);
    border-right: .05rem solid var(--color-lightblue-light);
}
.pop-up .pop-up--body .body--table table td:last-child{
	border-right: none;
}

.pop-up .pop-up--body .body--table table tr.selected td{
	background-color: var(--color-lightblue-light);
}

/* Estilo predeterminado Select con selección múltiple */
.pop-up .pop-up--body .select--multiple-option{
	min-width: 12rem;
	text-align: right;
}

.pop-up .pop-up--body .select--multiple-option .header{
	background-color: transparent;
	border: none;
	padding-right: 1.3rem;
	background: 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% - .2rem) center;
	background-size: .6rem;
}

/* Estilo base listado con scroll */
.pop-up .pop-up--body .list-scroll{
	background-color: var(--color-lightblue-lighter);
	padding: 1.5rem;
	border-radius: .5rem;
	border: .1rem solid var(--color-lightblue-light);
	overflow-y: auto;
}

/* Mensaje */
.pop-up .pop-up--body .message{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	line-height: 1.3;
}

.pop-up .pop-up--body .message .message--bold{
	color: var(--color-lightblue-darkest);
	font-weight: 500;
}

.pop-up .pop-up--body .message .box{
	background-color: var(--color-lightblue-lighter);
	padding: .3rem .8rem;
	border-radius: .3rem;
	font-size: .8rem;
	display: flex;
	align-items: center;
	max-width: 22rem;
}
.pop-up .pop-up--body .message.warning .box{background-color: #ffd3c9;}

.pop-up .pop-up--body .message .icon{
	width: 1.5rem;
	min-width: 1.5rem;
	height: 1.5rem;
	background: url(../images/icon--triangle-exclamation--red.svg) no-repeat center;
	background-size: 2rem;
	margin-right: .5rem;
}

/* Etiqueta mini de imagen */
.pop-up .pop-up--body .tag{
	display: flex;
	align-items: center;
	font-size: .7rem;
	color: #333;
	margin-bottom: .4rem;
	margin-right: .8rem;
	cursor: pointer;
}

.pop-up .pop-up--body .tag input[type="checkbox"]{
	display: grid;
	place-content: center;
	background-color: #fff;
	height: .8rem;
	min-height: .8rem;
	width: .8rem;
	min-width: .8rem;
	border: 1px solid var(--color-lightblue-light);
	border-radius: .1rem;
	margin-right: .3rem;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.pop-up .pop-up--body .tag input[type="checkbox"]::before{
	content: '';
	opacity: 0;
	width: .8rem;
	min-width: .8rem;
	height: .8rem;
	min-height: .8rem;
	border-radius: .1rem;
	background: var(--color-lightblue-darkest) url('data:image/svg+xml, <svg stroke="%23fff" stroke-width="5px" fill="transparent" viewBox="0 0 31 23" xmlns="http://www.w3.org/2000/svg"><path d="M 1 10 L 10 20 L 28 1 "/></svg>') no-repeat center;
	background-size: .6rem;
}

.pop-up .pop-up--body .tag input[type="checkbox"]:checked::before{
	opacity: 1;
	transition: opacity .2s ease-in-out;
}

.pop-up .pop-up--body .tag .name{
	display: block;
	border-bottom: .2rem solid;
	border-color: var(--color-lightblue);
	line-height: 14px;
}
.pop-up .pop-up--body .tag.care-center .name{border-color: var(--color-lightblue-darkest);}
.pop-up .pop-up--body .tag.project .name{border-color: var(--color-lightblue);}
.pop-up .pop-up--body .tag.user .name{border-color: var(--color-lightblue-light);}
.pop-up .pop-up--body .tag.focus-groups .name{border-color: var(--color-lightblue-lighter);}
.pop-up .pop-up--body .tag.pre .name{border-color: var(--color-orange-light);}
.pop-up .pop-up--body .tag.post .name{border-color: var(--color-orange-light);}

/* Footer */
.pop-up .pop-up--footer{
	display: flex;
	align-items: center;
	margin-top: 1.5rem;
}

.pop-up .pop-up--footer button{
	font-size: .8rem;
    background-color: #fff;
    border-radius: 1rem;
    padding: .4rem 1.4rem .3rem;
	margin-right: 1rem;
	transition: background .1s ease-in-out, color .1s ease-in-out;
}

.pop-up .pop-up--footer button:last-child{margin-right: 0;}
.pop-up .pop-up--footer button:hover{background-color: var(--color-lightblue-light);}
.pop-up .pop-up--footer button:disabled{cursor: text;}

.pop-up .pop-up--footer .confirm{background-color: var(--color-lightblue);}
.pop-up .pop-up--footer .confirm:hover{background-color: var(--color-lightblue);}
.pop-up .pop-up--footer .confirm:disabled{background-color: #ddd;}

.pop-up.pop-up--warning .pop-up--footer .confirm{background-color: var(--color-orange-light);}
.pop-up.pop-up--warning .pop-up--footer .confirm:hover{background-color: var(--color-orange);}