/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 13px2;
	vertical-align: baseline;
	background: transparent;
}

body {
	line-height: 1;
}

article,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

nav ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
	content: none;
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

/* change colours to suit your needs */
ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}

/* change colours to suit your needs */
mark {
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: bold;
}

del {
	text-decoration: line-through;
}

abbr[title],
dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 1em 0;
	padding: 0;
}

input,
select {
	vertical-align: middle;
}

/*  COLORES DE INTERFAZ  */
:root {
	
	 --white: #ffffff;
	--light_gray: #F8F7F6;
	--medium_gray: #d7dcdf;
	--dark_gray: #979da4;
	--black: #20242a;
	--black_dark: #0C0B22;
	--black-light: #474747;
	--purple: #9a2bcb;
	--purple_light: #d462ce;
	--yellow: #d3df2f;
	--yellow_light: #f9fea5;
	--green: #7bca20;
	--green_light: #9be45f;
	--cyan: #4dccab;
	--cyan_light: #6fe5c7;
	--blue: #68BBE9;
	--blue_light: #7BD2F5;
	--red: #ff1919;
	--red_light: #fd3939;
	--orange: #f9a315;
	--orange_light: #fdbc53; 
	
	/*
	--white: #ffffff;
	--light_gray: #F8F7F6;
	--medium_gray: #d7dcdf;
	--dark_gray: #979da4;
	--gray: #b9afc6;
	--black: #20242a;
	--black_dark: #0C0B22;
	--black-light: #474747;
	--purple: #673ab5;
	--purple_light: #6059f7;
	--yellow: #d3df2f;
	--yellow_light: #f9fea5;
	--green: #42c19c;
	--green_light: #57ce66;
	--cyan: #3c9fc8;
	--cyan_light: #54d1e1;
	--blue_light: #455be5;
	--blue: #46a6e5;
	--red: #b71010;
	--red_light: #e60602;
	--orange: #e56b3d;
	--orange_light: #e1ad1e;
	*/

	--space_small: 4px;
	--space_medium: 8px;
	--space_large: 12px;
	--space_extra: 13px;
	--space_extra_extra: 24px;

	--text_body: 14px;
	--text_anchors: 14px;
	--text_box_titles: 16px;
	--text_title1: 18px;
	--text_title2: 17px;
	--text_title3: 16px;
	--text_title4: 15px;
	--text_title5: 14.5px;
	--text_title6: 14px;
	--icon_size_small: 10px;

	--round_small: 16px;
	--round_medium: 24px;
	--round_large: 32px;

	--small_height: 24px;
	--standar_height: 32px;
	--large_height: 40px;
	--icon_width: 24px;
	--icon_height: 32px;
	--icon_button_text: 16px;

	--card_height: 36px;
	--card_info: 20px;
	--card_margin: 2px;
	--card_margin_long: 4px;

	--avatar_height: 80px;
	--avatar_width: 80px;
	--avatar_icon: 32px;

	--text_size_topbar: 18px;
	--text_size_header1: 20px;
	--text_size_header1: 18px;
	--text_size_header1: 16px;
	--text_size_normal: 12px;
}

script { display: none !important; }

body {
	width: 100%;
	padding: 0;
	margin: 0;
	font-size: var(--text_body);
	font-family: "Kodchasan", sans-serif;
	font-weight: 300;
	background: var(--light_gray);
	overflow-y: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Raleway", sans-serif;
	font-weight: 500;
}

h1 {
	font-size: var(--text_title1);
	margin: var(--space_small);
}
h2 {
	font-size: var(--text_title2);
	margin: var(--space_small);
}
h3 {
	font-size: var(--text_title3);
	margin: var(--space_small);
}
h4 {
	font-size: var(--text_title4);
	margin: 0px;
    margin-bottom: 6px;
    margin-top: 12px !important;
}
h5 {
	font-size: var(--text_title5);
	margin: var(--space_small);
}
h6 {
	font-size: var(--text_title6);
	margin: var(--space_small);
}

p {
	margin-bottom: var(--space_small);
}

.app {
	height: 100vh;
	overflow-y: hidden;
}

.hidden_menu {
	visibility: hidden;
}

.sidebar {
	position: fixed;
	width: 16%;
	height: 100%;
	overflow-y: scroll;
	background-color: var(--black);
	visibility: visible;
	top: 0;
}

.sidebar header {
	background: var(--white);
	color: var(--white);
	width: 100%;
	display: block;
	padding: 0;
	text-align: center;
	position: relative;
	text-shadow: 2px 2px 3px var(--black);
}

.sidebar header img {
	height: 120px;
	background: var(--black);
}

.sidebar header div.user_identity{
	background-image: linear-gradient(
		to right,
		var(--green),
		var(--cyan)
	) !important;
	height: 40px;
	width: 100%;
	line-height: 40px;
	display: flex;
}

.sidebar header div.user_identity img#user_avatar{
	height: 36px;
	width: 36px;
	margin: 2px;
	background: none !important;
}

.sidebar header div.user_identity p#user_name{
	line-height: 40px;
	font-size: 1.4em;
	margin-left: 4px;
	color: #ffffff;
	text-shadow: none !important;
	flex-grow: 6;
}

.sidebar header div.user_identity img#user_inbox{
	height: 28px;
	width: 28px;
	margin: 6px;
	background: none !important;
}

.sidebar header div.user_identity span#user_messages{
	line-height: 40px;
}

.sidebar ul {
	list-style: none;
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
}

.sidebar ul li {
	margin-left: 0;
	padding-left: 0;
	display: inline-block;
	width: 100%;
}

.sidebar ul li > a {
	color: var(--white);
	font-size: var(--text_anchors);
	margin: 0.4em 0.4em 0 0.4em;
	font-family: "Raleway", sans-serif;
	font-weight: 300;
	height: 24px;
	/* background: #e439ab; */
	display: block;
	text-decoration: none;
	-webkit-transition: font-size 0.1s ease-in;
	-moz-transition: font-size 0.1s ease-in;
	-o-transition: font-size 0.1s ease-in;
	transition: font-size 0.1s ease-in;
}

.app_container{
	display: flex;
	flex-flow: row wrap;
}

.app_container > * {
	flex: 1 100%;
	display: flex;
	flex-flow: row wrap;
  }

.sect_topbar {
	height: 56px;
	padding: 8px;
	background-color: var(--white);
	visibility: visible;
	border-radius: 0 0 16px 16px;
	box-shadow: 0 4px 2px -2px gray;
}

.sect_topbar .app_info {
	display: flex;
	flex-flow: row wrap;
}

.sect_topbar .app_info img#app_icon{
	width: 40px;
	height: 40px;
	padding: 4px;
	margin: 4px;
	background: var(--purple);
	border-radius: 12px;
}

.sect_topbar .app_info p#app_section{
	height: 48px;
	line-height: 48px;
	margin: 4px;
	margin-left: 8px;
	font-size: var(--text_size_topbar);
	font-family: 'Kodschasan', sans-serif;
	font-weight: 500;
}

.sect_topbar .app_menu {
	display: flex;
	flex-flow: row wrap;
	flex: 8 0px;
}

.sect_topbar .app_user_data {
	display: flex;
	flex-flow: row wrap;
	height: 48px;
	line-height: 48px;
	margin: 4px;
	background: var(--light_gray);
	padding-left: 8px;
	border-radius: 12px;
}

.sect_topbar .app_user_data p#user_name{

	font-size: var(--text_size_topbar);
	font-family: 'Kodschasan', sans-serif;
	font-weight: 500;
	padding-left: 8px;
}

.sect_topbar .app_user_data img#user_icon{
	width: 32px;
	height: 32px;
	padding: 8px;

}

.sect_topbar .app_notifications img#notificacion_icon{
	width: 32px;
	height: 32px;
	padding: 8px;
	margin: 4px;
	background: var(--light_gray);
	border-radius: 12px;
}



.sect_sidebar {
	visibility: visible;
	flex: 1 0px;
	padding: 8px;
	flex-direction: column;
	padding-top: 24px !important;
}

.sect_sidebar .nav_item{
	background-color: #eaeaea;
	margin: 0px;
	padding: 0px;
	margin-bottom: 8px;
	margin-left: 4px;
	height: 48px;
	visibility: visible;
	border-radius: 12px;
}

.sect_sidebar .nav_item a{
	display: flex;
	flex: 1 0px;
	text-decoration: none;
}

.sect_sidebar .nav_item img{
	height: 36px;
	width: 36px;
	padding: 6px;
	border-radius: 12px;
}

.sect_sidebar .nav_item p{
	margin: 0px;
	display: inline-block;
	height: 36px;
	padding: 6px;
	line-height: 36px;
	font-size: 15px;
	font-family: 'Kodchasan', sans-serif;
	font-weight: 500;
	color: #474747;
}

.sect_sidebar .nav_item:hover{
	background-color: #dadada;
	color: var(--white);
}

.sect_content {
	visibility: visible;
	flex: 5 0px;
	padding: 8px;
}

.sect_content .box{
	width: -webkit-fill-available !important;
	padding: 1%;
}

.sect_content .box_header{
	display: flex;
	flex-flow: row wrap;
	width: -webkit-fill-available !important;
	padding-top: 8px;
	padding-bottom: 8px;
	height: 48px;
}

.sect_content .box_header .box_title{
	flex: 1 0px;
	line-height: 48px;
	height: 48px;
	margin-left: 16px;
	font-size: 32px;
	font-family: 'Jost', sans-serif;
	font-weight: 500;
}
.sect_content .box_header .box_space{
	flex: 2 0px;
	line-height: 32px;
	height: 48px;
}
.sect_content .box_header .box_menu{
	flex: 1 0px;
	display: flex;
	flex-flow: row wrap;
	line-height: 48px;
	height: 48px;
}

.separator{
	flex-grow:1;
}

.background_black{
	background-image: linear-gradient(
		to right,
		var(--black_dark),
		var(--black)
	) !important;
}

.background_white{
	background-image: linear-gradient(
		to right,
		var(--white),
		var(--white)
	) !important;
}

.background_gray{
	background-image: linear-gradient(
		to right,
		#dadada,
		#cacaca
	) !important;
}

