html { position: relative; min-height: 100%; }


body { margin: 0; margin-bottom: 100px; padding: 0; background: #AAA; }


::-webkit-input-placeholder { font-style: italic; font-size: 14px; font-weight: 400;}
:-moz-placeholder { font-style: italic; font-size: 14px; font-weight: 400; }
::-moz-placeholder { font-style: italic; font-size: 14px; font-weight: 400; }
:-ms-input-placeholder { font-style: italic; font-size: 14px; font-weight: 400; }
::-ms-input-placeholder { font-style: italic; font-size: 14px; font-weight: 400; }


.vertical-nav {
  min-width: 17rem;
  width: 17rem;
  min-height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.4s;
}

.page-content {
  width: calc(100% - 17rem);
  margin-left: 17rem;
  transition: all 0.4s;
  position: absolute;
  top: 0;
  left: 0;

}


#sidebar.active { margin-left: -17rem; }
#sidebar .logo { padding: 0.5rem 0px 0px 0.5rem; }
#sidebar .logo a img { max-height: 50px; }
#sidebar .logo a img { max-height: 50px; }
#sidebar hr { margin: 2px 5px 25px 5px; }
#sidebar a.text-dark:hover { color: inherit; background-color: #dae0e5; }

#content.active { width: 100%; margin: 0; }
#content h2 { font-size: 2vw; text-transform: uppercase; font-weight: 300; } */
@media (min-width: 768px) and (max-width: 991px) {
#content h2 { font-size: 3vw; }
.lead { font-size: 1vw !important; }
}

@media (max-width: 767px) {
#content h2 { font-size: 6vw; }
.lead { font-size: 4vw !important; }
}



@media (max-width: 768px) {
  #sidebar {
    margin-left: -17rem;
  }
  #sidebar.active {
    margin-left: 0;
  }
  #content {
    width: 100%;
    margin: 0;
  }
  #content.active {
    margin-left: 17rem;
    width: calc(100% - 17rem);
  }
}


footer { position: absolute; bottom: 0px; width: 100%; xheight: 50px; background-color: #222222; padding: 0; }
footer p { padding-top: 10px; text-align: center; }
footer a, footer a:hover, footer a:active, footer a:focus { color: #777; font-size: 0.9em; text-decoration: none; outline: 0; }
footer a:hover { color: #999; }


table tr.clickable-row { cursor: pointer; }
tabla tr:nth-of-type(odd) { background-color:#FFF; }
table tr:nth-of-type(even) { background-color:#FAFAFA; }
table th { border: 1px solid #FFF; background: #337AB7; color: #FFF; white-space: nowrap; cursor: default; }


input.static-copy { width: 100%; border: 0; padding: 0; color: #aaa; background: inherit; font-size: 0.7em; font-style: italic; font-weight: bold; text-align: right; }
.form-control { background: #ffffee !important; }

.modal.success .modal-content { color: #fff; background-color: #449d44; border-color: #398439; }
.modal.alert .modal-content { color: #fff; background-color: #c9302c; border-color: #ac2925; }


.nav-tabs li a { background-color: #D0D0D0; color: inherit; }


.main-content, .tab-content { padding: 20px 30px; background: #F0F0F0; margin-bottom: 20px; border: 1px solid #DDD; border-radius: 5px; }
.tab-content { border-top: 0; }
.main-content h1, .tab-content h1 { color: #FFF; margin: 0; margin-bottom: 20px; padding: 13px; font-size: 1.0em; text-transform: uppercase; font-weight: 700; background-color: #969696; border-radius: 5px; }
.main-content h1 span, .tab-content h1 span { font-size: large; }


.form .form-action a.btn, .form-action button.btn { width: 150px; }
.form span.help-block { margin-left: 10px; font-size: 0.8em; font-weight: 600; }
.form .field-area { background: #F0F0F0; padding: 15px; border-radius: 5px; }
.form label { font-size: 0.9em; margin-bottom: 2px; }
.form hr { border-top: 1px solid #DDD; }
.form .input-group-addon { background-color: #fff; }
.form .alert-info.helper { font-size: 0.9em; line-height: 1.25; padding: 8px; margin: 5px 0px 0px 0px; } 
.form .feedback ul { margin: 0px; padding-left: 15px; list-style-position: outside; }
.form .feedback ul li { font-size: 0.9em; }


/**/


.noroute ul { margin: 25px 0px; list-style-position: inside; }  
.noroute p { margin: 25px 0px; }

.forbidden ul { margin: 25px 0px; list-style-position: inside; }  
.forbidden p { margin: 25px 0px; }

.fatal .panel { margin-top: 45px; box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.15); }
.fatal .excl { display: table-cell; width: 95px; color: #aa0000; text-align: left; vertical-align:top; font-size: 70px; }
.fatal .text { display: table-cell; padding-top: 5px; vertical-align:top; }
.fatal .sect { margin-bottom: 15px; }
.fatal .sect .last { margin-bottom: 0; }
.fatal .sect h3 { margin-bottom: 2px; text-transform: uppercase; font-size: 12px; font-weight: 700; }
.fatal .sect .details { padding: 10px; background: #fefef6; border: 1px solid #cccccc; font-family: Courier; font-size: 8pt; overflow: auto; }


/**/


p.explain, .explain p, .explain ul { font-size: 0.9em; line-height: 1.25; }


/**/


.system-maintenance {}
.system-maintenance .panel { margin-top: 150px; }


/**/


.auth .panel { margin-top: 40px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); }
.auth .panel-body { position: relative; padding: 30px 50px; background: #fafafa; }
.auth .panel-body .links { position: absolute; right: 10px; bottom: 10px; }
.auth .panel-body .links a { font-size: 12px; color: inherit; text-decoration: underline; }

.auth.login #auth_pass { width: 80%; }

.auth.tfa .attempts { font-weight: 600; font-size: 0.9em; margin-bottom: 5px; color: #A94442; text-align: center; }
.auth.tfa p.force { background: #FFF; padding: 30px; border: 1px solid #DDD; border-radius: 4px; }


/**/


.separator { margin: 3rem 0; border-bottom: 1px dashed #fff; }


/**/


.html2image .converted { margin-top: 20px; }
.html2image .converted a img { border: 0; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); }
.html2image .converted .lead a { color: #fff; text-decoration: underline; }
.html2image .converted span { color: #fff; font-style: italic; }


/**/


.base64-encode {}
.base64-encode form p button { width: 100%; }


/**/


.url-encode {}
.url-encode form button { min-width: 150px;; }


/**/


.hashes form label { color: #fff; font-weight: bold; }
.hashes form button { min-width: 150px;; }