body {
    color: #777;
}

.help, p.help {
    font-size: 10px !important;
    color: #999;
    margin: 0pt !important;
    padding: 0pt 0pt 0pt 1.2em !important;
    line-height: 140%;
}


.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

/******
    loading image
********/
#loading.pure-img-responsive 
{
  width: 30%;
  height: 23%;
  top: 45%;
  left: 40%;
  position: fixed;
  display: block;
  background-color: #fff;
  text-align: center;
  z-index: 99;
  background: url(/images/loading_movil.gif);
}

/*
Add transition to containers so they can push in and out.
*/
#layout,
#menu,
.menu-link {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

/*
This is the parent `<div>` that contains the menu and the content area.
*/
#layout {
    position: relative;
    padding-left: 0;
}
    #layout.active {
        position: relative;
        left: 150px;
    }
        #layout.active #menu {
            left: 150px;
            width: 150px;
        }

        #layout.active .menu-link {
            left: 150px;
        }
/*
The content `<div>` is where all your content goes.
*/
.content {
    margin: 0 auto;
    padding: 0 2em;
    max-width: 800px;
    margin-bottom: 50px;
    line-height: 1.6em;
}

.content_module
{
    /*margin: 0 auto;
    padding: 0 2em;
    max-width: 890px;
    margin-bottom: 50px;
    line-height: 1.6em;*/
   border: 0px solid green;
   /* background: none repeat scroll 0% 0% #E8E8E8;*/
    letter-spacing:0em;
    *letter-spacing:normal;
    *word-spacing:0em;
    text-rendering:optimizespeed;
    font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;
    display:-webkit-flex;
    -webkit-flex-flow:row wrap;
    display:-ms-flexbox;
    -ms-flex-flow:row wrap;
    background: none repeat scroll 0% 0% #E8E8E8;
}

.header {
     margin: 0;
     color: #333;
     text-align: center;
     padding: 0em 2em 0;
     border-bottom: 1px solid #eee;
 }
    .header h1 {
        margin: 0.2em 0;
        font-size: 3em;
        font-weight: 300;
        
    }
     .header h2 {

        font-weight: 300;
        color: #ccc;
        padding: 0;
        margin-top: 0;
        
    }
    .logo
    {
        
        margin-bottom: -40px;
        padding-bottom: 20px;
        margin-top: 0px;
        margin-left: 0px;
    }

.content-subhead {
    margin: 50px 0 20px 0;
    font-weight: 300;
    color: #888;
}

.content-subhead-color
{
    margin: 50px 0 20px 0;
    font-weight: 400;
    color: #0038A5;
}

/**
Navegating site
***/
.nav 
{
    text-align: left;
    background: url("/images/base/nav-bg-reverse.gif") repeat-x scroll 0px -10px #FFF;
    padding: 2px 0px 3px;
    font-size: 15px;
    color: #999;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #CCC;
    width: 100%;
}

.nav a:link, a:visited {
    color: #5B80B2;
    text-decoration: none;
}

.content_module fieldset
{
    border: none;
    margin-top: .5em;
    margin-bottom: 1em;
    
}

.search_bar 
{
    width: 100%;
    border-style: 1px solid #CCC;
    margin-bottom: 0px;
    padding: 0px;
    padding-bottom: 0px;
    border-bottom: 1px solid #DDD;
    background: url("/images/base/nav-bg.gif") repeat-x scroll left top #E1E1E1;
    
}

.search_bar #boton_agrega
{
    margin-left: 0em;
}

input[type="text"].search_bar
{
    width: 100%;
    background: white;
}


.module_form h2, .module_form caption, .inline-group h2
 {
    margin: 0px;
    padding: 2px 5px 3px;
    font-size: 11px;
    text-align: left;
    font-weight: bold;
    background: url("/images/base/default-bg.gif") repeat-x scroll left top #7CA0C7;
    color: #FFF;
}

.module_form2 h2, .module_form2 caption, .inline-group2 h2
 {
    margin: 0px;
    padding: 2px 5px 0px;
    font-size: 11px;
    text-align: left;
    font-weight: bold;
    background: url("/images/base/default-bg.gif") repeat-x scroll left top #7CA0C7;
    color: #FFF;
}
/*
    form view
*/
form
{
    margin: 0px;
    /*width: 100%;*/
}

fieldset.module_form
{
    margin: 0px;
    padding: 0px;
    border: 1px solid #CCC;
    width: 100%;
    margin-bottom: 5px;
    background: none repeat scroll 0% 0% #FFF;
}

fieldset.module_form2
{
    margin: 0px;
    padding: 0px;
    border: 1px solid #CCC;
    background: none repeat scroll 0% 0% #FFF;
}

