/**
 * @file dashboard.css
 * Copyright (C) 2015 Pressa. All rights reserved.
 */

/* Modales: sin borde ni sombra negra */
.modal-content {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/*----------------------------------------------------------------------------*/
body
{
    background-color: #FFFFFF;
    color           : #000000;
    zoom            : 0.95;
    font-family     : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size       : 14px;
/*    padding-top     : 50px;*/
}
/*----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------*/
#navbar{
    height: 46px;
    background-color: #34477A !important;
}
/*----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------*/
#dashboard #dashboard-modal-response{
    z-index: 30000;
    text-align: center;
}
#dashboard .modal-backdrop.in.modal-zero-opacity{
    opacity: 0;
}

#dashboard #dashboard-modal-response.response-success div.modal-content {
    background-color: #f0f9eb;
    border-color: #e1f3d8;
    border-radius: 5px;
}

#dashboard #dashboard-modal-response.response-error div.modal-content {
    background-color: #ffeded;
    border-color: #edc1c0;
    border-radius: 5px;
}

#dashboard #dashboard-modal-response .modal-subtitle {
    margin: 0;
}

#dashboard #dashboard-modal-response.response-success .modal-subtitle :is(span, i) {
    color: #67c23a;
}

#dashboard #dashboard-modal-response.response-error .modal-subtitle :is(span, i) {
    color: #a83432;
}
#dashboard #navbar li.navbar-button-logout
{
    background-color: #182858;
}
/*----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------*/
#dashboard #navbar
{
    background-color: #777777;
}
/*----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------*/

#dashboard #orders #orders-table
{
   font-size: 11px;
}
#dashboard #orders #orders-table tr td:last-child
{
    white-space: nowrap;
    width      : 1px;
}
/*----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------*/
#dashboard #vehicles #vehicles-table tr td:last-child
{
    white-space: nowrap;
    width      : 1px;
}

#dashboard #vehicles #vehicles-eventcodes-table tr td:last-child
{
    white-space: nowrap;
    width      : 1px;
}
/*----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------*/
#dashboard #gps #gps-table tr td:last-child
{
    white-space: nowrap;
    width      : 1px;
}
/*----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------*/
#dashboard #company #company-table tr td:last-child
{
    white-space: nowrap;
    width      : 1px;
}

#dashboard #company #company-drivers-table tr td:last-child
{
    white-space: nowrap;
    width      : 1px;
}
/*----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------*/
#dashboard #eventcodes #eventcodes-table tr td:last-child
{
    white-space: nowrap;
    width      : 1px;
}
/*----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------*/
#dashboard #documents #documents-table tr td:last-child
{
    white-space: nowrap;
    width      : 1px;
}
/*----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------*/
#dashboard #services #services-table tr td:last-child
{
    white-space: nowrap;
    width      : 1px;
}
/*----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------*/
#dashboard #status #status-list #status-table tr td:last-child
{
    white-space: nowrap;
    width      : 1px;
}

#dashboard #status #status-list #status-table tr
{
    opacity: 0.9;
}

#dashboard #status #status-list #status-table tr:hover
{
    cursor : pointer;
    opacity: 1.0;
}

#dashboard #status #status-list #status-table tr.selected
{
    opacity: 1.0;
}

#dashboard #status #status-info td.status-info-table-name
{
    font-size: 12px;
    font-weight: bold;
}

#dashboard #status #status-info #status-map
{
    height          : 445px;
    min-height      : 400px;
    max-height      : 445px;
    background-color: #313131;
}

#dashboard #status #status-info #status-info-comments
{
    overflow-y: scroll;
    min-height: 400px;
    max-height: 400px;
}

#dashboard #status #status-info #status-info-comments li:hover
{
    background-color: #EEEEEE;
}

#dashboard #status #status-info #status-info-comments span.status-info-comments-title
{
    color: #999999;
}

#dashboard #status #status-info #status-info-status
{
    overflow-y: scroll;
    min-height: 400px;
    max-height: 400px;
}

#dashboard #status #status-info #status-info-status li
{
    cursor: pointer;
}

#dashboard #status #status-info #status-info-status li:hover
{
    background-color: #EEEEEE;
}

