body {
    background-color: #F2F2F2;
    margin: 0;
    padding: 0;
    text-align: left;
}

/*Layout*/
#container {
    width: 958px;
    margin-left: auto;
    margin-right: auto;
}

.table {
    width: 958px;
    clear: both;
    *position: absolute;
}

.column {
    float: left;
}

.colMenu {
    width: 218px;
}

.colContenido {
    padding-left: 10px;
    width: 730px;
}

/****Menú superior****/
#FntMenuSuperior {
    text-align: right;
    position: relative;
}

    #FntMenuSuperior .usuarioConectado {
        text-align: left;
        overflow: hidden;
        padding-right: 12px;
        vertical-align: 0px;
        white-space: nowrap;
        position: relative;
        text-overflow: ellipsis;
        max-width: 320px;
        float: left;
        clear: both;
    }

    #FntMenuSuperior .black {
        font-weight: normal;
        color: #000000;
        font-family: Open Sans, Tahoma, Arial, Helvetica, Verdana, sans-serif;
        font-size: 10px;
        vertical-align: middle;
    }

    #FntMenuSuperior .enlace {
        cursor: pointer;
        text-decoration: underline;
    }

    #FntMenuSuperior .separador {
        margin-left: 12px;
        margin-right: 12px;
        width: 1px;
        height: 10px;
        background-color: #fe8b0c;
        display: inline-block;
        vertical-align: middle;
    }

    #FntMenuSuperior .icono {
        vertical-align: middle;
        display: inline-block;
        width: 15px;
        height: 12px;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAA8CAYAAAC5OOBJAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xMzQDW3oAAAEaSURBVEhLtZBRDsMgDEP7v6vvzl2TERRMHELVPskamDy0cpzneTthWU1YVhOW1fwX389ZDpOPhFS2AZ0E/DmVBbwAz1JZsH3UL2WBdSU5gsrloLzDJN9NWFazRSrbo7RtJ3osKvsLfJfKwjDsomcrWYhE4V0ZRYueZTIOC74ryW3bKckrJhmLnYRlNRP9+1paraQyDgu+e0eWISZbT2WByW2Zy8IwDJelsgyjPOyZnEptHcp+kKEXMrmUSK4yyVjsJCyrCbFvbNvOUh4eCC5IZRSmPZNx0PB9KKPI9s/LwkrW30zOojNMrvCsjMVOwrKaDj5OGRTKF7BB+xcsfUgXF369Qmcfkz3S2xn7VYbNhd+noiGlpVULjuMHc7/le3Ps8n8AAAAASUVORK5CYII=') /*/imagenes/ico_sprite.png*/;
    }

.icono.ico-contacto {
    background-position: 0 0;
}

.icono.ico-password {
    background-position: 0 12px;
}

.icono.ico-inicio {
    background-position: 0 24px;
}

.icono.ico-usuario {
    background-position: 0 36px;
}

.icono.ico-salir {
    background-position: 0 48px;
}

/**Menú de opciones**/
.navbg {
    background: #000000;
    background-position: 45px 0;
    background-repeat: repeat-y;
    *min-height: 800px;
}

.nav {
    font-family: Arial, Tahoma, Helvetica, Verdana, sans-serif;
    font-size: 10px;
    color: #000000;
}

#navigation, #navigation ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    width: 218px;
    cursor: pointer;
}

.mainMenu, .subMenu li, .sinMenu {
    display: block;
    padding: 3px 0 3px 16px;
    border-top: 1px solid white;
    background: #C7C7C7;
}

.mainMenu, .subMenu li {
    background-image: url('data:image/gif;base64,R0lGODlhBgAGAIABAP///wAAACH5BAEAAAEALAAAAAAGAAYAAAIKTABmuOjPTlKxAAA7') /*../imagenes/opc_menu.gif*/;
    background-repeat: no-repeat;
}

.mainMenu {
    background-position: 5px center;
}

.subMenu li {
    text-indent: 15px;
    background-position: 20px 6px;
}

/**Contenido**/
#contenedor {
    width: 730px;
    text-align: center;
    padding-bottom:5px;
}

#logo_ventas {
    width: 200px;
    height: 30px;
    vertical-align:central;
    text-align: center;
    color: #FFFFFF;
    font-size:24px;
    font-weight:bold;
}

