/*==================================
	Estilos generales.
==================================*/
@font-face {
    font-family: 'montserratregular';
    src: url('fonts/montserrat-regular-webfont.eot');
    src: url('fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/montserrat-regular-webfont.woff2') format('woff2'),
         url('fonts/montserrat-regular-webfont.woff') format('woff'),
         url('fonts/montserrat-regular-webfont.ttf') format('truetype'),
         url('fonts/montserrat-regular-webfont.svg#montserratregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

* {
   box-sizing: border-box;
}

html {
	font-family: 'montserratregular';
	height: 100%;
}

body {
	height: 100%;
}

header,
footer {
	width: 100%;
}

.flex-row-class {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-direction: row;
    flex-direction: row;
}

.flex-column-class {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-direction: column;
    flex-direction: column;
}

.center-flex {
	-webkit-justify-content: center;
	justify-content: center;
}

.system-link {
	color: #1B8E5A;
	font-size: 1.1em;
	text-decoration: none;
}

#app {
	padding-top: 64px;
}

#google-maps {
	color: #000;
	height: 400px;
	width: 100%;
}

/*==================================
	Elementos de formulario.
==================================*/
.label-form {
	color: #FFF;
	display: inline-block;
	margin-bottom: 5px;
	width: 100%;
}

.text-bold {
	font-weight: bold;
}

.label-form-inline {
	color: #FFF;
	flex-shrink: 0;
	padding-right: 5px;
	width: auto;
}

.input-text-form {
	background: transparent;
	border: 1px solid #A7AAA9;
	border-radius: 5px;
	color: #FFF;
	margin-bottom: 10px;
	padding: 5px;
	width: 100%;
}

.input-text-form-inline {
	margin-bottom: 0;
}

.text-form-locked {
	opacity: 0.5;
}

.input-file {
	color: #FFF;
}

.textarea-form {
	background: transparent;
	border: 1px solid #A7AAA9;
	border-radius: 5px;
	color: #FFF;
	height: 100px;
	margin-bottom: 10px;
	padding: 5px;
	width: 100%;
}

.input-file {
	color: #FFF;
	padding: 5px 0 10px 0;
}

.file-name {
	color: #FFF
}

.hidden-element {
	display: none;
}

.btn {
	border-radius: 5px;
	cursor: pointer;
	display: inline-block;
	border: none;
	font-family: 'montserratregular';
	padding: 10px 15px;
	text-align: center;
	text-decoration: none;
	width: 100%;
}

	.ok-btn {
		background: #1B8E5A;
		color: #FFF;
	}

		.ok-outline-btn {
			background: transparent;
			border: 2px solid #023373;
			color: #023373;
		}

	.second-ok-btn {
		background: #1B8E5A;
		color: #FFF;
	}

	.cancel-btn {
		background: #BF0436;
		color: #FFF;
	}

		.cancel-outline-btn {
			background: transparent;
			border: 2px solid #BF0436;
			color: #BF0436;
		}

	.warning-btn {
		background: #F2D230;
		color: #000;
	}

		.warning-outline-btn {
			background: transparent;
			border: 2px solid #F2D230;
			color: #F2D230;
		}

	.disabled-btn {
		opacity: 0.5;
	}

.submit-container {
	margin-top: 20px;
	text-align: center;
}

	.submit-container .btn {
		margin-bottom: 7px;
	}

.pseudo-radio {
	-webkit-justify-content: center;
	justify-content: center;
	margin-bottom: 15px;
}

	.pseudo-radio > label {
		color: #FFF;
		cursor: pointer;
		margin-right: 15px;
	}

	.pseudo-radio > label:last-child {
		margin-right: 0;
	}

	.pseudo-radio-option {
		background: #FFF;
		border: 2px solid rgb(114, 127, 136);
		border-radius: 50%;
		display: inline-block;
		height: 25px;
		position: relative;
		width: 25px;
	}

		.real-radio {
			display: none;
		}

		.text-radio {
			margin-right: 5px;
		}

		.real-radio:checked + .pseudo-radio-option span {
			background: #1B8E5A;
			border-radius: 50%;
			bottom: 0;
			display: inline-block;
			height: 15px;
			left: 0;
			margin: auto;
			position: absolute;
			right: 0;
			top: 0;
			width: 15px;
		}