#dashboard #status #status-info #status-info-status li.selected
{
    background-color: #ADADAD;
}
/*----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------*/
#dashboard #alarms #alarms-nav span.nav-item-close
{
    border-right : 1px solid #ADADAD;
    padding-right: 10px;
    margin-right : 10px;
}

#dashboard #alarms #alarms-nav a.selected
{
    background-color: #ADADAD;
}

#dashboard #alarms #alarms-list #alarms-table tr td:last-child
{
    white-space: nowrap;
    width      : 1px;
}

#dashboard #alarms #alarms-list #alarms-table tr
{
    opacity: 0.6;
}

#dashboard #alarms #alarms-list #alarms-table tr:hover
{
    cursor : pointer;
    opacity: 0.7;
}

#dashboard #alarms #alarms-list #alarms-table tr.selected
{
    opacity: 1.0;
}

#dashboard #alarms #alarms-info td.alarms-info-table-name
{
    font-weight: bold;
}

#dashboard #alarms #alarms-info #alarms-map
{
    height          : 400px;
    min-height      : 400px;
    max-height      : 400px;
    background-color: #313131;
}

#dashboard #alarms #alarms-info #alarms-info-comments
{
    overflow-y: scroll;
    min-height: 400px;
    max-height: 400px;
}

#dashboard #alarms #alarms-info #alarms-info-comments li:hover
{
    background-color: #EEEEEE;
}

#dashboard #alarms #alarms-info #alarms-info-comments span.alarms-info-comments-title
{
    color: #999999;
}

#dashboard #alarms #alarms-info #alarms-info-alarms
{
    overflow-y: scroll;
    min-height: 400px;
    max-height: 400px;
}

#dashboard #alarms #alarms-info #alarms-info-alarms li
{
    cursor: pointer;
}

#dashboard #alarms #alarms-info #alarms-info-alarms li:hover
{
    background-color: #EEEEEE;
}

#dashboard #alarms #alarms-info #alarms-info-alarms li.selected
{
    background-color: #ADADAD;
}
/*----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------*/
#dashboard #history #history-table-title
{
    padding         : 7px;
    font-weight     : bold;
    color           : #EEEEEE;
    font-size       : 20px;
    background-color: #313131;
}

#dashboard #history #history-curr-title
{
    padding         : 7px;
    font-weight     : bold;
    color           : #EEEEEE;
    font-size       : 20px;
    background-color: #313131;
}

#dashboard #history #history-table-head
{
    font-weight     : bold;
    margin-bottom   : 5px;
    padding-top     : 10px;
    padding-bottom  : 10px;
    border-bottom   : 1px solid #A1A1A1;
    background-color: #D2E4E4;
}

#dashboard #history #history-table div.history-table-item
{
    border       : 1px solid #AAAAAA;
    margin-bottom: 1px;
}

#dashboard #history #history-table div.history-table-item
div.history-table-item-brief
{
    background-color: #DDDDDD;
}

#dashboard #history #history-table div.history-table-item
div.history-table-item-brief:hover
{
    background-color: #AAAAAA;
    cursor          : pointer;
}

#dashboard #history #history-table div.history-table-item
div.history-table-item-details
{
    padding         : 10px;
    background-color: #EEEEEE;
    display         : none;
}

#dashboard #history #history-table div.history-table-item
div.history-table-item-details span.history-table-item-details-title
{
    font-weight: bold;
}

#dashboard #history #history-curr
{
    border   : 1px solid #AAAAAA;
    padding  : 3px;
    word-wrap: break-word;
}

#dashboard #history #history-map
{
    border : 1px solid #AAAAAA;
    padding: 3px;
    width  : 100%;
    height : 200px;
}

#dashboard #history #history-comments
{
    border   : 1px solid #AAAAAA;
    padding  : 3px;
    word-wrap: break-word;
    overflow-y: scroll;
    min-height: 400px;
    max-height: 400px;
}

#dashboard #history #history-note
{
    font-size: 10px;
}

div.pad-top
{
    padding-top: 25px;
}

.table-scroll tbody {
    position: absolute;
    overflow-y: scroll;
    height: 250px;
}

.table-scroll tr {
    width: 100%;
    table-layout: fixed;
    display: inline-table;
}

.table-scroll thead > tr > th {
    border: none;
}

.icon-orientation{
    margin-right: 10px;
    transform: rotate(var(--angle));
    color: #fa0606;
}
/*----------------------------------------------------------------------------*/

