/*
===============================================
            4. Dashboard Main Content
===============================================
*/

/*hides de parent-container's scroll (header and ui-view-container)*/
/*md-content#appContent::-webkit-scrollbar{
    width: 0;
}

md-content::-webkit-scrollbar {
    width: 0;               
  }*/
md-table-container::-webkit-scrollbar {
    width: 0;               /* width of the entire scrollbar */
  }

  body::-webkit-scrollbar {
    width: 0;               /* width of the entire scrollbar */
  }

/* ui-view-container scroll*/
md-dialog-content::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px transparent;
    /*border-radius: 10px;*/
    background-color: transparent;
}
md-dialog-content::-webkit-scrollbar{
    width: 10px;
    height: 0;
    background-color: transparent;
}
md-dialog-content::-webkit-scrollbar-thumb{
    border-radius: 8px;
    -webkit-box-shadow: inset 0 0 6px transparent;
    background-color: #8C152B;
}
md-dialog-content::-webkit-scrollbar-thumb:hover{
    background-color: #8C152B;
}


/********************SCROLL MD-CONTENT/

/* ui-view-container scroll*/
md-content::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px transparent;
    /*border-radius: 10px;*/
    background-color: transparent;
}
md-content::-webkit-scrollbar{
    width: 10px;
    height: 0;
    background-color: transparent;
}
md-content::-webkit-scrollbar-thumb{
    border-radius: 8px; 
    -webkit-box-shadow: inset 0 0 6px transparent;
    background-color: #8C152B;
}
md-content::-webkit-scrollbar-thumb:hover{
    background-color: #8C152B;
}


md-tab-content::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px transparent;
    /*border-radius: 10px;*/
    background-color: transparent;
}
md-tab-content::-webkit-scrollbar{
    width: 10px;
    height: 0;
    background-color: transparent;
}
md-tab-content::-webkit-scrollbar-thumb{
    border-radius: 8px;
    -webkit-box-shadow: inset 0 0 6px transparent;
    background-color: #8C152B;
}
md-tab-content::-webkit-scrollbar-thumb:hover{
    background-color: #8C152B;
}



/*
===============================================
            0. estadoo-envio
===============================================
*/
.title-estado{
    font-size: 12px;
    padding: 6px 10px;
    color: white;
    background-color: #039be5;
    margin-left: 5px;
    max-width: 131px;
    padding-top: 7px;
    text-align: center;
    margin-bottom: 0px;
}

.bck-clr2{
    background-color: #2d323e;
}

.clr1{
    color: #039be5;
}

.clr2{
    color: #005178;
}

.flex-div{
     display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
        margin-top: 0;
    padding-top: 0;
}

.back-envio{
    width: 108px;
    height: 120px;
    position: relative;
    margin-right: -4px;
    background: url(../images/1-direction.svg) no-repeat;
}

.back-envio2{
    width: 108px;
    height: 120px;
    position: relative;
    margin-left: -19px;
    background: url(../images/2-direction.svg) no-repeat;
}

.back-envio3{
    width: 108px;
    height: 120px;
    position: relative;
    margin-left: -19px;
    background: url(../images/5-direction.svg) no-repeat;
}
.back-envio4{
    width: 108px;
    height: 120px;
    position: relative;
    margin-left: -19px;
    background: url(../images/6-direction.svg) no-repeat;
}
.back-envio5{
    width: 108px;
    height: 120px;
    position: relative;
    margin-left: -19px;
    background: url(../images/7-direction.svg) no-repeat;
}


.back-prdcto{
    width: 108px;
    height: 120px;
    position: relative;
    background: url(../images/3-direction.svg) no-repeat;
}

.back-prdcto2{
    width: 108px;
    height: 120px;
    position: relative;
    margin-left: -19px;
    background: url(../images/4-direction.svg) no-repeat;
}

.few-left{
        margin-left: -15px;
}
.few-left2{
            margin-left: -14px;
}
/*
.op-products{
    background-color: hsla(0,0%,100%,0.70);
    background-blend-mode: overlay;
    background-repeat: no-repeat;
}*/

.area-txt{
    width: 74px;
    height: 90px;
    margin: 0 auto;
    margin-left: 18px;
    margin-top: 14px;
    position: absolute;
    z-index: 2;
}

.area-txt2{
    width: 80px;
    height: 90px;
    margin: 0 auto;
    margin-left: 29px;
    margin-top: 14px;
    position: absolute;
    z-index: 2;
}

.estade{
    font-size: 10px;
    font-weight: 600;
    width: 50px;
}

