/* GENERAL CLASSES */

.hidden {
	display: none;
}

.inline-block {
	display: inline-block;
}

.flex {
	display: flex;
	flex-direction: row; /* change this to row instead of 'column' */
	flex-wrap:wrap; /* added flex-wrap */
}

.flex-child {
	width: 45%;
}

.flex-child2 {
	width: 50%;
}

.center-container {
	margin-left: auto;
	margin-right: auto;
}

.center-text {
	text-align: center;
}

.bttn-lists {
	margin-left: 2%;
	margin-top: 2%;
}

.details-bttn-lists {
	margin-right: 2%;
	margin-top: 1%;
}

/* FLASH MESSAGES */

.invalidField {
	color:#f32853;
	margin: 0;
}

.infoField {
	color: #220b0b;
	margin: 0;
}

.successField {
	color:green;
	margin: 0;
}

/* MARGIN */

.elem-ml-2 {
	margin-left: 2%;
}

.elem-mr-5 {
	margin-right: 5%;
}

.elem-mb-1 {
	margin-bottom: 1rem;
}

.elem-mb-2-5 {
	margin-bottom: 2.5rem;
}

.elem-mb-2 {
	margin-bottom: 2%;
}

.elem-mb-3 {
	margin-bottom: 3%;
}

.elem-mb-5 {
	margin-bottom: 5%;
}

.elem-mt-1 {
	margin-top: 1rem;
}

.elem-mt-2-5 {
	margin-top: 2.5rem;
}

.elem-mt-2 {
	margin-top: 2%;
}

.elem-mt-3-5 {
	margin-top: 3.5rem;
}

.elem-mt-7-5 {
	margin-top: 7.5%;
}

.elem-mt-10 {
	margin-top: 10%;
}

.elem-pl-1 {
	padding-left: 1rem;
}

/* GLOBAL */

img {
	max-width: 100%;
	max-height: 100%;
}

select {
	cursor: pointer;
}

/* TIPPY */

.tippy-form {
	margin-bottom: 0;
}

.tippy-content {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.tippy-question, .tippy-label {
	color: #fff;
}

.div-tippy-label {
	text-align: left;
}

.tippy-label {
	display: block;
	margin-bottom: 0.5rem;
	margin-top: 0.5rem;
	font-size: 14px;
	font-stretch: 100%;
	font-weight: 400;
}

.tippy-buttons {
	margin-top: 2rem;
}

.tippy-submit-button {
	height: 40px;
	width: auto;
}

.tippy-left {
	margin-right: 1rem;
}


/* PLANIFICATION */

div#create-task-container form#formCreateTask div#div-tab,
div#planificate-container form#formPlanificate div#div-tab {
	overflow: hidden;
	background-color: #ffffff;
}

div#create-task-container form#formCreateTask div#div-tab button.tabs,
div#planificate-container form#formPlanificate div#div-tab button.tabs {
	background-color: #000000;
	width: 49.5%;
	color: black;
}

div#create-task-container form#formCreateTask div#div-tab nav,
div#planificate-container form#formPlanificate div#div-tab nav {
	border-radius: 4px;
	color: #ffffff !important;
	border: 0;
	cursor: pointer;
	display: inline-block;
	font-weight: 700;
	height: 3.15em;
	line-height: 3.25em;
	padding: 0 2.2em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Change background color of buttons on hover */
div#create-task-container form#formCreateTask div#div-tab button.inactive:hover,
div#planificate-container form#formPlanificate div#div-tab button.inactive:hover {
	background-color: #f3285488;
}

/* Change background color of buttons on hover */
div#create-task-container form#formCreateTask div#div-tab button.active,
div#planificate-container form#formPlanificate div#div-tab button.active {
	background-color: #f32854;
}

.planification-bottom-margins {
	margin-bottom: 5%;
}

/* TOP NAV */