.background_cyan_green{
	background-image: linear-gradient(
		to right,
		var(--cyan),
		var(--green)
	) !important;
}

.background_cyan{
	background-image: linear-gradient(
		to right,
		var(--cyan_light),
		var(--cyan)
	) !important;
}

.background_green{
	background-image: linear-gradient(
		to right,
		var(--green_light),
		var(--green)
	) !important;
}

.background_green_cyan{
	background-image: linear-gradient(
		to right,
		var(--green),
		var(--cyan)
	) !important;
}

.background_blue{
	background-image: linear-gradient(
		to right,
		var(--blue_light),
		var(--blue)
	) !important;
}

.background_red{
	background-image: linear-gradient(
		to right,
		var(--red_light),
		var(--red)
	) !important;
}

.background_purple{
	background-image: linear-gradient(
		to right,
		var(--purple_light),
		var(--purple)
	) !important;
}

/* BOTON DE LINEA SENCILLA CON UN ICONO PERSONALIZADO */
.button_icon{
	background-color: #eaeaea;
	margin: 0px;
	padding: 0px;
	margin-bottom: 8px;
	margin-left: 4px;
	height: 48px;
	visibility: visible;
	border-radius: 12px;
}

.button_icon a{
	display: flex !important;;
	flex: 1 0px !important;;
	text-decoration: none !important;
	border-radius: 12px;
}

.button_icon img{
	height: 40px;
	width: 40px;
	padding: 4px;
	margin-left: 8px;
}

.button_icon p{
	margin: 0px !important;;
	display: inline-block !important;
	height: 36px !important;;
	padding: 6px !important;;
	line-height: 36px !important;;
	font-size: 16px;
	font-family: 'Jost', sans-serif;
	font-weight: 900;
	color: var(--white);
	text-shadow: 1px 1px 3px var(--black);
	text-align: center;
}

.button_icon .nav_item:hover{
	background-color: #dadada;
	color: var(--white);
}

/* BOTON DE DOBLE LINEA CON UN ICONO PERSONALIZADO */
.button_icon_two_lines{
	background-color: #eaeaea;
	margin: 0px auto;
	
	padding: 0px;
	margin-bottom: 8px;
	margin-left: 4px;
	height: 48px;
	visibility: visible;
	border-radius: 12px;
}

.button_icon_two_lines a{
	display: flex !important;;
	flex: 1 0px !important;;
	text-decoration: none !important;
	border-radius: 12px;
}

.button_icon_two_lines img{
	height: 40px;
	width: 40px;
	padding: 4px;
	margin-left: 8px;
}

.button_icon_two_lines a div{
	width: -webkit-fill-available ;
}

.button_icon_two_lines p:first-child{
	margin: 0px !important;
	display: flex ;
	height: 16px !important;
	padding-top: 8px !important;
	padding-bottom: 0px !important;
	padding-left: 6px !important;
	padding-right: 6px !important;
	line-height: 14px !important;
	font-size: 1.1em;
	font-family: 'Jost', sans-serif;
	font-weight: 900;
	color: var(--white);
	text-shadow: 1px 1px 2px var(--black);
	text-align: center;
}

.button_icon_two_lines p:last-child{
	margin: 0px !important;
	display: flex ;
	height: 16px !important;
	padding-top: 2px !important;
	padding-bottom: 6px !important;
	padding-left: 6px !important;
	padding-right: 6px !important;
	line-height: 18px !important;
	font-size: 0.9empx;
	font-family: 'Jost', sans-serif;
	font-weight: 900;
	color: var(--white);
	text-shadow: 1px 1px 4px var(--black);
	text-align: center;
}

.button_icon_two_lines .nav_item:hover{
	background-color: #dadada;
	color: var(--white);
}

.button_new_green_cyan{
	background-image: linear-gradient(
		to right,
		var(--green),
		var(--cyan)
	) !important;
	font-family: "Jost", sans-serif;
	/* background: #e439ab; */
	text-decoration: none;
	-webkit-transition: font-size 0.1s ease-in;
	-moz-transition: font-size 0.1s ease-in;
	-o-transition: font-size 0.1s ease-in;
	transition: font-size 0.1s ease-in;
	border-radius: var(--round_small);
	color: var(--white);
	text-shadow: 1px 1px 3px var(--black);
	height: 48px !important;
	line-height: 48px !important;
	text-align: center;
	text-decoration: none;
	border: none;
	outline: none;
	border-radius: var(--round_medium);
	flex: 1 0px;
}

div.box div[class*="secondary_menu"] {
	display: grid;
	gap: 8px;
	grid-auto-rows: min-content;
}

div.box div.secondary_menu_8,
div.box div.secondary_menu_16 {
	display: grid;
	gap: 4px;
	grid-auto-rows: min-content;
}

div.border {
	border: var(--black) 1px solid;
}

.standar_height {
	line-height: var(--standar_height);
}

div.box div[class*="secondary_menu"] a {
	display: block;
	color: var(--white);
	font-size: var(--text_anchors);
	font-family: "Raleway", sans-serif;
	/* background: #e439ab; */
	text-decoration: none;
	-webkit-transition: font-size 0.1s ease-in;
	-moz-transition: font-size 0.1s ease-in;
	-o-transition: font-size 0.1s ease-in;
	transition: font-size 0.1s ease-in;
}

div.box div.list_menu {
	/* background: #e439ab; */
	text-decoration: none;
	-webkit-transition: font-size 0.1s ease-in;
	-moz-transition: font-size 0.1s ease-in;
	-o-transition: font-size 0.1s ease-in;
	transition: font-size 0.1s ease-in;
	display: grid;
	gap: var(--space_small);
	grid-auto-rows: auto;
}

div.box div.secondary_menu > a i {
	margin-left: 0.4em;
	margin-right: 0.4em;
}
.button {
	background: var(--black-light);
	/* background: #e439ab; */
	text-decoration: none;
	-webkit-transition: font-size 0.1s ease-in;
	-moz-transition: font-size 0.1s ease-in;
	-o-transition: font-size 0.1s ease-in;
	transition: font-size 0.1s ease-in;
	border-radius: var(--round_small);
	font-size: 16px;
	font-family: 'Jost', sans-serif;
	font-weight: 900;
	color: var(--white);
	text-shadow: 1px 1px 4px var(--black);
	width: 80%;
	height: var(--large_height);
	text-align: center;
	line-height: var(--large_height);
	text-decoration: none;
	border: none;
	outline: none;
}

.button_full {
	background: var(--black-light);
	font-size: 16px;
	font-family: 'Jost', sans-serif;
	font-weight: 900;
	color: var(--white);
	text-shadow: 1px 1px 4px var(--black);
	/* background: #e439ab; */
	text-decoration: none;
	-webkit-transition: font-size 0.1s ease-in;
	-moz-transition: font-size 0.1s ease-in;
	-o-transition: font-size 0.1s ease-in;
	transition: font-size 0.1s ease-in;

	width: 100%;
	height: var(--large_height);
	text-align: center;
	line-height: var(--large_height);
	text-decoration: none;
	border: none;
	outline: none;
	box-shadow: 3px 3px 5px var(--golden_dark_alt);
}

.button_short {
	background: var(--black-light);
	font-size: var(--text_anchors);
	font-family: "Raleway", sans-serif;
	/* background: #e439ab; */
	text-decoration: none;
	-webkit-transition: font-size 0.1s ease-in;
	-moz-transition: font-size 0.1s ease-in;
	-o-transition: font-size 0.1s ease-in;
	transition: font-size 0.1s ease-in;
	color: var(--white);
	text-shadow: 1px 1px 3px var(--black);
	width: 100%;
	height: 32px;
	text-align: center;
	line-height: 32px;
	text-decoration: none;
	border: none;
	outline: none;
	box-shadow: 3px 3px 5px var(--golden_dark_alt);
}

.break-column {
	flex-basis: 100%;
	width: 0;
  }

.round_bottom_left{
	border-bottom-left-radius: var(--round_small) ;
}

.round_bottom_right{
	border-bottom-right-radius: var(--round_small) ;
}

.round_bottom{
	border-bottom: var(--round_small) ;
	border-top: 0px;
}

.round_bottom{
	border-bottom-right-radius: var(--round_small);
	border-bottom-left-radius: var(--round_small);
}

.round_all{
	border-radius: 8px;
}

.round_small{
	border-radius: var(--round_small);
}

.button i,
button i {
	padding: 0 var(--space_small);
}

.button:hover,
button:hover {
	filter: brightness(110%);
}

.button_blue {
	background-image: linear-gradient(
		to right,
		var(--blue),
		var(--blue_light)
	) !important;
	border-radius: var(--round_small);
}

.button_cyan {
	background-image: linear-gradient(
		to right,
		var(--cyan),
		var(--cyan_light)
	) !important;
	border-radius: var(--round_small);
}

.button_cyan_green {
	background-image: linear-gradient(
		to right,
		var(--green),
		var(--cyan)
	) !important;
}

.button_green {
	background-image: linear-gradient(
		to right,
		var(--green),
		var(--green_light)
	) !important;
}

.button_red {
	background-image: linear-gradient(
		to right,
		var(--red),
		var(--red_light)
	) !important;
	border-radius: var(--round_small);
}

.button_purple {
	background-image: linear-gradient(
		to right,
		var(--purple),
		var(--purple_light)
	) !important;
	border-radius: var(--round_small);
}

.button_yellow {
	background-image: linear-gradient(
		to right,
		var(--yellow),
		var(--yellow_light)
	) !important;
	border-radius: var(--round_small);
}

.button_orange {
	background-image: linear-gradient(
		to right,
		var(--red),
		var(--orange)
	) !important;
	border-radius: var(--round_small);
}

.button_orange_red {
	background-image: linear-gradient(
		to right,
		var(--orange),
		var(--red)
	) !important;
}

.button_purple_black {
	background-image: linear-gradient(
		to right,
		var(--purple),
		var(--black-light)
	) !important;
}

.button_black {
	background-image: linear-gradient(
		to right,
		var(--black),
		var(--black-light)
	) !important;
	border-radius: var(--round_small);
}

