* {
	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;
}
.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;
}
.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 {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
	padding: 5px;
    align-items: center;
}

/* 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_code {
	display: none
}
.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: 1fr max-content;
    grid-gap: 10px;
	padding: 0;
	max-width: 1440px;
}
.header_name {
	display: flex;
    flex-direction: column;
	justify-content: flex-end;
    align-items: flex-start;
}
.header_name_n {
	font-weight: 700;
	font-size: 15px;
}
.header_name_t {
	font-weight: 700;
	font-size: 10px;
}
.u_icon {
    width: 32px;
    height: 32px;
	margin-bottom: 5px;
}
.header_salir {
	font-weight: 700;
	font-size: 15px;
	display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    position: relative;
    top: -10px;
}
.ahref_color {
	text-decoration: none;
	color: #0A1E53;
}
/* HEADER */

/* USER DATA */
.u_box {
	width: 100%;
	max-width: 1440px;
}
.u_big_tit {
	width: 100%;
	display: flex;
    justify-content: center;
    align-items: center;
	font-size: 25px;
	padding: 20px 0 0 0;
	text-align: center;
}
.u_box_data {
	border: 1px solid #C4C4C4;
	background: #F3F4F6;
	border-radius: 10px;
	margin: 10px 0 0 0;
	padding: 10px;
}
.u_btn {
    display: none;
    justify-content: flex-end;
    margin-bottom: 5px;
}
.icon_plus {
    width: 16px;
    height: 16px;
    display: inline-block;
	margin-right: 8px;
}
.u_portero_code {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr max-content;
    grid-gap: 5px;
    margin-bottom: 10px;
}
#portero_select {
    width: 100%;
    padding: 10px;
    border: 1px solid #DADADA;
    border-radius: 5px;
    font-size: 14px;
    background: white;
    cursor: pointer;
    box-shadow: 2px 2px 4px #AAA;
}
.u_tit {
	width: 100%;
	font-size: 15px;
	font-weight: 600;
	border-top: 3px solid #DADADA;
	padding: 15px 0 10px 0;
    margin-top: 10px;
	margin-bottom: 10px;
}
.u_tit_with_icon {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
    justify-content: space-between;

	width: 100%;
	font-size: 15px;
	font-weight: 600;
	border-bottom: 2px solid #DADADA;
	padding: 10px 0;
	margin-top: 10px;
	margin-bottom: 10px;
}
.icon_sync_wait {
    width: 20px;
    height: 20px;
    margin: 0 10px;
	vertical-align: middle;
}
.icon_sync_ok {
    width: 20px;
    height: 20px;
    margin: 0 10px;
	vertical-align: middle;
}
.u_dashed_input {
	width: 100%;
	padding: 10px;
	border: 2px dashed #bbb;
	border-radius: 5px;
	background-color: #F3F4F6;
	font-size: 14px;
	cursor: default;
    margin-bottom: 5px;
}
.u_dashed_input input:focus {
    outline: none; 
}
.u_direccion_fixed {
	width: 100%;
	padding: 10px;
    border: none;
    background-color: #F3F4F6;
	font-size: 14px;
	cursor: default;
    margin-bottom: 5px;
}
.u_direccion_fixed input:focus {
    outline: none; 
}
.u_direccion {
	width: 100%;
	display: grid;
    grid-template-columns: 1fr max-content;
    grid-gap: 2px;
	margin: 0 0 10px 0;
}
.u_input {
	width: 100%;
	border: 1px solid #DADADA;
	border-radius: 5px;
	margin: 0 10px 0 0;
    box-shadow: 2px 2px 4px #AAA;
}
#direccion_opciones {
	list-style-type: none;
	padding: 0;
	margin: 0;
	border: 1px solid #ccc;
	background-color: white;
	max-height: 200px;
	overflow-y: auto;
	border-radius: 4px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#direccion_opciones:empty {
    border: none;
}
#direccion_opciones li {
	padding: 10px;
	cursor: pointer;
	border-bottom: 1px solid #f0f0f0;
}
#direccion_opciones li:hover {
	background-color: #f7f7f7;
}
.u_box_data input {
	padding: 10px 7px;
}
.u_config_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.u_config_row label {
    flex: 1;
    font-size: 14px;
}
.u_config_row select {
    width: 60px;
    padding: 7px;
    border: 1px solid #C4C4C4;
    border-radius: 5px;
    margin: 0 5px;
    box-shadow: 2px 2px 4px #AAA;
}
.u_config_row select.syncing {
    border-color: red;
}
.u_config_row span {
    font-size: 14px;
    margin-right: 10px;
}
.u_tel_admin {
    margin-bottom: 15px;
}
.u_tel_admin label {
    display: block;
    margin-bottom: 5px;
	padding-bottom: 5px;
	border-bottom: 1px solid #DADADA;
}
.u_tel_row {
	display: grid;
    grid-template-columns: 40px 60px 1fr 60px;
    grid-gap: 2px;
    padding: 10px;
    justify-content: flex-start;
}
.u_tel_row input {
    border: 1px solid #DADADA;
    border-radius: 5px;
    padding: 7px;
    width: 100%;
	box-shadow: 2px 2px 4px #AAA;
}
.u_codigo_input {
    width: 60px;
    text-align: center;
}
.u_abrir_btn {
    text-align: center;
    margin: 0 0;
    width: 100%;
}
.u_btn_abrir_puerta {
    background: #FD9A59;
    border: none;
    color: white;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    display: inline-block;
	width: 80%;
    margin: 30px auto;
    padding: 30px 0;
	box-shadow: 2px 2px 4px #AAA;
}
.u_depart {
	width: 100%;
	display: grid;
    grid-template-columns: 1fr max-content;
    grid-gap: 2px;
	margin: 0 0 10px 0;
}
.u_depart input {
    box-shadow: 2px 2px 4px #AAA;
}
.u_tecla {
    margin-bottom: 10px;
}
.u_tecla_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
	margin-top: 20px;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid #DADADA;
}
.u_num_dep {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.u_num_dep input {
    border: 1px solid #DADADA;
    border-radius: 5px;
    padding: 10px;
    width: 100px;
}
.u_tecla_tel_group {
	margin-top: 15px;
    margin-bottom: 15px;
}
.u_tecla_tel_rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.u_tecla_tel_row {
	display: grid;
    grid-template-columns: 40px 60px 1fr 60px;
    grid-gap: 2px;
    padding: 10px;
    justify-content: flex-start;
}
.u_tecla_tel_row input {
    border: 1px solid #DADADA;
    border-radius: 5px;
    padding: 7px;
    width: 100%;
	box-shadow: 2px 2px 4px #AAA;
}
.prefijo {
	width: 100%;
	display: flex;
    justify-content: center;
    align-items: center;
	font-weight: bold;
}
.u_tecla_codigo_input {
    width: 60px;
    text-align: center;
}
.u_tecla_ok_button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.u_btn_center {
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
    width: 100%;
    margin: 20px 0 0 0;
}
.u_btn_generar_pago {
    background: #2967EC;
	border-radius: 5px;
	box-shadow: 2px 2px 4px #AAA;
	color: #FFF;
    width: 80%;
	padding: 10px;
	cursor: pointer;
	display: flex;
    justify-content: center;
    align-items: center;
}
.u_btn_pagar {
    background: #2967EC;
	border-radius: 5px;
	box-shadow: 2px 2px 4px #AAA;
	color: #FFF;
	padding: 7px;
	cursor: pointer;
	display: flex;
    justify-content: center;
    align-items: center;
}
.icon_pago {
    width: 16px;
    height: 16px;
    display: inline-block;
	margin-right: 8px;
}
.vencimiento_abono {
    font-weight: 500;
    color: #EE0A0A;
}
.nombreDepart {
	font-size: 20px;
	font-weight: bold;
	border: 1px solid #CCC;
	border-radius: 3px;
	box-shadow: 2px 2px 4px #AAA;
	padding: 5px 10px
}
.u_depart_del {
	width: 100%;
	border-top: 3px solid #DADADA;
	display: flex;
    justify-content: center;
    align-items: center;
	padding: 10px 0 0 0;
}
.general_bt_del {
    background: #2967EC;
    border-radius: 5px;
    box-shadow: 2px 2px 4px #AAA;
    color: #FFF;
    padding: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
	border: none;
}
.last_connect {
	margin: 10px 0;
	font-size: 16px;
}
/* USER DATA */

/* LAST CLASS */
.general_bt_mark {
	background: #336600; important;
}

.pago_box {
    width: 100%;
    max-width: 1440px;
}
.pago_box div {
/*    border: 1px solid #CCC;*/
}
.pago_box_box {
	width: 100%;
	display: grid;
    grid-template-columns: 1fr 1fr 1fr max-content;
    grid-gap: 0px;
	padding: 10px;
	background: #F3F4F6;
	border-radius: 10px;
	border: 1px solid #C4C4C4;
}
.pago_zag {
	width: max-content;
	margin: 0 auto 0 auto;
	font-family: Roboto;
	font-weight: 600;
	font-size: 25px;
}
.pago_tit0 {
	display: flex;
    justify-content: center;
    align-items: center;
}
.pago_tit {
	display: flex;
    justify-content: center;
    align-items: center;
	border-bottom: 2px solid #CCC;
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 5px;
	padding: 0 0 5px 0;
}
.pago_tit2 {
	display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.pago_txt, .pago_txt1 {
	padding: 5px 7px;
	font-size: 15px;
	border-bottom: 1px solid #CCC;
}
.pago_txt1 {
	font-size: 12px;
}
.pago_box_foot {
	width: 100%;
	padding: 20px;
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
	font-size: 14px;
	font-weight: bold;
}
.pago_fecha_box {
	width: 100%;
	display: flex;
    justify-content: center;
    align-items: center;
	font-weight: bold;
}
.pago_fecha {
	padding: 5px 10px;
	border-radius: 3px;
	box-shadow: 2px 2px 4px #AAA;
	border: 1px solid #CCC;
	margin: 10px;
}
.contenido_p {
	flex: 1;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
	padding: 0 0 10px 0;
}
.pagar_tit, .pagar_txt {
	font-size: 20px;
	font-weight: bold;
	padding: 10px 0;
	display: flex;
    justify-content: center;
    align-items: center;
}
.cont_pag_p {
	margin-top: 40px;
}
.pagar_bt {
	font-size: 18px;
}
.pagar_txt {
	background: #EEE;
	border: 1px solid #CCC;
	border-radius: 5px;
	box-shadow: 2px 2px 4px #AAA;
}
.page_return_logo, .page_return_logo_err {
	margin: 50px auto 50px auto;
	width: 50%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: #009900;
	display: flex;
    justify-content: center;
    align-items: center;
}
.page_return_logo_err {
	background: #ff0000;
}
.page_return_symb {
	width: 50%;
}
.page_status {
	width: 100%;
	min-height: 100vh;
	display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.page_return_text {
	font-size: 20px;
	text-align: center;
	margin: 0 0 30px 0;
}