/**
* HONEYINSTRUMENTS
* Author: Jérôme.Cerato
* Email: jcerato@symes.fr
* URL : honeyinstruments.com
* Date: Decembre 2018
*/


/************20.1 Page home ****************/

@media (min-width: 2000px) {
    .content > .container-fluid.home {
        max-width: 90%;
    }
}


.panel-heading img {
    max-height: 150px;
}

.home h1 span {
    font-size: 80px;
    color: #ffcc32;
}

.home .pane-body {
    padding: 50px
}

.home h1 {
    color: #333;
    font-size: 65px
}

.home h1 span {
    font-size: 80px;
    color: #d74548
}

.home .home-contain {
    display: block;
    width: 100%;
    margin-top: -10%
}

.home .home-contain h4 {
    font-size: 16px;
    color: #333;
    font-weight: 400;
    font-family: roboto
}

.home .loader-2 {
    top: 40%;
    right: 50%;
    width: 30px;
    height: 30px;
    margin-left: -15px;
    margin-top: -15px;
}

.home .close {
    opacity: 0.8;
}


/* animation home */
* > .intro-x:nth-child(1) {
    z-index: calc(50 - 1);
    opacity: 0;
    position: relative;
    transform: translateX(50px);
    -webkit-animation: 0.4s intro-x-animation ease-in-out 0.33333s;
    animation: 0.4s intro-x-animation ease-in-out 0.33333s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: calc(1 * 0.1s);
    animation-delay: calc(1 * 0.1s);
}

* > .intro-y:nth-child(1) {
    z-index: calc(50 - 1);
    opacity: 0;
    position: relative;
    transform: translateY(50px);
    -webkit-animation: 0.4s intro-y-animation ease-in-out 0.33333s;
    animation: 0.4s intro-y-animation ease-in-out 0.33333s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: calc(1 * 0.1s);
    animation-delay: calc(1 * 0.1s);
}

* > .intro-y:nth-child(2) {
    z-index: calc(50 - 2);
    opacity: 0;
    position: relative;
    transform: translateY(50px);
    -webkit-animation: 0.4s intro-y-animation ease-in-out 0.33333s;
    animation: 0.4s intro-y-animation ease-in-out 0.33333s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: calc(2 * 0.1s);
    animation-delay: calc(2 * 0.1s);
}

* > .intro-y:nth-child(3) {
    z-index: calc(50 - 3);
    opacity: 0;
    position: relative;
    transform: translateY(50px);
    -webkit-animation: 0.4s intro-y-animation ease-in-out 0.33333s;
    animation: 0.4s intro-y-animation ease-in-out 0.33333s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: calc(3 * 0.1s);
    animation-delay: calc(3 * 0.1s);
}

* > .intro-y:nth-child(4) {
    z-index: calc(50 - 4);
    opacity: 0;
    position: relative;
    transform: translateY(50px);
    -webkit-animation: 0.4s intro-y-animation ease-in-out 0.33333s;
    animation: 0.4s intro-y-animation ease-in-out 0.33333s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: calc(4 * 0.1s);
    animation-delay: calc(4 * 0.1s);
}

* > .intro-y:nth-child(5) {
    z-index: calc(50 - 5);
    opacity: 0;
    position: relative;
    transform: translateY(50px);
    -webkit-animation: 0.4s intro-y-animation ease-in-out 0.33333s;
    animation: 0.4s intro-y-animation ease-in-out 0.33333s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: calc(5 * 0.1s);
    animation-delay: calc(5 * 0.1s);
}


@-webkit-keyframes intro-y-animation {
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes intro-y-animation {
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}


/* portlet */
.home .widget-evolution,
.home .widget-alerts,
.home .widget-localisation,
.home .widget-notes,
.home .widget-temperature,
.home .widget-variation {
    height: 400px;
    min-height: 400px;
}

.home .widget-evolution .table-container,
.home .widget-alerts .table-container,
.home .widget-localisation .table-container,
.home .widget-notes .table-container,
.home .widget-temperature .table-container,
.home .widget-variation .table-container {
    height: 400px;
    min-height: 400px;
}


/* portlet */
@media (max-width: 2000px) {
    .home .widget-evolution,
    .home .widget-alerts,
    .home .widget-localisation,
    .home .widget-notes,
    .home .widget-temperature,
    .home .widget-variation {
        height: 300px;
        min-height: 300px;
    }

    .home .widget-evolution .table-container,
    .home .widget-alerts .table-container,
    .home .widget-localisation .table-container,
    .home .widget-notes .table-container,
    .home .widget-temperature .table-container,
    .home .widget-variation .table-container {
        height: 300px;
        min-height: 300px;
    }

    .home .large_chart {
        overflow: hidden;
    }

    #map {
        height: 270px !important;
        min-height: 270px !important;
    }

    #home-alert-active {
        height: 270px !important;
        min-height: 270px !important;
    }

    #home-chart-evolution {
        height: 270px !important;
        min-height: 270px !important;
    }

    #home-notes {
        height: 270px !important;
        min-height: 270px !important;
    }

    #home-chart-variation {
        height: 270px !important;
        min-height: 270px !important;
    }

}


.home .large_chart {
    width:100%;
}

.home .widget-localisation {
    padding-right: 15px;
    padding-left: 15px;
}

.home .portlet {
    border: 0px;
    border-radius: 0.375rem;
    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.04);
}

.home .portlet .portlet-heading {
    height: 68px;
}

.home .portlet-heading .tile-icon {
    float: left;
    margin-right: 10px;
}

.home .portlet-heading .portlet-title {
    margin-top: 5px;
}

.home .portlet .portlet-body {
    border: 0px;
    border-radius: 0.375rem;
}


/* title */
.page-title-box .page-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    float: left;
}

.page-title-box .breadcrumb {
    float: right;
    background-color: transparent !important;
}


/* HOME > WIDGET variation */
.home .devices-list {
    min-height: 200px;
    margin-bottom: 10px;
}


.status-ab {
    position: absolute;
    right: 0;
}

.home .mini-stat {
    background: #fff;
    padding: 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 20px;
}

.home .mini-stat-icon {
    width: 60px;
    height: 60px;
    display: inline-block;
    line-height: 60px;
    text-align: center;
    font-size: 30px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    float: left;
    margin-right: 10px;
    color: #fff;
}

.home .mini-stat-info {
    font-size: 12px;
    padding-top: 2px;
}

.home .mini-stat-info span {
    display: block;
    font-size: 24px;
    font-weight: 600;
}


.home .tile-stats {
    padding: 20px 0px 0px 0px;
    position: relative;
    min-height: 128px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid #E6EBEC;
    padding: 20px 20px 20px 20px;
    position: relative;
    height: 170px;
    overflow: hidden;
    margin-bottom: 0px;
    border: 0px;
    border-radius: 0.375rem;
    box-shadow: 0px 3px 20px rgb(0 0 0 / 4%);
}


@media (max-width: 991px) {
    .home .tile-stats {
        margin-bottom: 15px;
    }
}


.home .tile-stats .status {
    margin-top: 0;
    padding: 15px 20px 0 0;
}


.home .tile-stats .list-sensors li {
    padding: 3px 15px;
    border: 0px;
}

.home .tile-stats .list-sensors li.span {
    font-size: 10px;
}


.home .tile-stats .title {
    border-bottom: 1px solid #fafafa;
}

.home .tile-stats .title .badge {
    margin-top: 5px;
}

.home .tile-stats .tile-icon {
    float: left;
    margin-right: 10px;
    margin-top: 3px;
    width: 25px;
    height: 25px;
}

.home .tile-stats h3 {
    font-size: 16px;
    color: #000;
    font-weight: 500;
    margin: 0px;
    padding: 0px;
    padding-bottom: 10px;
    padding-top: 5px;
    display: inline-block;
}

.home .tile-stats h3.text-overflow {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 210px;
    white-space: nowrap;
}

.home .tile-stats h3 span {
    display: block;
    font-size: 12px;
    color: #ccc;
    text-transform: uppercase;
}


.home .tile-stats .weight {
    position: relative;
    color: #000;
    /*min-width:230px;*/
}


@media (max-width: 500px) {
    .home .tile-stats .weight-value {
        font-size: 30px;
    }
}