.type-carga{
       font-size: 10px;
    font-weight: 600;
    margin: 0;
}

.date_estados{
       font-size: 9px;
    margin-bottom: 0;
}

.time_estados{
    font-size: 9px;
    margin: 0;
}

.back-estado-envio{
    width: 100%;
    height: 100%;
    position: absolute;
}
.back-estado-producto{
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.5;
}

.observations{
       position: absolute;
    width: 24px;
    bottom: 0;
    left: 11px;
}

.align-text{
        display: block;
    width: 129px;
}

.space-label{
    width: 130px;
    display: block;
}

.space-label2 {
    width: 74px;
    display: block;
}

.space-label3 {
    width: 80px;
    display: block;
}

/*
===============================================
            1. md-table custom
===============================================
*/

md-toolbar.md-table-toolbar-size-custom {
    min-height: 54px; 
}
md-toolbar.md-table-toolbar-size-custom div.size-custom{
    max-height: 54px;
}

table.md-table thead.md-head > tr.header-size-custom {
    height: 46px;
}
table.md-table tbody.md-body > tr.row-size-custom{
    height: 38px;
}
table.md-table tbody.md-body > tr > td > div.row-status {
    display: inline-block;
    vertical-align: middle;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    margin-right: 8px;
}
table.md-table tbody.md-body > tr > td > div > div.row-status {
    display: inline-block;
    vertical-align: middle;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    margin-right: 8px;
}


table.md-table.slim td.md-cell:nth-child(n+3):nth-last-child(n+2),
table.md-table.slim th.md-column:nth-child(n+3):nth-last-child(n+2) {
    padding: 0 12px 0 0;
}
table.md-table.slim td.md-cell:nth-child(n+3):nth-last-child(n+2),
table.md-table.slim th.md-column:nth-child(n+3):nth-last-child(n+2) {
    padding: 0 12px 0 0;
}
table.md-table:not(.md-row-select).slim td.md-cell:nth-child(n+2):nth-last-child(n+2),
table.md-table:not(.md-row-select).slim th.md-column:nth-child(n+2):nth-last-child(n+2) {
    padding: 0 12px 0 0;
}

/*
===============================================
            2. Validations input hints
===============================================
*/
.inputdemoErrorsAdvanced {
  /* NOTE: Check the demo's HTML to see some additional RTL support CSS */
  /* Setup animations similar to the ng-messages */ }
  .inputdemoErrorsAdvanced .hint {
    /* Position the hint */
    /*position: absolute;*/
    left: 2px;
    right: auto;
    bottom: 7px;
    /* Copy styles from ng-messages */
    font-size: 12px;
    line-height: 14px;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
    /* Set our own color */
    /*color: grey; */
    color: rgb(213,0,0)}
  .inputdemoErrorsAdvanced .hint.ng-hide,
  .inputdemoErrorsAdvanced .hint.ng-enter,
  .inputdemoErrorsAdvanced .hint.ng-leave.ng-leave-active {
    bottom: 26px;
    opacity: 0; }
  .inputdemoErrorsAdvanced .hint.ng-leave,
  .inputdemoErrorsAdvanced .hint.ng-enter.ng-enter-active {
    bottom: 7px;
    opacity: 1; }


/*
===============================================
            2. ships
===============================================
*/
span.ship {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
  }

/*
===============================================
            3. Hints
===============================================
*/
.hint {
    margin-top: 8px;
    font-size: 12px;
    line-height: 14px;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
    color: grey; 
}
.hint.ng-hide,
.hint.ng-enter,
.hint.ng-leave.ng-leave-active {
    bottom: 26px;
    opacity: 0; 
}
.hint.ng-leave,
.hint.ng-enter.ng-enter-active {
    bottom: 7px;
    opacity: 1; 
}


.error-hint {
    font-size: 12px;
    line-height: 14px;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
    color: rgb(213,0,0)
}

/*
===============================================
            3. Simple Table
===============================================
*/

table.simple-table {
    border-collapse: collapse;
    width: 100%;
}

table.simple-table thead {
    /*background-color: green;*/
    /*color: green;*/
}

table.simple-table thead tr th {
    border: 1px solid #dddddd;
    text-align: center;
    font-size: 12px;
    padding: 8px 16px;
}

table.simple-table tbody tr td, 
table.simple-table tfoot tr td {
    border: 1px solid #dddddd;
    text-align: center;
    font-size: 13px;
    padding: 8px;
}

/* table.simple-table tbody {
    background-color: green;
    color: green;
} */

table.simple-table tbody tr:nth-child(even) {
    background-color: #dddddd;
}