.button_gray {
	background-image: linear-gradient(
		to right,
		var(--light_gray),
		var(--light_gray)
	) !important;
	border-radius: var(--round_small);
}

.button_golden {
	background-image: linear-gradient(
		to top,
		var(--golden_dark),
		var(--golden_light)
	) !important;
}

.button_no_background {
	background: none !important;
	background-image: none !important;
	border: none;
}

.box ul li{
	margin-left: 24px;
}

.sidebar ul li:hover > a {
	background-image: linear-gradient(
		to right,
		var(--green),
		var(--cyan)
	) !important;
	color: var(--white);
	font-size: var(--text_anchors);
	color: var(--light_gray);
	font-weight: 500;
	font-style: oblique;
	border-radius: var(--round_small);
	text-shadow: 1px 1px 3px var(--black);
	padding: 6px 0;;
}

.sidebar ul li:hover > a i {
	background: var(--green);
	color: var(--white);
	border-radius: var(--round_small);
	text-shadow: 1px 1px 3px var(--black);
}

.sidebar ul li i {
	font-size: 1.1em;
	padding: 0.15em;
	margin-right: 0.4em;
	color: var(--white);
}

.sidebar nav a i {
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
}

.notify-bubble {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 4px;
	background-color: var(--red);
	color: var(--white);
	font-size: 12px;
	border-radius: var(--round_small);
	font-family: "Roboto", sans-serif;
	font-weight: 800;
	height: 12px;
	line-height: 12px;
}

.messages-bubble {
	position: absolute;
	top: 8px;
	right: 64px;
	padding: 4px;
	background-color: var(--red);
	color: var(--white);
	font-size: 12px;
	border-radius: var(--round_small);
	font-family: "Roboto", sans-serif;
	font-weight: 800;
	height: 12px;
	line-height: 12px;
}

.notify-bubble-big {
	position: relative;
	top: -10px;
	left: -1px;
	padding: 2px 4px;
	background-color: var(--red);
	color: var(--white);
	font-size: 12px;
	border-radius: var(--round_small);
	font-family: "Roboto", sans-serif;
	font-weight: 500;
}

.content {
	position: fixed;
	width: 82%;
	margin-left: 16%;
	height: 97%;
	padding: 1%;
	top: 72px;
	overflow-y: scroll;
	background-color: #e0e0e0;

	visibility: visible;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	gap: var(--space_medium);
	margin-bottom: var(--space_large);
	grid-auto-rows: min-content;
}

.content_full {
	width: 98% !important;
	margin-left: 1% !important;
	margin-top: 1% !important;
	height: 98% !important;
	padding: 0 !important;
}

.monitor_element{
	background: #fafafa;
	font-size: 12px;
	font-family: "Raleway", sans-serif;
	/* background: #e439ab; */
	text-decoration: none;
	-webkit-transition: font-size 0.1s ease-in;
	-moz-transition: font-size 0.1s ease-in;
	-o-transition: font-size 0.1s ease-in;
	transition: font-size 0.1s ease-in;
	border-radius: var(--round_large);
	color: var(--white);
	text-shadow: 1px 1px 3px var(--black);
	height: 24px;
	margin:1px 0;
	text-align: center;
	line-height: var(--standar_height);
	text-decoration: none;
	border: none;
	outline: none;
	border-bottom: #c4c4c4 solid 1px;
}

.monitor_element{
	display: flex;
}

.monitor_element_number{
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	font-size: 14px;
	flex-grow: 1;
	flex-basis: 0;
	border-radius: var(--round_large);
	line-height: 24px;
	height: 24px;
	text-shadow: 1px 1px 4px var(--black);
}

.monitor_element_city{
	font-size: 10px;
	flex-grow: 5;
	flex-basis: 0;
	color: var(--black);
	text-shadow: none;
	text-align: left;
	padding-left: 8px;
	line-height: 26px;
	height: 24px;
}

.content .form_v2{
	margin: 0 200px;
	margin-top: 24px;
	vertical-align: middle;
	height: fit-content;
}

p.counter_container{
	background-color: #f6f6f6;
	box-shadow: 2px 2px 5px #b4b4b4;
	height: 24px;
	line-height: 24px;
	padding: 4px 4px;
	border-radius: 8px;
}
 p.counter_container span.counter{
	height: 24px;
	width: 40px;
	margin-right: 8px;
	line-height: 24px;
	background-image: linear-gradient(
		to right,
		var(--orange),
		var(--red)
	) !important;
	color: white;
	font-weight: 500;
	display: inline-block;
	text-align: center;
	border-radius: 8px;
 }

div.row3_card {
	display: flex;
	background-color: #f6f6f6;
	box-shadow: 2px 2px 5px #b4b4b4;
	min-height: 64px;
	height: auto;
	padding: 4px 4px;
	margin-right: 4px;
	margin-left: 4px;
	margin-bottom: 8px;
	border-radius: var(--round_small);
}

.no_shadow {
	background-color: none !important;
	box-shadow: none !important;
}

div.row3_card{
	margin-right: 4px;
}

div.row3_card div.icon_container {
	background: #e8e8e8;
	border-radius: var(--round_small);
	width: 64px;
	height: 64px;
}

div.row3_card img.avatar {
	padding: 8px;
	width: 48px;
	height: 48px;
}

div.row3_card div.info {
	flex-grow: 4;
}

div.row3_card div.info p{
	margin: 0px;
	padding: 0px 8px;
}

div.row3_card div.info p.card_row1{
	font-size: 1.1em;
	font-weight: bold;
	height: 18px;
	line-height: 18px;
	margin-top: 6px;
	
}

div.row3_card div.info p.card_row2{
	font-size: 0.9em;
	font-weight: bold;
	height: 18px;
	line-height: 18px;
}

div.row3_card div.info p.card_row3{
	font-size: 0.9em;
	min-height: 18px;
	height: auto;
	line-height: 18px;
}

div.row3_card div.actions {
	height: var(--card_height);
	margin: var(--card_margin_long);
	display: flex;
}

div.row3_card div.actions a{
	margin-left: 4px;
}

div.row3_card div.actions i.action {
	font-size: 20px;
	height: 20px;
	padding: 0;
	vertical-align: middle;
	line-height: 20px;
	color: var(--cyan);
}


div.row2_card {
	display: flex;
	background-color: #f6f6f6;
	box-shadow: 2px 2px 5px #b4b4b4;
	min-height: 46px;
	height: auto;
	padding: 4px 4px;
	margin-right: 2px;
	margin-left: 2px;
	margin-bottom: 4px;
	border-radius: var(--round_small);
}

div.row2_card{
	margin-right: 4px;
}

div.row2_card div.icon_container {
	background: #e8e8e8;
	border-radius: var(--round_small);
	width: 48px;
	height: 48px;
}

div.row2_card img.avatar {
	padding: 8px;
	width: 32px;
	height: 32px;
}

div.row2_card div.info {
	flex-grow: 4;
}

div.row2_card div.info p{
	margin: 0px;
	padding: 0px 8px;
}

div.row2_card div.info p.card_row1{
	font-size: 1.1em;
	font-weight: bold;
	height: 18px;
	line-height: 18px;
	margin-top: 4px;
	margin-bottom: 4px;
}

div.row2_card div.info p.card_row2{
	font-size: 1em;
	min-height: 18px;
	height: auto;
	line-height: 18px;
	margin-bottom: 4px;
}

div.row2_card div.actions {
	height: var(--card_height);
	margin: var(--card_margin_long);
	display: flex;
}

div.row2_card div.actions a{
	margin-left: 4px;
}

div.row2_card div.actions i.action {
	font-size: 20px;
	height: 20px;
	padding: 0;
	vertical-align: middle;
	line-height: 20px;
	color: var(--cyan);
}







div.row1_card {
	display: flex;
	background-color: #f6f6f6;
	box-shadow: 2px 2px 5px #b4b4b4;
	min-height: 28px;
	height: auto;
	padding: 4px;
	margin-right: 4px;
	margin-left: 4px;
	margin-bottom: 8px;
	border-radius: var(--round_small);
}

div.row1_card{
	margin-right: 4px;
}

div.row1_card div.icon_container {
	width: 100px;
	height: 32px;
}

div.icon_container p.material_code{
	border-radius: 16px 0 0 16px;
	color: var(--cyan);
	font-weight: 800;
	font-size: 1.1em;
	height: 32px;
	line-height: 32px;
}

div.row1_card div.quantity_container {
	width: 72px;
	height: 28px;
	border: var(--black) solid 2px;
	margin-left: 4px;
}

div.quantity_container p.quantity{
	border-radius: 16px 0 0 16px;
	color: var(--white);
	font-weight: 800;
	font-size: 1.1em;
	height: 30px;
	line-height: 30px;
}

div.row1_card img.avatar {
	padding: 4px;
	width: 24px;
	height: 24px;
}

div.row1_card div.info {
	flex-grow: 4;
	border-right: 1px solid var(--medium_gray);
	border-left: 1px solid var(--medium_gray);
	margin-right: 8px;
}

div.row1_card div.info p{
	margin: 0px;
	padding: 0px 8px;
}

div.row1_card div.info p.card_row1{
	font-size: 1.1em;
	font-weight: bold;
	height: 32px;
	line-height: 32px;	
}

div.row1_card div.actions {
	display: flex;
}

div.row1_card div.actions a{
	margin-left: 4px;
	height: 32px;
}

div.row1_card div.actions i.action {
	font-size: 20px;
	height: 32px;
	padding: 0;
	vertical-align: middle;
	line-height: 32px;
	color: var(--cyan);
}

div#form_new{
	transform: scaleY(0);
    transition: transform 0.5s;
	display: none;
}

div#form_new.mostrar{
	transform: scaleY(1);
    transition: transform 10s;
	display: block;
}

img.full_size {
	width: 100%;
}

a i span {
	font-size: 0.7em;
}

.content .box .box {
	margin-bottom: var(--space_medium);
}

.content_login {
	position: absolute;
	width: 600px;
	min-height: 240px;
	height: auto;
	margin: 0 auto;
	padding: 1%;
	top: 40%;
	left: 50%;
	margin-left: -310px;
	margin-top: -250px;
	background: var(--black);
	border-radius: var(--round_medium);
	padding: var(--space_large);
	box-shadow: 3px 3px 5px #909090;
	text-align: center;
	visibility: visible;
	display: grid;
	grid-template-columns: 1fr;
	margin-bottom: var(--space_large);
	grid-auto-rows: auto;
	overflow-y: hidden !important;
}

