body { margin: 20px 20px 100px 20px;  font-family: sans-serif; font-size: 1.1rem;/*16px;*/ }
a    { color: #1D84B6;}


/* table cells */
#lm td   { padding: 6px; vertical-align:middle;}
#lm th   { padding: 10px; background: #1D84B6; color: #fff; }
#lm th a { color: #fff; text-decoration: none; }

/* inputs and buttons */
#lm input, #lm select, #lm textarea, #lm .lm_button  { background: #fff; border-radius: 3px; padding: 10px; border: 1px solid #ccc; font-size: 16px; }
#lm .lm_button       { padding: 10px; min-width: 100px; color: #fff; background: #1D84B6; border: 0; font-weight: bold; margin: 5px; opacity: 0.90; cursor: pointer; text-decoration: none;}
#lm .lm_button:hover { opacity: 1.0; }
#lm .dull            { background: #888; }
#lm .error           { background: #FF4136; }
#lm input[type=checkbox], #lm input[type=radio] { margin: 0 7px 0 12px;	}

/* search box and pagination */
#lm input.lm_search_button     { margin-left: 12px; }
#lm form.lm_search_box a       { text-decoration: none; }
#lm table.lm_pagination select { padding: 3px; }
#lm table.lm_pagination        { margin-top: -10px; }
#lm table.lm_add_search        { margin-top: -10px; }

/* form */
#lm form                         {margin-bottom:15%;}
#lm table.lm_form                { margin: 0 auto;}
#lm table.lm_form td:first-child { /*text-align: right;*/ }
#lm table.lm_form tr             { background: #eee; }
#lm div.lm_form_button_bar       { text-align: center; position:fixed; /*height:200px;*/ left:40%; bottom:15%;}
#lm span.lm_validate_error       { color: #ff4136; font-size: 13px; font-weight: bold; margin-left: 10px; }
#lm span.lm_validate_tip         { color: #777777; font-size: 13px; font-weight: bold; margin-left: 10px; }
#lm div.lm_form_button_bar       { margin: 10px auto; }   

/* grid */
#lm table.lm_grid { margin-bottom: 11px; }
#lm table.lm_grid tr:nth-child(even)                        { background: #eee; }
#lm table.lm_grid tr.lm_active, #lm table.lm_grid tr:hover { background: #c2e3ff; } /* highlight hover and current row edited */ 

/* success and error messages */
#lm div.lm_success, #lm div.lm_error { color: #2ecc40; border: 1px solid #2ecc40; border-radius: 3px; padding: 10px; margin: 10px auto; width: 50%; text-align: center; }
#lm div.lm_error                     { color: #ff4136; border-color: #ff4136;  }

.lm_add_btn a,
.lm_grid_btn,
.lm_form_lista{
    border-radius:8px !important;
    background-color:#1D84B6 !important;
    padding:5px 15px 5px 15px;
    text-decoration: none;
    color:white;
    font-weight: bold;
}
.lm_add_btn a:hover,
.lm_grid_btn:hover,
.lm_form_lista:hover{
    border:1px solid blue;
    background-color:#fff !important;
    color:black;
}

@media only screen and (max-width: 600px){
#lm table.lm_grid, 
#lm table.lm_form {
    width:100% !important;
}
#lm div.lm_form_button_bar {left:1%; bottom:12%;}
}

/*============= RESONSIVE GRID ==============*/

table.lm_grid {
  display: block;
  font-size:1.1 rem;
}

.lm_grid tr, .lm_grid td, .lm_grid th, .lm_grid tbody, .lm_grid tfoot {
  display: block;
}

.lm_grid thead, .lm_grid th {
  /*display: none;*/
  display: inline-table;
}

.lm_grid tr {
  padding-bottom: 10px;
}

.lm_grid td {
  padding: 10px 10px 0;
  text-align: center;
}
.lm_grid td:before {
  content: attr(data-title);
  /*color: #7a91aa;*/
  /*text-transform: uppercase;*/
  /*font-size: 1.4rem;*/
  padding-right: 10px;
  display: block;
}

.lm_grid th {
  text-align: left;
  font-weight: 700;
}

.lm_grid thead th, .lm_grid th {
  background-color: #202932;
  color: #fff;
  border: 1px solid #202932;
}

.lm_grid tfoot th {
  display: block;
  padding: 10px;
  text-align: center;
  color: #b8c4d2;
}

@media (min-width: 460px) {
  .lm_grid td {
    text-align: left;
    /*font-size:0.8 rem;*/
  }
  .lm_grid td:before {
    display: inline-block;
    text-align: right;
    width: 140px;
  }

  /*.select {
    padding-left: 160px;
  }*/
}
@media (min-width: 720px) {
  table.lm_grid {
    display: table;
    /*font-size:0.8 rem;*/
  }

  .lm_grid tr {
    display: table-row;
  }

  .lm_grid td, .lm_grid th {
    display: table-cell;
  }

  .lm_grid tbody {
    display: table-row-group;
  }

  .lm_grid thead th {
    display: table-header-group;
  }

  .lm_grid tfoot {
    display: table-footer-group;
  }

  .lm_grid td {
    border: 1px solid #28333f;
  }
  .lm_grid td:before {
    display: none;
  }

  .lm_grid td, .lm_grid th {
    padding: 10px;
  }

  .lm_grid tr:nth-child(2n+2) td {
    /*background-color: #242e39;*/
  }

  .lm_grid tfoot th {
    display: table-cell;
  }

  /*.select {
    padding: 10px;
  }*/
}