body > md-toolbar {
  z-index: 3;
}


/*********** ESTADOS PEDIDO-DETALLE **************/
.historial-estados-container{    
    margin: 30px 0px;
}

.historial-estados-box{    
    color: white;
    padding: 5px 5px;
    border-radius: 10px;
}

.historial-estados-box h2{
    font-weight: bold; 
    font-size: 9px;
    text-align: center;
}

.historial-estados-box h3{
    margin: 0px;
    font-size: 9px;
    text-align: center;
}

.historial-estados-box h4{
    margin-top: 0px;
    font-size: 9px;
    text-align: center;
    margin: 10px 0px 0px 0px;
}

.historial-line{    
    width: 12px;
    height: 6px;
}

.input-table-header{
    margin-top: 40px;
}


/*********** Dialog ecommerce details **************/
.detail-list-group{
    color:rgba(0, 0, 0, 0.87);        
    font-size: 13px;
}

.detail-list-item{
    margin: 2px 0px;
}

.detail-list-item > label{
    font-weight: bold;
    margin-right: 2px;
}

/* TOOLBAR CUSTOM ICONS COLOR */

md-toolbar.md-default-theme:not(.md-menu-toolbar) md-icon, md-toolbar:not(.md-menu-toolbar) md-icon.toolbar {
    color: rgba(125, 125, 125, 1);
    fill: rgba(125, 125, 125, 1);
}

md-input-container:not(.md-input-invalid).md-input-focused md-icon.toolbar{
    color: rgb(3,155,229);
}

.md-open-menu-container{
    zoom: 1.25;
}

.indicador-no-disponible {
    font-size:20px;
    color:#b9bcc0;
}

md-toolbar.toolbar-size-custom {
    min-height: 48px; 
}
md-toolbar.toolbar-size-custom div {
    max-height: 48px;
}


/*********** MD-FORMS **************/

.inputs-with-subheader{
    padding-left: 16px;
}

md-input-container.tight {
    display: inline-block;
    position: relative;
    padding: 2px;
    margin: 0px ;
    vertical-align: middle;
}

md-input-container.tight-select {
    display: inline-block;
    position: relative;
    padding: 2px;
    margin-top: 0px ;
    vertical-align: middle;
}

/*********** MD-LIST **************/
md-list.tight-list{
    padding: 0px 0px 8px 0px;
}

md-list.tight-list > md-list-item{
    height: 36px;
    min-height: 36px;
}

md-list.tight-list > md-list-item p{
    font-size: 14px;
    /*color: #9e9e9e;*/
}


/*
===============================================
            3. md-progress
===============================================
*/
#plz_wait md-progress-circular.md-default-theme path, #plz_wait md-progress-circular path {
    stroke: white;
}
#plz_wait div.loading-text {
    color: white;
    margin-top: 8px;
    font-weight: 500;
}

/*
===============================================
            3. md-button
===============================================
*/
.horizontal-form {
    margin-top: 16px;
    min-height: 32px;
    height: 32px;
    line-height: 16px;
}


/*
===============================================
            3. md-large-toolbar
===============================================
*/
md-toolbar.large-toolbar {
    background-color: #0277BD !important;
    min-height: 152px;
    padding-top: 8px;
}

md-toolbar.large-toolbar div.md-toolbar-tools > md-icon {
    color: rgba(255, 255, 255, 0.75);
    margin-right: 8px;
}

md-toolbar.large-toolbar div.md-toolbar-tools > span {    
    color: rgba(255, 255, 255, 0.75);
    font-weight: normal;    
}

md-toolbar.large-toolbar md-input-container > label  {
    font-size: 16px;    
}

md-toolbar.large-toolbar md-input-container > md-select{
    font-size: 16px;
    font-weight: 400;
}

md-toolbar.large-toolbar form {
    padding: 0px 16px;
    margin: 0px 16px;
}


/*
===============================================
            3. charts
===============================================
*/
.chart {
    min-height: 375px;
    margin: 8px 192px !important;
}

.chart-detail-table {
    min-height: 375px;
    margin: 8px 192px !important;
}



/*
===============================================
            3. Incrusted Table
===============================================
*/
.toolbar-table-incrusted {
    padding-bottom: 45px;
}

.content-table-toolbar-incrusted {
    margin-top: -57px;
    z-index: 9;
    padding: 0 24px;
    background-color: transparent;
}

.content-table-toolbar-incrusted table{
    background-color: white;
}

.content-table-toolbar-incrusted md-table-container{
    background-color: white;
}