.login_error {
	position: absolute;
	width: 480px;
	height: 300px;
	margin-left: -240px;
	margin-top: -150px;
}

.content_login img.login_image {
	width: 160px;
	margin: 0 auto;
	margin-top: var(--space_small);
}

img.login_header {
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.input-icon{
	position: absolute;
	left: 3px;
	top: calc(22px - 0.5em); /* Keep icon in center of input, regardless of the input height */
	color: #474747;
	line-height: 40px;
	height: 40px;
  }

  .label_space .input-icon{
	top: calc(28px - 0.5em) !important;  /* Keep icon in center of input, regardless of the input height */
	color: #474747;
	line-height: 40px;
	height: 40px;
  }

  .input-wrapper p.form_label{
	margin-top: 4px;
	margin-left: 12px;
	font-weight: 500;
  }

  img.close_form{
	height: 32px !important;
	width: 32px !important;
	position: fixed;
	right: 8px;
	top: 8px;
  }

.content div.box {
	background: #f7f7f7;
	border-radius: var(--round_medium);
	padding: var(--space_large) var(--space_large);
	box-shadow: 3px 3px 5px #909090;
	vertical-align: middle;
}

.content div.box i span {
	font-family: "Roboto", sans-serif !important;
	font-weight: 500;
}

.content div.box > h1 {
	font-size: var(--text_box_titles);
	color: var(--black-light);
	border-bottom: var(--light_gray) 1px solid;
	text-align: center;
	color: var(--black);
}
.content div.box > h3 {
	color: var(--black-light);
	padding-bottom: var(--space_small);
	margin-bottom: var(--space_small);
	text-align: center;
	color: var(--black);
}

.content div.box p {
	text-align: justify;
}

form {
	margin: 0 auto;
	text-align: center;
	visibility: visible;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space_small);

	grid-auto-rows: min-content;
}

.box form input {
	font-family: "Roboto", sans-serif;
	font-weight: 300;
	font-size: var(--text_body);
	height: 44px;
	padding: 0 var(--space_extra);
	background: var(--white);
	border: var(--dark_gray) 2px solid;
	border-radius: var(--round_small);
	margin-bottom: var(--space_small);
	width: -webkit-fill-available;
}

 .editable {
	border: var(--purple) 2px solid !important;
}

.editable_error {
	border: var(--red) 2px solid !important;
}

.box form input::placeholder , .box form textarea::placeholder{ /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: gray;
	opacity: 1; /* Firefox */
	font-weight: 500;
  }

  ::-webkit-input-placeholder { /* Edge */
	color: gray;
	font-weight: 500;
  }
  
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: gray;
	font-weight: 500;
  }

.box form p.checkbox_title {
	height: var(--standar_height);
	line-height: var(--standar_height);
	margin-left: 16px;
	margin-right: 16px;
}

.box form p.checkbox_title input{
	display: inline-block;
	width: 16px;
}

::placeholder {
	/* Chrome, Firefox, Opera, Safari 10.1+ */
	color: rgb(66, 144, 252);
	opacity: 1; /* Firefox */
}

.box form textarea {
	font-family: "Roboto", sans-serif;
	font-weight: 300;
	font-size: var(--text_body);
	height: 120px;
	padding: var(--space_medium);
	background: var(--white);
	border: var(--black-light) 0px solid;
	border: 2px solid var(--purple);
	border-radius: var(--round_small);
	margin-bottom: var(--space_small);
	width: -webkit-fill-available;
	width: -;
}

form input.button {
	border: none !important;
	margin: 0 auto;
	font-family: "Roboto", sans-serif !important;
	font-weight: 800;
}

form select {
	height: 48px;
    line-height: 48px;
	border: 2px solid var(--purple);
    border-radius: 8px;
	padding: 0 var(--space_medium);
	background: var(--white);
	width: 100%;
}

form label {
	text-align: left;
	margin-left: var(--space_medium);
}

form .input-wrapper{
	text-align: left;

}

form .input-wrapper input, form .input-wrapper select, form .input-wrapper textarea{
	padding-left: 36px !important;
  }
  .input-wrapper{
	position: relative;
  }


form h4 {
	background-image: linear-gradient(
		to right,
		#dadada,
		#cacaca
		) !important;
	padding: 8px;
	margin-top: var(--space_small);
	line-height: 32px;
	height: 32px;
	border-radius: var(--round_small);
	font-size: 16px;
	font-family: 'Kodchasan', sans-serif;
}

div.form_error {
	padding: var(--space_medium);
	background-color: var(--blue);
	color: var(--white);
	text-shadow: 1px 1px 3px var(--black);
	text-align: center;
	border-radius: var(--round_small);
	margin-bottom: var(--space_small);
}

div.instructions {
	padding: var(--space_medium);
	background-color: var(--cyan);
	color: var(--white);
	text-align: center;
	border-radius: var(--round_medium);
}

div.instructions_orange {
	padding: var(--space_medium);
	background-color: var(--orange);
	color: var(--white);
	text-align: center;
	border-radius: var(--round_medium);
}

div.instructions_purple {
	padding: var(--space_medium);
	background-color: var(--purple);
	color: var(--white);
	text-align: center;
	border-radius: var(--round_medium);
}

div.instructions_black {
	padding: var(--space_medium);
	background-color: var(--black);
	color: var(--white);
	text-align: center;
	border-radius: var(--round_medium);
}

div.form_error h1 {
	font-size: var(--text_box_titles);
}

.content_login form input {
	margin-top: var(--space_small);
}

.icon_full_width {
	width: 100%;
	text-align: center;
	color: var(--white);
	background-image: linear-gradient(to right, var(--blue), var(--blue_light));
	padding: var(--space_small) 0;
	margin-bottom: var(--space_medium);
	/* text-shadow: 1px 1px 3px var(--black); */
}

.icon_action {
	font-size: var(--icon_button_text);
	text-align: center;
	color: var(--white);
	background-image: linear-gradient(to right, var(--blue), var(--blue_light));
	margin-left: var(--space_small);
	border-radius: var(--round_small);
	height: var(--icon_height);
	min-width: var(--icon_width);
	line-height: var(--icon_height) !important;
	text-shadow: 1px 1px 3px var(--black);
	vertical-align: middle;
	padding: var(--space_small);
}

.hidden {
	visibility: hidden !important;
}

.text_left {
	text-align: left;
}
.text_center {
	text-align: center !important;
}
.text_right {
	text-align: right !important;
}
.text_white {
	color: var(--white) !important;
}
.text_black {
	color: var(--black) !important;
}
.text_gray {
	color: var(--medium_gray) !important;
}
.text_red {
	color: var(--red) !important;
}
.text_orange {
	color: var(--orange) !important;
}
.text_cyan {
	color: var(--cyan) !important;
}
.text_green {
	color: var(--green) !important;
}
.text_purple {
	color: var(--purple) !important;
}
.no_border {
	border: none !important;
}

div.inventory_container{

}

div.inventory_container div.inventory_title{
	background: #efefef;
	font-weight: 500;
	display: flex;
}

div.inventory_container div.inventory_item{
	border-bottom: 1px solid #ededed;
	height: var(--standar_height);
	display: flex;
}

div.inventory_container div.inventory_item p, div.inventory_container div.inventory_item div{
	height: var(--standar_height);
	line-height: var(--standar_height);
	width: 0;
}

div.inventory_container div.inventory_item p{
	border: 1px solid #e4e4ee;
	padding: 0 4px;
	overflow-x: auto;
}

div.inventory_item p.inventory_barcode{ flex-grow: 3; text-align: center;}
div.inventory_item p.inventory_category{ flex-grow: 3; text-align: center;}
div.inventory_item p.inventory_brand{ flex-grow: 3; text-align: center;}
div.inventory_item p.inventory_description{ flex-grow: 8; }
div.inventory_item p.inventory_quantity{ flex-grow: 2; text-align: center;}
div.inventory_item p.inventory_no_quantity{ flex-grow: 2; text-align: center; background: #e4e4ee;}
div.inventory_item div.inventory_actions{ flex-grow: 2; text-align: center;}
div.inventory_item div.inventory_actions p{ text-align: center; width: 100%;}

div.inventory_container div.inventory_item div.inventory_actions a{
	height: 28px;
	width: 28px;
	display: inline-block;
}

form.search_bar{
	margin-bottom: 0 !important;
}

div.searchbar{
	display: flex;
}

div.searchbar input.searchbar_input{
	width: 88%;
	margin: 0 !important;
	border-radius: 8px 0 0 8px;
}

div.searchbar button.searchbar_button{
	width: 10%;
	margin: 0 !important;
	border-radius: 0 8px 8px 0;
	border: 1px solid #f9a315;
}

table {
	width: 100%;
}

table th,
table td {
	border-bottom: var(--light_gray) 1px solid;
	text-align: center;
	padding: var(--space_small) 0;
	line-height: 20px;
}

div#printableArea table td.no_border_bottom {
	border-bottom: var(--white) 1px solid !important;
}

div#printableArea table td.no_border_top {
	border-top: var(--white) 1px solid !important;
}

div#printableArea table td.no_border_bottom_top {
	border-bottom: var(--white) 1px solid !important;
	border-top: var(--white) 1px solid !important;
}

div#printableArea table td {
	border: var(--black) 1px solid !important;
	text-align: left;
	padding: var(--space_small) var(--space_medium);
}

div#printableArea table th {
	border: var(--black) 1px solid !important;
	text-align: left;
	padding: var(--space_small) var(--space_medium);
	background-color: var(--light_gray);
}

div#printableArea table.company_info td {
	border: none !important;
}

table.user_card {
	width: 400px;
	height: 220px;
	margin: 0 auto;
	background: #ffffff;
	border: #4b9ff6 solid 4px;
	border-radius: 8px;
}

table.user_card tr {
	border: 0 solid #ffffff !important;
}

table.user_card td {
	page-break-inside: avoid;
	border: none !important;
}

