@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@200;300;400;500;600;700;800;900;1000&display=swap');

body {
	background: linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
	background-size: initial;
	background-color: #000000;
	background-repeat: repeat-x;
	background-position: center top;
	color: #FFF !important;
	/* Default font weight */
	font-weight: 200;
	font-family: 'Mulish', 'Josefin Sans', sans-serif;
}

.pt-6,
.py-6 {
	padding-top: 3.5rem !important;
}

.pr-6,
.px-6 {
	padding-right: 3.5rem !important;
}

.pb-6,
.py-6 {
	padding-bottom: 3.5rem !important;
}

.pl-6,
.px-6 {
	padding-left: 3.5rem !important;
}

#toolbox,
#toolbox2 {
	position: absolute;
	width: 300px;
	z-index: 99;
	background-color: #F1F1F1;
}

#toolbox .card,
#toolbox2 .card {
	background: none !important;
	border: 0 !important;
}

#toolbox .filter-input-size,
#toolbox2 .filter-input-size {
	width: 30px;
	display: inline-block;
}

#filter {
	margin-bottom: 30px;
}

.toolbox-container {
	position: absolute;
	z-index: 9999;
	cursor: pointer;
}

.toolbox2-container {
	position: absolute;
	z-index: 9999;
	right: 20px;
	margin-top: 20px;
	cursor: pointer;
}


#myVideo {
	object-fit: cover;
	width: 100vw;
	height: 100vh;
	position: fixed;
	float: right;
	/* top: 2em; */
	opacity: 0.5;
}

#body-principal .container {
	margin-bottom: 60px;
}

.card {
	background-color: #313132 !important;
	width: 21rem;
	height: 32rem;
	margin-bottom: 20px;
}

.alert-primary {
	color: #fff;
	background-color: #333;
	border-color: #333;
}

.grey-bg {
	background-color: #333333;
	padding: 30 10 30 10;
}

.bg_grey {
	background-color: #333333;
	opacity: 0.97;
	padding: 50 30 50 30;
	border-radius: 20px;
}

.idea {
	padding: 20 40 20 40;
}

.big {
	font-size: 70px;
	margin-top: 130px;
}

.btn-grey {
	background-color: #333333;
	color: white;
}

.btn-grey-2 {
	background-color: #333333;
	color: white;
	float: right;
}

.btn-green {
	background-color: #6aa249;
	border-color: #6aa249;
	color: white;
}

.btn-orange {
	background-color: #c49e66;
	border-color: #c49e66;
	color: white;
}

.dropdown a {
	color: #ffffff;
}

.dropdown,
.nav-item {
	list-style-type: none;
}

.dropdown-menu.show a {
	color: #000000;
}

