#main {
    margin: 50px auto;
    width: 100%;
}

body {
   padding-bottom: 0px;
   margin: 0px;
   padding-left: 0px;
   padding-right: 0px;
   font-family: sans-serif !important;
   background: #fff;
   color: #000;
   font-size: 0.75em;
   padding-top: 0px;
}

#header {
   position: relative;
   width: 100%;
   background: #fff !important;
   height: initial;
}

#middle {
   padding-bottom: 0px;
   padding-left: 0px;
   width: 100%;
   padding-right: 0px;
   background: #fff !important;
   float: left;
   padding-top: 0px;
}

#footer {
   width: 100%;
   background: #fff !important;
   float: left;
   height: 15px;
}

#center-column {
   width: 85% !important;
   padding-left: 1.5em;
   padding-right: 1.5em;
   background: #f1f2f3;
   border: solid 1px #d8d8d8;
   border-radius: 5px;
   border-top: solid 2px #209ada;
   float: left;
   padding-top: 12px;
}

#left-column {
   padding-bottom: 0px;
   padding-left: 0px;
   width: 10%;
   padding-right: 14px;
   float: left;
   padding-top: 1px;
}

#left-column h3 {
    padding-bottom: 0px;
    line-height: 22px;
    margin: 0px;
    padding-left: 20px;
    padding-right: 0px;
    background: #209ada;
    height: 25px;
    color: #ffffff;
    font-size: 1.1em;
    padding-top: 5px;
    text-transform: uppercase; min-width: 120px;
}

ul.nav li {
   padding: 10px !important;
   background: #f1f2f3 !important;
   border-bottom: solid 1px #d8d8d8;
}

ul.nav {
    border-bottom:transparent ;
    padding-bottom: 0px;
    list-style-type: none;
    margin: 0px 0px 11px;
    padding-left: 2px;
    padding-right: 2px;
    background: #ecefe7;
    list-style-image: none;
    padding-top: 0px;
}

#left-column .link {
    padding-bottom: 0px;
    line-height: 32px;
    margin: 10px 0px 0px;
    padding-left: 20px;
    width: initial;
    padding-right: 0px;
    display: block;
    background: #d8d8d8;
    height: 30px;
    color: #60635a;
    font-weight: bold;
    padding-top: 0px;
    text-transform: uppercase; min-width: 120px;
}

.top-bar {
    padding-bottom: 0px;
    margin: 10px 0px 0px;
    padding-left: 0px;
    width: 100%;
    padding-right: 0px;
    float: left;
    padding-top: 0px;
}

.top-bar h1 {
    margin: 0px;
    font-family: sans-serif;
    color: #209ada;
    text-transform: uppercase; min-width: 120px;
    font-size: 2em;
    font-weight: lighter;
}

table.listing .first {
    text-align: left;
    border-left: #f1f2f3 0px solid;
}

table.listing {
    border: #a3acb6 1px solid !important;
    background: #e0e3e6;
    width: 100% !important;
    margin: 10px 0px !important;
    padding: 10px 10px !important;
    border-radius: 5px;
}

table.listing .first {
    text-align: left;
    border: #f1f2f3 0px solid;
}
table.form td {
  padding-left: 0px;
}

table.listing td {
  color: #42474e;
  /*text-transform: uppercase;*/ min-width: 120px;
  border: solid 0px #f00 !important;
}


td.first {width: 45%; padding-right: 30px !important;}
td.last {width: 45%; padding-left: 30px !important;}


table.display td {padding: 5px 10px; !important}
tr.odd.pagarvisa td.sorting_1 {background-color: rgba(32, 154, 218, 0); !important}
tr.even.pagarvisa td.sorting_1 {background-color: rgba(32, 154, 218, 0); !important}


