body,html{
	width:100%;
	padding:0;
	margin:0;
	box-sizing:border-box;
}
@font-face{
	font-family:'Alfabeto';
	src: url('fonts/Alfabeto_Font.ttf') format('truetype');
}
.alfabeto{
	font-family:'Alfabeto',arial,sans-serif !important;
}
*{
	box-sizing:border-box;
}
.row:after{
	display:table;
	content:'';
	clear:both;
	width:100%;
}
.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
  width:100%;
  margin-top:-15px;
  padding:0;
  border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
}
.autocomplete ul{
	z-index:5;
	list-style-type: none;
	margin:0;
	padding:0;
	max-height:300px;
	overflow-y: auto;
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
}
/*.autocomplete > ul li{
	background-color: :#fff;
	color:black;
}
.autocomplete > ul li:hover{
	cursor:hover;
	background-color: #3498DB;
	color:#fff;
}*/
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  width:100%;
  background-color:#fff;
  color:black;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
  margin:0;
  padding:0;
}
.autocomplete-items ul:last-child{
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
}
.autocomplete-items li {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
  margin:0;
}
.autocomplete-items li:hover{
	cursor:pointer;
	background-color: #3498DB;
	color:#fff;
}
.autocomplete-items li:last-child{
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
}
/*.autocomplete-items div:hover {
  /*when hovering an item:
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:
  background-color: DodgerBlue !important;
  color: #ffffff;
}*/
.cl-5{
	float:left;
	width:5%;
	box-sizing:border-box;
}
.cl-10{
	float:left;
	width:10%;
	box-sizing:border-box;
}
.cl-15{
	float:left;
	width:15%;
	box-sizing:border-box;
}
.cl-20{
	float:left;
	width:20%;
	box-sizing:border-box;
}
.cl-25{
	float:left;
	width:25%;
	box-sizing:border-box;
}
.cl-30{
	float:left;
	width:30%;
	box-sizing:border-box;
}
.cl-33{
	float:left;
	width:33%;
	box-sizing:border-box;
}
.cl-35{
	float:left;
	width:35%;
	box-sizing:border-box;
}
.cl-40{
	float:left;
	width:40%;
	box-sizing:border-box;
}
.cl-45{
	float:left;
	width:45%;
	box-sizing:border-box;
}
.cl-50{
	float:left;
	width:50%;
	box-sizing:border-box;
}
.cl-55{
	float:left;
	width:55%;
	box-sizing:border-box;
}
.cl-60{
	float:left;
	width:60%;
	box-sizing:border-box;
}
.cl-65{
	float:left;
	width:65%;
	box-sizing:border-box;
}
.cl-70{
	float:left;
	width:70%;
	box-sizing:border-box;
}
.cl-75{
	float:left;
	width:75%;
	box-sizing:border-box;
}
.cl-80{
	float:left;
	width:80%;
	box-sizing:border-box;
}
.cl-85{
	float:left;
	width:85%;
	box-sizing:border-box;
}
.cl-90{
	float:left;
	width:90%;
	box-sizing:border-box;
}
.panel{
	box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.boxed{
	margin:30px;
	border-radius:17px;
	border:1px solid #ddd;
}
.block-red{
	display:inline-block;
	padding:10px;
	background-color:#E74C3C;
	color:#fff;
	border-radius:7px;
}
.block-green{
	display:inline-block;
	padding:10px;
	background-color:#28B463;
	color:#fff;
	border-radius:7px;
}
.count-blue{
	display:block;
	padding:10px;
	background-color:#1F618D;
	color:#fff;
	font-size:24px;
}
.count-green{
	display:block;
	padding:10px;
	background-color:green;
	color:#fff;
	font-size:24px;
}
.pd-5{
	padding:5px;
}
.pd-10{
	padding:10px;
}
img{
	max-width:100%;
	height:auto;
}
.flex{
	display:flex;
}
.flex-row{
	flex-direction:column;
	gap:10px 10px;
	align-items:flex-start;
	align-content:space-around;
}
.flex-center{
	align-items:center;
}
.flex-gap-10{
	gap:10px;
}
span.userinfo{
	color:#fff;
	font-size:1.15em;
}
.valign{
	vertical-align:middle;
}
.mini-logo{
	position:relative;
	height:100px;
	width:100px;
}
.front-logo{
	height:auto;
	width:100%;
	margin-top:-50px;
}
a.forgot-pass{
	font-size:1.15rem;
	font-weight:600;
	font-family:'Alfabeto',arial,sans-serif;
	color:#E74C3C;
}
a.forgot-pass:hover{
	color:#27AE60;
	transition:all .3s;
}
.transparent-white{
	background:rgba(253, 254, 254,0.8);
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
	min-height:600px;
}
.rounded{
	border-radius:25px;
}
.mg-t-5{
	margin-top:5%;
}
.index{
	background: url(../images/RO6_Facade.png) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
input,select,textarea{
	border:none;
	outline:none;
	font-size:1.3rem;
	width:100%;
	
}
input.tbox,select.tbox,textarea.tbox{
	color:#2C3E50;
	padding:13px 15px;
	border:2px solid #B2BABB;
	border-radius:24px;
}
input.tbox:hover,input.tbox:focus,select.tbox:hover,select.tbox:focus,textarea.tbox:hover,textarea.tbox:focus{
	border:2px solid #2E86C1;
	transition:all .3s;
}
input.tbox::placeholder{
	font-style:italic;
}
button{
	width:100%;
	
}
label.indicator{
	font-style:italic;
	font-weight:600;
	margin-left:10px;
	font-size:1.3rem;
}
.scanner-box{
	z-index:5;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	border:3px solid #fff;
	height:250px;
	width:250px;
}
.retina-scanner{
	animation: MoveUpDown 1s linear infinite;
	z-index:6;
	position:absolute;
	left:50%;
	top:20%;
	transform:translate(-50%,-50%);
	width:200px;
	border-bottom:3px solid green;
}
@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 250px;
  }
}
video#scanner{
	width:500px;
	height:500px;
}
.rel{
	position:relative;
}
.input-icon{
	position:absolute;
	top:15px;
	right:15px;
	font-size:1.3rem;
	cursor:pointer;
}
.input-icon:hover{
	color:dodgerblue;
	transition:all .3s;
}
.login-icon{
	position:absolute;
	top:40px;
	right:15px;
	font-size:1.3rem;
	cursor:pointer;
}
.login-icon:hover{
	color:dodgerblue;
	transition:all .3s;
}
.fff{
	color:#fff;
}
.sidenav .current-page{
	background-color:#1F618D !important;
	color:#fff !important;
}
.sidenav{
	float:left;
	width:20%;
	height:100vh;
	background-color:#154360;
	padding:10px;
}
.sidenav button{
	border:1px solid #ddd;
	outline:none;
	font-size:.90em;
}
.sidenav a{
	display:block;
	border:1px solid #ddd;
	text-decoration:none;
	font-size:1.5em;
	background-color:#fff;
	color:#34495E;
	outline:none;
	cursor:pointer;
	padding:10px;
}
.sidenav a:hover{
	background-color:#1F618D;
	color:#fff;
}
.sidenav ul{
	list-style-type:none;
	padding:0;
	margin:0;
}
.sidenav span.listlabel{
	display:block;
	border:1px solid #ddd;
	text-decoration:none;
	font-size:1.50em;
	background-color:#fff;
	color:#34495E;
	outline:none;
	cursor:pointer;
	padding:10px;
}
.sidenav span.listlabel:hover{
	background-color:#1F618D ;
	color:#fff;
}
.sidenav ul li{
	display:none;
}
.sidenav ul li a{
	display:block;
	border:1px solid #ddd;
	text-decoration:none;
	font-size:1.5em;
	outline:none;
	cursor:pointer;
	background-color:#fff;
	color:#34495E;
	padding-top:10px;
	padding-bottom:10px;
	padding-right:10px;
	padding-left:10%;
}
.sidenav ul li a:hover{
	background-color:#1F618D ;
	color:#fff;
}
.sidenav .sidelogo{
	height:50px;
	width:50px;
}
.content{
	float:left;
	width:80%;
	height:100vh;
	overflow-y:auto;
	background-color:#F7F9F9;
}
.linkdiv{
	display:flex;
	flex-flow:column wrap;
	gap:10px 10px !important;
}
.linkdiv a:-webkit-any-link{
	display:block;
	text-decoration:none;
	color:#333 !important;
	font-size:16px;
	font-weight:600;
	padding:7px;
	padding:5px;
}
.linkdiv a:-webkit-any-link:hover{
	color:dodgerblue !important;
	transition:all .3s;
}