/* ajustement chevron > changement de tile */
.home .tile-stats .tile-second-flex {
    padding-right: 0px;
    padding-left: 0px;
}

@media (max-width: 2000px) {
    .home .tile-stats .tile-second-flex {
        padding-right: 35px;
        padding-left: 35px;
    }

    .widget-stats .weight-value {
        font-size: 30px !important;
    }

    .home .tile-stats .weight-variation {
        font-size: 12px !important;
    }
}

@media (max-width: 1200px) {
    .home .tile-stats .tile-second-flex {
        padding-right: 40px;
        padding-left: 40px;
    }
}

.home .tile-stats .weight-variation {
    font-weight: 500;
    font-size: 14px;
    margin-left: 10px;
    display: inline-block;
    margin-bottom: 4px;
}

.home .tile-stats .weight-variation i {
    margin-left: -15px;
}


/*
.home .tile-stats .signal-bars {
    margin-left: 0px;
    width: 50px;
    margin-top:6px;
}

.home .tile-stats .tile-battery {
    font-size:20px;
    
}
*/

.home .tile-stats .small-chart {
    margin-left: 10px;
}

@media (max-width: 400px) {
    .home .tile-stats .small-chart {
        padding-left: 20px;
    }
}

/*
.home .tile-footer {
    border-top:1px solid #eee;
    padding: 5px 0px;
    color:#ddd;
}
.home .tile-footer .tile-date {
    margin-left: auto;
}
.home .tile-footer .tile-separator {
    border-left:1px solid #eee;
    margin-left:8px;
    margin-right:8px;
    height:20px
}

.home .tile-footer .signal-bars {
    width:60px;
    margin-left:5px;
}
.home .tile-footer .signal-bars .ok .bar {
    background-color: #c7c7c7 !important;
}*/


.home .owl-wrapper-outer {
    padding-bottom: 20px;
}

.home .owl-carousel .owl-stage-outer {
    padding-top: 20px;
}

.home .report-box:before {
    content: "";
    width: 90%;
    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.04);
    position: absolute;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.75rem;
    height: 100%;
    border-radius: 0.375rem;
    --tw-bg-opacity: 1;
    background-color: rgba(248, 250, 252, 1);
}


/* animation card loading */
/*
.item.is-loading  .tile-stats {
    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
    border-radius: 5px;
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
    height:180px;
}


@keyframes shine {
  to {
    background-position-x: -200%;
  }
}*/


/* zoom card*/
.home .zoom-in {
    transform: translate(0, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
    cursor: pointer;
    transition-duration: 300ms;
}

.home .zoom-in:hover {
    transform: translate(0, 0) rotate(0) skewX(0) skewY(0) scaleX(1.02) scaleY(1.02);
    /*box-shadow: 0 0 #0000, 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%)*/
}

/* owl paginate */
.home .device-paginate {
    display: none;
    margin-top: 0px;
    position: relative;
    top: -150px;
}

.home .slides-separator {
    width: 100%;
    /*
    border-top:1px solid rgba(203, 213, 225, 1);
    position:absolute;
    top:16px;
    */
    height: 1px;
    background-color: #000;
    margin-top: -15px;

}

/*
.home .divider-start {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}
.home .divider-start::after {
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    border-top: 1px solid rgb(213 219 237);
    margin-top: 1px;
    content: "";
}
.home .divider-start::after {
    margin-left: 90px;
    margin-right: 90px;
    margin-top: 15px;
}
*/

.home .owl-control-button .btn-arrow {
    font-size: 50px;
    color: #000;
    /*
    width: 52px;
    height: 52px;*/
    position: absolute;
    top: 0;
    /*border-radius: 0.375rem;*/
    border: 1px solid rgba(203, 213, 225, 1);
    -webkit-transition: border-color .3s, background-color .3s;
    transition: border-color .3s, background-color .3s;
    background: none;
    padding: 0;
    margin: 0;
    outline: none;
    /*box-shadow: 0px 20px 75px 0 rgb(92 92 92 / 16%), 0 -12px 75px 0 rgb(255 255 255 / 12%) !important;*/
    padding: 7px;
    z-index: 100;

}

/*
.home .owl-control-button .btn-arrow svg {
    height:35px;
    width:35px;
    margin-bottom:-3px;
    color:#000000;
}*/

.home .owl-control-button .btn-arrow:before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    content: "";
    -webkit-transition: border-color .3s;
    transition: border-color .3s;
    border-top: none !important;
    border-right: none !important;
    background-repeat: no-repeat;
    margin: 0;
}

.home .owl-control-button .btn-next:before {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
}

.home .owl-control-button .btn-prev {
    /*left: 50px;*/
    left: 15px;
}

.home .owl-control-button .btn-prev svg {
    margin-left: -3px;
}

.home .owl-control-button .btn-next {
    /*left: 50px;*/
    right: 15px;
}

.home .owl-control-button .btn-next svg {
    margin-right: -3px;
}


.home .owl-control-button .btn-arrow.btn-disabled {
    opacity: 0; /*0.5*/
}


.home .owl-control-button .btn-prev {
    left: -70px;
}

.home .owl-control-button .btn-next {
    right: -70px;
}

.home .owl-control-button .btn-arrow {
    border: 0px;
}

/*
@media (max-width: 2000px) {
    .home .owl-control-button .btn-prev {
        left :-60px;
    }
    
    .home .owl-control-button .btn-next {
        right :-60px;
    }
}*/
/*
@media (max-width: 2000px) {
    .home .owl-control-button .btn-prev {
        left :-50px;
    }
    
    .home .owl-control-button .btn-next {
        right :-50px;
    }
}*/
@media (max-width: 2000px) {
    .home .owl-control-button .btn-prev {
        left: 0px;
    }

    .home .owl-control-button .btn-next {
        right: 0px;
    }
}

@media (max-width: 700px) {
    .home .owl-control-button .btn-prev {
        left: 10px;
    }

    .home .owl-control-button .btn-next {
        right: 10px;
    }
}


/* home > datatable */
/*
.home-datatable {
    padding-left:20px;
    padding-right:20px;
}

.home-datatable .dataTables_scrollBody {
    border-top:0px;
}

.home-datatable .col-overflow {
    width: 100px;
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow: ellipsis;
    display:block;
}
    
.home-datatable .table-datatable div.dataTables_info {
    padding-top: 15px;
    margin-bottom:15px;
    font-size:13px;
}

.home-datatable .paginate_button {
    display:none;
}
.home-datatable .paginate_button.next,
.home-datatable .paginate_button.previous {
    display:inline-block;
}
.home-datatable .paginate_button.next a,
.home-datatable .paginate_button.previous a{
    line-height: 40px;
    text-align:center;
    width: 30px;
    height: 30px;
    border-radius: 0.375rem;
    border: 0px;
    background: none;
    padding: 0;
    margin: 0;
    outline: none;
}


.home-datatable .paginate_button.disabled {
    opacity :0.4;
}


.home-datatable .dataTables_scrollBody {
    border-bottom:0px !important;
}*/


/* home > alerts */
.home-alert {
    padding-left: 15px;
    padding-right: 15px;
    height: 350px;
    min-height: 350px;
    overflow: hidden !important;
}

.home-alert-pull-right {
    float: left;
}

/*
@media (min-width: 1600px) {
    .home .widget-alerts {
        height: 400px;
        min-height: 400px;
    }

    .home .widget-alerts .table-container {
        height: 390px;
        min-height: 390px;
    }

    .home-alert {
        height: 370px;
        min-height: 370px;
    }

    .home-alert-pull-right {
        float: right;
    }
}
*/
@media (max-width: 1200px) {
    .home-alert-pull-right {
        float: none;
    }
}

.home-alert .activity-alert {
    list-style: none;
}

.home-alert .activity-alert .btn-acquitte {
    padding: 2px 10px !important;
    height: 24px;
    margin-left: 24px;
}


.home-note .activity-alert .home-tile {
    font-weight: 500;
    margin-top: 0px;
    margin-bottom: 15px;
    margin-right: 10px;
}

.home-alert .activity-alert .alert-item-list {
    position: relative;
    padding-bottom: 0px;
    padding-left: 20px;
    padding-right: 10px;
    border-left: 2px solid #f5f6f8;
    margin-left: 20px;
    margin-right: 10px;
    margin-bottom: 20px

}