table.user_card h2 {
	font-size: 1.6em;
}

table.user_card h3 {
	font-size: 1.2em;
}

table.contract {
	border: #20242a 1px solid;
}

table.contract th {
	border: #20242a 1px solid;
	background-color: var(--light_gray);
	padding: var(--space_medium);
}

table.contract td {
	border: #20242a 1px solid;
	text-align: left;
	padding: var(--space_medium);
}


div.payment_item {
	padding: 4px;
	background: #f4f4f4 !important;
}

div.payment_item_paid {
	padding: 4px;
	background: #d4f9dc !important;
}

div.payment_item_debt {
	padding: 4px;
	background: #f9d3c9 !important;
}

div.payment_item_half {
	padding: 4px;
	background: #fbe8bc !important;
}

div.payment_item_promo {
	padding: 4px;
	background: #ecd9ff !important;
}

#mapCanvas {
	background: #ffffff;
	width: 100%;
	border-radius: 16px;
	box-shadow: #cdcdcd 2px 2px 10px;
	height: 600px;
	margin-top: 16px;
}

div.terminal_info {
	height: var(--standar_height);
}

div.terminal_info p {
	line-height: var(--standar_height);
}

.no_spacing {
	gap: 0px !important;
}

span.client_connected {
	height: var(--standar_height) !important;
	border: solid 1px var(--black-light);
	border-radius: var(--round_small);
	color: var(--blue);
	background: var(--blue);
	width: 100%;
	margin-bottom: var(--space_small);
}

span.client_empty {
	height: var(--standar_height) !important;
	border: solid 1px var(--black-light);
	border-radius: var(--round_small);
	color: var(--white);
	background: var(--white);
	width: 100%;
	margin-bottom: var(--space_small);
}

span.port_used {
	background: var(--cyan);
	text-align: center;
	color: var(--cyan);
	border-radius: 4px;
	padding: 0 4px;
	border: 1px solid black;
}

span.port_empty {
	background: var(--white);
	text-align: center;
	color: var(--white);
	border-radius: 4px;
	padding: 0 4px;
	border: 1px solid black;
}

div.rent_receipt_title {
	background-color: var(--black-light);
	width: 98%;
	padding: 1%;
	height: 32px;
	margin: 0 auto;
	border-radius: var(--round_medium) var(--round_medium) 0 0;
	border: var(--black-light) 1px solid;
}

div.rent_receipt_title h1 {
	text-align: center;
	color: var(--white);
	line-height: 32px;
}

div.rent_receipt p {
	font-size: 20px;
	line-height: 32px;
	margin: 0 8px;
}

div.rent_receipt h3 {
	font-size: 22px;
	line-height: 28px;
}

div.rent_receipt {
	background-color: var(--white);
	width: 98%;
	padding: 1%;
	min-height: 450px;
	margin: 0 auto;
	border-radius: 0 0 var(--round_medium) var(--round_medium);

	visibility: visible;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	gap: var(--space_medium);
	margin-bottom: var(--space_large);
	grid-auto-rows: min-content;
	border: var(--black-light) 3px solid;
}

div.rent_receipt {
	box-shadow: none;
	border: var(--black-light) 1px solid;
	height: 28px;
	line-height: 28px;
}

div.avatar {
	text-align: center;
}

div.avatar img {
	width: var(--avatar_width);
	height: var(--avatar_height);
	margin: 8px auto;
}


div.avatar_large {
	text-align: center;
}

div.avatar_large img {
	width: 132px;
	height: 132px;
	margin: 8px auto;
}

div.icon {
	text-align: center;
}

div.icon img {
	width: 48px;
	height: 48px;
	margin: 8px auto;
}

div.gray {
	background-color: #f4f4f4;
	padding: var(--card_margin_long);
	border-radius: var(--round_large);
	padding: 0 8px 8px 8px;
}

div.gray_alt {
	background-color: #eaeaea;
	padding: var(--card_margin_long);
	border-radius: 8px;
	padding: 0 8px 8px 8px;
}

div.white_box {
	background-color: #ffffff;
	padding: 8px;
	border-radius: 8px;
	box-shadow: 1px 1px 3px var(--black-light);
}

div.people_card {
	display: flex;
	background-color: #ffffff;
	box-shadow: 2px 2px 5px #b4b4b4;
	min-height: var(--card_height) !important;
	height: auto;
	padding: var(--card_margin_long);
	border-radius: var(--round_large);
}

div.people_card img.avatar {
	width: var(--card_height);
	height: var(--card_height);
	margin: var(--card_margin_long);
}

div.people_card div.info {
	flex-grow: 4;
}

div.people_card div.info p span.payment {
	width: 150px;
	height: 16px;
	line-height: 20px;
	padding: 2px 12px;
	background: var(--green);
	color: var(--white);
	border-radius: var(--round_small);
}

div.people_card div.info p span.date {
	min-width: 150px;
	height: 16px;
	line-height: 20px;
	padding: 2px 12px;
	background: var(--black);
	color: var(--white);
	border-radius: var(--round_small);
}

div.people_card div.info p span.debt {
	min-width: 150px;
	height: 16px;
	line-height: 20px;
	padding: 2px 12px;
	background: var(--red);
	color: var(--white);
	border-radius: var(--round_small);
}


div.people_card div.info p span.mac {
	min-width: 150px;
	height: 16px;
	line-height: 20px;
	padding: 2px 12px;
	background: var(--purple);
	color: var(--white);
	border-radius: var(--round_small);
}

div.people_card div.info p span.purple {
	min-width: 150px;
	height: 16px;
	line-height: 20px;
	padding: 2px 12px;
	background: var(--purple);
	color: var(--white);
	border-radius: var(--round_small);
}

div.people_card div.info p span.cyan {
	min-width: 150px;
	height: 16px;
	line-height: 20px;
	padding: 2px 12px;
	background: var(--);
	color: var(--white);
	border-radius: var(--round_small);
}

span.date {
	min-width: 150px;
	height: 16px;
	line-height: 20px;
	padding: 2px 12px;
	background: var(--black);
	color: var(--white);
	border-radius: var(--round_small);
}
span.amount {
	min-width: 150px;
	height: 16px;
	line-height: 20px;
	padding: 2px 12px;
	background: var(--green);
	color: var(--white);
	border-radius: var(--round_small);
}

span.discount {
	min-width: 150px;
	height: 16px;
	line-height: 20px;
	padding: 2px 12px;
	background: var(--red);
	color: var(--white);
	border-radius: var(--round_small);
}

span.total {
	min-width: 150px;
	height: 16px;
	line-height: 20px;
	padding: 2px 12px;
	background: var(--purple);
	color: var(--white);
	border-radius: var(--round_small);
}

span.count_cyan {
	min-width: 150px;
	height: 16px;
	line-height: 20px;
	padding: 2px 12px;
	background: var(--cyan);
	color: var(--white);
	border-radius: var(--round_small);
	font-weight: bold;
}
span.count_orange {
	min-width: 150px;
	height: 16px;
	line-height: 20px;
	padding: 2px 12px;
	background: var(--orange);
	color: var(--white);
	border-radius: var(--round_small);
	font-weight: bold;
}

span.count_purple {
	min-width: 150px;
	height: 16px;
	line-height: 20px;
	padding: 2px 12px;
	background: var(--purple);
	color: var(--white);
	border-radius: var(--round_small);
	font-weight: bold;
}

span.count_green {
	min-width: 150px;
	height: 16px;
	line-height: 20px;
	padding: 2px 12px;
	background: var(--green);
	color: var(--white);
	border-radius: var(--round_small);
	font-weight: bold;
}

span.count_red {
	min-width: 150px;
	height: 16px;
	line-height: 20px;
	padding: 2px 12px;
	background: var(--red);
	color: var(--white);
	border-radius: var(--round_small);
	font-weight: bold;
}

div.people_card div.actions {
	height: var(--card_height);
	margin: var(--card_margin_long);
}

div.people_card div.actions i.action {
	font-size: var(--card_info);
	height: var(--card_height);
	padding: 0 var(--card_margin);
	vertical-align: middle;
	line-height: var(--card_height);
	color: var(--cyan);
}

div.people_card div.actions i.action_red {
	font-size: 20px;
	height: var(--card_height);
	padding: 0 var(--card_margin);
	vertical-align: middle;
	line-height: var(--card_height);
	color: var(--red);
}

div.people_card div.actions i.action_green {
	font-size: 20px;
	height: var(--card_height);
	padding: 0 var(--card_margin);
	vertical-align: middle;
	line-height: var(--card_height);
	color: var(--green);
}

div.people_card div.actions i.action_purple {
	font-size: 20px;
	height: var(--card_height);
	padding: 0 var(--card_margin);
	vertical-align: middle;
	line-height: var(--card_height);
	color: var(--purple);
}

div.dashboard_icon {
	min-height: var(--card_height) !important;
	height: auto;
	padding: var(--card_margin_long);
	margin-bottom: var(--card_margin_long);
	border-radius: var(--round_large);
	text-align: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-position-x: center;
	background-position-y: center;
	background-color: none;
	background-color: rgba(0, 0, 0, 0.25);
	/*border: solid 1px white;*/
}

div.dashboard_icon img.avatar {
	width: 64px;
	height: 64px;
	margin: 0 auto;
}

div.dashboard_icon div.info {
	margin: var(--space_small);
}

div.dashboard_icon div.info p {
	margin: 0;
	line-height: 16px;
	padding-top: var(--card_margin);
	font-size: 12px;
	font-weight: bold;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	color: white;
}

div.dashboard_icon div.info p.number {
	margin: 0;
	line-height: 48px;
	padding-top: var(--card_margin);
	font-size: 3em;
	font-weight: bold;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	color: white;
}

div.dashboard_card {
	min-height: var(--card_height) !important;
	height: auto;
	padding: var(--card_margin_long);
	margin-bottom: var(--card_margin_long);
	border-radius: var(--round_large);
	text-align: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-position-x: center;
	background-position-y: center;
	background-color: none;
	background-color: rgba(0, 0, 0, 0.2);
	/*border: solid 1px white;*/
}

div.dashboard_card img.avatar {
	width: 72px;
	height: 72px;
	margin: 0 auto;
}