/*========= Estilos del checkbox ==========*/
.checkbox-option {
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	cursor: pointer;
	width: 100%;
}

	.checkbox-container {
		display: inline-block;
		height: 25px;
		width: 25px;
	}

		.pseudo-checkbox {
			border: 2px solid #FFF;
			cursor: pointer;
			display: inline-block;
			height: 25px;
			width: 25px;
		}

		.real-checkbox {
			display: none;
			height: 20px;
			opacity: 0;
			position: absolute;
			width: 20px;
		}

			.real-checkbox:checked + .pseudo-checkbox {
				background: url("../img/palomita-checkbox.svg") center no-repeat;
				background-size: cover;
				border: 2px solid #011627;
			}

	.checkbox-text {
		padding-left: 3px;
	}

.pseudo-select {
	background: transparent url("../img/select-arrow.svg") 98% no-repeat;
	background-size: auto 40%;
	border: 1px solid #A7AAA9;
	border-radius: 5px;
	height: 30px;
	margin-bottom: 10px;
	padding-left: 5px;
	position: relative;
}

.pseudo-select-inline {
	margin-bottom: 0;
	width: 100%;
}

	.pseudo-select select {
		border: 1px solid gray;
		height: 100%;
		left: 0;
		opacity: 0;
		position: absolute;
		top: 0;
		width: 100%;
	}

	.pseudo-select span {
		color: #FFF;
		line-height: 25px;
	}

.switch-container {
	margin-bottom: 10px;
}

	.switch {
		-webkit-flex-shrink: 0;
		flex-shrink: 0;
		background: transparent;
		border-radius: 30px;
		cursor: pointer;
		display: inline-block;
		height: 40px;
		position: relative;
		width: 100px;
	}

		.switch-box {
			display: none;
		}

		.switch-bar {
			background: #888;
			border-radius: 8px;
			bottom: 0;
			display: inline-block;
			height: 20px;
			margin: auto;
			position: absolute;
			right: 0;
			top: 0;
			transition: all .5s ease-in-out;
			width: 100%;
		}

		.switch .switch-circle {
			background: #CCC;
			border-radius: 50%;
			display: inline-block;
			height: 100%;
			position: absolute;
			right: -5px;
			top: 0;
			transition: all .5s ease-in-out;
			width: 40px;
		}

			.switch .switch-circle::after {
				bottom: 0;
				color: #000;
				content: "NO";
				display: inline-block;
				height: 35px;
				left: 0;
				line-height: 35px;
				margin: auto;
				position: absolute;
				right: 0;
				text-align: center;
				top: 0;
				width: 35px;
			}

		.switch-box:checked ~ .switch-circle {
			background: #1B8E5A;
			right: calc(100% - 35px);
		}

			.switch-box:checked ~ .switch-circle::after {
				color: #FFF;
				content: "SI";
			}

		.switch-box:checked ~ .switch-bar {
			background: #5f5f5f;
		}

.form-subtitle {
	color: #FFF;
	font-size: 1.3em;
	text-align: center;
}

/*==================================
	Contenedores.
==================================*/
.container {
	padding-left: 1em;
	padding-right: 1em;
}

.main-content {
	/*padding-top: 64px;*/
}

.main-content-margin {
	margin-top: 50px;
}

.system-bg {
	background: #232323;
}

.two-column-container {
	width: 100%;
}

	.half-container {
		width: 100%;
	}

/*==================================
			Login.
==================================*/
.login-bg {
	background: url("../img/login-bg.jpg") center no-repeat;
	background-size: cover;
}