/* CSS */
.button-59 {
  align-items: center;
  background-color: #fff;
  border: 2px solid #000;
  box-sizing: border-box;
  color: #000;
  cursor: pointer;
  display: inline-flex;
  fill: #000;
  font-family: Inter,sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding:5px;
  justify-content: center;
  letter-spacing: -.8px;
  line-height: 16px;
  /*min-width: 140px;*/
  width:100%;
  outline: 0;
  padding:10px;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  cursor:pointer;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

.button-59:focus {
  color: #171e29;
}

.button-59:hover {
  border-color: #06f;
  color: #06f;
  fill: #06f;
}

.button-59:active {
  border-color: #06f;
  color: #06f;
  fill: #06f;
}

@media (min-width: 768px) {
  .button-59 {
    min-width: 170px;
  }

  /*media*/
}
.hidden{
	display:none;
}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-top{
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 25; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}
.modal-top2{
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 26; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.modal-33{
  background-color: #fefefe;
  margin: 7% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 33%; /* Could be more or less, depending on screen size */
  border:1px solid #ddd;
}
.modal-50{
  background-color: #fefefe;
  margin: 7% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 50%; /* Could be more or less, depending on screen size */
  border:1px solid #ddd;
}
.modal-80{
  background-color: #fefefe;
  margin: 7% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  border:1px solid #ddd;
}
.error{
	color:red;
	font-size:1.30em;
	font-weight:600;
}
.success{
	color:green;
	font-size:1.30em;
	font-weight:600;
}
.bordered{
	border:2px solid #ddd;
}
table caption {
  color:#273746;
  font-size:1.5rem !important;
  font-family:'Alfabeto';
  margin: .5em 0 .75em;
}
table tr {
  background-color: #FFF;
  border: 1px solid #AAB7B8;
  padding: .35em;
  
}
table{
	border-collapse: collapse;
	width:100%;
}
table th{
	font-family:roboto,sans-serif !important;
	background-color: #fff;
	/*background-image: linear-gradient(315deg, #000000 0%, #414141 74%);*/
	/*color:#F1C40F;*/
	color:#333;
	font-size:1.12rem;
	font-weight:600;
	padding: .625em;
}
/*table th:last-child{
	background-color:transparent !important;
}*/
table td{
	background-color:#EAEDED;
	color:black;
}
table tbody td{
	font-family:roboto, sans-serif, arial !important;
}
table td {
  padding: .625em;
  text-align: center;
  font-size:0.80rem;
}
.red{
	color:red;
}
.blue{
	color:blue;
}
/* CSS */
.button-18 {
  align-items: center;
  background-color: #0A66C2;
  border: 0;
  border-radius: 100px;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-family: -apple-system, system-ui, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  justify-content: center;
  width:100%;
  overflow: hidden;
  padding:20px;
  text-align: center;
  touch-action: manipulation;
  transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
}

.button-18:hover,
.button-18:focus { 
  background-color: #16437E;
  color: #ffffff;
}

.button-18:active {
  background: #09223b;
  color: rgb(255, 255, 255, .7);
}

.button-18:disabled { 
  cursor: not-allowed;
  background: rgba(0, 0, 0, .08);
  color: rgba(0, 0, 0, .3);
}

@media only screen and (max-width: 780px) {
	.row:after{
		margin-top:5px;
	}
	.cl-5,.cl-10,.cl-15,.cl-20,.cl-25,.cl-30,.cl-33,.cl-35,.cl-40,.cl-45,.cl-50,.cl-55,.cl-60,.cl-65,.cl-70,.cl-75,.cl-80,.cl-85,.cl-90,.cl-95{
		width:100%;
		margin-top:5px !important;
		padding-left:5px;
		padding-right:5px;
	}
	video#scanner{
		width:250px !important;
		height:auto !important;
	}
	.scanner-box{
		width:200px;
		height:200px;
	}
	.retina-scanner{
		width:100px;
	}
	.modal-50,.modal-33{
		width:90%;
	}
	button{
		width:100%;
	}
	.sidenav{
		width:100%;
		height:auto;
	}
	.content{
		width:100%;
		height:auto;
	}
	
	table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table td:last-child {
    border-bottom: 0;
  }

  .dropdown-content {
  	display: none;
  	right:0;
  	position: absolute;
  	background-color: #f9f9f9;
  	min-width: 160px;
  	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  	z-index: 1;
	}
	.cl-5{
	float:left;
	width:100%;
	box-sizing:border-box;
	margin-top:5px;
}
.cl-10{
	float:left;
	width:100%;
	box-sizing:border-box;
	margin-top:5px;
}
.cl-15{
	float:left;
	width:100%;
	box-sizing:border-box;
	margin-top:5px;
}
.cl-20{
	float:left;
	width:100%;
	box-sizing:border-box;
	margin-top:5px;
}
.cl-25{
	float:left;
	width:100%;
	box-sizing:border-box;
	margin-top:5px;
}
.cl-30{
	float:left;
	width:100%;
	box-sizing:border-box;
	margin-top:5px;
}
.cl-33{
	float:left;
	width:100%;
	box-sizing:border-box;
	margin-top:5px;
}
.cl-35{
	float:left;
	width:100%;
	box-sizing:border-box;
	margin-top:5px;
}
.cl-40{
	float:left;
	width:100%;
	box-sizing:border-box;
	margin-top:5px;
}
.cl-45{
	float:left;
	width:100%;
	box-sizing:border-box;
	margin-top:5px;
}
.cl-50{
	float:left;
	width:100%;
	box-sizing:border-box;
	margin-top:5px;
}
.cl-55{
	float:left;
	width:100%;
	box-sizing:border-box;
	margin-top:5px;
}
.cl-60{
	float:left;
	width:100%;
	box-sizing:border-box;
	margin-top:5px;
}
.cl-65{
	float:left;
	width:100%;
	box-sizing:border-box;
	margin-top:5px;
}
.cl-70{
	float:left;
	width:100%;
	box-sizing:border-box;
	margin-top:5px;
}
.cl-75{
	float:left;
	width:100%;
	box-sizing:border-box;
	margin-top:5px;
}
.cl-80{
	float:left;
	width:100%;
	box-sizing:border-box;
	margin-top:5px;
}
.cl-85{
	float:left;
	width:100%;
	box-sizing:border-box;
	margin-top:5px;
}
.cl-90{
	float:left;
	width:100%;
	box-sizing:border-box;
	margin-top:5px;
}
	
}