/*
* Colores
* Azul: #02d7ab;
*/
@font-face {
	font-family: RobotoBold;
	src: url('../fonts/Roboto/RobotoCondensed-Bold.ttf');
}

@font-face {
	font-family: RobotoRegular;
	src: url('../fonts/Roboto/RobotoCondensed-Regular.ttf');
}

@font-face {
	font-family: RobotoLight;
	src: url('../fonts/Roboto/RobotoCondensed-Light.ttf');
}

/* ----------------- */

html {
	width: 480px;
	height: 35rem;
	margin: 0px;
}

body {
	font-family: 'RobotoRegular', sans-serif;

}
.app-container {
	position: relative;
	height: 600px;
	padding: 0;
	background-color: #181a20;
	overflow: scroll;
	color: #fbfbfb;
}

/*
	Cabecera
*/
.navbar {
	display: grid;
    grid-template-rows: 38px;
    grid-template-columns: 50px 1fr 60px;
    
	border-bottom: 1px solid #999;
}

.navbar.disabled::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 60px;
	background: #333333;
	opacity: 0.55;
}

.navbar-toggler,
.navbar-toggler:focus {
	border: none;
	box-shadow: none;
}

.navbar-dark .navbar-toggler {
	grid-column: 1 / 2;
	padding-bottom: 0;
}

.navbar-dark .navbar-toggler-icon {
	color: #02d7ab;
	background-image: none;
}

.navbar-dark .navbar-toggler-icon .fas {
	vertical-align: sub;
}

.navbar-dark > a {
	justify-self: center;
    grid-column: 2 / 3;
}

.navbar-collapse {
	position: fixed;
	top: 60px;
	width: 480px;
	height: calc(600px - 60px);
	display: block;
	visibility: hidden;
	opacity: 0;
	z-index: -1;
	background: #222;	
	transition: all 0.25s ease-in-out;
}

.navbar-collapse.show {
	visibility: visible;
	opacity: 1;
	z-index: 9;
}

.navbar-nav {
	padding: 1rem;
}

.navbar-nav .nav-link {
	padding-left: 1rem;
	cursor: pointer;
}

.nav-item {
	font-size: 1.25rem;
}

.nav-item:hover {
	background: #02d7ab;
}

.exit-item a {
	background-color: rgba(255, 0, 0, 0.35);
}

.nav-item .fas {
	margin-right: 0.3rem;
}

.navbar-brand {
	margin-right: 0;
}

.user-menu {
	grid-column: 3 / 4;
	display: inline-block;
	padding: 0.3rem 0.9rem 0.3rem 0;
	font-size: 1.2rem;
	color: #fbfbfb;
	text-transform: uppercase;
	font-family: 'RobotoBold', sans-serif;
}

.user-menu .notifications {
	margin-right: 10px;
	color: orange;
}

/* Contenido */
.main {
	position: relative;
	padding: 1rem 0.9rem;
}

.screen-title {
	font-family: 'RobotoRegular', sans-serif;
	font-size: 30px;
	font-weight: bold;
	color: #fbfbfb;
	text-align: left;
}

/* Claims y permisos */
.claims-list , .permissions-list {
	margin-top: 1.2rem;
	list-style: none;
	padding-left: 0;
}

.claims-list li , .permissions-list li {
	position: relative;
	margin-bottom: 1rem;
	padding: 0.6rem;
	background-color: #444;
	border-bottom: 1px solid #444;
	transition: all 0.2s ease-in-out;
	cursor: pointer;
}

.claims-list li.no-clickable , .permissions-list li.no-clickable {
	background-color: #b2c0ed;
	cursor: default;
}

.claims-list .nuevo::before {
	position: absolute;
	top: 0;
	right: 0;
	padding: 2px 5px;
	content: 'NUEVO';
	font-size: 12px;
	background-color: #d6A61c;
}


ul#claims_list.claims-list li {
	background-color: #20232c;
}

ul#claims_list.claims-list li.invalid {
	color: #F00;
}

ul#permissions-list.permissions-list li {
	background-color: #20232c;
}

.claims-list li:last-child , .permissions-list li:last-child {
	margin-bottom: 0;
	border-bottom: none;
}

.claims-list li a , .permissions-list li a{
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: flex-end;
	color: #fbfbfb;
	text-decoration: none;
}