.aligned label {
    display: block;
    padding: 3px 10px 0px 0px;
    float: left;
    width: 11em;
}

/*

row form

*/

.form-row 
{
    overflow: hidden;
    padding: 8px 12px;
    font-size: 11px;
    border-bottom: 1px solid #EEE;
}
.form-row label
{
    font-weight: normal !important;
    color: #666;
    font-size: 12px;
}
.required label, label.required 
{
    font-weight: bold !important;
    color: #333 !important;
}

.aligned label {
    display: block;
    padding: 3px 10px 0px 0px;
    float: left;
    width: 11em;
}

.form-row input[type="text"], textarea, select
{
    vertical-align: middle;
    margin: 2px 0px;
    padding: 2px 3px;
}

 a.add {background:url(/images/base/icon_addlink.gif) 0 50% no-repeat; padding-left:14px;}

.submit-row {
    padding: 5px 7px;
    text-align: right;
    background: url("/images/base/nav-bg.gif") repeat-x scroll 0px 100% #FFF;
    border: 1px solid #CCC;
    margin: 5px 0px;
    overflow: hidden;
}



#list_obj.module table
{
    border-collapse: collapse;
    border-color: #CCC;
    width: 100%;

}
#list_obj_short.module table
{
    border-collapse: collapse;
    border-color: #CCC;
    width: 100%;

}

.prov_productos table
{
    border-collapse: collapse;
    border-color: #CCC;
    width: 100%;
}
.cpra_productos table
{
    border-collapse: collapse;
    border-color: #CCC;
    width: 100%;
}
.cpra_autorizada table
{
    border-collapse: collapse;
    border-color: #CCC;
    width: 100%;
}


.module a:link, a:visited {
    color: #5B80B2;
    text-decoration: none;
}


#list_obj.module
{
    height: 500px;
    width: 100%;
    overflow-x :auto;
    overflow-y : auto;
   /*border: 1px solid orange;*/
}
#list_obj_short.module
{
    height: auto;
    width: 100%;
    overflow-x :auto;
    overflow-y : auto;
   /* border: 1px solid orange;*/
}

.row1 {
    background: none repeat scroll 0% 0% #EDF3FE;
}

.row2 {
    background: none repeat scroll 0% 0% #FFF;
}

/*div tables para pasar articulos de uno a otro*/
.highlight
{
    background-color: #87CEFA;
}

    .prov_productos
    {
        float: left;
        height: 100px;
        width: 100%;
        margin-top: 5px;
        border: 0px solid blue;
        overflow-y: auto;
        overflow-x: auto;
    }
    .cpra_productos
    {
        float: right;
        height: 100px;
        width: 100%;
        margin-top: 5px;
        border: 0px solid red;
        overflow-y: auto;
    }
    .buttones_medio
    {
        display: inline-block;
        height: 100px;
        padding-top: 20px;
        border: 0px solid green;
    }
/*
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page.
*/

#menu {
    margin-left: -150px; /* "#menu" width */
    width: 150px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000; /* so the menu or its navicon stays above all content */
    background: #191818;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
    /*
    All anchors inside the menu should be styled like this.
    */
    #menu a {
        color: #999;
        border: none;
        padding: 0.6em 0 0.6em 0.6em;
    }

    /*
    Remove all background/borders, since we are applying them to #menu.
    */
     #menu .pure-menu,
     #menu .pure-menu ul {
        border: none;
        background: transparent;
    }

    /*
    Add that light border to separate items into groups.
    */
    #menu .pure-menu ul,
    #menu .pure-menu .menu-item-divided {
        border-top: 1px solid #333;
    }
        /*
        Change color of the anchor links on hover/focus.
        */
        #menu .pure-menu li a:hover,
        #menu .pure-menu li a:focus {
            background: #333;
        }

    /*
    This styles the selected menu item `<li>`.
    */
    #menu .pure-menu-selected,
    #menu .pure-menu-heading {
        background: #1f8dd6;
    }
        /*
        This styles a link within a selected menu item `<li>`.
        */
        #menu .pure-menu-selected a {
            color: #fff;
        }

    /*
    This styles the menu heading.
    */
    #menu .pure-menu-heading {
        font-size: 110%;
        color: #fff;
        margin: 0;
    }

/* -- Dynamic Button For Responsive Menu -------------------------------------*/

/*
The button to open/close the Menu is custom-made and not part of Pure. Here's
how it works:
*/