select.select {
  background: url(https://www.delex.cl/img/tri.png) no-repeat right #fff;
  border: solid 1px #d8d8d8 !important;
  color: #60635a;
  padding: 0px 10px;
  font-size: 1em;
  line-height: 1;
  border-radius: 5px;
  height: 30px;
  -webkit-appearance: none;
  margin: 0px 10px 0px 0px !important;
}

select.select.mini{
  height: 20px !important;
  font-size: 14px !important;
  border-radius: 3px !important;
  margin: 3px 0px !important;
  border: solid 1px #b1b1b1 !important;
}

input.input {
  border-radius: 5px;
  border: solid 1px #d8d8d8;
  padding: 7px 10px;
  margin: 0px 10px 0px 0px !important;
  color: #42474e;
  font-size: 1em;
}

input.input.mini{
  height: 8px !important;
  font-size: 14px !important;
  margin: 3px 0px !important;
  border-radius: 3px !important;
  border: solid 1px #b1b1b1 !important;
  padding: 5px 10px !important;
}

textarea.textarea {
  border-radius: 5px;
  border: solid 1px #d8d8d8;
  padding: 7px 10px;
  margin: 0px 10px 0px 0px !important;
  color: #42474e;
  font-size: 14px;
  font-family: sans-serif;
}

textarea.textarea.mini{
  margin: 3px 0px !important;
  border-radius: 3px !important;
  border: solid 1px #b1b1b1 !important;
  padding: 5px 10px !important;
  font-size: 14px !important;
}


input.input, select.select, textarea.textarea{
      margin: 5px 0px !important;
}


input.boton.delex {
  background: #209ada;
  border: solid 1px #1d82b7;
  border-bottom: solid #0f5283;
  padding: 0px 20px;
  height: 30px;
  border-radius: 5px;
  color: #fff;
  font-size: 1em;
  float: initial;
}

input[type="button"].boton.delex {
  background: #209ada;
  border: solid 1px #1d82b7;
  border-bottom: solid #0f5283;
  padding: 6px 20px;
  border-radius: 5px;
  color: #fff;
  font-size: 1em;
  float: initial;
}

input[type="button"].boton.delex.verde {
  background: #68ca23;
  border: solid 1px #629919;
  border-bottom: solid #32830f;
  padding: 6px 20px;
  border-radius: 5px;
  color: #fff;
  font-size: 1em;
  float: initial;
}

input[type="button"].boton.delex:disabled {
  background: #cccccc;
  border: solid 1px #808080;
  border-bottom: solid #000000;
  padding: 6px 20px;
  border-radius: 5px;
  color: rgb(0, 0, 0);
  font-size: 1em;
  float: initial;
}

input.boton.delex:hover {
    background: #1E85CE;
    cursor: pointer;
}

input[value="buscar"] {
    float: right;
}



.input.full.width{width: 100% !important;}
.select.full.width{width: 100% !important;}
.textarea.full.width{min-width: 100% !important;}

.input.big.width{width: 70% !important;}
.select.big.width{width: 75% !important;}
.textarea.big.width{min-width: 70% !important;}

.input.half.width{width: 50% !important;}
.select.half.width{width: 50% !important;}
.textarea.half.width{min-width: 50% !important; width: 50%;}

.input.small.width{width: 17% !important;}
.select.small.width{width: 22% !important;}
.textarea.small.width{min-width: 14% !important;}

input#tags {
    width: 100%;
    border-radius: 5px;
    border: solid 1px #d8d8d8;
    padding: 5px 15px;
    margin: 5px;
    width: 95%;
    color: #42474e;
    font-size: 1em;
}

.logo {
    float: left;
    width: 160px;
}

.bloque {
    float: right;
    width: 85%;
    padding-right: 10px;
}

.usuario {
    padding: 0;
    margin-top: 45px;
    margin-bottom: 6px;
    margin-left: 158px;
    margin-right: 6px;
}

.bloque.tercio{width:33%;}
.bloque.cuarto{width:25%;}
.bloque.medio{width:50%;}
.bloque.entero{width:100%;}


.mensaje-micuenta{
   float: right;
   width: 82right;
   width: 82%;
}




[value=guardar] {
  background-color:#2099da;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  display:inline-block;
  cursor:pointer;
  color:#ffffff;
  font-family: sans-serif;
  font-size:15px;
  padding:5px 20px;
  text-decoration:none;
  border: 0;
}
[value=guardar]:hover {
  background-color:#0a73a8;
}
[value=guardar]:active {
  position:relative;
  top:1px;
}

input#xxvalue{
   border-radius: 5px;
   border: solid 1px #d8d8d8;
   padding: 5px 10px;
   margin: 10px 0px;
   width: 80%;
   color: #42474e;
   font-size: 1em;
}

[value=go]{
   background-color: #2099da;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: sans-serif;
    font-size: 15px;
    padding: 5px 20px;
    margin: 10px 0px;
    width: 95%;
    text-decoration: none;
    border: 0;
}   

input[type="submit"] {
    background: #209ada;
    border: solid 1px #209ada;
    border-bottom: solid #0f5283;
    padding: 0px 15px;
    height: 28px;
    border-radius: 5px;
    color: #fff;
    float: right;
}

input[type="submit"]:hover {
    background: #1e85ce;
    cursor: pointer;
}