.home-alert .activity-alert .alert-item-list .alert-content:hover {
    cursor: pointer;
}

.home-alert .activity-alert .alert-item-list:after {
    position: absolute;
    top: -7px;
    left: -12px;
    content: "\F0D5A"; /*"\F0D5A"*/
    display: inline-block;
    font: normal normal normal 24px/1 "Material Design Icons";
    text-rendering: auto;
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 24px;
    background-color: #fff;
    padding-bottom: 5px;
}

.home-alert .activity-alert .alert-item-list.active:after {
    color: #ef273d;
}

.home-alert .activity-alert .alert-item-list.acquited:after {
    color: #F7B740; /*#cccccc;*/
}

.home-alert .activity-alert .alert-item-list.finished:after {
    color: #33CE36;
}

.home-alert .activity-alert .alert-item-list .alert-item-info {
    position: relative;
    padding-left: 25px;
    display: block;
}

.home-alert .activity-alert .alert-item-list .alert-item-info i {
    position: absolute;
    left: 0px;
    font-size: 19px !important;
    top: -4px;
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
}

.home-alert .alert-btn-right {
    border-top: 3px;
}

.home-alert .fromnow {
    font-size: 11px;
}

.home-alert .alert-content {
    padding: 15px;
    background-color: #f8fafc;
    margin-top: 5px;
    border-radius: 6px;
    border-top-left-radius: 0px;
}

.home-alert .home-title {
    font-weight: 500;
    color: #000;
    background-color: #f8fafc;
    padding: 8px 20px 0px 15px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
}

.home-alert .alert-content-text {
    color: #000;
    font-weight: 500;
}


/* home > note */
.widget-notes {
    padding-right: 20px
}

.home-note {
    /*
    padding-left: 30px;
    padding-right: 40px;*/

    padding-left: 15px;
    padding-right: 15px;

    height: 370px !important;
    min-height: 370px !important;
    overflow: hidden;
}


.home-note .activity-feed {
    list-style: none;
}

.home-note .activity-feed .home-tile {
    font-weight: 500;
    margin-top: 0px;
    margin-bottom: 15px;
    margin-right: 10px;
}

.home-note .activity-feed .feed-item-list {
    position: relative;
    padding-bottom: 24px;
    padding-left: 20px;
    border-left: 2px solid #f5f6f8;
    margin-left: 20px;
    margin-right: 10px;

}

.home-note .activity-feed .feed-item-list:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -9px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid #fcd435;
    background-color: #fff;
}

.home-note .fromnow {
    font-size: 11px;
}

.home-note .note-content {
    padding: 15px;
    background-color: #f8fafc;
    margin-top: 10px;
    border-radius: 10px;
}

.home-note .home-title {
    font-weight: 500;
    color: #000;
}


.home-note .feed-item-list.note-alert .note-content {
    /*
    padding:15px;
    background-color: #ef273d;
    color: #fff;
    border-radius: 6px;
    max-width:100%;*/
}

.home-note .feed-item-list.note-alert .note-content a {
    color: #f1aa0d;
    font-weight: 500;
}

.home-note .feed-item-list.note-alert .note-click {
    cursor: pointer;
}


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

.infowindows {
    font-size: 15px;
    padding-right: 10px;
    padding-left: 10px;
}

.infowindows .infowindows-title {
    color: #000;
    font-size: 15px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.infowindows .infowindows-weight {
    color: #000;
    font-size: 15px;
    margin-bottom: 10px;
}

.infowindows ul.infowindows-other {
    border-top: 1px solid #eee;
    padding-top: 10px;
    padding-left: 20px;
    color: #000;
    list-style: none; /* Remove default bullets */
}

.infowindows ul li {
    font-size: 12px;
    vertical-align: bottom;
    line-height: 12px;

}

.infowindows ul li.disabled {
    opacity: 0.3
}


.infowindows ul li b {
    float: right;
}

.infowindows ul li::before {
    content: "\2022";
    color: #f79132;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    font-size: 20px;
    margin-left: -1em;
}


.infowindows .weight-value {
    font-size: 25px;
    /* color: #000; */
    font-weight: 400;
    color: #000;
}

.infowindows .font-size-14 {
    font-size: 14px !important;
}

.infowindows .fw-medium {
    font-weight: 500;
}


.gm-style-iw-chr {
    position: absolute !important;
    top: -10px !important;
    right: -10px !important;
}
.gm-style-iw-c {
    padding-top:15px !important;
}

/* home > chart evolution*/
.home .select-option-chart {
    display: none;
}
#home-evolution .form-group .units-selects-chart select {
    width:90px;
    min-width: 90px
}
#home-evolution .form-group .devices-selects-chart select {
    width: 130px;
    min-width: 130px;
}


.dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}
/*
.home .SumoSelect>.CaptionCont>span {
    padding-left: 10px !important;
    color: #2F353F !important;
    font-size: 14px;
    padding-right:25px;
}

.home .SumoSelect>.CaptionCont {
    border: 1px solid #eee;
    height: 36px;
    line-height: 25px;
    cursor: pointer;
}

.home  .SumoSelect>.CaptionCont>label>i:after {
    font-size:14px;
}

.home .SumoSelect>.optWrapper>.options li.opt label {
    font-size:13px;
}
*/


/***************** 20.2 login page ****************/
@media (max-width: 800px) {
    .login .panel,
    .signup .panel {
        margin-right: 10px;
        margin-left: 10px;
    }
}

@media (max-width: 800px) {
    .login .panel {
        margin-top: 60px;
    }

    .signup .panel {
        margin-top: 10px;
    }
}


/* tableoption tooltips */
.tableoptions {
    padding: 7px 0px 0px 0px;
}

.tableoptions .form-group {
    margin-bottom: 0px;
}

.tableoptions .popover {
    background: #d74548 !important;
    color: #fff;
}

.tableoptions .popover.right .arrow:after {
    border-right-color: #d74548;
}

.tableoptions select {
    height: 38px;
}

.tdtooltips {
    display: inline-block;
}

.iconcontact {
    position: absolute;
    bottom: 15px;
    right: 15px;
}

.iconcontact .circle-icon {
    background: #fff;
    padding: 10px;
    border-radius: 50%;
}

.iconcontact .circle-icon:hover {
    background: #D6D6D6;
}

.iconcontact i {
    font-size: 20px;
    color: #262830;
}


/***************** 20.3 Devices / details Pages ****************/
.iconalert {
    font-size: 15px !important;
    color: #d74548;
    display: inline-block;
    margin-left: 2px;
    vertical-align: middle;
    margin-bottom: 2px;
}

.iconalert-batt {
    font-size: 15px !important;
    color: #d74548;
    display: inline-block;
    /*margin-top: 7px !important;*/
    margin-left: 2px;
    vertical-align: top;
}

/* tools left*/
.tableoptions .btn {
    height: 38px;
    line-height: 25px;
}

.tableoptions .btn-selectdevices .btn span {
    margin-left: 20px;
}

#devices .subjectname {
    padding-left: 45px;
    position: relative;
}

#devices .icon_hive:before {
    content: '';
    background: url("../../img/svg/hive.svg");
    background-repeat: no-repeat;
    position: absolute;
    top: 12px;
    left: 15px;
    width: 25px;
    height: 25px;
}

#devices .icon_gateway:before {
    content: '';
    background: url("../../img/svg/gateway.svg");
    background-repeat: no-repeat;
    position: absolute;
    top: 12px;
    left: 15px;
    width: 25px;
    height: 25px;
}

#devices .icon_maxi4:before {
    content: '';
    background: url("../../img/svg/maxi4.svg");
    background-repeat: no-repeat;
    position: absolute;
    top: 12px;
    left: 15px;
    width: 25px;
    height: 25px;
}

#devices .icon_sensor:before {
    content: '';
    background: url("../../img/svg/sensor_yellow.svg");
    position: absolute;
    top: 12px;
    left: 10px;
    width: 25px;
    height: 25px;
}

#devices .icon_hub:before {
    content: '';
    background: url("../../img/svg/hub.svg");
    background-repeat: no-repeat;
    position: absolute;
    top: 12px;
    left: 15px;
    width: 25px;
    height: 25px;
}