.thanks {
	background-image: url(/static/img/thanks_idea.svg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	padding-top: 20px;
	padding-bottom: 20px;
	opacity: 0.95;
	border-radius: 40px;
}

.thanks-comunidad {
	background-image: url(/static/img/thanks_comunidad.svg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	padding-top: 20px;
	padding-bottom: 20px;
	opacity: 0.95;
	border-radius: 40px;
}


.user_bg {
	background-image: url(/static/img/user_background.svg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	padding-top: 20px;
	padding-bottom: 20px;
	opacity: 0.95;
	border-radius: 40px;
}

.logged {
	text-align: center;
	padding-left: 60px;
	padding-right: 60px;
	padding-top: 60px;
	min-height: 300px;
}

.login {
	padding-left: 60px;
	padding-right: 60px;
	padding-top: 20px;
}

.login .form-control-label {
	display: none;
}

.login .form-control {
	margin-bottom: 30px;
	background-color: #4d4d4d;
	color: #8a8a8a;
	border: #4d4d4d;
}

.login .form-check-label {
	color: #5e6858;
}

.login .form-check-input {
	border-color: #5e6858;
	background-color: rgba(255, 0, 0, 0.5);
}


.login .btn-grey,
.btn-grey {
	background-color: #b1b1b1;
	border-color: #b1b1b1;
	color: #ffffff;
	border-radius: 10px;
	margin-top: 20px;
	padding-left: 30px;
	padding-right: 30px;
}

.login .text-white-login {
	color: #ffffff;
	font-size: 13px;
}

.ideas-bg1 {
	background-color: #6aa249;
	color: #ffffff;
}

.ideas-bg2 {
	background-color: #98c47e;
	color: #ffffff;
}

.ideas-bg3 {
	background-color: #b1cf9f;
	color: #ffffff;
}

.comunidades-bg1 {
	background-color: #c49e66;
	color: #ffffff;
}

.comunidades-bg2 {
	background-color: #d6bb91;
	color: #ffffff;
}

.comunidades-bg3 {
	background-color: #e8cfa9;
	color: #ffffff;
}

.posibilidades-bg1 {
	background-color: #70a5df;
	color: #ffffff;
}

.posibilidades-bg2 {
	background-color: #95b9df;
	color: #ffffff;
}

.posibilidades-bg3 {
	background-color: #aac5e3;
	color: #ffffff;
}

a .fas {
	color: #ffffff;
}

.curved {
	border-radius: 30px;
	overflow: hidden;
	opacity: 0.95;
}

.curved h1 {
	border-bottom: 2px;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-style: solid;
	border-color: #ffffff;
}

.hide {
	display: none;
}

.overflow-y {
	overflow-y: auto;
}

.uach-yellow-background {
	background-color: #f9b700;
}

.uach-red-background {
	background-color: #a80033;
}

.uach-body-background {
	background-color: #343145;
}

#body-principal {
	padding: 50px;
	text-align: center;
}

#body-secondary {
	padding: 50px;
}

.uach-green-background {
	background-color: #14552b;
}

.uach-yellow-text {
	color: #f9b700;
}

.uach-one-background {
	background-color: #F2DB52;
	color: black !important;
}

.uach-two-background {
	background-color: #6dc8ae;
	color: black !important;
}

.uach-three-background {
	background-color: #f9d9cc;
	color: black !important;
}

.number_title {
	font-size: 180px;
	font-weight: bold;
	color: white !important;
	text-align: center;
}

.left-title {
	font-size: 50px;
	font-weight: bold;
	color: white !important;
	text-align: center;
	padding-top: 40px;
}

.modal-content {
	background-color: #000000;
}


/*##############################################*/
/*##############################################*/

#form-agents fieldset,
#form-concepts fieldset {
	display: none;
}

#agents-zone,
#agentsp-zone,
#agentsf-zone {
	height: 150px;
}

#conceptscc-zone,
#conceptscp-zone {
	height: 130px;
	margin-top: 30px;
}

.agent,
.concept,
.emotion {
	font-size: 16px;
	border-radius: 0.75em;
	/* padding: 5px; */
	cursor: pointer;
	margin-bottom: 10px;
	z-index: 100;
}

.agent_ {
	border-radius: 0.5em;
	cursor: pointer;
	display: inline-block;
}

.conceptzone .agent {
	display: block !important;
	font-size: 16px !important;
	margin-bottom: 10px !important;
	padding-top: 10px !important;
	height: 40px;
}

.conceptzone2 {
	display: block !important;
	font-size: 16px !important;
	margin-bottom: 10px !important;
	padding-top: 10px !important;
	height: 40px;
}

/*######################  view select_agents (diana)*/
#agents-0 {
	height: 130px;
	z-index: 1;
}

#agents-1 {
	height: 200px;
	z-index: 1;
}

#agents-2 {
	height: 260px;
	z-index: 1;
}

#agents-3 {
	height: 330px;
	z-index: 1;
}

#agents-4 {
	height: 380px;
	z-index: 1;
}

#agents-5 {
	height: 50px;
	z-index: 1;
}

.agents-est {
	border-radius: 10px;
}

/*#############################################*/

/*######################  view match_concepts (arañita)*/
#concept1,
#concept2,
#concept3 {}

#emotion1,
#emotion2,
#emotion3 {}

#expectation1,
#expectation2,
#expectation3 {}


.conceptzone,
.emotionzone,
.agentzone,
.agentzonep {
	border-radius: 0.75em;
	/* display: inline-block; */
	padding: 5px;
	cursor: pointer;
	z-index: 1;
	touch-action: none;
}

