/*
 * Copyright (c) SNOC - 2023. - All Rights Reserved
 *  * Unauthorized copying of this file, via any medium is strictly prohibited
 *  * Proprietary and confidential
 */

:root {
    --telemesure-bleu: #0088cc;
    --telemesure-danger: #D2312D;
    --telemesure-warning: #ed9c28;
    --telemesure-success: #51b451;
    --telemesure-info: #5bc0de;
    --telemesure-muted: #505461;

    --background-dark-theme: #1d2127;
    --background-panel-header: #282d36;
    --background-panel: #2e353e;

    --background-white-theme: #ecedf0;
    --background-panel-white-header: #f6f6f6;
    --background-white-panel: #fdfdfd;

    --white-secondary: #e0e0e0;
    --lightgray-secondary: #999;
    --gray-secondary: #282d36;
}

.text-default {
    color: var(--lightgray-secondary);
}

html.dark .text-default {
    color: var(--lightgray-secondary);
}

.snocTransparentClass {
    opacity: 0.35;
}

.popover-title {
    font-family: inherit;
    font-weight: 100;
    line-height: 1.1;
    font-size: 1.8rem;
}

/* Scrollbar modification */
/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: rgba(0, 136, 204, 0.7);
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: rgba(0, 136, 204, 0.7);
    background-color: rgba(0, 136, 204);
    border-radius: 10px;
}

/* Add here all your CSS customizations */
.body-sign {
    display: table;
    height: 100vh;
    margin: 0 auto;
    max-width: 500px;
    padding: 0 15px;
    width: 100%;
}

.body-full {
    display: table;
    height: 100vh;
    margin: 0 auto;
    max-width: 100%;
    padding: 0px 10px;
    width: 100%;
}

body.connexionPanel {
    background-image: url(/assets/images/telemesure_bg.jpg);
    background-position: center top;
    background-size: 100% auto;
    overflow: hidden;
}

/*Button Custom*/
.btn-primary-outline {
    color: var(--background-dark-theme);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: transparent;
    border-color: var(--telemesure-bleu);
}

html.dark .btn-primary-outline {
    color: #ffffff;
}

.btn-primary-outline:hover {
    color: white;
    background-color: var(--telemesure-bleu);
}

.btn-danger-outline {
    color: var(--background-dark-theme);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: transparent;
    border-color: var(--telemesure-danger);
}

html.dark .btn-primary-outline {
    color: #ffffff;
}

.btn-danger-outline:hover {
    color: white;
    background-color: var(--telemesure-danger);
}

.btn-info-outline {
    color: var(--background-dark-theme);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: transparent;
    border-color: var(--telemesure-info);
}

html.dark .btn-primary-outline {
    color: #ffffff;
}

.btn-info-outline:hover {
    color: white;
    background-color: var(--telemesure-info);
}

.btn-success-outline {
    color: var(--background-dark-theme);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: transparent;
    border-color: var(--telemesure-success);
}

html.dark .btn-primary-outline {
    color: #ffffff;
}

.btn-success-outline:hover {
    color: white;
    background-color: var(--telemesure-success);
}

.btn-warning-outline {
    color: var(--background-dark-theme);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: transparent;
    border-color: var(--telemesure-warning);
}

html.dark .btn-primary-outline {
    color: #ffffff;
}

.btn-warning-outline:hover {
    color: white;
    background-color: var(--telemesure-warning);
}

/*MODAL*/
.modal-block.modal-block-xl {
    max-width: 70%;
}

/*END MDOAL*/
td.details-control {
    position: relative;
    cursor: pointer;
}

td.details-control:before {
    content: "\f196";
    font-family: "Font Awesome 6 Pro";
}

tr.shown td.details-control {
    position: relative;
}

tr.shown td.details-control:before {
    content: "\f147";
    font-family: "Font Awesome 6 Pro";
}

#uploadTransForm {
    width: 64px;
    height: 64px;
    background-color: rgba(167, 165, 175, 0.57);
    transition-duration: 100ms;
    margin-right: 40px;
}

