/* Titre état */
.state-title {
    margin-left: 50px;
}

/* Bouton état */
.state-title button {
    margin-left: 10px !important;
}

/** ** ** ** ** BEGIN CONTENT OF WIDGET CSS ** ** ** ** **/

/* Placer l'icône 'carte bancaire' pour l'aligner avec le/les autre(s) */
.icon-to-bottom {
    margin-top: 2px !important;
}

/* 'Icône' dans le widget 'Données */
.icon-for-power-energy i {
    color: black;
    font-size: 18px;
    margin: 10px;
}

/* Couleur verte pour le pourcentage atteint */
.soc-percentages {
    color: #0CCB88;
}

/* Content of widget */
.values-widget-details-transaction {
    display: block;
    font-size: calc(8px + 0.30vw);
    color: #919AA3;
}

/* logo connecteur */
.logo-widget-details-transaction {
    float: right;
}

/* Float right pour les 2 icônes dans le widget 'Prix de la recharge' */
.size-of-details-transaction-mini-widget .logo-widget-details-transaction i {
    margin-right: 22px;
    float: right;
}

/* Label 'Ampère' dans le widget 'Modulation' */
.widget-modulation label {
    display: inline;
}

/* Taille du bouton 'Moduler' */
.size-of-details-transaction-medium-widget form[name="fDataTransfer_SetMaxCurrent"] button {
    font-size: 14px;
}

/* Aligner des boutons de controle et de modulation */
.size-of-details-transaction-medium-widget form[name="fDataTransfer_SetMaxCurrent"], .size-of-details-transaction-medium-widget .btn-LockStopPlay {
    display: flex;
    justify-content: space-evenly;
    font-size: 21px;
}

/* Marge pour les boutons de controle et de modulation */
.size-of-details-transaction-medium-widget .btn-LockStopPlay {
    margin-top: 17px !important;
}

/* time content */
.time-content {
    display: block;
    font-size: 15px;
    margin-left: 10px;
    padding: 3px;
}

.end-time-content {
    color: #919AA3;
}

.time-content i {
    color: black;
}

/** ** ** ** ** END CONTENT OF WIDGET CSS ** ** ** ** **/


/** ** ** ** ** BEGIN BUTTON CONTROL ** ** ** ** **/

/* Widget of actions icons : play: stop & lock */
.btn-play {
    color: #3AC47D;
}

/* Hover in button play */
.btn-play:hover {
    color: white;
    background-color: #3AC47D;
    border-color: #fff;
    border-radius: 5px;
}

/* Hover in button stop */
.btn-stop:hover {
    color: white;
    background-color: #D92550;
    border-color: #fff;
    border-radius: 5px;
}

/* Widget of actions icons : play: stop & lock */
.btn-stop {
    color: #D92550;
}

/* Widget of actions icons : play: stop & lock */
.btn-lock {
    color: #F7B924;
}

/* Hover in button lock */
.btn-lock:hover {
    color: white;
    background-color: #F7B924;
    border-color: #fff;
    border-radius: 5px;
}

/* Widget of actions icons : play: stop & lock */
.btn-cancel {
    color: #000000;
}

/* Hover in button cancel */
.btn-cancel:hover {
    color: white;
    background-color: #000000;
    border-color: #fff;
    border-radius: 5px;
}

/* Widget of actions icons : play: stop & lock */
.btn-edit {
    color: #FF6600;
}

/* Hover in button edit */
.btn-edit:hover {
    color: white;
    background-color: #FF6600;
    border-color: #fff;
    border-radius: 5px;
}

/* Widget of actions icons : play: stop & lock */
.btn-copy {
    color: #4F7CF1;
}

/* Hover in button lock */
.btn-copy:hover {
    color: white;
    background-color: #4F7CF1;
    border-color: #fff;
    border-radius: 5px;
}


/* Widget of actions icons : play: stop & lock */
.btn-stop-local {
    color: #EE1D1D;
}