.FondoCruzTitulo {
    /*display: block;
    width: 730px;*/
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #FFFFFF;
    background-color: #000000;
}

.pnlFondo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 101;
    display:flex;
    display:block\9;/*IE10 tiene flex pero a la vez pilla los \9 y metería demasiado margen*/
    justify-content:space-around;
    align-items:center;
}

.pnlFondoAlfa {
    z-index: 100;
    opacity: 0.5;
    filter: alpha(opacity=50);
    background-color: #005C85;
}

.pnlModal {
    margin-left: auto\9;
    margin-right: auto\9;
    margin-top: 230px\9;
    background-color: white;
    padding-bottom: 5px;
    box-shadow: 0 0 1px 0;
}

.pnlModal-titulo{
    /*width: auto;*/
    border: 1px solid white;
}

/*Titulo de las páginas*/
h3, .h3 {
    margin: 0;
    font-size: 18px;
    font-family: Tahoma, Arial, Helvetica, Verdana, sans-serif;
}

h4, .h4 {
    margin: 0;
    font-size: 12px;
    font-family: Tahoma, Arial, Helvetica, Verdana, sans-serif;
    font-weight: normal;
}

h5, .h5 {
    margin: 0;
    font-size: 10px;
    font-weight: normal;
    font-family: Tahoma, Arial, Helvetica, Verdana, sans-serif;
    text-decoration: none;
}

h5.OrangeOsc, h5.OrangeOscNgt, .h5.OrangeOsc, .h5.OrangeOscNgt, h4.OrangeOsc, h4.OrangeOscNgt, .h4.OrangeOsc, .h4.OrangeOscNgt {
    font-family: Verdana;
}

.black {
    color: #000000;
}

/**Login**/
.login {
    color: #FFFFFF;
    font-weight: normal;
}

.inputtextblack {
    background-color: #FFFFFF;
    border: black;
    border-style: solid;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    font-size: 7pt;
    font-family: Verdana;
}

.btnForm {
    background-color: #FFFFFF;
    font-family: Verdana;
    font-size: 8pt;
    font-weight: normal;
    color: #000000;
    cursor: pointer;
    border: 1px solid black;
}

/* Clases generales*/
.GrayNgt {
    color: #747474;
    font-weight: bold;
}

.Mensaje {
    color: #B05E00;
    font-weight: normal;
    margin: 0;
    font-size: 12px;
    font-family: Tahoma, Arial, Helvetica, Verdana, sans-serif;
    line-height: 30px;
}

.OrangeOsc {
    color: #B05E00;
    font-weight: normal;
}

.OrangeOscNgt {
    color: #B05E00;
    font-weight: bold;
}

.inputtextgray {
    background-color: #EFEFEF;
    border: 1px solid #545454;
    font-size: 7pt;
    font-family: Verdana;
    text-transform: uppercase;
    color: #000000;
    vertical-align: middle;
    box-sizing: border-box;
    min-height: 16px;
    *min-height: 12px;
    /**padding:0;*/
}

    .inputtextgray[disabled] {
        background-color: #E6E6E8;
        color: grey;
    }

.invalid {
    border-color: #820000;
    background-color: #FFE0E0;
}

.btnFormGray {
    background-color: #AAAAAA;
    font-size: 10px;
    font-family: Tahoma, Arial, Helvetica, Verdana, sans-serif;
    font-weight: normal;
    color: #000000;
    border: 3px groove #545454;
    cursor: pointer;
    height: 22px;

    margin: -3px 0 0 0;
}

    .btnFormGray[disabled] {
        background-color: lightgray;
        color: grey;
        border-color: darkgray;
        cursor: default;
    }

.btnIzq {
    float: left;
    margin: -3px 2px 0 0;
}

.btnDer {
    float: right;
    margin: -3px 0 0 2px;
}

sup {
    text-transform: lowercase;
    font-size: 6pt;
    vertical-align: top;
    position: relative;
    top: -0.5em;
}

@-moz-document url-prefix(){
    sup{
        top:0;
    }
}

.BrdMantizqsup {
    border-top: 1px solid #747474;
    border-left: 1px solid #747474;
}

.BrdMantDrchInf {
    padding: 1px;
    border-width: 1px;
    border-color: #747474;
    border-right-style: solid;
    border-bottom-style: solid;
}