/*
`.menu-link` represents the responsive menu toggle that shows/hides on
small screens.
*/
.menu-link {
    position: fixed;
    display: block; /* show this only on small screens */
    top: 0;
    left: 0; /* "#menu width" */
    background: #000;
    background: rgba(0,0,0,0.7);
    font-size: 10px; /* change this value to increase/decrease button size */
    z-index: 10;
    width: 2em;
    height: auto;
    padding: 2.1em 1.6em;
}

    .menu-link:hover,
    .menu-link:focus {
        background: #000;
    }

    .menu-link span {
        position: relative;
        display: block;
    }

    .menu-link span,
    .menu-link span:before,
    .menu-link span:after {
        background-color: #fff;
        width: 100%;
        height: 0.2em;
    }

        .menu-link span:before,
        .menu-link span:after {
            position: absolute;
            margin-top: -0.6em;
            content: " ";
        }

        .menu-link span:after {
            margin-top: 0.6em;
        }


/******* login form ***********************/
 /*movil*/
 #login_form
{
    background: #F8F8FF;
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    border-radius: 15px;
}

#login_form .label_form
{
    display: block;
    color: #23250B;
    font-size: 19px;
    font-weight: 400px;
}

label.error
{
    color: red;
    font-size: 13px;
    font-weight: bold;
}

#login_form .input_entrar
{
    display: block;
    background: #FF6400;
    margin-top: 20px;
    margin-left: 180px;
    padding: 15px;
    color: #fff;
    font-size: 16px;
    border-radius: 5px;
}


#login_form .input_login {
    padding: 10px 25px;
    font-weight: 400;
    font-size: 14px;
    color: #9D9E9E;
    text-shadow: 1px 1px 0 rgba(256, 256, 256, 1.0);
    background: #FFF;
    border: 1px solid #FFF;
    border-radius: 5px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
}

#login_form .input_login:focus {
    background: #DFE9EC;
    color: #414848;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
    outline: 0;
}

#login_form .input_login:hover {
    background: #DFE9EC;
    color: #414848;
} 

#login_form .link_form
{
    display: block;
    color: #23250B;
    padding-top: 5px;
    font-size: 13px;
}

/* -- Recovery Form ------------------------------------- */

 #login_form_recovery
{
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    border-radius: 15px;
}

/* -- End Recovery Form ------------------------------------- */



/* -- Responsive Styles (Media Queries) ------------------------------------- */

/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/



@media only screen and (max-width: 760px),(min-device-width: 768px) and (max-device-width: 1024px){

/*
    Table only for mobile view
*/
    /* Force table to not be like tables anymore */
        table, thead, tbody, th, td, tr { 
            display: block; 
        }

/* Hide table headers (but not display: none;, for accessibility) */
thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
}
    
tr { border: 1px solid #ccc; }
    
td { 
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 50%;
}
    
td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
}

/*
    Label the data
*/
    td:nth-of-type(1):before { content: "Nombre"; }
    td:nth-of-type(2):before { content: "Apellido Paterno"; }
    td:nth-of-type(3):before { content: "Usuario"; }
    td:nth-of-type(4):before { content: "Perfil"; }
    td:nth-of-type(5):before { content: "Estatus"; }
    td:nth-of-type(6):before { content: "Correo"; }
    td:nth-of-type(7):before { content: "Telefono"; }

/*
   End Table for mobile view
*/

}

