@import "https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700";
:root {
  --bg-side1:#000;
  --bg-side2:#28a745;
}
html, body { background: #000000; width: 100%; position: absolute; top: 0; bottom: 0; font-size: 1rem;
	font-family: "Roboto", "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/*- Login */
.cssmsgbox  { width: auto; height: auto; color:#000; margin:3%; padding:3%; }
.div-center { width: 400px auto; height: auto;  background-color: #fff; 
  position: absolute;  left: 0; right: 0; top: 0; bottom: 0; max-width: 100%; max-height: 100%; overflow: auto;
  margin: auto; padding: 1em 2em; border-bottom: 1px solid #ccc; display: table; box-shadow: 1px 1px 5px;  }
/*- LogInOk */
div.container { width: 100%; margin: 0 auto; padding:0; background-color: #fff; height: 100%;}
p { font-family: 'Roboto', sans-serif; font-size: 1.1em; font-weight: 300; line-height: 1.7em; color: #999; }
/* a, a:hover, a:focus { color: inherit; text-decoration: none; transition: all 0.3s; } */
div.btn { 
    text-align: left; font-size:1.2em; font-weight:bold; color:#404040;
    border-left: 6px solid #28a745;  background:#ffffff;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .26);
    -webkit-box-shadow: 0 4px 5px -3px #808080; -moz-box-shadow: 0 4px 5px -3px #808080; box-shadow: 0 4px 5px -3px #808080; 
}
div.btn:not([disabled]):active, .btn:not([disabled]):focus, .btn:not([disabled]):hover { background-color:#9fd4a0!important; }
div.btn a { color: #28a745; text-decoration: none; outline: none; }
div.btn a:visited, a:focus, :hover{ color: #444; }

.dataTables_filter { float: left !important; }
table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { background-color:#ccffcc; }

a.volver, a.volver:hover, a.volver:focus { 
  display: block; width: 100%;
  background-image: linear-gradient(to right, rgb(40, 167, 69, 1) , rgb(40, 167, 69,0.5)); 
  margin:0.1em 0 0.5em 0; padding: 0.5em; border-radius:0.2em; 
  font-size: 1em; font-weight: bold; color:#fff;  text-decoration: none; outline: none;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .26); text-align: right; }

/*MENU*/
#sidebarMenu { display: block;}
#trigger-menu span { display: block; }
#sidebar { min-width: 200px; max-width: 200px; background: var(--bg-side1); color: #fff; transition: all 0.3s; margin: 0; padding: 0;}
#sidebar.active { margin-left: -200px;}
#sidebar ul.components { padding: 5px 0; border-bottom: 1px solid #444; }
#sidebar ul li a { padding: 5px; font-size: 1.1em; display: block; color:#e0e0e0; text-decoration: none }
#sidebar ul li a:hover { color: var(--bg-side1); background: #fff; font-weight: bold;}
#sidebar ul li.active>a, a[aria-expanded="true"] { color: #fff; }
a[data-toggle="collapse"] { position: relative; color: #fff; }
.dropdown-toggle::after { display: block; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); }


/*- MEDIAQUERIES ---------- */
@media (max-width: 768px) {
  #sidebar { margin-left: -200px; }
  #sidebar.active { margin-left: 0px; }
  #sidebarMenu { display: none; }
}