/*.nav-pills > .active > a, .nav-pills > .active > a:hover {
    background-color: #F2DEDE !important;
    color:black !important;
}

.nav-pills >li> a {
    background-color: #a7aeab !important;
    color:black !important;
}*/
.verd{
    background-color: #DFF0D8 !important;
    color:black !important; 
}
.groc{
    background-color: #FFFFCC !important;
    color:black !important; 
}
.vermell{
    /*background-color: #D02821 !important;*/
    background-color: #F2DEDE !important;
    color:black !important; 
}

.gris{
    background-color: grey !important;
    color:black !important; 
}
.select2-container{
    width:100% !important;
}

.taula{
    width:100% !important;
}
/* per els labels de validacio de jquery*/
.error {
    color: #a94442;
    /*  background-color: #f2dede;
      border-color: #ebccd1;
      padding:1px 20px 1px 20px;*/
}

.panel-login{
    background-color: #424A5D !important;

    color:white !important;
}
.panel-login>.panel-heading {
    background-color: #424A5D !important;
    text-align: center;
    color:white !important;
}

.panel-login .col-md-5 {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

/*estils per a fer els butons de color gris aravinc*/
.btn-infojic {
    background-color: #FF9B00 !important;
    border: 0px !important;
    color: white;
}
.btn-infojic:focus,
.btn-infojic.focus {
    background-color: #BF7D17 !important;
    border: 0px !important;
    color: white;
}
.btn-infojic:hover {
    background-color: #BF7D17 !important;
    border: 0px !important;
    color: white;
}
.btn-infojic:active,
.btn-infojic.active,
.open > .dropdown-toggle.btn-infojic {
    background-color: #BF7D17 !important;
    border: 0px !important;
    color: white;
}
.btn-infojic:active:hover,
.btn-infojic.active:hover,
.open > .dropdown-toggle.btn-infojic:hover,
.btn-infojic:active:focus,
.btn-infojic.active:focus,
.open > .dropdown-toggle.btn-infojic:focus,
.btn-infojic:active.focus,
.btn-infojic.active.focus,
/*.open > .dropdown-toggle.btn-infojic.focus {
    color: #333;
    background-color: #d4d4d4;
    border-color: #8c8c8c;
}*/
.btn-infojic:active,
.btn-infojic.active,
.open > .dropdown-toggle.btn-infojic {
    background-image: none;
}
/*.btn-infojic.disabled:hover,
.btn-infojic[disabled]:hover,
fieldset[disabled] .btn-infojic:hover,
.btn-infojic.disabled:focus,
.btn-infojic[disabled]:focus,
fieldset[disabled] .btn-infojic:focus,
.btn-infojic.disabled.focus,
.btn-infojic[disabled].focus,
fieldset[disabled] .btn-infojic.focus {
    background-color: #fff;
    border-color: #ccc;
}*/
.btn-infojic .badge {
    background-color: #FF9B00 !important;
    border: 0px !important;
    color: white;
}
/*fi estils per a fer els butons de color gris aravinc*/

#alertaSenseValidar{
    display: none;
}

/*.dt-button{
 display: inline-block !important;   
}*/
.titolPortada{
    font-size: 20pt;
}

.titolPortadaPetit{
    font-size: 15pt;
}
/*@media only screen and (min-width: 0px) and (max-width: 679px) {

    .btn span
    {
        display: none;
    }

}*/
.alert-warning {
    background-color: orange !important;
    color:white !important;
    font-size: 15pt;
}
/*th{
    background-color: grey;
    color: white;
}*/
/*textarea{
    height: 120px ;
}*/
.modal-header {
    background-color: #212238 !important;
    color: #FFDB89 !important;
}
.modal-header > .close{
    transition: 0.3s !important;
    color: #212238 !important;
    background: #FFDB89 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 100% !important;
    opacity: initial !important;
    line-height: unset !important;
}
.modal-header > .close:hover{
    transition: 0.3s !important;
    color: #FFDB89 !important;
    background: rgba(255, 219, 137,0.2) !important;
    opacity: initial !important;
    line-height: unset !important;
}
.modal-header > .close:focus{
    outline: none;
}
.idBlanc{
    color:white;
    display: none;
}