div.dashboard_card div.info {
	margin: var(--space_small);
}

div.dashboard_card div.info p:first-child {
	margin: 0;
	line-height: 24px;
	padding-top: var(--card_margin);
	font-size: 16px;
	font-weight: bold;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	color: white;
}

div.dashboard_card div.info {
	flex-grow: 4;
}

div.info p span.detail {
	height: var(--card_info);
	line-height: 20px;
	padding: var(--card_margin) 0;

	padding-right: 4px;
	margin-right: 4px;
	border-radius: 4px;
	font-size: 14px;
	color: var(--black-light);
}

div.info p span.detail img {
	height: 16px;
	width: 16px;
	margin: 0 2px;
	margin-top: -1px;
	line-height: 16px;
	display: inline-block;
	vertical-align: middle;
}

div.info p span.detail_client {
	height: var(--card_info);
	line-height: 24px;
	padding: var(--card_margin) 0;

	padding-right: 8px;
	margin-right: 8px;
	border-radius: 4px;
	font-size: 16px;
	color: var(--black-light);
	font-weight: 400;
}

div.info p span.detail_client img {
	height: 24px;
	width: 24px;
	margin: 0;
	margin-top: -1px;
	margin-right: 8px;
	line-height: 24px;
	display: inline-block;
	vertical-align: middle;
}

div.list_double {
	display: flex;
	background-color: #f4f4f4;
	height: var(--card_height) !important;
	padding: var(--card_margin_long);
	margin-bottom: var(--card_margin_long);
	border-radius: var(--round_large);
}

div.list_double img.avatar {
	width: var(--card_height);
	height: var(--card_height);
	margin: 0 var(--card_margin_long);
}

div.list_double div.info {
	flex-grow: 4;
}

div.list_double div.info p span.amount {
	width: 150px;
	height: 16px;
	line-height: 20px;
	padding: 2px 12px;
	background: var(--red);
	color: var(--white);
	border-radius: var(--round_small);
}

div.list_double div.info p span.paid {
	width: 150px;
	height: 16px;
	line-height: 20px;
	padding: 2px 12px;
	background: var(--cyan);
	color: var(--white);
	border-radius: var(--round_small);
}

div.list_double div.info p span.date {
	width: 150px;
	height: 16px;
	line-height: 20px;
	padding: 2px 12px;
	background: var(--black);
	color: var(--white);
	border-radius: var(--round_small);
}

div.list_double div.info p:first-child {
	height: var(--card_info);
	margin: 0;
	line-height: 24px;
	padding-top: var(--card_margin);
	font-size: 16px;
	font-weight: bold;
}

div.list_double div.info p:last-child {
	height: var(--card_info);
	margin: 0;
	line-height: 24px;
	padding-bottom: var(--card_margin);
	font-size: 14px;
}

div.report_card {
	display: flex;
	background-color: #f4f4f4;
	min-height: 48px !important;
	height: auto;
	padding: var(--card_margin_long);
	margin-bottom: var(--card_margin_long);
	border-radius: var(--round_large);
}

div.report_card img.avatar {
	height: 48px;
	margin: 12px var(--card_margin_long);
}

div.report_card div.info {
	flex-grow: 4;
}

div.report_card div.info p span.technic,
div.people_card div.info p span.technic {
	width: 150px;
	height: 20px;
	line-height: 20px;
	padding: 2px 12px;
	background: var(--cyan);
	color: var(--white);
	border-radius: var(--round_small);
}

div.report_card div.info p span.client {
	width: 150px;
	height: 16px;
	line-height: 20px;
	padding: 2px 12px;
	background: var(--purple);
	color: var(--white);
	border-radius: var(--round_small);
}

div.report_card div.info p span.critical,
div.people_card div.info p span.critical {
	width: 150px;
	height: 16px;
	line-height: 20px;
	padding: 2px 12px;
	background: var(--red);
	color: var(--white);
	border-radius: var(--round_small);
}

div.report_card div.info p span.high,
div.people_card div.info p span.high {
	min-width: 150px;
	height: 16px;
	line-height: 20px;
	padding: 2px 12px;
	background: var(--orange);
	color: var(--white);
	border-radius: var(--round_small);
}

div.report_card div.info p span.medium,
div.people_card div.info p span.medium {
	min-width: 150px;
	height: 16px;
	line-height: 20px;
	padding: 2px 12px;
	background: var(--yellow);
	color: var(--white);
	border-radius: var(--round_small);
}

div.report_card div.info p span.low,
div.people_card div.info p span.low {
	min-width: 150px;
	height: 16px;
	line-height: 20px;
	padding: 2px 12px;
	background: var(--green);
	color: var(--white);
	border-radius: var(--round_small);
}

div.report_card div.info p span.data {
	min-width: 150px;
	height: 16px;
	line-height: 20px;
	padding: 2px 12px;
	background: var(--black);
	color: var(--white);
	border-radius: var(--round_small);
}

div.report_card div.info p {
	min-height: 22px;
	margin: 0;
	line-height: 22px;
	padding-top: var(--card_margin);
	font-size: 14px;
}

div.report_card div.info p:first-child {
	height: var(--card_info);
	margin: 0;
	line-height: 24px;
	padding-top: var(--card_margin);
	font-size: 14px;
	font-weight: bold;
}

div.report_card div.info p:last-child {
	min-height: 24px;
	height: auto;
	margin: 0;
	line-height: 20px;
	font-size: 14px;
	padding-bottom: 4px;
}

div.report_card div.actions {
	height: var(--card_height);
	margin: 0 var(--card_margin_long);
}

div.report_card div.actions i.action {
	font-size: var(--card_info);
	height: var(--card_height);
	padding: 0 var(--card_margin);
	vertical-align: middle;
	line-height: var(--card_height);
	color: var(--cyan);
}

div.report_card div.actions i.action_red {
	font-size: 20px;
	height: var(--card_height);
	padding: 0 var(--card_margin);
	vertical-align: middle;
	line-height: var(--card_height);
	color: var(--red);
}

div.report_card div.actions i.action_green {
	font-size: 20px;
	height: var(--card_height);
	padding: 0 var(--card_margin);
	vertical-align: middle;
	line-height: var(--card_height);
	color: var(--green);
}

span.salary_red {
	font-size: 20px;
	height: var(--card_height);
	padding: 0 var(--card_margin);
	vertical-align: middle;
	line-height: var(--card_height);
	color: var(--red);
}

span.salary_green {
	font-size: 20px;
	height: var(--card_height);
	padding: 0 var(--card_margin);
	vertical-align: middle;
	line-height: var(--card_height);
	color: var(--green);
}

div.menu_details {
	line-height: var(--small_height);
}

div.menu_details i.menu_item {
	line-height: var(--small_height);
	margin: 0 var(--space_medium);
}
body div.dashboard_background {
	background: none !important;
	background-color: transparent;
	background-image: url("../../images/dashboard/mountain.jpg") !important;
	background-size: 100% 100% !important;
	height: -webkit-fill-available;
}

body div.dashboard_background_zaren {
	background: none !important;
	background-color: transparent;
	background-image: url("../../images/dashboard/abstract.jpg") !important;
	background-size: 100% 100% !important;
	height: -webkit-fill-available;
}

#printableArea div.full {
	grid-column: 1/7 !important;
}
#printableArea div.grid_12 {
	grid-column: 1/2 !important;
}
#printableArea div.grid_23 {
	grid-column: 2/3 !important;
}
#printableArea div.grid_34 {
	grid-column: 3/4 !important;
}
#printableArea div.grid_45 {
	grid-column: 4/5 !important;
}
#printableArea div.grid_56 {
	grid-column: 5/6 !important;
}
#printableArea div.grid_67 {
	grid-column: 6/7 !important;
}
#printableArea div.grid_13 {
	grid-column: 1/3 !important;
}
#printableArea div.grid_24 {
	grid-column: 2/4 !important;
}
#printableArea div.grid_35 {
	grid-column: 3/5 !important;
}
#printableArea div.grid_46 {
	grid-column: 4/6 !important;
}
#printableArea div.grid_57 {
	grid-column: 5/7 !important;
}
#printableArea div.grid_14 {
	grid-column: 1/4 !important;
}
#printableArea div.grid_25 {
	grid-column: 2/5 !important;
}
#printableArea div.grid_36 {
	grid-column: 3/6 !important;
}
#printableArea div.grid_47 {
	grid-column: 4/7 !important;
}
#printableArea div.grid_15 {
	grid-column: 1/5 !important;
}
#printableArea div.grid_26 {
	grid-column: 2/6 !important;
}
#printableArea div.grid_37 {
	grid-column: 3/7 !important;
}
#printableArea div.grid_16 {
	grid-column: 1/6 !important;
}
#printableArea div.grid_27 {
	grid-column: 2/7 !important;
}

div#printableArea div.secondary_menu_1 {
	grid-template-columns: repeat(1, 1fr) !important;
}
div#printableArea div.secondary_menu_2 {
	grid-template-columns: repeat(2, 1fr) !important;
}
div#printableArea div.secondary_menu_3 {
	grid-template-columns: repeat(3, 1fr) !important;
}
div#printableArea div.secondary_menu_4 {
	grid-template-columns: repeat(4, 1fr) !important;
}
div#printableArea div.secondary_menu_5 {
	grid-template-columns: repeat(5, 1fr) !important;
}
div#printableArea div.secondary_menu_6 {
	grid-template-columns: repeat(6, 1fr) !important;
}
div#printableArea div.secondary_menu_7 {
	grid-template-columns: repeat(7, 1fr) !important;
}
div#printableArea div.secondary_menu_8 {
	grid-template-columns: repeat(8, 1fr) !important;
}
div#printableArea div.secondary_menu_16 {
	grid-template-columns: repeat(16, 1fr) !important;
}

div.recibo_de_pago {
	border: 1px var(--purple) solid;
	padding: 4px;
	border-radius: 8px;
	padding: 8px;
}

div.recibo_cliente {
	border: 1px var(--cyan) solid;
	padding: 4px;
	border-radius: 8px;
	padding: 8px;
}

div.recibo_de_pago h1 {
	font-size: 24px;
	margin: 4px;
	padding: 0;
}