#devices .icon_tracker:before {
    content: '';
    background: url("../../img/svg/tracker.svg");
    background-repeat: no-repeat;
    position: absolute;
    top: 12px;
    left: 15px;
    width: 25px;
    height: 25px;
}


#details .tableoptions .form-control {
    border: 1px solid #eee;
}

#details .large_chart {
    border-top: 1px solid #eee;
}

/* select page */
.tableoptions .btn-default {
    background-color: #fff;
    border-radius: 4px !important;
    margin-bottom: 5px;
    padding: 2px 13px 2px 13px;
    height: 38px;
    line-height: 30px;
}

.tableoptions .btn-selectlength .dropdown-menu {
    width: 58px;
    min-width: 58px;
}

.tableoptions .btn-selectlength .dropdown-menu > li > a {
    padding: 6px 15px;
}

.tableoptions .dropdown-menu > .active > a,
.tableoptions .dropdown-menu > .active > a:focus,
.tableoptions .dropdown-menu > .active > a:hover {
    color: #000;
    text-decoration: none;
    background-color: #e9e9e9; /*#1c2b36;*/
    outline: 0;
}


/* select type map */
/*
.tableoptions .btn-selecttype .btn-default {
    background-color: #fff;
    border-radius: 0px !important;
    margin-bottom: 5px;
    padding: 2px 13px 2px 13px;
    height: 38px;
    color: #797979;
}

.tableoptions .btn-selecttype {
    margin-left: 5px;
    margin-right: 5px;
}

.tableoptions .btn-selecttype .caret {
    margin-left: 10px;
}

.tableoptions .btn-selecttype .dropdown-menu {
    min-width: 58px;
}

.tableoptions .btn-selecttype .dropdown-menu>li>a {
    padding: 6px 15px;
}
*/

/* select icon */
.btn-selecticon .btn-default {
    background-color: #fff;
    border-radius: 0px !important;
    margin-bottom: 5px;
    padding: 2px 13px 2px 13px;
    height: 38px;
    color: #797979;
}

.btn-selecticon {
    margin-left: -1px;
    margin-right: 0px;
}

.btn-selecticon svg {
    width: 20px;
    max-height: 25px;
    margin-top: 0px !important
}

.btn-selecticon .caret {
    margin-left: 10px;
}

.btn-selecticon .dropdown-menu {
    min-width: 28px;
}

.btn-selecticon .dropdown-menu > li > a {
    padding: 6px 2px;
}

.btn-selecticon .dropdown-menu > .active > a,
.btn-selecticon .dropdown-menu > .active > a:focus,
.btn-selecticon .dropdown-menu > .active > a:hover {
    color: #fff;
    text-decoration: none;
    background-color: #eee;
    outline: 0;
}

/* cols visible */
.tableoptions .btn-selectcol .btn {
    background-color: #fff;
    border-radius: 4px !important;
    margin-bottom: 5px;
    padding: 2px 15px 4px 15px;
    border: 1px solid #E6EBEC;
    height: 38px;
    color: #2f353f;
}

.tableoptions .btn-selectcol .btn-default i {
    font-size: 18px;
    vertical-align: middle
}

.tableoptions .btn-selectcol .cr-styled {
    width: 100%;
}

/* chart checkbox value */
.tableoptions .label-select label {
    line-height: 30px;
    margin-top: 5px;
}

.tableoptions .label-select label {
    margin-right: 20px;
}


/* view select */
.tabstools {
}

.tabstools .tabsline {
    border-bottom: 1px solid #eee;
    position: relative;
}

.tabstools .tabsline .history {
    position: absolute;
    right: 0;
    bottom: 0;
    padding-bottom: 10px;
}

.tabstools .tabsline .history.active {
    border-bottom: 2px solid #d74548;
}

.tabstools .tabsline .history i {
    font-size: 17px
}

/*position:absolute;right:0;bottom:0;margin-bottom:10px*/
.tabstools .btn {
    border-radius: 0px;
}

.tabstools .form-group {
    margin-bottom: -1px;
}

.tabstools .btn-selectview {
    padding: 0px;
    margin: 0px;
    margin-top: 20px;

}

.tabstools .btn-selectview a {
    height: 38px;
    line-height: 25px;
    display: inline-block;
}

.tabstools .btn-selectview .btn.active,
.tabstools .btn-selectview .btn:active {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.tabstools .btn-selectview a i {
    margin-right: 10px;
}

.tabstools .btn-selectview li {
    list-style: none;
    float: left;
}

.tabstools .btn-selectview li + li:before {
    content: " | ";
    padding: 0 0px;
    color: #eee;
}

.tabstools .btn-selectview li .btn {
    /*background-color:rgba(245, 245, 245, 0.75) !important;*/
    border: 0px;
    color: #000;
    text-transform: uppercase;
    font-size: 14px;
    font-family: Montserrat, sans-serif;
}

.tabstools .btn-selectview li.active .btn {
    /*background-color: rgb(255, 255, 255) !important;*/
    /*border-bottom:1px solid #fff*/
    border-bottom: 2px solid #ffc800;
    color: #000;
}

.tabstools .btn-selectview li:hover .btn,
.tabstools .btn-selectview li:focus .btn {
    color: #000;
}

/* btn add device */
.tabstools .btn-adddevice {
    margin-top: 23px;
}

.tabstools .btn-adddevice .btn {
    border-bottom: 0px;
}

.editnote {
    position:relative
}

/* btn delete */
.tableoptions .btn-delete button {
    display:none;
}

/* annotations */
.edit-case-note {
    display:block;
    position:relative;
}

.edit-case-note:hover {
    font-weight:500;
    text-decoration: underline dotted;
}



/***************** 20.4 Settings ****************/


.form-settings .form-control {
    border: 1px solid #eee;
}

.form-settings .configopt .panel-heading h4 .switch {
    float: right
}


.form-settings .configopt .panel-title {
    font-weight: 500;
    /*color: #333333;*/
    color: #000;
    /*padding-left:38px;*/
    padding-left: 3px;
}

.form-settings .configopt h5.panel-title {

    font-size: 13px;
    /* color: #333333; */
    color: #717171;
    /* padding-left: 38px; */
    padding-left: 3px;
}

.configopt {
    border: 1px solid #eee;
    /* border: 1px solid rgba(0,0,0,0.08); */
    margin-bottom: 10px;
    box-shadow: none;
    border-radius: 0px;
    position: relative;
    border-radius: 4px;
}


.configopt .panel-heading {
    background-color: #fbfbfb;
    border-bottom: 1px solid #eff2f7;
    /*background-color: #f6f8f8;*/
    /*background-color:#fbfafa;*/
}

.configopt .panel-heading.collapsed {
    /*border-bottom: 0px;*/
}

.configopt .panel-heading  {
    position: relative;
}

.configopt .panel-heading .accicon {
    /*float: right;*/
    position: absolute;
    right: 10px;
    top: 15px;

}

.configopt .panel-heading .accicon .arrowicon {
    color: #000;
    font-size: 20px;
}

.configopt .panel-heading .accicon .arrowicon:before {
    transform: rotate(180deg);
    transition: .3s transform ease-in-out;
}

.configopt .panel-heading.collapsed .accicon .arrowicon:before {
    transform: rotate(0deg);
    transition: .3s transform ease-in-out;
}

.configopt .list-group-item {
    min-height: 40px;
}

.configopt .subtitle {
    padding: 20px;
    font-weight: 500;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 0px;
    padding-left: 15px;
}

.configopt .label-2 {
    width: 100%;
    display: block;
    margin: 0px;
    color: #000;
}

.configopt .alert {
    color: #333;
}

.configopt .panel-title i {
    margin-right: 15px;
    position: absolute;
    left: 20px;
    top: 12px;
    display: none;
}

.configopt label {
    font-weight: normal;
    vertical-align: middle;
    line-height: 32px;
}

.configopt .form-group div {
    /*line-height: 37px*/
}

.configopt i.setting-inf {
    font-size: 16px;
    cursor: pointer
}

i.setting-warning {
    font-size: 20px;
    color: #d74548;
}

i.setting-info {
    font-size: 20px;
    color: #333;
}


.configopt .btn-select-days {
    width: 100%;
}

.configopt .btn-select-days .btn {
    width: 14.2%;
}

.configopt .btn-select-days .btn-default.active {
    background-color: rgb(52, 199, 59) !important;
    color: #fff;
}

.configopt .time-bar {
    white-space: nowrap;
    position: relative;
}

.configopt div.time-bar {
    line-height: 15px !important;
    margin-bottom: 15px;
}

.configopt .time-bar div {
    line-height: 15px !important;

}

.configopt .time-bar span {
    position: absolute;
    z-index: 5;
    font-size: 11px;
    padding: 2px;
    color: #c7c6c6;
    margin-top: 19px;
}

.configopt .time-bar span.grid-pol {
    position: absolute;
    top: 0;
    width: 1px;
    height: 6px;
    padding: 0px;
    margin-left: 0px !important;
    margin-top: 12px;
    background: #000;
    background: #e1e4e9;
}

.configopt .time-bar span.grid-pol.legend-grid0-time-bar {
    margin-left: 0px;
}

.configopt .time-bar span.grid-pol.legend-grid4-time-bar {
    margin-right: 0px;
}

.configopt .time-bar span.legend-grid0-time-bar {
    left: 3px;
    margin-left: -7px;
}

.configopt .time-bar span.legend-grid1-time-bar {
    left: 25%;
    margin-left: -7px;
}

.configopt .time-bar span.legend-grid2-time-bar {
    left: 50%;
    margin-left: -10px;
}

.configopt .time-bar span.legend-grid3-time-bar {
    left: 75%;
    margin-left: -10px;
}

.configopt .time-bar span.legend-grid4-time-bar {
    right: 3px;
    margin-right: -7px;
}

.configopt .active-time-bar {
    position: relative;
    width: 100%;
    height: 6px;
    border: 1px solid #eeeeee;
    /*background-color: #eeeeee;*/
    display: inline-block;
}

.configopt .allow-dropdown {
    width: 100%
}

/* The switch  */
.configopt .switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    float: right;
    margin-right: 15px;
    margin-top: 16px;
}