.claims-list li:hover , .permissions-list li:hover {
	background-color: #02d7ab;
}

.claims-list li.no-clickable:hover , .permissions-list li.no-clickable:hover {
	background-color: #20232c;
}

.claims-list li.li-form {
	cursor: initial;
	background: transparent;
    padding-right: 0;
}

.claims-list li.li-form form {
    display: grid;
    grid-template-columns: 3fr 1fr;
    padding: 0;
    background: transparent;
}

.claims-list li.li-form form .form-group {
	display: flex;
    align-items: center;
    margin-bottom: 0;    
}

.claims-list li.li-form form .form-group .label-form {
	display: inline-block;
    margin-right: 5px;
    margin-bottom: 0;
}

.claims-list li.li-form form .form-group input {
	width: 120px;
	height: 100%;
    border: none;
}

.claims-list li.li-form form button {
    margin-top: 0;
    padding: 5px;
}

.claim-label {
	font-family: 'RobotoRegular', sans-serif;
	font-size: 15px;
	color: #02d7ab;
}

ul#claims_list.claims-list li.invalid .claim-label {
	color: #F00;
}

#providers_list .claim-label {
	color: #FFF;
}

.permission-type {
	color: #f7f7f7;
}

.claim-cert , .permission-organization {
	grid-row: 1 / 3;
	grid-column: 2 / 3;
	justify-self: end;
	font-size: 0.8rem;
	color: #d9d9d9;
	
}

.claims-list .claim-cert img {
	max-width: 100px;
	height: 50px;
}

.permission-info-pair .claim-cert {
	float: right;
}

.claim-value {
	grid-column: 1 / 2;
	grid-row: 2/ 3;
	font-family: 'RobotoRegular', sans-serif;
	font-size: 21px;
	font-weight: bold;
	line-height: 1.57;
}

.float-btn {
	position: fixed;
	bottom: calc(100% - 35rem);
	right: calc(50vw - 220px);
	padding: 10px 17px;
	font-size: 1.5rem;
	color: #fbfbfb;
	background: #02d7ab;
	border-radius: 50%;
	box-shadow: 4px 4px 24px rgba(0,0,0,0.3);
	transition: all 0.2s ease-in-out;
}

.float-btn:hover {
	color: #fbfbfb;
	transform: scale(1.2);
}

/* Claim info */
.back-link {
	display: inline-block;
	padding: 10px 0;
	text-decoration: none;
	color: #ddd;
	transition: all 0.2s ease-in-out;
	cursor: pointer;
	float: left;
}

.back-link:hover {
	background-color: #02d7ab;
}

.claim-title {
	margin-bottom: 1.2rem;
	text-align: left;
}

.claim-title .label {
	display: block;
	margin-bottom: 5px;
	font-family: 'RobotoLight', sans-serif;
}

.claim-info .claim-title , .permission-info .permission-title {
	margin-bottom: 1.2rem;
	text-align: left;
	display: grid;
	grid-template-columns: 70% 30%;
	font-family: 'RobotoRegular', sans-serif;
	font-weight: bold;
	font-size: 30px;
}

.claim-title__value , .permission-title_organization {
	grid-column: 1 / 3;
	grid-row: 2 / 3;
	font-family: 'RobotoRegular', sans-serif;
	font-weight: bold;
	font-size: 30px;
}

.claim-title__cert {
	grid-column: 2 / 3;
	grid-row-start: 1;
	grid-row-end: 3;
	justify-self: end;
	font-size: 1rem;
	font-size: 1rem;
	color: #fbfbfb;
}

.claim-title__cert img {
	max-width: 150px;
	max-height: 100px;
}

.claim-info-group , .permission-info-group {
	margin-bottom: 0.9rem;
	padding: 0.8rem;
	background: #20232c;
}

.permission-info-group {
	background-color: #20232c;
}

.claim-info-group h2 , .permission-title h2 {
	padding-bottom: 0.5rem;
	font-family: 'RobotoBold';
	font-size: 1.2rem;
	color: #FFF;
	text-transform: uppercase;
	border-bottom: 1px solid #FFF;
}

.claim-info-pair , .permission-info-pair {
	padding: 0.6rem 0;
	color: #fbfbfb;
}