div.recibo_de_pago p {
	margin: 0;
	padding: 0;
}

div.recibo_de_pago p.title {
	font-weight: 500;
	font-size: 10px;
	vertical-align: bottom;
	margin-left: 12px;
}

div.recibo_de_pago div.elemento {
	display: flex;
	flex-flow: row wrap;
}

div.recibo_de_pago div.elemento {
	display: flex;
	flex-flow: row wrap;
	gap: 8px;
}

div.recibo_de_pago .flex_0 {
	flex-grow: 0;
}
div.recibo_de_pago .flex_1 {
	flex-grow: 1;
}
div.recibo_de_pago .flex_2 {
	flex-grow: 2;
}
div.recibo_de_pago .flex_3 {
	flex-grow: 3;
}
div.recibo_de_pago .flex_4 {
	flex-grow: 4;
}
div.recibo_de_pago .flex_5 {
	flex-grow: 5;
}
div.recibo_de_pago .flex_6 {
	flex-grow: 6;
}

div.recibo_de_pago input {
	font-family: "Roboto", sans-serif;
	font-weight: 300;
	height: 20px;
	background: var(--white);
	border: var(--black-light) 1px solid;
	border-radius: var(--round_small);
	width: -webkit-fill-available;
}

div.plans_container form {
	margin-bottom: 0px !important;
}

div.plans_container form select {
	border: 1px solid green;
	border-radius: 8px;
	font-size: 12px;
    height: 24px;
    margin-top: -8px;
}

.content div.box p.report_detail{
	font-size: 16px !important;
}