.topnav {
	display: flex;
	height: 55px;
	min-height: 55px;
	max-height: 55px;
	background-color: #333; /*#f32853*/
	justify-content: space-between;
	align-items: center; /* align vertical */
}

div#breadcrumb {
	margin-left: 1%;
}

div#login{
	margin-right: 2%;
}

.topnav img#go-back {
	cursor: pointer;
	width: 35px;
	height: 35px;
	margin-left: 20px;
}

.topnav a {
	max-height: 55px;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}

.topnav a:hover {
	background-color: #f32853; /*#333*/
	color: black;
	cursor: pointer;
}

/* The dropdown container */
div#user-dropdown {
	margin-left: auto;
	float: left;
	overflow: hidden;
	margin-right: 2%;
}

.topnav div#user-dropdown img#user-dropdown-img {
	width: 40px;
	height: 40px;
	vertical-align: middle;

}

/* Dropdown content (hidden by default) */
div#user-dropdown div#user-dropdown-content {
	display: none;
	position: absolute;
	top: 48px;
	right: 0px;
	background-color: #f9f9f9;
	min-width: 100px;
	width: 200px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

/* Show the dropdown menu on hover */
div#user-dropdown:hover div#user-dropdown-content {
	display: block;
}

  /* Links inside the dropdown */
div#user-dropdown-content a {
	float: none;
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

  /* Add a grey background color to dropdown links on hover */
div#user-dropdown-content a:hover {
	background-color: #ddd;
}



/* FOOTER */

#img-AVI {
	cursor: pointer;
    width: 300px;
    max-width: 30%;
	padding-top: 1px;
	padding-bottom: 1px;
}

#img-GUAITA {
	margin-left: 3%;
	margin-right: 2%;
	margin-top: 1%;
	cursor: pointer;
    width: 175px;
    max-width: 17.5%;
}

#img-VRAIN {
	cursor: pointer;
    width: 180px;
    max-width: 18%;
}

#img-UPV {
	cursor: pointer;
    width: 150px;
    max-width: 15%;
    margin-right: 2%;
}

/*
@media screen and (max-width: 1300px) {

	#img-AVI {
		width: auto;
		max-width: 20%;
	}

	#img-GUAITA {
		margin-top: 1%;
		max-width: 10%;
	}

	#img-VRAIN {
		width: auto;
		max-width: 15%;
	}

	#img-UPV {
		width: auto;
		max-width: 10%;
		margin-right: 2%
	}

}

@media screen and (max-width: 1150px) {

	#img-AVI {
		width: auto;
		max-width: 20%;
	}

	#img-GUAITA {
		margin-top: 1%;
		max-width: 20%;
	}

	#img-VRAIN {
		width: auto;
		max-width: 20%;
	}

	#img-UPV {
		width: auto;
		max-width: 20%;
	}

}

@media screen and (max-width: 1050px) {

	#img-AVI {
		width: auto;
		max-width: 20%;
	}

	#img-GUAITA {
		margin-top: 1%;
		max-width: 20%;
	}

	#img-VRAIN {
		width: auto;
		max-width: 20%;
	}

	#img-UPV {
		width: auto;
		max-width: 20%;
	}

}

@media screen and (max-width: 950px) {

	#img-AVI {
		width: auto;
		max-width: 20%;
	}

	#img-GUAITA {
		margin-top: 1%;
		max-width: 20%;
	}

	#img-VRAIN {
		width: auto;
		max-width: 20%;
	}

	#img-UPV {
		width: auto;
		max-width: 20%;
	}

}
*/

.site {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.site-content {
	flex: 1;
}

/* CONFIRM_FORM */

div#confirm-container {
	text-align: center;
	margin-top: 10%;
}

div#confirm-container form#formConfirm button {
	margin-top: 15%;
}

div#confirm-container form#formConfirm button#cancelConfirmation {
	margin-right: 10%;
}

div#confirm-container form#formConfirm button#submitButton {
	margin-left: 10%;
}

/* ALL FORMS */