/* Hover in button lock */
.btn-stop-local:hover {
    color: white;
    background-color: #EE1D1D;
    border-color: #fff;
    border-radius: 5px;
}

.btn-lock, .btn-play, .btn-stop, .btn-cancel, .btn-edit, .btn-copy, .btn-stop-local {
    background-color: white;
    border: none;
}

/** ** ** ** ** END BUTTON CONTROL ** ** ** ** **/

.size-of-badge-btn {
    font-size: 10px;
}

/** ** ** ** ** BEGIN SCREEN WIDTH - RESPONSIVENESS ** ** ** ** **/

@media only screen and (max-width: 4800px) and (min-width: 182px) {
    .time-content:first-child {
        margin-top: 25px;
        padding: 3px;
    }
}

/* grand écran */
@media only screen and (max-width: 2020px) and (min-width: 1811px) {

    .time-content {
        font-size: 14px;
        margin-left: -5px !important;
    }
}

/* grand écran */
@media only screen and (max-width: 1810px) and (min-width: 1712px) {
    .time-content {
        font-size: 13px;
        margin-left: -5px !important;
    }
}

/* grand écran */
@media only screen and (max-width: 1711px) and (min-width: 1615px) {
    .time-content {
        font-size: 12px;
        margin-left: -5px !important;
    }
}

/* grand écran */
@media only screen and (max-width: 1614px) and (min-width: 1200px) {
    .time-content {
        font-size: 11px;
        margin-left: -4px !important;
    }
}


/* grand écran */
@media (min-width: 1740px) {
    /*Alignement du widget modulation */
    .widget-modulation {
        margin-top: -2px;
    }
}

/* grand écran */
@media (max-width: 1715px) {
    /* Marge pour le prix en HT */
    .pricing-ht-style {
        margin-top: 7px !important;
    }

    .percentage-icons {
        font-size: 13px !important;
    }
}


@media (max-width: 1482px) {
    /* Taille du bouton 'Moduler' */
    .size-of-details-transaction-medium-widget form[name="fDataTransfer_SetMaxCurrent"] button {
        font-size: 12px;
    }

}

@media (max-width: 1410px) {
    /* Taille du bouton 'Moduler' */
    .size-of-details-transaction-medium-widget form[name="fDataTransfer_SetMaxCurrent"] button {
        font-size: 10px;
    }

    .btn-stop {
        margin: 0 !important;
    }

}


/* Moyen écran */
@media (min-width: 1400px) {

    /* Taille des différents widgets */
    .size-of-details-transaction-widget {
        height: 280px !important;
    }

    .size-of-details-transaction-mini-widget {
        height: 130px !important;
    }

    .size-of-details-transaction-medium-widget {
        height: 130px !important;
    }
}

@media only screen and (max-width: 1399px) and (min-width: 1200px) {
    /* Taille des différents widgets */
    .size-of-details-transaction-widget {
        height: 300px !important;
    }

    .size-of-details-transaction-mini-widget {
        height: 140px !important;
    }

    .size-of-details-transaction-medium-widget {
        height: 140px !important;
    }
}

/* grand écran */
@media (max-width: 1321px) {
    /* Taille de l'écriture du contenu des widgets */
    .values-widget-details-transaction {
        font-size: 12px !important;
    }
}

/* grand écran */
@media (max-width: 1245px) {
    /* Taille de l'écriture du contenu des widgets */
    .values-widget-details-transaction {
        font-size: 11px !important;
    }
}


@media (max-width: 1224px) {
    /* Taille du bouton 'Moduler' */
    .size-of-details-transaction-medium-widget form[name="fDataTransfer_SetMaxCurrent"] button {
        font-size: 10px;
    }
}

/* grand écran */
@media (max-width: 1200px) {

    /* Alignement du contenu des widgets */
    .values-widget-details-transaction {
        margin: 0 !important;
        padding: 0 !important;
    }

    .size-of-details-transaction-widget {
        height: fit-content;
    }
}