.Select {
    background-color: #747474;
    font-size: 10px;
    font-family: Tahoma, Arial, Helvetica, Verdana, sans-serif;
    cursor: pointer;
    color: #FFFFFF;
    font-weight: bold;
}

.UnSelect {
    border-right: solid 1px #747474;
    border-bottom: solid 1px #747474;
    background-color: Transparent;
    font-size: 10px;
    font-family: Tahoma, Arial, Helvetica, Verdana, sans-serif;
    color: #B05E00;
    font-weight: bold;
    cursor: pointer;
}

/*Criterios de búsqueda*/
.BusquedaNgt {
    color: #555555;
    font-weight: bold;
}

.Busqueda {
    color: #555555;
    font-weight: normal;
}


.ParrafoError15 {
    margin-bottom: 5px;
    color: #000000;
    font-size: 15px;
    font-weight: normal;
    font-family: Tahoma, Arial, Helvetica, Verdana, sans-serif;
    letter-spacing: 1px;
    line-height: 30px;
}


/** ESTILOS SOLICITUD **/
.seccion {
    clear: both;
    text-align: left;/*Quitar cuando se quite text-align de #contenedor*/
    margin-top: 15px;
}

.bordeSup {
    border-top: 1px dotted #B05E00;
}

.bordeInf {
    border-bottom: 1px dotted #B05E00;
}

.radio {
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.checkbox {
    margin: 2px;
    padding: 0;
    vertical-align: middle;
}

/**Tooltip**/
.tooltipFlecha {
    color: #CDCDCD;
    margin-left: 7px;
    font-size: 7px;
    line-height: 4px;
    height: 4px;
    text-align: left;
}

.tooltip {
    background-color: whitesmoke;
    border: 1px solid #CDCDCD;
    padding: 3px;
    word-wrap: break-word;
    max-width: 442px;
    min-width: 12px;
}



/**CLASES JQUERY UI**/

.ui-icon {
    width: 16px;
    height: 16px;
    display: block;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
}

/* Sprite de iconos en diferentes colores */
.ui-state-default .ui-icon {
    background-image: url("../css/images/ui-icons_777777_256x240.png");
}

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
    background-image: url("../css/images/ui-icons_555555_256x240.png");
}

.ui-state-active .ui-icon {
    background-image: url("../css/images/ui-icons_ffffff_256x240.png");
}

/* Icono hacia abajo */
.ui-icon-carat-1-s {
    background-position: -64px 0;
}


/**Autocomplete**/
.ui-button-icon-primary {
    line-height: normal;
    cursor: pointer;
}

/* Foco sobre el botón */
.ui-state-highlight {
    border: 1px solid #dad55e;
    background: #fffa90;
    color: #777620;
    font-size: 8pt;
    font-family: Tahoma;
}

/* Botón activo */
.ui-state-active {
    border: 1px solid #003eff;
    background: #005c85;
    font-weight: normal;
    color: #ffffff;
}

/*Estilo de la caja, la posición luego se recalcula*/
.ui-autocomplete {
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #cccccc;
    background: #eeeeee;
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    max-height: 200px;
    overflow-y: auto;
}