.content div.box div.secondary_menu a.button{
	font-size: 16px !important;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: auto;
  min-height: 236px;
  height: auto;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #ffffff;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: #ffffff;
  color: white;
  transform: rotateY(180deg);
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-device-width: 320px) and (max-device-width: 768px) {
	:root {
		--white: #ffffff;
		--light_gray: #ededed;
		--dark_gray: #dcdcdc;
		--black: #20242a;
		--black-light: #474747;
		--purple: #9a2bcb;
		--purple_light: #d462ce;
		--yellow: #f2fe46;
		--yellow_light: #f9fea5;
		--green: #7bca20;
		--green_light: #9be45f;
		--cyan: #4dccab;
		--cyan_light: #6fe5c7;
		--blue: #4290fc;
		--blue_light: #75e5fd;
		--red: #ff1919;
		--red_light: #fd3939;
		--orange: #f9a315;
		--orange_light: #fdbc53;

		--space_small: 8px;
		--space_medium: 16px;
		--space_large: 24px;
		--space_extra: 32px;

		--text_body: 30px;
		--text_anchors: 28px;
		--text_box_titles: 32px;
		--text_title1: 28px;
		--text_title2: 27px;
		--text_title3: 26px;
		--text_title4: 25px;
		--text_title5: 24px;
		--text_title6: 23px;
		--icon_size_small: 20px;

		--round_small: 8px;
		--round_medium: 16px;
		--round_large: 24px;

		--standar_height: 32px;
		--icon_width: 32px;
		--icon_height: 32px;
		--icon_button_text: 16px;
	}

	.content {
		position: fixed;
		width: 92%;
		margin-left: 2%;
		margin-top: 120px;
		height: 97%;
		padding: 1%;
		top: 32px;
		visibility: visible;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		gap: var(--space_medium);
		margin-bottom: var(--space_large);
		grid-auto-rows: min-content;
	}

	.sidebar {
		visibility: hidden;
	}

	.hidden_menu {
		background-color: var(--black);
		top: 0;
		height: 120px;
		width: 100%;
		border: #000 2px solid;
		visibility: visible;
	}

	.hidden_menu h1 {
		font-size: 64px;
		line-height: 120px;
		color: var(--white);
	}

	div.box div.secondary_menu_1 {
		grid-template-columns: repeat(1, 1fr) !important;
	}
	div.box div.secondary_menu_2 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	div.box div.secondary_menu_3 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	div.box div.secondary_menu_4 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	div.box div.secondary_menu_5 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	div.box div.secondary_menu_6 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	div.box div.secondary_menu_7 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	div.box div.secondary_menu_8 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	div.box div.secondary_menu_16 {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.content div.full {
		grid-column: 1/7;
	}
	.content div.grid_12 {
		grid-column: 1/7;
	}
	.content div.grid_23 {
		grid-column: 1/7;
	}
	.content div.grid_34 {
		grid-column: 1/7;
	}
	.content div.grid_45 {
		grid-column: 1/7;
	}
	.content div.grid_56 {
		grid-column: 1/7;
	}
	.content div.grid_67 {
		grid-column: 1/7;
	}
	.content div.grid_13 {
		grid-column: 1/7;
	}
	.content div.grid_24 {
		grid-column: 1/7;
	}
	.content div.grid_35 {
		grid-column: 1/7;
	}
	.content div.grid_46 {
		grid-column: 1/7;
	}
	.content div.grid_57 {
		grid-column: 1/7;
	}
	.content div.grid_14 {
		grid-column: 1/7;
	}
	.content div.grid_25 {
		grid-column: 1/7;
	}
	.content div.grid_36 {
		grid-column: 1/7;
	}
	.content div.grid_47 {
		grid-column: 1/7;
	}
	.content div.grid_15 {
		grid-column: 1/7;
	}
	.content div.grid_26 {
		grid-column: 1/7;
	}
	.content div.grid_37 {
		grid-column: 1/7;
	}
	.content div.grid_16 {
		grid-column: 1/7;
	}
	.content div.grid_27 {
		grid-column: 1/7;
	}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
	.sidebar {
		background-color: var(--black);
	}

	div.box div.secondary_menu_1 {
		grid-template-columns: repeat(1, 1fr);
	}
	div.box div.secondary_menu_2 {
		grid-template-columns: repeat(2, 1fr);
	}
	div.box div.secondary_menu_3 {
		grid-template-columns: repeat(3, 1fr);
	}
	div.box div.secondary_menu_4 {
		grid-template-columns: repeat(4, 1fr);
	}
	div.box div.secondary_menu_5 {
		grid-template-columns: repeat(5, 1fr);
	}
	div.box div.secondary_menu_6 {
		grid-template-columns: repeat(6, 1fr);
	}
	div.box div.secondary_menu_7 {
		grid-template-columns: repeat(7, 1fr);
	}
	div.box div.secondary_menu_8 {
		grid-template-columns: repeat(8, 1fr);
	}
	div.box div.secondary_menu_16 {
		grid-template-columns: repeat(16, 1fr);
	}

	.content div.full {
		grid-column: 1/7;
	}
	.content div.grid_12 {
		grid-column: 1/7;
	}
	.content div.grid_23 {
		grid-column: 1/7;
	}
	.content div.grid_34 {
		grid-column: 1/7;
	}
	.content div.grid_45 {
		grid-column: 1/7;
	}
	.content div.grid_56 {
		grid-column: 1/7;
	}
	.content div.grid_67 {
		grid-column: 1/7;
	}
	.content div.grid_13 {
		grid-column: 1/7;
	}
	.content div.grid_24 {
		grid-column: 1/7;
	}
	.content div.grid_35 {
		grid-column: 1/7;
	}
	.content div.grid_46 {
		grid-column: 1/7;
	}
	.content div.grid_57 {
		grid-column: 1/7;
	}
	.content div.grid_14 {
		grid-column: 1/7;
	}
	.content div.grid_25 {
		grid-column: 1/7;
	}
	.content div.grid_36 {
		grid-column: 1/7;
	}
	.content div.grid_47 {
		grid-column: 1/7;
	}
	.content div.grid_15 {
		grid-column: 1/7;
	}
	.content div.grid_26 {
		grid-column: 1/7;
	}
	.content div.grid_37 {
		grid-column: 1/7;
	}
	.content div.grid_16 {
		grid-column: 1/7;
	}
	.content div.grid_27 {
		grid-column: 1/7;
	}
}

@media only screen and (min-width: 1025px) and (max-width: 1280px) {
	.sidebar {
		background-color: var(--black);
	}

	.content div.full {
		grid-column: 1/7;
	}
	.content div.grid_12 {
		grid-column: 1/2;
	}
	.content div.grid_23 {
		grid-column: 2/3;
	}
	.content div.grid_34 {
		grid-column: 3/4;
	}
	.content div.grid_45 {
		grid-column: 4/5;
	}
	.content div.grid_56 {
		grid-column: 5/6;
	}
	.content div.grid_67 {
		grid-column: 6/7;
	}
	.content div.grid_13 {
		grid-column: 1/3;
	}
	.content div.grid_24 {
		grid-column: 2/4;
	}
	.content div.grid_35 {
		grid-column: 3/5;
	}
	.content div.grid_46 {
		grid-column: 4/6;
	}
	.content div.grid_57 {
		grid-column: 5/7;
	}
	.content div.grid_14 {
		grid-column: 1/4;
	}
	.content div.grid_25 {
		grid-column: 2/5;
	}
	.content div.grid_36 {
		grid-column: 3/6;
	}
	.content div.grid_47 {
		grid-column: 4/7;
	}
	.content div.grid_15 {
		grid-column: 1/5;
	}
	.content div.grid_26 {
		grid-column: 2/6;
	}
	.content div.grid_37 {
		grid-column: 3/7;
	}
	.content div.grid_16 {
		grid-column: 1/6;
	}
	.content div.grid_27 {
		grid-column: 2/7;
	}

	div.box div.secondary_menu_1 {
		grid-template-columns: repeat(1, 1fr);
	}
	div.box div.secondary_menu_2 {
		grid-template-columns: repeat(2, 1fr);
	}
	div.box div.secondary_menu_3 {
		grid-template-columns: repeat(3, 1fr);
	}
	div.box div.secondary_menu_4 {
		grid-template-columns: repeat(4, 1fr);
	}
	div.box div.secondary_menu_5 {
		grid-template-columns: repeat(5, 1fr);
	}
	div.box div.secondary_menu_6 {
		grid-template-columns: repeat(6, 1fr);
	}
	div.box div.secondary_menu_7 {
		grid-template-columns: repeat(7, 1fr);
	}
	div.box div.secondary_menu_8 {
		grid-template-columns: repeat(8, 1fr);
	}
	div.box div.secondary_menu_16 {
		grid-template-columns: repeat(16, 1fr);
	}
}

@media only screen and (min-width: 1281px) {
	:root {
		--space_small: 6px;
		--space_medium: 10px;
		--space_large: 14px;
		--space_extra: 18px;

		--text_body: 14px;
		--text_anchors: 14px;
		--text_box_titles: 16px;
		--text_title1: 18px;
		--text_title2: 17.5px;
		--text_title3: 17px;
		--text_title4: 16.5px;
		--text_title5: 16px;
		--text_title6: 15px;
		--icon_size_small: 12px;

		--round_small: 6px;
		--round_medium: 10px;
		--round_large: 14px;

		--standar_height: 32px;
		--icon_width: 32px;
		--icon_height: 32px;
		--icon_button_text: 16px;
	}

	.content {
		position: fixed;
		width: 78%;
		margin-left: 20%;
		height: 97%;
		padding: 1%;
		top: 0;

		visibility: visible;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		gap: var(--space_medium);
		margin-bottom: var(--space_large);
		grid-auto-rows: min-content;
	}

	.sidebar {
		position: fixed;
		width: 20%;
		height: 100%;
		background-color: var(--black);
	}

	.content div.full {
		grid-column: 1/7;
	}
	.content div.grid_12 {
		grid-column: 1/2;
	}
	.content div.grid_23 {
		grid-column: 2/3;
	}
	.content div.grid_34 {
		grid-column: 3/4;
	}
	.content div.grid_45 {
		grid-column: 4/5;
	}
	.content div.grid_56 {
		grid-column: 5/6;
	}
	.content div.grid_67 {
		grid-column: 6/7;
	}
	.content div.grid_13 {
		grid-column: 1/3;
	}
	.content div.grid_24 {
		grid-column: 2/4;
	}
	.content div.grid_35 {
		grid-column: 3/5;
	}
	.content div.grid_46 {
		grid-column: 4/6;
	}
	.content div.grid_57 {
		grid-column: 5/7;
	}
	.content div.grid_14 {
		grid-column: 1/4;
	}
	.content div.grid_25 {
		grid-column: 2/5;
	}
	.content div.grid_36 {
		grid-column: 3/6;
	}
	.content div.grid_47 {
		grid-column: 4/7;
	}
	.content div.grid_15 {
		grid-column: 1/5;
	}
	.content div.grid_26 {
		grid-column: 2/6;
	}
	.content div.grid_37 {
		grid-column: 3/7;
	}
	.content div.grid_16 {
		grid-column: 1/6;
	}
	.content div.grid_27 {
		grid-column: 2/7;
	}

	div.box div.secondary_menu_1 {
		grid-template-columns: repeat(1, 1fr);
	}
	div.box div.secondary_menu_2 {
		grid-template-columns: repeat(2, 1fr);
	}
	div.box div.secondary_menu_3 {
		grid-template-columns: repeat(3, 1fr);
	}
	div.box div.secondary_menu_4 {
		grid-template-columns: repeat(4, 1fr);
	}
	div.box div.secondary_menu_5 {
		grid-template-columns: repeat(5, 1fr);
	}
	div.box div.secondary_menu_6 {
		grid-template-columns: repeat(6, 1fr);
	}
	div.box div.secondary_menu_7 {
		grid-template-columns: repeat(7, 1fr);
	}
	div.box div.secondary_menu_8 {
		grid-template-columns: repeat(8, 1fr);
	}
	div.box div.secondary_menu_16 {
		grid-template-columns: repeat(16, 1fr);
	}
}

@media print {
	/* Contenido del fichero print.css */
	:root {
		--space_small: 6px;
		--space_medium: 10px;
		--space_large: 14px;
		--space_extra: 18px;

		--text_body: 14px;
		--text_anchors: 16px;
		--text_box_titles: 18px;
		--text_title1: 18px;
		--text_title2: 17.5px;
		--text_title3: 17px;
		--text_title4: 16.5px;
		--text_title5: 16px;
		--text_title6: 15px;
		--icon_size_small: 12px;

		--round_small: 6px;
		--round_medium: 10px;
		--round_large: 14px;

		--standar_height: 32px;
		--icon_width: 32px;
		--icon_height: 32px;
		--icon_button_text: 16px;
	}

	div.hidden_printable {
		display: none !important;
		visibility:hidden !important;
	}
	

	#mapCanvas {
		visibility: hidden !important;
	}

	* {
		overflow: visible !important;
	}
	#printableArea {
		page-break-after: always;
	}

	body aside {
		visibility: visible !important;
	}

	body * {
		visibility: hidden !important;
	}

	#printableArea,
	#printableArea * {
		visibility: visible !important;
	}
	#printableArea {
		left: 0px;
		top: 0px;
		position: absolute !important;
		width: 98%;
		margin-left: 1%;
	}
	p {
		page-break-before: always;
	}

	table {
		table-layout: fixed;
	}

	hr {
		height: 0;
		border: 0;
		border-top: 2px dashed var(--black);
	}

	.content {
		background-color: #ffffff;
		overflow: visible;
		position: absolute !important;
	}

	div#printableArea {
		font-family: "Roboto", sans-serif;
		font-weight: 300;
		background-color: #ffffff;
		overflow: visible;
		page-break-inside: avoid;
		page-break-before: always;
	}

	div#printableArea div.company_info h1 {
		font-size: 18px;
	}

	div#printableArea div.company_info p {
		font-size: 10px;
	}

	div.company_info h1 {
		font-size: 16px;
		margin: 10px 0;
		font-family: "Raleway", sans-serif;
		font-weight: 500;
	}


	table.contract h1 {
		font-size: 16px;
		margin: 2px 0;
		text-align: center;
		font-family: "Raleway", sans-serif;
		font-weight: 700;
		background-color: #dcdcdc;
	}

	div#printableArea p.hidden{
		visibility:collapse;
		margin: 0;
		padding: 0;
		display: none;
	}

	div#printableArea table p{
		font-size: 12px !important;
	}

	div#printableArea table td,
	div#printableArea table tr,
	div#printableArea table th,
	div#printableArea table {
		font-size: 10px;
		padding: 2px 8px;
		border: solid 1px var(--black) !important;
		background-color: #ffffff;
	}

	div#printableArea table td,
	div#printableArea table tr,
	div#printableArea table th{
		page-break-inside: avoid;
	}

	div#printableArea div.report_container{
		border: solid 1px var(--black) !important;
		padding-top: 8px;
		margin-bottom: 8px;
		page-break-inside: avoid;
	}

	div#printableArea table td.clausules p {
		line-height: 12px;
		font-size: 9px;
	}

	div#printableArea div.people_card {
		margin: 0;
		padding: 0;
	}

	div#printableArea div.people_card img.avatar{
		height: 24px !important;
		width: 24px !important;
		margin: 4px 8px;
		padding: 0;
	}

	div.people_card div.info p:first-child {
		height: 14px !important;
		line-height: 12px !important;
		font-size: 10px !important;
		font-weight: bold;
		margin-top: 0;
		margin-bottom: 0;
		padding-top: 0;
		padding-bottom: 0;
	}

	div.people_card div.info p {
		height: 14px !important;
		line-height: 14px !important;
		font-size: 10px !important;
		font-weight: none;
		margin-top: 0;
		margin-bottom: 0;
		padding-top: 0;
		padding-bottom: 0;
	}

	div.people_card div.info {
		padding-right: 8px;
	}

	div#printableArea table th {
		background-color: #b4b4b4 !important;
		text-align: center;
	}

	div#printableArea table th.title {
		font-size: 14px;
	}

	div#printableArea table td {
		font-size: 10px;
		padding: 2px 8px;
		page-break-inside: avoid;
	}

	div#printableArea table td strong {
		font-size: 10px;
	}

	.content div.full {
		grid-column: 1/7;
	}
	.content div.grid_12 {
		grid-column: 1/2;
	}
	.content div.grid_23 {
		grid-column: 2/3;
	}
	.content div.grid_34 {
		grid-column: 3/4;
	}
	.content div.grid_45 {
		grid-column: 4/5;
	}
	.content div.grid_56 {
		grid-column: 5/6;
	}
	.content div.grid_67 {
		grid-column: 6/7;
	}
	.content div.grid_13 {
		grid-column: 1/3;
	}
	.content div.grid_24 {
		grid-column: 2/4;
	}
	.content div.grid_35 {
		grid-column: 3/5;
	}
	.content div.grid_46 {
		grid-column: 4/6;
	}
	.content div.grid_57 {
		grid-column: 5/7;
	}
	.content div.grid_14 {
		grid-column: 1/4;
	}
	.content div.grid_25 {
		grid-column: 2/5;
	}
	.content div.grid_36 {
		grid-column: 3/6;
	}
	.content div.grid_47 {
		grid-column: 4/7;
	}
	.content div.grid_15 {
		grid-column: 1/5;
	}
	.content div.grid_26 {
		grid-column: 2/6;
	}
	.content div.grid_37 {
		grid-column: 3/7;
	}
	.content div.grid_16 {
		grid-column: 1/6;
	}
	.content div.grid_27 {
		grid-column: 2/7;
	}

	div.box div.secondary_menu_1 {
		grid-template-columns: repeat(1, 1fr);
	}
	div.box div.secondary_menu_2 {
		grid-template-columns: repeat(2, 1fr);
	}
	div.box div.secondary_menu_3 {
		grid-template-columns: repeat(3, 1fr);
	}
	div.box div.secondary_menu_4 {
		grid-template-columns: repeat(4, 1fr);
	}
	div.box div.secondary_menu_5 {
		grid-template-columns: repeat(5, 1fr);
	}
	div.box div.secondary_menu_6 {
		grid-template-columns: repeat(6, 1fr);
	}
	div.box div.secondary_menu_7 {
		grid-template-columns: repeat(7, 1fr);
	}
	div.box div.secondary_menu_8 {
		grid-template-columns: repeat(8, 1fr);
	}
	div.box div.secondary_menu_16 {
		grid-template-columns: repeat(16, 1fr);
	}


}