.configopt .switch input {
    display: none;
}

.configopt .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background-color: #ccc;*/
    background-color: #9fa4ab;
    -webkit-transition: .4s;
    transition: .4s;
}

.configopt .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

/*
.configopt input:checked+.slider {
    background-color: #34c73b;
}
*/

.configopt input:focus + .slider {
    box-shadow: 0 0 1px #34c73b;
}

.configopt input:checked + .slider:before {
    -webkit-transform: translateX(17px);
    -ms-transform: translateX(17px);
    transform: translateX(17px);
}

.configopt .slider.round {
    border-radius: 30px;
}

.configopt .slider.round:before {
    border-radius: 50%;
}

.configopt input.disabled + .slider {
    background-color: rgba(165, 165, 165, 0.36);
}

.configopt .SumoSelect {
    width: 100% !important;
}

.configopt .SumoSelect > .CaptionCont {
    border: 1px solid #e0e0e0;
}

.configopt .SumoSelect > .optWrapper > .options li.opt {
    padding-top: 2px;
    padding-bottom: 2px;
}

.configopt .form-group .tooltip div {
    line-height: 20px !important;
}

.configopt .tooltipoversize + .tooltip > .tooltip-inner,
.configopt .tooltipotheroption + .tooltip > .tooltip-inner,
.configopt .tooltipnogeofencing + .tooltip > .tooltip-inner {
    background-color: #f00;
    width: 200px;
}

.configopt .tooltipoversize + .tooltip.right .tooltip-arrow,
.configopt .tooltipotheroption + .tooltip.right .tooltip-arrow,
.configopt .tooltipnogeofencing + .tooltip.right .tooltip-arrow {
    border-right-color: #f00;
}

.configopt .input-append.color .add-on i,
.configopt .input-prepend.color .add-on i {
    display: block;
    cursor: pointer;
    width: 16px;
    height: 16px;
    border-radius: 50%;
}


/* report */
.configopt .config-report .input-group .selecttime {
    display: inline;
    width: 50%;
}

.configopt .config-report .input-group .selecttime.last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-left: 0px;
}

.configopt .config-report .input-group .selecttime.first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

/* localisation*/
.configopt .config-localisation {
}


.configopt .config-collapse {
    border: 1px solid #eee;
    padding: 0px 10px;
    border-radius: 2px;
    margin-left: 0px;
    cursor: pointer;

}

.configopt .config-collapse .collapse-title {
    height: 55px;
}


.configopt .config-collapse .collapse-title.disabled {
    opacity: 0.3;
}

.configopt .config-collapse .collapse-title .title-label {
    margin-top: 15px;
    line-height: 25px;
}


.configopt .config-padding-left {
    padding-left: 25px;
}

.configopt .form-inline .input-group .input-group-addon {
    width: 178px;
}

.configopt .form-select:after {
    z-index: 100;
}

@media (max-width: 768px) {
    .configopt .config-padding-left {
        padding-left: 0px;
    }

    .configopt .control-label.config-padding-left {
        padding-left: 10px;
    }
}

@media (max-width: 991px) {
    .form-inline .input-group .input-group-addon {
        width: 1%;
    }

    .form-inline .input-group .form-control {
        width: 100%;
    }
}


/***************** 20.5 page renew (subscription) ****************/

.panel-subscription h2 {
    color: #333;
    font-size: 15px;
    padding-left: 7px;
    margin-top: 10px;
    font-weight: normal;
    text-decoration: underline;
}

.panel-subscription h4.title {
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    color: #717171;
    font-weight: 400;
}

.panel-subscription .total-price {
    color: #333;
    padding-right: 20px;
    padding-top: 0px;
    min-height: 25px;
}

.panel-subscription .table-renew-sigfox tbody tr,
.panel-subscription .table-renew-server tbody tr {
    cursor: pointer;
}

.panel-subscription .table-renew-sigfox tbody tr td i {
    color: #999;
    font-size: 11px;
}

.panel-subscription .table-renew-sigfox > tbody > tr > td {
    padding-left: 20px;
    padding-right: 20px;
}

.panel-subscription .table-renew-server > tbody > tr > td {
    vertical-align: middle;
    padding-left: 20px;
    padding-right: 20px;
}

.panel-subscription .listsubject {
    margin-left: 0px;
    padding-left: 0px;
    list-style-type: none;
    max-height: 250px;
    overflow: scroll;
}

.panel-subscription .listsubject > div.line-subject {
    line-height: 40px;
    border-bottom: 1px solid #eee;
    padding-left: 10px;
    color: #333;
    font-size: 14px;
    /*background-color:#f5f5f5;*/
    position: relative;
}

.panel-subscription .listsubject > div.line-subject i {
    margin-right: 10px;
    font-size: 17px;
}

.panel-subscription .listsubject > div.line-subject span.subjectname {
    padding-left: 12px;
}

.panel-subscription .listsubject > div.line-subject span.price {
    right: 10px;
    position: absolute;
    padding-right: 10px;
}

.panel-subscription .listsubject > div {
    position: relative;
}

.panel-subscription .listsubject > div .label {
    color: #999;
    font-size: 13px;
    font-weight: normal;
    position: absolute;
    right: 100px;
    line-height: 27px;
}

.panel-subscription .title-collapse span {
    font-size: 13px;
}

.panel-subscription .panel-body {
    padding: 0px 0px;
    margin-bottom: -1px;
    position: relative;
}

.panel-subscription .panel-body h4.title {
    padding-left: 15px;
    margin-top: 0px;
    padding-top: 14px;
    padding-bottom: 14px;
    background-color: #fbfafa;
    text-transform: uppercase;
    font-size: 15px;
    margin: 0px;
}

.panel-subscription .panel-body h4.title i {
    position: absolute;
    right: 18px;
}

.panel-subscription .panel-body h4.title span {
    font-size: 10px;
}