/* Estilo de un elemento de la caja */
.ui-menu-item {
    cursor: pointer;
    padding: 0;
    text-indent: 2px;
    text-align: left;
    color: black;
    font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    font-size: 7pt;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    /*Foco del ratón o del teclado*/
    .ui-menu-item:hover, .ui-state-focus {
        background: #005c85;
        color: white;
    }

/* Mensaje cuando no se encuentran resultados en el autocomplete */
.ui-tooltip {
    padding: 4px;
    position: absolute;
    z-index: 9999;
    max-width: 300px;
    box-shadow: 0 0 5px #aaa;
    font-size: 7pt;
    margin-top: -10px;
}

body .ui-tooltip {
    border-width: 2px;
}

/**Combobox**/
.custom-combobox {
    position: relative;
    display: inline-block;
    text-align: left;
    vertical-align: middle; /*Se podría quitar cuando en todos los sitios donde se utilice estuvieran metidos dentro de .row, .col */
}

.custom-combobox-toggle {
    /*position: absolute;
    top: 0;
    bottom: 0;*/
    margin: 0px;
    padding: 0;
    border: 1px solid #545454;
    width: 16px;
    height: 14px;
    /**top: 2px;*/
    display: inline-block;
}

.custom-combobox-toggle[disabled]{
    background-color: #E6E6E8;
    color: grey;
    cursor:default;
}

.custom-combobox-toggle[disabled] .ui-button-icon-primary{
    cursor:default;
}

.custom-combobox-input {
    margin: 0;
    text-indent: 2px; /*Evitar el desplazamiento si carga lento y se ve momentaneamente el <select/>*/
    *text-indent: 0;

    float:left;
    margin-right: -1px;
}

/**DATE PICKER**/

/*Clase que se añade al contenedor donde se genera el DP*/
input.hasDatepicker {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgAgMAAABm5xBfAAAACVBMVEUAAABAQECwXgCuum0SAAAAAXRSTlMAQObYZgAAAD9JREFUeF5tyqERACAQA8GIMJOhqhe0QD8vqYUqwQARnFpxsIJA6T3AbRPZjtpT+PctBdQ5E9o2SeNoPKV/twX3VROQqlaGaQAAAABJRU5ErkJggg==') /*../imagenes/calendario.png*/;
    background-repeat: no-repeat;
    background-position: 74px -17px;
    text-indent: 4px;
    width: 90px;
    padding-right: 14px;
    *background-position: 73px -17px;
    *width: 87px;
    *padding-right: 0;
}

    input.hasDatepicker[disabled] {
        background-position: 74px -1px;
    }

/*Contenedor del dp, ¡¡si no se pone, antes de abrirlo sale debajo de la página!!*/
#ui-datepicker-div {
    display: none; /*Para que inicialmente no se muestre cuando se crea*/
    padding: 1px;
    background-color: #F2F2F4;
    border: 1px solid grey;
}

/*Cabecera del mes*/
.ui-datepicker-header { /*Contenedor*/
    background-color: #005C85;
    padding: 3px;
    position: relative;
}

.ui-datepicker-prev .ui-icon, .ui-datepicker-next .ui-icon { /*Iconos*/
    background-image: url("/css/images/ui-icons_ffffff_256x240.png");
}

.ui-datepicker-next, .ui-datepicker-prev { /*Botones mes anterior/siguiente*/
    border: 1px solid #005C85;
    cursor: pointer;
    position: absolute;
    top: 3px;
}

.ui-datepicker-prev { /*Posición botón anterior*/
    left: 3px;
}

.ui-icon-circle-triangle-w { /*Flecha hacia la izquierda*/
    background-position: -80px -192px;
}

.ui-datepicker-next { /*Posición botón siguiente*/
    right: 3px;
}

.ui-icon-circle-triangle-e { /*Flecha hacia la derecha*/
    background-position: -48px -192px;
}

.ui-datepicker-prev-hover, .ui-datepicker-next-hover { /*Botones resaltados*/
    background: #0577AB;
    border-color: #6CABC7;
}

.ui-datepicker .ui-datepicker-title { /*Mes que se está mostrando*/
    font-size: 11px;
    text-align: center;
    font-family: Tahoma, Arial,Arial, Helvetica, sans-serif,Verdana,sans-serif;
    font-weight: bold;
    color: white;
    line-height: 18px;
}

/*Cuadrícula de los días del mes*/
.ui-datepicker table { /*Contenedor*/
    border-collapse: collapse;
    font-family: Tahoma, Arial, Helvetica, Verdana, sans-serif;
    font-size: 10px;
}

.ui-datepicker th { /*Cabecera: días de la semana*/
    padding: 3px 0 2px 0;
    text-align: center;
    font-weight: bold;
    border: 0;
    color: #B05E00;
}

.ui-datepicker td { /*Columnas de los días*/
    width: 24px;
}

    .ui-datepicker td span, .ui-datepicker td a { /*Día*/
        display: block;
        padding: 1px;
        text-align: right;
        text-decoration: none;
        color: #747474;
        font-weight: bold;
    }

.ui-datepicker-calendar td a { /*Día habilitado para poder ser seleccionado*/
    font-weight: normal;
    color: #555555;
    border: 1px solid #d3d3d3;
    background: #e6e6e6;
}

