/* Widget */
.units {
    color: #18639b;
    size: 15px;
}

/* .value_widget { */
/* font-size: 15px; */
/* } */

.units_big {
    color: #18639b;
    size: 23px;
}

.value_widget_big {
    font-size: 23px;
}

.titre_widget {
    font-size: 10px;
    text-align: center;
    color: grey;
}

.inline {
    display: inline-flex;
}

.block {
    margin-bottom: 5px;
    margin-top: 5px;
}

.subBlock {
    margin-right: 10px;
}

.separator_right {
    border-right: dotted 1px #9D9D9D;
}

.separator_top {
    border-top: dotted 1px #9D9D9D;
    text-align: center;
    padding-top: 10px;
}

.paging_full .ui-button {
    padding: 2px 6px;
    margin: 0;
    cursor: pointer;
}

.tab_gauche {
    width: 60px;
}

.tab_droite {
    width: 39%;
    margin-left: 1%;
}

/*Début new widgets*/

.font-style-of-badge .badge {
    font-weight: normal !important;
}

.img-for-point-charge img {
    margin-top: -8%;
}

.font-style-of-badge .badge {
    font-size: 8pt;
}

/********************* for home *************/
/* Label for percentage */
.metric-label {
    float: right;
}

/* Map widget into home */
.box-for-map {
    padding: 0px 20px 7px 20px;
    border: none;
}

/* Content of map box */
.content-body {
    border: none;
}

#map {
    border: none;
    /* border-radius: 5px; */
}

/* Header of Map box */
.panel_header {
    border: none;
}

/* Title of map box */
.title-of-map {
    margin: 12px 0 0 20px;
}

/* Border top for widget */
.border-top-blue {
    border-top: solid #38A8E0 !important;
}

/* Card */
.card {
    border: none;
}

/* Padding in widget that there aren't km info */
.br-for-text {
    padding: 8px;
}

/* Title of widget in blue */
.metric-value .blue-font .value_widget {
    color: #2470dc;
    margin-left: 20px;
    font-size: 1.5em !important;

}

/* Color for text : this year, this month & today */
.description-block .description-text {
    color: #9093A6;
}

/* Color for title of widget */
.font-color-gray {
    color: #6c757d !important;
}

/* Font size for text into description of widget */
.description-block .description-header {
    font-size: 100%;
}

/* Km info */
.text-for-km, .text-for-total-km {
    display: block !important;
    /* font-size: 0.7em !important; */
}

.text-for-total-km {
    margin-top: 15% !important;
}


/* Responsiveness */

@media screen and (min-width: 1703px) {
    .text-for-total-km {
        /*	margin-left: 50%; */
    }
}

@media screen and (max-width: 1703px) {
    .text-for-km, .text-for-total-km {
        display: none !important;
    }


    .br-for-text {
        display: none !important;
    }

    .totalco-header, .tenergy-header, .ca-header, .totalcharge-header {
        padding-top: 7px;
    }
}

@media screen and (max-width: 1550px) {
    .totalco-header, .tenergy-header, .ca-header, .totalcharge-header {
        padding-top: 13px;
    }
}

@media screen and (max-width: 1360px) {
    .totalco-header, .tenergy-header, .ca-header, .totalcharge-header {
        padding-top: 14px;
    }
}

@media screen and (max-width: 1356px) {
    .totalco-header, .tenergy-header, .ca-header, .totalcharge-header {
        padding-top: 21px;
    }

    .metric-value .blue-font .value_widget {
        font-size: 0.8em !important;
    }
}

@media screen and (max-width: 1261px) {
    .totalco-header, .tenergy-header, .ca-header, .totalcharge-header {
        padding-top: 0px;
    }
}

@media screen and (max-width: 1550px) {
    .description-block .description-text {
        font-size: 0.8em !important;
    }

    .description-block .description-header {
        font-size: 0.7em !important;
    }
}

@media screen and (max-width: 1263px) {

    .description-text {
        font-size: 0.5em;
    }
}

@media screen and (max-width: 1355px) {
    .metric-value .blue-font {
        font-size: 1.5em !important;

    }
}

@media screen and (max-width: 1200px) {
    .ca-header {
        margin-top: 20px;
    }

    .totalcharge-header, .totalco-header {
        padding-top: 22px;
    }

    .text-for-km, .text-for-total-km {
        display: block;
    }
}

@media screen and (max-width: 904px) {
    .totalcharge-header, .totalco-header {
        padding-top: 16px;
    }
}

@media screen and (max-width: 814px) {
    .totalcharge-header, .totalco-header {
        padding-top: 16px;
    }
}

@media screen and (max-width: 813px) {
    .totalcharge-header, .totalco-header {
        padding-top: 0px;
    }

    .font-color-gray {
        font-size: 1.1em;
    }

    .metric-value {
        font-size: 0.8em;
    }
}


@media screen and (max-width: 767px) {
    .totalcharge-header, .totalco-header {
        padding-top: 30px;
    }
}

@media screen and (max-width: 657px) {
    .totalcharge-header, .totalco-header {
        padding-top: 24px;
    }
}

@media screen and (max-width: 590px) {
    .totalcharge-header, .totalco-header {
        padding-top: 0px;
    }
}