#transIcon {
    width: 64px;
    height: 64px;
    margin-right: 40px;
}

#transIcon img {
    max-width: 100%;
}

#uploadTransIcon {
    padding-top: 14px;
    color: rgba(94, 89, 106, 0.74);
    font-size: 36px;
}

#uploadTransForm:hover, #uploadTransForm label:hover {
    background-color: var(--telemesure-bleu);
    cursor: pointer;
    color: white !important;
    transition-duration: 200ms;
}

#uploadTransForm:hover #uploadTransIcon {
    color: rgba(10, 10, 17, 0.89);
}

.panel-actions a,
.panel-actions .panel-action {
    background-color: transparent;
    border-radius: 2px;
    color: #6e6e6e;
    font-size: 17px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    width: 24px;
}

.panelToTop {
    top: 50px;
}

.panel-action-toggle:before {
    content: "\f147";
}

.panel-collapsed .panel-action-toggle:before {
    content: "\f196";
}

a.nodecoration {
    text-decoration: none;
}

.mfp-bg {
    z-index: 1042;
}

.mfp-wrap {
    z-index: 1043;
}

.mfp-content {
    z-index: 1045;
}

.switch.disabled {
    pointer-events: none;
    opacity: 0.3;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}

.vsensor-chartContainer-state {
    background-color: #CCC;
}

.input-date-custom {
    background: #fff;
    border: 1px solid #ccc;
}

.table .actions a:hover {
    color: var(--telemesure-bleu);
}

/* input tel */
.input-tel-custom {
    border: 2px solid var(--background-white-theme);
}

html.dark .input-tel-custom {
    border: 2px solid var(--background-panel-header);
}

/*
* ----------- CSS dark mode customisation ------------------
*/

/* confirm modal */
html.dark .jconfirm-buttons .btn-default {
    background: #4f4f4f !important;
    color: white !important;
}

html.dark .jconfirm-buttons .btn-default:hover {
    background: #5c5c5c !important;
}

/* TRIGGER CUSTOM */
html.dark .pricing-table > div .plan:hover h3 {
    color: white;
}

html.dark .pricing-table > div .plan.active h3 {
    color: white;
}

/*duration select*/

#addDataSources select, #addModelDataSources select {
    background: #ecedf0;
    margin: 0;
    border-radius: 0;
}

html.dark .table .actions a:hover {
    color: var(--telemesure-bleu);
}

html.dark #addDataSources select, html.dark #addModelDataSources select {
    background: var(--background-dark-theme);
}

#addDataSources .duree span, #addModelDataSources .duree span {
    padding: 0;
    border: 0;
}

/* DYGRAPH CUSTOM */
html.dark .dygprah-graph2-theme {
    background-color: var(--background-panel);
}

/* DASHBOARD CUSTOM */
html.dark .svg-dashboard-theme {
    fill: white;
}

/* All select */
html.dark select {
    background: var(--background-panel-header);
    color: white;
    border-color: var(--background-panel-header);
}

/*select 2*/
html.dark .select2-disabled {
    background: var(--background-dark-theme);
}

/* transmetteur chart */
html.dark .vsensor-chartContainer-state {
    background: var(--background-panel-header);
}

/* input + date picker */
/* - Input */
html.dark .input-date-custom {
    background: var(--background-dark-theme);
    color: white;
    border-color: var(--background-dark-theme);
}

/* - frame datepicker */
html.dark .daterangepicker {
    background: var(--background-dark-theme);
    border-color: var(--background-dark-theme);
}

/* - frame calendar */
html.dark .daterangepicker .calendar-table {
    background: var(--background-panel);
    border-color: var(--background-panel);
}

/* - Hover select on calendar */
html.dark .daterangepicker td.available:hover, .daterangepicker th.available:hover {
    background: var(--telemesure-bleu);
    color: white;
}

/* - Frame date off */
html.dark .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
    background: var(--background-panel-header);
}