.conceptzone .drag-drop,
.emotionzone .drag-drop,
.agentzone .drag-drop,
.agentzonep .drag-drop {
	font-size: 14px;
	display: inline-block;
	min-width: 40px;
	padding: 0.2em 0.5em;
	margin: 0.3rem 0 0 0.3rem;
	transform: translate(0px, 0px);
	transition: background-color 0.3s;
	z-index: 1;
}

.emotionzone .emotion {
	background-color: #56b400;
}

.dropzone .emotion {
	background-color: rgba(15, 85, 43, 1);
	border-radius: 0.75em;
	padding: 5px;
	cursor: pointer;
	z-index: 1;
	touch-action: none;
	overflow: hidden;
	white-space: nowrap;
}

.dropzone .drag-drop {
	font-size: 16px;
	min-width: 40px;
	padding: 0.2em 0.5em;
	transform: translate(0px, 0px);
	transition: background-color 0.3s;
	overflow: hidden;
	white-space: nowrap;
}

/*#############################################*/



.dropzone,
.dropzone2 {
	border: 4px dashed transparent;
	border-radius: 10px;
	flex: 0 0 100px;
	height: 60px;
	background-color: transparent;
	z-index: -1;
}

.concepts-zone {
	height: 40px;
	margin: 4px;
	background-color: #6aa249;
}

.agents-zone {
	height: 40px;
	margin: 0.5rem;
	background-color: #c59e65;
}


.dropzone.hovering,
.dropzone2.hovering {
	border-color: #333333 !important;
}


/*######################  view agents_relationship (abaco)*/
.form-group {
	margin: 1px;
}

#form-agents label {
	font-size: 15px;
	padding-left: 20px;
	padding-right: 20px;
	margin-bottom: 0;
}

#form-agents input {
	margin-bottom: 20px;
}

input[type='range'] {
	background-color: #c49e66 !important;
	border: #c49e66 !important;
	border-radius: 12px;
	padding: 15px;
}

input[type='range']:focus {
	outline: none;
}

input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none;
}

input[type=range]::-webkit-slider-thumb {
	background-color: #666;
	width: 25px;
	height: 25px;
	border: 3px solid #666;
	border-radius: 30%;
	margin-top: -10px;
}

input[type=range]::-moz-range-thumb {
	background-color: #666;
	width: 25px;
	height: 25px;
	border: 3px solid #666;
	border-radius: 30%;
	margin-top: -10px;
}

input[type=range]::-ms-thumb {
	background-color: #666;
	width: 25px;
	height: 25px;
	border: 3px solid #666;
	border-radius: 30%;
	margin-top: -10px;
}

input[type=range]::-webkit-slider-runnable-track {
	background-color: #333;
	height: 2px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
	outline: none;
}

input[type=range]::-moz-range-track {
	background-color: #333;
	height: 2px;
}

input[type=range]::-ms-track {
	background-color: #333;
	height: 2px;
}

input[type=range]::-ms-fill-lower {
	background-color: HotPink
}

input[type=range]::-ms-fill-upper {
	background-color: black;
}

.etiqueta {
	width: 30px;
	height: 26px;
	position: absolute;
	z-index: 9;
	background-color: HotPink;
	color: white;
	font-size: 12px;
	text-align: center;
	padding-top: 7px;
	top: -45px;
}

.etiqueta:after {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index: 8;
	background-color: HotPink;
	position: relative;
	left: 9px;
}

/*#############################################*/

/* Works on Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: #696969 whitesmoke;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
	width: 15px;
}

*::-webkit-scrollbar-track {
	background: whitesmoke;
}

*::-webkit-scrollbar-thumb {
	background-color: #696969;
	border-radius: 20px;
	border: 3px solid whitesmoke;
}

/* MENU */
.navbar-header h1 {
	font-size: 80px;
	font-weight: bold;
	line-height: 26px;
	text-align: center;
	margin-top: 60px;
}

.navbar-header h1 a {
	color: white;
	text-decoration: none;
}

.navbar-header h1 a:hover {
	color: white;
	text-decoration: none;
}