.login-container {
	-webkit-justify-content: center;
	justify-content: center;
	font-size: 1.1em;
	margin-top: 80px;
	text-align: center;
	width: 100%;
}

	.login-logo-company {
		height: auto;
		margin: 0 0 30px 0;
		width: 140px;
	}

	.username-container,
	.password-container {
		margin-bottom: 30px;
		width: 100%;
	}

		.username-container input[type="email"],
		.password-container input[type="password"] {
			background: #FFF;
			border: 1px solid #A7AAA9;
			border-radius: 5px;
			color: #000;
			padding: 10px 1em;
			text-align: center;
			width: 100%;
		}

		.caja-nickname {
			background: #FFF;
			border: 1px solid #A7AAA9;
			border-radius: 5px;
			color: #000;
			padding: 10px 1em;
			text-align: center;
			width: 100%;
		}

/*==================================
			Navbar.
==================================*/
.navbar {
	background: #FFF;
	flex-shrink: 0;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 200;
}

.logo-header {
	height: 100px;
	width: auto;
}

	.logo-header-system {
		height: 60px;
	}

.page-title {
	color: #1B8E5A;
	font-size: 1.8em;
	margin: 0;
}

.user-icon {
	background: url("../img/profile-icon.svg") center no-repeat;
	background-size: auto 100%;
	cursor: pointer;
	display: inline-block;
	height: 35px;
	margin-right: 1em;
	position: relative;
	width: 60px;
}

	.user-session-type {
		bottom: -15px;
		color: #000;
		display: inline-block;
		font-family: 'Raleway', sans-serif;
		font-size: 0.8em;
		left: 0;
		margin: auto;
		position: absolute;
		text-align: center;
		right: 0px;
	}

.system-bar {
	background: rgba(0, 0, 0, 0.5);
}

.profile-submenu {
	background: #FFF;
	display: none;
	margin-left: -74px;
	margin-top: 60px;
	padding-left: 0;
	width: 150px;
}

	.profile-submenu li {
		text-align: center;
	}

		.profile-submenu li a {
			color: #011627;
			display: inline-block;
			font-family: 'Raleway', sans-serif;
			padding: 13px 8px;
			text-decoration: none;
		}

#logout-check:checked + .profile-submenu {
	display: inline-block;
}

/*==================================
		Ventana emergente.
==================================*/
.transparent-bg {
	background: rgba(0, 0, 0, 0.6);
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
}

.form-container {
	margin-top: 20px;
}

.popup-container,
.delete-popup-container,
.cancel-purchase-popup-container,
.efectivo-popup-container,
.adjustment-details-popup-container {
	left: 0;
	position: absolute;
	top: 50px;
	width: 100%;
	z-index: 1001;
}

	.popup,
	.delete-popup,
	.cancel-purchase-popup,
	.efectivo-popup,
	.adjustment-details-popup {
		background: rgba(255, 255, 255, 1);
		border-radius: 10px;
		color: #3F3F3F;
		left: 0;
		margin-left: auto;
		margin-right: auto;
		padding: 1em;
		position: absolute;
		right: 0;
		width: 95%;
	}

		.popup-title {
			border-bottom: 2px solid #3F3F3F;
			font-size: 1.5em;
			font-weight: bold;
			margin: 0 0 15px 0;
			padding-bottom: 7px;
			text-transform: uppercase;
		}

		.add-edit-popup-title,
		.delete-popup-title {
			text-align: center;
		}

		.warning-icon {
			height: auto;
			width: 100px;
		}

	.frm-sub-container-2,
	.frm-sub-container-3 {
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		width: 100%;
	}

		.inline-input-label {
			margin-bottom: 10px;
		}

	.frm-container {
		width: 100%;
	}

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

/*==================================
			Home.
==================================*/
.main-menu {
	background: url("../img/system-banner-bg.jpg") 0 -150px no-repeat;
	background-size: 100% auto;
	border-bottom: 2px solid #FFF;
	padding-bottom: 20px;
	padding-top: 20px;
}