.content-table-toolbar-incrusted table > thead{
    /*border-bottom: 1px solid rgba(119, 119, 119, 0.6);*/
}


/*
===============================================
            3. Dialog full screen
===============================================
*/
md-dialog.full-screen {
    height: 100%;    
}



/*
===============================================
            3. md-progress
===============================================
*/
div.progress-container {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 10px;
}



/*
===============================================
            3. md-progress
===============================================
*/
h4.tablon-grid-tittle {
    font-size: 13px;
    margin: 0;
    padding-bottom: 0px;
}

div.tablon-grid {
    /*background-color: grey;*/
    font-size: 12px;
}

div.tablon-grid > div.tablon-grid-group{
    /*background-color: red*/
    border-right: 1px solid grey;
}

div.tablon-grid > div.tablon-grid-group > div.group-name{
    /*background-color: yellow;*/
    background-color: rgb(220, 220, 220);
    padding-left: 8px;
    /*text-align: center;*/
    width: 175px;
    border-right: 1px solid grey; 
    border-left: 1px solid grey;
    border-bottom: 1px solid grey; 

    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    display: -webkit-flex;
    justify-content: center;
}

div.tablon-grid > div.tablon-grid-group > div.group-list{
    /*background-color: orange;*/
    background-color: rgba(3, 155, 229, 0.15);
    -webkit-box-flex: 1;
    flex: 1;
}

div.tablon-grid > div.tablon-grid-group > div.just-one{
    padding: 3px 0 3px 8px;
    border-bottom: 1px solid grey;
    min-height: 20px;
}

div.tablon-grid > div.tablon-grid-group > div.group-list > div {
    border-bottom: 1px solid grey;    
}

div.tablon-grid > div.tablon-grid-group > div.group-list > div > label {
    width: 175px;    
    padding: 3px 0 3px 8px;
    word-wrap: break-word;
    border-right: 1px solid grey;

    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    display: -webkit-flex;
    justify-content: center;
}

div.tablon-grid > div.tablon-grid-group > div.group-list > div > span {
    word-wrap: break-word;
    padding: 2px 8px;

    min-width: 0;
    -webkit-box-flex: 1;
    box-sizing: border-box;
    flex: 1;
}