/*ocultar el searchbox del datatables*/

.dataTables_filter, .dataTables_info { display: none; }


/*el barra superior on fica control flotes*/
.black-bg {
    background: #212238 !important;
    border-bottom: 3px solid #FFDB89 !important;
}

.white-bg {
    background: white !important;
    border-bottom: 3px solid #FFDB89 !important;
}

/*de la barra superior el boto per amagar*/
.sidebar-toggle-box > .tooltips{
    color:white;
}

/*el footer de la pagina*/
.site-footer {
    background: #424A5D !important;

}
/*menu esquerre*/
#sidebar{
    background: #212238 !important;
}
/*elements menu esquerre*/
ul.sidebar-menu li a.active, ul.sidebar-menu li a:hover, ul.sidebar-menu li a:focus {
    background: #FFDB89 !important;
    color:#212238 !important;
}
/*icona de font awsome del menu esquerre*/



ul.sidebar-menu li a:hover i{
    color:#212238 !important;
}

ul.sidebar-menu li a.active i{
    color:#212238 !important;
}




/*aixo fa que el select2 no ocupi tota la pantalla*/

/*.select2-dropdown--below{
    position:absolute !important;   
    width: 50px !important;
}*/


/*estils del boto de tancar sessio*/
#BotoTancarSessio{
    margin-top: 10px;
    color:white !important;


}

#BotoTancarSessio:hover{
    background: #BF7D17 !important;

}

/*estils per els calendaris selectors de dates*/

.dropdown-menu{
    z-index:1003 !important;
}

/*estils del menu lateral*/

ul.sidebar-menu{
    z-index: 1002 !important;
}

/*estils boto enrere*/
#enrere{
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
}
/*estils del boto de crear del datatables*/
.botoCrear{
    margin-bottom: 10px;
}
/*Estils botons interiors datatables*/
.botoDatatables{
    margin-bottom: 5px;
    margin-left: 5px;

}
/*Estils barra scroller esquerre pantalla menu*/
#ascrail2000 > div{
    background-color: #BF7D17 !important; 
}
/*Estils barra scroller dreta pantalla*/
#ascrail2001 > div{
    background-color: #BF7D17 !important; 
}

.vertical-middle {
    /*width: 100%;*/
    /*position: absolute;*/
    top: 50%;
    transform: translate(0, -50%);
}

.tracking-box {
    line-height: 40px;
    margin-top: 15px;
    width: 60%;
    padding: 25px;
    padding-top: 10px;
    background-color: #EFEFEF;
    float: left;
}

.imgTracking{
    max-height: 450px;
    float: right;
    text-align: center;
    width: calc(40% - 2em);
    margin-left: 2em;
}

.logoTracking{
    width: 60%;
    max-width: 400px;
}

.tracking-alert{
    padding-top: 0px;
    padding-bottom: 0px;
    margin: 5px;
}

.tracking-detail{
    width: 100% !important;
}

.tracking{
    padding-bottom: 5%;
}

.trackingDetail{
    padding: 0;
    text-align: center;
    margin-top: 45px;
    margin-bottom: 25px;
}

.trackingDetail li {
    width: 2.5em;
    height: 2.5em;
    text-align: center;
    line-height: 2.5em;
    border-radius: 100%;
    border: 4px solid #212238;
    background: #212238;
    margin: 1em 5em 2em;
    display: inline-block;
    color: #212238;
    position: relative;
    z-index: 2;
}

.trackingDetail li.active, li.completed {
    border-color: #FFDB89;
    background: #FFDB89;
    color: #FFDB89;
}

.trackingDetail li.active {
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../../public/img/tracking/logo.png');
}

.trackingDetail li.incomplete {
    border-color: #ce1711 !important;
    background-color: #ce1711 !important;
    color: #ce1711 !important;
}

.trackingDetail li::before {
    content: '';
    position: absolute;
    top: 0.85em;
    right: -10em;
    width: 9.2em;
    height: 4px;
    background-color: #212238;
    /*border: 2px solid #212238;*/
    z-index: 1;
}