/* grand écran */
@media (max-width: 1199px) {
    /* Taille de l'écriture du contenu des widgets */
    .values-widget-details-transaction {
        font-size: 14px !important;
    }

    /* Marge entre le positionnement des widgets */
    .card-born-station {
        margin-bottom: 15px !important;
    }

    /* Taille des grands widgets */
    .size-of-details-transaction-widget {
        /*height: 180px !important;*/
        height: 260px !important;
    }

}

/* Moyen écran */
@media (min-width: 992px) {

    /*!* Taille des différents widgets *!*/
    /*.size-of-details-transaction-widget {*/
    /*    height: 280px !important;*/
    /*}*/

    .size-of-big-widget-transactions {
        height: 500px !important;
    }

    /*.size-of-details-transaction-mini-widget {*/
    /*    height: 130px !important;*/
    /*}*/

    /*.size-of-details-transaction-medium-widget {*/
    /*    height: 130px !important;*/
    /*}*/
}


/* Taille des widgets */
@media only screen and (max-width: 992px) and (min-width: 768px) {

    .size-of-details-transaction-medium-widget, .size-of-details-transaction-mini-widget {
        height: 101px !important;
    }

    .size-of-details-transaction-widget {
        height: 250px !important;
    }

    .card-born-station {
        margin-bottom: 15px !important;
    }

    .time-content {
        font-size: 13px;
        margin-bottom: -20px !important;
    }

    .time-content:first-child {
        margin-top: 15px !important;
    }

    .time-content {
        margin-top: 20px !important;
    }

}

/* Moyen écran */
@media (max-width: 990px) {
    /* Taille de l'écriture du contenu des widgets */
    .values-widget-details-transaction {
        font-size: 14px !important;
    }
}


/* grand écran */
@media (max-width: 828px) {
    /* Taille de l'écriture du contenu des widgets */
    .values-widget-details-transaction {
        font-size: 13px !important;
    }

    /* size of medium widget */
    .size-of-details-transaction-medium-widget {
        height: 99px !important;
    }
}

/* Petit écran */
@media (max-width: 767px) {
    /* Taille de l'écriture du contenu des widgets */
    .values-widget-details-transaction {
        font-size: 15px !important;
    }

    .time-content {
        font-size: 14px;
    }
}


@media (max-width: 560px) {
    /* Titre état */
    .state-title, .edit-dt {
        display: block;
        margin-left: 0px;
        margin-top: 5px;
    }

}

/* Petit écran */
@media only screen and (max-width: 600px) and (min-width: 450px) {
    .size-of-details-transaction-widget {
        height: 200px !important;
    }
}

/** ** ** ** ** END SCREEN WIDTH - RESPONSIVENESS ** ** ** ** **/

.graph-of-details-transaction {
    width: 50px !important;
}

.begin-time-of-transaction, .pause-time-of-transaction, .end-time-of-transaction {
    display: block;
}

.edit-dt {
    float: right;
}

.value-time-dt {
    float: right !important;
}

.title-key-time:first-child {
    margin-top: 10px;
}

.card-born-station .metric-value {
    line-height: 28px;
}

.card-born-station .metric-value, .card-data .metric-value {
    margin-top: -15px;
}

.card-time .metric-value {
    margin-top: -15px;
}

.eye-dt-sh {
    color: black;
}

.eye-dt-sh:hover {
    color: #4F7CF1;
}

.card-born-station .fw-bold a{
    color : rgb(128, 128, 128) !important;
}

.grey-link {
    cursor: pointer;
    color : grey;
    text-decoration:none;
}
.grey-link:hover {
    color : grey;
}

.visible {
    color: #4F7CF1 !important;
}

/* If the loading time exceeds one day, show this class */
.exclamation-error-days {
    color: #F7B924 !important;
    font-size: 14px;
}

/* Show badge for id-tag */
.badge-drv {
    background: #3FABE1 !important;
}