.claim-info-pair a , .claim-info-pair div.claim-info--value.clickable , .permission-info-pair a , .permission-info-pair div.permission-info--value.clickable {
	cursor: pointer;
}

.claim-info-pair div.claim-info--value.expandable span , .permission-info-pair div.permission-info--value.expandable span {
	margin-right: 5px;
}

.claim-info-pair div.claim-info--value.expandable::after , .permission-info-pair div.permission-info--value.expandable::after {
	content: url(../../icons/expand-icon.png);
} 

.claim-info-pair div.claim-info--value.expandable.expanded::after , .permission-info-pair div.permission-info--value.expandable.expanded::after {
	content: url(../../icons/expanded-icon.png);
}

.claim-info-pair div.claim-info--value.value-detail , .permission-info-pair div.permission-info--value.value-detail {
	font-size: 12px;
	display: none;
}

.claim-info--label {
	font-family: 'RobotoRegular', sans-serif;
	line-height: 1.1;
	color: #02d7ab;
	font-size: 15px;
}

.permission-info--label{
	color: #02d7ab;
}

.claim-info--value , .permission-info--value {
	font-family: 'RobotoRegular', sans-serif;
	font-size: 21px;
	font-weight: bold;
	line-height: 1.57;
}

#permission_detail > h2:hover {
	cursor: pointer;
}

#permission_detail_text {
    max-height: 250px;
    overflow-y: scroll;
    padding: 10px;
    border: 1px solid #fdfbfb26;
    opacity: 0.7;
}


/* New Claim */
.add-claim-form {
	position: relative;
	padding: 1rem;
	color: #fbfbfb;
	background-color: #444;
}

.form-group-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1rem;
	grid-column-gap: 5px;
}

/* Capa para el listado de valores */
.modal-window {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: calc(100% - calc(1rem + 5px));
	padding: 1.5rem 1rem;
	background: #fbfbfb;
	border: 1px solid #aaa;
	z-index: 10;
}

.modal-window .close-btn {
	position: absolute;
	top: 1rem;
	right: 1rem;
	color: #666;
}

.modal-window select.form-control {
	border: 1px solid #ccc;
}

.select-btn {
	display: inline-block;
	margin-top: 1rem;
}

.form-group {
	margin-bottom: 1rem;
}

.form-group-grid label {
	grid-row: 1 / 2;
}

.form-group-grid label + * {
	grid-row: 2 / 3;
}

.form-group-grid .edit-field {
	grid-row: 2 / 3;

	padding: 0;
	color: #02d7ab;
	border: none;
	background-color: transparent;
}

.form-group-grid .edit-field:hover {
	cursor: pointer;
}

.form-group-grid .edit-field.remove-field {
	color: #fc7049
}

.form-group-grid .edit-field i {
	height: 100%;
}

.form-group-grid .invalid-feedback {
	grid-row: 3 / 4;
	display: block;
	margin: 0;
	padding-top: 5px;
	color: #fd6f4d;
	font-size: 0.8rem;
}

/* Elementos formulario */
.form-label {
	margin-bottom: 0.2rem;
	font-family: 'RobotoLight', sans-serif;
	text-transform: uppercase;
	color: #FFF;
}

.form-group input, 
.form-group textarea {
	padding: 5px;
	font-size: 0.8rem;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #c9cccf;
}

.form-control {
	border: none;
	border-radius: 0;
}

.form-group input[type="checkbox"]{
	-webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
}

.form-group input:required:focus:invalid {
	border: 1px solid red;
}

textarea {
	display: block;
	width: 100%;
}

select.form-control {
	font-size: 0.9rem;
	border: none;
	border-radius: 0
}

.form-check-label {
	font-size: 0.9rem;
	color: #fbfbfb;
	vertical-align: top;
}

.primary-btn {
	margin-top: 1.5rem;
	padding: 10px 17px;
	font-family: 'RobotoBold', sans-serif;
	color: #fbfbfb;
	text-transform: uppercase;
	background: #02d7ab;
	border: none;
	text-decoration: none;

	transition: all 0.2s ease-in-out;
}

.primary-btn:hover {
	cursor: pointer;
	color: #fbfbfb;
	background-color: #02d7ab;
}