.open-menu {
	background: url("../img/hamburger-menu-system.svg") center no-repeat;
	background-size: 100%;
	cursor: pointer;
	display: inline-block;
	height: 50px;
	position: absolute;
	right: 1em;
	top: 74px;
	width: 50px;
}

	.group-menu {
		background: #FFF;
		margin-bottom: 1em;
		padding: 1em;
		text-align: center;
		width: 100%;
	}

		.group-menu h3 {
			color: #232323;
			font-size: 1.3em;
			text-transform: uppercase;
		}

		.group-menu img {
			height: 50px;
			width: auto;
		}

	.current-group {
		box-shadow: inset 0 0 2em #000;
	}

.menu-link {
	display: inline-block;
	padding: 4px 0;
	width: 100%;
}

.current-link {
	text-decoration: underline;
}

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

	.tab {
		background: #FFF;
		color: #1B8E5A;
		display: inline-block;
		padding: 10px 0;
		text-decoration: none;
		width: 100%;
	}

	.current-tab {
		background: #1B8E5A;
		box-shadow: inset 0 0 1em #000;
		color: #FFF;
	}

/*==================================
		Listas de elementos.
==================================*/
.list-title {
	color: #FFF;
	font-size: 1.3em;
	margin-top: 20px;
	text-align: center;
}
.menus-list {
	background: rgba(255, 255, 255, 1);
	border-radius: 5px;
	margin-top: 20px;
}

	.menu-row {
		border-bottom: 1px solid rgb(157, 157, 157);
		padding: 7px 0 7px 1em;
		width: 100%;
	}

		.menu-row p {
			color: #000;
			font-size: 1.1em;
			margin: 0;
		}

		.hr-asigned {
			font-size: 0.8em;
		}

		.action-btn-row-container span,
		.action-btn-row-container a {
			margin-right: 6px;
		}

.btn-row {
	cursor: pointer;
	display: inline-block;
	height: 30px;
	width: 30px;
}

	.show-icon {
		background: url("../img/show-icon.svg") center no-repeat;
		background-size: auto 80%;
	}

	.update-icon {
		background: url("../img/update-icon.svg") center no-repeat;
		background-size: auto 80%;
	}

	.edit-icon {
		background: url("../img/edit-icon.svg") center no-repeat;
		background-size: auto 80%;
	}

	.delete-icon {
		background: url("../img/delete-icon.svg") center no-repeat;
		background-size: auto 80%;
	}

	.trees-icon {
		background: url("../img/trees-icon.svg") center no-repeat;
		background-size: auto 80%;
	}

	.arboles-icon {
		background: url("../img/arboles-icon.svg") center no-repeat;
		background-size: auto 80%;
	}

	.pdf-icon {
		background: url("../img/pdf-icon.svg") center no-repeat;
		background-size: auto 80%;
	}

	.gallery-icon {
		background: url("../img/gallery-icon.svg") center no-repeat;
		background-size: auto 80%;
	}

.asistencia {
	color: #1B8E5A!important;
}

.inasistencia {

}

/*==================================
			Toolbar.
==================================*/
.toolbar {
	background: rgba(0, 0, 0, 0.5);
	bottom: 0;
	height: 50px;
	left: 0;
	padding: 0 1em;
	position: fixed;
	width: 100%;
	z-index: 10;
}

.toolbar-btn {
	background: transparent;
	border-radius: 5px;
	cursor: pointer;
	display: inline-block;
	padding: 10px 15px;
	text-decoration: none;
}

	.white-btn {
		border: 2px solid #FFF;
		color: #FFF;
	}

	.search-icon {
		background: url("../img/search-icon.svg") center no-repeat;
		background-size: auto 85%;
		display: inline-block;
		height: 40px;
		width: 50px;
	}