div#capture-details-container, div#task-details-graphics,
div#type-of-task-details-container {
	width: 84%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3em;
}

.container {
	width: 84%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2.5%;
}

.div-submit {
	margin-top: 3%;
}

.input-element {
	margin-bottom: 1.5rem;
}

.input-element-mb-2 {
	margin-bottom: 2rem;
}

.input-element-mb-1p {
	margin-bottom: 1%;
}

.input-element input[type="checkbox"] + label {
	margin-top: 0.25rem;
	display: block;
}

input[type="text"].editable:focus,
input[type="datetime-local"].editable:focus,
input[type="date"].editable:focus,
input[type="time"].editable:focus,
input[type="number"].editable:focus,
input[type="password"].editable:focus,
input[type="email"].editable:focus,
select.editable:focus,
textarea.editable:focus {
	border: solid 3px gray;
}

form div.input-element img, img#info-back-as-well, img#info-back-execution-date,
img#info-priority, img#info-front-capture-range-hours, img#info-retweets,
img#info-back-capture-range-days, img#info-back-capture-limit, img#info-langs,
img#info-classification-areas, img#info-front-capture-limit,
img#info-front-back-capture-limit, img#info-report-sections,
img#info-report-classification, img#info-back-capture-range-ids,
img#info-front-back-capture-range-ids, img#info-front-back-capture-range-days {
	width: 20px;
	height: 20px;
	margin-left: auto;
	vertical-align:middle;
}

.input-with-button {
	display: unset;
	width: 75%;
	margin-right: 4%;
}

.styled-select {
    -moz-appearance: none; /* Firefox */
    -webkit-appearance: none; /* Safari and Chrome */
	background-position-x: 99%;
    background-image: url("/apps/guaita/static/images/br_down.webp"), url("/static/images/br_down.webp");
	background-repeat: no-repeat;
	background-position-y: 12px;
	background-size: 20px;
}

div#create-type-of-task-container .button-with-input,
div#create-task-container .button-with-input {
	display: unset;
	width: 20%;
}

div#capture-details-container .hidden,
div#task-captures-table-container .hidden {
	display: none;
}

/* INDEX */

div#index {
	width: 100%;
	height: 94%;
	margin-top: 0;
	background-color: #c9c9c9;
}

div#index div#div-index-buttons {
	display: flex;
	flex: content;
	flex-wrap: wrap;
	flex-direction: row;
	align-content: center;
    justify-content: center;
}

.index-buttons {
	width: 20%;
	display: flex;
	flex-direction: column;
	margin-left: 5%;
	margin-right: 5%;
}


.index-background-buttons {
	padding: 20px 20px 20px 20px;
	background-color: white;
	border-radius: 25px;
	cursor: pointer;
}

.index-up {
	margin-top: 9%;
	margin-left: 0%;
	margin-bottom: 10.2%;
}

.index-down {
	margin-top: 9%;
	margin-left: 5%;
	margin-bottom: 10.2%;
}

img#img-index-tasks, img#img-index-create-task, img#img-index-create-type-of-task, img#img-index-manage-users {
	height: 150px;
}

button#createTask, button#viewTasks, button#createTypeOfTask, button#manageUsers, button#groupConfig {
	min-width: 200px;
}

div#div-anonymous-user {
	margin-top: 3%;
}

div#div-anonymous-user img#img-guaita-logo {
	height: 25vh;
	width: auto;
}

div#div-anonymous-user div#div-anonymous-transitioning {
	margin-top: 4%;
	width: 80vw;
	height: 40vh;
	background-image: url(../images/index/anonymous/bg1.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
/*	transition: 5s; */
	animation: animate 45s infinite;
	animation-direction: alternate-reverse;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-timing-function: ease-in-out;
}