.cancel-btn {
	color: #02d7ab;
	background-color: transparent;
}

.delete-btn {
	color: #fbfbfb;
	background-color: #fd6f4d;
}

.delete-link , .export-link , .verify-link , .back-link {
	margin-top: 5px;
	padding: 3px;
	background: transparent;
    margin-right: 5px;
    border: 1px #FFF solid;
    border-radius: 5px;
}

.delete-link img , .export-link img , .verify-link img , .back-link img {
	width: 24px;
}

.export-link i {
	margin-right: 8px;
}

.verify-link i {
	margin-right: 8px;
}

.delete-btn:hover {
	background-color: #c8593f;
}

.cancel-btn:hover {
	color: #02d7ab;
	background-color: transparent;
}

.was-validated .form-control:valid {
	background-image: none;
}

.was-validated .form-check-input:valid~.form-check-label {
	color: #fbfbfb;
}

/* Elementos formulario -> imágenes */
.needs-validation .activate_camera,
.needs-validation .take_picture,
.needs-validation .clear_picture{
	display: block;
	margin-top: 10px;
	width: 50px;
	height: 50px;
	background-image: url(/assets/img/webcam-redonda.svg);
  background-size: contain;
  background-position: center;
  transition: all 0.2s ease-in-out;
}
.needs-validation .activate_camera span,
.needs-validation .take_picture span,
.needs-validation .clear_picture span{
	display: none;
}
.needs-validation .activate_camera:hover,
.needs-validation .take_picture:hover,
.needs-validation .clear_picture:hover{
	cursor: pointer;
	background-image: url(/assets/img/webcam-redonda-hover.svg);
}
.needs-validation .take_picture{
	background-image: url(/assets/img/camara-fotografica.svg);
}
.needs-validation .take_picture:hover{
	background-image: url(/assets/img/camara-fotografica-hover.svg);
}
.needs-validation .clear_picture{
	background-image: url(/assets/img/papelera.svg);
}
.needs-validation .clear_picture:hover{
	background-image: url(/assets/img/papelera-hover.svg);
}
.needs-validation video,.needs-validation img{
	width: 100%;
	height: auto;
}
.needs-validation #field_nif_capture{
	padding-left: 0;
}
.needs-validation #div_nif_capture video,
.needs-validation #div_nif_capture img{
	margin-top: 10px;
}

/* Alerta */
div.main#block {
	background: #333333;
	opacity: 0.55;
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100%;
    width: 100%;
	text-align: center;
}

div.main#block div {
	margin: 5rem 1rem;
}

/* Ventana de procesando ... */
div.main#block.processing {
    display: block;
    opacity: 0.95;
    padding-top: 60px;
}

.processing .spinner-border {
    color: #02d7ab;
}

.processing h2 {
    margin-top: -2rem;
    margin-bottom: 20px;
	font-family: 'RobotoBold';
}

.processing p {
    font-family: 'RobotoLight';
    color: #e2e2e2;
}

div.main#alertas {
	display: none;
	position: fixed;
	padding: 1rem 0.9rem;
	top: 0px;
	left: 0px;
	height: 100%;
    width: 100%;
}

.notification {
	margin: 5rem 1rem;
	padding: 1.5rem 1rem;
	background: #222;
	box-shadow: 4px 4px 24px rgba(0,0,0,0.2);
	border: 1px #FFF solid;
	border-radius: 5px;
}

.notification-title {
	font-family: 'RobotoBold', sans-serif;
	font-size: 1.5rem;
}

.buttons-wrapper {
	display: flex;
	justify-content: right;
}

.buttons-wrapper a {
	margin-right: 5px;
}

.buttons-wrapper a:last-child {
	margin-right: 0px;
}

.agnia-selector {
    width: 330px !important; 
    color: white;
    background-color: #20232c !important; 
}

.agnia-selector h4 {
    padding-bottom: 10px;
    padding-left: 40px;
    border-bottom: 1px solid #666;
    opacity: 0.5;
}

.agnia-selector dl {
    padding-left: 10px;
}

.agnia-selector dd {
    padding-top: 10px;
}

.agnia-selector dd:hover {
    cursor: pointer;
}

p#linkLoad:hover {
	cursor: pointer;
}

.import_wallet {
	display: none;
}