/* ------------------------------------------------------------
** ESTILOS GENERALES
** ------------------------------------------------------------ */

@import 'https://fonts.googleapis.com/css?family=Ranchers|Roboto:400,700';

*
{
    box-sizing: border-box;
}

body
{
    padding    : 0px 0px 0px 0px;
    margin     : 0px 0px 0px 0px;
    color      : #222222;
    font-family: Roboto, arial;
    font-size  : medium;
    font-weight: normal;
    overflow-x : hidden;
    background-color: #cccccc;
}

h3
{
    margin     : 20px 0px 10px 0px;
    font-family: Ranchers, Roboto, arial;
    font-size  : large;
    font-weight: normal;
}

table
{
    margin   : 20px 60px 0px 60px;
    min-width: 600px;
    border-collapse : collapse;
    background-color: #111111;
    border-radius: 10px;
}

td
{
    padding    : 10px 0px 10px 0px;
    color      : #dddddd;
    font-family: Ranchers, arial;
    font-size  : large;
    font-weight: normal;
    text-align : center;
}

select
{
    padding    : 5px;
    outline    : 0px;
    border     : 1px solid #999999;
    color      : #222222;
    font-family: inherit;
    font-size  : inherit;
    background-color: #ffffff;
}

optgroup
{
    background-color: #dddddd;
}

optgroup option
{
    background-color: #ffffff;
}

canvas
{
    display: none;
    margin : 10px 0px 0px 0px;
    padding: 0px;
    background-color: #111111;
}

.container
{
    padding: 0px 60px 0px 60px;
}

.enlace
{
    cursor: pointer;
}

.hidden, [hidden]
{
    display: none !important;
}

/* ------------------------------------------------------------
** BARRA DE NAVEGACION
** ------------------------------------------------------------ */

.appbar
{
    padding    : 3px 0px 2px 60px;
    color      : #ffffff;
    font-family: Ranchers, arial;
    font-size  : x-large;
    font-weight: normal;
    text-shadow: 1px 1px 1px #000000;
    text-decoration : none;
    background-color: #888888;
}

.navbar
{
    padding    : 0px 0px 0px 60px;
    margin     : 0px;
    color      : #ffffff;
    font-family: inherit;
    font-size  : inherit;
    font-weight: normal;
    white-space: nowrap;
    text-decoration : none;
    background-color: #666666;
}

.navbar li
{
    padding   : 8px 10px;
    border    : none;
    cursor    : pointer;
    display   : inline-block;
    text-align: center;
}

.navbar li:hover
{
    background-color: #444444;
}

.navbar li[disabled=disabled]
{
    color: #999999;
    pointer-events: none;
}

/* ------------------------------------------------------------
** FOOTER
** ------------------------------------------------------------ */

footer
{
    margin     : 40px 0px 0px 0px;
    padding    : 20px 60px 40px 60px;
    border-top : 5px solid #666666;
    color      : #ffffff;
    font-family: inherit;
    font-size  : inherit;
    font-weight: normal;
    text-decoration : none;
    background-color: #333333;
}

footer a
{
    color: #aaaaaa;
    text-decoration: none;
}

footer a:hover
{
    color: #cccccc;
    text-decoration: none;
}

footer img
{
    padding: 2px;
    margin : 2px 20px 0px 0px;
    height : 115px;
    width  : auto;
    float  : left;
    border : 2px solid #ffffff;
    background-color: #222222;
}

/* ------------------------------------------------------------
** ALERTAS
** ------------------------------------------------------------ */

.alert
{
    padding: 15px;
    border : 1px solid transparent;
    border-radius: 4px;
    font-weight: normal;
}

.alert-danger
{
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.alert-success
{
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.alert-info
{
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.alert-warning
{
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

/* ------------------------------------------------------------
** AJUSTA LAS FORMATOS PARA MOVILES
** ------------------------------------------------------------ */

@media (max-width: 720px)
{
    body   {font-size: small;}
    .container {padding: 0px 15px 0px 15px;}
    .appbar{font-size: large; padding-left: 10px;}
    .navbar{font-size: small; padding-left: 0px;}
    h3     {font-size: small;}
    td     {font-size: x-small; padding: 5px 0px 5px 0px;}
    table  {min-width: 0; width: 100%; margin: 0px; border-radius:0px;}
    select {font-size: small;}
    footer {font-size: small; padding: 20px 15px 40px 15px;}
    footer img {display: none;}
}

/* ------------------------------------------------------------
** SCROLL BAR
** ------------------------------------------------------------
** $darkGray  : #222;
** $mediumGray: #999;
** $gray      : #d9d9d9;
** $lightGray : #f5f5f5
** ------------------------------------------------------------ */

::-webkit-scrollbar
{
    width : 5px;
    height: 5px;
}

::-webkit-scrollbar-track
{
    background: #d9d9d9;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

::-webkit-scrollbar-thumb
{
    background: #999;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

::-webkit-scrollbar-thumb:hover
{
    background: #888;
}