@keyframes animate {

	16% {
		background-image: url(../images/index/anonymous/bg2.png);
	}
	32% {
		background-image: url(../images/index/anonymous/bg3.png);
	}
	48% {
		background-image: url(../images/index/anonymous/bg4.png);
	}
	64% {
		background-image: url(../images/index/anonymous/bg5.png);
	}
	80% {
		background-image: url(../images/index/anonymous/bg6.png);
	}
	92% {
		background-image: url(../images/index/anonymous/bg1.png);
	}

}

/* LOADING */

.loading {
	cursor: progress;
}

#loader {
	border: 16px solid #f3f3f3; /* Light grey */
	border-top: 16px solid #f32853; /*#3498db; /* Blue */
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
}

#small_loader {
	border: 16px solid #f3f3f3; /* Light grey */
	border-top: 16px solid #f32853; /*#3498db; /* Blue */
	border-radius: 50%;
	width: 80px;
	height: 80px;
	animation: spin 2s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

div#loading-container h1 {

	margin-top: 7.5%;
	margin-bottom: 10%;

}

div#loading-container form#loadingForm {

	margin-top: 20%;

}

/* LOGIN */

	div#login-container {
		width: 75%;
	}

	div#login-container h1 {
		margin-bottom: 7.5%;
	}

/* RESET_PASSWORD_REQUEST */

	div#reset-password-request-container {
		width: 68%;
	}

	div#reset-password-request-container form#formResetPasswordRequest {
		margin-top: 2rem;
	}

/* RESET_PASSWORD */

	div#reset-password-container {
		width: 74%;
	}

	div#reset-password-container form#formResetPassword {
		margin-top: 2rem;
	}