html.dark .daterangepicker select.hourselect,
html.dark .daterangepicker select.minuteselect,
html.dark .daterangepicker select.secondselect,
html.dark .daterangepicker select.ampmselect {
    background: var(--background-panel-header);
    border-color: var(--background-panel-header);
}

/* - Framedate in range */
html.dark .daterangepicker td.in-range {
    background: var(--background-dark-theme);
    color: white;
}

/* - Border on calendar */
html.dark .daterangepicker.show-ranges.ltr .drp-calendar.left {
    border: none;
}

html.dark .daterangepicker .drp-buttons {
    border: none;
}

/* - Frame hover list */
html.dark .daterangepicker .ranges li:hover {
    background: var(--background-panel);
}

/* - Arrow on top */
html.dark .daterangepicker:after, html.dark .daterangepicker:before {
    border-bottom-color: var(--background-dark-theme);
}

/* - Arrow on calendar left and right*/
html.dark .daterangepicker .calendar-table .next span, html.dark .daterangepicker .calendar-table .prev span {
    border-color: white;
}

html.dark .daterangepicker td.available:hover, html.dark .daterangepicker th.available:hover {
    background: var(--background-panel-header);
}

/* TRIGGER custom theme */
html.dark .trigger-custom-theme {
    color: #ccc;
}

/* Boostrap calendar custom theme */
html.dark .datepicker table tr td.range {
    background: var(--background-dark-theme);
}

html.dark .datepicker table tr td.range:hover {
    background: var(--background-panel);
}

html.dark .conditionAndOr span.inactive {
    background: rgb(142, 142, 142);
}

/*RADM Credits clients*/
html.dark .jconfirm-box {
    background: var(--background-panel);
}

html.dark .jconfirm-title {
    color: white;
}

/*TELEPHONE INPUT*/
html.dark .input-tel-darktheme {
    background: var(--background-panel-header);
    color: white;
}

/*
* Time sheet action theme custom
*/
html.dark .TimeSheet-rowHead, html.dark .TimeSheet-head, html.dark .TimeSheet-colHead {
    background: var(--background-panel-header);
    border-color: #a0a0a0;
    color: white;
}

html.dark .TimeSheet {
    border-color: var(--background-dark-theme);
}

/*TTP et TPI*/
html.dark ul.select2-choices li div {
    color: black;
}

html.dark .panel-featured-left {
    border-left: 3px solid #a0a0a0;
}

/*Transfert de device*/
html.dark .popover-content {
    background: var(--background-panel);
}

html.dark .popover-title, html.dark .popover {
    background: var(--background-panel-header);
}

html.dark .dropDown, html.dark .dropDown .select2-search {
    background: var(--background-panel-header);
}

.dropDown, .dropDown .select2-search {
    background: var(--background-white-theme);
}

/*STYLE SELECT 2 OTA */
html.dark .select2-results__option[aria-selected=true] {
    background: var(--background-panel) !important;
    color: white;
}

html.dark .select2-dropdown, html.dark .select2-selection--single {
    background: var(--background-panel-header);
    border-color: var(--background-panel);
    color: white;
}

html.dark .select2-search__field {
    border-color: var(--background-panel) !important;
}

html.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: white;
}

html.dark .dropDown input {
    background: var(--background-panel);
    border: none;
    color: white;
}

html.dark .dropDown {
    border-color: var(--background-panel-header);
}

.page-header .select2-container .select2-choice .select2-arrow, .page-header .select2-container .select2-choice div {
    border: 0;
}

.select2-search input {
    margin-top: 4px;
}

.breadcrumbs a:hover {
    text-decoration: none;
    color: var(--telemesure-bleu);
}

html.dark .trans-title {
    font-size: medium;
    color: #FFFFFF;
}

.trans-title {
    font-size: medium;
    color: #33353f;
}

.trans-description {

}

.trans-id {
    font-size: x-small;
}

.trans-map {
    border: solid 2px #d3d3d3;
    border-radius: 3px;
}

html.dark .trans-map {
    border-color: var(--background-panel-header);
}

.list-subs li {
    margin: 1% 0;
}

.list-subs li span {
    vertical-align: text-top;
}