.conversor {
    background: #f1f2f3;
    border: solid 1px #d8d8d8;
    padding: 10px;
}

.conversor select {
    width: 140px;
    margin-bottom: 1em;
}


.dolar{
   font-size: 1.5em;
   color: #42ac48;
   text-align: right;
   background: #f1f2f3;
   border: solid 1px #d8d8d8;
   margin: 10px 0px 20px 0px;
   padding: 10px;
   border-radius: 5px;
   border-top: solid 2px #42ac48;
   width: 1010px;
}

table#lista tr {
    height: 3em;
}


.breadcrumbs {
  padding: 10px 0px;
  font-size: 1.2em;
  font-weight: 100;
  color: #60635a;
  width: 750px;
}


select[name=lista_length] {
    width: 100px;
}

.tab.estado{width: 15% !important;}
.tab.producto{width: 100% !important;}
.tab.id{width: 100px !important;}
.tab.total{width: 100px !important;}
.tab.usd{width: 100px !important;}
.tab.ganancia{width: 100px !important;}
.tab.fecha{width: 100px !important;}
.tab.mini{width: 100px !important;}




/* ZEBRADO 
tr.even td.sorting_1{background-color: transparent !important;}
tr.odd td.sorting_1{background-color: transparent !important;} 
tr.odd {background-color: #f1f2f3 !important;}
tr.even {background-color: rgba(255, 255, 255, 0.3) !important;}
*/

.cliente.avatar {
  float: left;
  margin-right: 2em;
}

.cliente.avatar img {
  border-radius: 50%;
  border: solid #145e91;
  background: #145e91;
  width: 100px;
  height: 100px;
}

a .link.simple {
  float: left;
  padding: 0px;
  margin-right: 20px;
  margin-top: 18px;
  margin-bottom: 10px;
  text-decoration: underline;
  text-transform: capitalize;
  font-weight: 600;
  color: #135d91;
}

form.saldo {
  float: left;
  margin: 10px 0px;
}


table.toggle{
  width: 100%;
}

table.toggle tr td{
  text-align: left;
}

table.toggle tr td:first-child {
  width: 150px;
  text-align: left;
}

table.estado.masivo {
  width: 92%;
}

table.estado.masivo tr td{
  text-align: left;
}

table.estado.masivo tr td:first-child {
  width: 100px;
  text-align: left;
}

#btn-masivo{
  line-height: 32px;
  display: block;
  background: #d8d8d8;
  height: 30px;
  color: #60635a;
  font-weight: bold;
  text-transform: uppercase; min-width: 120px;
   text-align: center;
}


.cabecera{
  background: #209ada !important;
  width: 100%;
  color: #ffffff !important;
  font-size: 1.2em;
  font-weight: bold;
  text-transform: uppercase; min-width: 120px;
  border: 0px !important;
  letter-spacing: 0.5px;
  text-align: left !important;
}

.datos.venta{
  width: 750px !important;
}

.datos.venta tr td.first {
  width: 25%;
  padding-left: 10px;
  font-weight: 400 !important;
}

.datos.venta tr td.last p {
  /*width: 30%;*/
  /*float: left;*/
}

.datos.venta tr td.last {
  color: #5f6872 !important;
}

.datos.venta tr td.last a {
  color: #002ad0;
  text-decoration: none;
  text-transform: capitalize;
  vertical-align: middle;
}

.datos.venta tr td.last a:hover {
  color: #002ad0;
  text-decoration: underline;
  cursor: pointer;
  text-transform: capitalize;
}

.flag {
    width: 25px;
    position: absolute;
    margin-left: 10px;
}


.fecha.embarque{
  width: 1000px !important;
}

.dimension {
    width: 300px;
}

.dimension div:first-child {
    width: 60px;
    float: left;
    padding-top: 5px;
}




/* navbar */

ul#navbar {
  list-style-type: none;
  margin: 0;
  padding: 0em 3em;
  overflow: hidden;
  background-color: #209ada;

  /*fixed*/
  position: fixed;
  top: 0;
  /*min-width: 1215px;*/
  width: 100%;
  z-index: 1;
  /*fixed*/
}

ul#navbar li {
    float: left;
    display: table;
}

ul#navbar li a, ul#navbar li p {
    display: block;
    color: white;
    text-align: center;
    padding: 0px 20px;
    text-decoration: none;
    height: 40px;
    display: table-cell;
    vertical-align: middle;
}

ul#navbar li a:hover:not(.active) {
    background-color: #2b81ba;
}