/* TASKS VIEWS */

	/* TASKS & CAPTURE_TASKS */

	/*div#task-captures-table-container div#div-task-description {
		justify-content: space-between;
	}*/
	img#change-task-description {
		cursor: pointer;
		width: 23px;
		height: 23px;
		vertical-align:middle;
	}

	button#cancelChangeTaskDescription,
	button#confirmChangeTaskDescription,
	button#cancelChangeCaptureDescription,
	button#confirmChangeCaptureDescription {
		background-color: transparent;
	}

	button#cancelChangeTaskDescription img,
	button#confirmChangeTaskDescription img {
		width: 35px;
		height: 35px;
		margin-left: 1%;
	}

	div#task-captures-table-container .input-with-button {
		width: 70%;
		margin-right: 0;
	}


	div#div-task-graphics-buttons {
		width: 90%;
		text-align: center;
	}

	@media screen and (max-width: 561px) {

		div#div-task-graphics-buttons button#viewTasks {
			margin-right: auto;
			margin-left: auto;
		}

		div#div-task-graphics-buttons button {
			display: block;
			margin-top: 5%;
			margin-right: auto;
			margin-left: auto;
		}

	}
	/*
	div#div-task-captures-buttons, div#div-task-graphics-buttons {
		width: 90%;
		height: 150px;
		margin-top: 10%;
		text-align: center;
	}

	div#div-task-captures-buttons button#showGraphics,
	div#div-task-graphics-buttons button#viewTasks {
		margin-right: 20%;
	}

	@media screen and (max-width: 561px) {

		div#div-task-captures-buttons button#showGraphics,
		div#div-task-graphics-buttons button#viewTasks {
			margin-right: auto;
			margin-left: auto;
		}

		div#div-task-captures-buttons button, div#div-task-graphics-buttons button {
			display: block;
			margin-top: 5%;
			margin-right: auto;
			margin-left: auto;
		}

	}
	*/

	/* TASKS */

	div#tasks-container div#data_length {
		display: flex;
		flex-wrap: wrap;
	}

	div#tasks-container div#div-select-user {
		display: unset;
		margin-left: 5%;
	}

	div#tasks-container div#div-tasks-buttons {
		margin-left: 2%;
		flex-grow: 1;
		text-align: right;
		margin-bottom: 2%;
	}

	div#tasks-container div#div-tasks-buttons button#showFilters {
		margin-right: 1rem;
	}

	div#tasks-container div#div-tasks-buttons button#showFilters,
	div#tasks-container div#div-tasks-buttons button#taskCreateTask {
		padding-right: 0.5rem;
		padding-left: 0.5rem;
	}

	div#data_length select#select-user {
		padding-left: 5px;
		padding-right: 5px;
		height: 2rem;
		width: auto;
		background-position-y: 5px;
		background-position-x: 98%;
		min-width: 500px;
	}

	@media screen and (max-width: 981px) {

		span#br-elem {
			flex-basis: 100%;
			height: 0;
		}

	}

	div#div-tasks-filters div {
		width: 48%;
		margin-top: 1rem;
		margin-bottom: 2rem;
	}

	div#div-tasks-filters div#div-description-filter {
		margin-right: 2%;
	}

	div#div-tasks-filters div#div-number-tweets-filter {
		margin-left: 2%;
	}

	input#min-number-tweets-filter, input#max-number-tweets-filter {
		display: inline;
		width: calc(50% - 3px);
	}



	table img.tableImg {
		max-width: 30px;
		max-height: 30px;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		vertical-align: middle;
	}

	img.tableImg2 {
		max-width: 40px;
		max-height: 40px;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		vertical-align: middle;
	}

	/* TASK_CAPTURES */

	div#task-captures-table-container div#data_length {
		display: flex;
		flex-wrap: wrap;
	}

	div#task-captures-table-container div#div-task-captures-buttons {
		margin-left: 2%;
		flex-grow: 1;
		text-align: right;
	}

	div#task-captures-table-container div#div-task-captures-buttons button#showGraphics {
		margin-right: 1rem;
	}

	div#task-captures-table-container div#div-task-captures-buttons button#showGraphics,
	div#task-captures-table-container div#div-task-captures-buttons button#addCaptureToTask {
		padding-right: 0.5rem;
		padding-left: 0.5rem;
	}

	.zoom {
		transition: transform .2s; /* Animation */
	  }

	.zoom:hover {
		transform: scale(1.5); /* (150% zoom)*/
	}

	.zoomsmall {
		transition: transform .2s; /* Animation */
	  }

	.zoomsmall:hover {
		transform: scale(1.2); /* (150% zoom)*/
	}
	/*
	div#div-task-captures-buttons {
		margin-top: 7.5%;
	}
	*/

	/* CREATE_TASK */

	div#create-task-container form#formCreateTask table#div-render-query {
		margin-bottom: 2.5rem;
	}

	div#create-task-container form#formCreateTask div#back-1 {
		margin-left: 3%;
	}

	div#create-task-container form#formCreateTask div#back-2 {
		margin-right: 2%;
	}

	/*
	input#front-finish-date, input#back-execution-date {
		width: 85%;
		vertical-align: top;
		margin-right: 0;
		margin-left: 0;
	}

	input#clear-front-finish-date, input#clear-back-execution-date {
		width: 15%;
		font-size: 10pt;
		vertical-align: top;
		padding-left: 0.2em;
		padding-right: 0.2em;
		margin-left: 0;
		margin-right: 0;
	}
	*/

	/* CAPTURE_DETAILS */

	div#capture-details-container {
		margin-bottom: 5%;
	}

	div#div-capture-description {
		display: flex;
		align-items: center;
	}

	div#capture-details-container .description {
		display: unset;
		margin-right: 0;
	}

	button#cancelChangeCaptureDescription,
	button#confirmChangeCaptureDescription {
		padding: 0;
		flex: 0 0 70px;
	}

	img#change-capture-description {
		cursor: pointer;
		margin-left: 2%;
		width: 35px;
		height: 35px;
	}

	button#cancelChangeCaptureDescription img,
	button#confirmChangeCaptureDescription img {
		width: 35px;
		height: 35px;
		cursor: pointer;
	}

	div#capture-details-actions {
		text-align: center;
		margin-bottom: 5%;
	}

	div#task-details-graphics {
		width: 94%;
	}

	/* PLANIFICATE_CAPTURE */

	/* CHANGE_CAPTURE_PRIORITY */

	div#change-priority-container hr.priority {
		margin-top: 5%;
		margin-bottom: 5%;
	}



