* {
	margin: 0px;
	box-sizing: border-box;
}
:root {
    --main-gris: #e9ecef;
    --bg_val-gris: #F5F5F5;
    --bg_val-grisH: #DDD;
    --bt_color: #007bff;
    --bt_colorH: #005AFF;
    --bg_muy_gris: #4D5053;
    --list_bgcolor: #606060;
    --list_tit: 16px;
}
:root {
	--main-url: "http://portero.openall.com.ar";
}
html, body {
	width: 100%;
    height: 100%;
    font-family: Roboto;
    font-size: 12px;
	color: #333;
	box-sizing: border-box;
}
.right, .left, .center {
	display:flex;
    align-items: center;
}
.right { justify-content: flex-end; }
.left { justify-content: flex-start; }
.center { justify-content: center; }
.img_gen {
	width: 100%;
}
.cursor {
	cursor:pointer;
}
.header, .content, .content_leading, .footer {
	box-sizing: border-box;
}
.loading {
	width: 55px;
}
.rowWrapper {
    display: contents;
}
.general_bt {
	background: #2967EC;
	border-radius: 5px;
	box-shadow: 2px 2px 4px #AAA;
	color: #FFF;
	width: max-content;
	padding: 10px;
	cursor: pointer;
	display: flex;
    justify-content: center;
    align-items: center;
}
body {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #FFF;
}
.img_gen {
	width: 100%;
}
.rowWrapper {
    display: contents;
}
.text-center {
    text-align: center;
}
.btn-primary {
    color: #FFF;
    background-color: var(--bt_color);
    border-color: var(--bt_color);
    box-shadow: none;
}
.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.btn-block {
    padding: 10px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
}

.contener {
	width: 100%;
	height: 100vh;
	display: flex;
    flex-direction: column;
/*	padding: 5px;*/
    align-items: center;
	border-top: 5px solid #2967EC;
}
.page_center {
	flex-grow: 1;
	width: 100%;
	border-radius: 10px;
	background: #F3F4F6;
	border: 1px solid #000;
}