.panel-subscription .panel-body h4.title .collapse-arrow {
    -webkit-transition: -webkit-transform 0.15s;
    -o-transition: -o-transform 0.15s;
    transition: transform .15s;
    position: absolute;
    right: 20px;
    display: inline-block;
    font-family: 'Material Design Icons';
    text-rendering: auto;
    line-height: 18px;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    top: 15px;
    color: #000;
    ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.panel-subscription .panel-body h4.title .collapse-arrow:before {
    content: '\F0142';
}

.panel-subscription .panel-body h4.title.collapsed .collapse-arrow {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.subtotal > div {
    position: relative;
}

.subtotal > div .label {
    color: #333;
    font-size: 13px;
    font-weight: 500;
    position: absolute;
    right: 100px;
}

/* subscription checkbox and select-all menu */

th.subscription_action {
    padding-top: 0px !important;
    vertical-align: middle;
}

th.subscription_action {
    width: 33px !important;
    min-width: 33px !important;
    position: relative !important;
    /*padding:0px !important;*/
}

td.subscription_action {
    width: 33px !important;
    min-width: 33px !important;
    position: relative !important;
    padding:5px !important;
}


.table-datatable .table-subscription td.alert_status,
.table-datatable .table-subscription th.alert_status {
    width: 120px !important;
}

.table-datatable .table-subscription th .select-all {
    padding: 8px;
    margin-left: -5px;
    margin-right: 0px;
    border: 1px solid #eee;
    color: #999;
    padding-bottom: 3px;
    margin-top: 10px;
    height: 36px;
    vertical-align: middle;
    border-radius: 2px;
}

.table-datatable .table-subscription th .select-all span {
    margin-right: 5px;
}

.table-datatable .table-subscription th .select-all.selected {
    display: inline-block;
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 0px;
    border-radius: 2px;
    background-color: rgba(245, 245, 245, 0.75) !important;
    border: 1px solid rgba(218, 230, 236, 0.7) !important;
}

.table-datatable .table-subscription .row-select-all th .btn {
    display: inline-block;
    height: 36px;
    margin-top: -1px;
    line-height:23px;
}

.table-datatable .table-subscription th .select-all input {
    visibility: hidden;
    display: none;
}

/*
.table-datatable .table-subscription th .select-all i {
    display: inline-block;
    height: 18px;
    width: 18px;
    cursor: pointer;
    vertical-align: middle;
    border: 1px solid #CCC;
    border-radius: 3px;
    text-align: center;
    padding-top: 1px;
    font-family: 'FontAwesome';
    margin-top: -4px;
    margin-right: 3px;
    font-size: 12px;
    position: relative;
}*/

.table-datatable .table-subscription th .select-all i {
    display: inline-block;
    height: 18px;
    width: 18px;
    cursor: pointer;
    vertical-align: middle;
    border: 1px solid #CCC;
    border-radius: 3px;
    text-align: center;
    margin-top: -4px;
    margin-right: 3px;
    font-size: 12px;
    position: relative;
}

.table-datatable .table-subscription th .select-all.selected input[type=checkbox]:checked + :before {
    width: 8px;
    height: 5px;
    position: absolute;
    top: 5px;
    left: 4px;
    content: " ";
    border-left: 2px solid #fea400;
    border-bottom: 2px solid #fea400;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.table-datatable .table-subscription .alertcontact a {
    display: inline-block;
}

.table-datatable .table-subscription .alertcontact i {
    margin-right: 10px;
    font-size: 17px;
}

.subscription_renew {
    text-align: right;
}

.table-datatable .row-select-all {
    border-bottom: 1px solid #eee;
}

.table-datatable tr.group td {
    color: #999;
}

.table-datatable tr.group:hover {
    background-color: #fff !important;
}

.table-datatable-gateway .editsubjectname {
    padding-left: 50px;
}


.table-renew-libelle {
    display:none;
}
@media (min-width: 568px) {
    .table-renew-libelle {
        display:block;
    }
}

.zoneedit.has-error input {
    border:1px solid #d65d5d;
}

/***************** 20.4 page order (sms) ****************/

.panel-order h2 {
    color: #333;
    font-size: 15px;
    padding-left: 7px;
    margin-top: 10px;
    font-weight: normal;
    text-decoration: underline;
}

.panel-order h4.title {
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    color: #717171;
    font-weight: 400;
}

.panel-order .total-price {
    color: #333;
    padding-right: 20px;
    padding-top: 0px;
    min-height: 25px;
}

.panel-order .table-renew-sigfox tbody tr,
.panel-order .table-renew-server tbody tr {
    cursor: pointer;
}

.panel-order .table-renew-sigfox tbody tr td i {
    color: #999;
    font-size: 11px;
}

.panel-order .table-renew-sigfox > tbody > tr > td {
    padding-left: 20px;
    padding-right: 20px;
}

.panel-order .table-renew-server > tbody > tr > td {
    vertical-align: middle;
    padding-left: 20px;
    padding-right: 20px;
}

.panel-order .listsubject {
    margin-left: 0px;
    padding-left: 0px;
    list-style-type: none;
    max-height: 250px;

}

.panel-order .listsubject > div.line-subject {
    line-height: 40px;
    border-bottom: 1px solid #eee;
    padding-left: 10px;
    color: #333;
    font-size: 14px;
    /*background-color:#f5f5f5;*/
    position: relative;
}

.panel-order .listsubject > div.line-subject i {
    margin-right: 10px;
    font-size: 17px;
}

.panel-subscription .listsubject > div.line-subject span.subjectname {
    padding-left: 12px;
}

.panel-order .listsubject > div.line-subject span.price {
    right: 10px;
    position: absolute;
    padding-right: 10px;
}

.panel-order .listsubject > div {
    position: relative;
}

.panel-order .listsubject > div .label {
    color: #999;
    font-size: 13px;
    font-weight: normal;
    position: absolute;
    right: 100px;
    line-height: 27px;
}

.panel-order .title-collapse span {
    font-size: 13px;
}

.panel-order .panel-body {
    padding: 0px 0px;
    margin-bottom: -1px;
    position: relative;
}

.panel-order .panel-body h4.title {
    padding-left: 15px;
    margin-top: 0px;
    padding-top: 14px;
    padding-bottom: 14px;
    background-color: #fbfafa;
    text-transform: uppercase;
    font-size: 15px;

}

.panel-order .panel-body h4.title i {
    position: absolute;
    right: 18px;
}

.panel-order .panel-body h4.title span {
    font-size: 10px;
}


.panel-order .panel-body h4.title i {
    position: absolute;
    right: 18px;
}

.panel-order .panel-body h4.title span {
    font-size: 10px;
}


.panel-order .panel-body h4.title .collapse-arrow {
    -webkit-transition: -webkit-transform 0.15s;
    -o-transition: -o-transform 0.15s;
    transition: transform .15s;
    position: absolute;
    right: 20px;
    display: inline-block;
    font-family: 'Material Design Icons';
    text-rendering: auto;
    line-height: 18px;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    top: 15px;
    color: #000;
    ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.panel-order .panel-body h4.title .collapse-arrow:before {
    content: '\F0142';
}

.panel-order .panel-body h4.title.collapsed .collapse-arrow {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.subtotal > div {
    position: relative;
}

.subtotal > div .label {
    color: #333;
    font-size: 13px;
    font-weight: 500;
    position: absolute;
    right: 100px;
}

.panel-order .orderaddress {
    list-style: none;
    line-height: 25px;
    padding-left: 10px;
    margin-bottom: 15px;
    color: #333;
}

.panel-order .link-update {
    margin-right: 10px;
}

.panel-order .zoneedit {
    display: inline-block;
    margin-bottom: 5px;
}

.panel-order .company {
    font-weight: 500;
}

.panel-order .error_messages {
    padding-left: 0px;
    margin-left: 20px;
}

.panel-order .error_messages li {
    font-weight: 500;
}

/***************** 20.5 orders Page CB paybox   ****************/

.panel-order-cb {
}

.panel-order-cb h3 {
    color: #333;
    margin-bottom: 10px
}

.panel-order-cb .table-transaction td:first-child {
    width: 150px;
}

/***************** 20.6 Alertes   ****************/
#datatable.table-history td {
    font-weight: normal;
    vertical-align: top;
}

.table-datatable .status-alert {
    background-color: #d84548;
}

.table-datatable .status-alert:hover td {
    background-color: #ed4d50 !important;
}

.table-datatable .status-alert td {
    color: #fff !important;
}


.table-datatable .bell-active {
    color: #f46176;
}

.table-datatable .bell-active {
    color: #f46176;
}

.table-datatable .bell-acquited {
    color: #F7B740; /*#cccccc*/
}

.table-datatable .bell-finished {
    color: #33CE36;
}


.table-datatable .disabled-row {
    opacity: 0.3;
}

.table-datatable .disabled-row .mdi-bell-circle {
    color: #000 !important;
}


.label-alert {
    padding: 0.4em 1.5em 0.1em 1em;
    min-width: 120px;
    display: inline-block;
    line-height: 20px;
}

.label-alert i {
    font-size: 15px;
    color: #ffffff;
    vertical-align: middle;
    margin-bottom: 4px;
    margin-right: 5px;
    float: left;
}

.table-datatable.table-alerts .alert_action_link {
    float: right;
    border: 0px;
}

.table-datatable.table-alerts .alert_subjectname {
    font-weight: 500 !important;
}


/* action checkbox and select-all menu */
.table-datatable.table-alerts th.alert_action {
    padding-top: 0px !important;
    vertical-align: middle;
}


.table-datatable.table-alerts td {
    padding-top: 10px;
    padding-bottom: 10px;
}

.table-datatable.table-alerts td.alert_action,
.table-datatable.table-alerts th.alert_action {
    width: 73px !important;
    min-width: 73px !important;
    position: relative !important;
}

.table-datatable.table-alerts td.alert_status,
.table-datatable.table-alerts th.alert_status {
    width: 20px !important;
    min-width: 20px;
    text-align: center !important;
    padding: 0px;
    padding-top: 15px;
}

.table-datatable.table-alerts th .select-all {
    padding: 8px;
    margin-left: -5px;
    margin-right: 0px;
    border: 1px solid #eee;
    color: #999;
    padding-bottom: 3px;
    margin-top: 10px;
    height: 36px;
    vertical-align: middle;
    border-radius: 4px;
}

.table-datatable.table-alerts th .select-all span {
    margin-right: 5px;
}

.table-datatable.table-alerts th .select-all.selected {
    display: inline-block;
    margin-top: 0px;
    /*margin-right: 10px;*/
    margin-bottom: 0px;
    border-radius: 4px;
    background-color: rgba(245, 245, 245, 0.75) !important;
    border: 1px solid rgba(218, 230, 236, 0.7) !important;
}

.table-datatable.table-alerts .row-select-all th .btn {
    display: inline-block;
    margin-top: -1px;
}

.table-datatable.table-alerts th .select-all input {
    visibility: hidden;
    display: none;
}

.table-datatable.table-alerts th .select-all i {
    display: inline-block;
    height: 18px;
    width: 18px;
    cursor: pointer;
    vertical-align: middle;
    border: 1px solid #CCC;
    border-radius: 3px;
    text-align: center;
    padding-top: 1px;
    margin-top: -4px;
    margin-right: 3px;
    font-size: 12px;
    position: relative;
}

.table-datatable.table-alerts th .select-all.selected input[type=checkbox]:checked + :after {
    /*
    width: 8px;
    height: 5px;
    position: absolute;
    top: 2px;
    left: 3px;
    font-size: 13px;
    content: "\f068";
    color: #d74548;
    transform: none;*/

    width: 8px;
    height: 5px;
    position: absolute;
    top: 5px;
    left: 4px;
    content: " ";
    border-left: 2px solid #fea400;
    border-bottom: 2px solid #fea400;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);

}


.table-datatable.table-alerts td,
.table-datatable.table-alerts-details td {
    vertical-align: top !important;
}

.table-datatable.table-alerts .alertcontact a {
    display: inline-block;
}

.table-datatable.table-alerts .alert-subjectname {
    font-weight: 500;
}


.table-datatable.table-alerts .alertcontact i {
    color: #33c73c;
    margin-right: 10px;
    font-size: 17px;
}


.table-datatable.table-alerts .alert-item-info {
    position: relative;
    padding-left: 25px;
    display: block;
}

.table-datatable.table-alerts .alert-item-info i {
    position: absolute;
    left: 0px;
    font-size: 19px !important;
    top: -4px;
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
}


/* action invoice download */
.table-datatable th.invoice_action {
    padding-top: 0px !important;
    vertical-align: middle;
}

.table-datatable td.invoice_action,
.table-datatable th.invoice_action {
    width: 30px !important;
    min-width: 30px !important;
    position: relative !important;
}




/* page utilisateurs */


/* page account */
.group-input-icon {
    position: relative;
    width: 100%;
    display: inline-block;
}


.group-input-icon .btn-eye {
    cursor: pointer;
    pointer-events: all;
    font-size: 21px;
    line-height: 35px;
    color: #e0e0e0;
    position: absolute;
    right: 10px;
    top: 0;
}

/* page service -> api rest */
#service .configopt input:checked + .slider {
    background-color: #5bd457;
}

/***************** 20.7 messagerie  ****************/

.avatar-circle {
    width: 40px;
    height: 40px;
    background-color: #f2a94b;
    color: #fff;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    border-radius: 50%;
    font-size: 16px;
    display: inline-block;
}
.avatar-admin {
    background-color: #d94c4c;
}

#tickets .avatar-circle {
    margin-right:20px;
}
#tickets .ticket-card,
#ticket-messages .ticket-card {
    padding-bottom:30px;
    padding-left:30px;
    position:relative
}