.trackingDetail li.active::before {
    /*border-color: #FFDB89;*/
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFDB89), to(#212238));
    background-image: -webkit-linear-gradient(left, #FFDB89, #212238);
    background-image: -moz-linear-gradient(left, #FFDB89, #212238);
    background-image: -o-linear-gradient(left, #FFDB89, #212238);
}

.trackingDetail li.completed::before {
    /*border-color: #FFDB89;*/
    background-color: #FFDB89;
}

.trackingDetail li.incompleteLine::before {
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFDB89), to(#ce1711));
    background-image: -webkit-linear-gradient(left, #FFDB89, #ce1711);
    background-image: -moz-linear-gradient(left, #FFDB89, #ce1711);
    background-image: -o-linear-gradient(left, #FFDB89, #ce1711);
}

.trackingDetail li:first-child {
    margin-left: 0;
}

.trackingDetail li:last-child::before {
    /*border: none;*/
    display: none;
}

.trackingDetail li:last-child {
    margin-right: 0;
}

.trackingDetail li span {
    color: #212238;
    position: relative;
    top: 3em;
    width: 9em;
    left: -3.5em;
    float: left;
    line-height: 1em;
    padding-top:10px;
    padding-bottom:10px;
}

.trackingDetail li.active span, .trackingDetail li.completed span {
    font-weight: bold;
}

.trackingDetail li.active span {
    text-transform: uppercase;
    font-size: 1.1em;
    padding-top:0px;
    padding-bottom:10px;
    height: 2.7em;
}

.info-service{
    margin-top: 30px;
}

.info-service-details{
    padding-left: 3em;
}

table.middle-align > tbody > tr > td{
    vertical-align: middle;
}

.badge-notification{
    min-width: 10px;
    padding: 4px 7px;
    font-size: 12px;
    font-weight: 700;
    background-color: #C21807;
    border-radius: 100%;
}

a:hover > .img-menu {
    transition: 0.3s;
    width: 100px !important;
    -webkit-filter: opacity(0.6) drop-shadow(0 0 0 #000694);
    filter: opacity(.6) drop-shadow(0 0 0 #000694);
}

.img-menu {
    transition: 0.3s;
    width: 100px !important;
    -webkit-filter: opacity(0.6) drop-shadow(0 0 0 #ffffff);
    filter: opacity(.6) drop-shadow(0 0 0 #ffffff);
}

@media only screen and (max-width: 740px) {
    .tracking-box {
        width: 100%;
    }

    .imgTracking{
        display: none;
    }
}

@media only screen and (max-width: 640px) {
    /*MODIFICAR COMO SE VE EL LISTADO DEL TRACKING*/
    .tracking{
        padding-bottom: 10%;
    }

    .trackingDetail {
        margin-bottom: 0px;
    }

    .trackingDetail li {
        text-align: center;
        line-height: 2.5em;
        margin: 0em 0em 7em 20%;
        display: inherit;
        position: relative;
    }

    .trackingDetail li::before {
        top: 2.8em;
        right: 0.78em;
        width: 4px;
        height: 6em;
        /*border: 2px solid #212238;*/
        z-index: 1;
    }

    .trackingDetail li span{
        width: 10em;
    }

    .trackingDetail li span, .trackingDetail li span.trackingTime {
        top: -0.4em;
        left: 4em;
        text-align: justify;
    }

    .trackingDetail li:first-child {
        margin: 2em 0em 7em 20%;
    }

    .trackingDetail li:last-child {
        margin: 0em 0em 1em 20%;
    }

    .trackingDetail li.active::before {
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFDB89), to(#212238));
        background-image: -webkit-linear-gradient(top, #FFDB89, #212238);
        background-image: -moz-linear-gradient(top, #FFDB89, #212238);
        background-image: -o-linear-gradient(top, #FFDB89, #212238);
    }
}

@media only screen and (max-height: 615px) {
    .tracking-box {
        width: 100%;
    }

    .imgTracking{
        display: none;
    }
}