.ui-datepicker-calendar td.ui-datepicker-unselectable span { /*Día deshabilitado*/
    font-weight: normal;
    color: #AAAAAA;
    border: 1px solid #E6E3E3;
    background: #F1EFEF;
}

.ui-datepicker-calendar .ui-state-hover, .ui-datepicker-calendar .ui-state-focus { /*Día con el foco*/
    color: #212121;
    border: 1px solid #999999;
    background: #dadada;
}

.ui-datepicker-calendar .ui-datepicker-today .ui-state-default { /*Día actual*/
    font-weight: bold;
}

.ui-datepicker-calendar .ui-datepicker-current-day .ui-state-default { /*Dia seleccionado*/
    font-weight: bold;
    color: #b05e00;
    border: 1px solid #b05e00;
    background: #EFCBA2;
}


/**Layout**/

.text-left{
    text-align: left;
}
.text-right{
    text-align: right;
}
.text-center {
    text-align: center;
}

.row {
    clear:both;
    min-height:20px;
    /*background: url(/imagenes/ruler30.png);*/
 }

.row-stacked {
    clear:both;
    min-height:28px;
    /*background: url(/imagenes/ruler30.png);*/
}


.row-overflow{
    overflow: auto;
    *overflow: visible;
}

.row-padding{
  padding: 0px 5px;
  /*background-position-x:5px;*/ 
  *padding: 0px 4px;
  /**background-position-x:4px;*/ 
}

.row-margin {
  margin-top: 5px; 
}

.row-margin-x1-5{
margin-top: 7px; 
}

.row-margin-x2 {
  margin-top: 10px; 
}

.row-margin-x3 {
  margin-top: 15px; 
}

.clickable {
    cursor: pointer;
}

.data-table {
    border-collapse: collapse; 
    border: 1px solid #747474;
    *table-layout: fixed;
}

.data-table th {
    height: 28px;
    text-align: center; 
    border-color: #747474;
    border-left: 1px solid #747474;
}

.data-table td {
    text-align: center;
    border-color: #747474;
    border-top: 1px solid #747474;
    border-left: 1px solid #747474;
    /*padding: 0 1px;*/
    height:13px;
}

.data-table table th { /*Tablas interiores*/
    height:15px;
    font-weight: normal;
}

.data-table table td {
    font-weight: normal;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
}

.col {
    float: left; 
    *padding-left:1px;
    *padding-right:1px;
}

.fill {
    width:100%;
}

input.col{
    *padding-left:0;
    *padding-right:0;
}

label.col {
  /*Centrar verticalmente*/
    line-height: 16px;
    *overflow: hidden;
    *text-overflow: ellipsis;
    *white-space: nowrap; 
}

select.col {
    *filter: 
    progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0,color=#545454)
    progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0,color=#545454);
}

.row-stacked .col{
    *padding:0;
    *display:inline;
}


.col-1 {
  width: 30px;
  *width: 28px; }

.col-2 {
  width: 60px;
  *width: 58px; }

.col-3 {
  width: 90px;
  *width: 88px; }

.col-4 {
  width: 120px;
  *width: 118px; }

.col-5 {
  width: 150px;
  *width: 148px; }

.col-6 {
  width: 180px;
  *width: 178px; }

.col-7 {
  width: 210px;
  *width: 208px; }

.col-8 {
  width: 240px;
  *width: 238px; }

.col-9 {
  width: 270px;
  *width: 268px; }

.col-10 {
  width: 300px;
  *width: 298px; }

.col-11 {
  width: 330px;
  *width: 328px; }

.col-12 {
  width: 360px;
  *width: 358px; }

.col-13 {
  width: 390px;
  *width: 388px; }

.col-14 {
  width: 420px;
  *width: 418px; }

.col-15 {
  width: 450px;
  *width: 448px; }

.col-16 {
  width: 480px;
  *width: 478px; }

.col-17 {
  width: 510px;
  *width: 508px; }

.col-18 {
  width: 540px;
  *width: 538px; }

.col-19 {
  width: 570px;
  *width: 568px; }

.col-20 {
  width: 600px;
  *width: 598px; }

.col-21 {
  width: 630px;
  *width: 628px; }

.col-22 {
  width: 660px;
  *width: 658px; }

.col-23 {
  width: 690px;
  *width: 688px; }

.col-24 {
  width: 720px;
  *width: 718px; }