#tickets .ticket-action {
    position:absolute;
    right: 10px;
    top: 16px;
}
#tickets .ticket-date {
    margin-right:20px;
}

@media (min-width: 1600px) {
    #tickets .ticket-action {
        position:absolute;
        right:-30px;
        top:-0px;
    }
    #tickets .ticket-date {
        margin-right:0px;
    }

}

@media (min-width: 1600px) {
    #tickets .ticket-list {
        max-width:400px;
    }
}


#tickets-messages .form-group {
    margin-bottom: 15px;
}


#tickets {

}
#tickets .dropdown-toggle {
    margin-left:10px;
}
#tickets .dropdown-toggle::after {
    display:none !important;
}


#tickets-create .form {
    border-right:1px solid #eee;
    padding-right:30px;
}

@media (min-width: 1600px) {
    #tickets-create .col-form-contact {
        width: auto;
        min-width:700px;
    }
}


#tickets-create .contact-info h4 a {
    color: #1e2022;
    display: block;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 5px;
    padding-bottom: 15px;
    text-align: left;
    text-decoration: none;
}



#tickets-create textarea.form-control {
    min-height:350px;
}

#tickets-create .col-infos-contact {
    border-right:1px solid #eee;
    padding-left:40px;
    padding-right:45px;
}


@media (min-width: 1800px) {
    #tickets-create .col-infos-contact {
        max-width: 500px;
    }
}


#tickets .response-files {
    list-style: none;
    padding: 0;
    margin: 0;
}
#tickets .response-files li {
    margin-bottom: 5px;
    padding: 5px 15px;
    border: 1px solid #ccc;
    display: inline-block;
    border-radius:3px;
}
#tickets .response-files li a {
    text-decoration: none;
    color: #337ab7;
}
#tickets .response-files li:hover {
    background-color:#eee;
}


/***************** 20.8 Administration  ****************/

.table-datatable.table-admin td {
    vertical-align: top !important;
}


.table-datatable.table-admin-users .subaccount {
    position: relative;
}

.table-datatable.table-admin-users .subaccount td:first-child {
    padding-left: 12px;
}

.table-datatable.table-admin-users .subsubaccount td:first-child {
    padding-left: 30px;
}

.table-datatable.table-admin-users td:first-child i {
    position: absolute;
    left: 0px;
    font-size: 19px !important;
    top: 0px;
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
}

.table-datatable.table-admin-users .subaccount td {
    position: relative;
}

.table-datatable.table-admin-users .subaccount td i.zmdi-long-arrow-return {
    font-size: 20px;
    left: 20px;
    top: 10px
}

.table-datatable.table-admin-users .subsubaccount td i.zmdi-long-arrow-return {
    font-size: 20px;
    left: 50px;
    top: 10px
}


.admin-edit-device .SumoSelect > .optWrapper{
    max-width : 600px !important;
}

.form-device .tooltip-inner {
    text-align: left;
}


.tdsigfoxzone,
.bg-zone-sigfox {
    background-color: #d9edf7 !important;
}

.tdclientzone,
.bg-zone-client {
    background-color: #fcf8e3 !important;
}