@media screen and (max-width: 575px) {
    .totalcharge-header {
        margin-top: 20px;
    }

    .text-for-total-km {
        display: block !important;
    }

    .description-header {
        margin-left: 10px;
        display: inline !important;
    }

    /* Calendar icône for "Aujourd'hui, ce-mois, cette année */
    .description-header:before {
        font-family: "Font Awesome 5 Free";
        content: "\f783 ";
        margin-right: 7px;
        margin-top: -5px;
        display: inline-block;
        padding-right: 3px;
        vertical-align: middle;
        font-weight: 900;
    }

    .description-text {
        font-size: 0.7em !important;
    }

    .value_widget {
        font-size: 1.5em !important;
    }

    .text-for-total-km {
        font-size: 0.5em !important;
    }

    .text-for-km {
        display: inline !important;
        font-size: 0.38em !important;
        margin-left: 5%;

    }
}

@media screen and (max-width: 950px) {
    .description-block .description-text {
        font-size: 10px;
    }

    .description-header {
        font-size: 7px;
    }
}

/* Percentage */
/* Increasing curve color for pins */
.pins-success {
    color: #00c9a7;
    background-color: rgba(0, 201, 167, .1);
}

/* Regression curve color for pins*/
.pins-danger {
    color: #ed4c78;
    background-color: rgba(237, 76, 120, .1);
}

.pins {
    display: inline-block;
    padding: 0.3125em 0.5em;
    font-size: 75%;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.3125rem;
    transition: all .2s ease-in-out;
}

/* Font size of percentage text */
.percentage {
    font-size: .8125rem;
    color: #677788 !important;
    margin-left: 0.25rem !important;
}

@media screen and (max-width: 1756px) {
    .font-color-gray {
        font-size: 1em !important;
        overflow: hidden !important;
    }

    .metric-value .blue-font {
        font-size: 1.5em !important;
    }
}

@media screen and (max-width: 1575px) {
    .pins {
        display: block !important;
        width: 70% !important;
        font-size: 60% !important;
    }

    .percentage {
        font-size: 0.55rem !important;
    }
}

#ZTransactionTable .labelForMobile {
    display: none;
}

@media screen and (min-width: 890px) {
    .align-element-in-td-5-middle {
        text-align: left !important;
        padding-left: 5.5% !important;
    }

    .align-element-in-td-5 {
        text-align: left !important;
        padding-left: 5% !important;
    }

    .align-element-in-td-4-middle {
        text-align: left !important;
        padding-left: 4.5% !important;
    }

    .align-element-in-td-4 {
        text-align: left !important;
        padding-left: 4% !important;
    }

    .align-element-in-td-3 {
        text-align: left !important;
        padding-left: 3% !important;
    }

    .align-element-in-td-2 {
        text-align: left !important;
        padding-left: 2% !important;
    }

    .align-element-in-td-1 {
        text-align: left !important;
        padding-left: 1% !important;
    }
}

/* NO MORE TABLE */
@media screen and (max-width: 860px) {
    /* Force table to not be like tables anymore */
    #no-more-tables #ZTransactionTable,
    #no-more-tables #ZTransactionTable thead,
    #no-more-tables #ZTransactionTable tbody,
    #no-more-tables #ZTransactionTable th,
    #no-more-tables #ZTransactionTable td,
    #no-more-tables #ZTransactionTable tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    #no-more-tables #ZTransactionTable thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    #no-more-tables #ZTransactionTable tr {
        border: 1px solid #ccc;
    }

    #no-more-tables #ZTransactionTable td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        white-space: normal;
        text-align: center !important;
    }

    #no-more-tables #ZTransactionTable td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 50%;
        white-space: nowrap;
        font-weight: bold;
    }

    #no-more-tables #ZTransactionTable th {
        width: 100%;
    }

    #no-more-tables #ZTransactionTable td {
        text-align: right !important;
    }


    #ZTransactionTable .labelForMobile {
        display: inline-block;
        float: left;
        margin-left: 20px;
        font-weight: bolder;
        text-decoration: underline gray;
    }

    .img-for-point-charge {
        display: none;
    }

    #ZTransactionTable td:first-child .labelForMobile {
        margin-left: 12px !important;
        display: block;
    }

    /*
    Label the data
    */
    #no-more-tables #ZTransactionTable td:before {
        content: attr(data-title);
    }
}

.text-for-km, .text-for-total-km {
    font-size: 0.7em !important;
}

/*Fin widgets*/

























#no-more-tables tbody tr {
    margin-top: 15px !important;
}

/* NO MORE TABLE */

.labelForMobile {
    display: none;
}

/* NO MORE TABLE */
@media screen and (max-width: 768px) {
    /* Force table to not be like tables anymore */
    #no-more-tables #ZConnectorTypeTable,
    #no-more-tables thead,
    #no-more-tables tbody,
    #no-more-tables th,
    #no-more-tables td,
    #no-more-tables tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    #no-more-tables thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    #no-more-tables thead th {
        display: inline-block;
    }

    #no-more-tables tr {
        border: 1px solid #ccc;
        /*display: flex;*/
    }

    #no-more-tables td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        white-space: normal;
        text-align: center !important;
    }

    #no-more-tables td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 50%;
        white-space: nowrap;
        font-weight: bold;
    }

    #no-more-tables th {
        width: 100% !important;
    }

    #no-more-tables td {
        text-align: right !important;
    }

    .labelForMobile {
        display: inline-block;
        float: left;
        margin-left: 12px;
        font-weight: bolder;
        text-decoration: underline gray;
    }

    td:first-child .labelForMobile {
        margin-left: 4px !important;/
    display: block;
    }

    /*
    Label the data
    */
    #no-more-tables td:before {
        content: attr(data-title);
    }
}