.col-0-1 {
  width: 15px;
  *width: 13px; }

.col-1-2 {
  width: 45px;
  *width: 43px; }

.col-2-3 {
  width: 75px;
  *width: 73px; }

.col-3-4 {
  width: 105px;
  *width: 103px; }

.col-4-5 {
  width: 135px;
  *width: 133px; }

.col-5-6 {
  width: 165px;
  *width: 163px; }

.col-6-7 {
  width: 195px;
  *width: 193px; }

.col-7-8 {
  width: 225px;
  *width: 223px; }

.col-8-9 {
  width: 255px;
  *width: 253px; }

.col-9-10 {
  width: 285px;
  *width: 283px; }

.col-10-11 {
  width: 315px;
  *width: 313px; }

.col-11-12 {
  width: 345px;
  *width: 343px; }

.col-12-13 {
  width: 375px;
  *width: 373px; }

.col-13-14 {
  width: 405px;
  *width: 403px; }

.col-14-15 {
  width: 435px;
  *width: 433px; }

.col-15-16 {
  width: 465px;
  *width: 463px; }

.col-16-17 {
  width: 495px;
  *width: 493px; }

.col-17-18 {
  width: 525px;
  *width: 523px; }

.col-18-19 {
  width: 555px;
  *width: 553px; }

.col-19-20 {
  width: 585px;
  *width: 583px; }

.col-20-21 {
  width: 615px;
  *width: 613px; }

.col-21-22 {
  width: 645px;
  *width: 643px; }

.col-22-23 {
  width: 675px;
  *width: 673px; }

.col-23-24 {
  width: 705px;
 }

.col-off-1 {
  margin-left: 30px; }

.col-off-2 {
  margin-left: 60px; }

.col-off-3 {
  margin-left: 90px; }

.col-off-4 {
  margin-left: 120px; }

.col-off-5 {
  margin-left: 150px; }

.col-off-6 {
  margin-left: 180px; }

.col-off-7 {
  margin-left: 210px; }

.col-off-8 {
  margin-left: 240px; }

.col-off-9 {
  margin-left: 270px; }

.col-off-10 {
  margin-left: 300px; }

.col-off-11 {
  margin-left: 330px; }

.col-off-12 {
  margin-left: 360px; }

.col-off-13 {
  margin-left: 390px; }

.col-off-14 {
  margin-left: 420px; }

.col-off-15 {
  margin-left: 450px; }

.col-off-16 {
  margin-left: 480px; }

.col-off-17 {
  margin-left: 510px; }

.col-off-18 {
  margin-left: 540px; }

.col-off-19 {
  margin-left: 570px; }

.col-off-20 {
  margin-left: 600px; }

.col-off-21 {
  margin-left: 630px; }

.col-off-22 {
  margin-left: 660px; }

.col-off-23 {
  margin-left: 690px; }

.col-off-24 {
  margin-left: 720px; }

.col-off-0-1 {
  margin-left: 15px; }

.col-off-1-2 {
  margin-left: 45px; }

.col-off-2-3 {
  margin-left: 75px; }

.col-off-3-4 {
  margin-left: 105px; }

.col-off-4-5 {
  margin-left: 135px; }

.col-off-5-6 {
  margin-left: 165px; }

.col-off-6-7 {
  margin-left: 195px; }

.col-off-7-8 {
  margin-left: 225px; }

.col-off-8-9 {
  margin-left: 255px; }

.col-off-9-10 {
  margin-left: 285px; }

.col-off-10-11 {
  margin-left: 315px; }

.col-off-11-12 {
  margin-left: 345px; }

.col-off-12-13 {
  margin-left: 375px; }

.col-off-13-14 {
  margin-left: 405px; }

.col-off-14-15 {
  margin-left: 435px; }

.col-off-15-16 {
  margin-left: 465px; }

.col-off-16-17 {
  margin-left: 495px; }

.col-off-17-18 {
  margin-left: 525px; }

.col-off-18-19 {
  margin-left: 555px; }

.col-off-19-20 {
  margin-left: 585px; }

.col-off-20-21 {
  margin-left: 615px; }

.col-off-21-22 {
  margin-left: 645px; }

.col-off-22-23 {
  margin-left: 675px; }

.col-off-23-24 {
  margin-left: 705px; }