@media (min-width: 48em) {

    /**
        Tabla solo para desktop
    **/
   

    table thead th {
        white-space: nowrap;
    }
    .field_compra
    {
        width: 80px;
    }

    thead th:first-child, tfoot td:first-child {
        border-left: medium none !important;
    }

    thead th, tfoot td {
        color: #666;
        padding: 2px 5px;
        font-size: 11px;
        background: url("/images/base/nav-bg.gif") repeat-x scroll left top #E1E1E1;
        border-left: 1px solid #DDD;
        border-bottom: 1px solid #DDD;
        white-space:nowrap;
    }

    th {
        text-align: left;
        font-size: 14px;
        font-weight: bold;
    }

    td, th {
        font-size: 13px;
        line-height: 15px;
        border-bottom: 1px solid #EEE;
        vertical-align: top;
        padding: 4px;
        font-family: "Lucida Grande",Verdana,Arial,sans-serif;
    }

    tr
    {
        height:2em;
    }

    /**
        End En tabla para desktop
    **/
    .header,
    .content {
        padding-left: 2em;
        padding-right: 2em;
    }
    .content_module
    {
        padding-left: 3.9em;
        padding-right: 3.9em;
    }

    #layout {
        padding-left: 150px; /* left col width "#menu" */
        left: 0;
    }
    #layout_login
    {
        
        left: 0;
    }
    #menu {
        left: 150px;
    }

    .menu-link {
        position: fixed;
        left: 150px;
        display: none;
    }

    #layout.active .menu-link {
        left: 150px;
    }

    #login_form
    {
        background: #F8F8FF;
        padding-left: 200px;
        padding-top: 50px;
        padding-bottom: 10px;
        border: 1px solid black;
        border-radius: 15px;
        
    }

    input[type="text"].search_bar
    {
        width: 48%;
        background: white;
    }
    /**barra busqueda  desktop**/
    .search_bar #boton_agrega,#excel
    {
        float: right;
        margin-right: .2em;
    }
    /*No es necesario altura en las desktop en las filas de las tablas*/
    tr
    {
        height:0em;
    }

    #loading.pure-img-responsive 
    {
        width: 20%;
        height: 40%;
        top: 45%;
        left: 40%;
        position: fixed;
        display: block;
        background-color: #fff;
        text-align: center;
        z-index: 99;
        background: url(/images/loading.gif);
    }
    /**divs orden de compra**/
    .prov_productos
    {
        float: left;
        height: 200px;
        width: 40%;
        margin-top: 5px;
        border: 0px solid blue;
        overflow-y: auto;
        overflow-x: auto;
    }
    .cpra_productos
    {
        float: right;
        height: 200px;
        width: 40%;
        margin-top: 5px;
        border: 0px solid red;
        overflow-y: auto;
    }
    .cpra_autorizada
    {
        /*float: right;*/
        height: 200px;
        width: 100%;
        margin-top: 5px;
        margin-bottom: 5px;
        border: 0px solid red;
        overflow-y: auto;
        overflow-x :auto;
        background: white;
    }

    .buttones_medio
    {
        display: inline-block;
        margin-left: 10px;
        height: 200px;
        padding-top: 44px;
        border: 0px solid green;
    }

    
}

/**pagination**/
.pagination{
    display:inline-block;
    padding-left:0;
    margin:20px 0;
    border-radius:4px;
}

.pagination>li{
    display:inline
}

.pagination>li>a,.pagination>li>span{
    position:relative;
    float:left;
    padding:6px 12px;
    margin-left:-1px;
    line-height:1.428571429;
    text-decoration:none;
    background-color:#fff;
    border:1px solid #ddd
}

.pagination>li:first-child>a,.pagination>li:first-child>span{
    margin-left:0;
    border-bottom-left-radius:4px;
    border-top-left-radius:4px
}

.pagination>li:last-child>a,.pagination>li:last-child>span{
    border-top-right-radius:4px;
    border-bottom-right-radius:4px
}

.pagination>li>a:hover,.pagination>li>span:hover,.pagination>li>a:focus,.pagination>li>span:focus{
    background-color:#eee
}

.pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover,.pagination>.active>span:hover,.pagination>.active>a:focus,.pagination>.active>span:focus{
    z-index:2;
    color:#fff;
    cursor:default;
    background-color:#428bca;
    border-color:#428bca
}

.pagination>.disabled>span,.pagination>.disabled>span:hover,.pagination>.disabled>span:focus,.pagination>.disabled>a,.pagination>.disabled>a:hover,.pagination>.disabled>a:focus{
    color:#999;
    cursor:not-allowed;
    background-color:#fff;
    border-color:#ddd
}

.pagination-lg>li>a,.pagination-lg>li>span{
    padding:10px 16px;
    font-size:18px
}

.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{
    border-bottom-left-radius:6px;
    border-top-left-radius:6px
}

.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{
    border-top-right-radius:6px;
    border-bottom-right-radius:6px
}

.pagination-sm>li>a,.pagination-sm>li>span{
    padding:5px 10px;
    font-size:12px
}

.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{
    border-bottom-left-radius:3px;
    border-top-left-radius:3px
}

.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{
    border-top-right-radius:3px;
    border-bottom-right-radius:3px
}

.pager{
    padding-left:0;
    margin:20px 0;
    text-align:center;
    list-style:none
}

.pager:before,.pager:after{
    display:table;
    content:" "
}

.pager:after{
    clear:both
}

.pager:before,.pager:after{
    display:table;
    content:" "
}

.pager:after{
    clear:both
}

.pager li{
    display:inline
}

.pager li>a,.pager li>span{
    display:inline-block;
    padding:5px 14px;
    background-color:#fff;
    border:1px solid #ddd;
    border-radius:15px
}

.pager li>a:hover,.pager li>a:focus{
    text-decoration:none;
    background-color:#eee
}

.pager .next>a,.pager .next>span{
    float:right
}

.pager .previous>a,.pager .previous>span{
    float:left
}

.pager .disabled>a,.pager .disabled>a:hover,.pager .disabled>a:focus,.pager .disabled>span{
    color:#999;
    cursor:not-allowed;
    background-color:#fff
}

/**end pagination**/
 
}