.blink{
    animation: blink 1s linear infinite;
}

@keyframes blink{
    0%{
        opacity: 0;
    }
    50%{
        opacity: .5;
    }
    100%{
        opacity: 1;
    }
}

.suspended-info{
    font-size: 15px;
    padding-left: 50px;
    padding-right: 50px;
    vertical-align: bottom;
}

#dashboard #status #status-info .panel-heading{
    height: 32px;
    padding: 5px 8px;
}

#dashboard #status #status-info #status-info-relay .panel-heading{
    height: 34px;
    padding: 5px 8px;
}
#dashboard #status #status-info td.status-sensor {
    width: 50%;
    text-align: center;
    border: solid 0.5px #AAAAAA;
    padding: 2px 3px;
}
#status-info-history #status-info-map-address {
    padding: 5px 5px;
    background-color: #222222;
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.mapTooltip {
    font-size:    11px;
    padding:      0px 1x 0px 1px !important;
    color:        #34477A;
    font-weight:  700;
    border-bottom: 3px solid #34477A;
}

.status-upd-chart{
    position: relative;
}
.status-upd-center-abs{
    top:50%;
    left:40%;
    transform:translate(-50%, -50%);
    position: absolute;
}
.status-upd-chart h7{
    color:#fff;
    font-size: 10px;
    position: absolute;
    bottom:10px;
    text-align: center;
    /*width: 100%;*/
    text-shadow: 1px 1px 10px #000;
}
.status-upd-chart svg{
    z-index: 2;
}
/* DIV CIRCULO DE FONDO */
.status-upd-circle{
    width: 30px;
    height:30px;
    border-radius: 50%;
    border:2px #baeaff solid;
}
.status-upd-seconds-rem{
    z-index: 3;
    text-align: center;
    /*width: 100%;*/
    font-size: 15px;
    font-weight: 700;
    color:#337ab7
}
/* SVG CIRCULO */
.status-upd-outer{
    fill:transparent;
    stroke: #337ab7;
    stroke-width: 2; /* grosor del borde */
    stroke-dasharray: 90; /* numero de relleno del borde, se usa el mismo valor en el script.js */
    transform: rotate(270deg) translate(-30px, 0);
    /* giramos el circulo para que su apertura sea en la parte superior
    y ajustamos su posicion
    */
}

#dashboard #status div.modal-header
{
    background-color: #34477A;
    color           : #FFFFFF;
}

.table > thead > tr > td.active, .table > tbody > tr > td.active, .table > tfoot > tr > td.active, .table > thead > tr > th.active, .table > tbody > tr > th.active, .table > tfoot > tr > th.active, .table > thead > tr.active > td, .table > tbody > tr.active > td, .table > tfoot > tr.active > td, .table > thead > tr.active > th, .table > tbody > tr.active > th, .table > tfoot > tr.active > th {
            background-color:#b8a9c9;
        }

#dashboard #events-table tbody {
    font-size: 11px;
}
#dashboard #events-table tbody .detail-obs {
    margin: 5px;
}

#dashboard #events-table tbody .detail-view table{
    margin: 10px;
}
#dashboard #events-table tbody .detail-obs-text {
    font-weight: bold;
    color: red;
}
#dashboard #orders-table tbody .btn-horizontal {
    margin-right: 5px;
    padding: 2px;
}


#dashboard #orders .order-detail{
  font-size: 13px;
}

#dashboard #orders .order-detail th{
  width: 20%;
}

#dashboard #orders #order-opts a.nav-link {
  font-size: 14px;
}
#dashboard #orders #order-opts a.nav-link.active {
  font-size: larger;
  font-weight: bolder;
}


#dashboard #orders #orders-table .btn-action{
    width: 30px !important;
}
#dashboard #orders #orders-table .plus-detail{
    width: 30px !important;
    text-align: center;
}

#dashboard #orders .history-detail td{
    font-size: 12px;
}

#dashboard #orders .history-tab-title{
    background-color: #34477A;
    color: white;
}


#dashboard #orders #order-from,
#dashboard #orders #order-to{
    border-style: none !important;
}

.custom-control-label::before,
.custom-control-label::after {
    top: .1rem;
    width: 1.25rem;
    height: 1.25rem;
}