.navbar-header p {
	text-align: center;
	font-size: 18px;
}

.nav.navbar-nav.navbar-right {
	background-color: white;
	color: black;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-bottom-left-radius: 20px;
	border-color: white;
	padding: 10px;
}

.nav.navbar-nav.navbar-right a {
	color: black;
}

.nav.navbar-nav.navbar-right a:hover {
	color: black;
}

#dd-menu-account {
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	margin-left: -2px;
	border-color: white;
	width: 300px;
}

/* main */
.card * {
	color: #fff;
}

.card {
	border-radius: 20px;
	padding: 20px;
	text-align: left;
}

.center-icons {
	font-size: 30px;
}

.text-card {
	color: #352b43;
}

#card1 {
	background: linear-gradient(0deg, rgba(134, 239, 232, 0.7), rgba(134, 239, 232, 0.7)), url(/static/img/bg1.png);
	background-size: cover;

}

#card2 {
	background: linear-gradient(0deg, rgba(241, 233, 0, 0.7), rgba(241, 233, 0, 0.7)), url(/static/img/bg2.png);
	background-size: cover;
}

#card3 {
	background: linear-gradient(0deg, rgba(252, 153, 59, 0.7), rgba(252, 153, 59, 0.7)), url(/static/img/bg3.png);
	background-size: cover;
}

/* MODULES */

.text-ideas {
	color: #4ecdc4;
}

.text-comunidad {
	color: #fff700;
}

.bg-ideas {
	background-color: #6aa249 !important;
	color: #fff;
}

.jumbo-icon {
	font-size: 60px;
}

.text-comunidades {
	color: rgb(241, 233, 0);
}

.text-posibilidades {
	color: rgb(252, 153, 59);
}

.conceptzone,
.emotionzone {
	border-radius: 40px;
	padding: 20px;
	background-color: #333333;
	margin-bottom: 20px;
}

.bg-ideas-concepts {
	background-color: #98c47e;
	padding: 20px;
	border-radius: 40px;
	color: white;
	height: fit-content;
}

.bg-ideas-concepts-2 {
	background-color: #333333;
	padding: 20px;
	border-radius: 40px;
	color: white;
}

.bg-ideas-concepts-3 {
	background-color: #98c47e;
	padding: 20px;
	border-radius: 40px;
	color: white;
	height: fit-content;
	/* margin-top: 80px; */
}

.bg-ideas-agents {
	background-color: #98c47e;
	padding: 20px;
	border-radius: 0.75em;
	color: white;
	height: fit-content;
	margin: 2em;
}

.bg-ideas-agents-concept {
	background-color: #6aa249;
	padding: 20px;
	border-radius: 1rem;
	color: white;
	min-height: 8em;
	font-size: 1.1em;
	margin-left: 1em;
	word-wrap: break-word;
}

.bg-ideas-agent-match {
	background-color: #333333;
	border-radius: 1rem;
	color: white;
	margin-left: 1em;
	margin-right: 1em;
}



.border-bottom {
	border-style: solid;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 1px;
	border-color: white;
	margin-bottom: 20px;
}

.border-top {
	border-style: solid;
	border-top: 2px;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	border-color: white;
	padding-top: 20px;
}

.border-no {
	margin-bottom: 40px;
}

.zone .emotionzone,
.zone .conceptzone {
	min-height: 500px;
}


.justify-content {
	justify-content: space-around
}

#form-concepts .btn-primary {
	background-color: #6aa249;
	border-color: #6aa249;
	color: white;
}

#comunidad .btn-primary {
	background-color: #c49e66;
	border-color: #c49e66;
	color: white;
}

.el01 {
	background-color: #6aa249;
	border-radius: 10px;
}

.el02 {
	background-color: #6aa249;
	border-radius: 10px;
}

.el03 {
	background-color: #808080;
	border-radius: 10px;
	color: white;
}

.el03 .h3 {
	color: white;
	font-size: 36px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 15;
	font-size: 2rem;
}

.el01 h3 {
	background-color: white;
	padding-top: 4px;
	padding-bottom: 4px;
	color: #0045d1;
	margin-top: 4px;
	border-radius: 10px;
	text-align: center;
}