.icon-actions {
    background-color: transparent;
    border-radius: 2px;
    font-size: 20px;
    height: 32px;
    width: 32px;
    text-align: center;
}

.icon-actions a:hover {
    color: #3bace3 !important;
    text-decoration: none;
}

.widget-summary .summary-icon.trans-info-widget {
    border-radius: 16px 16px 24px 6px;
    background-color: white;
}

html.dark .widget-summary .summary-icon.trans-info-widget {
    border-radius: 16px 16px 24px 6px;
    background-color: #2e353e;
}

.widget-summary .summary-icon.trans-info-widget.tiw-none {
    box-shadow: 2px 3px 2px #505461;
    color: #505461;
}

.widget-summary .summary-icon.trans-info-widget.tiw-ok {
    box-shadow: 2px 3px 2px var(--telemesure-success);
    color: var(--telemesure-success);
}

.widget-summary .summary-icon.trans-info-widget.tiw-warning {
    box-shadow: 2px 3px 2px var(--telemesure-warning);
    color: var(--telemesure-warning);
}

.widget-summary .summary-icon.trans-info-widget.tiw-error {
    box-shadow: 2px 3px 2px var(--telemesure-danger);
    color: var(--telemesure-danger);
}

.widget-summary .summary-icon.trans-info-widget.tiw-info {
    box-shadow: 2px 3px 2px var(--telemesure-info);
    color: var(--telemesure-info);
}

.panel-featured-left-ok {
    border-left: 5px solid var(--telemesure-success);
}

.panel-featured-left-info {
    border-left: 5px solid var(--telemesure-info);
}

.panel-featured-left-warning {
    border-left: 5px solid var(--telemesure-warning);
}

.panel-featured-left-error {
    border-left: 5px solid var(--telemesure-danger);
}

.panel-featured-left-none {
    border-left: 5px solid #505461;
}

.product-image {
    border-radius: 6px 6px 6px 6px;
    line-height: 64px;
    height: 64px;
    width: 64px;
    margin-left: 15px;
    padding: 0;
    align-items: center;
    justify-content: center;
    display: flex;
}

.container-separation-area {
    border-right: 2px solid #d3d3d3;
}

html.dark .container-separation-area {
    border-color: var(--background-panel-header);
}

.alerte-gestion-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.abonnement-container {
    padding: 7px;
    margin-bottom: 5px;
}

.entity-facturation {
    background: var(--background-panel-white-header);
}

html.dark .entity-facturation {
    background: var(--background-panel-header);
}

.sub-container-padding-right, .sub-container-padding-left {
    padding: 0;
}

#datatable-lastdata tbody tr, #datatable-ajax tbody tr {
    cursor: pointer;
}

html.dark .well {
    background: var(--background-panel-header);
    border: var(--background-panel-header);
}

html.dark .well table tr th {
    border-color: var(--background-dark-theme);
}

/*Edit DataSets*/

table#tableEditThreshold {
    border-collapse: collapse;

    --table-dark: var(--background-panel);
    --table-white: #9a9a9a;
}

table#tableEditThreshold td, table#tableEditThreshold tr {
    /*border: 1px solid #dddddd;*/
    text-align: center;
    padding: 0;
    color: var(--table-dark);
}

html.dark table#tableEditThreshold td, table#tableEditThreshold tr {
    color: var(--table-white);
}

table#tableEditThreshold td.threshold, table#tableEditThreshold tr#thresholdHeader td.seuil i, table#tableEditThreshold tr#thresholdFooter td.seuil i {
    color: black !important;
}

html.dark table#tableEditThreshold td.threshold, html.dark table#tableEditThreshold tr#thresholdHeader td.seuil i, html.dark table#tableEditThreshold tr#thresholdFooter td.seuil i {
    color: white !important;
}

table#tableEditThreshold .cell-color div {
    height: 50px;
    width: 20px;
}

table#tableEditThreshold td.cell-line {
    border-right: 1px solid var(--table-dark);
}