.search-bar {
}

	.search-input {
		background: url("../img/search-icon.svg") 98% no-repeat;
		background-size: auto 70%;
		border: 1px solid #FFF;
		border-radius: 5px;
		color: #FFF;
		margin-bottom: 8px;
		padding: 7px 5px;
		width: 100%;
	}

	.search-bar .btn {
		margin-bottom: 8px;
	}

/*==================================
		Asistencias.
==================================*/
.seach-assistence-tools {
	margin-bottom: 20px;
	margin-top: 15px;
}

	.centro-container,
	.consultar-container {
		width: 100%;
	}

/*==================================
		Academias.
==================================*/
.pictures-container {
	flex-wrap: wrap;
	padding: 20px 0;
}

	.picture-container {
		position: relative;
		width: 100%;
	}

	.course-picture {
		height: auto;
		width: 100%;
	}

	.delete-picture {
		background: url("../img/delete-picture-icon.svg") center no-repeat;
		background-size: 100%;
		cursor: pointer;
		height: 30px;
		position: absolute;
		right: -5px;
		top: -5px;
		width: 30px;
		z-index: 20;
	}


/*==================================
	Media queries.
==================================*/
@media screen and (min-width: 769px) {
	.btn {
		transition: all .3s ease-in-out;
		width: auto;
	}

	.btn:hover {
		transform: scale(1.1);
	}

	/*==================================
		Contenedores.
	==================================*/
	.container {
	    margin: 0 auto;
	    max-width: 1000px;
	    width: 90%;
	}

	.two-column-container {
		-webkit-flex-direction: row;
    	flex-direction: row;
	}

		.half-container {
			width: 48%;
		}

	.search-bar {
		-webkit-flex-direction: row;
	    flex-direction: row;
	}

		.search-input {
			width: 200px;
		}

	/*==================================
				Login.
	==================================*/
	.login-container {
		max-width: 400px;
	}

		.login-submit {
			max-width: 200px;
		}

	.login-logo-company {
		height: auto;
		width: 200px;
	}

	/*==================================
			Ventana emergente.
	==================================*/
	.popup,
	.delete-popup,
	.cancel-purchase-popup,
	.efectivo-popup {
		max-width: 850px;
	}

	.lil-popup,
	.delete-popup,
	.cancel-purchase-popup {
		max-width: 500px;
	}

		.form-items {
			-webkit-flex-direction: row;
	    	flex-direction: row;
	    	-webkit-align-items: stretch;
			align-items: stretch;
		}

		.frm-sub-container-2 {
			width: 49%;
		}

		.frm-sub-container-3 {
			width: 31%;
		}

	/*==================================
		Elementos de formulario.
	==================================*/
	.submit-container {
		-webkit-flex-direction: row;
	    flex-direction: row;
	    -webkit-justify-content: center;
		justify-content: center;
	}

		.submit-container .ok-btn {
			order: 2;
			width: auto;
		}

		.submit-container .cancel-btn {
			margin-right: 20px;
			order: 1;
			width: auto;
		}

	/*==================================
				Home.
	==================================*/
	.main-menu > div {
		-webkit-align-items: stretch;
		align-items: stretch;
		-webkit-flex-direction: row;
	    flex-direction: row;
	}

		.group-menu {
			width: 23%;
		}

	.tabs-container {
		-webkit-flex-direction: row;
	    flex-direction: row;
	}

		.two-tabs .tab {
			width: 50%;
		}

		.tab {
			border-left: 1px solid #A7AAA9;
		}

		.tabs-container .tab:first-child {
			border-left: none;
		}
	/*==================================
			Asistencias.
	==================================*/
	.seach-assistence-tools {
		-webkit-flex-direction: row;
	    flex-direction: row;
	}

		.centro-container,
		.consultar-container {
			width: 50%;
		}

		.consultar-container {
			text-align: right;
		}

	/*==================================
			Academias.
	==================================*/
	.pictures-container {
		-webkit-flex-direction: row;
	    flex-direction: row;
	}

		.picture-container {
			width: 33%;
		}
}