ul#navbar .active {
    background-color: #2b81ba;
}

img.avatar {
    height: 35px;
    width: 35px;
    margin-top: 2px;
    border-radius: 50%;
}

marquee.marquee {
    /*width: 450px;*/
    color: #115385;
    margin-top: 13px;
}

marquee b{text-transform: uppercase; min-width: 120px;}
marquee b.blanco{
  color: #fff;
  font-size: 1.3em;
  font-weight: 100;
}

.margintop{
  margin-top: 50px !important;
}

.fecha-embarque{
  width: 300px;
  float: none;
  margin-left: 360px;
}

.fecha-embarque div{
  width: 70px;
  float: left;
}


table.pagar.visa {
    width: 50% !important;
}

table.pagar.visa td:first-child {
    text-align: left;
    padding: 5px 10px;
    font-weight: bolder;
    color: #3e464e;
}

table.pagar.visa td:last-child {
    text-align: left;
    padding: 5px 10px;
    color: #5f6872;
}

table.pagar.visa td {
    text-align: left;
    padding: 5px 10px;
    color: #5f6872;
}

































a {color: #060606; text-decoration: none}
a:hover {  text-decoration: underline}
#top-navigation li a {
  padding-bottom: 0px; line-height: 19px; padding-left: 0px; padding-right: 0px; display: block; float: left; height: 20px; color: #606060; padding-top: 4px
}
ul.nav a {
  padding-bottom: 0px; padding-left: 12px; padding-right: 0px; background: url(https://www.delex.cl/images/arrow.gif) no-repeat 0px 4px; padding-top: 0px
}

table.listing .bg td {
  background: rgba(255, 255, 255, 0.3);
}

table.listing th {
  padding-bottom: 5px; padding-left: 5px; padding-right: 5px; background: #9097a9; color: #fff; padding-top: 5px
}
table.listing td {
  padding-bottom: 3px; padding-left: 5px; padding-right: 5px; color: #000; padding-top: 3px
}
table.listing .bg td {
  background: rgba(255, 255, 255, 0.3);
}
table.listing .white td {
  background: #fff
}
table.listing .first {
  text-align: left; border-left: #9097a9 0px solid
}
table.listing .last {
  border-right: #9097a9 0px solid
}
table.listing {
  border-bottom: #9097a9 1px solid; border-left: #9097a9 1px solid; padding-bottom: 0px; margin: 0px; padding-left: 0px; width: 613px; padding-right: 0px; border-top: #9097a9 1px solid; border-right: #9097a9 1px solid; padding-top: 0px
}
table.listing th {
  border-top: 0px
}
  
table.listing th {
  border-bottom: #fff 1px solid; text-align: center; border-left: #fff 1px solid; border-top: #fff 1px solid; border-right: #fff 1px solid
}



/* Responsiveness adjustments */
@media (max-width: 768px) {
    /* Tables */
    table.listing, table#lista {
        display: block;
        overflow-x: auto;
        width: 100%; /* Ensure table adapts to smaller screens */
    }
    table.listing th, table.listing td {
        white-space: nowrap; /* Prevent breaking text */
        padding: 5px; /* Reduce padding for smaller screens */
    }

    /* General layout adjustments */
    .big.width, .half.width, .small.width {
        width: 100% !important; /* Ensure full width on small screens */
        padding: 10px; /* Add consistent padding */
    }

    .collapsible {
        width: 100%; /* Ensure collapsibles take full width */
    }

    /* Adjust font sizes for smaller screens */
    body {
        font-size: 14px; /* Decrease font size slightly */
    }
}

/* Additional corrections for specific elements */
.dataTables_wrapper {
    overflow-x: auto; /* Add horizontal scroll for tables */
    min-height: auto; /* Allow dynamic height */
}

table.display {
    width: 100%;
    margin: 0 auto;
}

table.display th, table.display td {
    padding: 3px 10px;
}

table.display thead th {
    text-align: center; /* Center align table headers */
    padding: 5px 10px; /* Reduce padding for smaller screens */
}

table.display td.center {
    text-align: center;
}

/* Pagination adjustments */
.dataTables_paginate {
    width: auto;
    text-align: center;
}

.paginate_button, .paginate_active {
    padding: 2px 5px;
    margin: 0 3px;
}

/* Font adjustments for small devices */
@media (max-width: 768px) {
    .dataTables_wrapper {
        font-size: 12px;
    }
    .big.width, .half.width, .small.width {
        font-size: 12px;
    }
}

/* Optional improvements for better experience */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}