/*
===============================================
            3. md-progress
===============================================
*/
.ms-form-wizard,.ms-form-wizard md-tabs md-tabs-wrapper{box-shadow:0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12)}.ms-form-wizard{background:#FFF}.ms-form-wizard md-tabs md-tabs-wrapper md-tabs-canvas,.ms-form-wizard md-tabs md-tabs-wrapper md-tabs-canvas md-pagination-wrapper{height:72px}.ms-form-wizard md-tabs md-tabs-wrapper md-tabs-canvas md-pagination-wrapper md-tab-item{opacity:1!important;padding:24px}.ms-form-wizard md-tabs md-tabs-wrapper md-tabs-canvas md-pagination-wrapper md-tab-item:before{content:'';display:block;position:absolute;top:50%;left:0;right:50%;border-bottom:1px solid rgba(0,0,0,.12);z-index:8}.ms-form-wizard md-tabs md-tabs-wrapper md-tabs-canvas md-pagination-wrapper md-tab-item:after{content:'';display:block;position:absolute;top:50%;left:50%;right:0;border-bottom:1px solid rgba(0,0,0,.12);z-index:8}.ms-form-wizard md-tabs md-tabs-wrapper md-tabs-canvas md-pagination-wrapper md-tab-item:first-of-type:before,.ms-form-wizard md-tabs md-tabs-wrapper md-tabs-canvas md-pagination-wrapper md-tab-item:last-of-type:after{display:none}.ms-form-wizard md-tabs md-tabs-wrapper md-tabs-canvas md-pagination-wrapper md-tab-item.md-disabled .ms-form-wizard-step-label .ms-form-wizard-step-number{background:rgba(0,0,0,.12)!important}.ms-form-wizard md-tabs md-tabs-wrapper md-tabs-canvas md-pagination-wrapper md-tab-item .md-ripple-container{z-index:11}.ms-form-wizard md-tabs md-tabs-wrapper md-tabs-canvas md-ink-bar{display:none!important}.ms-form-wizard .ms-form-wizard-step-label{display:inline-block;position:relative;background:#FFF;z-index:10;padding:0 16px;line-height:24px}.ms-form-wizard .ms-form-wizard-step-label .ms-form-wizard-step-number{display:inline-block;vertical-align:middle;width:24px;height:24px;line-height:24px;font-size:14px;margin-right:12px;border-radius:50%;color:#FFF!important}.ms-form-wizard .ms-form-wizard-step-label .ms-form-wizard-step-number i{line-height:24px!important}.ms-form-wizard .ms-form-wizard-step-label .ms-form-wizard-step-text{display:inline-block;vertical-align:middle;position:relative;line-height:24px}.ms-form-wizard .ms-form-wizard-form{padding:24px 16px}.ms-form-wizard .navigation{padding:16px}.ms-form-wizard .navigation .steps{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:0 16px}.ms-form-wizard .navigation .steps span{width:5px;height:5px;margin:0 4px;border-radius:50%}.ms-form-wizard .navigation .steps span:not(.md-accent-bg){background:rgba(0,0,0,.12)}.ms-form-wizard .navigation .steps span.selected{width:8px;height:8px}

.ms-form-wizard md-tabs .md-tab.md-active {
    color: rgb(45,50,62);
    font-weight: 600;
}

.ms-form-wizard md-tabs md-tab-item md-icon{
    color: #FFF!important;
    font-size: 18px;
    height: 18px;
    width: 18px;
    min-height: 18px;
    min-width: 18px;
}

.ms-form-wizard .ms-form-wizard-step-label .ms-form-wizard-step-number {
    background-color: rgb(3,155,229);
}



/*
===============================================
            3. md-custom-forms
===============================================
*/

md-input-container > md-checkbox, md-input-container > md-radio-group {
    margin: 8px !important;
}

.section-tittle-pedido-ecommerce {
    margin-top: 16px;
}

.section-description-pedido-ecommerce {
    padding-bottom: 16px;color: rgba(0,0,0,0.87);font-size: 13px;
}

.btn-submit-solicitud-ecommerce {
    position: absolute;
    right: 24px;
    top: 12px;
}



/*
===============================================
            3. map-with-marker
===============================================
*/
div.centerMarker {
    position: relative;
}

div.centerMarker:after {
    width: 22px;
    height: 40px;
    display: block;
    content: ' ';
    position: absolute;
    top: 50%; left: 50%;
    margin: -40px 0 0 -11px;
    background: url('https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png');
    background-size: 22px 40px; /* Since I used the HiDPI marker version this compensates for the 2x size */
    pointer-events: none; /* This disables clicks on the marker. Not fully supported by all major browsers, though */
}

/*
===============================================
            100. INDICADORES
===============================================
*/
div.indicador-wrapper{
    margin: 0 16px 16px 0;
    background-color: #ffffff!important;
}

div.indicador-wrapper > md-toolbar{
    height: 55px!important;
    min-height: 55px!important;
    max-height: 55px!important;
    background-color: white;
    padding: 16px 8px 16px 16px;        
}

div.indicador-wrapper > md-toolbar.header > span {
    text-transform: capitalize;        
    font-size: 12px;
    color: rgba(0,0,0,0.87) !important;
}

div.indicador-wrapper > md-toolbar.header > button {        
    margin: 0;
}

div.indicador-wrapper > md-toolbar.header > button md-icon {        
    color: rgba(0,0,0,0.54) !important;
}

div.indicador-wrapper > div.content {
    padding-bottom: 32px;
    padding-top: 8px;        
}

div.indicador-wrapper > div.content > div.ind_cantidad {
    letter-spacing: -0.05em;
    line-height: 72px;
    font-size: 72px;
    color: #607D8B!important;
}

div.indicador-wrapper > div.content > div.ind_unidad_medida {
    color: rgba(0,0,0,0.54);
    font-weight: 500;
    font-size: 16px;
}

div.indicador-wrapper > div.footer {
    padding: 16px;
    border-top: 1px solid rgba(0,0,0,.12);
    background-color: #FAFAFA!important;
}

div.indicador-wrapper > div.footer > div.ind_subheader {
    color: rgba(0,0,0,0.54);
    font-size: 12px;
}

div.indicador-wrapper > div.detalle {
    min-height: 162px;
    padding: 8px 16px;
    color: rgba(0,0,0,0.87);
    background-color: #ffffff!important;
    font-size: 12px;
}

/*
===============================================
            FORMS
===============================================
*/
form.strech md-input-container {
    margin-bottom: 0px;
}

form fieldset.standard {
    border-width: 1px;
    border-style: none;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
}

form fieldset.standard legend {
    background: #204417;
    color: white;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.25px;
    padding: 6px 12px;
}

/*
===============================================
            TOAST
===============================================
*/
md-toast.md-center {
    left: 50%;
    transform: translate3d(-50%, 0, 0);
}