/* TYPE OF TASKS VIEWS */

	/* CREATE_TYPE_OF_TASK */

	div#create-type-of-task-container {
		width: 78%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 5%;
	}

	div#create-type-of-task-container form#formCreateTypeOfTask div#div-description,
	div#create-type-of-task-container form#formCreateTypeOfTask div#div-input,
	div#create-type-of-task-container form#formCreateTypeOfTask div#div-pipe,
	div#create-type-of-task-container form#formCreateTypeOfTask div#div-langs {
		margin-bottom: 4%;
	}

	/* TYPE_OF_TASK_DETAILS */

	div#type-of-task-details-container {
		margin-bottom: 5%;
	}

	div#div-type-of-task-description {
		display: flex;
		align-items: center;
	}

	div#type-of-task-details-container .description {
		display: unset;
		margin-right: 0;
	}

	button#cancelChangeTypeOfTaskDescription,
	button#confirmChangeTypeOfTaskDescription {
		padding: 0;
		flex: 0 0 70px;
	}

	img#change-type-of-task-description {
		cursor: pointer;
		margin-left: 2%;
		width: 35px;
		height: 35px;
	}

	button#cancelChangeTypeOfTaskDescription img,
	button#confirmChangeTypeOfTaskDescription img {
		width: 35px;
		height: 35px;
		cursor: pointer;
	}

	div#type-of-task-details-actions {
		text-align: center;
		margin-top: 10%;
		margin-bottom: 15%;
	}

/* USER VIEWS */

	/* CREATE_USER */

	/* USER_DETAILS */

	div#user-details-actions {
		text-align: right;
	}

	div#edit-user-container div#div-submit-button {
		text-align: right;
	}

	div#user-details-actions button#backUsers {
		min-width: 8rem;
	}

	div#user-details-actions button#editUser {
		min-width: 5rem;
	}

	div#user-details-actions button#deleteUser {
		min-width: 6rem;
	}

	div#user-details-actions button#backUsers {
		margin-right: 10%;
	}

	@media screen and (max-width: 609px) {

		div#user-details-actions button#backUsers, div#user-details-actions button#editUser {
			margin-right: auto;
			margin-left: auto;
		}

		div#user-details-actions button {
			display: block;
			margin-top: 5%;
			margin-right: auto;
			margin-left: auto;
		}

	}

/* GROUP_CONFIGS */

	/* FORMS */

	/* CREATE_GROUP_CONFIG */

/* TWEETS VIEWS */

	div#div-tweets-filters {
		width: 90%;
		text-align: center;
		margin-top: 7.5%;
		margin-bottom: 5%;
	}

	div#div-text-filter {
		width: 30%;
		text-align: left;
	}

/* Campos no editables */
/* Soportado en Firefox usando prefijo */
input:-moz-read-only,textarea:-moz-read-only {
  background-color: #eaeaea;
  border: solid 2px #e8e8e8;
}

/* El prefijo no es necesario en navegadores basados en Blink/WebKit/Edge  */
p:read-only {
  cursor: not-allowed;
}
input:read-only,textarea:read-only {
  background-color: #eaeaea;
  border: solid 2px #e8e8e8;
}

input[type="checkbox"],
input[type="radio"] {
	background-color: white;
	border: solid 3px gray;
}

#select-task thead {
	border: none;
}

#div-create-type-of-task, #div-create-user {
    text-align: right;
    margin-right: 2%;
    margin-top: 3em;
}

#div-create-report-button {
    text-align: right;
    margin-right: 2%;
    margin-top: -4em;
}

blockquote.twitter-tweet {
	background-color: red;
}

blockquote.twitter-tweet p {
	overflow: hidden;
	white-space: initial;
}