.td-min-padding {
    padding: 10px 0px 5px 15px !important;
}

/* daattable button icon */
.admin-order .table-datatable .table > tbody > tr > td.action-state-button button {
    min-width:165px;
}




#tickets-admin form {
    max-width: 100% !important;
}

#tickets-admin .panel-body {
    max-width: 900px;
}


#tickets-admin .table-ticket {
    border: 1px solid #eee;
}

#tickets-admin .first-message .panel .panel-heading {
    font-size: 14px;
    margin-bottom: 0px;
    background-color: #58b1ed;
    color:#fff;
    border: 0px;
}

#tickets-admin .first-message .panel {
    border: 0px;
    margin-bottom: 20px;
    box-shadow: none;
    border-radius: 0px;
}

#tickets-admin .first-message .panel-body {
    box-shadow : 0px 3px 20px rgb(0 0 0 / 10%);
    border-top: 0px;
    padding-bottom : 25px;
}

#tickets-admin .comments .panel {
    border: 0px;
    margin-bottom: 20px;
    box-shadow: none;
    border-radius: 0px;
}

#tickets-admin .comments .panel-body {
    box-shadow : 0px 3px 20px rgb(0 0 0 / 10%);
    border-top: 0px;
    padding-bottom : 25px;
}

#tickets-admin .comments .panel .panel-heading {
    font-size: 14px;
    margin-bottom: 0px;
    background-color: #ebeef0;
    border: 0px;
    color: #333;

}

#tickets-admin .comments .panel.panel-success .panel-heading {
    background-color: #ebeef0;
    border: 0px;
}

#tickets-admin .comments .panel.panel-success .panel-heading b {
    color: #d74547;
    border: 0px;
}


#tickets-admin .table-ticket pre,
#tickets-admin .first-message pre,
#tickets-admin .comments pre {
    white-space: pre-wrap;
    display: block;
    padding: 0px;
    margin: 0px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    word-break: normal;
    word-wrap: normal;
    background-color: #ffffff;
    border: 0px;
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
}

#tickets-admin .custom-file-btn {
    width : 100%;
}
#tickets-admin .custom-file-btn input[type="file"] {
    display: none;
}
#tickets-admin div.MultiFile-label {
    position:relative;
    border: 1px solid #ccc;
    padding: 6px 12px;
    cursor: pointer;
    display: block;
    margin-bottom: 10px;
    margin-top: 10px;
}
#tickets-admin .file-delete-icon {
    position: absolute;
    right: 10px;
    top: 13px;
    color: #ee5f5b;
    font-size: 18px;
    z-index: 1000;
}

#tickets-admin .response-files {
    list-style: none;
    padding: 0;
    margin: 0;
}
#tickets-admin .response-files li {
    margin-bottom: 5px;
    padding: 5px 15px;
    border: 1px solid #ccc;
    display: inline-block;
    border-radius:3px;
}
#tickets-admin .response-files li a {
    text-decoration: none;
    color: #337ab7;
}
#tickets-admin .response-files li:hover {
    background-color:#eee;
}

#tickets-admin .response-files .file-delete-icon {
    position: absolute;
    right: -10px;
    top: -15px;
    color: #d74548;
    font-size: 12px;
}
#tickets-admin .response-files .file-delete-icon:before {
    background-color: #ffffff;
    border-radius: 50%;
    width: 19px;
    height: 19px;
    padding-left: 2px;
    margin-top: 5px;
    border: 2px solid #e5e5e5;
}





/* =============== RESPONSIVE =================== */

@media (max-width: 1200px) {

    /* page home */
    .home .pane-body {
        padding: 10px;
    }

    .home h1 {
        color: #333;
        font-size: 51px
    }

    .home h1 span {
        font-size: 62px;
        color: #d74548
    }

    .home .home-contain {
        display: block;
        width: 100%;
        margin-top: -10%
    }

    .home .home-contain h4 {
        font-size: 16px;
        color: #333;
        font-weight: 400;
        font-family: roboto
    }


}


@media (max-width: 768px) {
    aside.left-panel.collapsed {
        width: 250px;
        left: 0px;
        top: 0;
        z-index: 99;
        overflow-y: scroll !important;
        position: fixed;
        /*overflow: hidden !important;*/
    }

    aside.left-panel.collapsed + .content {
        /*
    margin-left: 0px;
    transform: translate3d(250px, 0px, 0px);
    -ms-transform: translate3d(250px, 0px, 0px);
    -webkit-transform: translate3d(250px, 0px, 0px);
    -moz-transition: translate3d(250px, 0px, 0px);
    -o-transition: translate3d(250px, 0px, 0px);
    */
    }

    aside.left-panel {
        left: 100%;
    }

    section.content {
        margin-left: 0px;
    }

    .collapsed + .content .footer {
        left: 0px;
        bottom: 0px;
    }

    .wrapper-page {
        width: 100%;
        padding: 5px;
        margin: 0px 0px;
        box-shadow: none;
        transform: none;
    }

    .content > .container-fluid {
        padding-left: 0px;
        padding-right: 0px;
    }

    .content > .container-fluid > .row {
        padding-left: 0px;
        padding-right: 0px;
        margin-left: 0px;
        margin-right: 0px
    }

    /*
    .content>.container-fluid>.row>.col-lg-12,
    .content>.container-fluid>.row>.col-md-12 {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }*/
    .content > .top-head.container-fluid {
        padding-left: 20px;
        padding-right: 0px;
    }

    /*
    .wraper {
        padding-top: 64px;
    }
    */
    .page-header h1 {
        margin-top: 0px;
    }

    .footer {
        left: 0px;
    }

    header {
        left: 0px;
    }

    .navigation ul li a i {
        float: left !important;
    }

    /* device / detail select*/
    #devices-selects-map {
        width: 100%;
    }

    .SumoSelect {
        width: 100%;
    }

    /*map btn */
    #btnselecttype {
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }

    #btnselecttype button {
        text-align: left
    }

    #btnselecttype button span {
        float: right;
        margin-top: 8px
    }

    #reportrange_map {
        width: 100%;
    }

    /* chart btn  */
    #reportrange_chart {
        width: 100%;
    }

    #devices-selects-chart {
        width: 100%;
        margin-bottom: 5px;
    }

    #unit-selects-chart {
        width: 100%;
        margin-left: 0px !important;
        margin-bottom: 5px;
    }

    /* page home */
    .home .pane-body {
        padding: 10px;
    }

    .home h1 {
        color: #333;
        font-size: 41px
    }

    .home h1 span {
        font-size: 50px;
        color: #d74548
    }

    .home .home-contain {
        display: block;
        width: 100%;
        margin-top: -10%
    }

    .home .home-contain h4 {
        font-size: 16px;
        color: #333;
        font-weight: 400;
        font-family: roboto
    }

    .table-datatable .filters {
        display: none;
    }

    .table-datatable .table > thead > tr > th.sm-col {
        min-width: 80px;
        width: 80px !important;
    }

    .table-datatable .table > thead > tr > th.md-col {
        min-width: 100px;
        width: 80px !important;
    }

    .table-datatable .table > thead > tr > th.md-col-date {
        min-width: 80px;
        width: 80px !important;
    }


    .top-menu {
        float: right;
        margin: 0px;
    }

    .top-menu li {
        display: inline-block;
    }

    .top-menu .open .dropdown-menu {
        position: absolute;
        width: 200px !important;
        background: #fff;
    }

    .top-menu .dropdown-menu {
        right: 0;
        left: auto;
    }

    .navbar-nav .open .dropdown-menu {
        position: absolute !important;
        width: auto;
        margin-top: 0;
        background-color: #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        border: none;
        max-height: 330px;

    }

    .table-datatable .filters {
        display: none;
    }

    .table-datatable .table > thead > tr > th.sm-col {
        min-width: 80px;
        width: 80px !important;
    }

    .table-datatable .table > thead > tr > th.md-col {
        min-width: 100px;
        width: 80px !important;
    }

}


@media (max-width: 450px) {

    body {
        min-width: 350px;
    }

    header {
        min-width: 350px;
    }

    .username {
        display: none;
    }

    .dropdown .extended i,
    .dropdown .extended .thumb-sm,
    .dropdown .extended strong {
        display: none;
    }

}