/* LOGIN */
.login_box {
	margin: 5% auto;
	width: 100%;
	max-width: 400px;
}
.login_tit {
	width: 100%;
	display: flex;
    justify-content: center;
    align-items: center;
	font-size: 25px;
	padding: 20px 0 0 0;
	text-align: center;
}
.login_data_box {
	border: 1px solid #C4C4C4;
	background: #F3F4F6;
	border-radius: 10px;
	margin: 20px 0 0 0;
	padding: 40px 20px;
}
.login_data_tit {
	width: 100%;
	padding: 10px 0;
	border-bottom: 2px solid #DDD;
	font-size: 15px;
	font-weight: 600;
}
.login_input_box {
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
	margin: 30px 0 5px 0;
}
.login_input_inp {
	flex-grow: 1;
	
}
.login_input_inp input {
	border: 1px solid #D5D6D7;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	padding: 15px 5px;
}
.login_input_ico {
	width: 46px;
}
.login_input_bt {
	margin: 0 auto;
	padding: 15px 40px;
}
.login_input_forgot {
	font-size: 12px;
	display: flex;
    justify-content: flex-end;
    align-items: center;
	margin: 15px 0 30px 0;
}
.login_registr_info {
	width: 100%;
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.login_registr {
	width: 100%;
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
	font-size: 14px;
	margin: 10px 0;
}
.login_message {
	width: 100%;
	margin: 20px 0 0 0;
	text-align: center;
}
.login_input_bt {
	margin: 30px auto;
	padding: 15px 40px;
}

/* HEADER */
.header_box {
	width: 100%;
	display: grid;
    grid-template-columns: 130px 1fr 1fr 25px;
    grid-gap: 10px;
	padding: 0 5px;
	max-width: 1440px;
	flex-shrink: 0;
	margin: 0 0 5px 0;
}
.header_tipo {
	display: flex;
    justify-content: center;
    align-items: center;
	font-size: 14px;
	font-weight: bold;
	color: #2B4BA2;
}
.header_name {
	display: flex;
    flex-direction: column;
	justify-content: flex-start;
    align-items: flex-end;
	font-size: 17px;
	font-weight: bold;
	color: #2B4BA2;
}
.header_logo {
	width: 100%;
}

.main_box {
	overflow-y: auto;
	border-radius: 10px;
	background: #F3F4F6;
	border: 1px solid #C4C4C4;
	width: 100%;
	flex-grow: 1;
	padding: 10px;
	margin: 0 0 5px 0;
}
.footer {
	width: 100%;
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
	border-radius: 10px;
	background: #F3F4F6;
	border: 1px solid #C4C4C4;
	width: 100%;
	padding: 20px;
	position: relative;
	flex-shrink: 0;
}
.footer_ico {
	position:relative;
	cursor: pointer;
}
.footer_qr {
	position: absolute;
	top: -25px;
	left: 50%;
	transform: translate(-50%, 0%);
	border-radius: 50%;
	width: 80px;
	height: 80px;
	background: #2967EC;
	padding: 20px;
}
.qr_box_general {
	width: 100%;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.access_result {
	width: 100%;
	display: flex;
    justify-content: center;
    align-items: center;
}
.accesook, .accesoerr {
	width: 100%;
	height: 200px;
	font-size: 24px;
	font-weight: bold;
	color: #FFF;
	display: flex;
    justify-content: center;
    align-items: center;
}
.accesook {
	background: #006600;
}
.accesoerr {
	background: #880000;
}
.u_box_content {
	width: 100%;
}
.device_list_box, .device_list_boxSU, .device_list_boxAD {
	width: 100%;
	display: grid;
    grid-template-columns: 1fr max-content max-content max-content;
    grid-gap: 3px 3px;
}
.device_list_boxSU, .device_list_boxAD {
	width: 100%;
	display: grid;
    grid-template-columns: 1fr max-content max-content max-content max-content;
    grid-gap: 3px 3px;
}
.device_list_tit {
	border: 1px solid #CCC;
	padding: 5px 10px;
	display: flex;
    justify-content: center;
    align-items: center;
	color: #FFF;
	background: #888;
}
.device_list_txt {
	border: 1px solid #CCC;
	padding: 5px 10px;
}

/* ADMIN */
.admin_box {
	width: 100%;
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
	padding: 0 10px;
}
.admin_select, .admin_input {
	padding: 5px 10px;
}
.admin_input {
	width: 100%;
}
.admin_lista {
	width: 100%;
}
.admin_lista_box {
	width: 100%;
	display: grid;
    grid-template-columns: max-content 1fr 1fr 28px;
    grid-gap: 2px;
	margin: 10px 0 0 0;
}
.admin_lista_ll_box {
	width: 100%;
	margin: 10px 0 0 0;
}
.admin_txt {
	border: 1px solid #CCC;
	padding: 3px 5px;
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.edit_box {
	grid-column: 1/-1;
	width: 100%;
	display: grid;
    grid-template-columns: max-content 1fr;
    grid-gap: 2px;
	border-top: 2px solid #CCC;
	background: #f8f8f8;
}
.add_box {
	width: 100%;
	display: grid;
    grid-template-columns: max-content 1fr;
    grid-gap: 2px;
	border-top: 2px solid #CCC;
	background: #f8f8f8;
	margin: 10px 0 0 0;
}
.lista_bt {
	grid-column: 1/-1;
	width: 100%;
	display: flex;
    justify-content: space-between;
    align-items: center;
}
.admin_bt_separador {
	flex-grow: 1;
}
.admin_bt {
	width: 80px;
	margin: 5px;
}
.admin_menu_box {
	width: 100%;
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
	margin: 10px 0;
}
.admin_menu {
	border: 1px solid #888;
	padding: 5px 10px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	margin: 1px;
	box-shadow: 2px 2px 4px #AAA;
	font-weight: bold;
	cursor: pointer;
}
.menu_activo {
	background: #EEE;
}

.admin_listaU_box {
	width: 100%;
	display: grid;
    grid-template-columns: 1fr max-content max-content max-content 27px;
    grid-gap: 2px;
	margin: 10px 0 0 0;
}
.admin_check {
	box-shadow: 2px 2px 4px #AAA;
}
.admin_equ_lista_acc {
	grid-column: 1/-1;
	display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 2px;
	margin: 5px 5px 10px 5px;
}
.admin_eq, .admin_eqall {
	margin: 0 0 0 5px;
}
.admin_asign_box {
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

/* MENU */
.menu {
    position: absolute;
	width: max-content;
    bottom: 30px;
    right: -10px;
    border: 1px solid #EEE;
	border-radius: 3px;
    padding: 5px 25px;
    background: rgba(255,255,255,0.9);
	opacity: 0;
    max-height: 0; /* ?????????? 0, ????? ?????? ???? */
    overflow: hidden;
    height: 0px; /* ?????? 'height: 0px;' - ????? ???????? ?????? 'max-height: 0;' */
    transition: opacity 0.5s ease, max-height 0.5s ease;
}
.submenu {
	padding: 10px;
	border: 1px solid #CCC;
	border-radius: 3px;
	box-shadow: 2px 2px 4px #AAA;
	margin: 5px 0;
	font-size: 18px;
}

#menu.show {
    opacity: 1;
	max-height: 500px; 
    height: auto;
}
.lista_coment {
	grid-column: 1/-1;
	display: flex;
	justify-content: center;
    align-items: center;
	font-size: 16px;
	padding: 10px;
}
.admin_equip_list {
	padding: 3px;
}
.admin_llave_equipo_acc {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 0 10px;
}
.admin_llave_item_hash, .admin_llave_item_acc {
	width: 100%;
	padding: 5px 10px;
	border: 1px solid #CCC;
}
.admin_llave_item_hash {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.admin_llave_item_btn {
	width: 100%;
}	
.admin_llave_lista_acc {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 40px;
	grid-gap: 2px;
}
.admin_llave_item_acc {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.admin_txt_llave {
	width: 100%;
    border: 1px solid #CCC;
    padding: 3px 5px;
    display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}
.admin_txt_llave_free {
	width: 100%;
	display: grid;
	grid-template-columns: max-content max-content 1fr;
	grid-gap: 2px;
}
.admin_txt_tit, .admin_txt_tit_10 {
	width: 100%;
	padding: 5px;
	margin: 5px 0 0 0;
	background: #EEE;
	border-top: 1px solid #CCC;
}
.admin_txt_tit_10 {
	margin: 10px 0 0 0;
}