.img-100 {
    width: 100px;
    height: auto;
}

.img-80 {
    width: 80px;
    height: auto;
}

.img-30 {
    width: 30px;
    height: auto;
}

.btn-action {
    margin: 10px;
}

tr.vmiddle > td {
    vertical-align: middle;
}

tr.acenter > th {
    text-align: center;
}

ul.sidebar-menu > li {
    font-size: 14px;
}

ul.sidebar-menu > li.header {
    font-size: 14px;
}

.box {
    font-size: 14px;
}

.row {
    //font-size: 14px;
}

#overlay {
    background: #ffffff;
    color: #666666;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 5000;
    top: 0;
    left: 0;
    float: left;
    text-align: center;
    padding-top: 25%;
}

.btn {
    font-size: 14px;
}

form {
    background-color: #F5F5F5;
    padding: 20px;
}

main > .jumbotron {
    padding-top: 15px;
    color: white;
    background-color: white;
}

.jumbotron-white {
    background-color: white;
    max-width: 1140px;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0;
}

.jumbotron-light {
    background-color: #F5F5F5;
    font-size: 16px;
    margin: 2px;
}

.a-lighty {
    background-color: #F5F5F5;
}

.modal-lg {
    max-width: 80% !important;
    padding-left: 10px;
}

.tab-pane {
    padding: 20px;
}

.white {
    background-color: #808080;
}

.letter-visible {
    text-align: center;
    color: white;
    padding-right: 10px;
    margin-left: 20px;
    font-size: 14px;
}

.a-clean {
    color: #808080;
    padding-left: 30px;
}

.a-white {
    color: white;
}

.nav-link > a:link {
    color: white;
}

.dropdown .nav-link {
    text-decoration: none;
}

.dropdown-menu .dropdown-item {
    display: inline-block;
    width: 100%;
}

table.dataTable tr th.select-checkbox > input {
    margin-left: 10px;
}

.fa-d:before {
    font-family: Arial;
    font-weight: bold;
    content: 'D';
}

#quincena, #tablilla {
    clear: both;
}

#quincena {
    float: right;
    text-align: center;
    padding-right: 5px;
    padding-left: 5px;
}

.container {
    max-width: 1900px;
}

.container-residente {
    max-width: 1140px;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.white-performed {
    background-color: white;
}

.orange {
    background-color: orange;
}

.datepicker {
    content: '';
    display: inline-block;
    width: 200px;
}
div.datepicker {
    padding-right: 15px;
    padding-left: 15px;
    margin-top:80px;
}

.timepicker {
    content: '';
    display: inline-block;
    width: 200px;
}

.btn-export {
    margin-bottom: 10px;
}

div.card-foto {
    width: 170px;
    margin-right: 20px;
    margin-top: 20px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
}
div.card-body-foto-nonicon
{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
    font-size: 14px;
}

.user-image {
    width: auto;
    height: 50px;
    border-radius: 50%;
    border: 1px solid white;
}

.user-image-mini {
    width: auto;
    height: 30px;
    border-radius: 50%;
    border: 1px solid white;

}

.user-circle {
    width: auto;
    height: 100px;
    border-radius: 50%;
    border: 1px solid white;
    margin: 0 auto;

}

.user-circle-big {
    width: auto;
    height: 100px;
    border-radius: 50%;
    border: 1px solid white;
    margin: 0 auto;

}

.max-width {
    width: 100%;
}

.card-user {
    height: 120px;
    margin: 20px;
}

.supersize {
    font-size: 80px;
    margin-top: 70%;
    color: #F5F5F5;
}

a.empleados:hover {
    text-decoration: none;
    color: black;
}

.supersize:hover {
    color: #138496;
}

div.pagination {
    float:left;
    margin-top: 20px;
    margin-left: 10px;
}

.paginate_change {
    color: black;
    float:right;
    font-size: 14px;
    margin-top: 20px;
    margin-left: 10px;
}

.paginate_change:hover {
    color: #138496;
    text-decoration: underline;
}

.fixed-font {
    text-decoration: none;
    font-size: 14px;
    float: right;
    margin-top: 20px;
}

.villa {

  background: linear-gradient(
          rgba(0, 0, 0, 0.7),
          rgba(0, 0, 0, 0.7)
        ),url('/static/images/background.jpg') no-repeat center center fixed ;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}

.bordered-bottom {
    border-bottom: 1px #B6B6B6 solid;
    color: #B6B6B6;
}

.user-buttons {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    padding: 15px;
}
.dropdown-menu {
    font-size: 14px;
    color: #212529;
    text-align: left;
    list-style: none;
}

.pull-left {
    float:left;
}

.justify-text-align {
    text-aling: center;
    display:block;
}
p.initial {
    text-align: center;
    font-size: 20px;
}

p.initial > a {
    text-decoration: none;
}
.control-label{
    font-weight: bold;
}

.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { font-size:12px; padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }

.titulo {
    font-weight: bold;
    margin-top: 3px;
}
.rowspan > row {
    margin-top: 10px;
}
.box-body,.tab-pane{
    min-height: 500px;
    background-color: #fefefe;
}
.spaced{
    margin-bottom: 10px;
}

.spaced2{
    margin-bottom: 30px;
}

.tutorial {
    height:auto;
    border: 1px #232323 solid;
    width:70%;
}
#myInput {
  background-image: url('/static/images/searchicon.png'); /* Add a search icon to input */
  background-position: 10px 12px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 25%; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
  float:right;
}

#myTable {
  border-collapse: collapse; /* Collapse borders */
  width: 100%; /* Full-width */
  border: 1px solid #ddd; /* Add a grey border */
  font-size: 18px; /* Increase font-size */
}

#myTable th, #myTable td {
  text-align: left; /* Left-align text */
  padding: 12px; /* Add padding */
}

#myTable tr {
  /* Add a bottom border to all table rows */
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  /* Add a grey background color to the table header and on hover */
  background-color: #f1f1f1;
}

.tip {
    text-decoration: none
}
.tip:hover {
    position: relative
}
.tip span {
    display: none
}
.tip:hover span {
    padding: 5px 20px 5px 5px;
    font-size: 18px;
    color: #ffffff;
    display: block;
    z-index: 100;
    background: #1D1D27;
    left: 0px;
    margin: 10px;
    width: 250px;
    position: absolute;
    top: 10px;
    text-decoration: none
}

input[type=checkbox][checked][disabled]{
    outline:1px solid black;
}

.form-select {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-label {
    font-size: 1rem;
}

.nombre-registro {
    padding-left:10px;
    padding-right:10px;
    font-size: 16px;
    font-weight: bold;
    text-align:left;
}

.datepicker-disabled {
  display: inline-block;
  width: 200px;
}