.el01 h5 {
	height: 25px;
	background-color: white;
	color: #0045d1;
	margin-top: 5px;
	border-radius: 5px;
	text-align: center;
}

.el02 h3 {
	height: 30px;
	background-color: white;
	color: #57b400;
	margin-top: 4px;
	border-radius: 10px;
	text-align: center;
}

.el01.col-md-2 {
	margin-top: 40px;
	height: 45px;
	padding: 0.2em 0.5em;
	background-color: #0045d1;
	;
	color: #0045d1;
}

.el02.col-md-2 {
	margin-top: 10px;
	height: 45px;
	padding: 0.2em 0.5em;
	background-color: #57b400;
	;
	color: #57b400;

}

.number-badge {
	background-color: #ffffff;
	border-radius: 0.25em;
	line-height: normal;
	margin: 0.25em;
}

.number-badge-border {
	background-color: #a9106a;
	border-radius: 0.5em;
	margin: 0.25em;
	padding: 0.1em;
	text-align: center;
}

.concept .el01,
.concept .el02 {
	background-color: #fff;
}

.lower-box-idea {
	position: absolute;
	bottom: 0;
	width: 90%;
	text-align: center;
}

.dropzone.el01 {
	height: 45px;
	margin-top: 10px;
	padding: 0.2em 0.5em;
	transform: translate(0px, 0px);
	transition: background-color 0.3s;
}

.dropzone2.el02 {
	height: 45px;
	margin-top: 10px;
	padding: 0.2em 0.5em;
	transform: translate(0px, 0px);
	transition: background-color 0.3s;
}


/* THANKS PAGE */

.thanks-avatar {
	margin-top: 20px;
	margin-bottom: auto;
	color: #fff;
}

.thanks-name {
	margin-top: 20px;
	margin-bottom: 80px;
	color: #fff;
	text-transform: uppercase;
	font-size: 36px;
}

.thanks-idea {
	margin-top: 20px;
	margin-bottom: 80px;
	color: #fff;
}

.thanks-home {
	margin-bottom: 30px;
	color: #fff;
}

.thanks-home a {
	color: #fff;
	font-size: 30px;
}

/* COMUNIDAD */
.square {
	/* border-radius: 20px;
  border-width: 2px;
  border-style: solid;
  border-color: white; */
	background-color: #333333;
	padding: 20px;
}

.square-2 {
	border-radius: 20px;
	background-color: #333333;
	padding: 20px;
}

.orange-comunidad-text {
	color: #bf9a63;
}

.bg-comunidad {
	background-color: #c49e66;
	color: white;
}

.comunidad-image {
	background-image: url(/static/img/comunidades.png);
	background-size: cover;
	height: 500px;
}

.comunidad-image-2 {
	background-image: url(/static/img/comunidades.png);
	background-size: cover;
	height: 400px;
}

.bg-comunidad-agents {
	background-color: #d6bb90;
	padding: 20px;
	border-radius: 40px;
	color: white;
}

.bg-comunidad-agents-2 {
	background-color: #333333;
	padding: 20px;
	border-radius: 40px;
	margin: 10px;
	color: white;
}

.bg-comunidad-agents .agentzone {
	display: block;
	width: 100%;
}

.bg-comunidad-agents .agent {
	font-size: 16px;
	padding: 0.2em 0.5em;
	margin-bottom: 10px;
}

.comunidad-size-2 {
	height: 300px;
	margin-top: 100px;
}

.purple-background {
	background-color: #9328cc;
	color: white;
	padding: 5px;
	border-radius: 10px;
}

.small-background {
	width: 30px;
	margin: auto;
}

.interaction {
	user-select: none;
}

.graph {
	height: 600px;
}

.graph-fullscreen {
	height: 80vh;
}

.concept-dropped {
	font-size: 18px !important;
	white-space: break-spaces !important;
	padding: 0 !important;
	margin-top: 3%;
}

.ghost {
	position: relative;
	opacity: 0;
	height: 0;
	width: 0;
	padding: 0;
	margin: 0;
	border: 0;
}