html.dark table#tableEditThreshold td.cell-line {
    border-color: var(--table-white);
}

table#tableEditThreshold td.threshold {
    text-align: left;
    padding-left: 5px;
    font-size: 15px;
}

table#tableEditThreshold td.threshold span.delete-threshold i {
    color: var(--table-dark);
    cursor: pointer;
}

html.dark table#tableEditThreshold td.threshold span.delete-threshold i {
    color: var(--table-white);
}

table#tableEditThreshold td.choice-color {
    padding: 0 5px;
}

table#tableEditThreshold td.choice-color div {
    cursor: pointer;
    width: 10px;
}

table#tableEditThreshold td.line-custom {
    padding: 0;
}

table#tableEditThreshold td.line-custom div {
    height: 1px;
    width: 100%;
    background: var(--table-dark);
}

html.dark table#tableEditThreshold td.line-custom div {
    background: var(--table-white);
}

table#tableEditThreshold td.line-custom div.line {
    height: 1px;
    width: 100%;
    background: var(--table-dark);
    margin: 5px 0;
}

html.dark table#tableEditThreshold td.line-custom div.line {
    background: var(--table-white);
}

table#tableEditThreshold td.line-custom div.line-background {
    height: 10px;
    width: 50%;
    margin-left: 5px;
}

table#tableEditThreshold .arrow-custom {
    position: absolute;
    background: var(--table-dark);
    width: 1px;
    height: 50%;
    left: 49%;
}

html.dark table#tableEditThreshold .arrow-custom {
    background: var(--table-white);
}

table#tableEditThreshold .upper-arrow {
    bottom: 0;
}

/* ========
* SELECT 2 V4
* ========*/

.select2-container--default .select2-selection--multiple {
    border-color: #aaa !important;
}

html.dark .select2-container--default .select2-selection--multiple {
    border: none !important;
    background: var(--background-panel-header) !important;
}

.select2-container--default .select2-selection--multiple .select2-search {
    background: var(--background-white-theme);
    margin-top: 5px;
    border-radius: 5px;
}

html.dark .select2-container--default .select2-selection--multiple .select2-search {
    background: var(--background-panel)
}

html.dark .select2-selection__choice {
    border: none !important;
    color: var(--telemesure-bleu);
    background: var(--background-panel) !important;
}

html.dark .select2-selection__choice__remove:hover {
    color: #999 !important;
}

.select2-results__option--highlighted {
    background: var(--telemesure-bleu) !important;
    border-radius: 5px;
}

/* ========
* REPORT CSS
* ========*/

.report_display_day {
    display: flex;
    justify-content: space-around;
    background: var(--background-white-theme);
    border-color: #aaa !important;
    border-radius: 5px;
}

html.dark .report_display_day {
    background: var(--background-panel-header);
    border-color: var(--background-panel-header) !important;
}

.report_display_day .day-label {
    background: white;
    margin: 5px 5px;
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
    text-align: center;
    width: 40px;
}

html.dark .report_display_day .day-label {
    background-color: var(--background-panel);
}

.report_display_day .day-label input {
    display: none;
}

.report_display_day .day-label.selected {
    background-color: var(--telemesure-bleu) !important;
    color: white;
}

/* === Transmetteur add by qak page ===*/

span.endpoint {
    color: var(--telemesure-info);
}

@media screen and (min-width: 768px) {
    .info-label {
        text-align: end;
        font-weight: bold;
        padding-left: 0px;
        vertical-align: baseline;
    }

}

@media screen and (min-width: 993px) {
    .sub-container-padding-right {
        padding-right: 3px;
    }

    .sub-container-padding-left {
        padding-left: 3px;
    }
}

@media screen and (max-width: 993px) {
    .info-label {
        font-weight: bold;
        padding-left: 0px;
    }

    .alerte-area {
        margin-bottom: 1%;
    }
}

@media screen and (max-width: 1600px) {
    .container-separation-area {
        border-right: 0px;
        border-bottom: 2px solid #d3d3d3;
        margin-bottom: 2%;
        padding-bottom: 2%;
    }
}